UX 디자인 가이드 원칙

외워두면 잘 쓰일 수 있음 두고두고 보자. 연세대학교 김준호 교수 HCI 개론에 나오는 내용이란다.

간단한 설명은 아래와 같다.

UI 원칙	가이드라인
단축성	사용자가 자신이 원하는 과업을 간단하게 마무리할 수 있는 정도를 의미한다.
반응성	시스템에서 현재 상태를 나타내주는 특성, 사용자가 무슨 행동을 하고 있는지, 어떤 행동을 하라고 지시하는 등을 가시적으로 배치한다.
사전방지성	사람들이 오류를 저지를 수 있는 가능성을 미연에 제거하거나 줄여 줌으로써 실수를 범하는 것을 사전에 방지한다.
오류발생감지성	오류가 발생하였다면 시스템은 즉시 사용자에게 이를 알려야 한다.
오류회복성	오류가 발생했다는 사실을 사용자가 되도록 빨리 인식하고, 빠른 시간 안에 조치를 취할 수 있어야 한다.
정확성	시스템은 정확한 값이 산출되어야 합니다.
변화제시성	시스템의 내부 상태가 변화했을 때 그 변화된 상태를 사용자가 감지할 수 있게 제공하는 속성을 의미한다.
가독성	주요 정보는 사용자의 눈에 잘 띄어야 하며, 간결해야 한다.
이해성	전달된 정보는 누구나 쉽게 이해할 수 있어야 한다.
논리성	사용자가 보기에 정보가 제공되는 순서나 구조가 논리적이라고 생각할 수 있어야 한다.
기억성	사용자가 이전에 한 행위를 별도로 기억하지 않아도 시스템에서 사용자가 기억할 수 있도록 도와줘야 한다.
사용자 주도권	사용자가 자신이 원하는 대로 시스템과 상호작용할 수 있도록 해주는 시스템 속성을 말한다.
시스템 주도권	시스템이 상호작용의 모든 주도권을 행사한다.
대체성	사용자가 시스템을 사용하면서 특정 작업을 원할 때 작업을 수행할 수 있는 방법을 두 가지 이상 제공하여 사용자 자신이 처한 상황에 따라 가장 적절한 방법을 선택할 수 있도록 하는 시스템의 속성을 의미한다.
다중성	사용자가 한꺼번에 두 개 이상의 작업을 동시에 수행할 수 있도록 하는 시스템의 속성을 의미한다.
친숙성	사람들이 실제 생활에서 가지고 있었던 경험을 바탕으로 시스템을 사용하는 데 필요한 지식을 습득할 수 있게 하는 속성을 의미한다.
예측가능성	사용자가 자신이 과거에 시스템과 상호작용한 경험에 비추어 자기가 어떤 행동을 하면 그 결과가 어떻게 되리라는 것을 예측 할 수 있어야 한다.
일관성	시스템 내부적으로 사용한 명령어나 메뉴, uI 등이 일관된 스타일을 지니고 있어야 한다.

단축성

사용자가 자신이 원하는 목표를 간단하게 마무리할 수 있는 단계를 의미
단계가 줄면 줄 수록 UX 증가

예를 들어 대중교통을 현금으로 탄다면 지갑 => 가격 체크 => 현금 삽입 => 거스름돈 등의 과정을 거치는데 카드면 지갑 => 카드 찍기 이 2가지로 줄어드니 단축성이 좋다고도 평가할 수 있음.
그러므로 UX가 좋아지려면 단축성을 고려해 사이트를 제작해야함.

단축성 강화 예시

1. 선택 행위 최소화
   옵션이 5개 미만인 경우 드롭다운 리스트보다는 라디오 버튼 사용.
2. 입력 행위 최소화
   옵션 제공 시 사용자들이 가장 많이 선택한 옵션을 디폴트 값으로 제공해 단축성 증가.
   ex) 입력 필드 중 전화번호 첫 값이 빈 값이 아닌 010으로 설정.
3. 반복적 행위 최소화
   접속 등의 동일한 행동이 반복적으로 일어나지 않도록 사용자 권한을 증가.
   ex) 팝업창에서 오늘 하루 보지 않기 체크박스 부여, 검색 후 상세검색 시 다시 검색 버튼을 누르는 것이 아닌 실시간 변경으로.
4. Context 내비게이션
   구매나 제출 등 민감한 기능은 옵션을 볼 수 있게 근처에 배치 및 변경 가능토록.
   ex) 구매 전 옵션 변경 UI 배치.
5. 뎁스 최소화하기
   들어가는 메뉴가 여러개라면 단축성 하락.
   ex) 나의 즐겨찾기 메뉴를 따로 만들어 한 곳에 모아 커스텀할 수 있게 분리.

반응성

시스템에서 현재 상태를 나타내주는 특성.
사용자가 무슨 행동을 하고 있는지, 어떤 행동을 하라고 지시하는 등을 가시적으로 배치.

예를 들어,
1. 우리가 현관에 왔을 때 현관등이 우리가 왔다는 걸 인지하고 바로 불이 켜져 행동하기 쉽게 만듦.
2. 공용화장실에서 비어있는지 안비어있는지 보여주는 화면 및 문의 잠김/열림 상태를 보여줌.
등이 있다.

다운로드 상태 인지 여부, 시스템 반응 속도 및 지체 여부, 시스템 진행 상태 여부, 전체 목록 중 현재 상태 표시 여부, 단계별 입력 행위 여부, 사용자 행위에 따른 피드백 제공 여부, 유도형(Affordance) 버튼 제공 여부 등이 모두 반응성과 관계가 있다.
반응성이 올라간다면 사용자가 어떤 위치에 있는지 파악이 가능해 불편함이 없고, 또한 다음에 할 활동들을 가시적으로 배치해 쉽게 클릭하거나 이점을 취할 수 있음.

반응성 강화 예시

1. 다음 선택 행위 유도
   • CTA 버튼(사용자가 고객으로 전환하는 최종 목표 지점을 달성하기 위해 행동을 유도하는 버튼) 배치.
2. 즉각적 선택 행위 인지
   • 현재 입력해야 할 필드 영역에 언더라인 등 색상을 추가해 어떤 걸 입력하고 있는지.
   • 토글 버튼을 눌렀을 때 어떤 것이 변경되는지 가시적으로 배치.
     
3. 현재 위치 상태 인지
   메뉴를 Hover 및 클릭 후 어디 페이지에 있는지 주변 메뉴와 디자인 구별화.
4. 시스템 진행 상태 인지
   데이터 및 페이지 변경 시 진행 표시 삽입 필요.

사전 방지성

사람들이 오류를 저지를 수 있는 가능성을 미연에 제거하거나 줄여줌으로써 시스템을 사용하면서 실수를 범하는 것을 사전에 방지하는 특성

데이터가 남는 등의 민감한 기능이거나 사용자에 의해 오류가 많이 발생할 수 있는 기능이라면 사전 방지성을 체크해보자. 마치 뜨거워 놀랄 수도 있는 온수에 버튼을 배치한 것처럼.

1. 입력 실수 방지
   입력 필드에 사용자가 잘못된 정보를 입력하지 못하도록 Placeholder 및 에러 상태를 표시.
2. 잘못된 선택 방지
   입력을 완료하지 않은 상태라면 버튼은 비활성화 상태로 보여줘야함.
3. 전송 정보 재확인
   파일 전송 및 결제, 주문 등 데이터베이스에 기록이 남는 활동이자 지출, 공문서 등 민감한 기능이라면 재확인 기능을 넣어줘야함.

오류 발생 감지성

오류가 발생하였다면 시스템은 즉시 사용자에게 이를 인지 시켜줘야 하는 특성

예를 들어 버스카드를 찍었을 때, '잔고가 부족합니다.' '카드를 한 장만 대주세요.'와 같이 무엇이 잘못 됐는지 나온다. 그에 대응해 사용자는 다음 행동을 쉽게 취할 수 있다.