Ergonomie : Les Design Pattern
Avant de Designer une interface il est toujours bon de faire un peu de veille et voir ce qui existe.
Un tour des pattern existantes est toujours bénéfique. Voici quelques ressources qui vont aider :
UI pattern Factory
Ce site catégorise les différentes pattern par type :Shopping Cart, Caroussel, Edi-in-Place, endless scrolling, etc.Dans le meme style on a aussi UI Patterns.com
Konigi
Showcase et mise en avant de tres bon exemples. Pas mal de pattern pour Omnigraffle à télécharger également.
Pattern Tap
Une mine d’or d’infos. Pleins de différentes pattern et design classé par catégories. Des updates quotidiennes.
Design Snips – Les bons exemples du Web
Et bien sur l’incontournable Smashing Magazine. et notamment cet article
Google Liquid Galaxy
Incroyable. Les équipes de Google Earth ont développé un projet permettant de virtuellement voler autour du monde et dans les mers.
Le procédé est réalisé en synchronisant des vues de Google Street View sur différents moniteur.
Ressources Marketing
2 très intéressantes lectures (gratuites) pour être au top.
Un guide du marketing mobile édité par l’AFMM (asso francaise du multimedia mobile)
http://www.afmm.fr/guide-marketing-mobile/
Un rapport très complet et extrêmement intéressant du CES (Consumer Electronic Show) présentant les grandes tendences et produits de 2010 rédigé par Olivier Ezratty
Assistants personnel & Mobile : les IHM de demain
Siri est un service pour iPhone permettant d’interpréter les demandes vocales de l’utilisateur.
En gros on parle à notre téléphone en langage réel et lui nous fournit la solution.
Enfin une voie intéressante d’interface avec l’utilisateur. Le service met en relation la demande de l’utilisateur avec les companies enregistrées chez Siri..Ce n’est pas encore l’étendu des possiblité de Google qui s’offre à nous mais c’est un début.
Enfin on se rapproche d’un contact avec notre mobile disons plus intelligent.
On se rapproche du concept du persoc d’Hyperion..et le Morph concept de Nokia.
apres les G.U.I (Graphical User Interface), les N.U.I (Natural User Interface), on se rapproche des I.U.I (Intelligent User Interface)
Android partout pour 2012
Android ne concernera pas que les smartphones. De nombreux autres produits sont concernés tels que TV, tablettes, et même dans l’electro-menager, comme dans l’image ci-dessus de ce four Micro-ondes présenté par Touch Révolution.
En 2010 la part de marché d’android sur les mobiles serait de 15% contre 14% pour l’iPhone. 
Source :Giiks @ CES
Nexus 2 par Motorola
Selon une rumeur Motorola serait en train de développer un mobile pour Google. Logiquement le nom serait Nexus 2.
Source : Thestreet
Nike True City
Nike se met dans le réseau social urbain et son outil est l’iPhone.
Le concept : partager les lieux dignes d’intérêt pour un jeune branché (expo, terrain de basket, urban foot, shops, etc.)
De nombreuses app. existent déja mais la puissance et l’image de marque de Nike pourrait faire la différence sur la cible 15-35 ans.
Nike True City Full Trailer – Official HD Version from NikeSportswear on Vimeo.
Le design pour mobile
Quelques règles indispensables et erreurs à éviter afin de réaliser une interface pour mobile intuitive et efficace
- N’afficher que les éléments qui sont essentiels. Ne pas abuser de features et d’options sur un écran.
- Nos doigts ne sont pas des pointeurs de souris : il faut réaliser des boutons larges et distincts.
Si c’est impossible, il faut utiliser les mouvements multitouch (notemment le zoom) et/ou ajouter plus d’écrans avec moins d’options dessus. Réaliser un processus de selection séquentiel (grouper et dissocier) - Attention la taille des pixel est plus petite sur l’iPhone et android phones (~+163 dpi) que sur l’écran de notre ordinateur (~+100 dpi). Donc à même résolution les screenshots vus sur un émulateur iPhone apparaitront plus grand qu’en réalité.
- Avoir un design cohérent avec l’OS. S’aligner sur le style, thème etc. du systeme. Ne pas essayer de trop casser les règles. C’est du temps donc de l’argent perdu pour pas de gain réel. Le branding de sa marque doit se jouer de façon subtile (couleur)
- Ne pas oublier que le tel n’est pas un ordinateur. On l’utilise dans des conditions différentes et dégradées (luminosité ambiante, bruit, qualité du réseau, etc.)
Source : Smashing Mag(1/2), Smashing mag 2/2, Jacob Nielsen’s Mobile Usability, Iphone UI guidelines, Android U.I guidelines, Alex Komarov
Interfaces tactiles projetées en holo
La Société Light Blue Optics présente un nouveau produit nommé Light Touch permettant de projeter sur n’importe quelle surface du contenu multimédia avec lequel on peut interagir. Et hop un clavier virtuel pour mon telephone projeté sur la table de mon salon. Et hop le mur de la salle de réu devient un whiteboard interactif. Le procédé s’appelle HLP (Holographic Laser Projection) et ça va cartonner.
Comment ça marche ?
Futures interactions et évolution de l’IHM
Enfin une (r)évolution majeure sur notre interaction avec l’ordinateur.
Le mutli-touch est au centre de toutes les attentions. Depuis L’iPhone et son ergonomie novatrice les choses bougent et tout le monde essaye de nous refiler du touch-screen dans tous les sens en nous vantant la simplicité et le bonheur que l’on peut en tirer (pensée à HP et son imprimante touchscreen, à la dernière pub windows 7 : comme si on allait s’amuser à pointer notre doigt sur un écran posé à la verticale, révolutionnaire ils ont tous compris…).
Bon personne n’a encore égalé Apple qui a par la suite adapté le concept au trackpad des mac. Puis, plus récemment, la “magic mouse“, où cette fois c’est une réelle souris avec une intéraction à 3 ou 4 doigts.
Là ou les choses commencent à devenir intéressantes c’est en reprenant ce concept de base et en l’appliquant à tout le systeme (au niveau de l’OS également). On ne rajoute donc pas simplement une petite fonctionnalité de mutli-touch tendance, mais on re-pense l’IHM avec l’ordinateur en profondeur en y intégrant cette forme d’interaction particulièrement novatrice et plus adaptée à notre workflow quotidien (de plus en plus d’applications/fenêtres lancées simultanément).
Car qui dit souris dit une action à la fois. Oui 1 souris = 1 main = 1 curseur = 1 action. Le multi-touch permet en théorie d’utiliser nos 10 doigts, donc faire plusieurs actions simultanées. Certes on ne va pas faire 10 choses en même temps, mais on peut interagir plus rapidement avec notre système.
10 GUI a bien compris l’enjeu et a sorti une vidéo concept de ce que pourrait donner une mise à jour de l’IHM. Exit donc le trio souris/clavier/écran. Vive le trackpad multi-touch géant/clavier/écran interprétant nos 10 doigts et permettant d’interagir de façon plus fluide et naturelle avec nos applications préférées.
Voilà un très bon exemple d’ergonomie où l’on adapte la machine à notre corps et à nos besoins (et non le contraire!). Et bientôt, d’ici quelque années, on se demandera pourquoi a t on utilisé pendant 20 ans une souris (donc 1 main et 2 doigts) alors qu’on avait 2 mains et dix doigts de disponibles?
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
Google Wave sors son app store
Google Wave, le service communiquant de google va se doter d’un app store qui permettrait aux développeurs de vendre des fonctionnalités supplémentaires. Wave sera sûrement un outil collaboratif indispensable dans les entreprises. Donc laisser la possibilité aux développeurs de la planète de l’améliorer est une excellente idée.
Microsoft wall office
Nouvelle vidéo de Microsoft mettant en avant leur concept de “surface”, i.e tables/murs interactifs, dans un context d’entreprise.
Impressionnant. Reconnaissance des personnes, interactivité avec des objets, visiocall, etc.
Projet Natal, la réalité augmentée selon Microsoft
Imaginez une Xbox sans manettes, permettant la reconnaissance faciale, la reconnaissance des mouvements du corps entier, l’application d’objets réels dans un univers virtuel (le gamin qui scan son skate pour jouer avec dans “tony hawk”, cf. la vidéo ci-dessous) et vice-versa (le coup de la fille qui essaie la robe).
Le projet Natal, ou la future génération x-box va un pas plus loin dans la réalité augmentée.
Il va aussi plus loin dans l’ergonomie, “l’intuitivité” et l’interactivité des outils. Ça laisse rêveur.
L’interface du Zune HD
Le Zune HD, (ipod touch de microsoft) vient de sortir.
Oui on est dans le multitouch à la sauce iPhone, mais là où c’est intéressant c’est en terme de navigation et d’interface utilisateur.
Un travail original a été fait autour du graphisme et du jeu autour des typo. On aime ou pas. Graphiquement parlant c’est joli et ça change. Après je reste sceptique quand à l’ergonomie et la prise en main pour les utilisateurs novices.Pas d’effets de bouton, pas de suggestion de cheminement pour l’utilisateur. Enfin c’est “classe”