บทที่ 6 การออกแบบหน้าเว็บ PAGE DESIGN
หลักสำคัญในการออกแบบหน้าเว็บ คือการใช้รูปภาพและองค์ประกอบต่าง ๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของหน้าเว็บที่หน้าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
แนวคิดในการออกแบบหน้าเว็บ มี 4 เทคนิค
1.เรียนรู้จากเว็บไซต์ต่าง ๆ ( สิ่งที่ได้คือรูปแบบและเทคนิคใหม่ ๆ )
2.ประยุกต์รูปแบบจากหนังสือพิมพ์
3.ใช้แบบจำลองเปรียบเทียบ (metaphor )
4.ออกแบบอย่างสร้างสรรค์
การใช้แบบจำลองเปรียบเทียบ (metaphor) แบบจำลองเปรียบเทียบคือ การใช้สิ่งที่คุ้นเคยในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็นรูปภาพจากสิ่งพิมพ์หรือร้านขายของ สิ่งสำคัญคือ รูปแบบที่เลือกมาใช้ต้องเป็นลักษณะที่คนคุ้นเคย เข้าใจง่าย สนับสนุนแนวคิดและส่งเสริมกระบวนการของเว็บ
การใช้แบบจำลองมีด้วยกัน 3 ประเภท
1.แบบจำลองการจัดระบบ ( Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคยเพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ เช่น เว็บร้ายขายหนังสือ สามารถจำลองการแบ่งหมวดหมู่หนังสือได้ตามที่ใช้ในร้านหนังสือจริง
2.แบบจำลองการใช้งาน ( Functional metaphor ) คือเชื่อมโยงการใช้งานที่สามารถทำได้จริงในชีวิตจริงกับการใช้งานบนเว็บ เช่น เว็บโรงภาพยนตร์ ที่ควรให้ผู้ใช้สามารถดูโปรแกรมหนัง จองที่นั่งล่วงหน้าได้เหมือนกับโรงภาพยนตร์จริง
3.แบบจำลองลักษณะที่มองเห็น (Visual metaphor ) คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะคุ้นเคยกับคนทั่วไป เช่น เว็บไซต์ที่เกี่ยวกับดนตรี ที่ให้บริการฟังเพลงบนเว็บได้ การนำปุ่มเล่นเพลง ปิดเพลง ที่ทุกคนรู้จักจากเครื่องเสียงมาใช้ ให้เข้าใจง่ายและรวดเร็ว
หลักการออกแบบหน้าเว็บ มี 7 หลักการ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ (Visual Hierarchy) คือ
จัดตำแหน่งและลำดับองค์ประกอบ แสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ เนื่องจากภาษาส่วยใหญ่อ่านจากบนลงล่าง จากซ้ายไปขวา จึงควรจัดวางสิ่งที่สำคัญไว้ส่วนบนหรือด้านซ้ายของหน้า
สีและความแตกต่างของสี การใช้สีที่แตกต่างกันอย่างชัดเจนจะสามารถดึงดูดความสนใจจากผู้ใช้ให้มองเห็นและตอบสนองได้อย่างรวดเร็ว
ภาพเคลื่อนไหว เป็นสิ่งที่ดึงดูดได้เป็นอย่างดี แต่ถ้าใช้ภาพเคลื่อนไหวมากเกินไปจะทำให้มีจุดสนใจบนหน้าจอมากจนตัดสินใจได้ยากว่าสิ่งไหนสำคัญ
2.สร้างรูปแบบ บุคลิกและสไตล์
รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
บุคลิก การมีบุคลิกของเว็บที่เหมาะสมกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดีขึ้น
สไตล์ คือลักษณะการจัดโครงสร้างหน้าเว็บ รูปแบบกราฟิก ชนิดและการจัดตัว อักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่น ๆ ซึ่งไม่ควรสร้างสไตล์ของเว็บตามใจชอบ แต่ควรคำนึงถึงความเหมาะสม
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชันทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ในทางเทคนิคเราสามารถใช้ cascading Style Sheet ช่วยในการกำหนดสไตล์มาตรฐานได้ ข้อควรระวังในบางครั้งความเหมือนกันอาจเป็นข้อจำกัดและทำให้น่าเบื่อ วิธีแก้ไขคือ อาจทำให้หน้าเว็บมีสีหรือลักษณะที่ต่างกันเล็กน้อย
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนของหน้า หมายถึงส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้าบราวเซอร์โดยที่ยังไม่มีการเคลื่อนไหวหน้าจอใด ๆ ประกอยด้วย
ชื่อของเว็บ เพื่อให้ผู้ใช้รู้ว่ากำลังอยู่ในเว็บอะไร
ชื่อหัวเรื่อง หรือชื่อแสดงหมวดหมู่ของเนื้อหาที่ปรากฏ
สิ่งสำคัญ ที่เราต้องการโปรโมตเว็บ
ระบบเนวิเกชัน เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที
5.สร้างจุดสนใจด้วยความแตกต่าง
เว็บที่เน้นกราฟิกหรือตัวอักษรมาก ๆ จะทำให้ยากต่อการมอง เราควรใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนต่าง ๆ ของเนื้อหา
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
เนื้อหาจำเป็นต้องมีรูปแบบที่ดูง่าย แยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป ควรจัดตัวหนังสือให้อยู่ในคอลัมน์ที่ไม่กว้างเกินไป รวมถึงการจัดวางเนื้อเรื่องและหัวข้ออย่างเป็นระบบและชัดเจน
7.ใช้กราฟิกอย่างเหมาะสม
ควรใช้การฟิกที่เป็นไอค่อน ปุ่ม ลายเส้น และสิ่งอื่น ๆ ตามความเหมาะสมและไม่มากจนเกินไป เพื่อหลีกเลี่ยงโครงสร้างของหน้าที่ยุ่งเหยิงและไม่เป็นระเบียบ
ลักษณะการใช้งานหน้าเว็บ เราสามารถใช้ประโยชน์จากเว็บได้ 2 ทาง
1. การใช้สื่อโดยตรงให้อ่านบนหน้าจอ ควรมีขนาดกะทัดรัดไม่ยืดยาวหรือใช้การฟิกมากเกินไป
2. การใช้สื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บรวบรวมเพื่ออ่านในภายหลัง ควรออกแบบ ให้มีการใช้ประโยชน์ของพื้นที่อย่างเต็มที่ เพื่อไม่ให้เปลืองกระดาษ
ในบางครั้งเราอาจอำนวยความสะดวกให้แก่ผู้ใช้ โดยการจัดทำเว็บสำหรับพิมพ์แยกคนละชุดกันสำหรับอ่านบนหน้าจอ โดยมีวิธีการดังนี้
1) แบ่งเนื้อหาออกเป็นส่วนย่อย ๆ ส่วนละประมาณ 2-3 หน้าจอเพื่อนำไปสร้างหน้าเว็บ พร้อมกับสร้างลิงค์เชื่อม โยงเข้าด้วยกัน เพื่อให้ได้เว็บที่มีหน้าไม่ยาวนัก เหมาะกับการอ่านบนหน้าจอ
2) สร้างลิงค์จากเว็บใดในขั้นแรกไปยังอีกเว็บหนึ่งที่รวมเนื้อหาทั้งหมดไว้ภายในไฟล์เดียวกันเพื่อสะดวกแก่การ พิมพ์และการดาวน์โหลดแต่ต้องแน่ในว่าความกว้างของหน้าจอจะไม่เกินพื้นที่ที่สามารถพิมพ์ได้
รูปแบโครงสร้างของหน้าเว็บ มี 4 รูปแบบ
1) โครงสร้างหน้าเว็บในแนวตั้ง เป็นรูปแบบพื้นฐานที่ได้รับความนิยมมากที่สุด เพราะมีรูปแบบที่ง่ายในการพัฒนาและมีข้อจำกัดน้อยที่สุด คือ บราวเซอร์จะแสดงสกรอบาร์ขึ้น ที่ของด้านขวาของหน้าต่าง สำหรับเว็บที่มีเนื้อหามาก หรือมีแนวโน้มที่จะขยายตัวอย่างรวดเร็วควรใช้โครงสร้างแบบแนวตั้ง
2) โครงสร้างหน้าเว็บในแนวนอน ต้องอาศัยความคิดสร้างสรรค์และความพยายามมากกว่าปกติ ปัญหาที่จะพบคือความกว้างของหน้าจอที่ไม่แน่นอนเนื่องจากความละเอียดของมอนิเตอร์ที่ต่างกัน หากข้อมูลเป็นตัวอักษรทั้งหมดผู้ใช้ต้องเลื่อนหน้าจอไปทางข้างเพื่อดูข้อมูล สำหรับเว็บที่มีเป้าหมายที่นำเสนอข้อมูลไม่มากนักและเกี่ยวกับการออกแบบ แฟชั่น ความทันสมัยและสร้างสรรค์ อาจเลือกรูปแบบแนวนอนหรือแบบสร้างสรรค์ก็ได้ตามความเหมาะสม
3) โครงสร้างหน้าเว็บที่พอดีกับหน้าจอ โดยจะออกแบบให้หน้าจอไม่มีสกรอบาร์ปรากฏ ข้อดีคือผู้ใช้จะมองเห็นข้อมูลทุกส่วนของหน้าได้
4) โครงสร้างหน้าเว็บแบบสร้างสรรค์ รูปแบบนี้อยู่นอกเหนือกฎเกณฑ์ใด ๆ มักมีรูปแบบและการจัดวางองค์ประกอบเฉพาะตัวที่คาดไม่ถึงเป็นเว็บของศิลปินนักออกแบบ บริษัทโฆษณา เนื่องจากเป็นเว็บที่สื่อถึงฝีมือและความสามารถในการออกแบบอย่างสร้างสรรค์ได้เต็มที่
ส่วนประกอบของหน้าเว็บ แบ่งเป็นส่วนประกอบหลัก 3 ส่วน
1) ส่วนหัว ( Page Header )
เป็นส่วนที่สำคัญที่สุดในหน้า มักประกอบด้วย ชื่อเว็บ ระบบเนวิเกชัน และหัวข้อหลักหรือชื่อของเนื้อหา ส่วนใหญ่บริเวณมุมบนซ้ายสุด จะวางโลโก้ เพราะเป็นส่วนที่ผู้ใช้จะเริ่มต้นให้ความสนใจ
2) ส่วนเนื้อหา (Page Body )
ควรมีความกะทัดรัดและจัดอย่างเป็นระเบียบเพื่อให้มองหาข้อมูลได้อย่างรวดเร็ว โดยแสดงใจความสำคัญไว้ในส่วนต้น ๆ ของหน้า
3) ส่วนท้าย (Page Footer )
เป็นบริเวณที่จะให้ข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาและเว็บ โดยอาจเป็นระบบเนวิเกชันแบบโกลบอลที่เป็นตัวอักษร หรืออาจเป็นที่รวมของลิงค์ที่เกี่ยวกับนโยบายทางกฎหมาย ลิขสิทธิ์ ความเป็นส่วนตัว และวิธีการติดต่อกับผู้ดูแล ซึ่งส่วนนี้จะต้องคงความสม่ำเสมอในทุก ๆ หน้าเช่นเดียวกับส่วนหัว
เทคนิคการจัดโครงสร้างของหน้า จัดโครสร้างของหน้าโดยใช้ตาราง จะทำให้โครงสร้างข้อมูลวางอย่างเป็นระเบียบ และเว็บส่วนใหญ่มักใช้ตารางในการจัดโครงสร้าง
ออกแบบหน้าโฮมเพจ (Home Page ) โฮมเพจที่ดีควรมีลักษณะ ดังนี้
แสดงถึงภาพรวมและสิ่งที่เป็นประโยชน์ในเว็บ
ดูน่าสนใจและมีลักษณะที่สัมพันธ์กับเนื้อหา
มีลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลักๆของเว็บ
แสดงผลได้อย่างรวดเร็ว โดยใช้รูปกราฟิกอย่างจำกัด
แสดงถึงเอกลักษณ์ของเว็บด้วยการแสดงชื่อเว็บ
แสดงถึงสิ่งที่ปรับเปลี่ยนใหม่ เพื่อให้ผู้ใช้เข้าใจว่ามีการเปลี่ยนแปลงของเนื้อหาภายใน
แสดงวันที่ปัจจุบัน
เปลี่ยนแปลงรูปกราฟิกเป็นประจำทุกวัน สัปดาห์หรือเดือน
แสดงข่าวหรือข้อมูลความเคลื่อนไหวใหม่ ๆ ให้ผู้ใช้ได้รับรู้ในหน้าแรก
สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ ๆ ในเว็บ
หน้าก่อนหน้าโฮมเพจ (Splash page)
ทำหน้าที่แนะนำหรือสื่อข้อความบางอย่างของเว็บ เพื่อสร้างความประทับใจต่อผู้ใช้ โดยปกติหน้านี้จะแสดงผลได้อย่างรวดเร็วและดูน่าสนใจด้วยการใช้กราฟิกหรือเทคนิคพิเศษ เหมาะสำหรับเว็บที่ต้องการนำเสนอข้อมูลพิเศษบางอย่าง แต่สำหรับเว็บโดยทั่วไปหน้าก่อนหน้าโฮมเพจนี้อาจไม่จำเป็น และรบกวนเวลาของผู้ใช้
ข้อแนะนำในการออกแบบโฮมเพจ
ออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราฟิก
กำหนดชื่อของเว็บให้สื่อความหมาย
สร้างความแตกต่างของสิ่งที่แตกต่างให้เห็นอย่างชัดเจน เช่น สีของลิงค์ต้องหมาะกับสีของตัวอักษร
เลือกใช้รูปพื้นหลังที่เหมาะสม
หลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง
อย่าใช้ภาพเคลื่อนไหวมากจนเกินไป
<<<ย้อนกลับ