L’architecture de l’information au service de l’UX 

EXPERIENCE UTILISATEUR

Nous avons plusieurs méthodes pour évaluer un site [BOU09]. Il y a les méthodes expertes qui ne font intervenir que le concepteur et ses expériences à travers un audit ergonomique par exemple. La seconde méthode est celle participative et qui va nous intéresser dans ce mémoire car en effet, elle consiste en l’intervention des utilisateurs dans le processus de création. Nous allons observer, analyser le comportement des internautes face à l’interface que nous leur proposons. Cela peut se réaliser de plusieurs façons : entretiens, questionnaires, tests utilisateurs etc. Puisque notre étude est centrée sur l’expérience utilisateur, nous jugeons que ce sont les méthodes participatives qui arrivent le mieux à concevoir un site proche des besoins de l’internaute.

Q U ’ EST CE QU ’ UN UTI LI SATEUR ?

Avant de s‘attarder de l’expérience utilisateur, il est important de définir la notion d’utilisateur. L’utilisateur est une personne, un individu qui profite d’un service, d’un outil, d’un produit etc. et est alors lié à la notion d’usage. C’est donc lui qui va juger de la qualité du service proposé et plus précisément ici du site devant lequel il se trouve.
Concevoir un produit sans prendre en compte un utilisateur est presque voué à l’échec.
Cette personne est caractérisée par plusieurs éléments : il a des besoins, des envies, des émotions et adopte certains comportements. De plus, elle a des buts et des motivations.
Enfin, l’utilisateur a des activités, certains usages délimité par le temps et le lieu [BLO09]. Tous ces éléments sont attachés à la personne et sont à prendre en comp te dans l’évaluation des besoins des utilisateurs lors de la conception du site.

DEFINITION

La notion d’expérience utilisateur date des années 2000 environ et est donc assez récente. Lorsqu’un internaute se trouve sur un site web, plus il sera de qualité, plus l’expérience utilisateur sera réussie. Elle a pour but de faire ressentir des émotions à l’utilisateur. C’est également évaluer comment il va percevoir l’interface sur laquelle il se trouve [DAV13]. Finalement, cela va être la relation qu’entretient l’utilisateur avec le service proposé, et dans le cas qui nous intéresse ici, un site web. Nous l’avons dit, dorénavant, c’est l’utilisateur qui domine tout projet que cela soit la création d’un logiciel ou d’un site web. Une bonne expérience utilisateur p eut se définir par le fait que les internautes reviennent souvent sur le site après leur première visite et que pour les sites e-commerce, le taux de conversion soit en hausse, c’est-à-dire que l’internaute devient un client. Nous pouvons caractériser une expérience utilisateur réussie selon quatre critères [BLO09] :
– Utilité : un site avant d’être utilisable, doit être utile. Il va devoir rendre un service à l’internaute. Dans le cas d’un site e-commerce, il répond aux critères de recherches de l’utilisateur. Même si le site ne lui a pas apporté ce qu’il cherchait, il peut tout de même le trouver utile pour d’autres besoins.
– Facilité et confort d’utilisation : l’internaute a atteint ses objectifs avec aisance et sans trop de difficultés et est donc satisfait de sa visite. L’utilisabilité du site est optimisée pour proposer la meilleure navigation possible.
– Confiance : le site inspire la confiance à l’utilisateur. Pour reprendre l’exemple d’un site e-commerce, nous devons trouver sur le site de la réassurance comme le paiement sécurisé, les moyens de livraison etc. Le design joue également un rôle important dans la confiance, en fonction des couleurs choisies, l’internaute va se sentir plus au moins à l’aise. Enfin, le site doit être mis à jour régulièrement.
– Qualité du service : la qualité du site va d’une part rassurer l’internaute et d’autre part, l’encouragera à revenir.

ETAT DE FLUX

La notion de « flow » a été élaborée par un psychologue, Mihaly Csikszentmihalyi dans les années soixante-dix [WIK13a]. Une personne est dans un état de flux lorsqu’elle est complètement immergée dans ce qu’elle est en train de réaliser. Un sentiment de réussite et de satisfaction est alors ressenti. A ceci s’ajoute un état de concentration où il est difficile d’interrompre l’activité. Cette notion s’applique à différentes situations comme dans le sport ou encore l’éducation. Nous utilisons ici cette notion pour un site web. Lors de la visite de l’internaute sur un site e-commerce, les critères qui peuvent lui faire atteindre l’état de flux sont les suivants [JOU13] :
– La facilité d’utilisation : l’utilisabilité optimisée ;
– Le design ;
– La rapidité : l’internaute atteint rapidement ce qu’il cherche ;
– La sécurité : des données personnelles et bancaires.
Si le site arrive à faire ressentir cet état de flux à l’utilisateur, alors il va se convertir inévitablement en client. Il est possible de réaliser des tests pour mesurer les attentes des internautes face au site proposé [JOU13] :
– L’attrait émotionnel ;
– La concentration ;
– Le sentiment de contrôle ;
– Et enfin la perception des défis : trouver le bon produit.
L’état de flux n’est qu’un exemple parmi d’autres pour caractériser l’expérience utilisateur.

METHODOLOGIE

Voyons dès à présent quelles sont les méthodologies appliquées pour évaluer au cours de la conception du site mais également après sa mise en ligne, l’expérience utilisateur.

Eye Tracking

L’oculométrie en français, est une méthode qui à l’aide d’outils technologiques suit le regard de l’utilisateur lorsqu’il est devant une interface. L’eye tracking est utilisé pour définir comment un internaute lit sur le web et peut compléter les tests utilisateur.
Dans le contexte d’un site, et notamment d’un site e-commerce, pratiquer cette méthode permet de comprendre où s’oriente le regard de l’utilisateur et s’il n’y a pas d’éléments à l’écran qui pourrait perturber l’expérience utilisateur. Cependant, si l’entreprise dispose de peu de moyens, il n’est pas nécessaire de pratiquer ce genre d’expériences qui sont très couteuses.
Les résultats se présentent sous deux formes. D’une part, sous la forme d’un parcours oculaire où l’on numérote les zones regardées par l’internaute. Souvent représentés par des points, ils sont reliés entre eux pour tracés au mieux le chemin parcouru. La deuxième façon de représenter les résultats est la carte de chaleur. Nous avons des tâches de couleur où les parties en rouge représentent celles les plus regardées par l’internaute jusqu’au noir en passant par le vert pour les zones moins fixées. Cette technique montre également le chemin parcouru. Au niveau de la lecture de l’écran, de multiples règles ont été définies, comme la lecture en F ou en Z d’une page web. Ces indications montrent comment devra être organisé le contenu de la page. Cependant elles sont contestées et à prendre donc avec précaution. De plus, il faut faire très attention à l’analyse de ses résultats des tests eye tracking. Par exemple, ce n’est pas parce que les utilisateurs regarde un onglet du menu plus qu’un autre que c’est parce qu’il doit être mis en avant : ils n’ont peut-être tout simplement pas compris le titre. Le risque est donc la généralisation des résultats [BOU09].

ARCHITECTURE DE L ’ INFORMATION

Le terme d’architecture de l’information existe depuis les années soixante dix mais a été oublié pour être repris dans les années quatre vingt dix dans les travaux de Peter Morville et Lou Rosenfelf [MOR02] et est fortement utilisé de nos jours. Le métier architecte de l’information se développe, en parallèle à la création de nouvelles formations.

DEFINITION

L’illustration la plus fréquente pour définir l’architecture de l’information est celle-ci : vous vous trouvez dans une pièce, si elle est mal rangée, mal organisée, vous n’allez pas retrouver ce que vous étiez venu chercher. Nous sommes face à la même situation pour un site web : si le site est mal organisé alors l’internaute risque de s’énerver car il ne trouve pas ce qu’il cherche et ainsi va quitter le site et ne reviendra plus. L’architecture de l’information intervient dans la conception du site web afin de créer l’organisation et la navigation de celui-ci. Les personnes en charge de cette fonction peuvent être l’architecte de l’information mais peuvent également être prise en charge par le chef de projet ou encore par le web designer. L’architecture de l’information intègre un certain nombre de critères et donne naissance à de nombreux livrables comme l’arborescence du site, les wireframes, les personas qui nous avons précédemment ou encore les scénarios d’usage [SCA12]. Négligez cette partie du projet peut engendrer des catastrophes d’un point de vue ergonomique du site et en termes de qualité de l’expérience utilisateur. L’utilisation d’un CMS permet de nous guider dans la création du site et peut nous faire oublier cette étape d’organisation, le contenu devient alors inaccessible [CHA10]. Pour l’agence Pimenteo, l’architecture de l’information va se déterminer avec le client et ce qu’il donne comme contenu à intégrer sur l’interface.

CRITERES

Organisation visuelle

Lorsque l’internaute va arriver sur une page, il va survoler rapidement tous les éléments qui se trouvent devant lui. Comme nous avons pu le voir, le contenu doit être bien organisé mais pas seulement puisque le visuel tient également une place importante. En effet, ce sont les images et les photos qui suscitent le plus le regard de l’utilisateur [BOU09]. De plus, si nous prenons comme exemple la page d’accueil, nous allons avoir sur un site e-commerce des visuels au centre de la page : cela se justifie par le fait que cela soit la zone la plus visualisée et la plus accessible [ERG11]. Ceci montre que l’utilisation d’images est fortement recommandée pour attirer le regard de l’internaute vers une cible. Nous pouvons parler de hiérarchie visuelle pour désigner c e qui attire en premier l’utilisateur jusqu’aux éléments secondaires. Elle varie en fonction des couleurs choisies (et de leur signification), des icônes explicites ou encore des encadrements. Si nous prenons l’exemple d’une fiche produit, les éléments qui ressortent le plus sont les visuels et le bouton ajout au panier : ils font partis de cette hiérarchie visuelle avant d’attirer le regard tout de suite sur la fonction de l’achat. Organiser par tâche [ERG11] Quelles sont les activités que le site permet ? Voilà à quoi doit répondre l’organisation par tâche, c’est-à-dire pensé en fonction de l’utilisateur et de sa logique.
Ainsi, lorsqu’il se trouvera sur le site, les tâches à effectuer vont lui paraître simple et facile d’accès. L’organisation hiérarchique se construit alors par tâche et apporte les éléments nécessaires pour qu’il puisse la réaliser. Cependant ce type d’organisation se prête plus à un logiciel qu’à un site, et à un commerce électronique dans notre cas.

L’ ECRAN AU CŒ UR DES DEBATS

Cette seconde partie a pour but de définir qu’est-ce que nous entendons par le terme support. A travers des études et des enquêtes d’usage, nous allons tenter de déterminer comment et dans quel contexte sont utilisés les différents écrans. L’une des caractéristiques principales dans les écrans est le tactile : quel rôle joue-t-il dans l’expérience utilisateur ? Toujours dans l’idée de regrouper les éléments importants de l’expérience utilisateur, nous tentons de faire une synthèse des règles élémentaires pour réussir son interface de site web.

SUPPORT

DEFINITION

Cette notion de « support » a toujours fait l’objet de nombreux débats notamment dans les sciences de l’information et du document. Qu’est-ce qui se cache derrière le terme « support » ? Dans le dictionnaire, le support correspond à un appui, un soutien pour supporter le poids d’un quelconque objet. Nous pouvons dire que cette définition ne correspond pas assez précisément aux supports dont nous parlons ici. Le support contient l’information et lui permet d’être rendu visible. Il est tangible contrairement à l’information qui est immatérielle. Il peut être un bout de papier ou un écran de l’ordinateur. L’arrivée des différents supports de lecture a suscité énormément de questions, notamment sur la pérennité du livre. Aujourd’hui, nous savons que les supports se complètent et ne sont pas là pour en supprimer un autre. Nous avons déjà vu l’exemple avec la télévision et c’est le même schéma qui se répète sans cesse.
Ce qui nous intéresse ici, puisque nous allons nous pencher sur les sites web, est le support lié à l’écran car c’est lui qui va déterminer s’il y a des modifications ou non dans l’expérience utilisateur.

LE SUPPORT COMMUN : L ’ ECRAN

C’est en 2008, dans l’enquête sur les pratiques culturelles des français [DON09] que l’on montre que l’écran est bien entré dans nos vies quotidiennes. Oliver DONNAT parle de « culture de l’écran » et explique que c’est aussi bien pour regarder des vidéos, des images que pour lire ou écouter de la musique. L’accessibilité y est pour quelque chose dans le développement de cette culture de l’écran puisque la multiplicité des supports permet d’avoir des écrans où que l’on soit. Nous sommes devant un écran à son domicile, au travail, dans le train, dans les magasins etc. Toujours selon l’enquête des pratiques culturelles des français, la notion d’écran se limitait jusqu’aux années 90 à la télévision et la visualisation de programmes télévisés. Aujourd’hui en lien avec l’évolution d’internet, nous disposons toujours plus de supports et donc de tailles différentes d’écran selon son utilité. On passe moins de temps devant la télévision pour en passer our confirmer ces propos, en France [MED13b], trois foyers sur quatre possèdent un ordinateur. Nous n’allons pas faire ici un historique de son apparition à aujourd’hui mais il est possible dorénavant d’acheter différents types d’ordinateur. Il y a les classiques que l’on a chez soi, avec l’écran, la tour centrale, le clavier, la souris etc.
Ensuite, il est possible d’avoir un « notebook », ces petits ordinateurs que l’on peut transporter partout. Bref, un échantillon toujours plus grand pour s’adapter aux besoins des différents utilisateurs.

Le mobile

Le second support qui arrive après l’ordinateur est le mobile. Près d’un français sur deux possède un smartphone [MED13b]. Il est utilisé quotidiennement et le plus souvent à la maison. Cependant, 77% ne sortent pas de leur domicile sans prendre leur téléphone avec eux. Nous sommes donc attachés et de plus en plus dépendants de ce support qui nous permet non seulement de téléphoner ou d’envoyer des messages, mais également d’accéder à internet. Ce qui signifie que l’on peut consulter ses mails n’importe quand, visiter les réseaux sociaux n’importe où, télécharger des jeux pour passer le temps dans les transports en commun etc. Autant d’activités qui donnent la possibilité à l’utilisateur d’être sans cesse connecté. Cela représente 78% des français possédant un smartphone qui l’utilisent pour se rendre sur le net [MOB13]. 55% des internautes s’y rendent quotidiennement [POR13].

La tablette

Entre le mobile et l’ordinateur nous retrouvons la tablette tactile. Son format permet de se déplacer n’importe où tout en gardant une taille d’écran convenable. Elle présente donc ses avantages par rapport aux deux autres supports. Cependant, selon Médiamétrie [REP13], l’utilisation des tablettes restent encore limitée socialement puisque cela reste un outil appartenant plus aux technophiles et surtout à une catégorie socioprofessionnelle supérieure. De plus, le profil de l’utilisateur reste masculin. Cela se résume à 15% des foyers français qui possèdent une tablette et ce chiffre ne cesse d’augmenter. Une étude sur les tablettes a montré que d’ici 2017 la vente de cet appareil pourrait bien dépasser celui des ordinateurs [MAL13].

La relation de l’écran avec internet

Les différents supports que nous venons de nommer donnent tous accès à internet.
Pour identifier un utilisateur qui se connecte à internet, on emploie le terme « internaute ». Cependant avec l’arrivée grandissante des smartphones et des tablettes, on parle désormais de « mobinautes » et de « tablonautes » pour définir un utilisateur connecté sur son mobile ou sur sa tablette [MED13b]. Nous aurions tendance à penser que ces appareils ne serviraient plus à grand chose sans l’accès à internet. Selon une étude de Médiamétrie sur les usages de ces différents supports [MED13b], les internautes se connectent pour suivre l’actualité ou encore aller sur les réseaux sociaux et les communautés sociales (forums, blogs etc.). La consultation des vidéos ne cesse d’augmenter. Par exemple, les internautes entre 15 et 24 ans regardent environ 170 vidéos par mois.

Table des matières
Remerciements 
Résumé 
Abstract 
Introduction 
Partie 1 : Contextualisation 
1. contexte du stage
A. Problématique et hypothèses
B. Pimenteo
C. Mission de stage
2. Etapes dans la conception d’un site web
3. Expérience utilisateur
A. Qu’est ce qu’un utilisateur ?
B. Définition
C. Etat de flux
D. Méthodologie
4. Architecture de l’information
A. Définition
B. Critères
C. L’architecture de l’information au service de l’UX
Partie 2 : L’écran au cœur des débats 
1. Support
A. Définition
B. Le support commun : l’écran
C. Différences notables entre les supports
D. Le tactile
2. Mauvaise expérience utilisateur
3. Bonnes pratiques
A. Les idées reçues
B. Les lois de la Gestalt
C. Règles essentielles
Partie 3 : Mise en pratique, conception de maquettes 
1. Sites e-commerce
A. Définition
B. M-commerce et t-commerce
C. Les achats en ligne et les différents écrans
D. Présentation PrestaShop
2. Le maquettage
A. Zoning
B. Wireframing
C. Logiciel utilisé pour les maquettes fonctionnelles
3. Conception des maquettes pour Pimenteo
A. Wireframes ?
B. Benchmark
C. Analyse du site démonstration de PrestaShop
D. Conception des maquettes pour un site « desktop »
E. Version mobile
4. Etude de cas spécifique : la question du formulaire
A. Le problème
B. Ce qui est conseillé
5. Solutions adaptatives : responsive web design
A. Présentation
B. Application, site mobile ou responsive ?
Conclusion 
Bilan apports du stage et du mémoire
Limites 
Difficultés 
Bilan humain 
Bilan sur la réflexion menée
Bibliographie 
Ouvrages 
Enquêtes, études 
Webographie 
Lexique 
Annexes 

Télécharger le rapport complet