Design updates for Shape of the Web

RESOLVED FIXED

Status

RESOLVED FIXED
4 years ago
3 years ago

People

(Reporter: ckprice, Assigned: ltom)

Tracking

(Blocks: 2 bugs)

Details

(Whiteboard: [kb=1617254] )

Attachments

(7 attachments)

This bug is to provide updates and specifications regarding any content or design updates required based on sending SoTW through legal review.
Whiteboard: [kb=1617254]
Summary: Content/design updates required for legal review → Content & design updates for SoTW
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>
Summary: Content & design updates for SoTW → Design updates for Shape of the Web
No longer blocks: 1096369
Assignee: gjost → ltom

Updated

4 years ago
Component: Shape of the Web → Design
OS: Mac OS X → All
Product: Websites → Marketing
Hardware: x86 → All
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.

Updated

4 years ago
Status: NEW → ASSIGNED
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
Due Date: 2015-02-18
Flags: needinfo?(ltom)
Flags: needinfo?(gjost)
(Assignee)

Comment 4

4 years ago
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
Flags: needinfo?(ltom)

Comment 5

4 years ago
For #2, I guess I prefer v2 as well. v1 is more stylish but v2 seems more clear and versatile as a template.
Flags: needinfo?(gjost)
I would also have a preference for v2
: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)?
Flags: needinfo?(matej)

Comment 8

4 years ago
(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.
Flags: needinfo?(matej)
(Assignee)

Comment 9

4 years ago
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
No longer blocks: 1133821
(Assignee)

Comment 10

4 years ago
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
(Assignee)

Comment 12

4 years ago
Created attachment 8565669 [details]
sotw_accessibility_01.jpg

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

Comment 13

4 years ago
Created attachment 8565673 [details]
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.
(Assignee)

Comment 14

4 years ago
Created attachment 8565714 [details]
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
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

4 years ago
(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?
(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."
I don't see any immediate issues here. I agree that everything looks a lot cleaner.

:espressive - any red flags on these designs?
No longer blocks: 1056196, 1129058
Flags: needinfo?(schalk.neethling.bugs)

Comment 19

4 years ago
(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).
Blocks: 1056196, 1129058
(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.
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?
Flags: needinfo?(ltom)
(Assignee)

Comment 22

4 years ago
Created attachment 8566818 [details]
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?
Flags: needinfo?(ltom)
(Assignee)

Comment 23

4 years ago
Created attachment 8566821 [details]
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

4 years ago
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.
(Assignee)

Comment 25

4 years ago
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.
Designs look fine to me Cory
Flags: needinfo?(schalk.neethling.bugs)
Lee - will you please supply the source files for these designs? Everything is good to go.
Flags: needinfo?(ltom)
(Assignee)

Comment 28

4 years ago
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.
Flags: needinfo?(ltom)
(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?
Flags: needinfo?(cprice)

Comment 30

4 years ago
I believe so yes.
Flags: needinfo?(cprice)

Updated

4 years ago
Blocks: 1158365

Updated

4 years ago
Blocks: 1158375

Updated

4 years ago
No longer blocks: 1158375

Comment 31

3 years ago
Doing some bug clean-up. Is this one ready to be resolved?
The site is live, so I am guessing it is safe to close.

Updated

3 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.