JUNCTION X: Usability Engineering

แสดงบทความที่มีป้ายกำกับ Usability Engineering แสดงบทความทั้งหมด

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

.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;

<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 คืออะไร และมีประโย...

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

วันอังคาร, เมษายน 24, 2555

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

}
        
        .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 ก่อน ...

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

วันอังคาร, เมษายน 24, 2555

สมัครสมาชิก: บทความ ( Atom )