Jul 06 2011

How You Can Make Graphics for OverLay with us

overlayapp @ 10:02 pm

This page provides detailed instructions on how to create images and text to fully utilise OverLay’s abilities for your users.

You can create tactile graphics using our downloadable templates. You can either hand draw them or use a simple computer graphics package, using the guidelines below.

The information we need to create your OverLay file are the graphics, the tactile hotspot locations, the touch screen gestures and text for the audio. All this is described in detail in the following instructions.

Making OverLay work for you


OverLay is an app that allows you to mix physical, printed media with audio through the iPad’s touch screen and using simple gestures.

The app uses the whole of the iPad screen as a tactile area but there are some parts that we have cut off for controls and to allow for future expansion.

overlay template image You can get our OverLay file templates from the Getting Started page of this
site, and we have made it available as a both Doc. and PDF files in both A4 and Letter sizes.

Given that the active tactile area is smaller than the paper, we have allocated a column to the left and right for additional information or instructions.
In the middle is a rectangle marking out the 812 by 736 pixel area of active touch screen for your tactile diagram. In addition, there is a line of six button boxes along the bottom for additional controls to access alternative audio information.

Tactile Diagram

The key to drawing a good tactile diagram, whether a map or an illustration, is to remember the 3 millimetre or 1/8 inch rule. This means you should always leave a gap of 3 millimetres or 1/8 of an inch between lines. It is basically the measure of the average finger tip and thus the best gap between tactile graphic elements to minimise confusion and to maximise the ease of comprehension.

Draw your diagram in light pencil to start with and adjust it as you go, remembering to check the gaps.

Depending on how you want people to discover the audio enhanced points, you will need to think about putting in some markers or buttons for activating audio; these are what we call tactile hotspots.

Something like a circle with a dot in the middle is good. Whatever you choose, be consistent about using it on the page. On maps, think about places and features that need descriptions, on art look out for features and details that are too fine for the tactile diagram to show.

The key here is to think about how to match the tactile diagram; that is good at providing spatial awareness and relative scale with the audio; that is good at describing details and subjective elements.

Some people like to leave the diagram without symbols to maintain simplicity and reduce the time needed to acquire the image.

If you cannot decide, then make a photocopy of your work and then make one copy with buttons and one without. When using the OverLay app, it does not matter; the active tactile hotspots will be in the same place either way.

Once you are happy with the diagram and the tactile hotspot positions then you will need to ink in the lines. Lines on a tactile graphic should be about 1 millimetre wide. That is a thick Pentel felt tip nib or equivalent. You can use thicker pens but I’d advise against any more than 5 millimetres wide. Thinner than 1 millimetre and there may be problems both with printing the tactile diagram out, on a Swell Printer for example, or with the user being able to find the thin line.


Now you have finished your tactile diagram and it is time to think about the audio elements in more detail.
You will have already marked out where on the tactile diagram you want tactile hotspots with active audio feedback so it is about creating the written text.

Remember that the OverLay app allows multi-touch gestures. Therefore, we can have 3 pieces of audio for every tactile hotspot we define on screen. There are three controls we use in the app currently: Tap, Double Tap and Swipe. You do not have to use them all but they are available depending on the depth of material you want to communicate.

So, write out your text on a word processor and think about how you want to order it. Generally, I would advise Tap for single words and titles like place names or objects. Then, double tap for, perhaps, a paragraph of description and information. Finally, swipe for lengthy text and details. It is about allowing the user to choose the amount of information they want to access at each time they use the app.

OverLay uses a piece of software called Text To Speech to read out your text. When writing text, it can have problems since it does not understand the context of text nor does it have the ability to understand specialised words with unusual pronunciations. It can generally read dates out but has problems with individual letters. For example, Washington D C is Washington Dee See in the OverLay text file. Contact us if there are any words that you are not sure about.

In order to relate the text to tactile diagram, we will need a note of how each piece of text links up to a defined tactile hotspot.

The simplest work method is as follows.

First, number all your tactile hotspots, start at the top left and work across the page to the right and then down and across again, numbering them from one to two and so on. Our file creation system biases towards the position in terms of length down the page rather than across so if you’ve got any close together and aren’t sure of the number then go with the one a bit nearer to the top of the page.

Now, create a document with 4 columns in a word processor or spreadsheet. The headings are from left to right: hotspot number, tap, double tap, swipe.

Fill in your form with all the active tactile hotspots numbers in the first column then add the audio text in the other columns. Allocate the text to the control you think best. Remember, short and simple stuff is better with the single tap and more complex information with double tap and then a swipe.

If you want to add a lot of text or alternative information, there are the six buttons at the bottom of the screen available for use. They are optional controls but useful if you need to add a range of information that does not directly apply to a single area of the diagram.


So, in summary, for us to create your OverLay file, we need you send us:

  • Image file showing the tactile diagram
  • Image file showing the numbered tactile hotspots
  • Word processor file, or spreadsheet, showing link from tactile hotspots to your actual text

If you have any questions, just email us at info@acuitydesign.eu