Mobile Learning: !A User Experience Perspective

Paul D Hibbitts! @hibbittsdesign

CAUCE Professional Development Webinar Series

http://www.flickr.com/photos/aecreations/3833459149/

Topics for Today!  Mobile Learning and the user experience!  How mobile changes blended learning!  What does “mobile” really mean?!  Why Moodle 2.5 was a mobile milestone release!  The increased importance of emotion!  Multi-device Moodle course site case study

Mobile Web Usage Projections

http://www.mobify.com/blog/mobile-performance-benchmarks

What stage is mobile learning at in your organization?! !A) Mobile learning is new to me!B) It has been discussed before !C) Evaluating possible solutions!D) Delivering mobile learning now

Mobile Learning!and the User Experience

http://www.flickr.com/photos/realtingley/4467469704/

“The ability to learn independently of place and time, facilitated by a

range of mobile devices.”!!

– Ufi/learndirect and Kineo, 2007

More Than Just Courses

http://mlearnopedia.com/mlearncon/

Forms of Mobile Learning!  Micro-learning

–  self paced mini lessons in varied media, e.g. podcasts!  Synchronous

–  virtual classrooms using mobile webinar tools!  Assessments

–  tests, surveys, polls!  Social media learning

–  enabling networks for learning!  Learning games

–  challenges and simulations!  Performance support

–  references, job aids, collaboration, social, augmented realityAs defined by Connie Malamed

Some Mobile False Assumptions!  Being mobile means being in a rush!  Mobile users are ok with having less!  Context is king (hint: think about intent)

Usability & !User Experience Design

Usability – How it Works!  Learnability (first time users) !  Efficiency (experienced users)!  Memorability (casual users)!  Error-resistance (all users)

User Experience (UX) –!How it Works and Feels

!  Subjective in nature, but still measurable!  Often changes over time, due to circumstances!  Will also include aspects of usability

Aspects of User Experience

http://semanticstudios.com/publications/semantics/000029.php (Peter Morville)

A Changed Perspective on !Blended Learning

http://www.flickr.com/photos/sabl3t3k/5235994736/

What’s the impact of mobile

access on blended learning?

Five Moments of !Learning Need

1.  When learning for the first time2.  When wanting to learn more3.  When trying to remember !

and/or apply

4.  When things change5.  When something goes wrongAs defined by Bob Mosher and Conrad Gottfredson

Formal !Learning

Informal !Learning

Mobile blended learning provides more opportunities

for performance support, !social networking, !

and informal learning

The Many Meanings!Of Mobile

http://www.flickr.com/photos/7548059@N04/4105393892/

Mobile First (2011)

http://www.abookapart.com/products/mobile-first

Growth'•'Constraints'•'Capabili1es'

What Exactly is “Mobile”?

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/

http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/

http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/

Which device do you start most of your mobile learning on?!!A) Smartphone!B) Tablet!C) Hybrid (i.e. Surface)!D) Notebook

http://communities-dominate.blogs.com/.a/6a00e0097e337c883301a73e12b9a1970d-pi

Time for Questions!or Comments

!  What we’ve covered so far – What is mobile learning?– Mobile false assumptions

– Usability & user experience– The impact of mobile on blended learning– Our mobile and multi-screen world

!  Coming up– Making our course sites multi-device friendly

Making Our Course Sites!Multi-device Friendly

https://www.flickr.com/photos/triplexpresso/8331489745

Our course sites need to support multi-device access

But how?

Moodle 2.5 was a !mobile milestone release… why?

The (Twitter) !Bootstrap Framework

!  Grid-based layout!  Support for responsive design!  Interface components (e.g. tabs)!  Javascript snippets (e.g. dialog boxes)

Responsive Web Design

http://www.paulolyslager.com/responsive-design-hype-solution/

Aardvark Theme

Aardvark Theme

Elegance Theme

Elegance Theme

A closer look at a Moodle course site using a Bootstrap theme... !

!University of British Columbia (UBC) Continuing Studies!

!http://iy103-w14.hibbittsdesign.com/ (built with Moodle 2.6.1)

Multi-device delivery is now (pretty) easy.

Doing it well for learning contexts? Maybe not so much...

Redefining “Mobile Learning”!in a Multi-device World

!  Ubiquitous!  Situational!  Connected!  Personal

Creating a Multi-device!Learning Strategy Foundation

!  Why? (i.e. problem, opportunity, etc.)!  Who? (i.e. audience, setting, etc.)!  What? (i.e. learner goals, organization goals, etc.)!  Where? (i.e. context, devices supported, etc.)!  When? (i.e. learner intent, off-line access, etc.)!  How? (i.e. organizational support and capabilities,

existing or new content, etc.)

(Multi-device) Learning Experience Principles

!  Learner-driven !  Valuable !  Streamlined !  Collaborative !  Open !  Integrated!  Available !  Multi-device (goes without saying…)

https://www.linkedin.com/pulse/article/20140923193943-572658-course-companion-learner-experience-principles

The Importance of Emotionhttp://www.flickr.com/photos/nehasingh7/7023699265/

How does your LMS !make you feel?

Now, imagine how your LMS!makes your students feel…

Why Design for Emotion?!  Emotion is experience!  All design is emotional design!  Emotion dominates decision-making!  Emotion commands attention and!

affects memory

!  Emotion communicates personality, forms relationships, and creates meaning

As defined by Trevor van Gorp and Edie Adams

http://advertising.yahoo.com/article/mobile-modes.html

Yahoo! Mobile Research (2011)

It’s also a great opportunity to show your students that you care!

Enjoyable"  Easy to Use"  Aesthetically pleasing"  Needed information"  Fun and entertaining"  Supports “flow”"  Provides engagement"  Emotionally appealing

http://docs.moodle.org/dev/2.3_icons_versus_2.4

Moodle&2.3&Icons& Moodle&2.4&Icons&

Moodle&2.7&Default&Theme&(Clean)&

Strive for a Pleasant, !and Quiet, User Interface

!  Effective layout (principles: alignment, repetition, proximity)

!  Use of appealing but subdued colors!  Provide adequate contrast, esp. for text

!  Make type easy to read

Time for More !Questions or Comments

!  What we’ve covered so far – Why Moodle 2.5 was a mobile milestone release– “Mobile Learning” in a multi-device world

– A Multi-device learning strategy foundation–  (Multi-device) learning experience principles– The increased importance of emotion

– Striving for a pleasant, and quiet, interface

!  Coming up– A detailed look at a multi-device Moodle course site

Multi-device Moodle!Course Site Case Study

Now, a detailed look at a !multi-device Moodle course site... !

!University of British Columbia (UBC) Continuing Studies!

!http://iy103-w14.hibbittsdesign.com/ (built with Moodle 2.6.1)

Bootstrap (2.x) HTML Snippet

<div class="media"> <a class="pull-left" href="#"> Media thumbnail object </a> <div class="main-body"> Descriptive text for media </div>

</div>

Media Thumbnail with Descriptive Text

Bootstrap (2.x) HTML Snippet

<div class="row-fluid"> <div class="span6"> Column one content </div> <div class="span6"> Column two content </div>

</div>

Two Column Layout

Wrap-uphttp://www.flickr.com/photos/thefinned1/504651585/

Summary!  Mobile learning and the user experience!  How mobile changes blended learning!  “Mobile” means multiple screens + devices!  Moodle 2.5+ for multi-device learning!  Multi-device learning strategy and principles!  The increased importance of emotion!  Multi-device Moodle course site case study

Thank you! Any questions?!  Contact Info – Web: paulhibbitts.com– Email: paul@paulhibbitts.com

– Twitter: @hibbittsdesign– LinkedIn: linkedin.com/in/paulhibbitts

!  IY103-W14 Course Companion –  iy103-w14.hibbittsdesign.com

!  Accompanying Worksheets– http://1drv.ms/1rsSZSm