(15)แนวทางการออกแบบสภาพแวดล้อมสำหรับการแสดงผลต่อผู้ใช้

  ในการพัฒนาเว็บข้อมูลความรู้ชุมชน(ประชาชน) โดยคนของชุมชนนั้น การจัดเก็บและเผยแพร่ผ่านกลไกของ Web Application ของ Google ส่วนบุคคล หรือประเภทการศึกษา (Google Workspace for Education Fundamentals)  ซึ่งมีเครื่องมือมากมาย โดยไม่เสียค่าใช้จ่าย ทั้งในส่วนการพัฒนาสร้างหน้าเว็บ (Web page) พื้นที่จัดเก็บข้อมูลเว็บ (Web Server) และการเผยแพร่(ออนไลน์) ในรูปแบบเว็บไซต์ (Website) นอกจากนี้รูปแบบและกระบวนการสร้าง ยังสร้างสรรงานได้ง่าย ซึ่งการพัฒนาเราจะยึดมาตรฐานขององค์ประกอบของเว็บทั่วๆไปเป็นหลักเบื้องต้น

ในการสร้างหน้าเว็บ (Web page)หรือเอกสารเว็บ (Web Document) แต่ละหน้าเว็บ จะมีองค์ประกอบต่างๆที่ร่วมกันแสดงผลเป็นหน้าข้อมูล ซึ่งองค์ประกอบ ดังกล่าว แยกออกได้ ดังนี้

1.ข้อความ ตัวอักษร หรือสัญลักษณ์
2.ภาพ
3.Interface
4.สื่อมัลติมีเดีย
5.ส่วนสนับสนุนอื่นๆ

สำหรับในตอนนี้ จะกล่าวถึงเรื่องราวของสภาพแวดล้อมของการแสดงผลต่อผู้ใช้ หรือ Interface 

Interface  Design เป็นอีกคำหนึ่งที่ใช้กันในวงการคอมพิวเตอร์ ทั้งในส่วนของการออกแบบโปรแกรม การออกแบบสื่อ การออกแบบเว็บ และอีกหลายๆประเภท  แต่ในที่นี้ เราจะหมายถึง การออกแบบส่วนแสดงผลหน้าจอ  ซึ่งพอพูดถึงตรงจุดนี้ จะพบอีกคำที่มีความหมายโดยตรง ก็คือ User Interface Design หรือ UI ในวงการนักออกแบบอาชีพ หากพูดถึง UI  ก็จะไปเจอคู่แฝดอีกอย่างนั่นคือ UX หรือ User Experience ท่าทางจะไปไกล (ไว้ศึกษาในบทเรียน อินโฟกราฟิก แล้วกัน) ขอวกกลับมาพูดกันแบบบ้านๆ ผสมวิชาการสักนิด เอา แค่ UI (User Interface Design ) คำนี่คำเดียว

สรุปเอาโดยย่อ UI (User Interface Design ) การออกแบบส่วนแสดงผล ที่ผู้ใช้งานเห็นบนหน้าจอในทุกอุปกรณ์ (คอมพิวเตอร์ แท็บเล็ต และสมาร์ทโฟน)

อะไรบ้างที่เกี่ยวข้องกับ UI (User Interface Design )
1. ธีม หรือรูปแบบ (Theme)
2. สี (Color)
3.ส่วนโต้ตอบ (Interaction)

เป็นตัวอย่างสี่ภาพจากหน้าแสดงผลของเว็บ การฝึกอบรมหลักสูตร การสร้างเว็บข้อมูลความรู้ชุมชน

1. ธีม หรือรูปแบบ (Theme)
พูดง่ายๆก็คือ ลักษณะทางกายภาพทั้งหมดในหน้าเว็บ ตั้งแต่ ส่วนหัว จนถึงส่วนท้ายของหน้าเว็บ ไม่ว่าเว็บไซต์คุณจะมีเอกสารเว็บหรือ page กี่หน้าก็ตาม แต่ทุกๆหน้า ต้องยึดลักษณะแสดงผลที่เป็นแบบเดียวกันเสมอ ไม่ว่าจะเป็นลักษณะหัวเว็บ รูปแบบตัวอักษร สี รวมถึงส่วนท้ายเว็บ เป็นต้น ดัง 2 ตัวอย่างด้านล่าง

เป็นตัวอย่างสี่ภาพจากหน้าแสดงผลของเว็บ การฝึกอบรมหลักสูตร การพัฒนาสื่อการเรียนรู้ด้วย Microsoft PowerPoint

2. สี (Color)
บางคนอาจกล่าวว่า สี เป็นส่วนหนึ่งของธีมหรือรูปแบบ ซึ่งก็อาจจะจริง แต่เนื่องจาก ปัจจุบัน มีการออกแบบใช้โทนสีที่แตกต่างกัน ในแต่ละกลุ่มของเนื้อหา แต่ยืนอยู่บน ธีมหรือลักษณะภาพรวมเดียวกัน 

ตัวอย่าง (ตัดเฉพาะส่วนหัว) ดูที่หน้าแรก (Home) ใช้โทนสีฟ้าออกเขียวทั้งหน้า พอลิ้งค์ไปกลุ่มเนื้อหาผ่านเมนูไปที่หน้าของผู้เรียน (students) ก็กลายเป็นโทนสีส้มทั้งหน้าเช่นกัน  ถ้าไปทีมงาน (Staff) จะออกเป็นสีเทา สภาพของ interface แบบโทนสีก็ประมาณนี้

โทนสีเขียว

โทนสีน้ำเงิน

โทนสีแดง

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

ไม่ว่าจะเป็นสีเดี่ยว หรือกลุ่มสี ท่านสามารถทดสอบสีที่ท่านชอบได้จากวงล้อสี (Color Wheel) ถ้าสนใจหรือโดนใจสีใดก็บันทึกเก็บค่าสีนั้นไว้ด้วยนะครับ เผื่อเวลาสร้างเว็บจริงๆ จะได้ นำค่าสีนั้นมาใช้

3.ส่วนโต้ตอบ (Interaction)
นับเป็นอีกองค์ประกอบสำคัญของเว็บ เป็นส่วนในการปฏิสัมพันธ์ หรือการสื่อสารกับผู้ใช้  อาทิ  การไปลิ้งค์ใน site หรือ การไปยังหน้าเนื้อหาอื่นๆ หรือการโดดออกนอก site ไปยังหน้าเว็บอื่น หรือรูปแบบการป้อนข้อมูล ด้วยวิธีคลิกเลือก หรือการพิมพ์ข้อมูล เป็นต้น 

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

ขนาดอักษร ของส่วน ลิ้งค์ข้อมูล ควรต้องมีขนาดเหมือนกันทั้งหมด
สีตัวอักษรของส่วนลิ้งค์
รูปแบบการลิ้งค์ (ตัวอักษรเปลี่ยนสี หรือมีเส้นใต้แสดงถึงบรรทัดข้อความที่ลิ้งค์)