ออกแบบ UI (User Interface)ให้ใช้งานง่าย ด้วย 10 Usability Heuristics | UPSKILL UX

Krit Chainoi
Nov 6 · 3 min read

สวัสดีชาว UPSKILL UX ทุกท่าน วันนี้กลับมาอีกแล้วกับบทความช่วง #UPSKILLUXLearn วันนี้เราจะมาคุยกับเรื่องของ UI (User Interface) กันบ้างนะครับ

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

จึงมีอาจารย์ Doctor ต่างประเทศท่านหนึ่งชื่อ “Jakob Nielsan, Ph.D” ได้คิดเรื่องเกี่ยวกับว่า ถ้าเราจะต้องออกแบบ UI (User Interface) ให้สามารถใช้งานได้ง่าย ๆ สะดวก เราจะต้องคำนึ่ง ถึงเรื่องอะไรบ้าง ?

เอาละ..! ไปเช็คลิสกัน


10 Usability Heuristics for User Interface Design

  1. Visibility of System Status : ระบบของคุณควรบอกสถานะที่กำลังเกิดขึ้น

เวลาเราออกแบบ UI (User Interface) อะไรก็ตาม เราควรพยายามให้ผู้ใช้รับรู้ถึงว่า ตอนนี้เค้ากำลังทำอะไรอยู่ ? อยู่หน้านี้เพื่ออะไร ? ระบบกำลังทำอะไรอยู่ ?

เพื่อที่ผู้ใช้จะได้เข้าใจกระบวนการทำงาน และการใช้งานที่สะดวกมากขึ้น

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

2.Match Between System and The Real World : ควรใช้ภาษา สัญลักษณ์ และคอนเซ็ปต์ที่คุ้นเคย

ส่วนนี้เป็นส่วนที่นักออกแบบ (Designer) หรือ นักพัฒนาโปรแกรม (Programmer) มักตกม้าตายมากที่สุด

โดยส่วนใหญ่มักจะออกแบบให้สวยไว้ก่อน ไม่ได้คำนึงถึงโลกความเป็นจริงเท่าไร ? เช่นจะต้องออกแบบบัตร Debit Card แล้วออกแบบให้มัน Minimal ง่าย ๆ สรุปคือตัดรายละเอียดบัตรออกหมด

ซึ่งอันนี้คนจะสับสน งง ๆ กับว่าส่วนนี้คืออะไรวะ ถ้าเป็นไปได้ทำให้มันเหมือนความเป็นจริง

ตัวอย่าง แอปพลิเคชัน TMB กับ KTC ออกแบบส่วนเลขบัตรบัญชีต่าง ๆ

3.User Control and Freedom : มีอิสระ และทางออกให้ผู้ใช้เสมอ

การออกแบบหน้าจอ UI (User Interface) ช่วงกระบวนการสำคัญ ๆ หรือปกติก็ได้ ควรมีช่องทางที่ให้ผู้ใช้ได้ดำเนินการตัดสินใจออก ย้อนกลับ หรือกลับไปหน้าหลัก เพื่อที่จะให้ผู้ใช้ได้มีอิสระในการเลือก ไม่บังคับการทำงาน

ตัวอย่าง ที่หน้าสนใจและเป็นกรณีที่ค่อนข้างดีคือ iPhone ช่วง รุ่น 4–8 จะมีปุ่มตรงกลางเพื่อให้ผู้ใช้งานได้ย้อนกลับทุกอย่าง ในกรณีอยากจะย้อนกลับไปในหน้าแรก

4.Consistency and Standards : มีความสม่ำเสมอในภาษา และงานออกแบบ

งานออกแบบ UI (User Interface) ของเรา จะต้องมีความสม่ำเสมอ ไม่ว่าจะเป็นภาษาที่ใช้ การจัดวางองค์ประกอบ สี หรือแม้กระทั้งรูปร่างหน้าตาของ Icon

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

5.Error Prevention : ป้องกันไม่ให้ผู้ใช้งานทำงานผิดพลาด

เวลาผู้ใช้งาน ใช้งาน UI (User Interface) ของเรา เรามักจะพูดเสมอว่า “ถ้าหากเป็นกรณีสำคัญ เราอาจจะต้องถามเค้าก่อนเพื่อตัดสินใจเลือกดำเนินการ” เช่น การยืนยันการจ่ายเงิน การยกเลิกอัพโหลดไฟล์

ทั้งนี้นักออกแบบ (Designer) และนักพัฒนาโปรแกรม (Programmer) ต้องเลือกว่าจะใช้วิธีการไหนที่จะเหมาะสมที่สุด

6.Recognition Rather than Recall : ใช้ความเข้าใจและไม่ต้องจำขั้นตอนเพื่อใช้งาน

เวลาออกแบบแล้ว เรามักจะเข้าใจอยู่คนเดียว

ความหมาย คือเราจะต้องใจให้ผู้ใช้งานทำตามขั้นตอนการทำงานของเรา โดยเราการออกแบบสาระตะ นานา ไปโดยบางครั้ง ไม่ได้คำนึงว่ามันจะเข้าใจง่ายหรือเปล่า ?

กลายเป็นว่าผู้ใช้งานต้องจำ 1 > 2 > 3 > 4 ต้องทำอะไรบ้างแทน วิธีการที่จ่ายที่สุด คือพยายามไม่ต้องให้เค้าคิดมากที่สุด

7.Flexibility and Efficiency of Use : ต้องยืดหยุ่น และสามารถใช้งานได้ดีขึ้น

โดยปกติเรามักจะให้ผู้ใช้งานสามารถดำเนินการได้อย่างเดียวในแต่ละกระบวนการ

ซึ่งอาจจะทำให้ผู้ใช้งานใช้งานยากขึ้น เช่น มีแต่ช่องค้นหา ไม่มีตัวกรองอะไรเลย จะค้นหาแต่ละทีต้องพิมพ์ชื่อเอา

ตัวอย่าง การค้นหา “UPSKILL UX” ใน Facebook ซึ่งสามารถเลือกกรอกข้อมูล จัดประเภทข้อมูลที่ต้องการค้นหาได้

8.Aesthetic and Minimalist Design : กระชับและมีข้อมูลไม่มากเกินความจำเป็น

บางครั้งด้วยข้อมูลที่เยอะมหาศาล ที่ต้องอัดเข้าไปในการออกแบบ UI จากลูกค้า มันทำให้ตัว UI (User Interface) รก ใช้งานยาก มองแล้วจะไปโฟกัสจุดไหนดี

วิธีการแก้คือ เราต้องหาว่าหน้านี้ จริง ๆ แล้วผู้ใช้งานต้องการทำอะไรมากที่สุด

ตัวอย่าง เว็บไซต์ Google เวลาเราเปิดเข้าไปเราจะเจอแค่ช่องค้นหา ไม่ได้มีข้อมูลอื่น ๆ เยอะแยะ เน้นแค่สิ่งสำคัญ

9.Help Users Recognize, Diagnose, and Recover from Errors : เมื่อระบบผิดพลาดควรแจ้ง และบอกวิธีการแก้ไข

อันนี้เป็นส่วนที่สำคัญเช่นกัน เวลานักออกแบบ (Designer) และนักพัฒนาโปรแกรม (Programmer) สร้างโปรเจ็ค ๆ หนึ่ง

มักจะคิดเฉพาะ Happy Case โดยลืมว่า ถ้าหากผู้ใช้งานทำงานผิดพลาด หรือระบบผิดพลาดจะแก้ไขปัญหาอย่างไร ? จะดึงคนให้ยังอยู่ในระบบของเราอย่างไร ?

ตัวอย่าง ที่ดีที่สุดคือ Google Chrome ผมเชื่อว่าหลาย ๆ คน คงจะเคยเล่น และเคยเห็นกันมาแล้วบ้างกับหน้าจอนี้

10.Help and Documentation : มีคู่มือการใช้งานที่ครบถ้วน และหาง่ายเมื่อต้องการ

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


ทั้งนี้แต่ละข้อที่กล่าวมาจาก “10 Usability Heuristics for User Interface Design” คงจะช่วยทำให้การออกแบบ UI (User Interface) ของแต่ละคนมีการใช้งานที่เหมาะสม ง่าย และสวยงามมากขึ้น

สุดท้าย UPSKILL UX หวังว่า ทุกคนจะได้รับความรู้ ประโยชน์ และสามารถนำไปใช้งานในอาชีพของแต่ละคนได้ ขอบคุณครับ :D

Facebook Fanpage : www.facebook.com/upskillux
Youtube : http://bit.ly/2W9HJTD

Krit Chainoi

Written by

Hi! I’m UX/UI Designer in ChiangMai, Thailand.

UPSKILL UX

“Change the future with UX Skill”

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade