Analisis Implementasi Adipat-Zhang Framework untuk Perancangan Antarmuka Aplikasi Vitafruit Berbasis Android

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012

Analisis Implementasi Adipat-Zhang Framework untuk Perancangan Antarmuka Aplikasi “Vitafruit” Berbasis Android Ahmad Nisjdan Rizki1, Angelina Prima Kurniati2, Erda Guslinar P3 1

Fakultas Informatika – Institut Teknologi Telkom, Bandung [email protected], [email protected], [email protected]

Abstrak Perangkat keras yang bersifat mobile semakin banyak bermunculan seiring dengan perkembangan teknologi yang pesat. Aplikasi mobile semakin banyak dikembangkan untuk memenuhi kebutuhan pengguna perangkat mobile tersebut. Akan tetapi, masih banyak aplikasi mobile yang rancangan antarmukanya belum mendukung tingkat usability dari aplikasinya sendiri sehingga diperlukan metode tersendiri untuk merancang antarmuka dari sebuah aplikasi. Penelitian bertujuan untuk mengevaluasi hasil implementasi sebuah framework yang secara khusus dibuat untuk membantu perancangan antarmuka sebuah aplikasi mobile. Studi kasus yang diambil adalah antarmuka aplikasi ensiklopedi buah-buahan. Aplikasi yang sudah jadi akan diuji tingkat usability-nya dengan menggunakan metode dari Carles Ferre. Berdasarkan hasil pengumpulan data pengujian, penggunaan Adipat-Zhang Framework sebagai panduan untuk merancang antarmuka dapat menghasilkan aplikasi dengan usability yang tinggi. Kata kunci: aplikasi bergerak, antarmuka, framework, usability, android Abstract Mobile hardware is increasingly emerging as the rapid technological developments. More and more mobile applications are developed to meet the needs of mobile device users. However, many mobile applications do not support the level design interface usability of the application itself so required a separate method for designing the interface of an application. This research is aimed to evaluate the results of the implementation of a framework that is specifically designed to help design a mobile application interfaces. The case study is taken fruits encyclopedia application interface. Applications that have created will be tested for its level of usability by using the method of Carles Ferre. Based on data collection, use of Adipat-Zhang Framework as a guide for designing an interface produce an application with high usability. Keywords: mobile application, interface, framework, usability, android 1.

antarmuka aplikasi mobile sebagai dasar pembuatan framework tersebut. Aplikasi yang dirancang dalam penelitian ini adalah Vitafruit, aplikasi ensiklopedi tentang berbagai macam buah dan vitamin, berbasis mobile. Menurut pakar nutrisi, Emilia E. Achmadi [11], konsumsi buah di Indonesia masih sangat kurang. Padahal, dengan mengonsumsi buah-buahan dengan porsi yang cukup, dapat membantu memenuhi kebutuhan nutrisi harian[3]. Dalam penelitian ini dilakukan implementasi Adipat-Zhang Framework pada perancangan aplikasi mobile berbasis android agar pembangunan aplikasi dapat mencapai kebutuhan yang diperlukan. Setelah itu hasil jadi aplikasi akan dievaluasi usability-nya dengan menggunakan metode dari Carles Farre [7]. Pembangunan aplikasi Vitafruit ini diharapkan dapat membantu masyarakat akan pentingnya mengonsumsi buah-buahan untuk kesehatan. Aplikasi ini masuk ke dalam kategori “lifestyle/health” pada sistem operasi Android.

Pendahuluan

Seiring dengan perkembangan teknologi yang pesat, perangkat keras yang bersifat mobile semakin banyak bermunculan. Aplikasi yang bersifat mobile semakin banyak dikembangkan untuk memenuhi kebutuhan pengguna gadget. Akan tetapi, masih banyak aplikasi mobile yang desain antarmukanya belum mendukung tingkat usability dari aplikasinya sendiri. Padahal, desain antarmuka sebuah aplikasi adalah masalah penting dalam pengembangan aplikasi mobile. Untuk merancang antarmuka sebuah aplikasi yang efektif, maka dibutuhkan framework atau panduan yang tepat. Adipat-Zhang Framework merupakan framework yang dibuat berdasarkan kajian literatur yang komprehensif dan terdiri dari empat komponen utama serta panduan rancangan antarmuka untuk dijadikan bahan pertimbangan dalam merancang sebuah aplikasi[3]. Adipat-Zhang Framework menggunakan berbagai macam referensi penelitian tentang perancangan 155

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012 2.1.3 Information Presentation

2. Landasan Teori 2.1 Adipat-Zhang Framework

Menyajikan informasi berukuran besar pada layar kecil dengan navigasi konten yang mudah adalah masalah utama yang dihadapi oleh perancang antarmuka. Tanpa strategi yang efektif untuk mengatur penyampaian informasi seperti itu, user akan mengalami kesulitan dalam mencari informasi yang spesifik, menemukan hubungan antara informasi yang ditampilkan, dan memahami informasi tersebut [18]. Ada beberapa teknik yang dapat digunakan untuk membantu menyajikan informasi dalam cara yang efektif dan adaptif, seperti ditunjukkan pada Gambar 3.

Adipat Zhang Framework terdiri dari empat komponen utama, yaitu user, context, information presentation, dan data entry methods[3]. Gambar 1 menunjukkan framework tersebut.

Gambar 1. Framework perancangan antarmuka Gambar 3. Teknik Penyajian Informasi

2.1.1 User

2.1.4 Data Entry Methods

Tujuan membuat antarmuka adalah agar user dapat berinteraksi dengan mudah terhadap aplikasi. Karena user memiliki preferensi dan karakteristik yang berbeda-beda, maka penting untuk mempelajari user; yaitu dari sisi cognitive load, preference, dan disability. Gambar 2 menunjukkan ilustrasi dari ketiga hal ini.

Menyediakan input pada perangkat yang kecil adalah hal yang sulit dan membutuhkan kemahiran tertentu [3]. Beberapa pendekatan yang inovatif telah diajukan untuk meringankan masalah entri data. Contoh perangkat yang dapat digunakan adalah soft keyboard dan handwriting. 2.1.5 Usability Usability adalah atribut kualitas yang menilai seberapa mudah user interface yang digunakan. Juga mengacu pada metode untuk meningkatkan kemudahan penggunaan selama proses desain[7]. Usability didefinisikan oleh 5 komponen kualitas: 1. Learnability: Seberapa mudah bagi pengguna untuk menyelesaikan tugas-tugas dasar pertama kalinya mereka hadapi desain? 2. Efficiency: Setelah pengguna telah belajar desain, seberapa cepat mereka dapat melakukan tugas-tugas? 3. Memorability: Bila pengguna kembali ke desain setelah beberapa waktu tidak menggunakannya, seberapa mudah mereka dapat membangun kembali kemahiran dalam menggunakan user interface? 4. Errors: Berapa banyak kesalahan yang dibuat pengguna, seberapa parah kesalahan ini, dan bagaimana dengan mudah dapat mereka pulih dari kesalahan? 5. Satisfaction: Seberapa menyenangkan dalam menggunakan rancangan?

Gambar 2. Karakteristik user dan kegunaannya

2.1.2 Context Suasana (context) bisa didefinisikan sebagai “informasi apapun yang mencirikan situasi yang berkaitan dengan interaksi antara user, aplikasi, dan lingkungan sekitar” [6]. Ini biasanya mencakup lokasi, identitas orang terdekat, objek, serta unsur-unsur lingkungan yang dapat mengalihkan user (contoh: kebisingan, intensitas cahaya sekitar, dan gangguan lainnya). Suasana adalah sumber informasi hidup untuk aplikasi yang “sadar suasana” (contextaware [1]), aplikasi yang menawarkan layanan dan informasi berdasarkan suasana. Sebagai contoh, sebuah aplikasi dapat menyajikan informasi tentang restoran terdekat ketika user ada di sekitarnya. Contoh lainnya adalah aplikasi mobile secara otomatis dapat mengubah ukuran tulisan atau mengatur kecerahan layar agar lebih mudah dibaca. 156

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012 Penilaian usability dapat dilakukan dengan dua tipe metode, yaitu evaluasi usability dan uji usability. Pengujian usability merupakan cara untuk mengetahui apakah rancangan antarmuka memiliki masalah yang dapat mencegah user mendapatkan pengalaman yang memuaskan. Pengujian usability adalah metodologi yang memanfaatkan user untuk mengevaluasi sejauh mana sebuah situs web/ software memenuhi kriteria kegunaan yang telah ditetapkan. Ukuran usability: 1. Effectiveness (kemampuan untuk menyelesaikan tugas dengan sukses) a. Persentase kesuksesan b. Jumlah kesalahan 2. Efficiency (kemampuan untuk menyelesaikan tugas dengan cepat dan mudah) a. Waktu untuk menyelesaikan tugas b. Frekuensi permintaan bantuan c. Berapa kali fasilitator memberi bantuan d. Jumlah berapa kali user menyerah 3. Satisfaction a. Penilaian positif dan negatif kepuasan b. Persen pendapat menguntungkan terhadap pendapat yang tidak menguntungkan c. Jumlah fitur yang baik banding buruk diingatkan kembali setelah pengujian d. Jumlah user yang akan menggunakan sistemnya kembali e. Berapa kali user menyatakan tidakpuas 4. Learnability (kemampuan untuk belajar menggunakan dan mengingat) a. Perbandingan sukses dan gagal b. Jumlah fitur yang diingat setelah pengujian

Sedangkan data preference adalah data subjektif pemikiran peserta, di antaranya adalah: 1. Preferensi versi 2. Saran dan pendapat 3. Penilaian atau peringkat (bisa kuantitatif) 2.2 Kategori Aplikasi Mobile Pada sistem operasi Adroid terdapat berbagai macam kategori aplikasi, di antaranya adalah:games, weather, maps/ navigation/ search, social networking, music, news, entertainment, banking/ finance, dining/ restaurant, sports, productivity, shopping / retail, video / movies, travel, food / drink, communication, lifestyle/ health, dan household/ personal care[12]. Apabila dilihat dari tujuan aplikasi ini dibuat, maka aplikasi Vitafruit termasuk ke dalam kategori “lifestyle/health” karena aplikasi ini berkaitan dengan kesehatan. 3.

Analisis dan Perancangan

Rancangan aplikasi akan disesuaikan dengan membuat pertimbangan-pertimbangan dan mengikuti panduan berdasarkan komponenkomponen dalam framework. Selain itu, rancangan aplikasi juga akan disesuaikan dengan batasan masalah, yaitu penggunaan perangkat mobile berbasis Android. Sebelumnya telah terlebih dahulu dibuat struktur aplikasi sebagai konsep dasar perancangan. Hal ini dilakukan agar penulis bisa mendapatkan kerangka dari aplikasi sehingga akan mempermudah penulis dalam menyesuaikan rancangan terhadap framework. Ini dilakukan berdasarkan penelitian singkat terhadap rencana pembuatan aplikasi Vitafruit. Gambar 4 menunjukkan kerangka aplikasi yang telah dibuat.

Proses uji usability: 1. Merencanakan uji usability a. Menetapkan apa yang akan diuji b. Menetapkan siapa yang harus diuji c. Menetapkan tugas apa yang harus diuji d. Memilih peserta 2. Melakukan uji usability a. Melakukan uji b. Mengumpulkan data 3. Menganalisa dan membuat laporan uji usability a. Menyusun hasil b. Buat rekomendasi

Gambar 4. Kerangka Aplikasi

Sketsa halaman menu utama dan indeks vitamin ditunjukkan pada Gambar 5. Sketsa halaman rincian vitamin A (sebagai contoh) dan indeks buah ditunjukkan pada Gambar 6. Sedangkan sketsa halaman daftar buah dan rincian buah mangga (sebagai contoh) ditunjukkan pada Gambar 7.

Terdapat dua jenis data yang diambil pada uji usability, yaitu performance dan preference. Data performance terdiri dari data objektif yang diperoleh dari keadaan yang sebenarnya pada saat uji usability, di antaranya adalah: 1. Waktu untuk menyelesaikan tugas 2. Waktu untuk pulih dari kesalahan 3. Jumlah kesalahan 4. Persentase tugas yang berhasil diselesaikan 5. Jumlah klik

Gambar 5. Menu utama dan indeks vitamin

157

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012 5. 6. 7. 8. 9. 10.

Mitologi Pembiakan Penyerbukan Pematangan Pemetikan Penyimpanan

15. 16. 17. 18. 19. 20.

Fakta menarik (trivia) Buah sejenis/ variasi Kelompok buah Cara pengolahan Harga Kultur

Agar informasi yang disajikan sesuai dengan tujuan pembuatan aplikasi, dilakukan pemisahan jenis-jenis informasi berdasarkan keterkaitannya dengan informasi buah. Pemisahan ini dilakukan sebagai berikut: Kelompok I: informasi nomor 3,13,14,15,16,18 Kelompok II: informasi nomor 1,2,4-12,17,19,20 Berdasarkan pengelompokan tersebut, jenisjenis informasi yang disajikan dalam aplikasi adalah informasi pada kelompok I. Bagian presentation meliputi gaya atau bentuk penyajian informasi. Tabel 2 menunjukkan panduan Presentation preference. Poin pertama pada kolom Purpose of use menyatakan bahwa informasi harus ditampilkan dalam gaya dan format yang disukai oleh user. Pada penelitian ini penulis mengadaptasi gaya penyajian dan tata letak (layout) dari halaman web Wikipedia versi mobile yang merupakan ensiklopedia paling populer saat ini. Cuplikan halan web Wikipedia ditunjukkan pada Gambar 8.

Gambar 6. Halaman rincian vitamin A dan indeks buah

Gambar 7. Halaman daftar buah dan rincian buah mangga

3.1 Analisis Komponen User Pada komponen ini terdapat tiga permasalahan yang harus diselesaikan agar user dapat berinteraksi dengan mudah terhadap aplikasi sesuai dengan karakteristik dan preferensinya. Tiga permasalahan tersebut adalah user preference, cognitive load, dan disabilities. 3.1.1 User Preference

TABEL 2 PRESENTATION PREFERENCE

Masalah user preference berkaitan langsung dengan target user dari sebuah aplikasi sehingga perlu pertimbangan istimewa untuk membuat rancangan agar kebutuhan preferensi user terpenuhi. Hal ini dapat dilakukan dengan mengenali content dan presentation yang sesuai dengan preferensi user. Bagian content meliputi sajian informasi yang ditampilkan. Tabel 1 menunjukkan content preference dari user aplikasi vitafruit.

Purpose of use 1. Tampilkan informasi dalam gaya dan format yang disukai (warna, ukuran/ jenis font, objek media)

Benefits 1. Meningkatkan kepuasan user [19] 2. Meningkatkan kemungkinan user dapat menyelesaikan tugas dengan waktu dan kesalahan minimal [19]

TABEL 1 CONTENT PREFERENCE

Purpose of use 1. Hapus informasi yang tidak relevan dengan kebutuhan pengguna; 2. Prioritaskan konten untuk menentukan apa yang harus disajikan sebagai fokus layar pada satu waktu.

Benefits 1. Secara efektif menggunakan ukuran layar yang terbatas untuk menampilkan informasi yang relevan [15]; 2. Mengurangi jeda transmisi dan lalu lintas jaringan nirkabel [17]; 3. Mengurangi waktu bagi user untuk menemukan informasi [15]

Berdasarkan poin 1 pada kolom Purpose of use di Tabel 1, perlu dilakukan penghapusan informasi yang tidak relevan. Terdapat berbagai informasi tentang buah, diantaranya adalah: 1. 2. 3. 4.

Bentuk Warna Rasa Sejarah

11. 12. 13. 14.

Hama dan penyakit Perdagangan Manfaat bagi kesehatan Nutrisi

Gambar 8. Cuplikan halaman web mobile Wikipedia

158

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012 Dengan mengadaptasi layout Wikipedia, maka bisa didapatkan hasil perbaikan rancangan seperti yang ditunjukkan pada Gambar 9.

3.1.3 Disabilities Contoh masalah disability yang mungkin muncul adalah buta warna. Panduan untuk mengatasi masalah buta warna, yaitu: 1. Jangan mengandalkan warna, gunakan ukuran font khusus atau gaya (cetak tebal/ miring/ bergaris bawah) untuk menyampaikan informasi [4]. 2. Gunakan warna hitam-dan-putih atau warna yang sangat kontras [4]. 3. Manfaatkan inforamsi user preference untuk secara langsung menyesuaikan font/ warna [16].

Gambar 9. Perbaikan rancangan Presentation preference

3.1.2 Cognitive Load

Ketiga poin pada panduan ini secara tidak langsung sudah terjawab. Hal ini karena masalah buta warna berkaitan erat dengan masalah presentation dimana bentuk sajian informasi mengadaptasi format sajian dari Wikipedia.

Fokus utamanya adalah meminimalisasi beban kerja user agar tugas yang sedang dikerjakan dapat segera terselesaikan tanpa harus menyita waktunya dengan memfokuskan dirinya pada antarmuka.

3.2 Analisis Komponen Context

TABEL 3 PANDUAN UNTUK MENGATASI INFORMATION OVERLOAD

Komponen ini memberikan arahan terhadap masalah kontrol aplikasi dan privasi user. Pada konsep dasar rancangan, terdapat tiga pilihan untuk menyalakan/mematikan fitur. Dengan tersedianya pilihan ini, dua poin teratas pada masalah kontrol aplikasi terselesaikan. Akan tetapi, penyediaan pilihan ini bertentangan dengan panduan terhadap User Preference pada komponen User. Hal ini membuat penggunaan layar menjadi tidak efektif karena menampilkan informasi yang tidak relevan[3]. Pilihan pengaturan ini dapat dimasukkan ke dalam context menu berdampingan dengan fungsi search sehingga penggunaan layar lebih efisien. Pengaturan intensitas cahaya/ volume dapat dilakukan sendiri secara manual (atau otomatis apabila tersedia) melalui sistem Android sehingga aplikasi tidak membutuhkan fitur ini. Gambar 11 menunjukkan sketsa rancangan antarmuka untuk pilihan konfigurasi terhadap aplikasi.

Cognitive Interface design guidelines load problem Information 1. Kategorikan informasi dan sajikan dalam overload; struktur hirarki agar user dapat informasi menelusuri informasi lebih lanjut jika yang perlu [14]; berlebihan 2. Masukan informasi yang lebih penting disajikan lebih dekat ke puncak hirarki [9]; pada satu 3. Rancang antarmuka yang dapat waktu. memandu user untuk fokus pada bagian layar yang spesifik pada satu waktu [10]; 4. Sediakan fungsi search untuk mencari obyek dengan mudah dalam halaman atau aplikasi [8].

Tabel 3 menunjukkan panduan rancangan antarmuka untuk mengatasi information overload. Panduan poin keempat dilaksanakan dengan menyediakan fungsi search. Fungsi search ini akan diletakkan pada context menu agar dapat memenuhi poin ketiga dan efisiensi penggunaan layar. Gambar 10 menunjukkan sketsa rancangan antarmuka untuk fungsi search tersebut.

Gambar 11. Setting

Pada masalah privasi user juga terdapat tiga poin panduan. Akan tetapi, panduan ini secara tidak langsung masalah tersebut sudah terjawab. Aplikasi yang dibuat bersifat stand-alone yang berarti aplikasi dapat digunakan tanpa harus

Gambar 10. Fungsi search

159

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012 terhubung dengan Internet sehingga tidak ada ikla yang tampil pada aplikasi dan mengganggu user. Informasi tambahan seperti intensitas cahaya atau volume sudah diatur oleh sistem Android. Informasi pembaruan aplikasi juga sudah diatur sedemikian rupa oleh sistem Android agar tidak mengganggu user saat sedang menggunakan aplikasi. Contoh informasi ini terdapat pada Gambar 12.

dalam menggunakan aplikasi tersebut. Tiga sifat yang harus dimiliki aplikasi, yaitu: 1. Controllability, mengharuskan user mendapat kebebasan untuk mengatur konfigurasi aplikasi. 2. Predictability/ transparancy, mengharuskan perilaku aplikasi dapat dimengerti oleh user. 3. Unobtrusiveness, mengharuskan aplikasi dapat diakses dengan mudah tanpa harus terlalu berfokus pada antarmukanya. 3.3.3 Multimodal display Bagian ini mempertimbangkan tipe bentuk penyampaian informasi, yaitu visual, audio, dan sentuhan (tactile). Pada kasus vitafruit, tipe bentuk yang akan digunakan hanya tipe visual sehingga menu untuk konfigurasi getar atau audio ditiadakan. Hal ini dilakukan karena pilihan untuk mengaktif/nonaktif-kan fitur getar/ audio sudah tersedia pada sistem Android.

Gambar 12. Cuplikan ketersediaan pembaruan

3.3 Analisis Komponen Information Presentation

3.4 Analisis Komponen Data Entry Methods

3.3.1 Visualization

Komponen ini bertujuan untuk menentukan metode input data. Pada kasus Vitafruit, input data hanya dilakukan pada fitur search. Karena aplikasi ini dibuat untuk sistem operasi Android dengan fitur layar sentuh, maka metode yang tepat untuk memasukkan data adalah dengan menggunakan soft keyboard. Metode lainnya, yaitu handwriting dan voice input juga dapat diimplementasikan apabila ponsel atau perangkat mobile memiliki fitur tersebut. Implementasi terhadap metode-metode tersebut tidak perlu disediakan pada aplikasi karena telah disediakan oleh sistem operasi Android.

Fokus pada masalah visualisasi dalam aplikasi Vitafruit adalah tipe data 1-dimensi. Beberapa cara agar penyajian informasi dapat efektif adalah: 1. Berikan gambaran seluruh konten dalam struktur hirarki (misal: tree structure) [3] 2. Batasi kedalaman struktur menu hirarkis, tapi perluas [13] 3. Tentukan cara agar user mengetahui di mana mereka berada dalam dokumen atau koleksi (misalnya menu pop-up yang menunjukkan gambaran isi keseluruhan dengan menyoroti posisi/ halaman saat ini) [18] 4. Rancang jalur terpendek untuk mencapai halaman tujuan [8] 5. Batasi konten grafis, ukuran teks, penggunaan bentuk/ bidang entri data, dan penggunaan widget (misalnya radio button/ icon) [5]

3.5 Hasil Implementasi Rancangan Hasil implementasi rancangan ditunjukkan pada Gambar 14.

Gambar 13 menunjukkan hasil penerapan panduan nomor 4. Gambar 14. Hasil implementasi rancangan

4. Pengujian dan Analisis 4.1 Skenario pengujian Aspek yang diuji adalah efektifitas, efisiensi, tingkat kepuasan, dan learnability. Skenario pengujiannya adalah: 1. Terdapat 5 peserta uji untuk menguji aplikasi 2. Pengujian tidak dilakukan secara bersamaan 3. Setiap peserta menuji tiga kali dalam tiga hari 4. Pada setiap pengujian terdapat 4 tugas

Gambar 13. Navigasi halaman yang optimal

3.3.2 Adaptive Interface Bagian ini dianalisis agar aplikasi dapat beradaptasi dengan tindakan atau kebiasaan user 160

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012 5. 6.

7. 8.

Nilai efektivitas didapatkan dari persentase kesuksesan dalam menyelesaikan tugas Nilai efisiensi didapat dari waktu penyelesaian tugas, frekuensi user meminta bantuan, jumlah bantuan yang diberikan, dan jumlah user yang menyerah menyelesaikan tugas. Tingkat kepuasan didapat dari perbandingan pendapat positif dan negatif dari user Learnability didapat dari perbandingan sukses dan gagal

Peserta A B C D E Rata2

Untuk menentukan peserta uji diperlukan kriteria khusus. Pada studi kasus ini, target user adalah umum sehingga tidak dapat ditentukan secara spesifik siapa yang secara pasti akan menggunakan aplikasinya. Tapi kriteria utama dari peserta uji untuk pengujian ini adalah pengguna perangkat mobile berbasis Android. Kriteria pendukung lain tidak dapat ditentukan karena spesifikasi dari target user sangat luas. Pemilihan peserta uji dilakukan atas keterwakilannya yang berdasarkan usia, jenis kelamin dan pekerjaan. Tabel 4 menunjukkan informasi dari kelima peserta uji telah dipilih.

Peserta A B C D E Rata2

4.3

Jenis Kelamin Laki-laki Laki-laki Perempuan Laki-laki Laki-laki

Req Ass 0 0 0 0 0 0 0 0 0 0

T1 10.04 1051 8.93 7.43 7.81 9.822

TABEL 6. HASIL PENGUJIAN 2 T2 T3 T4 3.42 2.54 20.78 3.12 2.14 21.67 7.44 6.54 20.59 15.12 11.71 24.46 14.5 18.83 30.84 3.192 2.39 18.574

Rat 100% 100% 100% 100% 100% 100%

Req Ass 0 0 0 0 0 0 0 0 0 0

Pengujian 3 - T1: buka buah pisang (banana) - T 2: ada berapa gram magnesium pada pisang? - T3: nama “banana” diambil dari bahasa apa? - T4: pisang mengandung potasium yang tinggi. Apa fungsinya?

TABEL 4 USER CREDENTIALS

Usia 24 27 27 51 12

Rat 75% 100% 100% 75% 100% 90%

Pengujian 2 - T1 (Tugas1): buka buah mangga (mango) - T2: ada berapa gram kalsium pada mangga? - T3: mangga biasa digunakan untuk apa? - T4: pada mangga terdapat enzim. Apa kegunaannya?

4.2 Pemilihan Peserta Uji

Peserta A B C D E

T1 2.51 3.11 3.23 3.51 2.82 2.742

TABEL 5 HASIL PENGUJIAN 1 T2 T3 T4 8.49 6.01 25.01 7.34 4.32 21.41 10.12 7.44 6.54 12.24 20.32 46.98 9.91 22.48 26.37 7.828 5.024 19.038

Pekerjaan Mahasiswa Pegawai swasta Pegawai swasta Dokter gigi Pelajar

Peserta A B C D E Rata2

Pengumpulan Data

Kegiatan ini diawali dengan menyusun tugastugas yang akan diberikan kepada penguji. Empat tugas diberikan pada satu pengujian, kemudian dicatat. Empat tugas berbeda yang senada diberikan pada dua pengujian lainnya. Data pengujian yang didapat akan ditampilkan dalam bentuk tabel. Setiap tugas yang terselesaikan disajikan dalam satuan detik dan jika terdapat kesalahan akan diberi tanda. Kolom ‘ratio’ mencatat perbandingan tugas terselesaikan yang sukses dan gagal. Kolom ‘request’ mencatat jumlah permintaan bantuan dari peserta, sedangkan kolom ‘assist’ mencatat jumlah pemberian bantuan dari asisten uji. Di bawah ini merupakan tugas-tugas pada setiap pengujian beserta hasilnya dan pendapat dari peserta pengujian terhadap aplikasi.

T1 6.35 6.91 4.99 2.64 7.14 6.082

TABEL 7 HASIL PENGUJIAN 3 T2 T3 T4 3.5 5.9 8.09 4.03 6.34 9.37 4.51 8.12 8.73 5.43 9.81 17.24 4.73 18.56 23.23 3.548 5..796 8.598

Rat 100% 100% 100% 100% 100% 100%

Req Ass 0 0 0 0 0 0 0 0 0 0

Peserta juga memberikan pendapat secara bebas sebagai berikut: A: Simpel, menarik, mudah, tapi ada bug B: (1) Fungsi search pada aplikasi belum berfungsi (2) UI menarik dan mudah digunakan oleh user (3) Aplikasi ini memberikan informasi yang memudahkan pengguna untuk mengetahui manfaat berbagai macam buah dan vitamin C: Tampilan menarik dan mudah dioperasikan D: (1) Interaksi antarmuka sederhana (2) Informasi mudah diakses (3) Pada keadaan tertentu, informasi bertumpuk E: (1) Aplikasi bisa menambah ilmu dan pelajaran tentang buah-buahan (2) Enak dipakai dan tidak rumit

Pengujian 1 - T1 (Tugas1): buka buah apel - T2: ada berapa gram vitamin C pada apel? - T3: apa kegunaan dari antioksidan pada apel? - T4: ada berapa varian warna apel?

4.4 161

Evaluasi Data

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012 Rata-rata persentase keberhasilan pada pengujian 1,2 dan 3 adalah 90%, 100% dan 100%. Hal ini menunjukkan bahwa efektivitas aplikasi tinggi. Setiap tugas terselesaikan dalam beberapa detik tanpa ada permintaan bantuan dari asisten penguji. Hal ini menunjukkan bahwa rancangan antarmuka aplikasi efisien. Sedangkan berdasarkan hasil pengujian 1, 2 dan 3, persentase kesuksesan berada di atas 90%. Peserta juga dapat menyelesaikan tugas dengan mudah. Dapat disimpulkan bahwa learnability aplikasi ini tinggi. Pendapat peserta dapat dikelompokkan dalam pendapat positif dan negatif, serta dapat dihitung rasionya seperti pada Tabel 8.

2.

Saran untuk penelitian lebih lanjut adalah: 1. Framework ini dapat diuji untuk diterapkan pada aplikasi kategori lainnya. 2. Pengujian implementasi dapat dilakukan lebih terperinci sehingga dapat menemukan kekurangan dari framework ini. Daftar Pustaka

Tabel 8. Rasio pendapat positif dan negatif

Peserta A B C D E Total Rasio

Pendapat positif 3 3 2 2 3 13 81,25%

Pendapat negatif 1 1 0 1 0 3

[1]

Barkhuus, L. and Dey, A. 2003. Is context-aware computing taking control away from the user? Three levels of interactivity examined. The 5th International Conference on Ubiquitous Computing (UBICOMP 2003), Seattle, Washington, 159-166. [2] Boonlit Adipat, Dongsong Zhang. 2005. Interface Design for Mobile Applications. University of Maryland Baltimore County. [3] Buyukkokten, O., Kaljuvee, O., Garcia-Molina, H., Paepcke, A. and Winograd, T. (2002) Efficient Web Browsing on Handheld Devices Using Page and Form Summarization, ACM Transactions on Information Systems. [4] Caldwell, B., Chisholm, W., Vanderheiden, G. and White, J. 2004. Web Content accessibility Guidelines 2.0. [5] Cotton, J. and Commaford, P. (2005). Designing Web Content for Mobile Browsers, March 29, from http://www128.ibm.com/developerworks/wireless/library/wi-web/ [6] Dey, A. K., Salber, D. and Abowd, G. D. 2001. A Conceptual Framework and a Toolkit for Supporting the Rapid Prototyping of Context-Aware Applications, Human-Computer Interaction, 16, 97-166. [7] Farré, Carles. 2010. Web Usability (Slideshare Version). UPC Barcelona, Spain. [8] Jones, M., Marsden, G., Mohd-Nasir, N., Boone, K., and Buchanan, G. 1999. Iproving Web Interaction on Small Displays. Computer Networks. [9] Karkkainen, L. and Laarni, J. 2002. Designing for the small display devices. Proceedings of the Second Nordic Conference on Human-Computer Interactioin, October 1923, Arhus, Denmark. [10] Mayer, R. E. & Moreno, R. (2003). Nine ways to reduce cognitive load in multimedia learning. In Bruning, R., Horn, C. A., & PytlikZillig, L. M. (Eds.), Web-based learning: What do we know? Where do we go? (pp. 23-44). Greenwich, CT: Information Age Publishing. [11] Stephen Berwster, Mark Dunlop. 2004. Mobile HumanComputer Interaction – MobileHCI 2004. 6th. International Symposium, MobileHCI 2004 Glasgow, UK [12] The Nielsen Company. 2010. The State of Mobile Apps. New York, USA. [13] Parush, A. and Yuviler-Gavish, N. (2004) Web navigation structures in cellular phones: the depth/breadth trade-off issue, International Journal of Human-Computer Studies, 60, 753-770. [14] Qiu, M., K. Zhang and M.L. Huang. 2006. Usability in Mobile Interface Browsing in Web Intelligence and Agent Systems Journal (WIAS). [15] Quiroga, Luz M., Crosby & Iding. 2004. Reducing Cognitive Load. In Proceedings of the 37th Hawaii International Conference on System Sciences. [16] Richard, J.T. and Hanson, V.L. 2004. Web Accessibility: A Broader View. Proceedings of the Thirteenth International ACM World Wide Web Conference (WWW2004), New York, USA.

Beberapa peserta uji mengeluhkan bug pada aplikasi. Gambar 15 menunjukkan bug yang dimaksud dalam komentar tersebut.

Gambar 15. Bug pada aplikasi

Bug ini disebabkan oleh kesalahan pada javascript. Pada saat menggunakan aplikasi, bug ini bisa sewaktu-waktu muncul, namun kadang juga tidak. Setelah bug ini diperbaiki, persentase pendapat positif terhadap pendapat negatif semakin meningkat. 5.

Pada studi kasus ini, framework Adipat-Zhang terbukti dapat membantu pengembang dalam membangun aplikasi dengan usability yang tinggi. Ini dibuktikan oleh tingginya efektivitas dan efisiensi dari aplikasi.

Kesimpulan dan saran

Kesimpulan yang diperoleh adalah: 1. Framework Adipat-Zhang berhasil diimplementasikan pada aplikasi kategori “lifestyle/ health”, yaitu Vitafruit dengan performansi yang baik.

162

Konferensi Nasional ICT-M Politeknik Telkom (KNIP) 2012 [17] Samaras, G. and Panayioto, C. 2002. Personalized Portals for the Wireless User Based on Mobile Agents. Proceedings of the 2nd International Workshop on Mobile Commerce, September 28. [18] Spencer R. 2001. Informatio Vizualization. AddisonWesley. [19] Zhang, D. 2003. Delivery of Personalized and adaptive content to mobile devices: a framework and enabling technology. Communications of AIS.

163