Once Upon an Interface Designer Storytelling and Information

Once Upon an Interface Designer: Storytelling and Information Architecture Abbe Don Interactive, Inc. October 9, 2001 © 2001 abbe don interactive, inc

Approach to User Interface Design points of view politics of information Information Architecture Interaction Design scenarios Media Design Storytelling (narrative structures) 1/2/2022 © 2001 abbe don interactive, inc 2

Issues FUnderstand the relationships between information architecture, interaction design and media design. FExamine how organizational structures and politics affect information architecture and thereby the overall design process and the final user interface. FRe-enforce the importance of needs assessment, user scenarios, user requirements, and clear product definitions, business goals, etc. 1/2/2022 © 2001 abbe don interactive, inc 3

No Soup, Just Matzo Balls 1/2/2022 © 2001 abbe don interactive, inc 4

ACCESS PRESS F Richard Saul Wurman F Access Guides FGuide books for cities F Information organized by location, colored coded by category FWhere am I now? FWhat’s near by? F Ways to Organize Information F Location F Alphabetical F Time F Category F Hierarchy/Continuum (small to large, dark to light) 1/2/2022 © 2001 abbe don interactive, inc 5

Guides: Project Background 1 FCollaboration between Apple Computer and Grolier’s Americana Encyclopedia FSponsored by Education Marketing Group FConducted first by “New Media” Group and User Interface Group FCompleted by Information Architecture and Access Group FTechnical Agenda: information retrieval algorithms for a “next move” generator FInterface Agenda: innovative browsing techniques for a “hypermedia” database 1/2/2022 © 2001 abbe don interactive, inc 6

Guides: Project Background 2 FPhase 1: 1987 -1988 FTim Oren FGitta Salomon FKristee Kreitman (now Rosendahl) FPhase 2: summer, 1988 FTim Oren FKristee Kreitman (now Rosendahl) FAbbe Don FPhase 3: 1989 to 1991 FTim Oren FAbbe Don FBrenda Laurel 1/2/2022 © 2001 abbe don interactive, inc 7

Guides: Original Content & Sources FArticles (100 s, Grolier’s Encyclopedia) FIndexed with 144 control terms in a topic, sub-subtopic hierarchy FTransportation: Wagon Trains: Conestoga FArticles could have multiple terms assigned FOther media types not indexed FTimeline (1, hand crafted in-house) FHistorical Documents (5, Bettman Archive) FPictures (25, Bettman Archive) FMaps (6, production company) FSounds (5, Folkways Music) FTours (5, production company) FGuides (8, hand crafted in-house) FCould only recommend articles 1/2/2022 © 2001 abbe don interactive, inc 8

Guides: Original Information Architecture Main Articles Guides Tours Sounds Maps Pictures Historical Docs Timeline 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. 1/2/2022 © 2001 abbe don interactive, inc 9

Guides: User Testing 1988 FNavigational dead ends led to frustration FStudents attributed more intelligence to Guides than was actually programmed FStudents 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. ” FNo help available FNo “search” available: “I want an article about Abraham Lincoln and I can’t just go to it. ” 1/2/2022 © 2001 abbe don interactive, inc 10

Guides: Revised Content & Sources FArticles (100 s, Grolier’s Encylopedia) FIndexed with 144 control terms in a topic, sub-subtopic hierarchy FTransportation: Wagon Trains: Conestoga FArticles could have multiple terms assigned FIndexed all other media types FTimeline (removed) FHistorical Documents (removed) FPictures (100 s, California State Library) FMaps (6, production company) FSounds (5, Folkways Music) FTours (5, production company) FVideo (added new media type) 1/2/2022 © 2001 abbe don interactive, inc 11

Guides: New Information Architecture Articles Pictures Sounds Maps Video Tours 1/2/2022 © 2001 abbe don interactive, inc 12

Guides: Revised Characters F 3 Content Characters in period dress FSettler Woman FFrontiersman FNative American FAlways present in the interface: gestures revealed level of “interest” FRecommended all media types based on “point of view” algorithm with weighted terms FAdded “point of view” video stories for each character based on diaries and oral histories F 1 System Character in contemporary dress FProvided “context sensitive” help FRecommended all media types based on emergent browsing pattern of the user 1/2/2022 © 2001 abbe don interactive, inc 13

Guides: Additional Interface Features FSearch Screen FIndex FCustom Guide Workshop Fdesign your own Guide 1/2/2022 © 2001 abbe don interactive, inc 14

Guides Project: Roll Video 1/2/2022 © 2001 abbe don interactive, inc 15

Guides Project: 20/20 Hindsight F 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. F Dynamically generated content and recommendations based on user navigation and choices have become accepted practice. F Expanded to “social” filtering based on a more distributed model of multiple users. F Characters are still little understood as representations for interface agents. F Search interfaces are still not well understood by many end users. F Systems still tend to be over-designed based on needs of designers not users. 1/2/2022 © 2001 abbe don interactive, inc 16

We Make Memories 2. 0 1/2/2022 © 2001 abbe don interactive, inc 17

We Make Memories: Conceptual Model Anti. Semitism Fashion Great. Grandmother Education Judaism Romance Family Mother Travel Business Daughter Design 1/2/2022 © 2001 abbe don interactive, inc 18

WMM: Information Architecture FTime F 5 year intervals from 1890 to 1990 FTopics F 25 idiosyncratic “control terms” relevant to family history FSpeaker FGreat-grandmother FGrandmother FMother FDaughter 1/2/2022 © 2001 abbe don interactive, inc 19

WMM: Database Design FEach time period indexed with a “hot topic” from the control term list FEach story indexed with multiple terms FEach story indexed by speaker 1/2/2022 © 2001 abbe don interactive, inc 20

WMM: Next Story Algorithm F What time period is the user in? F What is the “hot topic” for that time period? F Which speaker was selected? F Find a story about the “hot topic” from the selected speaker. F Check to see if story has been seen. FIf not seen already, play story. FIf seen already, play another story from that speaker on that topic. FIf no more stories on that topic, go to next most related topic. FSet “topic roll over” to true 1/2/2022 © 2001 abbe don interactive, inc 21

WMM: Original Interaction/Media Design Annie Rita Picture Charlotte Abbe Text 1/2/2022 © 2001 abbe don interactive, inc 22

WMM: Final Interaction/Media Design 1/2/2022 © 2001 abbe don interactive, inc 23

WMM: Final Interaction/Media Design 1/2/2022 © 2001 abbe don interactive, inc 24

Edward Don & Company 1/2/2022 © 2001 abbe don interactive, inc 25

Edward Don & Company F 80 year-old, privately held family business F 6 distribution centers F $400 million in sales F 20, 000 stock items F 1000 s of factory direct items F 100 s of vendors F 100 s of Customers with 1000 s of locations FNational franchises FHotels and Cruise Ships FInstitutions FSole proprietors 1/2/2022 © 2001 abbe don interactive, inc 26

Project Phases F Initial Discovery F Interviewed key stakeholders in company F Observed day-to-day production in marketing group F Interviewed marketing group service vendors F Best Practices Research F Interviewed other distribution businesses FGrainger FReliable FStaples/Quill F Interviewed food service equipment & supplies vendors F Interviewed key vendors in Digital Asset Management and dynamic web and print publishing systems 1/2/2022 © 2001 abbe don interactive, inc 27

Project Phases F Red Flags F Web/e-commerce was being handled by internal IT departments F Print was handled by internal marketing/advertising F Vendors specialized or were optimized for web or print but not well integrated for both F White Paper and vision statement for dynamic publishing system for print and web acknowledging that challenges ahead were both technical and organizational F Detailed Requirements for Print and Web Generated 1/2/2022 © 2001 abbe don interactive, inc 28

Project Phases F Consensus Building Internally F Internal Web Team Formed F Internal DAM Project Team Formed F Parallel Development FRFP Written FVendors Evaluated FBudgets and Schedules Established FVendors Selected 1/2/2022 © 2001 abbe don interactive, inc 29

Project Phases F Project Kickoffs F Web Rapid Solutions Workshop with Ernst & Young February, 2000 F DAM proceeded at a much slower pace, focused initially on training and work flow beginning March, 2000 F Weekly Status Meetings Held F Monthly Executive Team Meetings Held F Projects Quickly Diverged F Web site had a hard deadline of May, 2000 for the National Restaurant Association show F Web site team optimized for quick development F DAM team addressed systemic issues that had been ignored for years F Yet, digital images were required for the web 1/2/2022 © 2001 abbe don interactive, inc 30

System Components Purchasing Warehouse Inventory AS 400 Invoices Payments Sales Force Automation DAM 1/2/2022 App Server templates Web ecommerce Quark Express Extensions Print © 2001 abbe don interactive, inc 31

Taxonomy (catalog at www. don. com) FKITCHEN FCOOKWARE FStock Pots Fheavy weight Fstandard weight Fstainless steel Flids FSauce Pots Fheavy weight Fstandard weight Flids 1/2/2022 © 2001 abbe don interactive, inc 32

Manage the Business vs Communicate With Customers F AS 400 optimized for managing the day to day operations of the business F category/class/sub-subclass taxonomy F Merchandisers were responsible for an entire category F 13 categories, 10 merchandisers FEach category managed in its own way FNo consistency FTabletop is an “uber” category composed of the dinnerware, flatware, glassware categories F DAM needed to be designed to support 3 primary print vehicles F Resource Catalog (merchandising/ordering) F Monthly Catalog (merchandising) F Custom Order Guides (ordering) 1/2/2022 © 2001 abbe don interactive, inc 33

Merchandising versus Ordering FMerchandising F Show products in context and in use: high production value color photography F Show like products together with food styling, ambiance, etc. F Table Top: shows flatware, chinaware, glassware, linens F Descriptive copy + product attributes F Unpriced FOrdering F Single items: often with custom names in custom categories especially for national franchises F Black and white line drawing may be more appropriate F “Just the facts” = “Just the attributes” F Pricing 1/2/2022 © 2001 abbe don interactive, inc 34

The Big False Assumptions FThe AS 400 classification system was accurate and consistent FThe AS 400 classification system contained all the business logic necessary to run the business, including generating marketing communications materials FEY built web architecture and databased on AS 400 system FImage, Inc. assumed AS 400 classification as basis of DAM database design 1/2/2022 © 2001 abbe don interactive, inc 35

The Bearer of Bad News FClass/subclass was ok FThings below that were a mess FA lot of “human translation” was done between the AS 400 and the marketing communications print materials to get them into “customer ready” form FThe internal owner of the classification system dug in his heels FThe two outside vendors blamed each other, denied responsibility and were reluctant to fix the problem 1/2/2022 © 2001 abbe don interactive, inc 36

Resolving the Issues F Could barely talk about the problem because everyone had a different vocabulary and understanding of the issues F Created detailed HTML page mockups (live demo) F AS 400 taxonomy changed to category/subcategory/class/subclass F Entire taxonomy was reviewed and edited F Marketing Communications “presentation” model which was previously thought to correspond to “class” was not in synch. F Business Rules project initiated to synchronize “managing the business” and “communicate with customers. ” 1/2/2022 © 2001 abbe don interactive, inc 37

DAM Challenges FEach item has more than one representation affiliated with it FPrimary photo FAlternate views/angles FLine drawing FGroup shot of the brand or pattern FMerchandising shot of the pattern in use, depicted with other items, possibly in the same category and possibly not FEach category, subcategory, and class requires different attributes 1/2/2022 © 2001 abbe don interactive, inc 38

Web Challenges FClasses of users have different needs, different levels of access FCustomer Users F Corporate F Regional Managers F Unit Manager F Multiple users within a unit--general F Multiple users within a unit based on categories F Administrators FInternal Users F Administrators F Sales Team F Customer Service 1/2/2022 © 2001 abbe don interactive, inc 39

Web Challenges FOverall web information architecture, navigation and interaction design FUse Cases revealed many flaws in the EY database design FUser does x; system responds y FProvides detailed interaction model FIndicates how many screens/pages required FIndicates what needs to be on each page FSpecific taxonomy issues as they relate to product classification FSynchronize the search feature 1/2/2022 © 2001 abbe don interactive, inc 40

Web Challenges FSetting up order guide with customerdefined categories FSetting up order guide with customerdefined product names FSetting up and maintaining favorites FSupporting users as they move from “customized” view to “general” view FSynchronizing ordering, picking, inventory availability notifications, shipping info, etc. 1/2/2022 © 2001 abbe don interactive, inc 41