Difference between revisions of "UM:User Interface"
m (Text replacement - "|Platform:" to "|UM:") |
|||
Line 1: | Line 1: | ||
<div class="manualcontent"> | <div class="manualcontent"> | ||
− | {{Template:M-Navlinks-top|UM:Manual|UM:Contacts2|UM: | + | {{Template:M-Navlinks-top|UM:Manual|UM:Contacts2|UM:Main_Screen}} |
{{Template:M-Title|The User Interface}} | {{Template:M-Title|The User Interface}} | ||
Line 8: | Line 8: | ||
<p class="p_DVBodyText"><span class="f_DVBodyText"> </span></p> | <p class="p_DVBodyText"><span class="f_DVBodyText"> </span></p> | ||
− | {{Template:M-Navlinks-bottom|UM:Manual|UM:Contacts2|UM: | + | {{Template:M-Heading1|Interface Conventions}} |
+ | |||
+ | <p class="p_DVBodyText"><span class="f_DVBodyText">The following interface conventions are used for various elements.</span></p> | ||
+ | <p class="p_DVHeader2"><span class="f_DVHeader2">Functional</span></p> | ||
+ | <p class="p_DVBodyText"><span class="f_DVBodyText">A function button performs a single action only.</span></p> | ||
+ | <p class="p_DVBodyText"><span class="f_DVBodyText"> </span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:297px;" valign="top" width="297"><p class="p_DV">[[File:button_type_function.png|alt=Button_Type_Function]]</p> | ||
+ | </td> | ||
+ | <td style="width:538px;" valign="top" width="538"><p class="p_DV">[[File:button_type_disabled.png|alt=Button_Type_Disabled]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:297px;" valign="top" width="297"><p class="p_DV"><span class="f_DV">Active and available function button.</span></p> | ||
+ | </td> | ||
+ | <td style="width:538px;" valign="top" width="538"><p class="p_DV"><span class="f_DV">Inactive function button.</span></p> | ||
+ | <p class="p_DV"><span class="f_DV">If a button is not available for selection, it is greyed out.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVHeader2"><span class="f_DVHeader2">Secondary Windows</span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:834px;" valign="top" width="834"><p class="p_DV">[[File:button_type_openwindow.png|alt=Button_Type_OpenWindow]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:834px;" valign="top" width="834"><p class="p_DV"><span class="f_DV">The two dots preceding the button name indicate that a new window or dialog will open when pressed.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVHeader2"><span class="f_DVHeader2">Drop-down Menus</span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:834px;" valign="top" width="834"><p class="p_DV">[[File:button_type_dropdownlist.png|alt=Button_Type_DropdownList]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:834px;" valign="top" width="834"><p class="p_DV"><span class="f_DV">The three vertical dots preceding the button name indicate that this button is a drop-down selection list.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVHeader2"><span class="f_DVHeader2">Numeric Sliders / Data Entry</span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:833px;" valign="top" width="833"><p class="p_DV">[[File:button_type_numericslider.png|alt=Button_Type_NumericSlider]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:833px;" valign="top" width="833"><p class="p_DV"><span class="f_DV">Click, hold and drag the mouse left and right in the data field to increment and decrement the data value. You can also click the mouse once in the data field to select, then type in a data value.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVHeader2"><span class="f_DVHeader2">Toggle Buttons</span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:297px;" valign="top" width="297"><p class="p_DV">[[File:button_type_togglebutton_offstate.png|alt=Button_Type_ToggleButton_OffState]]</p> | ||
+ | </td> | ||
+ | <td style="width:535px;" valign="top" width="535"><p class="p_DV">[[File:button_type_togglebutton_onstate.png|alt=Button_Type_ToggleButton_OnState]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:297px;" valign="top" width="297"><p class="p_DV"><span class="f_DV">Toggle button off.</span></p> | ||
+ | </td> | ||
+ | <td style="width:535px;" valign="top" width="535"><p class="p_DV"><span class="f_DV">Toggle button on.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVBodyText"><span class="f_DVBodyText"> </span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:833px;" valign="top" width="833"><p class="p_DV">[[File:button_type_togglegroup.png|alt=Button_Type_ToggleGroup]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:833px;" valign="top" width="833"><p class="p_DV"><span class="f_DV">A group of three toggle buttons, with one enabled.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVHeader2"><span class="f_DVHeader2">Radio Buttons </span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:832px;" valign="top" width="832"><p class="p_DV">[[File:button_type_radiobuttons.png|alt=Button_Type_RadioButtons]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:832px;" valign="top" width="832"><p class="p_DV"><span class="f_DV">A group of two radio buttons. In a group, only one option can be selected at one time.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVHeader1"><span class="f_DVHeader2">Option Buttons</span><span class="f_DVHeader1"> </span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:297px;" valign="top" width="297"><p class="p_DV">[[File:button_type_optionbutton_notselected.png|alt=Button_Type_OptionButton_NotSelected]]</p> | ||
+ | </td> | ||
+ | <td style="width:535px;" valign="top" width="535"><p class="p_DV">[[File:button_type_optionbutton_selected.png|alt=Button_Type_OptionButton_Selected]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:297px;" valign="top" width="297"><p class="p_DV"><span class="f_DV">Option button off.</span></p> | ||
+ | </td> | ||
+ | <td style="width:535px;" valign="top" width="535"><p class="p_DV"><span class="f_DV">Option button on.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVHeader2"><span class="f_DVHeader2">Information Dialogs</span></p> | ||
+ | <div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table border="0" cellpadding="4" cellspacing="0" style="border: none; border-spacing:0px;"> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:230px;" valign="top" width="230"><p class="p_DV">[[File:dialog_information.png|alt=Dialog_Information]]</p> | ||
+ | </td> | ||
+ | <td style="width:196px;" valign="top" width="196"><p class="p_DV">[[File:dialog_query.png|alt=Dialog_Query]]</p> | ||
+ | </td> | ||
+ | <td style="width:296px;" valign="top" width="296"><p class="p_DV">[[File:dialog_warning.png|alt=Dialog_Warning]]</p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr style="text-align:left;vertical-align:top;"> | ||
+ | <td style="width:230px;" valign="top" width="230"><p class="p_DV"><span class="f_DV" style="font-weight: bold;">Informational</span></p> | ||
+ | <p class="p_DV"><span class="f_DV">Informational messages, no user interaction required.</span></p> | ||
+ | </td> | ||
+ | <td style="width:196px;" valign="top" width="196"><p class="p_DV"><span class="f_DV" style="font-weight: bold;">Query</span></p> | ||
+ | <p class="p_DV"><span class="f_DV">Request for user input.</span></p> | ||
+ | </td> | ||
+ | <td style="width:296px;" valign="top" width="296"><p class="p_DV"><span class="f_DV" style="font-weight: bold;">Warning/Error</span></p> | ||
+ | <p class="p_DV"><span class="f_DV">Warning or error alert. Sometimes including a request for user intervention.</span></p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <p class="p_DVBodyText"><span class="f_DVBodyText"> </span></p> | ||
+ | |||
+ | {{Template:M-Navlinks-bottom|UM:Manual|UM:Contacts2|UM:Main_Screen}} | ||
</div> | </div> |
Revision as of 16:03, 23 August 2016
This chapter will give you an overview of the user interface and some basic components of the application.
The following interface conventions are used for various elements.
Functional
A function button performs a single action only.
Active and available function button. |
Inactive function button. If a button is not available for selection, it is greyed out. |
Secondary Windows
Drop-down Menus
The three vertical dots preceding the button name indicate that this button is a drop-down selection list. |
Numeric Sliders / Data Entry
Click, hold and drag the mouse left and right in the data field to increment and decrement the data value. You can also click the mouse once in the data field to select, then type in a data value. |
Toggle Buttons
Radio Buttons
Option Buttons
Information Dialogs
Informational Informational messages, no user interaction required. |
Query Request for user input. |
Warning/Error Warning or error alert. Sometimes including a request for user intervention. |