...Lecture...

การพัฒนาเว็บไซต์

จัดระบบโครงสร้างข้อมูล(Information Architecture)

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

Phase 1 : สำรวจปัจจัยสำคัญ(Research)
 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. ดูแลอย่างต่อเนื่อง

ออกแบบกราฟฟิกสำหรับเว็บไซต์

กราฟฟิก ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งสร้างความสวยงามให้เว็บไซต์น่าชมขึ้น

รูปแบบกราฟฟิกสำหรับเว็บ (GIF,JPG และ PNG)

        GIF ย่อมาจาก Graphic Interchange Format

• มีระบบสีแบบ Index ซึ่งมีสีขนาด 8 บิต ทำให้มีสีมากสุดได้ 256 สี
• มีการบับอัดจข้อมูบตามแนวนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

       JPG ย่อมาจาก Joint Photographic Expert Group

• มีข้อมูลสีขนาด 24 บิต สามารถแสดงสีได้ถึง 16.7 ล้านสี
• ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย
• ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด

       PNG ย่อมาจาก Portable Network Graphic

• สามารถสนับสนุนระบบสีได้ทั้ง 8บิต 16บิตและ 24 บิต
• มีระบบบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย
• มีระบบการควบคุมแกมม่าและความโปร่งใสในตัวเอง

    ระบบการวัดความละเอียดของรูปภาพ

• ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch(ppi) หมายถึงใน 1 นิ้วมีความละเอียดกี่พิกเซล
• แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
• ความละเอียดของรูปภาพที่ใช้ในเว้บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว

บทที่ 3

ออกแบบเพื่อผู้ใช้

ตัวอย่างเป้าหมายของเว็บทั่วไป
ได้แก่ 

-เพิ่มรายได้จากการขายสินค้าหรือให้บริการอย่างสมบูรณ์ 

-สร้างความแตกต่างเหนือคู่แข่ง 

-โปรโมทสินค้าหรือบริการ ให้เป็นที่รู้จักในวงกว้าง 

-ลดค่าใช้จ่ายด้านการพิมพ์หรือการโฆษณา 

-เข้าถึงลูกค้ากลุ่มใหม่  เพื่อขยายฐานลูกค้า 

-ลดปริมาณโทรศัพท์ ในการตอบคำถามลูกค้า 

-สร้างภาพลักษณ์ที่ดีของหน่วยงาน

ทำไมผู้ใช้จึงอยากเข้ามาในเว็บคุณ? 

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

ความต้องการของหน่วยงานV.S.ความต้องการของผู้ใช้

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

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

วิธีการในการเรียนรู้เกี่ยวกับผู้ใช้ 

1. สอบถามจากผู้ใช้ 

2. ทดสอบการใช้งานจากผู้ใช้คัดเลือกผู้ใช้แต่ละกลุ่มทดลองใช้งานเว็บของคุณ

 3. สังเกตพฤติกรรมของผู้ใช้ จากข้อมูลทางสถิติจากเว็บเซิร์ฟเวอร์(traffic log) ทำให้ทราบลักษณะการใช้งาน