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

Library Instruction Tutorials:
Bottom-Up Design Structures for maintenance
and scalability
Sean Cordes
Instructional Technology Librarian, Iowa
State University
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” 1
Peter Morville
The top down jacket:
A comfortable fit
• Historical web design model,
ex. directory styleInternet Library For Librarians
http://www.itcompany.com/inforetriever/
Yahoo
http://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 down
Content and control
"And all the little Oysters stood
And 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
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
grow organically, with
silos of content that
correspond to the
corporate org chart.
Strategy
formation
The organization
Unfortunately, users
usually don't have that
org chart in mind when
they're looking for
information to help
them do their jobs….” 4
Lou Rosenfeld
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 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
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 largely
determines its effectiveness and sustainability!
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.
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 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
Informational Ecologies
Successful 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 unique
1.
2.
3.
4.
5.
6.
7.
8.
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
9. Users and maintenance persons are often
novices
Bottom up design structures
• Scalability - make it bigger
• Portability - make it malleable
• Maintainability – make it manageable
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!
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%}
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 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
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
Works
http://www-128.ibm.com/developerworks/web/library/waie2mozgd/
Portability: Tuning the port
• Reduce html tags
Absolute html optimizer
http://www.alentum.com/
HTML-Optimizer
www.tonbrand.ni
Do it yourself
http://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 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 = network
is_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.
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
Notes
1. Caroll, Lewis. Alice’s Adventure in Wonderland. Peter Pauper Press, 1953.
2. Morville, Peter. Bottoms Up: Designing complex, adaptive systems, New Architect
December 2002
3. 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.php
6. Morville, Peter. Faceted Classification. New Architect, December 2002.
http://www.newarchitectmag.com/documents/s=7733/na1202b/index3.html
7. 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