UX idiom for closing activity: X-icon vs up-button vs back button

Question

We're launching a search activity when hitting the global search button (i.e. the hardware search key, if present, or a search icon in the Action Bar.) It should be noted here that the search activity is very complex in terms of functionality and a mere search bar expanded into the Action Bar is not sufficient for us. A mockup follows.

Now the question is: what's the proper way to navigate away from this screen? One important thing to mention is that on the search screen, we automatically focus the search field and open the keyboard. Here are the 3 solutions we came up with:

1. show a cross in the upper left corner of the action bar, as is used to close an active action mode. This is what our designer first came up with and triggered this discussion. We initially argued against it, since we only ever saw this icon being used by Android to navigate away from an active action mode. However, see my other points to see why this may still be a good case for it.

2. Use the Up button. This is what I originally had in mind. However, we quickly decided that this is not a good solution, since this would mean that when reaching this global search screen from e.g. a user profile activity (where we show the Action Bar plus search button too), there is no logical parent except for the home screen, which would make for an awkward user flow. Moreover, the search screen is also used to refine an existing search, so it is more used as an options/settings screen that exists orthogonal to other activities from a user's perspective.

3. Not show any icon at all and rely on the back button. We initially didn't want to do this, since we always show the keyboard and the user would have to hit back twice to exit out of this screen, which is annoying. Not a game breaker or anything, but not great either.

Any suggestions?

I initially asked this on Google Plus, here is Roman Nurik's response:

Generally you shouldn't launch a separate activity right away and instead expand a SearchView in the action bar. Up should collapse the action back into an icon. If however you absolutely must launch a new activity (e.g. if search is more than just plaintext search), Up leading to the top-level home screen or whatever else is the structural parent of Search seems like the choice best-aligned with our design guidelines.

Answer 1

I would implement contestant number one (X-button to close) and contestant number three (back-button twice to close). Contestant number two, Up-arrow to close, is not a common way to close an activity. To my knowledge it isn’t used that much. The only place I could find was on the Mac where CMD + Up Arrow gets you to the parent folder in Finder application.

But the X is commonly known for both Windows, Linux and Mac users. And since this is an Android application where the X for close is quite common on windows. My advice is to stick to existing Android conventions on navigating away from windows, and be sure to let the come back to the screen where they accessed search. Going back to home screen, would be a bad idea.

Answer 2

Move the 'X'! For a live typed field an empty input means no search results and a return to previous state. An X to clear the input is convention on most mobile devices, so you should be consistent and in the clear.

Having the X above is incorrect visually hierarchy because your search box and results do not have a container (like a modal window / dialog), so its not clear what the X would be closing if anything.

Answer 3

When in doubt, you can provide text to help the user out. If there's room and the graphic design is done right putting "close" next to an appropriate graphic will answer any question a user may have (when possible having it on the page makes things easiest, but helpful hover text can also accomplish this).

The arrow solution makes sense in some scenarios, but isn't going to be full proof as it could confuse some users. Explicitly stating the function when possible will usually be clearer than a potentially confusing graphic.

Also, for a personal pet peeve: make sure to allow the escape button to exit out of the modal, screen, popup or expanded area.

Edit: made this before the mockup and didn't realize it was for mobile. Ignore non-mobile parts :D

Answer 4

Android users are accustomed to using the back button for closing or backwards navigation. They're also accustomed to having to press back once to close the keyboard then again for navigating back since this allows them to close the keyboard and possibly interact with things on screen without navigating away on the first back press.

If you're really against pressing back twice, you can easily override the back key behavior in code to close the keyboard AND navigate back all at the same time. For code implementation of that behavior you can see the details on stackoverflow.