642684 - [meta] UX tracking for minimal f1 sharing feature

Status: RESOLVED INVALID

(Mozilla Labs :: F1, defect, P2)

Comment 1

[Bryan Clark (DevTools PM) [:clarkbw]]

adding the UX team to this bug

Comment 2

[Alex Limi (:limi) — Firefox UX Team]

Assigning this to shorlander for now, since he created the current mock-ups.

Comment 3

[Stephen Horlander [:shorlander]]

Attachment: Initial Share Mockup

Initial mockup containing some ideas for integrating sharing into Firefox based on f1:

- Share Icon in the Location Bar

- Smart First Run: Detect if the user has a share account already and offer to use that. Otherwise offer to setup a different account.

- First Run: Start account setup in panel if no account already found. 

- Twitter: Consolidate multiple accounts under primary service icon

Comment 4

[Bryan Clark (DevTools PM) [:clarkbw]]

Here's a status update on most of the UX bugs.

Figure out experience for failure cases bug 642653
    not started - waiting on full list of failure modes

Figure out where sharing preference should live bug 645802
    currently in the accounts/settings tab
    waiting on changes to accounts/settings XXX need bug

Should F1 be disabled or altered during private browsing mode? bug 644769
    currently F1 is enabled
    waiting for final FF UX call here

Use disabled icon when sharing is not possible? bug 643994
    Set WONTFIX - currently we hide when sharing isn't possible

Use the title of the page as the subject of an email bug 643996
    not started

ESC should close the panel window bug 644182
    not started.  broader question here of whether the panel should act like all other panels and close on loss of focus.  see bug

Twitter -
Selecting direct message and no name should prompt bug 644356
    in progress - needs UX guidance for type of prompt

@username auto-completion in twitter messages bug 642916
    not started

Comment 5

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to comment #3)
> Created attachment 522780 [details]
> Initial Share Mockup
> 
> Initial mockup containing some ideas for integrating sharing into Firefox based
> on f1:
> 
> - Share Icon in the Location Bar

DONE!
 
> - Smart First Run: Detect if the user has a share account already and offer to
> use that. Otherwise offer to setup a different account.

Filed this as bug 646238.  I don't think we'll be able to finish this in time for FF5 but we can continue to work on it for future releases.

> - First Run: Start account setup in panel if no account already found. 

This requires the settings page inside the panel, I've filed bug 646243 for that.

> - Twitter: Consolidate multiple accounts under primary service icon

Filed this as "new share UI" bug 646245 for implementing the change in the current UI.  

The new settings and new UI are separate bugs but might make sense to merge them together depending on how it gets implemented.

Comment 6

[Bryan Clark (DevTools PM) [:clarkbw]]

switched the twitter bugs to be tracked by the twitter tracker, bug 647578
removed the gmail bugs, they are going to be tracked by bug 649414

Comment 7

[Alex Faaborg [:faaborg] (Firefox UX)]

Random question: if you install Firefox on a computer that doesn't have an internet connection, what do you see when you invoke the f1 panel or prefpane?  Do we ship with locally cached UI that we can then later update?

Comment 8

[Philipp von Weitershausen [:philikon]]

(In reply to comment #7)
> Random question: if you install Firefox on a computer that doesn't have an
> internet connection, what do you see when you invoke the f1 panel or prefpane? 
> Do we ship with locally cached UI that we can then later update?

No. You get the network down page. There's no point in showing locally cached UI when the user doesn't have Share set up yet because any sort of set up requires the oauth dance against the site, thus an internet connection. And if the user does have Share set up already, well, sharing doesn't work w/o internet either ;)

Comment 9

[James Burke]

In the add-on we did ship a "server down" message, which could happen in this case, where we explain what is needed for share to work, and it could be styled nicely.

Comment 10

[Philipp von Weitershausen [:philikon]]

(In reply to comment #9)
> In the add-on we did ship a "server down" message

The plan is to do the same in the integrated feature: bug 646658. If anything should change regarding the UX, I recommend we discuss it there and morph that bug accordingly.

Comment 11

[Alex Faaborg [:faaborg] (Firefox UX)]

What's the status on the mockup that Stephen created?  Primarily I mean using a tabbed approach for different services instead of an accordion.  Also, is it possible to get something that looks like that when we have web content in an iframe, or do we have to have a hard border around the web content?

Comment 12

[James Burke]

(In reply to comment #11)
> What's the status on the mockup that Stephen created?  Primarily I mean using a
> tabbed approach for different services instead of an accordion.

The add account and tab selection/twitter UI has been mocked up in the web UI code. It does not exactly match the mockup yet, but looks similar enough to try out some of the interaction/flow, including using tabs instead of an accordion. 

I was hoping to get it up on a staging server before the end of this week, but we are in the middle of moving to a new repo setup/deployment model, so it will not be up until next week. I'll see if I can do a video of what is there now, to give us something to look at. It will likely not be until the weekend though due to the Canadian holiday tomorrow.

> Also, is it
> possible to get something that looks like that when we have web content in an
> iframe, or do we have to have a hard border around the web content?

Philipp/Shane, what do you think the odds are of styling the panel so it only has maybe a 1px rounded border, or even no border, but allowing the the web content to have a transparent background with an internal background-color div that has the rounded corners?

Comment 13

[James Burke]

I posted a video of what is integrated now here:

http://vimeo.com/22917493

It is a first-cut integration and just meant to show the current state of the code. Ideally we can get a round of UX feedback and finish up most of the things in the video that I mention this week so we can at least user test the Twitter UI in time for the planned user testing. So please feel free to give pointers or point out changes where appropriate.

I have been using Bug 647578 to track the current code/pull requests since the mocks so far have been for mostly twitter.

Some notes in the video:

1) I mention we are using an HTML5 autocomplete, but I meant to say using an HTML-based autocomplete. The HTML5 datalist is not robust enough to handle our "multiple values separated by commas" use case. Since it is done in HTML it cannot overlap the panel border. I can look at using a select box/options and rolling a custom autocomplete solution (the existing one is jQuery based). However, due to "browser in a arrow panel" bugs (see Bug 649144), on Linux, select form fields do not work.

2) By the end of this week there should be a public staging server up that you could try the web code for yourself. If you pair it with a Firefox try server build that philikon generates, you can get the full experience. I'll post instructions to the appropriate lists when that all comes together.

Comment 14

[David Ascher (:davida)]

jrburke: see bz's comment #1 in https://bugzilla.mozilla.org/show_bug.cgi?id=638430#c1, which seems to imply that if we dynamically create the select element, that would work around the bug w/ SELECT elements.

Comment 15

[James Burke [:jrburke]]

A question about Firefox 6 w/ share panel styling, UX guidance/mocks appreciated:

In this twitter UI mock:
https://bug647578.bugzilla.mozilla.org/attachment.cgi?id=526748

It shows some of the tab and the message area colors bleeding to the edge of the panel. This seems to be a targeted OS X style, where the panel background color goes all the way to the edge. However, the standard Windows 7 panels have a distinctive, separate, border around the actual panel content, and the panel content is a light color.

Is the styling approach for panels for Firefox 6 changing in general? What will it look like for Windows?

To help answer those questions, it would help me to see some mocks for how panels should look in Windows, Linux and OS X for Firefox 6 and how the share UI would blend or gets demarcated from the panel border.

Comment 16

[David Ascher (:davida)]

faaborg, shorlander, I think comment 15 is for you.  bumpin' it.

Comment 17

[Alex Faaborg [:faaborg] (Firefox UX)]

There aren't any changes planned for Firefox 6 from 4 that I know of, but one sec while I attach images of the panels so that we can discuss various parts.

Comment 18

[Stephen Horlander [:shorlander]]

Attachment: Share Panel on Various Platforms

(In reply to comment #17)
> There aren't any changes planned for Firefox 6 from 4 that I know of, but one
> sec while I attach images of the panels so that we can discuss various parts.

I have been working on mockups for styling on various platforms. Not quite finished but this is where I am right now.

Comment 19

[Alex Faaborg [:faaborg] (Firefox UX)]

yep, that's exactly my thoughts as well (blue side on windows), but considerably more thorough and meticulously rendered :)

so Vista/7 maintains a border for the iframe, but OS X and XP do not.  As far as I can tell this is technically possible, given this bug (where they are actually filing it as a bug instead of a feature):

iframe with transparent background:
https://bug645814.bugzilla.mozilla.org/attachment.cgi?id=528067

comment:
https://bugzilla.mozilla.org/show_bug.cgi?id=645814#c7

Comment 20

[Alex Faaborg [:faaborg] (Firefox UX)]

Attachment: Ballot Approach for first run

The different social networks and email services are currently fiercely competing with each other, so we should probably try to go with a neutral and random first run/new service ballot style screen.  This is just for the + icon, where we haven't detected that the user already has an account at one of the sites we support.

Comment 21

[James Burke [:jrburke]]

We have a temporary staging server up where you can play with the current state of the web UI. It has some support for OS-specific theming, but it is just a first rough pass to illustrate the concept.

The UI is still very rough and still under development, but the basic interactions/flow are there. To try it outside a special Firefox build, try these web UI-only URLs:

Share panel:
https://f1-staging.mozillamessaging.com/tests/1/chrome.html

Settings:
https://f1-staging.mozillamessaging.com/tests/1/chrome.html#settings

We may have a problem with sending email at the moment, and there are probably rough edges, but should be generally usable.

It does not include the ballot approach faaborg attached, still a dropdown, but I will be moving the UI to the ballot approach. Given that we just have Twitter, Facebook and Gmail in the list now, there will only be 3 choices to choose from.

If you are more adventurous you can try a try-server build of Firefox with the Chrome features. Note that this try server build still has a border around the share panels in OS X and XP.

Firefox try-server build install steps:

I *strongly* suggest using a new/fresh profile for this, since you
will modify some about:config entries, and if you ever use that
profile for the final release, you will be using our volatile staging
server instead of the sleek production server that will be available
later. These instructions also turn off auto-update.

1) Set up a new Firefox profile. Seriously. You'll be sorry later if
you do not. If you do not, you will want to reset the about:config
changes mentioned later.
http://support.mozilla.com/en-US/kb/Managing%20profiles

2) Download the appropriate "try server" build of Firefox with sharing built in:
http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-71e238ebbe8d/

after a few days it will move to this location, and then disappear after about 10 days:
http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/old/[e-mail]-71e238ebbe8d/

Install the build, use it with your special profile, and try out clicking the "f1" icon in the URL bar and checking the Firefox prefs dialog for the share prefs.

If you hit an error with anything, in particular with the share panel,
close that tab and open a new tab to try again. The error flow still
needs some work, but starting with a new tab will reset things.

Comment 22

[Tony Chung [:tchung]]

(In reply to comment #21)
> 
> Install the build, use it with your special profile, and try out clicking the
> "f1" icon in the URL bar and checking the Firefox prefs dialog for the share
> prefs.
> 
> If you hit an error with anything, in particular with the share panel,
> close that tab and open a new tab to try again. The error flow still
> needs some work, but starting with a new tab will reset things.

Thanks for the builds.  Do you want qa feedback on it yet, or this is just something to get folks to get familiar with?

Comment 23

[James Burke [:jrburke]]

(In reply to comment #22)
> Thanks for the builds.  Do you want qa feedback on it yet, or this is just
> something to get folks to get familiar with?

Feel free to send me the QA feedback directly. I expect you will be able to find lots of issues! Depending on how close they are to the UI though, I may not fix them, since I still view the UI in flux. I view this peek more as a way to move the UX conversation forward.

Comment 24

[James Burke [:jrburke]]

Attachment: Intermediate implementation of OS X panel styling

shorlander: Attached is a snapshot of a possible implementation for the panel styling for OS X. There are issues with how some of the UI controls are shown, but the purpose of this attachment is to show the connection with the panel border/arrow and how the backgrounds work.

This differs from your mocks in a few ways:

Your mock had the panel arrow matching the color/gradient depending on if it is over the lighter gray part or not (or at least that is what I assume). However, I believe that arrow can only be one color, regardless of placement. In the attached screenshot, you can see it shows up over the darker tab area, and it can move to different locations depending on where the browser is on the screen.

So we went with maintaining the darker color around the whole panel to have it mesh better. However, I'm not sure how you would want to blend/join the lighter gray in this approach, or if this is what you desire.

Also, the background is completely opaque, where other panels in OS X are a little bit transparent. I am not sure how we can get that done yet, but given that the UI can be a bit busy with form controls anyway, I'm wondering if having it somewhat transparent is desirable.

Comment 25

[Stephen Horlander [:shorlander]]

Attachment: Panel Anchors and Share Panel Styling

(In reply to comment #24)
> Your mock had the panel arrow matching the color/gradient depending on if it
> is over the lighter gray part or not (or at least that is what I assume).
> However, I believe that arrow can only be one color, regardless of
> placement. In the attached screenshot, you can see it shows up over the
> darker tab area, and it can move to different locations depending on where
> the browser is on the screen.

The panels that are attached to the locationBar are typically anchored at the end and hang towards the locationBar instead of away from it.

> So we went with maintaining the darker color around the whole panel to have
> it mesh better. However, I'm not sure how you would want to blend/join the
> lighter gray in this approach, or if this is what you desire.

My thought was to have to just use the native panel color, i.e., the iframe would be transparent, with the sidebar using a darker translucent overlay.

> Also, the background is completely opaque, where other panels in OS X are a
> little bit transparent. I am not sure how we can get that done yet, but
> given that the UI can be a bit busy with form controls anyway, I'm wondering
> if having it somewhat transparent is desirable.

If we do the above it should still pick up whatever the default transparency is. Which is very slight.

It may be that we have to make other changes to the default styling of the panels to make it look better.

Comment 26

[bogas04]

Is there any progress on landing Firefox share to firefox ? Can it land for testing in UX builds?

Comment 27

[Bryan Clark (DevTools PM) [:clarkbw]]

f1 is no longer an active project.  delete these messages by searching for: [closing_f1_project_bugs]