DESIGNING LIBRARY WEBSITES

1
DESIGNING LIBRARY WEBSITES
2
Project Management

• Planning
• Organizing
• Staffing
• Directing
• Controlling

3
Planning

• What are you trying to accomplish with your
  website?
• Who will use it?
• How will you know if you are successful?
• Ultimate goal should be customer service

4
Who will develop your site?

• In-house vs. Outsourcing

5
Whos the Boss?

• Create a small committee that will be in charge
  of overall development.
• Assign a project director who will have authority
  to make final decisions.
• Get the right people involved, right from the
  beginning.
• Focus Group?

6
Whos the Boss?

• If youre using an outside development firm,
  assign one in-house person to be the liaison
  between the library and the outside firm.
• Funnel all communications through the liaison.

7
Come up with an overall look and feel for your
site

• All Business or less formal?
• Different look/feel for Kids or Teen pages?
  (NYPL)
• Color Schemes?
• Fonts?
• Lots of graphics or mostly text?

8
Plan of Action

• Come up with a multi-step procedure to get you
  from idea stage to production stage.
• Consider an accompanying detailed timeline.
• Example

9
Critique Existing Sites

• Look at other sites (library and non-library).
• Identify elements you like and dislike.
• Come up with a wish list

10
Brainstorming

• White Boards
• Flip Charts
• Discussion

11
Putting it All Together

• Create Web Architecture Blueprints
• Use Flowcharts or Tree Diagrams
• Create storyboards

12
Mockup Pages

• Come up with 2 or 3 overall designs. For each
• Create a sample home page
• Create a sample sub-page
• Illustrates color schemes, navigation schemes,
  etc.
• Can be HTML pages or just a large jpeg file.
• Work it down to one design and tweak it as
  necessary.

13
Staging Server

• A separate server used just for
  development/testing
• For internal use only
• Use old PCs, set up with LAMP

14
Its Not Set in Stone

• Try to commit to a design choice, BUT you can
  (and should) constantly tweak your website.
• BarnesNoble site
• 12/98 3/00 8/00 2/03 7/03 Present Day

15
Navigation

• Web Navigation
• Tells us HOW to use the site.
• Tells us WHAT is on the site.
• Gives us CONFIDENCE in the people who designed
  the site.

16
Navigation Scheme

• Know all the content you want to organize
• Create Hierarchy
• Come up with a way to classify and label the
  information
• Librarians are already experts at doing this

17
Navigation Scheme

• Web Server Considerations
• Dont dump all your content in one directory
• Make subdirectories to correspond to navigation
  heirarchy
• Put all scripts in a folder outside your root
  directory
• Put all images in a separate folder

18
Navigation Scheme

• Different Types of Schemes
• Departmental (related to physical library e.g.,
  Adult, Childrens, etc.)
• Topic Oriented
• Task oriented (How do I?)
• Hybrid

19
Navigation Scheme

• Labeling Conventions
• Main, Main Page, Home, Home Page
• Search, Find, Browse
• Contact, Contact Us, Feedback
• News, Whats New
• About, About Us, About ltlibrary namegt, Who we are

20
Navigation Scheme

• Consistency Throughout Site
• Intuitive, easy to use
• Take a users perspective, not a library
  perspective
• Avoid library talk and acronyms
• Where to put online databases?

21
Think About the Future

• Expandability
• Can you add additional navigation elements or
  functionality without disrupting existing
  navigation scheme?
• Amazon (1999)
• Amazon (2005)

22
Navigation

• Persistent Navigation
• Appears on all pages
• Should contain 4 elements
• Site ID (e.g., logo)
• Sections (e.g., About, Childrens, Teens,
  Calendars, etc.)
• A way to get back home.
• Utilities (Help, site map, contact, etc.)

23
Navigation

• Persistent Navigation
• Users should always know theyre still on your
  site
• Even sub-pages 4-levels deep should have the same
  persistent navigation.
• Often difficult when a library catalog is
  involved
• link

24
Navigation

• Page names are the street signs of the web
• The page name needs to be prominent and
  consistently placed on the page
• The name needs to match what I clicked
• Steve Krug, Dont Make Me Think A common
  sense approach to web usability (Indianapolis,
  IN New Riders, 2000) 72.

25
Navigation

• Consider using breadcrumbs
• Consistent placement (at the top)
• Use smaller font (to indicate this is just a
  utility)
• Boldface the last item
• Dont use them instead of a page name
• Link1 link2

26
Navigation

• Consider using tabs
• Everyone can relate it to the real world
• Only works effectively if you have a limited
  number of tabs (e.g., remember the Amazon
  example)

27
Navigation

• Consider using color coding
• A way to group similar items.
• Be careful, not all users will notice.
• Can make a page look to busy
• link

28
Content Guidelines

• We dont read web pages, we scan them.
• Jakob Nielsen, www.useit.com

29
Content Guidelines

• Be Concise
• Avoid Happy Talk
• Self-congratulatory or excessively long welcome
  messages
• Avoid long and wordy instructions (link)
• Optimize Web pages for scanning not reading

30
Example

• Start with this message
• Nebraska is filled with internationally
  recognized attractions that draw large crowds of
  people every year, without fail. In 1996, some of
  the most popular places were Fort Robinson State
  Park (355,000 visitors), Scotts Bluff National
  Monument (132,166), Arbor Lodge State Historical
  Park Museum (100,000), Carhenge (86,598), Stuhr
  Museum of the Prairie Pioneer (60,002), and
  Buffalo Bill Ranch State Historical Park
  (28,446).

31
Example

• Same text, but stripped down to a more concise
  format
• In 1996, six of the best-attended attractions in
  Nebraska were Fort Robinson State Park, Scotts
  Bluff National Monument, Arbor Lodge State
  Historical Park Museum, Carhenge, Stuhr Museum
  of the Prairie Pioneer, and Buffalo Bill Ranch
  State Historical Park.

32
Example

• Optimized for the web (scanning)
• In 1996, six of the most-visited places in
  Nebraska were
• Fort Robinson State Park
• Scotts Bluff National Monument
• Arbor Lodge State Historical Park Museum
• Carhenge
• Stuhr Museum of the Prairie Pioneer
• Buffalo Bill Ranch State Historical Park

33
Content Guidelines

• Create a clear visual heirarchy
• Think of a newspaper. We can easily identify
  what items are grouped together just by a quick
  visual scan.

34
Content Guidelines

• Use larger font size to indicate top of
  heirarchy.
• link

35
Content Guidelines

• Break up pages into clearly defined areas
• Make it obvious whats clickable (link)
• Eliminate background noise (e.g. overly
  complicated backgrounds)

36
Content Guidelines

• Know your audience
• Primary Audience Library Patrons
• Secondary Audience Non-patrons
• Indicate what is for patrons only
• If user needs library card for access, dont wait
  until the last step to let them know (e.g. online
  database access)

37
Content Guidelines

• Number of clicks to reach destination not as
  important as are the clicks obvious and easy?
• Link1 link2

38
Content Guidelines

• Libraries are Lucky
• They have a captive audience which is why so
  many library sites can get away with being so bad.

39
Content Guidelines

• Look to power sites (e.g., Amazon, Google,
  Yahoo!, etc.) for ideas.
• These sites have already put a lot of time and
  money into getting it right.

40
Library-Specific Content

• Web-based Catalog
• Link to
• Embedded Search Form
• Your Library Account
• Premium Services
• Online Databases
• Subscriptions

41
Local Content

• Library/Community History
• Historic Images
• L.I. Memories
• Links to Schools
• Links to Local Govt
• Links to Other Nassau Libraries

42
Designing for Kids and Teens

• Dont make text too small
• Interactivity
• Boards, polls, quizzes, etc.
• Hennepin County Library
• More Photos and Images
• Design vs. content
• Less concerned about privacy
• E.g., Reading History
• Source http//www.wired.com/news/culture/0,1284,6
  6514,00.html
• Link1 link2 link3

43
Multi-Language Issues

• Page Translations
• Use in-house or community expertise if possible
• Babel Fish
• Systran

44
Accessibility

• Section 508
• WebXACT

45
Some Things to Avoid

• Open in new window
• Browser-specific functions
• Overly-long pages
• Splash pages
• Designing for high resolution monitors
• Try to use relative widths instead of fixed
  widths
• Add a printer friendly link

46
Implementation

• How do you go about putting your ideas into
  practice?

47
Personnel

• Project Leader
• Webmaster
• Contributors
• IT Personnel
• ALIS Coordinator
• Graphic Artist

48
Software

• Web Editors
• Dreamweaver
• Front Page
• Text Editor
• Graphics Programs
• Adobe Photoshop Elements
• Macromedia Flash

49
Static vs. Dynamic

• Static sites contains pages that change only when
  they are updated by staff
• Dynamic sites change depending on different
  variables
• Date/time
• User
• IP Address

50
Web Technologies

• Basic
• HTML
• CSS
• Javascript

51
Web Technologies

• Advanced
• LAMP (Linux, Apache, MySQL, Perl/PHP)

52
Future Trends

• RSS/XML
• University of Alberta
• Integration w/library catalog
• Wireless/Cell Phone Access
• Skweezer.net
• Blogs
• Chat
• More Interactivity
• Reviews
• Virtual Reference