UX/UI 디자인 노하우 - 내비게이션 및 레이블 만드는 방법

• 내비게이션 만드는 방법
  - 내비게이션을 만들기 위해서는 먼저 유저 플로우를 작성해야 함.
  
  

• 유저 플로우란(User Flow)?
  - 사용자가 의도한 목적을 달성하기 위해 거쳐야 하는 일련의 단계를 시각화한 것
  - User Goal → Task Flow → Wire Flow
• 사용자 목적( User Goal)
  - 여정 지도를 기반으로 사용자의 제품 사용 목적을 정의
• 태스크 플로우 (Task Flow)
  - 사용자가 목적을 달성하기 위해 해야할 것들을 각 스크린 단위로 시각화
  - 실제로 툴에서도 텍스트만 써서 전개
  ex) 홈 화면으로 간다 → 주문 버튼을 탭 한다 → 커피 리스트를 확인한다.

태스크 플로우 예시

• 와이어 플로우 (Wire Flow)
  - 각 스크린 별로 상세한 레이아웃과 기타 필요한 요소들을 추가
  - 개발 구현을 위해 필요한 내용들을 추가 (에러 발생 상황, 정보 개수 등)
  - 홈 화면에 타이틀 바, 롤링 배너 부분, 추천 메뉴 등 필요한 각 영역을 나눠놓는 것

와이어 플로우 예시

• 레이블 잘 만드는 방법
  - 일단 레이블이란 입력 필드 상단이나 좌측에 입력할 정보가 무엇인지 설명해 주는 문구
  - 가장 많이 쓰는 방법은 카드 소팅이다.

• 카드 소팅이란(Card Sorting)?
  - 사용자들을 대상으로 카드에 쓰여진 레이블(Label)을 제시하고 직접 그룹화하게 하는 방법
  - 이를 통해 제품을 사용하는 사용자들의 해당 지식이 어떻게 구조화되어 있는지 발견 가능
  - 정보 구조를 만들 때, 메뉴의 구조와 메뉴명 등을 만들 때 활용
  ex) 스포츠브라 제품을 살 때, 사용자가 이 제품을 사러 가기 위해서 카테고리에서 이너웨어라고 쓸지, 속옷, 또는 스포츠웨어라고 쓸지 사용자들을 대상으로 어떤 쪽에서 먼저 찾을지 레이블을 찾아가는 방법
  
  
  ▼ 카드 소팅 수행 단계
  1) 주제선정 : 제품에서 표현될 50개 전후의 레이블을 각각 카드에 기록
  2) 그룹화 : 사용자들이 유사하고 생각하는 카드들끼리 그룹화하도록 함
  3) 그룹에 이름 붙임  : 그룹화가 끝나면 빈 카드를 주고 각 그룹에 대한 이름을 작성하도록 함
  4) 설명듣기 : 사용자들이 그룹화하고 이름을 붙인 이유를 들음
  5) 15-20여 명의 사용자에게 수행 : 다수 사용자들의 멘탈모델 패턴을 발견
  
  카드 소팅은 오픈(Open) 카드 소팅과 클로즈드(Closed) 카드 소팅 두 가지로 나누어진다.
  - 오픈카드 소팅은 사용자가 레이블을 그룹화하고 그 그룹에 이름을 붙일 수 있음
  - 클로즈드 카드 소팅은 미리 이름이 정해진 그룹 안에 레이블 카드들을 넣음
  - 때문에 기존 정보구조를 평가할 때 사용하는 것이 좋음
  
  
  ※ 멘탈 모델 이란?
  - 현실 세계에서 무언가가 어떻게 작동하는지에 대한 사용자의 사고 과정을 설명하는 것
  - 사용자의 멘탈 모델을 발견해야 그들의 제품 사용 방법을 예측할 수 있음
  ex) 예를 들어, 우리가 영화관에 영화를 보러 갈 때를 생각해 보면?
  = 영화정보를 사이트에서 찾고, 예매를 알아보고, 영화관을 정하고, 가기 위해 주차장을 알아보고 등 머릿속에 딱 떠오르는 그 과정들이 바로 멘탈모델