Why you should judge a book by its cover

Everyone knows the saying “don’t judge a book by its cover”. In his two Ted Talks, book designer Chip Kidd, the associate art director at Knopf, gives us a compelling reason to do so. These talks will make you think, make you laugh, make you want to read, and finally will make you look at all design in an entirely different light.

In the 2012 talk titled Designing books is no laughing matter. Okay, it is, Kidd describes the thought process that goes into creating book covers. He focuses on the importance of imagery, first impressions, and how book cover design influences the way you as the reader will perceive the story.

With his 2015 talk The art of first impressions — in design and life, Kidd gives the listeners an important lesson. That first impressions matter and our design choices (even the ones most of us never even think to notice) have an impact on how we see the world around us. He shows us how good design can grab your attention and the wrong design can leave a bad taste in your mouth.

Creating the Right Title for a Web Page

Choosing the right title is a crucial factor in helping people find and understand the content you create on the website. This applies to all content on the Libraries’ website including:

  • basic pages
  • subject posts
  • subject concentrations
  • news and events
  • PDF files

The title is used in several ways, particularly for generating the URL and for determining how your content will appear in search results (both within the Libraries’ website and in external search engines like Google).

Page URL:

Drupal automatically uses your page title to create the URL, omitting any punctuation included in the title and inserting hyphens between words. For example:

You will notice that if the page title is very long, the URL is also very long. For frequently-cited pages (for example, if the URL will be used as part of a publicity campaign, or if it is likely to be given over the phone), we recommend using a short page title, so the URL will be short as well. If that’s not possible, DRS can create an alternative URL upon request. For example, the Herman B Wells Library has the URL http://libraries.indiana.edu/wells.

If multiple items have the same title, Drupal will automatically append numbers so that the URL is unique. For example, we currently have the following on our site:

If you create a new item (page, concentration, etc.) and notice that Drupal has appended a number to your URL, you should reconsider your title!

When a URL is changed, Drupal automatically creates a redirect so that if a user has a link or bookmark to the old URL, they will be sent directly to the new one. In the Wells example above, the URL http://libraries.indiana.edu/herman-b-wells-library will still work. So don’t hesitate to edit your page title.

(NOTE: If you change your title and then change it back to the original, you will create an “infinite loop” in which the site redirects to the old title, then back to the new one, which redirects to the old one, and so on. If you are logged into the site, you will see an error message to this effect. Users who are not logged in will get an “access denied” error. If this happens, contact DRS – libweb@indiana.edu – and we can fix it.)

If you have an item for which the auto-generated URL has a number at the end, and you’ve determined that there is no longer another page with the same title – if the other page(s) have been deleted – DRS can edit the URL to remove the number upon request. A redirect will be created so that anyone who has the numbered URL linked or bookmarked won’t be left behind.

Search Results:

Title is a critical element in helping your users understand their search results and find the content that will be most helpful to them. This is especially important for subject concentrations, which do not include any descriptive summary within search results:

screenshot of website search results for "history"

“European History” gives the user a clue as to whether this link will be useful to them or not; the ones just titled “History” are a mystery until one actually clicks on them. Similarly, a concentration title of “Food” would suggest that this might be where you can find information about food availability in the libraries; “Food Studies” is much more descriptive. (Although search results are labeled with their content type, e.g. “Basic Page” or “Concentration,” these may go unnoticed or may not be meaningful to some users.)

Your title should give some context for your content. When users find your page via search, they do not have the additional context of your subject guide or division landing page to help them understand what they are looking at – they won’t know what department, unit, or subject your content refers to, so they may think it pertains to the Libraries as a whole. What does your content specifically pertain to? What is the page about? Who is it intended for?

“How to Find Science E-books” – NOT “E-books”

“Upcoming Events in the Wells Library” – NOT “Library Events”

“Contact the Discovery & Research Services Dept” – NOT “Contact Us”

Note: Titles that are too long may be truncated in search results, so keep your titles reasonably concise and put the most important keywords early in the title if possible. A maximum of 65 characters is a good goal. Subject concentration titles should be shorter – aim for four or five words at most if possible.

Additional Reading:

“Introducing Your Content: Page Titles and Headings” – Rick Allen http://meetcontent.com/blog/introducing-content-page-titles-headings/

This is an excellent, thorough overview of things to think about when creating page titles, with a higher ed focus and some helpful examples.

 

Image-ine That: Writing good “alt text” for images on the web

As the Libraries prepare to move into our new Drupal-powered website, we are also preparing to think differently about how we use images. The new site, in keeping with current trends on the Web, will be somewhat more image-heavy than the old one. Working with our colleagues in the Advancement Office, we plan to offer guidance to help content creators find and select images that will convey the tone and “brand” our website needs to communicate while being both pleasing and informative for people using the site.

Once you’ve chosen an image, you will want to consider providing “alt text” – a text alternative to the image, stored in a metadata field along with the image (any content management system, including our new Drupal system, provides for this to be entered when the image is uploaded or edited). This text is used by people who use a screen reader to “see” the site for them, and may also be useful for people on a low-bandwidth connection (perhaps in a rural area or a developing country) or even people who are browsing via mobile device who may have images turned off to save on data charges or speed up the time it takes to load web pages. Like most design techniques that can be implemented to improve web accessibility, adding alt text benefits more users than just those with disabilities!

At first glance it may seem like a simple thing to input a few words describing your image. But like all web content (and yes, alt text is content!), it’s worth taking a moment to think about how to create this text so that it will be as useful as possible. Think first about what you are trying to convey with your image. What information does a sighted person gain from it? What is the image’s purpose? As WebAIM explains in an excellent article about appropriate use of alt text, context is super-important here. What purpose does the image serve in the context of the rest of your page? A picture of cute kittens may be simply decorative, or it may be used to describe the stages of kitten development. In the former case, you may not need to provide alt text since the image is not contributing to the intellectual content of the page. In the latter, your alt text may read something like “Two-week-old kittens whose ears have not quite begun to stand up.”

Three kittens illustrate the point about using kitten pictures.
In this case, a kitten is just a kitten.
Credit: Mathias Erhart/flickr

There are some special cases when you may change your alt text depending on context, and 4 Syllables has outlined several of them. For example, what if your image has a caption? And what do you do differently if your image is actually a map?

4 Syllables has also created a great decision tree for use in developing alt text:

decision tree - see 4 Syllables article linked above for full description
credit: 4 Syllables

Like all things related to user experience, a little thoughtfulness goes a long way when creating alt text. Take a moment to consider who’s using your content and what they’re trying to gain from it, and the effort will pay off in web content that is more accessible, more usable, more useful – in short, better for everyone!

Blogging lessons from Bruce

I stumbled across a fun article today which proves two things:

  1. It’s good to think outside the box a bit when looking for ways to build your social media presence and make it successful, and
  2. I am not the only person in the world who can take any topic and find some way to relate it to Bruce Springsteen. 🙂

(It’s actually kind of a nice article that may get you thinking about your own social media content and how you frame it. Worth a glance anyway.)

12 Most Gnarly Blogging Lessons I Learned from Bruce Springsteen” by Jenny Kay Pollock

Bruce Springsteen sharing the mic with Stevie Van Zandt
Bruce Springsteen & Stevie Van Zandt,
Louisville, 2012
photo by Anne Haines

 

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.

Quick and Easy Citations for Oncourse Using OneSearch@IU

The Resources section of Oncourse allows you to create lists of useful citations for your classes and other groups.  You can create new citations manually or import them from citation-management systems such as EndNote and RefWorks.  You can also import citations directly from Google Scholar and, now, from OneSearch@IU (http://libraries.iub.edu/onesearch).

There are two ways—depending on where you would like to begin the process of collecting your citations—to manage your OneSearch@IU citations in Oncourse.  To start, you will need to set up folders in the Resources section of your Oncourse class page.  You can learn about how to do that here (http://kb.iu.edu/data/avbw.html#creating).  Once you have a folder to which you can add citations, you’re ready to go!

Let’s start, first, in OneSearch, and add your citations to a folder. You’ll notice the records in your search results list now feature an “Import into Oncourse.”  Click this button for any citation you’d like add to your Oncourse folder.

Import_into_Oncourse

And if you click on an individual record, you can find the same button here:

Import_into_Oncourse2

After importing, follow these steps to add the selected citation to a designated folder in Oncourse:

  1. In the dropdown menu next to your preferred folder, click the “Edit Citation List.”
  2. Click the “Add Citations to List” button.
  3. Click the “Citations Clipboard” button.
  4. Select the preferred citation, then click the “Add” button.
  5. Click the “Review Citation List” button to find the citation in the designated folder, or click “Done Editing List” if you are done.

Watch the video below to see this task performed, or follow this link.

Unable to display content. Adobe Flash is required.
You can also begin this process from within the Resources section of Oncourse.   Just follow these simple steps.

  1. In the dropdown menu next to your preferred folder, click the “Edit Citation List.”
  2. Click the “Add Citations to List” button.
  3. Click the “Search OneSearch@IU” button.
  4. Search OneSearch for a citation you’d like to add; once found, click the “Import into Oncourse” button.
  5. Back in Oncourse, click the “Review Citation List” button to see your citation, or click “Done Editing List” if you are done.

Watch the video below to see this task performed, or follow this link.


Unable to display content. Adobe Flash is required.
You can find more information about working with citations at the IU Knowledge Base.

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

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.

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”