[UI/UX] UserFlow, wireframe & prototype

📌 개인적인 공간으로 공부를 기록하고 복습하기 위해 사용하는 블로그입니다.
정확하지 않은 정보가 있을 수 있으니 참고바랍니다 :😸
[틀린 내용은 댓글로 남겨주시면 복받으실거에요]

프로젝트 들어가기 전에 꼭 봐야할 요소들, 기획단계에서 꼭 갖춰야 한다.

Userflow

UserFlow 다이어그램 도구 Miro, FigJam

User Flow 다이어그램 작성법

사용자 흐름을 다이어그램으로 작성할 때, 기본적으로 세가지 요소를 사용한다.

1. 직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )
2. 다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )
3. 화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜 주는 화살표

User Flow 다이어그램을 그리면 좋은 이유

1. 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음
2. 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관없는 기능을 발견하고 삭제할 수 있음

예제

웹사이트 개발 시

1. 초안

   

2. 게시글 페이지에서 다른 페이지로 이동할 수 있는 버튼이 없다 ⇒ 사용자에게 좋지 않은 경험

   

3. 특정 게시물을 쉽게 찾고 싶을 때 → 검색기능 추가

   

   User flow 다이어그램을 그리면서 사용자 흐름을 빈틈없이, 보다 더 편리하게 다듬어 나가는 과정을 거치면 UX를 개선할 수 있다.

wireframe & prototype

요약

	와이어프레임	프로토타입
작성 시기	기획 단계	개발 전 단계
작성 목적	화면 구조 설계	UI 상호작용 시뮬레이션
특징	정적	동적
피델리티	Low ~ Middle (High는 거의 작성하지 않음)	Middle ~ High (Low는 테스트에 적합하지 않음)

와이어프레임(wireframe)

와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다.

1. Low Fidelity Wireframe (Lo-Fi Wireframe)

• 손으로 빠르게 그린 수준의 와이어프레임을 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉽다.
• 아이디어를 구체화시키며 큰 그림을 잡을 때 좋습니다.

2. Middle Fidelity Wireframe (Mid-Fi Wireframe)

• Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬은 것
• Mid-Fi 수준에서는 와이어프레임을 봤을 때 해당 페이지가 어떻게 작동하게 될지 예상할 수 있다.

3. High Fidelity Wireframe (Hi-Fi Wireframe)

• 와이어프레임을 완성본에 가깝게 작성한 것
• 와이어프레임이라기보다는 목업에 가까운 형태
• 작성하는데 시간도 많이 들고 수정도 어렵기 때문에 와이어프레임을 작성하는 목적과는 맞지 않아 Hi-Fi한 수준까지 만드는 경우는 거의 없다

프로토타입(prototype)

• 실제 제품과 거의 흡사하게 구현한 것

  

• 페이지 이동과 상호 작용이 가능하다.
• 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적

1. Low Fidelity Prototype (Lo-Fi Prototype)

• 구체적인 내용이 작성되어 있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해 볼 수 있는 수준
• User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토가능

2. High Fidelity Prototype (Hi-Fi Prototype)

• 최종 결과물과 거의 유사한 수준
• 이 단계에서는 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능
• 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 가능

3. Middle Fidelity Prototype (Mid-Fi Prototype)

• Hi-Fi 프로토타입처럼 완성도가 높지는 않지만, Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입
• 사용성 테스트를 하기 위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성해 주는 것이 좋다.

html-css 카테고리 내 다른 글 보러가기