Touch Screen iPhone Game Controllers

Controlling games just with a touch screen is, apparently, not an easy task. Not everybody is getting it right, it’s not only about the programming of the control, it’s also about the design. Direction and reaction speed are key issues to keep gamers playing. Here I have a few examples of touch screen iPhone game controllers.

EA got it right with The Simpsons Arcade interface. The design has a blue joystick that looks like a ball. The good thing is that this touchscreen joystick works perfectly without raising the finger from the screen, just moving it a little bit is enough to control Homer.

The Simpsons Arcade for iPhone with controllers

The Simpsons Arcade for iPhone touchscreen joystick

On the contrary, this Pacman version got an unhappy design solution. The touchscreen reacts slower than a real button, for this reason raising the finger should be avoided. This virtual joypad forces the user to raise the finger the whole time. As a result, moving the Pacman is slow and difficult.

Pacman for iPhone with touchscreen joypad controllers

pacman_for_iphone_with_joypad

Dig Dug, such a fun game… Unfortunately, it also got a touchscreen joypad that works very slowly. Most of the fun is gone.

Dig Dug touchscreen controllers

Dig Dug touchscreen cross-shaped joypad

The Commodore 64 emulator for iPhone has another virtual joystick. Probably, designers were focused on making the game look good; and it does look good. The joystick behaves almost like a real one; with it the user has to move the finger too far from the origin (central point) making the movements too slow. Unfortunately, controlling this game is a nightmare.

Commodore64 emulator on iphone

Commodore64 emulator on iphone with touchscreen joystick

In my opinion, the reason iPhone games should not be designed to make the user raise the finger from the on-screen joystick is that it is difficult to hold the device. The iPhone is a great device but it lacks the ergonomic features of a real joystick. Maybe that’s why Marware released an [expensive] iPhone game grip.

Marware game grip for iphone

Graphical and Physical Keypads

What can go wrong with a keypad design? Not much, we could think. Actually there are several things to make the interface easier to use (or usable at all!). Let’s see some examples.

google_voice_mobile_keypad_interface

Google Voice interface. Image from funkyspacemonkey.com

It’s difficult to imagine a keypad interface clearer than the one of Google Voice for iPhone. Everything is in the right place, there are no possibilities for confusion.

android_keypad

The Android interface. Picture by xda-developers.com

The Android keypad is not bad, but I’m a little bit skeptical about the lack of separation among the number columns and about the fact that buttons don’t look like buttons. Still, I think it might work pretty well most of the time.

windows_mobile_keypad

Windows Mobile keypad interface. Picture by extremeppc.com

The Windows Mobile keypad interface could be a little bit confusing, I don’t like the fact that numbers are located on the right side of the buttons (instead of being in the center). Some people, specially the ones with big fingers, might accidentally press on the wrong button if they try to tap on the number and not in the center of the button. This configuration could also be a little bit disturbing for the users’ eye, humans tend naturally to look for symmetric signs and this buttons lack of that harmony.

keypad_bad_design

Door keypad in Starbucks. Picture by Alexis Brion.

The last example is coming from the physical, real, world, not from a software interface. This is the keypad to unlock the toilet door at the Starbucks located in the Düsseldorf central station. I was sitting close to it and I couldn’t help watching the clients fail several times when trying to enter the code. Numbers are not located on the buttons, they are below them. Users were confusing labels: which is the number 5 button?

Comparing Digital Camera Interfaces

This is a compilation of digital camera interfaces. Specially, I want to show the differences among button designs. This is not a product review and I don’t want to criticize too much, just to show them to see the differences. In order to properly judge the cameras we should see how the people behave when using them, thing we did we a few models only.

We spent some time in a huge shop touching cameras and observing other people doing the same. That gave us a first insight on the different perceptions about these devices but, of course, a shop is not the “natural” environment where people take pictures, so the context was not totally taken into account.

At last, we did interview people about cameras and we observed them taking pictures and touching the things. The conclusion: there is room for improvement on digital camera designs.

Here there are some comments and pictures of different compact cameras.

Rollei

001-rollei-x-8_sports_back-1It is easy to see the symbols on buttons, the contrast is good but having several functions working on one button could be confusing. From Rollei, we liked the way it navigates through pictures (unfortunately I can not show you that).

002-rollei-x-8_compact_white_back

003-Hi_Res_Rollei_XS-10_inTouch_Back Having less buttons could make the camera look simple, but this graphic interface show us that this is not always true.

004-rollei_cl_80_pink_back-416kb Here we noticed that it is very difficult to see the labels on buttons, the contrast is very bad.

005-rollei-8330x-se-back-gross-1211985606

Kodak

008-8765-kodakz8612back One function for each button could be a good approach. I like the knob to turn the camera on and off, it’s impossible to confuse it with the shooting button.

007-camera-backThe “Share” button might have good functionality, but honestly I don’t know what it does. What we discovered interviewing elderly people is that this group avoids pressing on buttons they don’t know what they are for.

Casio

028-Casio-EXILIM-EX-H10-10X-Zoom-Camera-pink-back This one has some buttons on the top that are almost impossible to see while taking pictures. “BS” seems to be something only Casio uses, we don’t know the meaning.

027-Casio-EXILIM-EX-Z90-back Painted buttons have great contrast! Unfortunately, it is very difficult to see what’s written on the other ones.

026-Casio-Exilim-EX-Z280-zoom-Compact-Digicam-back 025-Casio-Exilim-EX-S12-back1 It seems that Casio likes wheels. Unfortunately, these wheels do not behave like real wheels.

024-casio-exilim-ex-fs10-back

Sony

023-Sony_CyberShot_DSC-W270R_back There are some contrast issues here (on the buttons), but the most impressive things are the wheels. The one on the top is a real wheel the user can turn, the one on the bottom can not be turned.

023-sony-cybershot-DSC-N1-1 These two models (above, below) got a touch screen. This is a risky approach, success depends mostly on how well the graphic interface is designed. For the one below, graving it properly could be quite complicated. 022-sony-cyber-shot-screen-back 021-sony-cyber-shot-w210-back 020-sony_cybershot_w300_backThis model got lots of functionality, buttons and wheels!

Nikon

019-nikon-coolpix-l100-back Flash position is good here, it’s difficult to place the finger on it.

019-nikon-coolpix-l20-back The wheel could be an issue here and the buttons on top of the camera could not be seen when needed.

018-nikon-coolpix-p6000-backSome of the buttons in this camera seem to be part of this brand’s lexicon.

Panasonic

017-Panasonic-Lumix-TS1-back Painted buttons look great but the other ones have very bad contrast, I can imagine this being a big issue using the camera outdoors and even more for the elderly.

016-panasonic_lumix_dmc-lx3_back I wonder if labels like “AF/AE” are understandable to everybody. Should we carry the manual with us?

015-panasonic_dmc-tz5_back 014-panasonic_lumix_dmc-zx1_back

Canon

013-canon_sx200_rot_2 On many Canon cameras the wheel looks and works like a wheel, main function of it is to navigate through saved pictures. I like it a lot. 012-Canon_sd790_backInteresting design, but using buttons that don’t really look like buttons could be dangerous.

011-0905_canon_ixus_110_is_back This model goes in the right direction. The wheel is great. Unfortunately the graphic interface is not that simple.

010-canon-powershot-sd950-is-back We noticed that symbols on this model are difficult to understand for many people, specially the ones on the top wheel.

009-canon_sd750_back

Credits: some comments and thoughts on cameras were developed with help of Nora Gonzalez Dwyer.