Ergotest #05 : Netvibes Ginger (pré-béta)

Le 30 janvier 2008 par Jacinthe | Ergotest | 8 Commentaires »

Deux grands évènements ont eu lieu ces dernières semaines pour l’équipe de Netvibes : la récompense de la meilleure startup internationale aux Crunchie Awards 2008 et très prochainement l’apparition de leur nouvelle version : Ginger. En toute honnêteté, j’ai quitté Netvibes pour Google Reader il y a moins de 6 mois car ce dernier comporte de nombreuses fonctionnalités supplémentaires. Depuis quelques jours, j’ai la chance de tester Ginger en bêta privée. Cela va-t-il me faire revenir vers Netvibes ? (cet Ergostest portera uniquement les nouvelles fonctionnalités)

MAJ : Cette version Ginger est actuellement qu’une pré-béta. Aujourd’hui, de nombreuses fonctionnalités sont en cours d’améliorations. Il ne s’agit en aucun cas de la version finale. Ces pré-tests sont mis en place afin d’avoir les feedbacks des utilisateurs pour améliorer Ginger. Donc n’hésitez pas à contacter l’équipe de Netvibes.

A lire aussi le billet fort intéressant de Thomas Parisot.

A Propos

Netvibes Logo Netvibes, startup française basée à Paris et Londres, est lancé en septembre 2005 par Tariq Krim et Florent Frémont. Leur startup du même nom est une page d’accueil / un agrégateur personnalisable. Aujourd’hui, de nouvelles fonctionnalités apparaissent. Pour en savoir plus je vous invite à lire leur blog.

Ci-dessous la page d’accueil de Netvibes v1 :
Netvibes v1

Page d’accueil de Netvibes Ginger

Ci-dessous ma page privée Netvibes Ginger. Vous allez me dire : “pas grand changement à première vue”. Et pourtant…
Netvibes Ginger ma page

Intégration de l’écosystème

L’écosystème de Netvibes est une base de données conséquente à laquelle tout internaute peut : ajouter des modules Netvibes, agrémenter l’annuaire de flux RSS ou de Podcasts, créér des Univers en regroupant plusieurs flux RSS ou podcasts ayant des mêmes sujets comme Ergo IHM présenté dans un billet précédant.

Maintenant avec Ginger, cet écosystème est directement intégré dans notre page personnelle et nous permet une meilleure organisation et classification des widgets (entre autre).
Netvibes Ginger Ecosyteme

01Cette barre noire est le menu principale de l’écosystème. Ce repère permet une navigation globale par son omniprésence qui permet à l’utilisateur d’accéder à cet espace en permanence. Ses couleurs sombres lui permettent de se démarquer de l’espace personnalisable de l’utilisateur. Chaque icône est accompagné de son libellé qui est explicite afin de permettre une meilleure compréhension de sa fonction.

02Cette zone est une navigation locale qui s’adapte aux rubriques en cours de consultation : il y aura 2 ou 3 fragmentations afin d’établir une hiérarchisation du contenu par raffinement. C’est-à-dire que les choix et les actions de l’utilisateur se feront étapes par étapes. Ici, par exemple, Ginger lui propose de :

  • 1er colonne : “trouver des amis”.
  • 2ème colonne : sélection de son client email.
  • 3ème colonne : l’utilisateur rempli les champs demandés pour faire sa requête.

Toute la navigation globale de cet écosystème s’établit sur une navigation horizontale et non verticale comme dans l’ancienne version de Netvibes. Cet écosystème est construis sur cette architecture afin d’éviter des changements d’éléments qui pourraient porter à confusion l’utilisateur et surtout cela permet de créer une séparation net avec la page personnelle situé en-dessous.

03Cette séparation visuelle expliquée ci-dessus est aussi accentuée grâce une barre horizontale faisant office de fermeture de l’écosystème. Ce bouton est complété par le pictogramme traditionnel d’une croix sur fond rouge situé en haut à droite.

04 Le graphisme est assez fin et joue sur des nuances de gris et de noir. Lorsque l’utilisateur ou un de ses amis se manifeste par des commentaires, le cadre qui s’affiche est en angle droit sous forme de bulle. En revanche pour une action ou une recherche, le bloc qui affiche le résultat est présenté sous forme de bloc aux angles arrondies. Ce changement de graphisme permet à l’utilisateur de repérer visuellement les activités différentes.

Navigation Drag & Drop toujours aussi compréhensible

Dans mon billet précédent, j’avais évoqué les points importants pour l’utilisation du Drag & Drop. Ici, Netvibes a toujours très bien pratiqué cette navigation. Petit rappel :

Drag & Drop (glisser-déposer)

L’utilisateur étant confronté à une nouvelle interface, ce dernier va l’analyser afin d’identifier certains éléments qui lui permettront de comprendre son fonctionnement. Pour l’aider, il faut penser à :

  • Des éléments déplaçables et identifiables aussi bien dans leur déplacement que dans leur destination afin de rassurer l’utilisateur.
  • L’internaute doit voir en temps réel l’action qu’il est en train de faire. Ce retour immédiat lui permet de constater l’efficacité du site.
  • Lors du “déposer”, l’interface doit montrer le résultat de l’action. Les éléments déplacés doivent se manifester visuellement afin de garantir à l’utilisateur une validation de ses actes.

Netvibes drag&drop

  1. L’élément qui s’identifie comme étant déplaçable est indiqué par une infobulle qui explique à l’utilisateur l’action à faire. Dans la partie personnalisable de Netvibes, le curseur se substitue par le symbole d’une croix qui indique aux utilisateurs que le module peut être déplacé.
  2. Lorsque l’utilisateur le déplace, l’élément est visible et l’emplacement de destination se manifeste par des pointillés de couleur qui délimitent la zone.
  3. L’élément est “aimanté” vers la zone de destination et s’affiche directement avec la mise à jour de son contenu (Ajax) afin de valider à l’utilisateur un résultat positif de son action.

Netvibes drag&drop alternative

Alternative au Drag&Drop

Si l’utilisateur ne pratique pas la navigation glisser-déposer, Netvibes a prévu une alternative : un seul clic sur la vignette permet l’ouverture d’une pop-up affichant l’aperçu du widget. Ce dernier est surmonté d’un bouton permettant l’ajout du widget dans la page privée ou public de l’utilisateur.

Loading et bouton

La barre de téléchargement se substitue à la numérotation des pages. Son positionnement permet à l’utilisateur de constater le comportement et l’activité qui est en cours d’exécution face à la requête. Cela ne perturbe pas la lecture du contenu situé autour. Son affichage accentue sa visibilité tout en restant discret.
Netvibes bouton loading

L’options des onglets

'Netvibes onglet options

L’apparition des options pour modifier un onglet est similaire à l’ouverture de l’écosystème. Une navigation horizontale apparait avec 6 bloc qui guident étapes par étapes l’utilisateur dans sa volonté de personnaliser cet onglet. Lorsque l’internaute établie un changement, l’action se fait en temps réel ce qui lui permet de constater l’efficacité du site.

En revanche, le bouton de fermeture est assez éloigné des 3 premiers blocs. Il faudrait peut-être envisager une barre horizontale de fermeture comme dans l’écosystème. Cela éviterai un déplacement inutile et rendrait plus efficace et rapide la navigation.

Notons la possibilité de copier le contenu total d’un onglet dans sa page public. Eh eh ! (De même pour un widget, l’icône de l’enveloppe permet de le copier dans sa page privée ou public, ou bien de l’envoyer à un ami ou sur un blog)

Favoris

Netvibes favoris

Aujourd’hui avec la Ginger, l’utilisateur peut ajouter en favoris un billet d’un widget. Toutefois cette nouvelle fonctionnalité n’est pas assez efficace par son manque de pragmatisme :

  • Difficulté de les retrouver dans l’écosystème : aucun icône signale la rubrique où l’utilisateur peut les retrouver. Si ce dernier veut les consulter, il doit se diriger vers “Activities” puis “my private activity ou public”.
  • Impossible de les regrouper dans une seule et unique zone. Leur consultation ne peut que se faire dans 2 parties bien distinctes : “my private activity ou public”.
  • Impossible de les classer. Ils sont automatiquement organisés par ordre chronologique

Par contre, chaque favoris peut être commenté ce qui permet à l’utilisateur d’annoncer à son réseau pourquoi ce contenu lui a retenu son attention. Si je ne me trompe pas, cette fonctionnalité est impossible sur Google Reader à l’heure actuelle.

Attention détail minime : Notons l’inversement des icônes pour mettre en favoris un billet. Sur le widget situé dans un onglet l’étoile est situé à droite, par contre, lorsque le widget est ouvert et en cours de consultation, l’étoile (qui est de couleur différente) est située à gauche. N’oublions pas que l’utilisateur navigue avec plus d’aisance si le site est cohérent dans les localisations de ses éléments.

Réseau social

Une des principale nouveauté de Netvibes Ginger est la création de son réseau social. L’utilisateur peut archiver, commenter et partager du contenu avec ses amis mais aussi suivre leurs actions et accéder à leur page public que l’on nomme aussi “Univers”.
Netvibes ajout amis

Feedback utilisateur

Le but des feedbacks est d’informer et de prévenir l’utilisateur sur ses actions. Les feedbacks permettent une navigation rapide et compréhensible afin de renseigner et de rassurer l’internaute.

Ici, Netvibes confirme bien à l’utilisateur son action : si l’utilisateur ajoute ou supprime un ami, l’action est validée et confirmée visuellement par un picto “validé” accompagné d’un libellé qui se substitue au bouton.
Netvibes friends
Ginger permet aussi à l’utilisateur de voir les membres qui suivent son activité sans que ces derniers soient affiliés à lui. Ses internautes se manifestent dans la rubrique “Followers” avec l’absence d’une pastille verte qui signale qu’ils ne font pas partie du réseau de l’utilisateur. Toutefois, il manque sans doute un bouton “add friend sur la vignette du membre non-affilié. Car si l’utilisateur connait et désire ajouter cet internaute à ses contacts, il doit cliquer sur son avatar ce qui entraine l’ouverture de la page “activities public” de ce dernier. Ensuite, l’utilisateur peut l’ajouter à son réseau. Un raccourci sur la vignette serait sûrement un gain de temps et une alternative bien pratique.

Mon univers : une page publique

Une autre nouveauté avec Ginger, la possibilité de créer sa propre page publique afin de partager à tous ses flux rss, son actualité. Cette possibilité donne une présence en ligne (membre ou pas de Netvibes) qui reflètera chaque utilisateur, si ces derniers jouent le jeu. Voici ma page publique que je n’ai pas encore fini d’agrémenter : http://www.netvibes.com/jacinthe”

Tableau récapitulatif

Fonction Les + Les - Note
1. Design graphique - Design sobre et épuré
- Icônes et boutons compréhensibles
- Organisation visuelle cohérente et aérée
- Les boutons de type “add friend” ne sont pas cohérent à l’écosystème 3/4
2. Efficacité
[pertinence de l’information]
- Accès à la demande rapide et très rarement insatisfaisante
- Moteurs de recherche efficace
- Traduction française…aie ! 3/4
3. Efficience
[rapidité de navigation]
- Accès à la demande fluide
- Rapidité grâce au drag&drop + alternative
- Infobulles pertinentes
- Long au chargement, version béta donc…
- Problème des infobulles qui se chevauchent ou qui ne disparaissent pas
3/4
4. Satisfaction - Possibilité d’avoir une page privée et une page publique
- Un écosytème compréhensible et agréable à utiliser
- Réseau social
- Possibilité de partager ses favoris en les commentant
- Impossible de communiquer directement avec ses contacts
- Impossible de classer ses favoris
- Impossible de lire le contenu des billets à la chaine (en scrollant uniquement)
- Impossible de régler l’écosystème dans sa hauteur
2/4
5. Accessibilité - Version mobile
- Inter-compatibilité navigateur
- Conçu en Ajax 3/4

Conclusion

14/20

Cette nouvelle version de Netvibes était attendu depuis longtemps. L’ajout de la dimension sociale leur permet de s’aligner sur la tendance du moment. Il est dommage qu’il n’y est pas plus d’améliorations concernant l’outil de base. Et vous, qui avez eu la chance de tester cette version bêta, qu’en pensez-vous ? Déçu ou heureux ?

Ergotest | 8 Commentaires »

Netlife Research et son calendrier de l’inutilisabilité

Le 26 janvier 2008 par Jacinthe | Ergonomie | 4 Commentaires »

Cette semaine sur Synerg’heBlog, Etienne Maujean a publié un billet sur l’apparition du calendrier 2008 de l’inutilisabilité. Depuis 3 ans, ce calendrier est diffusé par l’agence web norvégienne Netlife Research qui s’amuse chaque année à trouver avec humour 12 erreurs d’ergonomie et d’utilisabilité à ne pas commettre.

En 2008, le ton est principalement accès sur le web 2.0. avec un site web, badusability.com, permettant à chacun de télécharger ce calendrier en différentes langues et formats. A vite découvrir !
Netlife Research et le calendrier de l’inutilisabilité

Ergonomie | 4 Commentaires »

Ergospeed #08 : Musana.com

Le 21 janvier 2008 par Jacinthe | Ergospeed | 3 Commentaires »

La semaine dernière j’ai découvert sur TechCrunch le nouveau service de gestion musicale Musana. Cette version béta permet entre autre aux utilisateurs de stocker ses musiques avec la possibilité de les écouter par le biais de leur mobile. Je vous invite à écouter l’interview de son fondateur Frédéric Thuard qui explique davantage son fonctionnement. (Cet Ergospeed va s’attarder sur le manque de feedback de ce service.)

A propos

Musana Logo
Musana
est un service de gestion musicale en ligne qui permet à l’utilisateur de gérer et de partager sa musique, d’écouter ses mp3 depuis n’importe quel ordinateur connecté ou par le biais de la 3G d’un téléphone mobile, mais aussi de découvrir de nouveaux artistes. Pour en savoir, plus je vous invite à lire le blog de Musana.

Manque de force visuelle des feedbacks

Le but des feedbacks est d’informer et de prévenir l’utilisateur sur ses actions, d’anticiper son comportement face à une interface nouvelle. Les feedbacks permettent une navigation rapide et compréhensible afin de renseigner et de rassurer l’internaute. Ici, Musana manque d’informations ponctuelles ou plutôt elles ne sont pas assez visibles et risquent d’occasionner des actions inutiles à l’utilisateur.

Upload de fichier mp3

Musana Upload mp3

Lorsque l’utilisateur veut uploader ses musiques, ce dernier arrive sur une page qui le renseigne clairement des étapes qu’il doit franchir. Ses indications sont mentionnées par des intitulés assimilés à des boutons significatifs. Malgré cette présentation, l’utilisateur peut être susceptible d’être confronté à des obstacles : une organisation visuelle diminuée, à l’étape 2, qui manque de visibilité sur ses feedbacks pas assez apparents.

L’étape 2 : Aucun avertissement ou aucune information ponctuelle indique à l’utilisateur ce qu’il doit faire après avoir sélectionné ses mp3. Après observation de l’interface, l’utilisateur perçoit en dessous de chaque morceau une indication qui lui permet de deviner le déroulement des évènements qui vont suivre :

  • La mention “uploading…” s’affiche en-dessous du premier titre de la liste. Malheureusement, elle est trop petite et n’est pas assez mise en avant. Le corps typographique et sa couleur ne permettent pas une forte distinction visuelle par rapport à l’ensemble du site.
  • Un indicateur de progression de couleur bleu s’affiche juste à côté de la mention “uploading”. Il s’agrandit au fur et à mesure du chargement du morceau. Ce dernier apparaît souvent tard dans le processus et n’est pas perceptible de suite. La présence du bouton “stop” juste à coté du titre n’est pas assez compréhensible même si l’utilisateur peut deviner son action : stopper l’uploading qui est en cours.
  • A la fin du chargement, la mention “Complete. File successfully added” apparaît avant la disparition du morceau. Le titre suivant monte en première position et commence à être uploadé. Notons que ces informations sont en anglais et pourtant le site est sur la version française. Ouille !

Ce manque de visibilité peut sans doute perturber l’utilisateur dans sa navigation et risque plusieurs comportements non-souhaité :

  • L’internaute peut passer directement à l’étape 3 sans s’apercevoir des actions qui se déroulent à l’étape 2 : une nouvelle page se charge et supprime sa liste de mp3 préalablement sélectionnée. Le fait de ne pas voir distinctement les informations ponctuelles de l’étape 2 risque de faire croire à l’utilisateur que l’affichage de ses mp3 sur le site signifie qu’ils sont déjà uploadés sur Musana.
  • Ou bien, l’utilisateur va perdre son temps à chercher un bouton “valider le chargement de mes mp3″ qui n’existe pas. L’inefficacité de l’utilisateur face à son problème entraînera sans doute un agacement non souhaité surtout lorsqu’il s’apercevra de la barre de progression par la suite.
  • Le bouton “Annuler le chargement” est situé juste au-dessus de la liste de sélection. Son positionnement peut porter à confusion : si l’internaute ne lit pas son intitulé. Il peut instinctivement cliquer dessus croyant qu’il valide le chargement de ses titres. Malheureusement cette action est l’inverse désirée et supprime l’ensemble de la liste.

Ecoutez sa playlist

Drag&Drop : L’utilisateur étant confronter à une nouvelle interface, ce dernier va l’analyser afin d’identifier certains éléments qui lui permettront de comprendre son fonctionnement. Pour l’aider, il faut penser à :

  • Des éléments déplaçables et identifiables aussi bien dans leur déplacement que dans leur destination afin de rassurer l’utilisateur.
  • L’internaute doit voir en temps réel l’action qu’il est en train de faire. Ce retour immédiat lui permet de constater l’efficacité du site.
  • Lors du “déposer”, l’interface doit montrer le résultat de l’action. Les éléments déplacés doivent se manifester visuellement afin de garantir à l’utilisateur une validation de ses actes.

Musana player

Quand l’utilisateur arrive sur la page permettant l’écoute de ses mp3, aucune information ou guide visuel lui indiquent l’action à faire. Après plusieurs tâtonnements et clics, l’utilisateur va sûrement deviner et comprendre le fonctionnement de cette interface. La plupart des actions se font grâce à une navigation glisser-déposer ce qui implique davantage l’utilisateur sur Musana.

Quelques difficultés sur cette page :

  • Lors de la sélection d’un album ou d’un artiste, l’utilisateur doit diriger sa sélection vers le visuel qui symbolise un CD. Cela déclenche le player qui réapparaît lors du rollover de la souris pour agir dessus.
  • Pour l’écoute d’un morceau de la playlist, un double-clic suffit pour lancer la lecture. L’organisation des titres se fait pas le biais d’un drag&drop limité à la surface d’interaction de la playlist.

Attention à la localisation du bouton “Accueil” qui permet à l’utilisateur loggé d’aller sur la home page afin de découvrir la musique proposée par Musana. Son positionnement n’est pas assez voyant surtout qu’il ne figure que dans le pied de page.

Une présentation soignée

musana jaquette

Lors du glisser-disposer de l’album une animation se joue et laisse apparaître une animation qui affiche la jaquette du cd avec ses informations. Une animation réussite et fluide qui dévoile l’ouverture tel un boîtier cristal ou un digipack. Les informations proviennent de GraceNote qui identifie et “normalise” les fichiers lors de l’upload (reconnaissance des tags, titres, jaquette, paroles…).

Conclusion

Ce que je regrette sur Musana est l’impossibilité de naviguer sur le site ou d’uploder des fichiers sans interrompre l’écoute de ma playlist. Une solution telle que la déjà fait Box.net ou Steekr.com peut-être envisageable : un pop-up contenant une application en Java permettant de glisser-déposer des fichiers dedans. Elle peut résoudre cette frustration et améliorera le transfert des données. Ou encore prévoir un outil comme l’Uploadr que propose Flickr.

Après la lecture de cet Ergospeed, j’espère que j’ai été compréhensible et que vos neurones ou vos yeux ne vous brûlent pas de trop ? Sinon bon Aspro !

Ergospeed | 3 Commentaires »

L’ergonomie sans le design n’est rien ?

Le 15 janvier 2008 par Jacinthe | Ergonomie | 5 Commentaires »

Qui aujourd’hui n’a jamais eu lors de sa première visite sur un site web une réaction telle que : “Oh que c’est moche !”, “Oulalaaa !” ou encore “Ah jolie !”… Ces exclamations sont souvent un de nos premiers réflexes qui peut être similaire au délit de faciès à l’égard d’un individu inconnu. Cette réaction assez primaire est quasi identique à une interprétation esthétique face à une interface web encore jamais utilisée.

Ergonomie et design objet

Avant d’aborder ce sujet face à une interface web, une “anecdote” liée aux Arts Appliquées va permettre de compléter et d’illustrer cette même réaction dans un tout autre domaine : le design objet.

Juicy Salif de Starck

Le très controversé presse citron “Juicy Salif” de Philippe Starck est sans doute un des exemple les plus parlant pour évoquer la confrontation entre l’esthétisme et l’ergonomie dans le design d’objet de la fin du XX° siècle.

En 1991, Philippe Starck conçoit pour l’éditeur italien Alessi un presse citron au design assez inhabituelle pour un ustensile de cuisine. Perché sur ses 3 longues pattes, ce presse agrume peut évoquer à la fois une araignée, une fusée ou une créature sortie tout droit d’un roman de science fiction. Son créateur avoue avoir eu l’idée en pressant un citron sur un calamar lors d’un déjeuner. D’où cette apparence semblable à un animal (ci-dessus la nappe du restaurant où P.Starck avait dessiné ses premières idées concernant cet objet).

croquis Juicy Salif Malgré ses lignes élancées, son aspect sobre et épuré le “Juicy Salif” est malheureusement peu pratique par son manque de prise en main pour une utilisation quotidienne.

Pour attester le manque de pragmatisme de cet objet, deux designers allemand, Adam und Harborth, se sont permis de réaliser, dix ans plus tard, un prototype en plastique afin de faciliter l’utilisation de ce presse citron : “Salif Aid fûr Juicy Salif”. Ce récipient s’encastre au cœur de l’objet et permet de récupérer la pulpe et les pépins des agrumes pressés.

L’ironie de cette “prothèse” provient entre autre par sa matière, sa couleur et le nouveau look qu’elle occasionne au “Juicy Salif”. Ce rajout décrédibilise cet objet devenu une icône des années 90 exposée dans plusieurs musées et galeries du monde. Philippe Starck, qu’on aime ou pas ce personnage, est l’un des premier designer français qui a su démocratiser et vulgariser au plus grand nombre l’importance de l’esthétisme dans nos objets du quotidien qui dans le passé devait être avant tout ergonomique.

Aujourd’hui, l’esthétisme d’un objet est aussi importante que son utilisation au quotidien. Si l’objet est beau vous aurez plus de plaisir à l’utiliser. Sur Internet c’est pareil.

Esthétisme, ergonomie et interface web

Tractinsky, Katz et Ikar ont ainsi réalisé une étude selon laquelle l’esthétique de l’interface influencerait la perception de l’utilisabilité du système. Les utilisateurs confrontés à une belle interface auraient tendance à lui attribuer un meilleur niveau d’utilisabilité.Ergonomie et beauté des choses

Lorsque l’appréciation esthétique d’un utilisateur entre en jeu pour sa première visite sur un site web, deux réactions sont envisageables :

  • Si l’interface plaît graphiquement à l’utilisateur alors ce dernier ne percevra pas immédiatement les erreurs d’utilisabilité du site et sa satisfaction de navigation se portera davantage sur son jugement de goût.
  • Si l’utilisateur à une forte répulsion dès l’ouverture de la page de son navigateur, il ne manquera sans doute pas d’évoquer son dégoût tout au long de sa visite même si le site possède une qualité d’utilisabilité optimisé.

En 2003, Nielsen Norman Group à recenser 42 études comparatives entre l’utilisabilité d’un site web existant et sa refonte : Usability Return on Investment. Cette étude à prouvé une augmentation de l’utilisabilité de l’ordre de 202%.” (Ergonomie Web, pour des sites web efficaces - A.Boucher)

Même si ce jugement est évidemment subjectif et lié aux émotions de l’internaute, cette réaction peu le conditionner tout au long de sa navigation. Si vous envisagez la création d’un site web ou sa refonte, n’oubliez pas que l’ergonomie se complète au design graphique : cela permet de satisfaire la qualité de l’interface ainsi que l’optimisation de l’utilisabilité du site. Si ces deux paramètres sont bien pris en compte dès le début, ils renforceront l’appréciation de l’utilisateur par rapport à votre site internet.

Si c’est pas beautiful çà !

Ergonomie | 5 Commentaires »

Ergospeed #07 : Adobe.com

Le 5 janvier 2008 par Jacinthe | Ergospeed | 4 Commentaires »

En décembre 2007, Adobe met en ligne leur nouveau site web : changement de stratégie, changement d’ergonomie et de choix graphique. Plusieurs éléments m’ont surprise et surtout fait sourire lors de ma première visite car Adobe s’est permis d’oser des changements et ils ont bien eu raison. (cet Ergospeed est consacré seulement à la page d’accueil)

A propos

Adobe a été fondé en décembre 1982 par John Warnock et Charles Geschke qui avait quitté le Xerox PARC pour améliorer et commercialiser le langage de mise en forme PostScript refusé par ce dernier. Plus d’infos : Wikipédia est là !

Ancien site Adobe

Un logo qui laisse place au contenu

Menu adobe

Adobe s’est permis de bouleverser la localisation habituelle des éléments tel que le positionnement du logo qui est situé en haut à droite et non à gauche. Le logo est associé au moteur de recherche qui est positionné sur un module en hauteur, flottant à droite Cette notion est accentué par l’ombre qui le souligne. Le module s’ajuste selon le format de votre fenêtre de navigation. Selon la distance qui le sépare de l’ensemble du contenu, qui lui est fixé sur la gauche, le logo Adobe s’estompe mais conserve sa fonction de bouton retour à la page d’accueil grâce à sa couleur forte qui constitue son identité depuis 1982.

Notons l’absence du bouton “ok” au moteur de recherche. Cela n’est pas un oublie d’Adobe mais une adaptation à leur cible comme le choix de positionnement de leur logo.

Un site ciblé et affirmé

Un site web doit répondre et satisfaire la cible que vous souhaitez atteindre. Chaque personne a un profil, un passé et une profession différente. Il est important de cibler vos utilisateurs afin de répondre au mieux à leurs demandes au cours de leur navigation sur votre site. Si vous essayez de concevoir un site pour tout type d’utilisateur vous risquez de provoquer une déception et la fuite de votre cible de départ.

Avec ce nouveau site web, Adobe a très bien su s’adapter à sa cible :
Si la discrétion du logo est volontaire, cela est surement du au fait qu’Adobe n’a plus besoin de s’afficher. L’identité graphique de la gamme de leurs produits est connu et reconnu de leurs utilisateurs et de leurs clients. Cette discrétion permet aussi d’accentuer l’impact visuel des logotypes qui constituent cette gamme.

Icone Adobe

La vidéo d’introduction, qui est “très créative”, affirme leur position, d’une part de sa qualité de réalisation mais aussi de son importance et de son emplacement sur la page d’accueil. Si la vidéo est tellement mise en avant, cela vient peut-être du faite qu’elle est devenu un format de consommation important sur Internet et qu’elle permet une information direct avec, comme ici, un contenu de qualité permettant de visualiser les performances d’utilisation des produits vendus par la marque.

Le menu est sobre, épuré avec des rubriques très sectoriel par le vocabulaire employé.

Pas de bouton “ok” pour lancer une requête dans le module recherche. Seule une action de la touche entrée sur le clavier valide la recherche. Cela permet à l’utilisateur un gain de temps en n’encourageant pas à l’utilisation de la souris.

boutonLe bouton “fermer/rejouer” de la vidéo est aussi un élément qui est surement compréhensible par un bon nombre d’utilisateur habitué à naviguer sur le web. Ce carré grisé flottant dans un espace vide et superposé à la vidéo est tantôt une croix pour stopper la lecture en cours, ou tantôt une flèche (animée lors du rollover) signalant la possibilité de la rejouer. A aucun moment une infobulle nous informe de sa fonction. Preuve que même ce petit bouton à une importance dans son utilisation et son absence de renseignement.
Les utilisateurs d’Adobe n’ont sans doute pas besoin de plus de détail… ?

Adobe s’est permis de réaliser un site web répondant au mieux à leurs utilisateurs qui doivent sans doute être principalement :

  • des personnes dîtes créatives
  • des personnes ayant des profils liés ou bien travaillant dans le domaine créatif
  • des personnes qui utilisent depuis un certains nombres d’années leurs produits
  • des personnes qui sont habitués à naviguer sur le web

Conclusion

Adobe est un éditeur de logiciel présent depuis 26 ans, leur monopole acquis au fil des années leur à permis de se construire une identité forte avec une communauté qui s’est consolidée au fur et à mesure de leur croissance. Pour conclure cet Ergospeed, il aurait été ingénieux de la part d’Adobe de substituer le bouton de validation du moteur de recherche par leur propre logo. L’utilisateur n’aurait pas cliqué sur le bouton “ok” ou utilisé la touche entrée de leur clavier pour valider une recherche sur l’ensemble du site mais sur le logo de la marque. Aujourd’hui la manière dont est présenté ce module avec la position du logo laisse envisager cette solution. Dommage qu’Adobe ne l’ait pas fait. Cela aurait été une mini-révolution ! (ok, j’exagère avec le mot “révolution” mais cela aurait été innovant)

Ergospeed | 4 Commentaires »