Archives par mot-clé : Ergonomie

Quand on ne veut pas de client

Je souhaitais ouvrir une nouvelle ligne ce week end. Je regarde ce que propose Sosh, et je décide d’y aller.

Mais arrivé sur la première étape, je suis bloqué :

Première étape du processus d'achat Sosh

Pas de bouton « Valider », ou « étape suivante ». Par contre, j’ai pu imprimer, voir les conditions générales de ventes…

Finalement, j’ai ouvert une ligne chez Free 😉

C’est marrant car en relisant ce billet, et en regardant ma copie d’écran, je me rends compte que c’est probablement parce que le mobile choisi n’est plus dispo…

Sur le coup, je ne l’avais pas vu !

Mais alors, pourquoi proposer un m mobile qui n’est pas dispo ?

Un site original : Zara

Zara propose une page d’accueil avec une vidéo plein écran :

Home Zara

C’est très joli, mais c’est cela alourdi énormément le poids de la page.

Remarquons sinon a quel point la page est dépouillée, simplifiée.

La page catégorie :

Page catégorie

Toujours très sobre, et encore plus original !

Plusieurs éléments marquants :

Le défilement n’est actif que pour la partie centrale avec les produits. Le menu de gauche et la colonne de droite restent fixes.
Les filtres sont traités via une popup
La taille des photos est inhabituel : en fait on verra que la taille des visuels est la même sur la page liste et sur la page produit

La page produit ne l’est pas moins (originale) :

Page produit

En fait, sur cette page produit, on a pratiquement la même mise en page que sur la page liste : les photos défilent verticalement, avec deux colonnes fixes à gauche et à droite.

Bon, après avoir vu le panier, j’ai voulu tester le processus d’inscription et d’achat :

Inscription

Tout se fait dans une popup.

Mais je n’ai pas pu aller très loin, je n’ai pas réussi à passer l’étape du formulaire d’inscription (!).

Au final, mon sentiment est que le site est allé bien trop loin dans le travail créatif, laissant de côté les réflexions sur l’efficacité.

Responsive or not ?

Le responsive, vous le savez, c’est la mise en place d’une charte graphique élastique, qui s’adapte à la taille de l’écran.

Exemple avec Relay.com, sur un grand écran :

Relay en mode pleine largeur

Le même site sur un écran de type smartphone :

Relay sur un écran de smartphone

C’est sympa…

Mais je ne suis pas convaincu que ça soit très réaliste. Entre un smartphone et un écran de bureau, il y a trop d’écart pour que l’adaptation soit juste graphique.

Une solution plus raisonnable, il me semble, est de faire du « responsive limité » par famille de terminaux : une grille pour les ordinateurs (800 à 1200 par exemple), qui pourrait éventuellement marcher pour les tablettes, et une grille pour les smartphones.

De la simplicité à la complexité

Je bosse (entre autre 😉 ) en ce moment sur la conception d’une interface « métier » : un back office, pour une application en ligne.

Donc sur cette application, que l’on veut simple, on a essayé d’enlever « tous les boutons ».

Enlever tous les boutons ? Mais comment l’utilisateur peut il enregistrer ce qu’il fait ?

La voie à laquelle nous avions réfléchi, c’est une sauvegarde automatique.

Ce qui m’avais fait penser à cette voie, c’est l’iPhone, ou on ne sauvegarde rien, les choses se font automatiquement.

Sauf qu’on a fait un petit essai, et ça s’est avéré une mauvaise idée : pas intuitif finalement, et pas simple à réaliser (il faut ‘attraper’ les évènements pour lancer l’enregistrement…).

En plus, si l’utilisateur est en train de faire une modification, il ne veut pas forcément que celle ci apparaisse en ligne. Bref, c’était clairement pas une bonne idée.

Bon, on a donc rajouté un bouton Enregistrer, sur les pages.

Ensuite s’est posé la question suivante : l’utilisateur ne pourrait il pas faire une modification, l’enregistrer, mais ne pas la publier ?

On a donc réfléchi à ajouter un bouton « Publier ». On avait donc deux boutons : Enregistrer et Activer.

Ce qui est intéressant, c’est que finalement, à ce stade, sur 3 personnes, il y avait 3 interprétations différentes du bouton :

Pour Thomas, il s’agissait d’une publication globale, pour l’ensemble des options du back office.
Pour Adrien, il s’agissait d’une publication locale
Pour moi, je dois avouer que j’avais deux idées dans la tête, sans même me rendre compte du conflit : Activer et Publier. Je pensais « intuitivement » que les deux options se recouvraient bien. Erreur 😉

Après une bonne discussion, on est s’est rendu compte qu’on était parti bien loin, avec des choses plutôt compliqué, et pour l’utilisateur, et pour la réalisation.

Finalement, on est resté sur nos deux boutons : Enregistrer et Activer. C’est simple et assez efficace.

La méthode était débile ? Non je ne crois pas. On peut toujours ajouter pleins de boutons sur les écrans. Chercher à simplifier, toujours et encore est un bon credo.

Et la conception d’une telle interface, cela demande du temps, de l’énergie et du savoir faire. D’ailleurs, il suffit de se promener sur les interfaces existantes pour se rendre compte assez rapidement qu’il y en a qui se posent des questions et d’autres pas ;).

Bon, dans tous les cas, faut juste bien tester avant de « déployer » 😉

J’ai testé pour vous – Capitaine train

Capitaine train est une startup culottée, qui se propose ni plus ni moins de concurrencer notre voyage-sncf national.

Pour l’instant, le service est en beta test, sur invitation.

J’ai pu tester le service, et c’est plutôt très bien fait. Visite guidée :

La page d’accueil donne le ton, c’est clair, sobre, et classe.

La page d’inscription est là encore très simple, avec la mise en avant d’une identification via Facebook.

Le formulaire de recherche a vraiment été travaillé, pour accélérer les choses.

A gauche, on a les champs : départ, arrivée, date, …

A droite, les suggestions de recherche.

Je viens juste d’arriver sur la page, et la partie suggestion est déjà renseignée, avec, tout à droite, les dernières recherche que j’ai fat (devinez ou j’habite 😉 ).

ça, c’est vraiment top : en 1 clic, tout le haut du formulaire est rempli.

Le choix de la date est là encore super bien fait, sobre et clair. En particulier, l’idée de choisir par grandes plages horaire est une bonne idée pour simplifier l’interface.

On clique sur Rechercher et hop :

Les résultats sont là aussi très clairs, avec a gauche les différents trains et à droite, le détail du voyage sélectionné (juste un petit bug, sur la taille de la liste déroulante pour choisir le train, bon, c’est une beta 😉 )

Après avoir choisi son train, on peut payer :

Là encore, c’est clean.

Dommage qu’on ne me propose pas d’enregistrer ma carte bleue. Pour ce type de service, cela me semble tout à fait important.

Update> Le service permet d’enregistrer le voyage sur la carte fidélité de la SNCF (ce qui est super pratique !)

Alors, il sort quand ce service ?

Bon exemple d’ergonomie à plusieurs niveaux dans itunes

Quand on conçoit une interface, on est souvent confronté à un dilemme :

On souhaite faire une interface simple
On veut offrir des fonctions avancées

La solution est de proposer une interface à plusieurs niveaux de lecture, d’utilisation.

Plutôt que de vous embêter avec de la théorie, je vous propose un exemple concret, avec le générateur d’expressions pour les listes intelligentes de iTunes.

Le sujet, classique d’ailleurs, est de proposer un générateur de requête, sans avoir à demander à l’internaute d’apprendre un langage.

Dans ce premier exemple, simple, on peut ajouter des lignes, les unes sous les autres.

La première liste déroulante permet de choisir si on veut « un gros et » ou « un gros ou » entre les lignes :

Chaque ligne permet de choisir le critère de recherche, la liste est a peu près sur l’ensemble des champs associés à chaque médias (nom, date, durée, …).

C’est assez intuitif tout ça, pas la peine d’avoir bac + 5.

Le problème, c’est que c’est bien sympathique pour démarrer, mais cela ne permet pas d’exprimer n’importe quoi. Certaines requêtes nécessitent de faire des regroupements (les parenthèses des expressions).

Dans l’interface de base, on ne peut pas faire ça…. Mais en fouillant un peu, on trouve.

En appuyant sur Option, le bouton « + » se transforme en « … », et permet d’ajouter des blocs, comme dans l’exemple suivant :

D’un coup, notre langage d’expression devient bien plus riche !

D’autant que chaque bloc peut être un bloc ET ou OU.

Le côté intéressant est que cette fonction avancée n’est absolument pas visible par défaut. Il faut fouiller un peu.

Moi en l’occurrence, j’ai trouvé cette fonction sur un blog. Mais elle est très bien décrite dans l’aide, accessible depuis le « ? » en bas de l’écran.

Donc, c’est de mon point de vue un très bon exemple d’une interface ayant plusieurs niveaux d’utilisation :

L’utilisateur débutant y trouvera rapidement son compte.

L’utilisateur avancé trouvera un moyen de faire des choses évoluées.

La bonne gestion du désabonnement par Fab

Pour un site comme Fab.com, la gestion des abonnés est juste un élément fondamental.

Quand on clique sur le lien pour se désabonner, on arrive sur la page suivante :

Je n’avais jamais vu ce type de page aussi bien faite :

On est en même temps dans le plus grand respect de ce que souhaite l’internaute, et en même temps, on cherche des solutions, on pousse des options.

Ainsi dans cette page, le premier bouton, bien clair, permet de faire ce pourquoi on est venu : se désabonner.

Mais juste en dessous, la page propose plutôt de mieux régler les options d’abonnements, bien riches d’ailleurs.

Si on insiste, et qu’on clique sur le bouton pour se désabonner de tout, on arrive sur la page suivante :

Là encore, le message est assez juste. Le désabonnement est bien pris en compte, et la page le confirme.

Mais le bouton incitatif propose de se réabonner.

Encore une fois, tout cela doit être fait de manière subtile :

En premier lieu, on respecte les demandes et les choix de l’internaute. Rien de pire que de chercher à lui forcer la main.

En deuxième lieu, on cherche des solutions pour garder le lien, et proposer un service adapté.

Well done 🙂

Site e-commerce cherche désespérément une charte graphique web

Une charte, c’est un ensemble de règles, qu’on va appliquer sur l’ensemble du site.

Cela doit définir la façon de présenter les différents éléments du site : les boutons, les liens, les images, les menus, …

Une charte doit en même temps permettre aux créatifs de s’exprimer, et… aux clients d’acheter !

Finalement, peu de sites sont réellement construits à partir d’une vrai charte.

C’est vraiment dommage, parce que le gain apporté par une charte est énorme :

Gain pour le développement, puisqu’on pourra réutiliser des composants standards, développés pour correspondre à la charte
Gain en temps de réponse, puisqu’on pourra factoriser pleins d’éléments : Javascript, CSS, images. Ces éléments ne seront chargés qu’une fois pour l’ensemble du site
Gain en performance commerciale, parce que l’internaute « apprend » inconsciemment et s’y retrouve mieux… pour peu qu’on ai respecté quelques règles standard du web

Amusez vous a regarder les sites : quels sont ceux qui proposent une interface cohérente ?

Et vous, que proposez vous à vos clients

Le scroll infini, ou la fin des footer ?

C’est un nouveau paradigme des interfaces web.

Qui a fait ça le premier ? Facebook, Twitter ou Google ?

Je ne sais plus.

Toujours est il que ces différents sites proposent un scroll infini : au fur et à mesure qu’on descend dans la page, de nouveaux éléments sont chargés.

Vous pouvez essayer, par exemple, sur la page de résultat de recherche d’images de Google.

L’avantage de cette fonction, c’est de rendre la navigation plus simple : on scroll, jusqu’à avoir trouvé ce que l’on cherche.

C’est donc un avantage pour l’utilisateur.

Cela fonctionne parce que le chargement de la page est progressif, en ajax : on charge les éléments au fur et à mesure du scroll.

Cela pose plusieurs problèmes :

Il faut s’assurer que ce mode de navigation est bien « SEO friendly »
Cela fait des pages sans footer

Ce n’est pas très grave de ne pas avoir de footer, c’est juste qu’il faut y penser, et adapter le site à ce nouveau mode de navigation.

A voir :

Google image limite cette fonction, ce qui fait qu’on fini quand même par voir le footer.
On peut ajouter un « sticky footer », un footer affiché en permanence donc, et collé au bas de la page. A utiliser avec précaution parce que ce sont de précieux pixels occupés en permanence : il faut vraiment que ce sticky footer contienne des informations clés

Le vrai prix de la simplicité

Faire un site simple, un service simple, c’est ce qu’on veut tous.

Qui dira : « moi, ce que je veux, c’est un service compliqué » ?

Personne.

On veut donc mettre en ligne des services facile à prendre en main, à utiliser. Que ce soit pour un site e-commerce, une application back office, une application sur mobile.

Bon, on veut faire simple. ok. Et après ? On fait comment ?

Au début, quand on pose les choses, ça va bien.

Mais fatalement, on va rajouter des trucs. On présente l’ébauche de l’application à différentes personnes, qui disent : « oui, mais si je veux faire ci, ou ça ».

Et on rajoute les boutons, les champs…

Bref, en faisant comme ça, on n’aura pas un résultat simple. On n’atteindra pas l’objectif initial.

Parce que la simplicité, ça demande de faire des choix forts.

Il ne doit pas être question de pouvoir tout faire, depuis n’importe ou, mais d’avoir une application simple, intuitive à utiliser, avec les « bons chemins » pour accéder à toutes les actions. C’est pas du tout la même chose.

Le plus simple est de prendre un exemple, sur l’iPhone.

Sur un iPhone, ou un smartphone, l’écran est petit, et ici plus qu’ailleurs, la simplicité, c’est fondamental.

Quand vous allez sur les préférences, sur un iPhone.

Regardez bien, toutes ces options qui manquent ! Il est ou le bouton « Sauvegarder » ?

Il est ou le bouton pour annuler une modification ?

Vous voyez ce que je veux dire ? Les gars d’Apple ont fait ce travail, de nettoyage. Ils se sont posé la question, des fonctions essentielles, et de celles superflues.

Ne pas avoir l’annulation, ça a du être un choix difficile. J’imagine les discussions… Mais l’obsession de la simplicité a été le plus fort, et finalement, ils ont plutôt réussi.

Dans nos sites e-commerce, c’est pareil. Il y a pleins d’occasions ou on voudrait ajouter des options.

Le pire, c’est qu’on peut pas simplement dire « non ». Il faut peser le pour et le contre, de manière à retirer le superflux, mais a garder une grande cohérence.