Perancangan Tampilan Antarmuka Aplikasi

1 2 3 4

3.4 Perancangan Tampilan Antarmuka Aplikasi

Tampilan antarmuka perlu dirancang untuk menggambarkan sistem yang akan dibuat dan membantu mempermudah proses pembangunan sistem. Rancangan tampilan sistem dapat dilihat dan akan dijelaskan sebagai berikut. 3.4.1 Rancangan Halaman Landing Page Rancanga halaman landing page pada aplikasi kopi tampan bertujuan untuk memulai aplikasi untuk masuk ke dalam halaman home menu utama dan sekaligus pengenalan awal dari sistem yang dibuat kepada pengguna dalam menggunakan aplikasi. Dalam rancangan ini halaman landing page terbagi menjadi tiga tombol menu yaitu menu start , menu about dan menu exit. Untuk rancangan halaman landing page dapat dilihat pada Gambar 3.9 dan Tabel 3.2 untuk keterangan bagian rancangan halaman landing page. Gambar 3.9 Rancangan Halaman Landing Page Tabel 3.2 Keterangan Bagian-Bagian Rancangan Halaman Landing Page No Jenis Objek Keterangan 1 Picture Logo Kopi Tampan. 2 Tombol Start Tombol masuk ke halaman homemenu utama. Universitas Sumatera Utara 3 Tombol About Tombol popup pemberitahuan tentang aplikasi. 4 Tombol Exit Tombol keluar dari aplikasi. 3.4.2 Rancangan PopUp About Rancangan popup about pada aplikasi ini bertujuan untuk memberitahukan tujuan dari aplikasi ini dibuat. Rancangan popup about dapat dilihat pada Gambar 3.10 dan Tabel 3.3 untuk keterangan bagian rancangan popup about. Gambar 3.10 Rancangan PopUp About Tabel 3.3 Keterangan Bagian-Bagian Rancangan PopUp About No Jenis Objek Keterangan 1 Tombol Keluar Tombol keluar dari popup about. 2 Text View Deskripsi tujuan aplikasi dibuat. 3.4.3 Rancangan Halaman HomeMenu Utama Rancangan halaman homemenu utama pada aplikasi kopi tampan bertujuan untuk memberitahukan isi dari aplikasi dan mempermudah pengguna dalam menggunakan sistem melalui menu yang terlihat pada tampilan halaman homemenu utama yang didesain dengan fitur-fitur yang menarik. Rancangan tampilan halaman homemenu utama memiliki tujuh tombol menu yaitu tampilan kopi tampan, tampilan produk, tampilan gerobak, tampilan mini cafe, tampilan marker, tampilan help dan tampilan kembali ke landing page. Rancangan halaman homemenu utama dapat dilihat pada Gambar 3.11 dan Tabel 3.4 untuk rancangan halaman homemenu utama. 1 2 Universitas Sumatera Utara 1 2 3 4 5 6 7 Gambar 3.11 Rancangan Halaman HomeMenu Utama Tabel 3.4 Keterangan Bagian-Bagian Rancangan Halaman HomeMenu Utama No Jenis Objek Keterangan 1 Tombol Kopi Tampan Tombol informasi tentang kopi tampan. 2 Tombol Produk Tombol untuk melihat jenis produk kopi tampan. 3 Tombol Gerobak Tombol untuk masuk ke halaman Augmented Reality Gerobak. 4 Tombol Mini Cafe Tombol untuk masuk ke halaman Augmented Reality Mini Cafe. 5 Tombol Marker Tombol untuk melihat marker yang digunakan dalam sistem. 6 Tombol Help Tombol untuk membantu user menggunakan sistem. 7 Tombol Home Tombol kembali ke halaman landing page. 3.4.4 Rancangan Halaman Kopi Tampan Rancangan pada halaman kopi tampan memiliki halaman sebanyak empat halaman, halaman pertama adalah kopi tampan 1, halaman kedua adalah kopi tampan 2, halaman ketiga adalah kopi tampan 3 dan halaman terakhir adalah kopi tampan 4. Setiap halaman terdapat tombol home, tombol next dan tombol back. Universitas Sumatera Utara 4 1 3 2 a. Rancangan Halaman Kopi Tampan 1 Rancangan pada halaman ini akan berisi tentang visi, misi, produk, dan informasi mengenai perusahaan kopi tampan. Rancangan halaman kopi tampan 1 dapat dilihat pada Gambar 3.12 dan Tabel 3.5 untuk keterangan bagian rancangan halaman kopi tampan 1. Gambar 3.12 Rancangan Halaman Kopi Tampan 1 Tabel 3.5 Keterangan Bagian-Bagian Rancangan Halaman Kopi Tampan 1 No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Text View Deskripsi tentang kopi tampan 3 Text View Judul : Kopi Tampan 4 Tombol Next Tombol menuju ke halaman kopi tampan 2 b. Rancangan Halaman Kopi Tampan 2 Rancangan pada halaman ini akan berisi tentang perancangan bisnis dari 3 produk yaitu gayo, premium dan jantan coffee. Rancangan halaman kopi tampan 2 dapat dilihat pada Gambar 3.13 dan Tabel 3.6 untuk keterangan bagian rancangan halaman kopi tampan 2. Universitas Sumatera Utara 1 4 1 3 2 5 Gambar 3.13 Rancangan Halaman Kopi Tampan 2 Tabel 3.6 Keterangan Bagian-Bagian Rancangan Halaman Kopi Tampan 2 No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Text View Gambar perancangan bisnis produk kopi tampan 3 Text View Judul : Kopi Tampan 4 Tombol Back Tombol kembali ke halaman kopi tampan 1 5 Tombol Next Tombol menuju ke halaman kopi tampan 3 c. Rancangan Halaman Kopi Tampan 3 Rancangan pada halaman ini akan berisi tentang perancangan bisnis dari gerobak. Rancangan halaman kopi tampan 3 dapat dilihat pada Gambar 3.14 dan Tabel 3.7 untuk keterangan bagian rancangan halaman kopi tampan 3. Universitas Sumatera Utara Gambar 3.14 Rancangan Halaman Kopi Tampan 3 Tabel 3.7 Keterangan Bagian-Bagian Rancangan Halaman Kopi Tampan 3 No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Text View Gambar perancangan bisnis gerobak 3 Text View Judul : Kopi Tampan 4 Tombol Back Tombol kembali ke halaman kopi tampan 2 5 Tombol Next Tombol menuju ke halaman kopi tampan 4 d. Halaman Kopi Tampan 4 Pada halaman ini akan berisi tentang perancangan bisnis dari mini cafe. Rancangan halaman kopi tampan 4 dapat dilihat pada Gambar 3.15 dan Tabel 3.8 untuk keterangan bagian rancangan halaman kopi tampan 4. 1 4 1 3 2 5 Universitas Sumatera Utara 4 1 3 2 Gambar 3.15 Rancangan Halaman Kopi Tampan 4 Tabel 3.8 Keterangan Bagian-Bagian Rancangan Halaman Kopi Tampan 4 No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Text View Deskripsi Perancangan Bisnis Kopi Tampan. 3 Text View Judul : Kopi Tampan. 4 Tombol Back Tombol kembali ke halaman Kopi Tampan 3. 3.4.5 Rancangan Halaman Produk Rancangan halaman produk pada aplikasi ini bertujuan untuk memberitahukan informasi tentang produk secara 3D. Pada rancangan halaman produk terdapat 3 tombol produk yaitu tombol Gayo Coffee, Premium Coffee, Jantan Coffee, dan tombol home. Tombol produk akan langsung terhubung ke fungsi kamera smartphone dan menampilkan halaman Augmented Reality produk. Untuk rancangan halaman Augmented Reality terdapat tombol home yang digunakan untuk kembali ke halaman homemenu utama. Untuk memunculkan objek 3D dari produk, Scan marker yang sudah ditentukan dan kamera smartphone akan mentracking marker agar dapat memunculkan objek. Rancangan halaman produk dapat dilihat pada Gambar 3.16 dan Tabel 3.9 keterangan bagian rancangan halaman produk. Universitas Sumatera Utara 2 3 4 1 Gambar 3.16 Rancangan Halaman Produk Kopi Tampan Tabel 3.9 Keterangan Bagian-Bagian Rancangan Halaman Produk Kopi Tampan No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Tombol Gayo Coffee Tombol untuk masuk ke halaman Augmented Reality Gayo Coffee. 3 Tombol Premium Coffee Tombol untuk masuk ke halaman Augmented Reality Premium Coffee. 4 Tombol Jantan Coffee Tombol untuk masuk ke halaman Augmented Reality Jantan Coffee. Universitas Sumatera Utara 1 a. Halaman Augmented Reality Gayo Coffee Rancangan halaman Augmented Reality gayo coffee dapat dilihat pada Gambar 3.17 dan Tabel 3.10 untuk keterangan bagian rancangan halaman Augmented Reality gayo coffee. 2 3 Gambar 3.17 Rancangan Halaman Augmented Reality Gayo Coffee Tabel 3.10 Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality Gayo Coffee No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Camera view Halaman untuk melihat Augmented Reality Gayo Coffee. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. b. Halaman Augmented Reality Premium Coffee Rancangan halaman Augmented Reality premium coffee dapat dilihat pada Gambar 3.18 dan Tabel 3.11 untuk keterangan bagian halaman Augmented Reality premium coffee. Universitas Sumatera Utara 1 2 3 Gambar 3.18 Rancangan Halaman Augmented Reality Premium Coffee Tabel 3.11 Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality Premium Coffee No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Camera view Halaman untuk melihat Augmented Reality Premium Coffee. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. c. Halaman Augmented Reality Jantan Coffee Rancangan halaman Augmented Reality jantan coffee dapat dilihat pada Gambar 3.19 dan Tabel 3.12 untuk keterangan bagian rancangan halaman Augmented Reality jantan coffee. Universitas Sumatera Utara 1 2 3 Gambar 3.19 Rancangan Halaman Augmented Reality Jantan Coffee Tabel 3.12 Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality Jantan Coffee No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Camera view Halaman untuk melihat Augmented Reality Jantan Coffee. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. 3.4.6 Rancangan Halaman Augmented Reality Gerobak Rancangan halaman gerobak pada aplikasi ini bertujuan untuk memberitahukan informasi tentang gerobak secara 3D. Pada halaman gerobak, pengguna bisa langsung terhubung ke fungsi kamera smartphone dan menampilkan halaman Augmented Reality gerobak. Untuk memunculkan objek 3D dari gerobak, Scan marker yang sudah ditentukan dan kamera smartphone akan mentracking marker agar dapat memunculkan objek. Rancangan halaman gerobak dapat dilihat pada Gambar 3.20 dan Tabel 3.13 untuk keterangan bagian rancangan halaman gerobak. Universitas Sumatera Utara 1 2 3 Gambar 3.20 Rancangan Halaman Augmented Reality Gerobak Tabel 3.13 Keterangan Bagian-Bagian Rancangan Gerobak No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Camera view Halaman untuk melihat Augmented Reality Gerobak Kopi Tampan. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. 3.4.7 Rancangan Halaman Augmented Reality Mini Cafe Rancangan halaman mini cafe pada aplikasi ini bertujuan untuk memberitahukan informasi tentang mini cafe secara 3D. Pada halaman mini cafe, pengguna bisa langsung terhubung ke fungsi kamera smartphone dan menampilkan halaman Augmented Reality mini cafe. Untuk memunculkan objek 3D dari gerobak, Scan marker yang sudah ditentukan dan kamera smartphone akan mentracking marker agar dapat memunculkan objek. Rancangan halaman mini cafe dapat dilihat pada Gambar 3.21 dan Tabel 3.14 untuk keterangan bagian rancangan halaman mini cafe. Universitas Sumatera Utara 1 2 3 Gambar 3.21 Rancangan Halaman Augmented Reality Mini Cafe Tabel 3.14 Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality Mini Cafe No Jenis Objek Keterangan 1 Tombol Home Tombol kembali pada halaman homemenu utama. 2 Camera view Halaman untuk melihat Augmented Reality Mini Cafe. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. 3.4.8 Rancangan PopUp Marker Rancangan PopUp marker bertujuan untuk memberitahukan bagaimana bentuk dari marker yang akan digunakan dalam sistem. Pada PopUp ini hanya berisi marker dalam bentuk .jpg. dan tombol exit. Rancangan popup marker dapat dilihat pada Gambar 3.22 dan Tabel 3.15 untuk keterangan bagian rancangan popup marker. Gambar 3.22 Rancangan PopUp Marker 1 2 3 Universitas Sumatera Utara Tabel 3.15 Keterangan Bagian-Bagian Rancangan Marker No Jenis Objek Keterangan 1 Tombol Keluar Tombol keluar dari popup marker. 2 Text View Judul : Marker 3 Text View Gambar - gambar Marker 3.4.9 Rancangan PopUp Help Rancangan PopUp help bertujuan untuk memberitahukan cara penggunaan dari aplikasi. Pada halaman ini hanya berisi informasi untuk menggunakan aplikasi dan tombol exit. Rancangan PopUp help dapat dilihat pada Gambar 3.23 dan Tabel 3.16 untuk keterangan bagian rancangan popup help. Gambar 3.23 Rancangan PopUp Help Tabel 3.16 Keterangan Bagian-Bagian Rancangan Help No Jenis Objek Keterangan 1 Tombol X Tombol keluar dari popup help. 2 Text View Judul : Help 3 Text View Pemberitahuan Help 1 2 3 Universitas Sumatera Utara Universitas Sumatera Utara Seperti pada gambar cube di perbesar untuk dijadikan sebagai lantai pada mini cafe. 3. Lalu ubah mode menjadi edit mode. Setelah itu buat pola garis kotak – kotak sesuai dengan keinginan dengan menekan CTRL + R dan pola mini cafe dapat jelas terlihat pada gambar. Lalu blok face yang akan dinaikkan keatas untuk membuat meja bar dari mini cafe. 4. Setelah meja bar terbentuk, selanjutnya blok face kembali yang akan dinaikkan keatas untuk membuat tiang penyangga atap dan dinding belakang dari mini cafe. Bisa dilihat pada gambar, tiang penyangga atap dan dinding belakang yang sudah terbentuk. 5. Setelah itu tambahkan lagi bagian lantai samping kiri untuk membuat meja dengan cara seperti diatas. Untuk lebih jelasnya bisa dilihat pada gambar. 6. Pada dinding belakang buat pola untuk membuat laci – laci pada dinding dengan cara memblok face yang diinginkan lalu tekan DELETE dan pilih face maka face akan terhapus dan membentuk seperti laci untuk didinding. 7. Kemudian blok kembali lantai melalui face yang diinginkan, lalu lakukan dengan cara seperti diatas. 8. Setelah itu blok keseluruhan face dari lantai untuk diberi warna sesuai keinginan, cara memberi warna setiap face menggunakan material yang terdapat pada menu di sebelah kanan. Untuk lebih jelasnya bisa dilihat pada gambar. 9. Tahap selanjutnya adalah membuat atap untuk mini cafe, ubah dulu mode ke object mode lalu tambahkan objek dasar cube dan ubah sesuaikan dengan model yang sudah dibuat. Lalu cocokkan atap dengan model yang sebelumnya telah dibuat. Lihat model atap melalui sisi atas, depan, kiri dan kanan dengan menggunakan menu view yang terletak pada toolbar kiri bawah. 10. Setelah pas, buat pola pada atap untuk membuat atap yang miring disebelah kanan dan kiri. Setelah pola terbuat maka blok face akan ditarik untuk membuat atap yang miring. Setelah itu tarik face yang sudah di blok dan atur kemiringannya. 11. Beri warna pada atap yang sudah di terbentuk dengan cara yang masih sama yaitu menggunakan material yang terdapat pada kanan menu. Jika ingin memberi warna blok face terlebih dahulu baru gunakan material untuk warna yang diinginkan. 12. Mini cafe sudah selesai, jika masih ada kekurangan bisa diubah dengan kreasi masing - masing. Universitas Sumatera Utara Universitas Sumatera Utara 4.1.1.1. Program Untuk Rotate function touchobjek ketika gerakan tangan menyetuh maka status drag objek menjadi true { drag = true; } function Update { menangani perubahan yang terjadi akibat inputan pada layar device if Input.touchCount == 1 jika disentuh hanya 1 { var theTouch : Touch = Input.GetTouch0; if theTouch.phase == TouchPhase.Moved jika sentuhan berpindah { touchobjek; } if theTouch.phase == TouchPhase.Ended || theTouch.phase == TouchPhase. Canceled jika berhenti menyentuh atau batal menyentuk { drag = false; } } if Input.touchCount 1 jika disentuh lebih dari 1 { drag = false; } if theTouch.phase == TouchPhase.Moved drag jika proses sentuh dan berpindah { kecepatan = new Vector3theTouch.position.x,theTouch.position.y, 0; avg = Vector3.Lerpavg,kecepatan,Time.deltaTime 5; } transform.Rotate Camera.main.transform.upkecepatan.x rotasi, Space.World ; rotasi keatas transform.Rotate Camera.main.transform.rightkecepatan.yrotasi, Space.World ; rotasi kekanan } 4.1.1.2 Program Untuk Zoom void Update { objek.transform.localScale = new Vector30.4f, 0.4f, 0.4f nilaiI 0.01f; perubahan ukuran berdasarkan slide interval } void OnGUI untuk menampilkan GUI slider { Universitas Sumatera Utara Universitas Sumatera Utara Universitas Sumatera Utara Gambar 4.5 Tampilan PopUp About 4.1.2.4 Tampilan HomeMenu Utama Tampilan ini merupakan tampilan utama di dalam aplikasi ini. Pada halaman homemenu utama ini terdiri dari tombol kopi tampan untuk melihat bagaimana visi, misi, produk, dan informasi mengenai perancangan bisnis kopi tampan. Produk untuk melihat produk kopi tampansecara 3D, gerobak untuk melihat Augmented Reality dari gerobak kopi tampan, mini cafe untuk melihat Augmented Reality dari mini cafe, marker digunakan untuk memberi informasi mengenai marker yang akan digunakan dan help akan memberitahu informasi tentang aplikasi. Tampilan homemenu utama dapat dilihat pada Gambar 4.6. Gambar 4.6 Tampilan HomeMenu Utama Universitas Sumatera Utara 4.1.2.5 Tampilan Halaman Kopi tampan Pada tampilan halaman kopi tampan dibagi menjadi 4 bagian. Halaman Kopi Tampan 1 berisi deskripsi mengenai kopi tampan, dan visi misi dan dapat dilihat pada Gambar 4.7. Halaman Kopi Tampan 2 berisi tentang perancangan bisnis dari 3 produk yaitu gayo, premium, dan jantan coffee dan dapat dilihat pada Gambar 4.8. Halaman Kopi Tampan 3 berisi tentang perancangan bisnis dari gerobak dan dapat dilihat pada Gambar 4.9. Halaman Kopi Tampan 4 berisi tentang perancangan bisnis dari mini cafe dan dapat dilihat pada Gambar 4.10. Gambar 4.7 Tampilan Kopi Tampan 1 Gambar 4.8 Tampilan Kopi Tampan 2 Universitas Sumatera Utara Universitas Sumatera Utara Universitas Sumatera Utara Universitas Sumatera Utara Universitas Sumatera Utara Universitas Sumatera Utara Universitas Sumatera Utara Tabel 4.1 Hasil Pengujian Tekan Tombol Start No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Kopi Tampan Tombol Kopi Tampan akan menuju ke halaman Kopi Tampan 1 Baik 2 Cek Tombol Produk Tombol Produk akan menuju ke halaman produk Baik 3 Cek Tombol Gerobak Tombol Gerobak akan menuju ke halaman Augmented Reality Gerobak Baik 4 Cek Tombol Mini Cafe Tombol Mini Cafe akan menuju ke halaman Augmented Reality Mini Cafe Baik 5 Cek Tombol Marker Tombol Marker akan menuju ke popup marker Baik 6 Cek Tombol Help Tombol Help akan menuju ke popup help Baik 7 Cek Tombol Home Tombol Home akan menuju ke halaman landing page Baik 4.2.1.2 Proses Tekan Tombol About Hasil pengujian pada proses Tekan Tombol About diperlihatkan pada Tabel 4.2. Tabel 4.2 Hasil Pengujian Tekan Tombol About No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Keluar Keluar dari popup about Baik Universitas Sumatera Utara 4.2.1.3 Proses Tekan Tombol Kopi Tampan Hasil pengujian pada proses Tekan Tombol Kopi Tampan diperlihatkan pada Tabel 4.3. Tabel 4.3 Hasil Pengujian Tekan Tombol Kopi Tampan No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Next Tombol Next akan menuju ke halaman Kopi Tampan 2 Baik 2 Cek Tombol Home Tombol Home akan menuju ke halaman homemenu utama Baik 4.2.1.4 Proses Tekan Tombol Next Pada Halaman Kopi Tampan 1 Hasil pengujian pada proses Tekan Tombol Next Pada Halaman Kopi Tampan 1 diperlihatkan pada Tabel 4.4. Tabel 4.4 Hasil Pengujian Tekan Tombol Next Pada Halaman Kopi Tampan 1 No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Next Tombol Next akan menuju ke halaman Kopi Tampan 3 Baik 2 Cek Tombol Back Tombol Back akan menuju ke halaman Kopi Tampan 1 Baik 3 Cek Tombol Home Tombol Home akan menuju ke halaman homemenu utama Baik 4.2.1.5 Proses Tekan Tombol Next Pada Halaman Kopi Tampan 2 Hasil pengujian pada proses Tekan Tombol Next Pada Halaman Kopi Tampan 2 diperlihatkan pada Tabel 4.5. Universitas Sumatera Utara Tabel 4.5 Hasil Pengujian Tekan Tombol Next Pada Halaman Kopi Tampan 2 No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Next Tombol Next akan menuju ke halaman Kopi Tampan 4 Baik 2 Cek Tombol Back Tombol Back akan menuju ke halaman Kopi Tampan 2 Baik 3 Cek Tombol Home Tombol Home akan menuju ke halaman homemenu utama Baik 4.2.1.6 Proses Tekan Tombol Next Pada Halaman Kopi Tampan 3 Hasil pengujian pada proses Tekan Tombol Next Pada Halaman Kopi Tampan 3 diperlihatkan pada Tabel 4.6. Tabel 4.6 Hasil Pengujian Tekan Tombol Next Pada Halaman Kopi Tampan 3 No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Back Tombol Back akan menuju ke halaman Kopi Tampan 3 Baik 2 Cek Tombol Home Tombol Home akan menuju ke halaman homemenu utama Baik 4.2.1.7 Proses Tekan Tombol Produk Hasil pengujian pada proses Tekan Tombol Produk diperlihatkan pada Tabel 4.7. Tabel 4.7 Hasil Pengujian Tekan Tombol Produk No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Gayo Coffee Tombol Gayo Coffee akan menuju ke halaman Augmented Reality Baik Universitas Sumatera Utara Gayo Coffee 2 Cek Tombol Premium Coffee Tombol Premium Coffee akan menuju ke halaman Augmented Reality Premium Coffee Baik 3 Cek Tombol Jantan Coffee Tombol Jantan Coffee akan menuju ke halaman Augmented Reality Jantan Coffee Baik 4 Cek Tombol Home Tombol Home akan menuju ke halaman homemenu utama Baik 4.2.1.8 Proses Tekan Tombol Gerobak Hasil pengujian pada proses Tekan Tombol Gerobak diperlihatkan pada Tabel 4.8. Tabel 4.8 Hasil Pengujian Tekan Tombol Gerobak No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Home Tombol Home akan menuju ke halaman homemenu utama Baik 4.2.1.9 Proses Tekan Tombol Mini Cafe Hasil pengujian pada proses Tekan Tombol Mini Cafe diperlihatkan pada Tabel 4.9. Tabel 4.9 Hasil Pengujian Tekan Tombol Mini Cafe No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Home Tombol Home akan menuju ke halaman homemenu utama Baik 4.2.1.10 Proses Tekan Tombol Marker Hasil pengujian pada proses Tekan Tombol Marker diperlihatkan pada Tabel 4.10. Universitas Sumatera Utara Tabel 4.10 Hasil Pengujian Tekan Tombol Marker No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Keluar Keluar dari popup marker Baik 4.2.1.11 Proses Tekan Tombol Help Hasil pengujian pada proses Tekan Tombol Help diperlihatkan pada Tabel 4.11. Tabel 4.11 Hasil Pengujian Tekan Tombol Help No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Keluar Keluar dari popup help Baik 4.2.1.12 Proses Tekan Tombol Gayo Coffee Hasil pengujian pada proses Tekan Tombol Gayo Coffee diperlihatkan pada Tabel 4.12. Tabel 4.12 Hasil Pengujian Tekan Tombol Gayo Coffee No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Home Tombol Home akan menuju ke halaman produk Baik 4.2.1.13 Proses Tekan Tombol Premium Coffee Hasil pengujian pada proses Tekan Tombol Premium Coffee diperlihatkan pada Tabel 4.13. Universitas Sumatera Utara Tabel 4.13 Hasil Pengujian Tekan Tombol Premium Coffee No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Home Tombol Home akan menuju ke halaman produk Baik 4.2.1.14 Proses Tekan Tombol Jantan Coffee Hasil pengujian pada proses Tekan Tombol Jantan Coffee diperlihatkan pada Tabel 4.14. Tabel 4.14 Hasil Pengujian Tekan Tombol Jantan Coffee No. Pengujian Hasil yang Diharapkan Hasil Pengujian 1 Cek Tombol Home Tombol Home akan menuju ke halaman produk Baik

4.3 Pengujian Objek