Transcript
Page 1: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Creating a Mobile Course Companion with WordPress!

Paul D. Hibbitts"Hibbitts Design!

Mobile Learning User Experience (UX) Design!

Page 2: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

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: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Better experiences, !better learning"

Page 4: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Topics for Today!!  Mobile Learning Headspace!!  Usability and User Experience!!  My Design Approach and Tools!!  Mobile Course Companion Demo!

Page 5: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Mobile Learning Poll!

Page 6: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Mobile Learning Headspace!http://www.flickr.com/photos/realtingley/4467469704/

Page 7: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Mobile Web Usage Projections!

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

Page 8: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

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: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

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: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

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: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

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: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

User Experience!http://www.flickr.com/photos/rekha6/326405841/

Page 13: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

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

Page 14: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

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 15: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Aspects of User Experience!

http://semanticstudios.com/publications/semantics/000029.php

Page 16: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

The Role of User Experience with Mobile Learning!

http://www.gliffy.com/go/publish/3363991/

Page 17: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

My Design Approach and Tools!http://www.flickr.com/photos/jesshibb/4964851353/

Page 18: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Design Strategies!

Page 19: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Mobile First!

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

Page 20: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

What Exactly is “Mobile”?!

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

Page 21: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

User-Centered Design!

http://www.sapdesignguild.org/resources/ucd_process.asp

Page 22: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

More Prototyping, "Less Wireframing!

http://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/

Page 23: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Instructional Design Principles!

http://ged578.pbworks.com/w/page/7309910/Multimodal_Teaching-Learning

Page 24: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Immersion!

http://www.uselog.com/2005_10_01_archive.html

Page 25: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Content Parity!

="

Page 26: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

“Frictionless” User Experience!

http://www.apple.com/iphone/features/siri.html

Page 27: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Tools of Choice (for now…)!

Page 28: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

WordPress!

Page 29: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

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 30: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

WPtouch Pro!

Page 31: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

What about"Responsive Web Design?!

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

Page 32: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Supporting Multiple Devices!!  Responsive web design!!  Device specific design!!  Responsive web design +"

server side components!Adapted from Luke Wroblewski

Page 33: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Headway Framework!

Page 34: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress
Page 35: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress
Page 36: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress
Page 37: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Mobile Course Companion!

Page 38: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Demo!

Page 39: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Wrap-up!http://www.flickr.com/photos/o2de/5815193403/

Page 40: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Summary!!  Mobile Learning Headspace!!  Usability and User Experience!!  My Design Approach and Tools!!  Mobile Course Companion Demo!

Page 41: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Where to Next?!mobilelearningux.com (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 42: IT4BC - Mobile Learning User Experience (UX) Design: Creating a Mobile Course Companion with WordPress

Thank You! Further Questions?!Contact info!

Web: paulhibbitts.com!Email: [email protected]!Twitter: @hibbittsdesign!LinkedIn: linkedin.com/in/paulhibbitts!


Top Related