Standar Desain Layar Desain Antarmuka Detail

8

4.2.2 Desain Model Konseptual

Perancangan ini dilakukan dengan membuat gambar sketsa yang kemudian digambarkan kembali secara detail menggunakan desain gambar komputer dan tampilan mockup antarmuka. Perancangan model konseptual ini meliputi: 1 Pembagian ruang dan tata letak Pada perancangan ini pembagian ruang dibagi menjadi dua bagian yang terdiri atas header dan content. Hal ini dilakukan selain untuk membuat tampilan aplikasi menjadi lebih sederhana, juga untuk memudahkan pengguna dalam melakukan navigasi dan mendapatkan informasi yang tersedia. Konsep pembagian ruang dalam penelitian ini diperlihatkan oleh Gambar 4. 2 Perancangan Antarmuka Utama Perancangan ini dibuat dalam bentuk mockups antarmuka yang dibuat dengan menggunakan software Axure 6.0 dan Adobe Photoshop CS5. Alasan penggunaan software ini ialah kemudahan dalam melakukan desain dan interaktivitas hasil mockups yang didapat. Perancangan antarmuka ini dilakukan berdasarkan pembagian ruang dan tata letaknya. Bagian header halaman utama berisi page tittle nama judul aplikasi dan halaman selanjutnya berisi fungsi tab menu navigasi disertai dengan nama judul setiap halamannya. Bagian content halaman utama berisi fungsi utama sistem, yaitu gridview kategori menu. Kategori menu terdiri atas:  tempat penting,  fakultas,  kelas,  auditorium,  asrama,  sarana kesehatan,  sarana olahraga,  atm,  kafetaria,  toilet, dan  perpustakaan. Kategori disertai dengan icon badge yang menandakan jumlah setiap item yang ada di dalamnya. Pada halaman selanjutnya, terdapat pilihan tampilan view yang terdiri atas:  Listview,  map view, dan  camera view. Tampilan detail mockups dapat dilihat pada Gambar 5. Gambar 4 Konsep pembagian ruang. Gambar 5 Detail mockup Antarmuka.

4.2.3 Standar Desain Layar

Perancangan antarmuka prototipe ini dilakukan dengan menggunakan standar desain layar yang jelas. Standar ini diperlukan agar pengguna dapat dengan mudah mengenali dan mengidentifikasi suatu fungsi kontrol hanya dari bentuknya yang standar. Standar ini mengatur kebutuhan khusus tentang tampilan layar dan operasinya. Inti dari standardisasi tampilan layar adalah tipe layar yang reusable pada suatu template yang umum digunakan. Beberapa standar layar yang digunakan terlihat pada Tabel 4. Tabel 4 Standar desain layar Konten Menu Jenis Kontrol Aksi navigasi Push button Sejumlah pilihan Grid list dan list Penentuan skala jarak Slider Penentuan ukuran Push button

4.2.4 Desain Antarmuka Detail

Perancangan desain ini dilakukan dengan software Eclipse Indigo dan Android SDK HEADER CONTENT 9 2.2 Froyo. Berdasarkan hasil konseptual dan standar desain layar, desain antarmuka umum yang dirancang yaitu: 1 Antarmuka tampilan menu prototipe Tampilan yang digunakan berupa gridview menu pada halaman awal aplikasi. Pengguna diminta untuk melakukan task pencarian dan memilih lokasi di IPB berdasarkan setiap kategori yang ditampilkan dalam bentuk dimensi scrolling grid. Setiap kategori yang dipilih akan menampilkan daftar lokasi yang disediakan pada halaman selanjutnya. Tampilan menu yang ditampilkan pada halaman selanjutnya berupa listview menu yang memaparkan suatu daftar pilihan lokasi dalam bentuk list item. Pengguna dapat memilih item yang dikehendakinya dengan cara memilih, hold, dan scroll pada pilihan item yang memerlukan scrolling. Tampilan desain gridview dan listview menu dapat dilihat pada Gambar 6 dan Gambar 7. Tampilan icon kategori dapat dilihat pada Tabel 5. 2 Deskripsi Lokasi Untuk menampilkan deskripsi lokasi, pengguna hanya perlu menekan icon pada daftar lokasi yang ada. Aksi ini akan memunculkan halaman deskripsi lokasi yang dipilih. Pada halaman ini, terdapat gambar lokasi dengan nama setiap lokasinya dan informasi lengkap lokasi yang bersangkutan. Desain halaman deskripsi dapat dilihat pada Gambar 8. 3 Respon loading awal konten aplikasi Respon diperlukan untuk memberikan rasa aman dan meyakinkan pengguna bahwa aplikasi sedang berjalan dan tidak mengalami hang. Saat awal aplikasi diakses, terdapat animasi progress bar yang menjadi indikator visual dari progress operasi. Desain loading konten dapat dilihat pada Gambar 9. 4 Pop-up pilihan dan informasi lokasi Pada halaman menu awal aplikasi diberikan suatu kontrol tambahan berupa pop-up untuk menampilkan beberapa pilihan dan notifikasi toast atau pop-up kecil pada bagian bawah yang menampilkan suatu teks berisikan informasi singkat tentang setiap menu kategori. Pengguna dapat memunculkan pop-up tersebut dengan hold pada pilihan menu kategori dan menu pilihan lokasi yang tersedia. Selain halaman awal notifikasi, terdapat juga pada halaman peta yang menampilkan nama lokasi berikut dengan koordinat lokasinya. Pengguna dapat menekan marker pada peta untuk memunculkan notifikasi tersebut. Setiap notifikasi pada halaman awal dan pada halaman peta akan muncul beberapa saat lalu menghilang secara otomatis apabila tidak ada interaksi dengan pengguna. Desain pop-up pilihan dan pop-up informasi dapat dilihat pada Gambar 10, Gambar 11, dan Gambar 12. Gambar 6 Desain gridview menu. Gambar 7 Desain listview menu. 10 Gambar 8 Desain deskripsi informasi lokasi. Tabel 5 Jenis icon pada kategori menu Logo Keterangan Tempat penting Fakultas Sarana olahraga Perpustakaan Kafetaria Gambar 9 Desain loading konten aplikasi. Gambar 10 Pop-up pilihan. Gambar 11 Pop-up informasi. Gambar 12 Pop-up pada peta.

4.2.5 Evaluasi Antarmuka Detail