information architecture - part 2 - spring 2013 - class 3

Information Architecture: Part 2Class #3

Information Architecture: Part 2Keith Schengili-Roberts

Copyright © 2013, The iSchool Institute

Instructor

Keith [email protected]

Class #3February 7, 2013

Keith Schengili-RobertsCopyright © 2013, The iSchool Institute Information Architecture: Part 2


Social ArchitectureWeb 2.0 Design

Katherine & Scott Procter

Today’s Class

Keith Schengili-RobertsCopyright © 2013, The iSchool Institute

• Recap of Usability/Accessibility Review Process

• Social Architecture

• Web 2.0 Design


Information Architecture: Part 2



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?




Katherine & Scott ProcterKeith Schengili-Roberts


• 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



What I am Looking for in the Wireframe Assignment




• 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



What I Am Looking for in a Usability/Accessibility Analysis



Social Architecture






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/





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.





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?





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?





IAs Role in Designing an Optimal Social Architectur e


• 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 InteractionArchitecture

• 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





Beginnings of Social Collaboration


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





Social Features on Amazon.com


From “How Social is Amazon?”: www.bokardo.com/archives/how-social-is-amazon/





Other Examples






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





Social Software Building Blocks






So Adding “Like” Buttons Everywhere is a Good Strategy, Right?





There has to be some benefit to the user for this to work.






There Must Be a Clear Benefit to the UserFrom Scientific American, February 2013: “Data on Wings” p.71-72

The project quickly hit a wall, however. Birders were entering around 50,000 records each month, too little to be useful, and that number would not budge. "After two and a half years," Kellingrecalls, "we recognized that we were failing. We needed somebody from the birding community to champion us." The lab hired two experienced birders to oversee the project (and later added a third).

The key, the team quickly realized, was ensuring that birders got something out the arrangement, too. The eBird scientists wanted data that could help with conservation. Yet that was not enough to motivate the bird-watchers, who had to spend extra time learning the database, changing their note-taking habits and uploading records. The new project leaders also pondered what tools bird-watchers would love.

Today eBird is almost like Facebook for birders, a social network they can use to track and broadcast their birding lives. The eBirddatabase, as well as an associated smartphone app, lets birders organize everything from their life lists--all the species they have ever seen--to the number of times they have seen at favorite spots. Just as important, they can see everyone else's lists--then try their damnedest to outdo them.


The Wisdom of Crowds


• Under the right conditions, groups can be smarter than individuals in their decisions and behaviour

• Conditions

• Diversity: one person's seemingly idiosyncratic classification may in fact be widespread

• Independence: getting another's perspective on things

• Decentralization: people able to draw upon their own specialized knowledge

• Aggregation: mechanisms exist for making a single user's actions into a collective decision

• “Design for the Wisdom of Crowds” - SXSWi 2009 on YouTube: www.youtube.com/watch?v=RX-7xwPPY8I





Architectures of Participation


Systems designed:

• For user contribution

• Around the culture and economics of openness

• For individuals, groups and crowds

Three ingredients for social IA:

• Capture User Actions

• Aggregate and Display

• Feedback





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





Spectrum of User Actions


• Moves from (bottom-left) consumers → synthesizers → creators (top-right)





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





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





Example: Ranking






Example: Clustering






Other Algorithms






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 Flickr's 'Interestingness!'”: wes2.wordpress.com/2006/05/12/deconstructing-flickrs-interestingness/





Problems with Positive Feedback Mechanisms






Systems Can Also Be Gamed


• Good list of known “Google Bombs” can be found at: en.wikipedia.org/wiki/Google_bomb





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





Social Media Elements: Link Button


Underlying assumption is that target on your site is “linkable” to a social media site, like Facebook, LinkedIn, Twitter, Flckr, etc

Enables further spread of information outside of your site; encourages clickthroughs to target page





Social Media Elements: “Like” Link


Allows 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 blogs

Encourages participation from user, provides feedback to poster, builds community and interest





Social Media Elements: Rankings and Ratings


Aggregates 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





Social Media Elements: Explicit Sharing+Community


Displays 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





Social Media Elements: Recommendations


Differs 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





Social Media Elements: Comment Mechanisms


Usually 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





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





Social Media Elements: Tag Cloud


Allows people to add their own metadata to individual items on a site; benefit to user must be clear

Enables 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





Social Media Elements: Collaborative Editing


Typical behaviour of any wiki, with Wikipedia being best known example; unlike comment mechanism it allows you to edit other people’s work

Can help create community; content becomes wholly decentralized; system canbe sabotaged/gamed





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





Social Media is a World -wide Phenomena


Keep 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





In-class Exercise: Social Architecting Your Target Web Site


By 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?





Web 2.0 Design






Web 1.0 vs. Web 2.0






A Web 2.0 Definition


From 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





What is Web 2.0?


Original article by Tim O'Reilly: 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)





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





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

• IA's job is to interpret which of these patterns can best be implemented in their 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-user's needs and how they are accomplished

• IA's job is still to figure out the best means to satisfy a user's goals, and AJAX is simply another set of tools





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





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





SOA (cont)


• An SOA-optimized structure, where shared user account tasks work across the apps





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





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/9780596514433/specific-patterns-web20.html





Asynchronous Particle Update Pattern


• Instead of updating an entire page's-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





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 map

Some examples:

• housingmaps.com

• gasbuddy.com

• webmashup.com

• mashable.com





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.





Sample Mashup Pages


• Medieval Blog, Library and Publication Collator: pipes.yahoo.com/pipes/pipe.info?_id=5e10a15e005416e0f1322f90b6c2999f

• Gluten-Free Living Mashup: pipes.yahoo.com/pipes/pipe.info?_id=f2af0c99414e14cc3bdd1206faa297bf

• Page Mashups:

• PageFlakes: pageflakes.com/

• netvibes: netvibes.com/





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?)





Rich User Experience Pattern


Ideally, 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 behaviour

Examples:

• 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)





Keep in Mind that “Preferences” Can Be Misinterpreted






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





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





Web 2.0 in Design


Fundamentally 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





Common Features of Web 2.0 Design


• Simple layout, with a single (or narrow) focus• Centered layout style• Design around content (“don't 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





Case Study #1 – I Hate Clowns (Before)






Case Study #1 – I Hate Clowns (After)






Case Study #2 – JBS Partners (Before)






Case Study #2 – JBS Partners (After)






Web 2.0 Layout as Cliché?


• From web20generator.com (no longer exists)



→



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?




information architecture - part 2 - spring 2013 - class 3

Documents

social architecture

web sites

social informationarchitecture

social architectureclass

optimal social arc

structure fora web site

user input

astructured design