UI Controls - w-edge.com Controls.pdfNote to link to the MSI/CSS pages See also: Constructing Labels Field Highlighting Label Guidelines Long Forms UI Controls | UI Cookbook Checkboxes

1

UI ControlsAction Links | Auto-Save | Badges | Buttons | Calendar Picker with Time | Calendar –Single Date | Calendar with Date Range | Checkboxes | Context Menu | Dialog withOverlay | Display Quantity | Drop-Down Button | Drop-Down List | Destructive Button |Facet Filtering | Hyperlinks | Inline Expand | List Builder | Look Up Widget | ManualSave | Modeless Dialog | Page Up Control | Persistent Table Header | Radio Buttons |Results List Filter Bar | Sidebar Toggle | Split Button | Stand-Alone Checkbox | StandardIcons | Text Box | Workspace Action Bar

Text BoxAlso called Text Input Field, Editable Text Field

What Problem Does This Solve?

User needs visual indication of which text can be edited and which cannot.

Solution

Use a text box for free-form user input. Ensure that the length of a text input field comfortably accommodates the

length of the expected input. The length of a text input field helps users gaugewhether they’re inputting the appropriate information.

Use black text to indicate the editable state. Indicate where the user is, especially in longer forms, highlight the input control

group that is active with a highlight. Prefer controls that you have already used on the form if you are not sure which

control to use. Be consistent. Use a look up widget to help the user give an answer and prevent errors.

2

Sample Widget

Editable Fields in Vertical Form Layout

Editable Fields in Inline Form Layout

Highlighted Field

Field is highlighted indicating editing is enabled. Cursor displays in field.

Non-Editable or Read-Only Fields

Field box is grayed out indicating it is not editable. User cannot click into any fields.

3

Labels

A label helps users understand what type of information they should enter. Text boxes are labeled above or to the left. Keep the input control text clear and short.

Element Capitalization Style ExamplesControl Labels /Field Labels Title case

BoldNo period (.)No colon (:)

Template NameApply Order Template

Interaction

User is filling out a form. User clicks into text box and enters information. User saves work.

When to Use This Pattern

Any text or fields that user is expected to edit or enter.

UI Specifications

Note to link to the MSI/CSS pages

See also:

Constructing Labels Field Highlighting Label Guidelines Long Forms

UI Controls | UI Cookbook

Checkboxes


User can choose any number of choices from predefined alternatives. The number of choices of is not large. Choices don’t affect other choices.

4

Solution

Stack checkboxes vertically, not horizontally. When checkboxes are arrangedvertically, it’s easier for users to distinguish one state from another.

Use a checkbox when you want to allow users to choose between two oppositestates, actions, or values.

Use the alignment of a group of checkboxes to show how they’re related. Use checkboxes, instead of radio buttons, to display a set of choices from which

the user can choose more than one at the same time. Associate input labels with input controls. Indicate where the user is, especially in longer forms, highlight the input control


control to use. Be consistent. Keep the controls static – don’t perform commands when options are being

selected.

Sample Widget

Labels

Keep the input control text clear and short. Label all check box options. Use the alignment of a group of checkboxes to show how they’re related. Provide a label for each checkbox that clearly implies two opposite states. The

label should make it clear what happens when the option is selected ordeselected.

Use positive phrasing for labels to make it easier to understand what it meanswhen it is checked.

Keep the check box label to a single line. If the option needs more explanation,include instructional text below the option.

Within instructional text, use "select" and "deselect" for single check boxes and"clear" for deselecting several check boxes at the same time.

Element Capitalization Style ExamplesControls Labels forCheckboxes

Sentence caseNot BoldNo punctuation

Mask passwordSelected as part of collection

5

Remember me

Interaction

User is filling out a form. User clicks a checkbox next to desired value. User clicks Save button.


User can choose any number of choices from predefined alternatives. The number of choices is not large. Choices don’t affect other choices.

UI Specifications


See also:



Stand-Alone Checkbox


There may be two options (usually yes/no style) and user can pick only one. Or, there isonly one option.

Solution

If you need to display a single setting, state, or choice that the user can eitheraccept or reject, don’t use a single radio button; instead you can use acheckbox.

Associate input labels with input controls. Indicate where the user is, especially in longer forms, highlight the input control

group that is active with a highlight.

6

Prefer controls that you have already used on the form if you are not sure whichcontrol to use. Be consistent.

Keep the controls static – don’t perform commands when options are beingselected.

Sample Widget

Labels

Check boxes, command buttons, group boxes, links, tabs, and progressivedisclosure controls are labeled directly by the control itself.

Keep the input control text clear and short. Use positive phrasing for labels to make it easier to understand what it means

when it is checked. Keep the check box label to a single line. If the option needs more explanation,

include instructional text below the option.




Remember me

Interaction

User is enters username into field. User is enters password into field. User clicks checkbox on “Remember me”. User clicks Sign In button.


There may be two options (usually yes/no style) and user can pick only one. Or there isonly one option.

7

UI Specifications


See also:



Radio Buttons


User can choose only one option from a list of two or more options.

Solution

Stack radio buttons vertically, not horizontally. Use radio buttons when you need to display a set of choices from which the user

can choose only one. Use radio buttons to display a set of mutually exclusive, but related, choices. Don’t use a radio button to initiate an action. Associate input labels with input controls. Indicate where the user is, especially in longer forms, highlight the input control


control to use. Be consistent. Keep the controls static – don’t perform commands when options are being

selected. Make one of the options a default answer. Provide neutral/empty answer to allow the user to cancel the selection. Place the label text after the radio button control, not before or above it.

Sample Widget

8

Labels

Check boxes, command buttons, group boxes, links, tabs, radio buttons andprogressive disclosure controls are labeled directly by the control itself.

Keep the input control text clear and short. For lists of labels, such as radio buttons, use parallel phrasing and try to keep the

length about the same for all labels. Give each radio button a text label that describes the choice it represents. Users

need to know precisely what they’re choosing when they select a radio button.

Element Capitalization Style ExamplesControl Labels for RadioButtons

Title caseNot BoldNo period (.)No colon (:)

In Use, Not in Use

Document Delivery, OpenAccess

Interaction

User is filling out a form. User clicks radio button next to the label of “Deliver Contents to Home Address”. User clicks Save button.

Accessibility

Windows: A group of radio buttons behaves like a single control when accessedvia the keyboard.

Only the selected choice is accessible using the Tab key but users can cyclethrough the group using arrow keys.


User can choose only one option from a list of two or more options.

UI Specifications


See also:



9

Calendar – Single Date


Entering an eight-digit number is time consuming. A number is also detached from the concept of ‘month’ and can lead to

mistakes. Another issue is the cognitive load of remembering the order in which to enter a

date: day, month, year, or month, day, year.

Solution

Indicate where the user is, especially in longer forms, by highlighting the inputcontrol so that it looks active.

Allow users to type in the date if they wish to do so. Offer choice of using a visual calendar. Change the cursor when the user rolls-over the icon. For example, to indicate a

click, change the cursor to a hand. Invite the user to click the icon providing a tooltip when the mouse is over the

text the user wants to edit, like “Calendar”. Allow user to double click the date on the control and the date field is

populated.

Sample Widget

Empty Date Field

Open Calendar

10

Completed Calendar Field

Labels

Element Capitalization Style ExamplesControl/Field Labels Title case



Interaction

User clicks on the calendar icon: calendar widget opens. Top left edge ofcalendar should line up over top left edge of icon. (0/0 of calendar aligns with0/0 of icon).

The present date is highlighted with a light blue background. Hover over a date and it displays with a dark blue background. User clicks the desired date, and calendar closes. Field is populated with the date.

Rationale

A calendar offers a complete visual representation of a date and reduces clicks. Familiar, fast to use and flexible


With all date fields

UI Specifications


11

See also:

Field Highlighting Invitations Standard Icons Tooltip Invitations


Calendar with Date Range


A date range needs to be described.

Solution

Incorporate a start and end date field either using a preset period pull-down, ornot.


Offer choice of using a visual calendar. Change the cursor when the user rolls-over the icon. For example, to indicate a


text the user wants to edit, like “Calendar”.

Sample Widget

Date Range - Horizontal Format

Date Range - Horizontal Format

12

Date Range - Vertical Format

Opened Calendar

Completed Date Range

13

Labels

Element Capitalization Style ExamplesControl/Field Labels Title case



Interaction

Start date is already populated with today’s date. If user wished to change start date:

Use clicks on the calendar icon: calendar widget opens. Top left edge ofcalendar should line up over top left edge of icon. (0/0 of calendar aligns with0/0 of icon).

The present date is highlighted with a light blue background. Hover over a date and it displays with a dark blue background. User clicks the desired date and calendar closes. User chooses the preset period from drop-down list. End date will automatically be filled in.

Rationale

A visual selection of date is more accurate. Familiar, fast to use and flexible.


When a date range must be indicated.

UI Specifications

Axure Artwork (http://intranet.oclcpica.org/files/UX_Design/Calendar-artwork.rp) Note to link to the MSI/CSS pages

See also:

Drop-Down List Field Highlighting Forms Invitations Long Forms Standard Icons Tooltip Invitations


14

Calendar Picker with Time


Users need to enter dates and times with minimal thought or effort on their part, andwith minimal chance for errors.

Solution


Offer choice of using a visual calendar. Change the cursor when the user rolls-over the icon. For example, to indicate a


text the user wants to edit, like “Calendar with time”. Provide mechanisms that allow the user to select dates and times. Allow the user to provide the date or time in a way that minimizes the amount of

thinking and/or effort required.

Sample Widget

Calendar with Time - Inline Format

Sample Widget for Vertical Format

15

Labels

Element Capitalization Style ExamplesControl /Field Labels Title case



Interaction

User clicks on the calendar icon: calendar widget opens. Top left edge ofcalendar should line up over top left edge of icon. (0/0 of calendar aligns with0/0 of icon).

The present date is highlighted with a light blue background. Hover over a date and it displays with a dark blue background. User changes the time. User clicks the desired date, selects the time and clicks the Select button.

Calendar closes. End date and time is automatically filled in.

Rationale

There are many different ways to represent date and time, none of them beingstandard.

There can be no universal standard representation and data entry for date andtime because the appropriateness of any given date/time representation is to alarge degree a function of what is being accomplished, in addition to moreobvious considerations such as geographic-cultural norms.

If users are forced to use unfamiliar formats or syntax for date and time entry, oreven familiar formats that don’t relate well to what the user is trying toaccomplish, errors and frustration by the user becomes more likely.


Use when users need to enter dates and times with minimal thought or effort on theirpart, and with minimal chance for errors.

UI Specifications


See also:

Standard Icons Long Forms

16

Field Highlighting Invitations Tooltip Invitations


Action Links


You have several commands that you need to display together or want toindicate command precedence visually.

If you’re strapped for space, use links instead of buttons.

Solution

Use a link instead of a button. Focus action link labels on helping users make the right decision. Use positive phrasing. Don't use group labels for multiple action links. Using verbs in labels on action links makes the screens more usable because the

labels contain all of the information the user needs to be able to make adecision. All the information is contained in the action link labels.

Use wording that describes the action that the action link represents. Use three or fewer words in the label. If the label needs further explanation,

provide the details in a tooltip. Always present action links in a set of two or more. Logically, there is no reason to

ask a question that has only one answer.

Sample Widget

Labels

Element Capitalization Style ExamplesAction Links & Hyperlinks Title case

Not boldEdit SettingsAdd Item

17

No period (.)No colon (:)

Add Multipart SetHoldings View

Interaction

User enters Nature into search field. Collections for Nature display. User selects desired collection and clicks Order button. User selects an order to add the collection to. User clicks the Select All link and buttons on page enable.

Rationale

Use links instead of buttons to minimize visual noise, conserve screen real estate,or to contrast with buttons to indicate importance or precedence.

Link commands can also conserve space, both horizontally and vertically, so ifyou’re strapped for space, they can save room.

One thing to be careful of is that many people perceive links as purelynavigational or at least assume they’re mostly harmless. If you use them forcommands, be sure that the commands are mostly harmless, are easilyundoable, or if you do nothing else, at least prompt for confirmation on suchcommands.

Since users perceive links as purely navigational, add a tooltip to the linkdescribing its action, like “Report Missing Item”.

When it comes to command precedence, using links is a great way to visuallysubdue certain commands so that standard button commands stand out more.Because links are text and tend to blend into their surroundings (more so fortextual contexts, obviously), you can use them to mute certain commands whilesimultaneously emphasizing others, which is good for communicating the PrimaryAction.


You have several commands that you need to display together or want toindicate command precedence visually.

If you’re strapped for space, use links instead of buttons.

UI Specifications


See also:

Field Highlighting

18

Inline Forms Invitations Long Forms Standard Icons Tooltip Invitations


Drop-Down Button


The user needs to select an item out of a set of items There is one action that is more commonly used than the rest. The number of commands is not large -- not more than seven.

Solution

Use a button with an indicator that, when selected, shows more commandsrelated to the primary command.

Determine if you have a viable candidate for a primary command and that youhave alternatives or related commands that could be grouped “under” it.

Use a regular button for the primary command and then add an indicator(usually a triangle pointing downwards is best) to the side or below the primarycommand.

When the indicator is selected, display a one-level menu by the indicator (usuallyjust below it) that has the secondary commands displayed. Ordering ofsecondary commands could be alphabetical, but if you know that certain onesare more commonly used than others, then ordering them according to usage isbest.

Drop-down button items should all follow a similar structure (verb + subject +object) and, if possible, the items should be singular or plural. So, you wouldn’twant Select record and Delete records in the same menu item if they are allactions that are being performed on one record.

19

Sample Widget

Labels

Element Capitalization Style ExamplesDrop-Down ButtonDrop-Down Button List Items

Title caseNo period (.)No colon (:)

Record ActionsChange Material TypeAdd to Export List

Interaction

User enters term into search field. Search results display. User selects item from results and clicks the Edit Actions drop-down button. Actions display in a list. User selects desired action.

Rationale

This pattern functions as a sort of context menu for a button. Because of that, itsuffers the similar caveat of requiring users to ask for available commands, ratherthan showing them; however, if you provide a good affordance (such as a downarrow resembling down arrows on a drop-down list), there’s a good chance the

20

user will inquire, unlike context menus triggered by invisible commands like right-clicks.

It works best when there is a single, primary command that users will want to usemost of the time, which of course implies that you know what that would be. It’salso important that the commands be related, which could mean they act onthe same target or they are variations of the same command.

If you have multiple primary actions, consider using regular buttons for all theprimaries and tucking the secondary actions into the drop-down buttonbecause having to click twice for a common command is irritating.

If the commands are not related to the primary action, the user may not bemotivated to explore there to find the command they are looking for.

An alternative to this, assuming minimal space constraints, is primary actionwhere you use visual emphasis to achieve similar effects of reducing visualburden.


The items need considerable space to display. At the same time the space for the items is limited. Typically only enough for 5-8 items. Do not use for more than 3x times the amount of items that are visible at one

time.

UI Specifications


See also:

Buttons Context Menu Drop-Down List Primary & Secondary Actions Workspace Action Bar Workspace


Workspace Action Bar

21


User needs a method of taking one of numerous possible actions against arecord.

There are so many actions that need to be accessed and placing them all onthe screen as individual icons or buttons will overload the UI.

As the user scrolls down the table, she cannot see or use the controls unless shescrolls all the way back to the top.

Solution

Offer often-used and nested sub-action choices. Use a series of drop-down buttons or drop-down lists under which like-actions

can be placed. As users scroll down the table, the persistent action bar stays with the user so that

they have all the controls they need without having to scroll all the way back tothe top of the page.

Place an always-visible action bar with controls at a fixed position on the top ofthe page.

Sample Widget

Without Previous and Next Arrows

22

Future Design with Previous and Next Arrows

Labels

Element Capitalization Style ExamplesDrop-Down ButtonDrop-Down Button List Items

Title caseNo period (.)No colon (:)

Record ActionsChange Material TypeAdd to Export List

Future Design with Arrows

Place an always-visible action bar with controls at a fixed position on the top ofthe page. The design includes number of records and Previous and Next arrowsallowing the user to advance through records.

Interaction

The menu has a 200ms delay upon rollover, and roll-off before menuappears/disappears.

Text roll-over = As cursor rolls over each menu item, a gray background willhighlight the entry. (Consult with UI group spec.)

Where there are sub-menu items, an arrow is displayed on the right side of themenu box.

Settings: For menu items that act as a setting, the active setting text is displayedin green, with a check to the left of it.

Menu item is chosen by rolling cursor over it, then releasing cursor.

Inactive Menu Items

Menu item text is gray. A gray background will highlight the entry as cursor rollsover it. (Consult with UI group spec)

23

Sub-menu entry is same inactive gray, with a gray rollover background. Settings: Any menu item that is a setting will be display in inactive gray, with a

gray check to the left of it.

Rationale

Commonly used actions are presented as buttons, but offering all possiblechoices on the screen as a button would generate visual overload andconfusion.

The screen would be overcrowded if all actions were placed at the top-level onthe screen.

The persistent action bar stays with the user so that they can refer to it withouthaving to scroll all the way back to the top.


When there are more actions than can be easily and quickly distinguished, or when theactions are not performed at great repetition.

UI Specifications


See also:

Buttons Drop-Down Button Drop-Down List Tables Field Highlighting Persistent Table Header Primary & Secondary Actions Workspace


Drop-Down ListAlso known as Look Up Widget, Pull-Down Menu, Pull-Down List


The page or form can become busy with so many elements that it is difficult tofind and concentrate on what is important.

24

Use a list to display an arbitrarily large number of items from which users canchoose.

Similar to a group of radio buttons, but saves screen real estate if there areseveral options from which to choose.

Solution

Place most commonly used items at top of list. Allow user to select item. Keep visual elements to a minimum. Drop-down list items should all follow a similar structure (verb + subject + object)

and, if possible, the items should be singular or plural. So, you wouldn’t wantSelect record and Delete records in the same menu item if they are all actionsthat are being performed on one record.

Pre-fill a drop-down list with prompt text that tells the user what to do or type.

Sample Widget

Labels

Drop-down lists and text boxes are labeled above or to the left. In general, provide an introductory label for a scrolling list. A label helps users

understand the types of items that are available to them. Keep the input control text clear and short.

Element Capitalization Style Examples

25

Drop-Down List HeaderDrop-Down List Items

Title caseNot boldNo period (.)No colon (:)

Template NameApply Order TemplateMaterial Type

Interaction

User enters term into search field. Search results display. User selects item from results and clicks the drop-down list. Actions display in a list. User selects the desired action.

Rationale

Reduces time to target by placing most frequently used items at top of user’slists.

Low screen real estate usage. Pages with fewer visual elements are more manageable and understandable.


Similar to radio buttons, but saves screen real-estate if there are several options fromwhich to choose.

Visual

Place top four most frequently used items at top. Followed by complete list (includes the items that have been placed in most

commonly used section.

UI Specifications

Axure Artwork (http://intranet.oclcpica.org/files/UX_Design/lookup-widget.rp) Note to link to the MSI/CSS pages

See also:

Constructing Labels Drop-Down Button Field Highlighting Label Guidelines Look Up Widget Radio Buttons Search


26

Persistent Table HeaderAlso called Fixed Table Header


The user needs to know what the information they’re looking at is without seeingthe column header.

• User needs a method of taking one of numerous possible actions against arecord.

• There are so many actions that need to be accessed and placing them all onthe screen as individual icons or buttons will overload the UI.

• As the user scrolls down the table, she cannot see or use the controls unless shescrolls all the way back to the top.

Solution

As users scroll down the table, the persistent column header stays with the user sothat they can refer to it without having to scroll all the way back to the top of thepage.

Show the hierarchical path from the top level to the current page and makeeach step clickable.

Place an always-visible header at a fixed position on the page. Support this mainmenu with additional navigation tools.

Sample Widget

Interaction

User scrolls down a table of data.

27

As user scrolls, the header stays in view on the page.

Rationale

The persistent table headers stay with the user so that they can refer to it withouthaving to scroll all the way back to the top.

The users need to know where they are in a hierarchical structure and navigateback to higher levels in the hierarchy.


Use it on fairly large and complex data sets to help users distinguish betweenmany columns.

Use with a large hierarchical information structure, typically more than 3 levelsdeep.

UI Specifications

Axure Artwork - http://intranet.oclcpica.org/files/UX_Design/lookup-widget.rp Note to link to the MSI/CSS pages

See also:

Tables Table Guidelines


Display QuantityAlso known as Fill-in-the-Blanks


When there are a substantial number of search results pages it can becumbersome to navigate through them.

You need to ask the user for input, usually one-line text, a number or a choicefrom a drop-down list.

Solution

Add user-settable view preference mechanism. Order your input fields (be it a text box, radio buttons, checkboxes, or drop-down

list) as if they are part of a sentence.

28

Write a sentence and let the user fill in the blanks of the sentence by selecting orfilling out input fields that are in place of words.

When the input field is not inserted at the end or the beginning of the sentence,it is important for the general readability and understandability of the interfacethat the input fields do not take up more space than the height of one-line text.

Input text boxes, and drop-down lists therefore work the best for this sort ofpattern.

Sample Widget

Labels

Element Capitalization Style ExamplesDrop-Down List HeaderDrop-Down List Items



Static, Supplemental, HelpText (UI text)

Sentence case: Capitalize firstword of each sentenceNot boldUse ending punctuation

Add title to one of the openapproval plans below by usingthe [+] sign

Display item in WorldCat Local

Show n rows per page

Results n-n of n

Held by my library n librariesown this item

29

Interaction

User enters "Nature" into the Search field. User clicks Search button. Search results display. User selects 25 from the Show drop-down list. Twenty-five rows of search results display on the page.

Rationale

This pattern helps make the interface self-explanatory. Seeing the input or “blanks,” in the context of a verbal description helps the user

understand what’s going on and what he’s being asked to do.


You need to ask the user for input, usually one-line text, a number or a choicefrom a drop-down list.

You tried to write it out as a set of labels/control pairs, but the labels’ typicaldeclarative style (such as Name and Address) isn’t clear enough for users tounderstand what is being requested.

You can verbally describe the action to be taken once everything’s filled out, inan active voice sentence or phrase.

Search results lists

UI Specifications


See also:

Checkboxes Constructing Labels Drop-Down List Fill-in-the-Blanks Forms Label Guidelines Radio Buttons Results List Filter Bar (Search) Results List Search Text Box UI Text Guidelines

30


List Builder


The users need to build up and manage a list of items.

Solution

Show both the “source” list and the “destination” list on the same page. Let users move items between them via buttons.

Sample Widget

Labels

Element Capitalization Style ExamplesList Builder Header Title case


Available SubjectsSelected Subjects

List Builder Items Title caseNot BoldNo period (.)No colon (:)

AgricultureChemistry

Interaction

User highlights desired item in the Available Subjects list and clicks the singlearrow button.

Item moves to the Selected Subjects list.

31

Rationale

This pattern displays both lists on the same page for the user to see. It also prevents the user from having to scroll down a long list of items.


The user wants to create a list of items by choosing them from another list. The list may be long – too long to easily show as a set of checkboxes.

UI Specifications

Link to icons (Fiz) Note to link to the MSI/CSS pages

See also:

Checkboxes Standard Icons


Auto-Save


Unexpected events happen that can make users lose their work.

Solution

Automatically save data at predetermined intervals. Allow users to configure Auto-Save to “save” at specified intervals.

Interaction

No interaction.

Rationale

Saves work Saves time Reduces user downtime Makes users happy

32


Always

UI Specifications



Manual Save


User needs a way to save their work or a task.

Solution

Allow the user to click a button to save the completed task.

Sample Widget

Label

Element Capitalization Style ExamplesButtons Title case

BoldCreate CopyDeleteOutstanding ItemsRecord ActionsSave

Tooltips On a button or icon:Use initial capNot boldNo ending punctuation

On a statement (text):Use sentence capitalizationNot boldNo ending punctuation

Save Fund

Add Fund

Click to expand field

Export results as CSV

33

Interaction

User clicks the Edit icon in the desired field. User clicks into the field and changes value. User clicks the Save button. Record is saved.

Rationale

User needs a way to save their work or task.


When user completes a task. When user makes a change to something.

UI Specifications


See also:

Buttons Primary & Secondary Actions Standard Icons


Context MenuAlso called Contextual Right-Click, Hover Tools, Drop-Down Button


User needs to perform actions on an item but there is limited screen space.

Solution

This order provides efficiency and predictability: Most frequently-used actions first(primary commands), transfer commands next, and properties last.

Keep command names short to avoid truncation. The context menu has amaximum width that equates to approximately 50 characters.

Use a context menu if you need to display more than five items. Show the fewest number of commands possible, up to the six-command limit.

34

Place the menu of actions close to the items the user acts upon but hide themuntil the user hovers the pointer over them.

The context menu should be positioned close to the object or selection that it isacting on. When showing the context menu, provide a rectangle for the objectthat it will be acting on, and the context menu will position itself near it. Bydefault, a context menu should be centered above the object that it is actingon.

Enable menu to activate by holding down the mouse for about one second. Thisprovides a more accessible approach to displaying menu.

Sample Widget

Labels

Element Capitalization Style ExamplesContext Menu List Items Title case

Not boldNo period (.)No colon (:)

Open Link in New TabOpen Link in New WindowSave Link As…Copy Link Location

Interaction

User rolls over item on page. Mouse pointer changes to a hand indicatinginteraction.

User right clicks on item exposing commands to act upon item.

Rationale

Context menu tools reveal themselves exactly when and where they areneeded.

Hiding tools until they are needed allows the screen to remain clean anduncluttered.

35

They appear when the user requests them and by appearing in response to theuser’s gesture, they draw attention to themselves.


On all pages

UI Specifications


See also:

Commit Button Labels Constructing Labels Drop-Down Button Invitations Primary & Secondary Actions Standard Commands for Buttons & Action Links


Sidebar ToggleAlso known as Disclosure Arrow


User needs more room in the Workspace area to view information.

Solution

Use an arrow to allow the user to hide and then show the Workspace navigation. Add tooltips on the expand/collapse arrows that open and close the panels, like

“Show sidebar” and “Hide sidebar”.

36

Sample Widget

Sidebar Open

Sidebar Closed

Interaction

By default, the sidebar is open. User hovers over arrow. Tooltip “Hide sidebar” displays. User clicks arrow to close

sidebar. Clicking again on arrow opens it.

37

Rationale

As a rule, people like to adjust their environment to suit their needs and tastes,especially when they are going to spend a lot of time there.

Using the sidebar toggle allows people do this, and in doing so, they can takebetter advantage of their spatial memory to more effectively and comfortablyuse the software.

Accessibility

Provide ALT tags that preview what will happen when the user engages an interaction.For example, if you can close a panel and provide a way to communicate where thepanel is collapsed to, you might consider putting text in the ALT tag for the image thattells the user what will happen when the click/activate the close icon and how theycan get the panel open again.


On all pages.

UI Specifications

Link to icons Note to link to the MSI/CSS pages

See also:

Standard Icons Tooltip Invitations Workspace Workspace Navigation


Facet Filtering


User wants to filter out search results based on categories.

Solution

Help users find what they want by providing them with various facets that theycan use to filter a result set.

38

A link is the simplest mode of filter selection. By clicking a link, a user can eitherselect a single value for a specific filter or drill down a level in a taxonomy, like acategory hierarchy. Links are great where users need to display multiple levels ina hierarchy.

Check boxes allow users indicate parallel selections of multiple filter values,limiting the scope of search results to those that match them. Check boxes aregreat for selecting one or more options for attributes like brands or sizes.

Provide undo for filter selections. Use the deselect-to-undo paradigmsuccessfully.

Always make all filters easily available. It is perfectly acceptable to collapse filtersto just a label, providing a single link like “View All Filters”, or to display previouslyselected filtering options in a unique way.

Sample Widget

Labels




Remember me

Control /Field Labels Title caseBoldNo period (.)No colon (:)


Drop-Down List HeaderDrop-Down List Items



39

Interaction

User clicks on Outstanding Items button is Workspace navigation. Items display. User clicks into Content Type drop-down filter. User selects Book. The Items list

filters results to display only “books”. User selects Received drop-down filter. User selects a Finished. The items list filters

to display only “received books.”

Rationale

This pattern is more to find something than to analyze data, and it is often usedas a way to navigate a catalog of information.

This is sort of the inverse of the common “Advanced Search” screen, and it isbetter because it doesn’t require the user to know or specify these details upfront.

It is encouraging and usually optional because users are not confronted with abig, complex form they have to fill out in order to start exploring the data and, ifimplemented well, it actually encourages more exploration by fast updatingbased on progressive facet selection.


You have a large set of information, too large for a person to easily sift throughwithout being able to narrow it down.

Your information shares a set of common facets that they could be filtered by. The facets you have are easily understandable by the users and are something

they would likely want to filter based on. Your users don’t prefer to navigate this kind of information in another way.

UI Specifications


See also:

Action Links Checkboxes Drop-Down List Results List Filter Bar (Search) Results List Search Table Filter


40

Standard IconsTask Clickable Non-clickable Suggested TooltipDelete, Remove “Delete [Item]” or

“Remove [Item]”Add “Add [Item]”Edit “Edit [Item]”Refresh “Refresh”Date Picker, Calendar “Calendar”Time “Time”Help “Help”Information “Information”Confirmation “Confirmation” or

“Success”Alert, Warning “Warning”Rejection “Reject” or

“Unavailable”Attachment “Attachment”Preferences/Settings “Preferences” or

“Settings”Search “Search”Institution “Institution”Edit Note “Edit note”Add Note “Add note”Date/Time Picker “Calendar with time”Open, Share “Open” or “Share”Batch-enabledProcess / Edit Multiple

“Edit Multiple Items”

Database “Database”

Delete “Delete [Item]”Application HeaderToggle Left “Hide” or “Close”Toggle Right “Open” or “Show”Developer Tools “Developer tools”Dashboard “Dashboard”User MenuGeneral Help “General Help”Email Support “Email Support”Branch “Branch”Language “Language”

Logout “Logout”Paginator Icons

Refresh “Refresh”

Go back to “Go back to

41

Advanced Search Advanced Search”Download “Download”Jump to Start “Jump to start”Previous “Previous”Next “Next”Jump to End “Jump to end”Multi Selection Lists

Add “Add”Add All “Add all”

Remove “Remove”Remove All “Remove all”

Static Icons

Non-clickable icons can communicate a status visually. These can be used forindicating status or other additional information. These icons can be further enhancedby adding tooltips to progressively disclose more information.

UI Specifications


See also:

Progressive Disclosure Tooltip Invitations


Icon Menu


Users need so make a selection out of a limited set of items.

42

Solution

Allow users to select a menu item by selecting an image and display the label ina fixed location and limited space.

The icons are lined up or placed into a convenient configuration (e.g., 3 by 3 ornext to each other). Users can move the focus or mouse-pointer over theseicons. The selected icon is highlighted. It also has a label or tooltip that displaysin the 'label-area,' which is usually above or below the icons.

The number of commands should be small, usually no more than three or four. Use icons to minimize visual noise, conserve screen real estate, or to contrast with

buttons to indicate importance or precedence. Use a tooltip to tell user what icon does.

Sample Widget

Interaction

User rolls-over an icon. Tooltip displays. User clicks icon. Print dialog displays.

Rationale

Putting related icons in a visual grouping uses the innate human mechanisms ofassociation by proximity.

Ensuring they’re related and possibly act on the same or similar objects helps toreduce any possible confusion.

Because icons tend to be strong visual elements, a group of them is stronger andis likely to stand out more than individually placed icons, which helps users to findthem.

If you have more than a few icons, the value of the grouping is reduced as thedisplay will get cluttered and be harder for users to figure out what they want todo.


The space for the menu is limited or when icons can be used effectively.

UI Specifications


43

See also:

Constructing Labels Label Guidelines Standard Icons Tooltip Invitations

UI Controls | UX Library Home

Badges


User needs a quick visual identification for numeric values such as quantities.

Solution

Use a Badge for counts -- they should only contain numbers. Badges can be used before or after the name or label of the thing they quantify

but the more common pattern is after the object name. Always use badges individually. Use tooltips to enhance the user’s understanding, for example to indicate units.

Sample Widget

Interaction

User hovers cursor over Alert badge. A tooltip displays notifying user of the number of unread alerts.

Rationale

Use a badge for counts -- they should only contain numbers. Badges can be used before or after the name or label of the thing they quantify

but the more common pattern is after the object name.

44


Use when you want to notify the user of summary or status information specific to theapplication.

UI Specifications


See also:

Tooltip Invitations


Documents

UI Controls - w-edge.com Controls.pdfNote to link to the MSI/CSS pages See also: Constructing Labels Field Highlighting Label Guidelines Long Forms UI Controls | UI Cookbook Checkboxes