Goodbye, Tuenti. Hello, King.

Today, after three years of adventures at Plaça Catalunya 1, two offices in Madrid and, of course, the “bar car” on the AVE, it’s time to say goodbye to Tuenti and hello to my new team at King Digital, makers of amazing games like Candy Crush Soda Saga, here in Barcelona.

Although it’s been years since I worked in the education space in years, I’m still fascinated by how we learn. In many ways, creating and sharing knowledge are the most human activities and are consistently my biggest motivators. When it comes to learning and teaching, my time at Tuenti was abundant. I leave smarter, faster and more inspired than I was that first day in November 2011. I could never list everyone and everything I picked up there, but I’ve done my best at the end of this post. But the truth is, I got the most important lesson my first day, probably because it’s what makes Tuenti “Tuenti”: smart, passionate people with big goals can do amazing things.

Now, it’s time to learn new things, and my new role as UX & Product Director for CRM will provide a tough but rewarding classroom. Helping players discover all of King’s amazing games while creating a fun, emotionally rewarding experience is exactly the kind of problem I love and can’t wait to work on. From what I’ve seen so far, I’m joining another team packed with sharp, fun people who love what they do and embrace the tough but rewarding path.

———————–
This is an incomplete list of all the people at Tuenti who were nice enough to teach me something. Thanks to you all, even if I forgot to list you!

Phil
Gloria
Adam
Andrew
Bartek
Irene
Ricard
Ana E.
Mamuso
Marcio
Jose del Corral
Justyna
Dani Mota
Kike
Miguel R.
Victor
Einar
Albert
Adrian C
Adrian M
Bernardo
Paul
Zaryn
Sebas
Ana N.
Ricard
Pedro M.
Juanma
Lucas
Sara L.
Stanley

Must-read design, UX and IxD books

We just got this year’s reading budget approved. It’s time for a #webdesign #UX #IxD book shopping spree! Which must-reads should we buy?

Please share your recommendations in the comments below.

 

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!

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!

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.

Interaction tips for sliding carousels

George Thomas recently asked the User Experience Professional Network about best practices for sliding content galleries (he calls them “rotators”). I love these kind of interaction questions, so I thought I’d share my response:

Hi, George! In my experience:

1. The sweet spot for rotating content is near 3 seconds.
2. Don’t forget the transition time (fade in, fade out). I’ve found slightly longer transitions work better.
3. Finally, make sure to properly interpret user interaction near or in the rotating space (clicks and mouseovers). Text and images that move while I’m trying to process them just plain suck.

While we’re on the subject, sliding content galleries or “rotators” are fine provided users can access the full content somewhere else. A link to the full content located below the “rotators” space does nicely.Cheers,
Chris

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.

Layers: a tale of use and abuse

Layers, lightboxes, floaty things, call ’em what you want: they are a major tool in a UX designers toolbox. When used well, they provide a fast, inline experience saving users’ browsers and brains from the agony of a complete page reload. When abused, they create a hot mess with confused users wondering why the page is now covered in a transparent black and scrolling in search of the layer that was there the last time they clicked. So the question is: how do can we separate use from abuse?

A bit of benchmarking

Facebook

My first taste of Facebook’s layer-ed loving was impressive: I drooled as the page went glossy, semi-transparent black and a list of all my friends loaded in a mega layer. I could invite all of my friends to a group without venturing out of a 400 square pixel perimeter.

Lately, Facebook has added even more layers, including the lightbox (above), the group creation layer and invitation layer. Major exception: the friends list layer was rolled back to a standard page.

Twitter

Twitter uses a layer for the mother of all action: the tweet. Direct messages also get the layer treatment. Just about everything else is page-bound.

Google+

The new kids on the social networking scene loves them some layers, oh yes they do. Circle lists, profile editing, even adding a new profile pic all happen in layers. Most of the interaction is excellent, though scrolling a “circles” layer with my Mac trackpad just doesn’t work; inevitably I scroll down the entire page and completely lose sight of the layer. I cut Google slack the first few days but they really need to fix this bug soon.

Linkedin

Layered interactions are scarce on LinkedIn. Main actions (writing messages, adding new contacts) are handled in-page. What’s really noteworthy are the utilitarian pages (above) they use to add and edit your profile. Although the browser loads a new page, the minimalist header and closed loop navigation makes for a fast experience and a tight interaction. LinkedIn has used this utilitarian format for years, a good indicator of how effective it’s been.

Path.to

Darren Bounds says his start-up Path.to “trims the fat” away from LinkedIn. This is really clear when it comes to how users edit their profiles. No utilitarian pages here, layers are the main interaction flavor. It’s a nice idea but when faced with a virgin profile covered in tool-tips and layers, the experience can be a bit daunting. However, based on what I’ve seen from the Path.to team so far, I’m sure they’ll be iterating this to perfection in no time.

A layers checklist

Here’s a quick checklist to help you figure out when using layers is a good idea. Answer “yes” to these questions and layers might be a good bet:

1. Are you designing for just one main action?
2. Is the interaction straightforward? (no errors messages to communicate, no multiple steps each with a divergent use case)
3. Does your layer cover less than 40% of the screen real estate on a 1024×768 screen and still give your users enough elbow room?
4. Are there any potential positioning issues? (overlapping layers, layers appearing above or below the page’s “fold”)
5. This is a big one: are you sure you’ll never have to link directly to this layer from another page? (links that point to pages with layers pre-opened are a big turnoff)
6. Am I missing something? Let me hear it in the comments section.

Recap

All that glitters isn’t gold and all that floats isn’t lighter than air. Building a layerpalloza can be tempting but don’t let your desire to innovate trump your common sense understanding of your users. User experience pros love cool for cool sake, users don’t. When in doubt, launch, test and repeat. Good UX, like enlightenment, comes from constant iteration and obsessive evolution.

---

A quick shout out to @inoku, @pelluz and @semantricks for their help in shaping my thoughts on this subject.

Meet Platonic Brain, Lizard Brain’s ideal cousin

Watch Seth Godin’s talk on “Quieting the Lizard Brain” and you’ll immediately recognize that lump-in-the-throat anxiety that comes on the eve of “shipping” a new feature. Godin is right that we all get the opening night jitters and that only the bravest plough through and launch, lizard brain’s be damned. What Godin doesn’t mention is the Lizard brain’s cousin, Platonic Brain.

Spoiler alert: I’m no neurobiologist. I couldn’t find Platonic Brain’s neural neighborhood on a map but my gut (this I can find) says that Platonic mingles with Lizard at the hemisphere’s annual block party. I’m betting they’re neighbors because both keep us from discovering how good or bad our work really is.

Where Lizard uses dread, Platonic appeals to our higher angels with the promise of that perfect piece of code or flawless design if we just keep iterating. I like to imagine Platonic singing “Baby, let’s iteraa-aate” in a perfect Marvin Gaye falsetto but that’s just me. Platonic Brain promises and delivers endless perfection by never letting in those pesky users and their real world problems. Iteration, review and success are relegated to a closed loop where we are the only judges of our own work and, accordingly, of our own genius.

Sounds great right? There’s only one problem with this endogamic paradise: it kills any real innovation. In “Designed for Use“, Lukas Mathis writes:

Never assume you can apply a list of usability rules to a product and end up with something usable. Use common sense when designing user interfaces, but don’t rely on it. Know the rules, but break them if it improves your product.

Knowing the rules and then breaking them is a pretty damn good definition of innovation. Assimilate the field, apply an existing method to solve a problem and, if that method doesn’t work, try something new. Will that something new work? Will your innovation become the new way to do things? Lizard Brain says “fat chance, loser”; Platonic Brain says “of course, just let me tweak this one part”. But your users must (and will) have the final word.

So, enough iterations already: launch the damn thing and let the page views fall where they may. You may end up brokenhearted and you’ll definitely discover your work (read you) isn’t as brilliant or tragic as you thought but at least you’ll know. Better to have loved and lost… well, you get the picture.

Case Study: How (not) to use Twitter to help your users

Erasmo Lopez, co-worker and friend, and I decided to storify my twitter conversation with @bicing, Barcelona’s shared-bike service’s Twitter presence, into a Stof. It’s a great example of how helping your users through Twitter is a great idea but requires a clear plan on how empathize and respond to users. Just “being there” is not enough.

(this is the Spanish version. The English version is coming soon…)