Why Good LibGuide Design Matters & How You Can Get It Right
- 1. Virginia Library Association | October 22, 2015 Why Good LibGuide Design Matters & How You Can Get It Right
- 2. 2 Agenda About Me Pedagogical Design Best Practices Technical Design Best Practices
- 3. 3 About Me Librarian at Northern Virginia Community College
- 4. My LibGuide Philosophy Pedagogical Tool Work in Progress
- 5. 5 Background Used by 60,000+ librarians
- 6. Good Design Elicits Positive Emotions Critical Thinking Creativity
- 7. 7 Pedagogical Design Best Practices Writing for the Web, Working Memory, Chunking, Jargon, Limiting Suggested Resources, & Visual Aids
- 8. Write for the Web Be concise F-shaped reading pattern Start with most important information
- 9. Examples Yavapai College Northern Virginia Community College
- 10. Eliminate “Nice to Know” Each person has a finite amount of working memory, or what they can be actively thinking about while performing other tasks such as reading or learning.
- 11. Strategies to Aid Working Memory Simplify content and directions Use clear and specific language Incorporate chunking
- 13. Chunking Chunking is a learning theory that involves the breakdown of a concept into smaller units to facilitate learning.
- 14. Strategies to Aid Chunking Small content boxes Resize columns Color for emphasis
- 16. Example Northern Virginia Community College
- 17. Reduce or Eliminate Jargon
- 18. Limit Number of Suggested Resources Which list is more appealing?
- 19. Use Visual Aids •General Topic: Technology •Facets of Topic: automobiles, cell phones, wireless technology, text messaging, social networking, GPS systems •Aspects of Topic: legal (state and/or federal); social; psychological •Time Span: 1990s; current •Place: United States; urban; rural •Focused Research Question: Should cell phone use be banned with driving?
- 20. 20 Technical Design Best Practices Guide Structure, Scrolling, Fonts, Colors, Active Tab, Images, ALT Text, & Balanced Columns
- 21. Guide Structure – Main Page Tidewater Community College
- 22. Example Virginia Western Community College
- 23. Example Northern Virginia Community College
- 24. Guide Structure – Other Pages Can arrange pages by: Resource type (books, articles, etc.) Information need (background information, specific parts of assignment, etc.)
- 26. Tabbed Boxes Can Reduce Scrolling Northern Virginia Community College
- 27. Be Cautious With Fonts & Colors
- 28. Active Tab Color
- 29. Use Images to Add White Space
- 30. Add ALT Text
- 31. Balance Columns
- 32. 32 Resources Images, MS Word SmartArt, Screenshots, Books, & Websites
- 34. MS Word - SmartArt
- 35. Add the File if Using SmartArt
- 36. Creating Screenshots Snagit by Techsmith (license): ● Can take one screenshot of scrolling webpage ● Video option ● Add text, highlight, blur, etc. ● Transparent background ● Can edit at a later time Snipping Tool (Windows OS): ● Can only capture what is visible (i.e., no scrolling) ● Can only write using mouse (i.e., no type) ● Highlighter (but very rough) ● Cannot edit later
- 37. Tips for Creating Screenshots Do not use shadow feature when circling text NO: YES: Show only what’s necessary Make highlighter look clean NO: YES:
- 38. Give Credit for Images
- 39. Other Resources LibGuides Community http://libguides.com/community.php Using LibGuides to Enhance Library Services http://www.amazon.com/Using-LibGuides-Enhance-Library-Services/dp/1555708803/ A new version is in the works! Design for How People Learn http://www.amazon.com/Design-People-Learn-Voices-Matter/dp/0321768434/ e-Learning and the Science of Instruction: Proven Guidelines for Consumers and Designers of Multimedia Learning http://www.amazon.com/-Learning-Science-Instruction-Guidelines-Multimedia/dp/0470874309/ The Non-Designer’s Design Book http://www.amazon.com/Non-Designers-Design-Book-3rd/dp/0321534042/
Editor's Notes
- #4: khoskins@nvcc.edu Working as professional librarian for 3+ years, but have been in libraries longer MLS; working on Masters in Education, specifically instructional design Not affiliated with Springshare
- #5: LibGuides are so much more than a glorified pathfinder; they make excellent pedagogical tools when designed well. LibGuides are a work in progress. What looks good today might not look as good next month.
- #6: LibGuides is a content management system provided by Springshare Used by 60K+ librarians around the world; 400K+ LibGuides
- #7: Using LibGuides to Enhance Library Services (Dobbs, Sittler, and Cook), p. 104
- #9: Using LibGuides to Enhance Library Services (Dobbs, Sittler, and Cook), p. 112 http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ Uppermost left box is MOST IMPORTANT real estate on any guide/page Montgomery College document on “Writing for the Web”: http://libguides.nvcc.edu/ld.php?content_id=14801400
- #11: Using LibGuides to Enhance Library Services (Dobbs, Sittler, and Cook), p. 123 Image: http://susancorso.com/seedsforsanctuary/2014/04/steve-pavlina-on-training-your-brain/ Working memory is quite limited in both duration (just a few seconds) and capacity (only two to three bits of information when processing). Working memory includes both auditory and visual components that are partially independent, which allows the total working memory to be slightly increased by providing stimuli for both aspects. [Sweller, J. (2005). Learning aids and strategies. In L. Nadel (Ed.), Encyclopedia of Cognitive Science. Hoboken, NJ: Wiley.] Relevant learning theories: (1) Cognitive Information Processing (CIP), (2) Schema, and (3) Cognitive Load Major scholars/researchers: Richard Anderson, Richard Atkinson, Alan Baddeley, George A. Miller, Richard Shriffin, John Sweller
- #13: Not only has the link for the “Full Text Journal Finder,” but includes both a video and text for the steps Instructional materials that include both visual and auditory components shown to be very effective Have seen some guides that make the text expandable; see http://yc.libguides.com/ebooks/android
- #14: Using LibGuides to Enhance Library Services (Dobbs, Sittler, and Cook), p. 123 Image source: http://footage.framepool.com/shotimg/qf/161822225-diced-cheese-cheesy-niblet-cheese-stick-cocktail-stick.jpg
- #15: Using LibGuides to Enhance Library Services (Dobbs, Sittler, and Cook), p. 123
- #16: Small content boxes – recommended database (JSTOR), catalog search, WorldCat search, and search tips Columns sized for content Could incorporate more color to emphasize important points/steps (there is some green text under Smart Searching Tips > Search Tools)
- #17: Small content boxes – recommended article databases, video, and search tips Columns sized for content Use of color and bolding to emphasize key points
- #18: 2012 publication synthesizing 51 usability studies: http://libguides.nvcc.edu/ld.php?content_id=14801404 Terms most cited as being misunderstood: Acronyms and brand names, database, library catalog, e-journals, index, interlibrary loan, periodical/serial, reference, resource, and subject categories such as humanities Terms most cited as being clear: Find books, Find articles, and other combinations using natural language “target words” Terms accompanied by additional words or mouseovers that expand on their meaning Good rule of thumb: follow NLM guidelines for writing health materials. They suggest writing within a 6th-7th grade reading level.
- #19: Try to offer no more than 3-5 of the most useful resources. Remember, no “nice to know” information. The database list in LG v. 2 is an excellent way to highlight “Best Bets” and additional databases that might be helpful.
- #20: The colors, bullet points, and arrows all lend themselves to easier comprehension, are more visually appealing, and are less overwhelming Image on the right created using MS Word’s SmartArt feature; only downside is the images aren’t accessible, so need to add the file.
- #22: Many names for main page – home, get started, etc. This is a good place for contact information. Some guides have contact information on each page, but that takes up valuable real estate. If several people are the guide owners/contacts, put all information in one box, as opposed to multiple profile boxes Eliminates extra white space It can be helpful to list the contents and/or learning objectives. Listing the contents provides alternate navigation. Springshare recommends putting “best bets” on the first tab. Not including best bets on the main tab (a) ensures the user at least notices other tabs and (b) allows you to provide search tips or additional information next to the suggested resources. Rationale for including “best bets” on main page may have something to do with declining usage of each successive page/tab
- #23: Introduction box gives overview; might be helpful to link to tabs Contact information
- #24: No learning objectives, but tabs are linked Contact information
- #25: Choose what is “best” for the needs you identify
- #26: This is a screenshot of one guide’s home tab Remember that we have a limited amount of working memory Many users will feel overwhelmed by too much information and give up
- #27: No learning objectives, but tabs are linked Contact information
- #28: Generally no more than 2, maybe 3, fonts on one page Institutional colors are a major consideration; they do not necessarily lend themselves to good design Colors also vary depending on monitor resolution Most people assume blue and purple text is hyperlinked Need good contrast between font and background colors Partially for accessibility reasons; check the contrast here: http://webaim.org/resources/contrastchecker/ Remember about red-green color blindness
- #29: Need a strong contrast between active and inactive tabs Would suggest having color of active tab match color of boxes (often accent color); creates continuous line of sight 60/30/10 rule: Use most dominant color 60% of the time (white in this example), secondary color 30% of the time (gray in this example), and accent color 10% (green in this example) Typically, the most dominant color should also remain the least saturated color, while your bold or highly saturated accent color should be saved for your most important content http://blog.eyequant.com/blog/2013/06/27/capturing-user-attention-with-color
- #30: Adds a bit of color, is visually appealing, attracts the eye
- #31: Some practitioners say there isn’t a need when the image is something simple like a smiley face, but it’s a good habit to get into. Lets screenreaders used by visually impaired know there is an image and provide alternative text (hence ALT text)
- #32: A little bit of imbalance is to be expected – different monitor widths. Huge gaps suggest that something is missing, which can create a visual distraction.
- #34: http://search.creativecommons.org/
- #36: Cumbersome and time consuming to add all the text from the image File should be readable by screenreaders
- #37: Prefer Snagit, which is relatively cheap
- #38: Shadow impairs legibility, especially for those with visual impairments Trimming out unnecessary parts saves space and creates less of a distraction
- #39: Obviously an exaggeration, but we should emulate ethical behaviors