Evaluasi Antarmuka dan Pengalaman Pengguna Website Serta Code Refactoring pada Website E-Kosan

BIODATA PENULIS (RIWAYAT HIDUP) I. DATA PRIBADI

  Nama : Annisa Amelia NIM : 10112534 Tempat, Tanggal Lahir : Pati, 24 September 1994 Jenis Kelamin : Perempuan Alamat : Jl. Teuku Umar No. 105 Tegal, Jawa Tengah No. Telp : 085786834372 E-Mail : nis.annisaamelia@gmail.com II.

RIWAYAT PENDIDIKAN

  1998-2000 : TK Al-Irsyad Kota Tegal 2000-2006 : SD Negeri Mangkukusuman 1 Kota Tegal 2006-2009 : SMP Negeri 7 Kota Tegal 2009-2012 : SMA Negeri 1 Kota Tegal 2012-2016 : Universitas Komputer Indonesia

EVALUASI ANTARMUKA DAN PENGALAMAN PENGGUNA WEBSITE SERTA

CODE REFACTORING

  Diajukan untuk Menempuh Ujian Akhir Sarjana

ANNISA AMELIA 10112534 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK DAN ILMU KOMPUTER UNIVERSITAS KOMPUTER INDONESIA 2016

KATA PENGANTAR

  Puji dan syukur penulis panjatkan kehadirat Allah SWT atas rahmat dan karunia- Nya sehingga penulis dapat menyelesaikan skripsi yang berjudul “Evaluasi Antarmuka dan Pengalaman Pengguna Website Serta Code Refactoring Pada Website E-Kosan ”.

  Penyusunan skripsi ini tidak akan terwujud tanpa mendapat dukungan, bantuan dan masukan dari berbagai pihak. Untuk itu, penulis ingin menyampaikan terimakasih yang sebesar-besarnya kepada : 1.

  Allah SWT yang telah memberikan kekuatan, kesehatan, kesabaran, serta kemudahan dalam menyelesaikan skripsi.

  2. Kedua orang tua serta kedua adik yang selalu memberikan dukungan serta doa kepada penulis selama proses pengerjaan skripsi.

  3. Bapak Adam Mukharil Bachtiar, S.Kom., M.T. sebagai pembimbing yang telah memberikan arahan, saran, dan dukungan agar penulis dapat menyelesaikan skripsi.

  4. Bapak Alif Finandhita, S.Kom., M.T. sebagai reviewer yang telah memberikan saran dan koreksi yang bermanfaat bagi penulis dalam perbaikan skripsi.

  5. Bapak Iskandar Ikbal, S.T., M.Kom. sebagai penguji tiga yang telah memberikan saran dan koreksi bagi penelitian skripsi ini.

  6. Bapak Supriadi sebagai CEO website E-Kosan yang telah berbaik hati memberikan kesempatan kepada penulis untuk melakukan penelitian skripsi.

  7. Ahmad Nugraha yang telah sabar dalam memberikan bantuan dan semangat kepada penulis.

  8. Rhindu Pelangi Arhastio, Andini Qadriya Tanzil, Resmi Tresna Suci, Amanda Nurul Amalia, dan Oki Yuliani sebagai teman satu kos untuk bertukar cerita dan saling menyemangati saat menjalani masa perkuliahan dan skripsi.

  9. Teman-teman bimbingan Bapak Adam yang saling menyemangati, saling berbagi informasi, dan menjadi teman diskusi saat proses pengerjaan skripsi.

  10. Ibu Dian Dharmayanti, S.T., M.Kom. sebagai dosen wali IF-1 angkatan 2012.

  11. Teman-teman kelas IF-1 angkatan 2012 yang telah memberikan pelajaran dan pengalaman yang tak terlupakan selama masa perkuliahan kepada penulis.

  12. Teman-teman UKM Saung Budaya (SADAYA) UNIKOM yang telah memberikan semangat dan pengalaman organisasi yang berkesan selama masa perkuliahan bagi penulis.

  13. Teman-teman lain yang telah menyemangati dan memberikan dukungan kepada penulis.

  Penulis sebagai penyusun menyadari bahwa masih banyak kekurangan dari skripsi ini, baik dari materi maupun dari teknik penyajiannya. Oleh karena itu, kritik dan saran yang membangun sangat penulis harapkan. Semoga skripsi ini dapat bermanfaat bagi para pembaca.

  Bandung, 30 Juli 2016 Penulis

  

DAFTAR ISI

  ABSTRAK ............................................................................................................... i

  

ABSTRACT .............................................................................................................. ii

  KATA PENGANTAR ........................................................................................... iii DAFTAR ISI ........................................................................................................... v DAFTAR GAMBAR ........................................................................................... viii DAFTAR TABEL ................................................................................................... x DAFTAR LAMPIRAN ......................................................................................... xii

  BAB I PENDAHULUAN .................................................................................... 1 I.1 Latar Belakang Masalah ................................................................................ 1 I.2 Perumusan Masalah ....................................................................................... 2 I.3 Maksud dan Tujuan ....................................................................................... 2 I.4 Batasan Masalah ............................................................................................ 3 I.5 Metodologi Penelitian .................................................................................... 3 I.6 Sistematika Penulisan .................................................................................... 7 BAB II TINJAUAN PUSTAKA ........................................................................... 9 II.1 Tinjauan Tempat Penelitian ........................................................................... 9 II.1.1 Profil E-Kosan ............................................................................................. 9 II.1.2 Struktur Organisasi E-Kosan ..................................................................... 10 II.1.3 Logo E-Kosan ........................................................................................... 11 II.2 Landasan Teori ............................................................................................ 12 II.2.1 Usability .................................................................................................... 12 II.2.2 User Interface (UI) .................................................................................... 13 II.2.3 User Experience (UX) ............................................................................... 14 II.2.4 Hubungan User Interface (UI) dan User Experience (UX) ...................... 14 II.2.5 User Experience Questionnaire ................................................................ 15 II.2.6 Metode Heuristic Evaluation .................................................................... 17 II.2.6.1 Kuesioner dan Sistem Penilaian.............................................................. 20 II.2.7 Code Refactoring ....................................................................................... 21 II.2.8 Object Oriented Programming .................................................................. 28

  II.2.9 Post-Study System Usability Questionnaire .............................................. 29

  BAB III ANALISIS DAN PERANCANGAN SISTEM ...................................... 31 III.1 Analisis Sistem ............................................................................................ 31 III.1.1 Analisis Masalah ....................................................................................... 31 III.1.2 Analisis Sistem yang Sedang Berjalan ...................................................... 32 III.1.3 Analisis Standar Penilaian UI/UX ............................................................. 35 III.1.3.1 Analisis Prinsip Heuristik ....................................................................... 35 III.1.3.2 Analisis Pernyataan Prinsip Heuristik .................................................... 37 III.1.3.3 Pemilihan Evaluator ................................................................................ 56 III.1.3.4 Penilaian Oleh Evaluator ........................................................................ 57 III.1.3.5 Analisis Hasil Penilaian .......................................................................... 61 III.1.4 Analisis Standar Pengkodean .................................................................... 61 III.1.4.1 Standar Pengkodean HTML ................................................................... 62 III.1.4.2 Standar Pengkodean CSS ........................................................................ 64 III.1.4.3 Standar Pengkodean PHP ....................................................................... 65 III.1.4.4 Standar Pengkodean JavaScript .............................................................. 71 III.2 Perancangan Prototype ................................................................................ 72 III.2.1 Perancangan Struktur Menu ...................................................................... 72 III.2.2 Perancangan UI/UX .................................................................................. 73 III.2.3 Perancangan Pesan .................................................................................... 85 III.2.4 Jaringan Semantik ..................................................................................... 86 BAB IV IMPLEMENTASI PERBAIKAN DAN PENGUJIAN SISTEM .......... 87 IV.1 Implementasi Sistem .................................................................................... 87 IV.1.1 Perbaikan UI/UX ....................................................................................... 87 IV.1.2 Perbaikan Kode ......................................................................................... 90 IV.1.2.1 Perbaikan Kode HTML........................................................................... 90 IV.1.2.2 Perbaikan Kode CSS ............................................................................... 92 IV.1.2.3 Perbaikan Kode PHP............................................................................... 94 IV.1.2.4 Perbaikan Kode JavaScript ..................................................................... 97 IV.1.3 Perangkat Keras yang Digunakan ............................................................. 97 IV.1.4 Perangkat Lunak yang Digunakan ............................................................ 98

  IV.1.5 Implementasi Antarmuka .......................................................................... 98

  IV.2 Pengujian Sistem ......................................................................................... 99

  IV.2.1 Pengujian Beta ........................................................................................... 99

  IV.2.1.1 Kuesioner Pengujian Beta ..................................................................... 100

  IV.2.1.1.1 Hasil Kuesioner Pengujian Beta ....................................................... 101

  IV.2.1.1.2 Kesimpulan Hasil Kuesioner Pengujian Beta .................................. 105

  IV.2.1.2 Wawancara Pengujian Beta .................................................................. 105

  IV.2.1.2.1 Hasil Wawancara Pengujian Beta .................................................... 106

  IV.2.1.3 Validasi Pengkodean ............................................................................. 106

  IV.2.1.5.1 HTML............................................................................................... 107

  IV.2.1.5.2 CSS ................................................................................................... 108

  IV.2.1.5.3 PHP................................................................................................... 110

  IV.2.1.5.4 JavaScript ......................................................................................... 112

  IV.2.2 Evaluasi Pengujian Beta .......................................................................... 114

  BAB V KESIMPULAN DAN SARAN ............................................................ 115 V.1 Kesimpulan ................................................................................................ 115 V.2 Saran .......................................................................................................... 115 DAFTAR PUSTAKA ......................................................................................... 117

DAFTAR PUSTAKA

  [1] Cline, “The Difference Between UX and UI Design - Usability Geek,”

  Usability Geek,

  17 Agustus 2015. [Online]. Available: http://usabilitygeek.com/the-difference-between-ux-and-ui-design/. [Diakses 20 Juni 2016]. [2]

  Z. Zhou, “Evaluating Websites Using a Practical Quality Model,” p. 1, 2009. [3]

  H. Hayder, Object-Oriented Programming with PHP 5, Birmingham: Packt, 2007. [4]

  “PageSpeed Insights,” Google, [Online]. Available: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%

  2F%2Fbeta.e-kosan.com&tab=desktop. [Diakses 22 April 2016]. [5]

  J. Nielsen, “How to Conduct a Heuristic Evaluation,” Nielsen Norman Group,

  1 Januari 1995. [Online]. Available: https://www.nngroup.com/articles/how-to-conduct-a-heuristic- evaluation/. [Diakses 5 April 2016]. [6]

  T. Hollingsed dan D. G. Novick, “Usability Inspection Method after 15 Years of Research and Practice,” 2007. [7]

  D. Gunawan, “Analisis Dan Impelementasi Metode Heuristic Evaluation Dan Metode Code Refactoring Pada Situs Web Museum Sri Baduga,” Januari 2016.

  [8] “World Wide Web Consortium (W3C),” W3C, [Online]. Available:

  [9] “PHP-FIG-PHP Framework Interop Group,” PHP Framework Interop Group, [Online]. Availa

  [10] JavaScript Style Guide,” [Online]. Available:

  “Google [11]

  S. Utama, “Perbaikan User Interface Halaman Internet Banking Dengan Metode Usability Testing,” Juni 2011.

  [12] W. O. Galitz, The Essential Guide to User Interface Design An

  Introduction to GUI Design Principles And Techniques, 3 penyunt., Indiana: Wiley Publishing, 2007. [13] Velchevski, Februari 2016. [Online]. Available: M. [14]

  W. M. B, “User Experience (UX) Sebagai Bagian Dari Pemikiran Desain Dalam Pendidikan Tinggi Desain Komunikasi Visual,” Humaniora, vol.

  2 No 2, Oktober 2011. [15]

  J. Nielsen dan D. Norman, Februari 2016. [Online]. Available: [16]

A. Marcus, Design, User Experience, and Usability: Theories, Methods, and Tools for Designing the User Experience, Greece, 2014.

  [17] D. M. Schrepp, “User Experience Questionnaire Handbook,” 2015.

  [Online]. Availa [18]

  P. D. Sugiyono, Metode Penelitian Kuantitatif Kualitatif Dan R&D, Bandung: Alfabeta, 2014. [19]

  S. Ssemugabi, “Usability Evaluation Of a Web-Based E-Learning Application: A Study Of Two Evaluation Methods,” p. 112, 2006. [20]

  J. Nielsen, “10 Heuristics for User Interface Design: Article by Jakob Nielsen,”

  1 Januari 1995. [Online]. Available: https://www.nngroup.com/articles/ten-usability-heuristics/. [Diakses 9 Mei 2016]. [21] D. Travis, “247 web usability guidelines,” 12 April 2016. [Online].

  Available: http://www.userfocus.co.uk/resources/guidelines.html. [Diakses 11 Mei 2016]. [22]

  M. Fowler, K. Beck, J. Brant, W. Opdyke dan D. Roberts, Refactoring: Improving the Design of Existing Code, 2002. [23] Iggy, “10 Common Validation Errors and How To Fix Them,” [Online].

  Available: http://line25.com/articles/10-common-validation-errors-and- how-to-fix-them. [Diakses 27 April 2016].

  [24] C. Hester, “Ten Common CSS Mistakes,” 10 Desember 2011. [Online].

  Available: http://www.designdetector.com/2006/06/ten-common-css- mistakes.php. [Diakses 29 April 2016]. [25]

  “PHP Standard Recommendation - Wikipedia, the free encyclopedia,” [Online].

  Available: https://en.wikipedia.org/wiki/PHP_Standard_Recommendation. [Diakses

  29 April 2016]. [26]

H. N. Karimah, “Pembangunan Class Library Pada Domain Aplikasi Event Ticketing Pada Platform Windows Phone,” Desember 2015.

  [27] J. Sauro dan J. R. Lewis, Quantifying The User Experience, 2nd penyunt., United States: Morgan Kaufmann, 2012.

  [28] J. Vermeulen, J. C. Neyens, M. D. Spreeuwenberg, E. v. Rossum, W.

  Sipers, H. Habets, D. J. Hewson dan L. P. d. Witte, “User-Centered Development and Testing of A Monitoring System That Probides Feedback Regarding Physical Functioning to Eld ery People,” Dove

  Press, p. 847, 2013.

  [29] PageSpeed Insights, 11 April 2014. [Online]. Available: https://developers.google.com/speed/docs/insights/about. [Diakses 22

  April 2016]. [30]

  N. Bevan, “Quality in use: incorporating human factors into the software engine ering lifecycle”.

  [31] N. Bevan, “Quality in Use: Meeting User Needs for Quality,” Journal of System and Software, p. 7, 1999.

  [32] N. Bevan, “Quality in Use For All,” 1999. [33]

  M. Fowler, K. Beck, J. Brant, W. Opdyke dan D. Roberts, Refactoring: Improving the Design of Existing Code, 2002.

BAB I PENDAHULUAN I.1 Latar Belakang Masalah Website E-Kosan dengan alamat e-kosan.com adalah salah satu website yang

  bergerak di bidang jasa penyebaran informasi kosan untuk membantu pemilik kos dan pencari kos. Sebagai media penyedia informasi kosan, diharapkan website ini ramah terhadap penggunanya baik dari segi desain antarmuka yang jelas dan menarik, kemudahan dalam menggunakan website, serta performa website yang baik dan cepat.

  Faktor user interface (UI) dan user experience (UX) merupakan faktor kesuksesan bagi sebuah website , selain UI/UX yang menjadi faktor kesuksesan website, pengkodean beserta standar pengkodean dan waktu akses juga turut menunjang performa sebuah website . Berdasarkan penelitian awal yang mengacu pada standar User Experience Questionnaire (UEQ) hasil yang didapat oleh website E-Kosan dari segi UI dan UX belum baik. Hal tersebut dibuktikan dengan kesimpulan dari data pra penelitian yang menyatakan tingkat daya tarik yang didapat sebesar 0.694, tingkat kejelasan sebesar 0.900, tingkat efisiensi sebesar 0.658, tingkat ketepatan sebesar 0.683, tingkat stimulasi sebesar 0.678, dan tingkat kebaruan sebesar 0.369 dengan rentan -3 (sangat buruk) sampai +3 (sangat baik). Selain menyebarkan kuesioner, data penelitian awal juga didapat dari hasil tanya jawab terhadap beberapa responden. Hasil tanya jawab menyatakan bahwa

  

user interface situs website E-Kosan kurang baik dari segi desain, page layout,

dan pemilihan warna. Kualitas website tergantung pada kualitas perangkat lunak.

  Jika kualitas website jelek, maka pengguna akan dengan mudah meninggalkan website .

  Selain sisi UI/UX penelitian awal juga dilakukan dari sisi pengkodean. Dari hasil wawancara terhadap pemilik website E-Kosan dalam segi pengkodean

  

programmer pihak E-Kosan mengalami kesulitan untuk melakukan

  pengembangan fitur dan maintenance karena pihak E-Kosan menggunakan kode yang dibuat juga bertambah dan akan sulit dipelihara jika menggunakan pemrograman terstruktur . Object Oriented Programming (OOP) dapat menjadi solusi bagi programmer untuk membuat kode menjadi bagian-bagian kecil yang dikembangkan sebagai objek yang terpisah sehingga programmer dapat mengembangkan kode secara mandiri . Kemudian berdasarkan penelitian awal mengenai standar pengkodean HTML dan CSS didapatkan hasil 30 error dan 9

  

warning dari sebuah halaman website E-Kosan. Lalu berdasarkan hasil survei

  terhadap kinerja halaman website E-Kosan dengan Google PageSpeed Insights didapatkan hasil penilaian 39/100 untuk versi desktop sehingga halaman website belum bekerja secara cepat dan optimal.

  Berdasarkan uraian yang telah dijelaskan dapat disimpulkan bahwa akan dilakukan evaluasi dari segi user interface dan user experience website E-Kosan menggunakan metode heuristic evaluation. Heuristic evaluation adalah metode

  

usability engineering untuk menemukan masalah usability di dalam user interface

dan merupakan metode yang paling aktif digunakan dan paling sering diteliti .

  Kemudian akan dilakukan code refactoring untuk memperbaiki kode website E- Kosan beserta penerapan standar pengkodean. Sehingga dengan adanya evaluasi ini diharapkan akan membuat user interface dan user experience website E-Kosan menjadi lebih baik dan proses pengembangan website E-Kosan menjadi lebih mudah.

  I.2 Perumusan Masalah

  Rumusan masalah dalam penelitian ini yaitu bagaimana mengevaluasi user

  

interface dan user experience website E-Kosan menggunakan metode heuristic

evaluation dan code refactoring beserta standar pengkodean pada website E-

  Kosan.

  I.3 Maksud dan Tujuan

  Maksud dari penelitian ini adalah untuk mengevaluasi user interface dan user

  

experience website dan code refactoring pada website E-Kosan. Adapun tujuan

  dari penelitian ini adalah:

  1. Membantu pihak E-Kosan dalam memberikan rekomendasi tampilan antarmuka website agar pengguna dapat merasakan UI/UX yang lebih baik.

  2. Membantu pihak E-Kosan untuk melakukan code refactoring dan standar pengkodean sehingga memudahkan saat melakukan pengembangan lebih lanjut terhadap website E-Kosan.

  3. Membantu pihak E-Kosan untuk memperbaiki kode website E-Kosan agar dapat meningkatkan waktu akses website ketika diakses oleh pengguna.

I.4 Batasan Masalah

  Adapun batasan masalah dalam penelitian ini adalah: 1. Penelitian dilakukan dengan mengevaluasi website E-Kosan menggunakan metode heuristic evaluation yang dikembangkan oleh Dr. David Travis .

  2. Penelitian mengubah konsep pemrograman terstruktur menjadi konsep pemrograman berorientasi objek.

  3. Penelitian dilakukan untuk mengevaluasi antarmuka website E-Kosan pada tampilan desktop.

  4. Pada penelitian responsif website tidak berlaku untuk semua resolusi layar.

  Responsif website hanya berlaku untuk resolusi di atas 1280 x 720.

  5. Standar pengkodean dan validator untuk HTML dan CSS menggunakan tools dari W3C.

  6. Standar pengkodean untuk PHP menggunakan standar dari PHP-FIG yaitu PHP Standards Recommendations (PSRs) .

  7. Standar pengkodean untuk JavaScript menggunakan Google JavaScript Style Guide .

I.5 Metodologi Penelitian

  Metodologi penelitian yang digunakan dalam penelitian ini adalah metode penelitian deskriptif yang dikombinasikan dengan pendekatan kuantitatif. Metode penelitian deskriptif adalah metode yang bertujuan untuk memberikan gambaran secara sistematis dari objek penelitian. Gambar I.1 menampilkan alur dari metodologi penelitian.

  Gambar I.1 Alur Metodologi Penelitian 1.

  Pengumpulan Data Pengumpulan data yang dilakukan dalam penelitian ini adalah: a.

  Studi Literatur Studi literatur merupakan teknik pengumpulan data dengan mempelajari buku dan jurnal baik di internet ataupun perpustakaan yang berkaitan dengan kasus yang akan dibahas.

  b.

  Observasi Observasi merupakan teknik pengumpulan data dengan mengadakan pengamatan atau penelitian langsung terhadap objek penelitian. Observasi dilakukan pada website E-Kosan dengan mengamati desain antarmuka website dan sumber kode.

  c.

  Wawancara Wawancara merupakan teknik pengumpulan data dengan mengajukan pertanyaan secara langsung kepada pemilik website E-Kosan untuk mendapatkan informasi yang lebih akurat mengenai masalah dan kondisi website. Kemudian wawancara juga dilakukan dengan beberapa pengguna untuk mengetahui kondisi user interface website.

  d.

  Kuesioner Kuesioner dilakukan dengan memberikan pertanyaan kepada responden umum yang disebar melalui media sosial maupun personal chat untuk melakukan kuesioner pada tahap pra penelitian, tahap analisis, maupun tahap pasca analisis.

  2. Pengecekan Kinerja Website Pengecekan kinerja website termasuk ke dalam analisis sistem yang sedang berjalan. Proses pengecekan menggunakan bantuan dari Google PageSpeed

  Insights. Dari hasil pengecekan tersebut akan diketahui skor kinerja website

  beserta saran-saran yang diperlukan untuk lebih meningkatkan kinerja website.

  3. Analisis Standar Penilaian UI/UX Pada tahap ini dilakukan analisis standar penilaian user interface (UI) dan

  user experience (UX) terhadap website E-Kosan berdasarkan metode heuristic evaluation. Hasil dari analisis ini akan dijadikan panduan untuk

  melakukan analisis penilaian UI/UX pada langkah selanjutnya. Adapun langkah-langkah dalam analisis standar penilaian UI/UX adalah sebagai berikut: a.

  Analisis Prinsip Heuristik Analisis prinsip heuristik dilakukan untuk mengetahui apakah seluruh prinsip heuristik sesuai dengan kebutuhan website E-Kosan atau tidak.

  b.

  Analisis Pernyataan Prinsip Heuristik Analisis pernyataan prinsip heuristik dilakukan untuk menyeleksi pernyataan-pernyataan yang ada pada kuesioner.

  c.

  Pemilihan Evaluator Pemilihan evaluator dilakukan untuk mengevaluasi website E-Kosan melalui kuesioner yang sudah disiapkan.

  d.

  Penilaian Oleh Evaluator Penilaian oleh evaluator dilakukan dengan memberikan nilai tertentu pada setiap pernyataan prinsip heuristik.

  e.

  Analisis Hasil Penilaian Analisis hasil penilaian akan membantu untuk mengetahui apakah UI/UX pada website E-Kosan sudah memenuhi standar penilaian UI/UX atau belum.

  4. Analisis Standar Pengkodean Pada tahap ini dilakukan analisis standar pengkodean terhadap website E- Kosan secara menyeluruh untuk mengetahui apakah kode website E-Kosan sudah memenuhi standar pengkodean atau belum. Adapun langkah-langkah dalam analisis standar pengkodean adalah sebagai berikut: a.

  Analisis Kode Analisis kode dilakukan pada kode HTML, CSS, PHP, dan JavaScript pada website E-Kosan.

  b.

  Analisis Kesalahan Kode Analisis kesalahan kode dilakukan untuk mengetahui jenis kesalahan kode dan dampaknya bagi website E-Kosan. Hasil analisis ini dapat digunakan sebagai referensi perbaikan kode pada tahap selanjutnya.

  5. Perancangan Prototype Pada tahap ini dilakukan perancangan prototype berupa UI/UX menggunakan mockup berdasarkan hasil analisis sebelumnya.

  6. Perbaikan UI/UX Perbaikan UI/UX dilakukan berdasarkan poin-poin analisis standar penilaian UI/UX yang tidak memenuhi standar pada tahap sebelumnya.

  7. Perbaikan Kode Pada tahap ini dilakukan perbaikan kode yang tidak sesuai dengan standar pengkodean dari tahap sebelumnya agar nantinya didapatkan standar kode yang lebih baik dan valid. Perbaikan kode ini juga dikenal dengan istilah code refactoring.

  8. Pembangunan Prototype Pada tahap ini dilakukan pembangunan prototype website berdasarkan perancangan prototype yang telah dilakukan sebelumnya.

  9. Pengujian Prototype Pada tahap pengujian dilakukan uji fungsionalitas yang telah dibangun pada

  

prototype untuk menguji apakah UI/UX dan pengkodean sudah memenuhi

kriteria yang sesuai dengan tujuan atau belum.

I.6 Sistematika Penulisan

  Untuk menentukan gambaran secara umum mengenai penelitian yang akan dilakukan, maka sistematika penulisan dari penelitian ini adalah sebagai berikut:

  BAB I PENDAHULUAN Bab I membahas mengenai latar belakang masalah, perumusan

  masalah, maksud dan tujuan, batasan masalah, metode penelitian, dan sistematika penulisan laporan.

  BAB II TINJAUAN PUSTAKA Bab II membahas mengenai tinjauan tempat penelitian meliputi

  profil instansi, struktur organisasi, logo instansi, visi dan misi, dan landasan teori menyangkut kasus yang akan dibahas di penelitian ini.

  BAB III ANALISIS DAN PERANCANGAN SISTEM Bab III membahas mengenai tahapan untuk menganalisis masalah

  pada sistem dan menjalankan serangkaian proses untuk mengatasi masalah tersebut. Proses analisis meliputi analisis standar penilaian UI/UX, analisis standar pengkodean, serta perancangan sistem.

  BAB IV IMPLEMENTASI PERBAIKAN DAN PENGUJIAN SISTEM Bab IV membahas mengenai implementasi perbaikan dan pengujian

  sistem. Tahap implementasi merupakan tahap pembangunan sistem yang sudah dianalisis dan dirancang sebelumnya. Kemudian dilakukan pengujian sistem yang telah dibangun.

  BAB V KESIMPULAN DAN SARAN Bab V membahas mengenai kesimpulan dan saran yang sudah

  diperoleh dari hasil penelitian. Bagian kesimpulan menjelaskan hasil dari penelitian yang telah dilakukan dan bagian saran merupakan masukan untuk penelitian selanjutnya.

BAB II TINJAUAN PUSTAKA II.1 Tinjauan Tempat Penelitian Awalnya ide membangun E-Kosan bermula dari tugas besar mata kuliah Analisis dan Desain Sistem Informasi pada program studi Teknik Informatika Universitas Komputer Indonesia. Kemudian E-Kosan telah mengalami beberapa

  tahap pengembangan dan didirikan pada tanggal 22 November 2012 oleh pendirinya yang bernama Supriadi dan mulai dipublikasikan pada tanggal 12 Desember 2012.

  Berdasarkan data dari Google Analytics bahwa sampai April 2015 jumlah pengguna yang mengunjungi situs E-Kosan adalah sebanyak 84.943 orang. Sedangkan untuk fanpage Facebook sudah mencapai 3.252 penggemar dan akun

  

Twitter E-Kosan sudah mencapai 4.694 pengikut. Melihat respon yang baik dari

  pengguna situs E-Kosan dan keseriusan pemilik E-Kosan membuat situs ini dapat bertahan hingga sekarang.

II.1.1 Profil E-Kosan

  E-Kosan adalah salah satu aplikasi berorientasi website yang bergerak di bidang jasa penyebaran informasi kosan. Saat ini E-Kosan fokus untuk menyediakan informasi kosan yang up to date untuk daerah Bandung, Jawa Barat. Pengguna E-Kosan terdiri dari pemilik kosan dan pencari kosan. Pemilik kosan dapat mendaftarkan kosan miliknya agar dipublikasikan di situs E-Kosan. Sedangkan pencari kosan dapat mendaftarkan dirinya untuk mencari kosan yang diinginkan.

  Visi E-Kosan adalah menjadi yang terbaik di bidang pengiklanan informasi kos-kosan dan memiliki cabang di kota-kota pendidikan yang ada di Indonesia. Kemudian misi E-Kosan adalah mengutamakan informasi yang benar dan pelayanan yang baik kepada pencari kos, mencakup semua rumah kos-kosan yang ada di Bandung, dan menjadi peserta dalam event-event kampus sebagai bentuk promosi.

  E-Kosan dapat dijadikan solusi bagi pencari kosan terutama mahasiswa ketika ingin mencari kosan. Pencari kosan tidak perlu mencari kosan dengan mendatangi kosan satu per satu secara manual. Pencari kosan cukup membuka situs E-Kosan untuk mencari dan memilih kosan yang kira-kira sesuai dengan keinginan kemudian bisa langsung menghubungi pemilik kosan atau langsung mendatangi kosan tersebut.

  II.1.2 Struktur Organisasi E-Kosan Struktur organisasi E-Kosan dapat dilihat pada Gambar II.1.

  

Gambar II.1 Struktur Organisasi E-Kosan

  Penjelasan setiap bagian dari struktur organisasi diatas adalah sebagai berikut: a.

  Owner

  Owner memiliki kewajiban dalam menyediakan modal yang harus dikeluarkan untuk kebutuhan perusahaan dalam mengembangkan e-kosan.com.

  b.

  Dokumentasi Dokumentasi mempunyai tugas pokok melaksanakan pengumpulan pengolahan data dalam rangka pelaksanaan kegiatan evaluasi pendokumentasian dan pelaporan kegiatan unsur-unsur organisasi di e-kosan.com.

  c.

  Head Marketing

  Head marketing bertanggung jawab terhadap kelancaran dan terlaksananya

  tujuan pemasaran sesuai dengan strategi dan sasaran pemasaran yang ditetapkan oleh e-kosan.com. d.

  Public Speaking

  Public speaking mempunyai tugas pokok yaitu menyampaikan pesan atau ide

  kepada publik dengan metode yang sesuai sehingga publik bisa memahami pesan atau ide yang disampaikan dan memperoleh manfaat dari pesan tersebut.

  e.

  Keuangan Keuangan mempunyai tugas pokok melaksanakan penyusunan rencana kegiatan, pengkoordinasian, pembinaan, dan pengendalian terhadap anggaran yang terjadi di e-kosan.com f. Designer Designer mempunyai tugas pokok membuat desain website e-kosan.com.

  Tujuannya adalah mengembangkan desain website e-kosan.com menjadi lebih baik dari desain sebelumnya sehingga pengguna dapat menikmati tampilan website e-kosan pada layar komputer, mobile, maupun tablet.

  g.

  Programmer

  Programmer mempunyai tugas pokok untuk membangun atau

  mengembangkan website e-kosan.com terutama pada tahap construction dengan melakukan coding, mengimplementasikan requirement dan desain proses bisnis ke komputer dengan menggunakan algoritma atau logika dan bahasa pemrograman, serta melakukan testing terhadap website e-kosan.com.

  II.1.3 Logo E-Kosan Logo yang digunakan oleh E-Kosan dapat dilihat pada Gambar II.2.

  

Gambar II.2 Logo E-Kosan

  II.2 Landasan Teori

  II.2.1 Usability

  Menurut International Standards Organization (ISO) yaitu ISO 9241-11 tahun 1995 yang mengatur mengenai standar ergonomi untuk pekerjaan kantor dengan visual display terminal, usability adalah sejauh mana sebuah produk bisa digunakan oleh pengguna tertentu untuk tujuan tertentu dengan efektif, efisien, dan kepuasan dalam konteks penggunaan tertentu. Efektivitas mengacu pada keakuratan dan kelengkapan pengguna untuk mencapai tujuan tertentu. Efisiensi berkaitan dengan sumber daya yang dikeluarkan dalam hubungannya dengan akurasi dan kelengkapan pengguna untuk mencapai tujuan. Kepuasan mengacu pada kenyamanan dan penerimaan penggunaan .

  Sedangkan menurut Jakob Nielsen, usablility adalah set atribut kualitas yang menilai seberapa mudah user interface yang digunakan. Usability website terdiri atas lima kualitas komponen yaitu: a.

  Learnability

  Learnability adalah konsep yang menilai kemampuan situs web untuk

  menyediakan kemudahan dalam menyelesaikan tujuan pengunjung situs web saat pertama kali penggunaannya.

  b.

  Memorability

  Memorability adalah konsep yang menilai kemampuan situs web untuk

  menyediakan kemudahan bagi pengunjung situs web setelah mereka sudah lama tidak menggunakan situs tersebut dalam jangka waktu tertentu.

  c.

  Efficiency

  Efficiency adalah konsep yang menilai bagaimana pengunjung situs web

  dengan cepat menyelesaikan tujuannya, setelah mereka mengetahui dengan baik situs web tersebut.

  d.

  Satisfaction

  Satisfaction adalah konsep yang menilai apakah pengunjung dapat nyaman dengan desain pada sebuah situs web. e.

  Errors

  Errors adalah konsep yang menilai jumlah kesalahan yang pengunjung situs

  web sebabkan ketika dalam penggunaannya, tingkat keparahan pada kesalahan, dan bagaimana kemudahan bagi pengunjung dalam penanggulangan kesalahannya.

  Berdasarkan kedua pernyataan diatas maka dapat disimpulkan bahwa pengertian usability adalah sebuah tolak ukur yang menilai tentang penggunaan sebuah produk (website) oleh pengguna berdasarkan lima aspek yaitu learnability,

  

memorability, efficiency, satisfaction, dan errors. Daya guna (usability)

  merupakan unsur penting dalam Human Computer Interaction (HCI). Usability yang baik menggambarkan sistem tersebut mudah digunakan, tidak menimbulkan kekhawatiran bagi pengguna, dan mudah dipelajari.

II.2.2 User Interface (UI)

  Menurut e-book karangan Wilbert O Galitz yang berjudul The Essential

  

Guide to User Interface Design An Introduction to GUI Design Priciples And

Techniques, user interface adalah bagian dari komputer dan perangkat lunak yang

  dapat dilihat, didengar, disentuh, diajak bicara, dan yang dapat dimengerti secara langsung oleh manusia . Dengan kata lain user interface dapat dikatakan sebagai teknik dan mekanisme dari tampilan antarmuka untuk berinteraksi dengan pengguna.

  Menurut situs website www.quora.com user interface adalah desain yang sebenarnya dari antarmuka yang akan memfasilitasi interaksi yang menyenangkan dan bermanfaat antara pengguna dan produk (situs website) .

  Berdasarkan kedua pernyataan tersebut, maka dapat ditarik kesimpulan bahwa user interface adalah bagian dari komputer dan perangkat lunak yang mengatur tampilan antarmuka untuk pengguna dan memfasilitasi interaksi yang menyenangkan antara pengguna dan sistem (situs website). UI juga bisa diartikan sebagai hasil akhir dari UX yang dapat dilihat.

  II.2.3 User Experience (UX)

  Menurut definisi dari ISO 9241-210, user experience adalah persepsi atau pengalaman seseorang dan responnya dari penggunaan sebuah produk, sistem, atau jasa. User experience menilai seberapa kepuasan dan kenyamanan seseorang terhadap sebuah produk, sistem, dan jasa .

  Menurut Jakob Nielsen , user experience mencakup seluruh aspek interaksi terhadap pengguna dengan perusahaan, layanan, dan produk-produknya. Berdasarkan kedua pernyataan di atas dapat disimpulkan bahwa user

  

experience adalah hal-hal yang dirasakan seseorang terhadap penggunaan produk

  (situs website) yang menilai tentang tingkat kemudahan dan kenyamanan terhadap fungsionalitas yang disajikan oleh sebuah website.

  II.2.4 Hubungan User Interface (UI) dan User Experience (UX)

  UI dan UX memiliki konsep yang berbeda akan tetapi mereka memiliki hubungan yang dekat satu dengan yang lain. Berdasarkan pengertian UI dan UX pada subbab II.2.2 dan II.2.3 di atas, dapat disimpulkan bahwa sebuah website yang memiliki tampilan antarmuka yang baik akan tetapi sulit untuk digunakan menggambarkan UI yang baik tetapi tidak untuk UX. Sedangkan sebuah website yang terlihat sangat berguna akan tetapi terlihat berantakan atau kurang menarik menggambarkan UX yang hebat tetapi tidak untuk UI . Contoh UI yang diterapkan pada tampilan sebuah website dapat dilihat pada gambar Gambar II.3.

  

Gambar II.3 Contoh UI pada Website Dalam penerapannya UX terkadang tidak membutuhkan sebuah UI untuk terlihat. Contohnya yaitu halaman newsfeed Facebook, ketika pengguna melakukan scrolling newsfeed Facebook maka pada saat tampilan newsfeed telah mencapai dasar layar maka secara otomatis halaman newsfeed akan melakukan

  

refresh tanpa memerlukan reaksi pengguna untuk mengklik sebuah tombol. Hal

  itu termasuk UX karena pengguna dapat merasakan sebuah fungsionalitas dari website.

II.2.5 User Experience Questionnaire

  User Experience Questionnaire (UEQ) adalah sebuah kuesioner yang

  bertujuan untuk mengukur user experience dengan cepat. Terdapat 6 skala pengukuran yang terbagi menjadi 26 pertanyaan di dalam UEQ, yaitu .

  a.

  Attractive (Daya Tarik) Seberapa besar daya tarik dari sebuah produk. Misal: bagus atau jelek, atraktif atau tidak atraktif.

  b.

  Perpicuity (Kejelasan) Seberapa besar kejelasan dari sebuah produk. Misal: mudah dipahami atau sulit dipahami.

  c.

  Efficiency (Efisiensi) Seberapa besar pengguna dapat menyelesaikan tugasnya tanpa usaha yang besar atau efisien. Misal: cepat atau lambat, praktis atau tidak praktis.

  d.

  Dependability (Ketepatan) Seberapa besar ketepatan yang dirasakan oleh pengguna melalui kontrol yang ia miliki. Misal: dapat diprediksi atau tidak dapat diprediksi, mendukung atau menghalangi.

  e.

  Stimulation (Stimulasi) Seberapa besar motivasi untuk menggunakan produk. Misal: bermanfaat atau kurang bermanfaat, menarik atau tidak menarik.

  f.

  Novelty (Kebaruan) Seberapa besar kebaruan dari produk. Misal: kreatif atau tidak kreatif, konservatif atau inovatif.

  Daya tarik merupakan dimensi valensi yang murni, tidak termasuk aspek kualitas apapun. Kejelasan, efisiensi, dan ketepatan tergolong ke dalam aspek kualitas pragmatis yang berorientasi kepada tujuan sehingga pengguna harus melakukan tugas untuk mencapai tujuan melalui website. Sedangkan stimulasi dan kebaruan merupakan aspek kualitas hedonis yang tidak berorientasi pada tujuan sehingga pengguna hanya melakukan akses saja pada website tanpa perlu mencapai tujuan. Berikut adalah struktur pertanyaan yang tergolong ke dalam skala pengukuran pada UEQ .

  

Gambar II.4 Struktur Skala Pengukuran UEQ

  UEQ menggunakan skala pengukuran semantic differential yang hampir mirip dengan skala Likert yang digunakan untuk mengukur sikap, pendapat, dan persepsi seseorang atau sekelompok orang tentang fenomena sosial . Berikut adalah daftar pertanyaan yang diajukan oleh UEQ yang ditunjukkan oleh Gambar II.5 .

  

Gambar II.5 Daftar Pertanyaan UEQ

II.2.6 Metode Heuristic Evaluation

  Menurut Jakob Nielsen heuristic evaluation adalah metode usability

engineering untuk menemukan masalah usability di dalam user interface.

  

Heuristic evaluation melibatkan evaluator dalam jumlah sedikit untuk memeriksa

  tampilan antarmuka dan mengkritiknya dengan mengenali prinsip usability (heuristic) .

  Kelebihan dari metode ini yaitu relatif mudah digunakan, tidak menghabiskan banyak biaya, tidak membuang banyak waktu pengguna, dan dapat mengidentifikasi banyak masalah. Sedangkan kelemahan dari metode ini adalah pengevaluasi harus memiliki keahlian user interface yang baik untuk menilai sebuah website . Berikut adalah lima tahap pada standar proses heuristic

  evaluation: 1.

  Perencanaan Evaluasi (Plan The Evaluation) Pada tahap ini diharuskan menetapkan tujuan dari penelitian untuk kemudian dikomunikasikan kepada pengevaluasi untuk persiapan tahap selanjutnya.

  2. Pemilihan Evaluator (Choose Your Evaluators) Pada tahap ini dilakukan pemilihan siapa pengevaluasi yang akan diikutsertakan dalam penelitian. Pengevaluasi dapat terdiri dari kalangan

  usability specialist, sesama programmer, dan pengguna internet yang potensial.

  Berdasarkan penelitian Nielsen Nielsen menyarankan menggunakan tiga hingga lima evaluator untuk melakukan metode heuristic evalution. Hal ini dinilai cukup untuk mengetahui sebanyak 65% hingga 75% dari beragam masalah usability yang ada .

  3. Beri Penjelasan Singkat Pada Evaluator (Brief The Evaluators) Pada tahap ini akan memberikan penjelasan singkat kepada calon pengevaluasi tentang metode heuristic evaluation. Pengevaluasi akan diberikan pedoman penilaian berupa sekumpulan pertanyaan tentang usability situs website.

  4. Pelaksanaan Evaluasi (Conduct The Evaluation) Pada tahap ini setiap pengevaluasi akan mulai melakukan evaluasi terhadap website dengan menggunakan pedoman penilaian yang mengacu pada metode

  heuristic evaluation.

  5. Analisa Hasil Evaluasi (Analyze The Results) Pada tahap ini akan dilakukan analisa hasil dari observasi yang dilakukan oleh pengevaluasi pada website. Hasilnya akan berupa rekomendasi yang akan bermanfaat bagi pengembangan website.