How To Create A Great User Experience For Your Website (2024)
Before I niched KSD and decided to focus on Squarespace websites and visual brand identities, I was a Digital Designer.
I started my career as a web designer (my actual job title was “Assistant Web Mistress”) and that was back in 2004.
In the same way, my career progressed so did technology.
Back then responsive design didn’t exist.
CSS and XHTML were all the rage - designing and building web pages with tables was a thing of the past.
So, this post has come about for 2 reasons - because I think it’s important your website works for you, and also because I took the opportunity to speak at the third “Girl Tribe Gang” (Cambridge) meet-up on 9th April 2019.
The wonderful Jules Brim was the “leader” of the new Cambridge community. After attending the launch event and a second session after that, I was hooked. The ladies who attend are such a lovely bunch and it was genuinely nice to be around a group of like-minded individuals who are at different stages of their business.
Jules and I exchanged a few emails and we decided on the first topic I would speak about - How To Create A Great User Experience For Your Website.
User Experience
Wikipedia’s definition of User Experience is as follows -
“User experience (UX) refers to a person's emotions and attitudes about using a particular product, system or service.”
So, relating this to website design, user experience refers to a person’s emotion and attitude towards your website.
It’s how they feel, react, and respond to your website.
It’s important to note, that we are not talking about UI design - User Interface Design - UI Design has more to do with how the website looks and feels (it’s a little bit more complicated than that, but that’s the general jist).
Both UX design and UI design are super important and work closely together.
So, how do you create a great user experience for your website?…
1 | Less is more - negative/white space is good
As much as we sometimes think we need to provide visitors with as much information as possible so that they can make an informed decision; to get in touch or make a purchase (whether that be a service or a product), we need to take into account that bombarding them with too much information and “filling up the page” is not helping.
It will put the user off as they won’t know what their next step is meant to be.
White space, also known as negative space, will make the content on your page more eligible and will allow the user to focus on the element on the page. It is really important in good design and to provide a good user experience.
Did you know that white space surrounding headlines and text helps the user to read and concentrate on the information? - It also helps to give your website a modern, open, look and feel, which is paired with consistent branding and can help provide a great user experience.
2 | Well-written headings and heading styles
It’s really important not, only for the user, but also for SEO to use well-written headings and heading styles. Your words should be tailored towards attracting your ideal client.
In terms of SEO, search engines, like Google, look for headings - H1, H2, H3, H4, etc - and give these more weight over the body copy. This means by including well-written headings with heading styles, you are making your pages search-friendly.
Besides the SEO factor, heading styles guide your user's eye through the page, making it easier to read, scan, and find content.
How many times have you scanned a page on a website over reading every single word?
3 | Don’t reinvent the design wheel
Certain design elements are common. For example, buttons, standard links, or main navigation. You don’t want to create or design a completely new and different UI interface, because this will require the user to learn, or relearn, something that they don't need to. So don’t reinvent the wheel and try to do something so different that it will create a bad user experience. Stick to what is already established. Things like main CTA (call to action) buttons, and main navigation, need to focus on usability before design.
4 | Always know your audience
Your user should always be at the forefront of your mind. You need to know who your audience is to tailor your website to meet their needs.
Once you know who your audience is, you can find out what they want, and what they look for and therefore you can tailor the design and create an experience they will enjoy when visiting your website. It’s important to make a note of your competitors or other industry players and see how they meet their user's needs.
Your branding will be especially key in being able to differentiate you from your competitors so it’s important you know how to use your brand assets and toolkit to your advantage. (Don’t have a brand toolkit, only have a logo? - Get in touch to expand your assets!)
One thing that is always either forgotten or not done, is to evaluate and incorporate any feedback you receive, from your audience, into your website design and experience. Any actionable feedback should be considered and taken on board where applicable.
5 | Visual hierarchy is a thing
Visual hierarchy is key. Once you know what the priority of your website and page is, it is important to highlight these things appropriately. For example, if you want the user to make an action via a button, highlight the button so that the user focuses on it first. Generally speaking, this is done by making it bigger or using colour to draw the visitor’s eye to it. Either way, this must be done within proportion to other elements in its surroundings, or placing it within an area that will naturally force the user's eye to see it.
6 | Optimise your pages (speed)
How annoying or frustrating is it when the website you're trying to view takes AGES to load? Do you stick around and wait for the site to load or do you click away?
It’s so easy to look things up on your mobile whilst standing in a queue or having a coffee, but if the pages of your website load slowly the user experience will be affected.
People don’t have time to wait around, so it’s a no-brainer to optimise your pages, and therefore your website.
Compress your images
You can do this by ensuring the images you upload to your website are compressed. Image file size is one of the main causes of a slow-loading page. There are many tools out there that you can use to compress images, I use a combination of Tiny JPG and the Preview (Tools > Adjust Size) app on my Mac to ensure I optimise and upload the correctly sized image to my (and my clients) Squarespace website.
Related:
7 | Clever Calls to action (CTAs) - buttons and textual links
Users are already used to seeing links as CTA buttons and text links to help navigate around a website.
Creating clever CTAs on your website, using your brand colours, and considering colour psychology can have a massive effect on your user experience. For example, different colours on a button can evoke a different reaction from the user - red CTA buttons are almost always used as a “warning” button and green CTA buttons are often seen as “Sign up” or “Go” buttons. Your brand colour palette will also have a play in this situation so it’s worth considering and incorporating this as well. Another example would be using an outline button V a solid button. Your eye naturally focuses on the solid button, so if placing the two near each other it’s a good idea to use the solid. Therefore, ensuring you use the correctly styled button in the right place is important.
The same thinking can be applied to textual links. Make sure any links that are within a body of text are clearly identifiable, this can be done by underlining the text or giving it a different, bolder, more visible colour.
8 | Consistency in your page designs
A golden rule in branding is to stay consistent. This also applies to your website page design as well. Make sure the heading sizes, styles, fonts, colours, button styles, link styles, the spacing between elements, design elements, illustrations, icons - pretty much everything you see on a page, is consistent and remains consistent between pages, for example, the main navigation - keep it in the same place on every page of your website, unless it’s a sales or opt-in (lead magnet) page where you may want to remove it altogether.
As the user navigates your website, you want them to recognise, know, and feel comfortable on the site. Every page should create a beautiful experience, reinforcing the trust they feel in you, your brand, and your website.
Related:
9 | Use your 404 page wisely
You don’t want your users to be lost on your website, but they may accidentally land on a 404/error page. If this happens what do you do?
Ideally, you don't want that to be the end of the user journey or want their website experience to end there - at a dead end. It’s not a good place for anyone. Instead, think about how you can turn that dead end into a positive experience.
I’ve seen some great sites that use their 404 pages to have a bit of fun and can redirect the user to get back on track.
The Lego website does this well…
10 | Mobile and tablet friendly
Did you know Google penalises sites that are not optimised for mobiles?
It is so important that your website is responsive, meaning that it is mobile-friendly (and tablet-friendly) and easy to navigate.
In this day and age, this is probably one of the most valuable ways to create a great user experience for your website.
11 | Don’t forget your branding
Your website should be part of your brand identity. You should be using your brand assets - like your logo, icons, illustrations, and brand photography on your website. All these elements will reinforce the trust your user has in you, and your business, and will help create a great user experience.
Conclusion - Design for the user
As I designer, I strongly believe it’s my duty, and part of my job to ensure a website not only looks great in terms of design but also creates a great user experience.
You should always design for the user and keep them at the forefront of your mind. Remember, you are a website user yourself, would you have a good experience if all of the points above were not considered?
Do you think your website creates a great experience?
Are you interested in working with KSD to improve you're website’s user experience? Get in touch for a no-strings-attached chat.