<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/atom10full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" xml:lang="en-US">
  <id>tag:baymard.com,2005:/blog</id>
  <link type="text/html" rel="alternate" href="http://baymard.com" />
  
  <title>Baymard Institute</title>
  <updated>2012-02-07T09:43:00+01:00</updated>
  <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/atom+xml" href="http://feeds.feedburner.com/baymard" /><feedburner:info uri="baymard" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>baymard</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><entry>
    <id>tag:baymard.com,2005:Post/83</id>
    <published>2012-02-07T09:43:00+01:00</published>
    <updated>2012-02-07T23:56:21+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/GFqYq6eY3Uo/kano-model" />
    <title>UX and the Kano model</title>
    <content type="html">&lt;p&gt;I first encountered the Kano model when working on improving the customer&amp;#8217;s check-in experience at Copenhagen Airport. The model was conceived by Noriaki Kano in the 80s, and helps you analyze the customer experience of your product (or service), which ultimately allows you to invest more wisely in customer experience improvements.&lt;/p&gt;
&lt;p&gt;The Kano model assumes three different attribute types – basic, performance, and delight – that collectively constitute the &lt;strong&gt;customer experience&lt;/strong&gt; of your product.&lt;/p&gt;
&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;
&lt;p&gt;&lt;a href="http://assets.baymard.com/blog/kano-model-full-res.png"&gt;&lt;img src="http://assets.baymard.com/blog/kano-model.png" title="The Kano model can help you analyze the customer experience of your product. Click for larger version." alt="The Kano model can help you analyze the customer experience of your product. Click for larger version." /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The three attributes types are mapped in a coordinate system with &amp;#8220;Customer Satisfaction&amp;#8221; up the x-axis and &amp;#8220;Degree of Achievement&amp;#8221; (how well a given feature is executed in your product) along the y-axis.&lt;/p&gt;
&lt;p&gt;Let&amp;#8217;s take an in-depth look at each of these attribute types along with some examples.&lt;/p&gt;
&lt;h2&gt;Basic attributes&lt;/h2&gt;
&lt;p style="float:right;"&gt;&lt;a href="http://assets.baymard.com/blog/kano-model-full-res-1-basic.png"&gt;&lt;img src="http://assets.baymard.com/blog/kano-model-1-basic.png" title="Basic attributes are typically taken for granted so customers only take notice when you fail to deliver. Click for larger version." alt="Basic attributes are typically taken for granted so customers only take notice when you fail to deliver. Click for larger version." /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Basic attributes represent features that are so basic to the product that your customers just expect them to work. These features are often &lt;strong&gt;taken for granted&lt;/strong&gt; so customers rarely consciously look for them.&lt;/p&gt;
&lt;p&gt;Examples of basic attributes are:&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;For a service like air travel it might be that your flight won&amp;#8217;t be cancelled or that having a ticket guarantees you a seat on the flight.&lt;/li&gt;
	&lt;li&gt;For a web application like Gmail it might be that it&amp;#8217;s always available (close to 100% uptime) or that when you press send the email will in fact be sent to the recipient within seconds.&lt;/li&gt;
	&lt;li&gt;For an application like iTunes it might be that once you have purchased a song you get to play it as often as you like.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;When dealing with basic attributes there&amp;#8217;s not a direct relationship between the degree of achievement and customers satisfaction. When basic attributes are achieved your customer won&amp;#8217;t be particularly satisfied, as he assumes it goes without saying. But when you &lt;strong&gt;leave out&lt;/strong&gt; a basic attribute it doesn&amp;#8217;t matter how well you otherwise perform or delight, the entire customer experience is broken. In this sense, it is difficult to actively use basic attributes as a competitive advantage, but if you fail it will put your company at a severe competitive disadvantage.&lt;/p&gt;
&lt;h2&gt;Performance attributes&lt;/h2&gt;
&lt;p style="float:right;"&gt;&lt;a href="http://assets.baymard.com/blog/kano-model-full-res-2-performance.png"&gt;&lt;img src="http://assets.baymard.com/blog/kano-model-2-performance.png" title="Performance attributes are rife with competition and it can be cost-prohibitive to be best-in-class on everything. Click for larger version." alt="Performance attributes are rife with competition and it can be cost-prohibitive to be best-in-class on everything. Click for larger version." /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Performance attributes are features where there is a &lt;strong&gt;direct correlation&lt;/strong&gt; between the degree of achievement and customer satisfaction. As a consequence companies tend to compete on these attributes, differentiating their product by spending more (or less) than their competitors on certain performance attributes.&lt;/p&gt;
&lt;p&gt;Examples of performance attributes are:&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;For air travel it might be how much legroom you have (first &amp;amp; business class gets more than economy class) or how many stops there are on your journey.&lt;/li&gt;
	&lt;li&gt;For Gmail it might the the amount of free storage space.&lt;/li&gt;
	&lt;li&gt;For iTunes it might be the number of codecs and file formats that can be imported.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The logic goes: the more legroom you offer your passengers, the &lt;strong&gt;more satisfied&lt;/strong&gt; they will be. The steps are evolutionary, not revolutionary, and there&amp;#8217;s typically a cost directly tied to the degree of achievement which is why performance attributes are natural candidates for competition (although winning that battle can be tricky).&lt;/p&gt;
&lt;h2&gt;Delight attributes&lt;/h2&gt;
&lt;p style="float:right;"&gt;&lt;a href="http://assets.baymard.com/blog/kano-model-full-res-3-delight.png"&gt;&lt;img src="http://assets.baymard.com/blog/kano-model-3-delight.png" title="Delight attributes are difficult to achieve but once you do the returns can be exceptional. Click for larger version." alt="Delight attributes are difficult to achieve but once you do the returns can be exceptional. Click for larger version." /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Delight attributes represent the &lt;strong&gt;unexpected&lt;/strong&gt; – when you delight the customer by over-delivering or doing something out of the ordinary.&lt;/p&gt;
&lt;p&gt;Examples of delight attributes:&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;For air travel it might be getting food that actually tastes good.&lt;/li&gt;
	&lt;li&gt;For Gmail it might be Priority Inbox that intelligently label and sort your unread mail.&lt;/li&gt;
	&lt;li&gt;For iTunes it might be wireless syncing of apps and music.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Like the basic attributes, when dealing with delight attributes there&amp;#8217;s not a linear relationship between customer satisfaction and the degree of achievement. When a delight attribute isn&amp;#8217;t there the customer experience isn&amp;#8217;t affected negatively because – by definition – delight attributes are never expected by the customer. However, when a customer is faced with a delight attribute it completely takes them by surprise, often resulting in &lt;strong&gt;over-excitement&lt;/strong&gt; with your product, making it an effective engine for word-of-mouth.&lt;/p&gt;
&lt;h2&gt;Ever-Increasing Customer Expectations&lt;/h2&gt;
&lt;p&gt;One of the most important aspects with the Kano model is how time affects the attributes. Customer satisfaction with a given feature will &lt;strong&gt;deteriorate over time&lt;/strong&gt; as companies start compete on the feature and customers get accustomed to it.&lt;/p&gt;
&lt;p style="float:right;"&gt;&lt;a href="http://assets.baymard.com/blog/kano-model-full-res-time.png"&gt;&lt;img src="http://assets.baymard.com/blog/kano-model-time.png" title="People quickly get accustomed with new features and raise their expectations accordingly which means you must constantly invent new ways to delight and perform. Click for larger version." alt="People quickly get accustomed with new features and raise their expectations accordingly which means you must constantly invent new ways to delight and perform. Click for larger version." /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;When Gmail was introduced and offered 1GB free e-mail accounts it was revolutionary and the customer satisfaction was monumental – clearly a delight attribute. Nowadays, most free e-mail accounts offer similar storage capacity, to the point where ordinary users never have to worry about it. It has clearly moved from delight to performance, and is even starting to become a basic attribute.&lt;/p&gt;
&lt;p&gt;So what today is a delight attribute that customers get truly exited about, will eventually degrade into a performance attribute as the competition starts to follow up and compete on providing the same thing (or even improving upon it). Eventually a feature reaches a state where further improvements are so &lt;strong&gt;inconsequential&lt;/strong&gt; that they only matter when you fail to deliver – at this point it has become a basic attribute.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Hint: in an &lt;a href="http://www.youtube.com/watch?v=8r1CZTLk-Gk"&gt;entertaining interview&lt;/a&gt; Louis CK describe this dilemma of ever-increasing customer expectations quite well.&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;Takeaways from the Kano model&lt;/h2&gt;
&lt;p&gt;So how do you use the Kano model in to your current or upcoming web projects? Besides analyzing the customer experience of your product, the Kano model can be useful when reflecting on how to &lt;strong&gt;invest more wisely&lt;/strong&gt; in improving your customer experience. The following takeaways are particularly useful during this process:&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;The details don&amp;#8217;t matter if you don&amp;#8217;t get the fundamentals right, so the basic attributes need to work flawlessly before you focus on anything else.&lt;/li&gt;
	&lt;li&gt;You don&amp;#8217;t need to match every single performance attribute in the market head-on. Align your investments in performance attributes with the target audience of the product – this may of course vary significantly and warrant different variations of the same product.&lt;/li&gt;
	&lt;li&gt;Delivering unexpected delight attributes is what fuels word-of-mouth. Once you&amp;#8217;ve secured the basic attributes and some performance attributes, you should begin brainstorming on what delight attributes you can offer as this is what will truly set you apart from the competition.&lt;/li&gt;
	&lt;li&gt;Today’s delight attribute is tomorrow’s performance attribute, and six months from now it may very well be a basic attribute. Customer expectations continually increase so you have to continually reiterate and reinvent your offerings.&lt;/li&gt;
	&lt;li&gt;Having a deep understanding of the true needs of your customers, their context and their behavior, is absolutely crucial when inventing new delight attributes. Looking at what your competitors are doing won&amp;#8217;t help much as the delight attribute will no longer be a delight by the time you have imitated it.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href="http://baymard.com/blog/kano-model#post_comment"&gt;Post a comment (4 so far)&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=UX%20and%20the%20Kano%20model&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Fkano-model" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Related content&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://www.slideshare.net/jasonmesut/kano-a-quick-intro"&gt;Slideshow explaining the Kano model&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://www.youtube.com/watch?v=8r1CZTLk-Gk"&gt;Louis CK&amp;#8217;s &amp;#8216;Everything is amazing and nobody is happy&amp;#8217; interview&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/circles-of-care"&gt;Circles of Care: Segmenting User Engagement&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/GFqYq6eY3Uo" height="1" width="1"/&gt;</content>
    <author>
      <name>Christian Holst</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/kano-model</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/82</id>
    <published>2012-01-24T09:58:00+01:00</published>
    <updated>2012-02-06T19:38:19+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/B7YOkeJO1eA/ui-details" />
    <title>UI: Getting the Details Right</title>
    <content type="html">&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/ui-details-intro.png" title="Fi animate their case study call-to-action on hover." alt="Fi animate their case study call-to-action on hover." /&gt;&lt;/p&gt;
&lt;p&gt;User interface details matter to the overall user experience.&lt;/p&gt;
&lt;p&gt;Many users may not consciously notice these details on your site yet they do have an impact on the overall user experience. When everything feels just right the &lt;strong&gt;perception of your site&lt;/strong&gt; and brand is improved.&lt;/p&gt;
&lt;p&gt;In this article we&amp;#8217;ll look at 5 different types of UI details you should pay attention to.&lt;/p&gt;
&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;
&lt;h2&gt;Spatial indicators&lt;/h2&gt;
&lt;p&gt;An easy way to establish &lt;a href="http://baymard.com/blog/ux-illusion-of-space"&gt;virtual space&lt;/a&gt; is by using spatial indicators throughout your design. These are essentially any type of indicator that suggests space.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/ui-details-spatial-indicators-slideshow.png" title="Arrows and dots are used as spatial indicators for this slideshow plugin." alt="Arrows and dots are used as spatial indicators for this slideshow plugin." /&gt;&lt;/p&gt;
&lt;p class="caption"&gt;This jQuery plugin makes heavy use of spatial indicators, with a set of dots at the bottom to indicate the number of slides and arrows for next / previous actions.&lt;/p&gt;
&lt;p&gt;A good example of spatial indicators is the set of small dots you often see at the bottom of a slideshow, with one dot activated for the current slide. These dots indicate how much content there is and where you&amp;#8217;re currently at in the sequence (which indirectly suggests how much is ahead and before).&lt;/p&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/ui-details-spatial-indicator-breadcrumb.png" title="Apple makes good use of arrows in their breadcrumbs to indicate hierarchy." alt="Apple makes good use of arrows in their breadcrumbs to indicate hierarchy." /&gt;&lt;/p&gt;
&lt;p&gt;Another example of spatial indicators is a well-designed set of breadcrumbs that use arrows to imply hierarchy.&lt;/p&gt;
&lt;p&gt;Spatial indicators are &lt;strong&gt;often subtle&lt;/strong&gt; and may be rejected as mere decoration, but simple things like using an arrow instead of a middot can be important because an arrow denotes a path or direction, whereas a middot merely denotes separation.&lt;/p&gt;
&lt;h2&gt;Animations&lt;/h2&gt;
&lt;p&gt;Animations can be much more than flashing banner ads and fun cartoons. Subtle animations can be used to give the user a &lt;strong&gt;sense of direction and space&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/ui-details-animation-contain.gif" title="Fi use a subtle animation to encourage clicks when you hover their case study call-to-action." alt="Fi use a subtle animation to encourage clicks when you hover their case study call-to-action." /&gt;&lt;/p&gt;
&lt;p&gt;Animations can often be used successfully when going from one state to another. For example when you hover some anchor content the text and image change, inspiring the user to click.&lt;/p&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/ui-details-animation-facebook.gif" title="The Facebook iOS app slides the menu in from the left." alt="The Facebook iOS app slides the menu in from the left." /&gt;&lt;/p&gt;
&lt;p&gt;Or instead of toggling your menu&amp;#8217;s visibility on / off, a sliding animation can provide a sense of direction. This type of animation helps establish a virtual space, letting the user know where he is going and how to get back.&lt;/p&gt;
&lt;h2&gt;Hitarea&lt;/h2&gt;
&lt;p&gt;Clicking links make up nearly all navigation. Even when searching we tend to click a (search result) link to get to the page. Clearly the area that affords this interactivity is hugely important, yet it&amp;#8217;s often overlooked because browsers provide default behavior for it.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/ui-details-hitarea.jpeg" title="Making the hitarea include all elements of the article snippet makes sense as they all lead to the same content." alt="Making the hitarea include all elements of the article snippet makes sense as they all lead to the same content." /&gt;&lt;/p&gt;
&lt;p class="caption"&gt;A mock-up of what &lt;a href="http://baymard.com/blog/anchor-content-not-text"&gt;anchor content&lt;/a&gt; could look like at SFGate. Story image, headline, and text snippet, are combined into a single link with a single hover effect and hitarea.&lt;/p&gt;
&lt;p&gt;Generally you should consider if your hit areas are big enough. For example, if you designed a big button be sure that all of it can be clicked. And vice versa, making your hit area too big without any visual indications may result in accidental clicks.&lt;/p&gt;
&lt;p&gt;In short: the size of your &lt;strong&gt;hitarea should align&lt;/strong&gt; with the design in order to meets user expectations.&lt;/p&gt;
&lt;h2&gt;Icons&lt;/h2&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/ui-details-icons-google.png" title="When you hover the icons a tooltip appears explaining the action." alt="When you hover the icons a tooltip appears explaining the action." /&gt;&lt;/p&gt;
&lt;p class="caption"&gt;In the new Gmail design icons are used for all the primary buttons.&lt;/p&gt;
&lt;p&gt;Icons have two special properties, they are:&lt;/p&gt;
&lt;ol&gt;
	&lt;li&gt;&lt;em&gt;Recognizable&lt;/em&gt; – this is good, because the user can quickly find a specific icon in an interface due to its high fidelity and uniqueness, making it much easier to discern one option from another (as opposed to pure text options).&lt;/li&gt;
	&lt;li&gt;&lt;em&gt;Open to interpretation&lt;/em&gt; – this is bad, because some users will misinterpret your icons. For example, a printer icon might also look like a shredder. If you are making your own icons, or just icon styling, the likelihood for misinterpretations increase as people are not familiar with those icons.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Icons should preferably be used as a &lt;strong&gt;supplement&lt;/strong&gt; to text labels unless the user base will be using the same application every single day and are willing to learn what each icon represents.&lt;/p&gt;
&lt;h2&gt;Copywriting&lt;/h2&gt;
&lt;p&gt;When a user interacts with your site one of the most important navigational clues is your copy.&lt;/p&gt;
&lt;p&gt;This can be the naming of navigational elements, which not only allow a visitor to navigate your site, but also help new visitors understand what content they may find on your site.&lt;/p&gt;
&lt;p&gt;Careful naming of buttons and error messages is critical too since people may &lt;strong&gt;misinterpret&lt;/strong&gt; them if you use &lt;a href="http://baymard.com/blog/poor-copywriting"&gt;contextual or ambiguous&lt;/a&gt; words.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/ui-details-copywriting-continue.png" title="Many people don&amp;#39;t properly read button text so refrain from contextual words such as &amp;#39;Continue&amp;#39;." alt="Many people don&amp;#39;t properly read button text so refrain from contextual words such as &amp;#39;Continue&amp;#39;." /&gt;&lt;/p&gt;
&lt;p class="caption"&gt;During our usability test session 3 out of 10 test subjects misinterpreted contextual words such as &amp;#8220;Continue&amp;#8221;. In this checkout process some subjects simply read &amp;#8220;Continue&amp;#8230;&amp;#8221; and clicked the button expecting to continue their checkout.&lt;/p&gt;
&lt;p&gt;Your headlines should carry &lt;strong&gt;information-scent&lt;/strong&gt; allowing the user to accurately assess what content she will find, yet at the same time the headline must sound interesting to encourage clicks. This is further complicated when your headlines are featured outside the context of your site, e.g. shared on Twitter, which we talked about in our previous &lt;a href="http://baymard.com/blog/copywriting-useful-yet-intriguing-headlines"&gt;article&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;Final words&lt;/h2&gt;
&lt;p&gt;These kinds of details can help lift a user experience from good to great. However, if you don&amp;#8217;t get the basics right these kinds of details are worthless. A solid foundation must be in place for the details to matter.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://baymard.com/blog/ui-details#post_comment"&gt;Post a comment (6 so far)&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=UI%3A%20Getting%20the%20Details%20Right&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Fui-details" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Related content&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/ux-illusion-of-space"&gt;User Expectations: Create an Illusion of Space&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/anchor-content-not-text"&gt;HTML5: Anchor Content, Not Anchor Text&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/poor-copywriting"&gt;Poor Copywriting – the UX Problem That Will Never Go Away?&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/copywriting-useful-yet-intriguing-headlines"&gt;Copywriting: How to Write Useful (Yet Intriguing) Headlines&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/B7YOkeJO1eA" height="1" width="1"/&gt;</content>
    <author>
      <name>Jamie Appleseed</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/ui-details</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/81</id>
    <published>2012-01-10T09:53:00+01:00</published>
    <updated>2012-02-01T21:45:16+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/8zkjwqvguNo/copywriting-useful-yet-intriguing-headlines" />
    <title>Copywriting: How to Write Useful (Yet Intriguing) Headlines</title>
    <content type="html">&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/copywriting-how-to-write-headlines.png" title="Prefixing the intriguing part of the headline with a context helps draw in the user while still offering information scent." alt="Prefixing the intriguing part of the headline with a context helps draw in the user while still offering information scent." /&gt;&lt;/p&gt;
&lt;p&gt;Writing headlines for online editorial content can be a daunting task with conflicting advise.&lt;/p&gt;
&lt;p&gt;On the usability side people like &lt;a href="http://www.useit.com/alertbox/nanocontent.html"&gt;Jakob Nielsen&lt;/a&gt; argue that you must front load &lt;strong&gt;information scent&lt;/strong&gt; in your headlines. The goal is to convey as much useful information on what the article will be about so the user can make an informed decision on whether that is the right page or not.&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt; However, these headlines often end up so dull that nobody wants to open the article at all (unless they already know and trust the source).&lt;/p&gt;
&lt;p&gt;On the other hand, copywriters like &lt;a href="http://www.copyblogger.com/magnetic-headlines/"&gt;Brian Clark&lt;/a&gt; claim that the purpose of a headline is to &lt;strong&gt;lure in&lt;/strong&gt; visitors, e.g. &lt;em&gt;&amp;#8220;What Everybody Ought to Know About Writing Great Headlines&amp;#8221;&lt;/em&gt; or &lt;em&gt;&amp;#8220;The Secret for Writing Better Blog Post Titles&amp;#8221;&lt;/em&gt;. While intriguing, these headlines contain little information scent (and it&amp;#8217;s almost never front loaded), and the content-to-noise ratio is often quite bad. In the first example 7 out of 9 words are ambiguous words that would fit any article.&lt;/p&gt;
&lt;p&gt;One important thing to consider is that most people will read your headline &lt;strong&gt;outside the context&lt;/strong&gt; of your site. Maybe they see it as a newsletter subject line in their mailbox, or maybe they find you in a search result, or they see your article re-tweeted on Twitter, or stumble upon it in a &amp;#8220;useful resources&amp;#8221; link collection, and so on.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/copywriting-how-to-write-headlines-out-of-context.png" title="An article headline will often be used outside the site&amp;#39;s context." alt="An article headline will often be used outside the site&amp;#39;s context." /&gt;&lt;/p&gt;
&lt;p class="caption"&gt;&lt;em&gt;Do your headlines make sense when read outside your site&amp;#8217;s context?&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;This has a significant impact on how you should write headlines. In essence, your headlines must be meaningful outside the context of your site. So you can&amp;#8217;t assume that people know your site is about &amp;#8220;web usability&amp;#8221;, or &amp;#8220;bulldog breeding&amp;#8221;, or &amp;#8220;emerging markets&amp;#8221;, etc. You have to make an effort to try to make you headline &lt;strong&gt;understandable without&lt;/strong&gt; this context.&lt;/p&gt;
&lt;h2&gt;Provide Context, Then Spark Interest&lt;/h2&gt;
&lt;p&gt;But how do you do this in practice if you also want an &amp;#8220;attention grabbing&amp;#8221; headline that spark interest? An approach we&amp;#8217;ve found useful is the style of: &lt;em&gt;[Context]: [Spark interest]&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;An example of this approach is one of our earlier articles titled &lt;em&gt;&amp;#8220;Form Field Usability: Avoid Multi-Column Layouts&amp;#8221;&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/copywriting-how-to-write-headlines-context-spark-interest.png" title="Context is pre-fixed and then interest is sparked." alt="Context is pre-fixed and then interest is sparked." /&gt;&lt;/p&gt;
&lt;p class="caption"&gt;&lt;em&gt;We set the scene with a context: &amp;#8220;Form Field Usability&amp;#8221;, and then go on to spark interest: &amp;#8220;Avoid Multi-Column Layouts&amp;#8221;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;If we&amp;#8217;d written this headline entirely the copywriter&amp;#8217;s way it might have been something like &lt;em&gt;&amp;#8220;The Little Told Secret of Why You Should Avoid Using Multi-Column Layouts&amp;#8221;&lt;/em&gt;, which is certainly an interesting headline, but it also comes with some severe drawbacks:&lt;/p&gt;
&lt;ol&gt;
	&lt;li&gt;&lt;strong&gt;No context&lt;/strong&gt; – The headline can easily be misinterpreted outside the site&amp;#8217;s context. Does it mean you should avoid multi-column layouts when writing a paper in Word (wrong)? Or when designing a sales brochure (wrong)? Or when designing a checkout process (correct)?&lt;/li&gt;
	&lt;li&gt;&lt;strong&gt;Poor scannability&lt;/strong&gt; – The headline is difficult to scan when presented along with 9 other search results, as it requires you to read the entire headline before it makes sense.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;By pre-fixing the headline with a context, you not only &lt;strong&gt;avoid ambiguity&lt;/strong&gt; you also improve scannability.&lt;/p&gt;
&lt;p&gt;Here&amp;#8217;s some more examples of headlines we&amp;#8217;ve previously written in this style:&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;A/B Testing: Begin with a Problem and Hypothesis&lt;/li&gt;
	&lt;li&gt;E-Commerce Usability: Exploring the Customer&amp;#8217;s Checkout Experience 2011&lt;/li&gt;
	&lt;li&gt;Readability: the Optimal Line Length&lt;/li&gt;
	&lt;li&gt;HTML5: Anchor Content, Not Anchor Text&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Granted, this technique shouldn&amp;#8217;t be your only writing style, but the next time you are writing a headline consider that it might be read &lt;strong&gt;outside&lt;/strong&gt; your site&amp;#8217;s context and give this method a try.&lt;/p&gt;
&lt;p&gt;Do you have other ways of front loading information scent while keeping your headlines interesting? Then &lt;a href="http://baymard.com/blog/copywriting-useful-yet-intriguing-headlines#post_comment"&gt;post a comment (6 so far)&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=Copywriting%3A%20How%20to%20Write%20Useful%20%28Yet%20Intriguing%29%20Headlines&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Fcopywriting-useful-yet-intriguing-headlines" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Related articles&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/poor-copywriting"&gt;Poor Copywriting – the UX Problem That Will Never Go Away?&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/contextual-words-are-usability-poison"&gt;Contextual Words like &amp;#8216;Continue&amp;#8217; are Usability Poison&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/8zkjwqvguNo" height="1" width="1"/&gt;</content>
    <author>
      <name>Christian Holst</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/copywriting-useful-yet-intriguing-headlines</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/80</id>
    <published>2011-12-27T17:21:00+01:00</published>
    <updated>2011-12-27T17:45:53+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/wp0DgYKagx4/2011-and-2012" />
    <title>Baymard: 2011 and 2012</title>
    <content type="html">&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/2010-word-cloud.png" title="Some of the most popular words at Baymard." alt="Some of the most popular words at Baymard." /&gt;&lt;/p&gt;
&lt;p&gt;Here at Baymard we write three different categories of UX articles: 1) Research &amp;amp; Guidelines, 2) Case studies, and 3) Observations.&lt;/p&gt;
&lt;p&gt;We know a lot of you started subscribing to our articles during the year (thank you!), so below is a list with some of &lt;strong&gt;our favorite articles&lt;/strong&gt; from each of these three categories in case you missed them (or just want to revisit old favorites):&lt;/p&gt;
&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;
&lt;h3&gt;1) Research &amp;amp; Guidelines&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/"&gt;Fundamental Guidelines Of E-Commerce Checkout Design&lt;/a&gt; – guest article on Smashing Magazine based on our Checkout Usability report&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/simplifying-sign-up"&gt;19 Ways to Simplify &amp;#8216;Sign Up&amp;#8217;&lt;/a&gt; – our most popular article of the year with 2200+ tweets and 75 comments&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/avoid-multi-column-forms"&gt;Form Field Usability: Avoid Multi-Column Layouts&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/ux-illusion-of-space"&gt;User Expectations: Create an Illusion of Space&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;2) Case studies&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/ux-considerations-designing-lenshawk"&gt;Case: 7 UX Considerations When Designing Lens Hawk&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://uxdesign.smashingmagazine.com/2011/11/10/redesigning-the-country-selector/"&gt;Redesigning the Country Selector&lt;/a&gt; – guest article on Smashing Magazine with 4 UX design iterations&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/category-vs-product"&gt;Home Page Strategy: Category vs. Product&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/responsive-web-design"&gt;Responsive Web Design and Mobile Devices&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;3) Observations&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/poor-copywriting"&gt;Poor Copywriting – the UX Problem That Will Never Go Away?&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/one-page-checkout"&gt;One Page Checkouts – the Holy Grail of Checkout Usability?&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/interfaces-with-less-information"&gt;Design Trend: Interfaces with Less Information&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;2012: Intensified UX Research Activities&lt;/h2&gt;
&lt;p&gt;In 2011 we&amp;#8217;ve published the Checkout Usability research report. During 2012 we will intensify the research activities with a database with case studies of the checkout experience at the major e-commerce sites. This will of course also lead to a lot more research based UX articles going your way.&lt;/p&gt;
&lt;p&gt;Thanks to all of you who read, tweet, and comment on our articles &amp;#8211; we truly enjoy the interaction.&lt;/p&gt;
&lt;p&gt;Have a wonderful 2012!&lt;/p&gt;
&lt;p&gt;- Jamie &amp;amp; Christian&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=Baymard%3A%202011%20and%202012&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2F2011-and-2012" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/wp0DgYKagx4" height="1" width="1"/&gt;</content>
    <author>
      <name>Baymard Institute</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/2011-and-2012</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/79</id>
    <published>2011-12-06T10:04:00+01:00</published>
    <updated>2011-12-17T12:53:55+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/tpcLHxdewuI/ui-subtle-textures" />
    <title>UI: Adding Subtle Textures for Depth</title>
    <content type="html">&lt;p&gt;More and more sites and applications are using subtle textures to give their design a more distinguished look.&lt;/p&gt;
&lt;p&gt;The wise use of subtle textures for backgrounds and other elements can add a lot to a design, making it &lt;strong&gt;feel more real&lt;/strong&gt; or physical. A solid color feels very flat in the digital world because it is completely clean, but the second you add a texture, it comes alive – the surface suddenly has depth.&lt;/p&gt;
&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;
&lt;p&gt;Especially apps designed for &lt;strong&gt;touch devices&lt;/strong&gt; seem to be adopting textures – and for a good reason: these apps tend to mimic the real world much more than desktop applications, and in the real world there&amp;#8217;s textures everywhere.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/subtle-textures-facebook-log-in.png" class="no_frame" title="The &amp;#39;Log In&amp;#39; of Facebook&amp;#39;s iOS app." alt="The &amp;#39;Log In&amp;#39; of Facebook&amp;#39;s iOS app." /&gt;&lt;/p&gt;
&lt;p class="caption"&gt;&lt;em&gt;The background on Facebook&amp;#8217;s iOS &amp;#8220;Log In&amp;#8221; screen feels like a piece of cloth.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;There&amp;#8217;s many interesting things to note about this screen. First, the background uses a radial gradient combined with a speckle texture, making it feel like a &lt;strong&gt;piece of cloth&lt;/strong&gt; that has been stretched across the screen. The radial gradient cleverly highlights the most important part of the screen – the &amp;#8220;Log In&amp;#8221; fields.&lt;/p&gt;
&lt;p&gt;Interestingly, the cloth-like background is juxtaposed with a &lt;strong&gt;clean set of fields&lt;/strong&gt; and &amp;#8220;Log In&amp;#8221; button, making them stand out as &amp;#8220;perfect&amp;#8221; and appealing options. Sure, the clever use of shadows and a high level of contrast are factors in making them stand out, but the fact that they are completely clean (despite shadows and gradients) makes them feel like more appealing options.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/subtle-textures-apple-gradient.png" title="Finder and other applications have a subtle speckle texture in the control bar." alt="Finder and other applications have a subtle speckle texture in the control bar." /&gt;&lt;/p&gt;
&lt;p class="caption"&gt;&lt;em&gt;A Finder window in Mac &lt;span class="caps"&gt;OSX&lt;/span&gt; Lion features a subtle speckle texture for the control bar.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Apple too has been using a subtle speckle texture on top of the gradient as a background for Finder&amp;#8217;s control bar. However, once again the controls and fields are kept clean.&lt;/p&gt;
&lt;p&gt;These two examples would suggest that textures are more &lt;strong&gt;appropriate&lt;/strong&gt; to use on backgrounds and not buttons or other controls, which should be appealing to interact with. Maybe this is just a coincidence. Maybe it is an emerging trend in the digital world. Who knows?&lt;/p&gt;
&lt;p&gt;Somehow it just &lt;em&gt;feels&lt;/em&gt; &amp;#8220;right&amp;#8221; when you look at it.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://baymard.com/blog/ui-subtle-textures#post_comment"&gt;Post a comment (8 so far)&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=UI%3A%20Adding%20Subtle%20Textures%20for%20Depth&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Fui-subtle-textures" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Related content&lt;/h3&gt;
&lt;p&gt;Check out &lt;a href="http://trentwalton.com/category/articles/"&gt;Trent Walton&amp;#8217;s blog&lt;/a&gt; where he creates a new texture for each blogpost. Beautiful although not always particularly subtle. More art than UX.&lt;/p&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/tpcLHxdewuI" height="1" width="1"/&gt;</content>
    <author>
      <name>Jamie Appleseed</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/ui-subtle-textures</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/78</id>
    <published>2011-11-16T10:55:00+01:00</published>
    <updated>2012-01-14T12:03:23+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/J6QnDdj_m7Y/facebook-timeline-design" />
    <title>UI: Thoughts on the New Facebook Timeline Design</title>
    <content type="html">&lt;p&gt;The new Facebook timeline is a &lt;strong&gt;dramatic departure&lt;/strong&gt; from the current profile view.&lt;/p&gt;
&lt;p&gt;There&amp;#8217;s many things to like about it: good use of metaphor, a sense of space, and a simple navigation model – all of it presented in an aesthetically pleasing package.&lt;/p&gt;
&lt;p&gt;This article aims to highlight some of the thoughts and observations we made on first look.&lt;/p&gt;
&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;
&lt;h2&gt;It&amp;#8217;s a good metaphor&lt;/h2&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/facebook-timeline-metaphor.png" title="The new Facebook Timeline design." alt="The new Facebook Timeline design." /&gt;&lt;/p&gt;
&lt;p&gt;The &lt;strong&gt;metaphor works&lt;/strong&gt; really well. A line cutting down the middle of the screen, with all the events from your life tied to it in chronological order, from the day you were born up to the present. A timeline of your life. (Or at least your Facebook presence).&lt;/p&gt;
&lt;p&gt;Interestingly, this timeline model works exceptionally well digitally – interactive and forever expanding, yet still easy to use.&lt;/p&gt;
&lt;p&gt;It would be interesting to see a newspaper such as the New York Times organize their homepage the same way, or have a historical event cataloged in a similar style.&lt;/p&gt;
&lt;h2&gt;Just scroll&lt;/h2&gt;
&lt;p&gt;The timeline features a &lt;strong&gt;deceptively simple&lt;/strong&gt; navigation model: you can go up, or you can go down. Down goes back in time. Up brings you towards the present.&lt;/p&gt;
&lt;p&gt;This means the space you&amp;#8217;re navigating within is very tangible. While the link-based navigation can be helpful, you don&amp;#8217;t actually need it – you simply scroll in the direction you want to go.&lt;/p&gt;
&lt;p&gt;Unlike a typical online navigation model, you don&amp;#8217;t click a link to get to a page, then click another link to get to yet another page, and then click a third link to get back to the first page again (or was that actually the second page you just returned to? Or a completely new one?). No, on the timeline you just scroll.&lt;/p&gt;
&lt;p&gt;Scrolling &lt;em&gt;is&lt;/em&gt; the navigation.&lt;/p&gt;
&lt;h2&gt;Sense of place and direction&lt;/h2&gt;
&lt;p&gt;Despite the insane amount of information being displayed on this one single page, you rarely feel lost. This is likely because the triad for creating a &lt;strong&gt;sense of space&lt;/strong&gt; is fulfilled:&lt;/p&gt;
&lt;ol&gt;
	&lt;li&gt;Where have I been?&lt;/li&gt;
	&lt;li&gt;Where am I now?&lt;/li&gt;
	&lt;li&gt;Where can I go?&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;a href="http://assets.baymard.com/blog/facebook-timeline-sense-of-space-full.png"&gt;&lt;img src="http://assets.baymard.com/blog/facebook-timeline-sense-of-space.png" title="Click for a 1:1 image." alt="Click for a 1:1 image." /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p class="caption"&gt;&lt;em&gt;Click for a 1:1 image.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;A dynamically expanding and collapsing &amp;#8220;calendar&amp;#8221; navigation (showing all years and the 12 months of the year you&amp;#8217;re currently looking at), combined with a header displaying year and month, gives you a good idea of where you&amp;#8217;re currently at (#2). The flood of timestamps – one on each event – doesn&amp;#8217;t hurt either.&lt;/p&gt;
&lt;p&gt;The simple navigation model of just scrolling down to go back in time and scrolling up to go forward in time, means you always know where you&amp;#8217;re coming from (#1) and where to go (#3).&lt;/p&gt;
&lt;p&gt;This is an excellent example of how to &lt;a href="http://baymard.com/blog/ux-illusion-of-space"&gt;create an illusion of space&lt;/a&gt; in the online realm.&lt;/p&gt;
&lt;h2&gt;It looks great&lt;/h2&gt;
&lt;p&gt;Even though everything is very blue (seriously, the background is one shade of blue, header and links another, timeline a third) this new design looks and works great.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/facebook-timeline-collapsed-expanded.png" title="Certain events are only displayed as a dot until you hover and a dialog opens with the actual content." alt="Certain events are only displayed as a dot until you hover and a dialog opens with the actual content." /&gt;&lt;/p&gt;
&lt;p&gt;Simple timeline events (e.g. a “Like” with no comments) are collapsed to make the timeline less cluttered. Visual posts (photos, maps, etc.) on the other hand are typically expanded, making the overall timeline seem more interesting and &lt;strong&gt;alluring&lt;/strong&gt; as there&amp;#8217;s a good ratio between visuals and text.&lt;/p&gt;
&lt;p&gt;Massive amounts of user-generated content, all presented in a neat and intuitive package. Elegant.&lt;/p&gt;
&lt;h2&gt;It&amp;#8217;s scary&lt;/h2&gt;
&lt;p&gt;It&amp;#8217;s a little scary just how much Facebook knows about you. We always knew this, but in the old design things quickly disappeared from your Wall. &amp;#8220;Out of sight, out of mind&amp;#8221; right? Well, it&amp;#8217;s not out of sight anymore. The new timeline design makes it painfully clear just how much personal data Facebook stores about you.&lt;/p&gt;
&lt;p&gt;It&amp;#8217;s a very powerful &lt;strong&gt;visualization&lt;/strong&gt; which could make some people even more considerate of how much (or little) they share going forward.&lt;/p&gt;
&lt;h2&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;The new timeline design is really interesting. From a UX perspective it&amp;#8217;s deceptively simple. Many things to like. Some to dislike.&lt;/p&gt;
&lt;p&gt;What&amp;#8217;s your take? Share your thoughts and observations &lt;a href="http://baymard.com/blog/facebook-timeline-design#post_comment"&gt;in a comment (10 so far)&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=UI%3A%20Thoughts%20on%20the%20New%20Facebook%20Timeline%20Design&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Ffacebook-timeline-design" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Related content&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://techcrunch.com/2011/09/22/how-to-enable-facebook-timeline/"&gt;Guide on how to enable Facebook Timeline yourself&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/ux-illusion-of-space"&gt;User Expectations: Create an Illusion of Space&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/fast-and-easy-user-sign-up"&gt;Reducing Sign Up Friction&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/J6QnDdj_m7Y" height="1" width="1"/&gt;</content>
    <author>
      <name>Jamie Appleseed</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/facebook-timeline-design</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/77</id>
    <published>2011-11-01T09:21:00+01:00</published>
    <updated>2012-01-13T00:03:42+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/TKz_-nU_wIo/ways-to-instill-trust" />
    <title>13 Ways to Make Your Website Seem More Trustworthy</title>
    <content type="html">&lt;p&gt;A typical new visitor to your website will determine whether to stay or leave within the first &lt;a href="http://www.useit.com/alertbox/page-abandonment-time.html"&gt;15 seconds&lt;/a&gt;. Since the web got infinite alternatives to your site, it&amp;#8217;s crucial that you immediately instill a sense of trust.&lt;/p&gt;
&lt;p&gt;So without further ado, here&amp;#8217;s &lt;del&gt;10&lt;/del&gt;, 13 ways to make your site seem more &lt;strong&gt;trustworthy&lt;/strong&gt; at first glance.&lt;/p&gt;
&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;
&lt;h3&gt;1) Invest In Design&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-invest-in-design.png" title="Investing in design shows the visitor you&amp;#39;re serious" alt="Investing in design shows the visitor you&amp;#39;re serious" /&gt;&lt;/p&gt;
&lt;p&gt;An &lt;strong&gt;aesthetically&lt;/strong&gt; pleasing site will show the visitor that you&amp;#8217;re serious and didn&amp;#8217;t just hack something together in the dark hours of the night.&lt;/p&gt;
&lt;p&gt;A well-designed site (not to confuse with over-designed) shows that you&amp;#8217;ve spent time and money on it, instilling trust.&lt;/p&gt;
&lt;h3&gt;2) Show A Pulse&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-show-a-pulse.png" title="Display recently-updated content so visitors can see your site is alive an kicking." alt="Display recently-updated content so visitors can see your site is alive an kicking." /&gt;&lt;/p&gt;
&lt;p&gt;It&amp;#8217;s important to show new visitors that the content they&amp;#8217;re seeing isn&amp;#8217;t on some old abandoned site left for the eternal Internet archive.&lt;/p&gt;
&lt;p&gt;Display some &lt;strong&gt;recently updated&lt;/strong&gt; content (with a date) to show that your site is up to date. Having a blog or an embedded Twitter feed are great ways to show your site and people behind it are still active.&lt;/p&gt;
&lt;h3&gt;3) Humanize Your Website&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-humanize-your-website.png" title="Show pictures or videos of you and your team to humanize your website." alt="Show pictures or videos of you and your team to humanize your website." /&gt;&lt;/p&gt;
&lt;p&gt;People don&amp;#8217;t trust a website &amp;#8211; they &lt;strong&gt;trust the people&lt;/strong&gt; / brand behind the website. That&amp;#8217;s why you should use real images of you and your team. This way people can see that a real person is behind your site, and not some robot. It humanizes your website.&lt;/p&gt;
&lt;p&gt;You can take this a step further by using videos to present you, your team, or your products.&lt;/p&gt;
&lt;h3&gt;4) Utilize Social Proof&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-utilize-social-proof.png" title="Show that other people trust your site and visitors will be more likely to trust it too." alt="Show that other people trust your site and visitors will be more likely to trust it too." /&gt;&lt;/p&gt;
&lt;p&gt;Social proof – showing that &lt;strong&gt;other people&lt;/strong&gt; use and trust your site – is a very important factor in establishing trust, as it&amp;#8217;s deeply rooted in human beings to look at how others behave and then mimic it.&lt;/p&gt;
&lt;p&gt;Social proof can be as simple as having a Facebook fans / Twitter followers / &lt;span class="caps"&gt;RSS&lt;/span&gt; subscribers counter or user comments on your site. Alternatively, you can also use more detailed and in-depth &amp;#8220;proof&amp;#8221; such as customer case studies or video testimonials.&lt;/p&gt;
&lt;h3&gt;5) Make It Speedy&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-make-it-speedy.png" title="Your site will be taken more seriously if it loads fast." alt="Your site will be taken more seriously if it loads fast." /&gt;&lt;/p&gt;
&lt;p&gt;Slow loading sites tend to come across as less serious, degrading the trust relationship.&lt;/p&gt;
&lt;p&gt;It doesn&amp;#8217;t really matter why your site is slow, &lt;a href="http://baymard.com/blog/making-a-slow-site-appear-fast"&gt;47%&lt;/a&gt; of all web visitors expect your site to load in &lt;strong&gt;2 seconds&lt;/strong&gt; or less. You can, however, cheat by speeding up the &lt;a href="http://baymard.com/blog/making-a-slow-site-appear-fast"&gt;perceived load time&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;6) Familiarity Breeds Trust&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-familiarity-breeds-trust.jpeg" title="Make your site easy to use by tapping into web conventions." alt="Make your site easy to use by tapping into web conventions." /&gt;&lt;/p&gt;
&lt;p&gt;New visitors will &lt;strong&gt;feel familiar&lt;/strong&gt; with your site much faster if it&amp;#8217;s easy to use.&lt;/p&gt;
&lt;p&gt;A well-structured site tapping into the most common web conventions goes a long way in making your visitors feel familiar with (and thus in control of) your site.&lt;/p&gt;
&lt;h3&gt;7) Leverage Other Brands&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-leverage-other-brands.png" title="Affiliate yourself with other powerful brands by showing their logos on your site." alt="Affiliate yourself with other powerful brands by showing their logos on your site." /&gt;&lt;/p&gt;
&lt;p&gt;Partner logos, services you use, trade organizations you&amp;#8217;re affiliated with, places you&amp;#8217;ve been reviewed, site seals, etc. – it&amp;#8217;s all good ways to leverage the &lt;strong&gt;brand power&lt;/strong&gt; of other organizations. Affiliating yourself with these brands shows you&amp;#8217;re in good company, suggesting that the visitor will be in good company with you too.&lt;/p&gt;
&lt;p&gt;This is why you often see sites boast &amp;#8220;Seen in New York Times&amp;#8221; and so on – even if the actual mention had negative elements. If you sell something and don&amp;#8217;t have any other brands to tap into then simply showing the logos of credit cards you accept on your site is better than nothing.&lt;/p&gt;
&lt;h3&gt;8) Who Are You?&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-who-art-thou.png" title="Craft a good about page so the visitor can familiarize themselves with you and your brand." alt="Craft a good about page so the visitor can familiarize themselves with you and your brand." /&gt;&lt;/p&gt;
&lt;p&gt;A &lt;a href="http://baymard.com/blog/crafting-a-better-about-page"&gt;good about page&lt;/a&gt; is a great way to quickly instill trust in new visitors curious about your site.&lt;/p&gt;
&lt;p&gt;Make the visitor feel she &lt;strong&gt;knows you&lt;/strong&gt; and your site better and send her to the primary content on your site – content she is likely to be interested in.&lt;/p&gt;
&lt;h3&gt;9) Don&amp;#8217;t Hide&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-do-not-hide.png" title="Show your real address on a map so people can see you exist." alt="Show your real address on a map so people can see you exist." /&gt;&lt;/p&gt;
&lt;p&gt;On the Internet anyone can be anonymous. Don&amp;#8217;t be. Displaying your &lt;strong&gt;real address&lt;/strong&gt; tells the visitor you have nothing to hide. Furthermore, if the visitor knows the place, you&amp;#8217;ve got something in common too.&lt;/p&gt;
&lt;p&gt;If you live in a more obscure place and cater to an international audience, then consider showing your address on a map. Actually showing your address on a map makes an otherwise unrecognizable address seem more trustworthy, as the user can literally see the place exists.&lt;/p&gt;
&lt;h3&gt;10) Proofread&lt;/h3&gt;
&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/instill-trust-proofread.jpg" title="Spelling mistakes et al make you seem less professional and typically decrease trustworthiness." alt="Spelling mistakes et al make you seem less professional and typically decrease trustworthiness." /&gt;&lt;/p&gt;
&lt;p&gt;Obvious grammatical and spelling errors on your site will immediately tell the visitor that you aren&amp;#8217;t taking his time serious – a bad start for establishing trust.&lt;/p&gt;
&lt;p&gt;In our experience, grammatical and &lt;strong&gt;spelling errors&lt;/strong&gt; are more forgivable on informal channels such as your blog, Twitter account, Facebook page, etc – part of the appeal is that the content hasn&amp;#8217;t gone through multiple layers of marketing teams, copywriting, proofreading, etc. On your more formal channels and all static pages hiring a proofreader can be a good idea and easily worth the cost.&lt;/p&gt;
&lt;h3&gt;11) Suggestions?&lt;/h3&gt;
&lt;p&gt;Do you know other ways to make a site seem more trustworthy at first glance? Then share them in &lt;a href="http://baymard.com/blog/ways-to-instill-trust#post_comment"&gt;a comment (9 so far)&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=13%20Ways%20to%20Make%20Your%20Website%20Seem%20More%20Trustworthy&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Fways-to-instill-trust" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Ideas Added by Commenters:&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;11) Have authoritative content&lt;/strong&gt; (added by Janar).&lt;br /&gt;
I would add having a authoritative content. When content looks like you really know what you are talking about (even if you don’t) it seems more trustworthy.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;12) Transparency&lt;/strong&gt; (added by Sara Durning).&lt;br /&gt;
If you have a guarantee or accreditation post it globally or central to the task being performed. Let people know that your forms are secure and include a link to the privacy policy.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;13) Friendly Error Recovery&lt;/strong&gt; (added by Sara Durning).&lt;br /&gt;
Support error recovery with friendly and helpful messaging. This includes creating a custom 404 page.&lt;/p&gt;
&lt;h3&gt;Related articles&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/making-a-slow-site-appear-fast"&gt;Making a Slow Site Appear Fast&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/crafting-a-better-about-page"&gt;10 Ideas for Crafting a Better &amp;#8216;About&amp;#8217; Page&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/cart-abandonment"&gt;E-Commerce: Why Customers Abandon Their Shopping Cart&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/TKz_-nU_wIo" height="1" width="1"/&gt;</content>
    <author>
      <name>Christian Holst</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/ways-to-instill-trust</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/76</id>
    <published>2011-10-11T09:28:00+02:00</published>
    <updated>2011-11-15T23:54:38+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/6UjG3EgpM5s/inline-call-to-action" />
    <title>User Expectations Trump "Persuasive Design"</title>
    <content type="html">&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/inline-cta-preview.png" title="The inline call to action box." alt="The inline call to action box." /&gt;&lt;/p&gt;
&lt;p&gt;For some time now we&amp;#8217;ve had two different email newsletter sign up forms here on Baymard. The hypothesis was: &lt;em&gt;The traditional &amp;#8220;sidebar sign up form&amp;#8221; have no space for explaining benefits + It doesn&amp;#8217;t capture readers as well because it&amp;#8217;s not placed right after the user has finished reading an article.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;So we&amp;#8217;ve also had an &lt;strong&gt;inline call-to-action&lt;/strong&gt; box for newsletter sign up, placed right at the end of each article&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;:&lt;/p&gt;
&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/inline-call-to-action.png" title="Only 35% use the inline form." alt="Only 35% use the inline form." /&gt;&lt;/p&gt;
&lt;p&gt;Our assumption was that the premium placement and the possibility to write some explaining copy would make the inline sign up form generate most of the new email subscribers.&lt;/p&gt;
&lt;p&gt;Over the last year the sign up distribution has been &lt;strong&gt;35% for the inline form&lt;/strong&gt; and 65% have used the sidebar form. This was surprising because there isn&amp;#8217;t any real copy in conjunction to the sidebar sign up form, and it requires the reader to scroll to the top &amp;#8211; so &amp;#8220;feature wise&amp;#8221; the inline should have the upper hand. The sidebar sign up however have the benefit of having the same placement on most blogs throughout the last decade. Most web savvy users will instinctively look for it there.&lt;/p&gt;
&lt;p&gt;This distribution, &lt;a href="http://baymard.com/blog/form-field-usability-matching-user-expectations"&gt;once&lt;/a&gt; &lt;a href="http://baymard.com/blog/ux-illusion-of-space"&gt;more&lt;/a&gt;, tells us just how much a &lt;strong&gt;user&amp;#8217;s assumptions&lt;/strong&gt; and expectations from other sites will impact how your site is used. So while you can radically rethinking site structure, web conventions still rule.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://baymard.com/blog/inline-call-to-action#post_comment"&gt;Post a comment (2 so far)&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=User%20Expectations%20Trump%20%22Persuasive%20Design%22&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Finline-call-to-action" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Related articles&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/ux-illusion-of-space"&gt;User Expectations: Create an Illusion of Space&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/form-field-usability-matching-user-expectations"&gt;Form Field Usability: Matching User Expectations&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/6UjG3EgpM5s" height="1" width="1"/&gt;</content>
    <author>
      <name>Christian Holst</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/inline-call-to-action</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/75</id>
    <published>2011-10-09T13:10:00+02:00</published>
    <updated>2011-10-11T09:05:02+02:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/UApCZ-dml50/steve-jobs" />
    <title>Jobs' Impact on the Design &amp; UX Industry</title>
    <content type="html">&lt;p&gt;&lt;img src="http://assets.baymard.com/blog/steve-jobs.png" title="Rest in peace, Steve Jobs" alt="Rest in peace, Steve Jobs" /&gt;&lt;/p&gt;
&lt;p&gt;36.88% of our traffic the last 31 days has been on Apple devices.&lt;/p&gt;
&lt;p&gt;I think if there&amp;#8217;s any industry that will be forever indebted to this man, Steve Jobs, it is the &lt;strong&gt;design and UX&lt;/strong&gt; industry. While Jobs didn&amp;#8217;t invent the industry, he is certainly the one who pushed it forward.&lt;/p&gt;
&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;
&lt;p&gt;Steve Jobs and Apple has truly put great and user-friendly design on the mainstream &lt;strong&gt;business agenda&lt;/strong&gt;. For a decade, Apple has been the hallmark of good design and have shown the board rooms the kind of profits it can bring if you invest in design – which countless businesses have done, based on this single case alone. Who of us haven&amp;#8217;t at some point heard a client say &amp;#8220;make it more like the iPod / Apple&amp;#8221;?&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Investing in design&lt;/strong&gt; and UX is now the standard in most industries. Words like &amp;#8220;simple&amp;#8221; now has positive connotations.&lt;/p&gt;
&lt;p&gt;There&amp;#8217;s many things to be said about Steve Jobs. Most of them have already been said, and the most important probably can&amp;#8217;t be expressed.&lt;/p&gt;
&lt;p&gt;Thank you, Steve. Rest in peace.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=Jobs%27%20Impact%20on%20the%20Design%20%26%20UX%20Industry&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Fsteve-jobs" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/UApCZ-dml50" height="1" width="1"/&gt;</content>
    <author>
      <name>Jamie Appleseed</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/steve-jobs</feedburner:origLink></entry>
  <entry>
    <id>tag:baymard.com,2005:Post/74</id>
    <published>2011-09-20T15:08:00+02:00</published>
    <updated>2011-11-11T00:10:29+01:00</updated>
    <link type="text/html" rel="alternate" href="http://feedproxy.google.com/~r/baymard/~3/BQPsWUAYZRo/must-read-instructions" />
    <title>Google's (for now) Novel Approach to "Must Read" Instructions</title>
    <content type="html">&lt;p style="float:right;"&gt;&lt;img src="http://assets.baymard.com/blog/must-read-instructions-preview.png" title="Google is making sure people understand the implications of using multiple Google accounts before enabling this feature." alt="Google is making sure people understand the implications of using multiple Google accounts before enabling this feature." /&gt;&lt;/p&gt;
&lt;p&gt;Web users scan your text, skip paragraphs, click the button that &lt;a href="http://baymard.com/blog/contextual-words-are-usability-poison"&gt;looks like the &amp;#8216;next&amp;#8217; button&lt;/a&gt;, decide whether to stay on your site (or not) within seconds, close anything that resembles a pop-up, and &lt;strong&gt;don&amp;#8217;t read instructions&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;This introduce an interesting dilemma when designing user interfaces for web applications: What do you do if you absolutely must pass on &lt;strong&gt;highly critical information&lt;/strong&gt; to your users?&lt;/p&gt;
&lt;a id="snippet" name="snippet"&gt;&lt;/a&gt;
&lt;p&gt;Here&amp;#8217;s how Google do it when you activate &amp;#8220;Sign In to Multiple Google Accounts&amp;#8221;:&lt;/p&gt;
&lt;p&gt;&lt;a href="http://assets.baymard.com/blog/must-read-instructions-full-size.png"&gt;&lt;img src="http://assets.baymard.com/blog/must-read-instructions.png" title="Click for full size image. Google asks you to confirm the three implications of Multiple Google Accounts." alt="Click for full size image. Google asks you to confirm the three implications of Multiple Google Accounts." /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p class="caption"&gt;Google force you to confirm each of these three implications of using &amp;#8216;Sign In To Multiple Google Accounts&amp;#8217;.&lt;/p&gt;
&lt;p&gt;Instead of the widely used &amp;#8220;I Accept / Understand&amp;#8221; checkbox (typically seen for accepting Terms of Service when creating an account), Google takes it one step further by cutting the critical part of the message down to 3 separate ultra short descriptions, each of them with &lt;strong&gt;its own checkbox&lt;/strong&gt; the user has to click before the &amp;#8220;Save&amp;#8221; button is enabled.&lt;/p&gt;
&lt;p&gt;In more general terms this is just another pit stop in the &lt;strong&gt;never-ending spiral&lt;/strong&gt; of attention slip. As this solution gains traction, it&amp;#8217;s only a matter of time before some websites will start &amp;#8220;abusing&amp;#8221; the approach, using it for non-critical instructions and sales messages. After a while, users will grow accustomed to this configuration and will eventually afford it the same (extremely low) level of attention they afford &amp;#8220;Accept terms&amp;#8221; checkboxes nowadays.&lt;/p&gt;
&lt;p&gt;For now, however, the approach is novel and well-designed.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://baymard.com/blog/must-read-instructions#post_comment"&gt;Post a comment (3 so far)&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twitter.com/intent/tweet?text=Google%27s%20%28for%20now%29%20Novel%20Approach%20to%20%22Must%20Read%22%20Instructions&amp;url=http%3A%2F%2Fbaymard.com%2Fblog%2Fmust-read-instructions" target="_blank" title="Tweet this article"&gt;&lt;img src="http://baymard.com/images/tweet-button.png" alt="Tweet this article" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Related articles&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/inline-help"&gt;3 Examples of Inline Help&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/guiding-visitor-attention"&gt;Subliminally Directing Visitor Attention Towards Your Page&amp;#8217;s Goal&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="http://baymard.com/blog/highlighting-text-online"&gt;Scannability: How to Highlight Text on the Web&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;img src="http://feeds.feedburner.com/~r/baymard/~4/BQPsWUAYZRo" height="1" width="1"/&gt;</content>
    <author>
      <name>Christian Holst</name>
    </author>
  <feedburner:origLink>http://baymard.com/blog/must-read-instructions</feedburner:origLink></entry>
</feed>

