PROPOSAL TUGAS AKHIR

PENGEMBANGAN WEBSITE PROGRAM STUDI TEKNIK

INFORMATIKA POLITEKNIK NEGERI PONTIANAK

OLEH:
ALVIAN TEDDY CAHYA PUTRA
3201816023

PROGRAM STUDI D-III TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI PONTIANAK
2021
 HALAMAN PENGESAHAN

PENGEMBANGAN WEBSITE PROGRAM STUDI TEKNIK

INFORMATIKA POLITEKNIK NEGERI PONTIANAK

Proposal Tugas Akhir

Program Studi D-III Teknik Informatika
Jurusan Teknik Elektro

Oleh:
Alvian Teddy Cahya Putra
3201816023

Dosen Pembimbing :

Suheri, ST.,M.Cs.
NIP. 198307172008121005

Telah dipertahakankan di depan penguji pada tanggal 22 Maret 2021 dan

dinyatakan memenuhi syarat sebagai Proposal Tugas Akhir.

Dosen Penguji:
Penguji I Penguji II

Ferry Faisal, S.S.T., M.T. Freska Rolansa, S.T., M.Cs.

NIP. 197302061995011001 NIP. 198603192008121002
Mengetahui :
Ketua Program Studi Koordinator Tugas Akhir
D-III Teknik Informatika

Suheri, ST.,M.Cs. Lindung Siswanto, S.Kom., M.Eng.

NIP. 198307172008121005 NIP. 198406112019031012

i
 HALAMAN PERNYATAAN ORISINALITAS

Saya yang bertanda tangan dibawah ini :

Nama : Alvian Teddy Cahya Putra
NIM : 3201816023
Jurusan / Program Studi : Teknik Elektro / Teknik Informatika
Judul Proposal : Pengembangan Website Program Studi Teknik
Informatika Politeknik Negeri Pontianak
Menyatakan dengan sebenar-benarnya bahwa penulisan proposal Tugas Akhir ini
berdasarkan hasil penelitian, pemikiran dan pemaparan asli dari saya sendiri, baik
untuk naskah proposal maupun kegiatan yang tercantum sebagai bagian dari
proposal Tugas Akhir ini. Jika terdapat karya orang lain, saya akan mencantumkan
sumber yang jelas.
Demikian pernyataan ini saya buat dengan sesungguhnya dan apabila di kemudian
hari terdapat penyimpangan dan ketidakbenaran dalam pernyataan ini, maka saya
bersedia menerima sanksi akademik berupa pencabutan gelar yang telah diperoleh
karena karya tulis ini dan sanksi lain sesuai dengan peraturan yang berlaku di
Politeknik Negeri Pontianak.
Demikian pernyataan ini saya buat dalam keadaan sadar tanpa paksaan dari pihak
mana pun.

Pontianak, 21 Maret 2021

Yang membuat pernyataan,

Materai
10000

Alvian Teddy Cahya Putra

3201816023

ii
 DAFTAR ISI

HALAMAN PENGESAHAN.................................................................................. i
HALAMAN PERNYATAAN ORISINALITAS .................................................... ii
DAFTAR ISI .......................................................................................................... iii
DAFTAR TABEL ................................................................................................... v
DAFTAR GAMBAR ............................................................................................. vi
DAFTAR LAMPIRAN ......................................................................................... vii
1. Judul ................................................................................................................ 1
2. Latar Belakang ................................................................................................ 1
3. Rumusan Masalah ........................................................................................... 3
4. Batasan Masalah.............................................................................................. 3
5. Tujuan Penelitian ............................................................................................ 4
6. Manfaat Penelitian .......................................................................................... 4
7. Metodologi Penelitian ..................................................................................... 5
Listen to Customer.................................................................................... 5
Build/Revise Mock-up ............................................................................... 6
Customer Test Drives Mock-up ................................................................ 6
8. Landasan Teori ................................................................................................ 6
Tinjauan Pustaka ...................................................................................... 6
Dasar Teori ............................................................................................... 8
8.2.1. Usability ............................................................................................ 8
8.2.2. Evaluasi Heuristik ............................................................................. 8
8.2.3. UML .................................................................................................. 9
8.2.4. Website.............................................................................................. 9
8.2.5. Front End........................................................................................... 9
8.2.6. Back end .......................................................................................... 10
8.2.7. PHP ................................................................................................. 10
8.2.8. Framework Laravel ......................................................................... 10
8.2.9. Bootstrap ......................................................................................... 10
8.2.10. XAMPP ....................................................................................... 11
9. Rancangan Sistem ......................................................................................... 11
9.1 Gambaran Sistem Lama ......................................................................... 11
9.2 Gambaran Sistem Baru ........................................................................... 23
9.3 Pemodelan Sistem .................................................................................. 24

iii
10. Jadwal Penyelesaian Tugas Akhir.............................................................. 25
DAFTAR PUSTAKA ........................................................................................... 26
LAMPIRAN .......................................................................................................... 27

iv
 DAFTAR TABEL

Tabel 1. Severity Ratings......................................................................................... 9

Tabel 2. Nilai Total Severity Rating...................................................................... 11
Tabel 3. Ulasan dan Rekomendasi Perbaikan Evaluasi Heuristik ........................ 13
Tabel 4. Jadwal Penyelesaian Tugas Akhir........................................................... 25

v
 DAFTAR GAMBAR

Gambar 1. Metode Waterfall................................................................................... 5

Gambar 2. No Masalah 1 ...................................................................................... 16
Gambar 3. No Masalah 2 ...................................................................................... 16
Gambar 4. No Masalah 3 ...................................................................................... 16
Gambar 5. No Masalah 4 ...................................................................................... 16
Gambar 6. No Masalah 5 ...................................................................................... 17
Gambar 7. No Masalah 6 ...................................................................................... 17
Gambar 8. No Masalah 7 ...................................................................................... 17
Gambar 9. No Masalah 8 ...................................................................................... 18
Gambar 10. No Masalah 9 .................................................................................... 18
Gambar 11. No Masalah 10 .................................................................................. 18
Gambar 12. No Masalah 11 .................................................................................. 18
Gambar 13. No Masalah 12 .................................................................................. 19
Gambar 14. No Masalah 13 .................................................................................. 19
Gambar 15. No Masalah 14 .................................................................................. 19
Gambar 16. No Masalah 15 .................................................................................. 20
Gambar 17. No Masalah 16 .................................................................................. 20
Gambar 18. No Masalah 17 .................................................................................. 21
Gambar 19. No Masalah 18 .................................................................................. 22
Gambar 20. No Masalah 19 .................................................................................. 22
Gambar 21. Diagram Use Case Website Program Studi Teknik Informatika....... 24

vi
 DAFTAR LAMPIRAN

Lampiran 1. Nilai Severity Ratings UI/UX Designer PT. Kreasi Putra Hotama... 27
Lampiran 2. Nilai Severity Ratings UI Designer Rootpixel ................................. 28
Lampiran 3. Nilai Severity Ratings UX Researcher PT. Kreasi Putra Hotama .... 29

vii
1. Judul
Pengembangan Website Program Studi Teknik Informatika Politeknik Negeri
Pontianak.
2. Latar Belakang
Program Studi Diploma III Teknik Informatika Jurusan Teknik Elektro
Politeknik Negeri Pontianak, mulai diselenggarakan pada 11 Juni 2009 dengan izin
penyelenggaraan Program Studi berdasarkan SK Nomor 898/D/T/2009 dan
beralamat di Jl. Jenderal Ahmad Yani Kota Pontianak. Dalam upaya
memperkenalkan Program Studi D-III Teknik Informatika kepada masyarakat salah
satu cara yang dilakukan adalah dengan melakukan penyampaian informasi.
Informasi yang disampaikan berupa pengumuman dan agenda. Informasi tersebut
disampaikan melalui media informasi berupa website. Dengan adanya website
Program Studi D-III Teknik Informatika, masyarakat tidak perlu datang langsung
ke gedung Program Studi D-III Teknik Informatika, cukup menggunakan komputer
ataupun perangkat mobile yang terhubung ke internet untuk mengakses informasi.
Website Program Studi D-III Teknik Informatika memiliki 2 bagian, yaitu
bagian front end dan bagian back end, yang diakses oleh kelompok pengguna yang
terdiri dari pengguna umum, operator dan administrator.
Front end adalah segala sesuatu yang menghubungkan antara pengguna
dengan sistem back end, biasanya merupakan sebuah user interface dimana
pengguna akan berinteraksi dengan sistem. Back end atau sering disebut
server side pada dasarnya adalah tempat proses suatu aplikasi atau sistem
mengelola data berupa proses penambahan, pengubahan dan penghapusan
data. Back end menangani segala sesuatu yang biasanya tidak dilihat atau
berinteraksi langsung kepada pengguna, seperti database dan server [1].
Pengguna umum hanya memiliki akses di bagian front end. Pada bagian front end
terdapat fitur profil, dosen, mahasiswa, fasilitas, pengumuman, galeri, agenda dan
download. Operator dan administrator memiliki akses di bagian back end. Operator
tidak diberikan akses penuh di bagian back end, operator hanya memiliki akses pada
fitur halaman statis, agenda, buku tamu, running text, berita, download, polling, dan
galeri foto, sedangkan administrator memiliki hak akses penuh di bagian back end,
yang terdiri dari fitur setting web, setting menu, manajemen berita, album, running
text, buku tamu, agenda, banner, polling, download, dan kontak.

1
 Menurut [2], salah satu aspek penting dari sebuah website adalah Usability
yang menentukan tingkat efektivitas, efisiensi, dan kepuasan pengguna dalam
menggunakan aplikasi. Untuk mengetahui usability dari sebuah website terdapat
beberapa metode evaluasi, yaitu Think-Aloud Evaluation (TA), Cognitive
Walkthrough (CW), dan Heuristic Evaluation (HE). Berdasarkan tiga metode
tersebut, metode evaluasi heuristik memiliki nilai yang paling baik hampir di
seluruh ukuran perbandingan [3].
Untuk mengetahui Usability dari website Program Studi D-III Teknik
Informatika Politeknik Negeri Pontianak, penulis telah melakukan evaluasi
heuristik.
Evaluasi heuristik adalah metode evaluasi untuk menemukan masalah
penggunaan (Usability) dalam desain antar muka (user interface) suatu
aplikasi menggunakan 10 prinsip yang terdiri dari H-1 (Visibility of System
Status), H-2 (Match Between System and The Real Word), H-3 (User Control
and Freedom), H-4 (Consistency and Standards), H-5 (Error Prevention), H-
6 (Recognition Rather Than Recall), H-7 (Flexibility and Efficiency of Use),
H-8 (Aesthetic and Minimalist Design), H-9 (Helps User Recognize,
Diagnose, and Recovers Errors), dan H-10 (Help and Documentation) [4].
dan melibatkan expert dengan jumlah kecil sebagai evaluator [5].
Evaluasi heuristik dilakukan menggunakan metode severity rating, yaitu
metode penilaian yang digunakan untuk memprioritaskan masalah Usability
mana yang akan diselesaikan terlebih dahulu berdasarkan rating tertinggi
dimulai dari skala 0 (Bukan masalah kegunaan sama sekali), 1 (Masalah
kosmetik saja, tidak perlu diperbaiki kecuali waktu tambahan tersedia), 2
(Masalah minor, perbaikan ini harus diberi prioritas rendah), 3 (Masalah
mayor, penting untuk diperbaiki serta harus diberi prioritas tinggi), dan 4
(Masalah catastrophic atau masalah fatal, perlu dilakukan perbaikan sebelum
sistem digunakan oleh pengguna) [4].
Evaluasi heuristik pada penelitian ini dilakukan di halaman front end website
Program Studi D-III Teknik Informatika Politeknik Negeri Pontianak, oleh 3 orang
expert evaluator. Berdasarkan hasil evaluasi heuristik yang telah dilakukan, website
Program Studi D-III Teknik Informatika menghasilkan 20 skor temuan
permasalahan dari 10 prinsip evaluasi heuristik. Masalah utama terdapat pada
website yang belum responsive (prinsip H-7, yaitu Flexibility and Efficiency of Use)
dan Estetika (prinsip H-8, yaitu Aesthetic and Minimalist Design) dengan nilai
severity rating masing-masing adalah 3,5 dan 3. Selain itu, berdasarkan hasil
wawancara penulis dengan ketua Program Studi D-III Teknik Informatika adalah

2
belum adanya fitur yang dapat memberikan informasi kepada masyarakat secara
umum sebagai daya tarik bagi calon mahasiswa maupun pengguna lulusan, terkait
dengan profil lulusan, capaian pembelajaran, kompetensi lulusan, kurikulum, hasil
tugas akhir terbaik mahasiswa, dan testimoni lulusan. Oleh karena itu, perlu adanya
pengembangan terhadap website tersebut, untuk menangani permasalahan yang ada
dan penambahan fitur yang diperlukan.
Fitur-fitur yang akan dikembangkan di dalam website antara lain, profil,
dosen, mahasiswa, fasilitas, galeri, pengumuman, agenda dan download. Selain itu
terdapat penambahan fitur yang memberikan informasi kepada masyarakat secara
umum sebagai daya tarik bagi calon mahasiswa maupun pengguna lulusan, yaitu
profil lulusan, capaian pembelajaran, kompetensi lulusan, kurikulum, hasil tugas
akhir terbaik mahasiswa, profil dosen, kerja sama dan testimoni lulusan.
Berdasarkan latar belakang masalah yang telah dibahas, maka penulis
mengangkat judul “Pengembangan Website Program Studi Teknik Informatika
Politeknik Negeri Pontianak”.
3. Rumusan Masalah
Berdasarkan latar belakang yang telah dikemukakan sebelumnya, maka
rumusan masalah yang penulis tetapkan adalah bagaimana pengembangan website
Program Studi Teknik Informatika Politeknik Negeri Pontianak untuk
meningkatkan nilai Usability yang telah peroleh dari evaluasi heuristik sebelumnya
dan penambahan fitur profil lulusan, capaian pembelajaran, kompetensi lulusan,
kurikulum, hasil tugas akhir terbaik mahasiswa, kutipan jurnal dan testimoni
lulusan.
4. Batasan Masalah
Batasan masalah yang terdapat dalam penelitian Tugas Akhir ini adalah
sebagai berikut:
1) Aplikasi dikembangkan berbasis Website.
2) Kelompok pengguna terdiri dari pengguna umum, operator dan
administrator.
3) Fitur untuk kelompok pengguna administrator adalah mengelola konten
statis, mengelola carousel, mengelola berita, mengelola agenda, manajemen
user, mengelola berkas, mengelola galeri.

3
 4) Fitur untuk kelompok pengguna operator adalah mengelola carousel,
mengelola berita, mengelola berkas dan mengelola agenda.
5) Fitur untuk kelompok pengguna umum atau pengunjung adalah beranda,
tentang program studi, kurikulum, capaian pembelajaran, hasil tugas akhir
terbaik mahasiswa, testimoni lulusan, berita, agenda, berkas, profil dosen,
kerja sama dan galeri.
6) Website yang dikembangkan dibangun menggunakan Laravel versi 7
(framework bahasa pemrograman PHP), Bootstrap versi 4 (framework
CSS), XAMPP versi 7.2.34, dan Visual Studio Code versi 1.54.1.
7) Evaluasi heuristik hanya dilakukan pada bagian front end.
8) Expert evaluator dalam penelitian ini adalah UI/UX Designer PT Kreasi
Putra Hotama, UI Designer Root Pixel dan UX Researcher PT Kreasi Putra
Hotama.
5. Tujuan Penelitian
Penelitian yang dilakukan oleh penulis memiliki tujuan yang akan dicapai
yaitu untuk menjadikan website Program Studi D-III Teknik Informatika sebagai
media penyampaian informasi yang lebih lengkap daripada sebelumnya dan
memiliki tingkat usability yang lebih baik, dengan harapan agar pengguna menjadi
lebih mudah dalam mengakses informasi yang ada di dalam website Program Studi
D-III Teknik Informatika.
6. Manfaat Penelitian
Adapun manfaat yang didapatkan dari penelitian ini meliputi:
1) Bagi Penulis
Memahami konsep evaluasi heuristik dalam menemukan masalah Usability
dalam desain antar muka aplikasi dan dapat melatih penulis dalam
menerapkan pengetahuan serta ilmu-ilmu mengenai pembangunan dan
perancangan website yang telah diperoleh selama menjalani perkuliahan.
2) Bagi Program Studi Teknik Informatika Politeknik Negeri Pontianak
Dapat menjadi media penyampaian informasi dan promosi kepada
masyarakat.

4
7. Metodologi Penelitian
Adapun metodologi penelitian yang dilakukan penulis untuk menyelesaikan
berbagai permasalahan yang terjadi di atas dengan menggunakan metode prototype
dengan tahapan-tahapan, yaitu listen to customer, build/revise mock-up dan
customer test-drives mock-up seperti yang ditunjukkan pada Gambar 1 [6].

Gambar 1. Metode Waterfall

Listen to Customer
Listen to customer (mendengarkan pelanggan) merupakan tahap
mengumpulkan kebutuhan dari sistem yang akan dibuat. Kebutuhan tersebut
dimulai dari pengumpulan data dengan metode sebagai berikut:
1) Observasi
Observasi merupakan salah satu metode pengumpulan data yang dilakukan
dengan cara pengamatan langsung. Objek yang diamati penulis yaitu
website Program Studi D-III Teknik Informatika Politeknik Negeri
Pontianak mulai dari bagian front end dan bagian back end, dan website
perguruan tinggi terkenal sebagai sumber referensi desain dan tata letak
webiste.
2) Studi Literatur
Studi Literatur merupakan pengumpulan data untuk mendapatkan informasi
atau data dari penelitian terdahulu, jurnal, dan teori-teori pendukung lainnya
yang berhubungan dengan usability, evaluasi heuristik dan pembuatan
website.
3) Wawancara

5
 Wawancara merupakan metode yang dilakukan untuk mengumpulkan data
secara langsung dengan melakukan tanya jawab kepada pihak-pihak terkait.
Penulis melakukan wawancara kepada Ketua Program Studi D-III Teknik
Informatika Politeknik Negeri Pontianak, serta melakukan evaluasi
heuristik kepada UI/UX Designer PT Kreasi Putra Hotama, UI Designer
Root Pixel dan UX Researcher PT Kreasi Putra Hotama.
Build/Revise Mock-up
Build/revise mock-up (Membangun/memperbaiki mock-up) merupakan tahap
perancangan untuk membangun sistem yang akan dilakukan dengan membangun
sistem yang dilakukan dengan membuat tampilan antar muka pengguna (User
Interface) berdasarkan hasil dari evaluasi heuristik, dan diimplementasikan
menggunakan Laravel versi 7 (framework bahasa pemrograman PHP), Bootstrap
versi 4 (framework CSS), XAMPP versi 7.2.34, dan Visual Studio Code versi
1.54.1.
Customer Test Drives Mock-up
Customer test drives mock-up (Uji tes mock-up ke Pelanggan) merupakan
tahap uji coba sistem yang dilakukan pengguna untuk memastikan kesesuaian
dengan kebutuhan perangkat lunak. Apabila pengujian telah selesai dan tidak
terdapat perbaikan maka sistem dapat digunakan oleh pengguna.
8. Landasan Teori
Tinjauan Pustaka
Adapun sumber referensi yang diambil dalam penelitian ini antara lain
sebagai berikut:
1) Analisis User Interface Pada Website UIN Sunan Kalijaga Yogyakarta
Menggunakan Metode Evaluasi Heuristik [7]
Tujuan dari penelitian ini adalah menganalisis desain antarmuka website
sistem informasi akademik UIN Sunan Kalijaga Yogyakarta untuk
memenuhi kebutuhan pengguna dengan menggunakan metode evaluasi
heuristik.
Hasil dari penelitian ini yaitu menunjukkan bahwa desain antarmuka
website Sistem Informasi Akademik UIN Sunan Kalijaga Yogyakarta
secara umum sudah cukup baik berdasarkan hasil evaluasi, tetapi ada

6
 beberapa hal yang perlu diperbaiki terutama pada aspek visibilitas dari
status sistem, Kesesuaian antara sistem, adanya pengenalan, serta
fleksibilitas dan efisiensi dengan rata-rata penilaian pada severity rating 2
yang berarti masalah usability yang kecil, perbaikan dilakukan dengan
prioritas rendah.
2) Perancangan User Experience Menggunakan Metode Human Centered
Design Pada Aplikasi Mobile Portal Berita Tabloidjubi [5]
Tujuan dari penelitian ini adalah untuk merancang kepuasan pengguna (user
experience) dalam pengguna aplikasi Mobile Portal Berita Tabloidjubi
dengan melakukan evaluasi heuristik sebagai tahap identifikasi masalah
yang ada pada aplikasi. Setelah permasalahan diidentifikasi pada evaluasi
tahap pertama maka akan dilakukan perancangan user experience
menggunakan metode Human Centered Design yang didasarkan pada
temuan masalah.
Hasil dari penelitian ini yaitu identifikasi dan analisis pada masalah
Usability dan rekomendasi rancangan untuk perbaikan lebih lanjut berupa
high-fidelity prototype sebagai gambaran solusi.
3) Evaluasi Usability Pada Antarmuka Pengguna Aplikasi PLN Mobile
Menggunakan Metode Evaluasi Heuristik [4]
Tujuan dari penelitian ini adalah untuk mengetahui permasalahan Usability
pada antarmuka aplikasi PLN Mobile menggunakan evaluasi heuristik.
Hasil dari penelitian ini memberikan rekomendasi perbaikan desain berupa
perbaikan tata letak, perubahan tampilan dan penambahan fungsi
berdasarkan hasil evaluasi heuristik, yang sangat berguna untuk digunakan
sebagai pertimbangan pihak PLN Mobile dalam memperbaiki aplikasi
tersebut.
4) Rancang Bangun Website Sekolah Madrasah Aliyah Yasti Sekura
Kabupaten Sambas [8]
Tujuan dari penelitian ini adalah untuk merancang dan membangun website
Sekolah Madrasah Aliyah Yasti Sekura Kabupaten Sambas untuk
membantu pihak sekolah mempromosikan dan menginformasikan hal-hal

7
 yang berkaitan dengan Madrasah Aliyah Yasti Sekura dengan
menggunakan framework Laravel.
Hasil dari penelitian ini yaitu website sistem informasi Sekolah Madrasah
Aliyah Yasti Sekura Kabupaten Sambas.
Dari tinjauan pustaka di atas penulis menggunakan metode evaluasi heuristik
untuk mengetahui masalah usability pada website Program Studi D-III Teknik
Informatika dan framework Laravel dalam pengembangannya.
Dasar Teori
8.2.1. Usability
Usability adalah sejauh mana sebuah produk dapat digunakan oleh pengguna
tertentu untuk mencapai tujuan tertentu dengan efektif, efisiensi dan kepuasan
pengguna dalam menggunakan aplikasi. Secara umum pengertian Usability adalah
atribut dari kualitas yang digunakan untuk mengevaluasi bagaimana mudahnya
sebuah antar muka digunakan [2]. Dalam melaksanakan evaluasi terdapat metode
yang sering digunakan dalam tahap pengembangan untuk menemukan
permasalahan usability, yaitu Think-Aloud Evaluation (TA), Cognitive
Walkthrough (CW), dan Heuristic Evaluation (HE).
8.2.2. Evaluasi Heuristik
Evaluasi heuristik dikembangkan oleh Jakob Nielsen dengan Rolf Molich
pada tahun 1990.
Evaluasi heuristik merupakan metode evaluasi untuk menemukan masalah
penggunaan (Usability) dalam desain antar muka suatu aplikasi menggunakan
10 prinsip yang terdiri dari H-1 (Visibility of System Status), H-2 (Match
Between System and The Real Word), H-3 (User Control and Freedom), H-4
(Consistency and Standards), H-5 (Error Prevention), H-6 (Recognition
Rather Than Recall), H-7 (Flexibility and Efficiency of Use), H-8 (Aesthetic
and Minimalist Design), H-9 (Helps User Recognize, Diagnose, and Recovers
Errors), dan H-10 (Help and Documentation). Tahapan dalam melakukan
evaluasi heuristik dimulai dengan penentuan dan pengarahan evaluator,
setelah itu dilanjutkan dengan evaluator yang melakukan inspeksi pada
tampilan antarmuka aplikasi. Setelah melakukan inspeksi, selanjutnya
pengambilan dan pengumpulan data. Pengumpulan data dilakukan dengan
pengisian kuesioner dan wawancara. Para Evaluator akan diminta untuk
memberikan penilaian permasalahan yang melanggar 10 prinsip Usability
melalui kuesioner severity rating. Severity rating adalah metode penilaian
yang digunakan untuk memprioritaskan masalah Usability mana yang akan
diselesaikan terlebih dahulu berdasarkan rating tertinggi atau masalah
Usability yang paling serius. Berikut skala dari severity rating [4]:

8
 Tabel 1. Severity Ratings
Severity Ratings Keterangan
0 Bukan masalah kegunaan sama sekali

Masalah Kosmetik saja, tidak perlu diperbaiki kecuali

1
waktu tambahan tersedia
Masalah Minor, perbaikan ini harus diberi prioritas
2
rendah
Masalah Mayor, penting untuk diperbaiki dan harus
3
diberikan prioritas tinggi
Masalah catastrophic (masalah fatal), perlu dilakukan
4
perbaikan sebelum sistem digunakan oleh pengguna

8.2.3. UML
UML adalah salah satu standar bahasa yang banyak digunakan di dunia
industri untuk mendefinisikan requirement, membuat analisis dan desain, serta
menggambarkan arsitektur dalam pemrograman berorientasi objek [9].
8.2.4. Website
Website atau sering disingkat dengan istilah situs adalah sejumlah halaman
yang menyajikan konten berupa berkas-berkas gambar, video, atau jenis-jenis
berkas lainnya. Website dapat diakses oleh banyak orang di seluruh dunia dengan
menggunakan komputer ataupun perangkat mobile.
Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web
yang dapat diakses melalui jaringan seperti internet, ataupun jaringan wilayah lokal
(LAN) melalui alamat internet yang dikenali sebagai URL [4].
Dalam perangkat mobile terdapat istilah responsive design.
Responsive Design adalah sebuah pembangunan website dengan
menampilkan design yang elegan dengan ukuran yang sesuai pada tiap device
untuk dapat menerapkan solusi bagi berbagai resolusi layar, density, dan rasio
aspek pada banyak jenis perangkat yang dapat diakses melalui smartphone,
tablet, desktop, ataupun smart TV tanpa memperlihatkan perbedaan yang
terlalu besar dalam hal penggunaan [10].
8.2.5. Front End
Front end adalah segala sesuatu yang menghubungkan antara user dengan
sistem back end. Biasanya merupakan sebuah user interface dimana user akan
berinteraksi dengan sistem. Pekerjaan yang sering muncul sebagai seorang front
end developer adalah desainer user interface dan desainer user experience [1].

9
8.2.6. Back end
Back end atau sering disebut server side pada dasarnya adalah tempat proses
suatu aplikasi atau sistem mengelola data berupa proses penambahan, pengubahan
dan penghapusan data. Back end menangani segala sesuatu yang biasanya tidak
dilihat atau berinteraksi langsung kepada pengguna, seperti database dan server [1].
8.2.7. PHP
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995 merupakan
salah satu bahasa pemrograman yang sangat populer di dunia.
PHP berasal dari kata “Hypertext Pre-processor”, yaitu bahasa pemrograman
universal untuk penanganan pembuatan dan pengembangan sebuah situs web
dan bisa digunakan bersamaan dengan HTML. Saat ini, PHP banyak dipakai
untuk membuat program situs web dinamis. PHP sebagai sekumpulan skrip
atau bahasa pemrograman memiliki fungsi utama, yaitu mampu
mengumpulkan dan mengevaluasi hasil survei atau bentuk apa pun ke server
database [11].
8.2.8. Framework Laravel
Laravel sebuah framework PHP, dibangun dengan konsep MVC (model view
controller). MVC adalah sebuah pendekatan perangkat lunak yang memisahkan
aplikasi logika dari presentasi. MVC memisahkan aplikasi berdasarkan komponen-
komponen aplikasi, seperti manipulasi data, controller, dan user interface.
Laravel dirancang untuk meningkatkan kualitas perangkat lunak dengan
mengurangi biaya pengembangan awal dan biaya pemeliharaan, dan untuk
meningkatkan pengalaman bekerja dengan aplikasi dengan menyediakan sintaks
yang ekspresif, jelas dan menghemat waktu [12].
8.2.9. Bootstrap
Bootstrap adalah framework CSS yang digunakan untuk pengembangan
aplikasi web dengan memberikan kelebihan dalam kecepatan dan kemudahan
dalam penggunaan.
Bootstrap menggunakan HTML, CSS, dan JavaScript. Bootstrap
dikembangkan oleh Mark Otto dan Jacob Thornton dari Twitter. Framework
ini diluncurkan sebagai produk open source pada Agustus 2011 di GitHub.
Bootstrap memiliki fitur-fitur komponen interface yang bagus seperti
Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts,
Modals, Tabs, Accordion, Carousel, dan lain sebagainya [13].

10
8.2.10. XAMPP
XAMPP adalah perangkat lunak open source yang bisa diunggah secara gratis
dan bisa dijalankan di semua sistem operasi seperti Windows, Linux, Solaris, dan
Mac dan XAMPP ini dibuat dan dikembangkan oleh Apache Friends Perangkat
Lunak tersebut berisi kumpulan beberapa perangkat lunak yang dibutuhkan, antara
lain PHP, Apache, MySQL, dan PHPMyAdmin [11].
9. Rancangan Sistem
9.1 Gambaran Sistem Lama
Pada website Program Studi D-III Teknik Informatika saat ini memiliki 2
bagian, yaitu front end dan back end yang diakses oleh kelompok pengguna yang
terdiri dari pengguna umum, operator dan administrator. Pengguna umum hanya
memiliki akses di bagian front end. Pada bagian front end terdapat fitur profil,
dosen, mahasiswa, fasilitas, pengumuman, galeri, agenda dan download. Operator
dan administrator memiliki akses di bagian back end. Operator tidak diberikan
akses penuh di bagian back end, operator hanya memiliki akses pada fitur halaman
statis, agenda, buku tamu, running text, berita, download, polling, dan galeri foto,
sedangkan administrator memiliki hak akses penuh di bagian back end, yang terdiri
dari fitur setting web, setting menu, manajemen berita, album, running text, buku
tamu, agenda, banner, polling, download, dan kontak.
Dari hasil evaluasi yang telah dilakukan pada website Program Studi D-III
Teknik Informatika Politeknik Negeri Pontianak berikut adalah total nilai severity
rating yang didapatkan.
Tabel 2. Nilai Total Severity Rating
No Kode Masalah Total Severity Rating
H-1 Visibility of System status 2
Match Between System and The Real
H-2 1.5
Word
H-3 User Control and Freedom 3
H-4 Consistency and Standards 2.5
H-5 Error Prevention 2
H-6 Recognition Rather Than Recall 2
H-7 Flexibility and Efficiency of Use 3.5
H-8 Aesthetic and Minimalist Design 3
Helps User Recognize, Diagnose, and
H-9 2.5
Recovers Errors
H-10 Help and Documentation 3

11
 Masalah dengan nilai severity rating tertinggi terdapat pada prinsip H-7
Flexibility and Efficiency of Use dengan nilai 3,5. Masalah ini akan menjadi
prioritas utama perbaikan yang harus diselesaikan terlebih dahulu diikuti dengan
perbaikan kode masalah yang memiliki nilai severity rating yang tinggi di bawah
3,5 hingga nilai severity rating terendah yaitu 1,5.
Dari hasil ulasan yang telah disampaikan oleh expert evaluator, maka penulis
menyusun rekomendasi perbaikan untuk mengatasi permasalahan yang ada. Berikut
hasil ulasan dan rekomendasi perbaikan pada website Program Studi D-III Teknik
Informatika Politeknik Negeri Pontianak yang tertera pada Tabel 3.

12
 Tabel 3. Ulasan dan Rekomendasi Perbaikan Evaluasi Heuristik

No Severity
Kode Masalah Poin Masalah Masalah Rekomendasi Perbaikan
Masalah Rating

Above the fold, learnability tidak adanya tanda Tidak menampilkan konten carousel di setiap
1 H-1 Visibility of System status atau perubahan pada halaman web saat users 2 halaman, membuat perbedaan tata letak pada
mengklik menu sebelum scrolling ke bawah setiap halaman

Match Between System and The Real Widget Character pada halaman web tidak
2 H-2 2 Menghilangkan Widget Character
Word dibutuhkan

Match Between System and The Real Running text pada bagian footer yang tidak Mengganti running text dengan carousel yang
3 H-2 1
Word dibutuhkan memiliki konten informatif

Kurangnya fitur search pada menu download,

4 H-3 User Control and Freedom 3 Menambahkan fitur search pada menu download
sehingga menyulitkan users mencari informasi

Sidebar perlu dirapikan, tidak semua bagian perlu Menghilangkan sidebar yang tidak diperlukan
5 H-3 User Control and Freedom 3
ditampilkan di setiap halaman pada setiap halaman

Sidebar menu Tugas Akhir dan PKL memerlukan

Memindahkan fungsi untuk mencari berkas
6 H-4 Consistency and Standards journey yang jauh, users tidak dapat menemukan 4
tugas akhir di menu download
konten yang di cari

Membuat tampilan galeri menjadi list dengan

7 H-4 Consistency and Standards User Journey pada menu galeri terlalu jauh 1
preview gambar yang besar

13
 Ukuran Gambar terlalu kecil pada bagian sub
menu kalender akademik, pada website tidak di
Memperbesar section konten agar setiap konten
8 H-5 Error Prevention aktifkan klik kanan sehingga tidak bisa 2
dapat memiliki ukuran lebih besar
menyimpan gambar, sehingga perlu adanya fitur
download file kalender akademik

Tidak adanya perubahan navigasi aktif pada Membuat indikator menu aktif pada setiap
9 H-6 Recognition Rather Than Recall 2
halaman yang sedang di akses halaman yang sedang dikunjungi

Terdapat banyak pilihan menu yang sebenarnya

Mengelompokkan menu sesuai dengan kategori
10 H-6 Recognition Rather Than Recall sama / 1 kategori akan tetapi di buat terpisah 3
yang sama
sehingga membingungkan users

Penempatan Breadcrumb (Struktur Halaman)

11 H-6 Recognition Rather Than Recall 1 Mengubah letak breadcrumb
yang tidak seharusnya berada di bagian header

12 H-7 Flexibility and Efficiency of Use Website belum Responsive 4 Menerapkan tampilan responsive

Kurangnya icon pada menu untuk menunjukkan

bagian sub menu, sehingga users akan mengira Menambahkan tanda panah ke bawah sebagai
13 H-7 Flexibility and Efficiency of Use 2
menu dapat di klik ke halaman berbeda tetapi tanda bahwa di dalam menu terdapat sub menu
yang keluar adalah dropdown

Seharusnya bagian menu navigasi di buat

menempel (Sticky) saat di scorll ke bawah,
14 H-7 Flexibility and Efficiency of Use sehingga user dapat dengan mudah untuk 4 Mengubah daftar menu menjadi menempel
mengakses menu tanpa perlu ke bagian atas
halaman lagi

Perlu perubahan UI terutama pada bagian tata

letak dan konsep menu, tampilan desain website Mengubah gaya tampilan dan tata letak agar
15 H-8 Aesthetic and Minimalist Design 4
menggunakan gaya tampilan yang sudah tidak lebih modern
relevan dengan gaya sekarang

14
 Warna monoton pada halaman dasar (semua
16 H-8 Aesthetic and Minimalist Design element berwarna biru) dan font yang 2 Memberikan variasi warna di dalam website
mendistraksi users

Terdapat banyak ruang kosong di setiap menu

yang memiliki data yang sedikit, dikarenakan Menghilangkan sidebar yang tidak diperlukan
17 H-8 Aesthetic and Minimalist Design 3
terlalu banyak sidebar, konten utama terlihat pada setiap halaman
penuh dikarenakan sidebar

Helps User Recognize, Diagnose, and Terdapat banyak missing link pada menu
18 H-9 2.5 Memperbaiki alamat link tujuan
Recovers Errors (Navigasi) dan bagian footer

Bagian footer tidak langsung memberikan

informasi terkait program studi, dan user harus Menambahkan informasi terkait Program Studi
19 H-10 Help and Documentation 2
melakukan klik di bagian kontak jika ingin di bagian footer
mengetahui informasi kontak

Tidak terdapat dokumentasi sistem atau panduan

20 H-10 Help and Documentation 4 Membuat dokumentasi penggunaan website
penggunaan website

15
 Dari Tabel 3 di atas berikut merupakan tampilan screenshot setiap nomor
permasalahan yang ditemukan:

Gambar 2. No Masalah 1

Gambar 3. No Masalah 2

Gambar 4. No Masalah 3

Gambar 5. No Masalah 4

16
Gambar 6. No Masalah 5

Gambar 7. No Masalah 6

Gambar 8. No Masalah 7

17
 Gambar 9. No Masalah 8

Gambar 10. No Masalah 9

Gambar 11. No Masalah 10

Gambar 12. No Masalah 11

18
Gambar 13. No Masalah 12

Gambar 14. No Masalah 13

Gambar 15. No Masalah 14

19
Gambar 16. No Masalah 15

Gambar 17. No Masalah 16

20
Gambar 18. No Masalah 17

21
Gambar 19. No Masalah 18

Gambar 20. No Masalah 19

22
9.2 Gambaran Sistem Baru
Dari gambaran sistem lama yang telah disampaikan sebelumnya, akan
dilakukan pengembangan agar website Program Studi D-III Teknik Informatika
menjadi media penyampaian informasi yang lebih lengkap daripada sebelumnya
dengan menambahkan fitur terkait dengan profil lulusan, capaian pembelajaran,
kompetensi lulusan, kurikulum, hasil tugas akhir terbaik mahasiswa, testimoni
lulusan, kerja sama dan profil dosen. Selanjutnya akan dilakukan pengembangan
website berdasarkan hasil temuan permasalahan evaluasi heuristik dari 3 orang
expert evaluator.

23
9.3 Pemodelan Sistem
Pemodelan sistem dilakukan dengan menggunakan Unified Modeling
Language (UML). Salah satu diagram yang digunakan adalah Use Case Diagram,
yang berfungsi untuk menggambarkan interaksi antara pengguna dengan sistem
yang akan dibangun. Gambar 2 berikut ini merupakan gambaran sistem baru yang
telah diuraikan sebelumnya.

Gambar 21. Diagram Use Case Website Program Studi Teknik Informatika

24
10. Jadwal Penyelesaian Tugas Akhir
Adapun kegiatan Tugas Akhir yang dilakukan oleh penulis secara rinci dapat dilihat pada Tabel 2 berikut ini:
Tabel 4. Jadwal Penyelesaian Tugas Akhir
TAHUN 2021
NO KEGIATAN
FEBRUARI MARET APRIL MEI JUNI JULI AGUSTUS SEPTEMBER
Pengajuan Judul dan
1
Penulisan Abstrak
2 Penulisan Proposal TA
Seminar Judul TA dan
3
Revisi
Listen to Customer:
Evaluasi Heuristik
4 Studi Literatur
Wawancara
Observasi
5 Build/Revise Mock-up
Customer Test Drives
6
Mock-up
9 Penulisan Tugas Akhir
10 Sidang Tugas Akhir
11 Revisi Tugas Akhir

25
 DAFTAR PUSTAKA

[1] P. P. Arhandi, “Pengembangan Sistem Informasi Perijinan Tenaga

Kesehatan dengan Menggunakan Metode Back End dan Front End,” Teknol.
Inf., vol. 7, no. 1, pp. 39–48, 2016.
[2] “ISO 9241-11:1998(en), Ergonomic requirements for office work with
visual display terminals (VDTs) — Part 11: Guidance on usability.”
https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en (accessed Mar.
17, 2021).
[3] A. P. Hendradewa, “Perbandingan Metode Evaluasi Usability,”
Perbandingan Metod. Eval. Usability (Studi Kasus Pengguna. Perangkat
Smartphone), vol. 23, no. 1, pp. 9–18, 2017, [Online]. Available:
http://journal.uii.ac.id/index.php/jurnal-teknoin/article/viewFile/8332/7102.
[4] P. A. Lestari, I. Aknuranda, and A. D. Herlambang, “Evaluasi Usability Pada
Antarmuka Pengguna Aplikasi PLN Mobile Menggunakan Metode Evaluasi
Heuristik,” J. Pengemb. Teknol. Inf. dan Ilmu Komput. e-ISSN, vol. 2548,
no. 3, p. 964X, 2019.
[5] N. A. Dewananto, H. Tolle, and H. M. Az-zahra, “Perancangan User
Experience Menggunakan Metode Human Centered Design Pada Aplikasi
Mobile Portal Berita Tabloidjubi,” J. Pengemb. Teknol. Inf. dan Ilmu
Komput. Univ. Brawijaya, vol. 3, no. 3, pp. 2916–2922, 2019.
[6] “Pengertian Metode Waterfall Dan Tahap-Tahapnya - Ranah Research.”
https://ranahresearch.com/metode-waterfall/ (accessed Mar. 18, 2021).
[7] H. Setiawan, E. Utami, and H. Al Fatta, “Analisis User Interface Pada
Website UIN Sunan Kalijaga Yogyakarta Menggunakan Metode Evaluasi
Heuristik,” Semin. Nas. Inov. Teknol., pp. 93–100, 2017.
[8] Gita, “Rancang Bangun Website Sekolah Madrasah Aliyah Yasti Sekura
Kabupaten Sambas,” 2020.
[9] D. W. T. Putra and R. Andriani, “Unified Modelling Language (UML) dalam
Perancangan Sistem Informasi Permohonan Pembayaran Restitusi SPPD,”
J. TeknoIf, vol. 7, no. 1, p. 32, 2019, doi: 10.21063/jtif.2019.v7.1.32-39.
[10] C. Novianty, “Review Konsep Responsive Design Dengan Framework
Materialize Pada Website,” InfoTekJar (Jurnal Nas. Inform. dan Teknol.
Jaringan), vol. 2, no. 1, pp. 41–44, 2017, doi: 10.30743/infotekjar.v2i1.140.
[11] I. K. S. Buana, Jago Pemrograman PHP. Cipayung, Jakarta Timur: Dunia
Komputer, 2014.
[12] B. Hermanto and M. Yusman, “© 2019 Ilmu Komputer Unila Publishing
Network all right reserve Jurnal Komputasi SISTEM INFORMASI
MANAJEMEN KEUANGAN PADA PT . HULU BALANG © 2019 Ilmu
Komputer Unila Publishing Network all right reserve Jurnal Komputasi,”
vol. 7, no. 1, pp. 17–26, 2019.
[13] Anindita, Pemograman Bootstrap Untuk Pemula. PT Elex Media
Komputindo, 2016.

26
 LAMPIRAN

Lampiran 1. Nilai Severity Ratings UI/UX Designer PT. Kreasi Putra Hotama

27
Lampiran 2. Nilai Severity Ratings UI Designer Rootpixel

28
Lampiran 3. Nilai Severity Ratings UX Researcher PT. Kreasi Putra Hotama

29