Design: IPFS Desktop

[akrych]

As we agreed earlier we need some design inspirations examples for desktop :) We have some - but I would like to invite you to search some more desktop/file applications that you like.

It will also extremely useful for me if you point shortly "what do you like" and "what do you don't like" in specific app/design. The negative examples can be even more useful for design than positive ones :) 👍

Some examples that we already mention in others issues:

Dropbox

Keybase

Webtorrent

Dat desktop

https://github.com/dat-land/dat-desktop#dat-desktop

Tranmission

Forever

https://github.com/ipfs/awesome-ipfs/issues/128

File Browser by hacdias

https://filebrowser.github.io/

[lidel]

(I noticed that I posted things specific to file browser, so I moved them to "Design: File Browser" – see https://github.com/ipfs-shipyard/pm-ipfs-gui/issues/9#issuecomment-377025105)

[alanshaw]

I like that:

• Leftmost column is the right width to accommodate the macOS close/minimise/maximise circles
• White background for most important content, gradually faded colours as columns become less important/less frequently used
• There's no edge

I don't like:

• Top of main column feels cluttered

[alanshaw]

I really like the file icons package for atom: https://github.com/file-icons/atom

[hacdias]

We're moving the discussion for IPFS Desktop design here, so please read the linked issue

This is the current state of what I've done:

Main Screen	General Settings	Connections

[hacdias]

Ping @ipfs/gui-team

[lidel]

@hacdias some quick feedback for https://github.com/ipfs/ipfs-gui/issues/44#issuecomment-430958354

"Main Screen":

• I feel there should be a decidated button (or icon) to open "Files" in Web UI
• Padding looks weird: there is too little of padding around the cube, and too much on the bottom (whitespace was fine in https://github.com/ipfs-shipyard/ipfs-desktop/issues/661#issuecomment-426648800)

"General Settings":

• Header should say "Settings" instead of "IPFS Companion"
• "Logs Folder" → "Open Logs"
• "Quit" – will this also shut down the go-ipfs?

"Connections" tab:

• I think renaming "Connections" to "Backends" will make things more clear
• (perhaps) rename "Repo Path" to IPFS_PATH (to match environment variable)
• Those random "pet names" for backends are not user friendly
  • We should at least prefix them with a backend type (eg. "go-NP64Ok_NP")

[hacdias]

@lidel great!

I feel there should be a decidated button (or icon) to open "Files" in Web UI

Yes, and I believe drag'n'drop should also work on desktop.

Padding looks weird: there is too little of padding around the cube, and too much on the bottom

I agree: just waiting to know if we're going to change the main screen totally or not.

Header should say "Settings" instead of "IPFS Companion"

Makes sense! (Desktop btw 😄)

"Logs Folder" → "Open Logs"

Agreed!

"Quit" – will this also shut down the go-ipfs?

Yes, quit everything.

I think renaming "Connections" to "Backends" will make things more clear

Agreed!

(perhaps) rename "Repo Path" to IPFS_PATH (to match environment variable)

Not sure if IPFS_PATH would be much better. What about 'Ipfs Path' or 'IFPS Path'?

Those random "pet names" for backends are not user friendly

Yes, they aren't but I believe it is mostly an issue with our current design on this section. And yeah, we can prefix them with the lang.

[hacdias]

@ipfs/gui-team following a talk I had with @olizilla in the hack day, we thought about decoupling the Connections window from the menubar and make it open in a separate window with more room to show info to the user. We could eventually decouple all of the settings and make them open on a different window and let the main window be just the entry point to everything.

Talking about that, what should the menubar itself have? Right now, we just show some addresses, if it's connected or not, and a button to open the Web UI.

[olizilla]

As a first pass, how about we mimic the navbar from Web UI

The main thinking here is that "Open Web UI" as an action won't make sense to people who are new users, and have downloaded "IPFS Desktop"... particulaly as we won't be opening the Web UI in a browser, but a chromeless electron window so it won't feel quite like a Web UI. As such we need to think about how to jump the user into the web ui without it feeling incoherent / jarring. That lead me to thinking about making this menu look much more like the Web UI nav...

To show my working here are the iterations that lead to it...

[hacdias]

@olizilla that's just awesome. I really need to investigate how to create that arrow thingy with Electron. I know it's possible but since not all platforms use it (most Windows menubar apps don't have the arrow), we could just show it on macOS.

[olizilla]

@hacdias the arrow is totally optional! We can figure it out later.

[patrykadas]

I was playing around a bit with design as well, thought about highlighting the shared files (Dropbox-like) and delegate everything else to the web application to treat a desktop more like a shortcut and to allow quick actions around the node.

I am not aware of your design specs nor product decision, so I'd treat it more like an exploration, perhaps you could play with it a bit further. @hacdias @olizilla

https://www.figma.com/file/YTMV7cOMmDSfqw8BgwoncbJ5/IPFS-Desktop

[jessicaschilling]

Closing this issue - a lot has evolved since it's last been worked, and it's also cross-referenced from a number of currently active issues (so it won't die in isolation).