Search Menu

디자이너가 판단하는 기준, 휴리스틱

UX 리서처에게 필요한 역량, 반복하는 실수

UX 리서처가 질문을 참아야만 하는 이유

Dark Light
Nielsen Norman Group에 따르면 휴리스틱 평가에는 10가지 기준을 적용할 수 있습니다. NNG 홈페이지에서는 10가지 원칙 대한 포스터를 무료로 제공합니다. ©NNG

UX 리서처는 사용성 평가를 하기 위해서 다양한 방법을 활용합니다. 지난 원고를 통해 소개해드린 사용성 테스트(Usability Test)가 가장 대표적인 방법인데요. 엄격히 구분하면 사용성 테스트에는 두 가지 방법이 있습니다. 첫 번째는 실제 서비스를 사용하고 있는 사용자 혹은 잠재적 사용자를 대상으로 한 사용자 테스트(User Test)입니다. 흔히 사용성 테스트(Usability Test)를 사용자 테스트(User Test)와 동일시하지만 엄밀하게 말하면 사용자 테스트는 사용성 테스트를 하는 방법 중 하나일 뿐입니다. 다른 한 가지 방법은 휴리스틱 평가(Heuristics Evaluation)입니다. 여기서 휴리스틱(Heuristics)란 시간이나 정보가 불충분할 때 사용자가 합리적인 판단을 할 수 없거나, 굳이 체계적인 판단을 할 필요가 없는 상황에서 신속하게 사용하는 어림짐작의 기술을 의미합니다. 사용자를 리크루팅 하기 어렵거나 시간이 부족한 상황에서는 UX 리서처 등 전문가 그룹이 휴리스틱 평가의 주체가 되어 사용성 평가를 수행할 수 있습니다. 휴리스틱 평가에 대해서는 여러 전문가가 소개한 기준들이 있습니다.

다양한 휴리스틱 평가 방식 (5)

휴리스틱 평가의 방식마다 평가 기준, 개수는 다소 차이가 있지만 본질적으로 평가를 해야 하는 사용성 기준은 유사합니다. 업계에서 가장 널리 사용하고 있는 Nielsen Norman Group의 10가지 휴리스틱 평가 기준을 소개합니다.

Nielsen Norman Group 휴리스틱 평가 방식 (10)

  1. Visibility of System Status
  2. Match between system and the Real World
  3. User Control and Freedom
  4. Consistency and Standards
  5. Error Prevention
  6. Recognition Rather Than Recall
  7. Flexibility and Efficiency of Use
  8. Aesthetic and Minimalist Design
  9. Recognize, Diagnose and Recover from Errors
  10. Help and Documentation

1. 가시성

시스템 상태를 눈에 보이게 표현합니다

애플에서는 OS 업데이트를 할 때 남아있는 시간을 분 단위로 표현하고 있습니다. 만약 초 단위까지 정확하게 안내할 수 있다면 시스템 가시성을 개선하는 디자인이라고 평가할 수 있습니다. ©WHTM
시스템은 항상 적절한 시간 내에 피드백을 통해 사용자에 진행되고 있는 일에 대해 정보를 지속적으로 제공해야 합니다. OS나 App 업데이트의 경우, 전체 진행 단계가 몇 개이고 현재 몇 개를 완료했으며 전체를 완료하기까지 얼마나 더 오래 기다려야 하는지 안내할 필요가 있습니다. 사용자에게 가시성을 제공하는 방법 중 하나는 앞으로 얼마나 더 기다려야 하는지를 정확하게 안내하는 겁니다.

2. 현실 부합성

시스템과 실세계를 연결해야 합니다

대표적인 배달 서비스 ‘배달의 민족’에서는 일러스트 형식의 메뉴 아이콘을 사용하면서 배지를 연상시키도록 양감을 주었습니다. 반면 ‘쿠팡 이츠’는 실제 음식 사진을 메뉴 아이콘으로 사용하고 있습니다. ©WHTM
스큐어모피즘(Skeuomorphis)까지는 아니더라도 대상을 일상에서 사용하는 모습 그대로 사실에 가깝게 표현하는 것은 사용자가 이미 가진 멘탈 모델을 그대로 활용할 수 있기 때문에 사용성을 개선할 수 있습니다. 예를 들어 ‘치킨’ 메뉴 아이콘에서 실제 치킨 이미지나 일러스트를 사용하는 것이 방법이 될 수 있습니다. ‘마이크로소프트’ 워드나 파워포인트 등 오피스 소프트웨어에서 사용하는 저장, 인쇄, 서식 복사 등의 아이콘 역시 현실 세계와의 연결성을 강조한 디자인입니다. 시스템 지향적인 용어보다는 사용자에게 익숙한 것, 관례를 따르는 것이 사용성을 높이는데 더 유용합니다.

3. 통제감

사용자가 시스템을 통제할 수 있다고 느끼도록 합니다

‘11번가’와 같은 이커머스 플랫폼에서는 통제감을 제공하기 위해 상세 페이지에서 최상위 카테고리로 한 번에 이동할 수 있는 breadcrumb을 제공하고 있습니다. ©WHTM
사용자는 흔히 실수로 버튼을 누르거나 마우스를 이동하다가 호버 메시지를 확인합니다. 이럴 때에는 사용자가 “잘못 눌렀어요”라는 설명을 할 필요 없이 바로 원하지 않는 상태에서 벗어날 수 있도록 출구를 만들어야 합니다. 뒤로 가기 혹은 실행 취소 기능을 지원하고, breadcrumb을 통해서 한 번에 원하는 메뉴로 이동할 수 있는 통제권을 제공해야 합니다.

4. 일관성

플랫폼에서는 관례를 준수함으로써 익숙함을 제공할 수 있습니다

넷플릭스’와 ‘왓챠플레이’는 모두 동일한 형태의 위시리스트 아이콘과 하단 GNB 메뉴 구조를 사용하고 있습니다. ©WHTM
사용자가 다른 단어나 상황, 혹은 행동(action)이 동일한 것을 의미하는지 의심을 하는 일이 없도록 만들어야 합니다. 아무도 도와줄 수 없는 상황에서 의문을 갖기 않고 매끄럽게 시스템을 사용하려면 다른 플랫폼을 이용하면서 이미 학습한 방식을 존중할 필요가 있습니다. ‘T map’과 ‘카카오 내비’, ‘네이버 지도’와 ‘카카오맵’, ‘배달의 민족’과 ‘쿠팡 이츠’, ‘11번가’와 ‘지마켓’은 서로 경쟁하되 공유해야 하는 시스템 속성을 갖고 있습니다.

5. 오류 방지성

오류가 발생하면 회복하도록 해야 하지만, 최선은 오류를 예방하는 겁니다

회원 가입에서 ‘동의’ 문항을 빠뜨리는 경우가 종종 있습니다. 이를 예방하기 위해서는 다음 필수 입력 필드로 모션 그래픽을 추가함으로써 가이드를 제공할 수도 있습니다. ©Hakim
애초에 문제가 발생하지 않도록 방지하는 세심한 디자인이 훌륭한 에러 메시지보다 훨씬 더 사용성에 도움이 됩니다. 시스템을 개편하거나 리뉴얼할 때에는 가장 에러가 자주, 오래 발생하는 지점을 찾아내고 이 상황을 제거하는 것이 효과적입니다. 에러가 발생하면 빠르게 회복할 수 있도록 돕는 것은 차선책이고, 에러를 원천 차단하는 것이 언제나 더 바람직한 디자인 원칙입니다.

6. 인지 가능성

사용자가 기억할 필요 없이 만드는 것이 중요합니다

마이크로소프트의 bing은 사용자의 검색 기록을 보여주는 메뉴를 제공합니다. 사용자는 과거 검색기록을 기억할 필요 없이 검색엔진을 활용할 수 있습니다. ©NNG
아마존에서는 최근에 본 상품을 브라우징 할 수 있는 메뉴를 별도로 제공합니다. ©WHTM
사용자가 기억하지 않아도 사용할 수 있는 디자인이 사용성이 더 뛰어나다고 볼 수 있습니다. 중요한 정보 요소가 한눈에 보이고, 전체 단계 중에 현재의 단계를 바로 알아차릴 수 있도록 만든다면 ‘다음에는 어떤 걸 해야 하는지’를 기억하지 않고도 사용할 수 있습니다. 사용자 별로 기억을 할 수 있는 기간과 용량에 차이가 있기 때문에 기억할 필요가 없는 디자인은 더 뛰어난 사용성을 가질 수 있습니다

7. 유연성

사용할 때에는 유연하고 효율적인 것이 중요합니다

아이폰에서는 3D Touch 기능을 통해 애플리케이션을 실행하지 않고도 핵심 기능을 바로 작동할 수 있습니다. 서비스가 익숙한 사용자에게 더 유연하게 기능을 제공하는 차원으로 볼 수 있죠. ©WHTM
경험이 숙련된 사용자들은 처음 서비스를 이용하는 사용자에 비해 단축키나 고급 설정 등의 메뉴를 사용하는 것이 더 편리하다고 느낄 수 있습니다. 길을 안내할 때 처음 서비스를 이용하는 사용자에게는 조금 돌아가더라도 더 넓고 포장이 잘 된 도로가 편리한 반면, 매일 두 차례씩 이용하는 길이라면 차가 덜 막히는 지름길이 더 나을 수 있습니다. 항상 동일한 옵션을 제공하는 것이 더 나은 사용성을 보장하지 않는다는 점을 기억할 필요가 있죠. 디자이너가 휴리스틱 평가를 할 때에는 ‘유연성’을 의식해야만 합니다.

8. 미적 최소주의

심미적이되 미니멀리즘을 원칙으로 삼아야 합니다

airbnb는 홈페이지 메인 화면에서 4가지 정보만 입력하면 원하는 숙소를 검색할 수 있도록 메뉴 구성을 최소화했습니다. 각 메뉴 하단에는 서브텍스트로 설명을 포함해 직관성을 높였습니다. ©WHTM
이것도 있으면 좋겠고, 저것도 있으면 좋겠다는 욕심이 계속 생길 테지만 관련이 적은 요소나 당장 필요하지 않은 장치는 모두 배제하는 것이 사용성 차원에서 더 좋습니다. 모든 요소들이 사용자의 주의를 빼앗기 때문에 정말 중요하게 생각하는 핵심 과업을 하는데 방해가 되고 직관성을 헤치기 때문입니다.

9. 회복 가능성

에러를 인지하고, 조치해서 빠져나올 수 있도록 돕습니다

PIXAR는 에러 페이지를 이야기 속 캐릭터로 의인화했습니다. 기억이 잘 안 날 뿐이라는 친근한 표현으로 위로를 건네면서 자사 콘텐츠 ‘인사이드 아웃’을 알리고 있습니다. ©PIXAR
Email Center UK는 ‘페이지를 찾을 수 없음’이라는 페이지에 어떤 직원을 혼내주면 좋을지 선택하는 메뉴를 제공하면서 유머와 신뢰를 제공하고 있습니다. ©emailcenter
에러는 알아차리기 쉬울수록 좋습니다. 발견하기 어렵게 하거나, 발견을 했는데 기억하기 어렵게 길게 만드는 대신 쉽게 기억하고 전달할 수 있도록 만들어야 합니다. 오류가 발생했을 때 가능한 쉽게 보여주고 가장 의심이 가는 문제의 원인을 짚어주는 것이 문제로부터 벗어나는데 더 빠르다고 느끼기 때문이죠. 문제는 쉽게, 문제의 진단과 해결을 위해 도움을 구할 채널까지 함께 안내하는 것이 가장 좋은 회복 가능성입니다.

10. 도움과 지원을 문서화

애플은 아이폰 사용자 가이드에서 목차를 제공하고 있습니다. 목차를 다 살펴보지 않고 키워드로 검색을 할 수 있도록 검색 기능을 제공한다면 더 빠르게 나에게 맞는 도움말을 찾아볼 수 있을 겁니다. ©WHTM
소수의 사용자만 도움말을 찾겠지만 도움말은 어려움을 겪는 사용자에게 유일한 위안이 될 수 있습니다. 문서를 찾지 않도록 실수를 예방하고 문제를 스스로 회복할 수 있도록 만들되 문제가 생겨서 도움말을 찾을 때에는 더 빠른 시간에, 더 적은 단계를 거쳐서 사용자가 자신의 문제를 해결하는 단서를 찾을 수 있도록 보조해야 합니다.

지금까지 총 10가지 휴리스틱 평가 기준에 대해 소개해드렸습니다. 휴리스틱 평가는 각 업종, 비즈니스 단계, 프로덕트 특성 등에 따라 세분화해서 사용하는 것을 추천합니다. 모빌리티와 커머스 등 업계 특성에 따라 평가 기준을 정의한 후 체크리스트를 구체화해서 사용하는 것이 효과적이기 때문입니다. 휴리스틱 평가는 사용성 평가의 방법 중 한 가지로 사용자를 섭외해서 프로토타입 기반으로 사용성을 검증하기 어려운 상황에서 전문가 집단이 빠르게 적용할 수 있는 평가 방식입니다. 모든 리서치는 교차 검증을 통해서만 정답에 가까운 모범 답안을 찾을 수 있습니다. 사용성 평가와 휴리스틱 평가를 적절히 배합해서 디자인 리서치를 하는 것이 필요합니다.

Source: 『UX Research – Practical Techniques for Designing Better Products』