3 ms·

Best Practices of Touch Screen Interface Design

14 points by wmeredith 19y ago

A collection of lessons learned (and a few ignored for the sake of aesthetics) while designing and research the design of a Mobile Safari (iPhone/iPod Touch) web app.

sanj 19y ago
I think that direct manipulation on a touch screen is a big deal. "Grabbing" an object by touching it and then being able move it is an even better illusion on a touch screen than with a mouse. And it is delightful.
- tokipin 19y ago
  this is one of the reasons i use my wacom tablet all the time now i just need to buy me one of them expensive wacoms that let you write right on the screen <_<
  - silencio 19y ago
    I'd like one where I could use my hands on the screen with an appropriate UI at a reasonable price. I have a wacom intuos tablet which can be sweet for the likes of Photoshop, but I got an iPhone a year ago and (with the exception of badly designed apps, of which there are plenty) it's just not the same. In fact, every single LCD I use has fingerprints all over it because sometimes I forget they're not touchscreens and I touch the display to do something. But the iPhone just feels different from most touchscreen-based systems I've used. Probably the UI. It's a lot more responsive and intuitive.
- ComputerGuru 19y ago
  But "grabbing" is a less-efficient solution. Just as moving the mouse around may be less efficient than typing on that keyboard; grabbing stuff to interact with them can be a waste of time. More intuitive != more productive; and the current problem (IMHO) with mobile devices is that they have such low efficiency rates that their productivity _despite_ the advantage of being always on and always with you still suffers (as a result of size, awkwardness, and time-consuming adaptations we need to use).
  - sanj 19y ago
    I totally disagree. Building a handheld application requires getting into the mindset of the UI that it requires. I say this having worked on handhelds for, um, 15 years now. And you're badly undervaluing delight. Let me give a concrete example from my own work. A buddy an I wrote a text-adventure parser so you could play stuff like Zork and HHGTTG on the Newton. It worked really well and was reasonably popular at least partly based on the interface. Understand that you always have access to a keyboard on the Newton -- there was even an external one. But what we did was to have a word automatically entered on the input box when you tapped on that word above in the description. That was scads faster than tapping something out. And made users wicked happy.
    - comatose_kid 19y ago
      sanj, Your comments have been pretty insightful. Would you mind sharing a little more about your background wrt handheld development?
      - sanj 19y ago
        Sure. I ended up with a Newton from school when Apple was dumping the MP100s. A buddy and I started writing stuff for them -- some games and a VT100 emulator. Bits of them here: http://web.archive.org/web/20041210150544/http://www.scrawlsoft.com/ http://web.archive.org/web/20041210150544/http://www.scrawls... The game I mentioned is here: http://web.archive.org/web/20030811081833/scrawlsoft.com/products/yazi/info.html http://web.archive.org/web/20030811081833/scrawlsoft.com/pro... When the Newton disappeared on 1997-02-27, we got call from the guys at Palm (mostly ex-Newton folks) to lure us to code for the PalmOS rather than WinCE. We only wrote one neat bit: http://www.powermedia.com/pilot/index.shtml http://www.powermedia.com/pilot/index.shtml About a year after that I helped cofound PatientKeeper, http://www.patientkeeper.com http://www.patientkeeper.com, where I wrote the first 7ish versions of the handheld app before we hired some really talented engineers to hand it off to. I spent the next several years writing the server side of that system while watching them take ideas I'd had to new, amazing places. My last project there resulted in this: http://www.patientkeeper.com/news_and_events/press_releases/2008/02132008.html http://www.patientkeeper.com/news_and_events/press_releases/... Which, by my calculations, represented ~70% of their $45m FY08.
wmeredith 19y ago
Yes, I whole heartedly agree. This is one of the strengths of touch screen interfaces. Reaching out and manipulating something is just about the most natural way to interact with it. Just watch a baby for a few minutes, they're instinct is to touch everything.
- ComputerGuru 19y ago
  It could be argued that the reason they touch is because they haven't learned to use other (more efficient) senses in-tandem with the unique human ability to deduce and comprehend. We can touch things to see what they do, or we can process what we see and hear to arrive at the same conclusion but with less physical effort and in less time.
sanj 19y ago
The Newton provided some nice UI guidelines. One of the ones I liked was putting controls on the bottom of the screen and the results/display on the top. This prevented your hand from obscuring the results.
- wmeredith 19y ago
  That's a good point. I've appended it to bullet point #7.
nirmal 19y ago
Good to see that this is being blogged about. There's been a lot of research done to find the most efficient button sizes for handheld touchscreens. I think the next big push is going to involve design guidelines for truly mobile apps, apps you use while actually navigating the world and not stopping to work. See http://www.mediateam.oulu.fi/publications/pdf/1076.pdf http://www.mediateam.oulu.fi/publications/pdf/1076.pdf for a paper called "Target size study for one-handed thumb use on small touchscreen devices". It's a good starting point. I had to think about this hard when we created Mobiphos, http://nirmalpatel.com/mobiphos.pdf http://nirmalpatel.com/mobiphos.pdf to study mobile collocated photo sharing.

14 points by wmeredith 19y ago

A collection of lessons learned (and a few ignored for the sake of aesthetics) while designing and research the design of a Mobile Safari (iPhone/iPod Touch) web app.

sanj 19y ago

I think that direct manipulation on a touch screen is a big deal. "Grabbing" an object by touching it and then being able move it is an even better illusion on a touch screen than with a mouse. And it is delightful.

tokipin 19y ago
this is one of the reasons i use my wacom tablet all the time now i just need to buy me one of them expensive wacoms that let you write right on the screen <_<
- silencio 19y ago
  I'd like one where I could use my hands on the screen with an appropriate UI at a reasonable price. I have a wacom intuos tablet which can be sweet for the likes of Photoshop, but I got an iPhone a year ago and (with the exception of badly designed apps, of which there are plenty) it's just not the same. In fact, every single LCD I use has fingerprints all over it because sometimes I forget they're not touchscreens and I touch the display to do something. But the iPhone just feels different from most touchscreen-based systems I've used. Probably the UI. It's a lot more responsive and intuitive.
ComputerGuru 19y ago
But "grabbing" is a less-efficient solution. Just as moving the mouse around may be less efficient than typing on that keyboard; grabbing stuff to interact with them can be a waste of time. More intuitive != more productive; and the current problem (IMHO) with mobile devices is that they have such low efficiency rates that their productivity _despite_ the advantage of being always on and always with you still suffers (as a result of size, awkwardness, and time-consuming adaptations we need to use).
- sanj 19y ago
  I totally disagree. Building a handheld application requires getting into the mindset of the UI that it requires. I say this having worked on handhelds for, um, 15 years now. And you're badly undervaluing delight. Let me give a concrete example from my own work. A buddy an I wrote a text-adventure parser so you could play stuff like Zork and HHGTTG on the Newton. It worked really well and was reasonably popular at least partly based on the interface. Understand that you always have access to a keyboard on the Newton -- there was even an external one. But what we did was to have a word automatically entered on the input box when you tapped on that word above in the description. That was scads faster than tapping something out. And made users wicked happy.
  - comatose_kid 19y ago
    sanj, Your comments have been pretty insightful. Would you mind sharing a little more about your background wrt handheld development?
    - sanj 19y ago
      Sure. I ended up with a Newton from school when Apple was dumping the MP100s. A buddy and I started writing stuff for them -- some games and a VT100 emulator. Bits of them here: http://web.archive.org/web/20041210150544/http://www.scrawlsoft.com/ http://web.archive.org/web/20041210150544/http://www.scrawls... The game I mentioned is here: http://web.archive.org/web/20030811081833/scrawlsoft.com/products/yazi/info.html http://web.archive.org/web/20030811081833/scrawlsoft.com/pro... When the Newton disappeared on 1997-02-27, we got call from the guys at Palm (mostly ex-Newton folks) to lure us to code for the PalmOS rather than WinCE. We only wrote one neat bit: http://www.powermedia.com/pilot/index.shtml http://www.powermedia.com/pilot/index.shtml About a year after that I helped cofound PatientKeeper, http://www.patientkeeper.com http://www.patientkeeper.com, where I wrote the first 7ish versions of the handheld app before we hired some really talented engineers to hand it off to. I spent the next several years writing the server side of that system while watching them take ideas I'd had to new, amazing places. My last project there resulted in this: http://www.patientkeeper.com/news_and_events/press_releases/2008/02132008.html http://www.patientkeeper.com/news_and_events/press_releases/... Which, by my calculations, represented ~70% of their $45m FY08.

wmeredith 19y ago

Yes, I whole heartedly agree. This is one of the strengths of touch screen interfaces. Reaching out and manipulating something is just about the most natural way to interact with it. Just watch a baby for a few minutes, they're instinct is to touch everything.

ComputerGuru 19y ago
It could be argued that the reason they touch is because they haven't learned to use other (more efficient) senses in-tandem with the unique human ability to deduce and comprehend. We can touch things to see what they do, or we can process what we see and hear to arrive at the same conclusion but with less physical effort and in less time.

sanj 19y ago

The Newton provided some nice UI guidelines. One of the ones I liked was putting controls on the bottom of the screen and the results/display on the top. This prevented your hand from obscuring the results.

wmeredith 19y ago
That's a good point. I've appended it to bullet point #7.

nirmal 19y ago

Good to see that this is being blogged about. There's been a lot of research done to find the most efficient button sizes for handheld touchscreens. I think the next big push is going to involve design guidelines for truly mobile apps, apps you use while actually navigating the world and not stopping to work. See http://www.mediateam.oulu.fi/publications/pdf/1076.pdf http://www.mediateam.oulu.fi/publications/pdf/1076.pdf for a paper called "Target size study for one-handed thumb use on small touchscreen devices". It's a good starting point. I had to think about this hard when we created Mobiphos, http://nirmalpatel.com/mobiphos.pdf http://nirmalpatel.com/mobiphos.pdf to study mobile collocated photo sharing.