Fakultas Ilmu Komputer
Universitas Brawijaya
2916
Perancangan User Experience Menggunakan Metode Human Centered
Design Pada Aplikasi Mobile Portal Berita Tabloidjubi
Naufal Aji Dewananto1, Herman Tolle2, Hanifah Muslimah Az-Zahra3 Program Studi Teknik Informatika, Fakultas Ilmu Komputer, Universitas BrawijayaEmail: 1naufalaji.public@gmail.com, 2emang@ub.ac.id, 3hanifah.azzahra@ub.ac.id
Abstrak
Tabloidjubi merupakan website portal berita yang berasal dari pulau papua dan memuat berita nasional. Peningkatan penggunaan smartphone membuat pihak tabloidjubi mengembangkan aplikasi berbasis perangkat bergerak. Salah satu aspek penting dari pengembangan aplikasi perangkat bergerak adalah user experience yang berguna untuk keberhasilan serta kepuasan pengguna dalam menggunakan aplikasi. Penelitian ini bertujuan untuk merancang user experience dari aplikasi portal berita tabloidjubi berdasarkan permasalahan yang ditemukan pada evaluasi tahap awal. Evaluasi yang dilakukan menggunakan metode heuristic evaluation dengan expert evaluator untuk mengidentifikasi masalah yang ada pada aplikasi. Setelah permasalahan diidentifikasi pada evaluasi tahap pertama maka akan dilakukan perancangan userexperience menggunakan metode HumanCenteredDesign yang didasarkan pada temuan masalah. Permasalahan yang ditemukan pada evaluasi awal diantaranya adalah kategorisasi yang rumit dan tidak adanya fungsi pengguna. Terdapat 25 temuan masalah pada evaluasi heuristik tahap pertama. Pada evaluasi kedua ditemukan lebih sedikit permasalahan dengan jumlah 5 permasalahan yang berbeda dengan temuan permasalahan pada evaluasi pertama. Dengan demikian permasalahan pada evaluasi pertama berhasil diperbaiki. Hasil dari penelitian adalah identifikasi dan analisis masalah usability dan rekomendasi rancangan untuk perbaikan lebih lanjut berupan high-fidelity prototype sebagai gambaran solusi.
Kata kunci: User Experience, Human Centered Design, Heuristic Evaluation, Usability Testing.
Abstract
Tabloidjubi is a web based news portal originated from Papua Island that publishes National and International news. The increasing of smartphone usage makes Tabloidjubi developed a mobile application. One of the most important aspects of mobile application development is user experience which is useful for user success and user satisfaction when using the application. This research intends to design Tabloidjubi’s user experience based on the problems found in the first evaluation. Evaluation method that carried out in this research is heuristic evaluation. The designing of user experience using human centered design method will be held after the problems from the first evaluation are identified. Some of problems found on the first evaluation are intricate categorization and the absence of user features. There is 25 total problems found in the first evaluation. On the second evaluation there is less problems found with total of 5 different problems that differ from the first problems found in the first evaluation. Thus, the problems found in the first evaluation have been successfully solved. The outcome of this research are identification and analysis of the usability problems and advanced design recommendation in the form of high-fidelity prototype as the representation of the given solution.
Keywords: User Experience, Human Centered Design, Heuristic Evaluation, Usability Testing.
1. PENDAHULUAN
Tabloidjubi merupakan portal berita berbasis web yang berasal dari pulau papua. Melihat perkembangan smartphone yang semakin meningkat, pihak tabloidjubi
mengembangkan aplikasi berbasis perangkat bergerak seperti portal berita ternama lainnya seperti Metro TV dan CNN Indonesia. Namun, karena aplikasi yang dikembangkan masih dalam fase awal pengembangan maka aplikasi tersebut masih belum dirilis ke publik seperti aplikasi kepemilikan Metro TV atau CNN
Indonesia.
Salah satu aspek penting dalam kesuksesan aplikasi perangkat bergerak adalah user experience. Namun, dalam praktiknya masih ada beberapa aplikasi portal berita khususnya yang kurang memperhatikan aspek tersebut. Berdasarkan survey pada Google Playstore masih terdapat komentar negatif terkait user experience pada aplikasi portal berita serupa. Untuk menghindari komentar terkait user experience yang kurang baik maka diperlukan perbaikan atau perancangan menggunakan Human Centered Design serta evaluasi terkait usability aplikasi untuk menemukan masalah usability pada aplikasi (Anggitama, Tolle, & Az-Zahra, 2018). Salah satu metode evaluasi usability adalah dengan menggunakan Heuristic Evaluation (HE). Metode Heuristic Evaluation adalah metode evaluasi yang menggunakan 10 prinsip umum yang digunakan untuk menguji usability suatu sistem atau aplikasi. Heuristic evaluation meripakan metode evaluasi yang melibatkan expert dengan jumlah kecil sebagai evaluator (Nielsen, Finding Usability Problems Through Heuristic Evaluation, 1992).Hasil dari evaluasi tahap awal akan dijadikan acuan perbaikan pada proses perancangan selanjutnya menggunakan metode human centered design.
Human centered design merupakan metode untuk merancang suatu produk yang berfokus pada penggunanya (ISO 9241, 2018). Proses human centered design terbagi menjadi empat aktifitas utama dalam prosesnya. Dimana semua proses yang ada dalam metode human centered design akan berfokus ke pengguna. Ada empat tahap utama dari human centered design yaitu pemahaman konteks penggunaan, lalu proses spesifikasi kebutuhan pengguna yang mana kebutuhan ini didapat dari hasil evaluasi tahap awal. Ketiga adalah perancangan desain solusi dan terakhir adalah evaluasi terhadap desain solusi yang telah dibuat
Evaluasi terakhir akan menggunakan metode yang sama dengan evaluasi awal yaitu menggunakan metode heuristic evaluation. evaluasi kedua berguna untuk mengetahui apakah masalah pada evaluasi awal masih muncul atau tidak dan juga untuk mengidentifikasi masalah baru yang muncul pada rancangan desain solusi.
Penelitian ini bertujuan untuk membuat user experience yang baik dengan mengidentifikasi masalah usability yang muncul pada aplikasi versi awal dan menyelesaikan masalah tersebut dengan merancang desain
solusi menggunakan metode human centered design sehingga masalah yang ditemukan pada evaluasi tahap awal tidak ditemukan lagi pada evaluasi tahap kedua.
2. METODOLOGI PENELITIAN
Metodologi penelitian akan membahas langkah langkah yang akan dilakukan dalam penelitian ini.
Gambar 1. Metodologi Penelitian
Penelitian ini akan melakukan beberapa tahapan seperti yang digambarkan pada Gambar 1. Pertama akan dilakukan studi literatur untuk mempelajari hal-hal terkait dari penelitian ini sepertu user experience, user interface, human centered design, heuristic evaluation dan lainnya. Selanjutnya tahap analisis konteks penggunaan adalah dimana dilakukan identifikasi stakeholder dan calon pengguna, tujuan serta tugas pengguna dan linkungan dari sistem. Tahap selanjutnya adalah evaluasi ux existing dengan menggunakan metode heuristic evaluation terhadap aplikasi yang telah dikembangkan sebelumnya untuk mendapatkan kebutuhan pengguna yang nantinya akan diubah menjadi prioritas perbaikan. Setelah proritas kebutuhan didapat maka akan dilakukan pemetaan prioritas berdasarkan guideline yang sesuai. Selanjutnya adalah perancangan desain solusi berupa rancangan arsitektur informasi, wireframe, mockupinterface yang nantinya akan dijadikan prototype bersifat interaktif berdasarkan prioritas perbaikan yang didapat
dari tahap sebulumnya. Tahap selanjutnya setelah rancangan desain solusi telah dibuat akan dilakukan pengujian menggunakan metode yang sama yaitu heuristic evaluation terhadap prototype dari perbaikan. Proses akan mengulang ke tahap analisis konteks penggunaan, spesfikasi kebutuhan pengguna atau rancangan desain solusi apabila hasil yang didapat dari evaluasi tidak memuaskan. Apabila hasil memuaskan maka akan dilakukan perbandingan antara hasil evalasi mengenai temuan masalah pada evaluasi awal dan evaluasi akhir. Tahap terakhir dari penelitian ini adalah penarikan kesimpulan dan pemberian saran untuk penelitian berikutnya.
3. ANALISIS KEBUTUHAN DAN EVALUASI
3.1 Analisis Pengguna dan Stakeholder Dari hasil wawancara yang dilakukan Stakeholder dari aplikasi merupakan perusahaan tabloidjubi khususnya adalah karyawan pada divisi redaksi dan administrasi. Lalu pengguna dari portal aplikasi berita tabloidjubi ini adalah warga Indonesia yang berumur 17 tahun keatas dengan Pendidikan minimal SMA atau Sederajat.
3.2 Identifikasi Karakteristik Pengguna Karakteristik dari pengguna aplikasi portal berita tabloidjubi adalah sebagai berikut :
1. Pengguna adalah warga Indonesia berumur 17 tahun keatas dengan latar belakang Pendidikan minimal Sekolah menengah atas atau sederajat
2. Pengguna aplikasi tidak terbatas dari jenis kelamin, yang berarti dapat digunakan oleh laki-laki dan perempuan
3.
Pengguna menggunakan perangkatsmartphone Android atau iOS. 3.3 Identifikasi Tujuan dan Tugas
Pengguna
Tujuan utama aplikasi yang diharapkan oleh stakeholder terkait adalah sebagai portal berita yang dapat menyediakan berita mengenai tanah papua dan berita umum ke seluruh Indonesia dengan cara menjadi yang pertama memberikan berita terutama berita terkait dengan tanah Papua. Sedangkan informasi tujuan dari pengguna tabloidjubi berdasarkan analisis terhadap aplikasi yang telah dibuat
sebelumnya dapat dilihat pada Tabel 2 Tabel 1. Tugas Pengguna
Nomor Nama Tugas
1 Daftar
2 Masuk
3 Melihat Berita
4 Bookmark Berita
5 Membagi berita
6 Memberikan Komentar pada berita
7 Melihat profil
8 Melihat bookmark pengguna 9 Melihat kategori berita
10 Mencari berita
11 Keluar
3.4 Tampilan Aplikasi Sebelum Evaluasi Untuk memperjelas konteks penggunaan, tujuan serta tugas pengguna, perlu ditampilkan tampilan sistem sebelum evaluasi. Tampilan sistem yang akan ditampilkan adalah halaman beranda, halaman kategori, daftar bookmark dan halaman berita. Tampilan dari halaman tersebut dapat dilihat pada Gambar 2 dan 3
Gambar 2. Tampilan Beranda (Kiri), Tampilan Kategori (Kanan)
Gambar 3. Tampilan Halaman Berita(Kiri), Tampilan Daftar Bookmark(Kanan)
3.5 Hasil Evaluasi Tahap Awal
Hasil evaluasi tahap awal dari aplikasi portal tabloidjubi menggunakan heuristic evaluation menghasilkan beberapa temuan masalah yang diidentifikasi oleh tiga evaluator. Temuan masalah juga dikelompokkan sesuai dengan kategori Heuristiknya masing masing. Hasil temuan masalah serta tempat ditemukannya masalah dari evaluasi tahap pertama dapat dilihat pada Tabel 2
Tabel 2. Temuan Masalah Evaluasi Pertama Kode
Masalah Permasalahan
Tempat Ditemukan U1-1 Tidak ada feedback jika
ada error pada saat
validasi form
Registrasi
U1-2 Penghapusan
Bookmark, Tidak ada
penjelasan ketika bookmark dihapus
Bookmark
U1-4 Informasi konten yang belum ada, Tidak ada Informasi konten yang belum ada
Kategori
U1-5 Penanda bookmark, Tidak ada keterangan apabila artikel telah di bookmark
Berita
U2-1 Icon pada aplikasi, Icon tidak sesuai dengan deskripsinya
Sidebar U4-1 Penggunaan Bahasa
beranda atau menu, Penggunaan Bahasa yang tidak konsisten
Home/Beranda
U4-2 Berita dalam home dan kategori, Berita didalam home tidak ada didalam kategori
Home
U4-3 Tombol read more, Penggunaan Bahasa tidak konsisten
Home
U4-4 Header tidak sesuai dengan menu atau state aplikasi
Kategori
U4-5 Bookmark, Tidak ada konsistensi Card
bookmark dengan
Kolom /Card berita yang lain & Card bookmark tidak sama dengan berita umum
Bookmark
U4-6 Home tidak ada identitas mengenai aplikasi jubi, Harus ada tanda atau logo mengenai jubi untuk membantu pengguna mengenal aplikasi
Home
U6-1 Kategorisasi berita, Kategori berada pada sub-submenu & Membingungkan karena struktur tidak umum seperti aplikasi berita pada umumnya
Kategori
U6-2 Kurangnya visibilitas untuk tombol share pada halaman berita,
Berita
U7-1 Tombol login terlalu dekat dengan tombol registrasi
Login
U7-2 Tidak ada hierarki berita seperti pada aplikasi berita pada umumnya
Home
U7-3 Seharusnya ada berita terkait dengan berita yang dipilih pengguna pada bagian bawah berita
Berita
U7-4 Besar Teks, Tidak ada opsi untuk mengatur besar kecilnya teks pada berita
Berita
U7-5 Back button, Tidak ada tombol back ketika sudah masuk kedalam berita
Berita
U7-6 Fitur search belum ada pada aplikasi
Home U7-7 Kolom komentar, Tidak
adanya kolom komentar pada berita
Berita
U7-8 Tidak ada kegunaan untuk pengguna & tidak ada Fitur profil
Home
U8-1 Card berita kurang lengkap informasi
Home/beranda U8-2 Tombol read more,
Penempatan kurang baik & tidak dibutuhkan
Home/Beranda
U8-3 Tidak adanya gambar pada halaman berita
Berita U1-3 Kurangnya informasi
pada splash screen, Tidak ada penjelasan mengenai nama aplikasi
3.6 Analisis Kebutuhan Pengguna Setelah semua hasil evaluasi telah terkumpul maka akan didapat hasil yang dapat menentukan kebutuhan pengguna. Kebutuhan pengguna yang didapat didasarkan dari rata-rata severity rating temuan masalah yang ditemukan oleh tiga evaluator pada tahap sebelumnya (Nielsen, Severity Ratings for Usability Problems, 1995). Semakin besar severity rating yang didapat oleh suatu masalah maka masalah tersebut akan mendapat tingkat prioritas perbaikan yang tinggi. Prioritas perbaikan dapat dilihat pada Tabel 3.
Tabel 3.Prioritas Perbaikan
Kode Masalah
Severity Rating Total
E1 E2 E3 U6-1 4 4 3 3.67 U4-6 4 3 0 2.33 U7-8 3 3 0 2.0 U2-1 2 2 2 2.0 U4-5 3 0 2 1.67 U8-1 2 2 0 1.33 U8-2 2 0 2 1.33
Kode masalah U6-1 adalah permasalahan mengenai kategorisasi berita. Masalah U6-4 adalah tidak konsistenya bentuk card pada halaman bookmark dan pada halaman beranda. Masalah dengan kode U3-3 adalah tidak adanya fungsi pengguna. Masalah dengan kode U2-1 adalah ikon yang digunakan pada aplikasi tidak sesuai dengan fungsinya. Masalah 4-5 adalah header yang tidak sesuai dengan state sistem mengakibatkan inkonsistensi pada aplikasi. Masalah U8-1 adalah card berita memuat informasi yang kurang baik. erakhir permasalahan U8-2 adalah mengenai tombol read more yang dirasa kurang perlu.
4. RANCANGAN DESAIN SOLUSI DAN
EVALUASI
Perancangan desain solusi meliputi pengumpulan guideline dan pemetaan guideline berdasarkan masalah, perancangan arsitektur informasi, wireframe, mock up halaman rancangan desain solusi hingga pembuatan interactive prototype untuk pengujian tahap kedua menggunakan metode heuristic evaluation
4.1 Prioritas Perbaikan
Pada tahap ini akan dilakukan pemetaan prioritas dan guideline yang sesuai dengan
masalah dan severity rating yang ditemukan oleh evaluator. Berdasarkan penjelasan sebelumnya, ditemukan 6 masalah dengan rata-rata severity rating yang tinggi pada hasil evaluasi tahap awal. Masalah tersebut adalah masalah dengan kode masalah U6-1 adalah permasalahan mengenai kategorisasi berita. Masalah U6-4 adalah tidak konsistenya bentuk card pada halaman bookmark dan pada halaman beranda. Masalah dengan kode U3-3 adalah tidak adanya fungsi pengguna. Masalah dengan kode U2-1 adalah ikon yang digunakan pada aplikasi tidak sesuai dengan fungsinya. Masalah U4-5 adalah header yang tidak sesuai dengan state sistem mengakibatkan inkonsistensi pada aplikasi. Masalah U8-1 adalah card berita memuat informasi yang kurang baik. Terakhir permasalahan U8-2 adalah mengenai tombol read more yang dirasa kurang perlu.
4.2 Rancangan Arsitektur Informasi Pada aplikasi portal berita tabloidjubi, rancangan arsitektur informasi yang dibuat adalah dengan struktur Hierarchical. Rancangan arsitektur informasi dapat dilihat pada Gambar 3.
Gambar 3. Tampilan Beranda (Kiri), Tampilan Kategori (Kanan).
4.3 Wireframe dan Mock-Up UI
Wireframe merupakan blueprint dari halaman yang akan dibuat atau rancangan low-fidelity dari halaman yang akan dibuat sebelum dibuat menjadi high-fidelity prototype. sedangkan
mock-up adalah bentuk dari rancangan high-fidelity yang hampir menyerupai sistem yang telah selesai dikembangkan. Rancangan wireframe dan mock-upuser interface yang akan ditampilkan adalah halaman Beranda, Kategori Halaman Berita dan Daftar Bookmark pada aplikasi portal berita tabloidjubi karena beranda dan halaman berita merupakan halaman yang akan sering pengguna temui ketika menggunakan aplikasi. Halaman kategori serta daftar bookmark ditampilkan juga karena pada halaman kategori dan daftar bookmark terdapat masalah dengan severity rating yang tinggi. Mock-up dari halaman beranda dapat dilihat pada Gambar 5 dan kategori dapat dilihat pada Gambar 6.
Gambar 4 Halaman Kategori (Kiri) dan Beranda (Kanan)
Gambar 5 Wireframe Halaman Berita (Kiri) dan Daftar Bookmark(kanan)
4.4 Hasil Evaluasi Tahap Kedua
Pada evaluasi tahap dua masih ditemukan
berbagai masalah usability yang ditemukan oleh evaluator. Total temuan masalah pada evaluasi tahap kedua adalah lima masalah pada tiga kategori yaitu H4 Consistency and Standards, H6 Recognition Rather Than Recall, H7 Flexibility and Efficiency of Use dan H8 Aestethic and Minimalistic Design dengan masalah terbanyak ada pada kategori H7 mengenai Flexibility and Efficiency of Use. Daftar temuan masalah yang ditemukan pada evaluasi tahap kedua dapat dilihat pada Tabel 5
Tabel 5. Lingkungan Sistem Kode
Masalah Permasalahan
Tempat Ditemukan UP4-2 Search bar tidak ada
untuk memilih berita pada halaman kategori
Search bar
UP6-1 Menu Bookmark & Pengaturan Besar tulisan berpotensi menimbulkan kebingungan kepada pengguna
Berita
UP7-1 Menu sidebar
ditempatkan disebelah kanan, tidak umum
Sidebar
UP7-3 Tombol Logout/keluar, Tidak perlu tombol keluar pada halaman profil
Halaman profil
UP8-1 Info pada profil kurang sesuai
Profil
4.5 Perbandingan Temuan Masalah Heuristik
Setelah hasil evaluasi heursitik kedua berhasil dikumpulkan, maka akan dilakukan perbandingan temuan masalah dari evaluasi tahap awal dan tahap kedua. Perbandingan temuan masalah dapat dilihat pada Gambar 6
Gambar 6 Grafik Perbandingan Temuan Masalah
0 5 10 15 20 25 30 35
Perbandingan Temuan
Masalah Heuristik
Tahap 1 Tahap 2Dapat dilihat dalam Gambar 6 perbandingan temuan masalah yang ditemukan pada evaluasi awal dan evaluasi kedua. Pada evaluasi tahap pertama ditemukan sebanyak 33 masalah dengan 7 masalah yang sama. Rincian masalah yang ditemukan adalah sebagai berikut. 4 masalah pada H1 Visibility of System Status, 1 masalah pada H2 mengenai Match Between System and Real World, lalu pada evaluasi pertama masalah yang banyak ditemukan adalah pada kategori H4 mengenai Consistency and Standards sebanyak 6 masalah dan Masalah dengan kategori H7 berkaitan dengan Flexibilty and Efficiency of Use sebanyak 8 masalah,. Selanjutnya adalah pada kategori H6 Recognition Rather Than Recall sebanyak 2 masalah. H8 terkait Aestethic and Minimalistic Design sebanyak 4 masalah. Lalu masalah yang ditemukan pada evaluasi kedua setelah perancangan, masalah yang ditemukan semakin sedikit yaitu berjumlah 5 masalah pada yaitu 1 masalah pada kategori H4 Consistency and Standards terdapat satu masalah lalu ditemukan juga satu masalah pada kateogori H6 Recognition Rather Than Recall, w masalah pada kategori H7 Flexibilty and Efficiency of Use dan 1 masalah pada kategori H8 Aestethic and Minimalistic Design.
5. KESIMPULAN DAN SARAN
Pada evaluasi heuristik awal ditemukan permasalahan usability yang cukup banyak yaitu berjumlah 34 permasalahan dari kategori heuristic H1 Visibility of System Status, H2 Match Between System and Real World, H3 User Control and Freedom, H4 Consistency and Standards, H6 Recognition Rather Than Recall, H7 Flexibilty and Efficiency of Use dan H8 Aestethic and Minimalistic Design. Setelah dilakukan perbaikan berdasarkan prioritas terhadap rancangan aplikasi lama temuan masalah pada evaluasi kedua berkurang secara signifikan. Pada evaluasi kedua masalah yang ditemukan berjumlah 5 masalah pada kategori H6 Recognition Rather Than Recall, H7 Flexibilty and Efficiency of Use dan H8 Aestethic and Minimalistic Design lalu temuan masalah yang diidentifikasi pada evaluasi awal tidak ditemukan kembali. Dengan demikian, permasalahan pada evaluasi tahap pertama telah berhasil diperbaiki dan perbaikan rancangan aplikasi dapat menyelesaikan temuan masalah pada evaluasi tahap pertama
Saran yang dapat diberikan terkait
penelitian ini adalah perlunya dilakukan evaluasi usability dengan melibatkan pengguna sebenarnya karena pengujian dengan melibatkan expert sudah tidak ditemukan masalah yang signifikan serta agar dapat lebih memahami poin-poin mana yang berpotensi menimbulkan masalah terhadap pengguna dan dilakukan implementasi dari hasil rancangan prototype aplikasi portal berita tabloidjubi agar nantinya hasil dari evaluasi dari hasil implementasi dapat dijadikan evaluasi akhir dari aplikasi sebelum dilepas ke publik
6. DAFTAR PUSTAKA
Anggitama, D. R., Tolle, H., & Az-Zahra, H. M. (2018). Evaluasi Dan Perancangan User Interface Untuk Meningkatkan User Experience Menggunakan Metode Human Centered Design Dan Heuristic Evaluation Pada Aplikasi EzyPay. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer , 1-8.
Aniensyah, A. N., Tolle, H., & Az-Zahra, H. M. (2018). Perancangan User Experience Aplikasi Pelaporan Keluhan Masyarakat Menggunakan Metode Human-Centered Design . Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer , 1-9. Garret, J. J. (2004). Meet the Elements. In J. J.
Garrett, The Elements of User Experience (pp. 21-36). Berkeley: New Riders Publishing.
ISO 9241. (2018). Ergonomics of Human System Interaction. Switzerland: International Standard Organization.
Nielsen, J. (1992, May 3). Finding Usability Problems Through Heuristic Evaluation. Finding Usability Problems Through Heuristic Evaluation.
Nielsen, J. (1995). How to conduct Heuristic Evaluation. Retrieved 2018, from Nielsen
Norman Group:
https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Nielsen, J. (1995). Severity Ratings for Usability Problems. Retrieved August 7, 2018, from
Nielsen Norman Group:
https://www.nngroup.com/articles/how- to-rate-the-severity-of-usability-problems/
