Summary
- Forms
- Action buttons
- Selections
- Input fields
- Condensed information presentation
Web forms and simple applications
In a Web form the user can enter data to register, change settings, place an order, give feedback etc. You can create a form using different interaction elements, described in detail below.
When you set up a new Web form, it is important to consider what the goal of the form is. Why should a user go through the form?
It is important that you keep the form as short as possible. A form should consist of only the most important fields for accomplishing your goal; nice-to-know information and excessive "options" should be omitted. All ABB Web forms should consist of as many standard html form-elements as possible. To achieve a common visual identity on applications created by different developers, it is important to have a common standard. Adding your own icons, buttons and graphics will in most cases be harmful to the ABB digital brand and make applications overall less user-friendly.
Each field in the form should be introduced by a short explanatory text, telling why the field is there. If not all fields are mandatory, you should mark the mandatory fields with an asterisk (*). The asterisk should be explained as a footnote, with the text: "All fields marked with an asterisk (*) are mandatory."
All interaction elements that are currently unavailable should be greyed out, not removed. A short text can explain why the element is unavailable.
If possible a default value should be available when the user has to decide on a value or select an option. (Not for surveys)
Buttons
WHEN: A button is used to confirm, calculate, add, remove, move to the next or previous step in a process, or to activate a process.
DEFINITION: A button is rectangular, with a text indicating the action it initiates.
EXAMPLE:
SPECIFICATION: HTML Standard. Generally, the width adjusts to fit button text. Text:
Body text. Color:
Light Inside Blue
HOW: The button text should say more than just "OK" or "Cancel", unless there is an explanation of what "OK" means. Titles like "Add to order" or "Step 4: Specifications" are better because they are easier to understand. The button text should consist of maximum 3 words. When used for confirmation/cancellation, two buttons should be placed next to each other, aligned right on the page, with "OK" on the left button and "Cancel" on the right button. Alternatively "Yes" on the left button and "No" on the right, if the user is answering a question.
Radio buttons
WHEN: Radio buttons should be utilized if a user is to choose a single parameter from a fixed list of alternatives.
DEFINITION: A radio button is a round button with a text on the right, indicating the parameter associated with that button. When a button or the text next to it is clicked, a black circle appears inside the button and the option is selected. Selecting another option automatically deselects the previous selection.
EXAMPLE:
Option 1
Option 2
SPECIFICATION: HTML standard. Text:
Body text
HOW: When there is more than one list of radio buttons on a page you should separate them visually, so that choices from one list are not confused with choices from another list.
A list of radio buttons should be organized vertically, one parameter on each line. You can only organize options horizontally if there are less than five options - then they should always be on the same line. Organization of options in several columns should only be used if space is very limited.
If one option is more commonly selected than the others, it can be selected by default. The user can select another option by clicking it. If there is no obvious default option, none of the radio buttons should be selected by default. There should never be a default if you are running a survey, because this will distort the results.
If an option is not available (due to previous choices, temporary unavailability or any other reason), it should be grayed out. The option should not be removed. You might also want to have a text next to the button explaining why it is unavailable.
Clicking a radio button should never initiate any functionality/action (like moving to another page). It is only for making a selection - not confirmation or navigation.
Generally the user will select one of the options. When one is selected (from a list without defaults), the user can select another option, but not unselect all options. (If this functionality is absolutely necessary, all options can be deselected by clicking the already selected option once more.)
Check boxes
WHEN: Check boxes should be used when several choices can be made from a fixed list.
DEFINITION: Check boxes are small squares with a text next to it, indicating the selection that can be made. When the box or text next to it is clicked, a check mark appears inside the square, and the option is selected. Selection can be undone by clicking the square or text once more.
EXAMPLE:
Option 1
Option 2
SPECIFICATION: HTML standard. Text:
Body text
HOW: The options should be listed vertically, but if the overall page layout requires it, they can be listed horizontally.
If an option is not available (due to previous choices, temporary unavailability or other), it should be grayed out. The option should not be removed. You might also want to have a text next to the button explaining why it is unavailable.
Drop-down combo box
WHEN: A drop-down box should/could be used when a single parameter is to be selected from a list consisting of more than 10 elements (for example a list of all countries). It can also be used to create a list of links/shortcuts.
DEFINITION:
A drop-down box is an edit box field with a button to the right containing a triangular icon pointing downwards. Clicking the triangle expands a list of choices. Moving the mouse over the options highlights the choice - clicking selects the highlighted option. The list disappears and the selected option appears in the text field. Clicking the triangle, or somewhere outside the list on the screen, closes the list without making a selection.
EXAMPLE:
SPECIFICATION: HTML standard. Text:
Body text
HOW: The options should be listed alphabetically/numerically. The list should be as long as possible before a scroll bar is made available to the right.
Before a selection is made, the edit box can contain an explanation of the kind of selections that can be made, or it can be empty if explanation is provided outside the drop-down box. If a default value is to be selected, it can be displayed in the edit box before a selection is made by the user (the list should still be alphabetical/numeric, and the default value should be placed in the correct place and order).
When the drop-down box is used as a list of links, selecting a parameter initiates navigation to that page. Clicking on the triangle or outside the box means that the user stays on the same page.
List box
WHEN: List boxes can be used to select a variable from a list. By pressing 'Ctrl' more than one variable can be selected.
DEFINITION: A list box is a frame containing a list of variables. When a variable is clicked, it becomes highlighted. When another variable is clicked, it becomes highlighted, and the previous selection is no longer highlighted. By pressing Ctrl, more than one variable can be selected.
EXAMPLE:
SPECIFICATION: HTML standard. Text:
Body text
HOW: To avoid excessive scrolling, you should allow for as many visible variables as possible by adjusting the height of the list box.
The multiple-select functionality is not always easy to understand for a lot of users, and other methods for selections should be considered for multi-select (for example check boxes). If using a list box cannot be avoided, a text should be placed below the box: "Press Ctrl to select more than one"
Edit box
WHEN: An edit box should be used if the user needs to specify a value or enter text.
DEFINITION: An edit box is a rectangular field. When the cursor moves over the box, it changes into an insert-text cursor. When clicked, a blinking cursor appears inside the box. The cursor is aligned left when text is inserted, and right when numbers are inserted. The text can be highlighted and edited, using the mouse and keyboard.
EXAMPLE:
Explanatory text:
SPECIFICATION: HTML standard. Height and width to fit text. Text:
Body text
HOW: An edit box should not be used if the input could be a predefined list of options (radio buttons/drop-down box) instead. A combination of edit box and drop-down box in the same application is not beneficial. The solution then is to provide both, first the drop-down box, then the edit box.
If there is more than one edit box, the user should be able to navigate back and forth using tab and shift-tab (in addition to regular mouse navigation). In this case it is important that boxes are laid out logically, preferably in a vertical list. If edit boxes are placed horizontally and vertically, pressing tab should move first to the right, then down.
All edit boxes should have a text above or to the left that explains what kind of input is expected. (Example: “First name:”)
When a user is supposed to enter large amount of text, the height and width of the edit box should be adjusted so the user can see as much of the entered text as possible without scrolling. At least four lines of text should be visible.
Dialog box
WHEN: You can use a pop-up window to make the user aware of a confirmation, critical action, missing data or incorrect data. It can also be used to provide extra functionality without leaving the current page, like search, login or feedback.
DEFINITION: A pop-up window is a message that appears in a separate window. It contains a heading, message and buttons.
SPECIFICATION: Standard OS Window (Microsoft Windows, Mac OS, Linux or other). Plain, without toolbar and status bar.
HOW: The size of a pop-up window should not exceed 1/3 of a regular page.
ERROR MESSAGE: The pop-up window should only be a message - it should not offer any functionality or suggest to complete any steps - Your goal should be to make the user aware of something, and make him/her do it right, but it should not be used as an input tool.
CONFIRMATION: In the case of confirmation of an action (for example placing and order), the pop-up should have a "Proceed" button and a "Cancel" button.
New window
EXTRA FUNCTIONALITY: You should not have more than approximately 5 interaction elements in a pop-up window, a more complex functionality should have a page of its own. In the top of the window, there may be a short explanation of the functionality.
NEW WINDOW: For various reasons an application may have to open in a new window. The new window should be larger than an error message, but preferrably somewhat smaller than the original browser window. If the application includes navigation between several pages, standard toolbars should be included in the new window.
EXAMPLE:
Icons
WHEN: You can use an icon instead of a button text if a button needs to be small, or is used repeatedly on one page. Icons can also be used to indicate the status of an interactive element.
DEFINITION: An
icon is a symbol, representing a word, object or action.
EXAMPLE: On the ABB Internet icons are used as global buttons for the following functions: "Help", "Search", "Contact us", "Home" and "Sitemap".
On the intranet a spinning globe is used as icon for a direct link to www.abb.com:
HOW: Do not use more than five different icons on one page, because this can be confusing to the user. New icons should always be tested on users to see if they are understandable. Icons used on a page must be very different from each other.
WARNING: Icons should be used with care in the content section - consider using text instead.
Tab control
WHEN: If an application consists of several important screens, and the user should be able to switch seamlessly between them, tab controls can be used.
DEFINITION: Tab controls are tabs on top of the screen (but below the Banner area and Top menu). Each tab is labelled according to the screen it represents. By clicking a tab, the user navigates to the corresponding screen.