I just made a change to the navigation on my Palm Pre.  By default, the Pre has four main applications that you can launch from any screen.  Those are: Email, Contacts, Calendar, and Phone.

Those seem pretty obvious choices.  Of course you need the phone because ultimately that's the main function of the device.  Similarly, how can you keep track of who you call without your contact list easily accessible.  Email and Calendar are the next most important because those are things that constantly require your attention.

Well, I just realized that I don't actually care about the two "most important" items I just mentioned.  The Pre has a pretty nice universal search feature so if I start typing someone's name, it automatically gives me links to call that person or view their contact record.  

Why would I ever launch a phone dialing program?  I don't actually know anyone's number.  I always have to search through the contacts.  And why would I search through the contacts when I can find them faster using universal search?  So I removed both of those items from the main navigation bar and I'm not looking back.

So that got me thinking, am I cluttering up my web apps with navigation that simply isn't necessary because search or some other innovation makes them irrelevant?  Well, I don't think I am, but I want to keep this in the back of my mind.  Navigation is a critical UI element and it really hasn't seen too many innovations since...ever.

Can you think of any sites (including this one) that need to reconsider how users get to the real functionality?

On Tuesday I talked about how I don't like modal dialogs.  Here's one way to avoid using them when designing an application.

I learned this one from Gmail, but there are other applications out there doing the same type of thing. Imagine if someone accidentally clicks the "delete" button in your application.  The results could be disastrous.  That's why most websites pop up a window saying "are you sure?"

The problem is, most of the time the use wasn't clicking the delete button by accident.  Most of the time the user actually wants to delete something and it's annoying having to deal with the confirm dialog.

With most important decisions, gmail just goes ahead and performs the action.  Then they pop up an unobtrusive message at the top of the page allowing the user to undo the action.  This makes sure that accidental clicks don't result in catastrophe but the user isn't inconvenienced in situations where they're doing everything correctly.

Sounds simple enough, but it's far from standard practice.  Sometimes it's not necessary to go through the effort of undoing things, but other times it can be a huge time saver.  If you remove enough minor inconveniences, you'll end up with great user interface.

I'm trying to incorporate not only this specific strategy at work, but any design ideas that follow the same line of thought.  For example, we will be redesigning one of our sign-up processes soon and I've already figured out one way to make it much easier.  Rather than showing the user every single option they can customize during signup, I think we'll just show the basics and then the advanced users can go in later and make changes that the majority of our users don't want to deal with.

Once again, this is an obvious idea which makes it all the more important to implement.

This post is all about a very common design element that I really hate (most of the time).  I'm talking about modal dialog boxes (or modal windows).

In UI terminology, a dialog box is a window that pops up and prompts some action from you.  They can be used to confirm that you want to delete something, to enter a password, or to give you a status update among other things.  The term "modal" means that this window takes the focus so that you can't interact with anything else in the application until you address whatever action the dialog box is calling for.

Dialogs and pop-up windows are fine, but when you make them modal you're really limiting how a user can work with the software.  Microsoft Outlook is the worst with this.  Almost anything you want to do in outlook other than reading an email causes a modal window to pop up.  If you need to edit your signature, change your account information, or configure plugins, you can't interact with anything else in outlook.  This is particularly frustrating when you want to copy text from an email into your signature (which happens more than you might realize) but you can't view any emails when the signature editor is open.

If you're not sure what I'm talking about, try this (you'll need firefox and chrome):

• Open firefox and to to tools > options
• With the option window open, try going to a new web page in the web browser.
• Now try it with chrome.  Open the options and try to go to a website.

Modal dialog boxes are slightly more necessary with web development.  Websites have the problem that a pop-up in a window can't exist if a new page is loaded, so it makes sense to lock down the rest of the window to prevent the user from clicking links.  To be clear, I'm talking about javascript/html pop-ups within the parent window, not new instances of the browser.

Designing websites is a lot harder than it seems.  Most companies have a million things they want to tell visitors and there's only room for a few different items on each page.  Hopefully the few things that you pick to put on your homepage are interesting enough that the visitors click through and read more pages so that you can tell more of your story.

There's no right or wrong way to handle a landing page (the first page users see) but there's one principle that I think should always hold true:

Your existing customers are more important than your non-existing ones

From a business point of view, this is might not be true, but it's something that businesses should convey to all their visitors.  Even if I'm not a current customer, I'm more likely to trust your company if I see that you're focused on taking care of the people that got you where you are.

At work we were writing the phone tree that people navigate through to get to sales, account management, etc..  The decision we had to make was between making sales easier by making that the first item on the tree (press 1 to talk to a sales person) or if customer service should be first to reward our existing customers.  The answer was obvious.  Not only are our existing customers more important, but anyone calling for sales would want to hear that we give a priority to customer service above sales.

One main way that companies fail to cater to existing customers is by making their landing page completely sales oriented without making it obvious what existing users can do to access their accounts.

Credit Karma is a site that gets me with this all the time.  Sure they have a "login" link at the top, but every time I go to the site, it's to check my credit score (Why else would I go there?) and there's a huge yellow button saying "Get Your Free Credit Score".  Of course I click that button.  This of course takes me to a signup screen rather than a login screen.

When you go to gmail.com, you see a login area with a link to create a new account.  It would be pretty annoying if every time you wanted to check your email you had to click through a bright flashy screen that ignored the fact that you might already have an account.

I know what you're thinking.  You're thinking, "Tyler, you're really nitpicking here and this is a dumb argument."  Ok, I am nitpicking.  Of course companies want there websites to be sales tools, but I think this mindset infiltrates other more important aspects of how a company does business.  They lose focus of who is most important: Me.

It's time to apply some grocery knowledge to UI design.

I spent the summer of 2007 working as an intern at General Mills.  They had a weekly lecture series where some big wig from the company would talk to the interns to help us understand the business.  One of the talks was about how much thought goes into where food is placed in a grocery store.

There were tons of interesting topics, but I bet you don't really care that much about cereal so I'll skip to the good one.  You surely know that the cereal on the bottom shelves costs less than the cereal at eye level.  What I didn't know was that the most sought after spot is at the middle of the aisle.  Apparently people tend to start walking down the aisle of a grocery store and they aren't mentally prepared to buy anything until they've walked about 15 feet.  They spend that time absorbing the fact that they want cereal and then they start actually looking at products.

So all the major players in the cereal industry (apparently) fight over the middle of the aisle.  It's not just about who has their boxes at eye level or who has the eye-catching designs.  It's not good enough to make sure that customers see your product.  Customers need to see a product when they're in the right state of mind.

So now I'm wondering how I can apply this to web design.

A good example of me trying to think like I'm at the General can be seen on the front page of this site.  As I mentioned in an earlier post, I think that my bio is the least important part of this site.  So why did I put it third instead of fourth on the home page?  I basically figured that people are likely to skim across the items and pay more attention to the last item (resume) than the one before it.

I also read recently (sorry, can't find the link) that the two most important parts of a page are the top left (where the user begins reading) and the bottom right (where the eyes stop when they're done).  All the stuff in between is generally just skimmed but most people notice the first thing and the last thing they see.  I guess it's similar to how you can jumble up the letters in the middle of words but as long as the first and last letters are correct, people can generally read the word in a sentence (example: I enjoy swonbraodnig in Park City).

I'm far from an expert when it comes to this stuff, but here's what I'm going to try to do to improve.  Whenever I design a new page, I'm not just going to attract the user to action items by making them big or a different color.  I'm going to try to lead the user to an item through all the other content.

This article from Smashing Magazine has a great example of what I'm talking about (go down to number 6 on their list).  I need to funnel the user experience to the important parts of the page.  It's not just calling out the important things, but it's guiding attention to those important things.  This way the user isn't just seeing the "SIGN UP NOW OMG!!!!1" button, they're approaching it in a natural way that hopefully makes them feel more comfortable and willing to see what the next page is like.

I need to come up with more examples of this.  I must admit that while I've thought about this idea a lot at a high level, I haven't gotten to the point of trying it out a whole lot.  We'll see how it goes.