information architecture course part 2 - spring 2013 - class 1

Information Architecture: Part 2Class #1

Information Architecture: Part 2Keith Schengili-Roberts

Copyright © 2013, The iSchool Institute

Instructor

Keith [email protected]

Class #1January 24, 2013

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


Welcome & IntroductionCompetitive AnalysisPaper Prototypes

Katherine & Scott Procter

Today’s Class

• Administration / Introduction• Competitive Analysis (with in-class

exercise)• Paper Prototypes (with in-class exercise)

Information Architecture: Part 2Keith Schengili-Roberts

Copyright © 2013, The iSchool Institute




Essential IA Books

Keith Schengili-RobertsCopyright © 2013, The iSchool Institute

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

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 onlineWatermarked 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.99Watermarked 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 Findabilityby 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





Essential IA Books (Cont.)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



Information Architecture: Part 2



Essential IA Books (Cont.)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?Keith Schengili-Roberts• 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 DoWhat 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• Competitive Analysis• Paper Prototypes

Class 2• How to Make a Wireframe• Web Accessibility

Class 3• Social Architecture• Web 2.0 Design

Class 4• Creating a Web Style

Guide• 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/taxonomy? (Is there one?)





Heuristics that Can Be Applied


• Efficient Navigation

• Organizational Clarity

• Clear Labeling

• Consistent Design

• Matching User Expectations

• Effective Visual Design

• Supporting Readability & Scannability

• Facilitating User Tasks

• Providing Help



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/books?id=5OhE7dyGtmgC&printsec=frontcover&dq=Paper+Prototyping&ei=Z74LS-GeD52wNICY3W0#v=onepage&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

Documents

polar bear

ischoolprocter

ischoolprocter

ischoolprocter

introduction

introduction

information

web site