<?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>featured &#8211; UX Blog</title>
	<atom:link href="https://www.uxblog.com/tag/featured/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.uxblog.com</link>
	<description></description>
	<lastBuildDate>Fri, 10 Apr 2020 11:01:59 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.4.1</generator>
	<item>
		<title>Designing a User Experience for Kids</title>
		<link>https://www.uxblog.com/designing-a-user-experience-for-kids/</link>
					<comments>https://www.uxblog.com/designing-a-user-experience-for-kids/#respond</comments>
		
		<dc:creator><![CDATA[UX Blog Team]]></dc:creator>
		<pubDate>Thu, 09 Apr 2020 16:00:00 +0000</pubDate>
				<category><![CDATA[content]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[accessibility]]></category>
		<category><![CDATA[featured]]></category>
		<guid isPermaLink="false">https://www.uxblog.com/?p=2081</guid>

					<description><![CDATA[<p>Designing a good website user experience for kids can be tough. Let&#8217;s take a look at everything you need to know about developing&#8230;</p>
<p>The post <a rel="nofollow" href="https://www.uxblog.com/designing-a-user-experience-for-kids/">Designing a User Experience for Kids</a> appeared first on <a rel="nofollow" href="https://www.uxblog.com">UX Blog</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><span style="caret-color: #333333; color: #333333; font-family: Roboto, sans-serif,">Designing a good website user experience for kids can be tough. </span><span style="caret-color: #333333; color: #333333; font-family: Roboto, sans-serif,">Let&#8217;s take a look at everything you need to know about developing user experience for kids.</span></p>
<h2 style="margin: 0px; font-family: Roboto, sans-serif,">Consider&nbsp;Their Age</h2>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">The term &#8216;kid&#8217; typically applies to someone who&#8217;s in grade school (but also younger than 12 or 13). So, the general range you&#8217;ll be working with will likely be ages 6-12.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Since children develop and learn so rapidly, these ages will need to be further segmented to ensure that your UX has the best design possible. For example, someone in kindergarten is going to have different interests and levels of comprehension than someone in the fourth grade.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Let&#8217;s take a look at what you can expect from two age ranges.</p>
<h3 style="margin: 0px; font-family: Roboto, sans-serif,">6 to 9 years Old</h3>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Children of these ages display a rapidly-growing vocabulary and are beginning to understand concepts and writing on a more complex level. Since they&#8217;re still so young, though, they&#8217;re often more interested in sounds, colors, symbols, etc. when browsing online.</p>
<h3 style="margin: 0px; font-family: Roboto, sans-serif,">10 to 12 Years Old</h3>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">As these children progress toward the end of elementary school (and perhaps even enter middle school), their reading comprehension and&nbsp;level of basic understanding will progress even further. At this age, copy becomes more relevant as opposed to colors or symbols.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">They&#8217;ll also be able to navigate through a website efficiently and are often familiarized with touchscreen, interface patterns, etc.</p>
<h2 style="margin: 0px; font-family: Roboto, sans-serif,">Designing&nbsp;The User Experience</h2>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Regardless of how old your&nbsp;audience is, there&#8217;s a handful of concepts that you&#8217;ll want to focus on when designing your website. It&#8217;s important to note, though, that the level of efficacy will often vary depending on your audience&#8217;s personality traits.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">For example, those who are heavily interested in sports will likely respond in a different way than a child who is more introverted and&nbsp;has an interest in science fiction.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Let&#8217;s dive into what you should focus on.</p>
<h3 style="margin: 0px; font-family: Roboto, sans-serif,">Color Choice</h3>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Brushing up on<span class="Apple-converted-space">&nbsp;</span><a href="https://www.colormatters.com/color-and-design/basic-color-theory" target="_blank" rel="noopener noreferrer">basic color theory</a><span class="Apple-converted-space">&nbsp;</span>can go a long way in helping you choose the perfect color palette for your website. While it&#8217;s important to choose a set of colors that are aesthetically pleasing together, they should also embody the energy your brand seeks to deliver.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">For example, let&#8217;s take the aforementioned&nbsp;child interested in<span class="Apple-converted-space">&nbsp;</span><strong style="font-weight: bold">sports (Child A)</strong><span class="Apple-converted-space">&nbsp;</span>and one interest in<span class="Apple-converted-space">&nbsp;</span><strong style="font-weight: bold">science fiction (Child B).</strong></p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">A website that<span class="Apple-converted-space">&nbsp;</span><strong style="font-weight: bold">Child A</strong><span class="Apple-converted-space">&nbsp;</span>might visit could be one of a coach who offers private training sessions for soccer. Given soccer&#8217;s quick pace and the lush colors one typically sees at a soccer field (green grass and blue sky), bright and energetic colors are more appropriate here.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">This means hues&nbsp;like lime green, sky blue, and even reds/yellows/oranges.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,"><strong style="font-weight: bold">Child B</strong>, on the other hand, may find themselves on a website for an online game or one that has content about books, movies, etc. of the genre.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">These experiences come at a far slower pace than soccer (storytelling, reading in general, etc.), so your color palette should include things like navy blue, black, purple, and other colors that are naturally associated with calmness or darkness.</p>
<h3 style="margin: 0px; font-family: Roboto, sans-serif,">Functionality and Aesthetic Design</h3>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">How easily your audience is able to use and navigate through your site is often correlated with how old they are.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">As a general rule of thumb, you&#8217;ll want to incorporate less-complicated design choices when targeting children of a younger age. This means that children aged 6 to 9 will likely be overwhelmed by an abundance of links, large chunks of copy, etc.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Rather than links, clickable buttons are a great way to help a younger child find their way around your site&#8217;s layout.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">By contrast, older kids are more likely to read copy, click links, and have an overall easier time going through your site&#8217;s pages. They&#8217;re still unlikely, though, to read anything related to how your company functions.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">This means pages that discuss your mission statement or your company&#8217;s background should be kept separate from the content you want your audience to focus on.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">In terms of aesthetics, a minimalist approach should be taken in order to eliminate any distractions. Removing unnecessary fluff and having a streamlined layout will go a long way when it comes to<span class="Apple-converted-space">&nbsp;</span>user experience.</p>
<h3 style="margin: 0px; font-family: Roboto, sans-serif,">The&nbsp;Text</h3>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Younger children will respond much better to short sentences with larger text as opposed to the formatting you&#8217;d find on a typical web page. Those on the upper end of your audience&#8217;s age range likely won&#8217;t have issues with reading regular copy.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Incorporating pictures, though, (especially as a method to supplement a difficult concept) is a reliable strategy no matter how old your audience is. As you may expect, younger children will often respond better to more images vs. text.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Your vocabulary<span class="Apple-converted-space">&nbsp;</span>and sentence complexity should also coincide with your audience&#8217;s age, as it can be very easier for a younger child to feel lost or an older child to feel as though your site is &#8216;too easy&#8217; for them.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">Creating &#8216;How-To&#8217; sections on your site&#8217;s pages is also a reliable way to ensure your audience doesn&#8217;t run into any issues. Things like downloading, printing, or uploading are often difficult for those who haven&#8217;t done them before.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20426'%3E%3C/svg%3E" data-src="https://www.uxblog.com/wp-content/uploads/2020/03/72539f78-8ab4-4ab9-82c7-1d88fdc27c7a-7012-000004ec55915021.jpg" class="size-full wp-image-2085 lazy" width="640" height="426" data-srcset="https://www.uxblog.com/wp-content/uploads/2020/03/72539f78-8ab4-4ab9-82c7-1d88fdc27c7a-7012-000004ec55915021.jpg 640w, https://www.uxblog.com/wp-content/uploads/2020/03/72539f78-8ab4-4ab9-82c7-1d88fdc27c7a-7012-000004ec55915021-300x200.jpg 300w, https://www.uxblog.com/wp-content/uploads/2020/03/72539f78-8ab4-4ab9-82c7-1d88fdc27c7a-7012-000004ec55915021-585x389.jpg 585w, https://www.uxblog.com/wp-content/uploads/2020/03/72539f78-8ab4-4ab9-82c7-1d88fdc27c7a-7012-000004ec55915021-263x175.jpg 263w" data-sizes="(max-width: 640px) 100vw, 640px" /></p>
<h2 style="margin: 0px; font-family: Roboto, sans-serif,">Optimizing User Experience For Kids on Your Site Can Seem Difficult</h2>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">But it doesn&#8217;t have to be.</p>
<p style="margin: 0px 0px 10px; font-family: Roboto, sans-serif,">With the above information about user experience for kids in mind, you&#8217;ll be well on your way toward ensuring your younger users are able to find everything they need.</p>
<p>The post <a rel="nofollow" href="https://www.uxblog.com/designing-a-user-experience-for-kids/">Designing a User Experience for Kids</a> appeared first on <a rel="nofollow" href="https://www.uxblog.com">UX Blog</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.uxblog.com/designing-a-user-experience-for-kids/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Top 10 UX Design Inspiration Sites to Follow in 2020</title>
		<link>https://www.uxblog.com/top-10-ux-design-inspiration-sites-to-follow-in-2020/</link>
					<comments>https://www.uxblog.com/top-10-ux-design-inspiration-sites-to-follow-in-2020/#respond</comments>
		
		<dc:creator><![CDATA[UX Blog Team]]></dc:creator>
		<pubDate>Wed, 01 Apr 2020 09:52:58 +0000</pubDate>
				<category><![CDATA[design]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[inspiration]]></category>
		<guid isPermaLink="false">https://www.uxblog.com/?p=2075</guid>

					<description><![CDATA[<p>UX design is a job where innovation is constantly needed. Different ages now have their certain website designs affiliated with them. If I&#8230;</p>
<p>The post <a rel="nofollow" href="https://www.uxblog.com/top-10-ux-design-inspiration-sites-to-follow-in-2020/">Top 10 UX Design Inspiration Sites to Follow in 2020</a> appeared first on <a rel="nofollow" href="https://www.uxblog.com">UX Blog</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">UX design is a job where innovation is constantly needed. Different ages now have their certain website designs affiliated with them. If I say “a site from the 1990’s,” we all know the websites I’m talking about.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">With us moving quickly away from cheesy wallpapers and comic sans, coming up with new designs consistently can be difficult. We all need inspiration from time to time, so we’d like to give you the UX design sites that will inspire you to make the next great website!</p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">1. Pinterest</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">It may be cliche, but Pinterest is where a lot of creative people have flocked to for inspiration. There are seemingly endless ideas being posted constantly on Pinterest for UX design.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">There are several areas on Pinterest dedicated to the art, in fact, which makes it extremely easy to navigate and find what you want. The more people pin and follow, the more ideas will come up daily for you to springboard into your next project.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://www.pinterest.com/search/pins/?rs=typed&amp;q=ux%20inspiration" target="_blank" rel="noopener noreferrer">Visit Pinterest</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">2. Dribbble</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Dribbble is a place where professionals post their design ideas and it’s free to look through them! They have a great sorting system, so you can look for the type of<span class="Apple-converted-space"> </span>user experience<span class="Apple-converted-space"> </span>you want to provide it.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Dribbble promises high quality and they ensure everything on their site is by making it so that only people who are approved by Dribbble can upload their ideas. You can always apply to be a content creator for them, or you can just scroll through and take in the sights.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://dribbble.com" target="_blank" rel="noopener noreferrer">Visit Dribbble</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">3. Mobbin</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Mobbin is a more specialized market for UX design. They only focus on the mobile market and more specifically the IOS market. Being so niche though gives them the leg up when it comes to other sites. They draw in great designers for IOS specifically!</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Granted, this doesn’t mean you can’t have amazing ideas for any mobile platform here. Mobbin lets you look through existing and custom-designed mobile user experiences. Sometimes the best ideas come from looking at the old to find the new.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://mobbin.design/" target="_blank" rel="noopener noreferrer">Visit Mobbin</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">4. Behence</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">This UX design inspiration site doesn’t just focus on websites. It<span class="Apple-converted-space"> </span>displays photography, illustrations, and much more! It is said that designers can find inspiration from anywhere, and Behence has a lot of inspiration to give.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">If you need your breath taken away, browse around Behance a bit, and you can guarantee to find something that’s one of a kind.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://www.behance.net/" target="_blank" rel="noopener noreferrer">Visit Behance</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">5. Uplabs</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">From Cryptocurrency to cats, Uplabs has a large library of ideas for IOS, Android, and your standard websites. They have a handy subscription option also which lets you download as much premium content as you want from their site.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">The premium subscription will set you back $8.50 per month, but it could save you money in the long run if you’re loving this site as much as other UX designers do!</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://www.uplabs.com/" target="_blank" rel="noopener noreferrer">Visit Uplabs</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">6. Awwwards</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Awwwards has a different way of finding the best of the best. They have a competition that anyone can submit a website for to win an award from their site. They also display a website of the day, month and year.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">This means that new sites are being posted daily, and they are the best of the best. The sites that are on Awwwards are simply amazing. They have a scoring system for each site that’s been submitted, and it means that only the best sites in the world are featured here.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://www.awwwards.com/" target="_blank" rel="noopener noreferrer">Visit Awwwards</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">7. Pttrns</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Pttrns feels a bit more like a site that you would buy<span class="Apple-converted-space"> </span>1990’s computer parts<span class="Apple-converted-space"> </span>from, but don’t worry, they have a lot of great ideas in their database!</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">They have a lot of designs to sort through, and you could spend all-day on this site finding great ideas. They are limited to phone UX design, but they aren’t a bad place to go for that extra bit of motivation.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://pttrns.com/" target="_blank" rel="noopener noreferrer">Visit Pttrns</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">8. Lapa.Ninja</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Lapa.Ninja is probably the most comprehensive site when it comes to UX design that we’ve brought up. They have classes on how to design, they have websites to go to make you a better designer, and they have beautiful designs to choose from.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">They have a free and a paid section for design but feel free to take in the sites on lapa.ninja. You can click through and get a full array of every piece of the designs they offer.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://www.lapa.ninja/" target="_blank" rel="noopener noreferrer">Visit Lapa.Ninja</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">9. Sitesee</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Sitesee is another site with great designs, but they are unique in that they have their own browser extension. What the extension will do is provide you<span class="Apple-converted-space"> </span>UX design ideas<span class="Apple-converted-space"> </span>on your home page every time you log in!</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">This means that every time to open up your browser to do work, inspiration is just waiting for you. It will change your home page background frequently to keep the creative juices flowing, and they have a vast library if you want to do something more manual.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://sitesee.co/" target="_blank" rel="noopener noreferrer">Visit Sitesee</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">10. OnePageLove</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">OnePageLove has a one of a kind demoing system where you can look through a test site with their designs implemented. They want to ensure that you love it before you buy it, and they have succeeded.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">With their professional team of reviewers, the quality of each UX design on this site is top-notch. Whether it’s apps or websites, check out OnePageLove for some astonishing content.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;"><a href="https://onepagelove.com/" target="_blank" rel="noopener noreferrer">Visit One Page Love</a></p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">UX Design for the Future</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Since we are on the cutting edge of technology and moving forward at lightning speed, we need constant ideas. These ten sites are the best we’ve found for great ideas that are moving the industry of UX design forward.</p>
<p>The post <a rel="nofollow" href="https://www.uxblog.com/top-10-ux-design-inspiration-sites-to-follow-in-2020/">Top 10 UX Design Inspiration Sites to Follow in 2020</a> appeared first on <a rel="nofollow" href="https://www.uxblog.com">UX Blog</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.uxblog.com/top-10-ux-design-inspiration-sites-to-follow-in-2020/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Using Heatmaps to Learn Your Users&#8217; Behavior and Improve Their Experience</title>
		<link>https://www.uxblog.com/using-heatmaps-to-learn-your-users-behavior-and-improve-their-experience/</link>
					<comments>https://www.uxblog.com/using-heatmaps-to-learn-your-users-behavior-and-improve-their-experience/#respond</comments>
		
		<dc:creator><![CDATA[UX Blog Team]]></dc:creator>
		<pubDate>Fri, 13 Mar 2020 14:37:06 +0000</pubDate>
				<category><![CDATA[design]]></category>
		<category><![CDATA[tools]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[heat map]]></category>
		<category><![CDATA[UX research]]></category>
		<guid isPermaLink="false">https://www.uxblog.com/?p=2057</guid>

					<description><![CDATA[<p>How much your audience enjoys using your site can have a direct impact on your conversion rate. In order to optimize the user experience&#8230;</p>
<p>The post <a rel="nofollow" href="https://www.uxblog.com/using-heatmaps-to-learn-your-users-behavior-and-improve-their-experience/">Using Heatmaps to Learn Your Users&#8217; Behavior and Improve Their Experience</a> appeared first on <a rel="nofollow" href="https://www.uxblog.com">UX Blog</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">How much your audience enjoys using your site can have a direct impact on<span class="Apple-converted-space"> </span><a href="https://support.google.com/google-ads/answer/2684489?hl=en" target="_blank" rel="noopener noreferrer">your conversion rate</a>.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">In order to optimize the user experience on your site, you&#8217;re going to need to know where your visitors spend their time. Otherwise, you may find yourself doubling down on a segment of your site nobody interacts with and miss other opportunities for growth.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Not sure where to start? Don&#8217;t worry, we’ve got you covered.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Let&#8217;s take a look at everything you need to know about using heat maps to optimize UX.</p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">So&#8230; What Is a Heatmap?</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">The term &#8216;heat&#8217; may seem like an odd one to use in digital marketing, but it&#8217;s more relevant than many people may first expect. More specifically, heat refers to an area of concentration within a<span class="Apple-converted-space"> </span><strong style="box-sizing: inherit; font-weight: bold;">data visualization</strong>, or graphic representation of your site&#8217;s metrics.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">For example, let&#8217;s assume that you&#8217;d like to learn more about where your audience spends their time on one of your site&#8217;s highest-ranking pages. A heat map will display areas of your page that your audience often interacts with as &#8216;hotter.&#8217;</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Conversely, segments of your page that have little activity will be shown as &#8216;cooler.&#8217;</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">In general, there are three different metrics that heat maps measure:</p>
<ol style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">
<li style="box-sizing: inherit;"><strong style="box-sizing: inherit; font-weight: bold;">Mouse movement</strong></li>
<li style="box-sizing: inherit;"><strong style="box-sizing: inherit; font-weight: bold;">Scrolling</strong></li>
<li style="box-sizing: inherit;"><strong style="box-sizing: inherit; font-weight: bold;">Clicking</strong></li>
</ol>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Through each of these user behaviors, you&#8217;ll be able to obtain a solid idea of how your audience spends their time on your site&#8217;s pages and where they tend to gravitate toward.</p>
<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0.5rem; font-family: Roboto, sans-serif; font-weight: 800; line-height: 1.3em; color: #464646; font-size: 30px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">What Utility Do Heatmaps Provide?</h2>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">With the above data, you&#8217;ll be able to answer specific questions that you may have about your website and audience. For example, you may wonder how many people actually read to the end of your blog posts, or what type of content/links they click on the most often.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Let&#8217;s dive into what else you can learn.</p>
<h3 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1em; font-family: Roboto, sans-serif; font-weight: bold; line-height: 1.3em; color: #464646; font-size: 24px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">CTA Performance</h3>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Since the majority of calls to action are either a link or a clickable button, it&#8217;s relatively easy to find out which ones are the most effective through a heat map.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">If your page has multiple CTAs, you&#8217;ll also see which types are the most popular. If the design is consistent among your CTAs, you&#8217;ll learn which tagline leads to the most clicks.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">For example, you may be researching your CTA to pre-order a pair of running shoes that your company manufactures and discover &#8216;Get Your Pair&#8217; outperforms &#8216;Pre-Order Now.&#8217;</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">This will help you make changes to other areas of your site and increase your performance in the future.</p>
<h3 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1em; font-family: Roboto, sans-serif; font-weight: bold; line-height: 1.3em; color: #464646; font-size: 24px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Design + Layout</h3>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Sometimes, an aesthetically-pleasing design may actually be a detriment. A heat map could show you that people spend much of their time looking at (or even saving) the images on your site as opposed to reading your content.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Similarly, you could also learn that certain elements are skipped over entirely (such as drop-down menus). While it&#8217;s always a good idea to<span class="Apple-converted-space"> </span><a href="https://www.uxblog.com/5-tips-to-drastically-improve-your-website-ux/" target="_blank" rel="noopener noreferrer">optimize user experience</a>, you don&#8217;t want to sacrifice your conversion rate in the process.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">If you decide to get help from a professional regarding your site&#8217;s design, a heat map will also allow you to easily communicate problem areas and help optimize its appearance and layout in the future.</p>
<h3 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1em; font-family: Roboto, sans-serif; font-weight: bold; line-height: 1.3em; color: #464646; font-size: 24px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Scroll Depth</h3>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">How far people scroll often has a direct correlation with the action they&#8217;re willing to take. In many cases, they may not even reach your CTA if they don&#8217;t scroll down far enough.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">A heat map will clearly display how frequently users scroll on a particular page. Keep in mind, though, that anything <strong style="box-sizing: inherit; font-weight: bold;">above the fold</strong><span class="Apple-converted-space"> </span>(the segment of the page that&#8217;s visible without having to scroll at all) will show a high level of activity.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">But, just because they reach this part of the page doesn&#8217;t mean that they&#8217;re reading or interacting with the content that&#8217;s readily available. So, you&#8217;ll need to research your audience&#8217;s mouse movement and clicks along with this information.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">If you find that the majority of your audience stops scrolling after a certain point, be sure to place your CTA in a location people are likely to see before they navigate away from your page.</p>
<h3 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1em; font-family: Roboto, sans-serif; font-weight: bold; line-height: 1.3em; color: #464646; font-size: 24px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Misclicks</h3>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Sometimes, people may click aspects of your page thinking they&#8217;re links (or simply clickable in general). Upon discovering these elements aren&#8217;t able to be interacted with, they may avoid clicking on others that are.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">From here, you&#8217;ll have the opportunity to add links to areas where people generally click. Similarly, you can manipulate certain elements to make them seem less clickable.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Underlined text, for example, often gives the impression that it&#8217;s a link to somewhere else. Simple fixes like this can help keep users focused.</p>
<h3 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1em; font-family: Roboto, sans-serif; font-weight: bold; line-height: 1.3em; color: #464646; font-size: 24px; caret-color: #464646; font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">Reasons Behind Your Bounce Rate</h3>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">A<span class="Apple-converted-space"> </span><a href="https://support.google.com/analytics/answer/1009409?hl=en" target="_blank" rel="noopener noreferrer">bounce rate</a> is a metric that describes users who visit your site and leave shortly after. If you combine your heat map data with the average time people spent on your site before leaving, you&#8217;ll be able to discern what elements led to them making this decision.</p>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; max-width: 40em; line-height: 1.5em; caret-color: #464646; color: #464646; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -webkit-text-stroke-width: 0px; text-decoration: none;">This is especially useful for pages that have a significant amount of traffic but don&#8217;t lead to as many conversions as they should.</p>
<p>The post <a rel="nofollow" href="https://www.uxblog.com/using-heatmaps-to-learn-your-users-behavior-and-improve-their-experience/">Using Heatmaps to Learn Your Users&#8217; Behavior and Improve Their Experience</a> appeared first on <a rel="nofollow" href="https://www.uxblog.com">UX Blog</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.uxblog.com/using-heatmaps-to-learn-your-users-behavior-and-improve-their-experience/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Level up your brand: How to increase user engagement through gamification</title>
		<link>https://www.uxblog.com/level-up-your-brand-how-to-increase-user-engagement-through-gamification/</link>
					<comments>https://www.uxblog.com/level-up-your-brand-how-to-increase-user-engagement-through-gamification/#respond</comments>
		
		<dc:creator><![CDATA[UX Blog Team]]></dc:creator>
		<pubDate>Thu, 05 Mar 2020 14:34:45 +0000</pubDate>
				<category><![CDATA[user experience]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[gamification]]></category>
		<guid isPermaLink="false">https://www.uxblog.com/?p=1853</guid>

					<description><![CDATA[<p>Are you struggling to connect with your users? Or could you be concerned that your audience is losing interest in your brand? It&#8230;</p>
<p>The post <a rel="nofollow" href="https://www.uxblog.com/level-up-your-brand-how-to-increase-user-engagement-through-gamification/">Level up your brand: How to increase user engagement through gamification</a> appeared first on <a rel="nofollow" href="https://www.uxblog.com">UX Blog</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Are you struggling to connect with your users? Or could you be concerned that your audience is losing interest in your brand? It can be a tricky task keeping users loyal to your company, but more businesses are leveraging gamification as a way of bringing new levels of engagement to prospective and existing customers alike.</p>
<p>There are few better ways of encouraging users to continue returning to your brand and enabling them to interact with other customers than through gamification. But what exactly does this term mean? And how can it help to drive engagement with your business? Let’s take a deeper look at gamification and its uses within the world of UX.</p>
<h2>What is gamification?</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1855 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20800'%3E%3C/svg%3E" data-src="https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1.jpg" alt="" width="800" height="800" data-srcset="https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1.jpg 800w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-300x300.jpg 300w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-150x150.jpg 150w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-768x768.jpg 768w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-585x585.jpg 585w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-48x48.jpg 48w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-250x250.jpg 250w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-550x550.jpg 550w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-180x180.jpg 180w, https://www.uxblog.com/wp-content/uploads/2020/02/digitalchalk-8-surprising-gamification-statistics-2-1-500x500.jpg 500w" data-sizes="(max-width: 800px) 100vw, 800px" />(source: <a href="https://www.digitalchalk.com/resources/blog/tips-and-tricks/8-surprising-gamification-statistics" target="_blank" rel="noopener noreferrer">digitalchalk</a>)</p>
<p>As the chart above shows, the gamification market has grown exponentially towards attaining a value of over $5.5bn dollars in recent years. In fact, it’s likely that UX gamification plays a role in your daily life already. Popular apps like <a href="https://www.duolingo.com/" target="_blank" rel="noopener noreferrer">Duolingo</a> and <a href="https://www.strava.com/" target="_blank" rel="noopener noreferrer">Strava</a> have developed successful game-based approaches towards self-improvement tasks like learning new languages or running &#8211; with both companies rewarding users based on their progress and achieving certain milestones in their development.</p>
<p>But what is gamification? Naturally, the term means to transform an activity or process into a game that users can play.</p>
<p>The <a href="https://www.interaction-design.org/literature/topics/gamification" target="_blank" rel="noopener noreferrer">Interaction Design Foundation</a> refers to gamification as “a technique where designers insert gameplay elements in non-gaming settings so as to enhance user engagement with a product or service. By weaving suitably fun features such as leaderboards and badges into an existing system, designers tap users’ intrinsic motivations so they enjoy using it.”</p>
<p>Businesses have been successfully adding gamification setups to their apps for much of the last decade, and the practice is only gathering momentum as mobile applications continue to become more sophisticated and adaptive.</p>
<h2>Push engagement</h2>
<p>Users crave gratification and rewards for their efforts. Gamification has the power to convert user experience into a community-based competition. Customers can transition between different levels and leaderboards and gain rewards for the time they commit to using the app or browser game.</p>
<p>Valuable contributions such as initiating discussions, posting product reviews, replying to queries or encouraging friends to sign up <a href="https://www.grazitti.com/blog/using-gamification-to-improve-customer-engagement/" target="_blank" rel="noopener noreferrer">can tangibly be rewarded</a> with in-game items or achievements.</p>
<p>By building a rewards-based game, you’re actively incentivizing user engagement &#8211; making the whole process more appealing to both customers and prospective customers. As an example of gamification in action, <a href="https://www.cio.com/article/3184368/how-gamification-improves-customer-engagement-and-retention.html" target="_blank" rel="noopener noreferrer">John Findlay, co-founder of Launchfire</a> offered up the scenario of a bank looking to acquire new customers: “Rather than creating ads that talk about how your bank [or financial service business] is different, create an online game that challenges players to build a financial empire by making good investment decisions,” Findlay explained.</p>
<h2>Build loyalty</h2>
<p>Gamification can also build a sense of loyalty for customers through the medium of points, ‘badges’ and online leaderboards &#8211; these practices help to enable users to become advocates of your brand.</p>
<p>The act of offering discounts or free merchandise for a specific action like posting a helpful and positive product review helps to ensure that customers gain a sense of value &#8211; thus increasing their loyalty further with meaningful engagements.</p>
<p><img class="aligncenter size-full wp-image-1858 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20586%20602'%3E%3C/svg%3E" data-src="https://www.uxblog.com/wp-content/uploads/2020/02/1212.jpg" alt="" width="586" height="602" data-srcset="https://www.uxblog.com/wp-content/uploads/2020/02/1212.jpg 586w, https://www.uxblog.com/wp-content/uploads/2020/02/1212-292x300.jpg 292w, https://www.uxblog.com/wp-content/uploads/2020/02/1212-48x48.jpg 48w, https://www.uxblog.com/wp-content/uploads/2020/02/1212-250x257.jpg 250w, https://www.uxblog.com/wp-content/uploads/2020/02/1212-550x565.jpg 550w, https://www.uxblog.com/wp-content/uploads/2020/02/1212-175x180.jpg 175w, https://www.uxblog.com/wp-content/uploads/2020/02/1212-487x500.jpg 487w" data-sizes="(max-width: 586px) 100vw, 586px" /></p>
<p style="text-align: center;">(source: <a href="http://educraft.tech/quizup" target="_blank" rel="noopener noreferrer">Educraft</a>)</p>
<p>The image above shows how achievements like badges can pave the way for future engagements. Entertainment app, <a href="https://www.quizup.com/" target="_blank" rel="noopener noreferrer">QuizUp</a> uses achievements to reward users for playing their array of games and uses each notification as a prompt to encourage more gaming.</p>
<h2>Create a community</h2>
<p>Another common theme that runs through plenty of gamification setups is the presence of the ‘share’ feature. As we can see in the prior image, users have the option of sharing their achievements on social media platforms. This helps to develop the presence of a brand and build an active online community.</p>
<p>If utilized in the correct manner, gamification can help to build a brand new interactive ecosystem within your customer community, aligning the behavior of users alongside your business’s objectives. As more customers develop their engagement, they increase the chances of more users becoming engaged in your brand &#8211; thus helping to expand your community and <a href="https://www.grazitti.com/blog/using-gamification-to-improve-customer-engagement/" target="_blank" rel="noopener noreferrer">further develop loyalty</a>.</p>
<h2>Utilize user data</h2>
<p>Another perk of the newfound levels of engagement brought by gamification comes in the form of greater user data available to your company. Of course, there are plenty of ways in which to attain the data of your customers, but gamification has the power to bring more accuracy to your results.</p>
<p>The greater levels of community-generated by users engaging in your games means that more will be actively discussing their progress and your brand in general. These extra organic discussions mean that you can build more self-awareness and optimize campaigns in order to perform better, with greater customer insights generated through replies, shared content and the type of topics that users discuss.</p>
<p>Fundamentally, in a world that’s driven by instant-gratification and time-effectiveness, gamification pays dividends in enabling users to feel as if their engagement with your brand is being rewarded. While there’s plenty of customer insights available through this form of engagement, the true reward will be found in the value that gamification brings to your company &#8211; making it much easier to level up your UX model.</p>
<p>The post <a rel="nofollow" href="https://www.uxblog.com/level-up-your-brand-how-to-increase-user-engagement-through-gamification/">Level up your brand: How to increase user engagement through gamification</a> appeared first on <a rel="nofollow" href="https://www.uxblog.com">UX Blog</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.uxblog.com/level-up-your-brand-how-to-increase-user-engagement-through-gamification/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/

Object Caching 10/13 objects using disk
Page Caching using disk: enhanced 
Lazy Loading
Minified using disk
Database Caching using disk

Served from: www.uxblog.com @ 2026-06-11 21:27:46 by W3 Total Cache
-->