วิธีการสร้างไดอะแกรมการไหลของผู้ใช้

เผยแพร่แล้ว: 2020-02-27

ไดอะแกรมการไหลของผู้ใช้เป็นสิ่งที่ขาดไม่ได้ในการเรียนรู้ประสบการณ์ของผู้ใช้ สิ่งเหล่านี้ช่วยให้คุณเข้าใจวิธีที่ผู้ใช้โต้ตอบกับแอพหรือเว็บไซต์ของคุณ ขั้นตอนที่พวกเขาทำเพื่อทำงานให้เสร็จหรือบรรลุเป้าหมายบนเว็บไซต์ของคุณ นี้จะช่วยให้คุณสร้างประสบการณ์การใช้งานที่เหนือกว่าสำหรับผู้ใช้และตอบสนองความต้องการของพวกเขาได้อย่างมีประสิทธิภาพมากขึ้น

ในคู่มือนี้ เราจะพิจารณาบทบาทสำคัญของไดอะแกรมโฟลว์ผู้ใช้ในการออกแบบ UX วิธีสร้างไดอะแกรมโฟลว์ผู้ใช้ และแนวทางปฏิบัติที่ดีที่สุดที่คุณควรคำนึงถึง นอกจากนี้เรายังมีเทมเพลตที่มีประโยชน์ให้คุณใช้ตลอดกระบวนการออกแบบโฟลว์ผู้ใช้ของคุณ

1. User Flow Diagram คืออะไร
1.1. สัญลักษณ์แผนภาพการไหลของผู้ใช้มีดังนี้
1.2. ความสำคัญของ User Flow Diagram
1.3. วิธีการสร้างไดอะแกรมการไหลของผู้ใช้
1.3.1. ขั้นตอนที่ 1: ทำความเข้าใจเส้นทางของลูกค้า
1.3.2. ขั้นตอนที่ 2: ระบุเป้าหมายของคุณและเป้าหมายของผู้ใช้
1.3.3. ขั้นตอนที่ 3: ระบุว่าผู้ใช้ของคุณมาจากไหน
1.3.4. ขั้นตอนที่ 4: ระบุข้อมูลที่ผู้เยี่ยมชมต้องการ
1.3.5. ขั้นตอนที่ 5: เห็นภาพกระแสผู้ใช้ของคุณ
1.3.6. ขั้นตอนที่ 6: สร้างต้นแบบโฟลว์ของคุณ
1.3.7. ขั้นตอนที่ 7: ทบทวน ปรับแต่ง และทดสอบ
1.4. แนวทางปฏิบัติที่ดีที่สุดที่ควรจำไว้
1.5. เทมเพลตไดอะแกรมการไหลของผู้ใช้
1.6. พร้อมที่จะสร้างไดอะแกรมโฟลว์ผู้ใช้ของคุณเองหรือยัง

User Flow Diagram คืออะไร

การไหลของผู้ใช้สามารถตีความได้หลายวิธี ถือได้ว่าเป็นภาพรวมที่อธิบายตำแหน่งที่ผู้ใช้สามารถนำทางในผลิตภัณฑ์ของคุณ นอกจากนี้ยังอาจหมายถึงคุณภาพและประสบการณ์ที่แท้จริงของเส้นทางที่ผู้ใช้ดำเนินการเพื่อให้งานสำเร็จ

หรืออาจหมายถึงลำดับขั้นตอนจริงที่ผู้ใช้ทำเพื่อทำงานให้เสร็จสิ้น ผังงานอาจมีประโยชน์ในการแสดงภาพเส้นทางที่ผู้ใช้ใช้เมื่อใช้โซลูชันของคุณ (เช่น เว็บไซต์หรือแอป)

เครื่องมือดังกล่าวที่ช่วยในการติดตามขั้นตอนของการโต้ตอบระหว่างการกระทำของผู้ใช้และอินเทอร์เฟซของโปรแกรมด้วยสายตา เรียกว่า ไดอะแกรมโฟลว์ผู้ ใช้ หรือแผนผังโฟ ลว์ผู้ใช้

ช่วยกำหนดเส้นทางตรรกะที่ผู้ใช้ควรใช้เมื่อโต้ตอบกับระบบ และแสดงถึงความสัมพันธ์ระหว่างฟังก์ชันการทำงานของระบบ การกระทำที่เป็นไปได้ของผู้ใช้ และผลที่เกี่ยวข้อง

ไดอะแกรมโฟลวผู้ใช้อาจมีรูปลักษณ์ที่แตกต่างกันไปตามขั้นตอนของกระบวนการออกแบบที่คุณอยู่ หากคุณมีเฟรมเวิร์กสำหรับแอปหรือเว็บไซต์ของคุณแล้ว คุณสามารถใช้เพื่อสร้างโฟลว์ชาร์ตของคุณได้ ผังงานโครงร่างดังกล่าวเรียกว่า Wireflows

ไดอะแกรมโฟลว์ผู้ใช้ยังเรียกว่า โฟลว์การโต้ตอบ โฟลว์กิจกรรม โฟลว์อินเทอร์เฟซผู้ใช้ โฟลว์การนำทาง หรือไดอะแกรมโฟลว์งาน

สัญลักษณ์แผนภาพการไหลของผู้ใช้มีดังนี้

สัญลักษณ์ไดอะแกรมการไหลของผู้ใช้
สัญลักษณ์ไดอะแกรมการไหลของผู้ใช้

อ้างถึงแหล่งข้อมูลนี้เพื่อทำความเข้าใจสัญลักษณ์ผังงานเพิ่มเติมที่อาจเป็นประโยชน์เมื่อสร้างไดอะแกรมโฟลว์ของผู้ใช้

ความสำคัญของ User Flow Diagram

  • ไดอะแกรมโฟลว์ผู้ใช้มีประโยชน์เมื่อคุณต้องการทำความเข้าใจการออกแบบของคุณตามเป้าหมายของผู้ใช้ของคุณ
  • สามารถใช้เพื่อสื่อสารขั้นตอนที่ตั้งใจของผู้ใช้ขณะที่พวกเขานำทางผ่านหน้าเว็บไซต์ของคุณหรือผ่านการกระทำในแอปของคุณ
  • วิศวกร นักออกแบบ และสถาปนิกสามารถใช้สิ่งเหล่านี้เพื่อทำความเข้าใจความซับซ้อน ขอบเขต และเส้นทางของการออกแบบระบบ ตลอดจนระบุช่องว่าง การขึ้นต่อกัน และข้อบกพร่องของระบบ

วิธีการสร้างไดอะแกรมการไหลของผู้ใช้

เพื่อไม่ให้เป็นการเสียเวลา เรามาพูดถึงวิธีสร้างไดอะแกรมโฟลว์ผู้ใช้กัน

ขั้นตอนที่ 1: ทำความเข้าใจเส้นทางของลูกค้า
ขั้นตอนที่ 2: ระบุเป้าหมายของคุณและเป้าหมายของผู้ใช้
ขั้นตอนที่ 3: ระบุว่าผู้ใช้ของคุณมาจากไหน
ขั้นตอนที่ 4: ระบุข้อมูลที่ผู้เยี่ยมชมต้องการ
ขั้นตอนที่ 5: เห็นภาพกระแสผู้ใช้ของคุณ
ขั้นตอนที่ 6: สร้างต้นแบบโฟลว์ของคุณ
ขั้นตอนที่ 7: ทบทวน ปรับแต่ง และทดสอบ

ขั้นตอนที่ 1: ทำความเข้าใจเส้นทางของลูกค้า

การไหลของผู้ใช้ขึ้นอยู่กับสิ่งที่ผู้ใช้ทำ ดังนั้นการทำความเข้าใจว่าพวกเขาเป็นใคร แรงจูงใจ ความต้องการ และพฤติกรรมของพวกเขามีความสำคัญอย่างยิ่งต่อการสร้างแผนภาพการไหลของผู้ใช้ที่มีประสิทธิภาพ

อาจดูเหมือนเป็นขั้นตอนเพิ่มเติม แต่การดำเนินการวิจัยผู้ใช้ที่เหมาะสมและออกแบบตัวตนของผู้ใช้จะช่วยให้คุณสร้างกระแสผู้ใช้ที่ราบรื่นยิ่งขึ้น

เราได้กล่าวถึงวิธีการสร้างตัวตนของผู้ใช้ในโพสต์ก่อนหน้านี้แล้ว โปรดอ้างอิงถึงวิธีสร้างตัวตนของผู้ซื้อในไม่กี่ขั้นตอนง่ายๆ หรือหากคุณคุ้นเคยกับกระบวนการนี้อยู่แล้ว ให้เริ่มใช้เทมเพลตต่อไปนี้

เทมเพลต Persona ของผู้ใช้
เทมเพลต User Persona (คลิกที่เทมเพลตเพื่อแก้ไขออนไลน์)

เมื่อคุณสร้างโปรไฟล์ลูกค้าแล้ว คุณก็เข้าใกล้การทำความเข้าใจเส้นทางของผู้ใช้มากขึ้นไปอีกขั้น

คุณสามารถใช้แผนที่การเดินทางของลูกค้าที่นี่เพื่อวิเคราะห์อย่างถูกต้องว่าลูกค้าของคุณทำอะไร รู้สึก และคาดหวังอะไรเมื่อพวกเขากำลังโต้ตอบกับธุรกิจของคุณ (เช่น การเยี่ยมชมเว็บไซต์ของคุณ) จุดสัมผัสต่างๆ และจุดบอดต่างๆ

นอกจากนี้เรายังครอบคลุมกระบวนการสร้างแผนที่การเดินทางของลูกค้าใน 6 ขั้นตอนง่ายๆ ตรวจสอบออก

ขั้นตอนที่เหลือในการสร้างโฟลว์ผู้ใช้จะง่ายขึ้นเมื่อคุณทราบเส้นทางของผู้ใช้แล้ว

ขั้นตอนที่ 2: ระบุเป้าหมายของคุณและเป้าหมายของผู้ใช้

ขั้นตอนต่อไปคือการได้แนวคิดเกี่ยวกับวัตถุประสงค์ของธุรกิจคุณและของผู้ใช้ของคุณ

คุณอาจทราบเป้าหมายของธุรกิจของคุณแล้ว เช่น เพื่อเพิ่มคอนเวอร์ชั่นบนเว็บไซต์ของคุณ เพื่อเพิ่มยอดขายผลิตภัณฑ์ของคุณ ฯลฯ โดยปกติแล้วจะเป็นผลลัพธ์สุดท้ายของการดำเนินการที่คุณต้องการให้ผู้ใช้ของคุณทำ

ในทางกลับกัน วัตถุประสงค์ของผู้ใช้ของคุณรวมถึงความต้องการและความต้องการที่พวกเขาต้องการบรรลุ และผู้ใช้แต่ละคนก็อาจมีเป้าหมายที่แตกต่างกันออกไป นี่คือจุดที่บุคลิกของผู้ใช้และแผนที่การเดินทางของลูกค้าที่คุณสร้างไว้ก่อนหน้านี้จะช่วยคุณในการค้นหาว่าพวกเขาคืออะไร

ขั้นตอนที่ 3: ระบุว่าผู้ใช้ของคุณมาจากไหน

หากคุณกำลังออกแบบเว็บไซต์ คุณอาจต้องการทราบว่าลูกค้าของคุณมาจากไหนหรือกล่าวอีกนัยหนึ่งว่าจุดเริ่มต้นคืออะไร เหล่านี้มักจะรวมถึง

  • การจราจรโดยตรง
  • การค้นหาทั่วไป
  • สื่อสังคม
  • ค่าโฆษณา
  • อีเมล
  • เว็บไซต์อ้างอิง
  • รายการข่าวหรือข่าว

คุณสามารถใช้ Google Analytics เพื่อรับเปอร์เซ็นต์สำหรับจุดเริ่มต้นเหล่านี้ นอกจากนี้ยังอาจบ่งบอกถึงพฤติกรรมของผู้ใช้ที่แตกต่างกัน

ตัวอย่างเช่น ผู้เข้าชมโดยตรงจะค้นหาชื่อแบรนด์ของคุณ ในขณะที่ผู้เข้าชมการค้นหาทั่วไปจะค้นหาผลิตภัณฑ์ที่พวกเขาต้องการใน Google ก่อนที่จะพบว่าคุณเป็นผู้ขายที่เหมาะสม

และสิ่งสำคัญคือต้องแมปโฟลว์ผู้ใช้ที่แตกต่างกันเหล่านี้ตามจุดเริ่มต้นต่างๆ สิ่งสำคัญในการพัฒนาประสบการณ์ที่ดีขึ้นสำหรับผู้ใช้

ขั้นตอนที่ 4: ระบุข้อมูลที่ผู้เยี่ยมชมต้องการ

ในการออกแบบโฟลว์ผู้ใช้ที่ดีที่สุดเท่าที่จะเป็นไปได้ คุณต้องเข้าใจลูกค้าของคุณ

นี่หมายถึงการเข้าใจความต้องการและแรงจูงใจของพวกเขาด้วยใจ ดังนั้น คุณจำเป็นต้องรู้ว่าพวกเขามีปัญหาอะไร ความสงสัย ความลังเลใจ คำถามที่พวกเขามีคำถามเกี่ยวกับผลิตภัณฑ์ และสิ่งที่พวกเขาค้นหาคำตอบ

เนื่องจากคุณได้สร้างลักษณะผู้ซื้อและแผนที่การเดินทางแล้ว ขั้นตอนนี้จึงง่ายกว่า

ขั้นตอนที่ 5: เห็นภาพกระแสผู้ใช้ของคุณ

ถึงตอนนี้ คุณทราบถึงผู้ใช้ที่คุณกำลังสร้างโฟลว์ผู้ใช้สำหรับ วัตถุประสงค์ของพวกเขาคืออะไร และมาจากไหน ขั้นตอนต่อไปคือการสร้างโฟลว์ผู้ใช้

ลองนึกถึงสิ่งที่ผู้ใช้ของคุณทำก่อนและหลังเข้าชมหน้าใดหน้าหนึ่งในเว็บไซต์ของคุณ พวกเขาเห็นอะไร พวกเขาทำอะไรเพื่อให้บรรลุเป้าหมาย สิ่งนี้จะช่วยคุณระบุหน้าที่คุณต้องการสร้าง ข้อมูล/เนื้อหาใดที่คุณต้องระบุ และวิธีที่หน้าเหล่านั้นควรเชื่อมต่อถึงกัน

ให้ความสนใจกับจุดเริ่มต้นและจุดสิ้นสุดของแต่ละงาน ซึ่งอาจเปลี่ยนแปลงได้ตามเป้าหมายของผู้ใช้แต่ละคน

เมื่อคุณกรองข้อมูลที่จำเป็นออกแล้ว ให้เห็นภาพด้วยไดอะแกรมโฟลว์ผู้ใช้

User Flow Diagram
User Flow Diagram (คลิกที่เทมเพลตเพื่อแก้ไขออนไลน์)

ขั้นตอนที่ 6: สร้างต้นแบบโฟลว์ของคุณ

คุณสามารถใช้ต้นแบบที่มีความเที่ยงตรงต่ำ (wireframes หรือ UI จำลอง) เพื่อทดสอบโฟลว์ผู้ใช้ที่สรุปไว้ในขั้นตอนก่อนหน้า ต้นแบบช่วยเพิ่มรายละเอียดให้กับโฟลว์และช่วยให้คุณเข้าใจโฟลว์ระหว่างการกระทำของผู้ใช้และเนื้อหา

นอกจากนี้ยังช่วยให้คุณตรวจสอบว่าผลิตภัณฑ์ของคุณได้รับการออกแบบตามวัตถุประสงค์ของคุณและผู้ใช้ของคุณ

ขั้นตอนที่ 7: ทบทวน ปรับแต่ง และทดสอบ

คุณสามารถแชร์ไดอะแกรมโฟลว์ผู้ใช้ของคุณกับผู้มีส่วนได้ส่วนเสียและหารือเกี่ยวกับจุดที่ต้องปรับปรุง

และเมื่อต้นแบบที่มีความเที่ยงตรงสูงพร้อมแล้ว คุณยังสามารถทดสอบกับผู้ใช้จริงได้

ด้วยวิธีนี้ คุณสามารถรวบรวมข้อมูลในแต่ละขั้นตอนของโฟลว์ผู้ใช้และทำความเข้าใจวิธีที่ผู้ใช้นำทางผ่านผลิตภัณฑ์ของคุณ จากนั้นคุณสามารถระบุจุดที่ต้องปรับปรุงและนำโซลูชันไปใช้ก่อนการเปิดตัวผลิตภัณฑ์ขั้นสุดท้ายได้

เข้าใจเส้นทางการเดินทางของลูกค้าได้ดีขึ้นและสร้างประสบการณ์ผู้ใช้ที่เหนือกว่าด้วย Creately

สร้างกระแสผู้ใช้

แนวทางปฏิบัติที่ดีที่สุดที่ควรจำไว้

ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดด้านล่างเพื่อให้แน่ใจว่าไดอะแกรมโฟลว์ผู้ใช้ที่คุณสร้างนั้นมีประสิทธิภาพจริง ๆ ในการช่วยเหลือคุณ

  • ตั้งชื่อไดอะแกรมโฟลว์ไดอะแกรมของผู้ใช้ของคุณซึ่งอธิบายวัตถุประสงค์ของไดอะแกรมเสมอ นี้จะช่วยให้ทุกคนที่อ้างถึงเข้าใจพื้นฐานของมัน
  • ยึดทิศทางเดียวเมื่อวาดผังงาน เนื่องจากแผนภูมิจะจับคู่เรื่องราว การอ่านและทำความเข้าใจมันดีขึ้นเมื่อแผนที่ไหลไปในทิศทางเดียว
  • จำกัดจำนวนจุดตัดสินใจเพื่อไม่ให้เกะกะ/ซับซ้อนน้อยลง
  • ตรวจสอบให้แน่ใจว่าขอบเขตของไดอะแกรมโฟลว์ผู้ใช้ครอบคลุมงานเดียวหรือเป้าหมายเดียวของผู้ใช้ของคุณ หากโฟลว์ผู้ใช้ครอบคลุมงานเพียงครึ่งเดียวหรือร่างขั้นตอนเพื่อให้ครอบคลุมเป้าหมายผู้ใช้มากกว่าหนึ่งเป้าหมาย จะไม่เป็นไปตามวัตถุประสงค์
  • ตรวจสอบให้แน่ใจว่าได้เพิ่มเฉพาะข้อมูลที่จำเป็นและหลีกเลี่ยงรายละเอียดอื่นๆ ที่ไม่ได้ช่วยอธิบายขั้นตอนและการดำเนินการของผู้ใช้
  • ใช้เครื่องมือผังงานดิจิทัล เช่น Creately เพื่อเร่งกระบวนการ นอกจากนี้ยังช่วยให้คุณสามารถรับข้อมูลจากผู้อื่นและเก็บงานของคุณไว้ในที่เดียวและในระบบคลาวด์ ซึ่งจะทำให้คุณสามารถอ้างอิงและทำงานจากที่ใดก็ได้ นอกจากนี้ยังช่วยให้คุณประหยัดพื้นที่ด้วยพื้นที่ผ้าใบที่ไม่มีที่สิ้นสุด มิเช่นนั้นอาจใช้ผนังห้องประชุมของคุณหลายชั้น!

เทมเพลตไดอะแกรมการไหลของผู้ใช้

ไดอะแกรมขั้นตอนการลงทะเบียนผู้ใช้
แผนผังขั้นตอนการลงทะเบียนผู้ใช้ (คลิกที่เทมเพลตเพื่อแก้ไขออนไลน์)
ตัวอย่างแผนภาพการไหล
ตัวอย่างแผนภาพการไหล (คลิกที่เทมเพลตเพื่อแก้ไขแบบออนไลน์)
การไหลของผู้ใช้ Wireflow
เทมเพลต Wireflow (คลิกที่เทมเพลตเพื่อแก้ไขออนไลน์)

พร้อมที่จะสร้างไดอะแกรมโฟลว์ผู้ใช้ของคุณเองหรือยัง

กระแสของผู้ใช้เป็นเครื่องมือที่มีประสิทธิภาพในชุดเครื่องมือของนักออกแบบ ช่วยให้นักออกแบบมองเห็นภาพรวมได้ง่ายขึ้น – หน้าใดที่พวกเขาต้องสร้างและควรเชื่อมต่ออย่างไร เราได้ครอบคลุมทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อสร้างไดอะแกรมโฟลว์ผู้ใช้แล้ว ซึ่งรวมถึงเทมเพลตที่คุณสามารถใช้เพื่อเริ่มต้นได้ทันที

ตอนนี้เราต้องการทราบความคิดเห็นของคุณเกี่ยวกับไดอะแกรมการไหลของผู้ใช้? พิมพ์ในส่วนความคิดเห็นด้านล่าง