<?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>Imagination in VGA &#187; Original</title>
	<atom:link href="http://joshuamorse.com/category/original/feed/" rel="self" type="application/rss+xml" />
	<link>http://joshuamorse.com</link>
	<description>Thoughts on Usability, Design, and Gadgets from Josh Morse, User Experience Designer</description>
	<lastBuildDate>Wed, 11 Jan 2012 20:19:20 +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>4 simple tips to get you ahead of 80% of job applicants I&#8217;ve reviewed</title>
		<link>http://joshuamorse.com/2012/01/11/4-simple-tips-to-get-you-ahead-of-80-of-job-applicants-ive-reviewed/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=4-simple-tips-to-get-you-ahead-of-80-of-job-applicants-ive-reviewed</link>
		<comments>http://joshuamorse.com/2012/01/11/4-simple-tips-to-get-you-ahead-of-80-of-job-applicants-ive-reviewed/#comments</comments>
		<pubDate>Wed, 11 Jan 2012 20:16:46 +0000</pubDate>
		<dc:creator>Josh</dc:creator>
				<category><![CDATA[Original]]></category>
		<category><![CDATA[interviewing]]></category>

		<guid isPermaLink="false">http://joshuamorse.com/?p=446</guid>
		<description><![CDATA[I thought most of these things were commonly taught in school, but based on many job applications I&#8217;ve recently reviewed, applicants either don&#8217;t know or are ignoring them. Don&#8217;t let it happen to you. 1) Write a cover letter. Just create a nice, two paragraph letter that briefly covers your background, skills, and interests. 2) [...]]]></description>
			<content:encoded><![CDATA[<p>I thought most of these things were commonly taught in school, but based on many job applications I&#8217;ve recently reviewed, applicants either don&#8217;t know or are ignoring them. Don&#8217;t let it happen to you.</p>
<p>1) Write a cover letter. Just create a nice, two paragraph letter that briefly covers your background, skills, and interests.</p>
<p>2) When you apply, add a couple sentences to your cover letter about why you think you are a good fit for the job. This should show that you&#8217;ve at least taken 5 minutes to read the company website and learn what it is that we do. A totally generic cover letter is just as bad as no cover letter at all.</p>
<p>3) If you are given any type of homework, or even just some emailed questions to answer, finish it as soon as possible. It will take the same amount of time to complete no matter how late you do it, but you will appear much more interested and competent if you complete it in a day rather than a week.</p>
<p>4) If you have any questions about anything in the interview process, such as homework, interview timing, or even the dress code, ask about it early on. It&#8217;s much better to make sure you are on the right track than to go down the wrong path and waste everyone&#8217;s time. Asking questions makes you look more professional, not less.</p>
<p>Remember, a job interview is a privilege, not a right. If you don&#8217;t put some time and energy into applying for the job, I&#8217;m not going to waste my time and energy interviewing you.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshuamorse.com/2012/01/11/4-simple-tips-to-get-you-ahead-of-80-of-job-applicants-ive-reviewed/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>3 tips on designing an effective e-commerce checkout</title>
		<link>http://joshuamorse.com/2009/11/27/3-tips-on-designing-an-effective-e-commerce-checkout/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=3-tips-on-designing-an-effective-e-commerce-checkout</link>
		<comments>http://joshuamorse.com/2009/11/27/3-tips-on-designing-an-effective-e-commerce-checkout/#comments</comments>
		<pubDate>Sat, 28 Nov 2009 05:29:58 +0000</pubDate>
		<dc:creator>Josh</dc:creator>
				<category><![CDATA[information architecture]]></category>
		<category><![CDATA[Original]]></category>
		<category><![CDATA[e-commerce]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://joshuamorse.com/?p=286</guid>
		<description><![CDATA[Of the many different types of websites, none has received as much scrutiny as e-commerce, a category where ROI can be measured more easily than any other. And in e-commerce sites, the most studied area is the checkout, a multi-step process where users often fall off before completing their purchase. In my own research attempts, [...]]]></description>
			<content:encoded><![CDATA[<p>Of the many different types of websites, none has received as much scrutiny as e-commerce, a category where ROI can be measured more easily than any other. And in e-commerce sites, the most studied area is the checkout, a multi-step process where users often fall off before completing their purchase. In my own research attempts, I found considerable amounts of information, but little written from a usability design perspective.</p>
<p>In this article, I will highlight three important steps that can be taken to improve the usability and ultimately the success of an online checkout. Many of these suggestions are based on common user experience design heuristics, the <a href="http://www.useit.com/papers/heuristic/heuristic_list.html">most well-known</a> having been produced by Jakob Nielsen. These heuristics are violated both consciously and unconsciously, often by designers or clients who feel that users should be funneled through a checkout to the point that information and paths that would allow a user to postpone a purchase are removed. Unfortunately, this often leads only to frustrated users who will be unwilling to complete a purchase.</p>
<h3>Tip #1 &#8211; Provide clear direction of paths on the sign-in page</h3>
<div>
<table class="noborder" border="0">
<tbody>
<tr>
<td><a href="http://joshuamorse.com/wp-content/uploads/2009/09/amazon-sign-in.png"><img class="aligncenter size-thumbnail wp-image-297" title="amazon-sign-in" src="http://joshuamorse.com/wp-content/uploads/2009/09/amazon-sign-in-150x150.png" alt="amazon-sign-in" width="150" height="150" /></a></td>
<td><a href="http://joshuamorse.com/wp-content/uploads/2009/09/lenovo-sign-in.png"><img class="aligncenter size-thumbnail wp-image-323" title="lenovo-sign-in" src="http://joshuamorse.com/wp-content/uploads/2009/09/lenovo-sign-in-150x150.png" alt="lenovo-sign-in" width="150" height="150" /></a></td>
</tr>
<tr>
<td>Problematic Example &#8211; Amazon.com</td>
<td>Good Example &#8211; Lenovo.com</td>
</tr>
</tbody>
</table>
</div>
<p>When a user makes the decision to check out, they need to see sign-in options. A user may already have an existing account on the site, or they may be completely new. In addition, some new users may wish to create an account on the site, while other users simply want to check out as quickly as possible. A single page is usually necessary to direct these different types of users to the proper path.</p>
<p>Such a page should contain at least 3 elements:</p>
<ul>
<li>Username and password fields and a sign in button for existing users.</li>
<li>A button or link for users that wish to create an account.</li>
<li>A button or link for users that wish to check out without creating an account (often called Guest Checkout).</li>
</ul>
<p>Sometimes account creation is tied in as an optional step in the Guest Checkout, but if so, this should be clearly indicated on the page. In addition, many sites support 3rd party payment and checkout options like Paypal or Google Checkout, and these options should be visible on this page as well.</p>
<p>While most e-commerce sites include these elements, the presentation often suffers. One or more options may be overshadowed by another, or widget placement makes it difficult for users to understand what they need to do for each path. For example, the Amazon page uses the same form field and action button for both new and returning users, and uses a radio button to select user type. This blurs the line between the paths available, and leads many users to encounter error messages or begin down the wrong path. In addition, there is no guest checkout.</p>
<p>In contrast, the Lenovo e-commerce site uses the page architecture and design to clearly lay out the path for returning and new users. For new users, both the account sign-up and Guest Checkout are clearly visible.</p>
<h3>Tip #2 &#8211; Let the users know where they are</h3>
<div>
<table class="noborder" border="0">
<tbody>
<tr>
<td><a href="http://joshuamorse.com/wp-content/uploads/2009/09/zappos-address.png"><img class="aligncenter size-thumbnail wp-image-312" title="zappos-address" src="http://joshuamorse.com/wp-content/uploads/2009/09/zappos-address-150x150.png" alt="zappos-address" width="150" height="150" /></a></td>
<td><a href="http://joshuamorse.com/wp-content/uploads/2009/09/k-mart-address.png"><img class="aligncenter size-thumbnail wp-image-313" title="k-mart-address" src="http://joshuamorse.com/wp-content/uploads/2009/09/k-mart-address-150x150.png" alt="k-mart-address" width="150" height="150" /></a></td>
</tr>
<tr>
<td>Problematic Example &#8211; Zappos.com</td>
<td>Good Example &#8211; Kmart.com</td>
</tr>
</tbody>
</table>
</div>
<p>From <a href="http://www.useit.com/papers/heuristic/heuristic_list.html">Jakob Neilson&#8217;s 10 heuristics</a> to <a href="http://instone.org/navstress">Keith Instone&#8217;s Stress Test</a>, user experience experts agree that it is important for users to be aware of their position in a website. It stands to reason that users should easily be able to access relevant information about their position and step in the checkout process. Designers may balk at including this information, saying that it will clutter the page and overwhelm the users, but good designers can work this information in an effective way. The following should be available on all steps of the checkout, not just the final Review and Confirm:</p>
<ul>
<li>Clearly define the number and name of each step in the checkout process (usually at the top of the page).</li>
<li>Show the user where they are in the checkout process.</li>
<li>Clearly indicate what the user needs to do to continue by highlighting the Continue button and giving it a label that describes the next step</li>
<li>Show the user relevant information from previous steps, such as items in cart, shipping costs, total costs, shipping addresses, etc.</li>
</ul>
<p>Zappos demonstrates a lack of useful information. The Zappos checkout does not even include a listing of the steps in the checkout process or a clear header that describes the current step. There is no information about the items in the user&#8217;s cart. Despite the lack of this important information, the page is very cluttered and text is tiny and difficult to read. Even the Continue button, which should pop-out, is buried under text.</p>
<p>In contrast, the K-Mart site is clean and contains significant amounts of white space, yet also provides relevant information to the user. The graphic at the top of the screen illustrates the steps in the checkout process and uses color to clearly show users where they are in the process. Information about the users order is provided in the right hand column, including a full breakdown of cost. Finally, the Continue button is clearly visible and well-positioned at the bottom of the form, though the labeling should call out the next step, such as &#8220;Continue to Shipping Options&#8221;.</p>
<h3>Tip #3 &#8211; Let the user move freely</h3>
<div>
<table class="noborder" border="0">
<tbody>
<tr>
<td><a href="http://joshuamorse.com/wp-content/uploads/2009/09/buycom-address.png"><img class="aligncenter size-thumbnail wp-image-317" title="buycom-address" src="http://joshuamorse.com/wp-content/uploads/2009/09/buycom-address-150x150.png" alt="buycom-address" width="150" height="150" /></a></td>
<td><a href="http://joshuamorse.com/wp-content/uploads/2009/09/sony-1-page-checkout.png"><img class="aligncenter size-thumbnail wp-image-321" title="Sonystyle.com checkout" src="http://joshuamorse.com/wp-content/uploads/2009/09/sony-1-page-checkout-150x150.png" alt="Sonystyle.com checkout" width="150" height="150" /></a></td>
</tr>
<tr>
<td>Problematic Example &#8211; Buy.com</td>
<td>Good Example &#8211; Sonystyle.com</td>
</tr>
</tbody>
</table>
</div>
<p>Steve Krug, in his slightly dated, yet still excellent web usability book, <a href="http://www.sensible.com/buythebook.html">Don&#8217;t Make Me Think</a>, uses an e-commerce checkout as an example of a page where global navigation may not be necessary, though he still recommends a minimal navigation with a home link. Personally, I cringe at the number of e-commerce checkouts that remove most or all navigation options from the checkout pages, forcing the users down a narrow funnel. The problem is that some users may wish to leave the checkout for a variety of reasons but still come back. Perhaps they think of another item they wish to purchase, or want to fill out there cart to reach the minimum purchase threshold for free shipping. Many clients feel that they need to remove anything but the Next Step link in a checkout in order to drive users to complete their shopping. Unfortunately, boxing these types of users in will not push them toward completing their transaction. Instead, these users may become frustrated and abandon the checkout all together. The following should be available throughout the checkout process:</p>
<ul>
<li>Global Navigation. Users have come to rely on it throughout their shopping experience. Taking it away reduces the users control and navigation options, and can raise a flag for the user if the look and feel changes enough to make them feel they have gone to another site for the checkout.</li>
<li>Back to cart button. Users that need to alter their cart should have a clear way to do so, in addition to visualizing their cart during every step of the checkout process.</li>
<li>Clearly labeled Next Step button. This was mentioned earlier, but it bears repeating. The button should be visible and pop out on the page.</li>
<li>Review and Confirm Step with links to each step in the checkout process, including their cart. The user needs to know that they have a last chance to look things over. If their is a problem with their information or cart contents, they should be able to easily change them.</li>
</ul>
<p>The Buy.com checkout removes the entire global navigation, replacing it with a checkout progress indicator and Buy.com logo. Unfortunately, neither are clickable, leaving the user with &#8220;Save and Continue&#8221; as her only option. The lack of the global navigation menu also changes the look of the site, though the color scheme and Buy.com logo keep the site from appearing too jarring. In its defense, the Buy.com Review and Confirm page does include links to change a shipping address or go back to their cart, though these links are very small and easy to miss.</p>
<p>In contrast, the Sonystyle.com checkout includes the global navigation throughout the checkout process, adding the checkout navigation as an additional, prominent piece of information. A clearly visible Back to Cart button is also visible on all steps, and the user can easily change her shipping information from the previous step.</p>
<h3></h3>
<h3>Conclusion and a few words on one page checkouts</h3>
<p>So that concludes my three tips, which boil down to two important web heuristics: give the user sufficient information about where they are and where they can go, and give the user the freedom to move where they wish to.</p>
<p>A final point I wish to touch on is the idea of a one-page checkout. Some sites, such as eforcity.com, will use small points, four columns, and a scrolling page to fit all of a users shipping and billing options on one page. This is problematic for several reasons, not the least being an information overload. Other sites, such as Gap.com, use an AJAX driven interface to expand and collapse different steps in an acordian fashion, retaining a multiple step process without forcing a single page load. While this solution has its merits, it is important to consider the accessibility implications of implementing a checkout that relies so heavily on JavaScript, particularly in light of ADA (Americans with Disabilities Act) lawsuits such as the one that <a href="http://www.nytimes.com/2006/11/06/technology/06ecom.html?ei=5090&amp;en=bc3b6aad87d5d524&amp;ex=1320469200&amp;adxnnl=1&amp;partner=rssuserland&amp;emc=rss&amp;adxnnlx=1162892509-EaPzWlzI+0Xj7Vpeb8wVqw">hit Target 3 years ago</a>. In addition, users have become familiar with the three-page checkout, and a new paradigm may confuse some users. That being said, there is clearly a future for checkouts like Gap.com.</p>
<div id="attachment_322" class="wp-caption aligncenter" style="width: 160px"><a href="http://joshuamorse.com/wp-content/uploads/2009/09/gap-checkout.png"><img class="size-thumbnail wp-image-322" title="Gap.com checkout" src="http://joshuamorse.com/wp-content/uploads/2009/09/gap-checkout-150x150.png" alt="Gap.com checkout (AJAX expandable)" width="150" height="150" /></a><p class="wp-caption-text">Gap.com checkout (AJAX expandable)</p></div>
]]></content:encoded>
			<wfw:commentRss>http://joshuamorse.com/2009/11/27/3-tips-on-designing-an-effective-e-commerce-checkout/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

