The emotional impact of a well-designed website experience can stick with users long after they’ve exited a website. We don’t always remember exactly what we saw on a site and everything we liked, but we do remember the way it made us feel. The information you present to users on your website, the way you present it, and the emotional response your audience has to that information are essential factors to consider when designing an online experience.
This is why the user experience is such a huge part of web design. The art and science behind UX design can help you combine text, media, graphics, layout, and functionality to craft a memorable, quality experience for your users. The user experience starts the moment they’ve accessed your website and lasts for long after they’ve left or even converted.
Given how much information there is in today’s digital world and how complex it is, differentiating yourself from competitors is more important than ever. Successful websites now prioritize story, visuals, and emotions more than ever in an attempt to craft a pleasing and memorable user experience. Now more than ever, how you convey your business through your website matters given how competitive the landscape is.
In this article we’ll go over more than 20 principles which should help you focus on the best way of presenting what your business has to offer and how to set your website apart from the myriad of competitor websites.
Design and layout
While user research, testing, and analysis are all essential to validating good UX decisions, searching for inspiration can also be a good and helpful idea.
Awwwards, for example, can be a great source of inspiration as they select websites which stand out from all the others and submit them to a jury of industry leading UX designers, creative entrepreneurs, and art directors which judge those websites based on four main topics:
A quick look over some award-winning websites could give you just the inspiration you need to craft your own amazing experience. Keep in mind the differences between inspiration and copying, however, and ensure your designs stay as unique as possible.
It’s important to know how powerful simple colors can be and the influence they can have on users. They can focus their attention and encourage them to interact with a website and it’s important how you choose them and where you place them.
Colors also create hierarchy on a website. When a user visits your website, they may have certain questions which if they aren’t answered quickly, the user may bounce – leave the website without visiting any other page or interacting much with it. They need to know where they should click, what they should look at first, and how to easily get from A to B to accomplish their goals.
White space, also referred to as negative space, simply means the absence of something. This negative space is in fact an active composition element which serves to direct users’ attention to what we deem is most important on a page. Designers use white space strategically to increase user focus and improve readability on pages.
A page that is packed with text, visuals, and other elements can easily become overwhelming. Using strong headlines and clear and scannable interfaces will significantly improve users’ ability to identify, focus, and comprehend important content on a page. Strategically using white space together with these elements will increase comprehension even further.
We spend a lot of time and effort developing websites and experiences for monitors, often forgetting that the majority of web traffic actually comes from mobile devices, which is why you need to ensure consistency between desktop experiences and mobile experiences.
At the same time, remember that users don’t interact with your brand solely though your website. They are likely also interacting with it through social media and the pages on those platforms could also be seen as alternatives to your website.
That is why it is essential firstly to optimize your website for multiple devices, and secondly to see your social media pages as homepages as well, ensuring a consistent brand experience across all of these channels.
Putting related information on the same page
An important aspect of any high-quality website is its information architecture, or IA. This refers to which information is present on which pages, creating an intuitive navigation which users can easily understand and use, and organizing content in a way that draws users into the experience you’ve designed.
There are several things to consider when dealing with your website’s IA. Crafting an attractive and enjoyable experience which encourages people to continue exploring your website is crucial, and this involves every aspect of UX design, from content and graphics to motion and interactivity.
Here are some tips for grouping related information on your website:
- sections – create sections which are clearly demarcated so your users can easily find their way across them
- longer pages – try to lengthen your pages instead of splitting information across multiple pages since modern users usually scroll to find more information
- wider pages – digital experiences should be optimized for all screen sizes so make use of the extra real estate your users have on larger monitors
- tabs – while not always necessary, tabs could be a quick and easy way for you users to move from one section to another
- modals – modals are great because they can show users extra information on the same page, without forcing them to navigate somewhere else
- videos – you can use videos to compress your message into a short and engaging video which tells users what you want to tell them without requiring them to click or tap on anything
Horizontal and vertical real estate
As mentioned earlier, you should make full use of the horizontal real estate you have on larger monitors, potentially stretching your content to fit the entire width of the screen. Look at your website’s analytics, see what screen sizes your users have, and optimize your website accordingly.
Vertical real estate encourages your visitors to scroll. This real estate is free as long as the content on your page captures users’ interest and connects them to the rest of the experience. Instead of trying to squeeze everything above the fold, try making your content vertical and encouraging users to scroll.
We’ve already established how important screen real estate is, and slideshows are a great way to use it strategically. They can include carousels, banners, and even videos.
Slideshows can showcase the most important content on your page, and they allow people to continue browsing after they’ve got their eye.
You should design slideshows deliberately and strategically to ensure they direct users’ attention to where you want it. This involves balancing interactivity with other elements on your page.
Direct users’ attention to content through interactivity, but make sure not to overwhelm them. Use slideshows to reinforce your main message and encourage users to browse your website without distracting them from the core experience.
Icons are absolutely everywhere, from our computer desktops to our smartphones, smartwatches, car dashboards, smart fridges, and so on. While they are often accompanied by labels, icons don’t rely on words to communicate meaning to users and inform them about what they should click or tap on, how they can navigate, as well as generally interact with a system.
Here are some tips for using icons on your website:
- be conventional – all common icons should be easily recognizable, such as the print or the save icon
- be consistent – icons that serve the same purpose across systems should have a consistent look and feel, even if there are small differences between them
- label icons – while labels aren’t always necessary, they can still help
Navigation and guidance
Flat navigation vs deep navigation
The two main classes of navigation are flat navigation and deep navigation.
Flat navigation tends to have fewer layers in the information hierarchy, typically between one and three, as well as fewer navigation points overall. Conversely, deep navigation tends to have over 4 layers in the information hierarchy.
While deep navigation may be unavoidable for more complex websites, it does have certain downsides. Flat navigation would generally be preferable since users tend to find it faster and easier to use.
Using mega menus may reduce users’ cognitive load when they are looking for a certain page. Mega menus are dropdown interfaces which allow users to navigate through the website’s hierarchy by simply hovering over page titles.
Tabs are navigational elements which allow users to easily access different areas of a website or different parts of a single page. While they can be great for easier navigation and grouping related content, sometimes a page may benefit from not having any tabs.
Tabs are intuitive because of their commonality and can be used to save space, connect related information, and group content.
Here are some tips for using tabs on your website:
- make them symmetrical and interactive – tabs should be organized in a logical manner, inform users which tab they are on, and click or tap animations should let users know if they’ve selected something
- use clear and concise copy – labels should be short, use plain language, and include consistent typography
- indicate interaction – highlight the current tab and clearly tie tabs to different content areas
The homepage is users’ starting point on a potential journey that you have to convince them to experience.
Your homepage should be clear and establish exactly what your website is about. Usability expert Steve Krug writes in ‘Don’t Make Me Think, Revisited’ “Whenever someone hands me a homepage design to look at, there’s one thing I can almost always count on: they haven’t made it clear enough what the site is. As quickly and clearly as possible, the homepage needs to answer the four questions I have in my head when I enter a new site for the first time: What is this? What can I do here? What do they have here? Why should I be here – and not somewhere else?”
To make your homepage as clear as possible, ensure it is answering those four questions with a concise blend of copy, imagery, and navigation.
Navigation and URLs
A great user experience requires a lot of attention to the macro visuals and micro details of your website. Navigation and URLs are often overlooked but they can play an important role in guiding users throughout your website.
Instead of arbitrarily linking pages as you build your website, you can make significant improvements to usability by simply including your website’s most important pages and actions into its main navigation. You can think of it as a list of chapters in the story you are crafting.
Fine tuning navigation means you need to take an overall look at your target users, the top user stories, and the biggest CTAs on your website. This will help you create a blueprint for navigation, ensuring that the most important pages on your website are exactly where users would expect to find them. A good UI starts with simple and clean navigation.
URLs are also useful navigation tools for both users and search engines. Unfortunately, this important usability detail tends to be forgotten during the planning stages.
Clean and concise URLs can help users understand where they are on your website and where they need to go next. Even Google agrees that short URLs are better and as search engines are becoming increasingly more sophisticated and able to understand natural language, they too should be thought of as “users”.
Optimize URLs for users and search engines
As previously mentioned, search engines are becoming more and more advanced and it’s important to consider their “user experience” as well.
While they might not seem that important in the grand scheme of UX, URLs are actually seen and they do matter. Domain names and URL structures should be carefully considered during the planning phase.
URLs should ideally be:
- easy to remember
- easy to spell and type
- clear and concise
- authentic and relevant to the content
Links and buttons
To quote again from Steve Krug, “since a large part of what people are doing on the web is looking for the next thing to click, it’s important to make it obvious what’s clickable and what’s not.”
That’s why you need to ensure that all your links look like links and all your buttons look like buttons. While branding does have a significant impact on your website’s final aesthetics, clickability is an essential factor for user navigation and conversion.
Guide your users to CTAs
You should always have a clear objective when a user visits your website or uses your application. CTAs encourage users to respond to that objective, either by signing up for a newsletter, downloading a whitepaper, buying something, and so on.
CTAs typically appear in the form of buttons, enabling users to accomplish theirs and the company’s goals.
Direct your users to CTAs by:
- providing clear visual guidance
- conveying clear and simple value propositions
- using good copy that encourages them to act
Improve UX with powerful imagery
The imagery on your website can have a huge role in how your users perceive its quality and how memorable the user experience is. The first reaction users have when visiting your website is largely determined by what they see, so ensure that that first impression is a positive one.
Here are some steps you can take to improve users’ first impressions:
- ethos – use high-quality imagery to foster trust and credibility. Remember that low-quality images will undermine your brand’s credibility and negatively impact trust. Therefore, ensure that your stock images don’t look like stock images, that you’re not using cartoony clip art unless it matches your brand identity, and that your graphics look crisp and clean.
- logos – make conversion a logical choice. Ensure that the pictures you’ve chosen for you website match its theme, purpose, or the specific campaign of the experience that you are crafting. If you have an e-commerce website, for example, you absolutely need high-quality photos of your products to provide users with clarity and influence their purchasing decisions.
- pathos – influence users’ decisions by creating emotion. The images you choose for your website should have a positive emotional impact on your users, inspire them, and reinforce the feelings that you want them to feel. Emotion can often prevail over logic when dealing with important decisions and if the imagery is emotionally charged and meaningful, it can drive action and engagement from users.
People don’t read information, they scan it
Users don’t typically read copy on an interface the way they would on other reading materials. Instead, they scan it quickly for the information they’re interested in. A study by Jakob Nielsen revealed that only around 20% of content on a page is actually read.
People scan content because it’s quicker and more efficient, especially when the behavior is aided by text, imagery, colors, and interactivity. Instead of forcing your users to make unnecessary cognitive efforts to read all your text won’t create a good user experience. Instead, help them scan your content easier by writing as clearly and concisely as possible, using white space, colors, different font sizes, and images to break up your text.
Scrolling is better than paging
Modern websites use more vertical real estate and are much longer than they used to be when designers tried to cram everything above the fold.
We’re quick to scroll through pages and scan their content, but loading new pages slows us down. As such, longer web pages have become the norm.
Textbox width should help your users read
Textbox width is often overlooked but getting it right can be very important. If they are too large it may hurt readability and lead to a higher bounce rate.
Keep in mind that just because you have a lot of horizontal real estate, doesn’t mean your text should span the whole width of the page. Responsive design also factors into your text areas’ layout. The width of the text box has a direct impact on readability and usability, and as we work with responsive designs, we need to design text boxes with varying screen sizes in mind.
While it may seem counterintuitive, simplicity can actually be very sophisticated and crafting designs which are simple, clear, and usable is an artform in itself.
When focusing on simplicity it’s important that you:
- understand your users, their mental model, and the specific use cases they are facing
- understand your website’s technical constraints
- understand which features and functionality really matter to users
Animating for usability
You shouldn’t necessarily implement animations just for the sake of flair. While looks are important too, also consider usability and how well your page works.
If you want to add usability and flair to your design, consider animating with motion that makes a seamless experience for users. It can span the entire page, capitalizing on both horizontal and vertical real estate. Keep in mind that motion is scalable, meaning it can be something as small and simple as a hover interaction or as large as an entire page morph that reveals a whole different screen.
Successful user experiences encourage discovery while at the same time hiding a system’s complexity that might otherwise feel overwhelming. Users will rarely need all the information on a website at once and the idea behind progressive disclosure is to reveal information to your users as they need it for a given task. That’s why it’s so important to design layered interactions based on user stories.
Any good UX designer knows that writing is a key component of the entire user experience and should be treated with the same amount of attention as any visual aspect of a design.
To better connect with audiences, you should always write with personas and user stories in mind. Know who your users are, what their goals on your website are, and what they would expect to gain from reading your content.
Personas are like the main characters in your user stories. When you are writing your content, make sure you keep the focus on them, because you aren’t writing for yourself. The content needs to make sense and be relevant to the people who are reading it.
According to the Nielsen Norman Group, “chunking is a concept that originates from the field of cognitive psychology. UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and remember it better.”
Modern websites tend to be longer partly because of chunking, as designers split content into multiple shorter sections to make it more digestible and not overwhelm users.
Focus users’ attention with concise copy
We are developing shorter and shorter attention spans, which means our designs have to account for this. If you don’t, you risk overwhelming users, losing their attention, and bouncing from your website.
When creating concise copy, focus on:
- highlight the main message upfront – ensure your main message is immediately visible instead of buried in the details
- write short and simple copy – concise copy doesn’t cause too much of a cognitive load and focuses users’ attention on your main message, so try to say what you want to say in as few words as you can
- support your copy with visuals – sometimes you may not even need any copy; if you can get your point across just by using an image or a diagram, go for it
Hopefully all the advice we’ve gone over will go toward informing your navigation, layout, content, and overarching UX design choices. A great design isn’t just a pretty one and a lot of consideration needs to be put into crafting experiences that your users will enjoy.
Also check out UX Principles for a Great Web App Design.