Web ergonomics: practical guide

colour_contrast

This article aims to expose the principal rules for you to get into web design and ergonomics properly. Favour logic by respecting representation and interaction conventions. Give a feedback to the user on his actions. Users need to identify butons clearly.

Its appearance and behaviour must give infos on its utility (affordance). For instance, a bumpy look for a button suggests that it can be clicked. This way, it is the button itself which suggests its own function.

Favour legibility and visibility of informations

Experience must be always simple even if the course is complex with multiple interactions.This is why you better divide a complex course into a series of small actions instead of building one big and complexe page that the user won’t be able to really focus on. Remain simple respecting the Fitts Law to prevent user from using memory too much.

Think Size more than pixels.

In the iOS Human Interface Guidelines, Apple recommends the creation of tactile target of 44 points. They use points more then pixels to manage their different resolutions.
To Take resolution variation into account it is better to measure all tactile elements by their physical dimension. Microsoft recommands target of 9mm/34px, a minimum size of 7mm/26px and a minimum separation of 2mm/8px. Microsoft also recommends to extend all zones frequently touched or located on the screen border or difficult to reach.

Think about clicking, forget about roll over or tooltip. Limit the keyboard uses.

You must also imagine a graphic chart that takes external light into account. Your informations must have enough contrast to be red easily under sunlight. Mobility is a stake that office computers don’t have. Favour a light colour for background to optimize contrast. Don’t hesitate to consult the Colour Contrast Analyser, a tool for contrast accessibility.

By following this list of advices, you will respond to recent web standards. You must however, adapt these rules to the type of project you work on and the kind of users your website will meet. These standards must not restrain creativity they must be adaptable..

And don’t ever forget that all users prefer using tools they know.

 Reference by Amélie Boucher, ergonome