Web Design Techniques by Thanapat Yeekhaday

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

การจัดการธุรกิจดวยคอมพิวเตอร (3562104)

วัตถุประสงค เมื่อจบบทเรียนนีแ้ ลวนักศึกษาสามารถ บอกองคประกอบพื้นฐานของการออกแบบเว็บไซตไดอยางถูกตอง ออกแบบเว็บไซตไดอยางถูกตอง และเหมาะสม

เนื้อหา คําศัพทเกี่ยวกับเว็บไซต องคประกอบพื้นฐานของการออกแบบ วิธีการสรางเว็บเพจ กระบวนการ 13 ขัน ้ ตอนในการออกแบบ หลักการออกแบบเว็บไซต รูปแบบของเว็บไซต

คําศัพทเกี่ยวกับเว็บไซต เว็บไซต (Web site)

แหลงขอมูลที่บรรจุอยูบนเครือขายอินเตอรเน็ต Æ หนังสือหนึ่งเลม

เว็บเพจ (Web page)

หนาที่แสดงเอกสาร เนื้อหาของเว็บไซต Æ เอกสารแตละหนา

โฮมเพจ (Home page)

หนาแรกของเว็บไชต Æ ปกของหนังสือ

องคประกอบพื้นฐานของการออกแบบเว็บไซต ความเรียบงาย (Simplicity) มีรูปแบบที่เรียบงาย ไมซับซอนและใชงานไดอยางสะดวก สื่อสารเนื้อหาถึงผูใชโดยมีเฉพาะองคประกอบเสริมที่จําเปนเทานั้น ความสม่ําเสมอ (Consistency) สรางความสม่ําเสมอใหกับเว็บไซตโดยใชรูปแบบเดียวกันตลอดทั้งเว็บไซต ทั้งในสวนของรูปแบบหนา สไตลของกราฟก ระบบเนวิเกชัน และโทนสี ถาลักษณะของแตละหนาในเว็บไซตเดียวกัน แตกตางกัน อาจทําใหผูใชเกิด ความสับสนได

ความเปนเอกลักษณ (Identity)

การออกแบบตองคํานึงถึงลักษณะขององคกร รูปแบบของเว็บไซตสามารถสะทอนถึงเอกลักษณขององคกร

เนื้อหาที่มีประโยชน (Useful Content)

ควรจัดเตรียมเนื้อหาและขอมูลที่ผูใชตองการใหถูกตองและสมบูรณ ควรมีการปรับปรุงและเพิ่มเติมใหทันตอเหตุการณอยูเสมอ

ระบบเนวิเกชันที่ใชงานงาย (User-Friendly Naviagtion)

ระบบเนวิเกชันจะตองออกแบบใหผูใชเขาใจงายและใชงานสะดวก โดยใช กราฟกที่สื่อความหมายรวมกับคําอธิบายอยางชัดเจน มีรูปแบบและลําดับของรายการอยางสม่ําเสมอ

มีลักษณะที่นาสนใจ (Visual Appeal)

ความนาในใจของเว็บไซตจะมีความสัมพันธกับคุณภาพขององคประกอบตาง ๆ เชน คุณภาพของกราฟก การใชชนิดตัวอักษร การใชโทนสี เปนตน

การใชงานอยางไมจํากัด (Compatibility) ควรออกแบบเว็บไซตใหครอบคลุมกับผูใชสวนใหญมากที่สุด ไมควรมีการติดตัง้ โปรแกรมเพิ่มเติม หรือเลือกใชบราวเซอรชนิดใดชนิดหนึ่ง สามารถแสดงผลไดทุกระบบปฏิบัติการและที่ความละเอียดหนาจอตาง ๆ กันได อยางไมมีปญหา คุณภาพในการออกแบบ (Design Stability) ควรใหความสําคัญกับการออกแบบเว็บไซต ควรมีมาตรฐานการออกแบบและการจัดระบบขอมูล

ระบบการใชงานที่ถูกตอง (Functional Stability)

ระบบการทํางานตาง ๆ ในเว็บไซตจะตองมีความแนนอนและทําหนาที่ได อยางถูกตอง เชน การกรอกขอมูล การเชื่อมโยง เปนตน ควรมีการตรวจสอบการทํางานอยูเสมอ

ปจจัยสําคัญทีผ่ ูใชตองการจากเว็บไซต มีเนื้อหาที่เปนประโยชน ตรงกับที่ผูใชตองการ มีการปรับปรุงเนื้อหา และพัฒนาเว็บไซตอยูเสมอ ใชเวลาในการดาวนโหลดนอย แสดงผลเร็ว การใชงานที่สะดวก เขาใจงาย

ทีมงานพัฒนาเว็บไซต Webmaster เปนผูควบคุมในเรื่องการออกแบบ เนือ ้ หา และรายละเอียดทางเทคนิค Information Architect ทําหนาทีจ่ ด ั ระเบียบขอมูลและทดสอบประสิทธิภาพในการใชงาน Designer เปนผูอ  อกแบบลักษณะหนาตาของเว็บไซต และองคประกอบตาง ๆ HTML and JavaScript Coder รับผิดชอบการสรางเว็บเพจโดยอาศัยเครือ ่ งมือตาง ๆ ปรับปรุง เปลี่ยนแปลงขอมูล รวมถึงการอัพโหลดไฟล

Developer/Programmer เปนผูเขียนสคริปตและโปรแกรมตาง ๆ อาจตองเกี่ยวของกับระบบฐานขอมูล System Administrator ทําหนาที่ควบคุม ดูแลเว็บเซิรฟเวอร รวมถึงฮารดแวรและซอฟตแวรอื่นที่ เกี่ยวของ สามารถวิเคราะหและปรับตั้งระบบเพื่อการทํางานที่มีประสิทธิภาพ Content Editor/Writer เปนบรรณาธิการ โดยรับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูก ตอง 12

วิธีการสรางเว็บเพจ สรางดวยภาษา HTML

โดยการใชโปรแกรมสรางเอกสาร (Text Editor) โดยทั่วไป เชน โปรแกรม NotePad โดยการใสคําสัง่ (Tag) ของภาษา HTML เขาไปโดยตรง วิธีนี้ ผูสรางตองมีประสบการณและการเรียนรูภาษา HTML มากอน สรางดวยโปรแกรมประยุกต เปนการสรางแบบที่เรียกวา WYSIWYG (What-You-See-IsWhat-You-Get) เชน Dreamweaver, FrontPage เปนตน

โปรแกรมชวยในการสรางเว็บ Macromedia Dreamweaver Microsoft FrontPage Allaire HomeSite CoffeeCup GoLive HotDog Pro HotMetaPro NetObjects Fusion

Macromedia Dreamweaver สามารถออกแบบหนาเว็บไดอยางสะดวกโดยอาศัยเครื่องมือตาง ๆ โดยไม

จําเปนตองรูเกี่ยวกับภาษา HTML มีหนาจอในการแสดงหนาจอการออกแบบและหนาจอคําสั่ง มีระบบเทมเพลตที่จะทําใหผูออกแบบสามารถใชโครงสรางเดียวกันทั้ง เว็บไซต มีเครื่องมือเพื่อชวยในการดาวนโหลดและอัพโหลดไฟลระหวางเครื่อง เซิรฟเวอรกับเครื่องที่ใชพัฒนาเว็บเพจ

Microsoft FrontPage ลักษณะการทํางานใกลเคียงกับโปรแกรมอื่น ๆ ที่อยูในชุด Office มีระบบอํานวยความสะดวกแบบ Wizard มีระบบในการบริหารจัดการเว็บไซต เชน ระบบรายงานเกี่ยวกับหนาเว็บเพจ

ที่แสดงผลชา เว็บเพจที่ถูกเพิ่มเขาไป ลิงคที่ใชงานไมได สามารถเชื่อมโยงกับระบบฐานขอมูลไดโดยสะดวก บางครั้งอาจมีคําสั่งเพิ่มเติมเขามาเกินความจําเปน หรืออาจเปลี่ยนแปลงโคด โดยไมรูตัว

Allaire HomeSite ชวยในการเขียนโคดภาษา HTML ดวยคุณสมบัติที่เรียกวา Tag

Insight และ Function Insight ซึ่งจะแสดงแอตตริบิวตที่ เหมาะสมขึ้นมาใหเลือกใชกับแท็กที่กําลังเขียน เหมาะสําหรับนักออกแบบเว็บที่ถนัดในการใชภาษา HTML

กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต Phase 1 สํารวจปจจัยสําคัญ (Research) 1. รูจักตัวเอง – กําหนดเปาหมายและสํารวจความพรอม 2. เรียนรูผูใช – ระบุกลุมผูใชและศึกษาความตองการ 3. ศึกษาคูแขง – สํารวจการแขงขันและเรียนรูคูแขงสิง่ ที่ไดรับ สิง่ ที่ไดรับ 1. เปาหมายหลักของเว็บไซต 2. ความตองการของผูใช 3. กลยุทธในการแขงขัน

Phase 2 : พัฒนาเนื้อหา (Site Content) 4. สรางกลยุทธการออกแบบ 5. หาขอสรุปขอบเขตเนื้อหา สิ่งที่ไดรับ 1. แนวทางการออกแบบเว็บไซต 2. ขอบเขตเนื้อหาและการใชงาน 3. ขอมูลทีถ่ ูกจัดอยางเปนระบบ

Phase 3 : พัฒนาโครงสรางเว็บไซต (Site Structure) 6. จัดระบบขอมูล 7. จัดทําโครงสรางขอมูล 8. พัฒนาระบบเนวิเกชัน สิง่ ที่ไดรับ 1. แผนผังโครงสรางขอมูล 2. แนวทางการทองเว็บ 3. ระบบเนวิเกชัน

Phase 4 : ออกแบบและพัฒนาหนาเว็บ (Visual design) 9. ออกแบบลักษณะหนาตาเว็บเพจ 10. พัฒนาเว็บตนแบบและขอกําหนดสุดทาย สิง่ ที่ไดรับ 1. ลักษณะหนาตาของเว็บไซต 2. เว็บเพจตนแบบที่จะใชในการพัฒนา 3. รูปแบบโครงสรางของเว็บไซต 4. ขอกําหนดในการพัฒนาเว็บไซต

Phase 5 : พัฒนาและดําเนินการ (Production and Operation) 11. ลงมือพัฒนาเว็บเพจ 12. เปดตัวเว็บไซต 13. ดูแลและพัฒนาตอเนื่อง สิง่ ที่ไดรับ 1. เว็บไซตทสี่ มบูรณ 2. เปดตัวเว็บไซตและทําใหเปนที่รูจัก 3. แนวทางการดูแลและพัฒนาตอไป

หลักในการออกแบบเว็บไซต การออกแบบโครงสรางเว็บไซต (Website Structure

Design) การออกแบบหนาตาเว็บไซต (Website Interface Design)

การออกแบบโครงสรางเว็บไซต Site Map เปนการวางแผนเนื้อหาของเว็บไซต เพื่อเปนโครงสรางในการจัดวางหนาเว็บ เพจทั้งหมด เปรียบเสมือนแผนที่ที่ทําใหเห็นโครงสรางทั้งหมดของเว็บไซต ชวยในการออกแบบเว็บไซตเพื่อไมใหหลงทาง หรือการเชือ ่ มโยงแตละหนา เปนการนําเสนอแนวความคิดแบบลําดับชั้นจากสวนใหญไปหาสวนยอย หรือ ที่เรียกวาแบบบนลงลาง (Top Down Thinking)

Site Map ที่ดี

ทุก ๆ เว็บเพจจะตองมีลิงกทางออกเสมอ ทุก ๆ เว็บเพจควรมีลิงกกลับหนาโฮมเพจ หรือจุดเริ่มตน ควรมีหนาแสดง Site Map ในกรณีที่เว็บไซตมีจํานวนหนามาก ๆ

สามารถประเมินราคาจาก Site Map ได

การออกแบบหนาเว็บไซต ใชงานงายและสะดวก โดยมีระบบ Navigation หรือระบบนําทางที่ดี

เขาใจงาย การใชงานไมซับซอน มองเห็นไดชัด ควรวางไวดานซาย หรือดานบน อยาเคลือ ่ นยายไปมา ควรมีลิงกกลับไปยังโฮมเพจ

มีการออกแบบกราฟกที่สวยงาม สื่อความหมาย

ไมควรเสียเวลาโหลดภาพมากเกินไป

ขนาดกราฟกรวมกันไมควรเกิน 75 KB เปน Flash ไมควรเกิน 120 KB

ภาพรวมทั้งหมดควรออกมาในอารมณเดียวกัน (Theme) หรือโครง

เดียวกัน แนวความคิดเดียวกัน

รูปแบบของเว็บไซต แบบ Content แบบ Image แบบผสม

แบบ Content ลักษณะงานจะเปนภาพกราฟกเล็ก ๆ มาเรียงกันเปนหนาเว็บเพจ จะมีเนื้อหามากกวารูป พัฒนามาจากการเขียนดวยภาษา HTML มีขอดีคอื ความเร็วในการโหลด

แบบ Image เปนภาพกราฟกขนาดใหญเต็มหนึ่งหนา แลวตัดแบงเปนชิ้นเล็ก ๆ (Slice

Image) มาวางเรียงกัน เพื่อความเร็วในการดาวนโหลด และแสดงผล มีรูปแบบที่สวยงามและหลายหลาย โดยจะทําการสรางจากโปรแกรมสรางรูป หรือตกแตงรูปโดยทั่วไป เหมาะกับหนาที่มีเนื้อหานอย ตองการความสวยงามเปนหลัก หากภาพใหญจะทําใหการดาวนโหลดชา

แบบผสม เปนการผสมผสานระหวางแบบ Content และแบบ Image

ความผิดพลาดในการออกแบบเว็บไซต ใชโครงสรางหนาเว็บเปนระบบเฟรม ใชเทคโนโลยีชั้นสูงโดยไมจําเปน ใชตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา มีที่อยูเว็บไซตที่ซับซอน (URL) ยากตอการจดจําและพิมพ ไมมีการแสดงชื่อและที่อยูของเว็บไซตในหนาเว็บเพจ มีความยาวของหนามากเกินไป ขาดระบบเนวิเกชันที่มีประสิทธิภาพ

ใชสีของลิงคไมเหมาะสม ขอมูลเกาไมมีการปรับปรุงใหทันสมัย เว็บเพจแสดงผลชา

มีรายงานวิจัยวา ถาเกิน 8 วินาที ผูใชกวา 90% จะเปลี่ยนไปดูเว็บอื่นแทน