Web Usability

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/afssettings

สมัครใช้งาน 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 ข้างล่าง ตรงบริเวณที่ต้องการให้แสดงผลการค้นหา <script type="text/javascript"> var googleSearchIframeName = 'googleSearchUnitIframe'; var googleSearchFrameWidth = 700; var googleSearchFrameborder = 0 ; var googleSearchDomain = 'www.google.co.th'; <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js">

Google search setting

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

ใช้บริการ Free eMail Form (1) • สมัครสมาชิก http://www.emailmeform.com 1

เป็ นหัวข้อ Email เม่ ือระบบส่งมา สร้างหน้า Thank you

2

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

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: [email protected] Subject: Question Message: Dear Sir/Madam, Do you provide service about blah blah... --------------------------------------------------------------------Visitor Ip: 124.120.35.3