การออกแบบหน้าเว็บ

Chapter 6

                  การออกแบบหน้าเว็บ     

                หลักการสำคัญของการออกแบบหน้าเว็ป  คือ การใช้รูปภาพและองค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะของเว็ปให้น่าสนใจ  บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้

  

                  แนวคิดในการออกแบบหน้าเว็บ

     -เรียนรู้จากเว็ปไซต์ต่างๆ ( สิ่งที่ได้คือ รูปแบบและเทคนิคใหม่ๆ )

     -ประยุกต์รูปแบบจากสิ่งพิมพ์

     -ใช้รูปแบบจำลองเปรียบเทียบ ( Metaphor )

     -ออกแบบอย่างสร้างสรรค์

                  หลักการออกแบบหน้าเว็บ

     1.การสร้างลำดับความสำคัญขององค์ประกอบ ( Visual Hierarchy )

                จัดตำแหน่งและลำดับความสำคัญขององค์ประกอบ                 แสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ  เนื่องจากภาษาส่วนใหญ่จะอ่านข้อความจากซ้ายไปขวา และจากบนลงล่าง จึงควรจัดวางสิงสำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสทอ เพื่อให้ผู้ใช้มองเห็นได้ก่อน

                

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

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

     2.สร้างรูปแบบ บุคลิกและสไตล์

                รูปแบบ การเลือกรูปแบบที่เหมาะสมจะช่วยสร้งาความเข้าใจของผู้ใช้ได้ดีขึ้น

                

                บุคลิก เว็บแต่ละประเภทมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาและเป้าหมายในการนำเสนอ บุคลิกที่เหมาะกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดีขึ้น

               สไตล์ คือลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟฟิกชนิดและการจัดตัวอักษรชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างสไตล์ของเว็บตามใจชอบแต่ควรคำนึงถึงความเหมาะสม

     3.ความสม่ำเสมอตลอดทั่วทั้งไซต์

                ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชั่นทำให้ผู้ใช่รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า

     4.จัดวางองค์ประกอบสำคัญไว้ในส่วนบนของหน้าเสมอ

                ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฏขึ้นในบราวเซอร์โดยที่ยังไม่มีการเลื่อนหน้าจอใดๆ ควรประกอบด้วย

                1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยุ่ในเว้บอะไร

                2.ชื่อหัวเรื่องหรือชื่อแสดงหมวดหมู่ ของเนื้อหาที่ปรากฏ

                3.สิ่งสำคัญ ที่เราต้องโปรโมตเว็บ

                4.ระบบเนวิเกชั่น เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที

     5.สร้างจุดสนใจด้วยความแตกต่าง

                การจัดองค์ประกอบให้ภาพรวมของหน้ามีความแตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปบริเวณต่างๆ เว็บที่ออกมาไม่ดีโดยเน้นไปที่การใช้กราฟฟิกหรือตัวอักษรที่มากเกินไป จะทำให้ยากต่อการมองหาข้อมูลที่มีความสำคัญจริงๆ

                เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้

     6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย

                เนื้อหาในหน้าเว้บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายแยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป การมีข้อมูลหรือองค์ประกอบที่มากเกินไปทำให้ผู้อ่านขาดความสนใจ

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

                

                *เนื้อหาที่มีความยาวเต็มความกว้างของหน้าจอเป็นสิ่งที่สร้างความลำบากต่อการอ่าน ควรจัดตัวหนังสือให้อยุ่ในคอลัมน์ที่ไม่กว้างเกินไป

     7.ใช้กราฟิกอยากเหมาะสม

                ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆ ตามความเหมาะสมและไม่มากเกินไป เพื่อนหลีกเลี่ยงโครงสร้างของหน้าที่ยุ่งเหยิงและไม่เป็นระเบีบย

                

                

                  เข้าใจลักษณะการใช้งานของเว็บ

  เราสามารถใช้ประโยชน์จากเว้บได้สองแนวทาง

                1.การใช้เป็นสื่อโดยตรงให้อ่านบนหน้าจอ

                2.การใช้เป็นสื่อกลางในการพิมพ์ข้อมูลลงในหน้ากระดาษเพื่อเก็บรวบรวมหรืออ่านในภายหลัง

                *สำหรับเว็บที่ใช้อ่านบนหน้าจอควรมีขนาดกะทัดรัดไม่ยืดยาวหรือใช้กราฟิกมากเกินไป

                ส่วนหน้าที่คาดว่าจะพิมพ์ควรออกแบบให้มีการใช้ประโยชน์ของพื้นที่อย่างเต็มที่เพื่อไม่ให้เปลืองกระดาษ

                  ออกแบบหน้าเว็บให้มีความยาวที่เหมาะสม

                หน้าเว็บที่ไม่ยาวนักทำให้ดูน่าอ่านขณะที่หน้า้ว็บยาวๆทำให้ง่ายต่อการจัดการสำหรับผู้ที่ต้องการดาวน์โหลดหรือสั่งพิมพ์หน้าเหล่านั้น

  โดยทั่วไปควรสร้างเว็บขนาดสั้นสำหรับ

                1.หน้าโฮมเพจหรือหน้าที่เป็นแหล่งรวมลิงค์จำนวนมาก

                2.หน้าเว็บที่คาดว่าถูกอ่านบนหน้าจอ

                3.หน้าเว้บที่มีกราฟิกขนาดใหญ่มาก

  สร้างเว็บขนาดยาวเพื่อ

                1.ความสะดวกในการพิมพ์หรือดาวน์โหลด

                2.ความสะดวกในการจัดการกับจำนวนไฟล์และลิงค์ที่น้อยลง

                3.โครงสร้างของเนื้อหาจะได้ไม่ถูกตัดแบ่งออกจากกัน

                  การออกแบบหน้าเว้บสำหรับสั่งพิมพ์

                บางครั้งเราอาจจะอำนวยความสะดวกให้กับผู้ใช้ทั้ง 2 ประเภทพร้อมกันโดยจัดทำเว็บสำหรับพิมพ์แยกคนละชุดกับเว้บสำหรับอ่านบนหน้าจอ   โดยวิธีการดังนี้

                1.แบ่งเนื้อหาออกเป็นส่วยย่อยๆ ส่วนละประมาน 2-3หน้าจอเพื่อนำไปสร้างหน้าเว้บ พร้อมสร้างลิงค์เชื่อมโยงเว็บทั้งหมดเข้าด้วยกันเพื่อให้ได้เว็บที่มีหน้าไม่ยาวนักเหมาะกับการอ่านบนหน้าจอ

                

                2.สร้างลิงค์จากหน้าเว็บที่ได้ในขั้นแรกไปยังอีกเว็บหนึ่งที่รวมเนื้อหาทั้งหมดไว้ภายในไฟล์เดียวกันเพื่อสะดวกแก่การพิมพ์หรือดาวน์โหลด และต้องแน่ใจว่าความกว้างของหน้าจอจะไม่เกินพื้นที่ ที่สามารถพิมพ์ได้

                  รูปแบบโครงสร้างของหน้าเว็บ

  โครงสร้างหน้าเว็บที่พบเห็นบ่อยๆ แบ่งเป็น 4 รูปแบบดังนี้

                1.โครงสร้างหน้าเว้บแนวตั้ง

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

                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.สร้างส่วนของเนื้อหาที่แสดงถึงสิ่งใหม่ๆในเว็บ