REKA BENTUK INTERAKSI

PENGAJARAN 10A REKA BENTUK INTERAKSI STANDARD KANDUNGAN 3.1 Reka bentuk Interaksi STANDARD PEMBELAJARAN Murid boleh: 3.1.1 Mengkaji keperluan interaksi antara manusia dan komputer 3.1.2 Menilai produk interaktif berdasarkan tujuan dan prinsip asas reka bentuk interaktif Guru hendaklah memastikan di akhir penggunaan modul PdP ini, murid dapat mencapai Standard Pembelajaran yang dinyatakan di atas. Kandungan Muka surat Rancangan Pengajaran 10A 487 Lembaran Kerja 10A-1 490 Lembaran Kerja 10A-2 492

PENGAJARAN 10A STANDARD KANDUNGAN 3.1 Reka Bentuk Interaksi STANDARD PEMBELAJARAN Murid boleh: 3.1.1 Mengkaji keperluan interaksi antara manusia dan komputer 3.1.2 Menilai produk interaktif berdasarkan tujuan dan prinsip asas reka bentuk interaktif BAHAN BANTU MENGAJAR (BBM) Bahan untuk kelas 1. Video Reka Bentuk Interaksi: https://www.youtube.com/watch?v=q5763ppchvw Bahan untuk setiap kumpulan Tiada Bahan untuk setiap murid 1. Lembaran Kerja 10A-1 2. Lembaran Kerja 10A-2 SUMBER TAMBAHAN Masa: 60 Minit 1. 9 Prinsip Kebolehgunaan: https://www.freshconsulting.com/ui-design-framework/ Penerapan Pemikiran Komputasional (PPK): Algorithm and Procedures (ALG) Problem Decomposition (PD) 486 10A REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10A MASA CADANGAN AKTIVITI BBM PEMETAAN 10 Minit Set Induksi 1. Guru memperkenalkan konsep rekabentuk interaksi (UI) kepada murid melalui video. Contoh video yang sesuai untuk digunakan: https://www. youtube.com/watch?v=q5763ppchvw. 2. Sebagai pengenalan kepada dunia rekabentuk interaksi, guru menjelaskan bahawa rekabentuk interaksi ialah unsur yang penting dalam kehidupan kita, dan merupakan penentu sama ada sesebuah aplikasi berjaya atau tidak. 3. Guru seterusnya menunjukkan beberapa aplikasi mudah alih popular seperti Spotify, Facebook, Instagram dan sebagainya dengan mengenal pasti unsur-unsur yang dikongsi bersama antara aplikasi yang disebut. Contoh unsur-unsur yang boleh dinyatakan oleh murid: Pengunaan bahasa yang terang and senang difahami. Pengunaan simbol dan gambar untuk menunjukkan fungsi, melebihi pengunaan perkataan. Pengunaan warna yang konsisten sebagai identiti kepada syarikat tersebut (Contoh: warna biru Facebook). Video rekabentuk interaksi (UI): https:// www. youtube. comwatch? v=q5763p Pchvw. 30 Minit Aktiviti 1: Pengenalan Tujuan Reka Bentuk Interaksi 1. Guru menerangkan keperluan interaksi antara manusia dan komputer kerana pencipta produk perlu memahami perkara berikut (4 tujuan reka bentuk interaksi): Kefungsian (Functional) - Contoh Kereta Toyota. Kebolehgunaan (Usability) Contoh Microsoft Pixel Sense. Tarikan Estetik (Aesthetic Appeal) Contoh Apple iphone. Kepuasan Pengalaman Pengguna (Compelling User Experience) Contoh Google Glass. 2. Guru menerangkan lima prinsip kebolehgunaan yang boleh diaplikasikan sebagai prinsip asas reka bentuk interaksi. Prinsipnya ialah: Kesenangan Pembelajaran Bolehkah pengguna baru mengemudi reka bentuk tersebut dengan mudah? Kecekapan Berapa cepatnya pengguna boleh melakukan tugas? (Sebagai pengukuran, adalah dinasihatkan bahawa pengguna dapat menyelesaikan tugas dalam maksimum 3 hingga 5 klik). Kertas Mahjong Standard Pembelajaran 3.1.1 KA21 KS PPK ALG PD 487 10A REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10A MASA CADANGAN AKTIVITI BBM PEMETAAN Pengekalan Berapa lamakah seseorang pengguna boleh mengingati muka pengguna jika pengguna tersebut tidak melawat aplikasi tersebut dalam jangka masa yang panjang? (Jikalau pengguna tidak melawat sesuatu aplikasi [contoh: WeChat] pengguna dapat menggunakannya tanpa perlu dikenal pasti antara muka pengguna. Ralat Kekerapan pengguna melakukan kesilapan dalam interaksinya dengan aplikasi dan betapa mudah untuk pengguna membetulkan semula kesilapan tersebut. Kepuasan Adakah pengguna berpuas hati dengan pengalaman mereka berinteraksi dengan aplikasi? 3. Guru menunjukkan contoh aplikasi untuk menerangkan prinsip asas reka bentuk interaksi dengan lebih jelas. Contoh aplikasi yang boleh digunakan: Laman SPSS sekolah 4. Murid dibahagikan kepada kumpulan kecil. (3 orang sekumpulan) 5. Murid diberikan kertas mahjong untuk melakarkan tiga skrin interaksi untuk sebuah aplikasi mudah alih. 6. Murid dikehendaki untuk menentukan fungsi aplikasi tersebut dan mengaplikasikan lima prinsip yang dinyatakan. Contoh kertas mahjong murid: 488 Selepas anda melakar aplikasi anda di atas kertas mahjong, isikan Lembaran Kerja 10A-1 untuk memastikan aplikasi anda dibina menggunakan prinsip asas reka bentuk interaksi. 10A REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10A MASA CADANGAN AKTIVITI BBM PEMETAAN 15 Minit Aktiviti 2: Menilai Reka Bentuk Interaksi Berdasarkan Tujuan dan Prinsip Asas Reka Bentuk Interaksi 1. Guru menerangkan bahawa lima prinsip kebolehgunaan boleh digunakan untuk menilai produk interaktif. 2. Setiap kumpulan dikehendaki untuk membentangkan lakaran skrin interaksi masing-masing dan kumpulan lain dikehendaki untuk menilai setiap pembentangan menggunakan tujuan dan prinsip asas rekabentuk interaksi yang ditunjukkan oleh guru. 3. Setiap kumpulan menilai pembentangan menggunakan Lembaran Kerja 10A-1. 4. Selepas pembentangan semua kumpulan, setiap murid dikehendaki untuk mengisikan refleksi masing-masing terhadap rekabentuk interaksi setiap aplikasi yang dibentangkan dalam Lembaran Kerja 10A-2. Lembaran Kerja 10A-1 Lembaran Kerja 10A-2 Kertas origami Standard Pembelajaran 3.1.1 5 Minit Penutup 1. Murid menyenaraikan semula tujuan dan prinsip rekabentuk interaksi. 2. Guru merumuskan pengajaran dan memberitahu murid bahawa untuk kelas seterusnya, murid akan menggunakan tujuan dan prinsip rekabentuk interaksi dalam atur cara yang dibangunkan. Standard Pembelajaran 3.1.1 489 10A REKA BENTUK INTERAKSI

LEMBARAN KERJA 10A-1 Standard Pembelajaran: 3.1.2 NAMA: KELAS: TARIKH: Berdasarkan lakaran aplikasi anda di atas kertas mahjong semasa Aktiviti 1, tandakan prinsip asas reka bentuk interaksi yang digunakan. Prinsip Asas Reka Bentuk Interaksi Kesenangan Pembelajaran Kecekapan Pengekalan Ralat ( ) Kepuasan 490 10A REKA BENTUK INTERAKSI Komen guru: Tarikh:

LEMBARAN KERJA 10A-1 Standard Pembelajaran: 3.1.2 NAMA: KELAS: TARIKH: Arahan untuk guru: Setiap kumpulan perlu mempunyai satu borang pernilaian untuk setiap kumpulan lain. Contohnya, kelas mempunyai 4 kumpulan. Setiap kumpulan perlu mempunyai 3 helai borang pernilaian Kefungsian Kriteria Kebolehgunaan Tarikan Estetik 1 Aplikasi tidak mempunyai fungsi tertentu Aplikasi amat susah untuk digunakan Aplikasi mempunyai reka bentuk yang rumit dan kurang kreatif 2 Aplikasi mempunyai fungsi tertentu Aplikasi mudah digunakan oleh pengguna dengan bimbingan Aplikasi mempunyai reka bentuk yang kreatif tetapi agak rumit Markah 3 Aplikasi mempunyai fungsi yang efisien dan tertentu Aplikasi mudah digunakan tanpa bimbingan Aplikasi mempunyai reka bentuk yang senang difahami 4 Aplikasi mempunyai pelbagai fungsi yang efisien dan tertentu Aplikasi mudah digunakan dan tiada masalah pengguna Aplikasi mempunyai reka bentuk yang senang difahami dan kreatif Kesenangan Pembelajaran Aplikasi susah digunakan oleh pengguna Aplikasi agak mudah digunakan oleh pengguna Aplikasi amat mudah digunakan oleh pengguna Aplikasi amat mudah digunakan oleh pengguna dan mempunyai panduan pengguna 491 Kecekapan Pengekalan Kepuasan Pengalaman Pengguna Pengguna memerlukan lebih daripada 5 klik untuk melakukan tugas Pengguna perlu belajar semula cara menggunakan aplikasi selepas seminggu tidak menggunakan aplikasi Pengguna tidak berpuas hati menggunakan aplikasi Pengguna memerlukan 3-5 klik untuk melakukan tugas Pengguna perlu belajar semula cara menggunakan aplikasi selepas sebulan tidak menggunakan aplikasi Pengguna kurang berpuas hati menggunakan aplikasi Pengguna memerlukan 2 klik untuk melakukan tugas Pengguna perlu belajar semula cara menggunakan aplikasi selepas setahun tidak menggunakan aplikasi Pengguna berpuas hati menggunakan aplikasi Pengguna hanya perlu satu klik untuk melakukan tugas Pengguna langsung tidak belajar semula cara menggunakan aplikasi apabila sudah tidak menggunakannya Pengguna amat berpuas hati menggunakan aplikasi 10A REKA BENTUK INTERAKSI Komen guru: Tarikh:

LEMBARAN KERJA 10A-2 Standard Pembelajaran: 3.1.2 3. Lakukan perbandingan antara beberapa prinsip asas reka bentuk interaktif. 4. Nyatakan kesesuaian penggunaannya. 492 Komen guru: 5. Cadangkan penambahbaikan prinsip asas reka bentuk interaktif yang digunakan. Tarikh: 10A REKA BENTUK INTERAKSI Komen guru: Tarikh:

PENGAJARAN 10B CARTA ALIR REKA BENTUK INTERAKSI STANDARD KANDUNGAN 3.2 Paparan dan Reka Bentuk Skrin STANDARD PEMBELAJARAN Murid boleh: 3.2.1 Mengaplikasi proses reka bentuk interaksi dalam atur cara yang dibangunkan Guru hendaklah memastikan di akhir penggunaan modul PdP ini, murid dapat mencapai Standard Pembelajaran yang dinyatakan di atas. Kandungan Muka surat Rancangan Pengajaran 10B 495 Lampiran 10B-1 498 Lembaran Kerja 10B-1 501 Tiket Keluar 503

PENGAJARAN 10B STANDARD KANDUNGAN 3.1 Reka Bentuk Interaksi STANDARD PEMBELAJARAN Murid boleh: 3.2.1 Mengaplikasi proses reka bentuk interaksi dalam atur cara yang dibangunkan BAHAN BANTU MENGAJAR (BBM) Bahan untuk kelas 1. Video Reka Bentuk Interaksi: https://www.youtube.com/watch?v=s6whddo6oay Bahan untuk setiap kumpulan 1. Lampiran 10B-1 2. Kertas A3/Kertas Mahjong Masa: 60 Minit Penerapan Pemikiran Komputasional (PPK): Algorithm and Procedures (ALG) Problem Decomposition (PD) Bahan untuk setiap murid 1. Lembaran Kerja 10B-1 SUMBER TAMBAHAN 1. Contoh susun atur cara visual: a. http://uxkits.com/products/mobile-app-visual-flowchart b. https://www.graffletopia.com/stencils/1161 494 10B CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10B MASA CADANGAN AKTIVITI BBM PEMETAAN 5 Minit 10 Minit Set Induksi 1. Guru menunjukkan video yang menunjukkan proses penghasilan aplikasi melalui proses reka bentuk interaksi. Contoh video yang boleh ditunjukkan: https://www. youtube.com/watch?v=s6whddo6oay. 2. Guru bersoal jawab bersama murid tentang proses reka bentuk interaksi. Aktiviti 1: Proses Reka Bentuk Interaksi 1. Guru mengimbas kembali pengajaran lepas dan menanyakan pada murid tujuan dan prinsip asas reka bentuk interaksi yang perlu dipatuhi sebelum membina sesuatu aplikasi. 2. Guru menerangkan proses reka bentuk interaksi menggunakan carta di bawah: Video proses reka bentuk interaksi: https:// www. youtube. comwatch? v=s6whdd O6oAY Standard Pembelajaran 3.2.1 495 Penjelasan: Mengenal pasti keperluan pengguna Proses reka bentuk interaksi bermula dengan mengenal pasti keperluan pengguna. Langkah ini boleh dilakukan dengan mengendalikan soal selidik dan temu duga dengan pengguna. Reka (Reka Semula) Reka aplikasi yang ingin dibina. Rekaan boleh dilakukan atas kertas atau menggunakan perisian yang diingin. Bina satu versi interaktif Satu versi yang interaktif perlu dibina supaya pengguna boleh mencuba dan mengalami sendiri penggunaan aplikasi dengan menyeluruh. 10B CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10B MASA CADANGAN AKTIVITI BBM PEMETAAN Menguji Selepas versi interaktif dibina, murid perlu menguji versi interaktif tersebut bersama pengguna supaya murid boleh mendapat maklum balas tentang versi tersebut dan menambah baik aplikasi masing-masing. Selepas menguji versi interaktif, murid boleh kembali ke proses sebelumnya untuk menambah baik dan membaiki aplikasi/produk masing-masing. Setiap langkah boleh diulang sehingga produk akhir terhasil. 3. Guru menjelaskan bahawa bagi pengajaran hari ini, murid akan belajar cara-cara melukis carta alir visual untuk aplikasi mereka. 4. Guru menunjukkan contoh carta alir visual seperti berikut: 496 15 Minit 5. Guru menjelaskan terdapat pelbagai jenis antara muka pengguna yang boleh dijadikan rujukan. 6. Guru menunjukkan contoh menggunakan Lampiran 10B-1. Aktiviti 2: Lakaran Carta Alir Visual 1. Dalam kumpulan berempat, guru memberikan arahan untuk aktiviti sumbangsaran hari ini: a. Guru memberikan kertas A3/kertas mahjong kepada setiap kumpulan. b. Guru menjelaskan setiap laman dan bahagian pada laman aplikasi, terdapat kegunaannya tersendiri. c. Guru menerangkan setiap kumpulan, perlu melukis carta alir visual aplikasi menghantar mesej (SMS) untuk menunjukkan bagaimana proses aplikasi berlaku. d. Guru menjelaskan bahawa carta alir yang dilukis mestilah mudah difahami. Murid diminta untuk menggunakan anak panah yang jelas. e. Guru mengedarkan contoh carta alir (Lampiran 10B-1) kepada setiap kumpulan sebagai rujukan. Kertas A3/Kertas Mahjong Lampiran 10B-1 Standard Pembelajaran 3.2.1 KA21 KS 10B CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10B MASA CADANGAN AKTIVITI BBM PEMETAAN 20 Minit 2. Guru memilih 2-3 kumpulan untuk berkongsi hasil kerja kumpulan mereka. 3. Kumpulan lain diminta untuk memberikan komen penambahbaikan. Aktiviti 2: Penghasilan Carta Alir Visual 1. Guru memulangkan kertas mahjong lakaran reka bentuk interaksi daripada pengajaran lepas. 2. Setiap murid dikehendaki untuk menghasilkan carta alir visual untuk lakaran reka bentuk interaksi masing-masing. 3. Murid menghasilkan carta alir visual dalam Lembaran Kerja 10B-1. Lembaran Kerja 10B-1 Standard Pembelajaran 3.2.1 10 Minit Penutup Tiket Keluar 1. Guru merumuskan pengajaran hari ini. 2. Murid mengisikan tiket keluar. 3. Beberapa orang murid dipilih untuk berkongsi jawapan tiket keluar. 497 10B CARTA ALIR REKA BENTUK INTERAKSI

LAMPIRAN 10B-1 CONTOH SUSUSAN ANTARA MUKA PENGGUNA 498 10B CARTA ALIR REKA BENTUK INTERAKSI

LEMBARAN KERJA 10B-1 Standard Pembelajaran: 3.2.1 NAMA: KELAS: TARIKH: Contoh carta alir visual: 501 Gunakan anak panah untuk menghubungkan proses aplikasi anda. Kenal pasti bagaimana pengguna akan mengemudi aplikasi anda dari satu laman ke laman seterusnya menggunakan simbol berikut: 10A REKA BENTUK INTERAKSI

LEMBARAN KERJA 10B-1 Standard Pembelajaran: 3.2.1 Lukiskan carta alir visual anda dalam ruangan di bawah: 502 Terangkan proses reka bentuk interaksi. 10A REKA BENTUK INTERAKSI Komen guru: Tarikh:

TIKET KELUAR ATUR CARA VISUAL APLIKASI Fikirkan semula pengajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? Lengkapkan jadual di bawah. 3 2 Perkara yang saya belajar hari ini Perkara yang saya rasa menarik untuk pengajaran hari ini 1 Soalan yang saya masih ada tentang pengajaran hari ini 503 10A REKA BENTUK INTERAKSI

PENGAJARAN 10C CARTA ALIR REKA BENTUK INTERAKSI STANDARD KANDUNGAN 3.2 Paparan dan Reka Bentuk Skrin STANDARD PEMBELAJARAN Murid boleh: 3.2.2 Menghasilkan prototaip paparan dan reka bentuk skrin Guru hendaklah memastikan di akhir penggunaan modul PdP ini, murid dapat mencapai Standard Pembelajaran yang dinyatakan di atas. Kandungan Muka surat Rancangan Pengajaran 10C 506 Tiket Keluar 509

PENGAJARAN 10C STANDARD KANDUNGAN 3.1 Reka Bentuk Interaksi Masa: 60 Minit STANDARD PEMBELAJARAN Murid boleh: 3.2.2 Menghasilkan prototaip paparan dan reka bentuk skrin BAHAN BANTU MENGAJAR (BBM) Bahan untuk kelas 1. Video Reka Bentuk Interaksi: https://www.youtube.com/watch?v=5691bxrt2li Bahan untuk setiap kumpulan Tiada Bahan untuk setiap murid 1. Tiket keluar 2. Komputer / Komputer riba SUMBER TAMBAHAN Penerapan Pemikiran Komputasional (PPK): Algorithm and Procedures (ALG) Problem Decomposition (PD) Simulation (SIM) 1. Tutorial MIT App inventor: http://appinventor.mit.edu/explore/ai2/beginner-videos.html 505 10C CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10C MASA CADANGAN AKTIVITI BBM PEMETAAN 5 Minit 10 Minit Set Induksi 1. Guru menunjukkan video yang menunjukkan contoh aplikasi yang dihasilkan oleh MIT App Inventor Contoh video yang boleh ditunjukkan: https://www. youtube.com/watch?v=5691bxrt2li. 2. Guru menerangkan bahawa aplikasi yang baru ditunjukkan boleh dihasilkan dengan mudah menggunakan aplikasi MIT App Inventor dan murid akan belajar cara menggunakannya untuk menghasilkan aplikasi lakaran pengajaran lepas. Aktiviti 1: Pengenalan kepada App Inventor 1. Guru mengimbas kembali pengajaran lepas dengan menanyakan kepada murid bagaimana kita dapat menggambarkan proses aplikasi yang dibina. Jawapan yang dijangka daripada murid: Carta Alir Visual. 2. Guru berkongsi carta alir visual terbaik daripada murid pengajaran lepas. 3. Guru menjelaskan untuk pengajaran hari ini, murid akan membina aplikasi yang telah dilukis menggunakan App Inventor. 4. Guru menjelaskan murid hanya perlu menukar susunan atur antara muka pengguna yang telah dibuat dalam lembaran kerja ke dalam App Inventor. 5. Guru mengarahkan murid untuk mula menggunakan App Inventor dengan mengikut arahan berikut: a. Murid perlu ke laman web: http://appinventor.mit.edu/ explore/. b. Tekan pada butang jingga di sebelah atas kanan: Create Apps!. c. Teruskan dengan menggunakan akaun Google murid. d. Tekan butang Continue apabila keluar pop-up pengumuman. e. Tekan butang Start new project. f. Berikan nama aplikasi anda untuk Project Name tanpa space. g. Tekan Ok. h. Tekan pada project anda. Video proses reka bentuk interaksi: https:// www. youtube. comwatch? v=5691b xrt2li Komputer / Komputer riba Standard Pembelajaran 3.2.2 PPK PD ALG SML 506 10C CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10C MASA CADANGAN AKTIVITI BBM PEMETAAN i. Murid akan nampak paparan berikut setelah nama telah ditetapkan: j. Gunakan Palette di bahagian kiri untuk memilih susun atur laman pada aplikasi. k. Gunakan Palette User Interface, Layout dan Media untuk melengkapkan laman aplikasi. l. Murid hanya perlu drag and drop block pada Palette yang diperlukan. Contoh adalah seperti berikut: 507 m. Teks pada butang Button boleh diubah dibahagian Properties sebelah kanan skrin. 10C CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10C MASA CADANGAN AKTIVITI BBM PEMETAAN 15 Minit n. Murid boleh mencari gambar di internet untuk memuat naik ke App Inventor jika diperlukan. o. Untuk menambahkan laman pada aplikasi, tekan butang Add Screen. p. Bahagian Layout pada Palette memberikan pilihan kepada murid untuk menyusun gambar atau butang secara melintang (horizontal), tegak (vertical) atau dalam bentuk jadual (table). 6. Guru memberikan masa selama 10 minit kepada murid untuk menyesuaikan diri dengan App Inventor. Aktiviti 2: Membina Aplikasi 1. Guru meminta murid untuk merujuk Lembaran Kerja 10B-1 daripada Pengajaran 10B. 2. Guru meminta murid untuk memindahkan rekaan mereka di atas lembaran ke App Inventor. 3. Guru menjelaskan bahawa fokus murid bukanlah untuk membina setiap laman aplikasi. 4. Guru menjelaskan laman aplikasi yang penting adalah laman utama aplikasi tersebut. 5. Guru meminta 2-3 orang murid untuk berkongsi aplikasi mereka setelah siap. Kertas A3 / Kertas Mahjong Lembaran Kerja 10B-1 (Pengajaran 10B) Standard Pembelajaran 3.2.2 508 10 Minit Penutup Tiket Keluar 1. Guru merumuskan pengajaran hari ini. 2. Murid mengisikan tiket keluar. 3. Beberapa orang murid dipilih untuk berkongsi jawapan tiket keluar. 10C CARTA ALIR REKA BENTUK INTERAKSI

TIKET KELUAR ATUR CARA VISUAL APLIKASI Fikirkan semula pengajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? Lengkapkan jadual di bawah. 3 2 Perkara yang saya belajar hari ini Perkara yang saya rasa menarik untuk pengajaran hari ini 1 Soalan yang saya masih ada tentang pengajaran hari ini 509 10C CARTA ALIR REKA BENTUK INTERAKSI

PENGAJARAN 10D CARTA ALIR REKA BENTUK INTERAKSI STANDARD KANDUNGAN 3.2 Paparan dan Reka Bentuk Skrin STANDARD PEMBELAJARAN Murid boleh: 3.2.3 Membincangkan laporan dari penilaian kuantitatif terhadap paparan dan reka bentuk skrin Guru hendaklah memastikan di akhir penggunaan modul PdP ini, murid dapat mencapai Standard Pembelajaran yang dinyatakan di atas. Kandungan Muka surat Rancangan Pengajaran 10D 512 Lembaran Kerja 10D-1 514 Lembaran Kerja 10D-2 515 Tiket Keluar 516

PENGAJARAN 10D STANDARD KANDUNGAN 3.1 Reka Bentuk Interaksi STANDARD PEMBELAJARAN 3.2.3 Membincangkan laporan daripada penilaian kuantitatif terhadap paparan dan reka bentuk skrin BAHAN BANTU MENGAJAR (BBM) Bahan untuk kelas Tiada Bahan untuk setiap kumpulan 1. Kertas A3 / Kertas Mahjong Bahan untuk setiap murid 1. Lembaran Kerja 10D-1 2. Lembaran Kerja 10D-2 3. Tiket keluar Masa: 60 Minit Penerapan Pemikiran Komputasional (PPK): Algorithm and Procedures (ALG) Problem Decomposition (PD) SUMBER TAMBAHAN 1. Contoh Reka Bentuk Interaksi Rubrik: https://developer.gnome.org/accessibility-devel-guide/stable/gadchecklist.html.en 511 10D CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10D MASA CADANGAN AKTIVITI BBM PEMETAAN 5 Minit 10 Minit Set Induksi 1. Guru menunjukkan salah satu aplikasi yang dihasilkan oleh murid pada pengajaran yang lepas. 2. Murid menilai sama ada aplikasi yang ditunjukkan. 3. Guru menerangkan sesuatu aplikasi susah dinilai tanpa instrumen pernilaian yang sesuai. Aktiviti 1: Kriteria Utama semasa Membina Instrumen Penilaian Paparan & Reka bentuk Skrin 1. Guru menerangkan murid akan belajar menghasilkan instrumen pernilaian paparan dan reka bentuk skrin. 2. Guru menunjukkan borang pernilaian daripada Pengajaran 10A (Lembaran Kerja 10.1) sebagai contoh. 3. Setiap kumpulan dikehendaki untuk membuat aktiviti sumbang saran untuk mengenal pasti kriteria yang diperlukan dalam instrumen pernilaian paparan dan reka bentuk skrin. 4. Guru perlu mengingatkan murid bahawa kriteria perlu dapat diukur dan spesifik. 5. Guru meminta murid menyenaraikan kriteria penilaian dengan kaedah senarai semak, soal selidik, atau rubrik yang mudah. Contoh Kriteria: Kesenangan Pembelajaran Bolehkah pengguna baru mengemudi reka bentuk tersebut dengan mudah? Pemahaman Bolehkah pengguna memahami apa yang dilihat dengan mudah? Daya Penarikan Adakah reka bentuk tersebut menarik secara visual? Kecekapan Berapa cepatnya pengguna boleh melakukan tugas? (Sebagai pengukuran, adalah dinasihatkan bahawa pengguna dapat menyelesaikan tugas dalam maximum 3 hingga 5 klik) Pengekalan Berapa lamakah seseorang pengguna boleh mengingati muka pengguna jika pengguna tersebut tidak melawati aplikasi tersebut dalam jangka masa yang panjang? (Jikalau pengguna tidak melawati sesuatu aplikasi [contoh: WeChat] pengguna dapat menggunakannya tanpa mempelajari antara muka pengguna tersebut semula) Aplikasi MIT App Inventor Kertas Mahjong Lembaran Kerja 10D-1 Standard Pembelajaran 3.2.2 PPK PD ALG KA21 KS 512 10D CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10D MASA CADANGAN AKTIVITI BBM PEMETAAN Ralat Kekerapan pengguna melakukan kesilapan dalam interaksinya dengan aplikasi dan betapa mudah untuk pengguna memulihkan diri daripada kesilapan tersebut. Kepuasan Adakah pengguna berpuas hati dengan pengalaman mereka berinteraksi dengan aplikasi? 6. Setiap kumpulan diberikan kertas mahjong untuk aktiviti sumbang saran tersebut. 7. Setiap kumpulan kemudiannya membentangkan hasil kerja masing-masing. 8. Guru memberikan ulasan dan membetulkan sebarang kesilapan. 9. Guru mengumpulkan dan memilih idea kriteria pernilaian yang sesuai daripada pembentangan setiap kumpulan. 10. Murid kemudiannya mengisikan template dalam lembaran kerja 10D-1 dengan kriteria yang diputuskan semasa aktiviti sumbang saran. 15 Minit 10 Minit Aktiviti 2: Menguji Instrumen Pernilaian 1. Guru menerangkan bahawa murid perlu menilai aplikasi masing-masing menggunakan instrumen penilaian yang dihasilkan. 2. Setiap murid dikehendaki untuk membuka semula aplikasi yang dihasilkan semasa pengajaran yang lepas dan memberikan markah menggunakan instrumen pernilaian yang dihasilkan dalam Lembaran Kerja 10D-1 3. Murid kemudiannya mengisikan Lembaran Kerja 10D-2 dengan langkah penambahbaikan aplikasi masingmasing supaya dapat memenuhi instrumen pernilaian. 4. Murid kemudiannya menambahbaik aplikasi masing-masing berdasarkan Lembaran Kerja 10D-2. Penutup 1. Guru merumuskan pengajaran hari ini. 2. Murid mengisikan tiket keluar. 3. Beberapa orang murid dipilih untuk berkongsi jawapan tiket keluar. Lembaran Kerja 10D-1 Lembaran Kerja 10D-2 Komputer riba/ Komputer MIT App Inventor Tiket keluar 513 10D CARTA ALIR REKA BENTUK INTERAKSI

LEMBARAN KERJA 10D-1 Standard Pembelajaran: 3.1.3 NAMA: KELAS: TARIKH: Isikan jadual di bawah dengan kriteria yang sesuai untuk menghasilkan satu rubrik penilaian paparan dan reka bentuk skrin. Kriteria Markah 514 Jumlah Markah 10D CARTA ALIR REKA BENTUK INTERAKSI Komen guru: Tarikh:

LEMBARAN KERJA 10D-2 Standard Pembelajaran: 3.1.3 NAMA: KELAS: TARIKH: Senaraikan penambahbaikan yang ingin anda lakukan untuk aplikasi anda. 515 10D CARTA ALIR REKA BENTUK INTERAKSI Komen guru: Tarikh:

TIKET KELUAR INSTRUMEN PENILAIAN VISUAL APLIKASI Fikirkan semula pengajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? Lengkapkan jadual di bawah. 3 2 Perkara yang saya belajar hari ini Perkara yang saya rasa menarik untuk pengajaran hari ini 1 Soalan yang saya masih ada tentang pengajaran hari ini 516 10D CARTA ALIR REKA BENTUK INTERAKSI