UI Design : Comment repenser l’interface et l’expérience utilisateur

  • 8 min
  • Produit
  • Par Edouard Ouaknine le 23/04/2020

Les icônes sont omniprésentes dans notre quotidien : applications, logiciels, sites web, etc.

Ces pictogrammes ou images simplifiées nous permettent de naviguer et interagir facilement au sein d’une interface graphique.

En 2019, Microsoft a décidé de retravailler ses logos pour mettre en avant l’expérience utilisateur sur Office365, qui se veut plus simple et collaborative :

Nous avons décidé d’en faire autant en refondant les icônes UpSlide avec trois objectifs en tête :

  • Profiter de cette évolution pour affirmer notre identité visuelle
  • Assurer l’intégration de nos icônes dans l’univers Microsoft Office
  • Illustrer nos valeurs en alliant efficacité et esthétisme

Après quelques mois de travail, nos graphistes et développeurs nous présentent la nouvelle version du ruban UpSlide.

Vous souhaitez en faire de même avec votre site web ou votre application mobile ? Nous vous détaillons ici la méthode que nous avons employée pour repenser son interface graphique en 6 étapes.

1. Exploration graphique

Avant de nous lancer, nous avons commencé par définir un cahier des charges précis pour bien encadrer le projet : liste des icônes à travailler, charte graphique en vigueur, budget, temps alloué, date de livraison envisagée critères d’acceptance et équipe projet. Cette étape permet d’aligner toutes les parties prenantes vers une même direction : de nouvelles icônes répondant aux attentes préalablement définies !

Une fois que vous savez où vous voulez aller et comment vous comptez y arriver, place à la première étape qui consiste à explorer et préciser votre univers graphique !

Il existe une multitude d’outils et de méthodes pour stimuler la créativité collective comme par exemple les brainstorming, les mood boards ou encore la méthode World Café.

Choisissez la méthode qui convient le mieux à votre projet et à ses impératifs : dans notre cas, nous avons travaillé en « Crazy 8 », notre méthode de brainstorming préférée car très simple à mettre en place et redoutablement efficace. Le but est de générer 8 idées distinctes (ou plus) par participant, en 8 minutes. Elle permet de dépasser ses premières idées, pas toujours les plus innovantes, et de générer une grande variété de solutions. Armez-vous de stylos, de post-its et top chrono !

A picture containing refrigerator, many Description automatically generated

Dans le cas des icônes d’UpSlide, nous cherchions à nous rapprocher des codes graphiques de Microsoft . Nous avons donc travaillé sur une charte graphique inspirée de la Suite Office, notamment au niveau des couleurs et du style graphique.

Une fois les orientations graphiques définies, place à la pratique !

2. Création accélérée

Pour une efficacité et une agilité optimales, nous avons choisi de fonctionner en sprint : il s’agit d’une méthode itérative principalement utilisée dans le domaine de l’informatique et du développement. L’objectif ? produire une première version en quelques jours, puis la tester et l’analyser avant de passer à la suivante et ainsi de suite. Nous en parlons dans nos astuces d’efficacité.

Dans notre cas, nous avons effectués des sprints de 5 jours, avec à l’issue une proposition d’icônes de base respectant les lignes directrices définies à l’étape précédente.

Après quelques sprints, nous parvenons à trois propositions qui ne se veulent ni trop fantaisistes, ni trop strictes :

Les utilisateurs d’UpSlide auront peut-être déjà deviné la piste retenue pour la phase suivante ?

(Réponse : la 1 !)

3. Interface et expérience utilisateur

Après la phase de création, il est temps de faire converger les propositions graphiques retenues. La phase de convergence a pour but de passer en revue les propositions et de réfléchir à leur organisation afin de garantir aux futurs utilisateurs une interface et une expérience de qualité.

A noter que l’Interface Utilisateur (UI) et l’Expérience Utilisateur (UX) sont très complémentaires bien que différentes : la première touche à tout ce qui est « visuel » alors que la deuxième se concentre sur l’aspect « fonctionnel ».

Cette étape est cruciale car votre interface graphique aura un impact important sur l’expérience utilisateur qui en résultera !

Pour le nouveau ruban, nous avons sélectionné le type d’icônes correspondant le plus à nos attentes – cohérence avec le style Microsoft Office à la sauce UpSlide – et réfléchi à la manière dont celles-ci allaient s’intégrer dans PowerPoint, Excel et Word. 

Le regroupement par type de fonction étant déjà plébiscité par Microsoft, nous nous sommes calqués sur cette structure pour éviter de chambouler les habitudes des utilisateurs d’Office.

Toujours dans une optique de faciliter la navigation pour l’utilisateur, nous avons renforcé l’architecture de notre ruban en attribuant une couleur à chaque groupe de fonctionnalités :

Peut-être avez-vous remarqué que certaines fonctionnalités natives d’Office se sont immiscées dans le « Groupe Bleu » (Format et Formes) ?

Il s’agit en effet de la grande nouveauté côté UX : avant, l’utilisateur devait alterner entre les onglets natifs et le ruban UpSlide pour mettre en forme ses slides dans PowerPoint, par exemple. Désormais, certains outils déjà présents dans Office sont accessibles directement depuis l’onglet UpSlide – toujours dans une optique d’amélioration de la productivité et du confort de travail de nos utilisateurs.

4. Production

Une fois la piste graphique choisie et la structure de l’interface définie, vient le moment de construire les éléments qui vont la composer !

Nos graphistes ont pensé et dessiné chaque icône avec soin, afin d’aboutir à un résultat à la fois précis et esthétique. Voici pour exemple le tracé qui a donné vie à l’icône de l’une de nos fonctionnalités phares : la Bibliothèque.

Aujourd’hui, la majeure partie des interfaces graphiques, notamment les sites internet, s’adaptent à la taille de l’écran des utilisateurs : c’est ce qu’on appelle le responsive design.

Il faut donc envisager tous les types d’écran possibles afin de garantir une utilisation confortable quel que soit l’appareil (smartphone, tablette, ordinateur…).

Nos graphistes ont ainsi décliné chaque icône dans tous les formats nécessaires afin que le ruban UpSlide puisse s’adapter facilement à toute taille d’écran d’ordinateur ou tablette. Cette phase, bien qu’un peu répétitive et technique, n’est pas à négliger dans le planning du projet car elle peut s’avérer plus chronophage que prévue.

Au total, ce sont près de 700 fichiers d’icônes qui sont générés pour un onglet UpSlide 100% dynamique !

5. Tests et prototypes

Une fois tous les éléments de l’interface prêts à l’emploi, reste encore à les assembler pour vérifier leur bon fonctionnement via des tests sur prototypes.

Une première maquette du nouveau ruban UpSlide voit alors le jour : elle est le fruit de toutes les précédentes étapes et va servir de support aux tests !

A person sitting at a desk Description automatically generated

En effet, pour s’assurer que l’UX et l’UI sont au rendez-vous, il est impératif de tester en conditions réelles pour observer les interactions des utilisateurs avec la nouvelle version du logiciel. Le but est d’analyser leur comportement afin d’identifier les points d’amélioration éventuels.

Par exemple, nous avons pu déceler en phase de test que certaines icônes ne correspondaient pas aux attentes des utilisateurs. Une des premières formes retenues pour la Bibliothèque – la fonctionnalité permettant d’accéder à des éléments graphiques ou textuels directement depuis un fichier Word, Excel ou PowerPoint – représentait un nuage d’où sortait une feuille de papier : aucun utilisateur test ne comprenait l’utilité de cette icône. C’est après plusieurs essais que celle-ci a évolué avec l’ajout d’une loupe, qui illustre mieux la fonction de recherche.

Une fois que les problèmes et bugs identifiés lors des tests sont corrigés, votre nouvelle interface est enfin prête pour le grand public !

6. Release

Enfin le moment tant attendu ! Le déploiement de la nouvelle version de votre interface peut commencer. Veillez à la bonne communication avec vos utilisateurs avant la sortie de la nouvelle version, pour leur éviter toute surprise à la mise à jour de leur outil.

L’an dernier, notre logiciel UpSlide a pris un virage important côté graphique et UX. Il s’agit d’un grand bond en avant car, en plus d’être aligné graphiquement avec les rubans de Word, PowerPoint et Excel, l’onglet UpSlide comprend désormais les fonctionnalités natives les plus utilisées afin d’éviter aux utilisateurs d’alterner entre les différents onglets.

Depuis 2011, UpSlide a bien évolué…  nous proposons d’améliorer votre expérience sur la suite Microsoft Office :

… mais notre objectif reste le même : vous aider à mieux travailler sur PowerPoint, Excel et Word !

> Retrouvez les dernières améliorations du ruban UpSlide sur Excel et PowerPoint.

Poster un Commentaire

avatar
  S’abonner  
Notifier de