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.

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

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

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.

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:

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.

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

UOC UNESCO Chair in E-Learning 5th International Seminar: Fighting the Digital Divide through Education

Sclipo is proudly providing open attendance to the UOC UNESCO Chair in E-Learning 5th International Seminar on “Fighting the Digital Divide through Education.” The conference began on Wednesday and if your interested there’s still one day left. Just follow the link above to the Live Web Classroom.

I can only help but feel that such a streaming collaboration is perfect for Sclipo, where are goal is no less than to ignite a social learning revolution (power to the people teachers!) As Gandhi said, “Be the change you seek…” so we are putting our bandwith where our mouths are (painful mixed metaphor, sorry) for a very worthy cause.

It’s also fitting that Sclipo can aid the bridging of the digital divide using our Live Web Classroom, a tool designed to make online education rich, interactive and rewarding for teachers and students alike by combining live webcam, documents, video and even an interactive whiteboard. Talkin’ about a revolution!

For those of you keeping score, this is the second major conference Sclipo’s provided digital access to, the second of hopefully many to come. Though between you and I, dear reader, let’s all hope that not many more conference’s on the digital divide will be needed. Let’s hope we can take advantage of the world’s post-Obama optimism to make real progress on this issue.

Sclipo's Live Web Classroom

It’s been a tough week. I’ve been sick but thanks to the valiant effort of the rest of the team (Edwin, Victor, Gregor…), and some couch-based work on my part, we managed to launch the alpha version of Sclipo’s Live Web Classrooms just in time for the Moodlemoot in Barcelona, this year’s official conference for Moodle in Spain.

Though the Live Web Classroom is still in its early stages, we’ve been thrilled with the reaction from the conference participants and the other members of the world-wide Moodle community who have used the classroom to attend virtually. Everyone was been really positive and it’s wonderful to be appreciated.

Speaking of the comunity, having led some virtual communities of my own, I must say I’m really impressed by the passion the Moodlers bring to their project. Getting to know them has been wonderful and I can’t think of a better way to launch to virtual classroom. Now if I could only shake this nagging cough…

Sclipo is featured in a recent article on social networking sites founded in Barcelona.

Expansion.com had a nice article this morning on how Barcelona has given birth to specialized social networking start-ups and Sclipo got a nice mention at the end. Read the article in Spanish or in machine-translated English.

It’s always nice when a serious news source confirms something you’ve been suspecting for a while: we lucky webby people are living in the city’s gold-age in terms of start-ups. Interesting projects are around every corner and the city itself has reached a level of branding as a great place to live and work that it’s actually starting to attract talent on its own. BCN has been a hot town for tourism for years (much to the detriment of many of her actual residents), but it has only recently become a hot bed of web talent, start-ups and entrepreneurship.

Don’t get me wrong, Madrid has it’s outstanding start-ups as well, but it still gives off that “corporate headquarters” vibe. The Spanish capital may have eBay, Microsoft et al but Catalonia has its plucky underdogs turn ideas into Internet gold. Come to think of it, the current status quo fits nicely into the overaching themes of Spanish history.