Create the IPFS Desktop, Companion and WebUI wireframes

[daviddias]

@akrych while you review the multiple UIs, could you start porting the current WebUI to https://app.zeplin.io/project/5a32d45d1a17248135241058 in a WireFrame format so that we can use it to do design brainstorming.

Make sure to go through https://docs.google.com/document/d/1HzwTYo4BDDH4WIh0EULh0U9_WnT84FacDUdVtTExluQ/edit#heading=h.a415cvyt09h4 and also check out the alternative version ipfs/ipfs-webui#229

[hacdias]

@diasdavid can we also have access to that zeplin project?

[daviddias]

Of course. I've invited everyone on @protocol/pm-ipfs-gui. Note that until Agatha pushes the first upload it is pretty much empty :)

[akrych]

Hello,

I made some sketches to IPFS Desktop. As you can see - I cut main menu to two options: Files and Node informations (settings and power are on the bottom). I also change positions and now files are the first thing that user can see after opening IPFS Desktop. I try to expose the most important informations and actions to make user experience as smooth as possible :) and also add some nice graphics to all

Feel free to comment on Zeplin and let me know what do You think about it :D

[akrych]

@diasdavid What do you think about it? :D ^^

[hacdias]

What do you think about me starting to implement this? 😄

[lidel]

I think sketches proposed by @akrych are universally loved so 👍 from me.
But before you invest your time, let's make sure we are as efficient as possible and no work is duplicated. Keep in mind that styles / assets created for Desktop will eventually end up in UI Kit at ipfs-shipyard/ipfs-ui-style-guide, so keep generic things in separate dir (ui-kit or something like that).

@olizilla – do you have any specific plans regarding UI Kit? Or tips for @hacdias how to proceed?
I trust you have better intuition when it comes to shared design systems.

[hacdias]

@lidel yeah, I was going to put the reusable stuff in a separate directory already 😄

And yeah, @olizilla, anything to say? :D

[olizilla]

I've extracted a minimal reusable chunk from the style guide over in https://github.com/ipfs-shipyard/ipfs-css

For sharing colours and fonts without requiring any specific build process changes from any project that wants it.

Would be good to work that into desktop. I'll be online later and we can talk about fancier design system things.

[hacdias]

Hey @olizilla! I'm hoping to start today and I'll just import ipfs-css 😄 Thanks for it! We could also add the styles of things like buttons and such. What do you think?

[hacdias]

Hey @akrych! Could you send me the icons that are being used all over the interface?

[hacdias]

I've been talking with @olizilla and @alanshaw and we noticed these things:

1. We can't get the time in which the file was added to IPFS unless we track it and should we display the file's hash on that row too?
2. What is the search for?
3. We didn't find much usefulness on this button. Perhaps there are people who'd use it, but why would someone want to move it around? I don't know, maybe some people would. What do you think?

/cc @akrych @diasdavid

[akrych]

@hacdias

Sure, I will send today icons to You :)

About the questions:

1. What other info can we have here?
2. Search is for user files (like on WebGUI now)
3. When you move the window by this icon, it will be always visible (linke your "eye" icon) - do you find it usefull now :D ?

[akrych]

@hacdias - Icons in svg: https://owncloud.tpniet.pl/index.php/s/AnOJkmN6QwN2A24

[hacdias]

@akrych

1. I think we can only have size, the number of blocks and the hash.
2. Oh, okay, makes sense.
3. Gotcha! It's useful now eheh 😄

Thanks for the SVGs. /cc @olizilla

[akrych]

size, the number of blocks and the hash.

Ok, so this is will be great :)

[hacdias]

@akrych can I ask you for something? Could you send me the icons without any extra blank space? Like the trimmed svgs?

[akrych]

@hacdias Sure :) I will send you today

[hacdias]

Awesome @akrych 😄

[akrych]

@hacdias Icons: https://owncloud.tpniet.pl/index.php/s/VsvfWBzbSZadqEE

[hacdias]

Awesome @akrych 😄

[hacdias]

Some icons don't seem to be trimmed yet. If you don't have any automattic way to do so for every file at once, I can do it one by one @akrych

[akrych]

@hacdias Ok - I trim them all: https://owncloud.tpniet.pl/index.php/s/NHMaG1wgBjR7VLS

[akrych]

@hacdias Missed icon:
add_icon.svg.zip

[hacdias]

Thanks @akrych 😄 There is one more icon missing (I left it as a note on Zeplin too).

[olizilla]

@diasdavid can you find some time to talk us through your issues here please. It sounds like you have both specific concerns with the current design and general concerns with how this process was tackled, so it'd help us all to talk it through.

From my perspective, @hacdias and I discussed the issues of the search bar and the "move this window" feature, and felt they were not appropriate at the moment.

Good design feedback is difficult, and totally subjective. I'd avoid public debates on "Squariness" and "borders make it look old". Can you give us any examples of desktop apps that you think are modern and show off what kind of look and feel you're imagining?

It's huge - It will not look in smaller screens.

Why constrain the size? I'm not convinced it is an issue. This may feel like an issue because the current layout is as compact as possible, but that has introduced it's own design challenges, that are solved by just giving us some more space.

The design needs to be tested/previewed in Windows, Linux and Mac OS X

Strongly agree. We need to make that part of a formal release process, but that is a separate issue.

[daviddias]

From my perspective, @hacdias and I discussed the issues of the search bar and the "move this window" feature, and felt they were not appropriate at the moment.

Agreed. I was also confused when I saw it at first, but as always, happy to be convinced if there is a strong use case for it.

Good design feedback is difficult, and totally subjective.

Agreed. We have had a good amount of success in the past by starting by: setting the vision with a long list of urls, screenshots and other items for inspiration; then a set of requirements with the list of features; iterate a lot on design and use tools that enable us to give good feedback (i.e Zeplin) and only jump into dev once we feel that it is stabilizing.

I've walked @hacdias through it yesterday, happy to go through it again with you or everyone.

@diasdavid can you find some time to talk us through your issues here please.

Of course. As always, you are always welcome to pick time from my calendly :)

[olizilla]

Here are a few relevant ones that I have, all in macOS flavour.

Dropbox

Of note here... you can do almost nothing in the app. Significant interactions are offloaded to the web ui.

Keybase

Webtorrent

Dat desktop

Tranmission

---

(of note it turns out I don't use many desktop apps other than web browsers so my opinions on good desktop app design are probably biased)

[olizilla]

@diasdavid

Agreed. We have had a good amount of success in the past by starting by: setting the vision with a long list of urls, screenshots and other items for inspiration; then a set of requirements with the list of features; iterate a lot on design and use tools that enable us to give good feedback (i.e Zeplin) and only jump into dev once we feel that it is stabilizing.

That's a reasonable plan. I missed the start of it for this round, and it would be helpful to get akrych's view on it to see if it works for her. (when back online)

I'm trying to get across the idea that I'm not comfortable with this mechanism of design feedback without knowing you all a lot better than I do now. I can't tell if it's constructive without knowing a lot more about the design directions that were given at the start. I'd like to be more useful in helping to iterate on these designs and am keen that no ones time gets wasted.

[daviddias]

Update: Me, @lidel and @olizilla just had a good chat over the current process. Notes:

• We all feel that there was a missing step at the beginning that set the vision for the new design, making it really hard to give feedback to the designs that appeared.
• We acknowledge there was a general misunderstanding from Step 0 - Define the Project to Step 1 - Create the Wireframes from what exists today to support design discussion (this issue) that led to Step 1 being skipped.
• Next step is to retrofit a Step 0.5 - Do a braindump of ideas and align what is our vision for the shared UI elements among the 3 projects. We will use @hacdias doc to share those ideas between ourselves -- https://docs.google.com/document/d/1gBgVi1x_WEcPJJ6JvpgQWbO3JEZ-5r318wK3pPIoG48/edit#heading=h.gbrekzi8avt --.

Let's have a sync call next week when everyone is online again and we have prepared the doc to review :)

[akrych]

Hello after small break :)

Yeah, I feel that I miss one step (wireframing) and don't have any: "setting the vision with a long list of urls, screenshots and other items for inspiration;" - that was missing. It seems to me that the project was going a little own life and we have to bring it to the right track :) In general I don't have problem with making few correction rounds and hear design feedback :) 👍Remember that for me as non technical person - it's can be a hard topic to design.

I think we can now back to wireframe and gather good examples that you like.

[hacdias]

@diasdavid so when will the call be? 😄

PS.: This week will be hard for me. I can only do the call of Thursday or Saturday.

[olizilla]

re-posting from irc freenode #in-web-browsers

i think it would help us to name all the features, and get consensus on how each one should be offered up to the user, regardless of which app. Things like "share this file"... we don't yet have a strong definition of how we'd like that to work across apps

I'm gonna re-work the new doc, over here https://docs.google.com/document/d/1gBgVi1x_WEcPJJ6JvpgQWbO3JEZ-5r318wK3pPIoG48/edit#
to start with a comparison of the features as they are currently, so we can see what we like and don't like, and list out a bunch of features that each app should have, and how it should work

[olizilla]

See #31 for the research and comparison of the existing UIs. I can't googledoc as good as I markdown.

[hacdias]

I've come with a suggestion for all of you: IPFS Desktop should be a small app and shouldn't occupy much space. As per #10 #41 and #9, I thought we could do something like this:

• Remove the Pin tab
• Move the menu to the bottom

And some todos:

• Make everything fit better
  But I think you understand the concept. What do you all think?

/cc @ipfs-shipyard/ipfs-gui-team

[hacdias]

[hacdias]

Obviously, I think this would need some design touches to get better.

[akrych]

This is my first rough sketches of IPFS Desktop (handwritten - I always made it before digital one, but usually I do not show them;) - of course it is "work in progress" but I would like to be able to work on them together as soon as possible :)

pic1.

I hope that most don't need an additional description, so only briefly:

1. Small menu on top limited to: home, file, settings.
2. IPFS version and disable IPFS in footer - in always visible place.
3. Limited options of node info and settings.
4. Add new file/folder - in visible place and merge to one button, that expand to

• add file,
• add folder,
• add by IPFS path,

5. Pinning function replace by "Add IPFS path" (hidden in "(+)" button - pic2) as a layer sliding up from the bottom of the app (pic3)
6. Action on file - button "(...)" visible on file hover. The button expand to:

• share(after click appear “customised download page to share with friend” )
• delete/unpin file.

7. Additional button to see more about all my peers in WebGUI

pic2.

pic3.

Let me know what do you think, do you see here something strange ;D or need explanation.

[hacdias]

@akrych oh my god. I love this sketches! They are just awesome. Some points:

1. I don't think we should leave "Disable" on the bottom. We could just have the button and not the word.
2. I would replace the version (in the footer) with our own peer ID or some other more useful information.

No more comments from now. I'm really enjoying this drawings and I think they're a very big improvement.

/cc @ipfs-shipyard/ipfs-gui-team

[lidel]

@akrych 👌

• (1) Are we planning to keep just text, or will we have icons + labels ?
• (2) Just like @hacdias noted, I don't think IPFS version changes that often or is that relevant :) We probably should move it from footer to "HOME" before Location.
  Left side of the always visible footer could be left empty or have "online/offline" indicator, peer count, or API address
• (6) & (4) Big 👍 for clustering and hiding things until they are needed
• (5 @ pic3) I really like the simple UI here. Here is an idea of making it alive:
  • by default labels say "Add by IPFS Path or CID"
  • on user's input, we check if it starts with /ipfs/ or /ipns/ or if it is a raw CID and in case of the latter we either (a) prepend it with /ipfs/ (b) change input legend from "Path" to "CID
• I have this sentiment that "HOME" screen should give a clear indicator of node health at a quick glance. Peer count does that, but may not be visual enough. I wonder if we could/should squeeze the IPFS logo somewhere (eg. on the right of "your node info" with online/offline as its caption? or with companion's heartbeat?)

[hacdias]

@lidel maybe the IPFS logo could be on bottom left (on the footer) with the heartbeat thingy saying if it is online or offline 😄

[akrych]

(1) we will have here also icons - This is just wireframes:)
(2) Hmmm I read it somewhere in our disscustions that version is important and we want to have it in menu, so... ;) ok, I will rethink the footer

About logo: I was thinking about it - maybe some "about section" with version in settings?

[lidel]

(2) I think I know where this is coming from. FYSA we have two "versions":

• protocol ("0.1.0") -- rarely changes
• implementation (eg. go-ipfs returns "0.4.14-rc3/e77033c" -- changes on every release

If we put implementation version (go-ipfs) in the footer, then it kinda makes sense.
But i feel we may find better things to put there :)

[alanshaw]

@akrych the wireframes are a valiant effort in fitting these features into such a small area but I just don't think there's enough space for all of it without feeling really crowded.

I think before we continue we need consensus on how we want desktop to work. @hacdias has expressed a preference to have a small dropdown with all the functionality in it but @olizilla @lidel and I have separately come to a conclusion that it would be beneficial to embed the WebUI into desktop, keeping the Desktop code base minimal and handing off to WebUI for important actions. This is to optimise for code reuse and visual consistency between Desktop and Companion.

Our idea was to scale back the dropdown to just include some basic node health info. I think we should discuss the following but for example it could be as simple as:

• Status icon for on/off (this doesn't have to be the IPFS logo)
• Peer count (danger red if zero)
• Up to date / Update available indicator
• Button to open WebUI
  • Could be a set of 3 buttons linking to the right places in the WebUI e.g. [files]-[peers]-[dag]-[settings]?

[lidel]

IMO sketches are compact enough and fully compatible with the idea of "delegating to WebUI for important actions". @alanshaw correct me if I am wrong, but the question you are asking is basically this:

• should simplified "FILES" be present in "compact popup" or is it something we remove from ipfs-desktop and delegate to the proper "File Browser" ([Discussion archive] File Browser #9) in full WebUI?

I'd say we keep simplified "FILES" UI in ipfs-desktop – at least in the beginning of this endeavor.
Main reason is that the code is already there, we nearly fixed all bugs and WebUI will not be ready for some time.

I was thinking about delegating things like file browser, sharing and upload to WebUI over time, as they appear there. That way ipfs-desktop is partially decoupled from that work and can be released without being blocked by WebUI rewrite.

[jessicaschilling]

Closing this (stale) issue with the caveat that there's a lot of discussion/ideation that should be considered in future work, particularly in discussing decoupling WebUI and Desktop: ipfs/ipfs-desktop#1389