การออกแบบ เว็บไซต์

Bio

วิชาความรู้ด้านการออกแบบเว็บที่ดี

ความรู้ความเข้าใจรากฐานเกี่ยวกับเว็บ

เว็บ ปรับปรุงมาจากเอกสารอิเล็กทรอนิกส์ ที่ใช้แบบอย่างการเชื่อมต่อแบบไฮเปอร์ลิงค์หรือไฮเปอร์มีเดีย (Hyperlink/Hypermedia)
ถ้าเกิดเทียบเว็บเป็นหนังสือเล่มหนึ่ง เว็บ จะมีส่วนประกอบดังต่อไปนี้

1. โฮมเพจ (Home Page) เป็นหน้าแรกของเว็บ จะปฏิบัติหน้าที่เหมือนปกหนังสือ บทนำ คำอธิบายรวมทั้งสารบาญ ด้วยเหตุนี้ในหน้าโฮมเพจก็เลยมีชื่อเว็บ เครื่องหมาย ข้อแนะนำเว็บรวมทั้งการเชื่อมต่อไปยังหน้าอื่นๆในเว็บนั้นๆ

2. เว็บเพจ (Web Page) เป็นหน้าของเว็บไซต์ที่ใส่รายละเอียดต่างๆเสมือนรายละเอียดของหนังสือ แม้กระนั้นวางแบบเป็นรูปแบบของเอกสารอิเล็กทรอนิกส์ซึ่งสามารถเชื่อมโยงไปยังหน้าเอกสารต่างๆที่อยากโดยใช้ต้นแบบการเชื่อมต่อแบบไฮเปอร์ลิงค์หรือไฮเปอร์มีเดีย (Hyperlink/Hypermedia)

3. เว็บ (Web site) เป็นการรวมเอาหน้าเว็บเพจหลายๆหน้าไว้ร่วมกัน โดยมีโฮมเพจเป็นปก เว็บจะมีชื่อต่างๆกันไปยกตัวอย่างเช่น WWW.esanpt1.org เป็นเว็บของสำนักงานเขตพื้นที่การเล่าเรียนจังหวัดนครปฐมเขต 1 ฯลฯ

ส่วนประกอบของเว็บไซต์ (Web Structure)

หากพวกเราเข้าไปใช้เว็บธรรมดาในตอนนี้จะพบว่า แต่ละเว็บ จะมีต้นแบบส่วนประกอบที่แตกต่าง ดูท่าจะขึ้นกับทักษะและก็ความนิยมชมชอบของผู้พัฒนาเว็บไซต์เป็นหลักอย่างไรก็ดี ลินช์รวมทั้งฮอร์ตัน (Lynch and Horton, 1999) จ ึงได้เสนอแนวความคิดสำหรับเพื่อการทำเว็บไซต์ว่า การออกแบบเว็บไซต์ที่ดีน่าจะจะต้องวางองค์ประกอบให้มีความสมดุล มีการเชื่อมต่อเกี่ยวข้องกัน ระหว่างรายการ (Menu)หรือโฮมเพจ กับหน้ารายละเอียดอื่นๆรวมทั้งการเชื่อมต่อไปสู่ภาพและก็เนื้อความต่างๆโดยจำเป็นต้องคิดแผนองค์ประกอบให้ดี เพื่อคุ้มครองป้องกันปัญหาที่จะกำเนิดต่อผู้ใช้ ได้แก่ การหลงทางของผู้ใช้ ในขณะ ไปสู่รายละเอียดในจุดร่วม (Node) ต่างๆฯลฯ จากวิธีการนี้แปลว่าส่วนประกอบของเว็บเป็นส่วนที่ควรจะให้ความใส่ใจ องค์ประกอบที่ดีจะช่วยมีผลที่ดีต่อผู้ใช้ เนื่องจากว่าข้อมูลที่มีอยู่ล้นหลามนั้นจำต้องอาศัย การเชื่อมต่อรายละเอียด หรือการจัดระเบียบปฏิบัติของรายละเอียดให้กับการค้นหาด้านในเว็บ การจัดระเบียบปฏิบัติที่ดี จะช่วยทำให้ผู้ใช้มีความสบาย ในเวลาเดียวกันองค์ประกอบที่ไม่ สมควรก็ย่อมทำให้เกิดผลเสียและไม่ดีต่อผู้ใช้ด้วยเหมือนกัน ในที่นี้ จะขอนำเสนอต้นแบบองค์ประกอบของเว็บตามแนวความคิดของ Lynch and Horton ดังต่อไปนี้

1. องค์ประกอบแบบเรียงลำดับ (Sequential Structure) เป็นส่วนประกอบที่ใช้เก็บข้อมูลที่เกิดเรื่องราวเป็นลำดับเวลา หรือดำเนินรายละเอียดไปเป็นลำดับ หรือจากเรื่องปกติ กว้างๆไปสู่เรื่องที่เจาะจงเฉพาะเจาะจงมากยิ่งขึ้น หรือ มีเนื้อหาเยอะขึ้นเรื่อยๆ หรือการจัดลำดับเรียกตัวอักษร อาทิเช่น ดัชนี สารานุกรม หรือคำอธิบายศัพท์ อย่างไรก็แล้วแต่ส่วนประกอบอย่างนี้ เหมาะสมกับเว็บไซต์ที่มีขนาดเล็ก รายละเอียดไม่สลับซับซ้อน เสมือนการอ่านหนังสือเรียงลำดับไปครั้งละหน้า ดังรูป

ข้างในเว็บ จะเดินเรื่องไปในลักษณะเส้นตรง โดยมีปุ่มเดินหน้า ถอยหลังเป็นเครื่องไม้เครื่องมือหลักที่ เริ่มจากหน้าเริ่ม (Start Page) ซึ่งโดย ธรรมดาเป็นหน้าต้อนรับหรือเสนอแนะให้ผู้ใช้รู้ถึงเนื้อหาของเว็บไซต์ แล้วก็ชี้แจงให้รู้ถึงกรรมวิธี ไปสู่รายละเอียดและก็การใช้แรงงานของปุ่มต่างๆเมื่อผู้ใช้ผ่านจากหน้าเริ่มเข้าไปสู่ข้างในจะเจอกับหน้ารายละเอียด (Topic Page) ต่างๆโดยในแต่ละหน้า ถ้าเกิดมีรายละเอียดที่สลับซับซ้อนเกินกว่าหนึ่งหน้าก็สามารถเพิ่ม เนื้อหารายละเอียดโดยทำเป็นหน้ารายละเอียดย่อย (Sub Topic) แล้วก็ทำเชื่อมโยงกับหน้ารายละเอียด หลักนั้นๆซึ่งๆหน้ารายละเอียดย่อยพวกนี้มีลักษณะเป็นหน้าคนเดียว ที่เมื่อเข้าไปดูกรยละเอียดของรายละเอียด แล้ว จำต้องกลับมายังหน้าหลักหน้าเก่าแค่นั้น ไม่สามารถที่จะผ่านไปยังรายละเอียดอื่นๆได้ และก็เมื่อผู้ใช้ ผ่านไป จนกระทั่งจบรายละเอียดทั้งสิ้นและก็จะมาถึงหน้าในที่สุด (End Page) ซึ่งบางทีก็อาจจะเป็นหน้าที่ใช้สรุปรายละเอียดทั้งปวง การเชื่อมต่อระหว่างหน้าแต่ละหน้าใช้รูปแบบของการใช้ปุ่มหน้าถัดไป (Next Topic) เพื่อ เดินหน้าไปสู่หน้าถัดไป ปุ่มหน้าที่แล้ว (Previous Topic) เพื่อปรารถนากลับไปสู่หน้าที่ผ่านมา ในส่วน ของการเข้าไปสู่หน้ารายละเอียดย่อยบางทีอาจใช้รูปแบบของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย ที่ทำเอาไว้ภายในหน้ารายละเอียด หลักเชื่อมโยงไปสู่หน้ารายละเอียดย่อย และก็ใช้ปุ่มกลับมายังหน้าหลัก (Main Topic) ในเรื่องที่อยู่ในหน้า รายละเอียดย่อย รวมทั้งปรารถนากลับไปยังหน้าประเด็นหลักดังรูป

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

2. มีส่วนประกอบแบบลำดับชั้น (Hierarchical Structure) เป็นส่วนประกอบที่มีแนวความคิดเดียวกับ กราฟหน่วยงาน ด้วยเหตุว่าผู้ใช้ส่วนมากจะเคยชินกับรูปแบบของกราฟแบบหน่วยงานธรรมดาอยู่แล้ว ก็เลยเป็นการไม่ยุ่งยากต่อการทำความเข้าใจกับส่วนประกอบของรายละเอียดในเว็บรูปแบบนี้ เว็บชนิดนี้เป็นการมีจุดเริ่มที่จุดร่วมจุดเดียว โน่นเป็น โฮมเพจ (Homepage) แล้วก็เชื่อมโยงไปสู่รายละเอียด ในลักษณะเป็นลำดับจากบนลงข้างล่าง ดังภาพ

จากภาพ จะมองเห็นได้ว่า จากหน้า Home page จะแบ่งรายละเอียดออกเป็น 5 กรุ๊ปรายละเอียดย่อย โดยหน้าแรกของกรุ๊ปรายละเอียดย่อยนั้น เรียกว่า Start page ในหน้า Start page นี้ จะเป็นคำชี้แจง แจกแจง บอกหัวข้อหรือเนื้อหาของรายละเอียดในกรุ๊ปรายละเอียดย่อย เมื่อผู้ชมเข้าไปสู่รายละเอียดย่อยโดยใช้ปุ่มหน้าถัดไป หรือหน้าที่แล้ว (Next/Previous Topic) สำหรับในการมองรายละเอียดย่อยครั้งละหน้า เมื่อถึงหน้าในที่สุดก็ใช้ปุ่มกลับขึ้นไปสู่หน้าใจความหลัก (Up to Start page) ในเรื่องที่มีการแบ่งรายละเอียดย่อยเป็นส่วนต่างๆควรจะจัดระเบียบรายละเอียดของส่วนนั้นๆในลักษณะส่วนประกอบแบบลำดับชั้นอีกชั้นยอด อย่างเช่น หน้า Topic Page 5.2 บางทีอาจแบ่งย่อยรายละเอียดในข้อมูลเพิ่มเติมอีกก็สามารถทำหน้า Sub Topic Page 5.2.1 และก็ Sub Topic Page 5.2.2ได้ แล้วหลังจากนั้นก็ระบุลักษณะการเข้าสู่รายละเอียดในแบบเดียวกันกับที่กล่าวมาแล้วข้างต้น แล้วก็ในที่สุด เมื่อกลับจากมองรายละเอียดย่อยมาที่หน้าแรกของใจความหลักแล้ว ก็จะมีปุ่มกลับไปหน้าโฮมเพจ (Home Page) เมื่ออยากได้กลับไปที่หน้าโฮมเพจเพื่อเลือกประเด็นหลักส่วนต่อไป จุดเด่นขององค์ประกอบลักษณะนี้ก็คือ ไม่ยุ่งยากต่อการแบ่งรายละเอียดของผู้ใช้แล้วก็เรียบเรียงข้อมูล ของผู้ออกแบบ ยิ่งกว่านั้นสามารถดูแลรวมทั้งแก้ไขปรับปรุงได้ง่ายเพราะมีการแบ่งเป็นหมวดหมู่ ที่แจ่มกระจ่าง ส่วนข้อผิดพลาดเป็นในส่วนของการออกแบบส่วนประกอบต้องระมัดระวังอย่าให้ส่วนประกอบที่ไม่สมดุล โน่นเป็น มีลักษณะที่ลึกเกินความจำเป็น (Too Deep) หรือตื้นเกินความจำเป็น (Too Shallow) ทำให้ส่วนประกอบของเว็บไซต์ไม่สมดุล จะต้องปรับหน้าให้เหมาะสมดังเช่นรายละเอียด ที่ลึกไปบางทีอาจจำเป็นต้องทำหน้ารายการอาหารเพิ่ม หรือเพิ่มการเชื่อมต่อกลับหน้าหลักได้ง่าย หากรายละเอียดตื้นเกินความจำเป็น บางทีอาจยุบรวมรายละเอียดบ้าง

3. องค์ประกอบแบบตาราง (Grid Structure) เป็นองค์ประกอบที่มีความยืดหยุ่นสำหรับผู้ใช้ ทุกๆรายละเอียดมีความหมายเท่าๆกัน หรือเป็นรายละเอียดย่อยๆแบบเดียวกันแล้วก็มีลักษณะด้วยกัน เพราะฉะนั้น ทุกๆรายละเอียดก็เลยเชื่อมโยงถึงกันได้ ดังที่ผู้ใช้อยากได้ ตัวอย่างเช่นเว็บชี้แนะ สถานที่ท่องเที่ยวของอำเภอต่างๆในจังหวัดนครปฐม บางทีอาจพัฒนาเว็บไซต์ดังต่อไปนี้

สำหรับในการจัดหน้าเว็บนี้ หน้าแรก หรือหน้าโฮมเพจ (Home Page) จะเป็นหน้าแผนภาพ (Map Page) ที่บอกให้เห็นองค์ประกอบของเว็บไซต์ ที่มีชื่ออำเภอทั้งยัง 7 อำเภอ แล้วก็สถานที่สำหรับท่องเที่ยว 3 ลักษณะ เป็นสถานที่สำหรับท่องเที่ยวทางด้านวัฒนธรรม (1) สถานที่ท่องเที่ยวทางธรรมชาติ (2) หรือสถานที่สำหรับท่องเที่ยวทางโบราณคดีวิทยา (3) ดังต่อไปนี้

เมื่อคลิกเข้าไปในชื่ออำเภอแต่ละอำเภอ จะเป็นหน้าแรกของอำเภอนั้นๆอย่างเช่นอำเภอเมืองฯ เชื่อมโยงไปยังสถานที่ท่องเที่ยวทางด้านวัฒนธรรม (1) สถานที่ท่องเที่ยวทางธรรมชาติ (2)หรือสถานที่สำหรับท่องเที่ยวทางโบราณคดีวิทยา (3)

เมื่อผู้ใช้คลิกเลือก สถานที่สำหรับท่องเที่ยวทางธรรมชาติ (2) ก็จะเข้าไปสู่หน้ารายละเอียด (Topic Page2/1) ก็จะแสดงเนื้อหาของสถานที่สำหรับท่องเที่ยวทางธรรมชาติของอำเภอเมือง ฯลฯ ส่วนการเชื่อมต่ออื่นๆผู้ออกแบบสามารถให้เชื่อมโยงถึงกันทุกหน้า หรือกลับหน้าหลักของแต่ละอำเภอ

4. ส่วนประกอบแบบใยแมงมุม (Web Structure) ส่วนประกอบชนิดนี้จะมีความยืดหยุ่นสูงที่สุด ทุกหน้าในเว็บไซต์สามารถจะเชื่อมโยงไปถึงกันได้หมด ผู้ใช้สามารถระบุแนวทางการไปสู่รายละเอียดได้ด้วยตัวเอง การเชื่อมต่อรายละเอียดแต่ละหน้าอาศัยการโยงใยเนื้อความที่มีความคิดรวบยอด (Concept) เช่นเดียวกัน ของแต่ละหน้าในรูปแบบของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย ดังรูป

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

การจัดส่วนประกอบภาพ

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

1. การผลิตเอกภาพ
2. การผลิตจุดแข็ง เน้นย้ำประเด็นสำคัญ

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

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

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

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

อ่านเพิ่มเติมได้ที่ลิงค์ด้านล่างนี้