New interface design

Development UX
21

I think they are generated by device id

22

should depend on system-setting for right-to-left or left-to-right language - as @uok says the most important first

23

I agree about 5000% with the person who said that Syncyhing should have easy installation packages, rather than a new interface right now. For me personally, I backup important data to a home server with Syncthing. I use BTsync for this purpose because i can see its status at any time with the icon in the notification area - I know immediately that my data is being backed up when I edit it and know that transfers should be underway. With Syncthing, there’s no guarantee that it’s even running, as I have to set up all of that myself (and I dont know how to do that under Windows).

Syncthing is a fairly mature project - please treat it that way before you go redesigning the whole thing for fun.

Also, should we start a separate thread about this perhaps?

24

Maybe it helps.

25

These two are not in opposition. Whoever is doing UI design is not the one building Windows installers, I can guarantee. Currently, there are people interested in taking the UI to another level of refinement. I think that’s awesome. Someone who has the skills and inclination to tackle building a great Windows installer would have my blessing just as much.

Syncthing is a small child of a project, and anything that’s ever happened with it has been for fun. Lets not make this change any different. :wink:

2 Likes
26

Exactly what I was about to say. :smile: Nobody has to worry about us putting effort into something rather than the other because I and those who will work on this with me know absolutely nothing about installers or anything of that sort.

I wouldn’t waste my time on a designing the thing for free if I didn’t take the project seriously. I do this for a living and I don’t charge little for it :smile: I have been using syncthing for a long time now and have been working on this design on and off for a long while in my spare time. Because I want to help it gain more traction by making it easier for average people to use it’s interface, which is what I specialize in. I made many sketches, iterations and put a lot of thought into it, before finally showing it to you guys. So no worries about this being some thoughtless design only done because I like to design. :wink:

4 Likes
27

Good point. I think we could solve that by adding ellipsis to the name if it is too long. Also some things will move around and change once on tablet and mobiles, I haven’t designed it yet but it lives in my head currently :wink:

We should definitely look into that.

@bnvk proposed a nice idea for it in the comments on invision to show it. I think its a great idea. the data that remains would be appear in gray next to the current size. That way it doesn’t distract you but it is still there for a quick glance.

28

Excellent points, I fail to remember sometimes that not all projects are one person teams of one generalist, unlike my own projects :wink:

Although I’ve not done it before, I’d be interested in working on a gui installer for windows. I’m very sick of BitTorrent Sync overwriting my important data with old data. I’ll see if I can make it happen in a smooth manner with the skills I have currently.

3 Likes
29

Maybe check the system colorscheme / destop theme or whatver it may be called - someone with collor blindness would probably use something like ‘high contrast’ or similiar.

IMO it would be best to have a default setting and the possibility to change that setting.

1 Like
30

Wow for pete’s sake, sorry this is so unreadable. Will edit as I have time.

@u

LIKES AND DISLIKES:

  1. Im glad you like doing mock-ups. Speaking for myself, I (having wrttien GUIs in C#to Tcl/Tk, to Bootstrap andjQery), I will try to incorporate the mock-ups tou (or any oter party does with )) into a my own GUI that will be used for prototyping.

  2. “web interface for Syncthing, keeps (remote) admin stuff easy”

I like the web-interfaces well for quick configuration, but there’s a few minor issues (like if the nodes get out of sync, thereshould be a way to see exacty what happened and click one of three choices to repairthe problem.

  1. “notification symbol”

Which is this… You mean the pop-up on discover? This is great. But there needs to at theery least be console debug output that the local webclient can get, in detail. That will tell us where the latency is occurring if any. or a short GTK+ app forl inux. But we need to get the basics nailed down otherwise the mobile app will be unusable except in simple setups.

  1. “grouping less important info (e.g. IP) in modals”

Hah! Well for me that IP is really important,becausethe other side of my ‘dev’ testinngtunnel is on Amazon. If reboot thecomputer on Amazon AWS, the ipchanges. Thisi why I reallythink wened to have the public discover feature perfet.

I think I prefer either a standaloen GUI that minimizes to tray for Windows, or a nice Webinterfce or TK

WHATN NEEDS IMPROVEMENT:

general:

  1. “please don’t invert Syncthing logo” ]

    Well I have no preferenehe to chime … The logo does look better onthe homepage than on the localhost interfae.

IMMPORTANT: Although I really like the Syncthing’s logo’sdesign, I STRONGLY believe we needto change the name of ‘Syncthing’ to something’s associatedwith cuttingedge tech – I have a whole list of ideas for product – perhapsaname like “Bit-Storm’”,or "Cloud-Factor , like that dor of drifts so it’sput inthesamecategory as Bitcoin. We wanttobementionedinthesame articles the bigcomptitors. The problem is that “Syncthing” is tough to pronounce, and lmost impossible to remember. Imean, assuming that

we and suggest ifw e ever to a true ‘rollout’ of this product , as the open source competition… We suggestionhereis probably need to change not onlythe logo, but the iconndtheweb site theme before we do the next major rollout. Thensend out press releses etc.

  1. “tooltip nightmare - user has to hover all over the place to find information - also tooltips <> touch devices?”

    Agreed,but the pop-up thing I think is an easy fix . It’s just the CSS :hover clas or somethingsimilrpplied to the DOM element.

3."“how does the design cope with people have more than 3 folders and 3 devices?”

Thihsis why I kind of hat eWeb GUI programming.  You always have to write extra code.   You're exactly right.  We need  way to support more devices.  Here is wha t suggest:

(… At the top of the Screen, we add a switch or a slider to control a hidden JTable that can connect to web services

First option is to adda buttoncheckbox to the mainstream web app to put an html div attached to buttonor slider or whatever, then bind that to a jQuery event. Whhen a user who is in into “simple mode” which only supports 3 devices or whatever on the screen. If the user switches to advanced mode, then they are looking at essentially a spreadsheet of the 13

Second option is the same thing, butinsteadof a button or slider to all a web serviec to thediv, we bind an invisible div to a jquery jxx call. YOu probablyonlyneed oneortwo of the webservices

Another almostidentical way to do this is once the user adds their 4th device, thewebgui automaticlly siwtches over to ‘spreadsheet’ type view. The way I’ve implemented this previously was wth JQueryUI widgets called JTables.

  1. which framework does the new design use? bootstrap? foundation? or handmade? inding out now.

Haven’t actually looked sine it was writen in Go and that’oneof myweaklanguages. . . Okay so I just checked.

It’s using Bootstrap 3.1.1 (veru mew), along with Angular and Jquery. Here’s anexample github page on the webstuff… Shows it wasa bittoo colorful…

Alsothecurrent implemenation just overwridesboostrap wth whatever CSS is desired, thosebootswwatchis okay. I just wanted to see if all this stuff was in place.

  1. “is the design responsive?”

That means differentthings to differen tpeople. Some mean does it use a single page-app, some meandoes it use HTML5, somem mean asinglepropr framework like angulaaraross the wholeite, somemean does ituse mostlAJAX rather than POSTs and fulll pagereloads.

==

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

Abolsutely, agreed in mixed ways. I had to add new devices over and over beause my remote instance was behind firewall eventhough itwas TCP. I don’t think thelinkedlayout will hurt anything, and I think we have a great beta verson, but forfinal release, it needsto havebetter flow to the eyes.

What I would suggest is this… FIRST, we get rid o those iconsin the left sidenav.

Using YOUR idea, we can ditch the add folder and add device buttonsentirelyand movethem to undersettings… Details I’d leave up to you at the moment.

M yonly remaining concern isthat the present terminology is horrible for usability. Device? Shouldn’t this be ‘node’? OR ‘peer’? Right? Well we can cover the nit-picky stuffif we ever have time.

DEVICE LIST

how does it scale with longer device names?

That’sa major issue here too. I think device unique ID seed to be hidden from te UI, and the names need to be trunated. If there isn o reason fornmesnot to bepreassigned, each deviceshould getto assign it’s own device ‘nmme’ during startup. After key agreement, you could always use that key to exchange device names and HMAC thenmove on to regular TLS. Come to think of it, I think device names propegate at lest one hop.

Mybe set it to the IP as strng. Or first 8 hars of the reverse_dns(ip) return string.

So I’d sy easy optionisto truncate devie nmes to mke it fit in the field… Or set the HTML to a variable widthcontainer, not fixed width, so the deviicce names aways have space.

I jus do’t ike how the deivice names re retrieved from the hostfile on POSIX, and from the registry on Windows. On our own presonal networks, we should beable to call these things whatever we want.

Yes, depending on what filesystems we use ‘under the hood’ . Currently, yu’d belimited by the oldest maachine on your cluster (like Windows 98 or Windows XP). Windows 7 and Linux I kno support filenames up to 255 chars, perhaps more.

Don’t worry about the POSIT path thing unless you wantto work on it. There are crosss platform emulaton libraries to convert these paths bck and forth.

Also, In larger clusters, we probably won’t care about anything other than ‘is it up and working’, and ‘did anyone break into it or break it’.

So I suppose overall I’m not woried about the devicelist for a large cluster.

Wealsodon’t know how the devicecluster will bestructuredike for 8 to 16 hosts… We haven’t decied whether to stick with what we’ve got nnd slowly work through theugs…

Or to chnge something. My research indicates that we could have the ‘curent path’ at one extreme, running something lik e’Google File System’ at the other extreme, nd in te middle we have distributed hash table.

Sincethe DHT canbeusedfor both immense benefits as welll as security attcks, I’m looking into implementingthis. But thsi would mean thatisolated BR networss would end up ‘knowing’ about other networks, but would only initiate a share if one side requeestedand to shre something.

this extends the procol as dropbox replacement.

please add progress info (52%) or progress bar - you don’t see everything at a glance traffic info seems to be missing?

Progress bar is going to beimpossiblefornumerous reasons. First, since we re using TCP, the bandiwdth is not linear. It is either overdamed or underdamed, so it goes wa up and slowly down, or runsreally low,then slowly bck up.

That’s problem #1. Second problem: If we go down the route of the DHT, we are going to discr… So we really need to gather user requirementsand define our use casesdemocratically, orweneedto just have a coder meeting andd eidewh atwearegoingto write.

I think m point is that if we solve the problem of integrating multi-vendor Cloud APIs with end-users and testthem so we cn sel the sotware… that’s worth the money and time nd crowd-sourcin nvestment.

d a fair amount of filesystem metadata (besides te filename, dta, nd maye date) in favor of granting his

Notsure what this question ws, but what it comes downto is we need topick howwe re going to (1) Transfer cotrol messages, (2) Indexx Files, (3) Transfer Files,nd (4) Hadle Errors gracefully.

I havemany academic papers on this. I will uplod my otes and I think we shoul dhave discussion.

I think the currentsolution istoo DIY (we’llneed to implement locking and sync and threads all by ourselves along with our own FUSE filesystem)…

Te other end is the $100,0000+ Casandra system – one per customer.

We want to build somethig in between. I’m thinking we store files in a comon format to all devices… Wether NTFS4g or XFS etc That prvents transltion errors .

“please don’t use identicons for visually connecting device<>folder”

I think wemay want to rethink theterminoogy, structure, andvisuzation of this. Is there abetter way to do it? I cn’t think of a etter way at the moment. Please share if you think of a cool trick

“please add progress info (52%) or progress bar - you don’t see everything at a glance”

Progress brs oftenneed to bemultithreadedto work, atleastinJava. So need to mkeall of our pps multithreadedifwe want good trnsfer rates, low errors, and aquick GUI.

So let’s assume my devices autodisover and I odn’t hve to keep telling them their IPs and ports over and over 5 times an hour, hh.

ThEN we could 1ther go IN the righttable s columns, they can go under the tableaswidgets, orthey an not be present atall (and thespreadsheet table will simply show rounded integers).

"This way wecan easilyhavethe GUI scrol and scale. OH the last thing is move that Add Folder button so it’s symetrically underthe Add DeviceButton.I We also have theissue that this particular layout won’t scale to more than about 3 devces, but I’m planning ontest in the [rotocol out to t least 12 or 16 on AWS.

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.)?

31

Syncthing is a successful proof-of-concept that needs an overhaull… That’s why I’m ehere… To scope out how this is all working and if I can bounce in here and contribute… Because I think Syncthing is awesome, and it’s close to done. I’m impressed. And if we solve the last few problms, this will be a proof of concept that tons of Cloud Services just becme obselete – and were replced with peer to peer services.

So we want to quickly to release it ffpublic benefit, and it becomes a springboard to use our peer-to-peer solution as a ‘general’ internet protocol like bittorrent. One that runs alongside bittorent but is slightly less movies and probably more personaland business douments… Essentilly a gnerelized peer-to-peer distributed file system as well as distributed hash… Then add inthe SHA1 hashing power of the bitcoin network micropayments with distributed computing resources… This can be sold to serve content or runrun algoritms, whatever.

I just found out a day or two ago about another group doing my vision open source… It’ss called the bitcloud project. Highly talented developers… Just they need more resources I think. So anyway, just in theinterest of transparency, that’ what’s up n why I’m here.

I need this feature personally for my terabyes of backups. And thisistheonlythingthat’sopne-source (so I cantrust thecrypto) and is even close to working. Really close. So I want this program done , soon, and relesed so that everyone is happy.

http://bitcloudproject.org/faq

http://bitcloudproject.org/

http://bitcloudproject.org/w/Main_Page

I

And it will surpass Bit-Sync if we can talk to the right people., pushing file sharing further into the mainstream.

To see where we are goingwith this - rather where people want to go wth this feature. , (iBTW , Syncthing transport security is way safter than by sbit ync) but files sharing in Syncthing only nly works under certain narrow conditions of compatibility and so forth. It doesn’t support 3 to 16 hosts, or filelocking, or anything like that. Not yet, ndno unless that’s what people want and need. . . .but first we need to standardize and refine the transport and application layer, and to do that we need use cases. I’ll write up an-anonymous survey for features that we an all pass around (a short for question about whatyou’d use Syncthingforinanideal world, multiple choice) so we can define our scope and requirements.

Because we all have different requirements. We need to gree on what criteria constitutes our first release, aka the Minimum Viable Product (MVP)). As they say out here in Silicon Valley, fail fast or succeed.

32

This is a really impressive redesign! Simplistic, beautiful and still very informative.

I only have some smaller nitpicks:

  1. Like uok I think the devices block would fit better on the right. This reduces importance and fits to how it’s done in the edit and device screens.

  2. A checkmark to enable advanced options like the gif shows would be nice.

  3. I have two proposals on how to indicate sync progress via the syncing icon:

  • A little bar below the identicons which fills from left to right.
  • Filling the identicons from left to right, so that at 30% sync the left 30% of the identicon are green and the right 70% are orange or dark grey. We’ll have to see which colors work tough. I can also imagine that this would make the identicons too difficult to recognize though.
  1. Round or square checkboxes next to the options on the right hand in the device and edit screens. Otherwise things like the state and editability of stuff like file versioning, folder master, use compression, introducer etc doesn’t really become clear.

PS: I like the inverted logo and how you use the identicons to convey additional information visually.

1 Like
33

Interesting ideas, we are planning to work on some more ideas on how we represent each device with icons. Several ideas have come up so far and I’ll be sure to add these to the list of possibilities. Thanks.

My bad, they were supposed to be there but I guess I forgot to add them. Thanks for reminding me :smile:

34

Interesting ideas, we are planning to work on some more ideas on how we represent each device with icons. Several ideas have come up so far and I’ll be sure to add these to the list of possibilities. Thanks.

Great, I’m excited what you’ll come up with!

My bad, they were supposed to be there but I guess I forgot to add them. Thanks for reminding me :smiley:

No worries!

For some reason invis.io asked me to log in and when I finally got in, I somehow missed the built-in comment functionality. Will use this if I have other ideas. Thanks for your work!

1 Like
35

Hey guys, I just updated some of the screens in InVision. http://invis.io/AB2A6DYZN

Changes made:

  • Changed device speed icons to plain arrows and made then gray
  • Made the font in the header smaller
  • Removed Syncthing from the logo
  • Unfilled Add device and Add folder buttons to make all buttons look the same
  • Turned “hover bubbles” into syncthing-blue
  • Added “Show advanced” button to the device edit screen like @AudriusButkevicius and I talked about - I think this comes out pretty nice and allows us to add more settings into the UI without confusing average users.
  • Also simply changed the edit screens a bit so there are “tabs” on the left that switch between different settings sections.

And probably something more I am forgetting.

2 Likes
36

Thanks for working on the new GUI, but I still think most of its parts are heading into the wrong direction and do not solve the “problems” (are there really that many?) of the current GUI other than hiding useful information and changing the colors (I agree, bootstrap default is visually not that great)…

you could even make it more minimalistic and drop the size column (also not needed by the average user because ST is not utorrent so you share what you want to share or - well, you just don’t) and the devices column (the status column is enough). the identicons in the device list are not needed, you could replace them with checkmark/syncing/offline. you could even create a default view that only shows the folders and hides the devices in a settings dialog

problems e.g.

  • up/down/ram/cpu are not important to the average user but are given a prominent position at the top
  • the current GUI allows for a quick overview without hovering about each icon
  • how does it work without a mouse if so much info is hidden in bubbles?
  • it looks nice with 3 devices and 3 folders, but have you tried 10 devices and 25 folders? you would need to hide parts of the device list in the folder view which kind of makes it like the current GUI :wink:

other suggestions

  • “show advanced” is a good idea, but should be a central option in the general settings
  • do you plan to keep the footer with helpful links?
37

I agree, the proposal is too much like the current interface. We need to slim it down drastically to make it more accessible. Many items are not that important and the only real important information is if everything is synchronised.

38

46 folders and 104 devices is the record ATM.

1 Like
39

Please try to suggest improvements when pointing out problems in the future.

I consider Up and Down rather important, the ram and cpu not so much like I mentioned in InVision. I think we should allow settings to toggle the latter on and off in the new advanced settings section.

I disagree and so do most others that I have talked to. The current GUI is confusing and thus does not give you a quick overview. The new one focuses on showing you the most relevant info while putting extra info into the edit screens and such (although I have not put them all there in the design, to save time).

There is not a lot of info hidden in bubbles. Mostly there is the title of each section, which you will learn pretty quickly. Also the layout will be different on mobile devices, I don’t have time to mock that up in detail though because I will be quicker to do it in code once we are at that stage.

It will look just like this, except with deeper lists. Its not hard to imagine… If you got tons of devices or folders you will have to scroll down, I don’t think there is a good way to fit that much info “above fold”. If you think you got a way to do that then I encourage you to create a template for the minority that has so many devices and folders. :wink:

Yeah I think it should be in both places, and folder edit screen.

Yes.

40

I actually like this idea, maybe we can remove the column on the left, listing all the devices. And only show devices on each folder.

Edit: So basically something like this: Loading Share Experience If you click on the plus sign you get a modal window with available devices to add to the folder and a button to add a completely new one.