Difference between revisions of "UM:User Interface"

From DigitalVision
Jump to: navigation, search
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:Interface_Conventions}}
+
{{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:Interface_Conventions}}
+
{{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 15:03, 23 August 2016

Darrow-up.png     Previous Next

The User Interface

This chapter will give you an overview of the user interface and some basic components of the application.

 

Interface Conventions

The following interface conventions are used for various elements.

Functional

A function button performs a single action only.

Button_Type_Function

Button_Type_Disabled

Active and available function button.

Inactive function button.

If a button is not available for selection, it is greyed out.

Secondary Windows

Button_Type_OpenWindow

The two dots preceding the button name indicate that a new window or dialog will open when pressed.

Drop-down Menus

Button_Type_DropdownList

The three vertical dots preceding the button name indicate that this button is a drop-down selection list.

Numeric Sliders / Data Entry

Button_Type_NumericSlider

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

Button_Type_ToggleButton_OffState

Button_Type_ToggleButton_OnState

Toggle button off.

Toggle button on.

Button_Type_ToggleGroup

A group of three toggle buttons, with one enabled.

Radio Buttons

Button_Type_RadioButtons

A group of two radio buttons. In a group, only one option can be selected at one time.

Option Buttons

Button_Type_OptionButton_NotSelected

Button_Type_OptionButton_Selected

Option button off.

Option button on.

Information Dialogs

Dialog_Information

Dialog_Query

Dialog_Warning

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.

Darrow-up.png     Previous Next