Summary-style status screen (2/2)

[ericronne]

ETA April 2020:

Current-state design analysis that led to these concept sketches can be found here:
https://docs.google.com/document/d/1jQn14u8CJm8fOjLPbo2lug4RG3Eb8ulHX1LVlu9jMck/edit#heading=h.nvl6wd19122n

Original issue text

Here's an alternative concept for the Web UI / IPFS Desktop Companion, which i mocked up after reviewing the current design. I thought it might be interesting and useful to have a richer dashboard, with compact modules which could be expanded and collapsed. It gives the most prominence to the highest-impact features, and minimizes those which are likely used less frequently.

Priority for this is Low

IPFS Desktop dashboard concept wireframe

A few highlights

A simple icon indicates connection status. This iconography would carry over into the IFPS Companion, replacing the current pulsing-animation indicator. "Details +" would work in a similar way to the current "Advanced" button.

Peers is the most visually interesting part of the current app, but the user is required to dig in order to see it. As you can see in the image above, here i've ghosted it back as a live background texture for the main view. Dots would appear and vanish in real time (as they do in the current app), adding subtle animation to the screen. Expanding Peers will swipe away all other panels and light up the map dramatically, with a close X in the corner to return the user to the main view. The Peers panel itself will grow to display the peers list.

Hosted files condenses down well. On file hover, a "copy hash" (or whichever function is the most useful) button appears, along with a "more" button to expand other functions. Clicking the "Add" button exposes options to add both files and folders. The expanded view of this panel would offer batch options.

Explore nodes is a section i admittedly don't yet understand. It feels like it has potential for educational application, which would be great. For now, i'm (wild) guessing that it doesn't get a lot of use. So i've reduced it down to this …

Advanced features here come from the desktop Companion menu. I borrowed them in the interest of aligning the functions between that and the app. Perhaps they don't belong here. #wingingit

Settings probably doesn't need to get the big-button treatment it does now; here it gets a standard small-gear corner button.

github links have been gathered into the lower-right corner. (Perhaps we could strategize to narrow down this list, too.)

Again, this is not a high priority. Happy to discuss.

[olizilla]

Nice! I'll dig in with the feedback later, in the meantime, I'm gonna link this issue to related thoughts...

• Create the IPFS Desktop, Companion and WebUI wireframes ipfs-gui#12 - Desktop designs that tried to focused on keeping the desktop UI compact. We ultimately conclued that "smallness" was not something we needed to optimise for, so those designs didn't go anywhere.

• Design: IPFS Desktop ipfs-gui#44 - the thread that lead to desktop looking like it does.

[olizilla]

I'm a big +1 on rethinking the status page as an overview of top stats and quick access to the most valuable features.

[olizilla]

A simple icon indicates connection status.

I am very much in favor. Nice to have: an icon for connection status that implies you are connected to many peers. The bolt looks nice but implies point to point / 1 to 1 to me. Anything we can do to disabuse the user of the notion that they are connected to a "cloud" provider is also welcome.

Peers is the most visually interesting part of the current app, but the user is required to dig in order to see it. As you can see in the image above, here i've ghosted it back as a live background

Yerp, peers is also currently the least useful page. I'd like to find ways to visualise that

• "these peers are on the same local network as you"
• "these peers have a low ping time to you (you could get things to and from them quickly)"
• "these peers are bootstrap nodes"
• "these peers are your friends (becuase you flagged them as a favourite or entered their address manually)

I think the active background map would be cool, but I'm more interested in thinking of ways of making it more actively useful. Perhaps the map becomes decoration as you suggest, and these features are shown in a more practical way like another table. I think we can come up with somthing visuallt interesting and useful.

[olizilla]

Hosted files condenses down well.
If we can frame it as list of files, like "top n files you added recently"... a full file tree where you can drill into deeply/nested/directories doesn't condense so nicely. Dropbox shows you a list of files you recently added/edited... some previous exploration on this ipfs/ipfs-gui#12 (comment)

Explore nodes is a section i admittedly don't yet understand. It feels like it has potential for educational application, which would be great.

Yep, it could come out. Explore is kinda in there as it's a chunk of functionality that we could add in and give developes a way to look at data structures they were creating. Of note it also lives as a standalone app in https://explore.ipld.io/ Either way, I should record an intro to it so it's value is a little clearer.

Advanced features here come from the desktop Companion menu

That list is kinda desktop specific, but we could offer it up...

• local log - this is really just to let a developer look at the desktop app log. We have an open TODO to let the user watch the IPFS log scroll by, as you can from the command line tool via ipfs log tail
• configuration file - This wants to open the raw, IPFS config file, which is a long chunk of JSON. I think the UI should offer a nice interface over our config file. It's essentially a bunch of switches for toggling features, and a bunch of select boxes and lists of text input fields, that could all be validated. We have some screen design proposals for that in invision. https://projects.invisionapp.com/d/main#/console/13924274/302169242/preview
• local repository - We could let the user open this up, but it's not really for messing with, and probably not an option that should be available on the front page.

...careful with the names, Companion is the web browser extension.

Settings probably doesn't need to get the big-button treatment it does now; here it gets a standard small-gear corner button.

Agree!

github links

• "go-ipfs" - this is front and center in the current status page along with the version number. It's there to explain what implementation of ipfs you are connected to. It could become additional info to the "connected" panel. It's super helpful for devs and not interesting at all to non-devs.
• revision - for debugging. we ask for it if when folks submit an issue
• see the code / file an issue - these seem to get a chunk of use, so should stay.
• check for updates - we don't currently have a mechanism for that in webui but we could.

[olizilla]

More background on the peers page - ipfs/ipfs-gui#38

[ericronne]

Ooh this ☝️is super interesting, thanks.

Compactness isn't the point, so much as a layout that's appropriate to functionality. The design is very much a thought experiment. Good thoughts, which should inform design evolution, along with the design review (#1004).

[olizilla]

Compactness isn't the point, so much as a layout that's appropriate to functionality.

💯 agree... i over labored the "this design was for smol" point. that was more as an explanation as why we didn't persue it. This thort experiement is good experiement.

[jessicaschilling]

Note #1672: comments on scaling issues of bandwidth graph over time. Need to include considerations for zoom scales over time in next generation of status screen.