Ergospeed #13 : MoMa.com - Design and the Elastic Mind

Le 30 avril 2008 par Jacinthe | Ergospeed | 4 Commentaires »

Il y a environ 2 semaines, en revenant du Wif, j’ai rencontré Alexandre Tonneau, designer d’intéraction, qui m’a gentiment recommandé d’aller jeter un coup d’œil au site Design and the Elastic Mind du musée MoMA de New York. Alexandre ne m’a rien dit de plus, juste que je serais sûrement impressionnée.

A propos

Logo Moma
Le 24 février dernier, ce célèbre musée d’art moderne et contemporain New Yorkais inaugure l’exposition Design and the Elastic Mind. Cette exposition aborde le design contemporain sous toutes ses formes et permet aux visiteurs ne pouvant faire le voyage d’accéder à une exposition virtuelle grâce à un site web détaillé et une navigation inhabituelle.

Une navigation en étoile

A première vue, le site n’a rien d’exceptionnel : un design sobre, une organisation visuelle stricte et froide, une abondance d’information structurée sur plusieurs niveaux, une surcharge visuelle provenant de l’absence d’image, un sens de lecture à la fois verticalement et horizontalement.

Toutefois, ce site avertit l’utilisateur d’une navigation nouvelle et non-commune grâce à une animation qui se joue dès l’ouverture. L’utilisateur peut constater qu’il visite un site vivant avec un contenu diversifié à l’aide de cette animation fluide et visuelle.

Lorsque l’internaute a sélectionné une information, l’animation s’ouvre telle une “étoile câblée”. L’information principale s’affiche visuellement au cœur et s’entoure de plusieurs lignes qui signalent à l’utilisateur des directions différentes afin d’accéder à des informations similaires à sa sélection. Ces lignes sont la métaphore de câblage accentué par un son lors de leurs sélections. Bien sûr, ces possibilités restent au second plan et n’apparaissent qu’en contenu textuel et non visuel. Cela évite de polluer le site d’images inutiles qui risque de perturber la lisibilité du contenu. Si ce dernier valide cette information une fenêtre de type Lightbox apparait en superposition au site.

Pagination et niveau de lecture

L’importance des détails graphiques

Si nous nous intéressons aux détails visuels, notons l’importance de ces derniers qui permettent à l’internaute d’être orienté :

Moma exemple

  • Les flèches de pagination de couleur blanche et de taille importante signalent leurs fonctions grâce à leur positionnement et leurs omniprésences.
  • Les flèches de direction qui soutiennent le regard de l’internaute afin de le guider dans le bon sens de lecture
  • Le code couleur des intitulés (des “lignes directrices”) qui permet de classifier mais aussi d’apporter un peu de gaité à ce site.
  • Les points d’intersections qui changent de couleurs selon le nombre de croisement ce qui indique un taux d’importance similaire sur l’information
  • Lors du rollover d’une direction, cette dernière reste visible à la différence du site qui s’assombrit afin de laisser une meilleur lisibilité à cette dernière.
  • La barre de défilement est personnalisée à l’image du site afin d’homogénéiser l’ensemble.

Conclusion

Même si l’internaute risque de trouver ce site assez déroutant, au point de se perdre, l’accès aux informations complémentaires reste néanmoins instinctives malgré un afflux de contenu qui montre la richesse de cette exposition. Ce genre d’initiative et d’expérimentation sont importants pour faire avancer les recherches dans le domaine du web et des interfaces innovantes. Bien sûr, cela permet au musée de renforcer son image de marque avec une reconnaissance du public positive.
Et vous, qu’en pensez-vous ?

A lire aussi :

Ergospeed #12 : Mobile Samsung Player F490

Le 6 avril 2008 par Jacinthe | Ergospeed | 5 Commentaires »

Depuis longtemps, je souhaitais faire un Ergospeed sur un téléphone mobile mais je n’avais pas envie de le faire sur l’iPhone ni sur le LG Viewty. Grace à l’agence Heaven, le 27 mars dernier, j’ai pu assister à une démonstration du dernier téléphone Samsung en compagnie de l’équipe française technique et marketing. Je remercie Damien et François de leur accueil et de m’avoir invité à cette présentation qui fut très sympathique et enrichissante.

A Propos

Logo Samsung
menuLa marque sud-coréenne domine le marché du téléphone mobile français et en deuxième position mondiale après Nokia. Samsung sort environ une cinquantaine de téléphone par an en France et à reçu en 2007 la récompense du prix international du design iF 2007 pour son interface en “croix” que l’on retrouve dans le F490 (vendu exclusivement en France).

Une navigation à la carte

Le côté chic et raffiné du F490 est accentué grâce à son interface fine, tactile et son grand écran de 3.2 pouces (240×432 pixels) laissant une place importante à l’image. Sa nouveauté vient de sa navigation dites en “croix” rappelant l’utilisation du repérage cartographiquee. Chaque action de l’utilisateur est validée par une légère et douce vibration du téléphone provenant de la technologie “VibeTonz”.

Cette navigation est intéressante surtout pour l’utilisation du player audio et vidéo :

  • Instinctive et compréhensible grâce aux indicateurs visuels qui indiquent dès l’ouverture d’un média les fonctionnalités de la “croix” : play, pause, réglage du volume, de la durée (voir schéma ci-dessous)
  • Cette “croix” permet de guider et d’orienter l’utilisateur sur ses actions et l’accompagne dans ses mouvements.
  • Ce qui est dommage pour le player vidéo, c’est l’apparition de la croix qui peut obstruer la lecture en cours. Toutefois, cette dernière disparait très rapidement après action de l’utilisateur.
  • (Une alternative au scroll manuel pour régler le volume : des boutons sont présents sur le côté du mobile et permettent de régler le son)

Schéma Samsung

Sinon…

dossier

  • Ce mobile a de nombreux atouts dont l’optimisation des fonctionnalités avec un menu condensé et des pictos explicites.
  • Chaque rubrique sélectionnée dans le menu s’affiche avec un volet où l’utilisateur parcourt son contenu classé et le nombre de fichier qu’il contient. Cette solution permet une rapidité de navigation sans avoir besoin de passer par des écrans intermédiaires pour accéder au contenu.
  • La sélection en surbrillance et le copier-coller sont là. L’iPhone pourrait vite devenir jaloux !
  • La sensibilité aussi bien au doigt que à l’ongle (très important pour une nana) ralenti parfois la prise en main.
  • Pas de clavier Azerty et Qwerty. Pas de wifi.
  • Niveau design, les boutons du pavé numérique sont assez strictes et marqués par des ombres accentuées. Les message d’alertes et les sous-menus ne sont pas homogènes par rapport à l’interface spacieuse du téléphone.

Conclusion

3 mobiles

Qui dit téléphone tactile, dit iPhone. La comparaison se fera forcément. Néanmoins, ce téléphone ne sera pas un iPhoneKiller car sa sensibilité et sa navigation reste quand même assez difficile. Il reste néanmoins un très bel objet qui saura satisfaire le grand public.

A lire aussi :

Ergospeed | 5 Commentaires »

Ergospeed #11 : issuu.com

Le 20 mars 2008 par Jacinthe | Ergospeed | 2 Commentaires »

issuu logoDepuis quelques semaines, j’ai le lien de Issuu.com en réserve et je viens enfin de tester ce service. Issuu permet de transformer un PDF en “livre virtuel” (au format Flash) tout en ayant la possibilité de le partager avec d’autres internautes que se soit dans son blog ou sur le site de Issuu.

Partager et consulter

Une des grande qualité du site d’Issuu est son interface simple et épurée permettant une publication rapide et facile du PDF que l’on désire mettre sous format “magazine”. Par la suite, l’utilisateur peut prendre plaisir à consulter rapidement et de manières multiples son “ouvrage” :

1. L’apparition d’un bouton juxtaposé au bord des pages permet d’informer l’internaute de l’action qui lui permet de faire tourner automatiquement les pages d’un simple clic.
2. Situé dans le menu principale, des flèches permettent aussi de feuilleter le livre.
3. Entre ces deux flèches (2) est situé un picto (non-explicite) qui a pour but d’offrir à l’utilisateur une consultation du livre sous forme de “planche de contact“. “L’imposition” du livre se superpose au site à l’aide d’un fond grisé permettant de faire ressortir les previews.
4. Un “Dock” similaire à la plateforme Macintosh permet aussi une consultation plus rapide du livre avec les previews des pages du livres omniprésentes.
5. Lorsque l’utilisateur désire zoomer sur le livre, il doit simplement cliquer au centre d’une des pages…
6. …ou bien, l’option FullScreenest visible dans le sous-menu.


Noter à la fin du screencast la possibilité de créer un widget ou une page personnalisable : une bonne solution pour les photographes ou graphistes ne pouvant se faire un site web.

Un exemple de widget que l’utilisateur peu importer dans son blog ou un site web.
(photos du site Chairsoftheworld.com)


Une qualité FullScreen

Le mode plein écran est bien pratique pour visualiser et voir des détails du document.

La navigation en mode zoom (disponible aussi en mode FullScrenn) est instinctive mais assez inconfortable et peut-être déstabilisant pour lire des écrits.

Conclusion

Ce service est utile pour concevoir un book, une brochure ou un magazine mais certaines contraintes peuvent freiner une utilisation courante : impossible de copier du texte, de télécharger le pdf sources, de partager un livre en public ou privé, l’utilisateur doit préparer un pdf contenant toutes les pages car il n’est pas possible d’uploader pages par pages. Néanmoins, le site est fort agréable à utiliser et la représentation graphique/animation du livre est très subtile et fine.


Ergospeed | 2 Commentaires »

Infos du jour, bonjour !

Le 16 mars 2008 par Jacinthe | Infos | 0 Commentaire »

Ces 15 derniers jours ont été assez mouvementés d’où l’absence de billet durant cette période :

A très bientôt pour un nouveau Ergospeed en cours de préparation :)

Infos | 0 Commentaire »

Quatre navigations innovantes

Le 7 mars 2008 par Jacinthe | Ergonomie | 14 Commentaires »

La semaine dernière Smashing Magazine a posté un billet sur une soixantaine d’exemple de site web proposant des menus de navigation à la fois beaux graphiquement, ergonomiques et qui peuvent refléter les tendances actuelles. Qu’ils soient statiques ou animés, sobres ou chargés, ce billet fait une belle récapitulation des menus et permet de constater une évolution qui vont à l’encontre des conventions habituelles. Parmi les exemples, 4 ont retenu mon attention…

Des menus pictographiques

Ce site web comporte un menu fixé à gauche composé de pictogrammes qui illustrent les différentes rubriques. Même si la plupart de ces pictos sont compréhensibles par leurs simplicités graphiques, aucun ne sont accompagnés d’un intitulé. La balise “title” étant trop longue à s’afficher, elle ne permet pas une compréhension instantané des pictos. Toutefois, l’animation colorée qui se joue lors de l’ouverture du site guide l’utilisateur afin de lui faire comprendre où la navigation principale aura lieu et bien avant qu’il commence son exploration du contenu. (voir vidéo)

Playgroundblues.com


Pour ce portfolio, à la différence de l’exemple ci-dessus, chaque pictogramme est accompagné d’une infobulle qui s’affiche automatiquement lors du rollover. La particularité de ce menu est son organisation et son mode de fonctionnement : les sous-menus sont omniprésents (en-dessous des rubriques pictographiques) et sont organisés chronologiquement. Lors du rollover d’un des pictos, les items y correspondant s’affichent d’un fond de couleur cohérent à la rubrique. (voir vidéo)

Designforfun.com/portfolio.php


Un menu temporel

Malgré sa petite taille, cette navigation est une reconstitution visuelle et temporelle d’un calendrier qui permet la consultation de chaque projet réalisé de cette agence. (voir vidéo)

Polkdesign.net


Un menu expérimental

Après substitution du curseur par une étoile, l’utilisateur doit naviguer à l’aide d’un menu sous forme d’étoile interactive. Toutes ses actions vont se faire grâce au mouvement de la souris et du clic gauche actionné (la validation d’une rubrique se fait en relâchant le clic gauche). Cette navigation est très intéressante mais toutefois difficile car le manque de précision avec le mouvement de la souris pose parfois problème. A tester !
(voir vidéo)

Nickad.com


A lire aussi :

Ergonomie | 14 Commentaires »