Published 23 Jul, 2020 5 minutes of reading
Behind every great user experience, there is great design.
Great design results in products that are useful, aesthetic, and understandable. Legendary designer Dieter Rams, father of the famous 10 principles of good design, explains that good product design "... clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.”
As designers, this is our duty. When we commit to great product design, we commit to focusing user attention so that they understand and get more value out of what we offer. This is key.
UX Design in Three Phases
In this article, I want to address some of basics to building a good product. With digital products in particular, there are a number of practical themes to consider, themes like accessibility with ADA compliance, SEO, searchability, transactional scenarios, and responsiveness.
At Modyo, our process to address these themes is iterative, helping us continuously improve our design with feedback. This UX process is more of an approach or way of thinking than a hard definition, as it often differs between organizations.
That being said, there are three phases to how we approach UX: research, conception and user testing.
Research, “Building a good product”
Also called "Discovery," we define the scope of the product and the business goals according to stakeholders constraints and end-users needs.Conception, “Building the right product”
This second step is where we design low-fidelity wireframes—interactions to emphasize the information architecture and structure we defined in the previous step.User testing, “Building a useful and usable product”
Test your product with users, and learn what you need to change. User testing is the strongest influence you have on design decisions. It helps ensure you aren’t forcing user behavior down unnatural paths, and also counterbalances stakeholder feedback.
Cognitive Load & Visual Hierarchy
Taking a closer look at our product conception step, let's explain how we consider all constraints. When we design a product, we always have the following five constrains in mind to ensure that we stay aligned with user expectations. We need to always:
Focus user attention
Lead users to the final goal
Reduce mental effort, maintain flow
Maximize and standardize compatibility with the user’s natural tendencies
Minimize errors, avoid frustration
Both leading users to different elements, while also focusing their attention on particular tasks is a tricky challenge, because we have to walk a balance between cognitive load and visual hierarchy. Digital products are scanned, not read. We can't ask a user to multitask, because their attention is necessarily selective. As it should be, and nearly all users do this: we scan headline first, then subheadings, and only then after, copy blocks.
It's important to understand where your user is focusing.
Focus Attention with All Users in Mind
If we want to design a good experience--that is, to maintain balance between cognitive load and visual hierarchy, we need to provide a simple way for our users to focus their attention. Content is important, but proper information architecture is vital to presenting information gradually. The simplicity of your product's information architecture ensures its availability to the widest possible audience. It's also what makes your product "pleasant."
Pleasant interaction models help users feel comfortable while using a product. It is up to UX/UI designers to manage visual tools such as size, color, contrast or negative space--the area between elements in a design composition--while taking accessibility into account for all users.
All elements of size, color, contrast, and negative space are at work here.
These choices have a real impact on your users. According to a 2005 report from the United States Census Bureau, at that time there were approximately 54 million people with disabilities in the U.S., constituting 18.7 percent of the total population. Another study from Google based on data from the World Bank (WDI, 2008) and CDC.gov (NHI Survey, 2008), found that there are more users that have hearing impairments in the United States than the entire population of Spain, and more users who are blind or have low-vision than the population of Canada.
These are just those with seeing or hearing impairments in the US alone.
Meet the Standards
To address the needs of impaired users, The Americans with Disabilities Act (ADA) outlines the rules and regulations for sites to follow, called ADA compliance. These regulations prohibit discrimination through exclusion, and ADA compliance encourages to use the WCAG 2.0 guidelines, which includes three compliance tiers:
-
Level A : A site that some users can access.
-
Level AA : A site that almost all users can access.
-
Level AAA : A site that all users can access.
The WCAG 2.0 Level AA is the minimum level required to be considered ADA compliant. This includes guidelines such as the use images and diagrams to support text, or keeping text aligned to the left, or keeping notifications and buttons within context.
These button designs help reinforce a hierarchy of actions.
Other guidelines include writing in plain language, making important information clear, and explaining what will happen after completing a task, in order to reduce mental effort and anxiety.
A check or 'X' next to each text field helps clarify meaning.
Apply These Guidelines to Your Design
There are numerous design principles to consider with digital products. But a good place to always start is from a place of empathy for your users and helping them focus. Users want clarity and simplicity. Providing a consistent design makes products easier to use, regardless of screen size.
For example, on mobile devices especially, a fundamental design principle is to include only necessary information. Information density can easily overload a smaller screen. Considering the principle, our mindset should include large, clickable/touchable actions commonly called “finger-friendly tap-targets." Another practical recommendation is to choose a typeface that works well in multiple sizes and weights to maintain readability and usability in every size.
16px is a good starting point.
It is generally agreed upon that 16px for body text is a good starting point. Of course, some text will be smaller, and headers will be larger, but for the main body, 16px is a safe bet. That said, WCAG 2.0 officially states that visitors must be able to resize all text on a page to up to 200% of its original size.
UX Design is a Big Topic
Of course, all the mentioned points could be discussed much further, exploring the countless ways to enhance user experience.
The point here is that when focusing user attention, we are designing with empathy. We're considering how to reduce noise, eliminate friction, and provide users with a better experience. That empathy necessarily includes all users: those with difficult seeing, with hearing, with different levels of motor skills, and more.
During your next product or project, we hope you find this brief summary as a helpful reference when considering how to focus user attention. Part of the inherent beauty of well-designed interfaces comes not just from their aesthetics, but also from their availability to everyone.
Cover photo by Nicholas Doherty on Unsplash
