Design : Comment j’ai recréé l’interface utilisateur du tableau de bord SpaceX

UNE Il y a quelques semaines, le SpaceX Crew Dragon a été lancé depuis le Kennedy Space Center pour transporter les astronautes Robert L. Behnken et Douglas G. Hurley vers l’ISS. Beaucoup de choses ont été révolutionnaires à propos de ce lancement, mais celui qui a attiré mon attention était que l’interface utilisateur principale de l’astronaute était un ensemble d’écrans tactiles. J’ai donc décidé d’essayer de voir si je pouvais le reconstituer à partir de séquences existantes.

Auparavant, les panneaux de contrôle étaient un ensemble de boutons, commutateurs et boutons assez loin de ce que nous avons vu en mai dernier.

Inspiré par Andrew Goodlad et son travail avec les commandes du Tesla Model 3, J’ai décidé que je voulais faire de même pour le Crew Dragon. J’ai d’abord dû rassembler autant d’images que possible à l’intérieur du navire. Le problème était que la majeure partie était obsolète ou provenait d’itérations précédentes. Le design final de Crew Dragon était difficile à trouver ou trop pixélisé pour être compris. Heureusement, j’ai trouvé des vidéos vraiment cool de Astronaute au quotidien et Découverte c’était une excellente référence pour travailler.

La première section que j’ai assemblée était le panneau de boutons sous les écrans. Le navire a 5 panneaux différents: le premier est le panneau de commande; le second est le panneau d’alimentation; le troisième est le panneau Pyro; le quatrième a apparemment quelques commandes d’entrée (était le plus difficile à trouver des images) et le dernier est un autre panneau de commande.

Une fois les panneaux terminés, j’ai commencé à travailler sur les écrans. La première chose que j’ai faite a été d’assembler le menu de navigation global. Tous les écrans partagent une navigation en 5 sections. Mon hypothèse est que les astronautes peuvent naviguer en appuyant sur chacune des options. Les sections ne sont pas étiquetées, j’ai donc dû reconstituer une capture de menu et une capture d’écran pour composer un plein écran.

Après cela, l’un des écrans les plus simples était l’écran d’accueil. j’ai trouvé ce simulateur vraiment cool par SpaceX où vous pouvez essayer d’ancrer le Crew Dragon à l’ISS. J’ai joué avec elle plusieurs fois (j’ai trouvé ça assez difficile d’ailleurs) pour comprendre comment cela fonctionne dans la vraie vie. C’était le seul écran où j’avais cette chance, donc je suis allé à fond. Bien qu’il soit un peu différent du design final, il était utile de définir les tailles et les relations à l’intérieur de l’écran.

L’écran suivant que j’ai assemblé était les paramètres audio de la cabine. Il était difficile de trouver de bonnes photos de l’intérieur de la cabine, j’ai donc utilisé une image fixe de la vidéo de Everyday Astronaut et avec un peu de Photopea magique, je pouvais isoler des sièges individuels. Les haut-parleurs sont une illustration vectorielle réalisée dans Figma.

Une fois cet écran terminé, j’ai assemblé la vue de navigation. C’est un tableau de bord en quelque sorte, composé d’un menu latéral avec différentes sections pour une navigation plus facile, une barre supérieure avec des indicateurs en temps réel et un globe où les trajectoires en temps réel sont affichées. À ce stade, la plupart des styles étaient déjà définis, donc je me déplaçais plutôt vite. Le seul qui restait pour la première version était l’écran de test. Ce n’est pas le plus chic mais c’est un gros problème car apparemment les tests dans le Crew Dragon ont une tolérance zéro aux fautes. Ce qui signifie que dans le scénario quelque chose ne va pas, le lancement est annulé.

Voilà à quoi ressemble le design final. Pour couronner le tout, j’ai ajouté quelques interactions afin que nous puissions jouer et naviguer sur certains des écrans.

Quoi qu’il en soit, voici le lien vers le prototype, n’hésitez pas à jouer et faites-moi savoir ce que vous en pensez! À l’heure actuelle, vous pouvez naviguer entre les différentes sections à l’aide des onglets en bas à gauche et également naviguer entre les différents sièges dans les paramètres audio. Il n’y avait pratiquement aucune animation montrée dans la séquence de lancement, donc tout est basé sur mes hypothèses. Je prévois d’ajouter plus de choses dans les prochains jours.

Aussi, Voici le lien pour télécharger une image en pleine résolution de la conception finale.