บทที่ 3 ออกแบบเพื่อผู้ใช้ (Design for Users)
กระบวนการแรกของการออกแบบ เว็บไซต์คือการกำหนดเป้าหมายของเว็บไซต์กำหนดกลุ่มผู้ใช้ ซึ่งการจะให้ได้มาซึ่งข้อมูล ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือจำลองสถานการณ์ สิ่งเหล่านี้จะช่วยให้เราสามารถออกแบบเนื้อหาและการใช้งานเว็บไซต์ได้อย่าง เหมาะสม ตรงกับความต้องการของผู้ใช้อย่างแท้จริง
1.1 กำหนดเป้าหมายของเว็บไซต์
ขั้น ตอนแรกของการออกแบบเว็บไซต์ คือการกำหนดเป้าหมายของเว็บไซต์ให้แน่ชัดเสียก่อน เพื่อจะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้งเอาไว้ โดยทั่วไปมักจะเข้าใจว่าการทำเว็บไซต์มีจุดมุ่งหมายเพื่อบริการข้อมูลของ หน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมีเป้าหมายของตนเองแตกต่างกันออกไป
ตัวอย่างของเป้าหมายเว็บไซต์ทางธุรกิจ ได้แก่
- สร้างความเชื่อถือให้กับบริษัท
- ให้บริการข้อมูลของสินค้าหรือบริการ
- สร้างความแตกต่างเหนือคู่แข่ง
- ช่วยสื่อความหมายสำคัญของผลิตภัณฑ์
- สำรวจความต้องการของลูกค้า
- กระตุ้นยอดขาย
- เป็นแหล่งบริการข้อมูลที่เข้าถึงได้ตลอดเวลา
- ช่วยในการเลือกสรรพนักงานใหม่
- ส่งข่าวสารถึงลูกค้าและผู้สนใจอย่างรวดเร็วด้วยต้นทุนที่ต่ำมาก
1.2 กำหนดกลุ่มผู้ใช้เป้าหมาย
ผู้ ออกแบบเว็บไซต์จำเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซ ต์ เพื่อที่จะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่นเว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน เว็บท่า และเว็บไดเรกทอรี่ แต่เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สำหรับทุกคน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว
การกำหนดประเภทของกลุ่มเป้าหมาย มีลักษณะใหญ่ ๆ คือ
- การกำหนดกลุ่มเป้าหมายเฉพาะเจาะจง ตัวอย่างเช่น เว็บไซต์ขายเสื้อผ้า อาจจะกำหนดกลุ่มเป้าหมายเป็นผู้หญิง แต่สินค้าที่นำมาจำหน่ายอาจเป็นสินค้าที่มียี่ห้อและราคาแพงจึงกำหนดกลุ่ม ผู้ใช้ที่เป็นผู้หญิงและมีฐานะทางการเงินที่ดี เป็นต้น
- การกำหนดกลุ่มเป้าหมายหลาย ๆ กลุ่ม ตัวอย่างเช่น เว็บไซต์ของร้านขายของเล่น ซึ่งอาจจะมองว่ากลุ่มเป้าหมายที่เข้ามาเป็นเด็ก ทั้งที่จริงแล้วผู้ใช้บริการอาจจะเป็นพ่อแม่ที่มาหาของเล่นให้ลูก หรือหนุ่มสาวที่เข้ามาซื้อของขวัญ หรือครูอาจารย์เข้ามาเลือกสินค้าเพื่อนำไปใช้ในห้องเรียน ซึ่งจุดนี้ผู้ออกแบบเว็บไซต์ต้องคำนึงถึงกลุ่มเป้าหมายทุกกลุ่ม
1.3 สิ่งที่ผู้ใช้ต้องการจากเว็บ
หลัง จากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลำดับต่อไปคือการออกแบบเว็บไซต์เพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่งที่น่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่ง ได้แก่
- ข้อมูลและการใช้งานที่เป็นประโยชน์
- ข่าวและข้อมูลที่น่าสนใจ
- การตอบสนองต่อผู้ใช้
- ความบันเทิง
- ของฟรี
การนำเสนอข้อมูลสินค้าที่ทำให้น่าสนใจ ด้วยการแสดงข้อมูลสินค้าในหลาย ๆ รูปแบบ ที่ผู้ใช้สามารถเลือกการแสดงข้อมูลได้ด้วยตนเอง
1.4 ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
เมื่อ เราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ แล้ว เราก็ออกแบบเว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์
- ข้อมูลเกี่ยวกับบริษัท
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสื่อมวลชน
- คำถามยอดนิยม
- ข้อมูลในการติดต่อ
บทที่4
จัดระบบข้อมูลในเว็บ
จัดระบบข้อมูลในเว็บ
ปัญหาความคลุมเครือของกลุ่มข้อมูล -การแบ่งข้อมูลต้องอาศัยพื้นฐานทางด้านภาษามาช่วยเพราะคำหนึ่งคำมีความหมายได้หลายอย่างในเหตุการณ์ต่างกัน
-การแบ่งหมวกหมู่ในเว็บมักจะเกี่ยวข้องกับสิ่งที่เป็นนามธรรม เช่น หัวเรื่องหรือข้อความ
ดังนั้นจึงเป็นการยากที่จะทำให้ทุกคนเข้าใจระบบการจัดกลุ่มข้อมูลที่เราได้ออกแบบไว้
การจัดลำดับความสำคัญของข้อมูล ได้แก่ การจัดกลุ่มข้อมูลการกำหนดตำแหน่งของข้อมูลและเทคนิคที่ใช้นำเสนอผู้ออกแบบควรจัดกลุ่มข้อมูลที่มีความสัมพันธ์กันให้อยู่ในกลุ่มเดียวกัน โดยรูปแบบการจัดกลุ่มข้อมูลอาจกระทำได้หลายลักษณะ
หลักการออกแบบโครงสร้างระบบข้อมูลแบบลำดับชั้น
ควรมีจำนวน 7 บวกลบ 2 รายการในเมนูที่มีจำนวนรายการมากกว่า 10จะสร้างความรู้สึกว่ามากเกินไปส่วนความลึกไม่ควรเกิน 4-5 ชั้น เพราะจะทำให้ผู้ใช้อาจหมดหวังและเลิกล้มความตั้งใจได้ โครงสร้างระบบข้อมูลแบบไฮเปอร์เท็กซ์
มีลักษณะคล้ายเครือข่ายโยงใยโครงสร้างระบบนี้แบ่งเป็น 2 ส่วนคือรายการ หรือกลุ่มข้อมูลที่ถูกลิงค์กับลิงค์ที่เชื่อมโยงข้อมูลเหล่านั้นส่วนใหญ่จึง มักนำระบบนี้มาใช้เป็นส่วนเสริมให้กับโครงสร้างข้อมูลแบบลำดับชั้น
โครงสร้างข้อมูลแบบฐานข้อมูล
มักนิยมใช้กับเว็บขนาดใหญ่ การนำระบบฐานข้อมูลมาใช้ในเว็บจะช่วยเพิ่มความสามารถในการค้นหาข้อมูลได้อย่างรวดเร็วและถูกต้อง แต่เป็นเรื่องยากที่จะเอาข้อมูลทั้งหมดมาไว้ในฐานข้อมูล
-การแบ่งหมวกหมู่ในเว็บมักจะเกี่ยวข้องกับสิ่งที่เป็นนามธรรม เช่น หัวเรื่องหรือข้อความ
ดังนั้นจึงเป็นการยากที่จะทำให้ทุกคนเข้าใจระบบการจัดกลุ่มข้อมูลที่เราได้ออกแบบไว้
การจัดลำดับความสำคัญของข้อมูล ได้แก่ การจัดกลุ่มข้อมูลการกำหนดตำแหน่งของข้อมูลและเทคนิคที่ใช้นำเสนอผู้ออกแบบควรจัดกลุ่มข้อมูลที่มีความสัมพันธ์กันให้อยู่ในกลุ่มเดียวกัน โดยรูปแบบการจัดกลุ่มข้อมูลอาจกระทำได้หลายลักษณะ
หลักการออกแบบโครงสร้างระบบข้อมูลแบบลำดับชั้น
ควรมีจำนวน 7 บวกลบ 2 รายการในเมนูที่มีจำนวนรายการมากกว่า 10จะสร้างความรู้สึกว่ามากเกินไปส่วนความลึกไม่ควรเกิน 4-5 ชั้น เพราะจะทำให้ผู้ใช้อาจหมดหวังและเลิกล้มความตั้งใจได้ โครงสร้างระบบข้อมูลแบบไฮเปอร์เท็กซ์
มีลักษณะคล้ายเครือข่ายโยงใยโครงสร้างระบบนี้แบ่งเป็น 2 ส่วนคือรายการ หรือกลุ่มข้อมูลที่ถูกลิงค์กับลิงค์ที่เชื่อมโยงข้อมูลเหล่านั้นส่วนใหญ่จึง มักนำระบบนี้มาใช้เป็นส่วนเสริมให้กับโครงสร้างข้อมูลแบบลำดับชั้น
โครงสร้างข้อมูลแบบฐานข้อมูล
มักนิยมใช้กับเว็บขนาดใหญ่ การนำระบบฐานข้อมูลมาใช้ในเว็บจะช่วยเพิ่มความสามารถในการค้นหาข้อมูลได้อย่างรวดเร็วและถูกต้อง แต่เป็นเรื่องยากที่จะเอาข้อมูลทั้งหมดมาไว้ในฐานข้อมูล
บทที่ 9 การออกแบบการฟฟิกสำหรับเว็บไซต์
บทนี้รู้จะกล่าวถึงรายละเอียดของกราฟฟิกรูปแบบหลัก 2 ประเภทคือ GIF และ JPG- GIF ย่อมาจาก Graphics Interchange Format เป็นรูปแบบแฟ้มภาพและแฟ้มภาพเคลื่อนไหว รูปแบบ GIF ถูกออกแบบโดย Compuserve ซึ่งเป็นระบบเครือข่ายข่าวสารแบบออนไลน์ เพื่อให้บริการเเลกเปลี่ยนกราฟิกในรูปแบบบิตแมป ภาพแบบGIF มีข้อจำกัดอยู่ตรงด้านแผงสีแบบ Index ภาพสีแบบ 24bit (RGB) ไม่สามารถใช้ได้ แผงสีสามารถบรรจุได้ 2-256 สี ซึ่งสร้างจากข้อมูลสี 24 บิท แฟ้มแบบ GIF โดยใช้การบีบขนาด LZW แบบประยุกต์ ทำให้เปลืองพื้นที่ความจุน้อยกว่า สำหรับการออกเสียงคำว่า GIF มีการโต้เถียงกันหลายที่ ขึ้นอยู่กับภาษาที่ใช้ โดยทางผู้ผลิตได้สรุปวิธีอ่านของตัวเองไว้ ผู้ผลิตซอฟต์แวร์หลายรายกังวลเกี่ยวกับปัญหาสิทธิบัตรของแฟ้มแบบ GIF ซึ่งจดโดย Unisys ทำให้มีการสร้างรูปแบบแฟ้มภาพชนิดใหม่ที่ชื่อว่า PNG (Portable Network Graphics) ขึ้นมาทดแทน อย่างไรก็ตามสิทธิบัตรของ GIF หมดอายุแล้วเมื่อ ค.ศ. 2003 และ GIF ยังเป็นที่นิยมใช้งานต่อไปจนถึงปัจจุบัน
- JPEG (Joint Photographic Experts Group - "เจเพ็ก") คือรูปแบบการบีบอัดแฟ้มภาพแบบสูญเสีย โดยยังให้เสียความละเอียดน้อยที่สุด รูปแบบแฟ้มสำหรับวิธีการนี้ได้แก่ .jpeg, .jpg, .jpe, .jfif, .jfi (อาจจะเป็นตัวเล็กหรือตัวใหญ่ก็ได้) รูปแบบแฟ้ม JPEG นี้ เป็นรูปแบบแฟ้มที่ใช้กันในการจัดเก็บและแลกเปลี่ยนรูปภาพบนเวิลด์ไวด์เว็บมากที่สุด โดยเฉพาะภาพถ่าย เนื่องจากสามารถเก็บความละเอียดสูงได้โดยใช้ขนาดไฟล์ที่เล็ก สามารถเก็บภาพสีได้หลากหลายระดับความแม่นยำของสี(Bit Depth) ความสามารถในการย่อขนาดไฟล์ของแฟ้ม JPEG นั้นเกิดจากการใช้เทคนิคการย่อขนาดภาพแบบการบีบอัดคงข้อมูลหลัก (Lossy Compression) หรือการบีบอัดแบบมีความสูญเสียทำให้ไม่นิยมใช้กับภาพที่เป็น ลายเส้น หรือไอคอนต่าง ๆ เนื่องจากจะไม่ได้ประสิทธิภาพเท่าการเก็บในรูปแบบอื่น อย่าง PNG หรือ GIF
การบีบอัดของ JPEG นั้นจะใช้เทคนิคที่เรียกว่า DCT (Discrete Cosine Transform) ซึ่งเป็นการแปลงค่าความสว่างของภาพให้อยู่ในรูปแบบเชิงความถี่ (Frequency Domain) ทำให้สามารถเลือกแทนค่าของสัมประสิทธิ์หรือในที่นี้คือแอมพลิจูดของค่าความถี่ต่างๆ ได้โดยอาศัยตัวแปรที่มีนัยสำคัญที่ต่างกันได้ การที่สามารถลดนัยสำคัญของค่าตัวเลขลงไปได้ทำให้สามารถลดขนาดของหน่วยความจำหรือขนาดไฟล์ที่ใช้เก็บตามไปได้
การบีบอัดของ JPEG นั้นจะใช้เทคนิคที่เรียกว่า DCT (Discrete Cosine Transform) ซึ่งเป็นการแปลงค่าความสว่างของภาพให้อยู่ในรูปแบบเชิงความถี่ (Frequency Domain) ทำให้สามารถเลือกแทนค่าของสัมประสิทธิ์หรือในที่นี้คือแอมพลิจูดของค่าความถี่ต่างๆ ได้โดยอาศัยตัวแปรที่มีนัยสำคัญที่ต่างกันได้ การที่สามารถลดนัยสำคัญของค่าตัวเลขลงไปได้ทำให้สามารถลดขนาดของหน่วยความจำหรือขนาดไฟล์ที่ใช้เก็บตามไปได้
- PNG ย่อมาจาก Portable Network Graphics ซึ่งเป็นรูปแบบของไฟล์รูปภาพที่ถูกพัฒนามาเพื่อใช้สำหรับการแสดงผลบนเว็บไซต์โดยเฉพาะ และเพื่อใช้แทนรูปแบบของไฟล์ GIF ด้วยเหตุผลทางด้านลิขสิทธิ์ เพราะ PNG นั้นเป็นรูปแบบของไฟล์รูปภาพที่มีลิขสิทธิ์แบบ Open Source สามารถนำไปใช้ และพัฒนาต่อได้อย่างอิสระ
โดยที่คุณสมบัติทั่วๆไปของ PNG นั้นจะคล้ายกับ GIF คือ มีการบีบอัดไฟล์ได้โดยไม่สูญเสียคุณภาพ นอกจากนี้ PNG ยังมีข้อดีอีกหลายประการที่ไม่มีใน GIF คือ
- รูปแบบไฟล์แบบPNG นั้นสามารถที่จะบีบอัดไฟล์ให้มีขนาดเล็กกว่า GIF ประมาณ 10-30%
- สามารถทำพื้นหลังโปร่งใส (Transparency) ได้เหมือนกับ GIF แต่สามารถปรับค่าความโปร่งใสได้ เพราะ PNG นั้นรองรับ Alpha Transparency แต่ GIF นั้นจะรองรับเพียง Binary Transparency กล่าวคือ GIF สามารถทำให้ภาพมีพื้นหลัง 100% และไม่มีพื้นหลังเลย (พื้นหลัง 0%) แต่จะไม่สามารถทำให้พื้นหลังมีค่าที่ต่างไปจากนี้ได้ เช่นให้พื้นหลังมีค่า 50% จะไม่สามารถทำได้ เราจึงเรียกคุณสมบัตินี้ว่า Binary Transparency
อีกอย่างหนึ่งคือ การใช้ Transparency กับไฟล์ GIF นั้น จะต้องกำหนดค่า matte เพื่อให้ขอบภาพกลืนไปกับสีของพื้นหลังที่จะนำภาพไปประกอบ ถ้าเราทำการเปลี่ยนสีพื้นหลังดังกล่าว เราก็จำเป็นที่จะต้องเปลี่ยนค่า matte ตามไปด้วย ไม่เช่นนั้นภาพก็จะออกมาในลักษณะที่ขอบของภาพแตกได้ ซึ่งถ้าเป็นไฟล์ PNG จะไม่มีปัญหาเหล่านี้ และ PNG ยังสามารถปรับค่าความโปร่งใสได้หลายระดับอีกด้วย
- รูปแบบไฟล์แบบPNG นั้นสามารถที่จะบีบอัดไฟล์ให้มีขนาดเล็กกว่า GIF ประมาณ 10-30%
- สามารถทำพื้นหลังโปร่งใส (Transparency) ได้เหมือนกับ GIF แต่สามารถปรับค่าความโปร่งใสได้ เพราะ PNG นั้นรองรับ Alpha Transparency แต่ GIF นั้นจะรองรับเพียง Binary Transparency กล่าวคือ GIF สามารถทำให้ภาพมีพื้นหลัง 100% และไม่มีพื้นหลังเลย (พื้นหลัง 0%) แต่จะไม่สามารถทำให้พื้นหลังมีค่าที่ต่างไปจากนี้ได้ เช่นให้พื้นหลังมีค่า 50% จะไม่สามารถทำได้ เราจึงเรียกคุณสมบัตินี้ว่า Binary Transparency
อีกอย่างหนึ่งคือ การใช้ Transparency กับไฟล์ GIF นั้น จะต้องกำหนดค่า matte เพื่อให้ขอบภาพกลืนไปกับสีของพื้นหลังที่จะนำภาพไปประกอบ ถ้าเราทำการเปลี่ยนสีพื้นหลังดังกล่าว เราก็จำเป็นที่จะต้องเปลี่ยนค่า matte ตามไปด้วย ไม่เช่นนั้นภาพก็จะออกมาในลักษณะที่ขอบของภาพแตกได้ ซึ่งถ้าเป็นไฟล์ PNG จะไม่มีปัญหาเหล่านี้ และ PNG ยังสามารถปรับค่าความโปร่งใสได้หลายระดับอีกด้วย
