1. LeMill Human Interface Guidelines
    1. Fundamentals
    2. Interaction Design
      1. User Input
      2. User Feedback
      3. Menus and Navigation
      4. Icons
    3. Layout and Appearance
      1. Screen Layout
      2. Material Layout
      3. Fonts and Text
      4. Colors
        1. EUN skin
      5. Graphics
    4. Accessibility and Web Standards
      1. Accessibility
      2. XHTML and CSS
      3. Flash, Javascript and other non-W3C standards

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