Web Usability

3-1
 Outline
• Introduction
• การสร้างเว็บไซต์ที่ใช้งานง่าย
• ส่งิ ท่ีควรทำำและไม่ควรทำำสำำหรับเว็บไซต์
• แนวทางวางแผนปรับปรุงเว็บไซต์
• ปฏิบัติกำร

3-2
Web Usability
 Introduction
• Web Usability
คือความยากง่ายในการใช้งานเว็บไซต์เพื่อให้ได้มาซึง่ ข้อมูลหรือสิง่ ที่ผู้ใ
ช้ต้องการ
• เริ่มได้รับความสนใจในช่วงปี 2000 ซึง่ เป็นช่วง Dot-com
bubble
• เว็บไซต์ที่ใช้งานได้ง่าย
จะทำาให้ผทู้ ี่เข้ามาแล้วอยากเข้ามาอีกและจะแนะนำาเว็บไซต์นี้ให้คนอื่นต่
อ ส่งผลให้เกิดรายรับที่มากขึ้นโดยอัตโนมัติ

3-3
Web Usability
 ตัวอย่ำงเว็บไซต์ท่ใี ช้งำนได้ยำก
• http://www.webpagesthatsuck.com/
ได้รวบรวมตัวอย่ำงเว็บไซต์ท่ใี ช้งำนได้ยำกเอำไว้
• http://www.brillpublications.com/
• http://www.havenworks.com/
• http://www.cuh2a.com/

3-4
Web Usability
http://www.brillpublications.com/

3-5
Web Usability
http://www.havenworks.com/

3-6
Web Usability
http://www.havenworks.com/

3-7
Web Usability
http://www.cuh2a.com/

3-8
Web Usability
 การสร้างเว็บไซต์ที่ใช้งานง่าย
• พฤติกรรมของผู้ใช้เว็บ
• เทคนิคการเขียนสำาหรับเว็บไซต์
• การออกแบบลิงค์
• กล่องรับควำมคิดเห็นจำกผู้เข้ำมำในเว็บไซต์
• Search Engine

3-9
Web Usability
 พฤติกรรมผู้ใช้เว็บ(ฉบับย่อ)
• ผูใ้ ช้ชอบอ่านข้อความสัน้ ๆ อ่านผ่านๆก็เข้าใจความหมาย
ไม่ชอบอ่านข้อความยาวๆที่มีรายละเอียดมากๆ
• สิง่ ที่ผู้ใช้สนใจอยากรู้ที่สุดเกี่ยวกับสินค้าและบริการคือ ราคา
• ผูใ้ ช้มักจะมองข้ามสิ่งที่ดูคล้ายกับโฆษณา เช่น Banner ที่อยู่บนสุด
จะมีคนสนใจอ่านน้อยที่สุด
• ต้องกำรดูข้อมูลท่ต ี ัวเองต้องกำรแล้วก็รีบออกจำกเ
ว็บไซต์ไป
• ชอบดูรูปภำพมำกกว่ำอ่ำน

3-10
Web Usability
 เทคนิคการเขียนสำาหรับเว็บไซต์
• คนทั่วไปมักไม่อ่านเว็บไซต์แบบคำาต่อคำา
พวกเขาชอบอ่านแบบมองคร่าวๆมากกว่า
• สร้างเว็บให้เหมาะสำาหรับการอ่านแบบคร่าวๆโดยการ
• ใช้การเน้น keywords ที่ต้องการให้ผู้ใช้อ่านแล้วสะดุดตา
• ใช้หัวข้อที่สื่อความหมาย
• ทำำข้อมูลให้อยู่ในรูปแบบท่ีเป็ นข้อๆ
• เขียนบทสรุปก่อนเพ่ ือให้ผู้อ่ำนสนใจจะอ่ำนท่ีมำของบทสรุป
• ใช้คำำให้นอ ้ ยท่ีสุด
โดยปกติให้ใช้คร่ึงหน่ึงของกำรเขียนแบบปกติ
• ให้เครดิตกับเจ้าของเนื้อหาเป็นสิ่งที่จำาเป็นในการเขียนเว็บไซต์
เป็นการแสดงถึงความมีสปิWeb ริตของเจ้ า ของเว็
Usability
บ ไซต์ 3-11
กำรออกแบบลิงค์เพ่ ือเข้ำถึงข้อมูลภำยในเว็
บ
• ต้องทำาให้ลิงค์ที่อยู่ภายในเว็บไซต์เห็นได้เด่นชัด ด้วยการใช้ตัวหนา,
สีที่แตกต่างกับตัวอักษรอื่น และควรมีการขีดเส้นใต้
• ใช้เฉดสีที่แตกต่างกันระหว่างลิงค์ที่เคยเข้าไปแล้วกับลิงค์ที่ยังไม่เคยเข้าไ
ป
• เพื่อป้องกันการสับสน สีที่ใช้สำาหรับลิงค์ ไม่ควรใช้ที่อื่นที่ไม่ใช่ลิงค์
• ลิงค์ที่ไปสู่เว็บไซต์อื่น ควรเปิดหน้าจอใหม่ขึ้นมา โดย ใช้
target=‘_blank’ กับลิงค์นั้น (ไม่ควรใช้ 　 Javascript
ในกำรเปิ ดหน้ำจอใหม่)
• ควรมี Site maps หรือแผนผังของเว็บ
เพ่ ือผู้ใช้จะได้รวู้ ่ำน่ำจะมีข้อมูลท่ต ี ้องกำรหำอยู่ท่ีส่ว
นใดของเว็บ Web Usability 3-12
 กล่องรับความคิดเห็นหรือว่ารับคำาสั่งซื้อจากลูกค้า
• เป็นส่วนสำาหรับติดต่อสื่อสารระหว่างผู้ใช้(ลูกค้า) กับผู้ประกอบการ
• อย่างง่ายที่สุดคือเมื่อกดปุ่มส่งข้อความ
ระบบจะส่งเมล์มายังผูป้ ระกอบการ
เหมาะสำาหรับธุรกิจขนาดเล็กที่มีผู้ตอบเมล์เพียงไม่กี่คน
• ระดับสูงขึ้นมาจะเป็นการใช้ Database ในการเก็บข้อมูล
ซึง่ จะง่ายต่อการวิเคราะห์ข้อมูลในภายหลัง

3-13
Web Usability
 Search Engine
• เว็บไซต์ที่ดีควรมีระบบค้นหา หรือว่า 　 search engine
ท่ด ี ี
เพ่ ือให้ผู้ใช้สำมำรถคนหำข้อมูลท่ต ี ้องกำรได้อย่ำงมี
ประสิทธิภำพ
• AdSense for Search เป็ นบริกำรจำก Google
ซึง่ บริการนี้เปิดให้บุคคลทั่วไปใช้ Google
เป็นระบบค้นหาข้อมูลของเว็บตัวเองได้
แถมผู้ใช้อาจมีรายได้จากโฆษณาที่ติดมากับระบบนี้ด้วย
• รำยละเอียด
https://www.google.com/adsense/afs-settings
3-14
Web Usability
 สมัครใช้งำน AdSense for Search
• ขั้นแรกสุดต้อง สมัครใช้บริการเมล์ของ Gmail ซึ่งจะได้ email
account เป็น ***@gmail.com และจำาเป็นต้องใช้
email นี้ทุกครั้งที่เราใช้บริการอื่นๆจาก Google.com
ดังจะได้แนะนำาต่อไป
• สมัครใช้บริการ Adsense และเลือกสร้าง AdSense for
Search
• เม่ ือได้ code สำำหรับ search engine มำแล้ว
ก็นำำไปใส่ไว้ในเว็บไซต์
เพียงเท่ำนีก ้ ็ได้ระบบค้นหำระดับโลกมำอยู่ในเว็บไซ
ต์ของท่ำนแล้ว
3-15
Web Usability
 สิ่งที่ควรทำา 10 ประการ
• ในหน้าแรก
เขียนประโยคสั้นๆหนึ่งประโยคอธิบายสินค้าและบริการของผู้ประกอบ
การ
• เขียน TITLE แต่ละหน้าเว็บให้สอื่ ความหมาย ทั้งสำาหรับผู้ใช้
และสำาหรับลิสต์ใน Bookmark
• รวมข้อมูลที่เกี่ยวกับผูป้ ระกอบการไว้ให้เป็นสัดส่วน
ซึง่ มักจะตั้งชื่อเป็นส่วน “About <ชือ่ บริษัท>”
• เว็บไซต์ควรมีกำรเน้นส่ิงหลักๆสักสองสำมส่งิ
ท่ผ ี ู้เข้ำมำในเว็บน่ำจะสนใจ
• เว็บไซต์ขนำดใหญ่คWeb วรมี Search Engine
Usability 3-16
 สิ่งที่ควรทำา 10 ประการ (ต่อ)
• ควรมีการแสดงเนื้อหาที่ท่านคิดว่าโดดเด่นที่สุด
หรือเนื้อหาที่เพิ่งอัพเดทล่าสุด
• ตั้งชื่อลิงค์โดยใช้ keyword ที่สำาคัญที่สุด
• รูปภำพท่ช ี ัดเจนแสดงถึงสินค้ำและบริกำรของผู้ปร
ะกอบกำร
จะช่วยดึงดูดควำมสนของผู้เข้ำมำชอบเว็บไซต์ได้เป็
นอย่ำงดี
• หลีกเล่ียงกำรใช้ลก ู เล่นท่ีแปลกพิศดำรในกำรเข้ำถึง
เน้ือหำท่ส ี ำำคัญ
• เหนือส่งิ อ่ น ื ใด Web Usability 3-17
 สิ่งที่ไม่ควรทำา 10 ประการ
• ทำาเนื้อหาของเว็บไซต์เป็นในแนวนอน
ผูใ้ ช้ต้องเลื่อนหน้าจอเพื่อดูเนื้อหาทั้งหมด
• ใช้ตัวอักษรในหน้ามากเกินไป ไม่มีการจัดรูปแบบให้น่าอ่าน
• ใช้ Javascript ในการลิงค์
• เก็บข้อมูลของผู้ใช้งำนเช่น email
โดยไม่มีกำรประกำศนโยบำยควำมเป็ นส่วนตัว
(Privacy Policy)
• ใช้ URL ยำวมำกกว่ำ 75 ตัวอักษร
• ใช้ PDF เป็ นเว็บไซต์
3-18
Web Usability
 สิ่งที่ไม่ควรทำา 10 ประการ (ต่อ)
• จำากัดขนาดตัวอักษรโดยที่ผู้ใช้ไม่สามารถเปลี่ยนได้
• เน้ือหำของเว็บไซต์ไม่ได้บอกส่ิงท่ีผู้ใช้งำนอยำกรู้
• ใช้รป ู ภำพเป็ นลิงค์ เพรำะทำำให้ Search Engine
หำหน้ำนัน ้ ไม่พบ
• ไม่มีรำยละเอียดเก่ียวกับผู้ประกอบกำร
หรือวิธีติดต่อผู้ประกอบกำร รวมทัง้แผนท่ี

3-19
Web Usability
 แนวทางวางแผนปรับปรุงเว็บไซต์
• เขียนแนวคิดให้ชดั เจนว่าเว็บไซต์ของเราต้องการนำาเสนอสิง่ ใด
และสิ่งนั้นได้ตอบคำาถามผู้ที่เข้ามาใช้งานหรือเปล่า
• ปรับปรุงหน้าตาทั่วไปของเว็บ
• ปรับปรุงเน้ือหำให้น่ำสนใจ
• ปรับปรุงทำงด้ำนเทคนิค

3-20
Web Usability
 ทดสอบ Web Usability ของเว็บไซต์
• จัดให้มีกำรทดสอบกำรใช้งำนเว็บไซต์ของคุณ
โดยให้ผู้ทำำกำรทดสอบทำำงำนท่ีมอบหมำยเก่ย ี วกับเ
ว็บไซต์ เช่น หำว่ำโรงแรมของคุณมีห้องพักก่แ ี บบ,
หำว่ำธุรกิจของคุณตัง้อยู่ท่ไี หน,
ทดลองจองห้องพักในวันท่ก ี ำำหนด เป็ นต้น
• จำกผลกำรศึกษำ มีรำยงำนว่ำทดสอบกับผู้ใช้งำน
5 คน
ก็เพียงพอท่จี ะได้แนวคิดท่ีเป็ นประโยชน์ในกำรปรั
บปรุงศักยภำพของเว็บไซต์

3-21
Web Usability
 ตัวอย่างการทดสอบ Web Usability อย่างง่าย
• ท่านมีความจำาเป็นต้องจองห้องพักหนึ่งห้อง วันที่ 12-15 กันยายน
2551ในงบประมาณ 1400 บาท/คืน
• ความพอใจเวลาที่ใช้ในการแสดงผลของแต่ละหน้า
– ช้า.....ปานกลาง....เร็ว
• หาห้องพักในช่วงราคาที่ต้องการ
– หาได้ยากหรือง่ายเช่นไร
• หาว่าห้องพักว่างหรือไม่ในช่วงวันที่ต้องการ
– หาได้ยากหรือง่ายเช่นไร
• มีข้อแนะนำาเพิ่มเติมอย่างไร

3-22
Web Usability
 รวมลิงค์เกี่ยวกับ Web Usability
• http://www.usability.gov
• http://www.useit.com
• http://www.usableweb.com/
• http://webword.com/index.html
• http://www.clickz.com/

3-23
Web Usability
 ปฏิบัติการ
• สมัครใช้บริการ Google Adsense
• เพิ่ม Search Engine ในเว็บไซต์ของตัวเอง
• เขียนแนวทางในการปรับปรุงเว็บไซต์ของตัวเอง

3-24
Web Usability