Newsflash:
  • การจัดการความรู้เป็นหนึ่... Read More
  • บทความนี้มีการเปิดเผยเรื่... Read More
  • Project : โครงการจัดทำ Web-based Learning kijja.com... Read More
  • Project : โครงการจัดทำ Web-based Learning กรม... Read More
  • Project : โครงการจัดทำ Web-based Learning คณะ... Read More
     
User Interface Design การออกแบบส่วนต่อประสาน พิมพ์ อีเมล
เขียนโดย วิชิต เทพประสิทธิ์   
วันอาทิตย์ที่ 07 มิถุนายน 2009 เวลา 09:54 น.

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 ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง

 

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

 

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)

 

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)

 

Comments

Name *
Email (For verification & Replies)
Code   
ChronoComments by Joomla Professional Solutions
Submit Comment
 

เว็บไซต์เิริ่มเผยแพร่ ณ วันที่ 7 มิถุนายน 2552

ลิขสิทธิ์ © 2552 IDEAasset ไอเดียแอสเซต แหล่งเรียนรู้ เทคโนโลยีและสื่อสารการศึกษาไทย.

ขอสงวนไว้ซึ่งสิทธิในข้อเขียน บทความทั้งหมด ห้ามดัดแปลง ทำซ้ำหรือนำไปจำหน่ายในเชิงพาณิชย์/ให้นำไปใช้ในการศึกษาและทางวิชาการ (โปรดอ้างอิง).

พัฒนาโดย Joomla! เป็นซอฟท์แวร์เสรีภายใต้ลิขสิทธิ์ GNU/GPL License.