이론에서 끝내지 않고 실서비스에서 찾아보는 UX 원칙
해당 글을 오마주한 글입니다 🙂
학생이던 시절, 교과서에 여러 이론이 나오면 그 글을 읽는 당시에는 다 이해했고, 내 머릿 속에 들어온 것만 같다.
그런데 막상 문제가 한 번 꼬아서 나오거나, 실전에 적용되는 예시를 찾아보려고 하면 읽었던 이론은 생각나지 않고 그제서야 내가 아직 내 것으로 흡수하지 못했다는 걸 깨닫게 된다.
나에겐 UX, UI가 그랬다.
UX, UI에도 기본 원칙을 볼 때는 ‘오 그렇지 맞아 맞아’ 하면서 읽는데, 막상 서비스를 개선할 때는 그 원칙들이 생각 나지도 않고, 종종 놓치게 된다.
그래서 UX 기본 원칙을 진짜 내 것으로 만들기 위해 실 서비스에서 그 예시들을 찾아보기로 했다.
당신 근처의 마켓, 당근마켓에서 UX의 기본 개념을 잘 지킨 Good Point들을 찾아본다.
원칙 1. 제이콥의 법칙
#이미 만들어져 있는 멘탈 모델을 활용하라 (익숙함의 원칙)
제이콥의 법칙이란 사용자들은 이미 서비스에 예상하는 멘탈 모델이 있기 때문에, 이 익숙함을 활용하라는 법칙이다.
사용자들은 이미 여러 서비스들을 사용하면서, “이 버튼을 누르면 이렇게 작동하겠지”라고 UI만 보고도 기능을 예상할 수 있다.
예를 들어, 쇼핑몰에서 하트 버튼을 누르면 ‘나의 찜 리스트’ 에 들어간다고 자연스레 생각한다.
서비스의 모든 기능이 다른 서비스와 100% 다를 수는 없다. 창의적일지는 몰라도, 사용자는 사용에 어려움을 느끼고, 학습하는 데 시간이 오래 걸린다.
그러니, 사용자가 이미 가지고 있는 멘탈모델을 잘 활용해서 서비스를 제공하는 것도 효율적인 방법이다.
당근마켓의 동네 생활은 동네 주민들끼리 소통할 수 있는 커뮤니티 게시판 기능이다. 그리고 이 UI는 직장인 커뮤니티인 블라이드의 UI와 상당히 비슷하다.
사용자들은 이미 커뮤니티의 공감, 댓글, 글 업로드 시간, 작성 버튼 등의 UI에 익숙하기 때문에 당근마켓의 동네생활 기능을 처음 접하더라도 더 쉽게 사용할 수 있다.
당근마케의 상품 소개 페이지 역시 타 커머스 서비스의 상품 상세 페이지와 굉장히 유사하다. 상품을 소개할 때 필요한 상품 이미지의 위치나 가격, 찜 등의 기능은 이미 익숙한 UI이기 때문에 사용자는 어렵지 않게 기능을 사용할 수 있다.
서비스의 새로운 기능을 구현할 때, 비슷한 기능을 가진 타서비스를 조사하는 게 도움이 되는 이유이다.
원칙 2. 피츠의 법칙
#사용자가 기능을 쉽게 접근할 수 있도록 하라 (접근성의 원칙)
피츠의 법칙이란, 사용자가 기능을 사용하기 위해 움직이는(소비하는) 시간을 줄여야 한다는 법칙이다.
인터랙션은 최소한의 노력만으로 불편 없이 간단하게 이루어져야 하기 때문에 서비스를 디자인할 때 인터랙티브 요소의 크기와 위치를 적절하게 지정함으로써, 사용자가 해당 요소를 손쉽게 선택하게 하고 선택 가능 영역에 대한 사용자의 기대에 부응시켜야 한다.
예를 들어 당근마켓의 홈 피드와 동네생활 게시글의 화면을 보자.
왼쪽 홈피드 화면부터 보면 상단에 검색, 카테고리, 알림 아이콘을 오른쪽에 모아 놓았는데 각 아이콘 간 거리를 둬 떼어 놓음으로써 사용자가 누를 때 불편하지 않게 만들었다. 만약 아이콘 간의 거리가 너무 짧다면 사용자는 검색을 눌렀는데 카테고리가 눌릴 수도 있다.
또 서비스의 글로벌 기능(홈, 동네생활, 내 근처, 채팅, 나의 당근) 들은 손가락이 쉽게 닿는 위치인 하단에 고정하고, 아이콘 간 간격을 적절하게 띄워놓음으로써 사용자가 메뉴 이동을 쉽게 할 수 있도록 디자인했다.
오른쪽 화면에도 유사하게 알림 끄기, 공유하기, 더보기 기능을 오른쪽 상단에 모아두었고 게시글에 사용자가 직접 사진을 첨부하거나 키보드를 띄워 글을 써야 하는 참여적인 기능은 중간&하단에 위치함으로써 쉽게 댓글을 남길 수 있게 했다.
원칙 3. 힉의 법칙
#선택지를 너무 많이 주지 마라 (단순함의 원칙)
힉의 법칙이란, 너무 많은 선택지를 한 번에 다 보여주고 사용자에게 선택하게 하면 사용자가 고민하는 시간이 훨~씬 늘어나기 때문에 선택지를 조금씩 보여줘서 고민을 줄여주고 수월하게 선택하게 하자는 법칙이다.
예를 들어 거래를 마치고 후기를 쓸 때 우리는 모든 좋았던 점, 나빴던 점을 고민할 필요 없이 당근마켓이 제공해주는 몇 가지 선택지만 가지고 고민하면 된다.
만약 거래후기를 “@@님과의 거래가 어땠나요?” 라고만 물어보면, 사용자는 “시간을 얘기해야 하나, 가격을 얘기해야 하나, 뭘 얘기해야 하지?” 등 수많은 선택지들이 머리에 떠오르고 그만큼 후기를 작성하는 데 시간이 오래 걸릴 것이다.
이렇게 사용자에게 먼저 선택지를 줌으로써 사용자는 기능을 쉽게 효율적으로 사용할 수 있다.
원칙 4. 밀러의 법칙
#정보를 그루핑해서 제공하라
서비스가 제공하는 기능이 많아질 수록 보여줘야 할 내용이 많기 때문에 서비스는 점점 더 복잡해진다. 서비스가 복잡해질 수록 정보를 비슷한 내용끼리 묶어서 Grouping하고 잘 정리해야 사용자는 자신이 원하는 정보를 잘 찾아낼 수 있다.
사용자는 모든 내용을 다 기억할 수 없기에, 목적이 비슷한 내용끼리 잘 정리해서 사용자가 정보의 과부하가 되지 않도록 만들어주자는 게 밀러의 법칙이다.
예를 들어 당근마켓은 중고거래 기능에서 내가 지금 팔고 있는 상품, 거래가 완료된 상품 등 판매된 상품들도 보아야 하고, 구매했던 상품과 찜을 눌러 놓은 상품까지 다 보아야 한다.
이 기능을 모두 펼쳐서 보여준다면 사용자는 원하는 기능을 찾는데 너무 오랜 시간이 걸릴 것이기 때문에, 판매내역 | 구매내역 | 관심목록으로 grouping해서 정보를 제공하고 있다.
중고거래 외에도 동네생활 기능을 제공하는 당근마켓은 중고거래와 동네생활 기능을 구분짓기 위해 일부러 동네생활 글 | 동네생활 댓글 | 동네생활 주제 목록을 하나로 묶어서 다른 기능들과 구분해 놓았다.
이렇게 정리해 놓으면, 사용자는 나의 당근 페이지에 들어와서 자신의 원하는 기능만 쏙-쏙- 잘 찾을 수 있다.
원칙 5. 포스텔의 법칙
#어떤 값이 들어올지 모르니 보수적으로 준비하자 (견고함의 원칙)
사용자는 서비스를 기획자가 의도한 대로만 쓰는 게 아니다. 기획자는 전혀 생각하지도 못한 방법으로 사용하고, 그로 인해 오류를 경험할 수도 있다.
예를 들어, 상품의 가격을 입력하는 칸에 “몰라요” 라고 입력하는 사용자가 있으면 어떻게 될까?
해당 상품은 가격 필터에도 걸리지 않고, 이 “몰라요”라는 가격은 서비스 제공자 입장에서도, 중고 상품을 찾으러 들어온 사용자 입장에서도 당황스러운 경험이다.
그래서 당근마켓은 가격을 입력하는 텍스트필드는 무조건 숫자 키패드만 사용할 수 있도록 사용자의 행동을 제어했다.
원칙 6. 피크엔드의 법칙
#마지막이 기분 좋게 만들어라
피크엔드란 절정을 뜻하는 피크(Peak)와 마지막을 뜻하는 엔드(End)를 결합한 말로 서비스에 대한 전반적인 평가는 과업 전체에서 가장 절정이었던 감정과 마지막에 느끼는 감정의 평균으로 결정된다는 법칙이다.
서비스의 첫인상도 중요하지만, 끝인상이야말로 사용자가 계속해서 이 서비스를 사용할 건지 결정짓는 중요한 요소이니 우리는 끝인상에 좀 더 신경 쓸 필요가 있다.
당근마켓에서 과업은 무엇이 있을까? 아마 중고거래가 가장 주요한 과업일 것이다.
그리고 그 과업은 1. 중고거래 게시글을 올리는 과업 2. 실제로 중고거래를 오프라인으로 하는 과업으로 구분할 수 있다.
당근마켓은 이 1,2의 과업의 마지막에 사용자에게 좋은 인상을 주려 애쓴다.
예를 들어, 아직 중고거래를 오프라인으로 하지는 않았더라도 거래글을 올리기만 해도 이렇게 뱃지를 준다.
뱃지라는 리워드를 줌으로써 사용자는 글을 올리는 과업을 좋은 인상으로 끝맺게 된다.
실제로 거래를 마쳤을 때는, 이렇게 서로 거래후기를 주고 받을 수 있다.
단순히 물건 교환에 그치는 것이 아니라 사용자 간의 정을 나눌 수 있는 후기를 전해줌으로써 당근마켓의 색깔인 ‘동네 사람들과의 정’을 다시 한 번 느끼게 해준다.
원칙 7. 심미적 사용성 효과
#보기 좋은 떡이 먹기도 좋다 (심미성의 원칙)
심미적 사용성 효과란 사람들이 심미적인 디자인을 그렇지 않은 디자인보다 (실제로 사용하기 쉬운지의 여부와 상관없이) 사용하기 더 쉽다고 받아들이는 현상이다. (신기 >3<)
심지어 사용하다가 문제가 발생했을 때에도 사람들이 더 너그러운 태도를 보이기도 한다.
예를 들어 같은 오류 페이지여도 좀더 심미적인 오류 페이지는 사용자가 오류에서 겪게 되는 당황스러움을 줄여줄 수 있다.
게시글이 삭제되어 원하는 결과를 얻을 수 없지만, 저 당황스럽게 땀 흘리는 토끼가 나의 부정적인 경험을 좀더 긍정적으로 만들어준다 ㅎㅎ
원칙 8. 폰 레스토프 효과
#구분값을 주어 사용자가 구분할 수 있게 하라
폰 레스토프 효과란 여러 개의 유사한 사물들 사이에서 나머지와 다른 사물 하나가 가장 쉽게 기억될 가능성이 크다는 것이다.
따라서 서비스에서 중요하거나 강조해야 하는 기능이 있다면 차별점을 주어서 사용자가 좀 더 쉽게 인지할 수 있게 만들어야 한다.
예를 들어 사용자가 확인해야하는 채팅이나, 알림이 있는 경우에 당근마켕은 채팅, 나의 당근 아이콘 위에 주황색 포인트 컬러로 차별점을 줌으로써 사용자가 바로 인지할 수 있도록 했다.
원칙 9. 테슬러의 법칙
#더이상 줄일 수 없는 복잡성을 누가 가져갈 것인가 (복잡성의 원칙)
테슬러의 법칙이란 모든 시스템에는 더이상 줄일 수 없는 일정 수준의 복잡성이 존재한다는 법칙이다.
이 복잡성을 서비스 제공자가 개발로써 감당할 것인지, 아니면 사용자가 감당하게 할 것인지는 서비스의 선택이다.
예를 들어, 사용자가 입력한 주소를 기반으로 어떤 동네까지 정보를 받아볼지 정해야 하는데 어디까지 받아볼지는 자연스레 정할 수 없고 설정을 해줘야 하기 때문에 더 이상 줄일 수 없는 복잡함이다.
근처 동네를 사용자가 직접 선택하게 할 수도 있겠지만 (모든 근처 동네 선택지를 주고 체크박스로 선택하도록) 당근마켓은 사용자가 슬라이드 바만 조정해서 근처 동네를 쉽게 설정할 수 있도록 했다.
원칙 10. 도허티 임계
#사용자를 기다리게 하지 말자
도허티 임계란 사용자의 주의가 분산되는 것을 막고 생산성을 높이려면 시스템의 반응은 0.4초 이내에 이루어져야 한다는 법칙이다.
사용자는 화면이 로딩되는 시간이 길어질 수록 부정적인 감정을 느끼게 되고, 서비스를 이탈할 가능성이 높아진다.
그래서 서비스는 이 이탈을 방지하기 위해, 로딩되는 동안 하얀 화면만 보여줬다가 완전한 콘텐츠를 딱! 보여주는 것이 아니라 컨텐츠가 로딩되는 동안 미리 플레이스홀더를 보여줌으로써 사용자가 서비스가 조금이라도 더 빠르다고 느낄 수 있게끔 만들어준다.
사실 위의 10가지 UX 법칙들을 공부한다고 해도, 실제 회사에서 디자이너와 논의를 할 때 ‘도허티 임계에 따르면~’이라고 말하면서 의견을 주고 받지는 않는다.
하지만 일종의 ‘감’으로 작용하게 되어, ‘너무 느리게 로딩되면 답답하니까 미리 플레이스홀더라도 띄어놓죠!’ 라고 자연스럽게 이야기하게 된다.
감도 공부로 체득하는 나… 쪼렙이지만 기죽지 않겠어.
reference
- 피츠의 법칙과 Touch Target
- 선택지 설정을 위한 ‘힉의 법칙’
- 포스텔의 법칙(Postel’s law)
- 디자인 불변의 법칙 4. 심미적 사용성 효과
- 모든 UI/UX 디자이너가 알아야 할 심리학 원칙
쪼렙 서비스 기획자님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
