Visual design: State profile pages

[meiqimichelle]

This will come from #1347 and can hopefully begin a week from today.

[ericronne]

@gemfarmer here are some primordial oozings for the state template.
Note that — as an experiment — i've narrowed the overall grid from 1024 to 960. Feel free to use the current grid for now, and we can explore the idea of narrowing in a separate issue.

Sketch file

I've left the process section in, but as we discussed, maybe we should fold that into a tab on the fees-by-commodity chart.

Reference image...

[ericronne]

@meiqimichelle @gemfarmer here's an alt label for the commodity revenues tab...

[ericronne]

@meiqimichelle should that ^ table have a year label?

[meiqimichelle]

@ericronne Yes! It will always show the most recent year (this is our idea anyways). Then, the breakdown tables/sparks will show the trends and various years.

[ericronne]

@meiqimichelle @gemfarmer @shawnbot

Let's call this "v1.0" (tho i haven't yet designed the disbursements chart, and i'm sure there are fine pts in here left to iron out).

Checking out of EITI for a week or so, but please reach out with any questions &c!! I'm only a DM or appear.in meetup away...

Sketch file on gdrive

Reference

[ericronne]

@gemfarmer @shawnbot @meiqimichelle What do you think of this design for the expanded commodity revenues tables?

💎 Sketch file on gdrive

[shawnbot]

@ericronne I like it!

[ericronne]

Cool. And here's a new notion for the big table: adding gray backgrounds so the bars in the chart read more obviously. It's more "ink" on the page, but seems interesting to me. Y'all?...

[shawnbot]

YES! Thank you @ericronne, this is so much better.

I'd love it if we could keep the total bars for each commodity, though. Maybe we could just stick a line break before the other cells so that the bars and dollar figures all line up?

[ericronne]

Thx @shawnbot. I thought it might be cool to pull the totals off to the own tabbed section, something like below. Probably even keep the vertical spacing the same, so there's less of a visual jump between tabs. (Note: spacing here is too loose, i've revised a little since)

[meiqimichelle]

<3 the design for the drop-down detail charts. I'm thinking it would likely be OK in mobile, too, which loverly.

As for the updated bars, I like that the little pieces seem more distinct with the bar to back the up. I’m not sure about what the gray part means though. To me, my brain is thinking now that the small piece is a part of a total, and that the total is represented by the gray area — was that what you were going for? ​It also looks to me like the 'total' = the largest green in a line.

As for an overall total bar, I like that it's not there anymore because it was confusing that some things-that-looked-like-bars were meant to be parts of one of the same things-that-looked-like-bars -- it wasn't clear to me which was the part and which was the total. Does that even come close to making sense? Hmm.

However! I bet there were reasons for the adjustment and it was to start to get at some of this total-or-not confusion, so I bet we're very close to getting the design clarified in a way we all like.

[shawnbot]

It's definitely a little confusing. Even as designed above, though, there's still some ambiguity: is the third bar in a row a portion of the row's total? I think we need to do some testing with our colleagues to see what they think, and maybe present a couple of different options with some real data.

[ericronne]

I'll create an envision version for easier testing, with clickable tabs

[usEITI]

👍😂📣🌋

On Wed, Jun 8, 2016 at 6:09 PM, Eric Ronne [email protected] wrote:

Cool. And here's a new notion for the big table: adding gray backgrounds
so the bars in the chart read more obviously. It's more "ink" on the page,
but seems interesting to me. Y'all?...

[image: image]
https://cloud.githubusercontent.com/assets/9259185/15912710/91933e32-2d9b-11e6-8a10-a7e85f2b53f7.png

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#1348 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ANnOZORILhm4kHh4OctcTkhKY7KawPtwks5qJz2MgaJpZM4H6Fmz
.

Judy Wilson
Program Manager USEITI Secretariat *
*Office of Natural Resources Revenue

[email protected] [email protected]
202-208-4410

[coreycaitlin]

Yay yay yay for everything, and especially for Judy's excellent emoji selections.

I'm still feeling like the totals row is throwing off the scale of the charts, but we should probably not change that until after some usability testing.

[ericronne]

I've updated the megachart for the Invision prototype after making the following changes, based on two tests, my gut, and input from the great Ryan Thurlwell!

Here's the test results doc. Feel free to use it for your own testing notes!

Merged the oil bar and gas bar into a single, stacked bar. I felt that the previous design—which split them onto two lines—could've caused some confusion...

This change also serves to reduce the vertical gap between oil&gas and natural gas on the totals tab...

I also added "Totals" to the totals header, to make it more explicit (since testing showed some hesitation here), and boldfaced the numbers there...

Finally, i ghosted the phases header on the totals-tab view. This provides more visual continuity between views, and also indicates to users that phases don't apply here.

[ericronne]

@meiqimichelle @gemfarmer @shawnbot @coreycaitlin

Revised concept based on more rumination!

Let's discuss ...

[ericronne]

Feel free to use the invision comment tool ☝️

[ericronne]

Revised again after addtl testing (results doc)

[meiqimichelle]

@ericronne now that we've moved the megachart work to a separate issue, can we close out this mega-issue in favor of smaller tasks?

[ericronne]

Sure. It's unwieldy. I believe there's a chunk or two in here which is not represented in an issue, but i can create individual issues as needed.