0
Leveraging WordPress forMobile Learning: A Case Study!Paul D. Hibbitts"Hibbitts Design!Mobile Learning User Experience (UX...
A Little About Me!!  Established Hibbitts Design in 1998!!  100+ successful software UX projects, withclients such as Abso...
Better experiences,!better learning"
Topics for Today!!  Mobile Learning Headspace!!  Usability and User Experience!!  My Design Approach and Tools!!  Mobile C...
Mobile Learning Poll!
Mobile Learning Headspace!http://www.flickr.com/photos/realtingley/4467469704/
Mobile Web Usage Projections!http://www.mobify.com/blog/mobile-performance-benchmarks
Defining Mobile Learning!“The ability to learn independently of place andtime, facilitated by a range of mobile devices.”!U...
Forms of Mobile Learning!"  Assessments!–  Tests, surveys, polls!"  Learning games!–  Challenges and simulations!"  Synchr...
Five Moments of"Learning Needs!1.  When learning for the first time!2.  When wanting to learn more!3.  When trying to remem...
Mobile Learning and"Formal Learning!!  Mobile’s strength is not in formal learning!!  Informal learning of a “just-in-time...
MOBILE LEARNING UX TIP #1!Strive for content to be"the user interface.!!
User Experience!http://www.flickr.com/photos/rekha6/326405841/
Usability – How it Works!!  Learnability (first time users) !!  Efficiency (experienced users)!!  Memorability (casual users...
User Experience (UX) –"How it Works and Feels!!  Subjective in nature, but still measurable!!  Often changes over time, du...
Aspects of User Experience!http://semanticstudios.com/publications/semantics/000029.php
The Role of User Experiencewith Mobile Learning!http://www.gliffy.com/go/publish/3363991/
My Design Approach and Tools!http://www.flickr.com/photos/jesshibb/4964851353/
Design Strategies!
Mobile First!http://www.abookapart.com/products/mobile-first
What Exactly is “Mobile”?!http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
User-Centered Design!http://www.sapdesignguild.org/resources/ucd_process.asp
More Prototyping,"Less Wireframing!http://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
Immersion!http://www.uselog.com/2005_10_01_archive.html
Content Parity!="
“Frictionless” User Experience!http://www.apple.com/iphone/features/siri.html
MOBILE LEARNING UX TIP #2!Design for two-handed andone-handed interaction.!!
(Some) Design Principles!
Designing for"Anytime,Anywhere Learning!$  Target for learner context and intent!$  Consider quick (<1 min.), moderate"(5-...
Tools of Choice (for now…)!
WordPress!
Why WordPress?!$  Substantial and friendly development community!$  Large amount of documentation available!$  One of the ...
WPtouch Pro!
What about Responsive Design?!http://www.paulolyslager.com/responsive-design-hype-solution/
Headway Framework!
Headway Framework!
MOBILE LEARNING UX TIP #3!Optimize content presentationfor one screen orientation.!!
Mobile Course Companion!
Demo!
Under the Hood of WordPress!http://www.flickr.com/photos/myoldpostcards/3924485738/
Sample Custom CSS - iPhone!
Wrap-up!http://www.flickr.com/photos/o2de/5815193403/
Summary!!  Mobile Learning Headspace!!  Usability and User Experience!!  My Design Approach and Tools!!  Mobile Course Com...
Where to Next?!mobilelearningux.com/etug (mobile friendly of course!)"– These slides!– Suggested books!– Articles!– Videos...
ThankYou! Further Questions?!Contact info!Web: paulhibbitts.com!Email: paul@paulhibbitts.com!Twitter: @hibbittsdesign!Link...
ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study
ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study
ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study
ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study
ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study
ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study
Upcoming SlideShare
Loading in...5
×

ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study

153

Published on

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.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
153
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study"

  1. 1. Leveraging WordPress forMobile Learning: A Case Study!Paul D. Hibbitts"Hibbitts Design!Mobile Learning User Experience (UX) Design!
  2. 2. A Little About Me!!  Established Hibbitts Design in 1998!!  100+ successful software UX projects, withclients 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!
  3. 3. Better experiences,!better learning"
  4. 4. Topics for Today!!  Mobile Learning Headspace!!  Usability and User Experience!!  My Design Approach and Tools!!  Mobile Course Companion Demo!!  Under the Hood of WordPress!
  5. 5. Mobile Learning Poll!
  6. 6. Mobile Learning Headspace!http://www.flickr.com/photos/realtingley/4467469704/
  7. 7. Mobile Web Usage Projections!http://www.mobify.com/blog/mobile-performance-benchmarks
  8. 8. Defining Mobile Learning!“The ability to learn independently of place andtime, facilitated by a range of mobile devices.”!Ufi/learndirect and Kineo, 2007
  9. 9. 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
  10. 10. 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 GottfredsonFormal"Learning!Informal"Learning!
  11. 11. Mobile Learning and"Formal Learning!!  Mobile’s strength is not in formal learning!!  Informal learning of a “just-in-time” nature, is abetter use of mobile technology!!  Mobile learning is very effective as performancesupport with (or without) formal learning!
  12. 12. MOBILE LEARNING UX TIP #1!Strive for content to be"the user interface.!!
  13. 13. User Experience!http://www.flickr.com/photos/rekha6/326405841/
  14. 14. Usability – How it Works!!  Learnability (first time users) !!  Efficiency (experienced users)!!  Memorability (casual users)!!  Error-resistance (all users)!
  15. 15. 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!
  16. 16. Aspects of User Experience!http://semanticstudios.com/publications/semantics/000029.php
  17. 17. The Role of User Experiencewith Mobile Learning!http://www.gliffy.com/go/publish/3363991/
  18. 18. My Design Approach and Tools!http://www.flickr.com/photos/jesshibb/4964851353/
  19. 19. Design Strategies!
  20. 20. Mobile First!http://www.abookapart.com/products/mobile-first
  21. 21. What Exactly is “Mobile”?!http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  22. 22. User-Centered Design!http://www.sapdesignguild.org/resources/ucd_process.asp
  23. 23. More Prototyping,"Less Wireframing!http://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
  24. 24. Immersion!http://www.uselog.com/2005_10_01_archive.html
  25. 25. Content Parity!="
  26. 26. “Frictionless” User Experience!http://www.apple.com/iphone/features/siri.html
  27. 27. MOBILE LEARNING UX TIP #2!Design for two-handed andone-handed interaction.!!
  28. 28. (Some) Design Principles!
  29. 29. 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!
  30. 30. Tools of Choice (for now…)!
  31. 31. WordPress!
  32. 32. 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!!
  33. 33. WPtouch Pro!
  34. 34. What about Responsive Design?!http://www.paulolyslager.com/responsive-design-hype-solution/
  35. 35. Headway Framework!
  36. 36. Headway Framework!
  37. 37. MOBILE LEARNING UX TIP #3!Optimize content presentationfor one screen orientation.!!
  38. 38. Mobile Course Companion!
  39. 39. Demo!
  40. 40. Under the Hood of WordPress!http://www.flickr.com/photos/myoldpostcards/3924485738/
  41. 41. Sample Custom CSS - iPhone!
  42. 42. Wrap-up!http://www.flickr.com/photos/o2de/5815193403/
  43. 43. Summary!!  Mobile Learning Headspace!!  Usability and User Experience!!  My Design Approach and Tools!!  Mobile Course Companion Demo!!  Under the Hood of WordPress!
  44. 44. 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!
  45. 45. ThankYou! Further Questions?!Contact info!Web: paulhibbitts.com!Email: paul@paulhibbitts.com!Twitter: @hibbittsdesign!LinkedIn: linkedin.com/in/paulhibbitts!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×