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

3. ออกแบบเว็บไซต์

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

ปัญหาเหล่านี้มักเกิดจาก การขาดการออกแบบเว็บไซต์ที่ดีนั่นเองค่ะ

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

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

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

หัวข้อที่เราจะศึกษาเกี่ยวกับเรื่องการออกแบบเว็บไซต์

3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
3.2 การออกแบบระบบเนวิเกชั่น (Site Navigation Design)
3.3 การออกแบบหน้าเว็บเพจ (Page Design)

การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)

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

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

อันนี้เจอกับตัว เช่น เว็บไซต์ดาวน์โหลดบางแห่ง คลิกแล้วคลิกอีก ยังหาไม่เจอลิงค์ดาวน์โหลด หาเว็บใหม่เลยค่ะ 

1. จากเนื้อหาเว็บไซต์ที่เราเตรียมไว้ ให้นำมาจัดหมวดหมู่ และลำดับเนื้อหาก่อนหลัง

Section 1
      Section 1.1
      Section 1.2
      Section 1.3
              Section 1.3.1
              Section 1.3.2
Section 2
Section 3
      Section 3.1
      Section 3.2

ข้อมูลผลิตภัณฑ์และข้อมูลต่างๆ ของบริษัท

1. สินค้า
            1.1 Computer
            1.2 Scanner
            1.3 Printer
                  1.3.1  Laser Printer
                  1.3.2  Inkjet Printer
2. สถานที่จำหน่าย
3. Support
           3.1 FAQ
           3.2 Manual
4. เกี่ยวกับบริษัท
          4.1 ประวัติ
          4.2 สถานที่ตั้ง

.

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

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

โครงสร้างเว็บไซต์อย่างง่าย เว็บไซต์นำเสนอข้อมูลดารานักร้อง

.
โครงสร้างเว็บไซต์ นำเสนอข้อมูลผลิตภัณฑ์และข้อมูลต่างๆ ของบริษัท

ระบบ Navigation

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

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

องค์ประกอบของระบบ Navigation

1. เครื่องนำทาง

• เมนูหลัก เป็นเมนูสำหรับลิงค์ไปยังหน้าหัวข้อหลักของเว็บไซต์ มักอยู่ในรูปของลิงค์ที่เป็นข้อความหรือภาพกราฟฟิก และมักถูกจัดวางอยู่ด้านบนในเว็บเพจทุกหน้า
• เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภายในกลุ่มย่อยที่มี เนื้อหาเกี่ยวเนื่องกัน มักอยู่ในรูปแบบของลิงค์ข้อความหรือกราฟฟิกเช่นกัน
• เครื่องมือเสริม สำหรับช่วยเสริมการทำงานของเมนู มีได้หลายรูปแบบ เช่น ช่องค้นหาข้อมูล (Search Box) , เมนูแบบดร็อปดาวน์ (Drop-Down menu) , แผนผังเว็บไซต์ (Site Map), อิมเมจแมพ (Image Map)

2. เครื่องมือบอกตำแหน่ง (Location Indicator)
เป็นสิ่งที่ใช้แสดงว่า ขณะนี้ผู้ชมกำลังอยู่ในตำแหน่งใดในเว็บไซต์ เครื่องบอกตำแหน่งมีได้หลายรูปแบบ เช่น ข้อความภาพกราฟฟิกที่แสดงชื่อเว็บเพจ หรือข้อความบ่งชี้ และบ่อยครั้งที่เครื่องมือบอกตำแหน่งถูกรวมไว้กับตัวเมนูเลย

ตัวอย่าง ระบบ Navigation เว็บไซต์ดารานักร้อง ที่มีข้อมูลไม่กี่หน้า

ตัวอย่าง ระบบ Navigation เว็บไซต์ร้านหนังสือ Asia Books

.

ลักษณะของระบบเนวิเกชั่นที่ดี

• อยู่ในตำแหน่งที่เห็นได้ชัดและเข้าถึงง่าย เช่น ส่วนบนหรือด้านขวาของเว็บเพจ
• เข้าใจง่ายหรือมีข้อความกำกับชัดเจน ผู้ชมใช้ได้ทันทีโดยไม่ต้องเสียเวลาศึกษา
• มีความสม่ำเสมอ วางอยู่ในตำแหน่งเดียวกันของทุกหน้าเว็บเพจ และใช้รูปแบบ สีสัน เหมือนกัน ทำให้ผู้ใช้รู้สึกคุ้นเคย
• บอกผู้ใช้ว่ากำลังอยู่ที่ตำแหน่งใดของเว็บไซต์
• มีการตอบสนองเมื่อใช้งาน เช่น เปลี่ยนสีเมื่อผู้ชมชี้เมาส์หรือคลิก
• จำนวนรายการพอเหมาะ ไม่มากเกินไป
• มีหลายทางให้เลือกใช้ เช่น เมนูกราฟฟิก , เมนูข้อความ, ช่องค้นหาข้อมูล (Search Box), เมนูดร็อปดาวน์ (Drop-down menu) , แผนผังเว็บไซต์ (Site Map)
• มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผู้ชมกลับไปเริ่มต้นใหม่ในกรณีที่หลงทางไม่รู้ว่าตัวเองอยู่ที่ตำแหน่งใด