Contents
The User wants to modify a form and save the changes.
After the last step:
+----------------------------------------+ | X| | Congratulations! - feedback message | | | +----------------------------------------+ ( ) Unselected (o) Selected .----------------------------------. | | | Insert text [Hello_____] | | Another insertion [World!____] | | | | [x] Option 1 | | [x] Option 2 | | [ ] Option 3 | +----------------------------------+ | Save |
The User has performed some kind of system change operation. Depending on the operation outcome, there can be three types of messages:
Messages can be displayed in two ways: (1) embedded frame, (2) modal dialog.
The embedded frame is displayed on the top of the screen. The User can close it by clicking on the "X" button, or ignore it:
+----------------------------------------+ | [X]| | Warning: the specified ntp host is | | unreachable! | | | +----------------------------------------+
The modal dialog box is ovelayed on the screen and represents a mandatory decision point.
+----------------------------------------+ | Warning [X]| | | | The specified ntp host is unreachable! | | | | [ Disable NTP ] [ Ignore ] | +----------------------------------------+
Validation errors are a special case of Notifications.
- The label is displayed. A click on the label give focus to the input field.
- A text explaining why the problem occurred follows.
For instance:
+-------------------------------------------------+ | [X]| | Email: invalid email address | | Username: only lowercase letters are allowed | | | +-------------------------------------------------+ First Name: [John______________] Last Name: [Doe_______________] Email: *[johndo@com________]* Username: *[JohnDoe___________]*
Initial state (radio buttons):
(o) Unselected ( ) Selected
Since the User has clicked on "Selected" a fieldset appears (radio buttons):
( ) Unselected (o) Selected .-------------------- | | Insert text [__________] | Another insertion [__________] | | [ ] Option 1 | [ ] Option 2 | [ ] Option 3 |
Initial state (checkbox):
[ ] Activate feature
Checkbox is checked:
[x] Activate feature .-------------------- | | Insert text [__________] | Another insertion [__________] . . .
Sample table:
+--------------+----------------+---------------+-----------------------+ | User name v | First Name | Last Name | Actions | +--------------+----------------+---------------+-----------------------+ | johns | John | Smith | [ Modify ] [ Delete ] | +--------------+----------------+---------------+-----------------------+ | scott | Scott | Tiger | [ Modify ] [ Delete ] | +--------------+----------------+---------------+-----------------------+ [ Create new User ]
Data is displayed in tabular form. Each row of the table ends with two buttons:
The first row of the table contains the column headers. A click on the header may change the order of the rows - this depends on the table desired behaviour.
The User wants to create a new table element.
The User wants to change an existing table element.
The User wants to delete a table element
[1] | (1) A modal dialog box containing form fields appears, overlaying the screen or (2) The table is hidden and the form fields appear in its place. |
A wizard guides the User through a stepped procedure. Every step is a form. For each step:
The User fills the form.
The Users clicks on the Next button .
The form is validated.
a) In case of validation error the standard validation error procedure and visual feedback applies. See Validation errors.
The next step form is displayed
On the last step the Save button is displayed instead of Next.
Notes:
Wizard at intermediate step:
1. Account type 2. *Personal informations* 3. Password settings 4. Confirmation First Name [___________________] Last Name [___________________] Country [___________|v] [ Previous ] [ Next ]
A brief summary of all the wizard steps is displayed on the top of each form, emphasizing the current step.
The User faces a complex configuration. Tabs allows grouping of strictly related form controls into distinct (and loosely related) tab-pages:
.-----------. .-----------. | Tab 1 | | Tab 2 | -+ +-+-----------+-----------... // form controls omitted [ Save ] ------------------------------------------
Thus each page keeps an indipendent validation and saving state.