Ergonomie et expérience utilisateur
Suite à ma lecture des OSX UX guidelines + quelques autres articles pris sur le web, voici un rapide condensé qui rafraichira les mémoires.
Au niveau application en général :
- Se focaliser sur les solutions de l’application pas sur les fonctionnalités. Il faut rester caler sur le concept et la réponse aux besoins originaux. Ne pas rajouter et multiplier les fonctionnalités.
- Il faut designer pour les 80% de l’audience, i.e la masse, et non pas les 20% de « power users »
- Révéler progressivement les infos, Ne pas tout balancer d’un coup. La métaphore du couteau suisse. Tout déplié : on n’y comprend rien. Par contre en sortant un outil à la fois on a un outil hyper pratique !
- Afficher des messages d’erreur explicites et compréhensible avec si possible une action/solution a effectuer
- Faire tout ce qui est possible pour empêcher la perte de données de l’utilisateur
- Toujours mettre une fonction de undo/redo
- Internationaliser le logiciel et donner si possible des versions locales
- designer une apparence et un graphisme soigné : Votre application aura un look professionnel et donnera confiance en l’utilisateur pour vos produits/société. Un gage de qualité essentiel
- Garder des positions d’éléments consistantes suivant les applis, pages etc.
- Utiliser des métaphores liées au monde réel : Par exemple la home est designer par une maison, les « albums photos » de iPhoto correspondent aux réels albums photos, etc.
- L’utilisateur doit lancer et contrôler les actions et non l’application elle-même.
- Mettre en place un feedback : quand l’utilisateur effectue une action : signifier que l’action a été comprise et enregistrée par l’application. L’utilisateur doit savoir que son action a été enregistrée.
- Utiliser des effets subtils et légers qui mettent en avant les actions effectuées : ex : effet de réduction de fenêtre, etc.
- Toujours mettre un loader pour les actions qui peuvent prendre du temps
- Garder un graphisme simple : ne pas surcharger l’application avec des boutons/icones/text
- Offrir des options de personnalisation
- Réduire au maximum le « bruit visuel » : contours d’un tableau, etc. Permet de dé-complexifier l’application.
- La page d’accueil d’une application (« blank state ») ne doit pas etre blanche mais doit proposer des actions pour l’utilisateur
- Bien aligner les éléments dans une page améliore l’effet de simplicité :
Au niveau du web :
- Les internautes scan un site web suivant une forme ayant la lettre F (selon des sources d’eye-tracking)
- La partie la plus visible d’un site est le coin haut gauche.
- Les utilisateurs ont appris à ne plus regarder les bannières et formats classiques de pub. Ils ne lisent pas non plus les gros blocs de texte (pas la patience)
- Un texte a plus d’impact qu’une image (intéressant..). Un gros slogan sera plus impactant qu’une grosse bannière.
- Les emplacements par défaut pour s’inscrire (login etc.) et le caddie (shopping cart pour les sites de e-commerce) sont toujours en haut à droite.
- Attention a ne pas faire des zones clickables trop petites/rapprochées
- Eviter les formulaires d’inscriptions trop longs.
Liens :
- http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/
- http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
- http://www.brandonwalkin.com/blog/2009/08/10/managing-ui-complexity/
- http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
- http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
- http://www.d7ux.org/
- http://blog.eyetools.com/eyetools_research/
- Windows 7 UX guidelines
- Mac OSX UX guidelines
Biblio :
- http://gettingreal.37signals.com/index.php
- http://www.amazon.com/Designing-Obvious-Common-Approach-Application/dp/032145345X
November 20, 2009 | Filed Under interfaces