Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
THE UX OF DATA - VISUALIZATION RESPONSIVE
-
Upload
peter-rozek -
Category
Design
-
view
620 -
download
7
Transcript of THE UX OF DATA - VISUALIZATION RESPONSIVE
@webinterface
TODAY, DATA WAS NO LONGER LIMITED TO JUST A STATIC VIEW, IT COULD BE INTERACTED WITH DYNAMICALLY.
@webinterface@webinterface
THE AVERAGE PERSON COMPREHENDS 120 WORDS PER MINUTE READING.
THAT IS EQUIVALENT TO 81.6 BITS OF DATA PER SECOND.
@webinterface
THE CONNECTION BETWEEN THE EYE AND BRAIN IS FAST.
THE HUMAN BRAIN IS ESPECIALLY AT RECOGNIZING SHAPES AND PATTERNS.
@webinterface
DATA VISUALIZATION AND INFOGRAPHICS ARE NOT THE SAME.
INFOGRAPHICS TELL A SCROLLING STORY, BY PROVIDING TIDBITS OF DATA TO SUPPORT A SPECIFIC IDEA OR STRATEGY.
@webinterface Source: http://www.evanshalshaw.com/more/bondcars/
@webinterface Image: http://www.br.de
VISUAL COMPLEXITY
LEARNING TO CREATE GOOD DATA VISUALIZATION MEANS TO UNDERSTAND THE DATA AT FIRST.
@webinterface
5 6 8 9 1 3 4 8 3 9 4 5 6 7 1 0 2 3 5 8 7 8 3 5 7 3 9 2 4 9 3 1 9 3 4 5
DATATRANSFORMATION
STATISTICS
VISUALMAPPING
VISUAL DESIGN
INTERACTIVE FRAMING
INTERACTION DESIGN
@webinterface Image: http://www.br.de
START SKETCHING YOUR IDEA. THIS TECHNIQUE IS FAST AND EASY TO EVALUATE.
@webinterface
COMPONENT:
DESIGN VISUALIZATIONS FOR ANY SCREEN AND ANY BROWSER.
USE HTML TO BUILD AND JAVASCRIPT TO ENHANCE.
@webinterface
USE AND ADAPT THE TECHNICAL PRINCIPLES OF RESPONSIVE WEB DESIGN.WORKING WITH FLEXIBLE GRIDDESIGNING WITH CSSENHANCING WITH JAVASCRIPT
@webinterface Source: What makes a good visualization?
PEOPLE TELL STORIES
@webinterface Image: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
Image from: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks@webinterface
WORDS TELL STORIES
Image from: http://nikolawashere.com/tag/avengers/@webinterface
COMIC TELL STORIES
Image from: http://www.giga.de/filme/...@webinterface
MOVIES TELL STORIES
@webinterface
JAVASCRIPT LIBRARY FOR MANIPULATING DOCUMENTS BASED ON DATA.
USING HTML, SVG, CSS TRANSITIONS EMPHASIS ON WEB STANDARDS CAPABILITIES OF MODERN BROWSERS
„…so if your browser doesn't support standards, you're out of luck. Sorry!“
D3 documentation
Source: https://github.com/mbostock/d3/wiki@webinterface
@webinterface
STYLE WITH CSS & CONTROL WITH JS USAGE OF SVG RESPONSIVE CONFIGURATION WITH MEDIA QUERIES
@webinterface
DATA VISUALIZATIONS EXIST TO INFORM THE USER.
THEY´RE NOT AN EXCUSE TO OVERLOAD SOMEONE WITH INFORMATION THEY DON´T NEED TO KNOW.
@webinterface
ROLE OF A DESIGNER AND DEVELOPER TO FOCUS ON SIMPLICITY.
TAKING COMPLEX OR DISPARATE INFORMATION AND MAKING IT TANGIBLE AND UNDERSTANDABLE.
„Big Data ist kein Heiliger Gral. Entscheidungen müssen immer noch von Menschen getroffen werden. Maschinen können nicht kreativ sein.“
Jeremy Abbet, Creative Evangelist bei Google Deutschland
@webinterface