UXUI에서 유명한 Nielsen Norman 그룹의 블로그에서 좋은 글 번역본 공유합니다!

10 Usability Heuristics for User Interface Design
By Jakob Nielsen on Apr. 24, 1994; Updated Nov. 15, 2020

Topics: Heuristic Evaluation, Human Computer Interaction, Web Usability

원문 : https://www.nngroup.com/articles/ten-usability-heuristics/#poster

요약

Jakob Nielsen의 인터랙션 디자인을 위한 10가지 일반 원칙
특정 사용성 지침이 아니라 광범위한 경험 규칙이기 때문에 ‘휴리스틱’ 이라고 한다.
*휴리스틱은 경험에 기반해 문제를 해결하거나 학습하거나 발견해 내는 방법을 말한다. 알고리즘과 대비되며, 굳이 이분법적으로 접근하면 인간의 ‘직관’을 반영하는 사고방식이다. 비슷한 한국어로 ‘감', ‘어림짐작’, ‘통밥을 굴리다'가 있다.

[10가지 법칙]
1. 사용자에게 현재 상태를 시각적으로 알려준다.
2. 내부 전문가가 아닌 실제 사용자의 언어로 이야기 해야한다.
3. 실수를 바로 잡을수있는 실행 취소 및 다시 실행과 같이 사용자에게 상황 통제와 자유를 주어야한다.
4. 내부 가이드라인 혹은 업계 관습을 따르는 외부 일관성을 유지해야 사용자의 기대를 쉽게 만족시킬 수 있다.
5. 문제 발생 할 곳에 미리 예방 장치를 설치해야한다.
6. 기억보다 상기할 수 있도록 디자인합니다.
7. 숙련자와 초보자가 모두 잘 사용할 수 있도록 유연성과 효율성을 가져야한다.
8. 인터페이스에 중요한 것에 집중할 수 있는 미니멀한 디자인을 사용한다.
9. 사용자가 문제를 인식, 진단 및 복구할 수 있는 시각적 처리를 해야한다.
10. 추가 설명이 필요 없는 것이 가장 좋지만 차선책으로 도움말 문서가 필요하다.

상세설명

1. 사용자에게 현재 상태를 시각적으로 알려주어야 한다.
Visibility of system status

디자인은 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 합니다.

사용자가 현재 시스템 상태를 알면 이전 상호 작용의 결과를 배우고 다음 단계를 결정합니다. 예측 가능한 상호 작용은 제품과 브랜드에 대한 신뢰를 만듭니다.

사용성 휴리스틱 #1의 예 :
쇼핑몰 지도의 "You Are Here" 표시는 사람들이 현재 있는 위치를 보여줘야 다음에 갈 곳을 이해할 수 있습니다.

[팁]
- 시스템 상태를 사용자에게 명확하게 전달합니다. 사용자에게 알리지 않고 사용자에게 결과를 초래하는 조치를 취해서는 안 됩니다.
- 가능한 한 빨리(이상적으로는 즉시) 사용자에게 피드백을 제공합니다.
- 개방적이고 지속적인 커뮤니케이션을 통해 신뢰를 구축합니다.

2. 시스템과 현실 세계의 일치
Match between system and the real world

내부 전문가가 아닌 실제 사용자의 언어로 이야기 해야한다. 디자인은 사용자의 언어로 말해야 합니다. 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용합니다. 실제 규칙을 따르고 정보가 자연스럽고 논리적인 순서로 나타나도록 합니다.

디자인 방법은 특정 사용자에 따라 크게 다릅니다. 당신과 당신의 동료들에게 완벽하게 명확해 보이는 용어, 개념, 아이콘 및 이미지는 당신의 사용자에게 낯설거나 혼란스러울 수 있습니다.

디자인의 컨트롤이 실제 규칙을 따르고 원하는 결과(자연 매핑이라고 함)에 해당하면 사용자가 인터페이스 작동 방식을 배우고 기억하기가 더 쉽습니다. 이것은 직관적으로 느껴지는 경험을 구축하는 데 도움이 됩니다.

사용성 휴리스틱 #2의 예 :
가스레인지 컨트롤이 발열체의 레이아웃과 일치하면 사용자는 어떤 컨트롤이 어떤 발열체에 매핑되는지 빠르게 이해할 수 있습니다.

[팁]
- 사용자가 단어의 정의를 찾지 않고도 의미를 이해할 수 있도록 합니다.
- 단어나 개념에 대한 이해가 사용자의 이해와 일치할 것이라고 가정하지 마십시오.
- 사용자 연구는 사용자에게 친숙한 용어와 중요한 개념에 대한 멘탈 모델을 찾는 데 도움이 됩니다.

3. 사용자 제어 및 자유
User control and freedom

사용자는 종종 실수로 작업을 수행합니다. 그들은 추가 과정을 갈 필요 없이 원치 않는 행동을 떠나기 위해 명확하게 표시된 “비상 출구”가 필요합니다.

사람들이 프로세스에서 물러나거나 작업을 취소하기 쉽기 때문에 자유와 자신감이 생깁니다. 종료를 통해 사용자는 시스템을 계속 제어할 수 있고 문제가 발생하거나 좌절감을 느끼지 않도록 할 수 있습니다.

사용성 휴리스틱 #3의 예 :
디지털 공간은 물리적 공간과 마찬가지로 빠른 “비상 탈출구”가 필요합니다.

[팁]
- 실행 취소 및 다시 실행을 지원합니다.
- 취소 버튼과 같이 현재 상호 작용을 종료하는 명확한 방법을 보여줍니다.
- 출구에 명확하게 레이블이 지정되고 검색 가능한지 확인하세요.

4. 일관성 및 표준
Consistency and standards

사용자는 다른 단어, 상황 또는 행동이 같은 것을 의미하는지 궁금해할 필요가 없습니다. 플랫폼 및 업계 관습을 따르십시오.

Jakob의 법칙에 따르면 사람들은 대부분의 시간을 귀하의 제품이 아닌 다른 디지털 제품을 사용합니다. 다른 제품에 대한 사용자의 경험은 기대치를 설정합니다. 일관성을 유지하지 못하면 새로운 것을 배우도록 강요하여 사용자의 인지 부하를 증가시킬 수 있습니다.

사용성 휴리스틱 #4의 예 :
체크인 카운터는 일반적으로 호텔 앞에 있습니다. 이러한 일관성은 고객의 기대를 충족시킵니다.

[팁]
- 내부 및 외부의 두 가지 유형의 일관성을 유지하여 학습 가능성을 개선합니다.
- 단일 제품 또는 제품군 내에서 일관성을 유지합니다(내부 일관성).
- 확립된 업계 관습을 따릅니다(외부 일관성).

5. 오류 방지
Error prevention

좋은 오류 메시지도 중요하지만 최상의 설계는 처음부터 문제가 발생하지 않도록 신중하게 방지합니다. 오류가 발생하기 쉬운 조건을 제거하거나 해당 조건을 확인하고 사용자가 작업을 수행하기 전에 확인 옵션을 제공합니다.

실수에는 실수와 실수의 두 가지 유형이 있습니다. 미끄러짐은 부주의로 인한 무의식적 오류입니다. 실수는 사용자의 멘탈 모델과 디자인 간의 불일치에 기반한 의식적인 오류입니다.

사용성 휴리스틱 #5의 예 :
구불구불한 산악 도로의 가드레일은 운전자가 절벽에서 떨어지는 것을 방지합니다.

[팁]
- 노력의 우선 순위 지정: 비용이 많이 드는 오류를 먼저 방지한 다음 약간의 좌절을 방지하십시오.
- 유용한 제약 조건과 좋은 기본값을 제공하여 실수를 방지합니다.
- 메모리 부담을 제거하고, 실행 취소를 지원하고, 사용자에게 경고하여 실수를 방지합니다.

6. 회상보다 인식
Recognition rather than recall

요소, 작업 및 옵션을 표시하여 사용자의 메모리 부하를 최소화합니다. 사용자는 인터페이스의 한 부분에서 다른 부분으로 정보를 기억할 필요가 없습니다. 디자인을 사용하는 데 필요한 정보(예: 필드 레이블 또는 메뉴 항목)는 볼 수 있거나 필요할 때 쉽게 검색할 수 있어야 합니다.

인간에게는 제한된 단기 기억이 있습니다. 인식을 촉진하는 인터페이스는 사용자에게 필요한 인지 노력의 양을 줄입니다.

사용성 휴리스틱 #6의 예 :
대부분의 사람들이 국가의 수도를 기억하는 대신 인식하는 것이 더 쉽습니다. 사람들은 리스본이 포르투갈의 수도입니까?라는 질문에 더 정확하게 답할 가능성이 높습니다. 포르투갈의 수도는 무엇입니까?

[팁]
- 사람들이 기억("기억")하지 않고 인터페이스에서 정보를 인식하도록 합니다.
- 사용자에게 암기할 긴 튜토리얼을 제공하는 대신 상황에 맞는 도움말을 제공하세요.
- 사용자가 기억해야 하는 정보를 줄입니다.

7. 사용의 유연성과 효율성
Flexibility and efficiency of use

초보 사용자에게 숨겨진 바로 가기는 경험이 없는 사용자와 경험이 없는 사용자 모두에게 디자인이 제공될 수 있도록 전문 사용자의 상호 작용 속도를 높일 수 있습니다. 사용자가 빈번한 작업을 조정할 수 있습니다.

유연한 프로세스는 다양한 방식으로 수행될 수 있으므로 사람들이 자신에게 적합한 방법을 선택할 수 있습니다.

사용성 휴리스틱 #7의 예 :
일반 경로는 지도에 나열되어 있지만 해당 지역에 대해 더 많이 알고 있는 현지인은 지름길을 선택할 수 있습니다.

[팁]
- 키보드 단축키 및 터치 제스처와 같은 가속기를 제공합니다.
- 개별 사용자를 위해 콘텐츠와 기능을 맞춤화하여 개인화를 제공합니다.
- 사용자 정의를 허용하여 사용자가 원하는 제품 작동 방식을 선택할 수 있습니다.

8. 미학적이고 미니멀한 디자인
Aesthetic and minimalist design

인터페이스에는 관련이 없거나 거의 필요하지 않은 정보가 포함되어서는 안 됩니다. 인터페이스의 모든 추가 정보 단위는 관련 정보 단위와 경쟁하여 상대적 가시성을 떨어뜨립니다.

이 휴리스틱은 평면 디자인을 사용해야 한다는 의미가 아닙니다. 콘텐츠와 시각적 디자인이 필수 요소에 초점을 맞추도록 하는 것입니다. 인터페이스의 시각적 요소가 사용자의 주요 목표를 지원하는지 확인하십시오.

사용성 휴리스틱 #8의 예 :
화려한 찻 주전자에는 불편한 손잡이나 세척하기 힘든 노즐과 같이 사용을 방해할 수 있는 장식 요소가 과도하게 포함될 수 있습니다.

[팁]
- UI의 콘텐츠와 시각적 디자인은 필수 요소에 중점을 둡니다.
- 불필요한 요소로 인해 사용자가 실제로 필요한 정보에서 주의를 분산시키지 마십시오.
- 주요 목표를 지원하기 위해 콘텐츠와 기능의 우선 순위를 지정합니다.

9. 사용자가 오류를 인식, 진단 및 복구할 수 있도록 지원
Help users recognize, diagnose, and recover from errors

오류 메시지는 일반 언어(오류 코드 없음)로 표현되어야 하며 문제를 정확하게 표시하고 솔루션을 건설적으로 제안해야 합니다.

이러한 오류 메시지는 또한 사용자가 이를 인지하고 인식하는 데 도움이 되는 시각적 처리와 함께 제공되어야 합니다.

사용성 휴리스틱 #9의 예 :
도로의 잘못된 길 표지판은 운전자에게 잘못된 방향으로 가고 있음을 상기시키고 정지를 요청합니다.

[팁]
- 굵은 빨간색 텍스트와 같은 기존 오류 메시지 시각적 개체를 사용합니다.
- 사용자가 이해할 수 있는 언어로 무엇이 잘못되었는지 알려주십시오. 전문 용어를 사용하지 마십시오.
- 오류를 즉시 해결할 수 있는 바로 가기와 같은 솔루션을 사용자에게 제공합니다.

10. 도움말 및 문서
Help and documentation

시스템에 추가 설명이 필요하지 않은 경우가 가장 좋습니다. 그러나 사용자가 작업을 완료하는 방법을 이해하는 데 도움이 되는 문서를 제공해야 할 수도 있습니다.

도움말 및 문서 콘텐츠는 검색하기 쉽고 사용자 작업에 중점을 두어야 합니다. 간결하게 유지하고 수행해야 할 구체적인 단계를 나열하십시오.

사용성 휴리스틱 #10의 예 :
공항의 정보 키오스크는 쉽게 알아볼 수 있으며 상황에 따라 즉시 고객의 문제를 해결합니다.

[팁]
- 도움말 문서가 검색하기 쉬운지 확인하십시오.
- 가능하면 사용자가 필요로 하는 바로 그 순간에 상황에 맞는 문서를 제시하십시오.
- 수행할 구체적인 단계를 나열하십시오.

Jakob의 노트
Note from Jakob

저는 원래 1990년에 Rolf Molich와 공동으로 발견적 평가를 위한 발견적 방법을 개발했습니다[Molich and Nielsen 1990; Nielsen과 Molich 1990]. 4년 후, 249개의 사용성 문제에 대한 요인 분석을 기반으로 휴리스틱을 정제하여[Nielsen 1994a] 설명력이 최대인 휴리스틱 세트를 도출했으며, 그 결과 이 개정된 세트의 휴리스틱[Nielsen 1994b]이 탄생했습니다.

2020년에는 더 많은 설명, 예제 및 관련 링크를 추가하여 이 문서를 업데이트 했습니다. 정의의 언어를 약간 수정했지만 10가지 경험적 방법 자체는 1994년 이후로 관련성이 있고 변경되지 않은 상태로 유지되었습니다. 26년 동안 사실이 유지한다는 것은 미래 세대의 사용자 인터페이스에도 적용될 것을 시사합니다.

번역 후기

94년도에 가이드가 나오고 2020년에 업데이트 되었지만 여전히 UI 디자인을 하면서 반드시 확인해야하는 체크리스트라고 생각합니다! 10가지 가이드에 맞게 데이터를 이용해 사용성과 심미성있는 UI디자인을 해나가고 싶습니다!

UI 디자인을 위한 10가지 사용성 휴리스틱

UI 디자인을 위한 10가지 사용성 휴리스틱