Web Usability

Teeratep Sosakul
 Outline
• Introduction

• การสร้างเว็บไซต์ที่ใช้งานง่าย

• ส่งิ ท่ค
ี วรทำำและไม่ควรทำำสำำหรับเว็บไซต์

• แนวทำงวำงแผนปรับปรุงเว็บไซต์

• ปฏิบัติกำร
 Introduction
• Web Usability
คือความยากง่ายในการใช้งานเว็บไซต์เพื่อให้ได้มาซึง่ ข้อมูลหรือสิง่ ที่ผู้ใ
ช้ต้องการ
• เริ่มได้รับความสนใจในช่วงปี 2000 ซึง่ เป็นช่วง Dot-com
bubble
• เว็บไซต์ที่ใช้งานได้ง่าย
จะทำาให้ผทู้ ี่เข้ามาแล้วอยากเข้ามาอีกและจะแนะนำาเว็บไซต์นี้ให้คนอื่นต่
อ ส่งผลให้เกิดรายรับที่มากขึ้นโดยอัตโนมัติ
• หลักการง่ายๆคือ หลักการ KISS: Keep It Simple,
Stupid.
 ตัวอย่างเว็บไซต์ท่ใี ช้งานได้ยาก
• http://www.webpagesthatsuck.com/
ได้รวบรวมตัวอย่างเว็บไซต์ท่ีใช้งานได้ยากเอาไว้
• http://www.brillpublications.com/
• http://www.havenworks.com/
• http://www.cuh2a.com/
http://www.brillpublications.com/
http://www.havenworks.com/
http://www.havenworks.com/
http://www.cuh2a.com/
 การสร้างเว็บไซต์ที่ใช้งานง่าย
• พฤติกรรมของผู้ใช้เว็บ

• เทคนิคการเขียนสำาหรับเว็บไซต์

• การออกแบบลิงค์

• กล่องรับความคิดเห็นจากผู้เข้ามาในเว็บไซต์

• Search Engine
 พฤติกรรมผู้ใช้เว็บ(ฉบับย่อ)
• ผูใ้ ช้ชอบอ่านข้อความสัน ้ ๆ อ่านผ่านๆก็เข้าใจความหมาย
ไม่ชอบอ่านข้อความยาวๆท่ม ี ีรายละเอียดมากๆ
• ส่งิ ท่ผ
ี ู้ใช้สนใจอยากรูท้ ่ส
ี ุดเก่ย
ี วกับสินค้าและบริการคือ
รำคำ
• ผูใ้ ช้มักจะมองข้ามส่ิงท่ีดูคล้ายกับโฆษณา เช่น Banner
ท่อ ี ยู่บนสุด จะมีคนสนใจอ่านน้อยท่ส ี ุด
• ต้องการดูข้อมูลท่ต ี ัวเองต้องการแล้วก็รบ ี ออกจากเว็บไซต์ไ
ป
• ชอบดูรป ู ภาพมากกว่าอ่าน
 เทคนิคการเขียนสำาหรับเว็บไซต์
• คนทัว่ไปมักไม่อ่านเว็บไซต์แบบคำาต่อคำา พวกเขาชอบอ่านแบบมองคร่าวๆมากกว่า
• สร้างเว็บให้เหมาะสำาหรับการอ่านแบบคร่าวๆโดยการ
• ใช้การเน้น keywords ท่ีต้องการให้ผใู้ ช้อ่านแล้วสะดุดตา
• ใช้หัวข้อท่ีส่ือความหมาย
• ทำาข้อมูลให้อยู่ในรูปแบบท่ีเป็ นข้อๆ
• เขียนบทสรุปก่อนเพ่ ือให้ผู้อ่านสนใจจะอ่านท่ีมาของบทสรุป
• ใช้คำาให้น้อยท่ีสุด โดยปกติให้ใช้คร่ ึงหน่ ึงของการเขียนแบบปกติ
• ให้เครดิตกับเจ้าของเน้ือหาเป็ นส่ิงท่ีจำาเป็ นในการเขียนเว็บไซต์
เป็ นการแสดงถึงความมีสปิ ริตของเจ้าของเว็บไซต์
การออกแบบลิงค์เพ่ ือเข้าถึงข้อมูลภายในเว็
บ
• ต้องทำาให้ลิงค์ท่ีอยู่ภายในเว็บไซต์เห็นได้เด่นชัด ด้วยการใช้ตัวหนา,
สีท่ีแตกต่างกับตัวอักษรอ่ ืน และควรมีการขีดเส้นใต้
• ใช้เฉดสีท่ีแตกต่างกันระหว่างลิงค์ท่ีเคยเข้าไปแล้วกับลิงค์ท่ียังไม่เคย
เข้าไป
• เพ่ ือป้ องกันการสับสน สีท่ีใช้สำาหรับลิงค์ ไม่ควรใช้ท่ีอ่ืนท่ีไม่ใช่ลิงค์
• ลิงค์ท่ีไปสู่เว็บไซต์อ่ืน ควรเปิ ดหน้าจอใหม่ขึ้นมา โดย ใช้
target=‘_blank’ กับลิงค์นัน ้ (ไม่ควรใช้ 　 Javascript
ในการเปิ ดหน้าจอใหม่)
• ควรมี Site maps หรือแผนผังของเว็บ
เพ่ ือผู้ใช้จะได้รวู้ ่าน่าจะมีข้อมูลท่ีต้องการหาอยู่ท่ีส่วนใดของเว็บ
 สิ่งที่ควรทำา 10 ประการ
• ในหน้าแรก
เขียนประโยคสัน ้ ๆหน่ึงประโยคอธิบายสินค้าและบริการของผู้ประกอ
บการ
• เขียน TITLE แต่ละหน้าเว็บให้ส่ือความหมาย ทัง้สำาหรับผู้ใช้
และสำาหรับลิสต์ใน Bookmark
• รวมข้อมูลท่ีเก่ียวกับผูป ้ ระกอบการไว้ให้เป็ นสัดส่วน
ซ่ึงมักจะตัง้ช่ ือเป็ นส่วน “About <ช่ ือบริษัท>”
• เว็บไซต์ควรมีการเน้นส่ิงหลักๆสักสองสามส่ิง
ท่ีผู้เข้ามาในเว็บน่าจะสนใจ
• เว็บไซต์ขนาดใหญ่ควรมี Search Engine
 สิ่งที่ควรทำา 10 ประการ (ต่อ)
• ควรมีการแสดงเน้อ ื หาท่ีท่านคิดว่าโดดเด่นท่ีสุด
หรือเน้ือหาท่ีเพ่ิงอัพเดทล่าสุด
• ตัง้ช่ ือลิงค์โดยใช้ keyword ท่ีสำาคัญท่ีสุด
• รูปภาพท่ีชัดเจนแสดงถึงสินค้าและบริการของผูป ้ ระกอบการ
จะช่วยดึงดูดความสนของผู้เข้ามาชอบเว็บไซต์ได้เป็ นอย่างดี
• หลีกเล่ียงการใช้ลูกเล่นท่ีแปลกพิศดารในการเข้าถึงเน้ือหาท่ีสำาคัญ
• เหนือส่ิงอ่ ืนใด
เว็บไซต์ท่ีดน ี ัน
้ ต้องเน้นการพัฒนาเน้ือหาเว็บไซต์ให้มีข้อมูลท่ีตรงปร
ะเด็นและตอบคำาถามของผูใ้ ช้งานได้ดีมา
 สิ่งที่ไม่ควรทำา 10 ประการ
• ทำาเน้ือหาของเว็บไซต์เป็ นในแนวนอน
ผูใ้ ช้ต้องเล่ อ
ื นหน้าจอเพ่ อ
ื ดูเน้ือหาทัง้หมด
• ใช้ตัวอักษรในหน้ามากเกินไป
ไม่มีการจัดรูปแบบให้น่าอ่าน
• ใช้ Javascript ในการลิงค์
• เก็บข้อมูลของผูใ้ ช้งานเช่น email
โดยไม่มีการประกาศนโยบายความเป็ นส่วนตัว (Privacy
Policy)
• ใช้ URL ยาวมากกว่า 75 ตัวอักษร
• ใช้ PDF เป็ นเว็บไซต์
 สิ่งที่ไม่ควรทำา 10 ประการ (ต่อ)
• จำากัดขนาดตัวอักษรโดยท่ีผู้ใช้ไม่สามารถเปล่ย ี นได้
• เน้ือหาของเว็บไซต์ไม่ได้บอกส่ิงท่ีผู้ใช้งานอยากรู้
• ใช้รูปภาพเป็ นลิงค์ เพราะทำาให้ Search Engine
หาหน้านัน ้ ไม่พบ
• ไม่มีรายละเอียดเก่ียวกับผู้ประกอบการ
หรือวิธีติดต่อผู้ประกอบการ รวมทัง้แผนท่ี
 ทดสอบ Web Usability ของเว็บไซต์
• จัดให้มีการทดสอบการใช้งานเว็บไซต์ของคุณ
โดยให้ผู้ทำาการทดสอบทำางานท่ีมอบหมายเก่ย ี วกับเ
ว็บไซต์ เช่น หาว่าโรงแรมของคุณมีห้องพักก่แ ี บบ,
หาว่าธุรกิจของคุณตัง้อยู่ท่ไี หน,
ทดลองจองห้องพักในวันท่ก ี ำาหนด เป็ นต้น
• จากผลการศึกษา มีรายงานว่าทดสอบกับผู้ใช้งาน
5 คน
ก็เพียงพอท่จี ะได้แนวคิดท่ีเป็ นประโยชน์ในการปรั
บปรุงศักยภาพของเว็บไซต์
 ตัวอย่างการทดสอบ Web Usability อย่างง่าย
• ท่านมีความจำาเป็นต้องจองห้องพักหนึ่งห้อง วันที่ 12-15 กันยายน
2551ในงบประมาณ 1400 บาท/คืน
• ความพอใจเวลาที่ใช้ในการแสดงผลของแต่ละหน้า
– ช้า.....ปานกลาง....เร็ว
• หาห้องพักในช่วงราคาที่ต้องการ
– หาได้ยากหรือง่ายเช่นไร
• หาว่าห้องพักว่างหรือไม่ในช่วงวันที่ต้องการ
– หาได้ยากหรือง่ายเช่นไร
• มีข้อแนะนำาเพิ่มเติมอย่างไร
 รวมลิงค์เกี่ยวกับ Web Usability
• http://www.usability.gov
• http://www.useit.com
• http://www.usableweb.com/
• http://webword.com/index.html
• http://www.clickz.com/
 แนวทางวางแผนปรับปรุงเว็บไซต์
• เขียนแนวคิดให้ชัดเจนว่าเว็บไซต์ของเราต้องการนำา
เสนอส่งิ ใด
และส่งิ นัน
้ ได้ตอบคำาถามผู้ท่ีเข้ามาใช้งานหรือเปล่า
• ปรับปรุงหน้าตาทัว่ไปของเว็บ
• ปรับปรุงเน้ือหาให้น่าสนใจ
• ปรับปรุงทางด้านเทคนิค
• Search Engine
• Feedback form
 บทสรุป

• การมีลูกเล่นในเว็บมากมายไม่ได้ชว่ ยให้คนชอบใช้เว็บ
แต่กลับเป็ นการไล่คนไปอีกต่างหาก

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

• Web usability
มีสว่ นอย่างมากในการเพ่ิมปริมาณลูกค้าและยังช่วยให้ลูก
ค้ากลับมาใช้บริการเว็บเราอีก
 ปฏิบัติการ
• สมัครใช้บริการ Google Adsense
• เพิ่ม Search Engine ในเว็บไซต์ของตัวเอง
• เพิ่ม Feedback Form ในเว็บไซต์ของตัวเอง
• เขียนแนวทางในการปรับปรุงเว็บไซต์ของตัวเอง
 Search Engine
• เว็บไซต์ท่ีดค ี วรมีระบบค้นหา หรือว่า 　 search engine ท่ีดี
เพ่ ือให้ผู้ใช้สามารถคนหาข้อมูลท่ีต้องการได้อย่างมีประสิทธิภาพ
• AdSense for Search เป็ นบริการจาก Google
ซ่ึงบริการนีเ้ปิ ดให้บุคคลทัว่ไปใช้ Google
เป็ นระบบค้นหาข้อมูลของเว็บตัวเองได้
แถมผู้ใช้อาจมีรายได้จากโฆษณาท่ีติดมากับระบบนีด ้ ว้ ย
• รายละเอียด https://www.google.com/adsense/afs-
settings
 สมัครใช้งาน AdSense for Search
• ขัน
้ แรกสุดต้อง สมัครใช้บริการเมล์ของ Gmail ซ่งึ จะได้
email account เป็ น ***@gmail.com
และจำาเป็ นต้องใช้ email นีท ้ ุกครัง้ท่เี ราใช้บริการอ่ น
ื ๆจาก
Google.com ดังจะได้แนะนำาต่อไป
(gmail.google.com)
• สมัครใช้บริการ Adsense และเลือกสร้าง AdSense
for Search (adsense.google.com)
• สร้าง searchresult.html สำาหรับแสดงผลการ
Search ให้เหมือนกับว่าระบบ search
อยู่ในเว็บของเรา
• เม่ ือได้ code สำาหรับ search engine มาแล้ว
ก็นำาไปใส่ไว้ในเว็บไซต์
เพียงเท่านีก้ ็ได้ระบบค้นหาระดับโลกมาอยู่ในเว็บไซต์ของท่
านแล้ว
 searchresult.html
• สร้างหน้า searchresult.html โดยใส่ code ข้างล่าง
ตรงบริเวณที่ต้องการให้แสดงผลการค้นหา
<!-- Google Search Result Snippet Begins -->
<div id="googleSearchUnitIframe"></div>

<script type="text/javascript">
var googleSearchIframeName = 'googleSearchUnitIframe';
var googleSearchFrameWidth = 700;
var googleSearchFrameborder = 0 ;
var googleSearchDomain = 'www.google.co.th';
</script>
<script type="text/javascript"
src="http://www.google.com/afsonline/show_afs_search.js">
</script>
<!-- Google Search Result Snippet Ends -->
Google search setting
 กล่องรับความคิดเห็นหรือว่ารับคำาสั่งซื้อจากลูกค้า
• เป็นส่วนสำาหรับติดต่อสื่อสารระหว่างผู้ใช้(ลูกค้า) กับผู้ประกอบการ
• อย่างง่ายที่สุดคือเมื่อกดปุ่มส่งข้อความ
ระบบจะส่งเมล์มายังผูป้ ระกอบการ
เหมาะสำาหรับธุรกิจขนาดเล็กที่มีผู้ตอบเมล์เพียงไม่กี่คน
• ระดับสูงขึ้นมาจะเป็นการใช้ Database ในการเก็บข้อมูล
ซึง่ จะง่ายต่อการวิเคราะห์ข้อมูลในภายหลัง
 ใช้บริการ Free eMail Form (1)
• สมัครสมาชิก http://www.emailmeform.com
เป็ นหัวข้อ Email เม่ ือระบบส่งมา
1
สร้างหน้า Thank you

2
 ใช้บริการ Free eMail Form (2)

uncheck
 ใช้บริการ Free eMail Form (3)
6

7: Almost Done
 ใช้บริการ Free eMail Form (4)
• Click Get the HTML Code

• Copy code แล้วใช้ Text Editor หรอ Web

Creator Tool แก้ไขข้อความได้ตามต้องการ
 ใช้บริการ Free eMail Form (5)
• Click Get the HTML Code

• ใช้ Text Editor หรอ Web Creator Tool

แก้ไขข้อความได้ตามต้องการ
ผลการสร้าง email form

Your Name: Mr. Travel

Your Email Address: mrtravel@travelman.com
Subject: Question
Message: Dear Sir/Madam,

Do you provide service about blah blah...

---------------------------------------------------------------------
Visitor Ip: 124.120.35.3