web-dev-qa-db-fra.com

Comment concevoir un formulaire en plusieurs étapes pour mobile

J'ai donc un problème pour concevoir un formulaire multi-étapes clair et utilisable pour mobile (iPhone pour l'instant). Voici les étapes:

Étape 1: Rechercher un restaurant - Ce champ aura des champs comme le nom, la ville, la catégorie ... etc.
Étape 2: Sélectionner un restaurant - Les restaurants qui correspondent aux paramètres de recherche des champs à l'étape 1 seront répertoriés ici, et l'utilisateur en sélectionnera un.
Étape 3: Sélectionnez la date/heure et les options - À cette étape, l'utilisateur aura quelques champs à remplir.
Étape 4: Confirmation.

Je ne m'inquiète pas de concevoir les pages elles-mêmes, mais plutôt de faire sentir à l'utilisateur qu'il/elle est à une certaine étape qui est spécifiée pour certains champs. Quelle est la meilleure façon de concevoir des boutons de navigation pour aller et venir? Et je souhaite que le nom du formulaire qui est "Book Restaurant" apparaisse tout au long des étapes.

3
wael34218

Ma suggestion est de trouver une métaphore appropriée à utiliser, en fonction de l'objectif de l'application (il semble que ce soit une application de réservation de restaurant ... n'est-ce pas?).

Peut-être qu'une bonne métaphore dans ce cas (réservation) pourrait être comme un agenda/carnet/carnet de rendez-vous. Par exemple, vous pourriez avoir des boutons dans une barre gauche ou droite indiquant "pages". Une page pourrait être la recherche de restaurant, qui traiterait les champs de requête et la présentation des données du restaurant. Les restaurants sélectionnés pourraient ensuite être enregistrés sur une autre page (restaurants préférés, par exemple), afin que l'utilisateur n'ait pas à effectuer une nouvelle recherche à l'avenir. D'autres pages pourraient présenter la disponibilité par restaurant, indiquant la date et l'heure et les autres options sur lesquelles vous n'avez pas donné de détails.

De cette façon, l'utilisateur saurait toujours où elle se trouve sur la page active indiquée par le bouton sélectionné sur la barre gauche/droite (comme les marques de page ou quelque chose de similaire), et elle pourrait facilement changer de page en sélectionnant ces boutons se déplaçant librement comme lors de l'utilisation d'un agenda.

2
Luiz Vieira