Info & Interaction Design:
Visual Design of Information

Mick McQuaid



Visual Design of Information

Different perspectives drive different views

When we analyze what people see, we bring a perspective, in part based on where we are and what we do. Think about some bases for your perspective on the visible variables in presenting information, such as professional, cultural and biological.

An important perspective

When art critics get together they talk about Form and Structure and Meaning. When artists get together they talk about where you can buy cheap turpentine.

— Pablo Picasso

quoted by Steve McConnell, Code Complete (1993)

Another perspective

Modern philosophers have had little to say about the nature of aesthetic interest; … The concentration has been on the philosophy of art, and in particular on puzzles created by boring impostors like Duchamp: is this signed urinal a work of art? etc. This makes for an exceedingly dull literature, devoted to questions which can be answered in any way while leaving everything important exactly as it is.

—Roger Scruton, Modern Philosophy (1994), p. 589


Several famous pictures in the twentieth century illustrate the quest to depict the essence of things. The difficulty of doing so and the effort required to see the essence before depicting it can be found in a series of lithographs created by Picasso in a short period of time. There are essays about this series available online and many versions of pictures of them. This particular version is chronologically read first from left to right then top to bottom.

Picasso’s Bull Lithographs

More on Essence

There are many ways to interpret the word essence in the above series and I leave that to the essays mentioned above, that discuss the bull as the essence of masculinity or of Spain itself. Let me just add this proposed Olympics poster, undoubtedly influenced by Picasso in particular and Cubism in general.

Gestalt principles

  • proximity: proximate images form a group
  • similarity: similar images form a group
  • closure: perception completes images that appear to have missing parts
  • symmetry: perception links unconnected symmetric images
  • common fate: images perceived to have common fate (follow a path) form a group
  • continuity: continuous images form a group
  • prägnanz: images that seem to work well together form a group

Dieter Rams

  • Good design is innovative.
  • Good design makes a product useful.
  • Good design is aesthetic.
  • Good design helps us to understand a product.
  • Good design is unobtrusive.
  • Good design is honest.
  • Good design is durable.
  • Good design is consequent to the last detail.
  • Good design is concerned with the environment.
  • Good design is as little design as possible.

Edward Tufte

  • Comparisons–Show comparisons, contrasts, differences
  • Causality, Mechanism, Structure, Explanation
  • Multivariate Analysis—Show more than 1 or 2 variables
  • Integration of Evidence—Integrate words, numbers, images, diagrams
  • Documentation—label what data you have and measurements, etc.
  • Content Counts Most of All—depend on quality, relevance, and integrity

Contemporary Perspectives on Design Principles

Get a GRIP and forget about CRAP

  • grouping: group like elements together; separate disparate elements
  • restatement: clarify meaning by repetition
  • implied lines: align objects to minimize visual distraction
  • popout: make some objects appear more prominently than others

Visual Information Components

  • Color
  • Typography
  • Layout
  • Animation


〈pause for color video〉

Problem: App in video ceased to exist!

  • Taken off App store
  • Replaced with a paid website
  • Seems to invalidate much of the reason for making it an iPad-only app
  • I’ve written to the developers with no response

Color is an enormous concept, recently explored in the CHI community by Shugrina et al. (2019). It can be the subject of entire semester-long courses in several disciplines, including psychology, neurology, biology, and optical science.

I would like to limit my further discussion to two issues among the very many that should be of interest to you as designers. The first is education about color and the second is color words.

Education about color

Josef Albers was without peer in educating art students about color in the twentieth century. His kit, often referred to as a book, is called Interaction of Color. Its most important sentence is perhaps “Color is the most relative medium.”

Color word research

Following are quotations from color word research contributed by a previous student.

The website mentioned on the previous slide continued as follows:

A prominent doctrine in linguistics and anthropology holds that each language and culture expresses a unique world view by its particular way of slicing up reality into named categories. (See Sapir-Whorf hypothesis).

Not everyone agrees

Color names in computing

arstechnica on color name history ran a sad and funny article in Fall 2015 on the names of colors as used in computing, from the X Window System project in the eighties through contemporary CSS3.


  • You’re experiencing it right now!
  • I’m using default typefaces!
  • People have prejudices, e.g., Comic Sans, Papyrus
  • It’s not just fonts!
  • LaTeX and Adobe InDesign do the best spacing and line breaking

How do people experience typography?

  • Books
  • Magazines
  • Browser
  • Apps
  • All different! Yet much of typography is the same—defaults!

Where does type come from?

  • Typographers and their traditions
  • Designers with little typography education
  • Software developers with no typography education
  • Reading psychologists who do research

Who can you rely on for advice?

  • Robert Bringhurst, Bringhurst (2004)

Changes in type over time

Typography began in earnest in the 1450s. (There had been typesetting in China 200 years before this but the art invented there was never communicated outside a small community and was not widely known until archeologists in the 20th century rediscovered the long-lost artifacts.)

Emulating handwriting

The first famous type founders


Bodoni stressed out the machine

La Vita Nuova

Challenges for type

Traditional typography for a given page of a book represents three widely recognized challenges, legibility (ability to distinguish each letterform), readability (of the entire page), and color (technical term used to mean ink density).

Reading psychology

This a sub-discipline of cognitive psychology that is the source for many studies of reading comprehension and comparisons of various contributors to reading comprehension, including typography.

Type in a menu

In the film AI (2001), the character portrayed by Jude Law is invited to choose from a context sensitive menu by the holographic cartoon Dr. Know, as voiced by Robin Williams. When the Jude Law character asks about a concept, Dr. Know asks for the context in which he asks, since the concept has different meanings in different contexts.

art nouveau connotes fairy tales

basic writing connotes primal

small caps connotes officialdom

blackletter script connotes religion

Chunking words, especially in menus

Hick’s law predicts the time it will take for a user to make a choice, given the number of choices. Hick’s law can be expressed similarly to Fitts’s Law as

\[t = b \log_2 (n + 1)\]

Here, \(t\) is reaction time, \(b\) is a constant to be found empirically, and \(n\) is the number of choices with which the user is confronted. The extra \(1\) represents the concept none of the above.

The magic number seven ± 2

An important publication, Miller (1956), influenced thinking about appropriate chunk size forever after.

First, the span of absolute judgment and the span of immediate memory impose severe limitations on the amount of information that we are able to receive, process, and remember. By organizing the stimulus input simultaneously into several dimensions and successively into a sequence of chunks, we manage to break (or at least stretch) this informational bottleneck.


Past advice

  • Layout on a twelve column grid
  • Easy to reduce to 9,6 or 8,4 for responsiveness
  • But Pickering and Bell (2022) advises against this
  • They claim it’s too rigid
  • Instead, they urge you to learn a dozen reusable components and endlessly combine them


Let’s look at Pickering and Bell (2022) for layout advice, all web-based

Everything in web design is a box

The box model

Chrome paragraphs

p {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;

Chrome unordered lists

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;

Display property

Block elements \(\sim\) paragraph (takes all space)

Inline elements \(\sim\) word (takes only content space)

Logical properties

Eschew terms like “left” and “right” instead using start and end, e.g.,

.icon {
  margin-inline-end: 0.5em;

Formatting contexts

display: flex or display: grid causes a <div> to continue to behave like a block, but changes its child elements’ behavior. Now the flow direction changes from vertical to horizontal, as the child elements distribute themselves horizontally. Composite layouts consist of nested formatting contexts.

Content in boxes

The web is responsive by default! Content makes inline elements grow horizontally and block elements grow vertically. Static representations are misleading!

Box sizing

* {
  box-sizing: border-box;

makes calculating and anticipating box dimensions easier.


* {
  box-sizing: border-box;
center-l {
  box-sizing: content-box;


“Dimensions of elements should be largely derived from their inner content and outer context. When we try to prescribe dimensions, things tend to go amiss. All we should be doing as visual designers is making suggestions as to how the layout should take shape. We might, for instance, apply a min-height or proffer a flex-basis.

The CSS of suggestion is at the heart of algorithmic layout design. Instead of telling browsers what to do, we allow browsers to make their own calculations, and draw their own conclusions, to best suit the user, their screen, and device. Nobody should experience obscured content under any circumstances.”

Composition over inheritance

Combining simple independent parts gives you more flexibility and leads to more efficiency than connecting everything through interitance to a shared origin.

Illustration: how to make this?

The wrong way: inherited properties

.dialog {
  /* ... */

.dialog_header {
  /* ... */

.dialog_body {
  /* ... */

.dialog_foot {
  /* ... */

The right way: layout primitives


Because with the .dialog classes, you’ll have a lot of repeated code—CSS bloat.

But with the same layout primitives, you can build other structures.

Registration form

Slide Layout

Layouts: intrinsically responsive

  • The stack
  • The box
  • The center
  • The cluster
  • The sidebar
  • The switcher
  • The cover
  • The grid
  • The frame
  • The reel
  • The imposter
  • The icon

Example: The stack


p {
  margin-bottom: 1.5rem;


.stack > * + * {
  margin-block-start: 1.5rem;


Twelve Principles of Animation

  1. Squash and stretch
  2. Anticipation
  3. Staging
  4. Straight ahead action and pose to pose
  5. Follow through and overlapping action
  6. Slow in and slow out
  1. Arc
  2. Secondary action
  3. Timing
  4. Exaggeration
  5. Solid drawing
  6. Appeal

〈pause for illusion of life video〉

Things you can animate

  • Position
  • Scale
  • Rotate
  • Origin
  • Opacity

It’s all done with curves!


Bringhurst, Robert. 2004. The Elements of Typographic Style, Version 3.0. Point Roberts, WA: Hartley & Marks.
Miller, George A. 1956. “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information.” The Psychological Review 63: 81–97.
Pickering, Heydon, and Andy Bell. 2022. “Every Layout: Relearn CSS Layout by Example, 3rd Ed.”
Reinhart, Alex. 2015. Statistics Done Wrong: The Woefully Complete Guide. San Francisco, CA: No Starch Press.
Shugrina, Maria, Wenjia Zhang, Fanny Chevalier, Sanja Fidler, and Karan Singh. 2019. “Color Builder: A Direct Manipulation Interface for Versatile Color Theme Authoring.” In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, 1–12. CHI ’19. New York, NY, USA: Association for Computing Machinery.
Tufte, Edward R. 2001. The Visual Display of Quantitative Information. Cheshire, Conn: Graphics Press.
Wass, John A. 2015. “Book Review: Statistics Done Wrong.” Scientific Computing.



This slideshow was produced using quarto

Fonts are League Gothic and Lato