- LeMill Human Interface Guidelines
LeMill Human Interface Guidelines
- No pop-up windows.
- No frames.
- No i-frames.
- 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.
- 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).
Menus and Navigation
- Less is more
- We use hierarchies but no "drop-down" menus
- We use "hypertext" and basically link everything that can be linked
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
- Lesson plan
- School project
- Media piece - sound clip
- Media piece - movie clip
- Media piece - KML file
- Print resource
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
- 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.
- 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.
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 is using one main color (#4c90ac) and four section colors.
- Less is more.
- All images used in the skins are in PNG format. This applies also for icons.
Accessibility and Web Standards
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.