Categories
Technology

Performant Art at An Event Apart

A List Apart is one of the pioneering sites for web design, having been at the forefront of many important web design movements, such as standards compliance, responsive design, and css-grid. In addition to the articles on their site, they also publish books and hold conferences about web design. This year they held a special Event Apart in Denver, which I was lucky enough to attend. The talks ranged widely in topics, from new CSS techniques, to Progressive Web Apps, to image optimization, animation methods, and usability research. But many of the talks returned in various ways to improving the performance of sites–making them smaller and faster and more user-friendly–and how sites could still express the individual artistry of the designer.

Wireframe of generic website by Dave Ellis of novolume.co.uk, published in the blog post “All Websites Look the Same,” in 2015.

There is not necessarily a tension between performance and art, but web design recently seems to be experiencing some growing pains as it becomes more central to larger organizations, produced by trained experts working in larger teams, more shaped by research, testing and analytics, and more homogeneous in its look and feel. Many of the Event Apart speakers were the young pioneers of the early, more individualistic and experimental, years of the web. Now the aged veterans of web design, and some of their younger acolytes, seem to yearn for the days before web design accrued so much bureaucracy.

I don’t know if you’ve noticed, but lately all websites look the same. There is a large “hero” image–often an image carousel, which currently rivals Comic Sans as the bête noire of web designers–with your website’s name and nav menu at the top, a big headline and a “call to action” button. Beneath that some text and a row of icons with text that promote three or four features of the site or selling points of the company, and below that maybe a contact form or testimonials from clients.

 

There are some good reasons why this design pattern has become so widespread. Indeed, some designers have defended the ubiquity of this design, arguing that it reflects what users expect from sites these days, and that it is a natural consequence of the many shared tools designers use. But, for designers who would like their craft to be more of an avenue for artistic expression than a homogenous product, this kind of standardization is frustrating.

More than one presenter at the conference talked admiringly of the experimental early days of web design, when designers were improvising layout tools from table elements and images (see, for example, the old Space Jam site). Some even seemed to yearn for the days of Flash sites, which, whatever the problems with Flash as a technology, were seldom predictable. But unpredictability is seldom a boon to usability–and that is a tension web design will never resolve.

My favorite talk of the conference was by Jen Simmons, who hoped that the new CSS-grid layout tools will help the web be more artistic, but still clear, usable, and performant. A good deal of her presentation was about her research into the principles of print design, and how web designers can learn a lot from print about how to make creative designs that are still readable and clear. Similarly, Cassie McDaniel looked for inspiration in the work of some famous industrial designers, who obsessively designed and redesigned chairs. They produced many versions of these objects that served their utilitarian purpose well, but were still also vehicles for their designer’s individual artistic expression. It remains to be seen if web designers manage the same trick.

Categories
Technology

Enduring Web Design Mistakes

The Nielsen Norman Group is one of the world’s leading user research firms, and they recently completed a study of more than 40 websites in the US and UK to compile a new list of the “Top 10 Enduring Web-Design Mistakes.” Unfortunately, as their title hints, the list is new but web designers have been making these same mistakes for years:

  1. Unexpected Locations for Content: navigation links that don’t give users a clear idea of what they will find by clicking them.
  2. Competing Links & Categories: navigation links that are too similar, leaving users to guess which ones contain the information they need.
  3. Islands of Information: information scattered around the site, rather than grouped together in a logical way.
  4. Repetitive Links: frustratingly long series of clicks to get to information users are looking for.
  5. Hidden Fees & Prices
  6. Stranding Users on Microsites: topic- or organization-based subsites or sections that don’t allow users to easily return to the parent site.
  7. Poor Search Results
  8. Flawed Filters & Facets
  9. Overwhelming Users with Information
  10. Hidden Links: links in text or navigation that look more like images, ads, or headings rather than links.

Based on my own experience, library websites in particular tend to have useful content in unexpected locations (#1), and often overwhelm users with information (#9). Especially with the proliferation of vendor-hosted online resources, library website users often get stranded on microsites (#6) and have to range widely for information scattered about different pages, sections, and sometimes domains (#3).

Some of these problems are more difficult to solve than others, but all can be addressed to make your life, and your patrons’ lives, easier. If you think your library’s website may suffer from one or more of these errors, but are unsure how to fix them, contact me and I would be glad to consult with you about ways to make your website more useable.

Categories
Technology

What Makes Something “Usable”?

The Web can be frustrating to use these days. Videos and animated GIFs start playing automatically; your cursor movements trigger unexpected events; ads expand and shrink, pushing and pulling the content around; windows pop up or slide in as you scroll; and, weighted down with scripts and server calls, pages take seconds rather than milliseconds to load. Some websites almost feel as if they were designed to put obstacles between you and what you want to accomplish online.

When was the last time you had a really good experience online, one that made you think, boy, that was much easier than I expected? Maybe it was even pleasant or fun?

What are the differences between these two types of experience? What makes one website more usable than another?

Designers have actually put a good deal of thought into answering this question. There are some well-known definitions of usability, such as that from Jakob Nielsen, one of the leading experts on user-friendly design and user research. There is even an international standard that defines usability.

But I like to think of usability less as an abstract definition, and more as a set of characteristics that any usable system should have. There are some well-known design guidelines for usability, the ten from Jakob Nielsen being probably the best known. But I have boiled them down to four basic characteristics:

A usable system…

  • Is accessible to all the people who might want to use it
  • Always lets you know where you are, what’s going on, and where you can go next
  • Is well-behaved: logical, consistent, and predictable
  • Helps you avoid errors, but if you make one it will let you know, and give you ways to recover gracefully from your mistake

Let’s look at each one of these characteristics in turn, and how they might apply in some specific circumstances. Also, you might have noticed that I started out talking about websites, but have now shifted to the broader term “systems.” These are general principles of usability that can be applied to any system, from computers, to photocopiers, to circulation desks.

Accessible to All Who Might Want to Use It

If someone wants to use your website, or your library’s computer, or your photocopier, there should be as few barriers as possible to them doing so. In website design, this means your website should work just fine regardless of what computer system or browser someone uses, or whether they use a desktop, laptop, tablet, or phone.

Similarly, if any of your users have impaired vision or other disabilities, your website and other systems should still be easy for them to use.

Finally, a usable system avoids language your users might not understand. This can mean making translations into other languages available, but it also means avoiding jargon or culture-specific terms that many of your users won’t understand.

Always Lets You Know Where You Are

Have you ever been lost in a mall or campus, getting increasingly frustrated as you wander around looking for a useful map? Now imagine that you find one, but it doesn’t have a prominent You Are Here indicator on it. Usable systems give you lots of tools for figuring out where you are, and clear signs telling you where you should go to accomplish your tasks.

For websites, that means your menus and other navigation links use clear and descriptive terms, giving users a good sense of what can be found on each page. Usable sites also give you clues to where you are within the structure of the site. Some sites use “breadcrumbs”–little links usually near the top of the page that show the path back to the homepage. Navigation links can also change appearance to indicate what section of the site you’re currently in.

Usable systems also let users know what’s happening. A spinning wheel or progress bar, for example, indicates that a webpage is still loading, or a download is still in progress. Computers and other machines should clearly indicate when they are ready to use, or in the midst of a process that will affect the user’s experience.

Is Well-Behaved

doors with handles and signs above the handles reading "push"
Photo: Pinterest

Well-behaved systems are logical, consistent, and predictable. On a well-behaved website, for example, a link will always look like a link, and events like a video beginning to play, or an image getting larger or smaller, won’t happen until the user purposely triggers those events. The text of a hyperlink won’t promise one thing, like the library’s hours, but instead open a page describing the library’s history. A clickable button will always look like a clickable button, regardless of what page you’re on. That’s consistent, logical, and predictable behavior.

We want that same good behavior from other systems. Imagine, for example, that where you went to check out books in the library changed from day to day. Or that the power button on your photocopier looked exactly the same as the Copy button. Such inconsistent and unpredictable behavior would almost certainly leave your users frustrated.

Helps You Avoid & Recover from Errors

At one point or another, we’ve all said a prayer of thanks for the “undo” function in a word processor, or the “are you sure you want to do this?” message before deleting a file we didn’t mean to delete. These are ways software systems help us avoid errors and recover gracefully from our misclicks and uninformed choices.

Easily accessible links, clear language, and good navigation on a website are other ways to prevent user error and allow for easy recovery. A “page not found” message on a website will tell the user that the page they wanted is not there, but it could be more useful by also suggesting other pages or allowing the user to search for the page they wanted.

In other systems, clear signs and instructions can help users avoid errors, and knowledgeable, helpful, and readily available staff can help them recover gracefully.

How to Tell if a System is Usable

One way to tell if a system is usable is to simply take a list of the characteristics of a usable system and ask yourself if your website, ILS, reference desk, or what-have-you, has these characteristics. That’s a start. But the best way to know is to evaluate the system with actual users.

Simple user research methods, done with only a handful of participants, can give you lots of useful information about ways to make a system more usable. Plus, there are lots of great free or very inexpensive resources that can help you get started.

One of the best places to start is Usability.gov. It’s a great source for usability guidelines and user research how-tos. In particular, see their User Research Methods section for overviews of various kinds of evaluations.

The Nielson Norman group is a leading usability research and consulting agency, and they frequently publish reports that are appropriate even for those new to user research. Nielsen’s Usability 101 article is a good introduction to the principles of usability and user research.

Finally, I highly recommend the books Don’t Make Me Think and Rocket Surgery Made Easy, by Steve Krug. His business name, Advanced Common Sense, nicely sums up his philosophy on usability. His books focus on the usability of websites, but, as I’ve argued, these principles and research methods can be applied more broadly.

So is it worth designing usable systems? I don’t know anyone who would answer no to that question, and yet it’s easy to let other priorities take precedence in the course of day-to-day life. I invite and encourage you to take a moment (or longer) evaluate the usability of your systems, and to think of this work as part of your overall patron-service strategy.

Featured image: “key” from KK Studios series, The Uncomfortable

Categories
Technology

How and where to get free images for your website

Where can you go for free, high-quality images that you can use on your website without worrying about any copyright issues?

Let’s start with what NOT to do:

  1. Don’t just go to Google Images – mostly are fully copyrighted images that you can’t use without the owner’s explicit permission. If you choose to use Google Images, be sure to filter by usage rights.
    access Usage Rights filter by clicking Search Tools on the Google Image Search interface
    Google Image Search using Search Tools to filter results by Usage Rights
  2. Be careful with what’s called “royalty-free images” – they aren’t free at all most of the time; “royalty-free” just means that you don’t have to pay royalties when using them.
  3. Ignore major stock sites like iStock, Shutterstock, Fotolia … unless you want to invest money in your images, in which case, go for it.
  4. Don’t take images from other people’s sites unless they allow you to do so. Taking an image and displaying it on your site isn’t “fair use,” even if you’re linking to the source.
  5. Don’t “hotlink”. Hotlinking is when you use the url of an image on another website and make it display it on your site.

So, what should you do then?

First of all, try to get images that are made available under the CC0 License. CC0, Creative Commons Zero, is basically a “No Rights Reserved” copyright that states you can do whatever you wish with the image, and that you don’t need to credit the source if you don’t want to.

Here are my favorite sources of such images:

  1. MyStock Photos
  2. Unsplash.com
  3. JayMantri.com
  4. New Old Stock (nos.twnsnd.co)
Categories
Technology

6 Things You Can Do to Make Your Website More Accessible

Sometimes it is hard to know where to start with a website, let alone with accessibility. Here are a few things you can do to move your website toward better accessibility.

This isn’t a comprehensive list, but a practical starting point.

Perceivable Content

When a screen reader is reading your website, it uses image tags and labels to explain the visuals.

  1. Add meaningful “alt” text to images (“img123” is not meaningful; “smiling kid reading book” is meaningful).
  2. Make sure all your form elements are labeled.
  3. Use good color contrast for text foreground/background. White on white is REALLY hard to read :). Here’s a color contrast checker. Get to Level AA.

Usable Interface

If your website was a building you would have to unlock the door if you expected folks to come in, so unlock the metaphorical door by making sure your site is usable.

  1. Make page navigation/links possible using only the keyboard. Try starting with your cursor in the URL bar and then tabbing your way through. Check if your tabs flow in order or if you jump around the page.
  2. No page content flashes more than 3 times per second. 1999 called and they want their seizure inducing style back. Seriously. Prevent seizures.
  3. Make the purpose of each link obvious from the link text alone.

If you want a full overview of the current status of a live site, run it through Web Accessibility Evaluation tool. It’ll highlight the good things you’re doing along with the bad to give you a better idea of where you can focus your accessibility efforts.