UX/UI 디자인 프로세스 (2/2)

<UX/UI 디자인의 기본 프로세스 4단계>

▽ UX/UI 디자인 프로세스 (1/2)

UX/UI 디자인 프로세스 (1/2)

---

 

산출(Deliver)
IA, 이용 흐름, 인터렉션, UI, GUI 등의 각 UX/UI 디자인 영역을 상세하게 설계하는 작업

 

•  IA 설계 
  정보의 체계, 구조, 동선을 만들어내는 작업
  <IA 설계 순서> 정보 정의 → 정보구조 설계 → 내비게이션 설계 → 검색 설계 → 필터/태그 설계 → 레이블링
  
  
  • 정보 정의
    • 서비스에서 제공할 정보를 정의하는 작업
    • 정보 정의서에는 정보 계층구조, 유형, 현황, 정보 단위, 구성, 출처, 디지털 가공 여부, 제공 방식, 담당자, 업데이트 주기, 사용자 참여 방식 등의 정보가 들어간다.
      
      
  • 정보구조 설계
    - 대>중>소로 이어지는 정보의 계층구조를 만드는 것이 가장 주된 작업
    - PC 웹과 달리, 모바일에서는 단계가 지나치게 깊은 설계를 지양한다.
    
    
    • 계층구조(Hierarchy)
      • 주로 햄버거 모양의 전체 메뉴를 배치해 순차적으로 원하는 정보에 접근할 수 있도록 하는 방식
      • 정보 규모가 크고 단계적으로 정보를 탐색하는 경험이 많은 서비스에서 사용됨 (주로 PC에서 사용)
    • 허브&스포크(Hub&Spoke)
      • 홈 화면이 메뉴 링크(개인화, 추천, 바로가기, 목록 등)로 구성되어 허브 역할을 하고 개별 정보를 왔다 갔다 하는 방식
      • 정보 규모가 작고 홈 화면의 의존도가 높은 서비스에서 주로 사용 (넷플릭스, 유튜브, 틱톡같은 미디어 서비스)
    • 중첩 인형(nested doll)
      • 메인에서 출발해 탐색, 조회, 주 활동 등을 거치며 마지막까지 단선적으로 진행되는 방식
      • 정보 규모가 작고 이용흐름이 단선적인 서비스에 적합(날씨, 일정, 지도 같은 소규모 서비스 or 단일상품 예약 위주 서비스)
    • 대시보드(dashboard)
      • 허브&스포크 방식과 유사하지만 홈 화면에서 요약 정보를 보여주어 홈 화면의 역할이 훨씬 크다는 차이를 가진다.
      • 간단한 핀테크 앱(헬스케어, 파일 관리, 스케줄 등)에서 많이 채택한다.
        
        
  • 내비게이션 설계
    - 메뉴를 탐색할 때 쓰는 도구
    - 모바일에서는 내비게이션이 차지하는 비중이 PC보다 적고, 그 대신 제스처 (Gesture)와 상태변화(Transition)가 중요하다.
    - PC에서의 조작은 마우스 클릭, 올리기, 잡아끌기, 키보드 입력 등으로 제한되어있지만 모바일은 조작 방법이 매우 다양하기 때문에 제스처를 내비게이션의 한 요소로 활용할 수 있다
    
    
    
  • 검색 설계
    메뉴 탐색과 달리 키워드를 직접 입력하거나 조건을 여러 개 선택해서 원하는 정보로 빠르게 접근할 수 있는 탐색 방법
    • 검색에서 설계해야 할 항목
      • 검색어 입력 : 검색 입력창의 위치/ 자동완성/ 자동 추천/ 검색 기록
      • 검색 옵션 : 검색 카테고리 선택/ 상세 검색 옵션/ 검색 결과 필터링
      • 검색 결과 기능 : 연관 검색/ 추천 검색 결과/ 검색결과 카테고리화/ 검색 결과 정렬
      • 검색 리소스 : 소셜 검색/ 외부 리소스 검색/ 메타데이터 / 시소러스
    • 검색어 입력창에 안내 문구는 서비스 특색이 반영되어야 한다. (ex. '주문하려는 음식을 입력하세요.')
      
      
      
  • 필터/태그 설계
    특정 정보 범위 또는 특정 정보 하나에 바로 접근할 수 있게 돕는 중요한 경험요소
    • 필터 : 원하는 정보를 찾는 조건을 사용자가 직접 고민하고 제스처 해야 한다. (목적의식적인 동기에 적합)
      • 선택한 조건을 모두 만족하는 결과만 보여주는 방식 (AND 조건)
      • 선택한 조건에 해당하는 결과는 모두 보여주는 방식 (OR 조건)
      • 개인화와 밀접 > 매번 필터링하지 않아도 처음에 설정한 조건들이 자동으로 적용되면 좋은 UX를 제공할 수 있다.
    • 태그 : 미리 제시된 것 중에 하나를 선택만 하면 된다. (비 목적의식적인 동기에 더 적합)
      
      
      
      
  • 레이블링
    서비스의 메뉴명, 정보명, 검색 조건명, 필터명, 태그명 등을 설계하는 작업
    • 레이블링의 원칙
      • 모든 레이블은 정보를 대표해야한다.
      • 전문용어/ 기술적인 용어/ 함축어/ 유행어/ 생략된 용어를 피한다.
      • 사용자가 해야 할 서술적인 레이블이 좋다.
      • 중복되는 레이블은 피한다.
      • 하위 정보로 들어갈수록 보다 세밀화된 레이블을 적용
      • 같은 내비게이션에 배치된 레이블은 문법적으로도 동일하게 적용
      • 레이블은 일관된 폰트, 크기, 스타일로 구성
      • 특정 정보에 대한 레이블은 사이트 어느 곳에서든지 동일한 이름을 가져야 한다.
      • 레이블이 너무 길면 좋지 않다.
      • 품사를 통일한다.
      • 언어도 통일한다.

 

 

•  이용 흐름(User Flow 설계) 
  사용자가 특정 작업(Task)을 완료하기 위해서 서비스 내에서 움직이는 경로를 정리하는 것
  
  <이용 흐름의 구성요소>
  - 목표(User goal) : 사용자가 서비스를 통해 얻고자 하는 결과
  - 작업(Task) : 목표를 위해서 실제 사용자가 취한 방법
  - UI : 서비스가 사용자에게 정보를 제시하기 위한 접점
  - 행동 : 사용자가 작업을 완료하기 위해 UI 상에서 보이는 주 활동 및 보조 활동
  - 판단 : 사용자 행동 후 그 결과가 분기될 경우 그 분기점을 표시한 것
  
  <이용흐름의 설계 과정>
  1. 사용자 시나리오로부터 목표와 작업을 추출
  2. 작업흐름(Task flow) 설계
  3. 화면 흐름(Wire flow) 설계 > 와이어프레임 수준으로 대략적인 정보 구성과 배치
  4. UI 설계 과정에서 최종적인 이용 흐름을 완성한다. UI 뿐만 아니라 제스처나 상태변화와 같은 인터렉션도 반영

 

 

•  인터렉션 설계 
  좋은 인터렉션은 서비스 UI를 생동감 있게 만들고 이용 흐름을 보다 매끄럽게 이어주며, 딱딱한 정보구조의 바다를 원활하게 탐색할 수 있게 도와준다.
  
  • 제스처(Gesture)
    가장 기본적인 인터렉션 요소. 제스처가 매끄럽다는 의미는 사용자가 기대한 동작-결과 간 조합이 잘 맞아떨어졌다는 것
  
  
  • 선택/실행
    제스처를 통해 특정 UI 요소의 선택/실행이 동작되고, 그 결과로 UI의 변화가 일어난다.
  
  • 상태
    - 서비스가 사용자의 행동과는 무관하게 자신의 상태를 일시적으로 안내하는 것 (안내, 알림, 공지)
    - 사용자 행동에 따라 피드백을 주는 것 (에러 체크, 결과 피드백)
    - 서비스의 진행상태를 알려주는 것 (모래시계, 진행상태 바)
    • 이용안내
      • PC : 마우스를 올렸을 때(Hover) 툴팁 적용 가능
      • 모바일 : 숨겨진 툴팁이 있을 경우 탭을 해야 하기 때문에 불필요한 행위가 유발됨 > 이용안내는 고정된 방식으로 제공
    • 에러 메시지
      • 입력 상자(Form)의 아래쪽이 제일 좋다. 그다음으로 오른쪽 옆이 좋다.
      • 피드백을 연속으로 제시했는데도 사용자가 계속해서 에러를 내는 경우에는 몇 차례 뒤에 '도움이 필요하신 가요?' 안내 제시
    • 진행상태
      
      • 예상 대기 시간에 따라 표시 방식이 달라진다.
      
  • 상태 변화
    최근 모바일 트렌드를 이끄는 주요한 인터렉션 구성요소. 서비스가 매끄럽고 움직임이 강조된 상태변화를 UX/UI에 적용
    • 빠른 변화 (Quick Change)
      모바일에서 가장 기본적인 상태변화 방식, 버튼을 누르면 다른 화면으로 바로 변경된다.
    • 뒤집기 (Flip)
      - a화면이 뒤집어지는 효과와 더불어 b화면으로 변경되는 방식
      - 두 화면이 목적은 동일한데 형식이나 형태가 다를 경우 사용
    • 확장하기 (Expand)
      - 동일 화면 내에서 한 UI 요소가 다른 영역으로 점차 확장되는 방식
      - 주로 목록 화면 내에서 해당 목록의 숨겨진 내용을 화면 전환 없이 더 보여주려는 목적
    • 전체 화면으로 열리기 (Open to Full Screen)
      - 화면 내 한 UI 요소가 점점 커지면서 완전히 다른 화면으로 대체되는 방식
      - 맥락 상 다른 요소는 감춘 채 해당 UI 요소에만 집중하게 만들려는 목적
    • 수평적 움직임 (Horizontal slide)
      - 사용자가 큰 스와이프를 했을 때 화면이 좌우로 부드럽게 움직이며 전환되는 방식
      - 전체 메뉴를 열거나, 여러 개로 나뉜 메인 화면을 상호 오갈 때, 탭에서 다른 탭으로 이동할 때 주로 사용
    • 변환하기 (Transformation)
      - 화면 내 Ui 요소가 사용자의 제스처에 따라서 그 형태, 크기, 위치를 서서히 변화시키면서 완전히 다른 것으로 대체하는 방식
      - 사용자 선택/실행에 따른 변화를 화면 전환이나 팝업창 없이 그 자리에서 바로 보여주고자 할 때 사용
      
      
      
      
•  UI 프로토타이핑 
  UI는 서비스의 재료(Content)인 정보와 기능적 요소들을 목적(UX)에 따라 구성하고, 제한된 공간 내에서 배치하며, 그 구체적인 형태를 설계하는 것
  
  
  • UI 설계 시 지켜야 할 원칙
    • 사용자를 생각하게 만들지 않는다.
    • 사용자에게 부득이하게 정보 입력, 동의, 인증 과정을 요청할 때는 그것을 최소화해야 한다.
    • UI의 어떤 요소들은 의도적으로 강조하여 사용자의 눈길을 끌고 주의를 환기할 수 있어야 한다.
    • 블록이나 구분선 같은 UI 장치를 통해 정보의 구조가 암묵적으로 전달되어야 한다.
    • 가급적 단순하고 하향적으로 콘텐츠를 배치한다.
    • 일관된 레이아웃과 내비게이션 장치들을 통해 사용자에게 명확한 개념 구조를 전달한다.
    • 타깃 사용자의 능력을 고려해 폰트나 텍스트 난이도, 정보 디자인, 아이콘 등을 설계한다.
      
      
  • UI 설계 대상
    • 레이아웃 : 서비스의 메뉴 계층 구조에 따라서 일관된 레이아웃을 설계
    • 내비게이션 UI : 내비게이션이 화면상에 어떻게 나타나는지 설계
    • UI 기본 요소 : 입력 요소(Form), 아이콘, 버튼, 링크, 도움말, 안내 등의 기본 요소 설계
    • UI 복합 요소 : 서비스 전체에서 쓰이는 공통 UI 복합 구성을 설계한다.
    • UI 화면 설계 : 앞에서 정의한 레이아웃에 내비게이션, UI 복합 구성을 종합
    • 이용 흐름 설계 : 기설계된 작업흐름을 참고해 실제 화면을 이용 흐름으로 구성한다.
      
      
      
      
•  GUI 프로토타이핑 
  - 서비스의 콘셉트와 IA, 이용 흐름, 인터렉션을 가지고 GUI 디자이너들은 서비스의 톤 앤 매너를 구상하고 UI 프로토타입을 전달받아 GUI 프로토타이핑 작업을 진행한다.
  - UI가 기능적/ 논리적인 영역이라면 GUI는 감각과 무의식이 작용하는 영역
  • 게슈탈트 원리
    - 게슈탈트 원리를 잘 알면 GUI 프로토타이핑 작업에 큰 도움이 된다.
    
    (게슈탈트 원리 관련 내용 포스팅 예정입니다 / 링크 삽입 예정)
    
    
  • 각 정보의 구분, 대비, 강조, 리듬을 효과적으로 구현하는 것이 중요
    
    
    
    
•  UX 테스트 
  프로토타이핑 완성 후 의사결정권자에게 이를 보고하거나 실제 사용자들에게 검증하기 위해 진행하는 테스트
  
  
  • 사용성 테스트
    - 정량적인 지표(시간, 이동 단계, 에러율 등)를 측정하여 그 수치를 분석한 다음 서비스의 문제를 진단하는 방법
    - 작업(Task) 단위로 진행된다. 진단하고 싶은 작업을 정해 그것을 사용자에게 요청하고 사용자가 실행하면 추가 질의를 하는 식으로 진행
    
  • AB 테스트
    - 기존 서비스 vs 새로운 프로토타입을 가지고 어떤 것이 더 UX 품질이 높은지 사용자들에게 평가받는 방법
    
  • 원격 테스트
    - 원격 테스트 툴을 사용하여 불특정 다수나 이미 선정된 패널들을 대상으로 새로운 프로토타입을 검증받는 방법. 툴에 따라 UI/GUI 프로토타입은 물론 IA나 이용 흐름을 검증받을 수도 있다.
    
    
    
    
•  UX 가이드라인 
  테스트를 통해 프로토타이핑을 검증 및 수정하고 난 후 UI 기획자, GUI 디자이너, UI 개발자 등이 구축 업무를 진행할 수 있게 그동안의 산출물을 정리해서 전달하는 것
  산출 단계(Deliver)에서 작업했던 결과를 하나로 묶은 패키지

 

 

 

---

*해당 글은 조성봉 저자님의 책 <이것이 UX/UI 디자인이다>를 바탕으로 작성되었습니다.

이것이 UX/UI 디자인이다