Pendekatan teknis sederhana membangun konten mobile multimedia dan interaktif menggunakan tools sudah familiar digunakan yaitu Microsoft Power Point

1. Simple Technique and Approach
Mobile Learning Development
Dimas Agung Prasetyo S.Kom, M.S.
07/05/2015 1

2.  Ada banyak anggapan:
 Penggunaan teknologi mobile untuk membantu proses belajar, pencarian referensi atau informasi yang
berguna kepada individu pada saat tertentu atau kondisi yang spesifik.(Float Learning)
 Aktivitas apapun yang dilakukan sehingga membuat seseorang menjadi lebih produktif ketika menggunakan,
berinteraksi, atau membuat informasi melalui perangkat digital yang compact dan portable yang biasa
dibawa pada kegiatan sehari-hari.(eLearning Guild)
 Adalah suatu proses pembelajaran yang bisa diakses kapanpun dan dimanapun untuk mendukung
proses peningkatan kemampuan / akuisisi skill dan atau pengetahuan baru melalui perangkat mobile
yang bisa memfasilitasi just-in-time learning dan on-demand learning. M-learning dapat dihantarkan
pada situasi formal atau tidak formal, terstruktur atau tidak terstruktur namun harus fleksibel,
mendukung proses belajar mandiri (self paced dan self directed).
 M-learning berorientasi kepada pembelajarnya bukan teknologinya
Apa itu Mobile Learning
07/05/2015 2

3.  M-learning dapat didukung dengan berbagai macam variasi
perangkat mobile dan teknologi yang bisa memfasilitasi delivery
dokumen, presentasi, multimedia, notifikasi, berita, tugas, kuis, dll
 Perangkat tersebut bisa meliputi:
 Smart phone (iPhone, Android dan Blackberry)
 Laptop
 Tablets (iPad, Android, Windows Mobile)
 Kindle
 iPod
 Dan lainnya
Teknologi Mobile Learning
07/05/2015 3

4.  M-Learning subset E-learning tapi,
 M-Learning <> E-Learning
 Menggunakan pendekatan pedagogy sedikit berbeda
dengan alasan:
 Access
 Short courses
 Less structured/less formal
 On-demand
 Assesment
M-Learning dan E-Learning
07/05/2015 4

5.  Bite-sized short chunks of learning
 ‘Just-in-time’ ‘just-enough’ atau ‘just-for me’ learning
 Easy to use
 Practical and contextual
 NOT e-learning delivered on a mobile device
 Informal – ‘on the go’ learning
 Interactive
 Knowledge distribution vs knowledge presentation
 Portable
 Platform independent
Ideal M-Learning?
07/05/2015 5

6.  Cons:
 Asumsi umum di masa lalu: MAHAL
 Skills khusus / programmer
 Tools tertentu
 Pilihanteknologi terbatas
 Java
 Flash
 Dikerjakan pihak ketiga
 Lifecycle pendek
Tantangan Pengembangan
07/05/2015 6

7.  Pros:
 Munculnya standar baru (open dan interoperability)
 Open Source
 HTML5
 AJAX
 Video dan Audio Codec
 Responsive design
 Metode ‘One Fit All’
 Pilihan authoring tools
 Camtasia
 Adobe Family
 Articulate Family
 Ispring
 Integrasi dengan ‘traditional authoring tools’ -> Power Point 
Tantangan Pengembangan
07/05/2015 7

8.  De Facto teaching tool
 Mudah dipelajari dan digunakan
 Memiliki fitur multimedia dan interaktif
 Memiliki addon dari pihak ketiga
 E-Learning/Mlearning content authoring tools
 Interaktivitas tingkat lanjut
 Fitur assement
 Untuk contoh:
 ISPRING FREE
 PHONEGAP BUILD
MS POWERPOINT
07/05/2015 8

9.  PowerPoint to Flash & HTML5 Converter
 Design mobile-ready content
 Convert PowerPoint to Flash
 Create SCORM-compliant courses
 Free*
ISPRING FREE
07/05/2015 9

10.  Mobile Application Packager
 HTML5,CSS,Javascript technology
 Support multiple platforms.
 Fast deployment
PHONEGAP BUILD
07/05/2015 10

11. 07/05/2015 11

12. Gagne Nine Event Of Instructions
07/05/2015 12

13.  Pengumpulan Aset
 Materi PowerPoint
 Gambar Pendukung
 GIF
 JPG
 PNG
 Video
 H264 / MP4
 FLV
 Audio narasi
 MP3
 OGG
How To Start
07/05/2015 13

14. Restruktur Konten Power Point
07/05/2015 14

15.  Consider the Device
 Keep the specific device you're designing for in mind (iPad,
Android device, iPhone, etc.).
 Beware of Flash and other formats that aren't compatible across
all devices.
 Consider the various inputs on the device you're designing for
(keyboard, scroll-wheel, touch, directional pad, etc.).
UX Design Best Practices
07/05/2015 15

16.  User Experience
 Avoid scrolling because it can be more difficult on the smaller
screen.
 Understand and observe how users hold the intended device.
 Keep quizzes short and concise, keep options restricted to two or
three.
 If linking to outside sides, notify learners they are leaving the
mobile-optimized course.
 Keep course size very small, chunk into max. 10-15 minute pieces.
 Consider landscape view vs. portrait view for your e-learning.
UX Design Best Practices
07/05/2015 16

17.  Imagery
 Use bold imagery and images on white backgrounds.
 Maximize the use of icons and graphics to represent content
instead of text.
 Don't use images that are irrelevant or too large.
 Use clear and simple images.
 Provide strong visual cues (bright colors, descriptive icons, etc.).
UX Design Best Practices
07/05/2015 17

18.  Fonts
 Make your default font size at least 14pt.
 12pt font is the very smallest font size you should use.
 Don't use text in images, some devices compress images or
render fuzzy images.
 Designing mobile learning with system fonts is safest option.
 When using custom fonts, make sure they render nicely and you
have web font licenses.
 Keep the number of custom fonts to a minimum (they increase
page load time).
UX Design Best Practices
07/05/2015 18

19.  Buttons and Input Fields
 Large buttons are a must for mobile device navigation.
 Place buttons like Submit and Cancel far away from each other
(minimize users pressing the wrong button.).
 Leave a lot of space around your buttons (at the very least,
10px).
 Make your buttons bright, bold and highly visible.
 Use clear and very descriptive action verbs on your buttons.
 Keep the input fields to a minimum (try to use large checkboxes
or radio buttons instead).
UX Design Best Practices
07/05/2015 19

20.  Additional Tips
 Leave plenty of white space around your on screen items.
 Optimizing and compressing any audio and video files is critical
for fast mobile experiences.
 Preview your mobile design early and often.
 Develop content that is crystal clear and easy to understand.
UX Design Best Practices
07/05/2015 20

21.  Images engage learners more than words.
 Storytelling makes learning relateable.(audio)
 Video can be there when you cannot.
 Consistency is key.
 Video is just more fun!
 It’s not as expensive as you think.
Instructional Design Best Practices
07/05/2015 21

22.  Ekspor ke format html5 menggunakan ISPRING
 Untuk LMS
 SCORM
 IMS
 THIN CAN
 Mobile
 Pure HTM5
 ZIP
 Gunakan phonegap build untuk menghasilkan
application untuk berbagai macam platform mobile
MENGEKSPOR KONTEN
07/05/2015 22

23. Demo ispring dan phonegap build
DEMO
07/05/2015 23

24.  http://www.aurionlearning.com/assets/pdf/What%20is%20
Mlearning.pdf
 https://community.articulate.com/
 https://community.articulate.com/articles/design-mobile-
learning-like-a-pro-best-practices-for-mlearning
 https://www.opensesame.com/blog/6-reasons-why-
video-fantastic-medium-training
Sumber
07/05/2015 24