Fenix: [Bug] I feel stuck at the "Search with" screen

[darkwing]

Steps to reproduce

1. Tap on the search bar, see search screen pop up
2. Tap anywhere on the screen that isn't a search source, see keyboard disappear
3. ....now what?

What if I want to go back to my opened tabs? It took me a while to figure out that I was meant to swipe to get back to opened tabs screen, and even then it seems as though I wasn't starting my swipe close enough to the right edge of the phone.

Could we add a UI element to hide this screen? I'm not sure how/if this could be improved.

Device information

• Android device: Pixel 4 XL
• Fenix version: ?

UX

Design Work

• [x] Request for Comments from UX team
• [ ] ~Usability testing if a new pattern or potentially confusing UI~ Not required – putting a Back button on the top-left corner of the screen follows established Android System convention
• [x] Request for Comments from Fenix team and/or A/C, GV, Sync, etc as needed
• [x] Interaction details included
• [x] ~Accessibility - is this a review by someone,~ just keeping it in mind?
• [x] For existing UI changes, deltas are highlighted
• [ ] ~Strings/content reviewed and approved~ No string required, we’re merely adding a button
  
  
  
  • [ ] ~Are they too long for the component in other locales~
  
  

Deliverable

• [ ] ~Assets uploaded to Google Drive~ No asset required, there’s already a Back icon we can reuse.
• [x] Links to deliverables (spec, assets) posted in comment 0

Deliverable Links

• ~User flow:~
• Spec: https://share.goabstract.com/dfff228c-ba70-4a42-b86f-5d777b241ed3?collectionLayerId=6415b652-7e58-46a8-bc29-9c7207d757a8&mode=build
• ~Assets:~

UI Change Deltas

Current

Proposed

We decided to solve this problem on the search screen by adding a Back button to the left of the address bar.

[NotWoods]

On older devices Android always displays a back button, but we might want to tweak the UX to better work with gesture navigation in Android 10.

[brampitoyo]

@darkwing @NotWoods You’re right. On Android <10, this isn’t a problem because the back button is persistent, so users can always dismiss the search bar and return to the start screen.

Android 10 turns back into a gesture. No more button.

Although it’s tempting to solve the “now what” problem by re-introducing the back button somewhere onscreen, I wonder if we should think about keeping the keyboard persistently up (ie. not dismissable)?

With a persistent keyboard, users may understand better that dismissing is accomplished either by tapping the software/hardware Back button, or swiping back (if running Android 10).

Further, when we outline the behaviour, we see a new issue crop up. See number 3 below:

1. Think: “I want to search for something”
   Action: Tap search bar
   App response: Show search modal

2. Think: “I want to use another search engine”
   Action: Scroll down the screen
   Expected response: Keyboard stays up – app lets me see other search engines
   Actual response: Keyboard disappears… now what? ← This is the issue @darkwing brought up
   App response: dismiss keyboard, show list of search engines

3. Think: “Never mind. Just go back.”
   Action: Tap back button or swipe (if on Android 10)
   Expected response: Go back to Firefox Preview start screen ← This is a new issue
   Actual response: Firefox Preview exits to the phone home screen

[brampitoyo]

I’ve outlined a potential solution to this issue above in https://github.com/mozilla-mobile/fenix/issues/6666#issuecomment-557948786:

keeping the keyboard persistently up (ie. not dismissable)

With a persistent keyboard, users may understand better that dismissing is accomplished either by tapping the software/hardware Back button, or swiping back (if running Android 10).

@darkwing @NotWoods do we think that this solution sounds reasonable to try out, or is there a deeper problem that needs to be solved?

[brampitoyo]

@darkwing @NotWoods I also want to post another solution we can consider, which is to show a dedicated button for “⬅️ Back” or “Cancel”:

Keep in mind that these buttons will be more useful in Android 10 where users may not have a hardware/software back button. If there’s a back button provided by the OS, we won’t need to show them.

Any thoughts?

[darkwing]

I like a back button, but I'm also an ancient 36 years old :)

[brampitoyo]

Hi @darkwing, since the problem seems to stem from an _undismissable search screen_, we think we can help solve it using these behaviours:

• On the search screen, disable the ability to dismiss the keyboard when scrolling/tapping anywhere else outside of it. The keyboard will stay up – always – unless it’s dismissed using a System-native way.
• Respect the System-native way to dismiss the keyboard, using the ⌄ or ◁ buttons underneath it.
• When the keyboard is dismissed, take it to mean that the user wants to exit out of the search screen, and return to the previous page.

Hopefully this solves the “I’m stuck” problem on the search screen, by always showing users a clear, non-dismissible exit path? What do you think?

(I think that putting an extra back button to the left of the search bar isn’t a bad idea. I’m just cautious of putting “yet-another-thing” in our UI if it’s not absolutely necessary – but also understand that there’s something to be said about being super clear about indicating “here’s where you exit”.)

[brampitoyo]

@darkwing @NotWoods A little update on this situation. Hiding the keyboard was intentional!

Quoting @Verdi #1211:

• Enter a search term
• Scroll the list of suggestions

Expected behavior
The keyboard should hide since I no longer need and it and it will let see more of the list.

It seems as if the only way to resolve this problem is not by keeping the keyboard always up, but by putting an extra back button in the UI, only on devices with no dedicated Back button.

@NotWoods Is there a way for us to only target these devices? For example, MIUI, Android 10. Note that certain variants of Android 10, like Samsung One UI, has a Back button.

[NotWoods]

We might be able to target just devices with gesture navigation turned on. Personally I think it would be fine to always show a back button, as Slack does on its search page:

[brampitoyo]

@NotWoods I will run this idea through our UX team, and get back to you.

[brampitoyo]

@NotWoods @darkwing A short, positive update to say that we’ve reached a consensus of permanently showing the back button!

I will of course post the specs in comment 0 later. This is just a confirmation message to formalise our decision.

[brampitoyo]

@NotWoods @darkwing I’ve updated comment 0 with specs, and have also highlighted changes made in the search screen UI.

[sblatz]

For QA: please verify that the back button now appears and functions properly :)

[softvision-miralobontiu]

Hi all,
Verified that the back button is displayed and functions on the latest Nightly build from 12/27 (#13610605) with Nexus 5 (Android 6.0.1), Nexus 6P (Android 8.1), OnePlus 5T (Android 9), and Google Pixel (Android Q).
However, after tapping on the back arrow, there is a flickery transition, for which I will file a new issue.