Perceptual Basics
B&W
Black&White on Paper (where the light is reflected at your eyes) is perceived far differently than Black&White on a Video Screen (where light is glowing into your eyes).
It’s an over-simplification: but whites & blacks on a video screen tend to be more extreme than whites & blacks on the printed page.
- It’s why we can easily perceive a single bright star in a deeply black night sky.
- We’d have a much harder time trying to find a single black pip on a sheet of bright white.
The physical dynamics of human visual perception of color & light have been measured extensively (much of the best work has been done in Russia). The issue often comes down to environmental conditions and ambient light.
Many old-school photographers learned as part of their craft: More incoming light allows smaller lens and results in greater depth of field (more detail/information).
Color
When discussing design with clients – especially as regards Color – I often recommend that we capture an ‘achromatic’ (black&white) image and only then evaluate perceptual issues. This is because much of our fundamental perception is based on B&W.
Grey Text
It’s stylistically popular these days to use grayed fonts as an attribute of interactive styling. It’s counter-productive.
The underlying justification is often to ‘un-busy’ a screen which has a lot of info vying for your attention. In that sense, it makes sense to ‘minimize’ or ‘fade’ some of the info so that you aren’t bedazzled or confused by info which all inherently competes for your attention.
On the one hand: Italics and Bold and sizing (large) and placement (forefront) are techniques for making textual info stand out for your attention.
On the other hand: Greying and sizing (small) and placement (aside) are techniques which make text recede from your attention.
There’s abundant evidence from credible sources (it’s been tested – a lot). Bottom line: Don’t do it.
With the caveat: I have no problem using grays in large titleText.
- The text is still very readable (due to its size)
- It clearly and consistently differentiates between clickable (colored) and non-clickable (achromatic) items
Furthermore
- If the large titleText were solid black, it would cause the titles to (inappropriately) visually dominate the overall presentation
I will also use gray to differentiate different ‘classes’ of information on the page: by making the background area gray.
This degrades gracefully and reinforces the usage of layout & spacing to identify distinct regions.
In designSpeak, the buzzword-in-good-currency is “affordance” – According to Norman (1988) an affordance is the design aspect of an object which suggest how the object should be used; a visual clue to its function and use.
In praise of … Achromatic Design
My global Design Rule-of-Thumb:
- Capture the screenshot
- Remove all the colors from it
- If it still works as a greyscale image, then you’ve got a decent solution
For example
This is an example of a skeletal wireframe for Cap Gemini (circa 2007) which is deliberately ‘un-styled’, even though it is also a ‘clickable demosite’.
© The Communication Studio LLC
the Craft 