4ourth Mobile Touch Overlay
We have to design for people, at real world scales, and in context. Usually I say that means getting your designs onto real devices, or otherwise checking in the real world.
For a couple years now I have sold the inexpensive Touch Template, used by over 1,000 desigers around the world, to help with this. But how should you make sure you are in the ballpark while still drawing on your computer? Well, now I can help with that, too.
Free touch overlays for use in your favorite wireframe or mockup tool:
Download right now (101.4 mb).
I have taken the information from the touch research on how people see, hold and touch their mobile phones and tablets and given you scalable vector images, already sized to fit fifteen popular mobile handsets, phablets and tablets.
The orange Accuracy Dots are a set of representative touch sizes. To test any touch target, move or copy the nearest circle, position over the target and if anything else that can be tapped is within that circle, there is a good chance users will make accidental taps. Begin designs by using the size of the circles to make a grid to guide your spacing. Keep the circles the same size. Do not scale them for any reason, just move them in relative position to the screen.
The green Accuracy Zone indicates the areas where people touch their mobile device screens most accurately. This also corresponds to where people are confident at tapping, and where they wish to read content. Place key content and primary controls in the center, then check spacing with the Accuracy Dots. Scale and stretch this to fit any touch screen. Really, that works.
The Touch Overlays are packaged as a set of files, available for:
- Adobe InDesign
- Adobe Illustrator
- Adobe Photoshop
- Omni Graffle
- Microsoft Visio
- Microsoft PowerPoint
I will add more if you ask, and especially if you help. I don't have every piece of software there is, and am not an expert in every one. Just contact me if you want it to work with some other program, want it to work differently, or want to help make libraries, plugins, etc. I'll happily help you get the right files to import into that tool, and just ask that you provide them back to me when done, to distribute to everyone else.
Download Your Free Touch Overlay Package
I promise, absolutely free, without purchase required for more functionality or anything. Just a ZIP of files free for you to use.
Download right now (101.4 mb).
If you design, specify, test or evaluate mobile handsets, tablets, kiosks, games or anything with a smallish screen that people look at and touch, don't forget your Touch Template also.
Order your Touch Template today or get the link and ask your boss to buy you one.