May 2012
By Nad Rosenberg

Nad Rosenberg is president and founder of TechWRITE, Inc., a technical communications company based in the US. Before starting TechWRITE in 1985, Nad managed documentation departments for several large corporations.


Making quick reference information mobile

For decades, quick reference tools such as quick reference cards, job aids and help cards have been used to assist in learning new tasks or as refreshers for tasks performed infrequently. Thanks to mobile technology, that information can now be conveniently displayed on a device when and where it’s needed. The mobile platform is a perfect medium for quick reference information. But how do you convert your existing information to mobile and ensure its legibility and functionality?

The history of quick reference content

Quick reference content, for the most part, started out as physical “cards”.

Before the turn of the century, many people who worked with computers had laminated cards propped up against their “terminals”, typically above the function keys. These “cards,” which came in a variety of shapes and sizes, usually contained all the arcane key combinations needed to perform equally arcane functions on their company’s computer systems.

For less well-to-do companies, quick reference content took the form of pages ripped (in disgust) from large, hardcopy computer manuals and taped haphazardly to the sides of employees’ monitors. And these often came to be replaced by sticky notes. In fact you probably have some taped to your monitor right now.

In other work settings, for example, at manufacturing locations, this type of information was stuck on the wall and ignored most of the time.

In office settings, the early physical quick reference cards were often supplanted by electronic quick references that were accessed by clicking on links or the Help icon. Content also changed significantly because it included more than key combinations. The electronic iterations of quick reference content were often instructions about performing specific job-related tasks, some of which were not even computer related.

Today quick reference information has found a new home — on mobile devices, particularly on the smartphone.

Examples of quick reference content

So what kind of quick reference content is suitable for mobile?

  • Reference information (for example, explanations of troubleshooting codes and procedures)
  • Step-by-step instructions
  • Performance checklists (discussed in detail later in this article)
  • Flowcharts (although graphics do present some issues on mobile)
  • Decision tables
  • Data lists (for example, lists of office locations and contact information)

So basically, what do these things have in common? Typically, there’s no background or conceptual information, and the content is formatted in short documents using terse language. It is because of these factors that quick reference content has acquired a new lease on life – via the mobile platform. Its short, compressed, information-packed nature makes quick reference content a spot-on fit for mobile devices.

The table problem

The one issue about porting quick reference information from the “old media” (the printed page or PC screen) to the “new media” (smartphones) is that much of this content exists in a tabular format. For example, if you have quick reference content that looks like the one below, you’re going to have a difficult time smashing it into a mobile framework.

Figure 1: Table on smartphone?

So how can you make quick reference content with four or more columns readable on a mobile device? One answer is — to hope that users will take advantage of the accelerometer and flip the mobile device into landscape mode. However, there are several caveats here:

  • The table may not even fit in landscape mode if it is being displayed on a small smartphone.
  • Since most people initially look at their mobile devices in portrait mode, you have to design information so it will be legible and immediately useable in portrait mode.
  • Different browsers and different-sized devices render information differently. So just because the content looks OK on one mobile device doesn’t mean it’s going to render the same way on another one.

Often a redesign of the information is necessary, particularly if the information is going to be displayed on a smartphone. One way to do this is to examine your quick reference table and see if you can use the left-most columns as the basis for a menu (see Figure 1). In many cases, the data in the left columns establishes the basic categories that are detailed in the cells to the right.

Here’s an example of quick reference content that we redesigned so it would fit on a smartphone. As you can see, the categories of Code and Symptom became the menu options, and the details appear when the user taps the “category” link.

Obviously, the major limitation of this approach is that the user loses the ability to see all the information for all categories at once. Sometimes this doesn’t matter, particularly when the user is looking for one specific item, such as a troubleshooting code. But if it does matter, you can somewhat ameliorate this by placing a Return to Menu link at the end of each detailed section.

But if you have a 4-, 5-, or 6-column quick reference table that you want to display on a smartphone, this approach may be the only feasible one.

However, if you need to stick with tables, here are some suggestions that might improve their usability on mobile devices:

  • Eliminate redundant information – Determine if you can consolidate information. If the information in two rows is very similar, combine it into one row and note the exceptions. This may ultimately decrease the length of the table and thus reduce the need for scrolling.
  • Combine columns – If possible, combine similar columns. In the example in Figure 1, combine columns 1 and 2 into a single column called Code and Symptom.
  • Use hyperlinks whenever possible.


Mobile checklists

One way to greatly enhance the usability of quick reference information is to turn it into a checklist. As Dr. Atul Gawande pointed out in his acclaimed book, The Checklist Manifesto, checklists used in hospital settings can actually save lives. In this book, Dr. Gawande studied the work of Dr. Peter Pronovost, who determined that checklists provided two major benefits:

“First, they helped with memory recall, especially with mundane matters that are easily overlooked in patients undergoing more drastic events. A second effect was to make explicit the minimum, expected steps in complex processes.”

Many other professions have noted the value of checklists as well. And, it’s obvious that mobile devices have exponentially increased the power and usefulness of checklists because of their ability to transmit data, GPS functionality and inherent portability.

So here are a few things to keep in mind if you are designing mobile checklists:

  • Don’t forget the checkboxes – It almost goes without saying that mobile checklists should include checkboxes, but unfortunately, many mobile checklists appear to be dumped directly from static hardcopy into the mobile framework. It’s important to include checkboxes because they allow the user to see what’s done and what remains.
  • Make the checkboxes large enough for a finger tap – If the rows are not deep enough, it can be very difficult to tap the correct checkbox without zooming. You don’t want users to have to zoom to see the information because it might distort the content.
  • Don’t include useless graphics – This is particularly true if your app is web-based (see below). If the app needs to pull down the graphics from the Internet, it will take longer for the graphics to load than for text alone.
  • Avoid text entry – As everyone knows, it’s tough to type on a smartphone.


Developing a quick reference mobile app

So, if you’re seriously thinking about developing a mobile app, here are a number of steps you need to take:

1. Determine the type of app you want

The first issue you need to resolve is – what type of app will it be: a native app, a web app or a hybrid. Here’s a very brief explanation of each option:

  • Native apps reside totally within the mobile device. These apps are coded in 
C-style languages or HTML5 and are basically more difficult to develop and distribute (or “publish”) to a wide audience than the other types of apps.
  • Web apps look like native apps, but they’re really websites designed for mobile with all or most of the browser controls hidden. Since web apps are, at heart, websites, they are somewhat easier to develop since they’re written with HTML, CSS and JavaScript, and they’re easier to distribute – all that’s required is an Internet link to access the app.
  • Hybrid apps combine elements of both native and web-based apps.

If you intend to export data collected by your quick reference app to an external database (for example, the checks entered into a checklist), you’ll need to create either a web app or a hybrid app.

2. Develop a detailed design

No matter which type of app you decide to develop, your next task is to develop a detailed design, which completely describes the app’s functionality, look and feel, and database access (if the app exports performance data). By the way, there are many free web-based tools (some of which are discussed in the next section) that let you build a user interface prototype before you commit any further effort or resources to the project.

3. Putting it together

Once you’ve finished the design phase, you have different options for making your quick reference app work. If you’re technologically inclined, you may want to take a shot at creating your quick reference app from scratch. Or you can hire a programmer to do this for you.

Another alternative is to use a software tool to create your quick reference app. Some of these tools are web-based, others are not. You don’t need to be a professional programmer to use most of them. However, a general knowledge about how programs and databases work is very helpful. Here are a few tools you might want to consider:

MadCap Flare – As you may know, MadCap Flare is typically used to develop WebHelp and content for single-source output. But this product can also be used to develop mobile performance support information. Flare has an option to develop WebHelp for mobile, which can easily be tweaked to make it look and function more like a quick reference app. To do this, you need to change the “home” page so that all quick reference topics immediately appear when you first access the app. (A link to instructions for doing this is given at the end of this article.) Here’s an example of what a tweaked home page can look like:

Figure 3. Quick reference home page

This is a great option if you already own MadCap Flare and you don’t need to save anything (such as a check to indicate that a task has been completed) into a database.

ViziApps (also called MobiFlex) – This is a web-based tool to let you develop web apps and hybrid apps. It’s fairly easy to develop the user interface, but developing the back-end interactivity is a little more complicated. However, for testing or even for production, ViziApps lets you use a Google Docs spreadsheet as your “database.” One thing to keep in mind about ViziApps – make sure you do not use Internet Explorer as your browser (many functions will not work properly). The recommended browser is Mozilla Firefox.

Tiggzi – This is another web-based app that is very similar to ViziApps. The user interface design tools are a little more robust, but setting up the connection to the database is more complex.

Both Tiggzi and ViziApps are good tools to use if you just want to play around with designing the UI. I have listed other tools with similar functions at the end of this article.

4. Testing

The last step in this process, testing your app, is critical. It’s extremely important to test whatever you’ve created on different devices (unless you know the specific device on which your app will be used).

 Just because your app looks OK and works well on an Android doesn’t mean that it will look and work the same way on the iPhone. Also, even smartphones marketed by the same company may not display information the same way.

Adding technological bells and whistles

If you’ve developed a performance support app and you want to add some bells and whistles to improve usability, here are some things you can do, particularly if you have a programmer available:

  • Make rows expandable to show additional details – If your quick reference information is in a tabular format, you can use JavaScript coding to make rows optionally expand to include extra details that would clutter up or elongate the basic quick reference content. The code for implementing this is freely available on jQuery, which is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.
  • Add zebra stripes – With this technique, every other row in a table is shaded, which improves legibility. This can also be implemented via jQuery coding.
  • Data sorting and static column headings – Data sorting allows users to sort information based on a particular column header. Another technique, static column headings, allows users to scroll down a long table while the column headings remain static.
  • Search – Adding a search capability is a real enhancement, particularly if you have numerous checklists. The Flare product (see above) includes a search engine. However, search functionality can be added to other apps by embedding code for a search service, such as Google.


The bottom line

As time goes on, all of these tools will become more sophisticated and easier to use. As a result, creating a quick reference app may be in your future sooner than you think.


Mobile app tools




Page 1 from 1
#1 Richard Pineger wrote at Mon, May 28 answer

Thanks NAD for timely and practical information. I shall experiment.