Is your UX design missing a piece of the puzzle?

Why you need a balance between functionality and aesthetics in your web design

A lot of excitement is bred when creating your business website, and for good reason. A website is a vital tool for any business to showcase products and services (few could get by without one). It’s also the go-to place to show off that branding you’ve worked so hard on. You have the opportunity to show customers who you are and what your business is about, using pleasing aesthetics that match your business vibe.

So you look to businesses like yours to see what they’re doing, trawl websites you’d like to emulate, research what kind of customers you’re likely to attract, find out what they need, then get cracking on employing a designer.

But as we’ll discuss here, the puzzle is not necessarily complete. Read on to find out why.

Aesthetics

Beautiful design gives people that important first impression. Beautiful design imbues the user with the feeling that they should expect something great from you.

It’s a bit like when you meet a new person. You might quickly decide whether or not you like to be around them based on their appearance, facial expressions, and tone of voice.

Your design gives a user that sense of whether or not they’ll like what they’re encountering on your website, and whether or not they should give you their time and patronage. (It’s been found that 75% of users admit to judging a company’s credibility based on their website.)

But no matter how much they may enjoy that first impression, they won’t consider handing their money over to you based on mere appearances. Instead they’ll listen carefully to what your business has to say, seek detail, do more research. They’ll judge. And if they don’t see or hear the right things, they’ll move on.

So if your site gives the right feels, but your customers aren’t completing their full customer journey, your website is not really doing its job. Therefore at this point, functionality steps in and becomes equally as important as aesthetics when it comes to a successful overall UX design.

Functionality

Your website must function effectively so that users can achieve what they need to, in as few steps as possible. This involves (at a minimum) making navigation logical and simple, ensuring device compatibility (e.g. optimising for mobile), reducing clutter, incorporating Web Content Accessibility Guidelines, and ongoing monitoring and resolution of errors.

If your web design is pristine but functionality is neglected, you’ll frustrate users who are nowadays used to engaging with highly effective websites and to completing online tasks quickly, without fuss.

Users will certainly appreciate a beautiful design, but they may not overlook functional flaws, as ultimately, they just want to find what they need, or get to where they need to go. If your design puts obstacles in their way, your user may:

• Become frustrated
• Question your expertise, services, products, or brand as a whole
• Quit your site and look at a competitor’s site instead.

Obviously, none of these outcomes are desirable, and since you’re working so hard to provide a great site, you want to avoid them.

So how do we balance everything to make a good UX design?

A good UX design helps users succeed in carrying out the tasks they need to accomplish, whether that be finding out information on a product, completing a form as part of an online enquiry, making a purchase, or something else.

A website that balances both design and functionality well, does the following.

Makes navigation easy

Consider the tried and true conventions of web navigation. These conventions work because users know exactly what to do next. They don’t have to think about it, and they find comfort in familiarity. Coming up with a navigation menu that flashes and rotates may win you a design award, but it likely won’t work as well for a user as a simple hamburger menu they’ve used a thousand times before.

Making your user’s life easy by keeping the most important information above the fold (the first part of the website you see, before scrolling down) is also a good idea. The name of your business, what services you provide, a search button, a navigation menu and contact details should be above the fold if you want users to quickly find what they need.

It’s also important to give users easy access around the website, using forward and back buttons, and giving them feedback when they are progressing through a process, so that they know their efforts are getting them somewhere, and so they don’t get lost.

Is designed for compatibility

An effective website factors in both desktop and mobile users, and caters to the differences as part of the design from the outset. This usually means budgeting for desktop and both iOS and Android mobile designs.

Mobile optimisation is vital, as mobile versions of sites need to function differently to desktop versions. For example, it won’t work for a user to scroll horizontally across to read an article on their mobile, and this may happen if the original content was designed for desktop, and it hasn’t been optimised for mobile (there are simple fixes which should be used for this).

Also, users can interact with mobiles in ways that aren’t available for desktop, for example, via haptic technology, where you can give tactile feedback to the customer via vibrations or shakes.

Keeps it minimal

A good UX designer understands that everything placed on the site needs to be there for a reason, and they lose the extras. This may mean some very beautiful design features are cast aside in favour of brevity, but does your user really need that fancy animation that slows down the page load? Do they want to read that clever content that takes too long to read? Probably not, so be prepared to let it go.

Reduces intrusions

Some things feel hard to let go of, especially if they involve giving customers extra offers or gaining customer information (think pop-ups, floating ads, videos that auto-load, requests for customer email addresses). These extras are rarely missed by the user, as they feel intrusive, but sometimes, for your business aims, you need to keep them. If you do need to use these elements, keep them to a minimum and give the user the opportunity to easily click away.

Allows space between elements

When there are many elements on the page, it can be hard to visually distinguish between them, and ultimately confusing. Your user may get distracted and lose track of what they were on your page to do.

Also, where touch screens are used, buttons need sufficient space around them. When adjacent buttons are squeezed together it can be hard for fingers to select one from the other. A user may end up clicking the wrong thing and being sent to the wrong page, which wastes their time.

Uses grid layouts and white space

Some sites feature thousands of products. How they lay out their enormous offering is important. The successful sites, like Amazon and AliBaba use grid layouts, so that despite a lot going on, it still looks orderly to the eye.

They also allow enough white space, which is key to showing off product without visually exhausting the viewer.

No matter how many products you have available, you need to give the user a sense of space. This means utilising white space, only showing a certain number of products, and having logical menus, so that users can make their way through viewing products, and easily get back to main menus. Whatever you do, just don’t crowd the screen.

Monitors for errors, and fixes them fast

If your website’s pages are loading too slowly, buttons aren’t working, forms aren’t functioning well, or your product listings aren’t up-to-date, you will create a poor user experience. Users may put time into searching for a product, only to find after a number of steps that the product is not available.

Basically, anything that gets in the way of your customer buying a product or receiving a service you offer is a problem that needs fixing, and quickly. This means ongoing checking of the website’s function. User testing with an agency is also an important way to check for errors at the initial stage, (or can be employed as a tool on a sporadic basis if you have the resources.)

Maintains quality content

If your copy is waffling or filled with typos, your website will look shaky, and you’ll lose customer confidence. Though people are forgiving, if you’re telling them you provide a quality service/products, but your content is a shambles, they might wonder how competent you really are.

So, ensure your content is free of errors, contains accurate and up-to-date information about products and services, and is as brief as possible (whilst incorporating any SEO keywords if needed). If you’re not sure if you should use a piece of content, or lose it, it’s usually best to again keep things minimal, and not include it.

Chooses the right bells and whistles

The landscape changes by the day, and new features are introduced that improve the customer journey. With each new feature, expectations are raised, and you feel you need to keep up.

Knowing what is the right new feature to give your user, and what is merely something cool that doesn’t serve much of a purpose for your customer, is another matter altogether. Your choices on this will come down to your customer needs and your budget, but also your discernment.

You don’t need to get every new feature, but carefully selecting those that create real impact for your customers will help.

In summary…

Whilst the attributes of a successful UX design extend far beyond what we’ve outlined above, we hope we’ve at least made you think about balancing aesthetics and functionality in your web design. And if your website is lacking in either attribute, we hope we’ve helped you think about how you might sort it out.

Want to learn more about the balance between functionality and design? Speak to the experts.