feat: get-started

[cwaring]

This PR implements the new get started section as part of the upcoming homepage quiz.

Todo:

• add helpful content to sub sections
• add event tracking
• add collapse method
• add method for collecting feedback via the embedded form
• browser testing
• css cleanup
• copy, UX & link review

ref: ipfs-inactive/docs#205

[ericronne]

Leveraging hidden radio buttons for the accordions is cool, but you can't click to close the expanded content, despite the fact that the cursor changes to a pointer. It took me a sec to realize that i have to click open another section in order to close the originally clicked one. Not be a deal breaker, i suppose, but i think users might be a little confused. Fixable without too much labor?

Alternatively, we could simply get rid of the accordions, and expose all of the content by default (credit: @meiqimichelle). Although i don't like adding busy-ness to the page, the header structure would make it easily scannable. And no need to poke around to find the hidden links.

Thoughts @cwaring / @jessicaschilling?

[jessicaschilling]

I think the accordions are important for two reasons:

• Keeps the page less cluttered
• Gives us another click-anchor to throw metrics on (it's a small funnel! what happens after they click to open an accordion?)

cc @ericronne @cwaring

[ericronne]

@jessicaschilling yes metrics will map more directly to our use cases with accordions 👍

The numbers could be misleading if the accordions behave in an unorthodox manner, though, so hopefully the fix there is easy!

[cwaring]

Leveraging hidden radio buttons for the accordions is cool, but you can't click to close the expanded content, despite the fact that the cursor changes to a pointer. It took me a sec to realize that i have to click open another section in order to close the originally clicked one. Not be a deal breaker, i suppose, but i think users might be a little confused. Fixable without too much labor?

Yes, sorry I didn't make that clear in the PR but when I add the event tracking I'll also add some JS to enable the collapsing. There's no native way to unselect a radio button so what you are currently seeing is the baseline experience that provides a level of accessibility even if someone has JS disabled.

[ericronne]

Excellent! I still lean toward a ‘+’ symbol to expand and ‘-‘ to collapse. Barring that, the down caret default / up caret when expanded suffice. I’m setting up a trial with usertesting.com btw :)

Thanks

[terichadbourne]

@cwaring When I'm on this branch in Firefox at zoom level 100% in localhost, the background image doesn't cover my full window:

For contrast, the live site at 100% zoom in Firefox:

[terichadbourne]

The pattern on this site seems to be navy and white backgrounds alternating to distinguish between different sections, but it feels to me like there are now 3 white-background sections in a row. Switching the background of "The web of tomorrow needs IPFS today" to navy would fix this but might mess up the visibility of the illustrations. Is this something that's already been considered?

[terichadbourne]

This is looking great, @cwaring! A few nitpicks...

Others may disagree, but I'd prefer the teal boxes around each of the getting started options to be more visible (less transparency or thicker lines or more color contrast). I love that they get more obvious once I pick them, but I'd like to see them better even before I select an option.

Is it intentional that the last entry has no border? I realize it serves a slightly different purpose but I miss the consistent formatting.

I'd suggest starting to stack content at a wider screen width rather than letting columns get quite this narrow.

It looks like blank space is being held in a third column for a non-existent image or video on some of these:

[ericronne]

The pattern on this site seems to be navy and white backgrounds alternating to distinguish between different sections, but it feels to me like there are now 3 white-background sections in a row. Switching the background of "The web of tomorrow needs IPFS today" to navy would fix this but might mess up the visibility of the illustrations. Is this something that's already been considered?

Good point @terichadbourne. It doesn't bother me much as is, but filling the bg of this panel with a very-light tint of our brand green is one way to visually block off this content. It would also serve to make the content blocks stand out more clearly.

[cwaring]

@terichadbourne can you share what version of FF you are using as I cannot see this issue against v68.0.2.

I've also just created a browserstack account so we can QA UI changes with more diligence in the future as a handful of local VMs is never enough to catch all issues.

[terichadbourne]

@cwaring I just restarted my computer and tried again because another program was freezing up last night. I'm also on Firefox Quantum 68.0.2 and I can't replicate yesterday's problem today, either in Firefox or Chrome. 🤷‍♀️

[cwaring]

@terichadbourne possible that the css was cached or didn't compile correctly before, so that's good news at least ✨

[ericronne]

Here's a version with icons. I think they work reasonably well right-aligned thusly 👇
This forces us to reposition the arrows to the left of the text, which is suitable, and perhaps slightly more user friendly …

Icon svgs

[jessicaschilling]

I want to go for a ride on the big data bucket ferris wheel carnival ride. That's adorable.

[ericronne]

Thanks to ipfs, one day, you will. Soon …

[jessicaschilling]

@cwaring and @ericronne -- I just pushed a big handful of changes to copy and layout of the front page as a result of today's discussions in testing. Eric, you and I have talked through them in a fair amount of detail, so hopefully nothing will seem too new/drastic. Chris, I'm happy to talk through rationale for any of these if you want! I'll actually be awake until 10am your Friday (cf afterfm.com) if earlier is better.

I have two requests for your help if you don't mind; I didn't want to disrupt too much of your code. :)

1. Can we please add the icons and reposition the arrows to the left as Eric mocked up here? feat: get-started #323 (comment)
2. Thoughts on how to differentiate the last bullet in each accordion, since it's an install link and we heard from several folks that these should be a no-brainer click from an expanded accordion? Even maybe an inline icon/emoji sort of approach? (Eric, your thoughts too?)

Thanks so much, both!

Shipping to test our first baseline and will continue to refine.