UX et UI dans un bateau

Cet exercice pour aborder rapidement des concepts devenus important dans la chaine de production de produits intéractifs : le User eXperience design et le User Interface design.

Précédent | 2/2

Deux concepts bankable

Déployer un site web basé sur un CMS peut se faire en 15 minutes. La plus-value des graphistes doit désormais se trouver ailleurs. C’est là que la notion d’expérience utilisateur (UX) entre en jeu : il s’agit de penser la structure de l’information et les chemins parcourus jusqu’aux informations névralgiques du site pour ne pas perdre l’utilisateur (terme que l’on préfère alors à "visiteur") en cours de route, et le cas échéant lui donner envie de revenir sur le site (parfois rebaptisé "application"). Penser les étapes d’un procédé en terme de clic, de saut de pages ou de rafraichissement AJAX, identifier combien d’étapes seront nécessaire à une action, organiser l’information en groupes cohérents dans un menu, organiser l’accès aux fonctionnalités utiles au moment où elles le sont, séquencer les formulaires pour ne pas décourager l’utilisateur, voilà autant de défis pour le designer UX.

Le design d’interface utilisateur (UI) est une partie restrictive de l’expérience utilisateur : il s’agit de penser l’interface, la disposition des éléments dans l’espace de la page, en accord avec l’expérience utilisateur globale et les fonctionnalités pensées lors du développement du process. Le design est donc réalisé en accord avec la fonction du site, de ses outils, pour donner une cohérence graphique permettant la meilleure usabilité pour un nouvel utilisateur ou un utilisateur récurrent. Penser les interfaces dans les différents formats (desktop, tablette, smartphone), associer des couleurs aux actions, associer les outils par groupe et les disposer sous forme de texte ou de jeu d’icônes cohérentes, permettent une lisibilité de l’interface qui apporte du confort à l’utilisateur pendant le processus, un sentiment de maitrise.

Les nobles tâches du UX et du UI sont souvent justifiées par le concept de UCD, le User Centered Design. Placer l’utilisateur au centre de l’expérience est cependant souvent hypocrite : un site web est un projet souvent commercial, avec une stratégie commerciale cherchant des clients, qu’on essaie de capturer pour le conduire à une action centrée sur le marketing. Il s’agit donc de guider l’utilisateur non pas vers ce qu’il veut, mais sur ce que le but commercial vise. Ceci va fortement influer sur la conception de l’expérience utilisateur, en polluant le process et les interfaces d’éléments destinés à infléchir le comportement du client.

Les persona

Ces tâches passent souvent par l’identification de persona, d’utilisateurs type du site. Avant même de pouvoir payer des utilisateurs pour essayer le site et monitorer leur comportement, il s’agit de savoir à qui

Développer en équipe

Pour cet exercice, le travail se fera par deux : un développeur UX et un UI. Le travail de codage lui-même sera réparti en fonction des habilités de chacun.

Il s’agira dans un premier temps d’établir la structure d’un site, sur base d’un de ces concepts :
- Le site d’un groupe de musique ou de créateur avec possibilité d’écoute puis de téléchargement d’un contenu moyennant inscription
- Le site d’objets de design avec possibilité de consultation des images haute définition et download plan 3D
- Un événement (concert-meeting-festival) avec possibilité d’une réservation avec envoi de mail
- ou un autre projet au choix à soumettre

Après le choix d’un de ces thèmes, on créera un ensemble de wireframes connectés entre eux, permettant de visualiser la structure de l’information et le processus demandé. Il faut penser chaque page de manière cohérente et permettre de ramener l’utilisateur vers le centre de l’expérience voulue à chaque étape.

Les formulaires doivent permettre la capture de l’information en php, l’envoi de mail est un plus pour les plus motivés.

Méthode

Le site sera développé en html/css/php/javascript, développé manuellement. Pas de CMS encore, ce sera pour les prochains exercices.

Le but est de développer une maquette fonctionnelle, il n’est pas obligatoire de créer des sessions php. Ceux qui en ont envie peuvent le faire cependant. Un fichier zippé associé à cette page permet le téléchargement d’un site minimal avec procédure de login et de mot de passe, et même envoi de mail.

Rendu
Il faut fournir pour ce travail
- Un schéma des pages du site et de leur fonctionnement
- Un wireframe des principales pages
- un dossier avec la maquette fonctionnelle

Timing

3 semaines sont accordées à cet exercice.