Blog Insights into great design
that delivers

Let’s turn 1 Step into 3!

I’m always frustrated when the UI gets in the way of the user’s experience. As an anectdote, let’s talk about how a UI I use which has this very problem, and in the process has increased the number of steps in it from just one into three separate steps!

The Culprit

If you’re at MIT and you want to use software like Matlab or online journals off campus, you need to use a VPN to get access to these resources. Fortunately, MIT provides some software, Cisco’s VPN Client, and its already pre-configured with everything you need.

So here you are with what I’ll call a secondary application- you essentially never use it directly, it just does stuff for you in the background. Antivirus software is another good example of a secondary application. Since these apps are more about supporting some existing workflow (getting into MIT’s network, making sure your computer keeps functioning and virus-free), you really want your interaction with them to be at an absolute minimum.

Somebody at Cisco didn’t get the memo and clearly thought that it would be a joy for users to start a 3-step process everytime they want to use a VPN.

Here’s how it works. You start up Cisco’s VPN Client and get this window

cisco-vpn-connect-1

Now for most users, I’m guessing you’ll only have 1 or 2 VPNs, so why have the default be for 5 or 10? Anyways, I click on the large Connect button (points to Cisco for the clarity and icon metaphor, even if it is a bit outdated with the ubitiquity of wifi now). And I get this screen:

cisco-vpn-connect-2

Okay, entered my password, clicked okay, none of this seems too bad so far.

But here’s where this program causes me a thousand paper cuts of pain every time I use it:

cisco-vpn-connect-3

That’s right, I’ve gotten a confirmation screen that the connection was successful. But it’s convoluted. That’s right, read the text again. In essence, the program is second guessing me, saying “Wait, now that I’ve done all this, are you sure you want to do this?”

UIs can have a sense of ego too

This is not the launch controls for a nuke here. As far as I’m aware, nothing bad could possibly happen by you accidentally connecting to your VPN. Furthermore, since you’re using this app to just enable you to do some other function (run software, view scientific journals MIT subscribes to), once you’ve entered your password and clicked “okay” you probably went back to you main task.

That’s the second major failing here, the program has overeager confirmations. Imagine if driving your car, every time you turned on the car, the car cheerily flashed up a big notice across the windshield saying “ENGINE TEMPERATURE IS NORMAL.” Of course your engine temperature is normal, why wouldn’t it be? In situations where you expect some background process to be working successfully 99% of the time, you should focus on notifying the user about the other 1%.

For processes where the expected outcome is success, there’s no need for confirmation! What Cisco should have done here was minimize their program, and only if there was an error, show a warning dialog.

So let’s review, 3 steps:

  1. Click Connect (remember, the VPN is already selected)
  2. Enter password, Click Okay
  3. Click the “Yes, I’m really sure I want to do this” button

That’s bad. Do you hear me? Bad! It’s an increasing trend I’ve seen of application not knowing their “place” in your life. This isn’t to say these secondary applications are second, or second class citizens, it’s that they’re never part of the user’s primary goals and workflow. This means you need a radically different approach compared to, say, Word, where the application is integral to the user’s primary goal. I’m not these programs are not valuable, in fact they’re usually incredibly valuable- you’re willing to have them run in the background after all. What the problem is that they are making demands on the user disproportionate to their perceived importance.

Really fast, let’s get to just one step

Okay, you say, let’s get down to the fast deal here. How do we reduce this networking dance into a simple one-off?

vpn-redesign

There’s nothing revolutionary about the UI here, it’s dead simple. So we’ve taken out Step #2 by having the login credentials on the app. What about Step #3? Well, I just eliminated that altogether and I’m relying on the progress bar and associated text below (which the Cisco VPN client already has) to show you when you’re connected. As I said earlier, your connection should work flawlessly 99% of the time, so the gains of simply having the UI do essentially nothing once the connection has completed will end up saving you time overall even though the other 1% will take more time to figure out in this design compared to Cisco’s. So we’re down to just the first step- selecting the connection. All of this was done without really trying to reinvent the VPN UI or connection UIs in general. Instead, we just spent a few minutes thinking about the user’s experience first!