Etech - The Future of UI in a Web 2.0 World

Notes from Data vs. Design: The Future of UI in a Web 2.0 World, by Scott Berkun.

Scott's site is here.

Perception: what do I see
Cognition: what does it mean
Desire: what do I want
Mechanism: how do I get it

The above is based on human APIs, not tech APIs... they apply to anything.

Example: Vending machines
- old-school, push button of thing I want
- new school, you see the thing (which is good), but involves lots of cognition. You need to make a mapping between the item and a random alphanumeric code to get the item. This is bad, because memory is expensive.

Fitts' Law (rough guide): it's harder to target things that are further away & smaller in size.

This goes largely unknown, but granular movements are not trivial.

Movable Type (emerging tech of the year, 1455)
- Gutenberg bible page. Gutenberg designed his bible to be read out loud. It has narrow columns, so it's easy to keep your place.

Visual anchors are important. Scott shows two menus: one has centered text, and the other has everything left-justified. It's much harder to read the centered menu because there are no visual anchors.

We read online much slower online than we do on paper. The NY Times helps the eye speed through text. You have to pay attention to this stuff if you're designing a site that's data-driven.

Berkun talks about Delicious, and walks through cleaning up the UI.

  • simple trick, any time you have data that is similar and on different lines, you should left-justify it
  • make text readable through use of colors
  • value of data is relative, so we don't need words, can use colors instead, which doesn't need real estate

Berkun rips Tufte's chart of Napoleon's March to Russia and back. The information resolution is high, but the point isn't always to understand as much as possible, as it is to be simple and deliver only the necessary data.

Quote: "Lists are the cockroach of design."

Lots of map mashups aren't good, because the map isn't key to understanding the data. One exception is HousingMaps.com, which helps the user orient themselves to the city.

Tag Clouds

Scott then goes off on the O'Reilly Radar sidebar. He asks:

What problem are we trying to solve? Why are these bits here?

Good answers to those questions are that the tag cloud helps people get to things of interest, it makes it easy to group posts, it helps users quickly locate specific topics, and it helps users understand what this site is about.

Answers that are questionable because they help the designer, not the user: it uses 2D space in a creative way, it makes the site look interesting, and it is interesting experimentation (which you shouldn't do with your customers!)

The presentation strays waaaaay off course here, as people start defending the tag cloud. It was too bad, because this was a great presentation.

Summary

  • skill with human apis are as important as tech
  • data should serve desires through design
  • cool is always easier than good
  • good design conserves attention
  • all data needs good ui design

Technorati Tags: , , , ,

Related Posts

About

Hi, I'm Kareem Mayan. I co-founded eduFire, an online video tutoring company.

I've done time at ESPN and FIM.

I advise WorldBlu, helping them build democratic companies.

I moderated a council for Creative Good.

And, I helped bring Barcamp, a technology un-conference, to LA, which is where I live. I am now living and working in cool cities around the world.

More about me.

Opinions stated here are mine alone.

Contact: blog -at- reemer

Subscribe

 Subscribe with RSS

 Subscribe by email



Good Products

Dreamhost web hosting!

Kiva: $25 to change a life. Kiva - loans that change lives

Powered By

Subscribe via RSS Subscribe to this blog
All content © 2002-2006 Kareem Mayan
Almond Oil Face Scrub | Apple Cider Vinegar Face Wash | Olive Oil Face Cream
Olive Oil Face and Body Lotion | Witch Hazel Face Toner