Library Instruction Tutorials: Bottom-Up Design Structures for maintenance and scalability

1. Library Instruction Tutorials:Bottom-Up Design Structures for maintenance and scalability Sean Cordes Instructional Technology Librarian, Iowa State University

2. A top down piece of mind “As we designed the first Web sites and intranets… We could comfortably fit a model of the entire site inside our heads … At some point, the complexity of our sites overwhelmed us” 1Peter Morville

3. 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).

4. Top down: The low down Content and control "And all the little Oysters stoodAnd waited in a row.” 2 - Lewis Carroll “As we formulate our ideas and methods, we should be wary of those who expound a one best way” 3– Morville and Rosenfeld

5. 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

6. Balancing the elephant “[Intra]nets tend to grow organically, with silos of content that correspond to the corporate org chart. Unfortunately, users usually don't have that org chart in mind when they're looking for information to help them do their jobs….”4Lou Rosenfeld Strategy formation The organization The information architect

7. 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.

8. 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)

9. The spirit of the facet The 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

10. 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

11. 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

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

13. 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 largely determines its effectiveness and sustainability!

14. Specifications 101: Building the enchilada. • 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 • 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 • 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 acohesive whole

15. 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

16. 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

17. Spec talk: Fashioning language The 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

18. Informational Ecologies Successful specificationssurface from…… Discovering ecological design factors(survey, interview, analyze, observe, test) A diamond in the rough: Unearth enough about the system to make it better!

19. Why tutorials are unique • Must often stand alone or as hybrid • Cover complex concepts or tasks • Require interaction or animation • Represent organization mission • Require high degree of accessibility • Digital tools to describe digital tools • Can require frequent revision • Can require coordination of input from many sources • Users and maintenance persons are often novices

20. Bottom up design structures • Scalability - make it bigger • Portability - make it malleable • Maintainability – make it manageable

21. Scalability: The direct approach Effective 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!

22. Scaling Content Text - Use relative font sizes (%, em, ex, larger) P { FONT-SIZE: 90%} Graphics – Use the em property of CSS to make scalable graphics for better accessibility IMG.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%}

23. 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.

24. Reach out and teach Someone Expand 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

25. 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/

26. Portability: Tuning the port • Reduce html tagsAbsolute 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

27. 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

28. 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

29. Centralizing core concepts In the lobby, each row of workstations is networked to the laser printer at the end of that row. Workstation is_part_of value = networkis_part_of value = lobby has_service value = printing has_tech value = printer Use the concepts and relationships to build navigation and context. Especially important when porting from static html to database driven systems.

30. 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

31. 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

32. Notes • Caroll, Lewis. Alice’s Adventure in Wonderland. Peter Pauper Press, 1953. • Morville, Peter. Bottoms Up: Designing complex, adaptive systems, New Architect December 2002 • Morville, Peter and Rosenfeld, Louis. Information Architecture for the World Wide Web, 2nd Edition, 2002. • 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/ • Steckels, Mike. Ranganathan for IA’s, Boxes and Arrows. October 2002. http://www.boxesandarrows.com/archives/ranganathan_for_ias.php • Morville, Peter. Faceted Classification. New Architect, December 2002. http://www.newarchitectmag.com/documents/s=7733/na1202b/index3.html • Taylor, Arlene G.. The organization of information . Libraries Unlimited, 2004. • Norman, Donald. The design of everyday Things, Doubleday, 1988. • Schneiderman, Ben. Designing the User Interface. Addison-Wesley, 1997