Category Archives: Product Development

Designing a new interaction pattern for online questionaries

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!

Advertisements
Tagged , , , , , ,

We just launched Tuenti Ads

After months of finger-breaking work, I’m proud to announce that today we’ve launched our new self-serve ad platform for small and medium advertisers: Tuenti Ads.

Congratulations to all of the Tuenti teams who’ve made this a reality, especially my amazing design team here in Barcelona. You made the complicated simple, the commercial sexy and never forgot about our users. You rock!

Tagged

The importance of user experience in education

In the last decade, user experience has evolved from an afterthought to a competitive advantage. The education industry is no exception. Industry pressure and user demographics have made excellent UX a required course for graduation.

The age of UX


The user experience industry is big and growing. Want proof?

  • 103,000 user experience professionals on LinkedIn right now
  • 100% growth on Google trends since 2008
  • 12,000+ “user experience followers on Quora

All of this growth comes down to one thing: what some companies used to “give” users, users now demand from every company. It’s a classic tale really: innovation is introduced into the field and is accepted, copied and iterated.

This effect is compounded by the nature of software. Code, like viruses, has a short inter-generational lifecycle. New features, improvements and bug fixes, can be introduced quickly. The good ones are passed on. The bad are rolled back. This quick pace means that smart coders can quickly hone in on a user’s needs, bringing every deployment closer to perfection.

Apple gets the lion’s share of the credit for taking world class user experience to the people. Their work on the “Natural User Interface” or NUI in, for example, multi-touch displays actually goes back to 1984, the year the first Macintosh debuted. Apple’s NUI-based devices are now used by millions (coveted by even more) and even the subject of lawsuits alleging patent-infringement.

Digital Natives

There are lots of great definitions for digital natives. Mine is simple: for digital natives, NUI is not an invention, it’s a reality. They don’t remember a time when ATM machines sucked or you had to use a stylus to interact with a screen. They just expect interaction miracles and shiny devices that cater to their every whim. Although this may be problematic for their emotional and spiritual health, digital natives are tomorrow’s consumers and today’s students.

Digital natives’ way of understanding the world affects how and when they learn. It also guides their interaction with the tools they use to learn. For starters, they don’t see software as software. They don’t even see it as a machine really. They expect software to be an extension of themselves, to be anthropomorphized and, in many ways, to think for them. My four year old isn’t aware of Youtube’s related videos algorithm. He just expected it to keep serving up videos of Lego ninjas.

Digital natives despise barriers. Their “all access, all the time” ethos perfectly matches the level of need-fulfillment technology has granted them. Bad UX and poor usability are some of the biggest barriers of all. Digital natives are good at finding workarounds but all that technological coddling has also made them less patient than generations past. If it doesn’t work, if it’s not available on “their device”, they just move on.

World-class user experience annihilates barriers by making the previously impossible possible. I could share movies before Youtube but it was a pain. For years I could edit a video on my PC but iMovie made it intuitive. I could read online but it took Scribd to make it easy and social. The list goes on. In education, this means teachers can now self-publish and reach students anywhere in the world. Similarly, students can now guide their own learning.

Education is embracing user experience

Smart education companies are turning great user experience into a competitive advantage. Leading the charge are start-ups like Sclipo (I used to work there), Udemy and AppSumo. They get that the future is all about making it fast, easy and intuitive. Then just hand the reins over to students and teachers. Self-built and self-guided from day one.

Khan Academy is also worth a mention, mostly because they have always understood what digital natives want. Video is a powerful medium because it combines the aural and the visual. Streaming web video offers something more: full control. Students can go back, watch again even skip over what they don’t need. video is also emotionally engaging and asynchronous, unlike traditional text-based e-learning systems.

Finally, even the mighty Blackboard is trying to shed its more traditional roots and embrace change. Its new CourseSites standalone web app talks about “3 quick steps” and “engage your students in social learning” right on its homepage, proving that Blackboard can hear the digital natives at the gate.

The final exam

Even though many companies get the importance of UX in education, many more don’t. Elearning is still mostly text based, requires training the teacher and the student to use it and is anything but accessible via any browser and any device. For many public, private and non-profit education providers, digital natives and their thirst for excellent user experience represent a set of challenges they’d be foolish to ignore.

The useful, the usable & the beautiful

Web products done right follow a specific product cycle. Skip a phase and you can still make something people will use, you might even make money but your product won’t be useful, usable and beautiful.

Business development

Business development is all about detecting needs, feeling out markets and, hopefully, smelling the money.

Deliverables:

Ideas, preferably in a prioritized list of features or product backlog.

Why it’s important:

This is the brainstorming phase when you collect ideas, each one radiating potential. Capital “I” innovation happens in this phase. Start-ups are born here. The world is made better. Not bad, right?

Pitfalls:

Business development should begin expansively by asking the question “what if?” but must eventually turn back to Earth and ask “why not?” Prioritizing ideas is essential: as Steve Jobs once said, “I’m as proud of what we don’t do as I am of what we do.”

Product analysis

User needs are never enough. Product analysis takes the spark of inspiration and fans it into something that gives off its own heat.

Deliverables:

Benchmark, sketches, storyboards and process flows.

Why it’s important:

Product analysis asks the tough questions:

  • What would it take to satisfy the user’s needs? Can we get/build it?
  • If we build it, what would it look like? How many moving parts?
  • Would people use this kind of product or is the disease worse than the cure?
  • Is there real value here?

When a product idea fails these questions, it’s back to business development.

Pitfalls:

It’s easy to be overwhelmed by the potential of an idea hot from the business development oven. Asking and answering the tough questions is essential.

User experience design (UXD)

User experience design (UX design) gets down to the details by expanding on the product analysis’s deliverables with detailed prototypes that tackle usability, information hierarchy and architecture.

Deliverables:

Accurate wireframes filled with real content. Design research and benchmarking.

Why it’s important:

UX design continues the reality check by answering the question “if we build it like [this], will people use it?” The closer the wireframes getsto imitating the final product and its real world use, the more accurate the answer is.

Pitfalls:

The need to imitate the real world can lead to endless iteration. UX design without data can never be perfect. Salvation lies in testing, so keep the product moving forward and beware of diminishing returns.

Visual design

Wireframes are great but it’s up to visual design to provide that final coat of usability and sex-appeal.

Deliverables:

Pixel-perfect, high-definition screenshots.

Why it’s important:

The wrong colors or insufficient contrast can kill a product as fast as poor information architecture. Web products are used with our fingers and our eyes. If you see the word “visual”, pay attention.

Another reason why it’s important:

Visual design can also provide that most intangible of qualities: beauty. Products have to be meaningful, had better be useful and, whenever possible, gorgeous. Ever read about attractive babies getting more attention from caregivers? Heard the one about a young Claudia Schiffer being offered a modeling contract while boogying at a club? Beauty is rare and rare things are valuable. Don’t shortchange beauty.

Pitfalls:

Beauty for beauty’s sake is not ok, just ask the owner of a used Jaquar. Too many companies use visual design to mask a product’s flaws. This works for about 7 seconds. Users will always uncover a product’s real worth, not matter how beautiful a box it’s shipped in.

%d bloggers like this: