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

webdevelopment

การวางโครงสร้างเว้บไซต์

1. เว็บที่มีโครงสร้างแบบเรียงลำดับ (Sequential Structure)

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

5

2. เว็บที่มีโครงสร้างแบบลำดับขั้น (Hierarchical Structure)

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

6

3. เว็บที่มีโครงสร้างแบบตาราง (Grid Structure)

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

7

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

4. เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure)

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

8

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

การกำหนดขนาดเว็บเพจ

การกำหนดขนาดหน้าจอของเว็บไซต์ถือเป็นส่วนสำคัญ เพื่อให้รองรับการแสดงผลที่สวยงามในทุก ๆ เว็บเบราว์เซอร์ หรือ การแสดงผลบนอุปกรณ์ที่แตกต่างกัน เช่น คอมพิวเตอร์โน้ตบุ๊ก แท็บเล็ต สมาร์ทโฟน หรือ อุปกรณ์อื่น ๆ เป็นต้น แต่ละอุปกรณ์มีขนาดความละเอียดของหน้าจอ(resolution) ที่แตกต่างกันออกไป เช่น 800*600, 1024*768, หรือ 1280*1024 เป็นต้น ดังตารางที่แสดงข้อมูลสถิติความละเอียดหน้าจอของผู้เข้าใช้งานเว็บไซต์ ซึ่งปัจจุบัน 99% ของผู้เข้าใช้งานเว็บไซต์มีขนาดความละเอียดหน้าจออยู่ที่ 1024*768 พิกเซล หรือ มากกว่า

 ตารางแสดง สถิติขนาดความละเอียดหน้าจอ

Year

higher

1920×1080

1366×768

1280×1024

1280×800

1024×768

800×600

2014

34%

13%

31%

8%

7%

6%

0.50%

2013

36%

11%

25%

10%

8%

9%

0.50%

2012

35%

8%

19%

12%

11%

13%

1%

2011

50%

6%

 

15%

14%

14%

0%

2010

39%

2%

 

18%

17%

20%

1%

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

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

1. การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหา

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

2. การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก

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

3.การออกแบบเว็บไซต์ที่มีทั้งภาพและเนื้อหา

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

การใช้สี

1. สีฟ้าและสีน้ำเงิน

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

2. สีส้ม

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

3. สีเหลือง

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

4. สีเขียว

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

5. สีขาว

ให้ความรู้สึก บริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน เปิดเผย การเกิด ความรัก ความหวัง ความจริง ความเมตตา ความศรัทธา ความดีงาม 

6. สีเทา

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

ลักษณะข้อมูลที่ดี

                ข้อมูลที่นำเสนอบนเครือข่ายอินเทอร์เน็ตจะต้องเป็นข้อมูลที่เป็นประโยชน์และมีคุณภาพ ถ้าข้อมูลที่นำเข้าเป็นข้อมูลขยะ ผลลัพธ์ที่ได้จากการประมวลผลก็จะเป็นขยะด้วย (Garbage In Garbage Out) นั่น หมายถึง ข้อมูลนำเข้าเป็นส่วนที่สำคัญ และ ต้องเป็นข้อมูลที่ดี ซึ่งลักษณะของข้อมูลที่ดี มีดังนี้
                1. ความถูกต้องของข้อมูล ข้อมูลที่ดีจะต้องมีความถูกต้อง ไม่คลาดเคลื่อน เนื่องจากผลลัพธ์ที่ได้จากการประมวลผล หรือ จากการนำเสนอขึ้นอยู่กับข้อมูลต้นฉบับ และ แหล่งที่มาของข้อมูล ซึ่งเป็นเรื่องที่สำคัญในการนำเอาข้อมูลต่าง ๆ มานำเสนอบนระบบเครือข่ายอินเทอร์เน็ต เนื่องจากข้อมูลที่นำเสนอจะถูกเผยแพร่ไปอย่างรวดเร็ว ข้อความ รูปภาพ หรือ ข้อมูลที่ไม่ถูกต้อง อาจก่อให้เกิดความเสียหายต่อภาพลักษณ์ขององค์กร หรือ อาจก่อให้เกิดความเสียหายต่อบุคคลอื่น ซึ่งจะต้องมีการตรวจสอบความถูกต้องของตัวข้อมูลก่อนนำเสนอ และ ตรวจสอบความทันสมัยของข้อมูลอย่างสม่ำเสมอ
                2. มีความน่าเชื่อถือสามารถตรวจสอบได้ ข้อมูลที่นำมาเสนอจะต้องมีความน่าเชื่อถือ หรือหากคัดลอกมา จะต้องสามารถตรวจสอบถึงแหล่งที่มาที่ใช้ในการอ้างอิงได้ แหล่งที่มาของข้อมูลจะต้องมีความน่าเชื่อถือ เนื่องจากข้อมูลบนเครือข่ายอินเทอร์เน็ตมีจำนวนมากซึ่งข้อมูลเหล่านั้นอาจจะไม่ใช่ข้อมูลที่เป็นจริงเสมอไป ซึ่งถือว่าเป็นข้อมูลขยะ ก่อนที่จะนำมาใช้ในการอ้างอิงจะต้องตรวจสอบข้อมูลให้มีความถูกต้องของข้อมูลนั้น ๆ ก่อนทำการเผยแพร่
                3. มีความเป็นปัจจุบัน ข้อมูลบางข้อมูลที่มีการเปลี่ยนแปลงตลอดเวลา จะต้องมีการปรับปรุงเปลี่ยนแปลงเพื่อให้มีความเป็นปัจจุบันของตัวข้อมูล ซึ่งหากข้อมูลล้าสมัยอาจทำให้การนำเอาไปใช้งานได้ผลลัพธ์ที่ผิดพลาดขาดความแม่นยำ ผิดเพี้ยนไปตามเงื่อนไขของเวลา ทำให้ข้อมูลที่ได้นั้นด้อยคุณภาพเช่น ข้อมูลสำมะโนประชากร ประวัติที่อยู่คนไข้ ราคาทอง ราคาน้ำมัน อัตราดอกเบี้ยธนาคาร ข้อมูลผู้บริหาร ระดับน้ำในเขื่อน เป็นต้น
                 4. ครบถ้วนสมบูรณ์ ข้อมูลที่ดีต้องมีความครบถ้วนสมบูรณ์ภายในตัวข้อมูลเอง เพื่อความสะดวกรวดเร็วในการนำเอาข้อมูลนั้นไปใช้งาน เช่น ข้อมูลโรงแรมที่พัก จะต้องมี ชื่อโรงแรม ที่อยู่ เบอร์โทรศัพท์แฟกซ์ อีเมล์ เว็บไซต์ การเดินทาง อัตราราคาห้องพัก เป็นต้น หรือ ข้อมูลประวัติการรักษาพยาบาลของผู้ป่วย จะต้องมีประวัติการรักษา ชื่อ นามสกุล ที่อยู่ โรคที่เข้ารับการรักษา ยาที่แพ้ หมอที่ทำการวินิจฉัยโรค เป็นต้น ซึ่งข้อมูลเหล่านี้จะต้องถูกต้อง ครบถ้วนสมบูรณ์ และ เป็นปัจจุบัน ถ้าหากไม่สมบูรณ์ข้อมูลที่มีอาจเป็นข้อมูลขยะ ทำให้เปลืองพื้นที่ในการจัดเก็บและใช้งานประโยชน์อะไรไม่ได้
                 5. ตรงตามความต้องการของผู้ใช้ ในการนำเสนอต้องดูกลุ่มเป้าหมายของผู้ที่เข้าชมเว็บไซต์ผู้พัฒนาจะต้องนำเสนอข้อมูลให้ตรงตามความต้องการ ซึ่งจะต้องจัดเก็บ และ นำเสนอข้อมูลให้ครบถ้วนสมบูรณ์ ข้อมูลมีความเป็นปัจจุบัน สามารถเข้าถึงข้อมูลได้ง่าย และ ผู้ใช้สามารถนำเอาไปใช้งานให้เกิดประโยชน์ สามารถนำเอาข้อมูลนั้นไปประมวลผล หรือ ไปใช้อ้างอิงเพื่อการตัดสินใจ เป็นต้น