Library Instruction Tutorials: Bottom-Up Design Structures for maintenance

and scalability

Sean Cordes Instructional Technology Librarian, Iowa

State University

““As we designed the first Web sites and intranets… As we designed the first Web sites and intranets…

We could comfortably fit a model of the entire site We could comfortably fit a model of the entire site inside our heads … inside our heads …

At some point, the complexity of our sites At some point, the complexity of our sites overwhelmed us” overwhelmed us” 11

Peter Morville

A top down piece of mind

The top down jacket: A comfortable fit

• Historical web design model,ex. directory style-

Internet Library For Librarians http://www.itcompany.com/inforetriever/Yahoohttp://www.yahoo.com/

• Hierarchy, taxonomy model easy for librarians to visualize, understand, and relate too.

• Easy to subdivide labor, everyone has functions and tasks (many similar), implementations follow global specifications and restraints (but can diverge).

Top down: The low downContent and control

"And all the little Oysters stood"And all the little Oysters stoodAnd waited in a row.” And waited in a row.” 22 - Lewis - Lewis CarrollCarroll

““As we formulate our ideas and As we formulate our ideas and methods, we should be wary of methods, we should be wary of those who expound a one best those who expound a one best way” way” 33– Morville and Rosenfeld– Morville and Rosenfeld

Top down: The Conundrum

• many sites are too large for one individual or department to manage comprehensively

• specialization can cause disconnect from the ‘centralized’ big picture

• but specialization is often needed to manage diverse needs, tasks, decisions, of the org

• as decentralization increases data (and its meaning) become changeable from more points

Balancing the elephant““[Intra]nets tend to [Intra]nets tend to grow organically, with grow organically, with silos of content that silos of content that correspond to the correspond to the corporate org chart. corporate org chart.

Unfortunately, users Unfortunately, users usually don't have that usually don't have that org chart in mind when org chart in mind when they're looking for they're looking for information to help information to help them do their jobs….”them do their jobs….” 44

Lou RosenfeldLou Rosenfeld

Strategy formation

The organization

The information architect

A key to success?

The developer must pick a solution that opens structures, balancing the diverse needs of the system, its users, and stakeholders, over time.

A key goal? Finding a common ground so form, function, and feasibility can come together.

Bottom up design • Facets -

describing systems as meaningful forms, fashions, and fittings

• Specifications - the tool: what it is, what it does, where it does it, what are the limits?

• Information Ecologies -un-earth relevant design factors

(survey, interview, observe, test)

The spirit of the facetThe fundamental facets that Ranganathan developed.

5

PMEST, personality, matter, energy, space, time

• Personality—what the object is primarily “about.” This is considered the “main facet.”

• Matter—What it’s made out of• Energy—the processes or activities that take place

in relation to the object • Space—where the object happens or exists • Time—when the object occurs

A facet-nating example:

A book about “design of wooden furniture in 18th century America.” 6

Arlene Taylor• Personality—furniture • Matter—wood • Energy—design • Space—America • Time—18th century

The tutorial facet:

Some typical facets forming a library tutorial.

• Personality—using library service and tools• Matter—pixels, print • Energy—access, navigation, interaction• Space—on a screen, in a variety of physical

spaces, space independence• Time—anytime, time shifted

Specifications

Describe the tool:• what it is, • what it does, • where it does it, • what the limits are

Specifications: Form, fashion, and fit• What shape will the product take?• How will the language, layout, and

appearance be designed? What actions/interactions are required?

• How (well) will the product fit meet the organization’s current needs? What about tomorrow?

The form, fashion and fit of a tutorial largelydetermines its effectiveness and sustainability!

Specifications 101: Building the enchilada.1. Enchiladas are quite similar to burritos,

yet differ in content and flavor.

Specifications differ regarding: match of purpose, function, and form, the style of organization, fit with need

2. While a burrito is folded in order to make an envelope that encloses its contents, an enchilada has the tortilla wrapped around the substance, so as to make a cylinder.

The system around the information is recursive, here is there, there is no complete enclosure

3. Another variance is that a burrito is made with a flour tortilla whereas an enchilada is made with a corn tortilla.

Tutorial designs may differ in many ways, yet theparts form a cohesive whole

Usability Specs by Norman• Use the knowledge in the head• Make use of constraint – what’s possible• Make things visible - including the conceptual

model of the system • Users should be able to know what to do• Make sure the user can tell what’s going on

Donald Norman, The design of everyday Things8

Usability Specs by Shneiderman• Recognize diversity, explanations of symbols,

topics, and navigation options

• Strive for consistency with: menus, layout, capitalization, fonts, action sequences, tools functions

• Provide feedback, locations, actions, change

• Build in error prevention, make screens distinct, make it hard to make irreversible actions, anticipate errors.

Ben Schneiderman, Designing the User Interface9

Spec talk: Fashioning languageThe structures we design often reflect the

familiar and explicit. • language/jargon - corporate organizations

distribute documents, libraries circulate items.• explicit/implicit meaning – what is read is not

always what is meant• my familiar is not your familiar – language and

instruction driven by the audience perspective

Informational EcologiesSuccessful specifications

surface from……

Discovering ecological design factors(survey, interview, analyze, observe, test)

A diamond in the rough: Unearth enough about the system to make it better!

Why tutorials are unique1. Must often stand alone or as hybrid2. Cover complex concepts or tasks3. Require interaction or animation4. Represent organization mission5. Require high degree of accessibility 6. Digital tools to describe digital tools7. Can require frequent revision8. Can require coordination of input from many

sources9. Users and maintenance persons are often novices

• Scalability - make it bigger• Portability - make it malleable• Maintainability – make it manageable

Bottom up design structures

Scalability: The direct approachEffective file and directory structures provide expansion, identification, and chunking for…. • content concepts, (web site sections and

page titles),• functional objects (scripts, includes) and,• file types (style sheets, images, animations) Design structures with expansion in mind!

Scaling ContentText - Use relative font sizes (%, em, ex, larger)P {FONT-SIZE: 90%}

Graphics – Use the em property of CSS to make scalable graphics for better accessibilityIMG.120px {WIDTH: 7.5em; HEIGHT: 7.5em}

Fluid layouts – relative width margins are, best for reading and finding info, best use of screen size, preferred by users. Bernard and Larson, 2001.

DIV {WIDTH: 90%}

Expanding the grand design

• Includes - modular functionality for the whole

• Templates - carry the whole design fwd• Scripts - provide global functions• Relative widths - of table and css layouts

so text and objects expand and contract when the browser is resized.

• Minimize/Keep consistent page height across tutorial sequence.

Reach out and teach SomeoneExpand your reach:

• Send RSS updates about content changes

• Create a Podcast version

• Generate an alternate print version

• Add a Wiki or Blog function

• Make a portable version

Portability - make mine vanilla• Text is for text

• Graphics are for graphics

• Reduce noise - If you don’t need it, don’t use it

• Design cross browser apps – see IBM Dev Workshttp://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/

Portability: Tuning the port• Reduce html tags

Absolute html optimizer http://www.alentum.com/

HTML-Optimizer www.tonbrand.ni

Do it yourselfhttp://webreference.com/authoring/languages/html/optimize/

• Reduce image size: use vectors adjust color depth, remove unused color, compress

• Separate content from design CSS, Metadata, html

Whose your meta-daddy?

Technical means to describe the portable product

• content - text, image, .mp3, .wav

• design – html, css, js, php,

• concept – metadata, Dublin Core, XML, RDF,SOAP

Tutorial page for printer• content - image of a printer, text on web

page

• design - font size 12, face Arial, table 90%

• concept – instruction, technical tool, transforms digital content to print, distributed, interacts with computer, database

Centralizing core conceptsIn the lobby, each row of workstations is networked to the laser printer at the end of that row.

Workstationis_part_of value = networkis_part_of value = lobbyhas_service value = printinghas_tech value = printer

Use the concepts and relationships to build navigation and context.

Especially important when porting from static html to database driven systems.

There’s no birthday party…

• Separate content & design• Integrate text & image• Modularize• Automate & reuse• Make controls explicit• Fit content to view area• Make points brief and clear

If we don’t get some cool rules ourselves pronto…we’ll just be bogus too!

• Stay current• Openly innovate• Cherry pick your techs• Build partnerships• Enlist champions• Share experiences

Notes1. Caroll, Lewis. Alice’s Adventure in Wonderland. Peter Pauper Press, 1953.2. Morville, Peter. Bottoms Up: Designing complex, adaptive systems, New Architect

December 20023. Morville, Peter and Rosenfeld, Louis. Information Architecture for the World Wide Web,

2nd Edition, 2002.4. Evans, Meryl K.. Interviews: Peter Morville and Lou Rosenfeld, Digital Web Magazine,

December 2002. http://www.digital web.com/articles/peter_morville_and_lou_rosenfeld/5. Steckels, Mike. Ranganathan for IA’s, Boxes and Arrows. October 2002.

http://www.boxesandarrows.com/archives/ranganathan_for_ias.php6. Morville, Peter. Faceted Classification. New Architect, December 2002.

http://www.newarchitectmag.com/documents/s=7733/na1202b/index3.html7. Taylor, Arlene G.. The organization of information . Libraries Unlimited, 2004.8. Norman, Donald. The design of everyday Things, Doubleday, 1988.9. Schneiderman, Ben. Designing the User Interface. Addison-Wesley, 1997