당신은 주제를 찾고 있습니까 “유저 플로우 – [앱UX/UI디자인] STEP4. 유저는 내 프로덕트와 어떻게 대화하나 / UX 디자인을 위한 유저플로 / 사용자 흐름 차트 만드는 저의 방법 공유 할게요.“? 다음 카테고리의 웹사이트 https://you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://you.maxfit.vn/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 ux sun 이(가) 작성한 기사에는 조회수 5,815회 및 좋아요 298개 개의 좋아요가 있습니다.
유저 플로우 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 [앱UX/UI디자인] STEP4. 유저는 내 프로덕트와 어떻게 대화하나 / UX 디자인을 위한 유저플로 / 사용자 흐름 차트 만드는 저의 방법 공유 할게요. – 유저 플로우 주제에 대한 세부정보를 참조하세요
#UX디자인 #사용자흐름 #유저플로
*오류 수정 : 2:12 영상에서 보여준 다이아몬드 도형 (Resend Verification Email?) 에 Yes, No 경우를 붙이는 부분이 빠졌어요. 제가 공유한 파일 받아서 다시 봐주세요. 빠진 부분 수정했어요.
안녕하세요. 오늘은 UX 디자인하는 단계에서 리서치 하고 난 다음 만들어지는 사용자 흐름, User flows에 대해서 제가 하는 방법을 영상으로 만들어 봤어요. 유저 플로 보기에는 좀 딱딱하게 보일 수 있는데. 여러분들이 저 플로를 그리는 작업을 몇 차례 하시다 보면 전체 그림이 머릿속에서 정확하게 그려지실 거예요. 제가 실무에서 만드는 유저 플로에 대해서 공유했는데 유저 플로 공부하시거나 만들려고 준비하시는 분들께 도움이 되었으면 좋겠어요.
————————–
급하게 상담이 필요하신 분 / 멘토가 필요하신 분들을 위해 제가 1:1 상담 창을 만들었습니다.
1:1 Career Coffee Chat – https://calendly.com/uxsun/
이제 커피챗 https://calendly.com/uxsun/ 통해서 시간 잡아주시면 제가 자세하게 준비해서 1:1 상담해 드릴게요.
————————–
Time Stamp
0:00 미리보기
0:26 영상 주제 소개 : User Flows (사용자 흐름)
0:40 유저 플로 정의
2:37 왜 유저 플로를 이용하나? 1) 직관적인 사용자 흐름, 인터페이스를 위해
3:26 2) 프로덕트 전체 그림을 이해하기 위해
4:34 3) 협업을 효율적으로 하기 위해
8:02 사용자 흐름 차트 유형
8:21 1)작업 흐름 (Task Flows)
9:28 2) 와이어 흐름 (Wire Flows)
10:31 3) 사용자 흐름 (User Flows)
12:11 언제 어떻게 유저 플로우 작업을 하나?
————————–
Download
📥 Design Tool : https://www.figma.com/
📥 User Flows Sample PDF : https://drive.google.com/file/d/1JcT-u1tC1LI0xvdNG0L9VVHoqi2LDnuT/view?usp=sharing
📥 User Flows Sample Figma file : https://drive.google.com/file/d/1XLq1VJ7kcPUWyQwZE1lWlqPcwuzKu5ZO/view?usp=sharing
📥 Font for the design file : https://blog.naver.com/ktk350/222046340096
————————–
References
Wireflow : https://dribbble.com/shots/5972047-Wireflow-for-Traveling-App/attachments/1284235?mode=media
Task flows : https://medium.com/erika-harano/ux-task-flows-versus-user-flows-as-demonstrated-by-pancakes-896e78a98026
Product Requirements Documents
https://clevertap.com/blog/product-requirements-document-template/
https://uxpin.medium.com/how-to-write-a-painless-product-requirements-document-508ff6807b4a
https://lvivity.com/write-a-good-product-requirements-document
https://www.atlassian.com/agile/product-management/requirements
———————————-
Music in the video
All Music Licensed to YouTube by (on behalf of Epidemic Sound)
🎵 Descartes – Bonsaye
🎵 Granite Stone (Instrumental Version) – Daxten
🎵 Reach out to Me (Instrumental Version) – Daxten
🎵 Weather Any Storm (Instrumental Version) – Cody Francis
유저 플로우 주제에 대한 자세한 내용은 여기를 참조하세요.
유저플로우(User Flow) 그리는 방법 – 브런치
유저 플로우란 a series of actions a user takes to achieve a goal로,. 유저가 목표를 달성하기 위해 서비스 내에서 행하는 일련의 행위를 말한다.
Source: brunch.co.kr
Date Published: 8/26/2021
View: 5247
유저 플로우 :: user flow – 디자이너
user flow (이용 흐름 설계) 유저플로우(user flow)는 비슷한 용어가 참 많다. (task flow, wire flow, flow chart) 등등. 복잡한 듯 보이지만 하지만 …
Source: heesangs.tistory.com
Date Published: 8/28/2022
View: 2104
태스크 플로우, 유저 플로우, 플로우차트, 플로우 다이어그램, IA …
유저 플로우는 태스크 플로우와 유사한데, 이것은 서로 다른 유저가 서로 다른 태스크를 수행하거나 다른 경로로 이동할 수 있다는 점(대개 서로 다른 …
Source: deep-wide-studio.tistory.com
Date Published: 3/1/2021
View: 935
앱디자인 | 유저 플로우 툴 추천 – Overflow / user flow tool
XD에서 프로토타입을 바로 만들어볼 수도 있지만, 개발자나 기획자에게 유저플로우를 한번에 이해시키기에는 한눈에 도식화 할 필요가 있었다.
Source: hongpage.kr
Date Published: 7/24/2021
View: 6291
[UX 스터디] What is User Flow? – Try Everything
유저 플로우가 뭘까? – 유저 플로우는 유저가 의미있는 목표를 이루기 위해 짚는 단계(과정)들을 말합니다. – 프로덕트 개발팀에서의 와이어프레임과 …
Source: bebraver.tistory.com
Date Published: 5/2/2021
View: 1281
User flow 는 또 다른 와이어프레임일까? – 네이버 블로그
유저 플로우란 사용자가 의미있는 목표를 성취할 수 있도록 도와주는 일련의 단계이다. . 유저 플로우와 전 포스팅에서 언급되었던 와이어프레임은 …
Source: m.blog.naver.com
Date Published: 2/8/2021
View: 4936
유저 플로우 케이스스터디: ①앱에 AI 하나 들이셔야 합니다
‘유저 플로우’란 사용자가 목표를 달성하기 위해 서비스 내에서 행하는 일련의 행위를 나타낸 그림입니다. 유저 플로우는 사용자의 ‘흐름’, ‘움직임’을 …
Source: yozm.wishket.com
Date Published: 8/14/2022
View: 3837
주제와 관련된 이미지 유저 플로우
주제와 관련된 더 많은 사진을 참조하십시오 [앱UX/UI디자인] STEP4. 유저는 내 프로덕트와 어떻게 대화하나 / UX 디자인을 위한 유저플로 / 사용자 흐름 차트 만드는 저의 방법 공유 할게요.. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
![[앱UX/UI디자인] STEP4. 유저는 내 프로덕트와 어떻게 대화하나 / UX 디자인을 위한 유저플로 / 사용자 흐름 차트 만드는 저의 방법 공유 할게요.](https://i.ytimg.com/vi/TwnJMTK4adc/maxresdefault.jpg)
주제에 대한 기사 평가 유저 플로우
- Author: ux sun
- Views: 조회수 5,815회
- Likes: 좋아요 298개
- Date Published: 2020. 12. 19.
- Video Url link: https://www.youtube.com/watch?v=TwnJMTK4adc
유저플로우(User Flow) 그리는 방법
지난 유저 스토리, 유저 시나리오에 이어 두 번째 공부할 내용은 바로 유저 플로우(User Flow)이다.
(기획엔 참으로 유저 들어가는 내용이 많다… ㅎㅎ)
https://brunch.co.kr/@b30afb04c9f54dc/20
유저 플로우란?
유저 플로우란 a series of actions a user takes to achieve a goal로,
유저가 목표를 달성하기 위해 서비스 내에서 행하는 일련의 행위를 말한다.
유저 플로우를 사용하는 이유
이 플로우의 중심은 기획자도 개발자도 아닌, 바로 우리 서비스를 사용하는 유저이다.
개발 구조를 짜기 위하거나, 디자인적인 디테일을 잡기 위함이 아니라,
서비스 내에서 유저가 어떻게 행동할지를 정리해보는 것이다.
유저 플로우 그리는 방법
가장 쉬운 단계에서부터 살을 점점 붙여나가는 게 더 쉽다.
1. User Goal
유저 플로우의 제목이 될 유저 목표이다. 유저의 서비스 내에서 이루고자 하는 목표가 뭔지 한 문장으로 정리해본다. 단순하고 깔끔하게 적을 수록 좋다.
예를 들어 오늘의 집에는 마음에 드는 상품을 스크랩해두었다가 구매하는 기능이 있다.
스크랩 기능의 유저 플로우를 그린다면 유저 골은 ‘상품을 스크랩한다’가 되겠지!
User Goal
2. Task Flow
유저가 목표를 달성하기 위해 실행해야하는 각 단계를 구분하여 그려본다.
오늘의 집에서 상품을 스크랩하기 위해 거쳐야하는 단계는 뭘까 고민이 되었다.
‘서비스에 진입한다’ 부터 첫 단계를 시작하는 게 맞을까?
로그인은 단계에 포함을 안시키는 건지도 궁금하고…
이미 로그인해서 사용하고 있는 유저가 있을 수도 있으니! 필수 단계는 아니라고 생각하고 제외한다.
Step 1> 상품리스트에 진입한다
Step 2> 상품상세페이지로 이동한다
Step 3> 스크랩 아이콘을 누른다
Task Flow
3. Wire Flow
와이어프레임과 플로우차트가 섞인 개념이다.
다음 단계로의 이동할 정도의 변화를 주는 기능을 기준으로 와이어프레임을 그리고,
주요 플로우를 추가한다.
플로우 화살표에는 어떤 행위가 다음 단계로의 변화를 일으키는지 간단하게 적었다.
Wire Flow
4. User Flow
대망의 유저 플로우 그리기 단계이다. 목표를 이루기까지의 인터랙션을 정리한다.
조건에 따라 달라지는 플로우가 있다면 구분점을 넣어 각각의 플로우로 연결한다.
나는 ‘만약에 ~면 어떡하지?’라고 걱정하는 습관이 있는데, 그 걱정을 유저 플로우에 조금 담아서
‘어? 만약에 로그인 안했으면 어떡하지?’ ‘어? 만약에 상품이 아니라 리스트에서 스크랩하면 어떡하지?’
등 여러 케이스를 생각해본다.
그 고민에서 다음 단계가 결정된다.
스크랩 아이콘을 눌렀을 때 로그인을 안해놨으면 로그인을 먼저 시키고 다시 상품상세 페이지로 돌려보낸다.
상품목록에서 바로 스크랩을 했으면, 스크랩 레이어를 목록 화면에 띄워야겠다 등등 말이다.
User Flow
회사에서 기획서를 쓸 때, 전반적인 사용 동선을 이해시키기 위해
화면설계서 앞에 이런 플로우를 먼저 넣곤 했다.
사실 제대로 된 이름도 모르고 유저의 사용동선이라는 개념으로 다가갔는데,
그게 사실은 이런 User Flow였던 것 같다.
앞으로 기획서 쓸 때는 제목에 멋지게 User Flow라고 달아봐야겠다.
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a
https://brunch.co.kr/@hyoi0303/1
https://blog.overflow.io/8-tips-for-creating-better-user-flows-e46eb0d2a2c6
유저 플로우 :: user flow
user flow (이용 흐름 설계)
유저플로우
유저플로우(user flow)는
비슷한 용어가 참 많다. (task flow, wire flow, flow chart) 등등.
복잡한 듯 보이지만
하지만 한마디로 정의한다면
새로운 형태의 “와이어프레임” 정도로
정의하면 되겠다.
정의
1. 사용자가 특정한 작업 (task)를 완료하기 위해 서비스 내에서 움직이는 경로를 정리하는 것.
2. 사용자 시나리오보다 구체적이며, UI(화면), 행동, 판단으로 표현된다.
구성요소
1. 목표(user goal) : 사용자가 서비스를 통해 얻고자 하는 결과. (상품 구매, 정보 획득, 소통 등)
2. 작업(task) : 목표를 위해 유저가 수행하는 것. (로그인, 회원가입, 장바구니 담기, 검색 등)
3. UI: 화면. (검색화면, 필터링 UI, 로그인 팝업 등)
4. 행동 : UI 상의 주 활동 및 보조 활동. (검색, 필터링, 선택, 예약, 아이디(비번) 입력
5. 판단 : 사용자 행동 후 (로직에 의해) 그 결과가 분기될 경우. (결과값을 찾았나?, 로그인되어있나?, 등)
설계과정
1. user goal : 목표 설정
2. task flow : 작업흐름
action level
유저의 행위에 초점을 둔 흐름이라 생각하면 쉽다.
예) 로그인> 비밀번호 불일치> 비밀번호 재설정> 로그인 등, 하나의 작업에 하나의 흐름도를 나타내며,
플로우차트처럼 (진입 – 목표 달성)까지 모든 흐름을 정의하는 것도 가능하다.
task flow
3. wire flow : 화면 흐름 (대략 적인 정보 구성과 배치만 나타냄)
component level
플로우 차트(flow chart)가 개발 로직을 위한 다이어그램이라면
와이어 플로우(wireflow)는 유저의 패턴이 반영된 플로우라고 볼 수 있고
이것은 초기의 와이어프레임과 가깝다. (그래서 사실상 4.user flow로 대체되기도 한다.)
wire flow
4. user flow
interaction level
유의할 점
서로 다른 유저가 서로 다른 태스크를 수행하거나 다른 경로로 이동할 수 있다는 것도 고려한다.
(즉, entry point가 다르다.)
예) 비밀번호 불일치의 경우.
유저 1. 나가기
유저 2. 비밀번호 찾기
유저 3. 비회원으로 쇼핑
유저 4. 환경설정 탭에 들어가서 로그인.
user flow
참고 : By Camren Browne / career foundry
사용하는 이유
1. 직관적인 인터페이스 생성
페이지의 주요 task를 파악할 수 있다.
인터페이스의 효율성을 쉽게 평가할 수 있다.
2. 기존 (as-is)에서 (to-be)에 유용하다.
무엇이 작동하고, 무엇이 작동하지 않는지, 어떤 부분의 개선이 필요한지 알 수 있다.
유저가 특정 지점에서 시간을 끈 이유를 파악할 수 있다.
3. 고객, 이해관계자 혹은 팀원에게 설명할 경우.
앱의 흐름을 쉽게 공유한다.
(소통이나 회의를 통해) 유저의 관점에서 보다 생산적인 환경을 구축할 수 있다.
플로우차트
터치 포인트
사각형 : UI / 화면 : page
동그라미 : 행동 : action
마름모 : 판단 : logic
By Camren Browne / career foundry
추가 및 보완자료
보완자료 : uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a
연습 자료 : youtu.be/TIV1y11xz7k
태스크 플로우, 유저 플로우, 플로우차트, 플로우 다이어그램, IA? Task
728×90
반응형
개념을 하나씩 정리하고 가자
*UX 스토리보드: UX 구현에 수반되는 사용자와 태스크, 인터페이스 간 상호작용을 시각화하여, 개발자/디자이너의 의사소통을 돕는 도구이자 완성해야 할 앱 서비스와 예상되는 사용자 경험을 미리 보기 위한 방법론을 말한다.
1. Feature List : UX concept/ UX Needs의 구현에 필요한 기능 리스트
2. User Task Flow : 해당 기능수행과 사용자의 행위 맵핑 및 흐름도
3. IA (Information Architecture) : 정보의 구조화와 위계관계망(우선순위)
4. Wireframe : 해당기능 구현을 위한 인터페이스 요소의 배치와 화면 구조
5. Workflow : 여러 개의 와이어 프레임 또는 개별 기능 간 화면 전환 흐름
지난 Feature List 포스팅에서 Feature List > User Task Flow> Information Architecture > Wireframe > Workflow 이런 순서로 설계가 진행된다고 한 바 있다. UXUI 개괄에 대한 특강을 들은 적 있는데, 그 때 정리한 내용이다. 그런데 단계 하나 하나에 대한 개념 정의부터 다시 짚고갈 필요가 있다고 여겼다. 두 번째 단계인 User Task Flow에 대해 알아보기 위해 검색해보니, Task Flow, User flow, User Task Flow, flowchart, flow diagram과 같은 단어들이 뒤섞여 나와서, 대체 어떤 차이가 있는건지 헷갈렸기 때문이다.
“UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff” 라는 글과 “What are the differences between user flows, task flows and workflows?”라는 도움이 될 만한 글을 발견했고, 이를 중심으로 해당 페이지의 내용 일부를 번역해가며 정리하고자 한다.
1. What is Flow?
플로우를 만들면, 특정 페이지에서 사용자의 방문 전 후로 어떤 일이 일어나는 지 디자이너가 생각할 수 있도록 도와주게 된다. 개발자가 워킹하는 프로토타입을 만드는 첫 단계에 돌입하기 전에, 플로우는 서비스가 어떻게 작동할지 이해할 수 있게 한다.
2. Flowcharts/ Flow Diagram
플로우차트는 복잡한 시스템/활동에 포함된 사람이나 물건의 움직임/행동의 순서를 다이어그램으로 만든 것이다. ‘형식’을 의미하는 것 같다. (따라서 플로우차트와 플로우 다이어그램은 사실상 같은 의미다.)
3. Task Flow vs User Flow
태스크 플로우와 유저 플로우는 크게 다르지 않다. 이 둘의 목표는, 최소한의 마찰로 태스크를 성공시키기 위해 유저의 활동을 최적화하는 것이다. 둘 다, 기능이 실제 개발되기 이전, 생각을 돕는 역할을 한다.
Task Flow
태스크플로우는 단일한 플로우로, 모든 사용자들에 의해 특정한 액션으로 유사하게 수행된다. 즉, 같은 Entry Point를 공유하는 유저들의 태스크를 다룰 때 적합하다는 의미다.
ex1. 회원가입
ex2.알람시계 모바일 앱) 아마도 ‘알람 시간을 설정하다’와 같은 태스크는 모든 유저들에게 같은 방식으로 수행될 것이다.
Task Flow/ 출처: https://ux.stackexchange.com/questions/45405/what-are-the-differences-between-user-flows-task-flows-and-workflows
User Flow
유저 플로우는 태스크 플로우와 유사한데, 이것은 서로 다른 유저가 서로 다른 태스크를 수행하거나 다른 경로로 이동할 수 있다는 점(대개 서로 다른 Entry Point에 기인한다)을 강조한다는 것이 다르다. 유저 플로우는 전형적으로 퍼소나나 특정 Entry Point에 함께 붙는다.
유저 플로우는 태스크 플로우와 유사한데, 이것은 서로 다른 유저가 서로 다른 태스크를 수행하거나 다른 경로로 이동할 수 있다는 점(대개 서로 다른 Entry Point에 기인한다)을 강조한다는 것이 다르다. 유저 플로우는 전형적으로 퍼소나나 특정 Entry Point에 함께 붙는다. 예를 들어, 두명의 유저가 Amazon에서 Nirvana CD를 구매하기 위해 검색중일 때, 이 둘은 완전히 다른 여정으로 이를 수행할 수 있다. 한명은 브라우저의 주소창을 통해 아마존 시스템에 엔터해서, 그녀가 사고자하는 앨범을 검색하고, 장바구니에 추가&구매할 수 있다. 다른 한 명은 구글에 검색해서, 링크를 통해 아마존 상품페이지에 도착하고, 후기를 읽어보고, 아마도 다른 CD와 비교 등을 할 수 있다.
User flow_ 유저 시나리오와 함께 한다. / 출처: https://ux.stackexchange.com/questions/45405/what-are-the-differences-between-user-flows-task-flows-and-workflows
유저 플로우는 미니 유저 저니(고객 여정)이라고 생각할 수 있다. 이 플로우는 직선형이 아니어도 되고, 비선형적인 경로로 가지를 쳐나갈 수 있다. 이 경로를 결정하면서, 경로를 통해 가능한 방향 전환을 볼 수 있고 사용자 경험을 최적화할 수 있다. 유저 플로우는 간단하게 시작할 수 있고, ‘Red routes’ㅡKey user journey를 결정하는데 도움을 준다.
※즉, 플로우차트/플로우다이어그램은 표현의 ‘방식, 형식’을 의미하는 것이고, 내용에 있어서는 태스크 플로우/유저 플로우로 구분되는 것이다. 태스크 플로우와 유저 플로우의 두 개념은 살짝 다르지만, 의미는 유사하며 User Task Flow로 묶어서 한 번에 표현 가능한 것 같다.
IA (Information Architecture)
IA는 플로우차트/플로우다이어그램에서 확인한 기능들을 정보의 위계와 관계망으로 구조화하는 것을 의미한다. 아래의 첫번째 이미지가 ‘플로우차트’라면, 그 플로우차트를 토대로 두번째 이미지인 IA를 만들 수 있게 되는 것이다.
영화티켓 예매 플로우 차트/ https://carrotdesign.tistory.com/entry/UXUI-%EA%B8%B0%ED%9A%8D-11%EA%B0%95 영화티켓 예매 IA/ https://carrotdesign.tistory.com/entry/UXUI-%EA%B8%B0%ED%9A%8D-11%EA%B0%95
정보 아키텍처는 웹 사이트, 앱 또는 기타 제품의 구조를 만드는 것으로, 사용자는 이를 통해 자신이 어디에 있고, 원하는 정보가 현 위치와 비교해 어디에 있는지 파악할 수 있다. 정보 아키텍처를 바탕으로 내비게이션, 계층 구조 및 범주화가 이루어진다.
IA 예시/ https://blogs.adobe.com/creativedialogue/design-ko/what-does-a-ux-designer-actually-do/
그동안 자주 마주했지만 명확하게 의미 구분을 하지 못했던 Flow chart, Flow Diagram, Task Flow, User Flow, IA의 개념을 이해할 수 있었다. 사실 리서치를 진행하면서 이것 외에도 유사한 네이밍의 개념들이 등장했는데, 포스팅에는 포함하지 않았다. 오늘 등장한 모든 개념을 포함해서 UX에 관련된 개념들이 워낙 오래되지 않은 학문 분야라 그런지, 완전하게 정립된 하나의 ‘정의’랄게 없었다. 누군가가 통상 ‘이런 의미로 쓰인다’하고 정리해둔 것들이 많았다. 실제 다양한 프로젝트에 적용해 가면서 프로젝트 성질, 성격에 맞게 영리하게 활용해나가는 게 중요하겠다는 생각이 든다.
다음 포스팅에서는 이어서 Wireframe, Workflow 대한 공부를 이어가도록 하겠다.
참고자료
-https://carrotdesign.tistory.com/entry/UXUI-%EA%B8%B0%ED%9A%8D-11%EA%B0%95
-https://blogs.adobe.com/creativedialogue/design-ko/what-does-a-ux-designer-actually-do/
하단 페이지들의 일부를 번역했습니다.
-UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff
https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d
-What are the differences between user flows, task flows and workflows?
https://ux.stackexchange.com/questions/45405/what-are-the-differences-between-user-flows-task-flows-and-workflows
.
.
.
.
DEEP WIDE STUDIO
스피노자는 말했습니다. “나는 깊게 파기 위해 넓게 파기 시작했다.”
저는 ‘철학’을 전공하며 인간의 근본에 대해 탐구했고,
인간의 일상을 기술적으로 혁신하는 ‘IT 업계’에 관심을 갖게 되었습니다.
깊어지기 위해, 천천히 넓은 물로 나아가는 중입니다.
인스타그램으로 더 가까이 소통해요!
Instagram @skyblueyekk
728×90
반응형
유저 플로우 툴 추천 – Overflow / user flow tool
반응형
Adobe XD로 앱 화면을 60페이지 넘게 작업을 마치고…
이 많은 내용을 어떻게 하면 개발자에게 잘 전달할 수 있을까 고민을 많이 했다.
XD에서 프로토타입을 바로 만들어볼 수도 있지만, 개발자나 기획자에게 유저플로우를 한번에 이해시키기에는 한눈에 도식화 할 필요가 있었다. 여기저기 알아보다가 알게된 툴이 있는데 아주 좋은 것 같다!
Overflow 툴 소개
The world’s first user flow diagramming tool tailored for designers. Build and present beatiful user flow diagrams that tell a story.
오버플로우는 세계 최초 디자이너에게 최적화된 유저플로우 도식화 툴이다.
스토리를 말해주는 아름다운 유저플로우 도형을 만들고 보여줘라!!! 라고 말하고 있다
overflow.io/
호환 가능한 프로그램
Overflow의 가장 좋은 점.
Sketch, Figma, XD, Photoshop 과 호환이 된다는 점이다.
Adobe XD에서 작업하고 overflow로 내보내기를 클릭만하면, overflow 툴에서 바로 유저플로우 작업이 가능하다.
Adobe XD에서 Overflow 로 화면 내보내는 방법
1. 플러그인에서 overflow를 추가한 다음
2. 내보낼 화면을 전체 선택 한 후, 플러그인 창에서 overflow 를 클릭
3. [Sync to Overflow] 클릭 후 새 문서를 열건지, 기존에 문서에 덮어씌울건지 창이 뜨는데 알맞게 설정 후 넘어가면 된다.
4. 어도비XD에서 작업한 것을 그대로 가져올 수 있다.
나중에 XD에서 업데이트를 하더라도 덮어씌울수 있어서 아주 편리하다.
60페이지가 넘는 화면들….
5. 상단의 툴이 아주 심플한데, 도형이나 텍스트를 넣을 수 있고, 디바이스 기기 모양을 넣을 수도 있고,
유저플로우를 만드는데 필요한 것은 다 있다.
이런식으로 흐름을 한눈에 볼 수 있도록 도식화 할 수있다.
화살표 중간에 라벨을 붙일 수 있어서 어떤 경우에 화면을 이동을 하는지 설명하기도 좋다.
이 영상 하나만 봐도 바로 사용법을 익힐 수 있을 정도로 직관적이고 쉬운 툴!
단점은…
바로 한달만 무료라는점.
한달 사용 이후에는 한달에 $12씩 내야 이용이 가능하다.
그치만 너무 좋은 툴이라, 앱 디자인하는 분들에게는 유용할 것 같다. (나도 조만간 결제하겠지…)
아직까지 이만한 툴을 보지 못했다.
반응형
[UX 스터디] What is User Flow?
작성일 : 2019. 10. 2. 15:20
# 유저 플로우가 뭘까?
– 유저 플로우는 유저가 의미있는 목표를 이루기 위해 짚는 단계(과정)들을 말합니다.
– 프로덕트 개발팀에서의 와이어프레임과 비슷한 특성을 갖습니다.
# 그렇다면 와이어 프레임의 역할은 뭘까요?
– 와이어프레임은 디자인 단계를 짚어볼 수 있는 좋은 도구인데요, 와이어프레임이 커버할 수 있는 것들로는 다음과 같은 다양한 것들이 있습니다.
; low-fi mockups, blcokframes, interfacemonos, wires 까지 가능합니다.
– 와이어프레임의 장점은 다음과 같습니다!
1. Fast iterations : 아이디어 구현에 있어 디자이너와 디자이너가 아닌 팀원 모두가 빠르게 이해할 수 있도록 하고 필요시 바로 수정할 수 있습니다.
2. Better Communication : 완벽한 결과물이 아니라 전체적 look을 제시하여 개발자와 좀 더 편하고 쉽게 소통할 수 있습니다.
# 와이어 프레임이 User Flow와 무슨 관련이 있을까요?
이쯤되면 궁금해집니다. 와이어프레임과 유저플로우는 같은건가..? 아니면 그냥 유사하지만 다른 무언가인가..? 무슨 차이가 있을까?
일단, 굉장히 공통점이 많은데요, 둘 다 여러 단계의 resolution과 완성물의 fidelity 를 갖추고 있습니다. 둘다 iteration speed를 높일 수 있도록 하고, 프로젝트 팀과의 사이에 커뮤니케이션을 원활하게 해준다는 장점도 있습니다.
# User Flow에서 여러 레벨의 resolution 무슨 말일까?
1. 사용자가 궁극적으로 이루고자하는 목적’goal’을 정의합니다.
2. 다음으로는 Task Flow를 rough하게 그려봅니다. 각 단계에서 ‘사용자’가 어떤 행동을 취할지 생각해보는게 도움이 됩니다. 그리고 모든 단계에서 굳이, 억지로 emotion을 지정하려고 할 필요는 없습니다. 예를 들어, 설정사항 업데이트에 대한 feeling을 굳이 묘사할 필요는 없겠죠.
3. wireflow (=visual user flow) 을 작성해봅니다.
여기서는 유저가 마주치게 되는 디지털 환경을 구체적으로 적어줍니다. 스크린, 메시지, 광고 화면까지 모두 정리해봅니다. 여기서 스크린 구성자체보다는 유저의 사용 흐름에 집중합니다. 아래 예시 화면처럼 간단한 라벨을 붙여서 흐름에 대한 이해를 돕기만 해도 됩니다.
4. User Flow 작성하기
– 이제 유저플로우를 다듬어 볼 차례인데요, goal을 성취하기 위한 pages, logic, actions을 모두 정의해줍니다. 여기서 중요한 것은 와이어플로우를 보는 모든 사람들이 이해할 수 있도록 만들어야 한다는 겁니다.
** 플로우에 필요한 모든 정보가 와이어프레임에 포함되었는지 확인합니다.
– 바람직한(긍정적) 플로를 따라가지 않을 경우 어떤 일이 발생하는지
– 인터페이스에 변동이 생긴다면, 그것을 만드는 원인이 무엇인지
# User Flow 작성에 유용한 tool은 어떤 것이 있을까요?
– Flowmapp : 사이트맵과 유저플로우를 결합
– Overflow : 와이어 플로우를 쉽고 빠르게 만들 수 있게 해줌
– Invision
– Marvel : 프로토타입으로부터 유저 플로를 만들어 줌
– Primary
– Pen & Paper and whiteboards!
내용 출처
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a
User flow 는 또 다른 와이어프레임일까? _ What is user flow?
User flow는 무엇일까?
유저 플로우란 사용자가 의미있는 목표를 성취할 수 있도록 도와주는 일련의 단계이다.
유저 플로우와 전 포스팅에서 언급되었던 와이어프레임은 매우 가까운 친구라고 할 수 있다.
그 둘은 비슷한 영향력을 발휘하기 때문이다.
그렇다면 다시 복습 겸 와이어프레임에 대해 알아보자.
와이어프레임의 역할은 무엇일까?
와이어프레임은 디자인을 기록하는데 있어서 천재적인 발명품이라고 할 수 있다.
1. 빠른 문자화 = 빠른 이해도
와이어프레임은 디자이너와 디자니어가 아닌 일반인에게도 빠른 이해도를 제공한다.
마치 우리가 문자 대신에 이모지를 쓰는 것과 마찬가지다. 짜 – 잔!
유저 플로우 케이스스터디: ①앱에 AI 하나 들이셔야 합니다
최근 여러 기관, 기업에서는 새로이 부상하거나 향후 기술적, 사회적 영향이 클 것으로 예상되는 기술로 AI를 꼽고 있습니다. 하지만, 산업연구원(KIET)에서 실시한 2021년 설문에 따르면 대기업을 제외한 단 8%만이 AI 기술을 사용하고 있다고 조사되기도 했습니다. 이렇게 AI 기술에 대한 기대감과 실제 기업 현장에의 도입 사이에는 큰 갭이 있음을 관찰할 수 있는데요. 이번 시리즈에서는 두 개의 유저 플로우 케이스스터디를 매개로, 사용자 경험이 어떻게 이 갭을 좁힐 수 있을지 살펴보고자 합니다.
유저 플로우로 보는 제품과 사용자의 상호작용
‘유저 플로우’란 사용자가 목표를 달성하기 위해 서비스 내에서 행하는 일련의 행위를 나타낸 그림입니다. 유저 플로우는 사용자의 ‘흐름’, ‘움직임’을 묘사하는 도구이므로 각 사용 단계에서 사용자가 제품과 상호작용하는 과정을 효과적으로 보여줄 수 있습니다. 사용자를 성공적인 목표로 안내하는 플로우는 따로 ‘행복 경로’라는 이름으로 부르기도 합니다. 그렇지만 실제로 그 목표에 도달하는 다른 여러 길이 있을 수 있습니다. 그래서 유저 플로우는 일반적으로 사용자가 선택할 수 있는 다양한 경로를 조망하기 위해 분기점이 여러 흐름으로 나뉜 차트로 그려지게 됩니다.
케이스스터디: 다이어트신
다이어트신은 2014년 출시된 서비스로, 강력한 무료 다이어리 기능과 활발한 커뮤니티, 자사 운영몰을 통해 사람들의 다이어트를 돕는 것을 목표로 합니다. 이 앱은 식단 입력의 수단으로 주로 ‘검색’과 ‘마이 칼로리’, ‘마이 식단’이라는 북마크 기능을 제공하고 있습니다. 다이어트신의 식단 입력 과정을 유저 플로우로 나타내면 다음과 같은 흐름을 관찰할 수 있습니다.
<다이어트신> 앱 식단 기록 과정
위의 유저 플로우를 통해 다이어트신은 사용자가 식단을 기록할 수 있는 경로(검색)를 제공하고 있는 걸 알 수 있습니다. 하지만 식단 기록이라는 행동이 습관이 되기 전까지 하루 세 번 이상 앱에 접속해 일정 분량의 기록을 남기는 것은 쉬운 일이 아닙니다. 그렇다면 식단 기록이라는 행동을 꾸준히 이어 가기 어려운 이유는 무엇일까요?
우선 반복 입력 행동이 불편하다고 생각해볼 수 있습니다. 단순 반복 작업은 사람들에게 지루함을 느끼게 하는데, 식사 시 한 끼에 하나의 음식만을 먹는 것은 아니므로 한 번의 식단 기록에 최소 서너 번 정도의 반복 검색 과정이 필요합니다. 하루의 식단을 모두 기록하려면 이 과정을 일정 시간 동안 반복적으로 수행해야 하므로 사용자는 짜증과 귀찮음을 느낄 수 있습니다.
그리고 아침에 간단히 때우는(또는 거르게 되는) 한 끼, 회사에서 점심을 먹는 시간과 장소, 3~4시쯤 챙겨 먹는 간식, 주말에 생기는 약속을 떠올려 보세요. 우리의 식사는 매우 맥락적이고 불규칙적이라는 사실을 쉽게 발견할 수 있을 것입니다. 즉 유동적인 식사 상황에서 매번 앱을 떠올려야 하고, 먹은 음식을 하나하나 기억해서 세세하게 기록해야 한다는 점이 인지적으로 큰 부담임을 생각해 볼 수 있습니다.
사실 시중의 다이어트 앱들은 고객이 겪는 이런 불편함을 인지하고 있어서, 특별한 기술을 활용하지 않아도 식단 입력 과정에서의 번거로움을 해결할 수 있는 나름의 전략들을 실천해 오고 있습니다. 대표적으로 1) 식사 시간에 푸시 알림 보내기 2) 북마크 기능 활용하기 등을 들 수 있는데요. 막상 직접 사용해 보면 이 기능들은 기대한 것만큼 유용해 보이지 않습니다. 그 이유는 아래와 같습니다.
전략 1. 예상되는 식사 시간에 푸시 알림 보내기
본래 푸시 알림은 유저가 앱에서 특정 행동을 수행하도록 초대하거나, 유저가 궁금해하는 정보에 대한 업데이트를 제공하기 위한 방법으로 많이 사용됩니다. 실제로 모바일 마케팅 분야에서는 효과적인 리텐션 유지 및 상승을 위해 유저의 행동을 유도하는 푸시 알림, 콘텐츠 유형이나 빈도, 전송 시간 등을 개인화한 푸시 알림을 발송할 것을 권고하고 있습니다.
하지만 식단 기록이라는 경험에 한해 푸시 알람은 오히려 다소 ‘성가시고 주의 집중을 흐트러뜨리는’ 방해물이 될 수 있습니다. 이는 인간의 인지 자원에 한계가 존재하기 때문인데요. 인지 자원이란 뇌가 활동할 때 집중력과 신경을 쏟을 수 있는 정신적 여유를 뜻합니다. 인지 자원은 기억력이 필요할 때, 번거롭거나 익숙하지 않을 일을 해야 할 때, 여러 가지 일을 병행할 때 사용되며 휴식하지 않으면 고갈됩니다. 그래서 이를 효과적으로 관리하는 것이 아주 중요합니다.
하지만 푸시 알림은 첫째, 집중해야 하는 상황에서 불필요한 주의를 끌어 인지 자원의 낭비를 초래합니다. 알림을 받고 확인하는 순간 원래 하던 일에서 주의 집중력이 감소하며 이에 따라 실수할 확률이 높아집니다. 더군다나 이런 상황을 방지하고 싶어 알람을 꺼두는 사람들도 있으므로, 이런 사람들에게 푸시 알림은 효과적인 전략이 되기 어렵습니다.
둘째, 푸시 알림을 보내는 시간에 식사하고 있지 않다면 알림의 효용이 줄어듭니다. 특히 식사하기 전이라면 더 효과를 발휘하기 어렵습니다. 이와 관련된 심리학 개념으로 ‘미래 계획 기억’이 있는데, 쉽게 말해 앞으로 해야 할 일을 기억하는 것입니다. 미래 계획 기억의 경우 ‘기억해야 한다는 그 사실 자체’를 기억해야 하므로 계속해서 다른 일을 하는 상황일수록 인지 부담이 증가합니다.
이를 식단 기록 상황에 대입해 보면 이렇게 흘러가게 됩니다. 우리는 알림이 울린 그 시간에 밥을 먹기 전이라면 “나중에 밥 먹을 때 기록해야지”라고 생각하고, 밥을 먹고 있더라도 정황상 핸드폰을 꺼내 기록하기 어렵다면 “있다가 여유 시간이 나면 기록해야지”라고 생각합니다. 하지만 나중에 기록해야 한다는 사실 자체를 잊거나, 아니면 뭔가 하려고 했는데 생각은 나지 않는 찝찝한 기분을 느끼게 됩니다. 이런 불상사를 방지하기 위해 <필리코치> 같은 앱은 식사마다 알람 시간을 다르게 설정할 수 있도록 했지만, 그런데도 유동적인 식사 상황을 모두 따라가기에는 한계가 있습니다.
필리코치 식사 푸시 알림 (출처: 필리코치 앱)
마지막으로 푸시 알림을 보겠습니다. 푸시 알림은 사람이 가진 기억의 한계를 효과적으로 보조하기 어렵다는 한계가 있습니다. 이와 관련된 심리학 개념으로 ‘망각 곡선’이라는 것이 있는데, 이 이론에 따르면 사람은 20분 후 암기한 내용의 58%만이, 하루가 지나면 33%만이 기억에 남는다고 합니다. 따라서 식사 시간에 알람을 확인하더라도 기록을 잊거나 미룬다면, 이후 사용자는 불완전한 기억을 바탕으로 먹은 음식의 종류와 양을 기록하게 됩니다.
기록 실패 경험이 축적되면 매번 기록을 남기려 하는 열성적인 일부를 제외한 일반 사용자들은 기록의 정확성에 스스로 의구심을 품게 될 수 있으며, 나아가 앱의 유용성에 대한 판단에도 영향을 줄 수 있습니다. 특히, 식단 기록은 다이어리의 핵심 기능에 해당합니다. 따라서 식단 기록 행동의 지연이나 중단은 앱 사용 자체의 잠정 중단과 거의 비슷한 의미로 쓰이게 됩니다.
전략 2. 북마크 기능 활용하기
북마크는 자주 가는 웹사이트나 콘텐츠를 별도의 장소에 저장하는 기능입니다. 사용자가 북마크를 통해 자료나 콘텐츠를 효과적으로 탐색하고 관리할 수 있어서 여러 사이트에서 자주 사용하고 있는 기능이기도 한데요. 다이어트신 앱도 마찬가지로 사용자가 음식이나 식단을 미리 등록하고 관리할 수 있도록 마이 칼로리, 마이 식단 기능을 제공하고 있습니다.
하지만, 이러한 북마크 기능은 음식이라는 콘텐츠가 가지는 특성 때문에 활용에 한계가 있을 수밖에 없습니다. 샌드위치를 예시로 들어보겠습니다.
(출처: 써브웨이, 파리바게뜨 홈페이지)
써브웨이의 비엘티 샌드위치와 파리바게뜨의 비엘티 샌드위치는 같은 콘텐츠일까요? 아니면 다른 콘텐츠일까요? 이커머스 사이트에서 이 두 개의 샌드위치는 상표가 다르기 때문에 다른 콘텐츠로 분류될 것이며, 따라서 북마크 기능도 별문제 없이 사용할 수 있습니다.
하지만 식단 관리를 할 때는 ‘어떤 제품을 접했는지’보다 ‘어떤 영양소를 섭취했는지’가 더 중요한 판단 기준이 됩니다. ‘써브웨이’보다 이를 구성하는 ‘토마토’, ‘햄’, ‘양상추’라는 재료와 ‘칼로리’, ‘탄수화물’, ‘단백질’, ‘비타민’이라는 영양 성분에 더 집중하는 것입니다. 이런 관점에서 본다면 두 개의 제품은 서로의 대체재가 될 수 있다는 점에서 같은 콘텐츠로 분류됩니다.
북마크는 탐색의 편의성을 도모하기 위한 방법입니다. 하지만 위의 ‘비엘티 샌드위치’ 사례에서 알 수 있듯, 같은 영양소를 섭취하기 위한 여러 개의 대체재가 있는 상황은 사용자가 북마크를 유용하게 사용하는 데 어려움을 줍니다. 만약 즐겨 찾는 제품이 따로 있어서 두세 개의 샌드위치를 등록한다고 하더라도 이러한 전략이 모든 음식에 적용되기는 힘듭니다. 특히 한식의 경우 한 끼의 식사를 해결하는 데 필요한 음식의 가짓수나 종류가 매번 달라지게 되기 때문입니다. 그래서 음식이나 식단을 별도로 저장해 두더라도 주기적인 북마크 관리 작업이 필요하다는 점에서 상당한 번거로움을 유발하게 됩니다.
위와 같은 이유로 기존의 두 가지는 효과적으로 식단 기록 경험을 지원하는 방법이라고 보기 어렵습니다. 그렇다면 우리는 어떻게 이 경험을 바꿔 볼 수 있을까요?
개선 아이디어: AI 이미지 인식 기술 활용
저는 식단 기록에 AI 이미지 인식 기술을 활용해 보려고 합니다. 이미지 인식은 컴퓨터가 영상이나 사진에 있는 객체를 스스로 식별해 정보를 분류, 추출하는 기술로 컴퓨터 비전 분야에서 오랫동안 연구되어 왔습니다. 이미지 빅데이터의 등장과 딥러닝, 특히 합성곱 신경망(CNN) 모델로 인해 최근 비약적으로 발전한 기술이기도 합니다.
먼저 식단 기록에서 왜 이미지 중심의 기록이 글자로 하는 기록보다 더 효과적인 방법이 될 수 있을까요? 첫째, 사람에게는 정보가 시각적일수록 더 쉽게 인지하고, 더 오래 기억하는 인지적 경향이 있습니다. 이를 ‘그림 우월성 효과(picture superiority effect)’라고 합니다. 그러므로 사진은 사람에게 효과적인 기억 단서가 될 수 있습니다.
둘째, 이미지는 텍스트보다 훨씬 더 많은 정보를 전달합니다. 이는 다소 시간이 지나 식단을 기록하더라도 텍스트보다 더 많은 기억을 떠올리는 데 도움을 줍니다. 마지막으로, 훨씬 간편하게 기록할 수 있습니다. 음식을 하나하나 검색하고 저장하는 데는 상당히 많은 시간과 노력이 필요하지만, 사진은 촬영 버튼 한 번으로 모든 음식을 기록할 수 있기 때문에 기록 과정에 드는 인지 자원을 줄일 수 있어 인지 자원 관리에 효과적입니다.
따라서 식단 기록에 이미지와 AI 이미지 인식 기술을 활용한다면 음식 사진에서 필요한 정보를 자동으로 추출하고 기록함으로써 사용자의 일상적인 식단 기록 작업을 크게 단순화할 수 있습니다. 또한, 저장한 식단 정보를 바탕으로 다이어트에 도움이 되는 연관 정보를 먼저 제안하는 등의 추가적인 가치도 기대해 볼 수 있게 됩니다. 이제부터 앱의 편의성을 높이는 두 가지 아이디어를 유저 플로우와 함께 제안해 보겠습니다.
아이디어 1. AI 카메라 활용하기
첫 번째 아이디어는 식단 등록 방법에 AI 카메라 촬영∙이미지 인식 방법을 추가하는 것입니다. 사진 촬영으로 음식을 자동으로 인식하게 한다면 하나하나 검색해 추가하는 작업을 크게 줄일 수 있습니다. 그리고 만약 홈 화면에 카메라 메뉴를 추가한다면, 매번 [다이어리 > 식단 추가 > 검색 > 등록] 이라는 과정을 거치지 않고도 식단을 손쉽게 추가할 수 있을 것입니다. 이 경우 유저 플로우는 이렇게 개선해 볼 수 있습니다.
다이어리 내 식단 등록 화면, 홈 화면에 AI 카메라 촬영(또는 이미지 등록) 방식 추가
촬영이나 이미지 업로드를 통해 AI가 음식을 인식하게 한 후, 식단이 정확하다면 바로 등록합니다. 만약 이미지가 불러온 식단이 정확하지 않다면 유저가 직접 내용을 수정함으로써 AI에게 피드백을 줄 수 있도록 안내하고, 수정 뒤 등록합니다. 아주 간단한 과정입니다.
하지만 이 과정에서는 이미지 인식 결과가 정확하지 않을 때 이를 바로잡을 수 있도록 하는 유저의 피드백이 필수로 필요합니다. AI 이미지 인식 결과가 부정확할수록 많은 피드백이 필요하며, 때로는 검색을 통해 등록하는 것보다 더 비효율적인 방법이 될 수 있습니다. 이미지 인식 기술의 정확도를 높이기 위해 일차적으로 많은 데이터를 확보해야 하고, 사용자가 자발적으로 앱에 피드백을 남길 수 있도록 유도하는 장치가 필요합니다. AI의 성능을 향상하면서도 사용자에게 동기를 부여하는 방법이 있을까요?
아이디어 2. 등록된 사진을 기반으로 식단 추천하기.
여기에서 두 번째 아이디어를 생각해 볼 수 있습니다. 등록된 사진 데이터를 기반으로 맞춤형 식단을 추천하는 것입니다. 이미지 기반의 추천은 모인 사진을 기반으로 AI가 앨범을 제안하는 <구글 포토>나 <애플 사진>에서도 볼 수 있는데요. 이러한 발상을 식단 관리에도 적용해 본다면 어떨까요? 다시 ‘비엘티 샌드위치’의 예시로 돌아가 보겠습니다.
활용할 수 있는 정보와 만들어 낼 수 있는 정보 (출처: 일러스트 unDraw.co)
AI의 성능이 괜찮다는 가정 하에, 샌드위치 사진을 통해 음식명, 영양소, 칼로리, 일반적인 재료를 알 수 있을 것입니다. 시판 음식이라면 회사명∙브랜드명, 가격과 같은 정보까지 함께 알아낼 수 있습니다. 이 정보가 시간을 두고 쌓인다면 앱에서는 사용자가 자주 먹는 음식은 무엇이고, 이 음식이 어떤 재료로 구성되어 있는지에 대한 경향을 추출할 수 있을 것입니다.
이러한 정보가 적정 칼로리나 영양소, 목표 체중과 같은 사용자 데이터와 합쳐지면 사용자가 어떤 음식과 재료를 섭취하는 것이 목표 달성에 도움이 되는지, 이들이 자주 먹는 음식과 비슷한 재료가 포함된 음식은 무엇인지를 먼저 찾아서 제안하는 것도 가능합니다. 나아가 이 정보를 레시피 정보를 담고 있는 API와 연계한다면, 다이어터들을 위한 요리를 추천해 줌으로써 매일 비슷한 식단을 먹어야 한다는 사실에 스트레스를 받는 사용자들이 고민을 덜도록 도와줄 수 있습니다.
이렇게 연관 콘텐츠를 먼저 제안하는 방식은 다이어트신에서 운영 중인 온라인몰 ‘다신샵’의 제품 혹은 제휴사의 레시피 콘텐츠를 광고할 수 있는 길을 열어 결과적으로 새로운 비즈니스를 연계할 수 있는 가능성을 만들어 줍니다. 이를 다음과 같은 유저 플로우로 요약해 볼 수 있겠습니다.
개선된 유저 플로우 요약
여기에 더해 1) 이 추천 기능에 AI가 사용되고 있으며 사용자의 식단 기록과 피드백이 추천을 더 정확하게 만들 수 있다는 안내문을 함께 삽입하는 방법, 2) 정확도 표시로 앱 추천의 신뢰도를 높이는 방법도 함께 생각해 보는 것은 어떨까요? 이런 장치들은 사용자가 AI 이미지 인식이라는 기술에 더 통제감을 가지도록 유도함으로써 피드백 멘탈 모델을 형성하고, 사용자가 이미지로 식단을 기록하는 습관을 형성하는 데 동기를 부여할 수 있을 것입니다.
기술은 편의성을 향상시킨다
기술은 기존에 없던 가능성을 제안합니다. 하지만 앞서 강조했듯이 기업은 기술 도입이 곧 새로운 비용으로 이어지기 때문에 보수적이고, 비판적인 태도를 취하게 됩니다. 사람들이 익숙함에서 벗어날 때 느끼는 본능적인 두려움도 간과해서는 안 됩니다.
이러한 우려를 설득하려면 새로운 기술이 장해 요인을 넘어서는 편익을 제공한다는 걸 보여줘야 합니다. 이때 UX는 기술이 만든 새로운 가능성을 차별화된 가치로 전환할 수 있도록 돕기 때문에 고객에게 설득력을 갖출 수 있습니다. UX가 사용자의 입장에서 경험을 개선하는 데 필요한 기술을 제공하는 걸 알기 위해서는 유저 플로우를 확인하는 것이 매우 중요합니다. 다음 편에서는 이러한 유저 플로우가 어떤 식으로 기업과 고객에게 영향을 주는지 살펴보겠습니다.
요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.
키워드에 대한 정보 유저 플로우
다음은 Bing에서 유저 플로우 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 [앱UX/UI디자인] STEP4. 유저는 내 프로덕트와 어떻게 대화하나 / UX 디자인을 위한 유저플로 / 사용자 흐름 차트 만드는 저의 방법 공유 할게요.
- UX
- UX 디자인
- UX 디자인 독학
- UX 디자인 사례
- 미국 실리콘밸리
- 유엑스 디자이너
- 유아이 유엑스
- UX 디자이너 브이로그
- UX 디자인 컨설턴트
- UX 디자인 실무경험
- UX 디자인 어떻게 일할까
- User experience
- 사용자 중심 디자인
- 미국현지이야기
- 미국 현지 디자이너
- UX design
- UX designer
- UI/UX
- UX/UI
- 디자이너
- 유저 익스피리언스
- ux 디자인 어떻게 일할까요
- UX디자인
- 사용자 경험 디자인
- Design Thinking Process
- Design Process
- 디자인 생각하는 과정
- 직장인
- 무료UX
- UX디자인영감
- 초보UX
- 시니어UX
- 디자인공부
- 디자이너유튜버
- UX 디자인 레퍼런스
- 사용자 흐름
- User flows
- 디자인과정
- 프로덕트
- 유엑스디자인
- 유엑스와이어프레임
- 유엑스유저플로
YouTube에서 유저 플로우 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 [앱UX/UI디자인] STEP4. 유저는 내 프로덕트와 어떻게 대화하나 / UX 디자인을 위한 유저플로 / 사용자 흐름 차트 만드는 저의 방법 공유 할게요. | 유저 플로우, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.