User Interface Design

Recently I received an iPhone as a gift, and I was ecstatic!  The phone is spectacular in many aspects.  Playing music, video, browsing the web, photos is hands down the best I can ever imagine on a phone or a personal device.  Despite all the excitement, like any early technology, it needs work in certain areas.  I have found that productivity tools, both native and third party fall within this area. One of them is in the area of notes, something to jot down and keep track of pieces of information. 

Rather than jumping into what's out there and what features each of them have, since this is a blog about user interface design for web entrepreneurs and developers, I wanted to start off by first evaluating the needs of notes.  At the heart of every great UI design is a keen understanding of users' needs.  So, Let's dive in:

Scenarios of Notes

First of all, what are some common scenario that I or anyone else might need notes?

• List of things to buy at grocery store
• List of books to check out at a bookstore
• List of things to bring for vacation
• Notes about what to write about on a blog
• Basic log of something: mileage, exercise, simple expenses
  
• A few keyword notes to help remember points from a presentation
• etc.
  

Summary of Scenarios

By looking at the above scenarios, you can generalize that the purpose of having notes is to keep a list of information for a later use whether it's to buy something, write something up, make a decision, etc.  Yes, this seems very obvious, but please bear with me.

Goal

Why is it that we use notes?  Alan Cooper in his book About Face suggests we need to go beyond features and consider human goals for making successful products.  When human goals are central to product development, innovation and sustainable competitive advantage become present in products. 

A simple answer to why we use notes might be: "Well if I don't use notes, I would forget things and waste a lot of time when we need to get things done." 

Simply stated: We take notes to increase productivity - so we can retain and access information at the right time and at the right place. Wouldn't you agree that conversely, not having notes when you need them would decrease productivity?

Let's see some ways we have used notes historically and as of recent.

Modeling Activities

Looking at how people currently perform a particular activity is where it gets interesting and another way that we can discover unmet needs.  What are existing workflows for this need?  What have we done historically?

Since the advent of paper and still in many cases:
(Activity 1) Write notes on paper- Jot down notes and bring it with us for when it's needed.  Here are some problems with this method, as we all know:

• Easy to lose - a piece of paper can be hard to track down
• Information is not easily transferrable - you would have to retype it electronically if you want to store it digitally and use it in other forms

Since the advent of computers, where once information is entered electronically it can be used in other forms:
(Activity 2) Gather information on the computer and print it when necessary.  Some problems here are:

• Requires for you to be prepared in advance - Information must be printed beforehand and carried with us when we need it. 
  
• Printer dependent - There may not always be a printer available when we need one
  
• Wastes Paper - Printers don't use scraps of paper or post it notes either
  

Since the advent of PDA's and smart phones
(Activity 3) Gather information on your computer OR your smart device and synchronize the information between the two machines.  Synchronization between the computer and device has solved many problems with the original productivity goal: get information stored somewhere, access it almost anywhere.  The minor problems ith this activity have been:

• Difficulty in inputting new information into the mobile device - Whether it's an on-screen or qwerty keyboard on the device or handwriting on a  screen with a stylus, it isn't as easy as typing on a full keyboard or writing using a pen
• Need to have the smart device with you at all times - This hasn't been as much of an issue once these smart devices have been better integrated into our phones.  Our phones are within our reach most of the time.
  

Goal Drivers

We now have scenarios, models of current activities, and an overarching goal.  From all of the above information, how can we drill down on the overarching goal and drive the design successfully?

Goal: Increase productivity: Retain and access information at the right time and at the right place. If we drill down on this goal we have factors such as:

1. Speed of entry - Whether it's writing, typing on a full keyboard, or a keyboard on a device, we want to get the information in as quickly as possible
2. Information is easily accessible - When you want to use it, you want information immediately
3. Dependable Record Keeping - Once the information is entered you want it to be in a form that isn't lost easily
4. Transferable - You want to be able to use the information in other forms
   

Needs Review Summary

Do the above goal drivers seem absolutely obvious to you? Yes it seems quite obvious.  But looking at the iPhone notes applications that are currently available, are these goal drivers being met?  NO.  Because of new technology such as the iPhone, does this allow us to be more productive than other devices?  No.  What about the scenarios described above?  Can these applications handle common scenarios better than before or even just as good?  No.  So looking at several applications that are available, what's described above is NOT as obvious as we thought.  Because if specifications and user needs for a notes application was obvious, we would have solid notes application on the iPhone.  This certainly means that what we described above is not obvious especially for developers and web entrepreneurs, the creators of these applications.

Do the designers/developers of these apps think about how well their product can handle the scenario when someone goes grocery shopping?  Did they look at their application and compare it to Activity 1: writing it on paper and evaluate how using their technology is better than these original acitivities?  From what I see as a user looking at existing applications for notes on the iPhone, the answer is no.

You could attribute my points as mere complaints or frustrations with a device not meant for taking good notes.  You could also say that this is the fault of every early technology.  But the truth is, if the needs were assessed properly and the product development process was done right the first time, we would already have great products for something as simple as notes with almost equal effort.  Certainly, the technology is more than available to make that happen.

In Part II I will review several iPhone notes applications from a human needs perspective and what developers and web entrepreneurs can learn to produce better products for even seemingly simple applications like Notes.

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.