[Search] tapping "No internet connection" is easy to trigger search engine setting when offline

VERIFIED FIXED in 2.2 S9 (3apr)

Status

defect
VERIFIED FIXED
4 years ago
4 years ago

People

(Reporter: hcheng, Assigned: gmarty)

Tracking

unspecified
2.2 S9 (3apr)
ARM
Gonk (Firefox OS)
Dependency tree / graph

Firefox Tracking Flags

(blocking-b2g:2.2+, b2g-v2.2 verified, b2g-master verified)

Details

(Whiteboard: [systemsfe])

Attachments

(3 attachments, 1 obsolete attachment)

* Description:
After refactoring search result layout, tapping "No internet connection" is easy to trigger search engine setting menu when offline.

* STR:
1. no network connection
2. launch search app
3. tap "No internet connection"

* Expected result
trigger Network connection menu

* Actual result
easily trigger search engine
Blocks: 1099157
blocking-b2g: --- → 2.2?
Summary: [Search] not easy to tap "No internet connection" but easy to trigger search engine setting when offline → [Search] tapping "No internet connection" is easy to trigger search engine setting when offline
Whiteboard: [systemsfe]
Can you make the video public?
Flags: needinfo?(hcheng)
(In reply to Gregor Wagner [:gwagner] from comment #2)
> Can you make the video public?

+1.


Also going to ask UX here. I think there's some overlap in the hit targets but even if we fix that it seems that these buttons might be too close together to easily distinguish. 

Francis - is this as speced, do we need some separation?
Flags: needinfo?(fdjabri)
(In reply to Gregor Wagner [:gwagner] from comment #2)
> Can you make the video public?

sorry about that, I forgot to press 'save' after changing it yesterday
Flags: needinfo?(hcheng)
(In reply to Kevin Grandon :kgrandon from comment #4)
> Created attachment 8574038 [details]
> Screenshot of offline experience

There's definitely some overlap going on with the touch targets. I'm tapping squarely on the No Internet Connection label and it's still bringing up the search selection dialog. 

However, you're right, these targets do look a bit close together. Eric, does the target size for the No Internet connection label meet our minimum touch target guidelines? I would say, following these guidelines, it should be at least 9mm tall:

http://www.uxmatters.com/mt/archives/2013/11/design-for-fingers-and-thumbs-instead-of-touch.php
Flags: needinfo?(fdjabri)
Flags: needinfo?(epang)
Flags: needinfo?(nhirata.bugzilla)
Posted image Rocket_Bar_Search_Offline.jpg (obsolete) —
Let's vertically center 'no internet connection' between the search suggestion header and keyboard.  It's 8rem on hvga and 12 rem on fvga.  This should give more then enough room for touch targets.  See attached image, thanks!
Flags: needinfo?(epang)
blocking-b2g: 2.2? → 2.2+
Thanks gmarty!
Assignee: nobody → gmarty
Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

Before asking for a r+, I'd like you to have a look Eric. There's a couple of things I find weird:
1. When adding the top margin, if you have items in your history matching your search (I have 2), the "No internet connection" is hidden underneath the keyboard and is not easily dismissed.
2. The click target is the cog icon, which is very small. Tapping the text "No internet connection" isn't effective (This is not related to this patch).
Attachment #8577172 - Flags: ui-review?(epang)
Flags: needinfo?(nhirata.bugzilla)
(In reply to Guillaume Marty [:gmarty] from comment #10)
> Comment on attachment 8577172 [details] [review]
> [gaia]
> gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-
> search-engine-setting-when-offline > mozilla-b2g:master
> 
> Before asking for a r+, I'd like you to have a look Eric. There's a couple
> of things I find weird:
> 1. When adding the top margin, if you have items in your history matching
> your search (I have 2), the "No internet connection" is hidden underneath
> the keyboard and is not easily dismissed.
> 2. The click target is the cog icon, which is very small. Tapping the text
> "No internet connection" isn't effective (This is not related to this patch).

The max number of matched history is 3. So, the original "1rem", "No internet connection" would also be hidden under keyboard when 3 matched histories. What I concern is that the place of "No internet connection" might be very close to the bottom when there are 3 matched history results.

Eric, how do you think?
Flags: needinfo?(epang)
I agree, let's move the 'no internet connection' to below the Rocket Bar.  It's pretty important for the user to know they are not connected so having it covered by the keyboard isn't ideal.

Guillaume, is it possible to make the cog and text a rectangle hit target?

We'll have to try it out and see how it feels - worried it might be a little too close to the local searches.

Thanks!
Attachment #8576604 - Attachment is obsolete: true
Flags: needinfo?(epang) → needinfo?(gmarty)
Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

removing ui-review for now
Attachment #8577172 - Flags: ui-review?(epang)
Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

I implemented the changes Eric. Can you have a look? Thanks :-)
Flags: needinfo?(gmarty)
Attachment #8577172 - Flags: ui-review?(epang)
Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

Looks good, thanks Guillaume!
Attachment #8577172 - Flags: ui-review?(epang) → ui-review+
Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

Kevin, can you review this patch for me?
Attachment #8577172 - Flags: review?(kgrandon)
Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

LGTM!
Attachment #8577172 - Flags: review?(kgrandon) → review+
Keywords: checkin-needed
http://docs.taskcluster.net/tools/task-graph-inspector/#WcH8GfG9RTOBGyQVidwlFQ

The pull request failed to pass integration tests. It could not be landed, please try again.
Keywords: checkin-needed
https://github.com/mozilla-b2g/gaia/pull/28865

Autolander could not land the pull request due to not having collaborator rights. This is possibly due to a tree closure. Please check the tree status and request checkin again once the tree is open.
Sorry, this is probably due to the tree closure issues today... Should clear up once the tree reopens.
Landed in master:
https://github.com/mozilla-b2g/gaia/commit/b551f3ce4eb84daba511b67f8d0e7a436acfae5e
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Comment on attachment 8577172 [details] [review]
[gaia] gmarty:Bug-1140315-Search-tapping-No-internet-connection-is-easy-to-trigger-search-engine-setting-when-offline > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): Browser
[User impact] if declined: When offline, the settings link is badly placed, next to another link and with a tiny touch target. It makes it difficult for the user to use or even notice.
[Testing completed]: Manual testing is required
[Risk to taking this patch] (and alternatives if risky): Risk is low as it is only a markup and CSS change
[String changes made]: None
Attachment #8577172 - Flags: approval-gaia-v2.2?(bbajaj)
NI myself for following verification
Flags: needinfo?(hcheng)
Attachment #8577172 - Flags: approval-gaia-v2.2?(bbajaj) → approval-gaia-v2.2+
verified with below builds
*2.2
Build ID               20150329162502
Gaia Revision          473cd63f53c855299b719285d9b95e3f2910782f
Gaia Date              2015-03-27 20:14:43
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/4b13c4254e2f
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150329.200030
Firmware Date          Sun Mar 29 20:00:41 EDT 2015
Bootloader             L1TC000118D0

*master
Build ID               20150329160203
Gaia Revision          67ad91f3f660b1f16b354ee4c5159ddc5a74d149
Gaia Date              2015-03-28 10:02:40
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/385840329d91
Gecko Version          39.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150329.191719
Firmware Date          Sun Mar 29 19:17:28 EDT 2015
Bootloader             L1TC100118D0
Status: RESOLVED → VERIFIED
Flags: needinfo?(hcheng)
Keywords: verifyme
You need to log in before you can comment on or make changes to this bug.