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

46 สรปุ ว่าค่าดชั นีความยาก (ID) ในการเคล่อื นไหวจากป่ ุมตกลงไปยังป่ ุมยกเลกิ มคี ่า เทา่ กบั 1.1699 บิต ตัวอย่างท่ี 2.2 บนหน้าเวบ็ ไซต์ประกอบไปด้วยป่ ุมตกลงและป่ ุมยกเลิกเรียงใน แนวนอน (แกน 0 องศา) โดยท้งั 2 ป่ ุมมีขนาด 200 px และมีระยะห่างต้ังแต่จุดก่งึ กลาง ของป่ ุมแรกไปยังจุดก่ึงกลางของป่ ุมท่สี อง 250 px จงหาระยะเวลาเคล่ือนไหว (MT) ระหว่างป่ ุม 2 ป่ ุม โดยค่าประมาณความยากของมนุษย์ท่มี ตี ่อการใช้เมาสก์ บั คอมพิวเตอร์ต้ัง โตะ๊ ได้ประมาณค่าดชั นีความยาก 1 บิต ใช้เวลา 100 มิลวิ ินาที (Millisecond: ms.) แทนค่า ดังน้ัน สรุปว่า ระยะเวลาเคล่อื นไหวจากป่ ุมตกลงไปยงั ป่ ุมยกเลกิ ใช้เวลา 116.99 มลิ ิวินาที กรณีทต่ี ้องการวัดระยะเวลาเคล่อื นไหวจากจุดเร่ิมต้นกับเป้ าหมายท่ไี ม่ได้อยู่ในแกน 0 และ 90 องศา อาจใช้ทฤษฎพี ีทากอรัสในการวัดระยะห่าง (Distance) และความกว้างใน แนวเอยี ง (W’) เพ่ือความแม่นยาในการวิเคราะห์ แต่ความกว้างของเป้ าหมายในแนวเอียง ไม่กระทบต่อประสทิ ธภิ าพของการวดั จงึ สามารถใช้ความกว้างของเป้ าหมายตามปกตไิ ด้

47 ภาพท่ี 2.32 แสดงการวัดระยะของตัวแปรสาหรับกฎของฟิ ททใ์ นแกน 45 องศา การคานวนระยะห่างด้วยทฤษฎพี ีทากอรัส มีสตู รทางคณิตศาสตร์ดงั น้ี √ โดยท่ี คือ ระยะห่างระหว่างจุดเร่มิ ต้นกบั ก่งึ กลางเป้ าหมาย (Distance) คอื ระยะห่างในแนวนอน คอื ระยะห่างในแนวต้งั ตัวอย่างท่ี 2.3 บนหน้าเว็บไซต์ประกอบไปด้วยป่ ุมตกลงและป่ ุมยกเลิกเรียงใน แนวต้ัง (แกน 45 องศา) โดยท้งั 2 ป่ ุมมีความยาว 200 px และมีความกว้าง 100 px และ มีระยะห่างต้ังแต่จุดเร่ิมต้นไปยังจุดก่งึ กลางท่ตี ้ังฉากกนั 300 px จงหาดัชนีความยาก (ID) ระหว่างป่ ุม 2 ป่ ุม

48 ภาพท่ี 2.33 แสดงการวัดระยะห่างระหว่างป่ ุมตกลงและป่ ุมยกเลิกในแกน 45 องศา คานวนระยะห่าง (D) โดยการแทนค่า √ คานวนดชั นีความยาก (ID) ได้จาก = = สรปุ ว่าความยากในการเคล่อื นไหวจากป่ ุมตกลงไปยงั ป่ ุมยกเลกิ มคี ่า 2.39 บิต กฎของฮิกซ์ กฎของฮิกซ์ (Hicks’ law) ถูกนาเสนอข้นึ ในปี ค.ศ.1952 โดยวิลเล่ียมเอด็ มันฮิกซ์ (William Edmund Hicks) และเรย์ไฮแมน (Ray Hyman) ทมี นักจิตวิทยาชาวองั กฤษและ ชาวอเมริกา ซ่ึงเป็นกฎทเ่ี ก่ยี วข้องกบั การวดั ระยะเวลาทผ่ี ู้ใช้ตดั สนิ ใจตอบสนองต่อตวั กระต้นุ ท่มี ี โดยในด้านการออกแบบเวบ็ ไซตต์ วั กระตุ้นอาจเป็นป่ มุ ตัวเลอื ก ไฮเปอร์ลิงค์ แถบนาทาง เมนู ซ่ึงส่วนประกอบต่างๆ เหล่าน้ีล้วนทาหน้าท่ีติดต่อประสานกับผู้ใช้โดยตรง หากทีม ผู้ออกแบบเวบ็ ไซตไ์ ม่ให้ความสาคญั กบั ตัวเลือก ผู้ใช้จะมีความร้สู กึ ว่ากาหลังถูกคุกคามด้วย ตัวเลอื กมากมาย และตวั เลอื กทม่ี ีปริมาณมาก ผู้ใช้จะเกดิ ความรู้สกึ ถงึ ความซับซ้อนยุ่งยาก

49 ดังน้ัน ผู้ออกแบบเวบ็ ไซต์ควรทราบและนากฎของฮิกซ์ไปใช้วัดและประเมินผลการ ออกแบบตัวเลือกต่างๆ บนเวบ็ ไซต์เพ่ือให้เกดิ ความเรียบง่ายและตรงไปตรงมา “Keep It Simple and Straightforward” (“K.I.S.S.”) ส่งผลให้ผู้ใช้ไม่เกดิ ความสับสนและเข้าใช้ เวบ็ ไซตไ์ ด้สะดวกย่งิ ข้นึ โดยเฉพาะเวบ็ ไซตท์ างด้านพาณิชย์อเิ ลก็ ทรอนิกส์ หากตัวเลือกหรือ ป่ ุมชาระสนิ ค้ามีจานวนมาก ไม่ชดั เจน รวมถึงมขี ้นั ตอนทซ่ี ับซ้อน ผู้ใช้บางรายจะหยุดการทา ธรุ กรรมน้ันทนั ที หรือออกก่อนในเวลาอนั ควร ภาพท่ี 2.34 แสดงการออกแบบสปี ่ ุมทก่ี ระต้นุ การตดั สนิ ใจของผู้ซ้ือ ท่มี า: http://www.ebay.com 1. ความแตกต่างระหว่างกฎของฟิ ทท์ กบั กฎของฮิกซ์ กฎของฟิ ททเ์ น้นการวดั ดชั นีความยากและระยะเวลาเคล่อื นไหวของมนุษย์ในการ เข้าถงึ เป้ าหมาย โดยมปี ระโยชน์ในการกาหนดระยะห่างและขนาดของเป้ าหมาย ส่วนกฎของ ฮิกซ์จะเน้นการวัดประสิทธิภาพของตัวเลือกและระยะเวลาท่ีตอบสนองตัวเลือก โดยมี ประโยชน์ในการออกแบบตัวเลือกท่เี ข้าใจได้ง่าย ชัดเจน และมปี ระสทิ ธภิ าพเพียงพอต่อการ นาไปใช้

50 2. กฎของฮิกซแ์ ละผลกระทบที่เกิดกบั เว็บไซต์ 2.1 จานวนคร้งั ในการเขา้ ชมเว็บไซต์ (Page views) เป็นตัวช้ีวดั ทส่ี าคญั ในการ เกบ็ สถิติการเข้าชมเวบ็ ไซต์ ซ่ึงในเวบ็ ไซต์ท่มี ีการนาเสนอตัวเลือกมากมายเกนิ ความจาเป็น จะมีสถิติการเข้าชมเวบ็ ไซต์ลดลง หรือน้อยกว่าเวบ็ ไซต์ท่มี ีการใช้ตัวเลือกท่เี หมาะสมและมี ประสทิ ธภิ าพ 2.2 ระยะเวลาในการเขา้ ชมเว็บไซต์ (Time on site) การออกแบบตัวเลือกจะ ส่งผลกระทบต่อระยะเวลาชมเวบ็ ไซต์ โดยหากมีตัวเลือกท่ไี ม่เหมาะสมอาจทาให้ผู้เข้าชม เวบ็ ไซต์ใช้เวลาบนเวบ็ ไซต์น้อยเกนิ ไปซ่ึงอาจทาให้เสยี ลูกค้าได้ และในทางตรงกันข้าม หาก ผู้ใช้มีเวลาอยู่ในเวบ็ ไซตน์ านเกนิ ไป อาจเกิดจากความสบั สนของผู้ใช้ท่มี ีต่อเวบ็ ไซต์ได้ ซ่ึงก็ ไม่ส่งผลดีต่อเวบ็ ไซต์เช่นกนั 3. การวดั ระยะเวลาตอบสนอง การวัดระยะเวลาตอบสนองของผู้ใช้ เกิดจากความสัมพันธ์ระ หว่างระยะเวลาท่ี เข้าใจไม่รวมระยะเวลาท่ตี ัดสนิ ใจ (Time to understand) เวลาในการประมวลผลของแต่ละ ตัวเลือก (Cognitive processing time) และจานวนตัวเลอื ก (Number of option) โดยการวัดระยะเวลาตอบสนองมสี ตู รทางคณิตศาสตร์ ดังน้ี โดยท่ี คือ ระยะเวลาทต่ี อบสนองต่อสง่ิ กระต้นุ (Response Time) คอื จานวนของตวั เลือกทม่ี ี (Options) คอื ระยะเวลาทง้ั หมดทใ่ี ช้ในการทาความเข้าใจ ซ่งึ ไม่รวมระยะเวลาทต่ี ัดสนิ ใจ (Time to Understand) คอื ระยะเวลาในการประมวลผลของแต่ละตัวเลือก (Cognitive Processing Time) สาหรับมนุษย์อาจกาหนดระยะเวลา คือ 0.155 วินาที

51 ตัวอย่างท่ี 2.4 แถบนาทางอารมณ์ มีตัวเลือกจานวน 6 ตัวเลือก และใช้เวลาในการ ทาความเข้าใจแถบดังกล่าวประมาณ 3 วินาที อยากทราบว่าระยะเวลาในการตอบสนองต่อ ตวั เลือกมีเทา่ ใด ภาพท่ี 2.35 แสดงแถบนาทางเชิงอารมณ์ ทม่ี า: https://www.facebook.com/ แทนค่า ดงั น้ัน สรุปได้ว่าระยะเวลาในการตอบสนองต่อแถบนาทางอารมณ์เทา่ กบั 3.40 วินาที ตัวอย่างท่ี 2.5 เมนูสาหรับซ้ือสินค้ามีลักษณะเป็นดรอ็ ปดาวน์เมนู (Drop down menu) มีตัวเลือกหลักจานวน 2 ตัวเลือก และเม่ือนาเมาสไ์ ปวางเหนือตัวเลือกหลัก จะ ปรากฎตัวเลือกย่อยๆ อีก 5 ตัวเลือก โดยใช้เวลาในการทาความเข้าใจตัวเลือกหลัก ประมาณ 2 วินาที และตัวเลือกย่อย 3 วินาที (5 ตัวเลือก) อยากทราบว่าระยะเวลาในการ ตอบสนองต่อตวั เลอื กมเี ทา่ ใด

52 ภาพท่ี 2.36 แสดงดรอ็ ปดาวน์เมนู (Drop down menu) ตวั เลือกหลัก แทนค่า ดังน้ัน ตัวเลือกย่อยของตัวเลือกเมนูท่ี 1 และเมนูท่ี 2 แทนค่า ดังน้ัน ดงั น้ัน ระยะเวลาในการตอบสนอง สรปุ ได้ว่าระยะเวลาในการตอบสนองต่อเมนูดงั กล่าวเทา่ กบั 8.8748 วินาที

53 หลกั การพาเรโต 1. ความเป็ นมาและลกั ษณะของหลกั การพาเรโต หลักการพาเรโต (Pareto principle) หรือ กฎ 80/20 เป็นกฎท่สี ร้างข้นึ โดย วิล เฟรโด พาเรโต (Vilfredo Pareto) นักเศรษฐศาสตร์ชาวอิตาลี โดยพาเรโตได้วิจัยเก่ียวกบั ความม่งั ค่งั ในประเทศอติ าลี พบว่า ร้อยละ 80 ของความม่ังค่ังถูกครอบครองโดยประชากร ร้อยละ 20 พาเรโตจงึ ต้งั กฎ 80/20 ข้นึ และในปี ค.ศ.1930 โจเซฟ จูแรน (Joseph Juran) ได้นากฎ 80/20 กลับมาใช้อกี คร้ังในช่ือ หลักการของพาเรโต โดยอธบิ ายถึงส่งิ ท่เี ป็นส่วน น้อยแต่สาคัญ (Vital few) จะมีอยู่ร้อยละ 20 และ ส่งิ ไม่สาคัญหรือสาคัญน้อย (Trivial many) จะมีอยู่ร้อยละ 80 หลักการของพาเรโตเป็ นหลักการท่ไี ม่สมดุล แต่กส็ ามารถนามาประยุกต์ใช้ได้ หลายเหตุการณ์ เช่น กาไรร้อยละ 80 ของร้านค้าออนไลน์ได้มาจากลกู ค้าท่จี งรักภักดีจานวน ร้อยละ 20 หรือ รายได้ร้อยละ 20 ต่อเดือนจะถูกเกบ็ ออมในบัญชี และค่าใช้จ่ายท่วั ไปจะมี อยู่ร้อยละ 80 เป็นต้น ท้งั น้ีหลักการพาเรโตกไ็ ม่สามารถใช้ได้ในทุกๆ เหตุการณ์เน่ืองจาก เหตุการณแ์ ต่ละเหตุการณม์ ปี ัจจยั แตกต่างกนั ภาพท่ี 2.37 แสดงการเปรยี บเทยี บจานวนกจิ กรรมกบั ผลลัพธท์ ่ไี ด้ตามหลักการพาเรโต ท่มี า: http://www.mytimemanagement.com/pareto-principle.html

54 2. การประยกุ ตใ์ ชห้ ลกั การพาเรโตกบั การออกแบบเว็บไซต์ ปัจจุบนั มกี ารนาหลกั การพาเรโตมาประยุกต์ใช้ในการออกแบบเวบ็ ไซต์ เช่น 2.1 การออกแบบโครงร่างเวบ็ ในการนาเสนอเน้ือหาน้ัน พ้ืนท่รี ้อยละ 20 ของ หน้าเวบ็ สามารถดึงความสนใจของการอ่านได้ถึงร้อยละ 80 ของเวลาท่อี ยู่บนหน้าเวบ็ ไซต์ ดังน้ัน หากผู้ออกแบบเวบ็ ไซต์ทราบลักษณะการอ่านของมนุษย์จะช่วยเสริมการออกแบบ เวบ็ ไซต์ให้มปี ระสทิ ธภิ าพมากข้นึ 2.2 การออกแบบส่วนต่อประสานผู้ใช้ นักออกแบบเวบ็ ไซต์ทราบดีว่าเวลา ประมาณร้อยละ 80 ของเวลาในการกรอกฟอร์ม ถูกใช้ในการเลือกประเทศ ดังน้ัน จึงควร ออกแบบส่วนต่อประสานผู้ใช้ใหม่ โดยการกาหนดค่าโดยปริยาย (Default) ท่คี าดว่าผู้ใช้ ส่วนใหญ่จะเลือก หรืออาจมีการตรวจสอบโซนของผู้ใช้เวบ็ ผ่านทางจีพีเอส (GPS) และ กาหนดประเทศท่ผี ู้ใช้พานักลงบนฟอร์มกรอกข้อมูล ซ่ึงวิธกี ารน้ีทาให้ผู้ใช้ลดระยะเวลาใน การกรอกข้อมลู และตดั สนิ ใจกดป่ ุมสง่ ข้อมูล (Submit) เรว็ ข้นึ ด้วย ภาพท่ี 2.38 แสดงหน้าจอกรอกข้อมูลเพ่ือสมคั รบญั ชีอเี มลล์ ท่มี า: https://accounts.google.com/SignUp

55 2.3 การแสดงเน้ือหาบนโมบายไซต์จะมีพ้ืนท่จี ากัดมากกว่าหน้าจอคอมพิวเตอร์ ดังน้ัน ทมี ผู้ออกแบบเวบ็ ไซต์จะต้องใช้ทรัพยากรและความคิดมากข้ึนร้อยละ 80 ในการ ออกแบบเวบ็ ไซต์ ซ่ึงให้ผลลพั ธเ์ พียงร้อยละ 20 เทา่ น้ัน ภาพท่ี 2.39 แสดงการเปรียบเทยี บเน้อื หาบนเวบ็ ไซตแ์ ละโมบายไซต์ ท่มี า: https://www.yahoo.com/ หลกั การของหมวก 5 ช้นั หลักการของหมวก 5 ช้ัน (Five hat racks) คือ หลักการจัดเรียงเน้ือหา (Organization Information) เป็นการลาดบั เน้ือหาให้สอดรบั กบั ประสบการณผ์ ู้ใช้ ซ่ึงเป็นสง่ิ สาคัญท่ีทาให้ผู้ใช้เวบ็ สามารถรับรู้และเข้าถึงสารสนเทศท่ีต้องการได้อย่างรวดเร็ว โดย หลกั การของหมวก 5 ช้นั ประกอบไปด้วย 5 หนทางในการจดั การข้อมูล ดังน้ี 1. การจดั ขอ้ มูลตามกลุ่ม (Category) คือ การจัดเรียงข้อมูลจาแนกตามกลุ่มหรือ คุณลักษณะหลักๆ ของข้อมูล เช่น จัดเรียงแยกประเภทสนิ ค้าระหว่าง เคร่ืองใช้ไฟฟ้ า กับ เคร่ืองใช้ในครัว เป็นต้น

56 RED WINE WHITE WINE ROSE WINE ภาพท่ี 2.40 แสดงการจดั ข้อมลู ตามกล่มุ (Category) 2. การจัดขอ้ มูลตามตวั อกั ษร (Alphabet) คือ การจัดเรียงข้อมูลตามอักษรตัว แรก เช่น เรียงข้อมูลตามลาดับ A B C D ไปเร่ือยๆ เพ่ือประโยชน์ในการค้นหาและเข้าใจ ได้ง่าย ซ่ึงการเรียงตามลาดับตัวอักษรน้ี ผู้ใช้เวบ็ และผู้ออกแบบเวบ็ จะต้องมีความรู้ความ เข้าใจในภาษาและลาดบั ของอกั ษรทต่ี รงกนั และผู้ใช้ต้องมีพ้ืนฐานการอ่านอกี ด้วย Cabernet Cinsault L' Artisan Ponti Oreno Rivaner Sauvignon Syrah Rose Saint Chinian Qualitatswein Napa Valley Rheinhessen ภาพท่ี 2.41 แสดงการจดั ข้อมูลตามตวั อกั ษร (Alphabet)

57 3. การจดั ขอ้ มูลตามเวลา (Time) คอื การจัดเรียงข้อมูลตามเวลาท่กี าเนิด โดย อาจจะเรียงจากปัจจุบันไปหาอดีต หรือ จากอดีตจวบจนถึงปัจจุบัน หรือ ช่วงเวลาใดเวลา หน่ึง ท้งั น้ี การเรียงข้อมูลตามเวลา รวมถึงวัน เดือน ปี ยุค ด้วย ตัวอย่างเช่น ข่าว ซ่ึงมีการ เรียงจากปัจจุบันไปหาอดีต เน่ืองจากต้องการส่ือสารส่ิงท่เี ป็ นปัจจุบันให้แก่ผู้อ่านเวบ็ ไซต์ เป็ นต้ น VINTAGE/YEAR VINTAGE/YEAR VINTAGE/YEAR VINTAGE/YEAR VINTAGE/YEAR 2009 2011 2013 2013 2015 ภาพท่ี 2.42 แสดงการจดั ข้อมูลตามเวลา (Time) 4. การจัดขอ้ มูลตามตาแหนง่ ที่ต้งั (Location) คือ การจัดเรียงข้อมูลจาแนก ตามสถานท่ี เช่น การจาแนกด้วยตาแหน่งบนแผนท่ี การจาแนกตามท่ภี มู ิประเทศ รวมถึง การจาแนกตาแหน่งตามตาแหน่งท่ตี ้งั บนหน้าจอ หรืออุปกรณ์ ด้วย

58 France Germany USA Italy ภาพท่ี 2.43 แสดงการจดั ข้อมูลตามตาแหน่งทต่ี ้ัง (Location) 5. การจัดขอ้ มูลตามความต่อเนอื่ ง (Continuum) การจัดข้อมูลตามความ ต่อเน่ืองน้ัน มีความแตกต่างจากหนทางอ่นื เน่ืองจาก สามารถจัดข้อมูลตามความต่อเน่ือง ของหน่วยใดๆ กไ็ ด้ เช่น จัดระเบียบข้อมูลตามความสูง น้าหนัก ขนาด ร้อยละ ปริมาณ ความซับซ้อน เป็นต้น

59 ฿700.00 ฿750.00 ฿1,029.00 ฿2,419.00 ฿5,430.00 ภาพท่ี 2.44 แสดงการจดั ข้อมูลตามความต่อเน่อื ง (Continuum) ท้งั น้ี หลักการของหมวก 5 ช้ัน น้ันสามารถนามาประยุกต์ใช้ร่วมกันได้ เช่น จัด ระเบยี บข้อมลู ตามกลุ่ม (Category) และตามด้วยการจดั ตามเวลา (Time) เป็นต้น นอกจากหลักการของหมวก 5 ช้นั แล้ว ทมี ออกแบบเวบ็ ไซต์จะต้องทราบหลักการ ออกแบบลาดับการเข้าถึงข้อมูล (Access design) โดยเป็นการคานึงถึงความรวดเรว็ ในการเข้าถึง ข้อมูลท่ผี ู้ใช้ต้องการ โดยอาจใช้กฎคลิกสามคร้ัง (Three clicks rule) ซ่ึงกฎดังกล่าวเป็นการ ออกแบบลาดับการเข้าถึงข้อมูลท่ผี ู้ใช้ต้องการภายในการคลิกไม่เกิน 3 คร้ัง (3 ระดับ) ในการ ออกแบบอาจออกแบบในลักษณะของการนาทาง (Navigation) ท่มี ีในทุกๆ เวบ็ เพจ เพ่ือไม่ให้ ผู้ใช้หลงทาง โดยการออกแบบการนาทางควรมีลักษณะเรียบง่ายและมีความราบเรียบ ไม่ควรอยู่ ต่างระดับ (Keep a flat hierarchy) ดังตัวอย่างการออกแบบเวบ็ ไซต์อะเมซอน (Amazon) ท่มี ี การแสดงไฮเปอร์ลิงค์ช่ือว่า Departments ในทุกๆ หน้าเวบ็ เพจ เพ่ือแสดงการจัดหมวดหมู่ของ สนิ ค้าและบริการ การออกแบบเว็บไซต์อะเมซอนในส่วนของ Department ทาให้ผู้ใช้สามารถเข้าถึง หมวดหมู่ของสินค้าภายในการวางเมาส์ 3 คร้ัง (3 holds mouse) นอกจากน้ีส่วนของการนาทาง ยงั มีการจัดหมวดหมู่ด้วยสขี องหัวข้อ ภาพ และมีการใช้เส้นค่ัน เพ่ือความรวดเรว็ ในการตัดสินใจ ของผู้ใช้เวบ็

60 ภาพท่ี 2.45 แสดงการออกแบบการนาทางเข้าถึงข้อมูล ท่มี า: https://www.amazon.com/ สรุป ในการออกแบบเวบ็ ไซต์ท่มี ปี ระสทิ ธภิ าพมีความสอดคล้องกับประสบการณ์ของผู้ใช้ (User experience: UX) ทมี ผู้ออกแบบเวบ็ ไซต์จาเป็นต้องทราบหลักการ กฎ ทฤษฎีต่างๆ ท่ีเก่ียวข้องกับการออกแบบเว็บไซต์ ซ่ึงประกอบไปด้วย 1) ทฤษฎีเกสตอลท์กับการ ออกแบบเวบ็ ไซต์ (Gestalt theory) ท่กี ล่าวเก่ียวกบั การรับรู้ของมนุษย์ทางด้านกายภาพ เช่น รปู ร่าง (Shape) รูปแบบ (Pattern) และทา่ ทาง เป็นต้น 2) กฎของฟิ ทท์ (Fitts’s law) เป็นกฎท่เี ก่ยี วข้องกับการวัดระยะเวลาในการเคล่ือนไหว (Movement Time: MT) ปัจจุบัน ทมี ออกแบบเว็บไซต์นากฎของฟิ ทท์มาใช้ในการวิเคราะห์ปฏิสัมพันธ์ระหว่างมนุษย์กับ คอมพิวเตอร์ (Human-Computer Interaction: HCI) เพ่ือนาไปออกแบบเวบ็ ไซต์ให้มคี วาม สะดวกต่อการใช้งาน 3) กฎของฮิกซ์ (Hick’s law) เป็นกฎท่เี ก่ยี วข้องกับการวัดระยะเวลา ทผ่ี ู้ใช้ตัดสนิ ใจตอบสนองต่อตัวกระตุ้นท่มี ี ดงั น้ันทมี ผู้ออกแบบเวบ็ ไซต์ควรทราบและนากฎ ของฮิกซ์ไปใช้วัดและประเมินผลการออกแบบตัวเลือกต่างๆ บนเวบ็ ไซต์เพ่ือให้เกิดความ เรียบง่ายและตรงไปตรงมา 4) หลักการพาเรโต (Pareto principle) เป็นหลักการท่ไี ม่สมดุล แต่กส็ ามารถนามาประยุกต์ใช้ได้หลายเหตุการณ์ในการออกแบบเวบ็ ไซต์รวมถึงการบริหาร

61 โครงการเวบ็ ไซต์ด้วย 5) หลักการของหมวก 5 ช้ัน (Five hat racks) หลักการจัดเรียง เน้ือหา (Organization Information) เป็นการลาดับเน้ือหาให้สอดรับกับประสบการณ์ผู้ใช้ ซ่ึงเป็นส่งิ สาคัญท่ที าให้ผู้ใช้เวบ็ สามารถรับรู้และเข้าถึงสารสนเทศท่ตี ้องการได้อย่างรวดเรว็ โดยหลักการ กฎ และทฤษฎี ท่กี ล่าวมาน้ี เป็นแนวทางท่ที มี นักออกแบบเวบ็ ไซต์ควรทราบ และนาไปประยุกต์ใช้ในการออกแบบโครงร่างและส่วนประกอบของเวบ็ ไซต์ท้งั หมดเพ่ือให้ ส่งิ ท่ปี รากฎบนหน้าเวบ็ ไซต์เหมาะสมสาหรับผู้ใช้ท่เี ป็นกลุ่มเป้ าหมายสงู สดุ ส่งผลให้ผู้ใช้มี การใช้งานหน้าเวบ็ ไซต์ยาวนานข้ึนและไม่รู้สกึ เกิดความคุกคามในการส่อื สารผ่านเวบ็ ไซต์ มากเกนิ ไป คาถามทบทวน 1. จงอธิบายความสัมพันธ์ระหว่างการออกแบบเว็บไซต์กับทฤษฎีเกสตอลท์ (Gestalt theory) 2. ทฤษฎีเกสตอลท์ประกอบไปด้วยพ้ืนฐานของการรับรู้ของมนุษย์ 4 ประการ อะไรบ้าง จงอธบิ าย 3. กฎของฟิ ทท์ (Fitts’s law) กล่าวเก่ยี วกบั อะไร และมคี วามสาคัญอย่างไรในการ ออกแบบเวบ็ ไซตใ์ นปัจจุบัน 4. กฎของฮกิ ส์ (Hick’s law) กล่าวเก่ยี วกบั อะไร และมีความสาคัญอย่างไรในการ ออกแบบเวบ็ ไซต์ในปัจจุบนั 5. จงอธิบายความแตกต่างระหว่างกฎของฟิ ทท์ (Fitts’s law) และกฎของฮิกส์ (Hick’s law) 6. บนหน้าเวบ็ ไซต์หน่ึงประกอบไปด้วยป่ ุมซ้ือสินค้าและป่ ุมยกเลิกการซ้ือสินค้า เรียงในแนวนอน (แกน 0 องศา) โดยทง้ั 2 ป่ ุมมีขนาดความกว้าง 350 px และ มรี ะยะห่างระหว่าง 2 ป่ ุม เทา่ กบั 150 px 350 px 350 px ซ้ ือสนิ คา้ ยกเลกิ การซ้ ือสนิ คา้ 150 px

62 จงหา 6.1 ดัชนีความยาก (Index of difficulty: ID) ระหว่างป่ ุม 2 ป่ ุม 6.2 ระยะเวลาเคล่อื นไหว (Movement Time: MT) ระหว่างป่ ุม 2 ป่ ุม 7. จากภาพป่ ุมเคอร์เซอร์บนคีย์บอร์ดหน้าจอ (On screen keyboard) โดยแต่ละ ป่ ุมเป็นส่ีเหล่ียมจัตุรัส มีความยาวแต่ละด้านเท่ากับ 200 px และมี Active white space ระหว่างป่ ุมเทา่ กบั 50 px   จงหา 7.1 ดัชนีความยาก (Index of difficulty: ID) ระหว่างป่ ุม  และ  7.2 ระยะเวลาเคล่อื นไหว (Movement Time: MT) ระหว่างป่ ุม  และ  8. เวบ็ ไซต์ Google ประกอบไปด้วยตัวเลือกดังภาพ จงคานวณหาระยะเวลาท่ตี อบสนองต่อส่งิ กระตุ้น (Response Time: RT) ท้งั น้ีมี การกาหนดค่าระยะเวลาท้ังหมดท่ีใช้ในการทาความเข้าใจ (Time to understand) เท่ากับ 2 วินาที และ ระยะเวลาในการประมวลผลของแต่ละ ตัวเลือก (Cognitive Processing Time) สาหรับมนุษย์อาจกาหนดระยะเวลา เทา่ กบั 0.155 วนิ าที 9. จงอธบิ ายหลกั การพาเรโต (Pareto principle) กับการออกแบบเวบ็ ไซต์พาณิชย์ อเิ ลก็ ทรอนิกส์ (e-Commerce) ในปัจจุบัน 10.จงอธบิ ายหลักการของหมวก 5 ช้ัน (Five hat racks) กับการออกแบบเวบ็ ไซต์ จองทพ่ี ักในปัจจุบัน

63 เอกสารอา้ งอิง Accot, Johnny; Zhai, Shumin (2002). More than dotting the i's—foundations for crossing-based interfaces. Proceedings of ACM CHI 2002 Conference on Human Factors in Computing Systems: pp.73-80. Accot, Johnny; Zhai, Shumin (2003). Refining Fitts’ law models for bivariate pointing. Proceedings of ACM CHI 2003 Conference on Human Factors in Computing Systems. pp.193-200. Banerjee, J. C. (1994). Gestalt Theory of Perception. Encyclopaedic Dictionary of Psychological Terms. M.D. Publications Pvt. Ltd. pp. 107-108. Card, Stuart K.; Moran, Thomas P.; Newell, Allen (1983). The Psychology of Human–Computer Interaction. Hillsdale, NJ: L. Erlbaum Associates. Cockburn, Andy; Gutwin, Carl; Greenberg, Saul (2007). A predictive model of menu performance. Proceedings of the SIGCHI conference on Human factors in computing systems. San Jose, California. Fitts, Paul M.; Peterson, James R. (1964). Information capacity of discrete motor responses. Journal of Experimental Psychology. 67(2). pp.103-112. Geoff Hart. (2012). Gestalt theory and visual design. Retrieved 1 July 2016. URL: http://www.geoff-hart.com/articles/2012/gestalt.html Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology. 4(1). pp. 11-26. Goldstein, E. Bruce (2009). Perceiving Objects and Scenes § The Gestalt Approach to Object Perception\". Sensation and perception (8th ed.). Cengage Learning. Joel Sklar. (2015). Principles of Web Design. Joel Sklar (6th ed.). Thomson South- Western. Palmer, Stephen E. (2003). Visual Perception of Objects. In Healy, Alice F.; Proctor, Robert W.; Weiner, Irving B. Handbook of Psychology: Experimental psychology. 4. John Wiley and Sons. Rosati, L. (2013). How to design interfaces for choice: Hick-Hyman law and classification for information architecture. In Slavic, A.; Salah, A.; Davies, C.

64 Classification and visualization: interfaces to knowledge: proceedings of the International UDC Seminar. The Hague, The Netherlands. pp. 125-138. Roy, Q.; Malacria, S.; Lecolinet, E.; Guiard, Y.; Eagan, J. (2013). Augmented Letters: Mnemonic Gesture-Based Shortcuts. Proceedings of the SIGCHI conference on Human factors in computing systems. Paris, France.

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

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

67 บทที่ 3 ประสบการณผ์ ูใ้ ชเ้ บ้ อื งตน้ ในการออกแบบเวบ็ ไซต์นอกจากทฤษฎแี ละหลกั การพ้ืนฐานทส่ี าคญั ท่ไี ด้กล่าวในบท ท่ี 2 แล้ว ยังมีหัวข้อท่นี ักออกแบบเวบ็ จะต้องทราบและต้องสามารถประยุกต์ใช้ในการ ออกแบบเวบ็ ไซต์ของตนเองหรือองค์กรได้ โดยนักออกแบบเวบ็ ในปัจจุบันจะต้องคานึงถึง ประสบการณ์ของผู้เข้าใช้เวบ็ ไซต์ (User experience: UX) เพ่ือปรับปรุงเค้าร่าง (Layout) ของเวบ็ ไซต์ให้สอดคล้องกบั การรับรู้ทางสายตาและประสบการณ์เดิมของผู้ใช้เพ่ือให้เวบ็ ท่ี ออกแบบข้นึ มีความเป็นมิตรกบั ผู้ใช้อย่างเหมาะสม ในบทน้ีจึงรวบรวมหลักการและแนวคิด ท่สี าคัญในการออกแบบเว็บไซต์กับประสบการณ์ผู้ใช้ ได้แก่ หลักการสร้างมุมมองและ ความรู้สึกท่ีมีต่อเว็บไซต์ การออกแบบเว็บไซต์เชิงเอกภาพ การออกแบบเว็บกับ ประสบการณ์ผู้ใช้ หลักการออกแบบการปฏสิ มั พันธ์ และหลักการออกแบบตาแหน่ง เพ่ือให้ ผู้เรียนได้ทราบและนาไปประยุกต์ใช้ได้ รวมถึงสามารถประเมินประสบการณ์ผู้ใช้ได้อย่าง เหมาะสม การออกแบบเว็บกบั ประสบการณผ์ ูใ้ ช้ การคานึงถึงผู้ใช้เว็บเป็ นส่ิงท่ีสาคัญอย่างย่ิงในการออกแบบเว็บ ผู้ออกแบบเว็บ จะต้องทาการค้นคว้าเก่ียวกบั พฤติกรรมของผู้ใช้เวบ็ เช่น การทบทวนวรรณกรรมเก่ียวกับ พฤติกรรมการใช้เวบ็ ไซต์ การสารวจด้วยแบบสอบถาม การแลกเปล่ียนข้อมูลกับเวบ็ ไซต์ ต่างๆ เป็นต้น โดยมวี ัตถุประสงค์เพ่ือค้นหาส่งิ ท่ผี ู้ใช้เวบ็ คาดหวังจากเวบ็ ไซต์ เน่ืองจากเม่ือ ทราบความต้องการและพฤติกรรมจากผู้ใช้เวบ็ ไซต์ จึงจะสามารถประเมินวิธีการออกแบบ เวบ็ ท่สี อดคล้องกบั ประสบการณ์ผู้ใช้ได้ องค์การระหว่างประเทศว่าด้วยการกาหนดมาตรฐาน ได้นิยามคาว่า ประสบการณ์ ผู้ใช้ (User eXperience: UX) ไว้ใน ISO 9241-210:2010 หรือ มาตรฐานระหว่าง ประเทศเก่ียวกับการยศาสตร์ของการปฏิสัมพันธ์ระบบของมนุษย์ (Ergonomics of Human-System Interaction ; Part 210: Human-Centred Design for Interactive Systems) ซ่ึง ประสบการณ์ผู้ใช้ (UX) มีความหมาย คือ การรับรู้ของบุคคลและการ ตอบสนองท่เี กดิ ข้นึ จากการใช้งานผลิตภัณฑใ์ นลักษณะระบบหรือบริการ โดยประสบการณ์ การผู้ใช้งานจะรวมถึงทกุ อารมณข์ องผู้ใช้ ความเช่อื การรับรู้ การตอบสนองทางร่างกายและ จติ ใจ พฤตกิ รรมและความสาเรจ็ ท่เี กดิ ข้นึ ก่อนระหว่างและหลังการใช้งานด้วย ISO 9241-

68 210:2010 ยังระบุถึงปัจจัยท่ีมีอิทธิพลต่อประสบการณ์ผู้ใช้ คือ ระบบ (System) ผู้ใช้ (User) และบริบท (Context) ของการใช้งาน (International Organization for Standardization: ISO, 2010) สว่ นของการนาทาง (Navigation Bar) รายการลักษณะสาคัญ (Feature items) ภาพท่ี 3.1 แสดงหน้าเวบ็ เพจท่มี ีการออกแบบโดยมุ่งจุดสนใจของผู้ใช้ (User-focused Design) ท่มี า: https://www.mcdonalds.com/us/en-us.html จากรูปแสดงให้เห็นถึงการออกแบบโดยมุ่งจุดสนใจของผู้ใช้ (User-focused Design) ซ่ึงการออกแบบจะเน้นไปท่สี ่วนของการนาทาง (Navigation Bar) และ รายการ ลักษณะสาคัญ (Feature items) ทาให้ผู้ใช้สามารถเข้าใจและเข้าถึงข้อมูลของเว็บไซต์ได้ อย่างรวดเรว็ เน่ืองจากประสบการณ์เดิมของผู้ใช้ทราบดีถึงส่วนของการนาทางท่มี ีตาแหน่ง อยู่ด้านบน และ รายการลักษณะสาคัญท่ชี ัดเจน ไม่แสดงจานวนอักษรมากเกินไป มีการใช้ ขนาดของตวั อกั ษรและภาพทก่ี นิ ขนาดพ้ืนทข่ี องหน้าจอจานวนมาก รวมถึงการใช้ภาพท่ชี ่วย ส่อื ถงึ ข้อมูล ทาให้เวบ็ ไซต์สามารถดงึ จุดสนใจของผู้ใช้ได้ดี เข้าใจได้ง่าย

69 ปรากฎเน้ือหาท่สี ามารถอา่ นได้อย่าง มีการใช้ระยะห่างแบบมีสว่ นร่วม (Active สะดวก (Readable Text) White Space) ภาพท่ี 3.2 แสดงหน้าเวบ็ เพจท่มี กี ารออกแบบเชงิ กระดาษ (Paper-based Design) ท่มี า: https://academic.oup.com/comjnl/pages/Manuscript_Preparation_Submission จากรูปแสดงให้เห็นถึงหน้าเว็บเพจท่ีมีการออกแบบเชิงกระดาษ (Paper-based Design) มีการแสดงเน้ือหาท่มี ีลักษณะเป็นตัวอกั ษรจานวนมาก (Textual) ท่สี ามารถอ่าน ได้อย่างสะดวก (Readable Text) และสงั เกตไุ ด้ว่ามีการใช้ระยะห่างแบบมีส่วนร่วม (Active White Space) ช่วยให้เกดิ การแบ่งสดั ส่วนท่เี หมาะสมทาให้ผู้ใช้อ่านได้คล่องข้นึ และไม่เกิด ความร้สู กึ อดึ อดั การเลือกแนวทางในการออกแบบเวบ็ ไซต์จะต้องพิจารณาถึงพฤติกรรมผู้ใช้ เน้ือหา และส่ิงท่ีต้ องการส่ือสารกับผู้ใช้ เพ่ือให้ ผู้ใช้ สามารถเข้ าถึงข้ อมูลและสารสนเทศได้ อย่ าง รวดเรว็ ชัดเจน เข้าใจได้ถูกต้องตรงกนั และสร้างประสบการณท์ ่ดี ีให้แก่ผู้ใช้

70 หลกั การสรา้ งมุมมองและความรูส้ ึกที่มีต่อเว็บไซต์ 1. ความสมดุลระหว่างการออกแบบและเน้ือหา (Balance Design and Content) เป็ นส่วนสาคัญท่ีผู้ออกแบบและพัฒนาเว็บไซต์จะต้องคานึงถึงเน้ือหา (Content) ท่จี ะ นาเสนอ และคานึงถึงความต้องการของผู้ใช้เวบ็ ไซต์ (Need) ซ่ึงนาไปส่แู นวทางในการ ตัดสนิ ใจท่จี ะออกแบบเวบ็ ไซต์ไปในมุมมองหรือลักษณะใด ในการออกแบบเวบ็ ไซต์น้ันจะ ประกอบไปด้วยทมี งานหลายคน โดยในแต่ละคนจะมีมุมมองและความเช่ือม่ันในความคิด ของตนเองเป็ นสาคัญ ดังน้ันการหาสมดุลระหว่างการออกแบบและเน้ือหาจึงจาเป็ นต้อง ประชุมผู้มีสว่ นได้สว่ นเสยี เพ่ือการมีส่วนร่วมในการออกแบบเวบ็ ไซต์ การออกแบบเว็บไซต์ควรส่งเสริมเน้ือหาและสนับสนุนผู้อ่าน การออกแบบ เน้ือหาข้อมูลบนเวบ็ ควรจะแบ่งออกหรือจัดกลุ่มอย่างมีเหตุผลและมีโครงสร้าง รวมถึงการ ออกแบบระบบนาทางเน้ือหาบนเวบ็ ให้ชัดเจนและเข้าใจได้ง่าย ผู้ออกแบบเวบ็ ในปัจจุบัน มักจะเลือกใช้การออกแบบเวบ็ ท่เี รียบง่ายและแสดงเน้ือหาอย่างตรงไปตรงมา ทาให้ง่ายต่อ การเข้าถึงและไม่มีความจาเป็นท่จี ะต้องออกแบบเวบ็ ให้มีความซับซ้อนหรือใช้เทคโนโลยีท่ี ไม่สอดคล้องกบั ประสบการณ์ผู้ใช้ ดังน้ัน ความสมดุลระหว่างการออกแบบและเน้อื หาเป็นสว่ นสาคญั ท่ตี ้องวิเคราะห์ และแลกเปล่ียนประสบการณ์ระหว่างทมี พัฒนา ลูกค้า และผู้ใช้อย่างสม่าเสมอ เพ่ือให้เกิด ความสมดุลระหว่างการออกแบบและเน้ือหาบนเวบ็ ไซตน์ ่ันเอง 2. วางแผนเพ่ือความสะดวกในการเข้าถึงข้อมูล (Plan for Easy Access to Information) เป็นปัจจัยท่สี าคัญและมีอิทธพิ ลต่อความสาเร็จของเวบ็ ไซต์ เพราะเป็นการ กาหนดวิธกี ารท่ผี ู้ใช้สามารถเข้าถึงเน้ือหาเวบ็ ได้อย่างง่ายดาย เป้ าหมายของวางแผนเพ่ือ ความสะดวกในการเข้าถงึ ข้อมลู คือ การจดั ระเบียบเน้ือหาของเวบ็ ไซต์ การนาเสนอท่เี ข้าใจ ได้ง่าย และมีเซต็ การนาทางท่เี หมาะสมทาให้ผู้ใช้ไม่ต้องเสียเวลาในการตรวจดูสารวจการ เข้าถงึ ข้อมูลบนหน้าเวบ็ ไซต์ (Quests for Information) ผู้เข้าชมเว็บไซต์อาจเรียกดูแบบสุ่มหรือมองหาข้อมูลท่เี ฉพาะเจาะจง โดยผู้ใช้ มักจะมาถึงท่หี น้าเวบ็ ไซตแ์ ละมองหาข้อมูลท่อี ยู่ในระดับต่ากว่าลาดับช้ันของข้อมูลท่ปี รากฎ ในหน้าแรก เช่น ข้อมูลการติดต่อ การสนับสนุนผลิตภัณฑ์ หรือไฟล์ท่ตี ้องการท่จี ะดาวน์ โหลด เป็นต้น ซ่ึงจะเหน็ ได้ว่าข้อมูลเหล่าน้ีจะไม่อยู่ในหน้าเวบ็ เพจแรก แต่จะต้องคลิกลิงค์ เพ่ือเช่อื มโยงไปยังหน้าเพจถัดไป ดังน้ันผู้ออกแบบเวบ็ จะต้องคาดการณ์และวางแผนเส้นทางท่ีผู้ใช้มีแนวโน้มจะ เข้าถึงข้อมูลท่อี ยู่ในความต้องการมากท่ีสุด โดยให้มีการเช่ือมโยงโดยตรงไปยังพ้ืนท่ีหรือ หน้าเวบ็ น้ันๆ หรือมีการนาเสนอช่องการค้นหาและแผนท่เี วบ็ ไซต์เพ่ือค้นหาเน้ือหาท่ผี ู้ใช้

71 ต้องการ นอกจากน้ีการสอบถามผู้ดูแลระบบแม่ข่ายเพ่ือตรวจสอบว่าหน้าเวบ็ เพจใดมีความ ต้องการสงู สดุ กส็ ามารถนาไปใช้ออกแบบการนาทางเวบ็ ทาให้ผู้ใช้สามารถเข้าถงึ ข้อมลู ได้ง่าย และมีประสทิ ธภิ าพ 3. การนาเสนอข้อมูลท่ชี ัดเจน (Clear Presentation of Information) ถึงแม้ว่า พัฒนาการของเทคโนโลยีแสดงผลจอภาพจะมีความรุดหน้า สามารถแสดงข้อมูลได้อย่าง คมชัด แต่ก็ยังคงมีปัจจัยท่ีส่งผลกระทบต่อการอ่านข้ อมูล น่ันคือ ปัจจัยทางด้ าน สภาพแวดล้อม เช่น แสงจ้าโดยรอบ ระยะห่างระหว่างสายตาและจอภาพ เป็นต้น ซ่ึงส่งผล กระทบต่อการอ่านของผู้ใช้เว็บ ตัวอย่างเช่น เม่ือผู้ใช้เข้าถึงเว็บโดยการใช้จอภาพจาก อุปกรณ์เคล่ือนท่ี จะเกิดระยะห่างระหว่างสายตากับระยะในการถืออุปกรณ์ ซ่ึงจะเกิดการ ส่ายไปมาไม่คงท่ี และในบางสภาวะไม่สามารถควบคุมความคงท่ขี องการถืออุปกรณ์ หรือ การขยับร่างกายไปมาระหว่างการอ่านเวบ็ ไซต์ ดังน้ัน การวางแผนเพ่ือการนาเสนอข้อมูลท่ี ชดั เจนเป็นส่วนสาคัญท่ที าให้ผู้ใช้เกดิ ประสบการณ์ท่ดี ีและสามารถจดจ่อกับข้อมูลท่ปี รากฎ บนเวบ็ ไซต์ได้ไม่ว่าจะเข้าถึงด้วยอุปกรณ์ชนิดใดหรือเกิดการขยับร่างกายระหว่างการอ่าน ข้อมูล ซ่งึ นักออกแบบเวบ็ ไซตจ์ ะต้องให้ความสาคัญกบั การออกแบบความชัดเจนให้เกิดกบั เวบ็ ไซต์ เวบ็ ไซต์จานวนมากประสบความล้มเหลวในการออกแบบเวบ็ ไซต์ เน่ืองจากขาด ความใส่ใจและมคี วามไม่เข้าใจเก่ยี วกบั ความชัดเจนของการนาเสนอข้อมูลอย่างถ่องแท้ เช่น การใช้ลักษณะตัวพิมพ์ (Typography) ท่หี ลากหลายมากเกินไป การใช้สกี ับอกั ษรโดยไม่ คานึงถงึ ความหมาย สพี ้ืนหลัง (Background) ทไ่ี ม่ส่งผลให้อกั ษรมีความเด่น และการเสนอ ข้อมลู ด้วยอกั ษรทม่ี ีประโยคยาวเกนิ ไปโดยไม่คานึงถงึ จุดหยุด (Breakpoint) ในการนาเสนอ ข้อมูลทาให้ผู้อ่านเกดิ ความสบั สนและอาจเกดิ ทศั นคติทไ่ี ม่ดีต่อเวบ็ ไซต์ได้ การใช้ลกั ษณะอกั ษร สขี องอกั ษร พ้ืนหลงั ทล่ี งตวั การแบ่งข้อความให้เป็นสดั สว่ น ท่ชี ัดเจนเหมาะสม รวมถึงการใช้ประโยชน์จากพ้ืนท่วี ่างสขี าว (White Space) สาหรับการ แยกเน้ือหาหรือจัดโครงสร้างบนหน้าเวบ็ ไซตก์ จ็ ะช่วยให้การอ่านข้อมูลมคี วามสะดวกรวดเรว็ มากข้นึ ผู้ออกแบบเวบ็ ไซต์จะต้องคานึงถึงความแตกต่างระหว่างบุคคล ผู้เข้าชมเวบ็ ไซต์ แต่ละคนมีประสบการณ์และอุปนิสยั (Characterologic Pattern) ในการอ่านแตกต่างกัน และเม่ือเปรียบเทียบการอ่านข้อมูลในกระดาษ (Hard Copy) กับ การอ่านข้อมูลแบบ ออนไลน์ (Soft Copy) เช่น หน้าเวบ็ ไซต์ เป็ นต้น พบว่า ผู้อ่านบนส่ือออนไลน์จะมี พฤติกรรมการอ่านไม่มาก (Read Less) หรือ อ่านแบบคร่าว (Scanning Reading) และมี การเล่ือนผ่านข้อความอย่างรวดเรว็ (Quick Scrolling) นอกจากน้ีการแบ่งแยกหัวข้อท่ี

72 ชัดเจน จะช่วยให้ผู้อ่านสามารถสังเกตุหัวข้อท่ีต้องการและหยุดการเล่ือนผ่านได้อย่าง ทนั เวลา เคร่อื งมอื ค้นหา (Search Tool) เลือกใช้ลักษณะอกั ษรท่ี ชัดเจน มีการจาแนกสอี กั ษร เพ่ือสอ่ื ถึงลิงค์ เมนูและการนาทาง (Menu and Navigation) ใช้พ้ืนท่วี ่างเพ่ือแยกเน้ือหา ให้ได้สดั สว่ น (Active White Space) ภาพท่ี 3.3 แสดงการออกแบบตามหลกั การสร้างมมุ มองและความร้สู กึ ท่มี ตี ่อเวบ็ ไซต์ ท่มี า: http://www.pewresearch.org/ การออกแบบเว็บไซตเ์ ชิงเอกภาพ ในการออกแบบเวบ็ ไซต์เชิงเอกภาพ (Unified Site Design) จะต้องทาการวางแผน เก่ยี วกบั ลักษณะของเวบ็ ไซต์ (Themes) และโครงสร้างของเวบ็ ไซต์ (Structure) ให้เป็นไป ในแนวทางเดียวกันในทุกๆ เวบ็ เพจ โดยใช้สี ลักษณะอักษรและโครงร่างเวบ็ ผสมผสานกนั เพ่ือส่อื สารและถ่ายทอด (Convey) ให้ผู้ใช้เวบ็ ไซต์เกดิ ความประทบั ใจและจดจาเวบ็ ไซต์ได้ 1. ความเป็นเอกภาพทางด้านการเปล่ียนถ่ายหน้าเวบ็ (Smooth Transitions) การ เปล่ยี นถ่ายหน้าเวบ็ หมายถึง การทผ่ี ู้ใช้คลกิ ลงิ ค์หรือเมนูเพ่ือไปยังหน้าเวบ็ เพจถัดไป ซ่ึงใน การออกแบบเวบ็ ไซต์เชิงเอกภาพน้ัน จาเป็ นต้องคานึงถึงการเปล่ียนถ่ายหน้าเว็บให้เกิด ความราบร่ืนและไม่สร้างความสบั สนให้แก่ผู้ใช้ โดนมีหลักการในการออกแบบการเปล่ียน ถ่ายหน้าเวบ็ ดงั น้ี 1) เลือกใช้องค์ประกอบและภาพลักษณ์เดียวกันท้งั เวบ็ ไซต์ เช่น สขี องอักษร สญั ลักษณ์ สพี ้ืนหลัง เส้นสีของกรอบข้อความ ความหนาบางของกรอบข้อความ เป็ นต้น

73 นอกจากน้ียังเป็ นประโยชน์ในการออกแบบเวบ็ เพจในระดับช้ันถัดไปได้อย่างมีเอกภาพ (Unified Hierarchy) 2) จัดตาแหน่งส่วนประกอบในการนาทาง (Navigation) ให้เห็นได้ชัด (Obvious Section) และให้มีลักษณะเดียวกันท้งั เวบ็ ไซต์ (Keep Consistent) โดยผู้ใช้จะ เกิดการปรับประสบการณ์เก่ียวกับทศิ ทางในการท่องเว็บไซต์ได้อย่างรวดเร็วและไม่เกิด ความสบั สนในการเข้าถึงข้อมูล 3) หลีกเล่ียงการใช้กราฟิ กท่ีซับซ้อนหรือใช้กราฟิ กเคล่ือนไหวท่ฟี ่ ุมเฟื อย เน่ืองจากบ่นั ทอนประสบการณ์ผู้ใช้เก่ยี วกบั การร้จู าทศิ ทางการนาทางในเวบ็ ไซต์ สว่ นของการนาทางอยู่ แถบด้านบนของเวบ็ ไซต์ สว่ นของการนาทางใน ระดบั ต่ากว่า มกี ารแสดง ภาพกราฟิ กลายเส้น พ้ืนฐาน ประกอบกบั ข้อความ มกี ารใช้สขี อง Mouse Over การนาทางโดยการดงึ ดดู สายตาผ้ใู ช้ Link ไปในทศิ ทางเดยี วกนั กบั เวบ็ ให้เกดิ ความสนใจเก่ยี วกบั สขี องตราสญั ลักษณ์ จุดเด่นของผลิตภณั ฑท์ ่จี าหน่าย ภาพท่ี 3.4 แสดงส่วนประกอบของการนาทางระดบั ต้นในเวบ็ ไซต์ ทม่ี า: http://www.ray-ban.com/

74 สว่ นของการนาทางยังคงอยู่ แถบด้านบนของเวบ็ ไซต์ การนาทางในระดบั ต่ากว่า ยังคงมลี ักษณะเดยี วกนั กบั การนาทางระดบั ต้น ภาพท่ี 3.5 แสดงสว่ นประกอบของการนาทางระดบั ล่างในเวบ็ ไซต์ ทม่ี า: http://www.ray-ban.com/thailand/the-lab#-memo-ray 2. การใช้ตาข่ายข้อมูลช่วยวางโครงร่างของเวบ็ เพจ (Use a Grid to Provide Visual Structure) โดยตาข่ายข้อมลู หรือ Grid มีลักษณะเป็นตารางประเภทหน่ึงท่มี ีจุดมุ่งหมายใน การวางโครงร่าง (Layout) ของเวบ็ ไซต์ ต่างจากตารางข้อมูล (Table) ท่มี ีไว้สาหรับแสดง ข้อมลู เทา่ น้ัน การใช้ตาข่ายข้อมูลในการวางโครงร่างของเวบ็ น้ัน มีหลายลักษณะ เช่น การใช้ แนวคิดแบบตาข่าย 4 คอลัมน์ หรือ 6 คอลัมน์ เป็นต้น แต่ในปัจจุบันท่นี ิยมใช้ในแนวคิด แบ บต าข่ าย 1 2 คอ ลัม น์ ใ น ก าร ช่ ว ยว า งโ คร งร่ าง ขอ งเ ว็บ เพ จ (อ้ า งอิงจ า ก https://getbootstrap.com/examples/grid/) เพ่ือใช้เป็นกรอบแนวคิดหลัก (Framework) ในการออกแบบเวบ็ ไซต์ Col-1 Col-1 Col-1 Col-1 Col-1 Col-1 Col-1 Col-1 Col-1 Col-1 Col-1 Col-1 8.33 8.33 8.33 8.33 8.33 8.33 8.33 8.33 8.33 8.33 8.33 8.33 %%%%%%%%%%%% ภาพท่ี 3.6 แสดงตาข่ายคอลมั น์สาหรับการออกแบบเวบ็ ไซต์ คอลัมน์ ี่ท 1 คอลัมน์ ี่ท 2 คอลัมน์ ี่ท 3 คอลัมน์ ี่ท 4 คอลัมน์ ีท่ 5 คอลัมน์ ีท่ 6 คอลัมน์ ี่ท 7 คอลัมน์ ีท่ 8 คอลัมน์ ีท่ 9 คอลัมน์ ีท่ 10 คอลัมน์ ี่ท 11 คอลัมน์ ีท่ 12

75 คอลัมน์ ีท่ 1 คอลัมน์ ีท่ 2 คอลัมน์ ีท่ 3 คอลัมน์ ีท่ 4 คอลัมน์ ีท่ 5 คอลัมน์ ีท่ 6 คอลัมน์ ีท่ 7 คอลัมน์ ีท่ 8 คอลัมน์ ีท่ 9 คอลัมน์ ีท่ 10 คอลัมน์ ีท่ 11 คอลัมน์ ีท่ 12 Col-3 Col-3 Col-3 Col-3 25% 25% 25% 25% ภาพท่ี 3.7 แสดงตาข่ายคอลัมน์สาหรบั การออกแบบเวบ็ ไซตป์ ระเภทรวม 3 คอลัมน์ Col-6 Col-6 50% 50% ภาพท่ี 3.8 แสดงตาข่ายคอลมั น์สาหรบั การออกแบบเวบ็ ไซตป์ ระเภทรวม 6 คอลัมน์ Col-1 Col-10 คอลัมน์ ีท่ 1 คอลัมน์ ีท่ 2 คอลัมน์ ีท่ 3 คอลัมน์ ีท่ 4 คอลัมน์ ีท่ 5 คอลัมน์ ีท่ 6 คอลัมน์ ีท่ 7 คอลัมน์ ีท่ 8 คอลัมน์ ีท่ 9 คอลัมน์ ีท่ 10 คอลัมน์ ีท่ 11 คอลัมน์ ีท่ 12 Col-3 ภาพท่ี 3.9 แสดงตาข่ายคอลมั น์สาหรับการออกแบบเวบ็ ไซต์ ทม่ี า: https://www.apple.com/

76 3. การใช้งานช่องระยะห่าง (Use Active White Space) หรือ ทอ่ (Gutter) ช่วยให้ การนาเสนอข้อมูลบนเวบ็ ไซต์มีการจัดกลุ่มหรือจาแนกข้อมูลออกจากกัน ทาให้เกิดความ ชัดเจนในการรับข้อมูลมากข้นึ การใช้ช่องระยะห่างสขี าว หรือ White Space น้ัน แท้จริงไม่ จาเป็นต้องเป็นระยะห่างสขี าวเพียงอย่างเดียว อาจเป็นสขี องพ้ืนหลังท่มี ีความแตกต่างจาก กล่องข้อความอย่างชัดเจน ระยะห่างทป่ี รากฎบนเวบ็ เพจมี 2 ลักษณะ ดงั น้ี 1) ระยะห่างแบบมีส่วนร่วม (Active White Space) คือ ระยะห่างท่เี ป็ น ประโยชน์ต่อการจาแนกส่วนประกอบท่ปี รากฎในหน้าเวบ็ เพจ ทาให้ผู้ใช้อ่านข้อมลู ได้สะดวก ชดั เจน 2) ระยะห่างแบบไม่มีส่วนร่วม (Passive White Space) คือ ระยะห่างท่ไี ร้ ประโยชน์ อาจเกิดจากหลายกรณี เช่น การจัดเรียงโครงร่างของเว็บท่ีไม่คานึงถึงพ้ืนท่ี ท้งั หมด การทข่ี ้อมลู ในแต่ละหน้าเวบ็ เพจมีขนาดไม่เทา่ กนั ทาให้เกดิ พ้ืนท่วี ่างข้นึ ได้ เป็นต้น ระยะห่างแบบมี ส่วนร่วม (Active White Space) ใช้ จาแนกการนา ทางออกจาก เน้อื หา ระยะห่างแบบมสี ว่ นร่วม (Active White Space) ระยะห่างแบบมสี ่วนร่วม (Active White ใช้จาแนกหัวข้อย่อย (Section Heading) Space) ใช้จาแนกเน้ือหาหลกั (Main ภาพท่ี 3.10 แสดงระยะห่างแบบมีสว่ นร่วม Section) ท่มี า: http://www.ebay.com/

77 ระยะห่างแบบไม่มสี ่วนร่วม (Passive White Space) ภาพท่ี 3.11 แสดงระยะห่างแบบไม่มีสว่ นร่วม ทม่ี า: https://en.wikipedia.org/wiki/China การใช้หลักการตาข่ายข้อมูลแบบ 12 คอลัมน์ ยังมีการกาหนดขนาดพ้ืนท่คี วาม กว้างท่ดี ีท่สี ดุ คือ 960 พิกเซล (Pixels) เน่ืองจากสามารถแสดงผลได้ดีในจอภาพขนาด 1024 x 768 พิกเซล ข้นึ ไป โดยตาข่ายข้อมูลแบบ 12 คอลัมน์ 960 พิกเซล จะมีช่องว่าง ระยะห่างระหว่างแต่ละคอลัมน์ท่เี รียกว่า “ท่อ” (Gutter) ท่มี ีขนาด 14 พิกเซล และแต่ละ คอลัมน์จะมขี นาด 68 พิกเซล ดงั ภาพ ช่องระยะห่าง (Use Active White Space) หรอื ทอ่ (Gutter) ภาพท่ี 3.12 แสดงตาข่ายข้อมลู แบบ 12 คอลมั น์ 960 พิกเซล ท่มี า: http://uxmovement.com/wp-content/uploads/2010/12/970grid.png

78 ภาพท่ี 3.13 แสดงการออกแบบเค้าร่างเวบ็ ด้วยตาข่ายข้อมูลแบบ 12 คอลมั น์ 960 พิกเซล ท่มี า: http://uxmovement.com/wp-content/uploads/2010/12/navigations.png หลกั การออกแบบการปฏิสมั พนั ธ์ หลักการออกแบบการปฏิสัมพันธ์ (Interaction Design) เป็ นส่ิงสาคัญในการ ออกแบบเวบ็ ไซต์ โดยจะต้องพิจารณาว่าผู้ใช้งานจะมีการปฏสิ มั พันธ์ใดกับเว็บไซต์ ซ่ึงจะ เช่อื มโยงไปยังการออกแบบเน้ือหาบนเวบ็ ไซต์อกี ด้วย การปฏสิ มั พันธม์ ีหลายลักษณะ เช่น การอ่านเอาความ (Reading for main idea) การอ่านแบบคร่าว (Scanning Reading) การใช้เสยี งเตือน (Alerting sound) การกระพริบ (Blinking) การเคล่ือนไหว (Movement) การเล่ือน (Scrolling) การหมุนแกนอุปกรณ์ (Orientation) การขยายอักษร (Text Sizing) และการปฏิสัมพันธ์กับไฮเปอร์ลิงค์ (Hyperlink) เป็นต้น ซ่ึงในการออกแบบเวบ็ ไซต์อาจมีข้อพิจารณาดังน้ี 1) ไฮเปอร์ลิงค์ของบทความควรแยกตามหมวดหมู่ท่ชี ัดเจน อาจมีลักษณะเป็ น บลอ็ ค (Blocked) หรือ มภี าพขนาดย่อ (Thumbnail) เพ่ือให้คลิกหรือแตะได้อย่างสะดวก

79 2) ในส่วนของตัวบทความ ข้อความหรือตัวอักษรมีขนาดท่เี หมาะสม ไม่เลก็ หรือ ใหญ่จนเกินไป และพิจารณาลักษณะของตัวพิมพ์ (Typography) ท่อี ่านได้อย่างสะดวก ไม่ กากวม 3) การเลือกใช้ย่อหน้า (Paragraph) อย่างเหมาะสม ไม่บรรจุอักษรเน้ือหามาก เกนิ ไป เพ่ือช่วยให้ผู้อ่านสามารถอ่านแบบคร่าวได้อย่างรวดเรว็ 4) มีการแบ่งคอลัมน์ (Column) ท่เี หมาะสมกบั เน้ือหา ท้งั น้ีไม่ควรเกิน 3 คอลัมน์ สาหรับหน้าจอคอมพิวเตอร์ส่วนบุคคล และไม่ควรเกิน 2 คอลัมน์สาหรับหน้าจอโทรศัพท์ สมาร์ทโฟน 5) คานึงถึงจุดหยุดในแต่ละบรรทดั หรือท่เี รียกว่า จุดเบรคพอยต์ (Breakpoint) เช่น ความยาวของข้อความในหน่ึงแถวควรมไี ม่เกนิ 8 คา เน่ืองจากประสบการณ์ผู้ใช้เวบ็ จะ มีลักษณะการอ่านแบบคร่าว (Scanning) 6) มีการใช้ระยะห่างแบบมีส่วนร่วม (Active White Space) ในการแยกเน้ือหา (Content) ภาพ (Image) และไฮเปอร์ลิงค์ (Hyperlink) 7) ในบทความไม่ควรมีการกระพริบข้อความหรือภาพ เน่ืองจากทาให้ผู้อ่านเกิด อาการไขว้เขวได้ และ อาจก่อให้เกิดอาการชัก (Seizure) ได้ในผู้ใช้บางราย (ราชกิจจา นุเบกษา, 2555) (W3C, 2008) 8) สพี ้ืนหลัง (Background) และสพี ้ืนหน้า (Foreground) ควรมีการเปรียบต่าง (Contrast) ท่ีชัดเจน เช่น ตามมาตรฐาน WCAG2.0 กาหนดอัตราการเปรียบต่าง (Contrast Ratio) ไว้ท่ี 4.5:1 ในระดับ AA และ 7:1 ในระดบั AAA (W3C, 2008) ภาพท่ี 3.14 แสดงการแสดงผลเน้ือหาบนเวบ็ ไซต์สารานุกรมออนไลน์ Wikipedia ท่มี า: https://en.wikipedia.org/wiki/Desktop_computer

80 เคร่ืองมอื สาหรับการปรับลักษณะของเน้ือหา ภาพท่ี 3.15 แสดงเคร่อื งมือการปรบั ลกั ษณะเน้อื หาบนหน้าเวบ็ เพจ ทม่ี า: https://www.wikiwand.com/en/Desktop_computer จากรูปแสดงตัวอย่ างของเว็บไซต์ท่ีได้ ออกแบบส่วนของปฏิสัมพั นธ์ได้ อย่ าง เหมาะสม โดยเว็บไซต์ Wikiwand เป็ นเว็บไซต์ท่ใี ช้ข้อมูลเน้ือหาจากเว็บไซต์สารานุกรม ออนไลน์ Wikipedia แต่เน่ืองจากเวบ็ ไซต์สารานุกรมออนไลน์ Wikipedia มีลักษณะการ แสดงผลท่ไี ม่สอดคล้องกับประสบการณ์ผู้ใช้ ทาให้เกดิ เวบ็ ไซต์ Wikiwand ท่ที าหน้าท่สี กัด ข้อมลู เน้ือหาจากเวบ็ ไซตส์ ารานุกรมออนไลน์ Wikipedia มาใช้ และทาการปรับลักษณะของ เน้ือหาท่นี ามาน้ันให้เข้ากับประสบการณ์ผู้ใช้หรือผู้อ่านให้สะดวกข้ึน การเพ่ิมเคร่ืองมือ สาหรับการเปล่ียนลักษณะเน้ือหาให้ผู้ใช้สามารถปฏิสมั พันธ์กับหน้าเวบ็ ไซต์ได้ เช่น การ เปล่ียนลักษณะของอักษรได้ การเปล่ียนสขี องพ้ืนหลัง การเปล่ียนขนาดของอักษร การจัด เค้าร่างของเน้ือหา เป็นต้น

81 ภาพท่ี 3.16 แสดงการเปรียบเทยี บการนาเมาสว์ างเหนือลงิ ค์ (Mouse Over Hyperlink) จากรูปเป็นการเปรียบเทยี บการนาเมาสว์ างเหนือลิงค์ (Mouse Over Hyperlink) สงั เกตุได้ว่าการแสดงผลเน้ือหาบนเวบ็ ไซต์ Wikiwand กบั Wikipedia มีความแตกต่างกัน โดย Wikiwand มีการปฏสิ มั พันธก์ บั ผู้ใช้โดยมีการแสดงป๊ อปอพั (Popup) ขยายความคาท่ี ถูกเมาสช์ ้ี ในขณะท่ี Wikipedia จะแสดงเคลด็ ลับเคร่ืองมือ (Tooltip) ทม่ี ีลกั ษณะป้ ายเลก็ ๆ เทา่ น้ัน จึงแสดงให้เหน็ ถึงการออกแบบเวบ็ ไซตท์ ม่ี แี นวคดิ แตกต่างกนั โดยกล่มุ ผู้ใช้เวบ็ ไซต์ ทง้ั สองเวบ็ ไซต์น้ันมีวัตถุประสงค์หลกั คอื การค้นหาเน้ือหา คาอธบิ าย และแหล่งการอ้างอิง เพ่ือศึกษาหรือใช้เป็นแหล่งความรู้ด้านต่างๆ แต่เวบ็ ไซต์ Wikiwand มองเหน็ โอกาสในการ แสดงผลข้อมูลเน้ือหาให้สอดรับกบั ประสบการณ์ผู้ใช้มากข้นึ

82 หลกั การออกแบบตาแหน่ง หลกั การออกแบบตาแหน่ง (Location Design) คอื การพิจารณาตาแหน่งในการจัด วางข้อมลู และสารสนเทศท่สี อดคล้องกับพฤติกรรมหรือประสบการณ์ผู้ใช้ โดยท่มี นุษย์จะมี การสงั เกตอุ ย่างรวดเรว็ เพ่ือจาแนกลกั ษณะของตาแหน่งและสดั ส่วนของการจัดวางข้อมูลบน หน้าเวบ็ ไซต์ หรือท่เี รียกว่า โครงร่าง (Layout) ก่อนการเคล่ือนไหวสายตาเพ่ืออ่านหรือหา ข้อมูลทต่ี ้องการ ดังน้ันการออกแบบเวบ็ ไซต์ท่มี ีประสทิ ธภิ าพ ผู้ออกแบบเวบ็ ไซต์จึงมีความ จาเป็นท่จี ะต้องทราบพ้ืนทท่ี ม่ี นุษย์จะให้ความสนใจ (Areas of interest: AOI) ภาพท่ี 3.17 แสดงแผนภาพกูเทนแบร์ก (Gutenberg Diagram) ท่มี า: https://business.uow.edu.au/content/groups/public/@web/@bus/documents/ doc/uow223875.pdf

83 ภาพท่ี 3.18 แสดงแว่นตาท่ใี ช้ในการวิจยั การเคล่อื นไหวดวงตาของมนุษย์ ในการอ่านหรอื มองดูข้อมลู (Tobii Glasses 2) ท่มี า: https://www.objectiveexperience.com.au/eye-tracking ภาพท่ี 3.19 แสดงอปุ กรณแ์ ลป็ เคล่ือนท่ใี ช้ในการวิจยั การเคล่อื นไหวดวงตาของมนุษย์ ในการอ่านหรอื มองดูข้อมลู (Tobii X2 Eye Tracker – Portable Lab) ท่มี า: https://www.objectiveexperience.com.au/eye-tracking จากการศึกษาการเคล่อื นไหวของดวงตามนุษย์ (Eye tracking) ในการอ่าน พบว่ามี การอธบิ ายการเคล่อื นไหวด้วยแผนภาพกูเทนแบร์ก (Gutenberg Diagram) โดยท่แี ผนภาพ กูเทนแบร์กถูกนาเสนอโดยเอด็ มัน อาร์โนน (Edmund Arnold) ในช่วงระหว่างปี ค.ศ. 1950-1978 แผนภาพดังกล่าวแสดงให้เหน็ ว่าผู้อ่านท่มี าจากทางตะวันตกมักจะเร่ิมสงั เกตุ จากด้านบนซ้าย (Top left) หรือบริเวณการมองเห็นปฐมภูมิ (Primary Optical Area:

84 POA) และเพ่งเลง็ ไปยังทางด้านล่างขวา (Bottom right) หรือบริเวณปลายสดุ การมอง (Terminal Area: TA) ทิศทางระหว่างบริเวณ POA ไปยังบริเวณ TA เรียกว่า แรงโน้มถ่วงการอ่าน (Reading gravity) ซ่ึงเป็นพฤติกรรมท่เี กดิ ในผู้ท่อี ่านจากซ้ายไปขวาเคล่ือนไหวสายตาตาม แกนแนวนอน (Horizontal movement) และโน้มเอียงไปเร่ือยๆ ในแนวแทยง ซ่ึงแรงโน้ม ถ่วงการอ่านก่อให้เกดิ บริเวณมุมอบั (Fallow zone) น่ันเอง พฤติกรรมของผู้อ่านจะให้ความสนใจกบั บริเวณมมุ อบั ด้วย โดยมุมอบั จะมีอยู่ 2 จุด จุดแรกเรียกว่า บริเวณจุดอบั เข้มแขง็ (Strong fallow zone) ซ่ึงอยู่บริเวณด้านบนขวา (Top right) และจุดท่สี องเรียกว่า บริเวณจุดอับอ่อนแอ (Weak fallow zone) ซ่ึงอยู่บริเวณ ด้านล่างซ้าย (Bottom left) โดยพฤติกรรมผู้อ่านจะให้ความสนใจบริเวณจุดอับเข้มแขง็ มากกว่าบริเวณจุดอบั อ่อนแอ นอกจากน้ีแนวคดิ ทไ่ี ด้จากแผนภาพกูเทนแบร์ก (Gutenberg Diagram) ยังสามารถ นาไปอธบิ ายลักษณะพฤติกรรมการอ่านของมนุษยไ์ ด้อกี หลายลักษณะ ดังน้ี 1. การอ่านแบบโครงร่าง Z (Z-Layout) หรือ การอ่านตามรูปแบบ S กลับด้าน (Reverse S pattern) เป็นพฤติกรรมการอ่านแบบทว่ั ไปของมนุษย์ มีลกั ษณะการเคล่ือนไหว สายตาจากซ้ายไปทางขวาในแถบบรรทัดแรก จากน้ันในแถบบรรทัดท่ีสองก็จะเร่ิม เคล่อื นไหวสายตาจากซ้ายไปขวาเช่นเดยี วกนั โดยเคล่อื นไหวสายตาในลักษณะน้ีไปเร่ือยๆ การอ่านแบบโครงร่าง Z จะมีความแตกต่างกับแผนภาพกูเทนแบร์กเลก็ น้อย แต่ หลักๆ แล้วยังคงเร่ิมเพ่งเล็งในบริเวณด้านบนซ้าย และ ส้ินสุดท่ีบริเวณล่างขวา ซ่ึง สอดคล้องกบั แนวคิดของแผนภาพกูเทนแบร์ก ภาพท่ี 3.20 แสดงทศิ ทางการอ่านแบบโครงร่าง Z (Z-Layout) ทม่ี า: http://vanseodesign.com/web-design/3-design-layouts/

85 ภาพท่ี 3.21 แสดงตวั อย่างเวบ็ ไซตท์ ่มี ีลักษณะโครงร่าง Z (Z-Layout) ท่มี า: http://www.vogue.com/ 2. การอ่านแบบโครงร่างซิกแซก็ (Zig-Zag reading pattern) มีลักษณะท่ขี ยายต่อ จากการอ่านแบบโครงร่าง Z (Z-Layout) โดยการอ่านแบบโครงร่างซิกแซก็ จะเกิดกบั หน้า เว็บไซต์ท่ีเน้ นการแสดงผลข้ อความและมีลักษณะโครงร่างเว็บแนวด่ิง (Vertical orientation) หรืออาจเรียกการอ่านลักษณะน้ีว่า การอ่านแบบเชิงกระดาษ (Paper-based reading pattern) ภาพท่ี 3.22 แสดงทศิ ทางการอ่านแบบโครงร่างซิกแซก็ (Zig-Zag Pattern) ท่มี า: http://vanseodesign.com/web-design/3-design-layouts/

86 ภาพท่ี 3.23 แสดงตวั อย่างเวบ็ ไซต์ท่มี ลี กั ษณะโครงร่างซิกแซก็ (Zig-Zag Pattern) ท่มี า: https://www.edx.org/micromasters/analytics-essential-tools-methods 3. การอ่านแบบโครงร่างแนวราบ (Landscape-based viewing pattern) เป็น ลกั ษณะการอ่านหน้าเวบ็ ไซต์ท่เี กดิ บ่อยคร้ังในเวบ็ ไซต์หน้าแรก (Home page) ท่แี สดงโครง ร่างทง้ั หมดภายในหน้าจอเดียว รวมถึงเวบ็ ไซต์ท่แี สดงโครงร่างในหน้าแรกและใช้พ้ืนท่เี กอื บ เตม็ หน้าจอ ภาพท่ี 3.24 แสดงโครงร่างแนวราบ (Landscape-based viewing pattern) ท่มี า: http://vanseodesign.com/web-design/3-design-layouts/

87 การอ่ านแบบโครงร่ างแนวราบยังมีลักษณะสอดคล้ องกับพ้ ืนท่ีสามเหล่ียมทอง (Golden Triangle Pattern) โดยพ้ืนท่สี ามเหล่ียมทองเป็นพ้ืนท่ที ่ผี ู้ใช้ทุกคนจะต้องเหน็ บน เวบ็ เพจ ซ่ึงพ้ืนทด่ี งั กล่าวเหมาะสาหรับการนาเสนอข้อมูลท่สี าคัญของเวบ็ ไซต์ได้ ภาพท่ี 3.25 แสดงพ้ืนท่สี ามเหล่ยี มทอง (Golden Triangle Pattern) ท่มี า: http://vanseodesign.com/web-design/3-design-layouts/ ภาพท่ี 3.26 แสดงตัวอย่างเวบ็ ไซตท์ ม่ี ีการใช้พ้ืนท่สี ามเหล่ียมทอง (Golden Triangle Pattern) ท่มี า: http://www.ebay.com/

88 4. การอ่านแบบโครงร่าง F (F-based viewing pattern) แรกเร่ิมการอ่านแบบโครง ร่าง F ได้มาจากการศึกษาการเคล่ือนไหวดวงตาท่ถี ูกค้นพบโดย จาคอป เนลเซน (Jakob Nielsen) ซ่ีงแสดงให้เหน็ ว่าผู้ใช้มีลักษณะการอ่านเวบ็ ไซต์คล้ายรูปร่างของตัวอกั ษร F (F- shaped pattern) โดยจาคอป เนลเซน ได้จาแนกส่วนประกอบของโครงร่าง F ไว้ดังน้ี (Jakob, 2006) 4.1 โครงสร้างการอ่านเชิงแนวนอน (Horizontal movement) ผู้ใช้จะเร่ิมอ่าน จากส่วนด้านบนซ้าย (Upper left) เป็นบริเวณท่ผี ู้ใช้ส่วนใหญ่จะทราบว่าเป็นบริเวณท่มี ี ข้อมูลท่สี าคัญและมีส่วนของการนาทาง (Navigation) และเคล่ือนไหวดวงตาอ่านเร่ือยๆ ตามบรรทดั แรก (F’s top bar) 4.2 โครงสร้างการอ่านเชิงแนวนอนลาดับท่ีสอง (Second horizontal movement) เป็นการอ่านในบรรทดั ถัดๆ ไป (F's lower bar) ซ่ึงการอ่านในบรรทดั ถัดมา น้ันจะเร่ิมอ่านไม่จบบรรทดั ผู้ใช้จะเร่ิมใช้เวลากบั บรรทดั ถดั ไปน้อยลงไปเร่ือยๆ 4.3 โครงสร้างการอ่านแนวด่ิง (Vertical movement) เป็นลักษณะการอ่านช่วง สดุ ท้ายเกิดหลังจากมีการใช้เวลาอ่านในบรรทดั F’s lower bar ลดลง ซ่ึงผู้ใช้จะเปล่ียน ลักษณะการอ่านจากแนวนอนเป็นแนวด่ิงมากข้ึนเร่ือยๆ ซ่ึงอาจเรียกว่าการอ่านแนวก้าน F (F's stem) F’s top bar F's lower bar F's stem ภาพท่ี 3.27 แสดงตัวอย่างการอ่านแบบโครงร่าง F (F-based viewing pattern) ทม่ี า: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

89 ภาพท่ี 3.28 แสดงบรเิ วณท่มี นุษยจ์ ะให้ความสนใจ (AOI) มีลกั ษณะโครงร่าง F ทม่ี า: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ ภาพท่ี 3.29 แสดงภาพของจาคอป เนลเซน (Jakob Nielsen) ผู้ค้นพบการอ่านแบบโครง ร่าง F (F-based viewing pattern) ทม่ี า: https://www.nngroup.com/articles/author/jakob-nielsen/ การออกแบบตาแหน่งควรพิจารณาจากผลการวเิ คราะห์พ้ืนทท่ี ผ่ี ู้ใช้เวบ็ สนใจ (Areas of interest: AOI) เป็นการวิเคราะห์พ้ืนท่หี รือตาแหน่งท่ผี ู้ใช้เวบ็ ท่เี ป็นเป้ าหมายสนใจ โดย ผู้พัฒนาเวบ็ ไซต์ควรร่างเวบ็ ไซต์อย่างคร่าวๆ หรือจาลองรูปแบบโครงร่างเวบ็ ไซต์ข้นึ นาไป ตรวจสอบหรือทดลองกับกลุ่มผู้ใช้เป้ าหมาย เพ่ือประเมินว่าผู้ใช้มีการตอบสนองทางเล่ือน

90 เมาสแ์ ละสายตาไปในแนวทางท่คี ิดไว้หรือไม่ และมีส่วนใดท่ผี ู้ใช้มีความสนใจมากหรือน้อย อย่างไร เพ่ือนาข้อมูลทไ่ี ด้กลบั ไปปรับปรุงการออกแบบเวบ็ ไซต์ได้อย่างมีประสทิ ธภิ าพมาก ย่ิงข้นึ โดยซอฟต์แวร์ท่ใี ช้ในการวิเคราะห์พ้ืนท่ที ่ผี ู้ใช้เวบ็ สนใจ เช่น OGAMA หรือ Open Gaze And Mouse Analyzer (http://www.ogama.net/) ซ่ึงเป็นซอฟต์แวร์ท่ตี รวจจับและ วิเคราะห์การเคล่ือนไหวการเพ่งดวงตา (Gaze) และการเคล่ือนเมาส์ (Mouse) ได้ โดยการ ตรวจจับการเคล่ือนไหวของดวงตาจาเป็ นต้องใช้แว่นตาท่ีออกแบบมาพิเศษร่วมกับ ซอฟตแ์ วร์ดังกล่าวเพ่ือให้เกดิ ความแม่นยา ซ่ึงผลการวิเคราะห์จากซอฟต์แวร์ OGAMA น้ัน สามารถแสดงในลักษณะของแผนท่คี วามสนใจ (Attention map) ซ่ึงบริเวณท่ผี ู้ใช้มีความ สนใจจะแสดงสโี ทนร้อน (แดง) และบริเวณท่สี นใจน้อยกว่าจะแสดงสเี ยน็ ข้นึ ตามลาดบั เช่น สเี หลือง สเี ขยี ว สฟี ้ าสนี า้ เงิน สมี ่วง เป็นต้น ภาพท่ี 3.30 แสดงตัวอย่างของแผนท่คี วามสนใจ (Attention map) หน้าเวบ็ ไซต์ นอกจากทราบลักษณะการอ่านของผู้ใช้แล้ว ผู้ออกแบบเว็บไซต์ควรทราบถึงการ คาดคดิ ของผู้ใช้ (User expectations) ด้วย เน่ืองจากผู้ใช้จะเคล่อื นไหวสายตา หรือเมาส์ ไป ยังบริเวณท่คี าดว่าจะพบแถบนาทาง หรือ เน้ือหาอ่ืนใดกต็ าม (Element locations) หาก เป็นไปตามท่ผี ู้ใช้คาดคิด ผู้ใช้จะเกดิ ความรู้สกึ พึงพอใจและมีระยะเวลาอยู่ในเวบ็ ไซตน์ านข้นึ

91 ภาพท่ี 3.31 แสดงตาแหน่งของส่วนประกอบภายในหน้าเวบ็ ไซต์ท่ผี ู้ใช้คาดคดิ ทม่ี า: http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html สรุป การคานึงถึงผู้ใช้เวบ็ เป็ นส่ิงท่ีสาคัญอย่างย่ิงในการออกแบบเว็บ ผู้ออกแบบเว็บ จะต้องทาการค้นคว้าเก่ียวกับพฤติกรรมของผู้ใช้เวบ็ เช่น การทบทวนวรรณกรรมเก่ียวกับ พฤติกรรมการใช้เวบ็ ไซต์ การสารวจด้วยแบบสอบถาม การแลกเปล่ียนข้อมูลกับเวบ็ ไซต์ ต่างๆ เป็ นต้น โดยนักออกแบบเว็บในปัจจุบันจะต้องคานึงถึงประสบการณ์ของผู้เข้าใช้ เวบ็ ไซต์ (User experience: UX) เพ่ือปรับปรุงเค้าร่าง (Layout) ของเวบ็ ไซต์ให้สอดคล้อง กับการรับรู้ทางสายตาและประสบการณ์เดิมของผู้ใช้เพ่ือให้เวบ็ ท่อี อกแบบข้ึนมีความเป็ น มิตรกับผู้ใช้อย่างเหมาะสม โดยนักออกแบบเว็บจะต้องนาหลักการสร้างมุมมองและ ความรู้สึกท่ีมีต่อเว็บไซต์ การออกแบบเว็บไซต์เชิงเอกภาพ การออกแบบเว็บกับ ประสบการณ์ผู้ใช้ หลักการออกแบบการปฏิสัมพันธ์ และหลักการออกแบบตาแหน่ง ไป ประยุกตใ์ ช้ในการออกแบบเวบ็ ไซตแ์ ต่ละประเภทให้มคี วามเป็นมติ รกบั ผู้ใช้มากท่สี ดุ เพ่ือให้ ผู้ใช้มีความรู้สกึ ราบร่ืนตลอดการใช้งาน และหากการนาเสนอเวบ็ ไซต์เป็นไปตามท่ผี ู้ใช้ คาดคดิ ผู้ใช้จะเกดิ ความร้สู กึ พึงพอใจและมรี ะยะเวลาอยู่ในเวบ็ ไซต์นานข้นึ

92 คาถามทบทวน 1. จงอธบิ ายความหมายของคาว่า ประสบการณผ์ ู้ใช้ (User eXperience: UX) 2. มาตรฐาน ISO 9241-210:2010 กล่าวเก่ยี วกบั เร่ืองใด 3. หลักการสร้างมุมมองและความรู้สกึ ท่มี ตี ่อเวบ็ ไซต์มอี ะไรบ้าง จงอธบิ าย 4. จงอธบิ ายเก่ยี วกบั Quests for Information 5. การออกแบบเวบ็ ไซต์เชิงเอกภาพมีหลักการท่สี าคัญ 3 ประการ อะไรบ้าง จง อธบิ าย 6. จงอธิบายเก่ียวกับแผนภาพกูเทนแบร์ก (Gutenberg Diagram) กับการ ออกแบบเวบ็ ไซต์ 7. จงอธบิ ายลกั ษณะของ แรงโน้มถ่วงในการอ่าน (Reading gravity) 8. จงเปรีบเทยี บลักษณะของ บริเวณจุดอับเข้มแขง็ (Strong fallow zone) และ บริเวณจุดอบั อ่อนแอ (Weak fallow zone) 9. ซอฟต์แวร์ OGAMA มีประโยชน์อย่างไรในการออกแบบเวบ็ ไซต์ 10. จงอธบิ ายเก่ยี วกบั การใช้ตาข่ายข้อมูลช่วยวางโครงร่างของเวบ็ เพจ (Use a Grid to Provide Visual Structure)

93 เอกสารอา้ งอิง ราชกจิ จานุเบกษา. (2555). ประกาศกระทรวงอตุ สาหกรรม เร่ืองกาหนดมาตรฐาน ผลิตภณั ฑอ์ ตุ สาหกรรม: ข้อกาหนดการทาให้เน้ือหาเวบ็ สามารถเข้าถึงและใช้ ประโยชนไ์ ด้. สบื ค้นจากhttp://www.ratchakitcha.soc.go.th/DATA/PDF/ 2556/E/027/17.PDF สานักงานปลดั กระทรวงเทคโนโลยสี ารสนเทศและการส่อื สาร. (2553). แนวทางการพัฒนา เวบ็ ไซตท์ ท่ี กุ คนเข้าถึงได้ TWCAG2010 (Thai Web Content Accessibility Guidelines 2010). สบื ค้นจาก http://www.mict.go.th/assets/portals/1/files/ download/580324_thwcag2010.pdf Djamasbi, Soussan. (2014). Eye Tracking and Web Experience. AIS Transactions on Human-Computer Interaction, (6)2, pp. 16-31. International Organization for Standardization. (2010). Ergonomics of human-system Interaction -- Part 210: Human-centred design for interactive systems. Retrieved from https://www.iso.org/standard/52075.html Jakob Nielsen. (2006). F-Shaped Pattern For Reading Web Content. Retrieved from https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ Joel Sklar. (2014). Principles of Web Design, Sixth Edition. Cengage Learning Asia. W3C. (2008). Web Content Accessibility Guidelines (WCAG) 2.0. Retrieved from: https://www.w3.org/TR/WCAG20/

94

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