Users use software interfaces to achieve goals.  When the goal of an interface is unclear, the user will become confused, frustrated and make errors on the journey toward achieving that goal.  Put a different way, if the designer isn’t hyper clear about what you are supposed to do when you land on a screen in an app, the experience will break.

When this lack of clarity emerges in the real world, or even better, in one of your apps, you need to be either smart enough to ask your users how they are doing in order to find this kind of thing out or at least lucky enough for them to tell you.  Once this badness is exposed, awesome, you are half way there!  Now you just need to take a step back and look at the interaction from the goal level and then apply that goal to to this information architecture of the screen in order to improve the experience.

Here’s an example… When I get to this page I’m just thrown off by the call to action button that my brain thinks should do what I want it to do but doesn’t.

I want to share with you an example of something that drives me insane when an interface is put together without the goal being front and center. There’s this login page that I use all the time to get into one of my favorite stock market analysis app’s and I make the same stupid mistake of hitting the wrong button maybe 4 out of every 5 times I use the form. Here’s what I’m talking about:

 

Basically what I end up doing is pulling this up, enter my username and password and then what button do I hit in order to log in? Only the largest/most prominent button on the whole screen. Which is what? The SUPPORT button! No matter how many times I do this it seems to catch me. Why is this? I think it’s how we process information as we scan through computer screens all day getting tasks done. Now to be fair, I’m only talking about myself here and how I interact with this screen. Hey it could be just me that’s doing this bonehead move all the time (but I doubt it) tapping the wrong button and then getting the digital equivalent of 50 lashes by pulling up a page I didn’t want and upon closing that page, I need to now reenter my password.

So this is how I would change this screen to ensure the user knows what to do…

The screen I’m representing here is a mobile app on a smartphone so we have limited space to start with.  So almost like a poem, our use of controls and words needs to be super concentrated and efficient so we can get our point across in the shortest amount of space possible.  In my example I’m also taking advantage of the fact that I know the user is just going to scan through the page and really not read anything unless his or her brain signals them that it’s related to what they are trying to do (their goal).

In my wireframe, I’m supporting both major things the original page is trying to do:

  1. Let users login.
  2. If the user needs help, then direct them to where they can get it.

Since this a login page the login controls are the most pronounced and the closest to the top of the page.  I want those things to stand out so the user can take advantage of all the conditioning they have received from logging into countless other applications by filling in the boxes and hitting the related button.  I make the controls (the text inputs and the button) go all the way across the screen because phone screens are small (though admittedly getting larger by the day) but when holding something in one hand and using the other to tap away, it’s nice to have targets that are hard to miss.  If you notice I also added the bonus of helping the user out if they forgot their password.  The real deal here is that since this is the main point of the page, having the link there to reset or retrieve the password can help divert necessary phone calls about usernames/passwords to those two fancy, yellow support buttons that I put below.

 

Ok, big deal I rearranged some buttons and stuff on a simple login form.  So what?

The big deal here is that it’s relatively simple to straighten out your screens so that they stop frustrating users and possibly even save you some money in support staff time by diverting unnecessary questions to the help desk.  And that’s the power of focusing your interfaces on the goal.  Do you see this kind of thing going on in your interfaces?  Do you make the smae bonehead mistake 4 out of 5 times you use an application at work?  Chances are if you are doing that then it could be a simple rearrangement of information that can make all the difference.

What other kinds of interfaces on the net or in the app space whiff on the goal?

  • Update 9/14/2015 – It looks like VectorVest has updated their login screen to be a much cleaner experience and they did a great job.    The point of the page is super clear and there will be no more pushing the wrong buttons!  See for yourself:

IMG_1667