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.

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.

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

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.

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.

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 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.

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 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.

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?

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

It 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).

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

Here we noticed that it is very difficult to see the labels on buttons, the contrast is very bad.

Kodak

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.

The “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

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.

Painted buttons have great contrast! Unfortunately, it is very difficult to see what’s written on the other ones.

It seems that Casio likes wheels. Unfortunately, these wheels do not behave like real wheels.

Sony

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.

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.  This model got lots of functionality, buttons and wheels!

Nikon

Flash position is good here, it’s difficult to place the finger on it.

The wheel could be an issue here and the buttons on top of the camera could not be seen when needed.

Some of the buttons in this camera seem to be part of this brand’s lexicon.

Panasonic

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.

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

Canon

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. Interesting design, but using buttons that don’t really look like buttons could be dangerous.

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

We noticed that symbols on this model are difficult to understand for many people, specially the ones on the top wheel.

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

Designing for the elderly could be considered as a hard task. Designers are usually not elderly and knowing how a product would be perceived could be considered a not so easy task. But the results of such a task could be highly rewarding as they directly impact on somebody’s life quality. Even more, usually designing for the elderly means designing for everyone. I show here some products designed keeping in mind the needs of the elderly.

Telephones are always a problem

Elderly people seem to be perfect victims for most home telephones and cellphones. They are difficult to use and they offer a lot of functions that many don’t understand how to find. But telephones are devices with a lot of importance to people, specially during emergencies.

Some companies have been designing telephones for the elderly, for example Doro. Big buttons and limited functions make the following phone a hit for those looking for simplicity. I find the possibility of writing the names on the same phone a great improvement for the older ones.

Digital menus

Navigating through menus on a tiny screen is a problem for a lot of people. Many get lost and don’t understand how to select, scroll or go back to the beginning. Interaction designers at Emporia, like at Doro, have been having this in mind and add a memory help notebook directly on the phone. Note that the notebook is all the time facing the user (and not in the back of the headset like in many home phones).

Functionality over style?

Designs for the elderly tend to be ugly: huge buttons, huge letters on a huge screen and terrible colors. But designing for the elderly is designing for all and if the designer is able to produce something appealing to everybody the product could be probably sold to a larger number of people.

The Deutsche Telekom released a home telephone that was initially thought to target the elderly. Not surprisingly a lot of young families are buying the phone. It has big numbers but they still look nice, it has fast dialing buttons and a paper notebook on the charging base.

Again, less digital menus

Something that people are requesting is to have more physical buttons. The Deutsche Telekom placed the answering machine controls on the charging station to make the listening of new messages easier.

That need for adding features

This telephone is including a flashlight and a radio, each function with its own button. Design research might have been revealed that those are important features for elderly people. But they also seem to be there just because it was possible to add something else. A dedicated button for a radio, do we really need that on a cell phone? Is that going to improve the user experience?

Action buttons are a way to represent the beginning of an action. There are HTML buttons and image buttons. It is very important that image action buttons look like buttons, with some 3D effect. For example at Twitter all the buttons are flat, thing that could erode usability and bring confusion to the user.

Twitter Sign In flat button

I wrote about this topic before but I would like to show you other examples of action buttons I have found.

Google Mail "Send Invite" button

h5.com "Find Friends" button starts the search process

Ebay "Sign In" 3D button starts the process

Adobe Buttons start the download process

The "Sign In" button at Ta-da List is just perfect. A user can not get confuse.

Placing action buttons in the right position is something that could improve usability and the whole user experience at your site. Action buttons are used when user input is required. For example a "vote" or "add to cart" button (see more on action buttons).

"Placing a checkout button on a visible location is very important and will prevent users from flying away…"

The checkout button is an action one, it’s used at online shop websites to start the checkout process that finishes a purchase. Placing a checkout button on a visible location is very important and will prevent users from flying away from the website just before buying the products. Once again, this is a clear example of how usability can have an important impact on sales.

Best Buy, the online retailer for electronics, places the checkout button in a position that could be out of the sight of the user if she has a small screen or if the screen resolution is too big. In this example, the user has to scroll down to see the checkout button (below the red line).

Amazon has a smart design, they place the Proceed to Checkout button not only at the bottom of the page but also in a very top position. This way, there is no chance not to see the checkout button.

It could be a great problem if users don’t understand that they can click on a button, even worse, they might not notice that that button is actually a button. Then you have users moving the mouse around the website, trying to find something to click.

To avoid this usability flaw, try to include 3D buttons in your interface design. Most users understand the message because it represents their mental model and the real life: oh, it can be pressed!

In the example below, taken from Google Calendar, the arrow buttons are totally flat and it’s difficult to notice that they are activated.

Expedia.com, with its “Search for flights” button and Lego, with its “Search” button, give users a clear message: this is a button, is activated and you can click on it.

Using buttons when designing a website could be a better solution to indicate actions. On the other side links usually tell users that they will be taken to another page.

In the two examples taken from WebMD, the health website, buttons clearly indicate the beginning of a process or action. In both cases using links would have been not totally correct, creating a little bit confusion to users.

Intentional bad design is also a horrible way of taking advantage of users. The better example now a days is the myspace transmissions website.

The whole site is horrible and full of buttons that don’t do what they are supposed to do, like a virtual equalizer and a fake volume control.

The worst part is two controls labeled as “videos” and “pics”. They are there to confuse users and when they click they are taken to another page (instead of doing something with the interface). If you do that your users will be afraid of clicking every single control of the interface. Even worse, if some controls don’t have a label and are not self explanatory. Terrible web design, horrible usability.

Please don’t be so innovative creating buttons! I was checking Future Scanner, something like Digg but for future news. The idea is really cool but the interface design is just horrible.

Look at this examples. Trying to click on the arrows to vote for a particular article, a message appears reading “Login”. I understood the message, but when I tried to click on that word, it just disappeared. Please, try to avoid that kind of interface behavior.

Then I found the advanced filter button. It has an arrow pointing down that made me think a drop down menu would appear. Well, I was wrong. That button took me to another place.

This funky buttons might require a lot of effort and confuse users, so in order to improve usability, I would recommend you to stick to the normal solutions.

.