Pernah tak cikgu berjaya bina aplikasi menggunakan Canva Code, tetapi apabila murid mencubanya, macam-macam masalah pula muncul?
Butang terlalu kecil, tulisan susah dibaca, menu mengelirukan atau murid tak tahu apa yang perlu dibuat selepas menjawab soalan.
Padahal reka bentuk aplikasi nampak cantik!
Inilah sebabnya kita perlu memahami sedikit tentang UI (User Interface) dan UX (User Experience).
Mudahnya, UI ialah rupa dan susunan elemen aplikasi, manakala UX pula berkaitan pengalaman pengguna ketika menggunakannya.
Dengan Canva Code, cikgu boleh membina aplikasi interaktif tanpa menulis kod dari awal. Tetapi untuk menjadikannya benar-benar mesra murid, ada beberapa perkara yang perlu diberikan perhatian.
Jom cuba enam tip ini!
1. Kurangkan Elemen, Fokus pada Perkara Penting
Kadangkala kita terlalu teruja menambah animasi, ikon, warna dan pelbagai menu.
Akhirnya, murid pun tak tahu hendak melihat bahagian mana dahulu!
Tip UI/UX: Pastikan setiap halaman mempunyai satu tujuan utama dan arahan yang jelas.
Contohnya, untuk aplikasi kuiz, paparkan satu soalan, pilihan jawapan dan butang Seterusnya. Elakkan meletakkan terlalu banyak maklumat yang tidak berkaitan.
Reka bentuk yang ringkas biasanya lebih mudah difahami.
2. Besarkan Butang supaya Mudah Disentuh
Aplikasi yang dibina pada komputer mungkin kelihatan sempurna. Tetapi apabila dibuka pada telefon, butang menjadi terlalu kecil.
Murid pula tersalah tekan!
Tip UI/UX: Gunakan butang yang cukup besar, mempunyai jarak antara satu sama lain dan mudah dikenal pasti.
Sebagai panduan reka bentuk, cuba gunakan kawasan sentuhan sekitar 44 × 44 piksel CSS untuk tindakan utama. Ini saiz praktikal yang lebih selesa, bukan syarat minimum universal bagi semua butang.
Contohnya, butang Mula, Semak Jawapan dan Seterusnya perlu mudah disentuh pada iPad atau telefon.
3. Pilih Warna yang Cantik, Tetapi Pastikan Teks Jelas
Warna memang boleh menjadikan aplikasi lebih menarik. Namun, jangan sampai warna mengganggu pembacaan.
Bayangkan tulisan kuning muda di atas latar putih. Cantik mungkin, tetapi susah dibaca!
Tip UI/UX: Gunakan kontras warna yang baik antara teks dan latar belakang.
Sebagai rujukan, garis panduan WCAG mencadangkan nisbah kontras sekurang-kurangnya 4.5:1 untuk teks biasa.
Selain itu, jangan gunakan warna sahaja untuk menunjukkan jawapan betul atau salah. Tambahkan ikon atau teks seperti “Betul!” dan “Cuba Lagi”.
Ini membantu menjadikan aplikasi lebih mudah digunakan oleh pelbagai murid.
4. Susun Navigasi yang Mudah Difahami
Kalau aplikasi mempunyai banyak halaman, murid perlu tahu bagaimana hendak bergerak dari satu bahagian ke bahagian lain.
Contohnya, aplikasi ulang kaji yang mempunyai menu Nota, Latihan, Kuiz dan Keputusan.
Tip UI/UX: Kekalkan kedudukan menu dan gunakan nama yang mudah difahami.
Sediakan juga butang Kembali atau Halaman Utama jika diperlukan.
Elakkan menggunakan simbol yang terlalu abstrak sehingga murid perlu meneka fungsinya.
Kalau murid boleh menggunakan aplikasi tanpa bertanya kepada cikgu setiap kali mahu berpindah halaman, itu petanda reka bentuk navigasi semakin baik.
5. Berikan Maklum Balas Selepas Setiap Tindakan
Pernah tekan butang Hantar, tetapi tiada apa-apa berlaku?
Pengguna tentu tertanya-tanya sama ada aplikasi sedang memproses maklumat atau sebenarnya tidak berfungsi.
Tip UI/UX: Pastikan aplikasi memberikan maklum balas yang jelas.
Contohnya, selepas murid menjawab kuiz, paparkan mesej “Jawapan diterima” atau penerangan ringkas tentang jawapan tersebut.
Jika aplikasi menggunakan Canva Sheets, mesej “Data berjaya disimpan” hanya patut muncul apabila penyimpanan benar-benar berjaya.
Jika berlaku masalah, paparkan arahan yang membantu pengguna mencuba semula.
Maklum balas seperti ini dapat mengurangkan kekeliruan murid.
6. Uji Bersama Murid, Bukan Sekadar Uji Sendiri
Ini tip yang saya rasa paling penting.
Kadangkala aplikasi nampak mudah bagi kita kerana kitalah yang membinanya.
Tetapi pengalaman murid mungkin berbeza.
Tip UI/UX: Sebelum digunakan oleh seluruh kelas, minta dua atau tiga orang murid mencuba aplikasi menggunakan peranti yang biasa mereka gunakan.
Perhatikan sama ada mereka boleh memahami arahan, mencari menu dan menyelesaikan tugasan tanpa terlalu banyak bantuan.
Tanya juga bahagian mana yang mengelirukan.
Daripada maklum balas itu, cikgu boleh menambah baik aplikasi sebelum dikongsikan kepada pengguna lain.
Bonus: Prompt Canva Code untuk Baiki UI/UX
Kalau cikgu sudah membina aplikasi, cuba salin prompt ini ke dalam perbualan Canva Code yang sama:
Semak dan tambah baik UI/UX aplikasi ini supaya lebih mesra murid sekolah menengah.
Gunakan reka bentuk yang ringkas dengan hierarki visual yang jelas. Besarkan butang utama, tingkatkan kontras warna, gunakan teks yang mudah dibaca dan susun navigasi secara konsisten.
Pastikan aplikasi responsif pada telefon, tablet dan komputer. Tambahkan maklum balas yang jelas selepas setiap tindakan pengguna.
Kekalkan kandungan, logik kuiz dan fungsi penyimpanan data sedia ada. Jangan ubah sambungan Canva Sheets tanpa kebenaran saya.
Selepas penambahbaikan, senaraikan perkara yang perlu diuji secara manual.
Akhir Kata
Canva Code memang memudahkan guru menghasilkan aplikasi digital dengan cepat.
Tetapi aplikasi yang menarik belum tentu memberikan pengalaman pembelajaran yang baik.
Murid sepatutnya menggunakan masa untuk memahami pelajaran, bukan bergelut mencari butang atau memahami cara aplikasi berfungsi.
Jadi, selepas berjaya membina aplikasi, jangan terus berhenti pada reka bentuk yang cantik.
Cuba lihat aplikasi tersebut melalui mata murid. Kadangkala perubahan kecil pada saiz butang, warna atau susunan menu boleh memberikan perbezaan yang besar.
— Cikgu Siber