it4bc - mobile learning user experience (ux) design: creating a mobile course companion with...

42
Creating a Mobile Course Companion with WordPress Paul D. Hibbitts Hibbitts Design Mobile Learning User Experience (UX) Design

Upload: paul-hibbitts

Post on 19-Jan-2015

520 views

Category:

Design


2 download

DESCRIPTION

Explore how to improve mobile learning outcomes with user-centered designer and UX analyst Paul Hibbitts. By sharing his experiences in creating mobile course companions in both academic and corporate contexts, Paul will guide you through the fundamentals of mobile learning, including its potential role with formal learning, and how to use UX design viewpoints and techniques to provide more effective mobile learning. He will also share his preferred tools and techniques to leverage WordPress as an outstanding vehicle to deliver mobile learning, using a case study involving a face-to-face university course he recently taught at Simon Fraser University.

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!