wiki:HumanInterfaceGuidelines
Last modified 8 years ago Last modified on 10/16/08 12:14:14

LeMill Human Interface Guidelines

Fundamentals

  • No pop-up windows.
  • No frames.
  • No i-frames.

Interaction Design

User Input

  • All user input made with forms that are filled up (add content, tools, etc.) are individual pages without any navigation.
  • Only options available are "Add" or "Cancel".
  • All form fields must be visible. If we have too many fields, then we should get rid of less important fields, not build some dynamic way to show/hide fields.
  • For forms we should use Plone CSS classes field, formHelp and formControl, not some html tables.

User Feedback

  • All error feedback are explaining what went wrong and what the user should try next.
  • No "generic error" messages.
  • All error feedback pages are individual pages without any navigation.
  • Contextual help is provided in more complicated pages. Help is in a folded section that is hidden by default. User can show that section without reloading the page (example: showing the syntax in WYSIWYM editor).
  • Less is more
  • We use hierarchies but no "drop-down" menus
  • We use "hypertext" and basically link everything that can be linked

Icons

General principles of using icons in LeMill:

  • Less is more
  • All icons used must help user to recognize fast (faster than reading) what is the function about.
  • Icons are used only for coding content (compare colour coding), not to decorate.

New content icons are used in the "New content" page:

  • New learning resource...
  • Add media piece...
  • Add reference...
  • Add print resource...

Default cover images are used for the following objects:

  • Web page
  • Presentation
  • Exercise
  • Lesson plan
  • School project
  • PILOT
  • Media piece - sound clip
  • Media piece - movie clip
  • Media piece - KML file
  • Reference
  • Print resource
  • Method
  • Tool
  • Member
  • Group

The dimensions of new content icons and default cover images are 120x120 px. New content icons have a light grey square shape. Default cover images have a light grey circle shape on a white background.

The following colors used in the new content images and default cover images:

  • light grey background: #E5E5E5
  • grey fill: #CCCCCC
  • dark grey lines: #666666

Layout and Appearance

Screen Layout

  • Hybrid layout: liquid header and fixed width content (760 px). Teemu's comment: what about mobile browsers? Will there be another style sheets for mobile devices where the UI scalable?
  • Screen layout must work without horizontal scrolling at 800x600. Screen layout must look best at 1024x768.
  • Screen layout is based on XHTML tables. This will guarantee, that the layout works in all major browsers released in last 5 years.

Material Layout

  • All materials are based on the online templates provided by the system.
  • All material pages are by default single pages without any navigation except "table of content" (comapre to Wiki): One material - one page. If the material is really huge it is divided to several pages automatically with nice internal navigation.
  • Texts and images are dispayed inline.
  • Audios and videos are embedded to the pages.

Fonts and Text

  • Sentence case is used for headings, menu titles, menu items and buttons ("Featured content", not "Featured Content").
  • If a dialog is following to the link, the link must end with "...". ("Change cover image..."). Three periods (...) should not be part of translation string.
  • If the text is not full sentence it does not end with a period (.).
  • See list of examples from plone-docs mailing list.

Colors

All four sections of LeMill use a section color in the header. The section colors are:

  • Content: #77bb22
  • Activities: #ff7700
  • Tools: #666699
  • Community: #77aabb

EUN skin

EUN skin is using one main color (#4c90ac) and four section colors.

Graphics

  • Less is more.
  • All images used in the skins are in PNG format. This applies also for icons.

Accessibility and Web Standards

Accessibility

XHTML and CSS

  • All the pages must have XHTML 1.0 Transitional doctype.
  • Deprecated HTML 4.01 elements should not be used. A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements may become obsolete (not supported by browsers) in future. These elements include <b>, <u>, <i> and others.
  • Keep markup semantic and lean.
  • No inline presentational images.

Flash, Javascript and other non-W3C standards