레퍼런스 분석하는 방법

1. 화면 구조 분석
   화면의 요소들을 자세~하게 나눠보기^^

화면 구성 요소

• 파운데이션 : 더이상 세부적으로 쪼개지지 않는 가장 기본이 되는 요소 쿼크같다잉

  • 예) 색상, 폰트 아이콘 등

• 엘리먼트 : 파운데이션이 모여 만든 요소

  • 예) 버튼, 뱃지, 탭 등

• 모듈 : 엘리먼트가 모여서 만드는 요소

  • 예) 리스트, 캐러셀, 네비게이션 등

• 페이지 : 모듈이 모여서 만드는 최종 화면

  • 예) 홈, 마이페이지, 장바구니, 회원가입 등

2. 디자인 원칙 기반 분석

• 디자인 원칙에 대입해보면서 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 디자인 평가

3. 인사이트 정리하기

• 본인의 제품에 참고하거나 적용하면 좋을 만한 것들을 그룹화 해서 정리하기
• 아쉬운 점이나 나쁜 사례는 어떻게하면 나아지게 할 수 있을까 생각해보기

UXUI 디자인 패턴

• 앱/웹에서 자주 사용되는 디자인 요소

자주 쓰는 디자인 패턴

• 온보딩
• 로딩
• 검색
• 회원가입
• 리스트
• 카드
• 캐러셀

온보딩

사용자가 제품을 처음 만나 서비스에 빠르고 원활하게 적응할 수 있도록 돕는 과정

튜토리얼

제품이 복잡하거나 어려운 경우에 조작법이나 설명을 넣는 방식
특정 기능을 강조하고 싶을 때도 사용한다.튜토리얼이 나오는 온보딩은 추천하지 않는다는 점~

• 가치 보여주기
  제품을 사용사면서 얻을 수 있는 가치를 몇 개의 화면으로 보여주는 방식

  Tip!

  • 온보딩 과정을 보고싶지 않은 사용자는 바로 제품의 홈으로 이동할 수 있도록 skip 기증을 제공하기
  • 캐러셀을 이용하여 화면이 자동으로 넘어가도록 구성하기
  • 사용자가 직접 넘기지 않아도 되는 동영상으로 구성하는 것도 좋다.

  

• 개인화 설정하기
  개인 맞춤 정보를 제공할 수 있도록 카테고리와 선택지를 주고 정보를 입력하게 하는 방법
  

로딩

앱/웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면

좋은 로딩 화면이란.

• 가능한 한 빨리 콘텐츠를 표시한다.
• 콘텐츠를 로드 중이고 완료하는데 시간이 얼마나 걸릴지 명확하게 전달한다.
• 로딩 시간이 길어지면 사람들이 기다리는 동안 볼 수 있는 내용을 제공한다.

• 스피너 아이콘
  

• 프로그레스 바
  진행상황을 알려주어야 할 때 유용!
  

• 스켈레톤
  화면의 빈 버전을 뜻함. 실제 페이지의 구성을 예측하도록 도와준다.
  스켈레톤이 실제 화면의 로드를 방해하는 주객전도 상황을 만들지 않도록 주의한다.

  

검색

원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법

좋은 검색 화면이란

• 키워드에 대해 원하는 결과를 보여줄 수 없을 때, 다른 행동을 할 수 있도록 유도한다.(추천 컨텐츠, 다른 키워드로 유도)
• 자동 완성 기능을 사용해 오타를 방지하고 연관된 내용을 함께 찾을 수 있도록 한다.

• 기본 검색 화면
  제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다르다.
  검색 아이콘으로만 배치한 제품(검색 중요도↓), 화면에서 검색창을 전면에 표시한 제품(검색 중요도↑)
  

• 연관 상품 추천/연관 검색어 노출
  
• Empty view: 검색 결과가 없을 때
  빈 화면을 어떻게 채울지! 추천 혹은 베스트 상품으로 이어지게 행동을 유도하는 것도 방법이다
  
  아 햄버거 먹고싶다..........................저는 세상에서 최⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓⁓고로 햄버거를 좋아하는 사람입니다?

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

• 돈💸과 관련된 산업이다 보니 국가, 금용 기관의 법과 정책의 영향을 많이 받는다.

• UI에 대한 구체적인 가이드라인이 있다거나 화면에 대해서 관련 기관의 심의를 받아야 하는 경우도 있다는.....헉.!

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

핀테크/금융 주요 레퍼런스

• 핀테크 : 테크+파이낸셜. 금융앱 + 테크 느낌~
• 은행사 : 1금융 / 인터넷 / 2금융,저축은행
• 카드사, 증권사, 보험사

(!) 기능 살펴보기

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

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

• 콘텐츠의 종류에 따라 제품의 차이가 크다.

  Tip!
  체류시간을 늘리는 UX/UI가 중요하다!
  오래 머문다 → 더 많은 광고! 더 많은 콘텐츠! → 매출 쑥쑥🌱
  
  오래 머무는 경우

  1. 마음에 드는 콘텐츠가 많을 때
  2. 콘텐츠를 몰입해서 소비할 때

콘텐츠 주요 레퍼런스

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

• 온라인에서 판매 및 거래가 이뤄지는 플랫폼을 말함.
• 제품의 지표, uxui가 상품으로 인한 영향을 크게 받는다.

  Tip!

  • 커머스는 상품 탐색 → 구매로 이어지는 사용자 여정에 집중!!
  • 커머스의 중요한 지표 중 하나가 상품구매 전환율(제품을 방문한 사람들 중에서 실제 구매로 이어진 사람의 비율)이기 때문!
  • 상품을 탐색하고 구매로 이어지는 사용자의 여정 중에 어느 구간에서 가장 많이 구매를 포기하고 나가는지 확인하기!
  • 반대로 구매를 결심하게 만드는 요인에는 무엇이 있을지 집중해 보시면 커머스 제품을 파악하시긔~

커머스 주요 레퍼런스

---

숙제 : 레퍼런스 분석하기

1. 화면 구조 분석

2. 디자인 원칙 기반 분석

좋은 사례 2개와 나쁜 사례 2개, 총 4개의 사례를 찾아서 디자인 원칙에 근거하여 작성해보세요

• 친구/탭 화면

  • 프로필 섹션 : 게슈탈트 > 시각적 위계
    가장 먼저 눈에 띄도록 크기, 위치가 조절되어 있다.
  • 업데이트 된 프로필 섹션 : 게슈탈트 > 유사성의 원리
    일관된 스타일로 배치되어 비슷한 기능의 요소란 것을 알 수 있다.
  • 하단 네비게이션 : UX 비주얼 디자인 원칙 > 균형
    중앙을 중심으로 대칭을 이루고있다.

• 채팅/탭 화면

  • 채팅 리스트 : 게슈탈트 > 연속성의 원리
    채팅 리스트들을 수직으로 배열하여 자연스럽게 연결되어 보이고 하나의 흐름으로 인식

• 오픈채팅/탭 화면

  • 카테고리 탭 : 게슈탈트 > 연속성의 원리
    카테고리들을 배열하여 옆으로 계속 이어지는 것처럼 보이며 사용자가 스크롤 할 때, 리스트가 부드럽게 연속적으로 나타나 전체 과정이 끊어지지 않고 진행된다고 인식
  • 광고 섹션 : 게슈탈트 > 유사성의 원리
    채팅 리스트들과 비슷한 형태로 디자인하여 하나의 그룹으로 인식하게 한다.

• 쇼핑/탭 화면

  • 광고 배너 캐러셀 : UX 비주얼 디자인 원칙 > 스케일
    이벤트 카드의 스케일을 키워 가장 먼저 시선이 가도록 해 중요도가 가장 높다는 것을 강조함.
  • 톡딜 섹션 : UX 비주얼 디자인 원칙 > 균형
    광고 카드 들이 대칭 균형을 이루어 시각적으로 안정감을 준다.

  -더보기/탭 화면

  • 지갑 섹션 : UX 비주얼 디자인 원칙 > 대비
    흰 배경에 키 컬러로 포인트를 주어 시선이 가게 만들었다.

  
  이거 맞나요..? 잘모르겠서요^^ 틀린거 잇으면 제발제발 알려주시긔...