brunch

You can make anything
by writing

C.S.Lewis

by 이상현 Dec 28. 2022

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

[웹과 모바일 사용성 원칙으로 디자인하는 UX]




핵심 Summary



사용성이란?


사용성은 다양하게 정의되는데, 사용성에 속하는 특성으로 거론되는 항목은 다음과 같다.


· 유용성 : 사람들이 필요로 하는 일을 하는가?

· 학습 용이성 : 사람들이 사용법을 알아볼 수 있는가?

· 기억 용이성 : 사용할 때마다 사용법을 다시 익혀야 하는가?

· 유효성 : 맡은 임무를 완수하는가?

· 효율성 : 작업을 수행하는데 드는 시간과 노력의 양은 합리적인 수준인가?

· 호감도 : 사람들이 이것을 갖고 싶어 하겠는가?


최근에는 이런 항목마저 더해졌다.


· 재미 : 사용할 때 즐겁거나 재미있다고 느끼는가?


웹 사이트든 리모컨이든 회전문이든 무엇이든지, 사용성이 뛰어나다는 것은 다음과 같은 의미다.


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




사용성 제 1원칙 : 사용자를 고민에 빠뜨리지 마라


이 원칙을 최우선으로 여겨라. 디자인이 적절했는지 결정하는 최종 승부는 바로 이 지점에서 난다. 단 하나의 사용성 원칙을 기억할 생각이라면 이 원칙을 택하라.


(...) 여러분은 각 페이지나 화면을 자명하게 만드는 것을 목표로 해야 한다. 그래서 보기만 해도 평균 사용자가 그것이 무엇인지 그리고 어떻게 사용하는지 알 수 있어야 한다. 하지만 획기적이고 독창적인 작업을 한다거나 태생적으로 복잡한 작업을 할 때에는 설명이 필요없는 수준 정도로 만족해야 할 수도 있다. 명백하게 만들기 어렵다면 최소한 설명을 추가할 필요는 없을 정도로 만들어야 한다.



우리가 실제 웹을 사용하는 방법


사용자가 웹을 사용하는 모습을 관찰하며 깨달은 가장 충격적인 사실은 이들의 실제 웹 사용법이 예상을 크게 벗어난다는 점이다. 사실 사용자는 각 페이지를 대충대충 보고 본문 일부를 훑다가 흥미를 끄는 부분이나 애초에 찾던 내용과 조금이라도 비슷한 내용이 눈에 띄는 즉시 클릭한다. 이 정도 수준은 그나마도 운이 좀 따라주는 경우에 해당한다.


1) 사용자는 웹 페이지를 읽지 않는다. 훑어본다.

: 사용자는 웹 페이지를 읽는데 대체로 매우 적은 시간을 할애한다.

이는 1) 웹이 보통 다른 업무를 완수하기 위한 도구로 사용되며, 2) 자신이 관심있는 요소 외의 모든 내용을 읽지 않으며, 3) 훑어보기에 익숙하기 때문이다.


2) 사용자는 최선의 선택을 하지 않는다. 최소 조건만 충족되면 만족한다.

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

이는 1) 사용자는 보통 시간에 쫓기고, 2) 추측이 틀렸을 때 발생하는 불이익이 별로 없으며, 3) 선택지를 비교하더라도 결과가 나아진다는 보장이 없고, 4) 추측하는 게 더 재밌기 때문이다.


3) 사용자는 작동 방식까지 이해하려 하지 않는다. 적당히 임기응변한다.

: 웹 사이트, 소프트웨어, 가전기기 등 종류를 막론하고 무엇을 대상으로 하든 사용성 평가를 해보면, 작동 방식을 모르거나 완전히 반대로 이해한 사용자도 그 제품을 어느 정도 사용한다는 사실을 알 수 있다. 새로운 기술을 접했을 때 설명서를 읽어보는 사용자는 극소수에 지나지 않는다. 대부분은 임기응변으로 위기를 적당히 모면하면서 처한 상황을 빠르게 헤쳐 나간다. 

1) 사용자는 물건이 작동하기만 하면 계속 사용하는 경향이 있고, 2) 사용자에게 사실 그것이 별로 중요하지 않기 때문이다.



광고판 디자인하기


사용자가 스치듯 지나간다는 사실을 알게 됐으니 이에 기반해 몇가지 중요한 사항을 기억하자.


① 관례를 이용하라


관례란 '널리 사용되거나 표준화된 디자인 패턴'을 가리킨다. 통용되고 있는 관례를 따르면 사용자가 내용을 빠르고 쉽게 이해하는 데 도움이 된다. 디자이너들이 종종 새롭고 다른 것을 창조하고자 하는 유혹에 관례 이용을 꺼리는 경우가 있는데, 혁신적인 결과를 내려면 대체하고자 하는 것이 지닌 가치를 이해해야 한다. 하지만 관례가 주는 가치는 과소평가하기 십상이다. 여러분의 새로운 아이디어가 더 낫다는 것을 확신할 때 혁신하라. 하지만 그렇지 않을 때는 관례를 잘 활용하라.

'정지'라는 단어와 관련된 관례는 특징적인 형태를 띈다.


② 시각적 계층구조를 효과적으로 구성하라


페이지에 나타난 요소의 외형에 페이지 요소 간의 관계가 잘 드러나게 하는 것도 페이지를 빠르게 이해할 수 있도록 하는 하나의 방법이다. 사용자가 부지불식간에 시각적 계층구조를 분석하기 떄문이다. 


시각적 계층구조가 분명한 페이지에는 세 가지 특성이 있다.

1. 더 중요한 부분이 더 눈에 띈다.
2. 논리적으로 연관된 요소가 시각적으로 연결되어 있다.
3. 두 요소 간 상·하위 관계가 형성되어 있다면 이를 시각적으로도 보여준다.


③ 페이지의 구역을 또렷하게 구분하라


페이지의 구역이 명확히 나뉘어 있어야 사용자가 페이지의 어떤 부분에 초점을 맞출지 어떤 부분은 무시할지 빠르게 결정할 수 있다.


④ 클릭할 수 있는 요소를 명확히 표시하라


사용자는 웹 페이지를 훑어볼 때 클릭할 수 있는 요소를 구분할 시각적 단서를 찾는다. 터치스크린이라면 탭 할 수 있는 요소가 될 것이다. 단서는 보통 형태(버튼, 탭), 위치(메뉴 표시줄 안), 서식(색상, 밑줄)을 통해 드러난다.

@ Making your button design ‘clickable’


⑤ 주의를 흩뜨릴 만한 요소를 없애라


시각적 잡음(Visual noise)는 페이지 이해를 방해하는 주요 요소 중 하나다. 웹 페이지를 편집할 때 모든 것이 시각적 잡음이라고 가정하고 시작하는 편이 좋다. 진짜 도움이 되는 부분만 남기고 나머지는 모두 없애라. 사용자의 시간과 주의력에는 한계가 있으므로 정말 중요한 부분 외에 모두 없애도록 하라.



⑥ 내용을 훑어보기 좋은 방식으로 구성하라


내용을 적절한 방식으로 정리해두면 사용자가 쉽게 훑어보는 데 도움이 된다.


1) 제목을 많이 넣어라

2) 단락의 길이를 짧게 유지하라

3) 불릿 목록을 사용하라

4) 주요 용어를 강조하라




사용성 제 2원칙 : 클릭 수가 늘어나는 건 괜찮다.

클릭할 때 고민할 필요만 없다면.


별 고민 없이 클릭할 수 있고 본인이 옳은 방향으로 가고 있다는 확신만 꾸준히 든다면, 클릭을 많이 하더라도 사용자는 크게 개의치 않는 편이다. 사용자는 흔히 '정보의 냄새(Scent of information)'라고 부르는 자취를 따라간다. 그러나 사용자에게 고민이 필요한 선택지를 줄 수 밖에 없다면, 그들이 딱 필요로 할 만큼의 적절한 안내를 함께 제공하라. 지나쳐도 안 된다. 적절한 안내란 다음과 같은 특성을 띤다.

간결성 : 사용자에게 도움이 되는 정보를 선별해서 최소한의 양만 남겨라.
적시성 : 사용자가 딱 필요로 할 순간에 마주칠 위치에 두라
불가피성 : 반드시 놓치지 않고 볼 수 있는 포맷을 사용하라



웹 디자인의 빅뱅이론


잊어서는 안 되지만 가장 많이 놓치는 요소가 하나 있다. 바로 전체적인 그림을 보여주는 것이다. 새로운 사이트에 처음으로 들어가면 머리에 떠오르는 4가지 질문이 있다. 홈페이지는 이 질문에 최대한 빠르고 명확하게 답해야 한다.


1) 이게 무슨 사이트지?

2) 이 사이트에서 무엇을 할 수 있지?

3) 이 사이트에는 무슨 내용이 담겨 있는 거지?

4) 비슷한 다른 사이트가 있음에도 내가 이 사이트를 이용해야 할 이유가 뭐지?


어떤 웹 사이트가 보기 좋은지, 콘텐츠 양이 많은지, 어떤 부분이 내 흥미를 끄는지 등 웹 사이트를 빠르게 훑어보고 첫인상을 형성하는 정보를 얻는 데 걸리는 시간은 1,000분의 1초 정도 밖에 되지 않는다. 가장 흥미로운 점은 이렇게 초기에 받은 인상이 실제 그 페이지에서 어느 정도 시간을 보낸 후에도 거의 변하지 않는다는 데 있다. 처음부터 사용자를 제대로 안내해서 전체적인 그림을 명확히 그릴 수 있게 도와주는 일이 중요한 이유가 바로 여기에 있다.


매거진의 이전글 [로지컬 씽킹]
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari