Consultation de sites web sur l'iPad d'Apple

Oui mais voilà, le format touchbook apporte de grosses différences dans la façon de consommer et d’interagir avec des contenus : Absence de périphériques de saisie (clavier / souris), utilisation de nombreux capteurs (écran tactile, accéléromètre, GPS). De ce fait les touchbooks induisent des modalités d’interaction complètement différentes des navigateurs (lire à ce sujet les très interessantes Form Factors Explorations de l’équipe en charge de l’interface de Chrome OS).

Répartition des types d'éléments d'interface en fonction du terminal

Prenons comme exemple le cas d’usage le plus évident : La consultation de contenus (article, livre, BD, photos…). En l’absence de clavier, l’utilisateur peut parcourir le contenu de façon laterale ou horizontale en utilisant l’écran tactile (pression sur les bords de l’écran comme sur Panelfly, drag & drop) ou l’accéléromètre (en inclinant le terminal pour faire “glisser” le contenu).

Consultation d'une bande dessinée sur un iPhone

C’est sur ce type de contenus que les touchbooks vont exceller : proposer une expérience de lecture à la fois naturelle (manipulation avec les doigts) et enrichie (utilisation d’animations, de sons, de vidéos…). Je vous conseille à ce sujet la lecture de cet article qui prédit un retour en force des contenus d’éditeurs (par opposition aux contenus générés par les utilisateurs) : The return of the LP and the future of book publishing.

Deuxième cas de figure : La recherche d’informations. Là aussi l’absence de clavier peut être palliée par l’usage d’un clavier virtuel (pour une saisie d’appoint), de nuages de tags ou de concepts pour un affinage empirique à la Quintura ou de listes de résultats sous forme de frise comme chez Cooliris.

Le clavier virtuel de l'hypothétique touchbook de Google

Autres possibilités d’interaction : Personnaliser les résultats de recherche en exploitant les senseurs (filtrage géographique à partir des données GPS) ou le profil de l’utilisateur (filtrage par affinités en fonction de l’historique d’achat iTunes).

Troisième cas de figure : Les jeux. Les jeux de type arcade pourront être exploités à l’aide d’un joystick virtuel (déjà largement éprouvé sur l’iPhone) , les jeux de conduite se serviront de l’accéléromètre et les jeux de plateau (de type Tower Defense) bénéficieront du multitouch. C’est également dans ce cas de figure que les touchbooks offriront une expérience très enrichissante pour les joueurs, d’autant plus si vous couplez ça avec le GPS comme pour les MMTRG.

Exemple de jeu de voiture sur l'iPad

Dernier cas de figure : les applications sociales. Ici il ne serait pas tant question de rédiger un billet pour un blog mais plutôt de consulter des flux d’activité. Pour cela des interfaces “aériennes” comme celle de Seesmic Look se manipuleraient très bien en faisant défiler les entrés et en cliquant à droite et à gauche sur l’écran. L’absence de clavier n’est ici pas pénalisante quand il s’agit de parcourir un flux, envoyer un poke, noter un contenu ou faire un re-tweet.

L'interface aérienne de Seesmic Look

Au final la consommation de contenus et services sur un touchbook est beaucoup plus éloignée de ce que nous pratiquons sur un ordinateur que vous ne le pensez. Je rejoins ainsi l’avis de Luke W sur la nécessité de définir une toute nouvelle expérience : iPad User Experience Guidelines.

Mais le pire dans tout ça, c’est que nous n’en sommes qu’au balbutiement de l’informatique tactile. Microsoft nous a ouvert les yeux sur les nombreuses possibilités des interface tactiles avec sa table Surface et l’on commence à voir des choses très intéressantes comme le bureau 3D de BumpTop.

Imaginez un peu ce que cela va donner avec les améliorations hardware suivantes :

• Utilisation de la webcam pour capter les gestes, la position de l’utilisateur ou encore ses expressions faciales ;
• Utilisation de gâchettes sur les tranches de la machine (comme sur les DS) ou de zones tactiles à l’arrière de l’appareil ;
• Utilisation d’écran en relief…

Tout ceci vous semble farfelu et lointain ? Vous seriez très surpris d’apprendre pourtant que ces technologies sont bien plus avancées que vous ne le pensez. Pour vous en convaincre, jetez donc un oeil à ça : Synaptics Debuts Fuse™ Next-Generation Mobile Phone Concept.

Alors ?

Bref, le footer est un élément essentiel de la construction de votre site à ne négliger sous aucun prétexte. Je vous propose donc de découvrir deux articles qui en parlent. Tout d’abord 10 Techniques for a Fantastic Footer où l’auteur énumère ses règles de construction pour un pied de page : Inclure un plan du site, un retour en haut de page ainsi que des liens vers les plateformes sociales. De ce point de vue là le site Sushi & Robots est un bel exemple :

Le pied de page du site Sushi & Robots

Il préconise également de le truffer de liens pour faciliter le rebond sur une page intérieure, comme sur le site RailsTrip (vous noterez au passage l’histogramme du nombre de billets publiés par jour) :

Le pied de page du site RailsTrip

Il est également précisé que l’on peut y mettre du contenu (encore une fois pour les visiteurs perdus qui n’ont pas trouvé ce qu’ils cherchaient en parcourant rapidement la page de haut en bas) comme sur WPBeginner :

Le pied de page de WPBeginner

Autre article très bine documenté : Informative And Usable Footers In Web Design. Les conseils prodigués y sont à peut près les mêmes, ils citent en prime le très bel exemple d’Apple qui fournit à la fois un fil d’Ariane et un plan du site :

Le pied de page du site d'Apple

Si vous cherchez d’autres sources d’inspiration, je vous recommanderais également cet article avec des exemples plus “exotiques” : 25 Creative Website Footers. Bon… je sais ce qu’il me reste à faire…

Le blanc (”whitespace” en anglais) est en effet indispensable pour faire respirer une mise en page et éviter de saturer l’interface.

Exemple de mise en page saturée sans espaces blancs

Le blanc est essentiel à la fois pour structurer la grille de lecture (en mettant en évidence les colonnes verticales mais également les lignes verticales) et rythmer la page dans sa verticalité.

Le même texte avec un bon usage des espaces blancs

Les espaces blancs sont essentiels pour améliorer la lisibilité et pour concentrer l’attention. D’une part car ils facilitent le décryptage de la page (et son survol par l’oeil) et d’autre part car ils mettent en évidence les contenus qu’ils côtoient. Formulé autrement : si vous voulez mettre en évidence un bloc de contenus, oubliez les couleurs qui flashent et privilégiez plutôt de larges espaces blancs autours.

Dans l’exemple qui suit (Rikcat Industries), les espaces blancs permettent de faire ressortir les titres sans avoir recours à de la couleur :

Très belle mise en page minimaliste chez Rikcat

Les espaces blanc sont aussi très intéressants pou faire des regroupements comme ici sur le site d’Astheria ou le blanc permet d’associer les titres avec les chapô des articles :

Utilisation du blanc pour grouper des éléments sur le site d'Astheria

Enfin le blanc peut donner, s’il est bien utiliser, une impression d’élégance et de sophistication comme sur le site de Urban Outfitters :

Elégance et sophistication chez Urban Outfitters

Notez que lorsque l’on parle de blanc il peut également s’agir d’espaces vides, comme sur ce blog où le header est vide mais avec un léger dégradé.

Bref, le blanc est une couleur très puissante et un élément essentiel de l’architecture graphique de vos pages web. Je suis à la recherche d’écrits de référence sur ce sujet, si vous avez des suggestions, merci de les mettre dans les commentaires.

Bad Usability Calendar 2010

Un moyen simple de se motiver… ou d’envoyer un message fort à votre patron ! Soyez particulièrement attentifs aux mois d’avril, juin, juillet et octobre.

Pour aller plus loin vous pouvez aussi vous procurer le très bon memento Ergonomie Web.

Donc en théorie c’est une bonne pratique de conception, sauf que dans certains cas, notamment pour les sites avec une arborescence très profonde, les fils d’Ariane ne tiennent pas sur une seule ligne car les intitulés sont trop longs. La seule solution est alors de faire un affreux retour à la ligne. À moins que vous ne puissiez cacher les niveaux intermédiaires et ne les déplier qu’au survol de la souris. C’est ce que propose ce site : CompareNetworks jQuery’d Bread Crumb.

Fil d'Ariane animé grâce à javascript

Plusieurs configuration sont possibles en fonction de la place dont vous disposez : tout cacher, ne pas plier le premier et/ou l’avant dernier niveau… Il y a en prime une petite animation au survol de la souris pour déplier le niveau (il faut pour cela utiliser la librairie javascript jQuery, cf. Getting Started with jQuery).

Le résultat est propre, mais terriblement perturbant (surtout avec cette animation). Le mieux serait encore de réduire la taille des intitulés de navigation ou de simplifier l’arborescence (exemple dans les pieds de page du site d’Apple). Sinon il y a toujours la solution par défaut de faire un retour à la ligne…

(via Escargot)

L’idée de génie est de proposer un formulaire où les intitulés sont directement dans les champs :

Le nouveau formulaire de l'Apple Store

Cette solution permet de gagner beaucoup de place et d’afficher toutes les étapes du processus d’achat en une seule page (grâce à un principe d’accordéon). Le principe n’est pas nouveau mais c’est la première fois que je le vois mis en application sur un formulaire entier et sur une boutique en ligne à très forte fréquentation.

Il y a d’autres exemples de ce type de mise en page, notamment chez FoodSpotting :

Le formulaire de création de compte de FoodSpotting

Une solution particulièrement efficace mais qui n’est pas forcément meilleure que d’afficher les intitulés à gauche (ou au dessus) des champs, comme ici un très bel exemple chez LaunchMind :

Le formulaire de création de compte chez LaunchMind

Bref, ça m’embête de vous dire ça, mais il n’y a toujours pas de solution “ultime”, tout reste une question de contexte, d’ambiance, de place disponible et d’intégration dans votre charte graphique. Plus d’exemples ici : Interface Design Inspiration | 30 Impressive Ways to Design Sign-Up Page/Form.

Particularité de cette application en ligne : une simplicité à toute épreuve.

L'interface simplissime de TeuxDeux

Je ne peux que m’incliner devant l’efficacité et la sobriété de cette interface : un champ et une colonne par jour avec des flèches pour avancer ou reculer la date, une zone de tâches sans échéances et la possibilité de rayer ou supprimer la tâche au survol de la souris.

Rien à redire, c’est du grand art.

L'interface de recherche du Guardian

Vous connaissiez déjà les intitulés-filtre de champ texte en forme de menu déroulant comme sur LinkedIn :

L'interface de recherche de LinkedIn

Vous connaissiez déjà les filtres de recherche inclus dans le champ texte comme sur Kontain :

L'interface de recherche de Kontain

Mais connaissiez-vous les champs texte intégrant un filtre déroulant ? Cette interface de recherche est ainsi disponible sur Giraffe Restaurants (une chaine de restos anglais) : Search-dropdown Hybrid Box. Soit vous saisissez directement le nom de votre ville dans le champs :

L'interface de recherche de Giraffe Restaurants

Soit vous cliquez sur la petite flèche pour faire apparaitre la liste des villes déjà sélectionnée :

La liste des ville sélectionnées pour la recherche du site Giraffe Restaurants

Un clic sur le nom d’une ville et les résultats sont affichés :

Les résultats de recherche sur le site Giraffe Restaurants

L’idée est intéressante mais la mise en œuvre est polluée par des traitements graphiques trop lourds. Dommage car cet écran est pourtant entièrement dédié à la recherche. J’ai souvenir d’autres exemples plus sobres… mais impossible de remettre la main dessus. Si votre mémoire est meilleures que la mienne, partagez vos exemples.

Illustration avec cette page d’accueil expérimentale pour Google :

La page d'accueil expérimentale de Google

Donc comme vous pouvez le constater, sur cette page il n’y a plus rien si ce n’est le logo et le champ de saisie, même pas un bouton pour lancer la recherche : Google’s Experimental Homepage Fades To A Single Word. L’astuce est de ne faire apparaitre le reste qu’après quelques secondes pour être sûr de bien concentrer l’attention sur l’élément le plus important : le champ.

Plutôt extrême comme expérimentation, d’autant plus que la page d’accueil de Google n’était pas la plus chargée. L’expérimentation se poursuit visiblement avec des variantes comme par exemple une version où est mentionnée la phrase “This space intentionally left blank” : Google Tests a Clutter-Free Homepage.

Dans le même genre il y a aussi Goosh, une interface textuelle façon Unix :

L'interface textuelle de Goosh

Un bel exemple d’épuration graphique qui va plus loin que YubNub mais qui aurait gagné à être encore plus épuré.

Toujours dans la série interfaces façon lignes de commande, je vous propose WriteRoom, un traitement de texte au look & fell très “roots“ :

L'interface très épurée de WriteRoom

La particularité de ce logiciel est de proposer un mode plein écran qui isole complètement l’utilisateur du système et donc de ses distractions potentielles. Bon par contre c’est un peu austère…

Terminons avec le remarquable Ommwriter, un traitement de texte qui propose la même approche mais nettement plus raffinée avec un fond d’écran très reposant et différentes ambiances sonores :

L'interface épurée et immersive d'Ommwriter

Le sentiment d’immersion est tout à fait remarquable et les fonctions ne sont jamais très loin puisqu’en bougeant la souris vous faite apparaitre une série d’icônes :

L'accès aux commandes avec Ommwriter

Autant je suis très sceptique vis à vis de WriteRoom, autant l’expérience utilisateur de ce Ommwriter est tout à fait convaincante car extrêmement aboutie : Ommwriter, écrire en toute sérénité. Notez qu’il existe des applications spécialement dédiées pour isoler l’application ouverte comme Think ou Backdrop.

Plein de bonnes idées / intentions… mais qu’il n’est pas forcément bon d’utiliser pour un site web. Je fais notamment référence à ces insupportables sites qui s’ouvrent dans une pop-up qui force l’affichage en plein écran, une horreur pour ceux qui utilisent des écrans à grandes résolution (HD ou Full HD). Bref, jusqu’où peut-on aller dans la recherche de l’épuration ? (d’où le titre du billet)

MàJ (30/11/2009) > Voici une méthode pour tester une autre version de la page de recherche de Google : Check the Redesigned Google (With Always-Visible Sidebar) Yourself.

Encore une autre version de la page expérimentale de Google

Vous noterez le travail fait sur les boutons et les liens en bas de page.

Les intervenants de la Journée Mondiale de l'Utilisabilité 2009

Je vous propose donc de découvrir l’intégralité des supports et des vidéos de cette matinée sur cette page : Journée Mondiale de l’Utilisabilité 2009.

Encore un grand merci aux intervenants (Olivier, Raphaël, Jérémie, Vincent et Romain) et aux partenaires de cet évènement (Bertrand et Lucas).

Je vous donne rendez-vous l’année prochaine. La date sera la même, reste à choisir le thème (vos suggestions sont les bienvenues).