[번역] 사용자 인터페이스 디자인을 위한 10가지 사용성 휴리스틱

※ 의/오역 있음, 문제 시 삭제합니다.

#1: 시스템 상태 가시화->지도에서 현 위치 표시
#2: 시스템과 실제 세계 간 매칭->가스레인지의 레이아웃
#3: 사용자 제어와 자유->언제든 탈출 가능한 비상구
#4: 일관성과 기준->호텔의 데스크는 언제나 1층 입구에
#5: 에러 방지->산길의 가드레일
#6: 기억보다 인지->포르투갈의 수도는 어디인가요? 포르투갈의 수도는 리스본인가요?
#7: 사용의 유연성과 효율성->지름길과 단축키
#8: 아름답고 간결한 디자인->빛 좋은 개살구
#9: 사용자가 에러를 인식하고, 진단하고, 발견하게 하기->교통표지판
#10: 도움말과 문서화->이동 동선에 위치한 안내 데스크

10 Usability Heuristics for User Interface Design

---

요약: 인터렉션 디자인을 위한 Jakob Nielsen의 10가지 일반적 원칙은 "휴리스틱"이라고 불린다. 왜냐하면 그것들은 광범위한 엄지의 규칙이고 특정한 사용성 가이드라인이 아니기 때문이다.

#1: 시스템 상태 가시화

디자인은 합리적인 양의 시간 내에 적절한 피드백을 통해 항상 계속해서 사용자에게 무슨 일이 일어나고 있는지 정보를 제공해야 합니다.
사용자가 현재 시스템 상태에 대해서 알고 있을 때, 그들은 그들의 이전 인터렉션의 결과에 대해 인지하고 다음 스텝을 결정합니다. 예측 가능한 인터렉션은 프로덕트 뿐만 아니라 브랜드에 대한 신뢰를 형성합니다.

사용성 휴리스틱 #1의 예시:
"여기" 사이트 맵의 인디케이터는 그들이 다음에 갈 장소를 인지하게 하기 위해 그들의 현재 위치를 보여주어야 합니다.

도움말

• 시스템의 상태가 어떤지 명확하게 사용자에게 전달하세요. 사용자에게 알리지 않고 결과에 대한 조치를 취해서는 안됩니다no action with consequences to users should be taken without informing them.
• 사용자에게 가능한 빨리 피드백을 제공하세요 (이상적인 것은 즉시 제공하는 것입니다)
• 열린, 그리고 지속적인 커뮤니케이션으로 신뢰를 쌓으세요.

#2: 시스템과 실제 세계 간 매칭

디자인은 사용자의 언어로 말해야 합니다. 내부 전문용어jargon 대신, 사용자에게 친숙한 단어, 문구, 그리고 컨셉을 사용하세요. 실제 세계의 규칙을 따르고, 자연스럽고 논리적인 순서로 정보를 제공하세요.

당신이 디자인해야 하는 방법은 당신의 특정한 사용자에게 달려있습니다. 당신과 동료들에게 완벽하게 명확해보이는 용어, 컨셉, 아이콘, 그리고 이미지는 사용자에게 친숙하지 않거나 혼란스러울 수 있습니다.

디자인의 제어가 실제 세계의 규칙을 따르고 원하는 결과와 일치할 때(자연 매핑이라고 불리는), 사용자는 인터페이스가 어떻게 작동하는지 배우고 기억하기 더 쉬워집니다. 이는 직관적이라고 느끼는 경험을 형성하는데 도움이 됩니다.

사용성 휴리스틱 #2의 예시:
스토브탑의 컨트롤이 엘리먼트의 레이아웃과 매치할 때, 사용자들은 어떤 컨트롤 맵이 어떤 엘리먼트인지 빠르게 이해할 수 있습니다.

도움말

• 사용자가 단어의 정의를 찾아볼 필요없이 의미를 이해할 수 있도록 확신시키세요.
• 당신이 이해한 단어나 컨셉이 사용자의 이해와 매치할 것이라고 추측하지 마세요.
• 사용자 리서치는 사용자에게 친숙한 용어terminology뿐만 아니라 중요한 컨셉에 대한 그들의 멘탈 모델을 발견하는데 도움이 될 것입니다. 

#3: 사용자 제어와 자유

사용자들은 종종 실수로 액션을 수행합니다. 그들은 확장된 프로세스를 거칠 필요없이 원하지 않은 액션을 빠져나갈 명확히 표시된 "비상구"가 필요합니다.

프로세스에서 벗어나거나 액션을 되돌리기 쉬워진다면, 그것은 자유도와 자신감을 키워fosters줍니다. 비상구는 사용자에게 시스템을 통제감을 부여하고 가로막히거나 좌절감을 느끼는 것을 피하게 해줍니다.

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

도움말

• 되돌리기와 재시도를 제공하세요.
• 취소 버튼과 같이 현재 인터렉션을 빠져나갈 명확한 방법을 제시하세요.
• 비상구가 명확하게 지칭되고 쉽게 발견할 수 있게 하세요.

#4: 일관성과 기준

사용자가 다른 용어나 상황, 또는 액션이 같은 것을 의미하는지 헷갈려서는 안됩니다. 플랫폼과 산업의 관습에 따르세요.

Jakob의 법칙에 따르면 사람들은 당신의 프로덕트가 아닌 다른 디지털 프로덕트를 사용하는데 대부분을 시간을 보냅니다. 다른 프로덕트에 대한 사용자들의 경험은 기대치를 설정합니다. 사용자 경험 일관성을 유지하는 것에 실패한다면 사용자가 새로운 것을 배우게 강요함으로써 사용자의 인지 부하를 야기할 수 있습니다.

사용성 휴리스틱 #4의 예시:
체크인 카운터는 보통 호텔의 입구에 위치해 있습니다. 이러한 일관성은 고객의 기대치를 충족합니다.

도움말

• 내/외부적 두 가지 유형의 일관성을 유지함으로써 학습성을 향상시키세요.
• 단일 프로덕트나 유사 프로덕트 내 일관성을 유지하세요. (내부 일관성)
• 산업의 규칙을 따르세요. (외부 일관성)

#5: 에러 방지

좋은 에러 메시지는 중요합니다. 하지만 가장 최고의 디자인은 초기에 문제가 발생하는 것을 막는 것입니다. 에러가 발생할 수 있는 상황을 제거하거나, 사용자들이 액션을 행하기 전에 컨펌 옵션을 통해 제시하세요.

다음 두 가지 종류의 에러가 있습니다: 부주의slips와 실수입니다. 부주의은 주의하지 않아서 생긴 무의식적인 에러입니다. 실수는 사용자의 멘탈 모델과 디자인 사이의 불합치에 근거한 의식적인 에러입니다. 

사용성 휴리스틱 #5의 예시:
커브가 있는 산길의 가드레일은 운전자가 절벽으로 떨어지는 것을 막습니다.

도움말

• 우선순위를 매기세요: 높은 비용의 에러를 먼저 방지하고, 그 다음 작은 불만
• 유용한 제약과 디폴트를 제공하여 부주의을 피하세요.
• 기억 부담을 제거하고, 되돌리기를 지원하고, 사용자에게 경고함으로써 실수를 방지하세요.

#6: 기억보다 인지

엘리먼트, 액션, 그리고 옵션을 가시화함으로써 사용자의 기억 부담을 최소화하세요. 사용자가 하나의 인터페이스에서 다른 인터페이스까지의 정보를 기억해서는 안됩니다. 디자인을 사용하도록 요구되는 정보(가령 필드 레이블이나 메뉴 아이템)는 보여지거나 필요할 때 쉽게 검색할 수retrievable있어야 합니다.

인간은 제한된 단기 기억을 가지고 있습니다. 인지를 유발하는 인터페이스는 사용자에게 요구되는 인지적 노력의 양을 줄여줍니다.

사용성 휴리스틱 #6의 예시:
대부분의 사람들은 국가의 수도를 암기하는 것보다 떠올리는 것이 더 쉽습니다. 사람들은 포르투갈의 수도가 어디냐고 묻는 질문보다, 리스본이 포르투갈의 수도인지 묻는 질문에 더 정확하게 답할 가능성이 높습니다. 

도움말

• 기억해내기보다는 인터페이스 내에서 정보를 인식하게 하세요.
• 기억해야 할 긴 튜토리얼을 제공하기보다는 맥락 속에서 도움을 제공하세요.
• 사용자가 기억해야 할 정보를 제거하세요.

#7: 사용의 유연성과 효율성

지름길 - 초보novice 사용자로부터 숨겨진 - 은 전문가와 비전문가 사용자 모두에게 맞춰cater질 수 있도록 전문가 사용자에게 있어 인터렉션의 속도를 높여줄 것입니다.

유연한 프로세스는 다른 방식으로 행해질 수 있습니다. 따라서 사람들은 그들에게 적절한 방법을 선택할 수 있습니다.

사용성 휴리스틱 #7의 예시:
일반적인 루트는 지도에 표시되지만, 지역에 대한 정보가 더 많은 지역 주민들은 지름길을 선택할 수 있습니다.

도움말

• 키보드 숏컷과 터치 제스쳐와 같은 엑셀러레이터를 제공하세요.
• 각 유저를 위해 콘텐츠와 기능성을 맞춤 재단함으로써 개인화를 제공하세요.
• 커스터마이징을 제공하여 사용자가 프로덕트가 작동하기를 원하는 방법에 대해 선택할 수 있게 하세요.

#8: 아름답고 간결한 디자인

인터페이스는 관련이 없거나 불필요한 정보를 포함해서는 안됩니다. 인터페이스 내의 모든 부가적인 정보의 유닛은 관련성이 높은 정보의 유닛과 경쟁하고 그들의 상대적 가시성을 감소시킵니다.

이 휴리스틱 법칙은 플랫 디자인을 사용하라는 의미가 아닙니다. 이는 콘텐츠와 비주얼 디자인이 본질에 집중해야 한다는 것을 말합니다. 인터페이스의 시각적 엘리먼트가 사용자의 첫 번째 목표를 지지하게 하세요.

사용성 휴리스틱 #8의 예시:
아름다운 주전자는 불편한 손잡이나 노즐을 닦기 어려운 것과 같이 사용성을 방해할 수 있는 추가적인 장식 요소를 포함할지도 모릅니다.

도움말

• 콘텐츠와 UI의 시각적 디자인이 핵심에 집중하게 하세요.
• 정말로 필요한 정보로부터 불필요한 엘리먼트가 사용자를 방해하게 하지 마세요.
• 가장 중요한 목표를 지원하기 위한 콘텐츠와 기능을 우선순위 정렬하세요. 

#9: 사용자가 에러를 인식하고, 진단하고, 발견하게 하기

에러 메시지는 평범한 언어(에러 코드가 아닌)로 표현되어야 합니다. 정확하게 문제를 나타내고 건설적으로 해결책은 제안해야 합니다.

이러한 에러 메시지들은 사용자가 인지하고 인식하는 것을 돕는 시각적 해결책을 포함하여 표시되어야 합니다.

사용성 휴리스틱 #9의 예시:
잘못된 방향을 안내하는 표지판은 운전자에게 잘못된 방향으로 향하고 있음을 인지시키고 멈추라고 안내합니다.

도움말

• 볼드체의 붉은 글씨와 같이 전통적인 에러 메시지 시각화를 사용하세요.
• 기술적인 전문용어를 피하고 그들이 이해할만한 언어로 무엇이 잘못되었는지 설명하세요.
• 에러를 즉시 해결할 수 있는 숏컷과 같은 솔루션을 제공하세요.

#10: 도움말과 문서화

시스템에 대한 추가적인 설명이 필요없는 것이 가장 좋습니다. 그러나 사용자가 그들의 태스크를 완수하는 방법을 이해하도록 돕는 문서를 제공해야 할 수도 있습니다.

도움말과 문서 콘텐츠는 검색하기 쉬워야 하고 사용자의 태스크에 집중해야 합니다. 그것을 간결하게 유지하고 수행되어야 하는 단계를 견고하게 리스트업 하세요.

사용성 휴리스틱 #10의 예시:
공항에 있는 인포메이션 키오스크는 쉽게 알아차릴 수 있고 맥락 속에서 고객의 문제를 즉시 해결합니다.

도움말

• 도움말은 찾기 쉽게 하세요.
• 가능하다면 사용자가 그것을 필요로 할 바로 그 때, 맥락 속에서 도움말을 제공하세요.
• 수행해 나갈 견고한 단계를 리스트업 하세요.