IV. HASIL DAN PEMBAHASAN
4.2 Perancangan User Interface
2. Tipografi
Jenis font merupakan salah satu elemen yang sangat penting dalam sebuah aplikasi karena pemilihan jenis font akan mempengaruhi kemudahan pengguna dalam membaca suatu konteks dalam aplikasi. Jenis font yang akan digunakan pada aplikasi pendeteksi gejala awal PMK pada sapi adalah font nunito sans. Penggunaan jenis font ini karena dari segi bentuk font ini cukup modern, dan merupakan salah satu font yang populer untuk UI design pada aplikasi mobile.
Gambar 21. Font Nunito Sans 3. Ikon
Penggunaan ikon pada aplikasi sangat penting karena ikon merupakan perwakilan gambar dalam sebuah informasi atau komunikasi yang mempermudah pengguna dalam mengakses sebuah aplikasi serta dapat membuat pengguna tertarik dalam mengaksesnya. Dalam aplikasi pendeteksi gejala awal PMK pada sapi penulis menggunakan ikon berbentuk gambar vektor.
Berikut ikon yang digunakan dalam aplikasi:
Tabel 8. Ikon Dalam Aplikasi
Ikon Nama Sumber
search https://www.flaticon.com/
diagnosis https://www.flaticon.com/
prevention https://www.flaticon.com/
about https://www.flaticon.com/
no-photo https://www.flaticon.com/
research https://www.flaticon.com/
develop app https://undraw.co/illustrations
question font_awesome_flutter
upload_file cupertino_icons
call cupertino_icons
home cupertino_icons
arrow_back cupertino_icons
Selanjutnya rancangan antarmuka akan direpresentasikan ke dalam bentuk wireframe. Wireframe merupakan kerangka atau sketsa berbentuk kotak-kotak dan garis yang dibuat untuk merepresentasikan sebuah desain aplikasi yang akan dibangun. Dalam pembuatan wireframe penulis tidak menentukan resolusi atau ukuran layar dikarenakan aplikasi pendeteksi gejala awal PMK pada sapi dibuat fleksibel yaitu mampu merespon berbagai ukuran dan orientasi layar tanpa masalah. Dengan hal tersebut aplikasi nantinya dapat tersedia bagi banyak pengguna di berbagai perangkat cukup dengan satu aplikasi. Wireframe dari aplikasi pendeteksi gejala awal PMK pada sapi sebagai berikut:
1. Rancangan Halaman Splashscreen
Pada rancangan tampilan halaman splashscreen terdapat logo dari aplikasi. Tampilan rancangan halaman splashscreen dapat dilihat pada gambar 22.
Gambar 22. Rancangan Halaman Splashscreen
2. Rancangan Halaman Utama
Pada rancangan halaman utama terdapat gambar sebagai background, judul, gambar sapi, dan menu-menu utama yang dapat dipilih dalam aplikasi.
Tampilan rancangan halaman menu utama dapat dilihat pada gambar 23.
Gambar 23. Rancangan Halaman Utama 3. Rancangan Halaman Deteksi Gambar
Pada rancangan halaman deteksi gambar terdapat gambar deteksi, kotak hasil deteksi, tombol upload gambar, tombol lanjut deteksi non-fisik, serta terdapat status aplikasi sedang online atau offline pada pojok kanan halaman.
Tampilan rancangan halaman deteksi gambar dapat dilihat pada gambar 24.
Gambar 24. Rancangan Halaman Deteksi Gambar
4. Rancangan Pop-up Pilih Upload Gambar
Pada rancangan pop-up pilih upload gambar terdapat dua tombol pilihan yaitu tombol camera dan tombol gallery. Tampilan rancangan halaman deteksi gambar dapat dilihat pada gambar 25.
Gambar 25. Rancangan Pop-up Pilih Upload Gambar
5. Rancangan Halaman Hasil Deteksi Gambar
Pada rancangan halaman hasil deteksi gambar box hasil deteksi akan terisi dengan hasil dari pendeteksian gambar, serta di bawah box tersebut akan muncul hasil confidence dari pendeteksian. Tampilan rancangan halaman hasil deteksi gambar dapat dilihat pada gambar 26.
Gambar 26. Rancangan Halaman Hasil Deteksi Gambar
6. Rancangan Halaman Pertanyaan Deteksi Gejala Non Fisik
Pada rancangan halaman pertanyaan deteksi gejala non fisik akan akan muncul beberapa pertanyaan terkait dengan ciri-ciri gejala non-fisik PMK.
Terdapat tombol “Ya” dan “Tidak” untuk menjawab pertanyaan, dan terdapat tombol selanjutnya untuk melanjutkan ke pertanyaan lain. Tampilan rancangan halaman pertanyaan deteksi gejala non fisik dapat dilihat pada gambar 27.
Gambar 27. Rancangan Halaman Pertanyaan Deteksi Gejala Non Fisik 7. Rancangan Halaman Hasil Deteksi Non Fisik
Pada rancangan halaman hasil deteksi non-fisik akan akan ditampilkan hasil gejala non-fisik yang dialami dari pertanyaan yang telah dijawab. Terdapat tombol untuk akses halaman pertolongan pertama, dan tombol untuk menghubungi dinas setempat. Dan tombol selesai untuk kembali ke halaman Deteksi. Tampilan rancangan halaman hasil deteksi non-fisik dapat dilihat pada gambar 28.
Gambar 28. Rancangan Halaman Hasil Deteksi Non Fisik
8. Rancangan Halaman Informasi Gejala Fisik
Pada rancangan halaman informasi gejala fisik akan akan gambar-gambar mengenai gejala fisik yang dialami sapi yang terkena PMK. Tampilan rancangan halaman informasi gejala fisik dapat dilihat pada gambar 29.
Gambar 29. Rancangan Halaman Informasi Gejala Fisik 9. Rancangan Halaman Informasi Detail Gejala Fisik
Pada rancangan halaman informasi detail gejala fisik akan menampilkan gambar gejala fisik yang dipilih pengguna pada halaman gejala fisik sebelumnya.
Pada halaman ini akan terdapat informasi detail mengenai ciri-ciri gejala fisik sapi yang terkena PMK. Tampilan rancangan halaman informasi detail gejala fisik dapat dilihat pada gambar 30.
Gambar 30. Rancangan Halaman Informasi Detail Gejala Fisik
10. Rancangan Halaman Informasi Gejala Non Fisik
Pada rancangan halaman informasi gejala non-fisik akan akan menampilkan informasi mengenai gejala-gejala non-fisik yang dialami sapi yang terkena PMK. Tampilan rancangan halaman informasi gejala non-fisik dapat dilihat pada gambar 31.
Gambar 31. Rancangan Halaman Informasi Gejala Non Fisik 11. Rancangan Halaman Penyebaran PMK
Pada rancangan halaman penyebaran PMK akan akan memuat informasi mengenai cara penyebaran PMK. Tampilan rancangan halaman penyebaran PMK dapat dilihat pada gambar 32.
Gambar 32. Rancangan Halaman Penyebaran PMK
12. Rancangan Halaman Pertolongan Pertama PMK
Pada rancangan halaman pertolongan pertama PMK akan akan memuat informasi mengenai cara pertolongan pertama pada sapi yang terkena PMK.
Tampilan rancangan halaman pertolongan pertama PMK dapat dilihat pada gambar 33.
Gambar 33. Rancangan Halaman Pertolongan Pertama PMK 13. Rancangan Halaman Tentang Aplikasi
Pada rancangan halaman tentang aplikasi akan akan memuat informasi mengenai aplikasi dan informasi mengenai Dinas Pertanian dan Ketahanan Pangan Kota Jambi. Tampilan rancangan halaman tentang aplikasi dapat dilihat pada gambar 34.
Gambar 34. Rancangan Halaman Tentang Aplikasi