08. UXUI 설계에서 사용성을 점검하는 방법 (2)
| 사용자 경험과 인터페이스(UI) 설계 사용성 평가방법- 휴리스틱 평가
지난 UXUI 설계에서 사용성을 점검하는 방법(1) 글에 이어, 사용성 평가 방법 중 흔히 활용되는 방법인 휴리스틱 평가에 대해서 설명하고자 한다.
1 휴리스틱 평가
휴리스틱 평가는 전문가가 지정된 지표로 서비스의 성능과 품질을 평가하는 방법으로 '전문가 평가'라고도 불린다. 서비스 디자이너, 사용자 경험 디자이너, 사용성 전문가, 인터페이스 전문가, 정보 구조 전문가 등 사용성과 관련된 전문가들이 서비스의 가치를 평가하는 가장 일반적인 품질 측정 방법이다.
지난 글에서 언급한 제이콥 닐슨은 UI 를 평가하는 휴리스틱 기준으로 다음 10가지를 제시하고 있다.
(1) 사용자에게 시스템의 현재 상태를 시각화하여 보여준다
(2) 현실 세계와 부합하도록 시스템을 설계한다
(3) 사용자에게 적절한 통제권을 부여한다
(4) 일관성과 표준성을 높인다
(5) 오류를 미연에 방지할 수 있도록 설계한다
(6) 사용자가 직관적으로 시스템을 사용할 수 있게 한다
(7) 사용자가 효율적이고 유연하게 사용할 수 있도록 한다
(8) 심미적이고 간결한 시스템 디자인을 제공한다
(9) 오류 발생 시 사용자 스스로 문제를 파악하고 수정할 수 있도록 설계한다
(10) 사용자에게 충분한 도움말을 제공한다
예시를 통해 자세히 알아보자
(1) 현재 상태 시각화
사용자에게 시스템의 현재 상태를 시각화하여 보여준다.
사용자에게 시스템의 현재 상태 정보를 시각적으로 제공하는 것은 사용자가 본인의 현재 위치를 파악하고 앞으로 주어질 본인의 과업을 예측하는 데에도 도움이 된다. 또 로딩이 지연될 경우에는 현재 상태가 오류가 아닌 정보 처리 중임을 사용자가 알 수 있게 하고, 사용 중 유저가 길을 잃지 않도록 한다.
프로세스가 여러 단계로 이루어져 있는 기능(회원가입, 예약 등) 이나 정보의 뎁스가 복잡한 페이지, 처리시간이 길게 소요되는 페이지 등 대부분의 페이지에서 고려되는 기준이다.
먼저 첫번째 사진인 메가박스 영화예매 페이지에는 상단에 '극장선택' 이라는 현재 단계 상태를 표기한다. 이런 식으로 페이지에 타이틀을 표기하는 방식은 거의 모든 모바일 서비스에서 사용하고 있다. 현재 페이지의 주요 기능이나 목적, 단계 등을 표기하여 사용자가 과업을 빠르게 파악할 수 있도록 돕는다.
중간 사진은 구글 검색결과를 출력하는 중간에 화면을 캡처한 사진이다. 입력한 검색어의 정보를 처리하는 중이기 때문에 하단에 프로그레스바로 현재 진행 상태를 보여주고 있다. 이로 인해 사용자는 검색 결과 화면이 출력되기 까지 앞으로 어느 정도의 시간이 소요될 지 파악할 수 있다.
마지막 사진은 핀터레스트의 스피너이다. 정보 처리 중인 상태를 시각적으로 보여준다는 점에서 구글 프로그레스바와 역할은 같지만, 남은 시간을 가늠할 수 없다는 것이 차이점이다. 이런 스피너는 브랜드의 로고 또는 상징적인 일러스트를 활용해 아이덴티티를 구축하는 데에도 활용된다.
왼쪽은 구인구직 서비스인 사람인의 회원가입 화면이다.
사람인의 회원가입 화면은 크게 2단계(본인인증-계정정보 입력)로 나뉘어져 있는데, 그 중 첫번째 단계인 본인인증 페이지이다. 타이틀 우측에 '1/2' 라고 현재 진행상태를 표시하고 있다. 사용자가 이를 보고 현재 단계 이후에 한 단계가 더 남아있음을 추측할 수 있다.
오른쪽은 정신건강 관리 어플리케이션인 '트로스트' 이다. AI 챗봇을 통해 적합한 상담사를 매칭해주는 기능인데, AI가 답변을 출력하느라 지연되는 시간 동안 '답변을 고민하고 있어요!' 라는 문구를 띄워 현재 진행상태를 알려준다. 프로그레스 인디케이터와 비슷한 역할을, '정신상담이 필요한 사용자'라는 사용자 특성에 맞춰 대화형태로 감성적이게 표현하고 있다.
(2) 현실세계와 부합
현실 세계와 부합하도록 시스템을 설계한다
사용자가 온/오프라인 사이의 간극을 느끼지 않도록 현실세계, 즉 오프라인 세계의 언어나 시스템을 반영해야 한다. 쉽게 말하자면 커머스 사이트에서 구매예정인 상품을 담을 때 '장바구니' 라는 단어를 사용하는 것, 저장을 뜻하는 아이콘으로 플로피디스크 모양을 메타포로 사용하는 것, '앨범', '카메라', '나침반', '계산기' 등 실제 물건의 명칭을 그대로 사용하는 것 등이 현실세계와 부합하도록 설계한 예시이다.
이미 친숙한 단어나 이미지를 메타포로 사용함으로써 낯선 기능을 만났을 때 용도를 쉽게 유추하고 받아들일 수 있도록 한다.
MS Office 파워포인트의 저장 아이콘+ 그런데 요즘 젊은이들은 플로피 디스크가 뭔지 몰라서 저장 아이콘이 왜 저렇게 생겼는지 모른다면서요...?
내가 벌써 세대차이를 느낀다니...
[문서 저장 단추는 왜 자판기 모양일까? - 우리 문화신문]
(3) 사용자의 통제권
사용자에게 적절한 통제권을 부여한다
사용자에게 통제권을 부여한다는 것은 , 사용자가 시스템을 일방적으로 수용하지 않고 능동적으로 사용할 수 있도록 돕는 것을 의미한다. 어느 페이지에서나 홈 또는 메뉴로 빠르게 이동할 수 있도록 네비게이션을 제공하고, 임시저장 또는 동작 취소 기능을 통해 사용자가 서비스를 본인에게 맞춰 주도적으로 사용할 수 있도록 한다.
위 첫번째 사진은 배달의 민족이지만, 첨부된 다른 이미지를 보면 알 수 있듯이 거의 모든 어플리케이션에는 상단에 네비게이션바가 위치한다. 사용자가 쉽게 이전 화면 또는 원하는 화면으로 이동하여 시스템의 진행을 통제할 수 있도록 하는 역할이다.
가운데 사진은 여성건강 어플리케이션 '헤이문'의 회원가입 페이지이다.
회원가입 중 휴대폰 번호를 통해 본인인증을 하는 페이지인데, 이미 회원가입된 사용자를 위해 인풋 아래에 '이미 회원이신가요?' 텍스트버튼을 배치했다. 바로 로그인 페이지로 넘어갈 수 있는 버튼으로, 실수로 회원가입 페이지에 진입한 사용자가 이전 화면으로 다시 돌아갈 필요 없이 원하는 로그인 화면으로 바로 이동할 수 있게 하고 있다.
세번째 사진은 구글 지메일에서 메일 전송 시 플로팅되는 실행취소 버튼이다. 메일 전송 직후에 뜨는 '전송했습니다' 토스트팝업에 버튼을 위치함으로써 사용자가 빠르게 전송 행위를 취소할 수 있게 만들었다. 지메일에서는 전송 직후에 실행취소를 제공하고 있는 듯 한데, 필자가 사용하고 있는 사내 메일 시스템에서는 수신인이 메일을 열람하기 전까지 언제든 발송을 취소할 수 있다. 수신인별로 개별 취소할 수 있어 굉장히 유용한 기능이다.
당근에서는 판매물품 게시글을 올릴 때 임시저장 기능을 제공한다. 당근뿐만 아니라 브런치스토리, 블로그, 인스타그램 등 콘텐츠를 작성하는 서비스에서는 대부분 제공하는 기능이다. 사용자가 한 호흡에 콘텐츠를 전부 작성해야 하는 부담을 덜고 사용자가 원하는 시기에 언제든 사용을 멈추거나 이어서 시작할 수 있도록 통제권을 부여한다.
사람인 등 채용 서비스에서는 이력서를 공개할 때 '열람제한 기업' 을 설정할 수 있도록 한다. 이전 직장, 현재 직장 등 내 구직 상태와 이력서를 공개하고 싶지 않은 기업이 있을 때 사용하는 장치이다. '이력서 공개'라는 시스템을 구직자의 개인적인 사정에 맞춰 제한하여 사용할 수 있도록 돕는다.
(4) 일관성과 표준성
일관성과 표준성을 높인다.
서비스의 일관성과 표준성을 높이는 것은 사용자에게 안정감을 주고 사용 시 혼란을 방지한다. 버튼, 폰트 등 요소의 형태를 통일하는 것 뿐만 아니라 같은 패턴을 띄는 페이지의 레이아웃 또는 플로우도 일관적으로 유지하여 사용자의 혼란과 오류를 방지한다. 브랜드의 아이덴티티를 통일해 서비스의 정체성을 강화할 수도 있다.
일관성과 표준성을 유지하기 위해선 디자인 시스템, 스타일 가이드를 서비스 별로 만들어 사용하는 것이 좋다.
예시로 참고하기 좋은 가이드 몇 개를 아래에 첨부한다.
3번의 정부UXUI가이드는 지난 2024년 4월 17일에 새로 업데이트된 개정판으로, 정부서비스에 적용되는 가이드라인이니만큼 전국민을 대상으로 한 사용성에 대해 깊은 고민이 담겨있으니 읽어보면 좋을 것 같다.
(웹사이트 주소와 PDF 문서를 함께 첨부한다.)
1. 라인 디자인 시스템
2. 원티드 디자인 시스템
(5) 오류
오류를 미연에 방지할 수 있도록 설계한다
서비스를 사용하다보면 오류가 생기기 마련이다. 네트워크나 기술적인 문제로 불가피한 오류도 있지만 오탈자 입력이나 버튼을 잘못 클릭하는 등 사용자의 실수로 인하여 생기는 오류도 많다. 이런 오류는 불가피한 것이 아니기 때문에 미리 방지할 수 있는 장치가 필요하다. 인풋박스 사용 시 사용자에게 입력 조건을 상기시키거나 예시 문구를 플레이스 홀더로 사용하기도 하고, 입력한 정보가 맞는지 다시 확인할 수 있도록 하고, 삭제나 탈퇴 등 돌이킬 수 없는 동작을 처리하기 전에 사용자가 다시 한 번 확인할 수 있는 장치를 두기도 한다.
첫번째 사진은 '샐러드펫' 어플리케이션의 회원가입 페이지이다. 닉네임을 입력하는 인풋박스 하단에 '닉네임은 2~15자 내로 입력해주세요'라는 문구를 띄워 사용자가 데이터 조건에 맞게 닉네임을 입력하도록 안내하고 있다. 닉네임 입력 후 다음 단계로 넘어가는 과정에서 데이터의 오류를 사용자에게 알리고 수정하게 할 수도 있지만, 입력 전 그리고 입력 중간에 실시간으로 입력값의 유효성을 판단함으로써 오류가 일어나지 않도록 방지하고 있다.
두번째 '크몽' 어플리케이션의 회원가입 페이지를 보면 비밀번호 입력 인풋과 비밀번호 입력 확인 인풋이 있다. 많은 서비스에서 회원가입 시 이렇게 비밀번호를 두 번씩 입력하게 하는데, 사용자가 비밀번호를 입력할 때 오탈자로 인해 잘못된 비밀번호를 설정하지 않도록 하는 오류 방지 장치이다. 비밀번호 최초 입력 시 오탈자가 났고, 오탈자가 난 것을 모르고 넘어갔다고 해도 비밀번호 재입력 시 두 비밀번호를 대조하여 일치하는 지 확인하기 때문에 사용자는 본인의 실수를 깨닫고 수정할 수 있다.
세번째는 '인스타그램'에서 게시글 작성 중에 페이지를 이탈할 때 출력되는 모달이다. 현재 페이지를 벗어날 경우 작성 중이던 내용이 모두 삭제되니 다시 확인하고 임시저장 또는 삭제 후 이탈을 선택하라는 경고 모달이다. 삭제, 취소, 탈퇴 처럼 실행 시 다시 돌이킬 수 없는 중대한 기능은 이렇게 사용자에게 다시 한 번 상기시키는 것이 좋다. 비록 삭제/취소/탈퇴 기능 수행 전에 확인이라는 한 단계가 추가되어 프로세스가 길어지기는 하지만, 사용자가 실수로 이 기능을 실행해 돌이킬 수 없는 결과를 낳았을 경우 본 서비스가 상당히 부정적인 경험으로 기억될 수 있기 때문에 사용자에게 주의를 주는 단계가 필요하다.
(6) 직관적
사용자가 직관적으로 시스템을 사용할 수 있게 한다
서비스의 사용법을 공부하고 분석할 필요 없이 처음 접한 사용자도 사용에 문제가 없을만큼 직관적으로 서비스를 디자인해야 한다. 이전 글에서 언급한 제이콥닐스의 사용성 5대 요소 중 '학습성'과 유사한 개념이다. 시스템에서 사용자가 수행해야 하는 과업, 페이지에서 전달하고자 하는 정보 등을 쉽게 인지하고 사용할 수 있게 해야 한다.
첫번째로 아이폰 기본 어플리케이션인 '날씨' 에서는 날씨 정보를 직관적으로 전달한다.
어플 진입 시 상단에 크게 노출되는 나의 위치와 현재 날씨 정보가 가장 먼저 눈에 들어오고, 하단의 시간별 요일별 날씨 정보에 순차적으로 시선이 이어진다. 날씨 어플리케이션의 기본적인 기능인 날씨 정보를 필요한 정보만 군더더기 없이 전달하고, 레이아웃에 시각적으로 계층 구조를 두어 사용자가 시선을 어디로 두어야 할 지 혼란스럽지 않게 직관적으로 서비스를 제공한다.
두번째 사진인 영어학습 어플리케이션 '스픽'에서는 서비스 진입 시 오늘 진행해야 할 수업을 전면에 눈에 띄게 배치하고 있다. 학습 어플리케이션에서 가장 중요한 수업 진행을 직관적으로 안내하고 사용을 유도한다.
세번째 사진인 네이버 번역 서비스 '파파고' 에서는 마찬가지로 번역 기능이 가장 우선시 되어야 하는 서비스이기 때문에 '번역 내용 입력' 영역을 스크린에서 시선이 제일 먼저 닿는 위치에 배치했다.
(7) 효율적이고 유연한 사용
사용자가 효율적이고 유연하게 사용할 수 있도록 한다
같은 서비스를 사용하더라도, 사용자마다 자주 찾는 기능이 다르고 원하는 사용방식이 다를 수도 있을 것이다. 사용자가 자신의 상황과 니즈에 맞춰 서비스를 효율적이고 유연하게 사용할 수 있어야 한다. 단축키를 사용할 수 있도록 한다던가, 즐겨찾는 메뉴나 홈 인터페이스를 사용자가 직접 커스텀 하여 사용할 수 있게 제공하는 경우도 있다.
(8) 심미적이고 간결한 시스템 디자인
심미적이고 간결한 시스템 디자인을 제공한다
사용자가 페이지 내의 정보를 받아들이는 데 혼란이 없도록, 화면에 불필요한 정보나 부가 요소는 최대한 배제한 디자인을 제공한다. 대학시절 전공 교수님이 자주 하시던 말씀 중 하나가 '디자인은 더하는 게 아니라 빼는 것이다' 였다. 학생의 작업물을 평가할 때는 항상 이 요소는 여기 왜 필요한거지? 질문하셨고 딱히 쓰임새가 없고 가시성을 해치는 부가요소는 삭제하라는 피드백을 자주 주시곤 했다. 휴리스틱 평가 중 이 기준을 보면 교수님의 그 말씀이 자주 생각이 난다.
디자인을 하다보면 가끔 화면이 너무 허전한데? 싶어 화면에 무언가를 자꾸 추가해달라는 요구사항이 들어오곤 한다. 불필요한 부가 기능과 정보는 페이지에서 필수로 전달해야 하는 핵심 요소가 눈에 띄지 않게 방해하는 방해 요인이 될 수 있으니 항상 유의해야 한다.
개인적으로 간결하고 심미적이게 디자인이 잘 되었다고 판단되는 예시사진을 아래 첨부하겠다.
(9) 오류 발생 시 대처
오류 발생 시 사용자 스스로 문제를 파악하고 수정할 수 있도록 설계한다
(5)번에서 이야기했듯이 오류를 미연에 방지하는 것도 중요하지만, 오류가 발생했을 때 문제를 파악하고 상황에서 벗어날 수 있도록 설계를 하는 것 또한 중요하다. 오류가 발생한 원인을 사용자에게 정확히 고지하고, 벗어날 수 있는 해결방안을 설명하거나 해결할 수 있는 페이지로 연결하는 방법 등을 사용할 수 있다.
첫번째 사진은 아이폰에서 셀룰러데이터, 와이파이를 차단한 상태로 데이터가 필요한 어플리케이션에 진입했을 때 나타나는 오류 알림이다. '셀룰러 데이터가 꺼져 있음' 이라며 현재 오류상황의 원인을 고지하고, 이어서 해결 방법을 안내하며 문제를 해결할 수 있는 '설정' 페이지로 바로 연결될 수 있도록 경로를 제공하고 있다.
두번째 사진은 메리츠화재 어플리케이션을 서비스 점검시간에 진입했을 때 나타나는 오류 알림 페이지이다. 현재 시각은 서비스 점검 시간에 해당하기 때문에 서비스 진입이 불가한 상황을 안내하고, 문제가 해결되는 시간을 고지하여 사용자가 해결방법을 인지할 수 있게 돕고있다. ('메인화면으로 이동' 버튼이 존재하지만 해당 버튼을 클릭하면 현재와 동일한 오류 페이지로 이동되어서... 왜 존재하는지는 의문이다.)
세번째 사진은 토스뱅크에서 존재하지 않는 계좌번호로 송금하려고 할 때 나타나는 오류 메세지이다. '계좌번호를 다시 확인해주세요' 라고 출력되며 사용자가 수행해야 하는 해결방법만 안내하고 있지만, 계좌번호가 잘못되어서 송금할 수 없다는 의미를 내포하고 있다.
이 기준에서 제일 안 좋은 예는, 오류 발생 시 '앗 무언가가 잘못되었습니다!' 라던지 '오류코드:KF03000' 라는 식으로 일반 사용자가 직관적으로 이해할 수 없는 오류 상황을 안내하는 케이스이다. 정말정말 예기치 못한 오류가 발생했다고 하면 적어도 고객센터 번호나 챗봇 연결이라도 제공해야 한다고 생각한다. 경험상 이런 UX를 마주치면 사용자 입장에서 '어쩌라고...?' 라는 생각밖에 안 든다.
너가 알 수 없으면 내가 뭘 어떻게 하니...?(10) 도움말 제공
사용자에게 충분한 도움말을 제공한다
서비스가 아무리 서비스를 직관적으로 제공하려 해도, 사용법을 바로 파악하기 어렵거나 정확한 사용법 안내가 필요한 경우가 있다. 기계를 구매하면 제품 사용설명서가 동봉되듯이, 서비스에도 사용설명서 기능을 하는 도움말이 필요하다. 많은 서비스에서 고객센터나 공지사항, FAQ 등을 통해 도움말을 제공하고 있다.
휴리스틱 평가는 실무 중 서비스의 사용성을 검증된 기준으로 빠르게 평가할 수 있어 시간적, 비용적으로 경제적이다. 문제 발견 시 수정해야 하는 방향성을 빠르게 파악할 수 있고 개선방안에 대한 합리성 또한 판단하기 쉽다.
하지만 휴리스틱 평가가 바이블은 아니다.
사용자 없이 전문가만으로 빠르게 경제적으로 사용성을 평가하는 방법이다보니, 실제 사용자의 의견을 들을 수 없고 평가 기준 외의 시각으로는 서비스를 볼 수 없다는 단점이 있다. 실제 사용자의 의견을 들을 수 없다보니 우리 서비스만의 문제를 깊게 분석하기 어렵고, 인터페이스 외에 서비스를 경험하는 전체적인 고객경험(서비스를 인지하는 경로, 오프라인 경험, 경험 후 재진입 과정 등 인터페이스가 없는 경험 과정)에 대해서는 문제점을 파악하기 어렵다.
휴리스틱 평가는 분명 효율적인 사용성 검증방법이지만, 실제 사용자의 의견을 들을 수 없는 강력한 맹점이 있다. 각자의 상황에 맞게 에스노그라피, 설문조사 등 여러 방법론을 적절히 혼합하여 사용하면 좋을 것이다.
