디자인 카타
1) 대표적인 형태 이미지
: 실무 또는 실제 서비스에서 자주 사용되는 예시
2) 이름과 역할
이름과 역할 명확하게 정의 / OS 및 플랫폼마다 이름과 차이 조사/ 컨포넌트가 언제 어떻게 사용되는지 설명
3) 사용시 지켜야할 것
올바른 사용 사례와 이유+이미지 제시
잘못된 사용 사례+사용시 발생할 수 있는 문제점과 이를 피하기 위한 주의사항 명확히 제시
오늘의 강의_UX 기획 및 리서치_1주차
UX/UI 개념 이해
UX (User experience, 사용자 경험)
: 디지털 뿐만 아니라 오프라인에서의 경험 또한 포관하는 개념으로, 모든 감각을 활용하는 다양한 경험을 고려한다.
- 유저가 제품이나 서비스와 상호작용하는 과정에서 얻는 모든 경험
- 유저의 관점에서 유저의 문제를 해결하는 것에 집중
- 와이어프레임, 정보 구조도, 유저 리서치, 유저 페르소나, 사용성 테스트, 프로토 타입 등
UI (User Interface, 사용자 인터페이스)
: 유저가 최종적으로 제품이나 서비스를 사용할 때 맞닿는 시각적 구성 요소
- UI가 UX에 포함되는 개념 중 하나라고 보는 시각도 존재한다.
- 컬러, 타이포그래피, 비주얼 디자인, 그래픽 디자인, 아이콘, 디자인 시스템 등
UX/ UI 디자인 프로세스
더블 다이아몬드 모형
왼쪽 다이아몬드
→ 문제들을 발견하고 그 중 어떤 문제를 해결할 지 정의하는 단계
1. 발견(Discover)
: 문제가 무엇인지 발견하고 이해하는 단계
- 유저 리서치를 진행하고 이 과정에서 문제가 여럿 발견될 수도 있다.
- 유저리서치(데스크 리서치, 필드 리서치(정성/정량리서치))
2. 정의(Define)
: 집중할 문제가 무엇인지 정의하는 단계
- 유저 리서치 결과물을 분석하고 정리하며 이 과정에서 어떤 문제에 집중할 지 논리를 정립함
- 어피니티 다이어그램, 유저 페르소나 작성, 데이터모델링(리서치 인사이트 도출) 등
오른쪽 다이아몬드
→ 문제들을 발견하고 그 중 어떤 문제를 해결할 것인지 정의하는 단계
3. 발전(Develop) 단계
: 문제 해결을 위한 아이데이션을 진행하는 단계
- 문제를 해결할 수 있는 아이디어를 발산하되, 제한하기 보다 다양한 방향을 열어두고 고민하는 것이 중요하다.
- 유저 플로우, 와이어프레임, 정보구조도 등
4. 전달(Deliver) 단계
: 디자인을 구현하여 유저에게 제공하는 단계
- 프로토타입 제작 후 사용성 테스트를 해보면서 개선을 거듭한다.
- 최종 프로토타입, 사용성 테스트 등
더블 다이몬드 모형의 4가지 핵심 원칙
: 문제 해결자들이 유저를 우선으로 고려하며, 시각적이고 표용적인 소통을 기반으로 협력과 공동 작업을 진행하고, 이터레이션을 통해 반복적으로 개선할 것을 강조한다.
- 유저와 유저 니즈를 이해하는 것에서 시작하기
- 문제와 아이디어에 대해 구성원들과 얼라인하기
- 구성원들과 협업하고 공동 작업하기
- 이터레이션을 통해 에러와 리스크 일찍 발견하기
더블 다이아몬드 모형에 대한 오해와 한계점
: 하나의 방법론으로, 목적이 아닌 수단이라는 점을 명시해야함
1. 오해
- 선형적인 프로세스라는 오해를 받는다.
- 고정된 단계라는 오해를 받는다.
2. 한계점
- 모든 디자인 프로세스를 설명하지 못한다.
- 복잡한 프로젝트나 대규모 서비스에서는 한계가 있다.
Lean UX와 MVP
Lean UX 프로세스
: 유저 피드백을 데이터로 측정하고 반복적으로 디자인과 기능을 개선하는 과정을 거쳐 더 나은 유저 경험을 제공하는 프로세스
- 2011년 에릭리스에 의해 제안된 '린 스타트업' 개념에서 파생된 Lean UX 프로세스는 근래에 들어서 더욱 활발히 활용된다.
- 클라우드의 발전으로 실시간 협업이 활발해졌다.
- 분석 툴의 발전으로 데이터를 통해 임팩트를 측정하기 용이해졌다.
- 치열한 경쟁 시장에서 살아남기 적합하다.
MVP
: 최소한의 리소스로 앞으로 더 많은 자원을 투자할 가치가 있을 지 판단할 수 있다.
📌 '유저가 편리하게 이용할 수 있는 이동수단을 만들자'는 미션이 주어졌습니다. 어떻게 디자인 해야할까요?
❌ 바퀴 만들기 + 부품 만들기 → 자동차 완성
⭕ MVP 1: 바퀴에 판을 덧댄 이동 수단 → (유저 피드백)
MVP 2 : 손잡이를 더한 이동 수단 → (유저 피드백)
MVP 3 : 바퀴 크기를 키운 이동 수단 → (유저 피드백)
MVP 4 : 모터를 단 이동 수단 → (유저 피드백)
MVP 5 : 문을 여닫을 수 있는 이동 수단
케이스 스터디(에어비앤비, 아마존)
: 에어비앤비와 아마존 두 기업의 MVP 실험은 초기 가설을 검증하고 유저 피드백을 수집하여 서비스를 발전시키는 데 중요한 역할을 했으며, 현재 성공적인 비지니스 모델 기반이 되었다.
1) 에어비앤비
MVP 1
- 가설: 다양한 연령츠의 유저들은 낯선 사람의 집에서 숙박하기 위해 지불할 의향이 있을 것이다.
- 가설 검증 방법: 특정 테크 컨퍼런스 참가자들을 대상으로 인당 80달러씩 지불할 의향이 있는가 파악하기
- MVP 스펙: 서비스 소개 페이지(숙박 시 에어 매트리스 3개, 무료 와이파이, 아침 식사 제공)
- MVP 검증 결과: 3명의 지불 의사를 통해 수요를 파악할 수 있음
MVP 2
- 가설: 유저들 자신의 집에 낯선 사람이 머무는 대가로 돈을 지불하는 것을 허용할 것이다.
- 가설 검증방법: 대형 행사가 있는 곳 주변의 호스트가 자신의 공간을 플렛폼에 등록하면, 유저들이 실제로 공간을 예약했는지 파악하기
- MVP 스펙: 위치, 날짜, 가격 필터링을 통해 호스트의 공간을 검색하고 예약을 요청할 수 있는 기능
- MVP 검증 결과: 샌프란시스코에서 열리는 모빌리티 테크 컨퍼런스 행사장소 5마을 이내에서 최소 10명 이상의 지불 의사(1박 80달러)를 파악할 수 있었음
2) 아마존
MVP 1
- 가설: 온라인에서 모든 종류의 제품을 판매하는 세계 최대의 상점을 만들 수 있을 것이다.
- 가설 검증방법: 20가지 상품군 중 책에 초첨을 맞추어 유저가 책을 주문하면 제프 베조스가 직접 책을 구매하여 우편으로 보낸다.
- MVP 스펙: 책 주문을 할 수 있는 웹페이지
- MVP 검증 결과: 2개월 내에 주간 매출 2만 달러를 달성하며 성장 가능성을 파악한다.
데이터 드리븐 UX 트렌드
등장 배경과 중요성
1. 등장배경
- 직관과 추측에 의존 → 데이터 기반 가설과 설정과 검증
- 제품을 만들기까지 많은 시간과 비용 소모 → MVP를 빠르게 내놓고 데이터를 살펴 꾸준히 개선
- 소수를 대상으로 하는 정서적 리서치의 한계 → 실제 행동 데이터 기반의 정량적 리서치로 보안
2. 중요성
- 디자이너 관점: 유저 데이터의 해석을 바탕으로 디자인 산출물에 대한 논리적인 근거를 제공할 수 있다.
- 커뮤니케이션 관점: 데이터는 타 조직과 원활한 의사
- 비지니스 관점: 디자인 산출물이 비지니스에 얼마나 기여하는 지 파악할 수 있다.
지표 예시
1. 유저 관여도 관점(Engagement)
- 얼마나 많이 이용하는가? - DAU, WAU, MAU
- 얼마나 자주 이용하는가? - DAU/ MAU, DAU/ WAU
2. 유저 재방문 관점(Retention)
- 특정한 특성의 유저들이 재방문하는가? - 코호트 리텐션
- N일째 된 유저들이 재방문하는가? - Day N 리텐션
3. 유저 획득 관점(Acquisition)
- 얼마나 보는가? - 페이지 뷰 수, 클릭 뷰 수
- 얼마나 획득되는가? - 전환율, 이탈율
케이스 스터디(여기어때, 코드 아카데미)
: 실제 유저 행동 데이터 기반 의사결정은 앞으로 어떤 제품 개선을 해나갈 지에 대한 논리적인 인사이트를 얻음과 동시에 비지니스 성과에도 긍정적인 영향을 미친다는 장점이 있다.
1) 여기어때
문제 정의
- 문제 발견: 쿠폰 받기 UI에서 유저들이 혜택을 놓치는 문제가 있었다. 특히, 상품 구매시 가격 차이에 혼란을 겪는 유저가 다수 확인되었다.
- 원인찾기: 쿠폰의 디자인이 명확하지 않아 유저들이 혜택을 인식하는 데 어려움을 겪고 있었으며, 이로 인해 가격 차이에 대한 혼란이 발생했다. 일부 쿠폰은 다른 것들과 시각적으로 일관성이 부족했다.
가설 수립
유저가 혜택을 명확하게 파악하고 더 높은 확률로 쿠폰을 받는다면, 이는 결제 전환율 증가로 이어질 것이다.
해결방법
이미지 출처
1. 쿠폰 UI 일관성 문제 해결
- 다양한 디자인의 쿠폰을 통일하고, 디자인 시스템의 일관성을 유지하여 유저에게 일관된 경험 제공한다.
2. 쿠폰 혜택 정보 강조
- 혜택과 행동 문구를 나눠 노출하여 유저가 빠르게 이해하고 쿠폰을 받을 수 있도록 한다.
3. 텍스트와 꾸밈 요소 최소화
- 간결하면서도 명확한 정보 제공 위해 텍스트와 꾸밈 요소를 최소화하여 유저에게 직관적으로 전달한다.
검증 과정
- A/B 테스트를 통해 다양한 디자인 솔루션을 실험하고, 클릭률을 비교하여 어떤 디자인이 높은 효과를 가져오는지 확인한다.
결과
- 쿠폰 받기 UI 개선 후, 클릭한 유저 비율 17% 상승
- 유저들이 개선된 UI를 통해 쿠폰을 받는 확률이 높아지고, 이는 결제 전환율에도 긍정적인 영향을 미칠 것으로 기대됨
2) 코드 아카데미
문제 정의
- 문제 발견: 유저들은 현재 체크아웃 페이지에서 가장 혜택이 큰 요금제를 식별할 수 없어, 가격 할인의 최적화된 선택을 하지 못하고 있다.
- 원인 찾기: 체크아웃 페이지의 디자인이나 레이아웃 등이 가격 할인 혜택을 명확히 비교하고 강조하는 데 실패하고 있어, 유저가 최대 혜택을 얻을 수 있는 요금제를 찾기 어렵다.
가설 수립
유용한 가격 옵션을 우선하고, 절약 내용은 달러로 강조하면 연간 요금제의 채택률을 향상 시킬 것이다.
1) 플랜 카드 재정렬
더 매력적인 요금제를 우선적으로 노출한다.
2) 100의 법칙을 활용한 절약 내용 강조
연간 요금제의 절약 내용을 백분율이 아닌 달러로 절약 내용을 표시한다.
검증과정
- A/B 테스트를 통해 요금제별 전환 비율을 비교하여 어떤 디자인이 높은 효과를 가져오는지 확인한다.
결과
- 연간 결제 플랜 전환 비율 28% 상승
- 전반적인 페이지 전환율 개선
실무 UX/ UI 용어
디자인 관련 용어
1. 시각적 계층 구조(Visual Hierarchy)
- 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것
2. 와이어프레임(Wireframe)
- 화면의 인터페이스를 단순한 선과 도형으로 표현한 것
3. 프로토타입(Prototype)
- 제품이나 서비스의 초기 버전으로, 아이디어를 시각적으로 보여주고 테스트하는 모델
4. 정보구조도(information Architecture; AI)
- 제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정
5. 피델리티(Fedelity)
- 디자인 또는 프로토타입의 디테일 및 정확성 수준으로 Lo-fi는 낮은 피델리티, Hi-fi는 높은 피델리티를 가진다.
6. CTA(Call To Action)
- 사용자에게 원하는 동작을 취하도록 유도하기 위해 설게된 디자인 요소나 텍스트
7. 모크업(Mockup)
- 정적인 형태로 디자인된 인터페이스나 레이아웃을 보여주는 이미지나 모형
인지 심리 관련 용어
1. 인지 부하(Cognitive Load)
- 정보를 이해하고 처리하는 데 필요한 정신적 노력의 양
2. 멘탈 모델 (Mental Model)
- 유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지 나타내는 개념
3. 어포던스 (Affordance)
- 디자인 요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 원리
4. 게슈탈트 원리 (Gestalt Principles)
- 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향 받는다는 이론
- 유사성, 근접성, 연속성, 폐쇄성 등이 해당된다.
5. 힉의 법칙 (Hick’s Law)
- 선택할 수 있는 옵션 수가 늘어날수록 결정 시간이 증가하는 원리
6. 피츠의 법칙(Fitts'Law)
- 대상까지의 거리와 크기에 따라 상호작용 시간이 달라지는 원리
7. 제이콥의 법칙(Jacob's Law)
- 유저가 과거 경험을 토대로 익숙한 디자인 패턴을 기대하는 원리
개발 관련 용어
1. 서버(Server)
- 정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공킨다.
2. 클라이언트(Cilent)
- 서버로부터 정보를 요청하고 받아오는 디바이스나 소프트웨어로, 웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분을 가리킨다.
3. 접근성(Accessibility)
- 모든 유저, 포괄적으로 장애가 있는 유저를 포함하여, 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것을 의미한다.
4. API(Application Programming Interface)
- 서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로, 데이터를 교환하거나 서비스를 활용할 수 있도록 하는 프로그래밍 규칙과 도구의 집합
5. CMS(Content Management System)
- 웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼
6. 오픈소스(Open Source)
- 소프트웨어 또는 프로젝트 무료 공개되며 프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정
오늘의 강의_UX 기획 및 리서치_1주차 숙제
- 데이터를 기반으로 UX를 개선한 사례 3가지를 조사해보세요.
문제정의 → 가설 수립 → 해결 방법 → 검증 과정 → 결과
- 문제정의: 문제를 어떻게 발견했고, 원인은 무엇인가?
- 가설 수립: 어떤 가설을 세웠는가?
- 해결방법: 문제를 어떻게 해결하였는가?
- 검증 과정: 가설을 검증하기 위해 어떤 방법을 활용 했고, 어떤 지표를 모니터링 했는가?
- 결과: 어떤 임팩트가 있었는가?
1. 넷플릭스(Netflix) - 개인화 추천 시스템 개선
문제정의
- 문제 발견: 사용자가 콘텐츠를 찾는 데 시간을 오래 소모하며, 만족도가 낮다.
- 원인: 사용자의 시청 기록 및 선호도가 개인화 추천 시스템에 충분히 반영되지 않는다.
가설 수립
- 콘텐츠 추천을 더 개인화하면 사용자가 시청에 소요하는 시간이 줄어들고, 만족도가 높아질 것이다.
해결 방법
- 머신러닝 알고리즘을 도입하여 사용자의 시청 기록, 좋아하는 장르, 별점 평가 등을 분석
- 추천 카테고리를 세분화(예: "당신만을 위한 시리즈", "최근 시청한 콘텐츠와 비슷한 장르")
- 썸네일 이미지까지 개인화하여 사용자가 더 쉽게 클릭하도록 유도
검증 과정
- A/B 테스트: 일부 사용자에게 개선된 추천 시스템 적용
- 주요 지표: 시청 시간 증가, 콘텐츠 탐색 시간 감소, 추천 클릭률
결과
- 시청 시간 25% 증가
- 추천 클릭률이 80% 이상 상승하며, 개인화된 썸네일이 유의미한 역할을 했다.
Netflix TechBlog
Learn about Netflix’s world class engineering efforts, company culture, product developments and more.
netflixtechblog.com
2. 아마존(Amazon) - 결제 프로세스 간소화
문제정의
- 문제 발견: 많은 사용자가 장바구니에 상품을 담고 결제하지 않는다.
- 원인: 복잡한 결제 과정과 배송비 계산의 불확실성
가설 수립
- 원클릭 결제와 배송비를 미리 알리는 방식이 구매 전환율을 높일 것이다.
해결 방법
- '1-Click Order' 기능 도입: 기본 결제 정보와 주소를 저장하여 클릭 한 번으로 결제
- 상품 페이지에 배송비와 총 예상 비용 표시
- 프라임 멤버십에 무료 배송 혜택 추가
검증 과정
- 구매 전환율과 장바구니 이탈율 비교(A/B 테스트)
- 반복 구매 고객의 비율 분석
결과
- 구매 전환율 30% 증가, 장바구니 이탈율 20% 감소
- 프라임 멤버십 가입자가 급증하며 충성 고객 확보에 성공
도서: The Everything Store - 브래드 스톤
About Amazon
News announcements, original stories, and facts about Amazon.
www.aboutamazon.com
AWS 블로그
보다 분산화되고 인간 중심적이며 상황에 맞는 방식으로 데이터 관리에 접근함으로써 중앙 집중식 데이터 레이크의 일부 한계를 극복하는 데이터 메시 전략에 대해 알아보세요.
aws.amazon.com
Grow your ecommerce business with Buy with Prime - Amazon Buy with Prime
2This data point is based on A/B testing results collected between July 2023 and June 2024 from 167 merchants, and measures the average increase in revenue generated when Buy with Prime was a purchase option versus when it was not, during the same time per
buywithprime.amazon.com
3. 에어비앤비(Airbnb) - 검색 결과 UX 개선
문제정의
- 문제 발견: 사용자가 원하는 숙소를 찾는 데 평균 30분 이상 소요
- 원인: 검색 필터와 결과 표시 방식이 사용자 요구를 충분히 반영하지 못한다.
가설 수립
- 더 직관적이고 개인화된 검색 필터와 결과 정렬 방식이 검색 시간을 줄이고 예약률을 높일 것이다.
해결 방법
- "날짜가 유동적인 여행" 필터 추가로 유연한 일정 사용자도 검색 가능
- 최근 검색 히스토리를 기반으로 개인화된 추천 숙소 제공
- 지도를 확대/축소하며 숙소를 쉽게 탐색할 수 있도록 인터페이스 개선
검증 과정
- 사용자 행동 데이터 분석(검색 시간, 클릭률, 예약 완료율)
- 사용자 인터뷰와 설문조사를 통한 정성적 피드백 수집
결과
- 검색 시간이 평균 20% 단축, 예약 완료율 15% 상승
- "날짜 유동적 필터" 도입 후 관련 예약 건수 30% 증가
The Airbnb Tech Blog – Medium
Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io.
medium.com
오늘의 후기(TIL)
낮에 먹은 과자가 문제인건지 평소 먹는 식습관에서 벗어나서 그런건지 바로 체해버렸다.
단지 채소를 먼저 안 먹었다는 이유 때문인가 평소와 다를 건 그것 밖에 없는데...
잠시 약국 다녀오는데 시간을 써버리고 컨디션 조절에 실패했다는 것에 너무 슬프다.
다른 팀원은 4주차까지 마무리 했다고 한다. 나는 이제 1주차 마무리 내일은 좀 더 힘내서 빠르게 3주차까지 마무리하는 것이 목표이다. 그게 안된다면 주말까지 활용해야지!
팀 프로젝트에서 근거로 사용했던 힉의 법칙, 제이콥의 법칙을 만나서 너무 반가웠다.
내일도 집중해서 이번주 내에 강의 완강하기가 목표이다.
