บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design

บทที่ 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

สรุปความหมายของการออกแบบเว็บไซต์

การออกแบบเว็บไซต์ มาจากคําว่า “Web Design” โดยมีความหมาย คือ การวางแผนและการดําเนินงานในการผลิตเว็บไซต์ ซึ่งประกอบไปด้วย• วัตถุประสงค์ของเว็บไซต์ • การวางกรอบแนวคิด • การออกแบบ เ นื้ อหาและการ

สื่อสาร • การออกแบบเค้าร่างของเว็บไซต์

• การออกแบบอักษร • การออกแบบเว็บไซต์ที่ผู้ใช้ทั่วไป

และผู้พิการเข้าถึงเนื้อหาได้ • การคํ านึ งถึ งสภาพแวดล้อม ที่

เว็บไซต์จะสามารถทํางานและส่งถ่ายไปยังผู้ใช้ได้

• ทั้ ง นี้ แ น วคิ ด ใ นก า รออกแบบเว็บไซต์จะเป็นอิสระจากภาษาโปรแกรมหรือเครื่องมือพัฒนาเชิงเทคนิคด้วย


Web Designvs

Web Development


การออกแบบเว็บไซต์ในลักษณะเชิงสุนทรียะ “Design Aesthetic for Web Design”

เน้นมุมมอง (Viewpoints) คือ มุมมองความสวยงาม (Aesthetic) และมุมมองทางด้านอารมณ์ (Emotional)

ประวัติความเป็นมาของเว็บไซต์

• โดยต้นกําเนิดของเว็บไซต์เกิดขึ้นเมื่อ ปี ค.ศ.1945 โดยแวนเนวาบุช (Vannevar Bush) ได้เขียนบทความเกี่ยวกับการสืบค้นสารสนเทศเชิงเชื่อมโยงจากแผ่นไมโครฟิล์มเล็ก (Microfiche) โดยเรียกว่า “เมมเมคซ์ (Memex)”

Microfiche Memex


ในปี ค.ศ.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)


Web Browser Cache

Internet

Device and Operating System Issues

Browser Cache and Download Time

Connection Speed


• 1. เว็บเบราว์เซอร์ (Web Browser)แสดงแผนภูมิร้อยละของ

แนวโน้มการใช้เว็บเบราว์เซอร์ระหว่างช่วง

ค.ศ. 2011 - 2015



Mobile Broadband

Fixed Broadband



ประเทศ อัตราความเร็ว 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


• 3. การเก็บหน่วยความจําและเวลาในการดาวน์โหลดหน้าเว็บ (Browser Cache and Download Time)

• ในการเรียกค้นเว็บไซต์นั้น จะกระทําผ่านเว็บเบราว์เซอร์ ซึ่งปัจจุบันเว็บเบราว์เซอร์จะมีฟังก์ชั่นการทํางานที่เรียกว่า “แคช (Cache)” ซึ่งหมายถึงหน่วยความจําที่เว็บเบราว์เซอร์เก็บข้อมูลไว้

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


• 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 เป็นต้น


• 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%


• 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%


• 1. การแสดงผลบนหน้าจอคอมพิวเตอร์ส่วนบุคคล (Desktop and Laptop Displays)

WEB PAGE WEB PAGE

ขนาดจอภาพ 800 x 600 px ขนาดจอภาพ 1366 x 768 px

เกิดพื้นที่เปล่า (Space)

Fixed Design


• 1. การแสดงผลบนหน้าจอคอมพิวเตอร์ส่วนบุคคล (Desktop and Laptop Displays)

VS


• 2. อุปกรณ์เคลื่อนที่ (Mobile Devices)


• 2. อุปกรณ์เคลื่อนที่ (Mobile Devices)


• 3. โมบายไซต์ (Mobile Site)

Desktop Site Mobile Site


• 3. โมบายไซต์ (Mobile Site)

มีการให้ผู้ใช้เลือกมุมมองการแสดงเนื้อหาได้ 3 ลักษณะคือ ลักษณะทั่วไป (Desktop) ลั กษณะ เ ข้ า กับ อุปกรณ์เคลื่อนที่ (Mobile) และ ลักษณะมุมมองเหมือนพิมพ์ (Print)


• 4. เว็บเชิงตอบสนอง (Responsive Web)

สมาร์ทโฟนในแกนแนวตั้ง(Vertical Orientation)

สมาร์ทโฟนในแกนแนวนอน(Horizontal Orientation)


• 5. การจัดการปัญหาขนาดของจอภาพแสดงผล (Solving the Screen Resolution Dilemma)

• เป็นสิ่งที่ผู้ออกแบบเว็บต้องให้ความสําคัญ โดยการออกแบบเว็บมีเค้าร่างเกี่ยวกับการจัดการขนาดของจอภาพ อยู่ 2 เค้าร่าง คือ – แบบคงที่หรือแบบตายตัว (Fixed) – แบบยืดหยุ่น (Flexible)



• เป็นสิ่งที่ผู้ออกแบบเว็บต้องให้ความสําคัญ โดยการออกแบบเว็บมีเค้าร่างเกี่ยวกับการจัดการขนาดของจอภาพ อยู่ 2 เค้าร่าง คือ – แบบคงที่หรือแบบตายตัว (Fixed)

– แบบยืดหยุ่น (Flexible)

จําเป็นต้องพึ่งผู้ใช้ในการส่ายหน้าเวบ็ (Pan) การขยายหน้าเว็บ (Zoom) และการเลื่อน (Scroll)

ลดการเลื่อนหรือส่ายหน้าเว็บในแนวนอนเพื่ออ่านหน้าเว็บไซต์ที่ล้นเวบ็เบราว์เซอร์



5.1 ข้อดีของการออกแบบเว็บไซต์แบบยืดหยุ่น1) มุมมองของเว็บไซต์เหมาะสมกับอุปกรณ์ของผู้ใช้2) ลดการเลื่อนหรือส่ายหน้าเว็บในแนวนอนเพื่ออ่านหน้าเว็บไซต์ที่ล้นเว็บเบราว์เซอร์3) มีความยืดหยุ่นในการแสดงผลบนหลากหลายอปุกรณ์4) อักษรและเค้าร่างเว็บมีการปรับขนาดให้เหมาะสมกับหน้าจอของอปุกรณ์5) สามารถปรับตําแหน่งและซ่อนหรือแสดงผลบางองค์ประกอบของหน้าเว็บไซต์ให้เข้ากับขนาดหรือแกนของจอภาพได้

5.2 ข้อดีของการออกแบบเว็บไซต์แบบยึดหรือแบบตายตัว1) ผู้ออกแบบเว็บไซต์จะเป็นผู้กําหนดมุมมองให้แก่ผู้ใช้แบบเดียวเท่านั้น 2) สามารถกําหนดขนาดอกัษรคงที่ไม่แปรผันตามขนาดของหน้าจอแสดงผล

หลักการสร้างมุมมองและความรู้สึกที่มีต่อเว็บไซต์View and Emotion

• 1. ความสมดุลระหว่างการออกแบบและเนื้อหา (Balance Design and Content) • เป็นส่วนสําคัญที่ผู้ออกแบบและพัฒนาเว็บไซต์จะต้องคํานึงถึงเนื้อหา (Content) ที่จะนําเสนอ

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


• 1. ความสมดุลระหว่างการออกแบบและเนื้อหา (Balance Design and Content) • การออกแบบเว็บไซต์ควรส่งเสริมเนื้อหาและสนับสนุนผู้อ่าน • การออกแบบเนื้อหาข้อมูลบนเว็บควรจะแบ่งออกหรือจัดกลุ่มอย่างมีเหตุผลและมีโครงสร้าง • รวมถึงการออกแบบระบบนําทางเนื้อหาบนเว็บให้ชัดเจนและเข้าใจได้ง่าย• ผู้ออกแบบเว็บในปัจจุบันมักจะเลือกใช้การออกแบบเว็บที่เรียบง่ายและแสดงเนื้อหาอย่าง

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


• 2. วางแผนเพื่อความสะดวกในการเข้าถึงข้อมูล (Plan for Easy Access to Information)

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

• เป้าหมายของวางแผนเพือ่ความสะดวกในการเข้าถึงข้อมูล คือ การจัดระเบียบเน้ือหาของเว็บไซต์ การนําเสนอที่เข้าใจได้ง่าย และมีเซ็ตการนําทางที่เหมาะสม ทําให้ผู้ใช้ไม่ต้องเสียเวลาในการตรวจดูสํารวจการเข้าถึงข้อมูลบนหน้าเว็บไซต์ (Quests for Information)


• 2. วางแผนเพื่อความสะดวกในการเข้าถึงข้อมูล (Plan for Easy Access to Information)


• 3. วางแผนเพื่อการนําเสนอข้อมูลที่ชัดเจน (Plan for Clear Presentation of Information)



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

• เว็บไซต์จํานวนมากประสบความล้มเหลวในการออกแบบเว็บไซต์ เนื่องจากขาดความใส่ใจและมีความไม่เข้าใจเกี่ยวกับความชัดเจนของการนําเสนอข้อมูลอย่างถ่องแท้ เช่น การใช้ลักษณะอักษร (Font) ที่หลากหลายมากเกินไป การใช้สีกับอักษรโดยไม่คํานึงถึงความหมาย สีพื้นหลัง (Background) ที่ไม่ส่งผลให้อักษรมีความเด่น และการเสนอข้อมูลด้วยอักษรที่มีประโยคยาวเกินไปโดยไม่คํานึงถึงจุดหยุด (Breakpoint) ในการนําเสนอข้อมูลทําให้ผู้อ่านเกิดความสับสนและอาจเกิดทัศนคติที่ไม่ดีต่อเว็บไซต์ได้




• การใช้ลักษณะอักษร สีของอักษร พื้นหลังที่ลงตวั การแบ่งข้อความให้เป็นสัดส่วนที่ชัดเจนเหมาะสม รวมถึงการใช้ประโยชน์จาก สําหรับการแยกเนื้อหาหรือจัดโครงสร้างบนหนา้เว็บไซต์ก็จะช่วยให้การอ่านข้อมูลมีความสะดวกรวดเร็วมากขึ้น


พื้นที่ว่างสีขาว (White Space)



• ผู้ออกแบบเว็บไซต์จะต้องคํานึงถึงความแตกต่างระหว่างบุคคล • ผู้เข้าชมเว็บไซต์แต่ละคนมีประสบการณ์และอุปนิสัย (Characterologic Pattern) ในการอ่าน

แตกต่างกัน • และเมื่อเปรียบเทียบการอ่านข้อมูลในกระดาษ (Hard Copy) กับ การอ่านข้อมูลแบบออนไลน์

(Soft Copy) เช่น หน้าเว็บไซต์ เป็นต้น พบว่า ผู้อ่านบนสื่อออนไลน์จะมีพฤติกรรมการอ่านไม่มาก (Read Less) หรือ อ่านแบบคร่าว (Scanning Reading) และมีการเลื่อนผ่านข้อความอย่างรวดเร็ว (Quick Scrolling)

• นอกจากนี้การแบ่งแยกหัวข้อที่ชัดเจน จะช่วยให้ผู้อ่านสามารถสังเกตุหัวข้อที่ต้องการและหยุดการเลื่อนผ่านได้อย่างทันเวลา



เครื่องมือค้นหา(Search Tool)

เมนูและการนําทาง(Menu and Navigation)

ใช้พื้นที่ว่างเพื่อแยกเนื้อหาให้ได้สัดส่วน

(Active White Space)

เลือกใช้ลกัษณะอักษรที่ชัดเจน มีการจําแนกสีอักษรเพือ่สือ่ถึงลิงค์

การออกแบบเว็บไซต์เชิงเอกภาพ Unified Site Design

• ในการออกแบบเว็บไซต์เชิงเอกภาพ (Unified Site Design) จะต้องทําการวางแผนเกี่ยวกับ

ลักษณะของเว็บไซต์ (Themes) โครงสร้างของเว็บไซต์ (Structure)

• ให้เป็นไปในแนวทางเดียวกันในทุกๆ เว็บเพจ โดยใช้สี ลักษณะอักษรและโครงร่างเว็บผสมผสานกันเพือ่สื่อสารและถ่ายทอด (Convey) ให้ผู้ใช้เว็บไซต์เกิดความประทับใจและจดจําเว็บไซต์ได้


• 1. วางแผนเพื่อให้เกิดความเป็นเอกภาพทางด้านการเปลี่ยนถ่ายหน้าเว็บ (Plan Smooth Transitions) • 1) เลือกใช้องค์ประกอบและภาพลักษณ์เดียวกันทั้งเว็บไซต์ เช่น สีของอักษร สัญลักษณ์ สี

พื้นหลัง เส้นสีของกรอบข้อความ ความหนาบางของกรอบข้อความ เป็นต้น นอกจากนี้ยังเป็นประโยชน์ในการออกแบบเว็บเพจในระดับชั้นถัดไปได้อย่างมีเอกภาพ (Unified Hierarchy)

• 2) จัดตําแหน่งส่วนประกอบในการนําทาง (Navigation) ให้เห็นได้ชัด (Obvious Section) และให้มีลักษณะเดียวกันทั้งเว็บไซต์ (Keep Consistent) โดยผู้ใช้จะเกิดการปรับประสบการณ์เกี่ยวกับทิศทางในการท่องเว็บไซต์ได้อย่างรวดเร็วและไม่เกิดความสับสนในการเข้าถึงข้อมูล

• 3) หลีกเลี่ยงการใช้กราฟิกที่ซับซ้อนหรือใช้กราฟิกเคลื่อนไหวที่ฟุ่มเฟือย เนื่องจากบั่นทอนประสบการณ์ผู้ใช้เกี่ยวกับการรู้จําทิศทางการนําทางในเว็บไซต์


• 1. วางแผนเพื่อให้เกิดความเป็นเอกภาพทางด้านการเปลี่ยนถ่ายหน้าเว็บ (Plan Smooth Transitions)

มีการใช้สีของ Mouse Over Link ไปในทิศทางเดียวกนักบัสีของตราสญัลกัษณ์

ส่วนของการนําทางอยู่แถบด้านบนของเว็บไซต์

ส่วนของการนําทางในระดับต่ํากว่า มีการแสดงภาพกราฟิกลายเส้นพื้นฐาน ประกอบกับข้อความ

การนําทางโดยการดึงดูดสายตาผู้ใช้เว็บให้เกิดความสนใจเกี่ยวกับจุดเด่นของผลิตภัณฑ์ที่จําหน่าย


• 1. วางแผนเพื่อให้เกิดความเป็นเอกภาพทางด้านการเปลี่ยนถ่ายหน้าเว็บ (Plan Smooth Transitions)

ส่วนของการนําทางยังคงอยู่แถบด้านบนของเว็บไซต์

การนําทางในระดับต่ํากว่ายังคงมีลักษณะเดียวกันกับการนําทางระดับต้น


• 2. การใช้ตาข่ายข้อมูลช่วยวางโครงรา่งของเว็บเพจ (Use a Grid to Provide Visual Structure)

• โดยตาข่ายข้อมูล หรือ Grid มีลักษณะเป็นตารางประเภทหนึง่ที่มีจุดมุ่งหมายในการวางโครงร่าง (Layout) ของเว็บไซต์ ต่างจากตารางข้อมูล (Table) ที่มีไว้สําหรับแสดงข้อมูลเท่านั้น

• การใช้ตาข่ายข้อมูลในการวางโครงร่างของเว็บนัน้ มีหลายลักษณะ เช่น การใช้แนวคิดแบบตาข่าย 4 คอลัมน์ หรือ 6 คอลัมน์ เป็นต้น แต่ในปัจจุบันที่นิยมใช้ในแนวคิดแบบตาข่าย 12 คอลัมน์ในการช่วยวางโครงร่างของเว็บเพจ



• แนวคิดแบบตาข่าย 12 คอลัมน์ในการช่วยวางโครงร่างของเว็บเพจ










Col-1

Col-10

Col-3


• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)• ช่วยให้การนําเสนอข้อมูลบนเว็บไซต์มีการจัดกลุ่มหรือจําแนกข้อมูลออกจากกัน ทําให้เกิด

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

• ระยะห่างที่ปรากฎบนเว็บเพจมี 2 ลักษณะ ดังนี้ 1) ระยะห่างแบบมีส่วนร่วม (Active White Space) คือ ระยะห่างที่เป็นประโยชน์ต่อการจําแนกส่วนประกอบที่ปรากฎในหน้าเว็บเพจ ทําให้ผู้ใช้อ่านข้อมูลได้สะดวก ชัดเจน

2) ระยะห่างแบบไม่มีส่วนร่วม (Passive White Space) คือ ระยะห่างที่ไร้ประโยชน์ อาจเกิดจากหลายกรณี เช่น การจัดเรียงโครงร่างของเว็บที่ไม่คํานึงถึงพื้นที่ทั้งหมด การที่ข้อมูลในแต่ละหน้าเว็บเพจมีขนาดไม่เท่ากันทําให้เกิดพื้นที่ว่างขึ้นได้ เป็นต้น


• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)ระยะห่างแบบมีส่วนร่วม (Active White Space) ใช้จําแนกการนําทางออกจาก

เนื้อหา

ระยะห่างแบบมีส่วนร่วม (Active White Space) ใช้จําแนกหวัข้อยอ่ย (Section Heading)

ระยะห่างแบบมีส่วนร่วม (Active White Space) ใช้จําแนกเนื้อหาหลัก (Main Section)


• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)

ระยะห่างแบบไม่มีส่วนร่วม (Passive White Space)


• 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ท่อ (Gutter)• การใช้หลักการตาข่ายข้อมูลแบบ 12 คอลัมน์ ยังมีการกําหนดขนาดพื้นที่ความกว้างที่ดีที่สุด

คือ 960 พิกเซล (Pixels) เนื่องจากสามารถแสดงผลได้ดีในจอภาพขนาด 1024 x 768 พิกเซล ขึ้นไป

• โดยตาข่ายข้อมูลแบบ 12 คอลัมน์ 960 พิกเซล จะมีช่องว่างระยะห่างระหว่างแต่ละคอลัมน์ที่เรียกว่า “ท่อ” (Gutter) ที่มีขนาด 14 พิกเซล และแต่ละคอลัมน์จะมีขนาด 68 พิกเซล



ช่องระยะห่าง (Use Active White

Space) หรือ ท่อ(Gutter)



การออกแบบเว็บกับประสบการณ์ผู้ใช้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


การแสดงผลเนื้อหาบนเว็บไซต์ Wikiwand

เครื่องมือสําหรับการปรับลักษณะของเน้ือหา


แสดงการเปรียบเทียบการแสดงผลเนื้อหาบนเว็บไซต์ Wikiwand กับ Wikipedia


แสดงการเปรียบเทียบการนําเมาสว์างเหนือลิงค์ (Mouse Over Hyperlink)

เอกสารอ้างอิง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

Documents

บทที่ 1 หลักการออกแบบเว ็บ Chapter 1 ......บทท 1 หล กการออกแบบเว บ Chapter 1 Principles of Web Design