การเขียน User Flow Diagram แบบไม่ซับซ้อน
หลายคนมีปัญหาว่าเวลาเขียน User Flow diagarm แล้วปรากฎว่าตัว Page ของแต่ละหน้ามีจำนวนหน้าที่ขยายออกจากเดิมมาก โดยเฉพาะตอนทำ Wireframe prototyping ตัว User Flow ตาม definition คือ เป็นเส้นทางของงานที่ผู้ใช้ทำเพื่อให้บรรลุเป้าหมาย ซึ่งถ้าเราทำเส้นทางการไหลที่ซับซ้อนปัญหาตามมาก็คือ ความยากในการนำทาง ผู้ใช้อาจจะหลงทางในตัวแอปพลิเคชันได้ และบางเส้นทางผู้ใช้อาจจะไม่ได้เข้าไปใช้ หลักการก็คือว่าเราต้องการให้ผู้ใช้ถึงจุดสิ้นสุดเพื่อสำเร็จเป้าหมายเร็วที่สุดเท่าที่จะเป็นไปได้ โดยลดขั้นตอนแต่ละขั้น ก่อนที่จะมาเริ่มคุยกันว่าจะทำ User Flow ให้ง่ายทำอย่างไร เรามาคุยเรื่องสัญลักษณ์ของ User Flow ก่อนกันดีกว่า
สัญลักษณ์ของ User Flow ตามรูปที่ 1 มีแค่สามอย่าง คือ Screen ได้แก่หน้าจอ Decision ได้แก่การตัดสินใจ และลูกศรนำทางไปที่สุดท้าย ทีม UX ของ Google มีสัญลักษณ์อีกอย่างคือ วงกลม ที่แสดงถึง Action ในที่นี้จะตัดส่วนนี้ออกไปเพื่อให้ง่ายต่อความเข้าใจ
ความสัมพันธ์ระหว่าง User Flow และ หน้า Screen จะมีความสัมพันธ์ที่เป็นแบบเชื่อมโยงกัน คือ 1 หน้า page เท่ากับ 1 กล่อง ส่วนที่เป็นปุ่มก็เป็นการตัดสินใจที่เป็นเครื่องหมายข้าวหลามตัด ยิ่งมีปุ่มมากการตัดสินใจก็จะเยอะตามไปด้วย
ภาพที่ 3 แสดงทั้งระบบของ User Flow แต่เราไม่ควรเขียน User Flow ลักษณะนี้เป็นเพราะว่ามันจะดูซับซ้อน ถ้าจะเขียนก็ให้เขียนเป็น Flow เส้นทางเดียวหลายๆ แผ่น ดังนั้นเราต้องจับ User Flow หลัก เช่น ถ้าเป็น app ออกกำลังกาย ตัว Flow ก็จะจบด้วยการออกกำลังกาย
ภาพที่ 4 เน้น เรื่อง User Flow ของการออกกำลังกายอย่างเดียว แต่ถ้าจะลดความยาวของ Flow ก็สามารถทำให้สั้นลงได้ด้วยการทำปุ่ม Start workout ข้ามไปยังโปรแกรมการออกกำลังกายเลยโดยไม่ต้องผ่านการค้นหาว่า Workout มีกี่ประเภท
สรุปการออกแบบ User Flow
- ควรออกแบบให้ง่ายและสะท้อนกับการออกแบบหน้าสกรีนและปุ่ม
2. User Flow ควรโฟกัสเป้าหมายที่ผู้ใช้ต้องการทางเดียวมากกว่าจะเสนอการเดินทางหลายทิศทางที่อาจจะทำให้ผู้ใช้สับสน
3. สังเกตเวลาเราเขียน Screen มักจะตามด้วย Decision เสมอ เพื่อที่จะไป Screen ถัดไป ทุกครั้งเลยมีการสลับกันไปมาระหว่าง Screen กับ Decision
4. การทำให้ง่ายก็คือการลดความยาวของงานที่ผู้ใช้ต้องทำหรือตัดสินใจ เช่น เราอาจจะ Shortcut กระบวนการที่ไม่จำเป็นต้องทำทุกครั้งเพื่อเล่นแอปพลิเคชั่น
ถ้าผู้อ่านมีตัวอย่างก็สามารถเขียน Comment ด้านล่าง เพื่อเป็นประโยชน์กับการแลกเปลี่ยนกับของชุมชน UX นะครับ
