เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ

เอกสารประกอบการสอน รายวิชาหลกั การออกแบบเว็บ ณฐั ภทั ร แกว้ รตั นภทั ร์ คณะมนุษยศาสตรแ์ ละสงั คมศาสตร์ มหาวิทยาลยั ราชภฏั สวนสุนนั ทา 2560

เอกสารประกอบการสอนรายวิชาหลกั การออกแบบเ

เว็บ ณฐั ภทั ร แกว้ รตั นภทั ร์

เอกสารประกอบการสอน รายวิชาหลกั การออกแบบเว็บ ณฐั ภทั ร แกว้ รตั นภทั ร์ วท.ม. (ระบบสารสนเทศเพอื่ การจดั การ) คณะมนุษยศาสตรแ์ ละสงั คมศาสตร์ มหาวิทยาลยั ราชภฏั สวนสุนนั ทา 2560

คำนำ เอกสารประกอบการสอน รายวชิ าหลักการออกแบบเวบ็ รหัสวิชา MFS1301 น้ี ได้เรียบเรียงข้ึนเพ่ือใช้ประกอบการสอน สาหรับนักศึกษาระดับปริญญาตรี หลักสูตรสารสนเทศศาสตรบัณฑิต สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบ สารสนเทศเพ่ือการจัดการ มหาวิทยาลัยราชภัฏสวนสนุ ันทา โดยมุ่งหวังให้ผู้เรียนมี ความร้แู ละความเข้าใจหลกั การออกแบบเวบ็ ทส่ี อดคล้องกบั ประสบการณ์ผู้ใช้ เน้ือหาของเอกสารประกอบการสอนแบ่งเป็น 8 บท ได้แก่ บทนา หลักการ ออกแบบเวบ็ ไซต์ ประสบการณ์ผู้ใช้เบ้ืองต้น การวางแผนเวบ็ ไซต์ ภาษาเอชทเี อม็ แอล สไตล์ชีท มาตรฐานสแี ละอัตราการเปรียบต่าง และเวบ็ เชิงตอบสนองเบ้ืองต้น ซ่งึ จะช่วยให้ผู้เรียนมีความรู้และความเข้าใจในหลกั การออกแบบเวบ็ ท่สี อดคล้องกับ ประสบการณผ์ ู้ใช้ รวมทง้ั มคี วามพร้อมทจ่ี ะก้าวไปสกู่ ารเป็นนักออกแบบและพัฒนา เวบ็ ท่มี ีคุณภาพในอนาคต ผู้เขียนหวังเป็ นอย่างย่ิงว่าเอกสารเล่มน้ ีจะอานวยประโยชน์ต่อผู้เรียนและ ผู้นาไปใช้อย่างสมควร ผู้เขียนน้อมรับความคิดเห็นและคาติชม เพ่ือนาไปใช้ ปรับปรุงให้ดีย่ิงข้นึ ในการพิมพ์คร้ังต่อไป ขอขอบพระคุณในความอนุเคราะห์มา ณ โอกาสน้ ี ณฐั ภทั ร แก้วรัตนภัทร์ 17 กรกฎาคม 2560

แผนบริหารการสอนประจาบทที่ 1 หวั ขอ้ เน้ อื หา ความหมายของการออกแบบเวบ็ ไซต์ ประวตั ิความเป็นมาของเวบ็ ไซต์ ยุคของเวบ็ ไซต์ สภาพแวดล้อมของเวบ็ ไซต์ การแสดงผลบนหน้าจอหลายขนาด วตั ถุประสงคเ์ ชิงพฤติกรรมหวั ขอ้ เน้ ือหา 1. อธบิ ายความหมายของการออกแบบเวบ็ ไซตไ์ ด้ 2. อธบิ ายประวตั คิ วามเป็นมาของเวบ็ ไซต์ได้ 3. อธบิ ายลกั ษณะแต่ละยุคของเวบ็ ไซต์ได้ 4. อธบิ ายสภาพแวดล้อมของเวบ็ ไซต์ได้ 5. อธบิ ายเทคโนโลยกี ารแสดงผลเวบ็ ไซตบ์ นหน้าจอหลายขนาดได้ วิธีและกิจกรรมการเรียนการสอน 1. วิธีสอน 1.1 วธิ สี อนแบบบรรยาย 1.2 วิธสี อนแบบอภปิ ราย 1.3 วธิ สี อนแบบการศกึ ษาโดยลาพัง 2. กิจกรรมการเรียนการสอน 2.1 ผู้สอนบรรยายสรปุ เน้อื หา 2.2 ให้ผู้เรียนศกึ ษาเน้ือหาจากเอกสารประกอบการสอน 2.3 ผู้เรียนร่วมอภปิ รายการออกแบบเวบ็ ไซตล์ กั ษณะต่าง ๆ ทใ่ี ช้ใน ชีวติ ประจาวนั 2.4 ผู้เรียนแบ่งกลุ่มร่วมกนั วเิ คราะห์เปรียบเทยี บเน้ือหา ก่อนผู้สอนจะสรุปและ ยกตวั อย่างเปรียบเทยี บ 2.5 มอบหมายให้ผู้เรียนค้นหาเพ่ิมเติม

2 สือ่ การเรียนการสอน 1. เอกสารประกอบการสอน 2. ส่อื อเิ ลก็ ทรอนกิ ส์ 3. หนังสอื ตารา เอกสารทเ่ี ก่ยี วข้อง การวดั ผลและประเมนิ ผล 1. สงั เกตการตอบคาถามและต้งั คาถามของผู้เรียนในระหว่างการบรรยาย อภิปราย และซักถาม 2. สงั เกตความต้งั ใจในการตดิ ตามเน้อื หาบทเรยี น 3. สงั เกตการให้ความร่วมมอื ในการอภิปรายกล่มุ 4. สงั เกตการให้ความร่วมมอื ในการศึกษาโดยลาพัง

บทที่ 1 บทนา ปั จจุ บันโลกเข้ าสู่ยุ ดดิจิทัลท่ีขับเคล่ือนด้ วยการส่งถ่ ายข้ อมูลผ่านระบบเครือข่าย อนิ เทอร์เนต็ และมีแนวโน้มท่รี ะบบเครือข่ายอินเทอร์เนต็ จะมีการเติบโตอย่างต่อเน่ืองและ ก้าวกระโดด สังเกตุได้จากนโยบายของประเทศท่ีมุ่งเน้นเศรษฐกิจเชิงดิจิทัล (Digital Economy) เพ่ือสร้างระบบเศรษฐกิจและสงั คมท่มี ีการติดต่อส่อื สาร การผลิต การอุปโภค บริโภค การใช้สอยการจาหน่ายจ่ายแจก การพาณิชย์อิเล็กทรอนิกส์ การทาธุรกรรมทาง อิเล็กทรอนิกส์ การคมนาคมขนส่ง การโลจิสติกส์ การศึกษา ห้องสมุดดิจิทัล ฐานข้อมูล ทรัพยากรสารสนเทศ วารสารดิจิทลั การเกษตรกรรม การอุตสาหกรรม การสาธารณสุข การเงินการลงทุน การภาษีอากร การบริหารจัดการข้อมูลและเน้ือหา หรือกิจกรรมทาง เศรษฐกจิ และสงั คมอ่นื ใด หรือการใดๆ ท่มี ีกระบวนการหรือการดาเนินงานทางดิจิทลั หรือ ทางอเิ ลก็ ทรอนิกส์ ท้งั ในกจิ การกระจายเสยี ง กิจการโทรทศั น์ กจิ การวิทยุคมนาคม กิจการ โทรคมนาคม กิจการส่ือสารดาวเทียม และการบริหารคล่ืนความถ่ี โดยอาศัยโครงสร้าง พ้ืนฐานเทคโนโลยีสารสนเทศและการส่ือสาร รวมท้ังเทคโนโลยีท่ีมีการหลอมรวม หรือ เทคโนโลยอี ่นื ใดในทานองคล้ายคลงึ กนั ดังน้ัน พ้ืนฐานท่สี าคัญในการติดต่อส่อื สารผ่านเครือข่ายอนิ เทอร์เนต็ น่ันกค็ ือ การ ติดต่อส่อื สารผ่านทางเว็บไซต์ (Web Site) ซ่ึงเป็นช่องทางการส่อื สารท่สี ะดวกรวดเร็ว สามารถเข้าถึงได้ทุกเม่ือ และปัจจุบันเวบ็ ไซต์ถือว่าเป็นเคร่ืองมือท่มี ีอานาจในการชักจูงสงู จึงเกดิ การศกึ ษาการออกแบบเวบ็ ไซตล์ กั ษณะต่างๆ มากมาย จนเกดิ เป็นศาสตร์ทศ่ี กึ ษาการ ชักจูงด้วยเทคโนโลยีคอมพิวเตอร์ ท่ีเรียกว่า แคป็ โตโลยี (Computer as Persuasive Technology: Captology) ดังน้ัน การออกแบบเวบ็ ไซต์ท่สี อดคล้องกับหลักการออกแบบ เวบ็ เป็นส่งิ สาคัญท่จี ะละเลยไม่ได้ และมีความจาเป็นท่จี ะต้องศึกษาหลักการต่าง ๆ รวมถึง มาตรฐานสากลในการออกแบบและพัฒนาเวบ็ ไซต์ข้นึ เพ่ือให้ผู้ใช้งานเวบ็ ไซต์ไม่เกิดความ สับสนข้อมูลหรือสารสนเทศท่จี ะนาเสนอ ทาให้เกิดความดึงดูด ความน่าสนใจและเกิด ความต่อเน่ืองในการเข้าใช้เวบ็ ไซต์ โดยผู้ออกแบบเวบ็ ไซตจ์ ะต้องมีความเอาใจใส่ข้อมูลหรือ สารสนเทศทจ่ี ะนาเสนอ ตาแหน่งการจดั วาง สดั สว่ นของการแสดงผลข้อมลู ต่าง ๆ ด้วย โดย ในบทเรียนน้ีจะนาเสนอเก่ียวกับความหมายของการออกแบบเวบ็ ไซต์ ประวัติความเป็นมา ของเว็บไซต์ ยุคของเว็บไซต์ สภาพแวดล้อมของเว็บไซต์ และการแสดงผลเว็บไซต์บน หน้าจอหลายขนาด ทเ่ี ก่ยี วข้องกบั การออกแบบเวบ็ ไซตใ์ นปัจจุบัน

4 ความหมายของการออกแบบเว็บไซต์ การออกแบบเวบ็ ไซต์ หรือ Web Design มีผู้ให้ความหมายและลักษณะของการ ออกแบบเวบ็ ไซตไ์ ว้ ดังน้ี การออกแบบเวบ็ ไซต์และเวบ็ แอปพลิเคชัน (Web Design and Applications) เก่ยี วข้องกบั มาตรฐานในการสร้าง (Build) และการฉาบเพ่ือแสดงผล (Rendering) ท้งั หน้า เวบ็ เพจ โดยใช้เทคโนโลยีภาษามาตรฐานสากล เช่น เอชทเี อม็ แอล (Hypertext Markup Language: HTML) สไตล์ชีท (Cascading Style Sheet: CSS) เอสวีจี (Scalable Vector Graphics: SVG) เอพีไอ (Application Programming Interface: APIs) และเทคโนโลยี อ่นื ๆ ท่ใี ช้ในการพัฒนาเวบ็ แอปพลิเคชัน (Web Application) หรือ เรียกว่า “WebApps” นอกจากน้ียงั รวมถงึ ทางการออกแบบเวบ็ ไซต์ท่ผี ู้ใช้ทว่ั ไปและผู้พิการเข้าถึงเน้ือหาได้ (Web Content Accessibility Guidelines: WCAG) และสามารถแสดงผลได้ในอุปกรณ์เคล่ือนท่ี ด้วย (World Wide Web Consortium: W3C, 2015) การออกแบบเวบ็ ไซต์ เป็นสหวิทยาการท่เี ก่ยี วข้องกบั การวางแผน การผลิตเวบ็ ไซต์ จิตวทิ ยาและพฤติกรรมผู้ใช้ โดยไม่มกี ารจากดั ทางด้านเทคโนโลยีท่ใี ช้ โครงสร้างข้อมูล การ ออกแบบภาพ และการส่งข้อมูลผ่านเครือข่าย โดยมีการคานึงถึง 5 แง่มุมสาคัญท่ชี ่วยให้ การออกแบบเวบ็ ไซต์มีความเหมาะสม คือ 1) เน้ือหา (Content) 2) การรับภาพ (Visual) 3) เทคโนโลยี (Technology) 4) การส่งถ่ายข้อมูล (Delivery) และ 5) วัตถุประสงค์ (Purpose) (Thomas A. Powell.,2003)

5 ภาพท่ี 1.1 แสดงแง่มุมการออกแบบเวบ็ ไซต์ของ Thomas A. ทม่ี า: Thomas A. Powell., 2003 การออกแบบเว็บไซต์ คือ การวางกรอบการพัฒนาเว็บไซต์ ประกอบไปด้วย สถาปัตยกรรมของเวบ็ ไซต์ กรอบแนวคดิ ของเวบ็ ไซต์ การนาทางในเวบ็ ไซต์ การต่อประสาน ผู้ใช้กับเว็บไซต์ โดยการออกแบบเว็บไซต์จะต้องคานึงถึงสภาพแวดล้อมท่ีเว็บไซต์จะ สามารถแสดงผลและส่งถ่ายให้แก่ผู้ใช้เรียกค้นได้ และ การออกแบบเวบ็ ไซต์จะต้องเป็ น อสิ ระจากภาษาโปรแกรมหรือเคร่ืองมอื พัฒนาเชิงเทคนิค (Daniel Schwabe, 2001) จากความหมายข้างต้น สามารถสรุปได้ว่า การออกแบบเวบ็ ไซต์ มาจากคาว่า “Web Design” โดยมีความหมาย คือ การวางแผนและการดาเนินงานในการผลิตเวบ็ ไซต์ ซ่ึง ประกอบไปด้วยวัตถุประสงค์ของเว็บไซต์ การวางกรอบแนวคิด การออกแบบเน้ือหาและ การส่อื สาร การออกแบบเค้าร่างของเวบ็ ไซต์ การออกแบบอักษร การออกแบบเวบ็ ไซต์ท่ี ผู้ใช้ทว่ั ไปและผู้พิการเข้าถึงเน้ือหาได้ และการคานึงถึงสภาพแวดล้อมท่เี วบ็ ไซต์จะสามารถ ทางานและส่งถ่ายไปยังผู้ใช้ได้ ท้งั น้ีแนวคิดในการออกแบบเวบ็ ไซต์จะเป็นอิสระจากภาษา โปรแกรมหรือเคร่ืองมอื พัฒนาเชงิ เทคนิคด้วย ท้งั น้ี การใช้เทคโนโลยีและมาตรฐานต่างๆ เช่น ภาษาเอชทเี อม็ แอล สไตล์ชีท ภาษา จาวาสคริปต์ มีเดียคิวร่ี ภาษาโปรแกรมฝ่งั แม่ข่าย (Server-Side Programming) เป็นต้น

6 เพ่ือนามาใช้ประกอบการผลิตเวบ็ ไซต์ จะอยู่ในส่วนของการพัฒนาเว็บไซต์ หรือ “Web Development” ดังน้ัน การออกแบบและพัฒนาเว็บไซต์ หรือ “Web Design and Development” เป็นกระบวนการผลิตเวบ็ ไซต์ท่สี มบูรณ์ คือ มีการคานึงถึงการออกแบบ สภาพแวดล้อมต่างๆ การส่อื สาร และมีการทางานทส่ี นองต่อความต้องการของผู้ใช้ได้ด้วย การออกแบบเวบ็ ไซต์ในลักษณะเชิงสนุ ทรียะ หรือ “Design Aesthetic for Web Design” เป็นการออกแบบเวบ็ อกี ลักษณะท่เี น้นมุมมอง (Viewpoints) คือ มุมมองความ สวยงาม (Aesthetic) มุมมองทางด้านอารมณ์ (Emotional) หรือ มมุ มองทางด้านความรู้สกึ (Sentiment) ของผู้ใช้ท่ไี ด้จากการเข้าเย่ียมชมเวบ็ ไซต์ ซ่ึงส่วนใหญ่ยังมีความเข้าใจผิด เก่ียวกับการออกแบบเวบ็ ไซต์ โดยบุคคลท่ัวไป เม่ือพบเห็นคาว่า การออกแบบเว็บ จะ หมายถงึ การออกแบบเวบ็ ไซต์เชงิ สนุ ทรียะ คือ การใช้โปรแกรมทางด้านกราฟิ ก เช่น Adobe Photoshop หรือ โปรแกรมแต่งภาพหลายมิติ เป็นต้น ซ่ึงแท้ทจ่ี ริงแล้ว การออกแบบเวบ็ ไซต์ เชิงสนุ ทรียะ เป็นสว่ นหน่ึงของหลักการออกแบบเวบ็ ไซตเ์ ทา่ น้ัน ประวตั ิความเป็ นมาของเว็บไซต์ ปัจจุบันมีการใช้งานเวบ็ ไซต์อย่างแพร่หลายเน่ืองจากพัฒนาการของเทคโนโลยี คอมพิวเตอร์ (Computer Technology) และ เทคโนโลยีเครือข่ายโทรคมนาคม (Telecommunication Technology) และด้วยราคาท่ตี ่าลงของอุปกรณ์ทาให้ผู้ใช้สามารถ เข้าถงึ เทคโนโลยเี วบ็ ได้ ทาให้เกิดธุรกิจและบริการท่ที างานผ่านเทคโนโลยีเวบ็ มากมาย เช่น e-Commerce e-Learning e-Government เป็นต้น โดยต้นกาเนิดของเวบ็ ไซต์เกิดข้ึนเม่ือ ปี ค.ศ. 1945 โดยแวนเนวาบุช (Vannevar Bush) ได้เขยี นบทความเก่ยี วกบั การสบื ค้นสารสนเทศเชิงเช่ือมโยงจากแผ่นไมโครฟิ ล์มเลก็ (Microfiche) โดยเรียกว่า “เมมเมคซ์ (Memex)” และในปี ค.ศ. 1980 ทมิ เบอเนอร์ลี (Tim Berners-Lee) ได้เสนอโครงการไฮเปอร์เทก็ ซ์ (Hypertext) ระหว่างทางานอยู่ท่ี เซิร์น (the European Organization for Nuclear Research: CERN) ซ่ึงทมิ เบอเนอร์ลีได้คิดค้น โครงการไฮเปอร์เทก็ ซ์เพ่ือแลกเปล่ียนข้อมูลสาหรับนักวิจัย เน่ืองจากองค์กรเซิร์นเป็ น องค์กรทางวิทยาศาสตร์ขนาดใหญ่และรวบรวมอัจฉริยะและนักวิจัยของยุโรปไว้มาก ดังน้ัน จงึ มีข้อจากดั ในการสง่ เอกสาร แต่ทมิ เบอเนอร์ลี ได้เสนอแนวคิดไฮเปอร์เทก็ ซ์ข้นึ เพ่ือแก้ไข ปัญหาดังกล่าว ทมิ เบอเนอร์ลีได้ร่างข้อเสนอเก่ียวกับแนวคิดไฮเปอร์เทก็ ซ์ข้ึน ด้วยความ ช่วยเหลือของโรเบริ ์ต ไคลิยู ช่วยปรับร่างโครงการไฮเปอร์เทก็ ซ์อกี คร้ัง และไมค์ เซนดอลล์ ผู้จัดการของทมิ เบอเนอร์ลจี งึ รับข้อเสนอของเขา ในข้อเสนอดังกล่าวน้ัน ทมิ เบอเนอร์ลไี ด้ใช้ ความคิดเดียวกับระบบเอน็ ไควร์ (ENQUIRE) มาใช้สร้างเวิลด์ไวด์เวบ็ ซ่ึงเขาได้ออกแบบ

7 และสร้างเว็บเบราว์เซอร์และเอดิเตอร์ตัวแรกของโลกช่ือว่า WorldWideWeb บน ระบบปฏบิ ัติการ NEXTSTEP ของสตีฟ จอบส์ และสร้างเวบ็ เซิร์ฟเวอร์ข้ึน เรียกว่า httpd (HyperText Transfer Protocol Daemon) ภาพท่ี 1.2 ทมิ เบอเนอร์ลี (Tim Berners-Lee) ในวยั 60 ปี (ภาพในปี ค.ศ.2014) ทม่ี า: https://en.wikipedia.org/wiki/Tim_Berners-Lee ภาพท่ี 1.3 แสดงสญั ลกั ษณข์ ององคก์ ร W3C ทค่ี วบคุมมาตรฐานทางด้านเวบ็ ท่มี า: http://www.w3.org/TR/html5/rendering.html ซ่ึงต่อมานาไฮเปอร์เทก็ ซ์มาใช้ร่วมกับเครือข่ายอินเทอร์เนต็ จนกลายเป็นมาตรฐาน เวบ็ ท่ีสาคัญของโลกท่อี ยู่ภายในการดูแลของสมาคมเวิลด์ไวด์เวบ็ (World Wide Web Consortium: W3C) ซ่งึ ทมิ เบอเนอร์ลกี เ็ ป็นผู้ก่อต้งั สมาคมดังกล่าวเช่นกนั

8 ยุคของเว็บไซต์ ด้วยความก้าวหน้าทางด้านเทคโนโลยีเวบ็ ก่อให้เกดิ เวบ็ ไซต์หลากหลายลักษณะ ซ่ึง ปัจจุบันได้มกี ารจาแนกยุคของเวบ็ ออกเป็น 4 ร่นุ ดงั น้ี 1. เวบ็ รุ่นท่ี 1 (Web 1.0) หรือ เวบ็ คงท่ี (Static Web) มีจุดมุ่งหมายในการ เผยแพร่ข้อมูลเท่าน้ัน ซ่ึงไม่ต่างจากหน้ากระดาษ หรือ ใบปลิวโฆษณา เป็นต้น ยังไม่มีการ ตอบสนองของผูใช้กลบั ไปยังผู้เผยแพร่ข้อมลู 2. เวบ็ รุ่นท่ี 2 (Web 2.0) หรือ เวบ็ พลวัตร (Dynamic Web) มีจุดมุ่งหมายในการ ใช้เวบ็ ไซต์ในการติดต่อประสานงาน รวมถึงการดาเนินงานทางธุรกิจและเครือข่ายทางสงั คม มีการใช้ระบบฐานข้อมูล (Database System) และมีระบบการแลกเปล่ียนข้อมูลท่ีมี ประสิทธิภาพสูงข้ึน เช่น เว็บไซต์การลงทะเบียนเรียน เว็บบอร์ด การคุยผ่านระบบ อนิ เทอร์เนต็ (Internet Relay Chat) การขายของผ่านเวบ็ ไซต์ เช่น www.amazon.com การ ใช้เครือข่ายทางสงั คม เช่น www.facebook.com 3. เวบ็ รุ่นท่ี 3 (Web 3.0) หรือ เว็บเชิงความหมาย (Semantic Web) มี จุดม่งุ หมายเพ่ือใช้ข้อมูลต่างๆ ทม่ี อี ยู่บนเวบ็ ไซต์ให้เกดิ ประโยชน์มากย่ิงข้นึ หรือ ใช้สาหรับ การค้นหาคาทม่ี คี วามหมายคล้ายคลงึ กนั หรือ การนาเสนอข้อมูลท่สี อดคล้องกบั พฤติกรรม ของผู้ใช้อินเทอร์เน็ต เป็นต้น โดยมีการใช้เทคโนโลยีเชิงความหมาย เช่น Ontology และ คลังคาภาษาต่างๆ ช่วยทาให้เกิดระบบการค้นหาท่ชี าญฉลาดมากข้ึน เช่น จักรกลค้นหา (Search Engine) พัฒนาการของซอฟต์แวร์แปลภาษา (Language Translator) การจาแนก เอกสารภาษาต่างๆ ด้วยความรวดเรว็ (Document Classification) เป็นต้น 4. เวบ็ รุ่นท่ี 4 (Web 4.0) หรือ เวบ็ ตัวแทน (Intelligent Personal Agents) โดย เวบ็ ในยุคท่ี 4 จะรับรู้ความรู้สึก (Sentiment) และความต้องการ (Need) ส่วนบุคคลของ ผู้ใช้ เว็บได้ ซ่ึงมีการเช่ือมโยงประสานระหว่างชีวภาพกับเว็บมากข้ึน หรือ เรียกว่า “Symbiotic Web” โดยมีการวิเคราะห์ท่ซี ับซ้อนมาก จนระบบเวบ็ สามารถเกิดการเรียนรู้ และเกดิ กระบวนการคดิ และตัดสนิ ใจแทนมนุษยม์ ากย่งิ ข้นึ (Sareh Aghaei, 2012)

9 สภาพแวดลอ้ มของเว็บไซต์ การออกแบบและพัฒนาเวบ็ ไซต์ ผู้ออกแบบและพัฒนาจาเป็นต้องทราบและเข้าใจ เก่ยี วกบั สภาพแวดล้อมของเวบ็ ไซต์ ซ่ึงประกอบไปด้วยองค์ประกอบท่สี าคัญในการแสดงผล เวบ็ ไซตไ์ ด้อย่างถูกต้องและมีประสทิ ธภิ าพ โดยสภาพแวดล้อมของเวบ็ ไซต์มีดงั น้ี 1. เวบ็ เบราว์เซอร์ (Web Browser) โดยคาว่า “เบราเซอร์ (Browser)” มี ความหมาย คือ ตัวเรียกหาหรือต้วเรียกค้นเว็บไซต์ เว็บเบราว์เซอร์มีหน้าท่ีแปลภาษา เอชทเี อม็ แอล เช่น โครม (Chrome) อินเทอร์เนต็ เอก็ ซ์พลอเลอร์ (Internet Explorer: IE) โอเปร่า (Opera) และ ไฟฟ็ อกซ์ (Mozilla FireFox) เป็นต้น โดยกระบวนการแปลภาษา เอชทเี อม็ แอลไปแสดงผลให้เกิดภาพหรือโครงร่างต่างๆ บนเวบ็ เบราว์เซอร์ เรียกว่า การ แปล หรือ การฉาบข้อมูลใหม่ (Rendering) บ่อยคร้ังผู้ออกแบบเวบ็ (Web Designer) จานวนมากไม่ได้คานึงถึงผู้ใช้ด้าน ระบบปฏบิ ัติการ อุปกรณ์ และย่ีห้อของเวบ็ เบราว์เซอร์ ทาให้การแสดงผลเวบ็ ไซต์มีความ ผิดเพ้ียนไปจากท่ไี ด้ออกแบบ และในบางคร้ังถึงข้ันท่ีไม่สามารถแสดงผลข้อมูลได้อย่าง ถูกต้อง คลาดเคล่ือนสงู ดังน้ันในการออกแบบเวบ็ ไซต์ จาเป็นท่จี ะต้องศึกษาลักษณะการ แสดงผลของแต่ละเวบ็ เบราว์เซอร์ (Web Browser Platform) เพ่ือทาให้การออกแบบ เวบ็ ไซตส์ ามารถปรับเปล่ยี นการแสดงผลให้เหมาะสมกบั แต่ละเวบ็ เบราวเ์ ซอร์ หรือ อุปกรณ์ ได้ โดยมีหลักการดงั น้ี 1.1 ติดตามมาตรฐานจากสมาคมเวิลด์ไวด์เวบ็ (W3C) อย่างสม่าเสมอ เน่ืองจากทางสมาคมจะมีการแจ้งการใช้งานคาส่งั ใหม่ๆ หรือ การระงับคาส่งั บางคาส่งั เป็น ต้น 1.2 ตรวจสอบคาส่งั มาตรฐานต่างๆ ท่ใี ช้งานทางด้านเวบ็ เช่น เอชทเี อม็ แอล (HTML) และ สไตล์ชีท (CSS) ให้ถูกต้อง รัดกุม และเป็นระเบียบมากท่สี ุด รวมถึงหา จุดบกพร่อง (Error) ของคาส่งั ด้วย 1.3 ต้องออกแบบเวบ็ ให้ผู้ใช้สามารถเข้าถึงได้ (Accessible) อ่านได้อย่างสะดวก ไม่ตกหล่น (Readable) ข้อความหรือเน้ือหาจะต้องมีความถูกต้อง ชัดเจน (Legible) อกั ขระหรือสญั ลกั ษณจ์ ะต้องสามารถแสดงผลได้อย่างถูกต้อง 1.4 ในข้ันตอนการตรวจสอบการแสดงผลเวบ็ ไซต์ท่อี อกแบบข้ึนน้ัน จะต้อง ทดสอบบนเวบ็ เบราว์เซอร์ท่หี ลากหลาย เพ่ือประเมินความถูกต้องของการแสดงผล และ นาไปปรับปรุงแก้ไขเพ่ือบรรเทาปัญหา (Migrate Problem) ท่อี าจจะเกดิ ข้นึ ได้

10 ภาพท่ี 1.4 แสดงแผนภมู ิร้อยละของแนวโน้มการใช้เวบ็ เบราว์เซอร์ ค.ศ. 2011-2015 ทม่ี า: http://www.w3schools.com/browsers/browsers_stats.asp, 2016 2. การคานึงถึงอตั ราความเรว็ ของสญั ญาณอนิ เทอร์เนต็ (Connection Speed) ใน การแสดงผลเวบ็ ไซต์ ส่งิ ท่ขี าดไม่ได้คอื สญั ญาณเครือข่ายอนิ เทอร์เนต็ ซ่งึ เป็นตัวกลางในการ ส่อื สารข้อมูลผ่านเวบ็ ไซต์ ดังน้ัน ผู้ออกแบบเวบ็ ควรคานึงถึงประสิทธิภาพในการส่งถ่าย ข้อมูลผ่านเครือข่ายอินเทอร์เน็ต เช่น ข้อมูลท่ปี รากฎต่อหน้าเวบ็ เพจมีจานวนมากเกินไป หรือไม่ ภาพถ่ายหรือภาพกราฟิ กต่างๆ มขี นาดทเ่ี หมาะสมหรือไม่

11 ภาพท่ี 1.5 แสดงแผนภมู ิค่าเฉล่ียและมัธยฐานความเรว็ ของเครือข่ายอนิ เทอร์เนต็ ประเภท ใช้สาย (Fixed Broadband) สารวจเม่อื เดอื นกนั ยายน ค.ศ.2014 ทม่ี า: http://dx.doi.org/10.1787/888933224610

12 ภาพท่ี 1.6 แสดงแผนภมู คิ ่าความเรว็ ต่าสดุ และสงู สดุ ของเครือข่ายอนิ เทอร์เนต็ ประเภท เคล่ือนท่ี (Mobile Broadband) สารวจเม่อื เดอื นกนั ยายน ค.ศ.2014 ทม่ี า: http://dx.doi.org/10.1787/888933224638 ตารางท่ี 1.1 แสดงอัตราความเร็วเครือข่ายอินเทอร์เน็ตเฉล่ียในเอเชีย (พฤษภาคม พ.ศ. 2559) ประเทศ อตั ราความเร็ว Mbps Singapore 121.7 Hong Kong 102.6 Japan 82.4 South Korea 59.5 Macau 51.1 Taiwan 50.6 China 29.8 Thailand 19.9 Vietnam 17.6

13 Cambodia 9 ท่มี า: http://www.bangkokpost.com/tech/local-news/568859/ thailand-internet-8th-fastest-in-asia โดยในประเทศไทยน้ัน ยังสามารถสารวจอตั ราความเรว็ อนิ เทอร์เนต็ เฉล่ียในแต่ละ เมอื งหรือจงั หวดั ได้ ดงั ตารางท่ี 1.2 ตารางที่ 1.2 แสดงอัตราความเรว็ เครือข่ายอินเทอร์เนต็ เฉล่ียในประเทศไทย (พฤษภาคม พ.ศ.2559) เมอื ง/จงั หวดั อตั ราความเร็ว Mbps มุกดาหาร 32.19 สตั หีบ 31.3 หัวหิน 25.4 พัทยา 22.6 กรุงเทพฯ 18.1 ท่มี า: http://www.bangkokpost.com/tech/local-news/ 568859/thailand-internet-8th-fastest-in-asia 3. การเกบ็ หน่วยความจาและเวลาในการดาวน์โหลดหน้าเวบ็ (Browser Cache and Download Time) ในการเรียกค้นเวบ็ ไซต์น้ัน จะกระทาผ่านเวบ็ เบราว์เซอร์ ซ่ึงปัจจุบันเวบ็ เบราว์เซอร์จะมีฟังก์ช่ันการทางานท่เี รียกว่า “แคช (Cache)” ซ่ึงหมายถึงหน่วยความจาท่ี เว็บเบราว์เซอร์เก็บข้อมูลไว้ โดยท่ีข้ อมูลเหล่าน้ันอาจเป็ นภาพ ข้ อความ ช่ือผู้ใช้ (Username) รหัสผ่าน (Password) สไตล์ชีท (CSS) โดยสาเหตุท่จี าเป็นต้องมีแคช เพ่ือ ช่วยให้การแสดงผลหน้าเวบ็ มีความรวดเรว็ มากข้นึ โดยไม่จาเป็นต้องดาวน์โหลดข้อมูลท้งั หน้าเวบ็ ใหม่ทง้ั หมด กรณีทเ่ี คยเข้าเวบ็ ไซต์น้ันๆ แล้ว ซ่ึงจะมีการเกบ็ ข้อมูลต่างๆ ไว้ในเวบ็ เบราว์เซอร์จากการเปิ ดหน้าเวบ็ ไซต์คร้ังแรก ทาให้ประหยัดเวลาในการดาว์โหลดหน้าเวบ็ และประหยัดปริมาณของสญั ญาณอนิ เทอร์เนต็ แต่หากมีการเกบ็ แคชไว้มากเกินไปก็อาจจะ พบว่าการแสดงผลบนเวบ็ เบราวเ์ ซอร์ใช้ระยะเวลานานข้นึ อนั เกิดจากระยะเวลาในการค้นหา ข้อมูลในแคชน่ันเอง อาจจะมีการชาระแคชในเวบ็ เบราว์เซอร์เพ่ือให้การทางานกลับมาเป็น ปกตใิ หม่อกี คร้ังได้

14 ดงั น้ันหากต้องการออกแบบหน้าเวบ็ ไซตใ์ ห้สามารถแสดงผลได้อย่างรวดเรว็ โดย พ่ึงความสามารถของหน่วยความจาแคชในเวบ็ เบราว์เซอร์ จาเป็นต้องออกแบบเวบ็ ไซต์ใน แต่ละหน้าให้มีลักษณะเค้าร่างหน้าเวบ็ (Web Layout) ภาพหลัง (Background) ส่วนของ การนาทาง (Web Navigation) ให้มลี กั ษณะคล้ายคลึงกนั กจ็ ะทาให้หารแสดงผลมีความเรว็ มากข้นึ 4. อุปกรณ์และระบบปฏบิ ัติการ (Device and Operating System Issues) เป็นตัว แปรสาคัญท่ยี ากต่อการควบคุม เน่ืองจากความหลากหลายของอุปกรณ์และขนาดหน้าจอ (Screen Sizes) โดยเราไม่สามารถคาดเดาได้ว่าผู้ใช้จะใช้อปุ กรณใ์ ดหรือระบบปฏบิ ัติการใด ในการเข้าถึงเวบ็ ไซต์ ดังน้ันกระบวนการในการทดสอบท่ดี ีท่สี ุด คือ การทดสอบแสดงผล หน้าเวบ็ ไซต์บนอุปกรณ์และระบบปฏิบัติการเท่าท่สี ามารถทดสอบได้ เพ่ือทาให้ทราบถึง ปัญหาการแสดงผลท่อี าจจะเกิดข้นึ โดยการออกแบบเวบ็ ไซต์ท่มี ีการคานึงถึงอุปกรณ์และ ระบบปฏบิ ัติการ มีดังต่อไปน้ี 4.1 การคานึงถงึ ขนาดหน้าจอและความลึกของสี (Screen Resolution and Color Depth) เป็นส่งิ สาคัญในการออกแบบเวบ็ ไซต์ เน่ืองจากความหลากหลายของอุปกรณ์ เช่น ความสามารถในการพลกิ แกนของอุปกรณ์ (Orientation) ความกว้างและความลึกของช่วงสี ท่หี น้าจอจะสามารถแสดงสไี ด้ ขนาดของหน้าจอ (Scree Resolution) ความละเอียดของ จานวนจุดพิกเซลลต์ ่อตารางน้ิว (Pixels per Inch: PPI) เป็นต้น 4.2 การคานึงถึงชนิดและรุ่นของเวบ็ เบราว์เซอร์ (Browser Type and Version) เป็นส่ิงท่ตี ้องให้ความสาคัญ เน่ืองจากเวบ็ เบราว์เซอร์แต่ละประเภทมีฟังก์ช่ันการทางานท่ี แตกต่างกนั ตามผู้ผลติ ซอฟต์แวร์ซ่ึงอาจทาให้การแสดงผลมีความแตกต่างกันได้ อกี ท้งั ยังมี การปรับเปล่ียนรุ่นของซอฟต์แวร์เวบ็ เบราว์เซอร์เพ่ือรองรับการทางานท่มี ากข้ึน กส็ ่งผลต่อ การแสดงผลเช่นเดียวกนั ดังน้ันการติดตามชนิดและร่นุ ของเวบ็ เบราว์เซอร์ทาให้ผู้ออกแบบ เวบ็ ไซต์สามารถดึงความสามารถของเวบ็ เบราว์เซอร์ในการแสดงผลเวบ็ ได้อย่างถูกต้องและ น่าดึงดูดมากย่งิ ข้นึ 4.3 การแสดงผลตวั อกั ษร (Font) ในแต่ละเวบ็ เบราว์เซอร์หรือระบบปฏบิ ัติการ มกี ารกาหนดค่าโดยปริยาย (Default) เก่ยี วกบั ลักษณะของอกั ษร อาจทาให้การแสดงอกั ษร ไม่ตรงกับท่อี อกแบบไว้ รวมถึงเม่ือผู้ออกแบบเว็บกาหนดลักษณะอักษรไว้ แต่ปรากฎว่า ระบบปฏิบัติการหรืออุปกรณ์ของผู้เรียกใช้เวบ็ ไม่มีลักษณะอักษรน้ันในระบบ กเ็ ป็ นอีก ปัญหาหน่ึงท่พี บได้มากในการแสดงผลข้อมูลบนเวบ็ ไซต์ ดังน้ัน การกาหนดอกั ษรบนหน้า เวบ็ อาจจะต้องใช้เทคนิคพิเศษเพ่ือทาให้การแสดงผลข้อมูลมีความถูกต้อง สวยงามและได้ ขนาดตามทต่ี ้องการ

15 Web Browser Cache Internet ภาพท่ี 1.7 แสดงสภาพแวดล้อมของเวบ็ ไซต์ การแสดงผลบนหนา้ จอหลายขนาด ในการออกแบบเว็บไซต์น้ัน ผู้ออกแบบเวบ็ ไซต์ไม่สามารถทราบได้ว่าผู้ใช้เข้าถึง เวบ็ ไซต์ด้วยอุปกรณ์ชนิดใด ขนาดหน้าจอเท่าใด ตัวอย่างเช่น การใช้จอคอมพิวเตอร์ส่วน บุคคล (Personnel Computer: PC) ผู้ใช้สามารถปรับขนาดของหน้าจอได้ (Screen Resolution) โอยอาจกาหนดเป็น 600 x 800 px หรือ จอประเภทไวด์สกรีน 1366 x 768 px เป็ นต้น และในส่วนของหน้าจอบนอุปกรณ์เคล่ือนท่ี ผู้ใช้ไม่สามารถปรับขนาดของ หน้าจอได้ แต่อุปกรณ์เคล่ือนท่แี ต่ละย่ีห้อกม็ ีขนาดหน้าจอท่แี ตกต่างกนั ตามรุ่นท่ผี ลิต เช่น ขนาดหน้าจอของ iPhone และ iPad เป็นต้น 1. การแสดงผลบนหน้าจอคอมพิวเตอร์ส่วนบุคคล (Desktop and Laptop Displays) เป็นอปุ กรณก์ ารแสดงผลหน้าเวบ็ ไซต์ในยุคแรกจนถึงปัจจุบัน นักออกแบบเวบ็ ก็ มีการปรับตัวตามขนาดของจอแสดงผลอยู่ตลอดเวลาเพ่ือออกแบบเวบ็ ให้ได้ขนาดท่ดี ีท่สี ุด ทส่ี ามารถเข้ากนั ได้กบั ทกุ ๆ หน้าจอ ตารางท่ี 1.3 แสดงขนาดของหน้าจอคอมพิวเตอร์สว่ นบุคคลจาแนกตามปี ค.ศ. ปี ค.ศ. / ขนาดจอ 1920x1080 1366x768 1280x1024 1280x800 1024x768 800x600 0.30% 2015 16% 33% 7% 5% 4% 0.50% 0.50% 2014 13% 31% 8% 7% 6% 1% 2013 11% 25% 10% 8% 9% 0% 1% 2012 8% 19% 12% 11% 13% 4% 2011 6% 15% 14% 14% 2010 2% 18% 17% 20% 2009 36% ท่มี า: http://www.w3schools.com/browsers/browsers_display.asp

16 ตารางท่ี 1.4 แสดงความลึกของสบี นหน้าจอคอมพิวเตอร์สว่ นบุคคลจาแนกตามปี ค.ศ. ปี ค.ศ. / จานวนสี 16,777,216 65,536 256 2015 99% 0.50% 0.50% 2014 98.50% 1% 0.50% 2013 98% 1.50% 0.50% 2012 98% 2% 0% 2011 97% 3% 0% 2010 97% 3% 0% 2009 95% 4% 1% ท่มี า: http://www.w3schools.com/browsers/browsers_display.asp ในอดีตการออกแบบเวบ็ ไซตเ์ พ่ือให้แสดงผลได้ทุกหน้าจอน้ัน เป็นเพียงการกาหนด ขนาดเวบ็ เพจให้คงทห่ี รือขนาดตายตัว (Fixed Design) และทาให้ส่วนของเวบ็ เพจแสดงอยู่ ในตาแหน่งกลางหน้าจอ กรณีท่หี น้าจอมีความกว้างมากหรือจอไวด์สกรีน (Widescreen Monitor) จะทาให้เกดิ พ้ืนท่เี ปล่าด้านซ้ายและขวา และอกั ษรมขี นาดเลก็ เกนิ ไป ไม่เหมาะสม กบั ขนาดหน้าจอ และในบางคร้ังอาจแสดงผลข้อมลู ขาดหายไปบางสว่ น ส่งผลกระทบต่อการ แสดงผลข้อมลู ให้แก่ผู้ใช้เวบ็ ได้ เกิดพ้ นื ทีเ่ ปล่า (Space) WEB PAGE WEB PAGE ขนาดจอภาพ 800 x 600 px ขนาดจอภาพ 1366 x 768 px ภาพท่ี 1.8 แสดงหน้าเวบ็ เพจทก่ี าหนดขนาดคงท่บี นหน้าจอต่างขนาดกนั ปัจจุบันสามารถแก้ไขปัญหาเหล่าน้ีได้ โดยการใช้ความสามารถของมีเดียคิวร่ี (Media Queries) ท่กี าหนดได้ภายในสไตล์ชีท (Cascading Style Sheet: CSS) ซ่ึงทาให้

17 สามารถกาหนดกฎการแสดงผลของหน้าจอแต่ละขนาดได้ รวมถึงการกาหนดลักษณะของ หน้าเวบ็ เพจในข้นั ตอนของการพิมพ์ออกทางเคร่ืองพิมพ์ (Printer) ได้เช่นกนั มีเดียคิวร่ี (Media Queries) น้ันมาจากคาว่า “ส่อื (Media)” และคาว่า “สอบถาม (Queries)” จงึ มคี วามหมายถงึ การสอบถามส่อื หรืออปุ กรณ์น้ันๆ ว่ามขี นาดหน้าจอเท่าไหร่ และพลิกอยู่ในแกนใด การแสดงผลหน้าเวบ็ ไซต์โดยการใช้ความสามารถของมีเดียคิวร่ี (Media Queries) น้ัน เป็นการออกแบบเวบ็ ไซต์เชิงยืดหยุ่น (Flexible Design) จะช่วยให้ผู้ออกแบบเวบ็ สามารถกาหนดการแสดงผลหน้าเวบ็ ตามลักษณะของอุปกรณ์ได้ (Device Characteristics) เช่น กรณีท่ผี ู้ใช้เรียกหน้าเวบ็ ไซต์จากเคร่ืองคอมพิวเตอร์ส่วนบุคคลจะแสดงหน้าเวบ็ ไซต์ท่ี เหมาะสมกับขนาดจอภาพ แต่เม่ือผู้ใช้ย่อขนาดของเวบ็ เบราว์เซอร์หรือเรียกหน้าเวบ็ ไซต์ จากสมาร์ทโฟน ซ่ึงมีขนาดหน้าจอท่ีเล็กกว่าและแกนการแสดงผลเป็ นแนวต้ัง (Vertical Orientation) กจ็ ะมกี ารปรับหน้าเวบ็ ไซต์ให้มีขนาด การจัดเรียงเค้าร่าง (Layout) หรือ การ อาพรางบางส่วนทไ่ี ม่สาคัญไว้ เพ่ือให้เหมาะสมกบั พ้ืนทห่ี น้าจอภาพสมาร์ทโฟน ภาพท่ี 1.9 แสดงหน้าเวบ็ เพจทไ่ี ด้รับการออกแบบเชงิ ยืดหยุ่น (Flexible Design) ทม่ี า: https://www.nasa.gov/, 2016 2. อุปกรณ์เคล่ือนท่ี (Mobile Devices) เป็นอุปกรณ์ท่มี ีจอภาพแสดงผลแตกต่าง จากจอภาพคอมพิวเตอร์ส่วนบุคคล (PC) และปัจจุบนั จอภาพอปุ กรณเ์ คล่อื นท่กี เ็ ป็นท่นี ิยม

18 ใช้ในการเรียกค้นหน้าเวบ็ ไซต์ เน่ืองจากความสะดวกและรวดเร็วในการใช้งาน จอภาพ อุปกรณ์เคล่ือนท่ใี นปัจจุบัน เช่น จอภาพของสมาร์ทโฟน (Smartphone) จอภาพแทบ็ เลต็ (Tablet) จอภาพแทบ็ เลต็ พีซี (Tablet PC) สมาร์ทวอช (Smart Watch) เป็นต้น ซ่ึง อปุ กรณแ์ ต่ละชนิดและแต่ละย่ีห้อกม็ ีขนาดจอรูปท่แี ตกต่างกนั ตามลักษณะการใช้ประโยชน์ ของอุปกรณ์ นอกจากน้ีเทคโนโลยีท่ใี ช้ผลิตจอภาพกม็ ีความแตกต่างกัน เช่น จอภาพไอพี เอส (In-Plane Switching: IPS) หรือ จอภาพแบบแอลอดี ี (Active-Matrix Organic Light-Emitting Diode: AMOLED) เป็นต้น ดังน้ัน เช่นเดียวกับการแสดงผลบนจอภาพคอมพิวเตอร์ส่วนบุคคล นักออกแบบ เว็บไซต์ จะต้ องคานึงถึงความแตกต่างของขนาดจอภาพและความสามารถในการ ปรับเปล่ียนแกนของอุปกรณ์ เพ่ือใช้ความสามารถของมีเดียคิวร่ี (Media Queries) ในการ แสดงผลให้เหมาะสมกับจอภาพและแกนของอุปกรณ์น้ันๆ ได้อย่างเหมาะสมมากข้ึน นอกจากน้ียังสามารถกาหนดกลยุทธใ์ นการออกแบบเวบ็ ไซต์ได้ 2 ลักษณะ คือ กลยุทธใ์ น การออกแบบเวบ็ ไซต์ประเภทโมบายไซต์ (Mobile Site) แยกออกจากเวบ็ ไซต์ประเภท ทว่ั ไป (Desktop Site) หรือ กลยุทธ์ในการออกแบบเวบ็ ไซต์ประเภทเวบ็ เชิงตอบสนอง (Responsive Web) ภาพท่ี 1.10 แสดงขนาดจอภาพอปุ กรณ์เคล่อื นทจ่ี าแนกตามการใช้งาน ทม่ี า: http://www.ericsson.com/res/docs/2015/ericsson-mobility-report-june- 2015.pdf, 2015

19 ภาพท่ี 1.11 แสดงขนาดจอภาพอปุ กรณแ์ ละความละเอยี ดของจอภาพ ท่มี า: Cengage Learning, 2015 3. โมบายไซต์ (Mobile Site) คือ การออกแบบเวบ็ ไซต์ประเภทหน่ึงท่เี น้นการ ออกแบบเวบ็ ให้เข้ากนั ได้เฉพาะกบั อปุ กรณ์เคล่ือนท่ี ซ่ึงมีลักษณะค่อนข้างเรียบง่าย มีขนาด อกั ษรใหญ่ กราฟิ กถูกลดความละเอียดลง เหลือไว้เฉพาะข้อมูลท่สี าคัญเท่าน้ัน ดังน้ัน กล ยุทธก์ ารออกแบบเวบ็ ไซตป์ ระเภทโมบายไซต์ (Mobile Site) แยกออกจากเวบ็ ไซต์ประเภท ทว่ั ไป (Desktop Site) จะทาให้ผู้ออกแบบเวบ็ จะต้องแก้ไขเวบ็ ไซต์ท้งั ในส่วนของโมบายไซต์ และ เวบ็ ไซต์ประเภทท่วั ไปเสมอ ทาให้เสยี เวลาในการจัดการเน้ือหาและทรัพยากรในการ ดูแลเวบ็ ไซตม์ ากข้นึ Desktop Site Mobile Site ภาพท่ี 1.12 แสดงการเปรียบเทยี บการแสดงผลเวบ็ ไซตร์ ะหว่างเดสก์ ทอ็ ปกบั โมบายไซต์ ท่มี า: https://m.facebook.com/, 2016

20 มีการให้ ผู้ใช้ เลือกมุมมองการแสดง เน้ือหาได้ 3 ลักษณะคือ ลักษณะท่ัวไป (Desktop) ลั ก ษ ณ ะ เ ข้ า กั บ อุ ป ก ร ณ์ เคล่ือนท่ี (Mobile) และ ลักษณะมุมมอง เหมือนพิมพ์ (Print) ภาพท่ี 1.13 แสดงตวั เลือกมุมมองการแสดงเน้อื หา ทม่ี า: https://www.w3.org/standards/webdesign/, 2016 4. เวบ็ เชิงตอบสนอง (Responsive Web) คือ การออกแบบเวบ็ ให้สามารถ ปรับเปล่ยี นเค้าร่างให้เหมาะสมกบั ขนาดของจอภาพแสดงผล โดยเวบ็ เชิงตอบสนองสามารถ แสดงรายละเอยี ด เน้ือหา ภาพกราฟิ กต่างๆ มปี ระสทิ ธภิ าพดีกว่าโมบายไซต์ ซ่ึงปัจจุบันนัก ออกแบบเวบ็ ไซตม์ ่งุ เน้นทจ่ี ะใช้กลยุทธก์ ารออกแบบเวบ็ ไซต์ประเภทเวบ็ เชิงตอบสนองเพ่ือ แสดงผลเว็บไซต์ได้ อย่างเหมาะสม โดยการออกแบบเว็บไซต์เชิงตอบสนองจะใช้ ความสามารถของมีเดียคิวร่ี (Media Queries) ท่กี าหนดในสไตล์ชีท (CSS) รวมถึงการ โปรแกรมเพ่ิมเติมความสามารถด้วยภาษาจาวาสคริปต์ (Java Script) และมาตรฐานแบบ วัตถุในเอกสาร (Document Object Model: DOM) เพ่ือทาให้เวบ็ เชิงตอบสนองมีความ สมบูรณ์และมีความฉลาดในการเลือกแสดงผลหรือจัดเรียงเค้ าร่างให้ เหมาะสมกับขนาด จอภาพของอุปกรณ์ต่างๆ ได้โดยการออกแบบเพียงคร้ังเดียว ทาให้ประหยัดเวลาและมี ประสทิ ธภิ าพสงู รวมถึงมีความยืดหยุ่นกบั อปุ กรณ์ทจ่ี ะเกดิ ข้นึ ในอนาคตด้วย

21 สมารท์ โฟนในแกนแนวต้งั สมารท์ โฟนในแกนแนวนอน (Vertical Orientation) (Horizontal Orientation) ภาพท่ี 1.14 แสดงการออกแบบเวบ็ ไซตป์ ระเภทเวบ็ เชงิ ตอบสนอง ทม่ี า: http://www.apple.com/, 2016 5. การจัดการปัญหาขนาดของจอภาพแสดงผล (Solving the Screen Resolution Dilemma) เป็ นส่ิงท่ผี ู้ออกแบบเว็บต้องให้ความสาคัญ โดยการออกแบบเว็บมีเค้าร่าง เก่ยี วกบั การจดั การขนาดของจอภาพ อยู่ 2 เค้าร่าง คือ แบบคงท่หี รือแบบตายตัว (Fixed) และ แบบยืดหยุ่น (Flexible) ซ่ึงปัจจุบันเวบ็ ไซต์ท่วั ๆ ไปจะใช้การออกแบบประเภทคงท่ี เน่ืองจากความง่ายต่อการออกแบบและพัฒนา แต่มีข้อจากัดในการแสดงผลบนอุปกรณ์ท่ี หลากหลาย การออกแบบเวบ็ ไซต์ประเภทคงท่นี ้ัน จาเป็นต้องพ่ึงผู้ใช้ในการส่ายหน้าเวบ็ (Pan) การขยายหน้าเวบ็ (Zoom) และการเล่ือน (Scrolling) เพ่ือปรับขนาดของเน้ือหาให้เหมาะ สาหรับการอ่านหรือรับสาร ส่วนการออกแบบเวบ็ ไซต์แบบยืดหยุ่นน้ันจะช่วยให้เว็บไซต์ สามารถแสดงผลได้อย่างเหมาะสมบนอุปกรณ์ท่หี ลากหลายได้ โดยการออกแบบท้งั สอง ประเภทน้ัน มีข้อดีดงั น้ี 5.1 ข้อดีของการออกแบบเวบ็ ไซต์แบบยดึ หรือแบบตายตวั 1) ผู้ออกแบบเวบ็ ไซต์จะเป็นผู้กาหนดมุมมองให้แก่ผู้ใช้แบบเดียวเทา่ น้ัน 2) สามารถกาหนดขนาดอกั ษรคงทไ่ี ม่แปรผนั ตามขนาดของหน้าจอแสดงผล

22 5.2 ข้อดขี องการออกแบบเวบ็ ไซต์แบบยืดหยุ่น 1) มมุ มองของเวบ็ ไซตเ์ หมาะสมกบั อปุ กรณข์ องผู้ใช้ 2) ลดการเล่ือนหรือส่ายหน้าเวบ็ ในแนวนอนเพ่ืออ่านหน้าเวบ็ ไซต์ท่ลี ้นเว็บ เบราว์เซอร์ 3) มีความยืดหยุ่นในการแสดงผลบนหลากหลายอปุ กรณ์ 4) อกั ษรและเค้าร่างเวบ็ มกี ารปรับขนาดให้เหมาะสมกบั หน้าจอของอุปกรณ์ 5) สามารถปรับตาแหน่งและซ่อนหรือแสดงผลบางองค์ประกอบของหน้า เวบ็ ไซตใ์ ห้เข้ากบั ขนาดหรือแกนของจอภาพได้ สรุป ปัจจุบันการติดต่อส่อื สารผ่านทางเวบ็ ไซต์เป็นช่องทางการส่อื สารท่สี ะดวกรวดเร็ว สามารถเข้าถึงได้ทกุ เม่อื และเวบ็ ไซต์ถอื ว่าเป็นเคร่ืองมือท่มี อี านาจในการชักจูงสงู จึงจาเป็น ทจ่ี ะต้องทราบและเข้าใจหลักการออกแบบเวบ็ ไซต์ เพ่ือนาไปใช้ในการออกแบบเวบ็ ไซต์ได้ อย่างมีประสิทธภิ าพตามวัตถุประสงค์ของการออกแบบ โดยการออกแบบเวบ็ ไซต์ (Web Design) เป็ นการวางแผนและการดาเนินงานในการผลิตเว็บไซต์ ซ่ึงประกอบไปด้วย วัตถุประสงค์ของเวบ็ ไซต์ การวางกรอบแนวคิด การออกแบบเน้ือหาและการส่อื สาร การ ออกแบบเค้าร่างของเวบ็ ไซต์ การออกแบบอักษร การออกแบบเวบ็ ไซต์ท่ผี ู้ใช้ท่วั ไปและผู้ พิการเข้าถงึ เน้ือหาได้ และการคานึงถึงสภาพแวดล้อมท่เี วบ็ ไซตจ์ ะสามารถทางานและสง่ ถ่าย ไปยังผู้ใช้ได้ ท้งั น้ีแนวคิดในการออกแบบเวบ็ ไซต์จะเป็ นอิสระจากภาษาโปรแกรมหรือ เคร่ืองมอื พัฒนาเชิงเทคนิคด้วย คาถามทบทวน 1. จงอธบิ ายความสมั พันธร์ ะหว่างการออกแบบเวบ็ ไซต์กบั แคป็ โตโลยีมาพอสงั เขป 2. การออกแบบเวบ็ ไซต์ (Web Design) คอื อะไร 3. การออกแบบเวบ็ ไซต์ในลักษณะเชิงสนุ ทรียะ (Aesthitic Web Design) คอื อะไร และแตกต่างจากหลกั การออกแบบเวบ็ อย่างไร 4. สมาคมเวิลด์ไวด์เวบ็ (World Wide Web Consortium: W3C) ก่อต้ังโดยใคร และสมาคมดงั กล่าวมีความสาคญั กบั การออกแบบและพัฒนาเวบ็ ไซต์อย่างไร 5. จงอธบิ ายความแตกต่างระหว่างยุคของเวบ็ ไซต์ท้งั 4 ยุคมาพอสงั เขป พร้อม ยกตวั อย่างเวบ็ ไซตใ์ นแต่ละยุค

23 6. สภาพแวดล้อมของเวบ็ ไซต์ (Web Site Environment) ประกอบไปด้วย อะไรบ้าง 7. หน่วยความจาแคช (Cache) คืออะไร และมีความสาคัญกับเวบ็ เบราเซอร์ (Web Browser) อย่างไร 8. เวบ็ เชิงตอบสนอง (Responsive Web) คอื อะไร 9. มีเดียคิวร่ี (Media Queries) คืออะไร และมีประโยชน์อย่างไรในการแสดงผล เวบ็ ไซต์ 10.จงยกตัวอย่างเวบ็ ไซต์ท่ีสามารถการจัดการปัญหาขนาดของจอภาพแสดงผล (Solving the Screen Resolution Dilemma) ได้

24 เอกสารอา้ งอิง Cailliau, Robert (1995). A Little History of the World Wide Web. World Wide Web Consortium. Retrieved 5 January 2015. URL: https://www.w3.org/History.html Clark Wimberly. (2015) Reimagining the Web Design Process. Retrieved 1 July 2015. URL: http://sixrevisions.com/web_design/reimagine-web-design- process/ Daniel Schwabe, Gustavo Rossi, Luiselena Esmeraldo, Fernando Lyardet. (2001). Web Design Frameworks: An Approach to Improve Reuse in Web Applications Web Engineering: Managing Diversity and Complexity of Web Application Development. Springer Berlin Heidelberg Berlin, Heidelberg 335- 352. URL: http://link.springer.com/chapter/10.1007%2F3-540-45144- 7_32 International Organization for Standardization (2010). Ergonomics of human system interaction - Part 210: Human-centered design for interactive systems (formerly known as 13407). ISO9241-210:2010. Lidwell, W.I.L.L.I.A.M, Holden , K.R.I.T.I.N.A. & Butler, J.I.L.L. (2010). Universal Principles of Design. United States of America: Rockport Publishers, Inc. Palmer, Sean B.; Berners-Lee, Tim (2001). Enquire Manual — In HyperText. Retrieved 5 January 2015. URL: https://www.w3.org/People/Berners- Lee/EnquireManual.htm Thomas A. Powell.(2003) Web Design: The Complete Reference. ISBN 0-07- 058252-1. McGraw-Hill Publishing Company Limited 914 p. Sareh Aghaei, Mohammad Ali Nematbakhsh and Hadi Khosravi Farsani. (2012) EVOLUTION OF THE WORLD WIDE WEB: FROM WEB 1.0 TO WEB 4.0. International Journal of Web & Semantic Technology (IJWesT) Vol.3, No.1, January 2012 http://airccse.org/journal/ijwest/papers/3112ijwest01.pdf

25 แผนบริหารการสอนประจาบทที่ 2 หวั ขอ้ เน้ ือหา ทฤษฎเี กสตอลทก์ บั การออกแบบเวบ็ ไซต์ กฎของฟิ ทท์ กฎของฮกิ ซ์ หลกั การพาเรโต หลกั การของหมวก 5 ช้นั วตั ถุประสงคเ์ ชิงพฤติกรรมหวั ขอ้ เน้ ือหา 1. อธบิ ายทฤษฎเี กสตอลทก์ บั การออกแบบเวบ็ ไซต์ได้ 2. อธบิ ายกฎของฟิ ททก์ บั การออกแบบเวบ็ ไซตไ์ ด้ 3. อธบิ ายกฎของฮกิ ซก์ บั การออกแบบเวบ็ ไซต์ได้ 4. อธบิ ายหลักการพาเรโตกบั การออกแบบเวบ็ ไซต์ได้ 5. อธบิ ายหลักการของหมวก 5 ช้นั กบั การออกแบบเวบ็ ไซต์ได้ วิธีและกิจกรรมการเรียนการสอน 1. วิธีสอน 1.1 วธิ สี อนแบบบรรยาย 1.2 วธิ สี อนแบบอภปิ ราย 1.3 วิธสี อนแบบการศกึ ษาโดยลาพัง 2. กิจกรรมการเรียนการสอน 2.1 ผู้สอนบรรยายสรปุ เน้อื หา 2.2 ให้ผู้เรียนศกึ ษาเน้ือหาจากเอกสารประกอบการสอน 2.3 ผู้เรียนร่วมอภปิ รายการออกแบบเวบ็ ไซต์ลกั ษณะต่าง ๆ โดยอ้างองิ จาก หลกั การออกแบบเวบ็ 2.4 ผู้เรียนแบ่งกลุ่มร่วมกนั วเิ คราะห์เปรียบเทยี บเน้ือหา ก่อนผู้สอนจะสรุปและ ยกตัวอย่างเปรียบเทยี บ 2.5 มอบหมายให้ผู้เรียนค้นหาเพ่ิมเตมิ

26 สือ่ การเรียนการสอน 1. เอกสารประกอบการสอน 2. ส่อื อเิ ลก็ ทรอนิกส์ 3. หนังสอื ตารา เอกสารทเ่ี ก่ยี วข้อง การวดั ผลและประเมนิ ผล 1. สงั เกตการตอบคาถามและต้งั คาถามของผู้เรียนในระหว่างการบรรยาย อภิปราย และซักถาม 2. สงั เกตความต้งั ใจในการตดิ ตามเน้อื หาบทเรยี น 3. สงั เกตการให้ความร่วมมือในการอภิปรายกลุ่ม 4. สงั เกตการให้ความร่วมมอื ในการศกึ ษาโดยลาพัง

บทที่ 2 หลกั การออกแบบเว็บไซต์ การออกแบบเวบ็ ไซต์ท่มี ีประสทิ ธภิ าพน้ัน ทมี ผู้ออกแบบเวบ็ ไซต์จาเป็นต้องทราบ หลักการ กฎ ทฤษฎีต่างๆ ท่เี ก่ียวข้องกับการออกแบบเวบ็ ไซต์ โดยบทน้ีจะกล่าวถึงทฤษฎี เกสตอลทก์ บั การออกแบบเวบ็ ไซต์ (Gestalt theory) กฎของฟิ ทท์ (Fitts’s law) กฎของ ฮิกซ์ (Hick’s law) หลักการพาเรโต (Pareto principle) หลักการของหมวก 5 ช้ัน (Five hat racks) โดยหลักการ กฎ และทฤษฎี ท่กี ล่าวมาน้ี เป็นแนวทางทน่ี ักออกแบบเวบ็ ไซต์ควร ทราบและนาไปประยุกต์ใช้ในการออกแบบโครงร่างและส่วนประกอบของเวบ็ ไซต์ท้งั หมด เพ่ือให้สอดคล้องกบั ประสบการณ์ของผู้ใช้ (User experience: UX) มากท่สี ดุ ทฤษฎีเกสตอลทก์ บั การออกแบบเว็บไซต์ ทฤษฎีเกสตอลท์ (Gestalt theory) คือ ทฤษฎที ่กี ล่าวถึงการรับรู้ภาพของมนุษย์ (Visual perceptions) ถูกนาเสนอโดยนักจิตวิทยาชาวเยอรมัน ในปี ค.ศ.1920 โดยคาว่า เกสตอลท์ (Gestalt) ในภาษาเยอรมัน หมายถึง รูปร่างทางกายภาพ เช่น รูปร่าง (Shape) รูปแบบ (Pattern) และทา่ ทาง โดยทฤษฎีเกสตอลท์ เป็ นการอธบิ ายถึงการรับรู้ของมนุษย์ท่ถี ูกกระตุ้นให้ตีความ ภาพเป็นภาพรวมเดยี วกนั โดยภาพรวมอาจเกดิ จากการหย่งั รู้ภาพรวมในทนั ที หรือเกดิ จาก การสงั เกตหุ น่วยย่อยๆ และประกอบกนั เป็นภาพรวม ข้นึ อยู่กบั แต่ละบุคคล แต่สดุ ท้ายแล้ว มนุษย์กจ็ ะปรับการรับร้เู ป็นภาพรวมเสมอ ทฤษฎเี กสตอลทป์ ระกอบไปด้วยพ้ืนฐานของการรับร้ขู องมนุษย์ 4 ประการ ดงั น้ี 1. การรบั รูถ้ ึงการปรากฎ (Emergence) คือ การหย่ังรู้ภาพรวมท่ปี รากฎข้ึน ในทนั ที อาจเกิดจากการเทยี บเค้าร่างกับประสบการณ์เดิมท่มี ีอยู่ แต่ในมนุษย์บางคนอาจ ต้องใช้วิธกี ารสงั เกตุหน่วยย่อยๆ ท่ปี รากฎบนภาพ แล้วเกดิ การตีความโดยเปรียบเทยี บกับ รูปทรงหรือรูปแบบท่มี ีในประสบการณ์เดิมเพ่ืออนุมานเป็ นภาพรวมภาพเดียวให้ปรากฎ ข้นึ มา ตัวอย่างเช่น ภาพท่ี 2.1 แสดงให้เห็นว่ามนุษย์ส่วนใหญ่เม่ือมองไปท่รี ูปจะ ปรากฎเป็นภาพของสนุ ัขข้นึ โดยการหย่งั รู้ แต่ในมนุษยบ์ างคนอาจเร่ิมเหน็ สว่ นประกอบ เช่น ขา หู หัว และเร่ิมเทียบกับรูปแบบพฤติกรรมของส่ิงมีชีวิตท่ีกาลังก้มดมพ้ืน จากน้ันจะ

28 ปรากฎภาพรวมท้งั หมดทนั ที และเม่ือเหน็ ภาพรวมทต่ี คี วามเป็นสนุ ัขแล้ว เม่ือมองภาพน้ีใน คร้ังถดั ไป มนุษย์จะหย่งั ร้ภู าพรวมในทนั ที โดยอาจไม่ต้องสงั เกตสุ ว่ นประกอบย่อยๆ อกี ภาพท่ี 2-1 แสดงภาพสนุ ัขท่กี าลงั ดมพ้ืนอยู่ ทม่ี า: https://tongraphics.files.wordpress.com/2014/02/my-research-dossier.pdf การรับรู้การปรากฎสามารถอธบิ ายถึงการรับรู้ของผู้เข้าใช้เวบ็ ไซต์ได้ เช่น ผู้ใช้ท่มี ี ประสบการณ์เข้าใช้เวบ็ บ่อยคร้ัง อาจเกิดการหย่ังรู้ท่มี าจากประสบการณ์เดิมๆ ทาให้เข้าใจ และเหน็ ภาพรวมของเวบ็ ไซต์หน่ึงๆ ได้รวดเรว็ ข้นึ แต่ในผู้เข้าใช้เวบ็ ไซต์คร้ังแรกอาจสงั เกตุ ส่วนประกอบย่อยๆ ของเวบ็ ไซต์ก่อนทจ่ี ะประกอบกนั เป็นภาพรวมของเวบ็ ไซต์ทง้ั หมด การออกแบบเวบ็ ไซต์ควรคานึงถึงการรับรู้การปรากฎ (Emergence) เน่ืองจาก ส่วนประกอบบนหน้าเวบ็ ไซต์มีจานวนมาก ผู้ออกแบบเวบ็ ไซต์จึงควรคานึงถึงการจัดวาง ส่วนประกอบต่างๆ ให้ปรากฎในตาแหน่งทเ่ี หมาะสมตามทผ่ี ู้ใช้คาดหวงั ด้วย

29 ภาพท่ี 2.2 แสดงบริเวณทผ่ี ู้ใช้เวบ็ คาดหวงั จะพบสว่ นประกอบเฉพาะ ทม่ี า: Principle of web design 2. การรบั รูค้ วามเป็ นรูปธรรม (Reification) คอื การรับรู้ท่แี ปรเปล่ียนจากส่งิ ท่ไี ม่ มีอยู่จริงในภาพจนเกิดเป็นรูปธรรมข้ึน โดยมนุษย์จะถูกโน้มน้าวด้วยส่วนประกอบภายใน ภาพท่เี พียงพอต่อการเป็นเบาะแสและเกิดการกระตุ้นให้สร้างรูปธรรมข้นึ ในความรู้สึกนึก คิด ตัวอย่างเช่น ภาพท่ี 2.3 แสดงให้เหน็ ถึงสามเหล่ียมสขี าวท่ไี ม่มีอยู่จริง แต่ด้วย เบาะแสท่ไี ด้จากวงกลมไม่เตม็ วงทาให้การรับร้เู ปล่ยี นไป เกิดการสร้างรูปสามเหล่ียมสขี าวท่ี เป็นรปู ธรรมข้นึ และมนุษย์จะรับรู้ถงึ การมอี ยู่ของสามเหล่ยี มสขี าว ภาพท่ี 2.3 แสดงภาพสามเหล่ียมท่ไี ม่มอี ยู่จริง ท่มี า: https://tongraphics.files.wordpress.com/2014/02/my-research-dossier.pdf

30 ในการออกแบบเว็บไซต์สามารถนาการรับรู้ความเป็ นรูปธรรมไปใช้ได้หลาย ลักษณะ เช่น การใช้ช่องว่างแบบมีประโยชน์ (Active white space) ในการแยกคอลัมน์ เน้ือหา ระบบตะแกรงข้อมูล (Grid system) การใส่เงาให้แก่ป่ ุม หรือ การนาไปใช้ในการ ออกแบบตวั พิมพ์ทด่ี ึงดูดความสนใจของผู้ใช้เวบ็ ได้ เป็นต้น ภาพท่ี 2.4 แสดงช่องว่างแบบมีประโยชน์ (Active white space) ในระบบตะแกรงข้อมลู ท่มี า: https://www.yahoo.com/news/ 3. การรับรูห้ ลายนยั (Multistability) คือ การรับรู้และตีความภาพท่ีเห็นได้ หลากหลายรูปแบบ แต่ไม่สามารถตีความรูปแบบท่ไี ด้จากภาพพร้อมกันได้ โดย ณ เวลา หน่ึงจะตคี วามได้ทลี ะรูปแบบเทา่ น้ัน ภาพท่ี 2.5 แสดงลูกบาศกท์ อ่ี อกแบบในลกั ษณะรองรับการรบั รู้หลายนยั ทม่ี า: http://www.geoff-hart.com/articles/2012/gestalt.html

31 ตัวอย่าง ภาพท่ี 2.5 ภาพแรกเป็นลักษณะของลูกบาศก์ท่อี อกแบบรองรับการ รับรู้หลายนัย โดยมนุษย์สามารถตีความ ณ เวลาหน่ึงๆ ได้ดังภาพท่ี 2 หรือ 3 เทา่ น้ัน ตาม ประสบการณแ์ ละความร้สู กึ นึกคิดของแต่ละบุคคล แต่หากต้องการบังคับให้เกิดการตีความ ด้านเดียวควรปรับการออกแบบให้เกดิ ความชดั เจนข้นึ ดงั ตัวอย่างภาพท่ี 2.6 ภาพท่ี 2.6 แสดงลกู บาศกท์ ่อี อกแบบให้เกดิ นัยเพียงด้านเดยี ว ท่มี า: http://www.geoff-hart.com/articles/2012/gestalt.html ดังน้ัน ในการออกแบบเวบ็ ไซต์ควรระมัดระวังการออกแบบท่จี ะกระทบต่อการ รับรู้หลายนัยของผู้ใช้ เช่น การออกแบบสถานะของป่ ุมกดท่ชี ัดเจน ทาให้ทราบว่าป่ ุมยังไม่ ถูกกดหรือกดค้างอยู่ เป็ นต้น การออกแบบหน้าเว็บไซต์และส่วนประกอบให้ชัดเจน ตรงไปตรงมา มีความสอดคล้องกัน เจะทาให้การส่ือสารผ่านหน้าเวบ็ ไซต์มีประสทิ ธิภาพ ย่ิงข้นึ ภาพท่ี 2.7 แสดงการออกแบบสถานะของป่ ุมกด 4. การรบั รูท้ ี่ไม่แปรปรวน (Invariance) คือ การรับรู้ท่ไี ม่เปล่ียนไปเม่ือเกิดการ กระตุ้นด้วยมุมมองท่แี ตกต่างกัน โดยมุมมอง (Perspective) คือ การท่วี ัตถุภาพหน่ึงๆ มี การหักเหไปในทศิ ทางอ่นื ๆ รวมถึงการย่อขยาย เช่น การหมุนตัว (Rotation) การเปล่ียน

32 ขนาด (Scale) การจดั วางตาแหน่งใหม่ (Relocation) การเปล่ียนมุมมองทางสายตา (Sight deformation) เป็นต้น ตัวอย่างจากภาพท่ี 2.8 แสดงให้เห็นถึงวัตถุท่ีมีรูปร่างแตกต่างกัน แต่ด้วย องค์ประกอบของวัตถุทาให้การรับร้ตู ีความว่าเป็นวตั ถุเดียวกนั แตกต่างกนั ท่มี มุ มองเทา่ น้ัน ภาพท่ี 2.8 แสดงวัตถุในมมุ มองท่แี ตกต่างกนั ท่มี า: https://tongraphics.files.wordpress.com/2014/02/my-research-dossier.pdf ก าร อ อ ก แ บ บ เ ว็บ ไ ซ ต์ส า มาร ถ ป ร ะ ยุ ก ต์ ใ ช้ ก าร รั บ ร้ ูท่ีไ ม่ แป ร ป ร ว น กับ คว า ม สอดคล้อง (Consistency) ได้ โดยความสอดคล้องในการออกแบบเวบ็ ไซต์มี 2 ลักษณะ ดังน้ ี 1) ความสอดคล้องภายนอก (External consistency) คือ การออกแบบในส่วน ของโครงร่าง ตาแหน่งของส่วนประกอบต่างๆ ภายในเวบ็ ไซต์ เช่น ตาแหน่งของหมายเลข หน้าเวบ็ ไซต์ ตาแหน่งของแถบนาทาง เป็นต้น 2) ความสอดคล้องภายใน (Internal consistency) คือ การออกแบบในส่วนของ เน้ือหาและลักษณะการนาเสนอท่เี ป็นไปในทศิ ทางเดียวกัน เข้าใจได้ง่ายและไม่สบั สน เช่น การใช้หมายเลขข้อ (Ordinal bullet) แบบเดียวกนั ท้งั เวบ็ ไซต์ ใบเสรจ็ ออนไลน์มีการจัด ตาแหน่งตัวเลขชิดขอบขวาของกรอบตาราง เป็นต้น ซ่ึงความสอดคล้องท่ไี ด้กล่าวไปน้ัน จะช่วยปรับมุมมองของผู้ใช้เวบ็ ให้สอดคล้อง กับการส่อื สารของผู้ออกแบบได้ นอกจากน้ีผู้ออกแบบเวบ็ ไซต์ควรทราบถึงข้อจากัดด้าน มมุ มองและความสอดคล้องของผู้เข้าใช้ ด้วย

33 ตัวอย่างของการออกแบบเวบ็ ไซต์ท่ตี ระหนักในด้านการรับรู้ท่ไี ม่แปรปรวนและ ความสอดคล้อง เช่น CAPTCHA มีการแสดงตัวอักษรท่บี ิดเบ้ียวเพ่ือตรวจสอบการนาเข้า ข้อมลู จากมนุษย์ ภาพท่ี 2.9 แสดงอกั ษรในมุมมองทแ่ี ตกต่างกนั ทม่ี า: https://nvisium.com/blog/2016/03/02/captcha-what-why-build-break/ ภาพท่ี 2.10 แสดงการเปรยี บเทยี บความสอดคล้องภายใน (Internal consistency) ท่มี า: http://www.geoff-hart.com/articles/2012/gestalt.html จากทฤษฎเี กสตอลท์ (Gestalt theory) ท่กี ล่าวถึงพ้ืนฐานการรับรู้ท้งั 4 ประการ ทา ให้มนุษย์ตีความภาพท่เี หน็ ได้หลายแบบ ดังน้ันมนุษย์จึงจัดระเบียบการรับรู้ของตนเองให้ เข้าใจง่ายท่สี ดุ ข้นึ อยู่กบั ขดี จากดั และประสบการณ์เดมิ การจัดระเบียบการรับรู้ของมนุษย์ถูกนาไปสร้างเป็ นหลักการเกสตอลท์ (Gestalt principles) โดยมีลักษณะเป็นกฎทส่ี ามารถนาไปใช้ในการออกแบบต่างๆ ได้ ดงั น้ี 1. กฎภาพเบ้ ืองหนา้ และพ้ ืนหลงั (Law of figure/ground) คือ การอธิบาย เก่ียวกับการรับรู้ของมนุษย์ท่กี ล่าวไว้ว่า มนุษย์จะรับรู้ทางสายตาได้เกิดจากองค์ประกอบ อย่างน้อย 2 ส่งิ คือ ภาพหรือข้อมูลเบ้ืองหน้าเป็ นองค์ประกอบหลัก และ พ้ืนหลังเป็ น องคป์ ระกอบสนับสนุน

34 ตัวอย่าง ภาพท่ี 2.11 แสดงภาพท่สี ามารถตีความได้ 2 ลักษณะ ข้ึนอยู่กับส่งิ ท่ี รับรู้ หากมองเหน็ ภาพเป็นหน้าคนสองคนเข้าหากนั แสดงว่ามกี ารรับร้สู ดี าเป็นองค์ประกอบ หลัก (Figure) หรือหากมองเหน็ ภาพแจกกนั แสดงว่ามีการรับร้สู ขี าวเป็นองคป์ ระกอบหลัก ภาพท่ี 2.11 แสดงภาพเบ้อื งหน้าและพ้ืนหลงั จากกฎภาพเบ้ืองหน้าและพ้ืนหลังมีความสัมพันธ์กับการออกแบบเวบ็ ไซต์เป็ น อย่างมาก ผู้ออกแบบเวบ็ ไซตจ์ งึ ควรทราบข้อคานึงถงึ การออกแบบเวบ็ ไซต์ ดงั น้ี 1) ควรออกแบบเวบ็ ไซต์ให้มีความชัดเจน (Stable) โดยแยกแยะองค์ประกอบ หลักและองค์ประกอบสนับสนุนให้ชัดเจน ไม่กากวม โดยสายตาและการรับรู้ของผู้ใช้เว็บ ส่วนใหญ่มักจะแยกแยะส่วนประกอบบนเวบ็ ท่มี ีขนาดเลก็ เป็นองค์ประกอบหลัก (Figure) และสว่ นประกอบขนาดใหญ่เป็นพ้ืนหลัง (Background) ภาพท่ี 2.12 แสดงหน้าเวบ็ ไซต์ท่มี ีการใช้ข้อความเป็นองคป์ ระกอบหลกั (Figure) ท่มี า: http://www.geoff-hart.com/articles/2012/gestalt.html

35 2) หากองค์ประกอบหลักและองค์ประกอบสนับสนุนมีความเด่นชัดท่เี ท่ากัน ควร เพ่ิมการทางานให้แก่เวบ็ ไซต์เพ่ือลดความเด่นชัดขององค์ประกอบสนับสนุน (Reversible) เช่น ในบางกรณสี ายตาและการรับร้ขู องผู้ใช้เวบ็ สว่ นใหญ่มกั จะแยกแยะสว่ นประกอบบนเวบ็ ท่มี ีความสว่างกว่าเป็นองค์ประกอบหลัก (Figure) และส่วนประกอบท่มี ีความมืดกว่าเป็น พ้ืนหลัง (Background) เป็นต้น ภาพท่ี 2.13 แสดงส่วนประกอบบนเวบ็ ท่มี คี วามสว่างกว่าเป็นองค์ประกอบหลกั (Figure) ทม่ี า: http://untame.net/2013/02/twitter-bootstrap-build-a-responsive-lightbox- gallery/ 2. กฎความเรียบง่าย (Law of simplicity) คือ กฎท่รี ะบุว่าการรับรู้ของมนุษย์ ทว่ั ไปมักจะสนใจในส่งิ ท่เี ข้าใจได้ไม่ยาก เช่น รูปทรงพ้ืนฐาน ตาแหน่ง สี เป็นต้น ตัวอย่าง ของการใช้กฎความเรียบง่ายในการออกแบบเวบ็ ไซต์ เช่น การออกแบบเวบ็ ไซต์ลักษณะมินิ มอลสิ ท์ (Minimalist website) การกาหนดแบบร่างเวบ็ ไซต์ (Wireframe) การกาหนดแถบ นาทางในแนวนอน (Horizontal navigation) การออกแบบไอคอนเชิงเรียบง่าย (Flat icon design) เป็นต้น การออกแบบเวบ็ ไซต์โดยใช้กฎความเรียบง่ายน้ัน นอกจากผู้ใช้เวบ็ จะเข้าใจได้ ง่ายแล้ว ยังมีประโยชน์ในด้านการประหยัดสญั ญาณอนิ เทอร์เนต็ เพ่ิมประสิทธภิ าพในการ ประมวลผลฉาบหน้าเวบ็ (Web browser rendering) อกี ด้วย

36 ภาพท่ี 2.14 แสดงภาพการร่างแบบ (Wireframe) ทม่ี า: https://www.softwareideas.net/en/free-wireframe-tool ภาพท่ี 2.15 แสดงไอคอนแบบเรยี บง่าย (Flat icon) ท่มี า: http://www.flaticon.com/

37 3. กฎความคลา้ ยคลึง (Law of similarity) คือ กฎท่รี ะบุว่าหากวัตถุใดในภาพมี ลักษณะคล้ายคลึงกนั มนุษยจ์ ะรับร้วู ่าเป็นส่งิ เดียวกัน และวัตถุใดมีความคล้ายคลึงน้อยหรือ แตกต่างโดยส้นิ เชิงจะรับรู้ว่าไม่เป็นสง่ิ เดยี วกนั โดยลกั ษณะของวตั ถุทก่ี ระต้นุ ให้เกดิ การรับรู้ ความคล้ายคลงึ ได้ เช่น รปู ทรง สี ขนาด การหมุนตัว (Rotation) เป็นต้น ภาพท่ี 2.16 แสดงความคล้ายคลงึ ของวตั ถใุ นภาพทจ่ี าแนกเป็นกลุ่มทรงกลม และกล่มุ ทรงส่เี หล่ียม การประยุกต์ใช้กฎความคล้ายคลึงในการออกแบบเวบ็ ไซต์ เช่น การออกแบบ ป่ ุมบนเว็บไซต์ท่ีเลียนแบบมาจากป่ ุมจริงทาให้ ผู้ใช้เว็บเกิดการรับรู้ท่ีสอดคล้องกับ ประสบการณเ์ ดมิ อย่างรวดเรว็ หรือ การกาหนดไฮเปอร์ลงิ ค์สเี ดยี วกนั ทง้ั เวบ็ ไซต์ ภาพท่ี 2.17 แสดงป่ ุมเสมอื นจริง ท่มี า: https://www.pinterest.com/marcovaldesdiaz/botones-web

38 ภาพท่ี 2.18 แสดงเวบ็ ไซตท์ เ่ี ลอื กใช้บลอ็ คเป็นไฮเปอร์ลงิ ค์ ท่มี า: http://schyora.com/blog/software-development/trending-web-design-and- development-of-2015/ 4. กฎความใกลช้ ิด (Law of proximity) คือ กฎท่รี ะบุว่าวัตถุใดอยู่ใกล้ชิดกัน หรือ กระจุกตัวอยู่ด้วยกนั มนุษย์จะรับรู้ว่าเป็นกลุ่มก้อนเดียวกัน โดยในด้านการออกแบบ เวบ็ ไซตว์ ธิ ที ่สี ามารถกระตุ้นให้รับร้คู วามใกล้ชิดมีดังน้ี 1) การจัดระยะ (Alignment) อาจใช้ช่องว่าง (Space) หรือกาหนดมุมมอง (Perspective) ในการแบ่งส่วนเน้ือหาหรือส่วนประกอบของเว็บไซต์ให้เด่นชัดข้ึน ดัง ตวั อย่างภาพท่ี 2.19 ภาพท่ี 2.19 แสดงการใช้ระยะ 50 px ในการจดั กล่มุ ส่วนบนและล่าง

39 ภาพท่ี 2.20 แสดงการใช้มมุ มองในการแบ่งกล่มุ 2) การใช้อตั ราความต่าง (Contrast) คอื การกระตุ้นการจัดกลุ่มโดยการกาหนด พ้ืนหลัง (Background) หรือ เงา (Shadow) ให้แก่วัตถุ ตัวอย่างภาพท่ี 2.21 แสดงให้เหน็ ว่าหากเพ่ิมพ้ืนหลังท่มี ีอัตราความต่างสูงจะสามารถกระตุ้นการรับรู้กลุ่มได้ และในภาพท่ี 2.22 แสดงให้เหน็ ถึงการใช้เงากับวัตถุ เม่ือใส่เงาแล้วสามารถกระตุ้นให้รับรู้ว่าแต่ละวัตถุ แยกออกจากกนั หรือกล่มุ โดดน่ันเอง ภาพท่ี 2.21 แสดงการใช้พ้ืนหลังในการจดั กล่มุ

40 ภาพท่ี 2.22 แสดงการใช้เงาในการจดั กล่มุ 3) การลากเส้น (Stroke) เป็นวธิ กี ารทใ่ี ช้เส้น (Line) หรือ การตกี รอบ (Frame) เพ่ือกระตุ้นการรับร้กู ารแยกกล่มุ ดงั ตวั อย่างภาพท่ี 2.23 แสดงให้เหน็ ถึงการใช้เส้นพาดใน แนวนอนเพ่ือแยกกล่มุ บนและล่างออกจากกนั และในภาพท่ี 2.24 แสดงให้เหน็ ถึงการลาก กรอบเพ่ือกระตุ้นการแยกกล่มุ ให้ชัดเจนข้นึ ภาพท่ี 2.23 แสดงการใช้เส้นพาด (Stroke) เพ่ือแยกกล่มุ

41 ภาพท่ี 2.24 แสดงการตีเส้นกรอบ (Frame) เพ่ือแยกกล่มุ 5. กฎความต่อเนอื่ ง (Law of continuation) คือ กฎท่รี ะบุว่ามนุษย์สามารถรับรู้ ทศิ ทางได้จากการเรียงตัวของวัตถุ โดยในการออกแบบเวบ็ ไซต์ผู้ออกแบบสามารถใช้กฎ ความต่อเน่ืองในการออกแบบส่วนประกอบต่างๆ ของเวบ็ ไซต์ได้ เช่น การออกแบบส่วน ของการนาทาง การออกแบบแถบลาดบั หน้า เป็นต้น ภาพท่ี 2.25 แสดงการเรียงตัวกนั ของวตั ถุ

42 ภาพท่ี 2.26 แสดงการเรียงตวั ของไฮเปอร์ลงิ ค์ (Hyperlink) ภาพท่ี 2.27 แสดงการเรียงตัวของเลขหน้าเวบ็ ไซต์ (Page number) 6. กฎการปิ ดลอ้ ม (Law of closure) คือ กฎท่รี ะบุว่ามนุษย์สามารถรับรู้และถูก กระตุ้นให้เติมส่วนท่ขี าดหายให้สมบูรณ์ โดยในการออกแบบเวบ็ ไซต์สามารถใช้กฎการปิ ด ล้อมในการออกแบบโครงร่าง (Layout) ของส่วนประกอบภายในเวบ็ ไซตไ์ ด้ ดงั ภาพท่ี 2.28 แสดงขอบเขตท่ปี ระกอบไปด้วย ภาพ เน้ือหา และป่ ุม ซ่ึงมนุษย์สามารถรับรู้ว่าเป็ นกลุ่ม เน้ือหาเดยี วกนั

43 ภาพท่ี 2.28 แสดงการเปรยี บเทยี บวงกลมท่สี มบูรณ์และไม่สมบรู ณ์ ภาพท่ี 2.29 แสดงโครงร่างท่ปี ิ ดล้อมภาพ เน้ือหา และป่ ุม กฎของฟิ ทท์ กฎของฟิ ทท์ (Fitts’s Law) ถูกนาเสนอข้นึ ในปี ค.ศ.1954 โดยพอล เอม็ ฟิ ทท์ (Paul M. Fitts)นักจิตวิทยาชาวอเมริกา ซ่ึงเป็นกฎท่เี ก่ียวข้องกับการวัดระยะเวลาในการ เคล่อื นไหว (Movement Time: MT) จากตาแหน่งหน่ึงๆ ไปยงั เป้ าหมายหน่ึงๆ ได้ ในปี ค.ศ.1978 ได้มีการนากฎของฟิ ททม์ าใช้ในการวิเคราะห์ปฏิสมั พันธร์ ะหว่าง มนุษย์กับคอมพิวเตอร์ (Human-Computer Interaction: HCI) โดยนาไปใช้คานวน ระยะเวลาการเคล่อื นไหวตาแหน่งช้ี (Pointer) ของเมาสบ์ นหน้าจอคอมพิวเตอร์ นอกจากน้ี ยังสามารถนาไปใช้ในการออกแบบอุปกรณ์ควบคุมต่างๆ ได้ เช่น การออกแบบจอยสติก (Joy stick) การออกแบบรีโมทคอนโทล (Remote control) เป็นต้น ดังน้ันจึงมีการนา กฎฟิ ททม์ าประยุกต์ใช้ในการออกแบบเวบ็ ไซต์ โดยใช้ประเมินระยะเวลาเคล่ือนไหว (MT)

44 และประเมนิ ความยากของส่วนต่อประสานผู้ใช้ (User interface: UI) ท่ไี ด้ออกแบบข้ึน เพ่ือ นาไปปรับปรุงระยะห่างและขนาดของป่ ุม หรือไฮเปอร์ลิงค์ต่างๆ เพ่ือความสะดวกรวดเร็ว และเกดิ ความแม่นยาในการเข้าถึงข้อมลู ของผู้ใช้เวบ็ การวดั ระยะเวลาเคล่ือนไหวน้ันอยู่บนสมมติฐานท่กี ล่าวว่า การเคล่ือนไหวท่มี ีความ ยากจะใช้เวลามาก ซ่ึงดัชนีความยาก (Index of difficulty: ID) มาจากความสมั พันธ์ ระหว่างระยะห่างของจุดเร่ิมต้นถึงจุดศูนย์กลางของเป้ าหมาย (Distance) กับ ความกว้าง ของเป้ าหมาย (Width) ซ่งึ กฎของฟิ ททม์ ลี ักษณะเป็นสตู รทางคณติ ศาสตร์ ดังน้ี และ โดยท่ี คือ ระยะเวลาเคล่อื ไหว (Movement time) คือ ระยะห่างระหว่างจุดเร่ิมต้นกบั จุดศูนยก์ ลางของเป้ าหมาย (Distance) คือ ความกว้างของเป้ าหมาย (Width) คอื ค่าประวงิ เวลาของแต่ละอปุ กรณ์ทอ่ี าจเกดิ ข้นึ (Delay) คอื ค่าประมาณความยากของมนุษยท์ ่มี ีต่ออุปกรณแ์ ต่ละชนิด คือ ดชั นีความยาก (Index of difficulty: ID) มีหน่วยเป็นบิต (Bits) ในการวิเคราะห์หากไม่มีค่าประวิงเวลาของอุปกรณ์ ในค่าคงท่ี จะมีค่าเท่ากับ 0 และหากไม่มีค่าประมาณความยากของมนุษย์ท่มี ีต่ออุปกรณ์แต่ละชนิด ค่าคงท่ี จะมีค่า เทา่ กบั 1 โดยระยะเวลาเคล่อื นไหวกจ็ ะมีค่าเทา่ กบั ดชั นีความยากน่ันเอง

45 ภาพท่ี 2.30 แสดงการวดั ระยะห่างสาหรับกฎของฟิ ททใ์ นแกน 0 และ 90 องศา ตัวอย่างท่ี 2.1 บนหน้าเวบ็ ไซต์ประกอบไปด้วยป่ ุมตกลงและป่ ุมยกเลิกเรียงใน แนวนอน (แกน 0 องศา) โดยท้งั 2 ป่ ุมมขี นาดความกว้าง 200 px และมรี ะยะห่างต้งั แต่จุด ก่งึ กลางของป่ ุมแรกไปยังจุดก่ึงกลางของป่ ุมท่สี อง 250 px จงหาดัชนีความยาก (ID) ระหว่างป่ ุม 2 ป่ ุม ภาพท่ี 2.31 แสดงการวดั ระยะห่างระหว่างป่ ุมตกลงและป่ ุมยกเลกิ แทนค่า ดงั น้ัน