Lecture

Lecture

      

บทที่ 2

                                                                            

1. จัดระบบโครงสร้างข้อมูล (Information  Architecture)  มี 5 Phase  13  ขั้นตอน

• phaseที่1 : สำรวจปัจจัยสำคัญ (Research)

           1. รู้จักตัวเอง : กำหนดเป้าหมายหลักของเว็บ คือ จำเป็นต้องมี,อยากให้มี,ยังรอได้

           2. เรียนรู้ผู้ใช้ : กำหนดกลุ่มเป้าหมาย

           3. สำรวจการแข่งขันและคู่แข่ง : สำรวจบรรยากาศการแข่งขัน  ,เรียนรู้จากคู่แข่ง

• phaseที่2  : พัฒนาเนื้อหา (Site Content)

           4. สร้างกลยุทธ์การออกแบบ

               - ประยุกต์เนื้อหาจากสื่ออื่น

               - เลือกใช้เทคโนโลยีที่เหมาะสม

            5.หาข้อสรุปของขอบเขตเนื้อหา

               - กำหนดเนื้อหาและการใช้งานที่จำเป็น

• phaseที่3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure)

           6. จัดระบบข้อมูล  : จัดกลุ่มและระบุชื่อเนื้อหา คือ  ร่างแผนผังโครงสร้าง

           7. จัดทำโครงสร้างข้อมูล

             - จัดทำรายการโครงสร้างของเว็บ : ควรมองเห็นข้อมูลในรูปแบบกว้างๆแล้วค่อยแตกย่อยลงไป

             - จัดทำแผนผังโครงสร้างของเว็บ : เป็นการทำ Site Map

            8. พัฒนาระบบเนวิเกชัน

           - วางแผนแนวทางการเคลื่อนที่ภายในเว็บไซต์ : แสดงแนวทางการเชื่อมโยงที่ชัดเจน

           - สร้างระบบเนวิเกชัน : เริ่มต้นจากการพิจารณาแผนผังโครงสร้างเว็บ

• phaseที่4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)

           9. ออกแบบลักษณะหน้าตาเว็บเพจ

              - สร้างแบบจำลองรายละเอียดข้อมูลในหน้าเว็บ : โดยการร่างเป็นตัวหนังสือก่อน

              - จัดแบ่งพื้นที่ในหน้าเว็บ: กำหนดขอบเขต ว่าอะไรอยู่ตรงไหน

              - ออกแบบโครงร่างของหน้าตาเว็บ

           10. พัฒนาเว็บต้นแบบและโครงสร้างเว็บขั้นตอนสุดท้าย

                 สร้างและทดสอบเว็บต้นฉบับ

            - สรุปแผนผังโครงสร้างเว็บขั้นสุดท้าย : ผลลัพธ์ขั้นสุดท้าย เรียกว่า Final architecture                     blueprint

               - ระบุข้อกำหนดในการพัฒนาเว็บไซต์ : ข้อกำหนด (Specs) คือ เอกสารที่กำหนด                ลักษณะการออกแบบ

                - กำหนดรูปแบบมาตรฐาน (Style Guide) :ภายในเว็บควรจะมีลักษณะสม่ำเสมอ

• phaseที่5 : พัฒนาและดำเนินการ (Production & Operation)

           11. ลงมือพัฒนาเว็บ

                - เรียบเรียงและตรวจสอบข้อมูล

                - ตกแต่งหน้าเว็บให้สมบูรณ์

                - สร้างเทมเพลตสำหรับหน้าเว็บ

                - พัฒนาระบบการใช้งานของเว็บ

           12. เปิดตัวเว็บไซต์ (Launch)

                 - ทดสอบคุณภาพการใช้งานและความถูกต้อง : การใช้งาน  ความสม่ำเสมอและ                 ความถูกต้อง

                - ทำให้เว็บเป็นที่รู้จัก : ลงทะเบียนกับ Search engine

          13. ดูแลผู้ใช้

           - เพิ่มข้อมูลใหม่โดยยึดรูปแบบมาตรฐาน(โครงสร้างเดิม)

           - วิเคราะห์สถิติการใช้บริการในเว็บ : ตรวจสอบดูว่าช่วงเวลาใดมีผู้เข้าใช้เป็นจำนวนมากที่สุด

          - ตรวจสอบความถูกต้องของลิงค์ : ลิงค์ผิดพลาดจะรู้สึกไม่น่าเชื่อถือ

         - ตรวจสอบเนื้อหาและการใช้งานเว็บให้ถูกต้องทันสมัยและตรงกับความต้องการของผู้ใช้อยู่เสมอ 

  จัดระบบข้อมูลในเว็บ

• ปัญหาความคลุมเครือของกลุ่มข้อมูล

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

• การจัดลำดับความสำคัญของข้อมูล

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

• โครงสร้างข้อมูลแบบฐานข้อมูล 

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


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

• รูปแบบกราฟฟิกสำหรับเว็บ
• รูปแบบหลักมี 2 ประเภท คือ GIF และ JPG
• GIF ย่อมาจากคำว่า Graphic Interchange Format
• ได้รับความนิยมในยุคแรก
• มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
• มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
• JPG ย่อมาจากคำว่า Joint Photographic Experst Group
• มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี
• ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
• ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียดระบบการวัดความละเอียดของรูปภาพ
• ระบบการวัดความละเอียดของรูปภาพที่แสดงผลบนมอนิเตอร์ควรใช้หน่วย pixel por inch (ppi)
• การใช้งานจะนำหน่วย dor per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
• ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi

โปรแกรมกราฟฟิกสำหรับเว็บ

• Adobe PhotoShop
• Adobe ImageReady
• Firework

บทที่ 5

ออกแบบระบบเนวิเกชั่น

ความสำคัญของระบบเนวิเกชั่น

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

1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ

2.สามารถเข้าถึงข้อมูลได้อย่างไร

3. สามารถกลับไปยังหน้าเดิมได้อย่างไร

4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว

รูปแบบของระบบเนวิเกชั่น เเบ่งออกเป็น 4รูปแบบ 

1.ระบบเนวิเกชั่นเเบบลำดับขั้น

เป็นเเบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็บลำดับขั้นอย่างหนึง่เเล้ว

2.ระบบเนวิเกชั่นเเบบโกลบอล

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

3. ระบบเนวิเกชั่นเเบบโลคอล

สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน

4. ระบบเนวิเกชั่นเฉพาะที่

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

องค์ประกอบของระบบเนวิเกชั่นหลัก

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

1.   pull down
2.   pop up menu
3.   image map
4.   searchbox

เนวิเกชั่นบาร์

           เป็นพื้นฐานที่ใช้ได้หลายรูปแบบ ทั้งเเบลำดับขั้นเเบบโกบอลเเละเเบบโลคอลโดยทั่วไป

เนวิเกชั่นบาร์จะประกอบด้วยกลุ่มของลิงค์ต่างๆที่อยู่รวมกันในหน้าเว็บ
วิเกชั่นระบบเฟรม

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

  ข้อเสีย เสียพื้นที่ไปในบางส่วนเเสดงผลช้าการออกแบบที่ซับซ้อน
pull downmenu

      เป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่น คือ มีรายการให้เลือกมากมาย ใช้พื้นที่น้อย

เหมาะสำหรับข้อมูลที่มีข้อมูลประเภทเดียวกัน
pop up menu

      เป็นเมนูอีกรูปแแบหนึ่งที่มีลักษณะคล้าย pull down menu เเต่รายการย่อยของเมนูจะปรากฎ

ขึ้นเองเมื่อผู้ใช้นำเมาส์ไปวาง ข้อดี ช่วยให้หน้าเว็บไม่รกจนเกินไป
image Map

      การใช้รูปกราฟิกเป็นลิงค์ในเเบบ image map ได้รับความนิยมนำมาใช้กับระบบเนวิเกชั่นมากขึ้น โดยบางบริเวณสามารถลิ้งได้ด้วย ข้อเสีย คือ ไม่ควรใช้มากจนเกินไป เพราะผู้ใช้อาจไม่รู้ว่าภาพเหล่านั้นสามารถลิ้งค์ได้
search Box

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

การออกแบบระบบเนวิเกชั่น

สร้างระบบเนวิเกชั่นหลัก

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

ที่สูงกว่า

เนวิเกชั่นเเบบกราฟฟิก VS ตัวอักษร

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

เนวิเกชั่นเเบบกราฟิกหรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่

กับกราฟฟิกด้วยพื้นฐานของระบบเนวิเกชั่น

หลักการออกแบบเนวิเกชั่น   คือการอำนวยความสะดวกตามเป้าหมายของผู้ใช้ เพื่อให้รู้ว่า

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

ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้

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

บทที่ 8

เลือกใช้สีสำหรับเว็บไซต์

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

ประโยชน์ของสีในเว็บไซต์

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

  

วงล้อสี(Color Wheel)

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

รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้าม

ผลทางจิตวิทยาที่มีต่อสี (Color Psychology)
        มนุษย์เราตอบสนองต่อสีด้วยจิตใจไม่ใช่สมอง เช่น สีบางสี อาจทำให้รู้สึกสดชื่น เเต่บางสีอาจทำให้รู้ซึมเศร้าได้  ดังนั้นหากเราเลือกสีอย่างรอบคอบ   เเละความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์ เนื้อหาของเว็บไซต์

 สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ

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