web-dev-qa-db-fra.com

Paperprototyping une fonction de balayage

Je réalise mes premiers prototypes papier pour une interface tactile. Dans une vue de liste, une seule barre de la liste a trois interactions possibles, balayez vers la gauche, balayez vers la droite ou appuyez sur. Balayer vers la gauche révélera une barre verte, puis passer à une nouvelle page, de même, balayer vers la droite révèlera une barre rouge, tandis que le toucher élargira la barre, poussant les barres inférieures vers le bas. Un peu comme this app. Alors, comment puis-je décrire ces trois interactions dans un seul prototype papier?

4
EasilyBaffled

Vous auriez besoin d'un tri si un indicateur indiquant que la barre est capable de glisser pour commencer, par exemple des points d'indicateur ci-dessous, ou ayant le rouge/vert furtivement à partir de la gauche/droite. Voir cette discussion: meilleure image pour indiquer un balayage de gauche à droite . Avec cet indicateur en place, j'utiliserais personnellement plus de prototypes de papier pour afficher les différents états

Mais pour répondre à votre question: j'utiliserais un couteau ou des ciseaux pour faire des incisions verticales à gauche et à droite de la barre, puis insérer une bande de papier contenant les différents états de la barre, puis faire glisser physiquement la bande à gauche et à droite pour afficher les différents états. Si vous souhaitez également afficher la nouvelle page vers laquelle effectuer la transition, je ne vois pas vraiment de bonne façon de le faire dans un prototype de papier unique

2
magnus.westrom

Vous pouvez utiliser un morceau de papier coulissant pour modéliser le comportement de balayage. Une fois que l'utilisateur a commencé le balayage, mettez le prototype en pause (c'est-à-dire, dites "attendez une seconde") et placez ce que vous voulez "sous" le morceau de papier coulissant.

Assurez-vous que l'arrière-plan derrière le papier glissé a un peu de vert à droite et un peu de rouge à gauche, juste assez pour que l'utilisateur remarque quand il commence le glissement. Vous devrez peut-être rendre votre papier de couverture très épais pour masquer le fond perdu.

Évidemment, si l'utilisateur appuie sur le bout de papier, c'est un robinet, et vous pouvez passer à un autre prototype qui montre la version étendue.

Il sera légèrement plus découvrable que la "vraie chose" car le peu de papier supplémentaire peut être perceptible (selon la complexité du reste de la maquette). Mais cela vous permettra d'explorer à moindre coût l'interaction de balayage et d'obtenir les détails préliminaires dont vous avez besoin sans avoir à coder quoi que ce soit ou à forcer votre utilisateur à passer à une application inconnue.

1
Alex Feinman