UX/UI 개념 이해
UX/UI 디자인 프로세스
더블 다이아몬드 4가지 핵심 원칙
1. 유저와 유저 니즈를 이해하는 것에서 시작하기
2. 문제와 아이디어에 대해 구성원들과 얼라인하기
3. 구성원들과 협업하고 공동 작업하기
4. 이터레이션을 통해 에러와 리스크 일찍 발견하기
1. 발견 : 무엇이 문제인지 발견하는 단계 (유저 리서치 등)
2. 정의 : 집중할 문제가 무엇인지 정의하는 단계 (어피니티 다이어그램, 유저 페르소나 등)
- 유저 리서치 결과물을 분석하고 정리함
- 어떤 문제에 집중할지 논리 정립
3. 발전 : 문제 해결을 위한 아이데이션을 진행하는 단계 (정보구조도, 와이어프레임 등)
- 문제 해결을 위한 아이디어를 다양한 방향으로 발산하고 고민하는 것이 중요함
4. 전달 : 디자인을 구현하여 유저에게 제공하는 단계 (최종 프로토타입, 사용성테스트 등)
+ '디자인 씽킹 VS 더블 다이아몬드 모형'이 UX/UI 디자인 프로세스에서 가장 많이 사용하는 방법임.
1-2-3-4의 순서가 아니라 중간에 잘못되면 1로 다시 돌아가기 때문에 수단으로 잘 써야됨.
Lean UX와 MVP
Lean UX 프로세스
- 기름기없이 쫙 빠진 군더더기 없는 프로세스
- '가설설정 -> 가설검증 -> 반복적으로 개선'
MVP (Minimum Viable Product, 최소 기능 제품)
- 최소한의 기능을 갖춘 제품
- 초기 아이디어, 가설을 검증하는 것이 목적임
- 최소한으로 만들어놓은 제품을 리뷰를 통해 계속 디벨롭함
에어비앤비 MVP 가설 예시 1)
- 가설 : 유저들은 낯선 사람의 집에서 숙박하기 위해 돈을 지불할 의향이 있을 것이다.
- 가설 검증 방법 : 특정 테크 컨퍼런스 참가자들을 대상으로 인당 80달러씩 지불할 의향이 있는지 파악하기
- MVP 스펙 : 서비스 소개 페이지 (숙박시 에어 매트리스, 무료 와이파이, 아침무료 조식)
- MVP 검증 결과 : 3명의 지불 의사를 통해 수요를 파악할 수 있었음
에어비앤비 MVP 가설 예시 2)
- 가설 : 유저들은 자신의 집에 낯선 사람이 머무는 대가로 돈을 지불하는 것을 허용할 것이다.
- 가설 검증 방법 : 대형 행사 장소 주변의 호스트가 자신의 집을 플랫폼에 등록하면, 유저들이 실제로 그 집을 예약하는지 파악해보기
- MVP 스펙 : 위치, 날짜, 가격 필터링을 통해 호스트의 집을 검색,예약할 수 있는 기능
- MVP 검증 결과 : 어디에서 열리는 어디행사 5마일 이내에서 최소 10명 이상의 지불 의사(80달러)를 파악할 수 있었음
아마존 MVP 가설 예시)
- 가설 : 온라인에서 모든 종류의 제품을 판매하는 세계 최대의 상점을 만들 것이다.
- 가설 검증 방법 : 20가지 상품군 중 책에 초점을 맞추어, 유저가 책을 주문하면 제프베조스가 직접 책을 구매하여 우편으로 보냄
- MVP 스펙 : 책 주문을 할 수 있는 웹 페이지
- MVP 검증 결과 : 2개월 내에 주간 매출 2만 달러를 달성하며 성장 가능성을 파악함
데이터 드리븐 UX 트렌드
데이터 드리븐 UX
- 데이터 기반 해석을 바탕으로 논리적 근거를 제공함
- 타 조직과 원활한 의사소통을 돕는 공용어 역할
- 디자인 산출물이 비니지스에 얼마나 기여하는지 파악할 수 있음
- 주요 지표는 프로덕트별, 도메인별 특성을 고려하여 다르게 설정해야 함
여기어때 케이스 스터디 )
1. 문제 정의
- 문제 발견 : 쿠폰 받기에서 유저들이 혜택을 놓치는 문제가 있다. 특히 상품 구매시 가격 차이에서 혼란을 겪는다.
- 원인 찾기 : 쿠폰의 디자인이 명확하지 않아 인식 어려움, 일부 쿠폰은 시각적으로 일관성이 부족함
2. 가설 수립 : 유저가 혜택을 명확하게 파악하고 쿠폰을 받는다면 이는 결제 전환율 증가로 이어질 것이다.
3. 해결 방법 : 쿠폰 UI 일관성 문제 해결, 쿠폰 혜택 정보 강조, 텍스트와 꾸밈 요소 최소화
4. 검증 과정 : A/B 테스트를 통한 다양한 디자인 실험, 클릭률을 비교하여 효과를 확인한다.
5. 결과
- 쿠폰받기 UI 개선 후 클릭한 유저 비율이 17% 상승하였다. (그룹 C)
- 유저들이 쿠폰 받을 확률이 높아지고, 결제 전환율에도 긍정적 영향을 미칠 것으로 기대된다.
코드아카데미 케이스 스터디 )
1. 문제 정의
- 문제 발견 : 유저들이 가장 혜택이 큰 요금제를 선택하지 못하고 있다.
- 원인 찾기 : 디자인이나 레이아웃이 가격 할인혜택을 명확히 비교, 강조하지 못하고 있다.
2. 가설 수립 : 유용한 가격 옵션을 우선하고, 절약 내용을 달러로 강조하면 채택률을 향상시킬 것이다.
3. 해결 방법 : 플랜카드 매력적인 순으로 재정렬, 100의 법칙을 활용한 절약내용 강조
4. 검증 과정 : A/B 테스트를 통한 요금제별 전환비율을 비교하여 어떤 디자인이 효율적인지 확인한다.
5. 결과
- 연간 결제 플랜전환율이 28% 상승하였다.
- 전반적인 페이지 전환율이 개선되었다.
실무 UX/UI 용어
디자인 관련 용어
- 시각적 계층 구조 : 중요한 준서에 따라 시선의 흐름이 이동하도록 디자인하는 것
- 와이어프레임 : 화면의 인터페이스를 단순한 선과 도형으로 표현한 것
- 프로토타입 : 제품의 초기 버전. 아이디어를 시각적으로 보여주고 테스트하는 모델
- 정보구조도 : 제품의 구성요소, 구조를 도식화하는 것으로, 유저가 길을 잃지 않도록 돕는 과정
- 피델리티 : 프로토타입의 디테일 및 정확성의 수준 (Lo-fi, Hi-fi)
- 목업(Mockup) : 정적인 형태로 디자인된 인터페이스를 보여주는 이미지나 모형
- CTA (Call To Action) : 사용자에게 원하는 동작을 취하도록 유도하기 위해 설계된 디자인
인지 심리 관련 용어
- 인지 부하 : 정보를 이해하고 처리하는데 필요한 정신적 노력의 양
- 멘탈 모델 : 유저가 시스템을 어떻게 이해하고 예측하는지의 모델
- 어포던스 : 디자인 요소가 유저에게 어떤 동작을 할 수 있을지 단서나 힌트를 제공함
- 게슈탈트의 원리 : 사람이 이미지를 인식할 때 주변에 있는 요소의 관계,맥락에 영향을 받는다는 이론
- 힉의 법칙 : 옵션 수가 늘어날수록 결정하는 시간도 증가하는 원리
- 피츠의 법칙 : 대상까지의 거리, 크기에 따라 상호작용 시간이 달라지는 원리
- 제이콥의 법칙 : 유저가 과거경험을 토대로 익숙한 디자인 패턴을 기대하는 원리
개발 관련 용어
[ 1주차 숙제 : 데이터를 기반으로 UX를 개선한 사례 조사하기 ]
+ 이 과정은 머릿속에 넣어놓을 것. 계속 써먹기 때문.
사례 ) 유럽 통신사 TELE2의 필터링
1. 문제 정의
- 문제 발견 : 유저가 원하는 조건에 맞는 항목을 탐색하기 어렵다.
- 원인 찾기 : 필터링 옵션이 없다.
2. 가설 수립 : 필터링 서비스를 제공하면 유저의 탐색이 쉬워질 것이고, 채택율을 높일 것이다.
3. 해결 방법 : 휴대전화 목록에서 인기 있는 브랜드를 바로 선택할 수 있는 빠른 필터 UI를 추가함
4. 검증 과정 : A/B 테스트를 통하여 UI를 개선한 전과 후를 비교하였음
5. 결과 : 필터 클릭률 19% 개선
'UXUI 마라톤' 카테고리의 다른 글
강의 UX 기획 및 리서치 - 3주차 : 리서치 결과 정리, 어피니티 다이어그램, 유저 페르소나 (0) | 2024.07.14 |
---|---|
강의 UX 기획 및 리서치 - 2주차 : 유저 리서치, 마켓 리서치, 경쟁사 분석, 심층 인터뷰, 설문조사, A/B 테스트, 애널리틱스 (0) | 2024.07.11 |
[ 미니 프로젝트 UI 분석 기반의 디자인 : 개선 리서치 및 레퍼런스 조사 ] (1) | 2024.07.01 |
Figma 활용법 개인과제 팀 KPT (팀장 제출용) - B04 PRIEND (0) | 2024.06.28 |
강의 피그마(2)-3주차 숙제 : 이미지 슬라이드, 어코디언, 당근 앱의 글쓰기 버튼 만들기 (0) | 2024.06.21 |