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: [email protected]
– Twitter: @hibbittsdesign– LinkedIn: linkedin.com/in/paulhibbitts
! IY103-W14 Course Companion – iy103-w14.hibbittsdesign.com
! Accompanying Worksheets– http://1drv.ms/1rsSZSm
Top Related