TechWRITE's Blog

In olden times (that is, before the turn of the century) many people who worked with computers had laminated Help cards propped up against their “terminals.”  These “cards,” which came in a variety of shapes and sizes, typically contained all the arcane key combinations needed to perform equally arcane functions on their company’s computer systems. For less well-to-do companies, Help cards took the form of pages ripped (in disgust) from large, hard copy computer manuals; these  cards were typically taped haphazardly to the sides of employees’ monitors. The early physical Help cards were soon supplanted by electronic versions that were accessed by clicking on links. And their content also changed significantly, including more than just key combinations. The later iterations of Help cards often presented instructions about performing specific job-related tasks, some of which were not even (omigosh) computer-related.

So basically, what is a Help card?

 Essentially, a Help card is a short (typically one page) “document” that contains the reference information or step-by-step instructions the reader must know to perform a particular job or task.  Help cards are also referred to as quick reference cards, job aids or even (in the vernacular) cheat sheets. Information in Help cards is expressed in terse language and typically formatted in tables; for example:

Troubleshooting Help card

Help cards as performance support tools on mobile devices

In terms of categories of information, Help cards are considered performance support tools, that is, tools which help people perform their jobs.  And it is in this regard that Help cards now have a new lease on life – via the mobile platform. Their short, compressed information-packed nature makes Help cards a spot-on fit for mobile devices.

But Help cards sometimes need a little help

In this new miniaturized world of mobile, Help cards sometimes need a little help – particularly if they were originally designed for that archaic medium: the printed page. Specifically, if you have a Help card that looks like this (see above), you’re going to have a heck of a time smashing it into that narrow mobile framework.

So what can you do to make a Help card that has 4 or more columns readable on a mobile device? The simple answer is – hope that users will take advantage of the accelerometer and flip the mobile device into landscape mode. But since most people initially look at their mobile devices in portrait mode, you have to design information so that it will be legible and immediately useable in that mode.

One way to do this is to examine your Help card table and see if you can use the left-most column (see the example above) as the basis for a menu. In many cases, the data in the left column establishes the basic categories which are detailed in the cells to the right. So it makes sense to use the data in the left-most column as the basis for a menu, as you can see in this example:

Menu created from left column

Then, when a user clicks on one of the menu items, the relevant information from the cells in the original table can appear formatted vertically under the appropriate headers:

Information in cells

Obviously, the major limitation of this approach is that the user loses the ability to see all the information for all categories at one time. (Note that you can somewhat ameliorate this by placing a Return to Menu link at the bottom of each detailed information page.)  But if you have a 4-, 5-, or 6-column mobile Help card, this approach may be the only way to go.

Ways to improve Help cards that have less than 4 columns

If your mobile Help card (job aid, cheat sheet, etc.) has less than 4 columns, you may be able to leave it in tabular format. So if you want to stick with tables, here are a few suggestions that might improve their usability on mobile devices:

• Determine if you can consolidate information in any way. If the information in two rows is very similar, combine them into one row and note the exceptions. This may ultimately decrease the length of the table and thus reduce the need for scrolling.
• Similarly, if you can logically combine the information in two columns into one column, go for it! For example, in the  Troubleshooting Help card example shown above, we combined the Error and Symptom information.
• If you have many narrow rows, consider using zebra stripes (shading every other row) to help the mobile user pick out information more easily on the small screen.

Technical tricks

And of course there are the myriad of JavaScript tricks you can use to make mobile tables more friendly. Some of these include:

• Creating expandable areas to reveal more information vertically
• Making information sortable
• Creating static column headers

You may need a JavaScript programmer to implement these features. However,  many canned coding examples are available on the internet, so if you have any experience with JavaScript, you might want to try embedding the code yourself.

And if you implement any of these tricks, there’s one more thing to keep in mind from the mobile user’s perspective -  many of these features involve tapping something on the mobile device. So if you use any of these features, make sure your rows or columns are large enough to accommodate a finger tap.

But perhaps the most significant technical feature of all is to make the mobile Help cards interactive. So stay tuned for an upcoming blog that will provide information on this topic.

©2011, TechWRITE, Inc.