Once Upon an Interface Designer: Storytelling and Information Architecture Abbe Don Abbe Don...

Once Upon an Interface Designer:

Storytelling and

Information Architecture

Abbe Don

Abbe Don Interactive, Inc.

October 9, 2001

04/21/23 © 2001 abbe don interactive, inc 2

Storytelling(narrative structures)

Information Architecture

Approach to User Interface Design

Interaction Design

MediaDesign

points of view

politics of information

scenarios


Issues

Understand the relationships between information architecture, interaction design and media design.

Examine how organizational structures and politics affect information architecture and thereby the overall design process and the final user interface.

Re-enforce the importance of needs assessment, user scenarios, user requirements, and clear product definitions, business goals, etc.


No Soup, Just Matzo Balls


ACCESS PRESSRichard Saul Wurman

Access GuidesGuide books for cities Information organized by location, colored coded by

categoryWhere am I now?What’s near by?

Ways to Organize Information Location

Alphabetical

Time

Category

Hierarchy/Continuum (small to large, dark to light)


Guides: Project Background 1Collaboration between Apple Computer and

Grolier’s Americana Encyclopedia

Sponsored by Education Marketing Group

Conducted first by “New Media” Group and User Interface Group

Completed by Information Architecture and Access Group

Technical Agenda: information retrieval algorithms for a “next move” generator

Interface Agenda: innovative browsing techniques for a “hypermedia” database


Guides: Project Background 2Phase 1: 1987-1988

Tim Oren

Gitta Salomon

Kristee Kreitman (now Rosendahl)

Phase 2: summer, 1988Tim Oren

Kristee Kreitman (now Rosendahl)

Abbe Don

Phase 3: 1989 to 1991Tim Oren

Abbe Don

Brenda Laurel


Guides: Original Content & SourcesArticles (100s,Grolier’s Encyclopedia)

Indexed with 144 control terms in a topic, subtopic, sub-subtopic hierarchyTransportation:Wagon Trains: ConestogaArticles could have multiple terms assignedOther media types not indexed

Timeline (1, hand crafted in-house)

Historical Documents (5, Bettman Archive)

Pictures (25, Bettman Archive)

Maps (6, production company)

Sounds (5, Folkways Music)

Tours (5, production company)

Guides (8, hand crafted in-house)Could only recommend articles


Guides: Original Information Architecture

Main

Articles Guides Tours MapsSounds PicturesHistorical

DocsTime-line

Information Architecture was based on how and where the data was produced, creating media ghettoes which made it difficult or impossible to navigate from one medium to another.


Guides: User Testing 1988

Navigational dead ends led to frustration

Students attributed more intelligence to Guides than was actually programmed

Students attributed emotional intelligence to Guides: “I didn’t take the Guide’s suggestion so she got mad and left. If I take her suggestion, then she’ll stay.”

No help available

No “search” available: “I want an article about Abraham Lincoln and I can’t just go to it.”


Guides: Revised Content & SourcesArticles (100s,Grolier’s Encylopedia)

Indexed with 144 control terms in a topic, subtopic, sub-subtopic hierarchyTransportation:Wagon Trains: ConestogaArticles could have multiple terms assignedIndexed all other media types

Timeline (removed)

Historical Documents (removed)

Pictures (100s, California State Library)

Maps (6, production company)

Sounds (5, Folkways Music)

Tours (5, production company)

Video (added new media type)


Guides: New Information Architecture

Maps

SoundsPictures

Video

Articles

Tours


Guides: Revised Characters

3 Content Characters in period dressSettler Woman

Frontiersman

Native American

Always present in the interface: gestures revealed level of “interest”

Recommended all media types based on “point of view” algorithm with weighted terms

Added “point of view” video stories for each character based on diaries and oral histories

1 System Character in contemporary dressProvided “context sensitive” help

Recommended all media types based on emergent browsing pattern of the user


Guides: Additional Interface Features

Search Screen

Index

Custom Guide Workshop design your own Guide


Guides Project: Roll Video


Guides Project: 20/20 Hindsight

Information architecture continues to be influenced by “how” the data is produced or “how” a company is organized rather than the best way to communicate with end users.

Dynamically generated content and recommendations based on user navigation and choices have become accepted practice. Expanded to “social” filtering based on a more distributed

model of multiple users.

Characters are still little understood as representations for interface agents.

Search interfaces are still not well understood by many end users.

Systems still tend to be over-designed based on needs of designers not users.


We Make Memories 2.0


We Make Memories: Conceptual Model

Great-Grandmother

Mother

Grandmother

Daughter

Education

Family

Romance

BusinessJudaism

Travel

Fashion

Design

Anti-Semitism


WMM: Information Architecture

Time5 year intervals from 1890 to 1990

Topics25 idiosyncratic “control terms” relevant to family

history

SpeakerGreat-grandmother

Grandmother

Mother

Daughter


WMM: Database Design

Each time period indexed with a “hot topic” from the control term list

Each story indexed with multiple terms

Each story indexed by speaker


WMM: Next Story Algorithm

What time period is the user in?

What is the “hot topic” for that time period?

Which speaker was selected?

Find a story about the “hot topic” from the selected speaker.

Check to see if story has been seen. If not seen already, play story.

If seen already, play another story from that speaker on that topic.

If no more stories on that topic, go to next most related topic.

Set “topic roll over” to true


WMM: Original Interaction/Media Design

Text

Annie

Rita

Charlotte

Abbe

Picture


WMM: Final Interaction/Media Design


Edward Don & Company


Edward Don & Company

80 year-old, privately held family business

6 distribution centers

$400 million in sales

20,000 stock items

1000s of factory direct items

100s of vendors

100s of Customers with 1000s of locations

National franchises

Hotels and Cruise Ships

Institutions

Sole proprietors


Project Phases Initial Discovery

Interviewed key stakeholders in company

Observed day-to-day production in marketing group

Interviewed marketing group service vendors

Best Practices Research Interviewed other distribution businesses

Grainger

Reliable

Staples/Quill

Interviewed food service equipment & supplies vendors

Interviewed key vendors in Digital Asset Management and dynamic web and print publishing systems


Project Phases Red Flags

Web/e-commerce was being handled by internal IT departments

Print was handled by internal marketing/advertising

Vendors specialized or were optimized for web or print but not well integrated for both

White Paper and vision statement for dynamic publishing system for print and web acknowledging that challenges ahead were both technical and organizational

Detailed Requirements for Print and Web Generated


Project Phases Consensus Building Internally

Internal Web Team Formed

Internal DAM Project Team Formed

Parallel Development

RFP Written

Vendors Evaluated

Budgets and Schedules Established

Vendors Selected


Project Phases Project Kickoffs

Web Rapid Solutions Workshop with Ernst & Young February, 2000

DAM proceeded at a much slower pace, focused initially on training and work flow beginning March, 2000

Weekly Status Meetings Held

Monthly Executive Team Meetings Held

Projects Quickly Diverged Web site had a hard deadline of May, 2000 for the National

Restaurant Association show

Web site team optimized for quick development

DAM team addressed systemic issues that had been ignored for years

Yet, digital images were required for the web


System Components

AS400

Purchasing

WarehouseInventory

InvoicesPayments

Sales ForceAutomation

Web ecommerce

App ServertemplatesDAM

Print

QuarkExpress

Extensions


Taxonomy (catalog at www.don.com)

KITCHENCOOKWARE

Stock Potsheavy weight

standard weight

stainless steel

lids

Sauce Potsheavy weight

standard weight

lids


Manage the Business vs Communicate With Customers

AS400 optimized for managing the day to day operations of the business category/class/subclass/sub-subclass taxonomy

Merchandisers were responsible for an entire category

13 categories, 10 merchandisers

Each category managed in its own way

No consistency

Tabletop is an “uber” category composed of the dinnerware, flatware, glassware categories

DAM needed to be designed to support 3 primary print vehicles Resource Catalog (merchandising/ordering)

Monthly Catalog (merchandising)

Custom Order Guides (ordering)


Merchandising versus Ordering

Merchandising Show products in context and in use: high production value

color photography

Show like products together with food styling, ambiance, etc.

Table Top: shows flatware, chinaware, glassware, linens

Descriptive copy + product attributes

Unpriced

Ordering Single items: often with custom names in custom categories

especially for national franchises

Black and white line drawing may be more appropriate

“Just the facts” = “Just the attributes”

Pricing


The Big False Assumptions

The AS400 classification system was accurate and consistent

The AS400 classification system contained all the business logic necessary to run the business, including generating marketing communications materials

EY built web architecture and database based on AS400 system

Image, Inc. assumed AS400 classification as basis of DAM database design


The Bearer of Bad News

Class/subclass was ok

Things below that were a mess

A lot of “human translation” was done between the AS400 and the marketing communications print materials to get them into “customer ready” form

The internal owner of the classification system dug in his heels

The two outside vendors blamed each other, denied responsibility and were reluctant to fix the problem


Resolving the Issues

Could barely talk about the problem because everyone had a different vocabulary and understanding of the issues

Created detailed HTML page mockups (live demo)

AS400 taxonomy changed to category/subcategory/class/subclass

Entire taxonomy was reviewed and edited

Marketing Communications “presentation” model which was previously thought to correspond to “class” was not in synch.

Business Rules project initiated to synchronize “managing the business” and “communicate with customers.”


DAM Challenges

Each item has more than one representation affiliated with itPrimary photo

Alternate views/angles

Line drawing

Group shot of the brand or pattern

Merchandising shot of the pattern in use, depicted with other items, possibly in the same category and possibly not

Each category, subcategory, and class requires different attributes


Web ChallengesClasses of users have different needs,

different levels of access

Customer Users Corporate

Regional Managers

Unit Manager

Multiple users within a unit--general

Multiple users within a unit based on categories

Administrators

Internal Users Administrators

Sales Team

Customer Service


Web Challenges

Overall web information architecture, navigation and interaction designUse Cases revealed many flaws in the EY

database design

User does x; system responds y

Provides detailed interaction model

Indicates how many screens/pages required

Indicates what needs to be on each page

Specific taxonomy issues as they relate to product classification

Synchronize the search feature


Web Challenges

Setting up order guide with customer-defined categories

Setting up order guide with customer-defined product names

Setting up and maintaining favorites

Supporting users as they move from “customized” view to “general” view

Synchronizing ordering, picking, inventory availability notifications, shipping info, etc.

Once Upon an Interface Designer: Storytelling and Information Architecture Abbe Don Abbe Don...

Documents

Transcript of Once Upon an Interface Designer: Storytelling and Information Architecture Abbe Don Abbe Don...