<?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>Cognition Archives - CueCamp Marketing and User Experience (UX)</title>
	<atom:link href="https://www.cuecamp.com/blog/tag/cognition/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.cuecamp.com/blog/tag/cognition/</link>
	<description>CueCamp - Social Media Marketing and Web Design in Chicago</description>
	<lastBuildDate>Mon, 03 Jan 2022 15:40:37 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://www.cuecamp.com/wp-content/uploads/2021/01/cropped-favicon6-32x32.png</url>
	<title>Cognition Archives - CueCamp Marketing and User Experience (UX)</title>
	<link>https://www.cuecamp.com/blog/tag/cognition/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>How Airbnb drives users’ actions with their landing page design — a UX analysis</title>
		<link>https://www.cuecamp.com/blog/how-airbnb-drives-users-actions-with-their-landing-page-design-a-ux-analysis/</link>
					<comments>https://www.cuecamp.com/blog/how-airbnb-drives-users-actions-with-their-landing-page-design-a-ux-analysis/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Wed, 16 Sep 2020 20:15:58 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[Psychology]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Cognition]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Human Factors]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Landing Page]]></category>
		<category><![CDATA[Personalization]]></category>
		<category><![CDATA[Usability]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=7850</guid>

					<description><![CDATA[<p>There is a reason you are not familiar with many -maybe not even one- of Airbnb’s competitors. The renting/booking marketplace “giant” has thrived in the global market for a decade and still hasn’t found anyone that can stand up to him.</p>
<p>The post <a href="https://www.cuecamp.com/blog/how-airbnb-drives-users-actions-with-their-landing-page-design-a-ux-analysis/">How Airbnb drives users’ actions with their landing page design — a UX analysis</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>There is a reason you are not familiar with many -maybe not even one- of Airbnb’s competitors. The renting/booking marketplace “giant” has thrived in the global market for a decade and still hasn’t found anyone that can stand up to him. <span id="more-7850"></span></p>
<p>A considerable amount of that success derives from the ongoing effort of Airbnb’s design team to create a user experience for its booking platform which surpasses that of other similar services.</p>
<p style="text-align: center;"><img fetchpriority="high" decoding="async" class="aligncenter size-large wp-image-7852" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/2-1024x547.jpg" alt="" width="1024" height="547"><br />
<em>Airbnb’s Landing Page design (above the fold) as I am typing this</em></p>
<p>As a designer, I was always astonished of how Airbnb approaches their product design challenges and delivers a product that converts, for years now. So in this article, I’ll try to identify what makes their landing page design different and why it is successful.</p>
<hr>
<h2>Visual Clarity and Minimalism</h2>
<blockquote class="jk jl jm"><p>I strive for two things in design: simplicity and clarity. Great design is born of those things.” — Lindon Leader</p></blockquote>
<p>Using colour contrast and shadows, the user interface is basically structured as two layers: The card, which contains the explanatory text and the Call-to-Action (CTA) button, forms the&nbsp;<strong class="hv io">upper layer</strong>, while the rest of the page is perceived as the&nbsp;<strong class="hv io">background layer</strong>.</p>
<p style="text-align: center;"><img decoding="async" class="aligncenter size-large wp-image-7853" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/3-1024x592.jpg" alt="" width="1024" height="592"><br />
<em>Perceived layers of user interface</em></p>
<p><strong class="hv io">With little to no cognitive effort, users can identify the upper layer (card) as the area with which they can interact.</strong>&nbsp;The page as a whole does not overload the users with information, hence framing a clear interaction path for users who land on it.</p>
<blockquote class="jq"><p>Reducing the cognitive load the user needs for achieving his goals is of the utmost importance when designing for humans.</p></blockquote>
<p>Let’s see how it compares to Booking’s landing page design, in terms of visual clarity, by using predictive technology:</p>
<p style="text-align: center;"><img decoding="async" class="aligncenter size-large wp-image-7854" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/4-1024x344.jpg" alt="" width="1024" height="344"><br />
<em>Measuring optical clarity of the landing pages (above the fold) for Booking.com and Airbnb via <a class="dc by ki kj kk kl" href="http://visualeyes.design/" target="_blank" rel="noopener nofollow noreferrer">VisualEyes</a>&nbsp;plugin</em></p>
<p><strong class="hv io">More clarity contributes to easier and driven scanning of information.</strong>&nbsp;Two metrics that can determine how an interface is efficiently designed for human interaction is&nbsp;<a class="dc by ki kj kk kl" href="https://research.google/pubs/pub38315/" target="_blank" rel="noopener nofollow noreferrer"><strong class="hv io">Visual Complexity</strong>&nbsp;and&nbsp;<strong class="hv io">Prototypicality</strong></a>. The conjunction of those two metrics affects the aesthetics processing of the user significantly and, thus, defines how he will interact with the interface.</p>
<blockquote class="jq"><p>More complexity requires more cognitive load. More cognitive load means less user engagement and, sequentially, less conversion and profitability.</p></blockquote>
<h3>Key Takeaway:</h3>
<p><em class="jn">Airbnb has set an interaction focal point; therefore users have already determined where they will have to “lay their eyes” in order to forage information.</em></p>
<hr class="ip cx iq ir is il it iu iv iw ix">
<h2 id="8c0d" class="iy iz ef at as ja eh jb ej jc jd je jf jg jh ji jj">The Double Z-Pattern</h2>
<p style="text-align: center;"><em><img loading="lazy" decoding="async" class="aligncenter size-large wp-image-7855" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/5-1024x608.jpg" alt="" width="1024" height="608"></em></p>
<p style="text-align: center;"><em>The <a class="dc by ki kj kk kl" href="https://instapage.com/blog/z-pattern-layout" target="_blank" rel="noopener nofollow noreferrer">Z-Pattern</a>&nbsp;(for people that read from left to right)</em></p>
<p>Humans have a natural reading pattern, which is applied when visual stimuli are present.&nbsp;<strong class="hv io">Following the natural flow of eye-scanning a layout</strong>, the Z-Pattern complements better<strong class="hv io">&nbsp;single-purpose webpages&nbsp;</strong>that contain only one CTA.</p>
<p>This specific pattern “traces” eye movement of the users, thus allowing for strategic placement of visual elements.</p>
<p><strong class="hv io">So, Airbnb used the Z-Pattern.</strong></p>
<p><strong class="hv io">Twice.</strong></p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter wp-image-7856 size-large" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-1024x547.jpg" alt="landing page design" width="980" height="523" srcset="https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-1024x547.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-300x160.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-768x410.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-1536x820.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-380x203.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-24x13.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-36x19.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1-48x26.jpg 48w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/6-1.jpg 1920w" sizes="auto, (max-width: 980px) 100vw, 980px" /><br />
<em>Airbnb is setting focal points for their users, using the Z-Pattern</em></p>
<p>By utilising this layout, Airbnb’s designers achieved to establish a concise visual hierarchy. Areas of interest that convey some kind of message are pinpointed and brought up to the user’s attention. Below you can view how Airbnb’s Z-layout translates into attention heatmaps:</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter wp-image-7857 size-large" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-1024x344.jpg" alt="UX analysis landing page" width="980" height="329" srcset="https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-1024x344.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-300x101.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-768x258.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-1536x516.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-380x128.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-24x8.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-36x12.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1-48x16.jpg 48w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/7-1.jpg 1920w" sizes="auto, (max-width: 980px) 100vw, 980px" /><br />
<em>Attention Heatmaps generated in&nbsp;<a class="dc by ki kj kk kl" href="https://www.figma.com/" target="_blank" rel="noopener nofollow noreferrer">Figma</a>, using the&nbsp;<a class="dc by ki kj kk kl" href="http://visualeyes.design/" target="_blank" rel="noopener nofollow noreferrer">VisualEyes</a>&nbsp;plugin.</em></p>
<p>Attention heatmaps suggest that the selected areas are drawing the most of the user’s attention in this particular instance.</p>
<p>As it is shown on the right image, the Area of Interest, in which the Card is placed, stands out&nbsp;<strong class="hv io">three times more</strong>&nbsp;than the focal point of the hero image, while the CTA Button on the bottom right of the white card is<strong class="hv io">&nbsp;almost three times more prominent than the card itself</strong>.</p>
<h3>Key Takeaway</h3>
<p><em class="jn">Airbnb augments, even more, the pre-established interaction path, by driving most of the attention to the single action -clicking the button- needed in order to “dive deeper” into their product.</em></p>
<p><strong class="hv io"><em class="jn">Read more on the Z-Pattern&nbsp;</em></strong><a class="dc by ki kj kk kl" href="https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c" target="_blank" rel="noopener nofollow noreferrer"><strong class="hv io"><em class="jn">here</em></strong></a><strong class="hv io"><em class="jn">.</em></strong></p>
<hr>
<h2>Priming</h2>
<blockquote><p>“Priming is a technique whereby exposure to one stimulus influences a response to a subsequent stimulus, without conscious guidance or intention.”</p></blockquote>
<p>In other words,&nbsp;<a class="dc by ki kj kk kl" href="https://www.nngroup.com/articles/priming/" target="_blank" rel="noopener nofollow noreferrer">priming</a>&nbsp;takes place when taking one’s memories or mental associations and using them to&nbsp;<strong class="hv io">influence his future behaviour</strong>&nbsp;towards an upcoming matter.</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter wp-image-7858 size-large" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-1024x521.jpg" alt="design landing page" width="980" height="499" srcset="https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-1024x521.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-300x153.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-768x390.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-1536x781.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-380x193.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-24x12.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-36x18.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1-48x24.jpg 48w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/8-1.jpg 1920w" sizes="auto, (max-width: 980px) 100vw, 980px" /><br />
<em>The first image (Hero) someone views when interacting with Airbnb’s website</em></p>
<p>Almost all websites/products apply the “priming” effect to their audience in some way. In our case, the Airbnb landing page design, visitors are subject to <strong class="hv io">associative priming</strong>&nbsp;with the use of imagery. The design team is doing an excellent job in finding images that fit the company’s target group perfectly,&nbsp;<strong class="hv io">so they can ensure that the desired emotions will be triggered</strong>.</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter wp-image-7859 size-large" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-1024x344.jpg" alt="AirBnB landing page" width="980" height="329" srcset="https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-1024x344.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-300x101.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-768x258.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-1536x516.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-380x128.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-24x8.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-36x12.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1-48x16.jpg 48w, https://cdn.cuecamp.com/wp-content/uploads/2020/01/9-1.jpg 1920w" sizes="auto, (max-width: 980px) 100vw, 980px" /><br />
<em>Different target audiences, different hero images.</em></p>
<p>Which words pop in your mind when viewing the house on the left image? Maybe something like&nbsp;<strong class="hv io">soothing, peaceful, refreshing, unique, care-free or even vacation-material?</strong></p>
<h3>Key Takeaway:</h3>
<p><em class="jn">By “priming” their target audience, Airbnb’s designers use carefully-picked images to spark the emotions that could be associated with the subsequent expected experience:&nbsp;</em><strong class="hv io"><em class="jn">Staying in an awesome place for their vacation.</em></strong></p>
<p><strong class="hv io"><em class="jn">Read more on Priming from NN/g&nbsp;</em></strong><a class="dc by ki kj kk kl" href="https://www.nngroup.com/articles/priming/" target="_blank" rel="noopener nofollow noreferrer"><strong class="hv io"><em class="jn">here</em></strong></a><strong class="hv io"><em class="jn">.</em></strong></p>
<hr>
<h2>Simple, strong and effective language</h2>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-7860 size-large" src="https://cdn.cuecamp.com/wp-content/uploads/2020/01/10-1024x521.jpg" alt="simple landing page" width="1024" height="521"><br />
The text serves two purposes:</p>
<ol class="">
<li><strong class="hv io">Validate the reason a user visited the website in the first place</strong>&nbsp;— “I’m where I was supposed to.”</li>
<li><strong class="hv io">Set a user goal</strong>&nbsp;— “Now I should search for places I want to visit.”</li>
</ol>
<p>Using&nbsp;<strong class="hv io">simple and clear</strong>&nbsp;language when communicating messages is&nbsp;<strong class="hv io">essential in web design</strong>, as it establishes that your audience will not misinterpret your offering. Remember that communication is a “two-way street”:</p>
<blockquote class="jk jl jm"><p>“How well we communicate is determined not by how well we say things, but how well we are understood.” — Andrew Grove</p></blockquote>
<p><strong class="hv io">Airbnb avoids unnecessary jargon</strong>, while choosing a set of words that their target audience will comfortably understand.</p>
<h3>Key Takeaway:</h3>
<p><em class="jn">Text content was carefully selected to disclose a specific message and the value of the product as quickly as possible, with few words in the play. All that without endangering that their audience will not understand the offering.</em></p>
<hr>
<h2>Conclusion</h2>
<p><strong class="hv io">Insightful design is human-oriented and drives human actions and emotions</strong>. Airbnb’s design team found a very subtle -almost transparent- way to direct users’ actions on their website. The framing of the experience was so delicately designed that it accelerates interaction while keeping the primary user goal in mind.</p>
<p>Thanks for tuning in!</p>
<p>Written by: <span class="as cx fq au cd fr fs ft fu fv ef"><a class="dc dd bb bc bd be bf bg bh bi fw bl bm fx fy" href="https://uxdesign.cc/@thanosdimitriou" target="_blank" rel="noopener noreferrer">Thanos Dimitriou</a></span> (via <a href="https://uxdesign.cc/how-airbnb-drives-users-actions-with-their-landing-page-design-a-ux-analysis-d99effa9f536" target="_blank" rel="noopener noreferrer">Medium</a>)<br />
Posted by: <a href="https://www.cuecamp.com">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/how-airbnb-drives-users-actions-with-their-landing-page-design-a-ux-analysis/">How Airbnb drives users’ actions with their landing page design — a UX analysis</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/how-airbnb-drives-users-actions-with-their-landing-page-design-a-ux-analysis/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Users Like Options, But Hate Making Decisions</title>
		<link>https://www.cuecamp.com/blog/users-like-options-hate-making-decisions/</link>
					<comments>https://www.cuecamp.com/blog/users-like-options-hate-making-decisions/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Mon, 03 Mar 2014 16:43:25 +0000</pubDate>
				<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[Psychology]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Cognition]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Customer Experience]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Human Factors]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Landing Page]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Usability Research]]></category>
		<category><![CDATA[User Interface]]></category>
		<guid isPermaLink="false">http://www.cuecamp.com/?p=5965</guid>

					<description><![CDATA[<p>Whenever I see one of those “Top ten designs of the year” or “Eight keys to good navigation design” I usually rip into them.  It’s really not that I am a negative person.  It is just that they always tend to be so overly simplistic.  They underappreciate the importance of context or completely misunderstand human behavior.  So it...</p>
<p>The post <a href="https://www.cuecamp.com/blog/users-like-options-hate-making-decisions/">Users Like Options, But Hate Making Decisions</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Whenever I see one of those “Top ten designs of the year” or “Eight keys to good navigation design” I usually rip into them.  It’s really not that I am a negative person.  It is just that they always tend to be so overly simplistic.  They underappreciate the importance of context or completely misunderstand human behavior. <span id="more-5965"></span></p>
<p>So it was really great to read <a href="http://www.paulolyslager.com/9-most-common-misconceptions-about-users">Paul Olyslager’s recent post</a> on the “9 Common misconceptions about users.”  One or two of them are common knowledge, but they are all spot on.  I want to share a few of the really good ones and perhaps add a few cents of value of my own.</p>
<p>His first one is perhaps the best.  Users want choices.  One of the <a href="http://en.wikipedia.org/wiki/Self_determination_theory">primary motivations</a> that drive human behavior is the need for perceived autonomy (see my <a href="http://humanfactors.blogspot.com/2014/01/pub-crawl-gamification.html">gamification posts</a> for more on that). We crave feeling in control of our lives and our decisions. Having options is a salient signal to ourselves that we are in control.  In fact a recent <a href="http://www.ted.com/talks/alex_wissner_gross_a_new_equation_for_intelligence.html">TED talk by Alex Wissner-Gross</a> makes the (a little too far reaching) claim that the best measure of intelligence is the ability to keep your options open.</p>
<p>Unfortunately, it doesn’t end there.  Designers make a huge mistake by taking this as a maxim and giving users tons of choices.  This leads to many negative outcomes.  Because users also hate <a href="http://humanfactors.blogspot.com/2011/07/overloaded-brains.html">cognitive load</a>.  If making a decision among all of these options feels like a lot of work we absolutely hate it.  That is not perceived autonomy, that is perceived helplessness.  <a href="http://www.columbia.edu/~ss957/">Sheena Iyengar</a> (about whom I have blogged before) calls this choice paralysis.</p>
<p>There is also the strong likelihood of loss aversion.  While making decisions we worry that we might make the wrong decision.  And we HATE that because it reduces perceived competence (another one of those <a href="http://humanfactors.blogspot.com/2014/02/the-third-wave-of-gamification.html">fundamental motivations</a>).  Then after decisions we are susceptible to post-decision regret, also known as buyer’s remorse.  The only thing worse than being forced into an option is being forced to live with that outcome afterwards, always wondering (or knowing for sure) that another option would have been better.  Some of us have this more than others (who Barry Schwartz calls “<a href="http://humanfactors.blogspot.com/2011/09/more-about-maximizers.html">maximizers</a>” in the fantastic book (and <a href="http://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice.html">TEDtalk of the same name</a>) the Paradox of Choice), but most of us have it to some extent.</p>
<p>And all of this just in his first misconception.  Thanks for the great post Paul.</p>
<p>Written by: Marc Resnick, <a href="http://humanfactors.blogspot.com/2014/02/users-like-options-but-hate-making.html">Human Factors</a><br />
Posted by: <a href="https://www.cuecamp.com">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/users-like-options-hate-making-decisions/">Users Like Options, But Hate Making Decisions</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/users-like-options-hate-making-decisions/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Why “Simple” Websites Are Scientifically Better</title>
		<link>https://www.cuecamp.com/blog/information-why-simple-websites-are-scientifically-better/</link>
					<comments>https://www.cuecamp.com/blog/information-why-simple-websites-are-scientifically-better/#comments</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Mon, 18 Nov 2013 23:06:58 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[Psychology]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Cognition]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Content Writing]]></category>
		<category><![CDATA[Credibility]]></category>
		<category><![CDATA[Customer Experience]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Human Factors]]></category>
		<category><![CDATA[Keyword Integration]]></category>
		<category><![CDATA[Link Building]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Interface]]></category>
		<guid isPermaLink="false">http://www.situatedresearch.com/?p=5459</guid>

					<description><![CDATA[<p>In a study by Google in August of 2012, researchers found that not only will users judge websites as beautiful or not within 1/50th – 1/20th of a second, but also that&#160;“visually complex” websites are consistently rated as less beautiful than their simpler counterparts.&#160; Moreover, “highly prototypical” sites – those with layouts commonly associated with...</p>
<p>The post <a href="https://www.cuecamp.com/blog/information-why-simple-websites-are-scientifically-better/">Why “Simple” Websites Are Scientifically Better</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><a href="https://static.googleusercontent.com/external_content/untrusted_dlcp/research.google.com/en/us/pubs/archive/38315.pdf">In a study by Google in August of 2012</a>, researchers found that not only will users judge websites as beautiful or not within 1/50th – 1/20th of a second, but also that&nbsp;<strong>“visually complex” websites are consistently rated as less beautiful than their simpler counterparts.&nbsp;<span id="more-10356"></span></strong></p>
<p>Moreover, “highly prototypical” sites – those with layouts commonly associated with sites of it’s category – with simple visual design were rated as the most beautiful across the board.</p>
<p>In other words, the study found&nbsp;<strong>the simpler the design, the better</strong>.</p>
<p>But why?</p>
<p>In this article, we’ll examine why things like cognitive fluency and visual information processing theory can play a critical role in simplifying your web design &amp; how a simpler design could lead to more conversions.</p>
<p>We’ll also look at a few case studies of sites that simplified their design, and how it improved their conversion rate, as well as give a few pointers to simplify your own design.</p>
<h2>What is a Prototypical Website?</h2>
<p>If I said “furniture” what image pops up in your mind? &nbsp;If you’re like 95% of people, you think of a chair. If I ask what color represents “boy” you think “blue”, girl = pink, car = sedan, bird = robin, etc.</p>
<p>Prototypicality is the basic mental image your brain creates to categorize everything you interact with. From furniture to websites, your brain has created a template for how things should look and feel.</p>
<p>Online, prototypicality breaks down into smaller categories. You have a different, but specific mental image for social networks, e-commerce sites, and blogs – and if any of those particular websites are missing something from your mental image, &nbsp;you reject the site on conscious and subconscious levels.</p>
<p>If I said “Online clothing store for trendy 20-somethings” you might envision something like this:</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter wp-image-5461 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/SEO-for-fashion-ecommerce-webstes-e1382981798869.png" alt="SEO ecommerce complex design" width="640" height="483"><a href="https://www.koozai.com/blog/search-marketing/seo-for-fashion-ecommerce-websites/">image credit</a></p>
<p>This follows the “online clothing store” prototype so closely, that it shares many attributes with the wireframe for an online clothing store that sells hip-hop clothing.</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter wp-image-5462 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/hiphopshop-wireframe.jpg" alt="wireframe simple design" width="640" height="442"><a href="https://www.flickr.com/photos/samodrole/">image credit</a></p>
<p>Neither &nbsp;lacks originality, and it’s unlikely they “stole” from each other. Instead they’re playing into what your basic expectations are of what an e-commerce site should be.</p>
<h2>What do you Mean By Cognitive Fluency?</h2>
<p>The basic idea behind&nbsp;<a href="https://www.uxmatters.com/mt/archives/2011/07/how-cognitive-fluency-affects-decision-making.php">cognitive fluency</a>&nbsp;is that the brain prefers to think about things that are easy to think about.</p>
<p>That’s why you prefer visiting sites where you instinctively know where everything is at, and you know what actions you’re supposed to take.</p>
<blockquote><p>“Fluency guides our thinking in situations where we have no idea that it is at work, and it affects us in any situation where we weigh information.” –&nbsp;<a href="https://www.uxmatters.com/mt/archives/2011/07/how-cognitive-fluency-affects-decision-making.php">Uxmatters.com</a></p></blockquote>
<p>Cognitive fluency is an stems from another area of behavior known as&nbsp;<a href="https://www.joshuakennon.com/mental-model-mere-exposure-effect-or-the-familiarity-principle/">The Mere Exposure Effect</a>, which basically states that the more times you’re exposed to a stimulus, the more you prefer it.</p>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter wp-image-5463 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/mere-exposure.jpg" alt="simplicity information" width="500" height="342"><a href="https://blog.lib.umn.edu/nich0185/myblog/writing-4/">image source</a></p>
<p>Again, the rules are the same online.</p>
<p>It’s “familiar” for blogs to have opt-ins on the right sidebar, or e-commerce sites to feature a large hi-resolution image with an attention grabbing headline &amp; the company logo on the top left hand side of the screen.</p>
<p>If your visitors are conditioned to certain characteristics being the standard for a particular category of site, deviating from that could subconsciously put you in the “less beautiful” category.</p>
<p>Here are a handful of e-commerce sites. See if you notice any similarities.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5464 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/bonjour.jpg" alt="information design website" width="600" height="371"></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5465 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/design-by-humans.jpg" alt="simple information design" width="600" height="386"></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5466 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/threadless.jpg" alt="complex design" width="600" height="378"></p>
<p><strong>Warning:</strong>&nbsp;Whatever you do, for the love of GOD, don’t take what I’m saying as “do what everyone else is doing.” &nbsp;If you’re not careful, you could really hurt yourself that way.</p>
<p>It’s important to know what design choices are prototypical for a site in your category, but it’s more important to find evidence that supports those design choices resulting in some sort of lift.</p>
<p>A lot of designers make bad choices. Without doing the research, you could make them too. &nbsp;For example, many e-commerce sites use automatic image sliders to display products, but study after study shows that automatic&nbsp;sliders tank conversions.</p>
<h2>What Happens When You Meet Basic Expectations? – A Case Study</h2>
<p>In the three images above, everything you’d expect from an ecommerce site is exactly where it’s supposed to be. Even if you’ve never been to the site, there’s inherent “credibility” to the design.</p>
<p>With a high level of fluency, a site will feel familiar enough that visitors don’t need spend mental effort scrutinizing and can instead focus on why they’re on your site in the first place.</p>
<p>When the experience is dis-fluent however, you feel it immediately. Take online tie retailer,&nbsp;<a href="https://skinnyties.com/">Skinnyties.com</a>, who didn’t really look like an e-commerce site until their redesign in October 2012.</p>
<p><strong>Before:</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5467 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/skinnyties1-e1382993577905.png" alt="complicated design" width="640" height="400"><br />
<strong>After:</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5468 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/skinnyties2-e1382993595741.png" alt="marketing information design" width="640" height="400"></p>
<p>A few key changes that lead to huge results:</p>
<ul>
<li>Follows prototypical e-commerce layout themes</li>
<li>Much more “open” with whitespace.</li>
<li>Images feature a single product with high-resolution pictures &amp; contrasting colors.</li>
</ul>
<p>Check out the&nbsp;<a href="https://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/">full case study on this particular redesign</a>, as it shows what is truly possible when updating a site to “fit in” with current prototypical standards.</p>
<p>These are the results of the redesign are staggering for only 2.5 weeks after the launch:</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5469 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/blog_20121024_stats.png" alt="information stats" width="500" height="450"></p>
<p>The redesign itself, while pretty, isn’t doing anything groundbreaking. It plays exactly into the expectations of what a modern online clothing retailer should be. It’s “open”, responsive, and has a consistent design language across all of the product pages.</p>
<p>But when contrasted with&nbsp;<a href="https://web.archive.org/web/20120129183429/https://www.skinnyties.com/">the old site</a>, it’s very clear that the lack of these common elements were preventing buyers from making purchases on the site.<br />
<img loading="lazy" decoding="async" class="aligncenter wp-image-5470 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/skinnyties3-1-e1383966078241.jpg" alt="tie information" width="640" height="200"></p>
<h2>What Visual Information Processing Has To Do With Site Complexity</h2>
<p><a href="https://www.eecs.harvard.edu/~kgajos/papers/2013/reinecke13aesthetics.pdf">In this joint study</a>&nbsp;by Harvard, University of Michigan, and University of Colorado, researchers found strong mathematical correlations for “aesthetically pleasing” between different demographics – For example, participants with PhD’s did not like high colorful websites – but there were no guidelines that emerged for universal appeal.</p>
<p>The only thing that was universal was that the more visually complex a website was, the lower it’s visual appeal.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5471 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/Visual-Appeal.png" alt="visual appeal design simplicity" width="552" height="491"></p>
<p>(Sidebar: if you wish to take the test, you can do it&nbsp;<a href="https://www.labinthewild.org/studies/aesthetics">here</a>)</p>
<h2>Why Simple is Scientifically Easier To Process</h2>
<p>The reason less “visually complex” websites are considered more beautiful is partly because low complexity websites don’t require the eyes and brain to physically work as hard to decode, store and process the information.</p>
<p>Watch this quick video about how the eye sends information to the brain for that to make more sense.</p>
<p><iframe loading="lazy" src="//www.youtube.com/embed/Lcv8g-0VdMI" width="640" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p>Basically, your retina converts visual information from the real world into electrical impulses. Those impulses are then routed through the appropriate&nbsp;<a href="https://en.wikipedia.org/wiki/Photoreceptor_cell">photoreceptor cells</a>&nbsp;to transmit the color and light information to the brain.</p>
<p>The more color and light variations on the page (visual complexity) the more work the eye has to do to send information to the brain.</p>
<blockquote><p>“…the eye receives visual information and codes information into electric neural activity which is fed back to the brain where it is “stored” and “coded”. This information can be used by other parts of the brain relating to mental activities such as memory, perception and attention.” –&nbsp;<a href="https://www.simplypsychology.org/information-processing.html">Simplypsychology.org</a></p></blockquote>
<h2>Every Element Communicates Subtle Information</h2>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-5472" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/breathe.gif" alt="breathe" width="600" height="111"><a href="https://vector.tutsplus.com/articles/communicating-with-typography/">image source</a></p>
<p>This is why it’s important when designing a website to remember every element –<a href="https://vector.tutsplus.com/articles/communicating-with-typography/">typeography</a>, logo, and&nbsp;<a href="https://conversionxl.com/which-color-converts-the-best/">color selection</a>&nbsp;– communicates subtle information about the brand.</p>
<p>When these elements don’t do their job, the webmaster often compensates by adding unnecessary copy and/or images, thus adding to the visual complexity of the website, and detracting from the overall aesthetic.</p>
<p>Optimizing a page for visual information processing – specifically simplifying information’s journey from eye to brain – is about communicating as much as you can in as few elements as possible.</p>
<p>While that’s an article all on it’s own,&nbsp;<a href="https://www.fastcodesign.com/1672938/the-anatomy-of-a-successful-logo-redesign">consider MailChimp’s logo redesign as food for thought.</a></p>
<p>When they decided make the brand grow up, they didn’t add the usual “we’ve been doing email since 2001, 3 million people trust us, here’s why we’re awesome, blah blah blah”</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5473 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/1672938-inline-mailchimp-03.jpg" alt="logo design simple" width="640" height="424"></p>
<p>Instead, they tightened up the writing, simplified the website – the top headline simply reads “Send Better Email” – and added an even simpler explainer animation of the core product.</p>
<p>Even though this was part of a bigger growth strategy, the results are still impressive, over a million new users have been added since June, when the new logo was first debuted.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-5474" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/graph.png" alt="graph" width="340" height="150"></p>
<h2>&nbsp;”Working Memory” &amp; The Holy Grail of Conversion</h2>
<p>What all this simplicity is leading to is what happens once visual information finds it’s way to the brain.</p>
<p><a href="https://www.psych.utoronto.ca/users/peterson/psy430s2001/Miller%20GA%20Magical%20Seven%20Psych%20Review%201955.pdf">According to the famous research</a>&nbsp;of psychologist George A Miller of Princeton, the average adult brain is able to store between 5-9 “chunks” of information within in the short term,&nbsp;<a href="https://en.wikipedia.org/wiki/Working_memory#Capacity">working memory</a>.</p>
<p>Working memory is the part of your brain that temporarily stores and processes information in the course of a few seconds. It’s what allows you to focus attention, resist distractions, and most importantly, guides your decision making.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-5475" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/working-memory-2-1.png" alt="working-memory-2-1" width="590" height="452"></p>
<p style="text-align: center;"><a href="https://usablealgebra.landmark.edu/instructor-training/working-memory-attention-executive-function/">image source</a></p>
<p>Everything we’ve been talking about up to this point is to reduce the amount of “noise” that makes it’s way into the working memory.</p>
<p>On a “low complexity, highly prototypical website”, the 5-9 “chunks” &nbsp;the working memory tries to process are things like guarantees, product descriptions, prices or offers. When the working memory can stay focused on fixing the problem, it will try and solve the problem as quickly as possible.</p>
<h2>Deviation Causes Disengagement</h2>
<p>When you deviate from a person’s &nbsp;expectations – the price was higher than expected, the color scheme and symmetry were off,&nbsp;the site didn’t load fast enough, the photos weren’t high enough resolution – the working memory processes those disfluent “chunks” instead of what matters.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-5476 size-full" src="https://www.situatedresearch.com/wp-content/uploads/2013/11/brain2.gif" alt="mental model information" width="420" height="413"><br />
That’s because the working memory calls the long term memory to use what it already knows to perform the task. When the long term memory can’t aid in processing the information,&nbsp;flow is broken&nbsp;&amp; the working memory disengages and moves on.</p>
<p>That’s why it’s vital you understand your&nbsp;visitor’s level of exposure&nbsp;– not just for sites in your category, but to websites in general -If you want to “hack” their working memory with design.</p>
<p>The blogs they read, the sites they shop on, their browser, age, gender &amp; physical location, all hint at how &nbsp;will impact their level of familiarity on first impression.</p>
<h2>Conclusion</h2>
<p>If the visitor can’t rely on their previous experience, they’re not thinking about how innovative your site is. They’re just left wondering why things aren’t where it’s “supposed to be.” Not the best frame of mind if you want them to buy stuff.</p>
<h3>Bonus: 7 Things To Do When Planning A Simpler Site.</h3>
<ol>
<li>Research your audience and the sites they visit the most. Look for case studies on design changes from said sites &amp; how those resulted in improvement is key areas.</li>
<li>Create a mashup of all those “working” components for your own site.</li>
<li>Obey the rules of cognitive fluency when you lay out your design. Put things where your visitors have grown accustomed to finding them.</li>
<li>Rely on your own colors, logo, and typeface to communicate clearly and subtly. Don’t add copy and/or images unless it communicates something your visitor actually cares about.</li>
<li>Keep it as simple as possible – one large image vs a bunch of little ones, one column, instead of three – utilize as much white space as possible.</li>
<li>Double check to make sure your site fits the public expectation in pricing, aesthetics, speed, etc.</li>
<li>Remember that “prototypical” doesn’t mean that every aspect of your site should fit that mold.</li>
</ol>
<p>Don’t think of your site as some unique snowflake piece of art. Instead make it a composite of all the best stuff.</p>
<p>Your visitors will love you for it.</p>
<p>Written by: Tommy Walker, <a href="https://conversionxl.com/why-simple-websites-are-scientifically-better/">ConversionXL</a><br />
Posted by:&nbsp;<a title="CueCamp" href="https://www.cuecamp.com">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/information-why-simple-websites-are-scientifically-better/">Why “Simple” Websites Are Scientifically Better</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/information-why-simple-websites-are-scientifically-better/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Website Usability Tips, Part 2</title>
		<link>https://www.cuecamp.com/blog/website-usability-tips-part-2/</link>
					<comments>https://www.cuecamp.com/blog/website-usability-tips-part-2/#comments</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Fri, 23 Aug 2013 16:47:16 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[Psychology]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Cognition]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Content Writing]]></category>
		<category><![CDATA[Credibility]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Landing Page]]></category>
		<category><![CDATA[Link Building]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Usability Research]]></category>
		<category><![CDATA[Usability Testing]]></category>
		<category><![CDATA[User Interface]]></category>
		<guid isPermaLink="false">http://www.situatedresearch.com/?p=5310</guid>

					<description><![CDATA[<p>Our team has come up with ten usability guidelines for web developers and business owners. Following are the last five tips, continuing last week&#8217;s first five. For a free analysis of your website, request a free usability report from our experts. Website Usability Tip #6: Recognition, Not Recall Minimize the user&#8217;s memory load by making...</p>
<p>The post <a href="https://www.cuecamp.com/blog/website-usability-tips-part-2/">Website Usability Tips, Part 2</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Our team has come up with ten usability guidelines for web developers and business owners. Following are the last five tips, continuing <a title="Website Usability Tips, Part 1" href="https://www.cuecamp.com/blog/website-usability-tips-part-1/">last week&#8217;s first five</a>. For a free analysis of your website, <a href="https://www.cuecamp.com/page-block/free-usability-report/">request a free usability report</a> from our experts. <span id="more-5310"></span></p>
<h3>Website Usability Tip #6: Recognition, Not Recall</h3>
<p><em>Minimize the user&#8217;s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the site to the other. Nor should the user have to remember or learn a new way to do something. (ex.&nbsp;Checkout&nbsp;Process)</em></p>
<ul>
<li>Use common icons that make sense to the user</li>
<li>Do not over-complicate your interface</li>
<li>Only use pop up instructions on buttons if you must</li>
</ul>
<h3>Website Usability Tip #7: Flexibility &amp; Efficiency</h3>
<p><em>Flexibility: allow multiple ways of accomplishing the same thing. </em></p>
<p>Users can find information through:</p>
<ul>
<li>A search box</li>
<li>Using menu navigation</li>
<li>Breadcrumbs</li>
<li>Links in the footer</li>
</ul>
<p><em>Efficiency: build in simple and efficient methods of doing common tasks, without making it difficult for someone new to the system. </em></p>
<p>Amazon’s checkout process and shopping cart system are an example, with users being able to set up a ‘one-click’ checkout system where a default credit card and address are stored to make checkout super speedy and easy.</p>
<h3>Website Usability Tip #8:&nbsp;Aesthetic and Minimalist Design</h3>
<p><em>Aesthetics is important when designing for the web. Knowing how to balance aesthetics with what users want can be a challenge.</em></p>
<p>Here are some key points to remember:</p>
<ul>
<li>Make sure colors play off of the colors of a well designed logo</li>
<li>Do not overwhelm users with too much content</li>
<li>Content should be relevant to the site</li>
<li>Use clickable videos</li>
<li>Never use avatars</li>
</ul>
<p>A big mistake that web designers often make is adding more pages to a website to make it look more &#8216;legit&#8217;. Always remember that users on the Internet usually quickly skim over information, and avoid wordy text.&nbsp;Overwhelming them with redundant information will make them leave the website.</p>
<h3>Website Usability Tip #9:&nbsp;Assist Users</h3>
<p><em>Help users recognize and recover from errors.</em></p>
<ul>
<li>Error messages should be expressed in plain language</li>
<li>If there is a process for ordering something (or otherwise), guide users through the process</li>
<li>Never make users guess what to do next</li>
<li>Constructively suggest a solution if a mistake is made</li>
</ul>
<h3>Website Usability Tip #10: Documentation</h3>
<p><em>Even though it is better if a website can be used without any assistance, it may be necessary to provide documentation for complex tasks.</em></p>
<p>Any such information should be easy to search, and focused on the user&#8217;s task.</p>
<ul>
<li>List concrete&nbsp;steps to be carried out</li>
<li>Make sure instructions are not too long</li>
<li>Ideally, it should be contextual (placed where it is needed, so users don&#8217;t have to search for it)</li>
</ul>
<p>Let us know if you have any questions on our website usability tips. If you would like a free expert analysis of your website&#8217;s usability,&nbsp;<a href="https://www.cuecamp.com/free-website-user-experience-analysis/">request a free usability report</a>&nbsp;from CueCamp.</p>
<p>Written and Posted by:&nbsp;<a href="https://www.cuecamp.com">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/website-usability-tips-part-2/">Website Usability Tips, Part 2</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/website-usability-tips-part-2/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Website Usability Tips, Part 1</title>
		<link>https://www.cuecamp.com/blog/website-usability-tips-part-1/</link>
					<comments>https://www.cuecamp.com/blog/website-usability-tips-part-1/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Fri, 16 Aug 2013 20:13:19 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[Psychology]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Cognition]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Content Writing]]></category>
		<category><![CDATA[Credibility]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Landing Page]]></category>
		<category><![CDATA[Link Building]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Usability Research]]></category>
		<category><![CDATA[Usability Testing]]></category>
		<category><![CDATA[User Interface]]></category>
		<guid isPermaLink="false">http://www.situatedresearch.com/?p=5283</guid>

					<description><![CDATA[<p>Our team has come up with ten usability tips / guidelines for web developers and business owners. Below are the first five, and Part 2 will follow. For a free analysis of your website, request a free usability report from our experts.  Website Usability Tip #1: Visibility Always show users where they are at on...</p>
<p>The post <a href="https://www.cuecamp.com/blog/website-usability-tips-part-1/">Website Usability Tips, Part 1</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Our team has come up with ten usability tips / guidelines for web developers and business owners. Below are the first five, and <a title="Website Usability Tips, Part 2" href="https://www.cuecamp.com/blog/website-usability-tips-part-2/">Part 2 will follow</a>. For a free analysis of your website, <a href="https://www.cuecamp.com/free-website-user-experience-analysis/">request a free usability report</a> from our experts. <span id="more-5283"></span></p>
<h3>Website Usability Tip #1: Visibility</h3>
<p><em>Always show users where they are at on the website. </em></p>
<ul>
<li>Use breadcrumbs</li>
<li>Highlight where the user is at in the menu navigation</li>
<li>Use sitemaps</li>
</ul>
<h3>Website Usability Tip #2: Communicate Clearly</h3>
<p><em>The website should speak the user&#8217;s language. Nothing should be left up for interpretation. </em></p>
<ul>
<li>Links and buttons should be concise and clear</li>
<li>Labeling should make sense to the user</li>
<li>Labeling should also be short and to the point</li>
<li>&#8216;Error 404&#8217; pages mean nothing to most users</li>
<li>Buttons should be labeled in a way to bring a call to action (buy now)</li>
</ul>
<h3>Website Usability Tip #3: User Error</h3>
<p><em>Users often click on items by mistake and need a clearly marked &#8220;emergency exit&#8221; to leave the unwanted area without having to go through an extended process. </em></p>
<ul>
<li>Use clear breadcrumbs</li>
<li>Use sitemaps</li>
<li>Have a search button</li>
<li>Make sure your logo is clickable to take the user back to the home page</li>
<li>In some instances pop boxes may be useful warning your users of their error</li>
</ul>
<h3>Website Usability Tip #4: Consistency</h3>
<p><em>Consistency is key to keep your users happy and coming back for more. Users should not have to reorient themselves each time they click on a page.</em></p>
<ul>
<li>Keep the same format for all pages of your website</li>
<li>Placement of menu navigation should remain consistent from page to page</li>
<li>Heading font sizes and placement should be consistent</li>
<li>Labeling should not change</li>
<li>Functionality of buttons, forms, etc. should not change</li>
</ul>
<h3>Website Usability Tip #5: Error Prevention</h3>
<p><em>Even better than good error messages is a careful design which prevents a problem from occurring in the first place.</em></p>
<ul>
<li>Eliminate error-prone conditions</li>
<li>Check for errors</li>
<li>Present users with a confirmation option before they commit to the action</li>
<li>Design a simple environment</li>
</ul>
<p>Interested in the last five tips? <a title="Website Usability Tips, Part 2" href="https://www.cuecamp.com/blog/website-usability-tips-part-2/">Read Part 2 of our website usability tips</a>. If you would like a free expert analysis of your website&#8217;s usability, <a href="https://www.cuecamp.com/free-website-user-experience-analysis/">request a free usability report</a> from CueCamp.</p>
<p>Written and Posted by: <a href="https://www.cuecamp.com" data-wplink-edit="true">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/website-usability-tips-part-1/">Website Usability Tips, Part 1</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/website-usability-tips-part-1/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Aesthetics Impact on Attitudes Towards Websites</title>
		<link>https://www.cuecamp.com/blog/the-impact-of-aesthetics-on-attitudes-towards-websites/</link>
					<comments>https://www.cuecamp.com/blog/the-impact-of-aesthetics-on-attitudes-towards-websites/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Fri, 30 Oct 2009 03:54:54 +0000</pubDate>
				<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Cognition]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Content Writing]]></category>
		<category><![CDATA[Credibility]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[User-Centered Design]]></category>
		<guid isPermaLink="false">http://www.situatedresearch.com/blog/?p=715</guid>

					<description><![CDATA[<p>Aesthetics alter a user&#8217;s perception of a website, which can evoke a wide range of emotions and attitudes. These emotions and perceptions impact the user&#8217;s attitude towards the website&#8217;s content, advertised products, company, credibility and site usability. The design and presentation of a website is strongly visual, and users are known to make judgments of...</p>
<p>The post <a href="https://www.cuecamp.com/blog/the-impact-of-aesthetics-on-attitudes-towards-websites/">Aesthetics Impact on Attitudes Towards Websites</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Aesthetics alter a user&#8217;s perception of a website, which can evoke a wide range of emotions and attitudes. These emotions and perceptions impact the user&#8217;s attitude towards the website&#8217;s content, advertised products, company, credibility and site usability.</p>
<p>The design and presentation of a website is strongly visual, and users are known to make judgments of a site&#8217;s aesthetics very quickly. As the website likeability and credibility increases so does the likelihood of purchasing from the site. Since the site&#8217;s aesthetics can influence brand perception and credibility, the importance of design and color treatments must be considered.<span id="more-715"></span></p>
<p>Research by Khuang, et al., (2001) and Park and Jung (2001) demonstrated that emotion can increase the value of physical products such as houses and cars. Emotion can also influence a user&#8217;s memories of products and their purchasing decision processes (Kim, Lee &amp; Choi, 2002). The history of traditional media&#8217;s use of emotions to build brand equity and loyal customers is well known. Marketers know that their most loyal customers are those with an emotional connection to their brand.</p>
<p><strong>Defining Aesthetics and Emotion</strong></p>
<p>Aesthetics is commonly known as the study of the mind and emotions in relation to the sense of beauty. More broadly, scholars in the field define aesthetics as a critical reflection on art, culture and nature. Aesthetics deals with notions such as the beautiful, the ugly, the sublime, or the comic, as applicable to the fine arts.</p>
<p>Aesthetic judgments involve many issues. They can be culturally conditioned, linked to emotions, and at least partly intellectual and interpretative. It is difficult to measure the relationship between aesthetics and emotions because of their abstract nature and creating a metric for aesthetics has been difficult.</p>
<p>Cognitively, it is unclear whether the concept of beauty is due to pre-attentive processing or to cognitive judgments. Pre-attentive processing is the awareness of an item before the person thinks about or focuses any real attention on the item (i.e., awareness preceding user&#8217;s focused attention). Cognitive judgments are evaluations of an item based on a person&#8217;s previous experiences with other similar items. The resulting judgments may have nothing to do with the item (i.e., user&#8217;s current evaluation is based on previous experience).</p>
<p>Users make judgments of the visual appearance of a website very quickly and those judgments are very consistent over time. Lindgaard, et al., (2006) found that website impressions were reliably formed within 50 seconds, were reliably consistent between people, and were held consistent over time.</p>
<p>Lindgaard asked participants to view 100 websites presented in a randomized order and then to rate each site for visual appeal. Lindgaard had the participants view and rate the same 100 sites in two separate sessions. Participants viewed each page for 50 seconds and then rated the visual appeal of the page.</p>
<p>Results showed that the participants&#8217; rating scores were highly correlated between sessions. That is, participants&#8217; visual appeal ratings were reliably consistent across both sessions. Since impressions were made in a short exposure time (less than a minute/page), it is likely that participants were making aesthetic judgments with minimal information and little conscious reflection or thought.</p>
<p><strong>Effects of User Motivation and Interest</strong></p>
<p>Consumer product involvement is widely recognized as an important variable that is taken into consideration in advertising. This product involvement influences the buyers/user&#8217;s decisions and information-seeking processes (Dahl, Rasch, &amp; Rosengren, 2003). Successful website design is influenced by the product type and the viewer&#8217;s motivation level.</p>
<p>The type of product a viewer is interested in influences the type of information-gathering processes the individual uses. High-involvement products are subject to a large amount of information-seeking and conscious, rational decisions. For example, a car is an example of high-involvement because of its high cost, high utility, and the number of similar models that are available. Buyers will research the cars of interest and take a long time to make a decision.</p>
<p>Low-involvement products are usually inexpressive products characterized by affective purchase motives, for example, gum. Gum is inexpensive, has low utility, and little differentiation within the market. The buyer spends little time researching gum and will use gut feelings toward the brand of choice.</p>
<p>The Elaboration Likelihood Model of persuasion describes how a consumer&#8217;s interest level affects message elaboration and brand perception.  The model suggests that consumers engage in one of two decision-making routes, either low- or highly-motivation.</p>
<p>Differences in preference for low- vs. highly-motivated users suggest that websites should address the motivation and interest levels of their users. Highly-motivated individuals will evaluate the information content of a product using a rational, conscious approach (Dahl, Rasch, &amp; Rosengren, 2003).</p>
<p>Low-motivated individuals will pay less attention to the core informational content and are swayed by peripheral cues such as the quantity of information. Kang and Kim (2006) demonstrated that the quantity of content was an indicator of informativeness only for low-interest individuals. The low-interest users considered entertainment and informativeness as equally important. Whereas, the high-interest individuals did not compare informativeness to entertainment.</p>
<p>Aesthetics may be less important for high-interest than for low-interest individuals. Emotion type would also differ. Low-interest individuals would favor a heuristic, &#8216;feel good&#8217; website while high-interest individuals would favor a site that stimulates positive emotions only after rational consideration.</p>
<p><strong>Website Complexity</strong></p>
<p>The complexity and amount of information presented on a website can influence the effectiveness of the site&#8217;s communication and the user&#8217;s perceptions of the site. Too much content or too little content can drive users away.</p>
<p>Berlyne (1960) described complexity as &#8220;the amount of variety or diversity in a stimulus pattern.&#8221; Complexity increases with the number of distinguishable elements, how dissimilar the elements are, and the number of elements that do not appear as a unit.</p>
<p>A medium level of complexity affords optimal communication effectiveness (Geissler, Zinkhan, &amp; Watson, 2006). Low to moderate complexity facilitates feelings of pleasantness whereas high complexity stimulates feelings of interest (Stevenson, Bruner, &amp; Kumar, 2000).</p>
<p>Stevenson, et al., (2000) asked participants to rate websites varying in complexity by:</p>
<ul type="disc">
<li>Attitude toward the commercial</li>
<li>Attitude toward the company</li>
<li>Purchase intention</li>
<li>Attitude toward the website</li>
</ul>
<p>Participants rated complex sites low in attitudes toward the commercial, company, and the site, and also purchase intention. It seems that visual complexity affects the viewer&#8217;s attitude toward the company, advertisement and website, and whether they will purchase an item.</p>
<p>The primary elements that web designers use to communicate with users include home page length, graphics, links, text, and animation. Geissler, et al., (2006) demonstrated that home page length, number of graphics and links, amount of text, and use of animation impacted perceptions of complexity.</p>
<p><strong>Perceptions of Credibility</strong></p>
<p>Website design influences perceptions of trust, and lack of trust has been shown to impact online sales. Karvonen (2000) reported that Internet users admit to making intuitive, emotional, on-the-spot judgments when shopping online based on perceptions of the merchant&#8217;s website.</p>
<p>Research by Kim and Moon (1998) demonstrated that clipart and overall color layout impacted website trustworthiness. They found that three-dimensional, dynamic pastel colored clipart covering at least half the screen enhanced trustworthiness.</p>
<p>Karvonen and Parkkinen (2001) suggest that using high-quality, well-chosen photographs generate consumer confidence.</p>
<p>Photographs of people can induce trustworthiness by adding a &#8216;human touch&#8217; but viewers with pre-existing low levels of general trust may see these as a manipulative ploy.</p>
<p>Geissler, et al., (2006) found that both web designers and web user focus groups agreed that a website appeared incomplete and less credible and less complex if the site did not provide information about who they are, what they did, and a way to contact them.</p>
<p>Other variables impacting perceptions of credibility include the following research results:</p>
<ul type="disc">
<li>Lightner (2003) found that overuse of graphics damages perceptions of professionalism.</li>
<li>Wang &amp; Emurian (2005) found that simplicity and consistency facilitate accessibility and navigation and these are characteristics of a trustworthy site.</li>
<li>Flanagin &amp; Metzger (2007) found that offering information and news relevant to advertised products may enhance perceptions of credibility.</li>
</ul>
<p><strong>The Impact of Usability on Aesthetics</strong></p>
<p>Social psychology has shown that physical attractiveness is associated with a wide range of socially desirable characteristics. Perceptions of usability are also affected by perceptions of aesthetics.</p>
<p>Unfortunately, research has demonstrated mixed results for the relationship between perceptions of aesthetics and usability. Tractinsky et al., (2000) found that post-use perceptions of both aesthetics and usability were affected by pre-use perceptions of aesthetics.</p>
<p>Thorin and Mahike (2007) found that although aesthetics had a main effect on emotional valence and physiological arousal, there was no interaction between usability and aesthetics. But they did find that usability is more important than aesthetics when comparing satisfaction ratings for the use of product.</p>
<p><strong>Conclusion</strong></p>
<p>A user&#8217;s perception of a website can evoke a wide range of emotions and attitudes. There is no question that aesthetics can influence important factors related to online purchasing decisions such as attitude toward the company, credibility, and motivation. Emotion has played an important role in capturing and keeping the public&#8217;s attention in traditional marketing, and it will continue to play an important role for online companies that want to build a personable and trustworthy face on the internet.</p>
<p>Written By: Jennifer Chen<br />
Posted By: <a href="https://www.cuecamp.com">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/the-impact-of-aesthetics-on-attitudes-towards-websites/">Aesthetics Impact on Attitudes Towards Websites</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/the-impact-of-aesthetics-on-attitudes-towards-websites/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>User-Centered Design &#038; Usability Tips for Websites</title>
		<link>https://www.cuecamp.com/blog/user-centered-design-usability-tips-for-websites/</link>
					<comments>https://www.cuecamp.com/blog/user-centered-design-usability-tips-for-websites/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Sat, 06 Jun 2009 16:15:07 +0000</pubDate>
				<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Cognition]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Usability Research]]></category>
		<category><![CDATA[Usability Testing]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[User-Centered Design]]></category>
		<guid isPermaLink="false">http://blog.situatedresearch.com/?p=90</guid>

					<description><![CDATA[<p>User-Centered Design User-centered design (UCD) is an approach for employing usability. It is a structured product development methodology that involves users throughout all stages of Web site development, in order to create a Web site that meets users&#8217; needs. This approach considers an organization&#8217;s business objectives and the user&#8217;s needs, limitations, and preferences. Importance of...</p>
<p>The post <a href="https://www.cuecamp.com/blog/user-centered-design-usability-tips-for-websites/">User-Centered Design &#038; Usability Tips for Websites</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h3>User-Centered Design</h3>
<p>User-centered design (UCD) is an approach for employing usability. It is a structured product development methodology that involves users throughout all stages of Web site development, in order to create a Web site that meets users&#8217; needs. This approach considers an organization&#8217;s business objectives and the user&#8217;s needs, limitations, and preferences.<span id="more-90"></span></p>
<h3>Importance of User-Centered Design</h3>
<p>In order for your Web site to be successful, users must visit the site to find information or accomplish tasks. No matter what objectives you have set for your Web site, it must carefully balance the needs of users and the needs of your organization. If users don&#8217;t find your Web site helpful, they will not use it.</p>
<p>From the business side, you can lower operating and redevelopment costs by developing a product, such as a Web site, correctly the first time around.</p>
<h3>The Process</h3>
<p>To create a user-centered Web site you must think about the needs of your users throughout each step in the development of your site, including:</p>
<ul type="disc">
<li>planning your site</li>
<li>collecting data from users</li>
<li>developing prototypes</li>
<li>writing content</li>
<li>conducting usability testing with users</li>
</ul>
<h3>Creating a User-Centric Web site</h3>
<p>The first step is to clearly define your organization and users&#8217; needs, goals, and objectives. To get the project started, begin by asking yourself (and your Web development team) more detailed questions such as:</p>
<ul type="disc">
<li>What are your agency&#8217;s primary business objectives and how do they relate the Web?</li>
<li>Who are the users of your Web site and what are their tasks and goals?</li>
<li>What information and functions do your users need, and in what form do they need it?</li>
<li>How do users think your Web site should work and what are their experience levels with the Web site?</li>
<li>What hardware and software will the majority of your users use to access your site?</li>
</ul>
<p>Written by: <a href="https://www.usability.gov">Usability.gov</a><br />
Posted By:&nbsp;<a href="https://www.cuecamp.com">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/user-centered-design-usability-tips-for-websites/">User-Centered Design &#038; Usability Tips for Websites</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/user-centered-design-usability-tips-for-websites/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
