Le Responsive Web Design est réactif!

Pour la réalisation de projet interactif, devant la quantité de plateformes et formats d’affichage, la tendance est dans le design réactif (responsive design). L’appellation anglaise est fortement employé mais sa traduction permet bien de décrire, surtout qu’il y a une ambiguïté avec le design adaptatif (adaptative). Alors que le réactif s’adapte uniquement à la taille de l’écran (ex.: iPhone, iPad, desktop) qui peut changer au cours de l’utilisation (ex.: rotation de la tablette, agrandissement de la fenêtre), l’adaptatif tient principalement compte du navigateur et du système sur lequel il est installé (capacités d’affichage, applets disponibles) offrant un design fonctionnel et graphique en conséquence, qui ne changera pas.

Optimiser la Timeline des pages d’entreprises

Tout comme pour les pages personnelles, les entreprises ont la possibilité (et auront bientôt l’obligation) d’afficher une Timeline (journal) sur Facebook.

Sur sa page Facebook, le New York Times affiche les événements importants depuis 1851.

Qu’est-ce que ça change?

Tout d’abord, graphiquement, il faut repenser l’image de la marque. L’accent ne doit plus (n’aurait jamais dû) être mis sur le nombre d’abonnés. Il faut penser à une couverture (cover) originale qui va avec l’entreprise. Techniquement, l’image panoramique doit idéalement être au format de 850 x 315 pixels, et l’image en médaillon doit être carrée si vous souhaitez l’intégrer dans un concept.

C’est le moment de montrer un peu de créativité sur Facebook, le réseau social le plus drabe et conformiste. Les pages MySpace sont très laides, mais au moins elles sont très personnalisées. Twitter permet de changer le fond pour donner un peu de personnalité. Quant à LinkedIn, il n’y a pas encore de pages personnalisées pour l’instant, mais de toute façon les entreprises ne prennent même pas toutes la peine de contrôler leurs images en laissant aux employés et aux intrus le champ libre (par contre, il y a le nouveau bouton d’entreprise qui vient de sortir).

Maintenant, les statistiques de la page sont affichées en temps réel. Il pourra y avoir plus de personnalisation et d’interaction, puisqu’il est possible de voir les interactions des amis sur la page. Un compteur indique également le nombre d’amis connectés à la page.

L’administrateur peut, en plus des statistiques complètes de la page, voir l’historique des activités et accéder à des outils de changement de date, de mise en valeur, de masquage et de suppression des publications.

Ressources :
– Le Guide en ligne des nouvelles pages timeline, disponible ici.
– La documentation au format PDF (8 pages), disponible ici.
– La première conférence fMC (Facebook Marketing Conference) :

Regarder la vidéo (fenêtre externe)

Utilisabilité, accessibilité et lisibilité

Plusieurs termes similaires méritent d’être définis, car bien qu’ils semblent parfois signifier la même chose, ils ne font pas référence aux mêmes éléments de l’ergonomie Web. Entre utilisabilité, accessibilité et lisibilité, quel terme choisir?

L’utilisabilité (usability) fait référence à l’expérience de l’utilisateur. Un site Web est utilisable lorsqu’il peut être utilisé avec efficacité (facilement), efficience (rapidement et correctement) et satisfaction (agréablement) par des utilisateurs donnés cherchant à atteindre des objectifs donnés, dans un contexte d’utilisation donné. Pour cela, il faut que la conception vise un type d’utilisateurs précis.

La lisibilité (readability) implique le texte et le lecteur. Il faut bien soigner la rédaction et la mise en forme du texte pour en faciliter la lecture et la compréhension. Pour être lisible, un texte doit utiliser une typographie adaptée au contenu, être bien composé (taille, justification, interlignage) et structuré visuellement. Évidemment, la qualité de la rédaction (vocabulaire, syntaxe, orthographe) et son organisation dans l’espace influenceront aussi une bonne lisibilité.

L’accessibilité (accessibility) vise à rendre l’information sur le Web accessible et compréhensible au plus grand nombre de personnes possible. Bien que les principaux bénéficiaires de l’accessibilité soient les gens atteints de handicaps (principalement visuels ou auditifs), le respect de ces normes profite à tout le monde. Le Consortium du Web (W3C), organisme chargé de promouvoir la compatibilité des technologies Web, a établi des recommandations concernant l’accessibilité des sites Web. On peut consulter le site du W3C pour plus d’information.

Architecture de l’information

L’architecture de l’information (information architecture), appelé aussi IA et plus rarement AI en français, sert à structurer le contenu selon des principes d’organisation pour faciliter la recherche d’informations par l’utilisateur. Plusieurs méthodes d’organisation et de navigation sont possibles, mais l’objectif du site Web et l’utilisateur cible permettront de choisir parmi les différentes approches, celles qui seront les mieux adaptées.

Dans un premier temps, il faut catégoriser les contenus en créant des groupes. Ensuite, il faut structurer ces groupes et les hiérarchiser en fonction des relations qu’ils entretiennent entre eux. Un peu à la manière de la création d’un arbre terminologique. Pour approfondir le sujet, consultez le livre Information Architecture: Blueprints for the Web (2009) ou le classique Information Architecture for the World Wide Web (2006).

Design d’interaction

Le design d’interaction (interaction design) définit le comportement du site Web en fonction des actions posées par l’utilisateur.

On ne se contente plus d’une simple action, mais on s’appuie sur une possibilité de comportements complexes basés sur l’état de l’objet au moment de l’interaction, sur les actions précédentes, sur les préférences de l’utilisateur, etc.

Approfondissez le sujet dans le livre About Face 3 : The Essentials of Interaction Design (2007). Le site de l’association du design d’interaction (Interaction Design Association) se trouve à l’adresse www.ixda.org.

Les cinq niveaux de l’expérience utilisateur

Tout internaute vit une expérience utilisateur (user experience) lorsqu’il interagit avec un produit. La façon dont réagit le produit influence la qualité de l’expérience. Pour créer une bonne expérience utilisateur, il faut prendre en compte différents éléments au cours du processus de création. On parle alors d’un design centré sur l’utilisateur (user centred design) pour créer un design de l’expérience utilisateur (user experience design).

Le livre The Elements of User Experience (2010) permet de bien comprendre les différentes étapes et composantes du processus de création d’expérience utilisateur. Les cinq niveaux (surface, skeleton, structure, scope, strategy) sont des termes utilisés lors de la conception. Bien qu’on perçoive l’aspect esthétique en premier, c’est la stratégie qu’il faut d’abord définir. Une fois ces éléments bien définis, ils servent de guides pour tous les intervenants du projet.

Premièrement, il faut définir la stratégie (strategy) du site. Il faut déterminer précisément pourquoi le site Web est créé et dans quelle mesure il s’inscrit dans le plan d’affaires ou l’image de la marque. Il faut aussi définir tant les besoins potentiels des utilisateurs que leurs profils démographiques et psychographiques (attitudes et perceptions).

À partir de la stratégie, on traduit les besoins et objectifs en fonctions précises qui définiront l’utilité (scope) du site, puis en fonctions secondaires (micro-utilités). On passe du « pourquoi » au « quoi ». Le contenu doit être également défini en termes de taille et de fréquence mise à jour. On peut ainsi savoir ce qu’il faut développer ou non pour obtenir un site efficace qui respecte le budget et les échéances.

Les besoins devront ensuite être transformés en structure (structure) pour passer de l’abstrait au concret, et définir à la fois le design d’interaction et l’architecture d’information. À l’aide de diagrammes, on décrit visuellement les interrelations entre les principales composantes du site. Cela permet aux divers membres de l’équipe de comprendre les liens conceptuels du projet. Un vocabulaire visuel (traduit en sept langues) pour décrire l’architecture d’information et le design d’interaction est disponible sur le site Web de Jesse James Garrett.

Une fois qu’on sait comment le site fonctionnera, on passe au niveau du squelette (skeleton) pour préciser quelles formes les contenus et les fonctions vont prendre afin de rendre la structure concrète. C’est ici qu’interviendront le design d’interface (contenus), le design de la navigation (fonctions) et le design d’information (contenu et fonctions). L’utilisation de prototype en fil de fer sera très utile pour regrouper ces éléments sur un seul document de travail.

En surface (surface), c’est l’arrangement esthétique de tout ce qu’on peut voir sur une page Web. Que ce soit le texte, les images, les boutons, les vidéos, l’harmonie des couleurs ou des icônes, de même que la typographie, tout devra refléter les choix faits précédemment et être réuni sur une maquette conceptuelle.

Maquettes

La maquette (mockup) sert à traduire les concepts en images, non pas de manière définitive, mais pour faire ressortir les concepts de base. Elle peut être sous forme numérique ou papier.

La maquette basse-fidélité (low-fidelity mockup) est une maquette papier ou une maquette écran très basique, graphique en noir et blanc ou avec zones de couleurs, et peu travaillée d’un point de vue visuel. On fait parfois référence à une maquette fil de fer (wireframe), faite à la main ou par zoning (zones de différentes couleurs).

La maquette haute-fidélité (high-fidelity mockup) est une maquette très détaillées qui intègre des principes graphiques. On fait parfois référence à une maquette conceptuelle (conceptual mockup) ou à un prototype plus achevé.

Exemple de maquette basse-fidélité (haut) et haute-fidélité (bas).

Intégration d'une proposition graphique avec un iPad.

L’utilisateur au centre du processus

L’utilisateur (user) est un élément clé à considérer lors de la conception. On conçoit un site Web afin qu’il soit utilisé par un utilisateur (et non pas par celui qui conçoit le site ou celui qui paye pour l’obtenir). Les motivations et les objectifs (raisons de la visite sur le site), les habitudes, les préférences, les désirs et les connaissances de l’utilisateur sont les éléments à considérer pour concevoir le site en fonction de cet utilisateur. Pour ce faire, on utilise des personas afin de concevoir le site Web et on réalise des tests utilisateurs.

Un persona (persona) est un personnage virtuel créé de toutes pièces pour représenter l’utilisateur cible. Il permet de créer un design centré sur l’utilisateur. Contrairement aux profils d’utilisateurs utilisés en marketing, les personas possèdent des missions, des objectifs et des tâches très précises. Il est possible d’en apprendre davantage sur la méthode des personas en consultant le livre The Persona Lifecycle.

Un test utilisateur (user test) est une mise en situation réaliste menée en laboratoire pour observer si un internaute peut facilement accomplir les tâches pour lesquelles le site Web a été conçu. Un utilisateur recruté en raison de sa ressemblance avec le public cible est placé dans une situation normale de navigation Web. Un observateur regarde la manière dont se comporte l’utilisateur type devant le produit et prend en note les problèmes éprouvés afin de corriger le design.

Arbre du domaine

Consultez l’onglet Arbre du domaine pour découvrir les différentes itérations.

(dernière version)

Bibliographie

Consultez l’onglet Bibliographie pour connaître la liste des livres retenus dans le cadre de la présente recherche et les sites Web pertinents. D’autres références s’ajouteront au fil du temps.