search

club-soda / club-soda-guide

Mindful Drinking Movement - Club Soda MVP 2.0
https://club-soda-guide-staging.herokuapp.com
17 stars 0 forks source link

Search bar should contain a 'Search' CTA button #258

Closed ctrembath closed 5 years ago

ctrembath commented 5 years ago

As a customer on the Drinks all page I'd like to see a Search Button attached the Search Bar so I can 'Search' on both mobile and desktop

Acceptance Criteria

Screenshot (from @harrygfox designs)

screenshot 2018-12-18 at 11 31 43

Cleop commented 5 years ago

The searching happens automatically as they type and so a CTA button might be confusing as it would not practically achieve anything? In fact it might confuse users that the results adjust automatically but there is also a button...

I think that users are used to seeing searches now without CTA buttons e.g. Google: image

ctrembath commented 5 years ago

Ok, I understand.

In that case on mobile I think it needs to behave in the same way as Airbnb / Google - offering a 'Search' or 'Go' button on the bottom right of the keypad. (see screenshot) img_0694 img_0695

Cleop commented 5 years ago

👍

I've just tested this on the staging version. It appears that there is a 'go' button on the landing page but not one currently on the search/drinks or search/venues pages so we can look into why that is...

SimonLab commented 5 years ago

The "search button" is shown on the main page because the input is part of a form which contains a submit button. A small enhancement on this page could be to change the type of the input from text to search, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

For the search pages (drinks and venues), as mentioned above the input search filter dynamically the list of results when the input text change. This is done with Elm and the input text is not part of a form, that's why the search/go button on mobile is not displayed.

A solution is to change the input text to a search input however the keyword is not automatically close when the button is clicked as the input has still the focus. We can then try to add an event listener on this button which will force the focus out of the input (I'm currently implementing/testing this solution)

Airbnb avoid this issue as it forces the user to select an item on the dropdown of citites, and the keyboard is still visible otherwise.

From a UX perspective I'm not sure what is the best approach, maybe on mobile we should avoid filtering dynamically and use a form?