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.

Evaluating Accessibility

People today use a variety of platforms to access web content. It is important for the webpage designer to follow the appropriate web standards and guidelines to make this content accessible by all visitors. The number of guidelines and standards can be somewhat overwhelming. Luckily many types of automated web tools can help pinpoint problematic elements in a website. WAVE (web accessibility evaluation tool) is a great example of a tool that can evaluate the accessibility of a website.

To use WAVE, enter a URL in the input field on the homepage. The following page will display the website you entered to evaluate, along with icons and indicators about possible errors or problems. Red icons indicate accessibility errors, while green icons indicate accessibility features. I ran the IUB Libraries website through WAVE and the received the following summary:

wave3

Most of the errors were minor, but could be troublesome for those using screen readers. Each icon can be clicked for more information and documentation about the error or feature. WAVE is defaulted to evaluate the page with the CSS, but there is an option to only evaluate the HTML.

wave1 wave2

WAVE checks for problems based on Section 508 and WCAG 2.0 guidelines. Each error is explained, with reasoning for why it’s important and how to fix the problem. There is also a link to the official standards and guidelines for that particular problem. It is important to note that this tool cannot check for every error and it does not “certify” accessibility.

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.

Wireframing with Mockflow

Recently I needed to make mockups and wireframes for a redesign of a website. After using some other cumbersome software, I stumbled upon Mockflow. This website contains an application for the creation of mockups and wireframes. Mockflow can be used for free for up to four pages, or through a paid $59 yearly subscription with unlimited mockups.

I only used the free version of Mockflow, but I liked this application most for its intuitive interface and ease of use. From the beginning I was able to use my Gmail account to log in instead of making another separate account. There are numerous different components and styles to add to the wireframe. These elements can be resized and edited down to the color and line size.

Mockflow Interface

All of the components are drag and drop, making it easy and fast to rearrange the page design. The application also had a handy auto-save feature in case the page is accidentally closed. After a design is complete, it can be exported or saved to access at a later time. With the free version, there is also an option to collaborate with another user. The paid version allows for unlimited collaborators.

The following is an example of a completed mockup. This particular example took me less than fifteen minutes to create. I’d highly recommend this application for wireframing or mockup projects.

Example Mockup

Homepage Content Strategy

Georgy Cohen recently wrote an article on Meet Content about developing a strategy for content on a homepage. It is often argued that a homepage isn’t as important today because of how a user accesses content. While this may be true for some websites, it is definitely a myth regarding academic library homepages.  A well-built academic library homepage creates a positive brand statement and efficiently guides the user towards the needed content through consistent “information scent”.  I think the following academic library homepages are noteworthy and are examples of well-organized content.

Harvard Libraries: This recently redesigned homepage put the search tool front and center, but also provides descriptions of library jargon and academic sources. Initially I didn’t know what HOLLIS was but beneath the search box a quick description described the resource. I was also drawn to the red icons in the right resources sidebar. This breaks up the text and draws attention to popular services.

Ithaca College Library: This homepage is one of my favorites because it is simple and efficient. This site only uses one drop down menu, while the rest of the toolbar resembles a mobile layout design, with key content, like books and articles, in large text. I was able to find the link to JSTOR in seconds.

Marygrove College Library: This homepage is one of the few academic libraries that efficiently uses drop down menus. There are also only three columns of text which cuts down on unnecessary front page content which can often be distracting from the main toolbar.

Northeastern University Libraries: This homepage also has a toolbar with numerous drop-down menus, but each item in the drop-down is paired with a one sentence description. This is most useful for the new library user or those unfamiliar with library jargon.

A New Way to Take Notes

When do you prefer pen and paper over mobile apps or software? I was recently asked this question and it made me realize how different the two mediums are with certain tasks. I personally cannot imagine using a mobile app to figure out a math problem, or pen and paper to write a paper. Yet there are times I’d like to save notes written on paper and be able to reference them electronically. Fortunately, LiveScribe recently debuted a new wifi “smartpen” meant to bridge those two mediums together and provide an alternative to a clunky stylus.

The LiveScribe Sky wifi pen instantly digitizes anything you write and sends it via wifi to a mobile device. It can be synced with the Evernote application, making it very easy to reference for later use. It also has the capability to record sound as you are writing, which makes it perfect for taking notes in a lecture or presentation. You can also tap the notes on the paper and the audio will play from when the notes were being written, which may help you decode sloppy text.

This smartpen must be used with special paper because a camera, built into the pen, records the position based on tiny dots within the paper. The writing is scanned at 72-dpi resolution and once uploaded to Evernote, can be searched. Currently this pen is available in 2GB, 4GB, and 8GB capacities. Users also get 500 MB of storage through a partnership with Evernote.

Tagxedo, a Word Cloud Program

I’ve recently been using various word cloud programs to analyze interactions from our online chat service and reference desk log. I’ve been comparing word clouds from different points in the semester to find trends or anomalies in the questions being asked at both service points.

After exploring many different types of word cloud programs, I’ve found Tagxedo to be a favorable option for the flexibility in design and the ease of file creation.

The homepage includes several options for creating a word cloud. For this example, I decided to analyze the content of this blog, so I put the link in the (1) field.

For past projects, I had a text file full of words, so I clicked the “start now” link and was able to copy and paste those words into a blank text box.

After the cloud is initially created, there are numerous design options of the left sidebar. This includes color, theme, font, orientation, and layout. The cloud can also be morphed into various shapes, like an apple or word bubble.

Through the “Layout Options” link, the user can find a count of the most common words and choose to exclude any of those words from the cloud. I excluded a few words, such as ‘www’ and ‘edu’ from the following cloud.

After the cloud is finalized, the user can export the file in various sizes and as a .jpg, .png, or imgur.

Wolfram Alpha Analyzes Facebook

Wolfram Alpha is different than most other search engines because it is known as an answer engine — by computing answers from the inputted data, rather than providing lists of links to outside websites. Recently, the answer engine debuted a new feature that allows one to search and analyze their Facebook profile. To access this tool you will need to visit Wolfram Alpha, and type “facebook report” in the search box. You will then need to add the app to your Facebook account.

The “Facebook report” then returns an analysis of your profile — from the number of things you’ve “liked”, the top commenters on your wall, and the most frequent words you’ve used in status updates.

I was a little surprised to see how often I used certain words, like ‘now’ and ‘summer’.

This type of information is very similar to the analytics provided to users that run a Facebook page. Similarly, you can find out demographic information about your friends, such as relationship status:

In each category there is often a “more” button that breaks down the information ever further. In the basic personal information section, the “more” button revealed the weather at my birth, the moon phase, my zodiac sign and even a sky chart!

All of this information was surprising to me because I like to think I’m careful about oversharing on social networks. From this tool alone, a company could figure out my age, demographic background, job and extracurricular activities, and some key interests. You can also search the pages of your friends, but with a more limited analysis. I was still shocked at the amount of information revealed from just their Facebook profiles.

A company or any other organization looking to understand their customers will benefit from a feature like this because only a few clicks reveal a complete breakdown of a single identity. Like I mentioned previously, Facebook already provides analytic tools for Page owners, but using this tool on a Page could help the owner understand which status updates were most successful, which users utilized the page most, and a more detailed understanding of the user demographics of those who “like” the page.