Writing for the Web

A lot of people are terrified of writing, but here’s what I think: If you can speak, you can write.  This is especially true for the Web.  Some may be better than others, but with the following guidelines and practice, everyone can improve.

Steve Krug, author of the best-selling usability book Don’t Make Me Think, says Web pages should be self-evident, obvious, and self-explanatory.  Users should be able to “get it” without expending a whole lot of cognitive energy.  Most users scan Web pages instead of reading them, anyway.  Even readers with above-average intelligence read only about 20% of text.

So with all that scanning and conservation of mental energy, what do Web users notice?

  • Page layout
  • Navigation features
  • Images
  • Highlighted keywords, such as links
  • Meaningful subheadings
  • Lists

How can you make such features especially noticeable?

  1. Omit needless words.
    Getting rid of unnecessary words reduces the “noise level” of the page, makes the useful content prominent, and makes the pages shorter and scannable.  Not sure where to get started?  Steve Krug likes to say, “Get rid of half the words on each page, then get rid of half of what’s left.”
  2. Use plain language.
    People prefer to read simple and informal writing online.  So avoid jargon, use familiar words, define acronyms and abbreviations, and use abbreviations sparingly.  Use descriptive words, especially in the first sentence of each paragraph, and use active voice.
  3. Make content meaningful.
    – Group related information and functions.
    – Use descriptive headings and subheadings.  Style them in bold, so they stand out.
    – Ensure that labels clearly reflect the information and items contained within a category.
    – Use bulleted and numbered lists.
    – Leave plenty of whitespace.
  4. Match link names with the page they point to.
    “Click here” is not very descriptive.  A better way to help users understand and use your Web site and its subpages are to clearly label all links.  For example, instead of writing “Click here for a map,” you might write, “For help, view a Campus Map.”

Ultimately, try to think about your audience and what their level of understanding and familiarity might be when they initially encounter your Web page, and let that guide your writing.  Remember, you want your site to be easy to read and easy to understand.

Here are some additional resources you might find helpful:

(For a slide presentation of this post, download the PDF: Writing for the Web, 3.40MB.)

Usability Testing Complete on the Libraries Website

As part of my role in TIS and my involvement in the strategic initiative to assess our website, I recently completed usability testing on a list of core user tasks identified by our working group.

The tasks were developed using data from:

  • current site usage logs
  • a pop-up survey that asked users what they had come to the site to accomplish
  • an identified list of core library site elements based on reviewing other university sites
  • a survey of staff asking what tasks they saw users performing

View an all-text version of results, including background information and scripts.

Or view a visual summary of results, with screen grabs.

Many thanks to Sara Snow, our GRA, for invaluable help with performing and assessing the testing.

Library Hours

UT Libraries Hours

On January 15th, TIS launched a brand new Hours interface for the UT Libraries branches at http://lib.utexas.edu/hours.  This is the first time the Libraries has had a central location to display the operating hours of all of the affiliated branches with the ability to make changes on the fly, including the display of Holiday and Emergency exceptions to operation hours.  This interface is powered by a modified version of a Drupal module released under an open source license by the University of Houston.

The original module was crafted by Sean Watkins of the UH Libraries Web Services team and can be found at http://drupal.org/node/1510636, and that version of the module can be seen in action at http://info.lib.uh.edu/about/hours.  There are several Drupal based hours modules available, but this module had a combination of ease of administration, centralized control, flexible output and an attractive base style that made it an easy sell to stakeholders as a project to undertake.  There were some shortcomings that needed to be addressed, but it was generally the right tool for the job.

Prior to this module, branch hours publication was a tedious task that involved an input php script, multiple php scripts for output in various web locations and the manual construction of a printable file that would be distributed throughout the branches.  Our focus in this project was to turn the branch hours process into a flexible and easily modified system that eliminated all but the most necessary on-demand printing.  We now have a single administrative web interface for 12 branches, 11 subordinate service points and the self-managed research centers on campus.  Each of these has a separate page that can be permanently linked to, pulled up easily on a mobile device or printed on a semesterly basis as needed.  You can see this in action at http://lib.utexas.edu/about/hours/.

There are obvious cosmetic differences between the two – replacing Cougar red with our familiar burnt orange, of course – however the largest changes on the front end are noticeable by pressing print in your browser or visiting the mobile version of the page at http://lib.utexas.edu/m/hours.  Printing is somewhat of a vestigial necessity, while mobile interfaces become increasingly important in our modern world.  One very real issue that was found with the original version of this module is one of scale – the University of Houston Library system has four – yes four! – branches, with a total of five service points represented in the software.  Our own library consists of the aforementioned 12 branches, for a total of 23 service points, plus research centers and the Law Library.  This severely crowded the navigation and required some stylistic gymnastics to create a readable and attractive presentation.

Open Now Hours View

One non-stylistic trick employed was the creation of an Open Now page, which was not present in the original module.  This custom view displays the names of only the currently open branches.  If they have a scheduled lunch break or it is past their closing time, they fall off of the list.  With a quick glance, a student should be able to find a study location or a professor should know whether it’s worth it to trek to campus to get in some quality stack time.  This view is replicated on the mobile side and elevated in importance to the default landing page with the thought that a mobile viewer is likely in transit and needs just in time information versus a desktop user who might be making future plans.  Hopefully this assumption bears out in real world use.

Mobile Open Now Hours View

As part of this project, here in TIS we are moving into a new mode, with a new public brand, The Libratory, and making a concerted shift to a more open development process, rolling the software out in stages rather than waiting for a grand reveal, and beginning to utilize open GitHub repositories for our development platform, with the hopes of being more transparent and contributing back to the web community that has provided us with so many great stepping stones in the past.  Please check out our ongoing development work at https://github.com/TheLibratory, check out the back end implementation details of this project at https://github.com/TheLibratory/libhours-utexas, and keep up with our general work on this blog.  This project could not have been completed without the guidance of Jade Diaz and Stephen Littrell, the visual aid of Casey Hunt, or the patience of Fred Gilmore, whose server I kept breaking.

Nifty Wireframing Tools

Hey there! Are you interested in wireframing? If so, but you’re not quite sure what wireframing is—or if you want more information some existing products, Axure and Balsamiq, this post is for you.

To begin, what is a wireframe? Wireframes are essentially blueprints for web and app design and are an early step of the development process. They allow developers to create frameworks of their project and to indicate where elements such as text, photos, menus etc. will be. Using wireframes, designers can plan what sort of functionality the website or application will have, what type of and how information will be displayed, and the priorities of these functions and information. Additionally, designers can use wireframes to easily produce several different design options for a project and to effectively communicate their ideas to other team members.

High-fidelity wireframe vs low-fidelity wireframe example from wirify.com

The complexity of wireframes varies greatly: some wireframes are merely simple static sketches while other—“high-fidelity”—mockups are realistic prototypes of the final product. Often, these include interactive pages and elements that mimic the look and functionality of the final product. Deciding which type of wireframing is best for your project depends on the context, but there are a variety of tools available that cater to a wide spectrum of needs.

 

Balsamiq

Balsamiq is a low-fidelity, rapid wireframing tool that allows users to quickly generate “sketchy” looking wireframes which can be linked together to enable a click through feature.  With only essential features, Baslamiq is quick to learn, easy to use, and great for communicating a project’s integral components without getting distracted by details.  Visit the Balsamiq website for pricing and downloads. Various packages and trial versions are available, with single user licenses starting at an affordable $79.

 

Axure

If a more powerful wireframing tool is what you desire, Axure might be a good option. This user-friendly tool uses “widgets” (i.e. website design elements) that you can drag and drop into a design interface to create interactive HTML prototypes. Prototypes can be made in varying degrees of completion—if you prefer a low-fidelity hand drawn look, elements can be modified to varying levels of “sketchiness.” If you want a high-fidelity model with realistic functionality, Axure can do this too. Animated content, drag and drops and more can all be incorporated into your wireframes. If you are a student (and meet certain requirements), you can get an Axure RP Pro student license for free(!). Non- students can purchase Axure from around $300 to 600 depending upon the version. If you don’t want to spend the money but still want to try it out, a 30-day free trial is available as well.

TIS TechLib Gadgets

The following devices are available for checkout.  Please review the TIS Tech Library Checkout Policy before use.

iPad Mini

iPad Mini image courtesy of Apple.

Released in November of 2012, the iPad Mini offers users all the functionality of the iPad at a fraction of the size. While the standard iPad screen is 9.7 inches, the iPad mini’s display measures a mere 7.9.  It’s also 23 percent thinner and 53 percent lighter than the iPad, has a 10 hour battery life and advanced Wi-Fi that can perform up to twice as fast as its full-sized predecessor.

The iPad mini is now available for checkout through the TIS department. First, second and third generation iPads are also available. For more information on gadget checkout, consult the Tech Library Checkout Policy.

Kindle Fire

Kindle Fire image courtesy of Amazon.

A mini-tablet version of Amazon’s Kindle, the Kindle Fire debuted in November 2011. Offering more functionality than Kindle E-Readers, the Kindle Fire more closely resembles the iPad Mini. It features an Android operating system, 7 inch multi-touch display and allows users to browse the internet, watch videos, listen to music, play games and also read books.

A second generation of the Kindle Fire, the Kindle Fire HD became available in September 2012. A month later, in November 2012, an 8.9 inch version was released.

The Kindle Fire is now available for checkout through the TIS department. For more information on gadget checkout, consult the Tech Library Checkout Policy.

Microsoft Surface RT

Microsoft Surface photo courtesy of Microsoft.

Released on October 26, 2012, Microsoft Surface RT is Microsoft’s first venture into the tablet market. The Surface RT runs Windows RT, a new version of Windows that is specially built to run on ARM-based tablets and PCs, and is only available on pre-installed devices. Like Windows 8, Windows RT uses the same Metro interface.  The Surface itself features a 10.6 inch display with a 10:6 aspect ratio, a thin Touch Cover that also doubles as a spill resistant keyboard and a built-in rear kickstand.

The Microsoft Surface RT is now available for checkout through the TIS department. For more information on gadget checkout, consult the Tech Library Checkout Policy.

iPad 3

iPad 3 image courtesy of Apple.

The third tablet of Apple’s iPad line, the iPad 3 debuted in March 2012. Improvements over previous generations include a Retina display, Apple A5x chip and a 5 mega-pixel camera. In addition to these internal changes, the iPad 3 (or “The New iPad” as it was marketed) is thicker and heavier than the iPad 2.

The iPad 3 is now available for checkout through the TIS department. First and second generation iPads are also available as well as the iPad mini. For more information on gadget checkout, consult the Tech Library Checkout Policy.

Pro-Tip: Why for you no embed?

Troubleshoot Embedding YouTube Videos in WordPress

In this first, of  many, installment of Pro-Tips with Casey, we talk about Embedding YouTube Videos in WordPress, where it goes wrong and how to fix it.

The ability to embed YouTube videos in WordPress once required a plugin in ages past, however in more recent versions of WordPress (2.9+) there’s a neat feature enabled by default that converts YouTube links into embedded videos automatically in your published page. This feature is documented both in the WordPress Codex as well as WordPress Support Pages yet in practice, this feature fails all too often.

Continue reading