Lecture
1
ออกแบบหน้าเว็บ
หลักการออกแบบหน้าเว็บ
1. สร้างลำดับชั้นความสำคัญขององค์ประกอบ (Visual Hierarchy)
2. สร้างรูปแบบบุคลิกและสไตล์
3. สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
5. สร้างจุดสนใจด้วยความแตกต่าง
6. จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
7. ใช้กราฟิกอย่างเหมาะสม
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบ (Visual Hierarchy)
จัดตำแหน่งและลำดับขององค์ประกอบ แสดงลำดับ ความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา และจากบนลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้า อยู่เสมอ เพื่อให้ผู้ใช้มองเห็นได้ก่อน
สีและความแตกต่างของสี แสดงถึงความสำคัญและความสัมพันธ์ของสิ่งต่าง ๆ ภายในหน้า สีที่เด่นชัดเหมาะสำหรับองค์กรที่สำคัญมาก ส่วนองค์ประกอบที่ใช้สีเดียวกันย่อมสื่อความหมายถึงความสัมพันธ์ที่ใกล้ชิดและความสำคัญที่เท่าเทียมกัน การใช้สีที่แตกต่างกันอย่างชัดเจนจะสามารถดึงดูดความสนใจจากผู้ใช้ให้มองเห็นและตอบสนองได้อย่างรวดเร็ว
ภาพเคลื่อนไหว เป็น สิ่งที่ดึงดูดความสนใจได้เป็นอย่างดีแต่จะต้องใช้อย่างจำกัดและระมัดระวัง เพราะใช้สิ่งเคลื่อนไหวมากเกินไปจะทำให้จุดสนใจบนหน้าจอมากจนตัดสินใจได้ ยากกว่าสิ่งไหนสำคัญ
2.สร้างรูปแบบ บุคลิก และสไตล์
รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
บุคลิก เว็บแต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาและเป้าหมายในการ นำเสนอ บุคลิกที่เหมาะกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดีขึ้น
สไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิกชนิดและการจัดตัวอักษร ชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างสไตล์ของเว็บตามใจชอบแต่ควรคำนึงถึงความเหมาะสม
ไม่ว่าจะเลือกรูปแบบ บุคลิก และสไตล์ใดมาใช้ ควรใช้ลักษณะเหล่านั้นให้สม่ำเสมอตลอดทั้งเว็บเพื่อป้องกันความสับสนที่อาจ เกิดขึ้นได้
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชันทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้าทางด้านเทคนิคเราสามารถใช้ CSS ช่วยในการกำหนดสไตล์มาตรฐานได้
ข้อควรระวัง คือ บางครั้งอาจกลายเป็นข้อจำกัดทำให้เว็บดูน่าเบื่อ แนวทางแก้ไขคือการสร้างความต่างที่น่าสนใจในแต่ละหน้าโดยใช้องค์ประกอบที่ คล้ายคลึงกัน แต่มีสีหรือลักษณะ ต่างกันเล็กน้อยเพื่อทำให้เกิดลักษณะพิเศษของหน้านั้น
4.จัดวางองค์ประกอบทีสำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้าบราวเซอร์โดยที่ยังไม่มีการเลื่อนหน้าจอใดๆ
ส่วนบนสุดนี้ควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่องหรือชื่อแสดงหมวดหมู่ของเนื้อหาที่ปรากฏ
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชัน เพื่อให้ผู้ใช้คลิกส่วนที่ต้องการได้ทันที
5.สร้างจุดสนใจด้วยความแตกต่าง
การจัดองค์ประกอบในภาพรวมของหน้ามีความแตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้ อ่านไปยังบริเวณต่างๆ เว็บที่ออกแบบมาไม่ดีโดยเน้นการใช้กราฟิกหรือตัวอักษรที่มากเกินไป จะทำให้ยากต่อการมองหาข้อมูลที่มีความสำคัญจริงๆ
เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้
6.จัดแต่งหน้าให้เป็นระเบียบและเรียบง่าย
เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายแยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป การมีข้อมูลหรือองค์ประกอบที่มากเกินไปทำให้ผู้อ่านขาดความสนใจ
เราจำเป็นต้องจัดการข้อมูลในหน้าเว็บให้มีความรู้สึกที่เรียบร้อยเป็นกันเอง การจัดวางตัวอักษร และรูปภาพให้เกิดพื้นที่ว่าง ทำให้ภาพรวมไม่แน่นจนเกินไป รวมถึงควรจัดวางหัวข้อและเนื้อเรื่องอย่างเป็นระบบและชัดเจน
เนื้อหา ที่มีบรรทัดยาวเต็มความกว้างของหน้าจอเป็นสิ่งที่สร้างความลำบากต่อการอ่าน ควรจัดตัวหนังสือให้อยู่ในคอลัมน์ที่ไม่กว้างเกินไป
ข้อควรระวัง การ มีคอลัมน์ขนาดเล็กหลายคอลัมน์ต่อกันผู้อ่านต้องอ่านจากบนลงล่างและต้อง เลื่อนหน้าจอขึ้นมาด้านบนเพื่ออ่านคอลัมน์ถัดไป เพราะเป็นสิ่งที่ไม่สะดวกอย่างยิ่ง
7.ใช้กราฟิกอย่างเหมาะสม
ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆ ตามความเหมาะสมและไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างของหน้าที่ยุ่งเหยิงและไม่เป็นระเบียบ
ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง H1 และ H2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด การใช้กราฟิกมากเกินความจำเป็นทำให้เกิดจุดเด่นทั่งทั้งหน้าเป็นผลให้ไม่มี อะไรในหน้านั้นเด่นขึ้นมาจริงๆ
*************************************
2
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
บราวเซอร์ที่ใช้
บราวเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจ โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร,รูปภาพ และภาพเคลื่อนไหว มีบราวเซอร์ลายชนิดที่ได้รับความนิยม เช่น
• Internet explorer
• Netscape Navigator
• The World
• Opera
• Mozilla
• Firefox
ในอดีต มีการแข่งขันของเว็บบราวเซอร์สูง แต่ละผู้ผลิต ต่างพัฒนาคุณสมบัติใหม่ๆให้กับบราวเซอร์ของตัวเอง ปัจจุบันได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง นั่นคือ W3C
ระบบปฏิบัติการ(Operating System)
ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของบราวเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ บราวเซอร์ที่ใช้ได้, ระดับความละเอียดของหน้าจอ,ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
ความละเอียดของหน้าจอ
ขนาดของจอมอนิเตอร์มีหลายขนาด เช่น 15”,17”,21” และอื่นๆความละเอียดของหน้าจอ(monitor resolution) มีหน่วยเป็น Pixel
ความละเอียด 640x480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640พิกเซล และตามแนวตั้ง 480 พิกเซล
ความละเอียดของหน้าจอจะไม่ขึ้นอยู่กับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
จำนวนสีที่จอผู้ใช้สามารถแสดงได้
มอนิเตอร์มีความสามารถแสดงสีที่แตกต่างกัน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ(Video Card)
จำนวนหน่วยความจำในการ์ด (Video memory) ที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
จำนวน สีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือcolor depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
บราวเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
MS Sans Serif VS Microsoft Sans Serif
MS Sans Serif เป็นฟอนต์แบบบิตแมพ(bitmapped font) ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น(Vector font) โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
ในฐานะผู้ออกแบบเว็บไซต์จึงเป็นเรื่องที่ท้าทายที่จะต้องออกแบบเว็บให้สวยงาม น่าสนใจ และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
ขนาดหน้าต่างบราวเซอร์
ขนาดหน้าต่างของบราวเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้
คำถาม คือ เว็บเพจควรถูกออกแบบให้มีขนาดคงที่ตายตัว หรือเป็นแบบที่มีขนาดเปลี่ยนแปลงไปตามขนาดหน้าต่างบราวเซอร์
ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ (Flexible Design)
เมื่อมีการเปลี่ยนแปลงขนาดหน้าต่างบราวเซอร์องค์ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่
ข้อดี
- พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่
- เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
ข้อเสีย
- ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้
- เนื่องจากมีการจัดรูปแบบใหม่ จึงทำให้เสียรูปแบบหน้าจอที่ออกแบบไว้เดิม
ออกแบบเว็บเพจให้มีขนาดคงที่ (Flexed design)
รูปแบบนี้เหมาะกับผู้ที่ต้องการควบคุมโครงสร้างของหน้าเว็บให้ควรที่เสมอ
ข้อดี
- เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
- สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษรไม่ยาวจนเกินไปในหน้าจอที่มีขนาดใหญ่มาก
ข้อเสีย
- ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล
ความสว่างและค่าความต่างของโทนสี
นอกเหนือจากค่าแกมม่าที่มีผลต่อความสว่างของหน้าจอแล้ว ตัวผู้ใช้เองยังสามารถปรับระดับความสว่าง (Brightness)และความต่างของโทนสี(Contrast)จากมอนิเตอร์ได้
ผู้ออกแบบเว็บเพจต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร
ข้อมูลสถิติ
การที่จะออกแบบเว็บให้ตรงกับกลุ่มเป้าหมายได้นั้น ขึ้นอยู่กับว่าเรารู้จักกลุ่มเป้าหมายดีเพียงใด
การสำรวจสถิติจากแหล่งข้อมูลต่าง ๆ จะช่วยให้มองเห็นภาพของผู้ใช้มากยิ่งขึ้น
*************************************
3
องค์ประกอบของระบบเนวิเกชันหลัก
มีได้หลายรูปแบบ ได้แก่
• เนวิเกชันบาร์
• เนวิเกชันระบบเฟรม
• pull down menu
• pop up menu
• image map
• search box
เนวิเกชันบาร์
ระบบเนวิเกชันบาร์เป็นพื้นฐานที่ใช้ได้หลายรูปแบบทั้งแบบลําดับขั้น แบบโกลบอล และแบบโลคอล โดยทั่วไป เนวิเกชันบาร์จะประกอบด้วยกลุ่มของลิงค์ต่าง ๆ ที่อยู่รวมกันในบริเวณหนึ่งของหน้าเว็บ อาจเป็นตัวหนังสือหรือกราฟิกก็ได้
เนวิเกชันบาร์ระบบเฟรม
คุณสมบัติของเฟรมจะทำให้สามารถแสดงเว็บหลาย ๆ หน้าในหน้าต่างบราวเซอร์เดียวกัน โดยแต่ละหน้ายังเป็น อิสระต่อกัน การลิงค์เฟรมที่เป็นเนวิเกชันบาร์สามารถ ควบคุมการแสดงผลของข้อมูลอีกเฟรมหนึ่งได้ ส่วนที่เป็นเนวิเกชันบาร์จะปรากฏอยู่คงที่เสมอ ในขณะที่ผู้ใช้เลื่อนดูข้อมูลใดๆ ในอีกเฟรมหนึ่ง การแยกระบบเนวิเกชันแบบนี้ทําให้ผู้ใช้เข้าถึงระบบเนวิเกชันได้ตลอดเวลาและยังคงความสม่ำเสมอทั่วทั้งไซท์
ข้อเสียของระบบเฟรม
1. การครอบครองพื้นที่หน้าจอตลอดเวลา
2. รบกวนการทำงานของบราวเซอร์ : Browser จะทำการแสดงชื่อไฟล์ของเฟรมหลักอยู่ตลอดเวลา
3. ทำให้เวลาในการแสดผลช้ายิ่งขึ้น
4. ต้องใช้การออกแบบที่ซับซ้อน
Pull Down Menu
เป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่น คือ มีรายการให้เลือกมากมายแต่ใช้พื้นที่น้อยเมื่อเทียบองค์ประกอบชนิดอื่น ๆ วิธีนี้จะช่วยให้ผู้ใช้เลือกรายการย่อยเข้าไปสู้เป้าหมายได้อย่างสะดวก เมนูแบบนี้เหมาะสำหรับข้อมูลประเภทเดียวกันที่มี จำนวนมาก เช่น รายชื่อประเทศ จังหวัด หรือ ภาษา แต่ไม่เหมาะกับข้อมูลจำนวนน้อยหรือข้อมูลต่างประเภทกันและ ไม่ควรใช้ pull down menu มากจนเกินไป
Pop up Menu
เป็นเมนู อีกรูปแบบหนึ่งที่มีลักษณะคล้าย Pull down menu แต่รายการย่อยของเมนูจะปรากฏขึ้นเองเมื่อผู้ใช้นำเมาส์ไปวางเหนือตำแหน่งของรายการในเมนูหลัก จากนั้น ผู้ใช้ก็สามารถเลื่อนเมาส์ไปเลือกรายการต่าง ๆ ที่ปรากฏขึ้น ได้วิธีนี้ช่วยให้หน้าเว็บดูไม่รกเกินไปด้วยลิงค์จำนวนมาก และยังช่วยประหยัดพื้นที่แสดงรายการย่อยของเมนูได้
Image Map
การใช้รูปกราฟิกเป็นลิงค์ในแบบ image map ได้รับความนิยมนำมาใช้กับระบบเนวิเกชันมากขึ้น โดยบางบริเวณของกราฟิกจะถูกกำหนดให้เป็นลิงค์ไปยังส่วนต่าง ๆ ตามต้องการ แต่ไม่ควรที่จะใช้ image map เป็นระบบเนวิเกชันเดียวในเว็บ เพราะ อาจมีผู้ใช้บางคนที่ไม่รู้ว่ารูปกราฟิกนั้นสามารถคลิกไปยังข้อมูลอื่นได้
Search Box
การจัดเตรียมระบบสืบค้นข้อมูล (search) ภายในเว็บเป็นระบบเนวิเกชันสําหรับเว็บที่มีข้อมูลปริมาณมาก ทำให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้อย่างรวดเร็วโดยระบุคีย์เวิร์ดที่สนใจ เนื่องจากข้อมูลในเว็บ อาจไม่ตรงกับความสนใจของผู้อ่าน
ไม่มีความคิดเห็น:
แสดงความคิดเห็น