LECTURE
บทที่ 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)
ทำหน้าที่แนะนำหรือสื่อข้อความบางอย่างของเว็บ เพื่อสร้างความประทับใจต่อผู้ใช้
โดยปกติหน้านี้จะแสดงผลได้อย่างรวดเร็วและดูน่าสนใจด้วยการใช้กราฟิกหรือเทคนิคพิเศษ เหมาะสำหรับเว็บที่ต้องการนำเสนอข้อมูลพิเศษบางอย่าง
แต่สำหรับเว็บโดยทั่วไปหน้าก่อนหน้าโฮมเพจนี้อาจไม่จำเป็น
และรบกวนเวลาของผู้ใช้ข้อแนะนำในการออกแบบโฮมเพจออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราฟิกกำหนดชื่อของเว็บให้สื่อความหมายสร้างความแตกต่างของสิ่งที่แตกต่างให้เห็นอย่างชัดเจน
เช่น
สีของลิงค์ต้องหมาะกับสีของตัวอักษรเลือกใช้รูปพื้นหลังที่เหมาะสมหลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น