Your SlideShare is downloading. ×
Info Graphics Tsunami
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Info Graphics Tsunami

3,357
views

Published on

A presentation about Information Graphics. …

A presentation about Information Graphics.
The slide has an explanation, examples, followed by a workshop to design a tsunami warning graphic for different devices.

Published in: Design, Technology, Business

2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,357
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Thanks to Click Suite who gave me the time to prepare this talk and workshop!
  • Information Graphics – I’m not an expert, just sharing what I know and have observed. There’s been an explosion on the web of InfoGraphics in the past few years.
  • Infographics are visual representations of information, data or knowledge
  • Don’t get it?
  • Jeffery Veen showed me this great explanation at Adaptive Path’s User Experience Week 2008. Do you recognise this data?
  • How about now? Better, but takes a while to find, say, the rainfall for Chicago in winter.
  • Use of fonts and contrast adds a visual element – easier to read
  • Adding colour highlights the times of year with the highest and lowest rainfall
  • The raindrop icons make it visual and a bit more fun and engaging
  • Then you can map the locations to a map and reduce clutter by making the months interactive (via the slider) – a vast contrast to the data set we saw at the beginning
  • There’s loads of examples on the web – here’s just a few…
  • Males photographed with animals are more likely to get a date…
  • Climate change skeptics in the vast minority
  • I found this factual infographic easy to follow
  • This could have been a bunch of forms and dropdowns – instead they’ve used typography and iconography
  • You can view the data in many different ways
  • A visualisation of climate change from the 1800s to the present – the trend is obvious
  • Taxi’s with GPS are tracked in London – makes the congestion points obvious
  • See how long it takes to get to work using different forms off transport at different times of day – I would love to see this for Wellington/Kapiti/Hutt
  • A similar mapping tool
  • This crime map has great interaction – you can explore the data Created by content.stamen.com
  • Crayon colour choices over time
  • This could have been a boring line graph
  • The space race – a lot of information crammed into an elegant diagram
  • Here you can see risks and how they’re interconnected – the butterfly effect
  • A tube map for the galaxy – make sure you get off at the right stop!
  • It’s harder to find good examples in New Zealand
  • This is the motorway they plan to cut through my neighborhood
  • The new national education standards for New Zealand – they plan to use simplified reports using information graphics. http://www.national.org.nz/education/
  • The new national education standards for New Zealand – they plan to use simplified reports using information graphics. http://www.national.org.nz/education/
  • The new national education standards for New Zealand – they plan to use simplified reports using information graphics. http://www.national.org.nz/education/
  • I didn’t find much in the way of innovative information graphics on the Statistics NZ website
  • This is typical…
  • … but at least you can see the same data as a simple graph
  • This is getting more innovative – data overlays on a map
  • Many of us who work in Information Technology use information graphics every day to communicate to our peers, customers and users. Interaction Designers and Information Architects make heavy use of visual diagrams and information graphics in their job – here’s some typical uses from my job at Click Suite…
  • Venn diagram
  • Likert scale type thing
  • Gap analysis
  • Trends
  • Site Map
  • Paper prototype – often incorporates infographic concepts
  • Paper prototype – often incorporates infographic concepts
  • Collaboration time!
  • The 2009 Samoa earthquake was an 8.1 M submarine earthquake that took place in the Samoan Islands region at 06:48:11 local time on September 29, 2009. It was the largest earthquake of 2009. A tsunami was generated which caused substantial damage and loss of life in Samoa, American Samoa, and Tonga. The Pacific Tsunami Warning Center recorded a 3-inch (76 mm) rise in sea levels near the epicenter, and New Zealand scientists determined that the waves measured 14 metres (46 ft) at their highest on the Samoan coast. Photo http://www.scoop.co.nz/stories/PO0910/S00205.htm
  • Photo http://pacificeye.files.wordpress.com/2009/09/dscn0023.jpg
  • Reports said the tsunami was heading toward New Zealand – so I went to the web to find out more. This diagram from NOAA made it appear the wave might over 4963 meters tall – I knew that couldn’t be right!
  • This diagram from GNS in New Zealand wasn’t much help either
  • This at least gave an idea of how long the tsunami would take to travel to New Zealand (3hrs)
  • An indication of wave height – but what actually matters more is wave speed/force – even a 100cm wave could travel a long way inland
  • Breaking News – this could actually be happening right now!
  • Your persona for this workshop
  • Workshop Photos Wellington Web Meetup twitter.com/webmeetup 11 February 2010
  • Remember – be care to tsunamis
  • Let’s meet over a coffee sometime.
  • Click Suite is where I work – check out our new website – and Zefamedia is my personal blog.
  • Thanks to Click Suite who gave me the time to prepare this talk and workshop!
  • Transcript

    • 1.  
    • 2. [ ] IG information graphics
    • 3. visual representations of information, data or knowledge
    • 4. )-< ?
    • 5. Jeffrey Veen / UX Week 2008
    • 6. Jeffrey Veen / UX Week 2008
    • 7. Jeffrey Veen / UX Week 2008
    • 8. Jeffrey Veen / UX Week 2008
    • 9. Jeffrey Veen / UX Week 2008
    • 10. Jeffrey Veen / UX Week 2008
    • 11. [ ] o-< www
    • 12. MALE PHOTOS / InformationIsBeautiful.net
    • 13. CLIMATE CONCENSUS / InformationIsBeautiful.net
    • 14. H1N1 VACCINE / datavisualization.ch
    • 15. wefeelfine.net
    • 16. wefeelfine.net
    • 17. wefeelfine.net
    • 18. wefeelfine.net
    • 19. FLINKLABS / Global Climate Change Visualisation
    • 20. http://www.bbc.co.uk/britainfromabove/stories/visualisations/taxis.shtml TAXI GPS / bbc.co.uk/britainfromabove/
    • 21. TRAVEL TIMES / mysociety.org/2007/more-travel-maps/
    • 22. TRAVEL TIMES / triptropnyc.com
    • 23. FRISCO CRIME / sanfrancisco.crimespotting.org
    • 24. CRAYOLA COLOURS / weathersealed.com
    • 25. SO LONG & THANKS FOR ALL THE FISH / awesome.good.is
    • 26. SPACE RACE / awesome.good.is
    • 27. RISKS 2010 / weforum.org
    • 28. GALATIC TUBE MAP / arbesman.net/blog/
    • 29. HOW BIG IS OZ? / Viral email from my Mum
    • 30. [ ] o-< nz
    • 31. transport.govt.nz
    • 32. national.org.nz/education/
    • 33. national.org.nz/education/
    • 34. national.org.nz/education/
    • 35. statistics.govt.nz
    • 36. businesstoolbox.stats.govt.nz
    • 37. businesstoolbox.stats.govt.nz
    • 38. businesstoolbox.stats.govt.nz
    • 39. businesstoolbox.stats.govt.nz
    • 40. businesstoolbox.stats.govt.nz
    • 41. [ ] o-< IxD
    • 42.  
    • 43.  
    • 44.  
    • 45.  
    • 46.  
    • 47.  
    • 48.  
    • 49. O)-< /<= U
    • 50. Scoop
    • 51. PacificEye
    • 52.  
    • 53.  
    • 54. pix
    • 55. pix
    • 56. teams 7:11PM
    • 57. teams 7:11PM A massive 8.1 undersea earthquake has just struck west of Chile.
    • 58. teams 7:12PM The Pacific warning system has registered a buoy which has measured a massive tsunami moving at 600km/h towards New Zealand.
    • 59. teams 7:12PM The height has been estimated as around 9 metres and is expected to strike Wellington in about 11hrs.
    • 60. teams 7:12PM Experts recommend people go at least 3km inland or 100metres above sea level in low-lying areas.
    • 61.
      • Your Challenge
      • Design an electronic warning message to quickly and clearly communicate:
      • the danger
      • what to do
      • and by when
      • You’ve got 15min to design + one minute to present.
    • 62. Your Target User “ She’ll be right” Male 30-50 Red/green colour blind Doesn’t pay close attention
    • 63. Team #1 Courtenay Place Digital Billboard
    • 64. Team #2 Google Maps Mash-up
    • 65. Team #3 A once-off viral Twitter
    • 66. Team #4 Google Nexus One (or iPhone)
    • 67. Team #5 Wellington Motorway Sign
    • 68. Team #6 Apple iPad
    • 69. &quot;It's 7:11pm Thursday evening in Wellington. A massive 8.1 undersea earthquake has just struck west of Chile. The Pacific warning system has registered a buoy which has measured a massive tsunami moving at 600km/h towards New Zealand. The height has been estimated as around 9 metres and is expected to strike Wellington in about 11hrs. Experts recommend people go at least 3km inland or 100metres above sea level in low-lying areas&quot;.
    • 70. Workshop Photos Wellington Web Meetup twitter.com/webmeetup 11 February 2010
    • 71.  
    • 72.  
    • 73.  
    • 74.  
    • 75.  
    • 76.  
    • 77.  
    • 78.  
    • 79.  
    • 80.  
    • 81.  
    • 82.  
    • 83.  
    • 84.  
    • 85.  
    • 86.  
    • 87.  
    • 88.  
    • 89.  
    • 90.  
    • 91.  
    • 92.  
    • 93.  
    • 94. ZEF FUGAZ @zefamedia O)- O/- ~ U ~ U
    • 95. [ ] clicksuite.com zefamedia.com O)- O-
    • 96.