03. UX 기획 구체화 : 논리적인 흐름 설계

디자인/UX UI

03. UX 기획 구체화 : 논리적인 흐름 설계

디자이너 샤론 2024. 7. 11. 15:13

목차
01. UX 기획 첫 단추 : 문제 정의 및 가설 수립
02. UX 기획 구체화 : 유저 사용 맥락 반영
03. UX 기획 구체화 : 논리적인 흐름 설계
04. UX 기획 문서화 : 화면 설계서 및 QA 문서

논리적인 흐름을 설계할 수 있는 방법론

1️⃣ 유저플로우 #화면 간의 이동
2️⃣ 와이어 프레임 #Lo-fi #아이디에이션
3️⃣ 정보 구조도 #그룹핑 #라벨링

정해진 순서는 없다. 유저 플로우와 와이어 프레임은 디자이너 개개인마다 선호도가 있어서 유저 플로우를 먼저 작업하는 것을 선호하는 디자이너도 있고 와이어 프레임을 먼저 작업하는 것을 선호하는 디자이너도 있다.

플로우를 먼저 설계한 다음에 화면에 뭐가 들어갈 건지 고민하는 디자이너가 있고, 화면에 뭐가 들어갈 건지 생각해 본 다음에 플로우를 구성하는 것을 선호하는 디자이너도 있다.

1) 유저 플로우 (User Flow)

유저가 제품이나 서비스를 이용하는 과정을 유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계.

유저가 최종 목표에 도달하기 위해 서비스 내에서 어떤 경로로 이동하며, 어떤 행동을 하는지 구체화하는 도구로 활용할 수 있다.
‘해피 패스’에 매몰되지 않고 다양한 경로를 고려해볼 수 있다는 장점이 있다.

해피 패스(Happy Path)
유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로
유저 플로우와 와이어프레임은 상호보완적인 도구로 활용할 수 있으며, 작업에 정해진 순서가 있는 것은 아니다.
유저 플로우 구성 요소

✅ 원형 : 시작/끝 프로세스의 시작이나 끝

✅ 사각형 : 동작/프로세스 유저의 입력이나 액션

✅ 마름모 : 조건 특정한 조건이나 결정 지점을 표현, 여기서 유저의 행동이나 시스템의 상태에 따라 플로우가 여러 가지로 나뉠 수 있다.

✅ 화살표 : 플로우의 방향 한 상태나 단계에서 다음 상태나 단계로의 흐름을 표현

☘️ 유저 플로우 예시
유저가 로그인 시도 시 소셜 로그인 및 이메일 로그인을 했을 때 경험할 수 있는 플로우를 도식화한 예시

TIP)
화면, 유저 액션, 시스템 액션, 모달의 경우 색상으로 구분하여 이해를 높일 수 있다.

화면 : 유저와 시스템의 상호작용이 발생하는 공간
유저 액션 : 유저가 화면에서 수행하는 행동 또는 입력
시스템 액션 : 유저의 행동에 의한 응답으로 시스템이 수행하는 동작
모달 : 특정 상황이나 유저의 행동에 대한 부가 정보나 선택지 제공

유저가 상품을 탐색하고 결제하기까지의 플로우를 도식화한 예시

2) 와이어프레임 (Wireframe)

화면의 레이아웃과 플로우를 단순한 선과 도형으로 설계하는 과정.

로우 피델리티(Lo-fi)로 작업되어 작업자들이 부담 없이 아이디어에 자유롭게 참여하고 의사결정에 기여할 수 있도록 도와주는 도구로 활용할 수 있음.
그래픽 요소 및 기술적인 세부사항을 배제하고 신속하게 결과물을 생성하여 작업자 간 커뮤니케이션을 위한 초기 비주얼을 제공할 수 있다는 장점이 있다. (화면 그릴 때, 그래픽 요소나 기술적으로 구현이 구현이 가능할지 혹은 디자인시스템에 맞는 건지 등 생각보다 고려할 것이 많은데, 이런 걸 다 빼고 신속하게 결과물을 생성할 수 있다.)
변경되는 요구 사항에 대응하여 빠르게 구조를 검토하고 수정하기가 용이하다.
논의의 초점을 (그래픽적으로 이게 유려한가 혹은 기술적으로 구현이 가능한가를 배제하고) 레이아웃과 플로우에 집중되도록 최소한의 색과 디자인을 사용하여 작업한다.
와이어프레임에 화면 이동에 대한 정보를 추가했을 때는 ‘와이어 플로우(Wire Flow)’라고 부르기도 한다.