๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿคธ‍โ™‚๏ธ Project Deep-Dive/โœจํ˜ผ์žํ•˜๋Š” ์„œ๋น„์Šค ๊ธฐํš ์—ฐ์Šต

Design Project #6 ๋ผ-ํ”„๋ ˆ์‰ฌ(๊ฐ€์ œ) User Flow ๊ทธ๋ฆฌ๊ธฐ

728x90
๋ฐ˜์‘ํ˜•

๋ผ์ด๋”ฉ์œผ๋กœ ์ผ์ƒ์„ ๋ฆฌํ”„๋ ˆ์‰ฌํ•˜๋‹ค, ๋ผ-ํ”„๋ ˆ์‰ฌ

๊ธฐํš ์ค‘์ธ ์„œ๋น„์Šค๊ฐ€ ์„œ์„œํžˆ ํ‹€์„ ์žก์•„๊ฐ€๋ฉด์„œ, ์ง€์นญํ•  ์ด๋ฆ„์ด ํ•„์š”ํ–ˆ๋‹ค. '๋ผ์ด๋”ฉ+๋ฆฌํ”„๋ ˆ์‰ฌ'์˜ ์˜๋ฏธ๋ฅผ ๋‹ด์•„ '๋ผํ”„๋ ˆ์‰ฌ'๋ผ๊ณ  ์ •ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ์˜์–ด๋กœ ์“ฐ์ž๋ฉด ์ข€ ์• ๋งคํ•ด์ ธ์„œ, ์ด ๋ถ€๋ถ„๋“ค์€ Wireframe๊นŒ์ง€ ๊ทธ๋ฆฌ๊ณ  ๋‚˜์„œ ๋ณธ๊ฒฉ์ ์ธ ๋ธŒ๋žœ๋”ฉ ์ž‘์—…์œผ๋กœ ๋“ค์–ด๊ฐˆ ๋•Œ ์žก์•„๊ฐ€๋„๋ก ํ•˜๊ฒ ๋‹ค. ์˜ค๋Š˜์€ ๋“œ๋””์–ด, ๋ผํ”„๋ ˆ์‰ฌ์˜ ์œ ์ € ํ”Œ๋กœ์šฐ๋ฅผ ์™„์„ฑํ–ˆ๋‹ค. 

 

User flow๋ฅผ ๊ทธ๋ฆฌ๊ธฐ ์œ„ํ•ด, ์šฐ๋ฆฌ์˜ ์‚ฌ์šฉ์ž์™€ ๊ทธ ์‚ฌ์šฉ์ž์˜ ๋ชฉํ‘œ๋ฅผ ๋‹ค์‹œ ํ•œ ๋ฒˆ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค.

 

1. User: ์ŠคํŠธ๋ ˆ์Šค ํ•ด์†Œ & ๊ฐ์ • ๋ฐœ๋ž€์Šค๋ฅผ ์œ„ํ•ด ๊ฐ€๋ณ๊ฒŒ ๋ผ์ด๋”ฉ์„ ํ•˜๋Š” ์ดˆ์‹ฌ์ž ๋ผ์ด๋”
2. Goal:
1) ๊ฐ์ • ์ฒดํฌ์™€ ๊ธฐ๋ก์œผ๋กœ ๋‚˜์˜ ๋งˆ์Œ์ƒํƒœ ๋Œ์•„๋ณด๊ณ , Mind Balance ์œ ์ง€๋ฅผ ์œ„ํ•œ ๊ฒฉ๋ ค์™€ ๋ผ์ด๋”ฉ ๋™๊ธฐ๋ถ€์—ฌ ์–ป๊ธฐ. 
2) ๋ผ์ด๋”ฉ ์ „ํ›„๋กœ ๋งˆ์Œ ์ƒํƒœ, ์ƒ๊ฐ ๋ณ€ํ™”๋ฅผ ํ™•์ธํ•˜๊ณ , ์ฃผํ–‰๊ฑฐ๋ฆฌ/์ฃผํ–‰์‹œ๊ฐ„/์ฃผํ–‰ ์†๋„/์นผ๋กœ๋ฆฌ ์†Œ๋ชจ๋Ÿ‰/๋ผ์ด๋”ฉ ๊ฒฝ๋กœ์ง€๋„ ๊ธฐ๋ก ์ €์žฅํ•˜๊ธฐ
+ ๊ท€์—ฌ์šด ์บ๋ฆญํ„ฐ์™€์˜ Interaction์œผ๋กœ ๋ผ์ด๋”ฉ์— ๋Œ€ํ•œ ์žฅ๋ฒฝ๊ณผ ๋ถ€๋‹ด๊ฐ ๋‚ฎ์ถ”๊ณ  ์นœ์ˆ™ํ•ด์ง€๊ธฐ

 


 

์†์œผ๋กœ ์ ์–ด๋ณธ User Flow

1. Task Flow

 

 

์†์œผ๋กœ ์จ ๋ณธ ๋ผ-ํ”„๋ ˆ์‰ฌ Task flow

 

 

๋น„๋ฃจํ•˜์ง€๋งŒ, ์†์œผ๋กœ ์จ๋ณด์•˜๋‹ค..

 

2. Lo-fi wireflow

 

 

์†์œผ๋กœ ๊ทธ๋ ค๋ณธ ๋ผ-ํ”„๋ ˆ์‰ฌ Lo-fi wireflow

 

 

์ง„์งœ ํ—ˆ์ ‘ํ•˜์ง€๋งŒ ์ปดํ“จํ„ฐ๋กœ ์˜ฎ๊ธฐ๊ธฐ ์ „์— ์†์œผ๋กœ ์•„์ด๋””์—์ด์…˜ ํ–ˆ๋˜ ๊ณผ์ •์„ ๊ธฐ๋กํ•ด๋‘๊ณ  ์‹ถ์–ด ์—…๋กœ๋“œํ•œ๋‹ค. ์ผ๋‹จ ๋นจ๋ฆฌ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„์ฒ™์‹œ์ผœ ๋ชจ๋“  ๋‹จ๊ณ„๋ฅผ ๊ฒฝํ—˜ํ•˜๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ๊ธฐ ๋•Œ๋ฌธ์—, ์ตœ์†Œํ•œ์˜ ๋ชฉํ‘œ๋“ค๋กœ ๊ตฌ์„ฑํ•˜๊ณ ์ž ํ–ˆ๋‹ค. Lo-fi wireflow๋ฅผ ๊ทธ๋ฆฌ๋ฉด์„œ, ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ๋ฒˆ๊ฑฐ๋กญ์ง€ ์•Š๊ฒŒ ๋‹ค์Œ ์Šคํ…์œผ๋กœ ๋„˜์–ด๊ฐˆ ์ˆ˜ ์žˆ์„๊นŒ๋ฅผ ๊ณ ๋ฏผํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.   

 

ํŠนํžˆ ์œ ์‚ฌํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š”, '๋งˆ์ธ๋“œ ์ปค๋„ฅํŠธ', 'Dailo'์™€ ๊ฐ™์€ ๊ฐ์ • ๊ธฐ๋ก ์•ฑ๊ณผ ํ—ฌ์Šค์ผ€์–ด ๊ธฐ๋ก ์„œ๋น„์Šค์ธ 'Nike Run Club'์ด๋‚˜ 'Relive', Strava'๊ฐ™์€ ๋ผ์ด๋”ฉ ๊ธฐ๋ก ์•ฑ๋“ค์„ ์ฐธ๊ณ ํ–ˆ๋‹ค. ์ด์ œ ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ๋Š”, Figma๋ฅผ ์ด์šฉํ•ด์„œ ์œ„์˜ ํ—ˆ๋ฆ„ํ•œ ์ข…์ด ๋ฒ„์ „์„.. ์ข€๋” ๊น”๋”ํ•˜๊ฒŒ ์˜ฎ๊ฒจ๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.... :) Wireframe์— ๋Œ€ํ•œ ๋ณด๋‹ค ์ƒ์„ธํ•œ ๊ณต๋ถ€ ํฌ์ŠคํŒ…์ด ์„ ํ–‰๋  ๊ฑฐ๋‹ค.


 

๋ผ-ํ”„๋ ˆ์‰ฌ ์ปจ์…‰ ์ผ๋Ÿฌ์ŠคํŠธ(๊ฐ€์•ˆ)

 

 

์ด๋Œ€๋กœ๋กœ๋Š” ํฌ์ŠคํŒ…์ด ๋„ˆ๋ฌด ํ—ˆ์ ‘ํ•ด๋ณด์—ฌ์„œ, ์ผ๋Ÿฌ์ŠคํŠธ๋กœ ๊ทธ๋ ค๋ณธ ๋ผ-ํ”„๋ ˆ์‰ฌ์˜ ์บ๋ฆญํ„ฐ ๋ผ๋”ฉ์ด์™€ ์‹ฌํ”Œํ•œ ์ปจ์…‰ ์ด๋ฏธ์ง€๋ฅผ ์ฒจ๋ถ€ํ•œ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•