Self-evaluation and 360° feedback surveys are important tools in the human resources toolbox. Sadly, most online self-tests have evolved little compared to other web apps. When Emagister asked me to design their new self-evaulation test, I introduced my own, admittedly small, innovation to one of the test’s key interaction. I’ll explain the story here.
Questionnaires are the opposite of fun
Fact: questionnaires are about answering questions. Fact: answering questions kind of sucks. One more fact: HR questionaries have an added handicap, they have lots and lots of similar questions. The questionnaire we used at Emagister was no exception. It’s called the Holland Vocational Preference Inventory (even the name is long!) and it boasts 60 multiple-choice questions that could bring a 3rd grader to tears. Thanks to the indomitable Alberto Almansa‘s HR wizardry, we were able to cut the questions down to 11 but that’s still way too long. I had to come up with a tiny interaction miracle by making 11 questions:
- Easy (don’t make me click too much)
- Fast (don’t make me read too much)
- Fun (don’t bore me)
Ruling out existing patterns
I tried existing interaction patterns in the hopes they would be usable, intuitive and fast. I always start with the most common design solutions. I really despise forced innovation aka designing to impress my designer friends. Here are some early attempts:
Two part questions
Tag selecting
Standard exam questions
These solutions “worked” but none of them were good enough. They all either required two interactions on the same item: one click to select the item and a second click to rank it.
Dead end? Let’s play
We were pretty frustrated and may have even turned to a cold afterwork beer to ease the pain. That’s when Gustavo and I decided to play. Let’s talk about play for a moment. Play rocks because it distracts you from thinking consciously about the problem in front of you and lets your subconscious take the wheel. Your subconscious eats these kind of challenges for breakfast by repeatedly imagining seemingly illogical solutions to the problem until one sticks and floats up to the conscious brain. I’m a big fan of the subconscious (ask me to show you my Freud tattoo). Play is also great because it’s physical. This is ideal for testing out real world interactions quickly.
The breakthrough
It was while playing that we had our big breakthrough. We could get users to select and rank their selections in just one step. All we had to do was ask users to drag their selection from one side of the screen to the other and to drop it in order of priority. Dragging means just one click and the movement is kind of fun in a nerdy way. Its also fast, even when stretched out over 11 questions. Check out the the wireframes, mockups and final interaction below.
So there you have it. After a bunch of trial and error (and beer), we played our way to a cool new interaction pattern and, hopefully, made the world of online questionaries a tiny bit less tedious.
I originally wrote a draft of this article in January 2012 and have only gotten around to publishing it now. In the meantime I saw Monica Zapata‘s presentation on Elecciones.es at this year’s UXSpain. I was pleased to see they wrestled with many of the same issues and had even cooler results. Well done!
The Digital Altruist 
Slight problem – dragging is actually far more demanding of motor skills than a simple click.
For some people it’s great, but asking people to drag is only any good if you’re physically able to drag and drop. Many people aren’t, either they aren’t good enough with a mouse to be able to manage it due to lack of experience or a physical impairment, or they just aren’t using a mouse to interact with in the first place.. many people navigate using a keyboard or assistive technology devices.
The same applies to touch, swipes and gestures are far more difficult than presses for some people.
So you have two solutions, each one better than the other for certain groups of people. What to do?
There’s a very easy solution – offer both. You don’t have to choose one at the expense of the other. If people want to click and drag that’s fine, and if people want to click to make a choice and then click to rank that’s also fine. Give people the options and let them use it in the way that works best for them.
I like this variation.. It’s busy but it looks more fun. You could even add a second bit of functionality for people that just want to click: single clicks to items on either side will send them to the bottom of the other list.
I think if we do this and a few other methods, switch them up as we go, then the tedium of filling out repetitive forms can be mitigated.
Thanks for your comment, Hoby. I think the visual designer did a good job avoiding noise, though I’m still a bit concerned about the way the list module on the left gets shorter as the module on the right gets taller. It’s not a real world behavior and doesn’t jive well with the drag and drop.
Single clicking is a nice idea but there’s an issue: to offer accurate results we have to avoid people “phoning it in” by clicking options in the order they read them. That would allow them to go faster but skew the results.
Cheers,
Chris
One issue this design pattern definitely solves is the issue of end-users rushing to complete the survey. Having them drag, drop, and re-order forces them to focus on the task at-hand. Nice work!