Post on 12-May-2015
Basic Concepts of Information & Instructional Design
Week 01
Course : T0962 - Current Popular IT V
Year : 2010
Bina Nusantara
Why Design?
“"Orang-orang perlu masuk ke perangkat lunak Anda dalam waktu sekitar 20 detik dan mendapatkan umpan balik yang positif segera dan pahala, kemudian mereka tersenyum dan memiliki waktu yang baik dan mereka ingin pergi lebih jauh."
– Trip Hawkins, Electronic Arts Chairman
Outline Materi• Desain Informasi Dasar• Desain Instruksional Dasar
Information DesignIs also called :• Arsitektur Informasi• Desain Komunikasi
Mengacu pada: • Tipografi• Desain grafis• Ilmu bahasa• Psikologi• Ergonomi• Komputasi• dan bidang lain
Bina Nusantara
Information Design Application
Bina Nusantara
Information Design
Web sites
Forms
ManualsMapsPublicationsSigns
Slides
Packages
Menus
Desain Informasi yang Efektif
• Membantu orang bernavigasi dan memahami fakta, angka, arah, dan tuntutan
• Membantu orang menyelesaikan tugas, memecahkan masalah, atau memenuhi kebutuhan
• Meminimalkan / menghilangkan frustasi• Memahami target audiens dan memastikan
bahwa isi itu penyajian dan pengiriman melayani mereka..
Bina Nusantara
Bina Nusantara
Textbook and Materials• The Practical Guide to Information Design.
– Author : Lipton, R. (2007). – Publisher : John Wiley & Sons, Inc. New Jersey. – ISBN : 978-0-471-66295-2.
• The Essentials of Instructional Design : Connecting Fundamental Principles with Process and Practice. – Author : Brown, A. H., & Green, D. (2006). – Publisher : Pearson Prentice Hall. New Jersey. – ISBN : 978-0-1311-8220-2.
• The Cambridge Handbook of Multimedia Learning. – Author : Meyer, R. E. (Eds.). (2005)– Publisher : Cambridge University Press. New York. – ISBN : 0-521-54751-2.
DataReading Gaming Sports Arts
Male 8 15 10 9
Female 12 6 8 16
Bina Nusantara
Popular Hobbies
Information
Gestalt Principles of Perception
• Similarity (Kesamaan)• Proximity (kedekatan)• Figure/Ground (gambar / ruang)• Pragnanz• Common Fate• Closure & Good Continuation (Penutupan & Kelanjutan
Bagus)
Bina Nusantara
Bina Nusantara
Information Architecture• Linear / Sequential
• Hierarchical
• Network / Web
Organisasi Informasi• Lokasi• Alfabet• Waktu• Kategori• Hirarki
Information Rank• Data
– Bahan baku komunikasi• Informasi
– Data yang terorganisir menjadi bentuk yang berarti untuk membantu komunikasi
• Pengetahuan– Dikembangkan melalui pengalaman pengguna
dengan informasi• Kebijaksanaan
– Metaknowledge - kemampuan untuk pengetahuan abstrak ke situasi baru
Bina Nusantara
Information Design
Instructional Design
Instructional Design Origin
Bina Nusantara
Instructional Design Definition
Bina Nusantara
Proses yang sistematik and reflektif yang menerjemahkan prinsip-prinsip pembelajaran dan instruksi ke dalam rencana untuk bahan pengajaran, aktivitas, sumber daya informasi, dan evaluasi
– Smith & Ragan. (1999). Instructional design (2nd Ed.). New York : Wiley.
Instructional Designer
menciptakan sesuatu yang memungkinkan seseorang atau sekelompok orang untuk:
• belajar tentang topik tertentu• mengembangkan atau meningkatkan satu set
keterampilan• mendorong pelajar untuk melakukan studi
lebih lanjut.
menciptakan suasana pembelajaran yang efektif dengan memanfaatkan penelitian yang tersedia di:
• Bagaimana orang berpikir dan belajar• ketersediaan teknologi untuk komunikasi• Metode analisis
Bina Nusantara
Instructional Designer
Bina Nusantara
Outline Materi• Anatomi Teks• Menulis Informasi• Kode Warna
Information Design (Text)Week 02
Element Typography
Bina Nusantara
1. Size
2. Typeface
3. Line length
4. Style
5. Alignment
6. Spacing
7. Placement
8. Color
1. Size• 72 point = 1 inch = 2.54 cm• Bergantung dari tujuan informatisi dan pembaca
– Kartu nama : 6pt - 8pt– Website : 9pt - 12pt
Bina Nusantara
2. Typeface• Typography 90% management ruang + 10% letterform
management• Serif Kertas print• Sans Serif Web/slides• Typeface peringkat terendah kepentingan dalam
Desain teks
3. Line Length• width of the type line/column• Books/manuals : 50 - 70 char• Newsletter : 39 - 52 char/column• Jangan pernah set agar sesuai dengan kertas / media• Size dan kompresi dapat mempengaruhi line length
4. Style• Italic kurang terbaca dari Roman• Real italic and pseudo italic• Tidak ada italics pada layar komputer• Bold untuk kontras / penekanan / penting• Orang dapat membaca lowercase 5-10% lebih cepat dari
ALL-CAPS • Hindari underline, shadow, and outline
5. Alignment
• Left-aligned / ragged-right paling mudah untuk dibaca
Bina Nusantara
Left-aligned
•Approachable•Accessible•Friendly
Justified•Simetris•Formal•tepat•konservatif
6. Spacing– Antara paragraf
• Tambahkan baris spasi / indent untuk menyuntik white space
– Antara kalimat
• Satu ruang hanya kata– Antara baris teks
• terlalu-ketat bisa melakukan line crashing• yang terlalu longgar bisa menekankan latar
belakang bukan teks– Antara huruf
• yang terlalu longgar bisa membuat teks terlihat sulit untuk dibaca
Bina Nusantara
7. Placement
• Gunakan grid untuk merancang tata-letak– Grid’s elements margins and columns– Membangun kontinuitas– Pengorganisasian informasi
• Margin
- Bingkai halaman
- Top margin>margin bawah
• Columns
- Tambahkan struktur
- 1 kolom <3 / 4 halamanBina Nusantara
8. Color• Tampilkan perbedaan• Tampilkan kesamaan• Bantuan pembaca
menemukan hal-hal• Mendorong pembaca untuk
bergerak melalui informasi• Bantuan pembaca mengingat
informasi• Tekankan sesuatu• Memainkan sesuatu ke
bawah• Sampaikan arti
Bina Nusantara
Show Differences
Bina Nusantara Category 1
Category 2
Category 3
Category 4
0
1
2
3
4
5
6
Series 1Series 2Series 3
Category 1
Category 2
Category 3
Category 4
0123456
Series 1Series 2Series 3
Show Similarities
Bina Nusantara http://www.jillwachter.com/home.html
Encourage readers to move through information
Bina Nusantara
Help Readers Recall Information
Bina Nusantara
Emphasize Something
Bina Nusantara
Play Something Down
Bina Nusantara
Colors Colors
Colors Colors
Convey Meaning
• Inherent or assigned
Bina Nusantara
Pertimbangan warna
• Budaya pengguna• Sedikit warna = lebih berkesan (<4 warna)Nameable • Warna lebih diingat• Membuat kode warna yang sama kuat
Bina Nusantara
1 2 3 4 5
Bina Nusantara
Outline Materi
• Pictorial Information• Diagrams• Forms
Information Design (Picture)Week 03
Gambar di Desain Informasi harus:
• Jadilah dalam fokus• Memiliki fokus• Berarti sesuatu• Tunjukkan apa yang Anda mengatakan• Ceritakan apa yang Anda menunjukkan• Tampak dekat dengan tempat Anda berbicara tentang
mereka• Point pembaca ke dalam teks
Bina Nusantara
Gambar harus dalam fokus
Bina Nusantara
Gambar harus dalam fokus
Bina Nusantara
Gambar harus dalam fokus
Bina Nusantara
Gambar harus berarti sesuatu
Bina Nusantara
Gambar harus menunjukkan apa yang Anda katakan
Bina Nusantara
Tampak dekat dengan tempat Anda berbicara tentang mereka
Bina Nusantara
Point pembaca ke dalam teks
Bina Nusantara
Diagrams
• Biasanya berurusan dengan angka• Merupakan informasi, yang akan mengambil banyak
kata dan angka untuk menggambarkan, menjadi media ringkas
• Dapat memberikan gambaran sebelum penjelasan tekstual
• Meningkatkan informasi pengakuan dan ingat
Bina Nusantara
Fungsi Diagrams
• Bandingkan angka• Plot lokasi• Memperjelas hubungan• Tampilkan kecenderungan• Cepat menjawab pertanyaan bagi pembaca
Bina Nusantara
Diagram Category
Diagram
Quantitative
Graphs Maps
Qualitative
Flow charts
Family trees
Process diagrams
Bina Nusantara
Graphs- Grafik bar• Tampilkan jumlah
dalam urutan kronologis
– Grafik Line• Tekankan tren
– Pie Charts• Tunjukkan
bagaimana bagian tersebut berhubungan dengan seluruh
Bina Nusantara http://www.skwirk.com/p-c_s-16_u-188_t-632_c-2347/bar-column-line-climatic-and-proportional-graphs/nsw/bar-column-line-climatic-and-proportional-graphs/geography-skills/tables-graphs-and-diagrams
Pertimbangan Diagram Kuantitatif
• garis tebal atau model 3D dapat mengaburkan titik data
• Gunakan latar belakang baris jika diperlukan
• grafik pie Hindari jika Anda ingin membandingkan lebih dari 5 - 6 bagian
• Membuat tombol / legenda singkat dan sederhana untuk mengingat mudah
Bina Nusantara
Chart Title
Flow Charts & Process Diagrams Considerations
Bina Nusantara
Pertimbangan Flow Charts & Diagrams Proses• Solid lines = jalan langsung• Garis putus-putus = sekunder / path opsional• Mulai dari atas, berakhir di bagian bawah• Bentuk yang berbeda-beda = layanan yang berbeda
Forms Design• Membantu navigasi• Benar mengisi lapangan• Menghilangkan pengguna frustrasi
Pertimbangan Forms Design• Apa yang harus kita coba lakukan?• Siapakah pengguna?• Apa yang saya harapkan pengguna untuk melakukan?
Form’s Elements• Look
– Jumlah ruang yang diperlukan
– Kelompok terkait pertanyaan
– Membuat jelas pertanyaan orang yang harus mengisi
• Content– katakan pertanyaan
untuk memudahkan pemahaman
Bina Nusantara
*
*
*
Form’s Elements
• Task structure– tentukan informasi yang
diperlukan dari bentuk– Hindari mengisi ulang
Bina Nusantara
Bina Nusantara
Outline Materi• Learning Process• Types of Learning• Learning Domains• Multimedia Learning• Cognitive Theory
Instructional Design PrinciplesWeek 04
Learning ProcessThink
Learn
Behaviorism
Cognitivism
Constructivism
Bina Nusantara
Types of Learning
Learning Types
Cognitive Affective Psychomotor
Bina Nusantara
Cognitive Domain
KognitifPengetahuan
Pemahaman
Aplikasi
Analisis
Perpaduan
Evaluasi
Bina Nusantara
Affective DomainAfektif
Menerima
Menanggapi
Menilai
Pengorganisasian
Nilai Karakteristik
Bina Nusantara
Psychomotor DomainPsikomotor
Persepsi
Set
Dipandu respon
Mekanisme
Respon yang lebih Complex
Adaptasi
Origination
Bina Nusantara
Multimedia Learning
Multimedia
• Text• Image• Audio• Animation• Video
Bina Nusantara
Learning
• Construction of knowledge
Cognitive TheoryMultimedia
Presentation
Each Course in the study program contributes to the graduate competencies that are divided into employability and entrepreneurial skills and study program specific outcomes, in which students need to have demonstrated by the time they complete their course.
Sensory Memory
Ears
Eyes
Working Memory
Verbal Model
Pictorial Model
Sounds
Images
Long-Term Memory
Prior Knowledge
CTML Assumptions• Dual channels• Kapasitas terbatas
– 7±2 potongan untuk memori kerja
• Active processing
Bina Nusantara
Outline Materi• Presentasi• Demonstrasi• Diskusi• Pembelajaran kooperatif• Penemuan• Pemecahan masalah• Tugas & praktek• Tutorial• Lain-lain
Instructional MethodsWeek 05
Bina Nusantara
Metode pembelajaran
Prosedur, dipilih untuk membantu peserta didik mencapai tujuan pembelajaran
– Heinich, Molenda, Russell, & Smaldino, 1999
Presentasi • menggunakan informasi verbal dan / atau simbol visual
untuk menyampaikan materi• Salah satu cara komunikasi• Efisien dalam waktu• Dikendalikan oleh presenter
Bina Nusantara
Demonstrasi
• Informasi yang ditampilkan seperti yang akan digunakan
• Penting untuk mengajarkan keterampilan psikomotorik
• Dapat mengatur standar kinerja• Lebih otentik dari presentasi - contoh
dunia nyata• Lebih efisien dalam waktu dari
pengalaman tangan• Seringkali tidak efisien sebagai
presentasi (misalnya pesawat terbang melibatkan biaya yang lebih)
Bina Nusantara
Diskusi • Menerapkan prinsip-prinsip
dan informasi melalui wacana verbal
• Dapat membantu dalam pengembangan komunitas virtual
• Baik untuk pengetahuan yang tidak tetap atau terbatas
• Membutuhkan moderasi dan fasilitas dengan hati-hati, harus melibatkan seluruh kelompok
Pembelajaran Kooperatif
• Koperatif bukan kompetitif• Ideal untuk belajar dan
ketrampilan sosial kolaboratif
• Mengembangkan komunikasi dan keterampilan berpikir kritis
• Siswa dapat belajar satu sama lain
• Bisa mengajarkan tanggung jawab individu
Bina Nusantara
Penemuan
• "Belajar terbaik dengan melakukan" prinsip
• Trial and error• Belajar lebih awet /
permanen• Pembelajaran individual• Tidak selalu menghasilkan
pendekatan yang paling efektif untuk masalah
• Tidak efisien
Bina Nusantara
Problem Solving
• Gunakan pelajarian konten dan keterampilan sebelumnya
• Proses:– Mendefinisikan masalah– Memeriksa data– Hasilkan Solusi
• Relevan dengan dunia nyata• Membuat masalah sesuai
dengan tingkat keterampilan mahasiswa
• Ex: Studi Kasus
Drill & Practice
• Bermanfaat untuk menghafal atau mengingat informasi• Ex: kosakata 'flashcard'• Otomatisitas• Tidak sangat memotivasi kecuali termasuk elemen
game• Harus mencakup umpan balik korektif untuk memulihkan
kesalahan
Bina Nusantara
Tutorial• Memiliki tutor
– bisa orang / komputer / barang cetakan
• Biasanya digunakan untuk keterampilan dasar– ex: membaca / aritmatika
• Dapat termasuk elemen presentasi, demonstrasi dan latihan dan praktek
• Cocok lebih untuk konten daripada proses pembelajaran yang berorientasi
• Efisien untuk menghasilkan• Khas CBT banyak
Permainan • Memotivasi dan kompetitif• Ditetapkan aturan dan tujuan yang menantang• Sering membutuhkan-keterampilan pemecahan masalah
dan penguasaan konten tertentu (ex: matematika fakta / kosakata)
• Perlu untuk mengakomodasi perbedaan individu• Sulit untuk merancang dan program
Bina Nusantara
Simulasi • Realistis pendekatan-situasi kehidupan nyata• Hindari beban atau risiko yang terlibat dalam situasi
nyata• Mempromosikan kognitif, afektif, dan keterampilan
interpersonal• Bisa berlatih kerjasama dan kerja sama tim
Bina Nusantara
Lain-Lain• Permainan• Simulasi• Virtual Reality• Augmented Reality
Pertimbangan Metode Instruksional
• Setiap metode memiliki kelebihan / kekurangan• Tingkat interaktivitas• Pembelajar jumlah• Karakteristik Pembelajar• Hasil pembelajaran• Metode Gabungan
Bina Nusantara
Outline Materi• Media Pembelajaran• Proses Produksi• Desain Model• Tim Produksi• Manajemen Produksi
Instructional Design ProcessWeek 06
Instructional Media
Print based
Lembar kerja
Buku teks
Audiovisual
Films
Videos
Slide presentasi
Rekaman suara
Interactive
Software
Bina Nusantara Dapat dikombinasikan
Proses Produksi
Preproduction
• Perencanaan
Production
• Desain• Pemba
ngunan
Postproduction
• Distribusi
• Integrasi
• Arsip Produk
Bina Nusantara
Model Desain Instruksional
• Penawaran pedoman menjamin kualitas dan keseragaman
• ADDIE bukan desain model pembelajaran yang spesifik• Bisa secara signifikan mengurangi biaya pelatihan dan
pendidikan• Dua ID model terkenal:
– Sistem Pendekatan Model (oleh Dick dan Carey)– Desain Instruksional Rencana (oleh Kemp, Morrison, dan Ross)
Bina Nusantara
Model Pendekatan Sistem • Dirancang untuk menekankan pentingnya pemeriksaan dan
pemurnian instruksi dan menyediakan panduan untuk membuat perbaikan
Bina Nusantara
Identify instructional goals
Write performan
ce objectives
Develop criterion
standards
Develop instructio
nal strategies
Develop instructio
nal materials
Design & conduct
formative evaluation
Design & conduct
formative evaluation
Conduct instructio
nal analysis
Identify entry
behaviors
Revisi instruksi
Rencana Desain Instruksional
Bina Nusantara
Masalah instruksional
Karakteristik Pembelajar
Analisis tugas
Tujuan Instruksional
Konten sequencing
Strategi instruksional
Instruksional pengiriman
Instrumen evaluasi
Sumber daya instruksional
Perencanaan
Revisi
Formative evaluation
Project management
Tim Produksi
• Manajer Produksi• Subject Matter Expert• Penulis• Art Director• Graphic Artist• Sound Designer• Direktur video• Video Editor
• Interface Designer• Programmer• Bakat
Bina Nusantara
Segitiga Media-Produksi
Waktu
UangKualitas
Bina Nusantara
Manajemen Produksi
• Tugas dan prosedur yang memfasilitasi penyelesaian proyek
• Menjaga komunikasi antar peserta proyek• Kalendar produksi
– Gantt, PERT, and CPM
• Gaya panduan• Storyboards
– Navigasi layout / peta
• Prototyping
Bina Nusantara
Outline Materi• Prinsip Multimedia• Contiguity /Persentuhan• Modality/Pengandaian• Redundansi• Koherensi• Signaling• Mengelompokkan & Pretraining• Personalisasi, Suara, dan Gambar
Basic Multimedia Learning Principles
Week 07
Multimedia Principle
• Orang-orang belajar lebih baik dari kata dan gambar daripada kata-kata sendiri
• Kata-kata dan gambar yang relevan• Terbaik untuk pelajar pemula• Image untuk dekorasi hanya dapat mengganggu belajar• visual animasi VS statis
Bina Nusantara
Contiguity
• Kedekatan spasial– Hadir sesuai kata dan gambar dekat
satu sama lain– Terlalu banyak teks rollover teknik
• Kedekatan Temporal – Hadir sesuai animasi / gambar dan
narasi secara bersamaan
Bina Nusantara
1
2
3
Spatial Contiguity
• Scrolling screen• Feedback• Outer links• Exercise Directions• Captions
Bina Nusantara
Temporal Contiguity
• Dipisahkan link untuk audio dan video • Gambar pertama, setelah itu narasi
Modality
• Hadir kata sebagai narasi audio, daripada layar teks pada
• Kompleks materi dalam kecepatan yang terus menerus cepat
• Tuntutan Teknis• Nonnative learners,, persamaan matematika, atau
istilah-istilah teknis
Bina Nusantara
Redundancy
• Jelaskan visual dengan kata-kata di audio atau teks, tidak keduanya
• Jika tidak ada grafis yang disajikan, berlebihan dicetak dan teks berbicara dapat meningkatkan pembelajaran
• Redundant dicetak dan teks lisan dapat efektif dalam situasi tertentu– Tidak ada presentasi bergambar– Bahasa Belajar – Cacat pendengaran
Bina Nusantara
Coherence
• Menambahkan bahan menarik dapat menyakiti belajar• Minimalkan jumlah detail yang membingungkan dan
tidak perlu (audio tambahan, gambar, atau kata-kata)• Stick dengan tujuan instruksional• Berbeda tingkat pengetahuan sebelumnya pelajar
perbedaan jumlah rincian berkurang
Bina Nusantara
Signaling
• Sertakan isyarat yang menekankan materi inti yang penting – Garis Besar / heading
Segmenting & Pretraining
• Mengelompokkan– Hadir materi dalam segmen daripada sebagai unit terus
menerus– Kebebasan kontrol untuk pelajar?? hanya Pace?hanya Order ?– Pelajar pengalaman VS pelajar awam
• Pretraining– Orang belajar lebih baik ketika mereka tahu nama dan
karakteristik konsep utama
Bina Nusantara
Theme Name
Spell Check
Slideshow View Fit to Slide
Zoom Function
Normal View
Slide Sorter View
Personalization, Voice, and Image
• Personalization– Conversational style VS formal style beware of coherence
principle
• Voice– Human standard voice VS machine/foreign-accented human
voice
• Image– On screen speaker’s image is no better than off screen one
Bina Nusantara