<img src="//trc.taboola.com/1081267/log/3/unip?en=page_view" width="0" height="0" style="display:none">
LINE Add Friend

Scan Me

02-0619085, 095-9346383

dm@ourgreen.co.th

 

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

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

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

Usability

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

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

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

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

shutterstock_1558512068

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 เป็นอีกวิธีที่ช่วยให้ตัวบ่งชี้คุณภาพนั้นดีขึ้น โดยเฉพาะเออเร่อที่กำลังจะเกิดขึ้นในอนาคตด้วยเช่นกัน ดังนั้นเราควรดักทางผู้ใช้งานให้ครบ ยกตัวอย่างเช่น 

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

shutterstock_1082901185

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]

REMARKABLE CONTENTS

รู้จัก Marketing Hub Website เว็ปไซต์สำหรับทำการตลาด Digital

Supattra Ammaranon x Ourgreenfish

Ourgreenfish LINE Connect

ติดตามสาระความรู้เกี่ยวกับ
Digital Marketing และเทคโนโลยีได้ที่ Ourgreenfish Connect

 

Recent Posts