3 ‐ Design de l'expérience utilisateur (UX Design) - domleg45/cls420-411-MV GitHub Wiki
UX design signifie User Experience Design.
En Français, il s’agit du design de l’expérience utilisateur. Il est souvent confondu avec l’UI design car les deux notions sont proches, même si l’une est complémentaire de l’autre. [L’UI design] correspond au design de l’interface utilisateur, c’est-à-dire au design en général : les couleurs, la mise en page, les formes, les visuels, etc.
Qu’est-ce qui caractérise l’UX design ?
A l’inverse, l’UX design n’est pas uniquement focalisé sur le design : la priorité est l’expérience utilisateur. Il s’agit d’anticiper les attentes des visiteurs, de rendre l’interface la plus ergonomique, intuitive, facile d’utilisation possible, en se basant sur les ressentis des utilisateurs. Même si cela touche tout de même au design de l’interface, l’UX design mêle ainsi des objectifs stratégiques, des paramètres technologiques et des problématiques de design de l’interface afin d’aider l’utilisateur à atteindre son but et tout cela à l’aide d’ateliers ux.
7 principes UX
1 - Centré utilisateur
Le design doit être centré sur l'utilisateur et il a préséance sur tous les autres principes plus bas. On doit concevoir un produit selon les besoins de l'utilisateur.
2 - Consistance
L'usager doit reconnaître l'interface et avoir un sentiment de constance et de stabilité. L'expérience doit être familière et le consommateur doit s'y retrouver avec le moins d'effort possible.
Vous pouvez utiliser un cadriciel (Framework) CSS pour vous aider à atteindre cet objectif. Voici une liste des meilleurs cadriciels CSS:
https://www.creativebloq.com/features/best-css-frameworks
3 - Adaptabilité
Le responsive Webdesign (RWD)
Le Responsive design a été traduit en français par Design réactif/adapté/réceptif. Ce design permet de modifier la mise en page d’un site afin que le contenu s’adapte à l’écran quel que soit le terminal utilisé (smartphone, tablette, ordinateur de bureau, TV…). Il s’agit d’adapter le site à toutes les résolutions. Autrement dit, les blocs de contenus (textes et images) se redimensionnent et se réorganisent en fonction de l’espace disponible sur l’écran.
Le Responsive Web Design a bénéficié de l’arrivée des Media Queries de CSS3 (gestion dynamique des feuilles de style). Un site pensé en Responsive Web Design est conçu ainsi :
Une seule base de code HTML identique pour tous les terminaux. Un système de grilles fluides où se placent les contenus de la page. L’utilisation des CSS3 Media Queries pour appliquer la feuille de style adéquate. Des images flexibles/adaptatives dont la taille/résolution s’ajuste automatiquement.
Bootstap
Bootstrap est le framework CSS le plus célèbre au monde. Ce dernier fournit une liste d’outils, des boutons et une grille, qui simplifient la création de design de sites et d’applications web. Pour maîtriser Bootstrap, il faut s’assurer de bien connaître les principaux langages front-end, à savoir :
- HTML : Langage de balisage utilisé pour la création de pages web, permettant notamment de définir des liens hypertextes.
- CSS: Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets.
- JavaScript : Langage de programmation utilisé par les développeurs pour concevoir des sites web interactifs.
Émulateur responsive
Durant la conception d’interface responsive (permettant au site de s’adapter aux différents écrans : tablette, mobile et ordinateur), il est nécessaire de tester le résultat sur les différents terminaux afin d’éviter de mauvaises surprises. Vous pouvez le faire avec un bon émulateur responsive ! Google Chrome offre cette possibilité avec les outils Devtools.
Viewport resizer
https://lab.maltewassermann.com/viewport-resizer/
4 - Hiérarchie visuelle
La hiérarchie visuelle d'une page permet à l'utilisateur de savoir où concentrer son attention, son regard. Cette hiérarchie ordonne l'information, et permet de guider l'utilisateur lors de son parcours ! Pour hiérarchiser les informations, plusieurs techniques peuvent être utilisées.
Varier les éléments de taille selon leur importance
Votre regard se concentre automatiquement sur l’élément le plus imposant. Si bien qu’il faut un effort supplémentaire pour se concentrer sur l’un des éléments de plus petite taille.
La combinaison de couleurs est un must de la hiérarchie visuelle. En plus de vous aider à mettre en évidence - ou en retrait - les éléments de vos pages, la couleur peut donner de la personnalité au design de votre site. Voici quelques exemples qui sauront capter votre attention :
Vous pouvez aussi orienter le regard de vos visiteurs en créant un point focal avec des jeux de contraste. En voici un exemple :
Article complet: https://www.kameleoon.com/fr/blog/hierarchie-visuelle-optimiser-site
5 - Contexte selon les circonstances
Le contexte visuel se réfère à la présentation du contenu qui améliore la transmission du message d’un site Web.
Par exemple, le site d’un architecte peut contenir un portfolio de projets couronnés de succès. C’est à la discrétion de l’utilisateur d'explorer ou non cette section expertise. Mais le contexte visuel dès le départ (l’utilisation d’images, de couleur, d'espace) garantira que les utilisateurs se ferons une idée des connaissances en design de bâtiment et en construction, ainsi que de l’expertise administrative de l’architecte.
Contexte selon les actions de l'utilisateur
La collecte d'information sur l'utilisateur permet de suggérer des actions personnalisées à celui-ci. Par exemple, Netflix propose des médias que vous étiez en train de regarder. Cela permet de faciliter le choix selon les goûts et les habitudes de l'utilisateur. Il faut donc encourager l'utilisateur à participer et à donner des récompenses en fonction de celle-ci.
Cookies et local storage: Les données utilisateurs qui servent au contexte des actions personnalisées
Si vous souhaitez prendre des décisions basées sur des données, vos utilisateurs doivent accepter vos cookies. Les utilisateurs, en revanche, ignorent souvent les demandes de consentement aux cookies. Par conséquent, les propriétaires de sites Web veulent savoir où positionner la bannière de cookies et la concevoir pour obtenir autant de consentements de cookies que possible. Les cookies sont lisibles côté serveur (maximum 4096 octets). Si vous n'avez pas besoin de lire le contenu du cookie côté serveur, vous pouvez utiliser le local storage (jusqu'à 10 mega octets). Par exemple, si la logique de votre application se trouve dans un javascript. Il est préférable de ne pas transférer cette information via un cookie.
Cookie:
- Utilisé côté serveur. Utilisé côté client dans le même domaine seulement si autorisé.
- Le cookie peut être restreint d'accès dans le Javascript si les attributs Secure et HttpOnly sont utilisés.
- Maximum 4096 octets.
- Comporte une expiration.
- Fichier sur le poste.
- Envoyé via le header au serveur (augmente le trafic réseau).
- Non vulnérable aux attaques cross-site scripting (XSS). Le cookie est accédé via javascript s'il est dans le même domaine.
Local storage:
- Utilisé uniquement côté client.
- Non transféré dans le header (aucune trace dans le trafic réseau).
- Maximum 10 mega octets.
- Ne comporte pas d'expiration.
- Vulnérable aux attaques cross-site scripting (XSS). Le local storage peut être accédé via javascript.
Voici une étude sur le sujet des cookies: https://secureprivacy.ai/fr/blog/meilleures-pratiques-ui-ux-bannieres-de-cookies
Voir l'article suivant sur le contexte dans le design web: https://webdesign.tutsplus.com/fr/the-significance-of-visual-context-in-web-design--cms-28153a
6 - Contrôles utilisateurs
Il s’agit de la prise en compte par le système des actions explicites des utilisateurs et le contrôle qu’ont les utilisateurs sur le traitement de leurs actions. Ce sont donc les moyens destinés à permettre à l’utilisateur de maîtriser/contrôler les traitements.
6.1 - Contrôle explicite
Le critère Contrôle Explicite concerne à la fois la prise en compte par le système des actions explicites des utilisateurs et le contrôle qu’ont les utilisateurs sur le traitement de leurs actions.
Le traitement a lieu seulement si l’utilisateur le demande. Il s’agit d’expliciter la relation entre le fonctionnement de l’application et les actions des utilisateurs.
La relation entre les actions de l’utilisateur et les réponses du système doit être explicite, c’est-à-dire que le système doit exécuter :
- Seulement les actions demandées par l’utilisateur,
- Au moment où il les demande.
6.1.1 Actions explicites
Le critère Actions Explicites concerne la relation pouvant exister entre le fonctionnement de l’application et les actions des utilisateurs. Cette relation doit être explicite, c’est-à-dire que le système doit exécuter seulement les opérations demandées par l’utilisateur et pas d’autres et ce, au moment où il les demande.
L’utilisateur a le contrôle sur le traitement.
6.1.2 Contrôle utilisateur
Réversibilité possibilité de revenir sur ses pas, d’annuler ses actions.
L’utilisateur doit pouvoir contrôler le déroulement des traitements informatiques en cours. Il doit pouvoir autoriser l’utilisateur à interrompre tout traitement en cours s’il le souhaite par exemple.
L’utilisateur doit toujours « avoir la main »
Article: https://www.usabilis.com/controle-explicite-38-criteres-ergonomiques-de-bastien-scapin/
7 - Accessibilité
La disposition croissante de ressources d’information sur le Web est passée d’une simple interface texte à des conceptions dynamiques et interactives. Bien que cette mesure ait permis aux utilisateurs de vivre une expérience plus créative et plus souple, il y a des risques que certains soient exclus parce qu’ils ne peuvent pas utiliser des méthodes d’accès standard.
Raison d'augmenter l'accessibilité:
- Légal: Varie selon le pays.
- Augmentation de la fidélité de la clientèle.
- Améliorer l'image: Inclusion, diversité.
Technologie d'assistance:
- Sous-titre (CC en anglais).
- Améliorer la navigation au clavier pour les gens incapable d'utiliser la souris.
- Multi-langue (i18n).
- Outils pour analyser la navigation (Google Analytics, Adobe Analytics, Open Web Analytics, Hotjar, etc.).
Article: https://lagrandeourse.design/blog/accessibilite-en-ux-focus/
Référence
https://www.usabilis.com/responsive-web-design-site-web-adaptatif/
https://www.uxdesigninstitute.com/blog/ux-design-principles/
https://webdesign.tutsplus.com/fr/the-significance-of-visual-context-in-web-design--cms-28153a
https://clearbridgemobile.com/contextual-design-the-key-to-user-centered-apps/
https://www.usabilis.com/controle-explicite-38-criteres-ergonomiques-de-bastien-scapin/
https://lagrandeourse.design/blog/accessibilite-en-ux-focus/
https://www.kameleoon.com/fr/blog/hierarchie-visuelle-optimiser-site