• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Information Architecture - Part 2 - Spring 2013 - Class 3
 

Information Architecture - Part 2 - Spring 2013 - Class 3

on

  • 1,631 views

The updated slidedeck for Class 3 of my Information Architecture class at the Univeristy of Toronto.

The updated slidedeck for Class 3 of my Information Architecture class at the Univeristy of Toronto.

Statistics

Views

Total Views
1,631
Views on SlideShare
1,625
Embed Views
6

Actions

Likes
1
Downloads
7
Comments
0

2 Embeds 6

http://www.linkedin.com 5
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Information Architecture - Part 2 - Spring 2013 - Class 3 Information Architecture - Part 2 - Spring 2013 - Class 3 Presentation Transcript

    • Information Architecture: Part 2 Class #3 Keith Schengili-Roberts Copyright © 2013, The iSchool Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Instructor Keith Schengili-Roberts keith.schengili-roberts@utoronto.ca Class #3 February 7, 2013 Keith Schengili-Roberts Copyright © 2013, The iSchool Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Today’s Class• Recap of Usability/Accessibility Review Process• Social Architecture• Web 2.0 Design Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design How is Everyone Doing with the Assignments?• Do you have a target site(s) selected for the assignment?• Have you decided upon the tool to use for the wireframe assignment?• Any questions in general? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design What I am Looking for in the Wireframe Assignment• One of the goals of any IA is to argue for effective change on behalf of the user; frame your report as an argument for positive change• Outline what you seek to achieve in the redesign• Provide some background on the site, stating its purpose, goals general audience, etc.• Highlight aspects of the Before and After sites – using numbers or letters – followed with descriptions as to why; use same number/letter in Before/After• An end-summary, conclusion wraps up your argument• In best examples, it is immediately apparent that the “After” redesign is better than the “Before”• See the examples at: www.infoarchcourse.com/files.php Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design What I Am Looking for in a Usability/Accessibility Analysis• State what is good/bad on the target site and say why it is good/bad from an IA perspective• Be systematic; using the WCAG guidelines and/or any heuristic approach is a good start• If applicable, tie in relevant experiences from your personas/scenarios• Again, see the examples at: www.infoarchcourse.com/files.php Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Architecture Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Architecture• Where users action create some or all of the structure for a Web site• Uses the “wisdom of crowds” to solve IA problems through encouraging user interaction• Highly recommended overview (from which following section is partially derived): “Social Information Architecture” as its basis: www.slideshare.net/gsmith/social-information-architecture- workshop/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Implications for IAs• In this environment the aim is no longer to create a structured design for a Web site(s), but instead, how to best facilitate a “shared design of semi-structured information environments” • Includes user-directed classification schemes like tagging/folksonomies • Need to anticipate the social uses of information and design for share-ability • Create architectures aimed at encouraging user-created content • Design feedback loops that change their output in response to user input. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Implications for IAs (cont.)Consider the following situation:• You have a Kenmore series 80 clothes-washing machine which has stopped spinning/draining after the wash cycle. It is after normal business hours, so a call to a repair-person is out. What do you do? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Implications for IAs (cont.)• Check the manual? a) it is next to impossible to find online; b) if you find it, you discover that it does not cover this situation• Type “Kenmore 80 not draining” in Google, and you find a handy 3 min video on YouTube that not only talks about the problem, but steps you through how to fix it• Arguably a problem for Kenmore, and for IAs in general: do you “capture” outside sources of information or not? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design IAs Role in Designing an Optimal Social Architecture• Challenge is still to focus on providing a structure for users • Facilitate user interactions aimed at end-user’s goals• Think not just about Information Architecture, but Interaction Architecture• Facilitate useful, directed interaction where there is clear benefit for the user to do so • Some ways of doing this: add a rating, write a description, let user build an online reputation, make info sharable, “like”-able, etc. • Recognize that this is open-ended; be ready to cede a level of ownership to the user • As we have seen, Findability (and relevancy) is also a factor Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Beginnings of Social CollaborationAmazon was one of the first, adding features like:• Collaborative filtering – where your searches/purchases are compared to others which generates personalized recommendations• Listmania – where users create their own lists of books, CDs, DVDs, etc. Essentially user-to-user recommendations. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Features on Amazon.comFrom “How Social is Amazon?”: www.bokardo.com/archives/how -social-is-amazon/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Other Examples Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Why is Social IA Important?• Growth in online collaboration• Emergence of web as social infrastructure• Increasing interest in using social media for business purposes• Pressure to move beyond hand-crafted IA Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Software Building Blocks Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design So Adding “Like” Buttons Everywhere is a Good Strategy, Right? There has to be some benefit to the user for this to work. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design There Must Be a Clear Benefit to the UserFrom Scientific American, February 2013: “Data on Wings” p.71-72The project quickly hit a wall, however. Birders were enteringaround 50,000 records each month, too little to be useful, and thatnumber would not budge. "After two and a half years," Kellingrecalls, "we recognized that we were failing. We neededsomebody from the birding community to champion us." The labhired two experienced birders to oversee the project (and lateradded a third).The key, the team quickly realized, was ensuring that birders gotsomething out the arrangement, too. The eBird scientists wanteddata that could help with conservation. Yet that was not enough tomotivate the bird-watchers, who had to spend extra time learningthe database, changing their note-taking habits and uploadingrecords. The new project leaders also pondered what tools bird-watchers would love.Today eBird is almost like Facebook for birders, a social networkthey can use to track and broadcast their birding lives. The eBirddatabase, as well as an associated smartphone app, lets birdersorganize everything from their life lists--all the species they haveever seen--to the number of times they have seen at favoritespots. Just as important, they can see everyone elses lists--thentry their damnedest to outdo them. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design The Wisdom of Crowds• Under the right conditions, groups can be smarter than individuals in their decisions and behaviour• Conditions • Diversity: one persons seemingly idiosyncratic classification may in fact be widespread • Independence: getting anothers perspective on things • Decentralization: people able to draw upon their own specialized knowledge • Aggregation: mechanisms exist for making a single users actions into a collective decision • “Design for the Wisdom of Crowds” - SXSWi 2009 on YouTube: www.youtube.com/watch?v=RX-7xwPPY8I Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Architectures of ParticipationSystems designed:• For user contribution• Around the culture and economics of openness• For individuals, groups and crowdsThree ingredients for social IA:• Capture User Actions• Aggregate and Display• Feedback Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design User Actions• The things people do online that we can track • Where they have come from prior to landing on our site • Where they go within our site• Building blocks • Popularity • Community • Reputation• Ignore higher goals and motivations Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Spectrum of User Actions• Moves from (bottom-left) consumers → synthesizers → creators (top-right) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Metcalfe’s Law vs. Dunbar’s Number• Metcalfe’s Law: the value of a telecom network is proportional to the square of the number of users of the system; basically, the more users, the more valuable the network• Dunbar’s Number: British anthropologist who found that human personal transactive memory is limited to about 150 people; anything more than that and people cannot remember the specifics of a person outside of that “group” • Has implications for the usefulness of certain online social groupings • Knowing this, would you now be more or less inclined to have a connection with someone who already has 151 “friends”?Good article on this: searchengineland.com/human-hardware-dunbars-number-13695 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Aggregation and Display• Bringing together user actions in a relevant way• Displaying them• Setting rules on how to input and display info• Aggregation Examples: • Listing: allow people to add own list description • Ranking: count # of hits, order accordingly • Clustering: frequency of folksonomic tags that occur together • Collaborative filtering: “people who bought this also bought...” • Other algorithms Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Example: Ranking Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Example: Clustering Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Other Algorithms Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design About “Interestingness”“There are lots of things that make a photo interesting (or not) in the Flickr. Where the clickthroughs are coming from; who comments on it and when; who marks it as a favorite; its tags and many more things which are constantly changing. Interestingness changes over time, as more and more fantastic photos and stories are added to Flickr.”• Insightful article examining the algorithm: “Deconstructing Flickrs Interestingness!”: wes2.wordpress.com/2006/05/12/deconstructing-flickrs- interestingness/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Problems with Positive Feedback Mechanisms Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Systems Can Also Be Gamed• Good list of known “Google Bombs” can be found at: en.wikipedia.org/wiki/Google_bomb Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Can Backfire• Both for individual users, and for companies (examples from failbook.com and slaw.ca/2010/11/10/responding-to- negative-social-media/)• Common behaviours that lead to problems: over-sharing (frequency 3+ times a day), spamming, using non- personal site to talk about weather, politics, religion, etc).• Beware “Streisand Effect”, see: en.wikipedia.org/wiki/Streisand_effect Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: Link ButtonUnderlying assumption is that target on your site is “linkable” to a social media site, like Facebook, LinkedIn, Twitter, Flckr, etcEnables further spread of information outside of your site; encourages clickthroughs to target page Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: “Like” LinkAllows user to express an opinion on what they see/read/view, not just Facebook, but also Tumblr, LinkedIn, and available as a component on WordPress blogsEncourages participation from user, provides feedback to poster, builds community and interest Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: Rankings and RatingsAggregates an opinion (positive and/or negative from a large number of users)Highlights top-viewed pieces, or provides information on perceived quality at a glance; encourages exploration, but particularly prone to negative feedback problems Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: Explicit Sharing+CommunityDisplays which pages/articles have been shared by people you know (or not) on a Social Media Website; similar to “like” mechanism but ported to non- Social Media website (example is from arstechnica.com/)Assumption is that your friends may share similar views/interests, driving more traffic to targeted pieces Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: RecommendationsDiffers from Ranking/Rating as this mechanism is based on previous behaviour through site; user is shown links to other things that may be of interest to view/read/buy (examples from YouTube, Chapters); can be a very effective sales tool Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: Comment MechanismsUsually not just a comment mechanism, but provides other levels of feedback on previous comments, may be rate-able, like-able, etc. (example from avclub.com)Creates community interest, provides free content that other users may seek on your site Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Developments with “Like”-ing• In what may be a significant development in the “browser search wars” Microsoft’s Bing announced that users can see who “likes” their results Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: Tag CloudAllows people to add their own metadata to individual items on a site; benefit to user must be clearEnables others to find new and novel ways of finding information; may need to monitor/curb use as it can become too idiosyncratic and/or gamed Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: Collaborative EditingTypical behaviour of any wiki, with Wikipedia being best known example; unlike comment mechanism it allows you to edit other people’s workCan help create community; content becomes wholly decentralized; system can be sabotaged/gamed Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media Elements: Others…Bookmarking sites, Global sign-in (Yahoo, Google, etc), Personalized Mashups, Online PDF creation/publishing, etc, etc, etc…Don’t go overboard! Use personas to usefully narrow down what options are likely to be wanted Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Social Media is a World-wide PhenomenaKeep in mind that if you are marketing to a world-wide audience, there are other locale-specific social networking sites to keep in mind:• In Brazil, Orkut is the top social networking site• Bebo has long been #2 social networking site in the U.K.• Cyworld is most popular social networking site in South Korea Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design In-class Exercise: Social Architecting Your Target Web SiteBy now you have a target Web site you have chosen for Assignment #1 (and possibly a second one for Assignment #2); given what you have just learned, can any social architectural elements be added to them? (Put another way: “Is Web 2.0 for you?”) • If so, what would you do (and why)? • If not, why do you think it would not apply? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Web 2.0 Design Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Web 1.0 vs. Web 2.0 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design A Web 2.0 DefinitionFrom Wikipedia: “The term "Web 2.0" (2004-present) is commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups and folksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them.”en.wikipedia.org/wiki/Web_2.0 Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design What is Web 2.0?Original article by Tim OReilly: oreilly.com/web2/archive/what-is-web-20.html from late 2005• Web as platform: user controls data; services rather than packaged software• Harnessing collective intelligence: from crowdsourcing info to enabling user to add own metadata; users add value• Users can enhance the value of data: value of data dependent on what users add to it• Perpetual beta: “Release early and often” an open source idea; treat user community as co-developers• Loosely coupled programming models: allow for syndication, and for remixing• Services not limited to a single device: iPod/iTunes one example• Rich user experiences: immersive environments, also systems that bring to life emergent properties in the data source(s) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design S.L.A.T.E.S.• An acronym defining the key components used in Web (and Enterprise) 2.0 design:• Search: scope is not restricted to a single data source• Links: Provide deep-level connections between datasets• Authorship: Provide a means to foster identity/community• Tags: Ability for users to add their own metadata for organizational purposes• Extensions: anything that makes the Web become more of an application platform than just a document server• Signalling: Alerting the user to new content Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Recap on Patterning• Patterning takes a look at the individual elements of GUI design and “flows” of information; produces a better understanding of why given elements on a page work, and how to best use them in novel situations• Worth noting that all of the Web 2.0 patterns to follow are based in turn on more granular patterns• IAs job is to interpret which of these patterns can best be implemented in their design Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design AJAX?• Note that many of these patterns use AJAX (Asynchronous JAvaScript and XML) or similar scripting languages as a base upon which to build• Just because a Web site uses AJAX does not mean that it is “Web 2.0”; is ultimately about serving end- users needs and how they are accomplished• IAs job is still to figure out the best means to satisfy a users goals, and AJAX is simply another set of tools Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Service Oriented Architecture (SOA)• In essence, looks at ways to ensure that the end- user receives the service they need, and re- purposes that service by unifying processes• Similar tasks or processes across multiple, siloed applications are merged in such a way that info that is common across multiple apps are optimized, and reused Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design SOA (cont)• A non-SOA, non-optimized structure, where user is expected to add the same info across multiple applications:• Examples derived from: www.adobe.com/enterprise/pdfs/Services_Oriented_Architecture_from_Adobe.pdf Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design SOA (cont)• An SOA-optimized structure, where shared user account tasks work across the apps Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Software as a Service (SaaS)• Is dependent on SOA• End-user experience is refined with each interaction with the user• One pragmatic definition: "software that gets better the more that people use it“• Classic example, an adaptive spam filter where rule input from many people improve the overall system:• Source: www.adobe.com/devnet/articles/saas_05.html Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Participation-Collaboration Pattern• Implement a participation- collaboration pattern through which users can contribute knowledge, facts, code or other relevant material• Wikipedia, wikis in general and open source computing projects use a version of this model• Illustration from: oreilly.com/web2/excerpts/978 0596514433/specific-patterns- web20.html Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Asynchronous Particle Update Pattern• Instead of updating an entire pages-worth of data, feed smaller updates to an applet on the page• Ultimately ought to save bytes served/needed by user and be more timely• Illustration from: oreilly.com/web2/excerpts/ 9780596514433/specific- patterns-web20.html Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Mashups• Also dependent on SOA; throws together data from various sources in a novel manner i.e. take restaurant reviews from multiple sites and allow user to browse them on an interactive mapSome examples:• housingmaps.com• gasbuddy.com• webmashup.com• mashable.com Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Mashup Creators• Yahoo Pipes: pipes.yahoo.com/pipes/• IBM Mashup Center: www- 01.ibm.com/software/info/ mashup-center/ (aimed at enterprise use)• Most mashups are now done using APIs provided by Google, Facebook, Twitter, YouTube, etc. Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Sample Mashup Pages• Medieval Blog, Library and Publication Collator: pipes.yahoo.com/pipes/pipe.info?_id=5e10a15e005416e0f 1322f90b6c2999f• Gluten-Free Living Mashup: pipes.yahoo.com/pipes/pipe.info?_id=f2af0c99414e14cc3b dd1206faa297bf• Page Mashups: • PageFlakes: pageflakes.com/ • netvibes: netvibes.com/ Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Mashup Caveats• Keep in mind that your application (or even entire business model) could be dependent on another source being stable over time• Possible legal ramifications: can I use for- profit information derived from another source (such as pictures from Flckr?) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Rich User Experience PatternIdeally, you want the system to emulate the types of interactions you might get from working with an expert who can make recommendations that are inferred from your behaviourExamples: • Travel agent app that recognizes when you ask for warm vacation spots in the depth of Canadian winter that a trip to Alaska is not what you are looking for • Form-based system that recognizes previous data and pre-fills equivalent portions on other forms for you (www.ppt.gc.ca/cdn/form.aspx?lang=eng&region=Canada) • Application that customizes the look-and-feel of your vehicle based on your preferences (www.harley- davidson.com/pr/gm/customizer/launchCustomizer.asp) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Keep in Mind that “Preferences” Can Be Misinterpreted Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Synchronized Web Pattern• “Small things, loosely joined” (David Weinberger)• Relates to systems that can tolerate and adapt when the user is offline; apps can “synch” back up when the user manages to reconnect• Implies “replication” along with “synchronization”• Obvious applications include “Office-like” applications that derive from the Web• An example: Google Reader keeps tabs on your favourite blog posts Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Collaborative Tagging Pattern• Folksonomies are one example• One sub-set includes the “Declarative Living Pattern”, where individuals are encouraged to declare their interest in a topic/subject/target• Flip-side of this is “Tag Gardening” where these declarations are aggregated, and more functional taxonomies can then be derived and implemented based on the results Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Web 2.0 in DesignFundamentally two things seem to be at play:• Narrower focus, often to niche audiences (or to what started out as niche audiences) • This often leads to further simplified UI/navigation• Provides dynamic/interactively-defined information (often from multiple sources) • Note that it is possible to bring Web 2.0 elements to what is fundamentally a “Web 1.0” Web site Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Common Features of Web 2.0 Design• Simple layout, with a single (or narrow) focus• Centered layout style• Design around content (“dont waste time designing the box to hold the content”)• 3D effects, used sparingly• Soft, neutral background colours contrasted with strong colours, also used sparingly• Simplified icons, used sparingly• Plenty of whitespace• Larger-than-usual Big text(List adapted from webdesignfromscratch.com/web-design/current-style.php)• Note that none of this implies any of the background AJAX-based framework of Web 2.0; and when done right, is in keeping with best user-centric practices Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Case Study #1 – I Hate Clowns (Before) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Case Study #1 – I Hate Clowns (After) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Case Study #2 – JBS Partners (Before) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Case Study #2 – JBS Partners (After) Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design Web 2.0 Layout as Cliché?• From web20generator.com (no longer exists) → Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2
    • Information Architecture: Part 2 Social Architecture Class #3 Web 2.0 Design In-class Exercise: Adding Web 2.0 Elements to Your Target Web Site• Given what you have just learned, can you see ways to add Web 2.0 elements to your target Web site?• Put another way: “Is Web 2.0 for you?” • If so, what would you do (and why)? • If not, why do you think it would not apply? Keith Schengili-Roberts Copyright © 2013, The iSchoolProcter Katherine & Scott Institute Information Architecture: Part 2