This is not a pipe…

(1)

(2)

This is not a pipe…

(3)

This is a representation of a pipe

(4)

Left or right?

(5)

Depends on perspective

(6)

Left or right?

(7)

Graphic Representation

  Graphics make up a language

  Syntax, Semantics and Pragmatics

  Common graphic vocabulary

  Graphic Semiotics

(8)

Communication

  Common conventions

•  ”Red” + ”Cloud”

•  ”Colourless green ideas sleep furiously”

  Meaningless or inspirational?

  Depends on context and culture

(9)

Interpretation

  Interpretation is in the mind

  The Retina catches Light and Colour

  The Mind puts it (almost) all together

  Interpretation gives shape and meaning

(10)

Interpreted Size

(11)

Meaningfulness

(12)

Graphics

  Creates a mapping

  Application

•  Interface (views)

  Creates an experience

•  Pleasing

•  Entertaining

•  Satisfaction

(13)

Mapping - Recognition

(14)

(15)

Graphic sugar?

  Helpful representations

•  Or just Design?

  Explaining representations

  Visualisation of structures

(16)

Small grey dots

(17)

Graphic has meaning

(18)

Reorder

(19)

Graphic Representation

  Ordering of data

  Structuring of data

  Arrangement of data

  Visualisation of data

(20)

Graphic Representation

  Ordering of data

  Structuring of data

  Arrangement of data

  Visualisation of data

Aesthetically

Pleasing!

(21)

Grouping

(22)

Grouping

(23)

Grouping

(24)

The Closeness Principle

  Things that are near tend to be grouped together visually (and conceptually?)

  An item should never be closer to an item in

another group, than an item in the own group

(25)

Colour Coding

  Colours are strong representational tools

•  Relations

•  Attractors

  But remember that some people are colour

blind

(26)

Colour for relation

(27)

Table

(28)

Venn Diagram

(29)

Info Crystal

(30)

Info Crystal free

(31)

Info Crystal free (4 dims)

(32)

(33)

How many Zebras?

(34)

A circle?

(35)

Good Continuation

(36)

(37)

(38)

(39)

Good Continuation

  Essential for GUI:s

  Provides 2,5D-graphics

•  Things can be on top of each other

  Cues for perception

(40)

Visual Shape

(41)

Clock face perception

(42)

Clock face perception

30°

(43)

Altitude meter

(44)

Altitude meter

(45)

Altitude meter

(46)

Graphics can provide structure

(47)

Encoding helps

(48)

Colour Coding

(49)

Still!

Don’t rely on colours for meaning!

(50)

Mappings

  A mapping is a relation

•  Between meaning and Symbol

•  Between name and intention or interaction

  STOP!

  Mappings should be 1 to 1

  Clashings in mappings are confusing

(51)

Mapping symbol to action

(52)

Mapping symbol to action

(53)

STOP

GO

(54)

?

OPEN CLOSED

(55)

(56)

Impossible mapping

(57)

(58)

(59)

(60)

This is not a pipe…

This is not a pipe…

This is a representation of a pipe

Left or right?

Depends on perspective

Left or right?

Graphic Representation

 Graphics make up a language

 Syntax, Semantics and Pragmatics

 Common graphic vocabulary

 Graphic Semiotics

Communication

 Common conventions

• ”Red” + ”Cloud”

• ”Colourless green ideas sleep furiously”

 Meaningless or inspirational?

 Depends on context and culture

Interpretation

 Interpretation is in the mind

 The Retina catches Light and Colour

 The Mind puts it (almost) all together

 Interpretation gives shape and meaning

Interpreted Size

Meaningfulness

Graphics

 Creates a mapping

 Application

• Interface (views)

 Creates an experience

• Pleasing

• Entertaining

• Satisfaction

Mapping - Recognition

Graphic sugar?

 Helpful representations

• Or just Design?

 Explaining representations

 Visualisation of structures

Small grey dots

Graphic has meaning

Reorder

Graphic Representation

 Ordering of data

 Structuring of data

 Arrangement of data

 Visualisation of data

Graphic Representation

 Ordering of data

 Structuring of data

 Arrangement of data

 Visualisation of data

Aesthetically

Pleasing!

Grouping

Grouping

Grouping

The Closeness Principle

 Things that are near tend to be grouped together visually (and conceptually?)

 An item should never be closer to an item in

another group, than an item in the own group

Colour Coding

 Colours are strong representational tools

• Relations

• Attractors

 But remember that some people are colour

blind

Colour for relation

Table

Venn Diagram

Info Crystal

Info Crystal free

Info Crystal free (4 dims)

How many Zebras?

A circle?

Good Continuation

Good Continuation

 Essential for GUI:s

 Provides 2,5D-graphics

• Things can be on top of each other

 Cues for perception

  Graphics make up a language

  Syntax, Semantics and Pragmatics

  Common graphic vocabulary

  Graphic Semiotics

  Common conventions

•  ”Red” + ”Cloud”

•  ”Colourless green ideas sleep furiously”

  Meaningless or inspirational?

  Depends on context and culture

  Interpretation is in the mind

  The Retina catches Light and Colour

  The Mind puts it (almost) all together

  Interpretation gives shape and meaning

  Creates a mapping

  Application

•  Interface (views)

  Creates an experience

•  Pleasing

•  Entertaining

•  Satisfaction

  Helpful representations

•  Or just Design?

  Explaining representations

  Visualisation of structures

  Ordering of data

  Structuring of data

  Arrangement of data

  Visualisation of data

  Ordering of data

  Structuring of data

  Arrangement of data

  Visualisation of data

  Things that are near tend to be grouped together visually (and conceptually?)

  An item should never be closer to an item in

  Colours are strong representational tools

•  Relations

•  Attractors

  But remember that some people are colour

  Essential for GUI:s

  Provides 2,5D-graphics

•  Things can be on top of each other

  Cues for perception

  A mapping is a relation

•  Between meaning and Symbol

•  Between name and intention or interaction

  STOP!

  Mappings should be 1 to 1

  Clashings in mappings are confusing