July 26, 2021No Comments

5 benefits of heatmaps: See how your users are navigating your site

Do you want to know how people are navigating your site? Are you curious if hero images or carousels on your homepage are useful? Do you want to see if visitors are clicking on ads, dead areas, and errors that you might not notice otherwise? If so, then heatmaps should be at the top of your list to review.

Heatmaps show where users have been clicking while they're browsing your site. They also tell you which parts of the page get clicked more often than others. This information can help improve user experience and conversion rates by highlighting high-value opportunities for optimization.

My favorite tools are HotJar and Crazy Egg, but there are many options out there. And heatmaps are a major tool in my arsenal when I do a website audit.

So, let's discuss five benefits of using heatmaps for insights into your website visitors' behaviors!

Benefit #1: You can see how your visitors are navigating your site.

Heatmaps show you which parts of the page get clicked more often than others, so they're great for figuring out where people start to explore and what's engaging them most. It's actual data as opposed to our suppositions, so you know whatever improvements you make will be directly impacting your user experience.

You can highlight high-value opportunities for optimization, like rewording links to areas that people are not clicking on as often, to what may make more sense to them. You can also use heatmaps to measure the success of new content or design changes. This could be by signing up for an email newsletter or purchasing something from you store - anything that's valuable to you.

You'll be able to see how your visitors are using mobile vs desktop sites, since some people prefer one over the other.

Benefit #2: You can see if hero images or carousels work.

Hero images and carousels are often used on websites to highlight the most important information, like a product or service. They're not my favorite design feature, but they're still popular.

Heatmaps show you if more people click through those pages than other areas of your site which can help you decide whether they're worth keeping around or not. It also helps determine what content is engaging enough for users to click on and if what you're displaying is interesting enough to keep people scrolling.

Benefit #03: You can see how they use mobile vs desktop sites.

Mobile and desktop traffic can have different browsing patterns, so it's important to pay attention to how people are using your site in order to provide a better experience for the type of device they're on.

Many times when you see heatmaps, you'll notice that visitors are clicking more often on items like text links, images, and buttons on a mobile site. This could be because they're using their fingers to tap the screen instead of scrolling up/down with a mouse or trackpad.

Heatmaps also show you how visitors use desktop vs mobile sites which can help inform decisions about design and UX for users who visit through different platforms (like adding better navigation on a desktop site to make it easier for users who are browsing from their phone).

Benefit #04: You can see how users click on dead areas.

Dead space is the area of your page that's not being used (like blank white space or empty content) which might only be seen as wasted screen real estate.

Heatmaps show you which areas of your site visitors are clicking on the most, including dead space. You can then decide whether to remove those blank spaces or focus less attention on them by removing links from that area, for example. Dead space is still important because it's a good indicator of how people use certain parts of your website and might show you where people are getting stuck in menus or not being able to find the content they're looking for.

Benefit #05: You can see if visitors click on errors that you might have missed otherwise.

It's easy to miss things when you work on a website every day, which is why it's important to occasionally take a step back and look at the site from a visitor's perspective.

Heatmaps can show you if visitors are clicking on errors that might otherwise go unnoticed like broken links, missing page content, or not being able to submit form data, for example. These are high-value opportunities for optimization like fixing broken links, content errors, or form design (especially if the site is particularly large).


Heatmaps are a great way to get insight for how your users interact with the site and what they find most interesting. They can help you decide whether or not an ad is effective at grabbing user attention, which areas need more information so that visitors feel fulfilled in their shopping experience there, and if certain pages should be changed based on visitor feedback. Heat maps will give you insights as well into where people spend time looking around and clicking the mouse cursor - it's like someone has taken note of every single detail!

I'm happy to interpret your heatmap findings in a website audit. With other tools, you can optimize your site and make it even more successful than you'd imagine!

July 12, 2021Comments are off for this post.

6 hot web design trends you should know

When you think web design trends, what comes to mind? Flat design? (Super dated.) Animation? (Did you say 3D?) Whatever the case, it's important that your site stay current. In this blog post, we'll discuss 6 hot web design trends that have been seeing a lot of success lately and why they're so popular.

To be fair, most of these have been around for a while, but I think it shows they have staying power beyond the first flush of a trend.

Hero Typography

Big typography is characterized by using larger and more expressive fonts, which can be used to help express the mood or message of a site. It's usually found in headers, with large bold letters instead of a tired hero image.

I could use the site below for the next example too: Expressive illustration that complements your brand!

big typography

Hand-drawn illustrations

Hand-drawn illustrations can bring life to your project. They are great for adding personality or character to designs and they don't take up too many resources either—perfect if your site needs more interesting visuals without compromising the user experience.

Neumorphism

Neumorphism is kind of a weird web design trend, but it can be very effective if done right. Basically, neumorphism gives an artificial 3D appearance. This doesn't mean you need to add any polygons or anything like that—just using gradients and shadows in the right way.

neumorphism example

Glassmorphism

Wait, neumorphism is dead? Glassmorphism or glass web design is also a popular web design trend. Unlike neumorphism, this draws on' the use of polygons and glass-like materials to give your site an immersive feel. Glassmorphic web sites are great for product showcases or galleries since they make it easy for visitors to see all the details.

Glassmorphism

Parallax animation

Parallax animation is a fun trend that create a more interactive and engaging experience for web users. It's a trick of the eye that gives web pages depth and makes them feel more natural to interact with. These days, it has been transformed into an animation technique and is used on websites all over the place as a way to create an interactive experience. Web design art history is a great example of this.

Parallax animation

Dark mode

Dark mode can be a good way to make websites more eye-catching. When you think "dark web design," this doesn't necessarily mean that everything on the website needs to be black—it could just refer to having darker colors in order to create contrast with lighter ones. Plenty of apps and platforms are already giving you this option—it really makes content, especially photography, pop.

dark mode website

Trends come and go, so consider using them with a light hand. I find classic design speaks clearly to your audience and lasts longer than the typical trend, and can be brought in to emails and social to freshen your brand.

July 4, 2021Comments are off for this post.

Women in WordPress, new site launches

Yes, there are definitely Women in WordPress:

I'm excited to share a new podcast episode with the great ladies of Women in WordPress, who've put together a 54 episodes of amazing women who are toiling away in all aspects of WordPress. And I'm #55!

Check out the episode, where I discuss my WordPress journey and looked back on sites where I've built custom solutions for clients. Hope to bring those to life in future talks.

Website launch: Catherine Johns

And a more momentous occasion, I'm so happy to announce the launch of speaker and coach (and you may recall her as WLS radio host) Catherine Johns' new website!

A long time coming, it's now mobile responsive, has an updated brand identity and really hones in on her vivacious personality and her true skills: Making you shine on stage and in person.

Website launch: Evidence Video

And another site a long time in coming, here's the new Evidence Video website. They create documentaries and day in the life videos for attorneys and have been instrumental in large settlements in Illinois and across the country.

Their new site highlights their video work and their staff, along with those settlements. Partner attorneys have their own pages, with their particulars and their attached news stories.

January 29, 2018Comments are off for this post.

Case study: UX redesign of EDCNavigator.org career diversity site

EDCNavigator.org, or the Executive Diversity Career Navigator, is a subsite of ACHE (American College of Healthcare Executives). It had been worked on by a few developers, but it didn't feel like a true diversity site to me. For one thing, where were all the people?!

Read more

August 1, 2014Comments are off for this post.

WordPress.TV: Creating A Site Structure for the Future

If you've not had a chance to learn about site structure or information architecture for your website, you've got no excuse now! My 2014 Chicago WordCamp talk on it, A House with No Walls: Creating A Site Structure for the Future is now live on Wordcamp.TV.

Read more

July 11, 2012Comments are off for this post.

Case study: Migrating from Ning to WordPress & BuddyPress

Definitely watch this space: One of my favorite clients, Chicago acupuncturist Mitch Harris, already runs a WordPress site and knows its ins and outs. But, he also had a Ning site with 300+ members for a growing Eastern nutrition and recipe site, Food From East, fed by his Pacific College students. As Ning kept increasing their hosting rates for an undoubtedly useful set of tools, it also became unwieldy and didn’t really fit Mitch’s needs. Too, he wanted to make it more of a resource on Eastern nutrition, for both practitioners and the public alike.

The Ning migration

Enter WordPress, BuddyPress and the awesome WPMU Ning to BuddyPress Importer plugin. BuddyPress, for the uninitiated, is all about making your WordPress site social. It can make it a sort of Facebook “lite,” and is ideal for education, your private or public niche membership site, or really, anything you might have thrown on Ning before.

Image representing BuddyPress as depicted in C...

Image via CrunchBase

Now, this won’t solve all your problems: The taxonomies between Ning and WordPress are different, and everyone posts things in different areas depending on how they originally set up Ning. Though the migration was pretty painless, we are still cleaning up comments and posts that ended up in the wrong places, and are tagging and categorizing everything [which is no small task on some sites]. But, it also gave me a chance to create a better user experience: With just a “quick edit” of categories & tags, and with better labels for the user—there now are sections for disorders, symptoms, ingredients, and practictioner-speak. It’s a much better experience. With plugins like Mass Categorization, we can even create these en masse.

BuddyPress aftermath

This migration really gives you a chance to review where data is, where it will be imported, and how you want it displayed. Comments, for example, cannot have categories or tags, but if they’re correctly placed under a relevant post with the right tags and categories, they’re still findable.

I’ve written quick WordPress guides for members moving over to this new site, focusing on images, as Zemanta and PhotoDropper are instrumental and not obvious to new users. As easy as WordPress is, plugins are not always intuitive.

Now we haven’t set up forums or groups, as he doesn’t need them yet, but this again is a quick import over from Ning, and preserving your members’ conversations is incredibly important for a growing membership site, especially in terms of SEO. The best thing, IMHO, is every user and his or her avatar moved over to the new site with all of their information, and Mitch can send everyone a personalized email telling them where to find their new member site, and log in using their old login and password, or get new credentials. The connections between their posts and comments stay correct. This is what migration should be. And, as each user can create a full-fledged profile, instant message each other and generally have a much better experience, and it’s a clear winner over Ning, especially without the monthly fees.

Support & what they don't tell you

Boone Gorges of Teleogistic has been incredibly helpful in answering questions and an ongoing discussion with other users of this plugin—after all, no migration is perfect, so be prepared for flukes and figuring out data workarounds. But the data is intact, which is more than half the battle.

On the downside for BuddyPress: It’s incredibly popular among spammers. They’ll create accounts, post spam and generally create headaches. I’ve vacillated between Bad Behavior and WangGuard (July 2017 note: WangGuard is now discontinued, but check out WPMU's Anti-Splog. It's pricey but works.) for blocking spammers, and I’ve a few more tips in my BuddyPress presentation from May.

Overall, it’s a win: Improved user experience and less expensive & better WordPress admin. Features can be turned on and off at will, and you can encourage better engagement with a suite of tools. Now, where’s that next BuddyPress project?

Can I tell you more?

What do others say?

My newsletter.

Quarterly updates, never sold or shared. 

©2003-2021 Gizmo Creative Factory Inc. All rights reserved. Chicago area freelance designer & WordPress developer. Located in Long Grove.

Gizmo Creative Factory, Inc.