Aller au contenu
XSIS
Parler à un ingénieur

Ingénierie logicielle

Design UX et UI

Des interfaces fondées sur la recherche et testées avec de vrais utilisateurs

Recherche utilisateur, architecture de l’information, design d’interaction et systèmes de design pour des produits utilisés au quotidien.

Présentation

On juge un logiciel à sa capacité à vous laisser terminer votre tâche. C’est le design qui en décide : ce qui apparaît sur chaque écran, dans quel ordre, avec quels mots, et ce qui se passe lorsque quelque chose ne fonctionne pas.

Nous commençons par la recherche, pas par les écrans. Nous échangeons avec les personnes qui utiliseront le produit, nous les observons au travail et testons les idées tôt à l’aide de prototypes. Nous concevons ensuite la structure, les parcours et l’interface, et nous construisons un système de design pour que le produit reste cohérent à mesure qu’il grandit.

Nous concevons systématiquement selon le niveau AA des WCAG 2.2, et pour chaque langue dont vous avez besoin, y compris l’arabe et les autres écritures de droite à gauche, où les mises en page s’inversent et où la typographie demande une attention particulière. Les designers travaillent aux côtés des ingénieurs pendant tout le développement, pour que ce qui est livré corresponde à ce qui a été conçu.

Ce que nous livrons

  1. Résultats de la recherche

    Entretiens, observation et données d’usage transformés en constats clairs sur vos utilisateurs, leurs tâches et leurs difficultés.

  2. Architecture de l’information

    La structure du produit : navigation, dénominations, et regroupement des contenus et des fonctionnalités.

  3. Parcours utilisateurs

    Chaque tâche clé décrite étape par étape, y compris les erreurs, les états vides et les cas limites.

  4. Prototypes testés

    Des prototypes cliquables réalisés dans Figma et testés avec de vrais utilisateurs, avec une trace de ce que nous avons appris et modifié.

  5. Design de l’interface

    Des écrans pour chaque point de rupture, du téléphone au grand écran de bureau, prêts pour le développement.

  6. Système de design

    Tokens, composants et règles d’usage dans Figma et dans le code avec Storybook, partagés par les designers et les ingénieurs.

  7. Revue d’accessibilité

    Des maquettes vérifiées au regard du niveau AA des WCAG 2.2 pour le contraste, l’ordre de focus, la taille des cibles et les libellés destinés aux lecteurs d’écran.

  8. Mises en page de droite à gauche

    Mises en page, icônes et typographie inversées pour l’arabe et les autres langues écrites de droite à gauche.

Notre méthode

  1. 01

    Rechercher

    Nous interrogeons les utilisateurs, analysons les données d’usage et les demandes d’assistance, et observons le travail là où il se fait.

  2. 02

    Définir

    Nous définissons ensemble les problèmes à résoudre, les utilisateurs visés et la manière de mesurer le succès.

  3. 03

    Concevoir et prototyper

    Nous esquissons, structurons et prototypons les parcours clés, en partant d’une ébauche que nous affinons à mesure que nous apprenons.

  4. 04

    Tester avec les utilisateurs

    Nous testons les prototypes avec de vrais utilisateurs, corrigeons ce qui les déroute et testons à nouveau.

  5. 05

    Livrer et accompagner le développement

    Nous transmettons les maquettes et les composants, revoyons ce que l’équipe d’ingénierie développe et procédons aux ajustements avec elle.

Technologies

Langages
  • TypeScript
Frameworks
  • React
Tests
  • axe-core
Design et accessibilité
  • Figma
  • Storybook
  • WCAG 2.2

Modes de collaboration

Questions et réponses

Avons-nous besoin de recherche utilisateur si nous connaissons déjà nos utilisateurs ?

Vous en savez beaucoup, et la recherche s’appuie sur ces connaissances. Elle met les hypothèses à l’épreuve auprès des personnes qui font le travail, et révèle souvent des étapes, des contournements et un vocabulaire qui n’apparaissent jamais dans un cahier des charges. Même une courte série d’entretiens et de tests de prototypes avant le développement coûte moins cher que de modifier un logiciel après sa livraison.

Lien vers cette question
Qu’est-ce qui détermine le coût d’une mission de design ?

Le nombre de groupes d’utilisateurs et de parcours, l’ampleur de la recherche nécessaire, l’existence ou non d’un système de design, et le nombre de plateformes et de langues que le design doit couvrir. La refonte d’un produit établi comportant de nombreux écrans demande plus que la conception d’un nouvel outil ciblé. Nous définissons le périmètre du design par étapes, afin que vous puissiez examiner les constats et les parcours avant de vous engager sur l’interface complète.

Lien vers cette question
Comment rendez-vous les maquettes accessibles ?

Nous concevons selon le niveau AA des WCAG 2.2 dès la première maquette fonctionnelle : contraste des couleurs suffisant, focus visible, ordre de lecture logique, cibles tactiles assez grandes pour être utilisées et un libellé pour chaque commande. Nous vérifions les maquettes avant leur transmission et testons le produit développé au clavier et avec des lecteurs d’écran. L’accessibilité intégrée dès la conception coûte peu. Ajoutée après coup, elle coûte très cher.

Lien vers cette question
Pouvez-vous concevoir pour l’arabe et les autres langues écrites de droite à gauche ?

Oui. Concevoir de droite à gauche ne consiste pas simplement à retourner l’écran. La navigation, les indicateurs de progression, les graphiques et les icônes qui suggèrent une direction doivent être inversés, alors que les nombres, les logos et les commandes multimédias ne le sont généralement pas. Le texte arabe exige sa propre police, sa propre taille et son propre interlignage. Nous concevons les deux sens ensemble et les faisons relire par des lecteurs natifs.

Lien vers cette question
Qu’est-ce qu’un système de design, et en avons-nous besoin ?

Un système de design est un ensemble partagé de couleurs, de typographies, d’espacements et de composants, assorti de règles d’usage, maintenu en cohérence entre les fichiers de design et le code. Il devient nécessaire lorsque plusieurs équipes ou plusieurs produits doivent avoir une apparence et un comportement cohérents, ou lorsqu’un produit va évoluer pendant des années. Pour un petit outil isolé, une bibliothèque de composants plus légère suffit souvent.

Lien vers cette question
Comment vos designers travaillent-ils avec les ingénieurs ?

Dans la même équipe et au même rythme. Les designers participent à la planification, transmettent les maquettes et les composants avec leurs états et leur comportement documentés, et revoient ce qui est développé avant la livraison. Les ingénieurs participent tôt à la recherche et aux revues de design, afin que les idées difficiles à réaliser soient repérées avant d’être peaufinées.

Lien vers cette question
À qui appartiennent le code et les travaux que vous produisez ?

Dès le premier commit, vous êtes titulaire de la propriété intellectuelle des travaux que nous réalisons pour vous : aucune cession n’est à prévoir en fin de projet. Cela couvre le code spécifique, la documentation et les autres livrables réalisés pour vous. Les éléments préexistants que nous apportons, tels que des outils internes ou des bibliothèques, restent notre propriété, et vous recevez une licence pour les utiliser dans vos systèmes. Les composants open source conservent leurs propres licences, et nous vous en fournissons la liste.

Lien vers cette question

Dites-nous ce que vous devez construire ou connecter.

Décrivez les systèmes, le calendrier et les contraintes. Les ingénieurs concernés prennent ensuite le relais.

  • Notre équipe vous appellera dans les 24 heures, sur le créneau de votre choix
  • Notre équipe est disponible 24 h/24, 7 j/7