As part of the redesign for the new site, the main thing that I really wanted to change in terms of the look was the front page. Continue reading “Guerrilla Usability: Choosing the Front Page with Mockups”
Tag: redesign
Evolving Look of My Presentation Slides
While I’m sure it will continue to evolve, I thought now would be a good point to document the way the look of my presentation slides have changed over the past few years. Continue reading “Evolving Look of My Presentation Slides”
Developing the WordPress Theme: Making Changes to TwentyTwelve
So last week, I posted about making an accessible child theme of TwentyTwelve, but left out the details on why I chose to make some of the layout and aesthetic changes. Continue reading “Developing the WordPress Theme: Making Changes to TwentyTwelve”
Accessible WordPress Theme: Creating a Fully Accessible TwentyTwelve Child Theme
To make up for the lack of post last week (apologies, things have just been too busy), a special post this week. Before working on the new website, I once again did some searching for an accessible WordPress theme. Unfortunately, I found little that would meet my needs as I required WCAG (Web Content Accessibility Guidelines) level AA at the minimum, but preferably something that would be as accessible as possible.
Continue reading “Accessible WordPress Theme: Creating a Fully Accessible TwentyTwelve Child Theme”
Card Sort & Goal-Oriented IA
I’ve been working on our new website and as usual, I decided to start with a card sort. Continue reading “Card Sort & Goal-Oriented IA”
Making Forms Accessible
I’ve written on making forms accessible before in the WCAG series, but I thought I’d document some real examples using the work that I’ve been doing. This one is a fairly simple, but important example especially since we’re moving to PDA (patron driven acquisitions). Continue reading “Making Forms Accessible”
Revised Contact Us: Making it Simpler and Shorter
While the Contact page is one of the most visited pages, I had put it off for a time, wanting to redesign the pages that really needed work first. While not the best, the Contact page was functional and was easy enough to skim. After redoing the other pages though, the Contact page started to look ugly in comparison. Continue reading “Revised Contact Us: Making it Simpler and Shorter”
Services Redesign & Content Overhaul
Not too long ago, I posted about the revised IA of the Services section of the website. Staff consultations followed particularly to apprise them of recommended changes and to take the opportunity to revise the content. I created mockups, which I got feedback on. Finally, the page went live.
Consultation is Key
Based on the revised IA, I began an extensive consultation process with all the teams involved. While the methods differed, the most common process was by meeting with the librarian in charge, who would discuss the changes with the team and then assign a technician to help with the content revision. At other times, I just asked the librarian if they would have a problem with someone else revising the page.
I focused on the fact that the recommended changes were based on exercises with both staff and students. While the content could stay more or less the same, it was also a good opportunity for the team to make revisions. (Some pages hadn’t been revised in 10 years.)
For the most part, the major changes were discussed with the librarians and the assigned technician took care of the detailed content revision. I also did all the revisions for the technology area, since that’s under our team’s purview. Librarians that didn’t have a technician to help, I assigned the pages to the technician who does web editing support or the co-op student (who also helped with pages that have no owners).
The Old Services
The Services section was comprised of 125 pages, and the landing page looked like this:

Pretty awful, isn’t it? The old IA was a bit of a mess as well, and a lot of pages had the same information or just a single paragraph. The organization seems to have come about via the “we should make a page about this, and put it here”, meaning there doesn’t seem to have been a strict management of content. Not sure duplication of content was reviewed in any way either.
From the card sort, it’s obvious that some of the pages are definitely not where users might typically look for them. Here’s the list of pages in the old IA:
Services Audio-Visual Resources & Services Searching for Audio-Visual Material Bookings Borrowing Audio Visual Material AV Copyright DVD Player Lending Digitized AV Resources Equipment Screening Facility Search Other AV Collections Other Audio Visual Resources Borrow from Another Library Search Other Libraries NRC-CISTI Discover Borrow in Person from Other Libraries RACER (Interlibrary Loan) Using RACER RACER FAQ Tips for Faster Interlibrary Loans Policies Ryerson’s Lending Policies for External Institutions Article Not Available @ Ryerson Request this Title via Interlibrary Loan Borrower Services Circulation Records Privacy Courtesy Notices Direct Borrowing Extended Loans Fines & Penalties Holds Library Cards Alumni & Retirees Application Forms Distance Education Library Cards Faculty & Staff Library Cards George Brown Library Cards Nursing Library Cards Others Student Library Cards Loan Periods Lost Library Materials Maximum Items Borrowed Recalling Library Materials Renewing Materials Returning Library Material Self Services Special Loans Course Readings (One-stop Service) - no changes to subpages Facilities & Technology Access from Home Change Machines Computer Labs Lost and Found Photocopying Printing Study Space Telephones Washrooms Wireless Access (wifi) Instructional Services Laptop Loan Program Laptop Loan FAQ Ronald D. Besse Information & Learning Commons About the Commons/FAQ Besse Commons Hours Codes of Conduct Floorplan Mission Photo Gallery Ronald D. Besse Software Vision Geospatial, Map and Data Centre Instructional Services Learning Commons Lab (ILC) Research Help Services Technology Support Writing Centre Services for Distance Education Students Services for Faculty Audio Visual Services Direct Borrowing Electronic Resources Faculty Borrowing Library Cards Ordering Orientation Classes Reference Services Targeting Journals for Publication Instructions for Authors Journal Impact Factors Periodical Directories Periodical Title Abbreviations Recent Publications Refereed Journals Services for Graduate Students Borrowing & Renewing Computers & Study Space Direct Borrowing Graduate Workshops Reference Services - Graduates Thesis Submission Services for Persons with Disabilities - no changes to subpages
Content Revision & The Authoritative Copy
Other than merging a bunch of pages and getting rid of redundant ones, I consolidated a lot of information where we needed one “authoritative” copy: hours, policies, and fines. It is particularly important that we do not have conflicting information for circulation staff, because they are the ones that deal with fines, and lost and damaged items. Obviously, this also prevents confusion and possible frustration on the part of our users. A short guideline now exists on our intranet in regards to this issue.
We also moved our existing FAQ pages to LibAnswers, our FAQ database.
A couple of the ‘Services for…’ pages don’t really belong to anyone and they suffered from some of the same problems as the old Services page. I got our co-op student to look them over and suggest changes. Here’s what we came up with for the Graduates page:
We decided to take out redundant links, and links that were not of special interest. Then, obviously, we decided to categorize them a little so it was easier to read.
Mockups
As per usual, I created a number of mockups for the web committee to review. In an attempt to make it look a little more consistent with Research Help, I used the coloured boxes motif and played around with different ways of organizing the pages.
People were actually very against the boxes, and I agreed that it seemed like trying to force the look on Services. Based on the feedback on which they did prefer, I created clean black and white versions of two of the original mockups.
The group preferred mockup #1 with the icons on the right hand side. After a couple of more changes based on the committee’s feedback, I posted it in the staff room and sent it out by email as well. Sadly, I didn’t get any feedback though I suppose that’s not necessarily bad.
Services Revised
After all the consultations and content revisions, we pared Services to 90 pages (vs. 125). This is the final version of the IA:
Services Audio-Visual Resources & Services Searching for Audio-Visual Material Booking AV Material Borrowing AV Material Digitized AV Resources Other AV Resources Borrower Services Fines & Penalties Holds and Recalling Materials Library Cards Alumni & Retirees Application Forms Distance Education Library Cards Faculty & Staff Library Cards George Brown Library Cards Nursing Library Cards Others Student Library Cards Loan Periods Lost Library Materials Returning Library Material Self Services Borrow from Another Library Direct Borrowing Search Other Libraries RACER (Interlibrary Loan) Using RACER Tips for Faster Interlibrary Loans Request this Title via Interlibrary Loan Course Readings (One-stop Service)- no changes to subpages Facilities & Spaces Computer Labs Software Lost and Found Ronald D. Besse Information & Learning Commons About the Commons Codes of Conduct Mission & Vision Photo Gallery Ronald D. Besse Geospatial, Map and Data Centre Learning Commons Lab (ILC) Writing Centre Study Space Telephones Washrooms Viewing AV Instructional Services Research Help Services Technology & Tools Access from Home Change Machines DVD Player Loan Laptop Loan Program Photocopying Printing RefWorks Technology Assistance Wireless Access (WiFi) Services for Distance Education Students Services for Faculty Scholarly Communication Journal Impact Factors Open Access Author Fund Refereed Journals Services for Graduate Students Graduate Workshops Services for Persons with Disabilities - no changes to subpages
The ILL pages haven’t actually been revised yet as they were busy with their projects, but that should happen in the next little while. The page count and the new IA are based on an already revised section of ILL, so that may differ from what actually happens in the future.
I also ended up writing a fairly long email to list all the changes as requested that I sent out to all staff.
The final version turned out fairly well I think.

About Us Redesign & Reorganization
The website redesign continues! Next up is the ‘About Us’ section. I find it more difficult to do sometimes, because our users don’t use the About section nearly as much, so don’t always have much of an opinion about it. Although it goes against my usual inclination, I decided to go ahead with only minimal feedback. Continue reading “About Us Redesign & Reorganization”
Code4Lib Day 2: Afternoon Notes
De-sucking the Library User Experience
- Jeremy Prevost, Northwestern University
Libraries hate library users. If we didn’t, our websites wouldn’t suck.
Discovery
- if a user can’t find it, why do you own it?
- spend a lot of money on acquiring resources or access to them
- want to allow them to find them
- Good: works like Google from the user’s perspective
- Bad: needs to know how it works to make it work e.g. need to know MARC; can only find known items
- live examples: Ex Libris Voyager vs. Primo
- Voyager: no relevant results even using boolean ‘AND’
- Primo: can use boolean or not, relevant results – de-sucked!
Requesting Item
- Request information/user experience also sucks
- Prepopulated info, request item if not available – de-sucked!
Renew Item
- consistency
- made interfaces consistent – de-sucked!
Mobile
- not going away
- no mobile until mid-2007 for iPhone
- jQuery mobile – Apr 2010 – but updating two sites sucks, no support for tablets
- Mar 2013: responsive design, bootstrap
Libraries don’t hate library users!
- start with something that you would enjoy using
Google Analytics, Event Tracking and Discovery Tools
- Emily Lynema, North Carolina State University Libraries
- Adam Constabaris, North Carolina State University Libraries
How to track in-page events. Decide which events to track, push to Google.
Event Tracking Use Cases
- hidden or externally AJAX events e.g. facets, tabs
- internal links that occur in multiple places e.g. request item
- external links
Examples
- Catalog: click on tabs twice as much as everything else; full text used a lot; browse graphical < text because of placement; about half request item even though in 2 different places
- Summon: trying to track what they could track. Paging more popular than facets
Implementation
- GA API script
- jQuery API
- HTML5 Data Attributes: data-* for use by scripts
- decide what to track
- basic technique
- Summon gets harder. Have to get it in the code. more selectors
Debugging & Testing
- set up safety net first
- know the debugger
- use the GA debug
- test a lot
Actions speak louder than words: Analyzing large-scale query logs to improve the research experience
- Raman Chandrasekar, Serials Solutions
- Susan Price, Serials Solutions
Single unified index for all the items from all libraries’ collections.
RMF Goals
- observe and log user actions e.g. queries, filters, click patterns
- compute quality of search results e.g. user behaviour
- analyze data to improve search results and enhance research experience
Data-Driven Documents: Visualizing library data with D3.js
- Bret Davidson, North Carolina State University Libraries
Why D3?
- uses technologies that you already know
- capable library – pre-built path generations, well maintained etc.
- community – documentation, training available
- might not because of learning curve, and don’t need something this complex
Examples
- suma – space assessment toolkit
- show visualization real time, tables, and CSV file
HTML5 Video Now!
- Jason Ronallo, North Carolina State University Libraries
Yes! Also, slides/presentation.
Here’s Why
- Flash video cannot be run on most mobile/tablets
How it Works
- uses video HTML tag
- use simple fallback – download if can’t view
- problem: browsers cannot decide on single codec to use; codec war
- solution: multiple sources: mp4, webm
- use poster attribute as “screenshot” and don’t have to download video right away
- add type attribute to say which format to use; can be very explicit
- only one video per page please!
- properties exposed in JavaScript
- can add custom controls, more info for users
- events that you can listen for e.g. timeupdate to update time in a video; update wording e.g. which floor
- analytics: play, pause, seek, ended
- can do visualization of engagement
- can style with CSS
- track for subtitles
Polyfills and Advantages
- provide video controls
- flash fallback
- progressive download and range requests
Future of Media on the Web
- DRM looks to be coming
- Popcornjs – can do annotation
- Web Audio API – mix audio, filters, etc.

You must be logged in to post a comment.