New download and releases page #412

fdoflorenzano · 2023-01-11T21:07:29Z

This PR adds the re-design of the download page, and adds a separate releases page for older releases as proposed by Raphaël.

Changes:

Updates gatsby node script to create new releases page that points to new page template.
Completely refactors download page template and CSS to fit new design and interaction.
Adds new release page template and CSS to host list of current and older releases.
Adds SVG images for Windows, MacOS, and Linux.
Adds SVG images for link icons in the bottom of the download page where added. Three of them weren't included in the reference, so I went ahead and included three that made sense (to me at least) for the corresponding links. I took them come svgrepo. These can of course be changed and replaced.
The new download page includes the size of download assets, so the fetch releases script was updated to include this data point, and was ran to update all release JSON files. (68 out of 87 file changes come from the updates JSON files).
Text copy was updated in i18n/react-int (both English and Spanish) using Raphaël reference (and translated to Spanish myself).
I found a little inconsistency in the fonts definition file, where two weights for different style of fonts where defined as the same.
I also tweaked a little detail in the Footer, where certain links where blue instead of white.

SableRaf · 2023-01-17T15:46:19Z

Looks great! Just a quick note: It looks like the tooltips are missing and the button design doesn't match the mockup (by the way, the tooltip should be on the Apple Silicon button instead of where it's placed in the mockup). I'll put the rest of the feedback in the code review.

Mockup:

Current version:

SableRaf

Thanks Fernando! Here are some small changes needed. Also see the comment on the PR for some design specific feedback. The icon choices for the bottom links are good!

SableRaf · 2023-01-17T15:34:10Z

i18n/react-intl/en.json

 {
  "home": "Home",
-  "download": "Download",
+  "downloadTitle": "Create with code",


"Create with code, everywhere"

SableRaf · 2023-01-17T15:34:39Z

i18n/react-intl/en.json

-  "earlierReleases": "Earlier releases have been removed because we can only support the current versions of the software. Read about <a href='https://github.com/processing/processing4/blob/main/build/shared/revisions.md'>revisions between individual releases</a>.",
-  "preReleases": "Pre-Releases",
-  "downloadOutro": "<a href='https://github.com/processing/processing4/wiki/Changes-in-4.0'>Read about changes in 4.0 since 3.x</a>.",
+  "downloadIntro": "With its vibrant community and endless resources, Processing is the perfect free and open-source tool for artists, designers, educators, and anyone looking to explore the creative side of coding. Download Processing and start creating today!",


"downloadIntro": "Processing is open source and is available for macOS, Windows, and Linux. Projects created with Processing are also cross-platform, and can be used on macOS, Windows, Android, Raspberry Pi, and many other Linux platforms."

SableRaf · 2023-01-17T15:51:22Z

src/hooks/download.js

-  else if (name.includes('macos-aarch64')) return '(Apple Silicon)';
-  else if (name.includes('linux-arm32')) return '(Raspberry Pi 32-bit)';
-  else if (name.includes('linux-arm64')) return '(Raspberry Pi 64-bit)';
+  if (name.includes('x64')) return 'Intel 64-bit';


Not sure if this is the place to change it but the order of the buttons for Linux should be as follow: Intel 64 at the top, then Rpi 32, then Rpi 64

SableRaf · 2023-01-17T15:57:41Z

Oh and one thing I forgot to mention: the latest release of Processing is now 4.1.2 (and no, it hasn't been updated on the website either 😅)

fdoflorenzano · 2023-01-18T15:01:17Z

Hey @SableRaf !

I just pushes changes based on your comments:

added the latest processing release 4.1.2
tweaked the text downloadIntro and downloadTitle
added the sorting you asked for and applied to all assets, so no Intel is first in all of OS

I have some notes and questions for the couple pending comments:

the button design doesn't match the mockup

It doesn't! This was a design update we did while I was implementing the mockup. We updated it cause the previous design for different download assets didn't visually suggest they are clickable or actionable. The OS images had a similar look and weren't clickable, so we went with a different and more obviously clickable look for them.

It looks like the tooltips are missing

Yes! I left it for later while developing and then forgot to ask about it. I'm not sure whats expected of the tooltip:

Do all assets need a tooltip? Or just Apple Silicon?
What's the text copy for each needed tooltip? Should it also have a translated version?
What's the data in the bottom of the tooltip? Does that come from the GitHub release data?

SableRaf · 2023-01-18T19:10:52Z

It doesn't! This was a design update we did while I was implementing the mockup. We updated it cause the previous design for different download assets didn't visually suggest they are clickable or actionable. The OS images had a similar look and weren't clickable, so we went with a different and more obviously clickable look for them.

Thanks for the clarification! That brings up a tricky conceptual issue with the design. Ok, let's work through it :)

The OS images where meant to be clickable, similar to the 1Password download page. The thing is they can get away with it because they only have one possible download per OS, but in our case it complicates the UX flow.

The version text below is similar to what you can find on the Blender download page where it is not clickable or actionable as you correctly pointed out. It's also meant to act as additional information for the download button itself so it is better suited as a sort of caption for it.

Alright, here's a proposed design that solves those issues by reorganizing the information and using radio buttons for selecting the versions:

And with the tooltip:

The idea is to show the versions only for the currently selected OS. Note that I separated the Raspberry Pi releases for clarity and to emphasize the "runs on any platform" angle:

Do all assets need a tooltip? Or just Apple Silicon?

Yes, all assets should have a tooltip.

What's the text copy for each needed tooltip? Should it also have a translated version?

Supported OS versions + release date.

Windows: "Tested on Windows 10. Untested on Windows 11 but should work."
macOS Intel 64-bit: "Compatible with macOS 10.15.7 (Catalina), 11 (Big Sur), and 12 (Monterey)"
macOS Apple Silicon: "Compatible with M1 and M2 processors. Tested on macOS 12 (Monterey)"
Linux 64-bit Intel: "Tested on Ubuntu 22.04."
Raspberry Pi (32-bit ARM): "This is the only 32-bit platform that is supported with Processing 4."
Raspberry Pi (64-bit ARM): "Not a ton of people are 64-bit with their RPi devices yet, but releases are happening."

What's the data in the bottom of the tooltip? Does that come from the GitHub release data?

The timestamp for the release can be found in the JSON file for the release (e.g.: processing-1289-4.1.1.json) under publishedAt. The md5 and sha256 are not necessary right now.

fdoflorenzano · 2023-01-18T22:10:08Z

Thanks for the text and comments! Will work on them during the week, and probably will have a talk with Rune and Dana about the designs.

Just to clarify about your proposal, what's the interaction flow you expect? What's clickable? What happens when clicked? Which clicks actually trigger a download?

SableRaf · 2023-01-19T10:02:55Z

Just to clarify about your proposal, what's the interaction flow you expect? What's clickable? What happens when clicked? Which clicks actually trigger a download?

Thanks for your question! There are two scenarios:

A) The OS detection picked the right version for the user: they click on the big blue button to trigger the download. Done.

B) The OS detection wasn't successful or the user needs the Apple Silicon, or RPi versions:

Click on the OS icon (the whole square area around the box should be clickable) for the desired system. Note: there should be a hover state for the OS button.
If needed and available, click on the radio button for the desired version (at the moment, this only applies to macOS and RPi). Also needs a hover state and the whole rectangle should be clickable
Optional: click on the info button to see the tooltip
Click on the big blue button to trigger the download. Done

Note: The OS detection doesn't have to be perfect since the OS selector allows users to quickly switch to their desired system.

runemadsen · 2023-01-19T14:02:03Z

Just reading up on this discussion! I don't feel too strongly about the current layout, although I do think it's a pretty simple UX flow where you click the big blue button or click one of the more specific download links below. Everything is one click.

If we do want to change it to multiple clicks with the proposed radio boxes, I think that could work too, but I'm a bit concerned that we're adding options below the download button that affects the state of the download button. That's a bit unexpected, and I would be in favor of moving the download button below the OS selector if we go that direction.

@fdoflorenzano @SableRaf Thoughts?

SableRaf · 2023-01-19T15:59:54Z

I don't feel too strongly about the current layout, although I do think it's a pretty simple UX flow where you click the big blue button or click one of the more specific download links below. Everything is one click.

The concern I have over the current layout is that it brings back the "too many choices" issue the new design was meant to solve.

I agree that the "surprise radio buttons" isn't the best. We could show the radio buttons at all time and make it also possible to click directly on the radio button to select the OS instead of the extra step of clicking the OS button then radio button, at the cost of more visual clutter.

Putting the download button below would improve the B flow but add friction to the A flow. Another tradeoff 🤔 Also it might make the placement of the "caption" a little more awkward but that's not so bad. I can try an mock this up.

SableRaf · 2023-01-19T16:28:17Z

Ok I tried to reorganize things. It brings a bunch of issues however:

When at the top, the download button acted as a headline of sorts (especially since the copy now says "Create with code.." instead of "Download Processing"). When bringing the button below, it gets more difficult to quickly grasp what this page is about.
The metadata under the button was colliding visually with the "older versions" text so I tried swapping it with the bottom buttons but the result doesn't flow as well as before.

I would suggest keeping the button above but making the radio buttons visible even when the OS isn't selected. It is a little more cluttered but that's a compromise I think we can live with 🙃 If you have other suggestions or ideas, let me know!

With the button below:

With the button above:

fdoflorenzano · 2023-01-19T18:43:07Z

Thanks for the explanations! Going through the rationale behind the decisions made me think of another alternative.

This is trying to:

Reduce the amount of choices proposed initially, so that flow A is well covered and users are pointed to it. To achieve this, other OS versions aren't shown initially, but are available after clicking the OS rectangles. The options are also buttons that directly start the download of the asset.
Reduce the amount of steps to also achieve flow B. Instead of using a single download button, each asset can be downloaded by directly clicking on it. So instead of 3 clicks, it would only bee two: select OS --> download asset. The big download button is also moved out of the OS section so that it's visually (and mentally) separated.

SableRaf · 2023-01-19T19:16:23Z

That's a very good solution to avoid unexpectedly changing the state of the download button!

However, the buttons don't read clearly as download buttons. How about something like this? And putting the info button outside of the download button to avoid nesting clickable areas?

fdoflorenzano · 2023-01-19T19:48:26Z

ow about something like this? And putting the info button outside of the download button to avoid nesting clickable areas?

I like that! I'll go forward with this approach :)

SableRaf · 2023-01-20T10:02:39Z

Thanks @fdoflorenzano :)

I explored the design a little further and I feel like there is a risk that many Apple Silicon users would download the Intel 64-bit version by mistake. I propose the following small tweak:

Current design: the Button says "Download Processing 4.1.2 for macOS". If you have an Apple Silicon Mac, you have to notice the small text that says "Intel 64-bit" and know what it means, or click the info button to maybe notice this is not the right version for you.

Proposed tweak: Add a line of text that says "Got an M1 or M2 CPU? Download the Apple Silicon version instead." with a link that downloads the Apple Silicon version.

fdoflorenzano · 2023-01-25T13:19:35Z

@SableRaf I just pushed the latest tweaks including the warning for Apple Intel and mobile layouts!

SableRaf · 2023-01-26T19:01:58Z

Thanks @fdoflorenzano! It looks amazing. Here are a few items of feedback:

Main download button

The text should be slightly lower (padding-top: 0.15em on the span element seems to work). Same for the main download buttons
The os-bit should also have a bit more room to breathe. margin-top: 0.8em on the div seems to do the trick.
The button text should say "Download Processing 4.1.2 for Windows" or "Download Processing 4.1.2 for macOS", Linux, RPi (though we don't really need to detect Raspberry Pi)

Before

After

Tooltips

The color of the tooltip is the same as the download buttons, which creates a confusing visual experience.
The content could also use a little more padding.

OS detection
Would there be a way to also detect Apple Silicon? Even if it requires some feature detection that isn't 100% reliable, we could catch a number of users who may otherwise get the Intel version by mistake. cc @benfry

Thanks again for all your work on this update. I'm really excited to launch the new page and it couldn't have happened without everyone at DSI!

SableRaf · 2023-01-30T15:54:44Z

I just got some updates for the tooltip text from Ben. I can make those changes myself later if you prefer. Just putting this here for reference.

Windows:
"Compatible with Windows 10 and 11. For best compatibility, we recommend Windows 10."

macOS Intel 64-bit:
"Compatible with macOS 10.15.7 (Catalina) through macOS 13 (Ventura). macOS 12 (Monterey) recommended."

macOS Apple Silicon:
"Compatible with M1 and later processors. Where possible, we recommend macOS 12 (Monterey)."

Linux 64-bit Intel:
"Tested and supported on Ubuntu 22.04, but will work with most major distributions."

Raspberry Pi (32-bit ARM):
"Latest version of Raspberry Pi OS is recommended."

Raspberry Pi (64-bit ARM):
"Latest version of Raspberry Pi OS is recommended. The 64-bit release Raspberry Pi OS is newer, so if you have issues, try the 32-bit version."

fdoflorenzano · 2023-01-31T12:25:13Z

Thanks for the feedback @SableRaf! Just pushed another round of updates.

Main download button

All considered and tweaked as proposed.

The color of the tooltip is the same as the download buttons, which creates a confusing visual experience.

Yeah that;s true, I added a light border so there's more of a visual separation to the background.

The content could also use a little more padding.

I added a little bit more to the horizontal padding.

I also tweaked a little z-index issue I found the tooltip buttons had with the donate banner; and fixed the positioning of the tooltip when too close to the right of the screen.

OS detection
Would there be a way to also detect Apple Silicon? Even if it requires some feature detection that isn't 100% reliable, we could catch a number of users who may otherwise get the Intel version by mistake.

I looked a bit into it and I couldn't find a well established and reliable way of doing it. Some approaches don't work in all browsers and even may break soon because the base API is subjected to change. There are some visual indicators for the Apple Silicon case to realize what they are downloading, and I'm also under the impression they usually have to check compatibility for their software.

I just got some updates for the tooltip text from Ben.

Also updated these and their translation!

SableRaf

Tested locally and everything looks good to me! I recommend that we merge and include the new download page in the next release of the website. Thanks to Dana Elkis-Blanks, @fdoflorenzano, @runemadsen and the whole DSI team! ✨

fdoflorenzano · 2023-02-01T13:41:13Z

@SableRaf amazing! Thanks so much for the feedback! it made for a better result at the end.

Do you want me to merge or should I leave it to you to correctly time it? I'm not sure how you do it over here haha

runemadsen · 2023-02-01T13:44:59Z

Amazing! Can't wait to see this in the real world :)

SableRaf · 2023-02-01T13:50:37Z

@fdoflorenzano I will merge it myself, thanks for asking! I'd like to ask for input on timing the release.

new download and releases page

76a5d69

fdoflorenzano changed the title ~~new download and releases page~~ [WIP] new download and releases page Jan 11, 2023

fdoflorenzano changed the title ~~[WIP] new download and releases page~~ New download and releases page Jan 13, 2023

fdoflorenzano marked this pull request as ready for review January 13, 2023 15:08

fdoflorenzano self-assigned this Jan 16, 2023

SableRaf self-requested a review January 17, 2023 14:11

SableRaf requested changes Jan 17, 2023

View reviewed changes

fdoflorenzano added 4 commits January 17, 2023 15:33

update latest Processing release to 4.1.2

85fe0d3

tweaks on download page text

cf624bf

adds download asset sorting

0f74a21

fix: merge conflict with releases

c4eb0cd

fdoflorenzano requested a review from SableRaf January 18, 2023 15:01

fdoflorenzano added 3 commits January 20, 2023 17:57

layout re-design progress

fcbc640

adds apple silicon download url to apple warning

41d7669

final tweaks for mobile layouts

c55712e

updated another round of feedback

029f40b

SableRaf approved these changes Feb 1, 2023

View reviewed changes

SableRaf merged commit 6751479 into main Feb 6, 2023

SableRaf deleted the new-download-page branch February 6, 2023 15:54

New download and releases page #412

New download and releases page #412

Uh oh!

Conversation

fdoflorenzano commented Jan 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SableRaf commented Jan 17, 2023

Uh oh!

SableRaf left a comment

Choose a reason for hiding this comment

Uh oh!

SableRaf Jan 17, 2023

Choose a reason for hiding this comment

Uh oh!

SableRaf Jan 17, 2023

Choose a reason for hiding this comment

Uh oh!

SableRaf Jan 17, 2023

Choose a reason for hiding this comment

Uh oh!

SableRaf commented Jan 17, 2023

Uh oh!

fdoflorenzano commented Jan 18, 2023

Uh oh!

SableRaf commented Jan 18, 2023

Uh oh!

fdoflorenzano commented Jan 18, 2023

Uh oh!

SableRaf commented Jan 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

runemadsen commented Jan 19, 2023

Uh oh!

SableRaf commented Jan 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SableRaf commented Jan 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fdoflorenzano commented Jan 19, 2023

Uh oh!

SableRaf commented Jan 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fdoflorenzano commented Jan 19, 2023

Uh oh!

SableRaf commented Jan 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fdoflorenzano commented Jan 25, 2023

Uh oh!

SableRaf commented Jan 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SableRaf commented Jan 30, 2023

Uh oh!

fdoflorenzano commented Jan 31, 2023

Uh oh!

SableRaf left a comment

Choose a reason for hiding this comment

Uh oh!

fdoflorenzano commented Feb 1, 2023

Uh oh!

runemadsen commented Feb 1, 2023

Uh oh!

SableRaf commented Feb 1, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fdoflorenzano commented Jan 11, 2023 •

edited

Loading

SableRaf commented Jan 19, 2023 •

edited

Loading

SableRaf commented Jan 19, 2023 •

edited

Loading

SableRaf commented Jan 19, 2023 •

edited

Loading

SableRaf commented Jan 19, 2023 •

edited

Loading

SableRaf commented Jan 20, 2023 •

edited

Loading

SableRaf commented Jan 26, 2023 •

edited

Loading