Magazines interactifs
Un nouveau magazine interactif nommé Glo (réalisé en html/javascript) par MSN vient de faire son apparition.
L’interface est vraiment très bien réalisée. La navigation principale se fait via scroll vertical.
On peut accéder aux détails d’articles via 1 click sur des boutons latéraux.
Présence constante du sommaire sous formes de vignettes marque page dans une barre semi-volante.
Idéal pour iPad. Of course.
On avait déjà vu ce concept un peu dans la même veine.
2010 tendences du web
Les tendances : Simple, aplati, fenêtres modales, énormes header, photos grand format, navigation au clavier, grosse typos, sites web d’une page, beaucoup de javascript.
Via : Smashing Mag, Web Designer Wall
Elements d’U.I
Une super liste de librairies d’éléments d’interfaces RIA (Ajax, flex, silverlight) bien intéressante et à garder sous le coude.
Avec notamment :
- Ext JS
- JQuery (plugins), JQuery UI, JQuery Tools
- MooTools (plugins), JXLib for MooTools,Mocha UI
- Filament Group
Et des controles types :
- Auto-complete/ Auto-suggest
- Carousel/Coverflow
- Calendar
- Charts & graphs
- Panels
- Dropdown multiselect
- datagrid
- inline edit
- …
Source : UX Booth
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)
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 ?
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
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.
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”