Usability: No ‘enter’ button on location search field

[fancyham]

Overview

On search fields, there is usually an on-screen ‘search’ button that submits the text entry to the search engine. However, our landing page does not have this, so we are breaking with a popular UI pattern.

We basically require a user to press the ‘enter’ button on their on-screen keyboard to submit a text field — but this isn’t obvious, especially if the user selects an auto-complete item.

This happens on both desktop and mobile landing pages, but it’s worse on mobile since users may not know they have to hit the ‘enter’ key on their on-screen keyboard.

Discussion and possible Solution(s)

Suggest:

• Make the magnifying glass into a more obvious button by changing its color (it’s actually a button — try it — it goes to Los Angeles)
• Keep the magnifying glass button in the text field visible while the user enters text.

Quick mockup of current the suggested solution

Action Items

• Confirm that this is a problem worth fixing (research, design teams)
• Investigate problem
• Problems seem to be:
  • No ‘submit’ button, which we can fix by adding one (easy to fix - see above sketch)
  • Bug: Address autocomplete sometimes disappears even when there are matches (bug?) #1691
  • Bug: User-submitted text address doesn’t properly resolve into an address or GPS, causing a failed search #1692
• Design and specify changes (design)
• Implement changes (devs)
• Beta test / QA (design, research)

Resources/Instructions

[fancyham]

Added mockup to description above

Discussion on Slack was that these proposed changes (colorizing the search button and keeping it visible while entering text) would help the user interface part of the problem.

However, there's also some weirdness when typing in a zip code and pressing return — sometimes the search returns empty, even though the zip code entered should be valid.

Question: Does the user have to use one of the auto-completes to get a search result? If the user enters free-form text, does it get geolocated properly?

[Sage-2001]

So, what I have understood by far is that the issue at hand is the landing page lacks a visible "search" button, which goes against the common user interface (UI) pattern where users expect to see a button to submit their search queries. Instead, the current implementation requires users to press the "enter" key on their keyboard to initiate the search, but this behavior may not be intuitive, especially if the user selects an auto-complete suggestion. I can work on that, please assign it to me. Thanks

[fancyham]

I think there are three separate issues at play here:

• 1. No ‘submit’ button, which we can fix by adding one (easy to fix - see above sketch)

• 2. the autocomplete sometimes disappears even when there are matches (bug?)

It seems like even if we add a submit button,…

• 3. User submitted text address doesn’t properly resolve into an address or GPS, even for zip codes that should work, and the search engine returns zero results. (Bug?)

[Sage-2001]

I don't know how to solve 2 and 3 issues. Any heads-up?

[fancyham]

@Sage-2001 — does adding the search button run into problems because #1692 causes the text entry to fail?

[Sage-2001]

@fancyham Adding the search button did not cause any issues, and it appears that the problem mentioned in #1692 is a separate bug. When attempting to enter a custom user input for an address, it seems that the application is not accepting any values unless they are selected from the dropdown autocomplete section. This behavior results in failed results for any address that is not chosen from the autocomplete options. Can you checkout my pull request by the way? Thanks

[fancyham]

Being addressed in this UI update

• Visual refresh/redesign of public Food Oasis UI #1874

[qiqicodes]

Closing this issue as it has been superseded by the new design implementation.

[fancyham]

Adding screenshot from upcoming design — it has an ‘enter’ button now :)