네 번째 코드: 사용자 경험
7가지 코드 - (4)
: 인간의 멘탈 모델을 기반하여 사용자 경험 구축
* AMAZON GO 처럼 인터페이스를 없앨 수 있으면 없애는 것이 가장 좋다!
[16장] 인지
사람들은 ‘이것은 이렇게 작동할 것이다’ 라는 직관을 가지고 있는데, 이를 정신 모델이라고 부른다. 신제품을 출시할 때에는 기존 정신 모델을 활용하는 것이 좋다. 예를 들어, 구글 닥스는 의도적으로 엑셀과 비슷한 레이아웃과 픽토그램 등을 사용하고 있는데. 그럼으로써 새로 배우지 않아도 불편함 없이 구글 닥스를 사용할 수 있다. 이처럼 새로운 것을 접했을 때 기존의 것과 동일하게 작동하기를 기대하는 것을 제이콥의 법칙이라고 부른다.
메타포 또한 사용자의 이해를 돕는 좋은 방법이다. 처음 PC가 도입되었을 때, 실제 책상에서 일하는 것에 비유하여 ‘데스크톱’이라는 메타포를 활용했다. 앱에서 스와이프나 밀어넣기 등의 동작을 활용하는 것도 실생활에서 사용하는 액션을 차용해 앱을 쉽게 사용할 수 있도록 돕는다.
스큐어모피즘(Skeuomorphism)이란 실제의 질감을 살려 사실적으로 표현하는 디자인 기법이다. 현실의 것을 모방하여 이해를 돕는 것인데, 카메라 앱의 찰칵 소리나 쓰레기통 모양의 UI 등이 이에 해당한다. 찰칵 소리 없이도 카메라를 사용할 수 있지만, 사진이 잘 찍히고 있다는 정보를 촬영자와 모델에게 모두 전달해주는 역할을 한다. 시간의 흐름에 따라 유저가 정신 모델을 체화하면 더 이상 필요 없어지기도 한다. 쓰레기 통 모양을 하고 있지 않더라도 파일을 버리는 곳이라는 것을 이제 모두 알고 있다.
툴 바의 순서와 내용, 구성이 비슷한 구글 스프레드시트(위)와 엑셀(아래)
검색 창은 보통 상단에 돋보기 아이콘과 함께 제안됨 (구글)[17장] 사용자 경험 (UX)
제 1의 원칙: 발견 가능성
한 물건을 봤을 때 그것을 가지고 무엇을 할 수 있을지, 어떻게 상호작용 할 수 있을지를 바로 알 수 있어야 한다. '당기시오'라는 한국어를 이해하는 한국인이 없다는 농담이 있는데, 이렇게 직관적이지 않은 디자인의 문을 노먼의 문(Norman's Door) 라고 부른다. UX/UI의 대가인 노먼이 잘못되었다고 비판한데에서 유래한다. 이처럼 어포던스(affordance, 행동 유도성)을 이해하기 쉽게 설계해야 한다.
(우) 밀고 여는 문의 디자인을 다르게 하면 설명이 없더라도 직관적으로 이해 가능하다출처: UX is present everywhere - Fixing Bad UX Designs [Book] (oreilly.com)
또 한가지 중요한 것은 정신 모델과 일치해야 한다는 것이다. 에피펜은 호흡곤란이나 알레르기 쇼크시 사용하는 응급처치 약물이다. 펜처럼 생긴 모양 떄문에 눌러서 바늘을 노출시킨다고 생각하기 쉬우나, 사실은 세이프티 캡 (파란색)을 제거 후 스윙하면 반대쪽에서 (주황색) 바늘이 나온다.
출처: How EpiPen® works | Epipen.ca
이를 UI에 적용한다면, CTA는 찾기 쉽고 제대로 표시되어 있어야 한다.
제 2의 원칙: 피드백
사용자가 제품과 상호작용 했을 때, 행동이 유의미했는지 즉각적인 피드백을 줘야 한다. 피드백이 늦거나 없으면 제대로 작동되었는지 알기 어렵다. 파일을 클릭한 후 바로 실행이 되지 않아 여러 번 클릭한 결과 다중의 창이 뜬 경험을 해봤을 것이다. 작업이 수행되었음과 작업의 결과 모두 제공해야 완결된 피드백이며, 이해하기 쉬워여 한다. 또한 자판의 딸깍 소리나 눌리는 촉감처럼 시각, 후각, 미각 등 다감각을 사용하면 피드백이 더욱 풍부해진다.
UI에서는 제품 내 위치를 파악할 수 있는 브레드크럼(breadcrumb)이나 작업 완료 상태를 알려주는 스낵바(snackbar 혹은 토스트toast), 중요한 정보를 알려주는 모달 다이얼로그(modal dialog) 등을 통해 피드백을 주고 있다.
* 브레드크럼: 현재의 위치를 설명
AMAZON* 토스트: 작업 완료 상태를 알려줌
* 스낵바: 작업 완료 상태와 함께 액션 버튼을 제공 (실행 취소, 관심 상품으로 이동, 삭제 등)
(좌) FLO 토스트 (중간) NAVER MAIL 스낵바 (우) 당근마켓 스낵바* 모달 다이얼로그: 브라우저 내부에서 상위 레이어를 띄우는 방식 (닫지 않으면 브라우저 사용 불가)
(좌) BLIND (우) SSFSHOP제 3의 원칙: 관용
사용자가 실수하지 않도록 디자인 해야 한다. 삭제와 같은 위험한 버튼은 숨김 처리를 하거나, 한 번 더 생각하도록 추가 단계를 더하는게 좋다. 클릭할 대상이 너무 크거나 작지는 않은지, 문구가 중의적이지는 않을지도 생각해보아야 한다. 애초에 사용자가 실수를 하지 않도록 설계하는 것이 가장 좋지만, 작업 취소나 전송 취소 버튼 등을 통해 실수를 되돌릴 기회를 주는 것이 좋다. (가역성)
오류를 수정하는데 쏟는 시간과 비용을 줄여주는 것도 중요하다. 오타를 냈을 때 자동으로 수정해주거나, 세금 보고시 틀린 부분만 빨갛게 표시해주는 등의 방법이 있다. 알람을 맞출 때 오전과 오후를 헷갈리기 쉬운데 그 결과가 재앙일 수 있다. 8시간 후에 알람이 울린다고 알려주면 사용자는 본인이 오후와 오전을 헷갈리지 않았는지 다시 한 번 체크할 수 있다.
(좌) NAVER MAIL 비가역적인 선택 전 추가적인 알림 (우) NAVER 오타 발생시 자동으로 수정하여 검색제 4의 원칙: 직관
정신 모델과 잘 맞을 때 예측 가능성이 높아지며 더 쉽게 배울 수 있다. 드랍박스에는 오프라인으로 저장하기 기능이 있으나 이를 '즐겨찾기'라고 명명하여 많은 고객에게 혼란을 가져다 줬다.
상호작용의 결과를 사용자가 예측하기 쉬워여 한다. 가스레인지에서 화구와 레버의 위치를 대응시킨다던가 (공간적 대응) 일본과 한국에서 스크롤 방향을 반대로 하는 (문화적 대응) 방법이 있다.
고유성을 위하여 기존의 정신모델과 다르게 디자인을 한다면, 매우 타당한 이유가 있어야한다.
[18장] 사용성
인간의 작업 메모리에는 제한이 있다. 밀러의 법칙(Miller's Law)에 의하면 인간은 한번에 7±2 개의 정보만 기억할 수 있고 그 이상의 정보는 압도감을 줄 수 있다. 따라서 한 화면에는 5~9개의 정보만 노출하는 게 바람직하다. 또한 선택지가 많거나 복잡성이 커질수록 선택하기 어려워진다는 힉스의 법칙(Hick's Law)을 생각하면 불필요한 선택지나 옵션은 제거하고 간결하게 정보를 제공하는 것이 좋다.
제품의 복잡성은 일정하게 유지된다. (직장 내 또라이 보존의 법칙과 동일한 것이랄까..) 개발자가 편하면 사용자가 불편하고, 사용자가 편하면 개발자가 불편할 수 밖에 없다. 좋은 서비스를 위해서라면 개발자가 복잡성을 떠맡는 것이 옳다. 예를 들어, e커머스 사이트에서 신용카드 정보를 기억해두면 (개발자가 복잡성을 떠맡음) 사용자가 매번 입력하는 불편함이 줄어든다.
접근성 또한 중요한 키워드이다. 장애인이나 노인은 물론 여러 언어·문화권의 사람들이 모두 사용할 수 있는 인클루시브 디자인을 제공하자. 윤리적인 이유에서 뿐만 아니라, 사용자가 많은 시장을 개척하는 방법이기도 하다. 다양한 제약 조건을 생각하여 제품을 개선해보자. 술 취한 상태에서 제품을 사용해보는 등 재미있는 방법으로 해결책을 도출하기도 한다.
화면 레이아웃은 사용성에 큰 영향을 미친다. 화면의 크기와 왼/오른손잡이를 고려하여 손가락이 닿는 영역이 어디까지인지를 파악하고(the thumb zone), 그 영역 내에서 사용할 수 있도록 설계해야 한다. 가장 손쉽게 닿을 수 있는 영역에 플로팅 액션 버튼(Floating Action Button, FAB)을 놓기도 한다.
왼손, 양손, 오른손에 따른 엄지가 닿는 영역 (the thumb zone)
(좌) STARBUCKS 딜리버리 FAB (우) SSG.COM 톡 FAB PC 환경에서의 사용자 영역은 모바일과 상당히 상이하다. PC에서는 보통 마우스를 사용하여 동작하는데, 마우스를 옮기는 데 걸리는 시간은 버튼의 크기와 거리에 따라 결정된다. (피츠의 법칙, Fitt's Law) 드롭다우이나 우클릭은 사용자의 노력을 줄여주는 좋은 방법이다. 모서리에 있는 아이콘이 가장 클릭하기 편리한데, 정확한 지점을 조준하지 않아도 되기 때문이다. 따라서 중요한 기능을 모서리에 위치하는 경우가 많다. 사용자는 화면의 정보를 볼 때 F 패턴, Z 패턴 혹은 레이어 케이크 패턴을 따라가는데. 이를 참고하여 정보를 배치하면 사용자에게 더 효과적으로 전달할 수 있다.
출처: Improve Your Website's UX with These 4 Basics | Whereoware
* F 패턴
Google 검색* Z 패턴
AMAZON, Z 패턴 가장 끝에 원하는 CTA를 배치[19장] 고객 vs 사업
고객 경험과 사업 목표 달성은 제로섬 게임이 아니다. 둘 다 윈윈하는 방향으로 나아가야 한다. 예를 들어, 이케아는 쇼룸 형식으로 상품을 전시하여 매장을 구경하는 흥미로운 경험을 제공하면서 매출을 극대화 하고 있다. 글로시에는 쇼핑백 대신 리유저블 핑크 파우치를 사용해 고객 만족도를 높이고 정소가를 상향 조절할 수 있어 이익 극대화에 도움이 된다. SNS에 #YesGlossier 해시태그를 달아 포스팅한 소비자를 공식 모델로 활용하는 캠페인을 벌여 엄청난 마케팅 효과를 누리기도 했다.
사업 목표 달성에는 도움이 될지 모르더라도 사용자 입장에서는 부정적으로 느껴지는 액션을 안티패턴이라고 부른다. 디즈니플러스 등 일부 구독 서비스는 상담을 통해서만 구독 취소가 가능하다. 이처럼 들어가기는 쉬우나 한 번 들어가면 나오기 힘들게 설계한 것을 로치 모텔이라고 부른다. 에어비앤비에서 저렴한 가격에 이끌려 예약하다 추가금에 놀란 적이 있을 것이다. 수수료를 숨긴 후 결제시에 노출하면 소비자는 속았다는 느낌을 받게 된다. 세금 보고 프로그램인 터보택스는 무료로 서비스를 사용할 수 있는 것 처럼 소개하지만, 실제로 세금 보고를 하려면 서비스를 구독해야 하는 미끼 상술을 펼친다.
