1

I have search bar on mobile app as a full-width popup. My questions is what else should I show with search input field?
1. "Cancel" button
2. "Back" button
3. "Back" button and CTA (Search) button
enter image description here

3 Answers 3

1

I am making the assumption that this is an iPhone app and by "full-width popup" you mean "Modal View Controller".

Use the default "UISearchBar" - it has a cancel and a clear button. Users will use the keypad to confirm the search (if the search isn't live). And "Cancel" will close the modal. : )

6
  • Let's say it's ANY mobile app (Android/iOS) or mobile website. Does it make any difference in implementation? Aug 31, 2015 at 22:30
  • The only time a user would press on the search bar would be to: search, correct a spelling, search something else or cancel the search.
    – Julien
    Aug 31, 2015 at 23:00
  • 1
    Option 1 will work fine for a modal view. Option 2 would work if you are loading a new page. Option 3 is a bit pointless, as all devices have an enter key on the keypad.
    – Julien
    Aug 31, 2015 at 23:06
  • I totally agree with you. I think there is no big difference between ver 1 and ver 2, but ver 3 is useless. I personally would go with ver 2, because when you start typing the small "x" appears at the end of input field (Standard "clear" element). So having "Cancel" next to input field may cause a misclick Aug 31, 2015 at 23:16
  • The best advice is to look around and see what others are doing. Twitter mobile web uses opt-2 (iOS app opt-1). Facebook mobile web just has a clear "x" with no option to cancel or go back (iOS app opt-1).
    – Julien
    Aug 31, 2015 at 23:43
1

While I think the cancel/back button is helpful, I'm not sure that it's the most effective. Will the page change on cancel/back, or does it just hide the search interface? Is there any function that clears the search box?

As far as the placement of the search button, I would definitely recommend adding it, unless you're certain that your typical user is used to the pattern of hitting enter to submit.

From UX Movement:

Having a search button (or link, in your case):

  • describes the action the system will do
  • makes the button easier to click
  • does not require any additional labels
  • is simple and clean
2
  • Thx for your comment. Couple thoughts. 1. It's mobile App. People use CTA button on keyboard, not on the page. 2. When you start typing the inputfield has additional element "x" inside which clear the input field. So having additional Search button may cause misclick Aug 31, 2015 at 20:54
  • describes the action the system will do. I have "search icon" inside input field. I think it's a good indicator. makes the button easier to click People use keyboard CTA. is simple and clean it's simpler and cleaner w/o Search btn Aug 31, 2015 at 21:03
0

When designing an app UI you should "Keep It Simple".

If the back button is crucial to your app than you can go with option 2 but if not than go with option 1 because it represents a search bar with all the required functionality that a user needs. You should not over complicate things for your users.

2
  • Back button is not crucial but I really don't see any benefit from using Cancel instead back button. It's the same action that return user on previous page. I like back button a bit more because the placement of it. Sep 1, 2015 at 15:40
  • The benefit of using cancel instead of back depends on the platform for which you are developing the app. If you are developing an iOS app then it means you are targeting users that have an iPhone. Apple uses the search UI with the cancel button so your benefit would be that the users are already familiar with that type of UI . People expect apps to behave in a certain way and if you don't want to lose your audience to your competitors then sticking to conventions is not a bad idea :) Sep 2, 2015 at 5:29

Your Answer

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

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