<?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>Susana Vilaça &#187; Usability</title>
	<atom:link href="http://susanavilaca.livethoughts.net/tag/usability/feed/" rel="self" type="application/rss+xml" />
	<link>http://susanavilaca.livethoughts.net</link>
	<description>Live Thoughts on the Web, UX, Technology and stuff</description>
	<lastBuildDate>Thu, 12 Jan 2012 14:06:27 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Office 2011 for Mac &#8211; Why I love the Ribbon</title>
		<link>http://susanavilaca.livethoughts.net/2011/user-experience/office-2011-for-mac-why-i-love-the-ribbon/</link>
		<comments>http://susanavilaca.livethoughts.net/2011/user-experience/office-2011-for-mac-why-i-love-the-ribbon/#comments</comments>
		<pubDate>Thu, 17 Mar 2011 09:15:06 +0000</pubDate>
		<dc:creator>Susana Vilaça</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[office 2011]]></category>
		<category><![CDATA[ribbon]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://susanavilaca.livethoughts.net/?p=161</guid>
		<description><![CDATA[It&#8217;s been 3 weeks since I started using Office 2011 for Mac and I&#8217;m already wishing all apps for Mac had a ribbon. Let me explain a bit my experience: Until 2 years ago I was exclusively a Windows user. Sure I had already had some experiences with other Operating Systems, but not on everyday [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s been 3 weeks since I started using Office 2011 for Mac and I&#8217;m already wishing all apps for Mac had a ribbon.</p>
<p><a href="http://susanavilaca.livethoughts.net/wp-content/uploads/2011/03/146295-office-2001-ribbon_original.jpg"><img title="146295-office-2001-ribbon_original" src="http://susanavilaca.livethoughts.net/wp-content/uploads/2011/03/146295-office-2001-ribbon_original.jpg" alt="" width="410" height="53" /></a></p>
<p>Let me explain a bit my experience:</p>
<p>Until 2 years ago I was exclusively a Windows user. Sure I had already had some experiences with other Operating Systems, but not on everyday basis.</p>
<p>When I started using a Mac regularly I had to struggle against some habits, however there is one thing I never got used to &#8211; the damned inspectors (floating tool windows), that various applications for Mac have adopted and are always getting in your way!</p>
<p><a href="http://susanavilaca.livethoughts.net/wp-content/uploads/2011/03/corys_screen_shot_of_many_inspector_windows_127391723.png"><img class="alignnone size-full wp-image-195" title="corys_screen_shot_of_many_inspector_windows_127391723" src="http://susanavilaca.livethoughts.net/wp-content/uploads/2011/03/corys_screen_shot_of_many_inspector_windows_127391723.png" alt="" width="450" height="205" /></a></p>
<p>These damned windows have so many things that negatively affect my experience, like:</p>
<ul>
<li>they are always in front of your working area, you never seem to know where to put them</li>
<li>they open the last place you put them, which it isn&#8217;t necessarily where you need them to be</li>
<li>they are not responsive and contextual, meaning that they do not adapt to your selection. For example, if you select an image it doesn&#8217;t show the image tools.</li>
</ul>
<p>In Office 2007 I was used to having a ribbon where my tools were organized in a effective and neat way, that adapted itself to my selections, basically I didn&#8217;t had to worry about it! When I started used Office 2008 (and other Mac software) and had to work with those inspectors I really felt frustrated with the amount of time I lost just taking that window out of my way!</p>
<p>So when I saw the ribbon in Office 2011 I was really satisfied. My experience with Office has greatly improved and I just wish that other tools, like Omnigraffle for example, adopt a similar solution instead of those lame tool windows&#8230;</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://susanavilaca.livethoughts.net/2011/user-experience/office-2011-for-mac-why-i-love-the-ribbon/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google Language Tools &#8211; User Experience problems</title>
		<link>http://susanavilaca.livethoughts.net/2011/user-experience/google-language-tools-user-experience-problems/</link>
		<comments>http://susanavilaca.livethoughts.net/2011/user-experience/google-language-tools-user-experience-problems/#comments</comments>
		<pubDate>Mon, 28 Feb 2011 20:35:51 +0000</pubDate>
		<dc:creator>Susana Vilaça</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://susanavilaca.livethoughts.net/?p=145</guid>
		<description><![CDATA[So Google knows my country (Portugal), he knows my search habits, my translation habits, and much more. So why the hell the default Google Translate languages are Spanish to English?? Lately I&#8217;ve been using Google Translate more often because I was assigned a project which requires some technical knowledge. Every technical term either I want [...]]]></description>
			<content:encoded><![CDATA[<p>So Google knows my country (Portugal), he knows my search habits, my translation habits, and much more. So why the hell the default Google Translate languages are Spanish to English??</p>
<p>Lately I&#8217;ve been using Google Translate more often because I was assigned a project which requires some technical knowledge. Every technical term either I want to translate it to Portuguese, to better understand its meaning, or translate it to English to know what is the English word/expression. I&#8217;ve been doing this for some weeks know and the suggested languages were Afrikaans to English. Every time I used Google Translate I had to, at least, change Afrikaans to Portuguese.</p>
<p>To my astonishment, today I noticed it was no longer Afrikaans to English but Spanish to English! What a hell?? Spanish?? Why?? Google why did you put Spanish to English and not Portuguese to English?</p>
<p>Initially I gave Google some benefit of doubt and checked my Google Account settings to see if Spain or Spanish was anywhere defined, but no. I have as my country Portugal and as my default language English.</p>
<p>By simply fixing this to my home country language, Google would give me a better user experience and I wouldn&#8217;t certainly be frustrated by wasting tine setting up my translation options every time I use Google Translate. It&#8217;s simply a crappy experience!</p>
<p>&nbsp;</p>
<address>Note: I don&#8217;t have anything against Spain or Spanish language I just would like to have my preferred settings rightly automatized.</address>
]]></content:encoded>
			<wfw:commentRss>http://susanavilaca.livethoughts.net/2011/user-experience/google-language-tools-user-experience-problems/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Designing web forms</title>
		<link>http://susanavilaca.livethoughts.net/2009/usability/designing-web-forms/</link>
		<comments>http://susanavilaca.livethoughts.net/2009/usability/designing-web-forms/#comments</comments>
		<pubDate>Wed, 25 Nov 2009 09:30:54 +0000</pubDate>
		<dc:creator>Susana Vilaça</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[forms]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://susanavilaca.livethoughts.net/?p=55</guid>
		<description><![CDATA[Here’s a little secret that I’d like to share with you:  Most people just aren’t all that thrilled by forms. They  don’t like filling them in, they don’t like thinking about them, and they certainly don’t like the idea of having to design them. by Caroline Jarret If you already had to make some kind [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>Here’s a little secret that I’d like to share with you:  Most people just aren’t all that thrilled by forms. They  don’t like filling them in, they don’t like thinking about them, and they certainly don’t like the idea of having to design them.</p>
<p style="text-align: right;">by <a title="Caroline Jarret" href="http://www.formsthatwork.com/Contactus" target="_self">Caroline Jarret</a></p>
</blockquote>
<p>If you already had to make some kind of form for a site or application you know that designing the right form it&#8217;s not that straightforward. If you ask to much information &#8211; users don&#8217;t like, if you don&#8217;t make them pretty -  users don&#8217;t like, if you don&#8217;t choose the right layout -  users get confused, and so on.</p>
<p>So why it&#8217;s so important to invest in forms? Usually forms are a way users register on your website, buy something, etc. All core tasks of a website. If forms are difficult to use, ugly or ask too much information, users won&#8217;t make the step of filling them. Users will just quit the task, get out of your site and move to a nice and friendlier one.</p>
<p>So I leave you here some guidelines to consider when designing forms.</p>
<h3><strong>1. Choosing the layout</strong></h3>
<p>Choosing the right layout may vary depending on the length of your form and the space available on the page. The type of layouts generally used are:</p>
<ul>
<li><strong>Top aligned labels</strong>: this type of layout increases readability but requires more vertical space. If your form is long, choosing this type of layout may not be a good idea.</li>
</ul>
<p><img class="size-full wp-image-67 alignnone" style="align:center;" title="top_aligned" src="http://susanavilaca.livethoughts.net/wp-content/uploads/2009/11/top_aligned1.png" alt="top_aligned" width="500" height="335" /></p>
<p><em>source: </em><a href="https://secure.wufoo.com/signup/1/"><em>https://secure.wufoo.com/signup/1/</em></a></p>
<ul>
<li><strong>Right aligned labels</strong>: this is one of the most used layouts nowadays. It allows an easy association between label and input field, however the labels&#8217; readability is reduced.</li>
</ul>
<p><img class="aligncenter size-full wp-image-69" title="right_aligned" src="http://susanavilaca.livethoughts.net/wp-content/uploads/2009/11/right_aligned.jpg" alt="right_aligned" width="314" height="282" /></p>
<p><em>source: </em><a href="http://www.linkedin.com/"><em>http://www.linkedin.com/</em></a></p>
<ul>
<li><strong>Left aligned labels</strong>: because labels are left aligned, their readability increases. That&#8217;s why this type of layout is used on forms that require users to pay extra attention on what is being asked. This layout has the disadvantage of being difficult to associate label and input field.</li>
</ul>
<p><img class="aligncenter size-full wp-image-70" title="left_aligned" src="http://susanavilaca.livethoughts.net/wp-content/uploads/2009/11/left_aligned.jpg" alt="left_aligned" width="500" height="382" /></p>
<p><em>source: </em><a title="Gmail" href="https://www.google.com/accounts/NewAccount?service=mail&amp;continue=http%3A%2F%2Fmail.google.com%2Fmail%2Fe-11-11793bb8463c9cf8dbb1139c2d7ff7de-0e9d691c79dfd3400c55e0c028c131ee3742058a&amp;type=2" target="_self"><em>Gmail</em></a></p>
<h3>2. Validation and errors</h3>
<p>Validation and errors display is a must on every form, however you must be careful on how you present it. Regarding validation, presenting feedback as data is entered is usually the best approach. If it&#8217;s clear and concise, it provides a very good contextual feedback. But be careful to not overdo the validation. Use it only on fields with potentially high error rates.</p>
<p>Errors occur when the data entered is not all valid. Errors must be avoided by using inline validation and/or help tips. However they eventually occur, and when that happens users must clearly know where and what is the error and how to fix it. The best approach is to place a block on the top of the page with a list of the errors or/and, on the form, highlight the fields with errors (usually with a red contour).</p>
<p><a href="http://en.wordpress.com/signup/?blog=1"><img class="aligncenter size-full wp-image-73" title="erros1" src="http://susanavilaca.livethoughts.net/wp-content/uploads/2009/11/erros1.JPG" alt="erros1" width="474" height="345" /></a></p>
<p><em>source: </em><a href="http://en.wordpress.com/signup/?blog=1"><em>http://en.wordpress.com/signup/?blog=1</em></a></p>
<p><img class="aligncenter size-full wp-image-74" title="erros2" src="http://susanavilaca.livethoughts.net/wp-content/uploads/2009/11/erros2.JPG" alt="erros2" width="500" height="279" /></p>
<p><em>source: </em><a href="https://www.linkedin.com/secure/register"><em>https://www.linkedin.com/secure/register</em></a></p>
<h3>3. Success or Error messages</h3>
<p>One of <a href="http://www.useit.com/papers/heuristic/heuristic_list.html" target="_self">Nielsen&#8217;s 10 Usability Heuristics</a> is <strong>Visibility of system status</strong>. This heuristics says that <em>&#8220;The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.&#8221; </em>Success and error messages serve exactly the purpose of providing feedback to users about the form submission. For example, if you just bought something online you want to know whether your order was well submitted or not. That&#8217;s why that on the end of every form submission users must see some success or error message, usually accompanied by some illustration.</p>
<p>Besides the topics I cover on this post, there are other issues you must take into account, like, for example, form styling. In an era where design is so valued you mustn&#8217;t present forms like a set of text and boxes. You must beautify the form so the users feel the <a href="http://nui.joshland.org/2009/11/pleasing-brain-with-magical-interfaces.html" target="_self">magic</a>.</p>
<p><strong>Useful resources:</strong></p>
<ul>
<li><a href="http://www.viget.com/advance/password-fields-are-annoying/" target="_self">http://www.viget.com/advance/password-fields-are-annoying/</a></li>
<li><a href="http://dzineblog.com/2009/11/18-impressive-web-form-validation-scripts-to-enhance-user-experience.html" target="_self">http://dzineblog.com/2009/11/18-impressive-web-form-validation-scripts-to-enhance-user-experience.html</a></li>
<li><a href="http://www.lukew.com/resources/articles/web_forms.html">http://www.lukew.com/resources/articles/web_forms.html</a></li>
<li><a href="http://www.stcsig.org/usability/topics/forms.html" target="_self">http://www.stcsig.org/usability/topics/forms.html</a></li>
<li><a href="http://www.alistapart.com/articles/sensibleforms">http://www.alistapart.com/articles/sensibleforms</a></li>
<li><a href="http://www.formsthatwork.com/Home">http://www.formsthatwork.com/Home</a></li>
<li><a href="http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/">http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/</a></li>
<li><a href="http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/">http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://susanavilaca.livethoughts.net/2009/usability/designing-web-forms/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>World Usability Day 2009 &#8211; Designing for a Sustainable World</title>
		<link>http://susanavilaca.livethoughts.net/2009/usability/world-usability-day-2009-designing-for-a-sustainable-world/</link>
		<comments>http://susanavilaca.livethoughts.net/2009/usability/world-usability-day-2009-designing-for-a-sustainable-world/#comments</comments>
		<pubDate>Thu, 12 Nov 2009 18:48:46 +0000</pubDate>
		<dc:creator>Susana Vilaça</dc:creator>
				<category><![CDATA[Usability]]></category>
		<category><![CDATA[sustainability]]></category>
		<category><![CDATA[sustainable world]]></category>
		<category><![CDATA[world usability day]]></category>

		<guid isPermaLink="false">http://susanavilaca.livethoughts.net/?p=31</guid>
		<description><![CDATA[Today, 12th November, we celebrate the World Usability Day. This year theme is Designing for a Sustainable World which basically is about showing how usability can be applied to all we do and build: Designing for a Sustainable World focuses on how our products and services impact our world. We look at all products and [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-34" title="WUD" src="http://susanavilaca.livethoughts.net/wp-content/uploads/2009/11/WUD.gif" alt="WUD" width="395" height="89" /></p>
<p>Today, 12th November, we celebrate the <a title="World Usability Day" href="http://www.worldusabilityday.org/" target="_blank">World Usability Day</a>. This year theme is <strong>Designing for a Sustainable World</strong> which basically is about showing how usability can be applied to all we do and build:</p>
<blockquote><p>Designing for a Sustainable World focuses on how our products and services impact our world. We look at all products and services, whether they are buildings, roads, consumer products, business, services or healthcare systems; throughout their life cycle. The impact focuses on &#8211; our environment, energy, water, soil, and more. Have the materials and processes that have been used been recycled and are they re-usable? Are they user and environmentally friendly? These are questions we all must consider as we design, purchase, use and dispose of products each and every day.</p>
<p style="text-align: right;"><a title="World Usability Day" href="http://www.worldusabilityday.org/" target="_self">http://www.worldusabilityday.org/</a></p>
</blockquote>
<p style="text-align: left;">Around the world, a <a href="http://www.worldusabilityday.org/en/events/2009/map" target="_self">series of events</a> happened to celebrate this day. Unfortunately, here in Portugal we didn&#8217;t organize any event&#8230; However <a title="Associação Portuguesa de Profissionais de Usabilidade" href="http://usabilidade.org/" target="_self">APPU (Associação Portuguesa de Profissionais de Usabilidade)</a> built a website called “<a href="http://sustentabilidade.usabilidade.org/">Sustentabilidade e Usabilidade</a>” where people can send good and bad examples of products of our everyday life. It&#8217;s a great initiative and I hope we see more of this in Portugal in the future.</p>
<p style="text-align: left;">
]]></content:encoded>
			<wfw:commentRss>http://susanavilaca.livethoughts.net/2009/usability/world-usability-day-2009-designing-for-a-sustainable-world/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

