Here come my notes from Adaptive Path's UX Week '05.

Day One

Web 2.0 Intro

Web 2.0 is about design.

• Web 1.0 realestate
• Web 2.0 housingmaps

Compare www.realestate.com to www.housingmaps.com. Realestate.com attempts to force together a bunch of functionality in the hopes that one thing will appeal to the user. Housingmaps.com focusses on one thing: providing geographic access to CraigsList.

Housingmaps has:
* small scope
* limited functionality
* user centered design

It is an interesting tool to meet people's needs.

The data is already available through open APIs.

Encyclopedias online
First there was Brittanica and then Encarata was born. Now there is WikiPedia. This application harnesses the wisdom of the masses, it is designed for people.

• Web 2.0 is about creating containers that users can fill with what matters to them.
• Web 2.0 respects people (it is not condescending)

Wisdom of the crowds
The New York Times serves as the primary record of note for the news media of the united states.

"Old Media" and "new media" are currently in a state of uncomfortable collaboration. Old media sees the end coming. If you go to www.technorati.com you see what people are talking about and thus what people care about.

Web 2.0 is an attitude not a set of design conventions. It is about creating lightweight containers that allow data to be remixed by real people.

Authority follows trust
Wikis and weblogs will provide the new means of knowledge transport within enterprises, particularly decentralized organizations.

Look at Ticketmaster. How do I find what I am looking for? Yeah they have a solid business model but their web site doesn't help me find what I am looking for. Upcoming rocks because it does what I want it to do.

> From an architecture of consumption to an architecture of participation.

- Tim O'Reilly

Think about how "folksonomies" can be blended with "taxonomies" for a really interesting experience.

> Scalability of intelligence

-Foo Camper

Feasibility is the question of how content will be created. With Web 2.0 the content, tagging, etc. can happen through a community or through API's and data. (think about 43things)

• Web 1.0 doubleclick
• Web 2.0 adsense

Doubleclick has a high barrier to entry, it involves an enormously complicated process of paperwork. (Purchasers must jump through hoops they might not understand, this is pointless and causes them to bail.)

Instead small shops buy adwords because there is a low barrier to entry. It is genuinely easy for the advertiser and the publisher.

• Web 1.0 yahoo's home page
• Web 2.0 google's home page

For google, anything not mandatory is forbidden.

Small pieces loosely joined

Google is a great example of this. They have mail, they have news, they have images, they have blogs. The difference with Yahoo is that they are connected differently. Yahoo is about cross promotion. Google is about letting you find things when you want them not all the time. (You have to look and this is ok because users are not idiots.) Search is search and maps are maps.

• Web 1.0 mapquest
• Web 2.0 google maps

Rich Internet Apps is a misnomer because these techniques simplify the experience. This is about feature simplicity.

Oddpost, which will become yahoo mail, emulated outlook on the web (awesome, ask Leonard about this).

Web 2.0 marks the beginning of really great information design.

We must learn from the web 2.0 apps and share this learning as we move forward.

• web 1.0 hotmail
• web 2.0 gmail

Gmail was one of the first to use AJAX. Big apps with no submit.

> Ajax allows a degree of responsiveness similar to desktop applications.

- Jesse James Garret

• Web 1.0 yahoo personals
• Web 2.0 www.consumating.com

The connections happen spontaneously. It is authentic human interaction.

Friendster is an artificial construct (and it blows). How rad is flickr? (very)

> relinquish control

- Peter Merholz

Presume an unknowable future

NO SUBMIT BUTTONS

• web 1.0 Amazon, ebay
• web 2.0 del.icio.us

User controls data, not just contributes to it.

[see slide]

> where data connects with data through the UI

- k. fake

Where does a wireframe fit in to all of this? Do we now storyboard? (I will)

Enter Interaction Design.

> As designers we envision things the way that ought to be rather than the way that they are.

Questions
How do we measure? User accomplishments instead of what the server is doing and this must, like the application itself, be case by case.

How do you balance the need to relinquish control with the legal concerns you might have as a company? Any company who in 1998 was considering a discussion board has had the same conversation. The positive brand image should come from a series of positive experiences. Where do you draw the line? Where does it directly meet the fundamental value goals of the organization? The example of discussion boards is interesting because in the 90's everyone wanted one but didn't know why. (we have to be smart and not stupid...) Tagging does not have risks. Making tags public has risks. (Even siloing user customization is better than none at all. If an item is tagged and nobody is there to read it, who cares?)

Does this have methodological implications? How does it change the process? Wireframes for stateless pages. Adaptive Path is experimenting. The way that validation is tested, users are researched, etc. must be redefined.

Intro To Ajax

The classic web application model requires starts and stops. Users must wait for feedback.

> It's as if Mr. Garrett there just explained what roller skates are.

- Bruce Sterling

Ajax technologies
* XHTML / CSS
** standards based presentation
** allows dynamic manipulation of element styles
* DOM
** dynamic display and interaction
** allows page elements to be addressed independently.
* XML / XSLT
** data interchange and manipulation
** interoperability with diverse systems
* XMLHttp Request
** asynchronous data retrieval
** decouples user interaction with server processing

This all happens through javascript
* It's not just for rollovers anymore
* Stable mature browser implementations that developers can rely on.
* Shaking off the "toy language" stigma

We can use it to build real applications.

If all of this has been around for a while, why now?

• The fog of war clears (from the browser battles)
  • The bursting bubble made us think, really think, about what the internet can do and what it is for
• The rise of scripting
  • Perl, python, ruby, etc.
• It takes time to get smart
  • You can't see things until you have experience.

We didn't know what the web could do and now we have seen bold action from google reinvent sectors that were presumed solved. Mail, maps, etc. Google does this without compromise, their tools are largely cross-platform, cross-browser, and don't require plugins.

Yahoo looked seriously at itself and tried to figure where google could take away market share. They didn't think of maps and google sideswiped them.

Google has done this by providing tools to almost everyone without regard to the prevalence of an OS or a platform. (They depend only on modern browsers and thus give themselves the flexibility to keep growing into new spaces with very little lock-in.)

Ajax interaction design
* Incrementality
* everything is alive
* implicit user actions
* prefetching
* action at a distance
* multivariate-ness

Before typography worked itself out on the web people used fonts in crazy ways. So too will people use these new tools but we can learn from these mistakes.

Incrementality
Push data in both directions early and often. If the page doesn't have to reload you can redefine the conceptual structure of a "page." Triggers can now depend on what makes sense to the user not what is required on the server side.

Everything is alive
We have developed conventions about what's clickable or dynamic. Through this out the window. Everything can be clickable and changeable (like an application)

Static text can become clickable and changeable. (think the smart rollovers in Backpack or the personal wiki. front-end editing of everything)

Implicit user actions
Not everything needs a click anymore

Hover, focus, blur, etc, anything can trigger an action. Clicking in and out of a field can change the content. When a user hovers in and out of an area the content can adjust itself in a meaningful way.

Pre-fetching
When a mouse gets close preload or if a function isn't often used don't load until absolutely necesary.

Action at a distance
A change in one place can trigger changes elsewhere (see the favorite story function on the International Herald Tribune site, I love that...)

Multi-variateness
multiple inputs generate multiple outputs

Two revolutions in one
It's a paradigm shift for designers as well as developers. Ajax makes design problems technology problems and vice versa. Demands closer collaboration, both within teams and across communities.

Challenges
What about the back button? What about degradation? What about security? etc.

Regardless, experimentation continues.

Frameworks
Ruby on rails is the most notorious. PHP, java, ASP, etc.

MS is developing an Ajax framework for .NET that they are calling Atlas.

Here are some examples
'Cause it's exciting and they don't have to be enormous. They can be features.

• Gmail of course
• Google Maps
• Login demo
• Periodic table
• del.icio.us director
• protopage
• Amazon diamond search
• Rico

Questions
Debugging? right now it is mostly trouble and error but there is a huge market opportunity for development environments.

What is the element of this that is compelling? Being able to offload some of the heavy lifting from the server and give it to the client. With more users in broadband environments you can push bigger javascript files to users. Now that fewer users are using slow connections we have the opportunity to do more. (I imagine this benefit is amplified in controlled environments, ie intranets)

Parallel to desktop app design? they are different. the paradigm has developed out of web design. This is not replicating the desktop in the browser, this is taking the conventions developed in web design and extending and expanding them.

Examples of cautionary tales with the back button? There are people who have claimed a solution to the back button problem. So far it all seems theoretical. The back has become synonymous with undo, this is inappropriate but reality.

Cross session state establishment? The way google maps addresses this is by allowing you to generate permalinks to a set state. This allows you to use old thinking (link copying) with a new ajax app. Every view in google maps has a corresponding "page" link. A combination of smart URLS (queries) and cookies can deal with this.

Will browsers get smarter about this? That is the hope. They have to do this because of demand from web app developers. (Particularly if MS is allowing developers to use their tools to make this stuff)

Where does flash fit into this, competition or collaboration? Flash has good development tools but you have plugin pitfalls. There are also fewer flash developers. Flash excels at data visualization and direct manipulation. Macromedia has not succeeded in getting serious flash apps developed. Flash should be used over ajax when dynamic data visualization is required.

However, Ajax and flash can talk to each-other. Flash can call Ajax, Ajax can call flash, Flash can also have no UI.

flickr

How and why we (and it) work(s) the it (and we) does (do)

Hi Eric Costello, you're way cool :)

Overview
* a short history of flickr
* how the team operates
* flickr features
* flickr's future

A short history
Game Never Ending - a web-based MMOG with no stated goal. It was an excuse for people to not seem like geeks chatting (but they were). There were going to be local governments, with structures determined by the people beholden to that "authority."

As it was being built, the flash application got ahead of the server development. A PHP developer made an API that allowed the app to get around the server with structured XML. These interactions were already XML so it made sense to do the same with a normal web server.

GNE used normal web conventions in flash. You could have objects and be in a place. Everything could be dragged somewhere to do things.

They ran out of money.

So what about photos instead of objects. Let people drag photos around and do things with them.

The game world was replaced with an identical chat world all about photos. Not a lot of people stuck around but there was a great deal of excitement about the idea of sharing photos.

Instead of just the chat world what about a hosted photo tool?

Now there is asynchronous chatting (comments) but the social aspect is the same.

How the flickr team operates
There are now twelve people, here is the core that defines what it looks like:
* Stewart Butterfield, UI designer (genius)
* George Oates, UI designer (genius)
* Cal Henderson, PHP developer (genius)
* Eric Costello, UI engineer (along for the ride)

How?
* within spheres: database structure, php smarty templates, and then the look can be implimented. One problem with Ajax is that it only work in modern browsers with JS on. Flickr first builds page to page functionality and then Ajax. The API allows for communication with the database via XML using PHP. Through javascript the API can be manipulated easily and thus the pageview can be manipulated easily.
* Constant collaboration despite geographic distribution. IM and e-mail are essential. Feedback is live. Instead of specing things out they just start designing and implementing. Get the core done and then iterate.
* Do things with incessant iterations. Deploy code regularly to the site. This can be frustrating for users, some people are upset when something they are used to changes. Most people, however, love being able to give feedback and then see that turn into changes. The ill will must still be managed properly.

What else?
* Eat your own dog food, use your tool
* Still listen to users, it is key because they know what is really broken. This is a major part of the job. Users ask intelligent questions that demand intelligent answers.
* Ignore users when it becomes cacophonous. learn to sift. people are silent if they are happy so you must learn that you are hearing particular wants and needs from a minority but you need to know what the majority thinks.

How does flickr work? (use it if you don't know, it rocks!)

If you don't know...
* inline editing
* organizing
* photo notes
* badges
* api

flickr's future
* Improved search, thanks to yahoo.
* improved comprehensibility.
* making the organizr obsolete. better enabling micro-communities
* offline printing

Questions
How do you teach non-savvy users to use this savvy product? this is a real problem. most early flickr users were very savvy users but they brought parents and friends with them who were less likely to be savvy. flickr is something to be discovered and that is part of its charm. as you fool around you get constant feedback and they let you do cool things. regardless, tutorials are being developed because this product often breaks convention so you have to get a user to do something once, ajax requires users to do one-time things and then they get it.

What about offline photo management? flickr is looking into this but doubts it would remove the online point. however, the offline and online should sync to make uploading a less onerous task.

[incomprehensible] linking to Yahoo! let's flickr do lot's of cool stuff. buying prints for example will be much easier to implement when the accounts are linked.

[another incomprehensible] there has been an uptick in users since the merger and people love paying for pro accounts because they are cool. the badge is a sign of status in the "game."

privacy rights? the API checks the relationship before completing a page load. you can see anything if you can guess a link but this is security through obscurity.

offensive material? hardcore porn is deleted but questionable material is marked to not be returned in search results. Each new account is reviewed before being added to the search result. Although yahoo will provide better tools for this there will always be human interaction.

flash v. dhtml? is there a long-term goal to move away from plugin architecture? the commitment is to making things as nice as possible in dhtml.

Giving Up Control: Amateurization and its Implications

October 12, 2004: Veen smells smoke. Gets coffee. Checks Internet.

SF Gate: nothing
NBC 11: nothing
Metafilter: talk from people looking for answers
blogs: discussion of smoke problem
sfist: explanation of the problem, a big controlled fire 60 miles away

Amateurization
Everyone can now book their own travel.

> a landmark moment for the blogosphere and the media

- dean of annenberg school of journalism about last year's "memogate" regarding the CBS story

> [Blogs] played a more important and more active role in the story by immediately questioning the validity of the memos.

- Nancy Franklin, The New Yorker

Web server market share, Apache v. Microsoft: Apache dominates hugely and thus makes new things possible. All new startups use Apache because the better option is also the free option.

Blogs themselves are also free. Instead of wrangling with the tool you wrangle with content and readers. GarageBand is cheap and powerful.

Implications
Wikipedia is the beginning. Craigslist is exploding (Harrisburg, PA, people. This thing is huge!) This pushes the old market leader, the newspaper in this case, to develop new value and new markets. Old industries will die but some will reform themselves.

The MP3Blogs Aggregator was created because a guy was reading music blogs and decided to aggregate the links to the mp3 files that bands were posting. Where's the record company in this? Where is the marketing and the distribution? Check out Pandora

Upcoming.org started as a site with no content. It was a shell that allowed people to find things that would only be there if people put it in. (I am username samfelder so add me as a friend)

Social networking in the form of six degrees, friendster, and orkut was a fad. It was no cooler than signing a yearbook. flickr and upcoming are social networking with a point, they are real.

Mappr takes flickr tags and puts them on a cool map.

del.icio.us let's me see what I care about and let's me discover things that I will also care about based on the people I respect and care about.

RSS let's us keep track of and thus consume both more and more interesting information.

You are not in control
HTML \x82\xE2\x86 Design
Blogs \x82\xE2\x86 Spin
RSS \x82\xE2\x86 Experience
Networks \x82\xE2\x86 Architecture

User-generated content filtered by trusted networks are changing everything. How do we do this in a meaningful way? What does it take to get an organization ready for this kind of change?

The content people want and the way it's delivered are both changing at the same time.

Users can help each-other just as much as you can help them but you have to get to a Tipping Point that makes this feasible. You have to have people to do it who care but you have to do the same thing to have anything be useful.

Why do companies want to stop people from caring about the product? People ignore marketing materials because they don't trust you. They will trust you if you publicly take their flak.

Amazon is an interesting example of getting halfway there. That they let people trash products is astounding. That they own your words is a little weird but they still took the step.

What about enterprises that deal in information?

A few things are gonna change

These things are changin':
* Individual goals & needs
* Desired brand perceptions
* Competitive environment
* key metrics
* business problems to solve
* organization dynamics

What is the implication for the way we do business? Traffic monitoring (site stats) is based on a page metaphor not a use metaphor. Search engine optimization changes fundamentally.

Business Problems To Solve
This is the biggy. Competition, brand perception, cost of new applications and features, revenue models and metrics. What makes deployment of Web 2.0 unrealistic? Staff skillsets are expensive for small orgs. This is the bleeding edge but the cost of entry is diminishing and users are coming to expect it.

For a developer position the new skill is expertise with the DOM and javascript. When hiring, interest and participation in open source becomes important and valuable. Knowing particular technologies is less important than interest and curiosity in how it all fits together and an eagerness to keep learning. (Instead of 5 days a week 8 hours a day these people are passionate) People interested in knowledge transfer between specialties become highly valuable.

Org Behavior
The difficult organizational challenge begins with coming up with the ideas to begin with. Right now you are enabling 2.0 functionality in 1.0 pages. This evolution will be difficult but requires information bubbling up from every level of the development team. (look for low-hanging fruit and find places where 2.0 functionality can be implemented)

The organization must also be focussed on learning while doing. How do you create this culture? Communicate with constituents about the need to learn new skills and to genuinely invent if boundaries are to be pushed.

How does Adaptive Path learn? Other than smacking Jesse with a ruler. Events like this (surprise) allow a broad range of industry perspectives to come together and share real ideas and honest opinions.

Client engagements are approached collaboratively, the client must want to engage side-by-side to do create successful design work. Traditional methods of requirements documentation, for example, don't hold up.

Adaptive Path has an internal wiki and "topic champions" are assigned to lead publishing in their area. Regular brown bags are held to share information and ideas. Disagreement is fostered in the environment and this leads to better ideas. This is essential for a culture of learning.

Dreamworks, for example, is now using wiki to replace their intranet.

What about documentation creation? Does this require work solely by the developer? No, documentation creation can be collaborative. Nobody reads it anyway. If everyone works together to make it they don't have to read it because they already know it.

(Piloting is also an important part of a truly creative culture and is connected to the point about about low-hanging fruit.)

Idea Markets
This structure will make you more nimble. Building lightweight apps with open apis will make it easier to change. Innovation and execution become faster processes.

Effects of the new Internet on teams
Both capabilities and organization structure will need to change. But the problem is more basic than this. This problem is a philosophy question.

This is not driven by technology. The capabilities and structure must adapt to the need to push updates almost daily if not hourly.

The question of competitiveness is a real one in this world. What about Yahoo!'s personality crisis? How do you square ultimately conflicting philosophies within an org? This is not just about copying this is about really getting why something exists and what it can do. You have to get away from the tactics and issues of "features" and get to what drives outcomes. Learning organizations that accept these precepts can do it. Otherwise there will continue to be a disconnect.

One more business point, responsiveness is a measure of high-techness and quality to users. This is a real business question about what users think about your product. When everything gets fast around you and you look slow why should a user sit there and watch the page load?

Prognostication 2007
* widening need for interaction designers
* Ajax readiness and selected implementation
* enterprise use of web 2.0 apps and technologies gaining ground for internal communications (rss, blog, wiki)
* Experiments with metrics and revenue models not based on page views
* Search engine companies (i.e. Google) )will begin to resolve Ajax/SEO problem

Prognostication 2015
* lightweight narrow-focussed applications will replace bloatware as the standard
* skilled, specialized interaction design workforce has coalesced as a community alongside IA, with its own methods, artifacts, and concerns
* synchronous interaction models create down market brand perceptions. intelligent web 2.0 design will add real value to the people who use your stuff.
* development teams have restructured to take advantage of reusable code language models (eg, Ruby on Rails), api's, and open-source alternatives, reducing development cost and time

> Designers see the world not the way it is but the way it ought to be

- Herbert Simon

Measure Map

Why a product? Why now?

So many of the web's problems are poorly solved and unquestioned. Now we know more about designing the web... right? And the technology we used to complain about is fixed.... isn't it?

XHTML / CSS can now be used to command a large portion of the audience.

Can't we take all these principles and tools and make cool stuff? Yes!!!

Podcasting. Not everybody who knows what this is knows what RSS means: this is not about technology, this is about getting stuff that you want. Odeo makes the complicated simple, for example.

Old Idea	Hard Problem	Old Solution
Content Management	One system, any site, any process	Giant enterprise CMS, open source alternatives
Hotel Reservations	End user interface to complex system	Strict step-by-step buying process
Buying wine online	Enormous selection, relatively few user experts	Use time-honored tradition

Look at the old CMS migration process that Adaptive Path used to talk about. Look at Vignette. Now look at TypePad: the new simple solution.

Blogging is a specific solution to a specific problem. It is not everything to everybody.

The Hotel Monaco reservation screen is a perfect example. Compare it to The Broadmoor. With Hotel Monaco you can't tell when things are available when you look at the form. With The Broadmoor you can and that makes it better.

Look at wine.com. They have every wine in the world. You can search by lot's of stuff. Look at Best Cellars, the taxonomy is based on advice and taste instead of outmoded categorization that people don't understand. The UI let's you filter in a way that means something to you.

New Idea	Simple Problem	New Solution
Content Management	Too much flexibility, not enough access	Blogs!

Web design is evolving to user experience. Usability is evolving to an holistic understand of who people are and what they are trying to do. Inventing technology is evolving to creating patterns.

Design
* Designing for the first impression
** What is this thing
*** reorienting on a landscape
**
* Progressive engagement
* Using Ajax for real problems
* Anticipating interactions

Measure Map
An attempt to get people to understand how their blog is doing. Boiled down to four stats and put them in context. Immediate understanding was goal 1.

[Product demo]

With an app it is essential that to communicate what the things does, what they have to do to use it, and an option to get going with it. Real time error messages without submit buttons. Never show the user how much work they have left to do. Show them the app with no info and encourage them to make it do stuff for them.

API as development process
http://code.measuremap.com/getBrowsers?date=08152005

This is nothing new but using it well is how super interesting things can happen.

Veen has always been opposed to separating backend and frontend but this allows for some separation with clear collaboration.

Reading the API will show you exactly what is happening as a designer.

Start conceptually to build IA using the old techniques. Start to build and then iterate conceptually. Building the API first defines the boundaries. When you hit a wall you can go back to talking about the API but otherwise there is a ton of freedom.

API's are nothing new, access is
Give up control, view your customers as peers. They own the data. Don't lock them in. (Let them take their toys and play somewhere else if the grass looks greener.) Outlook doesn't do this well and that makes you hate Outlook. Feedburner let's you leave and they make it easy to do.

The technology is nothing new. Http, urls, xml

API's are an ecosystem of innovation. Look at all the apps around del.icio.us flickr. They make the original app cooler and build a sense of affiliation. Look at cool mashups like chicagocrime.org.

The design is the result of geeks building social experiences and they are cool.

Documenting Ajax
Make a spec to document microstates. Draw every version of the contingency design. (and designing this way makes you think more about that. see the great 37 signals book on the subject). Draw pages and then draw associated changes in the view as a user does stuff.

Business Models
HotBot and how the web was lost. More unique users, marketing approach. You want more users to show more ads per session, NASCAR approach. More pages per session, Roach Motel approach. More sessions, help people love it.

What about shouldering the burden? The HotBot thing was out of whack. In Measure Map the hard part is showing stats immediately and showing an archive. The hard things cost us money, asking people for help seems reasonable. Give the easy stuff for free and ask them to chip in to make the rest of it possible.

Culture of Generosity
This is a less a factor of new thinking and more a factor of the commodification of everything. Everything is just so damn cheap now. Hardware, software, talent: everything.

JotSpot was cheap to start. 37 Signals built Basecamp with no VC. Upcoming.org was built by people who wanted to use it. Flickr was a game. etc.

In this new culture small ideas can flourish and there is no tax on experimentation unless it makes money. Solve a single problem and flourish or fail and try another problem.

Day Two

IA of Everyday Things

The title of this presentation is of course a riff on the book title The Design of Everyday Things.

Another title considered is the secret history of IA, for reasons that will soon become apparent. If you asked someone about the history they would tell you that IA begins with Richard Saul Wurman in 1975 and his work on the design of information resources. He coined the term "information architecture" to mean a particular design practice.

Alas, he was written off.

Twenty years later two librarians from Ann Arbor adopted the term for their work. It now meant a very narrow set of ideas rooted in library sciences. IA in this sense emphases structuring information for retrieval. It is from this work that the profession of IA was born.

There are now thousands of Information Architects. There is literature, organizations, conferences, and more. Oddly, or predictably, there is still not a clear definition.

To really understand you have to go further back, really really far back to the Neanderthals.

What killed the Neanderthals
It is astonishing to even imagine what the world was like then but there was a period of time where there were two distinct species of humans on the planet coexisting. Genetically and physically different species. For fifty-thousand years these two species shared the planet and then one species began dying out and we are left with only one species of humans.

There are many theories among scientists about what led to this extinction. One of the more popular theories has to do with communication. Because of certain characteristics of the Neanderthal neurological and physical structure they did not have the ability to process language in the same way as modern man. They had a failure to communicate. They could not pass along ideas or explain things meaningfully.

Ultimately their species died out but the problems we face today are the same.

We tend to think of IA as this new and unique thing but it is really all around us. Think about Time Square in New York. There is information all around you that has to be processed.

The Where's Waldo books exercise in our brains the facility to identify information from noise.

In the beginning...
You start with datum and then add one to get data. With additional pieces of information comes the need to establish relationships between them.

You can describe two elements as closely related, not related, overlapping, as separate but of equal importance, once can imply or explain the other, one can be more important or less, and many other possibilities.

With more and more pieces of information there are more and more possibilities for explanations of the relationships between pieces of information.

Fortunately we have the skills to articulate these relationships, this is the skill that gave us the advantage over Neanderthals and the ability to find Waldo.

> The world can be seen as only connections, nothing else... A piece of information is really only defined by what it's related to, and how it's related. There is little else to meaning. The structure is everything.

- Tim Berners-Lee

Information architecture is the juxtaposition of individual pieces of information to convey meaning.

[Texa-delphia menu example]

Broken up by logo, sides, drinks, kids menu, special combo, cheesteaks, cheesesteak toppings, cheesesteak sauces, chips, and everything else they sell.

[Harpers index example]

It appears to be a simple list of numerical information. Yet there is a structure. The Harpers Index put specific facts side by side in such a way that the juxtaposition provokes thoughts and communicates ideas that the fact alone cannot communicate.

Juxtaposition
When you put pieces of information side by side our pattern matching instinct kicks in. That is how we make sense of the world. If you don't explicitly state a relationship a user will infer one.

Inference relies upon familiarity.

Think about All Things Considered. It is two hours long and being a radio program it relies on precise timing. The producer must account for every second of the program. They account for this using the "roadmap."

It is on a long piece of paper divided into two columns, one for each hour of the show. Each segment is divided into set thirty minute blocks with certain present requirements.

The first thing in each block is about seven minutes of news coverage. Then you get five minutes of "news perspective." Cut away for local information and then a block of feature stories.

Over the course of the two hours there is a cycle from current information to slightly less timely but still relevant, pieces on current interest, and then pieces that really could run any time.

This clear structure creates the experience.

Lands End Catalogue
There is a structure but it is implicit and requires analysis. It starts with a showcase, then a section for women, followed by a section for everyone, a block for kids, a block for men, and then a final block for women.

By putting the clothes for women at both ends they are taking account the fact that some people read back to front and some read front to back.

These layers continue in the breakdown of clothing type and information context on each page.

They use reference and redirection to refer you back to things you might have seen before. This latticework pushes the users attention around the catalog in an attempt to capture sales.

Ideal Sources
The most interesting IA problems spring from problems of diversity.
* diversity of information
* diversity of audience
* diversity of modes of access
* diversity of use
But don't overlook simple problems that have simple solutions.

Brand-Driven Information Architecture

Think about Philip Morris. They were, in 2001, more hated than Microsoft. But they weren't just a cigarette company. They also own Kraft, Oscar Meyer, Altoids, Post, Life Savers, Planters, Kool-Aid, Miller Beer, Jell-O, and more.

If you went to their homepage you would see the phrase "Makers of the world's finest products."

They redesigned and changed it to "Working to make a difference. The people of Philip Morris."

The IA changed from their industries to more generic About, Philanthropy, etc. Nothing changes on the business side. What changed what the brand position and IA of the web site to reflect that.

What do we mean when we say that the brand had to change?

Think about Heidi Cody's American Alphabet.

Product -> name -> characteristic -> identity -> reputation -> cross-branding

• Name
• Logo
• Typography
• Color scheme
• Design elements
• Language

But what problem was branding intended to solve?

The fact that cows all look the same. The practice of branding livestock dates back to ancient Egypt as an effort to differentiate products.

Using these symbols to represent the provider of a product came about.

With the industrial revolution and the rise of consumer products this concept of branding was applied to everything.

Think the adbusters American flag.

People then got the idea that a brand could stand for more than a product. These symbols could be invested with meaning. A 1901 KODAK ad from Cosmopolitan Magazine states "KODAK stands for all that is Best in Photography .... the triumph of kodakery."

The principle is still the same.

What's a brand?
A set of ideas associated with a product as a means of differentiating the product in the minds of customers.

Brand consultants use brand architectures. When there are multiple brands the conceptual framework must be organized.

Think about Apple. There computer products are divided between four main brands based on their marketplace. Mac and Book depending on form factor. i or Power depending on the consumer or the professional market.

These identities must be managed.

Brand Attributes
Plot a two-by-two to plot the brand by two scales at once. fancy to practical and serious to fun, for example. These could also correlate to expensive to affordable and old to young.

If we want more attributes we need fancier tools. Brander consultants call this Semantic Differential Analysis. Look at a whole bunch of elements at once and based on these oppositions you can plot the brand. You can put this in front of users and have them plot the brand and your competitors.

You can also make a brand concept map to show a tree of the conceptual attributes of the brand.

What about IA?
When a brand marketer talks about consumers, the attributes of their audience, for an IA that sounds like users. When they talk about product capabilities we hear content. When they talk about the companies business realities that sounds like business context for IA.

Users, Content, and Context sounds familiar.

In the same way that brand provides the conceptual structure the information architecture of an information architecture of an information product provides the conceptual structure. Brand and IA are both ways of framing the concepts we want to present in the minds of users.

How brand can drive IA
Brand language can drive nomenclature. The naming of things is often undervalued. One thing in common between IA and branding is the struggle to choose words. Customers or Consumers or Subscribers or Members or Partners or Clients or Guests? All these words for the same concept but with nuanced meaning.

Brand can drive content prioritization. When we do content analysis we look at the suitability of content relative to user needs or business strategy. We can also think about the level of alignment to the brand. How does this content communicate the ideas associated with the brand. Is it close to core brand attributes?

Structural choices can be made to give priority to the message we are trying to send.

Brand can also influence the semantic structure. If you have worked out the relationships between the ideas associated with the brand and have content related to those ideas those relationships should be reflected in the IA.

It is those relationships that define the brand identity.

NPR's brand blur: an anecdote. NPR is not the only provider of public radio content. Some things are from the local station, PRI, BBC, or CBC. Users don't get this. From the listener perspective everything is associated with NPR. Normally you would consider this a good thing. Their brand defined their industry. This presented a problem for the web site because people came looking for things that weren't there. Users looking for This American Life info, which isn't there because it isn't an NPR program, thought the NPR web site was flawed.

Site was built with a hybrid approach that blurred local and national content with links to third-party content. National content was integrated into local sites. Local content is integrated into the national site. Links to third-party content was available through the search engine. By pointing to their competitors they strengthened their brand.

What about Philip Morris? They have redesigned since then but the architecture hasn't changed much. They came to the conclusion, however, that the brand was not salvageable. They renamed it Altria and gave it a pretty logo.

(If the brand isn't any good this won't work. The brand development, if done well, will anticipate the needs and desires of users. User-centered branding...)

Content Architecture

The Elements of User Experience model can also be used as a frame for understanding content architecture.

Content is not a shapeless mass to poured into different vessels. The form of the content is relevant to design.

Strategy: Use content to develop a relationship
Content is only interesting if it develops a relationship between your organization and the visitor. Content can help mature a relationship between a visitor and the organization. How do you cross over from interested to involved?

What gets them there is the content that is offered by the organization. At the outset you want to introduce, then engage, then educate and differentiate, and then provide details.

Scope
The difference between similar content containers (books in this case) is the purpose. A travel guide, a free weekly, and a street map convey similar information about a place but with a different place. What you are looking for and why will determine where you go for your information.

Genre is very important in how people relate to content and how it meets their needs. Specifications, system requirements, pricing, documentation, etc. This material will server a purpose. Lacking a physical form makes the challenge greater. Links in Google all look the same so what do we do? Not throw up imagery to make everything different. Instead we should structure content in such a way that when a user clicks a link they know what they are going to get.

Most IA helps people find something but what about what they want to do with it?
* What is its purpose?
* What expectations will people bring to it?
* What can someone do with it?
* and...How do people know?

In the real world people know because of physical forms. We must communicate genre in a meaningful way.

Organize content genres by granularity.

Broad -> More Granular -> Still more -> Yet still more

From description to specifics. Choose the level of granularity as you are doing your IA.

Triangulate activities, content, and devices
Different devices have different attributes. Web via PC, PDS, Mobile Phone screen, Paper, and Phone call are all completely different contexts.

When performing a specific task you have different needs that must be taken into account in the structure. Portability, interactivity, detail/depth, multimedia, familiarity, reflection, responsiveness, multitaskability, and solidity of the record all have a different role to play.

Offer Tools That Get Results
Look at the Fischer Bikes bike finder.

Give people a degree of confidence in the results of what they are doing.

Target the seducible moment relevantly
Cross-promote in content not on the home page and cross-promote rationally. Don't just show anything. Show specific things that someone will care about.

Provide this detail manageably.

Engage with microcontent
Links, abstracts, etc. On the web, unlike in print, users require explicit browsing cues. They can't just flip pages like they can with paper.

Comparison charts are thus very valuable. Wordiness is not a problem if there is context and meaning. Don't be afraid of content but be smart about microcontent that gets people where they want to go.

Use genre to guide the user appropriately
Genres serve as important trigger words and these triggers are almost all the user has to figure out where to go.

Trend Micro does a great job of this. In their right navigation there is an Evaluate tab that allows easy access to genre content for the item being viewed.

Symantec has similar information but doesn't provide it until the end. Show things that people want where they can expect to find it.

Provide Meaningful Comparisons
Comparison charts are probably the most valuable content genre on the Internet. They set up relationships in an instantly comprehensible manner. Users read the whole thing and then click with confidence to get to the next place.

This can also be used for content manipulation, think Orbitz. They use these for almost everything.

Appreciate the power of form
Form plays a huge role in the presentation of content in a meaningful way. The form of the page has in impact in what people think is going on. User research shows that the form registers before the content.

Presentation sets expectations - what the content is, and thus what purpose it can server.

Avoid jargon and proprietary language
(Speak in a way that your readers will understand not how you understand the concepts)

Avoid obfuscation at all cost. What does the thing do or what is the information for?

When in doubt, ask yourself: What would an eBay power seller do? They have overtime taken feedback and discovered what works and what doesn't. It might not be pretty but it works. They know what information sells stuff and they do it by building confidence.

See eBayness article for further information on this metaphor.

• Completeness: Try to answer every possible question
• Imagery: Look at the thing from all sides
• Assurances: Engender trust
• Weed out the unsuitable: save your users time

Questions
Has AP published research on self-identification? No but it is based on high-tech user research where people don't like to identify something. However, it makes people scared that if they self identify as something then they will miss something else. There are, however, places (like universities) where well defined groups already exist.

What about the term Job Aid? That means nothing on the surface. What is the context? Tech support.... (how odd. this seems like bad nomenclature) it if means something to the user then it is fine but if someone uses that term for something else be attentive to those boundaries.

How do mitigate the change in legacy naming? Maintain old links but redirect in a way that communicated the change.

WellsFargo.com Content Effectiveness Study

Wells Fargo was one of the first banks with an online offering in 1995. Separating Code and Content was the first step towards enterprise-wide content and architecture optimization.

Content Effectiveness is a strategic methodology that is repeatable and measurable.

Initial Engagement

April 2003
* Recent Content Management implementation
* Organization-wide mantra that WellsFargo.com is a buying site
* Recent research efforts for online banking proved valuable

They hated their CMS provider but the investment they made forced them to think about their content.

Internal discovery was conducted: stakeholder interviews, secondary research, discovery report.

• How does content influence sales?
  • What kinds of content?
  • How much content?
  • What is the appropriate tone?
• Current content is organization-centered, not customer-centered
  • Wells Fargo must break through silos, cross-lines of business and cross-channel (the online experience, the non-virtual experience, etc.)
• Content strategy must inform related and parallel projects
  • CMS, IA Normalization, Ongoing Homepage Designs, Metrics

User research was conducted with 19 people who had been on WellsFargo.com in the previous two weeks.
* 6 were customers
* 13 were non customers
* 4 were primarily interested in small business banking
* 6 were primarily interested in mortgage and refinance

A surprisingly low percentage were customers and most people wanted multiple products.

The research methodology was a little odd.

The objective was to understand content needs. Through a combination of a pre-interview and a longer formal interview the user walked through recent experiences on the site. Instead of being a user test it was a site test.

The mental model was used to breakdown participants' tasks in acquiring financial products. Content types were slotted where appropriate.

Based on the research themes that emerged from the interviews were catalogued on a white board.

The thematic model was used to reflect the psychological motivations by clustering themes together to reveal a narrative.

The conceptual model utilizes standard purchase model to overlay motivation. This explains how content can mature visitors by giving them the filtering information they want.

From this IA judo emerged a content strategy.

Users often have no clear idea about:
* what content they're looking for
* what needs they expect that content to fulfill

The dive toward product details, read them, but don't understand them.

To mature users through the beginning of the process, the site must:
* redirect meaningfully

Use persona style content to ground content in the perspective of a human. Users seek content that contextualizes product information that reflects their circumstances back to them.

Use personas as archetypal characters that embody real product use scenarios. Persona content can also contain real life examples.

The site should also support multi-session research. Most users, in the research, came back to the site repeatedly. Make it easy for users to find where they were and then let them easily pick up where they left off. This can be accomplished through functionality and also through very explicit IA.

Reflect major themes in the content, the ease of using the site reflects the ease of dealing with the organization.

Make it as easy as possible!

Internal Process
The mental model was taken and transformed into the content effectiveness process.

The upper portion of the mental model contains the tasks that a user would consider. The lower portion contains content and functionality relating to those tasks.

The original mental model was overlaid with the purchasing workflow.

Another mental model was created and compared with what a person wants to go through in their financial life. Both models were constructed using similar approaches.

The program objectives were straightforward:
* Streamline the IA
* Ensure accuracy and consistency
* Optimize, create, and update content
* Standardize the site through templates

Project walkthrough
# Perform background research through surveying stakeholders
# Create a content scorecard comparing content elements to three competitors
# Prepare for mental model session by creating a parameter matrix with three factors that apply to the particular situation. Focus on the three best scenarios and use these as user profiles.
## Parameters
## Profile structured content
## photograph
## quote
# The scenario starter
## Events
## goals
## challenges
## motivations
# The mental model working session reveals user details at a variety of levels, enhancing the team's understanding of the user's pain points. Identify triggers to build a scenario
## Introduce the profiles and discuss them
## Expand the list of possible profile scenario starters
## Map the scenarios to the mental model by identifying tasks to accomplish the goal
## Create output that reflects the steps a user must proceed through to accomplish their goal
# Content Assessment
## Evaluate content based on heuristic questions
## Identify content types such as call to action, contact information, product services overview, comparison chart, rates, etc.
## Produce the content type platform document that is written such that it is generic to the site that can be modified to fit the needs of a particular business or situation.
# Extract content best practices
** Not enough content?
** Too much content?
# Gap and overflow analysis based on findings from the mental model and content assessment. What did we learn, what should we do, is it feasible, etc.
# Generate the site map to reflect the structure of the content and the appropriate template types. Also identify key screens that should be tested with users (new content types, etc.)
# Construct wireframes for the key screens that require usability testing from the site-map (this process should reduce the number of templates)
# Construct a real-seeming prototype
# Conduct usability testing to identify themes, unanticipated sticking points, most valuable content is identified, and likely user paths are also revealed. Anything more than three sentences is not likely to be read (unless properly contextualized?). People ignore overview pages and choose the leapfrog when the option is presented to them.
# Go Live
# Measure project success by using the metrics identified in the scorecard (transactions, enrollment, traffic types, etc.)

Consolidating content through intelligent content effectiveness will likely allow for the deletion of needless repetition and confusing redundancy.

What's Next
Continuing to evolve this process.

• Be the user advocate
• Go through the mental model process
• Develop common understanding

Questions
Content strategy must exist before IA can be created.

A unique aspect of the process is the emphasis on content.

Quantifying the model? On the web site there are specific events that occur. Tagging these events and associating them with tasks as a metric. Also associating this structure with "goals."

The scenario starter is used to jump-start the development of the task model.

How does this deal with the multichannel world? Can online profile analysis be used for offline experience management? Different phone number posted on the site allow for identifying calls driven from the site instead of calls driven from elsewhere.

Who is responsible for analysis?

Who is accountable? Partnership between core Customer Experience research team and product team. The onus of responsibility remains with the business.

How are the tasks developed? Conduct interviews. Comb through to find out what people are doing. The fuller mental model process is then followed (I think I have notes on this from last year somewhere.)

What about Web 2.0? Freelisting a la rashmi sinha

Algorithmic Information Architecture

Once dot-coms roamed the earth. Everyone spent lots of money. Innovation was driven by competition. "Natural selection" propagated user experiences across startups.

As the curve of the stock market went up so did our experience.

Then disaster struck. Market collapse killed almost everything but a few companies continued to struggle on life support. The spending was scaled way way back. There was less money being spent on research and less investment in experimentation.

But Jeff Bezos and Jacob Neilsen survived.

Nielsen has done a great job of drawing corporate attention to user needs. His ideas are sound but his approach is rooted in the past, not the future. However, controversy is very good for business and discussion.

Amazon is a really interesting example, especially for IA. Amazon defies conventional wisdom.

Conventional wisdom:
* Users create mental maps of sites as they navigate
* Therefore hierarchical categorization to facilitate wayfinding

But Amazon barely does this but somehow it still works.

The key to their success is that they do it differently.

The Algorithmic Approach

Data -> Algorithm -> Architecture

The problem this solves is that Amazon has a bunch of data that needs to be organized in a way that makes sense to users.

The key is to understand that Amazon's data is not limited to data about their content, it is also data about users (and that's a ton o' data).

Individual: Sales history, browsing history, product reviews, product ratings

Aggregate: Sales history, browsing history, product reviews, product ratings

Conclusions: People who bought this also bought... The Page You Made... Your Recommendations.... Explore Similar Items

This is just the beginning of what can be done with algorithms automatically generating connections. Not everywhere but the right algorithms in the right places. Current implementations are still rudimentary so the next step is for algorithmic architecture to become transparent to the user.

The key is better data.

Algorithmic architecture is about connecting content with users.

• Better data about content means metadata, metadata, metadata
• Better data about users requires a new approach

The modern web designer has only usability testing to show the way to good user design but it is only a method to find obstacles, it isn't going to help us find the way. It is the best thing we have but it isn't a perfect tool. It is, in many ways, an imperfect tools invested with overreaching authority. The world's best usability test pales compared to the real data about actual user behavior outside the lab.

Instrumented Interfaces
Collecting better data about actual user behavior eliminates the need for most usability testing. What is the sites we build would tell us how they are being used?

We need interfaces to tell us more about what people are doing. Make every visitor a test subject.

Amazon does this in the structure of their URL's.

Every time you visit the site a session id is generated and recorded. They thus have a complete record of your session beginning to end.

Every link on every page has a unique tag indicating its place on the interface.

Even search results are tagged with query ids tagging each link to the item searched for. Because they can know which links are most popular they can push those to the top.

Even the same book on the same page has different links to keep track of this data.

Think Baseball
Baseball fans love stats. It started out simple with At Bats, Hits, and Runs. Then it got complicated: Batting Average and ERA. Then it got way complicated: On base percentage and fielding average.

Ethics Schmethics
Serious privacy issues are raised by the collection of this detailed data. It is essential that we adopt practices to ensure that behavior data is not misused.

Questions
Web 2.0? We can measure hovers and everything else we are adding to functionality.

Click to something? Not sure what they would do with refer data.

Metadata for the Masses

One of the problems in the world of the web are categorization and classification schemes that don't represent how I view the world. Sometimes the menu gives me options that just don't match how I see the world.

Wine menus of countries, price, grape, etc don't give me what I want. Democrats.org list of people types. What if you are more than one? What if the name they picked is offensive for you?

How we apply metadata also impacts its relevance. Often you can only choose one and adding new tag structures can be cumbersome. Changing categories and classifications cannot often be done on the fly.

Free tagging can come to the rescue. del.icio.us tagging specifically.

Folksonomies emerge from free tagging.

The problem is that tags forsake completeness. Tags also don't discriminate between meaning of words.

Should we get all worked up about it? Does this make tagging bad or useless? (does it obscure content?) No, not really. Tags are low-cost. Users can add, remove, change, etc. without cost. Tags are also fast. Folksonomies react immediately.

We are now letting user behavior define the context.

Best Practices
Interfaces should display prior tags so each user can be consistent and organized. Type-ahead in the tag entry field will also make this easier by encouraging people to choose from preexisting tags before creating new ones. A user can still freetype and you can still structure it in such a way that defined synonyms.

Think about tagging in this sense like free market research.

How to merge tags with other forms of classification? Info World tags all of their articles with del.icio.us tags. You can use the del.icio.us API to encourage tagging of your content and allow browsing on your site of how your content is tagged by del.icio.us users.

If content has a clear focus it will make this interesting. You can let people tag anything. Look at Consumating or Dinnerbuzz.

Nform has been using this for the government of Alberta, Canada, to allow people on a jobs site to identify their skills.

Communities will also pick tags. NPtech is a perfect example.

Also think about the tag me or the tag color in flickr. Self centered tagging can build communities as people explore outside their own data.

Another Point
flickr recently introduced clusters. Because flickr has enough data that they are able to distinguish between content with the same tag. This is essential to making this meaningful.

Day Three

Adapting Research Methods To The Web

We all know about user research but what does this mean and what techniques are available to us?

Engineers think about the Internet as a cloud, we should think about it as Frankenstein's monster.

Shout out to Observing the User Experience by Mike Kuniavsky. In addition to the techniques this book discusses the larger point is to just jump into it: do the user test now. Don't make excuses. If you don't have a budget just use coworkers. Just start where you are because some data is always better than no data.

Usability Testing
It is a tried and true method. You can do a formal usability testing in the lab or your coworkers or something in between. There are also a number of new tecniques that take advantage of the fact that the Internet is a network. These new tools observer people in less formal and thus more real environments.

Task Analysis
This is a way of understanding context. When you understand the problem space, and want to know how people are currently solving it, you want to use task analysis. This technique is employed before you build a solution to address that problem.

Surveys
These are very easy to set up and are a great way to know what your users are doing right now. This also allows you to find out who is actually coming to your web site. Survey Monkey is a great cheap survey tool.

Diaries
Understanding the relationship your user has with your site over time is very difficult to find out and diaries allow you to gain some of this knowledge. Expectations are set, habits are formed, and context is developed.

Field Research
AKA "Contextual Inquiry or "Ethnographic Study," this method allows you to understand the real environment people work in and the needs they have in that environment. This is another way to get at the deeper context in which your site or tool needs to operate. Go out and watch people in their environments using their product.

Beta Testing
Take advantage of the network to understand a developing relationship with a user.

Build -> Release -> Observe -> Iterate

Be careful though because you don't just want to build for only your power users.

Things to remember
* Some data is better than no data
* Doesn't have to be time-consuming or all that expensive
* Rules aren't hard and fast; you can experiment
* Research can affect a lot more than just the design of your site

Remote User Research: National Gallery of Art

Bolt | Peters has done this for six years with over 120 research projects. Their focus is on Remote Usability Testing because they found that in the lab the user didn't have the emotional involvement in the tool.

Looking at a user in the native environment is the way to go.

NGA Project
Remote user testing of gallery web site visitors.

Sample size: 20 users from 4 audience types. 6 from the general public, 5 educators, 4 students, and 5 kids.

Research goals: Uncover usability problems. Understand people's goals and expectations. Provide AP with info for vision prototyping.

Remote Usability Overview
Moderated: Recorded use behavior monitored by a person

Automated: Computers watching people (click-stream data, etc)

Remote Card Sorting: visual of cards and allow closed or open ended boxes

Web Surveys: obvious

The focus for today is moderated remote usability testing.

Setup & Recruit -> Testing -> Analysis

Step 1
Intercept people live in the middle of a task and then have them continue their task as you collect data through a shared session. You learn a great deal about the real tasks the user is performing.

Once they hit submit a real person will call them immediately.

Other scheduled recruiting options include Craigslist, Agency, Guerilla, and others. The advantage to the live phone call is that the user does not have expectations in advance.

Step 2
One barrier to remote testing is that it can be tough to set this all up. Fortunately this is getting easier.

Right now, this is how the set ups work.

[demo of users talking and using the NGA web site. This is amazing]

Once you get the user on the phone the user is prompted to install the plug-in. Many of the big tools, like Breeze, really don't work with dial-up. Some do work this way by dropping down the color. Qarbon, ScreenCorder4, BBFlashBack, Camtasia, and other apps allow you to record your screen.

Audio recording is more of a pain but VoIP will make that much easier.

Step 3
The analysis of the note is similar to offline research. Have one moderator and one note-taker. You can also get the whole team in the room with the user on the screen using the web site.

However you get the notes into a spreadsheet is fine but using a spreadsheet for analysis is very helpful, just like in a lab study.

The ability to live user testing is that you as a designer can infer solutions to the problems the users are experiencing. You immediately see the gap between expectations and actual content.

NGA Conclusions
* Gap between gallery's content and web site
* Not Enough Art, especially for kids
* Global navigation problems
* Search problems
* Repeat visitors wanted to know daily events

Remote vs Lab
|Type|Pros|Cons|When to use|
|Lab|Collaboration, rapport, widely accepted, production value|Longer timeline, higher cost, no geographic diversity. Hassle.|Collaboration and Buy-In. Large audience for study findings|
|Remote|Quick, native environment, candid feedback, emotional attachment|no face-to-face rapport, collaboration more difficult (for now)|Fast iterations, international testing, smaller team, ethnographic insight|

The fact that remote testing also has lower production values is that stakeholders sometimes find it harder to buy in to. Using a combination of lab and remote testing is often the ideal solution.

Questions
Was anything particularly surprising? What was most shocking was the ability to watch people hesitate because there was more here than on any other site tested. What was gleaned from the video and audio was that people were both interested and intimidated by the entire process.

Princess Cruises Case Study

Run www.princess.com and www.cunard.com out of the Strategy office in the company.

> An organization's website is like the canary in the coal mine.

- Peter Merholtz

User research and an attempt to understand the context is an important part of understanding what needs to go on the site. Similarly, an understanding of the business drivers is also an essential portion of this process.

Part 1: Cause (8 weeks)
Every good research project starts with a simple question.

> Should Princess Cruises build an online cruise booking engine?

Well, sure! Except...
* Didn't know whether or not it was worth the time and expense
* Didn't want to cannibalize existing sales channels--90% of bookings are from real live and online travel agents
* Didn't have evidence that people would actually use it. Even though travelocity and orbitz do this on their sites they only have a 2% completion rate because people research the product and then pick up the phone and call

The best thing to do was to model the buying process.
# Audience segmentation: Who do we want to talk to?
# Task analysis: Interview and analyze a small sample of cruisers?
# Develop a mental model: Build a simple visualization of the entire cruise purchasing process
# Develop a visual prototype: Use the mental model to envision a potential solution to the question

Audience Segmentation
Took 12 US-based individuals who has cruised in the last 3 months and talked to them for an hour.

Broken down into 4 categories: 1st time vs. experienced, Princess vs. other cruise line users, "Exotic" vs. "Commodity," cruisers who booked directly with Princess vs. a 3rd party reseller on the Internet vs. real-world travel agent

The goal was to get one person from each combination to get a sense of the different demographics.

Bringing in AP also helped because it forced Princess to explain the business to people who had a fresh perspective. Princess also hired a "cultural anthropologist" to go on the ships and report back about how people use the product.

Interviews & Task Analysis
Record and analyze the 12 one-hour conversations. It is the job of the researcher to abstract tasks from the interview to describe the mental process that the user goes through when accomplishing tasks.

How do you analyze tasks? Listen to people, type the interviews, use a highlighter, and write the tasks on post-it notes. Order into a three levels hierarchy.

First is the atomic task. These are collected into task groups. Then group groups into a meta task.

This should result in a model that shows the process of deciding. The goal is to reveal the full range of the process that users experience.

The final piece of the mental model is to show which user groups fall into that pile of post-its.

In this case they found that of their original categories some were just irrelevant, such as the difference between different cruise lines. They also found that how they booked their cruise was irrelevant because people fundamentally don't remember what they did.

The final mental model in this case was 12' wide. The content of this should be obvious with hindsight.

Fifteen high-level mental spaces
* Choose cruising
* Learn about cruising
* Plan for cruising
* Monitor cruising opportunities
* Find out about a specific cruise
* Gather information about cruising options
* Gather information about a specific cruise
* Discuss cruise with potential travel companion(s)
* Choose cruise
* Decide not to book cruise
* Deal with cruise-related travel
* Prepare for cruise
* Deal with changes
* Go on cruise
* Participate in post-cruise activities

28 decision points for choosing a cruise were revealed.
* Price, destination, and ship are the big three
* But also many other factors: itinerary, customer service, literature, cabins available, deposit requirement, theme, amenities, class perception, staffing, reputation, airfare to departure port, etc. etc.

The fact is that cruise-buying is a surprisingly complex process. It can take anywhere from three to six months, and involve at least two, and sometimes, up to sixty people. The point of purchase comes at the middle of the process. the act of purchasing isn't necessarily the most significant task a person undertakes during the cruise-buying process.

> Should Princess Cruises build an online cruise booking engine?

Why is it that Travelocity and Orbitz only have a 2% online conversion rate?
* Buying a cruise isn't like buying a plane ticket. It is not a quick decision making process.
* The metaphor of Orbitz and Travelocity is flawed.
* Potential cruisers use these sites for the aspects that do map their decision-making process.

Is there a better design metaphor to use when building a cruise booking engine for Princess?

What else is out there that requires three to six months, lot's of people, and where money isn't the big thing about it? Enterprise software!

There is always a project manager (a Connector, you might say) in a process like this.

Enterprise software is based on the idea of "decision support." They walk buyers through the process, both before and after purchase.

> Should they build an online cruise booking engine? No!

They should instead design the site to support cruises through the entire cruise decision process, including but not limited to paying for a cruise.

Vision Prototyping
Use design to visualize research results to embody the discovered ideas; this is designing not "Designing." It is fast, iterative and collaborative.

Goals
* Support customers throughout their cruises: before, after, and during
* Support first timers and experienced cruisers, support exotic and commodity
* Support all booking options and allow them to transition seamlessly
* Support the collaborative nature of finding a cruise

The decision support model is important because it doesn't matter to Princess how someone gets on a ship as long as they end up there.

Created white boards to build a navigation system from the tasks. Use language from the interviews when making these choices.

Also worked on the whiteboard to visually explore the ideas involved in the construction of the application.

Part 2: Effect (1 year and counting)
Once AP left Princess was left with a NO and more questions than they started with. What was particularly interesting is that Princess was overloaded with data but they were also given insight and meaning.

The mental model was also a great starting point for collaboration within the organization. These ideas had benefits beyond the web team.

One-on-one understanding of the process from a user perspective.

The challenge is that it's one thing to do the research but it's another thing entirely to adapt it to the situation. The only way to move forward was to involve everyone in the process.

The biggest problem was a fear of losing control. Needed to maintain the perception as the "Mercedes of cruises." Always had more control with how people interacted with customers before the Web. The concerns about brand perception was paramount.

If customers were allowed to explore every aspect of the product it might give away control of the brand to customers.

Problem: Pricing

Special kind of cruise pricing: "localized pricing" specific to geography. Decision support means providing accurate pricing information when expected, but localized system requires customer information in order to give accurate numbers.

How do you provide meaningful pricing without having to ask too much information up front? What if the initial quote is higher or lower? This will impact the credibility of the brand.

Solution: Begin with the design
You can talk about design all you want, but you don't get good responses until you put it on paper. Move to wireframes as quickly as possible.

In the past there were multiple word documents (functional specs, IT docs, marketing specs, etc.).

Consolidate all forms of documentation into one, combining wireframes, functional specifications, business objectives, communication outlines, command chains, and evolve over time.

Goal: Anyone could pick it up and get it! and it worked!

As everyone started to get it the whole thing fell apart because it had never been "done that way before." These changes would require deep change. Fortunately the executives understood what was happening.

However, the changes started to impact policies and procedures throughout the entire company. Saying the the product is organized incorrectly is freaky.

All sorts of problems started happening all at once. Strong responses from throughout the company made it clear that strategic processes needed to be rethought.

The design process halted to answer the question: "Why do all these departments view the product so differently?"

The product design team became the internal research team.

Findings
* Pricing logic wouldn't work on the web
* Inconsistent classification systems (registration calls Bermuda what the marketing materials call the Caribbean)

This was a complete mess.

Problem: Conflict with IT
IT had a well-established system for dealing with mismatch and were proud of it.

Problem: Conflict with Marketing
Had to invent new solutions because the new approach conflicted with the traditional marketing approach.

[Naming conventions example]

Problem: Conflict with Market Planning
They decide what ships go where and when. It turned out that marketing took cues from market planning but research had to discover this.

In the end, everyone got on the same page and a system was created to have regular meetings with these departments. This worked because Princess views the web site as a strategic asset rather than a marketing asset. It is still for marketing but it is more than that. It is a tool to guide the company in terms of strategy to change the way consumers view the product.

This process made it possible to focus on the problem and not the solution as they tried to do originally.

Lessons Learned
Organizational effect was much more significant than the effect on the site; research was a trigger.

Design stopped to deal with the important issues.

Next Steps
Usability testing at every step of the way. Communication with other groups is ongoing. Now regular meetings keep everyone informed.

Still trying to figure out launch plans and what will visitors think about the changes to the site.

People are also now discovering new ways the web can be used to promote different part of the company. The VP of Food and Beverage is working with them to promote food.

State-of-the-Art Testing Methods

Get in the way-back machine. What was usability testing like in 1993?

Could people do what they wanted to do with an application?

In 1998, this moved to the web. Could people do the tasks you want them to be able to do?

On Disney.com it became apparent that the more Disney spent on their web site the harder it became to find things. User tests showed that people didn't know the difference between Disney World and Disney Land. etc. etc.

Users used to be grouped into 2 categories: experienced and inexperienced. Tasks were mapped to functions in the design and success was measured by task completion.

Then came Lycos. They were using their ad agency to do usability testing. These guys would ask people they picked off the street in Wall Street to find information about Leonardo DiCaprio.

This caused UIE to realize that they were doing the same thing: they were creating a completely artificial context. They were asking users to do things they probably don't care about. The whole thing was independent of motivation and context.

The outcomes of user research are different when motivation and context match real use. If not the team might miss important findings.

[had to step out. refer to audio recording to fill in notes]

Interview-based testing
Recruit users who would naturally use the site. Allocate time to interview them at the start of the test. Have them describe their own scenarios for use and ask them to execute their own scenarios. This is useful for uncovering subtle problems.

Example problem: when people complain about download time they are actually complaining about the difficulty of using the site. About.com used to take 8 seconds and were told that it was slow but Amazon.com took 36 seconds and users felt it was fast.

About.com worked hard to speed up download time but that was not the real problem.

CD Shopping Analysis (2000)
Studied 7 competing sites selling entertainment products (CD's, video games, videos). 18 shoppers were to buy products they were interested in.

Findings: substantial differences between competitive sites and that the sample was too small.

Because the task allowed the user to do whatever they wanted not all problems became apparent immediately. In old HCI studies all big problems were found in the first few users. With this model problems were revealed for the first time at user fifteen or sixteen. They found that in order to reach the 80% of the problems mark they would have to test 90 people.

State of testing after DiCaprio
Very careful about selecting participants and test protocols had to vary based on the information you are looking for. Task design and facilitation has to be 'designed.' All recommendations made from this research must be made cautiously.

From this emerged the 7-11 milk experiment. Imagine that a device that told you whenever someone needed milk. You went and picked them up and took them to the nearest 7-11 and just to make sure you gave them cash. What is the expected completion rate? 100%

Do this online: recruit users ready to make purchases, give them 1 week to research, give them cash. What is the success rate? 30%

Why?

People got lost in dead ends. Bad sites performed almost ten time worse than good sites like the Gap and Lands End.

A comparison shopping study is tough to get people to come forward to do.

The 5 second test
The entire time the user gets is 5 seconds. Can use real pages or mock-ups and it tells the designer if the site does what it is supposed to do.

Identify if pages quickly communicate their purpose.

[break for work e-mail interruption]

Be careful about move through each step independently.

Observation -> Inference -> Opinion -> Recommendation

We get into trouble when we mix observation with inference and opinions. Team member are likely to get defensive at this point.

Focus on observations and make them the basis of your discussions. Clearly state when you're drawing an inference or stating an opinion.

Current usability practice focuses on recommendations but recommendation accountability is hard to establish. Recommendations should be treated like medical prescriptions: the consultant should do it sparingly and be help accountable for them.

Usability testing is about having a big tool-kit. Different tools uncover different information and mastering which tool to use when is critical.

Field Research

Get out of your office and into the environments of the people you are serving.

Reading
* Fortune Small Business on Microsoft
* Financial Times on Anthropologists at Intel, etc.
* Kodak enters the digital age

Comparing research methods
|Lab|validating product interfaces, need confidence in observing trends, finding requires less interpretation, are integrated into iterative process|
|Phone|exploring long-term activities, geographical distribution, information research tasks|
|Field|observing environment and context, artifacts are important, opportunity to see group interaction, highly transactional tasks, observations carry more weight|

(Think like an anthropologist)

How do you do it?

Facilitator:
* Leads the interview
* primary talker

Notetaker/Videographer
* sets up camera
* takes notes while recording time codes
* asks follow-up questions

Recruiting for field research is very similar to all other kinds of user testing. Be clear about setting expectations for participants. Let them know you will be shooting video. Create clear incentives like lunch. Finding people in different regions can be difficult it is just more to think about. The downside here is that cancellations are more costly.

Allow more time think you need to get from session to session. Give yourself a lunch break and limit yourself to three session a day, even if each session is only an hour. You must flex to their schedules.

Home	Work
Morning, lunch, after work	Between 9am-5pm
Weekends	Circadian rhythms of the office environment (meetings, etc.)

Protocol

Make the most of being in the field by probing the environment with particular focus on the artifacts. Also be prepared for greater improvisation than lab or phone interviews. There are many variables out of your control. Meeting, phone calls, and other people can all play a factor. This is frustrating but it is their normal environment and these variable should be taken into account.

Research Kit

Carry an envelope with all of your materials and keep it in one place.

When You're There

Be respectful! You are the guest in their world. Have one person introduce the situation while the other sets up the equipment. Confirm the expectations you set previously. Discuss length, use of video, and the subject to be discussed. Look around and see if there is something interesting that will impact what you are working on. Take pictures but be sure to ask first.

Follow best practices for interview-based research. Ensure confidentiality, don't ask leading questions, etc.

After the interviews

Debrief as quickly as possible with your colleague. Drive time is great for this purpose. Compare notes (and begin to process the narrative).

Outputs from field research

This is where field research shines. Create highlight videos to share with others. Use the photographs in your analysis. Show the context you captured, don't tell it.

[video example of a woman who uses her church directory, a paper planner, a small electronic organizer, a palm, and an access database]

Documenting Research

See James Deetz Death's Head, Cherub, Urn and Willow

Word files are ok but nobody reads them. Think about the diagram. Simplicity (and clarity) are the most important things to focus on.

Contextual Design is another good book that contains rich and telling visual documents. The danger evident here is that you can very quickly get overwhelmed.

The mental model is an example of this kind of data simplicity. Marc Rettig's mental model is particularly interesting because it is extensible.

(Think Edward Tufte.... no actually channel him when dealing with these issues)

The document should not only be simple, it should be approachable. The viewer should be able to immediately understand what they are looking at and be able to make meaningful comparisons.

(The document should also try to display multi-variate data.... ok my notes are just filtering the presentation through the recent Tufte event I attended)

Showing time will also give a sense of what people are doing. Think about desire lines beaten into the grass between poorly design sidewalks. This is the principle behind Amazon's "others also bought this" feature.

One More Thing: Vision Prototypes

Instead of writing reports in Word you start to build sketches that embody a set of recommendations. These loosely designed wireframes reflect the ideas without rigidly defining future design.

(what is the role of extreme programming or rapid prototyping in this process?)

Day Four

Designing for Experience

This presentation will be available for download

Think about the design of physical objects. The design must fit within all of the constraints and yet there are tens of thousands of designs that fit within the constraints.

> Design is a way to create things that fit a particular set of forces.

To accomplish, we our work we must first understand these forces and then fit a shape to that understanding.

Start by understanding people, context, use, business, technology, etc. Embody that understanding in stories, mockups, prototypes, etc, to create a shape as the first attempt.

This is a loose description but it represents a baseline. A clear process is not necessarily the best option. Instead allow for the "bag of tricks" to be flexible and learn to work together creatively to meet specific sets of constraints.

So what about designing for experience?

Exercise: You have one minute to design a vase.

Exercise: You have one minute to design a way for people to enjoy flowers in their home

Experience design is a name for enlarging scope to consider patterns of life, goals, activity, context, repeated use, learning, sharing, emotion, and more... It is enlarging the scope.

To do this well you must understand as much as possible about the context (both physical and temporal).

Carnegie Library of Pittsburgh case study

What will future information-rich environments look like?

When using information resources the challenge is to make it easy for people to find what they are looking for.

In libraries the three main aspects of the library developed independently based on ease of maintenance. Online resources, Human resources, and Print Res

The goal was tame complexity, not to eliminate it.

Researched by exploring, shadowing, and documenting the needs of users. Interviewed visitors, walked the library as a customer, etc.

[Example of library use experience]

Based on research, personas were created to keep track of the business requirements.

User go through -> Organizer to get to -> Materials/Activities in order to -> Use/Participate

Use portfolios to map actual experiences to find out where the problems are located. However, do not solve each problem, solve the larger problems that the small problems are symptoms of.

After the customer experience cycle was developed the rapid prototyping process began.

[project specifics]

Refine the lexicon to meet the needs of users not the organization and ensure semantic consistency.

When testing after the project was complete the process returned to post-it notes and affinity diagrams.

[Break]

The alignment wall

The job is to understand a number of things at once. After doing field research to learn the business you use tools to analyze the data.

Across the top of an alignment wall are notes about each task. Then you list the tasks themselves. Then actions / steps and then views of the screens that do these things. Additional functionality that isn't on this chart is unnecessary.

Then create workflow diagrams to understand the interaction between all the different roles involved in a process. Be sure to map interactions both with and separate from the application that determine the process. (social experiences like consulting another person or calling are very important here)

Keep "sticky-storming" to get to the first mockup of the new design. Iterate, iterate, iterate.

Always keep in mind the personas that were build on dimensions of significant difference.

Another process example

Bucket analysis. Make a spreadsheet with each row representing a person talked to. Columns should be names of controls (like mental model or a specific function). These names are derived from what people emphasized in interviews. Sort field data into buckets using this spreadsheet.

Reading up and down a column let's you understand everyone's perspective on that subject and reading across rows let's you understand the types of people you are dealing with.

This is also, in marketing speak, know as behavioral segmentation.

Another project

Used interviews to map stories from the transcript. Against the dimension of time you can map a users experience in a way that layers the important relationships and decision criteria.

If an interviewee has trouble verbalizing their experience draw it as they are talking. Bring a kit of visual aids that can be manipulated into a visual timeline so the speaker can use these tools to articulate things that they weren't otherwise able to articulate. Become a collaborator in constructing an accurate story of the experience. (I wonder what anthropologists think about this)

The strategy was based on these three steps

foundational insights -> strategic directives -> desired transformations

For each success criteria outline steps to improve these items immediately. Then make a vision prototype to tell a story about the web site of the future (three years out in this example).

To avoid stakeholder salivation over concrete examples create at least three different versions to communicate the ideas instead of the particular design.

Another another project

Make posters to have in the workplace that communicate the conclusions of the research.

Summary

Designing for experience is hard.

Recommended Recipe
* a simple, powerful, generally applicable process
* a big bag of methods and tools
* use the right tool for the right goal
* attend to the gaps, bridges, connections, relationships first, then get the artifacts and interfaces right
* work hard at facilitating collaboration