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.
Les grilles sont des guides définissant les zones d’expressions d’un espace et aidant à sa structuration, à son organisation, à son homogénéisation.
Un peu d’histoire
L’histoire des grilles de mise en page se confond aisément avec celle de la mise en scène typographique depuis l’invention de l’alphabet moderne par les phéniciens quelques 700 ans avant JC.
Les mises en pages traditionnelles reposaient sur une certaine utilisation du nombre d’or. Elles étaient adaptées aux prémices de l’affichage de l’information.
A gauche : les trois règles d’or les plus courantes à l’époque du plomb =3:4 – 1:4 / 2:3 – 1:3 / 5:8 – 3:8 ; à droite : principe de calcul de la régle d’or des 3:8 – 5:8 pour un format traditionnel A4 (une des plus généreuse ou artistique)
Les bases modernes de l’usage des grilles en mise en page ont été posée par Josef Müller Brockmann en 1961. Cela a largement participé à la formalisation du style suisse.
On pose les bases
Le rapport H / V répond idéalement au nombre d’or
Ça fonctionne aussi dans l’espace
Internet et la grille de 960 pixels
Les grilles sont un point de départ indispensable pour le design sur papier comme sur écran.
Dans le design de site Internet, il est courant de faire des maquettes de 960 pixels de large. Ceci est le fruit de la réflexion de designer cherchant la taille la plus proche de 1000 pixels (à cause de la résolution 1024×768 très répandue) offrant le maximum de possibilités graphiques.
On peut diviser 960 par 3, 4, 5, 6, 8, 10, 15 et 16.
Lors de la création d’une maquette, la réalisation de croquis permet de déterminer le nombre de colonnes nécessaires à la maquette. Les zonings, ou de manière encore plus précise les wireframes sont d’excellentes bases de travail.
On peut ainsi dans Photoshop poser les repères de colonnes et réaliser une mise en page aux proportions régulières et agréable.
Quelques conseils
Utilisez juste le nombre de colonnes nécessaires.
N’ayez pas peur de déborder de temps en temps. Les principes mathématiques de proportion (et de colorimétrie) n’exclue pas une dose de feeling.
Dans Photoshop
Une maquette Photoshop rigoureuse au niveau de la grille permet de réaliser facilement une feuille de style CSS. La taille des blocs et les marges étant régulières, la feuille de style est concise et efficace.
Dans votre logiciel de création préféré, l’usage de guides positionnés avec précision est indispensable.
Pour Photoshop, l’extension GuideGuide vous fera gagner un temps considérable.
Les grilles en HTML
Fortement liée à la vogue des contenus « responsifs » et « adaptatifs », la mise en page par grille passe par la débrouille (les styles sur la balise <DIV>).
De nombreux frameworks CSS proposent une gestion responsive des grilles, comme par exemple Bootstrap (voir en détail ici) et Flexible Grid System (plus d’info ici).
Actuellement à l’état de test, une spécification CSS « grid layout » permettra très bientôt une intégration encore plus facile des grilles dans les mises en page HTML, offrant de nouvelles possibilités techniques aux web-designers.
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 :-/
Susan Kare est une créatrice d’icônes et de typographies chez Apple et Microsoft dans les années 80. Elle est à l’origine du symbole ⌘ et de bien des éléments de l’interface de Mac OS. C’est la reine mère des concepteurs d’icônes.
Lors de la conférence filmé Layers en 2015, Susan Kare raconte comment elle a posé les bases de l’iconographie informatique moderne avec simplicité. À l’époque, pas de demi-teinte, que du noir et du blanc pleins. C’est avec une certaine fierté qu’elle constate que certaines de ses icônes ou de ses polices vivent encore. Elle est adorable de décontraction.
Cette conférence dure réellement 30 minutes, en anglais non sous titrée.
Ses conseils :
Soyez culottés et ayez confiance en vous
Préparez et personnalisez-vos entretiens d’embauche
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.
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
Fortement liée à la vogue des contenus « responsifs » et « adaptatifs », la mise en page par grille passe par la débrouille (les styles sur la balise <DIV>).
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.