7가지 코드 - (4) 사용자경험
사용자가 정신모형을 발달시키는 방법, 훌륭한 사용자경험을 만드는 방법, 인간 인식의 뉘앙스가 제품에 어떻게 반영되는지 이해하는데 도움이 되는 챕터였다. 최종 목표는 모두가 사용 가능하고 유용한 제품을 만드는 데 있다.
[정신모델]
- 사용자 인지에 관한 이해는 ‘정신 모델’에서 출발한다.
- 정신모델이란 무언가가 어떻게 작용하는지에 대한 직관과 같은 개념이다.
- 정신모델은 동서양, 국가별로 다르게 나타날 수 있다. 색에 대한 인식이 나라별로 다르게 나타날 수 있고, 동양에서 오른쪽에서 왼쪽으로 넘기는 책을 서양에서 본다면 사용하는데 인지적 혼란이 올 것이다.
- 기존의 정신모델을 재사용하는 것도 방법이다. (제이콥의 법칙,Jakob’s law)
- 구글독스가 엑셀과 유사한 버튼 인터페이스를 제공하는 것도 정신모델 재사용의 하나의 예시이다.
[메타포]
- 기존에 없던 것을 새롭게 만들어내어 설명하려면 기존에 익숙한 것에 비유하는 ‘메타포’ 과정이 필요하다.
- 스큐어모피즘 (skeuomorphism): 새 것에 대한 만족도와 이해력을 높이기 위해 새로운 기술이 이전 기술의 디자인 요소를 모방하는 기법. 아이튠즈의 초기 로고가 CD로 디자인된 부분이나 애플워치가 ‘워치’라는 용어를 사용하며 시계 인터페이스를 사용하는 것도 스큐어모피즘의 하나이다.
좋은 UX는 쉽게 찾을 수 있고, 피드백을 제공하고, 관용적이고, 직관적이다.
[제1원칙:발견 가능성]
물건을 보았을 때, 그 물건을 가지고 무엇을 할 수 있는지 어떻게 상호작용 할 수 있을지 알 수 있어야 한다. 컴퓨터 케이블이 헤드를 보고 포트를 찾을 수 있도록 되어있는 것이 이 원칙을 잘 설명한다. 디지털 상품에서도 CTA는 찾기 쉬워야하고, ‘위험한’ 작업의 버튼은 빨간색이어야 하며, 비활성화 버튼은 무채색으로 표시해야 한다.
[제2원칙:피드백]
사용자가 제품과 상호작용을 할 때, 그 행동이 효과가 있는지 없는지를 말해줘야 한다. 차 문을 잠갔을 때 소리가 나는 것처럼 말이다. 핸드폰에서 소리로, 시각적으로, 햅틱으로 이러한 피드백을 준다.
사용자는 제품 내 위치, 행동의 현황, 다음에 일어날 일, 행동의 궁극적인 결과 등을 항상 알고 있어야 한다. ‘브레드크럼(breadcrumb)’은 사용자가 제품에서 어디까지 들어와 있는지 보여주고 상위 카테고리로 바로 올라갈 수 있도록 하는 UI요소이다. 작업 완료 상태를 보여주는 ‘진행 표시줄’, 오류나 완료 메세지를 보여주는 ‘스낵바’, 중요한 정보를 보여주는 팝업 ‘모달 다이얼로그’ 등이 UI디자인을 통한 피드백이라고 할 수 있다.
[제3원칙:관용]
관용적인 사용자경험은 실수할 가능성을 최소화해주고, 실수로 인한 피해를 줄여주며, 실수를 한다고 해도 쉽게 만회할 수 있게 해준다. 실수를 방지하기 위해 ‘삭제’ 버튼을 숨긴다거나 ‘잠금해제’ 이후에 전화 다이얼을 누를 수 있도록 하는 등 사용자의 실수를 방지하기 위한 방법들을 고민한다. 또한, 실수를 한다해도 만회하기 쉽도록 ‘작업취소’ 버튼을 제공하기도 한다.
추가로 찾아본 예시
구글독스 및 많은 SaaS 기반의 문서 편집 프로그램에는 작성된 내용이 자동으로 저장되며, 변경된 히스토리가 기록으로 남는다. 저장을 하지 못해 문서가 날라가는 ‘실수’로 인한 피해를 줄어 주며, 실수로 작성된 내용을 지웠버렸다고 하더라도 쉽게 만회할 수 있도록 ‘버전 기록’을 제공한다.
[제4원칙:직관]
드롭박스의 모바일 앱은 ‘즐겨찾기로 표시하기(Mark as favorite)’ 버튼을 눌러 오프라인 상태에서도 접근할 수 있게 파일을 다운로드할 수 있도록 했다. 그러나 즐겨찾기와 오프라인으로 저장하는 것의 연관성을 찾기가 어려웠고 사용자들은 오프라인으로 저장하는 기능을 찾아 헤맸다. 버튼이 직관적이지 않았던 것이다.
제품이 ’정신모델‘에 부합하지 못할 경우 비직관적이라고 판단된다.
따로 설명하지 않아도 대응(mapping)되는 것도 하나의 직관에 해당한다. 가스레인지의 손잡이 위치가 버너의 위치와 동일하게 배치된 것도 공간적 대응을 활용한 것이다.
- 인간의 단점을 고려해 간편하고 사용하기 쉬운 제품을 만드는 것은 사람들이 좋아할 만한 제품을 만드는 데 있어서 매우 훌륭한 방법이다.
- 메모리 제한 : 선택지가 많을 경우 오히려 선택하기 어려워진다. ’선택의 역설‘, ’분석마비‘라고도 한다. 적절한 정보의 양은 7 +-2개 이다.
- 복잡성 보존의 법칙 : 모든 제품은 반드시 처리해야 할 정보량이나 작업량(환원 불가능한 복잡성(irreducible complexity))을 어느 정도 갖고 있다. 단, 사용자 친화적인 제품을 만드는 개발자는 환원 불가능한 복잡성을 최대한 떠맡아 해결하려 하여 사용자가 해야 할 일의 양을 최소화하려 할 것이다. 얼굴인식을 통해 로그인 단계를 간략하게 하는 것도 하나의 예시이다. 사용자가 제품을 사용하는 데 쏟는 에너지양이 정해져 있기 때문에 단순 작업에 쏟는 에너지양을 줄이면 더 복잡한 작업을 하기 위한 더 많은 에너지를 확보할 수 있다.
- 접근성 : 사용자 친화성을 높이고자 할 때 장애에 대해 생각하는 것이 실제로 강력한 렌즈가 될 수 있다.
- 화면 레이아웃 : 모바일에서는 손가락이 닿지 않는 영역을 고려해서 버튼을 디자인해야 할 것이다. PC환경에서는 막혀 있기 때문에 마우스가 더 갈 수 없어서 모서리에 버튼을 위치해두는 것이 효과적이다
추가로 찾은 예시
말해보카 : 뒤로가기도 있지만 한손으로 사용 시 닿기 어렵다. 오른쪽 하단에도 닫기버튼을 노출하고 있다. 사용자의 사용성을 고려한 버튼 위치라고 생각된다.
양질의 사용자경험은 사업 목표와 사용자 목표를 조정해주어 사업과 사용자라는 두 마리 토끼를 모두 잡을 수 있게 해주고, 이는 성공적인 제품과 사업의 토대가 된다.
[안티패턴]
- 안티패턴이란 실제로 자주 사용되지만 부정적이거나 비효율적인 패턴을 말한다. 유명한 유형은 로치모델(roach model)로 가입하기는 쉬우나 해지하기는 매우 어려운 서비스를 일컫는다. 에어비앤비에서 예약을 하려고 보면 명시된 가격 이외에 수수료가 25~50% 더 붙어서 가격이 부풀어오르는 사례도 안티패턴 중 하나이다.
(+구독취소를 위해서는 전화를 해야하는 경우도)
[윈윈 경험]
- 사업 목표와 사용자 목표를 모두 만족시킨 예로는 ’이케아‘ 매장이 있다. 이케아는 매장을 영웅의 여정이라는 모험으로 만들어 설계하였다. 이케아에서는 경험을 선형적으로 할 수 있게 설계해두었다. 거실, 식당, 침실, 주방을 거닐며 가구를 찾고 휴식을 취하며 간식을 먹을 수 있도록 말이다. 그리고 모험의 성과를 가지러 위풍당당하게 창고로 들어간다. 선형적인 매장은 필요한 직원 수를 줄일 수 있고, 고객이 진열된 모든 제품을 살펴보도록 해 부가적인 판매를 촉진하는데 도움이 되었다.
추가로 찾아본 예시
이케아 APP : 방을 촬영하면 방이 배경이 되어 이케아 가구를 배치해볼 수 있다. 사용자가 온라인으로 구매를 하더라도 사이즈와 분위기를 맞춰서 구매할 수 있다. 고객에게는 미리 청사진을 그려볼 수 있도록 하여 구매 경험을 만족시키고, 사업적으로는 교환,환불 비용을 아낄 수 있는 수단이 될 수 있을 것이다.