UX 디자인에 휴리스틱 활용하기
경제학 이론으로 UX 디자인 하기
휴리스틱(Heuristics) 이론은 잘 활용하면 좋은 사용자 경험을 만드는데 도움을 준다. 다만 심리학/행동경제학과 깊은 연관 때문인지 어려운 이론이라고 생각하는 경향이 있다. 깊이 들어가면 끝도 없겠지만, 디자인에 활용할 수 있는 정도로만 알아본다면 염두할 만하다.
휴리스틱이란?
휴리스틱을 아주 쉽게 정의 내린다면 '어림짐작’ 또는 '대충 내린 결정' 정도로 이해할 수 있다. 휴리스틱과 관련 있는 행동경제학에서는 전통 경제학의 '경제적 인간(이콘)'처럼 인간을 언제나 이성적이고 합리적 존재로 보지 않는다. 행동경제학의 핵심은 인간의 비합리적 행동을 심리/사회/감정적 관점에서 보고 파악해야 한다는 것이다.
아래 역삼각형 모형을 보면 인간 뇌는 어떤 것을 보고 판단하기까지 세 가지 Funnel(단계)을 거친다고 한다. 단계는 차례대로 1) Mystery(수수께끼) 2) Heuristic(어림짐작) 3) Algorithm(알고리즘) 순이다. 참고로 지식화 진행 중 제동이 걸리면 다음 단계로 넘어가지 못한다.
<그림 1> 지식화의 세단계 퍼널누군가 <그림 2>의 문신 많은 여성 사진을 보여주고, 그녀의 직업을 당신에게 물어본다고 치자. 우리는 무의식에서 1) 수수께끼 단계로 진입한다. 나는 처음 그녀를 보고 타투도 타투지만 옷차림 때문에 헤비메탈 그룹의 보컬이 아닐까 [2) 휴리스틱] 생각했다. 나는 더 복잡한 단계인 3) 알고리즘으로 넘어가지는 않았다. 아마도 타투가 상징하는 사회적 맥락 안에서 직업 추론을 멈춘 결과라고 생각된다.
<그림 2> 문신이 있는 여성사실, 그녀의 이름은 사라이고 호주 애들레이드에 거주하는 정형외과 의사라고 한다. 호주 매스컴 일부에서는 그녀를 가장 멋지고 젊은 의사 중 한 명이라고 소개했다. 어쨌든 나는 휴리스틱 단계에서 오판했고, 더 깊은 사고 단계인 알고리즘으로 넘어가지 못했다.
<그림 3 > 정형외과 의사인 사라대표성 휴리스틱(Representative heuristics)
휴리스틱은 크게 대표성 휴리스틱과 가용성 휴리스틱으로 구분할 수 있다. 대표성 휴리스틱의 경우 방금 정형외과 의사인 사라 같은 경우다. 실제 확률에 대한 판단은 배제한 채 대상이 의미하는 대표성을 갖고 판단하는 오류를 말한다. 스테레오 타입의 남/녀, 긴 머리 남성, 아주 짧은 숏컷의 여성, 각종 직업이 가진 이미지, 피부색, 특정 국가 이미지 등 세상에 존재하는 모든 상징이 여기에 해당한다.
많은 사람이 정치인을 판단할 때 구체적인 공약이 아니라, 후보자가 충청도 출신이기 때문에 느긋한 성품일 것이라든가, 군인 출신이라 고지식하고 융통성이 없을 것이라 말하는 것도 모두 대표성 휴리스틱에 해당한다. 이들은 또 다시 오판할 가능성이 있다.
-
"린다 문제(Linda Problem)"는 대표성 휴리스틱과 관련된 사례이다. 먼저 린다의 특성이 다음과 같이 주어졌다고 하자. 린다는 31세의 독신 여성이며, 매우 머리가 좋고 본인 생각을 뚜렷하게 이야기하는 성격이다. 그녀는 철학을 전공했으며, 사회정의와 인종차별에 깊이 관여하였고, 반핵 시위에도 참여하였다. 이러한 설명을 한 후 린다가 ① '페미니스트'일 확률 ② '은행원'일 확률 ③ '은행원이면서 페미니스트'일 확률을 예측하라고 했더니, 실험 결과 85%의 응답자가 ①>③>②의 순서로 린다의 직업 확률을 예측했다. 응답자들의 예측 결과는 논리적으로 맞지 않다. 린다가 ③ '은행원이면서 페미니스트'일 확률은 ① '페미니스트'이거나 ② '은행원'일 확률의 교집합에 속하기 때문에 절대적으로 ①이나 ②보다 더 클 수 없다. ③은 ① '페미니스트'와 ② '은행원'의 특성을 동시에 갖고 있어야 하기 때문에 집합 오류(conjunction fallacy)가 발생한 것이다.
[위키백과 인용 : 린다 문제(Linda Problem)]
가용성 휴리스틱(Availability heuristics)
가용성 휴리스틱은 개인적 기억만으로 판단하는 행위다. 이 휴리스틱은 기억에서 쉽게 떠오르는 대상을 상대적으로 높이 평가하는 경향이 있다.만약 A라는 사람이 중국집에 들어가서 처음 먹어보는 팔보채를 주문했는데 맛이 없었다. 그 사람 기억 속에 팔보채는 맛없는 메뉴로 기억됐다. 훗날 다른 음식점에서 팔보채 메뉴를 보고 옛 기억을 떠올린다. 팔보채는 맛이 없으니 다른 메뉴를 시킨다. 친구가 주문한 팔보채를 한 입 먹어보니 기억 속 그 맛과는 딴판이고 아주 맛있다. 예전 중국집 음식 솜씨가 형편 없었던 것이다.
휴리스틱과 시각적 판단
그렇다면 휴리스틱은 나쁜 것일까? 당연 아니다. 휴리스틱과 관련된 여러 선행 연구를 보면, 휴리스틱을 토대로 결정한 것이 정보가 부족하거나 판단능력이 부족함에도 좋은 성과를 가져다준 사례를 많이 확인할 수 있다. 그렇기 때문에 UX 디자이너는 휴리스틱을 적극적으로 활용해 사용자가 깊은 고민 없이 좋은 선택을 할 수 있게끔 고민해야 한다.
<그림 4> 시스템 아이콘을 잘 활용하면 고민 단계를 줄일 수 있다.<그림4>처럼 범용적인 여러 기호를 사용하는 것은 대표적인 휴리스틱 활용 중 하나다. 사람들은 이미 익숙한 것이라면 3단계 알고리즘 단계로 넘어가지 않기 때문이다. 만약 <그림5>처럼 기본적인 경고(alert UI)에 많은 시각적 변형을 주었다면 사용자의 판단 시간과, 의사결정 단계가 더 늘어날 수 있다는 것을 꼭 염두에 두어야 한다.
<그림 5> 변형된 alert, 판단 단계가 늘어날 수 있다사용자는 화면에서 어림짐작으로도 어떤 액션을 취해야 하는지 빠르게 알 수 있어야 한다. 또한, Mystery에서 다음 단계로 로딩 없이 빠르게 넘어갈 수 있어야 한다. 이때 UI의 관습적 패턴을 이용하는 것은 많은 도움이 된다.
로그인과 뉴스레터가 가진 관습적 UI들아래는 용도에 맞게 분류해놓은 UI패턴 사이트다. 참고하면 좋다.
https://uimovement.com/tag/menu/
제이콥 닐슨의 10가지 휴리스틱 평가
웹/앱을 평가하는 방법에는 여러 가지가 있지만 개인적으로 제이콥 닐슨(Jakob Nielsen)의 평가 방법을 추천한다. 이 평가 방법은 앞서 다룬 휴리스틱을 활용한다. 정식 명칭은 휴리스틱 평가(Huristic Evaluation)다. 이 평가법은 약 20년 전에 만들었지만 지금까지도 다양한 소프트웨어 평가에 사용된다.
도널드 노먼과 함께 '닐슨 노먼 그룹'의 창립멤버 제이콥 닐슨실전에서 휴리스틱 평가는 다양하게 쓰인다. 내 경우 일반인이 하는 사용성 테스트 이전, 실무자끼리 먼저 평가하는 것을 선호한다. 평가 후 합의한 사항을 바탕으로 바로 수정할 수 있기 때문이다. 3~5명일 때 가장 효과가 좋았다.
휴리스틱 평가는 아래 10가지 문항이 존재한다. 테스트가 필요한 소프트웨어(웹/앱)를 아래 10가지 문항을 기준 삼아 각자 서술한다. 시간은 소프트웨어 규모에 따라 달라진다. 크지 않은 규모라면 보통 1시간 안에 끝낼 수 있다. 서술 후 의견을 교류하고, 문제를 파악한다. 문제의 우선순위를 정하고, 실질적 대안을 함께 고민한다. 참고로 휴리스틱 평가에 맞지 않은 소프트웨어가 있을 수 있다. 아래는 휴리스틱 평가 10가지 문항이다.
1. 상태 안내 (Visibility of system status)
시스템은 적절한 시간과 피드백으로 사용자에게 진행사항을 알려줘야 한다.(로딩바 등)
2. 현실에서 익숙한 단어와 문구를 사용 (Match between system and the real world)
전문가 용어는 최대한 자제한다. 사용자에게 최대한 친숙한 단어로 말한다.
3. 복구의 쉬움 (User control and freedom)
사용자는 자신의 실수를 금세 복구할 수 있어야 한다. 애초에 사용자는 많은 실수를 한다고 가정하는 게 마음 편하다.
4. 일관성과 기준 (Consistency and standards)
UI 문구나 인터렉션 등이 페이지 별로 달라지면 안 된다. 디자인 시스템과 같은 기준이 필요하다. 빨간색 Next 버튼이 다른 페이지에서 갑자기 Close가 되면 안 된다.
5. 에러 예방 (Error prevention)
처음부터 사용자가 실수하지 않도록 디자인하는 것이 가장 좋다. 하지만 현실적으로 쉽지 않다. 만약 사용자들이 어떤 액션을 실수로 취했다면, 충분히 인지시켜야 한다. 며칠에 걸쳐 블로그 글을 썼는데 실수로 [Close]를 눌렀다고 경고 없이 꺼진다면 두 번 다시 사이트에 접속하지 않을 것이다.
6. 기억보다 직관 (Recognition rather than recall)
사용자가 별도 학습 없이 해당 기능에 대해 쉽게 인식할 수 있어야 한다. 검색바 하나만 사용자에게 던져 줄 수도 있지만, 연관 있는 태그 모음 등을 같이 제공하면 사용자는 더 쉽게 선택할 수 있을 것이다. 텍스트만으로 아이콘을 만들 수 있지만 연상되는 이미지를 함께 사용한다면 사용자는 기능을 쉽게 이해할 수 있다.
7. 사용 효율성 (Flexibility and efficiency of use)
해당 소프트웨어의 이해도가 높은 사용자를 배려해야 한다. 자주 쓰는 메뉴 모음이나 순서 변경 같이, 숙련된 사용자를 도울 수 있는 방법을 연구해야 한다.
8. 미적이고 기능적인 디자인 (Aesthetic and minimalist design)
화면이 지향하는 가치와 관계없는 디자인 요소는 모두 배제되어야 한다. 관계없는 요소를 빼다 보면 화면은 점점 기능(미적)적으로 바뀔 것이다.
9. 명확한 에러 문구 (Help users recognize, diagnose, and recover from errors)
쉽고 명확한 언어로 에러 표시를 해야 한다. 동시에 빠른 해결책이 필요하다.
10. 도움말 (Help and documentation)
사용자가 어려움에 직면할 때 해당 기능에 대한 설명을 쉽고 빠르게 찾아볼 수 있어야 한다.
'UX 디자인에 휴리스틱 활용하기(끝)'
[참고자료]
