brunch

라이킷 17 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by imRachel Sep 07. 2022

휴리스틱 평가 - 내가 만든 서비스에 적용해보기

적은 시간과 비용으로 서비스를 고도화하는 방법

지난 글에서는 UX가 무엇인지와 인지/인간공학의 개념에 대한 이야기를 다루었습니다.

이번 회차에서는 필자가 첫 프로젝트로 담당했던 협업 툴 서비스에 휴리스틱 평가 방법을 적용한 과정을 공유드리려고 합니다.

지난 호를 못 읽으신 분들이라면 아래 링크를 참고해주세요!

https://brunch.co.kr/@yoongg59/1

도대체 UX랑 UI가 뭐야? - UX 입문자들을 위해

UX 설계 원칙 기본서 | 브런치에 첫 포스트로 어떤 글을 쓸까 고민하다가 "UX디자인과 방법론"이라는 주제로 시작해 볼까 합니다. UX는 모바일의 등장으로 그 중요성이 더 화두가 되면서 사용자들

brunch.co.kr/@yoongg59/1

[Index]
01. 사용성 평가란?
02. 사용성 평가 방법의 종류
03. Jacob Nielson의 10가지 설계 원칙
- Visibility of system status
- Match between system and the real world
- 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

01. 사용성 평가란?

제품과 시스템을 사용자가 보다 쉽고 편리하게 조작할 수 있도록
인터페이스를 개발 또는 개선하기 위해 문제점을 찾아내고
개선안을 발굴하는 과학적 조사과정

휴리스틱 평가 방법을 설명하기에 앞서, 사용성 평가란 무엇인지에 대해 먼저 정의해보았습니다. UX 리서처는 담당 서비스에 사용성 평가를 하기 위해서 다양한 방법을 활용하는데요, 평가의 종류와 방법에 따라 적절한 시점에 가장 효과적인 평가 방법을 도입하는 것이 중요합니다.

보통의 회사들은 어느 정도 제품이 나오고 나면 너도 나도 사용성 평가를 진행하길 요구받습니다. 하지만, 요구를 할 뿐 왜 해야 하는지 잘 모르는 조직이 많습니다. 그냥 너도 나도 하니까 'UX 전문가'라는 조직에게 "어디 한 번 개선안을 찾아봐줄래?"라고 하는거죠.

하지만 우리는 단순히 요구 사항을 이행만 하는 것이 아니라, "우리가 이걸 왜 도입했고(어떤 점이 부족해서), 어떤 방법이 가장 효과가 있었고, 왜 그렇게 생각하는지"에 생각하고 정리하는 과정이 반드시 필요합니다.
(*그 이유는 다음 목차인 02. 사용성 평가 방법의 종류에서 설명드리도록 하겠습니다.)

사용성 평가의 이유

1) 상세한 문제점 진단 및 개선 방향 제시
2) 평가 과정에서 발견된 이슈의 중요도 판단
3) 경쟁시장에서 자사 제품이 경쟁적 우세를 획득하도록 함
4) 위험 요소의 최소화

02. 사용성 평가 방법의 종류

2.1. 분석적 평가 방법

HCI 개론, 김진우 (2012)

사용성 평가 방법은 크게 두 가지를 분류할 수 있습니다. 첫 번째로는 분석적 평가 방법인데요, 실제 사용자를 참여시키지 않고 이미 만들어진 또는 앞으로 만들어질 시스템을 평가하는 방법입니다. '사용자가 우리 서비스를 이용한다면 어떤 문제점을 가질 것이다'라는 관점에서 축적된 경험과 고정관념을 기반으로 일반적으로 전문가가 진행합니다. 이는 예측적 평가 방법이기 때문에 정답이 없으며, 사용자가 직접 시스템을 사용하지 않아도 되기 때문에 개발 초기 단계에서 평가를 진행할 수 있는 방법입니다.

이 글에서 중점적으로 설명할 '휴리스틱 평가 방법'이 바로 분석적 평가 방법에 해당합니다. 휴리스틱(heuristics)은 간단히 말하면 어림짐작, 직관, 대충 내린 결정이라고도 할 수 있는데요, 시간은 촉박한 가운데, 저비용을 쓰고 싶은 초기 스타트업에 도입했을 때 효과적입니다. 이 검사법은 빠르고 합리적이면서 그럼에도 효과는 좋은 편이지만, 다양한 변수에 완벽한 의사 결정을 하기에는 다소 제한적입니다.

분석적 평가 방법

- 실제 사용자가 아닌 전문가가 시스템을 평가하는 것
1) 검사법 : 전문가가 평가 척도에 따라 평가
2) 모형법 : 사용자가 생각하고 있을 것으로 예상되는 모형을 구축하고 그 모형을 따라 봉착하는 문제점을 분석
- 일반적으로 검사법을 많이 사용하며, 실증적 평가 방법에 비해 상대적으로 비용이 저렴함

2.2. 실증적 평가 방법

HCI 개론, 김진우 (2012)

분석적 평가 방법을 정리하면서 '실증평가'에 대해 잠깐 언급했는데요, 이는 분석적 평가와는 다르게 실제 사용자를 대상으로 이미 만들어진 또는 앞으로 만들어질 시스템을 평가하는 방법입니다. 현업에서는 주로 UT(Usability testing)라고 부르죠.

일반적으로 정해진 방법론이나 자세한 평가척도를 가지고 특정 제품이나 서비스를 평가하는 정규 평가 방법이 있으며, 그 외의 비정규 평가 방법이 있습니다.

실증적 평가 방법

- 실제 사용자를 대상으로 시스템을 평가하는 것
1) 정규 평가
- 실험실 평가 : 실험실에서 통제 하에 진행
- 성과평가 : 시스템을 사용자가 얼마나 빠른 시간과 적은 오류로 과업을 달성하는가를 평가
- 과정평가 : 시스템을 사용하는 과정에서 사용자가 어떤 생각을 하고 어떤 어려움을 겪었는가를 평가
- 현장평가 : 현장에서 진행하는 FGI, 맥락적 IDI, 현장 관찰법 등

2) 비정규 평가
- 단기평가 : 사전지식이 없는 사용자의 시스템 초기에 대한평가
- 장기평가 : 극단적 상황에서 장기적인 시스템 평가
- 파괴평가 : 사용자가 시스템의 오류를 발생하게 만들고 이 과정에서 시스템의 문제점 평가
- 경쟁적 평가 : 같은 시스템을 제공받아 누가 얼마나 많은 문제점을 발견하는지 경쟁시키는 평가

오늘은 분석적 평가 방법 중, 휴리스틱 적용 사례에 대해 설명드리는 글이니 본론으로 넘어가겠습니다.

03. Jacob Nielson의 10가지 설계 원칙

3.1. 알기 쉬운 시스템의 상태 (Visibility of system status)

협업툴 WAPL의 PC웹 버전

시스템은 적절한 피드백을 통해 반응 시점에 사용자에게 무슨 일이 일어나고 있는지 알려주어야 합니다.

그림에 대한 예시는 첨부 파일을 채팅방에 드래그 앤 드롭해서 공유할 수 있는 기능인데요

이 때, 어느 영역에서 드롭 액션을 취해야 정확하게 공유될 수 있을지를 해당 영역에 컬러 레이어를 생성함으로써 범위를 알려주는 적절한 피드백 방법입니다.

1. 0.1sec~1sec : 시스템 결과가 바로 나타나는 것처럼 느낌

2. 1sec~ : 속도가 느리고 시스템이 멈춘 것처럼 느낌 (재사용 의지를 심각하게 저하시킬 수 있음)

또 하나는 스플래쉬나 대기 상태에서 로딩 중 화면을 제공하는 사례인데요, 인간은 보통 1초가 넘어가면 답답함을 느낀다고 합니다. 그래서 사용자에게 지금의 상태가 오류가 아니고, 다음으로 진행되는 과정에서 지루함을 느끼지 않도록 하는 것 또한 UX 설계 시 고려해야할 사항이라고 볼 수 있습니다.

3.2. 실제 사용 환경에 적합한 시스템 (Match between system & the real world)

(좌) 현실에서 사용하는 메타포를 그대로 아이콘화 시킨 경우, (우) 추상적인 아이콘

두 번째는 실 세계와 시스템이 혼돈되지 않도록 디자인해야 한다는 것입니다. 시스템 중심이 아니라, 사용자 중심으로 현실 세계의 관례를 적용해야 한다는 것인데요, 현실에서 사용하는 메타포를 그대로 아이콘화 시킨 것이 그 적용 방법이라 할 수 있습니다. 이에 반해 추상적인 아이콘은 학습을 통해 이해해야 하는데요, 추상적인 아이콘을 보완하기 위해서 툴 팁으로 버튼 이름을 보여주는 방법을 제공하거나, 이후에는 학습을 통해 이해하고 해당 액션을 취할 수 있도록 유저 스토리를 구성하는 방법도 있습니다.

사용자의 실제 환경과 유사하고 친숙한 단어와 문구, 개념 등을 사용하여 자연스럽고 논리적인 정보를 제공

현실에서 사용하는 친숙한 문구 사용, 사용자 친화적인 카피 사용 예시

서비스 사용자에게 친절한 카피 예시 (서브 메시지 내용)

아이콘뿐만 아니라, 용어가 문구에서도 사용자에게 친숙한 카피를 제공할 수 있습니다. 그림에 대한 예시로, 서브 메시지 내용이 "액세스를 허용한 후 새로고침 해주세요"라고 알려주는 것보다 '액세스 허용 방법을 알려주는'카피를 제공하는 것이 좀 더 사용자 친화적이라고 할 수 있습니다.

3.3. 일관성과 표준화 (Consistency and Standards)

(좌) HyperMeeting 앱 다른 성격의 Alert 내 [cancel]/[confirm] 버튼, (우) 화면 공유 시작/종료에 대해 일관성 있는 피드백

세 번째는 일관성과 표준화입니다. 각종 정보, 피드백 등 정보에 대한 표현이 일관성 있게 제공되어야 합니다.예시로 하이퍼 미팅에서 상황에 맞는 버튼의 네임과 위치를 일괄성 있게 제공하고 있으며, 상황에 맞는 피드백 팝업을 제공하는 것을 표준화 정책으로 삼았습니다.

동일한 상황에서 상이한 버튼과 피드백, 아이콘 등으로 UI의 일관성을 해쳐 사용자에게 혼란을 주어서는 안됨

3.4. 오류 예방 (Error Pervention)

네번째는 오류 예방입니다. 앞서 설명드린 휴먼에러를 고려한 설계인데요, 회원가입의 예시로 정보 입력없이 다음화면으로 넘어갈 때 오류 메시지를 제공한다든지, 정보 입력 시에 실시간으로 오류 여부 확인. 비밀번호와 같은 중요한 정보에 대해 한 번 더 입력을 받는 것을 제공함으로써 휴먼에러를 방지할 수 있습니다.

오류가 발생하기 쉬운 조건을 제거하거나 조건을 설정할 수 있는 사용자에게 작업을 취하기 전에 확인 옵션을 제공

3.5. 기억을 불러오지 않아도 이해할 수 있는 디자인 (Recognition than Recall)

WAPL 새 그룹 생성 화면에서 그룹에 대한 설명 제공

언제든지 다른 그룹으로 이동할 수 있으며, 현재 위치를 알려줌

다섯 번째로는 사용자가 시스템을 이용하는데 직관적이고 인지하기 쉽게 설계하는 원칙입니다. 예시로 와플을 사용하려면 워크스페이스 단위인 '그룹'을 생성해야 하는데요, 이에 대한 설명을 암기하지 않고 그냥 보고 사용할 수 있도록 해야 합니다.

또한 사용자는 언제든지 쉽게 다른 그룹으로 이동할 수 있어야 합니다. 좌측에서 스와이프 하면 그 기능을 제공하는데요, 상단에 현재 그룹임을 명확히 알려주는 것 또한 설계 고려 사항입니다.

시스템을 사용하기 위한 설명은 언제든지 적절할 때 볼 수 있거나 쉽게 찾을 수 있어야 함

3.6. 유연성과 효율성 (Flexibility and Effiency of Use)

(좌) WAPL 채팅 목록에서 자주 대화하는 룸을 상단으로 고정하는 기능, (우) 즐겨찾기

여섯번째로는 유연성과 효율성입니다. 시스템에 대해 초보자나 숙련자 모두 유연하게 사용할 수 있도록 제공해야합니다. 와플에서는 자주 사용하는 채팅방을 상단에 고정하는 기능을 제공하고 있으며, 즐겨찾기 설정 등을 통해 사용자가 직접 시스템의 여러가지 사양을 조정할 수 있게 제공하고 있습니다.

사용자가 자주 실행하는 기능은 사용자가 직접 효율화를 조정할 수 있도록 제공

3.7. 심플하고 아름다운 디자인 (Aesthetic and Minimalist Design)

Bad UX 사례 - 모바일에서 공유 기능 사용을 위해 직접 프렌즈의 이름을 입력해야하는 불편함

일곱번째로는 심플하고 간결한 디자인을 사용해야합니다. 이는 미학적으로 좋은 디자인을 제공하는 방법도 있지만 목표 달성까지 불필요한 단계를 줄여주는 것 또한 간결한 디자인이라고 할 수 있습니다.

나쁜 UX의 예로 일정 공유 기능 사용을 할 때, 직접 프렌즈의 이름을 기억하고 입력해야하는 번거로움이 있었습니다.

대안 UX - 추천 프렌즈 및 공유할 목록 제공

문제 해결을 위해, 자주 공유하는 사람들의 목록을 추천 프렌즈로 제시하거나, 공유할 목록을 선택할 수 있는 기능을 제공하는 방향으로 개선했습니다. 이전 방법보다는 훨씬 심플하고 친절한 설계라고 생각합니다:)

사용자의 의도와 달성목표를 수행하는 과정에 불필요하거나 상관없는 정보는 제거하고 심플한 디자인을 구현

3.8. 사용자 오류인식, 진단, 복구 지원 (Help users recognize, diagnose, and recover from errors)

로그인 실패 시 오류 메시지 호출

HyperMeeting 서버 오류 Alert

마지막으로는 오류의 인지 및 회복입니다. 문제에 맞닿았을 때 사용자들이 스스로 상황을 인식하고 대처할 수 있도록 방법을 제시해야합니다. 로그인 시 실패시, 눈에 잘 띄게 경고 메시지를 제공하거나 서버 오류 등 시스템에 문제가 생겼을 때, 문제에 대한 자세한 설명을 제공하고 오류 복구가 가능하도록 설계해야합니다.

오류 메시지는 쉽게 이해되어야 하며, 문제 상황을 정확히 알려주고, 그 해결책 또한 제공