Visualising Information - opinions

MDN
#1

Hi,

I have recently started editing MDN Documents, I have noticed theres quite a few pages that are text heavy. Some users take information in easier if it’s in a visual format, so i feel that if possible to visual information in some pages we should do so?

I’d like to know if anyone else has differing opinion on this subject matter and if anyone sees any disadvantages to this?

#2

I totally agree with you.

We have a lot of text on MDN, mainly because that is where our expertise lies. I’m sure we would have more illustrations and videos, except that we don’t have dedicated resources to create them. We are hoping to include more in 2018.

#3

Ditto what Chris said, plus: If you have ideas of illustrations you’d like to add to particular documents, please propose them in this forum, or create a documentation bug in Bugzilla. Actually, you could just go ahead and create them, but discussing it in the community first can help ensure that the illustration is effective for what you want to communicate, so you don’t waste your time creating low-value illustrations.

#4

jswisher https://discourse.mozilla.org/u/jswisher Janet Swisher
https://discourse.mozilla.org/u/jswisher
December 18

Ditto what Chris said, plus: If you have ideas of illustrations you’d like
to add to particular documents, please propose them in this forum, or
create a documentation bug in Bugzilla
https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation.
Actually, you could just go ahead and create them, but discussing it in the
community first can help ensure that the illustration is effective for what
you want to communicate, so you don’t waste your time creating low-value
illustrations.

Voir le sujet
https://discourse.mozilla.org/t/visualising-information-opinions/23556/3
ou répondre à ce courriel pour répondre.

In Reply To
chrismills https://discourse.mozilla.org/u/chrismills
December 18
I totally agree with you. We have a lot of text on MDN, mainly because
that is where our expertise lies. I’m sure we would have more illustrations
and videos, except that we don’t have dedicated resources to create them.
We are hoping to include more in 2018.

Voir le sujet
https://discourse.mozilla.org/t/visualising-information-opinions/23556/3
ou répondre à ce courriel pour répondre.

Vous recevez ce courriel car vous avez activé la liste de diffusion.

Pour se désabonner de ces courriels, cliquer ici
https://discourse.mozilla.org/email/unsubscribe/0691d8988803ec2e2f7c54c203451ba313bad856e6f8ee9453faac82e7f54b4e
.

#5

We should really look into coming up with standards for diagrams (colors, shapes, type style, etc). I’d also like to see us have an online editor we use, ideally integrated one day, but even if it’s not, just having something we specifically advise people to use would be good.

#6

I am gonna put this into a to-do-list somewhere :wink:

#7

I’d like to bring this up again. Now that we have improved support for SVG diagrams (as in, privileged users can attach them without jumping through hoops), I’d love to see us start to do more to use visuals to improve understanding of concepts.

To that end, we need to have a proper design standard for diagrams. This would need to include things like:

  • Color palette: standard line and border color, standard colors for “extra lines” (to help multiple paths differentiate), default box background color, colors for “good” and “bad” boxes, colors for “categorized” boxes (like “these boxes are in object X and those are object Y”, etc. A good selection of colors to choose from for those, with preference order.
  • Line standards: standard form for “dotted” and “dashed” lines, standard line thickness, arrowhead styles, etc. What to do when lines cross. How to indicate “yes” and “no” (or A/B/C) decisions
  • Box standards: Squared vs rounded. Shapes for state and flow diagrams. Boxes with sub-boxes. Shadows?
  • Text standards: Standard font(s), sizes, and weights. Box and line labels. How to style text in boxes with a heading as well as body text.
  • Nesting diagrams: Sometimes we have diagrams where one kind of diagram is nested inside another, like a block diagram that has an inheritance diagram inside it, or that kind of thing. Rules for how much padding and whatnot to use would be good to have.

Then we need to create some templates for how different types of standard diagram should look, including:

  • Inheritance diagrams
  • Flow diagrams
  • Block diagrams
  • State diagrams
  • Relational diagrams (showing relationships between a number of objects or concepts)

In addition, we should have standards for how to display captioned diagrams, images, and tables. IMO, all images, tables, and other figures should be captioned, which currently they rarely are, since we have no styling for the <figure> and <figcaption> elements. We should come up with an appearance and then add CSS for this so we can start properly presenting our figures.

#8

I strongly agree with all of this. However, I don’t see us having the resources to do any of this in 2020. Could this be something assigned to the “fix for stumptown” pile?

This is really a UX/design/dev/product thing, so I’d like @atopal to consider this along with Tobin, Mustafa, etc.