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