839153 - Work - Design metro/immersive UI for "import data from other browsers"

Status: RESOLVED FIXED

(Firefox for Metro Graveyard :: Browser, defect, P1)

Description

[Tim Abraldes [:TimAbraldes] [:tabraldes]]

See user story in bug 831610.

A user of Firefox metro/immersive should be able to import data from other browsers.  This bug is about designing a UI for that experience.

Comment 1

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Working on the design right now. Based on the user story, this should be a Metro flyout panel. 


Question:
1. If users have IE or Chrome on Windows 8 installed, are we able to import data from them as well? what about your FX classic

2. Do IE and Chrome have different types of available data to import? 
Assuming browsing history, bookmarks, are available for sure. Are preferences, or cookies available as well? 

3. To confirm, this import on FX Metro can be applied to FX classic as well, correct?

Comment 2

[Tim Abraldes [:TimAbraldes] [:tabraldes]]

(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #1)
> Working on the design right now. Based on the user story, this should be a
> Metro flyout panel. 
> 
> 
> Question:
> 1. If users have IE or Chrome on Windows 8 installed, are we able to import
> data from them as well? what about your FX classic

I tested our importing of other browsers' data by doing the following:
  1) Move my "Mozilla" directory out of %APPDATA%
  2) Launch Firefox
  3) The import wizard dialog appeared, so I selected a browser and hit "next"
  4) Once Firefox launched, I checked that the browsing history from the other browser was available in Firefox

We can already import data into FX desktop using the steps above.  When bug 838890 is resolved we'll be able to import that same browser data into FX metro/immersive.  Even once bug 838890 is resolved, we won't have a way to get FX desktop browser data into FX metro/immersive or vice versa, except through sync.

> 2. Do IE and Chrome have different types of available data to import? 
> Assuming browsing history, bookmarks, are available for sure. Are
> preferences, or cookies available as well? 

When I tested this, the wizard imported "Internet Options, Cookies, Browsing History, and Favorites" from Internet Explorer, but only "Cookies and Browsing History" from Chrome.

> 3. To confirm, this import on FX Metro can be applied to FX classic as well,
> correct?

Yup!

Comment 3

[Asa Dotzler [:asa]]

I worry about how many sidebar style flyouts we can stack up here. The user swipes in the charms bar (a kind of flyout) then taps the settings charm to get the Windows settings panel for Firefox (a kind of flyout) then taps the Options link in the settings panel to trigger the Firefox Options flyout and then taps Import to get the Import flyout? Does that feel right to you guys?

I wonder if both Sync setup and Import are better listed at the Settings flyout level rather than a layer deeper in our Options flyout.

I believe that we'll eventually have an "Account" or similar flyout hooked up to that top level in the Settings flyout that will be wired up to our next generation Sync stuff and perhaps that's where other profile actions, like clear private data and import from other browsers, should live. If so, maybe we create that space now and put our profile related features there. Thoughts?

Comment 4

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

I worried about the same thing while designing the Sync flyout. Sync flyout itself has a deeper level, so does the Import flyout.

Having "Account" on the top level makes great sense but we are not ready to have it at this stage. "Profile" could be a confusing term. Because desktop users might relate it to the profile manager. 

If we cannot find a better term(preferably one word) to summarize "Sync", "Import" and related features, I am okay with just leveling up "Sync" and "Import" to the top level. And move them into "Account" flyout once we are ready for it.

Comment 5

[Asa Dotzler [:asa]]

(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #4)
> I worried about the same thing while designing the Sync flyout. Sync flyout
> itself has a deeper level, so does the Import flyout.
> 
> Having "Account" on the top level makes great sense but we are not ready to
> have it at this stage. "Profile" could be a confusing term. Because desktop
> users might relate it to the profile manager. 
> 
> If we cannot find a better term(preferably one word) to summarize "Sync",
> "Import" and related features, I am okay with just leveling up "Sync" and
> "Import" to the top level. And move them into "Account" flyout once we are
> ready for it.

So our access points in the Windows Settings pane for Firefox would be: 

Options
Sync
Import
About
Help (online)
Permissions

That seems reasonable to me. It also seems well within the recommendations from Microsoft http://msdn.microsoft.com/en-us/library/windows/apps/hh770544.aspx

That being said, I don't want to push this up a level if we don't need to. Maybe it's OK to let them stay inside Options if the transition one level deeper doesn't feel awkward. I think it does feel awkward as a modal Message Dialog. Maybe moving to its own Flyout would be good enough.

Comment 6

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

First, Sync and Import will not be displayed as modal dialogs. 
Second, deeper flyout is acceptable in Settings, but not encouraged for content like Options. I just walked through many Options flyout on Windows 8. None of them contains deeper flyouts.

That being said, my viewpoint is
Sync should be leveled up to entry point, since it will definitely contain deeper flyouts. (Positive, since the new design is almost complete)

Import could be kept in the Option panel. 
Its flow is not as complex as Sync's. I believe it's possible to design Import UI without adding a deeper flyout.
Also, Import browsing data actually doesn't require any account. It could be misleading if we end up including it in the "Account" flyout.

Thoughts?

Comment 7

[Asa Dotzler [:asa]]

(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #6)
> First, Sync and Import will not be displayed as modal dialogs. 
> Second, deeper flyout is acceptable in Settings, but not encouraged for
> content like Options. I just walked through many Options flyout on Windows
> 8. None of them contains deeper flyouts.
> 
> That being said, my viewpoint is
> Sync should be leveled up to entry point, since it will definitely contain
> deeper flyouts. (Positive, since the new design is almost complete)
> 
> Import could be kept in the Option panel. 
> Its flow is not as complex as Sync's. I believe it's possible to design
> Import UI without adding a deeper flyout.
> Also, Import browsing data actually doesn't require any account. It could be
> misleading if we end up including it in the "Account" flyout.
> 
> Thoughts?

OK. Let's move Sync up to the top level (under the Options item) and when we get a better Sync which is more about actual Accounts, we can re-arrange to suite. We can leave Import in if you have a design that''s not a modal Message Dialog or a deeper Flyout.

Comment 8

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: [Mockup] Import from other browsers

Comment 9

[Tim Abraldes [:TimAbraldes] [:tabraldes]]

The mockup looks great Yuan!

I've started implementing this in bug 839155.  I'm wondering if you think we can reuse some of the strings in [1] instead of creating new strings.  That way we reduce the burden on our localizers.  Check out bug 839155 comment 2 for a screenshot of what I've got so far.

[1] https://mxr.mozilla.org/mozilla-central/source/browser/locales/en-US/chrome/browser/migration/migration.dtd

Comment 10

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Good job landing the v1 Patch, Tim!

I think we should reuse the strings of browser names, "Microsoft Internet Explorer", and "Chrome" for sure.
Also, we could add the string "Importing..." by the spinner while data is being imported to metro. And I am okay with showing "Import Complete" instead of "Done!", if that makes the implementation easier. 

New strings
Label on the action button: "Import"
Title: "Import From Other Browsers"
Description: "Choose browsers and types of data to import"

The old strings make sense on desktop. FX can provide different strings for each step since the flows walk the users through multiple windows. But on Metro, the option panel is basically one single flat form. The concept of "Wizard" doesn't really exist on Metro layout.

Current title on Patch v1: "Import Options, Bookmarks, History, Passwords and other data from:" is clear about the types of available data, but not clear on communicating the users also have a choice.

In conclusion, unlike desktop, on Metro we can only use one sentence to inform the users two actions, "choose browser", and "choose type of data". It's necessary to use new strings, in order to communicate that message.

Let me know if there is any question :)

Comment 11

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

A note for Rodrigo Silveira. 
On the mockup I attached, "Import From Other Browser" is the middle of the content. 
We are moving this section to the end of the content. Please see this attachment: https://bug845484.bugzilla.mozilla.org/attachment.cgi?id=718567 

All the behaviors still remains the same.

Comment 12

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Seems like the implementation of importing browser data has been put on hold. 

But I believe the UX design work has been complete, so close the UX work bug now. Could reopen it if there is any upcoming change.