New interface design

Development UX
1

Hey guys, I have been working on a new interface for Syncthing lately and wanted to share it with you guys before proceeding further.

The goal with it is to make it easier for average users to use the app, by simplifying the interface and making it easy to understand what is happening at any given moment, without needing special knowledge or abilities. I wanted the interface to feel familiar by using recognizable design patterns.

The biggest change is that folders now look more like people expect folders to look like. Also I removed a lot of the information that is not necessary for a quick overview and moved it over to the edit screens. There was a bit of information overload that even confused me, a pretty savvy user, a lot.

Anyway a picture says a thousand words so here it is: http://invis.io/AB2A6DYZN

You can read and write comments on individual parts in InVision and I encourage you to do so.

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 Syncthing.

Next up on my own todo list I have the following items:

  • Make it clear where to start after installing the app without having to read the manual.
  • Settings: Separate important settings from less important.
16 Likes
2

Thanks for your ideas! Keep in mind that only a small percentage of users open the GUI

Maybe we should first list what is good/not so good about the current GUI and what users expect from the redesign? I donā€™t like redesiging something that works just because designers like to redesignā€¦ :neutral_face:

good about the current GUI

  • easy to use
  • clear separation of devices and folders
  • all information visible with simple expand
  • works on touch devices and smaller screens (no tooltips need to see infos)

not so good about the current GUI

  • eye candy ā€œidenticonsā€ serve no purpose and should be removed
  • advanced settings are not available

I think Syncthing needs a simple installation (complete packages with running in background and a status info in the task bar) and not a new interface

2 Likes
3

These are fantastic. Great work. I really like the new layout and reduction in the clutter.

I guess I have one and only comment/fear, which is mentioned by uok, we already have a bunch of ā€˜advancedā€™ settings for both folders and syncthing itself which we have no place to fit. Iā€™d love to be have some sort of about:config type of thing for both folders, devices, and syncthing itself, so you wouldnā€™t have to go mess around with XML files to see whatā€™s available.

Also, the current UI is almost mobile friendly due to bootstrap, do your mock ups have the same intent?

1 Like
4

Are you talking about the advanced information and features already available in Syncthing? Or the settings that is only in the config files? If the former then I actually didnā€™t remove any information, I simply relocated the more advanced ones over to the ā€œEditā€ screens, see here: Login | InVision last files synced is there instead of on the main screen because it is not something most users are going to need to use very often. :smile:

Yeah I kept responsiveness in mind when making these. It is relatively simple to implement.

5

!! Bare in mind this is just my personal wish list !!!

I am actually talking about settings, and thereā€™s an awful lot of them compared to whatā€™s available in the UI: github.com/syncthing/syncthing/blob/master/internal/config/config.go#L163

Some of them are uber geeky and perhaps donā€™t deserve a place in the UI but it would be nice to know they exist without having to dig through some random XML file, hence the about:config concept.

I do recall giving up implementing something because I failed to work out how to fit the extra settings into the Settings UI.

To round up I guess I have three items in my super ambitious wish list:

  1. Ability to access advanced confirm which exposes all the possible bits and bobs for both folders and syncthing. This doesnā€™t have to be part of the design as it will be ugly given itā€™s a technical thing and will probably come much later, but it would be nice to at least have this in mind, so that we could eventually fit some ugly button somewhere which presents you with this.
  2. Ability to extend the Syncthing settings, Folder settings/view UI nicely. The best I can come up with (given I canā€™t even draw stickmen) is tabs inside modals, then we can have sections such as Web UI, Discovery, Protocol whatever for syncthing, and Config, Needed Files, Overall Stats for folders potentially being able to add more stuff such as Encryption etcā€¦?
  3. Ability to add more information about devices/folders when there is some. We have last seen, last file, etc, but there might be more cool stuff to come, so itā€™s always nice to plan for the future so adding these new cool bits would be as easy as possible. I guess request 2 with the Overall Stats sort of covers this.

The problem with the current UI I guess is the fact that we try to display pretty much everything there is in the landing page, which I feel your new mocks really clean up, hence why I have so much sympathy for it.

6

I like the fact that it keeps most of the current interface (for a designer eyes).

Accordion, like the current tab uses, can be a good solution to show more settings of every folder. Itā€™s much cleaner than modals.

7

I donā€™t think this is true, unless thereā€™s statistics somewhere that says most users deploy automatically or use a wrapper of some kind?

I donā€™t think this is true either. :slight_smile: Itā€™s easy for me to use because I understand exactly how it works under the hood, and this may be the case for you too, but going by what I see here on the forum and in bug reports I donā€™t think this is the common case.

We ā€œneedā€ this too, but I donā€™t think one excludes the other.

The GUI is the first impression, after the currently horrible installation experience. Being simple, beautiful and easy to get started with would be very good. I donā€™t think thatā€™s the case currently. As such Iā€™m also less worried about advanced settings not being available - they probably should be, but the advanced user will always find a way. Someone who is not a techie might not, with the current setup.

3 Likes
8

Yeah I see what you mean, Plex has a relatively nice way of doing this, like you can see here:

(Click on the image to see a gif animation)

I see no reason not to include all those settings you talked about in a similar way, allowing the user to toggle their visibility. That way they donā€™t confuse the average user who has no intention of using them. While allowing power users to tweak easily without digging trough the config files.

We could even potentially allow users to toggle what info appears, under each device and what columns appear for folders, on the main screen.

9

We already have Syncthing GTK. Why not offer it right on homepage? And to point the links direct to the file, instead of the github?

10

Love it! Great work.

1 Like
11

This new design looks great! However, I agree that the biggest road block is having to run the app from command line and having no menubar/tray icon to launch the UI and quit the app.

Trayhost is a cross platform Go library for placing Go applications in the menubar/tray. I think some of the 3rd party icon apps already use this. Why not just integrate Trayhost directly within the Syncthing app so itā€™s consistent across all platforms and built in? Then installation would be as easy as unzip and run.

12

For Windows, we still gonna need an installer. @kozec, please, share your thoughts!

13

About windows installer? I donā€™t believe itā€™s really needed for installing single executable, but in worst case, ~10 lines long NSIS script would suffice.

14

Not only. Thereā€™s some things asked here that are already part of Syncthing GTK.

15

Thatā€™s looking very nice. A few thoughts:

Placing of the system name may be problematic if the name is long and the screen is narrow It may be worth taking into account colour blindness when choosing colours I like to be able to see how much data remains to be synced What happens when there are ten connected devices wrt the Devices column?

16

I love criticising things, but this is just great. The only thing missing is the discovery server count (which is, generally, the thing I look at the most).

I kinda disagree. I see no point in havinga taskbar icon for background services. Currenly, Iā€™ve just got one for caffeine, one for wifi, and one for pidgin. And I admit itā€™s already one too many.

More the the point: What would the point of this permanent icon be? What use would it have, and why would a user want one?

If itā€™s the desire of a minority, it can be a separate package - or an extra binary that needs to be run separately, not part of the base syncthing.

Aside from being more ā€œstandardā€ than the current UI, and more in-line with current design guidelines, I find that this UI is far easier to read (maybe itā€™s actually because of that first point).

It also gives a use to the identicons and fits more information on-screen at once. For example, I can see which folder is shared with each device, without needing to individually click each one.

5 Likes
17

Personally I guess Iā€™d want that to adjust quick settings (transfer speeds, or access the webpage, or pause (ala kill))

1 Like
18

BINGO!

I have never been a fan of the identicons until I saw this proposed UX design. In this implementation, identicons provide utility by visually linking shared folders to specific devices. Very helpful if you are building or debugging a more complicated hybrid topology

Overall, I find the proposed design to be attractive, easy to read, and intuitive.

3 Likes
19

I love this UI look and feel, show in the original post. Fantastic work.

Hereā€™s what I think Syncthing ā€˜needsā€™, at least from a UI perspective.

(1) Foolproof cross-platform application in Java. This makes GUI / UX testing easy, Java is easily readable by many developers, etc.

(2) Cross-platform web-UI like the one now. Could be the ā€˜referenceā€™ implementation in Go.

(3) GTK-based application.

(4) Console-based cross-platform application.

(5) INSTALLER ā€“ I love installers. If we donā€™t have an installer, the exe needs to have documentation or at least a well done help button.

** I am in favor of the comment that this thing should look slick. I agree. I think thatā€™s important. Even little things ,like a lock icon to show encryptionā€¦ Statistics on connection quality and latency ā€¦ Nice brand logo and icon etc.

In terms of showing ā€˜settingsā€™ in the UI, keep in mind the project is going to evolve assuming it survives and thrives. So assumptions we have now may not be true in the futureā€¦ ie. It might turn out tons of people want it to support Windows CE or something. :wink:

Itā€™s best to keep things simple for the user. If you need more advanced settings, these are best done through something like ā€˜enable advanced settingsā€™ checkmark, so that the UI for average user is not cluttered. Or a hidden screen or panel. Etc.

IMPORTANT: Also one really key pointā€¦ Some aspects that we are thinking about as ā€˜settingsā€™ and their display, handling, and response ā€“ may actually be part of something else ā€“ like the protocol, user privs level, or OS . For example, read-only files or directories might appear different in different OSs, each OS has its own way of looking at permissions, yet this information is transmitted in BEPv1.

There way I think of it, thereā€™s several different things at play so far hereā€¦

(1) Read-only / Read-write Files and Folders (OS handling, Protocol Handling, App Handling)

(2) Sync Method (Overwrites, Multiple Master Support, Automatic Repair of De-synchronized Master, Virtual Filesystems etc)

(3) Error handlingā€¦ Can we recover from common errors induced by common situations? If not, how to present this to an average user? How to a power user? Should we have automatic bug reports?

But great comments here, some really talented UX designers here.

1 Like
20

My feedback / ideas / thoughts on the new design

What I like

  • the invis.io mockup
  • web interface for Syncthing, keeps (remote) admin stuff easy
  • notification symbol
  • grouping less important info (e.g. IP) in modals

What I donā€™t like / donā€™t know / think needs to be improved

general

  • please donā€™t invert Syncthing logo
  • tooltip nightmare - user has to hover all over the place to find information - also tooltips <> touch devices?
  • how does the design cope with people have more than 3 folders and 3 devices?
  • which framework does the new design use? bootstrap? foundation? or handmade?
  • is the design responsive?

focus points

  • I think big green buttons put focus on less frequently used functions (how often do you really add a new device?)
  • device list should be on right side (again, focus should be on folders and people look from left to right)

device list

  • how does it scale with longer device names?
  • please add progress info (52%) or progress bar - you donā€™t see everything at a glance
  • traffic info seems to be missing?

top bar

  • Syncthing is not a file sharing program and the average user does not know about transfer speeds/memory/cpu usage, so could be smaller
  • notifications: the notification history does not really help, items must disappear on completion (e.g. restart)
  • notification symbol: currently if Syncthing detects error/notice it shows in your face e.g. ā€œyou need to restartā€ - hiding this info behind a modal area could cause confusion because people will not see e.g. the restart notice

folder list

  • please donā€™t use identicons for visually connecting device<>folder
  • how does it scale with longer folder names?
  • please add progress info (52%) or progress bar - you donā€™t see everything at a glance

identicons

I donā€™t know how they ended up in the web GUIā€¦ they might work for forums and github to lighten up the boring gray avatars - but nobody can remember if the laptop was the one that looks like space invader has been humped by a dog or the one that looks like a cat if you squeeze your eyes. and people have more than 3 devices so it will soon be a game of memory - also since they are generated from the name, they change upon renaming. what if you exchange them with simple status icons (e.g. checkmark, syncing, etc.)?

2 Likes