Learn Strategies for Better Interface Design for Learning

Eminent eLearning Coach, Connie Malamed is also a master of graphic design in the eLearning context. I had the honor of being invited onto her podcast to talk about how interface designs impact learning. Her show is a gift to the industry offering a wealth of insight from experts in a broad range of areas.

In my interview, we cover the user interface, video, social learning and community building, how to cut cognitive load in graphics,  how to support visual perception effectively, and the surprising findings about emotions and learning.

Subscribe to her podcast or head direct to the episode 16: Strategies that Improve the Interface to Learning.

image source: WebIconSet.com

Gaming for science

Supporting cancer research is undoubtedly important, but playing computer puzzle games is undoubtedly more fun.  The makers of Foldit have literally managed to combine the two by building a game around the problem of deciphering protein structures, and then letting this scientific challenge loose on the world.

Fold-It takes crowdsourcing and educational gaming up a serious notch. Not only do budding scientists (or the armchair variety like myself) get to learn about what it takes to fold a protein, they get to be part of serious research and discovery.  In fact, it has already worked.

In 2011, FoldIt players deciphered the crystal structure of the Mason-Pfizer monkey virus, marking the game's first major scientific discovery.  Overtime, players could conceivably make discoveries that contribute to treatments for AIDS, Alzheimer's, or to better biofuels.  No, mom, I really am saving the world.

Foldit is just one of many interesting jewels spawned at the University of Washington's Centre for Game Science, which "focuses on solving hard problems facing humanity today in a game based environment".  Now, that's what I'm talkin' about. They do this, primarily, by combining what computers do best with what humans do best (creative puzzle solving, for example, which is leveraged en masse with Foldit).   So go play their other games.  No guilt required.

Elegant activism - Infographics at Bashir Watch

BashirWatch.org is an impeccably crafted site that succeeds in allowing users to explore difficult but important information in ways that add clarity and interest.  Bashir Watch is an organization promoting the prompt arrest of Omar Bashir, the Sudanese leader behind the genocide in Darfur.  There is a warrant for his arrest issued by the International Criminal Court for multiple counts of human rights abuses but he remains free. 

The message of the site is utterly to the point, and they take care to present users with the facts that back it up. They balance clean text and carefully selected imagery in a deliberately restrained way that never overwhelms. Like an increasing number of sites today, they have opted for one scrolling page, which makes it easier to casually move through more information without the "commitment" of a click.

But what's most interesting for learning interface designers are their information visualizations, including an elegant interactive timeline, which can be explored in multiple ways, and an interactive travel map with hotspots to drill down to detail.  Check it out (and sign the petition).

Extreme Accessibility - How to save lives with eLearning

Far from the typical audience of corporate or university eLearning, Thare Machi Education designs lessons on topics like human trafficking and cholera for learners who are extremely poor, mostly illiterate, totally unfamiliar with technology and speak hundreds of different languages.  How's that for a brief?

On Memory and the Life of Maps

There are so many childhood objects that leave indelible marks as one grows up, from the microscope that gives you a secret window into invisible worlds, to the medical kit which made you a superhero with the power to fix people.  In his articles, The gears from my childhood, renowned MIT professor and educational technologist, Seymour Papert, explains how playing with and loving gears gave him a conceptual model that lasted a lifetime.

Upon undertaking a mental hunt for influential childhood objects myself, I ended up in a kind of serenade to maps and memory.  Rote memorization is nearly tabooed in these days of Active Learning and Google access (and with good reason).  But what I learned from maps is that, perhaps, there's a modest place for it yet...

ELearning for Healthy Minds

A growing number of learning programs dedicated to psychological wellbeing are finding their way into schools and workplaces across the globe.  This is probably due, in part, to the concern over technology-induced stress and mounting scientific support for the value of practices like mindfulness and meditation.

This new type of education has begun to manifest digitally in the form of mobile and web programs like MoodGym and the Mindfulness app.  Wellbeing programs, including the myriad that target physical health, often leverage personal analytics and visualizations to support reflection.

The recently launched, Smiling Mind, boasts an elegant, welcoming, and cleverly all-ages appropriate interface design.  This program of "modern meditation for young people" is sponsored by non-profit organizations like the Inspire Foundation, leaders in psychology interventions for young people.   It's entirely free, so why not try it on for size, or share it with someone in your family.

Technology designed to support wellbeing (which certainly isn't always a learning program) is referred to collectively as Positive Computing.  You can find out more about the field at PositiveComputing.org.

Caution: Color, culture and convention

As designers of learning experiences, we know that color can have a powerful impact on learning. It can improve recall, understanding and appeal when used well. But it's easy to forget how culturally embedded color meanings are.  Americans, for example, can forget green is only the color of money in the US. While red indicates debt and downturns in the financial world, it's prosperity in China. And just as white is for weddings in some countries, its reserved for funerals in others.

Even within one region, different interest groups or industries may have different associations for color.  So, to avoid color faux pas, know your audience. Then check out a color symbolism list or book, or enjoy David McCandless’ cultural color wheel for an elegant visualization of the meaning behind colours in various cultures.

TocaDoctor - An Irresistible Ed App Interface

Toca Doctor is so gorgeous I had to blog it.  With its retro chic style, adults are transported while kids have the bright aquas, pinks and yellows to guide them through a collection of quirky doctor puzzles.  Move the germ through the brain maze and out of the nose, pull the thorns from a sore foot, or mop up and bandage an abrasion.  Instructions are clear, and function without words.  this app is delightful to use and is also a lovely example of how a restrained but vibrant color palette can be used effectively, even for kids.

UX and UI for eLearning - Presentations online

The eLearning Guild recently hosted an online forum on Graphic design and UX/UI design for eLearning.  One of the highlights for me was the talk by Erin Sappington Kreb and John-Carlos Lozano of SweetRush.  Their slides were impeccable and their advice well communicated.

In a later session I presented a series of research-based guidelines for eLearning interfaces to a dynamic audience of instructional designers, managers and visual designers who made a wonderful momentary community, sharing ideas and experiences.

You can still view presentation recordings on the eLearning Guild Website.

Connie Malamed - Visual Design and eLearning

If you don't know her work already, Connie Malamed, author of Visual Language for Designers combines expertise in both eLearning and Visual Design and as such, is a great source of knowledge for the eLearning Interface Designer.

Check out her high quality articles at E-learning Coach, some of which relate specifically to eLearning Interface Design.  For example...

• Using graphics to improve learning
• 5 ways to use graphics in eLearning Scenarios
• Realistic graphics and learning: What's most effective?
• How to create a visual hierarchy

She also gave a presentation on visual design for the eLearning Guild and it's available free to view.

Design for a wiser world

Rich learning experiences can help us grow in wisdom as well as in knowledge and capacity. While many are wringing their hands at the perceived negative effects of technology, Positive Computing opens the door to a future in which human-centred design evolves to a kind of humanity-centred design.  The Interactions feature article "Positive Computing: Technology for a wiser world" explores both a vision and point of practical departure for a future in which technology is actively designed to support wellbeing and wisdom.

View article.

Seminar on Visualization for Science Education

Heads up on the following seminar on how visualizations can be leveraged for science learning...

Making Sense of Science through Visualization will be presented by Roy Tasker  on  20 April 2012, 11-12pm  at The University of Sydney.
 A deep understanding of chemistry requires the ability to imagine the invisible molecular world to explain the observable world. Only then do abstract chemical formulas and equations become meaningful communication, and fundamental concepts become ‘internalised’. Indeed, all sciences require seamless movement between observable, imagined and symbolic thinking levels. Thinking at these levels can be facilitated through learning designs – sequences of learning activities with specific learning outcomes.  More info at the Institute for Innovation in Science & Mathematics Education.

Francotoile - language learning with video

FrancoToile is a showcase in presentation simplicity. It's a resource for French language learners, created  in Canada that leverages what web video has to offer to expose learners to the various sounds, dialects and slang of native French speakers from diverse communities across the globe.

Turn to the sherpa

Check out this highly informative, expertly crafted (and so pretty it's like dessert) new web publication: The Web Standards Sherpa.  "Journeying towards best web practices."  Everything here can be applied to the design of web-based learning environments.

Time management principle for design

Design is about details.  But then it's also about deadlines.  As such, I have developed this tenet to keep me focused...

"I vow to cultivate the discipline to not spend time on the details that don't matter, the patience to spend time on the details that do, and the professionalism to know the difference."

Thus today I will not double proofread my chats, or spend hours crafting email witticisms that only I will be impressed with, but I will do what it takes to get that alignment just right and not give up on my dizzying quest for proof of what works.

[Credit, of course, to Reinhold Niebuhr for the famous serenity original.]

Design inspiration: Naughtyfish

For utterly standout and inspired design, check out the work of Naughtyfish.
Including...

• The greed poster and the Africa poster for something immediately different, captivating, raw and effective.
• The Ordinary Day booklet for an inspiring approach to the use of photography that privliges mood and sophisticated emotion over the usual canned and oversaturated stock landscapes.
• And Sweet Little Things for guaranteed joy.

Not to mention, everything else they've done...

7 ideas for designing your own Prezi template

Powerpoint going stale in the cupboard? Boss banging on your door for a Prezi template?  I hear ya.  But how can you create a consistent look and feel to represent your organisation that isn't too restrictive, and in a program that breaks all the rules?!

Prezi has a growing bank of reusable prezis but these are pretty content specific.  So how to make a compelling and generic corporate Prezi template? There are no right answers yet, but here are some starting points.

Here are 7 approaches to the design of your own Prezi template to get the juices flowing...

When to use animations for learning

picture credit: Yamaggio

You get one of those sudden urges to learn how to poach an egg or make an origami jedi master and what’s the first thing you do? I’m guessing, being the modern nerd that you are, you google for a video demo.  We’ve taken to using resources like YouTube to teach us things. Why are we drawn to learning by watching and when does it actually work?

The research into using animations vs. still pictures for learning is ongoing and there is no simple answer to the question “what’s better?”.  It depends on what’s being taught, who’s learning and what the context is.  Sound like a cop out?  Not at all, it just means we’re complex animals and you have to think a bit harder to get your answer.  But the answers are there. For example, there is very strong evidence that animations are much better at teaching human movement tasks...

Interactive graphics and HTML5

The promise of graphics that can change on the fly as users adjust them or enter data is delightfully web-appropriate.  People do it, but it's not excessively common-place for the same age-old reasons of browser incompatibility and scripting required.  The famous HTML5 "canvas" tag aims to allow browsers to handle interactive graphics natively.  Nice!  But what about Scaleable Vector Graphics? With all the advantages of XML, why didn't SVG ever get people excited?  The HTML5 team have chosen Canvas+JavaScript over SVG to manage changeable graphics.  But browser support is about the same between the two, so if you really want a pretty dynamic chart that changes when your users play with it, which should you use today?

Head to the excellent SitePoint article "SVG or Canvas" - How to choose the right format" for some elucidation on what the differences are.

For a more complete primer on HTML5 that is just the right length, and very entertaining (no really), I highly recommend HTML5 for Web Designers by Jeremy Keith.

Space for learning

According to psychological studies, even small differences in distance and spacing can have a strong impact on a person's sense of security and their attitude towards what they are doing. The studies triggered different emotions by asking subjects to do something as subtle as drawing dots on paper closer or farther apart.  The difference in the distance between a person's dots statistically affected their attitudes towards something they read afterwards.   This would surely point us to the importance of layout and white space in our digital learning environments.  If we want learners to feel relaxed and positive about the task at hand, including sufficient whitespace is now supported by emotions research as well as by good usability guidelines. More in the Scientific American Mind article  "Arranging for Serenity: How Physical Space and Emotion Intersect".