Comprendre l’internaute : d'abord un être humain

Spécificités et capacités dans les domaines perceptif, sensori-moteur, du raisonnement, de la mémoire ou du langage

1 - Découvrez et appliquez les théories de la Gestalt :

La loi de proximité La loi de similarité

Et les autres ...

1.1 - Loi de proximité

Notre cerveau tend à regrouper les choses qui sont proches physiquementProximité visuelle = indice de proximité conceptuelle

Cela implique que des éléments proches visuellement ont un rapport commun. Si un élément cliquable, un texte et une image sont proches, cela démontre que ces mêmes éléments ont un rapport et un objectif commun pour répondre à une action.

bonne mise en application : l’information est claire et les éléments ayant une fonction similaire sont regroupés. La navigation est donc facilitée.

La proximité doit respecter la logique des contenus

Niveau macro : un bloc différent sémantiquementsépare la « recette » de la zone « commentaire »

Niveau micro : lien « ajouter au panier » plus proche de la rangée 2

La proximité (défaillante) peut causer des soucis d'interaction

Imprécision du feed-back : « le livre a bien été ajouté au panier » ne permet pas de rectifier éventuelle erreur

La fonction Supprimer trop éloignée

Aide saisie dissociée du champ date :« attention vous devez saisir votre date de la manière suivante : jj/mm/aaaa »

1.2 - Loi de similarité

Notre cerveau regroupe les éléments qui se ressemblent propriétés (forme, taille, couleur…) ou comportement

une ressemblance ou une différence de forme est le signe que les objets sont comparables ou opposables d'un point de vue conceptuel

les pictos sont de même taille et de même couleur; cela paraît logique mais avec une telle quantité de pictos, il était essentiel d’appliquer cette règle pour garder une harmonie visuelle. Par ailleurs, les 2 blocs traitant du même sujet (l’écologie) ont une mise en page similaire, les couleurs et les formes utilisées sont les mêmes.

Le format et la couleur de « Etre client, c'est comment ? » semble être cliquable car il ressemble beaucoup aux onglets de la barre de navigation

Donne une indication erronée sur sa fonction car n'indique que la rubrique en cours

Regroupement par similarité : on perçoit deux types d'objets

Les boutons « sélectionner » et les vignettes produit sont appariés par couleurDans version précédente se faisait au survol.

Disposition dans le damier : impression de vide et de désordredu fait de son emplacement et de ses dimensions, la navigation Outils devient plus importante que la navigation principale en pied de page.

1.3 - Loi de clôture

Si plusieurs organisations sont équiprobables sur la base des lois précédentes, l'organisation en figure fermée a plus de chance d'être observée

Une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu’une forme ouverte.

La continuité peut être « créée » par le système visuel dans le phénomène de la figure de Kanisza.

La loi de clôture permet au cerveau d’avoir un cadre visuel (comme l’encadrement d’une peinture) permettant de concentrer l’attention sur le contenu au centre du cadre.

1.4 - Figure/FondUne ségrégation figure/fond doit s'opérer précocement dans l'acte perceptif pour que le cerveau soit capable d'organiser les patterns de stimulation en une structure

Le fond est perçu comme ayant une certaine homogénéité, il n'a pas de contour et se continue sous la figure.

L'organisation en figure/fond peut s'opérer de plusieurs façons à partir d'un même champ visuel comme dans les figures réversibles (vase de Rubin)

Ségrégation Figure/Fond

Un pattern de stimulation est vu de telle sorte que la structure résultante est toujours la forme la plus simple la plus équilibrée, la plus stable

1.5 - Loi de la « bonne forme »ou loi de prégance, loi de la simplicité

Un pattern de stimulation est vu de telle sorte que la structure résultante est toujours la forme la plus simple la plus équilibrée, la plus stable

1.5 - Loi de la « bonne forme »ou loi de prégance, loi de la simplicité

Les stimuli qui forment une « bonne forme » auront une tendance à être regroupés

- continuité- destin commun- symétrie- fermeture

2 - Fittsizing & affordance

2.1 - Découvrez et appliquez la loi de Fitts

Le temps mis pour atteindre une cible est proportionnel à la distance à laquelle elle se trouve et à sa taille

Loi formulée par Paul Fitts en 1954 sur la base d'expérimentation dans le domaine psychomoteur, avec l'objectif d'améliorer les cockpits d'avion.

« une cible est d'autant plus rapide (facile) à atteindre qu'elle est proche et grande »

● Les éléments cliquables doivent être gros : augmenter

- la taille réelle des éléments cliquables

- la taille virtuelle des éléments cliquables : surface cliquable (iceberg)

PLUS Fréquent qu'on ne le croit : exemmple whisky.frSeul le libellé textuel est cliquable et non l'ensemble de ce qui ressemble à un bouton

Augmenter la surface virtuelle permet derendre l'interface moins sensible aux « clics à coté »

● Les éléments cliquables doivent être prochesdistance entre les éléments cliquables : tenir compte de la logique d'utilisation par les internautes

« une cible est d'autant plus rapide (facile) à

atteindre qu'elle est proche et grande »

naturabrazil .fr

gmail.com : barre de boutons principaux fixe

● Éviter au maximum à l' utilisateur de couvrir l’écran avec leur main.

● Créer des cibles de tailles raisonnable : pas plus petites qu’un cm² (la taille du bout des des doigts).

● Les éléments qui suivent deviennent difficile à faire voir avec les interfaces tactiles : curseur (vous savez où sont vos mains), MouseOver action, double-clic, clic droit.

Conférence Dan Shaffer

● Attention aux interfaces élastiques

● aux interfaces tactiles

2,2 - Appliquez le concept d'affordance

Les affordances sont les possibilités d 'action suggérées par les caractéristiques d'un objet

Notion inventée par James Gibson (1977)Concerne toutes les possibilités d'action sur un objet, même celles qui sont latentes ou invisibles.

Repris en 1988, par Donald Norman « The Psychology of everyday things » et entre dans le champ de l'interaction HM.Définition plus restrictive : uniquement les possibilités d'action que renvoie immédiatement un objet lorsqu'on le perçoit.

J'aurais dû utiliser le terme «affordance perçue». Dans la conception, nous nous soucions beaucoup plus de ce que l'utilisateur perçoit que de ce qui est vrai. Ce dont le concepteur se soucie est de savoir si l'utilisateur s'aperçoit que certaines actions sont possible (ou dans le cas de la perception de non-affordances, impossible).

Les onglets contenant les intitulés cliquables "Une formation" et "un établissement" devraient également être cliquables pour élargir le champ d'action de l'utilisateur et faciliter l'accès aux contenus.Un changement d'état au survol conforterait l'utilisateur qu'il s'agit bien de liens.

Optimiser l'affordance ● « vous pouvez me

cliquer »

● « vous pouvez

interagir avec moi »

● attention aux affordances erronées

L'affordance vous « rend intuitif »

Seul le lien « Aller à la liste » est cliquable pour mener vers la catégorie Laine.On ne peut pas cliquez sur l'image qui est naturellement affordante au clic.

Pocket.fr : seul le bouton « En savoir plus » est cliquable.Photo et Nom de l'auteur non cliquables quoique très affordants au clic

Degré d'affordance :Hiérarchisez les actions« Finalisez votre commande » devrait être plus visible et affordant au clic que les autres fonctions

vin-malin.fr

education.gouv.fr

DirectionErronnée :

Les onglets « zones » ne sont pas les en-têtes des colonnes, se fondent dans le tableau

3 - Le nombre magique de Miller et la loi de Hick

Miller est un psychologue qui recense dans les années 50 un ensemble d'expériences et de preuves scientifiques tendant à montrer qu'au delà de 7 objets dans notre tête tout s'embrouille.Il définit l'empan de 5 à 9 éléments (7+/- 2) qui représente le seuil maximal de ce que l'on appelle notre mémoire de travail. Un élément ? Taille variable notion de « chunks » (blocs)

Référence théorique parfois mal interprétée

La loi de Hick, ou loi de Hick-Hyman, est un modèle de l'interaction homme-machine qui décrit le temps qu'il faut à un utilisateur pour prendre une décision en fonction du nombre de choix à sa disposition. Étant donnés n choix équiprobables, le temps moyen de réaction T requis pour choisir parmi eux est approximativement

Modèle plus approprié à la conception de menus pour le Web

● limites des menus déroulants classiques : site Douce France

Les internautes supposent souvent que la distance la plus courte entre deux points est la ligne droite. Avec des menus à plusieurs niveaux, ils ont tendance à faire glisser la souris en diagonale pour accéder aux sous-menus, ce qui a pour conséquence de faire disparaître le menu. Frustrés ils doivent recommencer. Jakob Nielsen, Site Web : priorité à la simplicité. Campus Press, 2003

● Super footer : L'étudiant

● Super menu : Sony

Audacieux... fournit une complète cartographie du site

Figure de Ponzo : illusion de taille et de surface – voir vidéo