[디자인 역량] 5회차_IA설계 이해 및 UX 가이드

한국 디자인진흥원에서 주관하는 2023 재직자 대상 디자인 교육을 수강했습니다.

_6회차 수업이며, 수업에 대한 중요한 부분을 작성해 보았습니다 :)

반응형

---

👇노션으로 보기

[디자인 역량] UI/UX 디자인 방법론 및 실습

---

📌 교육과정

[디자인 역량] UI/UX 디자인 방법론 및 실습, 30HR 교육

· UI/UX 개념과 최근 동향

· UI/UX 디자이너로서 대처방법

· UI/UX 방법론 실무 적용 방법

 

📌 강사 이정은(라이트브레인 팀장)

[디자인 역량] UI/UX 디자인 방법론 및 실습 5회차

IA 설계

IA 정의

시스템 내 정보의 구조, 흐름을 설계하는 작업

• 탐색하는 도구를 만드는 게 목적

⚠️ 정보 정의 ➡️ User Flow 정의 ➡️ 정보구조 설계 ➡️ 검색 설계 ➡️ 네비게이션 설계 ➡️ 레이블링 설계

 

1. 정보 정의

2. User Flow 정의

• 사용자 시나리오를 더 상세한 Flow로 정리
• 사용자 시나리오를 업무, 기능 단위의 순차적 흐름으로 표현

3. 정보구조 설계

• Top-down 방식(일반적) 또는 Bottom-up 방식
• 좁고 깊은 정보 구조보다 얕고 넓은 정보구조가 모바일에 바람직함

4. 네비게이션 설계

5. 검색 설계 

6. 레이블링 설계

• 네비게이션(=메뉴) 레이블 / 제목 레이블 / 색인어 레이블 / 아이콘 레이블 / 문맥 링크 레이블
• 레이블은 사용자 입장에서 정해야 함
• 버튼에는 서술적인 레이블을 많이 사용하는 추세 ➡️ 사용자가 해야 할 행동을 제시
• 메뉴명은 한 줄로

---

UX 가이드

정보 탐색 가이드

Hierarchy

• 계층적으로 접근하는 방식

Hub & Spoke

• 대표적인 예) 배달의 민족
• 메인 화면을 중심으로 다른 페이지들이 연결되어 있음

Nested doll

• 예시) 예약 서비스
• 순차적인 구조

Tabbed view

• 요즘 가장 많이 사용
• Tab 메뉴를 클릭해 각 정보들을 탐색하는 방식

Dashboard

• 예시) 헬스케어, 파일 관리, 핀테크 앱 등
• 카드 배치

Search

• 반드시 눈에 잘 띄는 영역에 상시적으로 배치

Filtered view

---

네비게이션 가이드

햄버거 메뉴

• 가장 일반적으로 사용
• 지도 서비스에 유용 ➡️ 화면 공간 확보 가능
• Tip) 햄버거 메뉴와 Tab Bar를 함께 사용

Tab Bar

• 옵션의 수가 5개 이하인 앱에 적당
• 앱 어디에서나 바로 접근 가능
• 고정 영역이 잡혀있음
• 아이콘과 텍스트 레이블을 함께 사용하는 것을 권장
• 더보기 메뉴 사용하면 안됨

---

인터랙션 가이드

모바일에서 인터랙션이 중요한 이유

• 사용자에게 피드백을 줄 수 있음
• 레이어 개념으로 정보 전달

모션으로 사용성을 개선하는 4가지 방법

• UI 요소의 역할에 대한 직관적 이해를 도와줌
• 사용자의 이해를 도와줌
• 연속성을 토대로 사용자가 기억, 생각할 수고를 덜어줌