Designing mLearning UIs with Blueprint

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

After years of designing learning experiencesfor the desktop, we, as instructional designers and eLearning developers, areused to deeply rooted theoretical assumptions and standard templates that wereconceived in the PC times. We thought they would target a sort of perfectlearner in an ideal situation: the comfortable quietness of a desk.

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

Rethinking the user experience

There has been much discussion about thedifficulties of implementing mobile learning solutions in the workplace. Someof 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, differentplatforms 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 acknowledgethat the most popular authoring tools like Articulate Storyline, AdobeCaptivate, and Lectora cannot yet offer us the benefits of responsive design todeploy content across multiple screens, or the possibility of experimentingwith mobile device orientations (GoMo 1.6 couldtake the lead in this regard).

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

Our job involves processing and presenting informationin a meaningful way, creating purposeful interactions between content andlearners in order to facilitate a task completion, and putting forward creativesolutions to support skill acquisition or behavioral change. The most suitableapproach depends heavily on each training need and its specific context, but atsome point, we all will face the challenge of creating mLearning solutions eitherfrom scratch or from legacy content.

In any case, we´ll need to consider somefundamental 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 “Ifwe try to develop a mindset for mobile whilst applying the same rules that wealready use, we will simply create a distribution channel, but mobile should beso much more than that.” Therefore, when we are designing for mobile, we´llneed new UI/UX design patterns and techniques that allow us to reorganize thecontent and create the type of interactions that really meet the expectationsof mobile users.

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

Amazingcreation assets

Blueprint provides a very complete library of iOS widgets (buttons,navigation bars, tab bars, tables, icons, etc.). You can fully customize allthese widgets, import your own pictures in your design, and even use thebuilt-in drawing tool to illustrate your ideas. Just by dragging and droppingelements onto each screen, you can design a user interface for iOS mobiledevices (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-fidelityprototypes

You can customize the objects in your designby adjusting all their properties, and you can assign each object an action: atap, a double tap, or a swipe (Figures 4 and 5). I find this featureparticularly interesting, as it helps me to create common gesture-basedinteractions for touchscreeninterfaces and to never forget that I am designing for mobile. By assigning actions to different objects, youcreate links between different screens. In Play mode, you will be able to testa 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

Collaborationpossibilities

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

ConvertingeLearning to mLearning

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

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

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

Figure 9: This solutionfacilitates access to information as well as social interactions

Finalthoughts

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

References

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