• What?
  • Who?
  • Contact Jonathan Jeter
  • Privacy Policy

Jonathan Jeter

Director of Application Development

  • Jonathan Jeter on Google+
  • Jonathan Jeter on Facebook
  • Follow Jonathan Jeter on Twitter
  • Jonathan Jeter on LinkedIn
  • Jonathan Jeter's rss feed
Home User Interface / User Experience Design Noah Iliinsky – The Steps to Beautiful Visualizations

Noah Iliinsky – The Steps to Beautiful Visualizations

May 23, 2011 By Jonathan Jeter Leave a Comment

UIE Web App Master’s Tour – Seattle, Washington – May 23, 2011

 

Noah Iliinsky - The Steps to Beautiful Visualizations
Noah Iliinsky - The Steps to Beautiful Visualizations

Noah Iliinsky

How do you start from a mountain of data and create something presentable that conveys the message?

Analysis vs Presentation

Data Visualization vs Infographic

Data Visualizations are generated

Infographics are designed (manually drawn)

Education vs Persuasion

Education distributes information without a message

Persuasion has an agenda

Complexity

The number of different information axes represented

Large number of targets

Finite number of visual properties

Qualitative relationships are more difficult to represent because there are no standards and the reader has to be educated before the reader can understand the data.

Intentional choices are superior to arbitrary choices. You need to make intentional choices when presenting data, not just use a template of what you’ve done before.

Understand your goals, their needs. Then choose what to include, where to put it, and how it looks.

Understand Your goals – If you can’t concisely articulate your goal, you’re doing it wrong.

Different goals require different methods. Default formats are totally the right answer, unless there is a better answer and the answer better be good enough that people will spend the time to learn the new format.

Understand Your Customer’s Needs

Your customer’s don’t care about your brand, they just want to get their work done and move on.

Your success is defined by your customers’ success.

If you can’t satisfy their needs, you have failed.

Do user research!

Understand their hopes, dreams, and favorite flavors!

Understand their contexts of use! The answer to “what do you do?” varies depending on whose asking.

Beware of arbitrary design choices, especially when there are already standards for design elements you are using.

What to Include

  • only present the necessary information (every piece of data on the page is either relevant or noise)
  • more detail can be good or bad
  • redundant encoding is good
  • extraneous graphical treatment is often bad

Four types of content on the page: data, redundant encoding, decoration, & noise

Where to put it

  • people ascribe meaning to location
  • relative placement of things matters (placement correlates to actual placement in real life, unless there is a better option)
  • absolute placement matters

Axes give you information for free.

How it looks

Patterns are really important. People will detect patterns, and ascribe meaning to patterns and pattern violations. Humans are sophisticated pattern matching machines. Be very intentional with the patterns you choose to use and make sure there are no unintentional patterns.

  • establish patterns and stick with them
  • things that are the same should look the same
  • things that are different should look different
  • preserve order in placement and lists

Pick appropriate encodings: color, shape, line endings/patterns, shading/texture, brightness & saturation, size, placement, numeric labels.

NOTE: These are my notes from The UIE Web App Master’s Tour presentations. They were great resources and you can find much more about them and by the presentations on demand at UIE. While I would love to add my thoughts and more details to these posts, I doubt that will ever happen.

Related articles
  • Everything old is new again (jodymacpherson.wordpress.com)
  • Data Visualization Resources (secviz.org)
  • The beauty of data visualization (ritholtz.com)

Tell someone about this:

  • Email
  • Print
  • Twitter
  • LinkedIn
  • Facebook
  • More
  • Reddit
  • Pocket
  • Tumblr

Like this:

Like Loading...

Related

Filed Under: User Interface / User Experience Design Tagged With: actual placement, agenda complexity, appropriate encodings, arbitrary choices, arbitrary design choices, Beautiful Visualizations, better answer, better option, Data Visualizations, Default formats, design elements, Different goals, different information, Different methods, different preserve order, favorite flavors, graphical treatment, Infographic Data Visualizations, Information graphics, Information visualization, intentional choices, Large number, location relative placement, message persuasion, necessary information, new format, Noah Iliinsky, numeric labels, Pattern matching, pattern matching machines, pattern violations, Persuasion Education, placement correlates, placement matters axes, Qualitative relationships, real life, redundant encoding, right answer, Technology Internet, UI, UIE, UIE Web App, unintentional patterns, user research, UX, visual properties, vs presentation data, web app, Web App Master, Web App Master's Tour

About Jonathan Jeter

Jonathan Jeter has been creating websites since 1997. He is currently Director of Technology Services and Digital Development at TracyLocke, a shopper marketing agency. You can follow him @mywebthoughts, on LinkedIn or connect on Google+.

What do YOU think? Let me know...Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stuff I Like to Talk About:

  • Business
  • Digital Imaging
  • Internet Marketing
    • Email Marketing
    • SEM / Paid Search
  • Life
  • Other Stuff
    • Health
    • Taekwondo (TKD)
  • Sports
    • Football
  • Technology
    • Augmented Reality
    • Awesome or Scary?
    • Marketing Technology
      • Data / Analytics
      • Omnichannel
    • Mobile
      • Android
    • Virtual Reality
  • User Interface / User Experience Design
  • Web Development
    • Browsers
    • CSS
    • Front-End Development
    • Google+ (Google Plus)
    • HTML5
    • JavaScript
    • jQuery
    • Mobile
    • MVC
    • Responsive Design
    • SEO
    • Social Media
    • UI/UX
    • WordPress

HTML

  • HTML Entities

JavaScript

  • MEAN.js

My Sites

  • Head Turning Media
  • Jonathan Jeter (Brand Yourself)
  • My Humor

Online Experts

  • Bryan Eisenberg
  • Danny Sullivan
  • Duane Forrester
  • Keith Brown
  • Louis Gray
  • Matt Cutts

UI / UX

  • Jared Spool
  • Paul Jeter
FreshBooks
Genesis Framework for WordPress Premise Landing Pages Made Easy

Most Popular

  • Verizon Wireless – My Favorite Mobile Provider
  • Who?
  • Intro to WebGL and Three.js – Front Porch…
  • People Data and the Future of Marketing –…
  • Exploring Standard Ad Unit Sizes: Google AdSense…
  • Exploring Standard Ad Unit Sizes: Google AdSense…
  • Jared Spool – The Essential Principles behind…
  • A Brief History of the Complete Redesign of Google…
  • Removing the /blog Slug in WordPress MultiSite
  • Looking for Instagram or Android fonts or logos and…

Copyright © 2025 Jonathan Jeter

 

Loading Comments...
 

    %d