Fonts and User Experience

While editing pages on our current library website, I’ve encountered numerous pages with inconsistent font type, size, and style. We hope to fix many of these issues when the website is migrated to Drupal, but what are best practices regarding fonts and user experience?

There are no definite “best” practices concerning font and usability, but there are a few main areas that a user experience professional should take into consideration:

1. Font size

While the normal font size for most printed material is about 12px, most people sit farther from their screen than a book. The general consensus among web designers is to keep the font between 12-16px, or about .9em. Oliver Reichenstein has a blog post titled “The 100% Easy-2 Read Standard”, where he defends the use of a 16px font size because it is the size browsers were intended to display and the difficult of creating a good website with such a large font will force the web professional to make a simpler, cleaner design.

2. Font

Fonts are broken down into two categories: serif (fonts with small lines that extend from the ends of letters) or sans-serif (fonts without lines that extend from the ends of letters). Serif fonts are usually recommended for headings, or materials that are intended to be printed out on paper. Sans-serif fonts are easier to read on screens and recommended for large bodies of text. Today, most websites usually include Arial, Times New Roman, Helevetica, Georgia, or Verdana. It’s recommended to stay away from most alternative fonts because they might be difficult to read on a screen or the user will not have that particular font on their computer. In a lighter note, Google recently poked fun at the at the Comic Sans font because it is a known font to avoid in web design.

3. Line Height

Web design experts suggest paying close attention to the line height in blocks of text. If the line height is too narrow or too wide, it makes it difficult for the user to read the text. Most designers suggest increasing the default HTML line height between 110-150%.

4. Font Style

Use font styles sparingly and only to emphasize certain words or main ideas. Too many font styles look cluttered and can confuse the user. Underlining text should only be used for headings or URL’s.

5. Font Color

The color of the text should complement the color scheme of the website. Avoid using multiple font colors, which can be difficult to read. As with font styles, font color should be used to emphasize certain words.

Overall, there is no “correct” font type or style. The most important rule a developer should follow is design consistency.

Your Machine Should Not Make You Feel Stupid

At a recent DUX staff meeting, we spent some time talking about how to explain to laypeople (e.g., our moms) what it is we do in this department.  Someone offered this helpful metaphor: Ask them, “Do you ever use your computer or the Internet and feel stupid because you can’t understand how to do something—something you think should be easy to figure out?  Well,” she said, “DUX people make your machine or the website you interact with work better for you.  Your machine or a website should never make you feel stupid.”  I think that’s a smart way to look at web design and the user experience: Don’t forget you are not the user, that the tasks the user performs, while routine—perhaps even mundane to you—might truly be unfamiliar or confusing to the novice.  Therefore, design without assumptions.

When thinking about the user experience in web design, sometimes some of the simplest things slip our minds.  It’s always good to be reminded, those of us immersed in techy jargon and details, that we are probably not the target user of whatever it is we’re creating or trying to make better.  The target user might have little to no tech savvy, or might see the things on his/her computer screen in ways quite different from the average designer or usability tester.  Net Magazine, a really great tech magazine with lots of UX-related content, recently published a list of “10 UX Things We Remembered in 2012” for its year-end review.  Again, the entries on this list might seem like no-brainers, but they are easy to overlook the more one becomes assimilated to the back-end culture of web design.  I’ll let you read all ten for yourself, but I’ll highlight those entries that stood out to me most, made me utter a little “hmm” and nod my head in recognition.

#1: “You are not your customer.”  While the article is aimed primarily at commercial web design, most points are applicable to all design, including the sort of stuff we do in DUX (think: reconfiguring IUCAT and the IU Libraries website).  Authors Stuart Pill and Gavin Wye write: “It’s very easy to forget that your customers do not behave in the way that you would like them to . . . Even if you are working in a consultative role it’s easy to become accustomed to the way things are, and take for granted that people outside of your bubble will understand what you are trying to communicate.  Your customers have much less contact with your company and its products; therefore, they may need assistance with things that appear obvious to you.”

Which leads us to points two and three.  #2: “Navigating home.” Many users do not know how to navigate home, do not understand that clicking the site’s logo will typically take them to its home page; instead, they rely on their browser’s back button (assuming they landed first on the home page before moving on to specific content).  It’s strange to think of users not understanding what, to techie types at least, probably seems pretty obvious, but I can certainly see this in relation to IUCAT Classic, which doesn’t allow for a very user-friendly browser-button navigation experience.  One has to use the interface’s built-in navigation buttons or the “IUCAT Home” tab at the top of the page to get back home.  Thankfully, New IUCAT has remedied this, and it makes my heart happy to think there will be fewer confused and/or frustrated back-button clickers interacting with the catalog.

#3: “Country selection with a drop-down list.”  Here’s another supposedly obvious user task that really isn’t so easy.  The article explains: “We tested the checkout for a global retail site and found many users don’t use keyboard shortcuts to access drop-down lists.  Few people we observed knew that they could type a letter on their keyboard, use the arrow keys or hit enter to select the option.  Users still use their mouse to navigate and hence found long drop-down lists frustrating.”  Proposed, instead, is a “country selector,” wherein a user types into a traditional-looking search box the country he/she is looking for, and the box auto-completes with each letter she types.  From there, he/she can select from a much shorter, much more manageable list of countries.  However, to say, immediately, that this is the holy-grail alternative to the drop-down list is probably short-sighted, and defeats the purpose of point number one above.

Finally, #7: “The bar is still relatively low.”  “It’s easy, when you are surrounded by and immersed in the internet, to forget how hard some people find it to do things online,” caution Pill and Wye.  “The web is still a confusing place to some people.  Making tasks familiar by using established design patterns increases the chances of users completing these tasks, and so leaving your site with a sense of fulfillment and satisfaction.”  As a former teacher, Maslow’s “Hierarchy of Needs” was de rigueur in my education courses.  Maslow counts physiological needs (e.g., food, water, sleep) as paramount to a student’s success—that is, one cannot fulfill higher-order needs, such as self-esteem, achievement, and creativity, without first meeting those basic needs.  I think we can apply the same thinking to users of websites—a user cannot use and appreciate fancy-schmancy interactive features if the supposedly small things aren’t working for him/her.

Take Me Back, Wayback

Ever get frustrated with the organization and design of your website? Do you feel like you aren’t making progress during a revamp? Put the URL of the website in the “Wayback Machine” and marvel at the how the website has evolved and changed to become more aesthetically pleasing and usable.

Wayback Machine is a “digital time capsule” created and maintained by the Internet Archive. The archived data comes from “crawls” – computer programs that browse and collect data from the Internet in automation. The collected data does not include information restricted by a publisher or stored in a database. Websites also have the ability to opt out so as not to be included in search results.

When you first open up Wayback Machine, type in the URL and press “Take Me Back”. You will then have the option to pick a year and specific date. You can also see how many times the website has been crawled and the date of the first time it was crawled. Not every website is available on this archive, nor every date. Some websites may have changed in design, but others, like Google, have some of the same basic organization.

wayback

As of January 2013, Wayback Machine has information of over 240 billion URLs and over 3 petabytes of data. Although this service has been questioned for legality purposes and copyright laws, it has become especially useful for web designers, and lawyers have even attempted to use some of the archived pages as evidence of a crime. For more information on how Wayback Machine works, visit their FAQ page.

Icons Add Interest to Your Web Design

If you didn’t notice it, there’s a new OPAC (that’s a snazzy library acronym for Online Public Access Catalog), or catalog, for the IU Libraries.  It’s called New IUCAT, and it can be accessed here.  I hope you’ll use it, as it’s decidedly more user-friendly than the classic IUCAT, and it’s got lots of nifty graphics.  Actually, that’s what this post is about.  One of my minor, though unexpectedly overwhelming, tasks regarding this migration to a new catalog is to try to find some icons to represent the various media formats available in the Libraries’ collections.  When you search New IUCAT, you have the ability to limit your search to certain formats.  There’s certainly a lot of stuff in these here libraries!  See:

format icons

“What the heck,” you might ask, “is ‘realia’?”  Well, it’s games, mostly.  If, for instance, an IU library circulates Bananagrams (a game I killed at back home over winter break, by the way), they are cataloged as realia, and are represented by a little icon of . . . um . . . something.   Other icons are clearer, though, and reveal to the youngest of IU Libraries users what, for instance, the ancient artifact called a videocassette looks like.

At this time, I’m still looking high and low for icons for streaming video and floppy disks. It’s, as I said, overwhelming trying to find just the right icon.  I’ve been scouring the Internet for open-source, royalty-free icon sets to fill in the format gaps.  There are plenty available for purchase, too, but with so many creative people offering the use of their (oftentimes pretty incredibly awesome) designs for free, there’s not much need to cough up cash if you’re after something cool.

For instance, I came across several sites that aggregate these widely and freely available designs, often with lists compiling the most “amazing” and “excellent” sets one can find on the Web.  If you’re interested, here’s a particularly good collection, rounded up by Naldz Graphics.

Icons are a great way for web designers to add character to their content, to establish a tone, to craft a personality for their site that just might set it apart from the competition.  They’re also a nice way to add some flair to your desktop if, say, the Indiana winter’s gotten you down and you’ve been spending more time staring at your computer screen than you’d like.  Take a look at these familiar icons, with a twist:

web20rigami
http://blog.iampaddy.com/2008/11/12/web-20rigami/
http://7ur.deviantart.com/art/iConPack-now-with-psd-53066224
http://7ur.deviantart.com/art/iConPack-now-with-psd-53066224

Of course, you must be careful when downloading any files to your computer.  Make sure you are downloading from a reputable site, scanning for viruses, etc.  And always read the fine print.  Just because an icon set is ostensibly free doesn’t necessarily mean its creator does not require some sort of attribution for its use.  Be careful and courteous out there, and have fun.  And also let me know if you find a really neato icon for a floppy disk!

Web Content Strategy for Libraries

I didn’t go to ALA Annual this year, but if I had, I would probably have tried to go to the LITA preconference about web content strategy. As we look towards our upcoming website redesign/migration, we are actively thinking about our content and how best to present it for our users. Those of you who attended my Writing for the Web presentation at the Libraries’ In-House Institute, or who read my blog post summarizing that presentation, are familiar with Kristina Halvorson’s definition of content strategy:

Content strategy plans for the creation, publication, and governance of useful, usable content.

The ALA preconference sounds like it was a good introduction to content strategy as it applies to organizations and websites like ours, and to how it should be implemented from the very beginning of the design/redesign process. Presenters Christopher Evjy and Nina McHale have posted their slides, and they are worth at least a quick look:

Opening slide of Web Content Strategy slideshow
This image will take you to the slideshow

As always, I am interested in any feedback, questions, opinions, or chocolate! (Just checking to see if you were paying attention, there.)

 

Web Accessibility in the Library, Part 2

Thanks for joining me again!  If you are just checking in, we’ve been discussing a lot about pie as well as some tools you can use to evaluate the accessibility of an online library resource you want to offer in your collection.  We covered heading structure, unique links, and color contrast in Part 1 and we’ll continue with 4 more accessibility issues that you can evaluate using Firefox plug-ins.

Alt Attributes on Images

Why Evaluate:  Providing alt attributes on images (literally, the alt=”something” inside of an <img> tag) puts text in place to describe the image.  This is useful for screen reader users who can’t see the image so they know why it’s included in the content.  Alt attributes on images are also useful for everyone.  In the case where something goes wrong on the Internet (I know, what could go wrong?) and images won’t or can’t load, the text from an alt attribute shows in the place of the image on the page, giving any user in this situation information about the image and why it is included in the content.

Tool to use: Web Accessibility Evaluation Tool (WAVE) (plugin for Firefox)

WAVE installs as a toolbar and is available under the Tools menu on your browser after installation (Firefox restart required).  This tool, from the WebAIM group, does a pretty good job of identifying multiple accessibility issues, including missing alt attributes on images.  Click the “Errors, Features, and Alerts” button in the toolbar and the page you are viewing in your browser will be reloaded showing various icons all over the page.  The ones you want to watch out for are icons in red.  Mouse over any of the icons and you will see information about the error (red icon), feature (green icon), or alert (yellow icon) that is indicated for the element the icon is near on the page.  Missing alt attributes are indicated by a red icon with a white diagonal slash.

Picture of pie from Wikipedia ‘pie’ entry showing WAVE icon for missing alt attribute.
This pie is sad because it has no alt attribute. Or whipped cream.

If you see these, you’re probably on a page that doesn’t even have valid HTML and the likelihood that the page is accessible has just plummeted.

Screenshot of Wikipedia ‘pie’ entry with WAVE icons.
This is your Wikipedia pie on WAVE. Any questions?

TIP:  To return to the original view of the web site without the lovely WAVE icons, use the “Reset Page” button in the toolbar (also available under the Tools menu for WAVE). Reset Page button from WAVE toolbar.

Continue reading “Web Accessibility in the Library, Part 2”

Web Accessibility in the Library, Part 1

Julie Hardesty is the User Interface Design Specialist in the Digital Library Program, a partnership between the Libraries and University Information Technology Services at Indiana University.  She is also located in Wells Library, but not within pie-throwing distance, unfortunately.  She does like pie, though.  Julie is a huge fan of web accessibility and generally making things on the Internet easy to understand and use.  She is reachable at jlhardes@iu.edu.

Would you know how to tell if an online resource offered in your library is accessible for screen reader users or keyboard-only users or users on mobile devices?  Many vended online library resources suffer from inaccessibility and, as a result, a lack of usability for anyone who tries to use them, regardless of the device used for access.  As the gatekeepers to scholarly information at Indiana University, we have the power to make choices and recommendations that will improve the access of our online resources as well as the overall experience that is discovering and using information at IU.  The following are seven ways to take stock of the accessibility of an online resource (and the tools to help you measure that stock).  Consider using these tools the next time you are reviewing a resource for purchase or recommending a resource to conduct scholarly research.  Disclaimer (or support): these tools are only suggestions – there are others available but these are the tools I like to use.

ALA Accessibility Challenge:  If you are going to ALA this month in Anaheim, California, ask a vendor or two on the exhibit floor about the accessibility of their products.  And don’t take a VPAT for an answer (it’s just a form, it does not guarantee that what they are currently trying to sell you is, in fact, accessible).  Ask about headers and unique links and form labels and color contrast for the site they have on display in the exhibit (see details below).  These are things that affect accessibility and anyone trying to sell you a web site should be able to discuss them.

Heading Structure

Why Evaluate: The list of headings (h1 – h6, in HTML lingo) is a shortcut that screen reader users can use to “scan” the page for content, similarly to how a sighted user would scan a page.  Arguably, a lack of heading structure on a page can make things difficult for a sighted user to make sense of the content as well.  If headings are considered within the content, the content is more likely to be broken up visually and the focus for the page will be more obvious.

Tool to use: HeadingsMap (plugin for Firefox)

HeadingsMap for Firefox will appear under your Tools menu in the browser once installed (Firefox restart required).  Triggering this plug-in will open a column on the left side of the browser window showing a hierarchical list of headings on the page.  Anything in red/pink indicates a heading that is out of order.  This tool makes it very easy to see the headings and their hierarchy and any potential problems.

Headings list shown in HeadingsMap for Wikipedia ‘pie’ entry.
Pie might be important here.

Continue reading “Web Accessibility in the Library, Part 1”

More responsive design

Call me a nerd (I admit it! It’s true!), but I just can’t get enough of looking at responsive design. Ethan Marcotte, Mr Responsive Design himself, recently wrote a piece for .net magazine listing his twenty favorite responsive sites. I had the pleasure of hearing him speak at re:build this July – not only is he tops for UX & such, but he also came across as a super-nice guy with a sense of humor (exhibit A: his website, unstoppablerobotninja.com).

Check out our earlier post on responsive design for more info, or have a look at this super-quick video to see a very simple responsive design in action.

A Simple Demonstration of a Responsive Web Design from Monkey Do! on Vimeo.

Accessibility Tip: Header Tags

As good information practitioners, we all know to put “alt” tags on our images and make our text legible for users with disabilities. But one aspect of accessibility often overlooked by the producers of web content is the structure of individual webpages. We’re more concerned with the alignment of a paragraph under a title than we are the association of that paragraph to the title. We create long blocks of text separated into flat paragraphs, without marking where one section ends and another begins. If we do use header tags to mark pages and sections, we think of them as style elements: they make certain text bigger and more visible. But header tags are not merely decorative: they are an essential element that denote the organization and meaning of the content on your webpages to screen readers.

If you use font styles or sizes to mark your section headers, this is what the page looks like to a sighted user:

Page Title

Section 1
Text text text text text.

Section 2
Text text text text text.

It seems nice and hierarchical, with a clearly defined structure, doesn’t it? But this is how a screen reader processes it:

Page Title. Section 1. Text text text text text. Section 2. Text text text text text.

In order to find “Section 2,” the user has to wade through the rest of the page. Since all of the text has equal weight, they can’t use the handy features of their screen reader software to scan the page quickly for a sense of its structure and contents. However, if you mark up “Page Title” as header 1, “Section 1” as header 2, and “Section 2” as another header 2, users with screen readers could read the page the same way a sighted user would.

Beyond accessibility, proper structuring of webpages takes us one step closer to the semantic web we all love to talk about. <strong> means “strong.” <em> means “emphasis.” Neither of them mean “I start a new section.” This is what headers are for!

With this in mind, make sure your headers follow the proper order when you apply them to your webpages. Another issue that arises from thinking about headers as styling elements is that people are sometimes tempted to skip over <h1> and use <h2> or <h3> because they’re smaller and fit what the designers want it to look like on screen. This makes as much sense as putting a title in the “subtitle” field of a book record because it looks prettier that way in the online catalog! If you put an <h2> tag in your webpage, you must have an <h1> before it. Then you can use CSS or the “style” attribute to modify the font size and looks, e.g. <h1 style=”font-size:120%”>.

Note: In the IU Libraries Content Manager, the title you enter for your webpage (the “page name”) will always be in <h1>. Each webpage should have only one <h1>, so begin your page content headers with <h2> and go down the line.

For more information on structuring webpages with headers, see the W3C’s HTML Techniques for Web Content Accessibility Guidelines. The Accessibility and Usability Guide for Penn State also offers practical advice and examples, with nods to other common pitfalls in structuring HTML documents.

Nice to meet you, Content Strategy (A polite introduction)

If you hang out in the same general virtual space as information architects, user experience specialists, and the like, you may have started hearing the phrase “content strategy.” (Or maybe you haven’t – but I bet you will.) What the heck is that, you may wonder? And what’s that got to do with me?

Wonder no more. Reader, meet Content Strategy. Content Strategy, meet Reader.

As an emerging discipline, content strategy is one of those multi-talented beasties that draws from many different disciplines and sources. In general, it includes:

  • elements of editing, of curation, of information architecture, and of user experience design.
  • the process of managing – not necessarily creating – the content on a website (you know, the actual reason people come to your website in the first place), making sure it’s clear and usable, making sure there’s no ROT (content that is Redundant, Outdated, or Trivial), making sure information is displayed in places and in contexts that make sense, and so on.
  • analyzing and inventorying the existing content on a website, identifying redundancies and gaps.
  • managing the metadata on the site, so that people can find what they are looking for.
  • working with all of the site’s content providers to help them create content that is clear, timely, and consistent with the overall style and mission of the site.
  • selecting a content management system that will work with users in such a way as to make it easier for them to create good content, and will help them to repurpose content so that it can display in multiple places rather than rewriting it over and over (once for the mobile site, once for a branch library site, once for a policies page, once for a link on Oncourse… you get the idea).

Sound like stuff we might need to do with the IUB Libraries website? Well… yes indeed! Whether or not you hear the phrase “content strategy” in the near future, some of what you’ll be hearing from DUX as we move forward towards a better website will be driven by the principles of this emerging discipline.

If this all sounds kind of intriguing, here are a few resources that will help you understand content strategy a little better.

Start here: The Discipline of Content Strategy by Kristina Halvorson. This article from A List Apart is a nice introduction, covering some of what I mentioned above and more.

If you liked that, you might want to read more articles on content strategy from A List Apart; it’s one of the topics they cover regularly. Check out, for example, “Infrequently Asked Questions of FAQs” – and then think about whether an FAQ is really the best “container” for the information you are offering your users. That’s content strategy in action!

Another introductory article I really like is “Content Strategy Can Save Us All From Slobdom” by Meghan Casey, from the Brain Traffic blog. This is not an in-depth article, but it uses a metaphor many of us understand all too well – trying to clean up a cluttered, messy bedroom. Read through the entertaining description of how the bedroom problem is solved and you will clearly see how the content strategy process works and how it can help your website be neat and tidy, with its contents easily findable. Plus, it has Fraggles! What’s not to love? Brain Traffic has much, much more to offer the budding content strategist or the curious onlooker – highly recommended.

For those of you (myself included!) who still love books made out of paper, here are a couple that we can recommend; DUX has desk copies of these but you may have trouble prying them out of our grubby little hands (we’re actually referring to them with some frequency as we begin to evaluate our website and plan a content analysis):

Content Strategy for the Web book cover Halvorson, Kristina. Content Strategy for the Web.
Berkeley, CA: New Riders, 2010.
The Elements of Content Strategy book cover Kissane, Erin. The Elements of Content Strategy.
New York: A Book Apart, 2011.

Of course, most people who serve as content providers for a website like ours don’t need to become content strategy specialists. Not at all. But understanding the basic concepts will help you to understand how to create better web pages, and why DUX makes some of the decisions that it does about the Libraries’ website as a whole. (And as a bonus, it seems that content strategists are often pretty good writers – a lot of these articles are very readable and even entertaining!)

Questions? Comments? Thoughts? Leave a comment on this blog post, use the “Contact Us” form, or talk to anyone in DUX! We’d love to hear from you.