Up your What? The Importance of UX and UI in Web Design

Up your What? The Importance of UX and UI in Web Design

Up your What? The Importance of UX and UI in Web Design

Up your conversion rates with good User Experience (UX) and User Interface (UI) design

Yep, we said it, and no, UX and UI are not some kind profanities we are hurling at you as an insult (although bad UX/UI could be seen as one to your customers).

So, let’s break this down for those of us who usually wouldn’t give these terms the time of day:

User Experience

The concept of user experience is used throughout many industries, including software design, website design, app design, and more.

In simple terms, User Experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function.

Importantly, UX encompasses every aspect of the user’s interaction with a product, service, or company that make up the user’s perceptions of the whole. User experience design as a discipline is concerned with all the elements that together make up that interface, including layout, visual design, text, brand, sound, and interaction.

Example: Think about ordering food online for a pickup delivery. The UX consists of the user’s interactions with placing their order on a company’s website, their in-store experience of picking up their order, and also their satisfaction with their food.

How do you ensure good UX on your website?

According to a video by Jakob Nielsen (Nielsen Norman Group):

‘‘The first rule of user experience design is: don't base the product on what customers *say* they want. You must watch what people actually *do* when using your design.’’

You can read more about this and the 5 elements of good UX design over here.

Reference article: The Daily Egg

User Interface

User Interface (UI) design focusses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.

UI can deal with traditional concepts like visual design elements such as colours and typography (branding). It can also look at the functionality of screens or more unconventional systems like those that are voiced-based.

Example: To continue with the online food order example, UI would focus on the visual design of the screens a user interacts with, such as which colour to make the order button and where to place it on the page. This can also include any interfaces a user might come in contact with in-store.

Interface elements in web design can include (but are not limited to):

  • Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
  • Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
  • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
  • Containers: accordion

Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies. Once you know about your user, make sure to consider the following when designing your interface:

Keep the interface simple: The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.

Create consistency and use common UI elements: By using common elements in your UI, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout, and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site.

Be purposeful in page layout: Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.

Strategically use colour and texture: You can direct attention toward or redirect attention away from items using colour, light, contrast, and texture to your advantage.

Use typography to create hierarchy and clarity: Carefully consider how you use the typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility, and readability.

Make sure that the system communicates what’s happening: Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, the next steps can reduce frustration for your user.

Think about the defaults: By carefully thinking about and anticipating the goals people bring to your site, you can create defaults that reduce the burden on the user. This becomes particularly important when it comes to forming design where you might have an opportunity to have some fields pre-chosen or filled out.

Reference article: usability.gov

Breathe. We’ve got this.

All of this sounds pretty overwhelming, right? As you can imagine, testing UX can be a timely and costly exercise (especially when done individually for a website).

Fortunately, our clients benefit from the extensive UX and UI experience we have gained in building over 200 websites over a wide variety of industries (you can have a look at our portfolio).

We are always learning and keeping abreast of the latest developments when it comes to these vital elements of web design. We’ll advise you on the best practices and tools for your specific industry when we discuss your website build, all while considering the good use of UX/UI.

Back to Blog