내배캠 2주차 수요일 UXUI 디자인 입문-6

레퍼런스 분석

여러가지 사례를 상세하게 분석해보고 도움이 될만한 부분을 찾아보는 것

다양한 사례를 수집하고 세부요소들로 분류
세부요소를 관찰하면서 좋은 점과 나쁜 점 그리고 그 이유를 찾고 생각
분석을 통해 얻은 인사이트 정리

레퍼런스 분석을 해야하는 이유
무언가를 끊임없이 무언가에 대해서 생각하는 과정
스스로 생각하는 힘(사고력)을 기를 수 있음
UXUI디자이너는 여러 고민을 통해 해결책을 제시하는 사람
디자인에 대한 영감을 얻고 좋은 디자인을 구분하는 지식

분석 방법
1. 화면 구조 분석
각 화면이 어떻게 구성되어 있는지
여러 UI구조가 모여서 한 화면을 만듬

EX
파운데이션 - 색상, 폰트, 아이콘 등
엘리먼트 - 파운데이션이 모여서 만드는 요소 / 버튼, 뱃지, 탭
모듈 - 엘리먼트가 모여서 만드는 요소 / 리스트, 캐러셀, 네비게이션
페이지 - 모듈이 모여서 만드는 최종 화면

2. 디자인 원칙 기반 분석
   사용성이 높은지, 심미적으로 아름다운지 다양한 관점에서 디자인을 분석
   주장과 그에 알맞는 논리적 근거를 찾는 것

• 게슈탈트 심리학
• UX 비주얼 디자인 원칙
• UX/UI 심리학 법칙
• 기업의 디자인 원칙

3. 인사이트 정리하기
   분석한 내용을 본인의 제품에 참고하거나 적용하면서 내 것으로 만들기

UX/UI 디자인 패턴

디지털 제품에서 자주 사용되는 디자인 요소
보편적인 범위 내에서 디자인하고 동작하는 것이 좋음(제이콥의 법칙)

사용자와 디자이너 모두에게 도움이 됨
디자인 패턴을 사용하면 사용자에게 익숙해 쓰는데 어려움을 낮춰준다.
사용자는 새로운 학습을 할 필요가 없이 자연스럽게 사용이 가능한다.

자주 사용되는 UX/UI 디자인 패턴
1. 온보딩
-사용자가 제품을 처음 만나는 과정의 경험
서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정

설치후 3일 이내에 DAU 77%가 이탈한다.
사용자가 제품을 처음 사용하는 순간에 계속 사용해야하는 이유를 느끼지 못 한다면 3일내에 이탈한다.

온보딩 종류

• 1. 튜토리얼
     제품이 매우 복잡하거나 어려운 경우 사용
     특정 기능을 강조하고 싶을 때 사용
     사용자의 행동을 제한해 흥미를 떨어트릴 수 있음
     
• 2. 가치 보여주기
     사용자가 제품을 사용하면서 얻을 수 있는 가치를 몇개의 화면을 통해 보여줌
     온보딩을 스킵할 수 있는 기능을 제공
     캐러셀을 이용하여 자동으로 넘어가도록 구성
     위와 마찬가지로 동영상도 있음
     
• 3. 개인화 설정하기
     개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보를 입력하게 함

2. 로딩
   앱이나 웹에서 화면이 그려지는 동안 잠깐 기다려야할 때 보여지는 화면
   가능한 빨리 콘텐츠를 표시
   콘텐츠를 로드 중이고 완료까지 얼마나 걸리는지 명확하게 전달
   사람들이 기다리는 동안 볼 수 있는 컨텐츠 제공

로딩의 종류

• 1. 스피너
     스피너 아이콘 혹은 애니메이션 활용
     앱과의 상호작용을 보여주는 요소
     연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 알려줌
     사용자의 인식을 낮춰 기다리는 시간을 짧게 느껴지게 함
     
• 2. 프로그래스 바
     현재 상황을 시각적으로 파악할 수 있게 함
     진행 상황을 유저에게 알려줌
     
• 3. 스켈레톤
     실제 정보는 없지만 그래픽으로 대략적인 뼈대를 보여줌
     빈 버전으로 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있게 함
     스켈레톤 또한 그래픽임으로 실제 화면의 로드를 느리게하는 주객전도의 상황이 되어선 안됨

3. 검색
   사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법
   사용자가 원하는 결과를 보여줄 수 없을 때 다른 행동을 할 수 있도록 유도해주는게 좋은 화면이다.
   추천컨텐츠나 다른 키워드로 검색을 유도할 수 있음
   자동완성 기능을 사용해 오타를 방지

• 1. 기본 검색 화면
     검색의 중요도에 따라 검색 기능의 위계가 다른 것에 주목
• 2. 연관 상품 추천/연관 검색어 노출
     단순 키워드 검색 뿐만 아니라 전반적인 정보 탐색을 할 수 있도록 요소를 추가
• 3. Empty view: 검색 결과가 없을 때
     사용자에게 결과를 보여줄 수 없을 때 빈 화면을 어떻게 채울지
     추천 혹은 베스트 상품으로 이어지는 행동을 유도하는 것도 방법

4. 회원가입

5. 리스트

6. 카드

7. 캐러셀

[레퍼런스 분석 1] 핀테크/금융

국가나 금융기관의 법과 정책에 영향을 받음
UI에 대한구체적인 가이드라인이 있거나 관련기관에 심의를 받아야하는 경우가 있음

여러 앱을 동시에 비교해 보는 걸 추천

• 금융자산 연결
• 자산/소비 분석
• 신용대출 비교

실무에서 레퍼런스 분석하는 경우
만들려는 솔루션이 분명해서 특정 디자인 패턴만 보고 싶은 경우
시장이나 도메인 분석차원에서 유사한 서비스를 하는 앱을 전반적인 화면 분석을 하는 경우

토스
GNB - 글로벌 네비게이션 바의 약자
UI요소를 보면서 어떤 카테고리로 들어가는지 분석
이벤트영역 = 다이나믹 = 다니나믹 세션
하단이나 상단에 고정된 네비게이션

정보 그룹화의 좋은 사례
그래프에서 사용한 색상&패턴을 재사용
그래프에 표시된 값과 아래의 정보가 같은 데이터라는 것을 잘 인지할 수 있음
-게슈탈트 심리학의 유사성원리

[레퍼런스 분석 2] 콘텐츠

담고있는 정보에 큰 영향을 받는다
콘텐츠의 종류에 따라 영상, 오디오, 텍스트, 웹툰 등 제품 안에서 UXUI 차이가 커진다

체류시간을 늘리는 UXUI를 찾는데 집중
-마음에 드는 컨텐츠가 많을 수록 오래 체류
-컨텐츠에 몰입할 때

티빙
경제적으로 디자인한 좋은 사례
기존 레이아웃을 유지하면서 효율적으로 특정 콘텐츠를 강조
UI 변경이 없어 디자인, 개발 리소스가 들지 않음
-게슈탈트 심리학의 폐쇄성의 원리
-UX 비주얼 디자인원칙 스케일

[레퍼런스 분석 3] 커머스

전자상거래인 이커머스
제품의 지표 UXUI가 상품으로 인한 영향을 크게 받음

상품탐색부터 구매로 이어지는 사용자 여정에 집중
어느 구간에서 구매를 포기하고 이탈하는지
어떤 요인이 구매로 이어지는지

무신사
FAB 플로팅 액션 버튼
고정된 위치에 있어 사용성이 높은 컴포넌트

사용성이 낮은 나쁜 사례
플로팅 액션 버튼의 사용성이 좋지 않음
1.터치 영역이 40X40으로 크기가 다소 작음
2.배경과 색상이 비슷해 구분되지 않음
-UXUI 심리학 법칙 중 피츠의 법칙
-UX 비주얼 디자인 원칙 중 대비

레퍼런스 분석하기: 카카오톡