<?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>User Experience Archives - CueCamp Website &amp; Content Marketing</title>
	<atom:link href="https://www.cuecamp.com/blog/category/user-experience/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.cuecamp.com/blog/category/user-experience/</link>
	<description>CueCamp - Social Media Marketing and Web Design in Chicago</description>
	<lastBuildDate>Tue, 14 Jan 2025 19:58:05 +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>User Experience Archives - CueCamp Website &amp; Content Marketing</title>
	<link>https://www.cuecamp.com/blog/category/user-experience/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>User-Friendly Website Design Tips (Webinar)</title>
		<link>https://www.cuecamp.com/blog/user-friendly-website-design-tips-webinar/</link>
					<comments>https://www.cuecamp.com/blog/user-friendly-website-design-tips-webinar/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Wed, 13 Dec 2023 19:29:00 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Psychology]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Enginehire]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User-Centered Design]]></category>
		<category><![CDATA[Webinar]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=17568</guid>

					<description><![CDATA[<p>In this webinar, you can watch and learn ways that you can transform your website usability to create a seamless user experience for your website visitors. Watch this webinar to unlock the secrets of creating an intuitive, engaging, and user-friendly website for your audience. Why You Watch: User-Friendly Website Design Tips Learn how to create...</p>
<p>The post <a href="https://www.cuecamp.com/blog/user-friendly-website-design-tips-webinar/">User-Friendly Website Design Tips (Webinar)</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>In this webinar, you can watch and learn ways that you can transform your website usability to create a seamless user experience for your website visitors. Watch this webinar to unlock the secrets of creating an intuitive, engaging, and user-friendly website for your audience.</p>



<span id="more-17568"></span>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Webinar: Improve the Usability of Your Website" width="980" height="551" src="https://www.youtube.com/embed/Wiy0QXkg774?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading">Why You Watch: User-Friendly Website Design Tips</h2>



<ul class="wp-block-list">
<li><strong>Menu navigation:</strong> Make it effortless for users to find what they need through well-organized, easy-to-understand menus on your website.</li>



<li><strong>Content placement:</strong> Optimize your layout to guide visitors with ease to content that they are looking for.</li>



<li><strong>User journey:</strong> Ensure every interaction is intuitive, and there are not too many steps to find content of relevance.</li>
</ul>



<p>Learn how to create a website that keeps your audience coming back. A user-friendly website is key to creating a simple and intuitive user experience. Don&#8217;t miss this opportunity to elevate your digital presence!</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><span class="font-weight-semi-bold"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Free Resource:</strong> Get a free review of the user experience (UX) of your website by <a href="https://www.cuecamp.com/free-website-user-experience-analysis/">requesting a free marketing and UX analysis</a> from CueCamp today. You will receive a report with recommendations for your website.</span></p>
</blockquote>



<h2 class="wp-block-heading">About the Speaker: Michel Ann Sharritt</h2>



<h4 class="wp-block-heading">Cue Camp, Founder and Vice President</h4>



<p>Michel Sharritt, a leader in playability and usability, has over a decade of experience helping Fortune 100/500 companies like Microsoft, Disney, and Sony create engaging, accessible, and successful products. An expert in game design and user experience, Michel has presented globally and published extensively on usability, accessibility, and design methodologies.</p>
<p>The post <a href="https://www.cuecamp.com/blog/user-friendly-website-design-tips-webinar/">User-Friendly Website Design Tips (Webinar)</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/user-friendly-website-design-tips-webinar/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>User Experience Tips for Websites</title>
		<link>https://www.cuecamp.com/blog/user-experience-tips-for-websites/</link>
					<comments>https://www.cuecamp.com/blog/user-experience-tips-for-websites/#comments</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Mon, 30 Jan 2023 16:03:17 +0000</pubDate>
				<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Content Writing]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Mobile Devices]]></category>
		<category><![CDATA[Personalization]]></category>
		<category><![CDATA[Search Engine Optimization (SEO)]]></category>
		<category><![CDATA[Speed]]></category>
		<category><![CDATA[Usability]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=17131</guid>

					<description><![CDATA[<p>User Experience (UX) is a crucial aspect of website design. It refers to the overall satisfaction and engagement of website users with the content and features of a website. A great user experience can lead to increased website traffic, customer loyalty, and overall business growth. In this article, we’ll explore some key tips for improving...</p>
<p>The post <a href="https://www.cuecamp.com/blog/user-experience-tips-for-websites/">User Experience Tips for Websites</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>User Experience (UX) is a crucial aspect of <a href="https://www.cuecamp.com/web-design-development/">website design</a>. It refers to the overall satisfaction and engagement of website users with the content and features of a website. A great user experience can lead to increased website traffic, customer loyalty, and overall business growth. In this article, we’ll explore some key tips for improving the <a href="https://www.cuecamp.com/market-research-strategy/">user experience</a> for your website and make recommendations for small business owners. <span id="more-17131"></span></p>
<h2>1. Make Navigation Simple and Intuitive</h2>
<p>Navigation is a critical component of UX. Visitors should be able to find what they are looking for quickly and easily. A well-designed navigation menu should be simple, clear, and intuitive. Consider using clear and concise language, organized categories, and a hierarchical structure that guides visitors to the information they need. Want a research-driven report on your website for free? Ask CueCamp for a <a href="https://www.cuecamp.com/free-website-user-experience-analysis/">free UX analysis of your website</a>.</p>
<h2>2. Use High-Quality Visual Content</h2>
<p>Visual content, such as images and videos, can be extremely impactful in engaging visitors and improving UX. High-quality visual content can help visitors better understand the information being presented and can break up large blocks of text, making it easier to read. When selecting images and videos, be sure to choose high-quality, relevant content that supports your message.</p>
<h2>3. Provide Relevant and Valuable Content</h2>
<p>The content of your website is one of the most important aspects of UX. Make sure your content is relevant to your target audience and provides value to them. This can include information about your products or services, blog posts, and resources such as how-to guides or eBooks. Keep your content updated and consider using a content management system to make it easy to manage and update your website’s content.</p>
<p><img fetchpriority="high" decoding="async" class="aligncenter wp-image-17134 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design.jpg" alt="responsive design websites" width="2160" height="1440" srcset="https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design.jpg 2160w, https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design-300x200.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design-1024x683.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design-768x512.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design-1536x1024.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design-2048x1365.jpg 2048w, https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design-480x320.jpg 480w, https://cdn.cuecamp.com/wp-content/uploads/2023/01/responsive-design-600x400.jpg 600w" sizes="(max-width: 2160px) 100vw, 2160px" /></p>
<h2>4. Make Sure Your Website is Mobile-Friendly</h2>
<p>With the increasing use of mobile devices, it is more important than ever to make sure your website is mobile-friendly. A mobile-friendly website should be optimized for smaller screens, with easy-to-use navigation and clear, concise content. Consider using responsive design to ensure that your website looks great on any device.</p>
<h2>5. Optimize for Speed</h2>
<p>Website speed is a critical component of UX. Visitors expect websites to load quickly and will quickly become frustrated if a website takes too long to load. Make sure your website is optimized for speed by using a fast hosting service, compressing images and other media, and using a content delivery network (CDN) if necessary.</p>
<h2>6. Consider User Feedback</h2>
<p>Finally, it’s important to consider user feedback when designing and improving your website. Ask for feedback from your customers, friends, and family and use this feedback to make changes to your website that will improve the user experience. You can also use analytics tools to track how visitors are using your website and make changes based on the data.</p>
<p>In conclusion, improving the user experience for your website can have a significant impact on the success of your business. Free tools are available to review your website&#8217;s UX, such as <a href="https://www.cuecamp.com/free-website-user-experience-analysis/">CueCamp&#8217;s free user experience analysis</a>. By following these tips, small business owners can create a website that is user-friendly, visually appealing, and provides value to their visitors. In doing so, they can increase website traffic, customer loyalty, and overall business growth.</p>
<p>The post <a href="https://www.cuecamp.com/blog/user-experience-tips-for-websites/">User Experience 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-experience-tips-for-websites/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>How UX Impacts Your Digital Marketing Strategy</title>
		<link>https://www.cuecamp.com/blog/how-ux-impacts-your-digital-marketing-strategy/</link>
					<comments>https://www.cuecamp.com/blog/how-ux-impacts-your-digital-marketing-strategy/#comments</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Mon, 19 Sep 2022 14:17:39 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Engagement]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Interface]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=16432</guid>

					<description><![CDATA[<p>Digital marketing is no doubt one of the most effective forms of marketing in today's world, but it also happens to be incredibly competitive. One thing you should never overlook as you develop a marketing plan is the UX/UI design of your digital content.</p>
<p>The post <a href="https://www.cuecamp.com/blog/how-ux-impacts-your-digital-marketing-strategy/">How UX Impacts Your Digital Marketing Strategy</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Digital marketing is no doubt one of the most effective forms of marketing in today&#8217;s world, but it also happens to be incredibly competitive. Anyone can launch a digital marketing campaign,&nbsp; from large corporations to small businesses. Whether you have a lot of money to invest or you are just starting, one thing you should never overlook as you develop a marketing plan is the <a href="https://careerkarma.com/careers/web-designer/">UX/UI design</a> of your digital content. </p>



<span id="more-16432"></span>



<h2 class="wp-block-heading"><a></a>UX: What Is It and Why Is It so Important?</h2>



<p>UX is a popular acronym for user experience. Simply put, the term describes how the user interacts with the software. Was it easy to navigate? Did they have to deal with multiple pop-up ads? How long did it take for the page to load? </p>



<p>The best digital marketing campaigns offer seamless experiences that compel users to take action and share the pages with other prospective users. This is why you need to invest in the services of an experienced UX developer or at least learn advanced UX through <a href="https://careerkarma.com/blog/best-online-coding-bootcamps/">online courses</a> if you want to control your campaign.</p>



<h2 class="wp-block-heading"><a></a>How Does UX Impact Your Content Strategy</h2>



<p>The user experience of your website, mobile application, or blog can affect your content strategy positively or negatively. This piece addresses some of the positives of investing in high-quality user experience.</p>



<h3 class="wp-block-heading">1. Improves User Engagement</h3>



<p>Digital marketing campaigns allow you to widen the horizon and increase your reach. However, digital users need to remain engaged long enough to find out if your products or services are worth their time. By investing in a high-quality user experience, you will improve content engagement, thus increasing your chances of <a href="https://www.cuecamp.com/blog/6-easy-steps-that-will-make-your-website-a-lead-generation-machine/">generating leads</a> for your business.</p>



<h3 class="wp-block-heading">2.&nbsp;Faster Return on Investment (ROI)</h3>



<p>The more engaging and efficient your digital marketing campaign is, the faster you will get a return on your investment. It is important to note that digital marketing campaigns are more affordable than traditional marketing campaigns and they are also more likely to go viral. One client who is satisfied with your content can share it with others who will be more willing to trust your brand.</p>



<h3 class="wp-block-heading">3.&nbsp;High-Value UX Puts You Ahead of the Competition</h3>



<p>Digital marketing is evolving faster than any other form of marketing. If you pay attention to trends and implement UX best practices, you will stay ahead of the competition. Search engines also rank websites higher when they have good UX and a low bounce rate. Since people are more likely to click on the first few websites when they search for a product or service, using UX to boost your ranking is a good idea.</p>



<h3 class="wp-block-heading">4.&nbsp;Promotes Customer Retention</h3>



<p>Everyone loves return customers but getting people to return to your business requires building their trust and incentivizing loyalty. If customers have a terrible user experience because you did not invest in a great UX, they are unlikely to patronize your service a second time. It may seem like you are spending a lot during the initial creation, but it would be <a href="https://careerkarma.com/schools/app-academy/">worth it</a> for conversions in the long run.</p>



<h3 class="wp-block-heading">5.&nbsp;Cuts Down Maintenance Cost</h3>



<p>If you are trying to create websites as part of your digital marketing campaign, you will have to keep a software engineering team on standby for web or mobile app maintenance. The cost of maintenance will be significantly higher if the initial UX was less than adequate. In no time, you may need to overhaul the entire platform instead of performing basic bug fixes.</p>



<h3 class="wp-block-heading">6.&nbsp;Increased Sales</h3>



<p>A good UX should come with a good user interface and high-quality products or services. Combined, all these features will help you create a lucrative sales funnel that will boost revenue for your business. There are different ways great UX can improve sales. You can provide real-time support, smart searching, quick payment, quick checkout, and an all-around smoother experience.</p>



<h2 class="wp-block-heading"><a></a>Conclusion</h2>



<p>Digital marketing isn&#8217;t going to lose relevance anytime soon. Digital advertisers are projected to spend over <a href="https://www.statista.com/outlook/dmo/digital-advertising/worldwide">$616.00 billion on advertising</a> by the end of 2022, according to Statista. Since you have already established that UX is an important aspect of any digital marketing strategy, you should look for ways to optimize your UX to improve sales, increase customer retention, and get a faster return on investments in your business.</p>
<p>The post <a href="https://www.cuecamp.com/blog/how-ux-impacts-your-digital-marketing-strategy/">How UX Impacts Your Digital Marketing Strategy</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/how-ux-impacts-your-digital-marketing-strategy/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
		<item>
		<title>6 Easy Steps That Will Make Your Website a Lead Generation Machine</title>
		<link>https://www.cuecamp.com/blog/6-easy-steps-that-will-make-your-website-a-lead-generation-machine/</link>
					<comments>https://www.cuecamp.com/blog/6-easy-steps-that-will-make-your-website-a-lead-generation-machine/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Wed, 10 Nov 2021 15:30:00 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[Marketing Automation]]></category>
		<category><![CDATA[Psychology]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Social Media]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Content Writing]]></category>
		<category><![CDATA[Credibility]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Keyword Research]]></category>
		<category><![CDATA[Landing Page]]></category>
		<category><![CDATA[Personalization]]></category>
		<category><![CDATA[Sales]]></category>
		<category><![CDATA[Search Engine Optimization (SEO)]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=15124</guid>

					<description><![CDATA[<p>How can you use digital marketing for lead generation to attract new customers? To build interest, high-quality and useful information should be front-and-center. In this article, we present six (6) steps to perfect your website for lead generation, resulting in more paying clients for your business.</p>
<p>The post <a href="https://www.cuecamp.com/blog/6-easy-steps-that-will-make-your-website-a-lead-generation-machine/">6 Easy Steps That Will Make Your Website a Lead Generation Machine</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>How can you use digital marketing for lead generation and attract new customers? The design of your website directly affects how well you connect with potential customers and convert them into sales. Clean, well-organized content is critical; along with a compelling call-to-action that begins the connection process. According to Salesforce, it takes an average of 6-8 marketing touch points to generate a sales lead. To build interest, high-quality and useful information should be front-and-center. In this article, we present six (6) steps to perfect your website for lead generation, resulting in more paying clients for your business.</p>



<span id="more-15124"></span>



<h2 class="wp-block-heading">1. Find Your Best-Selling Products</h2>



<p>First, conduct a bit of research on your business to find out what sells the best. You may already know this intuitively, but research into actual sales figures and profit margins will be of use. In certain cases, great-selling products or services may not generate income for your business due to slim profit margins. Alternatively, you may wish to prioritize other products / services with less traffic, but higher margins.</p>



<p>Additionally, consult your website and social media analytics to see what actually interests your audience. Particular landing pages or social media posts may receive more traffic than you realize, which is worth noting. You might start by examining a subset of products or services, focusing efforts to generate powerful landing pages that convert. Certain businesses (such as an e-commerce clothing store) may have hundreds of products with a different type of sales cycle. Understanding how and why your customers buy from you will help in the design of good landing pages. For example, an online clothing store with $20 items will have a shorter sales cycle than stores selling $1000+ items.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img decoding="async" src="https://cuecamp.b-cdn.net/wp-content/uploads/2021/11/audience.jpg" alt="lead generation for your target audience" class="wp-image-15145" width="927" height="618" srcset="https://cdn.cuecamp.com/wp-content/uploads/2021/11/audience.jpg 1854w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/audience-300x200.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/audience-1024x683.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/audience-768x512.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/audience-1536x1024.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/audience-480x320.jpg 480w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/audience-600x400.jpg 600w" sizes="(max-width: 927px) 100vw, 927px" /><figcaption>Keep your target audience in mind when performing an audit on your best-selling products or services.</figcaption></figure>
</div>


<p>Finally, to help refine your list, a business SWOT analysis can highlight both successful and problematic areas to change. A SWOT analysis looks at <strong>S</strong>trengths, <strong>W</strong>eaknesses, <strong>O</strong>pportunities, and <strong>T</strong>hreats: serving as a lens to examine your business. A brief analysis of these four categories reveals products or services that need attention and a marketing redesign. In addition, opportunities for growth are typically revealed that can help improve your digital marketing efforts.</p>



<h2 class="wp-block-heading">2. Design Attention-Grabbing Landing Pages</h2>



<p>Following the analysis done in step 1, you can focus on designing landing pages that grab the attention of your customers. The SWOT analysis (from step 1) will clarify the unique value proposition of your business. Leveraging what sets you apart from your competitors will dramatically improve your marketing. Drawing the attention of your clients to these unique properties will show why they should buy your product or service. Focusing on what it can do for clients (from their perspective) supplies a compelling reason to make a purchase. Be sure to present a powerful, unique value proposition.</p>



<p>For example, when Apple, Inc. releases a new product, they market it clearly with their users in mind. Rather than listing out technical specs first, Apple makes use of vibrant imagery from actual product usage, showing us what the product can do. For instance, iPhone marketing will headline how it is capable of low-light photography, and show crisp images taken in low-light. These may include someone blowing out birthday candles in the dark or sitting around a campfire at night. These contextual examples help people imagine what owning the new product might be like. Concrete examples show users what they can do themselves with the product.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="1854" height="1968" src="https://cuecamp.b-cdn.net/wp-content/uploads/2021/11/iphone.jpg" alt="iPhone digital marketing" class="wp-image-15132" srcset="https://cdn.cuecamp.com/wp-content/uploads/2021/11/iphone.jpg 1854w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/iphone-283x300.jpg 283w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/iphone-965x1024.jpg 965w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/iphone-768x815.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/iphone-1447x1536.jpg 1447w" sizes="auto, (max-width: 1854px) 100vw, 1854px" /><figcaption>Screenshot from Apple, Inc. showing the low-light photography capabilities of the new iPhone</figcaption></figure>
</div>


<p>Other phone manufacturers may try to tout superior hardware in their product (such as the camera&#8217;s F-stop or shutter speed; or more powerful hardware specifications). However, Apple creates a compelling reason to buy through examples of use, using storytelling and vibrant imagery. Finally, a clear call-to-action is presented: a button to &#8216;buy&#8217; the product. This enables users to enjoy the described benefits of ownership, as conveyed by their marketing and storytelling. </p>



<h2 class="wp-block-heading">3. Create a Powerful Call-to-Action for Lead Generation</h2>



<p>A good strategy for designing landing pages is to place yourself in the shoes of a typical customer. Make sure that marketing content speaks to your customer&#8217;s goals and desires. Do not communicate from your own perspective. Tell a story or show an example of a client using the product or service to communicate from <strong>their</strong> perspective. Rather than starting with what you offer, addresses how you meet their wants and needs first. This helps prospective clients imagine themselves using your product or service while raising social capital.</p>



<p>Once you&#8217;ve <a href="https://www.cuecamp.com/blog/landing-page-guide-for-websites/">created compelling landing pages</a> for your top products or services, what can you do to raise conversion rates? Analyzing your marketing for clear calls to action will shed light on whether you are compelling your audience to take further action. Frequently, we want customers to make a purchase. However, most business models and sales cycles are not this straightforward. Often, businesses want their prospects to &#8216;take the next step&#8217; and reach out. This may be requesting users to send a message or call the business. If this is the case, the call-to-action should be as straightforward and simple as possible.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://cuecamp.b-cdn.net/wp-content/uploads/2021/11/optimization-landing-page.jpg" alt="landing page lead generation" class="wp-image-15144" width="1146" height="763" srcset="https://cdn.cuecamp.com/wp-content/uploads/2021/11/optimization-landing-page.jpg 2291w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/optimization-landing-page-300x200.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/optimization-landing-page-1024x682.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/optimization-landing-page-768x512.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/optimization-landing-page-1536x1023.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/optimization-landing-page-2048x1364.jpg 2048w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/optimization-landing-page-480x320.jpg 480w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/optimization-landing-page-600x400.jpg 600w" sizes="auto, (max-width: 1146px) 100vw, 1146px" /><figcaption>When analyzing your landing page design, examine the overall user experience (UX) and the clarity of the call-to-action.</figcaption></figure>
</div>


<h4 class="wp-block-heading">What is the End Goal for Lead Generation?</h4>



<p>For each landing page, decide on the best &#8216;next step&#8217; for your sales cycle and for lead generation. Then, focus on making that process as simple as possible. In other words, analyze the landing page at a macro and micro level to be sure the process is easy. Want users to reach out? If so, a short form at the bottom of the page may be best for lead generation. Asking users to fill out a long form will probably cause many of them to fall off the bandwagon. Too many form fields can cause users to question why so much of their personal information is needed. Or it may simply annoy them by having to spend too much time filling out the form.</p>



<p>To conclude, this step should focus on compelling your prospects to act and making that action as easy as possible. Analyzing the <a href="https://www.cuecamp.com/market-research-strategy/">user experience (UX) of the landing page</a> is an excellent way to see what needs improvement. Streamlining your landing page UX and fixing issues will result in better lead generation. Business processes might be considered as well, including how transactions are managed. If users fill out a form, who gets it? Integrating forms with a CRM tool (software for customer-relationship management) could be a smart decision. A good place to start might be with a <a href="https://www.cuecamp.com/free-website-user-experience-analysis/">free UX audit from CueCamp</a>.</p>



<h2 class="wp-block-heading">4. Analyze &amp; Create Resources of Interest</h2>



<p>Take a multi-pronged approach to your digital marketing and create interest by offering resources to potential customers. Using the list generated in step 1, think about any resources that might help your customers engage with your business. For instance, a marketing company might realize that their audience often wants to learn about email marketing basics. In this example, creating a short guide as a downloadable PDF will capture prospects. Asking users to fill out a short form (name, company, email address) will capture leads for future prospecting.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://cuecamp.b-cdn.net/wp-content/uploads/2021/11/marketing-resources.jpg" alt="lead generation with free resources" class="wp-image-15139" width="1119" height="746" srcset="https://cdn.cuecamp.com/wp-content/uploads/2021/11/marketing-resources.jpg 2238w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/marketing-resources-300x200.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/marketing-resources-1024x683.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/marketing-resources-768x512.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/marketing-resources-1536x1024.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/marketing-resources-2048x1365.jpg 2048w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/marketing-resources-480x320.jpg 480w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/marketing-resources-600x400.jpg 600w" sizes="auto, (max-width: 1119px) 100vw, 1119px" /><figcaption>A branded guide, e-book, or downloadable resource can help generate prospects while gathering their information for future marketing efforts.</figcaption></figure>
</div>


<p>Downloadable guides, e-books, blog posts, interactive workshops, and how-to videos are a handful of resources that you can use to generate interest. These efforts support a digital marketing strategy that makes an effective use of your website as a lead generation machine.</p>



<h2 class="wp-block-heading">5. Newsletters and Social Media Posts</h2>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://cuecamp.b-cdn.net/wp-content/uploads/2021/11/personalized-email.jpg" alt="email marketing automation" class="wp-image-15143" width="1089" height="726" srcset="https://cdn.cuecamp.com/wp-content/uploads/2021/11/personalized-email.jpg 2177w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/personalized-email-300x200.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/personalized-email-1024x683.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/personalized-email-768x512.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/personalized-email-1536x1024.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/personalized-email-2048x1365.jpg 2048w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/personalized-email-480x320.jpg 480w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/personalized-email-600x400.jpg 600w" sizes="auto, (max-width: 1089px) 100vw, 1089px" /><figcaption>Designing automated emails triggered by users abandoning a purchase are a way to use personalized emails to recapture interest and raise conversion rates.</figcaption></figure>
</div>


<p>A monthly newsletter with valuable information or discounts may be a way to stay connected with customers, without overwhelming them with too many messages. A proper balance of touchpoints, with high quality information, is key. Email newsletters can offer resources of interest, upcoming sales, or industry news. In cases, segmenting your email marketing list will allow more personalized, customized email marketing to your audience. For instance, if you own an online clothing store, emails might be personalized based on gender, shopping habits, or other interests. As shown above, emails can be sent to customers that did not complete their purchase with an incentive to do so. An analysis of your <a href="https://www.cuecamp.com/market-research-strategy/">marketing strategy and business objectives</a> will clarify the type of resources you can offer for the highest impact.</p>



<p>Similarly, social media can be an effective way to draw people to engage with your brand. Like newsletters, a suitable amount of content for your business will help generate quality conversions. Posting low-quality content daily can overwhelm those following your brand, causing users to unfollow you on social media. Alternatively, posting too infrequently can cause a loss of interest. Analyzing your business objectives and <a href="https://www.cuecamp.com/blog/social-media-marketing-techniques-to-differentiate-your-brand/">designing a social media strategy</a> to create a buzz for your business will draw prospective clients to your website. Additionally, <a href="https://www.cuecamp.com/blog/how-to-create-engaging-social-media-marketing-content-using-instagram-hashtag-research/">hashtag research</a> can separate your audience by interest, demographics, and location: enabling you to deliver personalized content to their social media feed.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://cuecamp.b-cdn.net/wp-content/uploads/2021/11/email-frequency.jpg" alt="email lead generation" class="wp-image-15141" width="863" height="648" srcset="https://cdn.cuecamp.com/wp-content/uploads/2021/11/email-frequency.jpg 1726w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/email-frequency-300x225.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/email-frequency-1024x768.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/email-frequency-768x576.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/email-frequency-1536x1152.jpg 1536w" sizes="auto, (max-width: 863px) 100vw, 863px" /><figcaption>When sending newsletters or email marketing campaigns, a balance must be struck to support engagement without overwhelming your subscribers.</figcaption></figure>
</div>


<h2 class="wp-block-heading">6. Use Paid Ads &amp; SEO for Lead Generation</h2>



<p><a href="https://www.cuecamp.com/search-engine-marketing-seo/">Search Engine Optimization</a>, or SEO, is concerned with optimizing landing pages (and websites) to rank highly on Google search. According to Google, the first five organic search results capture over 67% of all clicks. If your website ranks below the first page or search results, SEO can help improve your search rank to capture more traffic, which leads to more sales. Further, SEO drives 1000%+ more traffic than organic social media,&nbsp;<a href="https://videos.brightedge.com/research-report/BrightEdge_ChannelReport2019_FINAL.pdf" target="_blank" rel="noreferrer noopener">according to BrightEdge</a>. Optimizing your website for keywords of high relevancy has a drastic impact on the traffic driven to your business website from search engines like Google.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="1620" height="1080" src="https://cuecamp.b-cdn.net/wp-content/uploads/2021/11/facebook-ads.jpg" alt="Facebook ads" class="wp-image-15140" srcset="https://cdn.cuecamp.com/wp-content/uploads/2021/11/facebook-ads.jpg 1620w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/facebook-ads-300x200.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/facebook-ads-1024x683.jpg 1024w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/facebook-ads-768x512.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/facebook-ads-1536x1024.jpg 1536w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/facebook-ads-480x320.jpg 480w, https://cdn.cuecamp.com/wp-content/uploads/2021/11/facebook-ads-600x400.jpg 600w" sizes="auto, (max-width: 1620px) 100vw, 1620px" /><figcaption>Facebook Ads can insert paid ads into the feeds of users that you choose, based upon their demographics and interests.</figcaption></figure>
</div>


<p>The steps outlined above support an overall <a href="https://www.cuecamp.com/blog/content-marketing-strategy-tools-to-rank-higher-on-google-search/">content marketing strategy</a>, which aims to drive quality traffic to your website and drive business growth. Besides organic search rank, you can place ads on Google to get to the top of search results. Likewise, social media ads on Facebook, Instagram, Twitter, and LinkedIn will generate prospects and drive traffic to your website. Enabling retargeting / remarketing on your paid ads will push ads to users that previously interacted with your brand. Retargeting users is based on their analytics data. These users are more likely to convert based on their earlier interest in your brand.</p>



<h2 class="wp-block-heading">Summary</h2>



<p>Digital marketing efforts are driven by both quantity and quality. Focusing on both the quality (your website / landing page user-experience) and quantity of leads (your inbound marketing efforts) will generate success. To make your website a lead generation machine, the six steps described in this article will help you reach that goal.</p>



<p>Incorporating a multi-pronged marketing approach across social media, search engines, and paid ads will drive new prospects to your website. What happens once they reach your landing page is up to you, and the user experience provided on your website. For a user experience analysis of your website, you can <a href="https://www.cuecamp.com/free-website-user-experience-analysis/">request a free audit from CueCamp</a>.</p>



<p>Depending on your business, a range of marketing touch points are needed before a prospect becomes a qualified sales lead. When possible, personalized content of high relevancy is more likely to convert a prospect. High-quality content, delivered on a regular cadence, results in a website that will engage your prospects. Crafting a <a href="https://www.cuecamp.com/market-research-strategy/">content marketing strategy</a> to achieve this goal will turn your website into a lead generation machine.</p>



<p>Written by: <a href="https://www.cuecamp.com/about/">Matt Sharritt, Ph.D.</a>, Founder, <a href="https://www.cuecamp.com/">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/6-easy-steps-that-will-make-your-website-a-lead-generation-machine/">6 Easy Steps That Will Make Your Website a Lead Generation Machine</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/6-easy-steps-that-will-make-your-website-a-lead-generation-machine/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<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 loading="lazy" 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 loading="lazy" 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 loading="lazy" 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>Boost Store Profits: E-commerce Experience Optimization</title>
		<link>https://www.cuecamp.com/blog/boost-store-profits-e-commerce-experience-optimization/</link>
					<comments>https://www.cuecamp.com/blog/boost-store-profits-e-commerce-experience-optimization/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Tue, 21 Jul 2020 17:49:12 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Communication]]></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[Sales]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=7597</guid>

					<description><![CDATA[<p>Online businesses are forced to compete with large online and big box retailers, including Amazon, Wayfair, and brick-and-mortar stores like Walmart and Best Buy. In order to compete, e-commerce websites need to have a great user-experience (UX) and a streamlined buying process. Complicated checkout systems, over-cluttered product pages, and a lack of mobile e-commerce optimization can severely inhibit a retailer from competing with large companies that have large, dedicated user-experience teams.</p>
<p>The post <a href="https://www.cuecamp.com/blog/boost-store-profits-e-commerce-experience-optimization/">Boost Store Profits: E-commerce Experience Optimization</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Online businesses are forced to compete with large online and big box retailers, including Amazon, Wayfair, and brick-and-mortar stores like Walmart and Best Buy. In order to compete, e-commerce websites need to have a great user-experience (UX) and a streamlined buying process. Complicated checkout systems, over-cluttered product pages, and a lack of mobile e-commerce optimization can severely inhibit a retailer from competing with large companies that have large, dedicated user-experience teams. <span id="more-7597"></span></p>
<h5>User-friendly Experience + Simplified Buying Journey = More Sales</h5>
<p>For the business owner, a well-designed e-commerce platform allows them to run their business easily, and can help streamline daily operations and customer service calls. Following are some tips and best practices to follow to help grow both organic traffic and sales conversions.</p>
<h2>Search Engine Optimization (SEO) and UX</h2>
<p><a href="https://www.cuecamp.com/market-research-strategy/">User Experience</a> and <a href="https://www.cuecamp.com/search-engine-marketing-seo/">SEO</a> are critical components of any e-commerce site, especially as industry verticals are becoming more competitive. Digital advertising prices continue to rise and generating organic traffic is essential. In addition, cross-functional expertise is required to build a website that has good UX and SEO, as these fields continue to overlap. Google algorithms are becoming better at reading page content, placing priority on well-designed content that is not artificial. Prior black-hat tactics to raise search rank, like loading page footers with keyword-dense text, are now causing page ranks in search engines (like Google or Bing) to drop. Driving organic traffic can feel daunting and will take time, but will pay-off in the end with good SEO practices.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-7602" src="https://cdn.cuecamp.com/wp-content/uploads/2019/11/search-engine-optimization-seo-sign-1024x539.png" alt="" width="800" height="421" /></p>
<h3>Website Sitemap</h3>
<p>Part of good UX and SEO involves a well-designed sitemap. A sitemap reflects the website page and navigation structure, and hierarchically organizes website content. Adding a sitemap to Google Search Console is important for any e-commerce site, so that search engines crawl and understand product information. Google will be notified to any changes that you make to your site, which should happen on a frequent basis so content does not become stale. A sitemap not only makes the new content you post discovered quickly by search engines, but is reflected in the website navigation to users (helping tell them about the content on your website).</p>
<h2>Simplify Page Content (and Clutter)</h2>
<p>Clear, simple to understand content can raise engagement with your audience. In many instances, “less is more” – as said by Ludwig Mies Van der Rohe, a German-American architect that pioneered the minimalist movement. Your website visitors appreciate you communicating your message in a simple, yet efficient manner.</p>
<p>Similar to a cluttered advertisement, websites with distracting content, too much text, or an unclear message will lose their effectiveness. Over time, more and more things fight for our attention, and the average user has a shorter attention span. Users are willing to spend less time figuring out what you’re trying to get across, so get the job done with simple, clear messaging on your website. Design each page using proper keyword research and ensure landing pages have a clear engagement goal in mind so that your content has a purpose.</p>
<h2>Optimizing Website Structure and User Journey</h2>
<p>Supporting the intentions of website visitors is critical to raising conversion rates. Whether the goal is to sell a product or communicate an important piece of information, users should be able to fulfill their needs as efficiently as possible when using your website. If a product is difficult to find or a message becomes muddled, conversion rates will fall.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-7601" src="https://cdn.cuecamp.com/wp-content/uploads/2019/11/sitemap-2488235_1920-1024x769.png" alt="" width="710" height="533" /></p>
<p>Part of optimizing the user experience (UX) of a website is to ensure that different types of users (personas) are able to achieve their goals efficiently: whether it be completing an action or finding information. A well-designed navigation structure will help the user journey, so that users can find what they want in the least amount of clicks (and with less confusion along the way).</p>
<h2>Make Sure Your Site is Responsive</h2>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-7598" src="https://cdn.cuecamp.com/wp-content/uploads/2019/11/Responsive_Web_Design.png" alt="" width="460" height="180" /></p>
<p>More people are becoming accustomed to purchasing groceries, clothing, home décor, and vehicles in the comfort of their homes. <a href="https://www.forbes.com/sites/nikkibaird/2018/11/28/every-result-you-need-to-know-about-black-friday-cyber-monday-and-holiday-2018-so-far/" target="_blank" rel="noopener noreferrer">According to Forbes</a>, Cyber Week had 62% of traffic coming from mobile in 2018, and fifteen percent of orders of were placed on mobile phones over the Thanksgiving holiday. Other sources place over 60% of website visitors (and climbing) using a mobile device like a phone or tablet. With this in mind, websites need to use a responsive design to be sure that content is optimized for mobile devices. The lack of an intuitive UX can result in user frustration, causing visitors to leave before completing a purchase on a website.</p>
<h2>Website speed</h2>
<p>Website performance contributes heavily to page rank and SEO, as well as usability. Research by Google describes how sites appearing on page one of Google display content in 1.19 seconds on average, while those on page two display primary content in 1.29 seconds. Some tools that can help you gauge and improve your website speed are <a href="https://website.grader.com/" target="_blank" rel="noopener noreferrer">Website Grader by HubSpot</a>, <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">Google PageSpeed Insights</a>, and <a href="https://tools.pingdom.com/" target="_blank" rel="noopener noreferrer">Pingdom Website Speed Test</a>.</p>
<h2>SSL (Secure Socket Layer) certificate</h2>
<p>An SSL certificate authenticates your website to encrypt data that is being transferred from a website to users. SSL certificates ensure that a website is secure when visitors make purchases, which is important is the growing age of e-commerce. An SSL certificate encrypts sensitive user data, such as personal bank information, phone numbers and addresses.</p>
<p><img loading="lazy" decoding="async" class="aligncenter wp-image-7543 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2019/11/13792583873_2682af02b5_b.jpg" alt="" width="1024" height="683" /></p>
<p>Google Chrome, the most-used browser, has begun notifying users when a website is not fully secured with an SSL certificate. Fully encrypting data using SSL will provide users the best, most secure experience: ensuring that sensitive data is transmitted securely between the browser and web server. In a world where data breaches and security are becoming commonplace, users will trust and show loyalty to brands that value their privacy and sensitive information: highlighting the need for SSL certificates on websites.</p>
<h2>Conclusion</h2>
<p>Optimizing your website has a powerful effect on your marketing effectiveness, as well as your bottom line. Increasing conversions on your website, whether serving a goal of purchasing products or communicating information about your business (in a clear, efficient manner) will attract new customers and build loyalty. By optimizing the user journey for your website, different types of users can be served in a more effective manner.</p>
<p>The skill sets involved in designing a website continue to broaden and overlap. Experts in development, graphic design, SEO, UX, marketing and content writing need to know how their design decisions impact other areas of design. For example, designing a page around a keyword (SEO) impacts the website structure (UX), written content, and image content on the page (which can also impact website speed). A working knowledge of these fields is required to balance design decision trade-offs to make websites more effective, and this expertise can yield powerful improvements. In many instances, a simple analysis of a website by an expert can present some low-hanging fruit, which can have a huge impact on results.</p>
<p>To gauge how your website currently measures up, and identify some low-hanging fruit that can improve your website, <a href="https://www.cuecamp.com/free-website-user-experience-analysis/">request a free website marketing analysis from CueCamp</a>. This report is in video form, generated by CueCamp’s team of experts to show the user-friendliness and marketing effectiveness of your website. Start out on the right foot, and <a href="/contact/">reach out today</a>.</p>
<p>Authors: Shannon Olear &amp; Matt Sharritt, Ph.D. (<a href="https://www.cuecamp.com/#who-we-are">CueCamp</a>)</p>
<p>The post <a href="https://www.cuecamp.com/blog/boost-store-profits-e-commerce-experience-optimization/">Boost Store Profits: E-commerce Experience Optimization</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/boost-store-profits-e-commerce-experience-optimization/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>User Experience (UX) Is Now Your Business Strategy</title>
		<link>https://www.cuecamp.com/blog/ux-user-experience-is-now-your-business-strategy/</link>
					<comments>https://www.cuecamp.com/blog/ux-user-experience-is-now-your-business-strategy/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Wed, 23 Oct 2019 17:57:33 +0000</pubDate>
				<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Credibility]]></category>
		<category><![CDATA[Customer Experience]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Human Factors]]></category>
		<category><![CDATA[Personalization]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User-Centered Design]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=7490</guid>

					<description><![CDATA[<p>We’re all familiar with the way companies such as Uber and Airbnb have brought fundamental disruption to their respective industries. Taxis and cars for hire existed long before the advent of Uber. But one of the core differences Uber offers customers is the user experience (UX). Consider the ease of simply clicking a button within...</p>
<p>The post <a href="https://www.cuecamp.com/blog/ux-user-experience-is-now-your-business-strategy/">User Experience (UX) Is Now Your Business Strategy</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>We’re all familiar with the way companies such as Uber and Airbnb have brought fundamental disruption to their respective industries. Taxis and cars for hire existed long before the advent of Uber. But one of the core differences Uber offers customers is the user experience (UX). <span id="more-7490"></span></p>
<p>Consider the ease of simply clicking a button within an attractive user interface, following the vehicle as it comes to your door and enjoying a smooth ride. For all the talk about their technology, their business model and their strategy, experience is what ensures customers continue to use the service. This idea has brought me to the concept of UX as strategy. It&#8217;s the idea that today, more than anything else, your UX will determine the success or failure of your software and your business.</p>
<h3>A killer UX creates deeper customer engagement and loyalty.</h3>
<p>A powerful and engaging UX doesn&#8217;t just make your product easier to use — it helps you engage more deeply with your customers, ensuring they stay loyal to you rather than looking to your competition. It builds brand loyalty and increases the chances that your customers will become your most effective advocates. Your UX also plays a key role in enrichment, ensuring your customers purchase additional products and services.</p>
<h3>Your UX now forms the heart of your competitive differentiation.</h3>
<p>I don’t believe I’m writing anything new in highlighting the importance of UX for software and applications. What is new, however, is how your UX can form the basis of your competitive differentiation. Building long-term, sustainable, competitive differentiation is one of the toughest objectives that executives face. In today’s digital world, the UX of your products and services plays a fundamental role. People engage with brands and companies via their software, and thus via their UX.</p>
<p>It is your brand, plus highly satisfied customers and fans, that will result not just in your business growing, but in building competitive differentiation. For example, it’s incredibly hard for other companies to match the loyalty of people who love Apple’s products and services. Even when other manufacturers build products that can compete on a technical and functional level, and that may even sell at lower price points, people remain loyal to the brand. Apple has been at the forefront of blending the concept of a brand with people’s identity, their image of who they are as individuals. Apple&#8217;s UX is at the very heart of this.</p>
<h2>Making UX Your Strategy</h2>
<p>At a high level, I recommend the following actions as you make UX your business strategy:</p>
<h3>• Link your design metrics to your business metrics.</h3>
<p>Those individuals responsible for the design of your software are now at the heart of the success of your business. As a result, we also need to ensure that their success, and that of your design, becomes linked to your business’s key performance indicators.</p>
<h3>• Use the latest technology to build hyperpersonalized services.</h3>
<p>Increasingly, in order to build these powerful experiences, organizations will need to use the latest technologies, from automation to machine learning. Customers now consider such personalization the norm, part of the overall experience of using your software. Airbnb’s personalized travel recommendations after you book a trip, such as offering a tour of Boston’s live music scene just after you reserve a stay in the city, is one such example.</p>
<h3>• Build design systems.</h3>
<p>Leading organizations such as Adobe and Salesforce have increasingly spoken about the need to create “design systems” to build these powerful user experiences. These are the systems and processes that enable them to scale their design best practices, rather than constantly reinventing the wheel. Forrester analyst Gina Bhawalkar <a href="https://go.forrester.com/blogs/you-need-a-design-system-heres-why/" target="_blank" rel="nofollow noopener noreferrer" data-ga-track="ExternalLink:https://go.forrester.com/blogs/you-need-a-design-system-heres-why/">points out</a> that they also play a key role in linking your design team to your development team. She mentions that design systems should “also include the reusable code behind those design elements, and for this reason they should be created as a partnership between design and development teams.”</p>
<h3>• Foster a product-centric culture and mindset.</h3>
<p>If you listen to any of the founders of the UX-centric companies I’ve mentioned before, you will realize that they obsess about their products and the experiences their customers have with them. I would argue that if it’s not their top priority, it probably ranks very high. This is something easy to achieve as a startup, but much harder when you are, for example, a large financial institution that is used to thinking that your “product” is a checking account or a home loan, instead of the app or website your customers use to buy and manage those financial solutions. I often wonder whether the top executives at large firms even use their software products because some of them are so bad.</p>
<h3>The democratization of technology helps drive better UX.</h3>
<p>Ultimately, this is all part of what many people have referred to as the “<a href="https://en.wikipedia.org/wiki/Democratization_of_technology" target="_blank" rel="nofollow noopener noreferrer" data-ga-track="ExternalLink:https://en.wikipedia.org/wiki/Democratization_of_technology">democratization of technology</a>.” This is because, fueled by cloud computing and new open-source technologies, it’s not just large companies or tech giants that can create these compelling user experiences.</p>
<p>So while effective UX design is one of the hardest aspects of product development, new technologies, tools and approaches are making it possible even for startup teams on a budget to build these compelling digital experiences. We’re seeing organizations take advantage of this to move nimbly and build light, attractive, mobile-first experiences. This is what it means to make UX your strategy, and in 2019, I believe it is the only way your organization will achieve success.</p>
<p>Written by: <a href="https://www.forbes.com/sites/forbestechcouncil/people/alexrobbio/" target="_blank" rel="noopener noreferrer">Alex Robbio</a> (Co-founder of <a href="http://www.belatrixsf.com/" target="_blank" rel="noopener noreferrer">Belatrix Software</a> and Member of <a href="http://www.forbes.com/sites/forbestechcouncil/" target="_blank" rel="noopener noreferrer">Forbes Technology Council</a>)<br />
Posted by: <a href="https://www.cuecamp.com/">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/ux-user-experience-is-now-your-business-strategy/">User Experience (UX) Is Now Your Business Strategy</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/ux-user-experience-is-now-your-business-strategy/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Common Webpage Design Element Mistakes</title>
		<link>https://www.cuecamp.com/blog/common-webpage-design-mistakes/</link>
					<comments>https://www.cuecamp.com/blog/common-webpage-design-mistakes/#comments</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Wed, 08 Aug 2018 16:48:03 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Human Factors]]></category>
		<category><![CDATA[Landing Page]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Interface]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=6990</guid>

					<description><![CDATA[<p>Simple layout and design element tips to help you create a stunning webpage. Common landing page design element mistakes to avoid 1.&#160;Content is not broken down into logical blocks It is easier for users to digest information if it&#8217;s grouped into logical blocks. Set padding to 120 px-180 px and separate blocks of text by...</p>
<p>The post <a href="https://www.cuecamp.com/blog/common-webpage-design-mistakes/">Common Webpage Design Element Mistakes</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><strong>Simple layout and design element tips to help you create a stunning webpage.</strong><span id="more-6990"></span></p>
<h2>Common landing page design element mistakes to avoid</h2>
<h3>1.&nbsp;Content is not broken down into logical blocks</h3>
<p>It is easier for users to digest information if it&#8217;s grouped into logical blocks. Set padding to 120 px-180 px and separate blocks of text by using colour backgrounds.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7130 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3.png" alt="design mistake" width="1300" height="2049" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3.png 1300w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3-190x300.png 190w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3-650x1024.png 650w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3-768x1210.png 768w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3-975x1536.png 975w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3-380x599.png 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3-15x24.png 15w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3-23x36.png 23w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1-3-30x48.png 30w" sizes="auto, (max-width: 1300px) 100vw, 1300px" /> There is little padding between sets of related information, plus this design needs colour blocks to divide content into logical sets. As a result, this information is hard to digest and it is unclear which text should go with each block</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7132 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_2-2.png" alt="webpage design" width="1300" height="2050"> Paddings are large enough, and the blocks are separated by colour, which makes one thing immediately clear – these blocks contain different types of content</td>
</tr>
</tbody>
</table>
<h3>2. Uneven spaces between items on a webpage</h3>
<p>Same-size spaces should be set around logical blocks. Otherwise your page will look messy, and users may not give equal consideration to each section.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7134 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/1-4.png" alt="website UX" width="1000" height="880">Spaces of various widths look uneven and create an impression that company information is linked to the header although every block is equally important</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7136 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/1-5.png" alt="web site UX" width="1000" height="880">Same-size spaces around headings and the body copy help perceive the logical blocks as carrying equally important information</td>
</tr>
</tbody>
</table>
<h3>3. Padding that is too small means that users cannot break down content into logical blocks</h3>
<p>To avoid logical parts from blending in, keep them separate and insert a large space (at least 120 px) between them.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7137 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314_-4.png" alt="design padding" width="1400" height="1687">Use narrow padding, and the blocks that make up the site stick to each other. This overloads the page and is quite confusing — a site visitor is led to believe that this is one solid text and not parts with different meaning</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7138 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20.png" alt="design elements" width="1400" height="1685" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20.png 1400w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20-249x300.png 249w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20-851x1024.png 851w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20-768x924.png 768w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20-1276x1536.png 1276w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20-380x457.png 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20-20x24.png 20w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20-30x36.png 30w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-20-40x48.png 40w" sizes="auto, (max-width: 1400px) 100vw, 1400px" />Padding is large enough so the difference between these two blocks is immediately visible</td>
</tr>
</tbody>
</table>
<h3>4. Avoid low contrast for text copy on an image</h3>
<p>There should be sufficient contrast between text and background. To make copy prominent, place a contrasting filter over the image. Black is a popular colour but you could also use bright colours and mix and match them.</p>
<p>Another option is using a contrasting image from the start and placing the copy on top of a dark section of a photograph. <img loading="lazy" decoding="async" class="alignnone wp-image-7139 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-26.png" alt="website contrast" width="1680" height="1097"> This image is too light, which makes reading the text copy too difficult</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-7140 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-27.png" alt="web design contrast" width="1680" height="1093"> A filter applied to the photo makes the copy easy to read</p>
<h3>5. Too many styles on one page</h3>
<p>Too many typographic and webpage design styles on one page make it look unprofessional and hard to read. To avoid this, limit yourself to a single font and two options for saturation, for example, normal and bold.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7141 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2.png" alt="web user experience" width="1680" height="1352" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2.png 1680w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2-300x241.png 300w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2-1024x824.png 1024w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2-768x618.png 768w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2-1536x1236.png 1536w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2-380x306.png 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2-24x19.png 24w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2-36x29.png 36w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggtg-2-48x39.png 48w" sizes="auto, (max-width: 1680px) 100vw, 1680px" />Because of too many typography styles beings used, it&#8217;s unclear where the emphasis lies</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7142 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/dbgdbg-2.png" alt="web UX" width="1680" height="1346">One font, one colour and two types of saturation. The typography on the page looks neat and clear</td>
</tr>
</tbody>
</table>
<h3>6. The colour block is too narrow</h3>
<p>Avoid emphasising narrow page elements with colour. It just doesn&#8217;t look good. For example, headings are already well marked thanks to their size, type saturation and paddings. Would you like to highlight a particular point on a page? Use a colour background for the entire block, including a related heading and text copy.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7143 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-28.png" alt="web color guides" width="2500" height="2431">Headings placed on a colour background break up the page&#8217;s continuity and look like separate, independent design elements</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7144 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-29.png" alt="color guidelines" width="2500" height="2419">Both the heading and a related text share the same background. It shows they belong to the same logical set</td>
</tr>
</tbody>
</table>
<h3>7. Too much text copy inside narrow columns</h3>
<p>When there is a lot of text copy in narrow columns, it is difficult to read because site visitors have to skip from one line to the next. Plus, it just doesn&#8217;t look good! It&#8217;s best to cut on the number of columns and shorten the text copy, otherwise nobody will read it.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7145 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314_-5.png" alt="web design ux" width="1680" height="1171">Long, contered columns are hard to read</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7146 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1.png" alt="design UX" width="1680" height="1168" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1.png 1680w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1-300x209.png 300w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1-1024x712.png 1024w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1-768x534.png 768w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1-1536x1068.png 1536w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1-380x264.png 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1-24x17.png 24w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1-36x25.png 36w, https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400_-2-1-48x33.png 48w" sizes="auto, (max-width: 1680px) 100vw, 1680px" />There is little text in these columns, so reading it is easy</td>
</tr>
</tbody>
</table>
<h3>8. Too much centered text</h3>
<p>Centering text on the page works well when there is little text, otherwise it&#8217;s hard for users to navigate it efficiently. At the same time, increase the font size starting from 24 pixels.</p>
<p>If you need to include a lot of text, use the blocks featuring collapsable text copy (in Tilda, it&#8217;s blocks TX12, TX16N or the button BF703).</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7147 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_3-4.png" alt="typography" width="1400" height="1533">Long, centered texts are not easy to read</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7148 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_4-4.png" alt="web content" width="1400" height="1533">A short text under a headline (both centered) look good on a page</td>
</tr>
</tbody>
</table>
<h3>9. Text copy is superimposed over an essential part of an image</h3>
<p>Avoid covering meaningful parts or small details of an image with text. This way, you will both obscure the image and make the text illegible. Try different positions for the lines such as centering them or aligning text left or placing them vertically.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7149 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/ghtt-2.png" alt="graphics" width="1680" height="1265">This headline gets in the way of the woman&#8217;s face. With so many tiny details, it&#8217;s hard to read the text</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7150 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/dgdfgf-2.png" alt="graphic web contrast" width="1680" height="1264">The image and text copy are easy to read and form good composition</td>
</tr>
</tbody>
</table>
<h3>10. Misusing visual hierarchy</h3>
<p>For information hierarchy to be clearly visible on a page, the title on the cover should be bigger than the rest of the headings or at least the same size, especially if the headline is long, for example.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7151 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_5_42-2.png" alt="visual design" width="1400" height="1566">The heading on the header is disproportionally smaller than the following heading, which is confusing. Why? It makes the second heading appear more prominent</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7152 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/4_-2.png" alt="visual web page" width="1400" height="1556">The heading on the header is bigger than the one in the following block, so the whole page looks consistent</td>
</tr>
</tbody>
</table>
<p>The same principle applies to visual hierarchy within a logical block. The headline should be the largest design element on the page, followed by a smaller, less prominent subhead. Next, features titles that follow should be noticeably smaller than the heading, and of the same weight. The smallest fonts should be used for features descriptions.</p>
<p>This will help site visitors distinguish between the most important and less important information.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7153 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_-2.png" alt="website layout" width="1000" height="904">The headline is smaller than features titles and seems secondary, although it&#8217;s more important in this context</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7154 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/4_1_-2.png" alt="page layout" width="1000" height="901">The headline is the most prominent design element on the page and although features titles are written in a smaller type, they are still clearly visible</td>
</tr>
</tbody>
</table>
<h3>11. One logical set is split into two</h3>
<p>A full-screen image or gallery, following a text, resembles a separate, independent block. If you add padding around the gallery, both text copy and images will look as a logical whole thanks to a shared background.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7155 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_6-4.png" alt="logical design" width="1300" height="1487">A full-screen gallery looks disjointed from the headline above and looks like a standalone block</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7156 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_7-4.png" alt="webpage gallery" width="1300" height="1470">The gallery shares the same backdrop as the heading right above it, which makes the whole composition look solid</td>
</tr>
</tbody>
</table>
<h3>12. The title is too large and long</h3>
<p>A very large font is perfect for a short sentence. If the headline is long, use a smaller size font. It will be easy to read and leave plenty of space to all other design elements on the page.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7157 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/ddfb-2.png" alt="font size" width="1680" height="1267">A headline that is too big takes up an entire cover, while design elements jostle for space and the headline is hard to read</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7158 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/ggb-2.png" alt="web fonts" width="1680" height="1264">This page is composed well, all the design elements are in balance with each other, and the copy is easy to read</td>
</tr>
</tbody>
</table>
<h3>13. Wrong use of border styling for buttons</h3>
<p>Borders are necessary when a button is transparent. Adding a border for a colour button does not make sense, it&#8217;s just another meaningless design feature that overloads a page and makes it difficult to read it. <img loading="lazy" decoding="async" class="alignnone wp-image-7159 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-30.png" alt="business website" width="1680" height="1257"></p>
<h3>14. Using too many colours</h3>
<p>Using too many colours on a page is confusing, and it&#8217;s unclear which bits are more important. One or two colours are enough to give visual prominence to what&#8217;s really important.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7160 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/dfgdg-2.png" alt="color palette" width="1000" height="828">There are too many bright colours on the page; this is confusing</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7161 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/dgdgd-2.png" alt="color palettes" width="1000" height="831">One colour accent creates variety and doesn&#8217;t distract from the contents of the page</td>
</tr>
</tbody>
</table>
<h3>15. Overloaded menu</h3>
<p>People visit websites to find solutions to their problems. Help them! Use the menu to help people navigate the website and find what they need quickly and easily. Don&#8217;t overload them with with excessive information. It&#8217;s enough to have 5-7 menu items. <img loading="lazy" decoding="async" class="alignnone wp-image-7162 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-31.png" alt="website navigation" width="1680" height="1073"> This menu carries too much information, making site navigation more difficult</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-7163 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-32.png" alt="web navigation" width="1680" height="1091"> A simple menu makes finding what you need easy</p>
<hr>
<h2>Mistakes in article design</h2>
<h3>1. Long, solid copy</h3>
<p>A wall of text makes reading difficult to understand. For easy navigation, split it into paragraphs or introduce breaks such as a key phrase or an image.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7164 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_6-5.png" alt="web copy" width="1000" height="786">A wall of text is hard to look at</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7165 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_7-5.png" alt="website content" width="1000" height="779">Elements such as pull quotes or images make reading texts easier</td>
</tr>
</tbody>
</table>
<h3>2. Headline is positioned at the same distance between previous and next paragraphs</h3>
<p>A headline should not &#8216;hang&#8217; between chapters at a similar distance because it belongs to the paragraph that follows. The distance above a headline should be 2-3 times bigger than the space under it. At the same time, the distance under a headline should be roughly the same as the space between paragraphs, or slightly larger. This way, the header will visually refer to the subsequent text.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7166 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-33.png" alt="web content" width="1680" height="1307">The heading is positioned at an equal distance between paragraphs above and below it, and it&#8217;s unclear which paragraph it belongs with</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7167 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-34.png" alt="website copy" width="1680" height="1299">Thanks to the use of padding under the heading, it&#8217;s obvious that the heading belongs with the text that follows</td>
</tr>
</tbody>
</table>
<h3>3. There is no logical order</h3>
<p>In typography, contrasting is used to visually divide different levels of text and establish a strict hierarchy. Main headings should be the most prominent on page, subheads should be considerably smaller but still clearly visible.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7168 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_1_-2.png" alt="website organization" width="1000" height="715">A heading and subhead are approximately the same size, and there is no clear hierarchy between them</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7169 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_2_-2.png" alt="web navigation" width="1000" height="708">Logically, the heading is more important than a subhead</td>
</tr>
</tbody>
</table>
<h3>4. Different padding above and below blocks</h3>
<p>If blocks carry the same weight, they should have the same look and feel and be positioned at an equal distance from each other.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7170 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314-16.png" alt="website spacing" width="1680" height="1266">If the space between the header and an author&#8217;s image is too narrow, it looks as if the author has more to do with the header rather than the text that follows</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7171 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-21.png" alt="web padding" width="1680" height="1264">Thanks to identical size padding above and below the image, blocks appear equal</td>
</tr>
</tbody>
</table>
<h3>5. Caption is positioned too close to an image</h3>
<p>On one hand, an illustration and its caption form a whole but these are two separate design elements, and captions should not interfere with images.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7172 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314-17.png" alt="image caption" width="1680" height="1300">The caption sticks to the image and we have trouble properly engaging with either of them</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7173 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-22.png" alt="gallery" width="1680" height="1300">There is a lot of white space between the image and its caption, yet it&#8217;s clear that the caption goes with the image</td>
</tr>
</tbody>
</table>
<h3>6. There is too little space between subhead and text copy</h3>
<p>A subhead and text copy that follows belong together but if the space between paragraphs in an article is bigger than the space between the subhead and the following paragraph, the article looks disjointed.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7174 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314-18.png" alt="heading size" width="1680" height="1300">Space between a heading and a paragraph is smaller than between paragraphs themselves</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7175 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-23.png" alt="subheadings" width="1680" height="1301">Space after the heading is slightly bigger than space between paragraphs</td>
</tr>
</tbody>
</table>
<h3>7. Stand-out design elements are placed too close to the main text</h3>
<p>Design elements used as expressions of emphasis such as key phrases or quotes are independent objects. For them to truly stand out, set them at 75-120 px from the main body copy.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7176 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314_1-2.png" alt="heading space" width="1680" height="1287">There is too little space between the main text and stand-out elements</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7177 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-24.png" alt="heading subheading" width="1680" height="1285">A pull quote truly stands out thanks to big padding</td>
</tr>
</tbody>
</table>
<h3>8. Low-contrast design elements</h3>
<p>If you&#8217;d like to emphasise a certain phrase, be bold, make a key phrase bigger than the main text by 10-15 px. Let the key phrase really stand out from the rest of the text.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7178 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314-19.png" alt="contrast web" width="1680" height="1280"></td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7179 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-25.png" alt="website contrast" width="1680" height="1287">Now everyone can see it thanks to a large font and sufficient padding around the text</td>
</tr>
</tbody>
</table>
<h3>9. Colour background for a narrow text block</h3>
<p>If you&#8217;d like to highlight a small section of a page such as author information, it&#8217;s enough to set sufficient padding around this, which will create an impression of space. Don&#8217;t place this section on a colour background; this will look out of place.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7180 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314-20.png" alt="background color" width="1680" height="1287">Don&#8217;t use colour for the subhead. Using a bigger font and padding should be sufficient to make it pop on the page</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7181 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-26.png" alt="background contast" width="1680" height="1285"></td>
</tr>
</tbody>
</table>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-7182 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_5-2.png" alt="website animation" width="1000" height="708"></p>
<h3>10. There is an empty space between two full-screen images</h3>
<p>When you are using several full-screen images in a sequence, avoid leaving a space between them. The border will still be visible, and there is no need to add an additional design element. It just doesn&#8217;t add anything.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7183 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314-21.png" alt="empty space" width="1680" height="1301">An empty space between full-screen images make no sense and doesn&#8217;t look good</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7184 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-27.png" alt="web spacing" width="1680" height="1301">There is a harmonious flow between images in this example</td>
</tr>
</tbody>
</table>
<h3>11. Too many design accents being used</h3>
<p>Design accents (such as boldface here) work well when there are few of them. Put in too many, and this will get in the way of reading the page. <img loading="lazy" decoding="async" class="alignnone wp-image-7185 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_4-5.png" alt="copy typography" width="1000" height="633"> |<br>Many words are marked in bold, so the text copy appears broken</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-7186 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot_3-5.png" alt="correct typography" width="1000" height="632"> <br>A few marked words draw attention to themselves, and don&#8217;t interfere with the rest of the text</p>
<h3>12. Too many typography styles</h3>
<p>Design should not interfere with readability. The fewer typography styles there are, the more important design elements are visible. It&#8217;s enough to emphasize headlines and subheads, and use contrast for key phrases.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7187 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314-22.png" alt="heading typography" width="1680" height="1657">This text has too many typographic devices. They are distracting to the reader</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7188 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-28.png" alt="heading spacing" width="1680" height="1656">Very few typography styles, emphasis is clear, and text hierarchy is observed</td>
</tr>
</tbody>
</table>
<h3>13. Centering text in a long article</h3>
<p>Centering is usually applied to headlines and block quotes to distinguish them from the rest of the text. A centered long text is difficult to read.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7189 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-35.png" alt="content alignment" width="1680" height="1298">A centered text looks messy, plus it&#8217;s hard to read</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7190 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-36.png" alt="copy alignment" width="1680" height="1302">A text aligned to the left is easy on the eye</td>
</tr>
</tbody>
</table>
<h3>14. Headline appears too close to the image</h3>
<p>A headline is an individual design element. It should not sit too close to an image that follows. For a winning combination, set padding at no less than 60 px, and add a subhead – it will unfold the contents of the page and place the right emphasis where you need it.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7191 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-37.png" alt="heading graphics" width="1680" height="1319">The headline sits too close to the image, there is no breathing room on this page</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7192 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/noroot-38.png" alt="readability" width="1680" height="1308">Here the headline is separated from the image by a subhead, and it relates to the entire section, not just the image</td>
</tr>
</tbody>
</table>
<h3>15. Using italics when they are not needed</h3>
<p>Italics are used to highlight a word or a short phrase within a text. It is not as immediately noticeable as bold type but it does allow you to make an emphasis where you need it.</p>
<p>Don&#8217;t write everything in italics (body copy, headlines). And if sans-serif fonts are used in text copy, avoid italics altogether. <img loading="lazy" decoding="async" class="alignnone wp-image-7193 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/photo-4.png" alt="phrase design" width="1000" height="654"></p>
<p>The phrase stands out already thanks to the font size and padding, so the italics are not really needed here</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-7194 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/photo-5.png" alt="padding design" width="1000" height="654"></p>
<p>Italics are in the right place, adding the right amount of emphasis</p>
<h3>16. Blocks appear out of place relative to the centre of the page and each other</h3>
<p>You can spot this error easily yourself if you take a small break after editing your page (changing font size, alignments or indentation) and taking a look at what&#8217;s on it.</p>
<table>
<tbody>
<tr>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7195 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111314-23.png" alt="correct design" width="1680" height="1280">In this example, the headline is shifted to the left, and text copy to the right</td>
<td style="padding: 2%; width=45% line-height: 14px; font-size: 14px;" valign="top" width="45%"><img loading="lazy" decoding="async" class="alignnone wp-image-7196 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2018/08/20170919__111400-29.png" alt="web page design" width="1680" height="1287">All text elements are in harmony with each other</td>
</tr>
</tbody>
</table>
<hr>
<p>Written by: Ira Smirnova, Masha Belaya, Julia Zass (via <a href="http://blog-en.tilda.cc/articles-website-design-mistakes" target="_blank" rel="noopener">Tilda blog</a>)<br>Design and layout: Julia Zass<br>Posted by: <a href="https://www.cuecamp.com">CueCamp</a></p>


<p></p>
<p>The post <a href="https://www.cuecamp.com/blog/common-webpage-design-mistakes/">Common Webpage Design Element Mistakes</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/common-webpage-design-mistakes/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Make UX Strategies Less Complex &#038; More Functional</title>
		<link>https://www.cuecamp.com/blog/make-ux-strategies-less-complex-more-functional/</link>
					<comments>https://www.cuecamp.com/blog/make-ux-strategies-less-complex-more-functional/#comments</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Mon, 12 Mar 2018 15:10:37 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[Social Media]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Communication]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Human Factors]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[User-Centered Design]]></category>
		<guid isPermaLink="false">https://www.cuecamp.com/?p=6972</guid>

					<description><![CDATA[<p>A user-centric website is one that has the needs of the user in mind. However, user experience / UX strategies don’t have to be complex. There are some basic elements you can deploy that will help your users have a positive experience interacting with your company’s online presence. With 1.3 billion websites on the internet, there...</p>
<p>The post <a href="https://www.cuecamp.com/blog/make-ux-strategies-less-complex-more-functional/">Make UX Strategies Less Complex &#038; More Functional</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>A user-centric website is one that has the needs of the user in mind. However, user experience / UX strategies don’t have to be complex. There are some basic elements you can deploy that will help your users have a positive experience interacting with your company’s online presence. <span id="more-10360"></span></p>
<p>With <a href="http://www.internetlivestats.com/total-number-of-websites/" target="_blank" rel="noopener noreferrer">1.3 billion websites on the internet</a>, there is competition aplenty in nearly every industry. If your site doesn’t provide the best experience, users will simply find another. A user-centered design is going to be highly usable. Everything will function perfectly and without error. Here are nine simple things you can focus on to create a usable site:</p>
<h2>1. Get Right to the Point</h2>
<p>If you have targeted the right audience, they are already interested in your service or product when they land on your page. Instead of adding in unrelated things, simply get to the point. People are quite busy and don’t have time to wade through a lot of information to get to what they want. Add prominent call to action (CTA) buttons that are easy for the consumer to find.</p>
<p><img loading="lazy" decoding="async" class="size-full wp-image-6973 aligncenter" src="https://cdn.cuecamp.com/wp-content/uploads/2018/03/graze.jpg" alt="" width="750" height="367" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/03/graze.jpg 750w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/graze-300x147.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/graze-380x186.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/graze-24x12.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/graze-36x18.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/graze-48x23.jpg 48w" sizes="auto, (max-width: 750px) 100vw, 750px" /><br />
Note how Grace <a href="https://www.graze.com/us" target="_blank" rel="noopener noreferrer">gets right to the point</a> about why you’ve come to their site. They give a quick explanation of how their box subscription kits work and offer a CTA in green that says, “Get Started.” They also offer half-off your first box to entice you a bit further.</p>
<h2>2. Visible Navigation Structure</h2>
<p>Your navigation structure is the backbone of your website. It guides the user through your pages almost from the first minute they arrive. Among visitors referred to your website, on average, <a href="https://komarketing.com/files/b2b-web-usability-report-2015.pdf" target="_blank" rel="noopener noreferrer">50 percent of them will use the site&#8217;s navigation</a> to get themselves oriented. But navigation isn’t simply your nav bar across the top of your page — it’s also the sales funnel you guide the user through from the landing page, plus minor details such as linking your logo to the home page to serve as a breadcrumb for visitors to find their way back to start.</p>
<h2>3. Actionable CTAs</h2>
<p>Your call to action invites your site visitor to take a specific action and to convert from simple site visitor to subscriber or customer. A lot of factors come into play when creating the perfect CTA. The language you use, the color of the button and even page placement can make a difference. You also aren’t limited to a single CTA on a page, but you do need to make sure each one has a clear direction.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-6974" src="https://cdn.cuecamp.com/wp-content/uploads/2018/03/hydroworxs.jpg" alt="" width="993" height="903" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/03/hydroworxs.jpg 993w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/hydroworxs-300x273.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/hydroworxs-768x698.jpg 768w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/hydroworxs-380x346.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/hydroworxs-24x22.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/hydroworxs-36x33.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/hydroworxs-48x44.jpg 48w" sizes="auto, (max-width: 993px) 100vw, 993px" /><br />
HydroWorx <a href="https://www.hydroworx.com/getting-started" target="_blank" rel="noopener noreferrer">offers very clear CTAs on their landing page</a> so site visitors know exactly what action to take and when. The CTAs are a bright orange, which stands out against the white background and complementary dark blue design. The placement is smart because it lines up with each section and helps answer questions the user might have. The wording is clear and includes, &#8220;Request a consultation,&#8221; &#8220;Estimate profit&#8221; and &#8220;Get a profitability analysis.&#8221;</p>
<h2>4. Instant Feedback</h2>
<p>Have you ever filled out a contact form, hit submit and then weren’t sure if it was sent to the company or not? This is very frustrating for users. Site visitors should receive feedback for any action they take. If the visitor clicks on a submit button, a message should pop up that the form has been received and what the visitor can expect next. Look at the different actions a visitor can take on your site and make sure each one has a response appropriate to that action, such as loading a new page that says, “Welcome!” or “Thank you for us.”</p>
<h2>5. Customer Service</h2>
<p>The way your company interacts with site visitors has an impact on their overall experience. Do you have a customer service philosophy in place? Is it effective? Around <a href="https://www.superoffice.com/blog/customer-experience-statistics/" target="_blank" rel="noopener noreferrer">86 percent of consumers say they will pay more</a> for a product if the overall customer experience is better.</p>
<p>Even though the entire customer experience is about more than just service, the way you handle complaints and questions plays a big role in the overall impression the customer has of your brand. Take the time to get a customer service philosophy in place.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-6975" src="https://cdn.cuecamp.com/wp-content/uploads/2018/03/trader-joes.jpg" alt="" width="750" height="360" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/03/trader-joes.jpg 750w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/trader-joes-300x144.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/trader-joes-380x182.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/trader-joes-24x12.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/trader-joes-36x17.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/trader-joes-48x23.jpg 48w" sizes="auto, (max-width: 750px) 100vw, 750px" /><br />
Trader Joe’s has a <a href="https://www.traderjoes.com/" target="_blank" rel="noopener noreferrer">reputation for excellent customer service</a>. Walk into any brick-and-mortar store and you’ll be treated like royalty. One example of them going above and beyond for a customer was reported on Reddit. In this example, the <a href="https://www.reddit.com/r/reddit.com/comments/agsb4/trader_joes_did_something_awesome/" target="_blank" rel="noopener noreferrer">company went out of their way</a> to deliver food to an elderly man who was snowed-in. Not only did they deliver the food, but they also gave him the food for free. That’s a brand that cares about their customers.</p>
<h2>6. Use Heatmaps</h2>
<p>Figure out which areas of your site are most attractive to your site visitors and limit choices to those main links. You can, of course, add other elements within the overall structure of your site, but when it comes to where to focus, you want the main elements people are looking for to be front and center. You may also want to move these sections higher up on your landing page so visitors can find them quickly.</p>
<h2>7. Offer Valuable Information</h2>
<p>One way you can engage users is by educating them on what you sell. The person may or may not have tried your product before, so offering in-depth information allows the user to make an informed decision about whether or not they want to try your product. You can offer this information in the form of guides, articles or a comparison chart. Try offering it in a variety of ways, remembering that visuals are well received by site visitors. You can even conduct some split testing to see which elements work the best for conversions.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-6976" src="https://cdn.cuecamp.com/wp-content/uploads/2018/03/the-whiskey-exchange.jpg" alt="" width="750" height="365" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/03/the-whiskey-exchange.jpg 750w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/the-whiskey-exchange-300x146.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/the-whiskey-exchange-380x185.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/the-whiskey-exchange-24x12.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/the-whiskey-exchange-36x18.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/the-whiskey-exchange-48x23.jpg 48w" sizes="auto, (max-width: 750px) 100vw, 750px" /><br />
The Whiskey Exchange does a good job of <a href="https://www.thewhiskyexchange.com/" target="_blank" rel="noopener noreferrer">educating their site visitors</a>. They offer different topics the user might be interested in along with a CTA to “Learn More.” The topics rotate from time to time, so those who visit the site regularly can still learn new things. For example, some topics featured include popular products from New Zealand and winter drinks.</p>
<h2>8. Social Media Integration</h2>
<p>Some of us have multiple social media accounts, but <a href="https://www.statista.com/statistics/273476/percentage-of-us-population-with-a-social-network-profile/" target="_blank" rel="noopener noreferrer">81 percent of Americans have one at least</a>. The public loves social media because it’s an easy platform to grab information and then share it. There are several ways your site can integrate with social media. Allowing users to share photos and blog posts is one simple way. However, you can also add apps that allow a user to log into your site with Facebook, Twitter or Instagram. Start with the basics of allowing users to share your information and then see what else might be viable.</p>
<h2>9. Integrating Video</h2>
<p>The statistics on using video in your online marketing is something you can’t ignore — <a href="https://www.wordstream.com/blog/ws/2017/03/08/video-marketing-statistics" target="_blank" rel="noopener noreferrer">87 percent of those who market for a living</a> use online video content to drive conversions. Video is a way to get your message across in a way that sticks with the consumer. Videos add information to your website for the user who prefers to watch a video rather than read text or even an infographic.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-6977" src="https://cdn.cuecamp.com/wp-content/uploads/2018/03/bellroy.jpg" alt="" width="750" height="364" srcset="https://cdn.cuecamp.com/wp-content/uploads/2018/03/bellroy.jpg 750w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/bellroy-300x146.jpg 300w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/bellroy-380x184.jpg 380w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/bellroy-24x12.jpg 24w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/bellroy-36x17.jpg 36w, https://cdn.cuecamp.com/wp-content/uploads/2018/03/bellroy-48x23.jpg 48w" sizes="auto, (max-width: 750px) 100vw, 750px" /></p>
<p>Bellroy uses a video that <a href="https://bellroy.com/" target="_blank" rel="noopener noreferrer">highlights some of their products</a> and what they do. If the shopper doesn’t want to read through descriptions, they can view the video and learn a little more quite easily. On the Bellroy site, the video is located under the header, but for the purpose of this case study, we’ve moved the video up so you can see it easily.</p>
<h2>Last Thoughts</h2>
<p>UX strategies shouldn&#8217;t be one of the last things you implement on your site — it should be the first. This will help you avoid frustration on the part of site visitors and retain more of the traffic you drive to your page. Take the time to conduct A/B testing to see which elements work best with your target audience. You should also go through your site step-by-step as though you are a first-time visitor and look for possible issues.</p>
<p>Written by: Lexie Lu, <a href="https://designroast.org/" target="_blank" rel="noopener noreferrer">Design Roast</a> (via <a href="https://www.websitemagazine.com/blog/make-ux-strategies-less-complex-more-functional" target="_blank" rel="noopener noreferrer">Website Magazine</a>)<br />
Posted by: <a href="https://www.cuecamp.com">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/make-ux-strategies-less-complex-more-functional/">Make UX Strategies Less Complex &#038; More Functional</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/make-ux-strategies-less-complex-more-functional/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Customer Engagement, Relationships, and Unique Experiences Matter</title>
		<link>https://www.cuecamp.com/blog/customer-engagement-relationships-and-unique-experiences-matter/</link>
					<comments>https://www.cuecamp.com/blog/customer-engagement-relationships-and-unique-experiences-matter/#respond</comments>
		
		<dc:creator><![CDATA[Dr. Sharritt]]></dc:creator>
		<pubDate>Wed, 22 Nov 2017 16:07:33 +0000</pubDate>
				<category><![CDATA[Content Marketing]]></category>
		<category><![CDATA[Digital Marketing]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Aesthetics]]></category>
		<category><![CDATA[Content Writing]]></category>
		<category><![CDATA[Credibility]]></category>
		<category><![CDATA[Customer Experience]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[User-Centered Design]]></category>
		<guid isPermaLink="false">http://www.cuecamp.com/?p=6868</guid>

					<description><![CDATA[<p>If there is one term in the realm of digital business that always seems to spark discussion (and often heated debate) among ’Net professionals it is that of “customer engagement,” and its pursuit and, of course, achievement. Engagement is, without question, a complicated subject matter – and practice – thanks in part to the variety...</p>
<p>The post <a href="https://www.cuecamp.com/blog/customer-engagement-relationships-and-unique-experiences-matter/">Customer Engagement, Relationships, and Unique Experiences Matter</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>If there is one term in the realm of digital business that always seems to spark discussion (and often heated debate) among ’Net professionals it is that of “customer engagement,” and its pursuit and, of course, achievement. <span id="more-10359"></span></p>
<p>Engagement is, without question, a complicated subject matter – and practice – thanks in part to the variety of definitions that could be, and often are, applied to it. By creating unique and memorable digital experiences, however, it is possible to develop productive and profitable relationships with customers.</p>
<p>One enterprise, for example, might define engagement as repeat visits with purchase amounts over a certain level, while another might be laser-focused on those moments along the user’s journey when activity reaches a certain level – X number of pages viewed, Y number of items shared on social or Z number of friends referred as the indicator of a genuine level of engagement. In each of these instances it is easy to see how deeper connections and greater revenue can be achieved from engagement.</p>
<p>Essentially, Web businesses (all businesses really) will measure engagement in different ways based on enterprise objectives. Regardless of how an enterprise defines and plans to increase engagement among its users, however, one thing should be certain – it is essential to success.</p>
<h2>Customer Engagement Today Starts with Tech</h2>
<p>While an incredible amount of investment (time and financial resources) is required to achieve true improvements to the state of user engagement, there are plenty of technologies and techniques that can be leveraged to get enterprises where they need to be.</p>
<p><img loading="lazy" decoding="async" class="alignright wp-image-6869 size-full" src="https://cdn.cuecamp.com/wp-content/uploads/2017/11/bot-phone-1.png" alt="customer engagement" width="300" height="517" srcset="https://cdn.cuecamp.com/wp-content/uploads/2017/11/bot-phone-1.png 300w, https://cdn.cuecamp.com/wp-content/uploads/2017/11/bot-phone-1-174x300.png 174w, https://cdn.cuecamp.com/wp-content/uploads/2017/11/bot-phone-1-14x24.png 14w, https://cdn.cuecamp.com/wp-content/uploads/2017/11/bot-phone-1-21x36.png 21w, https://cdn.cuecamp.com/wp-content/uploads/2017/11/bot-phone-1-28x48.png 28w" sizes="auto, (max-width: 300px) 100vw, 300px" />Authentication solution LogMeIn, for example, recently acquired Nanorep, a company that provides a self-service chatbot and virtual assistant. The Nanorep products use artificial intelligence (AI) and natural language processing (NLP) technologies to create solutions (bots) that make self-service more engaging and intuitive (see image). Brands including Intuit, FedEx, Toys“R”Us and Vodafone are just a few of the companies currently using Nanorep for some of their key customer service initiatives.</p>
<p>LogMeIn also recently released a new customer relationship (or engagement) management platform, Bold360, and many will see the Nanorep acquisition as another opportunity to deliver more human, more personalized and more intelligent customer engagement solutions. LogMeIn seems to be headed toward developing digital experiences that enable them to establish better ’Net relationships with consumers, but what about you?</p>
<p>The reason that engagement is such a tricky subject to discuss (besides the fact that it can be defined in so many different ways) is that the factors and elements we are dealing with here (emotions and data) are so wildly different for each user.</p>
<h2>The Secret to Customer Engagement</h2>
<p>When users feel a connection with a brand, a bond or rapport with the experience that has been presented, what ultimately ensues is familiarity (the precursor to customer engagement).</p>
<p>The secret to engaging users therefore is actually quite simple: know the user.</p>
<p>Knowing users’ wants, desires and ultimately their emotions provides an opportunity to spark their interest. Engagement only grows when users are confident that businesses actually care about their well-being and meet their expectations – or, at least to care more than taking their money alone.</p>
<p>Despite loads of evidence that personalized digital experiences outperform those that are not tailored to a person’s history, behaviors and attributes, Web retailers have been relatively slow to adopt technology to make it happen. Omnichannel commerce platform Kibo and Astound Commerce have released a joint study that assessed the current personalization and omnichannel sophistication of retailers testing metrics across desktop, mobile and in-store buying touchpoints; and the results are disheartening to say the least.</p>
<p>Seventy percent of personalization experiences on an e-commerce site, for example, only happened when the shopper was logged into an account. What is even worse is that just 4 in 10 retailers did not send an email following an abandoned cart on a website. Of those retailers that did send an email, zero offered an incentive to purchase. And here is another: 4 in 10 retailers did not even display recently visited items on a website upon a consumer’s return visit.</p>
<p>How can e-commerce merchants, or any ’Net professional, expect to develop a productive relationship with that level of effort?</p>
<p>The point is there is more that can be done to improve the experience of users and truly engage them – which can only be achieved by creating unique,dynamic and interesting experiences.</p>
<h3>Creating &amp; Crafting Experiences</h3>
<p>Now that the secret to customer engagement is known (remember, it is to have an emotional connection with the user) – enterprises are ready to create and craft experiences that truly engage users.<br />
<strong><br />
<em>Step 1:</em> </strong>Identify why users are not engaging currently If current rates of conversion and rates of interaction are known, enterprises can compare participation levels among audience groups and content categories to position their products and offers in a way that delivers an experience that is in-demand. Analytics help track and collect data about user profiles, which is the only sound way to develop an engagement strategy.<br />
<strong><em><br />
Step 2: </em></strong>Foster collaboration People have some weird, human and internal need to share their stories, struggles, victories and losses. They also love to talk about themselves and will “love” businesses that provide them an opportunity to do that. When users are able to send messages to one another, post videos/images, share their opinions and expertise with others, they will be delighted by the opportunity and the chance of return increases dramatically.</p>
<p><strong><em>Step 3: </em></strong>Develop memorable experiences The experiences that brands create must be memorable and lead to some pre-defined performance gain.</p>
<p>Loyalty software provider OfferCraft, for example, defines engagement as “motivation.” In other words, how can brands use digital outreach and digital experiences to incite action?</p>
<p>OfferCraft’s VP of Marketing Dan Grech suggested it comes down to getting people to do what it is the enterprise wants them to do. And how do they do that exactly?</p>
<p>Enterprises may want to consider approaching that question through the prism of science (specifically behavioral economics and decision theory).</p>
<p>“One of the ways we do that is through games,” said Grech. “Games are tremendously motivating to people. If you take any promotion and you gamify it, you accelerate it – you get more people to do what you want them to do.”</p>
<p>In practice, OfferCraft teamed up with Swinomish Casino &amp; Lodge in Anacortes, Washington, to launch weekly gamified offers that customers can play on the new website SwinBig.com, in email and via social media. And each week, the Swinomish Team offers a live look at each game on Facebook.</p>
<p>The games, themed around a movie series, summer holidays, and casino amenities and anniversaries, have been received enthusiastically by more than 10,000 people, and the prizes have driven hundreds of players each week to visit the property. Since initially launching in May 2017, the weekly gamified offers have driven 6.97 times the number of redemptions compared to similar offers on Facebook and email made a year earlier.</p>
<p>Promotions using Facebook Live videos and SwinBig.com have led to a 15 percentage point increase (from 10 percent to 25 percent) in the reward redemption rate in the 2017 summer movie campaigns compared to 2016.</p>
<p>Understanding the barrier to engagement, fostering community and collaboration among users, and making the experience memorable and enjoyable are all important to the success of engagement initiatives, but there are many other elements that must be considered as well.</p>
<h3>The Role of Design in Engagement</h3>
<p>It cannot be said enough; everything impacts the level of engagement that consumers will experience. And that everything, of course, includes digital design.</p>
<p>Unfortunately for many enterprises, design can have a deeply negative affect on their consumers’ experience. How often, for example, are the long-term ramifications of digital design decisions made at your company (recently or long in the past) considered in relation to levels of engagement?</p>
<p>Design trends emerge routinely and they often immediately capture the attention of everyone involved in the digital experience, but it is difficult – even among the most data-driven and industry experienced – to understand the result and broader impact of implementing specific elements or leveraging entirely new styles. Such is the case, it appears, with the trend of flat design.</p>
<p>Some research made available recently from nngroup revealed that flat interfaces often use weak signifiers. The eye tracking experiment compared different kinds of clickability clues, and found that user interfaces with weak signifiers require more user effort than strong ones. Essentially, flat user interface (UI) elements attract less attention and cause greater uncertainty – and that is obviously not the ideal scenario.</p>
<p>nngroup investigated how strong clickability signifiers (traditional UI design clues such as underlined, blue text or a glossy 3-D button) and weak or absent signifiers (for example, linked text styled as static text or a ghost button) impact the ways users process and understand Web pages. The results, as you might imagine, are anything but encouraging. The average amount of time was significantly higher on the weak-signifier versions than the strong signifier versions. On average, participants spent 22 percent more time (which means slower task performance) looking at the pages with weak signifiers.</p>
<p>What’s more, the average number of fixations was significantly higher on the weak-signifier versions than the strong-signifier versions. On average, people had 25 percent more fixations on the pages with weak signifiers. nngroup suggested that since their experiment used targeted findability tasks, more time and effort spent looking around the page is not good.</p>
<p>There is no reason to forgo design modifications because of concerns over what might happen to engagement, but it is something to monitor closely. As always, a marketer using his or her best digital judgment is always a good decision. When all else fails, they should follow their digital heart.</p>
<h3>Emotional Intelligence &amp; Engagement</h3>
<p>It turns out that a high-level of emotional intelligence could greatly benefit brands – particularly those that primarily service the millennial generation.</p>
<p>According to recent consumer research from Klarna UK, millennials experience higher levels of anxiety, impulsiveness and impatience than their older counterparts. The research indicates that two thirds (68 percent) of millennials reported feeling excitement when adding items to their online basket, compared to less than a quarter (24 percent) of people over 55. Other highlights of the study include:<br />
<em><br />
+ 20 percent of millennials would feel less guilty if they were offered deferred payment options, and 1 in 5 would be more likely to complete a purchase if they knew they could spread the cost over time.</em></p>
<p>+ 89 percent of millennials use the basket as a tool to review costs, while more than three quarters often use their basket as a wish list, compared with only 29 percent of over 55s. Meanwhile, nearly three quarters (74 percent) admit to indulging in ‘buzz browsing’ – adding items to a basket with no clear intention to buy.</p>
<p>+ 58 percent of millennials are more likely to complete a purchase if an online offer is going to expire, so tapping into this fear of missing out by offering time-bound incentives and educating shoppers about pay after delivery or consumer finance options can encourage customers to complete their purchase.</p>
<p>At the core of every data-driven engagement strategy is the ability to target individual customers with precision, in real-time. Knowing how often customers interact with a brand, where they encounter a brand and how much they spend across all channels allows marketers to drive intelligent interactions based on data, not conjecture.</p>
<p>Website owners need to target users with customer lifetime value (CLV) in mind and there is no shortage of solutions emerging to help them do just that.</p>
<p>Customer engagement platform SessionM, for example, recently launched an interesting enhancement to its Audiences Module to enable marketers to go beyond the traditional method of defining and creating customer segments using generic demographics or attribute data filters and target using more specific data such as which items were purchased, spend thresholds, etc.</p>
<p>The update also enables marketers to calculate RFM (recency of purchase, frequency of purchases, monetary value of purchases) data about each customer, which can be aligned with guidance from SessionM’s product recommendation engine to deliver the next-best offer based on individuals’ preferences and past purchasing behaviors.</p>
<h2>In (Constant) Pursuit of Customer Engagement</h2>
<p>There is no one way to define engagement and no one engaging experience that will apply to every brand. Many elements and processes must be in place to establish genuine connections with consumers and motivate them to take the action desired by the enterprise. Only by focusing on creating technology-driven, unique and memorable digital experiences is it possible to win the hearts, minds and wallets of today’s consumers.</p>
<p>Written by: Peter Prestipino, via <a href="https://www.websitemagazine.com/blog/customer-relationships-unique-experiences-matter" target="_blank" rel="noopener noreferrer">Website Magazine<br />
</a>Posted by: <a href="https://www.cuecamp.com">CueCamp</a></p>
<p>The post <a href="https://www.cuecamp.com/blog/customer-engagement-relationships-and-unique-experiences-matter/">Customer Engagement, Relationships, and Unique Experiences Matter</a> appeared first on <a href="https://www.cuecamp.com">CueCamp</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.cuecamp.com/blog/customer-engagement-relationships-and-unique-experiences-matter/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
