<?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>jeremy johnson (online) &#187; UI</title>
	<atom:link href="http://www.jeremyjohnsononline.com/category/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jeremyjohnsononline.com</link>
	<description>Jeremy Johnson writes about User Experience, Design, technology, mobile, and all things the Internet. He also enjoys art, photography, travel, and gaming. This is his home on the Internet.</description>
	<lastBuildDate>Wed, 11 Jan 2012 13:17:31 +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>The new Facebook profile: timelines</title>
		<link>http://www.jeremyjohnsononline.com/2011/09/23/the-new-facebook-profile-timelines/</link>
		<comments>http://www.jeremyjohnsononline.com/2011/09/23/the-new-facebook-profile-timelines/#comments</comments>
		<pubDate>Fri, 23 Sep 2011 13:47:18 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[me]]></category>
		<category><![CDATA[social]]></category>
		<category><![CDATA[trends]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/?p=483</guid>
		<description><![CDATA[The first thing I&#8217;ve really been excited about in facebook for some time &#8211; the timeline. I&#8217;ve always been interested in showing my data in more interesting ways, and as the owner of much of my data, facebook is ripe to take advantage of it. While others have been trying to visualize parts your life, [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.42.00-PM-1024x613.png" alt="" title="Facebook Jeremy Johnson profile timeline" width="600" class="alignnone size-large wp-image-484" /></p>
<p>The first thing I&#8217;ve really been excited about in facebook for some time &#8211; <strong>the timeline</strong>. I&#8217;ve always been interested in showing my data in more interesting ways, and as the owner of much of my data, facebook is ripe to take advantage of it. While others have been trying to visualize parts your life, you really won&#8217;t need to look much further any longer. Let&#8217;s take a look at what my data looks like in the new timeline.<br />
<span id="more-483"></span><br />
When you first hit a profile you see a &#8220;half view&#8221; of the new cover, along with the start of your timeline:<br />
<a href="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.49.40-PM.png"><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.49.40-PM-1024x658.png" alt="" title="Facebook Jeremy Johnson Cover Image" width="600" class="alignnone size-large wp-image-485" /></a><br />
This makes you wonder some of the more interesting things people will do with an image that &#8220;folds up&#8221; as you scroll back up to the top.</p>
<p>You get all the basics &#8211; timelines (with month or year segments to jump to), about, friends, photos, maps, and likes.</p>
<p>Maps do something like I&#8217;ve always wanted Gowalla to do &#8211; show visited spots, and let you segment them by time:</p>
<p><a href="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-10.10.11-PM.png"><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-10.10.11-PM.png" alt="" title="Facebook Map" width="600" class="alignnone size-full wp-image-490" /></a></p>
<p>As you start to scroll down the timeline you get a sticky header, with the profile name, and a &#8220;+&#8221; to add events to the timeline.</p>
<p><a href="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.42.31-PM.png"><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.42.31-PM.png" alt="" title="Timeline header" width="600" class="alignnone size-full wp-image-491" /></a></p>
<p>Some events now are very specific:</p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.48.07-PM.png" alt="" title="Add to timeline" width="199" height="238" class="alignnone size-full wp-image-492" /></p>
<p>And it looks like facebook is going to allow others to build on this to create custom modules. I could imagine &#8211; a gaming module that asks: Just played&#8230; Just bought&#8230; Just won&#8230; &#8211; here what travel looks like:</p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-10.17.12-PM.png" alt="" title="facebook travel" width="600" class="alignnone size-full wp-image-493" /></p>
<p>There are automatic modules &#8211; like photos: </p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.46.40-PM.png" alt="" title="facebook timeline photos" width="449" height="561" class="alignnone size-full wp-image-496" /></p>
<p>Friends you&#8217;ve made in a specific timeframe:</p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.46.12-PM.png" alt="" title="facebook friends" width="424" height="505" class="alignnone size-full wp-image-497" /></p>
<p>Places you&#8217;ve been:</p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.45.44-PM.png" alt="" title="facebook places" width="433" height="548" class="alignnone size-full wp-image-498" /></p>
<p>And major life events, like marriage:</p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.44.48-PM.png" alt="" title="facebook married" width="488" height="570" class="alignnone size-full wp-image-499" /></p>
<p>And work:</p>
<p><a href="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.43.40-PM.png"><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-9.43.40-PM.png" alt="" title="facebook work" width="600" class="alignnone size-full wp-image-500" /></a></p>
<p>Overall, polished, slick, useful &#8211; and just fun.</p>
<p>There are others that do very simular things &#8211; <a href="http://memolane.com/">memolane</a> &#8211; my lane: <a href="http://memolane.com/jeremyjohnson">http://memolane.com/jeremyjohnson</a> does a great job &#8211; just quickly enter a couple of your social media hangouts, and instant timeline!</p>
<p><a href="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-11.08.43-PM.png"><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-Shot-2011-09-22-at-11.08.43-PM-1024x515.png" alt="" title="memolane" width="600" class="alignnone size-large wp-image-502" /></a></p>
<p>Dustin Curtis had <a href="http://lifepath.me/">lifepath.me</a> &#8211; and just wrote about some of the similarities here: <a href="http://blog.dustincurtis.com/facebook-timelines-and-lifepathme">http://blog.dustincurtis.com/facebook-timelines-and-lifepathme</a></p>
<p>Or something like <a href="http://vizualize.me/">vizualize.me</a> that takes your linkedin data and makes it more visual, and useful.</p>
<p>There are more and more tools out there that take your data and give you something more useful in return. As well as sites dedicated to visualization like: <a href="http://flowingdata.com/">http://flowingdata.com/</a> and <a href="http://infosthetics.com/">http://infosthetics.com/</a>.</p>
<p>While I think this is a very useful display of the data facebook collects from me, I do wonder about people who will be growing up with facebook &#8211; and have a couple years they would rather forget, or maybe dated throughout &#8211; will you be able to &#8220;hide&#8221; specific years/months? Do you really want to have all your past a very quick and visalbe click away? I&#8217;m lucky facebook didn&#8217;t really take off until I was a &#8220;professional&#8221; and married &#8211; so I don&#8217;t mind everything being exposed to my friends or even the public. As always with facebook, privacy is key &#8211; and very granular options are needed.</p>
<p>Looks like everyone will be getting this view on the 29th, so get ready to have your life laid out for all to see!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2011/09/23/the-new-facebook-profile-timelines/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Amazon.com redesign: clean, modern design = tablet?</title>
		<link>http://www.jeremyjohnsononline.com/2011/09/07/amazon-com-redesign-clean-modern-design-tablet/</link>
		<comments>http://www.jeremyjohnsononline.com/2011/09/07/amazon-com-redesign-clean-modern-design-tablet/#comments</comments>
		<pubDate>Wed, 07 Sep 2011 13:34:50 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[trends]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/?p=445</guid>
		<description><![CDATA[The word this week from the Wall Street Journal (of all places) that Amazon.com is redesigning &#8211; for the tablet age. And while there may be some truth to that, I think it&#8217;s funny how modern, clean design &#8211; automatically equals designing for a tablet. Design trends are always informed by the dominate devices in [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/Screen-shot-2011-09-21-at-3.21.08-PM.png" alt="" title="Amazon.com" width="354" height="257" class="alignnone size-full wp-image-481" /></p>
<p>The word this week from the <a href="http://online.wsj.com/article/SB10001424053111904716604576549413463996484.html?KEYWORDS=amazon+redesign#articleTabs%3Darticle">Wall Street Journal</a> (of all places) that Amazon.com is redesigning &#8211; for the tablet age. And while there may be some truth to that, I think it&#8217;s funny how modern, clean design &#8211; automatically equals designing for a tablet. Design trends are always informed by the dominate devices in its time, and mobile is where our trends for today are starting. And since I&#8217;m now in the e-commerce space, I&#8217;m obviously interested, and took the new design for a test drive.<br />
<span id="more-445"></span><br />
Amazon did the right thing, unlike Target &#8211; that shot out recently with a <a href="http://www.target.com/">BIG BANG</a> &#8211; so big there are instructions all over the site on how to use the site (nice design BTW) &#8211; amazon is modernizing in pieces, a little at a time. Here&#8217;s what&#8217;s new:</p>
<hr />
<strong>Header:</strong><br />
The header we&#8217;ve all come to know and love, looks, well&#8230; modern! Not major structural changes, just some rearranging, and a sleek modern &#8220;tablet&#8221; look.<br />
<img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/1-1024x94.png" alt="" title="Amazon.com redesign header" width="600" class="alignnone size-large wp-image-447" /></p>
<hr />
<strong>Search Ads:</strong><br />
One feature I&#8217;m not sure about, as soon as you click into the search box (as I&#8217;m sure a majority do) you get some features links/ads. Not really sure what they&#8217;re going for here. But they disappear quickly as you start to type.<br />
<img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/1b.png" alt="" title="Amazon redesign search ads" width="600" class="alignnone size-full wp-image-448" /></p>
<hr />
<strong>Shop by:</strong><br />
Something that was once considered radical (hiding something so important!), but now standard across most sites, the shop now get some visual tweeks, and some branded style.<br />
<img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/2.png" alt="" title="Amazon redesign shop by" width="293" height="589" class="alignnone size-full wp-image-451" /></p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/2-2.png" alt="" title="Amazon redesign shop all" width="600" class="alignnone size-full wp-image-452" /></p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/2-3.png" alt="" title="Amazon redesign shop all" width="600" class="alignnone size-full wp-image-453" /></p>
<hr />
<strong>Your Amazon:</strong><br />
Something new! These are your account options and services Amazon provides: movies, movies, games, etc&#8230; Also includes the cloud services.<br />
<img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/4.png" alt="" title="amazon your amazon" width="235" height="474" class="alignnone size-full wp-image-454" /></p>
<hr />
<strong>Updated cart</strong><br />
Yea! A dynamic cart, with a quick view. Something I think all carts should have.<br />
<img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/5.png" alt="" title="amazon redesign shopping cart" width="298" height="237" class="alignnone size-full wp-image-455" /></p>
<hr />
<strong>Promotions</strong><br />
No longer are we limited to just one promotion at a time, no. We can now have 12! Yes 12! Promotions at our fingertips. I&#8217;m sure this was the most requested feature!<br />
<img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/3.png" alt="" title="amazon redesign promotions" width="600" class="alignnone size-full wp-image-458" /> </p>
<hr />
<strong>Sub-categories</strong><br />
Now when you dive down, you see some sub-categories across the top, just under the header.<br />
<a href="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/6.png"><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/6-1024x102.png" alt="" title="amazon redesign sub-categories" width="600" class="alignnone size-large wp-image-459" /></a></p>
<hr />
<strong>Buy buttons</strong><br />
The Prime messaging has moved from the top, under the header, to a standardized location on the right. The shipping options have also moved to this location. I find it easier to click the 1-click button, which I&#8217;m sure is what they&#8217;re looking for.</p>
<p>All your buy options are now in one single location.<br />
<img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/7.png" alt="" title="amazon redesign buy buttons" width="229" height="446" class="alignnone size-full wp-image-464" /></p>
<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/8.png" alt="" title="amazon redesign buy buttons" width="228" height="459" class="alignnone size-full wp-image-465" /></p>
<hr />
<strong>Search</strong><br />
Search is getting some new filters to highlight all the different formats amazon books are available in, including HTML (?).<br />
<img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/09/11-1024x514.png" alt="" title="Amazon redesign search" width="600" class="alignnone size-large wp-image-467" /></p>
<p><strong>Overall &#8211; </strong>it&#8217;s a very minor redesign, and they&#8217;ve gone in the right direction &#8211; modernize what they can, when they can, keep moving forwards towards a new, updated, clean design. While not as sexy as target&#8217;s big band redesign, you also won&#8217;t need an instruction manual.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2011/09/07/amazon-com-redesign-clean-modern-design-tablet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>I almost bought a TouchPad, then got a MacBook Air instead</title>
		<link>http://www.jeremyjohnsononline.com/2011/08/22/i-almost-bought-a-touchpad-then-got-a-macbook-air-instead/</link>
		<comments>http://www.jeremyjohnsononline.com/2011/08/22/i-almost-bought-a-touchpad-then-got-a-macbook-air-instead/#comments</comments>
		<pubDate>Mon, 22 Aug 2011 13:48:34 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[interaction]]></category>
		<category><![CDATA[me]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[trends]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/?p=392</guid>
		<description><![CDATA[Two weeks ago HP dropped their TouchPad by $100, Staples had a coupon for an extra $100 off that. A 16GB Tablet for $299. Sounds like a pretty good deal… The next cheapest option would be to get a Nook for $249 &#8211; but I really like WebOS. I like the attention to the design [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2011/08/touchpad_air.jpg" alt="I almost bought a TouchPad, then got a MacBook Air instead" title="I almost bought a TouchPad, then got a MacBook Air instead" width="600" height="250" class="alignnone size-full wp-image-393" /></p>
<p>Two weeks ago HP dropped their TouchPad by $100, Staples had a coupon for an extra $100 off that. A 16GB Tablet for $299. Sounds like a pretty good deal… The next cheapest option would be to get a Nook for $249 &#8211; but I really like WebOS. I like the attention to the design details, the gestures, the notifications &#8211; I could go on. But in the end, and as the events of this weekend showed &#8211; only when at the bargain price of $99 does it beat out the iPad in buzz and sales for a short time before its demise.<br />
<span id="more-392"></span><br />
There&#8217;s not only the cost, or the details, but what I wanted the TouchPad for. Yes, I&#8217;m a gadget geek, and yes, I like to tryout new things, and I also believe in consuming as much as I can online and off to inform my own designs. But, I wanted the TouchPad to be my productivity machine. See my iPad has been commandeered by my 7 year old as a gaming console, and TV. There are also opportunities for educational uses: math, spelling, BrainPop &#8211; but overall it&#8217;s a consumption device. And that&#8217;s how I use it as well &#8211; games, movies, reading, surfing &#8211; occasionally email, etc… but never any real production. Not that it&#8217;s not capable of doing so &#8211; professional records, novels, websites, presentations &#8211; all can and have been produced on an iPad, but for me it&#8217;s just not natural yet.</p>
<p>So it depends on what you want to use this device for.</p>
<p><a href="http://daringfireball.net/linked/2011/08/07/clifford">Gruber recently posted about Seth Clifford&#8217;s experience buying an Android tablet:</a></p>
<blockquote><p>Case in point: when I went to Staples, I asked the sales guy for the 10.1 and the first thing he said was<br />
&#8220;What are you buying it for?&#8221; When I replied, &#8220;development&#8221;, he said &#8220;Ok, because this thing isn&#8217;t going to replace a laptop for you&#8221;. No problem, I assured him, we&#8217;re app devs, and we know what we&#8217;re doing. </p>
<p>Then, the manager came over to verify the coupon I had and asked the same question again. Again I replied &#8220;development&#8221; and he asked &#8220;Of what?&#8221; rather indignantly.</p>
<p>&#8220;Uh, Android apps?&#8221; I replied incredulously.</p>
<p>&#8220;Oh, ok, because we&#8217;re selling a lot of these things, and we get a LOT of them back. People buy them thinking they&#8217;re getting rid of a laptop, and they all come back returning them.&#8221;</p></blockquote>
<p>And I agree, most people think a tablet will be a laptop replacement, or something that will increase their productivity, it won&#8217;t. Or it won&#8217;t for most people. There are just certain tasks that are more difficult &#8211; typing without a keyboard (not that you can&#8217;t add one) &#8211; getting files from one place to another, managing your photos, multitasking (when needed), etc… If there is not an app specifically for what you&#8217;re doing, it&#8217;s probably not going to increase your efficiency.</p>
<p>Then why is the iPad selling like gangbusters? Because of what it does well, and how it fits so well in the entire Apple ecosystem. I love buying universal apps &#8211; where I get the benefit of purchasing once, and getting it across multiple devices. It does the reading and viewing all types of media well &#8211; and if you&#8217;ve experienced an iPhone, you know what you&#8217;re getting.  I think it&#8217;s a wonderful entertainment device, that can help with work in a pinch.</p>
<p>I also like iPad&#8217;s interaction model with it&#8217;s focus, and I like that Apple is bringing that full screen, single-app-at-a-time focus to OSX with Lion. Is Apple purposely helping our distracted minds focus on one task at a time? Or are they just taking an interface that seems to work with millions (the iPad), and moving it to the desktop to get people to move up from an iPad at some point? I&#8217;d like to think this is Apple&#8217;s genius design &#8211; helping us get back some focus in our work &#8211; removing the distractions &#8211; which has been so popular as of late (<a href="http://www.iawriter.com/">IA Writer for example</a>).</p>
<p>That brings me to the MacBook Air. I wanted something portable like a tablet, but used not for entertainment, but to create. And in my opinion nothing can beat a Mac for this &#8211; no matter how small. And small it is, the 11inch MacBook Air is small, light, powerful, quiet, instant, and besides the whole &#8220;it&#8217;s a laptop&#8221; thing, it&#8217;s great for portable, anywhere creating. And that&#8217;s what I&#8217;m looking for in the end: portable, quick, anywhere creating.</p>
<p>Lion really helps with this, with just my limited experience, it works well with smaller screen devices, again provides that focus, and has a tablet OR desktop feeling, that&#8217;s actually pretty nice.</p>
<p>So while I may of flirted with a TouchPad, and had extensive time in with an iPad &#8211; I&#8217;ll see if this MacBook Air increases my productivity. Like most purchases, we&#8217;re looking for something to entertain, show status, or increase our productivity in life &#8211; this purchase was about productivity. Let&#8217;s see what the iPad 3 has, and then I&#8217;ll check back.</p>
<p><em>Anyone using an iPad exclusively? Can it/did it replace a desktop/laptop?</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2011/08/22/i-almost-bought-a-touchpad-then-got-a-macbook-air-instead/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>So you want to prototype?</title>
		<link>http://www.jeremyjohnsononline.com/2009/02/24/so-you-want-to-prototype/</link>
		<comments>http://www.jeremyjohnsononline.com/2009/02/24/so-you-want-to-prototype/#comments</comments>
		<pubDate>Tue, 24 Feb 2009 23:59:13 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[IA]]></category>
		<category><![CDATA[interaction]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/?p=86</guid>
		<description><![CDATA[I personally think prototyping is the way to go when creating a new software product (or any product really). You get to &#8220;blueprint&#8221; out how something is going to work, how the pieces fit together, and how it will really work once launched. I think most people are sold on the concept, so it&#8217;s a [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.jeremyjohnsononline.com/wp-content/uploads/2009/02/prototyping_blog.jpg" alt="prototyping_blog" title="prototyping_blog" width="390" height="250" class="alignnone size-full wp-image-87" /></p>
<p>I personally think prototyping is the way to go when creating a new software product (or any product really). You get to &#8220;blueprint&#8221; out how something is going to work, how the pieces fit together, and how it will really work once launched.  I think most people are sold on the concept, so it&#8217;s a matter of how to build this close-to-real product that you can test with your user base. Do you use paper? Mock-ups? Tools like iRise and Axure, or get real and build a non-functioning ready to reuse front-end?<br />
<span id="more-86"></span></p>
<p>The first step is defining what you&#8217;re going to use this prototype for. Is it to drum out business requirements? Demo to clients before they write the big check? Or get something as close as possible to the real thing, so you can start the User Centered Design process and test your ideas on actual people that will be using your product.</p>
<p>Obviously I enjoy prototyping for the latter, getting real feedback that our team&#8217;s ideas were dead on, or widely off-base (never!). To do this, you really want to build the prototype in the technology you&#8217;re going to create the finished product in (usually HTML or Flex for web based software). This solves two problems: one, this truly is as close to the real thing as you can get. By using the actual UI technology you&#8217;ll be creating the final product in, you&#8217;ll know what can and can&#8217;t be done, users will get a real feeling for the responsiveness, animations, and interactions. It&#8217;s real, sans the months of backend development needed to power this prototype. And two, you can pass this finished front-end code off to the development team, taking pressure off backend developers who may not be well versed in front-end development.</p>
<p>Microsoft when working on <a href="http://www.adaptivepath.com/blog/2008/08/20/pencil-and-paper-to-live-prototype-whered-the-wireframe-go/">Office 2007 did this very thing:</a></p>
<blockquote><p>“if you’re trying to build a prototype that you want use as a blueprint, it should exist in the same medium as the final product.”</p></blockquote>
<p>In the past when I&#8217;ve run prototyping projects, the teams usually consist of just one designer/IA, one developer, and a small amount of a backend developers time (to get some fake system data up and running). Depending on the maturity of your front-end development group, you may have sets of UI widgets and code ready to go, this will help speed up the overall process.</p>
<p>Dave Cronin from Cooper recently wrote an article titled &#8220;<a href="http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html">Industry trends in prototyping</a>&#8221; &#8211; which I agree with about everything in the article &#8211; he lists out four reasons for creating prototypes: <strong>prototypes make your designs better, help facilitate communication, enable user input and usability assessment, and help assess technical feasibility and reduce development time</strong>. He&#8217;s also a fan of creating &#8220;real&#8221; prototypes where it makes sense.</p>
<p>I love this <a href="http://www.adaptivepath.com/blog/2008/08/20/pencil-and-paper-to-live-prototype-whered-the-wireframe-go/#comment-179490">comment from <a href="http://www.xero.com/">Philip Fierlinger</a>: </p>
<blockquote><p>Prototypes, on the other hand, let people feel the flow and experience the relationships. Building prototypes allows architects and interaction designers to quickly identify broken pathways and iterate quickly to find better flows &#8211; by feeling the experience, rather than thinking about it in the abstract. Developers, designers and clients also get a much more tangible sense of what the end product will be.</p></blockquote>
<p>Again, I can&#8217;t stress enough how a &#8220;real&#8221; prototype will give you the best feedback for the effort. We&#8217;ve also used these prototypes to help sell ideas to business groups. Imagine trying to sell an idea for a mobile app by letting your VP access it directly on their phone. This will beat out any PowerPoint presentation.</p>
<p><a href="http://www.digital-web.com/articles/just_build_it_html_prototyping_and_agile_development/">Garrett wrote on this topic years ago</a>, and the technology is now easier to use than ever before. There are frameworks, open source systems, and reusable icon sets ready to be molded into your own prototype.</p>
<p>Using wireframes or paper for low-fedility prototyping is not necessarily a bad thing. Maybe your just testing internally, or you&#8217;re limited with your technology skills. There are discussions about what <a href="http://www.boxesandarrows.com/view/real_wireframes">fidelity wireframes should be</a> (both form and function). There are many tools at your disposal for creating wireframes and prototypes, and they&#8217;ve really just recently gotten easy to use. No longer are you stuck with Visio &#8211; here&#8217;s a list of some tools, ranging from very expensive to free with varying sets of features:</p>
<ul>
<li><a href="http://www.axure.com/">Axure</a></li>
<li><a href="http://www.evolus.vn/Pencil/Home.html">Pencil Project</a></li>
<li><a href="http://www.balsamiq.com/">Balsamiq Mockups</a></li>
<li><a href="http://labs.adobe.com/technologies/flashcatalyst/">Adobe Flash Catalyst<a/></li>
<li><a href="http://www.irise.com/">iRise</a></li>
<li><a href="http://www.omnigroup.com/applications/omnigraffle/">OmniGraffle</a></li>
<li><a href="http://www.lovelycharts.com/">Lovely Charts</a></li>
<li>
<a href="http://rapidrabb.it/">Rapidrabb.it</a></li>
<li><a href="http://www.iplotz.com">iplotz.com</a></li>
<li><a href="http://www.serena.com/products/prototype-composer/home.html">Prototype Composer</a></li>
<li><a href="http://www.fluidia.org/">fluidIA</a></li>
<li><a href="http://wireframesketcher.com/">WireframeSketcher</a></li>
<li><a href="http://mockupscreens.com/">MockupScreens</a></li>
</ul>
<p>Boxes and Arrows has an <a href="http://www.boxesandarrows.com/view/visio_replaceme">article from 2006 written by Scott McDowell</a>, that goes over some of these options, but what&#8217;s really interesting are the comments below the article where designers talk from real world experience. And Russell Wilson from Dexo Design compares <a href="http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/">16 prototyping tools</a> (2008) and again, the comments are interesting.</p>
<p>I tend to use wireframes to quickly get across ideas and interactions. Something that could possibly be thrown away, or will be changed a number of times. Once the idea seems to stick, I move to high fidelity mock-ups, sometimes merging the mock-ups together in a slide-by-slide presentation showing the page flow with faked interactions.</p>
<p>GUUUI posted some links to <a href="http://www.guuui.com/posting.php?id=2192">videos showing lo-fidelity prototypes in action</a>. Again, this can work to help guide overall concepts, but to get true feedback &#8211; you really need to have a higher level of fidelity.</p>
<p>If you&#8217;re in a good situation where you&#8217;re ahead of the product timeline, prototyping is your next step. Just like how a architect moves to a model, build out your prototype and test, iterate, improve, and in the end launch a successful product!</p>
<p>(additions)<br />
Great post over at Adaptive Path: <a href="http://www.adaptivepath.com/blog/2009/03/24/rapid-prototyping-tools/">Rapid Prototyping</a> Tools</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2009/02/24/so-you-want-to-prototype/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Emerging Interface Patterns</title>
		<link>http://www.jeremyjohnsononline.com/2008/09/16/emerging-interface-patterns/</link>
		<comments>http://www.jeremyjohnsononline.com/2008/09/16/emerging-interface-patterns/#comments</comments>
		<pubDate>Tue, 16 Sep 2008 21:17:36 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[me]]></category>
		<category><![CDATA[presentations]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/2008/09/16/emerging-interface-patterns/</guid>
		<description><![CDATA[Last month I gave a talk here at our Customer Experience University about what I call &#8220;Emerging Interface Patterns&#8221;. Very often we get buried in day-to-day work and miss out on new experiences, new things that are going on in interaction design just pass us by. This is tragic for those who don&#8217;t take the [...]]]></description>
			<content:encoded><![CDATA[<p><img id="image62" src="http://www.jeremyjohnsononline.com/wp-content/uploads/2008/09/emerging_interfaces.jpg" alt="Emerging Interface Patterns" /></p>
<p>Last month I gave a talk here at our Customer Experience University about what I call &#8220;Emerging Interface Patterns&#8221;. Very often we get buried in day-to-day work and miss out on new experiences, new things that are going on in interaction design just pass us by. This is tragic for those who don&#8217;t take the time to stop smell the pixels ;-) Everyone should be paying attention because these new experiences are great creative stimulus for innovative ideas.</p>
<p><span id="more-61"></span></p>
<p>In the below presentation I try to run the gamut of what&#8217;s new in User Experience, and Interaction Design &#8211; scouting ahead for what&#8217;s changing the landscape.  As someone who is passionate about these topics, I love discovering new interaction patterns, and better ways to do something that was thought adequate before. And by consuming all these new patterns, you can blend them into current projects, and even synthesize something new.</p>
<p>What&#8217;s going on in Game Design? What are some of the newest UI trends? How is information design contributing to the interaction design practice? How are we bringing the real world into applications? These are just some of the questions I explore below:</p>
<div style="width:425px;text-align:left" id="__ss_601674"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/jeremy/emerging-interface-patterns-presentation?type=powerpoint" title="Emerging Interface Patterns">Emerging Interface Patterns</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=080508emerginginterfaces-1221597354072040-9&#038;stripped_title=emerging-interface-patterns-presentation" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=080508emerginginterfaces-1221597354072040-9&#038;stripped_title=emerging-interface-patterns-presentation" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object>
<div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;">View SlideShare <a style="text-decoration:underline;" href="http://www.slideshare.net/jeremy/emerging-interface-patterns-presentation?type=powerpoint" title="View Emerging Interface Patterns on SlideShare">presentation</a> or <a style="text-decoration:underline;" href="http://www.slideshare.net/upload?type=powerpoint">Upload</a> your own. (tags: <a style="text-decoration:underline;" href="http://slideshare.net/tag/ux">ux</a> <a style="text-decoration:underline;" href="http://slideshare.net/tag/user-experience">user experience</a>)</div>
</div>
<p><a href="http://www.jeremyjohnsononline.com/documents/080508_emerging_interfaces.pdf">Download PDF</a></p>
<p>At the end of the presentation I featured the recently revealed <a href="http://www.adaptivepath.com/aurora/">Adaptive Path Aurora</a> concept &#8220;browser&#8221;. I was actually mostly done with this presentation when Aurora was revealed, and thought it was the perfect closing to my presentation. Why? Because it is the product of many of these emerging patterns we see in other areas of product and interaction design. You could say the design is somewhat reminiscent of the Sugar UI in the OLPC computer, or that having things fade away into the distance is bringing the real world into the experience. The way you can quickly type in a search, or the contextual menu that pops-up to reveal more actions. These are all things we&#8217;ve seen before, just not together in this new and innovative idea. </p>
<p>While you could of lived in a cave for the past couple of years and had the same ideas, I theorize that by observing these trends you are &#8220;building on the shoulders of giants&#8221; and can better combine, iterate, test, and innovate.</p>
<p>I did want to mention a combination I&#8217;ve had in my head for awhile :-) on page 30 I have a shot of the Prius fuel consumption screen. I think by using game design and comparing this to other drivers (not just Prius, but all cars) people would instinctively want to &#8220;win&#8221; by having the best gas mileage. If we could get a mandate for all car companies to include a version of this, with a way to transmit &#8220;scores&#8221; to a central database, I think we could be off foreign oil in no time! The elevator pitch would be &#8220;It&#8217;s like <a href="http://nikeplus.nike.com/nikeplus/">Nike+</a> for fuel consumption&#8221; ;-)</p>
<p><img id="image63" src="http://www.jeremyjohnsononline.com/wp-content/uploads/2008/09/gas_game.jpg" alt="Gas Game" />
<p>via: <a href="http://flickr.com/photos/88262773@N00/2525850407">http://flickr.com/photos/88262773@N00/2525850407</a></p>
<p>Last, things change fast. Since presenting this we&#8217;ve seen new patterns in Google&#8217;s Chrome browser, and Mozilla&#8217;s Ubiquity. Remember to keep up, stay informed, and absorb as much as you can.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2008/09/16/emerging-interface-patterns/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hello, welcome to 2008</title>
		<link>http://www.jeremyjohnsononline.com/2008/04/30/hello-welcome-to-2008/</link>
		<comments>http://www.jeremyjohnsononline.com/2008/04/30/hello-welcome-to-2008/#comments</comments>
		<pubDate>Wed, 30 Apr 2008 20:33:23 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[IA]]></category>
		<category><![CDATA[me]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[presentations]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/2008/04/30/hello-welcome-to-2008/</guid>
		<description><![CDATA[Starting in 2005 when returning from SXSWi a coworker and I would put together a trends presentation talking about up-and-coming technologies, patterns, websites, etc&#8230; and 2008 is no different. The presentations keep getting longer and longer, as innovation keeps building on the previous year, moving faster and faster. This year my co-presenter was Dustin Askins [...]]]></description>
			<content:encoded><![CDATA[<p><img id="image59" src="http://www.jeremyjohnsononline.com/wp-content/uploads/2008/04/post_header.jpg" alt="Hello, welcome to 2008" /></p>
<p>Starting in 2005 when returning from SXSWi a coworker and I would put together a trends presentation talking about up-and-coming technologies, patterns, websites, etc&#8230; and 2008 is no different. The presentations keep getting longer and longer, as innovation keeps building on the previous year, moving faster and faster. This year my co-presenter was <a href="http://dustinaskins.com/">Dustin Askins</a> of Travelocity, and we gave the presentation internally to our UX groups, and just this week at the <a href="http://dfw-upa.org/modules/extcal/event.php?event=23">Dallas UPA Chapter</a>.</p>
<p><span id="more-60"></span><br />
Why SXSWi? I think it&#8217;s really good for getting a pulse of what&#8217;s going on in the User Experience field. You get to meet with a wide verity of people from different practices, and hear from some of the top web professionals. An while there are many great conferences (like UIE, IA Summit, UX Week, etc&#8230;) SXSWi is consistent on it&#8217;s wide ranging topics (great for &#8220;T-Shaped&#8221; People).</p>
<p>When looking at trends across technology, marketing, UX, and business you start to see patterns of what the leaders in their respective groups are expecting for 2008 and beyond. Things I keep seeing rise to the top: Mobile, Open Platforms, Data Control, Mixing Virtual and Reality, Semantic Web, Interoperability, and Location Based tools (see slide 33). None of these are unexpected, I sure we&#8217;d all agree these are hot items that will effect multiple areas.   </p>
<p>I&#8217;ve never posted these presentations before, so I have <a href="http://www.jeremyjohnsononline.com/documents/trends_2005.pdf">2005</a>, <a href="http://www.jeremyjohnsononline.com/documents/trends_2006.pdf">2006</a>, and <a href="http://www.jeremyjohnsononline.com/documents/trends_2007.pdf">2007</a> to post along with <a href="http://www.jeremyjohnsononline.com/documents/trends_2008.pdf">2008</a>. So if you&#8217;re new to the web and User Experience, now is your chance to catch up on a couple years worth of knowledge.</p>
<p><strong>So say hello to 2008:</strong>
<div style="width:425px;text-align:left" id="__ss_372725"><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=trends2008-1209156653404176-9"/><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=trends2008-1209156653404176-9" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object>
<div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;"><a href="http://www.slideshare.net/?src=embed"><img src="http://static.slideshare.net/swf/logo_embd.png" style="border:0px none;margin-bottom:-5px" alt="SlideShare"/></a> | <a href="http://www.slideshare.net/jeremy/web-design-and-ux-trends-for-2008?src=embed" title="View 'Web, Design, and UX Trends for 2008.' on SlideShare">View</a> | <a href="http://www.slideshare.net/upload?src=embed">Upload your own</a></div>
</div>
<p><a href="http://www.slideshare.net/jeremy/technology-design-and-ux-trends-for-2007/">2007 On SlideShare</a></p>
<p><a href="http://www.slideshare.net/jeremy/web-design-and-ux-trends-for-2006/">2006 On SlideShare</a></p>
<p><a href="http://www.slideshare.net/jeremy/web-design-and-ux-trends-for-2005/">2005 On SlideShare</a></p>
<p>I also have most of this presentation in a podcast (I think my recorder battery went dead&#8230;), so <a href="http://www.jeremyjohnsononline.com/podcasts/trends_2008.WMA">listen in</a>.  Hopefully I will continue to keep this trend of my own, it&#8217;s always interesting to look back&#8230;</p>
<p>[EDIT 05/12/08]<br />
Here&#8217;s some video from our UPA talk:<br />
<object type="application/x-shockwave-flash" width="400" height="300" data="http://www.vimeo.com/moogaloop.swf?clip_id=995744&amp;server=www.vimeo.com&amp;fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color="><param name="quality" value="best" /><param name="allowfullscreen" value="true" /><param name="scale" value="showAll" /><param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=995744&amp;server=www.vimeo.com&amp;fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=" /></object><br /><a href="http://www.vimeo.com/995744?pg=embed&#038;sec=995744">Me &#038; Dustin speaking @ Dallas UPA</a> from <a href="http://www.vimeo.com/jeremyjohnson?pg=embed&#038;sec=995744">Jeremy Johnson</a> on <a href="http://vimeo.com?pg=embed&#038;sec=995744">Vimeo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2008/04/30/hello-welcome-to-2008/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
<enclosure url="http://www.jeremyjohnsononline.com/podcasts/trends_2008.WMA" length="8551776" type="audio/x-ms-wma" />
		</item>
		<item>
		<title>Designer&#8217;s view of eclipse</title>
		<link>http://www.jeremyjohnsononline.com/2008/03/23/designers-view-of-eclipse/</link>
		<comments>http://www.jeremyjohnsononline.com/2008/03/23/designers-view-of-eclipse/#comments</comments>
		<pubDate>Mon, 24 Mar 2008 02:03:03 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[IA]]></category>
		<category><![CDATA[interaction]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/2008/03/23/designers-view-of-eclipse/</guid>
		<description><![CDATA[As a Designer, I sometimes need to evaluate different technologies and platforms from a Designer&#8217;s perspective. Why is it important to get a Designer&#8217;s view? As Designers we can quickly be boxed in with inflexible UI layers, unusable sets of standard patterns, and the inability to create a great experience. By reviewing and testing, we [...]]]></description>
			<content:encoded><![CDATA[<p><img id="image58" src="http://www.jeremyjohnsononline.com/wp-content/uploads/2008/03/designers_view_eclipse.jpg" alt="Designer's view of eclipse" /></p>
<p>As a Designer, I sometimes need to evaluate different technologies and platforms from a Designer&#8217;s perspective. Why is it important to get a Designer&#8217;s view? As Designers we can quickly be boxed in with inflexible UI layers, unusable sets of standard patterns, and the inability to create a great experience.  By reviewing and testing, we can determine the pros and cons of a given technology solution.  In honor of Eclipsecon 2008 ;-) I&#8217;ve put together a presentation on a popular application platform &#8211; the Eclipse RCP.<br />
<span id="more-57"></span><br />
Eclipse has it&#8217;s roots as a development IDE, and while that&#8217;s very efficient for  developers, for non-developers it&#8217;s not very user-friendly. For this particular technology I broke up the potential problems into four groups: Visual Style, Structure, Usability, and Focus. These were four areas where Eclipse had problems, when looking across a large number of Eclipse based applications.</p>
<p><strong>The Designers View of Eclipse:</strong></p>
<div style="width:425px;text-align:left" id="__ss_318863"><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=designers-view-of-eclipse-1206322383562201-2"/><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=designers-view-of-eclipse-1206322383562201-2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object>
<div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;"><a href="http://www.slideshare.net/?src=embed"><img src="http://static.slideshare.net/swf/logo_embd.png" style="border:0px none;margin-bottom:-5px" alt="SlideShare"/></a> | <a href="http://www.slideshare.net/jeremy/designers-view-of-eclipse?src=embed" title="View 'Designer&#39;s view of Eclipse' on SlideShare">View</a> | <a href="http://www.slideshare.net/upload?src=embed">Upload your own</a></div>
</div>
<p>To be fair, they are trying to fix these issues, and some very smart developer/designers are creating good applications using Eclipse. But, projects without proper UI layer specialists (Designers and Developers) will default to the problems listed out above. From a Designer&#8217;s view, it&#8217;s not easy to get a great application out of Eclipse.</p>
<p>One great presentation out of Eclipsecon 2008 is from Morten Moeller, titled:  &#8220;<a href="http://www.eclipsecon.org/2008/?page=sub/&#038;id=73">Designing Business and Technical User Interfaces in Eclipse RCP Applications</a>&#8221; which basically states current Eclipse User Interfaces could use some work, and how to made them better &#8211; with technical examples of how the presentation layer works.</p>
<p>This is not to say that Eclipse, as a platform is not capable of great things, but just that current popular Eclipse patterns that seem to be prevalent across most Eclipse based applications are not great from a Design/usability perspective</p>
<p>Remember, while the Designer&#8217;s view is very important (after all I&#8217;m a Designer ;-) there are other business needs that weigh the overall solution. Such as: development time, current skill set, scalability, etc&#8230;</p>
<p>With experience becoming an important factor in differentiating products, having a flexible UI layer is becoming a major factor when choosing a technology to base your product on, so if you&#8217;re part of a team evaluating different technologies, make sure your team takes into account the Designer&#8217;s view.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2008/03/23/designers-view-of-eclipse/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Revealing Interfaces</title>
		<link>http://www.jeremyjohnsononline.com/2008/03/06/revealing-interfaces/</link>
		<comments>http://www.jeremyjohnsononline.com/2008/03/06/revealing-interfaces/#comments</comments>
		<pubDate>Thu, 06 Mar 2008 05:03:02 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[how to]]></category>
		<category><![CDATA[interaction]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/2008/03/06/revealing-interfaces/</guid>
		<description><![CDATA[If you&#8217;re an Interaction Designer, I&#8217;m sure you&#8217;ve noticed a new design pattern in the past year &#8211; one that doesn&#8217;t really seem to have a proper name yet. In fact, you&#8217;re probably already incorporating this pattern into your designs. It seems like almost every major redesign is leveraging this pattern to help hide complexity: [...]]]></description>
			<content:encoded><![CDATA[<p><img id="image54" src="http://www.jeremyjohnsononline.com/wp-content/uploads/2008/03/revealing_interfaces.jpg" alt="Reveling Interfaces" /></p>
<p>If you&#8217;re an Interaction Designer, I&#8217;m sure you&#8217;ve noticed a new design pattern in the past year  &#8211; one that doesn&#8217;t really seem to have a proper name yet. In fact, you&#8217;re probably already incorporating this pattern into your designs. It seems like almost every major redesign is leveraging this pattern to help hide complexity: Amazon, Linkedin, TripAdvisor &#8211; and sites like Target, Google, and Yahoo have been using it for awhile. It&#8217;s a design pattern I&#8217;m calling &#8220;Revealing Interfaces&#8221;.</p>
<p><span id="more-56"></span></p>
<div style="width:425px;text-align:left" id="__ss_294655"><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=revealing-interfaces-web-1204776471553822-2"/><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=revealing-interfaces-web-1204776471553822-2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object>
<div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;"><a href="http://www.slideshare.net/?src=embed"><img src="http://static.slideshare.net/swf/logo_embd.png" style="border:0px none;margin-bottom:-5px" alt="SlideShare"/></a> | <a href="http://www.slideshare.net/jeremy/revealing-interfaces-web?src=embed" title="View 'Revealing Interfaces Web' on SlideShare">View</a> | <a href="http://www.slideshare.net/upload?src=embed">Upload your own</a></div>
</div>
<p>I have a habit of taking screenshots of interesting UIs. I have a large collection that I browse through for inspiration when creating something new. I started the above presentation to help provide some context for what I was trying to do with some of my own Designs.  I&#8217;d been interested in reveling interfaces and recently I came across a couple of pieces that when put together gave me the idea to help better explain this pattern. </p>
<p>The first was when John Maeda <a href="http://www.flickr.com/photos/jeremyjohnson/sets/72157600754458232/">came to my work</a> to give a talk. While reading &#8220;The laws of Simplicity&#8221; I came across this quote:</p>
<p>â€œHiding complexity through ingenious mechanical doors or tiny display screens is an overt form of deception. If the deceit feels less like malevolence, more like magic, then hidden complexities become more of a treat than a nuisance.â€</p>
<p>I like the fact that while a revealing interface could harm traditional usability heuristics by &#8220;hiding&#8221; away functionality, once someone actually uses the interface, they could be delighted by the options revealed to them.</p>
<p>The second was when around the same time I saw a post &#8220;<a href="http://www.janchipchase.com/blog/archives/2007/12/hiding_complexi_1.html">Hiding Complexity</a>&#8221; over at one of my favorite blogs (<a href="http://www.janchipchase.com/">future perfect by: Jan Chipchase</a>). These two photos so elegantly demonstrate what the purpose of a revealing interface is: <strong>removing initial complexity</strong>.</p>
<p><img id="image55" src="http://www.jeremyjohnsononline.com/wp-content/uploads/2008/03/hiding.jpg" alt="hiding.jpg" /></p>
<p>At it&#8217;s most basic, it&#8217;s really something as simple as a drop down menu on a website. But in the last year or so, with more highly skilled people at the helm, pushing the limits of XHTML/CSS/JavaScript/AJAX it&#8217;s becoming much more.</p>
<p>No longer are the days of waiting for a full page load just to update your status. With a single click you have access to power user features that used to be buried three pages deep. An entire site can be navigated from the main page, without overloading the front page with tabs or links. </p>
<p>The interface becomes more fluid, interactive, and more like a conversation. In some places it can even read your mind ;-) &#8220;Yes, Netflix I was wondering what the plot of &#8220;reign over me&#8221; was, thanks!&#8221;</p>
<p>Along with these new reveling interface patterns comes a new budding visual language to denote when something can reveal more information &#8211; and when does it just take you to a new page? I&#8217;m sure there are a new pile of accessibility concerns with the extra levels of DHTML and JavaScript &#8211; and how does usability change, when you can&#8217;t really ask the question &#8220;where would you click&#8230;&#8221; or &#8220;what do you expect&#8230;&#8221;?</p>
<p>Please take a look at the embedded presentation, hopefully this post can help start defining this pattern and get the conversation going &#8211; and feel free to start that conversation below in the comments :-)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2008/03/06/revealing-interfaces/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>When is it too simple?</title>
		<link>http://www.jeremyjohnsononline.com/2007/07/11/when-is-it-too-simple/</link>
		<comments>http://www.jeremyjohnsononline.com/2007/07/11/when-is-it-too-simple/#comments</comments>
		<pubDate>Wed, 11 Jul 2007 14:39:17 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/2007/07/11/when-is-it-too-simple/</guid>
		<description><![CDATA[Yesterday I got to hear John Maeda speak at Sabre as part of the Wundermind series of speakers. I&#8217;ve read John&#8217;s book (The Laws of Simplicity), and really enjoyed it. He gave a great presentation &#8211; it&#8217;s rare to hear someone who really gets both technology and design (and he&#8217;s met Paul Rand!). So when [...]]]></description>
			<content:encoded><![CDATA[<p><img id="image49" src="http://www.jeremyjohnsononline.com/wp-content/uploads/2007/07/too_simple.jpg" alt="Too Simple?" /></p>
<p>Yesterday I got to hear <a href="http://weblogs.media.mit.edu/SIMPLICITY/">John Maeda</a> <a href="http://www.flickr.com/photos/jeremyjohnson/sets/72157600754458232/">speak at Sabre</a> as part of the Wundermind series of speakers. I&#8217;ve read John&#8217;s book (<a href="http://lawsofsimplicity.com/">The Laws of Simplicity</a>), and really enjoyed it. He gave a great presentation &#8211; it&#8217;s rare to hear someone who really gets both technology and design (and he&#8217;s met <a href="http://acg.media.mit.edu/events/rand/ideamag.html">Paul Rand</a>!).  </p>
<p>So when is simple, too simple?  A great quote near the beginning of John&#8217;s book reads: &#8220;Imagine a world in which software companies simplified their programs every year by shipping with 10% fewer features at 10% higher cost due to the expense of simplification.&#8221; Maeda uses the iPod as an example of a product that has succeeded with this model. I also see this in the iPhone.  As a new iPhone owner, I&#8217;ve been able to discover some great ways Apple&#8217;s removed features, without diminishing the experience, and simplified the iPhone UI.</p>
<p><span id="more-48"></span></p>
<p>As part of a User Experience department that supports products that are 10-20 years old, you can imagine the complexity that has crept into the products over the years (and most of those years were without a Designer&#8217;s touch!). Every year new features are &#8220;needed&#8221; to keep-up with the competition and look good in a comparison matrix. As someone who strives to simplify UIs, and create great experiences, I&#8217;ve learned a thing or two from the iPhone. </p>
<p>The iPhone has really delighted me at every turn. I&#8217;ve read a lot about what people feel was left out of the iPhone. I&#8217;d like to show how in one case removing a feature, actually improved the experience.</p>
<p>Copy &#038; paste. The iPhone does not have any copy &#038; paste functionality. This always shows up on the list of iPhone &#8220;wants&#8221;. How can a Smartphone work without it! Smartly, Apple reinvented what copy &#038; paste should be on a phone:</p>
<p><strong>1) Phone Number in a SMS</strong></p>
<p>When you get a phone number in a SMS, it&#8217;s blue and underlined. This is the standard click (or tap I guess) to call you see on the web. But, what if you don&#8217;t want to call the number?  Maybe you want to copy it to a contact, or SMS the number.  Added to the UI  only on lines with a phone number is a little blue arrow that when tapped shows the most common tasks you would do with a phone number: call, SMS, add new contact, add to current contact.</p>
<p><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/blUpyyCRUSw"></param> <embed src=" http://www.youtube.com/v/blUpyyCRUSw" type="application/x-shockwave-flash" width="425" height="350"></embed></object></p>
<p><strong>2) Emailing a link to someone</strong></p>
<p>Sharing is built into the phone, no need to copy and paste. When you&#8217;re on a page just tap &#8220;share&#8221; and a email is started for you! In this case &#8211; the traditional method would be: copy link, switch to mail app, open new mail, paste link &#8211; that&#8217;s four steps reduced to one.</p>
<p><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/9rry6FV2zpA"></param> <embed src=" http://www.youtube.com/v/9rry6FV2zpA" type="application/x-shockwave-flash" width="425" height="350"></embed></object></p>
<p><strong>3) Emailing a YouTube link</strong></p>
<p>Same as #2, you&#8217;re able to share a youtube link as well.</p>
<p><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/BhlLa4zLcoc"></param> <embed src=" http://www.youtube.com/v/BhlLa4zLcoc" type="application/x-shockwave-flash" width="425" height="350"></embed></object></p>
<p><strong>4) Common address information</strong></p>
<p>The iPhone &#8220;knows&#8221; you. It knows you from your address book, notes and more.</p>
<p><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/qSJ46ogamQo"></param> <embed src=" http://www.youtube.com/v/qSJ46ogamQo" type="application/x-shockwave-flash" width="425" height="350"></embed></object></p>
<p><strong>5) Content from Notepad</strong></p>
<p>It even surprised me by autofilling something I had just typed into notepad!</p>
<p><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/V0Go7OJfpTA"></param> <embed src=" http://www.youtube.com/v/V0Go7OJfpTA" type="application/x-shockwave-flash" width="425" height="350"></embed></object></p>
<p>By looking at tasks people perform on a mobile device &#8211; Apple has created a &#8220;smarter&#8221; device. Something small, that hides the complexity and &#8220;just works&#8221;.  Although I&#8217;m sure someone will point out &#8211; this is really a &#8220;forced workflow&#8221; leaving out power users. I think it&#8217;s a fare trade-off, simplicity is a feature. Tell marketing to add it to the comparison matrix :-)</p>
<p>Also check out Fellow Sabre employee Stephen Anderson&#8217;s <a href="http://www.poetpainter.com/thoughts/article/7-user-experience-lessons-we-can-learn-from-the-iphone">7 User Experience Lessons We Can Learn from the iPhone</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2007/07/11/when-is-it-too-simple/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>SXSW Interactive Brain-dump</title>
		<link>http://www.jeremyjohnsononline.com/2007/03/14/sxsw-interactive-brain-dump/</link>
		<comments>http://www.jeremyjohnsononline.com/2007/03/14/sxsw-interactive-brain-dump/#comments</comments>
		<pubDate>Wed, 14 Mar 2007 18:52:57 +0000</pubDate>
		<dc:creator>Jeremy Johnson</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[IA]]></category>
		<category><![CDATA[me]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.jeremyjohnsononline.com/2007/03/14/sxsw-interactive-brain-dump/</guid>
		<description><![CDATA[SXSWi has come and gone again, this was my fourth time to attend and it just keeps getting bigger every year. When I first visited in 2003 (or was it 2002?) Bruce Sterling was still throwing SXSWi parties at his home and FROG Design hosted everyone in their office, unfortunately that doesn&#8217;t really scale to [...]]]></description>
			<content:encoded><![CDATA[<p><img id="image41" src="http://www.jeremyjohnsononline.com/wp-content/uploads/2007/03/sxsw_brain_dump.jpg" alt="SXSW Brain Dump" /></p>
<p>SXSWi has come and gone again, this was my fourth time to attend and it just keeps getting bigger every year.  When I first visited in 2003 (or was it 2002?) <a href="http://en.wikipedia.org/wiki/Bruce_Sterling">Bruce Sterling</a> was still throwing SXSWi parties at his home and <a href="http://www.frogdesign.com/">FROG Design</a> hosted everyone in their office, unfortunately that doesn&#8217;t really scale to the size of the conference today.  But, the panels were as diverse and interesting as ever &#8211; and I came back with the following brain-dump:</p>
<p><span id="more-42"></span></p>
<p>(note to readers, I tend to take notes in bullet-point format, which is reflected below)</p>
<h2>Emerging Social and Technology Trends</h2>
<p>(More detailed notes <a href="http://www.lukew.com/ff/entry.asp?470">here</a>)</p>
<ul>
<li>Check out: <a href="http://outside.in/">http://outside.in/</a></li>
<li>Check out: <a href="http://www.indie911.com/">http://www.indie911.com/</a></li>
<li>The age of sharing your information publicly is here to stay, it&#8217;s normal for &#8220;kids&#8221; &#8211; they wonder why you are not blogging what you had for lunch</li>
<li>Room to add more control, maybe you only connect with people you&#8217;ve met with in real life (RFID to Linkedin?)</li>
<li>In india you can send an email to a post address, and a post to an email address</li>
</ul>
<h2>Getting to Consistency</h2>
<p>(More detailed notes <a href="http://blastfirst.wordpress.com/2007/03/11/panel-getting-to-consistency-dont-make-your-users-think/">here</a>)</p>
<ul>
<li>If working on a suite of applications, look for &#8220;connection points&#8221; &#8211; the apps don&#8217;t need to be 100% consistent</li>
<li>You don&#8217;t need to be consistent just for legacy sake</li>
<li>There is room for some discovery within a UI</li>
<li>Sometimes a clean break is the best way, when upgrading applications</li>
<li>Remember: Goals no Features!!!</li>
<li>Integrate what is valuable and saves time</li>
<li>See when your users evolve. Adobe noticed things like RAW workflow, widescreen monitors, etc&#8230; Breaks based on user habits</li>
<li>Watch out for reusing objects if they don&#8217;t provide the same experience</li>
<li>Design for workflows</li>
<li>Capture what the user wants to do</li>
<li>Adobe found users all most always select the advanced mode when given a choice, they feel like they are missing out on something if the don&#8217;t</li>
<li>Pick up on user patterns</li>
<li>BMW has consistent &#8220;signatures&#8221; from the MINI Cooper to the top of the line BMW</li>
<li>All about goals, again &#8211; goals not features</li>
<li>Make it easy for developers and designers to stay consistent with guidelines and toolkits</li>
<li>Use peer review to pick up on problems in consistency</li>
</ul>
<h2>Stop designing products</h2>
<p>(More detailed notes <a href="http://www.rubberbandwound.com/2007/03/11/sxsw_day_one_wrapup/">here</a>)</p>
<ul>
<li>Design from the outside in</li>
<li>Check out: <a href="http://www.flickr.com/about/">http://www.flickr.com/about/</a></li>
</ul>
<h2>Designing for Convergent Devices</h2>
<p>(More detailed notes <a href="http://www.nonlocality.com/it/2007/03/11/panel-designing-for-convergent-devices/">here</a>)</p>
<ul>
<li>10ft design vs. 2ft design vs. 6in design</li>
<li>Control, Branding, Standards, Trust</li>
<li>Check out: <a href="http://www.zannel.com/">http://www.zannel.com/</a></li>
<li>Look for the &#8220;Golden Pathway&#8221;</li>
<li>Remember the ecosystem (not just your product)</li>
<li>Support: Environment, Activities, and Device (Display, Input, and Platform)</li>
<li>Remember things like: Screen, Font and Colors, Input Devices, Focus States, User Feedback, Task Complexity, and User Expectations</li>
<li>Have the web be a companion for mobile.  If possible have users fill out information on the web, then interact with the mobile experience.</li>
<li>Keep it simple, get only NEEDED data upfront &#8211; and continue to fill out a user profile as your &#8220;relationship&#8221; goes on</li>
</ul>
<h2>Mobile Design</h2>
<p>(you can <a href="http://www.blueflavor.com/blog/mobile/sxsw_2007_mobile_web_presentation.php">download the full presentation here</a>)</p>
<ul>
<li>60% mobile users access mobile data once a month</li>
<li>XHTML-MP is WAP 2.0</li>
<li>Common devices to test for: Nokia S40, RAZR, Treo, &#8220;Give-a-ways&#8221;</li>
<li>Check out: <a href="http://www.deviceanywhere.com/">http://www.deviceanywhere.com/</a></li>
</ul>
<h2>Moving Corporations to Accessibility</h2>
<ul>
<li>Use tools like: Contests, Awards, and Classes</li>
<li>You need a evangelist within the company</li>
<li>Have guidelines and resources for your developers</li>
<li>Check out: <a href="http://www.webaim.org/">http://www.webaim.org/</a></li>
</ul>
<h2>Get Unstuck</h2>
<p>(More detailed notes <a href="http://www.samfelder.com/2007/03/12/sxsw-get-unstuck-moving-from-10-to-20/">here</a>)</p>
<ul>
<li>Make sure your team feels like they are doing good work, being productive, and fulfilled</li>
<li>Have an open process, open up to other teams in your organization</li>
<li>Work with Design towards a goal</li>
<li>&#8220;Just add value&#8221;</li>
<li>Stop too much process</li>
<li>Find the middle ground between user needs and business goals</li>
<li>Have one member of your team always focused on the end solution</li>
</ul>
<h2>Mobile Application Design Challenges</h2>
<p>(More detailed notes <a href="http://www.odannyboy.com/blog/new_archives/2007/03/sxsw_2007_mobil.html">here</a>)</p>
<ul>
<li>Check out: <a href="http://radar.net/">http://radar.net/</a></li>
<li>Remember to be aware of the number of clicks in the UI</li>
<li>Check out: <a href="http://www.smallsurfaces.com/">http://www.smallsurfaces.com/</a></li>
</ul>
<h2>Design Patterns</h2>
<p>(More detailed notes <a href="http://www.lukew.com/ff/entry.asp?484">here</a>)</p>
<ul>
<li>Focus on solutions, encourage good behavior, and remember &#8211; &#8220;reusable&#8230;&#8221;</li>
<li>Most of the good design work is done in the &#8220;fuzzy middle&#8221; (hard to provide guidelines for)</li>
</ul>
<h2>Customer Service is the New Marketing</h2>
<p>(More detailed notes <a href="http://vantan.org/archives/2007/03/customer_servic.php">here</a>)</p>
<ul>
<li>Check out: <a href="http://www.zappos.com">http://www.zappos.com</a></li>
<li>Zappos has a &#8220;Culture Book&#8221; they put out each year</li>
<li>A recurring job title I keep seeing from the panelists is &#8220;Community Manager&#8221;</li>
<li>Find ways to get closer to the customer, let your call centers talk to design/development</li>
<li>Admit mistakes</li>
<li>On one forum 60% of questions are answered by users</li>
<li>30boxes &#8211; 3 employees, 30,000 users, forum only help &#8211; they spend about 4-6hrs a week on customer service</li>
</ul>
<h2>Truth about Mobile</h2>
<p>(More detailed notes <a href="http://randomdrew.typepad.com/randomdrew/2007/03/the_truth_about.html">here</a>)</p>
<ul>
<li>Does your mobile strategy substitute, or complement your experience?</li>
<li>Advertising is not ready yet</li>
<li>Data usage is almost there (currently 32%), better to be ready sooner then later</li>
</ul>
<p>SXSW also had a good mix of keynote speakers, with <a href="http://www.wonderlandblog.com/wonderland/2007/03/sxsw_will_wrigh.html">Will Wright&#8217;s</a> being my favorite of the bunch.</p>
<p>Overall it was a great experience &#8211; I learned a lot, while being inspired to do more.</p>
<p>So there you have it. My brain dump, remember podcasts and vidcasts will be available <a href="http://2007.sxsw.com/coverage/">here</a> in the near future.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.jeremyjohnsononline.com/2007/03/14/sxsw-interactive-brain-dump/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

