Paris Web 2013 – retour sur la première journée

Publié le 17 octobre 2013

dans UX, UI et Web Design

Stéphanie Walter

Senior UX & UI designer

Senior UX & UI Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

Je peux cependant vous partager les notes de certaines des conférences auxquelles j’ai assisté. Ce billet (déjà très long) est dédié à la première journée, et je ferai un second billet pour la journée de vendredi dès que j’ai un peu de temps.

(Note: ces notes ont été prises à l’iPad et relues à 23h, il reste peut-être des coquilles n’hésitez pas à me les signaler)

La folle journée, ou les fourberies d’un projet

La journée s’est ouverte sur une conférences/sketch de 45 minutes qui a je pense mis tout le monde dans l’ambiance pour les trois jours. Difficile de vous résumer ce condensé de projets « type » foireux que l’on a tous vus, mais vous pouvez DEVEZ le revoir sur le streaming à partir de 8 minutes. C’est hilarant et fait un bien fou au moral, je pense que je vais le revoir plusieurs fois les jours de déprime.

Théorie du flow et webdocumentaires

Même si cette conférence était orientée vers le web documentaire, certaines parties de cette théorie peuvent à mon avis être reprises et applicables dans un domaine de design de site web plus « général ». Plonger un utilisateur dans un état de flow, n’est-ce pas au final le but de beaucoup de sites qui essaient de créer une expérience unique (grandes marques, jeux, etc.)

La théorie du cognitive flow ou du flux cognitif est basée sur les travaux d’un psychologue hongrois Mihály Csíkszentmihályi :

• Disposition émotionnelle influencée par la difficulté d’une tâche et le niveau personnel de qualification
• Un tâche trop compliquée généré de l’anxiété
• Une tâche trop simple génère de l’ennuie
• Trouver un bon compromis entre les deux pour arriver à un état de flow

7 caractéristiques

• Grande concentration
• Impression de contrôle sur la tâche
• Sensation de maîtrise de ce qu’il faut faire t ce qu’on va devoir faire pour y arriver
• Conviction personelle d’avoir les moyens d’y arriver
• Extase, perte de conscience de soi : on ne se rend plus compte de la perception de l’écoulement du temps et monde autour
• Activité autotélique : la tâche elle même est la justification nécessaire à son accomplissement. Exemple de la musique ou du jeu vidéo qui prennent tellement qu’on est dans un état de flow profond au point d’oublier la notion du temps

Conditions

• La tâche doit avoir un but concret et des règles compréhensibles
• Actions demandées en rapport avec les capacités de l’opérant
• Fournir un feed-back clair et temporellement pertinent sur la conséquence des actes de l’utilisateur. Feed-back Just in Time et pas 5 h plus tard
• Éliminer les distractions extérieurs pour favoriser sa concentration

Application au web documentaire

• Trop de choses trop de contenus trop de vidéos
• Trop d’endroits où cliquer
• Affordance trop faible
  • 3 types : perceptible dissimulée et trompeuse
  • Beaucoup de signaux dissimulés voir trompeurs dans le web documentaire
  • Peur de passer à coté : propos délinéarisé et peur de passer à coté d’éléments importants

Postulat

• Tâche = consultation
• Objectif = regarder tous les éléments documentaires pour comprendre le propos du documentariste

Buts concrets et créoles compréhensibles

• Exposer les règles via le design d’une interface clair et conscise
• Comprendre rapidement les buts = le design doit savoir se faire oublier pour que l’utilisateur trouve rapidement ce qu’il cherche
• Le design doit favoriser l’exploration sans perdre l’utilisateur
• Le design sert un propos non linéaire et fait en sorte que l’utilisateur ne soit pas totalement perdu
• Le designer permet la prise de décisions en connaissance de cause = donner des choix significatifs, savoir ce que ce choix va engendrer
• Le design recrée du sens documentaire et de l’engagement pour que l’utilisateur reste plus longtemps

The iron curtain diaries = exemple de webdoc

• L’utilisateur comprend le lieu, nombre d’étapes et logique dès le début
• Affordance trompeuse : les lieux renvoient vers des quantités d’informations et types d’informations différentes. L’utilisateur n’a aucun moyen d’estimer l’ampleur de la tâche avant de cliquer sur les différents points.
• Solutions :
  • Un design porteur de sens avec des points plus ou moins gros en fonction de la quantité d’information derrière ?
  • Complexité progressive : déverrouiller les villes au fur et à mesure au fil du propos documentaire
  • Mise en valeur de la progression: récompenser l’utilisateur quand il accompli un tâche : accès à des bonus, vidéos spécifiques,, etc..
  • Activité autotélique, utilisateur accroché qui a envie de continuer à progresser

Amour 2.0 (petite modale cliquable durant la vidéo)

• Les plus
  • Contextualisation du propos
  • Les moins
    • Parasitage d’une tâche par une autre tâche
    • Difficile à ignorer : gros et rose flou !
  • Solutions
    • Fournir des éléments à la fin du visionnage
    • En faire des éléments de progression dans la consultations du web doc

Mettre en accord les exigences interactives et les capacités de l’utilisateur

• L’utilisateur a généralement plus d’une capacité
• Concevoir la transmission non plus comme un discours linéaire mais comme un échange et une discussion ente émetteur et récepteur
• Compliqué à mettre en place pour le concepteur et pour un utilisateur qui était jusque là passif et ça devoir devenir actif
• S’adapter aux usages et capacités des utilisateurs
• Choix du niveau de difficulté
  • Facile (linéaire) intermédiaire(interactif ) difficile (l’utilisateur participe)
  • Ex: Prison Valley
  • Hiérarchisation de la complexité
    • Faire un mode tutoriel et une progression en ajoutant différentes exigences
    • Aider l’utilisateur a monter en capacité
  • Référence au connu pour l’utilisateur
    • Quand la tâche à accomplir est 10% plus complexe que ce qu’on sait faire : l’utilisateur est dans le flow
  • Analyse des comportements et adaptation dynamique : aider l’utilisateur en temps réel quand il est bloqué

Play tester

• Commencer par tester un porto papier
• Twine pour scénariser
• Outils de maquettage interactif djehouti, klint et 3wdoc

Feed-back pour l’utilisateur

• Perception spécial
• Perception temporelle
• Perception de la progression
• Exemple de feedbacks :
  • Jauge de progression
  • Effet gris/allumé
  • Bruitages
  • Trophée gamification, etc.
  • Feed-back de comportement : si un utilisateur quitte une vidéo il est interpellé. Le feed-back est adapté à ce qu’il vient de faire
  • Apparaître tôt
  • Persistants entre les visites de l’utilisateur
  • Apparaître au bon moment
    • 300ms après l’action grand maximum
    • Faire se chevaucher le début du feed-back et la fin de l’action
    • Éviter en même temps action et feed-back sinon l’utilisateur pense que ça fait parti de l’avion

Réduire les distractions

• En passant en plein écran ?
• Éviter des liens sortants
• Avoir des vidéos de qualité qui se chargent vite
• Faire disparaître l’interface
• Utiliser des animations avec précaution car elles attirent parfois l’œil et encourage la distraction
• Le laisser partir et revenir plus tard (mail et abonnements)
• Envisager le multiplateforme: commence l’expérience sur pc, finir sur mobile

Flow

• Dimension esthétique
• Engagement
• Qui crée du sens pour soi

 Accessibiliser avec subtilité

Quelques petits conseils et astuce de code pour ajouter un peu d’accessibilité « facilement » sur un projet. Cette conf traitait principalement de technique HTML et CSS.

Soulignement des liens avec text-decoration

• Avec border-bottom
• Espacement du soulignement et lettre pas entravées
• Graphiquement plus de possibilités (dotted, etc.)

Prise de focus

• Éviter de supprimer l’outline
• Doubler le hover et le focus avec la même propriété CSS
• :focus accentué
• -moz-focus-inner pour enlever l’outline donc attention

Liens d’évitement

• Servent aux utilisateur clavier pour ne pas tabuler à de nombreuses reprises pour arriver au contenu
• Lien d’évitement masqué tant que pas de tab
• Liens d’évitement persistant : une fois qu’ils ont été utilisés on les laisse visible
• Lien astucieux: mettre en surbrillance la destination du lien

3 liens vers la même destination titre image et lien de continuation cliquables qui renvoient au même endroit => 3 fois le même lien sur des tabulations

• tabindex=-1 sur 2 des 3 liens pour ne pas avoir le focus sur les 2 autres
• Astuce pour les lecteurs d’écran : aria-hidden=true sur les 2 liens pour que le lecteur d’écran ne remonte que les autres liens (attention expérimental et enlève totalement l’élément de la source)

Tirer parti du responsive

• Au survol ajout des informations supplémentaires (nouvelle fenêtre, etc..) => donner ces indications sur mobile aussi
• Transformation de l’abréviation en texte clair
• Remplacement de la mention nouvelle fenêtre par un pictogramme
• Affichage de la taille directement sans survol

Subjectivité et mauvais goût

Ce que j’en ai retenu : le goût ça se travail, ça s’apprend, c’est culturel et ancré dans un contexte temporel. Le « bon goût » d’aujourd’hui risque d’être le mauvais goût de demain.

Les slides sont disponibles sur speakerdeck

C’est un sujet sensible et pas que pour les designer
On entend souvent “ça dépend” , “les gouts et les couleurs”, “les gouts ça se discute pas”, “la beauté c’est subjectif”, “arrêtez de me gaver, ça dépend des gouts”

Le design n’est PAS une affaire de gouts !

• Le design est une réponse à une problématique en fonction d’un cahier des charges précis
• Réponse technique à un problème
• Contraintes de budget = choix à faire aussi
• Et d’esthétique : le designer et un métier de création, il reste donc une part de subjectivité

Exemple de la chaise de cuisine: quels critères ?

• Le prix : plus ou moins cher
• Le confort
• L’aspect esthétique (pas forcément le mot “design”, mais “en accord avec le salon”,, etc..)
• Si l’esthétique n’étais pas aussi important, il n’y aurait pas autant de modèles de chaise différent

L’esthétique fait parti des raison pour lesquelles on veut acheter un produit

Tous les goûts se justifient, n’importe qui a des raisons de préférer quelque chose. Quels sont les critères de choix ?

Dire que tous les gouts se justifient = dire qu’aucun choix n’est justifié dans ce cas, non ?

Quand on tombe sur quelque chose qui est moche, on est tous d’accord ?

“Mais c’est moche”: réaction émotionnelle immédiate

En design, est-ce que tous les gouts peuvent se justifier ?

Dieter Rams, designer industriel qui a bossé sur le design de Braun, a établi 10 “lois” pour un design de qualité:  simplicité, honnêteté,, etc.. Et critère esthétique: seul les objets bien exécutés peuvent être beaux

Le goût, qu’est-ce ?

Un des 5 sens qui permet de discerner les saveurs. Racine latine de “gus” qui signifie “essayer”. Souvent associé à l’enfant qui essaie souvent, et goûte une table pour se rendre compte que ce n’est pas mangeable

Le goût varie selon les cultures : il n’est pas innée et s’apprend

Les époques font également varier le goût: société de consommation, publicité inculquent des normes contre lesquelles il est très difficile de lutter

Exemple: exemples des années 90 et des habits atroces

Dans 20 ans nous seront tous ringards !

Le goût peut varier selon son expérience personnelle : complexe et appartient à chacun. Les expériences vécues vont influencer la manière dont on aimera ou non certaines choses

Les couleurs : “J’aime pas le rouge” (client)

Le consensus sur les chatons : on aime parce qu’on a vécu des expériences sympas avec les chatons

Des théoriciens ont essayé de créer des règles universelles liées à l’esthétique :

• le nombre d’or, proportion développée depuis l’antiquité pour créer des objets harmonieux à la perfection
  • utilisé dans les arts et l’architecture
  • on le retrouve dans la nature à différents endroits
  • on le retrouve dans le corps humain
• la courbe du nombre d’or: utilisé sur twitter par exemple (attention on s’en sers à tord et à travers pour tout justifier, exemple le logo d’Apple
• La loi de la Gestalt => dans un espace donné, si il y a plusieurs formes nous les appréhendons de manière globale et non distincte
  • loi de la proximité: les éléments proche ont sont associés comme faisait parti d’un tout
  • loi de la similitude : les éléments qui ont des formes similaires ont tendance à être associées
• La règle des tiers : viens de la photographies et  est utilisée pour la composition d’image

• pour valoriser un élément de l’image il faut la découper en 3 et les mettre dans les intersections d’une grille
• ne pas être symétrique et créer de la dynamique entre des éléments placés sur des lignes (exemple sur etsy)
• peut aussi découper une image en 4 et créer des lignes de force

Fitts, Pareto,, etc..

Le problème: ce ne sont des dogmes, les apprendre ne fait de nous de bons designers !

“Un beau design c’est souvent un design bien fait” => un objet pas “bien fait” aura tendance à éveiller la méfiance de l’utilisateur

Si l’objet est moche ou mal fait, on a tendance à ne pas vouloir l’utiliser

La façon de composer un texte (typographie) n’est également pas au hasard, il y a des règles !

Exemple de l’esprit de série: valoriser la série avec des couleurs proches

La goût ça se cultive !

• développement d’une culture visuelle : la capacité à s’enrichir et réutiliser dans son travail ce qu’on apprend tous les jours (faire de la veuille graphique)

Connaître ses références

• parfois certaines gaffes viennent d’un manque de culture visuelle
  • exemple de Korean air qui fait un logo proche de celui de Pepsi

Esthétique en design pas que des règles, mais également des choix en fonction d’un contexte global culturel, social, et par rapport au monde

ll y a toujours une partie de subjectivité dans le travail de création. Ca explique aussi qu’on ira voir une agence plus qu’une autre

Le mauvais goût c’est quoi ?

• ce qui est mal exécuté: quand on ne connait pas les règles, on les brise
• ce qui est en décalage complet avec les codes esthétiques d’une époque (un site 2.0 qui ressemble aux années 2000)
• le contexte : pubs pour du viagra sur un site pour enfants !
• ce qui porte atteinte à notre vécu (difficile, subjectif)
• le contexte joue aussi
  • Groland cultive le mauvais gout depuis des années, quelqu’un qui ne connaît pas

Le mauvais goût peut devenir un outil de transgression : c’est moche et je vous emmerde. Deviennent souvent des memes du web

Exemple de Miley Cyrus : un site dégueulasse fait dans une optique de mauvais goût assumée !

Méfiez vous du mauvais gout on ne sait pas s’il sera tendance demain

Un petit pas pour l’em

Ce que j’en ai retenu: l’unité em permet de ne pas « exploser » le design sur un zoom texte et favorise l’accessibilité. Par contre pour les calcules il faut tenir compte de l’héritage de contexte, mais une mixin Sass peut vous aider pour ça. L’unité rem permet de s’abstraire du contexte, mais pose des problèmes quand on veut justement qu’un bloc en hérite, il faut alors repasser par le pixel.  L’idée des em sur les padding et margin verticaux me plaisent bien, surtout pour garder le rythme vertical du texte. Définir des composants d’UI en em permet de les agrandir proportionnellement quand on agrandi la taille du texte.

Les slides sont disponibles en ligne.

• Aucune technique n’est pérenne ça bouge tout le temps et le contenu de cette conférence est ouvert à la discussion
• Exemple de Cdiscount la page est chargé mais il y a un souci quand on passe le texte du navigateur à 18px au lieu de 16
• Partout les utilisateurs ont des préférences, respectons les !! Respectons ces outils
• On navigue le web sur des terminaux avec différentes tailles de texte: smartphone tablette Tv,, etc..
• On peut régler la taille minimum de police dans un navigateur
• Effets de bord sur des éléments placés en pixels
• C’est essentiellement une histoire d’accessibilité
• Le w3c conseil des polices en em
• Accessiweb dit qu’il faut pouvoir zoom et à 200% sans que ça explose
• Le web est flexible et il faut « embrasser » cette flexibilité
• Sur Atlantico body fixé à 12px du coup quand on monte la taille la cascade ne s’applique pas
• Libération bon exemple d’agrandissement global mais quelque dégâts en bas de page

Qui est concerné ?

• Population croissante de gens avec des problèmes de vision
• Zoom texte représente 8% des utilisateurs
• Certains terminaux ont d’autres railles (opéra mini palm,etc.)
• Le zoom est facile à faire par erreur avec les molettes trackpad, etc.
• 15% des utilisateurs de fb ont un niveau de zoom différent dont 10% pour l’augmenter
• Le zoom global permet d’agrandir toute la page, plus efficace d’après WCAG au delà de 200%
• Zoom graphique intéressant sur mobile pour du design non responsive et non adapté
• Sur desktop le zoom global crée souvent un scroll horizontal
• Le navigateur va simuler une diminution du viewport sur un navigateur mobile avec des média queries le zoom global est donc capable de déclencher les  media-queries sur certains navigateurs

Ce qu’on produit aujourd’hui sera utilisé plus tard il faut donc penser à un contexte de navigation qui devient de plus en plus vaste et complexe

Future friendly

Comment qu’on fait ?

• Typographisme de bons billets sur les grilles typographiques
• Macro typographie sur le web
• Grille horizontale = rythme vertical
• Hauteur de lignes, tailles de texte et padding / margin verticaux en em
• How to size text using em (article) font-size de 62,5% sur le body = 10px après c’est moins chiant à calculer. Pose des problèmes
• Penser à ne pas oublier des bouts en px
• Sinon fait des media-queries en em c’est celle du navigateur et non du body qui est prise en compte
• How to size text in CSS 100% sur le body
• Filament group : laisser la taille choisie de l’utilisateur par défaut sur le body puis me sur les autres dimensions
• Utilisation de preprocessor pour pas se faire chier à calculer en utilisant un contexte dans la fonction

Attention aux arrondis !

• Effets de bord sur certains design
• Des arrondis navigateur pas toujours pareils

Grille verticale = colonnes

• Grilles élastiques : largeur de colonne en em
• 55 à 65 caractères par ligne
• 30 em en moyenne pour une bonne lecture
• Ça dépend des langues aussi

Attention aux images de contenu

• SVG: pas de soucis
• Images bitpmap plus complexe donc autant les laisser à leur taille en px

Attention aux sprites

• Eloigner les images sur les sprites
• Utiliser background-size

Un design élastique risque de sortir du view port

• Zone principale en em et le reste prend la place?
• Responsive webdesign : de l’elastique qui n’explose pas le navigateur
  • Media-queries en em pour que le design ne sorte pas du viewport
  • Attention, les valeurs des media-queries en em se définissent encore une fois par la taille sur le navigateur et pas le body
  • Goldilocksapproach.com

Faire de l’em dans tous les sens sur grille verticale et horizontale

Web components :adapter la taille des composants avec des éléments d’UI

Les rem: les em sans les soucis d’héritage

• Plus besoin d’embarquer le contexte
• Doit passer des valeurs en px pour changer des composants

Unités de viewport vw vh, etc.

• Certains veulent définir la taille du texte en fonction de la fenêtre, pas forcément une super idée !!
• Impose une raille arbitraire puisque l’utilisateur ne peut plus choisir et changer sa taille de texte

Exemples

• etchapps.com
• Le blog de Marie Guillaumet
• Smashingmag

Lâcher prise sans perdre contrôle puisque l’on pourra l’intégrer pour que l’utilisateur puisse faire des choix.

Voilà, c’est tout pour les conférences durant lesquelles j’ai pris des notes. Vous pouvez trouver les autres slides et articles sur Paris Web sur Lanyrd.

Fin de la première journée, c’était l’heure de l’apéro ! Paris Web c’est l’occasion de refaire le plein de bonne humeur pour l’année, de retourner au bureau des idées plein la tête et remotivée pour une nouvelle année. Je suis donc encore une fois ravie des rencontres faites durant les conférences, les repas, les ateliers et l’apéro, des discussions et échanges, encore un gros merci à toutes celles et ceux qui ont fait de Paris Web une super expérience sur le plan humain, organisateurs, conférenciers et participants.