Les clefs d’une UX/UI réussie

Les clefs d’une UX/UI réussie se définissent par une bonne compréhension du Brief, afin de pouvoir répondre efficacement aux besoins du client lors d’une réunion de lancement du produit. Nous concevons pour nos clients des interfaces ergonomiques et esthétiques de produits digitaux : mobile,  web, e-commerce et plateformes. 

Le processus de conception digital  

Le processus de conception digital commence par la hiérarchie des pages, une bonne architecture de site web/mobile implique de rendre disponible la navigation au plus grand nombre d’utilisateurs et de créer une architecture claire et fonctionnelle.
Il est important de savoir que l’arborescence d’un site web ou d’une application mobile jouent un rôle majeur en termes d’utilisabilité et de visibilité, soit en termes d’UX (User Experience) et de SEO. 

L’optique UX est de concevoir un produit simple, qu’il soit facile d’utilisation, compréhensible, navigable, supprimer les frictions qui pourraient gêner le parcours utilisateur, réduire le nombre de clic, et de bien définir les fonctionnalités pour les besoins de l’utilisateur.

Méthode Agile : ou comment l’UX/UI designer intervient dans le processus AGILE et son rôle dans les User Stories

L’intégration de l’UX/UI dans les « sprints agiles » est la solution pour travailler en équipe « Produit ».

Le rôle du Webdesigner est d’adapter ses créations au cycle court de l’agile. Il communique et collabore avec les développeurs et les clients qui doivent travailler ensemble pour développer un produit.

Au cours des sprint, le Webdesigner doit faire preuve de flexibilité et d’adaptabilité, répondre aux changements et surtout prendre en compte les contraintes techniques du design à chaque sprint afin de définir les problématiques ou les points bloquants d’un utilisateur avant le développement.

L’UX/UI en agilité devient important dans la conception de la user-story car le but sera de valider ou d’invalider le graphisme (wireframe) par les clients.

Le rôle du Product Owner :

Le Product Owner est de créer les tâches de la user-story à destination de son équipe technique avant que la qu’elle arrive dans un sprint. 
L’avantage de travailler avec les user-stories, permet d’avoir une estimation technique et de limiter les pertes de temps en cas de changement.

Le design d’interface graphique

La partie UI, est généralement travaillée lors du sprint qui précède le développement afin d’optimiser au maximum les timing.
Une fois le Wireframe validé, nous passons au design d’interface qui va nous permettre de construire l’identité visuelle du produit. Pour concevoir une interface, le designer travaille à créer les éléments de navigation, les enchaînements d’écrans, ainsi que leur organisation.
Il doit proposer les interactions les plus appropriées, performantes et innovantes. Chaque élément de contenu graphique est élaboré graphiquement (boutons, icônes, barres, cadres, typographie, etc).

L’ergonomie et l’architecture d’un site ou d’une application sont essentielles pour la compréhension d’une interface créée par le Webdesigner.

La création d’un prototype pour bien structurer ses pages est nécessaire avant de commencer le design graphique (UI user interface).
Pour le design d’interfaces nous utilisons divers outils de design visuel d’interface (Illustrator, Photoshop) ; Prototypage d’interfaces/d’interactions: Sketch, InVision, Marvelapp, Figma.
Ainsi, avec ces outils nous pouvons donner un aperçu du projet au client avant le développement.

Pour améliorer et faciliter le travail pour les développeurs front, nous utilisons des composants ou (components) Web/mobile qui sont constitués de plusieurs technologies distinctes et qui permettent  de créer des composants d’interface graphique personnalisés et réutilisables (icônes, List, Button…) tels que : Matériel Design, Material angular.io, material UI, react native elements, font awesome, fonts google…

Pour finaliser le produit, une phase de test est lancée afin de vérifier le bon fonctionnement de celui-ci et enfin aboutir à la réussite du projet.

[wpforms id="9980" title="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-9980"><form id="wpforms-form-9980" class="wpforms-validate wpforms-form wpforms-ajax-form" data-formid="9980" method="post" enctype="multipart/form-data" action="/les-clefs-dune-ux-ui-reussie/" data-token="6396191299f72e45e847ba11f2db5491"><noscript class="wpforms-error-noscript">Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.</noscript><div class="wpforms-field-container"><div id="wpforms-9980-field_3-container" class="wpforms-field wpforms-field-layout" data-field-id="3"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-9980-field_3">Layout</label><div class="wpforms-field-layout-columns wpforms-field-layout-preset-50-50"><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-9980-field_0">Résumé / Pitch du projet <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-9980-field_0" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-9980-field_16-container" class="wpforms-field wpforms-field-radio wpforms-conditional-trigger" data-field-id="16"><label class="wpforms-field-label" for="wpforms-9980-field_16">J&#039;ai une description détaillée du projet</label><ul id="wpforms-9980-field_16"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_16_1" name="wpforms[fields][16]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_16_2" name="wpforms[fields][16]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_2">Non</label></li></ul></div><div id="wpforms-9980-field_18-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="18" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_18">Vous avez des technos en tête ?</label><ul id="wpforms-9980-field_18"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_18_1" name="wpforms[fields][18][]" value="fullstackJS / python" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_1">fullstackJS / python</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_18_2" name="wpforms[fields][18][]" value="nocode bubble" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_2">nocode bubble</label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_18_3" name="wpforms[fields][18][]" value="autre" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_3">autre</label></li></ul></div><div id="wpforms-9980-field_19-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="19" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_19">Type de projet</label><ul id="wpforms-9980-field_19"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_19_1" name="wpforms[fields][19][]" value="Applications web / mobiles" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_1">Applications web / mobiles</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_19_2" name="wpforms[fields][19][]" value="Projet data, IA " ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_2">Projet data, IA </label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_19_3" name="wpforms[fields][19][]" value="Site vitrine / e-commerce" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_3">Site vitrine / e-commerce</label></li></ul></div><div id="wpforms-9980-field_12-container" class="wpforms-field wpforms-field-textarea wpforms-conditional-field wpforms-conditional-show" data-field-id="12" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_12">Description détaillée de votre projet </label><textarea id="wpforms-9980-field_12" class="wpforms-field-medium" name="wpforms[fields][12]" ></textarea></div></div><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_1-container" class="wpforms-field wpforms-field-email wpforms-one-third" data-field-id="1"><label class="wpforms-field-label" for="wpforms-9980-field_1">Votre e-mail <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-9980-field_1" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-9980-field_17-container" class="wpforms-field wpforms-field-radio" data-field-id="17"><label class="wpforms-field-label" for="wpforms-9980-field_17">Signer un accord de confidentialité ?</label><ul id="wpforms-9980-field_17"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_17_1" name="wpforms[fields][17]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_17_2" name="wpforms[fields][17]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_2">Non</label></li></ul></div></div></div></div><div id="wpforms-9980-field_22-container" class="wpforms-field wpforms-field-checkbox" data-field-id="22"><ul id="wpforms-9980-field_22"><li class="choice-1 depth-1 wpforms-selected"><input type="checkbox" id="wpforms-9980-field_22_1" name="wpforms[fields][22][]" value="Recevoir les newsletters personnalisées" checked='checked'><label class="wpforms-field-label-inline" for="wpforms-9980-field_22_1">Recevoir les newsletters personnalisées</label></li></ul></div></div><div class="wpforms-recaptcha-container wpforms-is-recaptcha"><div class="g-recaptcha" data-sitekey="6Ld-v7wUAAAAAICtcpP_oL2unK8KqKzfkX04QsSN"></div><input type="text" name="g-recaptcha-hidden" class="wpforms-recaptcha-hidden" style="position:absolute!important;clip:rect(0,0,0,0)!important;height:1px!important;width:1px!important;border:0!important;overflow:hidden!important;padding:0!important;margin:0!important;" required></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="9980"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="9009"><button type="submit" name="wpforms[submit]" id="wpforms-submit-9980" class="wpforms-submit" data-alt-text="Envoi..." data-submit-text="Envoyer" aria-live="assertive" value="wpforms-submit">Envoyer</button><img src="https://www.netdevices.fr/wp-content/plugins/wpforms/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Chargement en cours"></div></form></div> <!-- .wpforms-container -->