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

“พื้นฐานการออกแบบหน้าเว็บ”

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

ซึ่งมีเครื่องมือช่วยผู้ที่ต้องการออกแบบหรือสร้างเว็บมากมายเช่น Macromedia  Dreamweaver , Microsoft FrontPage หรือ Text  Editor เป็นต้น  ทำให้ข้อจำกัดที่นักพัฒนาเว็บต้องเป็นผู้เชี่ยวชาญเสมอไปหมดลง  แต่คุณสมบัติของนักพัฒนาเว็บข้อใหม่ที่เข้ามาแทนที่ก็คือ “ความคิดสร้างสรรค์” ด้วยเหตุผลที่ว่าเมื่อเว็บไซต์ไม่จำเป็นต้องอาศัยผู้เชี่ยวชาญในการพัฒนา ดังนั้นจึงมีเว็บไซต์เกิดขึ้นมาใหม่จำนวนมาก  หน้าที่ของนักพัฒนาเว็บจึงต้องจึงต้องคอยตอบตัวเองก่อนจะออกแบบเว็บว่า จะสร้างเว็บอย่างไรจึงจะดึงดูดความสนใจของผู้เข้าชม นั่นก็คือ การสร้างความแตกต่างจากเว็บไซต์อื่น  ไม่ยึดติดกับรูปแบบเดิมๆ  ยกตัวอย่างเช่น  สามารถใช้กราฟฟิกหรือเทคนิคการนำเสนอข้อมูลอื่นมาช่วยตกแต่งหน้าเว็บเพื่อให้มีความสวยงามมากขึ้น  แทนการนำเสนอข้อมูลรูปแบบเดิมที่มีเพียงตัวหนังสือกับรูปภาพธรรมดา  อย่างไรก็ตามต้องคำนึงถึงคุณสมบัติของเว็บที่ดีที่กล่าวไว้ในบทที่ 1 ด้วย  ซึ่งวิธีสร้างแนวคิดก่อนการออกแบบจะกล่าวถึงในหัวข้อต่อไป

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

1.1  วิธีการสร้างแนวคิดในการออกแบบเว็บ

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

-          -      เว็บไซต์ต่างๆ

เว็บไซต์  เป็นพื้นฐานการศึกษาที่สามารถพบเห็นได้ง่าย  ซึ่งแสดงถึงแนวคิด  ประสบการณ์  ความสามารถของนักพัฒนาเว็บแต่ละคน 

-          -     สื่อสิ่งพิมพ์  ยกตัวอย่างเช่น  นิตยสาร  แผ่นพับ  โปสเตอร์  สิ่งพิมพ์เหล่านี้มักจะ

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

-          -     เปรียบเทียบสิ่งรอบตัว

สิ่งรอบตัวในที่นี้  หมายถึง  ลักษณะทางกายภาพของอุปกรณ์ต่างๆ  ที่สามารถมองเห็นได้  รวมทั้งวิธีการใช้งานอุปกรณ์เหล่านั้น  แล้วจำลองลักษณะกายภาพ ( Metaphor)  ดังกล่าวมาใช้ออกแบบหน้าเว็บ  เช่น  หนังสือ  วิทยุ  โทรทัศน์  เราสามารถนำลักษณะกายภาพมาใช้เป็นรูปแบบนำเสนอได้

"แสดงตัวอย่างการจำลองลักษณะกายภาพและการใช้งานของหนังสือมในเว็บ  www.atlantis.com"

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

1.2  หลักการออกแบบหน้าเว็บ  ส่วนประกอบของหน้าเว็บ  สามารถจำแนกออกเป็น  4  ส่วน  ได้แก่ 

1.ส่วนหัวของเว็บเพจ  (Page  Header)  เป็นองค์ประกอบที่มีความสำคัญมากที่สุด  ประกอบด้วย  ชื่อของเว็บไซต์หรือชื่อหัวข้อของเว็บเพจย่อย  เมนูรายการเชื่อมโยง  (Navigation  Bar)  และแบนเนอร์โฆษณา  (Banner)  หลักการออกแบบส่วนหัวของเว็บเพจ  คือ  ต้องระบุชื่อหรือสัญลักษณ์ขององค์กรทุกครั้ง  เพื่อให้ผู้ชมเว็บไซต์ทราบอยู่เสมอว่ากำลังชมเว็บใดอยู่  นอกจากจะระบุชื่อเว็บไซต์ทุกครั้งที่มีการเชื่อมโยงแล้ว  อาจใช้วิธีสร้างความสม่ำเสมอให้เก็บเว็บเพจย่อยโดยออกแบบรูปลักษณ์ให้เป็นรูปแบบเดียวกัน  ซึ่งผู้ชมเว็บไซต์จะเข้าใจง่ายขึ้นว่าเป็นเพจย่อยของเว็บใด

2.  ส่วนของเนื้อหา  (Page Content)  “เนื้อหา”  เป็นองค์ประกอบที่มีผลต่อการตัดสินใจเลือกชมข้อมูลของผู้ชมเว็บว่าควรออกจากเว็บไซต์นี้หรือไม่  การออกแบบส่วนเนื้อหา  จะต้องกำหนดวัตถุประสงค์ก่อนว่า  หน้าเว็บนั้นต้องการนำเสนอข้อมูลเกี่ยวกับเรื่องใด  จากนั้นจึงค้นหาข้อมูลให้ครอบคลุมเรื่องที่เกี่ยวข้องมากที่สุด  โดยใช้วิธีคาดเดาความต้องการของผู้ชมเว็บไซต์ต่อข้อมูลที่ได้รับ

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

 3.  ส่วนคอลัมน์การเชื่อมโยง  (Page Sidebar)  คอลัมน์การเชื่อมโยง  เป็นเครื่องมือที่พัฒนาเว็บจะกำหนดไว้เพิ่มเติม  (ไม่จำเป็นต้องกำหนดไว้ก็ได้)  เพื่ออำนวยความสะดวกให้กับผู้ชม การออกแบบส่วนคอลัมน์เชื่อมโยงจะเน้นคุณสมบัติด้านความง่ายต่อการใช้งานและความสม่ำเสมอบนหน้าเว็บ

4.  ส่วนท้ายของเว็บเพจ  (Page Footer)  ส่วนท้ายของเว็บเพจ  เป็นส่วนที่ระบุรายละเอียดเกี่ยวกับเว็บไซต์  เช่น  ลิขสิทธิ์  ผู้จัดทำ  สถานที่ติดต่อ  รวมทั้งรายการเชื่อมโยง  โดยการออกแบบส่วนท้ายของเว็บเพจจะเน้นความสม่ำเสมอเช่นเดียวกับส่วนหัวของเว็บเพจ  กล่าวคือ  ส่วนท้ายของเว็บเพจจะต้องปรากฏอยู่ในทุกเว็บเพจย่อย

แสดงหน้าเว็บ  www.dtac.co.th  ออกแบบส่วนท้ายของเว็บเพจประกอบด้วยรายการเชื่อมโยง  และชื่อลิขสิทธิ์ผู้จัดทำ

-          -     พฤติกรรมการรับชมข้อมูลบนหน้าเว็บของผู้ใช้

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

"แสดงตัวอย่างลำดับการมองหาข้อมูลบนหน้าเว็บ  netdesign.ac.th"

-        -    การจัดลำดับความสำคัญของข้อมูล

เมื่อนักพัฒนาเว็บเข้าใจพฤติกรรมพื้นบานของผู้ใช้งานเว็บแล้ว  ก็จะสามารถ

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

 

-         - การจัดกลุ่มข้อมูล

            ผู้ออกแบบควรจัดกลุ่มข้อมูลที่มีความสัมพันธ์กันให้อยู่ในกลุ่มเดียวกัน  โดยรูปแบบการจัดกลุ่มข้อมูลอาจกระทำได้หลายลักษณะ  เช่น  สร้างการเชื่อมโยงแบบเมนูรายการย่อย  (List)  หรือจำกัดขอบเขตข้อมูลที่สัมพันธ์กันเอาไว้  และจัดลำดับความสำคัญของข้อมูลแบบซ้อนกัน

 

“การจัดกลุ่มข้อมูล  โดยสร้างเมนูรายการเชื่อมโยงย่อยในเว็บ  http://dft.moc.go.th”

"การจัดกลุ่มข่าวสารด้วยการแบ่งคอลัมน์ย่อยในเว็บ  www.thenation.com"

"การจัดกลุ่มข้อมูลโดยจัดลำดับความสำคัญของข้อมูลแบบซ้อนกันในเว็บ  www.thairath.co.th"

-        -     การกำหนดตำแหน่งของข้อมูล   โดยทั่วไปข้อมูลที่มีลำดับความสำคัญสูงจะต้องนำเสนอไว้ส่วนบนของเว็บเพจ  ซึ่งตัวอย่างข้อมูลที่ควรวางไว้ส่วนบนของเว็บเพจได้แก่

-  ชื่อเว็บไซต์  ชื่อองค์กร  หรือหน่วยงานที่เป็นเจ้าของเว็บนั้น
-  Navigation  Bar  เพื่อให้ผู้ชมเว็บสามารถคลิกเลือกรายการที่ต้องการรับชมได้ทันที
-  ข้อมูลผลิตภัณฑ์  หรือข่าวสารประชาสัมพันธ์ของบริษัทที่ต้องการนำเสนอมากที่สุดในขณะนั้น
        ในกรณีที่มีการเลือกวางจุดเชื่อมโยงสำคัญไว้ในคอลัมน์เชื่อมโยงทั้งด้านซ้ายและขวา  ต้องพิจารณาพฤติกรรมการอ่านภาษาของแต่ละประเทศ  ซึ่งส่วนมากพบว่า  วิธีการข้อมูลของแต่ละภาษามักจะอ่านจากด้านซ้ายไปขวา  ดังนั้นจุดเชื่อมโยงที่สำคัญจึงควรนำเสนอไว้ที่คอลัมน์ด้านซ้ายมากกว่า

หมายเหตุ  ภาษาในกลุ่มเอเชียตะวันออกกลาง  เช่น  ภาษาจีน  เกาหลี  จะใช้วิธีการอ่านจากด้านขวามือไปซ้ายมือ  อย่างไรก็ตาม  นักพัฒนาเว็บควรออกแบบเว็บตามมาตรฐานสากล  คือ  ภาษาอังกฤษ  เป็นหลักมากกว่า

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

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

เว็บไซต์ http://www.toyota.com ใช้เทคโนโลยี Flash นำเสนอรถรุ่นต่างๆ และจัดพื้นที่ของภาพให้มีขนาดใหญ่เพื่อดึงดูดสายตาของลูกค้าที่เข้ามายังหน้าเว็บ

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

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

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

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