Mobile search ui/ux improvement

I find when I initiate a search in a mobile view I can become stuck due to the lack of an obvious cancel button to return me to my prior screen.

I can swipe back or use a browser back button; however, displaying a simple “cancel” button could be a worthwhile UX improvement.

3 Likes

Not sure I agree with this. Do you also feel stuck on a user page on mobile?

I think what feels inconsistent is that the other two buttons alongside the search one open pop-ups that can be dismissed by clicking on the button again.

Not sure I have a great suggestion as to how to resolve the inconsistency though…

The UX designer in my team freaked out when she experiemented the search on mobile.
While the desktop version on mobile is neat, the mobile defaut page change is counter-intuitive.

We’re trying to break it in order to have the mobile experience for search identical to the desktop experience (a pop-in window that you can close).
Any idea how to tweak that?

1 Like

We avoided it cause of some really bad Safari bugs that made it unworkable due to position fixed. Pretty sure @pmusaraj thought about this problem recently. I don’t think you will have any easy time tweaking this.

1 Like

Great to know why the decision.
I presume a bug from before 2016 on Safari must be fixed by now.
Wouldn’t it make sense to simplify this again to apply the desktop behavior all the way?

1 Like

Can you describe what you mean in more detail? I would love to see some screenshots or a screen recording of the problem. It would help me figure out whether you are seeing some legitimate issues in core or whether this is something else.

Hey, thanks for asking!
I made a little recording of the UX from the desktop on typing a search a leaving it back to the content:

search-dropdown

And a recording of the current experience from a mobile where you can’t close the search and access the content again:

search-fullpage

I became aware that I had to get back to the previous page when seeing the /search url in my url bar, but it took me a little time to figure out and the ux designer was very confused about that experience

4 Likes

Thanks for the screen recordings. I see what you mean, the issue is that it is not obvious that search takes you to a separate page. There is probably something we can do to make it clearer to the user that they have navigated to a separate search page.

Or, maybe we can use the same widget as in desktop as you mentioned. I like having the same UI across desktop/mobile generally, but I’m not sure this is a good case for that.

2 Likes

I really like the pattern of using a full page on mobile to replace modals/dropdowns, it utilizes the space much better and avoids a lot of scroll issues… I wonder if adding some kind of x or back button would help? and/or maybe tapping the :mag: should bring you back to the page before search?

It’s still not very good! We have a lot of hacks to work around iOS scroll issues with modals and dropdowns. As far as I know they don’t consider a lot of their differences bugs at all.

5 Likes