2

I have mocks from a designer showing an initial form for searching a location. There are fields for location (business) name and city (pre-filled) and a Next button (disabled at first). When the user starts typing in the Location Name field, a div containing search results appears in real time under the Location Name field. To choose a location, the user taps on the result of his choice, the list goes away, and the choice is displayed below the Next button, which is now enabled.

A QA colleague is concerned that if the user chooses from the list, decides to search again, then changes his mind and wants to go with his first choice, how does he dismiss the results list without having to choose another selection from the list and re-search for his original choice? Currently, that is the only way to dismiss the list. The results list covers the Next button, by the way. One option is to add a "Close" or "X" icon to the search results list, but that is a visual challenge. Another colleague suggested using the Next or Done buttons that appear on Mobile Safari's form assistant bar, but Next only tabs between form elements and Done just unfocuses a form element then hides the keyboard.

I'm looking for suggestions on how to close the search results, either with a slight redesign or if there's a way to customize Mobile Safari's form assistant and having a button tap action tied to closing the div of results. (e.g. Cancel instead of Done). The solution should also work in other devices; I'm just using iPhones as an example. This is also not a native app; it's a website.

Original mocks -

original mocks

  • 8
    Add a little gray 'x' symbol at the end of the input area - then when the user clicks it it would clear both the search box and the results. – ArtOfCode Jul 27 '14 at 8:17
  • @ArtOfCode, thank you! I will share this with our designers. – sueanna Jul 28 '14 at 5:13
  • You might also want to add a caption explaining its use above the box. – ArtOfCode Jul 28 '14 at 9:10
  • @ArtOfCode Why commenting instead of making an actual answer when you have a good suggestion? If your answer is the best answer, sueanna can't select it and the post will forever remain as "unanswered". – refreshfr Jul 29 '14 at 14:11
  • @refreshfr I know, just wasn't expecting such a good reaction to it - thought of it as just as passing comment. I'll post it though – ArtOfCode Jul 29 '14 at 16:19
2

From my comment above.

One way of implementing this is to add a little gray 'x' symbol at the end of the input area, that when clicked will clear both the input area and the dropdown results. This system is fairly widespread so users are likely to understand it (for example, Windows Explorer's search box uses this). However, you can always add a caption above the search box to say that clicking the icon will clear your search.

The second method of doing it is pretty well-known too. You can detect a click outside the box and use this as a trigger to clear the input and results. However, I think the former method is better as it can be implemeted without JavaScript (using a type 'reset' form control) and as such will always be available to all users regardless of whether they have JavaScript enabled or not.

0

Two options

  1. Detect tap/touch/click outside the input box and search results (if you wanna avoid x button)
  2. Go with traditional x button

But users might not know how to close if only option 1 is implemented, until they try.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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