I'm starting a new project which involves developing an interface for a machine that measures wedge and roundness of lenses and stores the information in a database and reports on it. There's a decent chance we're going to be putting a touch screen on this machine so that it doesn't need to have a mouse or keyboard...
I don't have any experience developing for full size touch screens, so I'm looking for advice/tips/info from you guys...
I can imagine you want to make the elements a little larger than normal... space buttons out a bit more.... things like that... anyone have anything else to add?
A few things to consider:
You need to account for parallax error when touching controls. Basically, the user may touch the screen above or below your actual control and therefore miss the control. This is a combination of the size of the control (eg you can have the active area larger than visual control to allow the user to miss and still activate the control), the viewing angle of the user (which you may or may not be able to predict/control) and the type of touch screen you're using. If you know where the user will be placed relative to the screen when using it, you can usually accommodate this with appropriate calibration.
Depending on the type of touch screen, you may need to ensure that your users aren't wearing gloves or using an implement other than their fingers (eg the end of a pen) to touch the screen. Some screens (eg those depending on conductance) don't respond well to anything other than flesh and blood.
Avoid using double clicks because it can be very hard for users to reliably double click a control. This can be partly mitigated if you've got experienced/trained users working in a fairly controlled environment where they're used to the screens.
Linked to the above, if you are using double clicks, you may find the double click activated when the user only wants to single click. This is because it's very easy for the user's finger to bounce slightly on touching the screen and, depending on how sensitive the double click settings are, trigger a double rather than a single click. For this and the previous reason, we always disable double clicks and only use single clicks (or similar single activation controls).
However big you think you need to make the controls to allow for touch activation, they almost certainly need to be bigger still. Make sure you test the interface with real users in the real deployment environment (or as close to it as you can get). For example, we deployed some screens with nice big buttons you couldn't miss only to find that the control room was unheated and that the users were wearing thick gloves in the middle of winter, making their fingers way bigger than we had allowed for.
Don't put any controls near the edges of the screen - it's very hard to get your finger into the edges (particularly if the screen has a deep bezel) and a slight calibration problem can easily shift the control too close to the edge to use. Standard menus and scroll bars are a good example of controls that can be very tricky to use on a touch screen and you should either avoid them (which is preferable - they're not good for touch screens) or replicate them with jumbo equivalents.
Remember that the user's hand will be over the screen, obscuring some of the screen and controls (typically those below where the user is touching, but it depends on the position of the user relative to the screen). Don't put instructions or indicators where the user's hand or arm will obscure them when trying to use the control they relate to (eg typically put them above rather than below the control).
Depending on the environment, make sure your touch screen is suitably proofed against dust, damp, grease etc and make sure it's easy to clean without damaging it. You wouldn't believe the slime that can quickly accumulate on a touch screen in an industrial or public setting.
The other obvious one is that there's no equivalent of pointer 'hover'. Not that that affects many apps though.
If you decide to put in analog controls (scrollbars, rotation widgets, etc) be sure to put in a digital control also. Some companies think that a touch screen means perfect control over something with your fingers. In real life, this translates to minutes of frustration trying to fix a number that's just a little off.
The most obvious thing is that everything on the GUI needs to be big enough for a fingertip to hit, which is sometimes bigger than you think.
As has been mentioned, there's really no way for a right-click action to happen. Also, double-clicking can be tricky with a fingertip on a touch screen.
The other major thing is that you'll want to create a on-screen keyboard that pops up for text entry and an on-screen numpad for number only fields.
I wrote my own set of controls for a POS application designed specifically to be touchscreen friendly.
Remember to allow enough real estate for stubby fingers and talons. In our application the users can have these manicures that necessitate them to use the pad of their finger instead of the tip. This means that you need to allow more space for activation areas than you would normally consider in any other type of application.
I would also recommend that you accommodate yourself as a programmer from a testing standpoint and from the point of view that things change and there may need to be a keyboard/mouse attached to a non-touch workstation. I cannot tell you how many times I went to touch my flat panel LCD expecting something to happen, before remembering that I had to use the mouse.
Make sure to read your basic UI principles like Fitz law (The time to acquire a target is a function of the distance to and size of the target).
Also consider whether or not the device is stationary or not when it is in use (e.g., like a palmpilot or iphone), research shows that you must accomodate that into your design.
The larger gui elements is the major thing. But it applies to all elements, scroll bars, tabs and even text fields.
The other major thing that I can think of, it's hard for the user to right click. So things that require a right click should be avoided, context menus are the only thing that comes to mind at the moment.
The other responses are pretty good, but are you totally sure that a touch screen would actually be easier to use? There are a lot of devices where a touch screen actually makes them much harder to use, not easier. The main problem is that you can't use the device when you're not looking at it. If users are going to be doing a lot of repetitive actions, a keyboard could be a lot more efficient.
Also, a touch screen might be a lot harder to use by someone with a disability, if you think there's even a small chance that could happen.
Even though this is quite old now, I found it to still be useful, as a starting point for design considerations.
http://www.sapdesignguild.org/resources/tsdesigngl/index.htm
If you've not already done so, have a look at some of the documentation available for developers on mobile platforms, eg Windows Mobile, iPhone.
Related
One way users can cheat with games (desktop or web) is by having "robots" monitor the screen and move the mouse for them. Is there a way (of course with transparency and user permission) to monitor if an application is controlling the mouse? I am primarily interested in a windows app, but if there is a way for other OS's that would be useful to know as well.
Thanks!
There shouldn't be. Any sensibly designed UI layer will only pass events to the applications, about inputs such as mouse, keyboard etc. Those events will typically not include information about how the event was generated (you're not supposed to care, so why pay for that overhead).
One way might be to scan the system for processes having names of known "event-fakers", much like some anti-virus programs blacklist applications by name.
On Windows you can add a hook to monitor for injected keyboard or mouse messages,
and remove them if you like.
But I'm not sure if you can find the source of the messages.
Just an idea:
Get the current mouse position and check for fast position changes.
Like from (10,15) to (1000, 400).
Most robots just set a new position and don't imitate the human mouse movement.
Is there a way to capture the amount of screen that is making contact with the users? I assume there is since this finger painting app shows the ipad responding to only the pixels that the user makes contact with.
Thanks so much in advance for your help!
The size of the touch is abstracted away by the framework, and UITouches only contain calculated (“best estimated”) points instead of the raw, actual areas that were touched. I would guess that the “pressure” was calculated from the duration and the direction of the touch.
In a nutshell, there is no public API to get the contact area.
I don't think Apple provides APIs for the size of the touch, or as #nickthedude said (I think) any kind of way to measure pressure. Basically, you need to implement your own algorithm/policy for determining line thickness/opacity/other effects. I believe a common way to do this is to measure the amount of time spent for the stroke, and work from there. For instance, if the user moved more quickly, you might want a thinner line segment. Apple really should just provide a canvas view of some kind. Best of luck!
to get the exact area you may have to roll your own but you can get uievents pretty easily and then do some magic from there. Basically impliment/override touchesBegan, touchesEnded, touchesMoved on the UIView in question and put in your custom code there.
Looking at the video maybe the amount of touches in the UIEvent set might correspond to the "pressure" of the touch, then again maybe not.
What if you laid down a series of successively smaller square uiviews wherever the user touched then if the touches "spilled" into the larger uiviews behind the smaller front ones than you could conjecture that the touch pressure was harder. Something to try I guess. Good luck.
Why not just describe what you want to do and foxus on asking about that instead - it may not have anything at all to do with the example that has you so otherwise enthralled - I can use a camera to monitor your hand from across the table and paint pixels on the screen via BT, completely ignoring any contact between your fingers and the screen.
Is there a way to convert an image on the fly to "Red on Black" for accessibility? I have pictures that I want to stream to the iphone. Viewing them at night, Red on Black is better for viewing.
Answer:
You're much better off making your own night friendly images, and swapping those out along with text color, etc.
I'm not sure how you have your current images implemented, but before they load you could check for BOOL isNightTime, and if it returns TRUE, then load the nightTime images instead. I would suggest taking your current image set, and duplicating it with the prefix nt_.
Bonus:
You can take this a step further. Grab the GPS location, then use the location to get weather information from Wunderground. Part of their report includes the times of Sunrise and Sunset. You could then use those values and check them against the current time (be careful that all the time zones are playing nice), and from the result of that, enable the NightTime image set.
If you do implement this, make sure that the user can still enable or disable it to his/her preference.
I had originally said NOAA, but I can't find where that information is on their website. I know it's there somewhere. Why are .gov sites so ugly? Anyways, I changed it to mention Wunderground instead, just scroll down to the Astronomy section. They have a pretty well done iPhone website as well, worth checking out.
Bonus 2:
I'm unsure what your maps/images look like, but instead of having to edit them all to red on black, you could instead edit them to white on black, and put a layer on top of that which would allow the user to pick any color/intensity. Instead of using a layer, you could likely also programmatically implement it, but I think a colorizing layer would be much faster/easier.
An alternate method of doing this is to instead make your map transparent/black, and put a layer underneath that which could change colors to the user's liking. You could implement this on a finer scale (place rects of color behind objects/text/whatever else) to allow for full color customization.
Both use transparency to some extent, but I believe that the alternate method requires less overall work.
Bonus 3:
If you're already going through the effort to grab the GPS coordinates, it wouldn't be too much additional work to have it also check with another server, which would point out other users using the application locally on the map. Make sure this is disabled by default, as lots of users are uncomfortable with broadcasting their location to the world.
Science:
It's also worth mentioning that green is a horrible color to use if you're looking for night friendliness. Red is the color you want to be using. Red light doesn't cause the eye to release the enzymes which cause you to lose your nightvision (what you get once your eyes adjust). This is the reason the inside of military vehicles usually have red interior lights, and also why every movie you've ever seen with tactical anything uses lots of red lighting.
Red light is also used to preserve night vision in low-light or night-time situations, as the rod cells in the human eye aren't sensitive to red.
-Wikipedia
I learned this when I went up to Kitt Peak National Observatory this Thanksgiving on a family trip to Arizona. They hand out little keychains with red lights on them, so you can see where you're going in the dark. It was probably one of the coolest things I've ever participated in. I learned so much. If you're in the Tuscon area, or have another observatory local to you, I strongly suggest checking them out.
The keychain they gave me broke and it fell off somewhere, it's nowhere to be found :( It was my only souvenir. If anybody from KPNO happens to see this and wants to mail me another one, my email address is in my profile.
Also here's a link that goes into far much more detail than needed, but I know you're all going to google it anyways.
I did find another solution:
http://sourceforge.net/projects/photoshopframew/
Source code is available and i can run the tiles through photoshop as part of a chain of events for night viewing.
I don't want to use any of the normal touch events in the iphone sdk.
When an user touches the screen I want to find where he touched and all of pixels he touches. Is there a way to do it in iphone ? may be using a low level SDK.
i want this to do it for some thing like a drawing app with finger on iphone.
There is no low-level API. IIRC, the data in a touch object is actually returned by the hardware. In other words, that is all the data that software can get.
Having done some touch UI experiments in the distant past, I can tell you that processing real world touches in software is a lot more complicated than you would expect on first glance. It's not like tracking a mouse. A finger is actually a very blunt and imprecise pointing instrument on the scale of a mobil screen. There is a great deal of variation in finger size, pressure of contact, contact area, angle of contact and consistency of contact. It takes a lot of processing to turn that blunt imprecision into a single point or collection of points that an API can easily use.
I wouldn't try to reinvent the wheel even if you find a way to extract more data from the hardware. If nothing else, (puts on interface-nazi hat) if your touch interface behaves different from other apps, users will be confused when the have to switch back and forth.
A touch is a rather imprecise gesture, so getting all the pixels that one encompasses is not really possible. However, you can get the rough 'center' of a touch, and extrapolate an area around that for a group of 'touched pixels'. No need to use a low level SDK, just override -touchesBegan:withEvent: on UIView.
Please pardon my lack of Photoshop skills, but I'm curious what type of strategy Apps like Facebook and AP Mobile News are using for the 'label slider' in their applications. Here's a quick snippet outlining what I'm talking about as I'm sure the name I'm labeling the utility as is being butchered: http://dl-client.getdropbox.com/u/57676/slider.jpg
Essentially the user can touch the label and glide it along the X axis. It has a smooth bounce effect also once it hits the edges. This gives quite a bit more real estate if you need to present more on the screen than what your portrait mode allows for and is thus very valuable.
Is it a matter of just creating a UILabel that's wider than the screen with a bit of Touch API + Core Animation? Would love insight on how to start tackling this thing.
You'll most likely want to use a UIScrollView, with a UILabel as its content view. Size the label appropriately to your content, and then set the contentSize property of the scrollview to that size.
I created a similar control, and it's much easier than you think. It's just a UIScrollView with a series of UIButtons added to it. You could use labels instead of buttons - just depends on the feel you want. I think Facebook is probably using labels for theirs.
In any case, you'll probably want to use a series of components rather than one component (which is what Ben suggested) in the event that you want to, say, style the "selected" label differently from the others. It also makes hit detection a little easier.
You get the bounce effect for free by default - you may have noticed that most scroll views in iPhone apps do the same thing. It can be turned off as well.