The Importance of Good UI Design

(Summit Art Creations/stock.adobe.com)

Designing user interfaces that are intuitive, consistent, accessible, and inclusive improves user experience. By leveraging user feedback and advanced technology, these user interfaces could enhance the user experience even more.

Joe Padilla, Director of User Experience, Mouser Electronics

As a user experience (UX) professional, I spend much time contemplating the intricate relationship between humans and technology. The bridge that facilitates this interaction is the user interface (UI), an element that significantly impacts user satisfaction. Whether physical buttons and screens or virtual elements like icons and menus, a well-designed UI makes all the difference to the UX. In this article, I’ll discuss what makes a good UI and how Mouser Electronics has applied those principles to give our users the best experience possible.

The Key Principles of UI Design

Most people understand how they expect to interact with what’s in front of them. Physical buttons and controls, or a familiar representation of such, exist in the digital world. However, context is key; the human–machine interface (HMI) must be fit for purpose. For example, a car’s screen and button sizes differ greatly from those on a mobile phone. Ultimately, the best interfaces are designed by considering how and where users will interact with them.

A UI should be intuitive and straightforward, guiding users to achieve their goals as efficiently as possible. At Mouser, we practice customer-centric design; prioritizing our customers’ goals and what they’re trying to accomplish is fundamental. We start by empathizing with the customer to understand the context of why, how, and where our application will be used; we can then inform our design solutions with these requirements in mind. 

Consistency across the HMI is also vital; it helps to build familiarity with an interface and how different UI elements will function. Over time, the user understands these possible functions (known as affordances). A consistent UI also builds trust. If we establish expectations and suddenly stop meeting those expectations, we send a small signal that something is wrong. Instead, consistency demonstrates professionalism; it shows that we care. However, a genuinely excellent UI surpasses usability and embraces accessibility and inclusivity.

The Importance of Accessibility

Accessibility is crucial for a UI because it ensures that everyone, regardless of ability, can access and interact with the platform, fostering inclusivity and expanding the user base. This not only benefits users with disabilities but also caters to temporary limitations or situational difficulties faced by all users.

At Mouser, we have a dedicated senior user experience accessibility designer who ensures that everything we create adheres to Web Content Accessibility Guidelines (WCAG) 2.1 AA and other accessibility regulations (Figure 1). The WCAG's POUR principles guide UI design: every UI design element should be Perceivable, Operable, Understandable, and Robust. By following these principles, we can ensure that all users can interact with the UI, down to the minimal component level and across a wide range of technologies. 

Figure 1: Ideal UI design adheres to Web Content Accessibility Guidelines (WCAG) 2.1 AA and other accessibility regulations. (Source: Mouser Electronics)

UI Design for Complex Information Architecture

At Mouser, we must account for a wide range of users. We develop a target persona for the various features across our application, including product pages, search results, and shopping carts. More than simply demographics, a persona describes user motivations and intent. A target persona identifies the persona that best aligns with our business objectives. At Mouser, we have different levels of engineer-type personas—for example, the hobbyist who likes to tinker with electronics or the student engineer who’s undergoing formal training. By designing a UI that meets the target persona’s goals, others benefit, too.

However, regardless of personas, ensuring a smooth UX is paramount. We leverage established heuristic techniques and Gestalt principles of design to create intuitive interfaces that feel instantly familiar. We’ve learned from other popular applications that users expect a powerful global search bar with intelligent suggestions (Figure 2). We use on-page analytics and customer feedback to keep content organized and create a visual hierarchy to guide users through the most important details. Furthermore, we employ progressive disclosure to ensure that users aren’t overwhelmed, revealing in-depth information as they delve deeper and mimicking the intuitive exploration of a well-organized library. 

Figure 2: Mouser's Scope Search with Advanced Type Ahead feature provides a familiar interface to users. (Source: Mouser Electronics)

While some users engage in lengthy research journeys, meticulously gathering information over months for their projects, others seek a swift checkout experience. We cater to both by offering intuitive product discovery, comprehensive product information, and robust filtering options for in-depth specification exploration. Meanwhile, features like Project Manager and Cart/Project Share ensure an efficient experience for accomplishing those goals. 

Striking the balance between visual appeal and information density is crucial. Recognizing the value of visuals, Mouser employed a sophisticated 360-degree camera system for product photography (Figure 3). This allows users to zoom, rotate, and thoroughly inspect products, ensuring accurate selection. While this innovative tool hasn’t yet been implemented across our entire catalog, it exemplifies our commitment to enhancing the UX with improvements to UI features.

Figure 3: Visually interesting elements such as Mouser's 360-degree product images represent good design and present easily comprehensible information. (Source: Mouser Electronics)

The Importance of User Feedback and Testing

The best-designed UIs likely have been developed over time using a customer feedback loop. Continuous improvement drives our UI design; we analyze user behavior through user testing and digital experience intelligence tools, identifying critical elements and potential pain points. These data inform UI design decisions, such as prioritizing frequently used features or moving them to more accessible locations. We constantly measure and analyze the success of these changes, prioritizing “frustration metrics” to understand why users might not complete desired actions. This comprehensive approach, encompassing testing and data analysis, allows us to identify and address technical issues or UI inconsistencies that hinder the UX. However, user testing is an ongoing process; we strive to refine the UI continuously, ensuring that it meets evolving user needs and fosters smooth, efficient interactions. 

Future Technology for UI Design

As technology evolves, UIs will become more fluid to adapt to our users’ preferred devices. We’ll probably see fewer tactile interactions, with voice commands becoming the interaction of choice. That said, while many new technologies are on the horizon, I believe artificial intelligence (AI) holds the most potential for the UI. AI could vastly improve accessibility by translating flat content into readily understandable formats (e.g., describing images, text-to-speech) and enabling users to jump to the most relevant timeline within videos when looking for information. Meanwhile, augmented reality (AR) also presents exciting opportunities for the UI, such as three-dimensional component visualization and interactive assembly instructions.

However, a user-centered approach is paramount to adapt to these advancements effectively. Whatever the future holds, Mouser will strive to maintain an intuitive, simple, and accessible UI, leveraging advancements in technology like AI and AR to empower users to achieve their goals.