Planning Your Guide

 

Are You creating/updating a LibGuide? These guidelines can help you fine tune your work. 

CONSIDER

  • Does a guide on this topic at Harvard already exist?
  • Is this information best suited to a guide or another platform?
    • For example, can you make a LibAnswers FAQ for it?
  • Who is your audience?
  • What is your learning objective?
  • What is your plan for keeping it up to date?
    • For example, will you be able to update a new books list frequently?

 

Creating Your Guide

 

WHY

  • The official templates have been tested for usability and accessibility.
  • Using the template is a simple way to make sure your guides are meeting our users' basic needs. 
  • As we continue to refine the template to better meet user needs, your guides will also be updated and optimized automatically. 

 

HOW

  • From the dashboard, click on +Create Guide 
  • On the Create Guide form, go to Apply a Template. 
  • Select Harvard- Side-Nav Layout. If your library has created a different official template, use that one instead. 

​

 

1. SUBJECT GUIDES

Tied to a specific academic subject. Its primary purpose is guiding users to the best books, tools, and resources for research in that area.

  • Naming: Descriptive words [add school name or scope if needed] – Beyond Harvard: Public Policy Research for HKS Alumni
  • Subject Headings: At least one top-level subject heading to each subject guides. These headings are required for inclusion in the Guides by Subject tab on the Harvard Library Research Guides landing page.

 

2. HOW-TO GUIDES

Focused on methods, tips, and techniques for using specific tools, resources, or library services. They do not always correspond with a specific subject. 

  • Naming: Resource or topic: Descriptive words [ add library name or subject scope if needed ]
  • For example: Finding Items at HLSL

 

3. COURSE GUIDES

Created for supporting a specific class.  Their primary purpose is directing students to the best books, tools, and resources for their research. May also be of interest to other scholars in the subject area.

Naming:  [SCHOOL CODE] Policy area or course type code:  Course number Course name

  • [FAS] FAS
  • [HBS] Business  
  • [HDS] Divinity
  • [HGSE] Education
  • [HKS] Kennedy
  • [HLS] Law
  • [HMS] Medical

 

Subject Headings:  Only assign a top-level subject heading if the guide is also of interest to other scholars in the area as these headings will cause inclusion in the Guides by Subject tab on the Harvard Library Research Guides landing page.

 

WHY

Friendly URLs make it easier for users to remember and access your guide. 

HOW

Assign friendly URLs to all new guides following the template. Including the school code prevents conflict between guides. http://guides.library.harvard.edu/school code/subject or course or topic.

 

 

WHY*

User testing has shown that users get overwhelmed when faced with dense text online. 

HOW

  • To help users engage with your guide's content, think about breaking content up into different pages and subpages.
  • For example:
    • If you have advanced content that is for a select group of users (for example resources that mainly a doctoral student would be interested in) think about moving it to a separate page.  
    • If you have a lot of content and aren't sure where to start, pull out the most important resources for your main pages. Move other resources to a separate page titled "See All Resources" or "See Further Resources."

 

ACCESSIBILITY NOTE

  • Breaking up content is also helpful for individuals who use screen readers. Having a screen reader go through a menu of pages is much faster than trying to read through long pages for the content they need. 

  • According to the CUNY LibGuide Accessibility Tips: "For some users with cognitive and learning disabilities, it is helpful to have plenty of space on a page and as little clutter as possible." 

  • Some users cannot use a mouse to navigate the web. Make sure users can navigate your guide by only using the Tab key. Learn more on the WebAIM: Quick Reference Testing Web Content for Accessibility page.

 

*Displaying your guide as a single page currently causes the guide to shift down so that the header is not visible. Springshare is working on correcting this issue.

Writing Content

 

WHY

Usability testing on Harvard version 1.0 LibGuides revealed that students find the layout and organization of content problematic.

  • Users found the amount of content on guides overwhelming, and the font sizes too small.
  • Users preferred searching to browsing/reading.
  • Users favored content on the left side of the page.

HOW

  • List resources in order of importance rather than alphabetically, students usually use the resources listed first.
  • Try to limit lists to 5 items or less. Users appreciate a curated list of items.
  • If you need a longer list of resources, consider moving it to a separate page labeled "All Resources" with a single column, separated by easy-to-scan headings. 
  • Write your own database descriptions that are short (1-2 sentences) and do not contain library jargon.

ACCESSIBILITY NOTE

 

WHY

With plain language, more people can read, understand, and use the information.

 

HOW

  • Use the language that the Portal uses.
  • Say database instead of e-resources or indexes.
  • Use journal or magazine instead of serial or periodical.
  • Test your content. Ask members of your target audience to read your content and tell you if it is meaningful and understandable.

 

ACCESSIBILITY NOTE

From the HUIT Online Accessibility Website: Plain language benefits all users, including people with cognitive disabilities, low reading literacy, and people who are encountering an unknown topic or language.

  • Put information in logical order, with the important details first.
    • “Front-loading” content is helpful for all readers. “‘Designing Accessible User Experiences’ is a new course that will be offered this Fall” is easier to grasp right away than “There is a new course offering coming this Fall called ‘Designing Accessible User Experiences.’”
  • Use active voice, with a clear “actor“ in your writing.
    • “You must enroll in the course by Friday” is more clear and comprehensible than “Course enrollments must be completed by Friday.”
  • Use familiar language.
    • Fit your language to your audience and context. Provide definitions for unusual words and for abbreviations.

 

WHY

If you do not strip out this hidden code it could make it difficult for screen readers to correctly read your guide and your fonts might look odd.

HOW

  • Avoid customizing the Harvard Template formatting (Font, Font Size, or Color).
  • When copying content from Word, use the Paste from Word icon in LibGuides' Rich Text/HTML editor to strip out extra formatting. Links, Headings, Bold, and Italic will be preserved.
  • When copying from rich text content in LibGuides, use the Remove Format icon in LibGuides' Rich Text/HTML editor to strip out formatting. Links will be preserved.
  • Avoid using tables for layout.

 

ACCESSIBILITY NOTE

  • From the HUIT Online Accessibility Website: Keep visual information separate from content.
    • For example, marking a heading as a heading rather than enlarging the text and making it bold. That way the HTML of the document has structural information and allows the stylesheet (CSS) to handle how the heading displays.
  • Using visual characteristics can be a powerful and effective way to communicate information, whether by using color or by referring to visual location, appearance, size, or orientation. However if you don’t make that same information available in another way, people with visual impairments, such as colorblindness, will not have full access to that information.

Adding Visuals

 

WHY

  • Images can create visual appeal and consistent branding, provide valuable information, and enhance comprehension. 
  • However, user testing has shown that images can sometimes distract viewers from key content.
  • Images may be subject to copyright. 
  • Alt text helps screen readers represent visual content. 
  • Large image files may slow page load time and display will vary on different browsers and devices. 

 

HOW

  • Consider if your image is necessary. Does it add value or can you cut it to reduce visual clutter? 
  • Consider copyright when using images on the web. Questions? Contact a Copyright First Responder. 
  • Add alt text to images if helpful or delete if duplicative with other content. For more information, see Adding Alt Text.
  • Resize the image to its optimal size before uploading it to LibGuides according to Resizing for Mac or Resizing for PC. Delete the image dimensions within LibGuides to allow web browsers to adjust the image size automatically for different devices. 

 

HOW 

 

ACCESSIBILITY NOTE

  • Consider adding alt text appropriately to images. See Adding Alt Text for more information. 
  • Caption your videos. 
    • For any videos that have been created at Harvard that are embedded in your guide, ensure that proper closed captions have been added. This YouTube video demonstrates how to add closed captions to YouTube videos. If you are embedding a video that was not created at Harvard, find an alternative that has captions.

 

 

WHY

  1. Some information is most easily displayed and understood visually.
  2. Images paired with text can enhance understanding.
  3. Icons help users know what to expect. 

 

HOW

  • Consider adding screenshots and icons where appropriate. Be sure they add something to the user's understanding- they should not be merely decorative or present to break up text.
  • Taking screenshots on a PC:
    • Press the Print Screen key (often shortened to PrtScn) to take a screenshot of the entire screen or Alt + PrtScn to take a screenshot of just the active window. This will copy your image to the clipboard.
    • Open the Paint application and press Ctrl + V to paste the image from the clipboard.
    • Make any desired changes in Paint and Save. For recommendations on image sizing for LibGuides, see Resizing for Mac or Resizing for PC.
  • Taking screenshots on a Mac:
    • Press Command + Shift + 4. A crosshair pointer will appear.
    • Click and drag to select the area you want to capture. Let go of your mouse or trackpad.
    • An image file will appear on your desktop. For recommendations on image sizing for LibGuides, see Resizing for Mac or Resizing for PC.
    • If you prefer the image to copy to the clipboard, use Command + Shift + Control + 4. 

 

TIPS

 

ACCESSIBILITY NOTE

  • Do add alt text for visual content not repeated in the text. Be descriptive. 
  • Do not add alt text for visual content meant to reinforce information already included in the text. 

 

HOW 

Unless you've directed it otherwise, your Mac will automatically open images in Preview. Click on the item title in the top middle of the window to make sure the image is unlocked. 

Click on Tools > Resize Image, and select a pixel size (pixels are needed for LG2). 


Click on File > Move to and move to any desktop location you like. Now you're ready to upload the image into the Lib Guides 2 Image Library!

Recommendations for Image Sizing

 

Left Column (below navigation)

Right Column (content)

Left Navigation 
Full Width 200px 1000px
50% Width 250px 500px
25% Width 100px 200px

 

Tabbed Layout

Full Width 1400px
50% Width 700px
33% Width 470px
25% Width

350px

 

HOW

Right click on the image and select Open With > Paint.

Click the Resize button. Select Pixels and enter a new size for the image. Click the Save button to save the image.


Recommendations for Image Sizing

 

Left Column (below navigation)

Right Column (content)

Left Navigation 
Full Width 200px 1000px
50% Width 250px 500px
25% Width 100px 200px

 

Tabbed Layout

Full Width 1400px
50% Width 700px
33% Width 470px
25% Width

350px

 

WHY

  • Alt text allows screen readers to represent visual content.
  • Adding alt text to images can provide valuable descriptive information to visually impaired users.
  • If something is decorative or illustrative of something you have already written out (screenshots, charts, etc) it does not need Alt text. 

 

HOW

  1. Select the image you want to update.
  2. Click the image properties  icon in the toolbar.
  3. Add descriptive text to the Alternative Text field.
  4. Click OK.

 

TIPS

  • Use descriptive language appropriate to the context. What is the meaning you want the image to convey? 
  • Be clear and concise.
  • Avoid language such as "picture of..." as this information is already apparent to the screen reader. 
  • For more information on using alt text for images, see this useful article on WebAIM.

Using Widgets

 

WHY

Usability testing on Harvard version 1.0 LibGuides revealed that students like to get started searching right away.

  • Users like searching and will often type in any available search box before browsing. Prominent widgets put users in the right place to begin searching.
  • Widgets integrate key library resources into guides.

 

HOW

Widgets are resource and/or vendor specific. See the other tabs for more information or search vendor sites.

 

HOW

Click the Add / Reorder button and choose Media / Widget. Click the Reuse Existing Widget tab and search for HOLLIS+ Basic. You can use the widget as is. Click the Save button to add it to your guide.

 

HOW

Click the Add / Reorder button and choose Media / Widget. Click the Reuse Existing Widget tab and search for HOLLIS+ Library Search. This widget is customizable. Click the Copy checkbox and click the Save button to add it to your guide.

CUSTOMIZATION

Click the Edit icon and select edit. Name your widget something that will make it easy to find later,
like "HOLLIS+ Gutman Library Search".

In the Embed Code section, find this line:

<input type="hidden" name="fctV" value="HVD_WID">

and replace WID with your library's Aleph code

<input type="hidden" name="fctV" value="HVD_GUT">

In the Embed Code section, find this line:

<input type="text" class="form-control" placeholder="Search Widener" name="sublibQueryTemp" id="sublibQueryTemp">

and replace Search Widener with the text you'd like to appear in the search box.

<input type="text" class="form-control" placeholder="Search Gutman Library" name="sublibQueryTemp" id="sublibQueryTemp">

 

HOW

  • EBSCO Search Box Builder
  • Some vendor widgets may require indicating the URL Prefix for our proxy server.
    • http://ezp-prod1.hul.harvard.edu/login?url=

 

HOW

  • ProQuest Search Widget
  • Some vendor widgets may require indicating the URL Prefix for our proxy server.
    • http://ezp-prod1.hul.harvard.edu/login?url=

Reviewing Your Guide

 

WHY

Springshare uses responsive design, but text-heavy and multi-column guides can appear cluttered and unreadable on tablets and smartphones.

HOW

If you don't have multiple devices available for testing, you can borrow them from the User Research Center at Lamont Library.

 

WHY

  • Although Springshare supports the two most recent versions of Firefox, Chrome, Safari, and IE, text or image-heavy and tabbed guides may vary in how they appear in different browsers.
  • Sometimes when copying and pasting into guides, we forget to eliminate Word or other coding. Some browsers are more forgiving, and errant code doesn't appear on published guides; in other browsers, users will see the code.

HOW

  • Simply open your guides in each of the different browsers to see if content displays the same across them. Make adjustments as necessary.

 

WHY

Users with a visual impairment rely on screen reading software to access guides. Testing your guide with this software allows you to discover inaccessible aspects in your guides. 

HOW

  • JAWS (Job Access With Speech) is the most robust and popular screen reading software currently in use. JAWS is available for staff use in the User Research Center in Lamont Library.
  • There are two free alternatives to JAWS which are very popular and are also very powerful. You can easily test your guides with these programs:
  • WAVE (Web Accessibility Evaluation Tool) is another free tool that checks webpages for accessibility.

 

WHY

Guide statistics can help you identify:

  • Heavily used guides and/or pages to prioritize for updating.
  • Low-use guides or pages to merge with with other guides or retire.
  • How often assets (links) are being used. (Note: these statistics are only available for links added using the "add a link" function).

 

HOW

  • Look at total views to view all of your guides sorted by total views.
  • Click on individual guides to see additional options to view page and asset statistics.
  • See Springshare Support's Viewing and Printing Reports.