ศึกนี้เพิ่งเริ่มต้น บริการ Cloud Storage ฮาร์ดไดรฟ์พกพา ที่ลอยอยู่บนก้อนเมฆ

<style> a { font-weight:bold; color:#346AA8; } a:hover, a:focus, a:active { text-decoration:none; } .drop-shadow { position:relative; width:90%; padding:1em; margin:2em auto 5em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50%; height:20%; } .drop-shadow:after{ right:10px; left:auto; } .round { -moz-border-radius:4px; border-radius:4px; background:#fff; color:#fe6305; } .round:before, .round:after { max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .round:after { -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } .curls { background:#befec6; color:#fa0505; border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; } .curls:before, .curls:after { bottom:12px; max-width:200px; height:55%; -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -webkit-transform:skew(-8deg) rotate(-4deg); -moz-transform:skew(-8deg) rotate(-4deg); -o-transform:skew(-8deg) rotate(-4deg); transform:skew(-8deg) rotate(-4deg); } .curls:after { -webkit-transform:skew(8deg) rotate(4deg); -moz-transform:skew(8deg) rotate(4deg); -o-transform:skew(8deg) rotate(4deg); transform:skew(8deg) rotate(4deg); } .perspective:before { background:#befec6; left:28px; bottom:8px; max-width:200px; height:35%; -webkit-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); -webkit-transform:skew(50deg); -moz-transform:skew(50deg); -o-transform:skew(50deg); transform:skew(50deg); } .perspective:after { display:none; } .raised:before { width:auto; right:10px; left:10px; bottom:0; -webkit-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); } .rotated { background:#befec6; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .rotated *:first-child:before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } </style><br /> <br /> <br /> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px; text-align: center;"> <a href="http://www.charathbank.com/wp-content/uploads/2012/04/CloudComputing_2.jpg" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><br class="Apple-interchange-newline" /><img alt="" class="aligncenter wp-image-3708" height="266" src="http://www.charathbank.com/wp-content/uploads/2012/04/CloudComputing_2.jpg" style="border-bottom-color: rgb(209, 222, 227); border-bottom-style: solid; border-bottom-width: 6px; border-color: initial; border-image: initial; border-left-color: rgb(209, 222, 227); border-left-style: solid; border-left-width: 6px; border-right-color: rgb(209, 222, 227); border-right-style: solid; border-right-width: 6px; border-top-color: rgb(209, 222, 227); border-top-style: solid; border-top-width: 6px; border-width: initial; display: block; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-width: 100%; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; padding-top: 1px;" title="CloudComputing_2" width="384" /></a></div> <div class="drop-shadow round"> <div style="background-color: white; color: #535353; font-family: Helvetica; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> <span style="font-size: 13px;"><br /> </span><br /> <span style="font-size: 13px;">กระแส Cloud กลับมาคึกคัก(ๆ) เพราะเริ่มมีการเปิดตัวของ 2 ยักษ์ใหญ่ในวงการ IT อย่าง Google และ Microsoft ที่ออกมาเปิดบริการพื้นที่บนก้อนเมฆปุยๆ หรือ Cloud Storage ผมไปอ่านเจอมาเกี่ยวกับการเปรียบเทียบ Cloud Storage ของเจ้าต่างๆ ซึ่งน่าสนใจและเป็นประโยชน์ดีในการตัดสินใจเลือกใช้งานมาแปลให้อ่านกันครับ</span></div> <div style="background-color: white; color: #535353; font-family: Helvetica; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> <span style="font-size: 13px;"><span id="more-3704" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></span>ก่อนอื่นถ้าให้อธิบาย Cloud Storage แบบง่ายๆ เลยคือ ที่ๆ เก็บไฟล์ไว้บนอินเทอร์เนต และเราสามารถเข้าไปฝากไฟล์และหยิบไฟล์ได้อย่างสะดวก ขอแค่มีอินเทอร์เนตมาเชื่อมต่อกับอุปกรณ์เพื่อให้ได้ใช้งานแค่นั้นจริงๆ ครับ โดยบริการ storage ทุกเจ้าจะมีแบบฟรียั่วใจก่อนด้วยปริมาณความจุแบบกระชับพื้นที่ และถ้าอยากได้เยอะกว่านั้นก็เสียเงินเพิ่มเติมไปครับ โดยเสียเป็นรายปีหรือรายเดือน จะเสียมากเสียน้อยขึ้นอยู่กับพื้นที่ความจุที่เราเลือก</span></div> <br /></div> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px; text-align: center;"> <a href="http://www.charathbank.com/wp-content/uploads/2012/04/cloud.jpg" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="" class="aligncenter wp-image-3709" height="320" src="http://www.charathbank.com/wp-content/uploads/2012/04/cloud.jpg" style="border-bottom-color: rgb(209, 222, 227); border-bottom-style: solid; border-bottom-width: 6px; border-color: initial; border-image: initial; border-left-color: rgb(209, 222, 227); border-left-style: solid; border-left-width: 6px; border-right-color: rgb(209, 222, 227); border-right-style: solid; border-right-width: 6px; border-top-color: rgb(209, 222, 227); border-top-style: solid; border-top-width: 6px; border-width: initial; display: block; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-width: 100%; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; padding-top: 1px;" title="cloud" width="320" /></a><br /> <br /></div> <br /> <div class="drop-shadow round"> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> ก่อนหน้านี้บริการ Cloud Storage ที่เราใช้งานกันบ่อยๆ นั่นคือ <a href="http://www.dropbox.com/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Dropbox</a> นอกจากนั้นก็จะมี <a href="https://www.sugarsync.com/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Sugarsync</a> แต่สิ่งที่ออกมาใหม่จากค่าย Microsoft นั่นคือ <a href="https://skydrive.live.com/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Skydrive</a> และ Google คือ <a href="https://drive.google.com/start#home" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Google Drive</a> ซึ่งโดดมาแย่งส่วนแบ่งตลาดการใช้งานจากเจ้าแรกๆ ที่เข้ามาแน่นอน</div> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> คำถามง่ายๆ ที่จะโดนถามมากคือ เค้ามีให้ใช้ฟรี จะเสียเงินเพิ่มไปทำไม คำตอบง่ายๆ คือ เค้ายอมที่จะไม่พกอุปกรณ์ต่างๆ เพื่อเก็บข้อมูล แต่เค้าเลือกจะเก็บบนเมฆเพราะไปที่ไหนก็ได้ใช้นั่นเอง</div> </div> <br /> <center><div class="drop-shadow round"> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> มาดูกันดีกว่าครับว่าบริการที่มีให้ใช้ตอนนี้ เราสามารถใช้บนไหนได้บ้างและราคาเป็นอย่างไร</div> </div> </center><br /> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px; text-align: center;"> <a href="http://www.charathbank.com/wp-content/uploads/2012/04/cloud_storage_apps_3-4f99d74-intro.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="Windows Phone ผู้น่าสงสาร..." class=" wp-image-3706 aligncenter" src="http://www.charathbank.com/wp-content/uploads/2012/04/cloud_storage_apps_3-4f99d74-intro.png" style="border-bottom-style: solid; border-color: initial; border-image: initial; border-left-color: rgb(209, 222, 227); border-left-style: solid; border-right-color: rgb(209, 222, 227); border-right-style: solid; border-top-color: rgb(209, 222, 227); border-top-style: solid; border-width: initial; display: block; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-width: 100%; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; padding-top: 1px;" title="cloud_storage_apps_3-4f99d74-intro" /></a></div> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px; text-align: center;"> <a href="http://www.charathbank.com/wp-content/uploads/2012/04/cloud_price-4f99f3c-intro.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><img alt="" class=" wp-image-3705 aligncenter" src="http://www.charathbank.com/wp-content/uploads/2012/04/cloud_price-4f99f3c-intro.png" style="border-bottom-style: solid; border-color: initial; border-image: initial; border-left-color: rgb(209, 222, 227); border-left-style: solid; border-right-color: rgb(209, 222, 227); border-right-style: solid; border-top-color: rgb(209, 222, 227); border-top-style: solid; border-width: initial; display: block; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-width: 100%; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; padding-top: 1px;" title="cloud_price-4f99f3c-intro" /></a></div> <div class="drop-shadow round"> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> ถ้าดูจากราคาเมื่อเทียบกับความจุแล้ว <a href="http://www.box.com/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #ff3366; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Box</a> จะถูกที่สุด แต่ถ้ามาดูความใหญ่ของไฟล์ที่เอาขึ้นไปแล้ว Google Drive ชนะขาดลอย ซึ่งจุดนี้จะไม่มองก็คงไม่ได้ เพราะอย่าลืมว่าเราคงไม่ได้เก็บแค่ไฟล์กะโหลกกะลาฟ้องครูอังคณาแน่ๆ แต่ไฟล์ที่เก็บและใช้งานมักมีขนาดใหญ่ปึ๊กแน่ๆ ไม่ว่าจะเป็นวิดิโอ หรือรูปภาพ มันใหญ่นะครับอย่าลืม ดังนั้นจุดนี้น่าจะเป็นจุดที่น่าพิจารณาด้วย</div> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> ส่วน Skydrive จุดที่น่าสนใจมาก จะมองไปที่การทำงานร่วมกันกับ product ของค่าย Microsoft เหมือนกัน ซึ่งที่ผมชอบมากคือการทำงานบน Microsoft Office Web เพราะมันสามารถเปิดไฟล์แก้ไขงานได้เลยแบบไม่มี Format ผิดเพี้ยน ใครใช้งานพวกนี้ก็คงจะแฮปปี้ไม่น้อย</div> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> สำหรับ iCloud นั้นออกจะอินดี้ไปหน่อย เพราะเค้าไม่ง้อค่ายอื่นอยู่แล้ว เน้นใช้เฉพาะกับการใช้งานกับ Apple Product อย่างเดียวเพียวริขุ ซึ่งใครไม่ Go Mac ก็คงไม่สนใจ แต่ใครที่เป็นสาวกผลไม้อยู่แล้ว การได้ iCloud เหมือนเป็น Service ที่แถมมาให้อยู่แล้ว เพียงแต่ว่าสุดท้ายแล้วเราก็ต้องหันมาเลือก Service เจ้าอื่นในการทำงานด้วยอยู่ดีนั่นแหละ (ผมเองใช้ Dropbox ในการทำงานอยู่เป็นประจำ)</div> </div> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline;"><em style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">ความเห็นส่วนตัวผม</strong></em></span> ถ้าจะให้เลือกสักอันนึง คงเลือกใช้ Google Drive ครับ เพราะส่วนใหญ่แล้วผมจะอยู่กับ Google บนอินเทอร์เนตตลอด (ยกเว้นอุปกรณ์รอบตัวผมที่เป็น Apple เปลี่ยนใจยากฮ้าาา) การทำงานที่ Cross-platform ที่ผมต้องทำที่ห้อง, แอบทำที่ทำงาน, และการทำระหว่างการเดินทาง Google น่าจะตอบโจทย์ได้ดีกว่าครับ</div> <div style="background-color: white; color: #535353; font-family: Helvetica; font-size: 13px; line-height: 16px; margin-bottom: 4px; margin-top: 4px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"> อย่างไรก็ดี ใครที่ยังไม่เคยใช้หรือไม่เคยมี Cloud Storage ลองสมัครและลองใช้งานดูนะครับ ผมเชื่อว่ามันจะช่วยให้คุณทำงานได้สะดวกขึ้นเยอะมาก…^_^</div> <div> <br /></div>

ศึกนี้เพิ่งเริ่มต้น บริการ Cloud Storage ฮาร์ดไดรฟ์พกพา ที่ลอยอยู่บนก้อนเมฆ

กระแส Cloud กลับมาคึกคัก(ๆ) เพราะเริ่มมีการเปิดตัวของ 2 ยักษ์ใหญ่ในวงการ IT อย่าง Google และ Microsoft ที่ออกมาเปิดบริการพื้นที่บนก...

อ่านเพิ่มเติม »

Gutenberg Diagram ในงานออกแบบเว็บไซต์

<style> a { font-weight:bold; color:#346AA8; } a:hover, a:focus, a:active { text-decoration:none; } .drop-shadow { position:relative; width:90%; padding:1em; margin:2em auto 5em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50%; height:20%; } .drop-shadow:after{ right:10px; left:auto; } .round { -moz-border-radius:4px; border-radius:4px; background:#fff; color:#fe6305; } .round:before, .round:after { max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .round:after { -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } .curls { background:#befec6; color:#fa0505; border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; } .curls:before, .curls:after { bottom:12px; max-width:200px; height:55%; -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -webkit-transform:skew(-8deg) rotate(-4deg); -moz-transform:skew(-8deg) rotate(-4deg); -o-transform:skew(-8deg) rotate(-4deg); transform:skew(-8deg) rotate(-4deg); } .curls:after { -webkit-transform:skew(8deg) rotate(4deg); -moz-transform:skew(8deg) rotate(4deg); -o-transform:skew(8deg) rotate(4deg); transform:skew(8deg) rotate(4deg); } .perspective:before { background:#befec6; left:28px; bottom:8px; max-width:200px; height:35%; -webkit-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); -webkit-transform:skew(50deg); -moz-transform:skew(50deg); -o-transform:skew(50deg); transform:skew(50deg); } .perspective:after { display:none; } .raised:before { width:auto; right:10px; left:10px; bottom:0; -webkit-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); } .rotated { background:#befec6; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .rotated *:first-child:before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } </style><br /> <br /> <br /> <div class="featured-image " style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; vertical-align: baseline;"> <img alt="" height="394" src="http://apricotion.org/wp-content/uploads/2012/04/03-620x394.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; display: block; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" width="620" /></div> <div class="post-content" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 30px; margin-left: 0px; margin-right: 0px; margin-top: 30px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; padding-top: 0px; vertical-align: baseline; word-wrap: break-word;"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <div style="color: #333333;"> <br /></div> <div class="drop-shadow round"> <span style="color: #20124d; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">โพสก่อนหน้านี้ผมเคยเกริ่นถึงเรื่องของ <strong>Gutenberg Diagram</strong> ในโพสนี้ผมจะมาอธิบายรายละเอียดว่า <strong>Gutenberg Diagra</strong>m คืออะไร และมีประโยชน์ในงาน <strong>Usability Engineering</strong> อย่างไรบ้าง<span style="border-color: initial; border-image: initial; border-style: initial; font: inherit;"><span id="more-1757" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"></span></span></span><br /> <div> <span style="color: #20124d; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /> </span></div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <span style="color: #20124d; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">อันที่จริง <strong>Gutenberg Diagram</strong> เป็นหลักจิตวิทยาง่ายๆ ของมนุษย์ <strong>(เผ่าพันธ์ที่อ่านจากซ้ายไปขวา)</strong> ที่ถูกฝึกสอนให้มีการอ่านในรูปแบบซ้ายไปขวาและบนลงล่างจนฝังลึกไปเป็นสัญชาติญาณ</span></div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <span style="color: #20124d; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">ในแวบแรกที่มองหน้าจอ มนุษย์จำพวกนี้จะ <strong>“โฟกัส”</strong> จุดสนใจของสายตาที่มุมบนซ้ายของหน้าจอเป็นอันดับแรก และจะไล่สายตาจากจุดดังกล่าวเป็นเส้นทแยงมุมไปที่มุมล่างขวาของเลย์เอาท์ ภาพด้านล่างเป็นแผนผัง <strong>Gutenberg</strong> โดยภาพซ้ายเป็นแผนผังสำหรับคนอ่านจากซ้ายไปขวา ส่วนภาพขวาสำหรับพวกขวาไปซ้าย (ญี่ปุ่น, จีน)</span></div> </div> <div class="mceTemp" draggable="" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <br /> <dl class="wp-caption alignnone" id="attachment_1761" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; vertical-align: baseline; width: 435px;"> <dt class="wp-caption-dt" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font-weight: bold; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><img class="size-full wp-image-1761" height="480" src="http://apricotion.org/wp-content/uploads/2012/04/012.jpg" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; color: #999999; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="01" width="425" /></dt> <dd class="wp-caption-dd" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span style="font-size: x-small;"><b>ภาพที่ 1: เป็น Gutenberg Diagram สำหรับคนที่อ่านหนังสือจากซ้ายไปขวา</b></span></dd></dl> </div> <div class="mceTemp" draggable="" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <br /> <dl class="wp-caption alignnone" id="attachment_1763" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; vertical-align: baseline; width: 449px;"> <dt class="wp-caption-dt" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font-weight: bold; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><img class="size-full wp-image-1763" height="480" src="http://apricotion.org/wp-content/uploads/2012/04/02.jpg" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="02" width="439" /></dt> <dd class="wp-caption-dd" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span style="font-size: x-small;"><b>ภาพที่ 2 คือ Gutenberg Diagram สำหรับคนที่อ่านหนังสือจากขวาไปซ้าย</b></span></dd></dl> </div> <div class="drop-shadow round"> <br /> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <span style="color: #20124d;">จุดบนซ้ายที่เป็นจุดที่เด่นที่สุดตามทฤษฏีของ <strong>Gutenberg</strong> เราเรียกกันว่าจุด <strong>POA (Primary Optical Area)</strong> จุดล่างขวาที่เป็นจุดสิ้นสุดของสายตา เรียกกันว่าจุด <strong>TA (Terminal Area)</strong> ข้อมูลที่อยู่ในเส้นทางของสายตาระหว่าง <strong>POA</strong> ไปยัง <strong>TA</strong>จะซึมเข้าสู่หัวสมองของผู้อ่านได้มากกว่าส่วนที่เหลือ ซึ่งก็คือมุมบนขวาและล่างซ้าย ซึ่งเราเรียกกันว่า<strong>จุดอับ (Fallow Area)</strong> และระหว่างสอง <strong>Fallow Area</strong> นี้ มุมบนขวาจะได้รับ <strong>Attention</strong> จากผู้อ่านมากกว่ามุมล่างซ้าย <strong>ถ้าหากปัจจัยขององค์ประกอบอื่นๆ (สี, lead graphics, ขนาดตัวอักษร)</strong> เท่ากัน</span></div> <blockquote style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #666666; font: inherit; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; quotes: none; vertical-align: baseline;"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> พอเห็นพฤติกรรมทางจิตวิทยาของผู้อ่านเป็นแบบนี้แล้วเราจึงมีแนวทางการออกแบบที่สอดคล้องกับพฤติกรรมดังกล่าว โดยเราสามารถแบ่งพื้นที่ของหน้าจอออกเป็นสี่ส่วน <strong>(4 Quadrants)</strong> และให้น้ำหนักการออกแบบของแต่ละส่วนหนักเบาให้สอดคล้องกับทฤษฏี <strong>Gutenberg</strong></div> </blockquote> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <span style="color: #20124d;">เช่น…</span></div> <ul style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; list-style-position: outside; margin-bottom: 20px; margin-left: 20px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <li style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; list-style-position: inside; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span style="color: #20124d;">ควรจะวางโลโก้/จุดสนใจ ไว้ ณ จุดบนซ้าย เพื่อดึงความสนใจของผู้อ่านในการจดจำแบรนด์ให้ได้มากที่สุด</span></li> <li style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; list-style-position: inside; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span style="color: #20124d;">จุด TA เป็นตำแหน่งที่สามารถปิดการขายได้อย่างมีประสิทธิภาพ (ติดต่อเรา, ดาวน์โหลดเดโม, โทรสั่งซื้อวันนี้)</span></li> <li style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; list-style-position: inside; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span style="color: #20124d;">ตำแหน่งล่างซ้ายในหน้าเว็บเพจ ถือเป็นจุดอับที่สะดุดตาคนน้อยที่สุดตามหลักของ <strong>Gutenberg</strong> เมื่อรู้อย่างนี้เราต้องระวังการจัดวางคอนเทนต์ให้ดี <strong>Goal</strong> ที่สำคัญของเพจไม่ควรไปอยู่ในมุมล่างซ้ายถ้าไม่จำเป็น</span></li> <li style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; list-style-position: inside; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><span style="color: #20124d;">หากต้องการเน้นเนื้อหาที่ส่วน <strong>Follow Area</strong> ต้องสร้างความโดดเด่นด้วยองค์ประกอบอื่นๆ เช่นการเล่นสีที่แตกต่าง การใช้ตัวอักษร หรือ <strong>Movement</strong> ของกราฟฟิคที่น่าสนใจ</span></li> </ul> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <span style="color: #20124d;">เรามาดูตัวอย่างเว็บเพจที่ออกแบบตามหลัก <strong>Gutenberg</strong> ดูบ้าง ลองสังเกตตำแหน่งโลโก้ รวมไปถึงการวางตำแหน่ง<strong>Goal</strong> หลักๆ ของเว็บไซต์นะครับ</span></div> <br /></div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <img alt="" class="alignnone size-full wp-image-1766" height="407" src="http://apricotion.org/wp-content/uploads/2012/04/03.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="03" width="640" /></div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <img alt="" class="alignnone size-full wp-image-1767" height="407" src="http://apricotion.org/wp-content/uploads/2012/04/04.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="04" width="640" /></div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <img alt="" class="alignnone size-full wp-image-1768" height="407" src="http://apricotion.org/wp-content/uploads/2012/04/05.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="05" width="640" /></div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <img alt="" class="alignnone size-full wp-image-1769" height="407" src="http://apricotion.org/wp-content/uploads/2012/04/06.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="06" width="640" /></div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <img alt="" class="alignnone size-full wp-image-1770" height="407" src="http://apricotion.org/wp-content/uploads/2012/04/07.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="07" width="640" /></div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <img alt="" class="alignnone size-full wp-image-1771" height="407" src="http://apricotion.org/wp-content/uploads/2012/04/08.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="08" width="640" /></div> <div class="drop-shadow round"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> แต้ท้ายที่สุดผมคงต้องบอกว่า <strong>Gutenberg Diagram</strong> ไม่ใช่สูตรสำเร็จของการจัดวางองค์ประกอบเว็บไซต์ สิ่งที่เราจะได้เรียนรู้จาก <strong>Gutenberg</strong> ก็คือแนวคิดตามจิตวิทยาของมนุษย์ และแนวทางพื้นทางในการสร้าง <strong>Attention</strong> กับเว็บไซต์ เช่น หากองค์ประกอบต่างๆ บังคับให้ข้อมูลส่วนสำคัญของเราไปอยู่ที่ Fallow Area ก็ควรจะสร้างจุดเด่นอื่นที่ฉีกหนีองค์ประกอบต่างๆ เพื่อทำให้องค์ประกอบดังกล่าวมีความโดดเด่นและดึง <strong>Attention</strong> ของสายตาผู้อ่านได้ดีกว่าเดิม</div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> นอกจากนี้สิ่งที่เราต้องเรียนรู้คือความเป็นจริงที่ว่า การอ่านหนังสือนั้นสายตาของเราจะเริ่มสนใจ ณ จุด <strong>POA</strong> ก่อนเสมอ แต่เว็บไซต์ไม่ใช่หนังสือ ดังนั้นในบางกรณีการจัดองค์ประกอบของเว็บไซต์ที่ขัดกับ <strong>Gutenberg Diagram</strong> กลับมีประสิทธิภาพ นั่นเนื่องมาจากว่า สมองของผู้เข้าชมไม่ได้ตีความหน้าจอดังกล่าวเป็นหน้าหนังสือ แต่อาจเป็นโปสเตอร์ หรือบิลบอร์ด ซึ่งจะทำให้ <strong>POA</strong> เปลี่ยนไปเป็นกึ่งกลางภาพโดยอัตโนมัติ</div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ใครไม่เชื่อใน <strong>Gutenberg Diagram</strong> เราสามารถทำการทดลองได้โดยการใช้เครื่องมืออย่าง <a href="http://blog.maxincube.com/analytics/for-newbies/introduction-to-google-website-optimizer" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">Google Website Optimizer</a> เพื่อวัด <strong>Attention</strong> ของผู้เข้าชมได้ โดยการออกแบบเลย์เอาท์เว็บไซต์สองประเภทและทดสอบกับผู้เข้าชมจริง ว่าสอดคล้องกับทฤษฏีของ <strong>Getenberg</strong> หรือไม่ (สิ่งที่ทีมงานของเราเคยทดสอบก็คือ การวางไอคอน “สมัครสมาชิก” ไว้ณ ตำแหน่ง <strong>Fallow Area</strong> นั้นทำให้มียอดสมาชิกน้อยกว่าตำแหน่ง <strong>TA</strong> ถึงประมาณ 300%)</div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ปิดท้ายกันด้วยข้อมูลเพิ่มเติมว่า ทฤษฏีของ <strong>Gutenberg</strong> จะเหมาะสมและมีประสิทธิภาพสูงสุดกับเว็บไซต์ที่มีอาการ<strong>Information Overflow</strong> นั่นก็คือ ข้อมูลท่วมจนไม่รู้ว่าอันไหนเด่นอันไหนด้อยไปกว่ากัน ส่วนในกรณีเว็บไซต์ที่มีข้อมูลไม่มาก เราอาจจะมองไม่เห็นศักยภาพของทฤษฏี <strong>Gutenberg</strong> อย่างชัดเจนนัก</div> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <div style="color: #333333;"> เครดิต : http://apricotion.org/</div> </div> <div style="color: #333333;"> <br /></div> </div> <div class="drop-shadow round"> <div> <div style="text-align: center;"> <span style="color: red;"><b>บทความเกี่ยวกับ Usability Engineering ทั้งหมดครับ</b></span></div> </div> <div style="color: #333333;"> <br /></div> <div style="color: #333333;"> </div> <h3 class="post-title entry-title" itemprop="name" style="color: #006861; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-weight: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative;"> <span style="font-size: x-small;"><a href="http://junctionx.blogspot.com/2012/04/introduction-to-usability-engineering.html">1. Introduction to Usability Engineering</a></span></h3> <div style="color: #333333;"> </div> <h3 class="post-title entry-title" itemprop="name" style="color: #006861; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-weight: normal; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative;"> <span style="font-size: x-small;"><a href="http://junctionx.blogspot.com/2012/04/usability-wordpress-vs-tumblr.html">2. กรณีศึกษา usability: WordPress vs. Tumblr</a></span></h3> <h3 class="post-title entry-title" itemprop="name" style="color: #006861; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-weight: normal; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative;"> <span style="font-size: x-small;"><a href="http://junctionx.blogspot.com/2012/04/usability-case-study-visual-cue-2.html">3. Usability Case Study: Visual Cue #2 – Emphasize Only When Necessary</a></span></h3> <div> <h3 class="post-title entry-title" itemprop="name" style="color: #006861; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-weight: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative;"> <span style="font-size: x-small;"><a href="http://junctionx.blogspot.com/2012/04/gutenberg-diagram.html">4. Gutenberg Diagram ในงานออกแบบเว็บไซต์</a></span></h3> </div> </div> </div> </div>

Gutenberg Diagram ในงานออกแบบเว็บไซต์

โพสก่อนหน้านี้ผมเคยเกริ่นถึงเรื่องของ  Gutenberg Diagram  ในโพสนี้ผมจะมาอธิบายรายละเอียดว่า  Gutenberg Diagra m คืออะไร และมีประโย...

อ่านเพิ่มเติม »

Usability Case Study: Visual Cue #2 – Emphasize Only When Necessary

<style> a { font-weight:bold; color:#346AA8; } a:hover, a:focus, a:active { text-decoration:none; } .drop-shadow { position:relative; width:90%; padding:1em; margin:2em auto 5em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50%; height:20%; } .drop-shadow:after{ right:10px; left:auto; } .round { -moz-border-radius:4px; border-radius:4px; background:#fff; color:#fe6305; } .round:before, .round:after { max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .round:after { -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } .curls { background:#befec6; color:#fa0505; border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; } .curls:before, .curls:after { bottom:12px; max-width:200px; height:55%; -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); -webkit-transform:skew(-8deg) rotate(-4deg); -moz-transform:skew(-8deg) rotate(-4deg); -o-transform:skew(-8deg) rotate(-4deg); transform:skew(-8deg) rotate(-4deg); } .curls:after { -webkit-transform:skew(8deg) rotate(4deg); -moz-transform:skew(8deg) rotate(4deg); -o-transform:skew(8deg) rotate(4deg); transform:skew(8deg) rotate(4deg); } .perspective:before { background:#befec6; left:28px; bottom:8px; max-width:200px; height:35%; -webkit-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); -moz-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4); -webkit-transform:skew(50deg); -moz-transform:skew(50deg); -o-transform:skew(50deg); transform:skew(50deg); } .perspective:after { display:none; } .raised:before { width:auto; right:10px; left:10px; bottom:0; -webkit-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); box-shadow:0 8px 10px rgba(0, 0, 0, 0.5); } .rotated { background:#befec6; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .rotated *:first-child:before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } </style><br /> <div class="featured-image " style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; vertical-align: baseline;"> <br /> <img alt="" height="278" src="http://apricotion.org/wp-content/uploads/2012/01/01-620x278.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; display: block; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" width="620" /></div> <div class="post-content" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 30px; margin-left: 0px; margin-right: 0px; margin-top: 30px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; padding-top: 0px; vertical-align: baseline; word-wrap: break-word;"> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ต่อจากนี้ผมจะมีโพสเกี่ยวข้องกับกรณีศึกษาเรื่องของ <strong>Usability</strong> โดยแบ่งเป็นหมวดๆ ไปครับ โดยวันนี้ผมจะเริ่มต้นที่หมวด<strong>Visual Cue</strong> ก่อน</div> <blockquote style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 3px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #666666; font-family: sans-serif; font-style: italic; font: inherit; line-height: 18px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; quotes: none; vertical-align: baseline;"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Visual Cue แปลให้เข้าใจง่ายๆ ก็คือ การส่งซิกทางสายตา<span id="more-1198" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"></span> หรือพูดอีกแง่คือการใช้ภาพและสีเพื่อสื่อความหมายให้ผู้ใช้เข้าใจเว็บไซต์ได้ง่าย และมีประสบการณ์การใช้งานที่ดีที่สุด</div> </blockquote> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ผมยกตัวอย่าง <strong>Visual Cue</strong> พื้นฐานที่คนทุกคนในโลกนี้รู้จักเป็นอย่างดี นั่นคือการใช้ไอคอน เราพบเห็นไอคอนเป็นสัญลักษณ์เชิง <strong>usability</strong> ทุกที่ทุกแห่งในชีวิตประจำวัน</div> <div class="mceTemp" draggable="" style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <br /> <dl class="wp-caption alignnone" id="attachment_1199" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; vertical-align: baseline; width: 610px;"> <dt class="wp-caption-dt" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font-weight: bold; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://apricotion.org/wp-content/uploads/2012/01/01.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="size-large wp-image-1199" height="269" src="http://apricotion.org/wp-content/uploads/2012/01/01-600x269.png" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="01" width="600" /></a></dt> <dd class="wp-caption-dd" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">ไอคอน ที่เราพบเห็นได้ทั่วไปตามห้องน้ำ</dd></dl> </div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> เช่นถ้าคุณปวดฉี่เวลาเดินห้าง คุณก็จะมองหาป้ายที่มีไอคอนคล้ายๆ กับภาพด้านบน</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ข้อดีของ <strong>Visual Cue</strong> ที่สำคัญที่สุด คือ <span style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline; vertical-align: baseline;">ประหยัดการใช้สมอง เนื่องจากคุณไม่ต้องอ่าน..!!</span> สมองของคุณสามารถตีความภาพที่เห็นได้จากประสบการณ์ในชีวิตของคุณเอง</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> สำหรับคนที่ใช้เว็บหรืออินเทอร์เน๊ตมาพอสมควรจะเข้าใจความหมายของไอคอน <strong>“แว่นขยาย”</strong> ได้ดี ว่ามันหมายถึงการค้นหา ดังนั้นบางเว็บไซต์จึงไม่จำเป็นต้องใส่คำว่า <strong>Search</strong> ลงไปในระบบการค้นหา ยกตัวอย่างเช่นเว็บไซต์ <strong>Apple</strong> ที่เป็นหนึ่งในเว็บไซต์ที่มี <strong>usability</strong> ที่ดีที่สุดในโลก</div> <div class="mceTemp" draggable="" style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <br /> <dl class="wp-caption alignnone" id="attachment_1201" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; vertical-align: baseline; width: 610px;"> <dt class="wp-caption-dt" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font-weight: bold; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://apricotion.org/wp-content/uploads/2012/01/02.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="size-large wp-image-1201" height="372" src="http://apricotion.org/wp-content/uploads/2012/01/02-600x372.png" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="02" width="600" /></a></dt> <dd class="wp-caption-dd" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">หน้าตาของเว็บไซต์ Apple</dd></dl> </div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> คุณรู้ได้ทันทีว่ากรอบบนขวาคือฟังก์ชั่นสำหรับการค้นหา <strong>Apple</strong> มี <strong>Visual Cue</strong> เป็นรูปแว่นขยาย พร้อมความยอดเยี่ยมในเรื่องของ<strong> usability</strong> อีก 4-5 อย่างในส่วนของระบบการค้นหาที่เรียกได้ว่าปราณีตเก็บทุกเม็ดจริงๆ</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ใครจะคิดว่าเพียงแค่ช่องค้นหาข้อมูล ทาง Apple จะละเอียดปราณีตมากขนาดนี้..!?! เราลองมาไล่ดูกันเป็นข้อๆ ไปครับ</div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font-weight: normal; font: inherit; margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Visual Hierarchy</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <strong>Apple</strong> วางช่องค้นหาข้อมูลไว้ขวาสุดหลังเมนูสุดท้าย นี่เป็นกรณีที่ผมอยากให้นักออกแบบทำความเข้าใจกับแนวคิดตัวชี้นำทางสายตาที่ทำได้อย่างยอดเยี่ยม</div> <div class="mceTemp" draggable="" style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <br /> <dl class="wp-caption alignnone" id="attachment_1203" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; vertical-align: baseline; width: 610px;"> <dt class="wp-caption-dt" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font-weight: bold; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://apricotion.org/wp-content/uploads/2012/01/07.jpg" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="size-large wp-image-1203" height="136" src="http://apricotion.org/wp-content/uploads/2012/01/07-600x136.jpg" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="07" width="600" /></a></dt> <dd class="wp-caption-dd" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">ส่วน เมนูหลัก</dd></dl> </div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> คนส่วนใหญ่เวลาเข้าเว็บไซต์เขาจะเห็นสิ่งที่เว็บไซต์ต้องการนำเสนอในส่วน <strong>highlight</strong> นั่นคือ <strong>“เป้าหมายหลัก (Primary Goal)”</strong> ที่ดึงดูดสายตาของผู้ใช้เว็บมากที่สุด หลังจากนั้นผู้ใช้จะเริ่มมองหาสิ่งที่ต้องการโดยไล่จากการดูที่เมนูหลัก <span style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline; vertical-align: baseline;">แต่เมื่อเขาไม่พบสิ่งที่ต้องการเมื่อนั้นเขาจะเริ่มคิดถึงการค้นหา</span></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> การวางช่องค้นหาไว้ <strong>“ท้ายเมนู”</strong> จะทำให้สายตาของผู้ใช้งานมองเห็นช่องค้นหาโดยอัตโนมัติ แทนที่จะวางช่องค้นหาไว้ตำแหน่งอื่น ถ้าผู้ใช้งานไล่จากเมนูแล้วไม่พบสิ่งที่ต้องการแล้ว ก็จะต้องเสียเวลาใช้สายตาควานหา <strong>(browse)</strong> ช่องค้นหาอีกรอบหนึ่ง</div> <div class="mceTemp" draggable="" style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <br /> <dl class="wp-caption alignnone" id="attachment_1204" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; vertical-align: baseline; width: 610px;"> <dt class="wp-caption-dt" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font-weight: bold; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://apricotion.org/wp-content/uploads/2012/01/09.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="size-large wp-image-1204" height="136" src="http://apricotion.org/wp-content/uploads/2012/01/09-600x136.png" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="09" width="600" /></a></dt> <dd class="wp-caption-dd" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">การไล่สายตาเพื่อค้นหาสิ่งที่ต้องการ</dd></dl> </div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ส่วนภาพด้านล่างเป็นตัวอย่างเว็บไซต์ที่วางเมนูหลักและการค้นหาคนละตำแหน่งกัน ทำให้ผู้ใช้งานต้องเสียเวลาควานหา<strong>(browse)</strong> สิ่งนี้สร้างความลำบากเล็กๆ ในใจให้ผู้ใช้ ทำให้รู้สึกว่าเว็บไซต์นั้นใช้ยาก หรือเสียเวลาหาสิ่งที่ต้องการมากเกิน</div> <div class="mceTemp" draggable="" style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <br /> <dl class="wp-caption alignnone" id="attachment_1205" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; vertical-align: baseline; width: 610px;"> <dt class="wp-caption-dt" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font-weight: bold; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://apricotion.org/wp-content/uploads/2012/01/08.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="size-large wp-image-1205" height="371" src="http://apricotion.org/wp-content/uploads/2012/01/08-600x371.png" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="08" width="600" /></a></dt> <dd class="wp-caption-dd" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">ตัวอย่างการไล่สายตา ที่ผู้เข้าชมเว็บไซต์รู้สึกว่าใช้ยาก</dd></dl> </div> <blockquote style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 3px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #666666; font-family: sans-serif; font-style: italic; font: inherit; line-height: 18px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; quotes: none; vertical-align: baseline;"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> สรุป ช่องค้นหาข้อมูลควรอยู่ในตำแหน่งสุดท้ายที่สายตาของผู้ใช้งานจะกวาดไปถึง (และไม่พบสิ่งที่เขาต้องการ)</div> </blockquote> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font-weight: normal; font: inherit; margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Gutenberg Area</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> นอกจากนี้ตำแหน่งของช่องการค้นหาอยู่ที่มุมบนขวา <strong>ซึ่งเป็นมุมอับสายตา (มุม​Strong Fallow Area, ดูตามภาพด้านล่าง)</strong> ใน<strong>ทฤษฏีของ Gutenberg</strong> นั่นหมายถึงว่า <strong>Apple</strong> คำนึงถึงพฤติกรรมผู้ใช้งานเว็บไซต์ ว่าคนส่วนใหญ่ไม่ได้ใช้ระบบการค้นหา (search) เป็น <strong>“เป้าหมายหลัก (Primary Goal)”</strong> แต่จะต้องการค้นหาก็ต่อเมื่อพวกเขาควานหาข้อมูลที่เขาต้องการไม่พบจากเมนู ดังนั้นระบบการค้นหาถือเป็น <strong>“เป้าหมายรอง (Secondary Goal)”</strong></div> <blockquote style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 3px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #666666; font-family: sans-serif; font-style: italic; font: inherit; line-height: 18px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; quotes: none; vertical-align: baseline;"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> การวางเป้าหมายรองในจุดที่ไม่เด่นนั้นจะทำให้เว็บไซต์สามารถใช้เนื้อที่ในจุดเด่น (Primary Optical Area และ Terminal Area) ได้อย่างมีประสิทธิภาพมากขึ้น</div> </blockquote> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> นี่เป็นกรณีเดียวกับเว็บ <strong>Tumblr</strong> ที่วางปุ่ม <strong>Login</strong> ซึ่งเป็นเป้าหมายรองไว้ในตำแหน่ง<strong> Strong Fallow Area</strong> เช่นเดียวกัน (อ่านเรื่องเป้าหมาย (Goal) ของ Tumblr ได้ที่โพสย้อนหลังของผม “<a href="http://apricotion.org/category/web-development-design/usability-engineering/" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">กรณีศึกษา usability: WordPress vs. Tumblr</a>“ ครับ)</div> <div class="note" style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <strong>สรุปง่ายๆ ก็คือ</strong>สิ่งที่มีความสำคัญเป็นอันดับรอง ก็ควรวางตำแหน่งไว้ในจุดที่เด่นอันดับรอง<br /> เพื่อผู้ใช้งานจะได้มีโอกาสมองเห็นสิ่งสำคัญที่เป็นจุดเด่นได้ชัดขึ้นโดยไม่ถูกรบกวนทางสายตาจากองค์ประกอบอื่นๆ ที่ผู้ใช้ไม่ได้ต้องการ</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://apricotion.org/wp-content/uploads/2012/01/10.jpg" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1206" height="480" src="http://apricotion.org/wp-content/uploads/2012/01/10.jpg" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="10" width="425" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ถ้ามีโอกาสจะมาเขียนเรื่อง <strong>Gutenberg Diagram</strong> และขยายความละเอียดอีกครั้งครับ</div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font-weight: normal; font: inherit; margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Emphasize only when necessary</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ต่อเนื่องจาก <strong>Gutenberg Area</strong> ทาง <strong>Apple</strong> ยังมีลูกเล่นที่ลดความเด่นของช่องค้นหาข้อมูลอีกอย่างหนึ่ง นั่นคือช่องค้นหาข้อมูลของ <strong>Apple</strong> นั้นใช้สีพื้นเป็นสีเทาสีเดียวกับสีพื้นของเมนูที่ดูกลืนกันเกือบเป็นเนื้อเดียว และมีขนาดช่องกรอกข้อมูลที่สั้นๆ ประหยัดเนื้อที่</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> แต่เมื่อคุณคลิกที่ช่องค้นหาข้อมูล เว็บของ <strong>Apple</strong> จะทำการขยายช่องกรอกข้อมูลเพื่อให้การพิมพ์ข้อมูลยาวๆ นั้นสะดวกขึ้นสำหรับผู้ใช้งาน พร้อมเปลี่ยนสีพื้นจากสีเทาไปเป็นสีขาวเพื่อให้โดดเด่นออกมาจากแถบเมนู</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://apricotion.org/wp-content/uploads/2012/01/03.jpg" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1207" height="58" src="http://apricotion.org/wp-content/uploads/2012/01/03.jpg" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="03" width="395" /></a><br /> <a href="http://apricotion.org/wp-content/uploads/2012/01/04.jpg" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1208" height="58" src="http://apricotion.org/wp-content/uploads/2012/01/04.jpg" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="04" width="395" /></a>หลายคนมองว่านี่เป็นเรื่องเล็กน้อย แต่ผมเชื่อว่า<span style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline; vertical-align: baseline;">ทุกคนเคยต้องมีความรู้สึกอึดอัดเล็กๆ เมื่อพิมพ์ข้อมูลลงในกล่องข้อความที่มีความยาวไม่มาก และทำให้เรามองไม่เห็นข้อความทั้งหมด</span> เพราะข้อความช่วงแรกถูกดันจนตกขอบด้านซ้ายมือไป อย่างภาพด้านล่าง</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://apricotion.org/wp-content/uploads/2012/01/05.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1209" height="58" src="http://apricotion.org/wp-content/uploads/2012/01/05.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="05" width="395" /></a>แต่ด้วยการขยายช่องกรอกข้อมูลทำให้คุณสามารถพิมพ์ข้อความได้ยาวขึ้น และอึดอัดน้อยลงเล็กน้อยในการค้นหาข้อมูล</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://apricotion.org/wp-content/uploads/2012/01/06.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1210" height="58" src="http://apricotion.org/wp-content/uploads/2012/01/06.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="06" width="395" /></a><strong>คำถามก็คือ</strong> คนทำเว็บจะเสียเวลามากมายเพื่อมาเขียนโปรแกรมให้ช่องกรอกข้อมูลขยายกว้างๆ ทำไม ทำไมเราไม่เขียนให้มันกว้างไว้ตั้งแต่แรก จะได้ไม่ต้องมาหดๆ ขยายๆ อย่างนี้</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ผมขออธิบายแบบนี้ครับ หัวใจหลักของ <strong>usability engineering คือศาสตร์ในการใช้เนื้อที่บนเว็บไซต์ให้คุ้มค่าที่สุด</strong><span style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline; vertical-align: baseline;">นอกจากการนำช่องค้นหาข้อมูลไปวางตำแหน่งที่ไม่เด่นแล้ว การลดความเด่นของช่องค้นหาข้อมูลด้วยการลดขนาด และใส่สีที่กลืนไปกับสภาพแวดล้อม ยังช่วยทำให้ความเด่นของการค้นหานั้นลดลงอีกอย่างมาก</span> ซึ่งจะช่วยขับให้ส่วนอื่นๆ ที่<strong>Apple</strong> ต้องการให้โดดเด่นนั้นดึงสายตาผู้ใช้ได้ดีขึ้นอีก (<strong>ดูตัวอย่างเว็บ Sanook.com</strong> ที่น้ำหนักองค์ประกอบและการใช้สีทั้งเว็บนั้นเฉลี่ยเท่ากันหมด <span style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline; vertical-align: baseline;">ทำให้เว็บไซต์สอบตกในเรื่องการให้ความสำคัญกับองค์ประกอบในการดึงดูดสายตา</span>)</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://apricotion.org/wp-content/uploads/2012/01/13.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1211" height="621" src="http://apricotion.org/wp-content/uploads/2012/01/13.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="13" width="496" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> การที่คุณใส่เนื้อหาทุกอย่าง หรือนำเสนอข้อมูลทุกส่วนเต็มที่ทั้งขนาดและสีสันนั้น จะมีข้อเสียคือ<br /> เว็บไซต์จะอุดมไปด้วยคอนเทนต์และองค์ประกอบปลีกย่อยมากมาย ทำให้สมาธิในการโฟกัสหาข้อมูลที่ต้องการของผู้ใช้งานนั้นน้อยลง</div> <blockquote style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 3px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #666666; font-family: sans-serif; font-style: italic; font: inherit; line-height: 18px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; quotes: none; vertical-align: baseline;"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> การที่ Apple ออกแบบช่องกรอกข้อมูลค้นหาให้เล็กลงนั้นทำให้ Apple สามารถใช้พื้นที่ส่วน Navigation menu ได้โล่งเต็มที่ ทำให้สบายตาและเว็บไซต์ดูไม่ยุ่งเหยิง นี่เป็นหลักการออกแบบแบบ minimalist อย่างหนึ่งที่ผมอยากให้เว็บไซต์ไทยนำไปใช้มากๆ</div> </blockquote> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> นั่นคือเมื่อองค์ประกอบในเว็บไซต์ถูกลดทอนลงเหลือเท่าที่จำเป็นแล้ว เว็บไซต์จะดูโล่งสบายตา หาข้อมูลได้ง่าย และเราจะทำการเน้นย้ำส่วนสำคัญก็ต่อเมื่อผู้ใช้งานกำลังให้ความสนใจกับสิ่งนั้นๆ<strong> (emphasize when necessary)</strong> เช่นเมื่อผู้ใช้เว็บต้องการค้นหาข้อมูล ส่วนช่อง <strong>search</strong> จึงขยายและเปลี่ยนสีเพื่อให้เห็นเด่นชัดขึ้น แนวคิดนี้ถือเป็นความปราณีตในทุกเม็ดของทีมออกแบบเว็บไซต์ Apple จริงๆ</div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font-weight: normal; font: inherit; margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> No More Search Result</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> แนวคิดการทำเว็บไซต์ในอดีตคือการนำเสนอเอกสารผ่านทางโลกอินเทอร์เนต แต่ในยุคปัจจุบันเว็บไซต์ก็คือแอพพลิเคชั่นที่ทำงานบนเว็บบราวเซอร์ ความแตกต่างของสองแนวคิดนี้อยู่ที่รูปแบบการทำงานของเว็บในปัจจุบันที่เรียกว่า <strong>Web 2.0</strong> นั้นไม่ได้อิงเว็บไซต์เป็น <strong>“หน้า (Page)”</strong> เหมือนในอดีต แต่เว็บไซต์ 1 หน้านั้นสามารถทำงานต่างๆ ได้โดยไม่ต้องเสียเวลาโหลดหน้าเว็บใหม่</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ยกตัวอย่าง<strong> Google</strong> ในปัจจุบันทุกครั้งที่คุณเปลี่ยนคำค้นหาสังเกตนะครับว่าเดี๋ยวนี้ <strong>Google</strong> ไม่โหลดหน้า <strong>search result</strong> แล้ว แต่จะทำการค้นหาแบบไดนามิก และแสดงผลในหน้าเดิมเลย เป็นเทคนิคที่โปรแกรมเมอร์คุ้นหูกันว่า <strong>Ajax (Asynchronous JavaScript and XML)</strong></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> เมื่อผู้ใช้ไม่ต้องพอโหลดหน้าเว็บไซต์ใหม่ทุกครั้งที่ทำการคลิก มันก็ทำให้เว็บโหลดเร็วขึ้น ประสบการณ์การใช้งานเว็บไซต์ก็ดีขึ้นตามลำดับ<strong> bandwidt</strong>h ที่ใช้ในเว็บโฮสติ้งก็น้อยลง การตอบสนองของเซิร์ฟเวอร์ก็จะทำได้ดีขึ้น มีแต่ข้อดีทั้งนั้น</div> <blockquote style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 3px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #666666; font-family: sans-serif; font-style: italic; font: inherit; line-height: 18px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; quotes: none; vertical-align: baseline;"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ดังนั้นยุคนี้ถือว่าเชยแล้วครับ ที่จะทำหน้า search result ให้กับระบบค้นหาข้อมูล ลองดูผลลัพธ์การค้นหาของ Apple ที่ใช้ระบบ Ajax ดู</div> </blockquote> <div class="mceTemp" draggable="" style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <br /> <dl class="wp-caption alignnone" id="attachment_1212" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; vertical-align: baseline; width: 610px;"> <dt class="wp-caption-dt" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font-weight: bold; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><a href="http://apricotion.org/wp-content/uploads/2012/01/14.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="size-large wp-image-1212" height="371" src="http://apricotion.org/wp-content/uploads/2012/01/14-600x371.png" style="border-bottom-style: none; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-style: initial; border-top-style: none; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="14" width="600" /></a></dt> <dd class="wp-caption-dd" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">ตัวอย่างการค้นหาในเว็บของ Apple</dd></dl> </div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> นี่แหละครับคือความเจ๋งของระบบการค้นหาในยุคปัจจุบัน โปรแกรมเมอร์เสียเวลาเพิ่มเล็กน้อยในการทำ <strong>Ajax</strong> แต่ผลลัพธ์คือประสบการณ์การใช้งานที่ยอดเยี่ยม ผู้ใช้เว็บไม่จำเป็นต้องรอโหลดหน้า search result อีกต่อไป</div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font-weight: normal; font: inherit; margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Let Them Know They Have to Wait</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ผู้ใช้งานเว็บไซต์จะมีความหงุดหงิดเล็กๆ (ที่พวกคุณไม่รู้ตัว) เมื่อคุณไม่แน่ใจว่าสิ่งที่คุณส่งคำสั่งไปยังเว็บไซต์นั้น มันสำเร็จแล้วหรือเปล่า ยกตัวอย่างเช่น <span style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: underline; vertical-align: baseline;">เมื่อคุณคลิกที่ปุ่ม แต่ปุ่มไม่ตอบสนอง ไม่มีการบุ๋มลงไป หรือไม่มีการกระพริบ คุณจะไม่แน่ใจว่าคุณคลิกโดนหรือไม่</span> และคนส่วนใหญ่มักจะลองพยายามกดซ้ำ</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ถ้าพูดถึงคอมพิวเตอร์ พวกเราอาจจะยังไม่ฟีลเท่าไหร่ แต่ถ้ายกตัวอย่างการใช้นิ้วโป้งจิ้มหน้าจอโทรศัพท์มือถือดูสิครับ ถ้าแอพห่วยๆ ที่มันไม่แสดงอาการว่าปุ่มถูกคลิก เราจะหงุดหงิดและพยายามจิ้มมันต่อไปเรื่อยๆ เพราะเราไม่รู้ว่านิ้วเรา (ซึ่งพื้นที่มันใหญ่กว่าปลายเมาส์) จิ้มถูกปุ่มจริงหรือเปล่า (ไอ้กรณีพื้นที่ของนิ้วโป้ง กับปลายเมาส์นั้นเป็นเรื่องกฏ <strong>Fittz’s Law</strong>ครับ ถ้ามีเวลาก็จะมาเล่าให้ฟังเพิ่มเติมอีก)</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> หรืออีกตัวอย่างก็คือการอัพโหลดไฟล์รูปภาพบนเว็บไซต์บางเว็บที่ไม่บอกสถานะการอัพโหลด ยิ่งถ้าคุณใส่รูปขนาดใหญ่ๆ เข้าไป แล้วมันนิ่ง.. เงียบ.. คุณจะเกิดคำถามในใจ และไม่มั่นใจว่าจะต้องรอถึงเมื่อไหร่ หรือว่ามันยังทำงานอยู่หรือเปล่า</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> สาเหตุนั้นเป็นเพราะมนุษย์เราไม่ชอบความไม่แน่นอน และไม่ชอบการรอคอย ดังนั้นเมื่อผู้ใช้พบกับความไม่แน่นอน หรือการรอคอยแม้จะเป็นเรื่องเพียงเล็กน้อยมันจะทำให้เรากังวลใจเล็กๆ ไอ้ความกังวลเล็กๆ พวกนี้นี่เองที่รวมๆ กันมากเข้ามันทำให้ประสบการณ์การใช้เว็บไซต์นั้นแย่ลง</div> <blockquote style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 3px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #666666; font-family: sans-serif; font-style: italic; font: inherit; line-height: 18px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; padding-bottom: 0px; padding-left: 20px; padding-right: 0px; padding-top: 0px; quotes: none; vertical-align: baseline;"> <div style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font: inherit; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ดังนั้นสิ่งที่พวกเรานักออกแบบเว็บไซต์ควรทำเสมอๆ ถ้าเป็นไปได้ก็คือ ทุกครั้งที่ผู้ใช้เว็บจะต้องรออะไรซักอย่าง ไม่ว่าจะใช้เวลามากหรือน้อย เราควรแสดงสัญลักษณ์บอกใบ้อะไรซักเล็กน้อยว่า กำลังทำงานอยู่นะ กรุณารอสักครู่</div> </blockquote> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> การแสดงสถานะการรอนั้นทำได้สองรูปแบบ แบบแรกคือการบอกว่า รอก่อน แต่ไม่บอกว่าต้องรอนานแค่ไหน เช่น  <img alt="" class="alignnone size-full wp-image-1213" height="16" src="http://apricotion.org/wp-content/uploads/2012/01/01.gif" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="01" width="16" /> <img alt="" class="alignnone size-full wp-image-1214" height="16" src="http://apricotion.org/wp-content/uploads/2012/01/02.gif" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="02" width="16" /> <img alt="" class="alignnone size-full wp-image-1215" height="11" src="http://apricotion.org/wp-content/uploads/2012/01/04.gif" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="04" width="16" /> <img alt="" class="alignnone size-full wp-image-1216" height="19" src="http://apricotion.org/wp-content/uploads/2012/01/03.gif" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="03" width="220" /></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> สัญลักษณ์ต่างๆ เหล่านี้ล้วนเหมาะที่จะใช้กับการรอคอยแบบชั่วอึดใจ เป้าหมายเพียงแค่ต้องการให้ผู้ใช้มั่นใจว่า <strong>“กรูคลิกโดนแล้ว ที่เหลือก็แค่รอ”</strong> ถ้าเอาสัญลักษณ์ <strong>loading</strong> เหล่านี้ไปใช้กับงานที่ต้องรอคอยนานๆ ก็ทำให้ผู้ใช้อึดอัดและรำคาญอยู่ดี<br /> เพราะพวกเขาไม่มีทางรู้ได้เลยว่าจะต้องรอไปถึงเมื่อไหร่ (คิดภาพเวลา <strong>Facebook บน iPhone</strong> มันโหลดค้างเพราะ<strong> 3G สุดห่วยของเมืองไทย ว่าไอคอน loading</strong> พวกนี้มันทำให้พวกเราหงุดหงิดได้ขนาดไหน)</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> และอีกรูปแบบคือการนับย้อนหลังให้ผู้ใช้เห็นว่าใกล้เสร็จหรือยัง หรือที่คุ้นกันในชื่อ<strong> progress bar</strong></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://apricotion.org/wp-content/uploads/2012/01/051.png" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1218" height="228" src="http://apricotion.org/wp-content/uploads/2012/01/051.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="05" width="243" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> อันนี้เหมาะในกรณีที่ต้องทำอะไรนานๆ เช่นอัพโหลดไฟล์</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> กลับเข้ามาที่เรื่องของ <strong>Apple</strong> บ้าง ระบบการค้นหาของ <strong>Apple</strong> มีการทำงานแบบ <strong>Ajax</strong> ซึ่งจะทำให้การค้นหารวดเร็ว แสดงผลลัพธ์การค้นหาได้เลยโดยไม่ต้องเปลี่ยนหน้า <strong>นี่คือความเจ๋งในยุค Web 2.0</strong> ครับ (ใครที่คิดว่าหน้า <strong>search result</strong> ยังจำเป็นอยู่ในยุคนี้ขอให้คิดใหม่) แต่ <strong>Apple</strong> ก็ยังคงไม่ทิ้งรายละเอียดเล็กน้อยไป นั่นคือระหว่างที่ลูกค้ากรอกข้อมูล ระบบจะทำการค้นหาให้อัตโนมัติ <strong>โดยไม่มีปุ่ม Search และไม่ต้องกด Enter</strong></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> เจ๋งยิ่งไปกว่านั้นคือที่มุมขวาของช่องกรอกข้อความ <strong>ทาง Apple</strong> จะแสดงสัญลักษณ์ <strong>loading</strong> ทุกครั้งที่เว็บส่งคำสั่งค้นหาไปยังเซิร์ฟเวอร์ เพื่อให้ผู้ใช้รู้ว่า การค้นหาได้เริ่มต้นแล้ว และใจเย็นๆ คอยสักครู่ผลลัพธ์ก็จะกลับมา</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://apricotion.org/wp-content/uploads/2012/01/11.jpg" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1219" height="54" src="http://apricotion.org/wp-content/uploads/2012/01/11.jpg" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="11" width="305" /></a><br /> <a href="http://apricotion.org/wp-content/uploads/2012/01/12.jpg" rel="lightbox[1198]" style="-webkit-tap-highlight-color: rgb(204, 51, 51); -webkit-transition-delay: initial; -webkit-transition-duration: 0.1s; -webkit-transition-property: color; -webkit-transition-timing-function: linear; color: #cc3333; opacity: 0.8; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-1220" height="54" src="http://apricotion.org/wp-content/uploads/2012/01/12.jpg" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #999999; font-size: 12px; font-style: italic; font: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 100%; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;" title="12" width="305" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <strong>ความเท่ห์ของมันก็คือ</strong></div> <ul style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; list-style-position: outside; margin-bottom: 20px; margin-left: 20px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <li style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; list-style-position: inside; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><strong>Apple</strong> เปลี่ยนปุ่ม <strong>reset</strong> ที่เป็นรูปกากบาทให้กลายเป็นไอคอน <strong>loading</strong></li> <li style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-size: 12px; font: inherit; list-style-position: inside; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><strong>Apple</strong> เก็บ <strong>cache</strong> ผลลัพธ์การค้นหาเอาไว้ ในกรณีที่ผู้ใช้เว็บค้นหาคำเดิม จะแสดงผลลัพธ์ออกมาได้ทันทีโดยไม่ส่งคำสั่งไปที่เซิร์ฟเวอร์อีก</li> </ul> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font-weight: normal; font: inherit; margin-bottom: 8px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Conclusion</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> รายละเอียดต่างๆ ที่ผมเล่าให้ฟังเป็นอีกกรณีศึกษาหนึ่งในเรื่องงาน <strong>usability</strong> ซึ่งหลายๆ คนถ้าอ่านแล้วคงจะเห็นภาพว่า มันไม่ใช่เรื่องเล็กๆ หรือเรื่องเล่นๆ เลยในการออกแบบเว็บไซต์ดีๆ ซักเว็บหนึ่ง เพียงแค่ระบบค้นหาข้อมูลเล็กๆ ที่มุมของเว็บไซต์ ยังต้องคิดละเอียดถี่ถ้วนกันถึงขนาดนี้</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: sans-serif; font: inherit; line-height: 18px; margin-bottom: 20px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> ยังไงโพสหน้าผมจะไล่ยกตัวอย่างกรณีศึกษาแนวคิด <strong>usability</strong> ดีๆ อื่นๆ เพิ่มเติมมาให้เพื่อให้เห็นภาพที่ชัดเจนยิ่งๆ ขึ้นไปครับ</div> <div> เครดิต : http://apricotion.org/</div> </div> <div class="drop-shadow round"> <div> <div style="text-align: center;"> <span style="color: red;"><b>บทความเกี่ยวกับ Usability Engineering ทั้งหมดครับ</b></span></div> </div> <div style="color: #333333;"> <br /></div> <div style="color: #333333;"> </div> <h3 class="post-title entry-title" itemprop="name" style="color: #006861; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-weight: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative;"> <span style="font-size: x-small;"><a href="http://junctionx.blogspot.com/2012/04/introduction-to-usability-engineering.html">1. Introduction to Usability Engineering</a></span></h3> <div style="color: #333333;"> </div> <h3 class="post-title entry-title" itemprop="name" style="color: #006861; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-weight: normal; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative;"> <span style="font-size: x-small;"><a href="http://junctionx.blogspot.com/2012/04/usability-wordpress-vs-tumblr.html">2. กรณีศึกษา usability: WordPress vs. Tumblr</a></span></h3> <h3 class="post-title entry-title" itemprop="name" style="color: #006861; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-weight: normal; line-height: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative;"> <span style="font-size: x-small;"><a href="http://junctionx.blogspot.com/2012/04/usability-case-study-visual-cue-2.html">3. Usability Case Study: Visual Cue #2 – Emphasize Only When Necessary</a></span></h3> <div> <h3 class="post-title entry-title" itemprop="name" style="color: #006861; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-weight: normal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative;"> <span style="font-size: x-small;"><a href="http://junctionx.blogspot.com/2012/04/gutenberg-diagram.html">4. Gutenberg Diagram ในงานออกแบบเว็บไซต์</a></span></h3> </div> </div>

Usability Case Study: Visual Cue #2 – Emphasize Only When Necessary

ต่อจากนี้ผมจะมีโพสเกี่ยวข้องกับกรณีศึกษาเรื่องของ  Usability  โดยแบ่งเป็นหมวดๆ ไปครับ โดยวันนี้ผมจะเริ่มต้นที่หมวด Visual Cue  ก่อน ...

อ่านเพิ่มเติม »