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.

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.

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.

If a website is available in several languages it is, logically, very important to give users an easy way to change to their preferred one. Unfortunately there is no standard interface design on how to do it, every website it’s taking a different approach.

On a little research I did I’ve found the following:

- Showing a flag is the strongest way to show that your website is available in different languages or for different regions.

- Showing a world icon works well, but not always.

- Using phrases like "change to global edition" does work but it is not always easy to find.

Here there is collection of website UI design examples presenting internationalization and localization options: 

Apparently, there are several approaches to design a user interface with internationalization and localization options. My general recommendation is to place the links in a visible position and to display a flag icon if that matches your website design.

Note: following our request, Balsamiq sent us an activation key to fully test the product.

The big thing

After trying several mockups tools, what it got my immediate attention was that the elements bar is located on the top of the window. Elements like buttons, containers, text and others for the iPhone are represented by huge icons that users only have to select and place on the mockup to make use of them. It doesn’t seem to be an important feature but it actually is, I have problems with other tools at the moment of looking for elements. 

The "sketchy" look is great

I like the sketchy look so much because it turns attention away from details and allows users and testers to focus on the content and functionality. With this feature everybody understands that the presented "web" is just a test (what it also encourages users to criticize without fear).    

A few problems found

I have found two main negative issues:

- The property inspector is a floating bar appearing and disappearing as the user clicks on an element. I wish it was just a normal bar that is there without moving around, the fact that it is "blinking" all the time distracts users when they working. 

- It is no possible to link mockups among them. This is a key feature that many other tools offer and Balsamiq should too. The company is already working on this (as I read on forums). 

Conclusion

We are probably going to keep on using Balsamiq Mockups and I would totally recommend the tool but linking mockups is a feature that Balsamiq should offer to keep next versions competitive. 

Internet should make job application easier, not harder. Last weeks I have been hearing complaints from people about how tedious online applications are. Websites like CareerBuilder have good intentions as they try to simplify the process giving the possibility of uploading the CV once and send the same copy to all companies.

Unfortunately, many companies require applicants to send the CV and to fill a web form with the same information. This process could make applicants go crazy if it is not well design.
 

Sorry, there was an error, would you please fill the form again? A friend got that message a few times last week, but even once is enough to make people feel worse in a particularly bad moment. These are few things companies should keep in mind when creating a web form for job applicants:

- Make sure your web form continuously saves the information the applicant is uploading.
- Display a message confirming that the data was saved successfully.
- Make the web form simple and short.
- If the web form has to be long, divide it in steps.
- Maybe the best option is to avoid using web forms and let applicants send the CV per email.

Why a company should have a well designed application process?

- Yes, everybody wants to work at that company, but if data is lost during the saving process I’m sure not everybody will take the time to fill all that info again. That company might be missing the right applicant.

- It’s about the company’s image. Make the process simple and easy and applicants will love you and your website. 
- Applicants might think the company is playing with their time. Can you imagine the rage a company can flame if the data is lost after several minutes in front of the computer?

- Think in the moment applicants reach the company’s website and their mood. Many people apply during weekends when others are having fun or late at night after work when they are tired. This could affect the perception they get about the questions a company makes on web forms, it’s better not to abuse. 

If a company wants to hire the best ones, a good selection process might be needed to improve the whole user experience, one thought as a whole process design. These are a few questions a company should keep in mind at the moment of designing the application process: How applicants will get to my website? How are they going to apply? Do I really need a web form or should a CV upload be enough?

Producers of the spot threw "roses" from the ceilings of Buenos Aires, on people, and they started filming everyone and getting all those faces of surprise.

This is a technique that could be used for prototyping and product test. How to know how the user will react? How to capture the unique moment a real experience could offer? Well, just creating it.

The Problem to Solve

Our agency is based in Munich, a city with a huge public transport network that takes people everywhere. The problem is that as the travelers get more options the network becomes more complex. Then, is very difficult for people to plan a journey without a computer with access to the online route planning system.

There are several services to check this information through a mobile phone but none takes advantage of the latest technology, like GPS.

The Solution

In the following video you can see a fast introduction to our design.

We have been asking users of public transportation about the places they usually go. The answer was that most of them are regularly going to the same places, like work, gym and favorite cafeterias or bars.

So we decided to design an interface as simple as possible that makes the journey planning really fast, wherever the user is but going to those "standard" places. We decided to design our first solution for the iPhone as we realized that tapping on the destination would be the fastest way to do it. 

The Interface

The fromhere interface is clean, it loads fast and eliminates any distraction other applications could have. For us, designing an interface that is fast and easy to use was our main goal. 

The Technology

Thanks to GPS the telephone knows where the user is located. The application then connects to the server to translate coordinates to a real address, such as "Duesseldorfer Strasse 11, Munich".

In the next step the application requests the journey plan between departure and destination to the servers.

Contact Us

Please contact us if you need farther details about the application.

The official fromhere product information website is here: http://www.designvsart.com/fromhere 

Creative Commons

You can use the contents of this article and video under Creative Commons Attributions License 3.0. Just link to http://www.designvsart.com/fromhere

What are QR Codes?

They are two dimensional bar codes that store some information like URLs and addresses. In some countries they are widely use in the advertising industry to give links to additional information.

QR Code Reading iPhone Applications

I was trying four of the most popular QR Code reader applications for iPhone:

Understanding the aim of QR Codes and QR Code Readers

In order to design a better user experience you have to think what the QR Codes are for and in which context they will be used:

- QR means Quick Response, so they should be decoded fast by the code reader. That is, not only decoding, but also the application should be ready to read the code as soon as the user starts it. 

- QR Codes are used in advertisement a lot, at the street and in magazines. They do a good job because they meant to save time as the user does not have to type, for example, a URL address while she is walking or not using a PC.

Three of the four applications I tried don’t care about the previous two points. For example, 2D Sense does a great job decoding QR Codes but it fails to provide a good experience. The user needs to read and decode the QR Code fast but the application bothers with a welcome message and tries to get access to the location information, both things totally unnecessary.

Barcodes, BeeTagg Reader and 2D Sense do a great job decoding but they bother with welcoming messages and other unnecessary options. On the other side, UpCode allows the user to shoot at the QR code directly without loosing time, exactly what is needed to make the QR Code reading user experience good.

I want to point out how a good design could make an application better than other similar ones. Always go for the simple design without features the user in that situation don’t need.