7
Ukuran huruf dibuat dan dibakukan agar tidak
berubah-ubah sehingga
tidak menggangu Galitz 2007.
Pada prototipe ini hanya digunakan satu jenis typeface yaitu default typeface dengan
jenis typeface yang digunakan pada sistem mengikuti jenis typeface pada sistem operasi
mobile yang digunakan. Hal ini dilakukan agar pengguna lebih mudah mengenali
sistem dengan jenis typeface yang sudah familiar olehnya.
Ukuran font yang digunakan dalam sistem ini ialah 12 sp, 14 sp, dan 16 sp pada
bagian content, serta 20 sp untuk bagian header. Ukuran font ditentukan dengan
ukuran scaled pixel sp. Penggunaan ukuran sp dilakukan karena merupakan satuan yang
baik untuk digunakan dalam menentukan suatu view.
d Pemilihan Warna
Menurut Nielsen dan Loranger 2006, untuk memperjelas teks yang dimunculkan,
warna teks haruslah kontras dengan warna latar yaitu teks berwarna gelap dengan latar
berwarna terang positive text atau teks berwarna terang dengan latar berwarna gelap
negative text. Pada perancangan prototipe ini akan digunakan negative text pada bagian
menu, label info lokasi dengan latar berwarna hitam, teks berwarna putih, dan
positive text pada halaman deskripsi info lokasi dengan latar berwarna putih dan teks
berwarna hitam. Hal ini dilakukan agar pengguna tidak merasa bosan dengan
konsistensi warna teks dan layar pada aplikasi ini.
e Pemilihan Icon
Icon merupakan salah satu cara untuk meningkatkan fungsi suatu menu yang
secara visual menggambarkan suatu objek atau fungsi dalam sebuah aplikasi. Pada
perancangan ini icon ditampilkan bersama teks yang akan membentuk suatu menu dan
disusun dalam tampilan grid menu dan list menu.
Gambar 3 Model dimensi icon. Ukuran icon yang digunakan pada
penelitian ini ialah 48x48 px, 64x64 px, 96x96 px, dan 128x128 px untuk setiap jenis
icon serta dengan format icon PNG 24 bit. Model dimensi icon dapat dilihat pada
Gambar 3. Ukuran icon ini disesuaikan dengan panduan pembuatan icon pada
sistem operasi Android Google 2011.
4.1.5 Usability Goals
Berdasarkan karakteristik
pengguna, terlihat
bahwa pengguna
merupakan pengguna yang aktif dalam menggunakan
mobile phone dan memiliki pengalaman yang cukup terhadap sistem AR. Oleh
karena itu, tujuan perancangan prototipe ini ialah easy to use, yaitu antarmuka pengguna
dirancang sedemikian rupa sehingga mudah dalam penggunaannya. Tujuan usability
dapat didefinisikan dengan teknik tujuan usability kualitatif dan kuantitatif Mayhew
1999.
Tujuan kualitatif yang dibangun sebagai berikut:
1 Antarmuka
dapat memudahkan
pengguna dalam menyelesaikan tugas secara tepat dan benar.
2 Antarmuka dapat memudahkan aktivitas
bernavigasi. 3
Antarmuka mudah dipelajari dan dapat mempercepat alur kerja.
Tujuan kuantitatif diukur pada waktu uji coba user testing. Tujuan kuantitatif yang
dapat diukur pada penelitian ini sebagai berikut:
1 Rata-rata waktu pengguna untuk
menyelesaikan tugas. 2
Rata-rata jumlah tugas yang dapat diselesaikan dalam suatu waktu.
3 Rata-rata jumlah kesalahan yang
dilakukan pengguna.
4.1.6 Style Guide
Seluruh task
pada tahap
analisis menghasilkan panduan bahwa perancangan
prototipe akan
menekankan pada
perancangan model yang mudah digunakan.
4.2 Tahap Desain dan Perancangan
4.2.1 Work Reengineering
Work reengineering ini merupakan tahap rekayasa ulang, validasi, dan perbaikan dari
tahap analisis tugas yang telah dilakukan sebelumnya.
Pada tahap
sebelumnya, seluruh pekerjaan telah dipetakan sehingga
tidak perlu dilakukan reengineering.
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