<?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>InterfaceThis</title>
	<atom:link href="http://interfacethis.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://interfacethis.com</link>
	<description>Dave Feldman rants about product design</description>
	<lastBuildDate>Fri, 06 Jan 2012 23:32:43 +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>One Year Later: Is HTML5 Ready for Prime Time vs. Native? No.</title>
		<link>http://interfacethis.com/2012/one-year-later-is-html5-ready-for-prime-time-vs-native-no/</link>
		<comments>http://interfacethis.com/2012/one-year-later-is-html5-ready-for-prime-time-vs-native-no/#comments</comments>
		<pubDate>Fri, 06 Jan 2012 22:47:02 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[ios]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[native]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=252</guid>
		<description><![CDATA[A year ago I published a series of posts about HTML5 mobile web frameworks: Sencha Touch, jQuery Mobile, jQTouch, and Titanium Mobile. Setting aside differences among frameworks, I tackled the question of native vs. web and gave a nuanced answer, even a hesitant yes. A year later I&#8217;ve abandoned HTML5 and begun rebuilding my app in Objective-C. And while the long answer is still nuanced, the short answer is easy: if you want to build a great mobile app, go native. One caveat: I haven&#8217;t written native Android code, so this is based primarily on iPhone development. But I believe... <a href="http://interfacethis.com/2012/one-year-later-is-html5-ready-for-prime-time-vs-native-no/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p>A year ago I published a <a title="Comparing Mobile Web (HTML5) Frameworks: Sencha Touch, jQuery Mobile, jQTouch, Titanium" href="http://interfacethis.com/2011/adventures-in-html5-part-one/">series of posts</a> about HTML5 mobile web frameworks: <a href="http://www.sencha.com/products/touch">Sencha Touch</a>, <a href="http://jquerymobile.com/">jQuery Mobile</a>, <a href="http://jqtouch.com/">jQTouch</a>, and <a href="http://www.appcelerator.com/products/titanium-mobile-application-development/">Titanium Mobile</a>. Setting aside differences among frameworks, I <a title="Is HTML5 Ready for Prime Time vs. Native? (Mobile App Development)" href="http://interfacethis.com/2011/is-html5-ready-for-prime-time-vs-native/">tackled the question of native vs. web </a>and gave a nuanced answer, even a hesitant yes. A year later I&#8217;ve abandoned HTML5 and begun rebuilding my app in Objective-C. And while the long answer is still nuanced, the short answer is easy: if you want to build a great mobile app, go native.<span id="more-252"></span></p>
<p>One caveat: I haven&#8217;t written native Android code, so this is based primarily on iPhone development. But I believe much of I have to say here will apply there as well.</p>
<h3>Performance</h3>
<p>Web technologies simply don&#8217;t perform as well as native. Animations stutter. <a href="https://github.com/jquery/jquery-mobile/issues/2884">Pages jump or blank out when they reload</a>. And that&#8217;s on iPhone, which is the best case. Die-hard web developers will point out that these problems are solvable, and they may be. But solving them requires effort and potentially compromises (e.g., a <em>Load More</em> button instead of a continuously scrolling list). Which would you rather spend your time on: building great functionality or fighting a non-native platform so it feels native?</p>
<p>There&#8217;s no question that the speed of mobile browsers will continue to improve, and frameworks will evolve to take better and better advantage of them. At some point performance may cease to be such an issue. I wouldn&#8217;t expect that to happen in 2012.</p>
<h3>Documentation</h3>
<p>Efficient development requires great documentation. Apple&#8217;s is comprehensive. Several great books will get you up to speed. (I used <em><a href="http://www.bignerdranch.com/book/ios_programming_the_big_nerd_ranch_guide_nd_edition_">iOS Programming: The Big Nerd Ranch Guide</a></em>.) And <a href="http://stackoverflow.com/">Stack Overflow</a> and other community sites have answers to nearly any question.</p>
<p>I can&#8217;t say the same for HTML5 frameworks. Sencha Touch has extensive documentation but I encountered holes, areas lacking detail or even high-level explanation. The community was similarly hit or miss. And my attempt to pay for support was, strangely, ignored. This is worse for a large framework like Sencha&#8217;s than for something smaller like jQuery Mobile (whose documentation was also underwhelming) because you&#8217;re spending less time interacting with the browser and more working with the framework&#8217;s own middle layers.</p>
<p>Sencha Touch is open source. Given enough time, I might have solved my problems by digging into the code. But again, the goal in choosing HTML5 is to avoid learning new platforms. If I&#8217;m going to accept a learning curve why not learn a well-documented, widely-used platform instead of a specialized middle layer?</p>
<h3>Tools</h3>
<p>Apple&#8217;s <a href="http://developer.apple.com/xcode/">Xcode</a> is good. There&#8217;s a drag-and-drop tool for assembling user interfaces, a debugger for inspecting and stepping through your code, smart code completion, optimization tools, and integrated documentation. I understand you get <a href="http://developer.android.com/sdk/eclipse-adt.html">similar functionality developing for Android</a> in Eclipse.</p>
<p>There are integrated development environments (IDEs) designed for web developers: <a href="http://aptana.com/">Aptana</a>, <a href="http://netbeans.org/">NetBeans</a>, <a href="http://panic.com/coda/">Coda</a>, and others. In my experience they&#8217;re not as polished as Xcode and lack tight integration with frameworks. Debugging in a desktop browser has improved tremendously in recent years but you&#8217;re debugging the JavaScript, not the HTML5 framework. Your bugs may trigger errors deep in the framework code, which you then have to decipher.</p>
<p>And web debugging in the iPhone Simulator or on the device itself is another story. You can print messages to the console but you can&#8217;t set breakpoints or step through your code. And just because your app works in desktop Safari doesn&#8217;t mean it&#8217;ll work on device. So there&#8217;s a lot of poking around in the dark that simply doesn&#8217;t happen with native development.</p>
<h3>Conclusion: Yeah, It&#8217;s Still Nuanced</h3>
<p>I&#8217;ve been hard on HTML5 frameworks here. We need them. They&#8217;ve taken on the important, challenging task of making it easy for web developers to create interactive mobile experiences. They&#8217;re developing for moving targets that differ in their capabilities and limitations. They&#8217;re constantly at a disadvantage because there&#8217;s an additional layer between them and the OS. The work they&#8217;re doing is incredible. As the frameworks mature they&#8217;re turning their attention to documentation. In the meantime, <a href="http://msdn.microsoft.com/library/windows/apps/br211386">Microsoft</a> and <a href="http://labs.adobe.com/technologies/edge/">Adobe</a> seem to be shifting focus away from their proprietary frameworks onto HTML5, so better developer tools may be around the corner.</p>
<p>If you&#8217;re building a mobile web experience, an HTML5 framework may be just the ticket. If you&#8217;re<em> </em>building an app whose requirements are modest or it needn&#8217;t feel native, ditto. Sencha Touch is heavy but gets the job done. Once jQuery Mobile irons out a few more bugs it&#8217;ll probably be my favorite because it&#8217;s &#8220;webbier&#8221; and lighter-weight than Sencha.</p>
<p>But if your goal is to produce a polished, native-feeling app then I recommend going native (or native with embedded HTML content as appropriate). That&#8217;s partly the designer&#8217;s desire to create something pixel-perfect. But it&#8217;s also about efficiency: better to tackle the one-time learning curve than to wage an ongoing battle against limited documentation, performance issues, and underwhelming tools.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2012/one-year-later-is-html5-ready-for-prime-time-vs-native-no/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>I&#8217;m Leaving AOL. Here&#8217;s What&#8217;s Next.</title>
		<link>http://interfacethis.com/2011/im-leaving-aol-heres-whats-next/</link>
		<comments>http://interfacethis.com/2011/im-leaving-aol-heres-whats-next/#comments</comments>
		<pubDate>Wed, 21 Dec 2011 20:24:30 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[aol]]></category>
		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=238</guid>
		<description><![CDATA[In early 2010 I left my job as Director, User Experience for Yahoo! Messenger. After three years I was ready for something smaller, where I&#8217;d have more of an impact and spend less time fighting big company politics. But something was brewing at AOL. It had a portfolio of embarrassingly bad products and was admitting that publicly. Tim Armstrong (AOL&#8217;s CEO) and Brad Garlinghouse (head of Consumer Applications and famous for his &#8220;Peanut Butter Manifesto&#8221; criticizing Yahoo&#8217;s lack of focus) pulled in Matte Scheinker to fix the problem. Matte &#8212; my former manager, ongoing mentor, and one of my absolute... <a href="http://interfacethis.com/2011/im-leaving-aol-heres-whats-next/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://interfacethis.com/wp/wp-content/uploads/2011/12/laptop-dolores-640.jpg"><img class="size-medium wp-image-245 alignright" src="http://interfacethis.com/wp/wp-content/uploads/2011/12/laptop-dolores-640-300x225.jpg" alt="" width="300" height="225" /></a>In early 2010 I left my job as Director, User Experience for Yahoo! Messenger. After three years I was ready for something smaller, where I&#8217;d have more of an impact and spend less time fighting big company politics.</p>
<p>But something was brewing at <a href="http://www.aol.com/">AOL</a>. It had a portfolio of embarrassingly bad products and was admitting that publicly. <a href="http://about.me/timarmstrong">Tim Armstrong</a> (AOL&#8217;s CEO) and <a href="http://about.me/bradgarlinghouse">Brad Garlinghouse</a> (head of Consumer Applications and famous for his &#8220;<a href="http://online.wsj.com/public/article/SB116379821933826657-0mbjXoHnQwDMFH_PVeb_jqe3Chk_20061125.html">Peanut Butter Manifesto</a>&#8221; criticizing Yahoo&#8217;s lack of focus) pulled in <a href="http://about.me/scheinker">Matte Scheinker</a> to fix the problem. Matte &#8212; my former manager, ongoing mentor, and one of my absolute favorite people &#8212; invited me to help found his new Consumer Experience team. The opportunity was too intriguing to turn down. So I weathered the inevitable, &#8220;<a href="http://mediajunkie.com/2010/aol-really/">AOL? Really!?</a>&#8221; from friends and family and signed on in May 2010.</p>
<p>Armed with authority over AOL&#8217;s product review process, the three of us &#8212; Matte, <a href="http://about.me/christiancrumlish">Christian Crumlish</a>, and me &#8212; set out to turn terrible experiences into great ones. We consulted, pleaded, designed, brainstormed, fixed typos, debugged code, cleaned trash out of conference rooms. It was exhilarating. The team grew and flourished; by fall 2011 there were seven of us. In the course of it I got to lead the <a href="http://techcrunch.com/2011/07/11/redesigning-techcrunch-we-picked-this-logo-just-to-piss-you-off/">TechCrunch redesign</a>, build an internal social network, and meet and earn the respect of product teams across the company.</p>
<p><span id="more-238"></span>But with its acquisition of the <a href="http://www.huffingtonpost.com/">Huffington Post</a>, AOL gained new leadership for its core Media business and no longer looked to Consumer Experience for help. It&#8217;s no secret I have disagreements with their approach to product development; I can&#8217;t say whether they&#8217;ll succeed, just that it&#8217;s not for me.</p>
<p>Meanwhile, Brad Garlinghouse is leaving AOL. The organization he leaves behind includes incredibly talented people &#8212; folks I&#8217;ve been privileged to know, work with, and learn from in the past twenty months.  I hope AOL figures out how to retain this top talent in the wake of Brad&#8217;s and <a href="http://techcrunch.com/2011/12/12/kiersten-hollars-moves-from-aol-comm-vp-to-andreessen-partner/">other high-level departures</a>.</p>
<p>So as of a few weeks ago we decommissioned the Consumer Experience team. I wish Christian, <a href="http://about.me/kristasanders">Krista</a>, and <a href="http://about.me/tusman">Jason</a> (my partner in crime on TechCrunch, various adventures in commerce, and gratuitous pie purchases) luck on the AIM team; I know AIM recognizes the kick-ass talent they&#8217;re getting. Same for <a href="http://about.me/gabimoore">Gabi</a> and AOL Mail, and for <a href="http://about.me/piquancy">Amy</a> and HuffPost. But I&#8217;m leaving. (As is Matte; but he&#8217;s still planning his next move.)</p>
<p>I considered staying on in another role. Great people, interesting work, millions of users. A Product role that wouldn&#8217;t require a paragraph to explain. And there are people I&#8217;m especially sad to leave behind. Yet if anything my time at AOL has increased my desire to go small…really small. The greatest, most rewarding moments in my career have been tight teams of amazing people in a room, building stuff. So I&#8217;ve been exploring startup ideas of my own, and talking to existing startups that excite me. Which of those paths is right? Tough call. The former is the Bay Area version of the American Dream but also scary. The latter is safer but lacks the chance to start from zero with my own vision. Neither is a bad choice.</p>
<p>Several years ago I read Gail Sheehy&#8217;s <em><a href="http://www.amazon.com/Passages-Predictable-Crises-Adult-Life/dp/034547922X/ref=sr_1_1?s=books&amp;ie=UTF8&amp;qid=1324335780&amp;sr=1-1">Passages</a></em>. Its central thesis may be obvious today: there&#8217;s no such thing as a final adult self. We go through as many changes in our adult lives as we do in childhood, despite society&#8217;s expectation that we know who we are by the age of 25. These changes happen via punctuated equilibrium: periods of relative calm followed by times of upheaval. Those who fight the change cripple themselves via a sort of self-induced emotional binding.</p>
<p>I&#8217;ve spent the last five years collecting pieces of the next me. At Yahoo! I honed my design skills, led a team, and learned how to navigate organizational politics. At AOL I became a product manager, built leadership skills, expanded my network, grew a thicker skin, and found my ego. (Yes, that&#8217;s a good thing. A friend says I&#8217;ll succeed because of my humility and she&#8217;s probably right &#8212; but that&#8217;s a counterbalance to ego, not an alternative.)</p>
<p>There are things missing from that list. Sales. Marketing. Business development. Things I can&#8217;t anticipate. Things that will blindside me, crush me. I&#8217;ll figure them out, or turn to others for help. But I see the rough outline of the next me, and it&#8217;s time to make it happen. The best, maybe the only way to do that is to put my money where my mouth is and build something from scratch.</p>
<p>And I&#8217;m ready. I&#8217;m an interaction designer, a product manager, a visual designer, a front-end developer. I can manage a team, pitch an idea. I have so much more to learn and I&#8217;m excited about that too. I don&#8217;t want to do it by myself, but I won&#8217;t have to: I have talented, passionate, amazing people cheering me on, offering advice and support, and eventually (I hope) joining the effort.</p>
<p>Here I go.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/im-leaving-aol-heres-whats-next/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>The Frog and the Bunny: A Parable</title>
		<link>http://interfacethis.com/2011/the-frog-and-the-bunny/</link>
		<comments>http://interfacethis.com/2011/the-frog-and-the-bunny/#comments</comments>
		<pubDate>Fri, 18 Nov 2011 04:08:06 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Software]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=231</guid>
		<description><![CDATA[The Frog and the Bunny took a road trip to San Francisco. The Frog drove, because he&#8217;d done this before. The Bunny navigated, looking for a balance of speed and scenery. They drove all day. They drove all night. They stopped at a Denny&#8217;s in St. Louis. As they dug into their Moons Over My Hammy the Bunny said, &#8220;Tomorrow we&#8217;ll make for Denver. It&#8217;s a flat, boring ride but then we&#8217;ll have the plains behind us and see some mountains!&#8221; Just then a long, furry head emerged from the booth behind them. &#8220;I couldn&#8217;t help overhearing,&#8221; said the Ferret.... <a href="http://interfacethis.com/2011/the-frog-and-the-bunny/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p>The Frog and the Bunny took a road trip to San Francisco. The Frog drove, because he&#8217;d done this before. The Bunny navigated, looking for a balance of speed and scenery.</p>
<p>They drove all day. They drove all night. They stopped at a Denny&#8217;s in St. Louis. As they dug into their Moons Over My Hammy the Bunny said, &#8220;Tomorrow we&#8217;ll make for Denver. It&#8217;s a flat, boring ride but then we&#8217;ll have the plains behind us and see some mountains!&#8221;</p>
<p>Just then a long, furry head emerged from the booth behind them. &#8220;I couldn&#8217;t help overhearing,&#8221; said the Ferret. &#8220;I&#8217;m headed to San Francisco too. May I join you?&#8221; The Bunny looked worried but the Frog said, &#8220;Sure! I can see from your trucker cap that you&#8217;ll add value to our little adventure.&#8221;</p>
<p>The Ferret slipped into their booth, grabbing a mouthful of Bunny&#8217;s dinner. &#8220;All this speculation about routes is silly,&#8221; he said. &#8220;Look out that window! Hundreds, thousands of cars headed off on their own adventures. Surely our best route will be the one with the most cars. Let&#8217;s count how many go each way and follow the biggest crowd.&#8221;</p>
<p>&#8220;That&#8217;s a great idea,&#8221; said the Frog. And they headed south.<span id="more-231"></span></p>
<p>They drove all day. They drove all night. They stopped at an Applebee&#8217;s in San Antonio. As the Ferret shoveled overcooked peas into his mouth the Bunny said, &#8220;I don&#8217;t understand. We&#8217;re following the traffic and I get that. But how do we know we&#8217;ll reach San Francisco?&#8221;</p>
<p>The Ferret smiled. &#8220;It&#8217;s not important! What do we gain by setting some arbitrary destination? How do we know we&#8217;ll even like San Francisco when we get there? Let&#8217;s focus on the here and now, use the information around us to guide our decisions.&#8221;</p>
<p>Bunny thought about this. &#8220;But if we don&#8217;t have any greater destination, what&#8217;s to stop us from wander–&#8221;</p>
<p>&#8220;While we&#8217;re at it,&#8221; interjected the Ferret, &#8220;what are you contributing to this trip? I&#8217;m watching the cars, Frog is driving, all you&#8217;re doing is looking at the map and suggesting routes that don&#8217;t match the traffic.&#8221;</p>
<p>The Bunny sat silently, grateful that an angry rabbit is visually indistinguishable from a calm one.</p>
<p>They drove all day. They drove all night. Bunny looked out the window as they passed cities, towns, mountains, strip malls, and deserts. Also more strip malls. They stopped at Burger King in Cheyenne, Cracker Barrel in Nashua, Waffle House in Austin, Chick-fil-a in Atlanta. The Bunny did crosswords.</p>
<p>One morning, as they rocketed east out of Mexico City with the windows down and the Ferret singing along to the radio, the Frog glanced at the back seat and found it empty. &#8220;Where&#8217;s Bunny?&#8221; he asked.</p>
<p>&#8220;Gone,&#8221; said the Ferret. &#8220;Left this morning. He looked angry. Or calm. Said something about San Francisco.&#8221;</p>
<p>&#8220;What an asshole,&#8221; said the Frog.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/the-frog-and-the-bunny/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Mossberg on Jobs: Risk-Taker, Perfectionist, Reductionist</title>
		<link>http://interfacethis.com/2011/mossberg-on-jobs-risk-taker-perfectionist-reductionist/</link>
		<comments>http://interfacethis.com/2011/mossberg-on-jobs-risk-taker-perfectionist-reductionist/#comments</comments>
		<pubDate>Thu, 25 Aug 2011 14:05:23 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[General]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=222</guid>
		<description><![CDATA[Walt Mossberg on Steve Jobs: He did it because he was willing to take big risks on new ideas, and not be satisfied with small innovations fed by market research. He also insisted on high quality and had the guts to leave out features others found essential and to kill technologies, like the floppy drive and the removable battery, he decided were no longer needed. I&#8217;m often hard on Apple. But it&#8217;s because I can be: I hold them to a higher standard than their competition because it&#8217;s feasible to do so. Steve Jobs seems to have led Apple and... <a href="http://interfacethis.com/2011/mossberg-on-jobs-risk-taker-perfectionist-reductionist/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://allthingsd.com/20110824/jobs-leave-a-legacy-of-changed-industries/">Walt Mossberg on Steve Jobs</a>:</p>
<blockquote><p>He did it because he was willing to take big risks on new ideas, and not be satisfied with small innovations fed by market research. He also insisted on high quality and had the guts to leave out features others found essential and to kill technologies, like the floppy drive and the removable battery, he decided were no longer needed.</p></blockquote>
<p>I&#8217;m often hard on Apple. But it&#8217;s because I can be: I hold them to a higher standard than their competition because it&#8217;s feasible to do so. Steve Jobs seems to have led Apple and often the whole industry through his uncanny gut instinct, willingness to take risks, and unerring attention to detail. We need more of that if we are to continue innovating.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/mossberg-on-jobs-risk-taker-perfectionist-reductionist/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Myth of the Average User: Your Mom Knows How to Click and Drag</title>
		<link>http://interfacethis.com/2011/myth-of-the-average-user/</link>
		<comments>http://interfacethis.com/2011/myth-of-the-average-user/#comments</comments>
		<pubDate>Thu, 11 Aug 2011 14:36:04 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[Software]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[personas]]></category>
		<category><![CDATA[research]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=212</guid>
		<description><![CDATA[If there&#8217;s feedback a designer dreads more than Make the logo bigger, it&#8217;s My grandmother wouldn&#8217;t understand that. The correct response, of course, is Really? Let&#8217;s put her in the usability lab and see. Because for all that your CEO loves his grandma he&#8217;s probably insulting her intelligence. It&#8217;s the myth of the Average User. At Yahoo! we called them Chief Household Officers (an unfortunate warping of a legitimately identified market segment). Maybe you call them Stay-at-Home Moms or Women 30-45 — somehow they&#8217;re always female. They&#8217;re a catch-all excuse for dumbing down products. We try to get them in... <a href="http://interfacethis.com/2011/myth-of-the-average-user/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p>If there&#8217;s feedback a designer dreads more than <em>Make the logo bigger</em>, it&#8217;s <em>My grandmother wouldn&#8217;t understand that.</em> The correct response, of course, is <em>Really? Let&#8217;s put her in the usability lab and see</em>. Because for all that your CEO loves his grandma he&#8217;s probably insulting her intelligence.</p>
<p>It&#8217;s the myth of the Average User. At Yahoo! we called them Chief Household Officers (an unfortunate warping of a legitimately identified market segment). Maybe you call them Stay-at-Home Moms or Women 30-45 — somehow they&#8217;re always female. They&#8217;re a catch-all excuse for dumbing down products. We try to get them in the lab but they end up being smarter and more interesting than we wanted. In fact, we&#8217;ve never met an Average User.<span id="more-212"></span></p>
<p>Perhaps the stereotype is born of helping friends and family with technology problems; or waiting in line behind someone at the ATM; or watching the antics of a fellow cafe customer with fascinated horror. A lot of people are <em>really bad</em> at basic computer tasks. Many don&#8217;t fully understand their filesystems, or the difference between an OS and a Web browser.</p>
<p>But that doesn&#8217;t mean they&#8217;re dumb, or inept. It means they&#8217;ve figured technology out on their own, skipping over many of the underpinnings because they weren&#8217;t relevant. They&#8217;ve spent hours on Facebook and Google and know their way around, but haven&#8217;t had to interact directly with their home directories.</p>
<p>The result is a specific, somewhat predictable set of expectations. Show a user something that acts like Facebook or Google and she&#8217;s likely to figure it out. Show her something that <em>looks</em> like Facebook but acts some other way and she&#8217;ll struggle. Talk to her about friends or newsfeeds or Googling and she&#8217;ll get it. Talk about RAM and browser windows and WebKit and not only won&#8217;t she get it, she may not care.</p>
<p>Why bother pointing this out? Because it affects the success of your product. Design for the mythical Average User and you&#8217;ll have something that&#8217;s neither compelling nor efficient to use. At worst it&#8217;ll be insulting. At best it&#8217;ll limit your chances of success: not only are you designing for people who don&#8217;t exist, you&#8217;re also creating an environment where it&#8217;s easy to justify uninteresting functionality and bland visual design.</p>
<p>Instead, design for real people. Even if your product is meant for everyone, find a more interesting subset with clearly identified needs. Understand their expectations for how a digital product works and capitalize on them. Keep it focused. And respect your users enough to differentiate between experience and intelligence.</p>
<p>I often use Dropbox as an example here. Everyone I work with uses it (technical and non-technical alike). It&#8217;s simple to understand and easy to get started. It just works. It explains itself in layman&#8217;s terms, but isn&#8217;t insulting. Its feature set is small and focused, but it functions flexibly enough for power users to work around its apparent limitations (e.g. using symlinks to work outside the Dropbox folder). It solves one problem and solves it well.</p>
<p>Remember that novice users, once hooked, become power users and need efficiency. Conversely, novices aren&#8217;t necessarily your first customer. If your target user isn&#8217;t technologically adventurous, the way to his heart is through those who influence him. For example, Gmail&#8217;s global rise was fueled in part by tech geeks who eventually convinced friends and family to switch. Facebook started on college campuses and expanded from there.</p>
<p>The next time an absent relative is invoked to justify a decision, challenge it. Get the relative on the line, find a real person to serve as a replacement, turn to the data…whatever it takes to make sure you&#8217;re designing for real people. Because mythical users can only generate mythical revenue.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/myth-of-the-average-user/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Redesigning TechCrunch: We Picked this Logo Just to Piss You Off</title>
		<link>http://interfacethis.com/2011/redesigning-techcrunch/</link>
		<comments>http://interfacethis.com/2011/redesigning-techcrunch/#comments</comments>
		<pubDate>Thu, 14 Jul 2011 14:07:30 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[General]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=209</guid>
		<description><![CDATA[I&#8217;m excited to announce the redesign and relaunch of TechCrunch.com, a popular tech news site with over 40 million visitors per month. I&#8217;ve been leading the project as product manager and design lead since January. For details check out my launch post over on TechCrunch.]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m excited to announce the redesign and relaunch of <a href="http://techcrunch.com">TechCrunch.com</a>, a popular tech news site with over 40 million visitors per month. I&#8217;ve been leading the project as product manager and design lead since January. For details <a href="http://techcrunch.com/2011/07/11/redesigning-techcrunch-we-picked-this-logo-just-to-piss-you-off/">check out my launch post over on TechCrunch</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/redesigning-techcrunch/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>AOL? Really! My First Year as an AOLer</title>
		<link>http://interfacethis.com/2011/aol-really-my-first-year-as-an-aoler/</link>
		<comments>http://interfacethis.com/2011/aol-really-my-first-year-as-an-aoler/#comments</comments>
		<pubDate>Thu, 12 May 2011 17:01:53 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[aol]]></category>
		<category><![CDATA[job]]></category>
		<category><![CDATA[turnaround]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=192</guid>
		<description><![CDATA[Time flies. It&#8217;s been a year since I joined AOL as part of Matte Scheinker&#8216;s Consumer Experience team. At the time my teammate and fellow ex-Yahoo Christian Crumlish wrote a post, &#8220;AOL?!? Really?&#8221; that captured the disbelief and shock among friends and relatives who heard about our new gig. And honestly, it wasn&#8217;t what I&#8217;d expected my next move would be when I decided to leave Yahoo! a few months earlier. The AOL described to me was in the process of reinventing itself: an aging internet icon that acknowledged the need for fundamental change, that didn&#8217;t shy away from the... <a href="http://interfacethis.com/2011/aol-really-my-first-year-as-an-aoler/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; min-height: 19.0px} -->Time flies. It&#8217;s been a year since I joined <a href="http://aol.com">AOL</a> as part of <a href="http://matte.org/">Matte Scheinker</a>&#8216;s Consumer Experience team. At the time my teammate and fellow ex-Yahoo <a href="http://mediajunkie.com/">Christian Crumlish</a> wrote a post, &#8220;<a href="http://mediajunkie.com/2010/aol-really/">AOL?!? Really?</a>&#8221; that captured the disbelief and shock among friends and relatives who heard about our new gig. And honestly, it wasn&#8217;t what I&#8217;d expected my next move would be when I decided to leave Yahoo! a few months earlier.</p>
<p>The AOL described to me was in the process of reinventing itself: an aging internet icon that acknowledged the need for fundamental change, that didn&#8217;t shy away from the dark corners of its product portfolio. The role was intriguing too. The Consumer Experience mission: to &#8220;ensure that AOL only builds and launches the highest-quality products.&#8221; The three of us were &#8220;ninja janitors,&#8221; cleaning up the mess of AOL. We might be accomplished designers and product strategists &#8212; but no job was beneath us. The promise: be a part of AOL&#8217;s turnaround. Develop standards and practices. Dig in with product teams in need of help and make things happen. Learn from industry veterans. Become better product managers, designers, and most of all businessmen in the process. Learn how to make change happen.<span id="more-192"></span></p>
<p>And what a year it&#8217;s been. I&#8217;ve designed, helped code, and launched AOL&#8217;s employee phone book, project database, and social network. I&#8217;ve worked with teams across AOL (<a href="http://mapquest.com">Mapquest</a>, <a href="http://www.aim.com/">AIM</a>, <a href="http://phoenix.aol.com">AOL Mail</a>, <a href="http://www.truveo.com/">Truveo</a>, <a href="http://help.aol.com">AOL Help</a>, and more) to help them refine their experiences &#8212; and received tremendous gratitude in the process. I&#8217;ve managed agency contracts. I&#8217;ve crisscrossed the country on trips to New York and Dulles, VA. I&#8217;ve presented to <a href="http://about.me/timarmstrong">Tim Armstrong</a>, AOL&#8217;s CEO. I&#8217;ve given a talk on HTML5 and CSS3 to other product managers. Currently I&#8217;m coordinating the relaunch of a major media site.</p>
<p>I&#8217;ve also found typos and tracked down the right people to fix them. I&#8217;ve spent hours graphing the distance from top-of-page to top-of-content on AOL and non-AOL sites. I&#8217;ve found tiny problems with rounded corners and helped fix them. I&#8217;ve given ad-hoc Photoshop lessons. I&#8217;ve cleaned up other people&#8217;s trash in conference rooms. I&#8217;ve bugged our CIO about problems with our internal systems. I&#8217;ve eaten at Chili&#8217;s because I couldn&#8217;t find my way around suburban Virginia and I was hungry.</p>
<p>All of these things have been satisfying in their own way. Presenting to the CEO is pretty exciting. But finding a typo and knowing how to get it fixed is <em>empowering.</em> And the breadth of tasks &#8212; combined with the constantly-shifting landscape at AOL today &#8212; means I encounter new challenges, new things to learn, every week.</p>
<p>Of course there are bad days. Really bad days. Days when I&#8217;ve been reduced to speechlessness by legacy bureaucracy, technology that was obsolete ten years ago, lack of motivation, organizational whiplash as we acquire new companies, or (perhaps worst of all) good people beaten down by years of corporate stagnation. It is both better and worse because I can&#8217;t ignore these things, because I&#8217;m here to help fix them.</p>
<p>I don&#8217;t hear a lot of &#8220;AOL?!? Really?&#8221; anymore. Usually it&#8217;s more like, &#8220;AOL? I think I heard something about them,&#8221; or, &#8220;AOL? There&#8217;s something going on over there, isn&#8217;t there?&#8221; The tide has turned. We&#8217;ve been noticed for our innovative brand and for new products like <a href="http://phoenix.aol.com">AOL Phoenix</a>, <a href="http://itunes.apple.com/us/app/id429911302?mt=8">Moviefone for iPad</a>, <a href="http://www.playbyaol.com/">PLAY for Android</a>, and the forthcoming <a href="http://editions.com/">Editions for iPad</a>. We&#8217;ve made a big bet with <a href="http://patch.com">Patch</a>, expanding into hundreds of communities. We&#8217;ve made some strategic acquisitions, like <a href="http://techcrunch.com">TechCrunch</a> and <a href="http://huffingtonpost.com">Huffington Post</a> on the media side and Thing Labs, Rally Up, and <a href="http://about.me">about.me</a> in consumer applications. My bad days have grown fewer, further between, and less bad. We&#8217;ve attracted a ton of talent. We&#8217;ve renovated our offices. We&#8217;ve become the market leader in toilet humor. There&#8217;s an energy that just wasn&#8217;t there a few months ago.</p>
<div id="attachment_199" class="wp-caption aligncenter" style="width: 310px"><a href="http://interfacethis.com/wp/wp-content/uploads/2011/05/aol-office2.jpg"><img class="size-medium wp-image-199" title="AOL's new digs in Palo Alto" src="http://interfacethis.com/wp/wp-content/uploads/2011/05/aol-office2-300x225.jpg" alt="AOL's new digs in Palo Alto" width="300" height="225" /></a><p class="wp-caption-text">AOL&#39;s new digs in Palo Alto</p></div>
<p>&nbsp;</p>
<div id="attachment_198" class="wp-caption aligncenter" style="width: 310px"><a href="http://interfacethis.com/wp/wp-content/uploads/2011/05/aol-office.jpg"><img class="size-medium wp-image-198" title="We're dog friendly" src="http://interfacethis.com/wp/wp-content/uploads/2011/05/aol-office-300x224.jpg" alt="We're dog friendly" width="300" height="224" /></a><p class="wp-caption-text">We&#39;re dog friendly</p></div>
<p>&nbsp;</p>
<div id="attachment_200" class="wp-caption aligncenter" style="width: 310px"><a href="http://interfacethis.com/wp/wp-content/uploads/2011/05/aol-whiteboards.jpg"><img class="size-medium wp-image-200" title="Our kick-ass whiteboard walls" src="http://interfacethis.com/wp/wp-content/uploads/2011/05/aol-whiteboards-300x224.jpg" alt="Our kick-ass whiteboard walls" width="300" height="224" /></a><p class="wp-caption-text">Our kick-ass whiteboard walls</p></div>
<p>To suggest we&#8217;d won would be incredible hubris. We&#8217;ve fixed so much, but there&#8217;s more to be fixed. Turnarounds are hard, and we&#8217;ve got our work cut out for us. Yet the progress we&#8217;ve made is exciting, things continue changing for the better, and I&#8217;m glad to be here. AOL is an intriguing and unique place to be right now, and the bet I made in joining has certainly paid off.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/aol-really-my-first-year-as-an-aoler/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Uniform vs. Custom UI: Why Consistent Design Doesn&#8217;t Matter</title>
		<link>http://interfacethis.com/2011/consistency-doesnt-matter/</link>
		<comments>http://interfacethis.com/2011/consistency-doesnt-matter/#comments</comments>
		<pubDate>Tue, 26 Apr 2011 15:55:19 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[Software]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=182</guid>
		<description><![CDATA[The debate over UI standards is as old as the standards themselves: should developers build custom controls and a custom look &#38; feel, or stick to human interface guidelines? The Web accelerated that debate, as developers brought Web interactions into their desktop apps and vice versa; more recently, Apple&#8217;s App Store and its own mixing of iOS and Mac standards has further invigorated it. Let&#8217;s get one thing out of the way: creating a great standard experience is a hell of a lot easier than creating a great custom one. Even some of the best custom apps (e.g. Twitter for... <a href="http://interfacethis.com/2011/consistency-doesnt-matter/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p>The debate over UI standards is as old as the standards themselves: should developers build custom controls and a custom look &amp; feel, or stick to human interface guidelines? The Web accelerated that debate, as developers brought Web interactions into their desktop apps and vice versa; more recently, Apple&#8217;s App Store and its own mixing of iOS and Mac standards has further invigorated it.</p>
<p>Let&#8217;s get one thing out of the way: creating a great <em>standard </em>experience is a hell of a lot easier than creating a great custom one. Even some of the best custom apps (e.g. Twitter for Mac) fail to handle some key interactions (e.g. distinguishing between an active and an inactive window). Your mockup may look splendid in Photoshop but in sidestepping your platform&#8217;s own UI toolkit you&#8217;ve assumed the responsibility for all sorts of details (e.g. accessibility). In other words, don&#8217;t go down the custom route unless you&#8217;re willing to put a <em>lot</em> of effort into making design a differentiator for your product (as Twitter has clearly done).</p>
<p>Anyone who&#8217;s worked with me knows I enjoy designing custom controls — widgets tailored to the task at hand. Generally these tasks <em>could</em> be accomplished via some combination of standard UI elements, and the argument against them is often about consistency. In &#8220;<a href="http://www.tidbits.com/article/11873">User Interface Conservatism versus Liberalism</a>,&#8221; Adam Engst writes,</p>
<blockquote><p>&#8230;the real problem with UI liberalism is that it reduces the usability of the platform as a whole&#8230;The more you use applications in concert—and many of us spend our entire days at our Macs—the more you benefit from the consistent user interfaces designed by UI conservatives. And when applications rely on consistent user interfaces, they become easier to learn as well, which translates directly to the bottom line when we’re talking about productivity applications.</p></blockquote>
<p>Much of his argument is good. But ultimately I disagree: <strong>consistency doesn&#8217;t matter</strong>. In 2005 Jared Spool wrote, &#8220;<a href="http://www.uie.com/brainsparks/2005/09/15/consistency-in-design-is-the-wrong-approach/">Consistency in Design is the Wrong Approach</a>&#8220;:<span id="more-182"></span></p>
<blockquote><p>The problem with thinking in terms of consistency is that those thoughts focus purely on the design and the user can get lost. “<em>Is what I’m designing consistent with other things we’ve designed (or others have designed)?</em>” is the wrong question to ask.</p>
<p>Instead, the right question is, “<em>Will the user’s </em><strong>current knowledge</strong><em> help them understand how to use what I’m designing?</em>” <a href="http://www.uie.com/articles/design_intuitive/">Current knowledge</a> is the knowledge the user has when they approach the design. It’s the sum of all their previous experiences with relevant products and designs.</p></blockquote>
<p>As an example, consider Apple scrollbars:</p>
<div id="attachment_183" class="wp-caption aligncenter" style="width: 369px"><a href="http://interfacethis.com/wp/wp-content/uploads/2011/04/scrollbars.png"><img class="size-full wp-image-183 " title="Apple scrollbars on the Mac" src="http://interfacethis.com/wp/wp-content/uploads/2011/04/scrollbars.png" alt="Apple scrollbars on the Mac" width="359" height="325" /></a><p class="wp-caption-text">Apple scrollbars on the Mac</p></div>
<p>iTunes and iPhoto&#8217;s custom scrollbars are visually inconsistent with the standard Mac one. Yet I doubt this creates any usability problems because they retain the same layout and a set of core visual cues. They all rely on the same current knowledge.</p>
<p>Easy example, you say: that&#8217;s just visual design. What about differing interactions? Encountering a Mac scrollbar for the first time, a Windows user might be confused because the up arrow is at the bottom. Here, the visual design serves as as guide: that up arrow is nearly identical to the one found on Windows. So the user&#8217;s current knowledge of Windows allows her to find it after a moment&#8217;s hesitation.</p>
<p>But that&#8217;s where things get nuanced. That hesitation is fine if she uses a Mac occasionally. But if she&#8217;s constantly switching back and forth she&#8217;s also repeatedly re-training herself, constantly incurring that cognitive load. And however inconvenient <em>that</em> might be, at least she can recognize two different contexts; it would be far worse for a Windows app to use Mac-like scrollbars. Here, consistent <em>placement</em> matters because it&#8217;s how we achieve consistent <em>expectations.</em></p>
<p>It gets worse: suppose your app uses custom code to generate a snazzy scrollbar. You put both arrows at the end since that&#8217;s the Mac standard. That Windows user changes her Mac&#8217;s system preference so the scroll arrow is at the top. Every scrollbar <em>except your app&#8217;s</em> changes to obey the new setting. Yet another example of why custom UI is difficult.</p>
<p>Today, nearly every mouse has a scroll wheel, and many trackpads support a two-finger scroll gesture. I question whether most people use the scroll arrows at all. Twitter agrees:</p>
<div id="attachment_184" class="wp-caption aligncenter" style="width: 218px"><a href="http://interfacethis.com/wp/wp-content/uploads/2011/04/twitter-scrollbar.png"><img class="size-full wp-image-184" title="Twitter for Mac's scrollbar" src="http://interfacethis.com/wp/wp-content/uploads/2011/04/twitter-scrollbar.png" alt="Twitter for Mac's scrollbar" width="208" height="288" /></a><p class="wp-caption-text">Twitter for Mac&#39;s scrollbar</p></div>
<p>So that&#8217;s bad, right? Well, not necessarily. If most people don&#8217;t use scroll arrows few will miss them (or even notice they&#8217;re gone); and given Twitter&#8217;s more tech-savvy audience that number is even smaller. For those who do, a complete lack of arrows is probably better than non-standard ones since it&#8217;s a clearer difference. The visual design helps too: the scroll thumb retains is distinctive shape to prompt user expectations, but its appearance is notably different from any of Apple&#8217;s, providing a cue that this is a different sort of scrollbar as the user switches between apps. The lack of scroll track enhances that further. It&#8217;s a risk, but one with justification.</p>
<p>Design is hard. The more of it you take on, the harder it becomes. There&#8217;s nothing wrong with custom UI when it&#8217;s done well — that is, when you design for current knowledge — but that takes time, effort, and probably testing. Apple, Microsoft, and a number of excellent Web UI frameworks have done that work for us, allowing us to create superb experiences without worrying about the details of how a dropdown works. For many developers that will be good enough; better to focus on solving new problems, perhaps with the occasional custom control when a novel task demands it. If you <em>do</em> create a fully custom UI, go in with your eyes open: get a phenomenal, detail-oriented designer; accept that the UI will require significant effort; and leave time for usability testing. Recognize the trade-off: you&#8217;ll get a distinctive brand and carefully-crafted emotional impact, but you&#8217;ll invest a lot of resources to get there.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/consistency-doesnt-matter/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Refreshing the Website: Creating a Better, Single-Page Experience with Ajax</title>
		<link>http://interfacethis.com/2011/rethink-the-website/</link>
		<comments>http://interfacethis.com/2011/rethink-the-website/#comments</comments>
		<pubDate>Sat, 02 Apr 2011 18:07:37 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[interaction]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=171</guid>
		<description><![CDATA[Since the term &#8220;Ajax&#8221; burst onto the scene in 2005, it has changed the Internet. Apps became more interactive; desktop paradigms migrated to the web and evolved in the process; and the Web as a platform began to come into its own. That change hasn&#8217;t affected the core of how a website works. Sure, modules load in asynchronously; some sites use Ajax to load in notifications; and Facebook Like buttons mysteriously appear as you scroll. The typical blog or brochure site is a page-based experience; why overcomplicate things when the Web is, at heart, a page-based medium? But mobile apps... <a href="http://interfacethis.com/2011/rethink-the-website/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p>Since the term &#8220;Ajax&#8221; burst onto the scene in 2005, it has changed the Internet. Apps became more interactive; desktop paradigms migrated to the web and evolved in the process; and the Web as a platform began to come into its own.</p>
<p>That change hasn&#8217;t affected the core of how a website works. Sure, modules load in asynchronously; some sites use Ajax to load in notifications; and Facebook Like buttons mysteriously appear as you scroll. The typical blog or brochure site is a page-based experience; why overcomplicate things when the Web is, at heart, a page-based medium?</p>
<p>But mobile apps have popularized a new level of page-based interaction. Screens animate smoothly in and out while navigation stays put, not only providing delight but preserving context and reinforcing the user&#8217;s position in the information hierarchy. Instead of jarring blankness between screens, users see loading animations.</p>
<h3>The No-Refresh Site</h3>
<p>Maybe it&#8217;s time we embraced this approach for the desktop Web: the no-refresh website. Even with fast load times a full page refresh disrupts context. With Ajax we can leave navigational elements in place while loading in new content. We can bring that content in via animations that reinforce how we&#8217;re moving through the information hierarchy of the site. And even with animations, such actions are liable to feel lighter-weight and thus encourage exploration &#8212; not least of all because a Back action will be so immediate. <span id="more-171"></span></p>
<p>Granted, such a site is far more code-intensive than its traditional cousin. But a lot of that code has been written: <a href="http://jqtouch.com/">jQTouch</a> and <a href="http://jquerymobile.com">jQuery Mobile</a> already take multiple HTML pages and create an animated, Ajax-based experience &#8212; for the most part with no additional JavaScript. They provide a perfect basis for a desktop-friendly framework.</p>
<p>Let&#8217;s call it <strong>page.js</strong>. I took the liberty of reserving <a href="http://pagejs.com">pagejs.com</a> and pointing it at a brand new GitHub repository so we can start hacking on it right away. Here&#8217;s how it will work:</p>
<ol>
<li>You write your site&#8217;s HTML as you would today, adding a little extra info to tag specific page elements. (jQuery Mobile uses HTML5 data attributes, e.g. <code>&lt;div data-role="content"&gt;</code> to define different regions on the page.)</li>
<li>When the site first loads, page.js reads and modifies your HTML, wrapping the content area of your page in a movable, scrolling element ready to slide off the screen and adjusting your internal links appropriately. (When performance is critical, this could happen server-side and be cached.)</li>
<li>When a visitor clicks an internal link, the new page is loaded via Ajax while a loading animation displays onscreen. The current page slides out of view and the new one slides in. Navigation areas stay put as appropriate.</li>
<li>Browser Back/Forward history is preserved using the URL&#8217;s hash component (everything after the #). Hitting the Back button slides the previous page back into view. (You can see a very simple <a href="http://interfacethis.com/portfolio/">example of this on my portfolio</a> using Ben Alman&#8217;s <a href="http://benalman.com/projects/jquery-hashchange-plugin/">hashchange plugin</a>.)</li>
</ol>
<h3>New Possibilities</h3>
<p>But that&#8217;s just the beginning. A single-page site teems with potential.</p>
<p>As a visitor scrolls your home page, why not <strong>load in likely drill-down pages behind the scenes</strong>? Tie in your Google Analytics data to identify the most likely destinations after the current page. Break it down by demographic if you want.</p>
<p>Novel navigational paradigms become possible. Previous pages needn&#8217;t slide <em>all</em> the way offscreen but could peek out to <strong>preserve context, creating a sort of modern breadcrumb</strong>:</p>
<p><a href="http://interfacethis.com/wp/wp-content/uploads/2011/04/back-stack.png"><img class="size-full wp-image-174 alignnone" title="back-stack" src="http://interfacethis.com/wp/wp-content/uploads/2011/04/back-stack.png" alt="" width="500" height="343" /></a></p>
<p>And, we can use <a href="http://diveintohtml5.org/offline.html">HTML5&#8242;s offline capabilities</a> to improve performance on pages that can&#8217;t be cached in full: keep navigational and other static elements on the client and use those cached versions to assemble pages on the fly.</p>
<h3>Challenges</h3>
<p>Right now the barrier is too high for most sites to do this. It requires too much expertise and effort until page.js comes into being. (Anyone?)</p>
<p>Permalinks present a challenge. Ajax-based navigation relies on the hash component of the URL (http://my-site.com/my-page#<strong>hash-component</strong>). It&#8217;s included in a bookmark but isn&#8217;t transmitted to the server. So it can be part of a permalink, but (a) requires the cooperation of a JavaScript-enabled client and (b) isn&#8217;t indexed by Google and other search engines. Thankfully there&#8217;s a solution: Google has created a <a href="http://code.google.com/web/ajaxcrawling/docs/getting-started.html">standard for making Ajax links crawlable</a> that, when used, will keep your no-refresh site searchable. And it gets better: browsers are beginning to implement the <a href="http://diveintohtml5.org/history.html">HTML5 History API</a>, which is a far more elegant solution to the problem. So you can do it today with a little JavaScript, and tomorrow with a lot less.</p>
<p>These challenges are manageable and can be solved once, at the framework level. So <strong>step one is creating <a href="http//pagejs.com">page.js</a></strong> and getting it into the hands of site authors. Step three: profit.</p>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/rethink-the-website/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Adventures in HTML5: Mobile WebKit Performance Optimization</title>
		<link>http://interfacethis.com/2011/adventures-in-html5-mobile-webkit-performance-optimization/</link>
		<comments>http://interfacethis.com/2011/adventures-in-html5-mobile-webkit-performance-optimization/#comments</comments>
		<pubDate>Sun, 06 Mar 2011 18:40:33 +0000</pubDate>
		<dc:creator>Dave</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[ios]]></category>
		<category><![CDATA[webkit]]></category>

		<guid isPermaLink="false">http://interfacethis.com/?p=168</guid>
		<description><![CDATA[My previous post took a high-level look at HTML5 vs. native for mobile apps, concluding that HTML5 is ready for prime time but not necessarily for everyone. I also mentioned some of the work I did in order to get my app, Pints, to perform acceptably. Commenter Jouni (thanks for reading!) wondered about the details: what did I try, and what seemed to work? I won&#8217;t claim to have used an incredibly rigorous process. As previously mentioned, I chose Sencha Touch as my framework almost exclusively based on its performance. At least on iPhone, I threw out PhoneGap in favor of... <a href="http://interfacethis.com/2011/adventures-in-html5-mobile-webkit-performance-optimization/">Read More &#8594;</a>]]></description>
			<content:encoded><![CDATA[<p>My previous post took a <a title="Is HTML5 Ready for Prime Time vs. Native? (Mobile App Development)" href="http://interfacethis.com/2011/is-html5-ready-for-prime-time-vs-native/">high-level look at HTML5 vs. native for mobile apps</a>, concluding that HTML5 <em>is</em> ready for prime time but not necessarily for everyone. I also mentioned some of the work I did in order to get my app, <a href="http://pintsapp.com">Pints</a>, to perform acceptably. Commenter <a href="http://www.onelifetolove.co.uk/2011">Jouni</a> (thanks for reading!) wondered about the details: what did I try, and what seemed to work?</p>
<p>I won&#8217;t claim to have used an incredibly rigorous process. As previously mentioned, I chose <a href="http://sencha.com/products/touch">Sencha Touch</a> as my framework almost exclusively based on its performance. At least on iPhone, I threw out <a href="http://www.phonegap.com/">PhoneGap</a> in favor of a lightweight custom Cocoa wrapper. (I&#8217;m particularly skeptical about whether that ended up mattering, but it did allow me to create a better experience during app load by waiting until the page finishes loading before fading in the WebKit view.)</p>
<p>Inspired by Thomas Fuchs&#8217; &#8220;<a href="http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/">Making an iPad HTML5 app &amp; making it really fast</a>,&#8221; I then did the following:<span id="more-168"></span></p>
<ul>
<li>Pints was routinely hanging for 10-15 seconds whenever the data stores for its lists got updated. Using the built-in WebKit debugger in desktop Safari (which was hanging for 3-5 seconds) I did a bunch of fairly trial-and-error exploration and finally tracked the problem down. Sencha Touch support grouped lists with an index bar, like the iPhone address book — a great feature which apparently slows to a crawl with larger lists. I reluctantly turned that off, reverting to flat lists and eliminating the problem.</li>
<li>I gutted both my own CSS and Sencha&#8217;s, stripping out all images, CSS3 gradients, text shadow effects, and some of the CSS RGBA alpha transparency. The result kept layout-related rules but was mostly unstyled in all other respects. I also pulled out the CSS3 @font-face call, reverting from Ubuntu Sans to Helvetica. This served as my baseline and was acceptably fast for <em>most</em> page-slide and list-scroll operations.</li>
<li>I then selectively turned things back on based on their importance to Pints&#8217; look &amp; feel and reasonable hypotheses about their potential performance impact. I assumed my static wood-grain background image would be less problematic than the semi-transparent gradient applied to each list item. I left out the custom font because it wasn&#8217;t <em>that</em> important. And so on. Each time I turned on another item I ran the app on the device and evaluated, ultimately arriving at a UI that was close to the original but far faster, and not appreciably slower than the baseline.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://interfacethis.com/2011/adventures-in-html5-mobile-webkit-performance-optimization/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

