E-Learning in amulti-device world      Steve Rayson
http://www.worldofsuperheroes.com/wp-content/uploads/2012/04/phones.jpg
Today we will cover:• How we use multiple devices• How have online design technologies  adapted to this?• What does this m...
How many devices do you use in a         typical day?  (Desktop, laptop, smartphones,              tablets)          •   O...
• We live in a multi-device worldGoogle Survey - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
• We live in a multi-device world
• We live in a multi-device world
MLearning Solutions – Vendor Hype?Reality is not desktop v mobile but       multi-device delivery
Web moving from mobile design to         responsive multi-device designVolume of GooglesearchesMobile web designResponsive...
From multiple versions to a single      responsive version         www.shell.com
From multiple versions to a single responsive version   www.bostonglobe.com
New Scrolling Navigation• Driven by scrolling  on phones and  tablets• More elegant• More exploratory• No navigation• Beco...
Scrolling Example
HTML5 Interactivity
Implications for  eLearning
Old World                    Publish to, or produce: Delivering to                 • native iPhone app                    ...
New world is responsive elearning designOne version that works on all devices regardless of          screen size or Operat...
One version that responds,  not multiple versions Fluid design, not fixed screen sizes  Is it a dream? Let’s see a demo.
Intelligent Responsiveness - ADAPT•   Simplifies content for Smartphone•   Extra content for phone only•   Changes interac...
Rethinking eLearning Design• Shorter but deeper learner journeys• Making navigation a meaningful part of the journey  E.g....
Benefits of       Responsive eLearning•   One version works on all devices•   One version to track and maintain•   Distrib...
The Future• Advances in HTML5 have led to  design innovations that challenge  traditional e-learning design• Though we can...
Common Questions• Offline version• IE6 needs fallback html  version• Access to phone  functions• Role of native apps
Designing for Multiple Devices?•••
Kineo - Global Leaders in eLearning                          •                          •                          •      ...
Thank you and please keep in touch…••••••                 Learning Visions
Linkshttp://services.google.com/fh/files/misc/multiscreenworld_final.pdfhttp://www.amazon.com/Kindle-Paperwhite-Resolution...
HTML5 – Apps Debate http://mashable.com/2012/09/12/web-vs-native-apps/http://www.businessinsider.com/html5-vs-apps-why-the...
Designing and delivering elearning in a multi-device world
Upcoming SlideShare
Loading in …5
×

Designing and delivering elearning in a multi-device world

3,682 views

Published on

Kineo Pacific’s eLearning Solutions Manager Souraya Khoury led a breakout session on Day 1 of AITD 2013 about the new challenges that L&D departments face: What can be achieved with HTML5 and how responsive eLearning design can assist in achieving greater levels of accessibility across multiple devices.

Find out more at www.kineo.com

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

No Downloads
Views
Total views
3,682
On SlideShare
0
From Embeds
0
Number of Embeds
2,136
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Welcome AND THANKS FOR COMING. I AM AWARE YOU’RE ON A BREAK, SO I’LL ENDEVOUR TO BE AS CONCISE AND VALUABLE AS POSSIBLEIts an EXCITING AND CHALLENGING TIME FOR ELEARNING WE’RE HERE TO TALK ABOUT ELEARNING IN A MULTIDEVICE WORLD – NOTE: NOT MLEARNING as you’ll see later…………………………
  • Many would say that Apple kickstarted this journey with their innovative iPhones and iPads, so the link to what we will discuss today is clear – BUT REALLY, I HAVE BEEN LOOKING FOR AN EXCUSE TO SHARE THAT COMIC STRIP FOR AGES!Ok, lets get started…………………….
  • Please note that we wont be doing a deep dive into the technical aspects of HTML5, rather into how these technical functionalities have contributed to new design principles
  • Show of hands
  • GOOGLE SURVEY ON HOW PEOPLE USE THEIR DEVICES LINK AT BOTTOM IF YOU WANT TO SEECAN SEND YOU SLIDE PACK VIA EMAILLAPTOP/DESKTOP:SeriousIntensiveTask-oriented workYOU SIT SOWN AT UR PC WHEN U HAVE WORK TO DO
  • NO SURPRISES HERE WHEN WE LOOK AT HOW SM PHONES ARE USED:Mostly to communicate in short burstsinterestingly, most of the use is at home (twitter in front of TV)Also interestingly, most used of all devices
  • -TABLETS PRIMARILY USED AT HOME TO BROWSE FOR LONGER PERIODS-MORE RELAXED LEAISURELY USESO ALL DEVICES AR USED DIFFERENTLY AND IN DIFFERENT CONTEXTS NO REAL SURPRISES,BUT WHAT DOES THIS MEAN FOR ELEARNING, AND ONLINE DESIGN IN GENERAL?…………………………..
  • The DANGER IS PERCEPTION THAT THERE IS A BINARY SPLIT BTWN DESKTOP AND MOBILE LEARNING AND PUBLISHINGLHS: HTML AND FLASH FOR DESKTOP/LAPTOPRHS:APPS FOR IPJHONE, ANDROID AND BLACKBERY…………………………….A LOT OF HYPE AROUND MLEARNING, BUT RECENT STUDY WITH 35 ELEARNING DIRECTORS FOUND MLEARNING WASN’T AS SIGNIFICANT AS VENDORS WERE EXPECTINGWE PLAN TO MOVE TWRD IT, BUT NOT CRITICAL AT THIS STAGE………………………….REALITY IS MULTI-DEVICE DELIVERY FROM A SINGLE ITERATIONBUT HOW DO WE DO THIS? ONE OF THE ANSWERS IS RD……………………………………
  • We did a search on Google trends Useful research tool to see what people are searching for 2010 – MORE FOR MLEARNING, LESS FOR RDSKIP TO 2011/2012 – ADVANCES IN HTML5 LED TO SIG INCREASED INTEREST IN RDBUT WHAT IS RD?………………
  • HERE’S AN EXAMPLELSH: DESKTOPRHS: MOBILE/TABLET
  • Connect TO GLOBEFLUID LAYOUTCOMPARE TO THE AGEBECOMING INCREASINGLY POPULAR – CMS LIKE DRUPAL HAVE RD TEMPLATES OUT OF THE BOXABOUT TO REDESIGN KINEO.COM AND WILL INCORPORATE RD
  • Other things happening in web world which impact elearning = scrollingTRACKINGWhilst not all people scroll all the way down, 46% of users see the majority of the content. In the past, the typical user only saw 18% of the content of the relevant car chapter.SHOW TITANICARE YOU FREAKING OUT BECAUSE OF THE SCROLL BAR’S ASSOCIATION WITH POOR DESIGN? TIME TO CHALLENGE TRADITIONAL ELEARNING DESIGN - WE ARE USING HTML, NOT FLASH, SO WE NEED TO DRIVE ENGAGEMENT THROUGH GOOD DESIGNLETS LOOK AT ANOTHER EXAMPLE……
  • Scrolling can drive engagement by presenting STATE CHANGESNAVIGATION BECOMES A FEATURE, NOT SIMPLY A DELIVERY TOOL
  • Another exampleVISUAL MENU – DRAG SLIDER TO ACCESS ALL PARTS OF STORECAN SEE HOW HTML ALLOWS FOR MORE ENGAGING NAVIGATION THAN A SIMPLE NEXT CLICK – EQUALLY ENGAGING AS FLASH FROM THIS PERSPECTIVE
  • SO 3 WEB TRENDS COMBINE TO IMPACT ELEARNINGRDINTERACTIVE HTMLSCROLLING HTMLLETS LOOK AT WHAT THIS MEANS IN MORE DETAIL
  • Previously, delivering to multiple devices meantCREATINGMANAGINGTRACKINGOn multiple devices, WHAT DOES THE FUTURE HOLD?…..
  • Here’s what we’ve been working on – WE DON’T HAVE ALL THE ANSWERS SO OPNIONS ARE WELCOMESHOW DEMO-BLOCKS OF CONTENTDYNAMIC CISPLAYCLICK T2ST1 – SHOW FEATURESAnimationGraphically activated textVideoMCQGraphicsCollasible textSHRINK SCREEN AND SHOW:Animation – static imageQ’s removedSearcheable tagsSupport accessible technologies eg screen reader
  • We call this INTELLIGENT RESPONSIVENESSAND HAVE BUILT A FRAMEWORK CALLED ADAPT THAT ACHEIVES THIS
  • One version works on all devices – FUTURE PROOOFINGOne version to track and maintain – DISTRIBUTED TO A SINGLE LMS, VS AN APP STORE AND TRY TO TRACKDistribute from a single LMSAccessible contentSearchable contentMore cost effective – still prototyping stage but so far costs are similar to FLASH; BROWSER TESTING TAKES LONGER, BUT ONCE ALL ARE WORKING DOESN’T COST MOREAllows sequential screening
  • PEOPLE COMPLETE A SIGNLE TASK USING MULTIPLE DEVICES E.G. START NEWSPAPER ARTICLE ON PHONE, FINISH ON DESKTOP AT OFFICEFIGURE BASED ON GOOGLE RESEARCHSINGLE RESPONSIVE DESIGN MAKES TRACKING THIS ON A SINGLE VERSION MUCH EASIER
  • Offline version – YES, U CAN DOWNLOAD AND COMPLETE A MODULE OFFLINE. IF YOU WANT TO TRACK, NEED TO DO THIS IN A PLAYER APP, SO NEXT TIME YOU’RE BACK ONLINE, TRACKING DATA IS SENTIE6 –BIG BUG BEAR, SOME CLIENTS STILL ON THIS EVEN THOUGH THIS IS OVER 13 YRS OLD AND NO LONGER SUPPORTED BY MICROSOFT. ISSUE IS IE6 DOESN’T SUPPORT HTML 5. TO ACCOMMODATE THEM, WE HAVE A FALLBACK VERSION WHICH DEGRADES TO IE6 SUPPORTED VERSIONAccess to phone functions – EG PHOTOS WITH CAMERA ARE RESTRICTED AS UR USING A WEB APP, NOT A NATIVE APPRole of native apps – used for performance support, less tracking, updating;on right is an APP we have created for Nikon staff to use in store
  • Designing and delivering elearning in a multi-device world

    1. 1. E-Learning in amulti-device world Steve Rayson
    2. 2. http://www.worldofsuperheroes.com/wp-content/uploads/2012/04/phones.jpg
    3. 3. Today we will cover:• How we use multiple devices• How have online design technologies adapted to this?• What does this mean for elearning?
    4. 4. How many devices do you use in a typical day? (Desktop, laptop, smartphones, tablets) • One • Two • Three • More than 3
    5. 5. • We live in a multi-device worldGoogle Survey - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
    6. 6. • We live in a multi-device world
    7. 7. • We live in a multi-device world
    8. 8. MLearning Solutions – Vendor Hype?Reality is not desktop v mobile but multi-device delivery
    9. 9. Web moving from mobile design to responsive multi-device designVolume of GooglesearchesMobile web designResponsive web design http://en.wikipedia.org/wiki/Responsive_Web_Design
    10. 10. From multiple versions to a single responsive version www.shell.com
    11. 11. From multiple versions to a single responsive version www.bostonglobe.com
    12. 12. New Scrolling Navigation• Driven by scrolling on phones and tablets• More elegant• More exploratory• No navigation• Becoming a web norm• Well known http://titanic.q-music.be/ scrolling advocates include Amazon,
    13. 13. Scrolling Example
    14. 14. HTML5 Interactivity
    15. 15. Implications for eLearning
    16. 16. Old World Publish to, or produce: Delivering to • native iPhone app • native Blackberry appMultiple Devices • native Android app • Flash version • HTML version for iPads.Even single source publishing still means different versions toupdate and track. Can be further complicated if LMS trackingrequired.
    17. 17. New world is responsive elearning designOne version that works on all devices regardless of screen size or Operating System • Why publish multiple versions? • Why develop a version that works only on one device?
    18. 18. One version that responds, not multiple versions Fluid design, not fixed screen sizes Is it a dream? Let’s see a demo.
    19. 19. Intelligent Responsiveness - ADAPT• Simplifies content for Smartphone• Extra content for phone only• Changes interaction for smaller screens• Reduces image size or removes for Smartphone• Searchable by tags
    20. 20. Rethinking eLearning Design• Shorter but deeper learner journeys• Making navigation a meaningful part of the journey E.g. Titanic• Searchable and reusable content objects or components• Building content in small blocks• Rethinking the journey on different devices – different content and content types
    21. 21. Benefits of Responsive eLearning• One version works on all devices• One version to track and maintain• Distribute from a single LMS• Accessible content• Searchable content• More cost effective• Allows sequential screening
    22. 22. The Future• Advances in HTML5 have led to design innovations that challenge traditional e-learning design• Though we cant be sure what the future holds, multi-device use is here to stay so we must adapt our current design methodologies
    23. 23. Common Questions• Offline version• IE6 needs fallback html version• Access to phone functions• Role of native apps
    24. 24. Designing for Multiple Devices?•••
    25. 25. Kineo - Global Leaders in eLearning • • • • • • •
    26. 26. Thank you and please keep in touch…•••••• Learning Visions
    27. 27. Linkshttp://services.google.com/fh/files/misc/multiscreenworld_final.pdfhttp://www.amazon.com/Kindle-Paperwhite-Resolution-Display-Built- /dp/B007OZNZG0/ref=sr_tr_sr_1?ie=UTF8&qid=1347890370&sr=8- 1&keywords=kindle www.bostonglobe.com http://www.google.com/culturalinstitute/ www.shell.com www.beetle.com http://www.dangersoffracking.com/ http://titanic.q-music.be/
    28. 28. HTML5 – Apps Debate http://mashable.com/2012/09/12/web-vs-native-apps/http://www.businessinsider.com/html5-vs-apps-why-the-debate-matters-and-who-will-win-2012-8#ixzz24yUXunf2 http://learningandskillsgroup.ning.com/events/e-learning-in-a-multi-device-world

    ×