Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

+ Follow

Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation

by David Farrell

1,476 views

Based on Tufte's "Envisioning Information"

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Apple Keynote

Usage Rights

File a copyright complaint

1 Embed 915

http://www.comu346.com

915

Statistics

Likes: 0
Downloads: 13
Comments: 0
Embed Views: 915
Views on SlideShare: 561
Total Views: 1,476

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
(assuming projector works\n\nThe highlighting in blue makes the construction instructions much easier to see.\n\nThis is what we mean by separation. We used colour to create a separation between the two types of data.\n\n
This image has two layers. \n\nOne layer of information is the assembly method for putting the ite together.\n\nThe other is that there are 30 individual items, picked out and ID’d by number.\nEven though the lines are feint, the saturated colour helps pick them out.\n\nWhat matters most is the RELATIONSHIP amongst the layers. \n\nThe relationships must be in proportion and harmony.\n
\n
By adding colour we can SEE the relationship between the layers.\n\nWithout it the layers blend together.\n
Building on the idea of harmony & proportion - look at the timetable at the top here.\n\nHere, the heavy handed grid interferes with type.\nThere is a kind of stripy texture and the grid clashes with the times\nThe most prominent row is used for nigh useless information\n\nThe redesign calms down the grid, moves important data to top and adds new info.\nThe dotted line helps the eye as an indicator but doesn't clash.\n\nThe focus is now on the info\nIMPLIED grid defined by the ABSENCE of type\n\n
This is a hospital record.\n\nThe text on sides is an account of what happened.\nThe middle columns have date information, descriptions of procedures and costs.\n\nLots of info:\ndates etc..\nbut lots of text on the side.\n\nGood example of complicated vs confusing.\nBy laying out with clear spacing, the wee lines associate periods of item with analysis\n\nThe design is transparent to the disturbing information\nLayers for\ntime sequence\naccounting data\ncommentary & analysis\n\nThis also shows ways of separating without colour.\n
\nhere is an example of Layers but poor separation\n\nLayers \ncolour of the balls\nposition of the balls\ntext inside the balls\n\nBut the separation suffers due to the heavy grid.\n\n
If you Lighten the Lines, the important information pops to the front\naxes\ntext labels\nballs\n\n\n
Map \ncontours, rivers, roads, names \nall on same visual level\nsame values\ntexture\ncolour\nshape\n
We’ll come back to the concept of the “unintentional optical art”\n\n
This map is better.\n\nseparate by:\nshape\nvalue (light to dark)\nsize\ncolour\nnegative areas (no colour) are still useful as indicate roads\nthe water isn't just blue, it has a fade (representation)\nbecause the background is dull background, the colours don't strain eye\n\n\n
Google map\nAgain, implied space indicates road, although outlines are picked out\nthin dashing on rail tracks\npedestrian areas shaded grey\nlarger roads orange (motorways blue)\npublic areas grey (like shopping centre)\nuni's brown\nsymbols\nrailway station\nU station\none way signs\ncamera icons\nshopping bag at princes square\nfork and knife at merchant city\nsquares for sights\nchurch for the cathedral\nred for hospital with cross\ncan turn on traffic and get colour coded on motorways \n\nthey even show roads inside galleries car park!\n\n3D 'A' indicates my result - the 3D effect simulates me looking down on map.\nIt pops - simulates you LOOKING DOWN and stands out amongst all the other info there. \n
I’ve spoken of “implied space” or “negative space”.\nThis is where gaps in an image are interpreted (incorrectly) by the brain as having content.\n\nPeople seeing shapes that aren't there\npowerful but dangerous - need to take into account\n\nThe lines SHOULD match up but jar the eye by not matching up\nThere are two implied triangles - one with the angles, one with dots\nThere is a weird sort of triangle shape - not quite triangle and it definitely looks 'wrong'\nInvisible square\nimplied rectangle\ncross\n\nWe see these even though they don't exist.\n
Tufte calls this the 1 + 1 = 3 problem - showing two bits of info and getting three through implication.\nThe cross shapes start implying rectangular shapes.\n\nWhen designing information - consider the implied shapes\n\nAnything different in your design implies information.\n\n
Picture 1\nImplied negative space\n\nPicture 2\nCurved text hard to read\n\nPicture 3\nLess association when above the river\nalso - in English, words have fewer descenders \n\nSo best to have text above the thing it refers to.\n\n
\nStandard format for averages and data range \nUpper and lower areas of measurement\nTop bit and bottom bits are extremes\n2nd month has a lesser range \n\nfirst image may imply a drop in temperature due to the boxes\n\nsecond image shows that the temperatures were roughly the same and removes the clutter from the image.\n\n\n\n
In map 1, the overbearing coloured blocks cause implied movement and the white intersections catch the eye and difficulty in labelling due to contrast\nmap 2 improves upon this by breaking up the pattern (varied line thicknesses) \nmap 3 uses a less contrasty colour which removes the negative space effect\n\n\n
Look at the strong shapes here\nhumans and the silhouettes are striking\nbut the elements are too similar\nweight of boxes and humans\nweight of text and arrows\nnoisy with the hairs (to imply light)\nThe centred data doesn't pop. \nToo much emphasis on the container not enough on the content\n\nsecond option improves by \nusing light and dark\nusing colour\nvarying weight of text and arrows\nremoving the thick boxes and using a calm colour for those lines\nthin boxes don't compete\norange pops on the lamps\n\nnote especially the limited use of saturated colour on the lamps and arrows\nthink about traffic lights\n\nUse colour as a valuable tool - it's powerful, but use it carefully and prioritise the tool over the aesthetic \n\n
Layers:\ntime dimension\npitch dimension\nduration of note\nrythm\nspecials like crescendo, ped etc\n\nBUT could be clearer with tone visually\n
Bottom one has faded stave lines\n\nFaded the lines to make the notes pop more\ngrey helps black pop\ncolour would be even better\n
how do you know this is a reflection? \nsubtle changes make all the difference\n\nIf you miss a few choice lines, you know it's a reflection.\n\nthe two layers here are separated by line type - so we have many ways of separating layers - not just colour.\n
\nWe discussed huds…\n\nHuds are layers - obvious because it looks like a layer\nbut art can be used as a layer also\n\n
use of size of box to indicate current play\narrows show different routes\nbut they blend together (bad)\nfaded background shows distance of route\nscreen split into rows & columns\nteam, score, time, down, distance, score, wind\nTO's, possession\n\nEye naturally sees main window as important and top & bottom as info\n
\nSeparate boxes\nsub sections within boxes\ncolour and text (bottom left section - 40/60) \nbars and text\nscrolling ticker of league info\nbuttons at top\n\npull down menus are greyed out - they are ALWAYS pulldownable but not here\n
\nUse of light\nUse of colour (as previously discussed)\nUse of Silhouettes of characters\nMore separation than layering\n\n
\nAlso colour on the humans vs the zombies (grey)\ncolour in health bars\nicons for weapons and who has pills\nhud contrast (weapons)\n\n\n
ayering & Seperation\n\nhttp://bit.ly/worldofgootour\n\nWorld of Goo - curser separation \n\nBall's create lines that thin as you drag away\n\nParralax scrolling\non top of 'play' layer are two more layers - one for balls in jars, and another for text on top\n\n\nBackground windmills at 2.43 are obv not interacting - the blur achieves this\n\nZZZ's at 3.22 are a layer above goo balls that tell you the balls are sleeping\n\n4.30 is the talk on layers\nmostly art related but the "middle layer" is static objects you can interact with\nabove 'middle' is goo balls'\n\n5.53 - the shadows from goo balls are masked to level layer - meaning there is a relationship between these layers that implies interactivity\n\n6.00 the spinny - looks blurry to me, wouldn't necessarily think it was active\n\n\n

Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation Presentation Transcript

2011 Game Design 2 Lecture 13: Layering & Separationhttp://www.comu346.com david.farrell@gcu.ac.uk
Reading• Tufte pages 53 - 66• http://bit.ly/l4dlight (Left 4 Dead use of light)• http://bit.ly/worldofgootour (video)
Flatland• Flatland: A Romance of Many Dimensions• 1884 Novel by Edwin A. Abbott• Contemplates how world would look to lesser and greater dimensions
Triangle in 2D
Triangle in 1D
Sphere in 1D
3D represented in 2D
Data Visualisation• Life is navigated in 3D• Mathematics can portray xD• All(most all) of our displays are 2D• How do we map data to 2D?• One technique is layering and separation
“Escaping this ﬂatland is the essential task of envisioning information” Tufte, Envisioning Information, Page 13
Information• simple or complicated• detailed or sparse• analogue or digital• NEVER confusing or cluttered
Design• understandable or confusing• clear or cluttered• the point of design is to reveal detail and complexity• the data is never at fault• the user is never at fault
What are the layers here?
Colour deﬁnes the relationship
! "An undifferentiated, unlayered surface results jumbled up, blurry,incorherent, chaotic with unintentional optical art. What we have here isa failure to communicate” - Tufte p58
Negative Space
1+1=3
Harmonising Elements• Careful layout diminishes 1 + 1 = 3 clutter• Avoid ‘active negative space’• Words have fewer descenders than ascenders (so safer to put above a line)• Curved text is hard to read
Box Plots
Subtle Differences• All differences mean something
Games Examples• 2D & 3D games use layering & separation to communicate with player.• HUD is layered on top of game world• Games like Half Life 2 & Shadow of the Colossus foreshadow future events through use of background
Madden 10
Championship Manager
Left 4 Dead
World of Goo

Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation

by David Farrell

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 915

Statistics

Game Design 2: Lecture 13 - Layering and Separation of Data Visualisation Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare