The document discusses mobile learning (m-learning) as a flexible, accessible process for acquiring knowledge and skills using portable devices. It differentiates m-learning from e-learning, emphasizing its unique pedagogical approach and the importance of user experience design in creating effective mobile content. Best practices for m-learning are outlined, focusing on usability, multimedia engagement, and content delivery across various mobile platforms.

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