Archives par mot-clé : Nouvelles interfaces

L’importance du détail pour les interfaces

La qualité d’un site passe par multitude de détails.

Des détails ?

Des détails qui impactent directement le taux de transformation du site. Des détails qui pèsent lourd donc !

Exemple : les boutons.

En premier lieu, le bouton doit avoir une forme sans équivoque, qui sera reconnu par l’Internaute comme un élément appelant le clic.

Un bouton bien clair : on veut cliquer dessus !

La couleur ressort bien du contexte, le libellé est clair. L’effet relief rajoute l’envie de cliquer.

En deuxième point, il me semble qu’on apporte un signal encore plus clair et « incitatif » en changeant la couleur ou la forme du bouton au survol de celui-ci par la souris :

Bouton Up (exemple d'Amazon)

Bouton Down (exemple d'Amazon)

(exemple extrait d’Amazon)

C’est bon ? Oui, mais je pense qu’on va aller dans un avenir proche un cran plus loin.

Je pense en effet qu’on pourrait améliorer l’expérience utilisateur en lui signifiant clairement, après le clic, qu’on a bien pris en compte sa demande.

En effet, le temps de traitement, qui suit le clic, est très variable, en fonction du débit de l’internaute, de l’engorgement du réseau, du taux de charge du serveur, …

Donc, il faut faire patienter l’internaute.

L’interface gagnerait en clarté si, après le clic, un signal visuel indiquait à l’internaute que sa commande est en cours de traitement. On pourrait par exemple ajouter sur le bouton, qui devrait être avoir un code couleur pour signifier que l’utilisateur a bien validé l’option, une animation représentant l’attente, dans le genre :

Représentation de l'attente

Je ne crois pas qu’on puisse faire ça en html / css standard. Il faut un brin de Javascript.

Je n’ai pas vu de site mettant ça en oeuvre (le dernier point je veux dire). Et vous ?

La qualité d’un service – le sens du pratique et du détail

Je devais préparer un trajet ce matin (et je n’ai pas encore l’iPhone 2 avec GPS 😉 )

J’ai commencé par utiliser un service national, mais le trajet ne m’allait pas, puisqu’il passait par le périf, et le périf en scoot, …

J’ai donc fait une nouvelle tentative avec Google Maps. Voici le premier itinéraire proposé :

Google Maps : itinéraire par défaut, via le périf

En cochant une case, j’ai pu préciser que je ne voulais pas passer par l’autoroute. Google Maps m’a alors proposé ce nouvel itinéraire :

Google Maps : itinéraire 2, en précisant que je ne veux pas prendre les autoroutes

En faisant un drag & drop d’un point de l’itinéraire, j’ai pu préciser que je préférais passer par les rives de la seine (bien plus rapide et sympa que le Bd Brune) :

Google Maps : itinéraire ok, via les bord de seine.

Et voilà, j’ai mon itinéraire. Simple et efficace.

On doit prendre modèle sur ce genre de service. Pas de détails inutiles, mais les fonctions qui répondent à de vrais besoins !

La longue traine vue par Dassault System

Tout le monde ne le sait peut être pas : Dassault System est aussi un éditeur de logiciel, dans le domaine du PLM.

3DS, c’est 8000 personnes (quand même !), dont la moitier en R&D.

3DS est leader sur son marché, et propose tout un tas d’outils, permettant de modéliser en 3D des produits. Ces outils sont historiquement utilisés pour les produits industriels (avions, voitures, …) mais aujourd’hui, le cadre d’utilisation de ces outils à bien changé, et sont également utilisés pour l’électronique grand public, ainsi que, par exemple, par les grands magasins, pour visualiser une mise en rayon virtuelle.

Bon, jusque là, on est encore dans un contexte purement B2B.

Mais cela évolue, surtout avec l’acquisition de Virtools (2005).

Donc aujourd’hui, 3DS propose 3DVIA :

3DVIA

La vision, c’est qu’après le texte, l’image, le son et la vidéo, la prochaine grande révolution pour le web sera la 3D.

Ce portail essaie de construire cette vision, avec tout un tas d’outils et de services.

On peut par exemple naviguer dans une bibliothèque de modèles 3D, qu’on peut consulter directement dans le navigateur (avec un plugins à installer). L’idée, c’est de construire le Youtube du 3D :
Copie d'écran de l'espace de partage de modèles 3D

Mais les ambitions de 3DS vont plus loin, avec d’autres idées plus futuristes.

3DS a ainsi signé un deal OEM avec Microsoft, pour enrichir MS Virtual Earth, et permettre à chaque utilisateur d’ajouter des objets 3D sur le monde virtuel de Microsoft. On peut ainsi modéliser sa propre maison sur son emplacement :

3DS propose d’aller encore plus loin, avec plusieurs idées « Web 2.0 ».

Ils ont ainsi développés une application FaceBook, permettant d’ajouter et de manipuler des objets 3D directement dans le réseau social.

Mais le plus étonnant est sans doute l’idée de la 3D « long tail » : une application permet de co-créer un modèle 3D sur Internet. On serait donc tous de futures créateurs 3D…

Exemple donné : un constructeur automobile diffuse le modèle 3D de la voiture en préparation, et propose à tout un chacun de modifier ce modèle. On peut ainsi changer la forme d’un tableau de bord qui ne plait pas, déplacer ou ajouter des éléments, …

Partagez vous cette vision ?

Pour ma part, je ne suis pas complètement convaincu.

Je pense bien sûr que la 3D va être de plus en plus utilisée, surtout avec la généralisation des player 3D (Flash ou même nativement dans les navigateurs).

La 3D peut être un bon vecteur pour améliorer la « proximité » avec certains produits, surtout pour les produits complexes.

Mais je ne pense pas que la 3D va prendre une place si importante que ça sur le Web, et je crois encore moins à l’idée qu’on va tous manipuler des modèles 3D (il faut s’entraîner vraiment longtemps avant d’arriver à faire ce qui est montré dans la vidéo ci-dessus).

Les couches logicielles

Couches, du hard vers l'applicatif

Donc, à la base, il y a du matériel.

Pour donner vie à ce matériel, on rajoute un système d’exploitation.

Par dessus ce système, on ajoute des applications.

Une application bien particulière est le navigateur Internet.

Ensuite, nos services Internet peuvent prendre vie, soit directement dans le navigateur, soit via une extension, Flash ou Java.

Chaque flèche indique un endroit pour développer une application.

Live from OnAir

Je m’étais inscrit à la journée OnAir de Paris.Le monde est tout petit, c’est l’occasion de croiser Fred, Olivier Ezratty, Christophe Lauer

La présentation était réalisée par toute l’équipe d’évangélistes Adobe : Mike Chambers, Rayan Stewart, …

AIR, c’est la solution d’Adobe, pour « sortir du navigateur » et avoir des applications qui tournent directement sur le bureau de nos ordinateurs, avec une vrai logique multi-cible (PC, Mac, Linux).

Bon, faut le dire, cette journée est « terriblement » technique !

J’en parlais avec Christophe Lauer, évangéliste microsoft sur les technos Sylverlight, c’est marrant comment Microsoft qui a un background technique fait tout pour draguer les designer, en faisant des présentations ou la programmation est plutôt caché, alors qu’Adobe, qui vient plus du monde des designers, fait des présentations super techniques (on a vu des lignes de commandes 😉 ).

Autre point vraiment intéressant : les logos des premiers utilisateurs : Salesforce.com, SAP, …

Comme évoqué dans ce billet sur RichCommerce, la logique AIR prend tout son sens pour certains éditeurs, c’est un retour de balancier après une période « full web ».

L’approche AIR est une vrai alternative, pour développer plutôt simplement une application ayant une interface nickel, qui tournera sur toutes les machines, et qui sera assez simple à déployer.

A ce titre, Adobe joue relativement seul sur ce terrain : Java n’est pas aussi simple et Microsoft n’a pas d’alternative (WPF n’est pas multi-OS et Sylverlight ne sort pas du navigateur).

L’après Google

Nous vivons sous l’aire Google.

C’est une domination absolue !

Google est LE moteur de recherche mondial pour Internet.

Et comme sur Internet, on trouve tout… à condition de savoir à quelle adresse, la fonction de recherche est devenue complètement centrale, au cœur de nos comportements d’Internautes.

Ainsi, pour un marchand, Google représente en général largement plus de la moitié du chiffre d’affaires.

Google a ensuite mis en place sa plate forme de publicité : Adwords.

Adwords est LA plate forme de publicité sur Internet. L’entreprise qui souhaite faire de la publicité achète des mots clés, et associe des annonces à ces mots clés, les annonces contenant un lien vers le site de l’entreprise.

Google se charge de pousser ces annonces, dans les « bonnes pages » : sur les pages d’affichage des résultats de la recherche, ou sur des pages intégrant le programme de publicité Google (Adsense).

Ces trois briques sont complètement imbriquées. Le moteur de recherche est la racine de tout. Adwords et Adsense utilisent les connaissances du moteur de recherche pour proposer des publicités extrêmement contextualisées.

Mais vous savez sans doute tout ça. J’en reparle juste pour « reposer le décor ».

Cette domination absolue ne peut pas durer éternellement.

D’abord, elle est trop dangereuse. Sur Internet comme dans n’importe quelle industrie, il n’est pas sain qu’un seul acteur ait une domination aussi forte. On s’en rend compte par exemple lors des censures liées à la Chine et au Tibet.

Et puis, le contexte évolue. C’est la vie des entreprises.

Alors, quels sont les évolutions, les changements qui peuvent déstabiliser Google, et permettre l’émergence de solutions alternatives ?

On peut tout d’abord imaginer que les lois anti-trust interviennent, comme elles sont par exemple intervenues, dans les années 80, pour démanteler AT&T.

Mais comment découper Google ?

L’activité de recherche, sans la fonction publicité, ne rapporte rien…

On pourrait imaginer imposer ce découpage (moteur de recherche / moteur de publicité) avec des API publiques et des contrats entre les entités. L’avantage de cette découpe est qu’elle permettrait, théoriquement, l’émergence d’autres moteurs de publicités, utilisant les bases d’index du moteur de recherche de Google.

L’autre évènement, qui pourrait modifier la donne, vient de l’évolution constante du Web.

Le modèle « page HTML avec des liens » sur lequel est entièrement bâti Google commence à vieillir.

Le Web devient interactif, richmedia.

Aujourd’hui, la solution passe par du déclaratif. On met des applications richmedia en ligne, et en parallèle, si on veut avoir un minimum de référencement sur Google, on met en ligne des données adaptées à Google.

C’est nécessairement une solution de transition, un plâtre provisoire.

Des solutions mieux adaptées aux contenus richmedia et aux applications en lignes vont nécessairement émerger.

Google pourra-t-il s’adapter à ces nouveaux modèles, en rupture avec son « Page Rank » ? Difficile pour Google, quand tout le business model est basé dessus…

D’autres acteurs pourront- ils créer des solutions crédibles ? Quels sont les investissements nécessaires pour atteindre la masse critique minimum ? L’intelligence de Google, à ses débuts, est d’avoir pris en compte, dès le début, l’ensemble de la problématique : pas simplement l’algorithme de recherche, mais également le problème lié au volume.

Concevoir des interfaces riches : nouveau métier ou déjà vu ?

Discussion enflammée lors du buffet, après le lancement de AIR et de Flex 3.

La thèse de mes interlocuteurs : rien de neuf sous le soleil. Concevoir une application riche, c’est du déjà vu. On faisait déjà ça au 18ème siècle (sic) !

Mes interlocuteurs : un ergonome et un consultant.

Je ne partage pas du tout leur point de vue.

Je pense qu’au contraire, la conception d’un service web, et encore plus d’un service web riche, c’est un vrai nouveau métier.

Je ne crois pas qu’on peut concevoir l’intelligence, l’ergonomie, la fluidité, la beauté d’un service comme on concevait un meuble.

Je pense que c’est fondamentalement des métiers différents, qui demandent des cultures différentes, des outils différents…

Le futur des applications en ligne / Lancement d’AIR demain

Demain soir a lieu le lancement officiel d’AIR d’Adobe (vous y serez ? Moi, oui !).

L’occasion de se reposer la question : quel est l’avenir des applications en ligne ?

On peut utiliser une application qui va se jouer dans le navigateur (un service Internet quoi).

Avantages :

  • L’utilisateur n’a rien à installer, donc un accès rapide à l’application, un accès depuis n’importe quel ordinateur, et pas de problème de mise à jour ;
  • On bénéficie de facto de toute les fonctions autour des URL (bookmark, copier / coller, et les effets viraux, en avec la transmission très facile de l’adresse du site) ;
  • L’utilisateur est (normalement) en sécurité, l’application en ligne ne peut pas accéder aux ressources locales de l’ordinateur : ni les fichiers sur le disque dur, ni les périphériques (micro, caméra, …). Rien excepté la zone graphique contenu dans la fenêtre du navigateur, la souris et le clavier pour entrer des données ;
  • L’interface est assez bien balisée (là aussi, normalement 😉 ), et l’utilisateur a des repères, il sait ce que c’est qu’un formulaire, qu’un lien, une page, …
  • L’application est la même, quelque soit l’ordinateur, le système d’exploitation, le navigateur (ok, je simplifie 😉 ).

Inconvénients :

  • Avec les applications évoluées, le navigateur est « décalé » : le bouton back est inutilisable, l’application a besoin d’accéder à plus de ressources (caméra, …) et l’interface est un peu limité ;
  • L’application n’est accessible que quand il y a une connexion Internet (a modérer, avec les propositions de Google).

C’est donc pour donner « plus d’air » aux applications en ligne qu’Adobe a développé son AIR.

L’idée est d’avoir le beurre et l’argent du beurre.

En fait, c’est évidement pas si simple :

  • L’utilisateur doit installer l’application AIR (ok, très peu de clics) ;
  • Les mises à jour sont pratiquement transparentes : comme il y a une application locale, il faut bien mettre à jour l’application. Mais cette mise à jour est automatisée (comme la plupart des applications, aujourd’hui) ;
  • L’interface n’est plus du tout banalisée. Ce n’est pas une critique, puisque justement c’est le but, de sortir des limites du navigateur. Le résultat sera dépendant de ce que feront les éditeurs… On verra le meilleur et le pire !
  • L’application est bien la même, quelque soit la plate-forme, c’est ce qu’apporte le moteur AIR.
  • L’application peut fonctionner en mode off-line, cela dépend de l’application (l’application eBay en mode off-line n’est pas opérationnelle) ;
  • On peut bien sûr se passer l’url qui pointe vers la page d’installation de l’application, mais il est certain qu’on n’aura pas le même niveau de viralité par rapport aux URL…
  • La sécurité : ah, je suis impatient d’en savoir plus demain. Adobe devait y travailler, c’est évidement un sujet clé.

Dans une application AIR, le runtime AIR n’est pas visible, seule l’application apparait sur le bureau de l’ordinateur.

La gestion des applications est donc laissée au gestionnaire de fichier de l’ordinateur.

C’est là que je reviens avec mon idée, d’un navigateur sans bord de fenêtre… C’est peut être un compromis plus intéressant : garder la notion de navigateur, d’URL, mais avec certaines applications en ligne, qui prendraient la main sur la fenêtre du navigateur.

Pourquoi ?

  • Pour garder justement la notion d’URL et tous les avantages associés ;
  • Pour avoir le double mode : service Internet ou service « application » ;
  • Pour simplifier encore plus les processus d’installation ;

Mais voilà, Adobe ne me demande pas mon avis pour spécifier ses produits. Microsoft non plus remarquez !

La valse des Captchas

Vous savez, ce sont ces codes, qu’on vous demande d’entrer, pour vérifier que vous êtes « humains » !

Les formulaires des différents services internet sont en effet parfois remplis par des robots, des programmes informatiques quoi.

Pour empêcher ça, on peut ajouter dans un formulaire un code, un Captchas.

Ce code doit être facile à comprendre pour un homme, et difficile à interpréter pour une machine.

Mais parfois, c’est difficile pour tout le monde.

Exemples :

Captchas 1

Captchas 2

Captchas 3

Captchas 4

Captchas 5

Captchas 6

Captchas 7

(trouvé sur http://www.johnmwillis.com/other/top-10-worst-captchas/ via Romain)