Bab IV – Implementasi, Pengujian, & Analisis
Lampiran 6 Wireframe Aplikasi Permainan Puzzle
Wireframe Tutorial Aplikasi
1
2 3
8
0
Wireframe Tutorial Aplikasi
Deskripsi
Komponen
Fungsi
Tampilan ini merupakan halaman tutorial penggunaan permainan puzzle agar dapat memberikan arahan kepada pengguna untuk mengoperasikan permainan. Hal ini dibuat untuk memudahkan pengguna dalam
memainkan permainan untuk pertama kalinya. Pengguna akan ditampilkan gambar atau animasi cara pengoperasian permainan beserta suara narasi untuk menjelaskan cara
mengoperasikannya. Pengguna hanya akan menekan tombol lanjut untuk melanjutkan tutorial aplikasi atau lewati untuk langsung mengakhiri tutorial.
1 Ilustrasi tutorial Bagian utama untuk menjelaskan tutorial yang berupa ilustrasi gambar atau animasi.
2 Teks penjelasan Bagian penjelasan narasi dari tutorial 3 Primary
Navigation
Bagian ini berfungsi sebagai aktivitas utama dari user untuk melanjutkan tutorial atau melewati tutorial.
8
1
Wireframe Pilih Karakter
1 1
8
2
Wireframe Pilih Karakter
Deskripsi
Komponen
Fungsi
Tampilan ini merupakan halaman pilih karakter agar pengguna dapat memilih salah satu karakter yang sesuai dengan jenis kelaminnya. Hal ini ditujukan agar konten puzzle yang akan diberikan sesuai dengan jenis kelamin pengguna. Pengguna akan ditampilkan 2 buah karakter (laki-laki dan perempuan) dan pengguna memilih salah satu dari karakter tersebut dan menekan tombol pilih untuk mengeksekusi pilihan karakter
1 Gambar karakter Bagian ini merupakan 2 tampilan karakter yang dapat dipilih sesuai dengan jenis kelamin pengguna.
2 Tombol ‘Pilih’ Bagian ini berfungsi sebagai tombol untuk mengeksekusi pilihan karakter.
8
3
Wireframe Menu Utama
3
4 5
1
2
8
4
Wireframe Menu Utama
Deskripsi
Komponen
Fungsi
Tampilan ini merupakan halaman menu utama dari aplikasi permainan puzzle. Pada halaman ini terdapat beberapa pilihan kategori yang sudah sesuai dengan karakter yang dipilih sebelumnya. Di halaman ini juga terdapat beberapa operasi untuk mengatur permainan, menon-aktifkan suara, dan keluar permainan. Kemudian tampilan karakter juga akan menyambut pengguna dengan suara yang muncul ketika masuk ke halaman menu utama ini. Pada menu utama ini pengguna akan memilih kategori gambar puzzle yang diinginkannya.
1 Gambar karakter Bagian tampilan karakter yang dapat bersuara untuk menyambut pengguna di halaman menu utama permainan. 2 Pilihan kategori
gambar puzzle
Bagian pilihan kategori gambar puzzle yang sudah sesuai dengan pilihan karakter yang telah dipilih sebelumnya, terdapat pula beberapa kategori yang merepresentasikan lingkungan sekitar pengguna.
3 Ikon tombol keluar Bagian navigasi yang berfungsi sebagai perintah keluar dari permainan.
4 Ikon tombol suara Bagian navigasi yang berfungsi sebagai perintah aktif/non-aktif suara latar/suara karakter.
5 Ikon tombol reset game
Bagian navigasi yang berfungsi untuk mengatur ulang waktu yang tercatat (menghapus)
6 Ikon tombol ganti karakter
Bagian navigasi yang berfungsi untuk mengganti karakter permainan
8
5
Wireframe Menu Utama (Popup Box)
8
6
Wireframe Menu Utama (Popup Box)
Deskripsi
Komponen
Fungsi
Tampilan ini merupakan halaman menu utama dari aplikasi permainan puzzle. Pada halaman ini terdapat beberapa pilihan kategori yang sudah sesuai dengan karakter yang dipilih sebelumnya. Di halaman ini juga terdapat beberapa operasi untuk mengatur permainan, menon-aktifkan suara, dan keluar permainan. Kemudian tampilan karakter juga akan menyambut pengguna dengan suara yang muncul ketika masuk ke halaman menu utama ini. Pada menu utama ini pengguna akan memilih kategori gambar puzzle yang diinginkannya.
1 Dialog Box Bagian ini berfungsi untuk mengonfirmasi apakah pengguna benar ingin menghapus seluruh data waktu yang ada pada permainan
8
7
Wireframe Memilih Gambar Puzzle
1 4 2 5 6 3
8
8
Wireframe Memilih Gambar Puzzle
Deskripsi
Komponen
Fungsi
Tampilan ini merupakan tampilan memilih gambar puzzle yang berfungsi sebagai
memilih gambar yang sesuai dengan kategori yang telah dipilih sebelumnya. Pada menu memilih gambar puzzle ini pengguna akan memilih gambar (dalam bentuk ikon) yang tersedia sesuai kategori kemudian akan melanjutkan ke Wireframe Preview Puzzle. Pada tampilan ini pengguna juga tetap dapat memilih menu pengaturan,
mengaktifkan/menonaktifkan suara, dan kembali ke menu utama.
1 Ikon gambar puzzle
Bagian ini menampilkan gambar puzzle dalam bentuk ikon untuk memperlihatkan gambar yang akan dimainkan. Ketika tombol ini ditekan, pengguna akan melanjutkan ke Wireframe Memilih Gambar Puzzle-Preview Puzzle. 2 Skor (dalam
bentuk waktu)
Tampilan skor dalam bentuk waktu agar memotivasi pengguna untuk terus melatih kemampuan kognitifnya. 3 Ikon tombol
kembali ke Menu Utama
Bagian ini berfungsi untuk mengembalikan tampilan ke Menu Utama.
4 Ikon tombol suara Bagian navigasi yang berfungsi sebagai perintah aktif/non-aktif suara latar/suara karakter.
5 Ikon tombol reset game
Bagian navigasi yang berfungsi untuk mengatur ulang waktu yang tercatat (menghapus)
6 Gambar karakter Bagian tampilan karakter yang dapat bersuara untuk membimbing pengguna.
8
9
Wireframe Memilih Gambar Puzzle-Preview Puzzle
1
2 3
9
0
Wireframe Memilih Gambar Puzzle-Preview Puzzle
Deskripsi
Komponen
Fungsi
Tampilan ini merupakan tampilan preview puzzle sebelum anak bermain puzzle. Hal ini digunakan untuk melihat gambar puzzle sebelum memainkannya agar pengguna dapat merekam gambar tersebut dipikirannya dan dapat memainkan permainan puzzle dengan mudah. Dalam tampilan ini jika pengguna sudah cukup untuk memahami gambar puzzle,
pengguna akan menekan tombol ‘Mainkan!’
untuk segera memulai permainan.
1 Gambar puzzle Bagian ini berupa gambar puzzle utuh sebelum dimainkan 2 Tombol
‘Mainkan!’ Bagian ini berfungsi untuk memulai permainan saat pengguna merasa cukup untuk mengingat gambar puzzle 3 Ikon tombol keluar
preview gambar puzzle
Bagian ini berfungsi untuk kembali ke menu pilihan puzzle
9
1
Wireframe Bermain Puzzle
1 2
3
9
2
Wireframe Bermain Puzzle
Deskripsi
Komponen
Fungsi
Tampilan ini berfungsi sebagai inti permainan dari aplikasi, pada tampilan ini terdapat potongan puzzle, papan puzzle dan stopwatch. Di tampilan ini pengguna akan memainkan puzzle dengan cara menggeser potongan puzzle yang tersebar pada layar ke bentuk puzzle kosong yang berada di tengah. Selain itu pengguna juga dapat mengatur suara dan menghentikan sementara permainan yang sedang berlangsung.
1 Papan puzzle Bagian ini berfungsi sebagai tempat untuk memasang potongan puzzle sesuai dengan pola yang dibentuk pada papan puzzle.
2 Stopwatch Bagian ini berfungsi untuk menghitung waktu yang ditempuh pengguna dalam bermain puzzle.
3 Potongan puzzle Bagian ini merupakan kepingan puzzle yang akan dicocokan kedalam papan puzzle.
4 Ikon suara Bagian navigasi yang berfungsi sebagai perintah aktif/non-aktif suara latar/suara karakter.
5 Ikon menu Bagian navigasi yang berfungsi untuk menghentikan sementara permainan yang berlangsung. Bagian ini akan dilanjutkan pada Wireframe Bermain Puzzle-Menu Pause.
9
3
Wireframe Bermain Puzzle-Menu Pause
1
9
4
Wireframe Bermain Puzzle-Menu Pause
Deskripsi
Komponen
Fungsi
Tampilan ini berfungsi sebagai inti permainan dari aplikasi, pada tampilan ini terdapat potongan puzzle, papan puzzle dan stopwatch. Di tampilan ini pengguna akan memainkan puzzle dengan cara menggeser potongan puzzle yang tersebar pada layar ke bentuk puzzle kosong yang berada di tengah. Selain itu pengguna juga dapat mengatur suara dan menghentikan sementara permainan yang sedang berlangsung.
1 Tombol navigasi Bagian ini berfungsi sebagai tombol navigasi sesuai dengan apa yang diinginkan oleh pengguna
2 Keterangan pause Bagian ini sebagai penanda waktu jeda saat pengguna masuk pada menu pause
9
5
Wireframe Hasil Permainan
1
2 3
9
6
Wireframe Hasil Permainan
Deskripsi
Komponen
Fungsi
Tampilan ini berfungsi sebagai tampilan hasil permainan setelah pengguna selesai
memainkan permainan puzzle. Pada tampilan ini pengguna akan ditampilkan hasil skor waktu yang sudah dicapai, gambar utuh puzzle, ejaan kata benda gambar puzzle, dan navigasi perintah permainan. Dalam tampilan ini juga terdapat suara ucapan selamat dari karakter untuk mengapresiasi pengguna yang sudah selesai bermain puzzle. Kemudian pengguna dapat melanjutkan ke gambar selanjutnya, mengulangi permainan, dan kembali ke menu utama.
1 Hasil skor
permainan (waktu)
Bagian ini menampilkan hasil skor atau waktu yang telah ditempuh pengguna selama memainkan permainan puzzle.
2 Gambar puzzle secara utuh
Bagian ini menampilkan gambar utuh dari puzzle yang telah diselesaikan.
3 Gambar karakter Bagian tampilan karakter yang dapat bersuara untuk mengeja kata benda dari gambar puzzle
4 Ikon kembali ke Menu Utama
Bagian ini berfungsi untuk mengembalikan tampilan ke Menu Utama.
5 Ikon ulangi permainan
Bagian ini berfungsi untuk memainkan kembali permainan yang baru saja dimainkan.
6 Ikon mainkan gambar puzzle selanjutnya
Bagian ini berfungsi untuk melanjutkan ke gambar puzzle selajutnya (berdasarkan susunan gambar puzzle pada
97