Comment prototyper une interface d'ordinateur de vaisseau

Cet article a été créé en partenariat avec Mockplus . Merci de soutenir les partenaires qui rendent SitePoint possible.

Je suis un fan de science-fiction depuis longtemps, et les films de science-fiction ont souvent été une boule de cristal dans l'avenir de la technologie. Les tricordeurs peuvent facilement être réinventés en tant que téléphones cellulaires, et les dispositifs de communication au poignet peuvent facilement être considérés comme parallèles à l'Apple Watch.

D'un autre côté, de nombreuses merveilles technologiques que nous pensions être arrivées à se concrétiser ne se sont pas matérialisées – des choses comme des hoverboards et des voitures volantes.

Mais il y a une chose que j'ai toujours ] espérais que je n'aurais pas à utiliser: ces interfaces informatiques compliquées.

Ils semblaient maladroits et trop écrasants pour être utilisés efficacement. Je me souviens avoir regardé certains de ces films, en pensant à moi-même: "Comment sauraient-ils ce qu'est quelque chose? Tous les boutons et les lumières se ressemblent. "Si vous retournez voir vos films de science-fiction préférés, vous verrez de quoi je parle. Un exemple, illustré ci-dessous, montre un groupe de blocs colorés, sans étiquettes ni autre moyen de déterminer l'un par rapport à l'autre. Il ne semble pas non plus y avoir de contrôles sur l'écran, vous permettant de savoir quoi faire avec le contenu.

Un autre bon exemple est l'interface de la baie de pod LCARS ci-dessous, de Star Trek. Il y a un certain nombre de zones, des boutons on / off et des boutons de programmation. Comment sauriez-vous où se trouve l'emplacement physique de chaque zone? Il serait plus logique d'avoir une interface tactile dans la forme de la baie, où vous pouvez sélectionner la zone visuellement. Le plus gros problème que je vois avec ces interfaces est d'essayer de tout faire sur un seul écran

Vous pouvez Prototyper votre Propre avec Mockplus

Si les fabricants des interfaces ci-dessus auraient eu un outil comme Mockplus, ils auraient pu prévoir les problèmes qu'un utilisateur aurait avec ce type d'interface. Jetons un coup d'œil à la façon dont vous pouvez utiliser Mockplus pour créer votre propre interface d'ordinateur de vaisseau spatial.

Disons que je voulais créer une interface d'équipage simple montrant la photo, le nom, le rang et une courte biographie. Les outils sont intuitifs, et j'ai pu créer la mise en page simple pour la première personne en 30 secondes environ. Vous trouverez des outils d'alignement pour sélectionner et aligner les éléments, et vous avez le contrôle sur des choses comme les polices, les tailles, les couleurs, etc. Mockplus a également beaucoup de modèles pour vous aider à démarrer. Si vous utilisez des éléments d'interface communs, vous pouvez en trouver beaucoup dans la bibliothèque de modèles de Mockplus. Si vous ne voulez pas créer la conception de l'interface dans Mockplus, vous pouvez importer vos conceptions et mises en page à partir de Sketch.

Ce qui frappe vraiment chez Mockplus, c'est son remplissage automatique fonctionnalité et la possibilité de transformer des objets en éléments répétitifs. Avec les contours de l'image de la personne, l'intitulé de son nom, son titre et une courte biographie, j'ai pu sélectionner tous ces éléments. Ensuite, j'ai cliqué droit sur eux, et sélectionné Convertir en répéteur. Ensuite, je pourrais cliquer pour le nombre de fois que je voulais que l'objet soit répété verticalement ou horizontalement.

Ce qui est encore meilleur, c'est que je peux dissocier ces éléments et les sélectionner. Ensuite, je clique sur l'icône du pot de peinture en haut, ce qui me permet de remplir chaque champ de noms, de photos similaires et plus encore. Cela rend le contenu factice plus réaliste, mais aussi rapide et facile à répliquer.

UI Flow

L'un des aspects les plus importants de la conception de l'interface utilisateur est le flux de l'interface utilisateur. C'est ainsi que vous passez d'un écran à l'autre et que vous interagissez avec les éléments. Dans notre conception futuriste, nous avons créé la zone de l'équipage, mais il flotte juste là dans l'espace. Mockplus vous permet de décider comment vous y arrivez et à quoi cela conduit. Vous pouvez créer de nouvelles pages, vous permettant de créer les différents écrans que vous parcourrez dans votre interface actuelle

Étape 1

J'ai décidé de créer la page principale qui vous emmène dans la page d'équipage en premier. La page principale sera composée de quelques boutons dans une colonne, avec différents boutons latéraux, codés en couleur dans d'autres zones de la page. Pour ce faire, j'ai saisi l'outil rectangle arrondi et dessiné un seul rectangle. J'ai mis le remplissage à aucun, le coup à 2 et la couleur à un vert fluo

Étape 2

J'ai double-cliqué sur chaque bouton pour y ajouter du texte. J'ai cliqué sur "Convertir en répéteur". J'ai ensuite cliqué deux fois sur la flèche vers le bas pour créer deux copies. Ensuite, j'ai changé le texte pour d'autres termes liés au navire. Vous pouvez changer les couleurs, les polices, les bordures et plus dans la colonne de droite. L'avantage de la fonction répéteur est que lorsque vous créez le nombre d'éléments que vous voulez, ils sont automatiquement regroupés, vous pouvez donc ajuster l'espacement.

Étape 3

Ensuite, je ajoutera quelques jauges, typiques d'une interface futuriste. Ils montreront le niveau de carburant du navire, ainsi que la charge actuelle sur le navire. Il est facile de créer les barres et de les répéter, de la même manière qu'avec les boutons du haut. Je leur ai fait une couleur rosée, pour leur importance. Une étiquette de texte simple en bas montre qui est qui.

D'un point de vue UX, il est logique d'étiqueter les jauges. Pour revenir à ce que nous avons discuté avec les interfaces de certains de nos films de science-fiction préférés, les choses sont rarement étiquetés. Il y a juste des boîtes et des lumières, qui me déconcertent quant à la façon dont tout le monde le sait (sans une formation approfondie – ou peut-être même avec) quoi que ce soit est ou ce qu'il fait. Les barres de carburant et de charge peuvent vous aider à évaluer la quantité de capacité, en fonction de la capacité, en raison de leur relation avec l'espace alloué.

Étape 4

Suivant est une carte de coordonnées cela montre la position actuelle dans le système solaire et l'emplacement de la destination. Le système solaire est représenté par des cercles représentant différentes orbites, le point jaune indiquant l'emplacement du navire et le point rouge représentant la destination. Il y a beaucoup de formes et d'outils linéaires pour créer différents types d'éléments. Chaque objet solide vous permet de contrôler la couleur du remplissage et du trait, ou vous pouvez les rendre complètement transparents.

Commencez par créer des cercles avec un trait jaune et pas de remplissage. Pour le point jaune, dessinez simplement un cercle avec un remplissage jaune et aucun trait. Faites de même pour le cercle rouge.

Étape 5

Sélectionnez l'outil Ligne et, dans les options de la case de droite, choisissez Pointillé. Faites glisser une ligne qui relie le cercle rouge et jaune

Étape 6

Sélectionnez l'outil texte et, en utilisant le jaune comme couleur de remplissage, notez le nombre de kilomètres entre la position actuelle et les coordonnées de destination. Ce diagramme rudimentaire peut facilement représenter un système solaire et différentes orbites planétaires. C'est une bien meilleure option que de simplement afficher la distance de votre destination en kilomètres. Notre interface vous en dira tellement plus que cela. Vous pouvez tracer des planètes, des astéroïdes et des ceintures d'astéroïdes, ainsi que tout autre obstacle. Cela vous permettra de tracer votre route et de planifier à l'avance.

Étape 7

Dans le coin supérieur droit, les deux ensembles de carrés pourraient représenter une interface qui informe le capitaine de tout débris. ou des obstacles plus petits qui peuvent être proches, le centre représentant leur proximité avec le navire. Utilisez l'outil rectangle pour créer les deux boîtes. Utilisez l'outil Ligne pour créer les lignes diagonales. Une grande représentation de tout danger devrait être montrée en rouge. La proximité d'un objet rouge au centre des carrés vous indique à quelle distance se trouvent ces objets dangereux. Les X au milieu vous aident à être plus précis visuellement, sans encombrer l'écran.

Il est important, du point de vue de l'UX, d'avoir une interface qui vous montrerait de plus petits débris. Cela vous aiderait à manœuvrer le vaisseau plus précisément. Essayer de voir ou de planifier de petits débris sur la plus grande carte serait fastidieux et difficile.

Tout mettre ensemble

Maintenant que vous avez vos pages, vous pouvez cliquer sur les éléments qui mènent d'une page à l'autre, et un lien eux autres ensemble.

Etape 8

Vous cliquez simplement sur un élément, et dans le menu de droite, vous choisissez la page à laquelle il conduit. Dans l'exemple ci-dessus, nous cliquons sur le texte de l'équipe, puis dans le menu de droite, sous les cibles, nous choisissons dans la liste des pages. Un moyen plus rapide et plus simple est de cliquer sur le petit cercle d'un élément sélectionné et de le faire glisser vers la page que vous voulez lier dans le panneau de gauche.

Étape 9

Reliez tous les boutons à leurs pages respectives. Une fois que vous avez tout lié, vous pouvez obtenir une vue d'ensemble de la manière dont tout est lié à la fonction UI Flow. Cliquez sur l'icône zig-zag dans le menu supérieur pour passer à la fonction de flux UI. C'est un excellent moyen de voir s'il y a des écrans dans votre interface utilisateur où vous ne pouvez pas rentrer chez vous.

Remplissage automatique des données

Une caractéristique très utile, en particulier lors de la création d'éléments factices répétés, est la fonction de remplissage automatique des données. J'ai été capable de créer la page d'équipe rapidement et efficacement. Faites un clic droit sur un élément que vous voulez dupliquer et convertissez-le en répéteur. Ensuite, décomprimez-le. À partir de là, vous pouvez cliquer sur le pot de peinture et sélectionner l'une des options d'avatar. Pour les noms, sélectionnez le texte et choisissez le nom, et choisissez les deux mâles et femelles.

Dans l'image ci-dessous, vous pouvez voir que l'interface a des flèches un écran à l'autre. Quand j'ai commencé cela, j'ai réalisé que j'avais un moyen de revenir de la page individuelle à la page d'équipage, mais pas un moyen d'aller de la page d'équipage à la page principale. C'est là que cette fonctionnalité est vraiment utile. C'est un excellent moyen de voir une rupture dans le flux de l'utilisateur lorsque vous vous déplacez dans votre interface.

Vous avez également un contrôle total sur l'apparence de l'interface utilisateur. Vous pouvez changer les couleurs des lignes qui montrent le flux entre les éléments. Vous pouvez également contrôler des éléments tels que la couleur d'arrière-plan, les couleurs de l'appareil et les contours de l'écran. Tout est disponible en cliquant sur l'icône d'engrenage en haut à gauche

Conclusion

Si les concepteurs d'interface de l'Empire ou Starfleet avaient un outil comme Mockplus pour les aider à prototyper correctement , ils auraient réalisé à quel point leurs interfaces seraient difficiles à utiliser dans la vie réelle. UI Flow aurait largement amélioré la convivialité. Avec Mockplus, vous pouvez utiliser des éléments communs pour mettre en forme vos interfaces, et vous pouvez utiliser UI Flow pour voir comment ils se connectent tous ensemble. Et vous ne serez jamais coincé fastidieusement créant des éléments répétitifs avec la fonction de répéteur.

Mockplus est un excellent outil pour les concepteurs, à la fois sur Terre et au-delà. La version 3.3 a apporté d'importantes améliorations à ses fonctionnalités d'équipe et d'entreprise pour renforcer votre gestion collaborative de projet et votre travail d'équipe. Cliquez ici pour plus de détails et prenez l'essai gratuit pour un tour et voyez par vous-même.

James George est un développeur web professionnel et designer graphique. James est un expert en design, et un développeur web professionnel, avec un intérêt particulier pour WordPress. Fondateur de Design Crawl James est un designer professionnel depuis 2005.