Conception d’un pointeur de souris pour un métaverse numérique

Conception d’un pointeur de souris pour un métaverse numérique


Le pointeur de la souris est depuis longtemps un élément fondamental de l’interface moderne. Les pointeurs système Windows et Mac ont à peine changé au cours des dernières décennies. D’autre part, les jeux vidéo ont pour habitude de réinventer le pointeur. Une forte proportion de jeux vidéo de bureau modernes utilisent des pointeurs personnalisés qui sont marqués pour leurs expériences. Mais que faudrait-il pour concevoir un pointeur de jeu vidéo qui fonctionne également dans une interface de type OS comme Roblox ? Roblox est une plateforme où les utilisateurs peuvent créer et explorer des expériences virtuelles immersives. Puisqu’elle sert de métaverse transparent entre les jeux et les expériences, l’application Roblox a présenté un défi UX unique sur lequel j’étais ravi de travailler.

J’ai vu les termes « curseur » et « pointeur » utilisés de manière interchangeable. Je vais principalement opter pour le « pointeur » pour le distinguer des curseurs de texte, qui sont utilisés dans les champs de saisie et les interfaces de commande.

Le problème

Le nouveau client de bureau Roblox était en cours, mais il manquait à l’application un élément UX crucial – les changements d’état de la souris. Contrairement à la façon dont la navigation et le jeu sont des expériences distinctes pour la plupart des jeux de bureau, le nouveau client de bureau Roblox permet aux utilisateurs de naviguer et de jouer de manière transparente dans une seule fenêtre. Cependant, l’expérience du pointeur de la souris nécessitait du travail. L’état « Link Select » ou « Hover » avait une faible capacité visuelle. Et l’état « Sélection de texte », qui apparaît lorsqu’un utilisateur survole un champ de saisie de texte, manquait complètement. Ce fut l’occasion de repenser et d’améliorer le trifecta du pointeur de la souris : par défaut, lien (survol) et texte.

Concevoir un pointeur pour un système d’exploitation et un jeu vidéo est un défi en raison de leurs différents cas d’utilisation. Un curseur de système d’exploitation doit être de couleur neutre, suffisamment contrasté pour la visibilité, suffisamment pratique pour un usage quotidien et pas trop sinistre pour provoquer une fatigue oculaire. Un curseur de jeu vidéo peut ignorer bon nombre de ces règles car il correspond généralement au look and feel de la marque pour offrir une expérience immersive. Mais existe-t-il un moyen efficace de combiner ces deux attributs ?

Pointeurs de souris Roblox 2012. Il n’y avait pas de pointeur de texte, donc le pointeur de survol a été utilisé à la place.

Jetez un œil au pointeur 2012 de Roblox. Il est allé dans la bonne direction en utilisant des couleurs neutres en niveaux de gris. Cependant, l’état de survol utilisait un pointeur noir, ce qui confondait les nouveaux utilisateurs sur un ordinateur Mac. Une autre erreur est que les épaules des flèches ont été dessinées en utilisant l’axe vertical au lieu de l’axe de la face de la flèche. Cela signifie que la flèche est asymétrique d’environ 6,8 %.

Conception d’un pointeur de souris pour un métaverse numérique

Le pointeur par défaut n’était pas symétrique le long de l’axe de la face de la flèche.

Regarde et ressent

Voici la partie amusante. Quelles sont les tendances actuelles des pointeurs de jeux vidéo pour ordinateur ? J’ai compilé certains des pointeurs de jeu les plus populaires et les ai classés par graphisme et fonctionnalité. La plupart des pointeurs de jeu optent pour le graphisme de marque. Le pointeur Roblox devrait être légèrement plus graphique que le pointeur de système d’exploitation commun tout en maximisant l’aspect pratique.

Conception d’un pointeur de souris pour un métaverse numérique

Pointeurs de souris des meilleurs jeux de bureau actuels. Voyez combien vous pouvez reconnaître !

Non seulement le pointeur Roblox doit être adapté à tous les genres d’expérience, mais il doit également compléter notre système de conception, uiBlox. Le système de conception uiBlox utilise actuellement des icônes #FFFFFF sur un thème sombre par défaut. Notre style utilise des courbes de rayon de 2 pixels et un rapport approximatif de coins ronds à carrés de 3: 1 dans chaque icône. Pour le curseur de la main pointée, j’ai été inspiré par notre nouvelle illustration d’emote illustrée par l’un de nos super designers, Amy Liu.

Conception d’un pointeur de souris pour un métaverse numérique

À gauche : le style d’iconographie de Roblox utilise principalement des coins arrondis avec peu de netteté. À droite : la conception des emotes de Roblox par Amy Liu.

Mettre tous ensemble

Après avoir reçu les commentaires d’autres concepteurs, nous avons développé le dernier ensemble de pointeurs pour Roblox. Le nouveau pointeur par défaut est maintenant symétrique et ajoute une queue de flèche pour la visibilité. Une ombre portée apporte modernité et profondeur dans un environnement 3D. Le nouveau pointeur de survol améliore l’accessibilité en rendant la forme distincte du pointeur par défaut. Enfin, le pointeur de texte est remodelé en un curseur #FFFFFF 1px pour lui donner du contraste sur notre thème sombre. Le trait sombre crée une visibilité sur notre thème clair et d’autres expériences Roblox avec des arrière-plans clairs.

Conception d’un pointeur de souris pour un métaverse numérique

Les nouveaux pointeurs de souris 2021 de Roblox.

Une refonte est seulement aussi efficace que ses commentaires des utilisateurs. Nous avons interrogé 215 développeurs Roblox sur ce qu’ils avaient à dire sur ces nouveaux curseurs. Une majorité significative a convenu que les curseurs constituaient une amélioration à la fois esthétique et conviviale. La statistique la plus excitante est la réponse de nos développeurs au pointeur de texte. Parmi les 89 % qui ont convenu qu’il s’agissait d’une amélioration globale, 74 % d’entre eux étaient tout à fait d’accord avec cette affirmation. Savoir que nos utilisateurs réagissent positivement à ces améliorations UX nous aidera lorsque nous développerons le reste de notre ensemble de pointeurs, ainsi que d’autres éléments d’interface utilisateur en cours d’expérience.

Conception d’un pointeur de souris pour un métaverse numérique

Une majorité significative de développeurs Roblox sont d’accord ou fortement d’accord pour dire que les nouveaux pointeurs sont une amélioration de la convivialité et de l’esthétique.

Alors que Roblox s’étend au-delà du jeu pour devenir une plate-forme de communication, sociale et même transactionnelle, cet aspect du produit aidera à guider l’utilisateur lorsqu’il navigue entre l’application et ses expériences. Notre espoir est que cela servira de norme en vigueur pour les métaverses numériques à partir de maintenant !

Vous souhaitez rejoindre l’équipe Roblox Design et résoudre des problèmes comme celui-ci ? Consultez-nous sur corp.roblox.com/careers/ pour les dernières opportunités.


Derek Wong est concepteur visuel chez Roblox. Il travaille sur le système de conception de Roblox, qui façonne l’interface utilisateur du site Web et de l’application de bureau Roblox. Ni Roblox Corporation ni ce blog n’approuvent ou ne soutiennent une entreprise ou un service. De plus, aucune garantie ou promesse n’est faite concernant l’exactitude, la fiabilité ou l’exhaustivité des informations contenues dans ce blog.

©2021 Roblox Corporation. Roblox, le logo Roblox et Powering Imagination font partie de nos marques déposées et non déposées aux États-Unis et dans d’autres pays.



Source

Laisser un commentaire