DESIGN UX/UI

• Le design UX se concentre sur la fonctionnalité et la logique du parcours utilisateur.
  Le design UX se concentre sur l'expérience globale de l'utilisateur lorsqu'il utilise un produit ou un service. Le rôle d'un designer UX est de rendre cette expérience aussi agréable, fluide et intuitive que possible.
  

• Le design UI se concentre sur l'apparence et l’interaction visuelle.
  Le design UI, quant à lui, se concentre sur l’aspect visuel et interactif de l'interface avec laquelle l'utilisateur interagit. Le rôle d'un designer UI est de rendre cette interface esthétique et cohérente, en respectant l’identité visuelle de la marque et les besoins des utilisateurs.
  

• Plus l’interface (rechercher une information sur un site internet, écouter de la musique sur Bossfy, ou acheter un billet de train sur une borne) paraît facile à utiliser, plus elle est appréciée des utilisateurs.

• Cela devient un facteur de satisfaction et de confiance envers la marque. Cela engendre la popularité auprès du public et la fidélité des clients

• De nos jours l’ergonomie et l’usage sont complexifiés par la mobilité et l’omniprésence des informations.

• Selon le livre “UX Design & ergonomie des interfaces” de Jean-François Nogier, la démarche de conception orientée utilisateur est évalué à environ 6% du budget global du projet.

• un projet avec une bonne ergonomie est gagnante car, toujours selon Jean-François Nogier, 30% de gains supplémentaires en adoptant une démarche ergonomique dès la phase de spécifications.

• Un exemple de réussite :
  En 2005, le webmaster du site de l'American Heart Association constate une baisse des dons en ligne alors que le nombre de visiteurs entrant dans la section donation est important. Il conduit des tests utilisateur, modifie l'agencement des pages et le parcours vers le bouton de don en ligne. Les dons augmentent de 60 % suite à cette refonte.
  

• Une information dynamique, actualisées (mise à jour) régulièrement

• Définir le processus de fonctionnement du site
  • plan du site
  • planning éditorial
    • responsable de publication
    • périodicité des mise à jour

• connaître son public et inciter au dialogue
  • est-ce que le contenu répond à leur besoijn
  • inciter les visiteurs à partager leur impression sur le site et son contenu permet de l’améliorer
  • enquête de satisfaction
  • intéragir avec eux sur les réseaux sociaux

• Organiser l’information (architecture de l’information)
  • organiser selon les tâches des utilisateurs
  • définir chaque zone de l’interface à une tâche spécifique
  • Hiérarchiser les zones de l’interface du général au particulier
  • positionner les éléments de l’interface pour qu’ils soient utilisés dans le sens de lecture
  • présenter les commandes et les informations dans l’ordre d’utilisation
  • minimiser la profondeur de l’arborescence pour ne pas perdre le visiteur (max 3 ?)
  • optimiser le nombre d’items par rubrique ou sous-rubrique Plus le nombre est important, mieux ils doivent être organisés
  • préférer une arborescence régulière, soit simple (c’est à dire homogène (même nombre de sous rubrique)
  • un gabarit cohérent sur l’ensemble de l’application
  • s’adapter au regard de l’utilisateur
    • quand il découvre, une visualisation globale en Z
    • il focalise ensuite son regarde sur des zones spécifiques sensés répondre à son besoins (placement de la navigation, la zone de contact…) d’où l’importance de respecter les contrats de lecture.
    • attirer son regard par la mise en forme avec l’utilisation du design UI, comme l’usage des couleurs, des images, texte en gras
    • selon les statistiques, l’utilisateur qui ouvre une page regarde d’abord son centre, ensuite à gauche et à droite, puis en haut (pour la navigation)
  • s’adapter au matériel
    • avec un smartphone, la main cache une partie de l’écran
  • Taille de la page
    • il faut trouver un équilibre entre la longueur de la page et les informations qui s’y trouve.
    • Un même sujet peut être sur la même page, cela permet d’avoir tout sans être coupé (pour la recherche textuelle par ex.)
    • par contre s’il y a plusieurs thèmes on peut faire des sous-pages.
    • permettre un retour rapide en haut de page
    • le scroll est plus naturel que le clic ou la tap (il exige moins de processus de décision mentale)
      • https://www.france.tv/series-et-fictions/
  • navigation
    • menu
    • lien textuel
    • un menu dans la page peut dérouter car le visiteur quand il clique sur un lien pense qu’il va arriver sur une nouvelle page et non sur une zone différente de la page en cours. Il faut donc bien identifier les types de navigation.
  • la page d’accueil
    • identité du site
    • informations utilise
    • les fondements de la navigation
    • indiquer explicitement la vocation du site
      • a quoi sert le site
      • quels services propose-t-il ?
    • répondre aux questions de l’internaute dans la page d’accueil
      • il cherche à savoir si le site répond à ses attentes
        • qu’est-ce que c’est?
        • Que puis-je faire ici ?
        • Qu’est-ce qu’ils ont mis ici ?
        • Pourquoi dois-je être là ?
      • la page d’accueil fournit une vue globale du site en précisant le contenu, l’organisation générale, le rôle des principales rubriques
    • le chargement de la page doit être rapide

Répondre à des besoins identifiés

https://wexperience.fr/blog/quel-est-votre-niveau-en-ux/

https://wexperience.fr/blog/quel-est-votre-niveau-en-ux/

• header

• section

• footer

• alignement sur une grille

• side bar ou barre latérale

• colonnes

• split screen
  • Divise la page en deux sections égales ou inégales, généralement utilisées pour comparer des contenus ou pour afficher deux informations importantes côte à côte.
  • Couramment utilisé sur les pages d'accueil pour présenter deux options.

• plein écran

• CTA : Call To action
  • Boutons

• Champs de formulaire

• Menus de navigations
  • barre
  • hamburger
  • déroulants
  • onglets

• icônes
  • fonctions :
    • loupe pour la recherche
    • panier pour la boutique en ligne
    • roue dentelée pour les paramètres
  • améliorer la compréhension et réduire le texte

• Cartes
  • conteneur visuel

• popup / modal

• accordéon
  • Composants repliables permettant d'afficher ou de masquer du contenu pour économiser de l'espace.
  • Utilisés pour les FAQ, les sections d'informations détaillées, etc.

• Listes
  • Affichent des éléments dans un format structuré.
  • Types : listes à puces, listes numérotées, listes d'éléments avec icônes.

• Tableaux
  • Utilisés pour organiser des données sous forme de grilles.
  • Pratiques pour afficher des informations comme des rapports, des statistiques, ou des tableaux de prix.

• Onglets
  • Permettent de basculer entre plusieurs vues ou sections de contenu au sein de la même page sans recharger celle-ci.
  • Types : onglets horizontaux, verticaux, avec ou sans icônes.

• Notifications et alertes
  • Informent l'utilisateur d'événements importants ou d'actions requises.
  • Types : toast (notifications temporaires), bannières, badges.

• Info-bulles

• Fils d'Ariane

• Carrousels et sliders d'images
  • Utilisés pour afficher plusieurs éléments de contenu dans un espace restreint.
  • Couramment utilisés pour les galeries d'images ou les produits en vedette.