[UX] 사용자가 훑어보기 좋은 웹&앱 디자인을 만드는 6가지 원칙

1. 관례를 이용하라 

관례란 널리 사용되거나 표준화된 디자인 패턴을 가리킨다. 통용되고 있는 관례를 따르면 사용자가 내용을 빠르고 쉽게 이해하는 데 도움이 된다. 마치 교통 안내 표지판처럼! 웹 관례가 자리를 잡을수록, 사용자들의 삶이 편해진다. 새로운 사이트를 갈 때마다 처음 접하는 요소가 어떤 역할을 하는지, 어떤 방식으로 작동하는 지 매번 이해하려고 노력할 필요가 없기 때문이다. 그러나 종종 디자이너들은 관례 이용을 꺼리곤 한다. 관례를 따르면 사용자가 이해하기 쉬운 디자인이 완성될 가능성이 커진다는 것을 알지만, 본인을 고용한 이유가 관례를 답습하는 데 있지 않고 무언가 새롭고 다른 것을 창조하는 데 있다고 생각하기 때문이다. 저자에 따르면, 혁신적인 결과를 내려면 대체하고자 하는 것이 지닌 가치를 이해해야 한다. 저자가 추천하는 방법은, 새로운 아이디어가 더 낫다는 것을 '확신'할 때만 혁신하는 것이다. 그렇지 않을 때는, 관례를 잘 활용하라 제언한다. 창의적이고 혁신적인 방법, 심미적인 요소를 얼마든지 넣어도 좋지만, 단, 사용자의 편의성을 확실히 보장한 상태에서 그렇게 해야한다. 

 

더불어 일관성에 대해 첨언하자면 일관성은 절대적인 선이 아니다. 사이트나 앱을 만들 때, 일관성을 유지하기 위해 노력하는 것은 좋다. 예컨대, 네비게이션이 항상 같이 위치에 있다면, 네비게이션이 때문에 고민하거나 네비게이션을 찾는데 시간 낭비할 필요가 없어 유용하다. 그러나, 경우에 따라서는 일관성을 약간 벗어나야만 전체적인 내용이 더 명확해지는 때도 있다. 명료성이 일관성보다 더 중요하다. 일관성을 약간 해쳐서 전체적인 명료성이 크게 증가한다면, 명료성을 우선하라.

 

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

시각적 계층구조가 잘 구성된 사이트는 한 눈에 이해하기 좋다. 내용에 우선순위를 매기고 조직화하는 작업을 미리 해둔 덕분에 사용자가 별도로 페이지를 분석할 필요가 없기 때문이다. 이렇게 명료한 페이지를 볼 때는, 페이지를 훑어보는 처리 속도가 굉장히 빠르다. 사용자가 하지 않아도 되는 고민을 일시적으로나마 사용자게에 떠안기지 마라! 시각적 계층구조가 분명한 페이지의 세 가지 특징은 다음과 같다. 

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

아마존

 

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

페이지 구역이 명확히 나누어져 있어야, 사용자가 페이지의 어떤 부분에 초첨을 맞추고 어떤 부분은 마음 편히 무시할지 빠르게 결정할 수 있다. 

 

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

사용자는 웹 페이지를 훑어볼 때, 클릭할 수 있는 요소를 구분할 시각적 단서를 찾는다. 일반적으로는 모든 텍스트 링크에 한 가지 색상을 입히거나 클릭해도 된다는 걸 형태나 위치로 구분할 수 있게 하는 정도면 충분하다. 단서는 보통 다음과 같다. 

• 형태 (버튼, 탭)
• 위치 (메뉴 표시줄 안)
• 서식 (색상, 밑줄)

 

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

시각적 잡음(Visual noise)은 페이지 이해를 방해하는 주요 요소 중 하나다. 웹페이지를 편집할 때는, 모든 것이 시각적 잡음이라고 가정하고 시작하는 편이 좋다. 진짜 도움이 되는 부분만 남기고 나머지는 모두 없애라. 시각적 잡음은 크게 세 종류다. 

• 시끄러움 : 페이지에 있는 모든 요소가 주의를 끌기 위해 아우성을 치고 있다면 굉장히 큰 부담으로 다가온다. 
• 무질서 : 온갖 요소가 기준선에 따라 배열하지 않았을 때 이런 문제가 발생한다. 
• 어수선함: 너무 많은 내용을 담은 페이지의 경우가 그렇다. 신호 대 잡음비 (signal-to-noise-ratio)가 낮다고 말하는 상태에 처하게 된다. 

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

웹 페이지에 방문한 사용자는 자신이 원하는 것을 찾기 위해 텍스트를 훑어보는데 많은 시간을 쓴다. 적절한 방식으로 내용을 정리해두면, 사용자가 페이지를 '훑어보기' 쉬워진다. 웹 페이지를 훑어보기 좋은 방식으로 구성하는 원칙은 다음과 같다. 

• 제목을 많이 넣어라
  우리의 생각보다 제목의 수를 늘리고, 제목을 작성할 때 더 많은 노력을 들여야 한다. 제목에 적절한 서식을 적용하고, 제목 간의 위계에 따라 누구나 명확히 알아볼 수 있는 차이를 두라. 또, 제목이 속하는 섹션에 더 가까이 위치하게 하라. 
• 단락의 길이를 짧게 유지하라
  긴 단락을 만난 독자는 벅차다는 느낌 때문에 읽는데 어려움을 느낀다. 짧은 단락 여러개를 훑어보는 것보다 긴 단락 하나를 훑어보는 것이 더 어렵다. 온라인 상에서는 꼭 기승전결 구조를 가질 필요 없고, 문단이 문장 하나로 구성되어도 괜찮다. 
• 불렛 목록을 사용하라
  불렛 목록으로 만들 수 있는 항목이라면 모두 만드는 편이 좋다. 
• 주요 용어를 강조하라
  페이지를 훑어볼 때 주로 찾는 것은 중요한 단어나 구절이다. 가장 중요한 단어가 본문에 처음 등장할 때 굵게 표기하면 찾기 쉬워진다. 하지만 너무 많은 항목을 강조하면 효과가 떨어진다. 

 

 

BACK TO BASICS
다시 기본으로 돌아가서, 매일 조금씩 책을 읽으며 학습한 내용을 짧게 요약 및 메모합니다. 
참고 서적 : <사용자를 생각하게 하지마! - 스티브 크룩>