Blend Web Mix, on vous dit tout – Part II Blend Web Mix, on vous dit tout – Part II

Blend Web Mix, on vous dit tout – Part II

par ,
le 5 décembre 2016

0
0

Le BlendWebMix, c’est 2 jours de conférences, workshops et rencontres dédiées au web à Lyon et altima° y était :-) Avec Romain (Lead technique Symfony), Anne-Laure (Directrice Adjointe) et Elodie (UX designer)

Pour cette édition 2016, l’évènement a regroupé plusieurs thématiques mixant le business, la technique et le design: entreprenariat, réalité virtuelle, sécurité, optimisation de la conversion, agilité, …Voici en quelques lignes ce que nous avons retenu.


– JOUR 2 –

Design pour la performance web par Damien Senger

Après 3 secondes d’attente, 40% d’utilisateurs quitteront votre site web. Certains penseront qu’aujourd’hui, une faible connexion n’est pas commune. Voici quelques contre-exemples : métro, partage de connexion avec sa tablette ou son desktop, zone rurale, etc.

Damien Senger nous donne quelques astuces pour éviter de perdre notre audience.

  • Optimiser les animations
    Un travail collaboratif doit se faire entre le designer et développeur en amont pour trancher sur les priorité des différentes animations. Pour pouvoir prendre des décisions, il est important d’établir des KPI (ex : temps de chargement moyen des pages, temps d’accès à une étape précise, etc.).
  • Connaître les fonctionnalités et contenus prioritaires
    On pourra ainsi charger dans un premier temps les contenus importants et montrer de façon dégradée les éléments secondaires (ex : le texte d’un article du Monde sera chargé avec une image floue qui illustre l’article. L’image sera nette une fois le texte chargé.).
  • Apprendre à faire attendre les utilisateurs
    Pensez au design de l’attente dès que l’amélioration technique n’est plus possible : loader, enchaînements, animations légères, etc.
    Exemple de l’application Météo d’iOS : Affichez des données par défaut et les remplacer une fois chargée.
    Exemple d’Instagram : les photos à publier sont chargées sur le serveur d’Instagram lorsque vous insérez une description. La publication vous paraît plus rapide.
  • Réfléchir de façon modulaire
    Faire une maquette par page est parfois du temps de perdu. Designer uniquement les pages principales suffit avec un style guide qui regroupe tous les modules qu’on pourra trouver dans l’interface. Ce gain de temps sera utilisé pour les animations dédiées à la performance.
  • Utiliser les bons formats de fichier
    Pour les images :

    • JPEG : format photographique, reproduit ce que l’oeil voit.
    • PNG : pour les illustrations, avec un nombre de couleurs réduites et fort contrastes.
    • WebP : n’est pas implémenté par tous les navigateurs donc à éviter pour le moment.
    • GIF : à éviter, privilégiez les vidéos ou animations CSS.
    • SVG : à utiliser sans modération sauf pour les photos. Plus performant que les font d’icônes.

Pour les typos :

    • Limiter @font-face.
    • Utiliser des medias-queries.
    • Optimiser le subsetting (suppression des caractères inutiles).

Pour plus de détails techniques, c’est ici : https://youtu.be/O9nyTJGukxo?t=16m25s

Internationalisation et localisation par Guillaume Berry

Une culture est définie par un territoire et une langue. Beaucoup de sites se contentent de la localisation par l’adresse IP, la langue du navigateur, site précédent, …, mais tout ceci laisse encore beaucoup de chance de se tromper. Actuellement, le moyen le plus sûr est de proposer un écran pour la sélection du pays et de la langue (n’oublions que certains pays ont plusieurs langues officielles). Une autre solution est de mettre une icône en haut du site. Evitez le drapeau qui définit un pays et non sa langue.

Côté traduction, plusieurs paramètres sont à prendre en compte :

  • Certains mots de vocabulaire sont différents d’un domaine d’activité à l’autre.
  • Les médias sont aussi à traduire : les titres et sous-titres des vidéos, les balises de description des images, les noms des fichiers, etc.
  • La pluralisation et la féminisation sont à prendre en compte.
  • N’oublions pas le temps et l’espace : la semaine doit-elle commencer le dimanche ou le lundi ? L’âge commence-t-il à 0 ou 1 an ? Le calendrier est-il lunaire ? Que veut dire le weekend prochain ? Quels formats sont utilisés pour les heures, les dates, les prix ? Quelle norme ISO utiliser pour délimiter les frontières d’un pays (ONU, JO, …) ?

La liste est non-exhaustive. Ce sujet aujourd’hui est malheureusement placé trop souvent en second plan de certains projets.

Formulaires : « les 5 tips à retenir » par Stéphanie Walter

Lors de cette conférence, Stéphanie Walter nous a donné plus que 5 tips. Voici les principaux à retenir.

  1. Basez vos formulaires sur le modèle mental des vos utilisateurs (et non sur celui de votre base de données).
  2. Décrivez pourquoi vous avez besoin de certains champs qui pourraient paraître superflus (ex : numéro de téléphone pour le livreur).
  3. Réduisez les interactions : limitez les listes déroulantes, utiliser l’autocomplétion, facilitez le remplissage grâce à des comptes invités et la connexion via les réseaux sociaux, scanner la carte bancaire, etc.
  4. Demandez toujours les informations nécessaires dans leur contexte (ex : la géolocalisation est demandée en arrivant sur le store locator).
  5. Gérez vos erreurs de formulaires après chaque champs et guidez l’utilisateur pour qu’il puisse résoudre cette erreur.

Toutes les recommandations sont ici : https://blog.stephaniewalter.fr/aidez-moi-a-remplir-vos-formulaires-mobile

La data visualisation par Romain Vuillemot

La visualisation de données (data visualisation) offre un angle indispensable lors de l’analyse de données. Elle permet de révéler la structure complexe des données, à la fois dimensionnel et temporel, qui pourrait difficilement être révélé autrement.

C’est un outil puissant de compréhension du sens de l’information, mais c’est aussi un instrument de communication des résultats sous forme de storytelling.

La recherche esthétique facilite le passage du sens.
La visualisation a déjà révolutionné de nombreux domaines, tels que le data journalisme, en offrant des outils à l’intersection de l’informatique, du design et des sciences cognitives.
Les outils de datavisualisation sont en plein essor aujourd’hui. Ils permettent de créer des interfaces de datas personnalisables et interactives :

  • Tableau software
  • Vega
  • Brunel
  • Voyageur
  • d3js.org : bibliothèque Javascript pour manipuler les données et les documents plus aisément.

C’est quand même plus clair qu’un tableau, non? Un avenir prometteur face au volume grandissant du volume des données et du big data !

mots-clés :

, , ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
0

Blend Web Mix, on vous dit tout – Part II