brunch

매거진 코드스테이츠 PMB 7기

라이킷 53 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 박형준 Jul 10. 2021

좋은 UX를 만드는 10가지 법칙

Laws of UX로 보는 SOCAR 분석 [코드스테이츠 PMB 07]

<목차>

1. 들어가며

2. 쏘카 분석해 보기 : 10가지 심리학 법칙을 중심으로
    - 제이콥의 법칙
    - 피츠의 법칙
    - 힉의 법칙
    - 밀러의 법칙
    - 포스텔의 법칙
    - 피크 엔드 법칙
    - 심미적 사용성 효과
    - 폰 레스토프 효과
    - 테슬러의 법칙
    - 도허티 임계

3. 구 쏘카 vs 신 쏘카

4. 마치며

들어가며

대학교 입학 후 운전면허를 따고, 차량이 없어서 면허를 장롱에 몇 년이나 숙성시키던 때가 있었습니다. 주변 친구들이 유행처럼 면허를 따서, 덩달아 학원에 등록하고 덜컥 면허를 따 버린 것이죠. 대학생 형편으로 차를 산다는 것은 말도 안 되는 일이었기에 자연스레 면허는 주민등록증의 대체제 역할로 지갑 속에 묻혀 있었습니다.

몇 년이 지나 취업을 하고 업무를 위해 회사 차량을 운전하면서 운전의 재미를 알게 되고, 가끔 드라이빙이나 여행이 가고 싶어질 때 쏘카(SOCAR)를 자주 이용했습니다.

나는야 쏘카 VIP

2년 전 쯤, 쏘카 애플리케이션(이하 쏘카)에 대대적인 업데이트가 있었습니다. 앱의 생김새와 느낌이 완전히 바뀌었죠. 찾아보니 쏘카 내부에서 앱 4.0이라 부른 큰 업데이트였다고 합니다.

사실 그전까지는 10분 단위 예약이 가능한 쏘카의 서비스는 너무 좋았지만, 쏘카 앱의 사용성은 좋지 못하다는 생각을 많이 했습니다. 그러나 앱 4.0 업데이트 이후에는 앱의 사용성도 좋아졌다는 느낌을 받았습니다.

최근 UX/UI의 10가지 심리학 법칙이라는 책을 읽으면서, 쏘카 앱의 사용자 경험이 더 좋아지게 된 이유를 보다 과학적 원리에 기반해 알 수 있었고, 이번 글을 통해 이를 정리 해 보고자 합니다.

해당 책은 심리학 이론을 사례 위주(특히 IT 서비스 위주)로 쉽게 풀어쓰고 있어 읽기 쉬웠습니다. 좋은 UX 디자인에 관심 있으신 분들은 구매나 대여를 해서 읽어보시길 추천드립니다!

~~하지만 저는 리디북스로 구매한 게 함정... 위장의 양식보다 마음의 양식에 돈을 더 쓰는 요즘~~

쏘카(SOCAR) 분석해 보기

존 야블론스키의 UX/UI의 10가지 심리학 법칙을 중심으로

1. 제이콥의 법칙

"유저는 익숙한 방식을 편하게 생각한다."

인지심리학을 연구하다 보면 "인간은 인지적 구두쇠"라는 결론에 도달한다고 합니다. 뇌가 생각에 힘을 쓰는 걸 꺼리기 때문이죠. 그래서 자원을 덜 투자해도 되는 익숙한 것(습관)을 선호한다고 합니다. ~~나쁜 습관이 잘 고쳐지지 않는 이유를 알 것만 같군요~~

누구나 '생각의 습관들'이 모여있는 도서관을 가지고 있는데, 이를 "멘탈 모델(혹은 심성 모형, Mental Model)"이라 합니다. 경험했던 여러 상황에 대한 대처법과 해석의 집합이라고 생각하면 쉽습니다.

멘탈 모델은 구두쇠를 움직이게 하는 마법의 열쇠와 같습니다. 이미 있던 정보와 습관을 재활용하기 때문이죠. 멘탈 모델을 잘 활용하면, 처음 해 보는 무언가도 가이드 없이 쉽게 수행하게 만들 수 있습니다.

웹 사이트의 회원가입과 로그인 같은 것이 멘탈 모델을 활용한 대표적인 사례입니다. 어떤 웹사이트에 로그인을 하려면 먼저 회원가입을 해야 하고, 아이디(ID)와 비밀번호를 입력한 뒤 로그인 버튼을 눌러야 한다는 것을 인터넷 쇼핑을 이용해 본 사람이라면 누구나 알고 있죠. 그래서 정말 특이한 사이트가 아닌 이상, ~~의지만 있다면~~ 회원가입을 하고 로그인하는 것을 어렵게 느끼지는 않습니다.

좌측부터 네이버맵, 카카오 맵, 쏘카, 에어비앤비, WIND(킥보드 대여)

쏘카의 첫 화면은 네이버맵이나 카카오 맵 같은 지도/길 찾기 서비스의 화면과 매우 비슷합니다.(위 사진 참고) 빌려 쓸 차량이 위치한 장소(쏘카존)는 핀(pin) 형태로 보여주는데, 이는 에어비앤비(Airbnb) 같은 여행 애플리케이션에서 가고 싶은 숙소를 선택하는 방식과 닮아있습니다.

모바일에서 지도, 길 찾기, 숙박업소 예약을 해 본 경험이 있다면, 지도 활용과 목적지 선택에 대한 멘탈 모델이 이미 형성되어 있을 것 입니다. 쏘카는 "제이콥의 법칙"에 따라 지도 서비스의 멘탈 모델을 활용해 신규 사용자도 서비스를 쉽게 이용할 수 있도록 디자인되어 있었습니다.

2. 피츠의 법칙

타겟과의 거리와, 타겟의 크기는 목적한 바를 수행하는 시간과 비례관계에 있다.

쉽게 말해 누르려는 버튼이 클수록, 가까이 있을수록 더 빠르게 버튼을 누를 수 있다는 이야기 입니다.

디지털 기기가 대중화되기 한참 전인 1950년대에 나온 이론이지만 디지털 세상에서도 중요하게 생각해야 할 이론이죠.

멀리 있는 버튼, 작은 체크박스와 이로 인한 클릭/터치 실수는 목적한 바를 이루는 "시간을 오래 걸리게" 만들고, 우리를 "불편하게" 만듭니다. 디지털 세상이 현실과 연결되어 있기에, 이런 불편함은 감정적 손실을 넘어 금전적 손실을 유발할 수도 있습니다.

회원가입을 하려고 하는데 가입 버튼이 너무 밑에 있어서 스크롤을 많이 해야 한다면?

온라인으로 보험 약관을 읽고 확인 체크를 하는데, 약관의 글자 크기나 체크박스가 너무 작다면?

입사 지원한 회사의 인사 담당자에게 전화가 왔는데, 터치 실수로 [통화] 대신 [거절] 버튼을 누른다면?

빠르게 떨어지는 주식을 손절매하려고 하는데 [매도] 버튼이 너무 작아서 찾는데 10초가 더 걸렸다면?

버튼을 크게 만들고, 목적한 바를 가까운 거리에서 이룰 수 있도록 하고, 실수를 유발할 수 있는 버튼의 거리를 충분히 띄워 둔다면 사용자의 불편함을 훨씬 줄일 수 있습니다. 버튼 클릭이 모여 매출로 연결되는 IT 비즈니스에서는 자연스럽게 버튼을 누를 수 있게 만들면, 자연스럽게 성과를 높일 수 있겠죠.

쏘카의 가입 화면

쏘카는 로그인/가입 단계에서 피츠의 법칙을 잘 활용하고 있었습니다. [로그인]과 [회원가입] 각각 크기를 최대화하여 실수를 방지하였고, [뒤로 가기] 버튼과 [다음 단계] 버튼을 각각 좌측 상단과 최하단으로 멀리 떨어뜨려 놓았습니다. 체크박스를 크게 만들고, 간격을 충분히 띄워서 잘못 누르지 않도록 디자인한 것도 확인할 수 있었구요. 또한 [다음 단계] 버튼들을 큼직해서 빠르게 누를 수 있었습니다. 헷갈릴 수 있는 버튼을 확실히 분리 해 두고, 중요한 버튼들을 크게 만들어 두어 사용성을 높인 것입니다.

3. 힉의 법칙

의사결정에 필요한 시간은, 선택지의 개수와 복잡성에 비례한다.

사람은 멀티태스킹에 약합니다. 인지 자원이 한정되어 있기에 한 번에 너무 많은 정보를 처리해야 하면 반대로 정보를 처리하지 못하는 상태에 빠지죠. 심리학에서는 이를 인지부하(Cognitive Load)라고 부른다고 합니다.

"오늘 점심 뭐 먹을까요?" 라는 질문이 인지부하를 유발하는 대표적인 질문이라고 할 수 있습니다. 세상에는 셀 수 없이 많은 음식이 있고, 호불호, 예산, 조리시간, 대기시간 등 좋은 점심을 먹기 위해서는 고려할 부분이 매우 많고 복잡하기 때문입니다. 순간적으로 생각이 막혀버릴 때가 많습니다.

"날씨가 더우니 점심은 시원한 메뉴로 먹을까요?" 와 같은 질문은 인지부하를 낮춰줄 수 있습니다. 냉면, 콩국수, 냉우동 같은 음식으로 선택지가 확 줄어들기 때문이죠.

오늘 점심 뭐 먹을까요?

쏘카는 차량을 빌릴 시간, 장소, 차량 종류, 면책 상품, 결제 수단(+할인이 있다면 할인 수단)까지 선택해야만 예약이 완료됩니다. 한 번에 이 모든 것들을 결정하라고 하면 아무 결정도 못하는 인지 부하 상태에 빠질 가능성이 높습니다. 쏘카는 이를 3단계로 나누고, 선택의 가짓수와 복잡도를 줄여 인지부하를 최소화하고 있었습니다.

1단계는 쏘카존과 차량(+대여기간)을 선택하는 단계로, 메인 화면에서 이탈하지 않는 상태에서 이뤄집니다. 적절한 지도 스케일로 한 화면에 너무 많은 쏘카존이 들어가지 않도록 배치 되어 있습니다. 어떤 쏘카존을 이용할지 지나치게 많이 보여주지 않음으로써, 고객의 선택지를 줄여 의사결정에 필요한 에너지를 낮춥니다.

2단계는 예약 정보를 확인하고 면책 상품을 선택하는 단계입니다. 사실 앞에서 시간을 설정했다 면책상품을 제외하면 특별히 선택할 내용이 없긴 합니다. 심지어 면책 상품 또한 디폴트 옵션이 선택 되어 있기에(사고 시 고객 부담금이 가장 낮지만, 보험금은 가장 비싼), 특별히 보험료를 아끼고 싶은 게 아니라면 바로 다음 버튼을 눌러도 무방합니다.

3단계는 결제 단계로, 얼마의 금액이 어떤 수단으로 결제되는지 확인하는 단계입니다. 사용 가능한 크레딧과 쿠폰이 있다면 자동으로 적용됩니다. 결제 수단도 사용할 카드가 미리 등록되어 있다면 추가로 입력할 정보는 없습니다. 약관 동의만 체크하고 다음 버튼을 눌러도 됩니다.

잘 보이지 않으면 클릭해 주세요.

4. 밀러의 법칙

인간은 작업기억에 7(±2) 개의 청크(Chunk, 덩어리, 묶음 정보) 밖에 저장하지 못한다.

실험을 통해 인간이 단기적으로 5~9개의 항목밖에 기억을 하지 못하는 것을 발견한 조지 밀러의 이름을 딴 법칙입니다.

여기서 청크라는 단어가 생소할 수 있는데, 청킹(chunking, 덩어리화, 묶음 짓기) 과정을 통해 덩어리 지어진 정보라고 이해하면 쉽습니다.

대표적인 사례가 전화번호입니다. 01298527145 보다 012-9852-7145 같이 덩어리화 된 정보가 보거나 외우기 훨씬 쉽다.

밀러의 법칙과 청킹을 체험해 보기 위해 아래의 테스트를 한 번 해 봅시다.

1. 아래의 숫자를 10초 동안 보고 외울 수 있을 만큼 외워 봅니다.

1813172548312509862

2. 이제 아래 수식을 암산하고 정답을 소리 내어 읽어봅니다.

980 - 234 =
15 x 9 =
189 ÷ 7 =

3. 이제 1번에서 외웠던 숫자를 할 수 있을 만큼 회상해 봅니다.

밀러의 법칙에 따르면 아마 5자리~9자리 정도까지만 회상할 수 있을 텐데요. 저~~는 18131까지만 성공...~~

하지만 청킹을 활용해 숫자를 묶으면 회상 숫자를 비약적으로 늘릴 수 있습니다. 예를 들면,

181 317 254 831 250 9862

이런 식으로 숫자를 3~4자리 수로 묶고, 묶음 단위로 외우면 기존보다 회상 자릿수가 더 높아진다.

181317254 보다 181 317 254를 훨씬 더 잘 외울 수 있는 것이죠.

이렇게 정보를 서로 묶음 짓는 것을 "청킹(Chunking)", 묶음 지어진 정보를 "청크(Chunk)"라 부릅니다.

처음엔 1, 8, 1, 3, 1, 7...처럼 숫자 하나하나가 청크였다면, 3~4 자릿수끼리 묶는 청킹을 거치면 181, 317, 254...처럼 3자리 수가 청크가 되는 것입니다.

밀러의 법칙, 특히 마법의 숫자 7에 대해서는 비판적인 의견도 있습니다. 심지어 밀러 자신도 마법의 숫자 7은 그저 비유적인 표현이었다고 말한 적이 있다고 하니까요. 또한 후속 연구들에서는 마법의 숫자는 7이 아니라 4라고 주장하기도 합니다.

때문에 밀러의 이론인 마법의 숫자 7에 매몰되어 정보를 7가지 미만으로 제한하는 것보다, 정보를 여러 "덩어리"로 청킹 하여 사람들이 인지하기 쉽도록 청크를 만드는 것이 더 중요하다고 생각합니다.

복잡할 수 있는 정보를 주제 별로 묶어둔 결제화면

쏘카는 결제 단계에서 [상세요금] [할인] [크레딧] [결제수단]과 같이 주제별로 정보가 정렬 되어 있습니다.

복잡하고 민감한 정보가 난무하는 결제 단계에서, 주제별로 구분하여 정보를 확인할 수 있어서 인지하기 편리하다는 인상을 줍니다.

이처럼 쏘카도 밀러의 법칙, 특히 적절한 청킹을 활용해 결제 단계의 복잡한 정보를 인지하기 쉽도록 정리한 것을 확인할 수 있었습니다.

5. 포스텔의 법칙

받을 때는 관대하게, 줄 때는 엄격하게.

포스텔의 법칙은 사용자의 액션은 너그럽게 받아들이고 시스템의 안정성을 보장해야 한다는 일종의 선언에 가깝다고 합니다.

사람은 기계가 아닙니다. 정해진대로 움직이지 않죠. 매뉴얼을 잘 읽지도 않구요. ~~스마트폰 사고 설명서를 읽는 사람이 과연 몇이나 될가요~~ 필연적으로 실수를 하게 되어 있습니다.

이러한 "인간의 불완전성"을 고려해 제품을 만들어야 좋은 UX를 가진 제품이 된다는 것이 포스텔의 법칙의 시사점입니다.

쏘카를 이용할 때 사용자가 실수하기 매우 좋은 상황이 있습니다. 바로 "반납"입니다.

- 지하 1층에 반납해야 하는데, 실수로 2층에 반납을 한다면?

- 반납까지 5분 남았는데 다른 차량이 쏘카존을 막고 전화를 받지 않는다면?

쏘카의 반납 화면 / 출처 : https://blog.socar.kr/10332?category=724974

쏘카는 반납 시 고객에게 정확한 정보를 간결하게 제시하고, 혹시나 비상 상황이 발생해도 대비할 수 있는 UX를 갖추고 있습니다. 반납하기 버튼을 눌렀을 때, 정확한 반납 위치를 체크할 수 있도록 안내하고, 잘못된 위치에 반납했을 때 어디에 주차했는지 스스로 기입할 수 있도록 디자인 되어 있습니다. 포스텔의 법칙에 따라 견고하게 디자인된 것입니다.

6. 피크 엔드의 법칙

경험의 절정이나 마지막 순간에 느낀 감정이 주된 판단 기준이 되는 것

개인적으로 축구선수 "안정환"을 매우 좋아했습니다. 축구를 잘해서 좋아했고, 억울한 방출과 잘못된 계약으로 커리어가 망가져 가는 와중에도 정공법과 실력으로 이를 돌파하는 모습이 좋았습니다. 개인적으로 프로생활 초기에 보여줬던 모습은 역대 최고였다고 생각합니다. ~~안느 턴과 종이접기 ㅜㅜ~~

그러나 객관적으로 커리어를 판단 했을 때, 안정환은 "엄청난 선수" 까지는 아닙니다. 리그 우승은 J리그 1회뿐이고, 20대 후반에는 부상으로 제대로 된 경기력을 보여주지 못한 적도 많았기 때문이죠.

하지만 20대 중반 이상인 대한민국 국민들 중 안정환이라는 이름을 모르는 사람은 거의 없습니다. 심지어 엄청난 선수라고 생각하는 사람도 많죠. 월드컵이라는 아주 중요한 순간마다 그가 골을 넣어줬기 때문입니다. 사람들은 안정환의 평균적인 커리어가 아니라 "피크"를 기억하는 것입니다.

한편 카카오페이는 결제 후 엔드포인트에서 "알"이라는 마일리지를 주는 경험을 통해 고객에게 큰 인상을 남깁니다. ~~아쉽게도 지금은 없어졌습니다.~~ 불쾌할 수 있는 돈 쓰는 경험을 재미있고, 기대되는, 심지어 돈을 더 쓰고 싶다는 생각마저 들게 만들죠. 결제 후 "마지막"에 마일리지 받는 경험이 돈을 쓰는 경험을 상쇄하는 것입니다.

(좌) 사람들이 기억하는 피크의 안정환 / (우) 카카오페이 결제의 엔드포인트에서 주어지는 알과 포인트

쏘카에서 유일하게 아쉬웠던 점이 바로 피크엔드 법칙에 따른 고객 경험이었습니다. 쏘카를 타면 내장 내비게이션에서 웰컴 메시지가, 반납하면 굿바이 메시지가 흘러나오는데, 별 것 아니지만 그 순간을 기분 좋게 만들어줍니다. 하지만 앱에서는 특별한 웰컴-굿바이 액션이 없어서 아쉬웠습니다.

그래서 쏘카 앱에서도 "피크 엔드 법칙을 활용해 고객 경험을 향상할 방법이 있지 않을까"라는 생각을 해 보았습니다. 예를 들어 처음 차량의 문을 열기 위해서는 앱의 컨트롤러를 작동시켜야 하는데, 이때 웰컴 메시지 팝업을 띄워주고, 버튼을 누르면 쏘카가 강조할 만한 포인트(안전운전, 금연 등)를 보여주는 것이죠. 또한 주행을 마치고 반납을 한 직후에는 크레딧 적립 조건에 따라 적립 메시지를 주거나, 주행거리를 알려주는 방법을 통해 경험의 마무리를 기분 좋게 만들어 줄 수도 있을 것 같다는 생각을 해 보았습니다.

이모지 출처 : https://openmoji.org/

7. 심미적 사용성 효과

보기 좋은 디자인을 사용하기 좋은 디자인으로 인식하는 현상

1995년 히타치 디자인 센터(Hitachi Design Center)의 연구원 쿠로스 마사키, 카시무라 카오리의 연구로 인해 확인된 효과입니다. ~~보기 좋은 떡이 먹기도 좋다는 속담이 증명되었습니다!~~

참고하면 좋을 아티클 (링크)

심미적 사용성 효과를 저의 기준으로 해석하자면 "예쁘니까 어느 정도 불편함은 감수하고 쓸 수 있어"라는 마음이 더 큰 것 같습니다.

저는 카카오프렌즈의 라이언 모습을 한 무드등을 사용하고 있는데, 밝기 조절 방법도 불편하고, 배터리가 적어서 자주 꺼지기도 합니다. 하지만 "라이언이 예쁘니까" 버리지 않고 어떻게든 계속해서 쓰게 됩니다.

인간관계에서 첫 인상이 좋을 때 더 좋은 사람이라는 평가를 받을 확률이 높은 것처럼, 제품도 심미성이라는 첫 인상이 제품의 본질인 사용성을 평가하는데도 영향을 미치는 것이 아닌가 싶습니다.

쏘카의 경우 예쁘다 보다는 "정갈하다"에 가까운 디자인을 가지고 있다고 생각합니다. 하지만 쏘카의 예전 디자인에 비해서는 훨씬, 정말 훨씬 더 아름다워졌다고 생각합니다. 특히 알록달록한 사진형 콘텐츠를 줄이고 핵심 기능인 예약에 집중해 지도와 쏘카존을 먼저 보여주는 것이 훨씬 더 직관적이고 아름다워 보입니다. 컬러의 가짓수를 줄이고, 대부분 낮은 채도로 구성해 쏘카의 브랜드 컬러가 자연스레 강조됩니다. 저는 새롭게 바뀐 쏘카 앱의 디자인이 쓰임새와 만듦새를 모두를 만족시킨 디자인이라고 생각합니다. 때문에 2019년에 앱이 리뉴얼되고 나서 쏘카를 써야 하는 상황이 아닌데도 괜히 한 번 씩 더 들어가 보곤 했었던 기억이 납니다.

(좌) 예전 쏘카 첫 화면, (우) 현재 쏘카 첫 화면

8. 폰 레스토프 효과

비슷한 것이 여러 개 모여있을 때, 그중 가장 차이나는 한 가지만 기억할 가능성이 큰 현상

독일의 심리학자인 헤드윅 폰 레스토프(Hedwig von Restorff)가 1993년에 진행한 연구에서 밝혀진 효과입니다.

IT Product Design에서는 ①정보를 나타내기 위해 ②고객의 시선/행동을 유도하기 위해 자주 사용됩니다.

쏘카 앱에서는 다음 단계 버튼, 쏘카존, 쏘카존 내 차량 등의 상태를 나타내는데 이 폰 레스토프 효과를 적극 활용하고 있었습니다.

쏘카는 로그인 시 계정 정보 입력 여부에 따라 로그인 버튼을 회색/파란색으로 대비되게 표현하고 있고, 쏘카존의 경우에도 이용 가능 상태를 회색/파란색으로 확실하게 대비하여 표시하고 있습니다. 쏘카존 내 이용 가능 차량과 불가능 차량의 경우에도, 이용 가능 차량은 컬러로 또렷하게, 불가능한 차량은 뿌옇게 표시하여 선택이 안 되는 것처럼 디자인 해 두었으며, 여기에 추가로 [시간 조정]이라는 안내 문구를 넣어, 시간이 맞지 않아 사용하지 못한다는 점을 사용자에게 확실히 인지 시켜 주고 있습니다.

로그인하기 비활성화/활성화, 쏘카존 활성화/비활성화, 차량 이용 가능/불가 표시

가능/불가능의 컬러를 파란색, 회색으로 통일감 있게 사용하여 로그인 시 불가능 버튼을 경험한 유저가 예약과 같은 다른 서비스를 이용할 때 동일한 피드백으로 무엇이 불가능한 액션인지 직관적으로 표시하고 있어 폰 레스토프 효과를 활용해 사용성을 높이고 있음을 확인할 수 있었습니다.

9. 테슬러의 법칙

어떤 시스템에서건 더 이상 줄일 수 없는 필수적인 복잡성이 존재한다는 이론

예를 들어 이메일에서 받는 사람과 보내는 사람, 내용이라는 정보가 '필수적인 복잡성' 입니다.

필수적인 복잡성을 제외한 나머지를 최소화한다면 사용자에게 편리한 디자인을 만들 수 있고, 나아가 필수적 복잡성 마저도 최소한으로 줄이면 훌륭한 고객 경험을 줄 수 있다는 점이 테슬러의 법칙이 시사하는 바 라고 생각합니다.

쏘카 앱에서는 결제 과정에서 테슬러의 법칙을 잘 활용하고 있었습니다.

1. 사고 시 부담이 가장 적은 면책 상품 자동 선택

렌터카는 언제나 사고의 위험에 노출되어 있습니다. 따라서 사고 피해 금액을 최소화하기 위해 면책 상품을 추가로 등록하고 이용하면 좋죠. 하지만 문제가 하나 있습니다. 고객들은 면책 상품에 대해 잘 모른다는 점 입니다. 보험 약관을 읽고, 비용을 비교하고, 가입하는 과정은 생각만 해도 복잡합니다. 아무도 안할 것 같은 일 입니다. 쏘카 앱은 이를 단 3줄로 단순화하고, 심지어 자동으로 사고시 고객 부담금이 가장 적은 상품을 선택하게 만들어 복잡성을 최소화하였습니다.

2. 최대한 할인이 되는 조건으로 크레딧과 쿠폰 세팅

쏘카를 이용할 때, 포인트인 "크레딧"과 "쿠폰"을 통해 요금을 할인 받을 수 있습니다. 하지만 결제 할 때 마다 할인 조건을 하나하나 찾고 입력 해야 한다면 굉장히 번거로울 것 입니다. 쏘카 앱에서는 자동으로 최대한의 할인이 가능한 조건이 선택 되게 만들어져 있었습니다. 시스템이 복잡성을 부담하는 구조로 디자인되어 있는 것입니다.

자동으로 선택된 손해면책 상품, 자동으로 적용된 쿠폰

10. 도허티 임계

컴퓨터와 사용자가 서로를 기다릴 필요가 없도록 하는 속도로(<400ms) 상호 작용할 때 생산성이 높아진다.

결제를 위해 결제하기 버튼을 눌렀습니다. 화면이 하얀색으로 변하며 정적이 흐릅니다. 화면에 변화가 없습니다. 불안해집니다. 짧은 몇 초 동안 수많은 생각이 머리를 스칩니다.

"이거 카드 승인처리된 건가?"

"구매된 건가?"

"새로고침 하면 결제가 중복으로 될까?"

도허티 임계는 인간과 기계간 상호작용에 0.4초 이상이 걸리면 생산성에 불균형한 영향을 미친다는 "도허티의 발견"에서 나온 이론입니다. 따라서 사용성을 증가시키기 위해 처리시간을 0.4초 이하로 만들거나, 처리 중이라는 사실을 0.4초 이전에 보여줘서 사용자의 불안을 줄여주는 것이 필요하죠.

반대로 너무 빠른 처리 속도가 사용자들의 혼란을 유발하거나, 서비스의 특징을 제대로 모르게 만들 수도 있습니다. 이 경우에는 실제 처리속도와 별개로 로딩바를 만들거나 중간 과정을 보여주는 게 좋은 상호작용을 이끌어 낼 수도 있습니다.

** 참고 : 일부러 로딩바를 느리게 만든 Noom의 사례 https://youtu.be/pgsAMqJ2StU?t=220

왼쪽부터 실루엣이 보이는 로딩 화면, 움직이는 로딩바, 비행기 모드로 변경 후 바로 뜨는 경고 팝업들

쏘카는 로딩이 필요할 때, 로딩되는 콘텐츠의 실루엣을 보여주거나 움직이는 로딩바를 보여주어 도허티 임계로 인한 불편을 느끼지 않도록 디자인했습니다. 또한 인터넷 연결이 끊기는 극한의 상황에서는 빠르게 팝업을 띄워 사용자에게 문제를 피드백해 주고 있는 것을 확인할 수 있었습니다. 도허티 임계인 0.4초 이내에 피드백을 해 주어 사용자의 혼란을 줄이고 있는 것이죠.

(구) 쏘카 vs (신) 쏘카

쏘카 애플리케이션이 새롭게 리뉴얼된 지 꽤 오래되긴 했지만, 리뉴얼 전과 후의 UX를 간단하게 비교해 보며 사용자의 어떤 문제를 해결하고자 했는지 살펴보려고 합니다.

(좌) 예전 쏘카 / (우) 현재 쏘카

결과론적 해석을 방지하기 위해, 개선안이 없다고 가정하고 쏘카의 유저로서 예전 쏘카 앱의 문제점을 한 번 생각해 보았습니다.

개선 전

문제 1. JTBD(Jobs to be done)와 피츠의 법칙

2016년 쏘카를 처음 사용하게 된 후로, 제가 쏘카 앱을 쓰는 이유(JTBD)는 항상 "차량 대여"였습니다.

하지만 예전 쏘카의 메인 페이지에서 차량 대여 기능은 하단 내비게이션 바에 작은 크기로 자리하고 있었습니다. "차량 대여"와 직접적인 관련이 없는, 비즈니스 적인 문제를 해결하기 위한 기능들(각종 배너, 커뮤니티 기능 등)이 예약 버튼보다 10배는 큰 영역을 차지하고 있었죠.

차량 예약 버튼이 작기에, 피츠의 법칙에 따라 예약(차량 대여)에 걸리는 시간이 오래 걸렸을 것이라 유추 해 볼 수 있습니다. 저 처럼 '예약'이라는 목적을 위해 앱에 방문한 고객은 불편함을 느끼지 않았을까요?

문제 2. 폰 레스터프 효과

메인 페이지는 디자인 관점, 특히 폰 레스터프 효과 관점에서도 문제가 있었다고 생각합니다.

메인 화면을 처음 봤을 때, "무엇이 가장 핵심이지?" "내가 무엇을 눌러야 하지?"가 불분명했습니다. 가장 큰 면적을 차지하는 [메인 배너]와 하단에 있는 [쏘카타고 모해쏘]가 같은 수준으로로 "튀고" 있기 때문입니다.

흰색과 회색의 배경에서 가장 튀는 것은 단연 다채로운 컬러와 높은 대비를 가진 콘텐츠입니다. 예전 쏘카 앱의 경우에는 "사진"이 그런 역할을 합니다. 하지만 사진은 상단 배너에도 들어가 있고, 하단 커뮤니티 영역에도 들어가 있습니다. 만약 배너를 클릭하게 만들고 싶었다면, "쏘카 타고 모해쏘"를 스크롤을 해야 보일 수 있게 더 아래로 이동시키거나, 사진 대신 텍스트 리뷰만 보이도록 디자인하는 게 더 좋았다고 생각합니다. 그러면 확실히 "튀는" 사진 배너에 시선이 사로잡혔을 테니까요.

개선 후

1) 핵심 기능 중심

"차량 대여 예약"이라는 핵심 기능을 전면에 내세웠습니다. 이제 다른 선행 과정 없이 메인에서 한 번에 쏘카존과 예약 차량을 찾을 수 있게 되었습니다. 핵심 기능인 "차량 대여 예약"을 중심으로 리디자인 한 것입니다.

2) 배너, 부가기능

사업적 목적을 달성하기 위해 광고성 콘텐츠는 어쩔 수 없이 들어가야만 합니다. 지금은 배너를 팝업 형태로 뜨게 만들어, 기능에는 영향을 미치지 않으면서 최대한 강조될 수 있게끔 수정하였습니다. 또한 예약 외 부가기능은 화면 하단에 작게 배치하거나 햄버거 메뉴 뒤로 숨김으로써, 핵심인 "예약" 기능을 수행하는 데 문제가 없도록 디자인되어 있습니다.

3) 디자인 시스템 정립

기존의 배너, 버튼, 컬러 등에도 규칙이 없었던 것은 아니지만, 앱 전체가 통일감 있는 경험을 주는 수준이라는 생각까지는 들지 못했습니다. 하지만 로고부터 시작해 컬러, 아이콘, 타이포그래피 등을 하나의 디자인 시스템으로 정립하여 통일감 있는 피드백을 통해 사용자의 실수를 방지하는 디자인이 적용되었습니다.

쏘카 앱을 개선할 때, 쏘카의 핵심 고객은 어떤 사람들이고, 어떤 상황에서 무엇을 원하며, 쏘카는 어떤 가치를 제공해 줄 수 있는지 명확하게 정의하고, 해당 정의를 중심으로 앱을 개편했다는 것을 느낄 수 있었습니다. 앱의 핵심기능 중심으로 각 구성요소의 크기, 위치, 위계가 다시 정리된 UX/UI를 확인할 수 있었기 때문입니다.

이를 통해 차량 대여를 보다 쉽고 편하게 할 수 있게 되었고, 결론적으로 더 좋은 사용자 경험을 제공하게 되었다고 생각합니다.

마치며

책을 읽고 글을 쓰면서 "지행합일(知行合一)"이라는 사자성어가 계속해서 떠올랐습니다. "아는 것과 행하는 것을 하나로 해야 한다."는 뜻인데, 제품의 사용성을 높여주는 심리학 이론을 아무리 많이 알아도, 제품에 제대로 적용하지 않으면 좋은 제품이 절대 나올 수 없다는 생각이 들었기 때문입니다.

쏘카보다 UX가 더 좋은 앱이 없냐? 라고 묻는다면, 아닐 수 있다고 생각합니다. 하지만 쏘카가 최적의 UX를 위해 깊게 고민하고 최대한 실천하려 했다는 것을 앱의 요소요소에서 충분히 느낄 수 있었습니다.

쏘카에서 앱 4.0을 출시할 때, 앱을 처음부터 다시 만들었다고 합니다. 업계 1위인 업체가, 수년 동안 사용했던 앱을 처음부터 다시 만든다는 결정을 하는 걸 보면서 정말 대단하다는 생각을 했습니다. 기존 구성원의 반대와 미래에 대한 의구심이 굉장히 강했을 텐데, 이를 뚫어내고 결국 고객 중심의 UX를 실행하는 모습을 보면서 이러한 마음가짐과 태도가 "진정한 지행합일"이 아닐까라는 생각을 하게 되었습니다.

<Wrap-up>

쏘카 분석해 보기
    - 제이콥의 법칙 : 익숙한 지도 앱, 예약 앱의 멘탈 모델을 활용
    - 피츠의 법칙 : 중요한 버튼을 크게, 헷갈리는 버튼의 간격을 넓게.
    - 힉의 법칙 : 선택지를 분산시켜 혼잡도를 줄인 예약~결제 단계
    - 밀러의 법칙 : 복잡한 내용을 청킹(묶음 짓기)하여 인지하기 쉽게 배치
    - 포스텔의 법칙 : 예외 상황에 잘 대비한 반납 기능
    - 피크엔드 법칙 : 유일하게 아쉬운. 예약의 시작과 끝에 웰컴-굿바이 메시지를 준다면?
    - 심미적 사용성 효과 : 정갈함에서 오는 아름다움.
    - 폰 레스토프 효과 : 가능, 불가능을 확실히 구분하는 색상 표현
    - 테슬러의 법칙 : 할인/결제의 자동 선택으로 복잡성을 사용자 대신 시스템이 부담
    - 도허티 임계 : 로딩이 필요한 곳엔 언제나 빠르게 나오는 '로딩바'

구 쏘카 vs 신 쏘카
    - 핵심 기능(차량 예약) 중심으로 개편하여 사용 경험을 개선!