how to present lots of information on a screen

16
How to present lots of information on a screen

Upload: gabehamilton

Post on 12-Jun-2015

479 views

Category:

Documents


0 download

DESCRIPTION

Tips you can put in practice today on how to improve your User Interfaces and communicate large amounts of information to users.

TRANSCRIPT

Page 1: How to present lots of information on a screen

How to present lots of information on a screen

Page 2: How to present lots of information on a screen

cacaphony of pictures here

Nuclear launch detected

Like this?

Page 3: How to present lots of information on a screen
Page 4: How to present lots of information on a screen

Simplicity

It takes work to simplify

Plan time to simplify your designs

"Looks good, how can we make it simpler?"

Page 5: How to present lots of information on a screen

Reduce

The simplest way to achieve simplicity is through thoughtful reduction. - John Maeda

What features can we hide?

What can we remove?

Page 6: How to present lots of information on a screen

What would Tufte do?

"There are a lot of terrible graphs out there!"- things Tufte probably said

Professor Tufte studies how to present various kinds of information.

1975

Page 7: How to present lots of information on a screen

Data to Ink Ratio

Page 8: How to present lots of information on a screen

Which means Fewer Lines

Page 9: How to present lots of information on a screen
Page 10: How to present lots of information on a screen
Page 11: How to present lots of information on a screen

In action at Google

"A lot of use of white space, not a lot of artificial, surface-like divisions. We’re really counting on bold typography, white space, and big images to give emphasis, give character and give hierarchy to the cards that we give you."

-Matias Duarte, senior director, Android user experience

Page 12: How to present lots of information on a screen
Page 13: How to present lots of information on a screen

No Crazy Effects

Fun for a slideshow but bad for comparing data. Imagine a few of these on a screen.

Page 14: How to present lots of information on a screen

A good 3D chart

Page 15: How to present lots of information on a screen
Page 16: How to present lots of information on a screen

Thanks

http://commons.wikimedia.org/wiki/File:Enso.jpghttp://commons.wikimedia.org/wiki/File:Highway_Chart_Data.pdfhttp://commons.wikimedia.org/wiki/File:Gantt_it.pnghttp://commons.wikimedia.org/wiki/File:BTW05_VAE_CDU_CSU_Stapel.jpghttp://commons.wikimedia.org/wiki/File:Switches_domain.svg

Wheelbarrow photo - By U.S. Navy photo by Mass Communication Specialist 2nd Class Dustin Kelling [Public domain], via Wikimedia Commons