เรียนรู้วิธีการสร้าง User Flow
มาร่วมมือออกแบบ digital product กันเถอะ!
บริการครบวงจรที่ออกแบบมาเพื่อคุณ พร้อมทีมผู้เชี่ยวชาญของเราคอยดูแล และสามารถจัดทีมงานเฉพาะกิจเพื่อเพิ่มกำลังคนให้คุณได้หากต้องการ
หรือพูดคุยกับผู้เชี่ยวชาญของเราเกี่ยวกับโปรเจกต์ที่คุณกำลังจะทำได้ที่ โทร.
0 2026 3292
User flow คืออะไร
เราสร้าง user flow เพื่อใช้เป็นสื่อกลางในการสื่อสารเกี่ยวกับแผนงานการออกแบบร่วมกับผู้ร่วมงานทีมอื่นๆ ที่มีมุมมองในแง่ของผู้ใช้ผลิตภัณฑ์แตกต่างกัน นี่จึงเป็นเหตุผลสำคัญที่ต้องคำนึงถึงความต้องการของผู้ใช้เป็นหลัก
User flow มีองค์ประกอบพื้นฐาน 3 อย่าง ดังนี้
ผู้ใช้ หมายถึง ผู้ที่ใช้งานผลิตภัณฑ์ดิจิทัลของคุณ
วัตถุประสงค์ในการใช้งานผลิตภัณฑ์ หมายถึง สิ่งที่ผู้ใช้คาดหวังและต้องการจากผลิตภัณฑ์
ขั้นตอนที่ทำให้บรรลุวัตถุประสงค์ของผู้ใช้ หมายถึง ขั้นตอนที่ผู้ใช้ต้องทำในผลิตภัณฑ์ เพื่อบรรลุวัตถุประสงค์ที่ต้องการให้สำเร็จ
โรงพยาบาลกรุงเทพมอบหมายให้เราสร้าง user flow chart สำหรับโปรเจกต์การพัฒนาหน้าเว็บไซต์ ซึ่งเป็นโฟลว์ที่กำหนดด้วย 3 องค์ประกอบนี้
ผู้ใช้ คือ ผู้ป่วยที่มีโอกาสเป็นลูกค้าของโรงพยาบาล
วัตถุประสงค์ของหน้าเว็บไซต์ คือ นัดพบแพทย์
ขั้นตอนที่ต้องทำ เพื่อบรรลุเป้าหมาย ด้วยการกรอกแบบฟอร์มออนไลน์สำหรับการนัดพบแพทย์
ทั้งนี้ การสร้าง user flow chart เป็นสื่อกลางที่ช่วยให้เราเห็นภาพการลำดับขั้นตอนการใช้งานผลิตภัณฑ์ที่ไม่ยุ่งยาก เข้าใจได้ง่าย และยังช่วยลดจำนวนขั้นตอนในการทำนัดแพทย์ผ่านช่องทางออนไลน์ได้อีกด้วย
อย่างไรก็ตาม เมื่อผู้เชี่ยวชาญเข้ามามีส่วนร่วมในกระบวนการออกแบบและพัฒนาผลิตภัณฑ์มากขึ้น ก็มักส่งผลให้ผู้ใช้เกิดความสับสนในการใช้ผลิตภัณฑ์ได้
การทำ user flow chart จะช่วยแก้ปัญหานี้ได้ โดยเน้นเฉพาะขั้นตอนสำคัญที่ผู้ใช้ต้องทำบนแพลตฟอร์มออนไลน์ เพื่อให้บรรลุเป้าหมายที่พวกเขาต้องการ ช่วยลดปัญหาการใช้งานที่วกไปวนมา และมอบประสบการณ์ใช้งานที่ดีให้กับผู้ใช้ได้ในที่สุด อีกทั้งช่วยคุณประหยัดเวลาและต้นทุนในการสร้างผลิตภัณฑ์ดิจิทัลได้
ทำไม user flow ถึงมีความสำคัญกับการออกแบบอย่างมาก
ผลิตภัณฑ์ดิจิทัลที่สร้างเสร็จสมบูรณ์แล้ว เป็นเพียงความสำเร็จที่คนทั่วไปเห็น โดยที่ไม่รู้เบื้องหลังของกระบวนการพัฒนาและออกแบบอย่างมีประสิทธิภาพ
จากภาพด้านบน แสดงให้เห็นจุดเริ่มต้นของ user flow chart ที่เราสร้างขึ้น ซึ่งการเชื่อมโยงขั้นตอนสำคัญๆ บนผลิตภัณฑ์ดิจิทัลอย่างมีประสิทธิภาพจะช่วยจัดการกับขั้นตอนการใช้งานได้อย่างครอบคลุมและรู้วิธีแก้ปัญหาตั้งแต่ขั้นตอนการออกแบบและพัฒนาได้ตั้งแต่เนิ่นๆ พร้อมทั้งจัดระเบียบและเชื่อมโยงลำดับการใช้งาน และทำโครงสร้างแอปพลิเคชันหรือเว็บไซต์ได้ตั้งแต่การออกแบบในขั้นตอนแรกๆ
ทำความเข้าใจ 4 เหตุผลสำคัญที่ทำให้ user flow มีส่วนช่วยในการสร้างผลลัพธ์ที่น่าพึงพอใจให้กับการออกแบบ UX
1. สร้างกระบวนการทำงานที่เข้าใจง่าย
user flow ช่วยให้เราเห็นภาพและรู้วิธีการลำดับขั้นตอนของผู้ใช้ผลิตภัณฑ์ดิจิทัลได้อย่างแจ่มชัด โดยเฉพาะการทำงานกับโปรเจกต์ใหญ่ๆ ซึ่งช่วยให้เราระบุการออกแบบและพัฒนาผลิตภัณฑ์ได้ครบถ้วน จึงทำให้เรามีสมาธิในการทำงาน ลำดับขั้นตอนการทำงานได้ง่าย และช่วยลดต้นทุนให้ลูกค้าได้มากขึ้น
2. ช่วยให้นักออกแบบ UX ทราบถึงจุดบกพร่องต่างๆ
เมื่อต้องวางรากฐานในการทำผลิตภัณฑ์ดิจิทัล การทำ user flow จึงเป็นวิธีที่สมเหตุสมผลที่ช่วยให้เห็นแง่มุมที่ผู้ใช้มีต่อผลิตภัณฑ์ อีกทั้งเป็นการช่วยให้นักออกแบบ UX ทราบจุดที่มีปัญหา อย่างความสับสนในการลำดับขั้นตอนการใช้งานและปุ่มกดที่ไม่ชัดเจน เป็นต้น
3. ได้นำความคิดเห็นของผู้ใช้มาปรับปรุงการใช้งานบนแพลตฟอร์ม
user flow ช่วยให้คุณทราบข้อมูลเชิงลึกว่าผู้ใช้แต่ละคนมีการตอบสนองกับฟีเจอร์ที่สำคัญในหน้าต่างๆ แพลตฟอร์มอย่างไร ้เช่น เมนูแบบ drop-down และปุ่มกด ซึ่งการเชื่อมโยงของขั้นตอนการใช้งานที่ดีจะช่วยให้ดีไซเนอร์จัดวางตำแหน่งฟีเจอร์เหล่านี้ เพื่อลด drop-off rate และเพิ่ม conversion ได้อย่างแน่นอน
4. ช่วยคัดแยกจุดเชื่อมโยงที่ไม่เกี่ยวข้องออกไป
เมื่อเห็นภาพความแตกต่างที่ผู้ใช้ตอบสนองกับฟีเจอร์ต่างๆ อย่างหลากหลายบนแพลตฟอร์มออนไลน์แล้ว ก็จะทราบและใส่ฟังก์ชันที่ขาดหาย จนสามารถคัดแยกสิ่งที่ไม่เกี่ยวข้องกับผู้ใช้ออกไปได้
ยกตัวอย่างเช่น การสร้าง user flow chart ทำให้เราทราบว่าฟังก์ชันไหนมีประโยชน์กับผู้ใช้ระหว่างการทำโปรเจกต์กับ WYKR ซึ่งเป็นการออกแบบและพัฒนาแพลตฟอร์มแนะนำงานขึ้นมาตั้งแต่ต้น
นอกจากนี้ flow chart ยังช่วยทำให้เราเข้าใจความแตกต่างของการใช้งานฟังก์ชันต่างๆ ที่ต้องได้รับการแก้ไข เพื่อมอบประสบการณ์ใช้งานอันสมบูรณ์แบบให้กับพนักงาน ผู้รับสมัครงาน และผู้ที่กำลังมองหางานใหม่ได้ใช้อย่างมีประสิทธิภาพ ตัวอย่างเช่น ผู้ใช้สามารถสร้างโพสต์การรับสมัครพนักงานใหม่ ซึ่ง flow chart จะทำให้เรารู้ว่าต้องเพิ่มฟังก์ชันอะไรเข้าไป เพื่อให้ผู้ใช้บรรลุเป้าหมายที่ต้องการ ไม่ว่าจะเป็น การแก้ไขข้อมูลในโพสต์รับสมัครงาน บันทึกโพสต์ไว้สำหรับใช้ต่อในอนาคต ลบโพส และอื่นๆ อีกมากมาย
User journey และ user flow ต่างกันอย่างไร
user journey และ user flow มีบทบาทที่แตกต่างกันอย่างสิ้นเชิงในขั้นตอนการออกแบบ UX
user journey (หรือเรียกอีกอย่างหนึ่งว่า customer journey) เป็นสิ่งที่ทำได้ตั้งแต่เริ่มการออกแบบ เพื่อช่วยให้ดีไซเนอร์เชื่อมโยงขั้นตอนเบื้องต้น ก่อนที่ผู้ใช้จะบรรลุวัตถุประสงค์ได้อย่างสมบูรณ์ พร้อมทั้งช่วยให้ดีไซเนอร์เข้าใจจุดเชื่อมโยงของผู้ใช้ได้หลากหลาย รวมถึงความพึงพอใจและประสบการณ์ในการใช้ผลิตภัณฑ์ดิจิทัลได้ครบทุกแง่มุม
ในทางกลับกัน user flow เป็นสิ่งที่ทำในกระบวนการออกแบบ ซึ่งเป็นการรวมตัวเลือกและทางเลือกหลายๆ อย่าง ที่คาดว่าผู้ใช้จะได้เห็นในผลิตภัณฑ์ดิจิทัล โดยเฉพาะการทำโครงสร้างเว็บไซต์และแอปฯ อย่างเป็นระบบ อีกทั้งทำให้ดีไซเนอร์รู้ว่าโฟลว์ที่ใช้จะช่วยให้ผู้ใช้ทำสิ่งที่ต้องการสำเร็จได้ง่ายและรวดเร็ว ด้วยเหตุนี้ user flow จึงเป็นสิ่งที่ช่วยปรับปรุงประสบการณ์การใช้งานโดยรวมของผลิตภัณฑ์
เรียนรู้เกี่ยวกับความแตกต่างระหว่าง user journey และ user flow ให้เข้าใจมากขึ้น โดยสามารถศึกษาได้จากผลงานตัวอย่างของเราที่เคยทำให้โรงพยาบาลกรุงเทพ
User flow: ผู้ใช้เข้าหน้า home -> ไปที่หน้าทำการนัดหมาย -> ไปที่ช่องค้นหา -> ค้นหาแพทย์ที่ต้องการทำนัด -> ดูปฏิทินของแพทย์ที่ต้องการนัดหมาย -> เลือกเวลาทำนัด -> ทำนัดพบแพทย์
User journey: ผู้ใช้มองเห็นโฆษณา (ทั้งแบบออนไลน์และออฟไลน์) -> ไปที่เว็บบริษัท -> ทำนัดบนแพลตฟอร์มออนไลน์
ตารางสรุปความคล้ายและความแตกต่างของ user journey และ user flow
User Journey | User Flow | |
แสดงให้เห็นถึงการตอบสนองของผู้ใช้ได้หลายแพลตฟอร์ม | ✓ | ⨉ |
ทำให้รู้รายละเอียดจุดเชื่อมโยงต่างๆ ที่มีทั้งหมดในผลิตภัณฑ์ดิจิทัล | ⨉ | ✓ |
เหมาะสำหรับโปรเจกต์ที่มีกรอบระยะเวลาในการทำงานที่ยาว | ✓ | ⨉ |
เป็นขั้นตอนเริ่มต้นของการทำวิจัย UX | ✓ | ⨉ |
สร้างขึ้นระหว่างกระบวนการออกแบบ UX | ⨉ | ✓ |
เน้นการเก็บรวบรวมสิ่งที่ทำให้ผู้ใช้บรรลุจุดประสงค์ | ✓ | ✓ |
มักเชื่อมแผนผังการใช้งานให้เห็นภาพได้ชัดเจน | ✓ | ✓ |
User flow มีกี่แบบ แตกต่างกันอย่างไร
รูปแบบของ user flow มีหลากหลายแบบ แต่ในกระบวนการออกแบบจะมีทั้งหมด 3 แบบ ต่อไปนี้
User flow chart
Task flow
Wireflow (ความละเอียดต่ำ) และ screenflow (ความละเอียดสูง)
1. User flow chart
อย่างที่กล่าวไปแล้วว่า user flow chart นั้นช่วยให้เราเห็นความเชื่อมโยงของการใช้งานในแต่ละส่วนของแพลตฟอร์มออนไลน์ได้ เราจึงรู้ว่าควรปรับผลิตภัณฑ์ดิจิทัลอย่างไรเพื่อให้ผู้ใช้สามารถบรรลุจุดประสงค์ได้อย่างราบรื่นที่สุด
user flow chart อาจมีรายละเอียดซับซ้อนได้ ขึ้นอยู่กับธรรมชาติของแพลตฟอร์มนั้นๆ ยกตัวอย่างเช่น อาจมีการเชื่อมโยงเส้นทางการใช้งานของผู้ใช้หลายๆ เส้นที่ผู้ใช้เลือกเพื่อให้บรรลุจุดประสงค์
อีกตัวอย่างจากโปรเจกต์ที่เราร่วมงานกับ Saver ซึ่งเป็นแพลตฟอร์มออนไลน์ที่ให้สมาชิกในชุมชนผู้ใช้สามารถขอความช่วยเหลือจากผู้ใช้คนอื่นๆ ได้ โดยความช่วยเหลือแบ่งออกเป็น 3 ระดับความเร่งด่วน ได้แก่ สีเขียว สีเหลือง และสีแดง
ตอนที่เราทำ user flow chart ของโปรเจกต์นี้ เราต้องระบุองค์ประกอบหลัก ต่อไปนี้
ผู้ใช้คือผู้ขอความช่วยเหลือ
จุดประสงค์ของการใช้คือการขอความช่วยเหลือ
ขั้นตอนการใช้งานเพื่อบรรลุจุดประสงค์ คือ การแจ้งขอความช่วยเหลือและเลือกผู้ที่จะมาช่วย
2. Task flow
โฟลว์รูปแบบนี้จะเข้าใจง่ายกว่าแบบแรก เพราะมีความตรงไปตรงมา และเป็นเส้นตรงมากกว่า เพื่อเน้นให้เห็นเส้นทางการใช้งานเดียวที่ผู้ใช้เลือกเพื่อบรรลุจุดประสงค์
task flow มีหน้าที่เสมือนเป็นแบบร่างในการทำ user flow chart เน้นการใช้งานส่วนที่สำคัญที่สุดก่อนที่จะลงลึกในรายละเอียด
นอกจากนี้ยังมีประโยชน์ในการเน้นการใช้งานเส้นทางหลักของผู้ใช้ ทำให้เราสามารถปรับเปลี่ยนเส้นทางรองอื่นๆ เพื่อให้ผู้ใช้สามารถบรรลุจุดประสงค์ได้อย่างราบรื่นที่สุด
task flow ทั่วไปมักมีสิ่งเหล่านี้
ทางเข้า: สิ่งนี้เป็นจุดเริ่มต้นร่วมกันของผู้ใช้ทุกคน เพื่อเริ่มใช้งานและบรรลุจุดประสงค์ในท้ายที่สุด
การกระทำ: การทำอะไรบางอย่างของผู้ใช้ที่ทำให้ไปถึงเป้าหมาย
ความสำเร็จ: สิ่งที่ผู้ใช้เห็นหลังจากบรรลุเป้าหมายแล้ว
3. Wireflows และ screenflow
รูปแบบนี้จะมีความซับซ้อนกว่าเล็กน้อย โดยเป็นส่วนผสมระหว่าง wireframe และ user flow chart นั่นเอง wireflow อาจมีเส้นทางการใช้งานหลายเส้นทางเพื่อบรรลุจุดประสงค์
นี่คือตัวอย่าง wireflow ที่เราสร้างขึ้นเพื่อโปรเจกต์ที่เราร่วมงานกับ Starfish
ด้วยเหตุที่ Starfish ต้องการเปลี่ยนแปลงระบบการศึกษาไทย จึงต้องสร้างแพลตฟอร์มการเรียนรู้ออนไลน์สำหรับครูอาจารย์เพื่อศึกษาเทคนิคการสอนใหม่ๆ จากครูท่านอื่นๆ ดังนั้น การที่จะบรรลุเป้าหมายนี้ได้ ทีมงานของมอร์โฟซิสจึงได้ช่วยพวกเขาออกแบบและพัฒนาแพลตฟอร์มทั้งหมดขึ้นมาตั้งแต่ต้น
อย่างที่เห็นในรูปว่า wireflow นั้นเป็นแผนภูมิที่เรียบง่าย แสดงให้เห็นว่าผู้ใช้นั้นใช้งานแต่ละหน้าของผลิตภัณฑ์อย่างไร โดยแสดงในรูปแบบม็อคอัปของหน้าผลิตภัณฑ์นั้นๆ
บริการด้านการออกแบบ UX ของมอร์โฟซิส
ที่มอร์โฟซิส เรามีทีม UX designer ผู้เชี่ยวชาญที่มุ่งเน้นการสร้างผลงานที่ทรงพลังให้กับลูกค้า เราเชื่อมั่นอย่างเต็มที่ว่าความต้องการของผู้คนต้องมาก่อน ดังนั้นผลประโยชน์ของลูกค้าและความต้องการของผู้ใช้จึงเป็นหัวใจสำคัญที่ผลักดันให้เราทำงานทุกอย่างออกมา
บริการของเราประกอบด้วย
และอื่นๆ อีกมากมาย