I was doing some user research asking people to show me their way of using their web browser and I was specially paying attention to the homepage. These are some of my findings:

- It is very important to have search functionality in the homepage. Users go there as an starting point to a new search.

- People like having relevant information in the homepage, like feeds coming from different websites or news coming from a particular source (e.g. Yahoo!).

- Many users get lost when using tabs. I’ve discovered that many don’t even know what a tab is, the potential of tab browsing is something unknown to many people.

Based on that I prepared my proposal for the design challenge:

It would be nice to get your comments!

Find here more information about the Home Tab Design Challenge.

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.

Processing is an open source programming language to program images, animations and interactions. It is used by designers to create prototypes and to create interactive interfaces. One of the best characteristics about this language is its community, which is encouraged to share what it creates.

Click once on the image and move your mouse to change the wind direction.

More about the Processing project here

Download the Design vs Art Christmas Card code to modify

Is there a limit for multifunctionality? The following imaginary design illustrates the problem of multi-function devices and applications: the solution reaches a point where a big amount of features offered block the access to them and makes the whole product unusable or difficult to understand.

An overwhelmed Swiss knife

Multifunctionality could be also a problem in graphical interfaces. In the following picture there is a screenshot of the FStream applicaton for Apple iPhone, an application to listen online radios and other sound streams. This app used to have only 3 visible options at the bottom:  Play, Favorites and More. Now it is already showing the option “Record”, which, I assume it is only useful for limited amount of radio listeners. Ohh… it’s so easy to add just one more feature!

FStream App for iPhone

Google Android phones (and iPhones) are a good example of multi-purpose devices. Thanks to their good interface design users are able to manage a huge range of different tasks: music, pictures, work, maps and more. Still, they are victims of their own success; multitasking people could feel the need for more than one phone: users can do several things with them, but not at the same time.

Picture from Google Mobile Blog

Logitech Harmony Remote is a device that remotely controls 225000 different devices, including televisions, DVD players, radios and video games. A real do-it-all device. Unfortunately the interface description on the Logitech website is very vague but if the interface is well done it could eventually be a good product for geeks. But they are not going to sell it to my mother…

The Harmony Remote controls 225000 devices

“Reading is an important activity and deserves a purpose-built device”, said Jeff Bezos to the New York Times. He might be partially right, probably many users don’t want to see more features on the Amazon Kindle. Many think the audio book feature is already redundant (why would you need it if you have a great pocket size iPod?). On the other side, Bezos’ statement might just lack of sincerity; maybe he is not putting more features just because the device is limited by a low resolution, black and white, slow, not touchy screen.

The single purpose Amazon Kindle

Few devices can be more purpose-specific than the WikiReader. Many laughed at it when it was announced, now it’s a top seller. Simple interface design makes it a king in the only thing it does: accessing Wikipedia information without complications. Maybe someone using an iPhone won’t need it but what about children?

The single purpose WikiReader

I would like to show you some Poka-Yoke examples.

SIM Cards. Thanks to the trimmed corner, a SIM Card can not be put into a cell phone in a wrong way.

SIM Card. Picture by Declan Jewell.

On Search. Poka-Yoke concept is used by Google’s search box and by other search engines to suggest users possible search terms. In the example, I mistyped “Poka-Yoke” so the search box proposes to search for the right term. The problem with this behavior is that these suggestions could influence what users search.

Google search box.

iPhone. Every time a user starts a new note on the Notes application for iPhone, the upper case option is on and ready for the first letter. This is a way to prevent orthographic mistakes.

iPhone Notes application screenshot.

USB Connector. Thanks to its inner shape, an USB connector can not be connected in the wrong way.

USB Connector. Picture by PJstoneson.

…actually, the shape of the connector not only prevents from connecting it upside down but also to connect it in the wrong place.

Different shapes for each connector. Picture by Goodrob13.

Padlocks. Good padlocks do not release the key if it is not totally locked, making sure that the mechanism is totally closed and avoiding mistakes. In this case safety is a big issue.

A padlock. Picture by Greenkozi.

The TDK Designer Solar Panel. Picture by Engadget.

A good example is the TDK solar panel design that has different draws and patterns on it. It could be argued that this device may not be as efficient as a normal solar panel but making the solar panels attractive could do a lot to make the adoption of the technology faster; and that’s important. The real potential in this technology is for use in big surfaces (like buildings) and maybe not just as personal devices.

Docomo Touch Wood phone

Many could think that the Docomo Touch Wood phone, made of wood, looks good. As this is avoiding the use of traditional plastic this design could be going in the right direction. In comparison to bio plastics, wood could last longer and, eventually, the case box could be reuse. Can we imagine updating the inner part of a wood phone instead of throwing away the whole thing?

Novothink solar charger for iPod

I am a little bit more skeptic about the greenery of this specific-use gadget. This is yet another gadget and the amount of resources needed to build it is probably big (water, energy, plastic, etc.). This is a big question we should ask ourselves as designers if we design a product to be marketed as “green” or sustainable: with this thing, do we save resources or do we consume more out of the planet?

The Samsung phone made of corn

Bio plastics are a very interesting material, still their advantages are questionable. They could be made of different sources, like potatoes and corn, fact that makes them not only less polluting but also morally incorrect (many people would argue). Of course that might depend on the efficiency of the producing of these materials: how many potatoes do we need to produce a kilo of bio-plastic?

]]> http://www.designvsart.com/blog/2009/10/16/make-sustainable-products-attractive/feed/ 3 http://www.designvsart.com/blog/2009/10/07/graphical-and-physical-keypads/ http://www.designvsart.com/blog/2009/10/07/graphical-and-physical-keypads/#comments Wed, 07 Oct 2009 14:11:15 +0000 Alexis Brion http://www.designvsart.com/blog/?p=695 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?

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.

Logo of the Interaction Design Association

This meeting should be a first get-together for the local community, and of course for visitors from other places too. Interaction designers, industrial designers, usability experts, web designers; all are invited to join and collaborate.

For more information, please visit: http://www.ixdamunich.de/