Digital Blog - Ourgreenfish

Design UI แบบ Jakob Nielsen ช่วยเพิ่ม Usability ให้ดีขึ้น

Written by สุพัตรา อัมรานนท์ | 19 พ.ค. 2020, 3:00:00

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

Usability คืออะไร? ทำไมต้องคำนึงถึง

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

  • Effectiveness สามารถใช้งานได้ รู้ว่าควรใช้งานอย่างไร
  • Efficiency ใช้งานง่าย ลื่นไหล รวดเร็วและไม่เสียพลังงาน
  • Satisfication ความพึงพอใจในการใช้งาน

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

10 หลักการ ออกแบบ UI แบบฉบับ Jakob Nielsen

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

Match between system and the real world
ผู้ใช้ทุกคนมีความคาดหวังในการใช้งานอยู่ในตัวทั้งนั้น แต่คุณจะจัดการกับความคาดหวังนั้นได้อย่างไรบ้าง ดังนั้นควรออกแบบ UI ให้ยึดสิ่งที่ผู้ใช้งานคุ้นเคยและเห็นเป็นประจำอยู่แล้ว ผู้ใช้ไม่จำเป็นต้องเรียนรู้ใหม่และสามารถทำความเข้าใจกับการทำงานได้ง่าย ๆ พยายามใช้ภาษาที่เป็นภาษาที่ใช้ในชีวิตประจำวันทั่วไป ไม่ใช่ภาษาที่แปลกหรือภาษาคอมพิวเตอร์ที่คนไม่เข้าใจ

User control and freedom
หน้า UI ควรมีการออกแบบให้ผู้ใช้งานสามารถย้อนกลับหรือยกเลิก หากผู้ใช้งานทำอะไรผิดพลาดบนเว็บไซต์ และปุ่มเหล่านั้นควรโชว์ในหน้าการใช้งานทันที ไม่ควรซ่อนไว้เพราะจะทำให้ผู้ใช้งานใช้งานยาก เพราะต้องมาเสียเวลาในการหาปุ่ม ๆ นั้น 

Consistency and Standards
UI ที่น่าสนใจคือ UI ที่ออกแบบไปในทางเดียวกัน ไม่ว่าจะเป็นสี ฟอนต์ รูปแบบของปุ่ม ไม่ควรออกแบบให้แตกต่างกัน ถ้าให้เซฟที่สุดคือควรออกแบบให้เป็นพื้นฐานของเว็บไซต์เลย ว่าเว็บไซต์ควรมาในแนวนี้นะ ถ้าวางเมนูไว้ทางด้านซ้าย ทั้งเว็บไซต์ก็ควรวางไว้ด้านซ้ายให้เหมือน ๆ กัน 

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

  • แบบฟอร์มที่ให้ผู้ใช้งานกรอกข้อมูล หากผู้ใช้งานกรอกข้อมูลไม่ครบ ให้แสดงเออเร่อหรือแจ้งเตือนสีแดงเพื่อให้ผู้ใช้งานกรอกข้อมูล
  • มีป๊อบอัพแจ้งเตือน เพื่อถามคอนเฟิร์มผู้ใช้งานอีกครั้ง

Recognition rather than recall
อย่าให้ผู้ใช้งานต้องใช้ความจำเยอะ พยายามนำเสนอในสิ่งที่เขาสนใจให้ได้มากที่สุด อย่างเช่น การแยกหมวดของสินค้าไว้ตามที่ต่าง ๆ ปุ่มที่จดจำว่าก่อนหน้านี้ลูกค้าได้เลือกชมสินค้าอะไรไปบ้าง หรือหน้าของการสรุรปรายการสินค้าทั้งหมดที่ผู้ใช้งานได้เลือกซื้อไป 

Flexibility and Efficiency of use
การออกแบบการใช้งานให้เหมาะสมกับระดับผู้ใช้งานที่แตกต่างกัน ตั้งแต่ผู้ใช้งานที่พึ่งเริ่มต้นไปจนถึงผู้ใช้งานที่เป็นระดับโปร ถ้าหากเป็นแค่ผู้ใช้งานแบบเริ่มต้น อาจใช้งานได้แค่ในฟีเจอร์ปกติ แต่ถ้าเป็นผู้ใช้งานระดับโปร อาจได้รับบริการที่ดี มีประสิทธิภาพและใช้งานได้อย่างรวดเร็ว

Aesthetic and minimalist design
ควรออกแบบให้เว็บไซต์ดูเรียบง่าย สบายตา ใช้โทนสีที่ง่ายไม่ทำให้ผู้พบเห็นรู้สึกรำคาญตา รำคาญใจ ซ่อน Secondary Function ไว้ช่องทางต่าง ๆ หลีกเลี่ยงการใช้ตัวหนังสือที่ไม่จำเป็นบนหน้าเว็บไซต์ เพื่อไม่ให้ดูรกจนเกินไป

Help users recognize, diagnose, and recover from errors
หากผู้ใช้งานเจอเออเร่อที่แสดงบนหน้าเว็บไซต์ ให้ระบุหรือแจ้งให้ผู้ใช้งานรับทราบทันทีว่าเขาทำอะไรผิด แล้วต้องแก้ไขยังไงถึงจะให้เออเร่อนั้นหายไป อย่างเช่น เวลาอินเทอร์เน็ตมีปัญหา หากคุณใช้งาน Google Chrome อยู่ จะมีการแจ้งเตือนว่าอินเทอร์เน็ตใช้ไม่ได้ พร้อมวิธีแก้ไข 

Help and documentation
ไม่ใช่ผู้ใช้งานทุกคนที่จะสามารถใช้งานเว็บไซต์ได้อย่างคล่องแคล่ว ดังนั้นหากเขาเห็นหน้าที่เป็นเกี่ยวกับ FAQ หรือ ความช่วยเหลือต่าง ๆ แชทบอทสำหรับถามตอบกับแอดมินเว็บไซต์ แต่อย่าแสดงความช่วยเหลือในเวลาที่ผู้ใช้งานไม่ต้องการนะ อาจจะสร้างความรำคาญได้ 

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

 

ที่มา : [1]

Supattra Ammaranon x Ourgreenfish