[UX/UI 3주차 - 5] 레퍼런스 분석 및 UX/UI 디자인 패턴

레퍼런스 분석

여러가지 사례를 상세하게 분류해 생각해 보고 도움이 될 만한 부분을 찾아보는 과정.

• 하는 이유
  레퍼런스 분석을 통해 스스로 생각하는 힘을 기를 수 있다.
  UX/UI 디자이너는 시장과 사용자의 문제를 발견하고, 여러 고민을 통해 해결책을 제시하는 사람이다. 레퍼런스를 분석하는 과정에서 디자인에 대한 영감을 얻고 좋은 디자인을 구분하는 지식을 쌓을 수 있다. 좋은 사용성을 가진 디자인과 나쁜 UX 패턴을 가진 디자인을 고민해 보면서 사고력을 기를 수 있고, 이 과정에서 쌓은 영감과 지식을 디자인할 때 적용할 수 있고 결국엔 본인의 디자인 능력을 높이는 길이 된다.
• 레퍼런스 분석 방법
  1) 화면 구조 분석
  화면이 각각 어떤 요소들로 구성되어 있는지 분해해 보는 단계
  
  ▲ 우리가 일반적으로 보는 앱 화면
  
  
  ▲ 토스의 화면 구조 분석 예시(명칭은 바뀔 수 있음.)
  2) 디자인 원칙 기반 분석
  UI 요소들을 디자인 원칙들을 기준으로 분석해 보는 단계
  쪼개본 UI 요소들을 디자인 원칙에 대입해 보면서 사용성이 높은지, 심미적으로 아름다운지 등 다양한 관점에서 디자인을 평가.
  나쁜 점도 타산지석의 사례로 삼을 수 있으니 좋은 점과 나쁜 점 모두 다양하게 찾기.
  핵심은 주장과 그에 알맞은 논리적인 근거를 찾는 것. (심리학 이론 사용)
  3) 인사이트 정리하기
  분석한 내용들로 얻은 인사이트를 정리해 내 것으로 만드는 단계.
  본인의 제품에 참고하거나 적용하면 좋을 만한 것들을 그룹화해서 정리.
  한 단계 더 나아가 아쉬운 점이나 나쁜 사례를 어떻게 더 나아지게 할 수 있을지 개선점까지 생각해 보면 훨씬 도움이 됨.

UXUI 디자인 패턴

디지털 제품, 주로 앱이나 웹에서 자주 사용되는 디자인 요소.
다수의 제품에서 공통으로 볼 수 있는 UX/UI 디자인 패턴은 보편적인 범위 내에서 디자인하고 동작하는 것이 좋다. 사용자는 기존의 경험과 학습된 내용을 바탕으로 행동하기 때문.
※ 제이콥의 법칙처럼 사용자는 새로운 제품을 사용할 때 자신이 이미 알고 있는 익숙한 방식을 기반으로 사용한다. 자주 쓰는 UX/UI 디자인 패턴을 사용하고, 비슷하게 동작하도록 만들면 따로 학습할 필요 없이 자연스럽게 이용할 수 있다.

• 온보딩
  온보딩은 사용자가 제품을 처음 만나는 과정의 경험.
  ‘조직 내 새로 합류한 사람이 빠르게 조직의 문화를 익히고 적응하도록 돕는 과정이며, 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정을 뜻한다.
  
  - 온보딩의 종류
  1) 튜토리얼
  제품이 매우 복잡하거나 어려운 경우에 조작법이나 설명을 넣는 방식.
  특정 기능을 강조하고 싶을 때도 사용.
  
  다만 사용성 측면에서 튜토리얼이 나오는 온보딩은 추천하지 않는다. 앱을 막 설치하고 사용해 보려는 사용자의 행동을 제한하고, 흥미를 떨어뜨린다. 가능한 제품을 쉽고 직관적으로 만들어서 튜토리얼이 필요 없도록 설계하는 것이 가장 좋고, 그게 어렵다면 꼭 필요한 부분에만 제한적으로 사용하기.
  2) 가치 보여주기
  제품을 사용하면서 얻을 수 있는 가치를 몇 개의 화면으로 보여주는 방식.
  
  온보딩 과정을 보고싶지 않은 사용자는 바로 제품의 홈으로 이동할 수 있도록 skip 기능을 제공하기.
  캐러셀을 이용하여 사용자가 화면을 넘기지 않아도 자동으로 넘어가도록 구성하기.
  사용자가 화면을 직접 넘기지 않아도 되는 동영상으로 구성하기.
  3) 개인화 설정하기
  개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보를 입력하게 하는 방법.
  개인화가 핵심 기능인 서비스에서 주로 사용되는 유형.
  사례는 하기.(스포티파이, 듀오링고)
  
  

• 로딩
  앱이나 웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면
  
  - 종류
  1) 스피너 아이콘 혹은 애니메이션 활용
  
  
  
  데이터를 서버에서 불러오거나, 반대로 데이터를 보낼 때 앱과 사용자와의 상호작용을 돕는다. 또한 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 사용자에게 알려준다. 더불어 움직이는 모션이나 애니메이션은 로딩 지속 시간에 대한 사용자의 인식을 낮춰 기다리는 시간을 짧게 느끼게 한다.
  2) 프로그레스 바
  
  현재 상황을 시각적으로 파악할 수 있는 로딩 바.
  3) 스켈레톤
  
  
  스켈레톤은 불러오는 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 한다.
  단, 스켈레톤이 실제 화면의 로드를 방해하는 주객전도의 상황(이걸 만드는데 더 큰 로딩이 생기는 것...)이 생기지 않도록 주의하자. 가능한 가장 단순한 모습의 회색 박스를 사용하여 불러오는 페이지를 예측할 수 있는 형태로 표현하는 것이 좋다.

• 검색
  사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법.
  정보의 양이 많은 서비스라면 검색 기능을 추가해 사용자의 빠른 정보 탐색을 도울 수 있다.
  
  - 종류
  1) 기본 검색 화면
  
  제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다른 것에 주목. 돋보기 모양의 아이콘으로만 배치한 제품도 있지만, 화면에서 검색창을 아주 크게 전면에 표시한 제품도 있음. (유튜브는 영상 중심이라 영상이 더 큰데, 네이버나 구글은 사용자가 검색을 많이 하니까 검색 영역이 더 큼.)
  2) 연관 상품 추천 / 연관 검색어 노출
  
  
  검색 화면에서는 키워드 검색을 넘어 전반적인 정보의 탐색이 이뤄지는 공간이기도 하다. 탐색을 돕기 위한 요소에는 무엇이 있는지 주목하자.
  3) Empty view: 검색 결과가 없을 때
  
  사용자에게 결과를 보여줄 수 없을 때 빈 화면을 어떻게 채울지 고민하기.(추천 혹은 베스트 상품으로 이어지는 행동을 유도하는 것도 방법이다.)

  레퍼런스 특징

• 핀테크/금융
  돈과 관련된 산업이다 보니 국가, 금융 기관의 법과 정책의 영향을 많이 받음.
  UI에 대한 구체적인 가이드라인이 있다거나 화면에 대해서 관련 기관의 심의를 받아야 하는 경우도 있음.
  

• 콘텐츠
  콘텐츠의 종류에 따라 영상, 오디오, 텍스트, 웹툰 등 다양하게 나눠지고 각 종류의 특성에 따라 제품의 차이가 크다.
  예를 들어, 영상 콘텐츠는 디바이스 스크린을 계속해서 쳐다보고 있어야 하지만, 오디오 콘텐츠는 그러지 않다. 그보다는 개인화된 재생 목록을 잘 구성하는 것이 중요할 것. 그리고 텍스트 콘텐츠는 가독성이 사용성에 매우 큰 영향을 끼친다.
  

• 커머스 제품
  주로 전자상거래인 이커머스를 말하며, 온라인에서 판매 및 거래가 이뤄지는 플랫폼을 뜻한다.
  제품의 지표, UX/UI가 상품으로 인한 영향을 크게 받는다.