UX/UI 디자인 설계 II (7주)

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 뿐만 아니라 제스처나 상태변화와 같은 인터렉션도 반영