User Interface Design

Common mistakes are apparent when looking through dozens and dozens of web 2.0 applications popping up recently.  Below I describe 5 and for each of the 5 mistakes, a question is included in order to start thinking about the solution to common mistakes.

1. Intended Audience Is Ambiguous – If you are a start up, your intention is to rapidly increase your user base.  You want every visitor to turn into a dedicated user or refer your site to someone they know.  But if it’s difficult for that very visitor to understand who the intended audience is within 6 seconds or less, then good luck in getting visitors to sign up or refer you to someone they know.  Question: Based on the design of your home page, who is the intended audience according to your visitors?
2. Valuable Scenarios Are Missing – Question: In what scenarios would your users find your product incredibly valuable?  Why make visitors wonder when the application would really come in handy!  Tell them.  I often wonder this myself while perusing a new application featured in a news or a blog site.  If I can’t think of scenarios that would personally help me, I don’t sign up. Do you?
3. Benefits Are Not Communicated – Question: What is the clear cut benefit for a visitor to start using the application?    And how is this apparent on the page?  Some ways this is done:
   1. Graphic – See Graphic on CrossLoop, it gives you an idea of who and what situation it might be used immediately
   2. Feature List – Have a convincing list of features that show this could help people.  See Mint.com how they present their beneficial features
   3. Demo – A video demonstrating how it works, sure beats signing up.  ReviewBasics.com quickly shows their product in a video.
4. Benefits Are Not Demonstrated – Question: Can people see that the application is delivering what it’s promising?  Visitors are impatient.  If they don’t see immediate results they aren’t convinced.  How do they know that a new social networking site is rapidly connecting people?  Are there user profiles that show that?  Or do users have to do a lot of work themselves in order to see the benefits?
   
5. Call to Actions Do Not Cover Multiple Phases – Question: What is it that you want the visitor to do in each step of the conversion process?  The answer is usually very simple: sign up to a service, register for a user account, participate in discussions, etc.  The execution and design of the calls to action are however, are much more difficult.  Different visitors are at different phases of the decision-making process.  The design has to support all of these decisions well.

The answers to the above 5 mistakes won't be solved overnight.  Different applications will have different ways of providing answers to the above problems.  But the sooner the visitors see or experience the answers to the above problems, the faster they become users or go about referring others. 

I went to a Seattle SIG CHI (Computer Human Interaction) event to hear Jake Knapp, a user interface designer from Google.  From my point of view there weren't any groundbreaking tips, tricks that I haven't heard of before in the world of user interface design.

Some points from the presentation that you might be interested in, especially regarding their product development strategy:

• Ethnography and user research - Ethnography, is the study of people and their environment and stems from social science.  The key idea is you find opportunities not only by what people say but just as much from what they don't say.  Google, much like other companies i.e. Microsoft uses ethnography to identify unmet needs by first studying people.
• Sharing research findings with company employees - The researchers share the valuable information to the team.  I have seen Microsoft use the same practices as well.
• Brainstorm as a team - At their research meetings, the team starts to brainstorm how they can solve unmet needs
• Prototype from paper to mock-ups - The UI design team starts to prototype on paper and then moves forward into more detailed interactive prototypes
• Usability Study - Usability testing is done on prototypes, products in development in an iterative fashion

The above strategies are common in user experience and with the type of products that Google are coming out with these days, it validates the process of user centered design even further.

Interesting Tidbit #1: From one designer to another:
It was comforting that Jake was talking about the same thing I had experienced just a week or two ago in one of his slides.  When there are many design issues and uncertainties to address, he goes back to prototyping on paper.  Whether it's flash, html or visio protoypes, even when you are building a mock up, it's easy for the designer to get caught up in the details:  Where do I align this button?  How do I label it?  Will the user see this on their screen?  These questions aren't important in the early stages if the design concept in general has yet to be proven because the design can radically change.  I found that paper prototypes work wonders here.  He was recommending the same.

Interesting Tidbit #2: Positive Reinforcement in the Bathroom
I ended up having to use the restroom at their office.  I once read that Google posts printouts or leaflets in their bathroom stalls.  Indeed they do!  I was amazed that the printout talked about how at Google, our #1 principle is to focus on the user and all else will follow.  The printout went on to talk about how it's important to question about the target audience, their unmet needs, their behavior and so on.  I was impressed.  I would call this, encouraging the "Cans" at the Can.  Good job Google. 

Out of a dozen at Web Design World 2007, the presentation that captured my heart and attention was the keynote address by Peter Merholz on how Experience is the Product:

Pyramid depicting the evolution of technological products. 

Here is my attempt at briefly summarizing the presentation:

• Think in Features - Peter states that a lot of us still buy software based on the bullet list of features on the product packaging. Developers are especially keen to "features" and are used to thinking this way when developing applications.  We look at a web app and say, "I could have developed that feature!"
  
• Technological Evolution We're Used To - (above graphic) So many technological products that we've seen go through the three phases of technology, features, and then experience. For ex. think of technologies such as the VCR, cellphone, mp3 players, and the camera.
  • First Introduced - They are usually bulky and accomplishes a few rudimentary tasks.  
  • Soon After - Companies start producing these products with lots of features.  The features can get so complex that the common person don't end up using them: think of programming the VCR, voice command on your cell phone, Microsoft Word mail merge feature, etc.  Sure they can be useful if you are techically savvy and you take the time to learn them.  These features do gives you more control.
    
• New Impact on the Market - The most amazing thing that a technological product can do is to get into an area where the technology has been around for years and introduce products that dominate the market by the power of experience.  Think of the iPod, Wii, Flickr, Google Maps, etc.  All of those technologies: mp3 players, game consoles, photo sharing, online maps have been around for years!  But the product with experience trumped them all.
  

The Key Note from the Keynote? 

You can dominate an existing online application market.  Differentiate by offering an experience.  See Peter Merholz's presentation on how to GET STARTED.