Have a little empathy for your web audience

Design WHAT? It’s a squishy term, to be sure. But empathy – the ability to place yourself in someone else’s shoes and imagine situations from their point of view – Is essential to good design, as it affects both user interface (UI) and user experience (UX).

Empathetic design involves both imagination and understanding. It’s grounded in website analytics and CRM data, and validated by AB testing; but it also encompasses an understanding of the mindset users bring to their website interactions and the hurdles they may face in getting information from your website.

Perhaps the most important part of design empathy is the way it keeps the focus on the user you’re designing for. Some designers excel at making beautiful sites but are oblivious to how it actually delivers on users’ goals. The design may reflect the stated wishes of the client; it may be “on brand” and comport with recent design trends, but does it actually serve the needs of your audience? You’ll have a better chance of hitting the mark if you take the time to truly understand your target.

Let’s take a look at a few examples from our discussion about sites we like and dislike.

Koniku.com, the website for a “wetware” technology firm, impressed us with the thoughtfulness (bordering on out-and-out courteousness) of its design.

Consider the navigation, which is simplified to feature just three purposeful page links, followed by a grid icon which expands to show pages deemed less important to the users’ goals. When you have as deep a well of offerings as Koniku, this is a great way to simplify content without eliminating anything.

Note, too, how the header navigation bar remains fixed at the top as you scroll – grounding you with a path to quickly reach other pages. To make the best use of limited real estate on mobile devices, the navigation header changes to a grid icon which contains the navigation links.

The Koniku site has a lot to communicate, but rather than hitting everyone with everything all at once, Koniku’s homepage design and navigation highlight how its services can be used in various applications – agriculture, military or security – and invite users to visit separate pages that directly address their particular needs. For those who want the bigger picture, a more robust site navigation in the footer enables users to reach the far corners of the site quickly.

From a design perspective, we also admire Koniku’s sophisticated and sensible use of color. The limited use of purples, whites and grays reinforces the brand identity, while helping to keep users focused on key content and navigation. Moreover, the use of open white space and a restrained approach to site copy are thoughtful design choices considering users’ limited attention spans.

On the backend, Koniku has come up with a smart way to handle its rather substantial  (17.3MB) homepage size. Images and video account for most of the page weight, but are lazy-loaded so as not to bog the user’s computer down on page load. Content is cached using a Content Delivery Network and pages are minified and compressed for smaller sends. The website does use a pre-loaded for page content, but the purposeful, interesting nature of the logo animation made us almost oblivious to the wait.

The anniversary edition of iFly KLM magazine, ifly50.com, looks gorgeous, but site communication suffers from several UX friction points.

For one thing, upon entry you have to endure a popup modal window that “onboards,” or familiarizes you with how the site works. Better that KLM had just designed the site to be intuitive in the first place.

And note how the pop up modal only offers one option without an escape functionality for visitors who want to abandon. It’s also unclear what clicking will do. KLM’s mistake here is that for every visitor aided by the popups, countless more will be irritated by them.

Another act of insensitivity to site visitors: Music starts auto-playing without prompting the user to decide if that’s okay. Anything that takes control away from users isn’t good. A strategically placed speaker icon without sound would invite users to decide whether or not they want the music. And speaking of audio: Being an international site, ifly50.com asks users to specify a language, yet regardless of the one they choose, the site’s voiceover is in English.

We’re also a bit put off by the site’s use of a scroll bar to operate a carousel slideshow. This breaks from convention in a potentially disorienting way by forcing the user to do something new during a brief visit.

REACH OUT TO LEARN MORE ABOUT OUR THINKING. CONTACT US HERE.

Moreover, navigation is unnecessarily hidden behind a hamburger menu. And when expanded, non-hovered images are too transparent – forcing users to interact with images one-by-one to see what they reveal. This simply flies in the face of how people scan information to make decisions.

Page speed, by the way, is unacceptably slow with a load time of 3.89 seconds on our very fast connection. Most users who don’t have the latest wifi speeds will be irritated by the wait times this site imposes on them.

Take a look at a site we created for EAT! Frozen Entrées. It has a real feel for its audience.

From its flat, clutter-free design to the energy of its colors, the judicious use of white space, and the easter eggs that reinforce the brand’s tenet of exploration and discovery, the website reinforces the brand while streamlining the user experience. The result is a site that’s at once easy to use, fast-loading and responsive.

EAT! simply

To convey essential information in a way that doesn’t bog users down with detail, we planned and built the site so that all content is just one or two clicks away. Many users, for example, will come to the page looking for information on a specific product, so the full product menu reveals itself with a simple hover (or touch, for mobile users). In addition, the menu simplifies searches with filtering by product category. We also designed the site with strong color contrast and larger, easy-to-read fonts for easy reading in bright supermarket light.

In another nod to mobile users, products names aren’t stacked, but listed horizontally so that one can simply swipe for discovery. What’s more, instead of the standard hamburger menu, we pinned a left-right swipeable navigation menu to the bottom of the screen. You don’t have to tap a hamburger menu to find it because it’s always there. And because the navigation is the width of the bottom screen, it’s equally easy for both left- and right-handed people to use.  

Beyond leveraging mobile app navigation best practices, we also horizontally stacked similar content versus stacking it vertically. This reduced the length of pages and enabled discovery through left/right swipeable content blocks.

Whenever possible, we tried to incorporate design features familiar to users – not only from the other sites they visit, but also the apps they commonly use. Remember, this is a site for a brand new product marketed to mobile-first, digital natives and we needed to remove every potential barrier to discovery.  

EAT! fast

Since the preponderance of users will access the site in-store where wifi might be poor and signal strength low, we designed pages to be fast-loading.

All illustrations load quickly as SVG vector files instead of rasterized bitmaps (JPEGs or GIFs). And we took the FOUT (Flash of Unstyled Text) approach to web font loading, whereby system fonts appear first and are then swapped out with any special fonts as they become available.

A drawback of many CPG sites is the reliance on images to present information, which bogs sites down and makes them difficult to use for some site visitors. To avoid this, we designed the EAT! site in a way that limited image file loading. Whenever possible we used the same food photos and packaging images already cached through the browser, so that these images only have to load once per session. And we ensured vital information, such as the nutrition facts panel, did not rely on the use of an image as a means of delivery, which is too common within the CPG industry. By doing so, we ensured this vital information is available as crawlable text and thus available for all site visitors, including disabled visitors relying on text readers.

So how should you feel about Design Empathy? It depends on what you want your site to achieve. There are plenty of DIY web design tools and platforms that can yield a good looking site, but if you want your new website to perform well, you’ll be best served by a designer versed in the principles of empathetic design.

We’ve all heard the stats about how much time a new user will give a site before deciding it’s more trouble than it’s worth. So while a clean design and solid content are crucial, empathetic design takes your site to another level by removing barriers to engagement and serving up your content in a way that satisfies users’ needs.

So before embarking on your next web project, take a moment to think about how your audience might profit from empathy in design. Because truly understanding your users is an essential precursor to engaging them.