BAB IV PERANCANGAN USER INTERFACE 4.1 Pembahasan Rancangan User Iterface Berikut ini pembahasan dan tampilan-tampilan pada Game Edukasi. 4.1.1 Halaman Menu Utama Game Edukasi Halaman menu utama game edukasi adalah halaman awal pada sistem Game Edukasi. Halaman Menu utama ini berisi tentang pilihan berbagai menu pada game edukasi. User dapat memilih mata pelajaran yang akan di pelajari dan dapat memilih cara penggunaan game edukasi. Gambar 4.1 : User Interface Menu Utama Game Edukasi Pada halaman menu utama tersebut terdapat beberapa list menu yang dapat diakses secara langsung. 31
4.1.2 Halaman Menu Help Pada halaman ini user dapat melihat tata cara penggunaan game edukasi. Informasi mengenai memainkan game edukasi, dan mengenai materi pelajaran yag tersedia pada game edukasi. Gambar 4.2 User Interface Menu Help Game Edukasi 4.2. Halaman Mata Pelajaran IPA Halaman Mata Pelajaran IPA adalah halaman yang berisi mengenai materi pelajaran IPA dan Games IPA. Halaman ini diakses oleh pengguna untuk mempelajari materi pelajaran dan untuk bermain game khusus bidang mata pelajaran IPA 32
Gambar 4.3 User Interface Mata Pelajaran IPA 4.2.1. Halaman Materi Pelajaran IPA Halaman Materi Pelajaran IPA adalah halaman yang berisi materi pelajaran IPA dari usia 7 sampai dengan 9 tahun. Halaman ini terdiri dari 6 materi. Materi 1 dan 2 adalah untuk materi yang membahas pelajaran IPA kelas 2 SD, materi 3 dan 4 adalah untuk pelajaran IPA kelas 3 SD, materi 5 dan 6 adalah untuk pelajaran IPA kelas 4 SD. 33
Gambar 4.4 User Interteface Halaman Materi Peajaran IPA Pada saat siwa memilih hewan dan tumbuhan maka akan masuk ke slide berikut: 34
Gambar 4.5 User Interface Meteri Pelajaran Hewan dan Tumbuhan Pada materi tersebut terdapat gambar hewan dan tumbuhan yang menggambarkan alat gerak dan juga fungsiya. Kemudian pada materi selanjutnya adalah sumber energi 35
Gambar 4. 6 User Interface Materi Pelajaran Sumber Energi Pada materi pelajaran Sumber Energi digambarkan berbagai macam sumber energi beserta fungsiya. 36
Gambar 4.7 User Interface Materi Pelajaran Bumi dan Semesta Pada materi tersebut dijelaskan bagaimana bentuk bumi di alam semesta dan bagaimana keadaan langit dan cuaca 4.2.2. Halaman Play Game IPA Bagian dari menu selanjutya adalah play game IPA. Menu Play game adalah menu permainan. Di mana pada pada game IPA terdapat beberapa pertanyaan yang harus diselesaikan oleh user. Pada halaman game terdapat ruangan. Di dalam ruangan terdapat beberapa pertanyaan yang harus diselesaikan oleh user untuk masuk ke ruangan berikutnya. Berikut merupakan Icon yag digunakan dalam Games IPA: 1. User / Siswa merupakan user yang memainkan permainan. User pada game ini dapat berjalan ke arah pertanyaan maupun ke arah jawaban. 37
2. Tombol Pertanyaan digambarkan sebagai siswa yang duduk di dalam kelas. Pada saat User menyentuh Tombol tersebut muncul pertanyaan. Pertanyaannya dimulai dari siswa paling belakang. 3. Data Base Jawaban merupakan kumpulan jawaban dari pertanyaan. Jawaban tersebut digambarkan berada dalam sebuah database yang mempunyai pemutar untuk mengacak jawaban. Oleh karena itu user membutuhkan kecepatan untuk memilih jawaban yang benar. Terdapat icon hand yang akan mengarahkan user dalam memilih jawaban. 38
User Pertanyaan Gambar 4.8 User Interface Games IPA Pada halaman tersebut terdiri dari beberapa siswa. Apabila disentuh maka akan tampil pertanyaan. Contohnya adalah pertanyaan mana saja termasuk alat gerak hewan. Setelah user membaca pertanyaan tersebut maka user mengklik kembali tombol tersebut untuk tampil ke database jawaban atau dapat dengan berjalan ke arah jawaban Database jawaban Pilihan User Siswa Gambar 4.9 User Interface Database Jawaban Games IPA Pada database tersebut terdapat beberapa jawaban, siswa harus mengarahkan icon hand untuk memilih jawaban yang benar. Database jawaban akan berputar maka user harus memiliki kecepatan gerakan tangan dan mata. Pilihan user akan tampil pada kotak dialog berikut. 39
Penambahan Score Kotak dialog Petunjuk Ruangan Gambar 4.10 User Interface Papan Score Games IPA Gambar diatas merupakan papan score Games IPA, pada saat User telah memilih jawaban akan muncul score pada papan score. Jika jawaban user benar maka akan tampil kotak dialog selamat jawaban anda benar. Namun jika salah maka akan tampil gambar dibawah ini. Keterangan Jawaban Kotak dialog Jawaban Benar Gambar 4.11 User Interface Pernyataan Jawaban USer 40
Gambar diatas menampilkan jawaban user apabila salah. Pada kotak keterangan jawaban akan menampilkan maaf jawaban anda salah selanjutnya pada kotak dialog akan ditampilkan gambar pilihan jawaban yang benar. Gambar 4.12 User Interface Contoh Soal IPA 41
42
Gambar 4.13 User Interface Contoh Soal IPA 4.3 Halaman Mata Pelajaran IPS Halaman mata pelajaran IPS adalah halaman utama mata pelajaran IPS, halaman mata pelajaran IPS sama halnya dengan mata pelajaran IPA yaitu terdiri dari materi pelajaran dan play game. 43
Gambar 4.14 User Interface Mata Pelajaran IPS 4.3.1 Halaman Materi Pelajaran IPS Halaman materi pelajaran IPS membahas beberapa topik pelajaran yaitu seperti terlihat dari gambar di bawah ini: 44
Gambar 4.15 User Interface Materi Pelajaran IPS Pada saat user akan mempelajari mengenal lingkungan maka harus di klik terlebih dahulu. Gambar di bawah ini berisi mengenai materi pelajaran mengenal lingkungan. 45
Gambar 4.16 User Interface Materi Pelajaran Mengenal Lingkungan Materi yang dibahas dalam game edukasi ini untuk kelas 4 SD adalah materi pelajaran melestarikan lingkngan pada saat siswa mengkliknya maka materi yang tampil adalah seperti gambar di bawah ini 46
Gambar 4.17 User Interface Materi Pelajaran Melestarikan Lingkungan 4.3.2 Halaman Game Mata Pelajaran IPS Pada menu utama mata pelajaran IPS terdapat menu game pada menu ini siswa dapat bermain game yang berkaitan dengan mata pelajaran tersebut. Berikut merupakan user interface game mata pelajaran IPS Tombol Soal User Gambar 4.18 Perancangan User Interface Games IPS Pada gambar diatas terdapat user yang berada dalam suatu ruangan, dimana jika ingin keluar maka dia harus selesaikan soal-soal pada tombol. Pada saat tombol pertama, 47
user masuk pertanyaan pertama, jawabannya terdapat pada jalur 2 dan 3 di setiap jalur terdapat seekor anjing yang menjadi musuh user, anjing tersebut akan menghalangi user. Maka user harus masuk pada saat user bergerak berlawanan arah dengan anjing tersebut. Pada gambar berikutnya terdapat simbol jawaban. Pada game ini teridiri dari banyak jawaban jadi user harus mengumpulkan jawaban untuk membuka pintu. Caranya adalah dengan menyentuh jawaban. Jika jawaban user benar maka akan menambah skor, namun jika salah maka tidak ada penambahan skor. Setiap soal akan memberi kunci untuk membuka pintu ruangan. Papan Score Musuh Kumpulan Jawaban Gambar 4.19 User Interface Jawaban Games IPS Gambar di bawah ini merupakan tampilan soal game IPS. Contohnya pertanyaan yang menjadi bagian dari dokumen pribadi adalah maka user harus mencari jawaban yang terapat pada jalur 2 dan jalur 3. Jika jawaban user benar maka score akan bertambah terapat pada papan score dan akan tampil kotak dialog keterangan jawaban benar. 48
Keterangan Jawaban Gambar 4.20 User Interface Keterangan Jawaban Game IPS Namun jika salah maka akan tampil kotak dialog keterangan jawaban salah. Score user juga tidak bertambah. Pada keterangan jawaban juga akan ditampilkan ikonikon jawaban yang benar. Keterangan Jawaban Salah Gambar 4.21 User nterface Kotak Dialog Jawaban Salah Pada Game IPS 49
Gambar 4.22 User Interface Contoh Soal Game IPS 50
Gamar 4.23 User Interface Soal Game IPS 51
Berikut merupakan penjelasan simbol: 1. User/Siswa merupakan user yang memainkan game. User berada dalam satu ruangan untuk keluar dari ruangan maka user harus menjawab pertanyaan. 2. Musuh merupakan seekor anjing yang akan menjadi tantangan user untuk mencari jawaban. Musuh ini terdapat pada setiap jalur jawaban yang akan menghalangi user oleh karena itu user harus memiliki kemampuan visualisasi yang baik untuk mencegah serangan musuh. 3. Tombol merupakan simbol pertanyaan yang akan menampilkan pertanyaan pada user. 4. Papan Score merupakan papan yang menampilkan score user. Juga akan menampilkan informasi pintu keluar ruangan. 5. Jawaban merupakan ikon- ikon yang dikumpulkan user dengan menyentuhnya untuk menjawab pertanyaan games. Jawaban ini berada pada jalur 2 dan 3 games IPS. 52
4.4 Halaman Mata Pelajaran Bahasa Inggris Halaman utama mata pelajaran bahasa inggris sama dengan 2 mata pelajaran diatas. Yaitu terdiri dari materi pelajaran dan play game. Gambar 4.24 User Interface Mata Pelajaran Bahasa Inggris 4.4.1 Halaman Materi Pelajaran Bahasa Inggris Pada saat masuk materi pelajaran, maka materi pelajaran yang muncul adalah: 53
Gambar 4.25 User Interface Materi Pelajaran Bahasa Inggris Pada saat memilih tutur kata bahasa inggris maka akan muncul materi sebagai berikut: 54
Gambar 4.26 User Interface Materi Tutur Kata Bahasa Iggris Dalam materi diatas di jelaskan bagaimana tutur kata pada saat meminta sesuatu beserta dengan responnya. Materi berikutnya adalah perkenalan: 55
Gambar 4.27 User Interface Materi Pelajaran Perkenalan Pada materi diatas menjelaskan bagaimana seseorang memperkenalkan diri, dan selanjutnya adalah bagaimana seseorang akan berkenalan kepada seseorang. Pada gambar diatas dijelaskan mengenai materi menjelaskan nama, tedapat nama paggilan dan nama panjang. 4.4.2 Game Mata Pelajaran Bahasa Inggris Berikut merupakan perancangan gambar games mata pelajaran bahasa inggris Gambar 4.28 User Interface Game Bahasa Inggris 56
Gambar 4.29 User Interface Jawaban Game Bahasa Inggris Gambar diatas merupakan user interface dari games edukasi bahasa inggris. Games edukasi dirancang dengan percakapan bahasa inggris. Dudu merupakan bagian dari sistem yang akan memberikan pertanyaan untuk Rina. Tourist merupakan seseorang yang sedang melakukan perjalanan di daerah rina. Rina di sini sebagai siswa yang akan bercakapan dengan tourist. Di sebelah Rina tersedia option jawaban untuk menjawab pertanyaan tourist tersebut. Maka Rina harus memilih jawaban yang tepat. Perancangan game ini diusulkan menggunakan suara dalam percakapannya. Pada saat Rina memilih respon yang salah maka sistem akan menampilkan gambar berikut: Kotak Dialog Jawaban Gambar 4.30 User Interface Jawaban Salah Game Bahasa Inggris 57
Gambar 4.31 User Interface Contoh Soal Bahasa Inggris 58
Gambar 3.32 User Interface Contoh Soal Bahasa Inggris Berikut merupakan simbol-simbol yang terdapat pada game bahasa inggris 1. Tourist merupakan yang akan menanyakan kepada user dalam bahasa inggris. 2. Rina merupakan user yang memecahkan soal/pertanyaan tourist. 3. Sistem merupakan pernyataan bagi user untuk menjawab pertanyaan maupun pernyataan jawaban benar ataupun salah. 4. Option merupakan pilihan bagi Rina untuk menjawab pertanyaan tourist. 59
4.5 Studi Kelayakan Sistem Suatu sistem yang diusulkan harus layak, yaitu memenuhi kriteria kelayakan yaitu segi operasional, segi teknis, dan segi ekonomis. 4.5.1 Kelayakan Teknis Bila dilihat dari segi teknis, sistem informasi ini sangat layak karena perancangannnya mudah dipahami dan mudah untuk dibangun. Hanya dengan menggunakan aplikasi pembangunan game, beserta dengan gambar yang mendukung. 4.5.2 Kelayakan Ekonomis Secara ekonomis, perancangan game edukasi ini dapat memberikan keuntungan bagi masyarakat, yaitu dengan membangun aplikasi ini siswa dapat belajar dan bermain game. 4.6 Kelebihan dan Kekurangan Sistem 4.6.1 Kelebihan Sistem Adapun kelebihan-kelebihan yang dimiliki oleh sistem ini antara lain: 1. Teknik permainannya yang interaktif 2. Mempermudah siswa dalam mempelajari mata pelajaran di sekolah 3. Tersedia informasi materi pelajaran yang membahas mata pelajaran IPA, IPS dan Bahasa Inggris 4.6.2 Kekurangan Sistem 1. Sistem masih berupa perancangan, oleh sebab itu sangat penting untuk dibangun menjadi sebuah aplikasi. 2.Sistem masih belum dibangun oleh karena itu masih belum diketahui bagaimana tingkat keamanan sistem. 3. Sistem berupa perancangan mockup yang perlu untuk dikembangkan sehingga kekurangannya dapat disempurnakan. 60