Make the Qubes OS downloads page fully data driven and beautiful

[Rudd-O]

I've moved everything that was text and Markdown into the data file.

I've also taken the liberty of making sure that we have a stunning download page, which takes the user step-by-step through the process, from getting the image to the moment the OS is running on his computer.

I'm not expecting this to be merged "as-is", rather I expect this to generate review improvement requests from you, and then we will be able to merge it.

If you want to see how it looks, launch jekyll serve on a checkout of this branch. I assure you, you will be shocked.

[Rudd-O]

Please help me figure out what to do with the mother fucking CSS :-D

[marmarek]

/cc @bnvk

[bnvk]

No problem! I will looking into this! I'd assign myself to the issue, but I don't have access to doing so!

[andrewdavidwong]

Wow, great work so far!

[Rudd-O]

How is the review of this going? I'd really like to see this go in soon.

[Rudd-O]

Ping.

[marmarek]

@bnvk any opinion here?

I like the table layout, but some details needs to be worked out - for example the title is "Live, experimental and older releases" - then, the third option is "Qubes Release 3.0 (latest stable release)", which doesn't qualify to any of those. I think it should be named like "All download options" or sth like this. Also the obsolete warning should be somehow more emphasized.

What currently is broken, is top of that page - all the buttons are in one narrow (but long) column.
Also not sure about the content of top of this page. Currently we have "Before you download..." section, which indeed isn't great, but have some useful information - for example system requirements and hardware compatibility list. In new layout it is somehow put later in that page.
Also not sure if alternative location (ftp.qubes-os.org vs mirrors.kernel.org) should be really promoted at the top of that page. IMHO there should be just one download button, then a link to a section with all the options (which you've currently named "Pick a live, experimental or older release").

[Rudd-O]

OK, here are my thoughts.

I agree that we should probably move out the featured stable release out of "experimental, live and older releases", because it's obviously not that.

I am interested in learning how you would like me to emphasize the warning. Happy to hear ideas on it.

I don't understand the "broken is top of that page" comment, screenshot please? It doesn't appear that way here.

I'd rather not put the "Before you download" section before the download. We want people to get the software -- that should be the single and most prominent focus of the page, and therefore the first and largest one -- and IF they have any questions, read about them in a separate section which is duly noted. Right now, frankly, it looks a bit goofy and amateurish to put that at the very top.

One download button and "more options" sounds interesting, but we do want people to have -- right there exactly where their eyes land at first -- the secondary options to download it from BitTorrent (much faster) or from the upstream server qubes-os.org. In my view, it would be not nice to the user to demand they skip to a different part of the page in order to do so, because it breaks the 1 2 3 4 step flow.

Ideally, we would A/B test this version and the proposal you're advancing. But I don't know how to go about doing that.

Finally, I would advise not letting the perfect be the enemy of the good. There are certainly improvements to be made, important improvements, but perhaps we can address those incrementally after we have gotten the first iteration out. Release early release often.

[marmarek]

I am interested in learning how you would like me to emphasize the warning. Happy to hear ideas on it.

Bold?

I don't understand the "broken is top of that page" comment, screenshot please? It doesn't appear that way here.

I'd rather not put the "Before you download" section before the download.

It may not be exactly "before" that download button. But somewhere near it, visible without scrolling.

One download button and "more options" sounds interesting, but we do want people to have -- right there exactly where their eyes land at first -- the secondary options to download it from BitTorrent (much faster) or from the upstream server qubes-os.org. In my view, it would be not nice to the user to demand they skip to a different part of the page in order to do so, because it breaks the 1 2 3 4 step flow.

Generally forcing user to make a choice isn't a good idea. But also making it unnecessary hard to to apply the choice user have already made is bad. We want the download page to be easy: if user desire is to "download Qubes OS" it should be obvious what to do ("click this big download button", not "oh, there are 3 releases, each of them have 4 download options, I'm lost"). But also if user desire is to "download Qubes OS using BitTorrrent" it should be easy. I think "other download options" is a good compromise (as long as there is such link, not manual scrolling through a long page).

Finally, I would advise not letting the perfect be the enemy of the good. There are certainly improvements to be made, important improvements, but perhaps we can address those incrementally after we have gotten the first iteration out. Release early release often.

Yes, IMHO the only real blocker is that button layout visible on screenshots.

[Rudd-O]

I don't see anything broken on the screenshots. The way it renders is how it's meant to be rendered.

Ordinarily, there would be an option for BitTorrent download of the featured release at the top of the page -- it would be a separate secondary (white) button to the right of "Via HTTPS from ftp.qubes-os.org" in the first section "GET QUBES OS". But we haven't produced a BitTorrent option for 3.0 stable, and that is the simple reason why it does not appear. Otherwise you would see two secondary buttons. If you would like to see how it looks like when there's a BitTorrent option, change the featured release (in the data file) to be the release name of the 3.1 release that has a torrent file. Then you'll see how it looks like with the BitTorrent Option.

The intention behind the BIG BLUE button and the secondary white buttons is to present to the user the most commonly-chosen option so he doesn't have to think about it. BUT, if he would rather use a different option, they are right there. No need to scroll, no need to jump to a different part of the page (which could cause him to miss the rest of the steps, because people forget and short attention spans are a problem), if user wants BitTorrent, user should be able to click the BitTorrent link right there.

My intention is that the user be able to do everything about Qubes OS without needing to scroll too much, or see an overwhelmingly complex list of things (how it was before).

Obviously, the option to hide the featured release from the list of older / experimental releases, is something I have to look into and fix. And, naturally, the way the blue links line up also bothers me quite a bit. The only link I believe belongs there, is the link "how to upgrade to 3.0", which could help existing users save a few gigabytes of bandwidth. The other stuff belongs somewhere else.

I believe the entire "before you download" section was wrongly conceived from the start. First of all, it was just a mostly random collection of information, some of which is important but was being showed at an inopportune time in the workflow, and some of which is frankly unimportant and most people just skip it (I know I did). I think the correct way to organize and deliver the necessary information must be rethought from the ground up, in such a way that it doesn't appear as a roadblock to the new user, but also isn't easily-missed (otherwise you get unnecessary emails sent to the mailing list).

[Rudd-O]

I have addressed most of your comments in a version of the page that looks substantially different, hopefully better. The featured release no longer appears in the bottom experimental and older release list.

[Rudd-O]

As a bonus, now no scrolling whatsoever is required to read all steps.

[marmarek]

It's slightly better now. I think the current release should be included in full table below, just its title needs to be adjusted.

Now it looks like this:

@bnvk any opinion?

[Rudd-O]

All the information of the current release is included in the first "DOWNLOAD" chunk as well as the second "VERIFY" chunk. I don't think we need to repeat ourselves. If, however, we must, then the work to do that is very trivial.

[bnvk]

Sorry for my delayed feedback, I've been really sick all last week. I'm glad to see good progress has been made, thanks @Rudd-O :)

That said, there's a handful of things I want to change in this, do you want my notes here, or should I just do them myself?

[marmarek]

If you could handle this to the end @bnvk , that would be great. Thanks! :)

[Rudd-O]

Notes here would be preferable, but patches on top of my patches along with the notes would be even BETTER.

[Rudd-O]

Get better soon @bnvk !

[Rudd-O]

Ping @bnvk :-)

[Rudd-O]

(Merging conflicts now...)

[marmarek]

To speed things up, @bnvk do you think @Rudd-O's page (without your adjustments) is worse than the current one? If not, I think we can merge it just now, and improve later.
For your convenience there is a screenshot above.

[bnvk]

@marmarek just sent a pull-req with enough improvements to @Rudd-O work to merge now!

[marmarek]

Thanks @bnvk and @Rudd-O !

[Rudd-O]

I donno what to say, @bnvk @marmarek

Some things have clearly improved but the main effort I put in, I feel it was for naught. I don't know exactly what happened -- I need to see the diff between your commit and my branch -- but the page now looks pretty horrible and the semantic meaning of it -- the part I put the most effort in -- is gone. My primary goal was to fix how disorienting the previous page was. This one is more disorienting to the visitor.

I know I am not a graphic design professional, nor am I a copy editor, but judging from the results, I can spot, and I'll try to explain why, at least these flaws in what went in (compared to what I had posted) make the current page more disorienting:

• The buttons aren't the same width (looking horribly misaligned).
• The spacing between the buttons is gone. They look smushed together, and the font is microscopic, detracting from the call to action concept behind the buttons as I designed them.
• The repetition "Download now" makes the download page look like a pirate site with DOWNLOAD NOW clickbait ads.
• There is an inconsistency between "Hashes/Signature" and "Get signing key".
• The buttons are no longer centered either.
• The lists are not even aligned with the buttons anymore.
• The last step -- Enjoy -- is totally gone. That was arguably the most important step, leading the user to the critical user workflow step of "okay, I am done installing, now what?". Totally gone.
• All of the carefully-chosen wording that I had for hours researched, has been replaced with tech-speak. "Download ISO" (which is a false statement that does not apply at least one case). "Verify Your Download". There's a reason things were worded how they were, and it was precisely to avoid calling attention jargon.
• The height of each column is obscenely tall, and disproportionate / unbalanced between columns.
• The normal order of things in which most humans read and execute lists of things -- up to down -- is violated. At first glance in the page, there is no clear button to click, because there are two blue buttons aligned in the same horizontal, instead of there being a single blue button per step, all of which must be followed. So now the user needs to comprehend text before taking positive action, and many users will be lost at this part of the page, just because of this apparently unimportant change that is quite important.

Worst of all, none of these (correction after the fact: only aesthetically disturbing) and semiotically confusing changes went through review. I could have been asked why did you do X thing in Y way, and what's the rationale, and what not. I wasn't really consulted, after all the work I put in. It just feels as if what happened was "well, yeah, the coding changes behind the page, let's take those, but all of these unimportant 'looks' changes, let's nuke them and play Web Design Tetris with these boxes instead". Sigh. My coding was literally five minutes, it was the design changes, the entire semiotic process of guiding the user from desire to "you got an awesome thing now and it works!", that was the thing I put the days of effort in. The end result is more disorienting than the previous page.

It feels pretty demeaning, to be honest. It is as if none of the details I had put days of work into, including all the successful and prominent download pages from other products that I had researched, had been considered. Maybe my work was shit to begin with, but even if that was the case, I'm terribly disappointed with how this was handled, both with how dreadfully long it took, and what the end result was. Very discouraging.

In the future, you will need to hire professionals like a graphic designer or a copy editor to fix the communications and visual trust problems I attempted to fix, which the page as committed does not (makes them worse). I suggest focusing on how the Subgraph OS presentation absolutely dominates this market right now.

I probably will not be contributing more improvements to the Web site again.

EDIT: it appears that the basis for the commit that ended up merged, was an old commit of mine in the same branch (I had updated the branch to be a single commit, and I recognize the old commit names merged here). That is probably the consequence of a git pull or git rebase missing somewhere.

[marmarek]

Hmm, really strange, on my local copy it looks much better. Some missing CSS or sth?

Oh, I see - it looks good only in narrow layout (when steps are each under another, not in a single row). Probably because now there are three buttons to download (ftp.qubes-os.org, mirrors.kernel.org and torrent).

Temporary disabled one of HTTPS downloads to workaround the problem.

EDIT: it appears that the basis for the commit that ended up merged, was an old commit of mine in the same branch (I had updated the branch to be a single commit, and I recognize the old commit names merged here). That is probably the consequence of a git pull or git rebase missing somewhere.

I've especially merged @bnvk changes over your latest version to prevent such problem.

[bnvk]

@Rudd-O there is merit to some of your comments, thank you for taking time to communicate them!

When I was working locally, there was only 2 downloads of 3.1... I didn't think we had the Torrent file ready and wanted to push something up. In the merging (like you said) something must not have rebased correctly, as a few <hr> and other things were missing and it does not look as I had intended.

This page is still a work-in-progress. There is a few points that inform the changes I made vs. where you were taking things. I really liked the "Enjoy" step, but this isn't the right page for that. I plan to re-add that elsewhere. I elaborated more on this in QubesOS/qubes-issues#1833

That said, there is a certain experience I am slowly working Qubes towards- one aimed at being accessible to non-technical users. I just finished drafting up a usability & UX guide that describes UI / UX steps towards this goal.

It feels pretty demeaning, to be honest. It is as if none of the details I had put days of work into, including all the successful and prominent download pages from other products that I had researched, had been considered. Maybe my work was shit to begin with, but even if that was the case, I'm terribly disappointed with how this was handled, both with how dreadfully long it took, and what the end result was. Very discouraging.

I'm sorry you feel that way. A lot of the work you did with creating the downloads.yml file and the Jekyll logic in the page was very much appreciated and is still in the codebase. Your work was not "shit to begin with" it's just in the future we need to have better dialogue about goals / direction before spending days of time wasted for all parties involved. I hope you are up for more contributions, and I'm happy to try better next time. FWIW, I prefer and believe there are significant merits to using real-time chat (IRC or Jabber) to achieve better understanding and collaborations of this sort.

@axon-qubes @marmarek we should chat in an email thread about how to better coordinate stuff like this and QubesOS/qubes-issues#1833

[andrewdavidwong]

we should chat in an email thread about how to better coordinate stuff like this and QubesOS/qubes-issues#1833

Let's have those discussions in their respective GH issues, unless something needs to be confidential for some reason.