JNATIA Volume 1, Nomor 1, November 2022

Jurnal Nasional Teknologi Informasi dan Aplikasinya

Penerapan User Centered Design (UCD) Pada Website Hai Doc

Anak Agung Gde Krishna Aryawana1, Ida Bagus Made Mahendraa2

aInformatics Department, Udayana University

Jalan Raya Kampus Unud, Jimbaran, Bali, 80361, Indonesia

1aryawan.krisna@gmail.com

2ibm.mahendra@unud.ac.id (corresponding author)

Abstract

This study aims to apply User Centered Design in the development of user interface design and user experience on the HaiDoc website. In website development, user interface and user experience (UI/UX) design is a very important initial stage in website creation. Then this UI/UX will provide an initial overview of a system that is created and provide an image for users to use and interact on this website. The UI/UX is designed on this website using a user centered design (UCD) approach. In user-centered design, there are 4 (four) stages in the UI/UX approach: analysis, planning, implementation, and testing. Users will be involved in evaluating the designs made, so the designs formed are expected to be by the users' wishes.

Keywords: User Centered Design, User Interface, User Experience, HaiDoc, Website.

  • 1.    Pendahuluan

Perkembangan teknologi informasi pada masa sekarang ini sangatlah luas dan juga telah merubah Sebagian besar pekerjaan manusia yang dimana awalnya dikerjakan secara manual akan tetapi karena kemajuan teknologi informasi ini semua pekerjaan manusia dapat dikerjakan secara otomatis [1]. Tentunya juga perkembangan teknologi ini juga mempengaruhi dari sektor kesehatan. Kesehatan menjadi kebutuhan hidup manusia yang utama disamping kebutuhan hidup lainnya. Kesehatan merupakan salah satu indikator keberhasilan pembangunan yang diselenggarakan oleh suatu negara [2]. Kemajuan bidang kesehatan ini tentunya memberikan dampak dalam pelayanannya salah satunya adalah antrian. Oleh karena itu penelitian ini dimaksudkan untuk membantu menghitung antrian yang ada di klinik maupun rumah sakit. Penelitian ini menggunakan metode user centered design sebagai metode yang digunakan dalam membangun sistem ini. Berdasarkan penelitian sebelumnya yang menggunakan user centered design (UCD) yang dilakukan oleh Atikah Hayyu Mulia (2016) dengan judul “Pengembangan Antarmuka Aplikasi Astofit Dengan Pendekatan User Centered Design” . Dari penelitian tersebut menghasilkan perbandingan antarmuka yang tidak menggunakan metode UCD dan yang menggunakan UCD. Hasilnya menunjukkan bahwa desain antarmuka yang tidak menggunakan UCD memiliki tingkat usability 15% lebih rendah dibanding dengan menerapkan metode UCD [3].

User Centered Design (UCD) merupakan salah satu metode pendekatan dengan konsep pengguna yang dioptimalkan untuk end-user serta ditekankan pada bagaimana kebutuhan atau keinginan pada setiap end-user, dan dirancang sesuai behavior end-user agar pengguna tidak memaksa untuk mengubah perilakunya saat menggunakan produk yang akan dibangun [4]. UCD juga merupakan suatu proses interaktif dimana langkah perancangan dan evaluasi dibuat dalam permulaan proyek hingga proses implementasi [5]. UCD berfokus berdasarkan desain yang berpusat pada manusia dengan analisis target pengguna yang lebih mendalam [6].

Jurnal Nasional Teknologi Informasi dan Aplikasinya

  • 2.    Metodologi Penelitian

    2.1.    Alur Penelitian

Metode penelitian yang digunakan dalam penelitian yang dilakukan oleh penulis adalah User Centered Design atau sering disebut dengan UCD. User Centered Design adalah bagian dari SDLC (System Development Life Cycle), maka dari itu desain aplikasi yang dirancang menggunakan metode UCD akan dioptimalkan dan difokuskan pada kebutuhan end-user, sehingga aplikasi yang akan mengikuti kebutuhan pengguna dan pengguna pun tidak perlu merubah perilaku untuk dapat menggunakan aplikasi [7]. Tujuan dari penggunaan metode UCD yaitu agar tingkat penggunaan dan kepuasan pengguna semakin tinggi [7]. Dalam UCD terdapat beberapa tahapan yang perlu dilakukan:

Gambar 1. Alur Penelitian Website HaiDoc User Centered Design

  • 1.    Analysis

Pada tahapan ini penulis akan memberikan kuesioner yang berisi pertanyaan mengenai penilaian sistem antrian yang saat ini digunakan oleh rumah sakit. Hasil kuesioner ini akan diambil dari para karyawan yang bekerja di rumah sakit atau klinik beserta beberapa orang yang pernah berkonsultasi ke rumah sakit. Hasil dari kuesioner ini digunakan untuk menyimpulkan seberapa diperlukannya website HaiDoc ini.

  • 2.    Planning

Pada tahapan ini penulis akan menjabarkan hasil rancangan berupa use case diagram dan activity diagram. Diagram tersebut akan menjelaskan bagaimana kerja dari website ini melalui use case diagram dan activity diagram akan menjelaskan aktivitas apa saja yang bisa dilakukan dalam website ini.

  • 3.    Implementation

Pada tahapan ini penulis akan memberikan hasil implementasi berdasarkan dari hasil perencanaan yang sudah dilakukan di tahap sebelumnya. Pada tahap ini akan ditampilkan hasil website yang dibangun.

  • 4.    Testing

Jurnal Nasional Teknologi Informasi dan Aplikasinya

Pada tahapan ini akan dilakukan pengujian akan menggunakan blackbox testing terhadap sistem yang sudah dibuat yang akan untuk mengetahui apakah input dan output sudah berjalan sesuai yang diinginkan sesuai fungsinya.

  • 2.2.    User Centered Design

User Centered Design atau sering disebut dengan UCD. User Centered Design adalah bagian dari SDLC (System Development Life Cycle), maka dari itu desain aplikasi yang dirancang menggunakan metode UCD akan dioptimalkan dan difokuskan pada kebutuhan end-user, sehingga aplikasi yang akan mengikuti kebutuhan pengguna dan pengguna pun tidak perlu merubah perilaku untuk dapat menggunakan aplikasi [7].

  • 2.3.    React Js

ReactJs merupakan library bahasa pemrograman javascript yang diciptakan oleh facebook untuk membangun user interface sebuah web application yang bersifat open source, dimana kita dapat membuat beberapa komponen user interface pada aplikasi yang akan kita kembangkan secara kompleks [8].

  • 3.    Hasil dan Pembahasan

    3.1.    Analysis

Analisis dilakukan untuk mengetahui kebutuhan pengguna dengan melakukan kuisioner terhadap beberapa orang yang merupakan karyawan rumah sakit atau klinik dan beberapa orang yang pernah berkonsultasi ke rumah sakit atau klinik (pasien). Pengambilan kuesioner ini dilakukan untuk mengetahui seberapa perlukah website ini dibangun. Berikut merupakan hasil kuesioner terhadap beberapa responden. Pertanyaan 1 bertujuan untuk mengetahui status dalam rumah sakit. Lalu untuk pertanyaan 2 untuk mengetahui seberapa mudah pengguna dalam mengetahui berapa yang antrian yang ada. Pertanyaan 3 untuk mengetahui seberapa mudah pengguna mengetahui informasi mengenai dokter. Pertanyaan 4 untuk mengetahui tingkat pemahaman pengguna dalam selama mengakses sebuah website. Pertanyaan 5 untuk mengetahui seberapa perlu website HaiDoc dibangun. Website ini yang berisi informasi dokter dan informasi antrian.

Gambar 2. Pertanyaan 1 Kuesioner Wawancara

Gambar 3. Pertanyaan 2 Kuesioner Wawancara

Jurnal Nasional Teknologi Informasi dan Aplikasinya

Gambar 4. Pertanyaan 3 Kuesioner Wawancara

Apakah anda kesulitan dalam menggunakan website’ lh∣∣*aa∏

Gambar 5. Pertanyaan 4 Kuesioner Wawancara

Gambar 6. Pertanyaan 5 Kuesioner Wawancara

  • 3.2.    Planning

Membuat sistem antrian ini membutuhkan perancangan terlebih dahulu dalam membangun sebuah sistem yaitu dengan use case diagram dan activity diagram.

  • 3.2.1.    Use Case Diagram

Use Case Diagram berguna untuk menjelaskan hal apa saja yang bisa dilakukan oleh pengguna didalam sistem. Pengguna dalam website ini adalah pasien yang ingin berkonsultasi ke dokter. Pengguna di lambangkan sebagai actor. Pada website ini pengguna dapat melihat home atau menu utama dari website. Pengguna dapat melihat dokter yang ada pada website. Kemudian pengguna dapat melihat rincian dari dokter. Dan pengguna dapat melihat jumlah antrian.

Jurnal Nasional Teknologi Informasi dan Aplikasinya

Gambar 7. Use Case Diagram HaiDoc

  • 3.2.2.    Activity Diagram

Activity Diagram menggambarkan aktivitas dari sistem yang dirancang, bagaimana aktivitas pengoperasian sistem dimulai, apa yang bisa terjadi, dan keputusan tentang bagaimana itu berakhir. Pertama, pengguna membuka website kemudian sistem akan menampilkan card dokter. Lalu pengguna membuka rincian dokter kemudian sistem akan menampilkan rincian dokter yang dipilih. Kemudian pengguna menekan tombol daftar lalu sistem akan menerima input tersebut kemudian disimpan ke list antrian. Dan terakhir pengguna dapat melihat jumlah antrian yang ada.

Gambar 8. Activity Diagram

Jurnal Nasional Teknologi Informasi dan Aplikasinya

  • 3.3.    Implementation

    • 3.3.1.    Halaman Home

Halaman home merupakan halaman tampilan awal dari website disini ditampilkan dokter-dokter berisi nama dan spesialisasinya. Di halaman ini juga terdapat button atau tombol rincian yang

3.3.2. Halaman Rincian Dokter

Halaman rincian dokter merupakan halaman yang berisi keterangan lebih mengenai dokter yang di inginkan terdapat antrian yang ada saat ini dan button daftar untuk masuk ke dalam antrian dokter yang dipilih.

Gambar 10. Halaman Rincian Dokter


berada pada kartu dari dokter

untuk

u ke menu rincian.

Gambar 9. Halaman Home

  • 3.3.3.    Halaman Antrian

Halaman antrian merupakan halaman untuk mengecek ada berapa antrian yang ada di hari itu.

3.4. Testing

Metode pengujian sistem menggunakan metode blackbox testing dilakukan untuk memastikan aplikasi berjalan sesuai dengan yang diharapkan, peneliti melakukan pengujian dengan metode black box. Tujuannya adalah untuk mengetahui apakah fungsionalitas aplikasi telah berjalan dan tidak terdapat error atau bug didalamnya [9]. Hasil dari blackbox testing adalah sebagai berikut:

Tabel 1. Blackbox Testing

NO

Skenario

Pengujian

Test Case

Hasil yang Diharapkan

Hasil

Pengujian

Kesimpulan

1

User memasuki website

User menggunakan browser untuk membuka website HaiDoc

User mendapat tampilan halaman home

Sesuai Dengan Harapan

Valid

2

User

Menggunakan

Kolom Search

User memasukan nama salah satu dokter

User mendapatkan nama dokter sesuai yang dimasukkan

Sesuai Dengan Harapan

Valid

3

User

Menggunakan

Kolom Search

User tidak memasukan apapun

User dapat melihat seluruh dokter yang ada

Sesuai Dengan Harapan

Valid

4

User menuju ke halaman rincian dokter

User menekan tombol rincian

User dapat melihat keterangan dokter dan melakukan pemesanan

Sesuai Dengan Harapan

Valid

5

User dapat

User menekan

Jumlah antrian

Sesuai

Valid

Jurnal Nasional Teknologi Informasi dan Aplikasinya

melihat jumlah antrian pada bagian antrian


tombol pesan pada menu rincian


bertambah


Dengan Harapan


  • 4.    Kesimpulan

HaiDoc menerapkan metode user centered design yang digunakan untuk meningkatkan tingkat usability berdasarkan hasil yang dilakukan oleh penelitian sebelumnya dan menggunakan React Js dalam membangun websitenya. Sehingga dapat membantu memberikan kemudahan dalam menampilkan dokter-dokter beserta keterangannya dan berkat React Js website bisa memiliki tampilan yang modern. Beserta black box testing menunjukkan bahwa website dapat berjalan sesuai dengan diharapkan.

References

  • [1]    V. Saputra, D. Hidayatullah, "Pengembangan Sistem Informasi Media Informasi UMKM Menerapkan Metode User Centered Design" Jurnal Media Informatika Budidarma, vol. 6, no. 1, p. 90-98, 2022.

  • [2]    S. Ernawati, A. D. Indriyanti “Perancangan User Interface dan User Experience Aplikasi Medical Tourism Indonesia Berbasis Mobile Menggunakan Metode User Centered Design (UCD) (Studi Kasus: PT Cipta Wisata Medika)” . Journal of Emerging Information Systems and Business Intelligence, vol. 3, no. 4, p. 90-102,2022.

  • [3]    A. Mulia Hayyu, 2016, “ Pengembangan Antarmuka Aplikasi Astofit Dengan Pendekatan User Centered Design”. Universitas Brawijaya.

  • [4]    D. Aldo, W. L. Army, W. J. Lestari, A. H. Saputra and Z. Munir, "Perancangan Sistem Informasi Terpadu Industri Pariwisata Kota Batam Menerapkan User Centered Design Berbasis Website" Jurnal Media Informatika Budidarma, vol.6, no. 2, p. 898-906, 2022.

  • [5]    A. Krisnoanto, A. H. Brata, and M. T. Ananta, “Penerapan Metode User Centered Design Pada Aplikasi E-Learning Berbasis Android ( Studi Kasus : SMAN 3 Sidoarjo ),” vol. 2, no. 12, pp. 6495–6501, 2018.

  • [6]    B. A. Pratama, U. Proboyekti, and K. Wijana, “Penerapan Metode User Centered Design ( UCD ) dalam Pembangunan Layanan Online Jual Beli Barang Bekas,” no. 1, 2020, doi: 10.21460/jutei.2020.41.192.

  • [7]    T. Andhiza, I. Fitri, and A. Rubhasy, “Perancangan User Experience Pada Aplikasi Pencarian Car Wash Menggunakan Metode UCD (User Centered Design), ” vol. 12, no.1, pp. 135-145, 2022.

  • [8]    A. Muda Sirul Huda, Y. Fernando, “E-Ticketing Penjualan Tiket Event Musik Di Wilayah Lampung Pada Karcismu Menggunakan Library ReactJS, ” vol. 2, no.1, pp. 96-103, 2021.

  • [9]    Firman, Fauziah, and R. Titi Komalasari, “Aplikasi Pengingat dan Pendataan Kenaikan Golongan Gaji Berbasis Web Menggunakan Metode White Box Testing dan Black Box Testing, ” vol. 7, no. 1, 2021.

(Remove all of the additional gray colored information just like this one in your submission manuscript)

676