Design + Développement. Web. Gunther Groenewege CFA - IGS

Transcription

1 Design + Développement Web Gunther Groenewege CFA - IGS

2 groenewege.com/cours

3 Design d expérience utilisateur UX Design

4 Le design d'expérience utilisateur est une pratique globale, utilisée par de nombreux professionnels du web, qui place l'utilisateur final au coeur de toutes les décisions. Le but est de construire un produit ergonomique, c est-à-dire un produit utile et facile d'utilisation.

5 «La plupart des gens font l erreur de penser que le design, c est l apparence (...) Le design, ce n est pas seulement l apparence et le style d un objet. Le design, c est comment un objet fonctionne.» Steve Jobs

6 La conception centrée sur l utilisateur Qui va utiliser ce produit? Pourquoi va-t-il utiliser ce produit? Comment va-t-il utiliser ce produit?

7 Le processus Découverte Définition Prototype! Réalisation

8 Méthodes et outils

9 objectifs du client besoins de l utilisateur structurer le contenu concevoir des solutions

10 interview atelier test utilisateur audit ergonomique analyse concurrentielle observation terrain statistiques enquête persona schéma de parcours plan du site esquisse - wireframe prototype test utilisateur

11 Interview des parties prenantes

12 L'atelier de définition des besoins

13 Les tests utilisateurs

14 L'observation terrain

15 L'analyse des statistiques

16 L'audit ergonomique

17 Les personas

18 Le tri de cartes

19 Le plan du site

20 Les wireframes

21 Ergonomie web

22 ERGONOMIE WEB = Utilité répondre à un besoin + Utilisabilité faciliter la satisfaction du besoin

23 Un produit est dit utilisable lorsqu'il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés, cherchant à atteindre des objectifs donnés, dans un contexte d'utilisation donné.

24 Architecture le site est bien organisé Est-ce que les regroupements sont logiques? Est-ce que la structure met en avant le contenu clé? Est-ce que les menus aident l'internaute à naviguer?

25 Pensez toujours que ces derniers ne vont pas parcourir l ensemble de votre site, mais peuvent s arrêter dès la première rubrique. Il faut donc que votre organisation respecte leur logique de recherche. Par exemple, sur le site de Cuisine Architecture Plus, la catégorisation force les visiteurs à choisir un style de cuisine. Or, il peut être difficile de choisir entre les quatre styles proposés. Plus embêtant, il y a fort à parier qu après avoir visité un des styles, une partie des internautes n ira pas visiter les autres. e 5 2 sateur styles quatre ables. plus.fr On voit à travers cet exemple que ce qui fonctionne assez bien en catalogue papier devient peu pratique sur le Web. Cela est dû au caractère fragmenté

26 Architecture oenewege.com) - 10 janvier 2014 à 23:29 La structuration met en avant les contenus clés Une bonne architecture se traduit, en termes de navigation, par un parcours fluide qui passe inaperçu aux yeux des visiteurs. Pour que cela soit Figur Les it coord du m Sourc

27 Organisation visuelle la page est bien organisée Éviter le trop-plein d informations Optimiser l organisation et la hiérarchie visuelle

28 Poynter tés sur plet en itement ck2004 autions l esprit sites de menter inutilement la charge visuelle et la charge mentale relative au traitement de l information perçue. Essayez aussi de remettre en question l utilité du texte pour vos internautes Organisation sur toutes les pages de votre site. Dans visuelle de nombreux cas, si vous avez besoin de légendes, c est que votre interface n est pas assez intuitive. Commencez par optimiser sa facilité de prise en main et ne l accompagnez d un texte que si c est vraiment nécessaire. re 5 5 ant et ne fait amps..cnc.fr Enfin, essayez de prêter attention à chaque détail, chaque élément que vous pourriez supprimer parce qu il n apporte rien d intéressant à vos internautes.

29 Groupe Eyrolles, 2010 Ce document est la propriété exclusive de Gunthe Dans une interface transactionnelle, où l internaute interagit avec le vous devez penser à adapter l interface au comportement et aux bes de Organisation l utilisateur. Il est fréquent de visuelle proposer à l écran toutes les opt possibles alors que l affichage de certaines d entre elles pourrait effectué dans un second temps. Figure 5 7 Sur l agenda n apparaisse Source : ww

30 un lien Précédent (même a dernière page d une liste, de fournir un lien Suivant. : Organisation visuelle Figure 5 9 doivent être ffectivement hez AlloCiné, applique sur ais aussi sur ur de page.

31 Cohérence la similarité interne Les localisations sont cohérentes Les appellations sont cohérentes Les formats de présentation sont cohérents Les interactions sont cohérentes

32 Cohérence Les localisations sont cohérentes Tout d abord, ne changez pas les choses de place! Cette recommandation est critique pour les éléments de navigation. En effet, une fois que l internaute a navigué d une certaine manière, il cherchera à réitérer cette stratégie à chaque fois qu il voudra se déplacer dans le site. Soyez donc cohérent dans l emplacement des barres de navigation. Figure 5 22 Sur le site de Roger & Gallet, la navigation est complètement inversée entre la première page et le reste du site. Source : Il ne faut pas non plus supprimer des éléments de navigation, puisqu ils servent de repères aux internautes. Si vous décidez de fournir une fonctionnalité de navigation, elle doit être présente dans l ensemble du site si

33 Les formats de présentation sont cohérents e travaille! ermes de vocabulaire eb. Il est très facile de lorsqu il n existe pas mer les choses. Les rs les choisissent alors où ils doivent les faire fléchir plus loin. odes, des métiers et e manière très rigoulaires contrôlés, the- Le deuxième type de cohérence concerne le vocabulaire utilisé. Vous devez toujours faire appel au même mot pour désigner un élément. Cette règle est valable pour les mots eux-mêmes, mais aussi pour leurs déclinaisons. Cohérence Par exemple, sur le site de Nike Store, on parle de Panier dans l en-tête de page, de Ajouter au Caddie dans le bouton d action, puis à nouveau de Panier dans la confirmation d ajout. Cette hétérogénéité rend difficile la construction d un modèle mental clair des options offertes à l internaute. Figure 5 24 Store, deux termes addie) sont utilisés rer au même objet. ttp://store.nike.com

34 Conventions la similarité externe Respecter les conventions de localisation Respecter les conventions de vocabulaire Respecter les conventions d interaction et de présentation

35 Information le site informe l internaute et lui répond L ordinateur informe et prévient l internaute L ordinateur répond aux actions de l internaute

36 té exclusive de Gunther Groenewege - 10 janvier 2014 à 23:29 dant, si notre écran a une résolution de pixels, le clic sur un article d une liste semble n avoir aucune conséquence. En effet, la ligne de flottaison se trouve alors plus haut que la zone où l événement a lieu. L internaute peut donc difficilement se douter que, suite à son clic, il s est passé quelque chose, mais plus bas dans la page. Notons que les résolutions plus grandes sont aussi pénalisées car le titre de la liste ne change pas : il est donc toujours difficile de repérer le changement. Information

37 Assistance le site aide et dirige l'internaute Dirigez grâce à l organisation et à la visibilité Dirigez grâce aux affordances Hiérarchisez vos call-to-action Attention à ne pas diriger de façon erronée Évitez d avoir à diriger grâce à un modèle d interaction adapté Assistez votre internaute en tenant compte de ses besoins en termes de tâches Fournissez de l aide explicite en cas de besoin

38 roger-gallet.fr le, ans scroll e des espaces de ce qui est dernier ne doit nsez toujours à s au-dessus du aller plus loin, us vous explicette limite. Revenez toujours à ce niveau fondamental : que proposez-vous à l internaute? Lorsque vous aurez répondu à cette question, vous verrez qu il est plus facile de présenter votre interface de façon à traduire parfaitement cette proposition. Hiérarchisez bien vos différentes propositions selon vos objectifs stratégiques et ceux de vos utilisateurs. Assistance Figure 5 58 omplètement er sur le logo, e légende est s internautes. e interface qui es internautes roger-gallet.fr Groupe Eyrolles, 2010

39 gne l internaute dans ses actions de manière très rassurante. Par emple, sur les sites d ING Direct et de Tumblr, dès que l internaute ace son curseur dans un des Assistance champs (et jusqu à qu il en sorte), ce rnier prend un format visuel particulier.

40 Ce document est la propriété exclusive de Gunther Gr ministère de l Éducation, par exemple, le fait que les libellé Zone B et Zone C soient des onglets n est pas tout de suite évide sont positionnés presque en symétrie des colonnes du tableau mier réflexe Assistance est donc de les considérer comme les titres de ces Il est déjà trop tard, puisqu on a demandé un effort inutile à l in Figure 5 62 La présentation de ce que les onglets ne son ne devrait pas nécess Source :

41 Ce document est la propriété exclusive de Gunther Groenewege - 10 janvie Assistance Figure 5 64 Sur le site d Orphise, l internaute doit cliquer sur un bouton Mettre à jour le panier après avoir modifié une quantité dans le panier. Source : Cette recommandation peut amener à préférer un élément d interface à un autre (par exemple, des boutons d incrémentation et de décrémentation plutôt qu un champ quantité, s il est techniquement difficile de repérer que l internaute est sorti du champ) règles pour optimiser l ergonomie de votre site

42 de ses besoins en termes de tâches Les éléments d interface eux-mêmes doivent être adaptés aux be plus fréquents de vos internautes. Prenons l exemple du champ e Veillez toujours à vous adapter au comportement des gens sur In Assistance faites un peu d analyse de l activité ou de tests utilisateurs sur un face existante afin de comprendre leurs raisonnements et leurs b 5 66 qu ils -vous ante. alcul, iqué! endar

43 Gestion des erreurs le site prévoit que l internaute se trompe L internaute ne doit pas faire d erreur L internaute doit facilement repérer et comprendre ses erreurs L internaute doit facilement pouvoir corriger ses erreurs

44 Gestion des erreurs Éviter les erreurs en empêchant la saisie de données erronées Vous pouvez protéger vos utilisateurs contre les erreurs en n acceptant que la saisie de données correctes et cohérentes. Si l utilisateur ne peut

45 Rapidité l internaute ne perd pas son temps Faciliter les interactions Éviter les actions inutiles Proposer de simplifier la tâche Des modes d interaction orientés efficience

46 Accessibilité un site facile d accès pour tous Accessibilité physique Accessibilité technologique

47 Satisfaction Satisfaire grâce au critère d utilité Satisfaire grâce à l esthétique et à l expérience utilisateur globale Satisfaire grâce à la qualité du service Satisfaire grâce à la puissance et à la fiabilité technique

48 Audit ergonomie

49 L'inspection cognitive L'évaluation heuristique Qui sont les utilisateurs? Quelles sont leurs tâches? Quel est le contexte d utilisation? Quelles sont les règles d ergonomie?

50 Pratique

51 antibioclic.com audit ergonomique

52 antibioclic.com audit ergonomique un site internet utilisé par des médecins généralistes un médecin utilise ce site pour rechercher quel traitement antibiotique prescrire le site est utilisé pendant la consultation! Quels problèmes rencontre-t-on en utilisant le site? Quels éléments ne respectent pas les règles et bonnes pratiques ergonomiques?