การออกแบบอินเตอร์เฟส
การออกแบบ UI ต้องใช้บัญชีความต้องการประสบการณ์ และ ความสามารถของผู้ใช้ระบบ นักออกแบบควรทราบข้อจำกัดทางกายภาพ และ จิตใจของผู้คน (เช่น Limited short-term memory) และ ควรตระหนักว่า คนจะทำผิดพลาดในเรื่องใดบ้าง หลักการออกแบบ UI ข้างล่างนี้จะรองรับการออกแบบอินเตอร์เฟซหลักๆ
- User familiarity ความคุ้นเคยของผู้ใช้ เช่นระบบสำนักงาน ควรคิดถึง เอกสาร จดหมาย แล้วนำมาแทนที่ ไฟล์ ต่างๆ
- Consistency ความเหมาะสมและความมั่นคง เช่น คำสั่งและเมนูควรมีรูปแบบเดียวกันวรรคตอน คำสั่งจะคล้าย ฯลฯ
- Minimal surprise แปลกใจน้อยที่สุด ถ้าคำสั่งเป็นคำสั่งที่คุ้นเคยแล้ว ผู้ใช้จะสามรถคาดการ การทำงานของคำสั่งได้
- Recoverability ความยืดยุ่น ผู้ใช้อาจทำงานพลาด ควรจะมีการกู้คืนข้อมูลได้ และรวมไปถึงการ ลบ การสร้าง การย้าย และอื่นๆ
- User guidance แนะนำผู้ใช้ จำเป็นต้องมี การช่วยเหลือ หรือ แนะนำการใช้งานระบบ หรือ Help
- User diversity ความหลากหลายของผู้ใช้ ควรคำนึงถึง สถานที่ ความเป็นอยู่ ลักษณะ ของแต่ละพื้นที่ ที่เกี่ยวข้องกับระบบ รูปแบบของการโต้ตอบระหว่างผู้ใช้กับระบบ ในการออกแบบ User Interface จะพิจารณาประสิทธิภาพในการโต้ตอบระหว่างผู้ใช้กับระบบเป็นหลัก ซึ่งรูปแบบของการโต้ตอบมีหลายรูปแบบ ดังนี้ ดังนั้นการออกแบบอินเตอร์เฟสต้องคำนึงถึงความสะดวก เข้าใจง่าย และรู้เรื่องของสิ่งที่ต้องการจะสื่อไปยังผู้ใช้งาน และไม่มีข้อจำกัดด้านความพิการทางร่างกายเช่นความพิการในด้านการมองเห็นหรือด้านการได้ยิน การออกแบบอินเตอร์เฟส จึงมีเครื่องมือช่วยเหลือการเข้าถึงสู่คอมพิวเตอร์ ซึ่งจะมีส่วนช่วยผู้ที่มีความพิการต่างๆ ให้เข้าถึงเว็บไซต์ได้ ตัวอย่างเช่น 1. ซอฟต์แวร์จำแนกเสียง (Speech Recognition) จะมีส่วนช่วยให้ผู้ใช้ที่มีความพิการในด้านการใช้งานเมาส์หรือคีย์บอร์ด อ้างอิง
-การโต้ตอบด้วยการพิมพ์คำสั่ง (Command Line Interaction)
-การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction)
-การโต้ตอบด้วยแบบฟอร์ม ( Form Interaction)
-การโต้ตอบผ่านวัตถุ (Object-Based Interaction)
-การโต้ตอบด้วยภาษามนุษย์(Natural Language Interaction)
2. ซอฟต์แวร์ขยายภาพ (Screen Magnification) จะมีส่วนช่วยให้ผู้ที่มีความบกพร่องในระยะการมองเห็น
3. ซอฟต์แวร์ในการอ่านเนื้อหาบนจอ (Screen Reader) จะมีส่วนช่วยอย่างสูงสำหรับผู้ที่มีความพิการทางด้านการมองเห็น โดยจะทำการเก็บการกระทำต่างๆ ที่เกิดขึ้นบนหน้าจอแสดงออกด้วยทางใดทางหนึ่งให้แก่ผู้ใช้ได้รับรู้
4. ซอฟต์แวร์ช่วยแปล (Translation Software) จะช่วยในการเข้าถึงแก่บุคคลใดๆ ที่มีปัญหาด้านการรับรู้ทางภาษา
ซึ่งซอฟแวร์เหล่านี้เป็นตัวช่วยในการอินเตอร์เฟสกับผู้ที่มีข้อจำกัดด้านความพิการทางร่างกายด้านต่างๆ
1.www.spu.ac.th/~surasak.mu/images/.../CSE322_Summary08_UIDesign.doc
2.http://th.wikipedia.org/wiki/เว็บแอ็กเซสซิบิลีตี
|
| หลักการออกแบบ (Design): ออกแบบ User Interface ที่ดีอย่างไร เริ่มจากความสามารถของมนุษย์ (Human Capabilities)(รวมทั้ง information processor model, perception, motor skills, สี, ความสนใจ และ ข้อผิดพลาด) และใช้ความสามารถของมนุษย์นี้เป็นตัวขับเคลื่อนเทคนิคการออกแบบ: การวิเคราะห์งาน,การออกแบบอิงผู้ใช้งาน,การออกแบบซ้ำๆ, หลักแนะนำของความสามารถในการใช้งาน, แนวทางการโต้ตอบ และหลักการออกแบบ Graphic |
แนวความคิดเกี่ยวกับปัจจัยของมนุษย์และการออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์และคอมพิวเตอร์ ระบบการให้ความช่วยเหลือเมื่อมีปัญหา รูปแบบการปฏิสัมพันธ์และหลักการออกแบบที่มองเห็นได้แบบจำลองการอินเตอร์เฟสสำหรับผู้ใช้และเครื่องมือที่นำมาพัฒนาผลกระทบของเทคโนโลยีที่มีต่อมนุษย์ วางแผนในการเลือกใช้เทคโนโลยี การนำมาปฏิบัติ และการใช้เทคโนโลยีเพื่อให้ผลกระทบปรากฏออกมาในเชิงบวก
ในปัจจุบันการออกแบบอินเตอร์เฟสในแอปพลิเคชั่นมีความสำคัญและมีการพัฒนามากขึ้น แตกต่างจากในอดีตที่มีข้อจำกัดในการแสดงผลบนหน้าจอทำให้อินเตอร์เฟสไม่ค่อยมีบทบาทต่อการใช้งานมากนัก แต่เทคโนโลยีต่างๆ ในปัจจุบันทำให้สามารถสร้างอินเตอร์เฟสที่มีรูปลักษณ์สวยงามและมีลูกเล่นได้หลากหลาย เพื่อรองรับแอปพลิเคชั่นที่นับวันจะมีความซับซ้อนมากขึ้น จึงทำให้ต้องมีการพัฒนารูปแบบและการออกแบบอินเตอร์เฟสเพื่อให้ทำงานสอดคล้องกับแอปพลิเคชั่น และส่งผลให้อินเตอร์เฟสของแอปพลิเคชั่นต่างๆ มีรูปลักษณ์ที่สวยงามและน่าสนใจ แต่การออกแบบอินเตอร์เฟสที่ดีไม่ได้หมายถึงการออกแบบทางด้านรูปลักษณ์ของแอปพลิเคชั่นเพียงอย่างเดียวแต่ยังต้องคำนึงถึงการอำนวยความสะดวกในการใช้งานของผู้ใช้ด้วย ดังนั้นนักออกแบบจำเป็นต้องเข้าใจถึงการออกแบบอินเตอร์เฟสในส่วนอื่นๆ ที่นอกเหนือจากรูปลักษณ์ของแอปพลิเคชั่นด้วย รวมถึงศึกษาการนำเสนอข้อมูลในรูปแบบต่างๆ อย่างถี่ถ้วนและจะได้นำมาประยุกต์ใช้งานได้อย่างเหมาะสม เพื่อให้แอปพลิเคชั่นสามารถตอบสนองความต้องการหรือพฤติกรรมของผู้ใช้ผ่านอินเตอร์เฟสได้อย่างถูกต้องและมีประสิทธิภาพ
การออกแบบ UI (User Interface) ผู้ใช้ที่เข้ามาใช้งาน ก็หวังที่จะได้พบ และได้ใช้อะไรที่ใช้งานได้ง่าย ไม่ซับซ้อน สามารถที่จะทำความเข้าใจได้โดยไม่ต้องใช้เวลานาน และที่สำคัญผู้ใช้ก็ไม่ต้องการพบข้อผิดพลาดต่างๆของโปรแกรมอีกด้วย
เมื่อโปรแกรมมีความผิดพลายย่อมสร้างความรู้สึกที่ไม่ดีระหว่างผู้ใช้กับโปรแกรมนั้นๆ เมื่อเทียบกันระหว่างการแก้ไขข้อผิดพลาดของโปรแกรม กับการที่จะทำให้ผู้ที่เข้ามาใช้งานรู้สึกดีกับตัวโปรแกรมนั้น การแก้ไขข้อผิดพลาดดูจะเป็นเรื่องที่ง่ายมากเลยทีเดียว
ในการออกแบบ UI ให้สามารถใช้งานได้ง่ายนั้นมีแนวทางในการทำหลายแนวทาง โดยพอจะสรุปได้ดังนี้
ในเรื่องของตัวอักษร และการวางจุดสนใจนั้น โดยธรรมชาติ เราจะอ่านหนังสือ จากทางด้านซ้าย ไปด้านขวา และจากด้านบน ลงมาด้านล่าง ตามลำดับ เพราะฉะนั้นการออกแบบ UI ในเรื่องของการวางตัวอักษรเพื่อให้ผู้ใช้งานสามารถอ่านได้สะดวก จึงควรจัดวางอักษรในรูปแบบดังกล่าว
เมื่อผู้ใช้งานต้องการที่จะค้นหาข้อมูลอะไรบางอย่าง ผู้ใช้มักจะกวาดสายตาอยู่บริเวณส่วนตรงกลางของหน้าจอเป็นส่วนแรก และเลื่อนไปหาต่อทางด้านซ้าย เรื่อยมาจนถึงด้านขาว แต่สำหรับส่วนที่อยู่บนสุด และล่างสุดของหน้าจอนั้นผู้ใช้งานมักจะไม่สนใจ ในกรณีที่หน้าจอมี Scroll ที่ใช้สำหรับเลื่อนดูข้อมูลนั้น ถ้าผู้ใช้ไม่พบข้อมูลที่ต้องการในหน้านั้น ผู้ใช้ส่วนใหญ่ก็มักจะไม่ยอมเสียเวลาในการเลื่อนลงไปดูข้อมูลทางด้านล่างอีก เพราะฉะนั้น ควรที่จะใส่ข้อมูลที่มีความสำคัญไว้ในส่วนด้านบนของหน้าจะ เพื่อให้ผู้ใช้งานสามารถค้นหาพบได้ง่าย
โดยสรุปแล้ว หลักการออกแบบ UI นั้น ควรที่จะออกแบบเพื่อให้ผู้ใช้งานสามารถที่จะใช้งานได้โดยง่าย และสะดวกมากที่สุด เมื่อผู้ใช้งานเข้ามาใช้งานที่หน้าจอ ไม่จำเป็นที่จะต้องเรียนรู้วิธีการใช้งานอะไรมาก ก็สามารถที่จะเข้าใจ และใช้งานได้ ที่สำคัญควรจะไม่ให้มีข้อผิดพลาดใดๆเกิดขึ้นด้วย เพื่อให้ผู้ใช้งานรู้สึกดีกับ UI ที่ใช้งานอยู่
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้
1.มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2.การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3.เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4.ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5.ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง
อ้างอิง:
1.http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm
2.http://www.arip.co.th/blog.php?blogger=wanda&id=85
3.www.ktpbook.com/product/ProductDetail.asp?Id...1...
4.http://www.moodle.rmutt.ac.th/course/category.php?id=29
5.http://learners.in.th/file/zetha_oil/User%20Interface%20Design.doc
การออกแบบอินเตอร์เฟส
การออกแบบ UI ต้องใช้บัญชีความต้องการประสบการณ์ และ ความสามารถของผู้ใช้ระบบ นักออกแบบควรทราบข้อจำกัดทางกายภาพ และ จิตใจของผู้คน (เช่น Limited short-term memory) และ ควรตระหนักว่า คนจะทำผิดพลาดในเรื่องใดบ้าง หลักการออกแบบ UI ข้างล่างนี้จะรองรับการออกแบบอินเตอร์เฟสหลักๆ
- User familiarity ความคุ้นเคยของผู้ใช้ เช่นระบบสำนักงาน ควรคิดถึง เอกสาร จดหมาย แล้วนำมาแทนที่ ไฟล์ ต่างๆ
- Consistency ความเหมาะสมและความมั่นคง เช่น คำสั่งและเมนูควรมีรูปแบบเดียวกันวรรคตอน คำสั่งจะคล้าย ฯลฯ
- Minimal surprise แปลกใจน้อยที่สุด ถ้าคำสั่งเป็นคำสั่งที่คุ้นเคยแล้ว ผู้ใช้จะสามรถคาดการ การทำงานของคำสั่งได้
- Recoverability ความยืดหยุ่น ผู้ใช้อาจ ทำงานพลาด ควรจะมีการกู้คืนข้อมูลได้ และรวมไปถึงการ ลบ การสร้าง การย้าย และอื่นๆ
- User guidance แนะนำผู้ใช้ จำ เป็นต้องมี การช่วยเหลือ หรือ แนะนำการใช้งานระบบ หรือ Help
- User diversity ความหลากหลายของผู้ใช้ ควรคำนึงถึง สถานที่ ความเป็นอยู่ ลักษณะ ของแต่ละพื้นที่ ที่เกี่ยวข้องกับระบบ
การออกแบบอินเตอร์เฟสต้องคำนึงถึงความสะดวก เข้าใจง่าย และรู้เรื่องของสิ่งที่ต้องการ
จะสื่อไปยังผู้ใช้งาน และไม่มีข้อจำกัดด้านความพิการทาง ร่างกายเช่นความพิการในด้านการ
มองเห็นหรือด้านการได้ยิน การออกแบบอินเตอร์เฟส จึงมีเครื่องมือช่วยเหลือการเข้าถึงสู่คอมพิวเตอร์ ซึ่งจะมีส่วนช่วยผู้ที่มีความพิการต่างๆ ให้เข้าถึงเว็บไซต์ได้ ตัวอย่างเช่น
1. ซอฟต์แวร์จำแนกเสียง (Speech Recognition) จะมีส่วนช่วยให้ผู้ใช้ที่มีความพิการในด้านการใช้งานเมาส์หรือคีย์บอร์ด
2. ซอฟต์แวร์ขยายภาพ (Screen Magnification) จะมีส่วนช่วยให้ผู้ที่มีความบกพร่องในระยะการมองเห็น
3. ซอฟต์แวร์ในการอ่านเนื้อหาบนจอ (Screen Reader) จะมีส่วนช่วยอย่างสูงสำหรับผู้ที่มีความพิการทางด้านการมองเห็น โดยจะทำการเก็บการกระทำต่างๆ ที่เกิดขึ้นบนหน้าจอแสดงออกด้วยทางใดทางหนึ่งให้แก่ผู้ใช้ได้รับรู้
4. ซอฟต์แวร์ช่วยแปล (Translation Software) จะช่วยในการเข้าถึงแก่บุคคลใดๆ ที่มีปัญหาด้านการรับรู้ทางภาษาซึ่งซอฟแวร์เหล่านี้เป็นตัวช่วยในการอินเตอร์เฟสกับผู้ที่มีข้อจำกัด ด้านความพิการทางร่างกายด้านต่างๆ
ที่มา
1. http://www.ktpbook.com/product/ProductDetail.asp?Id=9747015089&typeid=1&types=%หนังสือ
2. http://th.wikipedia.org/wiki/เว็บแอ็กเซสซิบิลีตี
การออกแบบ Interface
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
หลักการทำงาน 2.http://nariopon.thport.com/?p=361
คือ การที่จะโอนย้ายข้อมูลทุกตัวนั้นจะต้องมีแหล่งที่ส่งข้อมูล และแหล่งที่รับข้อมูลสำหรับขบวนการเหล่านั้น จะมีส่วนที่สำคัญกว่า ข้อมูลนั้นเป็น แอดเดรสหรือว่าเป็นดาต้า จะส่งไปยังจุดไหน และจะส่งเมื่อไร การทำงานเหล่านี้โดยทั่วๆไป จะต้องมีสัญญาณ ในการตรวจสอบอุปกรณ์ว่าพร้อมที่จะส่ง/รับข้อมูล หรือยังก่อนเสมอ เนื่องจากจุดที่ส่งและรับ ข้อมูล จะต้องมีสัญญาณตรวจสอบความพร้อมเสมอเพื่อที่จะให้ข้อมูลที่เราใช้งานนั้นๆ เป็นระเบียบ ซึ่งจุดรับส่งคู่หนึ่งๆ อาจจะเป็นระหว่างซีพียูด้วยกัน หรือ ซีพียูกับหน่วยความจำ หรือ ซีพียูกับอุปกรณ์รอบข้าง หรือ ระหว่างอุปกรณ์รอบข้างด้วยกัน หรือ ระหว่างหน่วยความจำกับอุปกรณ์รอบข้าง ก็ได้ สำหรับข้อมูลที่โอนย้ายไปมานั้นจะอยู่ในลักษณะของเลขฐาน ขึ้นอยู่กับของระบบนั้นๆ ถ้าหากเป็นการต่อจากพอร์ตพีซีไม่ว่าจะเป็น Serial หรือ Parallel ในสัญญาณที่ส่งมาจะมีระบบแรงดันไฟฟ้า
อ้างอิง:
1.http://samphan.ob.tc/-View.php?N=1
1521051121101
นายกฤษดา พรหมศร
1.Introduction
การออกแบบระบบปฏิสัมพันธ์ หรือระบบการติดต่อระหว่างผู้ใช้งานระบบและระบบงานทางคอมพิวเตอร์เป็นส่วนที่ต้องอาศัยจินตนาการในเรื่องการดำเนินงานอย่างมากเพราะต้องคิดเผื่อว่า ระบบนั้นได้ดำเนินงานเสร็จสิ้นไปแล้ว และจะมีวิธีการใดที่จะช่วยให้ผู้ใช้งานระบบสามารถทำความเข้าใจกับระบบได้โดยง่าย
ในยุคแรกการใช้งานระบบคอมพิวเตอร์อยู่ในวงจำกัด เฉพาะผู้เชี่ยวชายและมีความรู้เกี่ยวกับระบบเท่านั้น ดังนั้นการออกแบระบบการติดต่อจึงมีพื้นฐานการออกแบบโดยมีสมมุติฐานอยู่ที่ผู้ใช้งานระบบว่ามีความรู้ความเข้าใจเกี่ยวกับการใช้งานดีอยู่ก่อน ต่อมาการใช้งานระบบคอมพิวเตอร์แพร่หลายสู่ผู้ใช้งานทั่วไปเนื่องจากความก้านหน้าในการผลิต การพัฒนาระบบให้มีความหลากหลาย การออกแบบส่วนของการติดต่อกับระบบจึงได้มีการนำความรู้จากหลายสาขามาประยุกต์
การนำความรู้จากหลายสาขามาประยุกต์
•ความรู้ด้านจิตวิทยา
•ด้านการเรียนรู้
•ด้านการออกแบบภาพกราฟิก
•ด้านสถาปัตยกรรมข้อมูล
•ด้านสังคม
•ฯลฯ
การออกแบบส่วนการติดต่อกับผู้ใช้ จัดเป็นส่วนสำคัญในการแข่งขันทางธุรกิจ ถึงขั้นทำการจดทะเบียนทรัพย์สินทางปัญญา มีการร่วมมือกันพัฒนาระบบ และการร่วมทุนทางธุรกิจหลายบริษัท
•รูปแบบการเชื่อมต่อผ่านระบบอินเทอร์เน็ตทำให้เกิดวิธีการใหม่ ๆ ในการดำเนินธุรกิจหลายประเภท การออกแบบระบบการเชื่อมต่อสำคัญ
•การปฏิบัติงานส่วนบุคคล การออกแบบส่วนการติดต่อกับผู้ใช้ที่ดีมีส่วนช่วยให้การปฏิบัติงานเพิ่มประสิทธิภาพเช่น นักบินขับเครื่องบินได้ปลอดภัยขึ้นหากระบบควบคุมการบินได้ถูกออกแบบดี ถ้าการออกแบบระบบงานไม่ดีผู้ใช้งานอาจเกิดความสับสนได้ส่งผลให้ผลงานไม่มีประสิทธิภาพเพียงพอ
•งานด้านการออกแบบส่วนการติดต่อกับผู้ใช้ เริ่มมีการวิจัย และดำเนินงานอย่างแพร่หลาย ประโยชน์จากการออกแบบส่วนของเมนูการใช้งานหรือการติดต่อที่มีประสิทธิภาพได้แก่เพิ่มประสิทธิภาพการใช้ด้านประสบการณ์การเรียนรู้ของผู้ใช้และจดจำได้ง่าย เช่นการใช้ภาพสัญลักษณ์แทนคำสั่ง
ประโยชน์จากการออกแบบส่วนของเมนูการใช้งานหรือการติดต่อที่มีประสิทธิภาพ
- รูปแบบการแสดงผลที่มีประสิทธิภาพย่อมทำให้การนำ
ข้อมูลไปใช้ในระบบสนับสนุนการตัดสินใจมีประสิทธิภาพมากขึ้น
- การออกแบบวิธีการใช้งานเครื่องมือและอุปกรณ์ที่ใช้
งานภายในบ้าน เช่น กล้องถ่ายรูปดิจิตอลเพื่อสร้าง ความสัมพันธ์ที่ดีในครอบครัว
- การใช้งานระบบ www ผ่านทางเว็บไซต์ที่รวบรวมข้อมูลทำให้ผู้ใช้สามารถค้นหาข้อมูลที่ต้องการได้ เช่น www.yahoo.com ที่มีการออกแบบการใช้งานง่าย แยกเป็นหมวดหมู่
- การออกแบบเว็บไซต์พาณิชย์อิเล็กทรอนิกส์ที่มีประสิทธิภาพ สามารถช่วยให้ผู้ใช้งานติดต่อซื้อขายสินค้าได้ง่าย เป็นประโยชน์ต่อองค์กรธุรกิจ เช่น www.amazon.com
การออกแบบส่วนของการติดต่อกับผู้ใช้ที่ประสบความสำเร็จต้องอาศัยความรู้จากหลายสาขาวิชา:-
- การเขียนคำบรรยาย มีงานวิจัยจากวงการศึกษาและ อุตสาหกรรมได้พัฒนาระบบการอธิบายเกี่ยวกับฟังก์ชัน หรือคำสั่งในการทำงาน การออกแบบรูปแบบของการ คาดการณ์เกี่ยวกับการใช้งานระบบ การออกแบบคำแนะนำการใช้งาน ตลอดจนการออกแบบส่วนให้ความช่วยเหลือ
- ข้อมูลต่าง ๆ เกี่ยวกับการออกแบบ เช่นทฤษฎี การเคลื่อนไหว การรับรู้ การจดจำ
- การคำนึงถึงผลกระทบด้านสังคม การประหยัด
ทรัพยากรด้านข้อมูล เวลา การออกแบบควรคำนึงถึงจริยธรรมการใช้งาน ซึ่งจัดเป็น ความสำคัญยิ่งต่อแนวความคิดในการออกแบบระบบ
- ใช้เทคโนโลยีต่าง ๆ เข้ามาประยุกต์เพื่อเพิ่ม ประสิทธิภาพในการออกแบบ เช่น การใช้ระบบเสียง ภาพ 3 มิติ ภาพเคลื่อนไหว ภาพนิ่ง ทั้งเนื้อหาข้อมูล เช่น รูปแบบการนำเสนอวีดีโอข่าวของ www.yahoo.com
- วิธีการสมัยใหม่ โดยแสดงผลลักษณะเสมือนจริง ทั้งแสดงผลระยะไกล ซึ่งสามารถช่วยเพิ่มความพอใจ
การใช้งานแก่ผู้ใช้ เช่น MS-Power Point ผู้ใช้เลือกรูปแบบการนำเสนอตามต้องการได้
2 ความต้องการทางด้านการใช้งานระบบ (Usability Requirements)
•จุดมุ่งหมายของผู้ออกแบบระบบคือ
- การออกแบบระบบที่ใช้งานได้จริง (Usability)
- มีความเป็นสากล (Universality)
- มีอรรถประโยชน์ (Usefulness)
ซึ่งการออกแบบต้องมีการวางแผนเพื่อตอบสนองความต้องการของผู้ใช้มากที่สุด วิเคราะห์ให้ครอบคลุมรวมทั้งการทดสอบก่อนการใช้จริง
•องค์ประกอบสำคัญ ที่ช่วยให้การออกแบบส่วนของการติดต่อกับผู้ใช้ประสบความสำเร็จมี 4
1. ฝ่ายบริหาร (Manager) สำคัญในการคัดเลือกบุคลากรที่ดำเนินการออกแบบ กำหนดระยะเวลา และกรอบแนวทางการทำงานที่เหมาะสม การสร้างเอกสาร คู่มือการปฏิบัติงาน รวมถึงการควบคุมในเรื่องการทดสอบระบบให้มีความถูกต้อง เหมาะสม
2. ผู้ออกแบบระบบ (Designer) มีหน้าที่ออกแบบระบบ
ที่เหมาะสม
3. เครื่องมือช่วยในการออกแบบส่วนของการใช้งาน
(User-Interface Building Tools) ซึ่งช่วยให้ออกแบบ
รวดเร็ว มีประสิทธิภาพมากขึ้น
4. วิธีการประเมินผล (Evaluation) จะช่วยให้ตัดสินใจ
เลือกระบบที่ออกแบบได้ตรงตามเงื่อนไข และความ
ต้องการมากที่สุด
หลักของการออกแบบที่เรียกว่า เป็นมิตรกับผู้ใช้ (User Friendliness) มีความหมายมากกว่าการใช้งานที่ง่าย และการตอบสนองต่อทุกความต้องการของผู้ใช้ ต้องเข้าใจลักษณะการทำงานที่หลากหลายของผู้ใช้งานระบบ และอำนวยความสะดวกการใช้งานด้านเวลา และงบประมาณ
ระบบที่มีประสิทธิภาพต้องให้ความรู้สึกดีต่อการใช้งาน ให้ผู้ใช้รู้สึกว่ามีพัฒนาการสูง มีความสามารถควบคุมระบบ เข้าใจเกี่ยวกับการใช้งานระบบ ไม่สับสนในรูปแบบการใช้งานจากการเลือกคำสั่งในการทำงานต่าง ๆ
การออกแบบระบบการโต้ตอบกับผู้ใช้ที่ประสบความสำเร็จ ต้องทำให้ผู้ใช้เกิดความรู้สึกว่าไม่ได้ใช้งานระบบการเชื่อมต่อนั้น แต่สามารถเข้าถึงข้อมูลหรือคำสั่งในการทำงานได้เลย เช่น ในการใช้งานระบบการเปิดข้อมูลจากเว็บไซต์ของ IE ผู้ใช้ส่วนใหญ่ไม่ได้ตระหนักถึงการใช้งานของ IE แต่กลับมุ่งความสนใจไปยังข้อมูลในเว็บไซต์ที่เรียกขึ้นมา คือเกือบไม่ได้สังเกตว่ากำลังใช้งาน IE ซึ่งถือว่าเป็นระบบที่ประสบความสำเร็จในการออกแบบมากระบบหนึ่ง
กระทรวงกลาโหมสหรัฐมีการสร้างมาตรฐานการออกแบบส่วนของการติดต่อกับผู้ใช้ (Human Engineering Design Criteria 1999) โดยมีวัตถุประสงค์ของการออกแบบระบบที่ดีดังนี้
1. ผู้เกี่ยวข้องได้แก่ ผู้ใช้งานระบบ ผู้ควบคุม และผู้บำรุงรักษาระบบต้องสามารถใช้งานระบบได้อย่างมีประสิทธิภาพ
2. ช่วยลดระยะเวลาในการฝึกอบรมเรื่องทักษะการใช้งานระบบ
3. หากระบบมีการออกแบบที่ดีจะช่วยสร้างมาตรฐาน และความน่าเชื่อถือของ อุปกรณ์ และโปรแกรมที่เกี่ยวข้อง
4. สนับสนุนการออกแบบที่เป็นมาตรฐานสำหรับทุกระบบที่เกี่ยวข้องในองค์กร
อย่างไรก็ตาม วัตถุประสงค์ข้างต้นก็ยังมีความขัดแย้งในการนำไปใช้งานอย่างมีประสิทธิภาพ คือต้องให้บรรลุวัตถุประสงค์สูงสุดคือการสร้างความพึงพอใจและความรื่นรมย์ในการทำงานให้แก่ผู้ใช้ระบบ ซึ่งย่อมแตกต่างกันตามสภาพแวดล้อม วัฒนธรรมประเพณีจึงต้องมีการวิเคราะห์ความต้องการ (Requirement Analysis)
การวิเคราะห์ความต้องการ (Requirement Analysis)
ระบบต้องออกแบบตามความต้องการที่แท้จริงของผู้ใช้ (Ascertain the User's Needs) โดยการวิเคราะห์ประเภทของการทำงานดังนี้
- งานประจำวัน (Frequent Tasks) เป็นส่วนที่กำหนดได้ง่ายที่สุด เพราะผู้ใช้จะทราบรายละเอียดการทำงานส่วนนี้ได้ดี เช่น การบันทึกผลผลิต การบันทึกการขายประจำวัน
การวิเคราะห์ความต้องการ (Requirement Analysis) (ต่อ)
- งานที่ทำเป็นบางโอกาส (Occasional Tasks) เช่น ตามสถานการณ์หรือตามความต้องการอื่น ๆ เช่น การออกรายงานสรุปยอดขาย การทำรายงานการตรวจสอบสถานะของสินค้าที่ถึงจุดซื้อซ้ำ
- งานที่ต้องทำในกรณียกเว้นการปฏิบัติงาน (Exceptional Tasks) เช่น ในกรณีของเหตุการณ์ฉุกเฉิน การนำข้อมูลสำรองมาใช้ในการปฏิบัติงาน
- งานซ่อมบำรุงระบบ (Repair Tasks) เช่นการแก้ไขข้อผิดพลาดในการทำงานของโปรแกรม หรือการเพิ่มประสิทธิภาพในการปฏิบัติงาน
3 มาตรการในการตรวจวัดความสามารถในการใช้งานของระบบ (Usability Measures)
•ก่อนการออกแบบระบบควรตรวจสอบกลุ่มผู้ใช้งานระบบว่ามีใครบ้าง ลักษณะงานที่ผู้ใช้ต้องการ ควรออกแบบระบบให้ตอบสนองความต้องการผู้ใช้ เช่นการออกแบบระบบการค้นหาข้อมูลของ www.google.com เป็นเมนูการค้นหาข้อมูลอย่างง่าย ผู้ใช้ไม่ชำนาญก็สามารถใช้งานได้ไม่อยาก หรือต้องการค้นหาที่มีเงื่อนไขซับซ้อนก็ค้นได้ตามต้องการ
•ส่วนประกอบสำคัญ 5 ประการในการออกแบบโดยคำนึงถึงผู้ใช้เป็นสำคัญได้แก่
1. ระยะเวลาในการเรียนรู้ (Time to Learn) พิจารณาจากระยะเวลาที่ผู้ใช้งานใช้ระบบ ความต้องการต่อการฝึกอบรมการใช้งานหรือเรียนรู้การใช้งานระบบ
2. ความรวดเร็วในการประมวลผล (Speed of Performance) โดยเปรียบเทียบความเร็วมาตรฐานของการประมวลผลข้อมูล
3. อัตราความผิดพลาดจากการใช้งาน (Rate of Errors) โดยคำนวณจากจำนวนครั้งที่เกิดความผิดพลาดจากการทดสอบระบบก่อนใช้งาน
4. การเรียนรู้ (Retention Over Time) ผู้ใช้จดจำการใช้ง่ายหากใช้งานบ่อยครั้ง ออกแบบเข้าใจง่าย
5. การวัดความพึงพอใจของผู้ใช้ (Subjective Satisfaction) วัดความพอใจเช่น ให้ผู้ใช้แสดงความเห็นเกี่ยวกับระบบงานได้อิสระ
ในการออกแบบควรมีการสร้างหลายรูปแบบ โดยผู้ออกแบบและผู้ใช้งานระบบร่วมกันพิจารณาเพื่อตอบสนองความต้องการผู้ใช้มากที่สุด
4 แรงจูงใจด้านการใช้งานระบบ(Usability Motivations)
•ความล้มเหลวในการออกแบบระบบ มีให้เห็นมาก ดังนั้นการออกแบบระบบที่ดีต้องคำนึงถึงความมุ่งหมายของการนำระบบไปใช้งาน โดยแยกประเภทของระบบตามวัตถุประสงค์เฉพาะของการใช้งานดังนี้
1. ระบบที่มีความสำคัญเกี่ยวข้องกับชีวิต และทรัพย์สินของประชาชน (Life Critical System) เช่น ระบบควบคุมการจราจรทางอากาศ (Air Traffic Control) ระบบควบคุมปฏิกิริยานิวเคลียร์ ระบบแจ้งเตือนภัยจราจร ซึ่งระบบเหล่านี้มีค่าใช้จ่ายสูงในการดำเนินงาน เพราะต้องมีความน่าเชื่อถือ มีประสิทธิภาพ
2. ระบบงานทางด้านธุรกิจและอุตสาหกรรม (Industrial and Commercial Use) เช่น ระบบธนาคารใช้ระบบง่าย รวดเร็ว ปริมาณมาก
3. ระบบงานทั่วไปในสำนักงาน บ้านที่อยู่อาศัย และการพักผ่อน (Office, home and entertainment applications) เช่น e-mail, game จะเรียนรู้ง่าย อัตราการผิดพลาดต่ำ ระบบเชิงเพื่อธุรกิจ ใช้งานเป็นครั้งคราว ราคาถูก
4. ระบบการสำรวจข้อมูล สร้างข้อมูลและระบบในการประสานข้อมูล (Exploratory, creative and cooperative systems) เช่นระบบการเรียกดูข้อมูลผ่านเว็บ (Web Browsing) เป็นลักษณะระบบที่ใช้ร่วมกันหลายคน
5. ระบบที่เกี่ยวข้องกับการใช้งานทางสังคมหรือสำหรับกลุ่มคนจำนวนมาก (Social technical Systems) เป็นระบบที่ซับซ้อนเช่น ระบบรายงานข้อมูลด้านอาชญากรรม จึงควรมีความน่าเชื่อถือสูง
5 การใช้งานที่เป็นสากล (Universal Usability)
•มีการศึกษาข้อมูลเกี่ยวกับมานุษยวิทยา ในเรื่องมานุษยมิติ (Anthropometry) ซึ่งเน้นความแตกต่างของบุคคล จึงควรออกแบบระบบที่สามารถปรับเปลี่ยนได้ ควรออกแบบจากความต่างของบุคคลดังนี้
- สรีระร่างกายเช่น การเอื้อม พลังกาย ความเร็วที่ต้องการ
- ความสว่างของหน้าจอในการแสดงผล
- การรับรู้ของผู้ใช้แต่ละคนเช่น ตาบอดสี
- การสัมผัส - การได้ยิน - การรับรู้
•การจำแนกกระบวนการทางปัญญา (Cognitive Processes) ดังนี้
1. ความจำระยะยาว (Long-term and semantic memory) เป็นการจำที่เก็บได้ไม่จำกัดจำนวนและระยะเวลา
2. ความจำระยะสั้น (Short-term and working memory)เก็บข้อมูลแต่ละครั้งได้ระยะเวลาสั้น หากไม่ทวนซ้ำ ๆ
3. การแก้ปัญหาและการหาเหตุผล (Problem solving and reasoning) ใช้ข้อมูลที่มีเดิมมาใช้
4. การตัดสินใจและการเสี่ยง (Decision making and risk assessment)
5. ความสามารถทางภาษาและการสื่อสาร (Language communication and comprehension)
6. การรับรู้ที่คงอยู่ชั่วขณะ (Sensory Memory)การค้นหาข้อมูล สร้างจินตนาการ
7. ความสามารถในการเรียนรู้และการเพิ่มทักษะ
•การใช้งานระบบทางคอมพิวเตอร์ มีส่วนกับการเรียนรู้มากซึ่งหมายถึงประสบการณ์ ความชำนาญในที่เกี่ยวข้อง
- การออกแบบเกี่ยวกับสถานที่ในการปฏิบัติงาน ย่อมส่งผลต่อการทำงาน ก่อให้เกิดความรื่นรมย์ ซึ่งได้มีการกำหนดหัวข้อ มาตรฐานการออกแบบสถานที่ในการปฏิบัติงาน ที่เรียกว่า วิศวกรรมมนุษยปัจจัยที่เกี่ยวข้องกับการปฏิบัติงานทางระบบคอมพิวเตอร์ โดยมีหัวข้อดังนี้
•มาตรฐานการออกแบบสถานที่ในการปฏิบัติงาน ที่เรียกว่า วิศวกรรมมนุษยปัจจัยที่เกี่ยวข้องกับการปฏิบัติงานทางระบบคอมพิวเตอร์ โดยมีหัวข้อดังนี้
1.พื้นที่ในการปฏิบัติงาน ปรับระดับสูง-ต่ำ
2.พื้นที่ว่างสำหรับวางขาใต้โต๊ะ
3.ความกว้าง ลึก สูง ของพื้นที่
4. การปรับความสูง มุมของเก้าอี้
5. ท่าทางการนั่ง พิงหลัง การทรงตัว
6. มีที่พักแขน พักเท้า วางฝ่ามือ
6 เป้าหมายในการพัฒนาเรื่องการออกแบบระบบ (Goals for Profession)
•ได้มีการตั้งเป้าหมาย 3 ประการเพื่อพัฒนาลักษณะการออกแบบให้มีประสิทธิภาพมากขึ้นได้แก่
1. การทำงานวิจัยในสาขาที่เกี่ยวข้องดังนี้
ลดภาวะความเครียดในการใช้งานระบบฯ
การค้นหา ทำระบบช่วยเหลือ
2. การจัดเตรียมเครื่องมือ และอุปกรณ์ต่าง ๆ ที่สอดคล้องกับการนำระบบไปใช้งาน
3. การทำให้สังคมตระหนักถึงความง่ายในการใช้งานระบบคอมพิวเตอร์ ขจัดความกลัวในการใช้งาน
User Interface Design หลักเบื้องต้นในการออกแบบ User-centered
•เข้าใจถึงการทำงานหลักของธุรกิจ
•นำกราฟิกมาช่วยในการใช้งาน
•ทราบถึงลักษณะของผู้ใช้งานระบบ
•เวลาออกแบบคิดเสมือนว่าเป็นผู้ใช้งาน
•นำ prototype มาช่วย
•ออกแบบส่วนติดต่อกับผู้ใช้ด้วยความเข้าใจ
•แก้ไขอย่างต่อเนื่อง (ติดตามผลการใช้งาน)
•จัดทำเอกสารประกอบในส่วนการออกแบบ interface
1. การออกแบบ 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.?
2. วัตถุประสงค์หลัก การออกแบบ User Interface ดังนี้
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
- สอดคล้อง/รองรับ พฤติกรรมการค้นคว้าของผู้ใช้ เช่น สะดุดตา สะดุดใจ สะดวก สบาย รวดเร็ว
- เชื่อมโยงข้อมูลที่เป็นประโยชน์ไว้ด้วยกันทั้งหมด
3. Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง
4. Principle หลักการในการออกแบบส่วนต่อประสาน
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 and documentation
ระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป
5. หลักการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน
องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง
1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ
4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ
เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัฐสำหรับผู้ใช้ที่มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้
9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง
พื้นฐานในการออกแบบเว็บไซต์ที่ดี
- มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ
- มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ
- ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย
6. ข้อควรพิจารณาในเรื่องการออกแบบหน้าจอ
1. ความน่าสนใจของเนื้อหาควรเป็นประเด็นหลักของการออกแบบ ควรทุ่มเทพื้นที่ บนเว็บไซต์เพื่อเนื้อหา อย่างน้อยครึ่งหนึ่ง หรือเกือบ 80 เปอร์เซ็นต์ มากกว่าเรื่อง navigation ที่ควรจะมีสัดส่วนต่ำกว่า 20 เปอร์เซ็นต์
2. พื้นที่สีขาวทำให้คนใช้เข้าใจการจัดหมวดหมู่เนื้อหา นำสายตาคนใช้ได้ดี และเสียเวลาดาวน์โหลดน้อยกว่าเมื่อเปรียบเทียบกับการใช้เส้นแบ่ง
3. หลักการทั่วไปของการออกแบบ user interface คือ ใช้องค์ประกอบการออกแบบให้น้อยๆ เพื่อให้หน้าเว็บมีความเรียบง่ายและใช้เวลาดาวน์โหลดน้อยลง
4. ควรออกแบบหน้าให้สามารถใช้งานได้กับหน้าจอทุกประเภท เพราะเราไม่รู้ว่าคนใช้ใช้หน้าจอขนาดไหน
5. คนออกแบบต้องกำหนดหน้าในลักษณะที่ช่วยให้คนใช้สามารถใช้ประโยชน์จากหน้านั้นได้สอดคล้องกับสภาวการณ์ที่ต่างกันของผู้ใช้แต่ละคน บางคนจอใหญ่ บางคนจอเล็ก บางคนชอบใช้ตัวอักษรขนาดใหญ่ บางคนขนาดเล็ก หน้าที่ออกแบบจะต้องทำงานได้ดีกับทุกขนาด คือไม่กำหนดขนาดตายตัว แต่กำหนด Layout เป็นเปอร์เซ็นต์ของพื้นที่ที่มีอยู่บนหน้า รวมไปถึงการออกแบบให้สามารถพิมพ์งานจากหน้าเว็บ ออกมาได้ในสัดส่วนที่พอดี มีเนื้อหาครบถ้วน
6. การออกแบบอย่าไปมุ่งเน้นเรื่องการอัพเกรดหรือใช้เทคโนโลยีใหม่ล่าสุดอยู่เสมอ เพราะปัจจุบันนักออกแบบตระหนักแล้วเว็บไซต์ของตนควรจะสามารถทำงานกับ เทคโนโลยีตัวเก่าได้ต่อไป ซึ่งเป็นผลมาจากตัวผู้ใช้ทั่วๆไปที่ไม่ใช่นักคอมพิวเตอร์ ยังคงใช้โปรแกรมเบราว์เซอร์ตัวเก่าที่ยังทำงาน และความแตกต่างระหว่างเทคโนโลยีเก่าใหม่ ในปัจจุบันไม่ได้มีมากมาย แถมปัจจุบันคนใช้คอมพิวเตอร์เป็นคนทั่วๆไปมีมากขึ้น ไม่ได้จำกัดอยู่เฉพาะนักเล่นคอมพิวเตอร์ที่แข่งกันว่าเครื่องใครมีเทคโนโลยี ดีกว่ากัน
แหล่งอ้างอิง 1. Shneiderman Ben, Plaisant Catherine. Design the user interface : Strategic for effective human-computer interaction. Pearson Education, 2005.
4.http://www.ideaasset.com/index.php/edtech/2009-05-28-21-57-08/55-user-interface-design-.html
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 ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง
ที่มา :http://learners.in.th/file/zetha_oil/User+Interface+Design.doc
http://learners.in.th/blog/50322020020/280972
การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์
interface
ความหมาย
[n.] พื้นที่ร่วมของสองสิ่ง อินเตอร์เฟส, จุดที่สองสิ่งสัมผัสกัน
interface
ตัวประสาน
ความหมาย
หมายถึง การเชื่อมต่อระหว่าง คอมพิวเตอร์ ที่ถ่ายโอนข้อมูลจากกันและกันได้ แต่มักนำมาใช้ในความหมายของ user interface ที่แปลว่า การติดต่อประสานระหว่างเครื่องคอมพิวเตอร์กับผู้ใช้ เช่น แป้นพิมพ์, จอภาพ ต่างก็เป็นตัวประสานกับผู้ใช้ทั้งสิ้น
ในปัจจุบันการออกแบบอินเตอร์เฟสในแอปพลิเคชั่นมีความสำคัญและมีการพัฒนามากขึ้น แตกต่างจากในอดีตที่มีข้อจำกัดในการแสดงผลบนหน้าจอทำให้อินเตอร์เฟสไม่ค่อยมีบทบาทต่อการใช้งานมากนัก แต่เทคโนโลยีต่างๆ ในปัจจุบันทำให้สามารถสร้างอินเตอร์เฟสที่มีรูปลักษณ์สวยงามและมีลูกเล่นได้หลากหลาย เพื่อรองรับแอปพลิเคชั่นที่นับวันจะมีความซับซ้อนมากขึ้น จึงทำให้ต้องมีการพัฒนารูปแบบและการออกแบบอินเตอร์เฟสเพื่อให้ทำงานสอดคล้องกับแอปพลิเคชั่น และส่งผลให้อินเตอร์เฟสของแอปพลิเคชั่นต่างๆ มีรูปลักษณ์ที่สวยงามและน่าสนใจ แต่การออกแบบอินเตอร์เฟสที่ดีไม่ได้หมายถึงการออกแบบทางด้านรูปลักษณ์ของแอปพลิเคชั่นเพียงอย่างเดียวแต่ยังต้องคำนึงถึงการอำนวยความสะดวกในการใช้งานของผู้ใช้ด้วย ดังนั้นนักออกแบบจำเป็นต้องเข้าใจถึงการออกแบบอินเตอร์เฟสในส่วนอื่นๆ ที่นอกเหนือจากรูปลักษณ์ของแอปพลิเคชั่นด้วย รวมถึงศึกษาการนำเสนอข้อมูลในรูปแบบต่างๆ อย่างถี่ถ้วนและจะได้นำมาประยุกต์ใช้งานได้อย่างเหมาะสม เพื่อให้แอปพลิเคชั่นสามารถตอบสนองความต้องการหรือพฤติกรรมของผู้ใช้ผ่านอินเตอร์เฟสได้อย่างถูกต้องและมีประสิทธิภาพ
User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งเริ่มจากการรวมวิธีการค้นหาข้อมูลและภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์ นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย ฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบที่อยู่ในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย ก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้
Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง
Principle หลักการในการออกแบบส่วนต่อประสาน (Ben, 2005)
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
ระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป
3. http://www.ideaasset.com/index.php/edtech/2009-05-28-21-57-08/55-user-interface-design-.html
การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์
interface
ความหมาย
[n.] พื้นที่ร่วมของสองสิ่ง อินเตอร์เฟส, จุดที่สองสิ่งสัมผัสกัน
interface
ตัวประสาน
ความหมาย
หมายถึง การเชื่อมต่อระหว่าง คอมพิวเตอร์ ที่ถ่ายโอนข้อมูลจากกันและกันได้ แต่มักนำมาใช้ในความหมายของ user interface ที่แปลว่า การติดต่อประสานระหว่างเครื่องคอมพิวเตอร์กับผู้ใช้ เช่น แป้นพิมพ์, จอภาพ ต่างก็เป็นตัวประสานกับผู้ใช้ทั้งสิ้น
ในปัจจุบันการออกแบบอินเตอร์เฟสในแอปพลิเคชั่นมีความสำคัญและมีการพัฒนามากขึ้น แตกต่างจากในอดีตที่มีข้อจำกัดในการแสดงผลบนหน้าจอทำให้อินเตอร์เฟสไม่ค่อยมีบทบาทต่อการใช้งานมากนัก แต่เทคโนโลยีต่างๆ ในปัจจุบันทำให้สามารถสร้างอินเตอร์เฟสที่มีรูปลักษณ์สวยงามและมีลูกเล่นได้หลากหลาย เพื่อรองรับแอปพลิเคชั่นที่นับวันจะมีความซับซ้อนมากขึ้น จึงทำให้ต้องมีการพัฒนารูปแบบและการออกแบบอินเตอร์เฟสเพื่อให้ทำงานสอดคล้องกับแอปพลิเคชั่น และส่งผลให้อินเตอร์เฟสของแอปพลิเคชั่นต่างๆ มีรูปลักษณ์ที่สวยงามและน่าสนใจ แต่การออกแบบอินเตอร์เฟสที่ดีไม่ได้หมายถึงการออกแบบทางด้านรูปลักษณ์ของแอปพลิเคชั่นเพียงอย่างเดียวแต่ยังต้องคำนึงถึงการอำนวยความสะดวกในการใช้งานของผู้ใช้ด้วย ดังนั้นนักออกแบบจำเป็นต้องเข้าใจถึงการออกแบบอินเตอร์เฟสในส่วนอื่นๆ ที่นอกเหนือจากรูปลักษณ์ของแอปพลิเคชั่นด้วย รวมถึงศึกษาการนำเสนอข้อมูลในรูปแบบต่างๆ อย่างถี่ถ้วนและจะได้นำมาประยุกต์ใช้งานได้อย่างเหมาะสม เพื่อให้แอปพลิเคชั่นสามารถตอบสนองความต้องการหรือพฤติกรรมของผู้ใช้ผ่านอินเตอร์เฟสได้อย่างถูกต้องและมีประสิทธิภาพ
User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งเริ่มจากการรวมวิธีการค้นหาข้อมูลและภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์ นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ โดยมีวัตถุประสงค์หลักคือ สามารถใช้งานได้ง่าย ใช้ทักษะส่วนบุคคลน้อย ฝึกอบรมการใช้งานน้อย เพิ่มมาตรฐานการออกแบบที่อยู่ในระบบ (U.S Military Standard for Human Engineering Design Criteria, 1999) นอกจากนี้ การออกแบบส่วนต่อประสานที่ดีจะทำให้งานที่สำเร็จออกมาดีใช้งานได้ง่าย เรียนรู้ได้ง่าย ก็จะสามารถแข่งขันกับซอฟท์แวร์อื่น ๆ ในตลาดได้
Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง
Principle หลักการในการออกแบบส่วนต่อประสาน (Ben, 2005)
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
ระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป
3. http://www.ideaasset.com/index.php/edtech/2009-05-28-21-57-08/55-user-interface-design-.html
เวลาออกแบบเพื่ออะไร เราก็ต้องเข้าใจในสิ่งนั้นๆ ข้อดีข้อด้อยของสิ่งนั้นๆด้วยเช่น เวลาเราออกแบบส้วมแมวเราก็ต้องไม่ลืมว่า แมวนั้น พูดไม่ได้ และส่วนใหญ่ กดชักโครกไม่เป็นเวลาเราออกแบบกระถางให้ดอกบัวเราก็ต้องไม่ลืมว่า ดอกบัวต้องอยู่ในน้ำตลอดเวลา และมีที่พอสมควรให้รากหายใจได้ เจริญเติบโตได้เวลาเราออกแบบสิ่งใดๆให้คน(ซึ่งเป็นส่วนใหญ่ในสิ่งทั้งหมดที่เราออกแบบในโลกนี้)เราก็ต้องเข้าใจคนเหมือนกันสิ่งหนึ่งที่เป็นพื้นฐานในความเข้าใจมนุษย์นอกจากที่เราจะเข้าใจความสามารถ ศักยภาพของมนุษย์แล้วนั้นก็คือ การเข้าใจข้อจำกัดในความสามารถของมนุษย์ในเรื่องต่างๆเช่น ถ้าเป็นเรื่องการออกแบบบันได
เราก็ต้องมีความรู้ความเข้าใจว่า มนุษย์ก้าวในแนวตั้งได้สบายที่สุดอยู่ในระยะเท่าใดถ้าออกแบบโต๊ะทำงานเราก็ต้องมีความรู้ความเข้าใจว่า คนปรกติ(ที่เป็นผู้ใช้ของเรา)จะรู้สึกวางแขนทำงานได้สบายที่สุดในช่วงระยะใดถ้าเป็นโต๊ะคอมพิวเตอร์ จะวางแขนบนแป้นพิมพ์ได้องศาที่ดีที่สุด โต๊ะต้องสูงขนาดไหนถ้าในเรื่องApplication, Softwareก็จะมีข้อจำกัดที่ควรรู้มากมาย ทั้งนี้ ขึ้นอยู่กับกลุ่มผู้ใช้งานด้วยซึ่งจะมีข้อจำกัดและความสามารถเฉพาะแตกต่างกันไปแต่โดยทั่วไป เวลาเราออกแบบต้องไม่ลืมว่า เราออกแบบให้มนุษย์ใช้
1. มนุษย์ คือมนุษย์
คือผู้ที่สามารถสร้างข้อผิดพลาดได้ตลอดเวลา
เป็นสิ่งที่แตกต่างกับคอมพิวเตอร์อย่างเห็นได้ชัด
ระบบคอมพิวเตอร์ ถ้าเขียนโค้ดถูก ปราศจากบั๊ก
ถ้ายังอยู่ใน environment เดิม มันก็ยังทำงานได้โดยปราศจากบั๊กตลอดไปแต่กับคนแล้ว ไม่รู้ว่า วันดีคืนดีวันไหนจะเกิดเฮี้ยน
อาจจะนอนดึก ง่วงนอน สมาธิไม่ดี แม่ตี สอบตก แชทเพลิน
มีร้อยแปดพันเก้าอย่างที่ทำให้มนุษย์ทำอะไรหละหลวม ผิดพลาดได้ตลอดฉะนั้น ถ้าระบบยิ่งมีบั๊ก มีข้อผิดพลาด หรือ workflow หละหลวมให้ผิดง่ายๆก็ยิ่งส่งเสริมให้เกิดความผิดพลาดได้ง่ายๆ
*อย่าสรุปว่า ที่เกิดความผิดพลาดเป็นปัญหาของคนๆนั้นเสมอๆ
เพราะระบบอาจไม่ดีเอง หรือไม่ได้คิดถึง flow ที่จะรองรับความผิดพลาดทั่วไปเอาไว้
ให้แก้ที่ระบบก่อน จะง่ายกว่าแก้ที่คนประมาณสามล้านเท่า
2. ความเร็วของการคิด
สมองคนเราใช้เวลาประมาณ 1 ใน 10 วินาทีในการระลึกจำได้ในสิ่งๆหนึ่งๆบนหน้าจอและราวๆเกือบๆ 1 ใน 4 วินาที ในการเปลี่ยนความสนใจจากวัตถุหนึ่งไปยังวัตถุอื่นในหน้าจอเดียวกัน
และประมาณ 1.25 วินาทีในการตัดสินใจเลือก 1 ใน 2 ตัวเลือกที่ปรากฏขึ้นพร้อมๆกัน(Olson and Olson, 1990)
* ถึงแม้ว่าหน่วยประมวลผลของคนเราจะเป็นหน่วยวินาที
มันก็ไม่ได้แปลว่าเร็วอย่างที่หลายๆคนเข้าใจ
3. ตาไปไวกว่ามือเสมอ
การพิมพ์ 1 ตัวอักษร ใช้เวลาโดยทั่วไป 0.1 – 1.25 วินาที
การคลิกเมาส์หนึ่งครั้ง ใช้เวลาเท่ากับการพิมพ์ 1 ตัวอักษร
ในขณะที่การเลื่อนเมาส์บนหน้าจอใช้เวลาเฉลี่ย 1.5 วินาที
(ทั้งนี้ การเลื่อนเมาส์เพื่อคลิกหรือหยุดในตำแหน่งที่ต้องการ ขึ้นอยู่กับ Fitt’s Lawซึ่งว่าด้วยความสัมพันธ์ระหว่างขนาดของวัตถุและระยะทางที่จะไปยังวัตถุนั้นๆถ้าวัตถุใหญ่และระยะทางสั้น ก็จะใช้เวลาน้อยในขณะที่ถ้าวัตถุเล็กแล้วระยะทางยังมากอีก ก็ใช้เวลามากขึ้นตามลำดับ)การเปลี่ยนมือระหว่างคีย์บอร์ดกับเมาส์ ก็ใช้เวลาอีกประมาณ 0.36 วินาทีเมื่อดูแต่ละ action แล้วอาจจะไม่เยอะแต่คนเราไม่ได้ทำ action เดียวเดี่ยวๆกับหน้าเว็บ 1 หน้า หรือ หน้า Interfaceใดๆ 1 การแสดงผลเราทำทั้งระลึก ตัดสินใจ มือไป มือเลื่อน คลิก เปลี่ยนตำแหน่งมือรวมๆแล้ว เราใช้เวลาไม่น้อยต่อการทำงานเพียง task เดียว
4. Small Number
นักจิตวิทยานามกระเดื่อง George Miller’s ได้ให้กำเนิดทฤษฎี 7 บวกลบ 2 เอาไว้ซึ่งแสดงถึงหน่วย หรือชุดข้อมูล ที่คนปรกติคนหนึ่ง พอจะจำได้พร้อมๆกันด้วยความจำส่วนชั่วคราว (Short-term Memory)ในยุคสมัยการพัฒนาช่วงหนึ่ง จึงได้มีการเข้มงวดเกี่ยวกับกฏนี้อย่างมากหลายๆคนได้ตีความกฏนี้ว่า ในหน้าเว็บไม่ควรจะมีเมนูเกิน 7 เมนูอย่างไรก็ตาม กฏนี้ก็มีข้อยกเว้นไปตามปัจจัยและสถานการณ์ในการใช้งานแต่อย่างน้อย กฏนี้ก็ทำให้เราทราบว่า
คนเราไม่ได้จำอะไรได้มากมายนักหรอก อย่าหวังอะไรอย่างนั้นเวลาทำระบบ
5. จำหน้าได้ แต่ชื่อหนีไปไหนแล้วไม่รู้โดยทั่วไป คนเราจะมีประสิทธิภาพในการ “ระลึก” ได้มากกว่าการ “ขุดความจำ” ขึ้นมาโดยไม่มีตัวช่วยถ้าเราเจอคนๆหนึ่งที่ไม่ได้เจอมาเป็นสิบปี ก็มีความเป็นไปได้สูงว่า เราจำชื่อเขาไม่ได้ถ้าเทียบการที่ให้เอารายชื่อ ตัวเลือกหลอกปนคำตอบจริงมาให้เลือกเรามักจะตอบได้ถูกว่า อ๋อ ไอ้หมอนี่ชื่อนี้นี่เองมากกว่าการที่ให้เวลาเรานั่งระลึกชาติตามลำพัง
วันหลังจะพูดถึงเรื่องระลึก(Recognize) กับการขุดความจำ(Recall)
ในรายละเอียดทีหลังแล้วกัน (ถ้าไม่ลืม)ในการใช้ระบบที่เกี่ยวกับคอมพิวเตอร์ยุคแรกๆจึงเป็นเรื่องที่สาหัสสากรรจ์สำหรับคนความจำปลาทองเพราะต้องจำชุดคำสั่งทั้งหมดในการใช้งานให้ได้ เพื่อการใช้งานระบบอย่างมีประสิทธิภาพตอนนั้นก็ช่างมันเถิด เพราะยุคนั้น ยังเป็นการเริ่มต้นของการใช้คอมพิวเตอร์อยู่แต่มาถึงค.ศ. พ.ศ.นี้แล้ว ใครยังทำระบบอย่างนั้นอยู่ก็มีทีท่าว่าจะขายไม่ออก หมายังไม่มอง(เพราะอ่านไม่ออก) ได้ง่ายๆไม่ใช่ว่าการใช้ชุดคำสั่งไม่ดีเสมอไปแต่เราต้องไม่ลืมด้วยว่า ธรรมชาติในการประมวลผลความจำของคนเราทั้ง Recognize และ Recall นั้น มีข้อดีข้อเสียต่างกันอย่างไร
6. Learning Curve
การเรียนรู้ของมนุษย์ เป็นปรกติที่จะเกิดข้อผิดพลาดในคราวแรกๆด้วยความไม่รู้ หรือไม่เคยชิน
เวลาที่เกิดการเรียนรู้ของใหม่ หรือวิธีใหม่ๆที่ใช้กับของเดิมๆ
Learning Curve จึงออกสตาร์ทอย่างช้าๆ ไปพร้อมๆกับความเอ๋อเป๋อเหลอที่จะเกิดขึ้น
ข้อนี้ก็เป็นอีกข้อที่นักพัฒนามักจะละเลย
เพราะมักจะคิดว่า ของมันดีนะ(แหงล่ะ ก็ทำเอง) ถ้าใครๆได้ใช้แล้วจะติดใจ (เข้าข้างตัวเองสุดๆ)
และลืมไปว่า คนอื่นๆไม่ใช่ตะเองนะ
ทำให้เกิดระบบ หรือ Application ที่ต้องใช้เวลาเรียนรู้อย่างมาก
(หรือใช้เวลาเรียนรู้อย่างมากแล้ว แต่ก็ยังไม่เข้าใจมันอยู่ดี) เต็มตลาดทั่วโลกไปหมด
อ้างอิง:
1.http://iamia.wordpress.com/2008/03/20/hun-limitation/
Interface หมายถึง การต่อเชื่อม การเชื่อมโยง หรือ การติดต่อสื่อสาร ความหมายด้านคอมพิวเตอร์ แบ่งออกเป็นกลุ่มๆ ดังนี้. เช่น
User Interface หมายถึง การติดต่อสื่อสาร กับผู้ใช้ ในรูปแบบที่เราเห็นกันอยู่ทุกวันใกล้ๆ ตัว ก็คือ Windows มี Usser Interface แบบ GUI ( Graphics User Interface ) ความ หมายคือ Windows ใช้การแสดงตอบโต้สื่อสารกับผู้ใช้ โดยใช้รูปภาพเป็นสัญลักษณ์ User จะสั่งงานให้คอมพิวเตอร์ทำงานก็โดยการไป คลิ๊กเลือก รูปไอคอน ที่แสดงหน้าที่ หรือ ตัวแทนของโปรแกรมที่ต้องการ ผลที่ได้ ก็แสดงออกมาในแบบที่เป็นรูปภาพ ให้เราได้เห็นกันบนจอภาพ ส่วนในอดีต เราใช้ MS-DOS ซึ่งมี User Interface เป็นแบบ CUI ( Character User Interface ) ความหมายคือ MS-DOS ใช้การแสดงตอบโต้สื่อสารกับผู้ใช้ โดยใช้รหัสตัวอักษร เป็นสื่อ การสั่งงานคอมพิวเตอร์ให้ทำงาน ก็ทำโดยการ พิมพ์คำสั่งหรือโปรแกรมที่ต้องการ เข้าไปที่ Prompt แล้ว กดแป้น Enter เพื่อสั่งให้เครื่องคอมพิวเตอร์ไปทำงานตามคำสั่งที่พิมพ์เข้าไป ผลที่ออกมา ก็แสดงออกมาเป็นตัวหนังสือให้เราได้อ่าน
Extension Card Interface คือ มาตรฐานการเชื่อมต่อกับเมนบอร์ดคอมพิวเตอร์รูปแบบต่างๆ กับการ์ดเพิ่มความสามารถประเภทต่างๆ เช่น AGP Interface , PCI Express Interface , PCI 16bit/32bit/64bit Interface , ISA Interface เป็นต้น
External Communication Interface คือ การต่อเชื่อมกับอุปกรณ์คอมพิวเตอร์ หรือ อุปกรณ์ต่อพ่วงต่างๆ เช่น Parallel Interface เช่น เครื่องพิมพ์แบบใช้ Parallel port, เครื่องสแกนเนอร์ เป็นต้น
Serial Interface ( Com1, Com2, Com3, Com4 ) เช่น โมเด็ม , เครื่องพิมพ์ เป็นต้น.
USB Interface หรือ Universal Serial Bus Interface ที่ต่ออุปกรณ์สมัยใหม่ทาง
FireWire Interface หรือ 1394 Interface พอร์ตเชื่อมต่อความเร็วสูง คล้ายกับ
การออกแบบอินเตอร์เฟส(Interface Design)
อินเตอร์เฟส(Interface) กับเรื่องการออกแบบความสวยงามจะมีส่วนที่แตกต่างกันอยู่นิดหน่อยตรงที่ อินเตอร์เฟส คือสิ่งต่างๆในเว็บไซต์ที่ Audience สามารถเข้ามามีปฏิสัมพันธ์(Interaction) กับเว็บไซต์ได้ ส่วนเรื่องความสวยงามจะเป็นเรื่องที่ Audience มองเห็นและรู้สึกกับมันได้ แต่อาจจะไม่สามารถเข้าไปมีปฏิสัมพันธ์กับมันได้ ดังนั้นการออกแบบอินเตอร์เฟสไม่ว่าจะเป็น เมนู formต่างๆ หรือองค์ประกอบต่างๆที่สามรถมีปฏิสัมพันธ์กับมันได้ จะต้องออกแบบให้สามารถใช้งานได้โดยการเรียนรู้ด้วยตัวเองในเวลาอันสั้นได้ หรือสามารถใช้งานอินเตอร์เฟสนั้นได้โดยไม่จำเป็นต้องมีประสบการณ์ หรือไม่เคยใช้ อินเตอร์เฟสนั้นมาก่อน ตัวอย่างการออกแบบอินเตอร์เฟส ง่ายๆก็คือเรื่องของการใช้งาน Icon ที่เป็นรูปภาพต่างๆ โดยแต่ละ Icon จำเป็นที่จะต้องสื่อความหมายได้ชัดเจน เพื่อให้ Audience สามารถเข้าใจ และไปถึงปลายทางที่ต้องการได้อย่างถูกต้อง
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
การออกแบบ User Interface
- สอดคล้อง/รองรับ พฤติกรรมการค้นคว้าของผู้ใช้ เช่น สะดุดตา สะดุดใจ สะดวก สบาย รวดเร็ว
- เชื่อมโยงข้อมูลที่เป็นประโยชน์ไว้ด้วยกันทั้งหมด
หลักการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน
องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง
1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ
4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ
เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัญสำหรับผู้ใช้ที่มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้
9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง
พื้นฐานในการออกแบบเว็บไซต์ที่ดี
- มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ
- มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ
- ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย
ข้อควรพิจารณาในเรื่องการออกแบบหน้าจอ
1. ความน่าสนใจของเนื้อหาควรเป็นประเด็นหลักของการออกแบบ ควรทุ่มเทพื้นที่ บนเว็บไซต์เพื่อเนื้อหา อย่างน้อยครึ่งหนึ่ง หรือเกือบ 80 เปอร์เซ็นต์ มากกว่าเรื่อง navigation ที่ควรจะมีสัดส่วนต่ำกว่า 20 เปอร์เซ็นต์
2. พื้นที่สีขาวทำให้คนใช้เข้าใจการจัดหมวดหมู่เนื้อหา นำสายตาคนใช้ได้ดี และเสียเวลาดาวน์โหลดน้อยกว่าเมื่อเปรียบเทียบกับการใช้เส้นแบ่ง
User Interface คือส่วนที่สำคัญในการพํฒนาระบบ ไม่เพียงแต่ที่เราต้องพัฒนาระบบให้มีประสิทธิภาพแล้วเราต้องทำให้ User interface ที่ให้ผู้ใช้ได้ใช้ะระบบมีความน่าสนใจ ก็ถือเป็นส่วนสำคัญ เพราะถึงแม้ว่าเราจะพัฒนาระบบมาดีแค่ไหนแล้ว แต่ถ้าหากผู้ใข้ไม่เข้าใจว่าจะใช้งานอย่างไรก็ไม่เกิดประโยชน์ User interface หลัก ๆ ในการออกแบบคือให้ผู้ใช้เข้าใจง่าย , มีการตอบโต้ระว่างผู้ใช้กับระบบ และการตอบสนองของระบบดี
แบ่งออกเป็นประะเภทใหญ่ ๆ คือ
1. Natural Languge เป็นการใช้ภาษามนุษย์ในการติดต่อสื่อสาร มีความสลับซับซ้อน ยากแก่การตีความ เนื่องจากคำตอบกว้าง มีได้มากมาย
2. Question an Answerเป็นการเรียงลำดับที่เกิดด้วนการตั้งคำถามและคำตอบ เป็นบทสนทนา (Dialogue) เช่นดังการติดตั้งโปรแกรม เป็นต้น แต่ในบางครั้งผู้ใช้ก็ไม่ทราบคำตอบที่ถามจึงอาจจะมี help ไว้ช่วยเหลือ
3. Menu เป็นการเลือกสิ่งที่ปรากฏบนจอด้วยอุปกรณ์ต่าง ๆ เช่น เม้าส์, คีย์บอร์ด, ปากกา ,touch screen เป็นต้น โดยแบ่งเมนูได้หลายแบบ ไม่ว่าจะเป็น แบบ basic, pull down menu , popup menu , nested menu
(ภาพตัวอย่างใช้ โปรแกรม Firefox ละกัน)
4. Command Languageใช้ Syntax rule ดังนั้นผู้ใช้จึงต้องทราบคำสั่งนั้น ๆ แต่ถ้าใช้บ่อยๆ การใช้ command จะรวดเร็ว สะดวกมาก
5.GUI (Graphic user interface) ที่เราเห็นเป็นส่วนใหญ่ที่มีปุ่มให้เรากด เห็นเป็นภาพไอคอน สะดวกรวดเร็ว ทั้งยังเข้าใจง่าย วิธีการที่เราเรียกว่า drag and drop ที่กดแล้วปล่อย
แล้วกล่าวถึง Storyboard เป็นเทคนิคการออกแบบถึงเหตุการณ์ตามลำดับที่ให้เห็นภาพและหน้าตาการทำงาน user interface ตามที่กำหนด ที่เราเรียกว่า Prototype หรือต้นแบบเพื่อให้เรามองเห็นภาพการทำงานโต้ตอบกับระบบ ข้อดีของมันก็คือว่าทำให้เห็นภาพการเปลี่ยนแปลง, ข้อจำกัด แล้วทำให้ระบบตรงกับความต้องการมากทีสุด
1.http://www.expert2you.com/view_question2.php?q_id=11268
2.http://nariopon.thport.com/?p=361
3. pirun.ku.ac.th/~g4966062/User-Interface-Design.doc –
4. http://tazaii.exteen.com/20080421/user-interface-design
ในปัจจุบันการออกแบบอินเตอร์เฟสในแอปพลิเคชั่นมีความสำคัญและมีการพัฒนามากขึ้น แตกต่างจากในอดีตที่มีข้อจำกัดในการแสดงผลบนหน้าจอทำให้อินเตอร์เฟสไม่ค่อยมีบทบาทต่อการใช้งานมากนัก แต่เทคโนโลยีต่างๆ ในปัจจุบันทำให้สามารถสร้างอินเตอร์เฟสที่มีรูปลักษณ์สวยงามและมีลูกเล่นได้หลากหลาย เพื่อรองรับแอปพลิเคชั่นที่นับวันจะมีความซับซ้อนมากขึ้น จึงทำให้ต้องมีการพัฒนารูปแบบและการออกแบบอินเตอร์เฟสเพื่อให้ทำงานสอดคล้องกับแอปพลิเคชั่น และส่งผลให้อินเตอร์เฟสของแอปพลิเคชั่นต่างๆ มีรูปลักษณ์ที่สวยงามและน่าสนใจ แต่การออกแบบอินเตอร์เฟสที่ดีไม่ได้หมายถึงการออกแบบทางด้านรูปลักษณ์ของแอปพลิเคชั่นเพียงอย่างเดียวแต่ยังต้องคำนึงถึงการอำนวยความสะดวกในการใช้งานของผู้ใช้ด้วย ดังนั้นนักออกแบบจำเป็นต้องเข้าใจถึงการออกแบบอินเตอร์เฟสในส่วนอื่นๆ ที่นอกเหนือจากรูปลักษณ์ของแอปพลิเคชั่นด้วย รวมถึงศึกษาการนำเสนอข้อมูลในรูปแบบต่างๆ อย่างถี่ถ้วนและจะได้นำมาประยุกต์ใช้งานได้อย่างเหมาะสม เพื่อให้แอปพลิเคชั่นสามารถตอบสนองความต้องการหรือพฤติกรรมของผู้ใช้ผ่านอินเตอร์เฟสได้อย่างถูกต้องและมีประสิทธิภาพ
อินเตอร์เฟส คือ สิ่งต่างๆในเว็บไซต์ที่ Audience สามารถเข้ามามีปฏิสัมพันธ์(Interaction) กับเว็บไซต์ได้ ส่วนเรื่องความสวยงามจะเป็นเรื่องที่ Audience มองเห็นและรู้สึกกับมันได้ แต่อาจจะไม่สามารถเข้าไปมีปฏิสัมพันธ์กับมันได้ ดังนั้นการออกแบบอินเตอร์เฟสไม่ว่าจะเป็น เมนู formต่างๆ หรือองค์ประกอบต่างๆที่สามรถมีปฏิสัมพันธ์กับมันได้ จะต้องออกแบบให้สามารถใช้งานได้โดยการเรียนรู้ด้วยตัวเองในเวลาอันสั้นได้ หรือสามารถใช้งานอินเตอร์เฟสนั้นได้โดยไม่จำเป็นต้องมีประสบการณ์ หรือไม่เคยใช้ อินเตอร์เฟสนั้นมาก่อน ตัวอย่างการออกแบบอินเตอร์เฟส ง่ายๆก็คือเรื่องของการใช้งาน Icon ที่เป็นรูปภาพต่างๆ โดยแต่ละ Icon จำเป็นที่จะต้องสื่อความหมายได้ชัดเจน เพื่อให้ Audience สามารถเข้าใจ และไปถึงปลายทางที่ต้องการได้อย่างถูกต้อง
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
มนุษย์เป็นปัจจัยสำคัญในการออกแบบ UI
- Limited short-term memory มนุษย์ไม่สามารถจดจำอะไรได้เยอะๆ จึงต้อง จำกัดส่วนตอบสนองให้สั้นๆ
- People make mistakes คนย่อมต้องมีข้อผิดพลาด
- People are different คนมีความแตกต่างกันไปทั้งร่างกายและจิตใจ
- People have different interaction preferences คนมีความแตกต่างด้านการตอบสนอง
หลักการออกแบบ UI (UI design principles)
การออกแบบ UI ต้องใช้บัญชีความต้องการประสบการณ์ และ ความสามารถของผู้ใช้ระบบ นักออกแบบควรทราบข้อจำกัดทางกายภาพ และ จิตใจของผู้คน (เช่น Limited short-term memory) และ ควรตระหนักว่า คนจะทำผิดพลาดในเรื่องใดบ้าง หลักการออกแบบ UI ข้างล่างนี้จะรองรับการออกแบบอินเตอร์เฟซหลักๆ
- User familiarity ความคุ้นเคยของผู้ใช้
- Consistency ความเหมาะสม
- Minimal surprise แปลกใจน้อยที่สุด
- Recoverability ความยืดยุ่น
- User guidance แนะนำผู้ใช้
- User diversity ความหลากหลายของผู้ใช้
User familiarity
อินเตอร์เฟซขึ้นอยู่กับความคุ้นเคยของผู้ใช้ เช่น ระบบสำนักงาน ควรคิดถึง เอกสาร จดหมาย แล้วนำมาแทนที่ ไฟล์ ต่างๆ
Consistency
ระบบจะแสดงระดับความเหมาะสมและความมั่นคง เช่น คำสั่งและเมนูควรมีรูปแบบเดียวกันวรรคตอน คำสั่งจะคล้าย ฯลฯ
Minimal surprise
ถ้าคำสั้งเป็นคำสั้งที่คุ้นเคยแล้ว ผู้ใช้จะสามรถคาดการ การทำงานของคำสั่งได้
Recoverability
ระบบควรมีความยืดยุ่น บางครั้งผู้ใช้อาจทำงานพลาด ควรจะมีการกู้คืนข้อมูลได้ และรวมไปถึงการ ลบ การสร้าง การย้าย และอื่นๆ
User guidance
จำเป็นต้องมี การช่วยเหลือ หรือ แนะนำการใช้งานระบบ หรือ Help
User diversity
เนื่องจากผู้ใช้มีความหลากหลาย จึงควรคำนึงถึง สถานที่ ความเป็นอยู่ ลักษณะ ของแต่ละพื้นที่ ที่เกี่ยวข้องกับระบบ
ปัญหาการออกแบบ (Design issues in UIs)
สองปัญหาที่ต้องคำนึงในการออกแบบ UI
- ข้อมูลความต้องการจากผู้ใช้ตรงกับระบบคอมพิวเตอร์หรือไม่
- นำเสนอข้อมูลให้ผู้ใช้ได้อย่างเข้าใจหรือไม่
ผลตอบรับจากผู้ใช้ควรมีความตอบสนองจากผู้ใช้ได้อย่างดี
รูปแบบของการโต้ตอบระหว่างผู้ใช้กับระบบ
ในการออกแบบเราพิจารณาประสิทธิภาพในการโต้ตอบระหว่างผู้ใช้กับระบบเป็นหลัก ซึ่งรูปแบบของการโต้ตอบมีหลายรูปแบบดังนี้
- การโต้ตอบด้วยการพิมพ์คำสั่ง (Command Line Interaction)
- การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction)
- การโต้ตอบด้วยแบบฟอร์ม (Form Interaction)
- การโต้ตอบผ่านวัตถุ (Object-Based Interaction)
- การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)
การโต้ตอบด้วยการพิมพ์คำสั่ง (Command Line Interaction)
- เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้องพิมพ์คำสั่งลงในช่องป้อนคำสั่ง เพื่อกระตุ้นให้เกิดการทำงานในระบบ
- ผู้ใช้จะต้องจำคำสั่ง ไวยากรณ์ และกฎเกณฑ์ต่างๆ เช่น คำสั่งของระบบปฏิบัติการ DOS
- รวมถึงการใช้ Shortcut keys และ Function keys ด้วย
การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction)
เมนู คือ การเตรียมคำสั่งสำหรับให้ผู้ใช้เลือก เป็นการโต้ตอบกับระบบด้วยการแสดงเมนูคำสั่ง โดยผู้ใช้ไม่จำเป็นต้องป้อนคำสั่งเอง
รูปแบบเมนูมีดังนี้ คือ
- Pull-down Menu เมนูแสดงคำสั่ง โดยแบ่งรายการของคำสั่งเป็นหมวดหมู่ เมื่อผู้ใช้คลิกจะแสดงรายการคำสั่งจากบนลงล่าง
- Pop-up Menu เมนูแสดงคำสั่ง เมื่อผู้ใช้คลิกเลือกวัตถุ หรือ object ใด ๆ ในจอภาพ คำสั่งหรือคุณสมบัติที่เกี่ยวข้องกับ object นั้นจะถูกแสดงออกมา
- Tool Bar เป็นปุ่มเลือกที่เตรียมไว้
การโต้ตอบด้วยแบบฟอร์ม (Form Interaction)
- เป็นการโต้ตอบที่ผู้ใช้ระบบจะต้องป้อนข้อมูลลงในช่องว่างที่อยู่ในฟอร์มที่แสดงบนหน้าจอคอมพิวเตอร์ คล้ายการกรอกแบบฟอร์มลงในกระดาษ
- ชื่อของช่องป้อนข้อมูลต้องสื่อความหมาย
- แบ่งส่วนของข้อมูลบนฟอร์มให้เหมาะสม
- ควรแสดงข้อมูลเริ่มต้น (Default) ให้กับช่องป้อนข้อมูลที่ต้องใช้ข้อมูลนั้นบ่อยครั้ง
- ช่องป้อนข้อมูลไม่ควรยาวมากจนเกินไป
- ไม่ควรให้หน้าของฟอร์มยาวเกินไป ซึ่งต้องทำให้ scroll ขึ้นลงไปมา
การโต้ตอบผ่านวัตถุ (Object-Based Interaction)
วัตถุสัญลักษณ์ หรือ วัตถุรูปภาพ ถูกใช้เป็นตัวแทนคำสั่งหรือฟังก์ชัน โดยผู้ใช้สามารถโต้ตอบกับวัตถุเหล่านั้นเพื่อการออกคำสั่ง
วัตถุสัญลักษณ์หรือรูปภาพแทนคำสั่งการทำงานถูกเรียกว่า ไอคอน (Icon) ซึ่ง
- ช่วยประหยัดพื้นที่บนหน้าจอ
- ช่วยให้ผู้ใช้เข้าใจได้ง่ายขึ้น
การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)
- เป็นการโต้ตอบกับระบบด้วยภาษามนุษย์ ไม่ว่าจะเป็นประโยคภาษาพูดหรือเขียน
- อยู่บนพื้นฐานของการประมวลผลภาษาธรรมชาติ
- เป็นเทคโนโลยีสำหรับอนาคต
เรื่องที่ต้องพิจารณาในการออกแบบ User Interface
- เรื่องที่ต้องพิจารณาในการออกแบบ User Interface
- การออกแบบการจัดวาง (Layouts) ขององค์ประกอบบนหน้าจอ
- การออกแบบโครงสร้างของการป้อนข้อมูล (Structure Data Entry)
- การควบคุมความถูกต้องในการป้อนข้อมูล (Controlling Data Input)
- ข้อความตอบสนอง (Feedback Message)
- การแสดงส่วนช่วยเหลือ (Help)
- การออกแบบการควบคุมการเข้าถึงข้อมูลของผู้ใช้ (Access Control)
- การออกแบบลำดับการเชื่อมโยงจอภาพ (Dialogue Design)
อ้างอิง :
1. www.ktpbook.com/product/ProductDetail.asp?Id...1...
2. http://nariopon.thport.com/?p=361
3. http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm
การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์
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 ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง
ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
การปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ หมายถึง
การกระทำหรือการประกอบกิจกรรมระหว่างสิ่งสองสิ่งหรือสิ่งหลายสิ่งเพื่อให้ได้มาซึ่งผลลัพธ์ ไม่ว่าผลลัพธ์นั้นจะออกมาในทางที่ดีมีประโยชน์หรือออกมาในทางที่ก่อให้เกิดผลเสียต่อสิ่งที่กำลังกระทำหรือตอบโต้อยู่นั้น เช่น การปฏิสัมพันธ์ของคอมพิวเตอร์ช่วยสอน การปฏิสัมพันธ์ระหว่างระบบกับผู้ใช้ โดยการปฏิสัมพันธ์ดังกล่างนี้จะให้ได้มาซึ่งประสิทธิภาพที่ดีจะต้องมีการศึกษาเกี่ยวกับความต้องการของผู้ใช้ที่มีต่อระบบ หรือโปรแกรมคอมพิวเตอร์ช่วย อธิเช่น การศึกษาเกี่ยวกับ Human-computer interaction (HCI) , user interface , Graphical User Interface (GUI) เป็นต้น แนวคิดของการปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์และตัวเชื่อมประสานกับผู้ใช้ การออกแบบและ เทคโนโลยีตัวเชื่อมประสานกับผู้ใช้ องค์ประกอบมนุษย์ในซอฟต์แวร์เชิงโต้ตอบ ทฤษฎี หลักการ และแนวทาง การจัดการกระบวน การออกแบบ การทวนสอบจากผู้ชำนาญการ การทดสอบการใช้งาน การสำรวจ และการประเมินผลอย่าง ต่อเนื่อง เครื่องมือทาง ซอฟต์แวร์
การควบคุมโดยตรง และสภาพแวดล้อมเสมือนจริง ยกตัวอย่างเช่น การเลือกเมนู การใส่ค่าในฟอร์ม และกรอบข้อความ โต้ตอบ คำสั่งและภาษาธรรมชาติ เครื่องมือในการปฏิสัมพันธ์ เวลาในการตอบสนองและอัตราการแสดงผล รูปแบบการ นำเสนอ คู่มือการใช้ที่พิมพ์ขึ้น การให้ความช่วยเหลือออนไลน์ บทช่วยสอน กลวิธีแบบหน้าต่างหลายช่อง การทำงาน ร่วมกันโดยใช้คอมพิวเตอร์ช่วย การค้นหาสารสนเทศและการทำให้เห็นภาพ ไฮเปอร์มีเดียและ เวิร์ลไวด์เว็บ
รูปเเบบการการปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์
ระบบการติดต่อระหว่างผู้ใช้งานระบบและระบบงานทางคอมพิวเตอร์เป็นส่วนที่ต้องอาศัยจินตนาการในเรื่องการดำเนินงานอย่างมากเพราะต้องคิดเผื่อว่า ระบบนั้นได้ดำเนินงานเสร็จสิ้นไปแล้ว และจะมีวิธีการใดที่จะช่วยให้ผู้ใช้งานระบบสามารถทำความเข้าใจกับระบบได้โดยง่าย
การมีปฏิสัมพันธ์กันระหว่างมนุษย์กับคอมพิวเตอร์ โดยมีการโต้ตอบปฏิสัมพันธ์กับคอมพิวเตอร์ และมีโอกาสเลือก ตัดสินใจจากการได้รับข้อมูลย้อนกลับทันที เป็นการเรียนรู้ในรูปแบบการสื่อสารสองทาง (Two-Way Communication) ข้อมูลจะถูกส่งจากเครื่องคอมพิวเตอร์ไปยังมนุษย์ (ผู้ใช้)เพื่อให้ทำการตอบสนอง โดยส่งข้อมูลกลับไปยังเครื่องคอมพิวเตอร์อีกครั้งหนึ่ง การปฏิสัมพันธ์ (Interactive) คือ การมีปฏิสัมพันธ์กันระหว่างผู้เรียนกับคอมพิวเตอร์ช่วยสอน ผู้เรียนมีการโต้ตอบปฏิสัมพันธ์กับคอมพิวเตอร์ และบทเรียนฯ มีโอกาสเลือก ตัดสินใจ และได้รับการเสริมแรง จากการได้รับข้อมูลย้อนกลับทันที เป็นการเรียนรู้ในรูปแบบการสื่อสารสองทาง (Two-Way Communication) การใช้บทเรียนคอมพิวเตอร์ช่วยสอน เนื้อหาจะถูกส่งจากเครื่องไปยังผู้เรียนเพื่อให้ผู้เรียนทำการตอบสนอง โดยส่งคำตอบหรือข้อมูลกลับไปยังเครื่องอีกครั้งหนึ่ง การเรียนการสอนในลักษณะนี้มีข้อดีหลายประการ เช่น ความฉับพลันของการให้คำตอบจากโปรแกรมบทเรียนที่วางไว้เพื่อความเข้าใจที่ถูกต้องแก่ผู้เรียน เป็นการทำให้ง่ายต่อการเรียนรู้และทำให้การถ่ายทอดความรู้บรรลุผลด้วยดี ยกตัวอย่างรูปแบบการปฏิสัมพันธ์ของ E- Learning
1. รูปแบบการเรียนการสอนในลักษณะซิงโครนัส (Synchronous Learning methods)หมายถึงการนำเสนอองค์ความรู้ รวมถึงปฏิสัมพันธ์ที่เกิดขึ้นระหว่างผู้เรียนกับผู้สอน หรือผู้เรียนกับผู้เรียนด้วยกัน เกิดขึ้น ณ เวลาพร้อมกัน หรือเกิดขึ้น ณ เวลาจริง ลักษณะการนำเสนอของ e-learning ที่อยู่ในรูปแบบนี้ได้แก่ การใช้ระบบ Video Conference หรือระบบ Online Chat ไม่ว่าจะเป็นชนิดเสียงหรือตัวอักษร การปฏิสัมพันธ์จะเกิดขึ้น ณ เวลาเดียวกัน
2. การนำเสนอในลักษณะอะซิงโครนัส (Asynchronous Learning methods)การนำเสนอในลักษณะนี้ คู่ปฏิสัมพันธ์ไม่จำเป็นต้องใช้เวลาที่ตรงกัน ตัวอย่างการเรียนการสอน e-learning ในลักษณะนี้ได้แก่ การที่ให้นักศึกษาเรียนรู้ผ่านทางเว็บเพจ การปฏิสัมพันธ์ อาจเกิดขึ้นโดยการใช้กระดานสนทนาอิเล็กทรอนิกส์ (Webboard) หรือการใช้ E-mail เป็นต้น วิธีการศึกษาโดยการทดลองทดสอบ
โดยการศึกษาการจดจำเรียนรู้ของมนุษย์
โดยการศึกษาทำนายประสิทธิผลของมนุษย์
โดยการเลียนแบบการปฏิสัมพันธ์ระหว่างมนุษย์กับมนุษย์ ที่ได้รับการยอมรับและนำมาใช้กันอย่างกว้างขวางในการศึกษาด้านปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ในปัจจุบัน
การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์
เวลาออกแบบเพื่ออะไร เราก็ต้องเข้าใจในสิ่งนั้นๆ ข้อดีข้อด้อยของสิ่งนั้นๆด้วย เช่น เวลาเราออกแบบส้วมแมว เราก็ต้องไม่ลืมว่า แมวนั้น พูดไม่ได้ และส่วนใหญ่ กดชักโครกไม่เป็น
เวลาเราออกแบบกระถางให้ดอกบัว เราก็ต้องไม่ลืมว่า ดอกบัวต้องอยู่ในน้ำตลอดเวลา และมีที่พอสมควรให้รากหายใจได้ เจริญเติบโตได้ เวลาเราออกแบบสิ่งใดๆให้คน (ซึ่งเป็นส่วนใหญ่ในสิ่งทั้งหมดที่เราออกแบบในโลกนี้) เราก็ต้องเข้าใจคนเหมือนกัน สิ่งหนึ่งที่เป็นพื้นฐานในความเข้าใจมนุษย์
นอกจากที่เราจะเข้าใจความสามารถ ศักยภาพของมนุษย์แล้วนั้นก็คือ การเข้าใจข้อจำกัดในความสามารถของมนุษย์ในเรื่องต่างๆ เช่น ถ้าเป็นเรื่องการออกแบบบันได เราก็ต้องมีความรู้ความเข้าใจว่า มนุษย์ก้าวในแนวตั้งได้สบายที่สุดอยู่ในระยะเท่าใด ถ้าออกแบบโต๊ะทำงาน เราก็ต้องมีความรู้ความเข้าใจว่า คนปรกติ(ที่เป็นผู้ใช้ของเรา) จะรู้สึกวางแขนทำงานได้สบายที่สุดในช่วงระยะใด ถ้าเป็นโต๊ะคอมพิวเตอร์ จะวางแขนบนแป้นพิมพ์ได้องศาที่ดีที่สุด โต๊ะต้องสูงขนาดไหน ถ้าในเรื่อง Application, Software ก็จะมีข้อจำกัดที่ควรรู้มากมาย ทั้งนี้ ขึ้นอยู่กับกลุ่มผู้ใช้งานด้วยซึ่งจะมีข้อจำกัดและความสามารถเฉพาะแตกต่างกันไป แต่โดยทั่วไป เวลาเราออกแบบต้องไม่ลืมว่า เราออกแบบให้มนุษย์ใช้
1. มนุษย์ คือมนุษย์
คือผู้ที่สามารถสร้างข้อผิดพลาดได้ตลอดเวลา เป็นสิ่งที่แตกต่างกับคอมพิวเตอร์อย่างเห็นได้ชัด ระบบคอมพิวเตอร์ ถ้าเขียนโค้ดถูก ปราศจากบั๊ก ถ้ายังอยู่ใน environment เดิม มันก็ยังทำงานได้โดยปราศจากบั๊กตลอดไป แต่กับคนแล้ว ไม่รู้ว่า วันดีคืนดีวันไหนจะเกิดเฮี้ยน อาจจะนอนดึก ง่วงนอน สมาธิไม่ดี แม่ตี สอบตก แชทเพลิน มีร้อยแปดพันเก้าอย่างที่ทำให้มนุษย์ทำอะไรหละหลวม ผิดพลาดได้ตลอด ฉะนั้น ถ้าระบบยิ่งมีบั๊ก มีข้อผิดพลาด หรือ workflow หละหลวมให้ผิดง่ายๆ ก็ยิ่งส่งเสริมให้เกิดความผิดพลาดได้ง่ายๆ
*อย่าสรุปว่า ที่เกิดความผิดพลาดเป็นปัญหาของคนๆนั้นเสมอๆ
เพราะระบบอาจไม่ดีเอง หรือไม่ได้คิดถึง flow ที่จะรองรับความผิดพลาดทั่วไปเอาไว้
ให้แก้ที่ระบบก่อน จะง่ายกว่าแก้ที่คนประมาณสามล้านเท่า
2. ความเร็วของการคิด
สมองคนเราใช้เวลาประมาณ 1 ใน 10 วินาทีในการระลึกจำได้ในสิ่งๆหนึ่งๆบนหน้าจอและราวๆเกือบๆ 1 ใน 4 วินาที ในการเปลี่ยนความสนใจจากวัตถุหนึ่งไปยังวัตถุอื่นในหน้าจอเดียวกันและประมาณ 1.25 วินาทีในการตัดสินใจเลือก 1 ใน 2 ตัวเลือกที่ปรากฏขึ้นพร้อมๆกัน (Olson and Olson, 1990)
* ถึงแม้ว่าหน่วยประมวลผลของคนเราจะเป็นหน่วยวินาที
มันก็ไม่ได้แปลว่าเร็วอย่างที่หลายๆคนเข้าใจ
3. ตาไปไวกว่ามือเสมอ
การพิมพ์ 1 ตัวอักษร ใช้เวลาโดยทั่วไป 0.1 – 1.25 วินาที การคลิกเมาส์หนึ่งครั้ง ใช้เวลาเท่ากับการพิมพ์ 1 ตัวอักษร ในขณะที่การเลื่อนเมาส์บนหน้าจอใช้เวลาเฉลี่ย 1.5 วินาที (ทั้งนี้ การเลื่อนเมาส์เพื่อคลิกหรือหยุดในตำแหน่งที่ต้องการ ขึ้นอยู่กับ Fitt’s Law ซึ่งว่าด้วยความสัมพันธ์ระหว่างขนาดของวัตถุและระยะทางที่จะไปยังวัตถุนั้นๆ ถ้าวัตถุใหญ่และระยะทางสั้น ก็จะใช้เวลาน้อย ในขณะที่ถ้าวัตถุเล็กแล้วระยะทางยังมากอีก ก็ใช้เวลามากขึ้นตามลำดับ) การเปลี่ยนมือระหว่างคีย์บอร์ดกับเมาส์ ก็ใช้เวลาอีกประมาณ 0.36 วินาที
เมื่อดูแต่ละ action แล้วอาจจะไม่เยอะแต่คนเราไม่ได้ทำ action เดียวเดี่ยวๆกับหน้าเว็บ 1 หน้า หรือ หน้าInterfaceใดๆ 1 การแสดงผล เราทำทั้งระลึก ตัดสินใจ มือไป มือเลื่อน คลิก เปลี่ยนตำแหน่งมือรวมๆแล้ว เราใช้เวลาไม่น้อยต่อการทำงานเพียง task เดียว
4. Small Number
นักจิตวิทยานามกระเดื่อง George Miller’s ได้ให้กำเนิดทฤษฎี 7 บวกลบ 2 เอาไว้ซึ่งแสดงถึงหน่วย หรือชุดข้อมูล ที่คนปรกติคนหนึ่ง พอจะจำได้พร้อมๆกันด้วยความจำส่วนชั่วคราว (Short-term Memory)
ในยุคสมัยการพัฒนาช่วงหนึ่ง จึงได้มีการเข้มงวดเกี่ยวกับกฏนี้อย่างมากหลายๆคนได้ตีความกฏนี้ว่า ในหน้าเว็บไม่ควรจะมีเมนูเกิน 7 เมนูอย่างไรก็ตาม กฏนี้ก็มีข้อยกเว้นไปตามปัจจัยและสถานการณ์ในการใช้งานแต่อย่างน้อย กฏนี้ก็ทำให้เราทราบว่าคนเราไม่ได้จำอะไรได้มากมายนักหรอก อย่าหวังอะไรอย่างนั้นเวลาทำระบบ
5. จำหน้าได้ แต่ชื่อหนีไปไหนแล้วไม่รู้
โดยทั่วไป คนเราจะมีประสิทธิภาพในการ “ระลึก” ได้มากกว่าการ “ขุดความจำ” ขึ้นมาโดยไม่มีตัวช่วย ถ้าเราเจอคนๆหนึ่งที่ไม่ได้เจอมาเป็นสิบปี ก็มีความเป็นไปได้สูงว่า เราจำชื่อเขาไม่ได้ ถ้าเทียบการที่ให้เอารายชื่อ ตัวเลือกหลอกปนคำตอบจริงมาให้เลือก เรามักจะตอบได้ถูกว่า อ๋อ ไอ้หมอนี่ชื่อนี้นี่เองมากกว่าการที่ให้เวลาเรานั่งระลึกชาติตามลำพังวันหลังจะพูดถึงเรื่องระลึก(Recognize) กับการขุดความจำ(Recall)ในรายละเอียดทีหลังแล้วกัน (ถ้าไม่ลืม)
ในการใช้ระบบที่เกี่ยวกับคอมพิวเตอร์ยุคแรกๆ จึงเป็นเรื่องที่สาหัสสากรรจ์สำหรับคนความจำปลาทองเพราะต้องจำชุดคำสั่งทั้งหมดในการใช้งานให้ได้ เพื่อการใช้งานระบบอย่างมีประสิทธิภาพ ตอนนั้นก็ช่างมันเถิด เพราะยุคนั้น ยังเป็นการเริ่มต้นของการใช้คอมพิวเตอร์อยู่ แต่มาถึงค.ศ. พ.ศ.นี้แล้ว ใครยังทำระบบอย่างนั้นอยู่ ก็มีทีท่าว่าจะขายไม่ออก หมายังไม่มอง(เพราะอ่านไม่ออก) ได้ง่ายๆ ไม่ใช่ว่าการใช้ชุดคำสั่งไม่ดีเสมอไป แต่เราต้องไม่ลืมด้วยว่า ธรรมชาติในการประมวลผลความจำของคนเรา ทั้ง Recognize และ Recall นั้น มีข้อดีข้อเสียต่างกันอย่างไร
6. Learning Curve
การเรียนรู้ของมนุษย์ เป็นปรกติที่จะเกิดข้อผิดพลาดในคราวแรกๆด้วยความไม่รู้ หรือไม่เคยชิน เวลาที่เกิดการเรียนรู้ของใหม่ หรือวิธีใหม่ๆที่ใช้กับของเดิมๆ Learning Curve จึงออกสตาร์ทอย่างช้าๆ ไปพร้อมๆกับความเอ๋อเป๋อเหลอที่จะเกิดขึ้น ข้อนี้ก็เป็นอีกข้อที่นักพัฒนามักจะละเลย เพราะมักจะคิดว่า ของมันดีนะถ้าใครๆได้ใช้แล้วจะติดใจ และลืมไปว่า คนอื่นๆไม่ใช่ตัวเองนะ ทำให้เกิดระบบ หรือ Application ที่ต้องใช้เวลาเรียนรู้อย่างมาก (หรือใช้เวลาเรียนรู้อย่างมากแล้ว แต่ก็ยังไม่เข้าใจมันอยู่ดี) เต็มตลาดทั่วโลกไปหมด
คงจะเห็นว่า คนค้นคนนั้น ก็มีข้อด้อยไปตามประสา คนค้นคน ถ้าจะถามว่า ข้อไหนสำคัญที่สุดเป็นอันดับแรก ก็คงต้องเป็นข้อ 1 คืออย่าลืมว่า เรากำลังออกแบบ/ทำ ระบบให้คน พอระลึกได้ดังนี้แล้ว ข้ออื่นๆก็จะเข้ามาอยู่ในความพิจารณาของเราเอง
ในการออกแบบ application ใดๆ เป็นเรื่องปรกติที่เราจะต้องเจอกับปัญหาการชิงความสำคัญระหว่าง อำนาจในการใช้งาน กับ ความเรียบง่ายในการใช้งาน เพราะขณะที่ผู้ใช้ต้องการความสามารถที่จะทำนั่นทำนี่ได้ในระบบ เขาก็ไม่อยากจะเสียเวลาเรียนรู้ระบบเช่นกัน
มี 2 ทางในการออกแบบเพื่อรองรับปัญหานี้ นั่นก็คือ
1. Progressive Disclosure หรือ การแสดงคำสั่งง่ายๆหรือใช้งานบ่อย ขึ้นมาเป็นอันดับแรกหรือเป็น Default เมื่อผู้ใช้ต้องการใช้คำสั่งที่ซับซ้อนหรือไม่ค่อยได้ใช้ ก็ต้องกดหรือทำให้มันแสดงออกมาอีกขั้นตอนหนึ่ง อย่างที่เราเห็นใน Microsoft Word ที่เมื่อเราใช้ไปสักพักแล้ว คำสั่งไหนที่เราไม่ได้ใช้ มันจะจัดการเก็บซ่อนให้ไม่ให้รกหูรกตา และเมื่อเวลาที่เราต้องการใช้ขึ้นมา ก็ให้มันแสดงขึ้นมาให้หมด เป็นต้น
2. Generic Command คือ คำสั่งที่ใช้กับระบบอื่นๆ เราก็นำมาใช้ในระบบนี้ด้วย เพื่อลดการเรียนรู้ของผู้ใช้ ทำให้ผู้ใช้สามารถใช้งานระบบได้เร็วยิ่งขึ้น และเป็นสิ่งที่ผู้ใช้หวังว่าจะทำได้ในระบบหนึ่งๆ
อ้างอิง:
1. http://iamia.wordpress.com/category/user-interface/page/4/
2. http://samphan.ob.tc/-View.php?N=2&Page=1
การอินเตอร์เฟส คือ ตัวประสาน ซึ่งหมายถึง การเชื่อมต่อระหว่าง คอมพิวเตอร์ ที่ถ่ายโอนข้อมูลจากกันและกันได้ แต่มักนำมาใช้ในความหมายของ user interface ที่แปลว่า การติดต่อประสานระหว่างเครื่องคอมพิวเตอร์กับผู้ใช้ เช่น แป้นพิมพ์, จอภาพ ต่างก็เป็นตัวประสานกับผู้ใช้ทั้งสิ้น
การออกแบบอินเตอร์เฟส(Interface Design)
อินเตอร์เฟส(Interface) กับเรื่องการออกแบบความสวยงามจะมีส่วนที่แตกต่างกันอยู่นิดหน่อยตรงที่ อินเตอร์เฟส คือสิ่งต่างๆในเว็บไซต์ที่ Audience สามารถเข้ามามีปฏิสัมพันธ์(Interaction) กับเว็บไซต์ได้ ส่วนเรื่องความสวยงามจะเป็นเรื่องที่ Audience มองเห็นและรู้สึกกับมันได้ แต่อาจจะไม่สามารถเข้าไปมีปฏิสัมพันธ์กับมันได้ ดังนั้นการออกแบบอินเตอร์เฟสไม่ว่าจะเป็น เมนู formต่างๆ หรือองค์ประกอบต่างๆที่สามรถมีปฏิสัมพันธ์กับมันได้ จะต้องออกแบบให้สามารถใช้งานได้โดยการเรียนรู้ด้วยตัวเองในเวลาอันสั้นได้ หรือสามารถใช้งานอินเตอร์เฟสนั้นได้โดยไม่จำเป็นต้องมีประสบการณ์ หรือไม่เคยใช้ อินเตอร์เฟสนั้นมาก่อน ตัวอย่างการออกแบบอินเตอร์เฟส ง่ายๆก็คือเรื่องของการใช้งาน Icon ที่เป็นรูปภาพต่างๆ โดยแต่ละ Icon จำเป็นที่จะต้องสื่อความหมายได้ชัดเจน เพื่อให้ Audience สามารถเข้าใจ และไปถึงปลายทางที่ต้องการได้อย่างถูกต้อง
User Interface หมายถึง ส่วนติดต่อระหว่างผู้ใช้กับระบบ เพื่อรองรับการนำข้อมูลหรือคำสั่งเข้าไปสู่ระบบ ตลอดจนนำเสนอสารสนเทศกลับมายังผู้ใช้
การออกแบบ User Interface จะพิจารณาประสิทธิภาพในการโต้ตอบระหว่างผู้ใช้กับระบบเป็นหลัก ซึ่งรูปแบบของการโต้ตอบมีหลายรูปแบบดังนี้
การโต้ตอบด้วยการพิมพ์คำสั่ง (Command Line Interaction) เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้องพิมพ์คำสั่งลงในช่องป้อนคำสั่ง เพื่อกระตุ้นให้เกิดการทำงานในระบบ ผู้ใช้จะต้องจำคำสั่ง ไวยากรณ์ และกฎเกณฑ์ต่างๆ เช่น คำสั่งของระบบปฏิบัติการ DOS รวมถึงการใช้ Shortcut keys และ Function keys
การโต้ตอบด้วยเมนูคำสั่ง (Menu Interaction) เมนู คือ การเตรียมคำสั่งสำหรับให้ผู้ใช้เลือก เป็นการโต้ตอบกับระบบด้วยการแสดงเมนูคำสั่ง โดยผู้ใช้ไม่จำเป็นต้องป้อนคำสั่งเอง รูปแบบเมนูมีดังนี้ คือ
Pull-down Menu เมนูแสดงคำสั่ง โดยแบ่งรายการของคำสั่งเป็นหมวดหมู่ เมื่อผู้ใช้คลิกจะแสดงรายการคำสั่งจากบนลงล่าง
Pop-up Menu เมนูแสดงคำสั่ง เมื่อผู้ใช้คลิกเลือกวัตถุ หรือ object ใด ๆ ในจอภาพ คำสั่งหรือคุณสมบัติที่เกี่ยวข้องกับ object นั้นจะถูกแสดงออกมา
Tool Bar เป็นปุ่มเลือกที่เตรียมไว้
การโต้ตอบด้วยแบบฟอร์ม (Form Interaction) เป็นการโต้ตอบที่ผู้ใช้ระบบจะต้องป้อนข้อมูลลงในช่องว่างที่อยู่ในฟอร์มที่แสดงบนหน้าจอคอมพิวเตอร์ คล้ายการกรอกแบบฟอร์มลงในกระดาษชื่อของช่องป้อนข้อมูลต้องสื่อความหมายแบ่งส่วนของข้อมูลบนฟอร์มให้เหมาะสมควรแสดงข้อมูลเริ่มต้น (Default) ให้กับช่องป้อนข้อมูลที่ต้องใช้ข้อมูลนั้นบ่อยครั้งช่องป้อนข้อมูลไม่ควรยาวมากจนเกินไปไม่ควรให้หน้าของฟอร์มยาวเกินไป ซึ่งต้องทำให้ scroll ขึ้นลงไปมา
การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction) เป็นการโต้ตอบกับระบบด้วยภาษามนุษย์ ไม่ว่าจะเป็นประโยคภาษาพูดหรือเขียนอยู่บนพื้นฐานของการประมวลผลภาษาธรรมชาติเป็นเทคโนโลยีสำหรับอนาคต
ที่มา http://samphan.ob.tc/-View.php?N=1
http://nariopon.thport.com/?p=361
http://learners.in.th/file/wuttipongr/UIDesign.ppt
การออกแบบอินเตอร์เฟส ก็คือการพัฒนาโปรแกรมประยุกต์ด้วย Visual Basic ก็คือ การสร้างองค์ประกอบต่าง ๆ ของโปรแกรมประยุกต์ด้วยคอนโทรล โดยมีรูปแบบที่สื่อด้วยภาพ แล้วต่อมาก็คือการเขียนชุดคำสั่งเพื่อรองรับเหตุการณ์ต่างๆ ที่อาจเกิดขึ้นได้ ซึ่งจะแบ่งออกเป็น 5 ขั้นตอนใหญ่ ๆ คือ
1. เลือกชนิดของโปรแกรมประยุกต์
2. สร้างยูสเซอร์อินเตอร์เฟส (หรือส่วนติดต่อกับผู้ใช้ อาจเรียกสั้นๆว่า อินเตอร์เฟส)
3. เขียนชุดคำสั่งเพื่อรองรับเหตุการณ์ต่างๆ ที่อาจเกิดขึ้นกับแต่ละคอนโทรลหรืออ็อบเจกต์
4. การทดสอบ ตรวจสอบ และดักจับข้อผิดพลาด
5. คอมไพล์โปรเจ็กต์ให้เป็นปรแกกกกรมประยุกต์ที่
การใช้งานคอนโทรลในการสร้างอินเตอร์เฟส
จุดเริ่มต้นของการพัฒนาโปรแกรมประยุกต์ด้วย Visual Basic ก็คือการนำคอนโทรลชนิดต่างๆ ที่ Visual Basic จัดเตรียมไว้นำมาสร้างอินเตอร์เฟส การพัฒนาโปรแกรมประยุกต์ที่ดี ทำได้โดยการออกแบบอินเตอร์เฟสที่ใช้งานง่าย เป็นมิตรกับผู้ใช้ จะส่งผลให้ระยะเวลาในการพัฒนาโปรแกรมประยุกต์ลดลงไปได้มากทีเดียว เพราะสิ่งที่เหลืออยู่คือการเขียนโค้ดเพื่อทำให้โปร เจ็กต์ทำงานให้สมบูรณ์มากที่สุด
ที่มา:ต้น
http://alaska.reru.ac.th/vbstudio/home/04.html
)
อินเตอร์เฟส หมายถึง จุดเชื่อมระหว่างตัวการ 2 ตัวซึ่งจะต้องปฏิบัติงานร่วมกัน หรือต้องอาศัยซึ่งกันและกัน ในการทำงานในทางคอมพิวเตอร์ จุดเชื่อมระหว่างผู้ใช้คอมพิวเตอร์กับคอมพิวเตอร์เรียกว่า user interface. ซึ่งประกอบไปด้วย ไอคอน หรือภาพกราฟฟิก (อันเล็กๆ) คำสั่ง (command), prompt (เช่น C:\> _ , A:\> _ เป็นต้น) และเครื่องมืออื่นๆ ที่สามารถทำให้ผู้ใช้ (user) และคอมพิวเตอร์มีปฏิสัมพันธ์กันได้
ความสำคัญของการออกแบบ user interface 2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง 3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ 4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ 5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้ ปัจจัยที่เกี่ยวกับคนในการออกแบบ user interface - Limited short-term memory คนสามารถจำ information ได้เพียงแค่ 7 อย่างในเวลาเดียวกัน ถ้านำเสนอข้อมูลมาก ผู้ใช้อาจรับไม่ได้ทั้งหมด - People make mistakes คนทำผิดได้ ไม่เพิ่มความบีบคั้น ที่จะทำให้เกิดความผิดพลาดมากขึ้น - People are different คนมีความสามารถที่แตกต่างกันผู้ออกแบบไม่ควรตัดสินจากความสามารถของตนเอง - People have different interaction preferences บางคนชอบ pictures บางคนชอบ text - ความคุ้นเคยของผู้ใช้ (User familiarity) ควรจะอยู่บนพื้นฐานแนวคิดและคำศัพท์ของผู้ใช้ไม่ใช่คำทางคอมพิวเตอร์ - ความคงเส้นคงวา (Consistency) ระบบควรมีความคงเส้นคงวาในระดับที่เหมะสม Commands และ menus ควรมี format ที่ตรงกัน เหมือนกัน - ความประหลาดใจน้อยสุด (Minimal surprise) ถ้าคำสั่งถูกใช้ตามแนวทางที่เป็นที่รับรู้กัน ผู้ใช้จะสามารถคาดเดาผลการทำงานของคำสั่งนั้นได้
- ผู้ใช้ระบบมักตัดสินระบบโดยพิจารณาจาก interface แทนที่จะเป็น functionality
- การออกแบบ interface ที่ไม่ดีอาจเป็นผลให้ user สร้าง errors ที่ร้ายแรงได้
- การออกแบบ user interface ที่ไม่ดีเป็นสาเหตุที่ทำให้หลายๆระบบไม่เคยถูกใช้งาน
- User interfaces ควรถูกออกแบบให้ตรงกับความเชี่ยวชาญ ประสบการณ์ และความคาดหวังของผู้ใช้
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้
(Human factors in interface design)
หลักการออกแบบ user interface
(User interface design principles)
อ้างอิง:
classweb.tu.ac.th/classes/491/...cs381.../ooad07_UI_Design.ppt
http://www.kanid.com/comvocab.php?cID=9
การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของมนุษย์
ชีวิตประจำวันของมนุษย์ทุกวันนี้ล้วนต้องเกี่ยวข้องกับคอมพิวเตอร์ และเทคโนโลยีอยู่ตลอดเวลา ตั้งแต่โทรศัพท์มือถือ เครื่องฝาก-ถอน เงินสดอัตโนมัติ หรือเครื่องจำหน่ายบัตรโดยสารของระบบขนส่งมวลชนต่าง ๆ เป็นต้น ระบบต่างๆ ถึงจะมีประสิทธิภาพการทำงานสูงเพียงไร หากผู้ใช้ไม่สามารถใช้ได้ก็เปล่าประโยชน์
Interface หมายถึง การเชื่อมต่อระหว่าง คอมพิวเตอร์ ที่ถ่ายโอนข้อมูลจากกันและกันได้ แต่มักนำมาใช้ในความหมายของ user interface ที่แปลว่า การติดต่อประสานระหว่างเครื่องคอมพิวเตอร์กับผู้ใช้ เช่น แป้นพิมพ์, จอภาพ ต่างก็เป็นตัวประสานกับผู้ใช้ทั้งสิ้น
มนุษย์เป็นปัจจัยสำคัญในการออกแบบ UI
- Limited short-term memory มนุษย์ไม่สามารถจดจำอะไรได้เยอะๆ จึงต้อง จำกัดส่วนตอบสนองให้สั้นๆ
- People make mistakes คนย่อมต้องมีข้อผิดพลาด
- People are different คนมีความแตกต่างกันไปทั้งร่างกายและจิตใจ
- People have different interaction preferences คนมีความแตกต่างด้านการตอบสนอง
หลักการออกแบบ UI (UI design principles)
การออกแบบ UI ต้องใช้บัญชีความต้องการประสบการณ์ และ ความสามารถของผู้ใช้ระบบ นักออกแบบควรทราบข้อจำกัดทางกายภาพ และ จิตใจของผู้คน (เช่น Limited short-term memory) และ ควรตระหนักว่า คนจะทำผิดพลาดในเรื่องใดบ้าง หลักการออกแบบ UI ข้างล่างนี้จะรองรับการออกแบบอินเตอร์เฟสหลักๆ
- User familiarity อินเตอร์เฟสขึ้นอยู่กับความคุ้นเคยของผู้ใช้ เช่น ระบบสำนักงาน ควรคิดถึง เอกสาร จดหมาย แล้วนำมาแทนที่ ไฟล์ ต่างๆ
- Consistency ระบบจะแสดงระดับความเหมาะสมและความมั่นคง เช่น คำสั่งและเมนูควรมีรูปแบบเดียวกันวรรคตอน คำสั่งจะคล้าย ฯลฯ
- Minimal surprise ถ้าคำสั่งเป็นคำสั่งที่คุ้นเคยแล้ว ผู้ใช้จะสามรถคาดการ การทำงานของคำสั่งได้
- Recoverability ระบบควรมีความยืดหยุ่น บางครั้งผู้ใช้อาจทำงานพลาด ควรจะมีการกู้คืนข้อมูลได้ และรวมไปถึงการ ลบ การสร้าง การย้าย และอื่นๆ
- User guidance จำเป็นต้องมี การช่วยเหลือ หรือ แนะนำการใช้งานระบบ หรือ Help
- User diversity เนื่องจากผู้ใช้มีความหลากหลาย จึงควรคำนึงถึง สถานที่ ความเป็นอยู่ ลักษณะ ของแต่ละพื้นที่ ที่เกี่ยวข้องกับระบบ
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
ปัญหาการออกแบบ (Design issues in UIs)
1. ข้อมูลความต้องการจากผู้ใช้ตรงกับระบบคอมพิวเตอร์หรือไม่
2. นำเสนอข้อมูลให้ผู้ใช้ได้อย่างเข้าใจหรือไม่
เรื่องที่ต้องพิจารณาในการออกแบบ User Interface
- เรื่องที่ต้องพิจารณาในการออกแบบ User Interface
- การออกแบบการจัดวาง (Layouts) ขององค์ประกอบบนหน้าจอ
- การออกแบบโครงสร้างของการป้อนข้อมูล (Structure Data Entry)
- การควบคุมความถูกต้องในการป้อนข้อมูล (Controlling Data Input)
- ข้อความตอบสนอง (Feedback Message)
- การแสดงส่วนช่วยเหลือ (Help)
- การออกแบบการควบคุมการเข้าถึงข้อมูลของผู้ใช้ (Access Control)
- การออกแบบลำดับการเชื่อมโยงจอภาพ (Dialogue Design)
ความสำเร็จของ UI จำแนกไว้ 3 ขั้นได้แก่
1. มีประโยชน์ (Useful) หรือกล่าวอีกนัยหนึ่งก็คือ ระบบที่ถูกพัฒนาขึ้นต้องสามารถทำงานได้ตรงตามวัตถุประสงค์ที่วางไว้ตั้งแต่เริ่มต้น
2. สะดวกต่อการใช้งาน (Usable) คือสามารถใช้งาน และเข้าใจได้ง่าย โดยมีความปลอดภัย และปราศจากข้อผิดพลาด (Error)
3. ความคุ้นเคย (Used) เป็นความสำเร็จสูงที่สุด เพราะมีความหมายรวมถึงความน่าใช้ หรือการทำให้ผู้ใช้เกิดความต้องการใช้ระบบอย่างจริงจัง
อ้างอิง:
1. http://nariopon.thport.com/?p=361
2. www.rtafa.ac.th/tid/sipat/cs424/ppt/01_HCI_intro.ppt
3. www.spu.ac.th/~surasak.mu/images/.../CSE322_Summary08_UIDesign.doc
4. http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm
5. http://guru.sanook.com/search/knowledge_search.php?q=interface&select=1
การออกแบบอินเตอร์เฟสที่เกี่ยวข้องกับศักยภาพของทั้งมนุษย์
การออกแบบอินเตอร์เฟส (InterfaceDesign)
อินเตอร์เฟส (Interface) กับเรื่องการออกแบบความสวยงามจะมีส่วนที่แตกต่างกันอยู่นิดหน่อยตรงที่ อินเตอร์เฟส คือสิ่งต่างๆในเว็บไซต์ที่ Audience สามารถเข้ามามีปฏิสัมพันธ์(Interaction) กับเว็บไซต์ได้ ส่วนเรื่องความสวยงามจะเป็นเรื่องที่ Audience มองเห็นและรู้สึกกับมันได้ แต่อาจจะไม่สามารถเข้าไปมีปฏิสัมพันธ์กับมันได้ ดังนั้นการออกแบบอินเตอร์เฟสไม่ว่าจะเป็น เมนู formต่างๆ หรือองค์ประกอบต่างๆที่สามารถมีปฏิสัมพันธ์กับมันได้ จะต้องออกแบบให้สามารถใช้งานได้โดยการเรียนรู้ด้วยตัวเองในเวลาอันสั้นได้ หรือสามารถใช้งานอินเตอร์เฟสนั้นได้โดยไม่จำเป็นต้องมีประสบการณ์ หรือไม่เคยใช้ อินเตอร์เฟสนั้นมาก่อน ตัวอย่างการออกแบบอินเตอร์เฟส ง่ายๆก็คือเรื่องของการใช้งาน Icon ที่เป็นรูปภาพต่างๆ โดยแต่ละ Icon จำเป็นที่จะต้องสื่อความหมายได้ชัดเจน เพื่อให้ Audience สามารถเข้าใจ และไปถึงปลายทางที่ต้องการได้อย่างถูกต้อง
วัตถุประสงค์หลักการออกแบบ User Interface
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
อ้างอิง:
1. http://samphan.ob.tc/-View.php?N=1
User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งมีกระบวนการที่เริ่มจากการรวบรวมข้อมูลที่เกี่ยวข้องตลอดจนภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์วิทยา นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อมาร่วมกันพัฒนากระบวนการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้ 1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น 2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง 3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ 4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ 5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้ การออกแบบ User Interface - สอดคล้อง/รองรับ พฤติกรรมการค้นคว้าของผู้ใช้ เช่น สะดุดตา สะดุดใจ สะดวก สบาย รวดเร็ว - เชื่อมโยงข้อมูลที่เป็นประโยชน์ไว้ด้วยกันทั้งหมด ส่วนต่อประสานกับผู้ใช้ (อังกฤษ: user interface, UI) หมายถึง สิ่งที่มีไว้ให้ผู้ใช้ใช้ในการกระทำกับระบบหรือสิ่งของต่างๆ ซึ่งอาจจะเป็นคอมพิวเตอร์ เครื่องจักร เครื่องกล อุปกรณ์ใช้ไฟฟ้าใดๆ หรือระบบที่มีความซับซ้อนอื่นๆ เพื่อให้สิ่งๆนั้นทำงานตามความต้องการของผู้ใช้ ส่วนต่อประสานกับผู้ใช้สามารถจัดได้เป็น 2 ประเภทใหญ่ได้แก่ http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm http://gotoknow.org/blog/useit/43505
ส่วนที่นำข้อมูลเข้า หรือส่วนสั่งงาน เรียกว่า อินพุต (input)
ส่วนที่ใช้แสดงผลลัพธ์ หรือส่วนที่ไว้รอคำสั่งจากผู้ใช้ เรียกว่า เอาต์พุต (output)
ส่วนต่อประสานกับผู้ใช้ในระบบคอมพิวเตอร์
ส่วนต่อประสานกับผู้ใช้ในทางคอมพิวเตอร์ นั้นโดยมากจะหมายถึง การแสดงภาพกราฟิก หรือข้อความ หรือเสียง ให้ผู้ใช้ได้รับทราบและช่วยในการควบคุมขั้นตอนการใช้งานของผู้ใช้ต่อโปรแกรมที่กำลังใช้งานอยู่ ผ่าน แป้นพิมพ์หรือคีย์บอร์ด หรือ เมาส์
อ้างอิง :
http://th.wikipedia.org/wiki
การออกแบบการอินเตอร์เฟส มีความสำคัญต่อผู้ใช้อย่างมาก ซึ่งศักยภาพของผู้ใช้งานเป็นปัจจัยหลักในการติดต่อกับคอมพิวเตอร์ เช่น ผู้ที่พิการทางสายตาแต่เค้ายังสามารถได้ยินเสียงได้และสัมผัสอักษรเบลล์ได้ ผู้พิการทางการได้ยินแต่ก็ยังสามารถมองเห็นได้ ดังนั้น การออกแบบอินเตอร์เฟสจึงเป็นเรื่องสำคัญในการอำนวยความสะดวกให้กับผู้ใช้ในศักยภาพที่แตกต่างกันออกไป ดังนั้นการออกแบบอินเตอร์เฟสต้องคำนึกถึงความสะดวก เข้าใจง่าย และรู้เรื่องของสิ่งที่ต้องการจะสื่อไปยังผู้ใช้งาน ยกตัวอย่างเช่น งานสรรพากรซึ่งได้กำลังพัฒนาระบบ accessibility ซึ่งได้นำ 1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น 2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง 3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ 4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ 5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
1. ซอฟต์แวร์จำแนกเสียง (Speech Recognition) จะมีส่วช่วยให้ผู้ใช้ที่มีความพิการในด้านการใช้งานเมาส์หรือคีย์บอร์ด
2. ซอฟต์แวร์ขยายภาพ (Screen Magnification) จะมีส่วนช่วยให้ผู้ที่มีความบกพร่องในระยะการมองเห็น
3. ซอฟต์แวร์ในการอ่านเนื้อหาบนจอ (Screen Reader) จะมีส่วนช่วยอย่างสูงสำหรับผู้ที่มีความพิการทางด้านการมองเห็น โดยจะทำการเก็บการกระทำต่างๆ ที่เกิดขึ้นบนหน้าจอแสดงออกด้วยทางใดทางหนึ่งให้แก่ผู้ใช้ได้รับรู้
4. ซอฟต์แวร์ช่วยแปล (Translation Software) จะช่วยในการเข้าถึงแก่บุคคลใดๆ ที่มีปัญหาด้านการรับรู้ทางภาษา
ซึ่งซอฟแวร์เหล่านี้เป็นตัวช่วยในการอินเตอร์เฟสกับผู้ที่มีข้อจำกัดด้านความพิการทางร่างกายด้านต่างๆ
User Interface Design หรือ Human-Computer Interaction คือ การออกแบบส่วนต่อประสานกับผู้ใช้ ระหว่างผู้ใช้กับคอมพิวเตอร์ ซึ่งมีกระบวนการที่เริ่มจากการรวบรวมข้อมูลที่เกี่ยวข้องตลอดจนภูมิความรู้ของนักจิตวิทยา นักการศึกษา นักออกแบบกราฟิก ช่างเทคนิค ผู้เชี่ยวชาญด้านมนุษย์วิทยา นักออกแบบสถาปัตยกรรมข้อมูล และนักสังคมศาสตร์ เพื่อมาร่วมกันพัฒนากระบวนการออกแบบพัฒนาส่วนต่อประสานให้ใช้งานได้อย่างมีประสิทธิภาพ
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้
ที่มา
1.http://www.ktpbook.com/product/ProductDetail.asp?Id=9747015089&typeid=1&types=%หนังสือ
2. http://th.wikipedia.org/wiki/เว็บแอ็กเซสซิบิลีตี

การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
การออกแบบ User Interface จะพิจารณาปะสิทธิภาพในการโต้ตอบระหว่างผู้ใช้และระบบเป็นหลัก ซึ่งรูปแบบของการโต้ตอบมีหลายรูปแบบดังนี้
1.การโต้ตอบด้วยการพิมพ์คำสั่ง ( Command Line Interaction ) Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง Principle หลักการในการออกแบบส่วนต่อประสาน (Ben, 2005) 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 ระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป
2.การโต้ตอบด้วยเมนูคำสั่ง ( Menu Interaction)
3.การโต้ตอบด้วยแบบฟอร์ม ( Form Interaction)
4.การโต้ตอบผ่านวัตถุ (Object-Based Interaction)
5.การโต้ตอบด้วยภาษามนุษย์ ( Natural Language Interaction)
การออกแบบอินเตอร์เฟส
มีปัจจัยสามปัจจัยที่ควรพิจารณาสำหรับผู้ใช้ที่ประสบความสำเร็จในการออกแบบอินเตอร์เฟซการพัฒนาปัจจัย visability ปัจจัยการยอมรับและ
ปัจจัยที่ช่วยพัฒนาโดยการปรับปรุงการสื่อสารภาพ เหล่านี้รวมถึงข้อ จำกัด แพลตฟอร์ม, ชุดเครื่องมือและไลบรารีส่วนสนับสนุนการสร้างต้นแบบอย่างเร็วและ customizability
ปัจจัย Visability คำนึงถึงปัจจัยมนุษย์และแสดงภาพ strong identity เหล่านี้รวมถึงความสามารถของมนุษย์ตัวผลิตภัณฑ์รุ่นแนวคิดที่ชัดเจนและเป็นตัวแทนหลายๆ
รวมเป็นปัจจัยการยอมรับเป็นฐานติดตั้งการเมืององค์กรตลาดต่างประเทศและเอกสารประกอบการฝึกอบรม
ภาษาที่แสดง
ภาษาที่แสดงหมายถึงทุกเทคนิคกราฟิกที่ใช้ในการสื่อสารข้อความหรือบริบท ซึ่งได้แก่
• รูปแบบ : รูปแบบสัดส่วนและกริด 2 - D และ 3 - D องค์กร
• วิชาทำตัวพิมพ์เลือก : ของอักษรและ typesetting รวมถึงความกว้างคงที่ตัวแปรและความกว้าง
• สีและเนื้อสีเนื้อและไฟที่นำเสนอข้อมูลที่ซับซ้อนและ pictoral จริง
• : สัญญาณไอคอนจินตภาพและสัญลักษณ์จากของจริงถ่ายรูปกับนามธรรม
• Animation : พลวัตหรือการเคลื่อนไหวแสดง; สิ่งที่สำคัญมากสำหรับที่เกี่ยวกับภาพวิดีโอ
• ลำดับ : แนวทางรวมถึงเล่าเรื่องภาพ
• เสียง : cues abstract, เสียง, คอนกรีตหรือดนตรี
• identity Visual : เพิ่มเติมกฎเฉพาะที่ยืมสม่ำเสมอรวมถึงส่วนติดต่อผู้ใช้ การตัดสินใจโดยรวมเป็นอย่างไร บริษัท หรือสายผลิตภัณฑ์ที่แสดงตัวเองในภาษามองเห็น
หลักการออกแบบ User Interface
มีภาษาที่สามหลักการพื้นฐานที่เกี่ยวข้องมองเห็นได้ในการใช้งาน
• จัดการ : ให้ใช้โครงสร้างความคิดที่ชัดเจนและสอดคล้องกับ
• ประหยัด : ทำมากที่สุดด้วยจำนวนน้อยที่สุดของตัวชี้นำ
• สื่อสาร : การแข่งขันนำเสนอเพื่อความสามารถของผู้ใช้ [1]
อ้างอิง:
1.http://translate.google.co.th/translate?hl=th&langpair=en%7Cth&u=http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
concept หลักของการพัฒนาโปรแกรมประยุกต์ด้วย Visual Basic ก็คือ การสร้างองค์ประกอบต่าง ๆ ของโปรแกรมประยุกต์ด้วยคอนโทรล โดยมีรูปแบบที่สื่อด้วยภาพ หรือ ที่เรียกกันติดปากว่า การออกแบบอินเตอร์เฟส ต่อมาก็คือการเขียนชุดคำสั่งเพื่อรองรับเหตุการณ์ต่างๆ ที่อาจเกิดขึ้นได้ ซึ่งจะแบ่งออกเป็น 5 ขั้นตอนใหญ่ ๆ คือ
1. เลือกชนิดของโปรแกรมประยุกต์
2. สร้างยูสเซอร์อินเตอร์เฟส (หรือส่วนติดต่อกับผู้ใช้ อาจเรียกสั้นๆว่า อินเตอร์เฟส)
3. เขียนชุดคำสั่งเพื่อรองรับเหตุการณ์ต่างๆ ที่อาจเกิดขึ้นกับแต่ละคอนโทรลหรืออ็อบเจก
4. การทดสอบ ตรวจสอบ และดักจับข้อผิดพลาด
5. คอมไพล์โปรเจ็กต์ให้เป็นโปรแกรมประยุกต์ที่สมบูรณ์ (เช่น *.exe หรือ *.dll เป็นต้น)
การใช้งานคอนโทรลในการสร้างอินเตอร์เฟส ในการออกแบบอินเตอร์เฟสนั้น ต้องออกแบบอินเตอร์เฟสให้สามารถแสดงผลลัพธ์ออกมาให้เห็นได้ชัดเจน และสามารถควบคุมการเคลื่อนไหวบางส่วนได้ จึงได้มีการสร้างส่วนที่แสดงผลลัพธ์ เพื่อสำหรับดูการเคลื่อนที่ต่างๆไว้สองถึงตำแหน่ง โดยจะประกอบด้วยพื้นที่ส่วนที่แสดงผลลัพธ์หลัก และ ส่วนที่แสดงผลลัพธ์ย่อย โดยผู้ใช้สามารถเลือกเปลี่ยนการแสดงผลไปมาระหว่าง หน้าจอหลัก และหน้าจอย่อยไปมาได้
จุดเริ่มต้นของการพัฒนาโปรแกรมประยุกต์ด้วย Visual Basic ก็คือการนำคอนโทรลชนิดต่างๆ ที่ Visual Basic จัดเตรียมไว้นำมาสร้างอินเตอร์เฟส การพัฒนาโปรแกรมประยุกต์ที่ดี ทำได้โดยการออกแบบอินเตอร์เฟสที่ใช้งานง่าย เป็นมิตรกับผู้ใช้ จะส่งผลให้ระยะเวลาในการพัฒนาโปรแกรมประยุกต์ลดลงไปได้มากทีเดียว เพราะสิ่งที่เหลืออยู่คือการเขียนโค้ดเพื่อทำให้โปร เจ็กต์ทำงานให้สมบูรณ์มากที่สุด
อ้างอิง http://cpe.kmutt.ac.th/previousproject/2004/11/design.html
http://campus.en.kku.ac.th/project/2003/COE2003-09/conceptual.htm
http://theera.exteen.com/20061017/application
การออกแบบ User Interface มีวัตถุประสงค์หลัก ดังนี้
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
การออกแบบ User Interface
- สอดคล้อง/รองรับ พฤติกรรมการค้นคว้าของผู้ใช้ เช่น สะดุดตา สะดุดใจ สะดวก สบาย รวดเร็ว
- เชื่อมโยงข้อมูลที่เป็นประโยชน์ไว้ด้วยกันทั้งหมด
ประโยชน์จากการออกแบบส่วนของเมนูการใช้งานหรือการติดต่อที่มีประสิทธิภาพ - รูปแบบการแสดงผลที่มีประสิทธิภาพย่อมทำให้การนำ ข้อมูลไปใช้ในระบบสนับสนุนการตัดสินใจมีประสิทธิภาพมากขึ้น - การออกแบบวิธีการใช้งานเครื่องมือและอุปกรณ์ที่ใช้ งานภายในบ้าน เช่น กล้องถ่ายรูปดิจิตอลเพื่อสร้าง ความสัมพันธ์ที่ดีในครอบครัว - การใช้งานระบบ www ผ่านทางเว็บไซต์ที่รวบรวมข้อมูลทำให้ผู้ใช้สามารถค้นหาข้อมูลที่ต้องการได้ เช่น www.yahoo.com ที่มีการออกแบบการใช้งานง่าย แยกเป็นหมวดหมู่ - การออกแบบเว็บไซต์พาณิชย์อิเล็กทรอนิกส์ที่มีประสิทธิภาพ สามารถช่วยให้ผู้ใช้งานติดต่อซื้อขายสินค้าได้ง่าย เป็นประโยชน์ต่อองค์กรธุรกิจ เช่น www.amazon.com การออกแบบส่วนของการติดต่อกับผู้ใช้ที่ประสบความสำเร็จต้องอาศัยความรู้จากหลายสาขาวิชา - การเขียนคำบรรยาย มีงานวิจัยจากวงการศึกษาและ อุตสาหกรรมได้พัฒนาระบบการอธิบายเกี่ยวกับฟังก์ชัน หรือคำสั่งในการทำงาน การออกแบบรูปแบบของการ คาดการณ์เกี่ยวกับการใช้งานระบบ การออกแบบคำแนะนำการใช้งาน ตลอดจนการออกแบบส่วนให้ความช่วยเหลือ - ข้อมูลต่าง ๆ เกี่ยวกับการออกแบบ เช่นทฤษฎี การเคลื่อนไหว การรับรู้ การจดจำ - การคำนึงถึงผลกระทบด้านสังคม การประหยัด ทรัพยากรด้านข้อมูล เวลา การออกแบบควรคำนึงถึงจริยธรรมการใช้งาน ซึ่งจัดเป็น ความสำคัญยิ่งต่อแนวความคิดในการออกแบบระบบ - ใช้เทคโนโลยีต่าง ๆ เข้ามาประยุกต์เพื่อเพิ่ม ประสิทธิภาพในการออกแบบ เช่น การใช้ระบบเสียง ภาพ 3 มิติ ภาพเคลื่อนไหว ภาพนิ่ง ทั้งเนื้อหาข้อมูล เช่น รูปแบบการนำเสนอวีดีโอข่าวของ www.yahoo.com - วิธีการสมัยใหม่ โดยแสดงผลลักษณะเสมือนจริง ทั้งแสดงผลระยะไกล ซึ่งสามารถช่วยเพิ่มความพอใจ การใช้งานแก่ผู้ใช้ เช่น MS-Power Point ผู้ใช้เลือกรูปแบบการนำเสนอตามต้องการได้
อ้างอิง :
1.pirun.ku.ac.th/~g4966062/User-Interface-Design.doc
1. การออกแบบ 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.?
2. วัตถุประสงค์หลัก การออกแบบ User Interface ดังนี้
1. มีลักษณะเป็นหน้าต่างและคำสั่งในการทำงานคล้ายโปรแกรมทั่วๆไปที่ Run บน Windows เพราะผู้ใช้งานคอมพิวเตอร์ส่วนใหญ่คุ้นเคยกับการใช้ Windows อยู่แล้วทำให้ผู้ใช้สามารถใช้โปรแกรมได้สะดวกมากขึ้น
2. การรับคำสั่งจากผู้ใช้เน้นที่การกดปุ่มที่ได้เตรียมไว้ให้ โดยปุ่มจะมีข้อความหรือรูปภาพที่สื่อความหมายของคำสั่งให้ได้มากที่สุด ผู้ใช้เพียงแต่คลิกเมาส์ที่ปุ่มคำสั่งก็สามารถใช้งานโปรแกรมได้โดยไม่ต้องจดจำคำสั่งและพิมพ์คำสั่งเอง
3. เพื่อความสะดวกในการใช้งาน สามารถเลือกความเร็วในการแสดงจากลำดับรายการ
4. ผู้ใช้จะป้อนข้อความที่จะแสดงออกได้ที่ช่องข้อความ
5. ใช้สีสันสวยงามดึงดูดใจให้น่าใช้
- สอดคล้อง/รองรับ พฤติกรรมการค้นคว้าของผู้ใช้ เช่น สะดุดตา สะดุดใจ สะดวก สบาย รวดเร็ว
- เชื่อมโยงข้อมูลที่เป็นประโยชน์ไว้ด้วยกันทั้งหมด
3. Universal Usability ในการออกแบบส่วนต่อประสานเราควรคำนึงถึงเรื่องใดบ้าง
1. ความหลากหลายของผู้ใช้งานทั้งทางกายภาพและสภาพแวดล้อม
2. บุคลิกของผู้ใช้ที่แตกต่างกัน / ความต่างระหว่างบุคคล
3. ความแตกต่างของปัญญาและความสามารถในการรับรู้
4. ความหลากหลายทางเชื้อชาติและวัฒนธรรม
5. ผู้ใช้งานที่ไร้ความสามารถหรือพิการ
6. อายุของผู้ใช้งาน
7. การออกแบบสำหรับเด็ก
8. การปรับให้เข้ากับซอฟท์แวร์และฮาร์ดแวร์
4. Principle หลักการในการออกแบบส่วนต่อประสาน
1. ประเมินทักษะผู้ใช้งาน เพราะผู้ใช้งานมีหลากหลาย การรู้จักผู้ใช้ เป็นหลักการแรกที่ต้องทำ (Hansen, 1971) เราอาจแบ่งทักษะผู้ใช้งานออกเป็น 3 ส่วนใหญ่ ๆ คือ ผู้ใช้มือใหม่ (Novice or first-time user) ผู้ใช้ระดับกลาง (Knowledgeable intermittent users) และผู้เชี่ยวชาญ (Expert frequent user) หากจะออกแบบให้ใช้งานได้กับกลุ่มใดกลุ่มหนึ่งจะเป็นเรื่องง่าย แต่ถ้าต้องออกแบบให้คนทั้งสามกลุ่มเข้าใจร่วมกันได้ จะเป็นเรื่องที่ยากและท้าทายมาก
2. แจกแจงงาน นักออกแบบต้องแจกแจงหน้าที่และงานของระบบให้ละเอียดก่อน แล้วเรียงลำดับว่างานไหนมีความสำคัญก่อน งานไหนสำคัญหลัง
3. เลือกแบบการปฏิสัมพันธ์ การปฏิสัมพันธ์มีได้หลายรูปแบบนักออกแบบต้องเลือกให้เหมาะสม เช่น
o Direct manipulation การจับต้องสัมผัสโดยตรง เช่น การลากไอคอนลงไปบนถังขยะ แสดงว่าต้องการลบ มีข้อดีคือ ภาพแสดงถึงหน้าที่อย่างชัดเจน เรียนรู้ได้ง่าย จดจำได้ง่าย หลีกเลี่ยงความผิดพลาด สนับสนุนการค้นหา และ ก่อให้เกิดการปฏิบัติตาม มีข้อเสียคือ สร้างยาก และต้องการการแสดงผลที่เป็นกราฟิกและต้องอาศัยเครื่องชี้
o Menu Selection การเลือกเมนู มีข้อดีคือ เรียนรู้ได้ง่าย ลดการใช้คียบอร์ด เกิดการตัดสินใจที่มีโครงสร้าง ลดการเกิดข้อผิดพลาด มีข้อเสียคือ เมนูที่มากไปทำให้การนำเสนอไม่ดี ทำให้ผู้ใช้งานที่คล่องใช้งานได้ช้าลง ใช้พื้นที่ในการแสดงผลมาก
o Form Fill in การเติมคำลงในฟอร์ม มีข้อดีคือ การกรอกข้อมูลมีความง่าย ฝึกฝนได้โดยไม่ยาก และมีคำแนะนำที่สะดวก มีข้อเสียคือ ใช้พื้นที่แสดงผลมาก
o Command Language ภาษาสั่งการ เป็นการใช้ตัวอักษรในการสั่งการ ส่วนใหญ่จะใช้กับผู้ใช้ที่มีความเชี่ยวชาญ มีข้อดีคือ ยืดหยุ่น ดึงดูดผู้ใช้ระดับสูง ผู้ใช้สามารถสร้างคำสั่งเองได้ มีข้อเสียคือ มีข้อผิดพลาดได้ง่าย ต้องการการอบรมและการจดจำสูง
o Natural Language ภาษาพูด หรือภาษาที่ใช้โดยธรรมชาติ มีข้อดีคือ สร้างสาระสำคัญของระบบการเรียนรู้ มีข้อเสียคือ ต้องแยกแยะบทสนทนา อาจไม่แสดงถึงเนื้อหา อาจต้องพิมพ์มาก และคาดเดาไม่ได้
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
ระบบที่ดีต้องทำงานได้โดยไม่ต้องอาศัยคู่มือการใช้ แต่ก็ยังมีความจำเป็น ข้อมูลที่ให้ต้องหาง่ายเจาะจงไปยังหน้าที่ต่าง ๆ มีการเรียงลำดับที่เป็นนามธรรมและไม่หนาจนเกินไป
5. หลักการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ คำนึงถึงความเหมาะสมกับกลุ่มบุคคลเป้าหมายผู้ใช้และลักษณะของเว็บไซต์ ความสะดวกในการใช้งาน
องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง
1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มีกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกินไปทำให้วุ่นวาย
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็นเว็บไซต์ของทาง ราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ
4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ
เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความชอบของแต่ละบุคคล
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา สามารถแสดงผลได้ทุกระบบปฏิบัติการและความละเอียดหน้าจอต่างๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัฐสำหรับผู้ใช้ที่มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้
9. ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง ลิงค์ต่างๆ จะต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง
พื้นฐานในการออกแบบเว็บไซต์ที่ดี
- มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ
- มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ
- ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว ใช้งานที่สะดวก เข้าใจง่าย
6. ข้อควรพิจารณาในเรื่องการออกแบบหน้าจอ
1. ความน่าสนใจของเนื้อหาควรเป็นประเด็นหลักของการออกแบบ ควรทุ่มเทพื้นที่ บนเว็บไซต์เพื่อเนื้อหา อย่างน้อยครึ่งหนึ่ง หรือเกือบ 80 เปอร์เซ็นต์ มากกว่าเรื่อง navigation ที่ควรจะมีสัดส่วนต่ำกว่า 20 เปอร์เซ็นต์
2. พื้นที่สีขาวทำให้คนใช้เข้าใจการจัดหมวดหมู่เนื้อหา นำสายตาคนใช้ได้ดี และเสียเวลาดาวน์โหลดน้อยกว่าเมื่อเปรียบเทียบกับการใช้เส้นแบ่ง
3. หลักการทั่วไปของการออกแบบ user interface คือ ใช้องค์ประกอบการออกแบบให้น้อยๆ เพื่อให้หน้าเว็บมีความเรียบง่ายและใช้เวลาดาวน์โหลดน้อยลง
4. ควรออกแบบหน้าให้สามารถใช้งานได้กับหน้าจอทุกประเภท เพราะเราไม่รู้ว่าคนใช้ใช้หน้าจอขนาดไหน
5. คนออกแบบต้องกำหนดหน้าในลักษณะที่ช่วยให้คนใช้สามารถใช้ประโยชน์จากหน้านั้นได้สอดคล้องกับสภาวการณ์ที่ต่างกันของผู้ใช้แต่ละคน บางคนจอใหญ่ บางคนจอเล็ก บางคนชอบใช้ตัวอักษรขนาดใหญ่ บางคนขนาดเล็ก หน้าที่ออกแบบจะต้องทำงานได้ดีกับทุกขนาด คือไม่กำหนดขนาดตายตัว แต่กำหนด Layout เป็นเปอร์เซ็นต์ของพื้นที่ที่มีอยู่บนหน้า รวมไปถึงการออกแบบให้สามารถพิมพ์งานจากหน้าเว็บ ออกมาได้ในสัดส่วนที่พอดี มีเนื้อหาครบถ้วน
6. การออกแบบอย่าไปมุ่งเน้นเรื่องการอัพเกรดหรือใช้เทคโนโลยีใหม่ล่าสุดอยู่เสมอ เพราะปัจจุบันนักออกแบบตระหนักแล้วเว็บไซต์ของตนควรจะสามารถทำงานกับ เทคโนโลยีตัวเก่าได้ต่อไป ซึ่งเป็นผลมาจากตัวผู้ใช้ทั่วๆไปที่ไม่ใช่นักคอมพิวเตอร์ ยังคงใช้โปรแกรมเบราว์เซอร์ตัวเก่าที่ยังทำงาน และความแตกต่างระหว่างเทคโนโลยีเก่าใหม่ ในปัจจุบันไม่ได้มีมากมาย แถมปัจจุบันคนใช้คอมพิวเตอร์เป็นคนทั่วๆไปมีมากขึ้น ไม่ได้จำกัดอยู่เฉพาะนักเล่นคอมพิวเตอร์ที่แข่งกันว่าเครื่องใครมีเทคโนโลยี ดีกว่ากัน
อ้างอิง :
1. Shneiderman Ben, Plaisant Catherine. Design the user interface : Strategic for effective human-computer interaction. Pearson Education, 2005.
2. http://www.ideaasset.com/index.php/edtech/2009-05-28-21-57-08/55-user-interface-design-.html
3. http://nariopon.thport.com/?p=361