information design for the new web
DESCRIPTION
Information design for the Web has changed. People are changing the way that they consume online information, as well as their expectations about its delivery...TRANSCRIPT
![Page 1: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/1.jpg)
information design for the new web
ellyssa kroski
computers in libraries 2007
![Page 2: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/2.jpg)
MSN
circa
February 29, 2000
![Page 3: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/3.jpg)
About
circa
February 29, 2000
![Page 4: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/4.jpg)
Google - Today
![Page 5: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/5.jpg)
Kodak – May 25, 2004
![Page 6: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/6.jpg)
Flickr - Today
![Page 7: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/7.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/8.jpg)
Information Design for the New Web
Simple
Social
Alternative Navigation
![Page 9: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/9.jpg)
simplicity
•Simplicity of Web applications•Simplicity of design and style
![Page 10: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/10.jpg)
“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](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/11.jpg)
![Page 12: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/12.jpg)
![Page 13: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/13.jpg)
![Page 14: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/14.jpg)
Simplicity of Web Applications
• Necessary features only
• Less is more philosophy
• Low learning curve
![Page 15: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/15.jpg)
Simplicity of Web Applications
• No software to install
• No manual needed
• No registration
= DIY service model
![Page 16: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/16.jpg)
Healia Health Search
![Page 17: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/17.jpg)
del.icio.us Bookmarking
![Page 18: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/18.jpg)
43 Things Life Goals
![Page 19: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/19.jpg)
Simplicity of Design
• Design style responds to changes in application functionality
• Clean and simple design
![Page 20: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/20.jpg)
Centered Design
![Page 21: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/21.jpg)
Centered Design
![Page 22: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/22.jpg)
Rounded Edges
![Page 23: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/23.jpg)
Rounded Edges
![Page 24: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/24.jpg)
San Serif & Lower Case Fonts
![Page 25: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/25.jpg)
Large Fonts
![Page 26: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/26.jpg)
Large Fonts
![Page 27: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/27.jpg)
Simple Persistant Navigation
![Page 28: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/28.jpg)
Simple Persistant Navigation
![Page 29: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/29.jpg)
Bold Logos
![Page 30: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/30.jpg)
Strong Colors
![Page 31: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/31.jpg)
Strong Colors
![Page 32: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/32.jpg)
Complementary Colors
![Page 33: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/33.jpg)
Complementary Colors
![Page 34: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/34.jpg)
Subtle 3D
![Page 35: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/35.jpg)
Subtle 3D
![Page 36: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/36.jpg)
Reflective Surfaces
![Page 37: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/37.jpg)
Reflective Surfaces
![Page 38: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/38.jpg)
Simple Icons
![Page 39: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/39.jpg)
Simple Icons
![Page 40: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/40.jpg)
Whitespace
![Page 41: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/41.jpg)
Whitespace
![Page 42: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/42.jpg)
Starbursts
![Page 43: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/43.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/44.jpg)
AJAX – Large Tabs
![Page 45: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/45.jpg)
AJAX – Drag & Drop
![Page 46: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/46.jpg)
AJAX - Autocomplete
![Page 47: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/47.jpg)
Advances in UI - Maps
![Page 48: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/48.jpg)
Advances in UI - WYSIWYG
![Page 49: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/49.jpg)
Advances in UI - Previews
![Page 50: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/50.jpg)
Social
•Socialization of Media and Applications•Social for Social’s Sake
![Page 51: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/51.jpg)
Socialization of Media and Applications
• Photos
• Videos
• Books
• News/Text
• Collaborative Applications– Basecamp– Google Docs & Spreadsheets
![Page 52: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/52.jpg)
• Expectation of Interaction with Information
• Required Baseline of Social Functionality
Socialization Requirements & Expectations
![Page 53: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/53.jpg)
Commenting
![Page 54: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/54.jpg)
Rating & Reviewing
![Page 55: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/55.jpg)
Send to a Friend
![Page 56: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/56.jpg)
Share
![Page 57: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/57.jpg)
Subscribe
![Page 58: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/58.jpg)
Save
![Page 59: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/59.jpg)
Websites can no longer be islandsUsers want bridges elsewhere
![Page 60: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/60.jpg)
What are others saying?
![Page 61: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/61.jpg)
Sharing Discoveries
![Page 62: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/62.jpg)
Creating New
![Page 63: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/63.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/64.jpg)
User Profiles
![Page 65: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/65.jpg)
Friends Lists
![Page 66: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/66.jpg)
Comments
![Page 67: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/67.jpg)
Communication
![Page 68: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/68.jpg)
Subscribe
![Page 69: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/69.jpg)
Groups
![Page 70: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/70.jpg)
Tools for Personal Expression
![Page 71: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/71.jpg)
Alternate Navigation
![Page 72: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/72.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/73.jpg)
By User
![Page 74: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/74.jpg)
The Tag Cloud
![Page 75: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/75.jpg)
The Top
![Page 76: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/76.jpg)
The Top
![Page 77: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/77.jpg)
The Zeitgeist
![Page 78: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/78.jpg)
Related Information
![Page 79: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/79.jpg)
Heat Maps
![Page 80: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/80.jpg)
Relationship Maps
![Page 81: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/81.jpg)
Time Tools
![Page 82: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/82.jpg)
Digg Labs
![Page 83: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/83.jpg)
Maps
![Page 84: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/84.jpg)
Widgets
![Page 85: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/85.jpg)
Mashups
![Page 86: Information Design for the New Web](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/86.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/87.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022051819/54c79db84a7959551f8b45c5/html5/thumbnails/88.jpg)
InfoTangle
Information Design for the New Web
http://infotangle.blogsome.com