A tool to help design for fingers and eyes, instead of pixels

20 Jun 2012 - 8:53am
17 weeks ago
15 replies
2058 reads
shoobe01
2007

There are limits to how much you can understand users' interaction with your mobile app or site if you just stick to pixels, and never leave your computer screen. You need to get designs on the device, and check if text, buttons and icons are visible, and safely clickable. 

The only  way to do this on every platform, is measuring with some sort of real life, physical object. Instead of muddling through with other tools, I made a tool specifically for doing this on mobile devices:

http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template

If you agree it's a good idea, please * shameless plug * pre-order one, or send some ideas of how to improve it before I make the final production run. 

Comments

20 Jun 2012 - 1:32pm
digikev
2009

This is a good concept Steven. I would like to see your InDesign file linked up on the wiki so designers can build upon it and give you feedback and suggestions visually.

20 Jun 2012 - 1:49pm
digikev
2009

Also, worth asking what you think will be compelling about this product over and above what already exists on the market. For instance UI Stencils have a really good range of products, which although doesn’t have the focus you have on, for instance Fitts Law, but can the iPhone power button be doubled up as a test for this when held up against a device? It looks as though it could possibly.

20 Jun 2012 - 2:06pm
shoobe01
2007

Without naming names (so I didn't look mean) I was talking about things UI Stencils don't do, specifically. Metal stencils don't exist in my world (these are made like "eraser shields" which I also never used in pen and pencil days), as they are hard to use due to opacity at least. 

You can totally use something else. I've been proposing carrying around circle templates (or anything similar) to check touch targets. And I've had them in my bag for over a year. I did also add in some other stuff, like line spacing scales. I hope they add enough value to make it worthwhile.

Yeah, I will put up the digital file. Maybe this evening. Need to clean it up a bit, but keep nagging if you don't see it. 

20 Jun 2012 - 2:22pm
digikev
2009

I can completely see your point about metal stencils and opacity, and your translucent plastic approach has some obvious benefits. I can’t help but think that to add more commercial value, your design should probably incorporate more of the stencil elements that UI Stencils provide. Even if you wouldn’t use them personally, it will add more value to a wider audience. Either that, or as you suggest, have a much simpler version which just does the job of checking Fitts Law, and have a price point reflective of this fact.

21 Jun 2012 - 2:20pm
shoobe01
2007

I am sorta not trying to compete with UI Stencils, and am therefore trending away from the UI elements. 

Your pricing idea is valid, so I checked. I had just been pricing to make sure I can pay for mine, but UI Stencils charges $25-30 for theirs. Mine is $10, so I think that's pretty reasonable, even as an add-on if you already use those. Maybe if I am successfuly, I'll see if they want to sell them (or a version with their branding) through their store. Take fulfillment off my hands.  

21 Jun 2012 - 9:30am
shoobe01
2007

I have added the files, both InDesign and PDF. Links here:

  • http://4ourth.com/downloads/TouchCard-20june2012.idml
  • http://4ourth.com/downloads/TouchCard-20june2012.pdf

But I'd go to the site itself to get them, as they should change periodically. I may forget to update here, or just not want to clutter the forum with every change I do. 

A good way to play with this now is to print it out (maybe after some messing around in InDesign; I'd shade the background and make the cutout areas white) on overhead transparency, or something similar. Cut out a card with scissors, and try that. NOT the same as the thick plastic templates, but not bad to try it.

Also, I did update the design a bit. Found an error in sizing! Terrible. Anyway, I may have re-focused the concept a bit. Tell me if it's better or worse without the little icons all over. Description of why I did this at the bottom of the page. Please do tell what you think of the usefulness of this, in detail. 

23 Jun 2012 - 2:37am
Pprovazky
2012

Steve, it´s a great and useful concept, especially in touch screen world. I would personally add also some commercial buttons, if there is enough space of course, or just extend the stencil. Maybe I would put some "funny" buttons to increase the interactive level. These are just ideas, nothing than that. Anyway, good job.

 

25 Jun 2012 - 5:54pm
shoobe01
2007

After getting plenty of feedback, I've posted some updates to the page. Check them out.

Except for Pprovazky, everyone else seems to be more towards making it a pure inspection tool, on the assumption that UI Stencils has the market locked up on the drawing ones I guess, and has so many more shapes in their stencils. So, it's trending that way. I showed it off a lot today at the Float Symposium at TechWeek Chicago, and even saw some people using it by looking at the button cutouts. Sorta wondering if that's confusing the issue, so ALL the shapes disappear. Maybe some drawn, but no cut-outs but the touch target holes. Hmm. 

26 Jun 2012 - 9:08am
ambroselittle
2008

I agree with that direction, Steve. Keep this one focused on inspection. Good call.

31 Jul 2012 - 1:57pm
lmiller8
2012

A bit late to see this, but looks like there was a very cool collaboration here. I really like how you used the UX community to draw feedback, make changes, and conduct your own type of user testing along the way. :) 

Great concept- am very excited to see how your tool is used by UX designers. Best of luck! 

 

1 Aug 2012 - 9:44am
shoobe01
2007

Ah, sorry I have forgotten to post updates here. Lots of direct feedback, and some other forums and so on. It's getting ready to go to production, but it's not too late for you to place an order and get one of the first batch still! 

Thanks for your feedback, to everyone, not just those who posted publicly. Maybe a good hint for gathering feedback, actually. Almost everyone wanted to remain anonymous (I posted email addresses, etc so anyone can contact me directly). I even got drawings returned with other good ideas, and no one wanted me to share their name to give credit. Interesting. 

6 Sep 2012 - 7:19pm
shoobe01
2007

Another update for those who follow this forum, but not so much twitter, etc. 

This is all on the page linked in the OP, as well. Check there for photos, etc. 

The production prototype arrived on Wednesday, and after a minor fix (already re-approved) it's been cleared for production. I do not have a date for delivery, but believe it's around 4 weeks. 

Sleeves (instructions and protection) are already in hand, mailing labels are ordered, and I will place the order for mailers probably next week. 

 

I live in Kansas City and mostly work in San Francisco, so was thinking of handing them out instead of mailing in those two locations. I am not sure this justifies an event, so may sit in the back of a bar, or would happily tag along with someone else's relevant mobile UX event. Anyone part of a group that might work for?  

10 Oct 2012 - 12:45pm
shoobe01
2007

I have finally gotten all the funding, gotten through manufacturing, and actually started mailing these out. So, for anyone leery of pre-ordering, you can now order one that is actually in stock.

If you just wanted to see what it ended up like, check the page again. I even made a little video of how it works, also up on the sales page. 

10 Oct 2012 - 12:45pm
shoobe01
2007

I have finally gotten all the funding, gotten through manufacturing, and actually started mailing these out. So, for anyone leery of pre-ordering, you can now order one that is actually in stock.

If you just wanted to see what it ended up like, check the page again. I even made a little video of how it works, also up on the sales page. 

29 Apr 2014 - 1:47pm
shoobe01
2007

I finally sold out of the first version, and updated this concept. I have a lot more information about how people touch and hold mobile devices, mostly my own research but also some metaresearch. 

You can read a summary of the research findings here (I'd download the PPT and read the speaker notes):
http://4ourth.com/tppt
Or you can watch a video of me talking through the same presentation:
http://4ourth.com/tvid

And so, there's a new Touch Template as well. It's no longer a stencil at all, and is just for inspection, which is good as it's packed with information. Not much else could go on there if I tried. Same link, but I won't make you scoll to find it. 

http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template

Syndicate content Get the feed