Jakob Nielsen은 세계적으로 인정받는 사용성 전문가로, 1994년에 **10가지 유저빌리티 휴리스틱(Usability Heuristics)**을 발표했습니다. 이 휴리스틱들은 30년이 지난 지금에도 여전히 유효하며, 웹사이트, 모바일 앱, 데스크톱 소프트웨어 등 모든 디지털 인터페이스에 적용 가능합니다.

10가지 유저빌리티 휴리스틱

1. 시스템 상태의 가시성 (Visibility of System Status)

시스템은 항상 사용자에게 적절한 시간 내에 명확한 피드백을 제공하여 현재 일어나고 있는 일을 알려야 합니다. 사용자가 자신의 행동이 인식되었는지 불확실해하지 않도록 해야 합니다.1

실제 사례:

  • 로딩 표시: 페이지나 항목이 로딩될 때 회전하는 바퀴나 진행 표시줄
  • 실시간 상태 표시: 메시징 앱에서 “입력 중…” 상태 표시
  • 확인 메시지: 문서 업로드 완료 후 “파일이 업로드되었습니다” 메시지

2. 시스템과 실제 세계 간의 일치 (Match Between System and Real World)

시스템은 사용자의 언어로 말해야 하며, 사용자에게 익숙한 단어, 문구 및 개념을 사용해야 합니다. 또한 실제 세계의 관례를 따르고 정보를 자연스럽고 논리적인 순서로 제시해야 합니다.2

실제 사례:

  • 쇼핑 카트 아이콘: 실제 쇼핑 카트의 개념을 반영한 디자인
  • 휴지통 아이콘: 파일 삭제를 나타내기 위해 실제 휴지통을 닮은 아이콘
  • 폴더 아이콘: 물리적 폴더처럼 보이는 아이콘으로 문서를 정리

3. 사용자 제어와 자유 (User Control and Freedom)

사용자는 종종 실수로 시스템 기능을 선택합니다. 확장된 대화 없이 원하지 않는 상태에서 벗어날 수 있도록 명확히 표시된 “긴급 출구”를 제공해야 합니다. 또한 실행 취소(undo)와 다시 실행(redo) 기능을 지원해야 합니다.3

실제 사례:

  • Google Docs: 실행 취소/다시 실행 옵션으로 사용자가 걱정 없이 실험
  • Google Play Store: “설치” 버튼 후 “취소” 버튼으로 쉽게 취소 가능
  • Medium: 관심사를 커스터마이징하여 부정확한 제안 방지

4. 일관성과 표준 (Consistency and Standards)

사용자가 서로 다른 단어, 상황 또는 작업이 같은 의미를 갖는지 의문을 갖지 않도록 해야 합니다. 플랫폼 관례를 따르고 전체적으로 일관성을 유지해야 합니다.4 이 개념은 jakob-law와도 밀접하게 연관되어 있습니다. 사용자들이 다른 웹사이트에서 경험한 친숙한 패턴을 따르면 일관성을 달성할 수 있습니다.

실제 사례:

  • 복사/붙여넣기: 대부분의 소프트웨어에서 동일하게 작동
  • 라디오 버튼과 체크박스: 사용자는 라디오 버튼은 하나의 옵션만, 체크박스는 여러 옵션 선택 가능함을 알고 있음
  • Google 제품군: 모든 Google 제품이 동일한 글꼴, 아이콘, 색상, 유사한 컴포넌트 사용

5. 오류 방지 (Error Prevention)

좋은 오류 메시지보다 훨씬 더 나은 것은 문제가 발생하지 않도록 신중하게 설계하는 것입니다. 오류가 발생하기 쉬운 조건을 제거하거나 확인하고 사용자가 작업을 확정하기 전에 확인 옵션을 제시해야 합니다.5

실제 사례:

  • 비행편 예약: 반환 비행편이 출발 비행편 이전에 나올 수 없도록 날짜 선택 제한
  • 검색 제안: 사용자 입력 시 검색 제안으로 오타 방지
  • 좋은 기본값: “내일”, “다음 주”, “1시간 후” 같은 사전 설정 옵션 제공

6. 회상보다는 인식 (Recognition Rather than Recall)

사용자의 메모리 부하를 최소화하여 객체, 작업 및 옵션을 보이도록 만들어야 합니다. 사용자는 대화의 한 부분에서 다른 부분으로 정보를 기억할 필요가 없어야 합니다.6

실제 사례:

  • Google Chrome 북마크: 수백 개의 중요한 링크를 저장하고 나중에 쉽게 인식
  • Adobe Photoshop: 최근에 작업한 파일 목록 표시로 작업 이력 인식 용이
  • Google Docs: 메뉴 항목에 마우스 올리면 라벨 팝업으로 각 작업 의미 전달

7. 유연성과 사용 효율성 (Flexibility and Efficiency of Use)

초급 사용자에게 노출되지 않는 **가속기(accelerators)**는 전문 사용자의 상호작용 속도를 높일 수 있으므로, 시스템이 초급자와 전문 사용자 모두의 필요를 충족할 수 있도록 해야 합니다.7

실제 사례:

  • 키보드 단축키: Ctrl+C와 Ctrl+V는 마우스 조작보다 빠름
  • 모바일 키보드 제스처: 손가락 스와이프로 텍스트 입력
  • Gmail: 오른쪽 또는 왼쪽 스와이프로 메시지 삭제 또는 폴더 이동
  • Photoshop: 필요한 도구와 패널을 추가하여 작업 공간 커스터마이징

8. 미학과 미니멀리스트 디자인 (Aesthetic and Minimalist Design)

인터페이스는 관련이 없거나 거의 필요하지 않은 정보를 포함하지 않아야 합니다. 인터페이스의 모든 추가 정보는 관련 정보와 경쟁하여 상대적 가시성을 감소시킵니다.8

실제 사례:

  • Google 검색 페이지: 검색 상자에만 집중하고 불필요한 정보 제거
  • Airbnb: 아름다운 사진과 핵심 정보(숙박료, 위치, 평점)에 집중
  • 최소한의 명암: 페이지에 필요한 원소만 표시하여 혼란 감소

9. 사용자가 오류를 인식, 진단 및 복구하도록 돕기 (Help Users Recognize, Diagnose, and Recover from Errors)

오류 메시지는 평문으로 표현되고(오류 코드 없음), 문제를 정확히 나타내며, 해결책을 건설적으로 제안해야 합니다.9

좋은 오류 메시지의 예:

“비밀번호는 최소 8자 이상이어야 하고 숫자를 포함해야 합니다. 비밀번호를 업데이트하고 다시 시도하세요.”

나쁜 오류 메시지의 예:

“유효하지 않은 입력입니다. 다시 시도하세요.”

실제 사례:

  • Kayak.com: 오류 설명(“너무 많은 필터”)과 함께 제거 가능한 필터 바로 제공
  • Gmail: 이메일 전송 후 “실행 취소” 옵션 제공

10. 도움말 및 설명서 (Help and Documentation)

시스템을 설명서 없이 사용할 수 있으면 더 좋지만, 사용자가 작업을 이해하도록 돕기 위해 설명서를 제공해야 할 수 있습니다. 이러한 정보는 검색하기 쉽고, 사용자의 작업에 중점을 두고, 수행해야 할 구체적인 단계를 나열하며, 너무 크지 않아야 합니다.10

실제 사례:

  • 사전 대응 도움말: 앱 시작 시 나타나는 팁이나 지시 오버레이로 새로운 기능 안내
  • 사후 대응 도움말: 사용자가 문제를 겪을 때 설명서, 동영상 또는 FAQ 제공
  • 검색 가능한 도움말: 사용자가 특정 도움말을 필요할 때 빠르게 찾을 수 있도록 구성
  • 시각 자료: 텍스트만 있는 설명서보다 동영상, 이미지, 그래픽으로 이해도 향상

왜 여전히 중요한가?

Nielsen의 10가지 휴리스틱은 인간과 기계 간의 근본적인 불일치에 기반하고 있기 때문에 기술의 변화에도 영향을 받지 않습니다.

처음에는 두 교수의 의견으로 시작했지만, 1994년에는 249개의 실제 유저빌리티 문제와 101개의 기본 유저빌리티 원칙을 분석하여 인수분해를 통해 정밀하게 개선되었습니다.

오늘날 사용자 인터페이스는 30년 전과 크게 다르지만, 이 10가지 휴리스틱은 그대로 유효합니다. 웹과 모바일 기기와 같은 플랫폼이 변화했음에도 불구하고, 이 휴리스틱들은 특정 화면 설계나 UI 기술이 아닌 인간-기계 통신의 근본적인 측면에 기초하고 있기 때문입니다.


휴리스틱 평가 방법

조직이 이러한 휴리스틱을 적용하려면 각 휴리스틱을 기반으로 평가 체크리스트를 만들 수 있습니다.

“시스템 상태의 가시성” 휴리스틱 평가 예시:

  • 사용자에게 적절한 피드백을 통해 시스템 상태를 알리는가?
  • 2-3초 이상 걸리는 작업에 대해 로딩 상태가 나타나는가?
  • 완료된 작업에 대한 확인 메시지가 제공되는가?

휴리스틱 평가는 사용자 테스트의 보완 방법으로, 사용자 피드백과 함께 결합하면 가장 효과적입니다.


참고 자료

공식 출처 및 개요

종합 자료 및 체크리스트

Footnotes

  1. Daily.dev - 10 Usability Heuristics Checklist for UI Design, UX Tigers - Usability Heuristics History

  2. NN/g - Match Between System and Real World, Interaction Design Foundation - Heuristics

  3. NN/g - User Control and Freedom, Dualoop - Heuristic 3: User Control and Freedom, UX Planet - All About Usability Heuristic 3: User Control and Freedom, UX Planet - Heuristics 3: User Control & Freedom (Examples)

  4. NN/g - Consistency and Standards, UXcel - Consistency and Standards

  5. UX Design - Jakob Nielsen’s Fifth Usability Heuristic, NN/g - Slips, NN/g - Usability Heuristic: Error Prevention

  6. UX Design - Jakob Nielsen’s Sixth Usability Heuristic, NN/g - Recognition and Recall, UX Planet - Heuristics 6: Recognition Rather than Recall

  7. NN/g - Flexibility and Efficiency Heuristic, UX Design - Jakob Nielsen’s Seventh Usability Heuristic, UXcel - Flexibility and Efficiency of Use

  8. NN/g - Aesthetic and Minimalist Design

  9. UX Tigers - Heuristic 9: Error Messages, NN/g - Error Message Guidelines, YouTube - NN/g Videos: Usability Heuristic - Recognize Errors, NN/g - Usability Heuristic: Recognize Errors, UX Planet - Heuristics 5421e7eceeef

  10. Educative - What is the Help and Documentation Usability Heuristic, NN/g - Help and Documentation, NN/g - Videos: Help and Documentation