The discussions regarding my proposal for inclusion of Conduit into GNOME 2.24 seem to be going OK. The inevitable issue of Conduit’s user interface has been raised, and it is good to see some constructive comments being posted.
It is a bit of a simplification, but I see basically three schools of thought with regard to the user interface for synchronizing things. What follows is a brief discussion of the pros and cons of each approach.
- Everything should be automatically configured, and the current Conduit user interface should cease to exist - synchronization functionality/UI should be put into the respective application, calling into Conduit over DBus.
- While I agree in theory, there is a enormous divide between theory and practice. For the foreseeable future it is not going to be possible to auto-configure synchronization parameters for all mobile devices. This is in part due to quirks in the devices, and in part because its sometimes not possible to enumerate all the things that a device supports without first configuring/pairing/connecting/etc with it.
- Many web services require a authorization step, either once per application, or once per session. To make this easier on the user, Conduit hosts its own web browser for showing the login dialog in a consistent manner. I believe that this is the least surprising result to the user, if they sync something in conduit, the authentication should be done in conduit, not in the users default web browser, where they may not immediately recognize that it is Conduit that requires the authentication. Until we get some more online-desktopy stuff into GNOME (sharing auth cookies, authenticating services, etc) I think our approach is a good one.
- I think it is important to have a single, consistent interface for resolving conflicts, this is currently in the Conduit GUI, but perhaps we could export it over DBus, like we do for the configuration dialogs.
- Doing everything in other applications, reduces Conduits power to the lowest common denominator of these applications. Some of the cool power of Conduit is in the synchronization partnerships you can create that are not even tied to an application. For example, its possible to configure a ’sync’ from Youtube, onto your iPod, that downloads and transcodes videos from you favorite user/channel. In what app would something like that go?
- The conduit GUI should be simpler once you have configured everything.
- This is the approach I agree with the most. I think. This could potentially involve some sort of minimize/maximize type button that when pushed, would collaps the main canvas down into something like the iSync user interface.
- While I quite like that approach, I would almost rather implement an entire second GUI using only the Conduit DBus interface. This is the approach being persued by Alexandre (SOC student working on iPod support), and by John Carr (for a simplified windows mobile experience)
- It was also suggested to make configuration easier, we should try gtk.Assistant.
- Redesign the entire UI
Redesigning the Conduit GUI
Today I decided to work on improving the current UI based upon some feedback on desktop-devel-list. First I spoke with my user interaction designer friend, and asked her what she thought. After 15 minutes of talking to an imaginary person that did not exist (any volunteers to be my interaction designer friend?) I decided to instead make some incremental improvements to the current UI. Some people may see this as re-arranging deck chairs on the Titanic, but hey, what have I got to lose?
The first step was to use the current theme colors. After a bit of looking around, I couldn’t actually find a simple way to see what these were, so I wrote a quick application that draws color swatches for all the theme colors, in each of the widget states. If anyone wants so play with it, the code is available from my git repository.
Rounded rectangles make anything pretty.
With an idea of what colors are actually present, I changed the Conduit and DataProvider colors to use sensible colors from the theme. I also implemented some subtle gradients to make things a bit more GNOME.
Just kidding.
The result turned out pretty nice I think. This is the first time I have actually tried to make a custom widget match the user theme, and it was not too painful. One annoying limitation is that I only seem to get access to the matching style, but I would quite like to use colors from the tooltip style. It also gave me the opportunity to remove some UI clutter; I no longer show sources and sinks in different colors. Anyway the final result was;
Beautiful in brown, blue and black.
When I said subtle I really meant it. I would really appreciate it if a talented artistic hacker had a look at the code, and experimented with some more creative gradient settings. The function in question is get_style_properties which lives in conduit/gtkui/Canvas.py, and is implemented in all CanvasItem derived classes.
I then moved onto experimenting with waking the user through the sync and configuration process. I did some experiments using the Gedit message area to suggest steps the user could take. Thanks to Colin and HotSSH for the widget. Im not sure about this one.
Too much like Clippy?
Mathias suggested a visible drop target. I think this will be my next challenge. I also did an example implementation showing what the Conduit UI would look like if the outer, grouping, rounded rectangle was removed. Now a simple line differentiates different between conduits. What do you think?
Now with 29% less rounded rectangles.
Summary
- I’m pretty happy with the themed colors. The work is available in my bzr branch, and will make it to trunk soon
- bzr branch http://bzr-playground.gnome.org/~jstowers/conduit/devel
- There is continued discussion regarding UI ideas happening on live.gnome.org
- My Gtk theme swatch too is available from
- git clone http://gist.github.com/49799
- There will be a Conduit UI, of some sort, for the forseeable future. Lets spend some time making it better!
Updates
- Fixed BZR Urls.
- Added an example showing what Conduit look likes using a dividing line to differentiate dataproviders.
- The theme swatch utility has been moved to github
as a user with a dark theme, thanks for testing with one: a lot of applications sometimes just assume a white/light background and break the visual experience. in the dark theme, though, the text is black on dark grey, which is not really readable.
Since your are treading amazing new grounds, it’s not like conduit is a clone of some other app. I guess all our guestimation on ddl is well, just guesses. At least mine
So instead of asking us, ask users! Sit down with a user and give them som predetermined goals to complete, and watch their interaction with conduit with the minimum amount of help. Similar to the novell videos.
Sorry can’t help it, one more guess from me. Maybe seperating online services, with device/local sync? It’s probably much the same internally. But maybe it’s easier to quantify a GUI with a simpler goal?
PS: The way you handle critique of you own work is an inspiration
@Emmanuele: I Just tweaked it a bit more. This should be fixed in BZR now.
@Frej: Thanks a lot! Unfortunately all my computer user friends have already been bothered. I need new friends…
Hi John
I would like to help actually, I could be a friend
this could help me look more into the conduit code.
I was thinking of creating some widgets for conduit that could be used outside conduit in other apps (mayanna etc) that communicate via d-bus with conduit.
You Sir, rock.
Keep on it!
another approach would be
creating a quick sync wizard
thus leaving the current UI as a advanced sync method
Wizards vs. Message Area: I personal much prefer the message-area approach because it removes the mental “context switching” that a separate wizard-window requires.
Because the “led by message-area” activity is /identical/ to the “I know conduit so I’m ignoring the message-area” activity, it’s easy for a user to go from “newbie” to “advanced” … pretty much as soon you’ve set up a couple of source and sync targets.
The only thing that I currently really consider a blocker are the accessibility issues that conduit has (yes, it has been discussed on the mailing list). Any plans to improve this soon? :-/
Seconded Seif Lotfy, quick sync wizard for guided configuration and current UI as advanced listing of syncs. Such combination would rock socks off from other sync tools.
what do you mean with Message Area?
by the way
another thing i would like to hack on is a drag and drop functionality.
dragging a file over the conduit icon in the tray should open a “message box” or wizard asking you where would u like to upload this file to?
somehow i think its the quicker solution to uploading single files
What do you guys think about adding a nautlius script for conduit
I like the original theme better, than what’s done with themable conduit + clearlooks.
far too dark in the background for every conduit.
Hey john, good work!
Btw, I think you should take x/y thickness into account as well for the square borders and the arrows.
@john: rock! the message area as a guide is also rocking: a wizard is really intrusive, while the message area on the bottom of the window is a true learning tool to make the user more productive - kind of like a tutorial for a game. like Mathias said, adding “hollow” elements where you’re supposed to drag the data providers would also be a huge step forward.
RE: message-area — from the post: “I then moved onto experimenting with waking the user through the sync and configuration process. I did some experiments using the Gedit message area to suggest steps the user could take.”
It looks like a little panel below the canvas in the last screenie above.
Drag-and-drop from “external” would be very nice, as would visible drop targets for sync items. And I’d definitely use nautilus actions/scripts.
First, thanks for a great app!
From an artistic point of view I think the UI is cluttered. This is in my opinion primarly due to the overuse of icons, the bold borders around shapes and too round corners. I would suggest to make border thinner, fill shapes with gradients (taking the base color and the same color with some slight modification to the saturation value of the color), make the the roundness more subtle. When it comes to icons I would suggest that you use grouping, color (different color for different types) and shapes (same as with color, depends on what looks best and easier to grasp) to convey the type of items instead of adding icons.
Also I suggest you get rid of the container boxes and use maybe a line to separate the different synchronizations. I think it would be even better to to break the right side into two parts one containing a list (table) of named syncronizations and a “preview” or edit area below to show the boxes etc were you can drag-n-drop boxes etc in. This way it’s much easier to get a good overview of syncrhonizations one have.
I web a little idea : why
When you put a datashink ( like http://www.johnstowers.co.nz/blog/wp-content/uploads/2008/07/msgarea.png) on the canvas,
See only dataprovider “compatible” on the left of the gui.
Ps : i also like the “gedit messages” for help.
I have used Conduit every days for several months and wrote about you back in April(?) when you originally made the request to be included in Gnome, and I called you a long shot for the reason that Gnome didn’t want to include you for accessibility reasons. In your e-mails with them, you stated that you were waiting on a new canvas (which is now likely to never come …).
My question is “Have you solved these problems with accessibility?”
I strongly agree with an earlier commenter that a simple line between the different conduits would be more than sufficient instead of surrounding them with a bold black border and filling them with the selection color from the theme. The rectangles being filled with a dark blue/brown/black color is very odd. That color normally represents an active selection, not a divider. Also, I think the thick black borders should be dropped altogether. The borders in the canvas UI should be 1px, a darker version of the fill color, and be rounded about as much as the tabs in default clearlooks. See the selection rectangle from Banshee’s browser for an example. GNOME UIs are generally light and have enough whitespace to flow nicely. Conduit’s use of thick lines creates a visually confusing grid of divisions that don’t do much at all to aid the user.
User perspective: Conduit UI is currently an “advanced” configuration tool
Correct me if I’m wrong, but isn’t Conduit also meant for one-time syncs as well? I don’t understand how that would work in the current UI
My idea of how conduit would work assuming mentioned applications use Conduit to sync:
- Attach Phone to computer
- open Banshee, where phone shows as external source
- drag playlist from library to phone, Conduit dialog asks if I want to always sync to playlist
- open Contacts (Pimlico) - choose sync contacts from menu
- dialog opens with single element of above UI showing contacts as source (with option to make target) and potential targets on left. A tick box for always sync would be present. A “Advanced Setup” option could be present as well. Sync!
another option to all the application integration is a nautilus left click option to sync phone/iPod, which would bring up a UI with only supported sources available, checking off which ones you want synced.
Another example for transferring a movie to Youtube: there should be a left click option in nautilus to “post online” or “upload to..” - file would be recognized as a video and a dialog would offer the supported video sites.
basically the current UI is overkill for the majority of user operations, especially when considering one-time sync. Although the full power should be underneath, users like me don’t want to see all the choices every time. We want to see the options that make the most sense for that operation and then be able to dive deeper if what we want isnt there.
think “dynamic focused workflow” rather than “hears everything you can possibly do”
PS: wouldnt Conduit also fill a much needed niche of a good integrated backup tool for Gnome?
What Brad Griffith said!
USB printers plug in and just work. There is also a separate application for viewing and managing some more obscure options that we computer dorks love and always use. Most users do everything they need to from the print dialog. So should it be for device sync. That’s what users expect from something that is part of Gnome, that you can plug it in and use it from your application right away.
The GUI could use some help but a decent Users Guide would be better. Something that explains what each source/sink does and how to properly configure it. What to expect when syncing to/from different sources/sinks. Not all source/sink combinations make sense. If I am creating a new sync group how do I know which sink works with what source? Some simple documentation would go along way!
You should move the message to the top instead of the bottom. Gedit en firefox place it in the top so users are used to that.
very cool colour preview app mate.
Thos should totally include that as the default interface for editing colour classes in gtk themes