UX측면에서 잘 만들어진 B2C사례: 2부, 토스와 기업은행 아이원뱅킹

UX 측면에서 잘 만든 사례 소개 두 번째 시간,

TOSS의 사용자 경험 

#psychology #UXUI #App

최종 산출물인 디자인에 합리적이고 설득력 있는 논거를 덧붙일 수 있어야 좋은 UX 사례라고 봅니다. 이번 편은, 존 야블론스키의 UX 심리학 측면에서 Toss와 기업은행 i-one banking의 굿 포인트를 소개합니다. 

저자가 결정한 접근 방법은, 심리학이었다

프로세스의 변형. 항상 프로젝트를 진행하며 느끼는 점은 프로젝트는 마치 “생명체”와도 같다는 점이다.  “Flexible”하다.  따라서, 누군가의 UX, UI 연구와 책을 보는 것은, 가이드나 다른 사람의 방법을 참고하는 것뿐이지 그 무엇도 정답이라고 확신할 수 없다. 그만큼 “상황”과 “정황”이 서로 다르고 무엇보다 거기 모인 “사람”이 다르다.

제1원칙. 제이콥의 법칙

#익숙함 #멘탈모델

사용자는 기존에 축적된 경험 데이터베이스를 통해 새로운 프로덕트를 이해하려는 경향이 있다. 따라서, 멘탈 모델을 활용한다 라는 것은, 기존 시장의 프로덕트 분석을 응용하여 손쉽게 프로덕트를 설계할 수 있다. 이러한 과정 속에 서비스 디자인 방법론(페르소나, 인터뷰, 고객여정지도)가 활용된다.  여기서 드는 의심 하나, 너무 따라 하면 지루하지 않나? 창의성이 침해되는 부분… 그러나 기존의 익숙한 UI 시스템을 무시한다면 개발 속도도 느려지는 것은 물론 사용법을 익히는 데 있어 시간이 많이 걸릴 것이다. 그 경계선을 찾아내어 창의성을 발휘할 필요가 있겠다.

문득 든 생각에 브랜드 파워가 없는 서비스일수록 UX와 UI가 일반 대중의 멘탈 모델에 적합한, 보다 친숙한 형태로 디자인 형태로 제작되어야 하지 않나 싶다. 

만보 걷기를 통한 리워드를 지급하는 UI다. 게임에서 자주 보이는 미션 형식으로 사용자에게 게임과 같은 승부욕과 동기 부여를 제공한다.

제2원칙. 피츠의 법칙

#터치 대상의 크기와 거리감 #사용성 #UI LAYOUT

사용성은 좋은 디자인의 한 예다. 인체공학과 사용성은 UX 이전에도 있었던 개념이다. 디자이너는 사용자가 사용하기 편하게끔 위치 적절한? 인터페이스에 각 컴포넌트를 위치시킬 필요가 있다. 탐색, 조회 모두 접근 가능해야 한다. 쉽게 말해, 인터페이스에 운지의 범위를 적절하게 설계해주는 것을 의미한다. 웹 퍼블리셔가 패딩 값을 설정할 때, GUI값보다 더 넉넉하게 잡는 것도 피츠의 법칙에 해당하지 않을까?   

원래 피츠의 법칙은 미국 심리학자 폴 피츠가 터치 대상까지 움직이는 거리와 너비를 함수를 통해 예측한 수학 모델이라고 한다. ID = log2(2d/w)라고 한다.

이를 테면, 애플과 구글 매터리얼 디자인 가이드라인 또는 닐슨 노먼 그룹에는 권장 규격 즉 UI 규격이 존재한다.  권장 수치는 최소점이라고 한다. 이것보다 더 크게 만들어야 사용하기 쉽다고 한다. MIT 터치 랩 연구 결과에 따르면, 성인의 손가락 지문 면 평균 면적은 10~14mm이고 손끝 면적이 8-10mm이라고 한다. 

디자인 가이드라인에서는 대상이 서로 너무 가까워서 발생하는 입력 오류를 줄이는 방법을 터치 대상 간의 거리를 8DP 이상 확보하라고 쓰여 있다. PC는 왼쪽에서 오른쪽으로 시선이 이동하는 것과 달리, 모바일은 중앙부에 가장 많이 집중이 되며, 터치 빈도수가 높은 글로벌 키는 운지 범위가 쉽게 닫는 아래 영역에 위치하는 것이 좋다. 애플도 한 손 안에서 간편하게 쓸 수 있는 화면 상단 간편 접근 기능을 아이폰 6부터 추가하였다.

제3원칙. 힉의 법칙

#선택지 개수 최소화 #인지 부하 #온보딩을 점차적으로 실행

간단히 말하자면, 심플하게 만들어라! 단, 너무 추상적이지 않은 정도로만! 이겠다.

중복과 과잉을 줄이고, 사용자가 빠르게 목적을 달성하도록 돕는다. 힉의 법칙은 월리엄 에드먼드 힉과 레이 하이먼이 자극의 개수와 자극에 대한 반응 사이의 상관관계를 의미한다. 선택지가 늘어나면 사용자 결정까지 시간이 걸린다. RT=a+b log2 (n). 

스크롤만 하면, 사용자는 콘텐츠의 성격을 쉽고 점차적으로 파악하며 유도된다. 화면에도 적절하며 핵심 메시지만을 간결하게 전달하고 있다

다시 본론으로 돌아가 우리의 뇌는 너무 복잡하고 많은 양의 데이터가 들어온 경우 인지 부하(cognitive load)에 시달린다. 이것과 반대로 지나친 단순화의 오류로 아이콘은 범용적으로 사용되지만 중복이 올 수 있어 최근에는 텍스트 레이블과 함께 사용되고 있다. 물론 현업 디자이너들은 최대한 인터페이스가 깔끔한 것을 지향한다.  

제4원칙. 밀러의 법칙

#Chunking #마법의 숫자 7 #기억력

1956년, 인지심리학자 조지 밀러가 마법의 숫자 7 더하거나 빼기 2라는 논문에서 기원한다. 청소년의 기억 범위는 대략 7 정도로 제한된다고 한다. 그러나 이것은 다소 오해가 있는데, 덩어리화 하더라도 사람마다 인지와 기억 범위가 일정 치는 않다고 한다. 전화번호만 봐도 010 8833 4499 이렇게 구분하고 덩어리화 하는 것이 01088334499보다 더 외우기 쉽다. 보고서를 쓸 때, 텍스트를 죽 열거하기보다 가독성을 고려하여 행을 나누고, 길이를 줄이고, 강조 기법으로 볼드나 밑줄을 그을 때 유리하다. 또한, 비슷한 콘텐츠에 영역 구분을 하고, 내비게이션을 라인으로 구분하고 청킹 짓는 부분이 해당한다.

IA와 메뉴 구조에서 적절한 그룹핑과 덩어리화는 중요하다. 복잡한 금융 서비스 메뉴에서, 공통 화면 영역과 개인 영역, 그리고 서비스 영역이 효과적으로 구조화 되어있다

제5원칙. 포스텔의 법칙

#유연성 #접근성 #관대함

기기의 크기 기능, 입력 메커니즘, 보조 기술, 연결 속도 등 누구에게나 정상 작동하고 인터페이스를 제공한다. 즉, 다양한 접근성에 잘 대처할 수 있는 인간 중심 경험 디자인을 의미한다. 책에서는 다양한 입력장치를 고려해야 한다고 사례를 들고 있고, 퍼뜩 웹 접근성이 떠올랐다. 존 포스텔은 데이터를 주고받는 기반인 전송 제어 프로토콜의 초기 모델을 구현한 사람이다. 소프트웨어 아키텍처도 이 원칙의 영향을 받았는데, HTML, CSS 같은 선형 언어를 예로 들면, 오류를 느슨하게 다룬다. 지원하지 않는 기능의 문제를 너그럽게 받아들인다는 얘기다. 시스템이 사용자 입력을 얼마나 유연하게 받아들일 수 있나, 인간과 컴퓨터는 서로 다른 방식으로 소통하므로 서로의 이해관계가 다를 수 있다. 포스텔의 법칙 사례는 디자인 시스템에 적용할 수 있다. 디자인 시스템에 관리하기 쉽고, 일관성 있는 방식과 확장성의 목적으로 활용된다.

마지막으로 문자열이 달라 왼쪽에서 오른쪽으로 흐르는 것이 우리에게 친숙하지만, 아랍어는 반대로 입력되며, 같은 말이라도 각 언어 패치에 따라 노출되는 길이와 화면당 면적은 다를 수 있다. 또한 글꼴 디자인에 따라 여백과 크기는 각각 다르게 느껴질 것이다. (사용자가 인지할 때) 이러한 부분도 예측하고 디자인 적응력을 키우려면 어떻게 처리해야 할까? 

연장자를 위한크기 조절 기능. 디자인과 UX, UI에는 앱접근성이 반영 되어야한다.

제6원칙. 피크엔드의 법칙

#끝이 좋으면 다 좋다 #절정의 순간

사람은 모든 여정의 총합의 평균값이 아니라 스냅사진처럼 찰나와 순간만을 기억한다고 한다. 즉 인상적인 부분과 마지막 결과의 순간에 느낀 감정만을 기억한다는 것이다. 대니얼 카너먼이 남긴 “더 큰 고통을 적은 고통보다 선호하게 하려면 경험의 마지막 순간이 좋아야 한다” 논문에서 유래한다. 심리학 용어로 이를 “인지 편향(cognitive bias)”과 관련이 있다. 토론이 진행되는 중에, 기존 신념에 해당하는 근거와 정보에만 귀를 기울이는 형상을 확증 편향(confirmation bias)라고 한다. 자신의 선입견이 옳다고 흐르는 형상을 말한다. 마지막 최신 정보를 잘 기억한다는 최신 효과(recency effect)와 관련이 깊다. 

우버 익스프레스 풀 서비스는 택시 배차 시 차량의 이동경로의 애니메이션을 볼 수 있다. 그리고 도착 예상 시간과 계산 방법도 명확히 설명한다. 곧 고객은 차량에 탑승한다는 감각과 진전성을 느끼게 한다. 따라서 대기 시간이라는 사용자의 불편함을 최소화하고 요청 취소율을 낮추게 하였다. 이는 우버가 행동과학을 적절하게 활용하는 방법의 예시로 활용되고 있다. (How Uber leverages Applied behaviourl science at Scale.) 오류 404의 경우, 유머러스 한 일러스트를 넣어, 사용자의 부정적 이미지를 전달할 수 있는 시간에 브랜드의 개성을 드러내는 경우가 많다.

제7원칙. 심미적 사용성 효과

#보기 좋은 떡이 먹기에도 좋다

보기 훌륭한 룩스는 사용성에도 좋을 것 같은 만족감을 준다고 한다. 실제 사용성과 심미성은 비례 관계라고 하며, 구체적인 심리적 용어로는 자동 인지 처리 (automatic cognitive processing)과 관련 있다. 과거의 경험으로 빠르게 속단하는 일이다. 효율성 측면에서 그렇게 뇌에서 처리한다고 한다. 또한 정신적 능력의 소모를 적게 한다. 오판도 있지만 결국 인간은 효율성 측면에서 이와 같은 속성을 포기하지 않는 것 같다.

제8원칙. 폰 레스토프 효과

#강조기법 #시각적 강조 #색상, 형태, 크기, 위치, 움직임 #n뱃지 

특정 우선수위 기능에 따라 강조를 하거나, 유도를 위해 특정 기능이나 콘텐츠를 하이라이트 처리하는 효과를 의미한다. 사람들이 뚜렷이 구분되는 항목을 가장 잘 기억한다는 심리적 연구에 기인한다. 적절히 집중할 곳을 안내하여 사용자가 길을 잃고 산만해지는 것을 방지하며 필요정보나 동작을 쉽게 찾도록 한다 특정 요소를 구분 짓는 일은 그래픽 디자인과 미술의 필수 덕목이다. 레드 칼라 혹은 보색 칼라를 넣던가, 텍스트 크기를 본문과 헤드라인을 구분 지어 더 대비를 극대화한다. 반면, 너무 무절제한 강조는 갈 길을 잃기도 하여, 절제성이 필요하다. 

제9원칙. 테슬러의 법칙

#복잡성 보존의 법칙 #시스템이 부담하나 사용자가 부담하나 #수동&자동화 

심플함이 최상의 덕목처럼 여겨지지만, 어느 정도 줄일 수 없는 프로세스도 존재한다. 우리가 사람과 사람 사이에서 대화를 나눌 때도 네 아니오 단답형 외에 왜 늦었는지 혹은 오해하지 않을 부연 설명이 필요하 듯이 말이다. 시스템과 사람 사이에도 줄일 수 없는 영역이 존재한다. 예를 들어 이메일을 쓸 때, smart retry 기법이라던가 전자상 결제에서 read-only형태로 고객 원장에서 배송 주소를 불러와서 더 이상 입력하지 않아도 되지만 사용자에게 노출하여 다시 한번 확인을 하게끔 하는 과정이 적절한 예시다. 

시스템에서 고객 정보가 자동 출력되어 사용자의 입력의 수고스러움을 덜고 있다

제10원칙. 도허티 임계

#0.4초 이내 #대기 #생산성 #로딩  

사용자는 10초를 넘기면 딴짓을 하고 싶다. 따라서, 이것을 최소화기 위해 보통 블러 업 효과와 스켈레톤 UI 기법이 많이 사용되는 추세다. 

마지막으로

"인간이 공간을 경험하는 방식을 잘 아는 건축가가 더 좋은 건물을 지을 수 있듯이, 인간의 행동 방식을 잘 이해하는 디자이너는 더 훌륭한 디자인을 만든다. 따라서 깊이 있는 지식을 쌓고 이를 디자인 프로세스에 잘 적용하는 것이 관건이다." -존 야블론스키-