46
BAB III PEMBAHASAN 3.1 Analisis Kebutuhan Untuk mempermudah analisis kebutuhan dalam menentukan keseluruhan yang dibutuhkan secara lengkap, maka dibagi menjadi dua yaitu kebutuhan fungsional dan kebutuhan non-fungsional. 3.1.2 Kebutuhan Fungsional Kebutuhan fungsional adalah jenis kenutuhan yang berisi tentang proses- proses apa saja yang dilakukan oleh sistem. Maka dapat disimpulkan sistem yang dibutuhkan dalam perancangan game edukasi ini adalah memiliki kriteria sebagai berikut : 1. Tampilan pengguna (user Interface) Umumnya sebuah game edukasi haruslah didukung oleh user interface yang sederhana sehingga tidak membuat user menjadi bingung dalam bermain. 2. Materi Permainan Materi permainan haruslah mendidik sehingga mencapai sasaran utama dalam game ini. 3. Musik dan Suara Pendukung Sebuah game akan lebih hidup jika ada musik atau suara pendukung sehingga user tidak mudah bosan. Game ini memiliki tampilan antar muka yang sederhana, soal-soalnya pun di dapat dari materi yang diberikan didalam game ini.

BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Embed Size (px)

Citation preview

Page 1: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

BAB III

PEMBAHASAN

3.1 Analisis Kebutuhan

Untuk mempermudah analisis kebutuhan dalam menentukan keseluruhan

yang dibutuhkan secara lengkap, maka dibagi menjadi dua yaitu kebutuhan

fungsional dan kebutuhan non-fungsional.

3.1.2 Kebutuhan Fungsional

Kebutuhan fungsional adalah jenis kenutuhan yang berisi tentang proses-

proses apa saja yang dilakukan oleh sistem. Maka dapat disimpulkan sistem yang

dibutuhkan dalam perancangan game edukasi ini adalah memiliki kriteria sebagai

berikut :

1. Tampilan pengguna (user Interface)

Umumnya sebuah game edukasi haruslah didukung oleh user interface yang

sederhana sehingga tidak membuat user menjadi bingung dalam bermain.

2. Materi Permainan

Materi permainan haruslah mendidik sehingga mencapai sasaran utama dalam

game ini.

3. Musik dan Suara Pendukung

Sebuah game akan lebih hidup jika ada musik atau suara pendukung sehingga

user tidak mudah bosan.

Game ini memiliki tampilan antar muka yang sederhana, soal-soalnya pun di

dapat dari materi yang diberikan didalam game ini.

Page 2: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

3.1.3 Kebutuhan Non-Fungsional

Analisa kebutuhan non fungsional yaitu berupa perangkat keras dan

perangkat lunak, antara lain:

1. Perangkat keras (Hardware)

Kebutuhan hardware yang digunakan untuk menjalankan game yang dibuat

dengan Construct 2 ini adalah:

a. Smartphone Android

b. Ram Minimal 512 MB

2. Perangkat Lunak (Software)

Untuk menjalankan game ini dibutuhkan Smartphone atau Tablet PC dengan

sistem operasi Android v4.1 ( jelly bean ) keatas.

3.2 Perancangan Perangkat Lunak

3.2.1 Rancangan StoryBoard

TABEL III.1 Storyboard Intro

VISUAL SKETSA AUDIO

Dalam layout ini terdapat intro untuk pembukaan game

TEKS BERGERAK

click.ogg

MattOglseby.ogg

Sumber: hasil rancangan penelitian

Page 3: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

TABEL III.2 Storyboard Menu

VISUAL SKETSA AUDIO

Dalam layout ini terdapat tiga tombol yaitu : Play, about me, dan pengaturan.

JUDUL

ABOUT ME

PLAY

PENGATURAN

click.ogg

MattOglseby.ogg

Hello.ogg

Sumber: hasil rancangan penelitian

TABEL III.3 Storyboard Pilih Materi

VISUAL SKETSA AUDIO

Dalam layout ini terdapat dua tombol untuk pemilihan materi yaitu : Komputer dan pengetahuan umum, satu tombol untuk kembali.

KOMPUTER

JUDUL

PENGETAHUAN UMUM

<

click.ogg

MattOglseby.ogg

Pilihmateri.ogg

Sumber: hasil rancangan penelitian

Page 4: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

TABEL III.4 Storyboard Materi Komputer

VISUAL SKETSA AUDIO

Dalam layout materi ini terdapat tombol materi, soal dan back.Audio “sebelumjawab.ogg” Akan terputar secara otomatis untuk memberikan petunjuk pada user.

JUDUL

SOAL

MATERI

<

click.ogg

MattOglseby.ogg

Sebelumjawab.ogg

Sumber: hasil rancangan penelitian

TABEL III.5 Storyboard layout Materi

VISUAL SKETSA AUDIO

Dalam layout ini terdapat gambar dan teks materi.Ada dua tombol yang berfungsi untuk melanjutkan ke frame berikut dan sebelumnya yaitu : back dan next, pada akhir layout materi akan ditambah satu tombol Home.

GAMBAR

JUDUL

MATERI

< >

click.ogg

MattOglseby.ogg

Sumber: hasil rancangan penelitian

Page 5: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

TABEL III.6 Storyboard Layout Soal Pilihan Ganda Komputer

VISUAL SKETSA AUDIO

Dalam layout ini user disajikan soal dan pilihan ganda.User wajib menjawab salah satu dari pilihan ganda tersebut, jika jawaban salah akan tampil pemberitahuan salah dan jawaban yang benar, sebaliknya jika jawaban benar maka akan tampil pemberitahuan jawaban benar dan dalam hitungan 0.5 detik popup akan keluar beserta tombol next.Setiap jawaban benar skor akan bertambah 5 dan akan ditampilkan di akhir layout soal.Jika user ingin keluar dari layout ini user harus menekan tombol home maka akan ada pemberitahuan melalui suara dan skor otomatis di atur ulang menjadi 0.Frame ini sama bentuknya sampai soal pilihan ganda terakhir nomor 5.

JUDUL

SOAL

KETERANGANBENAR/SALAH

BA

click.ogg

MattOglseby.ogg

Wrong.ogg

Congratulations.ogg

Sumber: hasil rancangan penelitian

Page 6: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

TABEL III.7 Storyboard Layout Kuis Essay komputer

VISUAL SKETSA AUDIO

Dalam layout ini konsepnya sama dengan layout pilihan ganda.User tinggal menjawab soal tersebut dengan mengetik jawaban tersebut dan menekan tombol Ok layout ini sama bentuknya sampai soal essay terakhir nomor 5.

JUDUL

SOAL/GAMBAR

KETIK JAWABAN

OK

click.ogg

MattOglseby.ogg

Wrong.ogg

Congratulations.ogg

Close.ogg

Sumber: hasil rancangan penelitian

TABEL III.8 Storyboard Popup Skor

VISUAL SKETSA AUDIO

Layout ini berisi total skor dari yang diperoleh dari hasil jawaban yang didapat pada soal pilihan ganda dan essay.Tombol home untuk kembali ke menu.

***

TEKS

HOME

click.ogg

MattOglseby.ogg

Sumber: hasil rancangan penelitian

Page 7: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

TABEL III.9 Storyboard Layout Soal Pilihan Ganda Pengetahuan Umum

VISUAL SKETSA AUDIO

Dalam layout ini user disajikan soal jawaban pilihan ganda.User wajib menjawab salah satu dari pilihan ganda tersebut, jika jawaban salah akan tampil pemberitahuan salah dan jawaban yang benar, sebaliknya jika jawaban benar maka akan tampil pemberitahuan jawaban benar dan dalam hitungan 0.5 detik popup akan keluar beserta tombol next.Setiap jawaban benar skor akan bertambah 5 dan akan ditampilkan di akhir layout soal.Jika user ingin keluar dari layout ini user harus menekan tombol home maka akan ada pemberitahuan melalui suara dan skor otomatis di atur ulang menjadi 0.Frame ini sama bentuknya sampai soal pilihan ganda terakhir nomor 10

JUDUL

SOAL

KETERANGANBENAR/SALAH

BA

HOME

click.ogg

MattOglseby.ogg

Wrong.ogg

Congratulations.ogg

Close.ogg

Sumber: hasil rancangan penelitian

Page 8: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

TABEL III.10 Storyboard Layout Kuis Essay Pengetahuan Umum

VISUAL SKETSA AUDIO

Dalam layout ini konsepnya sama dengan layout pilihan ganda.User tinggal menjawab soal tersebut dengan mengetik jawaban tersebut dan menekan tombol Ok layout ini sama bentuknya sampai soal essay terakhir nomor 10.

JUDUL

SOAL/GAMBAR

KETIK JAWABAN

OK

click.ogg

MattOglseby.ogg

Wrong.ogg

Congratulations.ogg

Close.ogg

Sumber: hasil rancangan penelitian

TABEL III.11 Storyboard Popup Skor Pengetahuan Umum

VISUAL SKETSA AUDIO

Layout ini berisi total skor dari yang diperoleh dari hasil jawaban yang didapat pada soal pilihan ganda dan essay.Tombol home untuk kembali ke menu.

***

TEKS

HOME

click.ogg

MattOglseby.ogg

Sumber: hasil rancangan penelitian

Page 9: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

1.2.2 Rancangan Antar Muka

Menjelaskan rancangan antarmuka (interface) yang terdapat pada game kuis

“Fun Learn Tech”.

1. Rancangan Antar Muka Intro

Sebelum masuk ke menu utama user dihadapkan dengan layout/frame

intro dengan animasi teks bergerak, user wajib menekan atau menyentuh layar

smartphone nya tersebut supaya dapat masuk kemenu utama.

Teks Bergerak

Sumber: hasil rancangan penelitian.

Gambar III.1. Rancangan Antarmuka Intro

Page 10: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

2. Rancangan Antar Muka Menu Utama

Tampilan menu utama ini berisi 4 tombol navigasi seperti Play, About Me,

Keluar, dan Pengaturan. Tombol Play digunakan untuk melanjutkan ke layout

berikutnya yaitu layout pemilihan materi, tombol About Me berisi layout

tentang pembuat game kuis ini, tombol Keluar digunakan jika ingin keluar dari

game, dan yang terakhir tombol navigasi pengaturan musik apakah ingin

disenyapkan atau dihidupkan.

JUDUL GAME

PLAY

ABOUT ME

KELUAR

PENGATURAN

Sumber: hasil rancangan penelitian.

Gambar III.2. Rancangan Antarmuka Menu Utama

3. Rancangan Antar Muka Option Pilih Materi

Ketika masuk ke layout ini user akan diarahkan oleh suara yang terputar

dalam layout ini. Tampilan Option Pilih Materi ini berisi 3 tombol navigasi

seperti komputer, Pengetahuan Umum, dan Back. Tombol komputer digunakan

Page 11: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

untuk masuk ke layout materi komputer, tombol pengetahuan umum untuk

masuk ke layout materi pengetahuan umum, sedangkan tombol Back untuk

kembali ke layout sebelumnya.

JUDUL HALAMAN

<

PENGETAHUAN UMUM

KOMPUTER

Sumber: hasil rancangan penelitian.

Gambar III.3. Rancangan Antarmuka Option

4. Rancangan Antar Muka Layout Materi Komputer

Ketika masuk ke layout ini user akan diarahkan oleh suara yang terputar

dalam layout ini, layout ini berisi tiga tombol navigasi yaitu Materi, Soal, dan

tombol navigasi Kembali, ketiga tombol tersebut memiliki fungsi yang berbeda

dan diberikan animasi bergerak pada tombol tersebut supaya user tidak merasa

bosan ketika melihatnya, tombol materi akan lanjut ke layout materi yang telah

Page 12: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

disediakan, tombol Soal akan masuk ke soal pilihan ganda pertama, sedangkan

tombol kembali akan kembali ke layout sebelumnya.

JUDUL HALAMAN

<

SOAL

MATERI

Sumber: hasil rancangan penelitian.

Gambar III.4. Rancangan Antarmuka Layout Materi komputer

5. Rancangan Antar Muka Layout Materi Komputer

Rancangan Tampilan materi komputer ini berisi 3 tombol navigasi

seperti Back, Next, dan Home. Tombol navigasi Next digunakan untuk

melanjutkan ke materi berikutnya, tombol Back untuk kembali ke layout

sebelumnya, dan yang terakhir tombol navigasi Home digunakan ketika ingin

kembali ke layout option materi, setiap layout diberikan materi yang berbeda

Page 13: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

dan pada akhir layout materi ini user akan diarahkan untuk kembali ke layout

awal untuk memulai kuis.

JUDUL HALAMAN

TEKS MATERI

GAMBAR MATERI

><

HOME

Sumber: hasil rancangan penelitian.

Gambar III.5. Rancangan Antarmuka Materi komputer

6. Rancangan Antar Muka Layout Materi Pengetahuan umum

Rancangan Tampilan materi pengetahuan umum ini berisi 3 tombol

navigasi seperti Back, Next, dan Home. Tombol navigasi Next digunakan

untuk melanjutkan ke materi berikutnya, tombol Back untuk kembali ke layout

sebelumnya, dan yang terakhir tombol navigasi Home digunakan ketika ingin

kembali ke layout option materi, setiap layout diberikan materi yang berbeda

dan pada akhir layout materi ini user akan diarahkan untuk kembali ke layout

awal untuk memulai kuis.

Page 14: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

JUDUL HALAMAN

GAMBAR MATERI

TEKS MATERI

< >

HOME

Sumber: hasil rancangan penelitian.

Gambar III.6. Rancangan Antarmuka Materi Pengetahuan Umum

7. Rancangan Antar Muka Soal Komputer

a. Materi Soal pilihan Ganda Komputer

Dalam layout ini user disajikan soal dengan jawaban pilihan ganda

user wajib menjawab salah satu dari pilihan ganda tersebut, jika jawaban

salah akan tampil pemberitahuan salah dan popup jawaban yang benar,

sebaliknya jika jawaban benar maka akan tampil pemberitahuan jawaban

benar dan dalam hitungan 0.5 detik popup akan keluar beserta tombol

next, Jika user ingin keluar dari layout ini user harus menekan tombol

Page 15: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

home maka akan ada pemberitahuan arahan melalui suara dan skor

otomatis di atur ulang menjadi 0.

Setiap jawaban benar skor akan bertambah 10 dan akan ditampilkan

di akhir layout soal, Layout ini sama bentuknya sampai soal pilihan ganda

terakhir nomor 5.

JUDUL HALAMAN

HOME

A B

KETERANGANBENAR/SALAH

SOAL

Sumber: hasil rancangan penelitian.

Gambar III.7. Rancangan Antarmuka Soal Pilihan Ganda Komputer

b. Rancangan Antar Muka Soal Essay Komputer

Dalam layout ini konsepnya sama dengan layout pilihan ganda user

tinggal menjawab soal tersebut dengan mengetik jawaban tersebut dan

menekan tombol Ok.

Page 16: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Layout ini sama bentuknya sampai soal essay terakhir nomor 5 yang

membedakannya hanya di soal dan jawabannya saja.

JUDUL HALAMAN

BENAR/SALAH

OK

KETIK JAWABAN

SOAL/GAMBAR

Sumber: hasil rancangan penelitian.

Gambar III.8. Rancangan Antarmuka Soal Essay Komputer

c. Rancangan Antar Muka Popup Skor

Layout ini berisi total skor dari yang diperoleh dari hasil

jawaban yang didapat pada soal pilihan ganda dan essay tombol

home untuk kembali ke menu.

Page 17: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

***

TEKS SKOR

HOME

Sumber: hasil rancangan penelitian.

Gambar III.9. Rancangan Antarmuka Popup Skor

8. Rancangan Antar Muka Soal Pengetahuan Umum

a. Materi Soal pilihan Pengetahuan Umum

Dalam layout ini user disajikan soal dengan jawaban pilihan ganda

user wajib menjawab salah satu dari pilihan ganda tersebut, jika jawaban

salah akan tampil pemberitahuan salah dan popup jawaban yang benar,

sebaliknya jika jawaban benar maka akan tampil pemberitahuan jawaban

benar dan dalam hitungan 0.5 detik popup akan keluar beserta tombol

next, Jika user ingin keluar dari layout ini user harus menekan tombol

home maka akan ada pemberitahuan arahan melalui suara dan skor

otomatis di atur ulang menjadi 0.

Setiap jawaban benar skor akan bertambah 5 dan akan ditampilkan di

akhir layout soal, Layout ini sama bentuknya sampai soal pilihan ganda

terakhir nomor 5.

Page 18: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

JUDUL HALAMAN

HOME

A B

KETERANGANBENAR/SALAH

SOAL

Sumber: hasil rancangan penelitian.

Gambar III.10. Rancangan Antarmuka Soal Pilihan Ganda Pengetahuan Umum

b. Rancangan Antar Muka Soal Essay Pengetahuan Umum

Dalam layout ini konsepnya sama dengan layout pilihan ganda

User tinggal menjawab soal tersebut dengan mengetik jawaban tersebut

dan menekan tombol Ok.

Layout ini sama bentuknya sampai soal essay terakhir nomor 5

yang membedakannya hanya di soal dan jawabannya saja.

Page 19: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

JUDUL HALAMAN

BENAR/SALAH

OK

KETIK JAWABAN

SOAL/GAMBAR

Sumber: hasil rancangan penelitian.

Gambar III.11. Rancangan Antarmuka Soal Essay Pengetahuan Umum

c. Rancangan Antar Muka Popup Skor

Layout ini berisi total skor dari yang diperoleh dari hasil jawaban

yang didapat pada soal pilihan ganda dan essay tombol home untuk

kembali ke menu.

Page 20: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

***

TEKS SKOR

HOME

Sumber: hasil rancangan penelitian.

Gambar III.12. Rancangan Antarmuka Popup

9. Rancangan Antar Muka About Me

Didalam layout ini berisi tentang profile pembuat game ini, jika user ingin

kembali user harus menyentuh tombol Home.

HOME

TEKS TENTANG PEMBUAT

Sumber: hasil rancangan penelitian.

Gambar III.13. Rancangan Antarmuka About Me

Page 21: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

3.3 Implementasi dan Pengujian Unit

3.3.1 Implementasi

1. Implementasi Rancangan Antarmuka

Implementasi rancangan antarmuka (interface) yang terdapat pada game

kuis “Fun Learn Tech”.

a. Tampilan Intro

Sebelum masuk ke menu utama user dihadapkan dengan layout

intro dengan animasi teks bergerak, user wajib menekan atau menyentuh

layar smartphone nya tersebut supaya dapat masuk kemenu utama.

Sumber: hasil rancangan penelitian.

Gambar III.13. Tampilan Intro

Page 22: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

2. Tampilan Menu Utama

Tampilan menu utama ini berisi 4 tombol navigasi seperti Play, About Me,

Keluar, dan Pengaturan. Tombol Play digunakan untuk melanjutkan ke

layout/frame berikutnya dan tombol About Me berisi layout tujuan dari game

ini dan Pengaturan untuk mengatur volume.

Sumber: hasil rancangan penelitian.

Gambar III.14. Tampilan Menu Utama

Page 23: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

3. Tampilan Option Pilih Materi

Tampilan Option Pilih Materi ini berisi 3 tombol navigasi seperti

komputer, Pengetahuan Umum, dan Back. Tombol komputer digunakan untuk

memulai permainan dengan materi komputer dan tombol pengetahuan umum

untuk memulai kuis dengan soal-soal pengetahuan umum, sedangkan tombol

Back untuk kembali ke layout sebelumnya.

Sumber: hasil rancangan penelitian.

Gambar III.15. Tampilan Option Materi

Page 24: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

4. Tampilan Layout Materi Komputer dan Pengetahuan Umum

Ketika masuk ke layout ini user akan diarahkan oleh suara yang terputar

otomatis, di layout ini tiga tombol yaitu Materi, Soal, dan Kembali setiap

tombol memiliki fungsi yang berbeda, tombol materi akan melanjutkan ke

materi yang telah disediakan, tombol Soal akan masuk ke soal pilihan ganda

pertama, sedangkan tombol kembali akan masuk ke layout sebelumnya.

Sumber: hasil rancangan penelitian.

Gambar III.16. Tampilan Layout Materi komputer dan Pengetahuan Umum

Page 25: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

5. Tampilan Layout Materi Komputer

Tampilan Komputer Monitor ini berisi 2 tombol navigasi seperti Back

dan Next. Tombol Next digunakan untuk melanjutkan ke layout/frame

berikutnya dan tombol Back untuk kembali ke layout/frame sebelumnya.

Sumber: hasil rancangan penelitian.

Gambar III.17. Tampilan Materi Komputer

Page 26: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

6. Tampilan Layout Materi Pengetahuan Umum

Tampilan Komputer Monitor ini berisi 2 tombol navigasi seperti Back

dan Next. Tombol Next digunakan untuk melanjutkan ke layout/frame

berikutnya dan tombol Back untuk kembali ke layout/frame sebelumnya.

Sumber: hasil rancangan penelitian.

Gambar III.18. Tampilan Materi Komputer

Page 27: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

7. Tampilan Soal Komputer

a. Materi Soal pilihan Ganda Komputer

Dalam frame ini user disajikan soal dan pilihan ganda user wajib

menjawab salah satu dari pilihan ganda tersebut, jika jawaban salah akan

tampil pemberitahuan salah dan jawaban yang benar, sebaliknya jika

jawaban benar maka akan tampil pemberitahuan jawaban benar dan

dalam hitungan 0.5 detik popup akan keluar beserta tombol next, Jika

user ingin keluar dari layout ini user harus menekan tombol home maka

akan ada pemberitahuan melalui suara dan skor otomatis di atur ulang

menjadi 0.

Setiap jawaban benar skor akan bertambah 10 dan akan ditampilkan

di akhir layout soal, Layout ini sama bentuknya sampai soal pilihan ganda

terakhir nomor 5.

Sumber: hasil rancangan penelitian.

Page 28: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Sumber: hasil rancangan penelitian.

Gambar III.19. Tampilan Soal Pilihan Ganda Komputer

b. Rancangan Antar Muka Soal Essay Komputer

Dalam layout ini konsepnya sama dengan layout pilihan ganda User

tinggal menjawab soal tersebut dengan mengetik jawaban tersebut dan

menekan tombol Ok.

Layout ini sama bentuknya sampai soal essay terakhir nomor 5

yang membedakannya hanya di soal dan jawabannya saja.

Page 29: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Sumber: hasil rancangan penelitian.

Page 30: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Sumber: hasil rancangan penelitian.

Gambar III.20. Tampilan Soal Essay Komputer

c. Tampilan Popup Skor

Layout ini berisi total skor dari yang diperoleh dari hasil

jawaban yang didapat pada soal pilihan ganda dan essay tombol

home untuk kembali ke menu.

Popup skor sementara akan ditampilkan sebelum user menjawab

soal essay.

Page 31: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Sumber: hasil rancangan penelitian.

Sumber: hasil rancangan penelitian.

Gambar III.21. Tampilan Popup skor

Page 32: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

8. Rancangan Antar Muka Soal Pengetahuan Umum

a. Materi Soal pilihan Pengetahuan Umum

Dalam layout ini user disajikan soal dan pilihan ganda user wajib

menjawab salah satu dari pilihan ganda tersebut, jika jawaban salah akan

tampil pemberitahuan salah dan jawaban yang benar, sebaliknya jika

jawaban benar maka akan tampil pemberitahuan jawaban benar dan dalam

hitungan 0.5 detik popup akan keluar beserta tombol next, Jika user ingin

keluar dari layout ini user harus menekan tombol home maka akan ada

pemberitahuan melalui suara dan skor otomatis di atur ulang menjadi 0.

Setiap jawaban benar skor akan bertambah 5 dan akan ditampilkan di

akhir layout soal, Layout ini sama bentuknya sampai soal pilihan ganda

terakhir nomor 10.

Sumber: hasil rancangan penelitian.

Page 33: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Sumber: hasil rancangan penelitian.

Gambar III.22. Tampilan Soal Pilihan Ganda Pengetahuan Umum

b. Tampilan Soal Essay Pengetahuan Umum

Dalam layout ini konsepnya sama dengan layout pilihan

ganda User tinggal menjawab soal tersebut dengan mengetik

jawaban tersebut dan menekan tombol Ok.

Layout ini sama bentuknya sampai soal essay terakhir nomor

5 yang membedakannya hanya di soal dan jawabannya saja.

Page 34: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Sumber: hasil rancangan penelitian.

Gambar III.23. Tampilan Soal Essay Pengetahuan Umum

Page 35: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

c. Tampilan Popup Skor

Layout ini berisi total skor dari yang diperoleh dari hasil

jawaban yang didapat pada soal pilihan ganda dan essay tombol

home untuk kembali ke menu.

Sumber: hasil rancangan penelitian.

Gambar III.21. Tampilan Skor

Page 36: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

9. Tampilan Antar Muka About Me

Didalam layout ini berisi tentang profile pembuat game ini, jika user ingin

kembali user harus menyentuh tombol Home.

Sumber: hasil rancangan penelitian.

Gambar III.22. Tampilan About Me

Page 37: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

10. Tampilan Volume mute dan unmute

Layout ini keluar jika tombol navigasi pengaturan di sentuh,

fungsinya sendiri yaitu untuk mute dan unmute suara. Tombol navigasi close

untuk keluar.

Sumber: hasil rancangan penelitian.

Gambar III.23. Tampilan Pengaturan

3.3.2 Pengujian Unit

1. Black Box Testing

Pengujian black box merupakan pengujian terintegerasi yang dilakukan

oleh penulis tanpa menguji desain dan kode program namun hanya menguji

sistem dari segi spesifikasi fungsional.

Page 38: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Tabel III.11. Pengujian Black Box Testing

Aksi Reaksi Hasil

Menjalankan aplikasi Menampilkan Teks Bergerak

Sesuai

User menekan layout teks bergerak

Menampilkan Halaman Utama

Sesuai

User menekan tombol “About Me”

Menampilkan layout about me

Sesuai

User menekan tombol “Pengaturan”

Menampilkan layout pengaturan

Sesuai

User menekan tombol “Play”

Menampilkan layout pilih materi

Sesuai

User menekan tombol “komputer”

Menampilkan layout Materi komputer

Sesuai

User menekan tombol

“Pengetahuan Umum”

Menampilkan materi

pengetahuan umum

Sesuai

User menekan tombol “Materi”

Menampilkan layout materi

Sesuai

User menekan tombol “Soal”

Menampilkan layout soal Sesuai

User menekan tombol “Pilihan jawaban”

Menentukan betul atau salahnya soal yang dijawab

Sesuai

User menekan tombol “OK”

Menentukan betul atau salahnya soal essay yang

dijawab

Sesuai

User menekan “Teks Box”

Untuk menjawab soal essay Sesuai

User menekan tombol “<”

Kembali ke layout sebelumnya

Sesuai

Page 39: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

User menekan tombol “>”

Lanjut ke layout berikutnya Sesuai

User menekan tombol “Home”

Menampilkan layout menu utama

Sesuai

User menekan tombol “Keluar”

Keluar dari aplikasi Sesuai

2. Uji Coba Sistem

Game Fun Learn tech ini telah diinstal dan dijalankan di beberapa

smartphone Android dengan berbagai merk dan menggunakan sistem operasi

Android. Berikut tabel pengujian sistemnya.

Tabel III.12. Pengujian Sistem

NO Merk Smartphone Versi OS Keterangan

1 MITO_A106.0

MarshmallowGame berjalan dengan lancar, tampilan potrait, semua tombol berfungsi dengan baik, suara berjalan dengan baik.

2 Xiaomi Mi4 LTE4.4

KitkatGame berjalan dengan lancar, tampilan potrait, semua tombol berfungsi dengan baik, suara berjalan dengan baik.

Page 40: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

3 Samsung J14.4

KitkatGame berjalan dengan lancar, tampilan potrait, semua tombol berfungsi dengan baik, suara berjalan dengan baik.

4 Oppo Neo75.1

LollipopGame berjalan dengan lancar, tampilan potrait, semua tombol, suara berjalan dengan baik.

2. Penerimaan User Terhadap Game

Untuk menguji penerimaan user terhadap aplikasi game ini penulis

menggunakan kuisioner usability yang mengacu pada keseluruhan game ini.

Tabel III.13. Pertanyaan Kuisioner

No. Kriteria Pertanyaan SS S RR TS STS

1.Saya puas dengan kemudahan penggunaan game ini.

2.Penggunaan game ini sangat sederhana.

3.

Kemudahan penggunaan

Saya dengan mudah memahami cara penggunaan game ini

4.Materi

Aplikasi

Materi yang disediakan game ini mudah dipahami

Page 41: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

5. Tata letak dan navigasi yang ditampilkan di layar game jelas

6. Soal yang ditampilkan sesuai dengan materi

7. Tampilan game ini sederhana dan menarik.

8. Saya suka dengan tampilan game ini.

9. Game ini memiliki fungsi sesuai yang saya harapkan.

10.

Tampilan Aplikasi

Secara keseluruhan saya suka dengan game ini

Data yang terkumpul dianalisis dengan teknik analisis deskriptif kuantitatif

yang diungkapkan dalam distribusi skor dan persentase terhadap kategori skala

penilaian yang ditentukan dalam nilai kuantitatif.

Tabel III.14. Skala Penilaian Kuisioner

Jawaban Skor

Sangat setuju 5

Setuju 4

Ragu-ragu 3

Tidak Setuju 2

Sangat Tidak Setuju 1

Page 42: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Data kuantitatif yang didapat kemudian dilakukan perhitungan melalui

persamaan faktor kualitas McCall, seperti berikut:

Untuk Penghitungan persentase skor digunakan rumus :

P(%)=SO/SH*100

Keterangan :

P (%) = Persentase Kelayakan

SH = Skor yang diharapkan

SO = Skor yang diobservasi

Setelah penyajian dalam bentuk persentase, langkah selanjutnya

mendeskripsikan dan mengambil kesimpulan tentang masing-masing indikator

aspek dalam pengembangan media pembelajaran dapat menggunakan sebagai

berikut:

Tabel III.14. Skala Penilaian Kuisioner

No. Kategori Skor Dalam Presentase

1 Sangat Baik 81%-100%

2 Baik 61%-80%

3 Cukup Baik 41%-60%

4 Tidak Baik 21%-40%

5 Sangat Tidak baik

0%-20%

Page 43: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Tabel III.15. Hasil Perhitungan Jawaban Kuisioner

Pertanyaan

Penggunaan Materi TampilanNo. Responden1 2 3 4 5 6 7 8 9 10

1 Responden 1 5 5 5 4 5 4 4 5 4 5

2 Responden 2 3 4 4 3 5 3 5 5 3 4

3 Responden 3 4 4 5 4 5 3 4 5 5 4

4 Responden 4 4 5 4 5 5 4 5 5 4 5

5 Responden 5 5 5 4 5 4 4 5 4 4 5

6 Responden 6 5 4 4 4 4 3 4 4 4 4

7 Responden 7 5 4 5 5 5 4 5 4 4 4

8 Responden 8 4 4 5 4 4 4 5 5 4 5

9 Responden 9 3 5 5 4 4 3 5 4 3 4

10 Responden 10 4 4 5 4 5 3 5 4 4 4

Page 44: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

Jumlah 42 44 46 42 46 35 47 45 40 44

Tabel III.16. Hasil Perhitungan Jawaban Kuisioner

No. Kriteria Pertanyaan Skor Presentase (%)

1. Saya puas dengan kemudahan penggunaan game ini. 42

84

2. Penggunaan game ini sangat sederhana. 44

88

3.

Kemudahan penggunaan

Saya dengan mudah memahami cara penggunaan game ini

46 92

4.Materi yang disediakan game ini mudah dipahami

4284

5. Tata letak dan navigasi yang ditampilkan di layar game jelas 46

92

6.

Materi Aplikasi

Soal yang ditampilkan sesuai dengan materi 35

70

7.

Tampilan Aplikasi

Tampilan game ini sederhana dan menarik.

47 94

Page 45: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

8. Saya suka dengan tampilan game ini.

45 90

9. Game ini memiliki fungsi sesuai yang saya harapkan.

40 80

10. Secara keseluruhan saya suka dengan game ini

44 88

Dari jawaban responden pada kuisioner penerimaan user terhadap aplikasi,

kemudahan pengguna pertanyaan 1 mendapat respon sangat baik sebanyak 84%

pengguna puas dengan kemudahan menggunakan game ini. Pada pertanyaan 2

responden merespon sangat baik sebanyak 88% pengguna sangat setuju jika game

ini sangat sederhana. Sedangkan pada pertanyaan 3 responden merespon sangat

baik sebanyak 92% pengguna sangat setuju jika game ini sangat mudah dipahami.

Kemudian pada kategori materi aplikasi pertanyaan 4 responden merespon

sangat baik sebanyak 84% pengguna sangat setuju jika materi dalam game mudah

dipahami. Pada pertanyaan 5 responden merespon sangat baik sebanyak 92%

pengguna merasa tata letak dan navigasi yang ditampilkan sudah jelas. Pada

pertanyaan 6 responden merespon baik sebanyak 70% pengguna merasa soal yang

di tampilkan sesuai dengan materi.

Selanjutnya kategori terakhir yaitu tampilan pada pertanyaan 7 responden

merespon sangat baik sebanyak 88% pengguna merasa tampilan game ini menarik

dan sederhana. Pada pertanyaan 8 responden merespon sangat baik sebanyak 90%

Page 46: BAB III PEMBAHASAN - repository.bsi.ac.id filedan pengetahuan umum, satu tombol untuk kembali. KOMPUTER JUDUL PENGETAHUAN UMUM < click.ogg MattOglseby.ogg Pilihmateri.ogg ... TABEL

pengguna suka dengan tampilan game ini. . Pada pertanyaan 9 responden

merespon sangat baik sebanyak 80% pengguna menganggap bahwa game ini

memiliki fungsi dan kemampuan sesuai yang mereka harapkan. Pada pertanyaan

10 responden merespon sangat baik sebanyak 88% responden merasa suka dengan

adanya game ini.