Website User Experience Design, or UX for short, is more than just the layout and basic visual elements, it’s the way that your website works for the user; the way the user is able to come onto your website and navigate through the pages with ease.
UX is the focus on usability within a website. It is a combination of user needs, business goals, and the presentation of information. If the website is not easy to use, does not achieve the business’s goals, or does not present the required information, the UX has failed.
If a user cannot easily navigate your website and find what they are looking for, they will leave. The chances of them sticking around long enough to purchase something become slimmer and slimmer with every passing second. The inability to navigate a website creates user frustration, and user frustration is not ideal for business.
For this reason, you should be investing ample time and resources into getting your UX right!
Here are the UX practices that you can begin implementing today in order to easily improve the UX design of your site. From considering user flow and intuitive patterns through to creating a responsive design, these basic UX guidelines will familiarise you with this crucial design practice.
First thing is first. Let’s talk a bit about user flow. The user flow is the journey that your customer takes when they enter your website. For example, the user flow for an E-Commerce store would look something like this;
Home Page → New Arrivals → Dresses → Product Description → Cart → Checkout
In order to design an effective website, you need to know what your user’s flows will be. Look at your target market persona and imagine the series of actions they will take on your site. After you know this, you can design your website accordingly.
Furthermore, to optimise your website based on the user flow, work on implementing a design that encourages the user to complete a task. For instance, since the scenario above illustrates the user checking out the “New Arrivals” section of your site, consider placing “New Arrivals” imagery at the top of the page. Guide the user throughout your website in a way that encourages them to go from point A to point B.
Homework: Are all of your website elements where the user needs them to be? Look at your site from an outside viewpoint and tweak things according to the journey you expect your user to take.
When designing (or updating!) your website, pay attention to what goes above “the fold.” The fold is the part of the website that the user sees without having to scroll down. All of the content presented in this section should be important and immediately tell the user what they need to know. Additionally, the content should make the user feel that the remaining content on the page is important, prompting them to scroll down.
Immediately tell the user what they need to know by placing any relevant information right in their view. This information could include events, sales, courses, new arrivals, new blogs etc… You could implement this information with a slider image to tell your user everything they need to know all at once.
Homework: No matter what content you choose to highlight above the fold, be sure it grabs the user’s attention and tells them what they need to know.
It is great to incorporate intuitive designs into your website. This speeds up the design process (placing things in common patterns is easier than creating them originally), and it makes the website easier to use for your audience.
Think about browsing a clothing website. If you need to access the items in your cart, where do you look? The top right corner, right? Typically, shopping carts are always placed in the top right corner of E-Commerce websites. Because this pattern has become so common, users are able to intuitively locate their items without even giving it a second thought.
The same goes for many other website elements. Typically, navigation options, search bars, and contact information are all in the same place on virtually any website.
Implementing common patterns saves time for both the designer and the user, because the designer doesn’t have to come up with a new concept, and the user doesn’t have to learn anything new.
Homework: Switch up your design to implement common patterns to make the user journey a bit simpler for your audience.
Small Visual Details
Small visual design details are important for more reasons than just aesthetics. There are a lot of things that should be taken into consideration when choosing the “pretty” parts of your website, here are some of the basics;
When choosing which typefaces to use throughout your site, remember to focus on legibility. Is this a typeface that the user is going to be able to read easily? What about users with vision impairments? Is the weight of your chosen typeface acceptable? Choose your fonts in regard to their legibility, weight, and overall styles.
- Be sure your fonts are easy to read.
- Avoid tight, condensed fonts, especially for paragraph copy.
- Don’t italicize too frequently. Italicized words are harder to read, especially for those with vision impairment.
- Don’t go crazy with a bunch of different typefaces. Instead, stick to 2-3 to keep things safe. Use a certain typeface for headers, a certain typeface for paragraph copy, and perhaps a third for other elements, such as Call To Actions (CTAs).
- From a branding point of view the fonts you use ion your website should be consistent with the fonts used in your brand.
Homework: Choose 2/3 fonts and apply them to your Typography settings e.g. headings and body copy, this will ensure consistency throughout your site.
Take your line spacing into consideration. When lines are too tight, it can be difficult to read them, especially when going from line to line. Consequently, this can be frustrating for users.
Have you ever been reading something and accidentally read the same line twice? Narrow line spacings can nearly guarantee that your user will experience this. To keep things safe and improve the user’s experience, consciously choose the line spacing. When creating bulleted lists, give the lines a bit of extra padding to aid in legibility.
Homework: Is there any spacing you can adjust to improve your user’s experience n your website?
There are a bunch of things to take into consideration when choosing website’s colour palette.
- Choose colours that both complement each other and support the goals of your business. All colours mean something and provoke certain feelings, so take this into consideration when choosing your website colours.
- Keep your CTAs consistent by using one colour for those throughout the site. Use that colour for only your CTAs in order to create familiarity with your user.
- Choose a colour palette that is complementary and consistent with your brand.
Homework: Carefully select colours based on the mood, feel, and style of your brand. Research colour meanings and choose combinations that provoke the feelings that you want your customer to experience.
It Must Make Sense
Your website must be organised in a way that makes sense. Users have to be able to easily find whatever they are looking for.
For example, if your user is in need of new shoes, can they access that product category easily? Is there a specific navigational option that will take them where they need to go? Is the process intuitive?
You want your user to be able to get where they need to be as easily as possible and in as few steps as they can. Results for “Shoes” or something along those lines should take no more than 2 clicks. Be sure that your website makes sense.
Homework: Complete a website audit. Is your content easy to navigate? Determine a few common user scenarios, and act them out. Is it an intuitive process? Make any necessary changes and improvements.
Make it Responsive
Having a responsive website is extremely important. A responsive website is one that adapts to the device being used. This means that when someone switches to the mobile version of your site, the website accounts for that screen size and adjusts all elements accordingly, in order to best suit the user. Images and buttons are resized, content is reorganised, and the experience changes to fit the user’s chosen device.
Have you ever visited the mobile version of a website, only to find that the webpage looks exactly the same as it does on a computer? The page is essentially shrunk down to a quarter of the original size. The navigation is nearly impossible to use, you have to zoom in to read, and it is an overall awful experience. This is why responsive designs are so important!
With more than half of internet use completed on mobile devices, it is important that your website is able to accommodate that demand.
User Testing & Iteration
Over time, trial and error will allow you to craft the best website possible. As you get feedback from users, you will be able to learn and grow through implementing ideas and designs that better suit your audience.
To get feedback faster, consider having some users test out your website. Present them with tasks, and let them go through the process, providing you feedback along the way!
For instance, you could ask them to purchase a black t-shirt, or fill in an enquiry form, download a document or buy a ticket to an event.
In presenting the user with these scenarios and observing their actions will allow you to locate any pain points. Perhaps the download document button is not clear, or they can’t find the button to buy the event ticket and you can tweak your website accordingly.
You can also install a campaign tracker on your site, such as HotJar. A campaign tracker will track how users navigate on your site over several weeks/months, giving you visibility on how your users found your site, which pages they visited and any actions taken. This will give you insights into what content your target market is looking at on your website and what pages they visit prior to completing a purchase or other action.
Whichever method you choose, user testing or campaign tracking is a fantastic way to get feedback to improve your UX.
Homework: Test your website! Recruit individuals from your target market and have them try to complete a few scenarios. Getting feedback from your actual audience will prove invaluable, as you’ll be able to see specifics surrounding your user’s needs. After testing, you will have a much clearer idea of which changes to make. If you have the funds and want to collect data over several weeks and months install a campaign tracker and analysis and use this data to improve UX.
Begin Implementing these UX Practices
UX is absolutely invaluable when it comes to website success. More and more companies are implementing and seeing incredible results. It is truly worth it to invest time and energy into the process!
No matter the styles and designs that you decide to implement, be sure that you are doing it throughout your entire site and with the customer in mind. Keep design decisions consistent, and keep them thought out.
Above all, through implementing the above recommendations, you will be well on your way to creating an enjoyable UX for your audience.
I hope you have found this article useful. If you have any questions or comments, don’t forget to leave them in the discussion section at the bottom of this page.
Why not let me take care of your website and improve your UX with my Website Care & Maintenance Package. For just $100 you’ll get 2 hours of website updates and improvements every month! You can use it for anything that you want, content changes, product listings, Plugin updates or even adding new pages. T&C conditions apply give me a call or send me an email to find out more. Click here to book and for more information.
If you’d like to work with Social Elucidation on developing your UX, email me at email@example.com or call me on 0403 323 833. I’d love to work with you!