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

Transkripsi

1 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter e-issn: X Vol. 2, No. 2, Febrari 208, hlm Perbai Antarmka dan Pengembangan Fitr Bar Sits Web Indonesian Ftre Leaders Chapter Malang menggna Framework Affordance-Based Design Nissa Madaniyah Fadhilah, Retno Indah Rokhmawati 2, Hanifah Mslimah Az-Zahra 3 Stdi Sistem Informasi, Fakltas Ilm Kompter, Universitas Brawijaya nissamadaniyah@gmail.com, 2 retnoindahr@b.ac.id, 3 hanifah.azzahra@b.ac.id Abstrak IFL Malang merpa organisasi yang bergerak di bidang pendidi, sosial dan mewadahi komnitas ntk bersinergi bersama memberi perbahan positif bagi Kota Malang yang mempnyai sits web yang berdomain blogger. Sits web tersebt berfngsi ntk mewadahi penangan informasi programprogram dan memfasilitasi pembaca agar mengetahi IFL Malang lebih dalam. Kedepannya, pihak IFL Malang berniat a membat antarmka bar dengan alasan masih terdapat kekrangan pada tampilan sits web IFL Malang seperti banyaknya penmp informasi, tata letak yang krang rapih, visalisasi berpa gambar masih minim dan krang jelasnya navigasi di halaman-halaman sits web serta terbatasnya fasilitas blogger ntk penambahan men donasi. Metode affordance-based design menawar desain dengan landasan teoritis yang melihat komponen desain secara menyelrh serta mempertimban fngsi dan penggna dengan baik bersama-sama, tidak hanya memperlihat affordances yang diingin tetapi jga yang tidak diingin. Pada akhirnya, perbai desain dengan metode ini menghasil desain bar yang tidak hanya melihat dari sisi positif nya tetapi jga sisi negatif dan sangat mencermin penggna serta mempnyai pengarh yang baik pada pengjian sability yait aspek efektivitas dengan menghasil presentase efektivitas 98,4% dari nilai maksimal 00%, tidak ada wakt pengerjaan yang signifi sehingga bisa dinilai baik pada aspek efisiensi dan bernilai sangat baik pada item kepasan penggna. Kata Knci: affordances,affordance-based Design, antarmka penggna, sability Abstract IFL Malang is an organization which moves on the field social edcation and accomodate the commnity in Malang to synergize together to positive change for Malang who has a website with bogger domain.the main prpose of the website is to facilitate readers to get to know more abot IFL Malang. IFL Malang was intended to develop an new interface de to several reasons. The first reason is there are still shortcomings in ser interface of the website, sch as hge amont of information accmlation, less tidy layot, visalization 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 men that will be developed in the ftre. Affordance-based design can offer designs with a theoretical fondation that sees the design components thoroghly and considers fnctions and sers well together and shows not only shows the desired affordances bt also nwanted affordances. The reslts of design improvements with the Affordance-based design method reslted in a new design that not only looked at the positive side bt also the negative side of an affordance and strongly reflects the ser. Affordances has a good inflence on sability testing that is the aspect of effectiveness by generating a percentage of effectiveness 98.4% of the maximm vale 00 %, There is no significant processing time so that it can be jdged both on the aspect of efficiency and excellent vale on all items of ser satisfaction. Keywords: affordances,affordance-based Design, ser interface, sability. PENDAHULUAN Indonesian Ftre Leaders chapter Malang (IFL Malang) adalah Non Government Organization yang merpa organisasi yang bergerak di bidang pendidi sosial dan Fakltas Ilm Kompter Universitas Brawijaya 759

2 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter 760 mewadahi komnitas di Kota Malang. IFL Malang mempnyai sits web berdomain blogger yang membeli domain.org. yang berfngsi ntk mewadahi penangan informasi program IFL Malang dan memfasilitasi pembaca agar mengetahi IFL Malang lebih dalam. Pihak Indonesian Ftre Leaders chapter Malang berniat a membangn antarmka bar dengan alasan pertama yait masih terdapat kekrangan pada tampilan sits web IFL Malang seperti banyaknya penmp informasi, tata letak yang masih krang rapih, visalisasi berpa gambar masih minim dan krang jelasnya navigasi di halaman-halaman sits web. Tampilan yang diprioritas ntk diperbaiki adalah men Home, What s New, dan Abot IFL Chapter Malang. Alasan keda adalah terbatasnya fasilitas blogger ntk penambahan men Donasi yang a dikemban oleh sits web IFL Malang kedepannya.. Saat ini, donasi menjadi smber pendanaan yang penting dan merpa salah sat foks bagi Non Profit Organization(Jaklevic, 2000). Nantinya, pada men donasi terdapat sb-men yang berisi nama-nama program yang dijalan oleh IFL Malang. Jika pengnjng mask ke dalam sbmen nama program tersebt, a ditampil penjelasan program yang sedang dijalan. Penjelasan tersebt berpa deskripsi singkat, jenis donasi, video pendkng, dan dokmentasi program yang telah dijalan sebelmnya. Jika pengnjng tertarik ntk berdonasi, maka a ada tombol yang mengarah kepada formlir pendaftaran donatr yang berisi data diri serta jenis donasi yang dipilih sehingga IFL Malang membth rancangan desain antarmka yang baik dan dapat menarik serta mencermin IFL Malang it sendiri sebagai non profit organization yang bergerak di bidang sosial, pendidi dan kepemdaan. Untk mendapat antarmka yang sesai dengan IFL Malang maka penlis menggna framework affordace-based design. Maier dan Fadel(2009) menyaran framework Affordace-Based Design, yang membant desainer ntk secara bersamaan menganalisis kebthan penggna, mempertimban kebthan affordaces dan identifikasi affordaces dari komponen artefak secara bersamaan selama proses desain. Alasan lain penlis menggna framework ini karna masalah yang ada berhbngan dengan karakteristik Affordace-Based Design. Menrt wawancara yang dilak, pengjian sability perl dilak pada aspek efisiensi, efektivitas dan kepasan penggna. 2. METODE PENELITIAN Metode penelitian dilak dengan beberapa tahapan diantaranya stdi literatr dari penelitian sebelmnya dan berbagai refrensi. Setelah it penlis a mendefinisi dan memahami affordaces pada objek penelitian yang terdiri dari menent kelompok penggna, wawancara, menent affordaces positif dan negatif, memprioritas strktr affordaces dan menggambar strktr affordaces. Setelah it ntk perbai desain penlis melak proses identifikasi faktor affordaces yang dilak menggna Affordace Sistem Matric (ASM). Pada tahap ini, nsr affordances pada setiap komponen sits web diidentifikasi sehingga komponen-komponen yang memiliki selisih affordances paling sedikit dapat diperbaiki. Hasil analisa dari ASM selanjtnya dibat strategi agar faktor affordances yang positif mapn negatif dapat diberi strategi. Untk pembatan desain bar ntk fitr donasi, strategi dibat langsng dari hasil affordances positif dan negatif yang didapat dari tahap wawancara. Dari strategi tersebt, dibatlah prototype antarmka yang mengandng affordances. Setelah prototype antarmka selesai dibat, penlis melak evalasi yang dilak berdasar komponen sability (efektivitas, efisiensi dan kepasan penggna). Pengkran efektivitas dan efisiensi menggna lembar observasi dimana ntk aspek efektivitas menggna fll scale scenario dan ntk efisiensi menggna pengkran wakt, sedan penilaian kepasan penggna menggna Post-Stdy System Usability Qestionare (PSSUQ). 3. HASIL DAN PEMBAHASAN 3.. Pengmplan Data dan Analisis 3.. Kelompok Penggna Menrt informasi yang didapat dari stakeholder, kelompok penggna pada sits web IFL Malang dibagi menjadi da kelompok yait stakeholder dan penggna mm. Selanjtnya, dilak wawancara dengan tiga dari masing-masing kelompok penggna ntk mendapat pernyataan mengenai sits web IFL Malang dan fitr donasi. Selrh hasil wawancara dengan penggna direkapitlasi dan dibat daftar pernyataan. Fakltas Ilm Kompter, Universitas Brawijaya

3 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter 76 Tabel. Daftar Affordances Positif pada Fitr Donasi ID 2 _3 _4 _5 _6 _7 _8 _9 _0 2 _3 _4 _5 _6 _7 responden yang Pernyataan menyata Stakeh Pengg older na Langkah donasi Pblikasi Baik Penjabaran program Terdapat Jenis Donasi Terdapat 3 Reward Donasi Terdapat 2 Kontak Yang Terdapat 3 Video Teaser Laporan Keangan Mendahlk 2 -an Kepercayaan Pendonasi Kemdahan Berdonasi Bkti Nyata Berdonasi Menjaga 3 Privacy Persasif Tidak g Unsr Tidak Tidak Membingn 3..2 Affordances positif dan negatif Jmlah Setelah mendapat pernyataan mengenai sits web IFL Malang dan fitr donasi, pernyataan-pernyataan tersebt dikelompo menjadi Affordances positif dan negatif seperti pada Tabel 2 dibawah ini : Tabel 2. Daftar Affordances Positif pada Sits Web IFL Malang ID Affordance Positif Refrensi AFP 6 _0 _6 AFP 2 nyaman _2 _5 _8 _2 AFP 3 3 AFP 4 Komnikatif _7 _4 _5 _8 AFP 5 si Akrat _9 _2 _3 AFP 6 _7 Tabel 3. Daftar affordance negatif pada sits web IFL Malang ID Affordance Negatif Refrensi AFN g Iklan _22 AFN 2 Membingn _4 _20 AFN 3 9 AFN 4 _2 AFN 5 g Aspek _23 Tabel 4. Daftar Affordance Positif pada Fitr Donasi ID Affordance Positif Referensi AFP_2_ Informasi _3 _4 _6 _7 _8 AFP_2_2 Dapat Dipercaya _9 _ AFP_2_3 Menjaga Privasi _2 AFP_2_4 Mdah Digna _0 AFP_2_5 Petnjk yang _ AFP_2_6 Pblikasi Menarik _2 _5 _4 AFP_2_7 Nayaman _3 Tabel 5. Daftar Affordance Negatif pada Fitr Donasi ID Affordance Negatif Refrensi AFN_2_ Membingn _7 AFN_2_2 g Unsr _6 AFN_2_3 _ Mengidentifikasi faktor Affordances Salah sat langkah dari affordance-based design ntk melak perbai antarmka Fakltas Ilm Kompter, Universitas Brawijaya

4 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter 762 sits web IFL adalah mengidentifikasi faktor affordances. Pada langkah ini terdapat da aktivitas tama yait mengidentifikasi komponen dari tampilan ntk antarmka dari sits web IFL Malang dan mengidentifikasi faktor terkait. Yang terpenting dari langkah ini yait bagaimana membat komponen dapat berasosiasi dengan affordances tertent sehingga dapat menem kelemahan dan kekatan dari komponen yang a dievalasi. Sesai dengan isi konten yang terdapat pada sits web IFL Malang, terdapat 3 komponen yait jdl, navigasi men, jdl artikel, pencarian, link social media, konten artikel, gambar artikel, deskripsi artikel, postingan poplar, tentang IFL Malang, gambar direksi, twitter widget dan navigasi tambahan. Hasil dari pengolahan data pada ASM adalah daftar komponen yang perl diperbaiki dan tidak perl diperbaiki, serta nilai affordance dari masingmasing komponen. Dari selisih presentase ASM, presentase selisih terbesar berada pada komponen twitter widget yait dengan presentase 66%. Karena strategi desain affordances memberi sgesti ntk memperbaiki komponen yang memiliki selisih presentase <= 50%, maka komponen jdl, navigasi men, jdl artikel, pencarian, link sosial media, konten artikel, gambar artikel, deskripsi artikel, postingan poplar, tentang IFL Malang, gambar direksi dan navigasi tambahan perl diperbaiki Mengidentifikasi strategi Affordances Untk perbai antarmka sits web IFL Malang yang telah mendapat daftar komponen yang hars diperbaiki, strategi desain affordances selanjtnya dibat. Strategi desain bersmber dari penelitian sebelmnya yait penelitian Park dan Song (202) dan beberapa mas yang diberi oleh responden saat melak wawancara. Untk fitr donasi, strategi affordances dibat berdasar affordances positif dan negatif yang didapat. Strategi desain ntk setiap komponen perbai antarmka sits web IFL Malang terlampir pada Appendix. Tabel 6. Strategi ntk Memperbaiki Affordance Kompone n Sits Web IFL Malang (%) Faktor Affordances Strategi Pencarian Link Sosial Media Deskripsi Artikel Postingan Popler Komnikatif Membingn si Akrat Membingn Komnikatif g Iklan Membingn Meleta kolom pencarian pada tempat yang mdah dilihat. Pasti besar navigasi sesai Pasti bahasa yang digna pada kolom pencarian mdah dimengerti. Beri konten yang benar tanpa kesalahan Pasti ntk membat mngkin Memasti kenyamanan visal Meleta kolom link sosial media pada tempat yang mdah dilihat Sederhana tata letak ntk mempermdah pemahaman Menggna sosial media yang benar-benar dimiliki Beri keterangan agar navigasi jelas Pasti ntk membat mngkin Memasti kenyamanan visal Pasti posisi deskripsi artikel tepat Sederhana tata letak ntk mempermdah pemahaman Menampil deskripsi artikel dengan font penlisan yang konsisten Menampil deskripsi artikel dengan font penlisan yang konsisten Pasti konten tidak mengandng iklan Menyedia deskripsi artikel yang mdah ntk dimengerti Pasti ntk membat mngkin Meleta Postingan Popler pada tempat yang mdah dilihat oleh pengnjng Pasti besar selrh konten sesai Fakltas Ilm Kompter, Universitas Brawijaya

5 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter 763 Navigasi Jdl Artikel Foto Direksi (8%) Komnikatif si Akrat Membingn g Aspek si Akrat Membingn efektif komnikatif program g iklan kak g aspek politik Pasti menggna tata yang rapih dan komnikatif Menggna isi konten yang sesai Menggna interaksi navigasi yang baik Memasti kenyamanan visal Menampil tiga postingan ter poplar bersifat senetral mngkin ke nsr politik Memasti interaksi navigasi baik Pasti besar navisigasi sdah sesai Pasti bagian-bagian dari navigasi memiliki tjan konten yang jelas Pasti sema fngsi navigasi berjalan dengan baik Pasti ntk membat mngkin Memasti kenyamanan visal Pasti layot bersih dan sederhana Pasti menggna yang komnikatif, konsisten dan menggna yang rapih Pasti ntk membat program yang dijelas pada konten terlihat nggl Hal yang ditlis tidak boleh mengandng iklan Memasti kenyamanan visal bersifat senetral mngkin ke nsr politik pasti layot efektif tambah interaksi visal Pasati setiap konten mencermin Pasti kenyamanan visal Artikel (8%) Tentang IFL Malang (8%) g Aspek Komnikatif si Akrat g Iklan Membingn g Aspek Komnikatif si Akrat Pasti besar gambar sesai bersifat senetral mngkin ke nsr politik Menampil konten berdasar kategori dan pasti layot efektif Pasti kenyamanan visal Pasati setiap konten mencermin Pasti menggna yang komnikatif dan font konsisten Pasti bahwa tjan dan visalisasi konten jelas Pasti ntk membat program yang dijelas pada konten terlihat nggl Pasti tidak mengandng iklan Pasti interaksi navigasi sesai Pasti kenyamanan visal Pasti layot bersih dan rapih bersifat senetral mngkin ke nsr politik pasti layot efektif dan leta deskripsi singkat di halaman tama agar mdah dilihat Pasti kenyamanan visal Pasati setiap konten mencermin Pasti menggna yang komnikatif, font konsisten dan menggna yang rapih Menampil keselrhan layot dengan dikelompo menjadi beberapa area Pasti ntk membat program yang dijelas pada konten terlihat nggl Fakltas Ilm Kompter, Universitas Brawijaya

6 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter 764 Men (24%) Gambar Artikel (34%) Jdl (42%) g Iklan Membingn g Aspek Komnikatif g Aspek si Akrat g Iklan Pasti konten tidak mengandng iklan Pasti interaksi navigasi baik Pasti kenyamanan visal Pasti tidak ada konten yang tidak sesai bersifat senetral mngkin ke nsr politik Dimohon ntk ditempat pada posisi yang mdah dilihat penggna Pasti interaksi navigasi baik dan layot efektif Pasti membat visalisasi ntk mencermin organisasi Menggna yang mdah dipahami oleh penggna Gna visalisasi yang membembat program terlihat nggl Pasti ntk membat mngkin Pasti tidak ada konten yang tidak sesai bersifat senetral mngkin ke nsr politik Pasti posisi gambar tepat Pasti tjan dari gambar jelas Pasti ntk menampil gambar yang membat aktifitas terlihat nggl Pasti gambar tidak mengandng hal selain dokmentasi dari organisasi Memasti kenyamanan visal Ditempat di tempat yang mdah dilihat oleh penggna Pasti warna jdl menarik dan besar font sesai Komnikatif g Aspek Diharap jdl yang dibat memvisalisasi organisasi Pasti menggna yang komnikatif, konsisten, dan menggna tata yang rapih Pasti ntk membat hal yang yang gambar terlihat nggl Pasti tidak ada konten yang tidak sesai bersifat senetral mngkin ke nsr politik Tabel 7 mennj strategi ntk fitr donasi dapat dari affordance positif dan negatif yang telah ditem pada tahap sebelmnya. Strategi affordance yang didapat berasal dari mas penggna dan refrensi penelitian sebelmnya. Berikt adalah stategi desain Affordances ntk fitr donasi : Tabel 7. Stategi Desain Affordances Fitr Donasi ID Faktor Strategi Affordance SDD Informasi g informasi berpa penjelasan program, video yang mencermin program, kontak yang jelas, jenisjenis donasi dan nama pendonasi SDD 2 Dapat Dipercaya Perlnya transparasi keangan pada setiap donasi seperti menampil laporan keangan ntk program yang sdah dijalan ntk menjaga kepercayaan donasi dan jga diberi bkti Fakltas Ilm Kompter, Universitas Brawijaya

7 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter 765 saat berdonasi SDD 3 Menjaga Privasi Tidak menyalah gna data pendonasi dan menjaga data pendonasi tetap aman SDD 4 Mdah Pengoperasian SDD 5 SDD 6 Digna Petnjk yang Pblikasi Menarik yang sederhana Memberi arahan yang jelas agar penggna tidak salah mengoperasi Cara ntk berdonasi dileta di beberapa tempat sebagai sarana pblikasi SDD 7 Pasti kenyamanan visal SDD 8 Membingn Navigasi diperjelas Gambar. Halaman Artikel SDD 9 SDD 0 g Unsr Menjaga setiap konten tetap netral Pasti layot bersih dan rapih Hasil strategi yang didapat a digna ntk rekomendasi tampilan antarmka penggna di tahap selanjtnya Hasil Rekomendasi Desain Antarmka Hasil strategi desain yang didapat pada tahap sebelmnya di terap dalam ide desain, dengan mengac pada beberapa atran desain jga. Sehingga didapatlah hasil rekomendasi perbai desain antarmka sits web IFL dan desain antarmka fitr donasi sebagai berikt : Gambar 2. Halaman Home Fakltas Ilm Kompter, Universitas Brawijaya

8 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter 766 Gambar 5. Halaman Form Donasi Gambar 3. Halaman Abot IFL Malang Gambar 6. Halaman Fitr Donasi Gambar 4. Halaman Rincian Artikel 3.3. EVALUASI DESAIN BARU Aspek sability yang dilak evalasi pada penelitian ini yait efektivitas, efisiensi dan kepasan penggna. Pada aspek efektivitas, digna task scenario jenis Fll Scale Task Scenario. Pada test scenario ini, penlis memberi beberapa tgas kepada responden yang telah dissn berpa scenario yang hars dilak. Aspek efisiensi diji dengan cara memberi task scenario yang sama pada responden. Saat responden melak setiap task, penlis mengkr wakt yang dibth Fakltas Ilm Kompter, Universitas Brawijaya

9 Jrnal Pengembangan Teknologi Informasi dan Ilm Kompter 767 oleh responden ntk melak setiap task scenario menggna stopwatch. Aspek kepasan dinilai dengan cara memberi kesioner yang berisi 9 pertanyaan. Nilai efektivitas dari tampilan antarmka bar yait 98,4% dengan nilai maksimal 00%. Nilai rata-rata wakt ntk pengerjaan task pada aspek efisiensi perbedaannya tidak terlal signifi. Pada aspek kepasan penggna, selrh item yang terdapat pada kesioner PSSUQ mendapat nilai sangat baik. 4. KESIMPULAN Pada men home, what s new, dan abot IFL Chapter Malang ditem 6 affordances positif dan 5 affordances negatif serta 3 komponen. Hasil analisis affordances pada affordances strctre matric (ASM) menghasil pernyataan bahwa 2 komponen dari 3 komponen pada sits Web IFL Malang perl diperbaiki dari aspek affordances. Hasil dari perbai rancangan antarmka penggna dengan metode Affordance- based design menghasil desain bar yang tidak hanya melihat dari sisi positif nya tetapi jga sisi negatif dari sat affordances dan sangat mencermin penggna. Perancangan desain jga didkng oleh beberapa design gideline dari Research-Based Web Design & Gidelines.. Pada fitr donasi, ditem 7 affordances positif dan 3 affordances negatif. hasil perancangan antarmka yang didasar pada strategi desain yang dihasil membat metode Affordance- based design menghasil desain bar yang tidak hanya melihat dari sisi positif nya tetapi jga sisi negatif dari sat affordances dan sangat mencermin penggna. Perancangan desain jga didkng oleh gideline dari Research-Based Web Design & Gidelines. Hasi evalasi sability pada rekomendasi antarmka sits web IFL Malang menghasil presentase efektivitas 98,4% dari nilai maksimal 00% yang menggambar bahwa persentase tersebt bisa dinilai baik. Terdapat da flow ntk mengerja task ntk melihat informasi mengenai IFL Malang. Hasilnya, rensponden menggna flow keda ntk mencapai tjan tersebt dan 5 responden menggna flow pertama. Untk task melihat langkah donasi, terdapat da flow jga ntk mencapai tjan tersebt dan sat responden menggna flow keda dan sisanya menggna flow pertama. Untk penilaian aspek efisiensi, terdapat 9 task yang dikerja oleh 6 responden dan wakt masing-masing responden ntk mengerja task tidak terpat jah. Untk aspek kepasan penggna, sema penilaian item termask kedalam katogori sangat baik. Sehingga ntk aspek efektivitas, efisiensi dan kepasan penggna mempnyai hasil yang bisa dikata baik. SUMBER PUSTAKA/RUJUKAN Maier, J. R. A., & Fadel, G., M., Affordace-based design methods for innovative design, redesign and reverse engineering. Research in Engineering Design, 20(4), [pdf] Tersedia di : < nathan_maier/pblication/ _af fordacebased_design_methods_for_innov ative_design_redesign_and_reverse_engi neering/links/570baca408aea66083b0cb 5.pdf> [2 Febrari 207]. Maier, J., R., A., 20. Affordace based design: Theoretical fondation and practical applications. Saarbrücken, Germany: VDM Verlag. Nielsen,J., 200. Sccess Rate: The Simplest Usability Metric. [pdf] < ss-rate-the-simplest-sability-metric/> [5 Febrari 207] Park, H., & Song,H.,D., 205. Make E-Learning Effortless! Impact of a Redesigned User Interface on Usability throgh the Application of an Affordace Design Approach. [pdf] Edcational Technology & Society, 8 (3), Tersedia di : < pdf >[2 Febrari 207]. Jaklevic, M.,C., Charity finances health care: Donors are opening wallets to pay for million-dollar projects. Modern Healthcare, Vol. 30, pp. 26. Fakltas Ilm Kompter, Universitas Brawijaya