If you’ve ever made a website then you are a user interface designer. All software, including web sites, are interactive. Simply providing links is a form of user interaction and user interactions can go wrong. Let’s look at an example:
Did you expect the second button to close the popup instead of opening another one? When the second popup didn’t close did you think it was broken? Creating good user interactions is all about meeting expectations. Another way of saying software is broken is saying it didn’t do what you expected.
Now here is the hard part: you don’t know who your users are. You have never met most of them and you probably never will. So how do you make sure your software meets their expectations?
1. Keep your promises
The real problem with the example UI in this page is that it doesn’t keep its promises. The second button promises to close the popup and instead it opens a new one. This button should have said open a new popup to close this one. Telling the user you’re going to do one thing and doing another always defies expectations.
2. Avoid ambiguity
When you pressed the Really Close It button did you think something was broken? You didn’t know if the second dialog would close or not. Maybe you wondered if you did something wrong or just thought I was a bad programmer. The problem was because the UI was ambiguous. You didn’t know if the Really Close It button was supposed to close both dialogs or just one of them. It should have said close the first dialog fast the second one really slowly.
3. Make it simple
Based on the first two pieces of advice we would change the buttons to open a new popup to close this one and close the first dialog fast the second one really slowly. It makes logical sense, but it is totally wrong. Notice how long the two phrases are? You have to read them carefully to understand them. Really long user instructions are a sure sign of trouble.
Instead of creating long button names we could fix this problem by keeping the whole interaction simple. Simplicity comes from understanding what your users are really doing. In this case they are just opening and closing a dialog so we’ll change the sample to show that.
Now the interaction is very simple, it keeps its promises, and it has no ambiguity. Doing this in a simple example is easy, but doing it in the real world takes empathy for people you have never met: your users. Take a moment to think like them and guess what they would want. Make your links clear and your interactions sensible.