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

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

Upload: justin-golden

Post on 20-Jan-2016

219 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Information design for the new web ellyssa kroski computers in libraries 2007

information design for the new web

ellyssa kroski

computers in libraries 2007

Page 2: Information design for the new web ellyssa kroski computers in libraries 2007

MSN

circa

February 29, 2000

Page 3: Information design for the new web ellyssa kroski computers in libraries 2007

About

circa

February 29, 2000

Page 4: Information design for the new web ellyssa kroski computers in libraries 2007

Google - Today

Page 5: Information design for the new web ellyssa kroski computers in libraries 2007

Kodak – May 25, 2004

Page 6: Information design for the new web ellyssa kroski computers in libraries 2007

Flickr - Today

Page 7: Information design for the new web ellyssa kroski computers in libraries 2007

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

Page 8: Information design for the new web ellyssa kroski computers in libraries 2007

Information Design for the New Web

Simple

Social

Alternative Navigation

Page 9: Information design for the new web ellyssa kroski computers in libraries 2007

simplicity

•Simplicity of Web applications•Simplicity of design and style

Page 10: Information design for the new web ellyssa kroski computers in libraries 2007

“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

Page 11: Information design for the new web ellyssa kroski computers in libraries 2007
Page 12: Information design for the new web ellyssa kroski computers in libraries 2007
Page 13: Information design for the new web ellyssa kroski computers in libraries 2007
Page 14: Information design for the new web ellyssa kroski computers in libraries 2007

Simplicity of Web Applications

• Necessary features only

• Less is more philosophy

• Low learning curve

Page 15: Information design for the new web ellyssa kroski computers in libraries 2007

Simplicity of Web Applications

• No software to install

• No manual needed

• No registration

= DIY service model

Page 16: Information design for the new web ellyssa kroski computers in libraries 2007

Healia Health Search

Page 17: Information design for the new web ellyssa kroski computers in libraries 2007

del.icio.us Bookmarking

Page 18: Information design for the new web ellyssa kroski computers in libraries 2007

43 Things Life Goals

Page 19: Information design for the new web ellyssa kroski computers in libraries 2007

Simplicity of Design

• Design style responds to changes in application functionality

• Clean and simple design

Page 20: Information design for the new web ellyssa kroski computers in libraries 2007

Centered Design

Page 21: Information design for the new web ellyssa kroski computers in libraries 2007

Centered Design

Page 22: Information design for the new web ellyssa kroski computers in libraries 2007

Rounded Edges

Page 23: Information design for the new web ellyssa kroski computers in libraries 2007

Rounded Edges

Page 24: Information design for the new web ellyssa kroski computers in libraries 2007

San Serif & Lower Case Fonts

Page 25: Information design for the new web ellyssa kroski computers in libraries 2007

Large Fonts

Page 26: Information design for the new web ellyssa kroski computers in libraries 2007

Large Fonts

Page 27: Information design for the new web ellyssa kroski computers in libraries 2007

Simple Persistant Navigation

Page 28: Information design for the new web ellyssa kroski computers in libraries 2007

Simple Persistant Navigation

Page 29: Information design for the new web ellyssa kroski computers in libraries 2007

Bold Logos

Page 30: Information design for the new web ellyssa kroski computers in libraries 2007

Strong Colors

Page 31: Information design for the new web ellyssa kroski computers in libraries 2007

Strong Colors

Page 32: Information design for the new web ellyssa kroski computers in libraries 2007

Complementary Colors

Page 33: Information design for the new web ellyssa kroski computers in libraries 2007

Complementary Colors

Page 34: Information design for the new web ellyssa kroski computers in libraries 2007

Subtle 3D

Page 35: Information design for the new web ellyssa kroski computers in libraries 2007

Subtle 3D

Page 36: Information design for the new web ellyssa kroski computers in libraries 2007

Reflective Surfaces

Page 37: Information design for the new web ellyssa kroski computers in libraries 2007

Reflective Surfaces

Page 38: Information design for the new web ellyssa kroski computers in libraries 2007

Simple Icons

Page 39: Information design for the new web ellyssa kroski computers in libraries 2007

Simple Icons

Page 40: Information design for the new web ellyssa kroski computers in libraries 2007

Whitespace

Page 41: Information design for the new web ellyssa kroski computers in libraries 2007

Whitespace

Page 42: Information design for the new web ellyssa kroski computers in libraries 2007

Starbursts

Page 43: Information design for the new web ellyssa kroski computers in libraries 2007

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

Page 44: Information design for the new web ellyssa kroski computers in libraries 2007

AJAX – Large Tabs

Page 45: Information design for the new web ellyssa kroski computers in libraries 2007

AJAX – Drag & Drop

Page 46: Information design for the new web ellyssa kroski computers in libraries 2007

AJAX - Autocomplete

Page 47: Information design for the new web ellyssa kroski computers in libraries 2007

Advances in UI - Maps

Page 48: Information design for the new web ellyssa kroski computers in libraries 2007

Advances in UI - WYSIWYG

Page 49: Information design for the new web ellyssa kroski computers in libraries 2007

Advances in UI - Previews

Page 50: Information design for the new web ellyssa kroski computers in libraries 2007

Social

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

Page 51: Information design for the new web ellyssa kroski computers in libraries 2007

Socialization of Media and Applications

• Photos

• Videos

• Books

• News/Text

• Collaborative Applications– Basecamp– Google Docs & Spreadsheets

Page 52: Information design for the new web ellyssa kroski computers in libraries 2007

• Expectation of Interaction with Information

• Required Baseline of Social Functionality

Socialization Requirements & Expectations

Page 53: Information design for the new web ellyssa kroski computers in libraries 2007

Commenting

Page 54: Information design for the new web ellyssa kroski computers in libraries 2007

Rating & Reviewing

Page 55: Information design for the new web ellyssa kroski computers in libraries 2007

Send to a Friend

Page 56: Information design for the new web ellyssa kroski computers in libraries 2007

Share

Page 57: Information design for the new web ellyssa kroski computers in libraries 2007

Subscribe

Page 58: Information design for the new web ellyssa kroski computers in libraries 2007

Save

Page 59: Information design for the new web ellyssa kroski computers in libraries 2007

Websites can no longer be islandsUsers want bridges elsewhere

Page 60: Information design for the new web ellyssa kroski computers in libraries 2007

What are others saying?

Page 61: Information design for the new web ellyssa kroski computers in libraries 2007

Sharing Discoveries

Page 62: Information design for the new web ellyssa kroski computers in libraries 2007

Creating New

Page 63: Information design for the new web ellyssa kroski computers in libraries 2007

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.

Page 64: Information design for the new web ellyssa kroski computers in libraries 2007

User Profiles

Page 65: Information design for the new web ellyssa kroski computers in libraries 2007

Friends Lists

Page 66: Information design for the new web ellyssa kroski computers in libraries 2007

Comments

Page 67: Information design for the new web ellyssa kroski computers in libraries 2007

Communication

Page 68: Information design for the new web ellyssa kroski computers in libraries 2007

Subscribe

Page 69: Information design for the new web ellyssa kroski computers in libraries 2007

Groups

Page 70: Information design for the new web ellyssa kroski computers in libraries 2007

Tools for Personal Expression

Page 71: Information design for the new web ellyssa kroski computers in libraries 2007

Alternate Navigation

Page 72: Information design for the new web ellyssa kroski computers in libraries 2007

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

Page 73: Information design for the new web ellyssa kroski computers in libraries 2007

By User

Page 74: Information design for the new web ellyssa kroski computers in libraries 2007

The Tag Cloud

Page 75: Information design for the new web ellyssa kroski computers in libraries 2007

The Top

Page 76: Information design for the new web ellyssa kroski computers in libraries 2007

The Top

Page 77: Information design for the new web ellyssa kroski computers in libraries 2007

The Zeitgeist

Page 78: Information design for the new web ellyssa kroski computers in libraries 2007

Related Information

Page 79: Information design for the new web ellyssa kroski computers in libraries 2007

Heat Maps

Page 80: Information design for the new web ellyssa kroski computers in libraries 2007

Relationship Maps

Page 81: Information design for the new web ellyssa kroski computers in libraries 2007

Time Tools

Page 82: Information design for the new web ellyssa kroski computers in libraries 2007

Digg Labs

Page 83: Information design for the new web ellyssa kroski computers in libraries 2007

Maps

Page 84: Information design for the new web ellyssa kroski computers in libraries 2007

Widgets

Page 85: Information design for the new web ellyssa kroski computers in libraries 2007

Mashups

Page 86: Information design for the new web ellyssa kroski computers in libraries 2007

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

Page 87: Information design for the new web ellyssa kroski computers in libraries 2007

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

Page 88: Information design for the new web ellyssa kroski computers in libraries 2007

InfoTangle

Information Design for the New Web

http://infotangle.blogsome.com