by
Feb 06. 2024
닐슨 노먼 그룹의 사용성 휴리스틱 10가지-1
휴리스틱을 고려한 제품 만들기
인트로
며칠 전에 넛지의 개념과 활용 사례를 다룬 글을 업로드했다. 심리학과 관련된 개념을 다루기 위해 다양한 UX 사례를 찾아다녔는데, 자연스럽기 발걸음은 다시 닐슨 노먼 그룹 사이트로 향했다.
닐슨 노먼 그룹은 1998년에 설립되어 eBay, Google 등 글로벌 기업을 클라이언트로 가지고 있는 UX 컨설팅 회사다. 연혁이 오래된 만큼 공개적으로 제공하고 있는 자료 또한 방대한데, 나 또한 UX에 대한 자료를 찾아볼 때 자주 방문한다.
마침 이전 글에서 휴리스틱에 대한 얘기를 다뤘겠다 '사용성 휴리스틱'에 대한 글을 정리해 봤다.
닐슨 노먼 그룹의
사용성 휴리스틱 10가지-1
원본글: https://www.nngroup.com/articles/ten-usability-heuristics/
1. Visuality of System Status
직역하면 '시스템 상태의 가시성'이라고 할 수 있다. 모든 시스템은 사용자의 행동에 맞춰 적절한 피드백을 발생시킬 수 있도록 설계되어야 함을 의미한다. 이를 통해 사용자는 자신에게 현재 무슨 일이 일어나고 있는지 적절한 시점에 알 수 있어야 한다. 시스템 상태의 가시성은 이 원칙에서 등장한 말이다.
여기서 피드백이란 사용자에게 본인의 행동 결과에 대한 정보를 제공해 주는 것을 의미한다. 이때 사용자는 자신이 현재 처한 상태를 알아야 이전 상호 작용의 결과를 학습하고, 다음 단계를 결정할 수 있기 때문에 피드백을 주고받는 과정은 굉장히 중요한 역할을 한다.
이것은 예전이 내가 어떤 신청서를 작성하며 겪은 일례다. 화면에서 내용을 공을 들여 작성했다. 그리고 활성화된 [제출하기] 버튼 클릭했다. 하지만 아무런 반응이 없다. 몇 번 더 클릭하다 화면의 스크롤을 위로 올려봤다. 천천히 올려보니 필수값으로 입력해야 하는 한 항목의 입력창 하단에 '내용을 입력해 주세요.'라는 에러 메시지가 있는 것을 발견했다. 그제야 항목을 채우고 신청서를 제출할 수 있었다.
이는 항목을 놓치고 입력하지 않은 내 잘못이기도 하지만, 시스템에서 적절한 피드백 장치가 없었기 때문이 결과적으로 경험이 좋지 않았다. 필수 입력값을 누락한 상태로 [제출하기] 버튼을 클릭했을 때 1) 보통 모달, 토스트메시지로 필수값이 누락되었음을 알려주거나, 혹은 2) 필수 입력값을 누락한 항목으로 화면 스크롤을 이동해 주는 것처럼 약간의 사용성을 고려할 수 있었을 텐데 말이다.
대표적인 피드백 장치 ⓒ 327roy
이처럼 현재 사용자의 상태를 확인할 수 있는 적절한 피드백이 없으면 사용자는 더 이상의 절차를 진행하기 힘들어지는 경우가 있다. 그리고 이는 불쾌한 경험을 초래한다. 그렇기 때문에 우리는 항상 적절한 시간 내에 사용자에게 피드백을 제공하고, 사용자가 현재 상태를 인지하게 만들 필요가 있다.
2. Match Between System & Real World
직역하면 '시스템과 실제 세상과 일치'라고 할 수 있다. 대표적인 UI 디자인 원칙 중 하나인데, 흔히 '고객 관점'이라고 불리는 대표적인 개념이다.
이 디자인 원칙이 전하고자 하는 의미는 간단하다. 디자인은 사용자의 언어로 가치를 전달할 수 있어야 한다는 것이다. 우리끼리만 아는 단어나 디자인을 사용하기보단 사용자에게 친화적인 단어, 문장, 개념을 사용하고, 이를 실제 세상에서의 관례에 따라 자연스럽고 논리적인 순서로 배치해야 한다.
나침반과 나침반 앱 ⓒ 327roy비슷한 관점에서 스큐어모피즘Skeuomorphism이란 것이 있다. 스큐어모피즘이란 시각적 효과를 중시하며 대상의 질감을 보이는 그대로 구현하는 것에 중점을 두는 디자인 기법이다. 지금처럼 플랫한 UI가 트렌드가 되기 전 많은 스마트폰에서 찾아볼 수 있는 디자인 기법이기도 했다. 이 기법이 현대 기기에 적용되었을 때 가장 큰 장점은 사용자가 UI의 작동 방식을 배우고 기억하기 쉽다는 것이다.
인스타그램 아이콘 변천사 ⓒ 327roy3. User Control and Freedom
직역하면 '사용자 조작과 자유도'라고 할 수 있다. 사용자는 어떤 상황에서든 실수할 수 있다. 하지만 사용자의 실수가 사용자가 원하지 않는 상황에 그들을 내던질 때가 있다. 예를 들어 실수로 튜토리얼 영상 재생 버튼을 클릭해서, 원치 않게 긴 영상이 재생되는 것처럼 말이다. 그래서 사용자에게는 원하지 않는 상태를 벗어나기 위해 명확하게 표시된 '비상구'가 필요하다.
구글 스프레드시트 ⓒ 327roy 대표적으로 웹 브라우저의 뒤로 가기(Undo), 앞으로 가기(Redo)를 말할 수 있다. 이 기능 덕분에 다양한 툴을 사용할 때 부담이 덜하다. 실수하면 되돌리면 되니까! 이처럼 우리는 잘못된 사용을 대비한 상식적인 수준의 비상구를 고려할 필요가 있다.
4. Consistency and Standards
직역하면 '일관성과 표준'이라고 할 수 있다. 제이콥의 법칙과 맞닿아 있는 개념이다. 그러므로 여기서 일관성은 내부 일관성과 외부 일관성으로 나뉜다.
내부 일관성은 제품이나 제품군 내에서 일관성을 유지하는 것을 말한다. 예를 들어 디자이너가 제품의 주요 색상Primary color을 파란색으로 정했다. 그리고 이 색을 평소에 행동을 유도하기 위한(CTA) 버튼 등 위계가 높은 기능에 사용했다. 하지만 갑자기 다른 정적인 페이지에서 헤더의 제목이나 사진 캡션에서 이 색을 쓴다면 어떻게 될까? 제작자가 소비자에게 시각적으로 제안하던 의미를 위반하게 되며, 사용자는 혼란을 겪을 수 있다. 또한 내부 일관성이 유지가 안될 때, 제품의 퀄리티를 낮게 만드는 것 또한 주의할 필요가 있다.
외부 일관성은 제품 외부의 일관성을 유지하는 것을 말한다. 이는 업계에서 보편적으로 사용하는 UI 규칙을 따라야 하는 이유가 되기도 한다. 예를 들어 이커머스 사이트에서 볼 수 있는 '장바구니' 아이콘을 생각해 보자. 우리는 이미 이 아이콘이 장바구니처럼 구매를 고려 중인 제품을 담아두고 보관하는 용도라고 생각한다. 이미 예전부터 경험을 통해 학습했기 때문이다. 하지만 장바구니를 클릭했을 때 결제 화면으로 이동해 버리면 어떨까? 굉장히 어색할 것이다. 우리가 기대한 결과가 아니기 때문이다. 보편적으로 사용되는 사용자 패턴은 다양한 앱을 다운로드하고 사용해 보면 감이 생기기 마련이다. 하지만 처음에 어떻게 해야 할지 모르겠다면 Apple과 Material Design의 UI 가이드라인을 참고하는 것을 추천한다.
p.s.
하지만 종종 관례를 어기는 것이 더 가치 있을 때가 있다. 바로 혁신적이거나, 새로 제안할 가치가 있을 때다. 나의 경우에는 토스의 회원가입이 그러했다. 토스가 제안했던 회원가입 방법은 당시 다른 앱처럼 한 화면에서 모든 정보를 입력할 필요가 없었다. 눈앞에 보이는 것만 해치우면 되는 경험은 아직도 생생하게 머릿속에 남아있다.
https://toss.tech/article/toss-signup-process
5. Error Prevention
직역하면 '오류 방지'라고 할 수 있다. 오류를 방지하는 방법을 얘기하기 전에 사용자가 범할 수 있는 오류는 뭐가 있을까? 대표적으로 두 가지 유형이 있다. 미끄러짐Slips과 실수Mistakes다.
미끄러짐Slips은 사용자가 하나의 동작을 수행하려고 하지만 다른 동작(종종 유사한)을 수행하는 것을 의미한다. 예를 들어, "ㄱ"을 타이핑하려다 "ㄷ"을 타이핑하는 경우를 말할 수 있다. 혹은 샤워할 때 샴푸 대신 폼 클렌저를 실수로 머리카락에 바르는 것도 일종의 미끄러짐Slips이라고 할 수 있다. 일반적으로 사용자가 휴리스틱하게 의사결정을 하고 있을 때, 즉 그들이 당면한 작업에 주의하지 않을 때 자주 발생한다.
실수Mistakes는 사용자의 멘탈 모델과 시스템의 실제 목적이 일치하지 않을 때 발생하는 의식적인 오류(착오)를 의미한다. 이는 사용자가 진행하려 하는 작업에 대해 불완전하고 잘못된 정보를 가지고 있는 것으로 설명할 수 있다. 예를 들어 사용자가 서비스의 회색 버튼이 '비활성화Disabled 처리되어 사용할 수 없는 버튼'이라고 인지하고 있다고 가정해 보자. 하지만 서비스에서는 이 기능을 입력 초기화를 목적으로 사용하고 있었다. 사용자가 기능을 조작하게 되면 입력한 정보가 화면에서 모두 사라져서 당혹감을 느끼게 될 것이다.
DallE ⓒ 327roy