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 »

Ergospeed #10 : OLPC

Le 21 février 2008 par Jacinthe | Ergospeed | 8 Commentaires »

Le weekend dernier, j’ai eu la chance d’avoir accès à un OLPC : One Laptop Per Child. Voici mes impressions face à ce petit bijoux à moins de 200$ destiné seulement aux enfants situés dans les pays en voie de développement.

A propos

olpc logo
Créé en 2005 aux États-Unis, l’association à but non lucratif, One Laptop Per Child, a pour but de créer un ordinateur portable peu cher pour permettre à chaque enfant dans le monde d’avoir accès à la connaissance et à une forme d’éducation moderne. Ce projet est financé avec le soutien de plusieurs entreprises (eBay, Google, Marvell…) qui participent à l’activité de l’association en lui fournissant des expertises et des moyens dans certains domaines comme la logistique, la chaîne de fabrication etc.
Plus d’infos sur Wikipédia ou le site officiel OLPC.

A Savoir : préjugé à proscrire

Selon le wiki anglais de l’OLPC :

« Il doit être mentionné qu’une critique commune du projet est de dire : “Les gens pauvres ont besoin de nourriture et de logements, pas d’ordinateurs portables.” Ce commentaire, souvent, est ignorant des conditions dans lesquelles se trouvent les pays en voie de développement de par le monde. Bien qu’il soit vrai qu’il y ait beaucoup de personnes dans le monde qui ont manifestement besoin de nourriture et de logements, il y en a aussi des multitudes qui vivent à la campagne ou dans les banlieues urbaines et qui elles, ont à manger en abondance et peuvent s’abriter raisonnablement. Ce que ces gens n’ont pas, c’est un moyen décent d’accéder à une bonne éducation.»
(source wikipédia)

Prise en main intuitive mais…

En effet, ayant l’habitude d’utiliser un système Windows ou OS, j’étais assez hésitante sur cette navigation principalement constituée de pictogramme (sans intitulé) avec des localisations totalement différentes des systèmes habituels. Toutefois, après quelques secondes d’observations, la prise en main a été très facile et mes pré-acquis ont été vite oubliés.

olpc ordinateur

Caractéristique : objet destiné aux enfants

Quelques détails qui confirment que ce produit est destiné à un enfant vivant dans des conditions environnementales rudes :

  • Plastique léger, robuste et épais afin de l’impact des chocs et une utilisation brutale.
  • Coins arrondis pour éviter des blessures.
  • Couleurs péchues, dynamiques et attrayantes.
  • Sécurité d’ouverture : l’enfant ne peut ouvrir le laptop sans avoir déplié les antennes wifi.
  • Un clavier Qwerty au touché doux et agréable grâce à sa matière en caoutchouc qui résiste au sable et à la pluie.
  • Poignée ergonomique pour le transport, pour se servir de cet ordinateur comme d’un livre grâce à son écran pivotable qui peut passer en mode noir/blanc pour une lecture en plein soleil.
  • (Ecran 7,5pouces, résolutions 693×620px)
  • (Système Linux, processeur / WiFi faible consommation, mémoire Flash.)

Plus d’informations et d’explications sur le wiki de l’Olpc

Pictogramme et rollover

olpc bureau

L’OLPC n’a pas d’application mais des Activités
: l’association préfère utiliser un langage davantage destiné à l’apprentissage et à la pédagogie au lieu d’utiliser des termes technique. Cela permet de familiariser l’enfant à son nouvel outil. Ce choix est soutenu par une représentation visuelle du système de navigation qui utilise principalement des pictogrammes “ultra-culturel” (universel) permettant une meilleure compréhension pour l’éducation de l’enfant.

Pour illustrer cette idée de l’icône “ultra-culturel”, le wiki de l’Olpc donne comme exemple le pictogramme de l’œil (ci-dessus) qui identifie la webcam de l’ordinateur. Cette œil est celui de l’ordinateur et non de l’utilisateur. Il représente ce que peut voir et saisir l’ordinateur. Dans notre culture occidentale, on aurait tendance à mettre une camera ou un objectif. Ici, l’association a préféré créer un pictogramme pouvant parler à tous en humanisant l’ordinateur.
olpc rollover

La navigation sur le système de l’Olpc se fait principalement grâce aux pictogrammes et aux rollovers qui permettent d’afficher les actions ou options des activités qu’ils proposent.

olpc raccourcie bureau Note : Le raccourcie pour retourner au bureau est situé seulement à la troisième position dans la barre d’environnement. La priorité est mise sur la communication, le réseau et le partage avec d’autres enfants qui auront eux aussi un Olpc.

Le centre d’activité est un repère visuel par sa position centrale sur le bureau mais aussi par la disposition des activités qui s’affichent chronologiquement autour du logo.

J’ai noté un raccourci fort utile qui permet de superposer le cadre de la barre d’environnement et des activités par dessus l’activité en cours.

Le touchpad manque parfois de précision, les activités sont longues au chargement et la barre de défilement verticale (scroll) est trop fine par rapport au curseur qui est de taille importante. Je ne m’avancerais pas plus car je ne correspond pas à la cible de cette ordinateur et j’ai de forte habitude sur PC ou Mac ce qui n’est pas le cas de ces enfants. Cette initiative est toutefois honorable et mérite qu’on s’y intéresse.

Conclusion en vidéo

Pour finir ce billet je vous invite à regarder 2 vidéos fortes intéressantes. La première est l’interview de Nicholas Negroponte, fondateur du Media Lab du MIT, qui a eu lieu le 2 février dernier sur France24. Ce reportage est très instructif car il confronte, entre autre, l’Olpc et l’arrivée des ordinateurs à moins de 300$. Nicholas Negroponte défend son association avec justesse et conviction. La deuxième vidéo est un reportage sur les designers de FuseProject. Ils expliquent comment ils ont conçu l’Olpc avec ses étapes d’évolutions, ses contraintes, les différentes maquettes…

Ergospeed | 8 Commentaires »

Ergospeed #09 : Hooseek.com

Le 8 février 2008 par Jacinthe | Ergospeed | 12 Commentaires »

La semaine dernière Alexandre Huete, que vous avez découvert avec l’univers ErgoIHM, m’a envoyé un lien vers un nouveau “moteur de recherche” qui permet de soutenir gratuitement une à quatre ONG de son choix : Hooseek.com

MAJ : “Aujourd’hui le 10 avril 2008 hooseek vient de dépasser les 2 000 000 de recherches effectuées par les internautes. Nous avons de plus en plus d’utilisateurs, et les sommes récoltées pour les associations de votre choix sont de plus en plus importantes. BRAVO & MERCI à Tous et à Toutes. L’équipe d’Hooseek”

A propos

Hooseek logo
Fondée en novembre 2006, Hooseek est un “moteur de recherche” offrant la possibilité aux internautes de soutenir plusieurs ONG de leur choix gratuitement. Grâce aux partenariats signés avec des moteurs de recherche, l’échange du trafic établie et l’affichage des annonces commerciales des moteurs, Hooseek reverse la moitié de leur chiffre d’affaire aux ONG. Plus d’infos…

L’Innovation par le confort

La qualité du service vient de la possibilité de consulter les résultats d’une requête sur Google, Yahoo, Live Search ou Ask sur une seule et même page avec le choix de chercher par différents thèmes (image, dico, web et emploi).

Hooseek page d’accueil

Cette page d’accueil, sobre et épurée, reprend le logo de Hooseek au centre de la page et installe au mieux le champ de saisie du moteur. Toutefois des petits défauts subsistent (surtout en accessibilité visuelle) :

  • Lorsque l’utilisateur sélectionne un des thèmes de recherche, la sélection reste perceptible pour l’utilisateur car le picto change de couleur mais malheureusement son intitulé disparait. Il manque une information omniprésente qui permet de guider l’utilisateur.
  • Le champ de saisie du moteur est de dimension trop importante par rapport au bouton de validation qui est de taille insuffisante.
  • Ce problème de taille se retrouve sur les pictos du bas qui font office de menu principale. Malheureusement, ils sont illisibles à cause de leur petite taille.

Le Seeker & le SeekEasy

Hooseek commentaire

Le Seeker : l’efficacité d’Hooseek vient entre autre de son “ascenseur universel” qui permet de dérouler à l’infini les résultats de sa recherche. Cette particularité, fortement pratique, permet de supprimer la pagination ou le fameux “pages suivante”.

Le SeekEasy : L’utilisateur a la possibilité de conserver des résultats qu’il trouve pertinent d’une de ses recherches. Il ajoute sa sélection au “pense-bête” grâce au picto situé à côté du lien. La sélection faite, elle sera affichée sur la colonne de droite. Ce pense-bête interactif se trouve sur chaque thème et permet de s’organiser selon la recherche par thème.

Le SeekCare

Hooseek moteur de recherche

Le SeekCare est le service principale que propose Hooseek qui peut se résumer en 1 recherche = 1 don grâce à ce compileur de moteurs.

Ici, comme sur la page d’accueil, un problème de lisibilité peut freiner l’utilisateur dans sa navigation :

  • Les pictogrammes et logos des services sont trop petits
  • L’absence de légende ne permet pas de renseigner au mieux l’utilisateur. L’intitulé des thèmes, lors du rollover, s’affichent en dessous du champ texte du moteur à la différence de l’intitulé des logos qui s’affichent dans la colonne de droite. Un problème de visibilité et de perception s’annonce surtout pour un site élastique.

Hooseek emploi

Pour la recherche d’emploi, un module complémentaire au moteur apparaît et permet de sélectionner la région où l’utilisateur veut effectuer sa demande. Toutefois, il ne peut pas rechercher dans plusieurs régions en même temps, ni par contrat, par date de parution…

Menu Principale & bouton retour

Hooseek menu retour

Juste une petite remarque sur le logo qui est à la fois un bouton retour vers la page d’accueil mais aussi le menu principal. Chaque picto est situé juste en dessous et affiche leur intitulé (lors du rollover) en-dessous du logo comme s’ils devenaient la signature du service. Sinon, toujours la même remarque : problème d’accessibilité visuelle.

Conclusion

Un petit clic pour l’homme, un petit geste pour l’humanitaire !
Magnifique conclusion je trouve. En tout cas, j’ai adopté Hooseek et je l’utilise en permanence.

Liens complémentaires :

Ergospeed | 12 Commentaires »