Design d’interface utilisateur

Afin de réaliser une interface engageante et performante, nous travaillons conjointement le fond, la forme et le sens.

Nous réalisons des prestations de design d’interface (ou design UI) apportant un haut niveau de valeur ajoutée aux projets qui nous sont confiés : sites portail et e-commerce, portail métier, application mobile et autres interfaces spécifiques (Réalité Virtuelle, Réalité Augmentée, interfaces sans contact…).

Pour trouver la synthèse idéale entre performance et efficacité, nous en appelons à nos compétences graphiques, techniques et conseil, toutes réunies sous le même toit.

Selon le projet et le contexte, nous déployons une palette variable de prestations associées au design graphique. De la création de votre identité digitale jusqu’à la production des déclinaisons graphiques ou l’animation des éléments interactifs, nous vous accompagnons tout au long du cycle de vie de votre produit ou service web.

Direction artistique

Afin de rendre attractive l’interface à destination de l’usager, il convient de lui conférer des codes graphiques valorisants. L’analyse de tendances, la veille active et la recherche développement s’appliquent aussi à la facette créative de l’Agence, nous y consacrons 7% de notre temps hebdomadaire.

Nous travaillons votre identité de marque et nous déclinons la charte digitale en vous présentant des benchmarks, des planches tendances, des mises en situation d’éléments web où les dimensions graphiques, illustratives, photographiques et typographiques sont représentées afin de pré-figurer l’ambiance générale du site, de l’application ou du service web à réaliser.

Il nous arrive également de travailler de concert avec un partenaire (rédacteur, photographe, vidéaste, typographe ou illustrateur) afin de lui délivrer le bon brief, de construire avec lui la proposition et de vous accompagner efficacement dans la constitution d’une identité web vraiment singulière et mémorable.

Notre intervention prendra une dimension technique à travers la création de prototypes animés, où nous travaillons le rendu des interactions entre l’usager et l’interface (voir ci-après).

Animations et design d’interactions

Corollaire du design graphique, l’animation des éléments interactifs joue un rôle non négligeable au sein de l’expérience utilisateur.

Les micro-interactions (un bouton survolé, un lien cliqué, un diaporama activé…) tout autant que l’animation web plus « lourde » (un scénario d’attente élégante au chargement, une séquence animée de drag n’ drop d’une pièce jointe, …) participent à la sensation d’efficacité, de réactivité, d’efficience de l’interface.

Pour accompagner efficacement l’utilisateur dans la réalisation de ses tâches, nous scénarisons les animations à produire. Image par image, nous concevons les principes d’interactions web très tôt afin de compléter la charte digitale d’un volet animé : au clic, au survol, au swipe, au défilement vertical…

La dimension d’optimisation technique est ici essentielle pour s’assurer que l’animation se produira au bon moment et dans un laps de temps court, afin de ne pas générer d’attente ou de latence auprès du terminal cible.

Le design interactif permet souvent de penser les scénarios d’assistance à l’usager : le faire patienter durant un chargement, lui indiquer l’avancement d’une tâche, l’aider à visualiser rapidement une information complexe, etc.

Conception web

Il s’agit ici de travailler l’architecture de l’information que l’on veut offrir à l’utilisateur.

Au moyen de recherches sur l’arborescence, les parcours utilisateurs et les besoins en contenus/fonctionnalités de l’interface, nous créons des représentations de plus en plus affinée du dispositif final : des zonings, puis des wireframes basse et haute définition, et enfin des prototypes interactifs.

C’est à cette étape également que nous réfléchissons aux contenus du site, en travaillant de concert la rédaction et la structure des blocs éditoriaux :

• produire une mise en page pertinente,
• préfigurer le rendu sur tous types de devices,
• tenir compte des principes d’optimisations SEO,
• gérer les priorités visuelles selon les objectifs de transformation,
• tester l’impact de la stratégie éditoriale en conditions proches du réel.

Au moyen d’ateliers de co-conception, nous éprouvons nos idées avec les vôtres et intégrons la dimension usager aux étapes de conception du dispositif web. Ces moments d’échanges intenses sont le sel du métier, ils constituent la vraie richesse de cette méthode de conception centrée usager : anticiper les besoins, explorer toutes les dimensions, analyser la faisabilité technique d’un dispositif interactif.

Nous y apportons nos 15 ans d’expériences pluri-sectorielles afin de vous apporter un nouvel éclairage sur vos problématiques ; car ce qui se fait ailleurs est souvent bien plus intéressant que de reproduire les mêmes schémas.

Prototypage

Pour passer de l’idée « géniale » au POC (Proof of Concept), il convient de compiler les écrans d’un parcours au sein d’un prototype interactif, lequel permettra de tester le rendu exact sur son mobile, son PC ou la TV interactive de la « vision cible ».

Sur la base d’écrans basse ou haute définitions, nous constituons un prototype navigable au sein du navigateur afin de pouvoir s’assurer :

• du rendu exact des éléments d’interface fixes et animés,
• des besoins en production éditoriale,
• de la pertinence du parcours d’information,
• des contraintes techniques posées par le dispositif cible,
• et de l’appréciation des utilisateurs testeurs qui la découvrent.

Cette étape essentielle de la conception permet donc de pré-figurer au plus juste les besoins à couvrir. Nous itérons autant de fois que nécessaire pour arriver à un compromis solide ; après quoi le design graphique de l’interface peut démarrer tout autant que la rédaction des contenus, le développement back-end, etc.

Design System

Afin de couvrir des besoins de plus en plus larges, nous menons avec vous une réflexion sur la cohérence et l’homogénéité de l’expérience que vous offrez à vos clients. Le recours à des guides de style permet ici de charter votre communication digitale :

Dans cette logique, nous pouvons être amenés à auditer l’existant (site, appli mobile, e-mails, extranet, …) afin d’analyser les codes que vous offrez à votre client tout au long de son parcours.

L’objectif ici est de fixer des standards d’affichage adaptés aux différents contextes d’usage, une sorte de charte d’expérience utilisateur touchant à différentes dimensions (contenus, fonctionnalités, rendu graphique, …) et servant de référentiel pour toutes les productions digitales de votre marque.

Nous créons un éco-système fonctionnel et graphique afin de maîtriser toute la production web actuelle et à venir ; en définissant la forme et la fonction de chaque élément de vos interfaces (on parle alors de « design atomique », selon la théorie Atomic Design de Brad Frost).

Cette logique permet d’offrir à l’usager de votre marque une expérience sans couture peu importe le device, le message, la fonctionnalité et son état de connexion au dispositif. Une dimension absolument capitale dans la création de confiance et d’émotion via le design.

Stratégie de contenus

L’expérience utilisateur est un tout. C’est une trace laissée dans la mémoire de l’utilisateur.

À ce titre, le rédactionnel joue un rôle prépondérant en UX, qu’il s’agisse des contenus éditoriaux (le slogan sous le logo, l’argumentaire d’une page, la présentation d’une marque…) comme non-éditoriaux (le libellé d’un bouton, la légende d’une image, les textes alternatifs à destination des lecteurs alternatifs…).

En intégrant les pré-requis stratégiques, techniques et sémantiques dès le départ, nous co-concevons une stratégie éditoriale sur-mesure adaptée aux besoins du projet. Au moyen d’ateliers où le fonctionnel dialogue avec le rédactionnel ; nous pré-figurons ce que sera l’expérience racontée au client, depuis l’accroche textuelle à l’arrivée sur le site jusque dans le libellé des boutons du formulaire ou l’e-mail de confirmation d’inscription au service.

Nous utilisons diverses techniques dont l’écriture en CAB :

• Caractéristique : le TGV roule à 320km/h entre Rennes et Paris,
• Avantage : il parcourt la distance en 1h25 seulement,
• Bénéfice : dans une journée « parisienne, je peux emmener et aller chercher mon fils à l’école à Rennes.

En cherchant à orienter bénéfice client ce qui est initialement une particularité, cette technique assure pertinence et efficacité dans la rédaction de vos descriptifs de produits ou services.

Au moyen d’un accompagnement personnalisé de nos chefs de projet et l’éventuelle intervention d’un concepteur rédacteur spécialisé, nous constituons ensemble une matrice éditoriale du site afin d’élaborer le meilleur compromis entre optimisation SEO, accessibilité et justesse dans la production de vos contenus. Après avoir fixé ensemble la tonalité, le volume et le rythme rédactionnel à atteindre ; nous avançons en parallèle sur la production des interfaces et des textes d’un site ou d’une application.

Nous suivons une méthode normée et éprouvée dans la structuration des étapes du design d’interface utilisateur :

• exploration : analyse du besoin, immersion dans le contexte, recherches d’informations et veille de tendances.
• conception : formalisation des solutions et ateliers de co-création (fonctionnels, sémantiques, éditoriaux, graphiques…),
• prototypage : production des éléments interactifs pour simuler l’expérience finale sur les terminaux cibles,
• production : décliner les versions, réaliser les outils, les services et les interfaces,
• contrôle qualité : recetter le dispositif, lui faire tester tous les scénarios d’usage et sortir un projet bullet proof,
• exploitation : mettre en ligne, exploiter les statistiques d’usage, optimiser la performance.

Chaque étape sous-tend un nombre variable d’itérations afin de correspondre aux besoins du projet, et s’assurer que le meilleur compromis est trouvé. À ce titre, nous collaborons activement avec vos équipes (techniques, marketing, commerciales, etc.) afin de co-construire ensemble un dispositif vraiment exploitable en conditions réelles.

Nous sommes rompus au travail collaboratif : l’animation d’ateliers, de comité de pilotage, de réunions d’informations comme de sessions plus prospectives (séminaires, parcours pédagogiques, …) font partie de notre quotidien. Nous créons les conditions de l’innovation centrée usager.

En matière de design d’interfaces web, nous avons récemment œuvré à ces missions :

• Atelier Dupriez : direction artistique web, conception et réalisation du site (+ lien étude de cas blog),
• Byron Group : refonte du logo, direction artistique et développement front-end du site (+ lien étude de cas blog),
• OIKO Gestion : conception, webdesign et développement complet du portail web (+ lien étude de cas blog).

Nous avons également œuvré à d’autres types de design IHM, parmi lesquels :

• Viaccess Orca : conception d’un dashboard blablabla,
• autre exemple,
• autre exemple.

• L’expérience et l’approche qualité : ici, afin de maîtriser le niveau de service délivré, tout est fait maison depuis 2004,
• Tous les métiers sous le même toit : continuité de service et efficacité maximales via une organisation courte,
• Design utile et utilisable : la créativité au service de l’expérience utilisateur, avec une compétence technique avalisant les choix de conception.