brunch
매거진 5분 UX

[5분 UX]외우고 있으면 좋은 UI 법칙 10가지

제이콥 닐슨의 인터랙션 디자인 법칙

by Newtudy

본 글은 닐슨 노먼 그룹의 <10 Usability Heuristics for User Interface Design>를 바탕으로 구성했습니다.



제이콥 닐슨의 인터랙션 디자인에 대한 10가지 일반 원칙. 이는 구체적인 사용성 가이드라인이 아닌 광범위한 경험 법칙이기 때문에 '휴리스틱'이라고 불린다.


#1: 시스템 상태의 가시성

사용자는 시스템 상태를 이해하고 사용 가능 여부를 알 수 있어야 한다. 이를 위해 상태 메시지, 진행률 표시 등을 제공하는 것이 좋다.

Screen Shot 2023-03-12 at 9.55.40 PM.png
예시:
쇼핑몰 지도의 현재 위치 표시기는 사용자가 현재 어디에 있는지 표시하여 다음에 어디로 이동해야 하는지 쉽게 이해할 수 있도록 도와준다.


#2: 매치되는 시스템과 실제 세계의 언어와 개념

시스템과 사용자가 상호작용하는 과정에서 사용되는 언어와 개념은 사용자가 일상적으로 사용하는 것과 일치해야 한다.

Screen Shot 2023-03-12 at 10.35.36 PM.png
예시:
인덕션 스위치와 인덕션의 레이아웃이 일치하면 사용자는 어떤 스위치가 어떤 인덕션에 매핑되는지 빠르게 이해할 수 있다.


#3: 사용자의 자율성과 컨트롤

사용자는 언제든지 시스템을 종료하거나 사용 중인 작업을 중단할 수 있어야 한다. 또한, 시스템의 기능에 대한 조작 및 제어 권한을 가지고 있어야 한다.

Screen Shot 2023-03-12 at 10.35.40 PM.png
예시:
디지털 공간에도 물리적 공간과 마찬가지로 빠른 비상구가 필요하다.
실행 취소 및 다시 실행을 지원하는 것을 고려해야 한다.


#4: 일관성과 표준화

시스템 내부와 다른 시스템 간에 일관성 있는 디자인과 표준화된 용어를 사용해야 한다. 이는 사용자가 시스템에서 수행할 작업을 이해하고, 비슷한 작업을 수행하는 다른 시스템에서도 동일한 방식으로 작업을 수행할 수 있도록 도와준다.

Screen Shot 2023-03-12 at 10.35.45 PM.png
예시:
체크인 카운터는 일반적으로 호텔 정면에 위치한다. 이러한 일관성은 고객의 기대에 부응한다.


#5: 에러의 예방 및 처리

에러가 발생하지 않도록 시스템이 미리 예방하고, 에러가 발생한 경우에도 쉽게 처리할 수 있어야 한다.

Screen Shot 2023-03-12 at 10.35.50 PM.png
예시:
굽은 산길의 가드레일은 운전자가 절벽에서 떨어지는 것을 방지한다.
비용이 많이 드는 오류를 먼저 방지한 다음 작은 오류를 체크해 보고 기본값 제공에 대한 고민을 해야 한다.


#6: 인식과 기억의 부담 경감

사용자가 시스템 내에서 수행하는 작업을 이해하고 기억하기 위한 부담을 최소화해야 한다. 이를 위해 사용자에게 필요한 정보를 제공하고, 사용자 경험을 단순화해야 한다.

Screen Shot 2023-03-12 at 10.35.54 PM.png
예시:
대부분의 사람들은 국가의 수도를 기억하는 것보다 알아보는 것이 더 쉽다. 사람들은 포르투갈의 수도가 어디인가요?라는 질문보다 리스본이 포르투갈의 수도인가요?라는 질문에 정답을 맞힐 가능성이 더 높다.

사용자가 정보를 기억('리콜')하도록 강요하는 대신 인터페이스에서 정보를 인식할 수 있도록 하자.

사용자가 외워야 하는 긴 튜토리얼 대신 상황에 맞는 도움말을 제공해야 한다.

사용자가 기억해야 하는 정보를 최대한 줄여보자.


#7: 유연하고 효과적인 사용자 경로 제공

사용자는 가능한 한 적은 단계로 원하는 목표에 도달할 수 있어야 한다. 또한, 시스템 내에서 언제든지 다른 작업으로 전환할 수 있도록 유연한 사용자 경로를 제공해야 한다.

Screen Shot 2023-03-12 at 10.35.58 PM.png
예시:
지도에 일반 경로가 표시되어 있지만 해당 지역에 대한 지식이 있는 현지인은 지름길로 이동할 수 있다.

키보드 단축키 및 터치 제스처와 같은 가속기를 제공하고
개별 사용자를 위해 콘텐츠와 기능을 맞춤화하는 시도를 해야 한다.


#8: 미디어의 적절성

사용자가 사용하는 기기와 미디어에 맞게 적절한 디자인을 제공해야 한다. 예를 들어, 모바일 기기에서는 화면이 작기 때문에 정보를 단순하게 제공해야 하며, 시각적인 요소도 적게 사용해야 한다.

Screen Shot 2023-03-12 at 10.36.04 PM.png
예시:
화려한 찻주전자에는 불편한 손잡이나 세척하기 어려운 노즐과 같은 과도한 장식 요소가 있어 사용성을 방해할 수 있다.

UI의 콘텐츠와 시각적 디자인은 핵심에 집중하자.

불필요한 요소를 없애고 필요한 정보에 집중하게 돕자.

콘텐츠와 기능의 우선순위를 정하여 주요 목표를 지원하자.


#9: 사용자 경험의 개선을 위한 유저피드백

사용자의 행동 및 피드백을 수집하고 이를 시스템의 개선에 활용해야 한다. 사용자의 행동을 추적하고, 사용자가 특정 작업을 수행하는 데 어떤 문제가 있는지 파악할 수 있는 피드백 기능을 제공하는 것이 좋다.

Screen Shot 2023-03-12 at 10.36.10 PM.png
예시:
도로의 잘못된 길 표지판은 운전자에게 잘못된 방향으로 가고 있음을 알리고 정차하도록 요청한다.

굵은 빨간색 텍스트와 같은 전통적인 오류 메시지 비주얼을 사용하자.

기술 전문 용어는 피하고 사용자가 이해할 수 있는 언어로 무엇이 잘못되었는지 알려주자.

사용자에게 오류를 즉시 해결할 수 있는 바로 가기 등의 해결책을 제공하자.


#10: 접근성 제공

시각, 청각, 지적 장애 등의 장애를 가진 사용자들도 시스템을 사용할 수 있도록 접근성을 고려해야 한다. 이를 위해 대체 텍스트, 자막, 스크린 리더 등의 기능을 제공해야 한다.

Screen Shot 2023-03-12 at 10.36.16 PM.png
예시:
공항의 안내 키오스크는 쉽게 알아볼 수 있으며 고객의 문제를 상황에 맞게 즉시 해결한다.

도움말 문서를 쉽게 검색할 수 있도록 하자.

가능하면 사용자가 필요로 하는 순간에 상황에 맞는 문서를 제공하자.


이러한 10가지 사용성 평가 지침은 디자인 개선을 위한 출발점으로 활용될 수 있다. 이를 통해 사용자들이 시스템을 보다 쉽게 이해하고 사용할 수 있도록 도와줄 수 있다.

keyword
매거진의 이전글[5분 UX] 디자이너가 사람들에게 자유를 주는 이유