Maquetter des interfaces utilisateur web ou web mobile Flashcards
Qu’est-ce que prototyper une application ?
Le prototype est une version interactive de la maquette. Le prototype permet de se rapprocher au plus près de l’expérience finale de l’utilisateur en mettant l’accent sur l’aspect UX
C’est quoi l’UX, c’est quoi l’UI ? quelle sont les différences entre les deux ?
UI (User Interface), UX (User eXperience). L’UI désigne l’interface graphique de l’application tandis que l’UX désign l’expérience “de parcours” effectué par l’utilisateur. Travailler sur l’UI signifie par exemple : travailler sur le choix de la charte graphique, implémenter une typographie adaptée, … . Travailler sur l’UX signifie par exemple : raccourcir le nombre de clic nécessaire pour arriver sur les informations importantes du site, optimiser la vitesse de chargement des pages, travailler sur les enjeux liés à l’accessibilité, …
Qu’est-ce que l’éco-conception ? donnez des exemples d’utilisation d’éco-conceptions lors du maquettage d’une application
L’éco-conception regroupe un ensemble de pratiques visant à réduire les impacts écologiques des applications dès la phase de conception. Lors du maquettage, il est possible d’intégrer des principes d’éco-conception de plusieurs manières, entres autre : limiter l’utilisation de fonctionnalités gourmandes en ressources, favoriser l’utilisation de couleurs côté UI économes en énergie sur les écrans (ex : implémentation d’un dark mode). De plus, en adoptant une approche “mobile-first”, on peut concevoir des interfaces plus légères, adaptées aux appareils mobiles, réduisant ainsi les informations sollicitées du frontend vers le backend, ce qui réduit la charge sur les serveurs et la consommation d’énergie des utilisateurs.
Un client vous dit : “bon, on a discuté ensemble du projet et je sens bien que tu as compris ce dont j’ai besoin, ne t’embête pas à prendre du temps pour faire des wireframes & maquettes, tu peux foncer sur le code !”. Comment réagissez vous ?
Les documents de conceptions sont autant sécurisant pour vous qu’un client : et si le client change d’avis ? et si vous aviez mal compris une demande ? etc … Inscrire la conception sur papier permet de valider et verouiller le périmètre du projet et ainsi avancer dans les meilleurs conditions avec un commanditaire. Les wireframes et maquettes n’échappent pas à la règle.
Vous devez concevoir une charte graphique d’une maquette, le chef de projet vous demande de porter une attention toute particulière sur les questions d’accessibilités. Dans le cadre d’un développement d’une application Web, qu’est-ce qui se cache sous le mot “accessibilité” ?
L’accessibilité concerne la conception et le développement de sites web de manière à les rendre utilisables par le plus grand nombre de personnes possible y compris les personnes porteuses d’handicapes : vicuels, auditifs, … . Dans le cas de l’élaboration d’une charte graphique, il existe bon nombre d’aspects sur lesquels il faut être vigilant. En voici quelques un des principaux :
- rendre le site accessible pour tout type d’appareil : on développera alors le site en responsive
- rendre le site accessible aux personnes daltoniennes : choisir de bonnes couleurs, …
- rendre le site accessible aux personnes malvoyantes : s’assurer que le contraste entre le texte et la couleur de fond soit important, s’assurer que la taille du texte est lisible, …
- rendre le site accessible aux personnes aveugles : éviter de véhiculer des informations exclusiement à travers des animations visuelles, remplir les attributs ‘alt’ des balises images, …
- rendre le site accessible aux personnes malentendantes : éviter de véhiculer des informations exclusivement à travers des sons, …
Pour rendre mon site accessible, sur quel document de référence je peux me baser pour suivre les bonnes pratiques ?
Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) : ce document, accessible en ligne, regroupe un ensemble de règles et de bonnes pratiques visant à garantir l’accessibilité, entre autres, des sites web. [ note à vous-même : aller consulter le RGAA pour connaitre au moins 2/3 règles ]
Quels liens peut il y avoir entre l’élaboration d’une charte graphique et l’éco-conception ?
L’impact qu’a l’affichage d’une page web sur un ordinateur est négligeable à l’échelle d’un pays. Par contre, l’impact de l’affichage d’une page Web sur un parc informatique national, ça pèse. Plusieurs approches peuvent réduire l’impact écologique d’une page web, et certaines approches se décident dès la conception d’un site, notament, durant l’élaboration d’une charte graphique. Voici quelques exemples de bonnes pratiques écologiques : concevoir un “dark mode”, limiter les animations, concevoir un affichage pour mobile adapté (pourquoi ? je vous laisse chercher :p), etc …
Qu’est-ce qu’un dark pattern ? pouvez vous citer un exemple ?
Les darks pattern font référence à des techniques de conception d’interface utilisateur qui sont délibérément trompeuses, manipulatrices ou destinées à inciter ces derniers à prendre des décisions qu’ils pourraient ne pas prendre en connaissance de cause. Un exemple de dark pattern, le Roach Motel. Dans un Roach Motel, l’utilisateur peut facilement s’inscrire sur un site web, mais il est beaucoup plus difficile de se désinscrire. Cela peut prendre la forme de cases pré-cochées par défaut ou encore de boutons d’annulation difficiles à trouver.
Dans le cadre du développement d’un site Web, qu’est qu’un wireframe ?
Un wireframe est une représentation basique de l’interface graphique du site web. Ici nous ne nous concentrons seulement sur l’UX : la disposition des éléments, la structure générale, les relations entre les différents composants de l’interface, et sans se préoccuper des détails graphiques. Aucun travail n’est à faire sur la charte graphique lorsqu’on est sur le wireframe. Un wireframe peut être fait avec une simple feuille et un stylo. Un wireframe doit indiquer quels éléments HTML sont à utiliser et leurs emplacements.
Dans le cadre du développement d’un site Web, qu’est-ce qu’une maquette ?
Une maquette est une représentation détaillée de l’apparence visuelle de l’interface utilisateur. Un travail sur une charte graphique doit être fait pour la maquette, ainsi l’accent est surtout mis sur l’UI. La maquette inclut des éléments graphiques tels que la typographie, les couleurs, les images, les icônes, etc… offrant une vision plus précise de l’apparence finale de l’application.
Dans le cadre du développement d’un site Web, qu’est-ce qu’un prototype ?
Un prototype est une version interactive d’une maquette, ce qui permet d’apprécier à la fois l’UI et l’UX du site web lors de sa conception. Un prototype est très pratique pour faire une démonstration d’un site Web à un client avant de commencer son développement (ou avant de commencer le développement d’une US dans le cadre des méthodes agiles).
Par ou commencer entre élaborer une maquette, un prototype et un wireframe ?
Il faut commencer par le wireframe; facile et rapide à produire, facile à comprendre. Ensuite la maquette, elle se base sur le travail produit sur le wireframe, c’est plus long à créer mais c’est à cette occasion qu’on validera avec le client l’identité graphique (la charte graphique) du site. Enfin, on termine par un prototype qui permet de simuler une navigation interactive sur le site, nous sommes ici au plus proche du résultat final visé.
