<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
> <channel><title>SitePoint » Learn CSS &#124; HTML5 &#124; JavaScript &#124; Wordpress &#124; Tutorials-Web Development &#124; Reference &#124; Books and More &#187; Usability</title> <atom:link href="http://www.sitepoint.com/category/design/usability/feed/" rel="self" type="application/rss+xml" /><link>http://www.sitepoint.com</link> <description></description> <lastBuildDate>Mon, 28 May 2012 01:26:54 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3.1</generator> <xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" /> <item><title>The New Sensory Elements Coming to HTML5</title><link>http://www.sitepoint.com/html5-new-sensory-elements/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=html5-new-sensory-elements</link> <comments>http://www.sitepoint.com/html5-new-sensory-elements/#comments</comments> <pubDate>Sun, 01 Apr 2012 08:04:53 +0000</pubDate> <dc:creator>Craig Buckler</dc:creator> <category><![CDATA[CSS Tutorials]]></category> <category><![CDATA[CSS3]]></category> <category><![CDATA[Gems]]></category> <category><![CDATA[HTML & CSS]]></category> <category><![CDATA[HTML & XHTML Tutorials]]></category> <category><![CDATA[HTML5]]></category> <category><![CDATA[JavaScript]]></category> <category><![CDATA[Technology]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[UX]]></category> <category><![CDATA[Web Tech]]></category> <category><![CDATA[HTML5 Dev Center]]></category> <category><![CDATA[HTML5 Tutorials & Articles]]></category> <category><![CDATA[javascript]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/?p=52733</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2012/03/658-html5-aroma-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="658-html5-aroma" title="658-html5-aroma" />The W3C will shortly announce three new elements which supplement the HTML5 audio and video tags to enable a full sensory experience in your web pages. Craig looks at the HTML, CSS and JavaScript implementation details.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2012/03/658-html5-aroma-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="658-html5-aroma" title="658-html5-aroma" /><p></p><p>The web is primarily a visual medium with a little audio here and there. HTML5 supports the <code>video</code> and <code>audio</code> tags but our other senses have been shamefully neglected. Until now.</p><p>The W3C will shortly announce three new HTML5 elements which support alternative sensory interfaces:</p><ul><li><code>&lt;texture&gt;</code> for touch</li><li><code>&lt;aroma&gt;</code> for smell, and</li><li><code>&lt;flavor&gt;</code> for taste</li></ul><h2>HTML Usage</h2><p>The new elements will normally be used as wrappers for other items. For example, you might want to apply a fresh grass odor to an image of a field, e.g.</p><pre><code>
&lt;aroma fresh=&quot;50%&quot; sweet=&quot;20%&quot; warm=&quot;35%&quot;&gt;
	&lt;img src=&quot;myfield.jpg&quot; alt=&quot;field&quot; /&gt;
&lt;/aroma&gt;
</code></pre><p>The categorization attributes will vary depending on the tag, e.g.</p><ul><li>texture: smoothness, firmness, flaccidity, temperature</li><li>aroma: sweet, pungent, acrid, fragrant, warm, dry, sour</li><li>flavor: sweetness, sourness, saltiness</li></ul><p>The volume and muted attributes are also supported to indicate the <em>strength</em> of odors and flavors.<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p><p>However, unless you&#8217;re a chemical expert, defining these attributes isn&#8217;t easy. For that reason, all tags can use the src and type attributes to point to sensory definition files which contain one or more textures, aromas or flavors, e.g.</p><pre><code>
&lt;aroma src=&quot;cheese.odor&quot; type=&quot;stilton&quot;&gt;
	&lt;img src=&quot;stilton.jpg&quot; alt=&quot;stilton cheese&quot; /&gt;
&lt;/aroma&gt;
</code></pre><p>Vendors will provide several pre-defined sensory packs within their browsers. However, Chrome&#8217;s representation of Roquefort is likely to differ from IE&#8217;s; it may be several years before we reach agreed sensory standards. Fortunately, it will be possible to develop your own definition files if compatibility issues arise.</p><h2>CSS Properties</h2><p>Textures, odors and flavors can also be applied from CSS. For example, our online cheese shop could link to a <a
href="http://en.wikipedia.org/wiki/Stinking_Bishop_cheese">Stinking Bishop</a> page:</p><pre><code>
&lt;a id=&quot;stinking&quot; href=&quot;stinking-bishop.html&quot;&gt;
	&lt;img src=&quot;stinking-bishop.jpg&quot; alt=&quot;stinking bishop cheese&quot; /&gt;
&lt;/a&gt;
</code></pre><p>CSS could apply an appropriate aroma, flavor and texture as the user hovers over or focuses on the link. Sensory definition files or classifications can be used:</p><pre><code>
a#stinking:hover, a#stinking:focus {
	aroma: url(&quot;cheese.odor&quot;) stinkingbishop 50%; /* pack, type, volume */
	flavor: url(&quot;cheese.taste&quot;) stinkingbishop 98%; /* pack, type, volume */
	texture: 25% 30% 20; /* smoothness, hardness, temperature (degrees C) */
}
</code></pre><h2>JavaScript APIs</h2><p>JavaScript APIs will be available for the new sensory elements. For example, you could mute or change the volume (strength) of a sensory tag, e.g.</p><pre><code>
var cheese = document.getElementById(&quot;stinking&quot;);
var c = 0;
Pungent();
function Pungent() {
	cheese.aroma.volume = c + &quot;%&quot;;
	c += 5;
	if (c &lt; 100) setTimeout(arguments.callee, 500);
}
</code></pre><p>This example increases the cheese odor over time. Note that aroma-generating devices are likely to have slower response times than screen output: thorough testing will be required to ensure aromas and flavors don&#8217;t clash.</p><h2>Hardware Support</h2><p><img
src="http://blogs.sitepointstatic.com/images/tech/658-html5-lick-mouse.jpg" width="180" height="180" alt="lick-able mouse wheel" class="right" style="border:1px solid #666" /></p><p>Hardware devices which support these sense elements will be introduced during the next year. One of the first is a multi-sensory mouse by Ollofipra, the Scandinavian PC manufacturer. It uses a patented rubber mesh to change shape, texture and temperature. It also emits a range of smells and the central wheel generates different flavors. The company hopes to add the technology to touch-sensitive monitors so they become lick-able.</p><p>Please note that the W3C specifications for the sensory elements are at an early daft stage and implementation changes are inevitable. However, the future looks promising and the tags have potential to revolutionize web interfaces. You should certainly discuss it with your colleagues today.</p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/html5-new-sensory-elements/feed/</wfw:commentRss> <slash:comments>32</slash:comments> </item> <item><title>SEO Alert! Google Downgrades Pages With Too Many Ads</title><link>http://www.sitepoint.com/seo-google-adverts-above-fold/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=seo-google-adverts-above-fold</link> <comments>http://www.sitepoint.com/seo-google-adverts-above-fold/#comments</comments> <pubDate>Mon, 23 Jan 2012 13:17:49 +0000</pubDate> <dc:creator>Craig Buckler</dc:creator> <category><![CDATA[Best Practices]]></category> <category><![CDATA[Design Principles]]></category> <category><![CDATA[Discussion]]></category> <category><![CDATA[Layout]]></category> <category><![CDATA[Search Engine Marketing]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[User Experience]]></category> <category><![CDATA[UX]]></category> <category><![CDATA[Website Revenue Strategies]]></category> <category><![CDATA[advertising]]></category> <category><![CDATA[adverts]]></category> <category><![CDATA[Google Tutorials & Articles]]></category> <category><![CDATA[PageRank]]></category> <category><![CDATA[search]]></category> <category><![CDATA[SEO]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/?p=50605</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2012/01/628-seo-ads-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="628-seo-ads" title="628-seo-ads" />Google has announced an algorithm change which downgrades any site with too many adverts above the fold. Craig discusses the policy and whether Google is starting to dictate how you design web pages.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2012/01/628-seo-ads-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="628-seo-ads" title="628-seo-ads" /><p></p><p>Adverts pay for many of the resources we take for granted on the web. No one begrudges a few ads &#8212; you wouldn&#8217;t be reading this if you did &#8212; but some sites take adverts beyond a reasonable level. Google&#8217;s latest search algorithm change attempts to improve user experience by downgrading sites with too many adverts.</p><p>According to Google&#8217;s <a
href="http://insidesearch.blogspot.com/2012/01/page-layout-algorithm-improvement.html">Inside Search blog</a>:</p><blockquote><p> We understand that placing ads above-the-fold is quite common for many websites; these ads often perform well and help publishers monetize online content. This algorithmic change does not affect sites who place ads above-the-fold to a normal degree, but affects sites that go much further to load the top of the page with ads to an excessive degree or that make it hard to find the actual original content on the page. This new algorithmic improvement tends to impact sites where there is only a small amount of visible content above-the-fold or relevant content is persistently pushed down by large blocks of ads.</p></blockquote><p>The algorithm analyzes adverts in fixed positions; the Pagerank for sites using pop-ups, pop-unders or overlays will not be affected.<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p><p>Google estimates the change will impact 1% of searches, i.e. you could encounter result reordering for one in every 100 searches. If your site&#8217;s affected, they recommend testing it with the <a
href="http://browsersize.googlelabs.com/">Browser Size tool</a>.</p><h2>Perplexing Prerequisites</h2><p>As with most search algorithm changes, Google is holding all the cards and gives us little to go on&hellip;</p><ol><li>What do Google consider to be an advert? They&#8217;re not always banners or third-party scripts?</li><li>What do Google consider <em>&#8220;above-the-fold&#8221;</em>? It&#8217;s a dubious design term which changes from device to device and has no authoritative specification.</li><li>How do Google know whether an advert is above the fold? It&#8217;s easy to reposition advert blocks with CSS or JavaScript which wouldn&#8217;t necessarily be noticed by the algorithm.</li><li>How do they rank pages which use responsive design and reposition or remove adverts according to the screen size?</li><li>Google AdWords recommends advert positions above the fold. You may have received messages stating that you&#8217;re losing revenue because you&#8217;re under-utilizing the maximum number of slots. Could you be penalized for using Google&#8217;s own advice?</li></ol><p>It&#8217;s great Google want to improve the web and search is their core business &#8212; they can do what they like and we&#8217;re free to use them or not. That said, should a company as powerful as Google be able to dictate something as subjective as design or user experience?</p><p>The Apple and Microsoft websites are essentially huge multi-page adverts. Could those sites be downgraded because Google (a major competitor) considers them to offer a bad user experience?</p><p>And where could it end? Could Google consider downgrading predominantly red designs because it&#8217;s considered a danger color in some cultures? Are they impeding your creative freedom? Is it censorship?</p><h2>Don&#8217;t Panic</h2><p>The vast majority of site owners need not be alarmed. Google&#8217;s announcement sounds more like marketing spin than an advanced new technology which will change the way designers approach pages.</p><p>I suspect the algorithm loads each page in a browser engine which emulates a 1024px width screen. CSS and JavaScript effects parsed during the initial page load may be applied but event or timer-driven code wouldn&#8217;t run. It then works out the vertical position of the first major content block and if it&#8217;s more than, say, 600px down, the Pagerank would be reduced accordingly. The overall impact is likely to be tiny, though. Factors such as keyword relevancy and even page weight will have a bigger effect.</p><p>There&#8217;s an easy way for site owners to avoid downgrades: simply place all your adverts at the bottom of the page then rearrange the content using CSS3 animations or JavaScript events. I&#8217;m no fan of intrusive advertising but that&#8217;s a horrible user experience &#8212; far worse than a little scrolling. Unfortunately, Google won&#8217;t know unless they manually check the site.</p><p>Will Google&#8217;s new algorithm affect your site? Is the policy at odds with Google&#8217;s advertising business? Is Google using it&#8217;s power to dictate website design and code quality?</p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/seo-google-adverts-above-fold/feed/</wfw:commentRss> <slash:comments>19</slash:comments> </item> <item><title>PHPMaster: Defining and Using Functions in PHP</title><link>http://feedproxy.google.com/~r/PHPMaster_feed/~3/_J2rGsNG8m8/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=phpmaster-defining-and-using-functions-in-php</link> <comments>http://feedproxy.google.com/~r/PHPMaster_feed/~3/_J2rGsNG8m8/#comments</comments> <pubDate>Wed, 30 Nov 2011 22:37:48 +0000</pubDate> <dc:creator>Iain Tench</dc:creator> <category><![CDATA[.NET]]></category> <category><![CDATA[Content]]></category> <category><![CDATA[PHP]]></category> <category><![CDATA[PHP & MySQL Tutorials]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[Web Tech]]></category> <category><![CDATA[content]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/?p=48579</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/11/be9d40856242-150x150-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="Thumbnail" title="Thumbnail" /> Let’s start by defining the word “function.” A function is a self-contained piece of code which carries out a particular task (or function!). A key benefit of using functions is that they are reusable; if you have a task that needs to be performed a number of times, a function is an ideal solution. They can be either defined by you or by PHP (PHP has a rich collection of built-in functions). This article will focus on programmer-defined functions but will touch briefly on PHP’s functions to complete the picture]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/11/be9d40856242-150x150-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="Thumbnail" title="Thumbnail" /><p></p><p><img
src="http://www.sitepoint.com/wp-content/uploads/2011/11/be9d40856242-150x150-50x50.jpg" /> Let’s start by defining the word “function.” A function is a self-contained piece of code which carries out a particular task (or function!). A key benefit of using functions is that they are reusable; if you have a task that needs to be performed a number of times, a function is an ideal solution. They can be either defined by you or by PHP (PHP has a rich collection of built-in functions). This article will focus on programmer-defined functions but will touch briefly on PHP’s functions to complete the picture</p><p>Read the original post:<br
/> <a
target="_blank" href="http://feedproxy.google.com/~r/PHPMaster_feed/~3/_J2rGsNG8m8/" title="PHPMaster: Defining and Using Functions in PHP">PHPMaster: Defining and Using Functions in PHP</a></p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://feedproxy.google.com/~r/PHPMaster_feed/~3/_J2rGsNG8m8/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Developing a Better Country Selector</title><link>http://www.sitepoint.com/better-country-selector/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=better-country-selector</link> <comments>http://www.sitepoint.com/better-country-selector/#comments</comments> <pubDate>Mon, 14 Nov 2011 18:30:39 +0000</pubDate> <dc:creator>Craig Buckler</dc:creator> <category><![CDATA[Best Practices]]></category> <category><![CDATA[JavaScript]]></category> <category><![CDATA[JavaScript & Ajax Tutorials]]></category> <category><![CDATA[JavaScript & CSS]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[country]]></category> <category><![CDATA[html]]></category> <category><![CDATA[javascript]]></category> <category><![CDATA[jquery plugins]]></category> <category><![CDATA[jQuery Tutorials & Articles]]></category> <category><![CDATA[select]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/?p=47870</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/11/604-better-country-selector-50x50.png" class="attachment-thumbnail wp-post-image" alt="604-better-country-selector" title="604-better-country-selector" />Country lists in drop-down HTML select boxes are usually a usability nightmare. Craig reveals a new solution to help your users.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/11/604-better-country-selector-50x50.png" class="attachment-thumbnail wp-post-image" alt="604-better-country-selector" title="604-better-country-selector" /><p></p><p>There reaches a point in every web developer&#8217;s life when they need a country selector &#8212; perhaps for a sign-up form or delivery address. So we find a list of all 249 countries, insert a <code>select</code> box into our HTML code and consider that a job well done.</p><p>It&#8217;s not.</p><p>Country select boxes are dreadful. The problems include:</p><p><strong>1. Too many choices</strong><br
/> Locating your country within 249 items is a usability nightmare.</p><p><strong>2. An awkward interface</strong><br
/> Select box controls differ between devices, OSs and browsers but one thing is certain &#8212; the user will need to scroll around to find their country. That often means switching from keyboard to mouse or lots of swiping on your mobile.</p><p><strong>3. Sorting problems</strong><br
/> If your site is primarily visited by US users, an alphabetic list displays &#8220;United Arab Emirates&#8221; and &#8220;United Kingdom&#8221; first. Some developers address this by putting the most likely countries at the top but this can confuse users expecting an alphabetically-ordered list.</p><p><strong>4. No consideration for alternative country names</strong><br
/> Country lists rarely consider alternative names. I live in the UK but any of United Kingdom, UK, Great Britain, GB, Britain or England could be defined by the developer.<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p><p><strong>5. Poor internalization</strong><br
/> What if a Spanish user tries to locate &#8220;Espa&ntilde;a&#8221; in your English list? At best, they&#8217;ll find Estonia. In addition, lists rarely consider international country codes such as ES or US.</p><p><strong>6. No consideration for abbreviations or mis-keying</strong><br
/> If a user enters a term such as &#8220;nited&#8221;, &#8220;States&#8221; or &#8220;America&#8221; it&#8217;s unlikely they&#8217;ll locate the USA.</p><p>Fortunately, Christian Holst from the <a
href="http://baymard.com/blog">Baymard Institute</a> has developed a solution which solves the issues for us: see <a
href="http://baymard.com/labs/country-selector"><strong>Redesigning the Country Selector</strong></a>.</p><p><img
src="http://blogs.sitepointstatic.com/images/tech/604-better-country-selector-demo.png" width="578" height="172" alt="better country selector" class="center" /></p><p>It&#8217;s a jQuery plugin which replaces a standard HTML <code>select</code> box with an auto-complete control. The jQuery UI Autocomplete plugin is supplied but you can use your own implementation if necessary.</p><p>Several properties can be defined in the HTML:</p><pre><code>
&lt;select name=&quot;Country&quot; id=&quot;country-selector&quot; autofocus=&quot;autofocus&quot;&gt;
&lt;option value=&quot;Austria&quot; data-alternative-spellings=&quot;AT &Ouml;sterreich Osterreich Oesterreich &quot;&gt;Austria&lt;/option&gt;
&lt;option value=&quot;Spain&quot; data-alternative-spellings=&quot;ES Espa&ntilde;a&quot;&gt;Spain&lt;/option&gt;
&lt;option value=&quot;United Arab Emirates&quot; data-alternative-spellings=&quot;AE UAE Emirates&quot;&gt;United Arab Emirates&lt;/option&gt;
&lt;option value=&quot;United Kingdom&quot; data-priority=&quot;2&quot; data-alternative-spellings=&quot;GB Great Britain England UK Wales Scotland&quot;&gt;United Kingdom&lt;/option&gt;
&lt;option value=&quot;United States&quot; data-priority=&quot;1&quot; data-alternative-spellings=&quot;US USA United States of America&quot;&gt;United States&lt;/option&gt;
&lt;/select&gt;
</code></pre><p>This snippet is identical to most country <code>select</code> code except:</p><ul><li>If a <code>data-priority</code> code is defined, it&#8217;s assumed to have a higher priority than countries without a code. The lower the priority number, the higher it will appear in the auto-complete list.</li><li>A space-separated list of alternative codes and spellings can be defined in the <code>data-alternative-spellings</code> attribute.</li></ul><p>To convert the <code>select</code> to an auto-complete box you simply need to call the jQuery plugin method:</p><pre><code>
$("#country-selector").selectToAutocomplete();
</code></pre><p>There are many more options so I suggest you try the demonstration and view the documentation at <a
href="http://baymard.com/labs/country-selector"><strong>baymard.com/labs/country-selector</strong></a>. The open-source code is released under the MIT License and is available at <a
href="https://github.com/JamieAppleseed/selectToAutocomplete">GitHub</a>.</p><p>The plugin is far superior to other implementations I&#8217;ve seen &#8212; including, ahem, my own. Note that it doesn&#8217;t work in IE6 or 7 but those browsers will still display the standard <code>select</code> box. It&#8217;s not limited to countries either and you can use any type of data. Recommended.</p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/better-country-selector/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item><div><div
class="post_box two_ads" style="float:left;padding-left:2px;"><div
id='div-gpt-ad-1328645237920-0' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328645237920-0'); });</script> </div></div></div><div
class="clear">&nbsp;</div> <item><title>BuildMobile: Wicked iOS Range Slider: Part Two</title><link>http://feedproxy.google.com/~r/BuildMobile/~3/5H-xq-WKPI0/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=buildmobile-wicked-ios-range-slider-part-two</link> <comments>http://feedproxy.google.com/~r/BuildMobile/~3/5H-xq-WKPI0/#comments</comments> <pubDate>Mon, 05 Sep 2011 18:33:51 +0000</pubDate> <dc:creator>Mal Curtis</dc:creator> <category><![CDATA[Apple]]></category> <category><![CDATA[BuildMobile]]></category> <category><![CDATA[Content]]></category> <category><![CDATA[Events]]></category> <category><![CDATA[iOS]]></category> <category><![CDATA[iOS Tutorials]]></category> <category><![CDATA[Mobile]]></category> <category><![CDATA[Mobile Web Dev]]></category> <category><![CDATA[Tutorials]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[apple]]></category> <category><![CDATA[buildmobile]]></category> <category><![CDATA[content]]></category> <category><![CDATA[ios]]></category> <category><![CDATA[ios tutorials]]></category> <category><![CDATA[Mobile Tutorials & Articles]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/buildmobile-wicked-ios-range-slider-part-two/</guid> <description><![CDATA[ In part one of this mini series, we tackled the question of implementing a slider when you want to create a range of values, not just one. If you haven’t read part one, you’ll be feeling a little bit lost so I advise you go and check out iOS Range Slider: Part One . Still with us? ]]></description> <content:encoded><![CDATA[<p></p><p> In part one of this mini series, we tackled the question of implementing a slider when you want to create a range of values, not just one. If you haven’t read part one, you’ll be feeling a little bit lost so I advise you go and check out iOS Range Slider: Part One . Still with us?</p><p>More:<br
/> <a
target="_blank" href="http://feedproxy.google.com/~r/BuildMobile/~3/5H-xq-WKPI0/" title="BuildMobile: Wicked iOS Range Slider: Part Two">BuildMobile: Wicked iOS Range Slider: Part Two</a></p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://feedproxy.google.com/~r/BuildMobile/~3/5H-xq-WKPI0/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>BuildMobile: Wicked iOS Range Slider: Part One</title><link>http://feedproxy.google.com/~r/BuildMobile/~3/GFjfpgcn3ko/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=buildmobile-wicked-ios-range-slider-part-one</link> <comments>http://feedproxy.google.com/~r/BuildMobile/~3/GFjfpgcn3ko/#comments</comments> <pubDate>Wed, 31 Aug 2011 22:17:29 +0000</pubDate> <dc:creator>Mal Curtis</dc:creator> <category><![CDATA[AWS]]></category> <category><![CDATA[BuildMobile]]></category> <category><![CDATA[Color]]></category> <category><![CDATA[Events]]></category> <category><![CDATA[General]]></category> <category><![CDATA[iOS]]></category> <category><![CDATA[iOS Tutorials]]></category> <category><![CDATA[Mobile]]></category> <category><![CDATA[RoR]]></category> <category><![CDATA[Tutorial]]></category> <category><![CDATA[Tutorials]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[buildmobile]]></category> <category><![CDATA[color]]></category> <category><![CDATA[ios tutorials]]></category> <category><![CDATA[Mobile Tutorials & Articles]]></category> <category><![CDATA[ror]]></category> <category><![CDATA[tutorial]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/buildmobile-wicked-ios-range-slider-part-one/</guid> <description><![CDATA[ One of the commonly used iOS controls is the slider control. It’s a great, all purpose slider, that allows you to quickly swipe your finger along the screen to set a value. Things get a little complicated when you want to create a range of values however. The options are somewhat limited. ]]></description> <content:encoded><![CDATA[<p></p><p> One of the commonly used iOS controls is the slider control. It’s a great, all purpose slider, that allows you to quickly swipe your finger along the screen to set a value. Things get a little complicated when you want to create a range of values however. The options are somewhat limited.</p><p>Read More:<br
/> <a
target="_blank" href="http://feedproxy.google.com/~r/BuildMobile/~3/GFjfpgcn3ko/" title="BuildMobile: Wicked iOS Range Slider: Part One">BuildMobile: Wicked iOS Range Slider: Part One</a></p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://feedproxy.google.com/~r/BuildMobile/~3/GFjfpgcn3ko/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>DesignFestival: Popular Mistakes in Universal Web Design</title><link>http://feedproxy.google.com/~r/DesignFestival/~3/PzFEBMTx86U/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=designfestival-popular-mistakes-in-universal-web-design</link> <comments>http://feedproxy.google.com/~r/DesignFestival/~3/PzFEBMTx86U/#comments</comments> <pubDate>Thu, 21 Jul 2011 08:03:52 +0000</pubDate> <dc:creator>Dennis Lembree</dc:creator> <category><![CDATA[Design]]></category> <category><![CDATA[General]]></category> <category><![CDATA[HTML & CSS]]></category> <category><![CDATA[JavaScript]]></category> <category><![CDATA[Tutorial]]></category> <category><![CDATA[Typography]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[html & css]]></category> <category><![CDATA[javascript]]></category> <category><![CDATA[tutorial]]></category> <category><![CDATA[typography]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/?p=43712</guid> <description><![CDATA[ With today’s snazzy and competitive “Web 2.0” and social media world, universal design is many times forgotten. It’s bewildering as to why since there are many social, technical, financial, and legal reasons which support universal design practices. Let’s discuss some of the more prevalent issues in websites today, and how they relate to the main universal design principles. The Principles First, let’s review the seven universal design principles including some web-related examples. ]]></description> <content:encoded><![CDATA[<p></p><p> With today’s snazzy and competitive “Web 2.0” and social media world, universal design is many times forgotten. It’s bewildering as to why since there are many social, technical, financial, and legal reasons which support universal design practices. Let’s discuss some of the more prevalent issues in websites today, and how they relate to the main universal design principles. The Principles First, let’s review the seven universal design principles including some web-related examples.</p><p>Link:<br
/> <a
target="_blank" href="http://feedproxy.google.com/~r/DesignFestival/~3/PzFEBMTx86U/" title="DesignFestival: Popular Mistakes in Universal Web Design">DesignFestival: Popular Mistakes in Universal Web Design</a></p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://feedproxy.google.com/~r/DesignFestival/~3/PzFEBMTx86U/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>DesignFestival: Creating Meaningful Site Search by Challenging Assumptions</title><link>http://feedproxy.google.com/~r/DesignFestival/~3/lk_SHkeaV7g/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=designfestival-creating-meaningful-site-search-by-challenging-assumptions</link> <comments>http://feedproxy.google.com/~r/DesignFestival/~3/lk_SHkeaV7g/#comments</comments> <pubDate>Wed, 22 Jun 2011 20:04:00 +0000</pubDate> <dc:creator>Emily Smith</dc:creator> <category><![CDATA[Design]]></category> <category><![CDATA[Inspiration]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[UX]]></category> <category><![CDATA[Web Tech]]></category> <category><![CDATA[inspiration]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/designfestival-creating-meaningful-site-search-by-challenging-assumptions/</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/06/c814search-150x150-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="Thumbnail" title="Thumbnail" /> The role of search in your site can be a hot topic. Sometimes there is pressure to make it a giant bandage to cover poor navigational structure, and other times it’s included just because “every site needs search.” Let’s look at three pervasive myths about search and two questions that will help us create a strategy unique to every site. Misconceptions About Search Myth #1: Site Visitors Prefer to Find Information With Search Researchers have worked to combat this myth and have found that site visitors’ behavior does not naturally trend toward search first, even when searchers know exactly what they’re looking for. ]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/06/c814search-150x150-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="Thumbnail" title="Thumbnail" /><p></p><p><img
src="http://www.sitepoint.com/wp-content/uploads/2011/06/c814search-150x150-50x50.jpg" /> The role of search in your site can be a hot topic. Sometimes there is pressure to make it a giant bandage to cover poor navigational structure, and other times it’s included just because “every site needs search.” Let’s look at three pervasive myths about search and two questions that will help us create a strategy unique to every site. Misconceptions About Search Myth #1: Site Visitors Prefer to Find Information With Search Researchers have worked to combat this myth and have found that site visitors’ behavior does not naturally trend toward search first, even when searchers know exactly what they’re looking for.</p><p>See the original article here:<br
/> <a
target="_blank" href="http://feedproxy.google.com/~r/DesignFestival/~3/lk_SHkeaV7g/" title="DesignFestival: Creating Meaningful Site Search by Challenging Assumptions">DesignFestival: Creating Meaningful Site Search by Challenging Assumptions</a></p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://feedproxy.google.com/~r/DesignFestival/~3/lk_SHkeaV7g/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item><div><div
class="post_box two_ads" style="float:left;padding-left:2px;"><div
id='div-gpt-ad-1328645237920-1' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328645237920-1'); });</script> </div></div></div><div
class="clear">&nbsp;</div> <item><title>Speak Their Language: Presenting Wireframes to Designers</title><link>http://www.sitepoint.com/speak-their-language-presenting-wireframes-to-designers/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=speak-their-language-presenting-wireframes-to-designers</link> <comments>http://www.sitepoint.com/speak-their-language-presenting-wireframes-to-designers/#comments</comments> <pubDate>Fri, 18 Feb 2011 21:20:30 +0000</pubDate> <dc:creator>Emily Smith</dc:creator> <category><![CDATA[Usability]]></category> <category><![CDATA[communication]]></category> <category><![CDATA[ia]]></category> <category><![CDATA[ux]]></category> <category><![CDATA[Web Design Tutorials & Articles]]></category> <guid
isPermaLink="false">http://blogs.sitepoint.com/?p=32108</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2009/02/phones-talking-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="word of mouth" title="word of mouth" />Whether you are an information architect or user experience designer that creates wireframes or you're a one-person shop who does it all, you'll find these tips helpful for presenting your work to designers.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2009/02/phones-talking-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="word of mouth" title="word of mouth" /><p></p><p>Next time you&#8217;re on a project where a designer is involved, it will help to keep these five tips in mind when it&#8217;s time to present wireframes:</p><h2>1. Be visually minded</h2><p>Your meeting will fall flat if the designer isn&#8217;t able to start creating mental visual concepts about how the design could start coming together. One way to help create the right atmosphere is to make attractive wireframes. If you are like me and aren&#8217;t a designer, then spend the extra effort to learn about basic design principles. This applies whether they are low or high fidelity, digital or hand-drawn.</p><p>Another way to serve these conceptual thinkers is to focus on the overall concepts of the site and how you see it coming to life. There couldn&#8217;t be a better place to employ digital or paper prototypes, if you are familiar with them, to help both of you visualize and discuss.</p><h2>2. Channel creativity</h2><p>Any quality designer will tell you that the best designs are produced within constraints. Creativity that is not channeled can be debilitating. One way to do this is to always talk openly about site goals, technical limitations, audience, budget, and timeline.<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p><p>Designers are visionaries who are thinking in terms of design innovation and will likely keep creating new ideas during the whole design process. These are often great ideas that improve upon your work, but they can also frustrate the scope of the project. Clearly stating the limitations the design is working within can be a relief for everyone.</p><h2>3. Focus on enjoyment</h2><p>If designers&#8217; jobs are merely to skin wireframes, their motivation will be lackluster, and who could blame them? Talk about where you see people being delighted, surprised, or specifically cared for by the site. Especially if you know the types of people that will be using your site, you can discuss how each personality would benefit individually from the interface experience. This will help them focus their energy, build excitement, and lead to innovative ideas for improvement.</p><h2>4. Break it up</h2><p>When you can, avoid dumping all of your documents and requirements on the designer at once. This will be overwhelming for both of you and can throw the creative process out of balance.  You&#8217;ll probably end up needing one or two bigger meetings, but it will help if you can have some shorter meetings beforehand where you present sketches, talk about ideas, or talk through specific pages or challenges. When the bigger meetings roll around, you&#8217;ll have less groundwork to lay at the forefront and it will be easier to get momentum built. This process will make the transition to the design phase seamless.</p><h2>5. Make it personal</h2><p>It makes a world of difference to get to know the designers you&#8217;ll be working with personally. How do they best consume information? What role does emotion play in their decisions? What time of day is their mind most focused to absorb details versus think about the big picture? Do they need to marinate on something awhile to offer feedback or is it more instantaneous? Do they need coffee before your meetings? The more you can find out, the better you can personalize your projects with them to everyone&#8217;s benefit.</p><h2>A Note for the One-person Shops</h2><p>If you happen to be a one-person shop, where you are developing the strategy, planning/wireframing, designing, and coding all yourself, these still apply! As a multi-talented individual with a heavy task load, make sure to think about the different modes in which you are asking your brain to work. By helping yourself think conceptually, visualizing, using constraints, thinking about enjoyment, and breaking the work up into smaller segments, you will be all set for the design phase.</p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/speak-their-language-presenting-wireframes-to-designers/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Speaking Their Language: Presenting IA to Developers</title><link>http://www.sitepoint.com/speaking-their-language-presenting-ia-to-developers/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=speaking-their-language-presenting-ia-to-developers</link> <comments>http://www.sitepoint.com/speaking-their-language-presenting-ia-to-developers/#comments</comments> <pubDate>Fri, 11 Feb 2011 15:00:54 +0000</pubDate> <dc:creator>Emily Smith</dc:creator> <category><![CDATA[Usability]]></category> <category><![CDATA[communication]]></category> <category><![CDATA[development]]></category> <category><![CDATA[ia]]></category> <guid
isPermaLink="false">http://blogs.sitepoint.com/?p=31844</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/02/wooden-people-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="wooden-people" title="wooden-people" />Run your IA meetings the way developers wish you would! Four tips to consider when presenting to this unique audience.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/02/wooden-people-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="wooden-people" title="wooden-people" /><p></p><p>Ideas, even earth-shatteringly magnificent ones, that aren’t communicated effectively can suck the life right out of a project. For the next couple of weeks I am going to be discussing considerations for presenting your IA work to various audiences.</p><p>Here are four guidelines to keep in mind while you&#8217;re preparing to meet with or present IA directions to the developers involved in your next project:</p><h2>Be respectful.</h2><p>In every situation, always respect the developers. I’ve unfortunately been witness to and even participated in hasty critique of developers’ work. The truth is that we don’t know the constraints they were under when they created a system, what obstacles they had to overcome, and the problems that have already been solved. Make assumptions with benevolence, draw out current weak points as springboards for discussion, and use the project goals to guide constructive conversations.</p><h2>Be brief.</h2><p>Developers usually have several complicated problems rolling around in their heads that they’re in the middle of solving (occasionally this creates the illusion that they’re not listening, but don’t be fooled &#8211; they are). Acknowledge their cognitive load and don’t take up more time than is reasonable. They will respect you for your brevity and be glad to get back to working on those solutions.<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p><h2>Get to the good stuff.</h2><p>These pragmatic problem solvers benefit from getting right to the meat of the matter, so make sure you cut verbal fluff where you can. Be careful here: that doesn’t mean they aren’t interested in the project goals, site audience, or other “soft” topics. In fact, it’s these details that give their work context and purpose. It’s the delivery which matters, which should be sans pretense and filler words.</p><h2>Engage with the details.</h2><p>From the very beginning of a project, the developers should and will be thinking through implementation details. Stay a step ahead by preparing thoughts and questions related to the implications for both front and back end development. Every piece of a wireframe or prototype impacts their scope. Sometimes this can get frustrating if you’re excitedly sharing a big idea and they’re giving you five reasons the execution of this idea is not going to fly. Expect this back and forth and be thankful that the development team is putting all that thought into the project.</p><p>Of course, I am painting with broad strokes here and every developer is unique (I work with ten and am married to one, so I have some firsthand experience). These guides are just a good place to start as you get to learn about and relate to these individuals on your project team.</p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/speaking-their-language-presenting-ia-to-developers/feed/</wfw:commentRss> <slash:comments>9</slash:comments> </item> <item><title>4 Ways to Improve Your Mobile Metaphors</title><link>http://www.sitepoint.com/4-ways-to-improve-your-mobile-metaphors/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=4-ways-to-improve-your-mobile-metaphors</link> <comments>http://www.sitepoint.com/4-ways-to-improve-your-mobile-metaphors/#comments</comments> <pubDate>Thu, 03 Feb 2011 19:03:26 +0000</pubDate> <dc:creator>Emily Smith</dc:creator> <category><![CDATA[Usability]]></category> <category><![CDATA[android]]></category> <category><![CDATA[apple]]></category> <category><![CDATA[ipad]]></category> <category><![CDATA[iphone]]></category> <category><![CDATA[Mobile Tutorials & Articles]]></category> <guid
isPermaLink="false">http://blogs.sitepoint.com/?p=31528</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/02/Screen-shot-2011-02-02-at-11.25.17-AM-50x50.png" class="attachment-thumbnail wp-post-image" alt="iBooks iPhone interface" title="iBooks" />Multi-touch mobile apps with custom controls can be fun and engaging when done right. Check out these tips to add believability and finesse to apps that mimic real world controls and scenarios.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/02/Screen-shot-2011-02-02-at-11.25.17-AM-50x50.png" class="attachment-thumbnail wp-post-image" alt="iBooks iPhone interface" title="iBooks" /><p></p><p>In my last post, I mentioned that one way custom controls on a mobile device work well is if they mimic a real-world control. Let&#8217;s look at a turntable metaphor as an example: an app that looks like an old turntable might have a moveable needle, knobs to turn, and the ability to scratch (I found out that apps similar to this actually exist, but I&#8217;ve not checked them out).</p><p>This might be Apple&#8217;s favorite rule to break. To see what I mean, check out the calendar app on an iPad. It looks a lot like a traditional datebook with all of those flippable pages, but it&#8217;s the tiny arrows at the bottom that you have to tap to flip the page. There&#8217;s no option to use a swipe for page turning.</p><p
class="figure"><img
class="size-full wp-image-31602 " src="http://blogs.sitepoint.com/wp-content/uploads/2011/02/ical1.jpg" alt="iCal" width="550" height="403" /><strong>The iCal app doesn&#8217;t allow page turns by swipe</strong></p><p>In an effort to do what they <a
href="http://bit.ly/hEZKzE">say</a> and not what they have done above, let&#8217;s look at some ways that you can deliver a consistent experience that makes sense to the people who will be using your app:<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p><ul><li><strong>Get off the computer.</strong> In as many ways as possible, the abstraction should work as the subject itself. If you are building the turntable app that I mentioned earlier, then by all means get your hands on a turntable! Put a record on, adjust the knobs, listen to the crackle of the needle against vinyl, pay attention to the details that make it an enjoyable experience. Take notes.</li><li><strong>Improve on &#8220;real life.&#8221;</strong> The advantage of having a turntable or a datebook on a multi-touch digital device in the first place is that you can do all manner of things you can&#8217;t do on a real turntable or datebook. Increase enjoyment by improving upon the real world object where possible, both in appearance and technical ability.<br
/> For example, being able to swipe to flip the page of an eBook is a fun interaction but becomes a chore if you are forced to do it. A digital turntable might have secondary controls that don&#8217;t require the users who are in a hurry to set the needle or pick a new album. Plan for advanced or frequent users of your app by creating alternate task flows that focus on efficiency.</li><li><strong>Try it before you build it.</strong> The more you can experience the app you&#8217;re making before it&#8217;s built, the more you gauge how well the metaphor is coming across and where the holes are. A cheap and effective way to do this is through paper (or even felt) prototypes, where you can &#8220;act out&#8221; the interactions with printouts or drawn mockups.<br
/> So, in our turntable example, you could demonstrate that you want the needle arm to snap to the edge of the record when it&#8217;s tapped once, but dragging allows it to be placed anywhere. This activity is instantly collaborative since it&#8217;s not on someone&#8217;s personal computer and leads to lots of clarifications. Make sure to invite the developers; they will think in terms of execution and can bring technical opportunities and limitations to the discussion.</li><li><strong>Think through details</strong>. I like to think of developers as the directors that pull the working parts together into a cohesive unit, telling the &#8220;actors&#8221; where to go and when to make the story believable. It makes the process much smoother and takes the pressure off if these interactions have been discussed beforehand. That&#8217;s why it&#8217;s best to avoid the temptation to sweep even small areas of vagueness under the rug during the planning and design phases.<br
/> It&#8217;s all too tempting to say, &#8220;the developer can flesh those details out, we don&#8217;t have time to worry about all those interactions right now.&#8221; Remember that your metaphor will be fail without detail-oriented production; it&#8217;s the direct manipulation and carefully planned responsiveness that makes the app feel &#8220;right.&#8221;</li></ul><p>Chances are that you are building an app where more standard controls are optimal and there&#8217;s no need to make it look like something else. If you&#8217;re not sure, take into account who&#8217;ll be using your app, what purpose the metaphor would have, and the unique value the metaphor would bring to the people using your app. Don&#8217;t forget that enjoyment counts as value!</p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/4-ways-to-improve-your-mobile-metaphors/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Introducing: DesignFestival</title><link>http://www.sitepoint.com/introducing-design-festival/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=introducing-design-festival</link> <comments>http://www.sitepoint.com/introducing-design-festival/#comments</comments> <pubDate>Wed, 02 Feb 2011 05:14:41 +0000</pubDate> <dc:creator>Jennifer Sheahan</dc:creator> <category><![CDATA[Usability]]></category> <category><![CDATA[Web Design Tutorials & Articles]]></category> <category><![CDATA[Design]]></category> <category><![CDATA[logo design]]></category> <category><![CDATA[typography]]></category> <guid
isPermaLink="false">http://blogs.sitepoint.com/?p=31468</guid> <description><![CDATA[<img
width="37" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/02/logo-.png" class="attachment-thumbnail wp-post-image" alt="Design Festival" title="Design Festival" />We are very excited to announce the arrival of our newest family member: Design Festival! Design Festival is an exciting new website created from the ground up by the passionate team here at SitePoint. We want to explore web design topics in more detail, and decided a whole new website would provide the focus we&#8217;ve [...]]]></description> <content:encoded><![CDATA[<img
width="37" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/02/logo-.png" class="attachment-thumbnail wp-post-image" alt="Design Festival" title="Design Festival" /><p></p><p>We are very excited to announce the arrival of our newest family member: <a
href="http://www.DesignFestival.com">Design Festival</a>!</p><p>Design Festival is an exciting new website created from the ground up by the passionate team here at SitePoint. We want to explore web design topics in more detail, and decided a whole new website would provide the focus we&#8217;ve been searching for.</p><p>Design Festival will be the new home for web design professionals from around the world. We are exploring different web design techniques, with an emphasis on <a
href="http://designfestival.com/category/logo-design/">logo design</a>, <a
href="http://designfestival.com/category/ux/" class="broken_link">UX</a>, and <a
href="http://designfestival.com/category/typography/">typography</a>.</p><p>If you love web design, this site will provide an outlet for your passion. Please join us!</p><ul><li>Access best-practise UX design, logo design, typography, and coding advice.</li><li>Indulge your passion for design &#8211; and learn a thing or two as you go.</li><li>Contribute your own expertise to help others sharpen their skills.</li></ul><p>Please <a
href="http://www.DesignFestival.com">visit the new site</a>, <a
href="http://www.facebook.com/designfestival">join our Facebook page</a>, and <a
href="http://twitter.com/designfestival">follow us on Twitter</a> to stay updated on all the exciting Design Festival news. We&#8217;d love to hear all your feedback, so please let us know what you think.<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p><p>If you’d like to <a
href="http://designfestival.com/write-for-us/">become a contributor to this website</a> by either writing a post or tutorial, please get in touch: <a
href="mailto:editor@designfestival.com">editor@designfestival.com</a>.</p><p>Thanks, as always, for your ongoing support of SitePoint and our sister sites. We appreciate it, and hope you love Design Festival as much as we do.</p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/introducing-design-festival/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item> <item><title>Avoiding Web Habits in Your iPhone Apps</title><link>http://www.sitepoint.com/avoiding-web-habits-in-your-iphone-apps/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=avoiding-web-habits-in-your-iphone-apps</link> <comments>http://www.sitepoint.com/avoiding-web-habits-in-your-iphone-apps/#comments</comments> <pubDate>Thu, 27 Jan 2011 19:28:26 +0000</pubDate> <dc:creator>Emily Smith</dc:creator> <category><![CDATA[Usability]]></category> <category><![CDATA[apple]]></category> <category><![CDATA[Design]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Google Tutorials & Articles]]></category> <category><![CDATA[ios]]></category> <category><![CDATA[iphone]]></category> <category><![CDATA[Mobile Tutorials & Articles]]></category> <guid
isPermaLink="false">http://blogs.sitepoint.com/?p=31300</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2009/06/iphone23-150x150.png" class="attachment-thumbnail wp-post-image" alt="iPhone" title="iphone23.png" />If it looks and acts like a website, it better not be an iPhone app! Emily brings you six usability tips to help play to the strengths of the iOS platform and leave your old web habits behind.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2009/06/iphone23-150x150.png" class="attachment-thumbnail wp-post-image" alt="iPhone" title="iphone23.png" /><p></p><p>If you’ve been lucky enough to work on an iOS app for the iPhone, you’ve probably had two experiences:</p><ol><li><strong>Sweet freedom!</strong> There is no cross-browser compatibility to concern yourself with and a nearly limitless array of possible experiences you can build into your app.</li><li><strong>Paralyzing freedom!</strong> Just like picking the right box in the cereal aisle, too many choices can leave you frustrated and resorting to whatever you&#8217;re most familiar with.</li></ol><p>It is not difficult to create elegant, yet complex interactions on a website. Take web forms, for example; many fields and directions on one page can be smoothly navigated with design cues, easily scanned layout, and responsive controls. This is not the case in iOS, where a series of interactions on separate screens must work together to create one seamless experience.</p><p>As I’ve worked in the iOS platform, I’ve noticed how my web biases inform my iOS wireframes and task flows. Here are some ways I’ve learned to be aware of these biases and avoid them:</p><ul><li><strong>Reset expectations about typing.</strong> Typing is so commonplace these days, we barely think about it. But no matter how speedy someone is on a mobile keyboard, it is always easier to select text on a touch device than it is to type it. Before you add a text field ask yourself: is this absolutely necessary?   If it makes sense for your application, dynamically populate a list of possible answers below an input field once the user starts typing a letter or two (<a
title="Google app as an example for autocomplete" href="http://itunes.apple.com/us/app/google-mobile-app/id284815942?mt=8" target="_blank">Google</a> and <a
title="Path app as an example for autocomplete" href="http://itunes.apple.com/us/app/path/id403639508?mt=8" target="_blank">Path</a> are two of the many apps with this type of auto-complete functionality). Shave seconds off of interactions wherever you can because those seconds add up!</li><li><strong>Condense labels for forms and tables.</strong> Brevity is always advisable on the web, but it’s non-negotiable in iOS. Any time label text for table elements is wrapped or truncated, it interrupts the visual flow. Keep labels as short as possible without sacrificing meaning.</li><li><strong>Rethink forms</strong>. Instead of a consecutive list of questions and input fields on one long screen, think about forms on iOS as several quick interactions strung together. It’s helpful to maintain consistency with iOS standard controls by keeping cancel/back and submit/next buttons in the navigation bar at the top. The best forms are not drudgery to the user but just steps that must be taken to get something useful done.</li><li><strong>Take advantage of gestures, but&#8230;</strong> Gestures are tricky because they’re easy to both under and overuse.  There are three ways that I find gestures most appropriate:<ol><li>Offer them in the same way you might offer a keyboard shortcut in a desktop application &#8212; it’s there for improved experience and efficiency, but it’s not necessary to make the app function.</li><li>Use them if you have created realistic controls that mimic real-world interactions.</li><li>Present them in your app when you need to require deliberate intention (like answering your phone or deleting an account).</li></ol></li><li><strong>Think in taps, not clicks. </strong>A finger tip is infinitely bigger than the tip of a mouse pointer, and that significantly affects your interface. Once you have a wireframe or mockup put together for a screen of your app, step back and look at it. Does it look like <em>Honey I Shrunk the Web Page </em>with lots of touchable areas crunched together? Is someone with thick fingertips going to be tempted to throw their phone across the room out of frustration? This seems obvious, but it is can be a daunting challenge to stop thinking in clicks.</li><li><strong>Don’t go overboard.</strong> It’s easy to swing too far in the other direction and use an array of different native elements because they’re there. The switch is an example of an element that has been widely overused because of its novelty. Well-placed interface elements put the people using your app in control, but superfluous interactions can make them feel like your marionette. A critical eye and some honest colleagues will help prevent interface bloat.</li></ul><p>Instead of strictly following these guidelines, which will change as the platform changes, it’s best to focus on thinking critically about the medium and the people your product reaches. The advent of hundreds of millions of mobile touch devices is revolutionizing the way we think about the web and even desktop applications. Stay ahead of the curve by challenging your paradigms now!<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/avoiding-web-habits-in-your-iphone-apps/feed/</wfw:commentRss> <slash:comments>6</slash:comments> </item> <item><title>Protect Usability Tests from Yourself</title><link>http://www.sitepoint.com/protect-usability-tests-from-yourself/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=protect-usability-tests-from-yourself</link> <comments>http://www.sitepoint.com/protect-usability-tests-from-yourself/#comments</comments> <pubDate>Thu, 13 Jan 2011 02:22:58 +0000</pubDate> <dc:creator>Emily Smith</dc:creator> <category><![CDATA[Usability]]></category> <guid
isPermaLink="false">http://blogs.sitepoint.com/?p=30725</guid> <description><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/01/HiRes.jpg" class="attachment-thumbnail wp-post-image" alt="usability testing" title="usability testing" />Have you ever considered that the biggest concern you face when conducting usability tests might just be yourself! Emily tackles this conundrum, and looks at some of the ways you can prevent your own biases from skewing your results.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/01/HiRes.jpg" class="attachment-thumbnail wp-post-image" alt="usability testing" title="usability testing" /><p></p><p>Whether you&#8217;re testing an existing product, involved in a site redesign, or working on a completely new site, your biggest challenge is often yourself. Here are a few ways you might unintentionally cause problems:</p><ul><li>Your personal experience with a company, product, or application skews your interpretation. Think about an application you use daily. You know exactly where it frustrates you the most and maybe even how you’d fix it. Now imagine you were hired to make improvements to that app. You&#8217;d want to go straight to the source of your frustration. But if you limited your testing to just that area, you could miss a more global and crippling problem because of your tunnel vision.</li><li>Years of experience using and working on the Web helps you to become an expert, but it also can create blind spots. Assumptions about how the Web should function based on what has worked and failed in the past can be indispensable, but also dangerous. When doing realistic illustrations, artists say, “draw what you see, not what you know,” and this is the same principle.</li><li>Lots of pressure from higher-ups in a company to affirm their theories can implicitly affect the way you run tests and ask questions, especially if you&#8217;re new. There&#8217;s a reason people can be skeptical of tests funded by pharmaceutical companies. You may never skew results on purpose, but it’s easy to do unintentionally when the stakes are high enough!</li></ul><p>Whether you&#8217;re conducting formal usability testing or just meeting with your team to discuss wireframes, your deeply held convictions can influence you anywhere! Here are some ways to actively work against your biases:<div
id='div-gpt-ad-1328644474660-10' style='width:728px; height:90px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1328644474660-10'); });</script> </div></p><p><strong>Avoid asking leading questions </strong></p><p>Such questions hint at the answer you&#8217;re expecting to receive. For example, analyze how the statement below may be leading:</p><blockquote><p>I would like you to use this form to complete your order. Your card won’t be charged when you click the submit button, so please finish the whole process.</p></blockquote><p>The leading is subtle, but the statement assumes that the person using the site knows that you&#8217;re supposed to click a button at the end of a form, and that it&#8217;s called a submit button. Even more subtle is that just by saying the words “submit button,” you’ve now likely caused your participant to give more attention than normal to that element.</p><p><strong>Be empathetic to participants</strong></p><p>Your testing will be most successful if you recognize the strong desire many people have to do a task properly. Constant apologizing will likely make the test run too long, and can make for a stressed-out participant (making you feel awfully mean).</p><p>By paying careful attention to your tone, and writing an assuring and informative script to lead into sessions—as well as gently reminding participants during the session that you&#8217;re testing the web site or app, and not the individual—you&#8217;re more likely to create an environment that produces impartial results. If the participant simply struggles to figure out an interface you made and thought was quite clear, you&#8217;re at an especially high risk of becoming defensive, or asking leading questions to achieve an expected outcome.</p><p><strong>Beware of your assumptions and bad memory</strong></p><p>As soon as a test session is over, your brain starts to fit the new information into your existing assumptions about how things work, forgetting or altering those new pesky details.  The steps your brain takes to remain efficient do not always lead to the most accurate synthesis of information—especially if lots of time has passed between project stages. It&#8217;s impossible to remember <em>everything</em> that happened during the test accurately, even if you are a good note-taker (although, notes help!). Consider recording the screen and audio during sessions at least, so that you can refer back during analysis.</p><p>There&#8217;s no need to stress too much over these things, but do learn to be wary of your inclinations over time. Your best tests and internal discussions will happen as you learn to remove your biases from them.</p> <span
id="pty_trigger"></span><div
style='padding:20px 0px 50px 0px;'><div
style='float:left;padding-left:40px;'><div
id='div-gpt-ad-1335489406190-0' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-0'); });</script> </div></div><div
style='float:right;padding-right:40px;'><div
id='div-gpt-ad-1335489406190-1' style='width:300px; height:100px;'> <script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1335489406190-1'); });</script> </div></div><div
style='clear:both'></div></div><div
style='clear:both'></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/protect-usability-tests-from-yourself/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using memcached
Database Caching 32/158 queries in 0.177 seconds using memcached
Object Caching 2999/3315 objects using memcached

Served from: www.sitepoint.com @ 2012-05-27 19:43:08 -->
