ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study
-
Upload
paul-hibbitts -
Category
Design
-
view
138 -
download
4
description
Transcript of ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study
![Page 1: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/31.jpg)
WordPress!
![Page 32: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/39.jpg)
Demo!
![Page 40: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/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.fdocuments.net/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/41.jpg)
![Page 42: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/42.jpg)
![Page 43: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/43.jpg)
![Page 44: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/44.jpg)
![Page 45: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/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.fdocuments.net/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/46.jpg)
![Page 47: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/reader036/viewer/2022081403/554bc318b4c9053a298b5319/html5/thumbnails/47.jpg)
![Page 48: ETUG Spring 2012 - Leveraging WordPress for Mobile Learning: A Case Study](https://reader036.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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!