ระวัง! Flat Design ทำให้ผู้ใช้สับสนกับเว็บเรามากขึ้นถึง 70% + 5 วิธีแก้ไขง่าย ๆ

designil

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

การทดลองด้าน Usability ใน Flat Design ของ Nielsen Norman Group

คุณ Kate Meyer ซึ่งเป็นผู้เชี่ยวชาญ User Experience ของบริษัท NN/g ที่ปรึกษาด้าน UX ที่เชื่อว่าคนในวงการต้องเคยได้ยินชื่อกันแน่นอน ได้นำเว็บไซต์ 9 เว็บไซต์ จาก 6 กลุ่มธุรกิจ มาลองทำเป็นสองเวอร์ชั่น คือ เว็บไซต์แบบไม่ใช้ Flat Design เลย กับเว็บไซต์ที่ใช้ Flat Design ทั้งหมด

รูปตัวอย่างเว็บที่นำมาแก้ไข – (ซ้าย) ปุ่มแบบปกติ ไม่ใช้ 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 ทำให้ผู้ใช้หาปุ่มไม่เจอ

รูปเปรียบเทียบ Heatmap – (ซ้าย) เว็บที่ไม่ใช้ Flat Design (ขวา) เว็บที่ใช้ 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

ตัวอย่าง Pattern หัวข้อ -> ย่อหน้า -> ปุ่ม ดีไซน์โดยคุณ probfactory

3) Contrast ต้องชัดเจน

การทำ Flat Design คนจะชอบใช้ตัวหนังสือสีเทาบาง ๆ บนพื้นหลังสีเทาบาง ๆ ทำให้อ่านยาก แต่มองข้ามกันไปเพราะมันให้ความสวยงามสไตล์ Flat

ถ้าอยากให้ผู้ใช้เห็นชัดเจนในส่วนไหน เราต้องทำให้จุดนั้นมี Contrast ที่เด่นชัดขึ้นมาก่อน อาจจะไม่ต้องถึงกับใช้สีดำ #000 บนพื้นขาว #FFF แต่ใช้สีดำ #111 บนพื้นขาว #EEE ก็อ่านง่ายแล้วครับ

ตัวอย่างการใช้สีแบบ Contrast น้อย ทำให้ตัวหนังสือจม – Dunked.com

4) เราไม่จำเป็นต้องใช้ Flat Design 100%

อย่ากลัวการใช้เงา หรือใช้ Texture บาง ๆ เพื่อให้ดีไซน์ใช้งานง่ายขึ้น ลองดูตัวอย่างของ Material Design ของ Google จะพบว่าเค้านำ Flat Design มาร่วมกับเงา เพื่อให้เกิดความลึกความนูน ส่งผลให้ผู้ใช้เข้าใจได้ง่ายขึ้นว่าเลเยอร์ไหนวางอยู่บนเลเยอร์ไหน

Material Design Google UI
Material Design ของ Google มีการใช้แสงเงาเพื่อเพิ่มความลึกใน Interface

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 ครับผม

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด