[UXUI Design] UXUI 디자인 입문_Chapter 6

#1 TASK

 ▼ 학습 목표

• 레퍼런스 분석 개념 및 필요한 상황에 적용
• UX/UI 디자인 패턴을 이해 및 활용
• 도메인별 특징 파악, 레퍼런스 분석

 

#2 Design Tools

 1. 레퍼런스 분석

  ❑ 레퍼런스 분석이란?

• 여러가지 사례를 상세하게 분류해 생각해보고 도움이 될만 것들을 수집하는 것

• UX/UI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시
• 좋은 사용성을 가진 디자인과 나쁜 UX 패턴을 가진 디자인을 고민해 보면서 사고력을 기를 수 있음

  ❑ 레퍼런스 분석 방법

   ▹ 화면 구조 분석

    * 화면이 각각 어떤 요소들로 구성되어 있는지 분석
      - 파운데이션 : 더 이상 속성으로 쪼개지지 않는 가장 기본이 되는 요소
         ex) 색상, 폰트, 아이콘 등

      - 엘리먼트 : 파운데이션이 모여서 만드는 요소
         ex) 버튼, 뱃지, 탭 등

      - 모듈 : 엘리먼트가 모여서 만드는 요소
         ex) 리스트, 캘러셀, 네비게이션 등

      - 페이지 : 모듈이 모여서 만드는 최종 화면
         ex) 마이페이지, 장바구니, 회원가입 등

 

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

    ▸ 핵심은 주장과 그에 알맞은 논리적인 근거를 찾는 것

 

 2. UX/UI 디자인 패턴

  ❑ UX/UI 디자인 패턴이란?

• 디지털 제품, 주로 앱이나 웹에서 사용되는 디자인 요소를 뜻함
• UX/UI 디자인 패턴은 보편적인 범위 내에서 디자인 할 것
  ☞ 사용자는 기존의 경험과 학습된 내용을 바탕으로 행동하기 때문
  * UX/UI 패턴을 디자인 시스템으로 만들어 두면 반복해서 재사용할 수 있기 때문에 불필요한 에너지를 줄일 수 있다는 장점

  ❑ UX/UI 디자인 패턴 종류

1. 온보딩
   - 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정
   * 평균적으로 앱 설치 후 3일 이내의 DAU의 77%가 이탈 -> 사용자가 서비스에 메리트를 못 느끼면 떠난다는 뜻
2. 로딩
   - 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면
   * 로딩 시간이 길면 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋음
   1) 스피너 아이콘 : 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 알림
   2) 프로그레스 바 : 현재 상황을 시각적으로 파악할 수 있는 로딩 바
   3) 스켈레톤 : 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 하는 것
3. 검색
   - 사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법
   * 서비스 컨셉에 따라 검색 위계 질서 또한 다르게 가질 것
4. 회원가입
5. 리스트
6. 카드
7. 캐로셀

 

  ❑ 도메인 분석

   ▹ 핀테크/금융

• 돈과 관련된 산업이다 보니 국가, 금융 기관의 법과 정책의 영향을 많이 받고, UI에 대한 구체적인 가이드라인 등 관려ㅛㄴ 기고나의 심의를 받는 경우가 많음

   ▹ 콘텐츠

• 콘텐츠의 종류에 따라 영상, 오디오, 텍스트, 웹툰 등 다양하게 나눠지고 각 종류의 특성에 따라 차이가 크다
• 콘텐츠 제품의 주요 지표는 체류 시간. 광고와 마주치고 매출로 이어지는 부분이기 때문에 사용자를 오래 머무르게 만드는 요소가 다양

   ▹ 커머스

• 전자상거래인 이커머스를 뜻하며, 온라인에서 판매 및 거래가 이뤄지는 플랫폼을 뜻함
• 상품 구매 전환율이 커머스의 중요한 지표
• 어느 구간에서 포기하고 구매하는지 집중해서 분석해 볼 것