Closed Bug 1498279 Opened 2 years ago Closed 2 years ago

[remote-dbg-next] UX: Update styling of USB scanning status in sidebar

Categories

(DevTools :: about:debugging, enhancement, P1)

enhancement

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: jdescottes, Assigned: mcroud)

References

(Blocks 1 open bug)

Details

Attachments

(3 files)

We are landing a very basic version of the "USB status" in Bug 1494549.

This bug is about improving this design. Some ideas for improvements:

> We discussed this yesterday and this new message can be confusing, 
> especially when we already show the "No Devices discovered". 
> One suggestion from Harald is to have a different design based on  
> https://design.firefox.com/photon/components/message-bars.html. 
> We could also make this message show only when USB devices scanning 
> is disabled (with a link to the connect page?).
>
Priority: P3 → P2
Summary: [remote-dbg-next] Update styling of USB scanning status in sidebar → [remote-dbg-next] UX: Update styling of USB scanning status in sidebar
Matt, I tried to summarize the feature we want to improve in the doc below. Can you have a look?

https://docs.google.com/document/d/11jeXB4txooIHXVFXsE8Fk9kEwAF6w2Dd7LkwTMzTq_U/edit?usp=sharing
Flags: needinfo?(mcroud)
Blocks: 1505130
Assignee: nobody → mcroud
Flags: needinfo?(mcroud)
Thanks Julian! Yes it could be argued that by placing this information in the sidebar is perhaps exposing a premature issue to the user. The sidebar will eventually house devices connected through other means, not just USB. In my mockups I'm exploring the idea that we bundle the binary download action with "Enable USB", the user has clicked this button to express a desire to utilise USB and so we save the user an extra step. I will update here when I have work to show.
Status: NEW → ASSIGNED
Priority: P2 → P1
First iteration of suggestions for USB status in sidebar (slides 36 - 43):

https://mozilla.invisionapp.com/share/73P8EZEJSEH#/334352311_3_Click_Connect_E_Copy

From simple notifications to buttons which depict state, there are many options but which is likely to grab a user's attention and inform them that simply plugging in the USB might not result in success?
Attached image usb-status.png
Please find attached the agreed visual for the USB status message.

The styles can be taken from the Photon docs for a "Generic" message bar: https://design.firefox.com/photon/components/message-bars.html

A final query I will raise here is the inclusion of the close "X" in the message.

The Photon docs describe that this particular "Generic" type of message bar "should be dismissible" and later explaining that "Unless they contain critical information, message bars should be dismissible". If we did add a close "X" to the message it would perhaps lose its purpose of being a status message however including the close button may assist in the user's recognition of it. One can only assume.

The "Generic" message bar is a good fit here though, as it should be used to "Convey general information or actions that aren’t critical." - which is what we are attempting to do.
I'm going to have a chat on #UX about the message bar not having a close and I will update on here when I have some feedback
Thanks for the update Matt, looks much better than the current message! Maybe while we wait for a consensus about the close "X", we can implement the message without the closing mechanism, and have a followup for the rest?
Flags: needinfo?(mcroud)
That sounds like a good idea to me. 
As you say, if the feedback received suggests that a close button is required for Photon compliance we can follow up. 
Likely if you've dismissed the message in the past you would be aware of the USB toggle control so I don't think the close button will diminish the effects of the message if we need to add it.
Flags: needinfo?(mcroud)

Did we get some feedback on the proposed icons?

Wrong bug sorry. Although we should also make a final decision about this, so keeping the need info :)

Flags: needinfo?(mcroud)
Attached image USB-message.png

Please find the agreed upon design attached.

The design will use the Photon "Generic" message bar styling. I have provided some measurements but all the details can be found here: https://design.firefox.com/photon/components/message-bars.html#sizes-and-grid

The message bar should be as wide as the menu buttons above it.

To comply with Photon we should consider keeping the close button, perhaps having the message reappear in the event that the user disables USB.

Flags: needinfo?(mcroud)

Thanks Matt!

Some questions before I can close this:

The message is only displayed when USB debugging is disabled. It doesn't turn into "USB enabled" when you enable USB debugging. Is this correct?

Should we have a title with slightly more details? "USB can be enabled by going to the Setup/Connect page". And "Dismiss this message" for the "X"

If user dismisses the message, the message is hidden. Is the message supposed to be displayed again sometime? We can either:

  • permanently hide it for the profile
  • display it if the user enabled USB debugging since the last time they dismissed the message
  • display it when the user restarts about:debugging
  • display it when the user restarts Firefox
    I think the second option might be a good balance here?
Flags: needinfo?(mcroud)
Attached image dummy connect.png

I was merrily answering your questions when it suddenly occured to me...

Attached is a quick rough I made of where the Setup page is currently heading. I have to remind myself that we are heading into a situation where "This Firefox" is not the first thing people see but "Setup".

I believe the main reasoning for exposing the USB status as a message was to prevent a situation where users would simply plug in a device and expect something to happen, unaware that USB had to be "switched on" first.

We will soon be exposing that USB switch as soon as people arrive.

In the mockup, I also added the message bar, but in the place that follows the new guidelines, so directly above the section it relates to.

It could be argued that we are doubling up here as the notification that USB is disabled is directly above the new toggle which shows that USB is disabled.

It is perhaps impossible to say which would be most helpful for users at this stage so perhaps the answer is to stick with the sidebar for now and once we have a better idea of what "setup" looks like we can revisit?

So to answer your questions :) ...

Let's keep the behaviour as a message as opposed to a status, we only want to nudge users when their USB debugging expectations might not go to plan, so let's only reveal the message to say "USB disabled".

Really the message only needs to work once for the user to understand that USB isn't necessarily "always on". So I'm thinking.

  • The message is present on first visit and remains until either the message is dismissed or the user enables USB.
  • If the user dismisses the message and does not enable USB, the message should reamin hidden (they may have no interest in USB debugging).
  • If the user enables and then later disables USB, the message should reappear when they return to about:debugging.
  • All the time USB is enabled the message remains hidden.

For a title tooltip I agree, it'll be handy to point the user in the direction where they can change the status, so "Enable USB on the Connect page" should suffice. "Dismiss" should be fine for the X button.

Flags: needinfo?(mcroud)

As discussed during the standup, we should have enough material here to start the implementation. Closing.

Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.