Widgets

• Data Alignment
  
  • Text – Left
  • Checkboxes/Radio buttons – Middle
  • Dollar Amount – Right
• Column Heading
  • Alignment - Vertically aligned center
  • Style - Bold
• Sortable Columns – All data columns should be sortable, unless there is a specific reason not too. It is good practice to provide the user with a choice.
• Scrollbar – Horizontal scrolling should be avoided whenever possible.
• Actionable Rows – All action icons should be placed in the last column of the row (right-most). Each icon is set with a title attribute, defining the action that occurs when clicked; display tooltip when the mouse hovers over the icon.
  Note: An exception is "expand/collapse" icon that is placed in the first column of the row (left-most).
• Selectable Rows – Selections of rows, whether it’s checkboxes or radio buttons, should occur in the first column (left most).  When checkboxes are used, add a checkbox in the column heading that acts as a “Select All”. Indicate this in the “title” attribute.
• Row Display – Allow the user to select the number of rows they would like to have displayed at a time. Provide a drop-down list with a set of row numbers (preferably in increments of 5 or 10, depending on the number of data being listed).
• Legend – If there is data displayed that requires a legend, such as acronyms or numbers, add an [i] icon to the top-right of the table that opens a modeless dialog box displaying the list of details (the box can be closed at any time since it’s being used as reference). The title attribute for the data should also display the details for that particular value when the mouse hovers over.
NOTE: The background is NOT darkened when the dialog is opened.
• Rows – Alternate rows differ in color.  Better for visual scanning.
• Row Expansion – Utilize "expand/collapse" icons specified for this behavior.
• Inline-Editing – For data that can be modified, provide the ability to perform inline editing.

  Note: If a text area is being used (e.g. for comments), display a text field with truncated data when inactive. When active, display the text area.
• Reordering Row Order [TBD]

A wizard is a process that guides the user through several steps (or pages), to help accomplish a task efficiently. It is commonly used when a task is fairly long, and can be separated into digestible parts.

• Try to group into minimal number of steps (consolidate where possible).
• Each step is provided with a number and a name.
• Include a “Next” button at the bottom-right of the first step/page. Each step before the end will display a “Previous” button, located at the bottom-left, and a “Next” button, bottom-right.The last page displays the “Previous” button on the bottom-left and a “Submit” button.
• Optional Button(s) – “Save” that can be added to each page.
• Make the first page functional whenever possible (as opposed to a “Getting Started” page).
• Summary - Provide a summary at the end of the process, only if the task is somewhat risky and review is highly recommended.
• Confirmation - Display a confirmation after the submission with the results.
• It is optional to save per page, but not necessary. Dependent on the task at hand.

• Clear distinction between where user has been, is, and where they can still go.
• This is a step-by-step tool, no going forward past the step you are currently on.
• Tool should be able to adapt to different number of steps, and visually adjust to fill the page.
• Use colors that match existing iTag Branding.
• Maintain an accessible contrast between colors in backgrounds and texts.
• No need for javascript.
• Use sprite concepts for background images.
• The design should afford a maximum of 3 lines of text under each step.

Modal dialogs require interaction, so use them for things that users must respond to before continuing with their task. Remember… it blocks the workflow until it is closed.

• The background behind the window, and atop the current page, is darkened while the modal box is displayed.
• Make sure there’s a way to close the box - via action buttons, or allowing the mouse to click outside of the modal box to force it to close.
• There should be enough padding around the edge of the box, framing the content with sufficient negative space.

Pagination provides the user with better navigation between pages.

• If on the first page, disable the “previous” link/button.
• If there isn’t more than one page, do not display pagination.
• Always list total number of pages.
• Clearly indicate the page the user is currently viewing.
• Set a hover state for when the mouse rolls over a page number.
• Depending on the number of rows the user decides to display at a time, adjust the number of pages accordingly.
• Truncate page number after 10, and display last page.

A loader is a visual component indicating the progress of a task.

• Provide textual representation alongside the bar (% preferred).
• An indeterminate progress is demonstrated by showing the loader "spinning wheel". This shows that progress is taken place, but isn’t being measured.
• The background behind the graphic, and atop the current page, is darkened while the progress bar is displayed.

Tabs are a set of navigational selections that allow the user to switch between sections fluidly within a page.

• Tabs can be integrated if there are cohesive sections that can be created within a page (e.g. separate documents that are needed to accomplish a task).
• An active tab has to look different than the other tabs.
• One-tab panes should not exist unless there’s a case, on that particular page, for multiple tabs to be displayed. Otherwise, should just be a standalone page.