REKA BENTUK INTERAKSI

(1)

SAINS K

OMPUTER •

TINGKA

TAN 4

PENGAJARAN 10A

REKA BENTUK INTERAKSI

Kandungan

Muka surat

Rancangan Pengajaran 10A

487 Lembaran Kerja 10A-1

490 Lembaran Kerja 10A-2

492 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.

(2)

SAINS K

OMPUTER •

TINGKA

TAN 4

10A

• REKA

BENTUK

INTERAKSI

486 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

1. 9 Prinsip Kebolehgunaan:

https://www.freshconsulting.com/ui-design-framework/

Masa: 60 Minit

Penerapan Pemikiran

Komputasional (PPK):

• Algorithm and Procedures

(ALG)

• Problem Decomposition (PD)

(3)

SAINS K

OMPUTER •

TINGKA

TAN 4

487 10A

• REKA

BENTUK

INTERAKSI

MASA

10 Minit 30 Minit

BBM

• Video rekabentuk interaksi (UI): https:// www. youtube. comwatch? v=Q5763p Pchvw. • Kertas Mahjong

PEMETAAN

Standard Pembelajaran 3.1.1 KA21 KS PPK ALG PD

RANCANGAN PENGAJARAN 10A

CADANGAN AKTIVITI

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).

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).

(4)

SAINS K

OMPUTER •

TINGKA

TAN 4

488 10A

• REKA

BENTUK

INTERAKSI

MASA

BBM

PEMETAAN

RANCANGAN PENGAJARAN 10A

CADANGAN AKTIVITI

• 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:

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.

(5)

SAINS K

OMPUTER •

TINGKA

TAN 4

489 10A

• REKA

BENTUK

INTERAKSI

MASA

15 Minit 5 Minit

BBM

• Lembaran Kerja 10A-1 • Lembaran Kerja 10A-2 • Kertas origami

PEMETAAN

Standard Pembelajaran 3.1.1 Standard Pembelajaran 3.1.1

RANCANGAN PENGAJARAN 10A

CADANGAN AKTIVITI

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.

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.

(6)

SAINS K

OMPUTER •

TINGKA

TAN 4

490 10A

• REKA

BENTUK

INTERAKSI

Berdasarkan lakaran aplikasi anda di atas kertas mahjong semasa Aktiviti 1, tandakan prinsip asas reka bentuk interaksi yang digunakan.

LEMBARAN KERJA 10A-1

Standard

Pembelajaran:

3.1.2

NAMA: TARIKH: KELAS:

( )

Prinsip Asas Reka Bentuk Interaksi

Kesenangan Pembelajaran

Kecekapan

Pengekalan

Ralat

Kepuasan

Komen guru: Tarikh:

(7)

SAINS K

OMPUTER •

TINGKA

TAN 4

491 10A

• REKA

BENTUK

INTERAKSI

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

LEMBARAN KERJA 10A-1

Standard

Pembelajaran:

3.1.2

NAMA: TARIKH: KELAS: Markah 1 Aplikasi tidak mempunyai fungsi tertentu Aplikasi amat susah

untuk digunakan

Aplikasi mempunyai reka bentuk yang rumit dan kurang

kreatif Aplikasi susah digunakan oleh 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 2 Aplikasi mempunyai fungsi tertentu Aplikasi mudah digunakan oleh pengguna dengan bimbingan Aplikasi mempunyai

reka bentuk yang kreatif tetapi agak

rumit Aplikasi agak mudah digunakan oleh pengguna 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 3 Aplikasi mempunyai fungsi yang efisien dan tertentu Aplikasi mudah digunakan tanpa bimbingan Aplikasi mempunyai

reka bentuk yang senang difahami Aplikasi amat mudah digunakan oleh pengguna Pengguna memerlukan 2 klik untuk melakukan tugas Pengguna perlu belajar semula cara menggunakan aplikasi selepas setahun tidak menggunakan aplikasi Pengguna berpuas hati menggunakan aplikasi 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 Aplikasi amat mudah digunakan oleh pengguna dan mempunyai panduan pengguna 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 Kriteria Kefungsian Kebolehgunaan Tarikan Estetik Kesenangan Pembelajaran Kecekapan Pengekalan Kepuasan Pengalaman Pengguna Komen guru: Tarikh:

(8)

SAINS K

OMPUTER •

TINGKA

TAN 4

492 10A

• REKA

BENTUK

INTERAKSI

LEMBARAN KERJA 10A-2

Standard

Pembelajaran:

3.1.2

Komen guru: Tarikh: Komen guru: Tarikh:

3. Lakukan perbandingan antara beberapa prinsip asas reka bentuk interaktif.

4. Nyatakan kesesuaian penggunaannya.

(9)

SAINS K

OMPUTER •

TINGKA

TAN 4

PENGAJARAN 10B

CARTA ALIR REKA BENTUK INTERAKSI

Kandungan

Muka surat

Rancangan Pengajaran 10B

495 Lampiran 10B-1

498 Lembaran Kerja 10B-1

501 Tiket Keluar

503 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.

(10)

SAINS K

OMPUTER •

TINGKA

TAN 4

10B • CAR

TA

ALIR REKA

BENTUK

INTERAKSI

494 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

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

Masa: 60 Minit

Penerapan Pemikiran

Komputasional (PPK):

• Algorithm and Procedures

(ALG)

• Problem Decomposition (PD)

(11)

SAINS K

OMPUTER •

TINGKA

TAN 4

495 10B • CAR

TA

ALIR REKA

BENTUK

INTERAKSI

MASA

5 Minit 10 Minit

BBM

• Video proses reka bentuk interaksi: https:// www. youtube. comwatch? v=S6whDd O6oAY

PEMETAAN

Standard Pembelajaran 3.2.1

RANCANGAN PENGAJARAN 10B

CADANGAN AKTIVITI

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:

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.

(12)

SAINS K

OMPUTER •

TINGKA

TAN 4

496 10B • CAR

TA

ALIR REKA

BENTUK

INTERAKSI

MASA

15 Minit

BBM

• Kertas A3/Kertas Mahjong • Lampiran 10B-1

PEMETAAN

Standard Pembelajaran 3.2.1 KA21 KS

RANCANGAN PENGAJARAN 10B

CADANGAN AKTIVITI

• 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:

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.

(13)

SAINS K

OMPUTER •

TINGKA

TAN 4

497 10B • CAR

TA

ALIR REKA

BENTUK

INTERAKSI

MASA

20 Minit 10 Minit

BBM

• Lembaran Kerja 10B-1 • Tiket Keluar

PEMETAAN

RANCANGAN PENGAJARAN 10B

CADANGAN AKTIVITI

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. Penutup

1. Guru merumuskan pengajaran hari ini. 2. Murid mengisikan tiket keluar.

3. Beberapa orang murid dipilih untuk berkongsi jawapan tiket keluar.

(14)

SAINS K

OMPUTER •

TINGKA

TAN 4

498 10B • CAR

TA

ALIR REKA

BENTUK

INTERAKSI

LAMPIRAN 10B-1

(15)

SAINS K

OMPUTER •

TINGKA

TAN 4

499 10B • CAR

TA

ALIR REKA

BENTUK

INTERAKSI

LAMPIRAN 10B-1

(16)

SAINS K

OMPUTER •

TINGKA

TAN 4

500 10B • CAR

TA

ALIR REKA

BENTUK

INTERAKSI

LAMPIRAN 10B-1

(17)

SAINS K

OMPUTER •

TINGKA

TAN 4

501 10A

• REKA

BENTUK

INTERAKSI

Contoh carta alir visual:

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:

LEMBARAN KERJA 10B-1

Standard

Pembelajaran:

3.2.1

NAMA: TARIKH: KELAS:

(18)

SAINS K

OMPUTER •

TINGKA

TAN 4

502 10A

• REKA

BENTUK

INTERAKSI

Lukiskan carta alir visual anda dalam ruangan di bawah:

Terangkan proses reka bentuk interaksi.

________________________________________________________________________________________________________________ ________________________________________________________________________________________________________________

LEMBARAN KERJA 10B-1

Komen guru: Tarikh:

Standard

Pembelajaran:

3.2.1

(19)

SAINS K

OMPUTER •

TINGKA

TAN 4

503 10A

• REKA

BENTUK

INTERAKSI

Lengkapkan jadual di bawah.

TIKET KELUAR

Perkara yang saya belajar hari ini …

Perkara yang saya rasa menarik untuk pengajaran hari ini …

Soalan yang saya masih ada tentang pengajaran hari ini …

1

3

2

ATUR CARA VISUAL APLIKASI

Fikirkan semula pengajaran pada

hari ini. Adakah anda mempelajari sesuatu yang baru dan

bermakna? Adakah objektif PDP pada

(20)

SAINS K

OMPUTER •

TINGKA

TAN 4

PENGAJARAN 10C

CARTA ALIR REKA BENTUK INTERAKSI

Kandungan

Muka surat

Rancangan Pengajaran 10C

506 Tiket Keluar

509 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.

(21)

SAINS K

OMPUTER •

TINGKA

TAN 4

10C •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

505 PENGAJARAN 10C

STANDARD KANDUNGAN

3.1 Reka Bentuk Interaksi

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

1. Tutorial MIT App inventor:

http://appinventor.mit.edu/explore/ai2/beginner-videos.html

Masa: 60 Minit

Penerapan Pemikiran

Komputasional (PPK):

• Algorithm and Procedures

(ALG)

• Problem Decomposition (PD)

• Simulation (SIM)

(22)

SAINS K

OMPUTER •

TINGKA

TAN 4

506 10C •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

MASA

5 Minit 10 Minit

BBM

• Video proses reka bentuk interaksi: https:// www. youtube. comwatch? v=5691B xRt2lI • Komputer / Komputer riba

PEMETAAN

Standard Pembelajaran 3.2.2 PPK PD ALG SML

RANCANGAN PENGAJARAN 10C

CADANGAN AKTIVITI

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’.

(23)

SAINS K

OMPUTER •

TINGKA

TAN 4

507 10C •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

MASA

BBM

_PEMETAAN

RANCANGAN PENGAJARAN 10C

CADANGAN AKTIVITI

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:

m. Teks pada butang “Button” boleh diubah dibahagian Properties sebelah kanan skrin.

(24)

SAINS K

OMPUTER •

TINGKA

TAN 4

508 10C •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

MASA

15 Minit 10 Minit

BBM

• Kertas A3 / Kertas Mahjong • Lembaran Kerja 10B-1 (Pengajaran 10B) • Tiket Keluar

PEMETAAN

RANCANGAN PENGAJARAN 10C

CADANGAN AKTIVITI

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.

Penutup

(25)

SAINS K

OMPUTER •

TINGKA

TAN 4

509 10C •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

TIKET KELUAR

1

3

2

ATUR CARA VISUAL APLIKASI

(26)

SAINS K

OMPUTER •

TINGKA

TAN 4

PENGAJARAN 10D

CARTA ALIR REKA BENTUK INTERAKSI

Kandungan

Muka surat

Rancangan Pengajaran 10D

512 Lembaran Kerja 10D-1

514 Lembaran Kerja 10D-2

515 Tiket Keluar

516 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.

(27)

SAINS K

OMPUTER •

TINGKA

TAN 4

10D •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

511 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

SUMBER TAMBAHAN

1. Contoh Reka Bentuk Interaksi Rubrik:

https://developer.gnome.org/accessibility-devel-guide/stable/gad-

checklist.html.en

Masa: 60 Minit

Penerapan Pemikiran

Komputasional (PPK):

• Algorithm and Procedures

(ALG)

• Problem Decomposition (PD)

(28)

SAINS K

OMPUTER •

TINGKA

TAN 4

512 10D •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

MASA

5 Minit 10 Minit

BBM

• Aplikasi MIT App Inventor • Kertas Mahjong • Lembaran Kerja 10D-1

PEMETAAN

Standard Pembelajaran 3.2.2 PPK PD ALG KA21 KS

RANCANGAN PENGAJARAN 10D

CADANGAN AKTIVITI

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)

(29)

SAINS K

OMPUTER •

TINGKA

TAN 4

513 10D •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

MASA

15 Minit 10 Minit

BBM

• Lembaran Kerja 10D-1 • Lembaran Kerja 10D-2 • Komputer riba/ Komputer • MIT App Inventor • Tiket keluar

PEMETAAN

RANCANGAN PENGAJARAN 10D

CADANGAN AKTIVITI

• 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.

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 masing- masing supaya dapat memenuhi instrumen pernilaian. 4. Murid kemudiannya menambahbaik aplikasi masing-masing berdasarkan Lembaran Kerja 10D-2.

Penutup

(30)

SAINS K

OMPUTER •

TINGKA

TAN 4

514 10D •CAR

TA

ALIR REKA

BENTUK

INTERAKSI

Isikan jadual di bawah dengan kriteria yang sesuai untuk menghasilkan satu rubrik penilaian paparan dan reka bentuk skrin.

LEMBARAN KERJA 10D-1

Standard

Pembelajaran:

3.1.3

NAMA: TARIKH: KELAS: Markah Kriteria Komen guru: Tarikh: Jumlah Markah