[내배캠] UX/UI 사전캠프 데일리 미션 3주차-1

미션1) UX/UI 아티클

🔗 출처

• UX 디자인을 위한 휴리스틱 평가
• https://www.emotion.co.kr/magazine/41/

✅ 요약

🔸 UX 방법론 필수 기법, 휴리스틱 평가

• 휴리스틱 평가는 사용성을 평가하는 것, 제품이 인간의 인지적 오류를 줄여줄 수 있는 방향으로 디자인되었는지, 유용한 정보를 포함하며 사용자가 제품 이용 과정에서 정서적 만족을 느끼는지를 함께 평가한다.

🔸 휴리스틱 평가란?

• 그리스어로 ‘발견하다’의 의미, 인터페이스 디자인에서 사용성의 문제를 찾기 위한 사용성 엔지니어링 방법론으로 일반적인 설계 법칙이다. ‘계획 - 평가자 결정 - 실행 - 분석’의 단계로 구성.
• 휴리스틱 준수 여부는 사용성 전문가들이 판단하고, 시스템 개발 혹은 평가에 이용된다.

🔸 제이콥 닐슨의 10가지 휴리스틱 평가가 이루어지는 방법

1. 시스템 상태의 시각화 (Visibility of System Status)
   • 시스템은 피드백을 통해 사용자에게 진행되고 있는 일에 대해 정보를 지속적으로 제공해야 함.
   • 아이콘 선택될 때 명확히 표시되는지, 키를 누를 때마다 피드백과 앱/화면의 목적에 부합하는 콘텐츠가 시각적 위계 관계에 맞게 명확히 표현되는지 등 (ex. 소프트웨어 및 앱 업데이트)
2. 실제 같은 표현 (Match Between System and the Real World)
   • 시스템에서 도출된 용어들이 아닌 사용자의 실제 단어와 문구 등을 사용
3. 사용자 제어 및 자유 (User Control and Freedom)
   • 사용자에게 책임 부여하고 작업을 자유롭게 할 수 있는 권한을 줘야한다. 반드시 ‘되돌아가기’와 같은 기능을 통해 실수를 되돌릴 수 있어야 한다.
4. 일관성과 기준 (Consistency and Standards)
   • UI 문구나 인터랙션 등이 페이지별로 다르면 안되고, 디자인 시스템과 같은 기준이 필요
   • T map’과 ‘카카오내비’, ‘네이버 지도’와 ‘카카오맵’, ’배달의 민족’과 ‘쿠팡이츠’, ‘11번가’와 ‘지마켓’은 서로 경쟁하되 공유해야 하는 시스템 속성을 갖고 있음.
5. 에러 방지 (Error Prevention)
   • 오류가 발생하기 쉬운 조건을 제지하거나, 오류를 확인하고 사용자에게 확인 옵션을 제공 (ex. 삭제버튼 클릭 시 의사 확인 팝업창 생성)
6. 기억보단 인식 (Recognition Rather than Recall)
   • 별도 학습 없이 쉽게 인식할 수 있어야 함.
   • 검색 바와 함께 연관 태그 모음을 같이 제공 (ex. 네이버 검색, 유튜브 검색 태그)
7. 유연하고 효율적인 사용 (Flexibility and Efficiency of Use)
   • 사용자 수준이 다를 수 있어 사용자 모두를 포괄할 수 있는 커스텀 기능을 통해 시스템의 유연함을 갖춰야 함. (ex.피그마 단축키)
8. 심미적이고 간결한 디자인 (Aesthetic and Minimalist Design)
   • 관련 없는, 불필요한 정보가 포함되지 않도록 콘텐츠/기능에 우선순위가 높은 것을 잘 제공하고 있는지 확인해야 함. (ex. 카카오 뱅크 - 기능을 표현한 이미지와 특징, 상품 이해)
9. 사용자가 오류를 인식, 진단, 복구하도록 지원 (Help Users Recognize, Diagnose, and Recover from Errors)
   • 사용자가 이해할 수 있는 언어로 문제를 정확히 표시 및 해결 방법 안내해야 함.
   • 일반적인 언어 표현, 하이라이트 같은 시각적인 요소 활용 (ex. 회원가입 시 비밀번호 설정 단계)
10. 도움말과 메뉴얼(Help and Documentation)
    • 사용자의 학습을 돕기 위한 도움말 제공 필요. 도움말은 쉬운 접근과 이해, 그리고 정확해야 함 (ex. 구글 도움말, 네이버앱 사용팀)

🔸 휴리스틱 평가 분석

1. 무엇을 어떻게 테스트 할지 파악
2. 타깃의 목적과 맥락등을 정의
3. 3~5명의 평가자 정하기
4. 휴리스틱 평가 지표 정의 (5~10개정도)
5. 선택된 과업 중 다룰 내용에 대해 평가자들에게 설명
6. 1차 진행 - 자유 사용하며, 분석 요소 발경
7. 2차 진행 - 휴리스틱에 따라 개별 요소를 면밀히 조사
8. 진행한 세션에 대해 설명 듣고, 종합한 분석 결과와 함께 수정 사항을 제안

🔸 왜 휴리스틱을 UX 디자인에 사용해야할까

• 정보 부족과 시간 제약으로 완벽한 의사결정을 할 수 없을 때, 이런 경우를 대비해 현실적으로 만족할 만한 수준의 빠르게 해결책에 접근하기 위한 방법론으로 자주 사용됨.

🔸 휴리스틱 평가의 장점과 한계점

• 장점
  1. 전문가 평가만으로 사용성 문제를 발견하고 해결방안을 도출
  2. 비용 및 시간을 단축
  3. 문제에 대한 우선 순위를 제시
  4. 인터페이스에 대한 문제와 솔루션을 빠르게 제공 및 신속한 수정가능
• 한계점
  1. 많은 지식과 전문성 필요
  2. 지식과 전문성을 모두 갖춘 전문가를 찾기 어려움
  3. 휴리스틱 평가 척도에 벗어나는 문제는 확인이 어려움
  4. 인터페이스에 대한 문제만 확인 가능, 서비스 전반에 대한 확인은 힘듦
  5. 고정관념을 기반으로 하기 때문에 판단 과정에서 편향이나 오류가 발생

💬 코멘트

휴리스틱 평가 10가지를 보면 내가 자주 사용하는 웹이나 컴퓨터에서 실제로 경험해본 것들이 많았다. 사용자가 어렵지 않게, 이해하기 쉽도록 매뉴얼화 되어있는 부분들이 어디에서나 적용할 수 있을 것 같고, 필요성을 느꼈다.

미션2) 웹 클론 알아보기

🔸 웹 클론이란?

• 존재하는 웹 페이지를 똑같이 따라 만들어 보는 작업을 의미
• 만들어진 웹을 가이드 삼아 모방해서 만들어 보는 UX/UI 디자인 학습법으로 좋은 레이아웃, 구성들을 자연스럽게 익히고 실력 향상에 도움을 줌