Archives par mot-clé : Interface

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 ?

Adapter son site aux tablettes et aux mobiles

Les parts de marchés des terminaux « autre que PC » augmentent, et il devient de plus en plus critique d’avoir un site bien adapté à chaque terminal.

Pour les tablettes, le problème est le suivant :

Il faut prendre en compte le fait que la tablette peut être tenue horizontalement et verticalement.

Si la tablette est en mode vertical, on a bien moins de pixels en largeur. Il faut donc un site qui s’affiche correctement, avec une petite largeur.

Si la tablette est tenue en mode paysage, on est pratiquement sur une largeur standard… Mais même là, ça se discute : la tablette est quand même un petit écran, et il n’est pas raisonnable d’avoir la même version du site, pour un ordinateur qui a un écran de plus en plus grand, et une tablette, qui a un écran compris entre 7 et 10 pouces.

Bon, mais au delà ces éléments, le problème majeur, c’est d’adapter l’ergonomie à la tablette.

Avez vous remarqué qu’avec une tablette, ou un smartphone d’ailleurs, on n’a pas de souris ?

On remplace le clic par le doigt, ça, c’est bon.

Mais par contre, on n’a rien pour remplacer le déplacement de la souris.

Donc, toutes les fonctions accessibles via ce déplacement ne fonctionnent plus.

Exemples : plus de menus déroulants qui s’ouvrent au survol de la souris, ni d’image qui change, ni de zoom automatique, …

Bref, un site bien fait pour un PC ne fonctionne plus sur ces environnements.

La solution ? Pas le choix, de mon point de vue : il faut une déclinaison spécifique du site.

Dans cette déclinaison, on va travailler l’adaptation du contenu à l’écran, et en plus, on va repenser la navigation, de manière à ce qu’elle soit agréable à utiliser depuis une tablette tactile.

Au niveau technique, on n’est pas obligé de tout refaire. Si la boutique est bien développée, avec en particulier une architecture MVC, cela permet d’adapter principalement la partie Vue, et moins les autres développements.

Alors, quelle est l’utilisabilité réelle de votre boutique en ligne sur une tablette ?

 

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.

 

Des icônes qui ont la vie dure

Une icône, c’est un symbole graphique, qui doit permettre de comprendre ce qu’il faut faire, sans avoir à « lire le manuel ».

C’est super mais c’est un « art » très exigent. Bien souvent, on ne sait pas à quoi correspond le « joli dessin ».

Exemple, trouvé pas plus loin que sur l’extension Flash pour Chrome :

Vous reconnaissez ce symbole ?

Pourtant, il fait référence à un objet disparu : la disquette.

Bientôt, pour les plus jeunes, ce symbole ne voudra juste rien dire.

Ou alors, il deviendra le symbole de « enregistré », sans lien avec l’objet disquette ? Un peu comme une lettre de l’alphabet : la forme n’a pas de rapport avec le son associé.

[WANTED] D’où vient ce Dashboard e-commerce ?

Cet article est écrit par Julien Chaumond, auteur du livre Social commerce et CEO de Productism. Vous pouvez aussi suivre Julien sur Twitter.

Depuis quelques mois j’utilise ce screenshot d’un dashboard e-commerce dans des présentations et je le cite en exemple d’une interface claire avec un design réussi et une présentation des données qui les rend exploitables (« actionnables« ) facilement.

Problème, je ne me rappelle plus quel service a implémenté ce dashboard : est-ce que ça dit quelque chose à l’un d’entre vous ? Boutique open source, ou service en SAAS ?

Outil de wireframe élastique ?

Bon, une fois n’est pas coutume, ceci n’est pas un article, mais une question ;).

Je recherche un outil, pour faire des wireframes.

Vous savez, des modèles de pages, des templates « fil de fer ».

Mais ce dont j’ai besoin, c’est d’un outil pour faire des wireframe elastiques.

Elastique ?

Oui, pour définir un site, avec des pages qui s’adaptent à la largeur de l’écran (comme Amazon quoi).

Les outils, je connais Powerpoint, Axure, Justinmind… Mais je n’ai pas trouvé d’outil permettant d’exprimer les contraintes d’élasticité.

Dommage… A l’époque, avec le NeXT, il y avait un outil de conception qui avait une représentation graphique assez sympa pour représenter ces informations (Interface Builder).

On pouvait relier les objets entre eux, soit avec « une ficelle », dans ce cas, la distance entre les objets doit être constante, soir avec « un élastique », et dans ce cas, la distance peut changer.

Amazon US change de look

Quand Amazon change sa charte, le moins que l’on puisse faire, c’est d’analyser les changements.

Amazon, c’est quand même le numéro un mondial !

Donc, la home et les menus du site US ont été revus :

C’est surtout le header qui a été revu, avec un bloc recherche retravaillé.

Le menu principale est bien changé aussi, et il apparait, sur la home, replié.

Si on le déplie, ça donne ça :

A comparer au menu d’avant, toujours en ligne sur le site Français :

Au delà des changements cosmétiques, ce qui marque, c’est la mise en avant de tout ce qui est digital : Amazon croit fortement en la vente de produits dématérialisés, et met cette offre bien en avant !

Ainsi, les 7 premiers items sont tous des offres dématérialisées !

A voir aussi, les sous menus, bien plus travaillés que dans l’ancienne version  :

C’est très sobre, très clean, avec du merchandising (push d’un produit en bas).

Le comportement dynamique du menu est également bien plus travaillé, avec des « tempo » donnant un comportement bien plus agréable que dans l’ancienne version :

Cette version devrait arriver en France d’ici quelques semaines / mois ?

Page d’identification – Suite

Après avoir vu plusieurs écrans d’identifications, proposant finalement une vision plutôt symétrique : « J’ai déjà un compte » ou « je suis un nouveau client », je vous propose de regarder maintenant une autre solution, qui vise à dé-symétriser les choses.

L’idée, c’est de faire « comme si » tous les internautes devaient créer un compte.

Donc, la page affiche directement le formulaire de création de compte.

Pour les internautes ayant déjà un compte, on propose un lien ou un bouton, en haut de la page.

Exemples :

Salomon :

Vous voyez : on a un lien pour se connecter en haut à droite (assez discret) et sinon, on arrive directement sur le formulaire de création de compte.

Autre exemple sur Ela Stone :

Très bien fait cette page :

C’est le même principe que pour salomon sauf que l’identification passe par un bouton plus visible.

(je pense qu’on pourrait mettre un bouton plus « incitatif » pour valider)

Au final, je pense que cette présentation, si elle est bien réalisée, doit être plutôt efficace.

Pour un nouveau client, on gagne une étape, et une question inutile.

Pour un client existant, le plus souvent, il a déjà un cookie sur son ordinateur, on peut donc le reconnaitre et s’en servir pour orienter l’identification.

Sinon, le client existant connait la boutique, et il devrait trouver le bouton pour s’identifier.

Wizishop propose une base d’images pour sites e-commerce

En voilà une bonne idée !

Wizishop propose une « place d’échange » pour des images liées au e-commerce.

On peut naviguer par type d’image (bouton, logos, icones, illustrations), par couleur, format…

Et sur chaque image, on peut choisir le format à récupérer : JPG, PSD, …

La banque d’images est gratuite !

Bref, un service bien utile pour faire de jolis sites !