Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

usability

concepts d'ergonomie
by

Cyril Vernier

on 22 April 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of usability

contenu
contexte
utilisateur
usability
ergonomie
physique
cognitive
organisationnelle
démarches qualité
amélioration des conditions de travail
ergonomie web
=
viabilité d'un site
+ offre
adéquat
le contenu est adapté au contexte, à l'utilisateur,
au milieu et à l'activité

le site doit aider à accomplir l'objectif de l'utilisateur
il anticipe les besoins
il aide à la décision
propose une solution si l'utilisateur est confronté
à un choix
il offre plus que nécessaire
compense par des informations précises la perte
due à l'écran, l'immatérialité du produit, de l'interlocuteur, ou la mise à distance
utile
le contenu doit présenter une réelle utilité
pour que le site se démarque des autres

1 contenu = 1 but
éviter le copier / coller de textes interminables
et rédiger exclusivement pour ce support
1 contenu ≠ 1 page
une page web peut présenter plusieurs contenus, pourvu qu'ils fassent sens dans leur contexte
formulation spécifique > formulation générique
entretenu
un site visité par les moteurs de recherche
est un site dont le contenu est renouvelé

procédés "maintainables" & "sustainables"
déterminer cycle de vie des informations
publication et expiration pour chaque contenu,
les nouveautés ne doivent pas côtoyer les archives
stratégie de contenu déterminée par rédacteur web
clair
le langage est la première interface
entre les personnes

un message cohérent implique une charge cognitive moindre
si le site est destiné à plusieurs publics, scinder le message : 1 registre = 1 audience
concis
réduire le contenu au maximum,
sans sacrifier l'essentiel

trop de contenu
affaiblit le repérage dans le site
rend la recherche complexe
amoindrit l'attention et dilue le message
ne répond pas aux besoins de l'utilisateur

préserver les données importantes
aider à la prise de décision, rassurer
riche
tout contenu utile a un coût

temps de création et de rédaction
ressources employées
spécifique
chaque plate-forme propose un contenu
qui lui est propre

1 plate-forme = 1 utilité
gestion de communauté, achat en ligne e- ou m-commerce, prise de contact, adhésion, diffusion, ...
1 plate-forme = 1 canal de communication
site, micro-site, landing page, blog, micro-blog, newsletter, réseaux sociaux, feed, app, ...
apprentissage interne
le site apprend à l'utilisateur à reconnaître
ses contenus et à les situer

les localisations sont cohérentes
informations et utilitaires conservent la même place
les appellations sont cohérentes
les intitulés restent les mêmes ou sont fortement similaires, le vocabulaire est précis
les formats sont cohérents
un même usage pour une même forme
les interactions sont cohérentes
objectifs
efficacité
efficience
satisfaction
accomplir un objectif aisément
diminuer le temps nécessaire à l'action, informer, réduire les erreurs possibles
prolonger l'expérience, inciter à revenir ou à recommander
apprentissage externe
le site exploite les conventions et standards,
il facilite la reconnaissance de ses processus interactifs

utiliser les conventions et standards en vigueur pour le milieu, l'activité et l'époque
viser les solutions adaptées à l’utilisateur
topographie & conventions de localisation des contenus, conventions de vocabulaire,
conventions d’interaction et de présentation
une convention mal utilisée frustre l'utilisateur
gestion des erreurs
le site reste courtois et aide à corriger les erreurs

avant l'erreur : protéger
informer l'utilisateur de ce qui est attendu (comportement, format...), prévenir les saisies erronées, corriger à la volée,
utiliser des éléments adaptés : les types de champs de formulaire correspondent à un usage spécifique,
exiger une confirmation pour les actions risquées
après l'erreur : repérer et comprendre l'erreur
au-delà de l'erreur : aider a comprendre la correction attendue, apprendre à ne pas reproduire
satisfaction
le site apprend à l'utilisateur à reconnaître
ses contenus et à les situer

satisfaire par l’utilité
fournir du bon contenu, proposer des micro-utilités pour optimiser la satisfaction, permettre de remplir les objectifs
satisfaire par l’esthétique et l’expérience utilisateur
satisfaire par la qualité du service
satisfaire par la fiabilité : le site doit fonctionner
responsive
adapter le contenu à l'interface

proposer une navigation adaptée au terminal
proposer une lecture adaptée au terminal
penser de nouvelles interactions
http://www.mobiletuxedo.com/touch-gesture-icons/
opter pour la verticalité (écoulement naturel du texte)
contraintes
être attentif aux contraintes ontologiques

veiller à ce que l'écosystème du site soit propice à une attention optimale
penser aux conditions de consultation mobile
1 pouce / 1 oeil, placement des actions
disposer les informations selon leur aisance d'accès
espacer les éléments interactifs
penser à la taille d'un doigt sur l'interface tactile
éviter l'overdesign : le contenu peut devenir l'interface utilisateur (Natural User Interface)
biblio
architecturer la page
chaque page doit être pensée
comme le moyen d'atteindre un objectif

délimiter, organiser et hiérarchiser les contenus
n’afficher que les principaux éléments de navigation et d’interaction
n'afficher les éléments optionnels que si nécessaire
limiter la charge informationnelle
hétérogénéité, images de fond, animations
démultiplier la surface disponible par remplacement / recouvrement / déplacement
slider, accordéon, drop-down, onglets tabulaires, ...
architecturer le contenu
la structuration et la répartition logique du contenu
sont les premiers outils d'orientation dans un site

procéder en regroupements logiques
mettre en avant des mots-clé significatifs pour qualifier ces regroupements
créer une navigation dotée d’items signifiants, complémentaires et exclusifs
scinder les items de navigation selon leur utilité
navigation principale, utilitaire, contextuelle, ...
informer et répondre
informer est nécessaire pour que l'utilisateur comprenne ce qui est attendu de lui

donner ou signifier des informations générales
expliquer ce qui est proposé, pourquoi il est mieux ici qu'ailleurs, où il se trouve et comment circuler
donner des informations ponctuelles
aider à l'accomplissement de tâches (formulaires, temps et étapes requis, données manquantes, fournir une évaluation, inciter à une inscription, ...
donner un feed-back aux actions
ajouter au panier, saisir un code, publier un contenu
compréhension
les mots et symboles sont choisis minutieusement

ne pas négliger les mots, ils restent l'outil idéal pour traduire un concept
le vocabulaire est concis, précis et exact
éviter les formulations génériques, les liens
cliquez ici
utiliser des symboles et codes compréhensibles
favoriser l'emploi d'icônes + libellé
pratiquer des tests utilisateurs pour attester de la bonne compréhension
rapidité
le site assiste l'utilisateur dans ses tâches et en réduit la pénibilité

faciliter le clic, dimension et position sont essentiels
aider à associer un élément et l'action engagée
créer une relation visuelle entre un objet et ses liens
multiplier les clés d'entrée vers une même page
groupes d'infos (titre + image + incitation) cliquables
proposer des micro-utilitaires pour faciliter une action
panier d’achat, choix de couleur, fabric zoom, …
éviter les actions inutiles, ne pas se répéter
proposer des raccourcis pour les utilisateurs habitués
assistance
le site aide et dirige l'internaute, il reste simple

rendre visible et accessible selon les besoins
diriger par des clics logiques
formulation (verbe), zone de clic, dimension, contraste, call-to-action
utiliser les affordances
repérer intuitivement le comportement d'un élément et la manière d'interagir avec (liens, champs...)
présenter les choix aux moments opportuns
fournir une aide contextuelle, proposer une variante par défaut si plusieurs choix sont offerts
liberté
le site n'agit pas à la place de l'utilisateur

ne pas bloquer ou empêcher les outils traditionnels
bouton back, ouverture plein écran, copie d’un contenu textuel, menu contextuel (clic droit)
aider à l’annulation (undo / redo)
retourner un article, fournir une aide en ligne, se désabonner d’une newsletter
aider à contourner le système
son des vidéos, stopper ou passer une animation, ...
ne pas imposer une proposition
entrer directement sur le contenu (pas d'intro)
accessibilité
l’information du site doit pouvoir être transcrite
par tous les moyens physiques

capitaliser sur la sémantique HTML
chaque contenu a sa place et son importance
définir le meilleur aspect pour chaque plateforme
capitaliser sur les micro-données et micro-formats
le site doit pouvoir être lu en "brut"
un site accessible = un site référençable
biblio
orienté utilisateur
le contenu doit répondre à un besoin réel

comprendre l'utilisateur
empathie, sociologie comportementale,
neuro-sciences, études utilisateur,
connaissance des clients
adapté au cadre cognitif de l'utilisateur
niveau de langage, empathie
communiquer à l'utilisateur ≠ communiquer en interne
éviter le jargonisme
biblio
encombrement
émotions et mémoire
c’est l’expérience qui doit être mémorable,
et non l'interface

les émotions laissent une empreinte dans notre mémoire à long terme (précision > souvenirs neutres)
dépasser l'utilisable pour l'agréable crée un engagement plus fort auprès du public
émotions
concevoir pour des humains
l'émotion est un langage naturel commun
à toute l'humanité

la nature humaine se reflète dans chaque aspect du design
notre narcissisme nous pousse à chercher la présence humaine derrière chaque chose
nous sommes sensibles au contraste (rupture d'un motif), qui influence notre prise de décision
plus le nombre d'éléments contrastés est grand, plus long est le temps de décision
le pouvoir de l'esthétique
se démarquer pour survivre

le contraste de marque permet de se distinguer de la concurrence
un design réussi a un fort impact sur l'engagement émotionnel
un design réussi influence la perception de l'utilisabilité d'un système (what is beautyful is good)
l'esthétique a une grande influence sur le degré de satisfaction des visiteurs
la personnalité
représenter une marque par une personnalité
permet aux utilisateurs de s'identifier à elle

un persona de design permet d'incarner les valeurs et la personnalité de la marque
capitaliser sur la tonalité, l'attitude, la relation et l'interaction avec le public
l'engagement émotionnel
créer des souvenirs positifs et durables

par la surprise (réponse émotionnelle proportionnelle)
goodies, easter eggs, prise de contact personnalisée
par l'anticipation et l'exclusivité, pour préparer le public à une évolution
par l'amorçage, en procédant par petites touches
biblio
le critère le plus important :
satisfaire le visiteur
Full transcript