need better frontend design

[jbenet]

maybe @RichardLitt can help here?

[jbenet]

btw, i think it's close to done, just needs to look better. it has all the information we need, etc. just some help rearranging it to be nicer.

cc @dignifiedquire too in case he cares about this as well.

[dignifiedquire]

@jbenet I care about all the UI, not sure though what exactly this is referencing, not seeing a lot in this repo itself

[jbenet]

this produces a website with all our releases. thing of it like a hub for all the binaries we ship. like https://iojs.org/ but with multiple parts.

try downloading and doing make. (it may break on the electron-app now...) it should put things into a releases folder, and make an index and so on. produces this website:

• https://ipfs.io/ipfs/QmWcvbBBcNZrBUQdH8QM7A3ZQKGqR6YQsUL63NNFpg93fB/releases/
• https://ipfs.io/ipfs/QmWcvbBBcNZrBUQdH8QM7A3ZQKGqR6YQsUL63NNFpg93fB/releases/go-ipfs
• https://ipfs.io/ipfs/QmWcvbBBcNZrBUQdH8QM7A3ZQKGqR6YQsUL63NNFpg93fB/releases/go-ipfs/v0.3.7

(sorry if this isn't pinned. im in a bad wifi and cant afford to have pinbot hose my upload for ~150MB)

[jbenet]

the goal is to have

• one single html page with every distribution that's relatively nice and intuitive, but very very simple (no frills)
• links to the raw directory listings to see all the files available, with all versions, on all dists, including json files that are consumable by tools

[dignifiedquire]

I see, the directory listings are just using the ipfs directory listing, correct? And where is this page implemented?

I'm happy to work on a design, but I don't think I have time to do the implementation soon, so would need some help in this direction.

[jbenet]

• implemented in gen index #10
• maybe @RichardLitt can help, not sure

[dignifiedquire]

implemented in #10

Ah I see, sorry for not looking better.

I would suggest doing some more work on mockups for the webui and getting a decision on the general design direction, and then taking that and applying it here.

[RichardLitt]

I'll see what I can do.

[whyrusleeping]

my ideal UI for a downloads page has a directory listing of $VERSION/$ARCH/{binary, shasum}. But maybe thats just me...

[jbenet]

@whyrusleeping you'll have that, too. see how https://github.com/ipfs/distributions works -- try running make and look into releases dir.

[jbenet]

@whyrusleeping example:

• https://ipfs.io/ipfs/QmWcvbBBcNZrBUQdH8QM7A3ZQKGqR6YQsUL63NNFpg93fB/releases/
• https://ipfs.io/ipfs/QmWcvbBBcNZrBUQdH8QM7A3ZQKGqR6YQsUL63NNFpg93fB/releases/go-ipfs/
• https://ipfs.io/ipfs/QmWcvbBBcNZrBUQdH8QM7A3ZQKGqR6YQsUL63NNFpg93fB/releases/go-ipfs/v0.3.7
• https://ipfs.io/ipfs/QmWcvbBBcNZrBUQdH8QM7A3ZQKGqR6YQsUL63NNFpg93fB/releases/go-ipfs/v0.3.7/hashes

[whyrusleeping]

👍 good stuff!

[dignifiedquire]

Will look at this this week

[dignifiedquire]

Made some progress today (all Photoshop atm)
https://ipfs.io/ipfs/QmSVTYzWx2pd2UEbEvDuFSCRhWJ1XwM9JFQBjakAbwzTk2

[RichardLitt]

I like it!

[jbenet]

@dignifiedquire looks very nice! feedback:

• I saw it like this and loved it-- maybe try inverting the yellow?

  

---

the biggest point of feedback:

• i think we're going after different things here. this page (distributions) is meant for hackers / developers / otherwise computer savvy users. It is not meant for (gui-only) end-users or to replace https://ipfs.io/docs/install (which needs to get way nicer and end-user friendly, yes, and we need Station to be the main thing we ship for end users). distributions is meant to be like

  • https://iojs.org/en/
  • https://nodejs.org/en/download/
  • https://golang.org/dl/
  • https://ipfs.io/ipfs/QmZiSAYkU7gZtqYeZWL21yuwgFtRnJu1JjDzR6Qd2qdDBr/

  This includes the links in the same page to download source + all the other platforms in the same page. Note too that there will be dozens of downloads in this distributions page, many of them will be small command line tools. almost all of the rest of my feedback hinges on this anyway, so it may feel like beating a dead horse once we align on this.

• you're absolutely right that we need a very user-friendly page looking like your design here -- maybe we can have a different page/site, like "IPFS Install" or "IPFS Apps" that has just the end-user apps, and careful/nice user friendly design. We can really design this one carefully with each app + download in mind, etc.

• important to note: the information for each distro used to generate this page will come from a json document, like https://github.com/ipfs/distributions/blob/master/dists/go-ipfs/dist.json

---

• appreciate the drive towards nicer naming for users, but the distribution names of things MUST remain the same ipfs-update not "IPFS Update". we may have a thing called "IPFS Update" that is a product with a nice gui to update ipfs, but that will be a different thing. it's important that the people looking for the cli tools can find them very easily, and they're named the same thing as the tool they'll use. Same for "IPFS Migrate" it should remain as fs-repo-migration. it's a commandline tool specific to ipfs/fs-repo, not to go-ipfs as a whole, nor to all IPFS implementations even. Sorry, this is going to get hard because we're going to have lots of tools/things up there.
• not sure from the design, but the different distros should not be tabs, should be scroll to different section of page. people should be able to ctrl+f in this page and find the thing they need. there will be over a dozen tools there very quickly. things like graphmd, bsdash, init scripts, etc.
• I think we will need to keep a proper prose description that describes the package. it's meant to be short, and coming directly from the source for the distro. example source for a distro here: https://github.com/ipfs/distributions/blob/master/dists/go-ipfs/dist.json (this also identifies a gif, based on distro name).
• i really want to keep a gif associated with every distro-- it really helps demonstrate what it's for. even cli tools. for example see: https://github.com/jbenet/http2ipfs-web#preview
• the 3 icon-column thing is really good for apps + the carefully designed install page. in the case of these distros, all information used to build the distros page is coming from a json file, which is meant to be displayed by other tools too (maybe cli tools). the three columns thing wont work well for that.
• and yeah, the link for previous versions is something like:
  • https://ipfs.io/ipfs/QmZiSAYkU7gZtqYeZWL21yuwgFtRnJu1JjDzR6Qd2qdDBr/go-ipfs which leads to
  • https://ipfs.io/ipfs/QmZiSAYkU7gZtqYeZWL21yuwgFtRnJu1JjDzR6Qd2qdDBr/go-ipfs/v0.3.7

[jbenet]

Also, worth putting here. this isnt what to go for in this page, but it has been admired by many, many hackers as one of the most successful (hacker) product pages ever: https://mosh.mit.edu/ -- maybe can inspire redoing https://ipfs.io/docs/install

[dignifiedquire]

as been admired by many, many hackers as one of the most successful (hacker) product pages ever

Hackers are a strange bunch..

[dignifiedquire]

Thanks @jbenet for the detailed feedback, I will try to address some things in words, and the rest in the next days more visually.

• More "hacker" oriented I think I understood your point and will display the full table of versions by default
• Everything on one large page I strongly disagree with this, given that you expect to have many different tools on here, I think having as a first stage a product selector, and then all details to that product in either a separate page or expanded inline or as a popup would be much better.
• Colors I know dark UIs have a lot of fans, but we should decide at some point if we are going for dark or light in general. I lean much more towards to light given that it appears much friendlier and approachable, no matter the audience. About the orange and blue, the idea is to have this top header be more widely used on ipfs.io and use different colors depending on what it's about for easy recognition. And blue is reserved for the main website/landing pages in my mind, but we can use something else than orange.
• Examples The examples you've listed given are quite different in the sense that they all just have one single "product" that they list, so as noted above we should have product/tool selection first and then the full list. The download page from iojs looks quite different from the others, so not sure what you think we could reuse from there
• Features/3 columns This could easily be pulled out of json files (I know that's how this gets generated) but I'm okay with having a general description text instead. Also might be nicer to actually not use json, but rather a markdown file to store the descriptions.
• gifs I know you are a big fan of gifs, but when all the tools on the page are cli tools and all the gifs are a black terminal with some white text flickering they lose a lot of their original appeal (and make the page too hectic). If we put them together with the download table, so there is at most one gif at a time on a given page, I can see it working.

[jbenet]

Hackers are a strange bunch..

It's not a pretty page, it is a successful page. that page is not meant to be seen it's meant to be a comprehensive information resource, and it excels at that. It has everything new-commenrs need in one page, with everything easily findable with ctrl+f. At this point I've seen >200 people install mosh from that page and have seen only very few (6) people struggle, or ask where they could find something. By far the best i've seen of any software.

• Everything on one large page I strongly disagree with this

:/ -- this is the specification for this page. from the get go, i set out to build this repo for the precise goal of having every single binary and tool in the community findable in a single page. without clicks, with support for direct links (anchors without js). and to make it extremely easy for other people to add more tools to the index.

the main goal of this page is not to be a visual experience. it's to be a very fast, functional place to find tools, understand them at a glance, and get the one for your platform. it should not get on your way.

all details to that product in either a separate page or expanded inline or as a popup would be much better.

drawers, tabs, popups and other things requiring clicks are all fancy and tidy, but bad UX for hackers. they are very annoying.

Colors I know dark UIs have a lot of fans

im not suggesting dark/black bg at all. i posted that image just for the blue. I have my colors inverted in general, which is why i saw it that way. very much agree, white UI does way, way, way better.

About the orange and blue, the idea is to have this top header be more widely used on ipfs.io and use different colors depending on what it's about for easy recognition. And blue is reserved for the main website/landing pages in my mind, but we can use something else than orange.

Let's not involve ipfs.io design here. I've very different plans/goals for the ipfs.io home page (we can start discussing that too, but in website repo). i dont want ipfs.io to loo like the distributions page-- this page is not meant to be part of the same website. And i expect ipfs.io home to change a lot over time, without meaning changes to this or other pages.

on the colors, i don't want to use many different main colors in our sites, instead, use one main color palette throughout, so people recognize ipfs sites. people browse a ton of websites all the time and what makes a set stand out is a similar palette and visual design. For example, coinbase.com has many different websites, but they all have the same general design, visual elements, and reuse colors.

Examples The examples you've listed given are quite different in the sense that they all just have one single "product" that they list

sure, that's fine, so this is a modification on that. each page section here will be like one full page of the others.

the download page from iojs looks quite different from the others, so not sure what you think we could reuse from there

oh just how design-bare the io-js page is. at the time of making this repo, the node.js and iojs pages looked like this:

• https://web.archive.org/web/20140814234120/http://nodejs.org/download
• https://web.archive.org/web/20150725224940/https://iojs.org/en/index.html

the main call to action (download button tuned by user-agent js) was not as obvious in the nodejs page as in the iojs page.

Features/3 columns This could easily be pulled out of json files (I know that's how this gets generated) but I'm okay with having a general description text instead.

if you think this can be done reliably without much effort (i.e. without loading the page to see what it looks like) on the part of people adding new tools, then sure! (the goal is to enable adding to this page by PR or even automatically, without having to go back and forth with people correcting looks.

Also might be nicer to actually not use json, but rather a markdown file to store the descriptions.

we could have longer descriptions, readme style. but want it in a json file because it will eventually by IPLD objects too. it's meant to be something like a package.json and will have more fields. we could have a README.md too, but really, it will be overkill in a page meant to look roughly the same for all the tools.

but when all the tools on the page are cli tools and all the gifs are a black terminal with some white text flickering they lose a lot of their original appeal

the cli tools could be asciinemas, actually. people have requested this for several. could be set in the dist.json, and embedded properly.

If we put them together with the download table, so there is at most one gif at a time on a given page, I can see it working.

yes, there should be only one download "per page" because each "page section" will occupy at least one whole vertical-screen-size. (i.e. you get different pseudo-pages in a single (searchable) page)

[jbenet]

@dignifiedquire it may be that we have very different (too different?) design goals and i may just be wasting your time with all this :/ i definitely don't mean to. i do have a very specific vision and constraints for this -- that takes into account much about the whole ecosystem -- and which i clearly have not communicated well :S

[dignifiedquire]

@jbenet it's alright I just didn't expect/understand that there already such strict restrictions in terms of usability/layout in place.

Re gifs, I think we should immediately switch to asciicasts, it's soo much better than just a regular gif of a terminal (didn't know about it before, and just checked it out).
I still remain convinced of the benefits in usability of the large page containing everything but I can work with it. I'll give it some thought and see what I can do :) For the next iteration it's probably better to have a call rather than trying to fit everything in github issue

[whyrusleeping]

I enjoy the look that @dignifiedquire is working towards, its pretty and enjoyable.

I think having one page for every single 'product' is a terrible idea. The mosh page doesnt do that, it has one product it is offering, and it does make it fairly easy to find. Better than the mosh page, in my opinion, is the page for fish (which is very heavily inspired by the mosh page) http://fishshell.com/

Things it improves upon over the mosh page:

• short sweet and to the point, i can find what i need without all sorts of crap and cruft about how cool they are that they worry about some obscure standard. woop de doo guys, thanks for putting that in my way.
• Tabbed installation instructions (with default tab set to current OS), makes it much easier to quickly find the instructions relevant to me, and pushes things I don't need to see back.
• Un-cluttered, at a glance I can find what i want.

As for the 'great UX for hackers'. I'm gonna go ahead and disagree. What makes for a great hacker UX is having urls that make sense. The url string I have to build to fetch a certain version of a given program should be logical and consistent, thats what i'm worried about for efficiency. If i'm bothering to use the browser, you might as well make my visit pretty.

[whyrusleeping]

Alright, here are my thoughts.

Lets keep the look that @dignifiedquire has going, but instead of making each product at the top a tab, simple make it a bookmark to that point in the page. Yeah, its going to make the page massive, but we all have amazing internet connections so its not a big deal.

Each product should have two logical pages, the first is an info page, should look similar to moshs (click here for shitty mockup)

The second page, should be the 'install' or 'download' page, and should look like fish's with tabs for each OS category. and maybe a short 'news' reel of recent changes like fish has.

Any more than that per product is information overload. Anything else we want people to know should be linked to.

[dignifiedquire]

New draft after some more discussions: https://ipfs.io/ipfs/QmP6bDdcZguE1KPFzk1n5BZGcuJuUdRvaV5hwCs8jGdezb

cc @jbenet

[dignifiedquire]

Small updates: https://ipfs.io/ipfs/QmaP8aWEh8Dq6rczhxMAfZXKHZRwRGbodqTf3DZgsoZpUE

[RichardLitt]

Some notes

@dignifiedquire:

I will try to address some things in words, and the rest in the next days more visually.

This is beautifully written.

Also might be nicer to actually not use json, but rather a markdown file to store the descriptions.

Is there a reason we can't convert them?

@jbenet:

it's meant to be a comprehensive information resource, and it excels at that. It has everything new-commers need in one page, with everything easily findable with ctrl+f. At this point I've seen >200 people install mosh from that page and have seen only very few (6) people struggle, or ask where they could find something

Heard anecdotally from others in the IRC room that this is not the case. I think that ctrl+f'ing should be a last resort. Encarta's encyclopedia is a comprehensive information source: but using Wikipedia is loads easier, because of the way it is presented - through hyperlinks, articles, and by subdividing information appropriaptely.

the main goal of this page is not to be a visual experience. It's to be a very fast, functional place to find tools, understand them at a glance, and get the one for your platform. it should not get on your way.

What you describe (my emphasis) is a visual experience, and could be a definition for good design for these sorts of pages. A good design doesn't get in your way, and you can understand it at a glance. Having everything in one long scroll is not the only way to achieve this. Assuming that everything needs top priority and should be in one huge place ignores the concept of priority as a way of organizing information, and also doesn't take into account the fold and people who don't like reading walls of texts as legitimate factors.

drawers, tabs, popups and other things requiring clicks are all fancy and tidy, but bad UX for hackers. they are very annoying.

I see you on this, but I think that this may be an overgeneralization. Seeing this another way, having to go to a URL at all is annoying for hackers. They should be able to just brew install all-the-things. There are tradeoffs.

yes, there should be only one download "per page" because each "page section" will occupy at least one whole vertical-screen-size. (i.e. you get different pseudo-pages in a single (searchable) page)

Anchor tags might be a good compromise for all of the hidden content / multipage debate. Just put everything on one page and have a nav bar that just floats down to the content needed.

i do have a very specific vision and constraints for this -- that takes into account much about the whole ecosystem -- and which i clearly have not communicated well :S

That's fine; more communication is better. We don't know what your visions and constraints are until you bring them up, though. At some points, reading your posts here was a bit confusing for me. For instance, mentioning not bringing in ipfs.io, but then saying to use a similar color palette across all of our sites. Maybe you could write up a short piece (for us) about your goals for ipfs.io and other pages? That might be über helpful; again, we don't know until we suggest something.

@whyrusleeping:

As for the 'great UX for hackers'. I'm gonna go ahead and disagree. What makes for a great hacker UX is having urls that make sense. The url string I have to build to fetch a certain version of a given program should be logical and consistent, thats what i'm worried about for efficiency. If i'm bothering to use the browser, you might as well make my visit pretty.

I agree with this. Well said, especially the last sentence.

Lets keep the look that @dignifiedquire has going, but instead of making each product at the top a tab, simple make it a bookmark to that point in the page.

Ah, cool! Yeah. I agree.

Yeah, its going to make the page massive, but we all have amazing internet connections so its not a big deal.

We don't all have amazing internet connections. Seriously. Most of the world doesn't. We're going to have to start thinking about internationalization, too.

On the newest design

• The itemized grey small text is hard to read. Could you make the lines bigger, or less gray?
• Where does 'All Versions' lead to?
• What is the docker image doing?
• What do the other tabs look like?

[dignifiedquire]

@RichardLitt Very quickly on the last questions

What is the docker image doing?

Just a placeholder screenshot from asciinema

Where does 'All Versions' lead to?

Directory listing of all old versions in folders

The itemized grey small text is hard to read. Could you make the lines bigger, or less gray?

Have you made sure you are looking at this at a 100%? Also take a look in the browser version in #14 if that's better there for you.

[RichardLitt]

Have you made sure you are looking at this at a 100%? Also take a look in the browser version in #14 if that's better there for you.

Yeah. Thinking of older users, and if I didn't have my glasses. Hard to read, basically.

[haadcode]

Small updates: https://ipfs.io/ipfs/QmaP8aWEh8Dq6rczhxMAfZXKHZRwRGbodqTf3DZgsoZpUE

Looking good @dignifiedquire!

I don't want to stir the design and discussion too much, but a small suggestion: try and see if the platform version texts look better left-aligned? Although the "arrow" is nice, I reckon it might be slightly easier to read if they all start from the left edge.

| 32bit 64bit
| ARM v6 ARM v7 ARM v8
| 32bit 64bit
| Download

[jbenet]

@dignifiedquire love the new design.