본문 바로가기
PM 교육

[PM교육] UX/UI 디자인 기초 이론 (2): 휴리스틱 평가

by youuuu_h 2024. 12. 16.

[UX/UI 디자인 기초 이론 (2) : 휴리스틱 평가 ]

 

휴리스틱 평가 (Heuristic Evaluation)

 휴리스틱의 어원은 '발견하다'라는 의미의 그리스어이다. 휴리스틱 평가는 인간의 직관이나 경험에 기반하여 문제를 해결하거나 학습, 발견하는 방법을 지칭한다. 이미 고도화된 서비스보다는 런칭 직전의 서비스, 초기 단계의 시스템 개발이나 평가에 주로 사용된다. 개인의 주관적인 평가가 이루어지기 때문에 평가자의 지식이나 경험의 폭에 따라 결과가 달라질 수 있으며 계량적인 평가 자료를 만들기 힘들다는 단점이 있지만, 저렴한 비용으로 적은 수의 평가자를 투입해 비교적 정확한 결과를 얻을 수 있다는 장점이 있어 일반적으로 많이 사용된다. 휴리스틱 평가를 제안한 제이콥 닐슨은 앞에서 제시한 품질 요소를 평가하고 사용자 인터페이스의 문제점을 파악하기 위해 다음과 같은 10개의 평가 척도를 제시했다.

 


휴리스틱 평가 척도 10가지 

1. 시스템 상태의 시각화 (Visivility of system status) 

시스템이 진행 중인 상황에 대한 정보를 적절한 피드백을 통해 사용자에게 계속 제공해야 한다. 대표적으로 스켈레톤 UI가 제공되는가 확인할 수 있다. 스켈레톤 UI는 실제 데이터가 렌더링 되기 전에 보이게 될 화면의 윤곽을 먼저 그려주는 로딩 애니메이션이다. 이를 통해 사용자는 자신이 실행한 작업의 상탤르 확인하고 별도의 노력 없이 대안을 선택할 수 있다. 또한 사용자의 이탈을 막고, '어떤 것들이 보여질 것이다'라고 미리 알려주는 효과를 준다.

Facebook 스켈레톤 UI

 

'시스템 상태의 시각화'를 평가하기 위해 3가지의 항목을 확인할 수 있다. 

  • 피드백의 존재 유무: 사용자의 행동에 반응하는가?
  • 피드백의 명확성: 사용자가 자신의 행동을 확인할 수 있는가?
  • 피드백의 즉시성: 사용자의 행동에 대한 반응 속도가 적절한가?

 

2. 현실 세계와 일치하는 시스템 (Match between system and real world)

시스템이 현실 세계와 동떨어진 느낌이 들지 않도록 친숙한 단어와 문구, 개념을 사용해야 하며, 시스템 중심이 아닌 사용자 중심으로 현실 세계의 관례를 따라야 한다. 사용자가 텍스트뿐 아니라 아이콘, 메뉴, 명령어, 그룹핑, 시각화된 형태 등을 모두 직관적으로 이해할 수 있어야 한다.  따라서 '실제 세상과의 문자 부합 정도', '실제 세상과의 은유 부합 정도', '상식적인 논리와의 부합 정도', '사용자 과업과의 부합 정도' , '예상되는 행위와의 부합 정도' 등을 평가한다. 

 

3. 자유와 주도권을 사용자에게 제공 (User Control and freedom)

사용자는 시스템의 기능을 선택하다가 언제든 실수를 할 수 있다. 그러므로 의도하지 않은 상태가 되었을 때 언제든지 취소하거나 재실행할 수 있어야 한다. 즉, 사용자가 언제든 중단할 수 있도록 취소를 제공해야 하고, 자주 사용하지 않는 작업에는 설명을 제공해 실수를 방지할 수 있게 해야 한다. 초보 PM이 흔히 하는 실수로 '뒤로가기'버튼을 생략하는 경우가 많다. 이러한 부분에서 실수하지 않도록 유의해야 한다. 

  • 일반적인 주도권: 사용자가 시스템을 통제하고 있음을 알 수 있는가?
  • 취소 가능성: 사용자가 선택한 행동을 번복할 수 있는가?
  • 사용자의 자유도: 다양한 방식으로 작업을 수행할 수 있는가?  

 

4. 일관성과 표준성 (Consistency and standards)

사용자가 혼란스럽지 않도록 시스템에서 사용하는 용어나 정보 표현 방법, 인터페이스 등의 일관성을 유지해야 한다. 동일한 상황에서 상이한 말, 상태, 작용을 제공하여 사용자에게 혼란을 주는 일이 없어야 하며 특히 용어의 일관성을 유지해야 한다. 예를 들면 '비밀번호'와 '패스워드'가 동일한 의미라고 하여 통일하지 않고 페이지마다 다르게 사용해서는 안된다. 

'일관성 있는 이름', '일관성 있는 정보', '일관성 있는 구조' , '일관성 있는 표현 방법'을 사용해야한다. 

 

5. 오류 예방 (Error prevention) 

오류가 발생한 후에 정확한 안내 메시지나 이미지를 제공하는 것도 중요하지만, 사용자가 실수할 수 있는 상황을 예측하여 문제 상황을 예방하는 것도 중요하다. 오류가 발생하기 쉬운 조건을 제시하거나, 오류 상황을 미리 점검해 사용자가 작업을 진행하기 전에 확인할 수 있도록 경고해야 한다. 예를 들어, 로그인 페이지에서 비밀번호 임력 필드에 '눈' 아이콘을 통해 비밀번호 표시/숨김 기능을 제공하는 것은 사용자의 실수를 예방하는 하나의 방법이기도 하다. 

  • 오류 발생 확률 낮추기: 사용자가 혼동할 만한 요소를 최소화하고 있는가?
  • 오류가 발생하기 쉬운 것은 보유주지 않기: 선택 불가능한 것이 명확히 구분되는가?
  • 심각한 오류 발생 경고: 결과 경고, 재확인 등의 알림을 제공하는가?
  • 예상 입력 값 제공: 필드마다 예측 가능한 입력 정보와 정보의 양을 제시하고 있는가?

 6. 직관적으로 이해할 수 있는 디자인 (Recognition rather than recall) 

시스템을 이용하기 위해 암기해야 하는 것이 있다면 사용자는 부담을 느끼게 된다.  그러므로 이해하거나 기억하기 위해 노력하지 않고도 직관적으로 사용할 수 있도록 시스템을 시각화해야 한다. 유사한 항목은 그룹으로 묶어 구분하고, 계층 구조와 각 요소를 잘 알아볼 수 있도록 시각적으로 명확히 구분하는 것이 좋다. 

 

해당 항목을 정확히 이해하기 위해  '게슈탈트 이론'에 대해 함께 이해하면 좋다. 

 전체는 부분의 합과 다르다


게슈탈트 이론에 따르면, 사람은 전체 이미지를 각 부분들 사이의 상호관계와 맥락 속에서 지각한다. 사람은 전체 이미지를 각 부분들 사이의 상호관계와 맥락 속에서 지각을 한다. 부분 혹은 요소의 의미가 고정되어 있지 않고 이들이 모인 전체에 따라 달라진다는 것이다. 인간이 형태를 지각하는 원리에는 크게 근접성, 유사성, 폐쇄성, 연속성, 전경과 배경이 있다. 

 

정리하자면 유리스틱 평가에 따른 직관적인 디자인을 하기 위해서는 이론적인 부분보다 다양한 디자인 래퍼런스를 보고 디자인 감각을 키우는 것이 실질적으로 중요하다. 그러나, 커뮤니케이션을 통해 누군가를 설득해야하는 PM과 디자이너에게 게슈탈트 이론을 이해하는 것은 디자인 결과물에 대한 논리적인 접근을 가능하게 하고 당위성을 부여할 수 있게 한다. 

 

7.  유연성과 효율성 (Flexibility and efficiency of use) 

누구나 효과적으로 사용할 수 있도록 시스템 구조가 유연해야 한다. 사용자의 전문성에 따라 기본 명령어 외의 다양한 매개변수를 이용할 수 있게 하거나, 마우스로 메뉴를 선택하는 대신 단축키를 사용할 수 있게 하는 것 등을 예시로 들 수 있다. 사용자가 시스템 디폴트 값이나 스타일 등을 설정할 수 있도록 하는 것이 좋다.

 

8. 간결하고 미학적인 디자인 (Aesthetic and minimalist design)

불필요한 정보를 제거하고, 간결하고 미학적으로 아름답게 디자인해야 한다. 불필요한 정보는 과감하게 삭제하고 중요한 사항을 강조하는 것이 좋다. 

  • 심미성 제공: 색상, 서체, 이미지, 메뉴 등이 조화롭게 배치되어 있는가?
  • 최소한의 표현: 간결한 단어와 구조로 충분히 의미를 전달하고 있는가?
  • 최소한의 입력 요구: 중복되거나 불필요한 자료는 입력하지 않아도 되는가?

 

 9. 사용자 스스로 오류를 인식, 진단, 복구할 수 있도록 지원 (Help users recognize, diagnose, and recover from errors)

오류 예방도 중요하지만 오류가 발생했을 때의 상황도 중요하다. 사용자가 문제를 직면했을 때 스스로 오류 상황을 인식하고 대처할 수 있도록 올바른 방법을 제시해야 한다. 

 

10. 도움말과 설명서 제공(Help and documentation)

부가 설명 없이 시스템을 사용할 수 있다면 가장 좋겠지만, 그래도 도움말과 설명서는 필요하다. 사용자의 작업 방식에 초점을 맞춰 어떤 정보든 쉽게 찾을 수 있어야 하며, 구체적인 수행 단계를 나열하는 것도 좋지만 분량이 방대한 것은 바람직하지 않다. 

  • 도움말 내용: 상황에 맞고, 검색하기 쉬우며, 충분히 따라할 수 있는 내용인가?
  • 도움말 표현 방법: 도움말 기능이 눈에 잘 띄고, 인터페이스가 일관적인가?
  • 도움말과 시스템의 전환: 도움말과 원래 작업을 쉽게 오갈 수 있는가? 

 


휴리스틱 평가 실습 

휴리스틱 평가에 대해 공부하고, 실제로 천재교육의 'T셀파몰'을 대상으로 휴리스틱 평가를 진행해보았다. 소비자의 입장에서 진행한 평가이기 때문에 (5)오류 예방, (9)사용자가 스스로 오류 인식/진단/복구할 수 있도록 지원과 같은 항목에서는 문제첨을 찾는 것이 쉽지 않았다. 또한, 이미 구축되어 운영되어진지 오래된 서비스이기 때문에 (2)현실 세계와 일치하는 시스템 항목 같은 경우에도 이미 잘 갖추어져 있었다. 그래도 직접 평가를 진행하며 휴리스틱 평가가 얼마나 주관적인 결과를 도출시킬 수 있는지 직접 느껴볼 수 있어 의미있는 시간이었다.