Analisis dan Perancangan User Interface Untuk Meningkatkan

User Experience Menggunakan Metode Heuristic Evaluation Pada

Website Celcofecoid

TUGAS AKHIR

NUR IKHSAN MULYA SYAHPUTRA

1112001033

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS BAKRIE

JAKARTA

2016

Universitas Bakrie

ii

Analisis dan Perancangan User Interface Untuk Meningkatkan

User Experience Menggunakan Metode Heuristic Evaluation Pada

Website Celcofecoid

TUGAS AKHIR

Diajukan sebagai salah satu syarat untuk memperoleh gelar Sarjana

Komputer

NUR IKHSAN MULYA SYAHPUTRA

1112001033

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS BAKRIE

JAKARTA

2016

Universitas Bakrie

v

KATA PENGANTAR

Puji dan syukur ke hadirat ALLAH SWT penulis dapat menyelesaikan Tugas Akhir

ini dengan baik Skripsi dengan judul ldquoAnalisis dan Perancangan User Interface

untuk meningkatkan User Experience Menggunakan Metode Heuristic Evaluation

Pada Website Celcofecoidrdquo ini ditulis untuk memenuhi salah satu syarat dalam

menyelesaikan perkuliahan pendidikan strata satu (S1) pada Program Studi

Informatika Universitas Bakrie

Banyak pihak yang telah membantu dalam penelitian dan penulisan skripsi ini

baik itu berupa bimbingan saran maupun dukungan secara moril dan materil

Oleh karena itu pada kesempatan ini penulis ingin menyampaikan rasa terima kasih

dan penghargaan kepada

1 Bapak Hoga Saragih selaku Dosen Pembimbing dan Kepala Program Studi

Informatika yang telah banyak meluangkan waktunya untuk memberikan

bimbingan saran dan perbaikan dalam menyelesaikan penelitian ini

2 Bapak Ibu dosen serta Karyawan Program Studi Informatika Universitas

Bakrie yang telah memberikan ilmu pengetahuan dan wawasan kepada

penulis selama masa perkuliahan

3 Keluarga tercinta untuk dukungan dan-doa yang sangat berarti bagi penulis

Kedua orang tua penulis (Bapak M Nurdin T dan Ibu Mimi Mariani)

saudara kandung penulis (Indha Irsyad Indhira) Om Tante Kakek Nenek

yang selalu menjadi mood booster bagi penulis serta seluruh keluarga besar

penulis lainnya

4 M Zulkifli Adlan Qowi Mardiansyah M Taufik Hafidz anak kontrakan

Terima kasih telah berbagi kebahagian canda pelajaran hidup semangat

motivasi dukungan sukacita dan kebersamaan selama ini

5 Verro Nadia Rizaldi yang senantiasa menemani penulis yang tidak pernah

lelah memberikan semangat kepada penulis dan tidak pernah lelah menjadi

pendengar yang baik

Universitas Bakrie

viii

ANALISIS DAN PERANCANGAN USER INTERFACE UNTUK

MENINGKATKAN USER EXPERIENCE MENGGUNAKAN METODE

HEURISTIC EVALUATION PADA WEBSITE CELCOFECOID

Nur Ikhsan Mulya Syahputra

ABSTRAK

Persaingan antara pemilik bisnis e-commerce saat ini semakin ketat Salah satu

faktor yang dapat mempengaruhi eksistensi suatu e-commerce adalah faktor

kenyamanan pengguna (user experience) Penelitian ini membahas mengenai

analisis dan perancangan user interface untuk meningkatkan user experience

dengan metode heuristic evaluation Metode heuristic evaluation digunakan untuk

mengetahui tingkat kebutuhan perbaikan website dari sisi user interface dan dalam

memberikan saran perbaikan berdasarkan prioritas tingkat keparahan website

Analisis dilakukan untuk mengetahui sejauh mana tingkat user experience dari segi

usability pengguna website Celcofe saat ini dan sebagai bahan perbaikan untuk

kemajuan website dari segi user experience Website Celcofe merupakan website e-

commerce yang menjual produk para artis pertama dan cukup besar di Indonesia

Penelitian ini berfokus pada persepsi evaluator dari segi kemudahan (learnability)

efisiensi (efficiency) kemudahan dalam mengingat (memorability) kesalahan

(errors) dan kenyamanan (satisfaction) terhadap user interface website Hasil

penelitian berupa sebuah perancangan user interface website baru yang didasarkan

pada hasil analisis menggunakan prinsip heuristic evaluation

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

ix

ANALYSIS AND USER INTERFACE PLAN TO ENHANCE USER

EXPERIENCE USING HEURISTIC EVALUATION METHOD ON

CELCOFECOID WEBSITE

Nur Ikhsan Mulya Syahputra

ABSTRACT

The competition between e-commerce bussiness nowadays is increasingly tight

One factor which influence e-commerce business is the user comfort (user

experience) This research explain about analysis dan user interface plan to enhance

user experience using heuristic evaluation method Heuristic evaluation method is

used to know the level of website improvement in the side of user interface and to

give improvement advice based on priorities of website severity level The analysis

is used to find out the extent of user experience level in terms usability of Celcofe

website user todays and as improvement materials for the website progress in the

side of user experience Celcofe website is e-commerce website which selling

product from famous artist and quite large in Indonesia This research focuses on

the perception of the evaluators in terms of ease (learnability) efficiency ease of

remembering (memorability) errors and comfort (satisfaction) to the websitersquos

user interface The result of this research is in the form of new user interface website

plan based on analysis result using heuristic evaluation method

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

x

DAFTAR ISI

HALAMAN ORISINALITAS iii

HALAMAN PENGESAHAN iv

KATA PENGANTAR v

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI vii

ABSTRAK viii

DAFTAR ISI x

DAFTAR GAMBAR xiii

DAFTAR TABEL xv

DAFTAR SINGKATAN xvi

BAB I PENDAHULUAN 1

11 Latar Belakang Masalah 1

12 Rumusan Masalah 6

13 Batasan Masalah 7

14 Tujuan Penelitian 7

15 Manfaat Penelitian 8

BAB II TINJAUAN PUSTAKA 9

21 Penelitian Terdahulu 9

22 Landasan Teori 14

221 Website 14

222 E-commerce 17

223 HCI (Human Computer Interaction) 19

224 UX (User Experience) 20

225 Heuristic Evaluation 22

226 Severity Ratings 27

Universitas Bakrie

xi

227 Website E-commerce Celcofecoid 28

228 Tabulasi dan Analisis Data 28

BAB III METODE PENELITIAN 30

31 Observasi Awal Website 31

32 Identifikasi Masalah 31

33 Studi Literatur 31

34 Pengumpulan Data 32

35 Analisis 35

36 Desain User Interface Website 36

37 Implementasi 36

38 Evaluasi 37

39 Hasil dan Laporan 37

BAB IV HASIL DAN PEMBAHASAN 38

41 Analisis User Interface 38

411 Objek Penelitian 38

412 Responden Penelitian 39

413 Analisis 41

414 Heuristic Evaluation 41

42 Perancangan User Interface 47

421 Homepage 48

422 Product 51

423 Detail Product 53

424 Contact Us 55

43 Implementasi User Interface 57

431 Homepage 57

432 Product 64

Universitas Bakrie

xii

433 Detail Product 67

434 Contact Us 70

44 Evaluasi UX 72

441 Hasil Evaluasi 72

442 Perbandingan Tampilan UI 75

45 Uji Statistik 80

451 Uji Validitas 80

462 Uji Reliabilitas 81

BAB V KESIMPULAN DAN SARAN 82

51 Kesimpulan 82

52 Saran 82

Daftar Pustaka 84

LAMPIRAN 87

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

ii

Analisis dan Perancangan User Interface Untuk Meningkatkan

User Experience Menggunakan Metode Heuristic Evaluation Pada

Website Celcofecoid

TUGAS AKHIR

Diajukan sebagai salah satu syarat untuk memperoleh gelar Sarjana

Komputer

NUR IKHSAN MULYA SYAHPUTRA

1112001033

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS BAKRIE

JAKARTA

2016

Universitas Bakrie

v

KATA PENGANTAR

Puji dan syukur ke hadirat ALLAH SWT penulis dapat menyelesaikan Tugas Akhir

ini dengan baik Skripsi dengan judul ldquoAnalisis dan Perancangan User Interface

untuk meningkatkan User Experience Menggunakan Metode Heuristic Evaluation

Pada Website Celcofecoidrdquo ini ditulis untuk memenuhi salah satu syarat dalam

menyelesaikan perkuliahan pendidikan strata satu (S1) pada Program Studi

Informatika Universitas Bakrie

Banyak pihak yang telah membantu dalam penelitian dan penulisan skripsi ini

baik itu berupa bimbingan saran maupun dukungan secara moril dan materil

Oleh karena itu pada kesempatan ini penulis ingin menyampaikan rasa terima kasih

dan penghargaan kepada

1 Bapak Hoga Saragih selaku Dosen Pembimbing dan Kepala Program Studi

Informatika yang telah banyak meluangkan waktunya untuk memberikan

bimbingan saran dan perbaikan dalam menyelesaikan penelitian ini

2 Bapak Ibu dosen serta Karyawan Program Studi Informatika Universitas

Bakrie yang telah memberikan ilmu pengetahuan dan wawasan kepada

penulis selama masa perkuliahan

3 Keluarga tercinta untuk dukungan dan-doa yang sangat berarti bagi penulis

Kedua orang tua penulis (Bapak M Nurdin T dan Ibu Mimi Mariani)

saudara kandung penulis (Indha Irsyad Indhira) Om Tante Kakek Nenek

yang selalu menjadi mood booster bagi penulis serta seluruh keluarga besar

penulis lainnya

4 M Zulkifli Adlan Qowi Mardiansyah M Taufik Hafidz anak kontrakan

Terima kasih telah berbagi kebahagian canda pelajaran hidup semangat

motivasi dukungan sukacita dan kebersamaan selama ini

5 Verro Nadia Rizaldi yang senantiasa menemani penulis yang tidak pernah

lelah memberikan semangat kepada penulis dan tidak pernah lelah menjadi

pendengar yang baik

Universitas Bakrie

viii

ANALISIS DAN PERANCANGAN USER INTERFACE UNTUK

MENINGKATKAN USER EXPERIENCE MENGGUNAKAN METODE

HEURISTIC EVALUATION PADA WEBSITE CELCOFECOID

Nur Ikhsan Mulya Syahputra

ABSTRAK

Persaingan antara pemilik bisnis e-commerce saat ini semakin ketat Salah satu

faktor yang dapat mempengaruhi eksistensi suatu e-commerce adalah faktor

kenyamanan pengguna (user experience) Penelitian ini membahas mengenai

analisis dan perancangan user interface untuk meningkatkan user experience

dengan metode heuristic evaluation Metode heuristic evaluation digunakan untuk

mengetahui tingkat kebutuhan perbaikan website dari sisi user interface dan dalam

memberikan saran perbaikan berdasarkan prioritas tingkat keparahan website

Analisis dilakukan untuk mengetahui sejauh mana tingkat user experience dari segi

usability pengguna website Celcofe saat ini dan sebagai bahan perbaikan untuk

kemajuan website dari segi user experience Website Celcofe merupakan website e-

commerce yang menjual produk para artis pertama dan cukup besar di Indonesia

Penelitian ini berfokus pada persepsi evaluator dari segi kemudahan (learnability)

efisiensi (efficiency) kemudahan dalam mengingat (memorability) kesalahan

(errors) dan kenyamanan (satisfaction) terhadap user interface website Hasil

penelitian berupa sebuah perancangan user interface website baru yang didasarkan

pada hasil analisis menggunakan prinsip heuristic evaluation

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

ix

ANALYSIS AND USER INTERFACE PLAN TO ENHANCE USER

EXPERIENCE USING HEURISTIC EVALUATION METHOD ON

CELCOFECOID WEBSITE

Nur Ikhsan Mulya Syahputra

ABSTRACT

The competition between e-commerce bussiness nowadays is increasingly tight

One factor which influence e-commerce business is the user comfort (user

experience) This research explain about analysis dan user interface plan to enhance

user experience using heuristic evaluation method Heuristic evaluation method is

used to know the level of website improvement in the side of user interface and to

give improvement advice based on priorities of website severity level The analysis

is used to find out the extent of user experience level in terms usability of Celcofe

website user todays and as improvement materials for the website progress in the

side of user experience Celcofe website is e-commerce website which selling

product from famous artist and quite large in Indonesia This research focuses on

the perception of the evaluators in terms of ease (learnability) efficiency ease of

remembering (memorability) errors and comfort (satisfaction) to the websitersquos

user interface The result of this research is in the form of new user interface website

plan based on analysis result using heuristic evaluation method

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

x

DAFTAR ISI

HALAMAN ORISINALITAS iii

HALAMAN PENGESAHAN iv

KATA PENGANTAR v

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI vii

ABSTRAK viii

DAFTAR ISI x

DAFTAR GAMBAR xiii

DAFTAR TABEL xv

DAFTAR SINGKATAN xvi

BAB I PENDAHULUAN 1

11 Latar Belakang Masalah 1

12 Rumusan Masalah 6

13 Batasan Masalah 7

14 Tujuan Penelitian 7

15 Manfaat Penelitian 8

BAB II TINJAUAN PUSTAKA 9

21 Penelitian Terdahulu 9

22 Landasan Teori 14

221 Website 14

222 E-commerce 17

223 HCI (Human Computer Interaction) 19

224 UX (User Experience) 20

225 Heuristic Evaluation 22

226 Severity Ratings 27

Universitas Bakrie

xi

227 Website E-commerce Celcofecoid 28

228 Tabulasi dan Analisis Data 28

BAB III METODE PENELITIAN 30

31 Observasi Awal Website 31

32 Identifikasi Masalah 31

33 Studi Literatur 31

34 Pengumpulan Data 32

35 Analisis 35

36 Desain User Interface Website 36

37 Implementasi 36

38 Evaluasi 37

39 Hasil dan Laporan 37

BAB IV HASIL DAN PEMBAHASAN 38

41 Analisis User Interface 38

411 Objek Penelitian 38

412 Responden Penelitian 39

413 Analisis 41

414 Heuristic Evaluation 41

42 Perancangan User Interface 47

421 Homepage 48

422 Product 51

423 Detail Product 53

424 Contact Us 55

43 Implementasi User Interface 57

431 Homepage 57

432 Product 64

Universitas Bakrie

xii

433 Detail Product 67

434 Contact Us 70

44 Evaluasi UX 72

441 Hasil Evaluasi 72

442 Perbandingan Tampilan UI 75

45 Uji Statistik 80

451 Uji Validitas 80

462 Uji Reliabilitas 81

BAB V KESIMPULAN DAN SARAN 82

51 Kesimpulan 82

52 Saran 82

Daftar Pustaka 84

LAMPIRAN 87

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

v

KATA PENGANTAR

Puji dan syukur ke hadirat ALLAH SWT penulis dapat menyelesaikan Tugas Akhir

ini dengan baik Skripsi dengan judul ldquoAnalisis dan Perancangan User Interface

untuk meningkatkan User Experience Menggunakan Metode Heuristic Evaluation

Pada Website Celcofecoidrdquo ini ditulis untuk memenuhi salah satu syarat dalam

menyelesaikan perkuliahan pendidikan strata satu (S1) pada Program Studi

Informatika Universitas Bakrie

Banyak pihak yang telah membantu dalam penelitian dan penulisan skripsi ini

baik itu berupa bimbingan saran maupun dukungan secara moril dan materil

Oleh karena itu pada kesempatan ini penulis ingin menyampaikan rasa terima kasih

dan penghargaan kepada

1 Bapak Hoga Saragih selaku Dosen Pembimbing dan Kepala Program Studi

Informatika yang telah banyak meluangkan waktunya untuk memberikan

bimbingan saran dan perbaikan dalam menyelesaikan penelitian ini

2 Bapak Ibu dosen serta Karyawan Program Studi Informatika Universitas

Bakrie yang telah memberikan ilmu pengetahuan dan wawasan kepada

penulis selama masa perkuliahan

3 Keluarga tercinta untuk dukungan dan-doa yang sangat berarti bagi penulis

Kedua orang tua penulis (Bapak M Nurdin T dan Ibu Mimi Mariani)

saudara kandung penulis (Indha Irsyad Indhira) Om Tante Kakek Nenek

yang selalu menjadi mood booster bagi penulis serta seluruh keluarga besar

penulis lainnya

4 M Zulkifli Adlan Qowi Mardiansyah M Taufik Hafidz anak kontrakan

Terima kasih telah berbagi kebahagian canda pelajaran hidup semangat

motivasi dukungan sukacita dan kebersamaan selama ini

5 Verro Nadia Rizaldi yang senantiasa menemani penulis yang tidak pernah

lelah memberikan semangat kepada penulis dan tidak pernah lelah menjadi

pendengar yang baik

Universitas Bakrie

viii

ANALISIS DAN PERANCANGAN USER INTERFACE UNTUK

MENINGKATKAN USER EXPERIENCE MENGGUNAKAN METODE

HEURISTIC EVALUATION PADA WEBSITE CELCOFECOID

Nur Ikhsan Mulya Syahputra

ABSTRAK

Persaingan antara pemilik bisnis e-commerce saat ini semakin ketat Salah satu

faktor yang dapat mempengaruhi eksistensi suatu e-commerce adalah faktor

kenyamanan pengguna (user experience) Penelitian ini membahas mengenai

analisis dan perancangan user interface untuk meningkatkan user experience

dengan metode heuristic evaluation Metode heuristic evaluation digunakan untuk

mengetahui tingkat kebutuhan perbaikan website dari sisi user interface dan dalam

memberikan saran perbaikan berdasarkan prioritas tingkat keparahan website

Analisis dilakukan untuk mengetahui sejauh mana tingkat user experience dari segi

usability pengguna website Celcofe saat ini dan sebagai bahan perbaikan untuk

kemajuan website dari segi user experience Website Celcofe merupakan website e-

commerce yang menjual produk para artis pertama dan cukup besar di Indonesia

Penelitian ini berfokus pada persepsi evaluator dari segi kemudahan (learnability)

efisiensi (efficiency) kemudahan dalam mengingat (memorability) kesalahan

(errors) dan kenyamanan (satisfaction) terhadap user interface website Hasil

penelitian berupa sebuah perancangan user interface website baru yang didasarkan

pada hasil analisis menggunakan prinsip heuristic evaluation

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

ix

ANALYSIS AND USER INTERFACE PLAN TO ENHANCE USER

EXPERIENCE USING HEURISTIC EVALUATION METHOD ON

CELCOFECOID WEBSITE

Nur Ikhsan Mulya Syahputra

ABSTRACT

The competition between e-commerce bussiness nowadays is increasingly tight

One factor which influence e-commerce business is the user comfort (user

experience) This research explain about analysis dan user interface plan to enhance

user experience using heuristic evaluation method Heuristic evaluation method is

used to know the level of website improvement in the side of user interface and to

give improvement advice based on priorities of website severity level The analysis

is used to find out the extent of user experience level in terms usability of Celcofe

website user todays and as improvement materials for the website progress in the

side of user experience Celcofe website is e-commerce website which selling

product from famous artist and quite large in Indonesia This research focuses on

the perception of the evaluators in terms of ease (learnability) efficiency ease of

remembering (memorability) errors and comfort (satisfaction) to the websitersquos

user interface The result of this research is in the form of new user interface website

plan based on analysis result using heuristic evaluation method

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

x

DAFTAR ISI

HALAMAN ORISINALITAS iii

HALAMAN PENGESAHAN iv

KATA PENGANTAR v

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI vii

ABSTRAK viii

DAFTAR ISI x

DAFTAR GAMBAR xiii

DAFTAR TABEL xv

DAFTAR SINGKATAN xvi

BAB I PENDAHULUAN 1

11 Latar Belakang Masalah 1

12 Rumusan Masalah 6

13 Batasan Masalah 7

14 Tujuan Penelitian 7

15 Manfaat Penelitian 8

BAB II TINJAUAN PUSTAKA 9

21 Penelitian Terdahulu 9

22 Landasan Teori 14

221 Website 14

222 E-commerce 17

223 HCI (Human Computer Interaction) 19

224 UX (User Experience) 20

225 Heuristic Evaluation 22

226 Severity Ratings 27

Universitas Bakrie

xi

227 Website E-commerce Celcofecoid 28

228 Tabulasi dan Analisis Data 28

BAB III METODE PENELITIAN 30

31 Observasi Awal Website 31

32 Identifikasi Masalah 31

33 Studi Literatur 31

34 Pengumpulan Data 32

35 Analisis 35

36 Desain User Interface Website 36

37 Implementasi 36

38 Evaluasi 37

39 Hasil dan Laporan 37

BAB IV HASIL DAN PEMBAHASAN 38

41 Analisis User Interface 38

411 Objek Penelitian 38

412 Responden Penelitian 39

413 Analisis 41

414 Heuristic Evaluation 41

42 Perancangan User Interface 47

421 Homepage 48

422 Product 51

423 Detail Product 53

424 Contact Us 55

43 Implementasi User Interface 57

431 Homepage 57

432 Product 64

Universitas Bakrie

xii

433 Detail Product 67

434 Contact Us 70

44 Evaluasi UX 72

441 Hasil Evaluasi 72

442 Perbandingan Tampilan UI 75

45 Uji Statistik 80

451 Uji Validitas 80

462 Uji Reliabilitas 81

BAB V KESIMPULAN DAN SARAN 82

51 Kesimpulan 82

52 Saran 82

Daftar Pustaka 84

LAMPIRAN 87

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

viii

ANALISIS DAN PERANCANGAN USER INTERFACE UNTUK

MENINGKATKAN USER EXPERIENCE MENGGUNAKAN METODE

HEURISTIC EVALUATION PADA WEBSITE CELCOFECOID

Nur Ikhsan Mulya Syahputra

ABSTRAK

Persaingan antara pemilik bisnis e-commerce saat ini semakin ketat Salah satu

faktor yang dapat mempengaruhi eksistensi suatu e-commerce adalah faktor

kenyamanan pengguna (user experience) Penelitian ini membahas mengenai

analisis dan perancangan user interface untuk meningkatkan user experience

dengan metode heuristic evaluation Metode heuristic evaluation digunakan untuk

mengetahui tingkat kebutuhan perbaikan website dari sisi user interface dan dalam

memberikan saran perbaikan berdasarkan prioritas tingkat keparahan website

Analisis dilakukan untuk mengetahui sejauh mana tingkat user experience dari segi

usability pengguna website Celcofe saat ini dan sebagai bahan perbaikan untuk

kemajuan website dari segi user experience Website Celcofe merupakan website e-

commerce yang menjual produk para artis pertama dan cukup besar di Indonesia

Penelitian ini berfokus pada persepsi evaluator dari segi kemudahan (learnability)

efisiensi (efficiency) kemudahan dalam mengingat (memorability) kesalahan

(errors) dan kenyamanan (satisfaction) terhadap user interface website Hasil

penelitian berupa sebuah perancangan user interface website baru yang didasarkan

pada hasil analisis menggunakan prinsip heuristic evaluation

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

ix

ANALYSIS AND USER INTERFACE PLAN TO ENHANCE USER

EXPERIENCE USING HEURISTIC EVALUATION METHOD ON

CELCOFECOID WEBSITE

Nur Ikhsan Mulya Syahputra

ABSTRACT

The competition between e-commerce bussiness nowadays is increasingly tight

One factor which influence e-commerce business is the user comfort (user

experience) This research explain about analysis dan user interface plan to enhance

user experience using heuristic evaluation method Heuristic evaluation method is

used to know the level of website improvement in the side of user interface and to

give improvement advice based on priorities of website severity level The analysis

is used to find out the extent of user experience level in terms usability of Celcofe

website user todays and as improvement materials for the website progress in the

side of user experience Celcofe website is e-commerce website which selling

product from famous artist and quite large in Indonesia This research focuses on

the perception of the evaluators in terms of ease (learnability) efficiency ease of

remembering (memorability) errors and comfort (satisfaction) to the websitersquos

user interface The result of this research is in the form of new user interface website

plan based on analysis result using heuristic evaluation method

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

x

DAFTAR ISI

HALAMAN ORISINALITAS iii

HALAMAN PENGESAHAN iv

KATA PENGANTAR v

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI vii

ABSTRAK viii

DAFTAR ISI x

DAFTAR GAMBAR xiii

DAFTAR TABEL xv

DAFTAR SINGKATAN xvi

BAB I PENDAHULUAN 1

11 Latar Belakang Masalah 1

12 Rumusan Masalah 6

13 Batasan Masalah 7

14 Tujuan Penelitian 7

15 Manfaat Penelitian 8

BAB II TINJAUAN PUSTAKA 9

21 Penelitian Terdahulu 9

22 Landasan Teori 14

221 Website 14

222 E-commerce 17

223 HCI (Human Computer Interaction) 19

224 UX (User Experience) 20

225 Heuristic Evaluation 22

226 Severity Ratings 27

Universitas Bakrie

xi

227 Website E-commerce Celcofecoid 28

228 Tabulasi dan Analisis Data 28

BAB III METODE PENELITIAN 30

31 Observasi Awal Website 31

32 Identifikasi Masalah 31

33 Studi Literatur 31

34 Pengumpulan Data 32

35 Analisis 35

36 Desain User Interface Website 36

37 Implementasi 36

38 Evaluasi 37

39 Hasil dan Laporan 37

BAB IV HASIL DAN PEMBAHASAN 38

41 Analisis User Interface 38

411 Objek Penelitian 38

412 Responden Penelitian 39

413 Analisis 41

414 Heuristic Evaluation 41

42 Perancangan User Interface 47

421 Homepage 48

422 Product 51

423 Detail Product 53

424 Contact Us 55

43 Implementasi User Interface 57

431 Homepage 57

432 Product 64

Universitas Bakrie

xii

433 Detail Product 67

434 Contact Us 70

44 Evaluasi UX 72

441 Hasil Evaluasi 72

442 Perbandingan Tampilan UI 75

45 Uji Statistik 80

451 Uji Validitas 80

462 Uji Reliabilitas 81

BAB V KESIMPULAN DAN SARAN 82

51 Kesimpulan 82

52 Saran 82

Daftar Pustaka 84

LAMPIRAN 87

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

ix

ANALYSIS AND USER INTERFACE PLAN TO ENHANCE USER

EXPERIENCE USING HEURISTIC EVALUATION METHOD ON

CELCOFECOID WEBSITE

Nur Ikhsan Mulya Syahputra

ABSTRACT

The competition between e-commerce bussiness nowadays is increasingly tight

One factor which influence e-commerce business is the user comfort (user

experience) This research explain about analysis dan user interface plan to enhance

user experience using heuristic evaluation method Heuristic evaluation method is

used to know the level of website improvement in the side of user interface and to

give improvement advice based on priorities of website severity level The analysis

is used to find out the extent of user experience level in terms usability of Celcofe

website user todays and as improvement materials for the website progress in the

side of user experience Celcofe website is e-commerce website which selling

product from famous artist and quite large in Indonesia This research focuses on

the perception of the evaluators in terms of ease (learnability) efficiency ease of

remembering (memorability) errors and comfort (satisfaction) to the websitersquos

user interface The result of this research is in the form of new user interface website

plan based on analysis result using heuristic evaluation method

Kata Kunci User Interface User Experience E-commerce Website Heuristic

evaluation

Universitas Bakrie

x

DAFTAR ISI

HALAMAN ORISINALITAS iii

HALAMAN PENGESAHAN iv

KATA PENGANTAR v

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI vii

ABSTRAK viii

DAFTAR ISI x

DAFTAR GAMBAR xiii

DAFTAR TABEL xv

DAFTAR SINGKATAN xvi

BAB I PENDAHULUAN 1

11 Latar Belakang Masalah 1

12 Rumusan Masalah 6

13 Batasan Masalah 7

14 Tujuan Penelitian 7

15 Manfaat Penelitian 8

BAB II TINJAUAN PUSTAKA 9

21 Penelitian Terdahulu 9

22 Landasan Teori 14

221 Website 14

222 E-commerce 17

223 HCI (Human Computer Interaction) 19

224 UX (User Experience) 20

225 Heuristic Evaluation 22

226 Severity Ratings 27

Universitas Bakrie

xi

227 Website E-commerce Celcofecoid 28

228 Tabulasi dan Analisis Data 28

BAB III METODE PENELITIAN 30

31 Observasi Awal Website 31

32 Identifikasi Masalah 31

33 Studi Literatur 31

34 Pengumpulan Data 32

35 Analisis 35

36 Desain User Interface Website 36

37 Implementasi 36

38 Evaluasi 37

39 Hasil dan Laporan 37

BAB IV HASIL DAN PEMBAHASAN 38

41 Analisis User Interface 38

411 Objek Penelitian 38

412 Responden Penelitian 39

413 Analisis 41

414 Heuristic Evaluation 41

42 Perancangan User Interface 47

421 Homepage 48

422 Product 51

423 Detail Product 53

424 Contact Us 55

43 Implementasi User Interface 57

431 Homepage 57

432 Product 64

Universitas Bakrie

xii

433 Detail Product 67

434 Contact Us 70

44 Evaluasi UX 72

441 Hasil Evaluasi 72

442 Perbandingan Tampilan UI 75

45 Uji Statistik 80

451 Uji Validitas 80

462 Uji Reliabilitas 81

BAB V KESIMPULAN DAN SARAN 82

51 Kesimpulan 82

52 Saran 82

Daftar Pustaka 84

LAMPIRAN 87

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

x

DAFTAR ISI

HALAMAN ORISINALITAS iii

HALAMAN PENGESAHAN iv

KATA PENGANTAR v

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI vii

ABSTRAK viii

DAFTAR ISI x

DAFTAR GAMBAR xiii

DAFTAR TABEL xv

DAFTAR SINGKATAN xvi

BAB I PENDAHULUAN 1

11 Latar Belakang Masalah 1

12 Rumusan Masalah 6

13 Batasan Masalah 7

14 Tujuan Penelitian 7

15 Manfaat Penelitian 8

BAB II TINJAUAN PUSTAKA 9

21 Penelitian Terdahulu 9

22 Landasan Teori 14

221 Website 14

222 E-commerce 17

223 HCI (Human Computer Interaction) 19

224 UX (User Experience) 20

225 Heuristic Evaluation 22

226 Severity Ratings 27

Universitas Bakrie

xi

227 Website E-commerce Celcofecoid 28

228 Tabulasi dan Analisis Data 28

BAB III METODE PENELITIAN 30

31 Observasi Awal Website 31

32 Identifikasi Masalah 31

33 Studi Literatur 31

34 Pengumpulan Data 32

35 Analisis 35

36 Desain User Interface Website 36

37 Implementasi 36

38 Evaluasi 37

39 Hasil dan Laporan 37

BAB IV HASIL DAN PEMBAHASAN 38

41 Analisis User Interface 38

411 Objek Penelitian 38

412 Responden Penelitian 39

413 Analisis 41

414 Heuristic Evaluation 41

42 Perancangan User Interface 47

421 Homepage 48

422 Product 51

423 Detail Product 53

424 Contact Us 55

43 Implementasi User Interface 57

431 Homepage 57

432 Product 64

Universitas Bakrie

xii

433 Detail Product 67

434 Contact Us 70

44 Evaluasi UX 72

441 Hasil Evaluasi 72

442 Perbandingan Tampilan UI 75

45 Uji Statistik 80

451 Uji Validitas 80

462 Uji Reliabilitas 81

BAB V KESIMPULAN DAN SARAN 82

51 Kesimpulan 82

52 Saran 82

Daftar Pustaka 84

LAMPIRAN 87

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

xi

227 Website E-commerce Celcofecoid 28

228 Tabulasi dan Analisis Data 28

BAB III METODE PENELITIAN 30

31 Observasi Awal Website 31

32 Identifikasi Masalah 31

33 Studi Literatur 31

34 Pengumpulan Data 32

35 Analisis 35

36 Desain User Interface Website 36

37 Implementasi 36

38 Evaluasi 37

39 Hasil dan Laporan 37

BAB IV HASIL DAN PEMBAHASAN 38

41 Analisis User Interface 38

411 Objek Penelitian 38

412 Responden Penelitian 39

413 Analisis 41

414 Heuristic Evaluation 41

42 Perancangan User Interface 47

421 Homepage 48

422 Product 51

423 Detail Product 53

424 Contact Us 55

43 Implementasi User Interface 57

431 Homepage 57

432 Product 64

Universitas Bakrie

xii

433 Detail Product 67

434 Contact Us 70

44 Evaluasi UX 72

441 Hasil Evaluasi 72

442 Perbandingan Tampilan UI 75

45 Uji Statistik 80

451 Uji Validitas 80

462 Uji Reliabilitas 81

BAB V KESIMPULAN DAN SARAN 82

51 Kesimpulan 82

52 Saran 82

Daftar Pustaka 84

LAMPIRAN 87

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

xii

433 Detail Product 67

434 Contact Us 70

44 Evaluasi UX 72

441 Hasil Evaluasi 72

442 Perbandingan Tampilan UI 75

45 Uji Statistik 80

451 Uji Validitas 80

462 Uji Reliabilitas 81

BAB V KESIMPULAN DAN SARAN 82

51 Kesimpulan 82

52 Saran 82

Daftar Pustaka 84

LAMPIRAN 87

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

xiii

DAFTAR GAMBAR

Gambar 11 Grafik Tingkat Kepuasanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip3

Gambar 21 Elemen Dasar UX (wwwsitepointcom)20

Gambar 31 Alur Metode Penelitianhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip30

Gambar 32 Grafik Evaluaorhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip33

Gambar 41 Logo Celcofehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip38

Gambar 42 Sebaran Responden Berdasarkan Umurhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 43 Sebaran Responden Berdasarkan Pekerjaanhelliphelliphelliphelliphelliphelliphelliphelliphellip40

Gambar 44 Alur Langkah Analisis Dengan Heuristic Evaluationhelliphelliphelliphelliphelliphellip42

Gambar 45 Nilai Rata-Rata Hasil Survei Dengan Prinsip Nielsenhelliphelliphelliphelliphelliphellip44

Gambar 46 Nilai Rata-Rata Hasil Survei Tingkat Keparahanhelliphelliphelliphelliphelliphelliphellip45

Gambar 47 Desain Rancangan Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip49

Gambar 48 desain rancangan detail menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip50

Gambar 49 Desain Rancangan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Gambar 410 Desain Rancangan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphellip54

Gambar 411 Desain Rancangan Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphellip56

Gambar 412 Tampilan Navigasi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip58

Gambar 413 Tampilan Isi Sub Menu Pada Tiap Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip59

Gambar 414 Tampilan Banner Slider Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip60

Gambar 415 Tampilan Banner Kotakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip61

Gambar 416 Tampilan Produk Pada Homepagehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 417 Tampilan Daftar Artis Berbentuk Sliderhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip62

Gambar 418 Tampilan Footerhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip63

Gambar 419 Tampilan Menu Filterhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip64

Universitas Bakrie

xiv

Gambar 420 Tampilan Gambar Deskripsi Menuhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip65

Gambar 421 Tampilan Kumpulan Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip66

Gambar 422 Tampilan Top Sellershelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip67

Gambar 423 Tampilan Gambar Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip68

Gambar 424 Tampilan Deskripsi Review dan Tagshelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip69

Gambar 425 Tampilan related productshelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip69

Gambar 426 Tampilan Informasi Kontakhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip70

Gambar 427 Tampilan Kotak Pesanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip71

Gambar 428 Perbandingan Nilai Tiap Prinsip Nielsenhelliphelliphelliphelliphelliphelliphelliphelliphelliphellip73

Gambar 429 Perbandingan Nilai Tingkat Keparahanhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip73

Gambar 430 Perbandingan Hasil Wawancarahelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip75

Gambar 431 Perbandingan Halaman Homehelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip76

Gambar 432 Perbandingan Halaman Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip77

Gambar 433 Perbandingan Halaman Detail Produkhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip78

Gambar 434 Halaman Contact Ushelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip79

Universitas Bakrie

xv

DAFTAR TABEL

Tabel 21 Rangkuman Perbandingan Penelitian Terdahuluhelliphelliphelliphelliphelliphelliphelliphellip11

Tabel 31 Rating Score Nielsenrsquoshelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip34

Tabel 32 Skala Tingkat Keparahan (Severity Ratings)helliphelliphelliphelliphelliphelliphelliphelliphelliphellip35

Tabel 41 Urutan Tingkat Prioritas Perbaikan Sistemhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Tabel 42 Hasil Uji Validitashelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip80

Tabel 42 Hasil Uji Realibilitashelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip81

Universitas Bakrie

xvi

DAFTAR SINGKATAN

HCI Human Computer Interaction

UX User Experience

UI User Interface

B2C Bussiness to Customers

B2B Bussiness to Bussiness

C2C Customers to Customers

HE Heuristic Evaluation

Universitas Bakrie

xv

DAFTAR TABEL

Tabel 21 Rangkuman Perbandingan Penelitian Terdahuluhelliphelliphelliphelliphelliphelliphelliphellip11

Tabel 31 Rating Score Nielsenrsquoshelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip34

Tabel 32 Skala Tingkat Keparahan (Severity Ratings)helliphelliphelliphelliphelliphelliphelliphelliphelliphellip35

Tabel 41 Urutan Tingkat Prioritas Perbaikan Sistemhelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip52

Tabel 42 Hasil Uji Validitashelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip80

Tabel 42 Hasil Uji Realibilitashelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip81

Universitas Bakrie

xvi

DAFTAR SINGKATAN

HCI Human Computer Interaction

UX User Experience

UI User Interface

B2C Bussiness to Customers

B2B Bussiness to Bussiness

C2C Customers to Customers

HE Heuristic Evaluation

Universitas Bakrie

xvi

DAFTAR SINGKATAN

HCI Human Computer Interaction

UX User Experience

UI User Interface

B2C Bussiness to Customers

B2B Bussiness to Bussiness

C2C Customers to Customers

HE Heuristic Evaluation