Reporting status mockups

[angela-smithers]

[philipashlock]

From @angela-smithers on #452

Indicators 1 and 2 show the same layout idea. Indicator 3 shows another idea; much smaller, harder to read.

[philipashlock]

Original prototype can be seen at http://jjediny.github.io/jkan/dashboard/

[shaneporter]

hi @JenPark9 - here's the screenshot of a dashboard prototype I received from you:

[JenPark9]

Thank you, Shane! (How did you do that?)

[shaneporter]

1. Took a screenshot of the PowerPoint.
2. Opened in Photoshop, cropped the image.
3. Copied the image (CTRL + C)
4. With focus on the comment, pasted it in, using CTRL + V.

I'm probably being unnecessarily complete here - the most important steps are 3 and 4.

You should see immediate visual feedback after 4, that something is happening.

[JenPark9]

☺ I guess something is “happening.” I am going to post a few more links from NGOs that are looking to provide platforms for the SDGs. We could chat about them during our next call if there is interest. Thank you!

From: Shane Porter [mailto:notifications@github.com] Sent: Wednesday, February 1, 2017 3:24 PM To: GSA/sdg-indicators sdg-indicators@noreply.github.com Cc: Park, Jennifer E. EOP/OMB Jennifer_E_Park@omb.eop.gov; Mention mention@noreply.github.com Subject: Re: [GSA/sdg-indicators] Reporting status mockups--Jen's feeback 1/30 (#445)

1. Took a screenshot of the PowerPoint.
2. Opened in Photoshop, cropped the image.
3. Copied the image (CTRL + C)
4. With focus on the comment, pasted it in, using CTRL + V.

I'm probably being unnecessarily complete here - the most important steps are 3 and 4.

You should see immediate visual feedback after 4, that something is happening.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/GSA/sdg-indicators/issues/445#issuecomment-276771230, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ATtsql4R2-Lne9Vnp12P65-6LhoiFkldks5rYOnhgaJpZM4LrZWX.

[angela-smithers]

Here is a rough layout based on discussions from the 31st and the PowerPoint

[angela-smithers]

outlines are added; the red hex color should be #e5243b as specified in the guidelines put out by the UN

[angela-smithers]

using a dark background for "stop light" concept

This is a version using grayscale. The progression is similar to what you would see on active.com when registering for RunDisney

[JenPark9]

Angela, Thank you for this. I am thinking that the Reporting Status by Goal page would be under the Reporting Status tab, and would not need the list on the left. Then, for each reporting status by goal, we would want the thermometer approach, not the single button approach.

So, it would be Reporting Status by Goal Goal 1 ICON Poverty End poverty in all its forms everywhere [xxxxx--000] Where x=green/reported --=yellow/producing statistics 000=red/exploring data sources and the amount of each color in the thermometer would be driven by the percentage of that goal's indicators by status. So, if Goal 1 had 10 indicators, then xxxx=5 of 10 or 50% green reported --=2 of 10 or 20% yellow/producing statistics 000=3 or 10 or 30% red/exploring data sources And this would be repeated for each goal.

The Reporting Status by Indicator might appear by clicking the icon under the Reporting Status by Goal page, and/or replace the current list of indicators under the Statistics tab.

[rtwell]

for these status markers: I think these run the risk of looking like switches, rather than indicators or status bars. I wonder if we could use a single status mark per indicator? While this example is not accessible, it demonstrates what I mean: To be accessible, the far right column would need a letter or an icon per status for folks with visual impairments. Does this make sense?

[JenPark9]

Thanks, Ryan. We have moved on from those icons for the same reasons you’ve mentioned. I think Angela has the latest. Stay tuned!

From: Ryan Thurlwell [mailto:notifications@github.com] Sent: Wednesday, February 15, 2017 10:49 AM To: GSA/sdg-indicators sdg-indicators@noreply.github.com Cc: Park, Jennifer E. EOP/OMB Jennifer_E_Park@omb.eop.gov; Mention mention@noreply.github.com Subject: Re: [GSA/sdg-indicators] Reporting status mockups--Jen's feeback 1/30 (#445)

for these status markers: [image]https://cloud.githubusercontent.com/assets/12564977/22981473/1c8d7f48-f362-11e6-9e5a-d2e2ffd446ff.png I think these run the risk of looking like switches, rather than indicators or status bars. I wonder if we could use a single status mark per indicator? While this example is not accessible, it demonstrates what I mean: [image]https://cloud.githubusercontent.com/assets/12564977/22982058/903e7194-f363-11e6-80e8-7bd6c363605d.png To be accessible, the far right column would need a letter or an icon per status for folks with visual impairments. Does this make sense?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/GSA/sdg-indicators/issues/445#issuecomment-280048198, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ATtsquRPsEHMNwoRpa8NAx8nRL0AOcWHks5rcx53gaJpZM4LrZWX.

[shaneporter]

hi @rtwell, I'm Shane, and I'm working on the UK SDGs website.

The single status mark per indicator is a good way to go; perhaps it could be bigger, with text inside it. In addition, a specific shape be used to visually distinguish them.

[JenPark9]

A few other thoughts So, the indicator status is an ordered categorical variable. So, we need discrete icons displaying "progress" without implying how much progress.

What if we used the moon style used by consumer reports? A full moon = not started, half moon=in process, new moon (black)=done. 🌕🌓🌑 Or, we could do a task list: box= to do, swirl=work underway, check=done. ◻🌀 ✅ Or, an evocative icon: magnifying glass=we are looking for data, clock=working on production, graph=statistics reported. 🔍🕙📊

[ChristalynSM]

I like the evocative icon idea, but I wonder if it will require a little more effort from users to decode what we mean compared to the moon style, which only requires a glance to realize it's communicating progress status.

Like the moon idea, we could consider using a speedometer image. The arrow pointing at the 0, 50, and 100 positions respectively. This could also incorporate color, starting with red on the left side of the speedometer and transitioning to green on the right side. Something sort of like this:

[JenPark9]

This is good with its simplicity, but the outcomes being measured are not continuous and the dial could suggest otherwise. (The reporting status for an indicator could not be 33% complete, for example.)

Sent from my iPhone

On Feb 16, 2017, at 10:35 AM, Christalyn Steers McCrum notifications@github.com<mailto:notifications@github.com> wrote:

I like the evocative icon idea, but I wonder if it will require a little more effort from users to decode what we mean compared to the moon style, which only requires a glance to realize it's communicating progress status.

Like the moon idea, we could consider using a speedometer image. The arrow pointing at the 0, 50, and 100 positions respectively. This could also incorporate color, starting with red on the left side of the speedometer and transitioning to green on the right side. Something sort of like this:

[image]https://cloud.githubusercontent.com/assets/21144812/23027805/7cfae506-f433-11e6-83fa-6c3fba7c6d26.png

- You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/GSA/sdg-indicators/issues/445#issuecomment-280364224, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ATtsqhXWpWtZjtJRCVTSivhIXk6kAFHKks5rdGyhgaJpZM4LrZWX.

[angela-smithers]

Using the Font Awesome icons, here are some quick layouts/views for the latest suggestions: This would be fa-circle-o [], fa-adjust [], fa-circle []

[angela-smithers]

This would be fa-search [], fa-clock-o [󰀗], fa-bar-chart []

[angela-smithers]

one more ... fa-square-o, fa-superpowers, fa-check

[angela-smithers]

For more icons, here is a link to the Font Awesome cheat sheet : http://fontawesome.io/cheatsheet/

[angela-smithers]

This is a version combining the stop light idea with the symbol idea. Hopefully, it is a great marriage. Please reply with comments and/or questions

[JenPark9]

Angela, Looking good! A. Can we reduce the size of the traffic lights to maybe 2/3 of the current size? B. Can we invert the color of the circle and the interior symbol? So, the checkmark is green against a white background, for example? This may reduce any confusion between the goal icon color and the traffic light. C. Can we remove the < in the thermometer and change the percentages shown to sum to 100%? This will help us keep things straight conceptually. D. Can we move the key to appear flush right with the goal title (in this case, flush right with End poverty in all its forms everywhere)?

[angela-smithers]

[angela-smithers]

Note: 30px by 30px

[angela-smithers]

Oopsy - correct layout now attached

[angela-smithers]

An Accessibility compliant red :: #FF0000 works.

[angela-smithers]

Note: (#000 + #56c02b), (#000 + #e5243b) (#000 + #fcc30b)

[AnnCorp]

Hello All I recently shared with some UK SDGs colleagues the mockup versions I received from @JenPark9 last week. I hope the following feedback is helpful and please do let us know if you have any comments on any of this:

1. Re having the one word goal description eg 'water' and the full goal description - do we need both? Instead of the one word should we use the headings used in the global goals icons instead eg 'clean water and sanitation', especially where a word like 'water' appears in multiple goal descriptions. If we use the global goals description, do we need the full description too?

2. It could be helpful to have more clarity on the numbers of indicators represented by the coloured blocks and maybe have the total number of indicators more closely aligned to the progress coloured bars. Having percentages makes for easier comparison but given the different numbers of indicators, could get the same size block of green, for example, representing different numbers of indicators?

We may also have some further comments next week from Niren Basu, our usability testing lead in the ONS Data Science campus. I hope this would fit with your timings. If you would find it helpful for us to test any future interactive versions, we would be more than happy to do so.

[JenPark9]

Ann, Thank you so much. This is very good feedback. I am flagging another issue item that displays our most recent thinking on the data dashboard, but does not yet address your very good input. See https://github.com/GSA/sdg-indicators/issues/468.

[angela-smithers]

I moved the "Goal Status" images to a separate issue #468 to avoid confusion. This is the editted version based on comments placed in that Issue #468 No, the yellow with the white background did not pass accessibility standards. I added color test info in Issue #470