New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve widget for multi-backend usage #795

Closed
skddc opened this Issue Oct 14, 2014 · 32 comments

Comments

6 participants
@skddc
Member

skddc commented Oct 14, 2014

Currently the widget is not very usable when enabling Dropbox and/or Google Drive.

@skddc skddc changed the title from [dropbox] Improve widget for multi-backend usage to Improve widget for multi-backend usage Oct 14, 2014

@skddc skddc added the widget label Oct 14, 2014

@skddc

This comment has been minimized.

Member

skddc commented Mar 21, 2015

Just found this on my hard drive, taken from a Web app I don't remember:

screenshot from 2015-02-04 12 22 15

I think this makes a lot of sense. In the app you should just direct the user to "sync" or "store" something in general, and then the dialog can tell you the options. No need to show logos in a corner all the time.

@skddc

This comment has been minimized.

Member

skddc commented Mar 22, 2015

FYI: 5apps is sponsoring work on the widget. I already created a pull request here: opensourcedesign/jobs#16

@michielbdejong

This comment has been minimized.

Member

michielbdejong commented Mar 25, 2015

Yes, good point! Especially if we add more and more logos (Hoodie can already be added, and maybe ownCloud in the future). The first click can then just by an icon that means 'sync', and could use generic offline-first sync icons

@skddc

This comment has been minimized.

Member

skddc commented Mar 25, 2015

Hoodie can already be added

There's a remoteStorage interface to Hoodie now?!

The first click can then just by an icon that means 'sync', and could use generic offline-first sync icons

Yes, or whatever fits best in the app, based on the use case. It may want to ask you directly, it may want to have a button in the settings, it might want to always show the icon somewhere (hard especially on mobile e.g.), etc.

@michielbdejong

This comment has been minimized.

Member

michielbdejong commented Mar 25, 2015

No, but Hoodie is a cross-origin protocol. So the widget could say 'GoogleDrive, Dropbox, your remoteStorage, your Hoodie, local filesystem, zipfile-download, etc'

if apps have their own 'connect' icon then they also need their own 'busy syncing' icon

@skddc

This comment has been minimized.

Member

skddc commented Mar 25, 2015

No, but Hoodie is a cross-origin protocol. So the widget could say 'GoogleDrive, Dropbox, your remoteStorage, your Hoodie, local filesystem, zipfile-download, etc'

I don't believe that makes a lot of sense. It would mean the widget includes code for other libraries that aren't included in rs.js, and including 2 different sync libraries. You'd have to hot-load and cache the sync library code then, if you don't want your dependencies to both grow considerably in size as well as potentially conflict with each other.

Anyway, that's a topic for another day I guess. I agree that the design should support potential new options from the start, although I personally would rather see options disappear and end up with only remoteStorage in the end, of course. :)

@skddc

This comment has been minimized.

Member

skddc commented Mar 25, 2015

if apps have their own 'connect' icon then they also need their own 'busy syncing' icon

Remember, this is optional! You should always be able to just throw the widget in there I think. No?

But yes, the goal should be to separate the whole widget from the core library asap, and make it entirely optional, so that app developers can implement their own UI for everything, and the widget is just a consumer of events, same as an app with custom sync UI is.

@michielbdejong

This comment has been minimized.

Member

michielbdejong commented Mar 25, 2015

I agree we should split the widget from the rest, even if it's just in the interest of code maintainability, and maybe also remotestorage.js is not the right name for a user data sync client that supports ever more backends.

We should remember what the initial thoughts were in creating both the widget and the logo: the user should have a standard way to connect their remoteStorage, which the end-user recognizes. That same line of thought can apply to a multi-backend widget.

But now, since it will be a multi-backend widget, it would be a generic "sync widget", not a specific "remoteStorage widget", so it could even make sense to move it out of the remotestorage org - maybe move it into the offlinefirst org? or to its own org? I think such things influence how we think about where we want the web app platform to go, and it's a useful evolution.

Btw, I hope one day this widget will become a device-level thing. I will try to help Firefox OS and other platforms to one day have a very similar "connect your storage" dialog from the device settings, and/or from the device first-use wizard. So then apps don't need to display the widget (the device will take care of everything). The widget is then for platforms where such device-level sync is unavailable.

@michielbdejong

This comment has been minimized.

Member

michielbdejong commented Mar 25, 2015

Or to the 5apps org actually - if 5apps are sponsoring its redesign, and it is a generic sync widget for client-side apps (not specific to remoteStorage), then that might also make sense. The only repos that should really stay in this org are spec, remotestorage.io, design, modules, and maybe starter-kit.

@skddc

This comment has been minimized.

Member

skddc commented Mar 25, 2015

I think you're going a bit far there. We neither have the resources nor the reasons and/or incentives at the moment to make this thing independent from the core library. It is merely an add-on, extending the core library with optional connect and sync UI. (Actually first and foremost improving the existing one.)

Let's first fix it for our own project in the best way we can! If people (including you) are then interested in using it in other projects, they can then do that if and where they think it makes sense.

@skddc

This comment has been minimized.

Member

skddc commented Apr 2, 2015

Everyone, please welcome @gillisig -- master of UX, creator of UIs, and slayer of the connect-widget dragon! :D

@gillisig I just deployed a test version of Webmarks with the other backends enabled, as promised: https://webmarks-dev.5apps.com (might be slightly buggy, as they're still experimental)

Feel free to also create issues in https://github.com/remotestorage/design of course! Also, we can create another new repo for the actual widget code when the time comes.

@gillisig

This comment has been minimized.

Member

gillisig commented Apr 3, 2015

Thanks @skddc and hi to the rest of you.

Thanks for the test version, I'll check it out. Can't wait to get started next week! :)

@gillisig

This comment has been minimized.

Member

gillisig commented Apr 16, 2015

Alright guys, I have finished the initial mockups for the new widget, I uploaded the results to InVision to make it easier to communicate my thought process behind the decisions I took. Check it out here: http://invis.io/GK2PZM3E2

I tried to make it as clean and simple as possible, adding a little help text for users who are not familiar with Remote Storage. Which I wasn't when I started working on the project, so I think it gave me a nice insight into the troubles a new user might encounter.

You can click and interact with the mockups along with reading and writing comments on individual parts in InVision and I encourage you to do so. But be aware that mockup is a bit rough around the edges in some parts. I plan on adding nice hovers, transitions and so on when I build it in html.

When making comments please try to focus on making arguments that will improve the experience and stay away from personal preferences on color and other trivial things. Put yourself in the mindset of an average user and focus on things that would make it easier for them to use the widget.

Thoughts & ideas.

I wonder if, for some apps at least, it would be better to skip the first screen and go straight to the second screen where you choose the storage to use. Especially when the app won’t function well without remote storage, then this screen should maybe appear and block you from using the app before picking a storage.

I added quick explanation texts for the first and second screen to help the user understand why they should actually connect to remote storage. If you have any suggestions for better copy that would explain it better go ahead and suggest it.

@silverbucket

This comment has been minimized.

Member

silverbucket commented Apr 16, 2015

Looks great! One problem I've had in the past with an upper-right horizontal menu is that when you design an app with a title-bar of buttons, on mobile devices the remote storage banner text makes the app unusable until you manage to get it out of the way. I've had to hack at the widget in the past to change this, but I'm wondering if there wouldn't be a better way to "stay out of the users way until they want to interact"...

@skddc

This comment has been minimized.

Member

skddc commented Apr 16, 2015

I'm dancing around the table, because of how great this is as an improvement to the current design and how well it works with an arbitrary number of storage backends. Great job!

Regarding @silverbucket's comment and what @gillisig and I already talked about, this is obviously only the solution for one of the scenarios, i.e. "app using all parts of widget on desktop". We also need to support, "app using all parts of widget on mobile", "app using only connect on desktop/mobile", and "app not using widget". The latter is obviously only work on API, events, and under-the-hood stuff, whereas the former has to be done within the process of extracting the widget to its own add-on library, as we intend to do.

In case this one's unclear, "using only connect" would usually mean that you have sth about sync in the settings or otherwise integrated in your app's UI, but you can programmatically open the connect UI and take over again with custom UI as soon as that part has been done by the user. Naturally, both mobile and this use case lend themselves to modal overlays or similar.

@galfert

This comment has been minimized.

Member

galfert commented Apr 16, 2015

Wow, this looks really great. The only minor issue I had was that the icon of the disconnect button (the thunderbolt) reminded me more of a sync conflict. I wouldn't have thought right away that it's for disconnect/logout.

@skddc

This comment has been minimized.

Member

skddc commented Apr 16, 2015

Ah, same here actually. :)

@silverbucket

This comment has been minimized.

Member

silverbucket commented Apr 16, 2015

It (thunderbolt) reminded me of the google chrome plugin that lets you know if the server is using QUIC or SPDY protocols :)
https://chrome.google.com/webstore/detail/http2-and-spdy-indicator/mpbpobfflnpcgagjijhmgnchggcjblin?hl=en

@michielbdejong

This comment has been minimized.

Member

michielbdejong commented Apr 16, 2015

Great job! super improvement over what we had so far.

Glad I'm not the only one who didn't get the thunderbold icon :)

@gillisig

This comment has been minimized.

Member

gillisig commented Apr 16, 2015

So glad to hear you guys like it!

One problem I've had in the past with an upper-right horizontal menu is that when you design an app with a title-bar of buttons

One possible solution we could consider, if the app really wants to use the floating widget, is to add optional CSS classes to the widget that position it in one of the other corners instead.

The only minor issue I had was that the icon of the disconnect button (the thunderbolt) reminded me more of a sync conflict. I wouldn't have thought right away that it's for disconnect/logout.

Haha good point, we can change it back to the "power button icon" that is currently in use. Or maybe to cables connecting?

@gillisig

This comment has been minimized.

Member

gillisig commented Apr 20, 2015

Here is a quick little update for mobile devices: https://projects.invisionapp.com/share/GK2PZM3E2#/screens/74047465?maintainScrollPosition=false

The widget would be a part of the dom and can be placed anywhere the developer sees fit. The floating icon version would be optional, so you could easily choose which one you want when adding the code to your app. I think it should always go back to being a part of the dom on mobile devices though.

P.S. Ignore the thunderbolt ;)

@silverbucket

This comment has been minimized.

Member

silverbucket commented Apr 23, 2015

I like it! I think it makes sense to make the dialogue / interaction full screen for mobile.

I'd like to be able to just have the widget icon and nothing else, though, when it's authenticated and working fine. instead of an info display.

when you click, it'd go fullscreen and show sync info (username, synced 2 min ago, etc).

@DaliusStuoka

This comment has been minimized.

DaliusStuoka commented Apr 30, 2015

Hey guys,

Did you mean something likes this? (attached below)

mockup

@skddc

This comment has been minimized.

Member

skddc commented Apr 30, 2015

Yup, thanks!

@gillisig

This comment has been minimized.

Member

gillisig commented May 5, 2015

rs-interaction-5

Okay guys I finally have the code up and ready, you can see a quick overview of the interactions in this gif above. And you can play with it yourself here:

Notes

I abandoned the clip-path around the icon since browser support is not so great. It would also have been some trouble to make it responsive. But instead I got a chance to use the icon more in the interactions by making it move to the center and draw your attention to the text that appears below.

The floating version goes back to being a part of the page flow on mobile, since I believe it would be obstructing the interface in majority of cases otherwise. So you would have to place the code in a good place even if you are only using the floating one. It also fills up the entire screen on mobile devices when selecting storage and signing in.

I used the "fill" css property to color the svg icons, but I am not sure how the browser support for it is and I couldn't find much about it online. it seems to work fine in Chrome, Firefox and Safari but if anyone knows of any issues, let me know.

Depending on how the logo redesign will turn out, we can possibly use the icon to indicate loading by animating it in some way, like when connecting to remote storage for example.

Connection errors are not currently implemented but I was thinking we would implement them by changing the logo color and replacing the "Synced x min ago" with the error message (in red).

Please go ahead and test it thoroughly on your devices and let me know if you see something odd.

@skddc

This comment has been minimized.

Member

skddc commented May 6, 2015

@gillisig Haven't looked at the code yet, but just one thing upfront: in order to easily replace the current widget in most RS-enabled apps, we definitely need a version with just the cube icon and the expanding bubble. Do you still plan to add that version still?

Another question would be if we want to keep showing the remoteStorage icon even for the other storage backends, while they are connected. I personally think that's not even a bad idea, as it makes people familiar with the icon, although it might be bad that they associate e.g. Dropbox sync with it, too. Maybe other people can state their opinion on that detail?

@galfert

This comment has been minimized.

Member

galfert commented May 6, 2015

Another question would be if we want to keep showing the remoteStorage icon even for the other storage backends, while they are connected. I personally think that's not even a bad idea, as it makes people familiar with the icon, although it might be bad that they associate e.g. Dropbox sync with it, too. Maybe other people can state their opinion on that detail?

Good point. I think I would like to still show the remoteStorage icon. But maybe with a small version of the other icon in the bottom right or something. That way you still know that you are actually connected to e.g. Dropbox.

@gillisig

This comment has been minimized.

Member

gillisig commented May 6, 2015

we definitely need a version with just the cube icon and the expanding bubble.

I think the floating version should be pretty similar to the one already in use, it ends with only the cube and expands on click.

@skddc

This comment has been minimized.

Member

skddc commented May 6, 2015

Oh, stupid me. Should've checked out the examples, of course. Nice solution!

@gillisig

This comment has been minimized.

Member

gillisig commented May 6, 2015

I just added some text to the floating version to make it more obvious that it is floating over the content :)

@gillisig

This comment has been minimized.

Member

gillisig commented May 6, 2015

Oh and I got it up on github here: https://github.com/gillisig/remotestorage-widget

@skddc

This comment has been minimized.

Member

skddc commented May 8, 2015

Alright, as everyone seems to be fine with the current design, let's do it! :)

Closing this in favor of #862.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment