<?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>Metaprinter &#187; UserInterface</title>
	<atom:link href="http://blog.metaprinter.com/tag/userinterface/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.metaprinter.com</link>
	<description>Internet and Online Strategies</description>
	<lastBuildDate>Thu, 24 Nov 2011 04:10:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Google Fast Flip &#8211; News Visualization</title>
		<link>http://blog.metaprinter.com/2009/09/google-fast-flip-news-visualization/</link>
		<comments>http://blog.metaprinter.com/2009/09/google-fast-flip-news-visualization/#comments</comments>
		<pubDate>Tue, 15 Sep 2009 03:58:29 +0000</pubDate>
		<dc:creator>Robert Ivan</dc:creator>
				<category><![CDATA[New Media]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[UserInterface]]></category>
		<category><![CDATA[Visualization]]></category>

		<guid isPermaLink="false">http://blog.metaprinter.com/?p=2824</guid>
		<description><![CDATA[I&#8217;m sure the newspapers are hating Google Labs&#8217; new Fast Flip user interface but at least they are sharing revenue .  I like visualizations.  The current user interface of search portals and websites in general are certainly in their nascent &#8230; <a href="http://blog.metaprinter.com/2009/09/google-fast-flip-news-visualization/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m sure the newspapers are hating Google Labs&#8217; new <a href="http://fastflip.googlelabs.com/" target="_blank">Fast Flip user interface</a> but at least they are <a href="http://www.niemanlab.org/2009/09/google-sharing-revenue-with-publishers-for-first-time/" target="_self">sharing revenue</a> .  I like visualizations.  The current user interface of search portals and websites in general are certainly in their nascent iterations.  For Fast Flip, Google went for the grid user interface hey&#8230; it really works for<a href="http://blog.metaprinter.com/2009/02/new-york-times-article-skimmer-prototype/" target="_blank"> tastespotting</a>.</p>
<p style="text-align: center;"><a href="http://fastflip.googlelabs.com/"><img class="size-medium wp-image-2826 aligncenter" title="googff" src="http://blog.metaprinter.com/wp-content/uploads/2009/09/googff-300x187.jpg" alt="googff" width="300" height="187" /></a></p>
<p style="text-align: left;">It remains to be seen if it works for Google.  Here&#8217;s how Google explains the site:</p>
<p style="text-align: left;"><a href="http://fastflip.googlelabs.com/">&#8220;Google Fast Flip</a> is a web application that lets users discover and share news articles. It combines qualities of print and the Web, with the ability to &#8220;flip&#8221; through pages online as quickly as flipping through a magazine. It also enables users to follow friends and topics, discover new content and create their own custom magazines around searches.&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.metaprinter.com/2009/09/google-fast-flip-news-visualization/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>El Universal Classified Page Redesign is a Breath of Fresh Air</title>
		<link>http://blog.metaprinter.com/2009/04/el-universal-classified-page-redesign-is-a-breath-of-fresh-air/</link>
		<comments>http://blog.metaprinter.com/2009/04/el-universal-classified-page-redesign-is-a-breath-of-fresh-air/#comments</comments>
		<pubDate>Wed, 29 Apr 2009 14:44:51 +0000</pubDate>
		<dc:creator>Robert Ivan</dc:creator>
				<category><![CDATA[Innovation]]></category>
		<category><![CDATA[Newspaper]]></category>
		<category><![CDATA[UserInterface]]></category>
		<category><![CDATA[Website]]></category>

		<guid isPermaLink="false">http://www.metaprinter.com/?p=2615</guid>
		<description><![CDATA[Why do I love it?  LOOK AT IT!  It&#8217;s all about the user experience.  The redesign was done by BrassTacksDesign.  Click here to see the before and after.]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://www.aviso-oportuno.com.mx/"><img class="aligncenter" style="border: 1px solid black;" title="Classified Site Front Page" src="http://metaprinter.com/images/eluniversal.jpg" alt="" width="600" height="416" /></a></p>
<p style="text-align: left;">Why do I love it?  LOOK AT IT!  It&#8217;s all about the user experience.  The redesign was done by BrassTacksDesign.  <a href="http://www.brasstacksdesign.com/images/aviso_before_after_01.gif" target="_blank">Click here</a> to see the before and after.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.metaprinter.com/2009/04/el-universal-classified-page-redesign-is-a-breath-of-fresh-air/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Alexa and Wordle To Improve News Site Performance</title>
		<link>http://blog.metaprinter.com/2009/04/using-alexa-and-wordle-to-review-news-site-performance/</link>
		<comments>http://blog.metaprinter.com/2009/04/using-alexa-and-wordle-to-review-news-site-performance/#comments</comments>
		<pubDate>Wed, 08 Apr 2009 05:26:47 +0000</pubDate>
		<dc:creator>Robert Ivan</dc:creator>
				<category><![CDATA[Content]]></category>
		<category><![CDATA[New Media]]></category>
		<category><![CDATA[Data]]></category>
		<category><![CDATA[Newspaper]]></category>
		<category><![CDATA[UserInterface]]></category>
		<category><![CDATA[Visualization]]></category>
		<category><![CDATA[Website]]></category>
		<category><![CDATA[Wordle]]></category>

		<guid isPermaLink="false">http://www.metaprinter.com/?p=2393</guid>
		<description><![CDATA[Is your newspaper doing what you think it&#8217;s doing?  Lets say you operate in New Jersey and run NJ.com.  That site pans itself as &#8220;everything NJ&#8221;.  Does this hold up looking at the data? ALEXA: I did the breakdown for &#8230; <a href="http://blog.metaprinter.com/2009/04/using-alexa-and-wordle-to-review-news-site-performance/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Is your newspaper doing what you think it&#8217;s doing?  Lets say you operate in New Jersey and run NJ.com.  That site pans itself as &#8220;everything NJ&#8221;.  Does this hold up looking at the data?</p>
<p>ALEXA:<br />
I did the breakdown for you below.  Click the field you want to change for your publication.  We&#8217;re using my home state of NJ so we&#8217;re using the following:</p>
<h2><a href="http://alexa.com/topsites/category/Top">Top</a> <span>&gt;</span> <a href="http://alexa.com/topsites/category/Top/News">News</a> <span>&gt;</span> <a href="http://alexa.com/topsites/category/Top/News/Newspapers">Newspapers</a> <span>&gt;</span> <a href="http://alexa.com/topsites/category/Top/News/Newspapers/Regional">Regional</a> <span>&gt;</span> <a href="http://alexa.com/topsites/category/Top/News/Newspapers/Regional/United_States">United States</a> <span>&gt;</span> <a href="http://alexa.com/topsites/category/Top/News/Newspapers/Regional/United_States/New_Jersey">New Jersey</a></h2>
<p>We find out that there are 44 newspaper websites in this category and they are listed by popularity below.  I show the first 5 as an example.  Clicking the title goes to the Alexa data, clicking the url goes to the site.<span id="more-2393"></span></p>
<h2>Sites in this Category</h2>
<ol>
<li>
<div class="site-listing"><a href="http://alexa.com/siteinfo/www.nj.com/"><strong>New Jersey Online</strong></a><br />
<a class="offsite" style="font-size: 0.8em;" rel="nofollow" href="http://www.nj.com/">www.nj.com/</a></div>
</li>
<li>
<div class="site-listing"><a href="http://alexa.com/siteinfo/www.northjersey.com/"><strong>The Record Online</strong></a><br />
<a class="offsite" style="font-size: 0.8em;" rel="nofollow" href="http://www.northjersey.com/">www.northjersey.com/</a></div>
</li>
<li>
<div class="site-listing"><a href="http://alexa.com/siteinfo/www.courierpostonline.com/"><strong>Courier-Post Online</strong></a><br />
<a class="offsite" style="font-size: 0.8em;" rel="nofollow" href="http://www.courierpostonline.com/">www.courierpostonline.com/</a></div>
</li>
<li>
<div class="site-listing"><a href="http://alexa.com/siteinfo/www.dailyrecord.com/"><strong>Daily Record</strong></a><br />
<a class="offsite" style="font-size: 0.8em;" rel="nofollow" href="http://www.dailyrecord.com/">www.dailyrecord.com/</a></div>
</li>
<li>
<div class="site-listing"><a href="http://alexa.com/siteinfo/www.pressofatlanticcity.com/"><strong>Press of Atlantic City</strong></a><br />
<a class="offsite" style="font-size: 0.8em;" rel="nofollow" href="http://www.pressofatlanticcity.com/">www.pressofatlanticcity.com/</a></div>
</li>
</ol>
<p>So we see that indeed nj.com is the most popular newspaper site in NJ.  Let&#8217;s click on the title and see some data.</p>
<p>3,376<br />
Traffic Rank Alexa Traffic Rank<br />
A measure of a website&#8217;s popularity</p>
<p>3.0 min/day<br />
Avg. Time on Site Time on Site<br />
A measure of user attention.</p>
<p>8,841<br />
Sites Linking In Sites Linking In<br />
A measure of a website&#8217;s reputation</p>
<p>23-Oct-1994<br />
Online Since</p>
<p>Now lets see what keywords are being used on the site.  <a href="http://www.wordle.net/create" target="_blank">Wordle</a> is a visualization tool that allows you to input an RSS feed or paste in text.  Here i&#8217;ll just copy and paste the entire front page of the entire site.  This gives us:</p>
<p style="text-align: center;"><a href="http://www.wordle.net/create"><img class="aligncenter" style="border: 1px solid black;" title="NJ.com front page Wordle" src="http://metaprinter.com/images/njwordle.JPG" alt="" width="666" height="278" /></a></p>
<p style="text-align: left;">Words that appear with greater frequency are larger than ones which appear less.  So &#8220;Jersey&#8221; appears on the site with greater frequency than &#8220;local&#8221;.  Ignore the color, the color means nothing.  Seems like NJ.com is doing a good job of covering their beat (NJ), but what could they be doing better?  Well, I don&#8217;t know because I&#8217;m not the publisher, but what if the site is pushing their &#8220;Rutgers&#8221; news.  Now do you think they&#8217;re doing a good job?  Can you find the word &#8220;Rutgers&#8221;, it&#8217;s in there.</p>
<p style="text-align: left;">I&#8217;ve presented you with two quick &amp; free tools that newspaper executives can use to figure out if their site is reflecting their goals.  I encourage readers to do this with their sites AND their competitor&#8217;s sites.  Knowledge is power and visualization tools can really highlight problems or trends.  Use the free tools out there to your advantage and contact me for more help.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.metaprinter.com/2009/04/using-alexa-and-wordle-to-review-news-site-performance/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Readability Cleans Up The Clutter</title>
		<link>http://blog.metaprinter.com/2009/03/readability-cleans-up-the-clutter/</link>
		<comments>http://blog.metaprinter.com/2009/03/readability-cleans-up-the-clutter/#comments</comments>
		<pubDate>Sat, 07 Mar 2009 22:37:20 +0000</pubDate>
		<dc:creator>Robert Ivan</dc:creator>
				<category><![CDATA[Innovation]]></category>
		<category><![CDATA[New Media]]></category>
		<category><![CDATA[UserInterface]]></category>
		<category><![CDATA[Website]]></category>

		<guid isPermaLink="false">http://www.metaprinter.com/?p=2045</guid>
		<description><![CDATA[I&#8217;ve been guilty of reading the &#8220;print view&#8221; version of long interesting articles on news sites to remove all the noise and clutter of those sites. Sometimes I&#8217;ll even use the Web Designer&#8217;s Toolbar to disable javascript. Some smart people &#8230; <a href="http://blog.metaprinter.com/2009/03/readability-cleans-up-the-clutter/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><span style="color: #0000ee; text-decoration: underline;"><object width="500" height="400" data="/video/arc90Readability.swf" type="application/x-shockwave-flash"><param name="src" value="/video/arc90Readability.swf" /></object></span></p>
<p>I&#8217;ve been guilty of reading the &#8220;print view&#8221; version of long interesting articles on news sites to remove all the noise and clutter of those sites.  Sometimes I&#8217;ll even use the Web Designer&#8217;s Toolbar to disable javascript.   Some smart people at <a href="http://lab.arc90.com/2009/03/readability.php">arc90 labs</a> have gone several steps further and created the above &#8220;browser bookmarklet on steroids&#8221; to improve the reading experience.</p>
<p>Purists will say I&#8217;m not supporting the site by avoiding their advertising, but you know what?  In the 14 years I&#8217;ve been using the internet, I have never intentionally clicked on an advertisement. If in the last 14 years, the only thing those sites can come up with to grab my attention is a Pop Under ad, then <em>they</em> fail &#8211; not me.<span id="more-2045"></span></p>
<p><object width="400" height="300" data="http://vimeo.com/moogaloop.swf?clip_id=3445774&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=3445774&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /></object><br />
<a href="http://vimeo.com/3445774">Readability : An Arc90 Lab Experiment</a> from <a href="http://vimeo.com/arc90">Arc90</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>If you are curious, here is a side by side comparison of the same page without and with javascript enabled.</p>
<p style="text-align: center;"> </p>
<div class="wp-caption aligncenter" style="width: 610px"><img title="With Javascript Enabled and Without on the right" src="/images/javanj.jpg" alt="With Javascript Enabled and Without on the right" width="600" height="271" /><p class="wp-caption-text">With Javascript Enabled and Without on the right</p></div>
<p style="text-align: left;"> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.metaprinter.com/2009/03/readability-cleans-up-the-clutter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>New York Times Article Skimmer Prototype</title>
		<link>http://blog.metaprinter.com/2009/02/new-york-times-article-skimmer-prototype/</link>
		<comments>http://blog.metaprinter.com/2009/02/new-york-times-article-skimmer-prototype/#comments</comments>
		<pubDate>Sun, 22 Feb 2009 21:10:43 +0000</pubDate>
		<dc:creator>Robert Ivan</dc:creator>
				<category><![CDATA[Innovation]]></category>
		<category><![CDATA[Add new tag]]></category>
		<category><![CDATA[MSN]]></category>
		<category><![CDATA[NYT]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[UserInterface]]></category>
		<category><![CDATA[Website]]></category>

		<guid isPermaLink="false">http://www.metaprinter.com/?p=1920</guid>
		<description><![CDATA[Grid Format User Interfaces All The Rage? Navigating the home page of most newspaper websites stinks.  There are literally hundreds of links scattered about with very little thought toward user engagement and ease of use.  In the 14 years that &#8230; <a href="http://blog.metaprinter.com/2009/02/new-york-times-article-skimmer-prototype/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;">Grid Format User Interfaces All The Rage?</p>
<p>Navigating the home page of most newspaper websites stinks.  There are literally hundreds of links scattered about with very little thought toward user engagement and ease of use.  In the 14 years that most news sites have been in use, it still seems easier to navigate a printed newspaper than a news site.</p>
<p>Personally speaking, I can skim through an entire Wall Street Journal in about 5 minutes before going back and reading entire articles that interest me.  Try doing this on a news site and you will quickly realize that there is no seamless way to recreate the speed and effectiveness.  The New York Times <a href="http://prototype.nytimes.com/gst/articleSkimmer/" target="_blank">article skimmer </a>and others below attempt to solve this problem.</p>
<p>The New York Times is working on the new user interface prototype for their content called &#8216;article skimmer&#8217;.  Below is a screen shot of their Dining &amp; Wine section in Article Skimmer. It&#8217;s a nice clean layout, good for scanning.</p>
<p style="text-align: center;"><a href="http://prototype.nytimes.com/gst/articleSkimmer/"><img class="aligncenter" title="NYT article skimmer" src="/images/articleskimmer.jpg" alt="" width="429" height="350" /></a></p>
<p style="text-align: left;"><span id="more-1920"></span>Below is a screenshot from their current Dining &amp; Wine section.  Skimming for interesting articles looks much better in the Article Skimmer, but where did the special features like search and the dropdown topics go?  Which of the two looks easier to navigate?  Which is more intuitive?</p>
<p style="text-align: center;"><a href="http://www.nytimes.com/pages/dining/index.html"><img class="aligncenter" title="NYT Dining &amp; Wine section" src="/images/NYTwine.jpg" alt="" width="450" height="439" /></a></p>
<p>MSN is currently beta testing something similar for their celebrity / movie news site <a href="http://www.wonderwall.com/" target="_blank">Wonder Wall</a>.</p>
<p style="text-align: center;"><a href="http://www.wonderwall.com/"><img class="aligncenter" title="MSN Wonder Wall" src="/images/wonderwall.jpg" alt="" width="450" height="339" /></a></p>
<p><a href="http://www.newser.com/" target="_blank">Newser</a> is an online news service that adds human intelligence to machine-driven aggregation.</p>
<p style="text-align: center;"><a href="http://www.newser.com/"><img class="aligncenter" title="Newser" src="/images/newser.jpg" alt="" width="399" height="350" /></a></p>
<p>All sites are attempting to create better User Interfaces to the content within.  All use a grid format that features text,  photos, video and audio to engage the user.  All use Javascript to allow dynamic content display without refreshing the entire page.  Newser takes this one step further and filters their content from over 100 news sources, kind of like a visual Huffington Post or Drudge Report.</p>
<p>The Article Skimmer site is completely unusable on my Blackberry World Edition, with or without Javascript enabled.  This may be a shortcoming of that phone, but a successful site like this should be platform agnostic, besides, Newser works on it&#8230; kind of.  Maybe NYT will release this as a downloadable application, who knows.  Like I said earlier, this is a prototype&#8230; only the beginning.</p>
<p><strong>RELATED:</strong></p>
<p style="text-align: center;"><a href="http://www.tastespotting.com/"><img class="aligncenter" title="Tastespotting" src="/images/tastespotting.jpg" alt="" width="450" height="388" /></a></p>
<p style="text-align: left;">Thanks to reader &#8220;dana&#8221; for bringing my attention to <a href="http://www.tastespotting.com/" target="_blank">Tastespotting</a>&#8216;s home page and use of a grid user interface.  From their site:</p>
<blockquote>
<p style="text-align: left;">Founded on the idea that we eat first with our eyes, TasteSpotting is our obsessive, compulsive collection of eye-catching images that link to something deliciously interesting on the other side. Think of TasteSpotting as a highly visual potluck of recipes, references, experiences, stories, articles, products, and anything else that inspires exquisite taste.</p>
</blockquote>
<p style="text-align: left;">Eye-catching is right.  This site was launched in 2007, I don&#8217;t know how long they&#8217;ve been using this display layout but it is the best one I have found to date.  The number of cells in the grid expand or contract depending on your screen size. Above is what I saw on my 14&#8243; laptop without scrolling and on my 24&#8243; iMac it displayed 3 rows of 6 images without scrolling!  So cool.  and (There&#8217;s more!?) yes, they use the grid display on all their main pages and the site rendered flawlessly on my blackberry.</p>
<p style="text-align: left;"><span style="text-decoration: underline;"><strong>UPDATE march 3, 2009:</strong></span><br />
I contacted the Tastespotting people and asked a few more questions about their awesome layout, enjoy!</p>
<p style="text-align: left;"><strong>RI -</strong> I love your grid user interface.  I blogged about yesterday for metaprinter.com.  Can you tell us more about the display?  Who designed it?  How long have you used it?  Would you ever switch away from it?  Do you read a newspaper or news site?  Do you think they can use a system like this effectively?</p>
<p style="text-align: left;"><strong>SARA-</strong> Hi Robert!</p>
<p>Thanks for the love, the mention! What more do you want to know about the display? We designed it (if you&#8217;re asking who *specifically* put the CSS/html together &#8211; that&#8217;s a group of my friends who are designers)</p>
<p>We&#8217;ve been using it for a little over 2 years ever since we launched the site. The site was launched expressly with this layout in mind for users. Not sure how we would switch away from this setup as the setup itself is kind of the purpose of the site &#8211; portal-y, gallery-like view of image-driven content.</p>
<p>Personally, I do read newspapers, but I&#8217;m not sure this design works for them, as news sites&#8217; content is so much more about the words than images. It is easy to visually scan 48 images and decide what is or isn&#8217;t worth a clickthrough, but words are harder to process that way. The design with large images works for anything/subject/category that has a lot of importance on the visuals &#8211; think of anything that has lots of magazines that are eye candy &#8211; food, fashion, cars&#8230;</p>
<p>That&#8217;s all I have. Let me know if you have more questions!</p>
<p>cheers,<br />
Sarah</p>
<p style="text-align: left;">
]]></content:encoded>
			<wfw:commentRss>http://blog.metaprinter.com/2009/02/new-york-times-article-skimmer-prototype/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

