기본에 충실한 웹 사이트 만들기, (사용자를) 생각하게 하지마!

친절한 웹사이트는 어떤 모습일까요? 사용자가 생각하지 않고 쉽게 이해 가능한 사이트가 아닐까요? 한 권의 책, "(사용자를) 생각하게 하지마"를 통해 그 방법을 알아볼게요.

스티브 크룩(Steve Krug)이 지은 이 책은 화려한 UX가 아닌 기본에 충실한 UX를 보여줍니다. 웹 실무에 바로 적용 가능한 기본 팁들과 왜 그렇게 적용되는지 이유도 쉽게 설명되어 있어요. 종종 귀여운 카툰도 등장하고요. 다 읽고 난 다음엔 카툰이 먼저 생각나는 묘한 책입니다. 친절한 웹 사이트를 만드는 방법은 많이 있습니다. 그럼 가장 핵심에 다가가는 방법은 어떤 것일까요? 아마도 화려한 테크닉이 아닌 조용하지만 강한, 즉 기본에 충실한 UX가 사용자에게 감동을 준다 생각합니다. 그럼 이 책에 담겨있는 "관례 사용하기" 부분을 통해 기본에 충실한 UX를 알아볼게요.

 

첫째, 페이지상 항목 위치

보통 상단 위쪽 슬로워크 로고부터 순서대로 읽힙니다.

"로고를 예로 들어보자. 사용자는 로고가 보통 페이지 상단 위쪽 모서리에 있으리라 생각하며 최초의 탐색은 왼쪽 위에서 대각선 아래로 이루어진다. 적어도 왼쪽에서 오른쪽으로 글을 읽는 나라에서는 그렇다." (p33_관례를 이용하라)

"웹 사이트의 사이트 ID나 로고는 건물의 이름 같은 역할을 한다."(p72_여기는 캔사스가 확실히 아냐)

건물의 이름이 있어야 할 장소에 다른 내용으로 대체되어 있다면 방문자는 분명 당황합니다. 이처럼 웹사이트의 상단 왼쪽에는 로고를 넣는 게 좋습니다. 클라이언트 작업을 할 때면 로고 부분에 단체에서 많이 사용되는 단어나 연락처 등을 넣어달라는 요청이 종종 있는데요. 위의 사용자 패턴을 고려하여 단체나 기관의 심볼을 넣고 단어나 연락처를 넣었던 기억이 나네요. 

둘째, 적절한 네이밍

"메뉴 이름을 예로 들어보자. 흔히 귀엽고 참신한 이름, 마케팅에서 비롯된 이름, 특정 회사에서만 사용하는 이름, 익숙하지 않은 기술적인 이름들이 이런 문제를 일으키는 주범이다"(p14_사용자는 이럴 때 고민한다)

만약 슬로워크에서 "구인"이라는 단어는 참신하지 않다는 이유로 "슬로워커"라고 가정합시다. 만약 슬로워크 홈페이지에 처음 방문한 사람은 이게 뭐지? 슬로워커? 일하는 사람? 그 카테고리의 목적을 모른 채 클릭을 하게 되는 것이죠. 

셋째, 태그라인  

"태그라인이란? 사이트 ID 바로 옆 공간은 몸값이 가장 비싼 곳 중 하나다. 우리는 ID에 시각적으로 연결된 문구가 태그라인이며 그 문구가 사이트 전체를 설명한다는 사실을 안다." (p99_중요한 메시지는 이렇게 전달하라)

태그라인을 선택할 때 고려해야 할 몇 가지 특성 (p102_좋은 태그라인이 최고야)

1. 좋은 태그라인은 명확하고 유익하며 여러분이 만든 사이트나 여러분이 몸담은 조직이 하는 일을 정확하게 설명한다.

2. 좋은 태그라인은 충분한 내용을 담고 있되 과하게 길지 않다. 6~8단어 정도의 분량이 적당하다. 

    그 정도면 전체 생각을 담지 못할 정도로 짧지 않고 집중도가 떨어질 정도로 길지도 않다.

3. 나쁜 태그라인은 포괄적이다.

번외, 슬로워크의 태그라인 사용 사례

태그라인이 있는 슬로워크 홈페이지 (~2013)

태그라인이 사라진 슬로워크 홈페이지 (2014~)

위 사진 2장의 상단메뉴를 봐주세요. 차이점을 발견하셨나요? 디자인 레이아웃의 변화도 있지만, 로고 옆에 있던 태그라인은 현재 홈페이지에서는 사라진 걸 알 수 있습니다. 초창기 슬로워크는 대부분의 클라이언트에게 낯설었죠. 그래서 로고 옆에 무엇을 하는 곳인지 알려주었습니다. 하지만 지금은 많은 분이 알아봐 주시기에 과감히 삭제하고 콘텐츠로 슬로워크를 알리고 있습니다.

책에서는 이 밖에도 홈페이지 환영 문구를 어떻게 적어야 하는지 등, 기본적인 팁들도 배울 수 있습니다. 일단 위의 3가지만 잘 지켜진다면 어떤 사업을 하는 곳인지, 사용자가 클릭 전에 바로 알 수 있는 친절한 사이트를 만들 수 있지 않을까요? 

참고도서 : 사용자를 생각하게 하지마!

by 종달새 발자국