Image: Icon of cube

When we design with consistent patterns — time-tested solutions to recurring design problems — users trust our products. Consistency creates familiarity, stability, and security.


An open-source front-end framework for developing responsive, mobile first projects on the web using HTML; cascading style sheets, or CSS; and JavaScriipt, or JS.

CDN integration

Content distribution network, or CDN, is a system of computers that allows for the quick transfer of assets required to load information on the web using examples like HTML, JS, CSS, images, and videos. The goal of the CDN is distribution, speed and delivery. Advantages are consistent libraries used and patterns identified for development purposes.

Navigation helps users explore a website or application and find what they need. Too many navigation items can overwhelm users. On the other hand, too few categories can be vague and misleading.


  • Create meaningful labels
  • Keep menu items short and sweet
  • Group thematic items together
  • Use sentence casing
  • Place most popular items at top of list
  • Test your navigation with 5-7 users

Special considerations for mobile:

  • Use clear fonts with enough contrast
  • Include search into your navigation
  • Use the “hamburger” icon to indicate the nav menu
  • Design for touch (see image below)

Design for touch

Most users can comfortably and reliably hit a 10 × 10-millimeter touch target.

Image: UXmag designing for touch

(Image: UXmag)

Image: Designing for touch average finger size

“A little thing like capitalization can actually be a big deal. Capitalization affects readability, comprehension, and usability. It even impacts how people view your brand.”

— John Saito


We strive to write friendly, accessible content to express the UNOS brand. Consistent capitalization reinforces trust.

Image: inconsistent capitalization

Inconsistent capitalization looks confusing and unprofessional

Title and sentence casing

There are two main styles of capitalization: title and sentence. At UNOS, we use sentence casing. It conveys a friendly, approachable tone. Here are some examples of each:

Sentence casing

Only the first initial of the first word is capitalized, except for proper names:

  • DonorNet MobileSM release adds vital signs and HLA info to donor record
  • UNetSM matches lifesaving organs with the patients who need them

Title casing

Every first initial is capitalized, except prepositions:

  • DonorNet MobileSM Release Adds Vital Signs and HLA Info to Donor Record
  • UNetSM Matches Lifesaving Organs with the Patients Who Need Them

Why do we prefer sentence casing? Because it’s:

  • easier to read
  • friendlier and less formal
  • less ambiguity for development teams

Sentence casing helps developers understand how to capitalize labels, especially long ones. Below, compare the readability of these DonorNet® labels. See how the first is difficult to read but the second label is easier?

According to the OPTN Policy in Effect on the Date of Referral, Does the Donor Have NO Risk Factors for Blood-Borne Disease Transmission:

According to the OPTN policy in effect on the date of referral, does the donor have NO risk factors for blood-borne disease transmission:

All caps

Avoid using all capital letters when possible. Typically, all caps is hard to read and can feel like someone’s shouting at you. Compare:

Learn more about TransNetSM


Offer filters pilot closed October 2


All caps exception

At times, for very short labels, and in very specific contexts, we use all caps to set content apart.

Exception: All caps labels used in DonorNet MobileSM because they are short with white space

Image: All capitalization - DonorNet

Exception: All caps labels used as section titles on

Image: All capitalization -

General strategies


Use sentence casing (see code) for:

  • all headings, and
  • all labels (UNet examples:
    History of cancer:
    Donor highlights:
    Core body temp:
    Other, specify:

Add periods to end of error messages.


Some units of measure require mixed upper and lower case. For example:

  • mmoL
  • mmHg
  • u/L

Code: To force sentence case

.text-lowercase { text-transform: lowercase; }

saving lives together

.text-lowercase::first-letter { text-transform: uppercase; }

saving lives together

Numbers in UI


Public websites. In content on public websites, always spell out numbers 1 – 9.

For example, “A single donor can save up to eight lives.”

Software applications. For user interface copy within software applications, use Arabic numbers (1, 2, 3, etc.). This increases comprehension and reduces ambiguity for users.

Here are some examples:

  • More than 3 tumors are indicated.
  • The number of tumors equals 1.


If the sentence starts with a number 1 – 9, spell out the number. For example:

  • Two tumors are indicated and one or more of the tumors is greater than or equal to 3 cm.

If a phrase, heading or label contains the number zero, spell it out always to avoid ambiguity:

  • Zero tumors indicated on initial application.
  • The number of tumors is zero and alpha-fetoprotein is less than 500.



The footer is the last element of a website or application. It reinforces our brand and includes copyright information and required disclaimers.

Websites. Expanded footers like the one featured on are a good place to include:

  • About UNOS information
  • Contact information
  • Frequently accessed links
  • Our 501(c)(3) designation
  • Sitemap
  • Legal
  • Privacy policy
  • Links to social media

Applications. Within applications, footers should include:

  • Copyright date and notice
    ©2021 United Network for Organ Sharing.
  • A link to our privacy policy
  • OMB information, as necessary
  • Required disclaimers


On mobile devices, footer elements should expand across the entire viewport width and should flow to the bottom of the stage. Footers should not be fixed on mobile devices to allow for content scrolling and maximum viewport.

General strategies


  • Give link text appropriate context
  • Reduce link frequency, and avoid link lists (aka: Link farms)
  • Reserve buttons for calls to action, or CTA, such as taking the user to a signup page or public comment
  • Size: design buttons for touch
  • On OPTN: Use document icons with document links
  • On OPTN: Use exit disclaimers on appropriate links


  • Include punctuation in links
  • Include directional icons at the end of links
  • Format links to take the user to a different domain, if the link appears on the homepage or within featured carousel sections of the site
  • Link headlines
  • Underline links. Underlines are reserved for the hover state
Image: Link states
Initial and active link states: text-blue-5
(View: Color)

Image: Link states - hover

Hover state: text-blue-8

Image: Link states - visited

Visited link state: text-purple-5

Items designated for For specific application models please contact a member of the UX team.

Primary buttons would have the primary call to action, or CTA, which is the most desired action we are encouraging a user to take — so we give it the most visual prominence.

Image: Primary button

Initial and active states: fill-blue-5 (filled)

Image: Primary button - hover

Hover state: fill-green-6 (filled)

Button tags

e.g. Link

Secondary buttons would house a secondary CTA, an alternate action for the user to take.

Image: Secondary button

Initial and active states: fill-blue-5 (outlined)

Image: Secondary button - hover

Hover state: border-green-6 (outlined)

Secondary button tags

e.g. Link

Call to action, or CTA, wording

Help the user understand: use words inside a button that inform user of benefit to clicking. This also improves accessibility, usability, and SEO.

Image: Call to action - correct

Organ donation facts helps the user know what she'll find.

Image: Call to action - incorrect

Learn more is too vague to be helpful or persuasive.

Back vs. Cancel

Whenever choosing between back or cancel, it’s important to think about what the user needs to do next:


Intent and purpose: Use Back to help a user navigate to the most recent action that they came from (e.g. a wizard process).


Intent and purpose: Use Cancel as an emergency exit for users to escape from the action they are presently performing.

Take a closer look

Inside a wizard, a user requests an exception score. This process requires specific criteria. To help the user apply for the exception, we used a wizard design. It walks the user through a complex process in a simple, step-by-step manner. At every step, he or she makes critical decisions.

Image: Wizard back to example
Image: Wizard back to example

Progress or step tracker

Additionally we included a tracker to help the user to clearly identify where they are, what they have done and any steps that may remain.

Image: Wizard step tracker

Differentiate primary from secondary actions

We use contrast to help users quickly understand importance and hierarchy. In the example below, the “Save” button is filled and has a strong color. Your eye zeroes in on this option as the primary or most important action. The “Cancel” link is different and less prominent. This helps users understand that it is a secondary action.



Lists help users read. They break up large blocks of text, simplify complex information, and make key points stand out. Lists help users quickly scan content.

There are two types of lists:


  • Keep list items about the same length
  • Use parallel sentence construction
  • Avoid repeating the same beginning word
  • Keep formatting consistent


Use numbered lists only when the sequence of events is important.

Recommended reading

Jacob Nielsen’s top 10 recommendations for form design


Use the <label> element to identify all form controls, including:

  • text fields
  • checkboxes
  • radio buttons
  • drop-down menus

Labels with text fields

Labels with checkbox

Labels with radio buttons


e.g. with clear function

Labels with select

In specific cases, you can identify form controls using another way (e.g. WAI-ARIA, title attribute etc.).

Language. Keep label language short and concise. Avoid technical jargon.

Capitalization. Use sentence casing; never use title casing or all caps. All caps slows down reading and makes it more difficult to scan.

Placement. Place labels either above the input field (better) or to left of inputs (acceptable). Users complete forms with top labeled fields faster than left-aligned fields.

Placeholder text. Avoid using placeholder text as labels. Place the label above or adjacent to the input field, and supplement with placeholder text within the input.


Use the <fieldset> and <legend> elements to group and associate related form controls.

  • Fieldset contains related form controls
  • Legend provides a heading

Required fields

Indicate required fields with an asterisk (*) or the text “required” directly after the label. If all fields in the form are required, this isn't necessary.

e.g. <sup class="required">Required</sup>

Field length

Use field length as an affordance. The length of the field implies how much data you should enter. Use for fields with a defined character count (like ZIP codes, phone numbers, etc.).


Autofocus the first field by default. This helps users tab through elements in the form in a logical way.

Use labels to describe the purpose of each form control. Screen readers depend on labels to make sense of the form. The for attribute of the label must exactly match the id of the form control.


Avoid Reset and Clear buttons. The risk of accidental deletion outweighs the unlikely need to ‘start over’ on a web form. In forms that collect extremely sensitive input such as financial information, provide a ‘Cancel’ button to support those users who abandon the form and want to delete their information. But make sure that the Cancel button has significantly less visual prominence than the Submit button, to avoid accidental clicks.

Image: Button with cancel sample


Flatpickr calendar control. Lean, extensible date picker with no library dependencies provides the ability to configure a lightweight control that is fully responsive is one of the great benefits of this open source model.

Image: Flatpickr month control sample

(Image: Flatpickr)

Image: Flatpickr year control sample

(Image: Flatpickr)

Image: Custom date control sample


Use inline validation to indicate where the form fails or needs more information. These suggested best practices help aid the user to understand exactly where the error occurs by placing the message in close proximity to the issue.

Address is required e.g. <invalid-feedback>
City is required e.g. <invalid-feedback>
State is required e.g. <invalid-feedback>


Wizards are linear

Wizard contols are a group of smaller forms that make up a series of logical steps or stages and inform users about their progress. Wizards guide users through a step by step process. Each step is related to or dependent upon information entered in previous ones.

Wizards break processes down into smaller chunks of information so that users:

  • Better understand the process
  • Make fewer mistakes
  • Reduce cognitive load
  • Understand where they are in the process

When designing wizards:

  • Use Back links in Wizards to help users return to a previous step.
  • Communicate a clear mental model of the process by displaying a list or a diagram of the steps involved and highlighting the current step.
  • Label steps clearly and provide a clear indicator of the current step to keep users oriented.

(Reference: NN/g)


Use tables only for tabular data; never use tables for layout purposes.

Use headings meant to be read not looked at.

Identify row and column headings.

Left align content with heading labels

Learn more about how to make tables accessible and compliant with Section 508.

Name Address City State
Han 123 Main St San Diego CA
Luke 456 Sand Ln Austin TX
Boba 789 Bounty Ct Provo UT
Darth 000 Galaxy Way Anchorage AK
Image: DonorNet mobile table sample
Image: DonorNet mobile table details sample


  • Be clear. Write the message in concise, human language; avoid jargon and computer code.
  • What’s next. Describe the error and the next action you want users to take.
  • Be polite in error messages — don’t place blame on the user.
  • Include only notifications that are related to the user’s goal.

Modal dialogs

Modal dialogs interrupt a user’s workflow and increase cognitive load. They disable content in the background and force users to take immediate action. Content in modal dialogs should be short and direct. Read more on modals.

Image: Modal password expiration

General strategies for modals

Use modals when you need to:

  • Communicate important warnings, as a way to prevent/correct critical errors
  • User must enter critical information to complete a process
  • To break a complex workflow into simpler — but linear — steps (wizard)
  • To offer decision tree logic that simplifies user’s workflow

Do not use modals for:

  • Non-essential or related information
  • During high-stakes processes like checkouts or account registration
  • Complex decision making that requires additional source of information (links to information away from modal that you need to make a decision)


These can include:

  • Reminders
  • Information messages
  • Success confirmations
  • Patient safety alerts
  • System announcements


There are two types of confirmations:

  1. User action required — user must respond yes/no, save/cancel, etc to proceed
  2. No user action required — but important to workflow


There are three types of errors:

  • Validation — either page-level or system level
  • Action — an action may cause loss of data
  • System — system error

Close option

Bootstrap provides a close option on feedback messages. This is accomplished through the .alert-dismissible class and the alerts JavaScript plugin. By default, we will not enable this.

  • Negative states, particularly important patient safety messages and error messages, should not be easily turned off. We don’t want users to dismiss critical messages by accident.
  • The close option is available as an option for special cases but these instances are the exception, not the rule. The close option may be helpful on reminders that users see frequently and need to be closed to save screen real estate.

Always communicate with the user and indicate system status. Users who save a form need clear feedback from the website or application that he or she has saved successfully. Feedback messages help users know if interactions with an application or website are successful or not.

Progress indicators (throbbers)

When user interface, or UI, provides feedback, you increase the amount of wait time a user is willing to tolerate.

Image: Throbber sample

Feedback levels

Use a combination of our custom CDN and Bootstrap.

  • Success
  • Information
  • Warning
  • Error
  • Patient safety issue
  • Reminder

Feedback messaging with dismissal:

Use a combination of our custom CDN, Bootstrap and JavaScript. Once closed refresh the page to reload.



Tooltips provide additional information to help the user. Tooltips are very short pieces of content (or micro-content).

Is the information necessary for a user to complete a task?

  • If no, use a tooltip
  • If yes, skip the tooltip and keep the content visible


General strategies


  • Keep content brief
  • Use sentence fragments
  • Use tooltip arrows to clearly mark which icon or content the tooltip explains


  • Obscure important content with the tooltip modal


Collapsible content

Toggles the visibility of content to provide additional resources to the user. Controls should be used moderately.


Use a combination of our custom CDN, Bootstrap and JavaScript.

Example: Lab panels
130 140
3.5 4.5
3.5 4.5

Modals & overlays


Use a combination of our custom CDN, Bootstrap and JavaScript.


  • Modals should always include an escape located in the upper right corner of the dialog
  • Include an active title and a brief one sentence directive
  • Follow standard pattern for differentiating primary and secondary actions with links and buttons
  • When possible make sure to use a fill-black overlay with a 50% opacity on the stage to prohibit a user from doing any other actions
Image: Modal password expiration
Read more about
508 compliance
Next up