[05주_2024_11_18] UX 정리

 

2024년 11월 18일 ( MONDAY )
───────────⚪──────
◄◄⠀▐▐⠀►► 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀───○ 🔊

[개인]
🩶 디자인 카타 진행
🩶 UX 강의 듣기
🩶 TIL 작성 및 제출하기
[팀플]
🩶 새로운 팀명 및 약속 정하기
🩶 저녁 팀 스크럼(회고)

 

---

🤤오늘 진행한 부분!

UX (User experience, 사용자 경험) VS UI (User Interface, 사용자 인터페이스)

• -UX는 디지털 뿐만 아니라 오프라인에서의 경험 또한 포괄하는 개념 / 유저의 관점에서 유저의 문제를 해결하는 것에 집중
  
  • 구성: 와이어프레임, 정보 구조도, 유저 리서치, 유저 페르소나, 사용성 테스트, 프로토 타입 등
• UI가  UX에 포함되는 개념 중 하나라고 보는 시각도 존재 / 시각 언어의 규칙(시각적 요소)을 만드는 것에 집중
  • 구성: 컬러, 타이포그래피, 비주얼 디자인, 그래픽 디자인, 아이콘, 디자인 시스템 

 

더블 다이아몬드 모형

더블 다이아몬드 모형은 문제 정의와 문제 해결에 초점을 둔 디자인 프로세스 모형임

• 아이디어의 발산과 수렴 과정을 나타내는 4단계로 구성됨
  
  • 해결해야 할 문제 찾기 : 발견 ➡️ 정의
  • 해결책 찾기: 발전 ➡️ 전달
• 4가지 핵심 원칙
  • 유저와 유저 니즈를 이해하는 것에서 시작하기
  • 문제와 아이디어에 대해 구성원들과 얼라인하기
  • 구성원들과 협업하고 공동 작업하기
  • 이터레이션을 통해 에러와 리스크 일찍 발견하기
• 오해와 한계점
  • 오해
    • 선형적인 프로세스라는 오해를 받음
    • 고정된 단계라는 오해를 받음
  • 한계점
    • 모든 디자인 프로세스를 설명하지 못함
    • 복잡한 프로젝트나 대규모 서비스에서는 한계가 있음

Lean UX

유저 피드백을 데이터로 측정하고 반복적으로 디자인과 기능을 개선하는 과정을 거쳐 더 나은 유저 경험을 제공하는 프로세스

Lean UX 프로세스

• Lean UX 프로세스가 널리 활용되는 이유
  • 클라우드의 발전의 실시간 협업이 활발해짐
  • 분석 툴의 발전으로 데이터를 통해 임팩트를 측정하기 용이해짐
  • 치열한 시장 경쟁에서 살아남기에 적합

MVP -  최소 기능 제품

최소한의 기능을 갖춘 제품 또는 서비스, 초기 아이디어나 가설을 검증하는 것이 목적!

• 순서: 가설 ➜ 가설 검증 방법 ➜ MVP 스펙 ➜ MVP 검증결과
• 케이스 스터디 : 하나 또는 몇 개의 사례를 중심으로 분석하는 연구

데이터 드리븐 UX 트렌드

데이더 드리븐  UX를 통해 빠르게 변화하는 시장에서 효율적으로 제품을 개선할 수 있음

•  순서: 문제정의(어떻게,무엇)  ➜  가설 수립 ➜ 해결방법 ➜ 검증 과정(지표 모니터링)  ➜  결과(어떤 임팩트?)
•  중요성
  • 디자이너 관점: 유저 데이터의 해석을 바탕으로 디자인 산출물에 대한 논리적인 근거를 제공할 수 있음
  • 커뮤니케이션 관점: 데이터는 타 조직과 원활한 의사소통을 돕는 공용어 역할을 함
  • 비즈니스 관점: 디자인 산출물이 비즈니스에 얼마나 기여하는 지 파악할 수 있음
• 지표
  • 유저 관여도 관점 (Engagement) - 자주/ 많이
  • 유저 재방문 관점 (Retention) - 특성/ DAY
  • 유저 획득 관점 (Acquisition) - See, 획득

실무 용어

디자인 용어

• 시각적 계층 구조 (Visual Hierarchy): 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것
• 와이어프레임 (Wireframe): 화면의 인터페이스를 단순한 선과 도형으로 표현한 것
• 프로토타입 (Prototype): 제품이나 서비스의 초기 버전으로, 아이디어를 시각적으로 보여주고 테스트하는 모델
• 정보 구조도 (Information Architecture; IA): 제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정
• 피델리티 (Fidelity): 디자인 또는 프로토타입의 디테일 및 정확성 수준으로 Lo-fi는 낮은 피델리티, Hi-fi는 높은 피델리티를 가짐
• CTA (Call To Action): 사용자에게 원하는 동작을 취하도록 유도하기 위해 설계된 디자인 요소나 텍스트
• 모크업 (Mockup): 정적인 형태로 디자인된 인터페이스나 레이아웃을 보여주는 이미지나 모형

인지 심리 관련 용어

• 인지 부하 (Cognitive Load): 정보를 이해하고 처리하는 데 필요한 정신적 노력의 양
• 멘탈 모델 (Mental Model): 유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지를 나타내는 개념
• 어포던스 (Affordance): 디자인 요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 원리
• 게슈탈트 원리 (Gestalt Principles):
  • 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론
  • 유사성, 근접성, 연속성, 폐쇄성 등이 해당됨
• 힉의 법칙 (Hick’s Law): 선택할 수 있는 옵션 수가 늘어날수록 결정 시간이 증가하는 원리
• 피츠의 법칙 (Fitts’ Law): 대상까지의 거리와 크기에 따라 상호작용 시간이 달라지는 원리
• 제이콥의 법칙 (Jacob’s Law): 유저가 과거 경험을 토대로 익숙한 디자인 패턴을 기대하는 원리

개발 관련 용어

• 서버 (Server): 정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공함
• 클라이언트 (Client): 서버로부터 정보를 요청하고 받아오는 디바이스나 소프트웨어로, 웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분을 가리킴
• 접근성 (Accessibility): 모든 유저, 포괄적으로 장애가 있는 유저를 포함하여, 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것을 의미함
• API (Application Programming Interface): 서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로, 데이터를 교환하거나 서비스를 활용할 수 있도록 하는 프로그래밍 규칙과 도구의 집합
• CMS (Content Management System): 웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼
• 오픈 소스 (Open Source): 소프트웨어 또는 프로젝트가 무료로 공개되며, 누구나 소스 코드를 확인하고 수정할 수 있는 개발 방식
• 디버깅 (Debugging): 소프트웨어 오류를 찾고 수정하는 프로세스로, 프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정

유저 리서치

유저를 이해하기 위한 모든 활동

• 중요한 이유
  • 유저에 대한 이해도 강화: 유저의 행동과 동기를 파악 / 해결해야 할 새로운 문제를 발견
  • 효율적인 커뮤니케이션 도구: 의사 결정의 근거를 마련 / 사전에 문제를 미리 발견하여 수정 비용 절감
• 유저 리서치

유저 리서치의 종류

• 목적
  • 정성적 리서치 (Why): 유저의 생각, 의견, 감정을 이해하여 심층적인 인사이트를 얻는 것이 목적
    • 대표적인 활옹: 심층 인터뷰, 포커스 그룹, VoC 분석
    • 소수 유저를 대상으로 하기 때문에 모든 유저를 대표하기 어려움
  • 정량적 리서 (What, How much / many): 유저의 행동 기반의 데이터를 분석하여 답을 얻는 것이 목적
    • 대표적인 활동: 설문조사, A/B 테스트, 애널리틱스
    • 왜(Why)에 대한 근본적인 원인을 파악하기 어려움

데스크 리서치

1. 마켓리서치
   • 거시적 관점에서 자사 서비스의 시장 현화을 파악하는 것은 비즈니스 이해를 높이는 핵심 과정
   • 시장 규모 및 성장 동향
     • 특정 시장의 유저 수요와 성장 가능성을 예측
     • 성장 경로와 미래 가능성을 평가할 수 있음
   • 수익 구조
     • 유조가 가치를 느끼고 지불한 의사가 있는 부분을 파악
     • 결제 및 구매 관련 유저 경험을 평가하여 개선하는 데 도움이 됨
   • 법적 제약
     • 소비자 권리와 보호 사항을 고려하여 디자인에 반영하며, 국제 시장 진입 시 발생 가능한 법적 문제를 예측하고 대비
2. 경쟁사 분석
   • 경쟁사 선정
     • 직접 경쟁사 : 자사 서비스와 동일한 산업군에서 유사한 가격대로 형성되어 있는 서비스
     • 간접 경쟁사: 자사 서비스를 대체하여 사용될 가능성이 있는 모든 서비스
   • SWOT 분석
     • 서비스의 강점(Strength)
     • 약점(Weakness)
     • 기회(Opportunity)
     • 위험(Threat)
   • 포지셔닝 맵핑
     • 경쟁사와 자사 서비스가 유저 인식 속에서 차지하는 고유하는 위치를 시각적으로 나타내는 분석 도구

정성적 리서치

1. 심층 인터뷰
   • 유저로부터 대중 앞에서 털어놓기 어려운 개인적인 이야기를 들을 수 있음
   • 1:1로 유저에게 질문하고 답변을 들으면서, 특정 주제에 대한 깊이 있는 인사이트를 얻는 리서치 방법
   • 인터뷰에 들어간기 전에 인터뷰 목적, 인터뷰 대상의 특성, 질문 리스트, 유의 사항 등을 포함한 인터뷰 가이드를 미리 작성해두는 것이 좋음
   • 심층 인터뷰 준비 (1시간 내외)
     • 인터뷰 목적 설정 ➜ 대상자 선정 ➜ 리크루팅 ➜  질문지 작성
       • 설문지:주요 질문을 리스트업하고 질문할 순서를 조정
       • 내용: 아이스 브레이킹 질문(약 10분) ➜  답을 바로 떠올릴 수 있는 질문(15~20분) ➜  고민이 필요한 질문( 약 20~25분) (답변 일관성을 확인하기 위한 중복 질문 활용) ➜  마무리 질문(10분)
2. 포커스 그룹
   • 유사한 경험을 가진 참가자들이 서로의 답변을 발전시키거나 경험을 더 자세히 떠올릴 수 있음
   • 6~9명의 유저를 모더레이터가 동시에 인터뷰하는 라서치 방법, 온라인에서 운영하는 경우 시간 효율적
   • 주의점
     • 참가자의 의견에 중립적으로 대해야 함
     • 특정 참가자가 지나치게 말이 많거나 조용할 경우 균형을 맞추어야 함
     • 제한된 시간 안에 질문별로 적절한 시간을 할애하는 것이 중요
     • 참가자들의 비언어적 신호를 주의 깊게 관찰해야 함
3. VoC 분석
   • 다양한 고객 채널로 유입되는 유저 보이스 원문을 검토하며 유저를 깊이 이해 할 수 있음
     • 고객 센터로 인입된 불만 / 건의 / 문의 사항, 앱스토어 리뷰 등을 수집하여 분석하는 리서치 방법
     • 수집한 유저 봏이스에 태그를 부여하고 주간 또는 월간 단위로 통계를 확인하는 과정에서 정량적 리서치로 확장
4. 유용한 툴 소개
   • 대표적인 정성적 리서치 툴로 Dovetail, Condens, Notably가 있음
   • 국내는 클로바 노트를 활용가능

정량적 리서치

1. 설문조사
   
   • 설문 문항을 어떻게 설계하느냐에 따라 설문 조사의 질이 결정됨
   • 구조화된 질문과 답변 옵션을 통해 유저의 전반적인 경향을 파악하는 리서치
   • 주의사항
     • 가벼운 의견 수집 용도의 설문 조사는 5분 이내 분량
     • 선택지가 많은 경우 순서를 무작위를 설정하여 '순서 효과'를 줄일 수 있음
     • 기술어나 전문용어 사용을 피하되, 불가피한 경우 정의나 예시를 함께 표시해주면 좋음
     • 질문자의 의도가 드러나거나 한쪽으로 유도하는 질문은 피해야함
     • 한 질문에서는 하나만 물어보는 것이 바람직
2. A/B 테스트
   • A/B테스트는 한 번으로 끝내는 것이 아니라 지속적으로 진행하여 디벨롭하는 것이 중요
   • 하나의 웹 페이지를 2개 이상의 옵션으로 나누어 유저에게 동시에 보여주며 어느 쪽이 더 효과적인지 비교하는 리처치
   • 대표적인 툴: VWO, 구글 옵티마이즈, 핵클, 앰플리튜드 등
   • 언제? 왜?
     • 실험할 제품이나 프로토타입 등이 준비된 단계에서 활용
     • 기존 서비스에 전면적인 변화를 가했을 때 효과가 있을 지 불확실할 때 유용
     • 유저 행동의 예측이 어려울 때 다양한 옵션을 비교하고 선호도를 파악
     • 동일한 기간 내에 여러 가설을 테스트하고 최적의 전략을 찾음
     • 개인의 취향이나 정치 요소에 제약받지 않고 유저 중심으로 의사 결정을 할 수 있음
   • 유의점
     • A/B 테스트는 동일 기간에 진행
     • A/B 테스트는 2개 이상의 실험군으로도 동시에 진행
     • 하나의 변인에 대해서만 테스트를 진행
     • 충분한 모수가 확보되는 기간을 고려하여 테스트 기간을 설정
     • 기본적인 성공 지표와 함께 가드레일 지표를 함께 설정하여 모니터링 하는 것을 권장

*가드레일 지표: 조직전체에서 중요하게 고려하는 지표 / 해당 실험으로 부정적인 영향을 받을 수 있는 지표

리서치 결과 정리

1. 사용 맥락
   • 사용 상황
   • 사용 장소
   • 사용 시간
2. 유저
   • 인구 통계학적 특성
   • 라이프 스타일
   • 테스트 수행 능력
3. 유저 경험
   • 동기
   • 태도
   • 니즈

어피니티 다이어그램

일본의 인류학자 카와카타 지로가 방대한 데이터 사이에서 의미있는 결론을 이끌어 내기 위해 개발한 사뢰과학 방법론

• 데이터를 밑에서부터 점진적으로 그룹핑해서 구조화해나가는 방식
• 연관성에 따라 그룹핑 ➡️ 헤더를 붙이는 과정에서 데이터 사이에 숨어 있던 새로운 의미가 나타남
• 장점
  • 방대한 데이터 사이의 규칙과 연관성을 발견 ➡️ 인사이트 도출
  • 문제를 전체적으로 시각화하여 조망할 수 있음
  • 제품의 핵심 문제를 찾고 유저를 정의하는 단계에서 활용
• 오프라인: 화이트 보드와 포스트잇에다가 작성하여 분류
• 온라인: 어피니티 다이어그램 (미로, 피그잼)을 이용해 포스트잇 툴 활용
• 수행
  • 어피니티 다이어그램 노트(한문장 단위 / 중복,잘못된 정보X)  ➡️ 그룹핑하고 헤더 이름 붙이기(연관성 / 유사성)  ➡️ 토론을 통해 우선 순위 논의(유저 임팩트에 따라 우선순위 정함)

유저 페르소나

특정 유저 타입을 대표하는 가상의 인물

• 실제 사람을 느껴지도록 묘사
• 대부분의 유저를 대표할 수 있어야 함
• 페르소나 각각이 명확하게 구분되어야함
• 의사결정에 영향을 줄 수 있는 인사이트가 있어야 

UX 기획: 문제 정의 및 가설 수립

1. 문제 정의
   1. 해결해야 할 문제가 무엇인지
   2. 문제의 크기를 정량화된 수치로 파악
   3. 왜 문제로 정의했는지 충분한 근거 필요
   4. 문제 발생 원인에 대한 근거 데이터를 파악
   5. EX: 문제를 통해 무엇을 이루고자 하는지 ➜  목적을 이루기 위해 문제가 되는 것은 무엇인지  ➜  문제를 해결하면 목적이 얼마나 달성되는지
2. 가설 수립
   1. 가설 설정
      • 작은 문제 부터 큰 문제까지 모두 가설을 통해 검증 (하나의 아이디어로 한번에 해결하는 것은 어려움)
      • 개선을 시도하고자 하는 부분에 초점을 맞추어 어떤 변경을 통해, 어떤 결과를 얻고자 하는지를 담기
   2. 가설 검증
      • 검증 방법 선정
      • 올바른 모니터링 지표 설정
   3. 좋은 가설의 요건
      • 목표 지향: 특정 목표를 달성하기 위한 것이어야 함/유저 경험 개선이나 유저가 가진 문제 해결과 관련 있어야 함
      • 구체성과 명확성: 구체적인 결과물을 예측할 수 있도록 해야함
      • 측정 가능성: 검증, 측정 가능/ 성공과 실패를 측정 할 수 있어야 함
3. 원페이저 작성
   1. 다양한 이해관계자들과의 논의가 시작
   2. 논의를 진행해 나가면서 원페이는 계속 수정/보완되고, 더 다양한 정보들을 담게 됨
   3. 회사에서 중요하게 생각하는 가치에 따라 원페이지에 담기는 내용이나 명칭은 조금씩 다를 수 있음
   4. 원페이지 초안ex.
      1. 문제 정의(문제 ➜ 정의한 이유 ➜ 근거데이터)
      2. 가설및 검증 방법(가설 ➜ 검증방법)
      3. 모니터링 지표(성공지표가 ➜ 드레일 지표)

UX 기획 구체화

1. 유저 사용 맥락 반영
   • 유저 시나리오 (User Scenario)
     • 유저: 유저 페르소나
     • 목표: 무엇을 달성하려고 하나
     • 동기: 왜 달성하려고 하나
     • 외부 요소: 어떤 것에 영향을 받나 (사용상황, 사용시간 등)
   • 고객 여정 지도 (Customer Journey Map)
     • 제품 또는 서비스를 유저가 이용하는 흐름을 시각화하여 분석하는 방법
     • Zone A: 관점
     • Zone B: 경험
     • Zone C : 인사이트
   • 유저 스토리 (User Story)
     • 특정 기능을 실제 개발 구현 가능한 작은 단위로 기술하는 방법
     • 주로 애자일(Agile) 방법론에서 사용됨
     • 특히 엔지니어가 개발 작업 시 기능을 이해하고 구현하는 데 유용하게 활용됨
     • 문서에서 일일이 모든 내용을 정의하기에는 한계가 있기 때문에 유저 스토리를 통해 구현할 사항에 대한 구성원 간 합의를 도출
     • 실무에서 협업 시 유저 시나리오, 유저 저니맵보다 빈번하게 활용됨
     • 유저의 스토리의 구성요소
       • As a {user} : 유저
       • I want {goal} : 유저가 원하는 기능 또는 행동
       • So that {benefit} : 이를 통해 유저가 얻을 수 있는 이득
2. 논리적인 흐름 설계
   • 유저 플로우 (User Flow)
     • 유저가 최종 목표에 도달하기 위해 서비스 내에서 어떤 경로로 이동하며, 어떤 행동을 하는지 구체화하는 도구로 활용
     • ‘해피 패스’(유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로)에 매몰되지 않고 다양한 경로를 고려해볼 수 있다는 장점
     •  

       

       유저 플로우 구성 요소

      
3. 와이어프레임 (Wireframe)
   • 부담 없이 아이디어에 자유롭게 참여
   • 변경되는 요구 사항에 대응하여 빠르게 구조를 검토하고 수정하기가 용이
   • 논의의 초점이 레이아웃과 플로우에 집중하도록 최소한의 색과 디자인을 사용하여 작업
   • 와이어프레임에 화면 이동에 대한 정보를 추가했을 때는 '와이어 플로우'라고 부르기도 함
4. 정보 구조도 (Information Architecture)
   • 제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정
   • 유저가 자신의 현재 위치와 다음 장소로 가기 위해 무엇을 해야할 지 인지할 수 있도록 설계할 때 활용
   • 정보 구조가 효과적으로 설계될 경우 유저의 접근성이 향상되지만, 부적절하게 설계될 경우 유저의 이탈과 오류를 발생시킬 수 있음
   • 상위와 하위 개념을 효과적으로 그룹핑하고 올바른 라벨링을 하는 것이 중요
   • 구성요소
     • Organization : 조직 및 구성 시스템
     • Labeling : 라벨링 시스템
     • Navigation : 내비게이션 시스템
     • Searching : 검색 시스템

 

UX 기획 문서화

화면 설계서와 QA 문서를 진행

• 제품팀에서 오너십을 가지고 테크니컬 QA와 디자인 QA를 수행/보통 작업자가 직접 QA를 진행
• 테크니컬 QA는 의도대로 기능이 잘 동작하는지에 초점을 맞춰서 이루어짐
• 디자인 QA는 의도대로 디자인이 잘 구현되었는지에 초점을 맞춰서 이루어짐
• 디자인 QA는 AS-IS(구현된 화면)와 TO-BE(의도한 화면)를 명확하게 전달하는 것이 중요

---

😆새로 알게 된 사실!

제이콥 닐슨의 10가지 휴리스틱 원칙

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

 - 시스템은 적절한 시간과 피드백으로 사용자에게 진행사항을 알려줘야 한다.(로딩바 등)

 

2. 실세계 일치 (Match between system system and the real world)

 - 사용자에게 친숙한 단어로 말한다. (전문용어 자제)

 

3. 사용자 제어와 자유도 (User control & freedom)

-  사용자는 자신의 실수를 금세 복구할 수 있어야 한다. 대표적으로 '이전'으로 돌아 갈 수 있도록 도와주는 명령어 'control+z'와 같은 비상구가 있어야 한다.

 

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, recover frome errors)
쉽고 명확한 언어로 에러 표시를 해야 한다. 동시에 빠른 해결책이 필요하다

 

10. 도움말과 문서화 (Help and documentation)

사용자가 어려움에 직면할 때 해당 기능에 대한 설명을 쉽고 빠르게 찾아볼 수 있어야 한다.

도움말 문서를 쉽게 검색할 수 있으며 사용자 문서를 필요로 하는 시점에 상황별로 제시한다.

---

💭내일 계획

 🤍 데일리 회고

 🤍 디자인 카타

 🤍 강의 듣기

 🤍 TIL 작성 및 제출하기

 🤍 저녁 회고