ออกแบบ UI (User Interface)ให้ใช้งานง่าย ด้วย 10 Usability Heuristics | UPSKILL UX
สวัสดีชาว UPSKILL UX ทุกท่าน วันนี้กลับมาอีกแล้วกับบทความช่วง #UPSKILLUXLearn วันนี้เราจะมาคุยกับเรื่องของ UI (User Interface) กันบ้างนะครับ
เชื่อว่าหลายคนเวลาที่ได้รับโจทย์ให้ออกแบบ UI (User Interface) อะไรสักอย่าง ? สิ่งที่มักจะคำนึงเรื่องแรก ๆ คือ ความสวยงาม ที่ตอบโจทย์ทั้งลูกค้า อีกทั้งยังเหมาะสมต่อการใช้งานที่ต้องสะดวก รวดเร็ว ง่าย
จึงมีอาจารย์ Doctor ต่างประเทศท่านหนึ่งชื่อ “Jakob Nielsan, Ph.D” ได้คิดเรื่องเกี่ยวกับว่า ถ้าเราจะต้องออกแบบ UI (User Interface) ให้สามารถใช้งานได้ง่าย ๆ สะดวก เราจะต้องคำนึ่ง ถึงเรื่องอะไรบ้าง ?
เอาละ..! ไปเช็คลิสกัน
10 Usability Heuristics for User Interface Design
- 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
