web-dev-qa-db-fra.com

Comment rendre une carte évidemment cliquable?

Questions et réponses basées sur la localisation

Je suis en train de développer une application Q&A basée sur la localisation. L'écran principal de l'application présente une carte avec un champ de recherche au-dessus. Lorsque l'utilisateur choisit un emplacement, le bouton "demander" en bas est activé et l'utilisateur peut passer à l'écran suivant pour taper la question.

Moquer

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Capture d'écran réelle

enter image description here

Comment rendre la carte clairement cliquable

Il existe deux façons d'épingler un emplacement dans mon application:

  • Rechercher un emplacement dans la zone de texte et en choisir un dans la liste de saisie semi-automatique. Les utilisateurs l'ont compris instantanément.
  • Cliquez sur un emplacement sur la carte, puis le nom de l'emplacement apparaît dans la zone de recherche ci-dessus.

J'ai testé l'application avec quelques utilisateurs, et la deuxième option n'est pas naturelle pour eux - ils essaient de trouver une adresse textuelle plutôt que de cliquer sur la carte pour trouver un emplacement.

Comment puis-je rendre la carte clairement cliquable? Quel texte, icône ou flux UX ferait comprendre aux utilisateurs qu'ils peuvent simplement épingler un emplacement avec un doigt sans le rechercher textuellement?

Mises à jour

Il y a quelques grandes suggestions concernant le champ de texte que je vais sérieusement considérer. Je serais ravi de savoir s'il existe des idées sur un élément visuel/graphique qui aiderait à donner des indices.

58
Adam Matan

Expliquez-le à l'utilisateur. Vous ne voulez pas les laisser deviner, je vous recommande donc d'ajouter un simple ajout à votre interface utilisateur.

Notez le changement de langue dans le champ de recherche. En disant choisir l'emplacement, vous dites plus ou moins "faites-le ici", ce qui fait que maintenant il est clair que ce n'est qu'une des deux options.

Edited screenshot with another box saying what to do "Or tap the map below to drop pin"

85
tim.baker

Juste pour sortir des sentiers battus, j'ai décidé de coller une suggestion radicale à cela, comme je l'ai appelé un problème de "map-tap" :) Imaginez si une image de geste tactile à faible opacité est apparue sur la carte pendant quelques secondes, puis disparaître ou il resterait là, s'attardant comme un fantôme, faisant allusion à l'utilisateur quoi faire. Lorsqu'un utilisateur touche la carte, elle disparaît.

J'espère que cette idée aidera votre processus créatif.

enter image description here

51
McKnight

Vous pouvez réduire le champ de recherche, par ex. en ne l'affichant pas par défaut. Dites simplement "Choisir un emplacement" dans la tête de l'écran et disposez d'un bouton de loupe qui fait apparaître le champ de recherche pour les personnes qui souhaitent entrer une adresse. Quelque chose comme ça:

enter image description here

Même si vous ne suivez pas cette approche, vous souhaiterez peut-être ajuster la taille et la formulation de votre texte. "Rechercher" doit être "choisir un emplacement" et doit être plus grand que "ou taper ici" dans le champ de recherche.

Une question que vous devez vous poser cependant: voulez-vous vraiment que les gens utilisent la carte à la place? Personnellement, j'utilise souvent des adresses car il est plus rapide de bien faire les choses que de poignarder mes doigts joufflus sur une carte complexe. Une carte est plus pratique si l'emplacement requis n'est pas très précis, ou si vous avez des icônes pour des emplacements existants sur la carte, et la carte est déjà zoomée dans la bonne zone (c'est-à-dire s'il s'agit d'un écran pour sélectionner des éléments autour de l'emplacement actuel de l'utilisateur.

21
uliwitness

Avez-vous envisagé de déplacer la carte plutôt que de déplacer le "pin"?

Faire défiler une carte est une action courante dans la plupart des applications de carte, si vous gardez le réticule statique et déplacez la carte en dessous, l'utilisateur peut cibler sa position souhaitée. Le texte de la boîte doit se mettre à jour au fur et à mesure que l'utilisateur défile. Cela pourrait vous permettre de vous en sortir sans messagerie d'aide supplémentaire.

Cela présente certains avantages par rapport au tapotement pour placer une épingle:

  • Vous comptez sur l'interaction de carte la plus typique, le défilement. Vous n'avez pas du tout à communiquer l'action "tap".
  • Ciblage plus précis, car le doigt de l'utilisateur n'obscurcit pas la cible et il peut utiliser toute la zone de la carte pour s'ajuster.
  • Avoir une cible par défaut de l'emplacement actuel de l'utilisateur signifie que les utilisateurs n'auront peut-être jamais à interagir avec la carte, car leur emplacement est déjà sélectionné.
  • Il n'y a pas de tapotements ou de parchemins accidentels, car il n'y a qu'une seule action: faire défiler jusqu'à la cible.

Quelque chose dans le sens de:

Map with reticule, reticule remains static, map moves underneath.

19
Darq

Étant donné que les utilisateurs verront probablement le formulaire de saisie en premier, que diriez-vous d'utiliser le texte d'espace réservé pour cela?

"Entrez l'emplacement ou choisissez simplement sur la carte ..."

12
Steffen Kastner

Voici ma solution - réticule. La carte peut être déplacée mais l'emplacement sélectionné est évident.

La capture d'écran a quelques années, d'où Android 2.x maps et widgets.

actual screenshot

4
tomash