Information Architecture Course Part 2 - Spring 2013 - Class 1

Information Architecture: Part 2
Class #1

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

Welcome & Introduction
Information Architecture: Part 2 Competitive Analysis
Class #1 Paper Prototypes

Instructor

keith.schengili-roberts@utoronto.ca

Class #1
January 24, 2013

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


Today’s Class

• Administration / Introduction
• Competitive Analysis (with in-class
exercise)
• Paper Prototypes (with in-class exercise)

Copyright © 2013, The iSchoolProcter
Katherine & Scott Institute Information Architecture: Part 2


Essential IA Books
• The following is a selection
of IA-related book titles that
have proven to be useful

Katherine & Scott Institute Information Architecture for Information Management


Essential IA Books (Cont.)
• Recommended Text #1: Information
Architecture for the World Wide Web,
3rd Edition by Louis Rosenfeld &
Peter Morville
(The “Polar Bear” book) O’Reilly &
Associates, 2007
Cover price: $51.99 (though street price
is lower, especially online)
Encapsulates much of what is taught in
this course; excellent reference work
2nd Edition available on Google Books,
most recent version available via
Toronto Reference library



• Managing Enterprise Content, by Ann
Rockley and Charles Cooper (2012)

The first edition of this book came out in
2003, and launched the idea of “Content
Strategy”, looking at how information
ought to be organized within Enterprise
environments. Second edition takes this in
the mobile era.

List price: $41.99, though available much
cheaper online
Watermarked eBook/PDF version ~$22.39



• Understanding Comics, by Scott
McCloud (1993)

“More than just a book about comics, this
gets to the heart of how we deal with
visual languages in general.”
Lou Rosenfeld,
President of the Argus Center for
Information Architecture

Terrific book for helping IAs understand
how people process visual information;
good for use in icon design, how people
read web pages, and other visual
elements


• The very latest book from Jakob Neilsen
and associates: Mobile Usability (2012)

List price: $36.99
Watermarked eBook/PDF version ~$22.39.

“How do we create a satisfactory user
experience when limited to a small device?
This new guide focuses on usability for
mobile devices, primarily smartphones and
touchphones, and covers such topics as
developing a mobile strategy, designing for
small screens, writing for mobile, usability
comparisons, and looking toward the
future.”


• Recommended book: Ambient Findability
by Peter Morville (2005)
Subtitle: What We Find Changes Who We
Become
“Morville discusses the Internet, GIS, and
other network technologies that are
coming together to make unlimited
findability possible. Morville looks back at
the history of wayfinding and human
evolution, suggesting that our fear of
being lost has driven us to create maps,
charts, and now, the mobile Internet.”
A key book that explores how humans seek
information within their environment


• Pervasive Information Architecture by
Andrea Resmini and Luca Rosati
(2012)
• Arguably a modern successor to the
“Polar Bear” book
• Looks at how IA has become a
necessity in designing “information
ecosystems” as people need better
wayfinding tools
• Also talks about how IA plays a role in
the creation of cross-channel
experiences, where the virtual
increases merges with the physical
world


Web 2.0 Architectures: What
Entrepreneurs and Information
Architects Need to Know, by
Duane Nickull (2009)

“Web 2.0 Patterning” section in
particular is useful



Web Style Guide, 3rd Edition, by
Patrick J. Lynch and Sarah
Horton

Available in print and online at:
webstyleguide.com



The “Other” Book
• You have been handed a “book” containing all of the
presentation material to be used in this course

• Main sections are divided up by class

• A version containing “Extra Reading Material” will be
available for download by the end of the course

• I will be changing/updating some items along the way to
reflect particular class interests that can’t be anticipated
prior to the “book’s” publication. Change is good. ;-)


More Admin Stuff
• Copies of the presentation deck for each class and
related materials will be made available at the following
Web site: www.infoarchcourse.com

• Go to “Course Files” page and download the zip files
containing the course materials



Who is this guy?
• Author of “Core CSS, 2nd Edition” (2003) and 3 previous
technical titles
• Started as a professional Webmaster in 1995, some early
examples: Delrina, Cyberjack, Symantec
• Consultant for Mekon, working on Information Architecture,
Content Management and related issues for clients world-
wide
• Consultant with Mekon, advising clients on CMS
deployments
• Formerly the Information Architect and then Manager,
Documentation & Localization at AMD
• Instructor at FIS since 1999; have taught/currently teach:
• “Information Architecture: Part 1”
• “Information Architecture for Information Management”
• “Enterprise Content Management”
• “PHP and MySQL Web Development”


What I Do
What I work on as an Information
Architect/Content Strategist/Consultant:
• Aid firms moving from unstructured to
structured content
• My specific expertise is in DITA XML
(industry blog: www.ditawriter.com)
• Advise clients on the best CMS for their
needs; advise their IAs and Writers on Best
Practices
• Work on the Return on Investment (ROI) that
can be expected
• Was keynote speaker at Content
Management Strategies 2012, and an invited
speaker to the Information Architecture
Colloquium in Lyon, France


Teaching Philosophy
• Plan is to introduce you to some new ideas, with the
intention of making you re-think how you currently
implement Information Architecture in practice

• Teach for real-world applicability

• People learn best by doing, and by sharing their own
experiences

End goal: provide some fundamentals for the work most of
you are likely already doing


Timetable for Classes

Class Timetable:

• Thursday January 24th, 6:00 - 9:00 p.m. (Class #1)
• Thursday January 31st, 6:00 - 9:00 p.m. (Class #2)
• Thursday February 7th, 6:00 - 9:00 p.m. (Class #3)
• Thursday February 14th, 6:00 - 9:00 p.m.
(Class #4 - Student Assignment #1 due)
• Thursday February 21st (No class, but Assignment #2
due)



IAs are Typically Wearers of Many “Hats”
• In my experience the IAs I teach are
those who may or may not have “IA” as
part of their official title, but do the
equivalent work
• Also, most IAs have never had any
formal training in the art and craft of IA,
which is where this course comes in
• I see my role as instructor in part to
teach you the fundamentals and give
you the tools necessary to better do the
work you are likely already doing



I.A. Deliverables for the Web
• Content Inventory (“Content Survey”, “Content Audit”)
• Competitive Analysis
• Usability/Accessibility analysis/recommendations
• Personas (“User Profile”)
• User Scenarios (“Use Case”, “Task Analysis”, “User Flow”)
• Sitemap (“Site Hierarchy Map”, “Site Diagram”, “Blueprint”)
• Wireframes (“Page Architecture”, “Page Schematic”)
• Style Guide
Some examples:
www.gdoss.com/web_info/information_architecture_deliverables.php



Rough Course Outline
Class 1 Class 3
• Competitive Analysis • Social Architecture
• Paper Prototypes • Web 2.0 Design

Class 2 Class 4
• How to Make a Wireframe • Creating a Web Style
Guide
• Web Accessibility
• Icons and Expression in
Design
• Localization 101



Goals
• By the end of this course you should have a good
theoretical basis in the basics of Information
Architecture
• Should have the tools necessary to methodically
tackle the redesign of any Web site/content
• Both the “Basic” and “Advanced” courses mix
instruction with plenty of hands-on examples
• Will have time to work on parts of assignments in
class



Grading
• Assignment #1: Creating a before/after wireframe
for a Web site of your choice (40%)
• Assignment #2: Usability assessment of a Web site
(40%)
• In-class participation: 20%



Introductions
Please introduce yourself to the class:
• Why are you interested in Information
Architecture?
• What do you hope to get out of this series
of classes



What I Am Looking for in the Assignments
• Bringing together concepts and techniques that
have been learned over the course
• Being able to identify theoretical approaches and
why they have been incorporated (or why they
haven’t)
• Demonstrating how your new approach will improve
upon the old (i.e. “Before and After” approach works
well)
• Having done the work – the time invested in your
project should be evident in your project


Assignment #1
• Create a “Before” and “After” wireframe of website
of your choosing.
• Should present: home page; second level and third
level page layouts
• Goal is to a) identify existing issues/problems, and
b) present a new version which will improve upon
the current design
• Can be done as a group assignment
• Format 8-10 written pages (including screenshots)
• When Due: February 14th 2013 (Final class)



Assignment #2
• Do a usability/accessibility assessment of a website of
your choosing
• This should not be an exhaustive critique of every single
page on the site; rather, focus on pervasive
issues/problems that you find
• Don't forget to include whatever is good from a
usability/accessibility standpoint!
• Format 8-10 written pages (including screenshots)
• When due: February 21st (Thursday after the final class)


Competitive Analysis
The importance of research:
"Borrowing good ideas, whether they come from
competitors, friends, enemies, or strangers, comes
naturally to all of us. It’s part of our competitive
advantage as human beings. If we were all left to
our own devices to invent the wheel, most of us
would still be walking to work."
Rosenfeld and Morville, 2nd ed., p.225



Competitive Web Site Analysis
• Provides insight/perspective as to what your
competitors are doing online
• Can determine what they are doing effectively/not
effectively
• Can help you determine what you are not doing
effectively
• This need not apply only to businesses (i.e. applies
to public / non-profit sector as well



What You Need to Know
• Understand the competition
• Build domain knowledge
• Identify best practices (specific to the domain)



What to Look For
• See trends within industry; provides understanding of what
industry users are used to seeing
• Start with known rivals
• Look for other sites with similar features, even if they are in a
completely different industry
• One possible good source: Webby Award Winners:
www.webbyawards.com/webbys
• Use analyst reports to document industry trends
• Ensure you are not copying a bad thing. Just because it is a
reputable company doesn’t mean it is a good website. Use
your own judgment.
• List findings in a spreadsheet


Specific Things to Seek Out
• Look-and-Feel / First impressions
• Search engine optimization/ranking
• Keyword list
• Is in-depth info available on firm/product?
• What is their focus/who is their audience?
• How does their focus differ from that of the target
Web site? Are there good ideas that could be
“borrowed”



Be Systematic
• Do an
inventory list
of supported
features
between
sites.
• What is their
labeling
scheme/taxo
nomy? (Is
there one?)


Heuristics that Can Be Applied
• Efficient Navigation • Effective Visual Design

• Organizational Clarity • Supporting Readability &
Scannability
• Clear Labeling
• Facilitating User Tasks
• Consistent Design

• Matching User
• Providing Help

Expectations

This is a sub-set derived from Nielsen’s usability heuristics
(www.useit.com/papers/heuristic/heuristic_list.html)
and principles of Interaction Design
(www.asktog.com/basics/firstPrinciples.html)



One Example: InnocentDrinks.co.uk
• "We tried to make everything say instantly that the
product is fun and good for you”
• Content: They offer a friendly impression of themselves
with a highly personalized backstory.
• Visuals: They employ a simple looking layout, friendly
fonts and rounded shapes along with bright, fresh
colours and imagery.
• Writing Style: Perhaps the most recognizable feature of
their brand. They do not capitalize their headers, and
offer users the chance to be ‘part of the family’.
This example taken from: http://www.nicolacampbell.com/content-management/extended-blog.pdf


• Here’s what they came up with:



• Compare that to this (www.getfreshjuice.co.uk/):



• Compare that to this (fruitapeel.co.uk):



Sample Competitive Analysis

CDNow: Available as a PDF from the infoarchcourse.com site at
www.infoarchcourse.com/files/competitive_analysis-CDWorld.com.pdf; derived from an article
at: www.boxesandarrows.com/view/competitive_analysis_understanding_the_market_context


In-Class “Competitive” Analysis
• Track down competitive websites (at least 2 - 4) within a single
domain
What to look for:
• What features (e.g. search (good), background music, (bad)) do
they have on their Web site that yours does not? Is it of real benefit
to a user?
• Do a basic usability analysis: try finding a product/piece of
information on the competitor’s Web site and compare how easy it
was to find (or not find)
• Is the design consistent? What’s your first impression? Are the
labels used clear? Can you navigate the site easily?
• Other factors to check: keywords used, relative readability rating,
Google ranking, etc.


Paper Prototypes



Wireframes
• Sometimes called “prototypes” or “mockups”
Why do it?
• Web site wireframes are easier and cheaper to correct
than a mockup of a released Web site.
• Low-fidelity wireframes are quick, cheap, and designed to
elicit user feedback as early as possible
• High-fidelity prototypes usually involve coding, but are
better for evaluating graphics and getting 'buy-in' that
usability problems found during testing are not due to the
'rough' quality of the prototype.


“Low-Level” Mockups/Paper Prototypes
• Can be done with paper/sticky-notes
• Sketch out areas of interest, such
as:
• Logo
• Search
• Navigation elements
• Area of user’s focus
• Footer elements



Paper Prototyping How To
• Create interface
elements/navigation links on sticky
notes and place them on a surface
to emulate a computer screen.

• Test the arrangements with a
sample user: ask them questions
and see how they react and what
options they choose

• Vary the sequence of dialogs on
the fly, which makes it easy to test
multiple versions of an
application's interaction design.



When to Use Paper Prototyping
Paper prototyping lets you conduct informal usability tests with real
users early in the project, before the design is cast in concrete
code. Here are six signs that your project could benefit from paper
prototyping.

• There are many different ideas about the design.
• You find yourself defending a particular design.
• There are parts of the design you're unsure about.
• You are changing the way that the users perform a task.
• The concepts or terminology are new to the users.
• You are feeling uncreative.

Derived from Carolyn Snyder's article at:
today.java.net/pub/a/today/2003/12/23/sixSigns.html



Paper Prototyping: What to Concentrate On
• Work on navigation labels and their placement
• Think about planned-for functions (i.e. search,
shopping cart mechanism, etc) and use a simple
label to promote them
• Where possible, substitute a text label where a
graphic might be expected to appear (i.e. write
“logo” on a sticky note instead of trying to redraw it)
• Work only on pieces you are most interested in; do
not concentrate on minutia (i.e. copyright info, etc.
at bottom of a page can be summarized)



Further Reading on the Topic
• There is an entire book
devoted to the subject…
• Available on Google Books
at:
http://books.google.ca/book
s?id=5OhE7dyGtmgC&print
sec=frontcover&dq=Paper+
Prototyping&ei=Z74LS-
GeD52wNICY3W0#v=onep
age&q=&f=false



In-Class Exercise (Part 1) – “Low Level” Usability Test
Can easily use this method to do a quick mock-up a Web site,
and test it
Your task:
• Your team creates a mockup of your target Web site (Home Page only)
• Come up with a description of 2nd level pages (i.e. link name and 1-
sentence description of its contents)
• Once done, get someone from another group and test the redesign on
them
• Ask that person questions on where they would click to find out specific
information
• Is the behaviour from the user what you expected? If not, change
label/placement/etc. until it makes sense to the user
• Photograph the final results, which can then be fed into the design for
the “after” wireframe for the target site

Information Architecture Course Part 2 - Spring 2013 - Class 1

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Information Architecture Course Part 2 - Spring 2013 - Class 1

Similar to Information Architecture Course Part 2 - Spring 2013 - Class 1 (20)

Information Architecture Course Part 2 - Spring 2013 - Class 1