fbpx

Putting The User First In UX and UI

UX and UI design is all about solving problems for the end-user, so it’s important to think like one. In this article we’ll be talking about Website navigation, action and reaction, buttons and call to action, color palette, important website features, and good website references.

Art and technicality can be used together in so many places, and as for UX and UI design, psychology is just as important as technology. 

Defining your principles before designing a website is the most important tool for any designer. Otherwise, you end up with a jumbled mess of a site, with poorly implemented features and a headache-inducing color palette.

Navigation

Any UX designer worth their salt knows that website navigation is key to a good user experience. The user should always know where they are on the website and how to get back to the homepage with ease. Action and reaction times are also important; if a user has to wait more than 3 seconds for a page to load, they’re likely to click away.

Good UX design should focus on simplifying a user’s journey through your site. Your goal is to make the process of finding what they’re looking for easy and streamlined.

Navigating a website should be as clear as possible. At any given point a user should be able to understand what page they’re on and pinpoint exactly what and where they need to click to move forward. 

Your navigation items should be named descriptively and in a way that users are likely to search for them. For example, if you had a clothing website the navigation might look something like this:

Example:

– Women’s Clothing

– Men’s Clothing

– Children’s Clothing

– Accessories

If you have a lot of content on your site, consider grouping similar topics together in dropdown menus. This will help to keep your navigation clean and organized.

Try to simplify the options on any given landing page. Prioritize your main website features, while also giving the user options to find more niche sub-features.

Sub-Navigation

You can use a bread crumb feature to give your users a trail to follow so they know exactly where they’re clicking and how to retrace their steps.  For

Example:  Home > Women’s Clothing > Dresses

This is also a way of giving users more than one path to finding the content they’re looking for.

Another UX design tip for sub-navigation is to use tags and categories. This will help organize your site’s content and make it easy for users to find what they’re looking for.

Action and Reaction

We all distinctly remember at least one experience on a poorly designed website. Long load times, pages failing to load, and stuttering scroll features.

The UX of your website should take into consideration how users are likely to interact with the different elements on each page.

For example, if you have a button that says “Add to Cart” it’s important to make sure that when a user clicks on it, the desired action is carried out immediately.

Hover Actions

To help identify your buttons vs. plain text, use a hover feature that changes when a user is about to click on the Text / Icon.

Changing the shade or color of text gives a clear indication that the text has a function. Regardless of your cursor changes to a pointer icon or not, the user is given the information that tells them “yes this is indeed a button”

Landing Pages

Don’t waste the time of a business’s potential client. Anyone should be able to find the information they need within 1 – 2 clicks. Lengthy menus and over-complicated layouts can distract from your website’s potential.

Try to design your website in a way that minimizes the need for users to go back and forth between pages. If a user is looking at a product page and wants to read reviews, the reviews should be easily accessible on that same page.

Keep It At 400ms

Always Test Your Site! The load time of your of your pages, buttons, and other calls to action need to be as quick as possible.  Be sure that they are responsive and work the way you want them to. Quality control is your best friend.

Using the Doherty Threshold we can determine if a page, button, or call to action loads appropriately when compared to the highest industry standard for UI and UX

Make sure the site can be reached easily from inbound links. Finding links from search engines, social media, and anywhere else they might be shared.

Buttons and Call to Actions

Something that will definitely hurt your site is confusing and misplaced buttons. Unclear call to action, illegible fonts, and un-aesthetic color palettes can all be factored in this.

Buttons should be easily recognizable as such. They should be a different color than the rest of the text on the page, and they should be big enough to be clicked on without issue.

Simply using shapes or shape outlines to emphasize a button or call to action. Use a contrasting, yet aesthetic color that works with your palette.

Affordance

Your call to actions should be clear and concise. The user should know exactly what will happen when they click on a button or link.

This can be achieved by using what’s called an Affordance, more specifically GOOD Affordance. Affordance is when an element on a page looks like it can be interacted with, even if it can’t. A button that doesn’t do anything when clicked would still have an affordance because it looks like it should be clicked. A good UX designer would make sure that all buttons are in fact clickable and do something when interacted with.

If you have a “Download” button, make sure that it leads to a download page or starts the download immediately.

Targeting Important Features

Just as your buttons need to stand out on a page, the top features of a business or entity need to stand out on the entire site.

These are the most important pieces of information that a potential customer or user should see, UX and UI designers need to make sure they’re always visible and easily accessible.

Remember to keep Key features at a high level and use subcategories to indicate smaller more niche elements.

 

Color Palette & Font

Designing a concise color palette for a website is important for many reasons. Different colors can evoke different emotions in people, so it’s important to choose a color scheme that fits the tone of your website. Colors can also be used to make certain elements pop out on the page, which can help draw attention to important information. Finally, load times are often affected by the number of colors used on a page, so it’s important to keep that in mind when designing your site.

Some things to consider when choosing a color palette:

– What emotions do you want to evoke?

– How do your colors complement your brand?

– Do your colors make important elements stand out?

– Can you use multiple colors without affecting the load times on your page?

Fonts

A fonts use in your brand is just as important as color. While working with different fonts, uses, and scale it’s important to consider the following

– What message do you want to convey?

– Have you achieved the tone of your website?

– Which fonts are easy to read?

– How many fonts can you use without affecting the load times on your page?

The relationship between your landing page’s font, color, and imagery can create a unique experience for your user. Whether that experience is positive or negative can be heavily affected by the intention and care put behind it.

Reference High-Quality UX and UI Design

When you’re looking for inspiration or just trying to find good UX and UI design examples, reference websites that are high quality and well respected in the industry.

Potential users want their experience on any site to be a reflection of their best overall experience. In other words, you need to at least cover the basics of the best to compete with their sites.

Look at relative websites in the industry and base your desired outcome on what features they have in common. Break down the complicated workings and features of a business into simplified solutions with the user in mind.

The Laws Of UX AND UI

The 10 Laws of UX is a collection of psychological works compiled by Jon Yablonski. It’s a great tool to reference when creating.

Each category is a reference or blueprint for design. They can be a very useful guide when building a blueprint for a user experience. 

Now nothing about UX and UI design is set in stone. People change, brands evolve, and entire industries can shift landscapes rapidly,  but there are so many useful resources to reference while designing for a user.