Your Source for Learning
Technology, Strategy, and News
ARTICLES       RSS feed RSS feed

Designing mLearning UIs with Blueprint

by Mayra Villar

November 12, 2012

Feature

by Mayra Villar

November 12, 2012

“The transition from eLearning to mLearning proceeds through constant innovation and experimentation, and tools like Blueprint can help us get creativity started. Therefore, don´t be afraid to leave old patterns.”

Using traditional instructional templates for mLearning or forcing old eLearning courses into mobile devices is like standing on the peak of a high mountain and just looking at the ground under your feet. If you don’t dare to raise your eyes and look beyond the obvious, you will miss the whole landscape; you will miss the full potential of that single, unique experience.

After years of designing learning experiences for the desktop, we, as instructional designers and eLearning developers, are used to deeply rooted theoretical assumptions and standard templates that were conceived in the PC times. We thought they would target a sort of perfect learner in an ideal situation: the comfortable quietness of a desk.

However, nowadays, connected mobile learners have new expectations, habits, and preferences that make us rethink our practices in order to effectively tackle the challenge of mLearning design. For this reason, we need to reinvent conventional models, acquire new skills to cater for those needs, and offer engaging experiences through mobile devices.    

Rethinking the user experience

There has been much discussion about the difficulties of implementing mobile learning solutions in the workplace. Some of the most common problems include the ongoing debate about whether it is better to use Flash or HTML5, the tension between HMTL5 and native apps, different platforms and different screen dimensions, security and tracking issues, infrastructure and management, and the impact of BYOD (“bring your own device”) in corporate settings. We also need to acknowledge that the most popular authoring tools like Articulate Storyline, Adobe Captivate, and Lectora cannot yet offer us the benefits of responsive design to deploy content across multiple screens, or the possibility of experimenting with mobile device orientations (GoMo 1.6 could take the lead in this regard).

However, it is not my intention to address any of these topics here. Not because they are not important, but because I prefer to bring something new into the discussion: once your organization has successfully overcome all the initial concerns and is ready to pursue a mobile learning strategy, how do instructional designers approach content creation or conversion to offer a mobile-enabled learning initiative?

Our job involves processing and presenting information in a meaningful way, creating purposeful interactions between content and learners in order to facilitate a task completion, and putting forward creative solutions to support skill acquisition or behavioral change. The most suitable approach depends heavily on each training need and its specific context, but at some point, we all will face the challenge of creating mLearning solutions either from scratch or from legacy content.

In any case, we´ll need to consider some fundamental guidelines for mobile user experience (UX) design:

  • Luke Wroblewski: “Remove extraneous actions and let users focus on their primary task.” (See References at the end of this article.)
  • Minimize the interactivity, because the interactivity is the environment where we are deploying the device.
  • Make it brief and straight to the point. Designers should organize content in small chunks and focus on the most relevant facts and pieces of information.
  • Leverage mobile users’ most common behaviors to promote learning. Learners use mobile devices to search, get informed, and connect with others.

User interface (UI) prototyping with a mobile app: Blueprint

I completely agree with Julian Stodd when he said “If we try to develop a mindset for mobile whilst applying the same rules that we already use, we will simply create a distribution channel, but mobile should be so much more than that.” Therefore, when we are designing for mobile, we´ll need new UI/UX design patterns and techniques that allow us to reorganize the content and create the type of interactions that really meet the expectations of mobile users.

To achieve that, I try to get away from MS Word and PowerPoint and any other desktop applications to plan my mLearning solution. Instead, I use a mobile tool that can make me experience the power of playing with information and transforming knowledge with my fingertips: groosoft’s Blueprint. (Editor’s note: Blueprint, Blueprint Lite, and Blueprint Viewer run only on iOS devices.)

Amazing creation assets

Blueprint provides a very complete library of iOS widgets (buttons, navigation bars, tab bars, tables, icons, etc.). You can fully customize all these widgets, import your own pictures in your design, and even use the built-in drawing tool to illustrate your ideas. Just by dragging and dropping elements onto each screen, you can design a user interface for iOS mobile devices (Figures 1, 2, and 3).

 

Figure 1: Text formatting options

 

Figure 2: A complete library of iOS widgets

 

Figure 3: Built-in drawing tool

High-fidelity prototypes

You can customize the objects in your design by adjusting all their properties, and you can assign each object an action: a tap, a double tap, or a swipe (Figures 4 and 5). I find this feature particularly interesting, as it helps me to create common gesture-based interactions for touchscreen interfaces and to never forget that I am designing for mobile. By assigning actions to different objects, you create links between different screens. In Play mode, you will be able to test a clickable prototype of your application workflow (Figure 6).

 

Figure 4: Assigning actions to each object

 

Figure 5: Configuration setting for each action

 

Figure 6: Display of application workflow

Collaboration possibilities

When your prototype is ready, you can email it, export it to PDF and PNG file formats, or use Dropbox to get feedback from your team, clients, or target audience. Your contacts can also test the prototype by downloading Blueprint Viewer, which is a free iPad app. Once your prototype is approved, you can try to recreate as closely as possible the instructional and graphic designs by using your favorite learning authoring tool.

Converting eLearning to mLearning

As a rounding off, I´d like to share with you these images (Figures 7, 8, and 9) that show how I converted an existing eLearning course (illustrated by sketches created with Mockup Builder) into a mobile learning solution by using Blueprint and the mobile UX guidelines I mentioned above:

 

 

Figure 7: Content is in small chunks that focus on the most relevant facts

Figure 8: The design removes all the extra screens and unnecessary pieces of information

 

Figure 9: This solution facilitates access to information as well as social interactions

Final thoughts

Prototyping is just the first step towards the real solution, but I think it’s a crucial step towards the adoption of a new vision and techniques to approach mLearning design. The transition from eLearning to mLearning proceeds through constant innovation and experimentation, and tools like Blueprint can help us get creativity started. Therefore, don’t be afraid to leave old patterns. I challenge you to use your mobile devices to create new prototypes, explore original ideas, and test different approaches until you come up with an engaging learning solution that matches mobile learners’ real expectations and needs.

References

Wroblewski, Luke. (2011) Mobile First. New York: A Book Apart, LLC.


Topics Covered

(42)
Appreciate this!
Google Plusone Twitter LinkedIn Facebook Email Print
Comments

Login or subscribe to comment

Be the first to comment.

Related Articles