Blase- Project 2- The Swype-ification of Password Creation Data
http://youtu.be/uGBQRH4IQsc
For the last few weeks, I’ve been collecting data on people creating passwords for a research project. As part of this data collection, I’ve gathered keystroke and timing data for 1,200 people creating a password. I decided to visualize the temporal and spatial elements of this password creation.
Since I’ve been spending a lot of my time lately investigating the passwords people create under different experimental conditions, I thought it would be interesting to understand not just the final product, but the process of creation for these passwords. For instance, are there visual patterns on the keyboard that people employ? These patterns might not be obvious (e.g. 1234), yet these patterns would appear if properly visualized. Furthermore, the thought process that goes into password creation is simply interesting, both from research and aesthetic views, since the user is going through a complex decision-making process in which she creates a password that she believes to be secure, yet memorable.
While the creation of a password in isolation is interesting, the way these visualizations can be viewed in aggregate via small multiples is the most interesting part for me. I created a 4×2 grid of keyboards so that, even on my 12″ laptop’s low-res screen, I could view 8 passwords being created in parallel. With a data set of 1,200 passwords, the way these 8 passwords are chosen is very interesting and crucial. For instance, in the demo video above, I filter to only look at people who used all 10 unique digits on the keyboard in their password. Another metric could be only looking at passwords that are strong in the face of a guessing attack, yet users claim are memorable— are there patterns that seem to assist in creation of memorability? Other metrics for filtering might include everything from the linguistic structure (how pronounceable/”English-y” is the password) to the distance between keystrokes to the extent to which successive keystrokes are found on opposite sides of the keyboard, therefore being typed alternately with the left and right hands.
On a technical note, I implemented my project using Processing. In particular, I used its drawing functions extensively.
As part of my visual technique, I tried to draw inspiration from Minard’s 1869 map of Napolean’s invasion of Russia. In particular, the way Minard used the thickness of a line, its direction, and its color to all communicate different elements influenced my decision to show the ordering of keystrokes with color (from black to red), the temporal delay between keystrokes in a statically visible way (the thickness of the line), and the direction (which keys were pressed, as well as what the pattern was).
I also drew inspiration from Swype, the software for entering words on a smartphone by gliding your finger across the key presses. The idea of concentrating on the spatial layout of the keyboard was first suggested by my peers in our breakout sessions; I was initially concerned with just the temporal element of the text.
I think the underlying code was quite successful; it’s robust in the face of errors in the data and all sorts of user behavior (including deleting passwords partway through). Furthermore, the choice of the multiple dimensions of color, thickness, and location for the line did successfully reveal information that I previously hadn’t understood. However, due to time constraints, I’m not happy with the way filtering works. I’d rather have a database of all 1,200 passwords, along with some filtering “knobs” the observer can turn to choose the 8+ passwords to be visualized concurrently as the observer sees fit. I was a bit stuck on how to best implement this GUI in Processing, along with the amount of time it would have taken to make robust filtering possible. I’m also not convinced that my choice of black->red for color was the most aesthetic choice.
========================================
Blase: The Swype-ification of Password Data
http://youtu.be/uGBQRH4IQsc
Cool topic
why is background grey? prob just the vid. (?)what’s wrong with gray?
cool subject to analyze. i wanna see the crazy passwords. i’m not sure why people would use swipe for password entry. by definition it tries to find the closest-match common word, and generally with passwords that’s the opposite of what you want to do.
^^ I don’t believe he is suggesting anyone uses swipe for passwords, just as a common metaphor for visualization
^okay, that part is pretty cool. i still find it hard to believe that no passwords included the word ‘boob’ :-0
This is a cool way to begin leveling the ability to understand people’s personal choices
which can maybe only be done visually. A graph of the mind?
doesn’t thicker naturally suggest a stronger connection (and by extension a quicker one?)
^^ thats what I would think
The blue text of the password has poor contrast against the gray background in the Processing keyboard layout. The small multiples approach is smart, but I wished I could see more than 8 …. more like 100 at a time would be interesting. I don’t think we need them to be so “zoomed in”, since we don’t really need the detail of which key they pressed — we’re looking at overall motion patterns. Also, I’m not sure the line weight is as meaningful semantically as it is visually — by which I mean, the difference between light and heavy lines makes a HUGE difference in my visual field (other people agree below :-)), but is it really all that meaningful to what you’ve mapped it?
The section about filtering data could use more pictures of small groups of passwords
Would be cool to see some kinda interactive playback speed control.
i like the use of the swipe visualization but when it’s something like 1234… it’s not so clear if it was 1234… or maybe just 14.. etc, maybe adding a dot or something where it crossed the key would make it more clear. can’t really determine the length of the passwords either from just looking at the keyboard keys.
I like the use of small multiples but I’m not sure the use of thick/thin lines to show speed is the best visualization. Dots spaced by the speed of the connection might work better. How do you account for people who are just really good at typing. There could be a learning effect. Still, really interesting. People have some weird/dumb passwords.
jagged graphs where the line moves around a lot don’t necessarily imply entropy of the password itself, or does it? I also would like to see a small dot or something on each key that was actually typed because a long diagonal line that goes from the p to the 1 on hp123456789 makes me think o i u were also typed unless I look closer.
^^this too. qwerty123 has the same visualization as qy123 at the right speeds, as one example of confusion this could clear up
the last section with all the graphs wants an overlay of a couple on top of each other I think.
Different patterns of password visualization are very interesting! but I wish I could see more versions of different patterns.
The geometric shapes this creates are really wicked, I kind of which they were separated from the keyboard backgrounds though. There’s probably an opportunity here to do something more abstract.+1
It also feels like there could be many more patterns on screen at once, like 64+. The effect of scaling this up would have been pretty dramatic
I kind of wanted to see a pre-rendered version with hundreds of passwords, or some more interesting geometric data that could only come from that many simultaneous entries. The individual password visualization was cool, but it didn’t really stand out beyond Swype for any other set of words.+2 especially because your presentation set up the expectations for 1000s
wait, where did these passwords come from? why does this whole subset on the screen contain 10ish digits?
how about doing a tree visualization where you show every response after someone typed an A, B, C, etc..
it would have been cool if the password swipe formations formed shapes (eg. star). could be a new way to make passwords.
For your presentation- maybe show some example screenshots are you are describing the elements.
Agreed; I’m getting impatient to see the visualization. :) +1
There’s plenty of space on the slides for this, they were a little too sparse as is
I agree, with the having more picture sentiments. Though I’m assuming it would have been more engaging if it was a live presentation. It would have been neat to have had a static visualization with the dynamic visualizations, for example the deleted elements simply disappear, but what if they could be visualized in some other manner? I guess I wanted to compare the visualizations a bit more thoroughly.
It would have been great to describe the elements of the visualization while doing the demo instead of before it. The visualization was neat but i would be interested in looking at patterns across many passwords: for eg it looks like many passwords have sequences of numbers. The keystrokes were cool and might be interesting to see many superimposed on each other faint lines to see it any keystroke patterns emerge.
I think it would be cool to design a way to represent deletions without the time component. The animations are fun to watch, but I wonder if you could make a static image, especially with the small multiples presentation, take away the keyboard, and then have some cool abstract art.
interesting data!
I am curious how you go the data from its raw form to that visualization. Is this real time?
Could you “show” a key being pressed (AKA make key be a darker color) so that we know which key is being pressed (it can be hard to tell with the lines flowing over the keyboard).
Could you add little numbers on the visualization so we know which characters were typed first, second, third etc?
could this be interactive? could I start to type in a password, and then below a bunch of animations pop up of people typing similar passwords (starting with the same letters etc)…
Also- the passwords you have displayed don’t seem authentic. Are most of the passwords people made up for your study like “1234567890asdf?” Do you think that is similar to their actually passwords or just something they made up for the study.
I found the representation of time a little bit confusing because it takes the lines so long to get from key to key – I imagine a person slowly moving their finger accross the keyboard, which seems weird, but maybe that was the point? The line thickness works in the static images (although having some kind of key would be nice), but it seems less effective when the animation is running.
Another thought: If you combined this timing data with typing speed datas (I know there are tables in the Psychology of Human Computer Interaction about how long it takes to type a pair of characters in sequence) you could perhaps estimate how people type in passwords: 1-handed vs. 2, &c. Might be interesting…
Yet another thought: If you have data for multiple logins of a single individual, it would be interesting to see the different shapes the passwords create for say their personal email, bank, Amazon, PayPal, &c. See how linear they are or something. I know I have some common weak passwords I use for accounts that I (probably unsafely) don’t worry about making secure.
How did you get 1200 people to allow you to track their keyboard strokes?
Maybe would have been better to first give a demo, and then explain about it.. so we will all be in the same context.
**Agreed
Could be arranged a bit differently to make it more of an abstract image on its own perhaps? Interesting Idea, but I think the aesthetics could be tweaked a bit to show both the information and make it an interesting image.
Could potentially work on typography.
It would be cool to see some visual to go along with your discussion of the data.
***yeah. Def. at least a screen cap. of yourself. minimum
***especially on the initial visualize slide
***or an animation would be cool to show the motion being traced
cool keyboard visualization. love seeing the passwords visualized all together.
i don’t get why the line is thicker sometimes
***i think that was explained in the beginning, but could potentially go for more explanation
*** yea a key explaining that would be nice to reiterate
Great way of presenting several keyboards in parallel!
I liked seeing the 8 simultaneously. I think it would be cool to find a way to visualize a larger set of the data. and overlay it in some way.
** Agreed. especially as Blase collected way more than 8 keyboard strokes!
It seems less that the order and speed of the password gives us information, and more just people’s favorite words. If this is not true, your data should have proved it with a visual communication.
Would love to hear if you thought about some next steps or other things you wanted to do with your data and didn’t have time to finish because of the Tuesday deadline.
** yea or something to visualize when they deleted parts, i thought that part was interesting
I would also choose another color for the stroke. That brownish (maybe it’s because of the projector) is not so nice :)
** also the contrast on the keyboard would help a bit the gray is really light
why doesn’t the visualization recognize the Shift key in the top right corner’s password involving “H”?? what does your visualization do with characters that require the shift key? like *&$#@. Capital or shift-oriented characters are a big thing that people do, so would be beneficial to include them with possible dots whose sizes were based on frequency of use.