บทที่ 1 หลักการออกแบบเว ็บ chapter 1 ......บทท 1...
TRANSCRIPT
![Page 1: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/1.jpg)
บทที่ 1 หลักการออกแบบเว็บChapter 1 Principles of Web Design
ความหมายของการออกแบบเว็บไซต์• การออกแบบเว็บไซต์และเว็บแอ็พพลิเคชั่น (Web Design and Applications)
เกี่ยวข้องกับมาตรฐานในการสร้าง (Build) และการแสดงผล (Rendering) ทั้งหน้าเว็บเพจ โดยใช้เทคโนโลยีภาษาเอชทีเอ็มแอล (Hypertext Markup Language: HTML) สไตล์ชีท (Cascading Style Sheet: CSS) เอสวีจี (Scalable Vector Graphics: SVG) เอพีไอ (Application Programming Interface: APIs) และเทคโนโลยีอื่นๆ ที่ใช้ในการพัฒนาเว็บแอ็พพลิเคชั่น หรือ เรียกว่า “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
ความหมายของการออกแบบเว็บไซต์
• การออกแบบเว็บไซต์ คือ การวางกรอบการพัฒนาเว็บไซต์ ประกอบไปด้วย สถาปัตยกรรมของเว็บไซต์ กรอบแนวคิดของเว็บไซต์ การนําทางในเว็บไซต์ การต่อประสานผู้ใช้กับเว็บไซต์ โดยการออกแบบเว็บไซต์จะต้องคํานึงถึงสภาพแวดล้อมที่เว็บไซต์จะสามารถแสดงผลและส่งถ่ายให้แก่ผู้ใช้เรียกค้นได้ และ การออกแบบเว็บไซต์จะต้องเป็นอิสระจากภาษาโปรแกรมหรือเครื่องมือพัฒนาเชิงเทคนิค
• อ้างอิง Daniel Schwabe, 2001
![Page 2: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/2.jpg)
สรุปความหมายของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ มาจากคําว่า “Web Design” โดยมีความหมาย คือ การวางแผนและการดําเนินงานในการผลิตเว็บไซต์ ซึ่งประกอบไปด้วย• วัตถุประสงค์ของเว็บไซต์ • การวางกรอบแนวคิด • การออกแบบ เ นื้ อหาและการ
สื่อสาร • การออกแบบเค้าร่างของเว็บไซต์
• การออกแบบอักษร • การออกแบบเว็บไซต์ที่ผู้ใช้ทั่วไป
และผู้พิการเข้าถึงเนื้อหาได้ • การคํ านึ งถึ งสภาพแวดล้อม ที่
เว็บไซต์จะสามารถทํางานและส่งถ่ายไปยังผู้ใช้ได้
• ทั้ ง นี้ แ น วคิ ด ใ นก า รออกแบบเว็บไซต์จะเป็นอิสระจากภาษาโปรแกรมหรือเครื่องมือพัฒนาเชิงเทคนิคด้วย
สรุปความหมายของการออกแบบเว็บไซต์
Web Designvs
Web Development
สรุปความหมายของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ในลักษณะเชิงสุนทรียะ “Design Aesthetic for Web Design”
เน้นมุมมอง (Viewpoints) คือ มุมมองความสวยงาม (Aesthetic) และมุมมองทางด้านอารมณ์ (Emotional)
ประวัติความเป็นมาของเว็บไซต์
• โดยต้นกําเนิดของเว็บไซต์เกิดขึ้นเมื่อ ปี ค.ศ.1945 โดยแวนเนวาบุช (Vannevar Bush) ได้เขียนบทความเกี่ยวกับการสืบค้นสารสนเทศเชิงเชื่อมโยงจากแผ่นไมโครฟิล์มเล็ก (Microfiche) โดยเรียกว่า “เมมเมคซ์ (Memex)”
Microfiche Memex
![Page 3: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/3.jpg)
ประวัติความเป็นมาของเว็บไซต์
ในปี ค.ศ.1980 ทิมเบอเนอร์ลี (Tim Berners-Lee) ได้เสนอโครงการไฮเปอร์เท็กซ์ (Hypertext) ระหว่างทํางานอยู่ที่ เซิร์น (the EuropeanOrganization for Nuclear Research: CERN)
ไฮเปอร์เท็กซ์ (Hypertext) ทิมเบอเนอร์ลี
(Tim Berners-Lee)
ประวัติความเป็นมาของเว็บไซต์
• ซึ่งต่อมานําไฮเปอร์ เท็กซ์มาใช้ร่วมกับเครือข่ายอินเทอร์เน็ตจนกลายเป็นมาตรฐานเว็บที่สําคัญของโลกที่อยู่ภายในการดูแลของสมาคมเวิลด์ไวด์เว็บ (World Wide Web Consortium: W3C) ซึ่งทิมเบอเนอร์ลีก็เป็นผู้ก่อตั้งสมาคมดังกล่าวเช่นกัน
สมาคมเวิลด์ไวด์เว็บ ทิมเบอเนอร์ลี (Tim Berners-Lee)
ยุคของเว็บไซต์Era of Web Site
• ปัจจุบันมีการจําแนกยคุของเว็บออกเป็น 4 รุ่น ดังนี้• เว็บรุ่นที่ 1 (Web 1.0) หรือ เว็บคงที่ (Static Web)• เว็บรุ่นที่ 2 (Web 2.0) หรือ เว็บพลวัตร (Dynamic Web)• เว็บรุ่นที่ 3 (Web 3.0) หรือ เว็บเชิงความหมาย (Semantic Web)• เว็บรุ่นที่ 4 (Web 4.0) หรือ เว็บตัวแทน (Intelligent Personal Agents)
FACEBOOK? GOOGLE? INSTAGRAM?APPLE.COM? SAMSUNG.COM?
สภาพแวดล้อมของเว็บไซต์Web Site Environment
• 1. เว็บเบราว์เซอร์ (Web Browser)
• 2. การคํานึงถึงอัตราความเร็วของสัญญาณอินเทอร์เน็ต (Connection Speed)
• 3. การเก็บหน่วยความจําและเวลาในการดาวน์โหลดหน้าเว็บ (Browser Cache and Download Time)
• 4. อุปกรณ์และระบบปฏิบัติการ (Device and Operating System Issues)
![Page 4: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/4.jpg)
สภาพแวดล้อมของเว็บไซต์Web Site Environment
Web Browser Cache
Internet
Device and Operating System Issues
Browser Cache and Download Time
Connection Speed
สภาพแวดล้อมของเว็บไซต์Web Site Environment
• 1. เว็บเบราว์เซอร์ (Web Browser)แสดงแผนภูมิร้อยละของ
แนวโน้มการใช้เว็บเบราว์เซอร์ระหว่างช่วง
ค.ศ. 2011 - 2015
สภาพแวดล้อมของเว็บไซต์Web Site Environment
• 2. การคํานึงถึงอัตราความเร็วของสัญญาณอินเทอร์เน็ต (Connection Speed)
Mobile Broadband
Fixed Broadband
สภาพแวดล้อมของเว็บไซต์Web Site Environment
• 2. การคํานึงถึงอัตราความเร็วของสัญญาณอินเทอร์เน็ต (Connection Speed)
ประเทศ อัตราความเร็ว MbpsSingapore 121.7Hong Kong 102.6
Japan 82.4South Korea 59.5
Macau 51.1Taiwan 50.6China 29.8
Thailand 19.9Vietnam 17.6
Cambodia 9
เมือง/จังหวัด อัตราความเร็ว Mbpsมุกดาหาร 32.19สัตหีบ 31.3หัวหิน 25.4พัทยา 22.6
กรุงเทพฯ 18.1
![Page 5: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/5.jpg)
สภาพแวดล้อมของเว็บไซต์Web Site Environment
• 3. การเก็บหน่วยความจําและเวลาในการดาวน์โหลดหน้าเว็บ (Browser Cache and Download Time)
• ในการเรียกค้นเว็บไซต์นั้น จะกระทําผ่านเว็บเบราว์เซอร์ ซึ่งปัจจุบันเว็บเบราว์เซอร์จะมีฟังก์ชั่นการทํางานที่เรียกว่า “แคช (Cache)” ซึ่งหมายถึงหน่วยความจําที่เว็บเบราว์เซอร์เก็บข้อมูลไว้
• โดยสาเหตุที่จําเป็นต้องมีแคช เพื่อช่วยให้การแสดงผลหน้าเว็บมีความรวดเร็วมากขึ้น โดยไม่จําเป็นต้องดาวน์โหลดข้อมูลทั้งหน้าเว็บใหม่ทั้งหมด กรณีที่เคยเข้าเว็บไซต์นั้นๆ แล้ว• ทําให้ประหยัดเวลาในการดาว์โหลดหน้าเว็บ• ประหยัดปริมาณของสัญญาณอินเทอร์เน็ต
สภาพแวดล้อมของเว็บไซต์Web Site Environment
• 4. อุปกรณ์และระบบปฏิบัติการ (Device and Operating System Issues)
• 4.1 การคํานึงถึงขนาดหน้าจอและความลึกของสี (Screen Resolution and Color Depth) • 4.2 การคํานึงถึงชนิดและรุ่นของเว็บเบราว์เซอร์
(Browser Type and Version) • 4.3 การแสดงผลตัวอักษร
(Font)
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• ในการออกแบบเว็บไซต์นั้น ผู้ออกแบบเว็บไซต์ไม่สามารถทราบได้ว่าผู้ใช้เข้าถึงเว็บไซต์ด้วยอุปกรณ์ชนิดใด ขนาดหน้าจอเท่าใด
• ตัวอย่างเช่น การใช้จอคอมพิวเตอร์ส่วนบุคคล (Personnel Computer: PC) ผู้ใช้สามารถปรับขนาดของหน้าจอได้ (Screen Resolution) โดยอาจกําหนดเป็น 600x800 px หรือ จอประเภทไวด์สกรีน 1366x768 px เป็นต้น
• ในส่วนของหน้าจอบนอุปกรณ์เคลื่อนที่ ผู้ใช้ไม่สามารถปรับขนาดของหน้าจอได้ แต่อุปกรณ์เคลื่อนที่แต่ละยี่ห้อก็มีขนาดหน้าจอที่แตกต่างกันตามรุ่นที่ผลิต เช่น ขนาดหน้าจอของ iPhone และ iPad เป็นต้น
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 1. การแสดงผลบนหน้าจอคอมพิวเตอร์ส่วนบุคคล (Desktop and Laptop Displays)แสดงขนาดของหน้าจอคอมพิวเตอร์ส่วนบุคคลจําแนกตามปี ค.ศ.
ปี ค.ศ. / ขนาดจอ 1920x1080 1366x768 1280x1024 1280x800 1024x768 800x6002015 16% 33% 7% 5% 4% 0.30%2014 13% 31% 8% 7% 6% 0.50%2013 11% 25% 10% 8% 9% 0.50%2012 8% 19% 12% 11% 13% 1%2011 6% 15% 14% 14% 0%2010 2% 18% 17% 20% 1%2009 36% 4%
![Page 6: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/6.jpg)
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 1. การแสดงผลบนหน้าจอคอมพิวเตอร์ส่วนบุคคล (Desktop and Laptop Displays)แสดงความลึกของสีบนหน้าจอคอมพิวเตอร์ส่วนบุคคลจําแนกตามปี ค.ศ.
ปี ค.ศ. / จํานวนสี 16,777,216 65,536 2562015 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%
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 1. การแสดงผลบนหน้าจอคอมพิวเตอร์ส่วนบุคคล (Desktop and Laptop Displays)
WEB PAGE WEB PAGE
ขนาดจอภาพ 800 x 600 px ขนาดจอภาพ 1366 x 768 px
เกิดพื้นที่เปล่า (Space)
Fixed Design
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 1. การแสดงผลบนหน้าจอคอมพิวเตอร์ส่วนบุคคล (Desktop and Laptop Displays)
VS
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 2. อุปกรณ์เคลื่อนที่ (Mobile Devices)
![Page 7: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/7.jpg)
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 2. อุปกรณ์เคลื่อนที่ (Mobile Devices)
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 3. โมบายไซต์ (Mobile Site)
Desktop Site Mobile Site
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 3. โมบายไซต์ (Mobile Site)
มีการให้ผู้ใช้เลือกมุมมองการแสดงเนื้อหาได้ 3 ลักษณะคือ ลักษณะทั่วไป (Desktop) ลั กษณะ เ ข้ า กับ อุปกรณ์เคลื่อนที่ (Mobile) และ ลักษณะมุมมองเหมือนพิมพ์ (Print)
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 4. เว็บเชิงตอบสนอง (Responsive Web)
สมาร์ทโฟนในแกนแนวตั้ง(Vertical Orientation)
สมาร์ทโฟนในแกนแนวนอน(Horizontal Orientation)
![Page 8: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/8.jpg)
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 5. การจัดการปัญหาขนาดของจอภาพแสดงผล (Solving the Screen Resolution Dilemma)
• เป็นสิ่งที่ผู้ออกแบบเว็บต้องให้ความสําคัญ โดยการออกแบบเว็บมีเค้าร่างเกี่ยวกับการจัดการขนาดของจอภาพ อยู่ 2 เค้าร่าง คือ – แบบคงที่หรือแบบตายตัว (Fixed) – แบบยืดหยุ่น (Flexible)
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 5. การจัดการปัญหาขนาดของจอภาพแสดงผล (Solving the Screen Resolution Dilemma)
• เป็นสิ่งที่ผู้ออกแบบเว็บต้องให้ความสําคัญ โดยการออกแบบเว็บมีเค้าร่างเกี่ยวกับการจัดการขนาดของจอภาพ อยู่ 2 เค้าร่าง คือ – แบบคงที่หรือแบบตายตัว (Fixed)
– แบบยืดหยุ่น (Flexible)
จําเป็นต้องพึ่งผู้ใช้ในการส่ายหน้าเวบ็ (Pan) การขยายหน้าเว็บ (Zoom) และการเลื่อน (Scroll)
ลดการเลื่อนหรือส่ายหน้าเว็บในแนวนอนเพื่ออ่านหน้าเว็บไซต์ที่ล้นเวบ็เบราว์เซอร์
การแสดงผลบนหน้าจอหลายขนาด Multi-Display
• 5. การจัดการปัญหาขนาดของจอภาพแสดงผล (Solving the Screen Resolution Dilemma)
5.1 ข้อดีของการออกแบบเว็บไซต์แบบยืดหยุ่น1) มุมมองของเว็บไซต์เหมาะสมกับอุปกรณ์ของผู้ใช้2) ลดการเลื่อนหรือส่ายหน้าเว็บในแนวนอนเพื่ออ่านหน้าเว็บไซต์ที่ล้นเว็บเบราว์เซอร์3) มีความยืดหยุ่นในการแสดงผลบนหลากหลายอปุกรณ์4) อักษรและเค้าร่างเว็บมีการปรับขนาดให้เหมาะสมกับหน้าจอของอปุกรณ์5) สามารถปรับตําแหน่งและซ่อนหรือแสดงผลบางองค์ประกอบของหน้าเว็บไซต์ให้เข้ากับขนาดหรือแกนของจอภาพได้
5.2 ข้อดีของการออกแบบเว็บไซต์แบบยึดหรือแบบตายตัว1) ผู้ออกแบบเว็บไซต์จะเป็นผู้กําหนดมุมมองให้แก่ผู้ใช้แบบเดียวเท่านั้น 2) สามารถกําหนดขนาดอกัษรคงที่ไม่แปรผันตามขนาดของหน้าจอแสดงผล
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 1. ความสมดุลระหว่างการออกแบบและเนื้อหา (Balance Design and Content) • เป็นส่วนสําคัญที่ผู้ออกแบบและพัฒนาเว็บไซต์จะต้องคํานึงถึงเนื้อหา (Content) ที่จะนําเสนอ
และคํานึงถึงความต้องการของผู้ใช้เว็บไซต์ (Need) ซึ่งนําไปสู่แนวทางในการตัดสินใจที่จะออกแบบเว็บไซต์ไปในมุมมองหรือลักษณะใด ในการออกแบบเว็บไซต์นั้นจะประกอบไปด้วยทีมงานหลายคน โดยในแต่ละคนจะมีมุมมองและความเชื่อมั่นในความคิดของตนเองเป็นสําคัญ ดังนั้นการหาสมดุลระหว่างการออกแบบและเนื้อหาจึงจําเป็นต้องประชุมผู้มีส่วนได้ส่วนเสีย เพื่อการมีส่วนร่วมในการออกแบบเว็บไซต์
![Page 9: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/9.jpg)
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 1. ความสมดุลระหว่างการออกแบบและเนื้อหา (Balance Design and Content) • การออกแบบเว็บไซต์ควรส่งเสริมเนื้อหาและสนับสนุนผู้อ่าน • การออกแบบเนื้อหาข้อมูลบนเว็บควรจะแบ่งออกหรือจัดกลุ่มอย่างมีเหตุผลและมีโครงสร้าง • รวมถึงการออกแบบระบบนําทางเนื้อหาบนเว็บให้ชัดเจนและเข้าใจได้ง่าย• ผู้ออกแบบเว็บในปัจจุบันมักจะเลือกใช้การออกแบบเว็บที่เรียบง่ายและแสดงเนื้อหาอย่าง
ตรงไปตรงมา ทําให้ง่ายต่อการเข้าถึงและไม่มีความจําเป็นที่จะต้องออกแบบเว็บให้มีความซับซ้อนหรือใช้เทคโนโลยีที่ไม่สอดคล้องกับประสบการณ์ผู้ใช้
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 2. วางแผนเพื่อความสะดวกในการเข้าถึงข้อมูล (Plan for Easy Access to Information)
• เป็นปัจจัยที่สําคัญและมีอิทธิพลต่อความสําเร็จของเว็บไซต์ เพราะเป็นการกําหนดวิธีการที่ผู้ใช้สามารถเข้าถึงเน้ือหาเว็บได้อย่างง่ายดาย
• เป้าหมายของวางแผนเพือ่ความสะดวกในการเข้าถึงข้อมูล คือ การจัดระเบียบเน้ือหาของเว็บไซต์ การนําเสนอที่เข้าใจได้ง่าย และมีเซ็ตการนําทางที่เหมาะสม ทําให้ผู้ใช้ไม่ต้องเสียเวลาในการตรวจดูสํารวจการเข้าถึงข้อมูลบนหน้าเว็บไซต์ (Quests for Information)
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 2. วางแผนเพื่อความสะดวกในการเข้าถึงข้อมูล (Plan for Easy Access to Information)
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 3. วางแผนเพื่อการนําเสนอข้อมูลที่ชัดเจน (Plan for Clear Presentation of Information)
![Page 10: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/10.jpg)
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 3. วางแผนเพื่อการนําเสนอข้อมูลที่ชัดเจน (Plan for Clear Presentation of Information)
• การวางแผนเพือ่การนําเสนอข้อมูลที่ชัดเจนเป็นส่วนสําคัญที่ทําให้ผู้ใช้เกิดประสบการณ์ที่ดีและสามารถจดจ่อกับข้อมูลที่ปรากฎบนเว็บไซต์ได้ไม่ว่าจะเข้าถึงด้วยอุปกรณ์ชนิดใดหรือเกิดการขยับร่างกายระหว่างการอ่านข้อมูล ซึ่งนักออกแบบเว็บไซต์จะต้องให้ความสําคัญกับการออกแบบความชัดเจนให้เกิดกับเว็บไซต์
• เว็บไซต์จํานวนมากประสบความล้มเหลวในการออกแบบเว็บไซต์ เนื่องจากขาดความใส่ใจและมีความไม่เข้าใจเกี่ยวกับความชัดเจนของการนําเสนอข้อมูลอย่างถ่องแท้ เช่น การใช้ลักษณะอักษร (Font) ที่หลากหลายมากเกินไป การใช้สีกับอักษรโดยไม่คํานึงถึงความหมาย สีพื้นหลัง (Background) ที่ไม่ส่งผลให้อักษรมีความเด่น และการเสนอข้อมูลด้วยอักษรที่มีประโยคยาวเกินไปโดยไม่คํานึงถึงจุดหยุด (Breakpoint) ในการนําเสนอข้อมูลทําให้ผู้อ่านเกิดความสับสนและอาจเกิดทัศนคติที่ไม่ดีต่อเว็บไซต์ได้
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 3. วางแผนเพื่อการนําเสนอข้อมูลที่ชัดเจน (Plan for Clear Presentation of Information)
• 3. วางแผนเพื่อการนําเสนอข้อมูลที่ชัดเจน (Plan for Clear Presentation of Information)
• การใช้ลักษณะอักษร สีของอักษร พื้นหลังที่ลงตวั การแบ่งข้อความให้เป็นสัดส่วนที่ชัดเจนเหมาะสม รวมถึงการใช้ประโยชน์จาก สําหรับการแยกเนื้อหาหรือจัดโครงสร้างบนหนา้เว็บไซต์ก็จะช่วยให้การอ่านข้อมูลมีความสะดวกรวดเร็วมากขึ้น
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
พื้นที่ว่างสีขาว (White Space)
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 3. วางแผนเพื่อการนําเสนอข้อมูลที่ชัดเจน (Plan for Clear Presentation of Information)
• ผู้ออกแบบเว็บไซต์จะต้องคํานึงถึงความแตกต่างระหว่างบุคคล • ผู้เข้าชมเว็บไซต์แต่ละคนมีประสบการณ์และอุปนิสัย (Characterologic Pattern) ในการอ่าน
แตกต่างกัน • และเมื่อเปรียบเทียบการอ่านข้อมูลในกระดาษ (Hard Copy) กับ การอ่านข้อมูลแบบออนไลน์
(Soft Copy) เช่น หน้าเว็บไซต์ เป็นต้น พบว่า ผู้อ่านบนสื่อออนไลน์จะมีพฤติกรรมการอ่านไม่มาก (Read Less) หรือ อ่านแบบคร่าว (Scanning Reading) และมีการเลื่อนผ่านข้อความอย่างรวดเร็ว (Quick Scrolling)
• นอกจากนี้การแบ่งแยกหัวข้อที่ชัดเจน จะช่วยให้ผู้อ่านสามารถสังเกตุหัวข้อที่ต้องการและหยุดการเลื่อนผ่านได้อย่างทันเวลา
![Page 11: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/11.jpg)
หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion
• 3. วางแผนเพื่อการนําเสนอข้อมูลที่ชัดเจน (Plan for Clear Presentation of Information)
เครื่องมือค้นหา(Search Tool)
เมนูและการนําทาง(Menu and Navigation)
ใช้พื้นที่ว่างเพื่อแยกเนื้อหาให้ได้สัดส่วน
(Active White Space)
เลือกใช้ลกัษณะอักษรที่ชัดเจน มีการจําแนกสีอักษรเพือ่สือ่ถึงลิงค์
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• ในการออกแบบเว็บไซต์เชิงเอกภาพ (Unified Site Design) จะต้องทําการวางแผนเกี่ยวกับ
ลักษณะของเว็บไซต์ (Themes) โครงสร้างของเว็บไซต์ (Structure)
• ให้เป็นไปในแนวทางเดียวกันในทุกๆ เว็บเพจ โดยใช้สี ลักษณะอักษรและโครงร่างเว็บผสมผสานกันเพือ่สื่อสารและถ่ายทอด (Convey) ให้ผู้ใช้เว็บไซต์เกิดความประทับใจและจดจําเว็บไซต์ได้
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 1. วางแผนเพื่อให้เกิดความเป็นเอกภาพทางด้านการเปลี่ยนถ่ายหน้าเว็บ (Plan Smooth Transitions) • 1) เลือกใช้องค์ประกอบและภาพลักษณ์เดียวกันทั้งเว็บไซต์ เช่น สีของอักษร สัญลักษณ์ สี
พื้นหลัง เส้นสีของกรอบข้อความ ความหนาบางของกรอบข้อความ เป็นต้น นอกจากนี้ยังเป็นประโยชน์ในการออกแบบเว็บเพจในระดับชั้นถัดไปได้อย่างมีเอกภาพ (Unified Hierarchy)
• 2) จัดตําแหน่งส่วนประกอบในการนําทาง (Navigation) ให้เห็นได้ชัด (Obvious Section) และให้มีลักษณะเดียวกันทั้งเว็บไซต์ (Keep Consistent) โดยผู้ใช้จะเกิดการปรับประสบการณ์เกี่ยวกับทิศทางในการท่องเว็บไซต์ได้อย่างรวดเร็วและไม่เกิดความสับสนในการเข้าถึงข้อมูล
• 3) หลีกเลี่ยงการใช้กราฟิกที่ซับซ้อนหรือใช้กราฟิกเคลื่อนไหวที่ฟุ่มเฟือย เนื่องจากบั่นทอนประสบการณ์ผู้ใช้เกี่ยวกับการรู้จําทิศทางการนําทางในเว็บไซต์
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 1. วางแผนเพื่อให้เกิดความเป็นเอกภาพทางด้านการเปลี่ยนถ่ายหน้าเว็บ (Plan Smooth Transitions)
มีการใช้สีของ Mouse Over Link ไปในทิศทางเดียวกนักบัสีของตราสญัลกัษณ์
ส่วนของการนําทางอยู่แถบด้านบนของเว็บไซต์
ส่วนของการนําทางในระดับต่ํากว่า มีการแสดงภาพกราฟิกลายเส้นพื้นฐาน ประกอบกับข้อความ
การนําทางโดยการดึงดูดสายตาผู้ใช้เว็บให้เกิดความสนใจเกี่ยวกับจุดเด่นของผลิตภัณฑ์ที่จําหน่าย
![Page 12: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/12.jpg)
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 1. วางแผนเพื่อให้เกิดความเป็นเอกภาพทางด้านการเปลี่ยนถ่ายหน้าเว็บ (Plan Smooth Transitions)
ส่วนของการนําทางยังคงอยู่แถบด้านบนของเว็บไซต์
การนําทางในระดับต่ํากว่ายังคงมีลักษณะเดียวกันกับการนําทางระดับต้น
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 2. การใช้ตาข่ายข้อมูลช่วยวางโครงรา่งของเว็บเพจ (Use a Grid to Provide Visual Structure)
• โดยตาข่ายข้อมูล หรือ Grid มีลักษณะเป็นตารางประเภทหนึง่ที่มีจุดมุ่งหมายในการวางโครงร่าง (Layout) ของเว็บไซต์ ต่างจากตารางข้อมูล (Table) ที่มีไว้สําหรับแสดงข้อมูลเท่านั้น
• การใช้ตาข่ายข้อมูลในการวางโครงร่างของเว็บนัน้ มีหลายลักษณะ เช่น การใช้แนวคิดแบบตาข่าย 4 คอลัมน์ หรือ 6 คอลัมน์ เป็นต้น แต่ในปัจจุบันที่นิยมใช้ในแนวคิดแบบตาข่าย 12 คอลัมน์ในการช่วยวางโครงร่างของเว็บเพจ
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 2. การใช้ตาข่ายข้อมูลช่วยวางโครงรา่งของเว็บเพจ (Use a Grid to Provide Visual Structure)
• แนวคิดแบบตาข่าย 12 คอลัมน์ในการช่วยวางโครงร่างของเว็บเพจ
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 2. การใช้ตาข่ายข้อมูลช่วยวางโครงรา่งของเว็บเพจ (Use a Grid to Provide Visual Structure)
• แนวคิดแบบตาข่าย 12 คอลัมน์ในการช่วยวางโครงร่างของเว็บเพจ
![Page 13: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/13.jpg)
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 2. การใช้ตาข่ายข้อมูลช่วยวางโครงรา่งของเว็บเพจ (Use a Grid to Provide Visual Structure)
• แนวคิดแบบตาข่าย 12 คอลัมน์ในการช่วยวางโครงร่างของเว็บเพจ
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 2. การใช้ตาข่ายข้อมูลช่วยวางโครงรา่งของเว็บเพจ (Use a Grid to Provide Visual Structure)
• แนวคิดแบบตาข่าย 12 คอลัมน์ในการช่วยวางโครงร่างของเว็บเพจ
Col-1
Col-10
Col-3
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)• ช่วยให้การนําเสนอข้อมูลบนเว็บไซต์มีการจัดกลุ่มหรือจําแนกข้อมูลออกจากกัน ทําให้เกิด
ความชัดเจนในการรับข้อมูลมากขึ้น การใช้ช่องระยะห่างสีขาว หรือ White Space นั้น แท้จริงไม่จําเป็นต้องเป็นระยะห่างสีขาวเพียงอย่างเดียว อาจเป็นสีของพื้นหลังที่มีความแตกต่างจากกล่องข้อความอย่างชัดเจน
• ระยะห่างที่ปรากฎบนเว็บเพจมี 2 ลักษณะ ดังนี้ 1) ระยะห่างแบบมีส่วนร่วม (Active White Space) คือ ระยะห่างที่เป็นประโยชน์ต่อการจําแนกส่วนประกอบที่ปรากฎในหน้าเว็บเพจ ทําให้ผู้ใช้อ่านข้อมูลได้สะดวก ชัดเจน
2) ระยะห่างแบบไม่มีส่วนร่วม (Passive White Space) คือ ระยะห่างที่ไร้ประโยชน์ อาจเกิดจากหลายกรณี เช่น การจัดเรียงโครงร่างของเว็บที่ไม่คํานึงถึงพื้นที่ทั้งหมด การที่ข้อมูลในแต่ละหน้าเว็บเพจมีขนาดไม่เท่ากันทําให้เกิดพื้นที่ว่างขึ้นได้ เป็นต้น
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)ระยะห่างแบบมีส่วนร่วม (Active White Space) ใช้จําแนกการนําทางออกจาก
เนื้อหา
ระยะห่างแบบมีส่วนร่วม (Active White Space) ใช้จําแนกหวัข้อยอ่ย (Section Heading)
ระยะห่างแบบมีส่วนร่วม (Active White Space) ใช้จําแนกเนื้อหาหลัก (Main Section)
![Page 14: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/14.jpg)
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)
ระยะห่างแบบไม่มีส่วนร่วม (Passive White Space)
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)• การใช้หลักการตาข่ายข้อมูลแบบ 12 คอลัมน์ ยังมีการกําหนดขนาดพื้นที่ความกว้างที่ดีที่สุด
คือ 960 พิกเซล (Pixels) เนื่องจากสามารถแสดงผลได้ดีในจอภาพขนาด 1024 x 768 พิกเซล ขึ้นไป
• โดยตาข่ายข้อมูลแบบ 12 คอลัมน์ 960 พิกเซล จะมีช่องว่างระยะห่างระหว่างแต่ละคอลัมน์ที่เรียกว่า “ท่อ” (Gutter) ที่มีขนาด 14 พิกเซล และแต่ละคอลัมน์จะมีขนาด 68 พิกเซล
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)
ช่องระยะห่าง (Use Active White
Space) หรือ ท่อ(Gutter)
การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design
• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)
![Page 15: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/15.jpg)
การออกแบบเว็บกับประสบการณ์ผู้ใช้Web Design with User Experience
• องค์การระหว่างประเทศว่าด้วยการกําหนดมาตรฐาน ได้นิยามคําว่า ประสบการณ์ผู้ใช้ (User Experience) ไว้ใน ISO 9241-210:2010 หรือ มาตรฐานระหว่างประเทศเกี่ยวกับการยศาสตร์ของการปฏิสัมพันธ์ระบบของมนุษย์ (Ergonomics of Human-System Interaction ; Part 210: Human-Centred Design for Interactive Systems)
• ประสบการณ์ผู้ใช้ (UX) มีความหมาย คือ การรับรู้ของบุคคลและการตอบสนองที่เกิดขึ้นจากการใช้งานผลิตภัณฑ์ในลักษณะระบบหรือบริการ โดยประสบการณ์การผู้ใช้งานจะรวมถึงทุกอารมณ์ของผู้ใช้ ความเชื่อ การรับรู้ การตอบสนองทางร่างกายและจิตใจ พฤติกรรมและความสําเร็จที่เกิดขึ้นก่อนระหว่างและหลังการใช้งานด้วย ISO 9241-210:2010 ยังระบุถึงปัจจัยที่มีอิทธิพลต่อประสบการณ์ผู้ใช้ คือ ระบบ (System) ผู้ใช้ (User) และบริบท (Context) ของการใช้งาน
• ที่มา: International Organization for Standardization: ISO, 2010
การออกแบบเว็บกับประสบการณ์ผู้ใช้Web Design with User Experience
การแสดงผลเนื้อหาบนเว็บไซต์ Wikiwand
เครื่องมือสําหรับการปรับลักษณะของเน้ือหา
การออกแบบเว็บกับประสบการณ์ผู้ใช้Web Design with User Experience
แสดงการเปรียบเทียบการแสดงผลเนื้อหาบนเว็บไซต์ Wikiwand กับ Wikipedia
การออกแบบเว็บกับประสบการณ์ผู้ใช้Web Design with User Experience
แสดงการเปรียบเทียบการนําเมาสว์างเหนือลิงค์ (Mouse Over Hyperlink)
![Page 16: บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design](https://reader034.vdocuments.net/reader034/viewer/2022050520/5fa374c7281a897de717707e/html5/thumbnails/16.jpg)
เอกสารอ้างอิงReferences
1. 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
2. Clark Wimberly. (2015) Reimagining the Web Design Process. Retrieved 1 July 2015. URL: http://sixrevisions.com/web_design/reimagine-web-design-process/
3. 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 978-3-540-45144-0 335-352 http://link.springer.com/chapter/10.1007%2F3-540-45144-7_32
4. 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.
5. Palmer, Sean B.; Berners-Lee, Tim (February–March 2001). "Enquire Manual — In HyperText". Retrieved 5 January 2015. URL: https://www.w3.org/People/Berners-Lee/EnquireManual.htm
6. Thomas A. Powell.(2003) Web Design: The Complete Reference. ISBN 0-07-058252-1. McGraw-Hill Publishing Company Limited 914 p.
7. 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