Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

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.

share|improve this question
    
Can you post a screenshot? –  Fresheyeball Sep 18 '12 at 16:42
    
Sure, just updated the post. –  Matthias Sep 18 '12 at 16:54
    
And you say the search occurs live with user typing? –  Fresheyeball Sep 18 '12 at 16:57
    
That's right yes –  Matthias Sep 18 '12 at 16:57
    
Ok, I have answered. –  Fresheyeball Sep 18 '12 at 17:07
show 1 more comment

4 Answers

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.

Android X-to close example

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.

share|improve this answer
add comment

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.

enter image description here

share|improve this answer
    
Haha, nice! But there's a misunderstanding here, sorry if I wasn't clear enough: the action is supposed to close the screen, not just clear the search field. We did also talk about doing what you suggested, but that's for a different question. +1'ed for the effort though ;-) –  Matthias Sep 18 '12 at 17:24
    
what does "close the screen" mean? IE, what would the previous screen be? What screen would show after this one is closed? –  Fresheyeball Sep 18 '12 at 23:19
    
This screen is reached from the global search button or the app's universal Action Bar. So it's reached from whatever screen was visible before. –  Matthias Sep 19 '12 at 7:51
    
Then don't hide the action bar, and treat the 'search button' as a toggle. Taping it a second time closes the search. If you post a screenshot featuring the action bar, I will mock up what I mean. –  Fresheyeball Sep 20 '12 at 0:39
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
    
I tend to agree. However, we tried to find a way to programmatically close the keyboard and didn't find any. Do you have a link or something to back this up? –  Matthias Sep 21 '12 at 11:38
    
The stackoverflow link in my answer has the code to close the keyboard programmatically but also has a lot of other stuff in it so here's a link that is specifically closing the keyboard: stackoverflow.com/questions/1109022/… –  MCeley Sep 21 '12 at 12:04
    
Perfect, thanks! –  Matthias Sep 21 '12 at 14:28
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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