3

Goal

I'm experimenting with the recent Material Design pattern - Backdrop.

My goal is to include the search bar into the header of the front panel, but I'm not sure on how to create an affordance to exit out of the search mode.

Attempted solution

I tried putting the left arrow to the left of the text field, as it is implemented in many other places, but it doesn't make much sense here because no screen transitioning happens.

I also tried replacing the arrow with an exit cross, but I'm afraid that the users might confuse that button with the "clear text field" action, besides, I'm planning to put that action to the right of the text field, so having two crosses seems confusing.

Question

What would be the clearest way to indicate a way to leave the search mode?

The design is going to be implemented in an Android application.
Here is a demonstration of what I have now: screenshot

Avatar image courtesy of placekitten.com

Improve this question
7
  • how is the information/list presented different when not in search mode?
    – Confused
    Dec 15, 2018 at 6:01
  • @Confused when not in search mode, the list simply presents everything. When in search mode, the list shows only the entries that are found by the query
    – illright
    Dec 15, 2018 at 9:31
  • Have you used filtering style searches in other apps?
    – Confused
    Dec 15, 2018 at 9:33
  • @Confused isn't that how most searches work?
    – illright
    Dec 15, 2018 at 16:31
  • Why would/should you do it any different?
    – Confused
    Dec 15, 2018 at 20:15

2 Answers 2

Reset to default
0

So in this instance I do think the arrow makes sense. I know it feels weird in that it doesnt "take" you anywhere but by using it you're sticking with a familiar Android pattern for dismissing the keyboard. And as long as you're using hint text in the search mode and seeing the previous header text be replaced by that then the swapping back in forth that the arrow provides should reduce any cognitive load for the user in understanding that state change.

I dont like the 'X' because once the user has started to enter text you'll need the 'X' on the left as well in order to allow for a way to clear the field. It'd be weird seeing two 'X's

Improve this answer
0

The easiest and laziest way, in the inactive search field, write something like:

filter list by search...

Any touch inside this text field should pop up the keyboard and move the cursor to the far left, and grey fade the above text so as to make it clear you're awaiting input to filter the list.

Hopefully you use some kind of fuzzy search and it happens dynamically, and fast, so the user can feel it's effective. In this way you can remove the search magnifying glass, replacing it with an (x) for clearing and/or dismissing the search.

Improve this answer
5
  • The thing is, there is no search field when it is inactive. In the regular mode there's just a header with a button to go into search mode, and only then will the text field appear. And then I need a way to exit that search mode and return to the regular header
    – illright
    Dec 15, 2018 at 16:30
  • Also, about the clearing and/or dismissing part, how would that work? Pressing the X on an empty field would dismiss it? Because normally there's no X in empty fields, so I wonder how understandable that solution would be
    – illright
    Dec 15, 2018 at 16:33
  • You're making a needless step with the "button".
    – Confused
    Dec 15, 2018 at 20:15
  • But I also display the screen name in the header, and in my case it is just about the only place to put it, so a button combines the search field with the header seamlessly
    – illright
    Dec 15, 2018 at 21:18
  • I am failing to understand your problems and what you're attempting to do. Maybe needs more screenshots of the different states and some information on the endeavours of your users and the empowerments you're providing them.
    – Confused
    Dec 15, 2018 at 21:22

Your Answer

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

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