디자이너 성연의 매거진

UX 디자인에 휴리스틱 활용하기

디자이너 성연

2020.04.17 17:53
  • 4464
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    1
  • 0

휴리스틱(Heuristics) 이론은 잘 활용한다면 좋은 사용자 경험을 만드는데 도움을 준다. 다만 심리학/행동경제학과 깊은 연관 때문인지 어려운 이론이라고 생각하는 경향이 있다. 깊이 들어가면 끝이 없겠지만, UX 디자인에 활용할 수 있는 정도로 알아본다면 도전해볼 만한 이론이다.

 

 

휴리스틱이란?

휴리스틱을 아주 쉽게 정의 내린다면 '어림짐작’ 또는 '대충 내린 결정' 정도로 이해할 수 있다. 휴리스틱과 관련 있는 행동경제학에서는 전통 경제학의 '경제적 인간(이콘)'처럼 인간을 언제나 이성적이고 합리적 존재로 보지 않는다. 행동경제학의 핵심은 인간의 비합리적 행동을 심리/사회/감정적 관점에서 보고 파악해야 한다는 것이다.

 

아래 역삼각형 모형을 보면 인간 뇌는 어떤 것을 보고 판단 내리기까지 세 가지 Funnel(단계)을 거친다고 한다. 단계는 차례대로 1) Mystery(수수께끼) 2) Heuristic(어림짐작) 3) Algorithm(알고리즘) 순이다. 참고로 지식화 진행 중 제동이 걸리면 다음 단계로 넘어가지 못한다. 

 

 

 

 

지식화의 세단계 퍼널

 

 

누군가 아래 문신 많은 여성 사진을 보여주고, 그녀의 직업을 당신에게 물어본다고 치자. 우리는 무의식에서 1) 수수께끼 단계로 진입한다. 나는 처음 그녀를 보고 타투도 타투지만 옷차림 때문에 헤비메탈 그룹의 보컬이 아닐까 [2) 휴리스틱] 생각했다. 나는 더 복잡한 단계인 3) 알고리즘으로 넘어가지는 않았다. 아마도 타투가 상징하는 사회적 맥락 안에서 그녀의 직업을 추론한 결과라고 생각된다.

 

 

 

 

그녀의 이름은 사라이고 호주 애들레이드에 거주하는 정형외과 의사라고 한다. 호주 매스컴 일부에서는 그녀를 가장 멋지고 젊은 의사 중 한 명이라고 소개하기도 했다. 어쨌든 나는 휴리스틱 단계에서 오판했고, 더 깊은 사고 단계인 알고리즘으로 넘어가지 못했다.

 

 

 

 

정형외과 의사인 사라

 

 

 

대표성 휴리스틱(Representative heuristics)

휴리스틱에는 크게 두 가지 휴리스틱이 존재한다. 대표성 휴리스틱과 가용성 휴리스틱이다. 먼저 대표성 휴리스틱의 경우 방금 정형외과 의사인 사라 같은 경우라고 할 수 있다. 실제 확률에 대한 판단은 배제한 채 대상이 가지고 있는 대표성을 갖고 판단하는 오류를 말한다. 예컨대 스테레오 타입의 남/녀, 긴 머리 남성, 아주 짧은 숏컷의 여성, 각종 직업이 가진 이미지, 피부색, 특정 국가 이미지 등 세상에 존재하는 모든 상징이 여기에 해당된다.

 

많은 사람들이 정치인을 판단할 때 구체적인 공약이 아니라, 후보자가 충청도 출신이기 때문에 느긋한 성품일 것이라든가, 군인 출신이라 고지식하고 융통성이 없을 것이라 말하는 것도 모두 대표성 휴리스틱에 해당된다. 이들은 모두 심각한 오판 가능성을 내재하고 있다.

 

-

 

"린다 문제(Linda Problem)"는 대표성 휴리스틱과 관련된 사례이다. 먼저 린다의 특성이 다음과 같이 주어졌다고 하자. 린다는 31세의 독신 여성이며, 매우 머리가 좋고 본인 생각을 뚜렷하게 이야기하는 성격이다. 그녀는 철학을 전공했으며, 사회정의와 인종차별에 깊이 관여하였고, 반핵 시위에도 참여하였다. 이러한 설명을 한 후 린다가 ① '페미니스트'일 확률 ② '은행원'일 확률 ③ '은행원이면서 페미니스트'일 확률을 예측하라고 했더니, 실험 결과 85%의 응답자가 ①>③>②의 순서로 린다의 직업 확률을 예측했다. 응답자들의 예측 결과는 논리적으로 맞지 않다. 린다가 ③ '은행원이면서 페미니스트'일 확률은 ① '페미니스트'이거나 ② '은행원'일 확률의 교집합에 속하기 때문에 절대적으로 ①이나 ②보다 더 클 수 없다. ③은 ① '페미니스트'와 ② '은행원'의 특성을 동시에 갖고 있어야 하기 때문에 집합 오류(conjunction fallacy)가 발생한 것이다.

[위키백과 인용 : 린다 문제(Linda Problem)] 

 

 

가용성 휴리스틱(Availability heuristics)

가용성 휴리스틱의 경우 개인적 기억들만을 매개로 판단하는 것을 말한다. 이 휴리스틱은 기억에서 잘 떠오르는 대상에 대하여 상대적으로 높은 평가를 내리는 경향이 있다.

 

예컨대 A라는 사람이 중국집에 들어가서 처음 먹어보는 팔보채를 시켰는데 맛이 없었다. 그 사람 기억 속에 팔보채는 맛없는 메뉴로 기억됐다. 훗날 다른 음식점에서 팔보채 메뉴를 보고 옛 기억을 상기시킨다. 팔보채는 맛이 없으니 다른 메뉴를 시킨다. 친구가 시킨 팔보채를 한 입 먹어보니 기억 속 그 맛과는 딴판이고 아주 맛있다. 예전 중국집 음식 솜씨가 형편없었던 것이다.

 

휴리스틱과 시각적 판단

그렇다면 휴리스틱은 나쁜 것일까? 당연 아니다. 휴리스틱과 관련된 선행 연구들을 보면, 휴리스틱을 바탕으로 결정한 것들이 정보가 부족하거나 판단능력이 부족함에도 좋은 성과를 가져다준 사례들을 많이 확인할 수 있다. 그렇기 때문에 UX 디자이너는 휴리스틱을 적극적으로 활용해 사용자가 깊은 고민 없이 좋은 선택을 할 수 있게끔 고민해야 한다.

 

 

 

 

시스템 아이콘을 잘 활용하면 고민 단계를 줄일 수 있다.

 

위 예시 이미지처럼 범용적인 기호들을 사용하는 것은 대표적인 휴리스틱 활용 중 하나라고 할 수 있다. 사람들은 익숙한 것들에서 3단계 알고리즘 단계로 넘어가지 않기 때문이다. 만약 아래 예시처럼 기본적인 경고(alert UI)에 많은 시각적 변형을 주었다면 사용자의 판단 시간과, 의사결정 단계가 더 늘어날 수 있다는 것을 꼭 염두에 두어야 한다.

 

 

 

 

변형된 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 디자인에 휴리스틱 활용하기(끝)'

 

[참고자료]

휴리스틱 이론 - 위키백과, 우리 모두의 백과사전 

Heuristic Evaulation: An introduction

Keeping Innovation Flowing Through Design Thinking 

  • #UX
  • #디자이너성연
  • #휴리스틱