5 Web Design/UX Mistakes And How to Avoid Them
September 30, 2014
Not too long ago web design was considered just that – web design. Today, the art form has become subdivided into several different practices and web designers and design teams have had to become so specialized in these areas that new roles have been created within agencies and studios for people with these particular talents. One of the key components of web design as we practise it today is called user experience design or UX design, which is less concerned about the aesthetics of the interface and more focused on the subtle nuances within the design that offer the best possible user experience for the audience. A better user experience not only translates into happier users and more sales, it also affects search engine rankings.
User experience design is not achieved by studying other websites, gathering inspiration from galleries or following the current web design trends. It’s about asking the tough questions at the very beginning of the web design process and understanding the audience the design is intended for and how the website owner intends to communicate with their users. Mistakes at this level are often formed through misunderstanding the user, how they will interact with the website and our own bad habits as designers in general. In order to shed some light on the types of mistakes we commonly see in web design today, let’s look at the top five oversights designers often make and how they impact the user experience and overall performance of a website.
1. Design Without Purpose or Reason
Redesigning a website is a great exercise and when done correctly can yield astounding results. However, designing for the sake of simply updating the look of a website will not very often deliver the results that any website owner or business seeks.
The first step of a website redesign should involve a deep analysis of the current website. If it helps, ignore the existing design completely at this stage and focus on the performance and usability of the current website. At this stage we’re offered a golden opportunity to look at and improve the user experience because we’re able to analyze real user data and clearly see how people are interacting with the website. Utilizing sources like Google Analytics and heat mapping services like Crazy Egg allow us to understand what is working and what is not. From this information we are able to define clear goals and solutions as we begin planning our redesign.
In cases where we are creating a brand new website we will not have access to this type of user data and need to rely on studying what other successful industry leaders have done and our own experience as web designers.
A good way to begin this analytic process is to start with a few key questions.
Does the navigation work? Is it intuitive and easy to use?
The most critical part of any website is its navigation. Without it users cannot move around the website to experience your message and product. With a poorly designed navigational experience you run the risk of frustrating users and losing opportunities to engage them. The rule of thumb I always follow is “the simpler, the better.” If you can reduce the number of clicks a user has to make to get to the information they’re seeking they’re far more likely to enjoy the experience on the website which ultimately leads to more conversions. To understand how users are navigating your website look at your Google Analytics User Flow and make sure users are following the path that is inline with achieving both your goals and theirs.
What should visitors see when first visiting the website? What are their expectations?
Ask yourself this question about each and every page of the website. Information architecture is another niche specialty that has grown within web design. Many design teams now have information architecture specialists who’s sole purpose is to help clients understand what information is most important and what order information should be presented in. It then travels down the pipe to the web designer as a strategic plan of action to help create the page designs that the user will see and interact with.
What are your goals? What are the user’s goals? Do they align?
By establishing your goals for the website and individual pages beforehand and comparing those with what your user’s goals are you can identify any areas that may create miscommunication or confusion with the user. If your goals and your user’s goals do not align, the chance for confusion is very high. At this early stage we have the opportunity to find alternative ways to present content or modify the design to ensure both you and your visitor are expecting the same result when landing on any page of the website.
This process will also help you reduce the bounce rate of your page and help increase its ranking in search engines. For more information on bounce rate, what it is and how it affects your website read our article 5 Surefire Ways to Reduce Bounce Rate.
Are there any distractions on the page? Can you remove them and still achieve your goals?
All to often a web design project runs off the rails, usually at the last minute after the beta site is built and both client and designer are putting it through its paces before deployment. Quite often someone has an after thought or panics and wants to put a bandaid fix on a page design. This can lead to many things that can negatively impact the user experience on the website, most notably distraction, leaving the user overwhelmed or completely distracting them from achieving their intentions. If the user does not achieve their goal, it’s unlikely that you will end up achieving yours either.
If we take the time to carefully inspect each page layout and eliminate distractions or unnecessary elements we are far more likely to create a successful design that quickly exceeds expectations. Distractions do not necessarily need to be nixed from a design altogether. In some instances redesigning a distracting element to fit within the information architecture can achieve the desired result and also offer a better experience to the user. By going through this process you are able to eliminate the last minute panic or any oversights that lead to distracting last minute add ons that will quickly ruin the user experience.
Is a complete redesign necessary or are you able to update the existing design to correct any shortcomings?
Scrapping an existing website design and starting fresh isn’t always the best solution. In many cases a website design may be working well enough as is and with a little bit of research and TLC you can refine a website design and improve the user experience that is already proven to be working to a good degree. This could be the deciding factor in turning a good website into a great website.
2. Starting the Design Process Too Soon
In many cases when you begin a web design or web redesign project you begin with a set of requirements and goals the stakeholder outlines. This is a great starting point and definitely gets the ball rolling. However, where the oversight often happens in this scenario is when a designer believes they have all the information they need presented to them in a single document or email and is now ready to create the new website design. The underlying problem here is that clients are not often able to understand and present their content or goals in a way that translates into a functional design. The most logical next step designers should take is to tackle the information architecture and help the client understand how users will interact with their information. Clients usually present designers with a mishmash of information and it is our job to make sense of this information and help them organize it in a way that will communicate their message to their audience most efficiently and ultimately help both our client and the end user meet their goals.
When working with clients, especially new ones, it is important to me that they understand why we go through the process we do and do not just fire up Photoshop after we hang up the phone. The way I explain this to my clients is using the analogy of a house. I ask them to picture themselves as a prospective home buyer and they’ve hired a builder to design and build their dream home. They have given the builder a list of must have features in the new home and maybe even sketched out some ideas of how they would like it to look. The trouble is, they’re not a builder and they don’t have the experience and understanding of what works and what does not. They realize quickly that they have to place a great amount of trust in the builder to not only understand their wants for the new house and find a way to include them all, but also to ensure that once the house is built it does not fall down.
In many ways web design is similar. Professional web designers have the experience and know-how to guide you through the entire process from planning to deployment. A degree of trust must be allowed to the designer to understand your audience and how best to communicate with them through your website. You certainly should have input on the design of your website, that goes without saying, but there are subtle unseen elements at play to ensure the new website performs at its best, much like the house analogy. For example, search engine optimization considerations need to be made with each and every design and information architecture strategy. Understanding how search engines work is a critical part of a web designer’s role and this experience pays dividends to clients willing to trust and embrace strategies and ideas offered by the designer.
Once the information has been organized and everyone involved in the project understands the importance of each piece the next step should be wire framing. There’s little sense in jumping right into design just yet as major layout revisions or any unforeseen elements could quickly thrash a design and burn up the entire project budget before it’s even gotten off the ground. People by nature are impatient and the excitement of a new website design can often push the project ahead too quickly. By making use of wire frames, designers and clients are able to work together to establish a framework for the web design using very little time, which often eliminates last minute revisions and allows for more time to be spent in the design stage.
Wire framing can also be a great eye opener for clients and help them understand the plan that the designer has put in place through the earlier research and strategy. This process often helps people with little web experience or understanding to think creatively and offer new and unique insight to a web design project.
3. Fuelling the Fear of Web Forms
Web forms are strange and feared creature. They’re critical for website owners as they have a single, clear mission – to collect and transmit information from website users. On the other side, web users are generally turned off by and afraid of forms. People do not inherently offer up their personal information to just any website owner and poorly a designed form will compound this fear.
In this day and age a website without a form or two is nearly unheard of, so it’s critical that we design forms in such a way that minimizes the user’s instinct to skip over it and make the form as friendly and approachable as possible.
A good rule of thumb to follow when designing web forms is to only ask users for personal information that is critical at this early stage in your relationship with them. The more personal information we request up front, the more likely we’re going to threaten and scare off potential customers. A this early stage in the relationship, minimal information like name, phone number and email are a good place to start. Once you’ve had an opportunity to connect personally with the user and establish a relationship and level of trust you can begin to ask for additional information. Remember, at this stage your goal should be to simply make contact not start processing orders or filling up their inbox with marketing material.
Other areas you can improve form design and create a more positive user experience include:
- Making form fields and functions as simple as possible
- Combine fields where possible
- Instead of requiring users to enter information, offer an opportunity to select information from a list
- Ensure a clean design to allow users to easily scan the form
- Break complicated forms into steps
- Pre-populate information where possible
- Conform to browser standards to ensure everyone has a consistent experience
4. Lacking Focus and/or Tailored Content For Your Intended Audience
If you’ve gotten this far in the web design process and are unclear on who your audience is stop right now and establish who your audience is. With a clear understanding of who we’re trying to reach, we are able to create content and graphics that are proven to communicate well with our intended audience by using language and triggers that they can understand and relate to.
Not every visitor lands on a website feeling perky and clear minded. We all lead busy lives that are full of distractions beyond the computer screen. We can all agree that we have only a second or two to grab our user’s attention when they land on our website. In those first few seconds the user will decide if they’re going to stay on our website and dig deeper or click the back button and explore elsewhere.
A practise I often rely on when creating a website design is to quickly and boldly communicate what the site is about, what it offers and/or who it’s for within first glance of the landing page. By clearly stating these points right off the bat we can weed out visitors who may have landed on the site mistakenly or are looking for something else entirely. Our goal is to attract and communicate with potential customers with intent to purchase our product or service. With content and graphics that are created with a specific audience in mind our chances of success exponentially increase over those using generalized content not targeted at any specific user group at all.
The most efficient ways to ensure your page is focussed and geared toward your intended audience are:
- Use language and terminology your user will understand, expect and relate to.
- Keep content and headlines as short as possible. Users will scan your page quickly to find what they’re looking for so make it easy for them.
- Remove any content or design element that does not provide immediate value to the user. These will only offer distraction and reduce the effectiveness of your website design.
- Move secondary information to the next page where possible and only show the important information necessary to catch user’s attention. Use a well designed call to action to drive user’s to the detail page where you can offer more detailed information.
5. Not Making The Website Accessible
Accessibility is more important than ever before. If your audience cannot reach your website from virtually any device with a screen quickly and easily you’ve missed the boat! A responsive website design is a must whether you’re creating a brand new website or redesigning and enhancing and existing website. Simply accepting the fact that your traditional desktop website will load reasonably well on a mobile device is no longer good enough. Your website must adapt and offer a streamlined user experience consistent with your brand no matter where it’s viewed. For in depth information on why this is important and how to offer your audience a better user experience on a mobile device check out our article on Mobile Design Patterns – A Look at the Thumb Zone.
Not only should you create a fully responsive web design, but you also need to consider the last few generations of devices iOS devices and Apple laptops with Retina screens. Ignoring these high resolution screens can off up an unsavoury user experience for visitors on these devices when your graphics load and are blurry and in some cases unrecognizable. If you’re just now dipping your toe into the responsive web design water, you may want to brush up on responsive theory and best practices in two of our most popular articles – 6 Steps to Successful Responsive Website Design and 7 Common Mistakes to Avoid in Responsive Web Design
In addition to ensuring your device is accessible to the growing variety of screen sizes and resolutions, you should consider designing and developing the website to accommodate viewers with disabilities as much as possible. Ensuring type if clear and legible, information is presented in high contrast and using descriptive ALT tags on images are some of the most common ways to ensure users with vision impairments can access your website effectively.
With experience both web designers and business owners alike can build upon this concepts and continue to enhance their own web presence and ultimately make the web a more intuitive and functional tool. If you have any information or experience to add and build this list, please let us know so that we can continue to create useful resources for readers.