21
Bab 3
Metode dan Perancangan Sistem
3.1 Metode dan Analisis Kebutuhan Sistem 3.1.1 Metode Perancangan
Metode yang digunakan dalam penelitian ini adalah metode perancangan sistem dengan menggunakan Prototype model. Prototype model merupakan model perancangan sistem dimana kebutuhan diubah menjadi sistem yang bekerja (Working System) yang diperbaiki secara terus menerus sesuai dengan kebutuhan dari kerjasama antara analis dengan pengguna (Sommerville, 2001). Prototyping juga bisa dibangun melalui beberapa tools pengembang untuk menyederhanakan proses.
Gambar 3.1 Prototyping Model (Sommerville, 2001).
Proses dari perancangan sistem untuk aplikasi ”Ayo Belajar Pintar” dengan menggunakan prototype model, dapat dijelaskan sebagai berikut :
1. Pengumpulan Kebutuhan Pengguna
Tahap pertama dalam perancangan sistem dengan metode prototype adalah mengidentifikasi kebutuhan dasar pengguna melalui proses requirement dan analisis. Pada tahap ini, penulis mengumpulkan data yang dibutuhkan untuk penelitian lewat proses wawancara kepada guru pengajar di TK Realfunrainbow Preschool.
Setelah itu penulis melakukan analisa kebutuhan sistem yang dikembangkan berdasarkan permintaan pengguna sistem.
2. Perancangan Prototype
Informasi yang didapat kemudian digunakan sebagai acuan untuk mengembangkan prototype (cetakan biru) untuk perancangan sistem. Dalam perancangan sistem ini, penulis membuat empat prototype sesuai dengan requirement dari user hingga sistem yang dibuat sesuai dengan keinginan user. Prototype yang dibangun merupakan tipe reusable prototype. Prototype lama akan digunakan lagi untuk disempurnakan menjadi sistem yang akan digunakan Berikut prototype yang dibuat dalam proses perancangan sistem:
Prototype 1
Pada prototype pertama, dibuat aplikasi pembelajaran yaitu belajar angka, belajar huruf, berhitung, dongeng, dan bahasa inggris.
Materi yang dimasukan kedalam aplikasi adalah referensi buku yang diperoleh dari user.
Prototype 2
Pada perancangan prototype kedua, penulis menambahkan fitur latihan soal pada aplikasi yang telah dibuat sesuai dengan permintaan user. Latihan soal yang ada adalah 20 soal pilihan ganda dengan tiga pilihan jawaban pada setiap soal.
Prototype 3
Developer menambahkan beberapa materi yang belum dimasukan serta melengkapi pengertian dan menambahkan suara dari tiap materi.
Prototype 4
Aplikasi yang dibuat sudah sesuai dengan permintaan user dan siap untuk diujikan kepada guru serta siswa.
3.1.2 Perangkat Keras dan Perangkat Lunak
Analisis kebutuhan meliputi tiga hal yaitu: kebutuhan sistem, hardware (perangkat keras) dan software (perangkat lunak).
3.1.2.1 Kebutuhan Sistem
Kebutuhan sistem dalam penelitian ini adalah wawancara.
Wawancara dilakukan kepada Ibu Dian Wijayanti S.pd selaku guru pengajar di sekolah TK Realfunrainbow untuk mengetahui bahan atau materi yang dibutuhkan dalam pembuatan aplikasi pembelajaran ini.
Materi yang dibutuhkan adalah materi yang diajarkan dalam konteks kurikulum yang berlaku.
3.1.2.2 Perangkat Keras
Perangkat keras yang digunakan untuk membuat aplikasi adalah sebagai berikut (minimum) :
a. Processor minimal pentium IV 2.0 Ghz
b. RAM 128 MB c. Harddisk 20 GB
d. Resolusi Monitor (1280 x 800) (32 bit) (60 Hz) 3.1.2.3 Perangkat Lunak
Perangkat lunak yang digunakan untuk membuat aplikasi adalah sebagai berikut (minimum) :
a. Sistem Operasi Windows XP b. Adobe Flash
c. Corel Draw d. Adobe Photoshop
e. Voice Diamond Recorder 3.1.3 Analisa Kebutuhan
3.1.3.1 Kebutuhan pengguna
Kebutuhan pengguna (user) dalam aplikasi ini meliputi : 1. User adalah murid di TK Realfunrainbow presschol Salatiga.
2. User dapat melakukan akses pembelajaran yaitu belajar angka, yang terdiri dari mengenal angka dan mengurutkan angka.
3. User dapat melakukan akses pembelajaran yaitu belajar huruf, yang terdiri dari mengenal huruf dan mengurutkan huruf.
4. User dapat melakukan akses pembelajaran yaitu berhitung, yang terdiri dari penjumlagan dan pengurangan, dan perbandingan lebih banyak atau sedikit.
5. User dapat melakukan akses pembelajaran yaitu bahasa inggris, yang terdiri dari mengenal benda, mengenal hewan dan mengenal warna.
6. User dapat melakukan akses pembelajaran yaitu dongeng, yang terdiri dari badu si pemalsa dan puteri bulan.
7. User dapat melakukan akses pembelajaran yaitu latihan soal, yang terdiri dari 20 soal.
3.1.3.2 Kebutuhan Fungsional
Tidak memerlukan proses instalasi karena sistem berbentuk aplikasi dengan ekstensi .exe. Dapat diterapkan pada spesifikasi komputer dengan processor minimal Pentium 4, dengan sistem operasi Windows.
3.2 Perancangan Sistem
Sistem dirancang dengan menggunakan UML (Unified Modelling Language).
3.2.1 Flowchart Sistem
Flowchart sistem menggambarkan suatu sistem peralatan komputer yang digunakan dalam proses pengolahan data dan perhubungan antar peralatan tersebut.
3.2.1.1 Flowchart Menu Utama (Jadual Belajar)
Pada menu utama terdapat enam menu yang dapat dipilih user.
Enam menu tersebut meliputi menu belajar angka, menu belajar huruf, menu berhitung, menu bahasa inggris, menu dongeng dan menu latihan soal. Setiap menu tersebut akan menggolongkan setiap materi belajar yang akan dipelajari oleh user. Jika tombol keluar dipilih oleh user maka akan muncul perintah berupa tampilan peringatan untuk meyakinkan user agar keluar seutuhnya atau user dapat kembali lagi
ke halaman menu jadual belajar. Diagram flowchart dari menu utama dapat dilihat pada gambar 3.2.
Gambar 3.2 Flowchart menu utama
3.2.1.2 Flowchart Belajar Angka
Setelah user memilih menu belajar angka, user dihadapkan dengan dua pilihan materi belajar yaitu mengenal angka dan mengurutkan angka. Setelah user memilih materi belajar, akan masuk ke pembuka yang berisi kalimat dan suara petunjuk sebelum masuk ke materi pembelajaran dalam pembuka terdapat tombol mulai yang berfungsi merujuk ke materi pembelajaran. Pada materi pembelajaran user akan belajar mengenal angka dan mengurutkan angka. Jika user selesai belajar, maka akan masuk ke penutup yang berisi kalimat dan suara petunjuk dengan cara memilih tombol selesai. Pada penutup terdapat tombol menu, yang berfungsi merujuk ke menu utama.
Flowchart dari menu belajar angka dapat dilihat pada gambar 3.3.
Gambar 3.3 Flowchart Belajar Angka
3.2.1.3 Flowchart Belajar Huruf
Setelah user memilih menu belajar huruf, user dihadapkan dengan dua pilihan materi belajar yaitu mengenal huruf dan mengurutkan huruf. Setelah user memilih materi belajar akan masuk ke pembuka yang berisi kalimat dan suara petunjuk sebelum masuk ke materi pembelajaran, dalam pembuka terdapat tombol mulai yang berfungsi merujuk ke materi pembelajaran. Pada materi pembelajaran user akan belajar mengenal huruf dan mengurutkan huruf. Jika user selesai belajar, maka akan masuk ke penutup yang berisi kalimat dan suara petunjuk dengan cara memilih tombol selesai. Pada penutup terdapat tombol menu, yang berfungsi merujuk ke menu utama.
Flowchart dari menu belajar huruf dapat dilihat pada gambar 3.4.
Gambar 3.4 Flowchart Belajar Huruf
3.2.1.4 Flowchart Berhitung
Setelah user memilih menu berhitung, user dihadapkan dengan dua pilihan materi belajar yaitu penjumlahan dan pengurangan dan perbandingan lebih banyak atau sedikit. Setelah user memilih materi belajar akan masuk ke pembuka yang berisi kalimat dan suara petunjuk sebelum masuk ke materi pembelajaran, dalam pembuka terdapat tombol mulai yang berfungsi merujuk ke materi pembelajaran. Pada materi pembelajaran user akan belajar berhitung dengan jari, penjumlahan dan pengurangan, dan perbandingan lebih banyak atau sedikit. Jika user selesai belajar, maka akan masuk ke penutup yang berisi kalimat dan suara petunjuk dengan cara memilih tombol selesai. Pada penutup terdapat tombol menu, yang berfungsi
merujuk ke menu utama. Flowchart dari menu berhitung dapat dilihat pada gambar 3.5.
Gambar 3.5 Flowchart Berhitung
3.2.1.5 Flowchart Bahasa Inggris
Setelah user memilih menu bahasa inggris, user dihadapkan dengan tiga pilihan materi belajar yaitu mengenal benda, mengenal hewan dan mengenal warna. Setelah user memilih materi belajar akan masuk ke pembuka yang berisi kalimat dan suara petunjuk sebelum masuk ke materi pembelajaran, dalam pembuka terdapat tombol mulai yang berfungsi merujuk ke materi pembelajaran. Pada materi pembelajaran user akan belajar mengenal benda, mengenal hewan dan mengenal warna dalam bahasa inggris. Jika user selesai belajar, maka akan masuk ke penutup yang berisi kalimat dan suara petunjuk dengan
cara memilih tombol selesai. Pada penutup terdapat tombol menu, yang berfungsi merujuk ke menu utama. Flowchart dari menu bahasa inggris dapat dilihat pada gambar 3.6.
Gambar 3.6 Flowchart Bahasa Inggris
3.2.1.6 Flowchart Dongeng
Setelah user memilih menu dongeng, user dihadapkan dengan dua pilihan materi belajar yaitu badu si pemalas dan puteri bulan.
Setelah user memilih materi belajar akan masuk ke pembuka yang berisi kalimat dan suara petunjuk sebelum masuk ke materi pembelajaran, dalam pembuka terdapat tombol mulai yang berfungsi merujuk ke materi pembelajaran. Pada materi pembelajaran user akan belajar menyimak dongeng dan menjawab pertanyaan. Jika user selesai belajar, maka akan masuk ke penutup yang berisi kalimat penjelasan tentang jumlah pertanyaan yang dijawab dengan benar.
Pada penutup terdapat tombol menu, yang berfungsi merujuk ke menu utama. Flowchart dari menu dongeng dapat dilihat pada gambar 3.7.
Gambar 3.7 Flowchart Dongeng
3.2.1.7 Flowchart Latihan Soal
Setelah user memilih menu latihan soal, user pertama kali diminta untuk memasukan nama. Setelah itu, user akan mengerjakan soal latihan dimana soal yang disajikan berbentuk pilihan ganda.
Setelah menyelesaikan dua puluh soal yang ada, maka akan masuk ke penutup yang berisi kalimat penjelasan tentang nama user yang mengerjakan dan jumlah nilai yang diperoleh. Pada penutup terdapat tombol menu, yang berfungsi merujuk ke menu utama. Flowchart dari menu latihan soal dapat dilihat pada gambar 3.8.
Gambar 3.8 Flowchart Latihan Soal
3.2.2 Skenario Aplikasi
Skenario berikut merupakan langkah–langkah kegiatan yang akan dilakukan oleh user ketika menggunakan program ini. Skenario yang dikembangkan di sini akan memberikan kesempatan kepada user untuk menjelajah aplikasi sesuai dengan kebutuhan. Dengan demikian diharapkan user tidak merasa jenuh harus mengikuti aplikasi yang sudah ditentukan. User dapat membaca menu ”about pintar” terlebih dahulu atau user juga dapat langsung memulai menjalankan aplikasi.
Adapun skenario pada aplikasi ini yaitu sebagai berikut:
1. Start
Aplikasi pertama kali dijalankan.
2. Inisialisai menu tampilan awal.
Setelah aplikasi dijalankan maka selanjutnya akan masuk ke dalam menu halaman depan :
a. Menu
Jika user memilih ”menu” maka muncul menu jadual belajar sebagai halaman utama yang meliputi : belajar angka, belajar huruf, berhitung, bahasa inggris, dongeng, dan latihan soal.
b. About pintar
Jika user memilih ”about pintar” maka muncul menu penjelasan tentang isi dari aplikasi.
3. Inisialisasi menu utama.
Setelah user memilih ”menu” maka selanjutnya akan masuk ke dalam menu utama yaitu halaman jadual belajar yang terdiri dari :
a. Belajar angka
Jika user memilih ”belajar angka” maka muncul menu belajar angka yaitu mengenal angka dan mengurutkan angka. Isi dari mengenal angka meliputi pengajaran bagaimana user dapat mengetahui bentuk angka 0 sampai angka 20 dan cara menulisnya. Isi dari mengurutkan angka meliputi pengajaran bagaimana user dapat mengetahui urutan angka yang benar dari angka 1 sampai angka 20. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.
b. Belajar huruf
Jika user memilih ”belajar huruf” maka muncul menu belajar huruf. Isi dari belajar huruf yaitu mengenal huruf dan
mengurutkan huruf. Mengenal huruf meliputi pengajaran bagaimana user dapat mengetahui bentuk huruf A sampai Z dan cara menulisnya. Mengurutkan huruf meliputi pengajaran bagaimana user dapat mengetahui urutan huruf alfabet yang benar. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.
c. Berhitung
Jika user memilih ”berhitung” maka muncul menu berhitung.
Isi dari berhitung meliputi penjumlahan dan pengurangan, dan perbandingan lebih banyak atau sedikit. Isi materi dari penjumlahan dan pengurangan meliputi pengajaran bagaimana user dapat melakukan perhitungan penjumlahan dan pengurangan (yang hasil angkanya tidak lebih dari 20). Isi materi dari perbandingan lebih banyak atau sedikit meliputi pengajaran bagaimana user dapat melakukan perhitungan perbandingan (yang pembanding angkanya tidak lebih dari 20). Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.
d. Bahasa inggris
Jika user memilih ”bahasa inggris” maka muncul menu bahasa inggris. Isi dari menu bahasa inggris meliputi mengenal benda, mengenal hewan dan mengenal warna. Isi materi dari mengenal benda meliputi pengajaran bagaimana user dapat mengetahui nama benda dalam bahasa inggris. Isi materi dari
mengenal hewan meliputi pengajaran bagaimana user dapat mengetahui nama hewan dalam bahasa inggris. Isi materi dari mengenal warna meliputi pengajaran bagaimana user dapat mengetahui nama warna dalam bahasa inggris. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.
e. Dongeng
Jika user memilih ”dongeng” maka muncul menu dongeng. Isi dari menu dongeng meliputi badu si pemalas dan puteri bulan.
Isi materi badu si pemalas meliputi bagaimana user dapat mendengarkan dan menyimak cerita, kemudian menjawab pertanyaan. Isi materi puteri bulan meliputi bagaimana user dapat mendengarkan dan menyimak cerita, kemudian menjawab pertanyaan. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.
f. Latihan Soal
Jika user memilih ”latihan soal” maka muncul menu latihan soal. Isi dari menu latihan soal meliputi bagaimana user menjawab pertanyaan–pertanyaan yang mencakup seluruh materi yang diajarkan. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.
4. Keluar
Jika tombol “Keluar” dipilih oleh user maka akan muncul perintah berupa tampilan peringatan untuk meyakinkan user agar
keluar seutuhnya atau user dapat kembali lagi ke menu halaman utama.
3.2.3 Antar Muka User (User Interface)
Setelah skenario kegiatan dibuat, maka langkah selanjutnya adalah membuat user interface. User Interface berisi desain tampilan pada layar monitor. Desain tampilan sekurang–kurangnya memuat informasi tentang judul, materi, nama halaman, kotak tampilan jika dilihat dilayar komputer, teks narasi, keterangan tampilan, dan keterangan tentang gambar, animasi.
3.2.3.1 Desain Halaman Depan
Gambar 3.9 menjelaskan desain user interface halaman depan pada aplikasi. Pada bagian atas terdapat animasi teks yang merupakan judul aplikasi yaitu ”Ayo Belajar Pintar”. Di samping kiri terdapat dua tombol yaitu tombol menu, dan tombol about pintar. Tombol menu berfungsi untuk merujuk ke halaman jadual belajar. Tombol about pintar berfungsi untuk merujuk ke halaman penjelasan tentang ”Ayo Belajar Pintar”. Di samping kanan terdapat animasi lebah yang berisi kalimat pembuka untuk halaman depan yaitu ayo teman-teman mari kita belajar ”pintar”.
Gambar 3.9 Desain User Interface Halaman Depan
Keterangan : 1. Judul Aplikasi 2. Tombol Menu 3. Tombol About Pintar 4. Animasi
3.2.3.2 Desain Halaman About Pintar
Gambar 3.10 menjelaskan desain User Interface menu about pintar. Pada bagian atas terdapat animasi teks yang merupakan judul halaman yaitu about pintar. Di bawah terdapat dua tombol yaitu tombol kembali, dan tombol lanjut. Tombol kembali berfungsi untuk merujuk ke halaman sebelumnya. Tombol lanjut berfungsi untuk merujuk ke halaman selanjutnya. Di tengah terdapat tulisan yang berisi kalimat penjelasan tentang ”Ayo Belajar Pintar”.
Gambar 3.10 Desain User Interface About Pintar
Keterangan : 1. Judul halaman 2. Tombol kembali 3. Tombol lanjut 4. Penjelasan
3.2.3.3 Desain Halaman Jadual Belajar
Gambar 3.11 menjelaskan desain user interface jadual belajar.
Pada bagian atas terdapat animasi teks yang merupakan judul halaman yaitu jadual belajar. Di bagian bawah judul halaman terdapat dua tombol yaitu tombol home dan tombol keluar. Tombol home berfungsi untuk merujuk ke halaman depan. Tombol keluar berfungsi untuk menutup halaman aplikasi sekuruhnya. Di tengah terdapat enam tombol yaitu tombol belajar angka, tombol belajar huruf, tombol berhitung, tombol bahasa inggris, tombol dongeng, dan tombol latihan soal. Tombol belajar angka berfungsi untuk merujuk ke halaman menu belajar angka. Tombol belajar huruf berfungsi untuk merujuk ke halaman menu belajar huruf. Tombol berhitung berfungsi untuk merujuk ke halaman menu belajar berhitung. Tombol bahasa inggris berfungsi untuk merujuk ke halaman menu belajar bahasa inggris.
Tombol dongeng berfungsi untuk merujuk ke halaman menu dongeng.
Tombol latihan soal berfungsi untuk merujuk ke halaman pembuka latihan soal. Di samping kanan terdapat animasi lebah yang berisi kalimat pembuka untuk halaman jadual belajar yaitu pilih materi pelajaran yang ingin teman pelajari.
Gambar 3.11 Desain User Interface Jadual belajar
Keterangan : 1. Judul halaman
2. Tombol belajar angka 3. Tombol belajar huruf 4. Tombol berhitung 5. Tombol bahasa inggris 6. Tombol dongeng 7. Tombol latihan soal 8. Animasi
9. Tombol home 10. Tombol keluar
3.2.3.4 Desain Halaman Pembuka
Gambar 3.12 menjelaskan desain User Interface halaman pembuka pertama yang akan muncul pada setiap setelah user mengakses menu belajar, yaitu pada halaman mengenal angka, mengurutkan angka, mengenal huruf, mengurutkan huruf, penjumlahan dan pengurangan, perbandingan lebih banyak atau sedikit, mengenal benda, mengenal hewan, mengenal warna, badu si pemalas, puteri bulan dan latihan soal. Pada bagian atas terdapat animasi teks yang merupakan judul halaman. Di samping kiri terdapat animasi lebah yang berisi kalimat pembuka untuk halaman pembuka pertama. Di samping kanan terdapat tombol lanjut berfungsi untuk merujuk ke halaman pembuka kedua.
Gambar 3.12 Desain User Interface Halaman Pembuka Pertama
Keterangan : 1. Judul halaman 2. Animasi 3. Tombol lanjut
Gambar 3.13 menjelaskan desain User Interface halaman pembuka kedua. Pada bagian atas terdapat animasi teks yang merupakan judul halaman. Di samping kiri terdapat animasi lebah yang berisi kalimat pembuka untuk halaman pembuka kedua. Di samping kanan terdapat tombol mulai berfungsi untuk merujuk ke halaman menu materi belajar.
Gambar 3.13 Desain User Interface Halaman Pembuka Kedua
Keterangan : 1. Judul halaman 2. Animasi 3. Tombol mulai
3.2.3.5 Desain Halaman Belajar
Gambar 3.14 menjelaskan desain User Interface menu belajar yang akan muncul setiap setelah user mengakses menu belajar, yaitu pada halaman belajar angka, belajar huruf, berhitung, bahasa inggris dan dongeng. Pada bagian atas terdapat animasi teks yang merupakan judul halaman. Di samping kiri terdapat dua tombol yaitu materi belajar satu dan materi belajar dua. Tombol materi belajar berfungsi untuk merujuk ke halaman pembelajaran. Di samping kanan terdapat tombol menu berfungsi untuk merujuk ke halaman jadual belajar.
Gambar 3.14 Desain User Interface Halaman Belajar
Keterangan : 1. Judul halaman
2. Tombol materi belajar satu 3. Tombol materi belajar dua 4. Tombol menu
3.2.3.6 Desain Halaman Urutan Angka atau Huruf
Gambar 3.15 menjelaskan desain User Interface halaman urutan angka atau huruf. Pada bagian atas terdapat teks yang merupakan judul halaman. Di bagian tengah terdapat dua puluh satu tombol yaitu tombol angka 0 sampai 20 atau tombol huruf A samapai Z, yang berfungsi untuk mengeluarkan suara nama angka atau huruf.
Di samping kanan bawah terdapat tombol lanjut berfungsi untuk merujuk ke halaman belajar mengenal angka atau huruf.
Gambar 3.15 Desain User Interface Halaman urutan angka atau huruf
Keterangan : 1. Judul halaman 2. Tombol suara 3. Tombol lanjut
4. Tombol angka 0 sampai 20 atau huruf A sampai Z
3.2.3.7 Desain Halaman Belajar Mengenal Angka dan Mengenal Huruf
Gambar 3.16 menjelaskan desain User Interface halaman belajar mengenal angka dan mengenal huruf. Pada bagian atas terdapat tombol yang juga merupakan judul halaman yaitu mengenal angka
atau mengenal huruf, yang berfungsi untuk merujuk ke halaman belajar angka. Di samping kiri terdapat tombol angka atau huruf yang berfungsi untuk merujuk ke animasi cara menulis. Di bagian bawah tombol angka atau huruf terdapat tombol kembali dan lanjut, yang berfungsi untuk memilih angka atau huruf sebelum dan selanjutnya.
Di samping kanan tombol angka atau huruf terdapat animasi cara menulis. Di samping kanan animasi terdapat tombol selesai, yang berfungsi untuk merujuk ke halaman penutup. Di bagian bawah terdapat keterangan nama angka atau huruf. Di samping keteragan terdapat tombol ulang, yang berfungsi untuk merujuk ke animasi cara menulis.
Gambar 3.16 Desain User Interface Halaman Mengenal Angka
Keterangan :
1. Tombol mengenal angka atau mengenal huruf 2. Tombol angka atau huruf
3. Animasi 4. Keterangan 5. Tombol ulang
6. Tombol kembali 7. Tombol lanjut 8. Tombol selesai
3.2.3.8 Desain Halaman Belajar Mengurutkan Angka dan Mengurutkan Huruf
Gambar 3.17 menjelaskan desain User Interface halaman mengurutkan angka dan mengurutkan huruf. Pada bagian atas terdapat tombol yang juga merupakan judul halaman yaitu mengurutkan angka atau mengurutkan huruf, yang berfungsi untuk merujuk ke halaman belajar angka. Di tengah terdapat kotak angka sebanyak 20 kotak, berfungsi untuk meletakkan urutan angka atau huruf. Di bagian bawah dan samping kotak angka terdapat tombol angka 1 sampai 20 atau huruf A sampai Z, yang berfungsi sebagai urutan angka atau huruf. Di samping kanan bawah terdapat tombol selesai, yang berfungsi untuk merujuk ke halaman penutup.
Gambar 3.17 Desain User Interface Halaman Mengurutkan Angka
Keterangan :
1. Tombol mengurutkan angka
2. Kotak angka 3. Tombol angka 4. Tombol selesai
3.2.3.9 Desain Halaman Berhitung Menggunakan Jari
Gambar 3.18 menjelaskan desain User Interface halaman berhitung menggunakan jari. Pada bagian atas terdapat judul halaman yaitu berhhitung menggunakan jari. Di samping kiri terdapat gambar angka, yang berfungsi untuk menjelaskan banyak jari tangan di samping. Di samping kanan terdapat gambar jari tangan, yang berfungsi untuk menjelaskan banyak jari tangan sama dengan angka di samping. Di samping kanan bawah terdapat tombol selesai, yang berfungsi untuk merujuk ke halaman penutup mengurutkan huruf. Di bagian bawah tombol kembali dan lanjut, yang berfungsi untuk merujuk ke halaman sebelum dan selanjutnya.
Gambar 3.18 Desain User Interface Halaman Berhitung Menggunakan Jari
Keterangan : 1. Judul halaman 2. Gambar angka
3. Gambar jari tangan 4. Tombol kembali 5. Tombol lanjut
3.2.3.10 Desain Halaman Belajar Penjumlahan dan Pengurangan Gambar 3.19 menjelaskan desain User Interface halaman belajar penjumlahan dan pengurangan. Pada bagian atas terdapat tombol penjumlahan dan pengurangan yang juga merupakan judul halaman yaitu penjumlahan dan pengurangan, yang berfungsi untuk merujuk ke halaman pembuka belajar penjumlahan dan pengurangan.
Di bagian bawah tombol penjumlahan dan pengurangan terdapat kotak jumlah kue happy dan kotak jumlah kue birthday, yang berfungsi untuk menjelaskan angka sebagai jumlah kue yang akan dihitung. Di bagian bawah kotak jumlah kue happy dan kotak jumlah kue birthday terdapat kotak kue happy dan kotak kue birthday, yang berfungsi untuk meletakkan kue yang akan dihitung. Di bagian tengan kotak jumlah kue happy dan kotak jumlah kue birthday terdapat tombol jumlah dan kurang, yang berfungsi untuk perhitungan jumlah kue. Di bagian bawah kotak kue happy dan kotak kue birthday terdapat tombol kue happy dan tombol kue birthday, yang berfungsi untuk perhitungan jumlah kue yang akan dihitung. Di bagian bawah tengah terdapat tombol ulang, yang berfungsi untuk merujuk ke halaman baru penjumlahan dan pengurangan. Di bagian kanan bawah tombol ulang terdapat kotak jumlah kue, yang berfungsi untuk menjelaskan angka sebagai hasil jumlah kue yang telah dihitung. Di bagian kanan bawah terdapat tombol selesai, yang berfungsi untuk merujuk ke halaman penutup penjumlahan dan pengurangan.
Gambar 3.19 Desain User Interface Halaman Belajar Penjumlahan dan Pengurangan
Keterangan :
1. Tombol penjumlahan dan pengurangan 2. Kotak jumlah kue happy
3. Kotak jumlah kue birthday 4. Kotak kue happy
5. Kotak kue birthday
6. Tombol jumlah dan kurang 7. Tombol kue happy
8. Tombol kue birthday 9. Tombol ulang
10. Kotak jumlah kue 11. Tombol selesai
3.2.3.11 Desain Halaman Belajar Perbandingan Lebih Banyak atau Sedikit
Gambar 3.20 menjelaskan desain User Interface halaman belajar perbandingan lebih banyak atau sedikit. Pada bagian atas terdapat tombol perbandingan lebih banyak atau sedikit yang juga merupakan judul halaman yaitu perbandingan lebih banyak atau
sedikit, yang berfungsi untuk merujuk ke halaman pembuka belajar perbandingan lebih banyak atau sedikit. Di bagian bawah tombol perbandingan lebih banyak atau sedikit terdapat kotak jumlah kue pink dan kotak jumlah kue orange, yang berfungsi untuk menjelaskan angka sebagai jumlah kue yang akan dibandingkan. Di bagian bawah kotak jumlah kue pink dan kotak jumlah kue orange terdapat kotak kue pink dan kotak kue orange, yang berfungsi untuk meletakkan kue yang akan dibandingkan. Di bagian tengah kotak jumlah kue pink dan kotak jumlah kue orange terdapat hasil perbandingan, yang berfungsi untuk sebagai hasil perbandingan jumlah kue. Di bagian bawah kotak kue pink dan kotak kue orange terdapat tombol kue pink dan tombol kue orange, yang berfungsi untuk perhitungan jumlah kue yang akan dihitung. Di bagian bawah tengah terdapat tombol ulang, yang berfungsi untuk merujuk ke halaman baru perbandingan lebih banyak atau sedikit. Di bagian atas tombol ulang terdapat tombol banding, yang berfungsi untuk mengeksekusi perbandingan kue. Di bagian kanan bawah terdapat tombol selesai, yang berfungsi untuk merujuk ke halaman penutup belajar perbandingan lebih banyak atau sedikit.
Gambar 3.20 Desain User Interface Halaman Belajar Perbandingan Lebih Banyak atau Sedikit
Keterangan :
1. Tombol perbandingan lebih banyak atau sedikit 2. Kotak jumlah kue pink
3. Kotak hasil perbandingan kue 4. Kotak kue orange
5. Kotak kue pink 6. Kotak kue orange 7. Tombol kue pink 8. Tombol kue orange 9. Tombol banding 10. Tombol ulang 11. Tombol selesai
3.2.3.12 Desain Halaman Belajar Mengenal Hewan, Mengenal Benda Gambar 3.21 menjelaskan desain User Interface halaman belajar mengenal hewan dan mengenal benda. Pada bagian atas terdapat tombol yang juga merupakan judul halaman yang berfungsi untuk merujuk ke halaman belajar bahasa inggris. Di tengah terdapat
gambar berfungsi untuk menjelaskan bentuk hewan atau benda. Di bagian bawah gambar terdapat tombol kembali dan lanjut, yang berfungsi untuk memilih gambar sebelum dan selanjutnya. Di samping kanan bawah tombol lanjut terdapat keterangan nama gambar dalam bahasa indonesia. Di samping kiri bawah tombol kembali terdapat keterangan nama gambar dalam bahasa inggris. Di bagian bawah terdapat keterangan nama gambar dalam bahasa indonesia terdapat tombol ulang, yang berfungsi untuk merujuk ke suara nama gambar.
Di samping kanan bawah animasi terdapat tombol selesai, yang berfungsi untuk merujuk ke halaman penutup mengenal hewan atau benda.
Gambar 3.21 Desain User Interface Halaman Mengenal Hewan, Benda
Keterangan :
1. Tombol mengenal hewan atau benda 2. Gambar
3. Tombol kembali 4. Tombol lanjut
5. Keterangan nama gambar dalam bahasa indonesia 6. Keterangan nama gambar dalam bahasa inggris
7. Tombol ulang 8. Tombol selesai
3.2.3.13 Desain Halaman Belajar Mengenal Warna
Gambar 3.22 menjelaskan desain User Interface halaman belajar mengenal warna. Pada bagian atas terdapat tombol mengenal warna yang juga merupakan judul halaman yaitu mengenal warna, yang berfungsi untuk merujuk ke halaman bahasa inggris. Di tengah terdapat tombol warna berfungsi untuk merujuk ke keterangan nama dan suara warna. Di samping kiri bawah terdapat keterangan nama warna. Di bagian kanan bawah terdapat tombol ulang, yang berfungsi untuk merujuk ke suara nama warna. Di samping kanan tombol ulang terdapat tombol selesai, yang berfungsi untuk merujuk ke halaman penutup mengenal warna.
Gambar 3.22 Desain User Interface Halaman Mengenal Warna
Keterangan :
1. Tombol mengenal warna 2. Tombol warna
3. Keterangan nama warna
4. Tombol ulang 5. Tombol selesai
3.2.3.14 Desain Halaman Badu Si Pemalas atau Puteri Bulan
Gambar 3.23 menjelaskan desain User Interface halaman dongeng badu si pemalas atau puteri bulan. Pada bagian atas terdapat tombol yang juga merupakan judul halaman yaitu badu si pemalas atau puteri bulan, yang berfungsi untuk merujuk ke halaman dongeng.
Di samping kiri terdapat gambar. Di bagian kanan terdapat cerita, yang berfungsi untuk menjelaskan apa yang terjadi pada gambar. Di samping kanan bawah terdapat tombol lanjut berfungsi untuk merujuk ke halaman selanjutnya.
Gambar 3.23 Desain User Interface Halaman Badu Si Pemalas atau Puteri Bulan
Keterangan :
1. Tombol badu si pemalas atau puteri bulan 2. Gambar
3. Keterangan cerita 4. Tombol lanjut
3.2.3.15 Desain Halaman Latihan Soal
Gambar 3.24 menjelaskan desain User Interface halaman latihan soal. Pada bagian atas terdapat tombol latihan soal yang juga merupakan judul halaman yaitu latihan soal, yang berfungsi untuk merujuk ke halaman pembuka pertama latihan soal. Di bagian kanan atas terdapat keterangan soal, yang berfungsi untuk menjelaskan soal keberapa yang sedang dikerjakan. Di bagian tengah terdapat soal, yang berfungsi untuk menjelaskan isi pertanyaan yang dikerjakan. Di bagian bawah soals terdapat tombol jawaban, yang berfungsi untuk menjawab pertanyaan diatasnya dan merujuk ke halaman selanjutnya.
Di samping kanan bawah terdapat keterangan nama dan nilai berfungsi untuk menjelaskan siapa yang mengerjakan soal dan berapa nilainya.
Gambar 3.24 Desain User Interface Halaman Latihan Soal
Keterangan :
1. Tombol latihan soal 2. Keterangan soal 3. Pertanyaan 4. Tombol jawaban
5. Keterangan nama 6. Keterangan nilai
3.2.3.16 Desain Halaman Penutup
Gambar 3.25 menjelaskan desain User Interface halaman penutup pertama yang akan muncul pada setiap setelah user selesai mengakses menu materi belajar, yaitu pada halaman mengenal angka, mengurutkan angka, mengenal huruf, mengurutkan huruf, penjumlahan dan pengurangan, perbandingan lebih banyak atau sedikit, mengenal benda, mengenal hewan, dan mengenal warna. Pada bagian atas terdapat animasi teks yang merupakan judul halaman. Di samping kiri terdapat animasi lebah yang berisi kalimat untuk halaman penutup pertama. Di samping kanan bawah terdapat tombol lanjut berfungsi untuk merujuk ke halaman penutup kedua.
Gambar 3.25 Desain User Interface Halaman Penutup Pertama Keterangan :
1. Judul halaman 2. Animasi 3. Tombol lanjut
Gambar 3.26 menjelaskan desain User Interface halaman penutup kedua. Pada bagian atas terdapat animasi teks yang
merupakan judul halaman. Di samping kiri terdapat animasi lebah yang berisi kalimat penutup untuk halaman penutup kedua. Di samping kanan bawah terdapat tombol menu berfungsi untuk merujuk ke halaman jadual belajar.
Gambar 3.26 Desain User Interface Halaman Penutup Kedua
Keterangan : 1. Judul halaman 2. Animasi 3. Tombol menu
3.3 Metode Pengujian Sistem
Dalam penelitian ini, pengujian sistem dilakukan dengan metode alfa testing dan beta testing. Pengujian alfa testing merupakan pengujian yang dilakukan oleh pemakai di lingkungan pengembang, pengujian ini dilakukan untuk mengetahui apakah aplikasi bisa berjalan dengan semestinya dan untuk menemukan kesalahan- kesalahan yang mungkin terjadi di dalam aplikasi sehingga bisa dilakukan perbaikan untuk memperbaiki kesalahan tersebut (Romeo, 2009).
Sedangkan beta testing merupakan pengujian yang dilakukan oleh pemakai pada lingkungan operasi pemakai, di mana lingkungan perangkat lunak tidak lagi dapat dikendalikan oleh pengembang karena perangkat lunak sudah dirilis. Pengujian beta testing untuk aplikasi ini dilakukan terhadap murid di sekolah TK Realfunrainbow Preschool.
Pertama, penulis akan mengujikan sistem pada murid dan menjelaskan cara dalam menggunakannya. Selanjutnya penulis akan meminta murid untuk menerapkan aplikasi dalam proses sistem pembelajaran. Terakhir, penulis akan meminta kepada murid untuk menjawab latihan soal dari aplikasi yang diujikan. Hasil dari nilai latihan soal kemudian akan diolah menjadi bentuk statistik untuk mengetahui apakah aplikasi yang telah dibuat telah sesuai dengan kebutuhan dan berhasil diterapkan.
