Perbaikan Antarmuka dan Pengembangan Fitur Baru Situs Web Indonesian Future Leaders Chapter Malang menggunakan Framework Affordance-Based Design

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer Vol. 2, No. 2, Februari 2018, hlm. 759-767

e-ISSN: 2548-964X http://j-ptiik.ub.ac.id

Perbaikan Antarmuka dan Pengembangan Fitur Baru Situs Web Indonesian Future Leaders Chapter Malang menggunakan Framework Affordance-Based Design Nissa Madaniyah Fadhilah1, Retno Indah Rokhmawati2, Hanifah Muslimah Az-Zahra3 Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya Email: [email protected], [email protected], [email protected] Abstrak IFL Malang merupakan organisasi yang bergerak di bidang pendidikan, sosial dan mewadahi komunitas untuk bersinergi bersama memberikan perubahan positif bagi Kota Malang yang mempunyai situs web yang berdomain blogger. Situs web tersebut berfungsi untuk mewadahi penuangan informasi programprogram dan memfasilitasi pembaca agar mengetauhi IFL Malang lebih dalam. Kedepannya, pihak IFL Malang berniat akan membuat antarmuka baru dengan alasan masih terdapat kekurangan pada tampilan situs web IFL Malang seperti banyaknya penumpukan informasi, tata letak yang kurang rapih, visualisasi berupa gambar masih minim dan kurang jelasnya navigasi di halaman-halaman situs web serta terbatasnya fasilitas blogger untuk penambahan menu donasi. Metode affordance-based design menawarkan desain dengan landasan teoritis yang melihat komponen desain secara menyeluruh serta mempertimbangkan fungsi dan pengguna dengan baik bersama-sama, tidak hanya memperlihatkan affordances yang diinginkan tetapi juga yang tidak diinginkan. Pada akhirnya, perbaikan desain dengan metode ini menghasilkan desain baru yang tidak hanya melihat dari sisi positif nya tetapi juga sisi negatif dan sangat mencerminkan pengguna serta mempunyai pengaruh yang baik pada pengujian usability yaitu aspek efektivitas dengan menghasilkan presentase efektivitas 98,14% dari nilai maksimal 100%, tidak ada waktu pengerjaan yang signifikan sehingga bisa dinilai baik pada aspek efisiensi dan bernilai sangat baik pada item kepuasan pengguna. Kata Kunci: affordances,Affordance-Based Design, antarmuka pengguna, usability

Abstract IFL Malang is an organization which moves on the field social education and accomodate the community in Malang to synergize together to positive change for Malang who has a website with bogger domain.The main purpose of the website is to facilitate readers to get to know more about IFL Malang. IFL Malang was intended to develop an new interface due to several reasons. The first reason is there are still shortcomings in user interface of the website, such as huge amount of information accumulation, less tidy layout, visualization of the image still minimalist and lack of a clear navigation on the website. The second reason is the limited blogger facility for the addition of Donation menu that will be developed in the future. Affordance-based design can offer designs with a theoretical foundation that sees the design components thoroughly and considers functions and users well together and shows not only shows the desired affordances but also unwanted affordances. The results of design improvements with the Affordance-based design method resulted in a new design that not only looked at the positive side but also the negative side of an affordance and strongly reflects the user. Affordances has a good influence on usability testing that is the aspect of effectiveness by generating a percentage of effectiveness 98.14% of the maximum value 100 %, There is no significant processing time so that it can be judged both on the aspect of efficiency and excellent value on all items of user satisfaction. Keywords: affordances,Affordance-Based Design, user interface, usability

(IFL Malang) adalah Non Government Organization yang merupakan organisasi yang bergerak di bidang pendidikan sosial dan

1. PENDAHULUAN Indonesian Future Leaders chapter Malang Fakultas Ilmu Komputer Universitas Brawijaya

759

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer

mewadahi komunitas di Kota Malang. IFL Malang mempunyai situs web berdomain blogger yang membeli domain .org. yang berfungsi untuk mewadahi penuangan informasi program IFL Malang dan memfasilitasi pembaca agar mengetauhi IFL Malang lebih dalam. Pihak Indonesian Future Leaders chapter Malang berniat akan membangun antarmuka baru dengan alasan pertama yaitu masih terdapat kekurangan pada tampilan situs web IFL Malang seperti banyaknya penumpukan informasi, tata letak yang masih kurang rapih, visualisasi berupa gambar masih minim dan kurang jelasnya navigasi di halaman-halaman situs web. Tampilan yang diprioritaskan untuk diperbaiki adalah menu Home, What’s New, dan About IFL Chapter Malang . Alasan kedua adalah terbatasnya fasilitas blogger untuk penambahan menu Donasi yang akan dikembangkan oleh situs web IFL Malang kedepannya.. Saat ini, donasi menjadi sumber pendanaan yang penting dan merupakan salah satu fokus bagi Non Profit Organization(Jaklevic, 2000). Nantinya, pada menu donasi terdapat sub-menu yang berisi nama-nama program yang dijalankan oleh IFL Malang. Jika pengunjung masuk ke dalam submenu nama program tersebut, akan ditampilkan penjelasan program yang sedang dijalankan. Penjelasan tersebut berupa deskripsi singkat, jenis donasi, video pendukung, dan dokumentasi program yang telah dijalankan sebelumnya. Jika pengunjung tertarik untuk berdonasi, maka akan ada tombol yang mengarahkan kepada formulir pendaftaran donatur yang berisi data diri serta jenis donasi yang dipilih sehingga IFL Malang membutuhkan rancangan desain antarmuka yang baik dan dapat menarik serta mencerminkan IFL Malang itu sendiri sebagai non profit organization yang bergerak di bidang sosial, pendidikan dan kepemudaan. Untuk mendapatkan antarmuka yang sesuai dengan IFL Malang maka penulis menggunakan framework affordace-based design. Maier dan Fadel(2009) menyarankan framework Affordace-Based Design, yang membantu desainer untuk secara bersamaan menganalisis kebutuhan pengguna, mempertimbangkan kebutuhan affordaces dan identifikasi affordaces dari komponen artefak secara bersamaan selama proses desain. Alasan lain penulis menggunakan framework ini karna masalah yang ada berhubungan dengan karakteristik Affordace-Based Design. Menurut wawancara yang dilakukan, pengujian usability perlu dilakukan pada aspek efisiensi, efektivitas Fakultas Ilmu Komputer, Universitas Brawijaya

760

dan kepuasan pengguna. 2. METODE PENELITIAN Metode penelitian dilakukan dengan beberapa tahapan diantaranya studi literatur dari penelitian sebelumnya dan berbagai refrensi. Setelah itu penulis akan mendefinisikan dan memahami affordaces pada objek penelitian yang terdiri dari menentukan kelompok pengguna, wawancara, menentukan affordaces positif dan negatif, memprioritaskan struktur affordaces dan menggambar struktur affordaces. Setelah itu untuk perbaikan desain penulis melakukan proses identifikasi faktor affordaces yang dilakukan menggunakan Affordace Sistem Matric (ASM). Pada tahap ini, unsur affordances pada setiap komponen situs web diidentifikasi sehingga komponen-komponen yang memiliki selisih affordances paling sedikit dapat diperbaiki. Hasil analisa dari ASM selanjutnya dibuatkan strategi agar faktor affordances yang positif maupun negatif dapat diberikan strategi. Untuk pembuatan desain baru untuk fitur donasi, strategi dibuat langsung dari hasil affordances positif dan negatif yang didapatkan dari tahap wawancara. Dari strategi tersebut, dibuatkanlah prototype antarmuka yang mengandung affordances. Setelah prototype antarmuka selesai dibuat, penulis melakukan evaluasi yang dilakukan berdasarkan komponen usability (efektivitas, efisiensi dan kepuasan pengguna). Pengukuran efektivitas dan efisiensi menggunakan lembar observasi dimana untuk aspek efektivitas menggunakan full scale scenario dan untuk efisiensi menggunakan pengukuran waktu, sedangkan penilaian kepuasan pengguna menggunakan Post-Study System Usability Questionare (PSSUQ). 3. HASIL DAN PEMBAHASAN 3.1. Pengumpulan Data dan Analisis 3.1.1 Kelompok Pengguna Menurut informasi yang didapatkan dari stakeholder, kelompok pengguna pada situs web IFL Malang dibagi menjadi dua kelompok yaitu stakeholder dan pengguna umum. Selanjutnya, dilakukan wawancara dengan tiga orang dari masing-masing kelompok pengguna untuk mendapatkan pernyataan mengenai situs web IFL Malang dan fitur donasi. Seluruh hasil wawancara dengan pengguna direkapitulasi dan dibuatkan daftar pernyataan.


Tabel 1. Daftar Affordances Positif pada Fitur Donasi

ID

Pernyataan

WNC_ 1_1 WNC_ 1_2 WNC_ 1_3

Langkah donasi Publikasi Baik Penjabaran program Jelas Terdapat Jenis Donasi Terdapat Reward Donasi Terdapat Kontak Yang Jelas Terdapat Video Teaser Laporan Keuangan Jelas Mendahuluk -an Kepercayaan Pendonasi Kemudahan Berdonasi Bukti Nyata Berdonasi Menjaga Privacy Visualisasi Jelas Persuasif

WNC_ 1_4 WNC_ 1_5 WNC_ 1_6 WNC_ 1_7 WNC_ 1_8 WNC_ 1_9

WNC_ 1_10 WNC_ 1_11 WNC_ 1_12 WNC_ 1_13 WNC_ 1_14 WNC_ 1_15

WNC_ 1_16 WNC_ 1_17

Tidak Mengandun g Unsur Politik Konten Tidak Mengganggu Visualisasi Tidak Membingun gkan

responden yang menyatakan Stakeh Penggu older na 1 1 orang orang 1 1 orang orang 1 orang

3 orang

1 orang 1 orang

2 orang

Jumlah 2 orang

761

Tabel 2. Daftar Affordances Positif pada Situs Web IFL Malang ID AFP_1_1

Affordance Positif Layout Efektif

AFP_1_2

Operasi nyaman

AFP_1_3 AFP_1_4

Mencerminkan Identitas Organisasi Bahasa Komunikatif

AFP_1_5

Representasi Akurat

AFP_1_6

Menyorot Program

2 orang 1 orang

1 orang 4 orang

2 orang

Refrensi WNC_1_6 WNC_1_10 WNC_1_16 WNC_1_2 WNC_1_5 WNC_1_8 WNC_1_21 WNC_1_1 WNC_1_3 WNC_1_7 WNC_1_14 WNC_1_15 WNC_1_18 WNC_1_9 WNC_1_12 WNC_1_13 WNC_1_17

3 orang 1 orang

1 orang 1 orang

4 orang

Tabel 3. Daftar affordance negatif pada situs web IFL Malang

2 orang

2 orang

1 orang

3 orang

ID AFN_1_1 AFN_1_2

Affordance Negatif Mengandung Iklan Konten Membingungkan

AFN_1_3

Visualisasi Kaku

1 orang

1 orang 1 orang 1 orang

2 orang

AFN_1_4 AFN_1_5

Konten Mengganggu Mengandung Aspek Politik

3 orang 1 orang

1 orang 4 orang

Tabel 4. Daftar Affordance Positif pada Fitur Donasi ID AFP_2_1

Affordance Positif Informasi Jelas

AFP_2_2

Konten Dapat Dipercaya

AFP_2_3 AFP_2_4 AFP_2_5 AFP_2_6

Menjaga Privasi Mudah Digunakan Petunjuk yang Jelas Publikasi Menarik

AFP_2_7

Operasi Nayaman

1 orang 1 orang

1 orang

1 orang

1 orang

1 orang

1 orang

1 orang

1 orang

3.1.2 Affordances positif dan negatif Setelah mendapatkan pernyataan mengenai situs web IFL Malang dan fitur donasi, pernyataan-pernyataan tersebut dikelompokan menjadi Affordances positif dan negatif seperti pada Tabel 2 dibawah ini :

Fakultas Ilmu Komputer, Universitas Brawijaya

Refrensi WNC_1_22 WNC_1_4 WNC_1_20 WNC_1_11 WNC_1_19 WNC_1_21 WNC_1_23

Referensi WNC_1_3 WNC_1_4 WNC_1_6 WNC_1_7 WNC_1_8 WNC_1_9 WNC_1_11 WNC_1_12 WNC_1_10 WNC_1_1 WNC_1_2 WNC_1_5 WNC_1_14 WNC_1_13

Tabel 5. Daftar Affordance Negatif pada Fitur Donasi ID AFN_2_1 AFN_2_2 AFN_2_3

Affordance Negatif Visualisasi Membingungkan Mengandung Unsur Politik Konten Mengganggu

Refrensi WNC_1_17 WNC_1_16 WNC_1_15

3.1.3. Mengidentifikasi faktor Affordances Salah satu langkah dari affordance-based design untuk melakukan perbaikan antarmuka


situs web IFL adalah mengidentifikasi faktor affordances. Pada langkah ini terdapat dua aktivitas utama yaitu mengidentifikasi komponen dari tampilan untuk antarmuka dari situs web IFL Malang dan mengidentifikasi faktor terkait. Yang terpenting dari langkah ini yaitu bagaimana membuat komponen dapat berasosiasi dengan affordances tertentu sehingga dapat menemukan kelemahan dan kekuatan dari komponen yang akan dievaluasi. Sesuai dengan isi konten yang terdapat pada situs web IFL Malang, terdapat 13 komponen yaitu judul, navigasi menu, judul artikel, pencarian, link social media, konten artikel, gambar artikel, deskripsi artikel, postingan popular, tentang IFL Malang , gambar direksi , twitter widget dan navigasi tambahan. Hasil dari pengolahan data pada ASM adalah daftar komponen yang perlu diperbaiki dan tidak perlu diperbaiki, serta nilai affordance dari masingmasing komponen. Dari selisih presentase ASM, presentase selisih terbesar berada pada komponen twitter widget yaitu dengan presentase 66%. Karena strategi desain affordances memberi sugesti untuk memperbaiki komponen yang memiliki selisih presentase <= 50%, maka komponen judul, navigasi menu, judul artikel, pencarian, link sosial media, konten artikel, gambar artikel, deskripsi artikel, postingan popular, tentang IFL Malang , gambar direksi dan navigasi tambahan perlu diperbaiki.

Layout Efektif Operasi Nyaman Bahasa Komunikatif Pencarian (0%)

Faktor Affordances

Strategi


Visualisasi Kaku

Pastikan untuk membuat tampilan semenarik mungkin

Konten Menggangg u

Memastikan kenyamanan visual

Representa si Akurat

Beri keterangan agar navigasi jelas

Visualisasi Kaku

Pastikan untuk membuat tampilan semenarik mungkin

Operasi Nyaman

Deskripsi Artikel (0%)

Mencermin kan Identitas Organisasi Bahasa Komunikatif Mengandun g Iklan Konten Membingun gkan Visualisasi Kaku

Postingan Populer (0%)

Meletakan kolom link sosial media pada tempat yang mudah dilihat Sederhanakan tata letak untuk mempermudah pemahaman Menggunakan sosial media yang benar-benar dimiliki

Konten Membingun gkan

Konten Menggangg u Layout Efektif

Tabel 6. Strategi untuk Memperbaiki Affordance Kompone n Situs Web IFL Malang (%)

Berikan konten yang benar tanpa kesalahan

Operasi Nyaman Link Sosial Media (0%)

Meletakan kolom pencarian pada tempat yang mudah dilihat. Pastikan besar navigasi sesuai Pastikan bahasa yang digunakan pada kolom pencarian mudah dimengerti.

Konten Membingun gkan

Layout Efektif

3.1.4. Mengidentifikasi strategi Affordances Untuk perbaikan antarmuka situs web IFL Malang yang telah mendapatkan daftar komponen yang harus diperbaiki, strategi desain affordances selanjutnya dibuat. Strategi desain bersumber dari penelitian sebelumnya yaitu penelitian Park dan Song (2012) dan beberapa masukan yang diberikan oleh responden saat melakukan wawancara. Untuk fitur donasi, strategi affordances dibuat berdasarkan affordances positif dan negatif yang didapatkan. Strategi desain untuk setiap komponen perbaikan antarmuka situs web IFL Malang terlampir pada Appendix.

762

Layout Efektif Operasi Nyaman

Memastikan kenyamanan visual Pastikan posisi deskripsi artikel tepat Sederhanakan tata letak untuk mempermudah pemahaman Menampilkan deskripsi artikel dengan font penulisan yang konsisten Menampilkan deskripsi artikel dengan font penulisan yang konsisten Pastikan konten tidak mengandung iklan Menyediakan deskripsi artikel yang mudah untuk dimengerti Pastikan untuk membuat tampilan semenarik mungkin Meletakan Postingan Populer pada tempat yang mudah dilihat oleh pengunjung Pastikan besar seluruh konten sesuai


Bahasa Komunikatif Representa si Akurat Konten Membingun gkan Visualisasi Kaku Konten Menggangg u Mengandun g Aspek Politik Layout Efektif Operasi Nyaman Representa si Akurat Navigasi (0%)

Konten Membingun gkan Visualisasi Kaku Konten Menggangg u Layout efektif Bahasa komunikatif

Judul Artikel (0%)

Menyorot program Mengandun g iklan Visualisasi kaku Mengandun g aspek politik

Foto Direksi (8%)

Layout Efektif Operasi Nyaman Mencermin kan Identitas Organisasi Visualisasi Kaku

Pastikan menggunakan tata Bahasa yang rapih dan komunikatif Menggunakan isi konten yang sesuai

Konten Menggangg u Mengandun g Aspek Politik

Menggunakan interaksi navigasi yang baik

Layout Efektif

Memastikan kenyamanan visual

Operasi Nyaman Mencermin kan Identitas Organisasi

Menampilkan tiga postingan ter popular Pastikan setiap konten bersifat senetral mungkin sehingga tidak mengarah ke unsur politik Memastikan interaksi navigasi baik Pastikan besar navisigasi sudah sesuai Pastikan bagian-bagian dari navigasi memiliki tujuan konten yang jelas Pastikan semua fungsi navigasi berjalan dengan baik Pastikan untuk membuat tampilan semenarik mungkin

Bahasa Komunikatif Representa si Akurat Konten Artikel (8%)

Menyorot Program Mengandun g Iklan Konten Membingun gkan Visualisasi Kaku Konten Menggangg u

Memastikan kenyamanan visual Pastikan layout bersih dan sederhana Pastikan menggunakan Bahasa yang komunikatif, konsisten dan menggunakan Bahasa yang rapih Pastikan untuk membuat program yang dijelaskan pada konten terlihat unggul Hal yang ditulis tidak boleh mengandung iklan Memastikan kenyamanan visual Pastikan setiap konten bersifat senetral mungkin sehingga tidak mengarah ke unsur politik

763

Mengandung Aspek Politik Layout Efektif

Tentang IFL Malang (8%)

Operasi Nyaman Mencermin kan Identitas Organisasi Bahasa Komunikatif

pastikan layout efektif tambahkan interaksi visual Pasatikan setiap konten mencerminkan Organisasi Pastikan kenyamanan visual


Representasi Akurat

Menyorot Program

Pastikan besar gambar sesuai Pastikan setiap konten bersifat senetral mungkin sehingga tidak mengarah ke unsur politik Menampilkan konten berdasarkan kategori dan pastikan layout efektif Pastikan kenyamanan visual Pasatikan setiap konten mencerminkan Organisasi Pastikan menggunakan Bahasa yang komunikatif dan font konsisten Pastikan bahwa tujan dan visualisasi konten jelas Pastikan untuk membuat program yang dijelaskan pada konten terlihat unggul Pastikan tidak mengandung iklan Pastikan interaksi navigasi sesuai Pastikan kenyamanan visual Pastikan layout bersih dan rapih Pastikan setiap konten bersifat senetral mungkin sehingga tidak mengarah ke unsur politik pastikan layout efektif dan letakan deskripsi singkat di halaman utama agar mudah dilihat Pastikan kenyamanan visual Pasatikan setiap konten mencerminkan Organisasi Pastikan menggunakan Bahasa yang komunikatif, font konsisten dan menggunakan Bahasa yang rapih Menampilkan keseluruhan layout dengan dikelompokan menjadi beberapa area Pastikan untuk membuat program yang dijelaskan pada konten terlihat unggul

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer Mengandun g Iklan Konten Membingun gkan Visualisasi Kaku Konten Menggangg u Mengandung Aspek Politik Layout Efektif Operasi Nyaman Mencermin kan Identitas Organisasi Menu (24%)

Bahasa Komunikatif Menyorot Program Visualisasi Kaku Konten Menggangg u Mengandun g Aspek Politik Layout Efektif Representa si Akurat

Gambar Artikel (34%)

Menyorot Program

Mengandun g Iklan Visualisasi Kaku

Judul (42%)

Layout Efektif Operasi Nyaman

Pastikan konten tidak mengandung iklan

764 Mencermin kan Identitas Organisasi

Pastikan interaksi navigasi baik Pastikan kenyamanan visual

Bahasa Komunikatif

Pastikan tidak ada konten yang tidak sesuai Pastikan setiap konten bersifat senetral mungkin sehingga tidak mengarah ke unsur politik Dimohon untuk ditempatkan pada posisi yang mudah dilihat pengguna Pastikan interaksi navigasi baik dan layout efektif Pastikan membuat visualisasi untuk mencerminkan organisasi Menggunakan Bahasa yang mudah dipahami oleh pengguna Gunakan visualisasi yang membembuat program terlihat unggul Pastikan untuk membuat tampilan semenarik mungkin

Menyorot Program

Diharapkan judul yang dibuat memvisualisasikan organisasi Pastikan menggunakan Bahasa yang komunikatif, konsisten, dan menggunakan tata Bahasa yang rapih Pastikan untuk membuat hal yang yang gambarkan terlihat unggul

Konten Menggangg u

Pastikan tidak ada konten yang tidak sesuai

Mengandun g Aspek Politik

Pastikan setiap konten bersifat senetral mungkin sehingga tidak mengarah ke unsur politik

Tabel 7 menunjukan strategi untuk fitur donasi dapatkan dari affordance positif dan negatif yang telah ditemukan pada tahap sebelumnya. Strategi affordance yang didapatkan berasal dari masukan pengguna dan refrensi penelitian sebelumnya. Berikut adalah stategi desain Affordances untuk fitur donasi : Tabel 7. Stategi Desain Affordances Fitur Donasi

ID SDD_1_1

Faktor Affordance Informasi Jelas

Strategi

Konten Dapat Dipercaya

Perlunya transparasi keuangan pada setiap donasi seperti menampilkan laporan keuangan untuk program yang sudah dijalankan untuk menjaga kepercayaan donasi dan juga diberikan bukti

Pastikan tidak ada konten yang tidak sesuai Pastikan setiap konten bersifat senetral mungkin sehingga tidak mengarah ke unsur politik Pastikan posisi gambar tepat Pastikan tujuan dari gambar jelas Pastikan untuk menampilkan gambar yang membuat aktifitas terlihat unggul Pastikan gambar tidak mengandung hal selain dokumentasi dari organisasi Memastikan kenyamanan visual Ditempatkan di tempat yang mudah dilihat oleh pengguna Pastikan warna judul menarik dan besar font sesuai


SDD_1_2

Mengandung informasi berupa penjelasan program, video yang mencerminkan program, kontak yang jelas, jenisjenis donasi dan nama pendonasi


SDD_1_3

Menjaga Privasi

SDD_1_4

Mudah Digunakan Petunjuk yang Jelas

SDD_1_5

SDD_1_6

Publikasi Menarik

SDD_1_7

Operasi Nyaman

SDD_1_8

Visualisasi Membingungkan

SDD_1_9

Mengandung Unsur Politik

SDD_1_10

Konten Mengganggu

saat berdonasi Tidak menyalah gunakan data pendonasi dan menjaga data pendonasi tetap aman Pengoperasian yang sederhana Memberikan arahan yang jelas agar pengguna tidak salah mengoperasikan Cara untuk berdonasi diletakan di beberapa tempat sebagai sarana publikasi Pastikan kenyamanan visual Navigasi diperjelas

765

Gambar 1. Halaman Artikel

Menjaga setiap konten tetap netral Pastikan layout bersih dan rapih

Hasil strategi yang didapatkan akan digunakan untuk rekomendasi tampilan antarmuka pengguna di tahap selanjutnya. 3.2. Hasil Rekomendasi Desain Antarmuka Hasil strategi desain yang didapatkan pada tahap sebelumnya di terapkan dalam ide desain, dengan mengacu pada beberapa aturan desain juga. Sehingga didapatkanlah hasil rekomendasi perbaikan desain antarmuka situs web IFL dan desain antarmuka fitur donasi sebagai berikut : Gambar 2. Halaman Home



766

Gambar 5. Halaman Form Donasi

Gambar 3. Halaman About IFL Malang

Gambar 6. Halaman Fitur Donasi

3.3. EVALUASI DESAIN BARU

Gambar 4. Halaman Rincian Artikel


Aspek usability yang dilakukan evaluasi pada penelitian ini yaitu efektivitas, efisiensi dan kepuasan pengguna. Pada aspek efektivitas, digunakan task scenario jenis Full Scale Task Scenario. Pada test scenario ini, penulis memberikan beberapa tugas kepada responden yang telah disusun berupa scenario yang harus dilakukan. Aspek efisiensi diuji dengan cara memberikan task scenario yang sama pada responden. Saat responden melakukan setiap task, penulis mengukur waktu yang dibutuhkan


oleh responden untuk melakukan setiap task scenario menggunakan stopwatch. Aspek kepuasan dinilai dengan cara memberikan kuesioner yang berisi 19 pertanyaan. Nilai efektivitas dari tampilan antarmuka baru yaitu 98,14% dengan nilai maksimal 100%. Nilai rata-rata waktu untuk pengerjaan task pada aspek efisiensi perbedaannya tidak terlalu signifikan. Pada aspek kepuasan pengguna, seluruh item yang terdapat pada kuesioner PSSUQ mendapatkan nilai sangat baik. 4. KESIMPULAN Pada menu home, what’s new, dan about IFL Chapter Malang ditemukan 6 affordances positif dan 5 affordances negatif serta 13 komponen. Hasil analisis affordances pada affordances structure matric (ASM) menghasilkan pernyataan bahwa 12 komponen dari 13 komponen pada situs Web IFL Malang perlu diperbaiki dari aspek affordances. Hasil dari perbaikan rancangan antarmuka pengguna dengan metode Affordance- based design menghasilkan desain baru yang tidak hanya melihat dari sisi positif nya tetapi juga sisi negatif dari suatu affordances dan sangat mencerminkan pengguna. Perancangan desain juga didukung oleh beberapa design guideline dari Research-Based Web Design & Guidelines.. Pada fitur donasi, ditemukan 7 affordances positif dan 3 affordances negatif. hasil perancangan antarmuka yang didasarkan pada strategi desain yang dihasilkan membuat metode Affordance- based design menghasilkan desain baru yang tidak hanya melihat dari sisi positif nya tetapi juga sisi negatif dari suatu affordances dan sangat mencerminkan pengguna. Perancangan desain juga didukung oleh guideline dari Research-Based Web Design & Guidelines. Hasi evaluasi usability pada rekomendasi antarmuka situs web IFL Malang menghasilkan presentase efektivitas 98,14% dari nilai maksimal 100% yang menggambarkan bahwa persentase tersebut bisa dinilai baik. Terdapat dua flow untuk mengerjakan task untuk melihat informasi mengenai IFL Malang. Hasilnya, 1 rensponden menggunakan flow kedua untuk mencapai tujuan tersebut dan 5 responden menggunakan flow pertama. Untuk task melihat langkah donasi, terdapat dua flow juga untuk mencapai tujuan tersebut dan satu responden menggunakan flow kedua dan sisanya menggunakan flow pertama. Untuk penilaian Fakultas Ilmu Komputer, Universitas Brawijaya

767

aspek efisiensi, terdapat 9 task yang dikerjakan oleh 6 responden dan waktu masing-masing responden untuk mengerjakan task tidak terpaut jauh. Untuk aspek kepuasan pengguna, semua penilaian item termasuk kedalam katogori sangat baik. Sehingga untuk aspek efektivitas, efisiensi dan kepuasan pengguna mempunyai hasil yang bisa dikatakan baik. SUMBER PUSTAKA/RUJUKAN Maier, J. R. A., & Fadel, G., M., 2009. Affordace-based design methods for innovative design, redesign and reverse engineering. Research in Engineering Design, 20(4), 225–239. [pdf] Tersedia di : [2 Februari 2017]. Maier, J., R., A., 2011. Affordace based design: Theoretical foundation and practical applications. Saarbrücken, Germany: VDM Verlag. Nielsen,J., 2001. Success Rate: The Simplest Usability Metric. [pdf] [15 Februari 2017] Park, H., & Song,H.,D., 2015. Make E-Learning Effortless! Impact of a Redesigned User Interface on Usability through the Application of an Affordace Design Approach. [pdf] Educational Technology & Society, 18 (3), 185–196. Tersedia di : [2 Februari 2017]. Jaklevic, M.,C., 2000. Charity finances health care: Donors are opening wallets to pay for million-dollar projects. Modern Healthcare, Vol. 30, pp. 26.

Perbaikan Antarmuka dan Pengembangan Fitur Baru Situs Web Indonesian Future Leaders Chapter Malang menggunakan Framework Affordance-Based Design

Recommend Documents