New interface design

I disagree - The current GUI has a “xx %” info and a progress bar. The new GUI does not show anything unless you hover somewhere to get some (not all) information.

That’s not what I meant. I mean where do you display all the identicons (still a bad idea to use them) if a folder is shared with more than 3 devices? does the row expand in height or do you hide them?

This was meant as a hint to focus you on what is important: the folder and the status. Removing the device list from the GUI and hiding it is a wrong, I think.

I really like your approach, but removing the devices from the default view drastically complicates getting an overview of the current status. This however is critical for most usage scenarios. For example if I have several devices and want to make sure that a certain device receives the updated files I have to check the following:

  1. The device is connected
  2. The file lists are synced
  3. There are no running transfers

If those facts are met, I can be sure that the intended recipient is in the same state as my current device.

Without the device overview there are only the identicons to make sense of the icons. This means I’ll probably have to hover over several of them to make sure the intended recipient is online.

The current (and your original) design also allow me to guesstimate how long it will take until a device is in sync. The approximate remaining time would make a lot of sense for the hover popup I think.

I think the following improvements should have priority:

  • The information in the size tab would be significantly more interesting if I knew that I have 8.5GB/10.2GB as Brennan suggested. If global state==local state we should just show it once.
  • Allow people to assign laptop/desktop/server/phone icons to devices and show the first character of the name. Paul’s laptop would then be a laptop icon with a P in the center. The colors should still be used to indicate the state.
  • A good way to indicate sync progress close to the icons. By now I think a little horizontal bar would be the best option. The exact percentage can be shown on hover.

If we get those device-type icons to be really easy to recognize even with many devices, we can probably get rid of the device bar. But this also means that the current transfer speed to/from a device must be easily accessible.

If we don’t remove the device bar alltogether I’d like to try putting it on the right where it resides in the current layout.

Yeah you are right, I guess the previous one is definitely more clear so we should stick to that one :smile:

Ah yes, that one will definitely be there, I forgot to implement it.

I did make some quick mockups on this but it didn’t come out right. But I will definitely try again, since I agree that these identicons are not so great at telling you exactly what devices are linked to that folder.

I kinda like the idea to remove the device bar, because it makes the UI very intuitive. But we have to make sure that it doesn’t make the most common use cases any harder to accomplish. At best it would speed them up. That’s why I would like to work on the recognizability of the identicons/icons first.

Great!

I see, thanks for your work! Those are some I like, my favorite always first:

As you can see most of my favorites are from the “smart devices” collection: http://www.flaticon.com/packs/smart-devices. The others are from different collections, but all from feepik and with the same license.

you should use an icon font (fontawesome?) to keep the icons scalable and responsive

Since there have been a lot of comments about what the “average” user would do, I thought I would chime in as a new user (as of this morning). Also, please read all of this as someone that is trying to be helpful, not someone that is just bitching. Hopefully I have some useful points of view.

Currently, I am using BTSync, but have grown increasingly annoyed with it over the last little while as they have expanded in directions that I don’t trust. (Like being forced to use URLs I don’t control to connect devices.) So, finding an open source alternative was exciting for me. However, I’m also finding Syncthing to be a bit more difficult to set up that BTSync. Some of this has to do with the UI, so I’ll talk about that here. (And post my other comments in a more appropriate thread.)

My use case is fairly simple. I want to keep my Keepass file up-to-date and accessible on all of the devices that I make use of. Currently, that consists of a few Android devices (tablets and a phone), a few laptops, a couple of desktops, and an embedded Linux box that I use as a small server. The second part of my use case is what I think would be most common. I don’t want Google, or Facebook, or Apple, or anyone else syncing my photos to their “Cloud” and tagging the hell out of all of my pictures to track what I am doing. But, I want pictures that I take on my various devices to seamlessly flow to a server where I can keep backups.

When I first fired up Syncthing this morning, I expected the configuration to be similar to how BTSync used to be. I would enter the big ugly strings of characters and pick the folder to sync. Then, on my test Android device, I would snap a picture of a QR code and give it the folder to use on that device for syncing. After that, it would all connect up and I’d be off and running.

The reality was a fair bit more difficult. (And, I still don’t even have a simple sync working.) From the UI perspective, I found it confusing that on the Android device there was a QR code icon that seemed to indicate I could snap a picture of a QR code rather than type in the long string. However, it took me a while to find where the QR code was in the web interface. At the same time, the web interface showed me lots of information that was marginally interesting, but not very useful for getting the actual syncing done.

Looking at the new mock-up, there seem to be some changes that improve some of the overall situation, but some things are also missing. So, here is my list of suggestions on how to improve the overall ease of use for the web interface.

  1. Put the QR code used to link a phone front-and-center on the main web page. I suspect most use cases of something like Syncthing are going to be about syncing data from a phone to someplace else. (The other common use case is probably data backup.)

  2. Get rid of most of the “geeky” status information. Most people don’t care how much RAM or CPU a program is using. And, if they care that much, they know how to get the OS to give them that information.

  3. Give me a quick “at a glance” front page that tells which of my devices and directories are NOT synced (at the top of the list) and those that ARE synced farther down. Most of the time, when I am looking at the UI, I am wondering if my devices are all up to date or not. I want to know that quickly, and move on.

  4. The small “pixel icons” that are generated for each device are cute, but they don’t really tell me anything. Aside from the fact that the Mac I installed it on generated an icon that looks like a butt, I am unlikely to remember which icon belongs to which device. I understand that a good icon can save space on a web page and increase the speed of the “at-a-glance” look, but it needs to be an icon I can relate to and easily remember. So, if that is the desired goal, let me choose an icon for each device (or at least give me the option).

  5. Consider either a setting that lets you change the UI between “simple” and “advanced” mode, or putting more of the “advanced” settings in a different part of the UI. Things like the “Addresses”, “Use compression”, and “Introducer” settings when you create a device are things that are beyond the comprehension of most users, and the current default values are probably what most people want anyway. So, hide those settings somewhere. Lots of settings = scary for most people. I would say the same thing goes for configuring a folder. “Rescan Interval(s)” (arguably), “Folder Master”, “Ignore Permissions” (should be figured out automagically), and probably even file versioning should be hidden somewhere in an “advanced” settings area that is hidden from users by default. Most users just want to get a simple sync going. As they grow and learn to use the app they will start to dig for the advanced settings they want.

  6. Some kind of a “quick start” wizard when the program is first installed. I think it is reasonably safe to say that when you install Syncthing, you are trying to sync a directory between two devices. When the web UI comes up for the first time, show me a window that says “Welcome to Syncthing! Let’s get started. Please select the folder you want to sync.” Then, take me through setting up my first folder, and maybe even getting the first external device configured. (What type of device are you syncing with? (Android, iOS, Windows, etc. If it is Android or iOS give instructions on how to use those versions to take a picture of the QR code to get the configuration information easily. Then, explain how you would do it again in the normal UI to add another device.) – This would be a good time to ask the user if they care about file versioning. If they do, then show those options in the configuration settings as “normal” settings. If not, move them to the advanced settings.

  7. The advanced settings that can only be accessed currently through the configuration file. For settings that aren’t all about making the program easier to debug, expose them deep in an advanced settings area. I’ll probably want to play with them at some point, but my mother won’t. Clearly label them as “dangerous” (if they are) and make it as clear as possible what they do (going as far as linking to developer documentation if necessary).

  8. Make it easy to figure out why syncing isn’t working. A friend of mine used to say, “When a program fails, it usually has SOME idea of why it failed. TELL ME ABOUT IT!” Right now, I have a Mac configured, and an Android device configured. Both are claiming everything is working perfectly, with the exception that both are saying “1/2” on “Global Discovery”. The “1/2” is in red text, which leads me to believe that is the problem. Is it? If so, why? It would be better if it was showing me some text that said something like, “There may be a firewall that is blocking access to the global discovery server. If you are having problems with your device syncing, click the following link for additional troubleshooting steps.” (Or, something similar when it isn’t syncing.)

In a nutshell, the UI should be geared toward the 80-90% use case. I really believe that use case is the marginally computer literate person that has a small number of devices, and a small number of files they want to keep in sync. (Although, in the case of pictures, it may be a larger number of files. But, it will still be a few hundred gigs, tops.) They don’t want to figure out how networks work, and they don’t care how Syncthing does “its thing”. They also don’t care about resource utilization as long as whatever they run doesn’t seem to have a huge impact on their device. (They view not overloading their computer as the responsibility of the developer.)

8 Likes

Worst idea I’ve heard in a long time:

  • Java apps are quite heavyweight (I can see battery usage spike whenever I run one).
  • Java’s desktop UI is horrible.
  • Swing and AWT won’t antialias fonts on linux - unless you use the non-redistributable oracle JVM. But making syncthing rely on propietary non-redistributable software that users need to manually install is simply out of the quesiton, IMO.

I’d go with Qt, which looks nativer almost anywhere. GTK looks pretty alien on Windows and OS X.

+1!

Only for windows really. All modern operating systems have software repositories or some equivalent, making installers actually alien to users of those OS, and probably more work to maintain. Plus, downstream can handle the packaging with things as they are.
Again, I’ve no idea where windows stands on this, so they might be the exception.

Worst idea I’ve heard in a long time:

  • Java apps are quite heavyweight (I can see battery usage spike whenever I run one).
  • Java’s desktop UI is horrible.
  • Swing and AWT won’t antialias fonts on linux - unless you use the non-redistributable oracle JVM. But making syncthing rely on propietary non-redistributable software that users need to manually install is simply out of the quesiton, IMO.

Haha … Well tell me what you really think

Okay, so fair points. All are true imo, in particular bullet #1 and #3. Two counterpoints…

(1) The idea of Java implementation is simply to make it easier to port. Java is simple to read by any developer, so this would make it easier to port I think than the Go implementation.

ie. Say nothing of the merits of a particular language, it’s just numbers that more people can read Java than can read Go, for purposes of porting.

(2) Android clients require Java-like port anyway.

You mention battery usage… Do you mean Android or on Laptop? I agree that Java chews up battery - - I can see that on my laptop whenever I open PyCharm. It probably is sub-optimal to run a Java client on linux if there was a native Gtk or Qt application.

But in terms of Android , I don’t really see an alternative besides chewing up the battery. Android chews up batteries - it’s a fact on my Samsung phone anyway.

Otherwise, great comments in this thread from everyone… This is a really great reference discussion on usability , features, implementation… Especially recent post from fba , very insightful and gets to the core of UI/UX issue

For the user interface, have you tried https://github.com/andlabs/ui ? It crestes native UI in Mac OS, Linux and Windows.

2 Likes

I was talking about laptop, though it honestly applies to both. My latop battery duration drops to about 50% when running some java app. My phone (which runs Sailfish OS) also suffers a noticeable battery duration drop whenever I run an Android app.

In any case, since we’re talking about a UI, we probably won’t be porting the same one to desktop and mobile phone: the design will be different (screen size, mouse vs touch, app navigation, etc), so I don’t think the desktop<->android compatibility matters (the same would not be true for the backend or a library, etc).

I am feeling a bit lost in this discussion’s search for a cross platform UI and am wondering if I am missing something. We already have HTML, which has the advantage over native GUI toolkits of giving you remote administration for free.

We already have a working GTK client (that I haven’t tried) for Windows & Linux, not sure about OSX. We have Synctrayzor wrapping the WebGUI for Windows in the best toolkit for that platform (C#/WPF). Somebody made a native tray utility for OSX. Am I missing something? Is there an itch to redo the WebGUI in something like Qt or andlabs/ui? Is there a reason to dislike GTK or HTML?

If somebody does redo the WebGUI for some reason, I am thinking I would rather the alternative implementation be done in WebGUI (HTML), so that it is consistent when I remotely access my headless servers. (Tangent: I was thinking that someday it might be cool to have a remote management studio that manages multiple syncthing installations. A cross platform toolkit might be nice there, although I have warmed up a lot to HTML5 recently.)

…Anyway, a big +1 from me for @fba’s post

As far as CPU/memory, I sometimes notice sync apps (BTSync, sparkleshare, and to a lesser extent syncthing) are chewing up a large amount of CPU. I don’t care much about the momentary performance of syncthing, but I am thinking that I would like a stat something like a load average showing how many seconds in the last 1 hour or 24 hours syncthing was using up 20%+ CPU. As it is now, I sometimes notice high CPU usage and I am not sure if I am set up with some large trees with overly frequent scanning – I want to investigate further. The novice user could have a slider that says how often to rescan folders (if a file watching mechanism can’t eliminate the need for this.)

You’re right about there’s no need for 100 different GUIs . The best ones will ‘win’ out eventually. Natural selection of apps !

Speaking only for myself , writing an application GUI helps me understand the entire project start to finish. I’m writing a Java GUI right now for some of the web services … It’d be useless to most everyone but a few developers, but it helps me better understand the protocol and what’s ‘under the hood’… My 2c anyway.

And there’s always the chance of innovation in one client becoming universally adopted because it’s a good idea… I mean… For example , I guess look how many email client software apps there are… Or how many Bittorrent clients there are… I see developer interest as a major strength personally. I think will give the project additional momentum.

Speaking only for myself , writing an application GUI helps me understand the entire project start to finish. I’m writing a Java GUI right now for some of the web services … It’d be useless to most everyone but a few developers, but it helps me better understand the protocol and what’s ‘under the hood’… My 2c anyway.

Cool, fair enough. That’s the great thing about open source and open interfaces: we are free to experiment (and learn), and I look forward to all the innovation that might come from it. I’m optimistic that the main GUI will get enough attention, (not that I’m helping in this thread by adding my own distraction:). I had a few random ideas too, not sure if/when I will get to them (so I don’t mind if others beat me to it):

  • a widget to show current sync state (like a Windows gadget or one of those computer info widget suites, or perhaps a widget as part of a dash in a web-based dashboard,) that only shows which folders and/or devices need to be synced, and/or which devices haven’t been online for a while. Also maybe an indicator if re-scans are chewing up too much CPU. This seems like a common theme so maybe this is relevant to discussions about the current GUI.
  • Also, a tree view (like WinDirStat or GrandPerspective) to visualize which files are in/out of sync, and how much relative space they take up.
  • Ambitious: A redundancy intelligence application that helps you determine whether every file on your disk is either synced (and how many copies you have and in which geographical locations), or whether it doesn’t need to be (OS files, etc., perhaps by comparing locations to a database that knows about whether /var/tmp needs to be backed up, for example). And you could inform it about full disk backups.) And then a wizard that says “just sync everything that needs to be synced, please”, and it could go into syncthing’s API on multiple computers and set up sync for you.

My implementation language leanings: Some of the C#/XAML tools I have aren’t free, but let me target iOS/Android/Linux/Windows natively with the same or much of the same C# codebase (depending on options: Xamarin.Forms, Unity3D and NoesisGUI). But I like HTML too, and I’m all for Qt, gtk, Java, Go… why not?

i’d be interested to know if there’s any research on what an average Syncthing user is like, and whether the target future user is the same, too.

i’m in the above-average-technically-but-networking-casual camp who was able get BT Sync to back up 12 android directories to my NAS without much trouble. however, my understanding was precarious enough that now i’m experiencing constant existential angst over whether BT Sync v2 is set up correctly.

so, fwiw, anything that makes it

  1. easier to install and set up, and
  2. easier to understand what is syncing where, and whether it’s a one-way backup or some kind of deletion disaster, is just about all i focus on.

personally, i like arrows, so directionality is a no-brainer. http://allwaysync.com/screenshot.html

It’s not easy to use. There’s a bunch of UI elements that aren’t clear to a new user at all.

In order to be constructive, please consider detailing the elements you find unclear, and why you find them unclear.

2 Likes

2 posts were split to a new topic: UI confusion as a new user

A post was merged into an existing topic: UI confusion as a new user

great ideas