<?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>Mike Eng</title>
	<atom:link href="http://mike-eng.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://mike-eng.com</link>
	<description>Interaction Designer</description>
	<lastBuildDate>Fri, 20 Jan 2012 03:48:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Re-using Old Calendars</title>
		<link>http://mike-eng.com/re-using-old-calendars/</link>
		<comments>http://mike-eng.com/re-using-old-calendars/#comments</comments>
		<pubDate>Mon, 02 Jan 2012 14:17:01 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=2294</guid>
		<description><![CDATA[On resourcefulness and unseen rhythms.]]></description>
			<content:encoded><![CDATA[<div class="clear blog"><div id="attachment_2295" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/re-using-old-calendars.jpg"><img src="http://mike-eng.com/wp-content/uploads/re-using-old-calendars-300x223.jpg" alt="1984 Calendar" title="1984 Calendar" width="300" height="223" class="size-medium wp-image-2295" /></a><p class="wp-caption-text">1984 Calendar. Photo Credit: <a href='http://www.flickr.com/photos/smays/3593165142/'>Steve Mays</a></p></div></p>
<p>Ready to throw out your wall calendar from 2011 and buy a new one for 2012? Here&#8217;s another option if you&#8217;re resourceful and eccentric enough to try it: get an old calendar from 1984 to use for this year and save the 2011 calendar for 2022. In both cases, the dates will line up appropriately. You can consult <a href="http://www.timeanddate.com/calendar/repeating.html">timeanddate.com</a> to find old calendars that will match up with a given year.</p>
<p>It&#8217;s a trick I learned from my grandfather who <a href="http://bruggerfuneralhomes.com/obituaries/8505">passed away last year</a>. For those of us who don&#8217;t have a multi-decade stockpile of old calendars lying around, Wisebread.com suggests <a href="http://www.wisebread.com/old-calendars-never-really-go-out-of-date">shopping for old calendars on eBay or Craigslist</a>. My grandfather did it the old-fashioned way. He was a radiologist by trade who worked his way through school by working on farms. Farming had been a part of his life ever since, and he kept a gentleman&#8217;s farm in Ripley, NY. When he moved to an assisted living facility, my uncle took over much of the farm maintenance, but my grandfather would still go on excursions to do work on the farm until his last days. The calendar trick was a good example of his understanding that in a system like a farm, there is no waste &#8211; only resources. Also, it shows a kind of poetry that everything happens in cycles. In our day-to-day, most of us only conceptualize cycles of a week or a month or a year. But sometimes we recognize an underlying rhythm of a larger scale.
</div>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/re-using-old-calendars/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>New Work: Logic of a Dynamic Schedule</title>
		<link>http://mike-eng.com/new-work-developing-a-dynamic-schedule-in-wordpress/</link>
		<comments>http://mike-eng.com/new-work-developing-a-dynamic-schedule-in-wordpress/#comments</comments>
		<pubDate>Wed, 21 Dec 2011 18:32:17 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[new work]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=2289</guid>
		<description><![CDATA[My latest adventure in logic and array manipulation.]]></description>
			<content:encoded><![CDATA[<div class="clear blog">
<div id="attachment_2280" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/better-world-by-design-website-2011-schedule-full.png"><img src="http://mike-eng.com/wp-content/uploads/better-world-by-design-website-2011-schedule-full-300x240.png" alt="Better World by Design - Dynamic Schedule" title="Better World by Design - Dynamic Schedule" width="300" height="240" class="size-large wp-image-2280" /></a><p class="wp-caption-text">Dynamic Schedule page</p></div></p>
<p>Here&#8217;s an example of how we pushed <a href="http://wordpress.org">WordPress</a> to the limit &#8211; achieving some of the power of <a href="http://drupal.org">Drupal</a> while maintaining the top-notch usability of WordPress. One of the more involved pieces of the theme was a dynamic schedule of conference activities.</p>
<p>View the full project description to see how we did it: <a href="developing-a-dynamic-schedule-in-wordpress">Developing a Dynamic Schedule in WordPress</a>.
</div>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/new-work-developing-a-dynamic-schedule-in-wordpress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Open Source Web Development Software</title>
		<link>http://mike-eng.com/using-open-source-software-for-the-better-world-by-design-website/</link>
		<comments>http://mike-eng.com/using-open-source-software-for-the-better-world-by-design-website/#comments</comments>
		<pubDate>Sat, 27 Aug 2011 13:46:36 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[process]]></category>
		<category><![CDATA[webdevelopment]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=2172</guid>
		<description><![CDATA[A tribute to open source software for web development.]]></description>
			<content:encoded><![CDATA[<div style="width:650px;">
<div class="clear"><a href="http://www.abetterworldbydesign.com"><img src="http://mike-eng.com/wp-content/uploads/bwxd-header.png" alt="A Better World by Design conference" title="A Better World by Design conference" width="380" height="70" class="alignnone size-full wp-image-2175" /></a></div>
<div class="clear">
<blockquote>I recently led development of the <a href="http://www.abetterworldbydesign.com">Better World by Design conference website</a>. Here is a post just published on the Better World by Design blog on how we completed the project using open source software.</p></blockquote>
</div>
<div class="clear">In the true collaborative Better World by Design spirit, we&#8217;ve used a handful of open source applications and frameworks in the development of this site. While most open source software is free to use, the defining feature of open source software is the community-based approach it uses for development. As the Free Software Foundation puts it in their <a href="http://www.gnu.org/philosophy/free-sw.html">Free Software Definition</a>, &#8220;&#8216;Free software&#8217; is a matter of liberty, not price. To understand the concept, you should think of &#8216;free&#8217; as in &#8216;free speech,&#8217; not as in &#8216;free beer&#8217;.&#8221;</div>
<div class="clear">
<h2>WordPress</h2>
<p><a href="http://wordpress.org">WordPress</a> is what we use as a content management system for the site. It is, at the time of writing, <a href="http://w3techs.com/technologies/overview/content_management/all">the most popular content management system used on the internet</a>. And, of course, it&#8217;s open source.</div>
<div class="clear">
<h3>A Brief History</h3>
<p>Matt Mullenweg and Mike Little began WordPress by <a href="http://en.wikipedia.org/wiki/WordPress#History">creating a fork of another open source project called b2/cafelog</a>. Mullenweg got a job with <a href="http://www.cnet.com/">CNET</a> and worked on WordPress &#8220;every free moment&#8221; he had. Mullenweg grew WordPress on what he dubbed a &#8220;freemium&#8221; business model. He &#8220;wanted to make money by being a commercial Robin Hood&#8221; with services such as <a href="http://akismet.com/">Akismet</a> (which prevents spam) and <a href="http://en.wordpress.com/features/">WordPress.com</a> (which provides hosting and support for a WordPress installation hosted on their servers), both of which are free for individuals but charge a small fee for businesses. The brilliance of this business model is that it encourages adoption by new users while bringing in money to sustain the project from businesses and users who desire advanced features. See more detail in his <a href="http://mixergy.com/the-biography-of-wordpress-with-matt-mullenweg/">interview on Mixergy.com</a>.</div>
<div class="clear">
<h3>Development</h3>
<p>The <a href="http://wordpress.org/about/">About WordPress</a> page describes WordPress as &#8220;an Open Source project, which means there are hundreds of people all over the world working on it.&#8221; The core development team chats weekly in <a href="http://wpdevel.wordpress.com/weekly-developer-chats/">open meetings on IRC</a>. The team manages the aspects of day-to-day development including source code, timelines, roadmaps, and tickets on <a href="http://core.trac.wordpress.org/">WordPress Trac</a>. Minutes, agendas, and out-of-meeting discussion take place on the <a href="http://wpdevel.wordpress.com/">WordPress Development Updates blog</a>.</p>
<p>It is quite active, with the most recent post: <a href="http://wpdevel.wordpress.com/2011/07/27/wordpress-3-3-proposed-scope/">WordPress 3.3 Proposed scope</a> showing 46 comments. How to contribute as a newcomer (by providing anything from documentation to tech support to development) is clearly laid out in an article in the WordPress Codex: <a href="http://codex.wordpress.org/Contributing_to_WordPress">Contributing to WordPress</a>.</div>
<div class="clear">
<h2>Subversion</h2>
<p>While working on the 2010 site, fellow advisor, Tim and I had a couple of instances in which we inadvertently overwrote each other&#8217;s code changes. It&#8217;s a common problem when using <a href="http://en.wikipedia.org/wiki/File_Transfer_Protocol">FTP</a> to upload code to a server. There are a few different <a href="http://en.wikipedia.org/wiki/Revision_control#Source-management_models">approaches in revision control</a> to alleviate this. Dreamweaver has a <a href="http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7eb9a.html">&#8220;file locking&#8221; a.k.a. &#8220;check in / check out&#8221; feature</a> built in. The issue with &#8220;file locking&#8221; though, is that only one person can work on a file at a time. A more seamless approach of &#8220;version merging&#8221; requires version control software such as <a href="http://subversion.apache.org/">Subversion</a>.</div>
<div class="clear">
<h3>What Does Subversion do?</h3>
<p>The Athletics blog gives a thorough and accessible overview called <a href="http://blog.athleticsnyc.com/on-using-subversion-for-web-projects">&#8220;On Using Subversion for Web Projects&#8221;</a>.  It lists the &#8220;big idea&#8221; of Subversion as:</p>
<ul>
<li>Store (and safe-keep) your project in a repository on a remote server.</li>
<li>Allow multiple users to collaborate on the same code base at the same time.</li>
<li>Keep track of all changes made to a project over time. (Sidenote: This aspect of version control seems very similar to Leopard’s <a href="http://www.apple.com/findouthow/mac/#timemachinebasics">Time Machine</a> feature&#8230;)</li>
</ul>
</div>
<div class="clear">
<h3>Development</h3>
<p>A software firm called <a href="http://www.open.collab.net/">CollabNet</a> created Subversion as an open source project. It currently resides as an Apache Top-Level Project hosted by the non-profit <a href="http://www.apache.org/">Apache Software Foundation</a>.
</div>
<div class="clear">
<h2>Stack Overflow</h2>
<p><a href="http://stackoverflow.com/">Stack Overflow</a> is an indispensable forum (or as they would call it, <em>Q&amp;A site</em>) for programming. The key is that collaborative editing and a ranking system ensure that questions and answers allow questions and answers to be edited / moderated easily and allow good answers to rise to the top. Also, a point system called <a href="http://stackoverflow.com/privileges">&#8220;reputation&#8221;</a> lets users earn privileges to do more on the site. This simple reward turns forum participation into a rewarding and addictive activity.</div>
<div class="clear">
<h3>Community-Driven</h3>
<p>Although privately held, Stack Overflow is about as community-driven as a company can get. <a href="http://www.codinghorror.com/blog/2008/04/help-name-our-website.html">Even the name was chosen by an open vote</a>. The content on the site is released under <a href="http://creativecommons.org/">Creative Commons</a> licenses. Heck, Creative Commons even wrote a <a href="http://wiki.creativecommons.org/Case_Studies/StackOverflow.com">case study about Stack Overflow</a>. And of course, there&#8217;s not much to it without questions and answers submitted by the community. In the <a href="http://www.codinghorror.com/blog/2008/09/stack-overflow-none-of-us-is-as-dumb-as-all-of-us.html">blog post announcing the site&#8217;s launch</a>, co-founder Jeff Atwood closes with &#8220;who cares what I think; my opinion holds no particular weight. I&#8217;m just a member. This is our site.&#8221;</div>
<div class="clear">
<h3>Always Growing</h3>
<p>Out of Stack Overflow grew <a href="http://stackexchange.com/about">Stack Exchange</a>, a network of Q&amp;A sites on a variety of topics. There&#8217;s a &#8220;new site staging zone&#8221; called <a href="http://area51.stackexchange.com/">Area 51</a>, where users can propose ideas for new Stack Exchange sites. In their FAQ, there&#8217;s a <a href="http://area51.stackexchange.com/faq#phases">clearly outlined process</a> from proposal to beta period to full membership.</div>
<div class="clear">
<h2>Tying it all Together with a Simple Example</h2>
<p>After we launched the site, I was trying to resolve a bug with searches for multiple words. I checked the WordPress Codex (documentation) for the <a href="http://codex.wordpress.org/Creating_a_Search_Page#Preserving_Search_Page_Results_and_Pagination">code to properly display search page results</a>. It matched what I had. I put in some debugging code but couldn&#8217;t find anything to get me closer to a solution. Then I <a href="http://stackoverflow.com/questions/6819226/search-results-not-displaying-for-multiple-word-search-in-wordpress">asked a question on Stack Overflow</a>. I had traded several comments with one user who was attempting to find the problem. In the meantime another user offered the solution. It revealed an error in the code that was listed in the WordPress Codex. Then, the user with the answer pointed out that the WordPress Codex is a wiki, so I took the first step that <a href="http://codex.wordpress.org/Contributing_to_WordPress">WordPress suggested I take to contribute</a> &#8211; I <a href="http://codex.wordpress.org/index.php?title=Creating_a_Search_Page&amp;action=history">updated the Codex</a> with this fix.</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/using-open-source-software-for-the-better-world-by-design-website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Best Thing I&#8217;ve Seen in a Long Time</title>
		<link>http://mike-eng.com/the-best-thing-ive-seen-in-a-long-time/</link>
		<comments>http://mike-eng.com/the-best-thing-ive-seen-in-a-long-time/#comments</comments>
		<pubDate>Fri, 05 Aug 2011 14:03:45 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=2164</guid>
		<description><![CDATA[A beautiful and inspiring piece of video work that has left me speechless.]]></description>
			<content:encoded><![CDATA[<p><iframe src="http://player.vimeo.com/video/27246366?color=ffffff" width="949" height="534" frameborder="0"></iframe>
<p><a href="http://vimeo.com/27246366">MOVE</a> from <a href="http://vimeo.com/rickmereki">Rick Mereki</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<div class="clear blog">I showed this to the video team at work, and the video director said simply, &#8220;That is the best thing I&#8217;ve seen in a long time.&#8221; I&#8217;m envious &#8211; not only of the work these folks made but of the thrilling time they clearly had making it.</div>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/the-best-thing-ive-seen-in-a-long-time/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Menu Information Architecture</title>
		<link>http://mike-eng.com/menu-information-architecture/</link>
		<comments>http://mike-eng.com/menu-information-architecture/#comments</comments>
		<pubDate>Mon, 23 May 2011 03:48:35 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[diy]]></category>
		<category><![CDATA[information architecture]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=2130</guid>
		<description><![CDATA[On D.I.Y. information architecture in everyday places.]]></description>
			<content:encoded><![CDATA[<div class="clear blog">
<div id="attachment_2134" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/menu_information_architecture-3.jpg"><img src="http://mike-eng.com/wp-content/uploads/menu_information_architecture-3-300x240.jpg" alt="Modern Diner" title="Modern Diner" width="300" height="240" class="size-medium wp-image-2134" /></a><p class="wp-caption-text">The Modern Diner in all its Glory. Photo credit: <a href='http://www.flickr.com/photos/ethomsen/3307175209/'>Elizabeth Thomsen</a></p></div></p>
<p>There&#8217;s an ongoing debate about whether design should be upheld as a specialized profession requiring serious training or whether the basics, at least, can be taught to anyone easily (without $140,000 and 4 years in design school). Some maintain that everyone is a designer to some extent whether or not he/she realizes it. In 2006, students and faculty from <a href="http://www.mica.edu/">Maryland Institute College of Art</a> created a book called <a href="http://www.amazon.com/D-I-Y-Design-Yourself-Handbooks/dp/1568985525">D.I.Y: Design It Yourself</a> that sparked quite a <a href="http://www.aiga.org/content.cfm/the-diy-debate">controversy</a> on the subject.</p>
<p>Here is an example of the &#8220;everyone is a designer&#8221; side of the argument.</p>
<p>A menu can be thought of as a down-to-earth example of information architecture. Just about every menu does it &#8211; breaking up dishes into categories (appetizers, entrees, sides, drinks, desserts) and sometimes sub-categories (beef, poultry, seafood, vegetarian) and then individual dishes.
</p></div>
<div class="clear blog">
Whether you are designing a website, an application, a poster, or a menu, humans, unlike computers, have a fairly low limit on the amount of information they can hold in their minds at once. Common practice for the maximum number of items to include in a <a href="http://www.welie.com/patterns/showPattern.php?patternID=main-navigation">horizontal website navigation</a> centers around 7. This is close to the human digit span of <a href="http://en.wikipedia.org/wiki/Seven_plus_or_minus_two">7 +/- 2</a>. So we do this architecture to allow users to make a series of progressive easy decisions rather than one overwhelming one.
</div>
<div class="clear blog">
The challenge in information architecture is how to establish those choices in a way that end users understand. Whoever designed the decidedly bare-bones menu for the Modern Diner in Pawtucket stumbled upon a key distinction to make up front which every diner-goer can easily make and which splits every breakfast food into one of two simple categories &#8211; that of &#8220;sweet&#8221; or &#8220;savory&#8221;.
</div>
<div class="clear blog">
<div id="attachment_2132" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/menu_information_architecture-1.jpg"><img class="size-medium wp-image-2132" title="Sweet" src="http://mike-eng.com/wp-content/uploads/menu_information_architecture-1-300x293.jpg" alt="Sweet" width="300" height="293" /></a><p class="wp-caption-text">Menu Side 1: Sweet</p></div><br />
<div id="attachment_2133" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/menu_information_architecture-2.jpg"><img class="size-medium wp-image-2133" title="Savory" src="http://mike-eng.com/wp-content/uploads/menu_information_architecture-2-300x283.jpg" alt="Savory" width="300" height="283" /></a><p class="wp-caption-text">Menu Side 2: Savory</p></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/menu-information-architecture/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Taste Feedback</title>
		<link>http://mike-eng.com/taste-feedback/</link>
		<comments>http://mike-eng.com/taste-feedback/#comments</comments>
		<pubDate>Fri, 08 Apr 2011 21:00:24 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[feedback]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[userexperience]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=2114</guid>
		<description><![CDATA[On mint toothpaste and disorientation.]]></description>
			<content:encoded><![CDATA[<div class="clear blog">
<div id="attachment_2115" class="wp-caption alignnone" style="width: 310px"><img src="http://mike-eng.com/wp-content/uploads/taste-feedback-300x274.jpg" alt="Mint Dental Floss" title="taste-feedback" width="300" height="274" class="size-medium wp-image-2115" /><p class="wp-caption-text">Illustration Credit: <a href='http://www.flickr.com/photos/rakka/4354889090/in/photostream/'>Rakka</a></p></div></p>
<p>I recently became aware of how taste feedback can be important in accomplishing an everyday task.</p>
<p>I bought dental floss not long ago without paying much attention to what I was buying. Turns out, it was mint-flavored dental floss. While flossing with it for the first time, I became oddly disoriented by the fresh minty taste. It wasn&#8217;t a positive or negative reaction to the taste itself. It was <em>disorientation</em> with the task at hand.</p>
<p>We&#8217;re all familiar with <a href="http://www.usabilityfirst.com/glossary/feedback/">feedback</a> &#8211; mostly in the visual or auditory sense. Press a button to call an elevator, and it lights up to tell you that you&#8217;ve pressed it. Press a newfangled crosswalk button, and it beeps. Without feedback, there is no confirmation that our intended input was successful. People press the old style crosswalk buttons repeatedly hoping that out of the six or seven attempts they make to trigger the button, one will be successful. Side note: many old corsswalk buttons are leftover &#8220;<a href="http://youarenotsosmart.com/2010/02/10/placebo-buttons/">placebo buttons</a>&#8221; that have been made obsolete by computer-controlled systems. In some cases, they actually trigger the traffic lights, but <a href="http://radioboston.wbur.org/2010/05/10/walk-buttons">only at certain times</a>.</p>
<p>What I realized in this case was that while flossing, I use the sense of taste for feedback. Taste tells me whether I have dislodged a piece of food. It&#8217;s my light on the elevator call button. With mint floss, the light was on all the time. It&#8217;s like trying to read text that is all bold or navigate an intersection littered with too many signs.</p>
<p>Next time, it&#8217;s back to unflavored floss.
</p></div>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/taste-feedback/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Usability Observation #20</title>
		<link>http://mike-eng.com/usability-observation-20-cutting-board-rack/</link>
		<comments>http://mike-eng.com/usability-observation-20-cutting-board-rack/#comments</comments>
		<pubDate>Sun, 06 Feb 2011 18:31:53 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[cutting board rack]]></category>
		<category><![CDATA[improvisation]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=2053</guid>
		<description><![CDATA[On levitation in the kitchen.]]></description>
			<content:encoded><![CDATA[<div class="clear blog">
<div id="attachment_2055" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/usability-observation-20-cutting-board-rack/usability-observation-20/" rel="attachment wp-att-2055"><img src="http://mike-eng.com/wp-content/uploads/usability-observation-20-300x225.jpg" alt="Garden Hose Rack as Cutting Board Rack" title="Garden Hose Rack as Cutting Board Rack" width="300" height="225" class="size-medium wp-image-2055" /></a><p class="wp-caption-text">Improvised Cutting Board Rack</p></div></p>
<p>My friends Adam and Alyssa came up with this bit of ingenuity. The problem: lack of shelf space in their kitchen. </p>
<p>The solution seemed almost too intentional to be improvised. They mounted a garden hose rack on the side of the counter and turned it into a cutting board rack.
</p></div>
<div class="clear blog">
<div id="attachment_2054" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/usability-observation-20-cutting-board-rack/usability-observation-20-2/" rel="attachment wp-att-2054"><img src="http://mike-eng.com/wp-content/uploads/usability-observation-20-2-300x225.jpg" alt="Example of Standard Garden Hose Rack" title="Example of Standard Garden Hose Rack" width="300" height="225" class="size-medium wp-image-2054" /></a><p class="wp-caption-text">Your garden-variety garden hose rack. Photo by <a href='http://www.flickr.com/photos/jeff-godfrey/2288710443/in/photostream/'>Jeff / Godfrey</a>.</p></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/usability-observation-20-cutting-board-rack/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fun With Universal Instruction Diagrams</title>
		<link>http://mike-eng.com/fun-with-universal-instruction-diagrams/</link>
		<comments>http://mike-eng.com/fun-with-universal-instruction-diagrams/#comments</comments>
		<pubDate>Fri, 07 Jan 2011 02:51:09 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[humor]]></category>
		<category><![CDATA[information graphics]]></category>
		<category><![CDATA[instructions]]></category>
		<category><![CDATA[signage]]></category>
		<category><![CDATA[universal design]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=2002</guid>
		<description><![CDATA[The joy of filling in the blanks.]]></description>
			<content:encoded><![CDATA[<div class="clear blog">
<a href="http://mike-eng.com/fun-with-universal-instruction-diagrams/fun-with-universal-instructions/" rel="attachment wp-att-2009"><img src="http://mike-eng.com/wp-content/uploads/fun-with-universal-instructions-300x72.jpg" alt="IKEA universal instruction diagram" title="IKEA universal instruction diagram" width="300" height="72" class="alignnone size-medium wp-image-2009" /></a></p>
<p>Ah, moving. I associate it with purging old junk on eBay, asking friends for large favors, and shopping at Ikea.</p>
<p>I always appreciate their furniture / product design and usually appreciate their instruction manuals too. This manual for a step stool though was a bit quirky. Let&#8217;s try to make sense of some of these universal messages one-by-one.
</p></div>
<div class="clear blog">
<div id="attachment_2003" class="wp-caption alignnone" style="width: 203px"><a href="http://mike-eng.com/fun-with-universal-instruction-diagrams/fun-with-universal-instructions-1/" rel="attachment wp-att-2003"><img src="http://mike-eng.com/wp-content/uploads/fun-with-universal-instructions-1.jpg" alt="Step stool next to weight" title="Step stool next to weight" width="193" height="127" class="size-full wp-image-2003" /></a><p class="wp-caption-text">This step stool has the power to levitate a 100kg weight.</p></div></p>
<div id="attachment_2004" class="wp-caption alignnone" style="width: 168px"><a href="http://mike-eng.com/fun-with-universal-instruction-diagrams/fun-with-universal-instructions-2/" rel="attachment wp-att-2004"><img src="http://mike-eng.com/wp-content/uploads/fun-with-universal-instructions-2.jpg" alt="Step Stool Stilts" title="Step stool stilts" width="158" height="216" class="size-full wp-image-2004" /></a><p class="wp-caption-text">This step stool is not a set of stilts with training legs.</p></div>
<div id="attachment_2005" class="wp-caption alignnone" style="width: 178px"><a href="http://mike-eng.com/fun-with-universal-instruction-diagrams/fun-with-universal-instructions-3/" rel="attachment wp-att-2005"><img src="http://mike-eng.com/wp-content/uploads/fun-with-universal-instructions-3.jpg" alt="Step stool and magnifying glass" title="Step stool and magnifying glass" width="168" height="126" class="size-full wp-image-2005" /></a><p class="wp-caption-text">This step stool will disappear behind a magic detective lens in the enclosed spy kit.</p></div>
<div id="attachment_2006" class="wp-caption alignnone" style="width: 204px"><a href="http://mike-eng.com/fun-with-universal-instruction-diagrams/fun-with-universal-instructions-4/" rel="attachment wp-att-2006"><img src="http://mike-eng.com/wp-content/uploads/fun-with-universal-instructions-4.jpg" alt="Step stool defenestration" title="Step stool defenestration" width="194" height="128" class="size-full wp-image-2006" /></a><p class="wp-caption-text">This step stool is not a defenestration accessory.</p></div>
<div id="attachment_2007" class="wp-caption alignnone" style="width: 203px"><a href="http://mike-eng.com/fun-with-universal-instruction-diagrams/fun-with-universal-instructions-5/" rel="attachment wp-att-2007"><img src="http://mike-eng.com/wp-content/uploads/fun-with-universal-instructions-5.jpg" alt="Step stool paintbrush" title="Step stool paintbrush" width="193" height="127" class="size-full wp-image-2007" /></a><p class="wp-caption-text">Do not use a paintbrush that is larger than this step stool without assistance.</p></div>
<div id="attachment_2008" class="wp-caption alignnone" style="width: 234px"><a href="http://mike-eng.com/fun-with-universal-instruction-diagrams/fun-with-universal-instructions-6/" rel="attachment wp-att-2008"><img src="http://mike-eng.com/wp-content/uploads/fun-with-universal-instructions-6.jpg" alt="Step stool weather" title="Step stool weather" width="224" height="128" class="size-full wp-image-2008" /></a><p class="wp-caption-text">This step stool is not intended to be used as a weather balloon.</p></div>
<p>Good laughs. In all seriousness though, it makes me wonder about the possibilities of creating an interactive project with no words. It would be an interesting exercise, at least.
</p></div>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/fun-with-universal-instruction-diagrams/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Follow The Money &#8211; UI Sketches</title>
		<link>http://mike-eng.com/follow-the-money-ui/</link>
		<comments>http://mike-eng.com/follow-the-money-ui/#comments</comments>
		<pubDate>Wed, 11 Aug 2010 21:12:54 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[work: interactive]]></category>
		<category><![CDATA[home]]></category>
		<category><![CDATA[information graphics]]></category>
		<category><![CDATA[interest money]]></category>
		<category><![CDATA[lobbying]]></category>
		<category><![CDATA[politics]]></category>
		<category><![CDATA[sketches]]></category>
		<category><![CDATA[task flow]]></category>
		<category><![CDATA[wireframes]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=1847</guid>
		<description><![CDATA[UI Sketches for an open-source data visualization project.]]></description>
			<content:encoded><![CDATA[<div style="width:650px;">
I&#8217;ve been working on an open-source project called <a href="http://pauric.net/followthemoney">FollowTheMoney</a>. It is a data visualization project that will use <a href="http://processing.org/">Processing</a> to create interactive information graphics displaying campaign finance contributions to elected politicians and candidates as well as the positions of the politicians and candidates on issues.</p>
<p>We started the project with interviews, then created personas, and began exploring some options for the visual design. See the <a href="http://www.pauric.net/followthemoney/?page_id=87">project workspaces</a> to view the outcomes of these initial steps.</p>
<p>The team generated a first round sketches for the UI, some of which involved a smooth but long selection process before any information graphics were shown. Some other versions presented suggested visualizations based on items in the news or popular visualizations.</p>
<p>Also, some versions had a clear split between making the selection for which data to view and the presentation of the data itself, while others had a more hybrid approach.</p>
<p>In reviewing the first round of sketches and our interview results, it became clear that our users will not want to deal with an involved multi-step UI before any data is presented. Also, some users will tend to search for something specific, while some will want to be able to discover interesting patterns based on a candidate or a contributor.</p>
<div class="left">
<div id="attachment_1854" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/follow_the_money_ui.pdf" target="_blank"><img src="http://mike-eng.com/wp-content/uploads/follow_the_money_ui2-300x234.png" alt="click to view full PDF in new window" title="click to view full PDF in new window" width="300" height="234" class="size-medium wp-image-1854" /></a><p class="wp-caption-text">Some sketches in the context of the user flow. <a href="http://mike-eng.com/wp-content/uploads/follow_the_money_ui.pdf" target="_blank">View PDF in new window</a>.</p></div></p>
<p><div id="attachment_1851" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/follow_the_money_ui.png"><img src="http://mike-eng.com/wp-content/uploads/follow_the_money_ui-300x238.png" alt="click to view full PDF in new window" title="click to view full PDF in new window" width="300" height="238" class="size-medium wp-image-1851" /></a><p class="wp-caption-text">Detail of UI version 2. <a href="http://mike-eng.com/wp-content/uploads/follow_the_money_ui.png">View full image</a>.</p></div>
</div>
<div class="right" style="width:310px">
I presented a second round of sketches here which build off of ideas from round 1 and afford detailed searching, casual browsing, and discovery.
</div>
</div>
<p><!-- end 650 px --></p>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/follow-the-money-ui/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HubSpot &#8211; Keyword Grader</title>
		<link>http://mike-eng.com/hubspot-keyword-grader/</link>
		<comments>http://mike-eng.com/hubspot-keyword-grader/#comments</comments>
		<pubDate>Sat, 29 May 2010 02:02:48 +0000</pubDate>
		<dc:creator>mrengy</dc:creator>
				<category><![CDATA[work: interactive]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[home]]></category>
		<category><![CDATA[hubspot]]></category>
		<category><![CDATA[search engine optimization]]></category>
		<category><![CDATA[strategy]]></category>
		<category><![CDATA[task flow]]></category>
		<category><![CDATA[wireframes]]></category>

		<guid isPermaLink="false">http://mike-eng.com/?p=1669</guid>
		<description><![CDATA[Strategy and redesign of a leading web application used for search engine optimization.]]></description>
			<content:encoded><![CDATA[<div style="width:650px;">
<div class="clear">
<a href="http://hubspot.com">Hubspot</a> is an inbound marketing consultancy that integrates search engine optimization, blogs, and social media to increase their clients&#8217; ability to get found online.</p>
<p>As part of an interview process, I was asked to redesign one of their products &#8211; the Keyword Grader. Clients use the Keyword Grader to evaluate how well a site is optimized for certain keywords. It shows the site&#8217;s search engine rankings, compared with the rankings of competitors, for specified keywords.
</p></div>
<div class="clear">
<div class="left">
<div id="attachment_1678" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader_original.png"><img src="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader_original-300x197.png" alt="Original Keyword Grader" title="Original Keyword Grader" width="300" height="197" class="size-medium wp-image-1678" /></a><p class="wp-caption-text">Original Design</p></div>
</div>
<div class="right" style="width:310px;">
The existing Keyword Grader had various issues in terms of  User Interface and User Experience. Labeling was not clear for the options. Tools were placed in sporadic locations. Little attention had been given to it overall.
</div>
</div>
<p><!-- end clear --></p>
<div class="clear">
One key impetus for changing the keyword grader is that Google is soon changing the way search works. They are personalizing search results based on location and other information Google knows about the user based on blogs, e-mail, and social media. Once search is personalized in such a way, global search engine rankings (one of the main metrics in the keyword grader) are no longer relevant.
</div>
<div class="clear">
<div class="left">
<div id="attachment_1675" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader_flow_new.pdf" target="_blank"><img src="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader_flow_new-300x286.png" alt="Click to View PDF in New Window" title="Click to View PDF in New Window" width="300" height="286" class="size-medium wp-image-1675" /></a><p class="wp-caption-text">Task Flow Diagram for New User Signup Process</p></div>
</div>
<div class="right" style="width:310px;">
I started the research with a task flow diagram to understand two processes behind using Hubspot and annotated it with plausible thoughts from the user (in blue) and suggestions for simple design improvements (in red). First, I diagramed the process of a new user signing up.
</div>
<div class="clear">
<div class="left">
<div id="attachment_1677" class="wp-caption alignnone" style="width: 260px"><a href="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader_flow_returning.pdf" target="_blank"><img src="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader_flow_returning-250x300.png" alt="Click to View PDF in New WIndow" title="Click to View PDF in New WIndow" width="250" height="300" class="size-medium wp-image-1677" /></a><p class="wp-caption-text">Task Flow Diagram for New User Signup Process</p></div>
</div>
<div class="right" style="width:310px;">
Next, I visualized the process for a returning user logging in and accessing the Keyword Grader.
</div>
</div>
<div class="clear">
In redesigning the Keyword grader, one central concept was to introduce viewer profiles specifying the demographics of people targeted by the site. For example, a company that markets study-abroad packages to university students may have profiles of students, professors, and parents. Perhaps the company is also targeting viewers in certain geographic areas. As part of the setup process with HubSpot, the user would create these target profiles.
</div>
<div class="clear">
<div class="left">
<div id="attachment_1671" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader.pdf" target="_blank"><img src="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader1-300x224.png" alt="" title="Click to View PDF in New Window" width="300" height="224" class="size-medium wp-image-1671" /></a><p class="wp-caption-text">New Wireframe: Table View</p></div>
</div>
<div class="right" style="width:310px;">
The profiles would match with the way Google&#8217;s search results are personalized, so search engine rankings would be viewable in the Keyword Grader, segmented by profile.</p>
<p>The wireframes offer a &#8220;recommendations&#8221; bar on the top &#8211; for a user who is looking to quickly find some improvements to make to search engine optimization.
</p></div>
</div>
<div class="clear">
<div class="left">
<div id="attachment_1672" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader.pdf" target="_blank"><img src="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader2-300x224.png" alt="Click to View PDF in New Window" title="Click to View PDF in New Window" width="300" height="224" class="size-medium wp-image-1672" /></a><p class="wp-caption-text">New Wireframe: Table View Options</p></div><br />
<div id="attachment_1673" class="wp-caption alignnone" style="width: 310px"><a href="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader.pdf" target="_blank"><img src="http://mike-eng.com/wp-content/uploads/hubspot_keyword_grader3-300x233.png" alt="Click to View PDF in New Window" title="Click to View PDF in New Window" width="300" height="233" class="size-medium wp-image-1673" /></a><p class="wp-caption-text">New Wireframe: Chart View</p></div>
</div>
<div class="right" style="width:310px;">
For users wishing to dig deeper, they can navigate a table view or a chart view of the keyword data, both of which are highly customizable.
</div>
</div>
<p><!-- end clear -->
</div>
<p><!-- end width --></p>
]]></content:encoded>
			<wfw:commentRss>http://mike-eng.com/hubspot-keyword-grader/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

