<?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>kev/null &#187; lukew</title>
	<atom:link href="http://kevnull.com/tag/lukew/feed" rel="self" type="application/rss+xml" />
	<link>http://kevnull.com</link>
	<description></description>
	<lastBuildDate>Thu, 01 Mar 2012 02:07:54 +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>IA Summit: Content Page Design Best Practices</title>
		<link>http://kevnull.com/2008/04/ia-summit-content-page-design-best-practices.html</link>
		<comments>http://kevnull.com/2008/04/ia-summit-content-page-design-best-practices.html#comments</comments>
		<pubDate>Wed, 16 Apr 2008 08:53:03 +0000</pubDate>
		<dc:creator>Kevin Cheng</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Presentations]]></category>
		<category><![CDATA[content]]></category>
		<category><![CDATA[Design Discourse]]></category>
		<category><![CDATA[iasummit]]></category>
		<category><![CDATA[iasummit08]]></category>
		<category><![CDATA[iasummit2008]]></category>
		<category><![CDATA[lukew]]></category>

		<guid isPermaLink="false">http://kevnull.com/?p=511</guid>
		<description><![CDATA[Luke Wroblewski of Functioning Form and Yahoo! describes a framework for designing content on a site. He begins with a discussion on how we currently optimize for sites &#8211; by studying their hierarchy and how pages relate to each other within the site. However, the site does not live on its own but rather as [...]]]></description>
			<content:encoded><![CDATA[<p>Luke Wroblewski of <a href="http://lukew.com/ff">Functioning Form</a> and Yahoo! describes a framework for designing content on a site.</p>
<p>He begins with a discussion on how we currently optimize for sites &#8211; by studying their hierarchy and how pages relate to each other within the site. However, the site does not live on its own but rather as a node within an unstructured web. For most sites, the majority of their traffic is generated from external sources, not from within its hierarchy. Therefore, it&#8217;s worthwhile to spend much more time and effort optimizing designs for those who visit from outside.</p>
<p>In a site hierarchy, there is a home, a page may have parents, laterals and children. In contrast, web ecosystems have components to them roughly broken down as communication, display surfaces, content creators, content aggregators, and search (the categories are credited to <a href="http://tomchi.com">Tom Chi</a>, my colleague on <a href="http://ok-cancel.com">OK/Cancel</a>).</p>
<p><strong>Communication</strong> refers to medium such as instant messaging or email. Links and recommendations which come from personal sources fall under this category. The quality of these links are generally very high and people are likely to click on them as they are received directly from a trusted source.</p>
<p><strong>Display surfaces</strong> are places where one may show their support of a website or product. Common examples include MySpace sidebars, or the recent <a href="http://mash.yahoo.com">Yahoo! Mash</a>. Facebook&#8217;s modules on a user&#8217;s profile page can also represent a display surface.</p>
<p><strong>Content creators</strong> are where people are producing content which generally act as recommendations or information for their readers and subscribers. The most prevalent example of content creators are bloggers.</p>
<p><strong>Content aggregators</strong> represent the places where content creator feeds are collected for quick browsing, accessing and updating. My Yahoo!, iGoogle, Netvibes and feed readers are all examples of these.</p>
<p>The important thing to note, of course, is that all of these lead to the same place &#8211; i.e., your content. In order to design with these entry points in mind, we need to design to inform <strong>Context</strong>, illustrate <strong>Related </strong>material and of course, get the readers to the <strong>Content</strong> they were attempting to access</p>
<h2>Content</h2>
<p>Although seemingly obvious, it&#8217;s surprising how few of us follow the core advice Luke gives: <em>make the content your focus</em>.</p>
<p>He illustrates with an example from an old design of the Chicago Tribune, where an article on the Olympics occupied 24% of the screen real estate, leaving 76% to overhead such as navigation, advertising, etc. Other examples he gave included Yahoo! Answers, which had their content occupying 5% of screen real estate prior to their redesign and Buyit.com which has horrendous visual hierarchy.</p>
<p>Users have an expectation when they access the page, based on where they arrived from. Thus, making sure they can see the relevant content as easily as possible is important. They have certain expectations which must be met through easily scannable content &#8211; beginning with keeping the title tag of the site the same as the link and the title on the page.</p>
<p>He uses <a href="http://cnn.com/entertainment">CNN/entertainment</a> as an example of great hierarchy and how they also use bullet summaries to increase reader comprehension and deliver on promises quickly.</p>
<h2>Related</h2>
<p>Luke then shares the less is more philosophy and reminds us that we don&#8217;t have to show everything. &#8220;Spare us your site map,&#8221; he says as he shows a site that has their entire site as a side navigation.</p>
<p>There are, however, often related pieces of content that tie in with the content being viewed and these should be revealed and embedded in a clearly visible fashion</p>
<p>The ever popular BBC.com is used as an example. On just about any given story, they right side features very relevant categories and content. Further, for some stories, the left navigation changes. Rather than showing all of BBC&#8217;s categories, for example, a story on European Football shows European Football news and teams as the core navigation on the left.</p>
<p>He then references the ever popular and relevant book, <a href="http://kevnull.com/wp-admin/http/www.amazon.com/Paradox-Choice-Why-More-Less/dp/0060005696/ref=okcancel-20">The Paradox of Choice</a> by Barry Shwartz, reminding us that fewer choices tend to lead to more likelihood of action than more. Specifically, people who had 6 choices were more likely to act whilst those who had 10 tended to not choose at all. Of course, I couldn&#8217;t help but recall our own <a href="http://kevnull.com/wp-admin/http/www.ok-cancel.com/comic/90.html">references to choice overload</a>.</p>
<p>In terms of placement of related information, he recommends the left navigation side as the right tends to be viewed as advertisements. As one might suspect, readers do not click on links they don&#8217;t see so visibility is important.</p>
<p>Of course, all of this is irrelevant if your content wasn&#8217;t relevant in the first place. But if you make good on your content, then related calls to action are welcome.</p>
<h2>Context</h2>
<p>When the reader accesses a site through external means, they lack any sort of context. It&#8217;s important to indicate to readers:</p>
<ul>
<li>Who&#8217;s site is this?</li>
<li>What&#8217;s going on?</li>
<li>Is this a site I can trust?</li>
</ul>
<p>Ensure that this information is evident and the design of the page looks professional or appropriate for your purposes in order to build trust. Luke mentions the Stanford Web Credibility research which indicated more professionally designed sites were viewed as more trustworthy.</p>
<p>Finally, Luke mentions how on his own site, if a reader arrived through searching for a certain term, he uses that term to provide additional context. For example, he will pull up other related articles on his site based on the search term. He will also highlight the words which match the search term. Similarly, Luke illustrates how Yahoo! Answers bolds the search terms used.</p>
<p>Luke&#8217;s <a href="http://kevnull.com/wp-admin/http/www.lukew.com/resources/articles/ContentPages_LukeW_04072008.pdf">slides are available as a 4MB PDF</a> and he has his <a href="http://lukew.com/ff/entry.asp?675">own summary</a> as well as links to other writeups of his presentation on is blog.</p>
]]></content:encoded>
			<wfw:commentRss>http://kevnull.com/2008/04/ia-summit-content-page-design-best-practices.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

