Blurry classroom
Blurry classroom

UX and UI Design in Gloss

Seeing the forest and the trees at the same time

Gloss Exists to Ensure A Quality User Experience

Building and managing websites for an academic medical system, such as University of Utah Health Care, is complex. We must stay on top of a laundry list of considerations, most of which require specific skillsets and expertise.

We created Gloss in order to ensure a consistent, high-quality experience for everyone using our sites and for everyone building them. Gloss ensures that all of the requirements are met, while providing a single source for troubleshooting, new functionality, and design updates. Gloss was built with solid, well-established UX principles in mind. Here, we've laid out four of the most important, overarching ones.

The four guidelines here are provided to help us design and create better, more user-friendly experiences on our websites and other digital tools. None of these guidelines are specific to a particular user (patient, student, researcher, etc.), but apply to anyone who uses, or might use, our sites.

The four heuristics here can be used to quickly evaluate any of our work to spot areas for improvement with existing, live projects and to help reduce (and hopefully avoid) potential problems with new projects. (Note: although we refer to websites/webpages in these four points, they also apply to other digital tools/projects.)

(These heuristics are heavily influenced by Nielsen Norman Group’s “10 Usability Heuristics for User Interface Design (link goes to an external site).”)

Definitions

heuristics: guidelines and standards used to evaluate our webpages.

navigation: getting around a website (clicking links, scanning content headings, etc.).

UI: user interface; for us, UI means design (visual and functional).

user: anyone using a website.

UX: user experience; how well a site functions for a user.

wayfinding: (see "navigation").

Meet the User Where They Are

Users bring with them their own experience, expectations, language, and capabilities (personal and technological). Follow design conventions. Use words they will understand. Ensure special needs are met. Adapt when areas of confusion present themselves.

Use Simple, Straightforward Language

A user shouldn’t need a dictionary and instruction manual to use our websites. Use easily-understood language and “[make] information appear in a natural and logical order” (Nielsen Norman Group).

We can’t require a patient to learn our countless acronyms, jargon terms, and UUHC-specific language or to navigate within our well-defined, often rigid, institutional structures just to find basic information or accomplish simple tasks. Doing so will only undermine their trust in us. We must be flexible in adapting these things to their ways of thinking.

Use Simple, Straightforward Designs

This applies to design patterns, visual design language, and device use as much as written language. Be judicious with major design changes, especially when common and/or important tasks are involved. The more important the task, the more testing should be done at every stage of design from brainstorming to post-launch.

In this case, “Jakob’s Law” applies as much to our digital systems as our real-world ones: “people spend most of their time using [products and systems] other than yours. [Their] experiences with those other [products and systems] set their expectations.”

Meet Users Where They Are (Even When They Don’t Realize Where They Are)

We humans want the world to make sense and to have order. So we as designers, writers, developers, etc. try to make designs that are “intuitive”* and logical. But, our world is complex, nuanced, and infinitely variable.

In order to “meet them where they are,” we need to understand our users and how they interact within the confines of our particular system and designs. We do this through curiosity, investigation, observation, and, frankly, humility. Then, if we meet them where they are, we will bolster their trust in us and confidence that we are the best ones to help them with what they need.

*Don’t get me started on intuition. Intuition almost never follows logic, common sense, or the natural order. It is, with very few exceptions, instead based on cultural customs, incredibly personal experiences, or seemingly invented on the spot.

Dos and Don'ts

Dos

  • Use easy-to-understand language.
  • Follow universal, established design patterns.
  • Use relatable, personal, and inclusive original imagery.
  • Observe people using our designs to better understand users’ expectations and goals.
  • Make incremental, research-supported design updates.
  • Regularly investigate common journeys/design patterns to ensure continued effectiveness.

Don'ts

  • Use acronyms, jargon, or proprietary words and phrases.
  • Make radical/highly-unconventional design changes around basic, important tasks.
  • Make changes just for the sake of change.
  • Use “that’s the way it’s always been done” as justification to continue doing so.

Make Clear and Reasonable Promises

Everything on a page is a promise. These promises set a user’s expectations for what the page is for and what they can do with it. Clarity always takes priority over aesthetics or style.

Every interactive element (e.g. buttons, links, and form fields), every content heading, every photo makes a promise to a user. Proper labeling, consistent visual design, logical organizational structure, easy-to-understand content, etc. ensure the promises we make match our intentions. Without those things, the user will assume promises based on their unique expectations and experience which will differ from our intentions.

Wayfinding Promises

Wayfinding, or how we navigate a user through our sites toward their goal, makes promises in the mind of a user in ways that are both explicit and subtle.

Dos and Don'ts

Dos

  • Write clear link labels with a clear description of the linked page.
  • Let the primary CTA have its distance: keep other CTAs apart from the primary to maintain its visual weight.
  • Have clear page titles, breadcrumbs (where appropriate), and clearly-delineated navigation menus.

Don'ts

  • Prioritize simplicity over clarity.
  • Overpromise with visual elements, especially imagery.
  • Overload a page with navigation menus and options. (That means, in most contexts, no more than one menu.)

Prioritize User Goals Over Visual Design

Users come to our sites to get something done. Know what those goals are. Ensure each element on a page exists to get the user to their goal as effortlessly and as confidently as possible. Design for design’s sake will frustrate a user and undermine their trust in the site and our system.

Make sure a user’s primary goal on a page is prioritized through the visual design. The components used, their placement, and their visual weight will dictate the ability for a user to complete their task. Any extraneous element added should be considered in the context of helping them accomplish their goals.

Typography, color, layout, and imagery all contribute to or detract from the goal. Each design choice should be first in interest to make the goal-related elements the most visible on the page.

Dos and Don'ts

Dos

  • Focus on a single, well-defined user goal.
  • As necessary, define one or two secondary user goals, ensuring they don’t detract from the primary.
  • Use imagery that complements or supports the text:
    • Use original, captioned photos
    • Use more abstract illustrations/graphics/charts

Don'ts

  • Add design elements that are purely decorative.
  • Use stock photos.
  • Override design system (Gloss) styles.

Mitigate Errors & Help In Recovery When They Happen

Make every effort to eliminate potential errors. When errors do occur, make sure the user knows it and give them a clear, easy-to-understand path out of it.

First, understand where errors commonly occur in the design. Then, design solutions to prevent the errors to start with. However, errors will happen. Provide clear messaging when they do occur: what happened, how to go back, and how to avoid the error again.

Clarity of language and recognizable design and placement are crucial to ensuring the error messaging is helpful and effective.

Dos and Don'ts

Dos

  • Remove ambiguity, especially where and when a user needs to make a choice.
  • Understand common errors: what they are and why they happen.
  • Create clear error messages. Clearly explain:
    • What went wrong
    • How to fix it
  • Provide multiple “escape hatches.”
  • Make clear where a user is at any point in the process.

Don'ts

  • Blame the user.
  • Rely on generic one-size-fits-all error messages/pages.
  • Force users into a funnel.