การออกแบบหน้าเว็บ
- หน้าเว็บหน้าแรกเป็นส่วนที่สำคัญมากเพราะมีหน้าที่
เป็นสื่อกลางให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้
จัดระบบโครงสร้างข้อมูล Information Architectue
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
ออกแบบลักษณะหน้าตาเว็บ
พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ
1.ลักษณะหน้าตาของเว็บ
2.เว็บต้นแบบที่ใช้ในการพัฒนา
3.รูปแบบโครงสร้างของเว็บ
4.ข้อกำหนดในการพัฒนาเว็บ
หลักสำคัญในการออกแบบหน้าเว็บ
-คือการใช้รูปภาพและองค์ประกอบต่างๆ ร่วมกัน
เพื่อสื่อความหมายเกียวกับเนื้อหาหรือลักษณะ
สำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
แนวคิดในการออกแบบหน้าเว็บ
-เรียนรู้จากเว็บไซต์ต่างๆ
(สิ่งที่ได้คือรูปแบบและเทคนิคใหม่)
-ประยุทต์รูปแบบจากสิ่งพิมพ์
-ใช้แบบจำลองเปรียบเทียบ (Metaphor)
-ออกแบบบอย่างสร้างสรรค์
ใช้แบบจำลองเปรียบเทียบ (Metaphor)
การใช้แบบจำลองเปรียบเทียบคือ การใช้สิ่งที่คุ้นเคย
ในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็นรูปภาพจาก
สิ่งพิมพ์หรือรูปแบบของร้านขายของ
สิ่งสำคัญ คือรูปแบบที่เลือกมาใช้ต้องมีลักษณะที่คน
ส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเนวคิดและ
ส่งเสริมกระบวนการสื่อสารของเว็บ
ลักษณะต่างๆ ของแบบจำลอง
การใช้แบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1.จำลองแบบการจัดระบบ (Organizational metaphor)
คือใช้ประโยชน์จากคงามคุ้นเคยของการจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้าง
ในระบบใหม่ได้ ง่ายขึ้น เช่น เว็บร้านขายหนังสือ สามารถจำลองการแบ่งหมวด
หมู่หนังสือได้ตามที่ใช้ในร้านหนังสือจริง
2.จำลองการใช้งาน(Functional Metaphor)
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับ การใช้งานบนเว็บ
เช่น เว็บของโรงภาพยนตร์ ที่ควรให้ผู้ใช้สามารถดู โปรแกรมหนัง จองที่นั่งล่วงหน้า
ได้เหมือนกันไป โรงภาพยนต์จริง
3.จำลองลักษณะที่มองเห็น (Visual Metaphor)
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะที่ค้นเคยของคนทั่วไป
เช่น เว็บไซต์ เกี่ยวกับดนตรีที่ให้บริการฟังเพลงบนเว็บได้ การนำลักษณะของปุ่มเล่นเพลง ปิดเพลง
ที่ทุกคน รู้จักจาดเครื่องเสียงมาใช้ ทำให้เข้าใจง่ายและรวดเร็ว
หลักการออกแบบหน้าเว็บ
1.สร้างลำดับขั้นความสำคัญขององค์ประกอบ(Visual Hierarchy)
2.สร้างรูปแบบ บุคลิดและสไตล์
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5.สร้างจุดสนใจด้วยความแตกต่าง
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7.ใช้กราฟิกอย่างเหมาะสม
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ(Visual Hierarchy)
จัดตำแหน่งและลำดับขององค์ประกอบ แสดงลำดับ
ความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ เนื่องจาก
ภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา และจากบนลงล่าง
จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้า
อยู่เสมอ เพื่อให้ผู้ใช้มองเห็นได้ก่อน
สีและความแตกต่างของสี แสดงถึงความสำคัญและ
ความสัมพันธ์ของสิ่งต่างๆ ภายในหน้า สีที่เด่นชัดเหมาะ
สำหรับองค์กรที่สำคัญมาก ส่วนองค์ประกอบที่ใช้สีเดียวกัน
ย่อมเสื่อมความมหายถึงความสัมพันธ์ที่ใกล้ชิดและความสำคัญ
ที่เท่าเทียวกัน การใช้สีที่แตกต่างกันอย่างชีเจนจะสามารถ
ดึงดูดความสนใจจากผู้ใช้ให้มองเห็นและตอบสองได้อย่างรวเร็ว
ภาพเคลื่อนไหว เป็นสิ่งที่ดึงดูดความสนใจได้เป็นอย่างดี
แต่จะต้องใช้อย่างจำกัดและระมัดระวังเพราะใช้สิ่ง
เคลื่อนไหวมากเกินไปจะทำให้จุดสนใจบนหน้าจอมาก
จนตัดสินใจได้ยากกว่าสิ่งไหนสำคัญ
2.สร้างรูปแบบ บุคลิก และสไตล์
รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้าง
ความเข้าใจของผู้ใช้ได้ดีขึ้น
บคลิก เว็บแต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกัน
ขึ้นอยู่กับเนื้อหาและเป้าหมายในการนำเสมอ บุคลิกที่
เหมาะกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดีขึ้น
สไตล์
คือลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิก
ชนิดและการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบ
อื่น ๆ ซึ่งไม่ควรสร้างสไตล์ของเว็บตามใจชอบแต่ควร
คำนึงถึงความเหมาะสม
ไม่ว่าจะเลือกรูปแบบ บุคลิก และสไตล์ใดมาใช้ ควรใช้
ลักษณะเหล่านั้นให้สม่ำเสมอตลอดทั้งเว็บเพื่อป้องกัน
ความสับานที่อาจเกิดขึ้นได้
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชัน
ทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดกราณ์ลักษณะของ
เว็บได้ล่วงหน้า
ทางด้านเทคนิคเราสามารถใช้ Cascading_Style Sheet ช่วย
ในการกำหนดสไตล์มาตรฐานได้
ข้อควรระวัง คือบางครั้งอาจกลายเป็นข้อจำกัดทำให้เว็บ
ดูน่าเบื่อ แนวทางแก้ไขคือการสร้างความต่างที่น่าสนใจ
ในแต่ละหน้าโดยใช้องค์ประกอบที่คล้ายคลึงกัน แต่มีสี
หรือลักษณะ ต่างกันเล็กน้อยเพื่อทำให้เกิดลักษณะพิเศษ
ของหน้านั้น
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฎขึ้นใน
หน้าบราวเซอร์โดยที่ยังไม่มีการเลื่อนหน้าจอใดๆ
ส่วนบนสุดนี้ควรประกิบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่องหรือชื่อเเสดงหมวดหมู่ของเนื้อหาที่ปรากฎ
3.สิ่งสำคัญที่เราต้องการโปรโมดเว็บ
4.ระบบเนวิเกชัน เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที
5.สร้างจุดสนใจด้วยความแตกต่าง
การจัดองค์ประกอบให้ภาพรวมของหน้ามีความแตกต่าง
เป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ เว็บที่
ออกแบบมาไม่ดีโดยเน้นการใช้กราฟิกหรือตัวอักษรที่มาก
เกินไป จะทำให้ยากต่อการมองหาข้อมูลที่มีความสำคัญจริงๆ
เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่น
ในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้
ผู้ใช้มองเห็นเว็บในครังแรกมีลักษณะเป็นกลุ่มก้อนของรูปร่างและสีที่ตัดกัน
ต่อมาก็เริ่มมองเห็นองค์ประกิบได้ชัดเจนขึ้น โดยเริ่มจากรูปภาพและหัวเรื่อง
ขนาดใหญ่ จากนั้นจึงมองเห็นรายละเอียดของเนื้อหาในที่สุด
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย
แยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป การมีข้อมูล
หรือองค์ประกอบที่มากเกินไปทำให้ผู้อ่านขาดความสนใจ
เราจำเป็นต้องจัดการข้อมูลในหน้าเว็บให้มีความรู้สึกที่
เรียบร้อยเป็นกันเอง การจัดการตัวอักษร และรูปภาพ
ให้เกิดพื้นที่ว่าง ทำให้ภาพรวมไม่แน่นจนเกินไป รวมถึง
ควรจัดวางหัวข้อและเนื้อเรื่องอย่างเป็นระบบและชัดเจน
เนื้อหาที่มีบรรทักยาวเต็มกว้างของหน้าจอเป็นสิ่งที่
สร้างความลำบากต่อการอ่าน ควรจักตัวหนังสือให้อยู่ในคอลัมน์ที่ไม่กว้างเกินไป
ข้อควรระวัง การมีคอลัมน์ขนาดเล็กหลายคอลัมน์ต่อกัน
ผู้อ่านต้องอ่านจากบนลงล่างและต้องเลื่อนหน้าจอขึ้นมา
ด้านบนเพื่ออ่านคอลัมน์ถัดไป เพราะเป็นสิ่งที่ไม่สะดวก
อย่างยิ่ง
7.ใช้กราฟิกอย่างเหมาะสม
ควรใช้กราฟิกที่เป็นไอคอน ปุ่มลายเส้น และสิ่งอื่น ๆ ตาม
ความเหมาะสมและไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้าง
ของหน้าที่ยุ่งเหยิงและไม่เป็นระเบียบ
ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง H1 และ H2 ควรใช้ใน
ปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด การมช้กราฟิกมากเกินความจำเป็นทำให้เกิดจุดเดนทั่วทั้งหน้า
เป็นผลให้ไม่มีอะไรหน้านั้นเด่นขึ้นมาจริงๆ
เข้าใจลักษณะการใช้งานของเว็บ
สำหรับเว็บที่ใช้อ่านบนหน้าจอควรมีขนาดกะทัดรัด
ไม่ยืดยาวหรือใช้กราฟิกมากเกินไป
ส่วนหน้าที่คาดว่าจะพิมพ์ควรออกแบบให้มีการใช้
ประโยชน์ของพื้นที่อย่างเต็มที่เพื่อไม่ให้เปลืองกระดาษ
เข้าใจลักษณะการใช้งานของเว็บ
เราสามารถใช้ประโยชน์จากเว็บได้2แนวทาง
1.การใช้เป็นสื่อโดยตรงให้อ่านบนหน้าจอ
2.การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บรวมรวมหรืออ่านในภายหลัง
ออกแบบหน้าเว็บให้มีความยาวเหมาะสม
หน้าเว็บที่ไม่ยาวนักทำให้ดูน่าอ่าน ขณะที่หน้าเว็บยาวๆ
ทำให้ง่ายต่อการจัดการสำหรับผู้ที่ต้องการดาวน์โหลด
หรือสั่งพิมพ์ห้าเหล่านั้น
โดยทั่วไปควรสร้างเว็บขนาดสั้นสำหรับ
1.หน้าโฮมเพจหรือหน้าที่เป็นแหล่งรวมลิงค์จำนวนมาก
2.หน้าเว็บที่คาดว่าจะถูกอ่านบนหน้าจอ
3.หน้าเว็บที่มีกราฟิกขนาดใหญ่มาก
ออกแบบหน้าเว็บให้มีความยาวเหมาะสม
เลือกใช้เว็บขนาดยาวเพื่อ
1.ความสะดวกในการพิมพ์หรือดาวน์โหลด
2.ความสะดวกในการจัดการกับจำนวนไพล์และลิงค์ที่
น้อยลง
3.โครงสร้างของเนื้อหาจะได้ไม่ถูกตัดแบ่งออกจากกัน
ออกแบบหน้าเว็บสำหรับการพิมพ์
บางครั้งเราอาจจะอำนวยความสะดวกให้กับผู้ใช้ทั้ง 2 ประเภท
พร้อมกันโดยจัดทำเว็บสำหรับพิมพ์แยก คนละชุดกับเว็บสำหรับอ่านบนหน้าจอ
โดยมีวิธีการ ดังนี้
1.แบ่งเนื้อหาออกเป็นส่วนย่อยๆ ส่วนละประมาณ 2-3 หน้าจอ
เพื่อนำไปสร้างเป็นหน้าเว็บ พร้อมกับสร้างลิงค์เชื่อมโยงเว็บ
ทั้งหมดเข้าด้วยกัน เพื่อให้ได้เว็บที่มีหน้าไม่ยาวนัก
เหมาะกับการอ่านบนหน้าจอ
2.สร้างลิงค์จากหน้าเว็บที่ได้ในขั้นแรกไปยังอีกเว็บหนึ่งที่รวม
เนื้อหาทั้งหมดไว้ภายในไพล์เดียวกัน เพื่อสะดวกแก่การพิมพ์
หรือดาวน์โหลด และต้องแน่ใจว่า ความกว้างของหน้าจอจะไม่
เกินพื้นที่ ที่สามารถพิมพ์ได้
รูปแบบโครงสร้างของหน้าเว็บ
โครงส้รางหน้าเว็บที่พบเห็นบ่อย ๆ แบ่งเป็น 4 รูปแบบดังนี้
1.โครงสร้างหน้าเว็บในแนวตั้ง
โครงสร้างหน้าเว็บในแนวติ้งถือเป็นรูปแบบพื้นฐานที่
ได้รับความนิยมมากที่สุด เพราะมีรูปแบบที่ง่ายในการ
พัฒนาและมีข้อจำกัดน้อยสุดเมื่อเทียบกับรูปแบบอื่น
เมื่อใดที่หน้าเว็บมีความยาวมากกว่าพื้นที่หน้าจอ
บราวเซอร์ก็จะแสดงกราบบาร์ ขึ้นที่ขอบด้านขวาของ
หน้าต่าง www.amwayshopping.com
2.โครงส้างหน้าเว็บในแนวนอน
โครงสร้างหน้าเว็บในแนวนอนต้องอาศัยความคิด
สร้างสรรค์และความพยายามมากกกว่าปกติ เนื่องจาก
มีข้อจำกัดและสิ่งที่ต้องระวังค่อนข้างมาก เป็นการใช้
ประโยชน์ของพื้นที่ในแนวนอนอย่างเต็มที่
ปัญหาหนึ่งที่จะพบคือความกว้างของหน้าจอที่ไม่แน่นอน
เนื้องจากความละเอียดของมอนิเตอร์ที่ต่างกัน หากข้อมูล
เป็นตัวอักษรทั้งหมดจะสร้างความลำบากต่อผู้อ่าน ทำให้ผู้ใช้
ต้องเลื่อหน้าไปด้านข้างเพื่อดูข้อมูล
3.โครงสร้างหน้าเว็บที่พอดีกับหน้าจอ
โครงสร้างรูปแบบนี้ใช้พื้นที่หน้าจอน้อยกว่าเว็บทั่วไป
และมักจะจัดอยู่ตรงกึ้งหลางของหน้าจอซึ่งจะออกแบบ
ให้มีขนาดพอดีกับหน้าจอโดยไม่มี Scroll bar ปรากฎ
เพราะที่จะใช้ในการนำเสนอข้อมูลที่มีปริมาณไม่มากนัก
ข้อดีของรูปแบบนี้คือการนำเสนอที่ไม่ซับซ้อนและสะดวก
ต่อการใช้งาน เพราะผู้ใช้จะมองเห็นข้อมูลทุกส่วนของ
หน้าได้พร้อมกันตลอดเวลา
4.โครงสร้างหน้าเว็บแบบสร้างสรรค์
รูปแบบสร้างสรรค์นี้อยู่นอกเหนือกฎเกณฑ์ใดๆ มักมี
รูปแบบและการจัดการวางองค์ประกิบเฉพาะตัวที่คาดไม่ถึง
เป็นเว็บของศิลปิน นักออกแบบ บริษัทโฆษณา เนื่องจาก
เป็นเว็บที่สื่อถึงการแสดงฝีมือและความสามารถในการ
ออกแบบอย่างสร้างสรรค์ได้เต็มที่
โครงสร้างหน้าเว็บที่ดีต้องมีความเหมะสมกับปริมาณเนื้อหา
และลักษณะของเว็บ
สำหรับเว็บที่มีปริมาณเนื้อหามาก หรือเว็บที่มีแนวโน้มจะ
ขยายตัวอย่างรวดเร็วควรใช้โครงสร้างหน้าเว็บในแนวตั้ง
สำหรับเว็บที่มีเป้าหมายเพื่อนำเสมอข้อมูลที่มีปริมาณไม่
มากนักและเกี่ยวข้องกับงานออกแบบ แฟชั่น ความทันสมัย
และสร้างสรรค์ อาจเลือกรูปแบบโครงสร้างหน้าเว็บใน
เเนวนอน แบบพอดีกับหน้าจอหรือแบบสร้างสรรค์ได้ตาม
ความเหมาะสม
ส่วนประกอบของหน้าเว็บ
เราอาจแบ่งหน้าเว็บออกเป็นส่วนประกิบหลัก3ส่วน
1.ส่วนหัว(Page Header)
2.ส่วนเนื้อหา(Page Body)
3.ส่วนท้าย (Page Footer)
แบ่งเพื่อการออกแบบรายละเอียดในแต่ละส่วนได้อย่าง
เหมาะสมทำให้สามารถจัดวางกราฟิกและตัวอักษรสำคัญ
ลงในแต่ละบริเวณอย่างมีเหตุผลและเป็นประโยชน์
1.ส่วนหัวของหน้า
บริเวณส่วนหัวของเว็บเป็นบริเวณที่สำคัญที่สุดในหน้า
โดยปกติแล้วส่วนหัวของหน้ามักประกิบด้วย ชื่อเว็บ
ระบบเนวิเกชัน และ หัวข้อหลักหรือชื่อของเนื้อหา
บริเวณมุมด้านซ้าย บนของหน้าเว็บเป็นส่วนที่มี
ความสำคัญมากเป็นพิเศษ เป็นบริเวณแรกของหน้าจอ
ที่ผู้ใช้จะเริ่มต้นให้ความสนใจ ด้วยเหตุนี้เว็บส่วนใหญ่
จึงวางโลโก้หรือชื่อเว็บไว้ในตำแหน่งนี้
2.ส่วนของเนื้อหา
ส่วนของเนื้อหาบนเว็บควรจะมีความกะทัดรัด และจัด
อย่างเป็นระเบียบเพื่อให้มองหาข้อมูลได้อย่างรวดเร็ว
โดยแสดงใจความสำคัญไว้ในส่วนต้นๆ ของหน้า
มีการจัดรูปแบบตัวอักษรอย่างเหมาะสมเพื่อทำให้เนื้อหา
ดูน่าสนใจ อ่านได้อย่างสะดวก และช่วยสร้างความเชื่อมั่น
ต่อเนื้อหามากยิ่งขึ้น เนื่องจากผู้ใช้ทุกคนต้องการ
แหล่งข้อมูลที่ชัดเจน เป็นระเบียบ และน่าเชื่อถือ
3.ส่วนท้ายของหน้า
เป็นบริเวณที่จะให้ข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาและเว็บโดยอาจเป็นระบบ
เนวิเกชันแบบโกลบอลที่เป็นตัวอักษร
หรืออาจเป็นที่รวมของลิงค์ที่เกี่ยวกับนโยบายทาง
กดฎหมาย ลิขสิทธ์ความเป็นส่วนตัว และวิธีดารติดต่อ
กับผู้ดูแลเว็บ
ซึ่งส่วนท้ายนี้จำเป็นต้องคงความสม่ำเสมอในทุกๆ หน้า
เช่นเดียวกับส่วนหัว
เทคนิคการจัดโครงสร้างของหน้า
จัดโครงสร้างของหน้าโดยใช้ตาราง
เว็บโดยส่วนใหญ่มีการจัดโครงสร้างของหน้าโดยใช้ตาราง
แทบทั้งสิ้น หากไม่มีการใช้ตารางมาช่วยจัดโครงสร้างใน
หน้าเว็บ ตัวอักษรและกราฟิกทั้งหมดก็จะจัดเรียงติดกัน
ทั้วทั้งหน้าอย่างไม่เป็นสัดส่วน
ออกแบบหน้าโฮมเพจ
สิ่งสำคัญในการออกแบบบหน้าแรกคือ
การคำนึกถึงสิ่งที่ ผู้ใช้คาดหวังและจัดเตรียมสิ่งเหล่านั้น
ไว้ให้พร้อม ทำให้ผู้ใช้รู้ได้ทันทีว่าเว็บนั้นเกี่ยวจข้องกับ
อะไร รวมถึงการสร้างระบบเนวิเกชันให้ผู้ใช้เข้าถึง
ข้อมูลที่ต้องการได้อย่างสะดวกและรวดเร็ว รูปแบบ
ของหน้าแรกขึ้นอยู่กับลักษณะและวัตถุประสงค์ของเว็บ
หน้าโฮมเพจเปรียบเสมือนหน้าปกของนิตยสาร ต้อง
ออกแบบให้น่าสนใน และมีการแนะนำถึงเนื้อหาสำคัญ
ภายในเล่ม โฮมเพจที่ดีควรมีลักษณะ ดังนี้
1.แสดงถึงภาพรวมและสิ่งที่เป็นประโยชน์ในเว็บ
2.ดูน่าสนใจและมีลักษณะที่สัมพันธ์กับเนื้อหา
3.มีลิงค์ที่สามารถเชื่อมโยงไปสู่ส่วนหลักๆ ของเว็บ
4.แสดงผลได้อย่างรวดเร็ว โดยใช้รูปกราฟิกอย่างจำกัด
5.แสดงถึงเอกลักษณ์ของเว็บด้วยการเเสดงชื่อของเว็บ
6.แสดงถึงสอ่งที่ปรับเปลี่ยนใหม่ เพื่อให้ผู้ใช้เข้าใจว่ามีการเปลี่ยนแปลงของเนื้อหาภายใน
7.แสดงวันที่ปัจจุบัน
8.เปลี่ยนแปลงรูปกราฟิกเป็นประจำทุกวัน สัปดาห์
หรือเดือน
9.แสดงข่าวหรือข้อมูลความเคลื่อนไหวใหม่ๆ ให้ผู้ใช้
ได้รับรู้ในหน้าแรก
10.สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ๆในเว็บ
หน้าก่อนโฮมเพจ
การสร้างหน้าก่อนโฮมเพจจริง ที่เรียกว่า "Splasgh page"
ทำหน้าที่แนะนำหรือสื่อข้อความบางอย่างของเว็บเพื่อสร้าง
ความประทับใจต่อผู้ใช้ โดยปกติแล้วหน้านี้จะต้องแสดงผล
ได้อย่างรวเร็วและดูน่าสนใจด้วยการใช้กราฟิกหรือเทคนิค
พิเศษ เหมาะสำหรับเว็บที่ต้องการนำเสนอข้อมูลพิเศษ
บางอย่าง
แต่สำหรับเว็บโดยทั้วไปหน้าก่อนโฮมเพจนี้อาจไม่จำเป็น
และรบกวนเวลาของผู้ใช้
ข้อแนะนำในการออกแบบโฮมเพจ
1.ออกแบบโครงสร้างของหน้าโดยใช้โปรแกรมกราผิก
2.กำหนดชื่อของเว็ปให้สื่อความหมาย
3.สร้างความแตกต่างของสิ่งที่แตกต่างให้เห็นอย่าง ชัดเจน
เช่น สีของลิงค์ต้องกับสีของตัวอักษร
4.เลือกใช้รูปพื้นหลังที่เหมาะสม
5.หลีกเลี่ยงการใช้เทคโนโลยีขั้นสูง
6.อย่าใช้ภาพเคลื่อนไหวมากจนเกินไป
บทที่ 2
ออกแบบเพื่อผู้ใช้ (Design for Users)
กระบวนการแรกของการออกแบบ เว็บไซต์คือการกำหนดเป้าหมายของเว็บไซต์กำหนดกลุ่มผู้ใช้ ซึ่งการจะให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือจำลองสถานการณ์ สิ่งเหล่านี้จะช่วยให้เราสามารถออกแบบเนื้อหาและการใช้งานเว็บไซต์ได้อย่าง เหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้จริง
1.1 กำหนดเป้าหมายของเว็บไซต์
ขั้น ตอนแรกของการออกแบบเว็บไซต์ คือการกำหนดเป้าหมายของเว็บไซต์ให้แน่ชัดเสียก่อน เพื่อจะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้งเอาไว้ โดยทั่วไปมักจะเข้าใจว่าการทำเว็บไซต์มีจุดมุ่งหมายเพื่อบริการข้อมูลของ หน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมีเป้าหมายของตนเองแตกต่างกันออกไป
ตัวอย่างของเป้าหมายเว็บไซต์ทางธุรกิจ ได้แก่
- สร้างความเชื่อถือให้กับบริษัท
- ให้บริการข้อมูลของสินค้าหรือบริการ
- สร้างความแตกต่างเหนือคู่แข่ง
- ช่วยสื่อความหมายสำคัญของผลิตภัณฑ์
- สำรวจความต้องการของลูกค้า
- กระตุ้นยอดขาย
- เป็นแหล่งบริการข้อมูลที่เข้าถึงได้ตลอดเวลา
- ช่วยในการเลือกสรรพนักงานใหม่
- ส่งข่าวสารถึงลูกค้าและผู้สนใจอย่างรวดเร็วด้วยต้นทุนที่ต่ำมาก
1.2 กำหนดกลุ่มผู้ใช้เป้าหมาย
ผู้ ออกแบบเว็บไซต์จำเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซ ต์ เพื่อที่จะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่นเว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน เว็บท่า และเว็บไดเรกทอรี่ แต่เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สำหรับทุกคน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว
การกำหนดประเภทของกลุ่มเป้าหมาย มีลักษณะใหญ่ ๆ คือ
- การกำหนดกลุ่มเป้าหมายเฉพาะเจาะจง ตัวอย่างเช่น เว็บไซต์ขายเสื้อผ้า อาจจะกำหนดกลุ่มเป้าหมายเป็นผู้หญิง แต่สินค้าที่นำมาจำหน่ายอาจเป็นสินค้าที่มียี่ห้อและราคาแพงจึงกำหนดกลุ่ม ผู้ใช้ที่เป็นผู้หญิงและมีฐานะทางการเงินที่ดี เป็นต้น
- การกำหนดกลุ่มเป้าหมายหลาย ๆ กลุ่ม ตัวอย่างเช่น เว็บไซต์ของร้านขายของเล่น ซึ่งอาจจะมองว่ากลุ่มเป้าหมายที่เข้ามาเป็นเด็ก ทั้งที่จริงแล้วผู้ใช้บริการอาจจะเป็นพ่อแม่ที่มาหาของเล่นให้ลูก หรือหนุ่มสาวที่เข้ามาซื้อของขวัญ หรือครูอาจารย์เข้ามาเลือกสินค้าเพื่อนำไปใช้ในห้องเรียน ซึ่งจุดนี้ผู้ออกแบบเว็บไซต์ต้องคำนึงถึงกลุ่มเป้าหมายทุกกลุ่ม
1.3 สิ่งที่ผู้ใช้ต้องการจากเว็บ
หลัง จากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลำดับต่อไปคือการออกแบบเว็บไซต์เพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่งที่น่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่ง ได้แก่
- ข้อมูลและการใช้งานที่เป็นประโยชน์
- ข่าวและข้อมูลที่น่าสนใจ
- การตอบสนองต่อผู้ใช้
- ความบันเทิง
- ของฟรี
การนำเสนอข้อมูลสินค้าที่ทำให้น่าสนใจ ด้วยการแสดงข้อมูลสินค้าในหลาย ๆ รูปแบบ ที่ผู้ใช้สามารถเลือกการแสดงข้อมูลได้ด้วยตนเอง
1.4 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
เมื่อ เราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ แล้ว เราก็ออกแบบเว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์
- ข้อมูลเกี่ยวกับบริษัท
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสื่อมวลชน
- คำถามยอดนิยม
- ข้อมูลในการติดต่อ
การเลือกสีสำหรับเว็บไซต์
สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น
- การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน - การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้ - การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้นประโยชน์ของสีในเว็บไซต์ - ชักนำสายตาทุกบริเวณในหน้าเว็บ - เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน - แบ่งบริเวณต่างๆออกจากกัน - ดึงดูดความสนใจของผู้อ่าน - สร้างอารมณ์โดยรวมของเว็บ - สร้างระเบียบ - ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสี มี 2 แบบ - การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ - การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ รูปแบบชุดสีพื้นฐาน (Simple Color Schemes) - ชุดสีร้อน - ชุดสีเเบบเดียว - ชุดสีที่คล้ายคลึงกัน - ชุดสีตรงข้ามเคียง - ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน - ชุดสีเย็น - ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม
การผสมสี มี 2 แบบ - การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ - การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ รูปแบบชุดสีพื้นฐาน (Simple Color Schemes) - ชุดสีร้อน - ชุดสีเเบบเดียว - ชุดสีที่คล้ายคลึงกัน - ชุดสีตรงข้ามเคียง - ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน - ชุดสีเย็น - ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม
ไม่มีความคิดเห็น:
แสดงความคิดเห็น