Information Design for the New Web

4,714 views

Published on

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...

Published in: Business, Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
4,714
On SlideShare
0
From Embeds
0
Number of Embeds
477
Actions
Shares
0
Downloads
224
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Information Design for the New Web

  1. 1. information design for the new web ellyssa kroski computers in libraries 2007
  2. 2. MSN circa February 29, 2000
  3. 3. About circa February 29, 2000
  4. 4. Google - Today
  5. 5. Kodak – May 25, 2004
  6. 6. Flickr - Today
  7. 7. The New Web <ul><li>User experience is changing </li></ul><ul><ul><li>Changes in the way people consume information </li></ul></ul><ul><ul><li>Changes in user expectations </li></ul></ul><ul><ul><li>Changes in technology </li></ul></ul><ul><li>= Changes in information design </li></ul>
  8. 8. Information Design for the New Web <ul><li>Simple </li></ul><ul><li>Social </li></ul><ul><li>Alternative Navigation </li></ul>
  9. 9. simplicity <ul><li>Simplicity of Web applications </li></ul><ul><li>Simplicity of design and style </li></ul>
  10. 10. “ 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
  11. 14. Simplicity of Web Applications <ul><li>Necessary features only </li></ul><ul><li>Less is more philosophy </li></ul><ul><li>Low learning curve </li></ul>
  12. 15. Simplicity of Web Applications <ul><li>No software to install </li></ul><ul><li>No manual needed </li></ul><ul><li>No registration </li></ul><ul><li>= DIY service model </li></ul>
  13. 16. Healia Health Search
  14. 17. del.icio.us Bookmarking
  15. 18. 43 Things Life Goals
  16. 19. Simplicity of Design <ul><li>Design style responds to changes in application functionality </li></ul><ul><li>Clean and simple design </li></ul>
  17. 20. Centered Design
  18. 21. Centered Design
  19. 22. Rounded Edges
  20. 23. Rounded Edges
  21. 24. San Serif & Lower Case Fonts
  22. 25. Large Fonts
  23. 26. Large Fonts
  24. 27. Simple Persistant Navigation
  25. 28. Simple Persistant Navigation
  26. 29. Bold Logos
  27. 30. Strong Colors
  28. 31. Strong Colors
  29. 32. Complementary Colors
  30. 33. Complementary Colors
  31. 34. Subtle 3D
  32. 35. Subtle 3D
  33. 36. Reflective Surfaces
  34. 37. Reflective Surfaces
  35. 38. Simple Icons
  36. 39. Simple Icons
  37. 40. Whitespace
  38. 41. Whitespace
  39. 42. Starbursts
  40. 43. Advances in User Interface <ul><li>AJAX </li></ul><ul><ul><li>An evolution in Web interface design which allows information to be processed without reloading the page. </li></ul></ul><ul><ul><li>Large Tabs </li></ul></ul><ul><ul><li>Drag-and-Drop </li></ul></ul><ul><ul><li>Autocomplete </li></ul></ul>
  41. 44. AJAX – Large Tabs
  42. 45. AJAX – Drag & Drop
  43. 46. AJAX - Autocomplete
  44. 47. Advances in UI - Maps
  45. 48. Advances in UI - WYSIWYG
  46. 49. Advances in UI - Previews
  47. 50. Social <ul><li>Socialization of Media and Applications </li></ul><ul><li>Social for Social’s Sake </li></ul>
  48. 51. Socialization of Media and Applications <ul><li>Photos </li></ul><ul><li>Videos </li></ul><ul><li>Books </li></ul><ul><li>News/Text </li></ul><ul><li>Collaborative Applications </li></ul><ul><ul><li>Basecamp </li></ul></ul><ul><ul><li>Google Docs & Spreadsheets </li></ul></ul>
  49. 52. <ul><li>Expectation of Interaction with Information </li></ul><ul><li>Required Baseline of Social Functionality </li></ul>Socialization Requirements & Expectations
  50. 53. Commenting
  51. 54. Rating & Reviewing
  52. 55. Send to a Friend
  53. 56. Share
  54. 57. Subscribe
  55. 58. Save
  56. 59. <ul><li>Websites can no longer be islands </li></ul><ul><ul><li>Users want bridges elsewhere </li></ul></ul>
  57. 60. What are others saying?
  58. 61. Sharing Discoveries
  59. 62. Creating New
  60. 63. Social for Social’s Sake <ul><li>Social Networking Websites </li></ul><ul><ul><li>Primary purpose is a sense of community and connection with others. </li></ul></ul><ul><ul><li>User profile is the primary component of a social networking application and the navigation revolves around it. </li></ul></ul>
  61. 64. User Profiles
  62. 65. Friends Lists
  63. 66. Comments
  64. 67. Communication
  65. 68. Subscribe
  66. 69. Groups
  67. 70. Tools for Personal Expression
  68. 71. Alternate Navigation
  69. 72. Alternate Navigation <ul><li>New Ways to Navigate Web Content </li></ul><ul><li>Visual Representations of What’s Important </li></ul><ul><li>“We don’t read pages, we scan them” – Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug </li></ul>
  70. 73. By User
  71. 74. The Tag Cloud
  72. 75. The Top
  73. 76. The Top
  74. 77. The Zeitgeist
  75. 78. Related Information
  76. 79. Heat Maps
  77. 80. Relationship Maps
  78. 81. Time Tools
  79. 82. Digg Labs
  80. 83. Maps
  81. 84. Widgets
  82. 85. Mashups
  83. 86. Ellyssa’s Principles of Information Design for the New Web <ul><li>Make it Simple </li></ul><ul><ul><li>Include only necessary functionality </li></ul></ul><ul><ul><li>Clean efficient design </li></ul></ul><ul><li>Make it Social </li></ul><ul><ul><li>Meet users expectations </li></ul></ul><ul><ul><li>Enable connections </li></ul></ul><ul><li>Offer Alternate Navigation </li></ul><ul><ul><li>Reflect Zeitgeist </li></ul></ul><ul><ul><li>Offer visualizations </li></ul></ul>
  84. 87. Closing Thoughts <ul><li>Evolve </li></ul><ul><ul><li>The Perpetual Beta </li></ul></ul><ul><ul><li>Ethnographic development </li></ul></ul><ul><li>Be Nimble </li></ul><ul><ul><li>Respond to changes/advances </li></ul></ul><ul><ul><li>Be willing to abandon bad ideas </li></ul></ul><ul><li>Be Open </li></ul><ul><ul><li>Design Badges & Widgets </li></ul></ul><ul><ul><li>Issue an API </li></ul></ul>
  85. 88. InfoTangle <ul><li>Information Design for the New Web </li></ul><ul><li>http:// infotangle.blogsome.com </li></ul>

×