Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing for Web 2.0 (BarCamp Delhi)


Published on

Published in: Business, Technology

Designing for Web 2.0 (BarCamp Delhi)

  1. 1. Designing for Web 2.0 Rashmi Sinha
  2. 2. browsing alone Attributed to PIMboula on Flickr:
  3. 4. Part I: The rise of tagging (& the fall of menus)
  4. 5. Categorization & tagging cognitively speaking…
  5. 6. How categorization works <ul><li>Artifacts of digital categorization </li></ul><ul><li>Analysis Paralysis </li></ul><ul><li>Balancing your scheme </li></ul><ul><li>Over time – category boundaries change, labels obsolete </li></ul><ul><li>Systems hide item – mistakes costly </li></ul>Multiple concepts activated Choose ONE of the activated concepts. Categorize it! Object worth remembering (article, image…) Analysis-Paralysis!
  6. 7. How tagging works Multiple concepts are activated Tag it! Note all concepts Object worth remembering (article, image…) <ul><li>Maps to cognitive process </li></ul><ul><li>Reduced load </li></ul><ul><li>Fun </li></ul><ul><li>Self-feedback, social feedback </li></ul><ul><li>No balancing of scheme </li></ul>
  7. 8. Tags make web a shared experience <ul><li>Tags give you community – feeling of others around you </li></ul><ul><li>Other social characteristics </li></ul><ul><ul><li>Social transmission of information </li></ul></ul><ul><ul><li>Social Play, e.g., stalking, imitation </li></ul></ul><ul><ul><li>… </li></ul></ul>
  8. 9. Tagging and Wisdom of Crowds “ A crowd of decentralized people working to solve a problem on their own without any central effort to guide them, come up with better solutions, rather than a top-down driven solution.”
  9. 10. Four Conditions <ul><li>Cognitive Diversity </li></ul><ul><li>Independence </li></ul><ul><li>Decentralization </li></ul><ul><li>Easy Aggregation </li></ul>
  10. 11. Menus and TagClouds <ul><li>Menus </li></ul><ul><ul><li>Structured </li></ul></ul><ul><ul><li>Stable over time </li></ul></ul><ul><ul><li>Comprehensive </li></ul></ul><ul><li>TagClouds </li></ul><ul><ul><li>Unstructured </li></ul></ul><ul><ul><li>Relatively unstable </li></ul></ul><ul><ul><li>Not comprehensive </li></ul></ul><ul><ul><li>Let current stuff bubble to top </li></ul></ul>
  11. 13. Part II: Rich user interfaces
  12. 14. Part II Social presence (integration of GTalk with Gmail) Real time collaboration with text documents
  13. 15. DiggSpy: real time updating
  14. 16. Part III: Social sharing
  15. 17. <ul><li>This is not it! </li></ul>
  16. 18. Hi I found you while I was searching my network at LinkedIn. Let's connect directly, so we can help each other with referrals. If we connect, both of our networks will grow. To add me as your connection, just follow the link below.
  17. 19. First generation Social Networks (Friendster, LinkedIn…) <ul><li>How it works </li></ul><ul><li>Individuals connected to each other </li></ul><ul><li>Relationships can be marked, hubs identified </li></ul><ul><li>Concept of six degrees of separation </li></ul><ul><li>“ Are you my friend” type of awkwardness </li></ul>
  18. 20. Object mediated social networks “… call for the rethinking of sociality along lines that include objects in the concept of social relations.” Katrin-Knorr Cetina Reference:
  19. 21. Over “ coffee ” Watching a “ dance performance ” Over “ tomatoes ”
  20. 22. Second generation social networks <ul><li>Put objects at the center </li></ul><ul><ul><li>Watercooler conversations </li></ul></ul><ul><ul><li>Viral sharing </li></ul></ul><ul><ul><li>Social news creation </li></ul></ul>
  21. 23. Watercooler conversations around objects (social networks with objects in between) e.g., Flickr, Yahoo answers <ul><li>How it works </li></ul><ul><li>People share objects and watch others </li></ul><ul><li>Social connections are through objects </li></ul><ul><li>Formation of social streams of information with emergence of popular, interesting items </li></ul>
  22. 25. Viral sharing (passing on interesting stuff) e.g., YouTube videos <ul><li>How it works </li></ul><ul><li>Individual to individual to individual </li></ul><ul><li>Popularity based navigation helps track “viral” items </li></ul>
  23. 27. Social news creation (rating news stories) e.g., digg, Newsvine <ul><li>How it works </li></ul><ul><li>Finding and rating stories </li></ul><ul><li>Popular stories rise to top </li></ul>
  24. 29. Objects invite us to <ul><li>Connect </li></ul><ul><li>Play </li></ul><ul><li>React </li></ul><ul><li>Reach out </li></ul>
  25. 30. Part IV: So you want to design for Web 2.0?
  26. 31. Forget the ipod!
  27. 32. Give up control This is messy!
  28. 33. Beyond hand-crafted information architectures
  29. 34. Plant the seeds, let people connect
  30. 35. Design for emergent architecture
  31. 36. Part IV: Some principles…
  32. 37. 1: Make system personally useful <ul><li>For end-user system should have strong personal use </li></ul><ul><ul><li>Memorable Personal Snippets (e.g., & Flickr) </li></ul></ul><ul><ul><li>Self-expression (e.g., Newsvine) </li></ul></ul><ul><ul><li>Social status: Digg </li></ul></ul><ul><li>Don’t count on altruism </li></ul><ul><ul><li>System should thrive on people’s selfishness </li></ul></ul>
  33. 38. Bite-sized self-expression <ul><li>Self-expression </li></ul><ul><ul><li>Artistic expression (Flickr, YouTube) </li></ul></ul><ul><ul><li>Humor (YouTube) </li></ul></ul><ul><ul><li>Professional (Slideshare) </li></ul></ul><ul><li>Individual piece should be small </li></ul><ul><ul><li>Can create sets & lists </li></ul></ul><ul><ul><li>Do Mashups </li></ul></ul><ul><ul><li>Simple, guessable URLs for everything </li></ul></ul>
  34. 39. 2: Symbiotic relationship between personal & social <ul><li>Personal snippets > Social stream </li></ul><ul><ul><li>Pictures > Organized by Events </li></ul></ul><ul><ul><li>Music > Organized by Playlists </li></ul></ul>
  35. 40. 3: Create porous boundary between public & private <ul><li>Earlier systems </li></ul><ul><ul><li>Personal (Personal Desktop Software, e.g., Picasa, EndNote) </li></ul></ul><ul><ul><li>OR Social websites (Shutterfly) </li></ul></ul><ul><li>Rethink public & private </li></ul><ul><ul><li>People share for the right returns </li></ul></ul><ul><ul><li>Set defaults to public, allow easy change to private </li></ul></ul><ul><li>Give user control </li></ul><ul><ul><ul><li>Over individual pieces & sets </li></ul></ul></ul><ul><ul><ul><li>Delete items from history </li></ul></ul></ul><ul><ul><ul><li>Reset /remove profile </li></ul></ul></ul>Privacy settings on Flickr
  36. 41. 4. Allow for levels of participation <ul><li>Everyone does not need to create! </li></ul><ul><ul><li>Implicit creation (creating by consuming) </li></ul></ul><ul><ul><li>Remixing—adding value to others’ content </li></ul></ul>Source: Bradley Horowitz’s weblog, Elatable, Feb. 17, 2006, “Creators, Synthesizers, and Consumers”
  37. 42. How to encourage participation? <ul><li>Insights from Social Psychology </li></ul><ul><ul><li>Highlight unique contribution </li></ul></ul><ul><ul><li>Allow for smaller local groups </li></ul></ul><ul><ul><li>Highlight benefit to self </li></ul></ul><ul><ul><li>Highlight benefit to group </li></ul></ul>Source: Using social psychology to motivate contributions to online communities, Ling et al. 2005
  38. 43. 5. Let people feel the presence of others <ul><li>What paths are well worn </li></ul><ul><li>User profiles / photos </li></ul><ul><li>Real-time updating </li></ul><ul><ul><li>Like a conversation </li></ul></ul><ul><ul><li>Sense that others are out there </li></ul></ul>What people are digging right now!
  39. 44. 6. And yet, moments of Independence… <ul><li>Choreography: when alone, when part of group </li></ul><ul><li>Prevent mobs </li></ul><ul><li>Don’t make it too easy to mimic others </li></ul><ul><ul><li>Incentives for originality & uniqueness </li></ul></ul>
  40. 45. 7. Most of all, allow for play
  41. 46. Things to try at home! <ul><li>Create an account on </li></ul><ul><li>Read Emergence, Wisdom of Crowds </li></ul><ul><li>Play a Multiplayer Online Game (WOW, Second Life) </li></ul><ul><li>Play with an API (try GoogleMaps API) </li></ul><ul><li>Try a mobile social application (DodgeBall) </li></ul><ul><li>Ask your friends what they find “fun” on the web </li></ul>
  42. 47. Questions? We are hiring!