brunch

You can make anything
by writing

C.S.Lewis

by KitaiKeith Nov 18. 2019

휴리스틱 평가를 완벽히 수행하기 위한 10가지

앱 개선을 위한 개선안 도출 기준을 정합시다!

우리 앱을(브러쉬몬스터) 2.0으로 위해서 앱 개선 항목을 정리해야 할 필요가 있었다. 다만, 지금은 디자이너에게 앱 전반을 뒤집어엎을 충분한 시간을 줄 수 없어(구조적으로) 최대한 작고, 효과적으로 앱 업데이트를 준비하고 진행할 수밖에 없었다. 업데이트 범위와 일정 등에 대해 얘기를 나누었지만, 구체적인 실행 안이 나오지 않아 고민하던 중 휴리스틱 평가(Heuristic Evaluation)의 경험을 접하였다. 나를 비롯한 디자이너와 팀원에게 해당 개념을 공유하기 위해 Medium에 포스팅된 글 하나를 선택하여서 번역하였다.

10 tips on how to conduct a perfect Heuristic evaluation
휴리스틱 평가에 대한 기본 설명과 10가지 Tip을 소개하였다.

영문학과도, 디자인과 출신도 아니어서 개념(용어)에 대한 이해가 낮아 오역과 의역이 많다.
(나도 우리 팀원도 몰랐던 개념을 공부하고, 기준을 잡고 업무에 반영해봤다는 게 더 큰 의미 같다.)

시작해보자.

모든 User experience 리서처들은 회사 내에서 휴리스틱 평가를 진행하길 요구받습니다. 하지만, 요구를 할 뿐 휴리스틱 평가에 무엇이 포함되는지 잘 모르죠. 실제로 그래요. 그냥 유행하니까.. 듣고 따라 하는 거죠. 대부분이 Jakob Neilsen을 듣고 와서 그냥 그가 쓰는 방식을 따라 하려고 하는 거죠. (정확히 뭔지도 모르면서) 그냥 그들은 "Usability 전문가"라고 믿는 사람들이 무엇이 문제인지 바로 알려줄 거라고 믿으면서 휴리스틱 평가를 요청합니다.

휴리스틱 평가란 무엇인가?

휴리스틱 평가는 user interface를 리뷰하는 basic한 방식 중 하나라고 정의될 수 있습니다. user experience 관점으로 자세히 들여다보는 거죠. 이 방식은 다양한 user experience 문제를 확인하고, 디자인 원칙에 기초하여 수행됩니다. heuristics(발견적 교수법)인 방식으로 말이죠. - 그래서 이름이 휴리스틱 평가입니다.

휴리스틱 평가를 이용하면 다양한 장점이 있죠 :

디자인 진행상황(디자인 완성도가 낮더라도)에 상관없이 도입할 수 있습니다. 하지만 너무 빨리 진행하면 피드백을 너무 빨리 받긴 하죠.

usability testing(tree testing이나 card sorting 같은 것들)을 하면서 동시에 진행할 수도 있고, 그냥 먼저 할 수도 있습니다.

다른 research 방법보다 훨씬 편하고, 저렴하게 진행할 수 있죠. field test나 대규모 user research는 돈도 시간도 많이 들죠.

진행하는 이의 능력에 따라 평가를 진행하고 결과를 산출하는 시간이 꽤나 빨라질 수도 있어요.

장점이 많은 휴리스틱 평가지만, 큰 단점도 있습니다. 바로 수행하는 사람이 이 분야에 대한 경험이 필요합니다. "Finding usability problems through heuristic evaluation"이라는 연구자료에서 Jakob Nielsen 이렇게 말을 했어요. "휴리스틱 평가는 담당자가 usability experts일 때 효과적인 방법입니다. 이런 전문성은 쉽게 얻어질 수 있지 않아 예산에 영향을 줄 수도 있죠."

근데 또 다른 연구에선 "적어도 3명의 개별 평가자"만 있다면 효과적인 결론을 적을 수 있다고도 얘기했어요.

다행히도, 우리가 생각하지 않아도 되게끔, 구체적인 휴리스틱 평가 방법이 있습니다. 10개의 휴리스틱 평가 방식(기준)은 Jakob Nielsen에 의해 만들어졌고, usability 평가를 시작하는 좋은 방식입니다. 예시와 함께 10개의 기준들을 하나씩 살펴봅시당.

시스템 상태를 시각화하기(VISIBILITY OF SYSTEM STATUS)

시스템과 현실과의 매치 (MATCH BETWEEN SYSTEM AND THE REAL WORLD)

사용상 제한은 있지만 자유도를 주기 (USER CONTROL AND FREEDOM)

일관성과 기준 (CONSISTENCY AND STANDARDS)

에러 방지 (ERROR PREVENTION)

기억을 해내기보단 쉽게/바로 알아볼 수 있게 하기 (RECOGNITION RATHER THAN RECALL)

유연하고 효율적인 사용 (FLEXIBILITY AND EFFICIENCY OF USE)

이쁘고 간결한 디자인 (AESTHETIC AND MINIMALIST DESIGN)

사용 중 에러에 대한 인지, 진단, 복구 과정을 도와야 합니다. (HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS)

도움말과 문서 (HELP AND DOCUMENTATION)

사용자 인터페이스 디자인을 위한 10가지 휴리스틱 평가(The 10 Heuristics for User Interface Design)

1. 시스템 상태를 시각화하기(VISIBILITY OF SYSTEM STATUS)

어떻게 진행되는지 유저에게 알려줍시다.

유저는 항상 시스템의 내부를 볼 수 없습니다. (뭐가? 왜? 어떤 식으로? 작동하는지) 이건 유저가 질문에 대한 답변을 받을 수 있게 해 주는 것으로 매우 중요합니다. 예를 들어, "회원가입하는 과정이 얼마나 걸리는 거야?", "지금 업로드하는 파일이 얼마나(몇 프로나) 올라간 거야?" 아니면, "다음 단계로 넘어가려면 내가 얼마나 기다려야 하는거야?"

좋은 사례 : Kickstarter 프로젝트 생성 프로세스

킥스타터에서 프로젝트 시작하는 과정은 매우 중요하고 최대한 쉽게 볼 수 있어야 합니다. 매우 쉽게 각 섹션의 폼을 볼 수 있고, 각 단계가 진행 중인지 완료되었는지를 볼 수 있습니다.

킥스타터에서 프로젝트 만드는 과정

좋은 사례 : 페이스북에서 사진 올리는 프로세스

대개, 1장의 사진을 올릴 땐 몇 초 밖에 걸리지 않지만, 그럼에도 불구하고 페이스북은 내게 progress bar를 보여줘서 이게 잘 진행되고 있는지, 이게 언제 종료되는 알 수 있습니다.

페이스북에서 사진 올리는 과정

2. 시스템과 현실과의 매치(MATCH BETWEEN SYSTEM AND THE REAL WORLD)

친숙한 아이디어와 아이디어를 기반으로 한 디자인 시스템

두 번째는 비주얼 시스템 (website 같은)과 사람들에게 훨씬 더 친숙한 현실 사이의 유사성을 만드는 것에 대한 내용입니다. 우린 이런 걸 많이 하죠 - folders, pages, files, windows and buttons에 대해 얘기 많이 하잖아요. 이런 모든 콘셉트는 현실 세계에서 디지털 세계로 변환된 겁니다.

또, 당신이 디자인하는 시스템의 종류(타입)에 맞는 적절한 언어(표현 방식)를 사용하는 게 중요합니다. 예를 들어, 10대를 목표로 한 웹사이트에선 이들이 사용하는 언어를 사용해야겠죠. 그리고, 특별한 그룹을 타깃으로 한 거라면 그에 맞는 용어를 써야겠죠. (가령, 헬스갤러리라면 '근손실'과 같은..)

좋은 사례 : spotify의 언어 시스템

스포티파이는 "Queue", "playlist", "History", "Lists"와 같은 콘셉트의 언어를 사용합니다. (한국 출시한다는 뉴스가 있었는데, 한국어에선 어떤 언어를 쓸지 기대되네요.) 이런 단어는 실제 세상에서 친숙하게 사용하는 단어들입니다. 그리고 실제 음악 분야에서도 친숙하게 사용하는 단어죠.

Spotify

3. 사용상 제한은 있지만 자유도를 주기(USER CONTROL AND FREEDOM)

ctrl + z

사용에 있어 유저에게 책임을 주고 그들이 하는 작업을 자유롭게 할 수 있도록 권한을 줍니다. 이건 특히나 'undo'와 'redo'와 관련 있는 부분입니다. 사용자들은 반드시 "되돌아가기"와 같은 기능을 통해 자신의 실수를 아무 거리낌 없이 되돌릴 수 있어야 합니다.

좋은 사례 : Gmail의 전송 취소

Gmail의 메일 전송 취소 버튼

4. 일관성과 기준(CONSISTENCY AND STANDARDS)

하나의 관습이 된 것들이 많습니다. 이런 '관습'은 당신의 디자인에서 좀처럼 깨지기 어려운 좋은 아이디어입니다. 예를 들어, 사람들은 중요하게 생각되는 부분에 다른 색상으로 표시하거나 밑줄을 칩니다. (아님 둘 다 하거나) 이런 기준은 다른 분야에서도 많이 쓰입니다. 어떤 웹사이트를 훑어볼 때, "회사 소개(About Us)"를 찾지, "우리 팀에 대해서 알아보기(Get to know the team)"을 찾지 않는 것처럼.

우리 시스템 내에서도 일관성을 유지하는 게 중요합니다. 만약 메뉴가 스크린의 왼쪽 상단에 위치한다면 이건 항상 같은 자리에 있어야 하죠.

좋은 사례 : BBC IPLAYER

BBC 사이트는 몇 가지 기본 원칙을 웹사이트 내 잘 유지하고 있습니다. 메뉴와 로고는 일반적으로 예측 가능한 페이지에 위치하고 있습니다. 또, 확대(검색) 아이콘을 검색창에 박아뒀고 (텍스트와 함께 반복하면서도). 근데 또 흥미로운 건, 얘네가 이 규칙을 깨는 건 scrolling 하는 사이드 메뉴 쪽인데, 그래도 사실 사용하긴 쉽습니다. 큰 버튼을 박아둬서 사용자에게 어떤 일이 발생하는지 바로 알려주거든요. 이 내용들은 모든 페이지에 적용이 되어 있어 일관성을 유지합니다.

BBC iPlayer 페이지 내 일관성

5. 에러 방지(ERROR PREVENTION)

매번 문제가 발생하기 전에 방지하는 건 어렵지만, 가능하긴 합니다. 몇몇 대표적인 방법들이 있죠. 첫 번째, 디자인을 정말 깔끔하게 하는 겁니다. 예를 들어, "삭제"버튼은 "저장" 버튼과 정말 분리된 곳에 위치해있어야 하죠. 두 번째는, 유저가 실수를 저지른 것을 시스템적으로 인지해서 알려주는 겁니다.

물론, 행동의 결과가 크게 중요하지 않거나, 취소가 쉬운 상황이라면 사용자에게 이런 내용을 알려주는 게 불필요할 수 있습니다. 그래도 우리가 에러 상황에 대한 체크를 잘할 수 있다면, 사용자는 이런 부분에 대해 편리함(감사함)을 느낄 겁니다.

좋은 사례 : Gmail의 첨부파일 알림 기능

이 기능은 필자의 밥그릇을 여러 번 구했습니다! 메일을 작성하고 본문 중 첨부파일(attachment)란 내용이 있는데, 실제 메일 전송할 때 첨부파일이 없다면 Gmail은 알림을 줍니다. (개천재)

Gmail의 첨부파일 알림 기능

6. 기억을 해내기보단 쉽게/바로 알아볼 수 있게 하기(RECOGNITION RATHER THAN RECALL)

'추위'를 기억해내기보단 냉동창고 들어갔다 오는 게 훨씬 더 '인지'하기 쉽습니다. (의역을 한 부분인데, 원본은 "It’s a lot easier to recognise something when you see it, than it is to remember it cold."입니다. 한 문장으로 표현하자면 백문이 불여일견 아닐까 싶습니다.)

사용자에게 선택할 수 있는 기능(옵션)을 알아서 생각하게끔 하기보단, 선택할 수 있는 리스트가 주어지게끔 해야 합니다.

좋은 사례 : FOURSQUARE의 선택지

Foursquare은 유저가 어떤 것에 대해 관심이 있는지 알아야 유저에게 필요한/원하는 정보를 추천해줄 수 있습니다. 하지만, 그들은 어떤 거에 관심이 있는지 물어보지 않습니다. 그냥 인기 있는 키워드에 대해서 쭉 나열해주고, 사람들은 그냥 선택만 하면 됩니다.

FOURSQUARE의 선택지

7. 유연하고 효율적인 사용(FLEXIBILITY AND EFFICIENCY OF USE)

다양한 상황을 처리하기 위해선 유연한 디자인을 해야 합니다. 어떤 사용자는 숙련자일 수 있고, 어떤 사용자는 초보일 수 있습니다. 고로, 프로그램을 사용하는 데 있어 그들의 니즈와 숙련도는 다 다릅니다. 우리의 사용자는 모든 가능한 옵션을 보길 원할까요? 아니면 주된 기능만 보여주길 원할까요? 한 유저가 A라는 task만 수행하고, 다른 유저는 또 다른 B라는 task만 사용한다는 걸 안다면, 우리는 각 그룹에 맞춰 시스템을 수정해야 합니다.

좋은 사례 : WINDOW의 고급설정 (WINDOWS’ ADVANCED SETTINGS)

고급설정은 흔한 기능 중 하나입니다. 하지만 window의 경우, 간단한 기능만을 먼저 사용자에게 보여주고, 복잡한 설정의 경우 숨겨둡니다. 하지만, 바로 접근 가능한 quick link를 둬서 바로 접근 가능하게 해 뒀습니다. 초보 사용자들은 혼동할 필요 없고, 사용을 원하는 사용자만 쓸 수 있게요.

window의 고급설정

8. 이쁘고 간결한 디자인(AESTHETIC AND MINIMALIST DESIGN)

미니멀한 디자인은 사용자에게 보이는 모든 것이 필요하고 유용한 것만 확실하게 보여줍니다. 잡다한 요소로 인해 중요한 것은 쉽사리 잊힐 수 있습니다. 그래서 심플하게 유지하는 게 매우 중요합니다. 심미적인 부분을 고려하는 것도 중요하지만, 기능이 항상 더 앞서서 고려되어야 합니다. 이쁜 홈페이지는 사용하기 힘들죠.

좋은 사례 : Google의 검색 페이지

Google의 검색 페이지에 아름다운 간결함이 있습니다. 사용자가 원하는 모든 걸 제공합니다. (조금 더 제공하기도 합니다.) google은 기념일에 맞춰 자신들의 로고를 바꾸면서 자신의 특색을 보여줍니다. 아래 이미지는 2015년 국제 여성의 날 기념이었습니다.
이 화면에서 우린 또 #DearMe라는 캠페인 프로모션도 볼 수 있습니다. 구글은 이런 일을 자주 하진 않습니다. 검색 화면에 여백의 미가 없게 무언가를 때려 박는 업무를 하지 않는다는 것을 의미하고, 홍보하기로 한 결정한 내용에 대해서만 힘을 주는 방식입니다. - Google이 신성하다고 여길 정도인 white space에 무언가가 채워진다면 그건 정말 중요한 겁니다.

그들은 심미적인걸 추가하여 사용 경험이 잘 이뤄질 수 있게 합니다. 검색창은 항상 같은 곳에 위치하여 사용자가 급한 상황에서 편하게 찾아서 사용할 수 있게 하여 사용자 경험이 분산되지 않도록 합니다. 하지만 사용자가 좀 더 시간이 있다면, 구글 가이드는 사용자에게 좀 더 주목할만한 가치가 있는 기능을 안내합니다.

Google 검색창

9. 사용 중 에러에 대한 인지, 진단, 복구 과정을 도와야 합니다. (HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS)

몇몇 에러는 피할 수 없습니다. 그럴 땐 이게 뭔 상황인지 사용자가 쉽게 볼 수 있고, 해결책을 찾을 수 있게끔 시스템을 디자인해야 합니다. 언어 역시 이 문제에선 핵심 key 중 하나입니다 - error메시지는 성가신 사용자 경험 중 하나입니다. 하지만, 어찌 보면 사용자와 대화할 수 있는 기회 중 하나죠. 그니까 이건 더 잘해야 해요. 이건 사용자를 해결책으로 안내하는 좋은 기회이고, 그들이 다시 서비스를 사용할 수 있게 해줘야 합니다.

좋은 사례 : iStockphoto의 404 page

귀여운 404page는 대세 중 하나죠. 아래 예는 iStockphoto에서 가져왔습니다. 얘네들은 자기네가 보유한 아티스트의 작품 중 하나를 가져와서 404page를 보여줍니다. 그리고 사람에게 친숙한 형태의 언어로 해당 문제는 서비스에서 발생한 게 아니라고 암시합니다. 그리곤 문제를 해결할 수 있게 몇 가지 도움이 될만한 링크를 줍니다.

iStockphot의 404page

좋은 사례 : Mailchimp의 로그인 화면에서의 에러 메시지

이 정도까지 하는 사이트는 보기 힘들죠 - Mailchimp는 로그인 화면에서 에러가 난 경우 도움이 되는 메시지를 열심히 띄웁니다. 로그인 화면에서 잘못된 정보를 입력한다면 상황에 맞는 에러 메시지를 줍니다. 비밀번호가 틀린 건지, 아님 유저 아이디가 잘못되었는지 말이죠. 고로, 사용자가 어떤 게 잘못되어서 로그인이 안 되는 건지 궁금해할 필요가 없습니다. 해결책을 바로 알 수 있는 거죠 (정보 자체를 까먹었을 땐 해결 link를 바로 줍니다.)

Mailchimp의 로그인 화면 내 에러 메시지

10. 도움말과 문서(HELP AND DOCUMENTATION)

이상적으론, 모든 시스템은 도움말이 없어도 잘 돌아가야겠지만, 현실적으로 불가능하죠. 도움말과 설명서가 필요할 땐, 쉽게 접근 가능하고 쉽게 이해할 수 있어야 하고 또 정확해야 합니다.

좋은 사례 : ETSY의 도움말 페이지

이 페이지는 아름답게 디자인되었어요. 상단에 검색창이 있고 (그 안에는 어떻게 사용하는지 설명도 되어있고) 간략하게 카테고리를 나눠서 자주 하는 질문에 바로 접근할 수 있게 link 역시 달아두었습니다. 첫 번째로 카테고리로 분류가 되어있고, 큰 아이콘을 제공합니다. 그리고 디테일한 도움말과 다음으로 FAQ, 게시판, 사이트 정책으로 바로 가게 되는 과정입니다. 마지막까지 적절한 답변을 못 찾는다면 contact link를 줍니다.

Etsy의 도움말 페이지

다 했다!

이 글을 브런치로 옮기면서 해당 내용을 다시 읽어보니까, 당시 혼동되었던 개념이 더 이해되는 것 같다. 다음 앱 업데이트 땐 더 나은 개선안을 도출할 수 있을 것 같다.

아무튼, 위 개념을 공부하면서 우린 앱 평가, 개선안을 정리하는 데 필요한 기준을 가질 수 있었다. (덕분에 업데이트 범위라던 지 일정에 대한 합의가 수월했다.) 아래 정리된 일정에 따라서 현재 앱 업데이트를 진행하고 있다. 그러면서 난 다음 단계 (유저 리서치 및 콘텐츠 성격의 서비스 고도화)를 준비할 수 있게 되었다.

평가 이후 설립된 디자인 일정

다음 글은 유저 리서치에 대한 내용을 번역하려고 한다. (내가 다음에 할 일이어서) 다른 사람에게 도움이 되길 바라고, 혹시 수정이 필요한 부분이 있다면 편하게 피드백 주세요. 확인하는 대로 수정하도록 하겠습니다!

마지막으로, 원문 하단에 HCI에서는 어떻게 휴리스틱 평가를 하는지에 대한 내용이 있어 이 부분도 번역을 하였습니다. 다만, 이 내용은 위 내용보다 이해하기가 어려워서 제가 봐도 해석한 글이 이상합니다. 꼭 이 부분을 유의해주세요!

HCI(Human Computer Interaction)에선 Usability를 위해 휴리스틱 평가를 어떻게 진행하는가

HCI usability를 위한 휴리스틱 평가를 따라 할 수 있는 간단한 과정이 있습니다.

우리가 어떤 테스트를 할지, 그리고 어떻게 하는지 알기 (Know What You Will Test and How)

어떤 형태의 usability test든 uesr research든 시작하기 전에 테스트의 목적이 명확해야 합니다. 담당자는 "내가 뭘 테스트할지" 명료하게 설명할 수 있어야 합니다. (전체 프로젝트를 할 건지, 회원가입 페이지만 할 건지 등) 어떻게 테스트할 건가요? 평가하는 사람(테스터)이 이걸 제대로 이해했다고 어떻게 장담할 수 있을까요?

우리의 사용자를 이해하기(Understand Your Users)

우리는 또한 우리 사용자에 대한 background를 알아야 합니다. 어떤 형태의 테스트에는 유저가 실제로 참여할 필요는 없습니다. 하지만, 평가하는 사람(테스터)이 어느 정도 실제 사용자처럼 행동할 수 있는 (대변할 수 있는) 사람이어야 합니다. 그래야 실제 타겟층이 뭘 원하는지 알 수 있고, interaction에서 어떻게 행동할지 예상하고, 결과를 얻을 수 있죠. 그래서 이 과정에서 테스터에게 페르소나를 제공하는 게 꽤나 유용합니다. 테스터가 실제 사용자의 관점에서 행동하지 않는다면 분석에 초점을 흐릴 거고, 우리의 제품을 개선하는데 필요한 인사이트를 얻지 못할 수 있죠.