ระวัง! Flat Design ทำให้ผู้ใช้สับสนกับเว็บเรามากขึ้นถึง 70% + 5 วิธีแก้ไขง่าย ๆ
ปัจจุบัน Flat Design ถือเป็น เทรนด์การออกแบบเว็บไซต์ ที่หลาย ๆ คนนำมาใช้กัน ส่วนหนึ่งเลยเพราะความสวยงาม และความเรียบง่ายของมัน แต่เบื้องหลังความเรียบง่ายก็มีข้อเสีย ซึ่งวันนี้เราจะมาเล่าให้ฟังกันครับ
การทดลองด้าน Usability ใน Flat Design ของ Nielsen Norman Group
คุณ Kate Meyer ซึ่งเป็นผู้เชี่ยวชาญ User Experience ของบริษัท NN/g ที่ปรึกษาด้าน UX ที่เชื่อว่าคนในวงการต้องเคยได้ยินชื่อกันแน่นอน ได้นำเว็บไซต์ 9 เว็บไซต์ จาก 6 กลุ่มธุรกิจ มาลองทำเป็นสองเวอร์ชั่น คือ เว็บไซต์แบบไม่ใช้ Flat Design เลย กับเว็บไซต์ที่ใช้ Flat Design ทั้งหมด
จากนั้นให้ผู้ใช้ 29 คน มาลองใช้เว็บไซต์โดยมีโปรแกรม Eyetracker ตรวจจับการเคลื่อนไหวของสายตา เพื่อดูว่าการใช้เว็บทั้งสองแบบแตกต่างกันอย่างไร
สำหรับใครที่สนใจดูแบบวีดิโอ เค้าสรุปมาให้สั้น ๆ ใน 5 นาที สามารถดูที่นี่ได้เลยครับ:
ผลการทดลองจาก NN/g บอกอะไรเราบ้าง
Nielsen Norman Group ค้นพบว่า:
- ผู้ใช้ส่วนใหญ่ใช้เวลามากขึ้น 22% กับเวอร์ชั่นที่ใช้ปุ่มแบบ Flat Design
- ผู้ใช้ส่วนใหญ่ต้องดู Element อื่นในหน้าเว็บมากขึ้น 25% ก่อนตัดสินใจคลิก ในเวอร์ชั่นที่ใช้ปุ่มแบบ Flat Design
- ผู้ใช้ค้นพบปุ่มแบบที่ไม่ใช่ Flat Design เจอง่ายกว่าปุ่มแบบ Flat Design ถึง 70% (แบบมีนัยสำคัญทางสถิติ หรือ p-value < 0.005 อีกด้วย)
ข้อมูล Heatmap จากโปรแกรม Eyetracker ที่ตรวจจับการมองส่วนต่าง ๆ บนหน้าจอ ยิ่งสีแดงเข้มยิ่งแปลว่าคนดูส่วนนั้นเยอะ เราสามารถเห็นได้ชัดเจนว่า Flat Design ทำให้ผู้ใช้หาปุ่มไม่เจอ
หากต้องการดูรูปเปรียบเทียบของเว็บไซต์อื่น ๆ สามารถดูได้จาก เว็บไซต์ Nielsen Normal Group ครับ
ผลการทดลองนี้ ไม่ได้หมายความว่าเราต้องกลับจากยุค Flat Design มาใช้ Skeumorphic แต่อย่างใดนะครับ หลาย ๆ เว็บไซต์นำ Flat Design มาใช้จนเป็นส่วนหนึ่งของ Brand Identity ไปแล้ว จะให้เปลี่ยนหมดก็ใช้พลังเยอะเกิน คุณ Kate ได้แนะนำวิธีแก้ปัญหาของ Flat Design แบบง่าย ๆ 5 ข้อให้เอาไปปรับใช้ได้ตั้งแต่วันนี้เลย
5 วิธีแก้ปัญหาให้ Flat Design ใช้งานได้ง่าย
วิธีทำให้ Flat Design กลับมาใช้งานได้อีกรอบนั้นไม่ยากเลยครับ หัวใจหลักเหมือนกันการทำ Flat Design 2.0 นั่นคือ:
1) ตกแต่งส่วนที่คลิกได้ให้เหมือนกันทั้งเว็บ
เพื่อไม่ให้ผู้ใช้สับสน ส่วนที่คลิกได้ เช่น ปุ่ม, แท็บ, สไลเดอร์ ต้องตกแต่งให้หน้าตาเหมือนกัน เช่น อาจจะใช้สีส้มสดใสในส่วนที่คลิกได้
และการตกแต่งต้องให้แตกต่างจากตัวหนังสือธรรมดาที่คลิกไม่ได้อย่างเห็นได้ชัดเจนด้วย ไม่อย่างนั้นส่วนที่คลิกได้จะโดนกลืนไป
2) ทำให้ Pattern บนเว็บไซต์เหมือนกับเว็บทั่วไป
หลายคนมักคิดว่า การทำให้เว็บไซต์เหมือนคนอื่นเป็นสิ่งไม่ดี แต่จริง ๆ แล้วการที่เว็บไซต์ของเรามีการใช้งานส่วนต่าง ๆ ที่เหมือนกับเว็บไซต์อื่น (โดยเฉพาะเว็บไซต์ดัง ๆ ที่คนใช้บ่อย) มีข้อดีของมันเองเช่นกัน
การดึง Pattern จากเว็บดังมาใช้ เป็นการการันตีว่า ผู้ใช้จะไม่ค่อยงงกับการใช้เว็บไซต์เรา เพราะเค้าเคยใช้เว็บอื่นที่มี Pattern เดียวกันมาแล้วนั่นเอง
ตัวอย่างการใช้ Pattern เดียวกัน เช่น จัดวางหัวข้อ ตามด้วยย่อหน้ายาว ตามด้วยปุ่ม Call to Action
3) Contrast ต้องชัดเจน
การทำ Flat Design คนจะชอบใช้ตัวหนังสือสีเทาบาง ๆ บนพื้นหลังสีเทาบาง ๆ ทำให้อ่านยาก แต่มองข้ามกันไปเพราะมันให้ความสวยงามสไตล์ Flat
ถ้าอยากให้ผู้ใช้เห็นชัดเจนในส่วนไหน เราต้องทำให้จุดนั้นมี Contrast ที่เด่นชัดขึ้นมาก่อน อาจจะไม่ต้องถึงกับใช้สีดำ #000 บนพื้นขาว #FFF แต่ใช้สีดำ #111 บนพื้นขาว #EEE ก็อ่านง่ายแล้วครับ
4) เราไม่จำเป็นต้องใช้ Flat Design 100%
อย่ากลัวการใช้เงา หรือใช้ Texture บาง ๆ เพื่อให้ดีไซน์ใช้งานง่ายขึ้น ลองดูตัวอย่างของ Material Design ของ Google จะพบว่าเค้านำ Flat Design มาร่วมกับเงา เพื่อให้เกิดความลึกความนูน ส่งผลให้ผู้ใช้เข้าใจได้ง่ายขึ้นว่าเลเยอร์ไหนวางอยู่บนเลเยอร์ไหน
5) ส่วนไหนที่น่าจะคลิกได้ ทำให้คลิกได้ไปเลย
ส่วนไหนที่ใหญ่ ๆ เด่น ๆ สีสด ๆ ที่น่าจะคลิกได้ เราก็ใส่ลิงค์ให้ส่วนนั้นคลิกได้ไปเลย เพื่อแก้ปัญหาผู้ใช้มองไม่เห็นปุ่มที่เราต้องการให้เค้าคลิก
คำแนะนำข้อนี้แอดมองว่าต้องใช้อย่างระวังพอสมควรครับ เพราะมันจะทำให้หน้าเว็บเรามีลิงค์ซ้ำ ๆ ไปที่เดียวกันหลายจุด ซึ่งอาจจะส่งผลเสียต่อ SEO ก็ได้เพราะเหมือนเราพยายามแสปมลิงค์ครับ
สรุป: 5 วิธีแก้ปัญหา Flat Design สไตล์ Kate Meyer
หลัก 5 ข้อนี้จะช่วยให้เราแก้ปัญหาผู้ใช้ใช้งาน Flat Design ได้ยากไปเยอะเลยครับ:
1) ตกแต่งส่วนที่คลิกได้ให้เหมือนกันทั้งเว็บ
2) ทำให้ Pattern บนเว็บไซต์เหมือนกับเว็บทั่วไป
3) Contrast ต้องชัดเจน
4) เราไม่จำเป็นต้องใช้ Flat Design 100%
5) ส่วนไหนที่น่าจะคลิกได้ ทำให้คลิกได้ไปเลย
หากท่านใดมีเทคนิคอื่น ๆ ที่ทำให้ Flat Design ใช้งานได้ง่ายขึ้น มาแชร์กันได้ในส่วนคอมเม้นท์เลยครับผม และคอมเม้นท์ที่น่าสนใจแอดมินจะนำมาใส่ในบทความพร้อมให้เครดิตครับ :)
สุดท้ายนี้ ขอเชิญทุกท่านมาพูดคุย ติชมบทความ และติดตามบทความด้านการออกแบบใหม่ล่าสุดกันได้ใน Facebook Page Designil ครับผม