Styleguide

From Tine 2.0 - Wiki


Style Guide for Tine 2.0

WARNING: WORK IN PROGRESS On these pages we are currently working on a style guide to describe how user-interface elements should be used when programming Tine 2.0 applications. We have decided to roughly follow the structure suggested by Baxley (1). At the moment elements are added, as we need them. If you find something you need is missing, please use the forum to discuss solutions and note the final findings here.

1. Structure

1.1 Conceptual Model

1.2 Task Flow

1.3 Organizational Model

1.3.1 Terminology

  • Use common terminology with words and compound words that in context of Tine 2.0 have specific meaning that may deviate from the meaning the same words have in other contexts and in everyday language.

1.3.2 Generic layout

Application Overview
  • (1): Start of a particular module, including 1a) an area for notifications and 1b) account related function
  • (2): Sidebar to filter data
  • (3): Content pane, with 3a) functions on data, 3b) information on shown data and configuration of view mode, 3c) list of information, and 3d) preview of currently selected data



2. Behaviour

2.1 Viewing and Navigation

2.1.1 General navigation

2.1.2 Access functions

  • Provide a context menu for controls with implicit functions.
  • Use a button to initiate an action when the user clicks it.
  • Use command links to navigate between pages.
  • Follow the guidelines for keyboard access at least for controls that can receive focus.

2.1.3 Grouping

  • Use tabs to show related information on separate pages.
  • Consider to use an accordion to categorize the content into a few pages.
  • Arrange associated controls by using a labeled group box or an unlabeled panel.

2.1.4 Complex views

  • Use a list view to show some items out of one category.
  • Use a tree view to show items with a single, natural, hierarchical categorization.


2.2 Editing and Manipulation

2.2.1 Selection

  • Use radio buttons for selection of 1 out of a few items.
  • Use one or more check boxes for clear options or to select items out of a small number of options.
  • Use a drop-down list for selection of 1 out of a small number of items.
  • Use a combo box to select 1 out of a small number of items where users should be able to add items.
  • Use an extended drop-down list with infinite scrolling feature to select 1 singular item out of a potentially big list.
  • Tear down several choices out of a large number of items into multiple but simple selections.

2.2.2 Unconstrained input

2.2.3 Constrained input

  • Use a spinner for numerical input within a range and with fix steps.
  • Use a slider for arbitrary changes within a defined range.
  • Use a date picker for formatted input of datum and to specific a range between two dates.
  • Use a file picker to select one file from the local file system.

2.3 User Assistance

2.3.1 User-driven information (Tool-Tip)

  • Provide tool-tips for user driven information.

2.3.2 System triggered notification

  • Use notifications as system-triggered messages to acknowledge about events out of the current context.
  • Inform users per balloon pop-up about non-critical problems.
  • Show a progress indicator for lengthy actions.

2.3.3 Disruptive messages (Modal Dialog)

  • Show a modal message dialog if the processing has reached an unexpected condition that needs interaction.

2.3.4 Help System

  • Support the user by an elaborated interface or per help system.

3. Presentation

3.1 Layout

3.2 Style

  • Tine 2.0's style follows the ExtJs framework.

3.3 Text

References

  1. Baxley, B. (2002): Making the Web Work: Defining Effective Web Applications. Indianapolis, IN: New Riders Publishing
  2. http://docs.sencha.com/ext-js/4-1/#!/api

Leftovers

Checkbox

Single_Selection

Button

Adding elements to lists