human interface guidelines for MoinMoin themes, macros and other extensions

See also ThemeMarket

HIGs

Currently we do not have any guidelines. Until we develop some, here are important HIG references. As a multi-platform application, our interface should be compatible with most of these guidelines.

Guidelines

Graceful degradation

This is an important thing for all web applications: make sure your theme is usable when the cascading style sheets and javascript are disabled. It doesn't have to be pretty, but it should be possible (and preferably still comfortable) to use.

This is best achieved by making the theme without css and javascript first, and adding them later, possibly hiding the things that were required when css or javascript was disabled. A good example is the action selection dialog in the Modern theme, that has a button for submitting the form when javascript is disabled, but the button is later removed with the javascript.

Make sure that your themes are usable on standard-compliant browsers -- the standards are here to stay. Depending on your user base, you might also want them to work well on other modern browsers -- use the conditional comments for supplying corrections to CSS for MSIE, not the "* html" or any other hack.

Provide fall backs for images and fonts.

Colors

If you set any one color or background image, you have to set all the colors -- otherwise you risk having unreadable color combinations when the user has different color scheme in his browser than you have. Also, whenever you use a background image that doesn't have transparency, also set the background color -- so that the users who have the graphics disabled still get the optimal background color.

Make sure you pick text and background colors that are easy to read, there is an article about it at: http://web.archive.org/web/20070305152811rn_2/www.visionconnection.org/Content/Technology/ForDesignProfessionals/EffectiveColorContrast.htm

Icons

Avoid using widely known icons that normally mean something else than in your application. For example, don't use a search icon for print view or diff.

Always provide textual explanation for your icons -- either by placing the text next to them, or by using various fall back mechanisms for when the icon cannot be displayed. The title attribute is very good for giving hints.

If the icon is supposed to stand on its own, without any accompanying text or button, make it big enough to click comfortably.

Don't use language- and culture-dependent metaphors for your icons. Try to avoid using religious symbols, etc.

Layout

Try to make your theme work well in all window sizes. If it is made for one window width, force it by setting min-width or width on the html or body element in your css.

Always remember that different platform have different fonts, and that those fonts have different sizes and other metrics. Any elements that have their size dependent on the text size should have it specified in em or ex units. Remember that the users can change the font size.

Remember that various translations of interface texts can be longer or shorter than those in whatever language you design your theme. Leave space for them.

Take into account the fact that user-provided content will sometimes contain exceptionally long, unbreakable lines, large images, etc. that can potentially break your layout.

Mark the links to existing pages differently than the ones to non-existing ones.

Mark the links that point to external resources differently.

Mark the links to already visited pages differently.

Don't make non-clickable elements look like links.

Don't make navigation elements look like banners or advertisements or anything else than just navigation elements, or they will be easily overlooked by the users. Always make sure that "clickable" elements look "clickable", changing the mouse cursor or color on hover is not enough.

Discussion

Sorry for the dumb question, but... Did you read the guide lines before linking them? I did not find much that could possibly applied to MoinMoin... -- FlorianFesti 2004-09-20 21:21:16

I read most of Apple HIG and some parts of GNOME HIG. Only some parts are relevant of course. We can apply:

Maybe even more.

OS specific themes

Sometimes we can't be compatible with all HIG's. For example, positioning of controls on a window. We can solve this with themes: we can have a Mac, Windows and Linux themes. The default theme for unregistered users can be their OS theme, so a user of Safari will get automatically the Mac theme.

Disability interfaces

Am told in principle in the UK websites should really carry title tags on all the links so that people who are visually impaired can use them. Here it is a legal requirement but is widely ignored. Presumably eventually MoinMoin have these in automatically? --AndrewCates

MoinMoin: MoinHumanInterfaceGuidelines (last edited 2007-10-29 19:19:20 by localhost)