L2 Flashcards
Fundamental principle of designing a visual display
The fundamental principle of designing a visual display is that it is necessary to work out a correspondence between the (invisible) information structure that is being represented, and the visible marks that the user can see
What are the components of an information structure?
An information structure consists of some number and variety of individual elements, and relationships between them.
Each element or relationship may correspond to a visible mark or arrangement of marks on a display surface.
Display design involves choosing the correspondences, marks and arrangements of marks in ways such that the overall result makes sense to the user.
Conventions used by typography and text
Information on paper can be structured using tabulated columns, alignment, indentation and emphasis, borders and shading.
All of those were incorporated into computer text displays. Interaction conventions, however, were restricted to operations of the typewriter rather than the pencil.
Each character typed would appear at a specific location. Locations could be constrained, like filling boxes on a paper form.
And shortcut command keys could be defined using onscreen labels or paper overlays. It is not text itself, but keyboard interaction with text that is limited and frustrating compared to what we can do with paper.
Grid system
- most screen-based information is interpreted according to textual and typographic conventions, in which graphical elements are arranged within a grid system, occasionally divided or contained with ruled and coloured borders.
Conventions used in maps/graphs
Graphs can represent variation of a quantity over time
Maps organise places according to their approximate direction and distance
basic diagrammatic conventions rely on quantitative correspondence between a direction on the surface and a continuous quantity such as time or distance. These should follow established conventions of maps and graphs.
Conventions used by schematic drawings
engineering drawing conventions allow schematic views of connected components to be shown in relative scale, and with text annotations labelling the parts.
White space in the representation plane can be used to help the reader distinguish elements from each other rather than directly representing physical space
Conventions used in pictures
This is the first computer visual representation that might suffer from the ‘resemblance fallacy’, i.e. that drawings are able to depict real object or scenes because the visual perception of the flat image simulates the visual perception of the real scene.
New perspective rendering conventions are invented and what’s acceptable can change over time
the way a photography is framed changes it smeaning
A good pictorial representation need not simulate visual experience (more realistic unicorn)
- pictorial representations, including line drawings, paintings, perspective renderings and photographs rely on shared interpretive conventions for their meaning. It is naïve to treat screen representations as though they were simulations of experience in the physical world.
Conventions used by node and link diagrams
Information structure represented by connectivity of nodes
Circuit schematics ignore certain information e.g. types of solder joins and represent other information by conventions e.g. direction of signal flow
Position of nodes is irrelevant to information structure
Secondary notation can be implemented by positioning of nodes e.g. use plane to assist reader in ways not related to the technical content
London Underground diagram – travellers are interested in order and connectivity, not location, but …
node and link diagrams are still widely perceived as being too technical for broad acceptance. Nevertheless, they can present information about ordering and relationships clearly, especially if consideration is given to the value of allowing human users to specify positions.
Conventions used in icons and symbols
Symbols could be pictorial, or fairly arbitrary conventions
Conventional symbols might ignore the entity being symbolised
Semiotics – in what sense do marks correspond to meaning (Latin versus Korean alphabet relationships to sounds)
Inappropriate correspondences – stack of change for a change button
In practice icons are decoration to text labels – those intended to be self explanatory must be supported with textual tooltips
the design of simple and memorable visual symbols is a sophisticated graphic design skill. Following established conventions is the easiest option, but new symbols must be designed with an awareness of what sort of correspondence is intended - pictorial, symbolic, metonymic (e.g. a key to represent locking), bizarrely mnemonic, but probably not monolingual puns.
How is visual metaphor used to present information structures?
Desktop … wastepaper bin
Strict analogy to physical objects would become obstructive rather than instructive
Representational conventions of the desktop are useful – size and positions of windows on the desktop has no meaning, they are not connected and there is no visual perspective, so it’s neither a graph, nor map, nor picture.
The real value of the desktop is the extent to which it allows secondary notation with the user creating her own meaning by arranging items as she wishes
Window BORDERS separate areas of the screen into different pictorial, text or symbolic contexts as in the typographic page design of a textbook or magazine
Icons use a large number of conventions to indicate symbolic correspond to software operations and/or company brands, but they are only occasionally or incidentally organised into more complex semiotic structures.
theories of visual representation, rather than theories of visual metaphor, are the best approach to explaining the conventional Macintosh/Windows ‘desktop’. There is huge room for improvement.
What can we learn from unified theories of visual representation for how we present information structures to users
Prior structures were derived from existing domains e.g. typography, cartography, engineering and architectural drafting, art criticism and semiotics.
remember that all visual representations simply comprise marks on a surface that are intended to correspond to things understood by the reader
2D surface can be made to correspond to physical space (in a map), dimensions of an object, pictorial perspective, or to continuous abstract scales (time or quantity)
The surface can be partitioned into regions that should be interpreted differently
Within any region, elements can be aligned, grouped, connected or contained in order to express their relationships
Correspondence between arrangement and the intended interpretation must be understood by convention or explained
Any individual element might be assigned meaning according to many different semiotic principles of correspondence
Marks: graphic resources
Shape orientation size texture saturation colour line
Marks: correspondence
Literal (visual imitation of physical features)
Mapping (quantity, relative scale)
Conventional (arbitrary)
Design uses of marks
mark position, identify category (by shape texture colour)
Indicate direction (orientation line)
Express magnitude (saturation size length)
Simple symbols and colour codes
Graphic resources available for developing SYMBOLS
Geometric elements Letter forms Logos and icons Picture elements Connective elements
