กระบวนการพัฒนาเว็บไซต์
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บ ดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์ การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมี ข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
Phase 1: สำรวจปัจจัยสำคัญ(Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
Phase 2: พัฒนาเนื้อหา(Site Content)
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
Phase 3: พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
Phase 4: ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5:พัฒนาและดำเนินการ (Production & Operation)11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
การออกแบบเพื่อผู้ใช้
1. ออกแบบเพื่อผู้ใช้ (Design for Users)
กระบวนการแรกของการออกแบบ เว็บไซต์คือการกำหนดเป้าหมายของเว็บไซต์กำหนดกลุ่มผู้ใช้ ซึ่งการจะให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือจำลองสถานการณ์ สิ่งเหล่านี้จะช่วยให้เราสามารถออกแบบเนื้อหาและการใช้งานเว็บไซต์ได้อย่าง เหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้จริง
1.1 กำหนดเป้าหมายของเว็บไซต์
ขั้น ตอนแรกของการออกแบบเว็บไซต์ คือการกำหนดเป้าหมายของเว็บไซต์ให้แน่ชัดเสียก่อน เพื่อจะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้งเอาไว้ โดยทั่วไปมักจะเข้าใจว่าการทำเว็บไซต์มีจุดมุ่งหมายเพื่อบริการข้อมูลของ หน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมีเป้าหมายของตนเองแตกต่างกันออกไป
1.2 กำหนดกลุ่มผู้ใช้เป้าหมาย
ผู้ออกแบบเว็บไซต์จำเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซ ต์ เพื่อที่จะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่นเว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน เว็บท่า และเว็บไดเรกทอรี่ แต่เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สำหรับทุกคน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว
1.3 สิ่งที่ผู้ใช้ต้องการจากเว็บ
หลัง จากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลำดับต่อไปคือการออกแบบเว็บไซต์เพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่งที่น่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่ง ได้แก่
- ข้อมูลและการใช้งานที่เป็นประโยชน์
- ข่าวและข้อมูลที่น่าสนใจ
- การตอบสนองต่อผู้ใช้
- ความบันเทิง
- ของฟรี
- ข้อมูลและการใช้งานที่เป็นประโยชน์
- ข่าวและข้อมูลที่น่าสนใจ
- การตอบสนองต่อผู้ใช้
- ความบันเทิง
- ของฟรี
1.4 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
เมื่อ เราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ แล้ว เราก็ออกแบบเว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์
- ข้อมูลเกี่ยวกับบริษัท
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสื่อมวลชน
- คำถามยอดนิยม
- ข้อมูลในการติดต่อ
เทคนิคการทำ SEO
การทำ SEO หรือ Search Engine Optimizer นั้นเป็นการทำให้โครงสร้างข้อมูลภายในเว็บของเราที่บรรจุอยู่ใน HTML ของเรา และพวกURL ของเรานั้น มีความหมายและทำให้ Crawler
(ซึ่งต่อไปจะขอเรียกเป็น Search
Engine เพื่อให้เข้าใจตรงกัน) นั้นสามารถเข้ามาเก็บข้อมูลในเนื้อหาของเราได้ง่าย และตรงกับความต้องการให้ได้มากที่สุด
ซึ่งโดยปกติแล้วจะแนะนำให้ใช้ XHTML ร่วมกับ CSS โดยที่XHTML นั้นเป็นส่วนที่ใช้สำหรับใส่ข้อมูลและมี Tag พวก XHTML ต่าง ๆ เข้ามายุ่งเกี่ยวกับเนื้อหาให้น้อยที่สุด โดยมีแต่ส่วนที่กำหนดพื้นที่สำหรับแสดงผลต่าง ๆ เป็นชื่อที่สื่อความหมาย โดยใช้พวก <div> และ<span> แล้วกำหนดพื้นที่ของ Layout ด้วยชื่อที่กำหนดใน id หรือclass และโยนหน้าที่การกำหนด Layout ต่าง ๆ ไปที่ CSS ทั้งหมด เพื่อลดขนาดของไฟล์ HTML ที่ตัว Search Engine จะดึงไปเพื่อทำการParse ข้อมูลออกมา ทำให้ Search Engine ใช้เวลาประมวลผลต่าง ๆ ลดลงได้มากด้วย แถมลด B/W ลงไปได้เยอะมาก ๆ ในกรณีที่เว็บของเรานั้นมี Priority ในการเข้ามา index ข้อมูลของ Search Engine สูง ๆ
ซึ่งโดยปกติแล้วจะแนะนำให้ใช้ XHTML ร่วมกับ CSS โดยที่XHTML นั้นเป็นส่วนที่ใช้สำหรับใส่ข้อมูลและมี Tag พวก XHTML ต่าง ๆ เข้ามายุ่งเกี่ยวกับเนื้อหาให้น้อยที่สุด โดยมีแต่ส่วนที่กำหนดพื้นที่สำหรับแสดงผลต่าง ๆ เป็นชื่อที่สื่อความหมาย โดยใช้พวก <div> และ<span> แล้วกำหนดพื้นที่ของ Layout ด้วยชื่อที่กำหนดใน id หรือclass และโยนหน้าที่การกำหนด Layout ต่าง ๆ ไปที่ CSS ทั้งหมด เพื่อลดขนาดของไฟล์ HTML ที่ตัว Search Engine จะดึงไปเพื่อทำการParse ข้อมูลออกมา ทำให้ Search Engine ใช้เวลาประมวลผลต่าง ๆ ลดลงได้มากด้วย แถมลด B/W ลงไปได้เยอะมาก ๆ ในกรณีที่เว็บของเรานั้นมี Priority ในการเข้ามา index ข้อมูลของ Search Engine สูง ๆ
1.ใส่ Keywords หลัก ๆ ลงบน Title เพราะเป็นพื้นที่ที่ระบบSearch Engine ใช้ในการเข้ามา index ข้อมูลอันดับแรก ๆ
2. ใช้ tag Heading (พวก <h*></h*> ต่าง ๆ) ให้เป็นประโยชน์เพื่อให้ Search
Engine นั้นเข้าถึงข้อมูลสำคัญ ๆ ในส่วนนี้ก่อนเสมอ เพราะ Search Engine จะมองว่า Heading เป็นเหมือนหัวหลักของเนื้อหาเพื่อนำไปใช้สรุปเนื้อหาตอนค้นหาต่อไป
3. ใช้ alt, title, id, class และพวก caption ต่าง ๆ ที่ใช้อธิบายข้อมูลนั้น ๆ เพราะ Search Engine ไม่เข้าในว่ารูปภาพ หรือข้อมูลพวกBinary ต่าง ๆ ว่ามันคืออะไร
เช่น <img
src=”dog.jpg” alt=”Dog jumping into the air” />
4. ใช้ META Tag ถึงแม้ว่า META Tag จะเป็นเทคนิคเก่า ๆ นับตั้งแต่มี WWW แต่ก็เป็นการดีที่เราควรจะมีไว้ เพราะ Search Engine ยังคงใช้ข้อมูลนี้เพื่อการจัดอับดับข้อมูลของเรา ในกรณีที่ข้อมูลในหน้านั้น ๆ มีมากเกินไป
5.ใช้ Sitemap โดยการสร้าง Sitemap นั้นมีเครืองมือให้ใช้อยู่มากมาย และยิ่งใช้พวก CMS/Blogware ต่าง ๆ พวก Drupal, Wordpress, XOOP, Joomla/Mambo,
PHP-nuke ฯลฯ ก็มีmodule/component/plug-in เข้ามาช่วยสร้าง Sitemap ให้แทบทั้งนั้น โดยประโยชน์ของ Sitemap นั้นช่วยให้ตัว Search Engine นั้นไม่ต้องวิ่งไต่ไปตามลิงส์ต่าง ๆ ของเว็บของเราเพื่อเข้าถึงข้อมูลทั้งหมด และยิ่งเว็บมีขนาดใหญ่และซับซ้อนมาก ๆ ยิ่งทำให้หน้าที่อยู่ในส่วนของรากลึก ๆ ต้นไม้ที่เป็นลำดับของลิงส์นั้นเข้าถึงยาก การมี Sitemap จึงช่วยในการบ่งบอกกับ Search Engine ได้ว่าเว็บของเรามีหลายอะไรอยู่บ้าง เพื่อให้ตัวSearch
Engine เข้ามา Index ข้อมูลได้รวดเร็วและสะดวกขึ้น