Website Design

Contrast Makes Websites Easier to Read

Cecily Walker clued me in to the beta Multnomah County Library website and made an apt comparison to my Plainest Library Website Ever doodle.

Here’s the new MCL site:

They’ve whittled it down to some important basics. I’m impressed.

The layout is pretty good, but the page is difficult to read. Click through and you’ll see what I mean. The gradients and transparencies reduce contrast between element and the background image is distracting. The lack of contrast is really apparent when looking at the logo; it blends into the background and has no impact. The site reminds me of bing.com, but notice how the image Bing uses is more like texture than an image of a particular thing. This makes it less distracting. Also the search box is solid white, increasing contrast.

Removing gradients and the background image from the MCL beta renders the page very plain, but much more readable (and actually quite similar to my previous doodle).

But this revision is problematic too. While is is a lot easier to read – and calmer – it has very little visual interest and makes the library seem lifeless. Surely there’s a way to add some visual interest that isn’t distracting, doesn’t sacrifice legibility, and is more than decoration. Here’s a quick attempt:

With some overlaid text, the bottom third+ of the page could be an image carousel effectively advertising library news and events. It could also connect people to popular parts of the site, or it could set the tone for using the library:

Notice that a big image carousel removes the need for the small grey one. This helps because the search box and grey carousel are so similar in size that they compete for our attention. In this mockup there’s more contrast between the two.


This concept isn’t launch ready but it is headed in a good direction.

The site suffers from contrast problems on subpages too. The grey text on a barely transparent brown background is difficult to read.

Here’s the same page, black on white (and section headers emboldened).

I’m looking forward to seeing how MCL polishes up the site!

Read More
Thought Experiment: Plainest Library Website Ever

Read More
Libraries, Typography and Reader Mood

Getting libraries to take typography seriously is a bit of a hard sell. I certainly understand that there are bigger picture issues for us to think about. And I get that fretting over the shapes of letters can seem a bit precious.

But the typography we use affects how our members perceive us. So it is worth thinking about.

A short paper titled The Aesthetics of Reading [pdf] confirms that good typography leads to better experiences. I found this bit about perceived elapsed time particularly interesting:

…we found that participants in the poor typography condition underestimated their reading time by 24 seconds on average, while participants in the good typography condition underestimated their reading time by 3 minutes and 18 seconds on average.

The study also reports that good typography can make people more creative and in a better mood!

With the candle task we found that 4 of 10 participants successfully correctly solved the task in the good typography condition while 0 of 9 participants correctly solved the task in the poor typography condition. This is a reliable difference, ?2 (1) = 2.47, p < .05. This indicates that participants in the good typography condition were in a better mood before starting the candle task then were the participants in the poor typography condition.

Having read this paper, I now feel more justified to blather on about typography. (Consider yourself warned.)

Dmitry Fadeyev at Usability Post has a nice summary of the paper: Effects of Typography on Reader Mood and Productivity

Read More
Excellent Writing on the SPD Blotter

Voters in Washington just passed Initiative 502, decriminalizing the possession of marijuana for adults. To help everyone understand the new law, the Seattle Police Department wrote Marijwhatnow? A Guide to Legal Marijuana Use In Seattle.

The post uses a great conversational format, is easy to understand, and avoids using a boring, corporate tone. I’m really impressed.

Examples:
……
Can I smoke pot outside my home? Like at a park, magic show, or the Bite of Seattle?
Much like having an open container of alcohol in public, doing so could result in a civil infraction—like a ticket—but not arrest. You can certainly use marijuana in the privacy of your own home. Additionally, if smoking a cigarette isn’t allowed where you are (say, inside an apartment building or flammable chemical factory), smoking marijuana isn’t allowed there either.

What happens if I get pulled over and an officer thinks I’ve been smoking pot?
If an officer believes you’re driving under the influence of anything, they will conduct a field sobriety test and may consult with a drug recognition expert. If officers establish probable cause, they will bring you to a precinct and ask your permission to draw your blood for testing. If officers have reason to believe you’re under the influence of something, they can get a warrant for a blood draw from a judge. If you’re in a serious accident, then a blood draw will be mandatory.

What happens if I get pulled over and I’m sober, but an officer or his K9 buddy smells the ounce of Super Skunk I’ve got in my trunk?
Under state law, officers have to develop probable cause to search a closed or locked container. Each case stands on its own, but the smell of pot alone will not be reason to search a vehicle. If officers have information that you’re trafficking, producing or delivering marijuana in violation of state law, they can get a warrant to search your vehicle.

SPD seized a bunch of my marijuana before I-502 passed. Can I have it back?
No.

Will SPD assist federal law enforcement in investigations of marijuana users or marijuana-related businesses, that are allowed under I-502?
No. Officers and detectives will not participate in an investigation of anything that’s not prohibited by state law.
……

Have anything complicated to explain on your library website? Take a lesson from the SPD and emulate this style. Remember: improving your content is one of the most effective ways to improve your website and no tech skills are required. Read Letting Go of the Words and Revising Prose for help.

Read More
Why Doesn’t Netflix Offer Advanced Search on Their Site?

Nothing is purely additive unless everyone uses it: If there’s an affordance to use a feature, the affordance is a distraction to everyone, while the positive value accrues only to the users and potential users. The net value of a feature is the value to the users of the feature, divided by the distraction of the affordance to everyone. Advanced search ends up being used by such a tiny fraction of users (sub 1%), that it can’t possibly pay for its cost. And yes, obviously we have thought of burying the affordance for people who don’t use it.

Netflix’s Chief Product Officer answers a question about search on Quora.

I’m not posting this to badmouth advanced search. I’m more interested the larger lesson.

The formula of Net Value = Value / Distraction is extremely useful, and we can use it to think not just about our library websites, but to our entire organizations.

What library services and programs offer the most value and least amount of distraction? What distractions can you eliminate to increase the overall value of your library?

Read More
Starting with Simplicity

There are lots of ways to make life easier for the members of your library, but the simplest might be to step back and rethink your website.

In “The Benefits of Less,” I advocated for reducing the size of library websites. Doing so makes them easier for libraries to manage and, more important, easier for library members to use. I’m not the first to advocate content restraint, and I’m not the only one preaching this. Recently, Matthew Reidsma, web services librarian at Grand Valley State University, MI, wrote about cutting some 70 percent of the content from his library’s site and how no one noticed (matthew.reidsrow.com/articles/19). Writing about the fold on web pages—the parts of the screen users see when a page opens without scrolling down—Reidsma suggests an aggressive method for cutting content:

For now, here are some rules for dealing with content below the fold.
1. Get rid of it.
2. Go to rule 1.

This might be slightly simplistic, but it certainly has the right sentiment. Actually, wrangling content doesn’t have to be much more complicated than Reidsma’s suggestion. As always, the needs of library members should guide us as we make these decisions. Since library members the world over have similar library website needs, it’s possible to make some generalizations about what content library websites should have and how the sites should be designed.

To be sure, libraries must be responsive to their communities and offer individualized services, but typical web UX and design are not generally an area where libraries are going to innovate. Instead, better to benefit from the collective experience of other designers and focus limited resources on customization elsewhere. There are great efficiencies to be had if libraries were to join forces for website development efforts. It seems silly that libraries across the country are working alone, trying to solve the same ­problems.

Heading toward one page

Collaborating on library website development doesn’t be complicated. As a proof of concept, my UX colleagues Nate Hill and Amanda Etches and I created a sample library website template to illustrate this. It solves numerous common library website problems, and the result is a site that’s simple but better than most.

Our example features plain writing, highly legible typography, the basic content people want on a library site, and nothing more. Additionally, the site is responsive, meaning that it adapts gracefully to all desktop and mobile browsers. This gives mobile users the most appropriate experience without requiring any extra work for librarians. This One-Pager template is free for libraries to use under a Creative Commons license so you can download the code and fill in your own content. For more details, visit influx.us/onepager, or try the demo at influx.us/­onepagerdemo.

Nail the simple stuff

You’ll notice that there isn’t any interactivity built in to One-Pager. Some might consider this a limitation, but we think of it as a restriction leaning toward advantage. Advanced website features are worth pursuing only if they rest atop a solid foundation. The majority of library websites don’t meet basic standards of usability, appropriate writing, and graphic design. They lack this groundwork and should get the basics right before moving forward. Scaling back is a way to make this happen.

I’m not a strict reductionist and fully support libraries aiming toward the development of interesting, higher level aspects to their websites, such as Ann Arbor Library District’s Treasure Quest summer game, which offered clues and earnable points to participants online. But we have to nail the design fundamentals first—and focusing on one great page for every library could be our most direct path to success.

This first appeared in “The User Experience,” a column I write for LJ.

Read More
One-Pager at Chester Public Library

The Chester Public Library in New Hampshire implemented Influx’s One-Pager template for their library site. I noticed some friendly writing explaining a sane library policy.

What fines do I have to pay if I return an item late?
We are easy going people. We do not have late fees/fines. A conscience box is located on the counter for you to make a donation for late items. Privileges may be temporarily suspended if items are a few months overdue. Please be courteous to fellow library users and bring your items back in a timely fashion.

Read More
Is the Library Open?

A fun single serving type site from the Durham County Library: Is the Library Open?

It has an effective responsive design and the code is available for all to use. Yeah!

Read More
One-Pager 2.0

About a year ago my partners at Influx and I released One-Pager, a free template for library websites.

We’ve updated it and it is better than ever. In fact, good implementations of One-Pager will be better than most library websites.

With this update the code is cleaner and more efficient, and we’ve added some responsive elements so that it formats well on any browser. Check out what happens on a mobile device. The image disappears and the menu adapts so that the most important tasks can be taken care of easily.

One-Pager is intentionally different than most library websites. Try out the demo and read more about the ideas behind One-Pager on Influx’s site.

Read More
Romanian Library Campaign

I’m not really sure what the metaphor is here, but this is a new advertising campaign for Romanian libraries.

See it at Cautatorii de Povestri.

[via Meaghan O’Connor]

Read More
1 2 3 4 14