Patterns
When we design with consistent patterns — time-tested solutions to recurring design problems — users trust our products. Consistency creates familiarity, stability, and security.
Grid
Bootstrap
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.
Do:
- 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)
“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
Capitalization
We strive to write friendly, accessible content to express the UNOS brand. Consistent capitalization reinforces trust.
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
LEARN MORE ABOUT TRANSNETSM
Offer filters pilot closed October 2
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
Exception: All caps labels used as section titles on unos.org
General strategies
Do:
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.
Exceptions:
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
becomes
saving lives together
.text-lowercase::first-letter { text-transform: uppercase; }
SAVING LIVES TOGETHER
becomes
saving lives together
Numbers in UI
Recommended reading
Jacob Nielsen’s best practices for using numerals when writing for online readers.
Do:
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.
Exceptions:
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.
Buttons & links
General strategies
Do:
- 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
Don't:
- 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
Web styling for buttons & links
Hover state: text-blue-8
Visited link state: text-purple-5
Items designated for UNOS.org. 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.
Initial and active states: fill-blue-5 (filled)
Hover state: fill-green-6 (filled)
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.
Organ donation facts helps the user know what she'll find.
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:
Back
Intent and purpose: Use Back to help a user navigate to the most recent action that they came from (e.g. a wizard process).
Cancel
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.
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.
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.
Cancel
Lists
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:
Unordered
- Keep list items about the same length
- Use parallel sentence construction
- Avoid repeating the same beginning word
- Keep formatting consistent
Ordered
Use numbered lists only when the sequence of events is important.
Recommended reading
Jacob Nielsen’s top 10 recommendations for form design
Labels
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.
Grouping
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.
<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.).
Accessibility
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.
Buttons
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.
Calendar
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.
Validation
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.
<invalid-feedback>
<invalid-feedback>
<invalid-feedback>
Wizards
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)
Tables
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 |
Guidelines
- 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.
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)
Notifications
These can include:
- Reminders
- Information messages
- Success confirmations
- Patient safety alerts
- System announcements
Confirmations
There are two types of confirmations:
- User action required — user must respond yes/no, save/cancel, etc to proceed
- No user action required — but important to workflow
Errors
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.
Feedback
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.
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.
References: https://getbootstrap.com/docs/4.1/components/alerts/
Tooltips
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
Reference: https://getbootstrap.com/docs/4.1/components/tooltips/
General strategies
Do:
- Keep content brief
- Use sentence fragments
- Use tooltip arrows to clearly mark which icon or content the tooltip explains
Don't:
- Obscure important content with the tooltip modal
Controls
Collapsible content
Toggles the visibility of content to provide additional resources to the user. Controls should be used moderately.
Rules
Use a combination of our custom CDN, Bootstrap and JavaScript.
| Initial 01/01/2021 18:00 |
Latest 01/01/2021 18:15 |
|
|---|---|---|
|
Na
mEq/L
|
130 | 140 |
|
K+
mmol/L
|
3.5 | 4.5 |
|
Cl
mmol/L
|
3.5 | 4.5 |
Rules
Use a combination of our custom CDN, Bootstrap and JavaScript.
Patterns
- 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-blackoverlay with a 50% opacity on the stage to prohibit a user from doing any other actions
