1541743 - Better explanation text and graphics required for FileLink preferences page

Status: RESOLVED WONTFIX

(Thunderbird :: FileLink, enhancement)

Description

[Geoff Lankow (:darktrojan)]

Attachment: Please fill this space

Since we've put a lot of effort into FileLink, and I think it deserves better than a big empty space with the text "Add a new FileLink storage service". Actually, because of the recent changes that text shows up a lot more than it used to.

In my mind, there's a picture explaining FileLink – people and/or computers on either side, a cloud in the top centre, plus a series of arrows:

1. File goes from Person A to cloud
2. Link comes back from cloud
3. Link is put in an envelope and sent to Person B
4. Person B sends link to cloud
5. File sent from cloud to Person B

I could make this myself but someone could probably do a better job and in less time. Just remember that the space in question isn't always as wide (never wider) or the same height.

Comment 1

[Alessandro Castellani [:aleca]]

I can quickly draw a sketch so we can define the scene, and when we're all satisfied, I can make an SVG of it.

Comment 2

[Alessandro Castellani [:aleca]]

Attachment: file-sharing-sketch.jpg

What do you think about something like this?
Please, ignore the spacing, alignments, etc. as it was a super quick sketch I did in few minutes.

It'll need a bit more space and better balance between elements as it feels really cluttered now, but this is the general idea.

Thoughts?

Comment 3

[Geoff Lankow (:darktrojan)]

I wanted to show the right-hand side retrieving the file the left-hand side put in the cloud. So the arrows in the top right corner should be the other way around and have the same file as the left. Also the mail from right to left isn't needed.

I'm getting a better idea of how I think this should look. I might mock something up myself.

Comment 4

[Alessandro Castellani [:aleca]]

Oh, I see, yeah, what you want to represent is a one-way-transfer, instead I mocked both computers doing the same thing.
I will update the sketch, but if you could mock something quickly to give me a reference it would be awesome.
Cheers

Comment 5

[Alessandro Castellani [:aleca]]

Attachment: sketch.jpg

Updated the sketch to reflect the proper workflow.
What do you think?

If you like the setting I could iterate a bit to create an initial render with more accurate positioning and sizing.

Which style should we use for this?

Comment 6

[Geoff Lankow (:darktrojan)]

Attachment: cloudfile.svg.png

Here's a rough scribble of the style and layout I had in mind. I'm using the existing colour palette from the page (not the provider icons, it's a coincidence those are similar colours) and really simplified images. Partly because I couldn't be bothered adding more detail, and partly because it's unnecessary.

I think we should animate it or have a series of slides to explain the steps. I can do either if I have the moving parts and layout sorted. So basically, can you draw a better version for me?

Comment 7

[Geoff Lankow (:darktrojan)]

I didn't show it, but I'd want to have a localised explanation text of each stage, either in the middle or at the bottom. Probably the bottom, given that some languages take up a lot more room than others.

Comment 8

[Onno Ekker [:nONoNonO UTC+1]]

I wouldn't clutter the image with several text strings, maybe only a More info link pointing to a support article.

Comment 9

[Alessandro Castellani [:aleca]]

I agree with Onno.
I'd recommend to keep it simple and avoid unnecessary complexity.

A cloud file sharing option is a pretty common feature which doesn't need text explanation or animated slides to show its function. For those who don't know what that is, a simple abstraction of the workflow like you represented, it's enough to communication the purpose.
Adding text, multiple slides, and animations, only adds complexity to a section that will be seeing only once and for a few seconds.

I can definitely elaborate on top of your sketch if you want.
Which style should we adopt? A flat and monochromatic style, or an isometric 3d simple rendering?
Are there any other illustrations around the Mozilla or Thunderbird ecosystem which we want to maintain the consistency with?

Comment 10

[Richard Marti (:Paenglab)]

https://hg.mozilla.org/mozilla-central/raw-file/tip/browser/themes/shared/incontentprefs/sync-devices.svg is an example what FX uses in their prefs.