User Flow, UX Flow, Flow Chart
혼란스러운 순간
User Flow, UX Flow, Flow Chart, Wire Fram, Wire Flow, Prototype, Task Flow,,,,?
자료를 읽을수록 비슷한 용어들이 등장하기 시작하였다. 초반에 개념을 확실하게 잡지 않으면 혼돈하기 십상일 것 같았다. 이번 챕터에서는 'Medium' 'CAREERFOUNDRY' 'Adobe Creative Dialogue' 자료들을 번역 및 정리해 보았다.
UX Design Flow (UX 디자인 흐름)
UX Design Flow의 개념은 심리학자 Mihaly Csikszentmihalyi가 처음으로 만들었다.
그는 사용자가 자신이 하는 일과 수행하려는 작업에 완전히 몰두하는 고도로 집중된 정신 상태를 UX Design Flow로 간주했다.
User Flow (사용자 흐름)
User Flow는 제품을 통한 사용자의 움직임을 설명하고 진입 점에서 최종 상호 작용에 이르기까지 사용자가 수행하는 모든 단계를 말한다. 또한 디자이너가 이러한 흐름 상태(사용자가 작업에 완전히 몰두하고 고도로 집중된 상태)를 가능하게 하는 제품을 만들기 위해 사용자의 인지 패턴을 이해하고 예측하는데 도움이 된다.
User Flow(사용자 흐름), UX Flow(UX 흐름) 또는 Flow Chart(흐름 차트)는 제품을 사용할 때 사용자가 취하는 전체 경로를 표시하는 다이어그램이다.
※다이어그램(Diagram)※
2차원 기하학 심벌을 이용해 정보를 시각화하는 기술이다.
특정 종류의 시각 표현 : 데이터의 성질을 표현하기 위해 선, 화살표 등의 시각적 고리들로 연결된 형태의 유형만을 말한다.
Flow Chart (플로우 차트)
Flow Chart는 온보딩 스크린 또는 홈페이지와 같이 소비자가 제품을 진입하는 시점을 시작으로 제품 구매 또는 회원가입과 같은 최종 조치 또는 결과로 끝나는 것을 말한다. 즉 프로세스 수행에 필요한 일련의 단계와 결과를 시각적으로 표현한 것이다.
또한 사용자의 전체 경험을 한눈에 확인할 수 있고, 이를 통하여 세부항목들을 구축해나가는데 유용하다.
사용자 여정의 각 터치 포인트는 Flow Chart에서 노드로 표시된다. 노드의 모양은 다양하지만 정해진 의미를 담고 있기 때문에 쉽게 식별할 수 있다. 예를 들어 타원은 프로세스의 시작과 끝을 나타내며 다이아몬드는 결정을 의미하므로 "예" 및 "아니오" 화살표가 표시된다. 사각형은 "로그인" 또는 "구매"를 의미한다.
Flow Chart 기호※Onboarding Screen(온보딩 스크린)※
처음 Onboarding이란 신입 사원이 새로운 직장에 적응하도록 돕는 것을 의하는 HR분야에서 비롯된 것이다. 이를 서비스에 적용해보자면 앱을 처음 활용하는 사용자들이 앱을 계속해서 사용할 수 있는 ‘명확한 이유와 가치’를 보여주는 것이다. 또한 소프트웨어 개발에서 Onboarding이란 사용자가 제품을 성공적으로 채택하고 완전히 사용하도록 돕는 것을 말한다.
※Node(노드)※
Node는 더 커다란 자료 구조의 일부분 하나하나를 의미할 수 있는데 이를테면 연결 리스트라든지 트리 자료 구조를 들 수 있다. 노드는 데이터를 포함하며 다른 노드와 연결될 수도 있다.
Node(노드)※Touch-Point(터치포인트)※
고객이 서비스에 유입되는 단계부터 서비스를 경험하는 전 과정에 걸쳐 거치는 물리적인 것, 인적 상호작용, 커뮤니케이션 등 모든 것을 말한다. 이런 단계들을 통해 잠재 고객은 브랜드가 제공하는 이점에 대하여 잘 알 수 있으며, 이를 통하여 제품 또는 서비스를 구입할지 여부를 결정할 수 있다.
UX 디자인에서 User Flow(사용자 흐름)를 사용하는 이유는 무엇일까?
▶ 직관적인 인터페이스를 만들 수 있다.
사용자가 "영역 내" 빠르게 도착할 수 있는 프로세스를 설계할 때의 주요 이점은 사용자가 제품을 구매하거나 가입할 확률을 높일 수 있다는 것이다. 또 다른 이점은 플랫폼을 통한 이동 용이성을 향상해 사용자의 시간이 다음에 수향 할 작업을 찾는 데 낭비되지 않도록 하는 것이다.
▶ 기존 인터페이스를 평가할 수 있다.
이미 출시된 제품의 경우 User Flow를 통하여 작동하지 않는 영역, 개선이 필요한 영역을 판별하는데 도움이 된다. 특정 시점에서 사용자가 정지하는 이유와 이를 해결하기 위해 수행할 수 있는 작업을 식별하는데 도움이 된다. 또한 각 페이지에서 사용자가 어떤 옵션을 사용할 수 있는지, 사용 가능한 경로가 사용자의 시간을 낭비하게 하고 있지는 않는 지를 확인 할 수 있다.
Task Flow (작업 흐름)
Task Flow는 특정 작업을 수행하는 동안 사용자가 플랫폼을 통과하는 방법에 중점을 둔다.
일반적으로 하나의 경로만 표시하며 기전 사용자가 흐름과 같은 여러 분기 또는 경로는 포함하지 않는다.
이것은 Flow Chart와 유사하다는 것을 알 수 있다. Task Flow를 다른 흐름과 구별하는 것은 범위가 작고 선형이라는 것이다. 사용자가 작업을 수행하는 방식 (예 : 등록, 로그인, 비밀번호 재설정)에 변동이 없는 것으로 가정한다.
Task Flow (작업 흐름)와 User Flow (사용자 흐름)
Task Flow는 선형 단일 옵션 특징으로 User Flow와 구분된다. 대조적으로 User Flow는 사용자의 자유 의지를 포함한다. 그렇기 때문에 모든 사용자가 동일한 작업을 수행하지 않을 수도 있고 예상과 다른 경로로 이동할 수 있다.
Wire Flow (와이어 흐름)
Wire Flow는 Wire Fram과 Flow Chat의 조합
Wire Flow는 Wire Fram과 Flow Chat을 결합하여 제품의 기능, 모양 및 사용자가 제품 내에서 어떻게 움직이는지에 대한 더 큰 컨텍스트를 제공한다. 사용자 흐름의 추상적 모양을 Wire Fram의 해당 화면으로 대체한다. 따라서 '홈페이지'라고 표시된 정사각형 대신 와이어 플로우에는 방문 페이지 용으로 설계된 실제 화면이 통합된다.
Wire Fram (와이어 프레임)와 User Flow (사용자 흐름)
User Flow는 제품 전체 흐름을 확인할 수 있고 클라이언트 및 동료에게 사용자가 앱 또는 제품을 진행하는 방법을 시각적으로 표시한다.
반면 Wire Fram은 훨씬 정적인 것으로 단일 페이지를 디자인할 수 있는 다양한 방법을 탐색하는데 도움이 된다. 이미지, 버튼 또는 텍스트 및 페이지 위치를 결정한다.
Wire Fram (와이어 프레임)와 Prototype (프로토타입)
▶ Wire Fram ('골격'이라고도 함)은 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것이다. (와이어프레임은 이름에서 알 수 있듯이 와이어로 설계된 모양입니다.) Wire Fram은 구조(페이지 요소의 구성 방식), 콘텐츠 (페이지에 표시될 내용) 및 기능 (인터페이스의 작동 방식)을 설명하는 데 사용된다.
핵심은 Wire Fram이 미래에 대한 스토리라는 점이다. Wire Fram을 통해 디자인 팀은 디자인의 현재 진행 상태, 향후 비전, 작업 경로 등을 서로 공유할 수 있다.
Wire Fram은 실제 완성된 제품과는 전혀 다른 모습이고, Wire Fram으로 알 수 있는 시각적 특징은 매우 제한적이다. 대부분의 디자인 요소(예: 이미지, 비디오, 텍스트 등)가 포함되기 전 상태이다. 대체로, 인터페이스에서 생략된 부분은 자리 표시자로 표시된다(이미지와 같이 실제 디자인 요소와 연결된 개체는 X표 된 상자나 필러 텍스트로 표시된다). 선, 자리 표시자 및 회색 음영 팔레트는 정보 아키텍처, 콘텐츠 및 레이아웃의 고려 사항을 말해준다. 프로젝트의 요구에 따라 다르지만, 일부 자리 표시자는 디자이너와 개발자가 모든 구성 요소가 어떻게 구성되어 있는지 보다 효과적으로 확인할 수 있도록 실제의 그래픽 요소나 텍스트로 발전하기도 하다.
Wire Fram▶ Prototype은 최종 제품을 미들 피델리티에서 하이 피델리티 사이의 품질로 재현한 것으로, 유저 인터페이스의 상호 작용을 시뮬레이션한다. Prototyping은 디자이너가 자신의 창작물과 실제로 상호 작용할 수 있는 첫 번째 단계입니다.
Wire Fram과 유사해 보이지만, 이와 달리 Prototype은 상당히 다른 면이 있다. Prototype은 아날로그 종이 Prototype부터 실제 소프트웨어 제품에 이르기까지 모양과 크기가 다양하다.
Prototype의 피델리티 레벨도 다양하다. Prototyping은 Low Fidelity Prototype(로우 피델리티 프로토타입) 제작과 High Fidelity Prototype(하이 피델리티 프로토타입) 제작의 두 가지 유형이 있다. Prototype의 피델리티는 프로토타입에 포함된 세부 묘사 및 기능 레벨을 나타낸다.
Wire Fram은 구조를 다루는 반면, Prototype은 사용성을 다룬다.
사용자에게 Prototype을 보여주고 일반적인 사용자 흐름을 따라갈 기회를 제공하는 것은 놀라운 통찰력을 얻을 수 있는 일이다. Prototype을 사용하면 사용자 경로를 테스트하고 전체적인 인터랙션 흐름에서 잠재적 문제점을 디자인 초기 단계에 찾을 수 있다.
Low Fidelity Prototype
High Fidelity PrototypeUI Flow (UI 흐름)
UI 흐름은 시각 자료 (예 : 모양, 와이어 프레임) 대신 단어를 사용한다. 이것이 유용한 이유는 일을 쉽고 빠르게 화면을 전달하고 피드백을 받을 수 있기 때문이다. 분명히 이것은 아이디어가 빠르게 이동하거나 기존 제품에 추가되는 새로운 기능이 거의 없는 프로젝트 초기에 매우 유용하다.
Site Map (사이트 맵)
Site Map은 웹 사이트 또는 응용 프로그램의 구조를 보여주는 계층적 다이어 그램이다. 또한 User Experience Designer 및 Information Architect 가 관련 콘텐츠를 그룹화하고 분류하는 데 사용된다.
고객은 사이트 맵을 통하여 그 사이트의 크기와 계층 구조를 빠르게 파악할 수 있다.
