brunch

You can make anything
by writing

- C.S.Lewis -

by 김효진 Dec 01. 2020

(사용자를) 생각하게 하지 마!

Steve Krug


2번 정독 후 이 책의 전체적인 부분을 텍스트로 정리해보고 싶다는 생각을 하였다.

또한 디자이너, 마케터, 개발자 모든 분들에게 추천해 드리고 싶은 책이다. 


이 책의 키워드는 사용성이다. 사용하기 좋은 제품을 만들려면 사용자에 대해 잘 알아야 하고, 사용자에 대해 잘 알려면 사용자를 직접 관찰해보는 것보다 더 나은 방법은 없다는 것을 이 책에서는 강조한다. 또한 효과적인 웹 디자인을 위해 사람들이 웹을 사용하는 방식과 효과적인 웹 디자인을 위한 방법들도 함께 기록되어있다. '사용자는 웹 페이지를 읽지 않는다. 훑어본다.' 

마무리는 웹 접근성에 대하여 상기시켜준다. 접근성이 어떤 이들의 생활에 얼마나 엄청난 도움을 주는지를 간과하곤 하지만, 이것은 단순히 해야 할 일이 아니라 반드시 해야 할 의미 깊은 일이다. 







사용성

사용성은 자신이 디자인하는 사물을 사용자들이 성공적으로 사용할 수 있게 하는 것이다. 


사용성이 뛰어나다는 것은

평범한 혹은 평균 이하의 능력과 경험을 가진 사람이 어떤 사물을 사용해서 무엇인가 하려고 할 때 사용법을 스스로 알아낼 수 있다는 것이다. 단 투입한 수고에 비해 얻은 가치가 더 커야 한다.







효과적인 웹 디자인


스티브 크룩의 사용성 제1원칙

사용자를 고민에 빠뜨리지 마라! 설명이 없어도 보자마자 알 수 있게끔 말이다. 


사이트를 만들 때는 어디서부터 봐야 하지? 이거 클릭할 수 있는 건가? 이 링크 2개는 똑같은 거 같은데 맞나? 이런 물음표가 사라지게 해야 한다. 모든 물음표가 인지적 부하를 더하는 주의 분산 요인이 된다는 게 문제다. 한 번일 때는 그 영향이 가벼울 수 있다. 하지만 무엇을 클릭할지 결정하는 일처럼 자주 하는 행위에 매번 주의가 분산된다면 모여서 커다란 결함이 될 수 있다. 


일반적으로 사람들은 사용방법을 알아내기 위해 고민하고 싶어 하지 않는다. 

명확하고 쉽게 만들기 위해 노력을 기울인 흔적이 없는 사이트를 방문하면 사이트뿐 아니라 사이트를 만든 회사에 대한 신뢰도 줄어든다. 사용자들은 여러분이 만든 페이지를 보는데 우리 상상보다 훨씬 더 적은 시간을 소비한다.  그러므로 효과적인 웹 페이지를 만들려면 사용자가 마법처럼 사용 방법을 한눈에 알아볼 수 있어야 한다. 그렇게 하려면 자명하게 이해되는 페이지, 아니면 최소한 설명이 없어도 이해할 수 있는 페이지를 만들면 된다. 






효과적인 웹 페이지 디자인을 위한

현실 사람들이 웹을 사용하는 방식 세 가지 


첫 번째 진실:

사용자는 웹 페이지를 읽지 않는다.

훑어본다.

사용자 페이지에서 무엇을 보는지는 사용자가 무슨 생각을 하느냐에 달려 있다. 그리고 보통 그 범위는 페이지 일부에 그친다. 


두 번째 진실:

최선의 안을 고르는 사용자는 거의 없다. 합리적이라고 생각되는 첫 번째 안을 선택하는 사용자가 대부분이다. 이러한 선택 전략은 '만족하기'라고 불린다. 


세 번째 진실:

사용자는 작동방식까지 이해하려 하지 않는다.

적당히 임기응변한다.






사용자에게 알려주었으면 하는 내용을 최대한 많이 전달하고

이해시키기 위해 꼭 해야 할 중요한 사항 


'관례를 이용하라'

관례는 널리 사용되거나 표준화된 디자인 패턴을 가리킨다. 통용되고 있는 관례를 따르면 사용자가 내용을 빠르고 쉽게 이해하는데 도움이 된다. 


작동 방식: 물건을 판매하는 거의 모든 사이트는 쇼핑카트 메타포를 쓴다. 그리고 지불 방법, 배송 주소 등 특정 항목에 매우 비슷한 형태를 적용한다.

페이지상 항목의 위치: 사용자는 로고가 보통 페이지 상단 왼쪽 모서리에 있으리라 생각하며 최초의 탐색은 왼쪽 위에서 대각선 아래로 이루어진다. 


하지만 디자이너는 관례를 답습하기보다는 새롭고 다른 것을 창조하는데 끌리곤 한다.

혁신적인 결과를 내려면 대체하고자 하는 것이 지닌 가치를 이해해야 한다. 


만약 웹 관례를 활용하지 않으려면

(a) 사람들이 별도로 익히는 수고를 하지 않아도 될 정도로 명확하거나 설명 없이도 이해할 수 있어서 관례만큼이나 좋은 것으로 대체해야 한다.

(b) 익히는 수고를 약간 들이더라도 그만큼의 가치가 있는 것으로 대체해야 한다. 


창의적이고 혁신적인 방법을 얼마든지 사용해도 좋다. 심미적인 요소도 얼마든지 넣어도 된다. 단, 사용자가의 편의성을 확실히 보장한 상태에서 해야 한다.






불필요한 단어를 덜어내라 건강한 문장은 간결하다.

아무도 읽지 않을 단어를 없앴을 때 얻는 몇 가지 유익한 효과가 있다. 페이지의 소음 수준이 낮아지고, 유용한 부분이 더욱 도드라지며 페이지 길이가 짧아지므로 사용자는 스크롤을 내리지 않고도 한눈에 전체를 훑어볼 수 있다.






웹 내비게이션

웹 디자인 시 상위 단계에 비해 하위 단계에 적은 관심을 기울이는 일은 무척 흔한 일이다.

또한 디자이너들은 사이트에 하위 단계까지 진입한 사용자라면 그 사이트의 작동 방식을 대부분 이해라고 있을 거라는 착각을 한다. 하지만 실제 사용자들이 머무는 시간의 양은 상위 페이지나 하위 페이지나 비슷하다. 

그리고 처음부터 내비게이션 전체 구조를 고려해서 설계하지 않으면 나중에 이어 붙인 부분에서도 일관성이 유지되길 기대하긴 어렵다. 


사용자는 사이트에서 '길을 잃은 듯한' 느낌을 자주 받는다. 웹에서 자신이 지금 어디에 머물고 있는지 표시하려면 페이지 내비게이션 바나 목록, 메뉴 어디에든 사용자의 현재 위치를 강조해서 보여주면 된다.  






홈페이지의 정체성과 임무

홈페이지는 사용자가 접속하는 즉시 이 사이트가 뭘 하는 곳이고 왜 존재하는지 바로 알게 해야 한다. 그리고 가능하다면 왜 다른 사이트 말고 이 사이트를 사용해야 하는지도 알려주면 좋다.

사용자가 웹 사이트나 웹 페이지에 처음 접속한 몇 초가 매우 중요하다. 사용자가 초기에 받은 인상이 실제 그 페이지에서 어느 정도 시간을 보낸 후 에도 거의 변하지 않는다. 다시 말해 사람들은 빠르게 판단을 내리는 경향이 있다. 






초보자도 알아보기 쉬운 수준으로 만들었다고 해서 전문가가 모욕감을 느끼지는 않는다. 진정한 명료성은 단순히 수준을 낮춰서 얻을 수 있는 게 아니다. 비전문가 대부분이 사용할 수 있다면 전문가가 사용하는 데에도 문제가 없을 것이다. 






'평균 사용자'라는 신화

웹 디자인 회의는 웹 사용자들이 우리와 비슷하다는 믿음 때문에 교착 상태에 빠지곤 한다. 하지만 이러한 믿음 뒤에는 더 심각한 문제가 도사리고 있다. 많은 웹 사용자가 어떠하리라는 근거 없는 확신 말이다.

개인적, 직업적 의견의 충돌이 정체기에 들어서면 평균 웹 사용자가 정말 좋아하는 것이 무엇인지 알아내는 방향으로 흘러간다. 하지만 진짜 문제는 평규 사용자는 존재하지 않는다는데 있다.  


모든 웹 사용자는 다르다.

그러니 웹 사용 방식도 모두 다르다고 보면 된다. 


사용자를 주의 깊게 관찰하고 그들이 본인의 의도, 동기, 사고 과정을 표현하는 내용을 들어보면 볼수록 웹 페이지에 대한 개인의 반응을 결정짓는 변수가 너무 많으므로 일차원적인 호불호의 관점에서 사용자를 묘사하려고 하는 시도는 결국 수포로 돌아가는 비생산적인 행동이라는 걸 깨닫게 된다.

평균 사용자 신화가 끼치는 가장 부정적인 영향은 사람들이 좋아하는 것이 무엇인지 알아내야 좋은 웹 디자인이 완성된다는 환상에 힘을 실어 준다는 점이다.  


문제는 많은 웹 디자인 질문에 딱 잘라 '옳다'고 할 수 있는 답이 없다는 것이다. 사용자의 필요를 채워주는 디자인이 좋은 디자인이다. 깊은 고민을 거쳐서 세심하게 제작하고 평가해야 좋은 디자인이 완성된다.








사용성 평가

평가는 무언가 증명하려고 하는 게 아니다. 실행으로 옮길 수 있는 통찰을 얻기 위해 하는 것이다. 


포커스 그룹은 사용성 평가가 아니다.


DIY 사용성 평가

한 달에 하루 오전 시간을 내서 평가하고, 개발팀과 관심 있는 이해관계자에게 브라 핑하며, 평가 중에 기록한 내용을 비교하며 고칠 부분을 결정한다. 오후가 시작될 무렵에는 그달 치 사용성 평가가 끝나 있을 것이다. 

참가자 선택 방법 : 필요한 경우 되는대로 모집한다. '실제' 사용자를 대상으로 평가한다는 점 보다 평가를 자주 한다는 점이 더 중요하다. 

주목적 : 가장 시급한 문제를 구별하고 다음 평가가 진행되기 전에 수정되도록 업무를 할당한다.








모바일 앱


모바일에서는 사람들이 더 빨리 움직이고 더 적게 읽는다. 


화면 공간 부족 때문에 사용성이 희생되서는 안 된다. 


어포던스를 감추지 마라

어포던스는 시각적 사용자 인터페이스의 핵심이다. 버튼을 예로 들어보면 입체적인 형태의 버튼은 클릭해야 한다는 느낌이 명확히 든다. 링크를 보면 다른 것으로 연결될 것 같다는 느낌이 든다. 이처럼 시각적 단서가 명확할수록 신호의 모호성이 감소한다. 

 

커서 없음 = 호버 없음 = 힌트 없음

모바일 기기에 많이 사용되는 정전식 터치스크린은 손가락이 닿았을 때 만 감지한다. 손가락이 유리 위로 맴돌 때 감지하는 호버 기능은 없다. 그래서 모바일 기기에는 커서가 없는 것이다. 


사용자 가이드

누구나 앱을 다운로드한 직후에는 기꺼이 시간을 들여서 사용법을 익힌다. 하지만 다시 사용할 때도 같은 노력을 또 들여야 한다면 그 제품의 사용자 경험이 만족스러울 리 없다. 앱의 기능이 특별히 인상적이지 않았다면 그 앱은 버려지기 십상이다. 








웹 접근성

인구의_%가 장애인이다.

접근성이 어떤 이들의 생활에 얼마나 엄청난 도움을 주는지를 간과하곤 하지만, 이것은 단순히 해야 할 일이 아니라 반드시 해야 할  의미 깊은 일이다. 컴퓨터를 사용할 수 있는 시각 장애인 대부분이 접근성 덕분에 뉴스나 잡지를 혼자 읽을 수 있게 되었다. 상상해 보라. 


사이트 접근성을 개선하는 최고의 방법은 자주 평가하고 모두를 혼란스럽게 하는 부분을 꾸준히 제거하는 것이다. 








용어

▒ 전문가 사용성 리뷰

사용자의 작업이 막힐 법한 부분, 사용자가 헷갈릴 수 있는 부분에 대해 기록하는 것.

▒ 사용성 평가

다른 사람이 사용하는 모습을 관찰하며 그들이 어디에서 막히는지, 어디에서 혼란스러워하는지 기록하는 것.

▒ 인터랙션 디자인

사용자가 클릭, 탭, 스와이프를 한 후에 어떤 반응을 보여줄지 결정하는 등의 일.

▒ 정보 아키텍처

전체를 어떻게 구성할지 고민하는 일이 포함된다.

▒ 폼(Form)

HTML 폼 태그, 사용자가 입력한 데이터를 서버로 전송하는 영역을 가리킨다. 가입 양식이나 설문 조사 응답 페이지에 자주 등장, 텍스트를 입력할 수 있는 박스나 체크박스 등의 형태로 나타난다.

▒ 내비게이션(Navigation)

웹에서는 본인이 어디에 있는지 알아내야 하는 상황이 자주 발생한다. 그럴 때 우리가 원하는 것을 찾아주고 우리가 어디 있는지 알려준다.

▒ 로컬 내비게이션

현재 섹션에 있는 것들

▒ 섹션 = 기본 내비게이션

사이트 계층구조상 최상위에 있는 사이트 주요 구역으로 이어지는 링크를 가리킨다. 

하위 내비게이션 : 기본 내비게이션에 현재 섹션의 세부 항목의 목록을 보여주는 것

▒ 유틸리티

로그인/가입하기, 고객센터, 사이트맵, 장바구니처럼 사이트 사용을 도와주는 요소나 회사 소개, 연락처처럼 제작자에 대한 정보를 제공하는 요소

▒ 빵부스러기(Bread-crumb) = 이동 경로 표시 막대

홈페이지에서 사용자가 있는 현 위치까지의 경로를 보여주는 동시에 사이트 상위 체계를 쉽게 거슬러 올라갈 수 있게 도와준다.

▒ 메가 메뉴
풀다운 메뉴의 일종이며, 사이트 전체 구조와 각 페이지 내용이 한꺼번에 담길 정도로 큰 메뉴를 사용하는 것이 특징이다. 사이트의 구조를 한눈에 파악할 수 있는 것이 장점이다.

▒ 캐스케이딩 메뉴

한 메뉴를 클릭했을 때 하위 메뉴가 옆으로 드러나는 메뉴 형태를 가리킨다. 하위 메뉴가 펼쳐지는 모습이 폭포(cascade) 같다고 해서 붙여진 이름이다. 


▒ 스케일러블 디자인

어떤 사이트의 한 버전이 다른 여러 크기의 화면에서도 좋아 보이게 만드는 것을 가리킨다.

▒ 어포던스

제품 디자인에 내포된, 사용자가 어떻게 사용하면 될지 알려주는 시각적인 힌트

▒ 호버(hover) 기능

사용자가 커서를 화면상 특정 요소 위에 올렸을 때 그 요소를 클릭하지 않더라도 어떤 방식으로든 약간의 변화를 보여 주는 것 


▒ 정보 아키텍처

사람들이 자신이 원하는 정보를 잘 찾도록 콘텐츠를 조직하는 것이다.

▒ 사용자 중심 디자인(UCD)

적절한 제품을 디자인하고 그 제품을 사용하기 편리하게 만드는데 초점을 맞춘다.

▒ 사용자 경험(UX)

제품 라이프 사이클 전반에 걸쳐 사용자의 욕구를 생각하는 것에 초점을 맞춘다.  




김효진 소속 직업디자이너
구독자 400
작가의 이전글 안드로이드 DP, SP, PX, DPI

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면