내일배움캠프_본캠프_34일차_학습일지_Chapter 3. UX/UI 디자인 심화_5주차

04.05(금)

내일배움캠프 본캠 34일차 학습일지
Chapter 3. UX/UI 디자인 심화_5주차 내용 정리

📕[스파르타코딩클럽] UX 기획 및 리서치 - 5주차

☑️1. 사용성 테스트의 개념과 중요성

👉1-1. 사용성 테스트의 개념

• 프로토타입이 있다면 제품 개발 단계 중 언제든 활용할 수 있음
• 유저가 제품이나 서비스를 실제 사용할 때 의도한 시나리오에 따라 테스크를 수행하는 지, 문제점은 없는지 관찰하기 위해 진행
• 유저가 제품이나 서비스를 사용할 때 어떤 생각을 가지고 어떤 혼란을 겪는지 파악할 수 있음
• 제품 개선 전에 진행하면 유저가 불편하게 생각하는 부분을 파악할 수 있고, 제품 개선 후에 진행하면 유저가 실제 어떻게 사용하는지를 파악할 수 있어음
  👉1-2. 사용성 테스트의 중요성
• 사용성 테스트를 하는 이유는 우리가 사용자가 아니기 때문임
• 오히려 우리는 프로젝트에 대해 너무 많이 알기 때문에 편향을 가지고 있음
• 유저가 화면을 직접 조작하면서 마주치는 문제를 식별할 수 있고, 이를 통해 유저 중심적으로 디자인을 개선하는데 도움을 받을 수 있음
• 예산이 제한적이거나 시간이 촉박한 경우에는 캐주얼하게 카페에서 진행하는 사용성 테스트로도 유용한 인사이트를 얻을 수 있음

☑️2. 사용성 테스트 준비

👉2-1. 사용성 테스트의 구성 요소

• 진행자 (Moderator)
  • 참가자에게 사용성 테스트의 목적과 절차를 안내
  • 참가자들이 편안한 분위기에서 자연스럽게 행동할 수 있는 분위기를 조성
  • 참가자에게 테스크를 지시하고 테스크를 수행하는 참가자를 관찰
    -참가자가 생각하고 있는 것을 말로 표현할 수 있도록 유도함
• 테스크 (Task)
  • 참가자가 테스트 과정 중에 현실적으로 수행할 수 있는 활동으로 구성됨
  • 테스크 지시는 참가자에게 구두 또는 안내지로 전달될 수 있음
  • 참가자가 수행할 테스크를 직접 소리 내어 읽도록 안내하기도 함
  • 참가자는 이해도를 높이고, 관찰자는 현재 진행 중인 테스크를 파악하는 데 도움이 됨
• 참가자 (Participant)
  • 참가자는 유저를 대표할 수 있어야 함
  • 이미 출시된 제품에 대한 사용성 테스트를 진행할 때는 참가자가 해당 제품을 사용한 경험이 있거나, 유사한 경험이 있는 것이 좋음
  • 아직 출시되지 않은 제품에 대한 사용성 테스트를 진행할 때는
    참가자가 유저 페르소나와 유사한 특성을 가지고 있어야 함
  • 프로젝트 지식이 있는 내부 구성원이나 페르소나와 완전히 무관한 사람을 대상으로 테스트를 진행하면 좋은 데이터를 얻을 가능성이 낮아짐
• 관찰자 (Observer)
  • 사용성 테스트가 진행되는 동안 참가자의 행동과 반응을 관찰하고 기록함
  • 테스트를 진행하는 방에 진행자와 함께 들어가서 기록하기도 하고,
    원격으로 참가자의 화면과 참가자를 실시간으로 관찰하면서 기록하기도 함
    

👉2-2. 사용성 테스트 공간 환경 구성
📌 사용성 테스트를 위해서 테스트가 진행되는 공간 과 실시간으로 관찰할 수 있는 공간이 필요함

• 테스트 공간에서 참가자와 진행자가 테스트를 진행함
• 관찰 공간에서 관찰자들이 테스트 공간에서 일어나는 일들을 실시간으로 관찰하고 기록함
  관찰자들은 참가자가 어떤 말을 하면서 화면을 조작하는 지 알 수 있어야 함
• 테스트 공간이 따로 구비되어 있는 조직의 경우 단방향 거울을 활용하기도 함
  관찰 공간과 테스트 공간에는 단방향 거울이 있어서 관찰 공간에서는 테스트 공간을 볼 수 있지만, 테스트 공간에서는 관찰 공간을 볼 수 없음
• 줌과 구글밋 등을 활용하여 원격에서 사용성 테스트를 진행하기도 함
• 실시간으로 참가자의 얼굴과 참가자가 조작하는 화면을 보면서 진행자가 질문을 할 수 있음
• 별도의 관찰 공간이 없는 경우 테스트 공간에 진행자와 서기를 담당하는 관찰자 1명이 들어가기도 함
  

👉2-3. 사용성 테스트 준비하기
📌필수 인원이 정해진 것은 아니지만, 5명의 유저를 테스트 및 사후 인터뷰를 하면 85%의 사용성 문제를 발견할 수 있음

• 사용성 테스트 준비 과정
  • 사용성 테스트 목적 설정
    • 사용성 테스트를 통해서 확인하고 싶은 사항을 정함
  • 참여자 리크루팅 & 스크리닝
    • 사용성 테스트의 목적, 방식, 일정, 보상 등에 대한 정보가 포함된 공지함
    • 필요한 경우 지원자의 적합 여부를 사전 질문 등을 통해 스크리닝함
  • 테스크 선정
    • 실제 사용성 테스트에서 수행할 수 있는 현실적인 테스크를 선정해요. 여기에서 테스크란, 유저에게 주어지는 미션같은 것
    • 예를 들어 커머스 서비스의 경우 아래와 같은 테스크를 선정할 수 있음
      • 예시 1 이전에 구매한 상품의 리뷰를 작성해보세요
      • 예시 2 장바구니에 담겨 있는 상품을 결제해보세요.
  • 사용성 테스트 시나리오 작성
    • 여러 개의 테스크들이 모여 사용성 테스트 시나리오가 구성
    • 사용성 테스트 시나리오에는 테스크의 수행 요청 순서, 후속 질문 리스트 등의 내용으로 구성 됨
  • 파일럿 테스트
    • 실제 테스트 환경과 동일한 환경에서 사전 테스트를 진행해보는 것을 의미
    • 예상치 못한 현장 변수를 미리 확인하고, 제 3자 입장에서 질문 관련 피드백을 받을 수 있음
    • 테스트 공간에서의 화면과 오디오가 관찰 공간에 실시간으로 잘 송출되는지 체크해야함
    • 사용성 테스트 총 소요 시간은 적절한지 체크해야함
    • 무의식적으로 전문 용어를 사용하지 않는지 피드백을 받아보도록 함
  • 사용성 테스트 시나리오 예시
    • 분위기를 편안하게 만들기 위해 참가자에게 아이스브레이킹 질문을 한 후 테스트를 시작하는 것을 추천
    • 테스크 수행 순서의 경우 참가자가 순서대로 진행하기 용이한 순서대로 현장 상황을 고려하여 구성하는 것을 추천
    • 참가자에게 미리 공유된 시간 내에 마무리할 수 있도록 시간을 고려하여 테스크와 질문을 구성 해야함
      

☑️3. 사용성 테스트 실행

👉3-1. 사용성 테스트 실행 과정
📌사용성 테스트는 총 1시간 내외로 구성하는 것이 적절함

• 사용성 테스트 안내
  • 사용성 테스트의 목적, 진행 방법, 주의 사항에 대해 안내
  • 영상/사진 촬영 동의 여부를 체크하고, 기밀 프로젝트인 경우 보안 서약서를 작성함
• 테스크 안내
  • 참가자가 수행해야할 테스크를 알려줌
• 테스크 수행 & Think Aloud
  • 참가자는 안내받은 테스크를 수행
  • 이 때, 진행자는 참가자에게 테스크를 수행할 때 자신의 생각과 감정을 말로 표현해줄 것을 요청
• 사후 인터뷰
  • 사후 인터뷰를 진행하면서 이용 만족도를 측정
  • 사후 인터뷰를 통해 참가자가 테스크 수행 전에 기대했던 것이 수행 후와 비교했을 때 어느 정도 차이가 있는지, 불편하게 하는 오류 요인은 무엇이 있는지 등을 파악
• 사후 인터뷰는 각 테스크가 종료된 직후에 진행하는 것이 바람직함
  • 마무리
    • 참가자에게 테스트 종료를 알리고, 참여 보상을 증정

👉3-2. Think Aloud 이해하기
📌테스크를 수행하면서 머릿속에서 어떤 생각이 드는 지 말로 표현하도록 하는 방법

• Think Aloud를 통해 얻을 수 있는 정보 예시
  • 유저가 메뉴나 버튼, 아이콘을 클릭한 의도
  • 어떤 행동을 했을 때 기대하는 결과값
  • 테스크 수행 중 유저가 겪는 어려움
  • 테스크 수행 중 유저가 실수를 한 이유
• 유저의 실제 의도와 인지 과정을 이해하고 설계에 반영할 수 있다는 장점이 있음
• 편안한 분위기에서 자연스럽게 생각을 말할 수 있는 분위기를 조성하는 것이 중요함
• Think Aloud를 진행하는 방법에는 크게 두 가지가 있음
  • Think Aloud : 테스크 수행과 동시에 진행
    • 장점 정보를 찾고자 할 때 참가자의 의도를 명확히 파악할 수 있음
    • 단점 말과 행동을 동시에 하려다 보니 수행 집중력이 떨어짐 진행자가 능숙하지 않다면, 실수로 참가자에게 다음 행동을 암시하는 힌트를 줄 수 있음
  • Retrospective Think Aloud : 테스크 종료 후 기억을 되살리며 진행
    • 장점 테스크 수행 중에서는 테스크만 집중할 수 있음
    • 단점 이전에 한 행위를 기억 못할 수 있고, 사소한 오류에 대해 적극적으로 표현하지 않으려는 경향이 있음
• Think Aloud 유의사항
  • 테스트 중에는 참가자가 말을 많이 하도록 유도 해야함
  • 참가자가 질문을 할 때 최대한 답변을 주지 말아야함
  • 참가자가 실수를 해도 힌트를 주거나, 고치려고 하지 말아야함
  • '왜 그렇게 생각하세요?' 등의 열리니 질문으로 참가자의 생각을 알아보는 것이 바람직함

☑️4. 사용성 테스트 결과 정리

👉4-1. 사용성 테스트 결과 정리하기
📌문제점 도출 → 원인 도출 → 개선 방향 도출을 통해 결과를 정리

• 문제점 도출
  • 참가자의 생각과 행동에 대한 기록을 종합하여 문제점을 파악
  • 진행자와 관찰자의 기록을 종합하여 문제점을 파악
• 원인 도출
  • 유저가 예상하는 경험과 실제 경험이 어떻게 달랐는지 확인
  • 유저가 이해하고 기대하는 내용과 실제가 어떻게 달랐는지 확인
• 개선 방향 도출
  • 테스크별로 개선이 필요한 부분을 리스트업 해야함
  • 정보 구조 관점에서 개선이 필요한 부분을 리스트업 해야함

👉4-2. 우선순위 논의 TIP
📌사용성 테스트에서 유저의 이용 만족도와 행동 데이터를 수집하여
우선순위 논의 시 의사 결정 근거로 활용하기도 함

• 테스크 수행 후 참가자의 이용 만족도를 측정

  • 전체 테스크 중 이용 만족도가 높은 경우와 낮은 경우를 파악할 수 있음
    • 적용예시
      

• 참가자의 테스크 성공/실패 여부를 측정

  • 특정 테스크가 유독 실패 비율이 높다면 이용에 불편함이 있다고 볼 수 있음
    • 적용예시
      

• 참가자가 테스크를 쉽게 달성할 수 있었는지를 측정

  • 참가자의 이동동선을 살펴보면 어떤 장애요인이 있었는지 원인을 파악할 수 있음
    • 적용예시
      

• 사용성 테스트 결과 공유 TIP

  • 팀에 공유 시 문서로만 공유하는 것 보다 실제 참가자 영상을 함께 공유하는 것이 더 효과적임

☑️5. 제이콥 닐슨의 휴리스틱 평가 방법

👉5-1. 휴리스틱 평가 이해하기
📌휴리스틱 평가(Heuristic Evaluation)란, 전문가가 인터페이스를 검토하여 사용자 인터페이스의 문제점을 발견하는 방법

• 사용성 테스트와 다르게 유저를 대상으로 하지 않고, 디자이너, 사용자 경험 전문가가 특정 휴리스틱을 기반으로 평가함
• 장점 디자인 초기 단계에서 비교적 쉽고 빠르게 적용해볼 수 있음
• 단점 전문가 중심의 평가이기 때문에 실제 유저의 경험을 완벽하게 대변하진 못함

👉5-2. 제이콥 닐슨의 10가지 휴리스틱 평가 항목
📌휴리스틱 평가 중 닐슨 노먼 그룹의 제이콥 닐슨이 1994년 개정한 10가지 휴리스틱 평가(10 Usability Heuristics)가 제일 대중적으로 활용되고 있음

• 1. 시스템 상태 가시성 Visibility of System Status

  • 유저가 현재 무엇을 하고 있는지 정확한 상태를 보여주고 있는가?
  • 예시
    텍스트 필드의 focused 상태
    시스템이 항상 적절한 시간에 적절한 피드백을 통해 무슨 일이 일어나고 있는지 알려줘야함
    

• 2. 시스템과 실제 세상 매칭 Match Between System & Real World

  • 사용되고 있는 아이콘, 문구, 메뉴명이 실제 생활에서도 사용되고 있는 것으로 제공되고 있는가?
  • 예시
    친숙한 메타포의 아이콘과 메뉴명
    정보보다 자연스럽고 논리적인 순서에 따라 제공되어 유저가 시스템을 쉽게 이해할 수 있어야함
    

• 3. 유저의 선택권 및 자유도 User Control and Freedom

  • 유저가 서비스를 자유롭게 조작할 수 있는가?
  • 예시
    실행 취소 기능
    유저가 실수를 했어도, 자신의 행동을 취소, 재실행을 할 수 있는 방법을 제공해야함
    

• 4. 일관성과 규정 Consistency and Standards

  • 여러 개의 화면에서도 일관성있게 제공하고 있는가?
  • 예시
    일관성을 유지하는 우버의 디자인 시스템
    유저가 혼란스럽지 않도록 전반적인 용어, 정보 표현방식, 인터페이스 등이 일관성이 있어야 함
    

• 5. 에러 방지 Error Prevention

  • 사용하면서 실수를 최대한 하지 않도록 하고 있는가?
  • 예시
    명확한 터치 영역
    오류 메시지를 제공하는 것 보다는 아예 문제 발생을 방지할 수 있도록 신중하게 설계하는 것이 바람직함
    

• 6. 기억보다는 인지 Recognition Rather Than Recall

  • 서비스를 사용할 때 학습을 하거나 별도의 기억을 하지 않아도 직관적으로 사용할 수 있는가?
  • 예시
    상품을 찾고 장바구니에 담는 과정
    유저가 서비스 이용에 필요한 상황 정보를 자연스럽게 떠올리고, 작업 단계를 쉽게 따라갈 수 있도록 설계해야함
    

• 7. 유연성과 효율성 Flexibility and Efficiency of Use

  • 서비스 대상 모두가 사용할 수 있게 제공되고 있는가?
  • 예시
    스포티파이의 이퀄라이저 개인화 및 자동차 모드
    서비스를 처음 사용하는 초보자도, 전문자에게도 모두 개인에게 편하게 사용할 수 있는 방법을 제공해야함
    

• 8. 심미적이고 미니멀한 디자인 Aesthetic and Minimalist Design

  • 최소한의 디자인을 통해 심미성을 잘 느낄 수 있게 제공되고 있는가?
  • 예시
    최소한의 디자인 요소로 정보를 제공하는 에어비앤비 숙소 리스트 화면
    부적절한 정보가 들어가지 않게 단순하게 설계하고, 유저들이 보기에 아름답고 조화로운 화면을 설계 해야함
    

• 9. 유저가 에러를 전달할 때 상황, 이유, 해결책을 말하기 Help Users Recognize, Diagnose, and Recover from Errors

  • 에러가 발생했을 때, 유저가 잘 인지하고 스스로 해결할 수 있게 도와주고 있는가?
  • 예시
    회원가입 시 비밀번호 설정 가이드 문구
    유저가 문제 상황을 스스로 인식하고 대처할 수 있도록 오류 메시지가 전달되어야 함
    

• 10.문제 해결과 문서화 Help and Documentation

  • 유저에게 충분한 도움말을 제공하고 있는가?
  • 예시 고객센터의 FAQ
    설명서 없이 사용되는게 제일 좋지만, 쉽게 찾을 수 이쓴 도움말이 제공되어야함 또한 유저의 행위에 초점을 맞춰서 해결할 수 있도록 구체적인 단계가 나열되어야함