UA 01 | | J’identifie les compétences de la conception d’interface pour le CDUI UA 02 | | Je découvre le process type de la conception d’interface UA 03 | | Je découvre les fondamentaux du Design UI UA 04 | | Je découvre ce qu’est un user Persona UA 05 | | Je découvre ce qu’est un scénario utilisateur UA 06 | | Je découvre ce qu’est un user flow UA 07 | | Je découvre ce qu’est un visual site map UA 08 | | Je découvre les lois de la Gestalt UA 09 | | Je découvre les tendances graphiques et UI UA 10 | | Je découvre ce qu’est une veille design interface concurrentielle UA 11 | | Je découvre le concept de fidélité UA 12 | | Je m’informe sur la notion de Sens
Eloignement de la reflexion site web et application stratégie produit expérience utilisateur prise de hauteur
Conception UI et maquettage parti idéation
Slide 29 recherche additive lead
L’UX se préoccupe de
la manière dont un utilisateur se sent lorsqu’il utilise un produit. L’UI se concentre sur l’esthétique et la
disposition visuelle d’une interface l’UI est souvent considérée comme la sous-
composante visuelle de l’UX.
différence utilisateur et consommateur dépend du contexte
Potentiel client non identifié=lead
quelqu’un qui viens vers nous naturellement
Potentiel client démarché = prospect
copywriting l’art d’ecrire du contenu qui a du sens ex: écrire un texte qui rassure il doit inclure le SEO et les normes pour le référencement.
cibles personnes de 10 ans qui posséde un smartphone différent de personna qui est un personnage humain
par cibles on peut avoir plusieurs personna
UX ressenti
affinity mapping schéma comportementale qui permet de créer des personna
maquette et protoype parfois intégrer grâce à figma maquette fixe et prototype animé
sur figma utiliser des instance pour garder le dynamisme interactif
Attention arrivée au User Flow il faut verifier attentivement la faisabilité
Dans le domaine du design d’interfaces, transformer une idée en un produit interactif repose sur une approche structurée afin d’assurer le bon déroulement de la conception et la réussite de l’expérience utilisateur. Le guide PDF proposé vise à mettre en avant ces étapes essentielles, de l’étude de marché à la création du prototype, fournissant à la fois une vue d’ensemble du parcours de conception UX/UI ainsi que des illustrations et définitions des termes clés. Pour rappel il s’agit d’un parcours de conception type. Chaque Agence et/ou Designer peut avoir des process différents. Il est important de reconnaître l’existence de ces étapes et de comprendre à quoi elles se réfèrent.
wireframe respect des principe UX/UI et loi de gestalt
Personna
Un personna doit créer de la valeur on se concentre sur le personnage pas sur le produit CDUI nous sommes des concepteur d’interface graphique
Attention sur WEB beaucoup d’infos fausses
designer un persona fictif permet d’éviter le syndrome de la page blanche
pour designer une application il faut un persona et un parcours utilisateur il faut du sens
Etude de marché sélection de gens télémarketing enquête panel souvent gros budget, si pas possible faire cracher les infos au clients en deduire les user personnas et les user scénarios. Sans datas on cours des risques.
Le design des personas peut avoir un intérêt si on est dans le cas de pré vente du projet
Quand on fait des questionnaire être le plus bienveillant possible question ouverte sans biaisé la question
soit question pour benefice concept
soit question pour bénéfice humain a visé social
Ne pas biaisé le questionnaire sinon fausse piste
Si le personna n’apporte pas de valeur ajouté il est inutile
En général un seul user parcours par personna ne pas rentrer dans une approche systématique
Parcours utilisateur pierre angulaire pour faire l’interface
certification user scénario et user flow
On peut mixer le scénario de navigation et les scénario d’interaction si on a pas le temps
l’empereur dieu de dune franck herbert
user journey pour privilégier
https://www.usabilis.com/empathy-map-carte-d-empathie-quest-dit-pense-ressent-l-utilisateur
scénario d’interaction UI avant UX
scénarios support de communication inter équipe
L’important c’est l’intention, ne pas avoir d’approche systémique il faut s’adapter.
Dans le cheminement on part du principe que tout marche
Questions mobiles 60% des achats wireflow directement puis user flow ?
Document à montrer au client ou non le faire valider ou non ?
Comment qualifier cette représentation graphique
dans la réalité d’une agence lors de la conception du site peut-on imaginer que le user flow permet de distribuer les taches avec création des wireframes, du code, de l’interface, des illustrations et animations ?
Visual s ite map vieille outils mais important structure de l’information qui dépouille le user scénario peut-etre un appmap parler en écran
P25
User site map permet d’identifier les layout
Un site web n’est pas juste une addition de pages c’est une expérience, le site map ne permet pas de refléter ce sentiment il permet de structurer le site.
On peut ajouter une troisième couleur pour la partie administrateur back-off
Tant que c »est un même modéle et que le contenu utilise le même modéle c’est une page unique
On s’occupe du contenant plûtot que du contenu
présentation des pages et lien d’interaction entre ces pages
le site map ne pas optimiser la navigation c’est le user flow qui le permet. Ne pas parler de navigation avec un siter map parler de l’architecture de l’information
Dépouillement de modéles ou plus précis layout de pages à produire
Combien de layout il faut produire
par rapport à la terminologie toujours associé une terminologie à un schéma
Le site map ne refléte ni le ni la navigation ni le menu
Sketching plûtot avec le crayon
Prototype: toujours interactif
Prototype wireframe intéressant a faire pour gagner du temps , prototype maquette dernière étape
Souvent on zappe la partie maquette. Car les outils figma permettent de zapper cette étape. Dès le zoning on peut aller sur Figma.
Pour les applis wordpress n’est pas le logiciels qu’il faut
Toujours faire une veille concurrentielle sur du design avant de faire du sketching que cela soit sur du design ou de la fonctionnalité
Pour projet de fin d’année faire veille concurrentielle persona avant faiblesse force
Info général
psition sur le marché
call to action
Design system
protégé oui mais on peut les utiliser libre de droit
quand on pas le temps utiliser les design system et ses guidelines (charte comment utiliser ces éléments)
S’assurer qu’elle soit disponible sur Figma et vérifier sa version
scénario
Mode sombre
Marque blanche ou devellope une appli et on change le design system pour coller à la demande
Loi gestald
Faut-il créer une interface en fonctions des loi de la gestald ou on crée l’interface et on fait en sorte qu’elle respecte les lois.
Lorsque l’on crée une interface sur notre design on voit que l’on a créer des forme qui respecte les lois Y a-t-il certaines loi qui sont incompatible entre elles ou qui peut perdre l’utilisateur sur une m^me page ?
lois universel sauf si handicap ex daltonisme ou vision dans l’espace, dysfonctionnement cognitif
Les lois de la gestald sont universel on peut rarement les mettre en défaut, alors que les lois de Bastien et scapin peuvent être discuté.