The Basics of User Interface Design in Software Development

Golden rules of User Interface Design ในหนังสือของ Ben Shneiderman ได้อธิบายกฎที่สำคัญสำหรับการออกแบบ UI เอาไว้ 8 ข้อ เรามาเริ่มดูรายละเอียดกันเลยดีกว่า

1. การทำให้ User Interfaces มีความสอดคล้องกันในทุกหน้า

Mike Gilfillan, Technical Lead Developer จากบริษัท Edge of the Web กล่าวเอาไว้ว่า “Consistency (ความสม่ำเสมอ) คือกุญแจสำคัญข้อแรกในการออกแบบ พวกสี หรือฟอนต์ที่หลากหลาย เราควรใช้ในปริมาณที่พอเหมาะและใช้ทุกที่ให้เหมือนๆ กันไม่ให้มีความหลากหลายเกิดขึ้นมากเกินไป

UI ที่มี Consistency (ความสม่ำเสมอ) หมายถึงการใช้ลักษณะการออกแบบที่คล้ายคลึงกัน Text Typography Spacing ที่เหมือนกัน เมนูและหน้าจอที่ดูเป็นไปในทิศทางเดียวกัน รวมถึงคำสั่งปุ่มต่าง ๆ ที่สอดคล้องกันทั่วทั้งเว็บไซต์หรือแอปพลิเคชัน

Image: ui-design-principles-image-1-consistency. Credit: maze.co

Image: ui-design-principles-image-1-consistency. Credit: maze.co

2. ทำให้ User หาสิ่งที่ต้องการได้ง่าย โดยการใช้ Shortcuts

Expert users หรือ User ที่คุ้นเคยกับผลิตภัณฑ์มาก ๆ เราจำเป็นต้องให้ User ประเภทนี้เข้าถึงเครื่องมือที่ช่วยให้เขาทำงานได้รวดเร็วขึ้น และบรรลุเป้าหมายที่เขาต้องการได้โดยเร็วจาก UI ของเรา

ยกตัวอย่างเช่น การที่ Windows มีปุ่มคีย์ลัด Ctrl+C เพื่อคัดลอกข้อความ และ Ctrl+V เพื่อวางข้อความ คุณจำเป็นต้องทำให้เครื่องมือบน UI ของคุณใช้งานได้ง่ายและรวดเร็วที่สุดสำหรับ User ที่มีความคุ้นเคยกับผลิตภัณฑ์ของคุณอยู่แล้ว

3. การให้ข้อมูลหรือ Feedback กลับไปที่ User

ออกแบบ Feedback บนหน้า UI เมื่อ User มีการกระทำบางอย่างบน UI ของเรา Ben Shneiderman อธิบายไว้ว่า “การกระทำที่เกิดขึ้นบ่อยครั้งหรือเกิดขึ้นบ้าง Feedback ประเภทนี้อาจอยู่ในระดับการ Feedback แบบปานกลาง ในขณะที่การกระทำที่เกิดขึ้นไม่บ่อยหรือเป็นการกระทำที่สำคัญมาก Feedback ประเภทนี้ควรมีสาระสำคัญอย่างมาก”

ยกตัวอย่าง เมื่อ User ต้องการสร้างรหัสผ่าน UI ของคุณควรแนะนำว่า User ควรจะตั้งรหัสผ่านแบบไหน ให้มีความปลอดภัยสูง เราควรมีสัญลักษณ์หรือความคืบหน้าบางอย่างที่ทำให้ User รับรู้ได้ว่าความปลอดภัยของรหัสผ่านอยู่ในระดับไหน

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

Image: ui-design-principles-image-1-informative feedback. Credit: maze.co

รูปถัดไปเมื่อ User สร้างรหัสผ่านที่ยากขึ้นด้วยการเติมตัวเลขและสัญลักษณ์หลายตัว

Image: ui-design-principles-image-2-informative feedback. Credit: maze.co

4. การออกแบบ Journey ให้ User สามารถเข้าถึงขั้นตอนสุดท้ายให้ได้

สิ่งที่ Shneiderman กล่าวไว้ “การเรียงลำดับของ Journey ควรจัดเป็นกลุ่ม ๆ โดยมีจุดเริ่มต้นให้ User เริ่มทำอะไร ต่อด้วยขั้นตอนตรงกลางไปเรื่อย ๆ จนถึงจุดสิ้นสุด เมื่อ User ดำเนินการเสร็จสิ้นแล้ว ควรช่วยให้ User ได้รับความพึงพอใจใน Journey ที่เพิ่งทำสำเร็จมา ช่วยให้เขารู้สึกโล่งใจ สบายใจ ช่วยให้ User หายความจากความอึดอัด ลำบากใจ และพร้อมสำหรับ Journey ถัดไป”

ตัวอย่างที่ดีของการกระทำคือ หน้า Thank You ที่จะสรุปข้อมูลรายละเอียดทั้งหมดของรายการที่เราได้ทำไว้ก่อนหน้านั้นเพื่อยืนยันว่าสิ่งที่ User ได้กระทำลงไปมีอะไรบ้างถูกต้องมากน้อยแค่ไหนและเป็นการยืนยันอีกทีในขั้นตอนสุดท้าย

5. การป้องกัน UI ให้มีข้อผิดพลาดน้อยที่สุด

ในฐานะนักออกแบบ คุณต้องมั่นใจในทุก Flow การใช้งานของ User ว่าทุกการใช้งานเป็นการใช้งานที่เข้าใจง่ายและซับซ้อนน้อยที่สุด โดยสามารถทำการ Usability test กับ User ก่อนเปิดตัว Product การทำ Usability test ไม่เพียงแต่ช่วยทดสอบฟังก์ชันการใช้งาน Product แล้ว แต่ยังช่วยให้คุณเข้าใจความต้องการของ User หรือกลุ่มเป้าหมายได้ดีขึ้นอีกด้วย

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

6. อนุญาตให้ User ย้อนกลับในสิ่งที่เขาได้ทำผิดพลาดไป

Shneiderman อธิบายว่า “ฟีเจอร์นี้ช่วยลดความกังวล เนื่องจาก User รู้ว่าข้อผิดพลาดสามารถยกเลิกหรือย้อนกลับได้ ทำให้ User ไม่กังวลที่จะสำรวจฟีเจอร์อื่น ๆ ที่ไม่คุ้นเคยในเว็บไซต์หรือแอปพลิเคชัน”

สมมติว่ามี User ใส่ข้อมูลที่ไม่ถูกต้องลงในแบบฟอร์มหลายหน้าโดยไม่ได้ตั้งใจ ปล่อยให้พวกเขากลับไปที่หน้านั้นและแก้ไขข้อผิดพลาดได้อย่างง่ายดายโดยไม่ต้องเริ่มต้นใหม่ทั้งหมด

7. ทำให้ User รับรู้ได้ถึงความสบายใจจากการใช้งานที่คุ้นเคย

“User เดิมที่เคยใช้ Product เดิม ๆ ต้องการความรู้สึกว่าพวกเขาสามารถใช้งานฟังก์ชันต่าง ๆ ได้โดยไม่ต้องเรียนรู้ใหม่ พวกเขาไม่ต้องการความแปลกประหลาดหรือการเปลี่ยนแปลงในการใช้งานที่คุ้นเคยอยู่แล้ว และพวกเขาจะรำคาญด้วยหากพบความยากลำบากในการใช้งาน” Shneiderman กล่าว

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

8. ลดภาระการใช้ความคิดของ User ให้น้อยที่สุด

กฎสำคัญในการทำให้ UI ใช้งานง่ายคือ การลดภาระการรับรู้หรือสิ่งที่ทำให้ User ใช้ความคิดในการทำความเข้าใจเยอะจนเกินไป ดังนั้นจึงจำเป็นอย่างยิ่งที่ระบบจะทำการจดจำข้อมูลต่าง ๆ ของ User จากการใช้งานในอดีตไว้ให้มากที่สุด

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

ขณะออกแบบให้เลือกการจดจำข้อมูลไว้มากกว่าการเรียกหาข้อมูลจาก User ตลอดเวลา เพื่อให้ User สามารถทำงานให้เสร็จได้อย่างรวดเร็วและไม่ยุ่งยาก

References:

• https://www.uxpin.com/studio/blog/ui-design-principles/

• https://www.turing.com/resources/ui-design-process