openSUSE:WebYaST Style Guide/Dialog Elements

WebYaST

Home - Installation - Documentation - Architecture - Development

Dialog Elements

Presentation of Dialog Elements in a Form

Dialog elements in a form are aligned via css.
Dialog elements belonging to each other are surrounded by <fieldset>. You need to give fieldset a unique id. Class can be given optional.
If you want to use headlines in a form, use <fieldset>.
Form elements are separated by putting each form element into a single paragraph.
The description of a form element, which is shown on the left side later, is surrounded by <label>
In order to allow the user to activate an input field by clicking on the form element description the "label for" and the text field tag/form id have to be identical.

Code example: Form alignment for setting DNS

<fieldset id="dns" class="">
   <legend><%=_("DNS")%></legend>
   <p>
     <label for="<%= :name %>"><%=_("Hostname")%></label>
     <%=text_field_tag :name, @name, :disabled => write_disabled %>
   </p>
 </fieldset>

Enable/disable a config value

A (boolean) config value is displayed in webYaST as:
Current status of value (in textual form) + button which is labeled with the opposite of current status.

Alternatively you might also use a check box.

Example:

 This repository is enabled. [Disable]

Buttons

Buttons indicate modifying actions.

Modifying actions are e.g. save, reboot, restart.
(As opposed to Non-modifying actions like cancel, back, add, edit, delete, details. Non-modifying actions are hyperlinks)

('edit' is non-modifying because it opens an edit dialog. Clicking save there is the modifying action
'delete' is non-modifying because it must be followed by a confirmation popup)

Example: "Save" is a button as it changes a setting but Cancel is not because the settings are not applied.

Short Description of Dialog Elements

Dialog Element	Description / Used For
Check Box	A check box is a clickable true/false action toggle button used when both states have obvious meaning (e.g. set and unset, enable/disable) Guidelines Check boxes may initiate actions like enable/disable or hide/show settings or services. Use check boxes also if you want the user to select multiple options. To show the user that these check boxes belong together draw a frame around the options. If there are more than 4 options use combo box instead. If a check box enables other controls, place it above or to the left of the controls that it affects to support the user to indicate which controls are affected. Check box labels use sentence style capitalization If it proves to difficult to find a meaningful label which explains the effects of a check box consider to use radio buttons. By using radio buttons you can provide both states with different labels. A group of check boxes is labeled with a descriptive heading above or left to the group of check boxes. Try to avoid frames around check boxes and use blank space for grouping instead. Align multiple check boxes vertically to ease visual scanning.
Combo Box	Combo boxes are used for selecting one options from several ones. Possibly editable to define your own value. Guidelines Use combo boxes if a setting contains more than 4 radio buttons or check boxes A selected entry from a combo box may initiate actions like enable/disable or hide/show settings or services. Combo box labels and entries use sentence style capitalization. Place the combo box label above or left to the combo box
Input Field	One or more line textual entry. Guidelines Prefilled with text about detailled description of input field and/or expected value. Use sentenced style for the prefilled text. Labeled with sentenced capitalization When the user activates an input field the text cursor is placed at the end of the existing text and its content is high lightened. This makes it easier to over type or append new text. Adjust size of input field according to the estimated size of input. Input is validated when the user exists the input field. In order to give the user an idea which input format is appropriate use static text prompt. Another way is to separate the input field.
Push Button	A push button is used to start an action (e.g. save something, open a pop up). Guidelines Buttons are labeled by using sentenced capitalization. Do not use more than one or two different widths of button in the same window, and make all of them the same height.
Radio Button	Radio buttons are used for selecting one from two or more mutually exclusive options. Guidelines If there are only two obvious states use a check box instead. If there are more than 4 options use a combo box instead. Radio buttons are used in groups. Single settings are either displayed by a check box or by two radio buttons (one for each state). Only one radio button can be set within a group of radio buttons. A radio button may initiate actions like enable/disable or hide/show settings or services. If a radio button enables other controls, place it above or to the left of the controls that it affects to support the user to indicate which controls are affected. Radio button labels use sentence style capitalization A group of radio buttons is labeled with a descriptive heading above or left to the group of radio buttons. Try to avoid frames around radio buttons and use blank space for grouping instead. Align multiple radio buttons vertically to ease visual scanning.
Slider	In order to select a value from a fixed, ordered range use a slider. Use slider when it is more important for the user to adjust a value relatively than absolutely (e.g. Making something louder or quieter). Guidelines Label slider with sentence capitalization Mark significant values with text or tick marks
Spin Box	A spin box is a text box which allows the user to choose between a range of numeric values by increasing and decreasing them with two arrows. Guidelines Capitalize labels in sentence style As spin boxes are used for numerical input only use combo boxes instead when you the user needs to select fixed entries. Use slider control for volume controls.
Table/List	Lists show several entries with several pieces of information at once and to provide an overview. Guidelines Lists labels and list entries use sentence style and are positioned above or left to the list. Use reasonable size of table Use labeled column headers if you want to make a list sortable or if the table contains more than one column. Column header are displayed in title style. If you use sorting make this options and the sorting method obvious to the user
Tabs	Tabs are used to organize module content if the settings need more than one page. A tab is a navigational widget for horizontal switching between various settings. Use a tab to symbolize independent or hierarchically equal sections. Guidelines Tabs are labeled with title capitalization When switching between the various branches changed values are preserved. If you think, that this behavior leads to potential destructive consequences you may include a pop up, which has to be confirmed by the user. Do not use more than five tabs or more than one row of tabs because this makes it hard for the user to find the section he is looking for and it makes your dialog look complicated and ugly. If you need more than five tabs use a tree instead.
Tree	Use a tree to display a hierarchical structure or if a dialog with tabs would look too crowded and complicated. When switching between the various branches changed values are preserved. If you think, that this behavior leads to potential destructive consequences you may include a pop up, which has to be confirmed by the user. Guidelines Trees use sentence style and are positioned above or left to the list. Use reasonable size of tree. Use labeled column headers if you want to make a tree sortable or if the table contains more than one column. Column headers are displayed in title style

Bold text