Les icônes sont omniprésentes dans notre quotidien : applications, logiciels, sites web, etc. Ces pictogrammes ou simples images nous permettent de naviguer facilement et d'interagir avec une interface graphique.
En 2019, Microsoft a décidé de revoir ses logos pour améliorer l'expérience utilisateur sur Office , qui se veut plus simple et plus collaboratif.
On a décidé de faire pareil en repensant les icônes UpSlide , UpSlide avec trois objectifs en tête :
- Pour tirer parti de cette évolution afin de renforcer notre identité visuelle
- Pour que nos icônes s'intègrent parfaitement àOffice Microsoft Office
- Pour illustrer nos valeurs en alliant efficacité et esthétique
Après quelques mois de travail, nos graphistes et développeurs ont présenté la nouvelle version du UpSlide .
Tu aimerais faire pareil avec ton site web ou ton application mobile ? Voici la méthode que nous avons utilisée pour repenser notre interface graphique, en six étapes.
En bref
Ce blog te guide à travers les six étapes clés pour redéfinir ton interface utilisateur. De l'évaluation de ta charte graphique à la création des nouveaux composants.
Découvre les meilleurs conseils de nos Microsoft pour mener à bien la phase de test de ta nouvelle interface.
Découvre aussi par toi-même comment la UpSlide a évolué depuis 2011.
Découverte graphique
Avant de nous lancer, on a commencé par définir un ensemble détaillé de critères pour gérer efficacement le projet : une liste des icônes à traiter, une charte graphique rigoureuse, le budget, le calendrier, la date de livraison, les critères d’approbation et les personnes qui participeraient au projet. Cette étape nous a permis de nous assurer que toutes les parties prenantes étaient sur la même longueur d’onde.
Une fois que tu sais dans quelle direction tu veux aller et comment tu comptes t'y prendre, il est temps d'explorer et d'affiner ton identité visuelle.
Il existe toute une gamme d’outils et de méthodes pour stimuler la créativité collective, comme le brainstorming, les moodboards ou la méthode World Café ; choisis la méthode qui correspond le mieux à ton projet et à ses objectifs. Dans notre cas, nous avons travaillé selon la méthode « Crazy 8 », qui est notre méthode de brainstorming préférée car elle est très simple à mettre en place et incroyablement efficace. L'objectif est de générer 8 (ou plus) idées distinctes par participant, en 8 minutes. Ça te permet d'aller au-delà de tes premières idées – qui ne sont pas toujours les plus innovantes – et de générer une grande variété de solutions. Équipe-toi de stylos, de post-its et de chronomètres haut de gamme !
Pour les UpSlide , on voulait s'inspirer des codes graphiquesMicrosoft. On a donc travaillé sur une charte graphique inspirée des couleurs et du styleOffice .
Une fois les directives graphiques établies, il était temps de les mettre en pratique !
Création accélérée
Pour un maximum d'efficacité et de souplesse, on a choisi de travailler par sprints: il s'agit d'une méthode qui repose sur des cycles itératifs, surtout 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. On en parle plus en détail dans nos conseils d'efficacité.
Dans notre cas, on a fait des sprints de 5 jours, à l'issue desquels on a proposé des icônes de base respectant les directives définies lors de la phase précédente.
Après avoir fait quelques sprints, on a trouvé trois propositions qui n'étaient ni trop fantaisistes ni trop sérieuses.
Interface et expérience utilisateur
Une fois la phase de conception terminée, il était temps de rassembler les projets graphiques sélectionnés. L'objectif de cette phase de synthèse est d'examiner les propositions et d'analyser leur structure afin de garantir aux futurs utilisateurs une interface et une expérience de grande qualité.
Il faut noter que, même si l'interface utilisateur (UI) et l'expérience utilisateur (UX) se complètent, ce sont deux choses complètement différentes : la première se concentre sur l'aspect « visuel », tandis que la seconde s'intéresse à l'aspect « fonctionnel ».
Cette étape est cruciale, car ton interface graphique aura un impact considérable sur l'expérience utilisateur qui s'ensuivra.
Pour le nouveau ruban, on a choisi le type d'icônes qui correspondait le mieux à nos spécifications – dans le styleOffice Microsoft Office, mais avec une petite touche UpSlide et on a réfléchi à la façon dont elles s'intégreraient dans PowerPoint, Excel Word.
Microsoft privilégie Microsoft le regroupement par type de fonctionnalité, nousavons donc suivi cette structure pour ne pas bouleverser les habitudes Office .
Pour faciliter la navigation, on a amélioré la mise en page de notre ruban en attribuant une couleur à chaque groupe de fonctionnalités :
Tu as peut-être remarqué que certaines Office d'origine apparaissent désormais dans le «groupe bleu »(Mise en forme et Formes).
C'est en effet la grande nouveauté côté expérience utilisateur : auparavant, l'utilisateur devait passer sans cesse des onglets natifs au UpSlide pour mettre en forme ses diapositives dans PowerPoint. Désormais, certains outils déjà présents dans Office accessibles directement depuis UpSlide , ce qui va encore améliorer la productivité et le confort de nos utilisateurs.
Production
Une fois le design graphique choisi et la structure de l'interface définie, il est temps de créer les composants!
Nos graphistes ont mûrement réfléchi à chaque icône et les ont conçues avec soin, pour s'assurer qu'elles soient à la fois détaillées et esthétiques. Voici un exemple de la maquette qui a donné naissance à l'icône de l'une de nos fonctionnalités les plus appréciées : la Bibliothèque.
Aujourd'hui, la plupart des interfaces graphiques, en particulier les sites web, s'adaptent à la taille de l'écran de l'utilisateur : c'est ce qu'on appelle le responsive design.
Il faut tenir compte de tous les types d'écrans possibles pour garantir un confort d'utilisation optimal, quel que soit l'appareil (smartphone, tablette, ordinateur…).
Nos graphistes ont donc conçu chaque icône dans tous les formats nécessaires pour que le UpSlide puisse s'adapter facilement à n'importe quelle taille d'écran d'ordinateur ou de tablette. Cette étape, bien qu'un peu répétitive et technique, ne doit pas être négligée lors de la planification du projet, car elle peut prendre plus de temps que prévu.
Au total, près de 700 icônes sont générées pour un UpSlide entièrement dynamique !
Prototypes et essais
Une fois que tous les éléments de l'interface sont prêts à l'emploi, il faut encore les mettre en place pour vérifier qu'ils fonctionnent correctement, et cela se fait par le biais de tests sur des prototypes.
Une première maquette du nouveau UpSlide voit alors le jour : elle est l'aboutissement de toutes les étapes précédentes et servira de base aux tests.
Pour s'assurer que l'expérience utilisateur et l'interface utilisateur sont au point, il est essentiel de les tester en conditions réelles afin de pouvoir observer les interactions des utilisateurs avec la nouvelle version du logiciel. L'objectif est d'analyser leur comportement afin d'identifier les points à améliorer.
Le plus grand défi, c'est de mettre de côté tes propres opinions et préjugés pour offrir la meilleure expérience possible à tes utilisateurs.
Par exemple, pendant la phase de test, on a pu constater que certaines icônes ne répondaient pas aux attentes des utilisateurs. L'une des premières icônes choisies pour la Bibliothèque – la fonctionnalité qui te permet d'accéder à des éléments graphiques ou textuels directement depuis un PowerPoint Word, Excel PowerPoint – représentait un cloud sortait une feuille de papier : aucun des utilisateurs testés n'a compris à quoi servait cette icône. Après plusieurs tests, l'icône a évolué avec l'ajout d'une loupe, qui illustrait mieux la fonction de recherche.
Une fois que les problèmes et les bugs repérés lors des tests auront été corrigés, la nouvelle interface sera enfin prête à être mise à la disposition du grand public !
Communiqué
Enfin, le moment que tu attendais ! Le lancement de la nouvelle version de ton interface peut désormais commencer. Assure-toi de communiquer avec tes utilisateurs avant la sortie de la nouvelle version, pour éviter toute mauvaise surprise lorsqu'ils mettront à jour leur outil.
L'année dernière, notre UpSlide a connu une évolution majeure sur le plan graphique et de l'expérience utilisateur. C'est un grand pas en avant car, en plus d'être graphiquement harmonisé avec les rubans de Word, PowerPoint Excel, l'onglet UpSlide intègre désormais les fonctionnalités natives les plus utilisées, ce qui évite aux utilisateurs de devoir passer d'un onglet à l'autre.
Depuis 2011, UpSlide beaucoup évolué, mais notre objectif reste le même : t'aider à mieux travailler sur PowerPoint, Excel Word!
