Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create the IPFS Desktop, Companion and WebUI wireframes #12

Closed
daviddias opened this issue Dec 14, 2017 · 49 comments
Closed

Create the IPFS Desktop, Companion and WebUI wireframes #12

daviddias opened this issue Dec 14, 2017 · 49 comments
Labels
topic/design-visual Visual design ONLY, not part of a larger UX effort

Comments

@daviddias
Copy link
Member

@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
Copy link
Member

hacdias commented Dec 14, 2017

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

@daviddias
Copy link
Member Author

daviddias commented Dec 15, 2017

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

@daviddias daviddias changed the title Create the IPFS WebUI Write Frame Create the IPFS WebUI wireframe Jan 4, 2018
@akrych akrych self-assigned this Jan 30, 2018
@akrych
Copy link

akrych commented Jan 30, 2018

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

main_screen_files_desktop-min

main_screen_pinned_desktop-min

main_screen_upload_desktop-min

main_screen_node_desktop-min

@akrych
Copy link

akrych commented Feb 1, 2018

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

@hacdias
Copy link
Member

hacdias commented Feb 7, 2018

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

@lidel
Copy link
Member

lidel commented Feb 7, 2018

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
Copy link
Member

hacdias commented Feb 8, 2018

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

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

@olizilla
Copy link
Member

olizilla commented Feb 8, 2018

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
Copy link
Member

hacdias commented Feb 9, 2018

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
Copy link
Member

hacdias commented Feb 10, 2018

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

@hacdias
Copy link
Member

hacdias commented Feb 12, 2018

image

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
Copy link

akrych commented Feb 13, 2018

@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
Copy link

akrych commented Feb 13, 2018

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

@hacdias
Copy link
Member

hacdias commented Feb 13, 2018

@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
Copy link

akrych commented Feb 13, 2018

size, the number of blocks and the hash.

Ok, so this is will be great :)

@hacdias
Copy link
Member

hacdias commented Feb 15, 2018

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

@akrych
Copy link

akrych commented Feb 15, 2018

@hacdias Sure :) I will send you today

@hacdias
Copy link
Member

hacdias commented Feb 15, 2018

Awesome @akrych 😄

@akrych
Copy link

akrych commented Feb 15, 2018

@hacdias
Copy link
Member

hacdias commented Feb 16, 2018

Awesome @akrych 😄

@hacdias
Copy link
Member

hacdias commented Feb 16, 2018

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

image

@akrych
Copy link

akrych commented Feb 16, 2018

@lidel lidel changed the title Create the IPFS WebUI wireframe Create the IPFS Desktop and WebUI wireframes Feb 19, 2018
@lidel lidel changed the title Create the IPFS Desktop and WebUI wireframes Create the IPFS Desktop, Companion and WebUI wireframes Feb 19, 2018
@akrych
Copy link

akrych commented Feb 28, 2018

@hacdias Missed icon:
add_icon.svg.zip

@hacdias
Copy link
Member

hacdias commented Feb 28, 2018

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

@olizilla
Copy link
Member

olizilla commented Mar 7, 2018

@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
Copy link
Member Author

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
Copy link
Member

olizilla commented Mar 7, 2018

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

Dropbox

screenshot 2018-03-07 10 46 52

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

Keybase

screenshot 2018-03-07 10 46 37

Webtorrent

screenshot 2018-03-07 10 52 15

screenshot 2018-03-07 10 52 20

Dat desktop

screenshot 2018-03-07 10 32 21

Tranmission

screenshot 2018-03-07 10 38 38

screenshot 2018-03-07 10 46 52


(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
Copy link
Member

olizilla commented Mar 7, 2018

@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
Copy link
Member Author

daviddias commented Mar 7, 2018

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

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

@akrych
Copy link

akrych commented Mar 12, 2018

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
Copy link
Member

hacdias commented Mar 12, 2018

@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
Copy link
Member

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
Copy link
Member

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

@hacdias
Copy link
Member

hacdias commented Mar 20, 2018

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:

image

  • 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
Copy link
Member

hacdias commented Mar 20, 2018

image

image

@hacdias
Copy link
Member

hacdias commented Mar 20, 2018

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

@akrych
Copy link

akrych commented Mar 21, 2018

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.
20180321_181936

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,
  1. Pinning function replace by "Add IPFS path" (hidden in "(+)" button - pic2) as a layer sliding up from the bottom of the app (pic3)
  2. 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.
  1. Additional button to see more about all my peers in WebGUI

pic2.
wireframe

pic3.
wireframe3

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

@hacdias
Copy link
Member

hacdias commented Mar 21, 2018

@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
Copy link
Member

lidel commented Mar 21, 2018

@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
Copy link
Member

hacdias commented Mar 21, 2018

@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
Copy link

akrych commented Mar 21, 2018

(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
Copy link
Member

lidel commented Mar 21, 2018

(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
Copy link
Member

@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
Copy link
Member

lidel commented Mar 22, 2018

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic/design-visual Visual design ONLY, not part of a larger UX effort
Projects
None yet
Development

No branches or pull requests

8 participants