근본있는 UX 원칙 4가지
UX는 User Experience의 약자로 사용자가 어떤 시스템, 제품, 서비스를 직/간접적으로 이용하면서 느끼고 생각하게 되는 총체적 결험을 말한다.
좋은 UX는 쉽게 찾을 수 있고, 피드백을 제공하고, 관용적이고, 직관적이다.
제품을 디자인할 때는 이 네 가지 원칙을 꼭 유념해야 한다.
제1원칙 : 발견 가능성
어느 한 물건을 봤을 때, 그 물건을 가지고 무엇을 할 수 있는지, 또 그것으로 어떻게 상호작용할 수 있을지 알 수 있어야 한다. 좀 더 형식적으로 말하면 버튼, 슬라이더, 문손잡이 등 해당 물건과 상호작용하기 위해 사용하는 기타 여러 물품, 즉 특정 행동을 유도하는 어포던스(affordance)는 찾기 쉽고 이해하기 쉬워야 한다.
예를 들어, USB 타입을 생각해보자. 어느 쪽을 위로 향해 꽂아야 할지 한 번 시도해보고 나서 알 수 있지 않는가? 반면, HDMI 케이블을 생각해보자. HDMI 케이블의 모양은 직관적으로 어떻게 연결해야 할지 금방알 수 있다.
상품을 처음 딱 봤을 때 사용자가 무엇을 어떻게 할 수 있는지 바로 알 수 있어야 한다. 구체적으로 말해서 CTA(행동 유도 버튼, Call to Action)는 찾기 쉬워야 하고 제대로 잘 표시돼 있어야 하며 상황에 맞게 디자인돼 있어야 한다. 회원가입 버튼은 크고 선명하며 가운데 위치해야 하고, 파일을 삭제하는 것과 같이 위험한 작업을 수행하는 버튼은 빨간색이어야 하며, 비활성화 버튼은 무채색으로 표시돼야 하고, 별로 중요하지 않은 버튼은 눈에 잘 띄지 않아야 한다.
제품이 지닌 다양한 기능 역시 찾기 쉬워야 한다. 중요한 것들을 메뉴 깊숙히 숨겨놓지 말아야 한다. 특히 아무 관련이 없는 메뉴에 숨겨놓는 일은 피해야 한다. 예를 들어 은행 앱/웹은 여러 층으로 이뤄진 메뉴 속 깊숙이 기능을 넣어두는 것으로 악명이 높다. 윈도우 8역시 ‘종료’버튼을 찾는 게 거의 불가능해서 비판을 받았다. 당시 종료 버튼을 찾으려면 설정 메뉴로 이동해야 했다.
제2원칙 : 피드백
사용자가 제품과 상호작용을 할 때 그 행동이 효과가 있는지 없는지를 말해줘야 한다. 키모드의 f와 j키에 작은 돌기가 있다는 사실을 알고 있을 것이다. 그것은 피드백을 전달하기 위한 매우 중요한 방법이다. 피드백이 없다면 사용자가 실제로 원햇던 변화를 실현해냈는지 제대로 알 수가 없다. 차를 잠궜는데 철컥 소리가 나지 않느다면 혼란스러울 수 있고 서류를 작성해 제출하는 버튼을 눌렀느데 아무 변화가 없다면 버튼을 다시 누르고 싶을 것이다. 마찬가지로 커머스 사이트에서 결제 버튼을 눌렀는데도 아무 결제가 이뤄지지 않는다면 사용자들은 버튼을 계속 눌러보게 될 것이다. 중복 결제가 이뤄질 수도 있기 때문에 실제로 위험하다.
좋은 피드백 중 하나는 여러 감각을 사용하는 것이다.
여러 감각이 관여하면 사물을 이해하기가 더 쉽다. 테크 제품의 경우 버튼을 누르는 것이 보이는 것과 같은 시각적 피드백이 좋기는 하지만 그것만으로 충분하지는 않다. 모바일 햅틱 피드백이 큰 인기를 누리는 이유가 여기에 있다.
바람직하지 않은 피드백 중 한 유형은 바로 지연된 피드백이다. 파일을 열기 위해 더블클릭해도 몇 초간 아무 반응이 없으면 파일 계속해서 클릭하기 마련이다. 문제가 되는 좀 더 애매한 피드백 패턴은 사용자가 작업을 수행했다는 피드백을 제공하지만 그 작업이 실제로 이뤄졌는지에 대한 피드백은 없는 경우다. 이러한 피드백을 결과 피드백(result feedback) 이라고 한다. 이를 잘 보여주는 대표적인 예가 바로 차고 문 개폐기다. 개폐기를 누르면 불이 깜박이기는 하지만 그 불빛은 개폐기가 작동중이라는 사실만 알려줄 뿐이다. 차고 문이 실제로 열렸는지 닫혔는지 알려주지 않는다.
UI 디자인 요소 중 하나인 브레드크럼(breadcrmb) 은 사용자가 제품에서 어디까지 들어와 있는지 보여주고 상위 카테고리로 바로 올라갈 수 있도록 하는 UI 요소다. 이는 사용자가 ‘제품 내 위치’를 파악하는 데 유용하다. 작업 완료 상태를 보여주는 진행 표시줄, 오류나 완료 메시지를 보여주는 스낵바(토스트라고도 함), 중요한 정보를 보여주는 팝업 모달 다이얼로그는 후자의 세 항목을 파악하는 데 유용하다.
다른 유용한 경험법칙은 모든 작용은 크기가 같고 방향은 반대인 반작용이 존재한다는 뉴턴의 물리법칙에서 나온 유용한 법칙도 있다. 버튼을 클릭하면 ‘누른 상태’로 보이고, 체크 박스 선택 시 불빛이 들어오고, 알림이 오면 휴대전화 진동이 울리거나 푸시 알림을 보여주는 것이다.
제3원칙 : 관용
테니스의 점수 체계는 관용이 존재한다. 설계를 잘하면 사용자가 실수를 피하고 만회할 수 있도록 할 수 있다. 구체적으로 말하자면 관용적인 사용자 경험은 실수할 가능성을 최소화해주고, 실수로 인한 피해를 줄여주며, 실수를 한다고 해도 쉽게 만회할 수 있게 해준다.
실수 방지하기
관용적인 제품을 만드는 가장 좋은 방법은 우선 사용자가 실수하지 않도록 돕는 것이다. 실수하지 않도록 돕는 첫번째 방법은 사용자가 실수로 클릭하지 않도록 ‘위험’하거나 되돌릴 수 없는 작업을 숨기는 것이다. 실수 방지를 위해 버튼, 체크박스, 기타 위젯과 같이 클릭할 대상이 너무 작지는 않은지도 확인해야 한다. 연구에 따르면 실수로 클릭하는 위험을 최소화하려면 클릭할 대상이 최소한 9밀리미터 이상은 돼야 한다. 마찬가지로 사용자가 실수를 저지르지 않도록 잠금장치를 추가하는 것도 도움이 될 수 있다. ‘잠금해제’ 장치가 추가된 휴대전화에 실수로 전화가 걸리는 등 여러 난처한 상황을 피할 수 있게 되었다. 제품이 사용자의 실수를 유도하지 않도록 해야 한다. 사용자를 잘못된 방향으로 이끌 수 있는 혼란스러운 언어나 전문용어는 피해야 한다. 사용자가 작업을 수행하기 전에 그 작업이 얼마나 위험한지 정확히 알고 있어야 한다.
덜 위험한 실수하기
작은 오류들을 자동으로 수정하는 것이다. 구글검색의 자동수정 기능이 아주 좋은 예이다. 사용자가 자동수정이 불가능한 실수를 하게 될 경우, 너무 많이 그 일이 진행되지 않도록 해야 한다. 여러 입력 항목을 작성하고 제출할 때 잘못 기입한 입력란만 빨간색으로 표시하는 등이 그 예이다. 사용자가 위험해지기 전에 실수를 발견하도록 도울 수도 있다. 예를 들어, 휴대폰에 알람 설정을 하면 얼마 후에 그 알람이 울릴지를 알려주는 것이 있다.
가역성(Reversibility)
제품의 UX를 관용적으로 만드는 가장 간단하고 인기있는 방법 중 하나는 모든 작업을 위한 일종의 작업취소(undo) 버튼을 제공하는 것이다. 파일 삭제 취소, 전송취소 등의 기능을 통해 신속하기 실수를 만회할 수 있다. 그런데 작업취소 버튼에만 만들어선 안된다. 되돌릴 수 없는게 분명한 명령은 반대되는 명령을 갖고 있어야 한다.
추가 버튼은 삭제와 쌍으로 구성돼야 하고
확인 버튼은 취소 버튼과 쌍으로 구성돼야 한다.
설치 버튼은 삭제 버튼과 쌍으로 구성돼야 한다.
이는 사용자가 빠져나갈 수 없는 상태가 되지 않도록 해주고, 사용자가 정신 모델을 단순화하도록 도와준다.
또한 사용자가 결정을 내리기 전에 자신이 내린 결정을 재고할 수 있는 중간 상태를 제공할 수도 있다. 이커머스 웹사이트의 장바구니와 운영체제의 휴지통은 모두 돈을 보내거나 파일을 영구적으로 삭제하는 등의 불가역적인 작업을 수행하기 전에 취소할 수 있게 해준다.
많은 PM들은 제품을 관용적으로 만드는 다른 방법은 생각하지 않은채 가역성을 다룬다. 가장 좋은 사용자경험은 사용자가 애초에 실수하지 않는 것이다. 따라서 작업취소 버튼과 같은 것들은 대표적인 해결책이라기보다는 최후의 수단으로 생각하는 게 좋다.
오류메시지
이해하기 어려운 오류 번호나 잘못된 정보 같은 애매한 메시지를 제공하기 보다는 정확히 무엇이 잘못됐고 사용자가 무엇을 어떻게 설명할 수 있는지 설명해야 한다. 메시지가 구어체로 돼 있고 알아듣기 쉬운 능동태를 사용하는지 확인해야 한다.
잘못된 비밀번호. 다시 시도하십시오 (X)
입력하신 비밀번호에 생일이 포함돼 있으므로 이 비밀번호는 사용할 수 없습니다.
비밀번호에서 해당 정보를 제거하고 다시 시도하십시오. (O)
사용자들에게 무엇을 잘못했고 어떻게 수정할 수 있는지 알려준다. 훌륭한 오류메시지에는 사용자들이 랜덤으로 비밀번호를 만들어낼 수 있는 버튼이 포함돼 있어서 버튼 하나로 오류를 수정할 수 있게 되어 있다.
제4원칙: 직관
좋은 사용자 경험은 직관적이다. 즉 우리의 정신 모델(습관적으로 하는 행동이라고 볼 수 있다. 예를 들어 로고를 누르면 메인페이지로 이동 등)과 잘 맞고 그래서 예측 가능하고 배우기도 쉽다.
직관적이지 않은 버튼은 사람들에게 혼란스러움을 준다. 회사는 어떻게 작동하는지 설명하기 위해 도움말 센터에 글을 올려야 했다. 일반적인 가정 중 일부를 깨트릴 수는 있지만 사용자의 정신모델이 혼란스워지지 않도록 명확해야 한다.
예측 가능성(Predictability)은 직관의 중요한 부분이다. 즉 사용자는 상호작용의 결과를 예측할 수 있어야 한다. 예를 들어 가스레인지의 손잡이 버너 위치가 있다. 각 손잡이 버너가 어떤 가스를 켤 수 있는지 라벨을 붙여놓을 수도 있지만 최고의 인터페이스는 라벨을 필요로 하지 않는다. 보통 직관적인 인터페이스는 라벨이나 설명서 없이도 사용이 가능하다.
좋은 법칙 중 하나는 화면 어딘가가 아닌 통제하고자 하는 대상 그 자체에서 제어기능을 사용하게 하는 것이다. 예를 들어 여러분의 앱에 연락처 목록이 있다면 각 연락처를 눌러 연락처에 있는 상자를 선택하고 화면 구성에 있는 삭제 버튼을 일일이 누를 필요 없이 삭제 옵션을 불러올 수 있어야 한다.
또 다른 유형의 대응은 바로 문화적 대응(cultural mapping)이다. 사용자가 속한 문화가 그들이 기대하는 대응 유형을 결정한다. 영어와 힌디어처럼 왼쪽에서 오른쪽으로 문자를 적는 언어권에서는 뒤로가기 버튼이 왼쪽에 있고 앞으로가기 버튼은 오른쪽에 있을 것으로 예쌍한다. 그러나 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 문자를 적는 언어권에 있는 사용자들의 경우, 그와 정 반대로 생각한다.
좋은 UX는 쉽게 찾을 수 있고, 피드백을 제공하고, 관용적이고, 직관적이다. 그리고 좋은 UX는 대부분 좋은 UI에서 나온다는 것을 확인할 수 있었다. 발견 가능성, 피드백, 관용, 직관 이 4가지 원칙만 지켜도 근본있는 UX 만들 준비가 되었을 것이다.
*본 컨텐츠는 책 <7가지 코드>를 기반으로 제작하였습니다.
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
