information design for the new web ellyssa kroski computers in libraries 2007

MSN circa February 29, 2000

About circa February 29, 2000

Google - Today

Kodak – May 25, 2004

Flickr - Today

The New Web User experience is changing Changes in the way people consume information Changes in user expectations Changes in technology = Changes in information design

User experience is changing

Changes in the way people consume information

Changes in user expectations

Changes in technology

= Changes in information design

Information Design for the New Web Simple Social Alternative Navigation

Simple

Social

Alternative Navigation

simplicity Simplicity of Web applications Simplicity of design and style

Simplicity of Web applications

Simplicity of design and style

“ The fact that some choice is good doesn’t necessarily mean that more choice is better…there is a cost to having an overload of choice.” -The Paradox of Choice

Simplicity of Web Applications Necessary features only Less is more philosophy Low learning curve

Necessary features only

Less is more philosophy

Low learning curve

Simplicity of Web Applications No software to install No manual needed No registration = DIY service model

No software to install

No manual needed

No registration

= DIY service model

Healia Health Search

del.icio.us Bookmarking

43 Things Life Goals

Simplicity of Design Design style responds to changes in application functionality Clean and simple design

Design style responds to changes in application functionality

Clean and simple design

Centered Design

Centered Design

Rounded Edges

Rounded Edges

San Serif & Lower Case Fonts

Large Fonts

Large Fonts

Simple Persistant Navigation

Simple Persistant Navigation

Bold Logos

Strong Colors

Strong Colors

Complementary Colors

Complementary Colors

Subtle 3D

Subtle 3D

Reflective Surfaces

Reflective Surfaces

Simple Icons

Simple Icons

Whitespace

Whitespace

Starbursts

Advances in User Interface AJAX An evolution in Web interface design which allows information to be processed without reloading the page. Large Tabs Drag-and-Drop Autocomplete

AJAX

An evolution in Web interface design which allows information to be processed without reloading the page.

Large Tabs

Drag-and-Drop

Autocomplete

AJAX – Large Tabs

AJAX – Drag & Drop

AJAX - Autocomplete

Advances in UI - Maps

Advances in UI - WYSIWYG

Advances in UI - Previews

Social Socialization of Media and Applications Social for Social’s Sake

Socialization of Media and Applications

Social for Social’s Sake

Socialization of Media and Applications Photos Videos Books News/Text Collaborative Applications Basecamp Google Docs & Spreadsheets

Photos

Videos

Books

News/Text

Collaborative Applications

Basecamp

Google Docs & Spreadsheets

Expectation of Interaction with Information Required Baseline of Social Functionality Socialization Requirements & Expectations

Expectation of Interaction with Information

Required Baseline of Social Functionality

Commenting

Rating & Reviewing

Send to a Friend

Share

Subscribe

Save

Websites can no longer be islands Users want bridges elsewhere

Websites can no longer be islands

Users want bridges elsewhere

What are others saying?

Sharing Discoveries

Creating New

Social for Social’s Sake Social Networking Websites Primary purpose is a sense of community and connection with others. User profile is the primary component of a social networking application and the navigation revolves around it.

Social Networking Websites

Primary purpose is a sense of community and connection with others.

User profile is the primary component of a social networking application and the navigation revolves around it.

User Profiles

Friends Lists

Comments

Communication

Subscribe

Groups

Tools for Personal Expression

Alternate Navigation

Alternate Navigation New Ways to Navigate Web Content Visual Representations of What’s Important “We don’t read pages, we scan them” – Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

New Ways to Navigate Web Content

Visual Representations of What’s Important

“We don’t read pages, we scan them” – Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

By User

The Tag Cloud

The Top

The Top

The Zeitgeist

Related Information

Heat Maps

Relationship Maps

Time Tools

Digg Labs

Maps

Widgets

Mashups

Ellyssa’s Principles of Information Design for the New Web Make it Simple Include only necessary functionality Clean efficient design Make it Social Meet users expectations Enable connections Offer Alternate Navigation Reflect Zeitgeist Offer visualizations

Make it Simple

Include only necessary functionality

Clean efficient design

Make it Social

Meet users expectations

Enable connections

Offer Alternate Navigation

Reflect Zeitgeist

Offer visualizations

Closing Thoughts Evolve The Perpetual Beta Ethnographic development Be Nimble Respond to changes/advances Be willing to abandon bad ideas Be Open Design Badges & Widgets Issue an API

Evolve

The Perpetual Beta

Ethnographic development

Be Nimble

Respond to changes/advances

Be willing to abandon bad ideas

Be Open

Design Badges & Widgets

Issue an API

InfoTangle Information Design for the New Web http:// infotangle.blogsome.com

Information Design for the New Web

http:// infotangle.blogsome.com