UXUI디자인심화_1주차 UXUI의 이해(개념익히기)

[수업 목표]

- UX/UI의 개념을 숙지하고,
  대표적인 UX/UI 디자인 프로세스인 더블 다이아몬드 모형을 이해합니다.
- Lean UX와 MVP 개념을 이해하고,
  최근 주목받고 있는 데이터 드리븐 UX에 대해 알아봅니다.
- 실무에서 많이 쓰이는 UX/UI 용어를 학습합니다.

---

01. UX/UI 개념 이해
- UX(User experience, 사용자 경험) : UX는 디지털 뿐만 아니라 오프라인에서의 경험도 포함, 유저가 제품과 상호작용하는 과정의 모든 경험
- UI(User Interface, 사용자 인터페이스) : UI가 UX에 포함되는 개념, 시각적 구성 요소
- UX vs UI :
  UX(와이어프레임, 정보구조도, 유저 리서치, 유저 페르소나, 사용성 테스트, 프로토타입)
  UI(컬러, 타이포그래피, 비주얼 디자인, 그래픽 디자인, 아이콘, 디자인 시스템)

02. UX/UI 디자인 프로세스  
- 더블 다이아몬드 모형 : 문제 정의와 해결에 초점, 아이디어 발산과 수렴 과정을 4단계로 구성

 (1)해결해야 할 문제 찾기- 발견(DISCOVER), 정의(DEFINE)
  ①발견: 무엇이 문제인지 발견, 유저 리서치 진행, 데스크 리서치, 필드 리서치 진행
  ②정의: 집중할 문제를 정의, 유저 리서치 분석(논리적으로), 어피니티 다이어그램, 유저 페르소나
 (2)해결책 찾기- 발전(DEVELOP), 전달(DELIVER)
  ①발전: 문제 해결을 위한 아이데이션, 정보구조도, 와이어프레임
  ②전달: 유저에게 제공, 최종 프로토타입, 사용성 테스트
- 더블 다이아몬드 모형 4가지 행식 원칙 : 
  (1) 유저와 니즈 이해
  (2) 문제와 아이디어에 대해 팀과 얼라인
  (3) 팀과 협업
  (4) 이터레이션을 통해 에러와 리스크 발견
- 더블 다이아몬드 모형에 대한 오해/한계점 : 선형적, 고정된 단계라는 오해(지속적인 개선이 있음). 모든 디자인 프로세스를 설명x, 복잡한 프로젝이나 대규모 서비스에는 한계

03. Lean UX와 MVP
- Lean UX 프로세스(군더더기없이) : 유저 피드백을 데이터로 측정, 반복적으로 디자인 개선.
클라우드의 발전으로 실시간 협업이 가능, 분석 툴의 발전으로 데이터 측정 용이, 치열한 경쟁에 살아남기 적합.

- MVP(Minimum Viable Product) : 최소 기능 제품

 +MVP case study 에어비앤비
MVP1
- 가설 : 다양한 연령층의 유저들은 낯선 사람의 집에서 숙박하기 위해 지불할 의향이 있을 것이다.
- 가설 검증 방법 : 특정 테크 컨퍼런스 참가자들을 대상으로 인당 80달러씩 지불할 의향이 있는지 파악해보기
- MVP 스펙 : 서비스 소개 페이지 (숙박 시 에어 매트리스 3개, 무료 와이파이, 아침 식사 제공)
- MVP 검증 결과 : 3명의 지불 의사를 통해 수요를 파악할 수 있었음
MVP2
- 가설 : 유저들은 자신의 집에 낯선 사람이 머무는 대가로 돈을 지불하는 것을 허용할 것이다.
- 가설 검증 방법 : 대형 행사가 있는 곳 주변의 호스트가 자신의 공간을 플랫폼에 등록하면, 유저들이 실제로 공간을 예약하는지 파악해보기
- MVP 스펙 : 위치, 날짜, 가격 필터링을 통해 호스트의 공간을 검색하고 예약을 요청할 수 있는 기능
- MVP 검증 결과 : 샌프란시스코에서 열리는 모빌리티 테크 컨퍼런스 행사장소 5마일 이내에서 최소 10명 이상의 지불 의사(1박 80달러)를 파악할 수 있었음
 +MVP case study 아마존
MVP1
- 가설 : 온라인에서 모든 종류의 제품을 판매하는 세계 최대의 상점을 만들 수 있을 것이다.
- 가설 검증 방법 : 20가지 상품군 중 책에 초점을 맞추어 유저가 책을 주문하면 제프 베조스가 직접 책을 구매하여 우편으로 보냄
- MVP 스펙 : 책 주문을 할 수 있는 웹 페이지
- MVP 검증 결과 : 2개월 내에 주간 매출 2만 달러를 달성하며 성장 가능성을 파악함

04. 데이터 드리븐 UX 트렌드
- 데이터 드리븐 UX 등장 배경과 중요성 :
(1)배경:
  직관과 추측에 의존→데이터기반 가설 설정,검증
  제품 생산의 많은 시간과 비용→MVP를 내놓고 데이터기반 개선
  소수대상 정성적 리서치의 한계→실제 행동 데이터 기반의 정량적 리서치로 보완
(2)중요성:
  디자이너 관점: 유저 데이터의 해석을 바탕으로 논리적 근거
  커뮤니케이션 관점: 데이터는 타 조직과의 원활한 의사소통을 도움
  비즈니스 관점: 디자인이 비즈니스에 얼마나 기여하는지.
- 데이터 드리븐 UX에서 활용되는 지표 예시 : 회사마다 특성이 달라서 지표 중요도도 다름.
(Daily Active User, Weekly Active User, Monthly Active User)
 (1)유저 관여도 관점: 얼마나 많이 이용하는가(DAU, WAU, MAU) / 얼마나 자주 이용하는가(DAU/MAU, DAU/WAU)
 (2)유저 재방문 관점: 특정한 특성의 유저들이 재방문하는가(코호트 리텐션) / N일째 된 유저들이 재방문하는가(Day N리텐션)
 (3)유저 획득 관점: 얼마나 보는가(페이지 뷰 수, 클릭 뷰 수) / 얼마나 획득되는가(전환율, 이탈율)
+MVP case study 여기어때
◉문제 정의
• 문제 발견 : 쿠폰 받기 UI에서 유저들이 혜택을 놓치는 문제가 있었다. 특히, 상품 구매 시 가격 차이에 혼란을 겪는 유저가 다수 확인되었다.
• 원인 찾기 : 쿠폰의 디자인이 명확하지 않아 유저들이 혜택을 인식하는 데 어려움을 겪고 있었으며, 이로 인해 가격 차이에 대한 혼란이 발생했다. 일부 쿠폰은 다른 것들과 시각적으로 일관성이 부족했다.
◉가설 수립
• 유저가 혜택을 명확하게 파악하고 더 높은 확률로 쿠폰을 받는다면, 이는 결제 전환율 증가로 이어질 것이다.
◉해결 방법
• 쿠폰 UI 일관성 문제 해결
다양한 디자인의 쿠폰을 통일하고, 디자인 시스템의 일관성을 유지하여 유저에게 일관된 경험 제공.
• 쿠폰 혜택 정보 강조
혜택과 행동 문구를 나눠 노출하여 유저가 빠르게 이해하고 쿠폰을 받을 수 있도록 함.
• 텍스트와 꾸밈 요소 최소화
간결하면서 명확한 정보 제공을 위해 텍스트와 꾸밈 요소를 최소화하여 유저에게 직관적으로 전달.
◉검증과정
• A/B 테스트를 통해 다양한 디자인 솔루션을 실험하고, 클릭률을 비교하여 어떤 디자인이 높은 효과를 가져오는지 확인한다.
◉결과
• 쿠폰 받기 UI 개선 후, 클릭한 유저 비율이 17% 상승.
• 유저들이 개선된 UI를 통해 쿠폰을 받는 확률이 높아지고, 이는 결제 전환율에도 긍정적인 영향을 미칠 것으로 기대됨.
+MVP case study 코드아카데미
◉문제 정의
• 문제 발견 : 유저들은 현재 체크아웃 페이지에서 가장 혜택이 큰 요금제를 쉽게 식별할 수 없어, 가격 할인의 최적화된 선택을 하지 못하고 있다.
• 원인 찾기 : 체크아웃 페이지의 디자인이나 레이아웃 등이 가격 할인 혜택을 명확히 비교하고 강조하는 데 실패하고 있어, 유저가 최대 혜택을 얻을 수 있는 요금제를 찾기 어렵다.
◉가설 수립
• 유용한 가격 옵션을 우선하고, 절약 내용을 달러로 강조하면 연간 요금제의 채택률을 향상시킬 것이다.
◉해결 방법
• 플랜 카드 재정렬
더 매력적인 요금제를 우선적으로 노출함.
• 100의 법칙을 활용한 절약 내용 강조
연간 요금제의 절약 내용을 백분율이 아닌 달러로 절약 내용을 표시함.
◉검증과정
• A/B 테스트를 통해 요금제별 전환 비율을 비교하여 어떤 디자인이 높은 효과를 가져오는지 확인한다.
◉결과
• 연간 결제 플랜 전환 비율 28% 상승
• 전반적인 페이지 전환율 개선

05. 실무 UX/UI 용어
- 디자인 관련 용어 : 
 (1) 시각적 계층 구조 : 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것
 (2) 와이어프레임 : 화면의 인터페이스를 단순한 선과 도형으로 표현한 것
 (3) 정보구조도 : 제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정
 (4) 프로토타입 : 제품이나 서비스의 초기 버전으로, 아이디어를 시각적으로 보여주고 테스트하는 모델
 (5) 피델리티 : 디자인 또는 프로토타입의 디테일 및 정확성 수준으로 Lo-fi는 낮은 피델리티, Hi-fi는 높은 피델리티를 가짐
 (6) CTA : 사용자에게 원하는 동작을 취하도록 유도하기 위해 설계된 디자인 요소나 텍스트
 (7) 목업 : 정적인 형태로 디자인된 인터페이스나 레이아웃을 보여주는 이미지나 모형
- 인지 심리 관련 용어 : 
 (1) 인지 부하 : 정보를 이해하고 처리하는 데 필요한 정신적 노력의 양
 (2) 멘탈 모델 : 유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지를 나타내는 개념
 (3) 어포던스 : 디자인 요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 원리
 (4) 게슈탈트원리 : 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론. 유사성, 근접성, 연속성, 폐쇄성 등
 (5) 힉의 법칙 : 선택할 수 있는 옵션 수가 늘어날수록 결정 시간이 증가하는 원리
 (6) 피츠의 법칙 : 대상까지의 거리와 크기에 따라 상호작용 시간이 달라지는 원리
 (7) 제이콥의 법칙 : 유저가 과거 경험을 토대로 익숙한 디자인 패턴을 기대하는 원리
- 개발 관련 용어 : 
 (1) 서버 : 정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공함
 (2) 클라이언트 : 서버로부터 정보를 요청하고 받아오는 디바이스나 소프트웨어로, 웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분을 가리킴
 (3) 접근성 : 모든 유저, 포괄적으로 장애가 있는 유저를 포함하여, 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것을 의미함
 (4) API : 서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로, 데이터를 교환하거나 서비스를 활용할 수 있도록 하는 프로그래밍 규칙과 도구의 집합
 (5) CMS : 웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼
 (6) 오픈 소스 : 소프트웨어 또는 프로젝트가 무료로 공개되며, 누구나 소스 코드를 확인하고 수정할 수 있는 개발 방식
 (7) 디버깅 : 소프트웨어 오류를 찾고 수정하는 프로세스로, 프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정

*디자인 프로세스 : 디자인씽킹, 더블 다이아몬드 모형(양대산맥)