|
Size: 14175
Comment:
|
Size: 4356
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| {{{#!html <div style="width:100%; height:340px; background:url(http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template?action=AttachFile&do=get&target=header-back.jpeg); margin-bottom:1em; "> <img src="http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template?action=AttachFile&do=get&target=closeup-22.jpeg" width="0" height="0" /></div> }}} {{{#!html <div style="float:right; width:25%; margin:0 0 0 2em; padding:0.5em 1em 1em 1em; background-color:#EF5D49; "> <h3>Current status:</h3> <p>Templates have arrived and will begin shipping this week (8 October)</p> <h3>Order one for $10</h3> <p>I am only making so many on the first run, so if you like it, press the PayPal button right now so sure you get yours. Or several. And <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template" data-text="Design for people, not pixels. Order your 4ourth Mobile Touch Template" data-via="shoobe01" style="color:white;">tell your friends</a>. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="Q7U96P72NGMZ4"> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> <p>The price is $10 each, inclusive of shipping to anywhere at all.</p> <p>Wondering what happened to the prototypes? I still have like 2 of them. If you want one to be nice to me or for historical purposes, contact me.</p> </div> }}} |
|
| Line 4: | Line 30: |
| If you design, specify, test or evaluate mobile handsets, tablets, kiosks, games or anything with a smallish screen that people look at and touch, you will find this useful. | If you design, specify, test or evaluate mobile handsets, tablets, kiosks, games or anything with a smallish screen that people look at and touch, you will find this useful. Basically, if you think this wiki is good, and both own and like the book [[http://www.amazon.com/gp/product/1449394639/ref=as_li_tf_tl?ie=UTF8&tag=4ourthmobile-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449394639|Designing Mobile Interfaces]] where it all came from, you want this. Trust me. <<YouTube(id=rvkPVLYwoWY)>> ------ {{{#!html <div style="text-align:center; margin:0 auto 0 auto;"> }}} '''What the world says so far:'''<<BR>><<BR>> ''"This mobile touch template is pretty badass."<<BR>> "Ensure your designs are fat-finger friendly."<<BR>> "Coolest mobile tool I've seen in a while!"<<BR>> "If you design for mobile, try to design for mobile or want to design for mobile you should buy one of these."<<BR>> "Such a great idea => Plastic stencil to evaluate mobile touch."<<BR>> "Nice reminder that we build for humans, regardless of how UI pixel-focused we may get."<<BR>> "Please touch. Mobile UI inspection made easy."''<<BR>> {{{#!html </div> }}} ------ |
| Line 7: | Line 56: |
| == I don't get it, what's the point? == Designing mobile interfaces, or interactions, is all about making stuff actual people can use in their daily lives. |
Why not just design in Fireworks or Photoshop and use the 44 pixel cadence? Well, because most people don't use an iPhone. And iOS has different physical sizes on each piece of hardware. We need to start designing for humans, and physical sizes, not pixels. |
| Line 10: | Line 58: |
| If you keep this in mind, and use some guidelines, especially specific to mobile interfaces, we applaud you. But most guidelines involve measuring in Photoshop, or Fireworks. Measuring sizes and spaces in pixels. And, measuring with digital tools, on laptop screens. Not in the real world at all. Your finger cannot be measured in pixels. Your eyeballs see photons, not pixels. And more or less of them depending on how far away you get from the screen. We need to set aside the 44 px cadence, and any other guidelines that are resolution dependent. We need to get off the computer, and try things out on real devices. Developers of mobile sites, or apps, say "you aren't testing, if you aren't testing on the device." Well, the same is true for designing and specifying interactive elements on the screen. You should already be taking your wireframes, or Fireworks templates, and exporting to raster images. Send them to the device, and just look at them in a photo gallery. You can even get surprisingly good "paper prototype" like user test results with this. But first, you just look a it. And measure, and try it out. Since the dawn of the mobile internet, at least, I've been peering at the screen and using the typographers scales designed for print design – plus lots of math – to determine what size is actually displayed, and what works best. With ubiquitous touch, another facet became even more important to measure, and the concept of touch targets, and avoiding accidental input became crucial. Besides reviewing lots of existing work, I did my own research a few years ago, gathering fingertip sizes and accuracy from a bunch of people. I have determined and validated the best guidelines for both of these. For a few years now, I've been carrying around a generic circle template to measure the proper spacing, and determine when user errors are the result of true interference. As mobile design matures, I think it's past time that we deserve our own tools. While some drawing tools exist, there are no inspection tools. There's no equivalent to the pica sticks, type scales and other measuring, evaluating and approving devices the print world had. So I've made this. A dedicated inspection tool for mobile devices, and especially for touch devices. The circle in the middle allows you to quickly measure if there will be interference between touch targets, and a larger inscribed circle is for high-priority targets. Note that in the photos, the larger circle is not very visible, due to the way the prototype was built. I am more disappointed than you are, but this will be very much fixed in the final production run. You don't have to buy this product to get the touch guidelines. They are all published in my book Designing Mobile Interfaces, and shared for free on this wiki http://4ourth.com/wiki/Human%20Factors%20%26%20Physiology The summary view and touch guidelines are at the very bottom of the page. 10 mm or 3/8" is the minimum touch size, if you were wondering. That's the size of the cut out circle in the middle of the stencil. A rule down the right side is calibrated to the suggested minimum type size, and line spacing. And just like the touch target, there is a larger suggested size scale along the bottom edge. Rulers along the other edges allow more direct measurement. The whole tool is transparent, making measurement of small items easier by removing parallax. You just put it right over the thing you measure, and look straight on, through the template. The whole tool is the size of a business card, so you can keep it with you wherever you go. That also makes it about the size of a handset screen, so we've added a few additional cutouts to the empty areas. You can use it to draw key elements at the right scale, as a prototyping or sketching tool, wherever you are. Bring a pen, and you can draw on napkins. |
<<YouTube(id=Ok2SL-CSWbU)>> |
| Line 31: | Line 61: |
| == What the final product is: == It's going to be a stencil, like a plastic drawing stencil, used by draftsmen and so on. It will be made of tinted plastic, with cutouts, and heat-stamped words and lines to explain the use and add additional features (like the various type scales and mini rulers). The prototype that is shown in all the photos and videos here is laser cut, and laser etched. It is the same material, but produced in a different way. The printing will be much, much more clear in the final product. Printing will, in fact, be black, instead of the darker orange on the prototype. Printing will be on the back side also, to reduce parallax errors, when you are trying to measure very small things. In addition, I have to re-draw it slightly, as the cutouts don't really account for the size of pencil tips, or even just manufacturing processes. These are quite sturdy products. They should be nearly impossible to crimp or break, and take quite a bit of abuse to even scratch up enough to make too opaque to see through. This is something you can carry in your briefcase, or even your wallet, for years and have available whenever you need to check out a product, or talk about the pros and cons of specific design approaches. |
== This was community designed == I came up with the idea, then posted it and took in lots of feedback. The final result is not the same as the first prototypes I had made. See the [[Touch Template Archive]] and grab files if you want to see more about this. |
| Line 39: | Line 65: |
| == Prototypes: == I have a few of the prototypes which I used in the photos. Funding at the $100 level will let you have one, play with it (and photograph it and talk about it all you want) and provide quite specific feedback to the group discussion about any changes we should make to the production template. Or just confirm it is fine. Yes, it's yours forever to keep, plus of course I'll send you a real one when the production items arrive. I'll even overnight it if you want it right away, though of course this will cost me more money (out of your fee), so that's your choice. The $100 is a semi-arbitrary amount of money, about twice what they cost to get made, all up. You are also saying how much you like and support the idea. But be aware, the prototypes are, well, prototypes. The are not all that great. The drawing portions aren't big enough to be really useful yet (my mistake), lines and words aren't always visible, and some of the lines aren't lined up with the cutouts. It is good to get something physical, but it also helped prove that I cannot rely on the flexibly-scaleable (or custom per user) laser cutting shop, and have to get really stamped out stencils. It's very much a prototype, so plan accordingly, and do not be disappointed with what shows up. == Digital Files: == If you sign up at any reward level, then as soon as I know who you are and how to get ahold of you, I will send you a copy of the latest digital file I am using to make these. I'll probably just post them to a secret webserver, and you get a link, so whenever there's an update posted here, you can go get the new file. Frankly, I sorta ran out of ideas for what to give away for the $1 level, as well as what to give you to be satisfied right away. But really, as I think I about it, I like it. If I want you to contribute to the design (and I do!) then this makes sense. Aside from the transparency of the process, you can pop it open in Illustrator, InDesign (what I drew it in) or whatever you want, and add comments, make changes to the drawing, etc. Post them back up in the comments, blog about it, or just email it to me. == Shipping: == I am not 100% settled on the packaging, but will probably be using smallish bubble envelopes to make sure the stencil isn't destroyed by overly-agressive mail handling equipment. If not happy with this, I'll add cardboard inside to keep the stencil safer. I am pretty likely to also include a tiny 2.5x4.25" envelope that the stencil will slide into. I've been carrying mine in one of these, but it's not itself very sturdy. I hope to be able to find Tyvek versions, or something else more long term, as well as better fitted so it can be kept in there in your wallet, but we'll see what comes up. I actually buy and sell a lot of stuff internationally, and find it to be far too variable, and far too expensive to simply account for in advance. I do apologize for this, and know it's a contentious subject specifically on Kickstarter, but there it is. My best solution is to charge based on actual shipping, so everyone ordering from outside a US mailing address will get a specific additional charge when they are ready to go out. They are pretty small, so I don't expect most of you to be paying insane amounts. Still, I want to be super-clear up front. Make comments, tell me how I am terrible, or how I should change it. Coordinate group buys if you want. Or, invite me to speak at a conference in your region, pay for the travel and I'll just bring your orders with me :) == Where the funding goes: == I've already put in a few hundred dollars, and about 100 hours of design, building the laser-cut prototypes and discussing with others. It's been to a handful of conferences; not discussed up on stage, but pulled out to various people in small groups, where I get feedback. Positive feedback. I had to give away an earlier (much worse) prototype to a co-worker, even. It took a long time to find a place that makes the right kind of stencils, and would work with me to make a custom stencil. But they still have minimum orders, so I need the money to make that minimum. When I get to these minimums, the price per stencil will be pretty small. Making these affordable enough to distribute widely is key to the concept. Naturally, if I get enough backers, I will simply up the production run to make even more of them. I also deeply investigated other production process. The laser cut prototypes – while useful themselves – prove that there are no other production-grade processes for items like this. I have also got estimated costs for the packaging, and the mailing. I am not expecting to actually profit, but I did leave a few bucks extra, in case there are extra costs, to cover the planned (but still not found) little sleeves, or I just did the math wrong. Even if we make changes to the design, I'd like to not have to come back and ask everyone for an extra $1 per stencil. In fact, that may be a key principle; even if a bunch of you vote for an expensive change, I will ignore it to avoid upping the price, if at all possible. == Why I need you, and what can you contribute: == I have my laser-cut demos, so I am covered for my own needs. But as you can tell from all the documents I share, and all the speaking I do (and no, this doesn't pay off), I want to spread good information to improve the state of the industry. Here, I'd like to make a product that is useful to the rest of the mobile design community. If you all hate it, there's no point really, so the lack of funding will be the end of it. If you like it, great, but don't just vote with your wallet. Tell me what you think, and how this can help you. I want you to provide input on any and all details of the stencil. I think I have picked out the most useful and difficult-to-draw shapes, for example, but if you disagree then please tell me in the comments. This could extend to some of the key attributes. If there's no real need for the drawing part after all, for example, I can drop that and make it more focused as an inspection tool instead. I recognize that everyone has different needs, but due to the mechanical reproduction of the stencils, I won't be able to meet them all. If I get enough call for several different types, I could theoretically implement them, but at this time I am only expecting to make one variation. This is the one pitfall of the real stencil stamping process, vs. laser cutting, but the final product is so very much better I think it's worth it. Be aware that serious changes may incur more costs from the manufacturer. This is the sort of thing that may cause us all to sit around for weeks on end even once it's done and paid for. Once some time passes, and any revisions are finalized, I'll have to send it back to the manufacturer to re-quote. If something massively raises the price (not something I expect) I'll make that clear, and we can work it out as a group (e.g. do we pay more after all, or eliminate the expensive features?) == Color == Color is something else I expect to discuss a lot. Aside from the red/orange/amber color, the other standard colors the material is available in are clear, green and blue. I'll start by saying that clear is a no-go. I laser printed and hand-made a really, really prototype and used this for a month. It's just too hard to see and manipulate the edges of the clear material. The others are possible, but I chose the orange as it seems the most visible against typical screen colors, and lighting. There's a lot of blue/green palettes in use (even most grays are blue/gray today) and the red spectrum sticks out better, so it's easier to see the template, and see items on the screen through it. This color is also similar to our brand, but if everyone thinks I am crazy, and wants the typical stencil green, we can do that. It also is possible to produce multiple colors. This seems like something else to discuss as we proceed. If you don't care much, we all get orange, but if there's argument then maybe I'll do half of another color (or split it three ways, or whatever), and some get a choice, all the others get random assignment. No, I haven't been able to get samples from the vendor. I am going to call them up again and see if I can. I'll take a photo and post that as an update, if I ever get them. |
== What do you think? == If you get one, or see one, what do you think? I may get enough response that I need to make a second run, and I already know that will need revisions. Visit the [[Touch Template Ideas]] page and add what your ideas are. You can twitter or email me or whatever you want, if you don't have, or want, access to the wiki. |
Current status:
Templates have arrived and will begin shipping this week (8 October)
Order one for $10
I am only making so many on the first run, so if you like it, press the PayPal button right now so sure you get yours. Or several. And tell your friends.
The price is $10 each, inclusive of shipping to anywhere at all.
Wondering what happened to the prototypes? I still have like 2 of them. If you want one to be nice to me or for historical purposes, contact me.
What is this thing?
It's a simple piece of plastic you use to inspect and prototype mobile interfaces and interactions. It is mostly about measuring the sizes of touch targets, but also of other visible elements, like making sure text is readable.
If you design, specify, test or evaluate mobile handsets, tablets, kiosks, games or anything with a smallish screen that people look at and touch, you will find this useful. Basically, if you think this wiki is good, and both own and like the book Designing Mobile Interfaces where it all came from, you want this. Trust me.
What the world says so far:
"This mobile touch template is pretty badass."
"Ensure your designs are fat-finger friendly."
"Coolest mobile tool I've seen in a while!"
"If you design for mobile, try to design for mobile or want to design for mobile you should buy one of these."
"Such a great idea => Plastic stencil to evaluate mobile touch."
"Nice reminder that we build for humans, regardless of how UI pixel-focused we may get."
"Please touch. Mobile UI inspection made easy."
Why not just design in Fireworks or Photoshop and use the 44 pixel cadence? Well, because most people don't use an iPhone. And iOS has different physical sizes on each piece of hardware. We need to start designing for humans, and physical sizes, not pixels.
This was community designed
I came up with the idea, then posted it and took in lots of feedback. The final result is not the same as the first prototypes I had made. See the Touch Template Archive and grab files if you want to see more about this.
What do you think?
If you get one, or see one, what do you think? I may get enough response that I need to make a second run, and I already know that will need revisions. Visit the Touch Template Ideas page and add what your ideas are. You can twitter or email me or whatever you want, if you don't have, or want, access to the wiki.