Lors des premières réunions de conception d’un site internet ou d’une application, il est souvent nécessaire et plus clair de réaliser des schémas des contenus et de la structure attendue des différents écrans du projet. Cette étape de zoning ou de wireframe sert à l’élaboration des premières maquettes graphiques et techniques, ainsi qu’à l’élaboration de cartes d’expériences et de Wireflow en UX design.
Plutôt qu’une feuille blanche, il est préférable d’utiliser des gabarits. Utilisez les planches avec un seul écran à la fois si vous travaillez avec des pos-it, et celles qui regroupent 2 ou 4 écrans si vous griffonnez finement.
Avec ces feuilles, une règle et quelques bons crayons, vous pourrez créer vos wireframes à la vitesse de la pensée.
J’ai tendance à travailler de plus en plus directement avec Adobe XD, mais le papier reste pratique, tout le monde sait s’en servir. Il faut toutefois une bonne capacité d’abstraction pour valider un wireframe griffonné.
De nombreux gabarits aux formats iPhone 5, iPhone6, Galaxy Note 5, Nexus 5x, iPad, navigateurs internet desktop et mobile, smartwatch.
Pratique car utilisables immédiatement, et avec suffisamment de marge pour laisser des commentaires.
UX prototype paper kits
Des kits imprimables d’éléments d’interface standards pour prototyper rapidement sans ordinateur.
De superbes pochoirs avec des éléments d’UI pour crayonner des wireframe réguliers. Un peu cher mais un moyen classieux de gagner le respect en réunion.
À propos du dessin de wireframe
Le dessin n’est pas un talent. C’est une discipline technique. Plus on pratique, meilleur on devient. Je ne suis certainement pas le mieux placé pour en parler mais je peux vous recommander un livre.
101 Things I learned in architecture school de Matthew Frederick
Un livre court bourré de conseils technique pour faire de jolis croquis.
Une très bonne lecture, qui vous aidera aussi avec la perspective et vous donnera des notions de base en architecture.
J’aime Photoshop d’un amour franc et sincère. Je l’utilise à outrance, pour retoucher des photos mais aussi pour créer des maquettes imprimées ou digitales.
C’est un outil tellement abouti qu’on s’aperçoit qu’il y a souvent plusieurs moyen d’arriver à un même résultat.
Une explication bien illustrée de la joie théorique des objets dynamiques dans Photoshop. veerle.duoh.com
Les récents ajouts fonctionnels (objets dynamiques, objets dynamiques liés, plan de travail multiples, exportation simplifiée, styles d’objet et de texte…) dopent considérablement la productivité.
Ces outils sont particulièrement cools. On se dit que comme dans un site Internet, on va pouvoir partager des éléments entre plusieurs documents, et les mettre à jour tous d’un coup en cas de modification d’un élément récurant.
Au premier abord, la magie opère. Les objets dynamiques liés sont une mini révolution qui permet de fractionner une maquette en plusieurs documents, rendant possible le travail collaboratif simultané.
Ça marche nickel pour des petits documents comme des campagnes publicitaires multiformats.
Oui mais…
Lors de projets de maquettes de sites Internet, j’ai été amené à réaliser de nombreuses pages, et notamment des versions de pages de listes d’items.
Un de mes souvenir les plus douloureux est la réalisation de maquettes de pages incluant une liste avec les vrais images et les vrais textes de résultats de recherche de 160 modèles de lave-linge. C’était sexy au diable.
Cette liste m’a prouvé que qu’il y a des limites à ne pas dépasser avec Photoshop. En multipliant calques dynamiques et plans de travail, il est possible de mettre à genoux la plus puissante des stations de travail. On arrive rapidement à des centaines de calques lourds à manipuler, malgré l’apparente flexibilité de ces fonctionnalités.
J’ai du, pour réaliser la maquette, fractionner ma page en plusieurs documents Photoshop, et tout assembler dans un document en copiant-collant des captures aplaties.
Photoshop n’est pas parfait non plus quand il s’agit d’exporter des objets vectoriels, notamment des SVG à la bonne taille. Cela nécessite des aller retour dans Illustrator.
Enfin dans une gestion de projet complète, une page passe par plusieurs étapes : zoning, wireframe, maquette, prototype fonctionnel. Photoshop n’est pas l’outil idéal pour les zonings et wireframes, et il ne peut pas réaliser de prototype interactif.
À la recherche d’une alternative spécialisée
Depuis quelques années, de nombreux logiciels sont apparus permettant de gérer de manière plus fluide le flux de production d’interfaces. Elles permettent de construire zoning et wireframe, d’y inclure un graphisme pixel-perfect, de permettre un test fonctionnel dans une fenêtre émulée ou dans un vrai device, puis finalement d’exporter les assets pour une intégration par une équipe de développement.
SketchApp
Sketch a le vent en poupe. C’est le choix de nombreux concepteurs d’interface. C’est un logiciel très complet et super optimisé. Lancé en 2010, le logiciel est éprouvé, des fonctionnalités ont été ajoutées à la demande des utilisateurs et il dispose de nombreuses extensions très pratiques. En plus la licence de 99$/an est vraiment pas chère.
Idéalement c’est le logiciel qu’il me faudrait, mais je n’ai pas de Mac ultra à jour au niveau de la configuration système.
InvisionApp
Une autre solution validée par l’industrie. C’est une application dans le navigateur, très bien pour le travail collaboratif.
C’est un service sur abonnement, limité dans sa version gratuite à un projet. Je cherche quelque chose de plus pérenne, de plus solide et qui fonctionne hors-ligne.
Figma
Le Google Docs du design. Dans le navigateur, collaboratif, c’est très bien fichu mais je n’ai pas testé en production.
Gravit
Un site qui permet de faire des interfaces. Gratuit mais moins efficace qu’une application.
Adobe XD
En 2015, Adobe a lancé le développement d’XD. Le logiciel est clairement inspiré de Sketch. Il est actuellement inclus à la Suite Créative. D’abord réservé aux utilisateurs de Mac, une version Windows est sortie en 2017 pour ma plus grande joie.
J’ai commencé à l’utiliser pour des projets de sites Internet et d’application mobiles. L’application a de nombreux avantages par rapport à Photoshop. Elle est légère, intuitive et relativement simple. Elle permet de maquetter rapidement de nombreux écrans, sans trop puiser dans les ressources de mémoire de votre ordinateur. Comme dans Illustrator la feuille de travail est énorme. Comme dans Sketch, on peut créer des prototype interactifs, exporter des documents de conception image ou vidéo, et exporter les assets graphiques pour une intégration iOs ou Android en un clic ou presque (ce qui peut s’avérer pénible avec Photoshop, à cause d’une nomenclature et de tailles de document à respecter strictement).
Le logiciel n’est clairement pas fini, il pèche sur certains points : gestion des effets graphiques limités, pas d’export des valeurs stylistiques du texte, pas de plugins, options générales assez primaires… Heureusement il est plus rapide de copier que de créer, donc normalement ils devraient rattraper leur retard rapidement.
N’ayant pas ou peu de concurrence sur PC, cela reste à mon avis le meilleur choix sur cette plateforme. À noter : la version Mac de XD est légèrement en avance sur la version PC.
C’est un logiciel très agréable pour réaliser des maquettes pixel perfect, avec des marges et des espacements réguliers. XD gère très bien les tracés vectoriels, l’intégration d’images pixel par simples cliqué-glissé et surtout il permet d’essayer rapidement et souplement différentes maquettes d’affichage de liste. Il est aussi maniable que de nombreux outils de wireframe mais avec un rendu très proche de la mise en production, ce qui permet une meilleure prise de décision.
C’est aussi un logiciel léger, qui fonctionne très bien avec des machines modestes.
Adobe XD permet par sa souplesse de faire des essais en direct, en même temps que les idées et suggestions sont lancées lors de réunions créatives.
Je vous conseille de l’essayer si vous n’êtes pas déjà habitués à Sketch. Le logiciel a intégré la Creative Suite en version 1.0 en 2017. Il est devenu gratuit en 2018. C’est un must-have.
C’est l’histoire d’une petite vidéo VR réalisée par une star de l’animation avec le soutient de Google…
Pearl (2016) raconte la transmission familiale à travers la chanson « No Wrong Way Home ». Le clip en réalité virtuelle nous place sur la place du passager d’une voiture pour observer un père et sa fille vieillir en faisant de la musique.
Le film a été conçu pour être diffusé sur smartphone. La production a commencé avant l’annonce des casques VR.
On peut la visionner dans les plateformes modernes de vidéo (Youtube, Facebook, Vine) et en application iOS.
Lors d’une conférence filmée, Le réalisateur / animateur Patrick Osborne (Disney, Volt, Raiponce, Les Mondes de Ralph, …) partage son expérience.
En résumé :
Le storyboard dans une salle de réunion Google
Un autre document de production : une timeline pour chaque personnage
Détail
Un montage pour faire quelques essais de préproduction
Le groupe Pearl a fait la chanson en ayant connaissance du storyboard et des paroles.
Quelques esquisses de storyboard ont été faites mais dans une conception pour la réalité virtuelle, elles se sont vite révélées inutiles à la production. Elles servirent uniquement à la direction artistique.
La réalisation de rough d’animation en 3D a permis de se faire une idée plus précise du timing des éléments. C’est aussi le moyen de disposer rapidement d’un prototype fonctionnel en VR.
Mon gif ne montre pas que tout est animé via de spectaculaires transitions de mouvement.
Le challenge a été ensuite de rendre l’animation belle et fluide dans un contexte technique de faible ressource (low-poly, low-cpu).
I surround myself with people I admire and are doing amazing things
Patrick Osborne
Character design
La voiture et un bout de décors
Le style est un compromis entre le dessin de mode et le low-poly
L’évolution de la teinte générale au cours de l’histoire permet aux utilisateurs qui ne regardent pas dans le bon sens (et il y en a beaucoup visiblement, Vine donne des rapports comportementaux en VR) de sentir les changements d’ambiance.
Les vidéos de réalité virtuelle sont générées de manière panoramique, le player les interprète ensuite pour mapper un cube ou une boule.
Ils ont ensuite enregistré la piste sonore à 360° avec le groupe. Tous les éléments nécessaires à la réalisation du film étaient rassemblés. Quelques mois plus tard le module VR était réalisé. Ils ont utilisé un moteur graphique ultra-light, qui tourne directement dans le player Youtube (dit-il, je pense qu’il confond avec l’appli iOS). Il ne parle pas du staff de développement, mais on peut supposer qu’il avait une équipe de production de Google.
Le réalisateur a du monter une version statique pour des diffusions lors de conférences ou de festivals.
Pour la gestion de projet, il a utilisé le logiciel Shotgun qu’il décrit comme un outil parfaitement adapté à une production dont les membres sont éparpillés dans le monde entier.
Il conseille de laisser 30 secondes sans action au début d’une vidéo VR, de laisser le temps à l’utilisateur de regarder autour de lui. Il a aussi du adoucir le timing d’animation original à cause de la réalité virtuelle.
On connait tous un bricoleur : ce tonton magique que sait aussi bien réparer l'alternateur de sa voiture (déjà il sait ce que c'est) que fabriquer une table ou couler une dalle de béton. Réparer, améliorer, fabriquer, c'est son credo.
La bidouille, comme bien des domaines, a entamé sa transition numérique.
La démocratisation de certaines machines-outils et la gratuité des échanges de connaissances dans une société connectée permettent aux bricoleurs de repousser les limites. Au delà des domaines traditionnels réservés aux ancêtres des nerds comme l'automobile, le bâtiment et la couture, de nouveaux domaines s'ouvrent aux bricoleurs modernes : réparation d'électroménager, bidouille électronique, programmation, bijouterie, prototypage 3D, robotique... Tout est devenu accessible grâce aux technologies numériques.
Le fil rouge sur le bouton rouge, le fil vert sur le bouton vert.
L'électronique était couteuse et fragile dans les années 80 et 90. Beaucoup d'enfants n'avaient pas le droit de toucher à ces objets précieux. "Ne touche pas ! Tu vas le casser". Il faut savoir qu'un enfant assimile souvent mal les tournures négatives. L'interdiction devient presque une invitation. C'est comme ça que l'on fabrique une génération de bidouilleurs et de hackeurs.
L'influence subliminale de Gaston Lagaffe
Très utile pour répondre au courrier des lecteurs
Si il est surtout perçu dans l'inconscient populaire comme un gaffeur, c'est un personnage aux multiples facettes : flemmard, c'est aussi un poète optimiste, un passionné, un inventeur de l'inutile, un gentil écolo... L’éclectisme et de l'avant-gardisme de ses bidouilles parle d'elle même : Modélisme, électronique, informatique, robotique, transport...
Bon voilà c'est un anti-héro donc par nature, un enfant ne se dit généralement pas "Plus tard je serai Gaston Lagaffe" mais il est inimaginable que les aventures du sympathique garçon de bureau n'aient pas eu d'influence sur ses millions de lecteurs.
Gaston c'est un proto-geek. C'est un proto-adulescent. C'est un proto-procastrinateur. C'est la graine de la génération Y, le papa des millenials.
Le bricolage moderne
Comme on est au 21e siècle, on invente tout un jargon pour hyper la chose. Parce que maintenant, on ne se contente plus de faire ou de réparer, on crée ! Les makers dans les labs sont les Géo Trouvetou d'autrefois. Les Maker Faire sont les concours Lépine d'hier.
Internet a facilité la vie des bidouilleurs. Il est possible de se documenter sur quasiment tous les sujets. Modes d'emploi, tutoriaux, vidéo explicatives... Peu de domaines ne sont pas documentés. Il faut noter d'ailleurs que certains savoirs confidentiels comme le crochetage de serrure sont passés de l'ombre à la lumière. On peut même acheter des kits d'entrainement sur Amazon...
La culture de l'open source encourage aussi les utilisateurs à devenir des acteurs de l'utile. Elle encourage la transmission de la connaissance.
L'outillage numérique et les composants sont aussi beaucoup plus abordable qu'avant. Le prix d'attaque d'un ordinateur est devenu incroyablement bas. De nouveaux outils ont changé la donne, comme les imprimantes et les scanners 3D. Le coup et l'usage marginal de certains outils favorise la création d'ateliers partagés.
Fablabs
Les fablabs sont des ateliers partagés de nouvelle génération. Outre l'outillage de l'atelier numérique (imprimante 3D, découpeuse laser, plotteuse, ordinateur, imprimante, tour à bois, machine à coudre...), toute connaissance acquise par un des membres de l'atelier doit être documentés pour resservir à un prochain utilisateur. La notion d'entraide est très importante. Les utilisateurs des ateliers doivent (théoriquement) participer au rangement et à l'entretient du lieu.
Il y a des fablabs de tous types. Associations radicales de la culture du libre, structures universitaires, ateliers payants... Peut se prétendre Fablab un endroit qui répond à la charte originalement émise par le M.I.T. . On peut y croiser tous types de bricoleurs et de geeks. Un barbu qui répare son électroménager en fabriquant une pièce cassée, un étudiant en architecture qui fait une maquette avec la découpeuse laser, deux rigolards excités d'avoir mis un Arduino dans une cafetière, un couple en train de faire du home-staging avec la découpeuse laser, une pilote de course de drone qui soude un truc, etc...
Personnellement, mon outil de prédilection est la découpeuse laser. Parfaite pour faire de beaux pochoirs ou graver des objets en surface.
Fist bump en afrique
L'objet phare étant l'imprimante 3D. J'ai un peu plus de mal à lui trouver des utilisations personnelles, mais c'est l'outil qui marque les esprits. Les imprimantes de premières générations n'étaient pas géniales, mais maintenant on arrive facilement à un objet de belle apparence (avec un peu de travail de finition ) disposant si besoin est d'une bonne résistance mécanique.
Dans le domaine médical les applications sont multiples. En ce qui concerne les Fablabs, la réalisation de prothèses pas chères change complètement la donne. Le projet enable met en relation des enfants amputés avec des makers bénévoles.
L'usine.io, à Paris, idéal pour prototyper un projet industriel sérieux.
My Human Kit, à Rennes, aide les handicapés via des hack de haute volée.
Et mon choucou
Le fabcafé. Japonais, à ouvert une antenne à Toulouse. Je n'y ai jamais mis les pieds mais j'adore leur activité en ligne.
Mon expérience personnelle
Deux exemples de bricolage très simples.
Une heure de fun au Faclab de Gennevilliers
Le premier projet est un test de bijou / objet découpé dans du PVC. C'est pas cher, assez joli car coloré, et la découpe laser ne fait pas cet effet pyrogravure moche qu'on a en découpant du bois. Au dessus de 4mm d'épaisseur les objets découpés sont assez solides. Les formes de découpe sont des dessins vectoriels, la gravure en surface est un fichier bitmap.
Le second bricolage est un exercice de tuning skate, avec des bandes de LED, des poches à piles, une plaque de fixation et des fils. Mon skate ne roule plus quand le temps est humide, mais quelle classe au soleil couchant.
Au départ j'aurais voulu en mettre tout autour mais les bande LED sont trop fragiles pour l'avant et l'arrière du skate. Les 8 piles garantissent puissance et autonomie, par contre j'ai vite "blindé" le montage avec du duct-tape.
C'est peut être idiot mais je m'en sers beaucoup plus maintenant qu'il ressemble à une Xantia picarde.
Un skate qui vend du rêve #nofilter
Inspirations
"C'est très bien tout ça, mais chez moi rien n'est cassé et j'ai pas trop d'idées" me direz-vous. Mais mon bon monsieur, Internet est là pour vous servir !! Et comme on parle de loisir de geeks je peux vous assurer que c'est fourni.
Primitive Technology Apprendre et pratiquer la vie sans outils, comme les hommes des cavernes mais avec notre savoir actuel. Il a atteint l'age de fer récemment.
Fabriquer et réparer soi-même, c'est parfois une joie. C'est souvent une nécessité économique. C'est une satisfaction quand on conclut un projet et qu'il fonctionne.
Certains vont plus loin (trop loin ?) dans leur obsession.
Ken Imhoff, après 17 ans d'efforts, a usiné et construit lui même sa Lamborghini dans sa cave. Son père lui avait dit "pourquoi acheter une chose si tu peux la construire toi même ?". Il a tout fait lui même à l'exception de certaines pièces (moteur v8 Ford, boite de vitesse...). Sa monomanie a payé, il est maintenant au volant de la voiture de ses rêves.
400 pièces, 5 matériaux. Il a tout fabriqué lui même de l'extraction des matières premières au façonnage et à l'assemblage. Il a miné son fer et son cuivre lui même ! Il a moulé la coque avec un plastique à base d'amidon. Les gaines de fil électriques par contre... n'essayez pas sa méthode à la maison ! À l'arrivée l'objet fonctionnera 5 secondes, est horrible et lui a couté des centaines d'euros. Mais il a l'air plutôt content de son expérience.
On est dans la performance artistique de design dont s'approchent parfois malgré eux certains makers. Le jusqu'au-boutisme dans le do-it-yourself a ses limites.
Attention aussi à ne pas voir trop gros. Commencez par de petits projets, avec un niveau de challenge acceptable et un coût minime. Faites vous aider, entrez en relation avec d'autres bidouilleurs. Essayez, tripotez, machinez, codez, apprenez et n'oubliez pas qu'il n'y a pas de soucis à louper son coup.
La bonne stratégie c'est le recyclage.
L'esprit Mc Gyver ! Le destin vous met au défi, de vieux objets inutiles ou moches vous entourent et vous pouvez leur donner une seconde vie !!
J'ai un vieux PC, une webcam, une vieille voiture radiocommandée, et 4 bouteilles vides de soda ? Qu'est-ce que je fait avec ?!
La réponse à la question n'est pas "un jambon beurre"
Elles ont font un peu trop pour être utilisables, elles bougent dans tous les sens pour interpeller le spectateur qui ne les voit souvent qu’une fraction de seconde à l’écran. On est entre le costume, le décors et le personnage désincarné. C’est un nouveau type d’accessoire.
Leur but n’est pas nécessairement d’être utilisables, toutefois les projections de la science fiction semble avoir une influence certaine sur les concepteurs d’interfaces « de la vraie vie ».
La science fiction, laboratoire pour l’UX
En 1968, dans 2001 l’odyssée de l’espace, un astronaute lit le bulletin d’information de la BBC du futur avec sa tablette. Au calme. Il fait un peu de chat vidéo aussi.
En 1982, le film Blade Runner inspiré de l’œuvre de Philip K. Dick surprend par l’omniprésence des écrans dans futur noir et ultra-technologique.
L’interface des cockpit des voitures avait fait forte impression.
All of my ‘work’ on BLADE RUNNER was based on real theories, twisted a bit to fit the problem solution base, which was the time frame for the film’s story and the dramatic demands from Ridley and Paull.
Syd Mead
Des interfaces très fidèles aux concept art de Syd Mead, avec un tableau de bord en mosaïque d’écrans.
Blade Runner 2049, avec le logo Peugeot au reboot de la voiture.
Le film moderne ayant certainement mis en avant une interface utilisateur originale de la manière la plus flagrante est Minority Report (2002).
Comme le souligne cette vidéo, Minority Report est annonciateur de tendances fortes en terme d’interface utilisateur et d’usage du réseau. Les gestes tels que le swipe et le pinch sont ultra théâtralisés, à tel point que la performance d’acteur ultra physique a nécessité plusieurs pauses de récupération.
Le poncif de la scène de hacking
Ce qu’on voit le plus souvent au cinéma et dans les séries, ce sont des scènes de piratage complètement irréalistes, au graphisme moche.
Une barre de chargement type Windows 3.1 pour schématiser la progression d’un transfert de fichier ou d’un calcul. Rien de génial niveau création graphique.
La mauvaise scène de hack a ses codes : l’opérateur est tout au clavier (des fois à deux sur le clavier pour aller plus vite), l’action est ponctué de jargon informatique approximatif, le codeur travaille toujours sous pression (flingue sur la tempe).
I’ll create a GUI-Interface using visual basic. See if I can track an IP out of this.
CSI New York
L’interface comme personnage à part entière
De nombreux films récents placent toutefois l’informatique et le design d’interface au cœur de l’action.
Dans Jurassic Park (1993), l’île est commandée par un système informatique complexe. La petite fille le reconnaît immédiatement : c’est un système UNIX 🙂
Une interface graphique tellement reloue à utiliser qu’elle participe à l’angoisse de la scène.
Pourtant Lex commence bien en choppant la souris, on a l’espoir d’une solution rapide, mais après c’est le drame.
On se perd dans une hiérarchisation complètement farfelue de l’accès aux commandes : /USR/Park/Zoology/Physical Security/Visitor Center/. Pourquoi Zoology ?!
Et les transitions de 5 secondes avec une animation 3D en 10 FPS, c’est pour mourir en cas d’urgence…
Moralité de l’histoire : quand on dépense sans compter, on peut se payer un audit « ergonomie, accessibilité et sécurité ».
On peut retrouver des reproductions de cet OS culte sur le site jurassicsystems.com.
Dans un registre plus subtil, le film Her de Spike Jonze (2014) nous raconte l’histoire d’amour entre un homme seul et un système d’exploitation à commande vocale désireux de subvenir à tous ses besoins.
Theodore, le mec qui se taperait bien son OS si il le pouvait
There are all these screens in this film: the operating system, then there’s a video editing suite, there’s this program he uses at this office, there’s buttons in the elevator—all these interfaces. But the movie is about design in the sense that design is transparent.
Geoff McFetridge
Les premiers croquis, document de production.
Il dit être fan de flat-design. Plus c’est plat, mieux c’est pour lui. Les actions principales sont placées au centre de l’écran. L’interface doit être transparente.
Mise au point de la charte graphique, document de production.
Dring c’est Scarlett Johansson
Il pense que l’avenir de la technologie et sa vitesse de progression sont devenus totalement imprévisibles à moyen terme. Il est assez branché intelligence artificielle.
Someone’s going to release a new artificial intelligence standard, you plug that in, and there’s an artificial version of me in the future that will create an interface just for you.
“We were thinking about functionality and how technology might operate, not just how it looks,” Popplestone says. “It’s quite tricky because [the digital meltdown] is all we know for this generation’s tech. We had to think about all the wonderful ways technology might work if it was powered by something else, be it cellular or chemical or more organic. We spent a couple weeks coming up with concepts and presented them to Denis. He loved anything that had a human element that created imperfection and tangibility. We started to define our different worlds–whether it’s the LAPD or Wallace Corp.–and constructed styles which visually summed up this film. You have this uber, uber technology [at Wallace] versus the rest of the world, which is living in dystopia and has dilapidated old technology.”
“It all comes down to imagining ‘what if,’” Eszenyi says. “Futurists, directors, and tech companies are all in the business of imagining ‘what if’ and posing those questions and answering them . . . The difference in films versus the real world is films get there quicker.”
La team UI d’Oblivion dans les crédits au générique.
Aparté Star Wars
Fan de Star Wars, j’ai toujours été déçu par les interfaces qu’on peut apercevoir dans les différents films. Dans la trilogie initiale, il n’y a rien de très marquant, à part les hologrammes (de la princesse Leïa, des étoiles de la mort). Les tableaux de bord et écrans des installations ne présentent pas d’intérêt.
Seul parti pris graphique, une police de caractère futuriste, l’Aurebesh. Elle est dans la lignée des hypothèses de polices de caractères visant à être très lisible sur les écrans de l’époque à faible définition.
À l’image différentes choses affichées sur des écrans, on a l’impression que tout est fait pour qu’on n’y comprenne rien.
Aperçue furtivement dans Le Retour du Jedi, elle a été « complétée » par les auteurs du jeu de rôle Star Wars de West End Games.
« The Aurebesh is a lot like Boba Fett—it is a facet of the Star Wars phenomenon that had its origin as a cinematic aside, but which has come to be widely embraced, far out of proportion to its humble origins. »
―Stephen Crane
Dans les épisodes les plus récents, on peut voir de nombreuses interfaces, classiques ou inédites. Pour l’épisode 8, le studio londonien BLIND LTD a créé plus de 200 écrans. Les interfaces sont simples et pragmatiques. Mais toujours semi-abstraites et ne facilitant pas clairement l’usage.
Le tableau de bord d’un Xwing
Le designer Andrew Booth fait part de son expérience sur le projet. Dans le respect de la cohérence avec les premiers épisodes, il s’est inspiré de ce qui se faisait dans les années 80 : TRON, Knightrider…
When we are designing an interface for Star Wars, it’s a combination of many things. It’s about being respectful to what has gone before, questioning the past and adapting and building on the work for the future. It’s about the aesthetic ideals of the production designer and the art department and most importantly understanding the Director’s vision.
HYPERSPACE !!!
Mon vaisseau Star Wars préféré, le A-wing. On comprend que dalle au tableau de bord :-/
Après une invasion d’écrans vidéo, ce sont maintenant les écrans tactiles et l’interactivité qui s’emparent de notre quotidien. Autrefois réservés à l’informatique pure et au bornes interactives, la démocratisation des petits écrans tactiles consécutif à la production de masse de smartphones tactiles depuis 2008 incite les designers à les utiliser à leurs avantages.
De nombreux objets de notre quotidiens subissent ainsi une transformation de leur interface, pour le meilleur et parfois pour le pire.
Voici quelques exemples de remplacement du design, d’un service ou de la chose imprimée par une interactivité sur touch-screen.
Distributeur Mac Donald
C’est le grand succès du genre. Les interfaces interactives tactiles installées dans les Mac Donald ont été la source de nombreux bénéfices pour la firme américaine.
Ces bornes présentent de nombreux avantages pratiques et commerciaux par rapport aux classiques tableaux imprimés et écrans vidéo.
Multilingue
Actualisable facilement
Minimise les erreurs
Idéal pour les produits à forte personnalisation
Proposition d’up sell et / ou cross-sell automatique
fluidifie le workflow commande /cuisine/préparation
Permet une multiplication de postes de vente à moindre frais
Machine à café
selecta.fr
Vous avez peut-être remarqué la nouvelle génération de distributeurs automatiques de cafés qui peuplent nos aires d’autoroute. Les boutons et étiquettes ont été remplacé par des interfaces animées avec les mêmes bénéfices que ceux précédemment cités pour les bornes Mac Donald.
La vidéo « BeMoved Coffee Machine concept » ci-dessous nous montrent une prolongation du concept. Le barista est remplacé par un logiciel oscillant entre interactivité élégante et party game.
Les animations sont en général des carrousels vidéo, et des choix d’options de goût et de dosage. La personnalisation du produit est un objectif facilité par une interface animée sur écran tactile.
Tableau de bord automobile
De nombreuses marques proposent des tableaux de bord / écran. D’abord réservé aux modèles ultra haut de gamme, on trouve maintenant des écrans en lieu et place des aiguilles et voyants dans des modèles de consommation plus courante.
Audi, en partenariat avec Google, est la marque qui a le plus tôt réussi l’intégration de son tableau de bord digital connecté. L’ensemble est entièrement personnalisable, il se commande grâce a des commandes sur le volant. L’écran n’est pas tactile, car ce n’est pas nécessaire : c’est l’écran du conducteur qui a ses mains sur le volant.
Mercedes fait aussi très fort dans le genre.
Le testeur de la vidéo évoque d’éventuelles skins 3rd party. Comme dans WinAmp à l’ancienne, mais dans votre voiture ! Spiderman, Blade Runner, Lord of the Rings, RC Lens, Justin Bieber… C’est le retour du bon goût.
L’équipementier français Faurecia a fait en 2016 une étude de style ambitieuse. Baptisée Wellness, elle bichonne son utilisateur du futur et s’adapte intelligemment à son état mental et physique.
« Là où on va, on n’a pas besoin… de route ! » Doc Brown
On retrouve des similarités troublantes en production sur le Tesla Roadster 2.0.
En 2018, Nissan présentait un prototype assez atypique : Xmotion. Dans les écrans de l’habitacle, un poisson / assistant personnel accompagne les utilisateurs en passant d’un écran à un autre parmi les 7 embarqués.
C’est « Pimp my ride » version zen.
Commandes et affichage dans les vaisseaux spatiaux
Après plus de 10 ans d’évolution, le programme « Glass cockpit » de la NASA arrive a maturité.
À gauche, le tableau de bord de la navette Endeavour, avec 9 écrans LCD et des centaines de boutons. À droite, la prochaine capsule spatiale ORION dispose d’une interface simplifiée autour de 3 écrans.
Les premiers prototypes de tableau de bord pour la navette Orion de la NASA utilisaient 3 écrans tactiles, et un design abstrait inspiré des interfaces de la série télé Star Trek (authentique).
Rapidement il a été admis que les commandes directement sur l’écran tactile n’étaient pas une bonne solution. Un objet en apesanteur auraient pu activer une action indésirée. Les écrans ont donc été bordés de cases / interrupteurs, ce qui permet de les rendre opérationnels avec n’importe quel type de gant et pendant des séquences de fortes vibrations.
Ce passage du « tout interrupteur » aux écrans n’est pas une fantaisie. C’est une amélioration technique.
Un tableau de bord d’engin spatial était composé de 2000 interrupteurs et voyants, en plus d’écrans. 1247 d’entre eux étaient accessibles à l’équipage. Le nouveau tableau de bord est composé de 56 boutons et de 3 x 2 écrans. Toutes les fonctionnalités sont accessibles rapidement et simplement.
C’est feng shui, mais c’est aussi un gain de poids (moins d’interrupteurs, moins de câbles, pas besoin de manuel papier) et plus facile à entretenir ou à actualiser (une mise à jour logiciel contre des centaines d’heures de recâblage).
L’UI stylisé des premiers prototypes a cédé la place à un design d’interface pseudo-réaliste skeumorphique. Surement suite à des tests utilisateur rigoureux… Le résultat est beaucoup moins chic que les premiers prototypes mais ça fonctionne : les ingénieurs garantissent qu’une petite fille de 9 ans peut faire démarrer la navette.
De nombreux objets intelligents se dotent d’écrans et d’interfaces animées. Je n’ai pas cité la domotique, l’électroménager blanc, les pompes à essences, les montres, les vitrines d’agences immobilières… les exemples sont nombreux.
Les écrans permettent une interface-utilisateur plus claire, facilement actualisable, facilement localisable et entièrement contextualisable.
Plus jamais ça !
Il faut aussi noter qu’inclure un écran animé en guise de tableau de bord influe moins sur le prix de gros produits. C’est aussi beaucoup mieux quand on n’a pas de soucis d’autonomie.
En 2001, j’ai beaucoup joué à un jeu de quiz absolument génial : You Don’t Know Jack.
C’est un quiz irrévérencieux qui a fait un carton aux USA, à tel point qu’ils ont décliné le jeu vidéo en jeu télé. Le jeu repose sur un enchaînement de questions finement écrites, une voix off omniprésente qui taquine le joueur, le tout servi par une interface minimaliste. De nombreuses déclinaisons sont disponibles sur toutes les plateformes, mais il faut avoir une bête de niveau en anglais.
La version française a flopé, pourtant elle était excellente. J’avais acheté mon CD PC/Mac en déstockage pour rien. Le truc le plus proche qui a eu un bon succès c’est le Burger Quiz de Alain Chabat et Abd-el-Kader Aoun qui fut diffusé sur Canal+ de septembre 2001 à juin 2002.
En 1997, Harry Gottlieb, créateur du jeu de quizz You Don’t Know Jack et fondateur de Jellyvision rédige un white paper culte à propos de ce qui fait de ce qui fait un bon programme de conversation interactif. Il utilise l’expression « interactive conversation interface » ou iCi (prononcé “iky”).
Le document pdf est pour moi absolument culte : THE JACK PRINCIPLES.
J’y pense à chaque fois que je conçois un formulaire ou un tunnel d’action (tunnel d’achat, séquence de configuration). Les principes sont particulièrement simples à mettre en action quand on dispose d’une voix off mais ça reste valide et applicable pour de l’UX silencieux.
En résumé, voici les grands principes :
Stimuler l’utilisateur constamment
1. Donner une tache à accomplir à la fois à l’utilisateur
2. Limiter au minimum le nombre de choix lors d’une action
3. Donnez des choix significatifs à l’utilisateur
4. Assurez-vous que l’utilisateur sache ce qu’il doit faire à chaque instant
5. Maintenez l’attention de l’utilisateur sur la tâche à accomplir
6. Utilisez la manière la plus adaptée de recceuillir la réponse de l’utilisateur
7. Prévenez l’utilisateur que le programme l’attend
8. Marquez une pause, quittez le processus ou avancez à l’étape suivante si l’utilisateur tarde trop
Créer l’illusion d’une conscience
Répondre avec humanité, intelligence et émotion à :
1. Les actions de l’utilisateur
2. Les innactions de l’utilisateur
3. Les actions passées de l’utilisateur
4. Une série d’actions de l’utilisateur
5. L’environnent dans lequel se trouve l’utilisateur (temps et espace)
6. La comparaison des situations et des actions des différents utilisateurs
Maintenir l’illusion d’une conscience
1. Utilisez un ton de dialogue qui transmet un sentiment d’intimité
2. Assurez-vous que les personnages agissent de manière appropriée lorsque l’utilisateur interagit
3. Assurez-vous que les dialogues ne semblent pas se répéter
4. Tenez compte du nombre de joueurs simultanés
5. Tenez compte de sexe des utilisateurs actifs
6. Assurez-vous que les dialogues aient l’air naturels
7. N’utilisez pas de personnage ou de message vocal si le programme ne peut pas évaluer une réponse de l’utilisateur
Des principes appliqués consciemment ou pas dans de nombreux cas.
Ici un exemple récent (juillet 2016) de module de recrutement de codeur.
Lors des premières réunions de conception d’un site internet ou d’une application, il est souvent nécessaire et plus clair de réaliser des schémas des contenus et de la structure attendue des différents écrans du projet. Cette étape de zoning ou de wireframe sert à l’élaboration des premières maquettes graphiques et techniques, ainsi qu’à l’élaboration de cartes d’expériences et de Wireflow en UX design.
À propos du dessin de wireframe
Le groupe Pearl a fait la chanson en ayant connaissance du storyboard et des paroles.
La réalisation de rough d’animation en 3D a permis de se faire une idée plus précise du timing des éléments. C’est aussi le moyen de disposer rapidement d’un prototype fonctionnel en VR.
Il y a des fablabs de tous types. Associations radicales de la culture du libre, structures universitaires, ateliers payants... Peut se prétendre Fablab un endroit qui répond à la 
Le second bricolage est un exercice de tuning skate, avec 
Fan de Star Wars, j’ai toujours été déçu par les interfaces qu’on peut apercevoir dans les différents films. Dans la trilogie initiale, il n’y a rien de très marquant, à part les hologrammes (de la princesse Leïa, des étoiles de la mort). Les tableaux de bord et écrans des installations ne présentent pas d’intérêt.
Rapidement il a été admis que les commandes directement sur l’écran tactile n’étaient pas une bonne solution. Un objet en apesanteur auraient pu activer une action indésirée. Les écrans ont donc été bordés de cases / interrupteurs, ce qui permet de les rendre opérationnels avec n’importe quel type de gant et pendant des séquences de fortes vibrations.
Le nouveau tableau de bord est composé de 56 boutons et de 3 x 2 écrans. Toutes les fonctionnalités sont accessibles rapidement et simplement.