Web User Experience as outlined by the International Organization for Standardization is a “person’s perceptions and responses resulting from the use and or anticipated use of a product, system or service.”
UX is influenced by a variety of factors, including how a user users and navigates a website, what they are expecting from a website (and the company), and what they are looking for.
UX encompasses the users’ entire experience with a company’s online presence.
The definition of UI (user interface) is the platform on which the user and website interact with one another.
This includes elements like clickable links, forms, and other actions a user can complete on a website. This is basically how (the conduit) a user uses a website.
UX and UI work together by providing a better overall picture of how users interact with and get information from a website. Many elements of UX have to be implemented in the UI in order to give users the best experience possible.
UX: The Experience
- Interaction design: the elements that users can interact with, meaning they can watch, read, click on, enter information, or browse.
- Based on data, emotion, and user research: A/B testing, how users interact with specific colours, words, and layouts, and the website’s target audience all goes into its UX.
- Wireframes: the “Map” or list of all the pages that will be on a website. This includes Home, About, Contact, Services, etc.
- Sitemap: an automatically-generated list of ALL the pages on a website. This includes all blog posts, images, and other files. Can be auto-generated using the Yoast SEO WordPress plugin.
- Personas: marketing personas that are fictional people that designers use to create a website. Includes their demographics, likes/dislikes, wants, hobbies, and other personal attributes.
UI: The Medium
- Visual design: the graphic elements of a site, like the branding, header images, photos, and other graphic elements.
- Based on design trends and brand guidelines: uses the brand’s colour palette as created by the designer and uses the latest in design to craft the appropriate “feeling” of a website (e.g. modern, classic, old-fashioned, etc.).
- Colours: what colours the website uses for the graphic elements, the background, the text, links, footers, and header.
- Typography: what font and font layout are used throughout the site? Depending on branding guidelines and the desired “feeling” of the website (what you want it to convey).
- Layout: how the website looks visually, and the order elements go in (e.g. the home page could have a menu, header, featured post image and text, recent blog posts, ad, text box, and footer.
UX and UI are important to website optimization to provide a better website that gives users the information they need when they need it.
#1 Influence of web design on UX
how bad design can create a bad user experience, even if the website is useful and the company is well regarded.
This could include off-putting or outdated colours or design elements, hidden CTAs, and not enough content about products and services on the home page.
#2 Navigation
navigation layout and the process can vary—should it be collapsible (like many mobile navigation layouts are) or should navigation expand with mouse hovers?
Additionally, testing the nesting of pages is important. E.g., where sub-pages go in the navigation—would the products page get more clicks if it was on the main navigation instead of as a subpage under “about us”?
This is a website with a poor UX and UI because:
- There is no menu so the user can’t get to other pages on the site
- The background and text contrast could be difficult to read
- It doesn’t lead with how it benefits the user
- The Facebook button is leading the user away from the website (where they make a conversion)
- The layout is not modern or mobile-friendly, so it’s more difficult to use
This is a website with a poor UX and UI because:
- The red text at the top of the page with contact information is hard to read
- The site isn’t mobile-friendly, so it’s hard to use on different devices
- The menu navigation is hard to read because the words run together, so users may get frustrated or confused
- There are no CTAs, so users don’t know what to do with the information that is on the site
Action Point
PS: I know you might agree with some of the points raised in this article or disagree with some of the issues raised.
Please share your thoughts on the topic discussed. We would appreciate it if you could drop your comment. Thanks in anticipation.
