<?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>Design vs Art Blog &#187; Login</title>
	<atom:link href="http://www.designvsart.com/blog/category/login/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.designvsart.com/blog</link>
	<description>Interaction Design and User Experience</description>
	<lastBuildDate>Tue, 08 Nov 2011 08:24:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
<cloud domain='www.designvsart.com' port='80' path='/blog/?rsscloud=notify' registerProcedure='' protocol='http-post' />
		<item>
		<title>The Benefits of Mixing Branding and Usability in a Design</title>
		<link>http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/</link>
		<comments>http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/#comments</comments>
		<pubDate>Wed, 16 Apr 2008 05:47:29 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Email Writing]]></category>
		<category><![CDATA[Good Design]]></category>
		<category><![CDATA[Interfaces]]></category>
		<category><![CDATA[Login]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/' addthis:title='The Benefits of Mixing Branding and Usability in a Design ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>Making a website memorable is not an easy task, competitors are everywhere and everybody wants users to remember their brand. That&#8217;s the most logical reason why every website would need a brand with its proper logo. But that&#8217;s not the &#8230; <a href="http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/' addthis:title='The Benefits of Mixing Branding and Usability in a Design '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/' addthis:title='The Benefits of Mixing Branding and Usability in a Design ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p><span style="font-size: x-large;"><b>M</b></span>aking a website memorable is not an easy task, competitors are everywhere and everybody wants users to remember their brand. That&#8217;s the most logical reason why every website would need a brand with its proper logo. But that&#8217;s not the only reason.</p>
<p>Including branding in the whole website design could also improve usability, making a particular website a more comfortable place to surf through. Many companies are taking advantage of this, Apple, for example, is not only successful because of a beautiful design but they also <b id="sgs5">combine easiness and first class interaction design</b> to the whole branding and marketing strategy on the web.</p>
<p>In this bread crumbs example the Apple logo shows the user the safe way back home:</p>
<div id="gkc-" style="padding: 1em 0pt; text-align: center;"><img width="380" height="28" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Apple Bread Crumbs.png" alt="Apple Bread Crumbs Design" /></div>
<p>&nbsp;</p>
<p><span style="font-size: large;"><b id="t0u1">Tag Line</b></span></p>
<p>Adding a tag line to the logo is another way to <b id="f40c">improve the overall website usability</b> and could also have a direct impact on visits. The message to deliver here is called the <b id="z21b">&ldquo;value proposition&rdquo;</b> and the aim is to tell users what the goal of your site is (e.g. what you are selling!). If the user is not able to figure out fast what the site is about, he or she might leave to never come back.</p>
<p>The tag line is usually placed <b id="pv-p">below the logo or very close to it</b>. It should be a short phrase explaining in a very easy language what the website has to offer. It also has to be precise and should not use estrange words, like site-related ones.</p>
<p>Wikipedia makes very clear what the website is about. The free encyclopedia.</p>
<p style="text-align: center;"><img width="300" height="367" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Wikipedia Logo.png" alt="Wikipedia Logo With Tag Line" /></p>
<p>&nbsp;</p>
<p>Is Safari a website about trips in Africa or is it one dedicated to a web browser? This tag line does not confuse users, it tells them straight away that this site has online books.&nbsp;</p>
<p style="text-align: center;"><img width="186" height="71" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Safari Logo.gif" alt="Safari Logo With Tag Line" />&nbsp;</p>
<p>&nbsp;</p>
<p>Sometimes the tag line is integrated into the website functionality. For example, del.icio.us places the logo, the company name and the most meaningful link of the website together. &quot;Your bookmarks&quot; gives a strong message.</p>
<p style="text-align: center;">&nbsp;<img width="249" height="57" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Delicious Logo.jpg" alt="Del.icio.us Logo With Tag Line" /></p>
<p>&nbsp;</p>
<p id="uxut"><span style="font-size: large;"><b id="om5w">Logo position</b>&nbsp;</span></p>
<p style="margin: 0px; font-variant: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" id="b9b2">Logo position is another example of how <b id="d9vh">branding could improve usability</b>. There is a tendency to place the logo on the upper left corner, but that&#8217;s not the most important issue regarding the logo position. The key is to place the logo in the same place website-wide. That will orientate users and remind them that they are still in the same website.</p>
<p style="margin: 0px; font-variant: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" id="c4zd">&nbsp;</p>
<p style="margin: 0px; font-variant: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" id="yicf">At Amazon, the logo stays in the very same place through the entire website.</p>
<p style="margin: 0px; font-variant: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" id="afnn">&nbsp;</p>
<div id="osok" style="padding: 1em 0pt; text-align: center;"><img width="480" height="104" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Amazon 01.png" alt="Amazon Logo Position 01" /></div>
<div style="padding: 1em 0pt; text-align: center;"><img width="480" height="105" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Amazon 02.png" alt="Amazon Logo Position 2" /></div>
<div style="padding: 1em 0pt; text-align: center;"><img width="480" height="105" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Amazon 03.png" alt="Amazon Logo Position 3" />&nbsp;</div>
<p>&nbsp;</p>
<p id="pmh5"><span style="font-size: large;"><b id="mt6k">The user experience as brand</b></span></p>
<p>More is less, right? This is true for many fields but specially for web design as <b>adding links, buttons, features, information and pictures</b> is always tempting. More than designers, [many] programmers have the opinion that if a feature is available it should be presented to the user. User tests prove that that could be dangerous.</p>
<p>The aim of any product should be <b>to create a positive user experience</b>, something that users will consciously or unconsciously notice and appreciate. Usability has a strong impact on the user and that&#8217;s why it could be used as a branding approach. Branding is the packaging for a particular idea, like an easy to use and effective search engine could be. The following pictures show two websites offering basically the same service. But which brand has more value for the user? the one filling the page with features?</p>
<p style="text-align: center;"><img width="500" height="349" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Excite Screen Shot.png" alt="Excite Brand" /></p>
<p style="text-align: center;"><img width="500" height="212" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Google Screen Shot.png" alt="Google Brand" /></p>
<p><br id="pehg" /><br />
<span style="font-size: large;"> <b id="kij1">Emails, usability and branding</b></span></p>
<p>Emails are part of the website design and they <b>could improve the overall user experience</b>, here the brand could also be an important tool to help users. A key issue is the brand (the company name) included in the sender field of every email sent by a website. It seems to be obvious but many websites send notifications with the sender field &quot;mail robot&quot; (notice that many users would label that as spam.)</p>
<p>In this email client screen shot it is possible to see the sender field in the first column and the subject in the second column.</p>
<p style="text-align: center;"><img width="550" height="129" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/germanwings.jpg" alt="Germanwings Usability on Email Example" /></p>
<p>&nbsp;</p>
<p><b>Germanwings, an airline, places the company name in the sender field of each email. But they have variations:</b></p>
<p><span style="color: rgb(51, 153, 102);"><i><b>Germanwings</b></i> &gt;</span> This means &quot;advertisement&quot;, it could be deleted,</p>
<p><span style="color: rgb(51, 153, 102);"><b><i>Germanwings Schedule Cha.</i> </b>&gt;</span> This means that the email contains very important information,</p>
<p><span style="color: rgb(51, 153, 102);"><i><b>Germanwings Booking</b></i> &gt;</span> Meaning that this email could be saved (and retrieved) for later reference.</p>
<p>The impact of using these techniques could be huge as they could prevent user from deleting important information and save a big amount of money in live customer service.</p>
<p><br id="b9:2" /><br />
<span style="font-size: large;"> <span id="ng2o"><b id="naxj">Trust</b></span></span></p>
<p>Giving users a feel of trust is something that could be done through a good design and <b>attaching the idea of trust to a brand</b> something usually desirable. One approach is to encourage trust through security features shown on a website.</p>
<p>A good label for the login button could improve a website and brand trust. Like at Amazon.com:</p>
<p style="text-align: center;"><img width="223" height="54" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Amazon Login.png" alt="Amazon Login Button Label" /></p>
<p style="text-align: center;"><br id="sgze" /><br />
If a person knows that undoing a buy is easy (and possible) the trust a customer has for a service will be increased. For example at Wal-Mart deleting products from the shopping cart is easy:</p>
<p style="text-align: center;"><img width="351" height="159" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/Wal-Mart.png" alt="Wal-Mart Shopping Cart Design" /></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: left;"><span style="font-size: large;"><b id="mklf">Conclusion</b></span></p>
<div style="padding: 1em 0pt; text-align: left;">Mixing branding, usability and good design could be a winning combination that could help users understand a website and <b>make a brand memorable</b>. Assisting customers with a simple design makes their life easier, if that is done embedding the company branding strategy, it could give a strong message of trust that will bring more visits and sales.&nbsp;</div>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=365&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/' addthis:title='The Benefits of Mixing Branding and Usability in a Design '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/04/16/the-benefits-of-mixing-branding-and-usability-in-a-design/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Designing Login Boxes: 6 Examples Of Good And Bad Design</title>
		<link>http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/</link>
		<comments>http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/#comments</comments>
		<pubDate>Thu, 27 Mar 2008 05:18:21 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Good Design]]></category>
		<category><![CDATA[Login]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/' addthis:title='Designing Login Boxes: 6 Examples Of Good And Bad Design ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>A login box should be simple, easy to use and should make users&#8217; life easier.&#160; It&#8217;s not that simple to achieve that, believe me. Not only the login box functionality and design are important but also the environment: avoid distractions &#8230; <a href="http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/' addthis:title='Designing Login Boxes: 6 Examples Of Good And Bad Design '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/' addthis:title='Designing Login Boxes: 6 Examples Of Good And Bad Design ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p>A login box should be simple, easy to use and should make users&#8217; life easier.&nbsp; It&#8217;s not that simple to achieve that, believe me. Not only the login box functionality and design are important but also the environment: <b>avoid distractions and those users will log in.</b></p>
<p><b>Here I collected a few examples of design and behavior.&nbsp;&nbsp;</b></p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td>
<p style="text-align: center;">&nbsp;The login design to the WordPress blog administration (not the WordPress.com website) is just perfect. The page is in white and <b>only what the user needs at that moment is displayed</b>: the login box. There is no way to confuse users. An expression of simplicity.</p>
<p style="text-align: center;"><img width="530" height="425" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/worpress window(1).png" alt="Wordpress Login Box Design Example" />&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">The WordPress login in detail:</p>
<p style="text-align: center;"><img width="497" height="529" border="1" alt="Wordpress Login Design" src="http://www.designvsart.com/blog/wp-content/uploads/worpress.png" /></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><b>Lets see what happens with some of the Google services. </b></p>
<p style="text-align: center;">If a user has a Google Mail account is going to be very probable that she is going to be logged in most of the time. If she wants to login into Google Analytics <b>she will be required the password anyways</b>. This is done, probably, because many users have an account for Google Mail and another one for Google Analytics. This works fine here, although I would add a &quot;keep me logged in&quot; for those users using the same account for both services.</p>
<p style="text-align: center;"><img width="252" height="272" border="1" alt="Google Analytics Login Design" src="http://www.designvsart.com/blog/wp-content/uploads/Analytics.png" /></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">Google AdWords login works in a different way. When a user is already logged in at Google Mail and he goes to adwords.google.com, he will be automatically logged in with that account<b> (if he is also registered at AdWords with it.)</b> This is just great except for the fact that many users would not use the same account for those services.</p>
<p style="text-align: center;">The problem is even bigger <b>if the user is not register at Adwords at all with the Google Mail account.</b> In this case he is redirected to a page to create a new account but <b>no login box is displayed.</b></p>
<p style="text-align: center;"><img width="530" height="440" border="1" alt="Google AdWords Login Page Design" src="http://www.designvsart.com/blog/wp-content/uploads/AdWords Redirect Page.png" /></p>
<p style="text-align: center;">The user is somehow trapped, he is redirected to <b>a page without login box</b> and going back to the previous page is not possible. The only solution is to go to Google Mail, logout and try again at AdWords. This kind of behavior is well intended but if it is not design properly it could confuse users.</p>
<p style="text-align: center;"><img width="361" height="65" border="1" alt="Google AdWords Login Design" src="http://www.designvsart.com/blog/wp-content/uploads/AdWords.png" />&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><b>Why do I like the FotoFlexer login?<br />
            </b></p>
<p style="text-align: center;"><b>Well, it has some nice details to improve usability:</b></p>
<p style="text-align: center;"><b>1.</b> Login happens through the user&#8217;s email address. Many users might set the account at FotoFlex with the same password they use for the email account. But many would not do that, to make clear that they are not requiring the email account password they ask for the <b>&quot;FotoFlex Password&quot;.</b> I&#8217;m sure this avoids a lot of confusion.</p>
<p style="text-align: center;"><b>2. </b>Huge login button.</p>
<p style="text-align: center;"><b>3. </b>Huge &quot;Register Here&quot; button.</p>
<p style="text-align: center;"><b>Problem:</b></p>
<p style="text-align: center;">&quot;Forgot Password&quot; and &quot;Change Password&quot; should look like links (underlined and blue).</p>
<p style="text-align: center;"><img width="456" height="286" src="http://www.designvsart.com/blog/wp-content/uploads/fotoflexer.png" alt="FotoFlexer Login Design" />&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">Auctomatic.com developed a minimalistic login box. As the user clicks on &quot;Login&quot; the login box appears above the menu. In my opinion this does not look very good but that&#8217;s only personal taste. The problem it might appear is the <b>&quot;Forgot?&quot;</b> link. This website could be used by a lot of secretaries with only a little experience using the web. <b>Using just &quot;Forgot?&quot; could confuse users&#8230;</b></p>
<p style="text-align: center;"><img width="442" height="76" border="1" alt="Auctomatic" src="http://www.designvsart.com/blog/wp-content/uploads/auctomatic_a.png" /></p>
<p style="text-align: center;">&nbsp;Maybe using a less minimalistic <b>&quot;Forgot Password?&quot;</b> could be a less confusing option.</p>
<p style="text-align: center;"><img width="534" height="88" border="1" alt="Auctomatic Login Design" src="http://www.designvsart.com/blog/wp-content/uploads/auctomatic_b.png" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="text-align: center;">The Dash.net login box looks nice but it could have a problem. When the user clicks on the input box to write in the username or password <b>the title of the input box disappears</b>. This could be trouble for some users, of course they will find the way to login but it is nicer when a user-friendly design avoids mistakes and saves users&#8217; time.&nbsp;&nbsp;</p>
<p style="text-align: center;"><img width="290" height="190" border="1" alt="Dash.net login box example" src="http://www.designvsart.com/blog/wp-content/uploads/dash a.png" /></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><img width="292" height="194" border="1" alt="Dash.net Login Box Exmaple 2" src="http://www.designvsart.com/blog/wp-content/uploads/dash b.png" /></p>
<p style="text-align: center;">&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<p>I don&#8217;t want to criticize this websites, they are mostly nice ones. I&#8217;ve just used them as examples (of good and bad design). Please keep in mind that design mistakes could be the result of the lack of time and money.</p>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=360&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/' addthis:title='Designing Login Boxes: 6 Examples Of Good And Bad Design '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/03/27/designing-login-boxes-6-examples-of-good-and-bad-design/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Movable Type Bad Login Design, YouTube Better</title>
		<link>http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/</link>
		<comments>http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/#comments</comments>
		<pubDate>Fri, 08 Feb 2008 05:28:49 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Login]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/' addthis:title='Movable Type Bad Login Design, YouTube Better ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>Making the login easy seems to be an obvious task. Apparently simple login processes are not always easy to find. I have written several articles about this topic because there are so many bad examples, I have to insists. Why &#8230; <a href="http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/' addthis:title='Movable Type Bad Login Design, YouTube Better '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/' addthis:title='Movable Type Bad Login Design, YouTube Better ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p>Making the login easy seems to be an obvious task. Apparently simple <b>login processes</b> are not always easy to find. I have written several articles about this topic because there are so many bad examples, I have to insists. Why login processes should be simple?</p>
<p>Users will be entering into your website services through the login process, this is a tedious task that nobody likes. But this could be worsen if you make the login process n<b>ot easy to understand</b>. Most of the cases it is enough if you ask for a <b>login name and password</b>, making the process as short as possible. </p>
<p><a href="http://www.movabletype.org/" target="_blank"> Movable Type</a> makes users to waste their time, this is not the right <b>usability</b> approach. First, users have to click on &quot;Customer Sign In&quot;. Then a totally unnecessary page is displayed, making users read some instructions. Another click and you get to the login page.</p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center;">
<p><img width="416" height="137" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/movabletype 01 20080208.png" alt="Movable Type Login Process Step 1" /></p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<p><img width="452" height="163" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/movabletype 02 20080208.png" alt="Movable Type Login Process Step 2" /></p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<p><img width="500" height="181" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/movabletype 03 20080208.png" alt="Movable Type Login Process Step 3" /></p>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<p>Now an example from a company that <b>cares about usability</b>, <a href="http://www.youtube.com" target="_blank">YouTube</a>. They place the login in the homepage. What Movable Type does in 3/4 steps, YouTube does it in 1. </p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center;"><img width="500" height="360" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/youtube 20080208.png" alt="YouTube Login Process" /></td>
</tr>
</tbody>
</table>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=337&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/' addthis:title='Movable Type Bad Login Design, YouTube Better '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/02/08/movable-type-bad-login-design-youtube-better/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Sign Up Process Designs Review</title>
		<link>http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/</link>
		<comments>http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/#comments</comments>
		<pubDate>Tue, 08 Jan 2008 06:38:17 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Bad Design]]></category>
		<category><![CDATA[Interfaces]]></category>
		<category><![CDATA[Login]]></category>
		<category><![CDATA[Sign Up]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/' addthis:title='Sign Up Process Designs Review ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>The importance of a well designed sign up process is huge, if your website does not make it easy visitors will not register. Don&#8217;t ask for unnecessary information, make the from short, you can always encourage users to give you &#8230; <a href="http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/' addthis:title='Sign Up Process Designs Review '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/' addthis:title='Sign Up Process Designs Review ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p>The importance of a <b>well designed sign up process</b> is huge, if your website does not make it easy visitors will not register. Don&#8217;t ask for unnecessary information, make the from short, you can always encourage users to give you more details once they are already <b>using your website</b>.</p>
<p>&nbsp;&nbsp;</p>
<h3 style="text-align: center;"><i>&quot;Your website should also avoid long instructions</i>&#8230;&quot;</h3>
<p style="text-align: left;">
Placing <b>a link to your privacy policy</b> makes people feel safer, make it visible during the whole process. Your website should also avoid long instructions, users will never read them and if you need them anyways that means that your sign up process is too complicated.</p>
<p style="text-align: center;">&nbsp;</p>
<table width="550" height="303" cellspacing="0" cellpadding="0" border="0" align="center" style="">
<tbody>
<tr>
<td style="text-align: center;"><img width="500" hspace="50" height="293" border="1" src="http://www.designvsart.com/blog/wp-content/uploads/shutterstock 20080103.jpg" alt="Shutterstock Sign Up" /></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: left;"><a href="http://submit.shutterstock.com/signup.mhtml" target="_blank"> Shutterstock</a>, an online image bank, got a <b>not so user-friendly sign up process design</b> for photographers (is not the same as the one for buying pictures). They require to fill a long form, but the worst thing is that they require to scan and upload a passport. </p>
<p>From the <b>usability point of view</b> this could not be worst. They required the scan after you fill the first long form. What happens if you don&#8217;t have a scanner close to you? I can imagine a lot of angry users. Plus, this is a very old fashioned way of <b>identity validation</b>, many users would be concern about their privacy. Even worse (if possible) they ask for a passport that matches your name and address, so I could never sign up to this service because I live in Germany but I am not German and I don&#8217;t have a German passport (and the address is not on my passport anyways). </p>
<p>Once again, <b>usability has a direct economical impact</b>. I wonder if this bad design is the reason Shutterstock has been loosing traffic in the last months (<a href="http://www.alexa.com/data/details/traffic_details/shutterstock.com?site0=shutterstock.com&amp;y=r&amp;z=3&amp;h=400&amp;w=700&amp;range=3m&amp;size=Large" target="_blank">according to Alexa.com</a>).</p>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=308&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/' addthis:title='Sign Up Process Designs Review '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/01/08/sign-up-process-designs-review/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Horrible Login Process at 9rules</title>
		<link>http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/</link>
		<comments>http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/#comments</comments>
		<pubDate>Fri, 04 Jan 2008 06:27:58 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Bad Design]]></category>
		<category><![CDATA[Interfaces]]></category>
		<category><![CDATA[Login]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/' addthis:title='Horrible Login Process at 9rules ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>Login process should be extremely easy as this is they way users will get into the personalized content of your website. Many users get tired and leave if they try to login a few times and they can not get &#8230; <a href="http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/' addthis:title='Horrible Login Process at 9rules '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/' addthis:title='Horrible Login Process at 9rules ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p><strong>Login process</strong> should be extremely easy as this is they way users will get into the personalized content of your <strong>website</strong>. Many users get tired and leave if they try to <strong>login</strong> a few times and they can not get into the website. Specially new users leave and don&#8217;t come back.</p>
<p><strong> Avoid unnecessary information</strong> or distractions. <a href="http://9rules.com" target="_blank">9rules</a>, the social content network, tells users that the password will be emailed when the are at the <strong>login page</strong>. This is confusing as usually sites don&#8217;t send emails during the login process.</p>
<p align="center"><img src="http://www.designvsart.com/blog/wp-content/uploads/2008/01/login-20080104.jpg" alt="9rules Login 20080104" /></p>
<p>Making a mistake introducing the username or password takes users to the <strong>signup page</strong>. In this particular case, this is really bad as no error message or password recovery link are displayed. If you want to improve <strong>usability</strong> and your general <strong>web design</strong>, I would recommend, first to nicely tell the user that there was a mistake, and after that give an easy way to solve the problem (in this example would be a &#8220;try again&#8221; or &#8220;recover login info&#8221;)</p>
<p align="center"><img src="http://www.designvsart.com/blog/wp-content/uploads/2008/01/signup-20080104.jpg" alt="9rules Signup 20080104" /></p>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=303&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/' addthis:title='Horrible Login Process at 9rules '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/01/04/horrible-login-process-at-9rules/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Login Input Box Into the Homepage</title>
		<link>http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/</link>
		<comments>http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/#comments</comments>
		<pubDate>Fri, 21 Dec 2007 05:55:13 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Bad Design]]></category>
		<category><![CDATA[Login]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/' addthis:title='Login Input Box Into the Homepage ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>It&#8217;s good to give users a kick way of login into your website. Make your login input box or link visible, usually users look for it on the top right corner of the website. Like, for example, Photobucket. On the &#8230; <a href="http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/' addthis:title='Login Input Box Into the Homepage '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/' addthis:title='Login Input Box Into the Homepage ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p>It&#8217;s good to give users a kick way of login into your website. Make your <strong>login input box</strong> or link visible, usually users look for it on the top right corner of the website. Like, for example, <a href="http://photobucket.com/" target="_blank">Photobucket</a>.</p>
<p><img src="http://www.designvsart.com/blog/wp-content/uploads/2007/12/photo-bucket-20071221.jpg" alt="Photobucket 20071221" /></p>
<p>On the other side, a bad design example could be <a href="http://safaribooksonline.com/" target="_blank">Safari Books Online</a>, an online book database. It&#8217;s so annoying to me that they don&#8217;t have a login box in the homepage! Instead they have a &#8220;Subscribe&#8221; link. Tricky, eh?</p>
<p><img src="http://www.designvsart.com/blog/wp-content/uploads/2007/12/safari-20071221.jpg" alt="Safari Books Online 20071221" /></p>
<p>Today I had to look for the registration email to get the link they sent me to search books. Safari was obviously not thinking in the <strong>user</strong> but in the potential customer when they designed their homepage. Already registered users have to remember to go to the subdomain search.safaribooksonline.com in order to actually use the service they are paying for.</p>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=262&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/' addthis:title='Login Input Box Into the Homepage '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2007/12/21/login-input-box-into-the-homepage/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

