Evaluasi dan Perbaikan Desain Antar Muka Pengguna Situs Talangin.com Menggunakan Pendekatan Human Centered Design (HCD)
Vol. 2, No. 12, Desember 2018, hlm. 6618-6626 http://j-ptiik.ub.ac.id
Evaluasi dan Perbaikan Desain Antar Muka Pengguna Situs Talangin.com
Menggunakan Pendekatan Human Centered Design (HCD)
1 2 3 Natasha Syahirsah , Ismiarta Aknuranda ,Himawat AryaditaProgram Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya 1 2 3 Email: syahirsah.natasha@gmail.com, i.aknuranda@ub.ac.id, himawat@ub.ac.id
Abstrak
Talangin.com adalah sebuah organisasi yang bergerak di bidang financial technology yang memanfaatkan situs web sebagai jendela utama untuk kegiatan pembelian yang dilakukan antara pembeli dan penjual dari e-commerce lain. Kegiatan proses bisnis yang ada pada situs web Talangin adalah pendanaan pembelian yang dilakukan oleh Talangin yang nantinya akan dibayarkan oleh pembeli kepada pihak talangin dalam bentuk cicilan. Talangin yang masih dalam pengembangan tahap kedua saat ini lebih terfokus pada pemanfaatan teknologi dengan PHP dan belum memperhatikan
usability nya. Selain itu, masih terdapat perdebatan dalam interaksi pengguna dan sistem yang ada pada
situs Talangin mengenai kesesuaian interaksinya dengan syariat Islam. Berdasarkan permasalahan tersebut, maka pada penelitian ini dilakukan evaluasi dan desain antarmuka situs web Talangin menggunakan pendekatan Human Centered Design (HCD). HCD merupakan sebuah metode yang melibatkan manusia sebagai pengguna dalam setiap tahapan proses perancangan. Tahap penelitian ini adalah menentukan konteks penggunaan, menentukan persyaratan pengguna, menghasilkan solusi desain, dan mengevaluasi desain. Hasil dari penelitian ini adalah evaluasi dan desain prototipe yang telah dibuat yang kemudian dievaluasi dengan pendekatan Focus Group Discussion (FGD) dan setelah itu dikonfirmasikan dengan pihak Talangin, berdasarkan hasil konfirmasi tersebut hasil penelitian ini telah mengikuti aturan usability dan sesuai dengan syariat Islam.
Kata kunci: situs web talangin, human centered design, usability, evaluasi, focus group discussion.
Abstract
Talangin.com is an organization engaged in the field of financial technology that utilizes the
website as the main window for purchases made between buyers and sellers from other e-commerce.
How to do business on Talangin website is the use of funds made by Talangin which will be discarded
by the buyer to the gutters in the form of repayments. Talangin is still in the development stage is
currently more focused on the use of PHP and not focusing to usability. In addition, there is still an
answer in the interaction of users and systems that exist on Talangin sites from the suitability of their
interaction with Islamic Shari'a. Based on the poverty, then at this time carried out the evaluation and
design website Talangin using Human Centered Design approach (HCD). HCD is a method that
involves humans in the process of designing. The research phase is to determine the use, determine the
user, dig the design, and anticipate the design. The results of this study are evaluations and designs
that have been evaluated with the Focus Group Discussion (FGD) approach and afterwards
confirmed with the Talangin, based on the results of the research that have been in accordance with
the usefulness and in accordance with Islamic Shari'a.Keywords: Talangin website, human centered design, usability, evaluation, focus group discussion.
talangin. Situs web Talangin yang masih dalam 1. pengembangan tahap kedua yang lebih terfokus
PENDAHULUAN
pada pemanfaatan teknologi dengan PHP dan Talangin sebagai organisasi yang bergerak belum mementingkan usabilitynya pada saat dalam bidang financial technology khusus ini. mahasiswa masih memanfaatkan teknologi situs
Kemudian, sistem yang ada pada situs web sebagai jendela antara pembeli dan pihak Talangin mengenai kesesuaian interaksinya
Fakultas Ilmu Komputer Universitas Brawijaya
6618 dengan syariat islam atau tidak masih menjadi pengguna yang berdasarkan dengan perdebatan. Oleh karena itu, untuk interaksi kebutuhan stakeholder dan pengguna antara sistem dan pengguna yang yang ergonomis. mengedepankan kenyamanan pengguna maka dilakukan evaluasi dan perbaikan terhadap situs
3. Menghasilkan solusi desain untuk yang sesuai dengan usability dan syariat islam. memenuhi persyaratan pengguna Hal ini diharapkan dapat berpengaruh kepada Membuat solusi desain berdasarkan kredibilitas perusahaan dan meningkatnya tahap-tahap yang dilakukan jumlah pengguna pada situs web sehingga sebelumnya yang dibuat sesuai kultur profit perusahaan diharapkan mengalami yang ada pada lingkungan perusahaan. peningkatan.
Berdasarkan uraian di atas maka rumusan 4.
Evaluasi desain terhadap masalah pada penelitian ini adalah persyaratan. bagaimanakah hasil evaluasi awal pada situs Melakukan evaluasi terhadap web Talangin saat ini lalu bagaimanakah kesesuaian desain dengan persyaratan rancangan perbaikan tampilan antarmuka pada yang telah dikumpulkan. situs web Talangin menggunakan metode HCD, kemudian bagaimanakah perbandingan
3. METODE PENELITIAN
antarmuka antara situs web Talangin saat ini
3.1 Human Centered Design
dengan rancangan sesudah perbaikan, dan bagaimanakah hasil evaluasi akhir pada
prototype rancangan perbaikan antarmuka pengguna situs web.
Tujuan dari penelitian ini untuk mengevaluasi
usability antarmuka situs web Talangin
menggunakan
ISO 9241-210,kemudian merancang perbaikan antarmuka pengguna situs web Talangin menggunakan pendekatan HCD, lalu membandingkan antara nilai usability evaluasi awal dan evaluasi akhir rancangan antarmuka situs web Talangin, dan mengevaluasi usability antarmuka dan interaksi dari rancgan perbaikan situs web Talangin.
2. LANDASAN KEPUSTAKAAN
2.1 Human Centered Design
Human Centered design merupakan sebuah
pendekatan desain yang berpusat pada manusia Gambar 1. Tahapan Penelitian yang nantinya akan sesuaikan ke dalam proses desain dan pengembangan yang berbeda sesuai
3.1.1 Menentukan Konteks Penggunaan dengan suatu konteks (ISO 9241, 2010).
Tujuan dari tahap ini adalah menentukan Berikut ini adalah aktivitas-aktivitas yang dan mengevaluasi awal konteks terdapat pada ISO 9241-210, adalah: penggunaan dan mengevaluasi awal situs
1. Memahami dan menentukan konteks web Talangin. Komponen usability yang
penggunaan.
digunakan adalah learnability, efficiency, Konteks penggunaan meliputi
error dan satisfaction. Pada tahap ini akan
pengguna dan stakeholder yang dilakukan studi literature dan wawancara berhubungan dengan usulan terhadap stakeholder dan evaluator pengembangan. Konteks penggunaan bisa berupa saja yang mempengaruhi suatu sistem.
3.1.2 Menspesifikasikan Persyaratan Pengguna 2. Menspesifikasikan persyaratan
Tujuan dari tahap ini untuk mendeskripsikan
pengguna
tujuan yang ada dan langkah-langkah dalam Menentukan persyaratan dari mencapainya. Task analysis akan digunakan pada tahap ini yang menjabarkan tugas-tugas pengguna yang berdasarkan hasil wawancara pada saat evaluasi.
3.1.3 Menghasilkan Solusi Desain
Perancangan antarmuka pengguna akan dirancang ketika pada tahap ini menggunakan
Administrator web Pihak Talangin yang bertugas untuk menerima
Kelompok Pengguna Keterangan Pembeli Semua mahasiswa di Indonesia.
Tabel 2. Karakteristik pengguna atau kelompok pengguna
4.1.3 Karakteristik Pengguna atau Kelompok Pengguna
Investor Salah satu pemegang saham Talangin yang berinvertasi pada situs Talangin
OJK Adalah lembaga yang berwenang dalam pengawasan, pengaturan, penyidikan dan pemeriksaan terhadap Talangin.
Administrator web Talangin Individu atau organisasi yang memiliki hak terhadap sistem.
Kelompok Pengguna Keterangan Pembeli barang Semua mahasiswa Indonesia.
Tabel 1. Kelompok Stakeholder
Pengguna merupakan orang yang berinteraksi dengan suatu produk. Sedangkan stakeholder adalah individu atau organisasi yang memiliki kepentingan dalam sebuah sistem atau dalam hal lainnya yang sesuai dengan kebutuhan mereka (ISO 9241, 2010). Di bawah ini kelompok pengguna dan stakeholder yang ditentukan oleh penulis:
4.1.2 Para Pengguna dan Kelompok Stakeholder
Gambar 2. Cicil
b. Cicil Cicil juga merupakan situs web yang bergerak pada bidang pendanaan yang sistemnya mirip dengan Talangin. Target situs ini adalah mahasiswa. Cicil membeli barang yang dicari oleh pembeli kemudian menjual kepada pembeli dengan margin keuntungan kemudian pembeli membayar dengan cara menyicil.
Gambar 2. SyarQ
Situs ini merupakan fintech yang menerapkan sistem syariah. Sistem syariah pada situs web ini adalah akad murabahah yang sesuai dengan aturan yang ada pada islam. Cara kerjanya adalah syarQ membeli barang yang diinginkan oleh pembeli kemudian pembeli membeli kepada syarQ dengan cara menyicil.
Berikut ini adalah situs web yang serupa dengan Talangin adalah: a. SyarQ
Setelah solusi desain dibuat maka tahap selanjutnya adalah mengevaluasi kesesuaian desain sudah sesuai dengan kebutuhan pengguna atau belum dengan menggunakan pendekatan FGD.
3.1.4 Mengevaluasi Desain
yang merepresentasikan situs web yang sebenarnya. Tahap ini memiliki tujuan yaitu untuk melihat interaksi yang terjadi antara pengguna dan sistem.
software yang bernama adobe xd dengan hasil
4. MENENTUKAN KONTEKS PENGGUNAAN DAN MENSPESIFIKASIKAN PERSYARATAN PENGGUNA
4.1 Menentukan Konteks Penggunaan
4.1.1 Situs Web Fintech Serupa
data-data secara online. online melaluo situs talangin. Dari stakeholder
4.1.4 Hasil Wawancara dengan Salah
menginginkan Satu Founder di Talangin. adanya notifikasi
Wawancara ini dilakukan dengan salah satu ketika username dan
passport yang
yang menjadi co-founder di Talangin bagian
dimasukkan salah,
produk dan pemasaran tujuannya untuk
notifikasi ketika foto
mendapatkan gambaran mengenai
ktp telah di unggah,
persyaratan. Berikut ini bentuk-bentuk
panah yang menunjukkan untuk
persyaratan yang diajukan ketika wawancara:
scroll ke bawah atau memindahkan
Tabel 4. Persyaratan wawancara stakeholder
navigasi ke bar
ID Persyaratan Hasil Wawancara halaman pertama.
W Business Tujuan dari _1 Requirements aplikasi ini adalah
4.1.5 Wawancara dengan pengguna Menentukan untuk mendukung tujuan dan masalah finansial mahasiswa
Pada wawancara ini dilakukan tes uji
apa yang ingin yang ada di usability kepada
5 pengguna yang
diselesaikan oleh Indonesia. Masalah
sebelumnya belum pernah memakai situs
stakeholder dengan yang diselesaikan
Talangin. Pengujian direkam dengan
adanya produk ini dengan adanya produk ini adalah menggunakan software khusus bernama bisa membantu silverback. Peserta uji mengerjakan scenario pembiayaan
yang sebelumnya diberikan. Berikut ini
mahasiswa Indonesia
adalah hasil wawancara tersebut:
yang membeli barang dari eCommerce
Kesimpulan dari wawancara yang dilakukan manapun. dengan peserta evaluator adalah sebagai
W User Pengguna dapat
berikut:
_2 Requirements membeli barang 1.
Posisi harga di dekatkan dengan
Deskripsikan yang dirasa harganya bagaimana ekspetasi belum terjangkau uang muka. pengguna dan dengan cara menyicil 2.
Menu log out berbentuk drop
bagaimana mereka barang tersebut down pada pojok kanan atas akan berinteraksi melalui situs ini.
dengan produk. Pengguna mencari
3. Penjelasan cara kerja diletakkan ke
navbar paling atas
barang pada
e- commerce lain
4. Navbar dipindahkan ke atas dan
kemudian
fitur chat online dibuat lebih
mengajukan
mencolok
permohonan cicilan 5.
Tambahkan bukti transaksi dan secara online pada situs talangin yang metode pembayaran akan divalidasi oleh pihak talangin.
4.1.6 Tujuan dan tugas pengguna Setelah itu jika
Tugas pengguna pada talangin adalah ketika
tervalidasi maka
pengguna berhasil dalam membeli barang
talangin akan melakukan validasi
yang diinginkan kemudian melunasi
offline dengan pembayaran cicilan. wawancara dan
4.1.6.1 Kondisi sekarang verifikasi identitas
Pengguna meng-copy paste url dari e-
serta membuat surat perjanjian dengan commerce lain kemudian Talangin akan pengguna untuk
langsung menampilkan jumlah harga yang
melunaskan cicilan harus dicicil oleh pengguna. W Produk bekerja
System
4.1.6.2 Masalah _3 Requirements dengan cara
Masalah yang ada pada Talangin sekarang Dokumen pengguna mencari terstruktur yang barang pada e-
adalah desain antarmuka yang tidak rapih,
menjabarkan commerce lain dan
verifikasi identitas yang dilakukan secara
deskripsi terperinci mengajukan online sehingga kurang efisien dan efektif, dari layanan sistem permohonan secara
4.1.6.3 Kondisi yang diharapkan
Kesesuaian desain dengan best practice
3.2.1 Tidak dilakukan wawancara tatap muka
2. Menyimpan data profil
1.3 Menghapus data profil
yang ada, penelitian ini didukung oleh aturan usability dan guidelines-nya.
1.2 Meng-update data profil
3.1 Pengajuan berhasil
3.1.1 Melakukan wawancara secara tatap muka
5.1 Usulan Perbaikan Desain Antarmuka Pengguna
3.2 Pengajuan gagal
4.1.7 Lingkungan sistem
4. Membayar uang muka
4.1 Konfirmasi pembayaran uang muka
5. Barang dibeli talangin dan langsung dikirim ke alamat pemohon
5.1 Barang sampai ke pengguna
5.2 Barang tidak sampai ke pengguna
5.2.1 Talangin claim ke e- commerce
6. Bayar angsuran perbulan sampai lunas Tujuan
2. Mengedit profil Task
4.2 Menspesifikasikan persyaratan pengguna
4.2.1 Persyaratan fungsional dan non- fungsional
5. SOLUSI DESAIN DAN EVALUASI DESAIN
Di bawah ini merupakan interaksi antara pengguna dan sistem yang direpresentasikan melalui gambar proses di bawah ini:
5.1.1 Interaksi pengguna dan sistem
1. Pengguna dapat mencari barang yang diinginkan pada e- commerce lain
Karakteristik Lingkungan yang dapat berpengaruh: Tabel 11. Karakteristik lingkungan sistem
Karakteristik Keterangan Perangkat keras Seperti komputer, laptop atau samartphone untuk mengakses situs web Perangkat lunak Browser chrome dan mozilla
Kebutuhan lain untuk mengakses internet Koneksi internet diperlukan situs web untuk terhubung dengan server dan memerlukan jaringan internet, modem atau wi-fi.
Sistem transaksi yang sesuai dengan syariat islam Transaksi murabahah yang telah disahkan oleh MUI
Penulis membatasi persyaratan fungsional di bawah ini untuk membeli barang dan mengedit profil:
Tabel 13. Persyaratan fungsional dan non- fungsional
Kebutuhan fungsional
2. Pengguna dapat mengajukan permohonan cicilan
1.1 Menambah data profil
3. Pengguna dapat memilih jenis pengiriman
4. Pengguna dapat mengedit profil
5. Pengguna dapat menggunakan fitur chat online jika kesulitan
Kebutuhan non-fungsional
1. Tata letak fitur yang rapih dan sesuai dengan aturan usability .
2. Sistem jual-beli yang sesuai dengan transaksi murabahah.
3. Cara kerja sistem yang mudah untuk dipelajari.
1. Melengkapi data profil
4.2.2 Task analysis
3. Mengajukan permohonan cicilan
2.2 Memasukkan email
2. Masuk ke talangin
1. Mencari barang yang ingin dibeli
1. Membeli barang Task
Tujuan
Tabel 12. Task analysis
Analysis ), karena paling banyak digunakan
metode HTA ( Hierarchical Task
Task analysis yang diterapkan adalah
2.2 Memasukkan kata sandi Gambar 3. BPMN Alur Pemesanan Gambar 4. BPMN Mengedit Profil
Berikut ini adalah panduan dalam merancang desain berdasarkan Research-
Based Web Design & Usability Guidelines
adalah sebagai berikut:
ID Aturan Desain Proses desain dan evaluasi GDL_1 Memahami dan sesuai dengan ekspetasi user Mengoptimalkan pengalaman pengguna GDL_2 Jangan memiliki jendela atau grafik yang tidak diinginkan 'pop-up' untuk pengguna
Aksesibilitas GDL_3 Jangan gunakan warna saja untuk menyampaikan informasi Beranda GDL_4 Tampilkan semua opsi utama di beranda GDL_5 Membuat kesan pertama positif pada situs GDL_6 Komunikasikan nilai dan tujuan situs web GDL_7 Pastikan beranda tampak seperti beranda Tata letak halaman GDL_8 Hindari tampilan yang berantakan GDL_9 Tempatkan item penting secara konsisten GDL_10 Mengoptimalkan densitas layar
Navigasi GDL_11 Berikan umpan balik di lokasi pengguna Menggulir dan halaman GDL_12 Menghilangkan menggulir secara horisontal Headings, judul, dan label GDL_13 Gunakan label kategori yang jelas Tautan GDL_14 Gunakan label tautan yang bermakna GDL_15 Sesuaikan nama tautan dengan halaman tujuan GDL_16 Gunakan teks untuk tautan
Penampilan teks GDL_18 Gunakan teks hitam pada latar belakang yang polos dan kontras yang tinggi GDL_19 Pastikan konsistensi visual
GDL_20 Gunakan teks tebal secara minimal Daftar GDL_21 Urutkan elemen untuk memaksimalkan kinerja pengguna GDL_22 Tempatkan item penting di bagian atas daftar Kontrol berbasis layar (widget) GDL_23 Label tombol tekan dengan jelas GDL_24 Label bidang entri data jelas GDL_25 Minimalkan entri data pengguna Grafik, gambar, dan multimedia GDL_26 Gunakan gambar latar belakang sederhana GDL_27 Sertakan logo
5.1.2 Usability guidelines
5.1.3 Solusi desain dan perbandingannya dengan desain lama.
Berikut ini merupakan solusi desain yang berupa high fidelity berikut dengan perbandingannya dengan desain yang sebelumnya.
1. Halaman Beranda
Halaman ini dibuat berdasarkan usability
guidelines dan berdasarkan wawancara kepada
evaluator yang menginginkan navbar dan cara kerja dipindahkan ke atas Gambar 8. Halaman Log out
Gambar 5. Halaman Beranda
3. Halaman Pencarian barang
Halaman ini didesain agar pembeli tetap melakukan pencarian barang pada situs yang sama (Talangin) sehingga tidak perlu mencari pada situs lain
Gambar 6. Halaman Beranda lama
2. Halaman Log in
Berikut ini merupakan halaman yang didesain menjadi pop up agar pembeli tidak berpindah ke halaman baru dan berada pada halaman yang sama.
Gambar 9. Halaman Pencarian Barang
4. Halaman Metode pembayaran
Gambar 7. Halaman Log in Gambar 10. Metode Pembayaran rapih.
Gambar 11. Metode Pembayaran 1 Gambar 15. Halaman Data Pribadi Desain Baru
Gambar 12. Metode Pembayaran 2 Gambar 16. Halaman Data Pribadi Desain
5. Halaman Pengajuan Permohonan Cicilan
Lama
Barang
Di bawah ini merupakan desain halaman
7. Halaman data profil calon pembeli
pengajuan cicilan, perbedaan dengan desain Berikut ini adalah rancangan baru yang lama ialah penulis mengganti uang muka diusulkan penulis untuk web administrator menjadi Hamish Jiddyah sesuai dengan syariat yang pertama adalah daftar calon pembeli islam sebagai bentuk keseriusan pembeli. yang mengajukan permohonan cicilan dan yang kedua adalah data profil calon pembeli.
Gambar 13. Halaman Form Permohonan Gambar 14. Halaman Form Permohonan Lama
Gambar 17. Halaman Daftar Calon Pembeli
6. Halaman Profil
Tidak banyak berubah pada desain rancangan profil yang baru, penulis hanya mengubah warna dan tampilan agar lebih
Halaman metode Pembayaran, Halaman pengajuan permohonan cicilan barang, serta halaman data profil calon pembeli.
3. Untuk tampilan yang digunakanoleh
pengguna, penulis mengganti nama uang muka pada pengajuan permohonan menjadi Hamish Jiddyyah, menu edit profil yang di perbaiki sedemikian rupa, sedangkan untuk administrator web penulis merancang antarmuka halaman seleksi untuk calon pembeli yang pengajuan permohonannya diterima di mana web admin dapat melihat profil calon pembeli dan melakukan video call untuk wawancara face to face secara online.
4. Pada hasil evaluasi akhir dilakukan dengan Gambar 18. Halaman Profil Calon Pembeli pendekatan FGD kurang lebih 60 menit.
Lokasi diskusi dilakukan pada gazebo
5.3 Evaluasi desain
filkom dengan penulis sebagai moderator, Berikut ini adalah hasil evaluasi desain yang hasil FGD kemudian di sepakati oleh dilakukan dengan FGD kepada 6 pengguna bersama yaitu: stakeholder dan evaluator yang dilaksanankan di Gazebo FILKOM dengan
6. DAFTAR PUSTAKA
penulis sebagai moderator. Hasil tersebut International Standards Office, 2010. ISO 9241 adalah:
- – 210 Human-centered Design for 1.
Pada halaman pengajuan permohonan Interactive Systems . cicilan sebaiknya dimasukkan sumber e-
Pressman, R., 2010. Software Engineering: A commerce barangnya.
Practitioner’s Approach, Seventh 2. Pada form log – in ditambahkan pilihan Edition. McGraw-Hill, New York.
masuk melalui akun media sosial lainnya Shepherd, A. 2001. Hierarchical task analysis. seperti google, facebook, atau yahoo.
Taylor & Francis, New York.
3. Pada form jenis kelamin sebaiknya diberi pilihan saja laki Rubin, J., Chisnell, 2008. Handbook of
- – laki atau perempuan 4.
Usability Testing. Wiley Publishing,
Bahasa yang digunakan lebih konsisten dan sesuai EYD. inc, Indiana.
5. Sebaiknya lebih banyak ditambahkan gambar icon yang menarik.
5. KESIMPULAN
1. Hasil evaluasi awal pada situs talangin adalah beberapa peserta yang kebingungan terhadap letak menu navigasi, tata letak fitur yang berantakkan menyebabkan peserta kesulitan memahami cara kerja situs, interaksi antara pengguna dan sistem yang mengarah ke miskonsepsi terhadap penggunannya pada syariat islam.
2. Terdapat beberapa halaman tambahan yang ditambahkan pada prototype yaitu: fitur
log out, halaman pencarian barang,