Reka Bentuk Interaksi

SAINS KOMPUTER • TINGKATAN 4
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 Masa: 60 Minit

Murid boleh:
Penerapan Pemikiran

3.1.1 Mengkaji keperluan interaksi antara manusia Komputasional (PPK):
dan komputer • Algorithm and Procedures
3.1.2 Menilai produk interaktif berdasarkan tujuan (ALG)
dan prinsip asas reka bentuk interaktif • Problem Decomposition (PD)
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 486
SUMBER TAMBAHAN
1. 9 Prinsip Kebolehgunaan:
https://www.freshconsulting.com/ui-design-framework/
10A • REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10A
MASA CADANGAN AKTIVITI BBM PEMETAAN
10 Minit Set Induksi • Video
rekabentuk

1. Guru memperkenalkan konsep rekabentuk interaksi (UI) interaksi
kepada murid melalui video. (UI):
Contoh video yang sesuai untuk digunakan: https://www. https://
youtube.com/watch?v=Q5763pPchvw. www.
2. Sebagai pengenalan kepada dunia rekabentuk interaksi, youtube.
guru menjelaskan bahawa rekabentuk interaksi ialah unsur comwatch?
yang penting dalam kehidupan kita, dan merupakan v=Q5763p
penentu sama ada sesebuah aplikasi berjaya atau tidak. Pchvw.
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).
30 Minit Aktiviti 1: Pengenalan Tujuan Reka Bentuk Interaksi • Kertas

Mahjong
Standard
Pembelajaran
487
1. Guru menerangkan keperluan interaksi antara manusia dan 3.1.1
komputer kerana pencipta produk perlu memahami perkara
berikut (4 tujuan reka bentuk interaksi): KA21
• Kefungsian (Functional) - Contoh Kereta Toyota. KS
• Kebolehgunaan (Usability) – Contoh Microsoft Pixel

Sense. PPK
• Tarikan Estetik (Aesthetic Appeal) – Contoh Apple ALG
iPhone. PD
• 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).
• 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. 488
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.
15 Minit Aktiviti 2: Menilai Reka Bentuk Interaksi Berdasarkan Tujuan • Lembaran Standard
dan Prinsip Asas Reka Bentuk Interaksi Kerja 10A-1 Pembelajaran

3.1.1
1. Guru menerangkan bahawa lima prinsip kebolehgunaan • Lembaran
boleh digunakan untuk menilai produk interaktif. Kerja 10A-2
2. Setiap kumpulan dikehendaki untuk membentangkan
lakaran skrin interaksi masing-masing dan kumpulan lain • Kertas
dikehendaki untuk menilai setiap pembentangan origami
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.
5 Minit Penutup Standard

Pembelajaran
1. Murid menyenaraikan semula tujuan dan prinsip 3.1.1
rekabentuk interaksi.
2. Guru merumuskan pengajaran dan memberitahu murid
bahawa untuk kelas seterusnya, murid akan menggunakan 489
tujuan dan prinsip rekabentuk interaksi dalam atur cara
yang dibangunkan.

Standard
Pembelajaran:
3.1.2
LEMBARAN KERJA 10A-1

NAMA: TARIKH:
KELAS:
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
Komen guru:

Tarikh:
Standard
Pembelajaran:
3.1.2

NAMA: TARIKH:
KELAS:
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
Markah
Kriteria
1 2 3 4
Kefungsian Aplikasi tidak Aplikasi mempunyai Aplikasi mempunyai Aplikasi mempunyai

mempunyai fungsi fungsi tertentu fungsi yang efisien pelbagai fungsi
tertentu dan tertentu yang efisien dan
tertentu
Kebolehgunaan Aplikasi amat susah Aplikasi mudah Aplikasi mudah Aplikasi mudah
untuk digunakan digunakan oleh digunakan tanpa digunakan dan tiada
pengguna dengan bimbingan masalah pengguna
bimbingan
Tarikan Estetik Aplikasi mempunyai Aplikasi mempunyai Aplikasi mempunyai Aplikasi mempunyai
reka bentuk yang reka bentuk yang reka bentuk yang reka bentuk yang
rumit dan kurang kreatif tetapi agak senang difahami senang difahami
kreatif rumit dan kreatif
Aplikasi agak Aplikasi amat Aplikasi amat

491
Kesenangan Aplikasi susah
Pembelajaran digunakan oleh mudah digunakan mudah digunakan mudah digunakan
pengguna oleh pengguna oleh pengguna oleh pengguna
dan mempunyai
panduan pengguna
Kecekapan Pengguna Pengguna Pengguna Pengguna hanya

memerlukan lebih memerlukan 3 -5 klik memerlukan 2 klik perlu satu klik untuk

daripada 5 klik untuk melakukan untuk melakukan melakukan tugas
untuk melakukan tugas tugas
tugas
Pengekalan Pengguna perlu Pengguna perlu Pengguna perlu Pengguna langsung

belajar semula belajar semula belajar semula tidak belajar semula
cara menggunakan cara menggunakan cara menggunakan cara menggunakan
aplikasi selepas aplikasi selepas aplikasi selepas aplikasi apabila
seminggu tidak sebulan tidak setahun tidak sudah tidak
menggunakan menggunakan menggunakan menggunakannya
aplikasi aplikasi aplikasi
Kepuasan Pengguna tidak Pengguna kurang Pengguna berpuas Pengguna amat

Pengalaman berpuas hati berpuas hati hati menggunakan berpuas hati
Pengguna menggunakan menggunakan aplikasi menggunakan
aplikasi aplikasi aplikasi
Komen guru:

Tarikh:
Standard
Pembelajaran:
3.1.2

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

4. Nyatakan kesesuaian penggunaannya.
492
Komen guru:

Tarikh:
5. Cadangkan penambahbaikan prinsip asas reka bentuk interaktif yang digunakan.
Komen guru:

Tarikh:
PENGAJARAN 10B
CARTA ALIR REKA BENTUK INTERAKSI

STANDARD KANDUNGAN
3.2 Paparan dan Reka Bentuk Skrin
Murid boleh:
3.2.1 Mengaplikasi proses reka bentuk interaksi dalam atur cara
yang dibangunkan

dinyatakan di atas.

Rancangan Pengajaran 10B 495
Lampiran 10B-1 498
Lembaran Kerja 10B-1 501
Tiket Keluar 503
PENGAJARAN 10B
STANDARD KANDUNGAN
Masa: 60 Minit
Penerapan Pemikiran
Murid boleh: Komputasional (PPK):

3.2.1 Mengaplikasi proses reka bentuk interaksi • Algorithm and Procedures
dalam atur cara yang dibangunkan (ALG)
• Problem Decomposition (PD)
Bahan untuk kelas
https://www.youtube.com/watch?v=S6whDdO6oAY

1. Lampiran 10B-1
2. Kertas A3/Kertas Mahjong

1. Lembaran Kerja 10B-1
SUMBER TAMBAHAN 494

1. Contoh susun atur cara visual:
a. http://uxkits.com/products/mobile-app-visual-flowchart
b. https://www.graffletopia.com/stencils/1161
10B • CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10B
5 Minit Set Induksi • Video
proses

1. Guru menunjukkan video yang menunjukkan proses reka bentuk
penghasilan aplikasi melalui proses reka bentuk interaksi. interaksi:
Contoh video yang boleh ditunjukkan: https://www. https://
youtube.com/watch?v=S6whDdO6oAY. www.
2. Guru bersoal jawab bersama murid tentang proses reka youtube.
bentuk interaksi. comwatch?
v=S6whDd
O6oAY
10 Minit Aktiviti 1: Proses Reka Bentuk Interaksi Standard

Pembelajaran
1. Guru mengimbas kembali pengajaran lepas dan 3.2.1
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:
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.
• 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

5. Guru menjelaskan terdapat pelbagai jenis antara muka
pengguna yang boleh dijadikan rujukan.
6. Guru menunjukkan contoh menggunakan Lampiran 10B-1.
15 Minit Aktiviti 2: Lakaran Carta Alir Visual • Kertas Standard

A3/Kertas Pembelajaran
1. Dalam kumpulan berempat, guru memberikan arahan Mahjong 3.2.1
untuk aktiviti sumbangsaran hari ini: • Lampiran
a. Guru memberikan kertas A3/kertas mahjong kepada 10B-1 KA21
setiap kumpulan. KS
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.
2. Guru memilih 2-3 kumpulan untuk berkongsi hasil kerja
kumpulan mereka.

3. Kumpulan lain diminta untuk memberikan komen
penambahbaikan.
20 Minit Aktiviti 2: Penghasilan Carta Alir Visual • Lembaran Standard

Kerja 10B-1 Pembelajaran
1. Guru memulangkan kertas mahjong lakaran reka bentuk 3.2.1
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.
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

LAMPIRAN 10B-1
CONTOH SUSUSAN ANTARA MUKA PENGGUNA
10B • CARTA ALIR REKA BENTUK INTERAKSI SAINS KOMPUTER • TINGKATAN 4

498
LAMPIRAN 10B-1

499
LAMPIRAN 10B-1

500
Standard
Pembelajaran:
3.2.1
LEMBARAN KERJA 10B-1

NAMA: TARIKH:
KELAS:
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:
Standard
Pembelajaran:
3.2.1
LEMBARAN KERJA 10B-1

Lukiskan carta alir visual anda dalam ruangan di bawah:

502
Terangkan proses reka bentuk interaksi.

________________________________________________________________________________________________________________
________________________________________________________________________________________________________________
Komen guru:

Tarikh:
Fikirkan semula
pengajaran pada
hari ini. Adakah
anda mempelajari
sesuatu yang baru dan
bermakna? Adakah
objektif PDP pada
TIKET KELUAR
hari ini tercapai?
ATUR CARA VISUAL APLIKASI
Lengkapkan jadual di bawah.

3
Perkara yang saya belajar hari ini …
2
Perkara yang saya rasa menarik untuk pengajaran hari ini …
1
Soalan yang saya masih ada tentang pengajaran hari ini …
503

PENGAJARAN 10C

STANDARD KANDUNGAN
Murid boleh:
3.2.2 Menghasilkan prototaip paparan dan reka bentuk skrin

dinyatakan di atas.

Rancangan Pengajaran 10C 506
Tiket Keluar 509
PENGAJARAN 10C
STANDARD KANDUNGAN
3.1 Reka Bentuk Interaksi Masa: 60 Minit
STANDARD PEMBELAJARAN Penerapan Pemikiran

Komputasional (PPK):
Murid boleh: • Algorithm and Procedures
3.2.2 Menghasilkan prototaip paparan dan (ALG)
reka bentuk skrin • Problem Decomposition (PD)
• Simulation (SIM)
Bahan untuk kelas
https://www.youtube.com/watch?v=5691BxRt2lI

Tiada

1. Tiket keluar
2. Komputer / Komputer riba
505
SUMBER TAMBAHAN
1. Tutorial MIT App inventor:
http://appinventor.mit.edu/explore/ai2/beginner-videos.html
10C •CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10C
5 Set Induksi • Video
Minit proses

1. Guru menunjukkan video yang menunjukkan contoh reka bentuk
aplikasi yang dihasilkan oleh MIT App Inventor interaksi:
Contoh video yang boleh ditunjukkan: https://www. https://
youtube.com/watch?v=5691BxRt2lI. www.
2. Guru menerangkan bahawa aplikasi yang baru ditunjukkan youtube.
boleh dihasilkan dengan mudah menggunakan aplikasi comwatch?
MIT App Inventor dan murid akan belajar cara v=5691B
menggunakannya untuk menghasilkan aplikasi lakaran xRt2lI
pengajaran lepas.
10 Aktiviti 1: Pengenalan kepada App Inventor • Komputer Standard

Minit / Komputer Pembelajaran
1. Guru mengimbas kembali pengajaran lepas dengan riba 3.2.2
menanyakan kepada murid bagaimana kita dapat
menggambarkan proses aplikasi yang dibina. Jawapan PPK
yang dijangka daripada murid: Carta Alir Visual. PD
2. Guru berkongsi carta alir visual terbaik daripada murid ALG
pengajaran lepas. SML
3. Guru menjelaskan untuk pengajaran hari ini, murid
akan membina aplikasi yang telah dilukis menggunakan
App Inventor.
4. Guru menjelaskan murid hanya perlu menukar
506
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.
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.
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.
15 Minit Aktiviti 2: Membina Aplikasi • Kertas Standard

A3 / Kertas Pembelajaran
1. Guru meminta murid untuk merujuk Lembaran Kerja 10B-1 Mahjong 3.2.2
daripada Pengajaran 10B. • Lembaran
2. Guru meminta murid untuk memindahkan rekaan mereka Kerja 10B-1
di atas lembaran ke App Inventor. (Pengajaran
3. Guru menjelaskan bahawa fokus murid bukanlah untuk 10B)
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. 508
10 Minit Penutup • Tiket Keluar


3. Beberapa orang murid dipilih untuk berkongsi jawapan
tiket keluar.
Fikirkan semula
pengajaran pada
hari ini. Adakah
anda mempelajari
bermakna? Adakah
objektif PDP pada
TIKET KELUAR
hari ini tercapai?
ATUR CARA VISUAL APLIKASI

3
2
1
509

PENGAJARAN 10D

STANDARD KANDUNGAN
Murid boleh:
3.2.3 Membincangkan laporan dari penilaian kuantitatif
terhadap paparan dan reka bentuk skrin

dinyatakan di atas.

Rancangan Pengajaran 10D 512
Lembaran Kerja 10D-1 514
Lembaran Kerja 10D-2 515
Tiket Keluar 516
PENGAJARAN 10D
STANDARD KANDUNGAN
STANDARD PEMBELAJARAN Masa: 60 Minit

3.2.3 Membincangkan laporan daripada
Penerapan Pemikiran

penilaian kuantitatif terhadap Komputasional (PPK):
paparan dan reka bentuk skrin • Algorithm and Procedures
(ALG)
BAHAN BANTU MENGAJAR (BBM) • Problem Decomposition (PD)
Bahan untuk kelas

Tiada

1. Kertas A3 / Kertas Mahjong

1. Lembaran Kerja 10D-1
2. Lembaran Kerja 10D-2
3. Tiket keluar
SUMBER TAMBAHAN 511

1. Contoh Reka Bentuk Interaksi Rubrik:
https://developer.gnome.org/accessibility-devel-guide/stable/gad-
checklist.html.en
10D •CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10D
5 Minit Set Induksi • Aplikasi MIT
App

1. Guru menunjukkan salah satu aplikasi yang dihasilkan oleh Inventor
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.
10 Minit Aktiviti 1: Kriteria Utama semasa Membina Instrumen Penilaian • Kertas Standard
Paparan & Reka bentuk Skrin Mahjong Pembelajaran
3.2.2
1. Guru menerangkan murid akan belajar menghasilkan • Lembaran
instrumen pernilaian paparan dan reka bentuk skrin. Kerja PPK
2. Guru menunjukkan borang pernilaian daripada Pengajaran 10D-1 PD
10A (Lembaran Kerja 10.1) sebagai contoh. ALG
3. Setiap kumpulan dikehendaki untuk membuat aktiviti
sumbang saran untuk mengenal pasti kriteria yang KA21
diperlukan dalam instrumen pernilaian paparan dan reka KS
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
512
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)
RANCANGAN PENGAJARAN 10D
• 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 Aktiviti 2: Menguji Instrumen Pernilaian • Lembaran

1. Guru menerangkan bahawa murid perlu menilai aplikasi Kerja 10D-1
masing-masing menggunakan instrumen penilaian yang
dihasilkan.
2. Setiap murid dikehendaki untuk membuka semula aplikasi
• Lembaran
Kerja 10D-2
513
yang dihasilkan semasa pengajaran yang lepas dan
memberikan markah menggunakan instrumen pernilaian yang • Komputer
dihasilkan dalam Lembaran Kerja 10D-1 riba/
3. Murid kemudiannya mengisikan Lembaran Kerja 10D-2 Komputer
dengan langkah penambahbaikan aplikasi masing-

masing supaya dapat memenuhi instrumen pernilaian. • MIT App
4. Murid kemudiannya menambahbaik aplikasi masing-masing Inventor
berdasarkan Lembaran Kerja 10D-2.
10 Minit Penutup • Tiket keluar

3. Beberapa orang murid dipilih untuk berkongsi jawapan tiket
keluar.
Standard
Pembelajaran:
3.1.3
LEMBARAN KERJA 10D-1

NAMA: TARIKH:
KELAS:
Isikan jadual di bawah dengan kriteria yang sesuai untuk menghasilkan satu rubrik

penilaian paparan dan reka bentuk skrin.
Markah
Kriteria
514
Jumlah Markah
Komen guru:

Tarikh:
Standard
Pembelajaran:
3.1.3
LEMBARAN KERJA 10D-2

NAMA: TARIKH:
KELAS:
Senaraikan penambahbaikan yang ingin anda lakukan untuk aplikasi anda.

515
Komen guru:

Tarikh:
Fikirkan semula
pengajaran pada
hari ini. Adakah
anda mempelajari
bermakna? Adakah
objektif PDP pada
TIKET KELUAR
hari ini tercapai?
INSTRUMEN PENILAIAN VISUAL APLIKASI

3
2
1
516

Reka Bentuk Interaksi

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Reka Bentuk Interaksi

Uploaded by

Copyright:

Available Formats

SAINS KOMPUTER • TINGKATAN 4