Cynthia Ng

Book Review & Notes: Don’t Make Me Think (Steve Krug)

I recently asked for some recommended resources and books to read on usability and UX (user experience). One that came highly recommended was Steve Krug‘s Don’t Make Me Think: A Common Sense Approach to Web Usability.

I really appreciate a number of things, many of which are in other reviews and even in his introduction. Nevertheless, for the benefit of my readers, here’s what I like.

It’s short.
It’s easy to understand.
It’s concise and boils it down to a few simple guidelines.
There’s humour in it.

I will say that while most of the ideas and concepts still hold, there are some ideas presented that I think may be a little outdated. It could be that as someone who works with websites on a daily basis that some things seem obvious to me, but may not be “common” knowledge to others. Still, I think it’s easy enough to skip some sections if you feel you already know about it (as I did), and while some parts could be updated, the guidelines and concepts still hold true.

My Notes

I decided to take some notes for myself since I borrowed the book. If these notes pique your interest in any way, I suggest reading the book, because my notes are just that, notes, and in no way do the book justice.

Rule 1: Don’t Make Me Think

This translates to Eliminating Question Marks.
For example, When searching: What is a keyword? If you say it searches all or everything, then that’s what it should do.

Users should know without thinking:

Location within the site
What’s important
Where things are
Where to go
Why labelled that way

You can’t make everything self-evident, but you can make it self-explanatory.

People Scan and Click the First Reasonable Option

I don’t think this a surprise to people anymore, but it still holds true. The suggestion is to cut your text in half and then half again. Omit any unnecessary words.

Happy talk must die.

Cut down instructions as much as possible; make it self-explanatory instead.

The benefits:

Reduces noise
Useful content more prominent
Shorter pages

Design Pages for Scanning

create a visual hierarchy
take advantage of conventions
break pages into clearly defined areas
make the clickable obvious
minimize noise

People Like Mindless Choices

User should have confidence that they are on the right track. There’s still a limit to the number of clicks a used is willing to go through, but no hard number if they are mindless and not repetitive. Good example is buying for home office and needing to choose home or office.

Navigation

Should be persistent and consistent with the possible exception of the home and forms.

Links should match the page title. This may seem very obvious, but I see this discrepancy quite often.

On any page, you should be able to identify these basic elements:

Site
Page name
Major sections of the site
Local nav
Location within the site
How to search

Home Page

Should be able to answer these questions at a glance:

What site is this?
What do they have?
What can I do here?
Why should I be here and not somewhere else?
Where do I start?

Test Early and Test Often

Not the same as focus groups, which are good for determining the audience, if ideas and wording make sense, and their feelings.

[Usability tests are] for learning whether your site works and how to improve it.

Ideally, one morning a month for testing and then debrief over lunch.

Keep and Refill Users’ Goodwill

Goodwill goes down when:

information is hidden
things are inflexible e.g. form fields
unnecessary information is requested
looks unprofessional

Goodwill goes up when you:

make things obvious
save steps
make it easy to recover from errors

Guidelines on Writing for the Web

So as part of the website redesign and working on making the site WCAG compliant, I wrote a couple sets of guidelines. One of them was on writing content for the web. Some of the points and the example I got from a coworkers, but most of it I just consider sensible advice. Overall, I tried to keep it fairly short and simple in the hopes that staff members will actually read it!

Writing for the Web

Web readers skim pages and look for keywords, links, and other information that will help them find what they’re looking for quickly. Therefore, when writing new or revising content:

1. Be Clear and Concise

Make your page title descriptive and concise, keeping it fairly short.
Keep sentences, paragraphs, lists, and other information short and simple.
Use lists wherever appropriate, especially when users have choices. Use numbered lists for complex instructions and include important screenshots.
Unless you’re creating a policy page, keep the entire page short (e.g. 2-3 screens worth).

Bad Example:
To find information on citation styles, go to the Library’s Home Page, click on Research Help, then click on Citations and Style Guides and choose APA Style Page, MLA Style page or RefWorks.

Better Example:
For more information about citation styles, check the

APA Style Page
MLA Style Page or
RefWorks

2. Speak to Your Audience

Avoid acronyms and “library” vocabulary when writing content for the library’s webpages.
Write at a Grade 7-8 level in a direct voice, using “you”. For example, use “get” not “obtain”.
Because users scan pages and don’t read them, information needs to be written clearly and concisely and at a reading level that doesn’t impede typical user behaviour.

3. Be Meaningful

Links, in particular, should be meaningful. The words of a link should tell your reader what the link is about.
Screen readers have the option of listing all of the links on a page, so think about whether a user would know what your links refer to out of context.
In addition, don’t overuse links. Only use them where it makes sense, such as for a list of resources.

Injecting Personality into a Library Website

While moving our website into WordPress, I came across a blog post about adding some personality into a website (I’ve unfortunately lost the link to it). So, I thought I’d find some small ways to do that with our site too.

I was recently reading as well about how successful GVSU Library has been with their construction updates using a twitter account by giving the building a persona.

404 Page

One of the most common ways that a site will show some personality is with its 404 page. One of my favourites is the Github 404. I thought maybe we could do something a little more amusing than the standard 404, so with the help of my partner, we came up with this:

Unfortunately, I got various complaints that the 404 page was confusing and didn’t make any sense (from staff, it was changed before the site went public). I knew from the beginning that it wouldn’t fly with making it public for our users because they wouldn’t get it, but I thought at least one staff member would get the joke.

I may have another stab at it with a simpler one, perhaps with just a headline, but that won’t be in at least a couple of months.

Custom Avatar

One of my thoughts for the blog was to have a custom default avatar that would be a picture of our university mascot or just a version of our library’s logo. Unfortunately, I couldn’t find a plugin that worked on multisite that would allow me to set a custom avatar only for the main site (and not all the subsites).

Placeholder Text

I actually mentioned this in a previous post that I decided to have a little fun with placeholder text, but here it is again.

Eggy the Ram is the name of our university mascot. No one has actually noticed this since our blog hasn’t been moved. Thankfully, unlike the 404, the placeholder text here should have no chance of confusing people.

Badges

Another idea I recently thought of that might be fun is for students to get badges during orientation or even throughout their time in school for completing workshops or similar things. Instead of an in-house system, it could be done using something like Open Badges.

I’d be interested to see if other more formal institutions have done any of these or other things to add some ‘personality’ to their sites.

Technology Requirements for MLIS Students

Recently on Hack Library School, Amy Frazier posted about her idea of the ideal library school with higher-level technology classes and require more tech skills for librarians-to-be.

Librarian By Name, Geek By Nature.

The post generated quite a lot of comments including my own. It’s definitely an issue that I have seen discussed more often in the last year or two. When I was in school, a number of students (including myself) expressed the desire for more technology courses in our program.

Including More Technology Courses

One side of the discussion is getting MLIS programs to offer more tech courses. While personally, I could have used more tech courses, I don’t necessarily think that it’s viable for a lot of schools. It’s difficult enough for schools that librarianship is very broad, add to that that many MLIS type jobs are not in libraries, and you get the basic problem of “how do you offer courses to cover all topics of interest in a single library school?”

Basically, you can’t. It’s impossible. At my school, there is a PhD program, so at the Master’s level, it even needs to cover all the research side of things.

Option 1: Partner with the CS department

One way is to possibly have the faculty partner with the CS department to allow students to take lower level programming classes or recommend CS classes that aren’t programming heavy. Unfortunately, like at my school, universities will normally not allow credit to be given for lower level courses when in a master’s program.

Option 2: Partner with other LIS schools

There is always the option of partnering with other schools to offer classes (this includes non-technology related courses). This already happens in many schools, but due to different schedules and the difficulty of getting through other schools’ admissions for classes and such, it is traditionally not particularly convenient. Improving the shared courses system would definitely help though.

Option 3: Offer 2-3 introductory courses

I would say that, at the least, LIS schools should at least have introductory courses (again possibly in partnership). At my school, they offered a 1-credit class as an introductory course (a regular class is 3 credits). I think for its first time, it did quite well and a lot of students had signed up. What I would like to see is for additional 1-credit classes to be offered to introduce the basics of other languages or a 3-credit course, which can almost be a survey type course where you’re introduced to the basics of a couple of languages and taught the process in making decisions on which to use when. An existing class covers technology management and what we dubbed “systems 101”. Schools might consider partnering with professional associations to offer these sorts of classes.

But if you want tech…

In the end though, if students want a library program that is very tech heavy, then perhaps they should do more research into which schools already offer that sort of program before applying. Much like at the undergraduate level, different schools emphasize different things, so it’s up to a student to do the research and do their best to get in.

Requiring More Technology Skills

The other big idea that came up in the discussion is requiring the completion of a course which involves a higher level of technology skills. While I think library students need to graduate with at least a basic amount of technology skills, I think what’s more important is knowing how and when to integrate technology into library services to best support users.

Solution?: Technology Integration

Some of the commenters also proposed this idea, at least to a degree (I admit that I have not read every single answer though).

The biggest issue I had with my required technology class (other than the fact that we couldn’t be exempted even if you had a CS background) was that much of what we learnt was not put into a practical context.

If you want students to learn how to make a PowerPoint presentation, don’t make them do something that involves lots of different animations (no one does this, or at least should do this in a real presentation), but instead, tell them to make a presentation that pitches an idea or teaches a skill for example.

In an instructional class, have students make a video a la research minute for example. Get them to work with a real library and upload it to their YouTube channel when done.

My favourite classes were ones where we got a practical project that involved learning a new technology. For example, I took a class on digital collections, so we read all the usual papers, sat through all the lectures, and we learned how to use DBTextWorks and ContentDM. That means that I now can (with a bit of wrangling) build a digital collection should I see the need (or become responsible for that sort of thing).

More than anything, I think students need to learn the situations where it would be beneficial for them and patrons to integrate technology, and if they need help, then to go ask their systems team.

Branding the Library Website: Making a Flexible WordPress Theme

In moving our website to WordPress, I wanted to create a theme that could be used by our staff when working on online projects which would sit outside our main website, but in which we would host. Obviously they have the option of using other themes, but then someone (likely from our team) would have to make sure it meets accessibility guidelines, and as there are very few of those, I thought it best to just make our theme flexible.

No CLF

This is just a disclaimer that the main reason we could even do this is because we do not have a Common Look & Feel policy from the university administration, which most universities do. On the flip side, that’s one reason I wanted to do it. I would like that the library “products” are recognized as such. Doing it through a theme would also provide a more consistent user experience across the sites that use the library’s theme.

The Header

Our existing site already used a consistent header. However, it also includes the “Ask Us” logo, which would take you to the “Ask Us” page with all the myriad ways to contact the library for help. For other sites, it’s more likely that they will want to list specific contact instead, so I added an option to remove it.

new site header — New Header with Custom Menu and Google Search Bar

In addition, of course, for any sites using the theme, they will want the name of their site in the header, so I added a text box input for that in the options page and used font-face to pick a different font to make it stand out a little more.

The Menu

The navigation was built into the original theme so that you can either use a custom menu or it will fallback to using pages. However, the way our sites are made, some of the subpages menus would have been so long as to go past the end of the page, so I added the option to take out submenus.

new header with subsite title — Header with Subsite Title, Fallback Menu, and WordPress Search

Finally, the original website search bar redirects the user to the university’s Google search of the library’s directory, so I made the option to change it to the standard WordPress search bar to search within the current site.

The Footer

Since each site may have different links in the footer, I also made an option to include custom links in the footer, such that the ‘Home’ link is the only hard-coded link (which is always the link of the home page of the site you’re on).

Full Site Footer with Custom Links and Social Media Icons

While it’s possible to make the social media buttons customizable, until there is a demand or need, I decided to simply put in the option to take them all out.

Hardcoded Part of Footer

The rest of the footer (copyright) is always there. Again, unless there is a demand or need, I didn’t make the copyright holder changeable.

Templating

As many sections of our website (e.g. catalogue/OPAC, Research Guides) are not part of the CMS, I am currently working on taking the WordPress template (minus the options) and creating a plain HTML and then a ColdFusion template to use in those sections.