58

Location based Q&A

I am developing a location-based Q&A app. The main screen of the app features a map with a search box above it. When the user chooses a location, the "ask" button at the bottom is enabled and the user can move to the next screen for typing the question.

Mock

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Actual screenshot

enter image description here

How to make the map obviously clickable

There are two ways to pin a location in my app:

  • Searching a location in the text box and choosing one from the autocomplete list. Users figured this out instantly.
  • Clicking on a location on the map, and then the location name appears in the search box above.

I have tested the app with a few users, and the second option is not natural for them – they try to figure out a textual address rather than clicking on the map to figure out a location.

How do I make the map obviously clickable? Which text, icon or UX flow would make the users understand that they can just pin a location with a finger without searching for it textually?

Updates

There are a few great suggestions regarding the text field that I am going to seriously consider. I'd love to know if there are some ideas about any visual/graphic element that would help with hinting.

Improve this question
4
  • 7
    Is some text saying "The map is clickable!" out of the question? At first is was a joke, but then I was like... yeah, language can be pretty effective at conveying information from time to time!
    – corsiKa
    Dec 1, 2014 at 16:35
  • I hate entering text on a smartphone; why the "Choose a location" option? I'd remove that option and just leave the option of clicking on the map. And then just replace the input with a label "Select location on map".
    – frenchie
    Dec 1, 2014 at 17:00
  • @frenchie I don't understand why people hate on physical-keyboard-containing smartphones. I refuse to have it any other way - it makes entering text like that so much nicer. And I do appreciate being able to enter text in situations like that - sometimes you want to look up info for an address that's nowhere near your current location, and it'd be a pain to drill down from a map of the whole US, when you could just type in the address you already know.
    – neminem
    Dec 5, 2014 at 0:08
  • @neminem: ok, I see your point, there is a need for text entry. But that's really an edge case. When the app opens, it should be centered on the location of the user, like shown on the pic. The label should say "Click on a location" and next to it, about 50 pixels, should be a magnifying glass icon that toggles the functionality to enter text and hides the label. That would handle both options.
    – frenchie
    Dec 5, 2014 at 2:16

6 Answers 6

Reset to default
85

Spell it out to the user. You don't want to leave them guessing so I would recommend you add a simple addition to your UI.

Note the change of language in the search box. By saying choose location you are more or less saying "do it here", whereby now it is clear it is just one of two options.

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

Improve this answer
9
  • 1
    I think that is more of a general design question, as opposed to UX question. i.e. no I don't think that would make a dramatic change to the UX.
    – tim.baker
    Dec 1, 2014 at 8:59
  • 29
    "Bellow" is a loud shout. It would be unfortunate if a misspelling had people frustratedly yeliing at their phones to drop a pin.
    – Digital Chris
    Dec 1, 2014 at 13:44
  • 3
    Ah so it is. My accurate typing on a Monday morning there :)
    – tim.baker
    Dec 1, 2014 at 15:26
  • 15
    @DigitalChris *yelling (Sorry; I'm a spelling correction junkie. I couldn't resist the urge to correct the spelling in your spelling correction.)
    – brokethebuildagain
    Dec 1, 2014 at 22:07
  • 4
    @CullenJ Muphry's Law gets me again!
    – Digital Chris
    Dec 2, 2014 at 13:31
52

Just to think outside the box I've decided to paste a radical suggestion to this, as I have called it "map-tap" problem :) Imagine if a low opacity touch gesture image appeared over the map either for a few seconds and then disappear or it would stay there, lingering like a ghost, hinting to the user what to do. When a user taps the map it would disappear.

Hope this idea helps your creative process.

enter image description here

Improve this answer
10
  • 6
    This is indeed the equivalent of the low opacity "Choose a location ..." prefilled text of the text field
    – Hagen von Eitzen
    Dec 1, 2014 at 18:13
  • 3
    This kind of answers is why I love this community. Thanks a lot!
    – Adam Matan
    Dec 1, 2014 at 18:32
  • 1
    You're very welcome. I love these public brainstorming sessions as well :)
    – McKnight
    Dec 2, 2014 at 8:21
  • 1
    It took me a second or two to notice the hand at first. If I were going to implement this idea (which I really like btw), I'd have the hand at full opacity for a few seconds, then fade it to how it is in the image.
    – TMH
    Dec 2, 2014 at 9:53
  • 3
    I am surprised this is getting so much upvotes and ignored it the first time I came across this because I didn't expect it to, but this design really does not fit with the material design of the rest of the interface. Material Design is all about keeping it flat and real, a fake 2d glued on hand really doesn't fit in that mindset. And even if you had a shadow to the hand it's still a 3d object superposed on a 2d layout...
    – David Mulder
    Dec 3, 2014 at 13:37
21

You could de-emphasize the search field, e.g. by not showing it by default. Just say "Choose a location" in the head of the screen, and have a magnifying glass button that pops up the search field for people who want to enter an address. Something like this:

enter image description here

Even if you don't go with this approach, you might want to adjust your text sizes and wording. "Search" should be "choose a location", and should be bigger than "or type here" in the search field.

One question you should ask yourself, though: Do you really want people to use the map instead? I personally often use addresses because it's faster to get right precisely than stabbing my chubby fingers at an intricate map. A map is more convenient if the location needed is not very precise, or you have icons for existing locations on the map, and the map is already zoomed into the right area (i.e. if this is a screen for selecting things around the user's current location.

Improve this answer
7
  • That's a good point. a. the map is indeed centered at the user's current location and zoomed accordingly. b. Not every spot has an address (e.g. a parking lot). Therefore, we want to enable pinning without an address
    – Adam Matan
    Dec 1, 2014 at 13:49
  • What would you do though if you can't find the users location? For example if they say no to "X Wants to Know Your Location"
    – tim.baker
    Dec 1, 2014 at 15:28
  • 1
    Would +1 for the UI recommendation but -1 for the idea every place could have an address. But then again, maybe in the States that's the case.
    – AndreKR
    Dec 1, 2014 at 16:17
  • @AndreKR I don't live in the States :-p Back to the topic, though, it depends on the use case. Where I live, most shops have something resembling an address (some sort of name + a postal code) that you can use on maps. Or a place name that can be typed in (like "Central Park"). Depending on what the app does, that may well be sufficient. If OTOH you're setting location fences, the common use case will prolly be your actual GPS coordinate at the moment, and I might not even offer the search field.
    – uliwitness
    Dec 1, 2014 at 19:41
  • @uliwitness: Even assuming all places have an address, the user may not know it. I’ve lived in a city where the main taxi firm insisted on getting an address for pick-ups (not willing to accept a location like “at the intersection of 5th Ave. and S. Negley St.”), and it was often very inconvenient.
    – PLL
    Dec 3, 2014 at 19:41
19

Have you considered moving the map, rather than moving the "pin"?

Scrolling a map is a common action in most map applications, if you keep the reticule static and move the map underneath it, the user can target their desired position. The text in the box should update as the user scrolls. This might allow you to get away with no additional help messaging.

This has some advantages over tapping to place a pin:

  • You rely on the more typical map interaction, scrolling. You do not have to communicate the "tap" action at all.
  • More accurate targeting, as the user's finger does not obscure the target, and they can use the entire map area to adjust.
  • Having a default target of the user's current location, means that users may never have to interact with the map at all, as their location is already selected.
  • There are no accidental taps or scrolls, as there is only one action: scroll to target.

Something along the lines of:

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

Improve this answer
1
  • 2
    I've seen several apps with a 'choose location' function that do it this way. It's intuitive. Much more so than tapping on the map. (Even if I know to tap on the map, I'm never sure if I need to tap, long tap, or double tap, because there isn't really a standard for interacting with touchscreen maps.)
    – hairboat
    Dec 2, 2014 at 23:34
12

Since users are likely to see the entry form first, how about using the placeholder text for this?

"Enter location or just pick from map ..."

Improve this answer
1
  • 1
    Thanks. That's definitely a part of the solution, but I'm also looking for a visual, graphic UI element that would hint the users.
    – Adam Matan
    Dec 1, 2014 at 8:45
4

Here is my solution - crosshair. Map can be moved but selected location is obvious.

Screenshot is a few years old, hence Android 2.x maps and widgets.

actual screenshot

Improve this answer
6
  • 2
    It would help to expand on the reasons why this design answers the original question. Could you elaborate on, "How do I make the map obviously clickable? Which text, icon or UX flow would make the users understand that they can just pin a location with a finger, without searching for it textually?" in regards to your design?
    – Andrew
    Dec 1, 2014 at 20:10
  • Original question is fixed at "make a map obviously clickable". I'm suggesting approach where user is clearly informed than particular location is in the limelight without the need of clicking a map (which - depending on zoom level - may be truly imprecise). As original question does not relate to dropping multiple pins, my solution may win in usability testing of real app.
    – tomash
    Dec 1, 2014 at 23:43
  • 6
    To me, this doesn't look like a crosshair, it looks like a grid of four different maps.
    – user56reinstatemonica8
    Dec 2, 2014 at 12:56
  • 6
    @user568458 - At first sight, I saw 4 maps too. Putting a cross only at the center would be clearer.
    – Nicolas Barbulesco
    Dec 2, 2014 at 13:00
  • Again, if you could elaborate on why your solution provides a good/better means of accomplishing what the question poses. Simply providing a possible solution is not as helpful as explaining why you arrived at a solution. Just like a math problem in school, explaining how you got to the answer is just as important as getting to the answer, as it allows us to learn how to solve other issues with a similar nature.
    – Andrew
    Dec 2, 2014 at 14:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.