User Interface Design

Chapter 3 of the book Design Interactions was called "The Zen of Palm".  On page 216 is an excerpt of what I found to be simple yet profound:

Rob articulates his design approach as a philosophy, but he also supports his philosophy with a very pragmatic design process: first understand the customer, then prioritizes ruthlessly:
One bit of advice that I gave to people designing the Palm OS was, "If you can really understand the one thing your customer wants to do most frequently, and make that a one-step process, then I guarantee people will like the product."
     Just say, "What is the one thing you want to do?" and even if you have to throw out conventions of logic, architecture, and hierarchy, you should make that one step.  The more "illogical" your approach is, the less likely it is that it will blindly follow the conventional wisdom, and hence the more likely it becomes that you will be able to differentiate and create a successful product relative to your competition.  If you take the conventional approach, by definition you're not innovating.  If you just say, "Here are all the features," and you lay them out in a logical pattern, then that's not going to be a successful product.

Before the iPhone, my mobile device of choice was the Palm Treo 650.  I used to love the Notes app and the To Do list app.  And to this very day with something so simple as a to do list app or a notes app, I haven't been able to find a third party solution where I was satisfied as much as the Treo.  I am convinced that it is because I experienced the ingenuity of the applications that Rob has designed in the palm with his philosophy of: "really understanding the one thing your customer wants to do most frequently and make that a one-step process".  I find it very interesting that similar applications have come out years after the palm but it does not meet the quality of design that palm had in its software.  And he hits it right on the nail.  Some of the most frequent things you want to do with software take several steps to complete.  And today I still wish I had those applications on the Treo that the iPhone doesn't have. 

Rob Haitani, you are a hero of user interface design in my book.

In Part I, I reviewed the needs of a simple notes application. From the application development & design point of view, we summarized that we want to keep in mind the overall goal of increasing productivity with a simple tool like Notes.  The other points we broke it down to were:

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. Ease of information access - When you want the information, you want it immediately
3. Dependable Record Keeping - Once the information is entered you don't want it to be lost
   easily
   
4. Transferable - You want to be able to use the information in other forms

Below I review 5 notes applications for the iPhone based on availability and or popularity.  I tried to stick to reviewing notes applications where there are many that have combined to do and notes.  Here they are:

1. iPhone Notes:

The Good:

• Clean UI - It gives you a basic list of your notes, and a nice full screen when you go and edit it.  Very self explanatory, functional and usable.
• Email Your Notes Out - It doesn't support two way synchronization, but at least you can email a copy of important notes from the app

The Bad:

• Back Up/Notes Entry From PC - As far as I know there isn't one unless you are a Mac user and dish out another extra $40 for a software tool called MegaPhone.  But natively, iPhone Notes will not sync with your desktop, so it is not a dependable source of keeping information, unless you are constantly emailing every update you make with your notes.  If your phone crashes, all your notes information is lost.  Furthermore, you can't put notes on your iPhone from the desktop - Bummer!
  
• Quick Retrieval - The tool does not give you a way to sort, categorize, or search.  As notes pile up, it'll be difficult to find the information you need quickly.

2. Google Notebook

The Good:

• Integration - Google Notebook is already a powerful tool on the web, so it makes information you've entered on your desktop easy to access on the device.
  

The Bad:

• Editing Notes - You aren't able to edit any notes using Google Notebook Mobile.  The speed of entering information is zero if the functionality doesn't exist.
  
• Stuck when offline - If you don't have wireless access, or if your mobile network speed is slow, it takes a long time to get to your notes.  Ease of access is limited here.
  

3. Noter

The Good:

• Offline Use - This allows for faster speed of entry.  Once it's loaded, notes can be added quickly
  
• Fast Sort - Although the buttons on the left appear small, I found it quite easy for sorting
• Color - Since colors are used as a background for text, I would suggest lighter tints so that the text is a little bit easier to read.  Both of the features above are great since it allows ease of information access by organizing notes as you please.
  

The Bad:

• Small Text View and Entry - Default size to enter and view the note is small (above).  See below for a user interface design critique for viewing and editing a note in a typical real life scenario.
• Support for Longer Lists - There were synchronization problems for longer lists, I found that from the PC I sent a note which was 344 words long.  It only synchronized the first 60 words.  When I sent a short document which was 488 words, it wouldn't synchronize any words.  Perhaps this application isn't meant to handle more than a certain amount of words.  But if thas was the case, shouldn't there be a text limit so that when people go and get my full list of notes, it's not unexpectedly cut off?

User Interface Analysis:

• By default it shows 8 lines of text.  Let's think back about the grocery store shopping list.  Historically we have worked with a piece of paper for something simple like a shopping list. You wouldn't click on a scroll button on a piece of paper to see items further down the list would you?  No. It's all there.  So if you have a device, wouldn't you want to see as many items as you can on it?  A dozen items is definitely not too much to ask for.  But this interface takes up precious real estate for a large "Edit Item" header, color labels, a very large "Item Done" button, and a big "Save" button.  When you are at the grocery store wanting to see your entire list, which of all the above things are the most important?  Seeing your items. 
  
• Secondly, without thinking too long about it, what do the icons below the textbox look like to you?  To me it looked like a stamp.  I thought it was some kind of a date stamp function.  The arrow is what will speak to the user, but you can barely see the shape of the arrow.  The icon isn't very clear.  When you click on these buttons, voila, it expands the textbox.  Problem solved right?  Let me explain why something like this must be designed with caution:
  
  • Note on mental model: On paper we write in whatever space is physically available.  On the web, scrollbars appear when you type beyond the space allotted.  Most users come in with their previous experiences in mind, which is what we call their mental model
  • Designing beyond expectations: Designing beyond what we expect is not a bad thing by any means.  In fact this is where innovations lie.  However, designs beyond what we expect must be incredibly obvious especially with applications that affect our productivity.
    • The placement of these expand/shrink buttons are close to the screen so it is easy to tap the textbox instead of the buttons
    • The icons did not communicate well.  In usability we say that if it happens to one user, it often happens to many.  Usually problems like this recurs from one usability study to another
      
  • In the case of notes, a better design is if by default, the textbox is much larger in the first place.  Is it really necessary to see such a large "Edit Item" header?  If we tap on an item and we see the blinking cursor, it'll be obvious that we are in edit mode.  Do color labels have to take up so much space?  Can it automatically save instead of having a big save button that takes up space?  All these questions make an impact on the user experience.

4. Pogo Notes

The Good:

• Speed of Entry - Although this application uses the internet for connectivity and it does not have offline usage capabilities, clicking on a line item expands a note without going through a reload.  (Read additional user interface notes below.)
  
• Fun and Attractive Experience - I found myself enjoying the use of this application over the other alternatives because of its attractiveness and interactions with expand, collapse and the various colors associated with each category you can assign to a note.
  

The Bad:

For Pogo Notes, I would say these are areas they can improve on rather than bad points about their application:

• Lack of further integration - Since this app has done well with interaction design on the iPhone, it would be great to see more integration.  See what Remember the Milk has done in terms of integration, which is truly impressive.  Each major technology integration perks the millions of users that are already everyday users of that technology!
• Room to optimize for more speed - See below on "Adding a Note".  Ways where it can save a few seconds here or there can continually improve the user experience.
  

User Interface Analysis

• Expand/Collapse Without Reload - I thought the expand and collapse was brilliant in saving time to view your notes and how it expands to amount of your content (in the second image where it shows the expanded grocery list "cheese" is indeed the very last item on the note, very intuitive!)
• Adding a note - It would be great if a "New Note" interface can be displayed without having to reload as well.  As I have mentioned for the Noter, by default the input box could be much bigger - there is space for it as you can see above.
  
• Editing a note expands textbox automatically - Although during the add process the textbox is smaller, when you edit, the textbox will adjust in size and give you additional room to add more to the note.  This addition is very much appreciated and the design demonstrates the understanding of the "edit" scenario well, such as adding more items to a grocery list.
  
• Color - I have written about some key points from Dr. Don Norman's article on Why Attractive Things Work Better.  And Pogo Notes nailed this with their color usage.  With Noter, the colors made the notes you are looking for easier to find but at least in my view, more difficult to read.  The color selection for Pogo Notes brings the fun of having a bunch of post it notes, and I couldn't help myself to try all the different categories and see what category uses what color.  It would be great if these categories could be customized to your liking.
  

5. Web Notes

The Good:

• Integrates with email - This application is about as simple as it gets, it is a one page notes application which automatically saves every minute, and it allows you to email the note when you are done with the note. 
  

The Bad:

• Does not beat the status quo - This application is worse than the notes app that comes with the iPhone.  There you can email notes as well as see a list view of your notes, making it easier to find notes than this app.  Web Notes does save every minute to your cookies, but is that really all that valuable?  The native iPhone notes app is definitely more aesthetically pleasing as well.

User Interface Analysis

• Essential Functions - Remember, user interface design is about simplicity and efficiency in terms of accomplishing user goals.  There is a button for "Save", "Revert" and "Email".  After you've emailed your note and assured that it's safe in your email, what if you want to start a brand new note?  How do you clear the note?  Since it saves every minute, the "revert" button reloads back to what was saved a minute ago.  The only other alternative is to clear your cookies by going to the iPhone settings, or holding the backspace button on the iPhone until it deletes everything you have.  At least this is my understanding after using it for several minutes.
  

What's Next? 

I hope the above review helps designers and developers see applications from a user perspective and give ideas to think about during the development process from Part I.  In Part III of iPhone Notes review, I will briefly present which of these products I actually ended up with.

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 have been reading Emotional Design by Dr. Don Norman, a professor of cognitive psychology and well respected figure in usability.  His book peaked my interest recently because in my career from graphic designer, web designer to web developer, I have always been told that as far as aesthetic design goes:

"You're just making something look pretty."

But Dr. Norman tells us differently.  Major take aways right off the bat:

• Two Japanese researchers tested usability of the same ATM application one simply more aesthetically pleasing than the other.  They found that the interface which simply looked better produced better usability results.
• Doubting the study, an Israeli scientist took the same study, translated all the Japanese text into Hebrew and ran the study again.  Bolder results confirmed the original study.
• Attractive things work better because it:
  • Affects our effort - We as humans become emotionally attached to aesthetically pleasing interfaces so we try harder to make it work for us.  We like the inteface so we keep trying even if things don't work the first time.
  • Affects our ability - Aesthetically pleasing interfaces put us in a better mood which in turn affects our ability.  If we are in a better mood, problems appear easier to solve and alternative solutions arise easier than in a negative, nervous or uncomfortable state of mind.
  • Effort and Ability Affect Performance - It makes perfect sense that further effort and better conditions to improve our abilities will result in better performance.

Read Dr. Norman's web article on why attractive things work better in further detail. 

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. 

Up until a couple of months ago, I wasn't able to put it into words myself.  One thing I knew was the overlap especially when it comes to web design and user interface design for web applications.  So what's the difference?

After Google-ing it and pulling up the Wikipedia post on user interface design I came across this sentence:

Where traditional graphic design seeks to make the object or application physically attractive, the goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals

This statement is referring to graphic designers and not web designers.  However many graphic designers have transitioned to the web and uphold their objective of creating visual attractive sites.  Some web designers specialize from the angle of design in new media such as flash, music or video and their goal is a higher level of visual and emotional impact. Regardless of whether the web designer has graphic or interactive design origin, the important distinction is that primarily, web designers are not focused on making user interaction as simple and efficient as possible in terms of accomplishing user goals.

I am entirely buying into this distinction.  It is this distinction that made me realize that I am a user interface designer.  

I went through wikipedia history and traced the origin of this statement, to the author who goes by CatCubed.  Thank you CatCubed for defining this distinction!