<?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 &#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>News, opinion, and fresh thinking for web developers and designers. The official podcast of sitepoint.com.</description> <lastBuildDate>Thu, 09 Feb 2012 15:44:53 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.2.1</generator> <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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/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>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/2011/11/be9d40856242-150x150-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="Thumbnail" title="Thumbnail" /><p></p><p><img
src="http://cdn.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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/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>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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> <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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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><div><div
class="post_box two_ads" style="float:left;padding-left:2px;"> <script>GA_googleFillSlot("Edit_728x90_2");</script> </div></div><div
class="clear">&nbsp;</div> <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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/2011/06/c814search-150x150-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="Thumbnail" title="Thumbnail" /><p></p><p><img
src="http://cdn.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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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> <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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/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>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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><div><div
class="post_box two_ads" style="float:left;padding-left:2px;"> <script>GA_googleFillSlot("Edit_728x90_3");</script> </div></div><div
class="clear">&nbsp;</div> <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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/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>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/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>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/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/">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>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/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>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</script> </div></p><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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://cdn.sitepoint.com/wp-content/uploads/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://cdn.sitepoint.com/wp-content/uploads/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>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</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><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </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> <item><title>UX Design: What it is, What it Takes, and Where it’s Going</title><link>http://www.sitepoint.com/ux-design-what-it-is-what-it-takes-and-where-it%e2%80%99s-going/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=ux-design-what-it-is-what-it-takes-and-where-it%25e2%2580%2599s-going</link> <comments>http://www.sitepoint.com/ux-design-what-it-is-what-it-takes-and-where-it%e2%80%99s-going/#comments</comments> <pubDate>Thu, 29 Jul 2010 06:42:17 +0000</pubDate> <dc:creator>James Mansfield</dc:creator> <category><![CDATA[Usability]]></category> <guid
isPermaLink="false">http://www.sitepoint.com/blogs/?p=24364</guid> <description><![CDATA[<img
width="50" height="50" src="http://cdn.sitepoint.com/wp-content/uploads/2010/07/ux-logo-115x115-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="ux-logo-115x115" title="ux-logo-115x115" />James Mansfield spoke to three of the speakers from the upcoming UX Australia conference, to find out more about the emerging field of UX design: what it is to be a UX designer, how one becomes a UX designer, and what the future holds.]]></description> <content:encoded><![CDATA[<img
width="50" height="50" src="http://cdn.sitepoint.com/wp-content/uploads/2010/07/ux-logo-115x115-50x50.jpg" class="attachment-thumbnail wp-post-image" alt="ux-logo-115x115" title="ux-logo-115x115" /><p></p><p>In the lead up to the <a
href="http://www.uxaustralia.com.au/conference-2010/">UX Australia conference in Melbourne</a>, of which SitePoint is a media partner, James Mansfield asked three of the conference speakers about their views on the emerging field of UX design: what it is to be a UX designer, how they got into the field, and where they see it going.</p><p>The three UX designers interviewed were Shane Morris (<a
href="http://www.automaticstudio.com.au/About.html">Automatic Studio</a>), Daniel Szuc (<a
href="http://apogeehk.com/dano/">Apogee HK</a> and co-author of SitePoint&#8217;s <a
href="http://sitepoint.com/kits/usability1">Usability Kit</a>) and Iain Barker (<a
href="http://meldstudios.com.au/">Meld Studios</a>). Their responses provide insight to aspiring UX designers, and paint an interesting perspective for experienced practitioners.</p><div
class="admonition tip"><div
class="notetitle"><strong>tip: </strong>Win a Ticket to UX Australia</div><p>We&#8217;re giving one lucky SitePoint reader the chance to win a ticket to the <a
href="http://uxaustralia.com.au/conference-2010/">UX Australia</a> conference (you&#8217;ll need to pay the airfare and accommodation). Just take our short quiz, and you could be in the running. But you better be quick &#8212; there are only a couple of days left!<div>  <script type='text/javascript'>GA_googleFillSlot("InArticle_728x90_1");</script> </div></p><p><a
href="http://www.sitepoint.com/quiz/uxaustralia/ux-10/"><strong>Take the quiz!</strong></a></p></div><p><strong>Hi gents, and thanks for taking the time to answer some questions.</strong></p><p><strong> </strong><strong>First of all, User Experience Designer is a relatively new job title and a little tricky to define. How would you describe the role of a UX designer, as opposed to, say, a usability consultant or interaction designer? What title do you give yourself and why?</strong></p><p><strong>[Daniel Szuc]</strong>: I think we get carried away at times with our own buzzwords. We all want to differentiate what we do, but every new term brings with it the responsibility of educating the marketplace. This is not to devalue the direction they give us, but I prefer to use a term that the marketplace understands. At present, it seems to be UX. Every marketplace is a little different in terms of receptiveness to terms; for example, usability, UX, CX, design, XD, and so on.</p><p><img
class="alignright size-full wp-image-24376" title="logo" src="http://www.sitepoint.com/blogs/wp-content/uploads/2010/07/logo3.jpg" alt="" width="300" height="75" />Currently, I lead with &#8220;usability consultant&#8221; but often wear a number of hats including facilitator, designer, strategist—depending on the job. For me, the core of what we do is this: how can we take teams on a journey to help them make or create better stuff that has some positive impact?</p><blockquote><p>How can we take teams on a journey to help them make or create better stuff that has some positive impact?</p></blockquote><p><strong>[Iain Barker]:</strong> I&#8217;ve used all three terms at different stages. When I called myself a usability consultant I was in a highly specialized role conducting usability tests, and then lobbing my grenades of usability goodness at client teams. I&#8217;d identify usability issues and make design recommendations, but lacked the responsibility of making or implementing the decisions.</p><p>When I refer to myself as an interaction/UX designer, I have a broader responsibility for the research and design of an interactive product or service, and actually making design decisions. I agree with Daniel that for the majority of clients, UXD is better understood than interaction design. On my LinkedIn profile I describe myself as a “user-centered design specialist,” but that might not be helping matters!</p><p><strong>[Shane Morris]:</strong> I think the three terms reflect a maturing of the market, and what we as user-centered design specialists can offer our clients and employers.</p><p>Initially, we were all about <em>usability</em>; then it was about <em>interaction</em>. Nowadays we&#8217;re concerned with a broader relationship between a user or customer and the organizations they deal with, so we talk about <em>user</em> <em>experience</em>. So there&#8217;s a shift of emphasis.</p><p>I&#8217;ve always been wary of highfalutin titles, but I&#8217;m comfortable with calling myself a User Experience Architect because it best describes what I now do with my clients.</p><p><strong>Thanks guys, very interesting perspectives. What do you think it takes to be a good user experience designer?</strong></p><p><strong>[DS]</strong>: I think it requires a number of people skills, like the ability to listen to all perspectives, watch for elements than can improve the design, and keep on learning generally. Then there are the more professionally recognized skills like communicating clearly, showing leadership, and being able to sell and market yourself and your ideas. And I&#8217;d add storytelling—the talent to tell compelling stories across everything we do.</p><p><strong>[IB]</strong>: This is a big question. Some of the facets include having empathy for the end user, being able to collaborate and communicate with various stakeholders, and recognizing when to compromise on and when to fight for an idea. Importantly, you should see failure as part of the learning process that leads to a better solution; be prepared to share unfinished ideas or ask “stupid questions.”</p><p><strong>[SM]</strong>: I concur with Daniel and Iain, but what&#8217;s interesting is that none of us focused on &#8220;hard&#8221; skills: running a usability test, facilitating collaborative design, or building a prototype. The most important skills are &#8220;soft,&#8221; with empathy the most important; perhaps it&#8217;s because hard skills are usually learned on the job, which certainly was my experience.</p><blockquote><p>I conducted my first usability tests, and a lightbulb went on</p></blockquote><p></p><p><strong>It&#8217;s certainly interesting that you&#8217;ve all focused on what you&#8217;ve termed the softer skills. I imagine they&#8217;re the hardest to teach young students and, as Shane pointed out, are often learned on the job. So for aspiring UX designers out there, what advice do you have about entering the field?<br
/> </strong></p><p><strong>[IB]:</strong> My advice for anyone starting out as a user experience designer are:</p><ul><li>Choose an organization that actually involves users in their design process</li><li>Work in a nurturing environment that offers experience and mentoring</li><li>Don&#8217;t be hamstrung by the fear of failure</li><li>Read widely about the different perspectives on the UX process and techniques.</li></ul><p>I studied a vocational information design course at university, and from there I spent a few years working as a technical author before given the job of designing the interfaces. For the first few years I got by on opinion-based design, which I found frustrating at times. Then, when I conducted my first usability tests, a lightbulb went on.</p><p><strong>[SM]: </strong>Usability testing is a great way to start with user experience. It&#8217;s one of the more procedural techniques we use, and scales well from informal to formal; best of all, it&#8217;s a great environment to learn about human behavior.</p><p>For me, working in UX was a lucky accident. I&#8217;d studied computer science and cognitive science at university, but then discovered this area, and that I was qualified (by the standards of the time). I&#8217;m very lucky that the field has continued to evolve, and remain fresh and challenging to me.</p><blockquote><p>Usability testing is a great way for a person to get started with user experience</p></blockquote><p><strong>[DS]</strong>: I started in development, and then learned about &#8220;human factors&#8221; while working at a telecommunications company in the early 90&#8242;s, leading to my interest in usability. From there I moved onto customer support systems, where I received good grounding in developing UI standards and training projects on embedding usability in products.</p><p><strong>Thanks guys, that&#8217;s really interesting. You&#8217;ve been involved in the industry for quite some time, and seen it mature. Where do you see it going from here?</strong></p><p><strong>[DS]</strong>: Some advancements I&#8217;d like to see include a common language, standard and flexible tools, a better understanding of the leadership role UX plays in product strategy, and design being used to help business articulate strategy and plans. Basically, all the stuff we are good at, and more.</p><p><strong>[IB]</strong>: I see a broader understanding and acceptance of the value we offer, with greater and more diverse opportunities, more demand than supply, and the recognition that we should influence business strategy.</p><p><strong>[SM]</strong>: I think of it this way: once we were in the business of telling people their baby is ugly. Then we progressed to advising people how to make their babies more attractive. Nowadays I help companies work out what sort of baby they want, or whether they&#8217;d actually prefer an Xbox.</p><p><strong>[DS]</strong>: The good news, as at 2010, is that there&#8217;s healthy interest from business about UX; now it&#8217;s our time to determine what role we want to play in the UX business discussion.</p><p><strong>[IB]</strong>: It&#8217;s good to see organizations building strong internal UX competencies, and those teams given increased profile and recognition. Long may it continue.</p><p><em>By day James Mansfield designs the user experience for <a
href="http://99designs.com/">99designs</a>, and by night he plays dad and <a
href="http://www.jamesmansfield.id.au/">rants on about UX design at his blog</a>. He loves cycling, food, beer, AFL and his eggs poached.</em></p><div
style="text-align:center;padding-bottom:50px;"><div
style="float:left;padding-left:30px;"> <script>GA_googleFillSlot("Edit_300x100_C");</script> </div><div
style="float:right;padding-right:30px;"> <script>GA_googleFillSlot("Edit_300x100_D");</script> </div></div><div
style="clear:both"></div>]]></content:encoded> <wfw:commentRss>http://www.sitepoint.com/ux-design-what-it-is-what-it-takes-and-where-it%e2%80%99s-going/feed/</wfw:commentRss> <slash:comments>1</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 41/107 queries in 0.123 seconds using memcached
Object Caching 2673/2814 objects using memcached
Content Delivery Network via cdn.sitepoint.com

Served from: www.sitepoint.com @ 2012-02-09 21:01:12 -->
