Information Architecture - Part 2 - Spring 2013 - Class 3

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@utoronto.ca

Class #3
February 7, 2013

Copyright © 2013, The iSchool Institute Information Architecture: Part 2


Today’s Class
• Recap of Usability/Accessibility Review Process
• Social Architecture
• Web 2.0 Design

Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute 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?



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



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



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


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 User
From 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," Kelling
recalls, "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 eBird
database, 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 can
be 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/978
0596514433/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=5e10a15e005416e0f
1322f90b6c2999f
• Gluten-Free Living Mashup:
pipes.yahoo.com/pipes/pipe.info?_id=f2af0c99414e14cc3b
dd1206faa297bf
• 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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Destaque

Destaque (7)

Semelhante a Information Architecture - Part 2 - Spring 2013 - Class 3

Semelhante a Information Architecture - Part 2 - Spring 2013 - Class 3 (20)

Information Architecture - Part 2 - Spring 2013 - Class 3