User Interface Design การออกแบบส่วนต่อประสาน

User Interface Design การออกแบบส่วนต่อประสาน

 

User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งมีกระบวนการที่เริ่มจากการรวบรวมข้อมูลที่เกี่ยวข้องตลอดจนภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์วิทยา นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อมาร่วมกันพัฒนากระบวนการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ

โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย มีการฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบส่วนต่อประสานในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย เมื่อได้ผลงานออกมาดีก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้ ดังที่ Jacob nielsen ผู้เชี่ยวชาญในการออกแบบ Web Usability ได้กล่าวว่า “Bad usability equal no customers.”  ไม่มีใครอยากใช้งานระบบซอฟแวร์ที่ใช้งานยาก เพราะเมื่อใช้งานยาก ก็จะไม่มีคนอยากจะใช้ 

 

Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง

 

• ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
• บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล   มนุษย์เราย่อมมีความแตกต่างกัน
• ความแตกต่างของสติปัญญาและความสามารถในการรับรู้
• ความหลากหลายทางเชื้อชาติและวัฒนธรรม
• ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
• อายุของผู้ใช้งาน
• การออกแบบสำหรับเด็ก เด็กต้องการการออกแบบที่แตกต่างจากผู้ใหญ่ ต้องมีการเร้าความสนใจสูง
• การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์ ที่มีอยู่เพื่อไม่ให้เกิดปัญหาความเข้ากันไม่ได้ของระบบ

ข้อคำนึงดังกล่าวจะเห็นได้ว่า การออกแบบส่วนต่อประสานควรที่จะคำนึงถึงแทบทุกเรื่องไม่ว่าจะเป็นเพศ อายุ เชื้อชาติ ศาสนา ก็นำมาเป็นส่วนประกอบในการพิจารณาได้ทั้งสิ้นเช่น ในบางศาสนามีข้อต้องห้ามสำหรับการแสดงภาพสัตว์ สิ่งของบางชนิด, ผู้ใช้งานที่เป็นเด็กจะนิยมภาพที่มีสีสันฉูดฉาดมากกว่าผู้ใหญ่   สภาพแวดล้อมต่าง ๆ ในการใช้งานก็เป็นส่วนหนึ่งเช่น เมื่อเราจะออกแบบตู้โฆษณากลางแจ้งมีแสงมาก แต่เราออกแบบให้มีสีที่มีการตัดกัน(Contrast) น้อย จะทำให้ผู้ใช้งานมองเห็นข้อความที่เราสื่อไม่ชัดเจน แม้กระทั่งความแตกต่างเฉพาะบุคคลเช่นบางคนชอบอ่านมากกว่าฟัง บางคนชอบภาพเคลื่อนไหว มากกว่าภาพนิ่ง สิ่งเหล่านี้ล้วนเป็นตัวแปรในการออกแบบส่วนต่อประสานทั้งสิ้น

Principle หลักการในการออกแบบส่วนต่อประสาน (Ben, 2005)

 

• ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก
• แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง
• เลือกแบบการมีปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น
  • Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้ (เม้าส์, พ้อยเตอร์)
  • Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก
  • Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก
  • Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง
  • Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้
• ใช้กฎ 8 ข้อสำหรับการออกแบบหน้าจอ
  • Strive for consistency ทำให้เกิดความสม่ำเสมอ ไม่ว่าจะเป็นเมนู ไอคอน สี รูปแบบ ตัวอักษรต่าง ๆ ควรจะมีความสม่ำเสมอ เป็นรูปแบบเดียวกัน ไม่ว่าจะเป็นสัญลักษณ์ สี ขนาดที่ใช้ควรจะเป็นชุดเดียวกัน
  • Cater to universal usability ให้ความพอใจกับทุกคน กับทุกกลุ่มผู้ใช้ เราอาจต้องหาข้อมูลผู้ใช้งานมาให้ครอบคลุมทั้งหมด แล้วเลือกการออกแบบที่ผู้ใช้งานส่วนใหญ่พอใจ
  • Offer information feedback ให้ข้อมูลป้อนกลับเมื่อมีการปฏิสัมพันธ์ ข้อมูลป้อนกลับจะเป็นตัวเร้าที่ดีสำหรับผู้ใช้งาน ให้มีความรู้สึกว่ากำลังได้ควบคุมและโต้ตอบกับระบบอยู่
  • Design dialog yield closure ออกแบบให้มีจุดเริ่มต้น ระหว่างกลาง และจุดสุดท้าย
  • Prevent error มีการป้องกันความผิดพลาดจากผู้ใช้งาน เช่น เมื่อมีการคลิกเม้าส์ผิดที่ หรือป้อนข้อมูลผิด ระบบจะมีข้อความเตือนว่าผู้ใช้งานป้อนข้อมูลผิดพลาด จะช่วยลดความผิดพลาดของข้อมูลได้มาก 
  • Permit easy reversal of actions สามารถย้อนกลับได้ง่ายเพื่อแก้ไขหากเกิดข้อผิดพลาด
  • Support internal locus of control ระบบมีการจัดการการควบคุมภายใน ต้องออกแบบให้เกิดการตอบสนองของหน้าจอกับสิ่งที่ผู้ใช้ได้กระทำลงไปให้มีความสัมพันธ์กัน
  • Reduce short-term memory load ลดความยาวของเวลาที่นำเสนอเนื้อหาเพื่อง่ายในการจดจำในความจำระยะสั้น

 

Ten Usability Heuristics ( Jakob Nielsen, 2000)

 

นอกจากนี้ปรมาจารย์ทางด้านการออกแบบส่วนต่อประสาน Jakop Nielson ได้สรุปสาระสำคัญของการออกแบบให้ใช้งานง่ายไว้ 10 ข้อ ดังต่อไปนี้

Visibility of system status

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

Match between system and the real world

ระบบต้องสามารถพูดภาษาเดียวกันกับผู้ใช้โดยมีตรรกะการใช้งานที่เป็นธรรมชาติ ไม่ใช้ภาษาที่แปลกไปจากปรกติ

User control and freedom

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

Consistency and standards

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

Error prevention

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

Recognition rather than recall

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

Flexibility and efficiency of use

มีความยืดหยุ่นสำหรับผู้ใช้งานหลากหลายกลุ่ม และมีประสิทธิผลในการทำงาน

Aesthetic and minimalist design

การนำเสนอเนื้อหาต้องไม่รวมเรื่องที่ไม่เกี่ยวข้องหรือใช้อย่างน้อยๆ  เพื่อจะได้เน้นเนื้อหาที่เราต้องการสื่อสารอย่างเต็มที่ 

Help users recognize, diagnose, and recover from errors

ข้อความแสดงความผิดพลาดต้องปรากฏในแบบตัวอักษรธรรมดาไม่ใช่โค๊ดโปรแกรมที่เข้าใจยาก ระบุปัญหาและบอกวิธีแก้ไข ให้ผู้ใช้งานสามารถแก้ไขได้เอง

Help and documentation

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

 

แหล่งอ้างอิง

 

Shneiderman Ben, Plaisant Catherine. Design the user interface : Strategic for effective human-computer interaction. Pearson Education, 2005.

 

Nielsen Jacob. Designing Web Usability. Indianapolis: Newriders Publishing, 2000.

 

Talin. A Summary of Principles for User-Interface Design.(http://www.sylvantech.com/ ~talin/index.shtml)

 

Online. User Interface Design & Usability Testing. (http://www.usernomics.com/user-interface-design.html)

 

Wichit thepprasit  Revise 27 July 2009.

[มะปรางเปรี้ยว]

ขอบคุณ คุณวิชิต มากคะ

เนื้อหาในบันทึก User Interface Design การออกแบบส่วนต่อประสาน ของคุณวิชิตอ่านและทำความเข้าใจได้ง่ายคะ

หากคุณวิชิตมีประสบการณ์เกี่ยวกับการออกแบบ User Interface ดิฉันขอรบกวนให้คุณวิชิต เล่าประสบการณ์เกี่ยวกับด้านนี้บ้างได้ไหมคะ

[วิชิต]

ขอบคุณที่ให้ข้อคิดเห็นครับ บทความนี้เป็นบทความที่ทำส่งอาจารย์ในวิชา CAI ครับ ยังมีข้อผิดพลาดอีกเยอาะเลย ตอนนี้ก็กำลังหาบทความดี ๆ นำมา ลปรร. กันอีกครับ รู้สึกดีที่มีคนสนใจในด้านนี้ครับ

[อาร์ท]

อยากให้มีบทความ เกี่ยวกับ User Interface Design มากกว่านี้นะคับ รบกวน คุณวิชิต แนะนำให้ศึกษาจากที่ไหนได้บ้างนะคับ

 ขอบคุณมากคับสำหรับความรู้ดีๆ

[เอ]

ขอบคุณอ. มากค่ะ สำหรับความรู้ดีๆ มีข้อสงสัยว่า ขอบเขตของ Graphic user interface มีแค่ไหน ซึ่ง user interface design ก็เป็นเพียงส่วนหนึ่งใช่ไหมค่ะ แล้วอยากให้อ.ช่วยอธิบาย คำว่า Usability กับคำว่า aesthetics ให้ได้ไหมค่ะ

[nok]

ช่วยอธิบายทีได้ป่ะคะ ว่าความสัมพันธ์ระหว่าง User interface design กับ Graphic User interface (GUI)I)

[dr-ammy]

แอมมี่เองก็กำลังทำงานในตำแหน่งที่ปรึกษาด้านนี้อยู่ค่ะ

มีคนมาเขียนบทความดีดี ก็ดีค่ะ เวลามีคนถามจะได้ให้มาอ่านได้เลย

ปกติเวลาทำงาน คำศัพท์ภาษาอังกฤษต่างๆ ก็มักจะทับศัพท์กันไปเลย ไม่ค่อยมาแปลเป็นไทยนะคะ คุณวิชิตคงต้องลำบากแล้วสิในการบัญญัติศัพท์เทคนิคพวกนี้ให้เป็นภาษาไทย ^^

เป็นกำลังใจให้ค่ะ

[อ.วิชิต มรช.]

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

[jajaue]

ดีใจจังเลย ดิฉันกำลังศึกษาทางด้านนี้อยู่ด้วย

ข้อมูลนี้ ช่วยดิฉันได้มากเลยคะ

ขอบคุณคะ...