<?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>Josh Coe's user experience design portfolio &#187; Web</title>
	<atom:link href="http://joshcoe.com/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://joshcoe.com</link>
	<description>Design with the user in mind</description>
	<lastBuildDate>Sat, 30 Jan 2010 18:22:27 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Eliminating email confirmation</title>
		<link>http://joshcoe.com/blog/eliminating-email-confirmation/</link>
		<comments>http://joshcoe.com/blog/eliminating-email-confirmation/#comments</comments>
		<pubDate>Fri, 13 Nov 2009 07:54:28 +0000</pubDate>
		<dc:creator>Josh</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[First-time user]]></category>
		<category><![CDATA[Sign-up]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://joshcoe.com/?p=388</guid>
		<description><![CDATA[Make it as easy as possible for the first-time user to get to the system. One brilliant way to do this is to not require email confirmation after sign-up, but rather to let the user continue straight from the sign-up form to the system.
Eliminating the email confirmation step streamlines the process from sign-up to system [...]]]></description>
			<content:encoded><![CDATA[<p>Make it as easy as possible for the first-time user to get to the system. One brilliant way to do this is to not require email confirmation after sign-up, but rather to let the user continue straight from the sign-up form to the system.</p>
<p>Eliminating the email confirmation step streamlines the process from sign-up to system engagement. The user will not have to break from the flow of the site, and thus their attention will remain engaged with the system.</p>
<p>The tradeoff, of course, is that the email is not confirmed. But this could be done later, whenever the user naturally logs into their email account. Once the system has the user&#8217;s attention and is getting them to sign up, it&#8217;s critical to take steps that ensure that the system will retain their attention.</p>
<p>A solution to the tradeoff would be to display the user&#8217;s email address prominently on the screen after sign-up that precedes logging into the system, with a &#8220;<em>Hey, that&#8217;s not my email address!</em>&#8221; link so the user can still verify their email without having to log into their email account.</p>
<p>Anything that makes the sign-up process fun and easy should be considered, but the tradeoffs should always be considered as well.</p>
<div id="attachment_389" class="wp-caption alignnone" style="width: 630px"><a href="http://joshcoe.com/wp-content/uploads/2009/11/harvestapp-first-time-user.png"><img class="size-full wp-image-389" title="harvestapp-first-time-user" src="http://joshcoe.com/wp-content/uploads/2009/11/harvestapp-first-time-user.png" alt="harvestapp-first-time-user" width="620" height="363" /></a><p class="wp-caption-text">Harvest does not require first-time users to confirm their email address to start using their account, but rather logs them in as soon as they finish the sign-up form. This shortens the path to using the system, creates positive affect and begins the formation of mutual trust—all important elements for first-time users. This screen could include the user&#39;s email address so that they could verify the information before logging in.</p></div>
<div id="attachment_390" class="wp-caption alignnone" style="width: 630px"><a href="http://joshcoe.com/wp-content/uploads/2009/11/harvestapp-breakdown.png"><img class="size-full wp-image-390" title="harvestapp-breakdown" src="http://joshcoe.com/wp-content/uploads/2009/11/harvestapp-breakdown.png" alt="harvestapp-breakdown" width="620" height="426" /></a><p class="wp-caption-text">Unfortunately when I went to the same URL at a later time,  http://joshcoe.harvestapp.com/first_login redirected to http://joshcoe.harvestapp.com/home, a page where I could not log in. A link given to first-time users that could be clicked more than once should at least redirect to a page where existing users can log in.</p></div>
]]></content:encoded>
			<wfw:commentRss>http://joshcoe.com/blog/eliminating-email-confirmation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Signup forms: Don&#8217;t require too much</title>
		<link>http://joshcoe.com/blog/web-forms-dont-require-too-much/</link>
		<comments>http://joshcoe.com/blog/web-forms-dont-require-too-much/#comments</comments>
		<pubDate>Tue, 14 Jul 2009 16:16:34 +0000</pubDate>
		<dc:creator>Josh</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://joshcoe.com/?p=228</guid>
		<description><![CDATA[
This is a great example of a form requiring too much information. I filled out all of the fields and pressed continue, but nothing happened. I pressed continue again, and then a third time. Finally, I saw the tiny red Required text near the Title field.
 &#8220;Reduced object visibility may inversely impact usability unless care [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-229" title="formrequired" src="http://joshcoe.com/wp-content/uploads/2009/07/formrequired.png" alt="formrequired" width="270" height="481" /><br />
This is a great example of a form requiring too much information. I filled out all of the fields and pressed continue, but nothing happened. I pressed continue again, and then a third time. Finally, I saw the tiny red <em>Required</em> text near the <em>Title</em> field.</p>
<blockquote><p><a href="http://www.useit.com/papers/noncommand.html"> &#8220;Reduced object visibility may inversely impact usability unless care is taken to allow the users ways to find objects and inspect their state as needed.&#8221;<br />
</a></p>
<p style="text-align: right;"><strong><a href="http://www.useit.com/">Jakob Nielsen</a></strong></p>
</blockquote>
<p>Here are some guidelines to consider when creating a web form:</p>
<p><strong>1. Don&#8217;t require too much. </strong>The designer should consider what information is absolutely necessary, and only require that information. It is hard to believe that the system in the example—a site to get a free t-shirt—has any reason to require a <em>Title</em> field. The main goal is to get the user to sign up for an account. So, as many fields as possible should be removed or made optional.</p>
<p>Any additional information, such as gender or t-shirt size, could be gathered after the user has signed up.</p>
<p>Also consider alternatives to forms. Allowing users to <a href="http://www.ixda.org/discuss.php?post=5346">upload a vCard</a> instead of filling in a form could streamline the process.</p>
<p><strong>2. Make requirements visible.</strong> If a field is required, call it out with a red asterisk or other identifier when the user lands on the page, not after they have filled out the form and tried to submit it.</p>
<div id="attachment_250" class="wp-caption alignnone" style="width: 374px"><img class="size-full wp-image-250" title="Gender required?" src="http://joshcoe.com/wp-content/uploads/2009/07/gender-box.png" alt="Another example of form design that could be improved. This is a site for actors that requires gender, but they should consider allowing options for members of one sex who identify as the opposite sex." width="364" height="284" /><p class="wp-caption-text">Here&#39;s a subtler example of form design that could be improved. This is a site for actors that requires gender, but they only allow &quot;male&quot; or &quot;female&quot; and have not accounted for members of one sex who identify as the opposite sex, etc. The gender field should be removed from the signup form altogether to disallow the user from thinking about gender issues when they should be signing up for your site.</p></div>
]]></content:encoded>
			<wfw:commentRss>http://joshcoe.com/blog/web-forms-dont-require-too-much/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Usability of vertical browser tabs</title>
		<link>http://joshcoe.com/blog/verticaltabs/</link>
		<comments>http://joshcoe.com/blog/verticaltabs/#comments</comments>
		<pubDate>Sun, 07 Jun 2009 15:55:49 +0000</pubDate>
		<dc:creator>Josh</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://joshcoe.com/?p=202</guid>
		<description><![CDATA[One thing I miss about Firefox 1.5 is the ability for tabs to become gradually smaller as the user opens more of them. The tabs could get a little scrunched, but at least they were all visible on the screen.
After Firefox changed to scrolling tabs from 2.0 on, it became clumsier for me to navigate [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_205" class="wp-caption alignleft" style="width: 186px"><img class="size-full wp-image-205" title="tabkit" src="http://joshcoe.com/wp-content/uploads/2009/06/tabkit.png" alt="Tab Kit 0.55" width="176" height="142" /><p class="wp-caption-text">Tab Kit 0.5.5</p></div>
<p>One thing I miss about Firefox 1.5 is the ability for tabs to become gradually smaller as the user opens more of them. The tabs could get a little scrunched, but at least they were all visible on the screen.</p>
<p>After Firefox changed to scrolling tabs from 2.0 on, it became clumsier for me to navigate through the 40+ tabs that I usually keep open. The tabs were no longer visible at once, and the slider arrows accelerated at an uncomfortable rate if I clicked them too fast.</p>
<p>If browsers had options for visualizing tabs, such as placing them vertically on the screen and using a tree structure, my experience would be so much less frustrating and time-consuming.</p>
<p>Now that wide screens are the norm, the pixel space taken by a vertical tab structure is a reasonable trade-off for the increased usability of being able to see all tabs—including titles—on the screen at once. Vertical tabs also make sense in high-tab-count situations; if the tabs go off the screen, the user can use a standard vertical scroll bar to browse through them instead of the less familiar horizontal scroll buttons.</p>
<p>Using a tree structure makes sense because the user will often want to open several tabs pertaining to the same category, and they should be able to collapse that category when they move on to another.</p>
<p>Luckily for me, I found <a href="https://addons.mozilla.org/en-US/firefox/addon/5447">Tab Kit</a>, which implements both vertical tabs and a tree structure. See CyberNet&#8217;s video below:</p>
<p><object id="viddler_7fae2d72" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="545" height="429" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="src" value="http://www.viddler.com/simple/7fae2d72/" /><param name="name" value="viddler_7fae2d72" /><param name="allowfullscreen" value="true" /><embed id="viddler_7fae2d72" type="application/x-shockwave-flash" width="545" height="429" src="http://www.viddler.com/simple/7fae2d72/" name="viddler_7fae2d72" allowfullscreen="true" allowscriptaccess="always"></embed></object><br />
<a href="https://addons.mozilla.org/en-US/firefox/addon/5447"></a></p>
<p>While Tab Kit has already saved me plenty of time navigating, I did find a few major usability problems with the add-on. They turned out to be changeable through the extensive preference options, but they could still use some tweaking:</p>
<p><strong>1. Poor visibility of selected tab. </strong>The currently selected tab is barely distinguishable from the others. This is especially important because Tab Kit designates sub-tree tab groups with random colors, so the eye is drawn to the colors and must spend a few seconds identifying the selected tab.</p>
<p>Solution: Go to <em>Tab Kit preferences &gt; Tabs &gt; Appearance </em>and enable <em>Emphasize current tab in black.</em></p>
<p>Another solution could be to make the selected tab actually look like a tab, i.e., appear in the foreground and have its edge come up against the side of the web page that it represents.</p>
<p><strong>2. Scroll wheel does not control scroll bar. </strong>When the vertical tabs extend beyond the screen, a vertical scroll bar appears. The user expects to be able to control that bar with their scroll wheel. Instead, the scroll wheel cycles through the open tabs at an uncomfortably rapid pace.</p>
<p>Solution: Go to <em>Controls &gt; Mouse gestures &gt; Scrollwheel tab switch </em>and disable <em>While mouse is over tab bar</em>. This will make Tab Kit follow the standard of letting the scroll wheel control the vertical scroll bar.</p>
<p>The up and down arrows on the keyboard would be more usable controls for cycling through vertical tabs (i.e., activated after the user clicks inside the vertical tab area).</p>
<p><strong>3. Too many preferences. </strong>One issue with free and open source software is the plethora of options that they give the user. Having control is great, but Tab Kit&#8217;s five full menus of preferences are overwhelming. A simple solution would be to pick reasonable defaults, and hide or remove most of the non-critical options. For instance, emphasize the current tab more clearly by default, and remove that option from the <em>Appearance</em> section.</p>
<p><strong>Update.</strong> Since this post came out, Firefox has improved tab interaction. I&#8217;ve switched back to the default tab management, which has in turn made me manage tabs more effectively by myself, i.e., only having a few open at once, and opening a new window if I need a new branch of tabs.</p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/5447">Tab Kit :: Firefox Add-ons</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshcoe.com/blog/verticaltabs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
