Thursday, February 20, 2014

Pushing Data to Browser

Pushing Data to Browser

By Will Fox on Feb. 20, 2014

I noticed in one of the classes I take that uses as a discussion tool that changes to the page content was pushed real time without refreshing the page. This intrigued me immensely so I did some search and here is what I found out:

It's called "Push Technology", where data is pushed by the server to the browser instead of the browser pulling data from the server.

From Stackoverflow:

Q: Is there some way to PUSH data from web server to browser? Of course I am aware of Ajax, but the problem with Ajax is that the browser should poll the server frequently to find whether there is new data. This increases server load.Is there any better method (even using Ajax) other than polling the server frequently?
A1: Yes, what you're looking for is COMET Other good Google terms to search for are AJAX-push and reverse-ajax.
A2: Yes, its called Reverse Ajax or Comet. Comet is basically an umbrella term for different ways of opening long-lived HTTP requests in order to push data in real-time to a web browser. I'd recommendStreamHub Push Server, they have some cool demos and its much easier to get started with than any of the other servers. Check out the Getting Started with Comet and StreamHub Tutorial for a quick intro. You can use the Community Edition which is available to download free but limited to 20 concurrent users. The commercial version is well worth it for the support alone plus you get SSL and Desktop .NET & Java client adapters. Help is available via the Google Group, there's a good bunch of tutorials on the net and there's a GWT Comet adapter too.

A couple of frameworks that implement server pushing:

  • Direct Web Remoting (DWR): a Java lib that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible
  • Ajax Push Engine (APE): an opensource project that features a Comet server that implements the POST and GET methods of the HTTP protocol used only for AJAX Push. It also comes with a JavaScript Framework (JSF) that receives information sent by the server, handles the data, and sends back the users commands.

Tuesday, February 18, 2014

Say Hello to Learning Interface Design

A post by Dorian Peters @

Say Hello to Learning Interface Design

"So what do you do?" asks the aging hipster in the faux retro tee. "Oh, me? I'm a Learning Interface Designer.” I pause a minute to test the sound of it tripping off the tongue… sounds sexy enough. This party introduction marks the final stage in the beta testing of an emergent concept: learning interface design. Let’s take a moment to welcome the official debut of a brand new and desperately needed sub-discipline, which promises to see digital learning experiences come of age.
From university webinars and "Mathletics" in schools, to corporate eLearning, to spelling apps, learning has gone very digital. Learning is no less ubiquitous than technology and everyone at multiple points in their lives (arguably multiple points during the day) is a learner. So it's time to stop pretending learners are the same as all other users and get better at the way we design for them.
In order to go from user interface design to learning interface design, we need digital designers who have a sophisticated grasp of educational theory and educational psychology insofar as these can be applied to the design of interface and media elements.
Designers all over the world have been engaging in learning interface design (without calling it that) for projects such as employee training or educational technology, relying on tried-and-true design principles, instinct, experience, and the shared knowledge of interdisciplinary teams. Now it’s time to take it up a notch.
We haven't yet put a name on this speciality and it’s not just a style issue. Naming the art is critical to building a body of shared knowledge, encouraging desperately needed user research in the area, and working towards best practice specific to the design of interfaces for learning.
So why the fuss? Simple. The ways you employ graphics, sequence tasks, display information, use animation, provide controls for that animation, or combine narration with that animation can determine how well users will learn. If you've experienced bad online courses, you understand the pain of struggling against an obstructive interface when you're trying to learn something. On the other hand when people have a smooth, engaging, and enlightening learning experience via the Web, they may or may not notice how much the interface played a part.
It goes beyond usability. People have different requirements when they’re engaging in learning activities than they do when they’re buying something on a shopping site or information seeking on the Web. And this breaks down further: how users learn, and thus how an interface should support them, depends on their age, their level of content expertise, their previous experience, their conceptions of learning, and even potentially their learning styles. It’s a complex area and we need to start digging in.
While it's well understood that good curriculum design is foremost, and we know a lot about learning from research in the field of education (and its newer interdisciplinary sibling, the learning sciences) it’s not yet on many people's radar how critical visual and multimedia design are to success. Despite the fact that there's plenty of evidence for its influence (see Richard Mayer's work as a starting point), the front-end can still fall victim to old school prejudices that the visual design is mere decoration or not a serious contributor to the experience.
That's where a new sub-discipline needs to zip in to save the day with a new wave of specialist designers. We need learning interface designers (LIDs) to handle the recent investor craze for educational technologies. And we need LIDs for the plethora of online courses redefining universities, and for the multiplicity of learning objects, apps, multimedia materials, games, and training tools being unleashed on people of all ages in schools and outside of them.
In just a few years we should see LIDs working with instructional designers, subject matter experts, specialists in usability for learning (e.g., see Julie Dirksen's blog), together with the usual band of Information architects, developers, etc., all working as part of a learning experience design team.
But its not just formal education that seeks to benefit. Maturing our knowledge in learning interface design will inevitably improve UX design across the board. Because learning happens in small and informal ways every day and as part of other larger activities, what we learn about how to design for learning can inform our design of everything else. As an example, see basic learning theory applied to the design of e-commerce sites in the July issue of A List Apart.
With any luck, we’ll find a host of LIDs showcasing their work in design mags in the not too distant future. Until then, take note of what you learn today digitally, and ask yourself this question: did I learn something in spite of the way this was designed, or because of it? Could we be doing this even better?


User Profile
Dorian cultivates best practice in the design of digital spaces for learning & wellbeing.  She currently directs online strategy for the Faculty of Education at the University of Sydney. She is also a member of CoCo (the Centre for Research on Computer Supported Learning & Cognition).  You can find out more about her work at and

UX for Learning: Design Guidelines for the Learner Experience

A post by Dorian Peters @

UX for Learning: Design Guidelines for the Learner Experience

Published: July 24, 2012
“With educational applications for kids, corporate eLearning, and online degree programs, more and more UX designers face design briefs for creating digital experiences with an educational purpose.”
With educational applications for kids, corporate eLearning, and online degree programs, more and more UX designers face design briefs for creating digital experiences with an educational purpose. Other applications, whether they’re new or launching new features, often present micro-learning experiences that gently teach users how to use the software.
But as UX designers, how much do we really know about how people learn? And does design really affect learning?
Absolutely. Research shows that user interface and interaction design decisions significantly affect how well users learn. For a manifesto on that topic, see my article “Say Hello to Learning Interface Design.”Nevertheless, for the most part, we go into these projects armed with a wealth of UX knowledge about how people use technology, but without any sound knowledge about how people learn.
In this article, I’ll begin to fill that gap by presenting some design guidelines that derive from key findings from relevant psychology and education research on learning with technology. These findings relate specifically to user interface and interaction design for digital learning experiences. I’ve drawn most of these guidelines from the pioneering work of educational psychologist Richard E. Mayer, whose discoveries form the foundation of much multimedia instruction today.

What Is Learning Experience Design (LXD)?

“A big part of LXD is designing a user interface in a way that supports and enhances the cognitive and affective processes that learning involves.”
In much of design, we aim to craft a user experience that meets business or communication goals. In learning experience design, the goal is to help someone learn something. It’s about improving learning outcomes and the quality of the learning experience. A big part of LXD is designing a user interface in a way that supports and enhances the cognitive and affective processes that learning involves.

A View of the Landscape: Examples of Digital Learning

Digital user interfaces for learning include digital environments, technologies, and tools. Specific examples include:
  • learning objects—These are self-contained experiences based on just one learning objective. Users can use them as needed or combine them for a more complete course. You’ll find a slew of these at The Learning Federation.
  • educational games and simulations—Computer games designed around educational goals—like Global Conflicts and the NASA gameMoonbase Alpha—are called serious games.
  • Learning Management Systems (LMS)—These large software systems manage tens or even thousands of courses and students. They provide tools for course portals, assessment, and synchronous and asynchronous interactions. Examples include Blackboard, Coursera, shown in Figure 1, and the open-source LMS Moodle.
  • synchronous collaborative learning spaces—Virtual spaces in which learners get together in real time. These might include video, chat, shared whiteboards, note taking, and wikis. Two examples are Adobe Connect, shown in Figure 2, and KnowledgeForum.
  • Intelligent Tutoring Systems (ITS)—These computer systems provide customized feedback to students without human intervention—for example, AutoTutor, shown in Figure 3, and DeepTutor.
  • corporate eLearning courseware—Companies deliver courses via digital technology to teach their employees workplace skills like how to use software or soft skills such as customer service or sales strategy. Examples include Savv-e, shown in Figure 4, and ClearlyTrained.
  • 3D Virtual Learning Environments (VLEs)—Purpose-built, 3D worlds like JumpStart and Virtual Singapora, shown in Figure 5, structure learning. Learning of all types of subjects—from math to drama—also takes place in off-the-shelf worlds like Second Life.
  • mobile learning applications—There is a list of mobile learning applications for children at “Smart Apps for Kids.” Figure 5 shows an example, PBS Kids.
Figure 1—Coursera
Figure 2—Adobe Connect
Adobe Connect
Figure 3—AutoTutor
Figure 4—Savv-e
Figure 5—Virtual Singapora
Virtual Singapora
Figure 6—PBS Kids mobile learning applications
PBS Kids mobile learning applications

Guidelines for the Design of Learning Interfaces

“Extraneous visuals are especially problematic in regard to learning. … Extraneous imagery adds to cognitive load.”
Here is a summary of guidelines that relate specifically to user interface design from the larger set of findings by Richard E. Mayer.

1. The multimedia principle: People learn better from a combination of text and visuals rather than text alone.

This is not exactly breaking news for visual designers, but it’s important to know that the inclusion of visuals is not just nice; it improves learning. Visuals might include illustrations, photos, infographics, diagrams, or comparative charts, as well as videos or animations. Text refers to both written text and audio. Having said this, I must note that it’s necessary to design combinations of text and visuals properly to yield learning advantages.

2. Graphics should be relevant, not merely decorative.

Extraneous visuals are especially problematic in regard to learning. While it might be tempting to load up a lesson on global warming with various photos of natural wonders to enhance its visual appeal, extraneous imagery adds to cognitive load. Whatever portion of users’ brain power goes into processing these photos is unavailable for learning. This doesn’t mean a user interface can’t be beautiful. But find ways of guiding visual focus to what matters and lean toward minimalism when in doubt.
Mayer’s findings refer not to graphic user interface (GUI) design, but to graphics that serve as an adjunct to text—such as images that accompany the text of a lesson. In this case, steer away from decorative or representational graphics—for example, generic stock photos—and instead focus on providing explanatory graphics that help the learner process and interpret information, including:
  • relational graphics—like comparative graphs or interactive systems models
  • graphic organizers—which structure the concepts a lesson’s text discusses
  • transitional graphics—which show change over time
  • graphics showing things that would otherwise be invisible—for example, an atomic structure, greenhouse gas flow, or the global movement of money
  • graphics that help place learning in context—for example, a GUI metaphor or virtual world

3. Use animations to teach physical procedures and still images to teach processes.

“People learn physical procedures … better by watching videos or animations. In contrast, they learn conceptual processes … better when they are illustrated by a series of static images.”
People learn physical procedures—such as how to fold origami, assemble a piece of furniture, or tie a square knot—better by watching videos or animations. In contrast, they learn conceptual processes—for example, how rain forms—better when they are illustrated by a series of static images. Apparently, this is because, from early in human evolution, we’ve been hardwired to learn motor skills by observation. The understanding of complex processes, however, is not quite so primal. In this case, an animation does too much of the work for us and removes pacing out of our control, so we become passive viewers. In contrast, a series of static images requires us to make logical connections between them, which helps us to learn, and we can do this at our own pace.

4. To promote understanding, simplify visuals or make them abstract.

People learn processes and principles better from simplified visuals. For example, simple line drawings that illustrate a process such as cellular mitosis are generally better than a series of photos showing the real thing in microscopic imagery. A computer animation that omits extraneous background detail is simpler than a video that shows everything. However, there are likely to be some exceptions—for example, advanced practice—that call for highly realistic simulations such as in aircraft simulators.

5. Don’t separate related text and visuals.

In line with the basic design principle of proximity, learning research has shown that people learn better when text relating to an image appears near that image. As obvious as it sounds, designers often violate this guideline. For example, rather than adding a list of labels to a diagram’s caption, create callouts, drawing lines to various parts of the diagram and labeling those parts directly; and rather than providing feedback for an incorrect answer at the bottom of a screen, include it beside the learner’s answer.
Also, include an explanation in the form of a narration whenever possible. If you can’t use narration, provide text for learners to readbefore playing a video. While you can present these on the same screen, avoid having text appear on a screen at the same time a video or animation is running. That would be too much visual information for learners to take in at once.

6. Use virtual agents to deliver instructional content.

“People learn better when they perceive social presence.”
Research shows that people learn better when they perceive social presence. For this reason, using a conversational tone in first or second person increases learning. We are hardwired to pay more active attention when we’re dealing with human beings rather than machines. This is probably why virtual coaches, tutors, characters, or avatars help people learn. Keep in mind that you should use agents for instruction, notentertainment. Agents are good for providing hints, explanations, and demonstrations, but you need to use them sparingly to prevent their becoming irritating.
Interestingly, realistic characters are not more effective instructors than cartoon characters. In fact, an agent does not even need to be visible, as long as learners hear a voice. Also, a voice should be a human voice rather than a machine voice. So don’t blow your budget on a 3D animated avatar with a robotic voice. A simple illustration with a human-voice narration—regardless of whether that human is visible—is enough for learning gains. As a final note, while having a realistic human appearanceis not necessary, learners do benefit from agents who exhibit realistic human behavior such as human-like eye gaze and gesturing.

7. Break complex information into chunks and provide pre-training.

Two basic ways of managing complex information are either to break it into segments, or chunks, or to extract difficult terms or key concepts and deal with those first, which is called pre-trainingSegmenting means breaking content into parts that deal with just one, two, or three steps or concepts at a time. provides a wonderful library of training courses on everything that relates to the Web. If you haven’t already seen the site, it’s well worth a visit. Their instructional approach is to provide high-quality videos of best practices or software training. This works well because video is a good medium for demonstrating procedures. They manage complexity, and give users control over the pacing, by breaking each course up into bite-sized concept chunks. This also means people can select and review just the bits they need when they need them.

8. Avoid irrelevant video, audio, stories, and text.

Research shows that adding sidebar stories for the sake of interest hurts learning. It may seem sensible to spice up a lesson on the physics of lightning with a sidebar on the world-record holder for the most lightning hits. However, research has proven that this is not a good idea. The message here is to focus on what is inherently interesting about the content rather than adding extraneous detail—especially if specific learning goals are at stake. Along these lines, adding music or audio to learning experiences for ambiance impairs learning.

9. Set learning in a real-world context to facilitate knowledge transfer.

“The closer a learning experience is to a real-world context, the more likely learners will be able to transfer what they’ve learned to the real world.”
The closer a learning experience is to a real-world context, the more likely learners will be able to transfer what they’ve learned to the real world. One criticism of video games for learning stems from their low transfer rates—skills people learn in the game world don’t transfer to the real world. One company thought a corporate orientation game set in a sci-fi world would have greater appeal. However, in reality, it had little uptake because learners couldn’t see its relevance. Moreover, learners would be unlikely to transfer concepts they learned in such an environment back to the real world, because there would be no contextual cues embedded in the learning.
If people need to adapt the skills they’re learning to multiple environments and diverse circumstances, include examples set in more than one context. When you expose learners to multiple contexts, they are better able to extract essential principles and transfer them to various real-world scenarios.

10. Provide informative feedback.

Avoid providing feedback that sounds personal or draws attention to the self instead of the task—for example, “good job” or “you got that wrong.” Also, avoid giving feedback that is uninformative like “correct” or “incorrect.” While an instructional designer writes the feedback, as a user interface designer, you need to design space in the interface for rich forms of feedback, remembering to place answers near the questions to which they refer.

11. Choose your tools based on learning activities.

Different types of tools are most effective for different types of learning activities. For example, asynchronous communication tools that allow interaction over time—such as discussion forums—are well suited to learning experiences that require reflection or independent research. Synchronous tools like chat or live online classroom sessions are well suited to experiences that benefit from group synergy and social presence.

12. Know when to give learners control.

“Allow learners to control their pace through a learning experience. Give them video and animation controls, let them review previous content, and allow them to exit at any time.”
Allow learners to control their pace through a learning experience. Give them video and animation controls, let them review previous content, and allow them to exit at any time. However, you should be more careful about giving learners control of the sequence of instruction.
Research shows that novices are not able to effectively design their own path through non-linear content or decide how much practice they require. This impacts how you design both navigation and information architecture. You should allow learners choices regarding what topics to read or activities to do only if they have prior knowledge, in advanced courses, when chunks of content are not interdependent, or when designing a learning experience to be supportive and informational rather than for skill building. Along these lines, research shows that unguided exploratory learning is not effective for achieving specific learning outcomes.

13. Design learning games and simulations in strict alignment with learning goals.

The recent trend in gamification has led to the assumption that adding badges, rewards, and scoreboards to just about anything makes it a game. The main point to take away from games and learning is the notion of extrinsic versus intrinsic motivation. While it’s tempting to think that adding game rewards and goals would increase learners’ motivation and thus help them to learn better, you have to ask what is motivation about? Are people more motivated by learning a topic or by collecting points?
In fact, research has shown that learning does not improve when a learner’s focus is on game goals rather than learning goals. You could have learners practice and teach them facts by placing them in a virtual Jeopardy-style game show, but this would decontextualize the knowledge making it unlikely to transfer. Effective learning games retain contextual cues, align game goals with learning goals, and drive interest with intrinsic motivation. More on that later.

14. Be aware of the expertise reversal effect.

“Experts are more flexible and can learn just as well from text alone as they can from a combination of text and visuals.”
A major caveat to everything I’ve said so far is that the rules break down when it comes to experts. This is known in the research world as theexpertise reversal effect. In essence, all of the guidelines I’ve provided are especially important for novices. If you’re teaching biology or management skills to non-experts, everything applies. However, if you’re teaching advanced concepts in biology to a doctor or management strategy to a CEO, these rules may not apply. Such design decisions usually make less impact on such people. Experts are more flexible and can learn just as well from text alone as they can from a combination of text and visuals. Experts don’t need information to be chunked, and they can handle having more control over their instruction.
In general, following design guidelines that benefit non-experts won’t negatively impact experts. However, in a few cases, the rules for designing for novices do actually decrease learning outcomes for experts. Therefore, if you’re designing for an audience of experts, it’s worth reading more about their unique requirements—first, in Clark and Mayer’s book; second, by looking up the research on the expertise reversal effect.

Unleash Intrinsic Motivation

“Motivation is key in learning.”
Motivation is key in learning. Therefore, when considering approaches to digital learning, it’s worth giving motivation some extra attention. In addition to the points I made earlier about the pitfalls of gamification and the limits of extrinsic motivation, I want to focus now on how UX professionals can become more creative about uncovering intrinsic motivation.
Too often, intrinsic motivation gets skimmed over in digital learning design, but UX professionals are just the right people to tackle this. It takes empathy, ideation, and a knack for storytelling. One prevalent example is kids and literacy. The market abounds with drill and practice software for spelling and phonics. But imposing extrinsic motivation in the form of points, competition, and speed rounds has obvious limitations. Can’t we do better?
We need to ask ourselves the question: what is inherently motivating about reading and writing? The answer? There are many motivations: storytelling, engagement with characters, self-expression. Kids get wildly excited by Harry Potter. They use social media to tell the stories of their own lives. How can we tap into this kind of motivation, which is so much more powerful than badges and scores, to help teach literacy skills? Might we place spelling words in stores instead of random sentences? Could we ask students to write a letter to Hogwarts rather than just fill in a template? Could we design collaborative, global story-writing activities so all children, even lower-ability writers, could be part of something special? Could we ask famous writers to contribute?
The point is, while the onus of activity design rests with teachers and instructional designers, there may be times when UX designers have an opportunity to contribute to effective learning. In these cases, challenge your team to go beyond extrinsic motivation and tap into the heart of intrinsic motivation—what intrinsically makes your topic exciting.

Going Deeper

As I’m sure you’ve guessed, there is a lot more to designing for learning than what I’ve presented here. The trouble is, much of what is known is buried in academic research. If designing for learning is a significant part of your job, here’s where to turn next to enrich your credentials:
  • Read the book. For a complete list of principles, examples, and in-depth explanations of the psychology behind them, read Mayer and Clark’s book E-learning and the Science of Instruction.
  • Follow my blog. I have been posting information on LXD on my blog,Learning Interface Design, regularly since 2005.
  • Read the research. Keep up with new publications on this research topic by following or joining the Learning Interface Design research-sharing community on Mendeley.

In Conclusion

These guidelines provide a solid start to informing our practice of the design of learning experiences. As digital learning continues to enrich and, in some cases, even displace traditional learning strategies, I anticipate that a rigorous field of research and best practices that focus specifically on the design of user interfaces and experiences for learning will begin to develop.

Friday, February 14, 2014

Solved by Flexbox

A post by Philip Walton @


CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.
Finally, thanks to Flexbox, we have a solution.
This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.
Check out the demos below. View the styles in the Web inspector or dive into the source to see just how easy CSS layout will become once Flexbox becomes mainstream.


  • Better, Simpler Grids

    Better, Simpler Grids

    Flexbox gives us most of the features we want from a grid system out of the box. And sizing and alignment are just one or two properties away.

  • Media Object

    The Media Object

    Create media objects with fixed or varying figure sizes without worrying about overflow, clearfixing, or block formatting context hacks.

  • Input Add-ons

    Input Add-ons

    Creating full-width, fluid input/button pairs has been impossible for most of the history of CSS. With Flexbox it couldn't be easier.

  • Sticky Footer

    Sticky Footer

    Getting your footer to stick to the bottom of sparsely contented pages has always been tricky. And if the footer's height is unknown, it's basically impossible. Not so anymore.

  • Holy Grail Layout

    Holy Grail Layout

    This classic problem has been challenging CSS hackers for years, yet none of the historical solutions have fully solved it. With Flexbox, it's finally possible.

  • Vertical Centering

    Vertical Centering

    A lack of proper vertical centering has been the butt of almost every CSS joke ever told. While it's technically always been mostly possible, it's never been very intuitive — until now.

Browser Support

  • Chrome
  • Opera
  • Firefox
  • Safari
  • IE

Caveats and Known Issues

  • IE 10 has Flexbox support but for a draft version of the current spec: (display:flexbox).
  • Safari 6 and earlier support the original Flexbox syntax, which is now obsolete: (display:box).
  • Firefox 27 and earlier do not support multi-line flexboxes. See this bug for more details.
  • For a full browser support comparison, check out

About the Code

In addition to showcasing the power of Flexbox, this site also aims to be an example of modern CSS design and architectural practices. Namely modular, reusable style rules built on a predictable and testable naming convention.
All of the CSS code in these examples make use of the SUIT naming conventions developed by Nicolas Gallagherand are based on OOCSS and BEM methodologies. Each example includes one or more reuseable CSS components allowing you to adapt or copy these patterns in to your own projects. Links are provided to their respective components on each example page.
This site also uses the excellent autoprefixer library by Andrey Sitnik, which takes care of vendor prefixing the CSS, so you don't have to think about it.
If you find a mistake or would like to suggest an additional example, feel free to open an issue or submit a pull request on Github.