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

ii

ii

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
PADA WEBSITE E-KOSAN

SKRIPSI

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 karuniaNya

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.
iii

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

iv

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
v

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

vi

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

vii

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-heuristicevaluation/. [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:
https://www.w3.org/Consortium/.
[9] “PHP-FIG-PHP Framework Interop Group,” PHP Framework Interop
Group, [Online]. Available: http://www.php-fig.org/.
[10] “Google

JavaScript

Style

Guide,”

[Online].

Available:

https://google.github.io/styleguide/javascriptguide.xml.
[11] S. Utama, “Perbaikan User Interface Halaman Internet Banking Dengan
Metode Usability Testing,” Juni 2011.

119

[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] M.

Velchevski,

Februari

2016.

[Online].

Available:

https://www.quora.com/What-is-the-difference-between-UX-and-UIdesigner-and-web-designer.
[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:
https://www.nngroup.com/articles/definition-user-experience/.
[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]. Available: http://www.ueq-online.org/.
[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].

120

[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 Eldery People,” Dove
Press, p. 847, 2013.
[29] PageSpeed

Insights,

11

April

2014.

[Online].

https://developers.google.com/speed/docs/insights/about.

Available:
[Diakses

22

April 2016].
[30] N. Bevan, “Quality in use: incorporating human factors into the software
engineering 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.

121

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
konsep pemrograman terstruktur. Semakin besar aplikasi yang dibangun maka
1

2

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 EKosan 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 EKosan.

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:

3

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.

4

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

5

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.

6

4.

Analisis Standar Pengkodean
Pada tahap ini dilakukan analisis standar pengkodean terhadap website EKosan 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.

7

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.

8

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

9

10

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.

11

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

12

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.

13

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.

14

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

15

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)

16

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

17

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) .

18

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.
Dalam melakukan evaluasi, menurut Jakob Nielsen terdapat sepuluh
prinsip dalam heuristic evaluation . Akan tetapi prinsip heuristik yang

19

dikembangkan oleh Jakob Nielsen memiliki cakupan yang cukup luas, sehingga
hal tersebut menjadi kekurangan tersendiri . Oleh karena itu pada penelitian ini
menggunakan prinsip heuristik yang dikembangkan oleh Dr. David Travis,
meliputi :
1. Home Page Usability
Home page adalah wajah organisasi untuk dunia di mana pengguna
memutuskan untuk berinteraksi dengan organisasi tersebut. Dibutuhkan
keseimbangan antara menampilkan jumlah item yang ditawarkan dan jumlah
konten sehingga pengguna dapat dengan mudah melakukan tugasnya.
2. Task Orientation
Sebuah website dikatakan task oriented ketika mendukung pengguna secara
efektif dan efisien untuk melengkapi tugas mereka.
3. Navigation and Information Architecture (IA)
Navigation and information architecture merupakan komponen dari halaman
website yang mendukung pengguna menemukan informasi dan menjelajahi
situs konten website.
4. Forms and Data Entry
Forms merupakan komponen website yang mengizinkan pengguna untuk
berinteraksi dengan organisasi. Forms yang baik menyediakan akses ke
fungsionalitas yang kaya walaupun pengguna hanya memberi masukan yang
minim.
5. Trust and Credibility
Sebuah website memiliki kredibilitas ketika pengguna percaya kepada konten
dan kepada organisasi tersebut. Hal ini penting untuk membentuk opini
pengguna terhadap sebuah brand.
6. Writing and Content Quality
Menulis pada website tidak sama dengan menulis untuk cetakan. Orang-orang
membaca dengan cara yang berbeda pada website dan melakukan scanning
untuk menemukan informasi yang dibutuhkan.
7. Page Layout and Visual Design

20

Poin ini menanyakan apakah dialog pada situs website memiliki estetika dan
minimalis. Desain visual yang tepat memiliki arti bahwa huruf, ikon, warna,
dan tata letak membantu pengguna untuk menyelesaikan tugasnya dan halaman
website tidak mengandung informasi yang tidak relevan.
8. Search Usability
Search merupakan salah satu cara dominan yang dilakukan pengguna untuk
berinteraksi dengan website. Sebuah mesin pencarian yang baik perlu
memahami sisi manusiawi dari aktifitas pencarian yang berarti berhubungan
dengan kesalahan ejaan dan sinonim (seperti “laptop” untuk “notebook”).
Google telah menetapkan standar mengenai bagaimana seharusnya pencarian
terlihat dan berperilaku serta banyak pedoman yang didasarkan dari praktek
terbaik ini.
9. Help, Feedback and Error Tolerance
Poin ini berguna untuk sebuah situs website dalam mencegah pengguna
melakukan kesalahan serta memiliki toleransi terhadap kesalahan tanpa adanya
tindakan minimal dari pengguna untuk melakukan perbaikan.
Akan tetapi dari sembilan prinsip tersebut tidak semua prinsip digunakan
untuk mengevaluasi website E-Kosan. Prinsip yang tidak digunakan yaitu prinsip
Task Orientation. Jadi jumlah prinsip yang digunakan hanya berjumlah delapan
buah. Alasan tidak digunakannya Task Orientation yaitu pada website E-Kosan
tidak memberikan tugas yang spesifik kepada pengguna yang menyebabkan
pengguna bekerja dalam situs website.

II.2.6.1 Kuesioner dan Sistem Penilaian
Kuesioner

yang

digunakan

dalam

metode

heuristic

evaluation

menggunakan kuesioner yang dibuat oleh Dr. David Travis dan dapat diunduh
pada http://www.userfocus.co.uk/resources/guidelines.html. Kuesioner tersebut
sudah tersedia dalam format Excel workbook yang menyertakan instruksi, 247
pertanyaan, dan perhitungan kuesioner. Penggunaan paket pertanyaan kuesioner
ini dapat disesuaikan dengan kebutuhan masing-masing website yang akan dinilai.

21

Sistem penilaian yang digunakan juga mengikuti sistem penilaian yang
dikembangkan Dr. David Travis. Pada sistem penilaiannya, Dr. David Travis
menggunakan tiga poin penilaian. Tabel II.1 menjelaskan mengenai poin
penilaian yang dipakai.

Tabel II.1 Penilaian dalam Heuristic Evaluation
Nilai
Keterangan
-1
Tidak memenuhi petunjuk pernyataan yang disediakan
0
Mendekati petunjuk pernyataan yang disediakan
1
Memenuhi petunjuk pernyataan yang disediakan
Setelah evaluator memberikan nilai pada masing-masing pernyataan
maka langkah selanjutnya yaitu menjumlahkan semua nilai dari masing-masing
prinsip. Penjumlahan nilai dari setiap prinsip ini disebut raw score. Kemudian
setelah didapatkan raw score didapatkanlah nilai per prinsip heuristik dengan
rumus sebagai berikut:

Nilai per prinsip heuristik =

x 100 %

(1)

Lalu setelah didapatkan raw score dan nilai per prinsip heuristik maka dilakukan
perhitungan rata-rata dengan rumus sebagai berikut:

(2)

Keterangan:
= rata-rata hitung
nilai sampel ke-i (nilai P1, nilai P2, nilai P3, dan seterusnya)
= banyak data

22

II.2.7 Code Refactoring
Code refactoring adalah proses merubah sistem perangkat lunak tanpa
merubah perilaku eksternal dari kode tetapi ditujukan untuk memperbaiki struktur
internal dari kode tersebut. Langkah-langkah ketika akan melakukan code
refactoring adalah sebagai berikut .
1. Melakukan tes terhadap kode
Tes perlu dilakukan dengan baik agar dapat menemukan letak kesalahan pada
kode. Menguji validasi standar kode dengan bantuan tools online juga dapat
membantu dalam menemukan kesalahan pada kode.
2. Melakukan perbaikan terhadap kode
Perbaikan terhadap kode dilakukan setelah ditemukannya kesalahan pada kode.
Perbaikan yang baik akan terus dilakukan hingga kesalahan pada program
dapat teratasi secara keseluruhan ketika dilakukan tes kembali.
Ketika memperbaiki struktur internal kode diperlukan juga standar
pengkodean sebagai acuan untuk melakukan perbaikan. Penggunaan standar
pengkodean dimaksudkan agar kode pemrograman memiliki sebuah standar atau
dasar umum. Masing-masing kode pemrograman memiliki standar pengkodean
yang berbeda. Berikut adalah penjelasan mengenai standar pengkodean yang
digunakan dalam skripsi ini:
1. Standar Pengkodean World Wide Web Consortium (W3C)
Standar pengkodean dari W3C ini digunakan sebagai analisis standar kode
HTML dan CSS. W3C adalah organisasi internasional yang bekerja untuk
mengembangkan standar web . Ketika melakukan pengecekan menggunakan
HTML dan CSS validator secara online yang disediakan oleh W3C biasanya
terdapat beberapa kesalahan yang sering ditemui. Berikut adalah contoh kesalahan
yang sering ditemui di HTML validator .

23

a. Tidak ada DOCTYPE

Gambar II.6 Kesalahan HTML – Tidak Ada DOCTYPE
Tidak adanya DOCTYPE menyebabkan web browser harus menebak
bahasa apa yang digunakan pada halaman yang ditulis developer. Oleh karena
itu untuk memperbaiki kesalahan ini perlu ditambahkan HTML atau XHTML
doctype pada awal halaman.
b. Lupa untuk menutup elemen

Gambar II.7 Kesalahan HTML – Lupa Menutup Elemen
Jika telah membuka tag di dalam dokumen HTML, developer harus ingat
untuk menutup tag tersebut di tempat yang sesuai. Jika lupa menutup elemen
dapat menyebabkan masalah yang serius pada layout. Peringatan yang biasa
muncul pada W3C validator adalah pesan seperti “end tag for “p” omitted, but
OMITTAG NO was specified” yang berarti Anda lupa untuk menutup tag
paragraf.

24

c. Missing self closing elementer

Gambar II.8 Kesalahan HTML – Missing Self Closing Elementer
Kebanyakan elemen HTML memiliki closing tag yang terpisah seperti
tetapi elemen lain seperti input, img, dan meta memiliki self

closing yang berarti mereka memiliki tanda garis miring (slash) sebelum tag
penutup seperti berikut />.
d. Lupa untuk mengkonversi karakter spesial

Gambar II.9 Kesalahan HTML – Lupa Mengkonversi Karakter Spesial
Salah satu karakter spesial yang harus dikonversi ke dalam entitas HTML
adalah tanda &. Tanda & diubah menjadi &.
e. Tidak menyandikan karakter di URL

Gambar II.10 Kesalahan HTML – Tidak Menyandikan Karakter di URL

25

Mengikuti poin sebelumnya, karakter spesial seperti ampersand juga harus
dikonversi ketika tampak di URL. Contohnya link yang digunakan PHP
memakai karakter & jadi akan lebih baik jika menulisnya dengan & untuk
menghindari error.
f. Block elemen di dalam inline elemen

Gambar II.11 Kesalahan HTML – Block Elemen Dalam Inline Elemen
Peraturan pokok HTML adalah blok elemen tidak boleh berada di dalam
inline elemen. Contoh yang sering dijumpai adalah anchor di dalam header
sebagai berikut bananas.

adalah

block elemen, jadi seharusnya membungkus inline elemen menjadi
bananas.

g. Tidak ada atribut ALT

Gambar II.12 Kesalahan HTML – Tidak Ada Atribut ALT
Setiap image yang dimasukkan ke dalam dokumen HTML harus
menggunakan atribut ALT untuk mendeskripsikan konten. Contohnya adalah
sebagai berikut: .

26

h. Menggunakan atribut “width” dan “height”

Gambar II.13 Kesalahan HTML – Menggunakan Atribut
“width” dan “