TUGAS AKHIR

ANALISIS USER INTERFACE DAN USER

EXPERIENCE TERHADAP WEBSITE PARIWISATA

MENGGUNAKAN USER CENTERED DESIGN DAN

USER EXPERIENCE QUESTIONNAIRE

(Studi Kasus: Kabupaten Banyumas)

HILMAN SINGGIH WICAKSANA

16102160

PROGRAM STUDI S1 TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI DAN INFORMATIKA

INSTITUT TEKNOLOGI TELKOM PURWOKERTO

2020

ii

TUGAS AKHIR

ANALISIS USER INTERFACE DAN USER

EXPERIENCE TERHADAP WEBSITE PARIWISATA

MENGGUNAKAN USER CENTERED DESIGN DAN

USER EXPERIENCE QUESTIONNAIRE

(Studi Kasus: Kabupaten Banyumas)

USER INTERFACE AND USER EXPERIENCE

ANALYSIS OF TOURISM WEBSITE USING USER

CENTERED DESIGN AND USER EXPERIENCE

QUESTIONNAIRE (Case Study: Banyumas Regency)

Disusun Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer

HILMAN SINGGIH WICAKSANA

16102160

PROGRAM STUDI S1 TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI DAN INFORMATIKA

INSTITUT TEKNOLOGI TELKOM PURWOKERTO

2020

iii

iv

v

vi

KATA PENGANTAR

Puji syukur penulis panjatkan kepada rahmat Allah SWT, karena atas berkat

dan rahmat-Nya, penulis dapat menyelesaikan Tugas Akhir ini dengan sebaik-

baiknya. Penulisan Tugas Akhir ini dilakukan dalam rangka memenuhi salah satu

syarat untuk mencapai gelar Sarjana pada program studi S1 Teknik Informatika

Institut Teknologi Telkom Purwokerto. Penulis menyadari bahwa tanpa adanya

doa, dukungan, bantuan, dan bimbingan dari berbagai pihak dari awal hingga akhir

masa perkuliahan sangat tidak mudah bagi penulis dalam menyelesaikan laporan.

Oleh karena itu, penulis sangat berterimakasih kepada:

1. Allah SWT, karena atas izin-Nya, penulis dapat menyelesaikan penulisan

Tugas Akhir ini dengan lancar.

2. Bapak dan Ibu penulis yang telah banyak memberikan perhatian, motivasi,

semangat, doa, dan dukungan yang tak henti-hentinya.

3. Bapak Didi Supriyadi S.T., M.Kom., selaku Dekan Fakultas Teknologi

Industri dan Informatika (FTII) dan Bapak Fahrudin Mukti Wibowo, S.Kom.,

M.Eng., selaku Ketua Program Studi S1 Teknik Informatika Institut

Teknologi Telkom Purwokerto yang turut memberikan doa dan dukungan

kepada penulis.

4. Bapak Yudha Saintika, S.T., M.T.I. dan Ibu Citra Wiguna, S.Kom., M.Kom.,

selaku Dosen Pembimbing yang dengan senantiasa sabar membimbing,

memberi pengarahan, dan memotivasi penulis dalam menyelesaikan Tugas

Akhir ini dengan sebaik-baiknya.

5. Bapak Muhammad Zidny Naf’an, Lc., S.Kom., M.Kom., selaku Dosen Wali

penulis yang telah membimbing dengan sepenuh hati dari semester 1 hingga

semester 6 dan Bapak Wahyu Adi Prabowo, S.Kom., M.B.A., M.Kom.,

selaku Dosen Wali penulis yang telah membimbing dengan sebaik-baiknya

pada semester 7.

6. Rekan-rekan terbaik penulis yang senantiasa memberikan doa, dukungan, dan

motivasi selama belajar di Institut Teknologi Telkom Purwokerto.

Akhir kata, penulis berharap semoga Allah SWT berkenan membalas segala

kebaikan semua pihak yang telah membantu dan semoga Tugas Akhir ini membawa

manfaat bagi pengembangan ilmu.

Purwokerto, 15 Januari 2020

Penulis

vii

DAFTAR ISI

Halaman

HALAMAN PENGESAHAN PEMBIMBING ................................................. iii

HALAMAN PERNYATAAN KEASLIAN TUGAS AKHIR ........................... v

KATA PENGANTAR ........................................................................................ vi

DAFTAR ISI ...................................................................................................... vii

DAFTAR GAMBAR ........................................................................................ ix

DAFTAR LAMPIRAN ....................................................................................... xii

ABSTRAK ......................................................................................................... xiv

ABSTRACT ......................................................................................................... xv

BAB I PENDAHULUAN ................................................................................... 1

1.1. Latar Belakang Masalah ....................................................................... 1

1.2. Rumusan Masalah ................................................................................ 7

1.3. Tujuan Penelitian .................................................................................. 7

1.4. Manfaat Penelitian ............................................................................... 7

1.5. Batasan Masalah .................................................................................. 7

BAB II TINJAUAN PUSTAKA ........................................................................ 8

2.1. Penelitian Sebelumnya ...................................................................... 8

2.2. Dasar Teori ........................................................................................... 14

2.2.1. Website Pariwisata ........................................................................... 14

2.2.2. User Centered Design ..................................................................... 14

2.2.3. User Interface .................................................................................. 16

2.2.4. User Experience ............................................................................... 17

2.2.5. Human-Computer Interaction ......................................................... 17

2.2.6. User Experience Questionnaire ....................................................... 18

2.2.7. Bootstrap .......................................................................................... 20

viii

2.2.8. CodeIgniter ...................................................................................... 20

2.2.9. Populasi dan Sampel ........................................................................ 21

BAB III METODOLOGI PENELITIAN............................................................ 23

3.1. Objek dan Subjek Penelitian ................................................................ 23

3.2. Tahapan Penelitian ............................................................................... 23

3.2.1. Rumusan Masalah ............................................................................ 24

3.2.2. Studi Literatur ................................................................................. 24

3.2.3. Evaluasi Desain Awal ...................................................................... 24

3.2.4. Implementasi UCD ......................................................................... 24

3.2.5. Kesimpulan ...................................................................................... 25

3.3. Teknik Pengumpulan Data ................................................................... 25

3.4. Analisis Data ........................................................................................ 26

BAB IV HASIL PENGUJIAN DAN ANALISIS ............................................. 27

4.1. Evaluasi Desain Awal .......................................................................... 27

4.2. Implementasi UCD ............................................................................... 34

4.2.1. Memahami dan Menentukan Konteks Pengguna ............................ 35

4.2.2. Menspesifikasikan Kebutuhan Pengguna ........................................ 41

4.2.3. Membuat Perbaikan Rancangan Antarmuka ................................... 44

4.2.4. Mengevaluasi Hasil Perbaikan Rancangan Antarmuka ................... 50

BAB V KESIMPULAN DAN SARAN ............................................................. 58

5.1. Kesimpulan ......................................................................................... 58

5.2. Saran ..................................................................................................... 58

DAFTAR PUSTAKA ........................................................................................ 59

LAMPIRAN ...................................................................................................... 62

ix

DAFTAR GAMBAR

Halaman

Gambar 1.1. Diagram Total Jumlah Pengunjung Wisata di Kabupaten Banyumas

Lima Tahun Terakhir .............................................................................................. 3

Gambar 2.1. Tahapan User Centered Design (UCD) .......................................... 15

Gambar 2.2. Aspek-aspek pada User Experience Questionnaire (UEQ) ............. 19

Gambar 3.1. Diagram Alur Penelitian................................................................... 23

Gambar 4.1. Skala UEQ Desain Awal dalam Format Tabel................................. 32

Gambar 4.2. Skala UEQ Desain Awal dalam Format Grafik ............................... 32

Gambar 4.3. Hasil Benchmark dari Desain Awal ................................................. 33

Gambar 4.4. Diagram Lingkaran Golongan Usia dari Pengguna ......................... 39

Gambar 4.5. Diagram Jenis Kelamin dari Pengguna ............................................ 40

Gambar 4.6. Diagram Pengalaman Mengaplikasikan Komputer dari Pengguna.. 40

Gambar 4.7. Use Case Diagram Desain Awal ..................................................... 41

Gambar 4.8. Use Case Diagram Desain Baru ...................................................... 42

Gambar 4.9. Mockup Tampilan Home pada Desain Baru ..................................... 44

Gambar 4.10.a. Tampilan Beranda pada Desain Awal ......................................... 45

Gambar 4.10.b. Tampilan Beranda pada Desain Baru .......................................... 45

Gambar 4.11.a. Tampilan dari Menu Wisata Jika Diklik pada Desain Awal ....... 46

Gambar 4.11.b. Tampilan dari Menu Wisata Jika Diklik pada Desain Baru ........ 46

Gambar 4.12.a. Tampilan dari Menu Wisata Kuliner pada Desain Awal ............. 47

Gambar 4.12.b. Tampilan dari Menu Kuliner pada Desain Baru ......................... 47

Gambar 4.13.a. Tampilan dari Menu Event pada Desain Awal ............................ 47

Gambar 4.13.b. Tampilan dari Menu Event pada Desain Baru ............................ 47

Gambar 4.14.a. Tampilan dari Halaman Akomodasi Hotel pada Desain Awal ... 48

Gambar 4.14.b. Tampilan dari Halaman Akomodasi Hotel pada Desain Baru .... 48

Gambar 4.15.a. Tampilan Halaman UMKM pada Desain Awal .......................... 48

Gambar 4.15.b. Tampilan Halaman UMKM pada Desain Baru ........................... 48

Gambar 4.16. Skala UEQ Desain Baru dalam Format Tabel ............................... 54

x

Gambar 4.17. Skala UEQ Desain Baru dalam Bentuk Grafik .............................. 55

Gambar 4.18. Hasil Benchmark dari Desain Baru ................................................ 55

xi

DAFTAR TABEL

Halaman

Tabel 1.1. Keberadaan Website Pariwisata di Pulau Jawa ..................................... 1

Tabel 2.1. Ringkasan Penelitian Terdahulu .......................................................... 13

Tabel 4.1. Tingkatan Tidak Baik Berdasarkan Jawaban dari Responden ............. 27

Tabel 4.2. Tingkatan Baik Berdasarkan Jawaban dari Responden ....................... 29

Tabel 4.3. Koefisien Reliabilitas Cronbach Alpha pada Desain Awal ................. 30

Tabel 4.4. Interpretasi dari Benchmark pada Desain Awal ................................... 34

Tabel 4.5. Tabel Konteks Pengguna dari Hasil Wawancara ................................. 35

Tabel 4.6. Kanal Informasi dan Kegunaan pada Desain Baru .............................. 43

Tabel 4.7. Evaluasi Desain Baru ........................................................................... 50

Tabel 4.8. Koefisien Reliabilitas Cronbach Alpha pada Desain Baru .................. 52

Tabel 4.9. Interpretasi dari Benchmark pada Desain Baru.................................... 56

xii

DAFTAR LAMPIRAN

Halaman

Lampiran 1. Rekapitulasi Pengunjung Objek Wisata Kabupaten Banyumas Lima

Tahun Terakhir ...................................................................................................... 62

Lampiran 2. Identitas Diri Narasumber Saptono Supriyanto ................................ 65

Lampiran 3. Transkrip Wawancara dengan Narasumber Drs. Saptono Supriyanto

............................................................................................................................... 66

Lampiran 4. Identitas Diri Narasumber Arif Rachman Achmadi ......................... 69

Lampiran 5. Transkrip Wawancara dengan Narasumber Arif Rachman Ahmadi 70

Lampiran 6. Identitas Diri Narasumber Ana Amalia ............................................ 71

Lampiran 7. Transkrip Wawancara dengan Narasumber Ana Amalia ................. 72

Lampiran 8. Identitas Diri Narasumber Hadi Purwono ........................................ 73

Lampiran 9. Transkrip Wawancara dengan Narasumber Hadi Purwono ............. 74

Lampiran 10. Identitas Diri Narasumber Niza Hastin .......................................... 75

Lampiran 11. Transkrip Wawancara dengan Narasumber Niza Hastin ................ 76

Lampiran 12. Identitas Diri Narasumber Eko Wibowo Yudhi Setyo Nugroho .... 77

Lampiran 13. Transkrip Wawancara dengan Narasumber Eko Wibowo Yudhi

Setyo Nugroho ...................................................................................................... 78

Lampiran 14. Identitas Diri Narasumber Adi Setyawan ....................................... 81

Lampiran 15. Transkrip Wawancara dengan Narasumber Adi Setyawan ............ 82

Lampiran 16. Identitas Diri Narasumber Embar Susilo ........................................ 85

Lampiran 17. Transkrip Wawancara dengan Narasumber Embar Susilo ............. 86

Lampiran 18. Identitas Diri Narasumber Kusmantono ......................................... 88

Lampiran 19. Transkrip Wawancara dengan Narasumber Kusmantono .............. 89

Lampiran 20. Identitas Diri Narasumber Suwardi ................................................ 90

Lampiran 21. Transkrip Wawancara dengan Narasumber Suwardi ..................... 91

Lampiran 22. Dokumentasi Kegiatan ................................................................... 92

Lampiran 23. Data Kuesioner UEQ pada Desain Awal ........................................ 94

Lampiran 24. Data Kuesioner UEQ pada Desain Baru......................................... 95

xiii

Lampiran 25. Mockup Antarmuka Desain Baru ................................................... 96

Lampiran 26. Source Code Website .................................................................... 100