1113249 - Design updates for Shape of the Web

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

This bug is to provide updates and specifications regarding any content or design updates required based on sending SoTW through legal review.

Comment 1

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Agency assets:

Mozilla Design Files. 
https://www.dropbox.com/sh/zkvdnr40wkn0cyi/AADo8yvGTY1jpMnIIHmR6jcta?dl=0

Glyph Icon Sources

Follow designed by <a href="http://www.thenounproject.com/deanoakley">THRIVE - Gold Coast Digital Design</a> from the <a href="http://www.thenounproject.com">Noun Project</a>

User designed by <a href="http://www.thenounproject.com/Luis">Luis Prado</a> from the <a href="http://www.thenounproject.com">Noun Project</a>

Browser designed by <a href="http://www.thenounproject.com/esteves_emerick">Adriano Emerick</a> from the <a href="http://www.thenounproject.com">Noun Project</a>

Wheelchair Accessible designed by <a href="http://www.thenounproject.com/thansidwell">Nathaniel Sidwell</a> from the <a href="http://www.thenounproject.com">Noun Project</a>

Watch designed by <a href="http://www.thenounproject.com/lfc">la-fabrique-créative</a> from the <a href="http://www.thenounproject.com">Noun Project</a>

Comment 2

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Pasting Gregory's email here:
=====
As promised, here is the spreadsheet with the list of infographics for our design review:
https://docs.google.com/a/mozilla.com/spreadsheets/d/1_WiS8YCctcv3j_PNs09epMq1PYicfbszQcCDvgpynaQ/edit

A few comments:

- The doc contains a link to each infographic as well as my existing comments. I added a column for Lee and Ali's comments  and another for Schalk so he can respond to those if necessary.

- You will notice that in a lot of cases, the title or legend is not accurate, please disregard as this is something we will have to fix as part of a general the metadata cleanup and focus on the visualization. There are a few occurrences of the data itself being off/wrong, I have flagged this in comments when this is the case.

- A couple of issues require a new visualization altogether as they are new or we had to use a new data source. These will link to a spreadsheet containing the data so we can discuss the best way to visualize it.

- Lee, Holly, I added a general design review section at the bottom of this doc. Feel free to share your general comments on the site's design here.

Comment 3

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Per our meeting[0], we've confirmed 5 design elements, 2 of which need more information.

1. Creation of a table-style infographic
- http://lorax.work.co/detail/control/openDataStandards
- notes: same basic layout; bundle in groups; type treatment on status; remove dots; remove notes

2. Creation of a mirror bar graph
- http://lorax.work.co/detail/access/localization
- data https://docs.google.com/a/mozilla.com/spreadsheets/d/1a8paNpwBciQh2hihDh0xq2uKmbHDTFjgJnw7h87N8AA/edit#gid=1270942315

3. Creation of a standard bar chart infographic
- affects several issues
- notes: invert to basic vertical chart; keep baseline at the bottom; use existing assets/look

4. (needs info) New icons for accessible infographic
- http://lorax.work.co/detail/access/accessible

5. (needs info) Redesign Open Source graph
- http://lorax.work.co/detail/control/openSource

Lee, how does the 18th sounds for 1-3?

Gregory,

- Please update this bug when you have some more info on 4, 5.

- Lee has some comps for #2. What do you think? I like v2 personally:
    v1: http://cl.ly/image/3S1N1F0X1w3o
    v2: http://cl.ly/image/1o0S2X2k3e2x


[0] 2015-02-10 notes: https://lorax.etherpad.mozilla.org/weekly-checkin

Comment 4

[Lee Tom]

2/18 sounds perfect for 1-3, Cory. I'll let you all know when/if I have mockups to show before then, too. Thanks

Comment 5

[Gregory Jost]

For #2, I guess I prefer v2 as well. v1 is more stylish but v2 seems more clear and versatile as a template.

Comment 6

[Schalk Neethling [:espressive]]

I would also have a preference for v2

Comment 7

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

:leetom - 

We'd like to add one more item to the design elements

6. Convert issue detail views to a single modal style

Reference: http://pmac-lorax-test.s3-website-us-east-1.amazonaws.com/detail/control/openSource

Items include
- adding a "close" feature
- remove About/Legend icons
- remove Vitals navigation at the top & connecting lines
- keep the issue name e.g. "OPEN SOURCE", and determine a static location for this item
- keep Sharing and Email icons
- keep both SoTW and Mozilla logos (necessary for organic/social referrals)

:matej - will you confirm that we don't need to have Tabzilla running on this site? And we can use the wordmark currently on the site (minus the down carrot)?

Comment 8

[Matej Novak [:matej]]

(In reply to Cory Price [:ckprice] from comment #7)
> 
> :matej - will you confirm that we don't need to have Tabzilla running on
> this site? And we can use the wordmark currently on the site (minus the down
> carrot)?

I may have spoken too soon on this. Let's keep Mozilla in the tab, but we can remove the functionality and carrot if we want. Thanks.

Comment 9

[Lee Tom]

I talked to sean about the mozilla/tabzilla branding on the SoTW site, but there was not really a decision either way. We all seem to agree to take the carrot off Tabzilla at very least, but there’s also a version where we can more closely match what’s happening with Firefox Family. See: http://cl.ly/2E1c0K410M0e

Comment 10

[Lee Tom]

Attachment: sotw_open-data-standards_01.jpg

1. Creation of a table-style infographic
- http://lorax.work.co/detail/control/openDataStandards
- notes: same basic layout; bundle in groups; type treatment on status; remove dots; remove notes

Comment 11

[Lee Tom]

Attachment: sotw_languages_02.jpg

2. Creation of a mirror bar graph
- http://lorax.work.co/detail/access/localization
- data https://docs.google.com/a/mozilla.com/spreadsheets/d/1a8paNpwBciQh2hihDh0xq2uKmbHDTFjgJnw7h87N8AA/edit#gid=1270942315

Comment 12

[Lee Tom]

Attachment: sotw_accessibility_01.jpg

4. (needs info) New icons for accessible infographic
- http://lorax.work.co/detail/access/accessible

Comment 13

[Lee Tom]

Attachment: sotw_open-source_usage_01.jpg

5. (needs info) Redesign Open Source graph
- http://lorax.work.co/detail/control/openSource

I simplified the chart, made it bigger and the example here shows only 3 items to compare. I think 4 (as the Legend suggests) would still look clear to users.

Comment 14

[Lee Tom]

Attachment: sotw_generic-bar-graph_01.png

3. Creation of a standard bar chart infographic
- affects several issues
- notes: invert to basic vertical chart; keep baseline at the bottom; use existing assets/look

Comment 15

[Matej Novak [:matej]]

These look great, Lee. Nice work.

On the language graph in comment 11, I wonder if the legend should say something like "Used online" and "Spoken" (or something like that), but we can figure that out as we implement these.

What are the next steps here?

Comment 16

[Gregory Jost]

(In reply to Matej Novak [:matej] from comment #15)
> On the language graph in comment 11, I wonder if the legend should say
> something like "Used online" and "Spoken" (or something like that), but we
> can figure that out as we implement these.
What I have for this graphic (but is not yet implemented) is: internet content / internet population. Open to better ways to say it, just want to make sure it's clear we are talking about online population vs world population.

> What are the next steps here?
I like these. Thanks Lee! I have a couple of questions before we move forward:
- Open source: this is much better. Lee, in your mind, what is the lorem ipsum for (left of the axis)? Would it be possible to have the scale here?
- generic bar graph: this looks good and I see how we could double the columns if needed (similar to the language graph). I want to make sure the layout would work with independent names/labels instead of years. Would we still have enough space if years were replaced by, say, company or country names?

Cory, Ali, Schalk, do you see any potential issue on either cognitive or implementation side?

Comment 17

[Matej Novak [:matej]]

(In reply to Gregory Jost from comment #16)
> (In reply to Matej Novak [:matej] from comment #15)
> > On the language graph in comment 11, I wonder if the legend should say
> > something like "Used online" and "Spoken" (or something like that), but we
> > can figure that out as we implement these.
> What I have for this graphic (but is not yet implemented) is: internet
> content / internet population. Open to better ways to say it, just want to
> make sure it's clear we are talking about online population vs world
> population.

Maybe it's as simple as "Online" and "Offline."

Comment 18

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

I don't see any immediate issues here. I agree that everything looks a lot cleaner.

:espressive - any red flags on these designs?

Comment 19

[Gregory Jost]

(In reply to Matej Novak [:matej] from comment #17)
> Maybe it's as simple as "Online" and "Offline."
But that would be incorrect ;) What we are trying to focus on is the gap between internet content and the languages spoken by *internet users* in the world, so offline doesn't work here. It is all online.

We are staying away from languages spoken offline as it would make partial sense for little content to exist in a language whose speakers are underrepresented online.

Maybe we can take this discussion offline? I can give you access to the graphs description and meta-data for you to chime in (working on this now).

Comment 20

[Matej Novak [:matej]]

(In reply to Gregory Jost from comment #19)
> (In reply to Matej Novak [:matej] from comment #17)
> > Maybe it's as simple as "Online" and "Offline."
> But that would be incorrect ;) What we are trying to focus on is the gap
> between internet content and the languages spoken by *internet users* in the
> world, so offline doesn't work here. It is all online.
> 
> We are staying away from languages spoken offline as it would make partial
> sense for little content to exist in a language whose speakers are
> underrepresented online.
> 
> Maybe we can take this discussion offline? I can give you access to the
> graphs description and meta-data for you to chime in (working on this now).

Sounds good. Maybe I don't understand what this graph represents.

Comment 21

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Hi all,

Just want to see if we can close this bug.

Lee - can you answer Gregory's questions in comment 16.
Schalk - any comments you have regarding these designs?

Comment 22

[Lee Tom]

Attachment: sotw_open-source_usage_02.jpg

I thought the content/data was TBD here, so I used place holder text for the Y axis. Here's what it could look like with percentage from 0-100% 

If this chart feels too tall, we can also simplify it by scaling down and/or removing every other line of "+". I was merely trying to replicate the visual style that was set by the agency. In the end, the layout will depend on the actual content we want to show in the visualization. 

> I like these. Thanks Lee! I have a couple of questions before we move
> forward:
> - Open source: this is much better. Lee, in your mind, what is the lorem
> ipsum for (left of the axis)? Would it be possible to have the scale here?

Comment 23

[Lee Tom]

Attachment: sotw_generic-bar-graph_02.png

Indeed, we can double the columns to show differences (ie: black and white in this mock up). Also, here's an example of how longer character counts could fit onto the X axis (45 degree angle, right-aligned to the graph's baseline)

- generic bar graph: this looks good and I see how we could double the columns if needed (similar to the language graph). I want to make sure the layout would work with independent names/labels instead of years. Would we still have enough space if years were replaced by, say, company or country names?

Comment 24

[Gregory Jost]

Thanks Lee. This all works for me.

Maybe that's already the plan but saying this just in case: I would like to also keep the horizontal bar chart used for local content (https://bug1113249.bugzilla.mozilla.org/attachment.cgi?id=8565667) in addition to the bar chart in comment 23 as it offers an interesting variation that's easier to read in certain cases.

Comment 25

[Lee Tom]

Right. I was going to mention that the vertical chart could work well for the Local Content also, but I agree it's good to have both variations in our back-pocket.


(In reply to Gregory Jost from comment #24)
> Thanks Lee. This all works for me.
> 
> Maybe that's already the plan but saying this just in case: I would like to
> also keep the horizontal bar chart used for local content
> (https://bug1113249.bugzilla.mozilla.org/attachment.cgi?id=8565667) in
> addition to the bar chart in comment 23 as it offers an interesting
> variation that's easier to read in certain cases.

Comment 26

[Schalk Neethling [:espressive]]

Designs look fine to me Cory

Comment 27

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Lee - will you please supply the source files for these designs? Everything is good to go.

Comment 28

[Lee Tom]

Here are the PSDs I used to iterate on the new charts and graphs: http://cl.ly/0L043W1X2o0W

Keep in mind that these were hacked from the agency's files - I'm assuming they'll be built much cleaner with CSS vs. the rasters I'm  providing here. 


(In reply to Cory Price [:ckprice] from comment #27)
> Lee - will you please supply the source files for these designs? Everything
> is good to go.

Comment 29

[Schalk Neethling [:espressive]]

(In reply to Lee Tom from comment #10)
> Created attachment 8565665 [details]
> sotw_open-data-standards_01.jpg
> 
> 1. Creation of a table-style infographic
> - http://lorax.work.co/detail/control/openDataStandards
> - notes: same basic layout; bundle in groups; type treatment on status;
> remove dots; remove notes

this is the final design/layout for the data portability infographic correct?

Comment 30

[Gregory Jost]

I believe so yes.

Comment 31

[Jennifer Balaco]

Doing some bug clean-up. Is this one ready to be resolved?

Comment 32

[Schalk Neethling [:espressive]]

The site is live, so I am guessing it is safe to close.