Category Archives: User Experience

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 , , , , , ,

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.

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.

The Making of Grupos v2.0

This post has been a long time in the making. In mid-May we decided to build a new version of Grupos Emagister, our new beta version social learning network. Construction lasted into early July and we launched on the 10th of that month.

It was a ton of work, lots of weekends and nights. Discussions, arguments, testing, testing, pizza and then more testing. In short, we had a blast. So much so that I decided to make a small “the making of” video to capture it for posterity. It will be a nice addition to the old digital scrapbook and will have the added benefit of showing all of those digital altruists using Grupos Emagister that we too believe in sacrificing for art’s and passion’s sake.

Tagged , , , , , , ,

Digital altruism and the riddle of anonymous online samaritans

I’ve been thinking a lot lately about Joshua Porter’s presentation on The Psychology of Social Design at last year’s User Experience Week. (I know that was a year ago, but I’ve been busy changing diapers 😉 ). Anyway, August heat has me flashing back to DC and thinking specifically about Porter’s belief that “Personal Value Precedes Network (Social) Value” and that most people aren’t “selfish” but self-interested. Though it may seem obvious, this maxim is incredibly important and is one of the first things we forget when building a new social networking site or even feature.

I like to apply this simple test: if only one user uses this feature, will it still offer value? If I upload my pictures of my vacation to Flickr and then send the link to family and friends, if I get zero traffic from Flickr itself or any of its networking features, it is still an excellent way to get my pictures on the web and easier than building even the simplest of personal photo galleries. Obviously once I start tagging my pictures, writing appropriate titles, joining groups, etc. the experience becomes even richer and my pictures are seen by even more people. But the core value of an online photo management tool remains the same. Flickr is aware of this, in fact it’s the first point of their mission statement.

Ok, everything is pretty straightforward up to this point. People like to look out for number one. Got it. Porter goes onto to talk about how to make the jump to social features once individual value has been met, and he summarizes Kollock’s Motivations for Contributing, which are also tied up with individual needs like reciprocity and the need to be a part of a group.

Again, sounds good but here’s the thing: if you, dear reader, followed the link above you’ll have seen a nice little site called Wikipedia. Nice right? Joking aside, try as I might I can’t seem take all of the self-interest inherent to the above theories and make it jive with a site like Wikipedia. My first thought that it was simply a question of volume, volume, volume: just as Porter says, most people are self-interested but “most” means that there are some people that aren’t self-interested. So then maybe it’s just a question of volume, volume, volume. I mean get a few million visitors per day and you’re bound to find a few kind souls who will add contribute without the promise of reciprocity. This also jives with research pointed out by Jakob Nielsen and Eduardo ManchonPDF Document which talks about a ratio of 1 content creator for every 100 content browsers.

The thing is that unless you buy great amounts of traffic or artificially motivate (prizes, money, etc.) the 1:100 ratio will only work once you have lots of users and lots of traffic. Yet at some point Wikipedia like all sites was small and as far as I know (if anyone else has more info please, please leave a comment to this post) they’ve always worked as an non-profit and have never paid to create content. That means that just like with the big bang there had to be some special initial spark to set off all of this exponential growth. And in the case of Wikipedia where anonymous sources are the norm, the spark couldn’t have been just ego or reciprocity. It had to be something altruistic, some need beyond our basic self-interest. Something noble and necessary that may not touch everyone, but touches enough people to get the ball rolling.

This deep need is what I define as digital altruism. Altruism because it’s all about the self-interest defying need to move outside of the market space that dominates more and more of our lives, to do something that feels big and important and doesn’t just serve ourselves, our employers and the system. Digital because thanks to the combination of new technologies that facilitate easy, delocalized communication and new sites which make contributing easy, fun and rewarding (I see what I’ve contributed) I can be altruistic from anywhere, at anytime, thus allowing me to balance my altruistic needs with my self-interest (work, family, leisure).

Digital altruism is a real need and it is at a heart of any successful social learning web site. Once you are aware of it’s existence, it’s easy to come up with a number of specific ways to use it in social web sites:

  • Focus first on digital altruism, mo matter how much money you have to potentially go after users’ self-interest (cash, prizes, etc.).
    Ask yourself “How does this site allow users to contribute to the greater good?” There are many ways to contribute, it could be by entertaining people, teaching them, advising or even just sharing beauty.
  • Find ways to combine other needs like reciprocity and recognition/reputation with digital altruism.
    Digital altruism can exist in an anonymous setting, but it doesn’t have to. Combining noble aspirations with the “ego needs” of your users is just fine. Just make sure never to let the self eclipse the good. You could end up with a whole lot of primadona users, each more self-centered than the next.
  • Altruism must be more than just a slogan on your site, it must be part of your mission as well.
    We can’t all start foundations and we want to make money as companies and as professionals. But if we incorporate altruism into our own companies mission and it’s a core value for our team, it will show up on the web site itself. No one wants to feel like they are working for free for some company, but if they detect shared altruism then, even if it’s unconscious, they will feel more comfortable.But be careful, users are not stupid and eventually the blogosphere reveals all. Don’t try and fake altruism, users will be able to smell it and you will eventually pay a price.

As you’ve no doubt seen in the title of this blog, dear reader, digital altruism is a concept that I plan on discussing even more in detail. This has been a basic introduction using some well-known web examples. So… there will be more. Stay tuned!

[digg=http://digg.com/educational/Digital_altruism_the_riddle_of_anonymous_online_Samaritans/to/story_on_digg]

%d bloggers like this: