Cette interface de cube rotatif est-elle conviviale?
Je travaille sur un prototype pour une interface de formulaire innovante, où différentes parties du formulaire sont affichées sur différents côtés d'un cube. Le cube tourne et l'utilisateur peut le remplir pendant que le cube tourne. Voici un exemple de travail :
Pour moi, cela semble être une solution assez robuste à notre problème (c.-à-d., Avant, nos formulaires occupaient trop d'espace sur la page et étaient extrêmement ennuyeux), et cela me semble assez utilisable, mais cette approche peut avoir certains utilisateurs - éprouver des problèmes que je ne connais pas.
Cela ressemble-t-il à un modèle convivial? Sinon, que puis-je faire pour l'améliorer?
J'ai rempli le formulaire avec des données principalement factices (voir ci-dessous) car je sais que vous avez dit que ce n'était qu'un exemple de travail. Ma seule vraie préoccupation avec toute cette conception est que les champs d'entrée n'acceptent pas d'entrée à moins que cette face du cube ne soit réellement visible. Je pense que ce serait ennuyeux pour la plupart des utilisateurs de taper dans un champ de saisie qu'ils ne peuvent pas voir, puis de découvrir que lorsque ce visage revient, ce champ a perdu tout ce que vous avez tapé.
Luke Wroblewski a quelques bonnes informations sur son site en ce qui concerne les formulaires d'inscription et cela vaut la peine d'y jeter un coup d'œil afin d'affiner la mise en page. J'ai remarqué que les détails de l'adresse de la rue étaient tous sur une seule ligne, et je suggère de diviser au moins la rue et le code postal ou le code postal, avec un autre champ facultatif pour les adresses plus complexes. Vérifiez ceci article sur UXMatters pour traiter les adresses internationales dans les formulaires.
Je me demande si vous avez vraiment besoin d'obtenir le numéro de sécurité sociale lors de votre première inscription. Si c'est vraiment nécessaire, je suggère de donner une aide en ligne pour expliquer pourquoi c'est nécessaire car certains utilisateurs peuvent être un peu drôles à propos de ce genre de détails. Si possible, envisagez d'obtenir des informations via engagement progressif .
Je choisirais probablement un vert moins vif, car c'est un peu choquant, et changerais le texte rouge en une couleur différente. Vous pouvez utiliser Colorblind Web Page Filter afin de voir à quoi il ressemble pour les utilisateurs daltoniens. N'ayez pas peur d'utiliser plus de couleurs - mais pas trop! Smashing Magazine a un article en 3 parties sur la théorie des couleurs .
Je pense que tout le concept a beaucoup à faire et une fois que les principaux problèmes UX auront été résolus, cela aura l'air plutôt lisse. Je pense que les utilisateurs vont adorer sa nouveauté. Les formulaires d'inscription sont tellement ennuyeux de nos jours. Cet article sur A List Apart explique pourquoi les formulaires d'inscription doivent mourir (encore une fois par Luke Wroblewski) est sur place. Je pense que cet exemple pourrait bien frapper le dernier clou dans le cercueil des inscriptions, alors bonne chance!
Réponse sérieuse: c'est terrible
Pour l'améliorer, vous pourriez en faire un cube non tournant.
Le principal problème est que je ne peux pas le contrôler. Une bonne interface utilisateur fait penser à l'utilisateur "hé, je suis génial! Regardez ce que je peux faire!"
Cela me fait penser, "putain de merde, je suis nul. Je ne peux même pas remplir un formulaire." Je dois garder un modèle mental 3D, remplir les choses à l'envers et gérer le texte affiché sous un certain angle. C'est comme essayer de jouer de la guitare avec des menottes.
Si l'espace sur la page est un problème, utilisez un formulaire en accordéon. L'utilisateur peut alors voir l'intégralité du formulaire, évaluer facilement sa progression et n'afficher que ce dont il a besoin pour le moment.
Réponse idiote: c'est génial!
Je suis heureux de vous voir libérer des formulaires de leurs chaînes 2D. Pouvez-vous résumer cela dans une bibliothèque qui construit des formes 3D à N côtés, où N est le nombre de sections de formulaire dont j'ai besoin? Si les calculs sont trop difficiles, nous pouvons peut-être réorganiser nos formulaires pour les adapter formes faciles à rendre - divisez-les en 12 sections au lieu de 11, etc.
Aussi, ayons plus de lumières clignotantes.
NON. De toute façon, même si vous en faites un triangle ou une forme géométrique, la réponse sera toujours NON.
J'ai visité votre exemple de travail (deviner est une version bêta ou quelque chose). J'ai essayé de remplir les champs du formulaire sans succès. J'ai essayé de lire ce qui est écrit, encore une fois sans succès. Ensuite, j'ai fermé l'onglet.
J'ai relu votre question, j'ai revisité le cube et je suis sorti après 1 sec, disant "tu dois me plaisanter".
Bien concluant ma réponse et à mes yeux ce n'est pas un bon UX. C'est loin d'être bon. Le Web devient de plus en plus facile, pourquoi voulez-vous des choses difficiles?!
Ma réponse à votre question est NON. Pour sûr.
D'accord, je me sens un peu comme le démonter, mais il y a sont certaines choses qui me dérangent vraiment à ce sujet.
- Je ne sais pas quelle police vous utilisez, mais le crénage me semble vraiment bizarre
- 32px est une largeur assez standard pour les contrôles de saisie de données (je pense que vous utilisez 50 ou quelque chose)
- En règle générale, les listes déroulantes des États sont triées par code postal, en commençant dans le nord-est
- Le bouton d'envoi doit être aligné à droite OMI
- Vous devriez probablement remplacer l'émoticône par une image réelle d'une émoticône (celles basées sur du texte sont réservées aux échanges de données textuelles (courriels))
Mais mec, à part ça, ça a l'air vraiment, vraiment bien.
Je ne sais pas comment vous construisez votre cube, mais il semble que le cube soit déformé pendant la rotation.
un cube en rotation automatique est juste idiot et ennuyeux pour n'importe quel utilisateur - avoir la possibilité de faire pivoter le cube (avec un coup par exemple) pourrait le rendre assez amusant
Le texte ne doit jamais être présenté à l'envers. Déjà.
Vous n'avez pas utilisé la troisième dimension d'une manière significative autre que la beauté. Vous pourriez par exemple avoir effectué une rotation vers la gauche ou la droite en étant l'action de présenter la page suivante/précédente du formulaire. Rotation vers le haut pour obtenir de l'aide sur la page actuelle du formulaire, rotation vers le bas pour les mentions légales, mais celles-ci ne sont pas visibles en utilisation normale, ce que vous souhaitez.
Je l'adore et je pense que cela pourrait être vraiment utile. mais je voudrais voir une version avec tous les coins à l'intérieur.
L'utilisation de CSS pour séparer le contenu et la présentation est très bien faite. Les utilisateurs qui préfèrent l'expérience graphique améliorée pourront en profiter, tandis que les utilisateurs de navigateurs textuels et ceux qui désactivent les feuilles de style CSS verront une version linéaire non embellie.La validation d'entrée semble être assez efficace pour filtrer les mots de passe faibles et les faux SSN , même si je n'ai pas pu le tester complètement car je ne voulais pas divulguer un vrai SSN. Ma seule plainte est que la commande est incorrecte lorsqu'elle est vue sans CSS, bien que cela puisse facilement être corrigé en réorganisant les div HTML.
Il semble honnêtement que vous êtes au stade où vous devez poser plus de questions.
Vos statistiques suggèrent-elles qu'un grand nombre de personnes commencent l'ancienne version de votre formulaire mais ne la complètent pas? Cela pourrait indiquer l'ennui ou l'incitation insuffisante à accomplir une tâche ennuyeuse. Bien que la nouveauté (comme une interface de cube) puisse aider, vous pourriez avoir plus de succès en réduisant la longueur du formulaire. Si c'est une forme cruciale que les gens sont obligés de remplir, alors vous devriez faire une erreur du côté ennuyeux mais impossible à confondre (c'est-à-dire pas un cube).
Les gens ont-ils tendance à avoir le plus de chances d'arrêter de fumer sur un petit nombre de questions spécifiques? (par exemple Salut. Nous aimerions que vous participiez à une enquête anonyme! Q1: Quel est votre numéro de sécurité sociale?) Cela pourrait indiquer autre chose, comme l'un des éléments d'information que votre formulaire demande est quelque chose que les utilisateurs sont mal à l'aise de partager. Si tel est le cas, un cube tournant n'est certainement pas la réponse.
Posez des questions comme ci-dessus, puis demandez-vous comment l'interface du cube les aborde. Si tout ce qu'il fait est "être nouveau", vous pouvez avoir un problème. Le roman d'une personne est déroutant pour une autre.
Personnellement, j'ai du mal à trouver comment une interface de cube ajoute vraiment quelque chose de significatif au processus de remplissage d'un formulaire autre que l'ajout de eye-candy. Remplir un formulaire est un processus linéaire. Comment l'association de différents champs du formulaire aux côtés d'un objet 3D aide-t-elle l'utilisateur à remplir le formulaire? Le fait d'avoir des champs adjacents sur des faces de cube différentes pourrait-il vraiment gêner?
Encore une fois, si tout ce que l'interface de cube fait est "moins ennuyeux", je pense que vous devriez vraiment chercher des alternatives. Pimentez la langue du formulaire. Au lieu de "adresse", mettez "Lieu où vous souhaitez que nous envoyions du spam imprimé sur de véritables arbres morts!" (Cela peut être rebutant si vous êtes en fait un spammeur!). Essayez d'ajouter des trucs amusants. par exemple. Juste après le nom, ajoutez un champ pour "indicatif de l'agent secret" (peut-être utile pour la récupération du mot de passe). Jouez avec la typographie et l'interface. Rendez la forme agréable à regarder. (Je sais que l'image du cube que Roger a postée ci-dessus n'est qu'une maquette rapide et sale, mais si vous pensez qu'elle ressemble de loin à la forme finale, vous avez probablement besoin d'aide pour cela.)
Bonne chance!
Je pense que cela fonctionne merveilleusement bien du point de vue de l'expérience utilisateur, et j'irais même jusqu'à suggérer que dans un avenir pas trop lointain tous les formulaires Web utiliseront ce modèle.
Ma seule suggestion pour améliorer est peut-être d'accélérer l'animation - il pourrait être un peu plus difficile de sélectionner les champs du formulaire, mais je pense que les utilisateurs supplémentaires trouveraient excitant et plus engageant.
Votre conception est clairement un échec. Avec suffisamment de patience, il est réellement possible de remplir (au moins une partie de) le formulaire. Puisque vous essayez clairement d'empêcher cela, vous avez échoué.
Quand j'ai vu votre exemple, j'étais sûr qu'il ne s'agissait que d'une démonstration technique et qu'il ne tournerait pas pendant que vous interagissez avec le formulaire. Mais après avoir lu les réponses et vos commentaires, je suppose que j'avais tort.
Une forme rotative vous ferait probablement perdre tous vos visiteurs.
Au lieu de cela, je propose d'utiliser la rotation pour basculer entre les différentes pages du formulaire. Je pense à quelque chose comme le menu principal du jeu PC "The Chronicles of Riddick: Escape from Butcher Bay" . Cela pourrait faire un grand effet, si vous pouviez le rendre rapide et rapide.
La convivialité ne doit pas être utilisée dans la même phrase qu'un lien vers ce formulaire Désolé, c'est vrai.
Vous ne pouvez même pas voir le formulaire 75% du temps, comment pouvez-vous avoir un formulaire utilisable que vous ne pouvez même pas voir.
Perte de temps, mais impressionnant CSS 3D ...
Façons de corriger: Arrêtez la rotation du cube, choisissez des couleurs qui ne sont pas aveuglantes, texte de texte pour de vrai? Montrez le formulaire ... toujours!
Tu as dit:
"Sinon, que puis-je faire pour l'améliorer?"
Voici quelques suggestions:
Faites des couleurs quelque chose qui ne me fasse pas mal aux yeux.
Arrêtez le cube de tourner tout le temps.
Assurez-vous que toutes les données peuvent être vues en même temps.
Autrement dit, faites-le comme un bon formulaire de saisie.
Approche très innovante.
Mais je pense que le changement de paradigme n'est pas convivial. Ce que vous essayez de faire, c'est de changer la façon dont un utilisateur le fera dans la vie réelle. Cela remettra non seulement en question la perception de l'utilisateur, mais augmentera également sa courbe d'apprentissage.
Imaginez cela dans la vraie vie. Je tiens un gros cube et je le retourne pour écrire des trucs dessus. Et puis je ne sais pas comment l'autre personne va finalement le lire. Tâche difficile Eh!
Pensez à quelque chose de plus réaliste.
Donnez une commande complète aux utilisateurs, comme lorsque vous déplacez la souris, le cube doit être déplacé avec la souris, afin que l'utilisateur puisse rapidement sélectionner des sections (soumettre, formulaire, autre). actuellement, je dois attendre que le cube se tourne vers la bonne position.
Je pense que le concept serait vraiment cool si au lieu de faire tourner le cube sans s'arrêter, vous utilisez l'effet de rotation du cube comme transition d'une page à l'autre. Le cube doit tourner vers le premier côté puis s'arrêter, et donner à l'utilisateur le temps de lire le premier côté. Lorsque l'utilisateur a terminé avec cela, il peut cliquer sur le bouton suivant et faire pivoter le cube vers le côté suivant, et ainsi de suite.
Cela ajouterait une transition intéressante qui, je pense, divertirait de nombreux utilisateurs :)
D'accord, j'avoue que j'étais sceptique, mais j'ai essayé la version de travail et je me suis tellement amusée !!
C'est une excellente idée absolue pour un formulaire d'inscription à un jeu ou quelque chose pour les enfants, je pense que s'inscrire avec c'est un défi et l'inscription elle-même est le prix que vous obtenez, ce serait parfait pour une communauté à accès limité. Moins de champs de saisie, moins de rotation, un look plus agréable et peut-être que l'utilisateur peut le faire glisser pourrait le rendre vraiment cool.
Mais bien répondre à votre question, dans votre cas pour ce projet ça ne semble pas marcher.
En tant que personne qui a vécu dans ce monde de formes ennuyeuses pendant trop longtemps, je n'ai jamais pensé vivre le jour où quelqu'un viendrait et briserait complètement les barrières, provoquerait un changement de paradigme et réécrirait le livre sur des formes accessibles et innovantes. .. jusqu'à maintenant.
Certaines de mes choses préférées du point de vue de la convivialité que vous avez ajoutées, je pense que Google et Facebook devraient emprunter pour aider à augmenter leurs taux de conversion.
L'incapacité de concentrer un côté du cube - C'est génial. J'adore la façon dont j'essaie de remplir les champs, mais je dois attendre que la face du cube recule pour pouvoir rapidement remplir un autre champ. Il m'a fallu environ 6 minutes pour remplir votre formulaire qui, je pense, est bien meilleur que les autres formulaires que j'ai utilisés et qui m'ont pris 30 secondes (blagues sur eux). Je pense que garder les gens sur la page d'inscription plus longtemps contribuera certainement à réduire votre taux de rebond.
Les petites étiquettes illisibles - Pourquoi personne d'autre n'y a pensé? Tout le monde est soucieux de rendre ses formulaires agréables et grands, des étiquettes contextuelles utiles et d'autres choses pour faciliter le processus de remplissage d'un formulaire (ou du moins disent-ils). J'ai dû zoomer plusieurs fois pour lire les étiquettes, mais la vitesse du cube signifie que mes yeux ne peuvent pas se concentrer correctement: bon travail.
La vitesse du cube - Quand j'ai vu le titre pour la première fois, j'ai immédiatement pensé, je parie qu'ils ont fait tourner le cube très lentement et je pourrai voir clairement les étiquettes et les entrées du formulaire, à quel point J'ai été. La vitesse du cube est rapide, mais ce n'est pas trop rapide. C'est juste assez rapide pour qu'il soit difficile pour vos yeux de se concentrer et que les choses soient floues, mais pas trop vite. Je pense que la vitesse du cube rend votre site plus rapide.
Mais, hélas, il y a des problèmes avec votre formulaire:
Cette police n'est pas très attrayante - Je suggère d'essayer une police plus agréable, Comic Sans MS Bold serait probablement mon premier choix. Il est lisible et rendrait le cube en rotation encore plus amusant.
Le vert n'est pas assez lumineux - Désolé de le dire, mais ce vert n'est tout simplement pas assez lumineux. Vous pouvez prendre plusieurs nuances plus claires pour paraître plus moderne.
Le bouton d'envoi n'est pas centré - Je pense que le côté bouton d'envoi du cube doit être centré. Pour le moment, le bouton d'envoi est aligné à gauche et le texte à l'intérieur du bouton n'est pas non plus centré. C'est mauvais pour l'accessibilité et faire ces deux petits ajustements le rendra certainement meilleur. Pensez à faire fonctionner le bouton avec le design un peu plus en le rendant noir ou blanc. Le gris a tendance à être très daté.
Manque de chaleur ou de caractère - Je pense que le manque de GIF animés a vraiment un impact sur la forme, mais pas seulement, j'ai regardé dans la source et je n'ai pas vu une seule instance de <Marquee> tag. Esthétiquement, c'est un peu TROP statique à mon goût, un peu de mouvement pourrait le rendre plus amusant (en combinaison avec le changement de police, bien sûr).
Manque de validation - Pour autant que je sache, votre formulaire manque de validation et/ou de messages de validation. Un formulaire sans validation est un cauchemar d'utilisation, si possible, vous devriez envisager d'utiliser le <Marquee> tag pour les messages de validation afin de les faire apparaître plus conviviaux et moins passifs-agressifs comme les autres formes que j'ai rencontrées au fil des ans.
L'étiquette du numéro de sécurité sociale est trop longue - L'étiquette est plus large que les autres, vous pouvez essayer d'aligner correctement les étiquettes ou peut-être de mettre un saut de ligne sur ce texte pour rendre les lignes un peu plus courtes et plus lisibles .
Dans Google Chrome (dernière) sur Mac OS, la liste déroulante de sélection est cassée - Le texte de l'étiquette apparaît au-dessus de l'étiquette.
Encore une fois dans Google Chrome (dernière) sur Mac OS, le titre de la page d'informations légales est cassé - Le I est en train d'être coupé, donc je ne peux vraiment voir "Informations légales importantes !!!"
Trop de points d'exclamation - Pourquoi criez-vous sur la page des mentions légales? Un, maximum, deux points d'exclamation. Tu connais les règles? Ne gâchez pas un super design avec trop de points d'exclamation.
Globalement, super design, mais un troll encore meilleur. C'est probablement l'une des meilleures questions sur les trolls que j'ai jamais lues, rivalisant même avec certaines des questions que j'ai rencontrées sur Yahoo! Réponses, si bon pour vous.
Cela fonctionne bien si vous n'avez pas plus de 6 pages.
Reconnaissez que certaines parties de la page ne seront pas visibles lorsqu'elles ne sont pas tournées vers l'avant. Cela pourrait être un problème d'utilisation.
Les interfaces utilisateur ont été créées là où il y a une barre d'outils qui tourne. Encore une fois, il y avait la limite de 4 visages et les gens ne pouvaient pas distinguer ce qui était sur le côté, déroutant et frustrant les utilisateurs.
Une bonne orientation sera un défi.
Mais parfois, les gens aiment être frustrés. Regardez Angry Birds. Les gens continuent de disparaître et le défi devient de plus en plus difficile. Mais c'est amusant! Tout dépend de ce que vous essayez de réaliser.
La plus belle chose depuis le pain tranché
Voici une bonne bibliothèque pour ajouter de l'élan: https://chrisbateman.github.io/impetus/
Si vous voulez aller plus loin que de simples cubes: https://stackoverflow.com/questions/33629754/text-within-a-non-rectangular-shape-pentagon-or-hexagon
Mon ancien site Web.
Ensuite, j'ai dû chercher un emploi et j'ai décidé d'être plus "normal"
Pourquoi ne l'essayez-vous pas avec certaines personnes? Je pense que certains tests utilisateurs sont de mise.
Vous avez passé tout ce temps à créer un prototype, alors pourquoi ne pas laisser vos utilisateurs l'essayer. Vous n'avez pas dit exactement pour quoi vous construisez cela, alors comment savoir si c'est bon ou pas? Personnellement, j'ai trouvé votre prototype amusant - il pourrait faire un jeu vraiment amusant. Si tel est le cas, les tests utilisateurs peuvent vous donner des résultats positifs.
Mais je doute que vous fassiez un jeu. Il y a de fortes chances que vos sujets de test trouvent cela incroyablement ennuyeux. Mais qui sait! C'est la beauté des tests utilisateurs - il y a presque toujours quelque chose pour vous surprendre.
Je pensais que ce serait mieux si vous réorganisiez le texte verticalement, comme ceci:
- k
- je
- l
- l
- m
- e
- :)
Pour être honnête, si c'est sur un écran d'ordinateur standard, je pense que cette approche est un échec. Vous avez déjà reçu beaucoup de commentaires que je ne vais pas répéter car tous les critiques sont assez valides et approfondis.
MAIS
Si vous pensez que cela fait partie d'un environnement VR/AR et que le cube peut être manipulé à la main, je pense que c'est une nouvelle approche pour former une entrée pour ce type d'espace. Vous pouvez même insérer le cube dans un emplacement pour le soumettre.