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

พื่ฤต์ กรรมผู้��ใช้�เว�บ(ฉบ$บยอ)

• ผู้��ใช้�ช้อบอานข้�อคืวามสิ่$-นๆ อานผู้านๆก�เข้�าใจคืวามห้มาย ไมช้อบอานข้�อคืวามยาวๆที่"�ม"รายละเอ"ยด้มากๆ

• สิ่ �ง่ที่"�ผู้��ใช้�สิ่นใจอยากร� �ที่"�สิ่2ด้เก"�ยวก$บสิ่ นคื�าและบร การคื�อ ราคา

• ผู้��ใช้�ม$กจะมอง่ข้�ามสิ่ �ง่ที่"�ด้�คืล�ายก$บโฆษณา เช้น Banner ที่"�อย�บนสิ่2ด้ จะม"คืนสิ่นใจอานน�อยที่"�สิ่2ด้

• ต์�อง่การด้�ข้�อม�ลที่"�ต์$วเอง่ต์�อง่การแล�วก�ร"บออกจากเว�บไซต์�ไปี

• ช้อบด้�ร�ปีภาพื่มากกวาอาน

เที่คืน คืการเข้"ยนสิ่+าห้ร$บเว�บไซต์�• คืนที่$�วไปีม$กไมอานเว�บไซต์�แบบคื+าต์อคื+า พื่วกเข้าช้อบอานแบบมอง่คืราวๆ

มากกวา• สิ่ร�าง่เว�บให้�เห้มาะสิ่+าห้ร$บการอานแบบคืราวๆโด้ยการ

• ใช้�การเน�น keywords ที่"�ต์�อง่การให้�ผู้��ใช้�อานแล�วสิ่ะด้2ด้ต์า• ใช้�ห้$วข้�อที่"�สิ่��อคืวามห้มาย• ที่+าข้�อม�ลให้�อย�ในร�ปีแบบที่"�เปี)นข้�อๆ• เข้"ยนบที่สิ่ร2ปีกอนเพื่��อให้�ผู้��อานสิ่นใจจะอานที่"�มาข้อง่บที่สิ่ร2ปี• ใช้�คื+าให้�น�อยที่"�สิ่2ด้ โด้ยปีกต์ ให้�ใช้�คืร��ง่ห้น��ง่ข้อง่การเข้"ยนแบบปีกต์

• ให้�เคืรด้ ต์ก$บเจ�าข้อง่เน�-อห้าเปี)นสิ่ �ง่ที่"�จ+าเปี)นในการเข้"ยนเว�บไซต์� เปี)นการแสิ่ด้ง่ถึ�ง่คืวามม"สิ่ปี8ร ต์ข้อง่เจ�าข้อง่เว�บไซต์�

การออกแบบล ง่คื�เพื่��อเข้�าถึ�ง่ข้�อม�ลภายในเว�บ

• ต์�อง่ที่+าให้�ล ง่คื�ที่"�อย�ภายในเว�บไซต์�เห้�นได้�เด้นช้$ด้ ด้�วยการใช้�ต์$วห้นา, สิ่"ที่"�แต์กต์าง่ก$บต์$วอ$กษรอ��น และคืวรม"การข้"ด้เสิ่�นใต์�

• ใช้�เฉด้สิ่"ที่"�แต์กต์าง่ก$นระห้วาง่ล ง่คื�ที่"�เคืยเข้�าไปีแล�วก$บล ง่คื�ที่"�ย$ง่ไมเคืยเข้�าไปี

• เพื่��อปี9อง่ก$นการสิ่$บสิ่น สิ่"ที่"�ใช้�สิ่+าห้ร$บล ง่คื� ไมคืวรใช้�ที่"�อ��นที่"�ไมใช้ล ง่คื�• ล ง่คื�ที่"�ไปีสิ่�เว�บไซต์�อ��น คืวรเปี8ด้ห้น�าจอให้มข้�-นมา โด้ย ใช้�

target=‘_blank’ ก$บล ง่คื�น$-น (ไมคืวรใช้� Javascript ในการเปี8ด้ห้น�าจอให้ม)

• คืวรม" Site maps ห้ร�อแผู้นผู้$ง่ข้อง่เว�บ เพื่��อผู้��ใช้�จะได้�ร� �วานาจะม"ข้�อม�ลที่"�ต์�อง่การห้าอย�ที่"�สิ่วนใด้ข้อง่เว�บ

สิ่ �ง่ที่"�คืวรที่+า 10 ปีระการ• ในห้น�าแรก เข้"ยนปีระโยคืสิ่$-นๆห้น��ง่ปีระโยคือธิ บายสิ่ นคื�าและบร การ

ข้อง่ผู้��ปีระกอบการ• เข้"ยน TITLE แต์ละห้น�าเว�บให้�สิ่��อคืวามห้มาย ที่$-ง่สิ่+าห้ร$บผู้��ใช้� และ

สิ่+าห้ร$บล สิ่ต์�ใน Bookmark• รวมข้�อม�ลที่"�เก"�ยวก$บผู้��ปีระกอบการไว�ให้�เปี)นสิ่$ด้สิ่วน ซ��ง่ม$กจะต์$-ง่ช้��อ

เปี)นสิ่วน “About <ช้��อบร ษ$ที่>”• เว�บไซต์�คืวรม"การเน�นสิ่ �ง่ห้ล$กๆสิ่$กสิ่อง่สิ่ามสิ่ �ง่ ที่"�ผู้��เข้�ามาในเว�บนาจะ

สิ่นใจ• เว�บไซต์�ข้นาด้ให้ญ่คืวรม" Search Engine

สิ่ �ง่ที่"�คืวรที่+า 10 ปีระการ (ต์อ)• คืวรม"การแสิ่ด้ง่เน�-อห้าที่"�ที่านคื ด้วาโด้ด้เด้นที่"�สิ่2ด้ ห้ร�อเน�-อห้าที่"�เพื่ �ง่

อ$พื่เด้ที่ลาสิ่2ด้• ต์$-ง่ช้��อล ง่คื�โด้ยใช้� keyword ที่"�สิ่+าคื$ญ่ที่"�สิ่2ด้• ร�ปีภาพื่ที่"�ช้$ด้เจนแสิ่ด้ง่ถึ�ง่สิ่ นคื�าและบร การข้อง่ผู้��ปีระกอบการ จะ

ช้วยด้�ง่ด้�ด้คืวามสิ่นข้อง่ผู้��เข้�ามาช้อบเว�บไซต์�ได้�เปี)นอยาง่ด้"• ห้ล"กเล"�ยง่การใช้�ล�กเลนที่"�แปีลกพื่ ศด้ารในการเข้�าถึ�ง่เน�-อห้าที่"�สิ่+าคื$ญ่• เห้น�อสิ่ �ง่อ��นใด้ เว�บไซต์�ที่"�ด้"น$-นต์�อง่เน�นการพื่$ฒนาเน�-อห้าเว�บไซต์�ให้�ม"

ข้�อม�ลที่"�ต์รง่ปีระเด้�นและต์อบคื+าถึามข้อง่ผู้��ใช้�ง่านได้�ด้"มา

สิ่ �ง่ที่"�ไมคืวรที่+า 10 ปีระการ• ที่+าเน�-อห้าข้อง่เว�บไซต์�เปี)นในแนวนอน ผู้��ใช้�ต์�อง่เล��อนห้น�า

จอเพื่��อด้�เน�-อห้าที่$-ง่ห้มด้• ใช้�ต์$วอ$กษรในห้น�ามากเก นไปี ไมม"การจ$ด้ร�ปีแบบให้�นาอาน• ใช้� Javascript ในการล ง่คื� • เก�บข้�อม�ลข้อง่ผู้��ใช้�ง่านเช้น email โด้ยไมม"การปีระกาศ

นโยบายคืวามเปี)นสิ่วนต์$ว (Privacy Policy)• ใช้� URL ยาวมากกวา 75 ต์$วอ$กษร• ใช้� PDF เปี)นเว�บไซต์�

สิ่ �ง่ที่"�ไมคืวรที่+า 10 ปีระการ (ต์อ)

• จ+าก$ด้ข้นาด้ต์$วอ$กษรโด้ยที่"�ผู้��ใช้�ไมสิ่ามารถึเปีล"�ยนได้�

• เน�-อห้าข้อง่เว�บไซต์�ไมได้�บอกสิ่ �ง่ที่"�ผู้��ใช้�ง่านอยากร� �• ใช้�ร�ปีภาพื่เปี)นล ง่คื� เพื่ราะที่+าให้� Search Engine

ห้าห้น�าน$-นไมพื่บ• ไมม"รายละเอ"ยด้เก"�ยวก$บผู้��ปีระกอบการ ห้ร�อว ธิ"

ต์ ด้ต์อผู้��ปีระกอบการ รวมที่$-ง่แผู้นที่"�

ที่ด้สิ่อบ Web Usability ข้อง่เว�บไซต์�• จ$ด้ให้�ม"การที่ด้สิ่อบการใช้�ง่านเว�บไซต์�ข้อง่คื2ณ โด้ย

ให้�ผู้��ที่+าการที่ด้สิ่อบที่+าง่านที่"�มอบห้มายเก"�ยวก$บเว�บไซต์� เช้น ห้าวาโรง่แรมข้อง่คื2ณม"ห้�อง่พื่$กก"�แบบ, ห้าวาธิ2รก จข้อง่คื2ณต์$-ง่อย�ที่"�ไห้น, ที่ด้ลอง่จอง่ห้�อง่พื่$กในว$นที่"�ก+าห้นด้ เปี)นต์�น

• จากผู้ลการศ�กษา ม"รายง่านวาที่ด้สิ่อบก$บผู้��ใช้�ง่าน 5 คืน ก�เพื่"ยง่พื่อที่"�จะได้�แนวคื ด้ที่"�เปี)นปีระโยช้น�ในการปีร$บปีร2ง่ศ$กยภาพื่ข้อง่เว�บไซต์�

ต์$วอยาง่การที่ด้สิ่อบ 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/

แนวที่าง่วาง่แผู้นปีร$บปีร2ง่เว�บไซต์�• เข้"ยนแนวคื ด้ให้�ช้$ด้เจนวาเว�บไซต์�ข้อง่เราต์�อง่การ

น+าเสิ่นอสิ่ �ง่ใด้ และสิ่ �ง่น$-นได้�ต์อบคื+าถึามผู้��ที่"�เข้�ามาใช้�ง่านห้ร�อเปีลา

• ปีร$บปีร2ง่ห้น�าต์าที่$�วไปีข้อง่เว�บ• ปีร$บปีร2ง่เน�-อห้าให้�นาสิ่นใจ• ปีร$บปีร2ง่ที่าง่ด้�านเที่คืน คื

• Search Engine• Feedback form

บที่สิ่ร2ปี

• การม"ล�กเลนในเว�บมากมายไมได้�ช้วยให้�คืนช้อบใช้�เว�บ แต์กล$บเปี)นการไลคืนไปีอ"กต์าง่ห้าก

• ที่+าที่2กว ถึ"ที่าง่ที่"�จะช้วยให้�คืนใช้�ง่านเว�บเราได้�ง่ายและได้�ข้�อม�ลที่"�เคื�าต์�อง่การให้�มากที่"�สิ่2ด้

• Web usability ม"สิ่วนอยาง่มากในการเพื่ �มปีร มาณล�กคื�าและย$ง่ช้วยให้�ล�กคื�ากล$บมาใช้�บร การเว�บเราอ"ก

ปีฏิ บ$ต์ การ• สิ่ม$คืรใช้�บร การ Google Adsense

• เพื่ �ม Search Engine ในเว�บไซต์�ข้อง่ต์$วเอง่• เพื่ �ม Feedback Form ในเว�บไซต์�ข้อง่ต์$วเอง่• เข้"ยนแนวที่าง่ในการปีร$บปีร2ง่เว�บไซต์�ข้อง่ต์$วเอง่

Search Engine• เว�บไซต์�ที่"�ด้"คืวรม"ระบบคื�นห้า ห้ร�อวา search engine ที่"�ด้"

เพื่��อให้�ผู้��ใช้�สิ่ามารถึคืนห้าข้�อม�ลที่"�ต์�อง่การได้�อยาง่ม"ปีระสิ่ ที่ธิ ภาพื่• AdSense for Search เปี)นบร การจาก Google ซ��ง่บร การน"-

เปี8ด้ให้�บ2คืคืลที่$�วไปีใช้� Google เปี)นระบบคื�นห้าข้�อม�ลข้อง่เว�บต์$วเอง่ได้� แถึมผู้��ใช้�อาจม"รายได้�จากโฆษณาที่"�ต์ ด้มาก$บระบบน"-ด้�วย

• รายละเอ"ยด้ https://www.google.com/adsense/afs- settings

สิ่ม$คืรใช้�ง่าน AdSense for Search • ข้$-นแรกสิ่2ด้ต์�อง่ สิ่ม$คืรใช้�บร การเมล�ข้อง่ Gmail ซ��ง่จะได้�

email account เปี)น ***@gmail.com และจ+าเปี)นต์�อง่ใช้� email น"-ที่2กคืร$-ง่ที่"�เราใช้�บร การอ��นๆจาก 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

กลอง่ร$บคืวามคื ด้เห้�นห้ร�อวาร$บคื+าสิ่$�ง่ซ�-อจากล�กคื�า

• เปี)นสิ่วนสิ่+าห้ร$บต์ ด้ต์อสิ่��อสิ่ารระห้วาง่ผู้��ใช้�(ล�กคื�า) ก$บผู้��ปีระกอบการ

• อยาง่ง่ายที่"�สิ่2ด้คื�อเม��อกด้ปี2@มสิ่ง่ข้�อคืวาม ระบบจะสิ่ง่เมล�มาย$ง่ผู้��ปีระกอบการ เห้มาะสิ่+าห้ร$บธิ2รก จข้นาด้เล�กที่"�ม"ผู้��ต์อบเมล�เพื่"ยง่ไมก"�คืน

• ระด้$บสิ่�ง่ข้�-นมาจะเปี)นการใช้� Database ในการเก�บข้�อม�ล ซ��ง่จะง่ายต์อการว เคืราะห้�ข้�อม�ลในภายห้ล$ง่

ใช้�บร การ Free eMail Form (1)

• สิ่ม$คืรสิ่มาช้ ก http://www.emailmeform.com

1

2

สิ่ร�าง่ห้น�า Thank you

เปี)นห้$วข้�อ Email เม��อระบบสิ่ง่มา

ใช้�บร การ 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. TravelYour Email Address: mrtravel@travelman.comSubject: QuestionMessage: Dear Sir/Madam,

Do you provide service about blah blah...---------------------------------------------------------------------Visitor Ip: 124.120.35.3