<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Design Website ออกแบบเว็บไซต์ ออกแบบเว็บ รับทำเว็บ &#187; Website Design</title>
	<atom:link href="http://www.thaidesignwebsite.com/tag/website-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.thaidesignwebsite.com</link>
	<description></description>
	<lastBuildDate>Thu, 26 Jan 2012 10:05:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Website Usability : ตัดคำที่ไม่จำเป็นออกไปบ้าง</title>
		<link>http://www.thaidesignwebsite.com/website-usability-%e0%b8%95%e0%b8%b1%e0%b8%94%e0%b8%84%e0%b8%b3%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b8%88%e0%b8%b3%e0%b9%80%e0%b8%9b%e0%b9%87%e0%b8%99%e0%b8%ad%e0%b8%ad%e0%b8%81/</link>
		<comments>http://www.thaidesignwebsite.com/website-usability-%e0%b8%95%e0%b8%b1%e0%b8%94%e0%b8%84%e0%b8%b3%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b8%88%e0%b8%b3%e0%b9%80%e0%b8%9b%e0%b9%87%e0%b8%99%e0%b8%ad%e0%b8%ad%e0%b8%81/#comments</comments>
		<pubDate>Mon, 27 Sep 2010 18:05:02 +0000</pubDate>
		<dc:creator>Thai Design Website</dc:creator>
				<category><![CDATA[Article]]></category>
		<category><![CDATA[happy talk]]></category>
		<category><![CDATA[instruction]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[website usability]]></category>

		<guid isPermaLink="false">http://www.thaidesignwebsite.com/?p=669</guid>
		<description><![CDATA[ผลดีของการตัดทอนข้อความที่ไม่จำเป็นออกไปมีอะไรบ้าง, Happy talk คืออะไร และวิธีการเขียน Instruction ให้มีประสิทธิภาพและไม่น่าเบื่อ...]]></description>
			<content:encoded><![CDATA[<p>เมื่อเราดูหน้าเว็บไซต์ส่วนใหญ่ เรามักจะได้เห็นข้อความมากมายที่กินเนื้อที่เป็นจำนวนมาก แถมยังไม่มีใครอ่านอีกด้วย</p>
<p>การที่เราตัดข้อความที่ไม่จำเป็นออกไปจะส่งผลดีดังนี้ :</p>
<p>1. ลดปริมาณส่ิงก่อกวน (noise) ในหน้าเว็บ<br />
2. ทำให้เนื้อหาที่จำเป็นเด่นสะดุดตามากขึ้น<br />
3. ทำให้หน้าเว็บเพจสั้นขึ้น ทำให้ผู้ใช้เห็นได้ครบทั้งหน้าโดยไม่ต้องสกรอล (scroll)</p>
<p><strong>Happy talk must die </strong></p>
<p>Happy talk คืออะไร?<br />
Happy talk คือ เนื้อหาที่เป็นบทนำ ที่เปรียบเสมือนจะทำหน้าที่เป็นพนักงานต้อนรับผู้เยี่ยมชม ที่หน้าเว็บไซต์ และคอยบอกเราว่าเว็บนี้มันดีอย่างไร หรือว่าเราจะได้เห็นอะไรในแต่ละ section ของเว็บไซต์</p>
<p>ถ้าหากคุณไม่แน่ใจว่าตรงไหนคือ happy talk มันมีวิธีทดสอบวิธีนึงที่ได้ผลเป็นอย่างดีคือ ถ้าระหว่างที่คุณอ่านแล้วคุณได้ยินเสียงเล็กๆ อยู่ใกล้ๆด้านหลังหัวคุณ พูดว่า &#8220;บลา บลา บลา บลา บลา&#8230;&#8221;  ข้อความที่คุณกำลังอ่านนั่นแหละ คือ Hapy talk</p>
<p>Happy talk จำนวนมากจะเป็นการเขียนส่งเสริมการขายอย่างนึง ซึ่งคุณจะพบได้ตามพวกโบรชัวร์ ที่เนื้อหาไม่ได้ถ่ายทอดข้อมูลที่มีประโยชน์ แต่จะให้ความสำคัญไปที่การอธิบายว่า พวกเค้านั้นดีขนาดไหน</p>
<p>Happy talk บางครั้งเราจะพบเห็นได้บนหน้า home และมักจะขึ้นด้วยคำว่า &#8220;Welcome to &#8230;&#8221;</p>
<p>ถึงแม้ว่า Happy talk จะดูเหมือนเป็นแค่ข้อความสั้นๆ แต่ว่าผู้ใช้ก็ไม่มีเวลาที่จะอ่านมัน พวกเค้าต้องการที่จะเข้าถึงเนื้อหาที่แท้จริงให้เร็วและง่ายที่สุด ดังนั้นเราควรลด Happy talk ให้ได้มากที่สุดเท่าที่จะทำได้</p>
<p><strong>Instructions must die</strong></p>
<p>อีกหนึ่งเนื้อหาที่มีความจำเป็นน้อยก็คือ instruction (วิธีใช้) คุณจำเป็นต้องรู้ว่า instruction นั้นเป็นสิ่งที่ผู้ใช้เว็บไซต์จะไม่อ่านมัน จนกว่าพวกเค้าจะพยายามซ้ำแล้วก็ยังไม่สำเร็จ แต่ถ้า instruction มีความยาวยืดเยื้อ ทำให้อัตราของผู้ใช้ที่จะหาข้อมูลที่เค้าต้องการมีน้อยลง</p>
<p>คุณควรทำให้ทุกอย่างสามารถอธิบายตัวเอง (self-explanatory) ได้อยากชัดเจน หรือให้ได้มากที่สุดเท่าที่จะทำได้ จะได้ลดปริมาณของ instruction แต่ถ้าจำเป็นต้องใช้ instruction จริงๆ ก็ควรจะเขียนให้น้อยที่สุด</p>
<p><strong>ตัวอย่างการตัดทอน instruction (เรายกตัวอย่างข้อความเกี่ยวกับการอธิบายวิธีใช้แบบสอบถามจากเว็บไซต์นึงขึ้นมาเพื่อศึกษา)</strong></p>
<p><strong>Before: 103 words</strong></p>
<p><em>The following questionnaire is designed to provide us with information that will help us improve the site and make it more relevant to your needs.<br />
</em><span style="color: #ff0000;">ในประโยคแรกเป็นแค่ happy talk พวกเราทุกคนรู้อยู่แล้วว่า การทำแบบสำรวจทำเพื่ออะไร ส่ิงเดียวที่เราต้องการมีเพียงคำว่า &#8220;help us&#8221; เพื่อแสดงให้เราเห็นว่า เรากำลังจะช่วยคุณกรอกแบบสอบถาม</span></p>
<p><em>Please select your answers from the drop-down menus and radio buttons below.<br />
<span style="font-style: normal;"><span style="color: #ff0000;">ผู้ใช้ส่วนใหญ่ไม่ได้ต้องการให้คุณบอกว่าจะกรอกข้อมูลอย่างไร และสำหรับใครที่ต้องการ พวกเค้าก็จะไม่รู้อยู่ดีว่า &#8220;drop-down menu&#8221; และ &#8220;radio button&#8221;  คืออะไร</span></span></em></p>
<p><em>At the bottom of this form you can choose to leave your name, address, and telephone number. If you leave your name and number, you may be contacted in the future to participate in a survey to help us improve this site.<br />
<span style="font-style: normal;"><span style="color: #ff0000;">instruction ในส่วนนี้ไม่ได้มีประโยชน์อะไรเลย ส่ิงเดียวที่มันสื่อให้เราคือ ทำให้เรารู้สึกกลัว</span></span></em></p>
<p><em>If you have comments or concerns that require a response please contact Customer Service.<br />
<span style="font-style: normal;"><span style="color: #ff0000;">เมื่อมาถึงจุดนี้ก็ปรากฎความจริงข้อนึงว่า เจ้าของเว็บไซต์ไม่จำเป็นต้องใช้แบบสอบถามนี้เลยก็ได้ ถ้าต้องการได้ข้อมูลที่เป็นประโยชน์และสำคัญกว่า แต่โชคร้ายที่เค้าไม่ได้บอกผู้ใช้เว็บไซต์ว่า เราจะติดต่อกับ customer service ได้ที่ไหน หรือถ้าจให้ดีกว่านั้นเค้าควรให้ link ที่เราสามารถติดต่อได้จากตรงนี้เลย</span></span></em></p>
<p><strong>After: 41 words </strong></p>
<p><em>Please help us improve the site by answering these questions. It should only take you 2-3 minutes to complete this survey.<br />
</em><em>NOTE: If you have comments or concerns that require a response don&#8217;t use this form. Instead, please contact <span style="color: #0000ff;"><span style="text-decoration: underline;">Customer Service</span></span>.</em></p>
<p><span style="color: #ff0000;">คุณสามารถตัดทอนคำอธิบายวิธีใช้แบบสอบถามได้เหลือเพียงไม่กี่คำเท่านั้น</span></p>
<p>ที่มา: ศศิวิมล</p>
<p><em><br />
</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.thaidesignwebsite.com/website-usability-%e0%b8%95%e0%b8%b1%e0%b8%94%e0%b8%84%e0%b8%b3%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b8%88%e0%b8%b3%e0%b9%80%e0%b8%9b%e0%b9%87%e0%b8%99%e0%b8%ad%e0%b8%ad%e0%b8%81/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web Usability คืออะไร</title>
		<link>http://www.thaidesignwebsite.com/website-usability-%e0%b8%84%e0%b8%b7%e0%b8%ad%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%a3/</link>
		<comments>http://www.thaidesignwebsite.com/website-usability-%e0%b8%84%e0%b8%b7%e0%b8%ad%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%a3/#comments</comments>
		<pubDate>Thu, 26 Aug 2010 16:02:55 +0000</pubDate>
		<dc:creator>Thai Design Website</dc:creator>
				<category><![CDATA[Article]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[website usab]]></category>

		<guid isPermaLink="false">http://www.thaidesignwebsite.com/?p=664</guid>
		<description><![CDATA[Web usability คือ การทำให้เว็บของคุณใช้งานง่าย โดยที่ผู้ใช้ไม่จำเป็นต้องเรียนรู้อะไรเป็นพิเศษ จุดประสงค์ของการคำนึงถึงหลัก usability คือ...]]></description>
			<content:encoded><![CDATA[<div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #ffffff; font: normal normal normal 13px/19px Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-family: Times; line-height: normal; font-size: small; padding: 0.6em; margin: 0px;">
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em;"><strong>Web usability</strong> คือ การทำให้เว็บของคุณใช้งานง่าย โดยที่ผู้ใช้ไม่จำเป็นต้องเรียนรู้อะไรเป็นพิเศษ จุดประสงค์ของการคำนึงถึงหลัก usability คือ</p>
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em;"><strong>1. นำเสนอข้อมูลให้กับผู้ใช้ได้อย่างชัดเจนและกระชับ<br />
</strong>ผู้ใช้เว็บไซต์ส่วนใหญ่ไม่นิยมอ่านเนื้อหาเยอะๆ พวกเค้าจะแค่กวาดสายตา (scan) เพื่อหาเฉพาะส่ิงที่เค้าสนใจ หรือ กำลังค้นหาอยู่เท่านั้น ดังนั้นการใส่เนื้อหาที่ไม่ใช่สาระสำคัญลงไปจะทำให้ผู้ใช้สับสน และล้มเลิกความพยายามในการหาส่ิงต่างๆในเว็บคุณ</p>
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em;"><strong>2. มีตัวเลือก และ ทางเลือกที่ชัดเจนให้กับผู้ใช้<br />
</strong>หลังจากที่ผู้ใช้เว็บไซต์ scan เนื้อหา และพบส่ิงที่คิดว่า &#8220;น่าจะใช่&#8221; ส่ิงที่ตนกำลังค้นหาอยู่ พวกเค้าจะคลิกมัน พวกเค้าจะไม่เสียเวลาในการพิจารณาว่ามันใช่ส่ิงที่ถูกต้องหรือไม่ ถ้าหากมันไม่ใช่ พวกเค้าก็แค่คลิก &#8216;back&#8217; แต่ก็จะมีข้อแม้อยู่ว่าผู้ใช้ก็มักจะมีควาอดทนต่ำ ถ้าพวกเค้าคลิกไปใน direction ที่ผิดๆ 2-3 ครั้งเค้าก็อาจจะล้มเลิกความตั้งใจในการค้นได้เช่นกัน ดังนั้นถ้าหากเรามีการจัดการกับเนื้อหาที่ดีผู้ใช้ก็จะไม่หลงทางไปกับการคลิกไปดูในส่ิงที่เค้าไม่ได้สนใจอยู่</p>
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em;"><strong>3. กำจัดความกำกวมเกี่ยวกับ &#8220;ผลของการกระทำ&#8221;<br />
</strong>นักออกแบบไม่ควรให้ผู้ใช้เว็บไซต์ต้องคิดหรือตีความปุ่ม interactive ต่างๆ ว่าถ้ากดไปแล้วจะเป็นอย่างไร เช่น จะมีอะไรเกิดขึ้น หลังการคลิกปุ่ม delete/remove/purchase</p>
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em;"><strong>4. จัดวางส่ิงที่สำคัญที่สุดได้ถูกที่บนหน้าเว็บไซต์<br />
</strong>นักออกแบบรู้อยู่แล้วว่าในเว็บไซต์ที่ออกแบบนั้น<strong> </strong>อะไรคือส่ิงสำคัญที่ต้องการจะเน้นให้เด่นชัด เพื่อให้ผู้ใช้เว็บไซต์เห็นได้อย่างสะดุดตา</p>
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em;">
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em;">ส่วนหลักการอื่นๆของ Website Usability จะมีอะไรบ้างคอยติดตามต่อไปนะคะ หรือจะ follow twitter ได้ที่ @sasiwimon ก็ได้นะคะ</p>
<p style="margin-top: 0.4em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; line-height: 1.5em;">
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.thaidesignwebsite.com/website-usability-%e0%b8%84%e0%b8%b7%e0%b8%ad%e0%b8%ad%e0%b8%b0%e0%b9%84%e0%b8%a3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Website Usability ภาค 4</title>
		<link>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-4/</link>
		<comments>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-4/#comments</comments>
		<pubDate>Thu, 26 Aug 2010 08:22:27 +0000</pubDate>
		<dc:creator>Thai Design Website</dc:creator>
				<category><![CDATA[Article]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[website usability]]></category>

		<guid isPermaLink="false">http://www.thaidesignwebsite.com/?p=658</guid>
		<description><![CDATA[พื้นที่สีขาว (White Space) ช่วยให้ทำความเข้าใจเนื้อหาได้ง่ายขึ้น / ทดสอบประสิทธิภาพด้วยคนจำนวนน้อยๆก็พอ / หน้าแสดงข้อมูลสินค้าที่ดีจะช่วยให้คุณโดดเด่น / ผู้ใช้ส่วนใหญ่จะไม่ดูโฆษณา]]></description>
			<content:encoded><![CDATA[<div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #ffffff; font: normal normal normal 13px/19px Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-family: Times; line-height: normal; font-size: small; padding: 0.6em; margin: 0px;">
<p><strong>7. พื้นที่สีขาว (White Space) ช่วยให้ทำความเข้าใจเนื้อหาได้ง่ายขึ้น</strong></p>
<p>ดีไซน์เนอร์ส่วนใหญ่รู้คุณค่าของพื้นที่สีขาวเป็นอย่างดี (พื้นที่ว่างระหว่าง paragraph, รูปภาพ, ปุ่ม และ ไอเท็มอื่นๆบนหน้าเว็บ</p>
<p>เราสามารถรวมไอเท็มเหล่านี้ได้โดยลดช่องว่างระหว่างกัน และไปเพ่ิมช่องว่างระหว่างไอเท็มกรุ๊ปอื่นในหน้าเพจแทน นี่คือส่ิงสำคัญสำหรับการแสดงความสัมพันธ์ระหว่างไอเท็ม และสร้างลำดับชั้นขององค์ประกอบในหน้าเพจ<br />
พ้ืนที่สีขาวยังช่วยทำให้เนื้อหาในเว็บอ่านได้ง่ายขึ้น มีการวิจัยที่พบข้อดีของการใช้พื้นที่สีขาวระหว่าง paragraph และ ขอบด้านซ้าย-ขวา ว่าสามารถเพ่ิมความเข้าใจในการอ่านได้ถึงเกือบ 20%</p>
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 490px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="white space" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/netsetter.jpg" alt="Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read." width="480" height="400" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.</dd>
</dl>
</div>
<p><strong>8. ทดสอบประสิทธิภาพด้วยคนจำนวนน้อยๆก็พอ</strong></p>
<p>ผลการศึกษาของ Jakob Nielsen พบว่าจำนวนของ tester ในการ test usability แค่ 5 คน จะเปิดเผย 85% ของปัญหาในเว็บไซต์ของคุณ และถ้า tester 15 คน จะเจอปัญหาในเว็บไซต์คุณทั้งหมด</p>
<p>ปัญหาใหญ่ที่สุดจะถูกค้นพบได้ด้วย tester 1-2 คน และ tester คนอื่นๆที่เหลือจะเห็นด้วยกับปัญหาเหล่านั้นและพยายามค้นหาปัญหาอื่นๆที่เล็กกว่านั้น โดย tester 2 คน จะเจอปัญหาครึ่งนึงในเว็บไซต์ของคุณ นั่นหมายความว่าการทดสอบไม่จำเป็นต้องแพร่กระจายกว้างขวางหรือว่าใช้ต้นทุนสูงๆถึงจะได้ผลลัพธ์ที่ดี จะดีที่สุดก็คือ test ด้วย tester 0-1 คน ดังนั้นอย่ากลัวที่จะทำการทดสอบเล็กๆน้อยๆ เพราะอย่างไรก็ตามทดสอบซักหน่อยก็ดีกว่าไม่ทำเลย</p>
<p><img style="border: 0px initial initial;" title="usability testing" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/usertests.png" alt="" width="480" height="287" /></p>
<p><strong>9. หน้าแสดงข้อมูลสินค้าที่ดีจะช่วยให้คุณโดดเด่น</strong></p>
<p>ถ้าในเว็บไซต์ของคุณมีหน้าผลิตภัณฑ์ (Product) คนที่จะเข้ามาซื้อของออนไลน์ย่อมมองหาผลิตภัณฑ์เหล่านั้น แต่การที่มีหน้าผลิตภัณฑ์หลายหน้าทำให้ข้อมูลขาดหายไปเวลาคนดูแบบผ่านๆตา นี่ถือเป็นปัญหาที่สำคัญมาก เพราะว่าข้อมูลของผลิตภัณฑ์มีส่วนช่วยในการตัดสินใจซื้อ</p>
<p>เตรียมข้อมูลเกี่ยวกับผลิตภัณฑ์แต่อย่าให้เนื้อหาเยอะเกินไป จงทำให้ข้อมูลง่ายต่อการเข้าใจ สร้างหน้าเพจให้สามารถอ่านอย่างผ่านๆตาได้โดยการแบ่งเนื้อหาเป็นส่วนเล็กๆ (smaller segment) และใช้หัวข้อย่อย ใส่รูปภาพของผลิตภัณฑ์ และใช้ภาษาที่ถูกต้อง ห้ามใช้ภาษาเฉพาะกลุ่มที่จะทำให้ผู้ใช้ไม่เข้าใจ</p>
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 490px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="Product page" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/ipod.jpg" alt="Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed." width="480" height="320" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.</dd>
</dl>
</div>
<p><strong>10. ผู้ใช้ส่วนใหญ่จะไม่ดูโฆษณา</strong></p>
<p style="margin-bottom: 1.15em;">รายงานของ Jakob Nielsen เปิดเผยว่าโดยพื้นฐานของผู้ใช้ส่วนใหญ่จะไม่มอง ad banner ถ้าพวกเค้ากำลังมองหาข้อมูลเล็กๆน้อยๆบนหน้าเพจ หรือ ก้อนเนื้อหา พวกเค้าจะไม่ฟุ้งซ่านไปกับโฆษณาด้านข้าง ส่ิงที่เราต้องการจะบอกไม่ใช่เพียงแค่คนจะหลีกหนีโฆษณา แต่พวกเค้ายังหลีกหนีส่ิงที่ดูเหมือนโฆษณาถึงแม้ว่ามันจะไม่ใช่โฆษณาก็ตาม</p>
<p style="margin-bottom: 1.15em;">การดีไซน์ให้ navigation ดูใหญ่ๆ อาจจะทำให้ดูคล้ายกับ banner ดังนั้นขอให้ระมัดระวังการใช้องค์ประกอบเหล่านี้</p>
<p style="margin-bottom: 1.15em;">ถ้าเช่นนั้นคุณคงกำลังคิดว่างั้นเราก็ทำทำโฆษณาให้ดูเหมือนเนื้อหาจะได้มีคนให้ความสนใจและคลิก ถึงแม้ว่าการทำเช่นนี้อาจจะเพ่ิมรายได้ให้กับคุณ แต่มันจะมาพร้อมกับความเชื่อถือของผู้ใช้ ดังนั้นก่อนที่คุณจะเลือกที่จะทำอย่างนั้นจงระลึกไว้ว่าคุณกำลังเล่นกับ &#8220;รายได้ระยะสั้น และ ความน่าเชื่อถือระยะยาว&#8221;</p>
<p style="margin-bottom: 1.15em;">
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 490px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="Most Users Are Blind To Advertising" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/flashden.jpg" alt="The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users." width="480" height="411" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.</dd>
</dl>
</div>
<p style="margin-bottom: 1.15em;">
<address></address>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Website Usability ภาค 3</title>
		<link>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-3/</link>
		<comments>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-3/#comments</comments>
		<pubDate>Thu, 26 Aug 2010 08:20:24 +0000</pubDate>
		<dc:creator>Thai Design Website</dc:creator>
				<category><![CDATA[Article]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[website usability]]></category>

		<guid isPermaLink="false">http://www.thaidesignwebsite.com/?p=655</guid>
		<description><![CDATA[สีที่ดีที่สุดสำหรับแสดงความเป็นลิงค์ (link) คือสีน้ำเงิน / ช่องเสิร์ช (Search Box) ที่ดีควรมีความกว้าง 27 ตัวอักษร]]></description>
			<content:encoded><![CDATA[<div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #ffffff; font: normal normal normal 13px/19px Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-family: Times; line-height: normal; font-size: small; padding: 0.6em; margin: 0px;">
<p><strong>5. สีที่ดีที่สุดสำหรับแสดงความเป็นลิงค์ (link) คือสีน้ำเงิน</strong></p>
<p>การออกแบบให้เว็บไซต์ของคุณมีเอกลักษณ์นั้นเป็นส่ิงที่ดี แต่ทว่า ถ้าพูดถึงเรื่อง &#8216;usability&#8217; การทำในส่ิงที่ทุกๆคนเค้าทำกันนั่นแหละดีที่สุด</p>
<p><strong>เพราะเหตุใดจึงเป็นเช่นนั้น?</strong><br />
เพราะว่าเวลาคนเข้าชมเว็บไซต์ใหม่ การมองหาสิ่งต่างๆในเว็บไซต์ พวกเค้ามักจะเร่ิมจากตำแหน่งที่พวกเค้าพบในเว็บไซต์ส่วนใหญ่ หรือที่เรียกว่า usage patterns คนจะคาดหวังในสิ่งที่เหมืิอนเดิม เช่น สีของ link, ตำแหน่งของโลโก้เว็บไซต์, พฤติกรรมของ tab เมนู เป็นต้น</p>
<p><strong>สีของ link ควรเป็นสีอะไร?</strong><br />
สิ่งแรกที่คุณควรคำนึงถึงคือ &#8220;contrast&#8221; (สีของ link ควรเข้ม หรือ อ่อน เพียงพอที่จะตัดกับสีของ background ได้อย่างชัดเจน) อย่างที่สองคือ link ควรโดดเด่นจาก text อื่นๆ (เช่น ไม่ควรใช้ link สีดำ กับเนื้อหาที่เป็นสีดำ) และอย่างสุดท้ายผลการวิจัยแสดงให้เห็นว่าสีน้ำเงินเป็นสีที่ดีที่สุดสำหรับ link โดยสี link มาตรฐานของ browser  เป็นสีน้ำเงิน ดังนั้นคนจึงคาดหวังว่า link จะต้องเป็นสีน้ำเงิน แต่การเลือกใช้สีที่แตกต่างก็ไม่ใช่ปัญหา แต่มันจะมีผลกระทบต่อความเร็วของผู้ใช้เว็บไซต์ที่จะหา link</p>
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 490px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="color link" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/google2.png" alt="Google keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate." width="480" height="322" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Google keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate.</dd>
</dl>
</div>
<p><strong>6. ช่องเสิร์ช (Search Box) ที่ดีควรมีความกว้าง 27 ตัวอักษร</strong></p>
<p style="margin-bottom: 1.15em;">ในปัจจุบัน search box ส่วนใหญ่จะสั้นเกินไป ปัญหาของการที่ box สั้นเกินไปก็คือ เวลาเราพิมพ์คำค้นหาลงไปยาวๆ จะมีคำบางส่วนที่ถูกซ่อนไป ทำให้ยากต่อการดูหรือแก้ไขส่ิงที่เราพิมพ์</p>
<p style="margin-bottom: 1.15em;">จากการศึกษาพบว่าโดยเฉลี่ย search box จะมีความกว้างอยู่ที่ 18 ตัวอักษร ซึ่ง 27% ของคำที่คนใช้ค้นหายาวเกินไปที่จะพอดีในช่องเสิร์ชที่มีความยาวขนาดนี้ ดังนั้นคุณจึงควรขยายช่องเสิร์ชเป็น 27 ตัวอักษร ซึ่งจะทำให้เหมาะสมกับคำค้นหาถึง 90% และจำไว้ว่าคุณควรวัดขนาดความกว้างด้วย &#8220;em&#8221; (หน่วยวัดความกว้างของตัวพิมพ์) ไม่ใช่ point หรือ pixel โดย 1 em คือความกว้างและความสูงของ &#8220;m&#8221; 1 ตัว (ใช้ฟ้อนขนาดใดก็ได้ที่เว็บของคุณเซตไว้) และใช้มันเป็น scale ในการวัดความกว้างให้ได้เท่ากับ 27 ตัวอักษร</p>
<p style="margin-bottom: 1.15em;">โดยทั่วไป search boxes กว้างดีกว่าสั้นเพราะจะทำให้ผู้ใช้สามารถดูและตรวจสอบคำค้นหาของเค้าได้เร็วกว่า คำแนะนำนี้อาจดูเป็นเรื่องที่เรียบง่ายมาก แต่คนส่วนใหญ่ก็มักจะละเลยและไม่ให้ความสำคัญ</p>
<p style="margin-bottom: 1.15em;">
<p style="margin-bottom: 1.15em;">
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 421px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="search box" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/apple.jpg" alt="Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”" width="411" height="194" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”</dd>
</dl>
</div>
<address></address>
<address></address>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Website Usability ภาค 2</title>
		<link>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-2/</link>
		<comments>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-2/#comments</comments>
		<pubDate>Thu, 26 Aug 2010 08:18:06 +0000</pubDate>
		<dc:creator>Thai Design Website</dc:creator>
				<category><![CDATA[Article]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[website usability]]></category>

		<guid isPermaLink="false">http://www.thaidesignwebsite.com/?p=652</guid>
		<description><![CDATA[คุณภาพของการดีไซน์คือตัวบ่งชี้ความน่าเชื่อถือ / ส่วนใหญ่ไม่สกอล (scroll) หน้าเว็บ]]></description>
			<content:encoded><![CDATA[<div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #ffffff; font: normal normal normal 13px/19px Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-family: Times; line-height: normal; font-size: small; padding: 0.6em; margin: 0px;">
<p><strong>3. คุณภาพของการดีไซน์คือตัวบ่งชี้ความน่าเชื่อถือ</strong></p>
<p>จากหลายๆงานวิจัยพบว่าคนเรามักจะตัดสินหนังสือจากหน้าปกก่อน เว็บไซต์ก็เช่นกัน องค์ประกอบต่างๆ เช่น layout, ความกลมกลืน, ฟ้อน, สี และ style มีผลต่อการรับรู้ของ user ทั้งส้ิน การเลือกใช้ภาพสำหรับเว็บไซต์ คุณไม่ควรเลือกภาพด้วยเหตุผลที่ความสวยงามเท่านั้น แต่คุณควรเลือกภาพที่เหมาะกับกลุ่มเป้าหมายของคุณด้วย</p>
<p>นอกจากนี้องค์ประกอบอื่นๆที่มีผลต่อความน่าเชื่อถือของเว็บไซต์ คือ คุณภาพของเนื้อหาในเว็บ, ปริมาณของการ error, อัตราการอัพเดท, การใช้งานง่าย และ ความน่าเชื่อถือของผู้เขียน</p>
<p style="margin-bottom: 1.15em;"><strong>4. ส่วนใหญ่ไม่สกอล (scroll) หน้าเว็บ</strong></p>
<p style="margin-bottom: 1.15em;">Jakob Nielsen เปิดเผยผลการศึกษาเรื่องปริมาณของ user ที่ scroll ว่ามีผู้เข้าชมเว็บไซต์เพียง 23% เท่านั้นที่ scroll first page ในการเข้าเว็บไซต์นั้นครั้งแรก นั่นหมายความว่า มีผู้เข้าชมเว็บไซต์อีกถึง 77% ที่ไม่ scroll พวกเค้าจะดูเฉพาะเนื้อหาที่โชว์อยู่ที่หน้าเว็บตอนที่ยังไม่ scroll เท่านั้น</p>
<p style="margin-bottom: 1.15em;">นอกจากนี้เปอร์เซ็นต์ของ user ที่ scroll จะลดลงเป็น 16% เมื่อเข้าเว็บไซต์นั้นมาเป็นครั้งที่ 2 ดังนั้นจึงควรจัดวางข้อมูลที่สำคัญๆเอาไว้ในตำแหน่งที่สะดุดตา โดยเฉพาะอย่างย่ิงบน landing pages</p>
<p style="margin-bottom: 1.15em;">แต่นั่นไม่ได้หมายความว่าคุณจะต้องอัดทุกอย่างไว้ในพื้นที่ส่วนบนเท่านั้น ขอเพียงแค่คุณใช้มันให้เกิดประโยชน์สูงสุดก็พอ การที่เนื้อหาอัดแน่นเกินไปจะทำให้เข้าถึงได้ยาก และเมื่อ user เจอเนื้อหาที่เยอะๆ พวกเค้าก็จะไม่รู้ว่าควรจะเร่ิมดูที่ตรงไหนก่อน</p>
<p style="font: normal normal normal 12px/normal Thonburi; margin: 0px;">นี่เป็นส่วนที่สำคัญที่สุดของหน้า<span style="font: normal normal normal 12px/normal Helvetica;"> home </span>ที่ผู้เข้าชมเกือบทั้งหมดจะต้องพบเห็น<span style="font: normal normal normal 12px/normal Helvetica;"> </span>จึงควรใส่องค์ประกอบสำคัญๆลงไปดังนี้</p>
<ol>
<li style="padding-bottom: 0.45em;">ชื่อของเว็บไซต์</li>
<li style="padding-bottom: 0.45em;">คุณค่าของเว็บไซต์ (ผู้ใช้จะได้ประโยชน์อะไรจากเว็บไซต์นี้)</li>
<li style="padding-bottom: 0.45em;">Navigation สำหรับ section หลักๆ เพราะจะทำให้ผู้ใช้เข้าถึงประเด็นได้ง่ายขึ้น</li>
</ol>
<p style="font: normal normal normal 12px/normal Thonburi; margin: 0px;">อย่างไรก็ตาม<span style="font: normal normal normal 12px/normal Helvetica;"> </span>ลักษณะนิสัยของผู้ใช้นั้นเปลี่ยนแปลงได้เร็วมาก<span style="font: normal normal normal 12px/normal Helvetica;"> </span>รายงานวิจัยล่าสุดระบุว่า<span style="font: normal normal normal 12px/normal Helvetica;"> </span>ผู้ใช้จำนวนมากนั้นชื่นชอบการเลื่อนขึ้นลงเพื่อชมเว็บไซท์มากกว่าการเปลี่ยนจะต้องเปลี่ยนหน้าเว็บไซท์บ่อยๆ<span style="font: normal normal normal 12px/normal Helvetica;"> </span>และผู้ใช้อีกจำนวนไม่น้อยที่รู้สึกว่าเนื้อหาสำคัญของเว็บไซท์นั้นไม่จำเป็นต้องอยู่ในหน้าจอแรกที่เห็นเสมอไป<span style="font: normal normal normal 12px/normal Helvetica;"> </span>ซึ่งเป็นเพราะความละเอียดหน้าจอคอมพิวเตอร์ของผู้ใช้นั้นแตกต่างกัน<span style="font: normal normal normal 12px/normal Helvetica;"> </span></p>
<div><span style="font-family: Helvetica; font-size: small;"><span style="line-height: normal;"></p>
<p style="font: normal normal normal 12px/normal Thonburi; margin: 0px;">ดังนั้น<span style="font: normal normal normal 12px/normal Helvetica;"> </span>จึงเป็นการดีที่จะมีการแบ่งเลย์เอาท์ของคุณออกเป็นส่วนๆ<span style="font: normal normal normal 12px/normal Helvetica;"> </span>และแยกมันออกจากกันด้วยพื้นที่ว่าง<span style="font: normal normal normal 12px/normal Helvetica;"> </span>ซึ่งจะทำให้ง่ายต่อการค้นหา</p>
<p style="font: normal normal normal 12px/normal Thonburi; margin: 0px;">
<p style="font: normal normal normal 12px/normal Thonburi; margin: 0px;">
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 490px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="Most Users Do Not Scroll" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/basecamp.jpg" alt="Basecamp makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images." width="480" height="339" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Basecamp makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images.</dd>
</dl>
</div>
<p style="font: normal normal normal 12px/normal Thonburi; margin: 0px;">
<p style="font: normal normal normal 12px/normal Thonburi; margin: 0px;">
<address></address>
<p></span></span></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Website Usability ภาค 1</title>
		<link>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-1/</link>
		<comments>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-1/#comments</comments>
		<pubDate>Thu, 26 Aug 2010 08:15:30 +0000</pubDate>
		<dc:creator>Thai Design Website</dc:creator>
				<category><![CDATA[Article]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[website usability]]></category>

		<guid isPermaLink="false">http://www.thaidesignwebsite.com/?p=648</guid>
		<description><![CDATA[Form Label จะมีประสิทธิภาพที่สุดถ้าวางอยู่เหนือช่องสำหรับกรอก (The Field) / ผู้ใช้ (User) จะให้ความสนใจกับใบหน้าของคน]]></description>
			<content:encoded><![CDATA[<p>ว็บไซต์ที่ดีนอกจากจะต้องมีเนื้อหาและดีไซน์ที่เหมาะสมแล้ว ยังต้องคำนึงถึงการใช้งานของผู้เยี่ยมชมเว็บไซต์ที่สามารถใช้งานได้ง่าย ไม่เกิดความสับสน ซึ่งหลักการการออกแบบโดยคำนึงถึงการใช้งานของเว็บไซต์นี้ เราเรียกมันว่า &#8220;Website Usability&#8221;</p>
<p>Website Usability จะทำให้เว็บไซต์ที่เราออกแบบมีประสิทธิภาพในเชิงของการใช้งานมากย่ิงขึ้น และที่สำคัญหลักการเหล่านี้เป็นส่ิงที่ถูกค้นคว้าและวิจัยมาแล้ว ดังนั้นต่อไปนี้เราคงมีหลักการและเหตุผลในการชี้แจงกับลูกค้าในเชิงของการออกแบบมากย่ิงขึ้นนะคะ&#8230;</p>
<p><strong>1. Form Label จะมีประสิทธิภาพที่สุดถ้าวางอยู่เหนือช่องสำหรับกรอก (The Field)</strong></p>
<p>ในหลายๆเว็บไซต์เรามักออกแบบให้ label อยู่ฝั่งนึง และ field ที่จะต้องกรอกอยู่อีกฝั่งนึง หรือแบ่งเป็น 2 column นั่นเอง ถึงแม้ว่ารูปแบบแบบนี้จะดูดี แต่ว่ามันใช้งานค่อนข้างยาก เพราะว่าโดยปกติเวลาเรากรอกข้อมูลลงแบบฟอร์ม เราต้องกรอกจากบนลงล่าง ดังนั้นเวลา user  อ่านแบบฟอร์มแบบคร่าวๆ (scan) ก็ต้องอ่านจากบนลงล่าง การวาง label ไว้เหนือ field จึงทำให้อ่านเข้าใจได้ง่าย เพราะพออ่าน label แล้วก็กรอกข้อมูลลงใน field ได้เลย</p>
<p>และอีกสาเหตุนึงที่เราไม่ควรแยกเป็น 2 column ระหว่าง label กับ field ก็เพราะว่า เวลา user อ่านและจะต้องกวาดสายตาจากซ้ายไปขวา อาจจะทำให้ user สับสนได้ว่า label ไหน ตรงกับ field อะไร</p>
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 490px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="Tumblr form" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/tumblr.png" alt="ตัวอย่างแบบฟอร์มที่เหมาะสม" width="480" height="414" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">ตัวอย่างแบบฟอร์มที่เหมาะสม</dd>
</dl>
</div>
<p><strong>2. ผู้ใช้ (User) จะให้ความสนใจกับใบหน้าของคน</strong></p>
<p>ในหน้าเว็บไซต์ เราจะให้ความสนใจกับหน้าและตาของคน และด้วยหลักการนี้นักการตลาดจึงนำไปใช้เพื่อดึงดูดความสนใจ โดยเราจะเล่นกับ direction การมองของคนในภาพว่ามองไปที่อะไร เราก็จะให้ความสนใจกับส่ิงนั้นด้วย</p>
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 490px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="Eye-tracking" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/eyes1.jpg" alt="Eye-tracking heat map of a baby looking directly at us" width="480" height="342" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Eye-tracking heat map of a baby looking directly at us</dd>
</dl>
</div>
<div>
<dl style="text-align: center; background-color: #f3f3f3; padding-top: 4px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 490px; margin: 10px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="baby is looking at the content" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/09/eyes2.jpg" alt="And now the baby is looking at the content. Notice the increase in people looking at the headline and text." width="480" height="344" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">And now the baby is looking at the content. Notice the increase in people looking at the headline and text.</dd>
</dl>
</div>
<p>จากการศึกษาพบว่า ถ้าใบหน้าของคนในภาพไม่ได้มองมาที่เรา แต่มองไปที่ส่ิงใดส่ิงนึง เราก็จะมองไปที่ direction นั้นด้วยเช่นกัน ดังนั้นถ้าหากเราต้องการเน้นเนื้อหาตรงส่วนไหนในเว็บไซต์เราก็สามารถนำหลักการนี้ไปใช้ได้นะคะ</p>
<p>นี่เป็นเพียงหลักการคร่าวๆ 2 ข้อแรกนะคะ มีภาคต่อแน่นอนค่ะ&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thaidesignwebsite.com/website-usability-%e0%b8%a0%e0%b8%b2%e0%b8%84-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Website Design</title>
		<link>http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/</link>
		<comments>http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/#comments</comments>
		<pubDate>Thu, 07 Jan 2010 11:18:17 +0000</pubDate>
		<dc:creator>Thai Design Website</dc:creator>
				<category><![CDATA[Our Design Work]]></category>
		<category><![CDATA[Design Website]]></category>
		<category><![CDATA[Design Website Service]]></category>
		<category><![CDATA[Website Design]]></category>

		<guid isPermaLink="false">http://www.thaidesignwebsite.com/?p=421</guid>
		<description><![CDATA[ตัวอย่างงานออกแบบเว็บไซต์...]]></description>
			<content:encoded><![CDATA[<h3 style="font-size: 1.17em;"><span style="font-weight: normal; font-size: 13px; color: #888888;">Example work :</span></h3>
<h3 style="outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 1.2em; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.2em; padding: 0px; margin: 0px;"><span style="color: #888888; font-size: small;"><span style="font-weight: normal; line-height: 19px;">
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-classic/' title='website-classic'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-classic-150x150.jpg" class="attachment-thumbnail" alt="website-classic" title="website-classic" /></a>
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-dentalcareclinic/' title='website-dentalcareclinic'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-dentalcareclinic-150x150.jpg" class="attachment-thumbnail" alt="website-dentalcareclinic" title="website-dentalcareclinic" /></a>
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-inhouse-2/' title='website-inhouse'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-inhouse-150x150.jpg" class="attachment-thumbnail" alt="website-inhouse" title="website-inhouse" /></a>
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-laurent-2/' title='website-laurent'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-laurent-150x150.jpg" class="attachment-thumbnail" alt="website-laurent" title="website-laurent" /></a>
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-local/' title='website-local'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-local-150x150.jpg" class="attachment-thumbnail" alt="website-local" title="website-local" /></a>
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-preawpak-3/' title='website-preawpak'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-preawpak1-150x150.jpg" class="attachment-thumbnail" alt="website-preawpak" title="website-preawpak" /></a>
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-seagame/' title='website-seagame'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-seagame-150x150.jpg" class="attachment-thumbnail" alt="website-seagame" title="website-seagame" /></a>
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-tanaverote/' title='website-tanaverote'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-tanaverote-150x150.jpg" class="attachment-thumbnail" alt="website-tanaverote" title="website-tanaverote" /></a>
<a href='http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/website-thaia2/' title='website-thaia2'><img width="150" height="150" src="http://www.thaidesignwebsite.com/wp-content/uploads/2010/01/website-thaia2-150x150.jpg" class="attachment-thumbnail" alt="website-thaia2" title="website-thaia2" /></a>
</p>
<p></span></span></h3>
<address style="text-align: center;"> </address>
]]></content:encoded>
			<wfw:commentRss>http://www.thaidesignwebsite.com/website-design-%e0%b8%ad%e0%b8%ad%e0%b8%81%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%84%e0%b8%8b%e0%b8%95%e0%b9%8c/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

