»
S
I
D
E
B
A
R
«
The Circus of Interface FAIL
March 12th, 2009 by masukomi

Before we get started I need to apologize. This was not the article I set out to write. I wanted to give you a nice blow-by-blow review of setting up and using a bunch of promising-looking password managers in hopes of helping you to find one that works for you. It was going to have a matrix of features for each one and be oh so very useful.  Unfortunately it turned into a trip to the Circus Of Interface FAIL .

Anyway, on with the show….

……….

A little while ago I posted about Why Your Tiered Password Scheme is Flawed. At the time I’d only found one password manager that seemed to meet my criteria, but thankfully I got a bunch of suggestions for alternatives.

I went through those and chose ones that looked as if they might meet the following criteria:

  1. simple to use: you must be able to get your password into the field in two clicks or less
  2. easy to understand: you’re not going to read the instructions anyway, so it needs to be easy to figure out and get at least basic password management out of without reading any help docs.
  3. easy on the eyes: yes, logically, this should’n't be a criteria, but the fact of the matter is that people will be more likely to use, and continue to use, something that is easy on the eye.
  4. usable when you’re at someone else’s computer with no ability to install anything (assuming internet access).
  5. something, that from the description on the web site, I could see myself using.

About the following comparisons:
Basically I’ve gone through the process of installing and using each of these and given you a blow-by-blow of the experience. In case you don’t already know I’ve been a professional programmer for over a decade, and I’m familiar with the various means of encrypting sensitive data, like passwords. So, I’ve got a pretty good idea of what’s going on behind the scenes with these apps, and the security issues involved.

Along the way you’re probably going to come to the conclusion that I’m an idiot because some of the things I stumble over are “obvious” The thing is, most of us DO stumble over these UI problems, but we quickly figure out how to recover and move on without thinking much about it afterwords. Here, I’ve actually taken the time to note all the little stumbles. Places where, if the UI was doing it’s job, I wouldn’t have stumbled in the first place. In other words, I’m offering up what these people would have gotten if they could read the minds of the people in the usability tests they never performed.

Both of these apps are actually quite close to being either good, or excellent, and if they give a little TLC to their products we’ll all be better off for it. I stopped after two because honestly, I couldn’t take any more.  I did actually try out PaswordMaker too, expecting it’s horrible UI to fit perfectly with the direction this post had taken but it surprised me greatly.  If you’re one of the developers of these apps please try and take this as constructive criticizm. It’s admitedly harsh criticism, but I really do want to see both of you succeed.

Passpack:

Open Source: no
Data is stored securely: probably. No simple way to confirm since it’s not open source.
Ease of setup: meh (initial is good but finding and setting up the quick login bookmarklet is non-obvious)
Ease of use: good, once you learn how to use it.
Generates passwords: yes
Stores custom passwords: yes
Limitations: 100 passwords in free version.

Overall Thoughts:
Once you learn how Passpack works I think it’s pretty decent. You have to keep the window open which sucks because now you have an open window that not only lists all the sites I have logins at (do you want your coworkers seeing the list of your favorite porn sites when you need to log in to the New York Times?) , but, if I step away from my desk, will give anyone who walks by one click access to them all.Yes, my screen locks itself after a few minutes but that’s plenty of time for anyone who wanted to to get in.

As you’ll see I had problems getting it going, but now that I understand it I would be fine with recommending it with the caveat that “It takes some getting used to, and it makes you remember a fucking login sentence.” I hate that sentence. That sentence can die. It should be taken out back and shot…. with a camel!

Getting Started:
Click the sign-up link and the first thing it asks you is if you want to use Google gears to make your usage significantly faster. “Faster is good. I like faster. Yes. I’ll take faster please.” Even if this didn’t make a difference they’ve still got me thinking “ooh faster.” Enter a username and password, and enter a “Packing Key” “What is a Packing Key? It is a secret, but easy to remember, sentence. Like the examples below. You will use your Packing Key to see everything you save in your Passpack account.”  This is literally just some random sentence you need to make up and remember. They give you a couple examples and quite honestly I am drawing a total blank. Random words I can do, I’ve been trained over the years to do this for passwords for a ton of sites… random sentences? I’m sorry I never do this so anything is going to be tricky to remember, at least initially. I’ve created a seven word sentence and that’s “decent” (less than 50% on their quality scale) and I swear I am never going to get this fucking thing right again because it’s in a password box and capitalization and spacing have to be correct. Being a geek I can hypothesize that the “Packing Key” is actually the key used to encrypt and decrypt the data they store on their servers and the username and password are what’s used to let them know I have permission to get to that encrypted data. If I wasn’t a geek I wouldn’t have a fucking clue why they are making me come up with some big arbitrary sentence. All I they’ve told me is that “It’s a secret” and implied that it packs things. Even as a geek I don’t really know why they chose “pack” instead of “encryption”.

And then I’m in. Wondering how to get started I find a “Did you know?” box with a link to a getting started video. “Sweet!” I click it. It’s little, nay, tiny. I can’t read any of the text. It has no sound, goes really fast, and when it’s done I know that there’s an “Add new” button on the top of some page (dunno which. Certainly not the one I’m on now), a form with lots of fields I couldn’t read, and some button on there brings up another form with a rainbow, a number widget with + and – and a bunch of checkboxes with seemingly random blocks of letters under each one. At some point afterward that there’s a big red button that I *think* said “Save All” I’m not sure why I’d need to “Save All”… Oh, and the video player widget really doesn’t want to let you jump back when you inevitably want to try and figure out WTF it was that just flew by you in imperceptibly tiny text approaching the speed of sound. Now I’m just frustrated. Maybe I shouldn’t have been so excited about “faster”…

Not having been helped by the video I start scanning around for what I’m supposed to do next. “Fill your account up with passwords” Hmm, that link looks promising. Ooh, it brought up that form that was in the video.  First field “Name” maybe I’m being obtuse by my first thought was “Of what?”… I think it wants me to name the password I’m about to store. There’s a curious Hide / Show toggle button in the Password field and I have no fucking clue why. If I click it covers the field with black and white distortion and says “Click above to select password and copy”.   I have no clue what it’s talking about.   If I unclick it it… doesn’t.  Still curious I unclick it, start typing in a password, and discover it’s plainly visible (not a normal password field) and the hide must be to hide it, except you can’t type in it when it’s hidden (like you could in a password field) and If you hide it clicking on it gives you asterisks on the distortion which you can copy … except I don’t know why I would ever want to copy my password out when I’m trying to put it in…. “I wonder what that Suggest button does. “Oh look it’s the form with the rainbow.” Through trial and error (no instructions, no tool-tips) you discover that number thing controls the length of the password and the checkboxes over the groups of letters and characters controls what’s in the password (letters, numbers, whack characters, uppercase, lowercase, etc.). The rainbow is an indication of password strength. It gets longer for more secure passwords. There’s a nice big “Use This” button. There’s also another “Suggest” button on this form which regenerates another random string of indecipherable crap if you weren’t happy with the first one. The “indecipherable crap” is exactly what you want for a new password, and you’re not expected to memorize them because it’ll give you easy to use login tools (eventually), but seriously, does anyone say “hmm that one’s got a V in it. I don’t like V’s. make another one!”  It’s not a bad button, but I wonder if anyone actually rejects any of the random suggestions.

Moving on… there’s a Link field and a “Go there” button. Sure, I could type in http://www.delicious.com but going there sounds promising too and the login page isn’t actually at “http://www.delicious.com” it’s at some sub page I can never remember ( turns out it’s not even on the same domain: https://secure.delicious.com/login?jump=ub )  so I’d rather navigate there and get it right… unfortunately when I click “Go there”  it opens a new window that takes me to the Passpack login page… even though I just came from a form I couldn’t possibly have been using if I wasn’t already logged in. I log in, and there’s what looks like a loading screen that just sits there for a while.

Oh. It says I have to click a black square. Not sure why, but ok. [ Suggestion: make the box you need to click throb or something. Give me some visual indication I'm supposed to do something with it.] There was some text below it but I honestly don’t care. Oh crap! The packing phrase…. please god please god… Phew I didn’t fuck it up. Oh thank you Jesus there’s a big fucking Remember Me button. Yes Yes! … of course this means I’m even more likely to fuck up the sentence the next time since I won’t have used it for 2 weeks.  Wait… wtf is this? “Your Personal Welcome Message. Customize how Passpack greets you when you sign in.”

A little reading and it’s a security measure like the image some banks show you to prevent you from getting tricked by phishing sites. … There’s a box that says “Customize your welcome message…” but I can’t figure out where it expects me to do this… After searching the page i wonder if maybe it’s a link without underline text, or a big button or… *click* Ohhhh. it’s a text field that didn’t look like a text field and the “Customize your welcome message…” has dissappeared… Argh! Under that there’s the “Show the screen with 8 boxes during sign-in” If I check yes it “makes sign-in more secure” I have no clue how but hey, it was simple to click a box (now that I know I’m supposed to) and “more secure” is better so, sure. There’s also an option to have it offer to remember you, which Obviously, I’m down with simply because of that god-awful packing phrase. I click the save button and am taken to a big empty page with “Success! Your Welcome Message options has been changed.” … and not much of anything else. It doesn’t go away. And remember, back at the beginning of this paragraph when I clicked “Go there” ? Yeah, I’m still not “there” and I’m not sure how the fuck to get there. I switch back to the tab with the “Go there button” thinking maybe it just didn’t work because it didn’t think I was logged in. Nope… clicking it again opens another tab (3 now) with my new and improved welcome message.

So, thinking maybe I should fill in http://www.delicious.com and THEN click “go there” i do, and it takes me to http://www.delicious.com Why the fuck do I want this?! It doesn’t do ANYTHING useful in my attempt to add a password to Passpack. I’m seriously annoyed at this point. Deciding this is just broken functionality I move on to the “tags” field … why would I want to tag my password? What benefit will I get from tagging it? I have no clue and it offers no hints. I leave it blank.

I click “ok” and now  I see the page that was in that video. And that big red “Save All” button. It’s awfully red. If the silent movie person hand’n't of clicked it I wouldn’t click it… actually maybe I would. It’s awfully red. It makes me wonder if the form I filled out isn’t saved yet. I’d close it and come back just to find out for you but I’m too annoyed from the fucked up Go There button to want to deal.  I click the “Save All” button just to be sure.

“Operation failed because a more recent session exists. Would you like to recover that session now to continue? (if not, please sign out)”

… um… “ok”? I hope  … it re-established my session and apparently I haven’t lost anything… maybe it was saved. But that button is still very red… I try clicking it again. Apparently it wasn’t saved?  I dunno, but the red button went away.

Now I notice some small text at the top of the page “You should have received an email with a confirmation number. To insert that number, or to request that a new email be sent, please visit this page” … why would I want to “insert that number or request a new email” ?? everything seems to be working without it. I’m not going to bother. Why? Because it’s given me no reason I should bother. I know I typed my e-mail correctly and have no reason to care if they get confirmation or not.

passpack_one_password

Hmm. I’m not actually sure how to USE this password I’ve stored. Clicking the little icon takes me to delicious.com and clicking the word delicious.com (that’s what I named the saved password form) brings up the form I used to enter the info, except filled in. Now the “Go There” button makes a little sense. I can copy the password click “Go There”, and then … no that’s not the right page. As I mentioned Delicious, like many sites, has it’s sign in form on a page other than the home page. I have to click Sign in on delicious.com and now paste in the password.

Now, I remember watching the video on their home page. You know, the one that had sound, readable text, and actually made Passpack look cool? And I remember some easy bookmarklet tool they had for logging in to sites. If I hadn’t watched that video, and remembered that, I’d think that this really sucked. Because it does. So I go hunting for the tool.

It’s not under tools. [Side note: Tools is a menu AND a link and nothing in the menu takes you to the same place as the link.] There’s some cool stuff there, but not what I’m looking for. There’s an “Auto Login” menu/link… that looks promising. Apparently “Auto login is on” (dunno how or why) and I can “Install your button” So I try that. Apparently “Installation is easy – just add one of the buttons below to your bookmarks.” and then offers a how-to video if you don’t know how. Seriously? Ok first off, they look like buttons. They call them “buttons” So non geeks are going to think they are “buttons”, but no. They’re fucking bookmarklets. And you don’t need to “add them to your bookmarks” you need to drag it to your fucking bookmark bar at the top of your browser.

Out of morbid curiosity I click the how-to video. Like the first how-to video it has no sound, all the text is fucking tiny 90% of the time, and it shows dragging the “button” to your toolbar except it’s zoomed out so far you can’t see any of the indications a browser gives you that you’re dragging something and just looks like they pointed at the “button” and then pointed at the toolbar and for some reason there’s now the words “Passpack it!” have appeared on the toolbar in the video (they zoomed in so you could read it). They, of course don’t mention the normal ways to “add them to your bookmarks”, not that you’d want to right click and “bookmark this link” and click ok on the form but that’s what they implied you should do in the instructions.

So, I go to the delicious.com sign in page in hopes of trying out my new “button”. When I click it I get this

To use the Passpack It! button, you must connect to this website through your Passpack Password Manager. You will then have 2 minutes to press the Passpack It! button, after which point it will deactivate itself and you will need to start over.

Wait… what? I was just there! Ok so I go back to Passpack (I went to delicious in the same window) and… FUCK it’s remembered me and now I don’t have to enter my username and password but i have to enter that fucking sentence again! ARGH

So I log in (again… this is the third time including setup). I click the link to get my list of passwords. I click the link to take me to the site I was just fucking on….and then click the button that started all this and get:

Hello! Would you like to teach Passpack how to log into this website?
It’s fast and easy to do. If you make a mistake, you will have the option to try again or give up.

If you don’t want to do this, just press Cancel. But, you won’t be able to use the Passpack It! button then on this site.

If you want to try, follow these instructions:
1. Press the OK button (this window will disappear so finish reading first)
2. Click on the username field
3. Click on the password field
4. Click on the login button

That’s it – now Press the OK button and try it!

I swear to god you people fucking hate me. There is no username field. there is no password field and there is no login button because I’ve mistakenly gone to delicious.com not the sign in page. Ok, Ok, this is totally user error. It’s getting late… but  the problem is that it’s obviously going to be paying attention to what I click next and I’m concerned that it’s going to break if I have to navigate there first. [Suggestion: The bookmarklet should notice there's nothing resembling a username or password field on the page and warn me.] I try anyway… Click the sign in link to get to the login page. Click username. Click password…. and … fuck. What was next? Seriously, I got sidetracked with concerns from being on the wrong page and now I don’t remember, but I don’t want to cheat and refer to the instructions I copied to show you. I try the “Passback It!” button again. It does something and now I’m signed in.  They fail for giving me four step instructions, but they totally succeed by doing something hardly any app does and compensated for not one, but two counts of user error. Actually the four step instructions aren’t a total fail because they’re moron level simple. If you can’t figure out how to simply click the username, password, and login button you’re screwed to begin with.

Wanting to see what it’ll do the next time I need to log in. I go back to Passpack in the other window. Click the button to take me to delicious.com so that I can use the Passpack It button to “Auto login” click “Passpack It!” And …FUCK it’s that damn huge “hello would you like to teach…. ” NO! No I fucking don’t! I just taught you! It was smart enough to compensate for my user error but too stupid to pay attention to what page it was logging me in on and save that info with everything else.

Because I want to see this freaking thing work once before I go to bed. I go to the sign in page. I copy the url (because  I don’t memorize that whack address). I go back to Passpack. I edit the saved password. I paste in the “Link”. I click “ok”. I ph33r the big red button that’s appeared but click it anyway. I click the button to take me to delicious (I’ve got like 4 or 5 delicious.com tabs open at this point) it takes me to the login page url I entered. I click the “Passpack it!” button  and holy shit I’ve logged into a site.

passpack_more_icons

Later on more icons show up next to your saved login in Passpack. I’m not sure why they weren’t there when I took the first screenshot and I have no idea what any of them are. I guess the link one will take me to the site. But the person, email, and snowflake? If you mouse over them they each say “Edit Entry” in the tooltip. I’m obviously frustrated at this point and not about to go hunting for docs or click each one to find out what it does. So I’ll go away wondering if the tooltip is wrong or if they actually all “Edit Entry”. I just happen to know you can turn them off (somewhere). But I’m betting the tooltip is wrong and that they’re probably there for some useful reason.

Offline Access:
The tools page claims it has a google gears thing to synchronize your stuff for offline use but when I click it to try it it takes me to their products page which has no mention of it, and wants me to sign in. I don’t know why it wants me to sign in again and at this point I honestly don’t fucking care. I’ve logged in three times now in an attempt to create and use one password, even though I’ve never logged out, and I am not typing that damn sentence in again.  They claim they have a Google Gears tool. They claim they have some Adobe Air desktop app too. They probably both exist. They probably both work, but I’m not going to find out.


Clipperz

Open Source: yes
Data is stored securely: yes
Ease of setup: meh
Ease of use: ugh.
Generates passwords: yes
Stores custom passwords: yes
Limitations: none.

Overall thoughts:
I really wanted to like Clipperz. It’s open source, it doesn’t look like crap (this is a big deal when talking about open source). I like the fact that they don’t store anything unencrypted on their servers, you can install your own server, the offline version is just as good as the web site itself, but, unfortunately the usability just sucks.  Fortunately though, none of the issues I have with Clipperz couldn’t be fixed, or at least dramatically improved, with a few days of hacking, and having spoken a little with one of the developers I have a feeling they will be. This app is really close to being a really good option, but it’s simply not there yet.

Getting started:
Signing up is actually a little scary. It’s all OMFG DOOOM Don’t loose your password! Which is important since everything’s encrypted with that password, and I’m sure they’ve gotten way too many e-mails from people who’ve forgotten their master password and now can’t decrypt any of the other passwords they’ve stored with Clipperz. It’s a “damned if you do, damned if you don’t” situation for the developers but still, I don’t want the first thing I’m presented with to be a warning of dire consequences as I try to sign up, and this is essentially the only site that does it. Since you’re damned either way and no-one reads instructions you may as well not scare them too.

Once you’ve created an account you have to read instructions. Sorry, there’s nothing obvious about the next step. It says “Before you start, install the “Add to Clipperz” bookmarklet: it will make creating cards [they call each bit of stored data a card] easier and more fun. Go to the “Tools” tab to discover how to install it and how it use it.” No no no. Just give me the damn bookmarklet right there and say “drag this to your toolbar”. Link to more instructions for confused people. Also it doesn’t even make the words “tools tab” a link. You have to go find it. Not that it’s hard to find but still… When you do get to the Tools tab the “Add To Clipperz” bookmark is not there. You have to find the bookmarklet link on the left, click that, and then drag the bookmarklet to your toolbar. This could have been one step “drag this to your bookmarks toolbar”.

Adding your first password:
Going with the fact that no-one reads instructions I used the first obvious password adding mechanism I saw: the bookmarklet I was instructed to install. So, I go to delicious.com’s sign-in page and click the bookmarklet. A pretty little window opens up with a mass of code so long it makes the text-area it’s in scroll.  If that wasn’t bad enough check out the instructions.

clippers_add

Ok, I need to say, right here that if I wasn’t writing this article. I’d simply stop. If, in order to add a password I have to follow a five step procedure (actually it’s more) and copy and paste code blocks you have failed usability school and need to go back. Actually if I even see code you’ve failed. There is no reason this can’t be a one click form-submission process and there is no way you are going to convince me to validate code blocks every time I want to add a password for a new site and I’m a geek (turns out you have to validate the data in a decently readable form, but I don’t know that yet). Asking users to follow a five plus step process that involves copying and pasting code every time they want to add a password is unacceptable. Also, there’s nothing here that’ll encourage me to not continue the bad habit of using the same password on multiple sites. [Update: turns out there is a password generator under Tools but I never noticed it.] Also, it hasn’t noticed that I’m on a mac where the control key isn’t used for copying and pasting. But, in the interest of you, my dear reader, I shall soldier on.

If I wasn’t a geek I would’n't notice that the thing is already screwed up. It’s got nothing for username or password. Why? because there’s no indication that it’s expecting them to be there before I click the bookmarklet AND it hasn’t picked up on the fact that I haven’t entered anything. Assuming a non-geek was using this they’d probably be annoyed when… oh wait… step 2. “Go to your Clipperz account.” Now, the first time I use this I may still have Clipperz open. But in normal use this means I now have to type in clipperz.com (a regular user would have this bookmarked but still… “Go to your Clipperz account” could have been a link), and, even though I should theoretically still be logged in… I’m not ( I closed the window). Now I’ve got to log in there too… where I find a strange checkbox under the form. Not your standard “keep me loged in”. No,  it says “use a one-time passphrase” and I have no fucking clue what this would do, so I’m not going to check it. Reading further down there’s a “afraid of malicious scripts? Verify the code” message … wait what? No! There could be malicious scripts ?! Being a geek I know what they’re getting at but again stop scaring your users.

Passpack dealt with this with the potential phishing problem with a simple welcome message and odd black blocks.  Also no-one is going to “verify the code” (download and read through the source) every single time they want to log in. Plus, the code I download isn’t necessarily the code that is running on the server. It’s a false sense of security and there is no getting around the fact that users have to eventually just trust that their password manager isn’t being maintained by people out to screw them. Yes, it’s awesome that I can verify that at some point in time the code looked sensible and had no glaring securty flaws, but…

Back to the task of adding a new login. Now that I’m logged in to Clipperz again I have to “Add a new Card”, “Choose a Template”. As I’m trying to set up a password, I almost clicked “Web Password… A simple card to store login credentials for your online services.”… except that’s not the right choice even though that’s exactly what I want and am trying to do. No, I need that “Direct Login” one with a big empty text field. Yes if I read the details under the description I’ll see that this is where it expects me to paste the code but people don’t read instructions so this is fail #2… :/  They’ve made an “easy to use” bookmarklet and then made it’s choice the last one. But, moving on…. I’m now presented with a form with an empty username and password…. Just so you know, they would have been filled in if I had filled them in before clicking the bookmarklet. But at the bottom of the form there’s a big empty Direct Login Configuration field, like the one I had to paste the code into except this one’s empty and I haven’t a clue what to do with it…. so i leave it alone. It seems to work with it empty but now I’m afraid to put anything there because maybe it won’t.

All of this, ALL of this, could be replaced with one button in the bookmarklet’s window that says “Save” which takes me to a page on Clipperz that says “Got it” and tells me to click on the new link in the sidebar the next time I want to log in to Delicious.

Unfortunately, it doesn’t, and now I have no clue that that’s what that link on the sidebar will do. Honestly I was expecting it would take me to a page to edit the login info I’d saved for  Delicious, especially since a little “show” message/link when you mouse-over it.

Now, I’ve got a page with my logins to all my sites. If I close it I’m logged out and have to log in to Clipperz every time I want to access some site that requires a login (same problem with Passpack) So, I have to log in to one site to log in to the site I actually want to log in to. Even worse, because the password to this site gives access to all the other sites I have accounts at I’ve made it long and cryptic, and now I have to enter that all the freaking time, which means your average user is probably going to want to change it to something nice and easy to type… in other words, a crappy password. At leeast it’s not trying to get me to use a sentence. If I leave the Clipperz window open then there’s an open window on my computer that not only lists all the sites I have logins at and is bad for the same reasons I mentioned in the Passpack section.

I could go on about the bad UI decisions in this app, but I wont. I think I’ve done enough damage, and that really wasn’t my intent.

Offline access:
Under the “Data” tab there’s a download link that generates an HTML file with all your data encrypted in it. It works just like the web site, except that it’s read-only. In fact, it looks almost exactly like the web site. So close that I can see myself easily mistaking it for the web site and thinking I’m logged in when I’m not.

Access from another computer:
It’s a web based service so you have full access to everything.



2 Responses  
  • weblog.masukomi.org » PasswordMaker Review writes:
    March 13th, 2009 at 12:02 am

    [...] The Circus of Interface FAIL [...]

  • Marco Barulli writes:
    March 13th, 2009 at 3:39 am

    Kate,
    this is the most useful review of Clipperz we ever had!

    You are right on almost everything, there is just one exceptions: Clipperz does have a password generator!

    You can access it from the Tools tab or from any card that contains a password field. (If you didn’t notice it, it’s another UI failure …) The password generator does not use any standard rand() function but it’s based on our own Fortuna implementation.

    Your comments are really valuable inputs that we are certainly going to take into consideration for the next release.

    Some of them are not compatible with our “learn nothing about the user” mantra, but some others are really spot on! My partners at Clipperz will probably send in more technical answers.

    Thanks!
    Marco
    Clipperz co-founder


Leave a Reply

»  Substance: WordPress   »  Style: Ahren Ahimsa
© Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.