Last May I participated at Christian Crumlish’s workshop about the design of social interfaces. The workshop was great, exposing several design principals, and I felt I had to somehow apply that at work in an interactive way. Based on some tips from Christian and on past experience I organized the following session.

The Principles

Christian’s book Designing Social Interfaces is a collection of design principles and patterns.

• Prepare the meeting choosing 1 or 2 of the concepts proposed in the book.

For example, you could use the Pave the Cowpaths and Use Game Mechanics principles. Read carefully about them.

• Prepare a few slides to explain the principles to your colleagues.

Participants

Depending on the principles you want to discuss about, you might like to invite colleagues from your own design team, product managers, programmers or marketing people. Do not underestimate your colleagues, different ideas encourage discussion.

• Invite people from different groups.

The Meeting

• Explain the principles, give examples.
• Make sure you leave on the screen a slide with the principles (so the participants can read them during the exercise.)

You have to ask participants to imagine how to apply those principles on the current website. For example, you could ask to look for those “cowpaths” from current user behavior that could be “paved” to improve the user experience.

• Ask participants to write short ideas on post-its.
• After a few minutes, ask them to tell out loud what they wrote down, to explain a little bit and to paste the post-its on the whiteboard.

You will find that some ideas are similar.

• Group ideas and ask participants to help you name those groups.

Round Up

This kind of meeting might not give you a definite answer to your design problems, but for sure it could help you start playing with new ideas, based on stablished principles.

Even more, these meetings are a lot of fun and trigger discussion and conversation through different departments.

Give it a try!

Pictures from vancouverfilmschool and VFS

It seems to be already a strong trend in software the mimicking of real-world objects. The trend has been recently emphasized, specially, by Apple and it is creating a lot of controversy among usability experts and interaction designers.

At a first glance, it doesn’t seem to be a bad thing, specially on interfaces designed for tablets targeted to the mass market. But the following is what is ringing a bell:

It seems that the new Address Book for Mac OS X Lion will look like a real address book. This could bring several problems with it, but the most important one is the brake of the user interface standards put in practice by Apple itself. Aside from that, Address Book is a very important productivity tool and this design seems, with several distractions, to require a lot of attention from the user.

The last time I used a non-electronic address book was 11 years ago, then why would I like to go back to a paper-like interface? Even worse, this old style interface might not be understood by the younger generations, many have never seen a paper address book.

Kindle for iPhone and iBooks

Above, you can see the default home screen for the Kindle (left) and iBooks (right) apps. The later mimics the real world with an inefficient way to present titles in the library.

Stanza for iPhone and iBooks

Above, the Stanza (left) and iBooks (right) apps. Stanza focuses on the content and does not try to mimic the real world: flipping pages is really fast and no visual decorations are added.

So why?

It’s a fact that applications that look good are perceived by users as easier to use. From the marketing point of view, applications mimicking the real world might also get much more attention from the general public.

So what’s the problem?

In many cases these applications are not efficient and not follow the rules. It is hard for me, as an Apple fan, to accept the fact that the wind of change might be blowing through Apple: they are braking their own rules.

Although these cases might only be bad examples, the worrying part is that Apple is usually a trend setter and many developers and designers might be tempted to follow. All-right, if users don’t complain at the beginning; most user interface designers know that this path is a dangerous one.

This post is a recap of a vivid discussion I had with my friend and usability expert, Martin Schultz. The topic was also recently mentioned in the episode 17 of the Build and Analyze podcast.

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’s better, multifunctionality or single-purpose? If we refer to digital gadgets and interfaces design there are several good and bad examples for both approaches.

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

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.

Through times, data visualization has worked as a great tool to reveal stories in sets of data. The recipe has been to find a story in the data, attach visual cues to establish a base of familiarity and expectation and boil the data down to the most significant message. When done well, data becomes more accessible and more meaningful.

Today with the web, the conditions have changed. We have technologies that enable new ways to store, collect and share large amount of data as well as the social web that generate tons of real time data, which implies a great mass of dynamic data to deal with. This means we don’t have the same control of the outcome as we had before when we worked with a limit static set of data.

With these new conditions it seems like the designer has shifted role from proving a point to create tools that makes it easy for people to discover and find their own stories. The tools are more about letting them navigate through and understand rich and varied flows of information, using their behavior as navigation. Instead of being a passive observer the user can participate in the exploration.

Here are some intriguing data visualization tools that put the user in the driver’s seat:

Stamen design, a small design and technology studio in San Francisco, work a lot with real time data and infographics. They created Trulia Snapshot that helps you localize homes for sale, and explore different variables like if it’s cheap, expensive, newest on the market, and longest on the market.

They also created Oakland Crimespotting, an interactive map of crimes in Oakland that helps people to sort and understand crime in cities. With this tool you can navigate hour by hour and over time.

Together with Small Batch Inc.  Jeffrey Veen has a few data visualization projects going on, one of them is Wikirank, a tool for exploring new trends on Wikipedia, discovering comparisons between topics and sharing them with the world. He also gave an inspiring talk on the subject at Web 2.0 Expo.

The New York Times creates some really interesting data visualizations; I especially like Casualties of war where you can investigate casualties during war in Iraq through times. The New York Times also let the mass audience participate in their Visualization lab , creating information graphs of all sorts.

Getty images got a whole stack of discovery tools to explore photos. One of the latest is moodstream that enable the possibility to sort pictures by mood.

This one is not new but I really like the visualization of Lee Byron’s histogram What have I been listening to? that shows music listening history with data aggregated from Last.fm. With inspiration from his work Andrew Godwin created a graph generator where you can generate your music from Last.fm, and compare with friends.

For more inspiration check out Visual complexity, a gallery with a variety of different visualization methods.

This approach, where designers let people use their own minds to draw their own conclusions isn’t new. But with these new conditions it becomes more essential to control the flood of information that people meet every day by putting them in the driver’s seat manipulating data in their own way, telling their own stories.

About the article’s writer: Johanna Olander works as an interaction designer and visual designer at the National Library of Sweden/LIBRIS division. She mostly works with LIBRIS the Swedish Union Catalogue, but also with other library related applications.

There is a clear trend in product design, especially in electronics design: in the last years we have been observing the raise of products that offer, additionally to the physical thing, a bunch of extra services connected to the computer and internet ecosystem. In this article I give you a few examples on this design trend.

Kodak cameras are not silly apparatuses

The sudden appearance of digital cameras made Kodak lost big amounts of money, from one day to the other a network of services around the picture development business was gone. So Kodak started thinking outside the camera again but this time in the digital world: they developed Easyshare, a software bundled to cameras that makes photo printing, storing and sharing easy. Easyshare is actually not just another software, it is the revival of that old good Kodak service. I find important the fact that Kodak is now the number one digital camera brand. 

The Kindle should be the new iPod

Let’s say it, the first Amazon Kindle was, judged from the physical point of view, a poorly designed device. So why it was such a success? Amazon did to Sony what also Apple did to Sony; they practically stole the market through the offering of something that is more than just a device; Amazon and Apple designed whole service ecosystems around the Kindle and iPod. Of course, Apple designed beautiful iPods and Amazon had to redesigned the way the Kindle hardware looked in order to make it more appealing and usable, but the new concept here is that physical design, software interface and service design are all very important.

Nokia makes the best cell phones

Any doubt about the previous statement? Well, technically, it is true. I still remember using my Nokia smartphone and being able to connect everywhere and getting a fantastic speaking quality; physically, Nokia telephones are great. But Nokia was in the past not able to successfully design a proper ecosystem around those smartphones, I still remember how complicated loading music or installing applications on the phone was… Oh, and I won’t forget that time when I did an update of the phone’s OS and all my information was deleted.

Connecting to the environment could add glamor to a brand: Fiat

Fiat’s eco:Drive connects cars to computers offering customers the possibility of checking how they drive and offering customized advice on how to drive more efficiently to reduce emissions and save money. Plug the car to the computer to get extra services.

The connected patient

A highly probable success will be the connection of medical devices to systems outside the devices themselves. An example is the asthma inhaler designed by Cambridge Consultants that connects to an online personal health care application to send relevant health information to monitor progress and to make it available to the care specialist. A traditional "lonely" device like an inhaler is now connected to a bigger system to provide a better user experience.

Conclusion

At Design vs Art we believe that in the future devices will be even more connected, not only to the Internet but they should also start talking among them. In order to offer a better user experience and a better service, devices should start connecting and talking to the bigger system they belong to.

Apple recently announced the release of the new iPhone OS 3.0. Yes, it’s great and it comes with many new features we have been waiting for. One of those is worrying me a little bit: Push Notification.

The Apple Push Notification service provides a way of alerting about new information, even when the user is not running the application. Alerts come in three flavors: it could be a numbered badge to be displayed on the application’s icon, it could also be a sound or it could be a text alert.

Looking at the feature from the user experience point of view, in my opinion, the numbered badges are great, sound alerts are just "OK" but text alerts are wrong. Text alerts will be highly distracting and might remind to disturbing message alerts found on Windows systems, like this one:

Alerts are a great opportunity for developers and companies, specially for the ones developing IM services or critical applications that need users’ attention. On the other hand, I can imagine that a lot of these people could be tempted to abuse of the feature; ESPN, for example, announced that they would be sending 50 million notifications each month.

Apple has been creating fantastic user interfaces and I can not believe they didn’t think about the implications of allowing this kind of disturbing messages on a device like the iPhone. We have to wait a few months to see how text Push Notifications will be implemented, maybe not allowing them by default could help.