etug spring 2012 - leveraging wordpress for mobile learning: a case study
DESCRIPTION
Creating a mobile learning companion for a course or seminar is a great way to enhance face-to-face teaching, but doing so effectively presents both design and technical challenges. For the Fall 2011 offering of Paul's user interface design course (CMPT-363) at Simon Fraser University he undertook the task of creating a mobile course companion for his students. In this presentation Paul will guide you through the fundamentals of mobile learning, including its potential role in formal learning, how to use UX viewpoints and techniques to provide more effective mobile learning, and demonstrate his SFU mobile course companion. He will also share the reasons why he choose WordPress for delivering mobile learning, and provide a brief guided tour of the key plugins and customizations used to deliver a great mobile learning user experience.TRANSCRIPT
![Page 1: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/1.jpg)
Leveraging WordPress for Mobile Learning: A Case Study!
Paul D. Hibbitts"Hibbitts Design!
Mobile Learning User Experience (UX) Design!
![Page 2: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/2.jpg)
A Little About Me!! Established Hibbitts Design in 1998!! 100+ successful software UX projects, with
clients such as Absolute Software, FINCAD, "SAP Business Objects, and the University of BC!
! Instructor and course designer for CMPT-363"(UI Design) at Simon Fraser University!
! Usability Mentor, 2009 Season of Usability"(co-sponsored by Google)!
! HFI-Certified Usability Analyst!
![Page 3: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/3.jpg)
Better experiences, !better learning"
![Page 4: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/4.jpg)
Topics for Today!! Mobile Learning Headspace!! Usability and User Experience!! My Design Approach and Tools!! Mobile Course Companion Demo!! Under the Hood of WordPress!
![Page 5: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/5.jpg)
Mobile Learning Poll!
![Page 6: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/6.jpg)
Mobile Learning Headspace!http://www.flickr.com/photos/realtingley/4467469704/
![Page 7: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/7.jpg)
Mobile Web Usage Projections!
http://www.mobify.com/blog/mobile-performance-benchmarks
![Page 8: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/8.jpg)
Defining Mobile Learning!“The ability to learn independently of place and time, facilitated by a range of mobile devices.”!Ufi/learndirect and Kineo, 2007
![Page 9: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/9.jpg)
Forms of Mobile Learning!" Assessments!
– Tests, surveys, polls!" Learning games!
– Challenges and simulations!" Synchronous!
– Virtual classrooms using mobile webinar tools!# Social media learning!
– Enabling networks for learning!# Micro-learning!
– Self paced mini lessons in varied media!# Performance support!
– References, job aids, collaboration, social, augmented reality!As defined by Connie Malamed
![Page 10: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/10.jpg)
Five Moments of "Learning Needs!
1. When learning for the first time!2. When wanting to learn more!3. When trying to remember "
and/or apply!4. When things change!
5. When something goes wrong!!As defined by Bob Mosher and Conrad Gottfredson
Formal "Learning!
Informal "Learning!
![Page 11: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/11.jpg)
Mobile Learning and"Formal Learning!
! Mobile’s strength is not in formal learning!! Informal learning of a “just-in-time” nature, is a
better use of mobile technology!! Mobile learning is very effective as performance
support with (or without) formal learning!
![Page 12: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/12.jpg)
MOBILE LEARNING UX TIP #1!
Strive for content to be"the user interface.!
!
![Page 13: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/13.jpg)
User Experience!http://www.flickr.com/photos/rekha6/326405841/
![Page 14: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/14.jpg)
Usability – How it Works!! Learnability (first time users) !! Efficiency (experienced users)!! Memorability (casual users)!! Error-resistance (all users)!
![Page 15: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/15.jpg)
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!
![Page 16: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/16.jpg)
Aspects of User Experience!
http://semanticstudios.com/publications/semantics/000029.php
![Page 17: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/17.jpg)
The Role of User Experience with Mobile Learning!
http://www.gliffy.com/go/publish/3363991/
![Page 18: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/18.jpg)
My Design Approach and Tools!http://www.flickr.com/photos/jesshibb/4964851353/
![Page 19: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/19.jpg)
Design Strategies!
![Page 20: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/20.jpg)
Mobile First!
http://www.abookapart.com/products/mobile-first
![Page 21: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/21.jpg)
What Exactly is “Mobile”?!
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 22: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/22.jpg)
User-Centered Design!
http://www.sapdesignguild.org/resources/ucd_process.asp
![Page 23: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/23.jpg)
More Prototyping, "Less Wireframing!
http://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
![Page 24: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/24.jpg)
Immersion!
http://www.uselog.com/2005_10_01_archive.html
![Page 25: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/25.jpg)
Content Parity!
="
![Page 26: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/26.jpg)
“Frictionless” User Experience!
http://www.apple.com/iphone/features/siri.html
![Page 27: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/27.jpg)
MOBILE LEARNING UX TIP #2!
Design for two-handed and one-handed interaction.!
!
![Page 28: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/28.jpg)
(Some) Design Principles!
![Page 29: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/29.jpg)
Designing for "Anytime, Anywhere Learning!
$ Target for learner context and intent!$ Consider quick (<1 min.), moderate "
(5-10 min.), and focused (>10 min.) interactions!$ Provide content in multiple media formats!$ Support private and public communication"
with learners!$ Remember that aesthetics matter "
(more than ever!)!$ Strive to maximize learner efficiency!
![Page 30: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/30.jpg)
Tools of Choice (for now…)!
![Page 31: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/31.jpg)
WordPress!
![Page 32: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/32.jpg)
Why WordPress?!$ Substantial and friendly development community!$ Large amount of documentation available!$ One of the most usable CMS platforms available!$ High quality, and customizable, user experience
(incl. Administration UI)!
$ Wide-range of plugins to extend capabilities!$ WPtouch Pro plugin (by BraveNewCode)!$ More than just blogging, really a platform!!
![Page 33: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/33.jpg)
WPtouch Pro!
![Page 34: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/34.jpg)
What about Responsive Design?!
http://www.paulolyslager.com/responsive-design-hype-solution/
![Page 35: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/35.jpg)
Headway Framework!
![Page 36: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/36.jpg)
Headway Framework!
![Page 37: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/37.jpg)
MOBILE LEARNING UX TIP #3!
Optimize content presentation for one screen orientation.!
!
![Page 38: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/38.jpg)
Mobile Course Companion!
![Page 39: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/39.jpg)
Demo!
![Page 40: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/40.jpg)
Under the Hood of WordPress!http://www.flickr.com/photos/myoldpostcards/3924485738/
![Page 41: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/41.jpg)
![Page 42: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/42.jpg)
![Page 43: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/43.jpg)
![Page 44: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/44.jpg)
![Page 45: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/45.jpg)
Sample Custom CSS - iPhone!
![Page 46: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/46.jpg)
![Page 47: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/47.jpg)
![Page 48: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/48.jpg)
Wrap-up!http://www.flickr.com/photos/o2de/5815193403/
![Page 49: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/49.jpg)
Summary!! Mobile Learning Headspace!! Usability and User Experience!! My Design Approach and Tools!! Mobile Course Companion Demo!! Under the Hood of WordPress!
![Page 50: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/50.jpg)
Where to Next?!mobilelearningux.com/etug (mobile friendly of course!)"– These slides!– Suggested books!– Articles!– Videos!– Learning apps (iPhone/iPad and Android)!– Mobile-friendly WordPress themes!– Responsive web frameworks!– Comments/discussion!
![Page 51: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.vdocuments.site/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/51.jpg)
Thank You! Further Questions?!Contact info!
Web: paulhibbitts.com!Email: [email protected]!Twitter: @hibbittsdesign!LinkedIn: linkedin.com/in/paulhibbitts!