onboarding experience to use website

[cypressf]

Figure out how to tell people what to do. Maybe add a blurb above the map and data selection saying that you can combine the data.

[cypressf]

Page subtitle

An open-science, visualization platform to combine, overlay, and diagnose landscapes of socio-economic, health, and environmental risk and injustice.

[cypressf]

• [x] add subtitle to page
• [x] move overlays and "download" button below map
• [x] add title above map
• [ ] ~make current selection bolder, darker, more colorful, like current data tab~
• [x] add first pass onboarding

I decided to leave the current selection as-is, because the map title does plenty to highlight what's currently selected

[cypressf]

Options for onboarding

First pass

In the Multi-system metrics tab, above the map:

You can select multiple metrics and adjust their relative importance to view the combined impact. [show me a demo] To see additional and supporting data select the other categories.

clicking [show me a demo] expands a video of selecting multiple metrics and dragging the weight slider.

Potential more complex version

Onboarding interactive tooltip tutorial when you first view the page.

[cypressf]

I did most of the first pass. I still need to

• [ ] create a short video of selecting multiple datasets, and sliding weight
• [ ] make a [show me how] button that expands and plays the video

[cypressf]

While I was at it, I added a link to the source code on github and made the footer prettier

Before

After

[cypressf]

And here's the changes to the rest of the site

Before

After

[azzacasch]

Awesome Cypress.

Some quick feedback (and a couple may be lingering gremlins on your to-do list) - I just thought I’d pass these along while I’m looking and thinking about it.

• the information bullet (the ‘i’ with the circle around it) that describes the normalized value still seems to float around on my browser (using Safari). Are you seeing that?

• The right edge of the “Feedback” box cuts out half of the “k”.

• Can you center “Multi-Systems Triage” above the quick description, and make it bold font?

• Overall, can we take advantage of different yet complimentary fonts and embolding to highlight certain things? Like for example,

  • Bold font the Risk Metrics and Environmental Justice Headings
  • Maybe different font for the multi-system metrics and data tabs?

• We had talked about using a different shading for when metrics are selected, what about a light shade of blue (as opposed to gray)?

• For the shaded area that describes what the user can do - i.e. starts with “You can select…” - can you see what it looks like if change that box shading to a light green (similar to the color scheme of the joint program logo in the upper right) - and possibly remove or reduce the spacing to the selection tabs above it?

Thanks!
—a

On Jun 1, 2021, at 6:17 PM, Cypress Frankenfeld @.***> wrote:

While I was at it, I added a link to the source code on github and made the footer prettier

Before

https://user-images.githubusercontent.com/443397/120396989-86dfd180-c305-11eb-927b-8d7396d73b5b.png After

https://user-images.githubusercontent.com/443397/120396987-86dfd180-c305-11eb-99a4-19e73c11031b.png — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cypressf/mit-climate-data-viz/issues/176#issuecomment-852511884, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACYYCPK63RRGFKCMXRJZMJ3TQVL7PANCNFSM45A534RQ.

[cypressf]

• the information bullet...

Yes. I tried fixing it earlier and it seems like it's due to a bug in safari's implementation of svg graphics. I'm going to have to find a workaround which might be more effort. I might end up moving it somewhere other than next to the legend. Here's the issue for tracking that https://github.com/cypressf/mit-climate-data-viz/issues/164

• The right edge of the “Feedback” box cuts out half of the “k”.

I'm not seeing that in my version of Safari, 14.1.1 (16611.2.7.1.4), or Chrome or Firefox. Can you send me a screenshot with your web browser and version?

• Can you center “Multi-Systems Triage”...
• Overall, can we take advantage of different yet complimentary fonts...
• We had talked about using a different shading...
• For the shaded area that describes what the user can do...

This is going pretty deep into a rabbit hole of formatting and small tweaks. I'll take the comments into account when restyling but I don't want to promise to do every single tweak suggested. (When I'm designing, I try out multiple variations to see if any of them look better or worse, and pick my favorite).

[cypressf]

You can select multiple metrics and adjust their relative importance to view the combined impact. To see additional and supporting data, select the other categories. -> Select multiple metrics

Map title looks off. Try out different styles

[cypressf]

checkmark next to selection items to indicate multi-select

[cypressf]

tutorial video, describing what to do with voiceover

https://www.climateinteractive.org/tools/en-roads/ has a video tutorial we could use as an example