Don't Make Me Think

1. 사용자가 생각하지 않게 하라: 직관적이고 명확한 디자인

페이지를 자명하게 만들 수 없다면, 최소한 자가 설명이 가능하게 만들어야 한다.

직관적인 디자인이 핵심이다. 사용자가 웹사이트의 작동 방식을 이해하려고 애쓸 필요가 없어야 한다. 내비게이션부터 콘텐츠까지 모든 요소가 즉시 이해될 수 있어야 한다. 사용자가 불명확한 것을 마주하면 인지적 마찰이 생겨 속도가 느려지고 결국 떠나게 될 수 있다.

자가 명백 vs. 자가 설명. 이상적으로는 디자인이 자명해야 하며, 이해하는 데 아무런 생각이 필요 없어야 한다. 그것이 불가능하다면, 최소한 자가 설명이 가능하게 만들어야 한다. 버튼 레이블부터 전체 사이트 구조까지 모든 것에 적용된다.

정신적 부담 줄이기. 사용자의 마음속에 물음표를 없애라. 선택을 명확하게 하고, 명확한 언어를 사용하며, 확립된 웹 관습을 따르라. 사용자가 사이트를 사용하는 데 생각할 필요가 적을수록 콘텐츠나 제품에 더 많은 정신적 에너지를 쏟을 수 있다.

2. 웹 사용자는 읽지 않고 스캔한다: 빠른 이해를 위해 최적화하라

우리는 페이지를 읽지 않는다. 우리는 스캔한다.

스캔이 표준이다. 대부분의 사용자는 웹 페이지를 철저히 읽지 않는다. 그들은 키워드, 구문, 시각적 단서를 빠르게 찾아 스캔한다. 이 행동은 시간 압박, 모든 것을 읽을 필요가 없다는 인식, 그리고 "충분히 좋은" 정보 수집 경험에 의해 주도된다.

스캐너를 위한 디자인. 콘텐츠를 쉽게 스캔할 수 있도록 만드는 기술을 사용하라:

• 명확하고 설명적인 제목과 부제목
• 불렛 리스트
• 짧은 단락
• 강조된 키워드
• 의미 있는 이미지와 캡션

중요한 정보를 앞에 배치하라. 가장 중요한 콘텐츠를 페이지 상단과 단락의 시작 부분에 배치하라. 저널리즘의 역피라미드 스타일을 사용하라: 결론부터 시작하고, 그 다음에 지원 세부 사항을 제공하라.

3. 명확한 시각적 계층 구조와 관습 만들기

관습은 당신의 친구다.

시각적 계층 구조가 사용자를 안내한다. 중요한 요소를 크기, 색상, 위치, 여백을 통해 더 두드러지게 만들어라. 관련 항목을 시각적으로 그룹화하라. 중첩을 사용하여 무엇이 무엇의 일부인지 보여주라. 명확한 시각적 계층 구조는 사용자가 페이지를 한눈에 이해하는 데 도움이 된다.

관습을 활용하라. 웹 관습은 이유가 있어서 진화했다 – 그것들은 효과가 있다. 사용자는 특정 요소가 특정 위치에 있을 것으로 기대한다(예: 왼쪽 상단의 로고, 오른쪽 상단의 검색). 매우 좋은 이유가 없는 한 이러한 관습을 따르라.

혁신과 친숙함의 균형. 창의성은 가치가 있지만, 기본 기능을 위해 바퀴를 재발명하지 마라. 친숙한 패턴은 인지적 부담을 줄인다. 혁신할 경우, 새로운 디자인이 학습 곡선이 필요 없을 정도로 직관적이거나, 작은 학습 곡선을 정당화할 만큼 상당한 가치를 추가하는지 확인하라.

4. 페이지를 명확하게 정의된 영역으로 나누기

이상적으로, 사용자는 잘 디자인된 웹 페이지로 딕 클락의 옛 게임 쇼 $25,000 피라미드를 할 수 있어야 한다.

명확한 구역은 이해를 돕는다. 페이지를 명확하게 정의된 영역으로 나누면 사용자가 집중할 부분과 무시할 부분을 빠르게 결정할 수 있다. 이는 사용자가 철저히 읽기보다는 스캔하는 경향이 있기 때문에 특히 중요하다.

영역을 즉시 인식 가능하게 만들어라. 사용자는 각 영역의 목적을 한눈에 파악할 수 있어야 한다:

• 내비게이션
• 검색
• 콘텐츠
• 광고
• 브랜딩 요소

시각적 디자인을 사용하여 구분을 강화하라. 여백, 테두리, 색상 배경, 일관된 스타일링과 같은 기술을 사용하여 다른 영역을 구분하라. 이러한 시각적 조직은 사용자가 사이트 구조의 정신적 모델을 구축하는 데 도움이 된다.

5. 클릭 가능한 것을 명확하게 만들어라

사람들이 웹에서 하는 일의 큰 부분은 다음에 클릭할 것을 찾는 것이기 때문에, 무엇이 클릭 가능한지 명확하게 만드는 것이 중요하다.

명확한 어포던스는 좌절을 줄인다. 사용자가 무엇을 상호작용할 수 있는지 추측할 필요가 없어야 한다. 링크와 버튼을 다음을 통해 두드러지게 만들어라:

• 일관된 스타일링(예: 링크에 밑줄이 있는 텍스트)
• 색상 차별화
• 호버 효과
• 중요한 작업을 위한 버튼 모양

잘못된 어포던스를 피하라. 상호작용할 수 없는 요소를 클릭 가능하게 보이게 하지 마라. 이는 혼란을 초래하고 인터페이스에 대한 신뢰를 떨어뜨린다.

모바일 상호작용을 고려하라. 터치 장치에서는 탭 대상이 충분히 크고 적절히 간격을 두어야 한다. 탭에 대한 시각적 피드백을 제공하여 상호작용을 확인하라.

6. 방해 요소와 혼란 제거

각 페이지의 단어 절반을 없애고, 남은 절반을 다시 없애라.

집중이 중요하다. 페이지의 모든 불필요한 요소는 사용자의 주의를 끌기 위해 경쟁한다. 혼란스러운 디자인은 사용자가 찾고자 하는 것을 찾기 어렵게 만들고 메시지를 이해하기 어렵게 만든다.

무자비하게 편집하라. 다음을 제거하라:

• 불필요한 단어와 콘텐츠
• 중복된 내비게이션 옵션
• 순전히 장식적인 이미지
• 지나치게 복잡한 레이아웃

여백을 수용하라. 모든 픽셀을 채워야 한다고 생각하지 마라. 여백은 콘텐츠를 조직하고, 가독성을 향상시키며, 중요한 요소에 여유 공간을 제공한다.

무자비하게 우선순위를 정하라. 페이지의 모든 요소에 대해 "이것이 이 페이지의 주요 목표를 지원하는가?"를 물어보라. 그렇지 않다면, 제거하거나 덜 두드러지게 만들어라.

7. 효과적인 내비게이션 디자인: 찾기 쉽고 이해하기 쉽게 만들기

웹 내비게이션은 사이트의 계층 구조를 구현하여 "거기"라는 감각을 만든다.

명확한 내비게이션이 중요하다. 좋은 내비게이션은 사용자가 사이트에 무엇이 있는지, 어떻게 사용하는지, 그리고 사이트 제작자에 대한 신뢰를 준다. 사이트 전체에서 일관되게 유지되어야 하며, 사용자가 사이트 구조 내에서 어디에 있는지에 대한 맥락을 제공해야 한다.

주요 내비게이션 요소:

• 지속적인 내비게이션(모든 페이지에 존재)
• 명확한 섹션 이름
• "홈" 링크
• 검색 기능
• 깊은 계층 구조를 위한 브레드크럼

카테고리를 자명하게 만들어라. 사용자는 각 섹션에서 무엇을 찾을 수 있을지 예측할 수 있어야 한다. 명확하고 설명적인 레이블을 사용하고 모호할 수 있는 기발한 이름을 피하라.

8. 홈페이지 최적화: 명확한 목적과 쉬운 시작점

홈페이지는 모든 사람을 수용해야 한다. 이는 단일 주차 공간에 "누구나 주차할 수 있다"고 말하는 것과 같다.

목적을 즉시 전달하라. 몇 초 안에 새로운 방문자는 사이트가 무엇인지, 무엇을 제공하는지 이해해야 한다. 명확한 태그라인과 간결한 설명 텍스트를 사용하라.

주요 기능을 보여주라. 사이트에서 가장 중요한 작업을 시작하는 방법을 명확하게 하라. 검색, 계정 생성, 제품 탐색 등 이러한 진입점은 두드러져야 한다.

경쟁하는 요구를 균형 있게 맞추라. 홈페이지는 종종 여러 청중과 비즈니스 목표를 충족해야 한다. 무자비하게 우선순위를 정하고 가장 중요한 요소에 집중하라. 모든 것을 홍보하려는 유혹을 저항하라.

9. 예산 내 사용성 테스트: 간단하게 자주 하라

프로젝트 초기에 한 명의 사용자를 테스트하는 것이 끝에 50명을 테스트하는 것보다 낫다.

정기적인 테스트는 매우 가치가 있다. 소규모의 비공식적인 사용성 테스트도 주요 문제를 드러낼 수 있다. 개발 과정 전반에 걸쳐 자주 테스트하는 것을 목표로 하라.

간단하게 유지하라:

• 라운드당 3-4명의 사용자 테스트
• 주요 작업과 고통점을 중심으로 테스트
• 사용자의 생각 과정을 이해하기 위해 생각 소리 프로토콜 사용
• 여러 사용자 간의 패턴을 찾아라

통찰력을 신속하게 실행하라. 목표는 디자인을 개선하는 것이지, 정교한 보고서를 작성하는 것이 아니다. 각 테스트 라운드 후, 가장 중요한 문제를 식별하고 신속하게 수정하라.

10. 접근성 중요성: 모든 사용자를 위해 디자인하라

페이지를 자명하게 만드는 것은 상점의 좋은 조명과 같다: 모든 것이 더 나아 보인다.

포괄적인 디자인은 모두에게 이익이 된다. 접근성을 고려한 디자인은 장애가 있는 사용자뿐만 아니라 모든 사용자의 사용성을 향상시키는 경우가 많다. 또한 법적 준수와 윤리적 비즈니스 관행을 위해 점점 더 중요해지고 있다.

주요 접근성 고려 사항:

• 이미지에 대한 텍스트 대체 제공
• 키보드 내비게이션 보장
• 충분한 색상 대비 사용
• 논리적인 콘텐츠 구조 만들기
• 양식을 접근 가능하게 만들기

기본부터 시작하라. 접근성의 작은 개선도 큰 차이를 만들 수 있다. 가장 영향력 있는 변경 사항에 먼저 집중하고, 점차 접근성을 향상시켜라.

11. 웹을 위한 글쓰기: 간결하고 스캔 가능하며 객관적으로

행복한 대화는 사라져야 한다.

간결함이 핵심이다. 웹 사용자는 시간과 주의가 제한되어 있다. 불필요한 단어, 소개 텍스트, 마케팅 언어를 제거하라. 빠르고 명확하게 요점을 전달하라.

텍스트를 스캔 가능하게 만들어라:

• 의미 있는 제목과 부제목 사용
• 불렛 및 번호 리스트 사용
• 주요 용어와 구문 강조
• 짧은 단락과 충분한 여백 사용

객관적이고 직설적으로. 과장된 주장과 과대 광고를 피하라. 사용자는 마케팅 언어에 회의적이며 명확하고 사실적인 정보를 선호한다. 제품이나 서비스가 스스로 말하게 하라.

Last updated: August 22, 2024