Buttons, Links, and Icons

There are several common user interface components that occur throughout eBill.  Here are some of the common functions and features along with their corresponding buttons, links, and icons:

§         Checkbox  – In some cases, checkboxes appear.  Checkboxes can be used when an additional feature is available, but not required.  In all cases a check mark in the box indicates the item is selected, a blank box indicates the item is not selected.

Example:

Checked:  Unchecked:

           

§         Quick Help (Context Sensitive Help)  – Many webpages in eBill have some additional help and clarification.  These appear as a question mark icon.  To view Quick Help, click the question mark icon. The help text appears. To close the help text and return the page to its original appearance, click the icon again.

 Example:

Quick Help Icon:        With Help Text Displayed:

    

§         Date Selection  – When eBill allows you to freely enter a date, do so by using the date selection calendar icon.  This icon appears to the right of the date field and resembles a calendar.   To view a full date selection calendar and change the year and month, click the icon.  To enter a date, click a date in the calendar.  

Examples:

Date Selection Icon:                       Date Selection Calendar:

    

§         Drop-down list  – In cases where you're only allowed to choose one value from a predetermined list, eBill provides a drop-down list.  A drop-down list always displays the currently selected value, and starts with a default value.  To change the selection, click the down arrow, the list will expand to display the available values. Select the value you want from the list, and then  it will collapse to show the newly selected value.  

 Examples:

Drop-down list with current value:   Displaying all available values:

                 

§         Lists  – To present multiple items at the same time, eBill uses either a list or a table (see Tables for a full description of a table).  Lists, as the name implies, present a list of the available options and allow you to select options as required.  When a list contains more options than can be presented in the space allotted, a scroll bar appears on the right side of the list allowing you to scroll the list up or down to reveal additional options.  To move the list up or down, click the arrows on the top and bottom of the scroll bar or use your mouse to drag the scrollbar.  

 Example:

List with a scroll bar:

§         Option  – In some situations eBill requires you to choose a single option. Options are always mutually exclusive and appear as a circle.  When you select an option, it becomes filled in to indicate your selection.  Any other options in the same group will turn white to indicate the options are not selected.  

Example:

§         Tabs  – For some screens, there are multiple tabs (two or more), with each tab displaying unique information.  To switch between tabs, simply click the tab you want to view.  eBill displays the new tab and hide the tab that was previously displayed.  The tab currently displayed appears with a light colored background and dark text, while other tabs (not currently displayed) have a dark background and light text.

§        §        §        §        Example:

§          Wizard  – For procedures in eBill that contain multiple steps that must be completed in order, eBill provides a Wizard with steps that show how many steps are involved, and where you are in the process.  The current step is presented in blue text, and other steps appear in black text.  These steps do not function as links; you must use the Prev and Next buttons to move between steps.

 Example:

 

Related Topics

Common Activities