Pengukuran Tingkat Usability Serta Perbaikan Desain Antarmuka Website Menggunakan Pendekatan Human Centered Design dan WEBUSE

(1)

Pengukuran Tingkat Usability Serta Perbaikan Desain Antarmuka Website Menggunakan Pendekatan Human

Centered Design dan WEBUSE

(Studi Kasus : Website SMA Negeri 3 Unggulan Martapura)

Laporan Tugas Akhir

Diajukan Untuk Memenuhi Persyaratan Guna Meraih Gelar Sarjana Informatika Universitas Muhammadiyah Malang

Donny Putra Frienza (201710370311100)

Bidang Minat

(Rekayasa Perangkat Lunak)

PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH MALANG

2021

(2)

i

LEMBAR PERSETUJUAN

(3)

(4)

iii

LEMBAR PERNYATAAN

(5)

iv

ABSTRAK

Manfaat dari teknologi informasi telah menjadi kebutuhan wajib untuk dapat mendukung atau menunjang aktivitas dan produktivitas manusia, bahkan manfaat dari teknologi informasi saat ini telah menembus keberbagai sektor, termasuk sektor pendidikan. Salah satunya SMA Negeri 3 Unggulan Martapura, Sekolah ini memanfaatkan sistem informasi berupa website, yang dimana pada website tersebut akan memuat berbagai informasi mengenai profil sekolah, data guru dan siswa, informasi, kegiatan dan lain-lain. Namun, website SMA Negeri 3 Unggulan Martapura ini masih memilki beberapa kekurangan yang bisa diperbaikin mulai dari tampilan dan kemudahan dalam menggunakannya karena memang website ini masih kurang update. Usabilitas/usability sendiri merupakan kemudahan suatu sistem dalam kegunaannya yang berdasarkan efisiensi, efektivitas, dan kepuasan penggunanya, usability juga merupakan aspek yang sangat penting dalam pembuatan suatu aplikasi/website, maka dengan dilakukannya evaluasi pada website ini, diharapkan mendapat website dengan tampilan yang baik dan sesuai dengan kebutuhan, serta perlu adanya rekomendasi perbaikan terhadap masalah yang ada. Metode yang digunakan adalah pendekatan Human Centered Design dan Website Usability Evaluation Tools (WEBUSE).

Hasil penelitian menunjukkan desain perbaikan sesuai hasil dari Human Centered Design di evaluasi dengan kuisioner WEBUSE yang terdiri dari 4 kategori di dapat hasil untuk kategori Content, Organization and Readability pada evaluasi awal 0,53 “Sedang” setelah adanya perbaikan 0,82 “Sangat Baik”, Navigation and Links pada evaluasi awal 0,49 “Sedang” setelah ada perbaikan 0,76 “Baik”, User Interface Design pada evaluasi awal 0,5 “Sedang” dan setelah perbaikan 0,77

“Baik”, terakhir Performance and Effectiveness pada evaluasi awal 0,5 “Sedang”

dan setelah evaluasi perbaikan menjadi 0,74 “Baik”. Maka dengan ini bisa dilihat bahwa setelah adanya perbaikan pada website, nilai rata-rata usability dari masing-masing kategori mengalami peningkatan.

Kata Kunci : Website, Usability, Evaluasi, Human Centered Design, Website Usability Evaluation Tools

(6)

v

ABSTRACT

The benefits of information technology have become a mandatory requirement to be able to support or support human activities and productivity, even the benefits of information technology have now penetrated into various sectors, including the education sector. One of them is SMA Negeri 3 Unggulan Martapura, this school utilizes an information system inform of a thewebsite, which on the website will contain various information about school profiles, teacher and student data, information, activities and others. However, the website of the Martapura 3 Superior High School it still has some shortcomings that can be improved starting from the appearance and ease of use because website thisis still not updated. Usability /usability itself is the ease of a system in its use based on efficiency, effectiveness, and user satisfaction, usability is also a very important aspect in making an application /website, so by doing an evaluation on website this, it is expected to get a website with a good appearance and in accordance with the needs, as well as the need for recommendations for improvement of existing problems. The method used is the Human Centered Design and Website Usability Evaluation Tools (WEBUSE) approach. The results showed that the improvement design according to the results of the Human Centered Design was evaluated with a WEBUSE questionnaire consisting of 4 categories, the results obtained for thecategory Content, Organization and Readability in the initial evaluation of 0.53 "Medium" after an improvement of 0.82 "Very Good" , Navigation and Links in the initial evaluation 0.49 "Medium"

after improvement 0.76 "Good", User Interface Design in the initial evaluation 0.5 "Medium" and after improvement 0.77 "Good", the last Performance and Effectiveness at the initial evaluation was 0.5 “Medium” and after the improvement evaluation it became 0.74 “Good”. So with this it can be seen that after the improvement on the website, the average usability value of each category has increased.

Keywords : Website, Usability, Evaluation, Human Centered Design, Website Usability Evaluation Tools

(7)

vi

LEMBAR PERSEMBAHAN

Dengan memanjatkan puji syukur kepada Allah SWT atas rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan Tugas Akhir ini dengan judul “Pengukuran Tingkat Usability Serta Perbaikan Desain Antarmuka Website Menggunakan Pendekatan Human Centered Design dan WEBUSE (Studi Kasus : Website SMA Negeri 3 Unggulan Martapura)”.

Pada kesempatan ini penulis dengan segala kerendahan hati mengucapkan banyak terimakasih dan penghargaan yang sebesar-besarnya kepada :

1. Allah SWT yang senantiasa memberikan saya kemudahan dan kelancaran selama saya mengerjakan tugas akhir ini dengan sebaik-baiknya.

2. Orang tua dan keluarga besar saya, Bapak Novriyono, Ibuk Daryani dan Mbak Della Ayu Frienty yang tak henti-hentinya memberikan dorongan dan motivasi selama ini.

3. Ibu Hj. Gita Indah Marthasari, S.T., M.Kom., selaku Ketua Jurusan program studi Informatika Universitas Muhammadiyah Malang.

4. Dosen Pembimbing saya, Bapak Ilyas Nuryasin, S.Kom., M.Kom. dan Bapak Briansyah Setio Wiyono, S.Kom., M.Kom. yang sudah sangat sabar dan meluangkan waktu serta pikiran untuk membimbing saya dalam mengerjakan tugas akhir ini.

5. Seluruh Bapak dan Ibu Dosen Pengajar yang telah memberikan ilmunya dan Staff TU jurusan Informatika.

6. Orang terdekat saya, Andini Wilda Ananda yang telah mendampingi serta memberikan motivasi dalam pengerjaan tugas akhir ini.

7. Seluruh Rekan-rekan satu angkatan J_United atas dukungannya dan semangatnya.

8. Semua teman kelas Informatika-C angkatan 2017, terimakasih atas segala dukungan dan sudah menjadi rekan satu kelas saya selama kurang lebih 4 tahun.

9. Donny Putra Frienza diri saya sendiri. Terimakasih telah sampai di titik proses yang luar biasa bisa sekuat ini, meluangkan waktu serta semangat

(8)

untuk mengerjakan penelitian skripsi ini.

Malang, 12 Agustus 2021

(Donny Putra Frienza)

(9)

KATA PENGANTAR

Dengan memanjatkan puji syukur kehadirat Allah SWT. Atas limpahan rahmat dan hidayah-NYA sehingga peneliti dapat menyelesaikan tugas akhir yang berjudul : “PENGUKURAN TINGKAT USABILITY SERTA PERBAIKAN DESAIN ANTARMUKA WEBSITE MENGGUNAKAN PENDEKATAN HUMAN CENTERED DESIGN DAN WEBUSE” (Studi Kasus : Website SMA Negeri 3 Unggulan Martapura).

Di dalam tulisan ini disajikan pokok-pokok bahasan yang meliputi latar belakang, metode penelitian dan hasil pembahasan dari penelitian yang telah didapatkan.

Peneliti menyadari sepenuhnya bahwa dalam penulisan tugas akhir ini masih banyak kekurangan dan keterbatasan. Oleh karena itu peneliti mengharapkan saran yang membangun agar tulisan ini bermanfaat bagi perkembangan ilmu pengetahuan.

Malang, 12 Agustus 2021

(Donny Putra Frienza)

(10)

ix

DAFTAR ISI

LEMBAR PERSETUJUAN ... i

LEMBAR PENGESAHAN ... ii

LEMBAR PERNYATAAN ... iii

ABSTRAK ... iv

ABSTRACT ... v

LEMBAR PERSEMBAHAN ... vi

KATA PENGANTAR ... viii

DAFTAR ISI ... ix

DAFTAR GAMBAR ... xii

DAFTAR TABEL ... xiii

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang... 1

1.2. Rumusan Masalah ... 3

1.3. Tujuan Penelitian ... 3

1.4. Batasan Masalah ... 4

BAB II TINJAUAN PUSTAKA ... 5

2.1. Penelitian Terdahulu ... 5

2.2. Website SMA Negeri 3 Unggulan Martapura ... 7

2.2.1. Task Halaman Beranda ... 8

2.2.2. Task Halaman Informasi ... 9

2.2.3. Task Halaman Opini ... 15

2.3. Usability ... 15

2.4. Website Usability Evaluation Tools (WEBUSE) ... 16

2.4.1. Content, Organization and Readability ... 17

2.4.2. Navigation and Link ... 17

2.4.3. User Interface Design ... 18

2.4.4. Performance and Effectiveness ... 18

2.5. Human Centered Design ... 19

2.5.1. Menentukan Kontes Pengguna ... 19

2.5.2. Analisis Kebutuhan ... 19

2.5.3. Membuat Desain Perbaikan ... 20

2.5.4. Evaluasi Desain ... 20

2.6. Persona ... 20

(11)

x

2.7. Populasi dan Sampel ... 21

2.7.1. Populasi Penelitian ... 21

2.7.2. Sampel Penelitian ... 21

BAB III METODOLOGI PENELITIAN... 22

3.1. Studi Literatur ... 23

3.2. Analisis Konteks Awal ... 23

3.3. Evaluasi Desain Awal ... 23

3.4. Memahami dan Menentukan Konteks Pengguna ... 29

3.5. Analisis Kebutuhan ... 29

3.6. Membuat Desain Perbaikan ... 30

3.7. Evaluasi Hasil Desain Perbaikan ... 30

3.8. Analisis Perbandingan ... 31

BAB IV EVALUASI AWAL ... 32

4.1. Analisis Konteks Awal ... 32

4.2. Evaluasi Desain Awal ... 32

4.2.1. Uji Validitas ... 33

4.2.2. Uji Reliabilitas ... 34

4.2.3. Demografi Pengguna ... 35

4.2.4. Content, Organization and Readability ... 39

4.2.5. Navigation and Links ... 41

4.2.6. User Interface Design ... 42

4.2.7. Performance and Effectiveness ... 44

4.2.8. Perbandingan Kategori Evaluasi Desain Awal ... 45

4.3. Memahami dan Menentukan Konteks Pengguna ... 47

4.3.1. Task Scenario ... 50

4.4. Analisis Kebutuhan ... 51

4.5. Membuat Desain Perbaikan ... 53

4.5.1. Task Halaman Beranda ... 54

4.5.2. Task Halaman Informasi ... 58

4.5.3. Task Halaman Opini ... 66

4.6. Evaluasi Hasil Desain Perbaikan ... 69

4.6.1. Perbandingan Kategori Evaluasi Desain Perbaikan ... 69

4.7. Analisis Perbandingan ... 71

BAB V KESIMPULAN DAN SARAN ... 78

5.1. Kesimpulan... 78

5.2. Saran ... 79

(12)

xi

DAFTAR PUSTAKA ... 80

LAMPIRAN ... 83

Lampiran 1 ... 83

Surat Perizinan Dari Pihak Sekolah ... 83

Lampiran 2 ... 84

Wawancara Dengan Pihak Sekolah ... 84

Lampiran 3 ... 87

Wawancara Responden 1 ... 87

Persona ... 90

Lampiran 4 ... 91

Hasil Kuisioner Evaluasi Awal ... 91

Hasil Kuisioner Evaluasi Perbaikan ... 94

(13)

xii

DAFTAR GAMBAR

Gambar 2. 1 Tampilan Halaman Beranda ... 8

Gambar 2. 2 Tampilan Halaman Tentang Sekolah ... 9

Gambar 2. 3 Tampilan Halaman Visi dan Misi ... 10

Gambar 2. 4 Tampilan Halaman Kepala Sekolah ... 11

Gambar 2. 5 Tampilan Halaman Prestasi Sekolah ... 12

Gambar 2. 6 Tampilan Halaman Berita ... 13

Gambar 2. 7 Tampilan Halaman Buka Berita ... 14

Gambar 2. 8 Tampilan Halaman Opini ... 15

Gambar 2. 9 Proses Evaluasi WEBUSE ... 17

Gambar 3. 1 Metode Penelitian ... 22

Gambar 4. 1 Hasil Uji Reliabilitas ... 35

Gambar 4. 2 Grafik Usia Pengguna Website ... 37

Gambar 4. 3 Grafik Jenis Kelamin Pengguna Website ... 37

Gambar 4. 4 Grafik Asal Kelas Pengguna Website ... 38

Gambar 4. 5 Grafik Intesitas Pengguna Website ... 39

Gambar 4. 6 Grafik Perbandingan Tiap Kategori ... 46

Gambar 4. 7 Persona Penentuan Konteks Pengguna ... 49

Gambar 4. 8 Tampilan Desain Baru Beranda... 55

Gambar 4. 9 Tampilan Baru Halaman Tentang Sekolah ... 59

Gambar 4. 10 Tampilan Baru Halaman Visi dan Misi ... 61

Gambar 4. 11 Tampilan Baru Halaman Kepala Sekolah ... 63

Gambar 4. 12 Tampilan Baru Halaman Prestasi Sekolah ... 65

Gambar 4. 13 Tampilan Baru Halaman Opini Guru ... 67

Gambar 4. 14 Tampilan Baru Halaman Opini Siswa ... 68

Gambar 4. 15 Grafik Perbandingan Tiap Kategori ... 70

Gambar 4. 16 Grafik Perbadingan Kategori Evaluasi Awal dan Perbaikan ... 76

(14)

xiii

DAFTAR TABEL

Tabel 2. 1 Penelitian Terdahulu ... 5

Tabel 2. 2 Pilihan Jawaban Dalam Merit ... 18

Tabel 2. 3 Hubungan Poin Usability dan Level Usability ... 19

Tabel 3. 1 Kelompok Pengguna ... 23

Tabel 3. 2 Dasar pengambilan uji validitas ... 24

Tabel 3. 3 Dasar pengambilan keputusan Cronbach’s Alpha ... 24

Tabel 3. 4 Pilihan Jawaban Dalam Merit ... 25

Tabel 3. 5 Hubungan Poin Usability dan Level Usability ... 26

Tabel 3. 6 Aspek Kategori Dalam WEBUSE... 26

Tabel 3. 7 Pernyataan Kuisioner Dalam WEBUSE ... 27

Tabel 4. 1 Kelompok Pengguna ... 32

Tabel 4. 2 Hasil Uji Validitas Kuisioner ... 33

Tabel 4. 3 Demografi Pengguna ... 36

Tabel 4. 4 Content, Organization, and Readability ... 40

Tabel 4. 5 Navigation and Links ... 41

Tabel 4. 6 User Interface Design ... 43

Tabel 4. 7 Performance and Effectiveness ... 44

Tabel 4. 8 Nilai Rata-rata Evaluasi Awal... 47

Tabel 4. 9 Hasil Wawancara Kebutuhan Responden ... 47

Tabel 4. 10 Mengakses Halaman Beranda ... 59

Tabel 4. 11 Mengakses Halaman Informasi ... 50

Tabel 4. 12 Mengakses Halaman Opini ... 51

Tabel 4. 13 Permasalahan Tiap Kategori ... 52

Tabel 4. 14 Kebutuhan Pengguna ... 52

Tabel 4. 15 Guidelines Yang Digunakan ... 53

(15)

xiv

Tabel 4. 26 Guidelines Yang Digunakan ... 62

Tabel 4. 30 Guidelines Yang Digunakan ... 68

Tabel 4. 31 Nilai Rata-rata Evaluasi Saran Desain Perbaikan ... 71

Tabel 4. 32 Content, Organization, and Readability... 71

Tabel 4. 33 Navigation and Links... 73

Tabel 4. 34 User Interface Design ... 74

Tabel 4. 35 Performance and Effectiveness ... 75

(16)

80

DAFTAR PUSTAKA

Bevan, N. (1995). Usability is quality of use. Advances in Human Factors/Ergonomics, 20(B), 349–354. https://doi.org/10.1016/S0921- 2647(06)80241-8

Chiew, T. K., & Salim, S. S. (2003). Webuse: Website usability evaluation tool.

Malaysian Journal of Computer Science, 16(1), 47–57.

dr. Gita Sekar Prihanti, M. P. K. (2016). Pengantar Biostatistik. UMMPress.

Tersedia dalam Google Books.

Erestini, T. K., Rokhmawati, R. I., & Herlambang, A. D. (2018). Evaluasi Usability dan Perbaikan Rancangan Antarmuka Pengguna Situs Website Jurusan Teknik Kimia Universitas Brawijaya Dengan Menggunakan Metode Human Centered Design ( HCD ). 2(8).

Fajrianti, B., Rachmadi, A., & Bachtiar, F. A. (2018). Evaluasi dan Perbaikan Desain Antarmuka Pengguna Situs Web SMK Negeri 1 Bangsri dengan Menggunakan WEBUSE dan Human Centered Design. Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer (J-PTIIK) Universitas Brawijaya, 2(9), 3168–3177.

Genias, C., Aknuranda, I., & Az-zahra, H. M. (2019). Evaluasi dan Perbaikan Rancangan Antarmuka Pengguna Situs Web Dinas Koperasi dan Usaha Mikro Kota Malang dengan Menggunakan Metode Human-Centered Design ( HCD ). 3(7), 7159–7165.

Grudin, J., & Pruitt, J. (2002). … , participatory design and product development:

An infrastructure for …. Proc. PDC.

https://pdfs.semanticscholar.org/eb77/6eaa198047962dabe619e9cdd3de4433 a44e.pdf%0Ahttp://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.92.6 87&rep=rep1&type=pdf

Gudjonsdottir, R. (2015). Doctoral Thesis in Human-Computer Interaction (Issue September). https://doi.org/10.13140/RG.2.1.1145.3922

Hadi, K. R., Az-zahra, H. M., & Fanani, L. (2018). Analisis Dan Perbaikan

(17)

81

Usability Aplikasi Mobile KAI Access Dengan Metode Usability Testing Dan Use Questionnaire. Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer, 2(9), 2743. http://j-ptiik.ub.ac.id

Irwandana, R., Herlambang, A. D., & Saputra, M. C. (2019). Evaluasi dan Perbaikan Rancangan Antarmuka Pengguna Situs Web Eventmalang Menggunakan Pendekatan Human Centered Design. Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer (JPTIIK) Universitas Brawijaya, 3(2), 1334–1341.

Leavitt, M. O. (2006). Research-based web design & usability guidelines (Vol.

2009, Issue July 12). http://www.usability.gov/pdfs/guidelines.html

Nurdin, Hamdhana, D., & Iqbal, M. (2018). Aplikasi Quick Count Pilkada Dengan Menggunakan Metode Random. E-Journal Techsi Teknik Informasi, 10(1), 141–154.

Perdana, R. A., Brata, K. C., & Az-zahra, H. M. (2018). Evaluasi dan Perbaikan Desain Antarmuka Pengguna Dengan Menggunakan Metode Human- Centered Design ( HCD ), WEBUSE , WCAG 2 . 0 , Research-Based Web Design & Usability Guidelines , dan Importance – Performance Analysis ( IPA ) ( Studi Kasus : PT Showa Indon. Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer, 2(11), 5155–5163.

Perdomo, E. G., Cardozo, M. A. T., Perdomo, C. A. C., & Serrezuela, R. R.

(2017). A revieew of the user based web design: Usability and information architecture. International Journal of Applied Engineering Research, 12(21), 11685–11690.

Pratiwi, D., Saputra, M. C., & Wardani, N. H. (2017). Penggunaan Metode User Centered Design (UCD) dalam Perancangan Ulang Web Portal Jurusan Psikologi FISIP Universitas Brawijaya. Jurnal Pengembangan Teknologi Informasi Dan Ilmu Komputer, 2(7), 2448–2458. http://j- ptiik.ub.ac.id/index.php/j-ptiik/article/view/1609

Sugiono. (2012). Metodelogi Penelitian Kuantitatif Kualitatif dan R&D.

Volume, J., Tahun, N., Pendidikan, J., & Huda, I. A. (2020). Research &

(18)

82

Learning in Primary Education Perkembangan Teknologi Informasi dan Komunikasi ( TIK ) Terhadap Kulaitas Pembelajaran Di Sekolah Dasar. 2.

(19)