Perancangan User interface dan User experience

Website Tracer study Fakultas Teknologi Informasi

Perbanas Institute Dengan Metode User-Centered Design

Oleh :
Hadar Satya Purusa
1813000018

INSTITUT KEUANGAN PERBANKAN DAN INFORMATIKA

ASIA (ASIAN BANKING FINANCE AND INFORMATICS
INSTITUTE)
PERBANAS
JAKARTA
PROGRAM STUDI S1 SISTEM INFORMASI
2022
 Perancangan User interface dan User experience
Website Tracer study Fakultas Teknologi Informasi
Perbanas Institute Dengan Metode User-Centered Design

Skripsi
Diajukan Untuk Memenuhi Persyaratan
Mencapai Gelar Sarjana Komputer

Oleh:
Hadar Satya Purusa
1813000018

INSTITUT KEUANGAN PERBANKAN DAN INFORMATIKA

ASIA (ASIAN BANKING FINANCE AND INFORMATICS
INSTITUTE)
PERBANAS JAKARTA
PROGRAM STUDI S1 SISTEM INFORMASI
2022
 INSTITUT KEUANGAN PERBANKAN DAN INFORMATIKA
ASIA (ASIAN BANKING FINANCE AND INFORMATICS
INSTITUTE)
PERBANAS JAKARTA
PROGRAM STUDI SISTEM INFORMASI

PERSETUJUAN
Skripsi yang berjudul

Perancangan User interface dan User experience

Website Tracer study Fakultas Teknologi Informasi
Perbanas Institute Dengan Metode User-Centered Design

Oleh

Nama : Hadar Satya Purusa

NIM : 1813000018
Program Studi : Sistem Informasi

Telah disetujui untuk diajukan

Mengetahui, Jakarta, 04 Januari 2023

Ketua Program Studi Sistem Informasi Dosen Pembimbing

Agnes Novita, S.Kom., M.Kom Dr. Adele Mailangkay, S.T., M.M.S.I.

 INSTITUT KEUANGAN PERBANKAN DAN INFORMATIKA
ASIA (ASIAN BANKING FINANCE AND INFORMATICS
INSTITUTE)
PERBANAS JAKARTA
PROGRAM STUDI SISTEM INFORMASI

PERNYATAAN

Seluruh isi dan materi skripsi ini menjadi tanggung jawab penyusun sepenuhnya.

Jakarta,
Penulis

Hadar Satya Purusa

1813000018
 LEMBAR PERNYATAAN BEBAS PLAGIAT

Yang bertanda tangan dibawah ini,

Nama : Hadar Satya Purusa

NIM : 1813000018
Program Studi : Sistem Informasi

Judul Skripsi : Perancangan User interface dan User experience

Website Tracer study Fakultas Teknologi
Informasi Perbanas Institute Dengan Metode
User-Centered Design

Menyatakan bahwa hasil penulisan Skripsi yang telah saya buat merupakan
hasil karya sendiri dan benar keasliannya. Apabila ternyata dikemudian hari
penulisan skripsi ini merupakan hasil plagiat atau penjiplakan terhadap karya orang
lain, saya bersedia mempertanggung jawabkan sekaligus menerima sanksi
berdasarkan aturan tata tertib di ABFI Institute Perbanas Jakarta.
Dan pernyataan ini saya buat dalam keadaan sadar dan tidak ada unsur
paksaan.

Jakarta,
Penulis,

Hadar Satya Purusa

1813000018
 ABSTRAK
Alumni mempunyai peranan yang penting bagi Univesitas dan Institusi untuk
melihat seberapa banyak alumni yang terserap di dunia industri. Semakin banyak
alumni yang diserap di dunia industri, semakin baik pula citra Universitas atau
Institusi tersebut. Pendataan terhadap alumni yang telah lulus dari universitas,
sangat penting untuk dilakukan. Namun, pendataan yang dilakukan saat ini
belum maksimal. Dibutuhkan lah suatu sistem yang dapat membantu dalam
pendataan tersebut. Tracer study adalah suatu mekanisme yang dilakukan oleh
berbagai pihak untuk melacak Alumni dalam rangka mengukur relevansi tujuan,
dan proses pendidikan dengan kondisi Alumni saat ini . Demi memudahkan
penggunaan maka dibuatlah rancangan website Tracer study Fakultas Teknologi
Informasi Perbanas Institute. user interface dan user interface website tracer
study Fakultas Teknologi Informasi Perbanas Institute yang mudah dipahami dan
dapat digunakan oleh user yang terkait. Rancangan ini meghasilkan User
interface dan User experience Website Tracer study Fakultas Teknologi
Informasi Perbanas Institute beserta Interactive Prototype yang dapat di uji coba
oleh pengguna. Perancangan menggunakan metode User centered design yang
mengacu kepada pengguna yaitu alumni FTI Perbanas Institute. Uji coba
menggunakan system usability scale untuk mengukur tingkat usability dari
rancangan dan User experience questionnaire untuk mengukur user experience.
Hasil perancangan ini berupa prototipe desain user interface website tracer study
FTI Perbanas Institute dengan score nilai 78 pada uji coba SUS dan mendapatkan
nilai pada aspek daya tarik 2.31, kejelasan 2.27, efisiensi 2.45, ketepatan 2.39,
stimulasi 2.43, kebaruan 2.26 pada uji coba UEQ, penulis berharap desain ini
diaplikasikan ke website yang sebenarnya sehingga dapat membantu alumni
dalam mencari informasi setelah kelulusannya dan membantu dalam pengelolaan
data alumni.

Kata Kunci : tracer study, user interface, user experience, alumni, user centered
design
(A) NAMA NIM
Hadar Satya Purusa 1813000018
(B) JUDUL SKRIPSI
Perancangan User interface dan User experience Website Tracer study Fakultas
Teknologi Informasi Perbanas Institute Dengan Metode User-Centered Design
(C) HALAMAN, GAMBAR, TABEL, TAHUN
vii + 97 halaman + 60 gambar + 14 tabel + 7 lampiran, 2022
(D) KATA KUNCI
Tracer study, User interface, User experience, Alumni, User centered design
(E) INTISARI
Skripsi dengan judul Perancangan User interface dan User experience
Website Tracer study Fakultas Teknologi Informasi Perbanas Institute Dengan
Metode User-Centered Design adalah rancangan website yang didesain untuk
membantu dalam wadah pengelolaan data alumni dan membantu alumni dalam
mencari informasi setelah kelulusannya.
Dengan adanya desain ini diharapkan dapat membantu dan saling
menguntungkan antara alumni dan pihak institut. Pihak kampus dapat mengelola
data alumni yang mendaftarkan dan mengisi kuesioner perihal tracer study pada
laman website. Alumni dapat tetap mengetahui informasi seputar alumni lainnya
untuk memperluas relasi, mencari lowongan kerja, berita seputar kampus, dan
event yang dapat mengembangkan keahlian dalam bidang kerja.
(F) DAFTAR ACUAN
25 Referensi (2010-2022)
(G) DOSEN PEMBIMBING
Dr. Adele Mailangkay, S.T., M.M.S.I.
 KATA PENGANTAR
Dengan memanjatkan puja dan puji syukur kepada Allaw SWT yang telah
memberikan berkat dan karunia-Nya sehingga penulis dapat menyelesaikan skripsi
ini dengan judul “Perancangan User interface dan User experience Website Tracer
study Fakultas Teknologi Informasi Perbanas Institute Dengan Metode User-
Centered Design”, sebagai salah satu syarat untuk menyelesaikan Program Studi
S1 Sistem Informasi Fakultas Teknologi Informasi Perbanas Institute Jakarta.
Meskipun selama penyusunan tidak sedikit hambatan yang penulis hadapi, namun
berkat kehendak-Nya lah sehingga penulis berhasil menyelesaikan skripsi ini.
Penulis menyadari bahwa dalam penulisan skripsi ini tidak dapat
terselesaikan tanpa adanya dukungan, masukan, bimbingan dan bantuan dari pihak-
pihak selama penyusunan skripsi ini. Oleh karena itu, penulis ingin memberikan
kata, kalimat ataupun ucapan terima kasih kepada semua pihak yang sudah
membantu dalam penyusunan skripsi ini, terutama kepada :
1. Kedua orang tua penulis, Alm. Bapak Satrio Suprapto dan ibu penulis
tercinta Sulistiowati yang telah memberikan dukungan moril maupun
material kepada penulis.

2. Ibu Dr. Lucia Sri Istiyowati, M.Kom. selaku Dekan Fakultas Teknologi
Informasi dan dosen pembimbing akademik yang senantiasa menanyakan
keadaan penulis semasa perkuliahan.

3. Ibu Dr. Adele Mailangkay, S.T., M.M.S.I selaku dosen pembimbing skripsi
yang telah memberikan bimbingan, nasehat, arahan dan masukka dengan
penuh kesabaran.

4. Dosen pengajar pada Fakultas Teknologi Infomasi Pebanas Institute atas

ilmu dan pengetahuan yang telah diajarkan kepada penulis selama masa
perkuliahan.

5. Amanda Putri yang menemani hampir setiap waktu penulisan skripsi ini dan
memberikan dorongan agar cepat terselesaikannya skripsi ini.

6. Bianwar Atsarih, Syahdan Chairunanda dan Feby Sintia Manurung sebagai

teman yang selalu tetap bersama dalam berdiskusi. Terima kasih atas
kebersamaan kalian.

7. Sahabat – sahabat penulis di bawah bimbingan ibu Dr. Adele Mailangkay,

S.T., M.M.S.I, Dimas Javier, Asyifa Septiani, dan Salsabilla Mutiara.
Terima kasih atas kebersamaan dan semangat yang kalian berikan selama

i
 penulisan skripsi ini.

8. Seluruh kawan-kawan angkatan 2018 Sistem Informasi. Terima kasih atas

dukungan moril kalian.

9. Keluarga besar Perbanas Institute Choir yang sudah memberikan wadah

bagi penulis semasa pekuliahan dan dukungan kepada penulis. Terima kasih
banyak atas kesenangan, canda tawa yang membahagiakan dan menjadi
keluarga baru bagi penulis.

10. Seluruh responden yang telah menyempatkan dalam memberikan informasi

untuk penyelesaian skripsi ini.
Dalam skripsi ini penulis menyadari bahwa masih jauh dari kata sempurna
dikarenakan kurangnya pengalaman dan ilmu pengetahuan yang dimiliki penulis.
Oleh karena itu, penulis berharap adanya saran dan serta masukkan dari berbagai
pihak. Semoga skripsi ini dapat memberikan manfaat bagi para pembaca dan semua
pihak terlebih dalam hal perancangan desain user interface dan user experience.

Jakarta,

Penulis

Hadar Satya Purusa

ii
 DAFTAR ISI

KATA PENGANTAR .................................................................................. i

DAFTAR ISI ................................................................................................ iii
DAFTAR GAMBAR .................................................................................... vi
DAFTAR TABEL ........................................................................................ viii
BAB I PENDAHULUAN ............................................................................. 1
A. Latar Belakang ....................................................................... 1
B. Identifikasi Masalah ............................................................... 4
C. Batasan Masalah .................................................................... 4
D. Rumusan Masalah .................................................................. 4
E. Tujuan dan Manfaat ............................................................... 5
BAB II Landasan Teori ................................................................................. 6
A. Tinjauan Pustaka .................................................................... 6
1. Alumni ........................................................................ 6

2. Tracer study ................................................................ 6

3. Website ....................................................................... 7

4. User interface ............................................................. 7

5. User experience .......................................................... 9

6. Use Case Diagram ....................................................... 10

7. Prototipe ..................................................................... 10

8. Usability testing .......................................................... 11

B. Hasil Penelitian Terdahulu ..................................................... 11

C. Kerangka Pemikiran ............................................................... 16
BAB III Metodologi Penelitian ..................................................................... 17
A. Objek Penelitian ..................................................................... 17
B. Metode Penelitian .................................................................. 17
1. User centered design ................................................... 17

2. System usability scale .................................................. 19

iii
 3. User experience questionnaire .................................... 20

C. Alat dan Bahan Penelitian ...................................................... 21

1. Kebutuhan Perangkat Keras ........................................ 21

2. Kebutuhan Perangkat Lunak........................................ 21

BAB IV Hasil dan Pembahasan..................................................................... 22

A. Rumusan Konsep ................................................................... 22
B. Plan the human centered process ............................................ 22
C. Specify the context of use ....................................................... 22
1. Studi Literatur ............................................................. 23

2. Survei ......................................................................... 23

3. Interview ..................................................................... 23

D. Specify User and Organizational Requirement ....................... 25

1. Target Audience .......................................................... 25

2. Persona ....................................................................... 25

3. Materi Pesan ............................................................... 26

4. Strategi Komunikasi .................................................... 26

E. Product design solution .......................................................... 26

1. Use Case Diagram ....................................................... 26

2. Activity Diagram......................................................... 28

3. User Flow ................................................................... 36

4. Visual ......................................................................... 42

5. Wireframe ................................................................... 42

6. Komponen Desain User interface ................................ 57

7. Interactive Prototype ................................................... 61

F. Evaluate Design Against User Requirement ........................... 77

1. Run an Experiment ...................................................... 77

2. Feedback and Research ............................................... 78

BAB V PENUTUP ....................................................................................... 87

iv
 A. Kesimpulan ............................................................................ 87
B. Saran ...................................................................................... 88
DAFTAR PUSTAKA ................................................................................... 89

v
 DAFTAR GAMBAR
Gambar 1. Survey Pengguna Internet .............................................................................2
Gambar 2. Use Case Diagram ...................................................................................... 10
Gambar 3. Kerangka Pemikiran ................................................................................... 16
Gambar 4. User centered design ................................................................................... 18
Gambar 5. Penentuan Hasil Penilaian Kebergunaan Dengan SUS ................................ 20
Gambar 6. Use Case Diagram Rancangan Website Tracer study FTI Perbanas Institute 27
Gambar 7. Activity Diagram Daftar dan Login ............................................................. 28
Gambar 8. Activity Diagram Berita.............................................................................. 29
Gambar 9. Activity Diagram Kuesioner Tracer study ................................................... 31
Gambar 10. Activity Diagram Lowongan Kerja ........................................................... 32
Gambar 11. Activity Diagram Lowongan Kerja ........................................................... 32
Gambar 12. Activity Diagram Event ............................................................................ 33
Gambar 13. Activity Diagram Profile........................................................................... 34
Gambar 14. Activity Diagram Logout .......................................................................... 35
Gambar 15. User Flow Daftar ...................................................................................... 36
Gambar 16. User Flow Berita ...................................................................................... 36
Gambar 17. User Flow Kuesioner Trace Study............................................................. 37
Gambar 18. User Flow Pencarian Alumni .................................................................... 38
Gambar 19. User Flow Lowongan Kerja ...................................................................... 39
Gambar 20. User Flow Event ....................................................................................... 40
Gambar 21. User Flow Profile ..................................................................................... 41
Gambar 22. User Flow Logout ..................................................................................... 41
Gambar 23. Wireframe Landingpage ........................................................................... 43
Gambar 24. Wireframe Daftar ..................................................................................... 44
Gambar 25. Wireframe Login ...................................................................................... 45
Gambar 26. Wireframe Berita ...................................................................................... 46
Gambar 27. Wireframe Homepage Alumni .................................................................. 49
Gambar 28. Wireframe Pencarian Alumni.................................................................... 50
Gambar 29. Wireframe Detail Alumni ......................................................................... 51
Gambar 30. Wireframe Lowongan Kerja ..................................................................... 52
Gambar 31.Wireframe Detail Pekerjaan ....................................................................... 53
Gambar 32. Wireframe Kuesioner Tracer study ........................................................... 54
Gambar 33. Wireframe Event ...................................................................................... 55
Gambar 34. Wireframe Profile Pengguna ..................................................................... 56
Gambar 35. Wireframe Logout .................................................................................... 57
Gambar 36. Warna....................................................................................................... 57
Gambar 37. Kode Hexa Warna .................................................................................... 58
Gambar 38. Navigasi Linear ........................................................................................ 59
Gambar 39. Layout ...................................................................................................... 60
Gambar 40. Interactive Prototype................................................................................. 61
Gambar 41. Prototype Landingpage ............................................................................. 63
Gambar 42. Prototype Berhasil Daftar ......................................................................... 64
Gambar 43. Prototype Login 1 ..................................................................................... 65

vi
Gambar 44. Prototype Login 2 ..................................................................................... 65
Gambar 45. Prototype Homepage Alumni .................................................................... 67
Gambar 46. Prototype Kuesioner Tracer study ............................................................. 68
Gambar 47. Prototype Selesai Kuesioner Trace Study .................................................. 69
Gambar 48. Prototype Alumni ..................................................................................... 69
Gambar 49. Prototype Detail Alumni ........................................................................... 70
Gambar 50. Prototype Lowongan Pekerjaan................................................................. 71
Gambar 51. Prototype Detail Pekerjaan........................................................................ 71
Gambar 52. Prototype Lowongan Pekerjaan Tersimpan ............................................... 72
Gambar 53. Prototype Berita ........................................................................................ 73
Gambar 54. Prototype Detail Berita ............................................................................. 74
Gambar 55. Prototype Event ........................................................................................ 75
Gambar 56. Prototype Detail Event .............................................................................. 75
Gambar 57. Prototype Profile....................................................................................... 76
Gambar 58. Prototype Logout ...................................................................................... 77
Gambar 59. Attractiveness Scale ................................................................................ 84
Gambar 60. Grafik Nilai Mean Skala UEQ .................................................................. 86

vii
 DAFTAR TABEL
Tabel 1. Instrument Penilaian SUS ............................................................................... 19
Tabel 2. Daftar Kuesioner UEQ .................................................................................... 20
Tabel 3. Pertanyaan Interview....................................................................................... 24
Tabel 4. Persona ........................................................................................................... 25
Tabel 5. Run An Experiment ........................................................................................ 78
Tabel 6. Penilaian Poin SUS ......................................................................................... 80
Tabel 7. Data Pengisian Kuisioner SUS ........................................................................ 80
Tabel 8. Data Perhitungan Skor SUS ............................................................................ 81
Tabel 9. Data Jawaban UEQ Responden ....................................................................... 82
Tabel 10. Transformasi skala nilai ................................................................................ 83
Tabel 11. Hasil Transformasi Nilai Data UEQ Responden ............................................ 83
Tabel 12. Interval Skala UEQ (Wulandari & Farida, 2019) ........................................... 85
Tabel 13. Nilai Mean Skala UEQ .................................................................................. 85
Tabel 14. Komparasi Benchmark UEQ ......................................................................... 86

viii
 BAB I
PENDAHULUAN

A. Latar Belakang
Alumni adalah siswa ataupun mahasiswa yang telah menyelesaikan
jenjang Pendidikan dengan segala aturannya pada sebuah institusi
pembelajaran, maka ini bias dikatakan sebagai alumni (Hidayat, 2020).
Istilah ini biasanya digunakan untuk menyebut para lulusan suatu institusi
pendidikan yang tergabung dalam sebuah organisasi alumni. Organisasi ini
biasanya terbentuk untuk membantu para lulusan dalam mencari pekerjaan,
berbagi informasi, atau membantu sekolah atau universitas tempat mereka
belajar. Alumni juga mempunyai peranan yang penting bagi intitusi untuk
melihat seberapa banyak alumni yang terserap di dunia industri, semakin
banyak alumni yang diterima di dunia industri semakin meningkat juga citra
suatu institusi atau universitas (Razi et al., 2021). Pengelolaan data terhadap
alumni yang telah lulus dari institutsi, sangat penting untuk dilakukan. Agar
institusi dapat mendata Alumni dengan baik maka dilakukanlah tracer
study.
Tracer study dapat menyediakan informasi untuk kepentingan
evaluasi hasil pendidikan tinggi dan selanjutnya dapat digunakan untuk
penyempurnaan dan penjaminan kualitas Lembaga Pendidikan tinggi
bersangkutan (Hidayat, 2020). Sehingga harapan suatu institusi dengan
adanya tracer study yang terkelola dengan baik, institusi dapat terus
mengukur dan mengevaluasi kelebihan ataupun kekurangan yang ada.
Selain alumni institusi atau universitas juga memiliki tugas utama.
Hubungan yang baik antara institusi dan alumni adalah hubungan
yang saling menguntungkan. Tugas utama institusi kepada alumni adalah
menjaga hubungan baik dengan mereka, terutama setelah para lulusan
tersebut meninggalkan sekolah atau universitas. Instituti dapat melakukan
ini dengan berbagai cara seperti menyediakan website alumni yang dapat
diakses oleh para lulusan. Dengan demikian, institusi dapat terus menjaga
koneksi dengan para alumni, dan para lulusan pun dapat terus terhubung
dengan sekolah atau universitas tempat mereka belajar. Namun, seiring
berjalannya waktu maka semakin banyak juga suatu Universitas dan
Institutsi menghasilkan alumni. Sedangkan data alumni yang perlukan juga
semakin banyak. Maka diperlukanlah suatu wadah dalam penampungan
data alumni yang dapat diakses oleh alumni secara langsung. Melihat dari
penggunaan pada aplikasi berbasis web atau mobile yang sangat meningkat
untuk memenuhi kebutuhan primer maupun sekunder. Penanganan terhadap

1
 2

pelacakan dan pendataan pada alumni atau tracer study dapat diselesaikan
dengan aplikasi berbasis web.

Gambar 1. Survey Pengguna Internet

Menurut data per-Januari 2021 saja pengguna internet di Indonesia
mencapai angka 202,6 juta (Hootsuite, 2021). Tentu saja jika dirilis ada
teraktual saat ini, angka tersebut terus akan bertambah. Dengan melihat data
tersebut peneliti ingin merancang sebuah user interface dan user experience
website tracer study. Peneliti mengambil FTI Perbanas Institute sebagai
objek penelitian.
Website tracer study merupakan sebuah platform yang
dikembangkan untuk mengikuti perkembangan karier alumni suatu institusi
pendidikan. Tujuan dari pembuatan website ini adalah untuk memberikan
informasi kepada alumni tentang peluang kerja, kesempatan berkarier, dan
juga untuk membantu institusi pendidikan dalam mengevaluasi kualitas
program pendidikannya. Website tracer study juga memiliki fungsi untuk
menjadi jembatan komunikasi antara alumni dan institusi pendidikan.
Melalui website ini, alumni dapat terus terhubung dan berkomunikasi
dengan teman sejawatnya, serta dapat memperoleh informasi terbaru
tentang kegiatan dan program terbaru yang diselenggarakan oleh institusi
pendidikan. Selain itu, website tracer study juga menjadi sumber informasi
bagi calon mahasiswa atau orang yang tertarik untuk mengetahui kualitas
suatu institusi pendidikan. Melalui website ini, calon mahasiswa dapat
mengetahui tingkat keberhasilan alumni dalam mencapai karier yang
diinginkan, sehingga dapat menjadi bahan pertimbangan dalam memilih
institusi pendidikan yang akan diikuti. Dengan demikian, website tracer
study merupakan sebuah platform yang sangat berguna bagi alumni,
 3

institusi pendidikan, dan juga calon mahasiswa dalam mengikuti

perkembangan karier dan mengevaluasi kualitas program pendidikan.
Penggambaran yang dibangun oleh penyedia website yang kuat
dapat mempengaruhi pengguna seperti halnya warna, logo, typography, dan
sebagainya yang berhubungan pada suatu website, maka dari itu user akan
mengingat dan mengaplikasikan website dengan mudah (Niagahoster,
2022).
User interface merupakan bagian yang penting dari sebuah sistem,
karena memungkinkan pengguna untuk berhubungan dengan sistem
tersebut. Hal ini dapat membantu pengguna untuk mengakses fitur dan
fungsi dari sistem dengan lebih mudah dan efisien. Dengan menggunakan
user interface yang baik, pengguna dapat dengan cepat menemukan dan
menggunakan fitur yang diinginkan, sehingga meningkatkan produktivitas
dan efektivitas dalam menggunakan sebuah sistem.
Selain user interface, user experience (UX) juga berpengaruh dalam
membangun sistem yang baik. UX bertujuan untuk memastikan bahwa
pengguna merasa nyaman dan puas saat menggunakan sistem tersebut,
sehingga meningkatkan produktivitas dan efektivitas dalam penggunaanya.
Dalam membangun UI/UX membutuhkan metode agar penelitian
berjalan sesuai dengan rencana. Banyak metode – metode dalam
perancangan UI/UX. Dalam memilih metode harus dilihat lagi tujuan sistem
yang akan dibangun. Metode seperti Design Thinking, User centered
design, dan Lean Ux. Perbedaan utama antara ketiga pendekatan tersebut
adalah pada fokus yang ditujukan. Design thinking metode desain produk
berbasis inovasi yang bertumpu pada pencarian solusi untuk menyelesaikan
permasalahan dalam desain produk tertentu (Susanti, Fatkhiyah, & Efendi,
2019). User Centered fokus pada pengguna, perancangan terintegrasi,
pengujian pengguna dan perancangan interaktif (Kartiko, Wardhana, &
Rakhmadani, 2022). Lean UX merupakan sebuah metode modern dalam
pengembangan pengalaman pengguna (Rabbanii, Brata, & Brata,
2019).Sesuai dengan tujuan, rancangan ini berpusat kepada alumni sebagai
user. Alumni sangat berperan penting dalam perancangan website ini.
Untuk evaluasi tingkat kebergunaan rancangan yang akan dibangun
tentu saja memerlukan sebuah metode. Dengan teknik System usability
scale perancangan dapat melihat kelayakan rancangan yang disediakan
untuk digunakan. Sedangkan untuk melihat apakah user interface yang
dirancang sudah sesuai dengan apa yang dibutuhkan user maka digunakan
uji coba User experience questionnaire.
 4

B. Identifikasi Masalah
Berdasarkan penjelasan latar belakang di atas dapat diperoleh
beberapa masalah sebagai berikut:
1. Perlunya wadah untuk hubungan antara alumni dan institusi
dalam pemberitahuan informasi seperti, pengolahan data alumni,
lowongan kerja, berita, dan event yang dapat dengan mudah dan
nyaman digunakan.
2. Perlunya pengujian terhadap user interface dan user experience
pada rancangan ui/ux website tracer study FTI Perbanas Institute

C. Batasan Masalah
Agar penelitian ini dapat terarah dan tercapai sesuai dengan tujuan
dan sasaran penelitian, maka ditetapkan beberapa batasan masalah, antara
lain:
1. User interface dan user experience yang akan dirancang
menampilkan design dari website tracer study untuk Fakultas
Teknologi Informasi Perbanas Institute.
2. Pemodelan user interface dan user experience berbasis web.
3. Target dari pembuatan prototype adalah alumni.
4. Metode evaluasi atau pengujian menggunakan System usability
scale (SUS) dan User experience Quetionnaire (UEQ) terhadap
user yaitu alumni agar dapat memenuhi tingkat kepuasan
pengguna.

D. Rumusan Masalah
Berdasarkan latar belakang tersebut, penelitian ini melibatkan
rumusan masalah, apakah rancangan user interface dan user experience
website tracer study Fakultas Teknologi Informasi Perbanas Institute
mudah dipahami dan dapat digunakan oleh user yang terlibat ?
 5

E. Tujuan dan Manfaat

Dibawah ini merupakan tujuan dan manfaat dari pembuatan laporan
ini.
1. Tujuan Penelitian
a. Membuat atau merancang user interface website tracer study
Fakultas Teknologi Informasi Perbanas Institute yang berguna
untuk user, mudah dipahami dan nyaman digunakan.
b. Menghasilkan prototype desain user interface/user
experience website yang sesuai dengan standar usability dan
user experience.

2. Manfaat Penelitian
Hasil dari penelitian ini diharapkan dapat memberikan
usulan sistem informasi alumni yang dapat bermanfaat bagi
alumni dan pegawai khususnya pada Fakultas Teknologi
Informasi Perbanas Institute. Adapun manfaat tersebut adalah
menghasilkan design yang dapat memudahkan user dalam
mengelola, melacak, dan berbagi informasi dalam website tracer
study.
 BAB II
Landasan Teori

A. Tinjauan Pustaka

1. Alumni
Alumni adalah siswa atau mahasiswa yang sudah menyelesaikan
pendidikan dengan aturannya pada sebuah institusi pembelajaran,
dengan begitu bisa dikatakan sebagai alumni (Hidayat, 2020). Alumni
masih mempunyai tanggung jawab terhadap institusi yang telah
memberikan gelar, itu akan membawa nama baik institusi.

2. Tracer study
Tracer study adalah merupakan salah satu cara untuk mendapatkan
informasi tentang berapa jumlah lulusan perguruan tinggi yang telah
mendapatakan pekerjaan yang sesuai dengan relevansi pendidikannya
(Rizka, 2018). Menurut Lucitasari mengutip dari Schomburg Tracer
study adalah pendekatan yang memungkinkan perguruan tinggi tinggi
untuk memperoleh informasi tentang kemungkinan kekurangan dalam
proses pendidikan dan pembelajaran dan dapat menjadi dasar proses
pendidikan dan pembelajaran dan dapat menjadi dasar perencanaan
kegiatan untuk perbaikan di masa yang akan datang (Lucitasari, Shodiq,
& Khannan, 2019). Tracer study termasuk ke dalam standar ketiga dari
ketujuh standar dalam Standar Akreditasi Program Sarjana yakni
Mahasiswa dan Lulusan, sehingga untuk poin lulusan dapat ditelusuri
dengan kegiatan tracer study (Pakpahan, 2019).Sesuai dengan buku
terbitan BAN-PT untuk data-data mengenai lulusan berisi mengenai
berbagai faktor berikut :
a. Profil lulusan: ketepatan waktu penyelesaian studi, proporsi
mahasiswa yang menyelesaikan studi dalam batas masa studi.
b. Layanan dan pendayagunaan lulusan: ragam, jenis, wadah,
mutu, harga, intensitas.
c. Pelacakan dan perekaman data lulusan: kekomprehensifan,
pemutakhiran, profil masa tunggu kerja pertama, kesesuaian
bidang kerja dengan bidang studi, dan posisi kerja pertama.
d. Partisipasi lulusan dan alumni dalam mendukung
pengembangan akademik dan non-akademik program studi.

6
 7

3. Website
Website sebuah aplikasi yang bisa diakses oleh semua orang
diberbagai wilayah dengan menggunakan jaringan internet (Hayaty &
Meylasari, 2018).

4. User interface
User interface (UI) adalah desain antarmuka untuk aplikasi dalam
sebuah mesin atau perangkat lunak, seperti komputer, aplikasi web,
smartphone, dan perangkat lainnya dengan tujuan untuk
memaksimalkan dan memudahkan pengalaman pengguna dalam
menggunakan aplikasi tersebut (Joo, 2017). UI dapat dikatakan sebagai
teknik dan metode dari tampilan antarmuka sebuah aplikasi untuk
berinteraksi dengan pengguna. Berdasarkan pernyataan tersebut, maka
dapat dipahami bahwa UI adalah bagian dari program yang mengatur
tampilan antar muka untuk pengguna dan menyediakan hubungan yang
menyenangkan antara pengguna dengan sistem. UI pada suatu website
berupa tampilan langsung yang akan bertatap muka dengan user pada
saat pemakaiannya.

Pada tahap perancangan suatu antarmuka ada prinsip-prinsip yang

harus diperhatikan, menurut Nina Lestari terdapat 17 prinsip umum
yang melatarbelakangi tahap perancangan sebuah user interface, yaitu
sebagai berikut(Nina, Mastra, & Dharmawan, 2017) :
a. Kompatibilitas Pengguna (User Compatibility)
Perancang UI harus dapat memahami tentang bagaimana sifat
user dalam menggunakan sebuah aplikasi tersebut agar sistem
yang nantinya akan digunakan dapat memudahkan user dalam
pemakaiannya.
b. Kompatibilitas Produk (Product Compatibility)
Selalu memperhatikan dan mempertahankan kompatibilitas
antar produk.
c. Kompatibilitas Tugas (Task Compability)
Rancang antarmuka sistem sesuai dengan tugas user, dan
jangan mempersulit user dalam penggunaannya.
d. Kompatibilitas Alur Kerja (Workflow Compatibility)
Sistem harus diorganisasikan dengan baik, setiap fungsinya
sesuai dengan kategori fungsinya sehingga dapat
memfasilitasi segala perubahan tugas user.
e. Konsistensi (Consistency)
 8

Konsistensi memungkinkan pengguna untuk berpikir dengan

analoginya dan memprediksi bagaimana melakukan hal-hal
yang belum pernah dilakukan sebelum.
f. Keakraban (Familiarity)
Konsep dan pengaturan yang ada di antarmuka harus yang
dipahami oleh user dengan baik.
g. Kesederhaan (Simplicity)
Kesalahan umum dalam desain antarmuka adalah mencoba
menyediakan semua fungsi.
h. Manipulasi Langsung (Direct manupilation)
User secara langsung dapat melihat tindakannya pada objek
yang terlihat.
i. Kontrol (Control)
Sistem yang digunakan oleh user jangan sampai membuat user
merasa frustasi dan dikontrol.
j. What You See Is What You Get (WYSIWYG)
Adanya korespondensi satu ke satu antara informasi di layar
dengan informasi di printerd-output atau file.
k. Keluwesan (Flexibility)
Mengijinkan semakin banyak kontrol user dan mengakomodir
keterampilan user yang bervariasi.
l. Tanggap (Responsive)
Suatu sistem harus selalu cepat dalam merespon apa yang di
inputkan oleh user.
m. Teknologi tak terlihat (Invisible Technology)
Sangat disarankan untuk menyembunyikan detail teknis sistem
saat membuat antarmuka user. Sehingga user tidak perlu
khawatir dan takut saat menggunakan aplikasi.
n. Kekokohan (Robustness)
Sistem harus dapat mentolerir kesalahan manusia yang
disengaja dan tidak disengaja, yang biasanya tidak dapat
dihindari. Menyediakan pemulihan sistem adalah hal yang
baik untuk mencapai prinsip ini.
o. Perlindungan (Protection)
Prinsip ini berbeda dengan prinsip kekokohan, karena menurut
prinsip ini, sistem harus mencegah kesalahan manusia yang
umum. Sama seperti saat kita menutup lembar kerja Microsoft
Office yang belum disimpan sebelumnya, Office akan secara
otomatis mengkonfirmasi apakah akan menyimpannya.
p. Mudah dipelajari (Easy of Learning)
Suatu UI harus mudah dipelajari bagi user.
q. Mudah digunakan (Easy of Use)
 9

Suatu UI harus mudah digunakan bagi user.

5. User experience
User experience (UX) adalah seluruh aspek yang berkaitan dengan
bagaimana seseorang user memakai produk interaktif, seberapa praktis
mereka memahami cara kerjanya, bagaimana perasaan mereka saat
menggunakannya, dan bagaimana pencapaian tujuan mereka saat
menggunakan produk ini.

Usability adalah sub elemen yang terdapat pada UX. Usability

mengindikasi taraf kualitas di sebuah sistem yg menggambarkan
seberapa mudah sistem untuk dipelajari, mendorong pengguna
menggunakan sistem menjadi bagian dari alat bantu yg positif pada
penyelesaian tugas dikarenakan kemudahan pada penggunaannya.
Bahkan Supriyatna menyatakan menurut Jakob Nielsen terdapat
beberapa ukuran umum yang dapat dijadikan patokan dalam mengukur
usability, yaitu (Supriyatna, Andika, & Belakang, 2017):
a. Learnability
Learnability mengidentifikasikan perihal tingkat kemudahan
bagi user dalam pemenuhan tugas - tugas dasar saat pertama
kali memakai atau saat melihat perancangan.
b. Effiency
Efisiensi mengidentifikasikan seberapa cepat pengguna saat
menyelesaikan tugas - tugas yang diberikan sesudah
sebelumnya mempelajari juga merasakan hasil perancangan
atau memiliki pengalaman sebelumnya.
c. Memorability
Memorability mengidentifikasikan tingkat kemudahan bagi
pengguna ketika menggunakan perancangan dengan baik
setelah dalam kurun waktu atau beberapa lama tak
menggunakan perancangan.
d. Errors
Error mengidentifikasikan jumlah error yang terjadi di waktu
pengguna berinteraksi dengan perangkat. Error mampu
berupa tingkat kejengkelan pada menghadapi error maupun
cara pengguna mengatasi error.
e. Satisfaction
Satisfaction adalah tingkat kepuasan yang dirasakan oleh user
pada saat memakai rancangan ataupun sesudah memakai
rancangan.
 10

6. Use Case Diagram

Use case diagram adalah satu dari berbagai jenis diagram UML
(Unified Modelling Language) yang menggambarkan hubungan
interaksi antara sistem dan aktor. Menurut Fowler dan Scott Use case
adalah seperangkat skenario yang diikat bersama oleh user untuk
mencapai tujuan. Use case mendukung peneliti perangkat lunak
memahami interaksi (Setiyani, 2021). Aktor dalam sebuah sistem
melakukan banyak use case, dan use case mungkin bisa memiliki
banyak aktor. Antara use case dengan aktor atau dengan use case
terdapat beberapa links hubungan include, extend, generalization dan
lain – lain.

Gambar 2. Use Case Diagram

Sumber : www.dicoding.com/blog/contoh-use-case-diagram

7. Prototipe
Pengertian Prototipe adalah suatu versi dari sebuah sistem potensial
yang memberikan ide bagi para pengembang dan calon pengguna,
bagaimana sistem akan berfungsi dalam bentuk yang telah selesai
(Aryani, Sunandar, & Ramadhan, 2019). Sedangkan pengertian sistem
adalah kumpulan dari subsub sistem abstrak maupun fisik yang saling
terintegrasi dan berkolaboarasi untuk mencapai suatu tujuan tertentu.
 11

8. Usability testing
Usablity testing adalah teknik yang digunakan dalam interaksi yang
berpusat pada pengguna untuk mengevaluasi suatu produk dengan
mengujinya pada pengguna (Hidayatullah, 2019). Tujuan dari usability
testing adalah mencari permasalahan kegunaan, mengumpulkan data
kualitatif dan kuantit atif, serta menentukan kepuasan pengguna dengan
produk tersebut. Usability testing merupakan tahap yang penting untuk
dilakukan sebelum sebuah produk dirilis.

B. Hasil Penelitian Terdahulu

No Nama dan
Judul dan Lokasi Hasil
tahun Metode
Penelitian Penelitian
Penelitian
Hasil yang didapatkan
adalah sebuah Sistem
Informasi yang dapat
Muhammad digunakan untuk
Analisis Dan Perancangan Sistem
Rizka, Amri , memperoleh informasi
1. Informasi Tracer study Berbasis Waterfall
Hemdrawati, alumni Politeknik Negeri
WEB
Mahdi (2018) Lhokseumawe. Sistem
Informasi ini langsung dapat
digunakan langsung dari
browser.

Muhammad Perancangan Sistem Penelusuran

Hasil penelitian ini adalah
Razi, Faradika, Alumni (Tracer study) Berbasis desain database dan desain
2. UML
Zulfahmi Web Pada Universitas Dharma
tracer study berbasis web.
(2021) Andalas

Hasil akhir dari penelitian

Ikhda Uswatun
ini adalah penilaian User
Khasanah,
interface dari website
Muammar
UNSRI(Universitas
Fachry, Nadia Penerapan Metode User centered User-
Sriwijaya) yang dilakukan
Saphira design dalam Menganalisis User Centered
3. oleh user. Dan dari hasil
Adriani, interface pada Website Universitas Design
penelitian ini diketahui
Nanda Defiani, Sriwijaya
bahwa 43,8% mahasiswa
Yopis Saputra,
menyatakan puas terhadap
Ali
Interface dari website
Ibrahim(2018)
UNSRI.
 12

Hasil akhir yang didapatkan,

penggunaan aturan desain
HHS Guideline dan metode
UCD terbukti dapat
Abudzar Al
menyelesaikan
Ghiffari, Eko
Perancangan Ulang User interface permasalahan terhadap
Darwiyanto, User
Website Politeknik Kesehatan kebutuhan pengguna dan
4. S.T., M.T., centered
Makassar Menggunakan Metode permasalahan faktor
Danang design
User-Centered Design usability website Poltekkes
Junaedi, S.T.,
Makassar. Hal ini dibuktikan
M.T. (2019)
berdasarkan nilai hasil
pengujian faktor usability
yang didapatkan rata-rata di
atas 75%
M. Agus
Muhyidin, Perancangan UI/UX Aplikasi My Hasil dari peneliatian ini
Muhammad CIC Layanan Informasi Akademik adalah desain aplikasi
5. Prototype
Afif Sulhan, Mahasiswa Menggunakan Layanan Informasi
Agus Sevtiana Aplikasi Figma Akademik Mahasiswa
(2020)
Hasil pengujian antarmuka
perangkat lunak Palembang
Guide dengan instrumen
Usman
SUS memperlihatkan skor
Ependi,
System usability scale Antarmuka System penilaian berada pada angka
Febriyanti
6. Palembang Guide Sebagai Media usability 83 yang berarti perangkat
Panjaitan,
Pendukung Asian Games XVIII scale lunak Palembang Guide
Hutrianto
dinyatakan dapat diterima
(2019)
(acceptable) dan termasuk
dalam grade A dan B dengan
rating excellent
Implementasi Activity Centered
Lorensia Dwi Activity Hasilnya penelitian ini
Design Pada Web Aplikasi
7. Mawarti Centered adalah web pembelajaran
Pembelajaran Bahasa Jepang Bagi
(2018) Design Bahasa Jepang bagi pemula.
Pemula
 13

Hasil Penelitian ini adalah

Penerapan Metode Usablity nilai rata-rata yang diperoleh
Andreas Usability
8. Testing Pada Evaluasi Antarmuka dari situs KAYA Jam
(2018) testing
Situs Kaya Jam tergolong buruk untuk skala
efisiensi sebesar -0,3333.

Hasil akhir dari penelitian

Ahmad ini adalah penilaian User
Khainur interface dari website
Nadhif, Dian UNSRI(Universitas
Perancangan UI/UX Aplikasi
Taufiq W, Sriwijaya) yang
Penjualan Design
9. Muh. Fajar dilakukan oleh user.
Dengan Pendekatan Design Thinking
Hussein, Ina Diketahui bahwa 43,8%
Thinking
Sholihah mahasiswa
Widiati menyatakan puas terhadap
(2021) Interface dari website
UNSRI.

Hasil dari penelitian ini

adalah berupa prototype
Perancangan Ulang Ui/Ux Situs website dengan desain
Elda Chandra
E-Learning Amikom Center Design UI/UX yang telah
10. Shirvanadi
Dengan Metode Design Thinking Thinking dikembangkan dan
(2019)
(Studi Kasus: Amikom Center) disesuaikan dengan
permasalahan dan kebutuhan
yang ditemukan.

1. Pada penilitian terdahulu yang dilakukan oleh Muhammad Rizka, Amri,

Hemdrawati, Mahdi, (2018) dengan judul “Analisis Dan Perancangan
Sistem Informasi Tracer study Berbasis WEB”. Penelitian ini dapat
mengasilkan sistem informasi yang dapat digunakan langsung pada
browser.
 14

Sedangkan perbedaan dengan penilitian yang dilakukan oleh penulis adalah

penulis melakukan perancangan User interface dan User experience
Website Tracer study yang menghasilkan hanya interactive prototype.

2. Pada penelitian terdahulu yang dilakukan oleh Muhammad Razi, Faradika,

Zulfahmi (2021) dengan judul “Perancangan Sistem Penelusuran Alumni
(Tracer study) Berbasis Web Pada Universitas Dharma Andalas”. Penelitian
ini menghasilkan sebuah desain database dan desain tracer study berbasis.
Sedangkan perbedaan dengan penelitian yang dilakukan oleh penulis adalah
penulis tidak menghasilkan desain database dikarenakan penulis lebih
memfokuskan kearah User interface dan User experience Website Tracer
study.

3. Penelitian terdahulu yang dilakukan oleh Ikhda Uswatun Khasanah,

Muammar Fachry, Nadia Saphira Adriani, Nanda Defiani, Yopis Saputra,
Ali Ibrahim (2018) yang berjudul “Penerapan Metode User centered design
dalam Menganalisis User interface pada Website Universitas Sriwijaya”.
Penelitian ini analisa tentang berapa persen nilai kebergunaan desain yang
digunakan dalam website universitas Sriwijaya.
Sedangkan perbedaan dengan penelitian yang dilakukan penulis adalah
penulis tidak hanya menganalisa, tetapi juga merancang UI dan UX dari
Website Tracer study dan melakukan pengujian juga terkait usability dan
user experience.

4. Penelitian terdahulu yang dilakukan oleh Abudzar Al Ghiffari, Eko

Darwiyanto, S.T., M.T., Danang Junaedi, S.T., M.T. (2019) dengan judul
Perancangan Ulang User interface Website Politeknik Kesehatan Makassar
Menggunakan Metode User-Centered Design”. Dalam penelitian ini
menghasilkan nilai dari usability dari User interface Website Politekni
Kesehatan Makassar dengan menggunakan USE Kuesioner.
Sedangkan perbedaan dari peneltian yang penulis lakukan adalah pengujian
dalam usability menggunakan metode System Usability System

5. Penelitian terdahulu yang dilakukan oleh M. Agus Muhyidin, Muhammad

Afif Sulhan, Agus Sevtiana (2020) dengan judul “Perancangan UI/UX
Aplikasi My CIC Layanan Informasi Akademik Mahasiswa Menggunakan
Aplikasi Figma”. Penelitian ini menghasilkan desain tampilan dari aplikasi
MY CIC.
Sedangkan perbedaan dari penelitian yang dilakukan oleh penulis adalah
penulis tidak hanya membuat desain tampilan tetapi penulis juga melakukan
pengujian terhadap usability dan user experience dengan menggunakan
interactive prototype.
 15

6. Penelitian terdahulu yang dilakukan oleh Usman Ependi, Febriyanti

Panjaitan, Hutrianto (2019) dengan judul “System usability scale
Antarmuka Palembang Guide Sebagai Media Pendukung Asian Games
XVIII”. Penelitian ini menghasilkan nilai evaluasi terhadap antarmuka
palembang guide yang dilakukan menggunakan metode SUS.
Sedangkan perbedaan dengan penelitian yang dilakukan oleh penulis adalah
Evaluasi yang dilakukan tidak hanya usability tetapi juga tentang user
experience.

7. Pada penelitian terdahulu yang dilakukan oleh Lorensia Dwi Mawarti

(2018) dengan judul “Implementasi Activity Centered Design Pada Web
Aplikasi Pembelajaran Bahasa Jepang Bagi Pemula”. Penelitian ini
menghasilkan web pembelajaran Bahasa Jepang bagi pemula.
Sedangkan perebedaan dengan penelitian yang dilakukan oleh penulis
adalah penulis dalam perancangan ini berpaku pada user dikarenankan
metode yang digunakan adalah user centered design.

8. Pada penelitian terdahulu yang dilakukan oleh Andreas (2018) dengan judul
“Penerapan Metode Usablity Testing Pada Evaluasi Antarmuka Situs Kaya
Jam”. Hasil Penelitian ini adalah nilai rata-rata menggunakan metode ueq
sedangkan metode yang digunakan pada penelitian penulis menggunakan 2
metode pengujian yaitu SUS dan UEQ.

9. Pada penelitian terdahulu yang dilakukan oleh Ahmad Khainur Nadhif,

Dian Taufiq W, Muh. Fajar Hussein, Ina Sholihah Widiati (2021) dengan
judul “Perancangan UI/UX Aplikasi Penjualan Dengan Pendekatan Design
Thinking”. Hasil penelitian terdahulu menghasilkan desain tampilan
penjualan custom baju dengan metode design thinking.
Sedangkan perbedaan dengan penelitian yang dilakukan oleh penulis adalah
metode yang digunakan. Penulis menggunakan metode user centered
design yang lebih fokus kepada user.

10. Pada penelitian terdahulu yang dilakukan oleh Elda Chandra Shirvanadi
(2019) dengan judul “Perancangan Ulang Ui/Ux Situs E-Learning Amikom
Center Dengan Metode Design Thinking (Studi Kasus: Amikom Center)”.
Penelitian ini menghasilkan rancangan ulan UI/UX E-Learning Amikom
Center dengan Design Thinking.
Sedangkan perbedaan dengan penelitian yang dilakukan oleh penulis adalah
metode yang digunakan. Penulis menggunakan metode user centered
 16

design yang lebih fokus kepada user. User sangat berperan penting dalam
perancangan pada penelitian penulis.

C. Kerangka Pemikiran

Gambar 3. Kerangka Pemikiran

 BAB III
Metodologi Penelitian

A. Objek Penelitian
Objek penelitian ini adalah Fakultas Teknologi Informatika,
Perbanas Institute. Perbanas Institute berlokasi di Setiabudi, Jakarta Selatan.
Perbanas Institute ini memiliki dua fakultas, salah satunya adalah Fakultas
Teknologi Informatika. Terdapat beberapa kelemahan pada sistem
informasi untuk siklus kelulusan yang ada pada Fakultas Teknologi
Informatika khususnya tracer study. Data-data yang diperoleh dari tracer
study tidak diolah dengan baik sehingga tidak dapat menghasilkan informasi
yang berkualitas. Informasi ini sebenarnya sangat penting sebagai bahan
evaluasi dan meningkatkan kualitas kinerja Fakultas Teknologi Informatika.
Oleh karena itu penulis melakukan perancangan user interface dan user
experience tracer study untuk menyajikan informasi yang berkualitas
sebagai bahan evaluasi bagi pihak Fakultas Teknologi Informatika untuk
meningkatkan kualitas kinerja Fakultas Teknologi Informatika

B. Metode Penelitian
1. User centered design
Dalam perancangan penelitian ini penulis menggunakan metode
User centered design sebagai acuan agar penelitian ini lebih terarah dan
dapat sesuai dengan kebutuhan pengguna. Penulis menggunakan
metode ini karena metode ini cocok dalam penelitian ini yang fokus
pada pengguna, perancangan, terintergrasi, pengujian pengguna dan
perancangan interaktif. User centered design adalah sebuah proses
desain interface (antarmuka) yang fokus terhadap tujuan kegunaan,
karakteristik pengguna, lingkungan, tugas, dan alur kerja di dalam
desainnya (Khasanah, Fachry, Adriani, & Defiani, 2018).

17
 18

User centered design terdiri dari 5 tahapan yang harus dilakukan.

Gambar 4. User centered design

Pada setiap tahapan dilakukan proses yang menghasilkan

dari proses tersebut. Proses dari proses User centered design di atas,
dijelaskan sebagai berikut :
a. Plan the Human Centered Process
Dalam tahapan ini dilakukannya analisis informasi maupun teori
yang berhubungan dengan proses membangun sistem yang berpusat
kepada pengguna. Analisis teori, tata cara yang mempunyai tujuan
untuk menggali kebutuhan yang diperlukan untuk penelitian ini serta
segala kebutuhan yang terkait dengan penelitian ini.
b. Specify the Context of Use
Tahapan ini menjelaskan untuk apa dan dalam keadaan macam apa
pengguna akan memakai produk.
c. Specify User and Organitazional Requirements
Mengenali kebutuhan pengguna serta kebutuhan organisasi terhadap
sistem yang akan dibangun.
d. Product Design Solutions
Dalam tahapan ini peneliti membangun desain untuk solusi dari
masalah yang telah diketahui setelah menganalis.
e. Evaluate Design Against User Requirement
Setelah membuat desain dan diuji coba, peneliti harus melakukan
evaluasi terhadap desain yang sudah dicoba pada tahap sebelumnya.
Desain yang sudah diuji coba wajib memenuhi persyaratan yang
diperlukan oleh pengguna. Pada tahap ini dilihat apakah tujuan dari
pengguna dan organisasi sudah tercapai.
 19

2. System usability scale

System usability scale (SUS) adalah salah satu metode uji pengguna
yang menyediakan alat ukur yang “quick and dirty” yang dapat
diandalkan (Soejono, Setyanto, Sofyan, & Anova, 2018). Metode uji
pengguna ini diperkenalkan oleh John Brooke pada tahun 1986 yang
dapat digunakan untuk melakukan evaluasi berbagai jenis produk
ataupun layanan, termasuk di dalamnya hardware, software, perangkat
mobile, website, dan aplikasi.

Tabel 1. Instrument Penilaian SUS

No Pernyataan Skala
1 Saya pikir bahwa saya akan lebih sering menggunakan aplikasi ini 1 s/d 5
2 Saya menemukan bahwa aplikasi ini, tidak harus dibuat serumit ini 1 s/d 5
3 Saya pikir aplikasi mudah untuk digunakan 1 s/d 5
4 Saya pikir bahwa saya akan membutuhkan bantuan dari orang teknis untuk
1 s/d 5
dapat menggunakan aplikasi ini
5 Saya meneukan berbagai fungsi di aplikasi ini diintegrasikan dengan baik 1 s/d 5
6 Saya pikir ada terlalu banyak ketidaksesuaian dalam aplikasi ini 1 s/d 5
7 Saya bayangkan bahwa kebanyakan orang akan mudah untuk mempelajari
1 s/d 5
aplikasi ini dengan sangat cepat
8 Saya menemukan, aplikasi ini sangat rumit untuk digunakan 1 s/d 5
9 Saya merasa sangat percaya diri untuk menggunakan aplikasi ini 1 s/d 5
10 Saya perlu belajar banyak hal sebelum saya bisa memulai menggunakan
1 s/d 5
aplikasi

Seperti pada tabel 1 memiliki skala 1 s/d 5: 1 berarti sangat tidak

setuju (strongly disagree), 2 berarti tidak setuju (disagree), 3 berarti agak
setuju (somewhat agree), 4 berarti setuju (agree), dan 5 sangat setuju
(strongly agree). Untuk melakukan perhitungan hasil evaluasi dengan
instrumen SUS, terdapat aturan tersendiri dengan ketentuan sebagai
berikut.
a. Instrumen nomor ganjil skala jawaban dikurangi 1
b. Instrumen nomor genap skala jawaban dikurangi 5
c. Menjumlahkan skala jawaban dan dikali 2,5
d. Menentukan rerata jawaban instrumen
Setelah menyelesaikan perhitungan skor SUS, penentuan hasil
kebergunaan sebuah sistem dapat dilihat pada gambar berikut :
 20

Gambar 5. Penentuan Hasil Penilaian Kebergunaan Dengan SUS

3. User experience questionnaire

Demi desain User interface (UI) yang sukses maka dibutuhkan
sebuah uji coba user experience (UX). UX yang baik akan mendukun
interaksi antara pengguna dengan sistem. Instrumen penelitian yang
digunakan adalah UEQ yang berisi butir-butir pertanyaan untuk
mengukur user experience dari responden. UEQ terdiri dari pasangan
yang saling bertolak belakang secara makna dan dapat
merepresentasikan produk dengan 7 (tujuh) skala.

Tabel 2. Daftar Kuesioner UEQ

1 2 3 4 5 6 7
menyusahkan o o o o o o o menyenangkan
tak dapat dipahami o o o o o o o dapat dipahami
kreatif o o o o o o o monoton
mudah dipelajari o o o o o o o sulit dipelajari
bermanfaat o o o o o o o kurang bermanfaat
membosankan o o o o o o o mengasyikkan
tidak menarik o o o o o o o menarik
tak dapat diprediksi o o o o o o o dapat diprediksi
cepat o o o o o o o lambat
berdaya cipta o o o o o o o konvensional
menghalangi o o o o o o o mendukung
baik o o o o o o o buruk
rumit o o o o o o o sederhana
tidak disukai o o o o o o o menggembirakan
lazim o o o o o o o terdepan
tidak nyaman o o o o o o o nyaman
 21

aman o o o o o o o tidak aman

memotivasi o o o o o o o tidak memotivasi
memenuhi ekspektasi o o o o o o o tidak memenuhi ekspektasi
tidak efisien o o o o o o o efisien
jelas o o o o o o o membingungkan
Kreatif o o o o o o o praktis
Inventif (Baru) o o o o o o o berantakan
Biasa o o o o o o o tidak atraktif
Konservatif (Kolot) o o o o o o o tidak ramah pengguna

C. Alat dan Bahan Penelitian

Alat dan bahan yang digunakan dalam penelitian ini terdiri dari
perangkat lunak dan perangkat keras. Perangkat keras terdiri atas 1
komputer dan Perangkat Lunak dari beberapa software yang akan
digunakan untuk perancangan user interface dan user experience website
tracer study Perbanas Institute ini.

1. Kebutuhan Perangkat Keras

Perangkat keras (Hardware) adalah seluruh komponen –
komponen atau peralatan yang digunakan untuk mendukung dalam
melakukan proses pengolahan data, baik pada saat pembuatan
program maupun pada saat program di implementasikan. Kebutuhan
dalam perangkat keras antara lain :
a. PC dengan OS min windows 8
b. Ram min 4GB
c. HDD min 320GB
d. Modem/Wifi/Koneksi Internet

2. Kebutuhan Perangkat Lunak

Dalam perancangan sistem tracer studi alumni ini diperlukan
juga kebutuhan perangkat lunak dalam menunjang proses
berjalannya sistem yang akan dibuat. Ada 4 Perangkat lunak yang
akan digunakan dalam penelitian ini, antara lain:
a. Figma
b. Excel
c. Web Browser (Chrome)
d. Adobe Illustrator
 BAB IV
Hasil dan Pembahasan

A. Rumusan Konsep
Berdasarkan karasteristik target serta masalah utama mengenai
kurangnya media alumni dalam mencari informasi setelah kelulusannya
dan media pengelolaan data alumni maka pada perancangan ini, konsep dari
rancangan ini adalah “Usability” yang diharapkan dapat memberikan
system yang mudah dipahami dan digunakan sehingga pengguna dapat
menggunakan fungsi system dengan mudah dan membantu dalam
menyelesaikan tugas-tugas. Dengan konsep yang memikirkan “Usability”
dibantu dengan keikutsertaan user sebagai target utama sesuai dengan
metode User-Centered Design.

B. Plan the human centered process

Pada tahap ini dilakukan analisis atau teori yang berkaitan dengan
proses pembangunan sistem yang berpusat ke pengguna atau user. Hasil
pada tahapan ini adalah kerangka pemikiran yang menggambarkan cara
dalam pembangunan rancangan pada penelitian ini, gambar kerangka
penelitian dapat dilihat pada Gambar.2.

C. Specify the context of use

Seperti yang sudah dijelaskan pada Pendahuluan. Peniliti membuat
sistem ini dengan maksud memberikan wadah yang dapat mempermudah
institusi dalam pengolahan data alumni atau tracer study tetapi tidak hanya
memberikan keuntungan untuk institusi tetapi juga kepada alumni. Sitem
ini dibentuk berpusat kepada pengguna yaitu alumni agar dapat
menggunakan sistem dengan mudah.
Untuk mengetahui spesifikasi apa saja yang dituju peneliti melakukan
beberapa tahap.

22
 23

1. Studi Literatur
Studi literatur penelitian ini dilakukan dengan mencari
informasi dari berbagai literatur yang berhubungan tentang proses
perancangan UI menggunakan metode UCD (User centered design),
yang bertujuan untuk memenuhi kebutuhan user untuk Website
Tracet Study agar user nyaman pada saat pemakaian.

2. Survei
Penulis melakukan survei dengan membagikan kuisioner.
Diperoleh 30 data dari responden yang dirangkum sebagai berikut.
a. Responden dari kuisioner ini adalah alumni dari FTI
Perbanas Institute.
b. Semua responden kesulitan dalam mencari informasi terkait
alumni lainnya.
c. Responden memerlukan wadah untuk membantu
mempermudah mendapat informasi antar alumni untuk
menjaga hubungan dan memperluas relasi.
d. Desain yang simple dan modern adalah desain yang banyak
diinginkan oleh responden.
e. Selain membutuhkan informasi terkait alumni, Responden
juga memerlukan informasi lowongan pekerjaan

3. Interview
Interview dilakukan untuk mendapatkan informasi mengenai
kebiasaan pengguna dan informasi yang dibutuhkan pengguna pada
perancangan desain UI/UX website tracer study. Peneliti
menanyakan pertanyaan kepada 5 responden yang telah dipilih
berdasarkan hasil survey yang telah dilakukan. Interview dilakukan
melalui video call dengan responden pada waktu yang telah
disepakati bersama pada tanggal 19 s/d 20 November 2022.
 24

Tabel 3. Pertanyaan Interview

Tujuan Pertanyaan
Mengetahui pengalaman pengguna 1a.Seberapa sering Anda menggunakan
menggunakan komputer ?
komputer.  Aplikasi apa saja yang sering anda
gunakan ?
1b. Apakah anda pernah membuka dan
menggunakan website tracer study?
Mengetahui cara pengguna menangani 2a. Apa kendala yang anda hadapi saat
masalah tersebut ingin mencari relasi alumni atau mencari
pekerjaan ?
 Hal apa saja yang anda butuhkan
untuk mengatasi masalah
tersebut ?
Mengetahui cara pengguna dalam 3a. Dalam mencari relasi alumni pernah
mencari relasi alumni menggunakan internet website ?
3b.Pada saat menggunakan website
apakah anda kendala kurangnya informasi
pada web tersebut ?
Mengetahui keinginan pengguna dalam 4a. Bagaimana tanggapan anda jika
rancangan aplikasi yang akan dibangun terdapat rancangan sebuah website yang
menyediakan informasi mengenai relasi
alumni dan lowongan pekerjaan, apa
harapan anda terhadap website tersebut?
 Apa saja fitur yang sebaiknya ada
pada website tersebut ?
4b. Bagaimana desain atau tampilan
aplikasi mengenai informasi tracer study
yang menarik menurut anda ?
 25

D. Specify User and Organizational Requirement

1. Target Audience
Sesuai dengan nama rancangan ini yang menjadi target adalah
Alumni Fakultas Teknologi Informasi Perbanas Institute. Diharapkan
dengan rancangan UI Website ini alumni yang sulit mencari informasi
seputar jejaring alumni yang lain, info pekerjaan, dan info
pengembangan karir dapat terbantu.

2. Persona
User persona didapatkan dari responden yang mempunyai kriteria
pada penlitian ini, yaitu alumni FTI Perbanas Institute. Pada tahap ini
telah dilakukan proses interview terhadap 5 orang alumni FTI Perbanas
Institute. Kesimpulan dari hasil interview dapat dilihat pada Tabel 4.
Tokoh persona dipilih dari responden yang preventative dalam
penelitian ini. Tokoh persona yang terpilih adalah Raihan Salsa yang
baru saja menyelesaikan bidang studi Sistem Informasi pada Fakultas
Teknologi Informasi Perbanas Institute.

Tabel 4. Persona

Demographic Nama :Raihan Salsa

Umur: 22 Tahun
Behaviour -Terbiasa menggunakan Komputer
- Menggunakan Komputer 3-6jam
Sehari
Enviroment and Technology Menggunakan komputer terutama
pada browser untuk menyelesaikan
keperluan
-Pernah menggunakan media social
mencari informasi terkait alumni
Attitude and Activity -Kegiatan di rumah sehari-hari
-Mencari kerja melalui internet
Problem -Sulit mencari informasi tentang
alumni untuk menjalin relasi
-Mencari lowongan pekerjaan sesuai
jurusan
Needs -User friendly, design web dan
pemilihan warna yang nyaman dilihat,
 26

serta mencakup keseluruhan informasi

yang dibutuhkan

3. Materi Pesan
Sesuai dengan data responden, interview dan persona yang
didapatkan, pada perancangan UI Website Tracer study ada 4 pesan
yang ingin disampaikan yaitu adalah informasi mengenai alumni, info
pekerjaan, kegiatan dalam pengembangan keahlian, dan berita kampus.
Dengan rancangan ini diharapkan dapat memberikan pesan kepada
target audience dengan efektif

4. Strategi Komunikasi
Agar dapat menyampaikan pesan dengan mudah kami membuat
rancangan dengan antarmuka website. Website desktop memudahkan
pengguna dalam melihat informasi dan memudahkan dalam pengisian
kuisioner

E. Product design solution

Pada tahapan ini dibuat desain sesuai dengan data yang sudah didapat
dari prsoes sebelum-sebelumnya.

1. Use Case Diagram

Use case diagram dibuat untuk mendeskripsikan interaksi
antara pengguna dengan system. Dalam use case diagram juga dapat
mengetahui fungsi apa saja yang ada dalam system dan siapa saja
pengguna yang berhak menggunakan funsi tersebut. Pada gambar di
bawah ini dapat dilihat “Use Case Diagram Rancangan Website
Tracer study FTI Perbanas Institute” ya memperlihatkan fungsi apa
saja yang ada dalam rancangan website tersebut.
 27

Gambar 6. Use Case Diagram Rancangan Website Tracer study FTI Perbanas
Institute

Dapat dilihat pada gambar di atas, sistem ini memiliki satu

aktor yaitu alumni dikarenakan sistem ini fokus kepada pengguna
yaitu alumni. Alumni terlebih dahulu haru melakukan login hingga
dapat menggunakan sistem ini dengan sepenuhnya
 28

2. Activity Diagram
Pada Activity Diagram dijelaskan apa saja Langkah-langkah atau
alur yang akan dilakukan oleh pengguna terhadap fungsi yang ada
dalam prototype website tracer study yang sesuai kebutuhan yang akan
dibuat.

a. Activity Diagram Daftar dan Login Alumni

Gambar 7. Activity Diagram Daftar dan Login

 29

b. Activity Diagram Berita

Gambar 8. Activity Diagram Berita

 30

c. Activity Diagram Kuesioner Tracer study

 31

Gambar 9. Activity Diagram Kuesioner Tracer study

d. Activity Diagram Pencarian Alumni

 32

Gambar 10. Activity Diagram Lowongan Kerja

e. Activity Diagram Lowongan Kerja

Gambar 11. Activity Diagram Lowongan Kerja

 33

f. Activity Diagram Event

Gambar 12. Activity Diagram Event

 34

g. Activity Diagram Profile

Gambar 13. Activity Diagram Profile

 35

h. Activity Diagram Logout

Gambar 14. Activity Diagram Logout

 36

3. User Flow
User Flow dibuat untuk menggambarkan Langkah-langkah pada
fitur yang dilakukan oleh pengguna untuk mencapai tujuan dari fitur
itu. User flow menggambarkan Langkah-langkah pengguna untuk
menyelesaikan suatu pekerjaan dengan fitur yang tersedia.

a. User Flow Daftar

User flow daftar ini akan menggambarkan langkah-langkah
yang akan dilakukan pengguna saat membuat akun baru.
User flow daftar dapat dilihat pada gambar di bawah ini.

Gambar 15. User Flow Daftar

b. User Flow Login

User flow login dibuat untuk menggambarkan langkah-
langkah yang akan dilakukan oleh pengguna saat ingin
masuk ke Homepage Alumni menggunakan akun yang
sudah dibuat sebelumnya. User flow login dapat dilihat pada
gambar dibawah ini.

Gambar 16. User Flow Berita

 37

c. User Flow Kuesioner Tracer study

User flow kuesioner tracer study ini dibuat untuk
menggambarkan langkah-langkah yang akan dilakukan
pengguna dalam pengisian kuesioner tracer study.
User flow kuesioner tracer study dapat dilihat pada gambar
di bawah ini

Gambar 17. User Flow Kuesioner Trace Study

 38

d. User Flow Pencarian Alumni

User flow pencarian alumni ini dibuat untuk
menggambarkan langkah-langkah yang akan dilakukan oleh
pengguna saat ingin mencari alumni pada website tracer
study. User flow pencarian alumni dapat dilihat pada gambar
di bawah ini.

Gambar 18. User Flow Pencarian Alumni

 39

e. User Flow Lowongan Pekerjaan

User flow lowongan kerja ini dibuat untuk menggambarkan
langkah-langkah yang akan dilakukan oleh pengguna saat
ingin mencari pekerjaan melalui rancangan website tracer
study. User flow lowongan pekerjaan dapat dilihat pada
gambar di bawah ini.

Gambar 19. User Flow Lowongan Kerja

 40

f. User Flow Event

User flow event ini dibuat untuk menggambarkan langkah-
langkah yang akan dilakukan oleh pengguna dalam mencari
event yang ingin diikuti melewati rancangan website tracer
study. User flow event dapat dilihat pada gambar di bawah
ini.

Gambar 20. User Flow Event

 41

g. User Flow Profile

User flow profile ini dibuat untuk menggambarkan langkah-
langkah yang akan dilakukan oleh pengguna untuk melihat
profile dirinya yang terdaftar dalam rancangan website
tracer study. User flow profile dapat dilihat pada gambar di
bawah ini.

Gambar 21. User Flow Profile

h. User Flow Logout

User flow logout dibuat untuk menggambarkan langkah
langkah yang akan dilakukan oleh pengguna saat pengguna
ingin keluar dari akun yang dipakai dalam rancangan
website tracer study. User flow logout dapat dilihat pada
gambar di bawah ini.

Gambar 22. User Flow Logout

 42

4. Visual
Agar menarik minat pengguna, tampilan yang akan dirancang dalam
bentuk minimalus sesuai dengan kebutuhan pengguna. Minimalis
identic dengan tampilan yang tidak terlalu banyak ornament yang dapat
memudahkan pegguna dalam menggunakan website tracer stud FTI
Perbanas Instittute

5. Wireframe
Wireframe dibuat untuk menggambarkan kerangka dalam desain
sebuah website atau aplikasi. Merancang wireframe sama dengan
merencanakan garis besar kerangka sebuah website atau aplikasi.

a. Wireframe Landingpage
Wireframe landingpage ini adalah tampilan halaman utama
yang akan muncul ketika pengguna mengakses rancangan
website tracer study FTI Perbanas Institute. Dalam
wireframe landingpage ini menampilkan welcoming page,
login, daftar, berita, dan penjelasan mengenai hal-hal tracer
study.
 43

Gambar 23. Wireframe Landingpage

 44

b. Wireframe Daftar
Wireframe daftar ini adalah tampilan yang akan muncul
ketika pengguna ingin mendaftarkan akun yang akan
digunakan untuk rancangan website tracer study FTI
Perbanas Institute. Halaman ini berisikan form yang harus
diisi untuk pendaftaran akun pengguna. Pada wireframe ini
juga terdapat dropdown menu yang menjelaskan pertanyaan
yang sering ditanyakan pengguna yang ingin mendaftarkan
akun.

Gambar 24. Wireframe Daftar

 45

c. Wireframe Login
Wireframe login ini adalah tampilan yang akan muncul
ketika pengguna ingin masuk ke akun yang sudah terdaftar
dan akan digunakan pada rancangan website tracer study FTI
Perbanas Institute. Halaman ini berisikan form login yang
harus diisi.

Gambar 25. Wireframe Login

 46

d. Wireframe Berita
Wireframe berita ini adalah tampilan yang akan muncul bila
pengguna memilih menu berita yang tersedia dalam
landingpage maupun homepage alumni. Dalam wireframe
ini ditampilkan beberapa berita yang ada seputar tracer study
dan alumni FTI Perbanas Institute.

Gambar 26. Wireframe Berita

 47

e. Wireframe Homepage Alumni

Wireframe homepage alumni ini adalah tampilan yang akan
muncul ketika pengguna sudah berhasil login ke dalan
rancangan website tracer study FTI Perbanas Institute.
Dalam wireframe homepage alumni ini ditampilkan ucapan
selamat datang denga nama alumni, total lulusan per
program studi dan total lulusan fakultas, dashboard,
kuesioner tracer study, lowongan pekerjaan terbaru, berita
terbaru dan event terbaru.
48
 49

Gambar 27. Wireframe Homepage Alumni

 50

f. Wireframe Pencarian Alumni

Wireframe pencarian alumni ini adalah tampilan yang akan
muncul bila pengguna memilih menu alumni yang tersedia
setelah login. Wireframe pencarian alumni menampilkan
daftar dan informasi singkat seputar alumni.

Gambar 28. Wireframe Pencarian Alumni

 51

g. Wireframe Detail Alumni

Wireframe detail alumni ini adalah tampilan yang akan
muncul bila pengguna menekan panah yang tersedia pada
baris alumni yang dituju. Wireframe ini menampilkan
tampilan lengkap seputar informasi alumni FTI Perbanas
Institute.

Gambar 29. Wireframe Detail Alumni

 52

h. Wireframe Lowongan Kerja

Wireframe lowongan kerja ini adalah tampilan yang akan
muncul bila pengguna memilih menu lowongan yang
tersedia setelah pengguna berhasil login ke dalam rancangan
website tracer study FTI Perbanas Institute.

Gambar 30. Wireframe Lowongan Kerja

 53

i. Wireframe Detail Pekerjaan

Wireframe detail pekerjaan ini adalah tampilan yang akan
muncul bila pengguna menekan salah satu lowongan yang
ada pada halaman lowongan pekerjaan. Pada wireframe
detail pekerjaan ini terdapat penjelasan mengenai pekerjaan
yang dipilih oleh pengguna sebelumnya. Terdapat kontak
untuk mengajukan pekerjaan tersebut dan tombol untuk
menyimpan lowongan tersebut untuk dilihat nanti.

Gambar 31.Wireframe Detail Pekerjaan

 54

j. Wireframe Kuesioner Tracer study

Wireframe tracer study ini adalah tampilan yang akan
muncul saat pengguna memilih menu kuesioner yang
tersedia bila pengguna sudah berhasil login ke dalam
rancangan tracer study FTI Perbanas Institute.

Gambar 32. Wireframe Kuesioner Tracer study

 55

k. Wireframe Event
Wireframe event adalah tampilan yang akan muncul bila
pengguna memilih menu event yang tersedia setelah
pengguna berhasil login ke dalam rancangan website tracer
study FTI Perbanas Institute.

Gambar 33. Wireframe Event

 56

l. Wireframe Profile Pengguna

Wireframe profile pengguna adalah tampilan yang akan
muncul bila pengguna menekan foto profil user yang tersedia
pada pojok kanan atas atau header bagian kanan. Wireframe
profile pengguna ini menampilkan informasi mengenai data
pengguna akun tersebut.

Gambar 34. Wireframe Profile Pengguna

 57

m. Wireframe Logout
Wireframe ini menampilkan tempat dimana logout dapat
diakses oleh pengguna. Pilihan logout akan keluar bila
pengguna menekan panah yang tersedia di sebelah nama
pengguna atau header bagian kanan.

Gambar 35. Wireframe Logout

6. Komponen Desain User interface

Sebelum masuk ke dalam pembuatan User interface, penulis haru
memperhatikan beberapa hal terlebih dahulu. Hal-hal tersebut yaitu.

a. Warna

Gambar 36. Warna

Warna yang dominan dipakai dalam rancangan website tracer study FTI
Perbanas Institute ini adalah warna biru. Alasan menggunakan warna
biru adalah warna biru dinilai dapat meningkatkan produktivitas.
Warna biru juga sering dikaitkan dengan brand-brand teknologi seperti
Facebook dan Twitter.
 58

Dalam rancangan website tracer study FTI Perbanas Institute ini

menggunakan warna biru dengan kode hexa #0E91A1.

Gambar 37. Kode Hexa Warna

Dengan warna ini diharapakan dapat meningkatkan produktivitas

pengguna rancangan website tracer study FTI Perbanas Institute dan
memberikan ketenanangan dalam pembawaan yang santi tetapi tetap
terlihat formal.

b. Tipografi
Font yang dipilih untuk digunakan dalam rancangan user
interface website tracer study FTI Perbanas Institute yaitu
Inter, karena font ini cocok digunakan untuk layar komputer.
Font ini juga banyak digunakan dalam kebutuhan
perancangan user interface. Font ini memiliki 18 gaya yang
dapat membantu meningkatkan keterbacaan teks dengan
campuran ukuran teks. Font ini juga menampilkan gaya yang
simple tetapi memiliki kesan modern. Sehingga cocok dalam
segi estetika tampilan dan kenyamanan saat dibaca oleh mata
pengguna.

c. Kontrol UI
Komponem interaktif dalam rancangan user interface
website tracer study FTI Perbanas Institute ini menggunakan
tombol atau ikon. Dalam website ini juga terdapat navigation
bar untuk berpindah antara halaman satu ke halaman yang
lainnya. Navigation bar diletakkan pada satu tempat yang
sma pada header. Tipe yang digunakan adalah navigasi
linear agar memudahkan pengguna dalam menemukan
halaman yang dituju.
 59

Gambar 38. Navigasi Linear

Sumber: dewaweb.com
 60

d. Layout
Dalam rancangan user interface website tracer study FTI
Perbanas Insitute layout website dibagi menjadi 3 bagian,
yaitu :
1) Header
Header adalah bagian atas pada halaman website.
Pada bagian kanan header terdapat logo dari halaman
website ini untuk menunjukkan identitas dari
website. Pada header juga terdapat navigasi untuk ke
halaman yang lainnya
2) Body/Content
Body atau content adalah bagian isi informasi dari
website ini.
3) Footer adalah bagian bawah pada halaman website.
Pada bagian ini terdapat tentang informasi kampus
Perbanas Institute seperti alamat dan kontak yang
bisa dihubungi.
Gambar Layout dapat dilihat pada gambar di bawah ini.

Gambar 39. Layout

Sumber: dewaweb.com
 61

7. Interactive Prototype
Tahap perancangan interactive prototype ini dari segi interface akan
dibuat lebih detail lagi dibandingkan dengan metode wireframe. Dari
segi visual dan kontennya sudah lebih berwarna dan hampir menyamai
dengan final produk. Selain itu juga ditambahkan transisi dan animasi
serta fitur yang lebih interaktif dan menarik. Pada perancangan
interactive prototype ini menggunakan warna biru dengan kode hexa
#0E91A1 sebagai warna dasar nya dan menggunakan Inter untuk font
dalam rancangan ini. Pembuatan interactive prototype hasil dari
wireframe yang dibuat dengan penambahan komponen seperti color
palette, tipografi, navigation, button, dan illustration.

Gambar 40. Interactive Prototype

 62

a. Prototype Landingpage
Ketika pengguna masuk ke dalam website tersebut akan
langsung diarahkan ke landing page. Landing page ini
menampilkan welcoming page, login, daftar, berita, dan
penjelasan mengenai hal-hal tracer study. Prototype
landingpage dapat dilihat pada gambar di bawah ini.
 63

Gambar 41. Prototype Landingpage

 64

b. Prototype Daftar
Ketika pengguna menekan tombol daftar, ini adalah tampilan
yang akan digunakan untuk rancangan website tracer study
FTI Perbanas Institute. Halaman ini berisikan form yang
harus diisi untuk pendaftaran akun pengguna. Pada
wireframe ini juga terdapat dropdown menu yang
menjelaskan pertanyaan yang sering ditanyakan pengguna
yang ingin mendaftarkan akun. Setelah daftar berhasil akan
dialihkan ke halaman pemberitahuan seperti gambar di
bawah ini.

Gambar 41. Prototype Daftar

Gambar 42. Prototype Berhasil Daftar

 65

c. Prototype Login
Ketika pengguna menekan tombol login, ini tampilan yang
akan muncul ketika pengguna ingin masuk ke akun yang
sudah terdaftar dan akan digunakan pada rancangan website
tracer study FTI Perbanas Institute. Halaman ini berisikan
form login yang harus diisi. Bila selesai melakukan login
pengguna langsung dialihkan ke Homepage Alumni.

Gambar 43. Prototype Login 1

Gambar 44. Prototype Login 2

 66

d. Prototype Homepage Alumni

Setelah pengguna melakukan login, ini adalah tampilan yang
akan muncul. Dalam prototype homepage alumni ini
ditampilkan ucapan selamat datang dengan nama alumni,
total lulusan per program studi dan total lulusan fakultas,
dashboard, kuesioner tracer study, lowongan pekerjaan
terbaru, berita terbaru dan event terbaru. Terdapat juga
navigasi untuk menuju halaman – halaman yang lainnya.
 67

Gambar 45. Prototype Homepage Alumni

 68

e. Prototype Kuesioner
Bila pengguna memilih navigasi kuisioner, ini adalah
tampilan yang akan muncul. Pengguna ditampilkan beberapa
pertanyaan terkait tracer study. Total page untuk kuisioner
berjumlah 7 halaman.

Gambar 46. Prototype Kuesioner Tracer study

 69

Gambar 47. Prototype Selesai Kuesioner Trace Study

f. Prototype Alumni
Bila pengguna memilih navigasi alumni, ini adalah tampilan
yang akan muncul. Pada halaman ini akan menampilkan info
alumni.

Gambar 48. Prototype Alumni

 70

g. Prototype Detail Alumni

Jika pengguna menekan panah yang ada pada daftar alumni,
akan muncul overlay yang menampilkan informasi lebih
lengkap terkait alumni.

Gambar 49. Prototype Detail Alumni

h. Prototype Lowongan Pekerjaan

Bila pengguna memilih navigasi lowongan, ini adalah
tampilan yang akan muncul. Pada halaman ini terdapat
pekerjaan yang dapat dilamar oleh pengguna.
 71

Gambar 50. Prototype Lowongan Pekerjaan

i. Prototype Detail Pekerjaan

Ini adalah tampilan yang akan muncul bila pengguna
menekan salah satu lowongan yang ada pada halaman
lowongan pekerjaan. Pada prototype detail pekerjaan ini
terdapat penjelasan mengenai pekerjaan yang dipilih oleh
pengguna sebelumnya. Terdapat tombol apply untuk
mengajukan pekerjaan tersebut dan tombol untuk
menyimpan lowongan tersebut untuk dilihat nanti.

Gambar 51. Prototype Detail Pekerjaan

 72

j. Prototype Lowongan Pekerjaan Tersimpan

Ini adalah tampilan yang akan muncul bila pengguna telah
meyimpan lowongan yang tersedia dan dilihat melalui
halaman pekerjaan tersimpan.

Gambar 52. Prototype Lowongan Pekerjaan Tersimpan

 73

k. Prototype Berita
Bila pengguna memilih berita pada navigasi bar, ini adalah
tampilan yang akan muncul. Halaman akan beralih ke detail
berita bila pengguna memilih salah satu dari berita yang ada
pada halaman tersebut.

Gambar 53. Prototype Berita

 74

Gambar 54. Prototype Detail Berita

l. Prototype Event
Bila pengguna memilih event pada navigasi bar, ini adalah
tampilan yang akan muncul. Halaman akan beralih ke detail
event bila pengguna memilih salah satu dari event yang ada
pada halaman tersebut. Terdapat kontak agar pengguna dapat
mendaftarkan diri ke event tersebut.
 75

Gambar 55. Prototype Event

Gambar 56. Prototype Detail Event

 76

m. Prototype Profile
Bila pengguna menekan foto profile pada header, akan dialih
kan ke halaman profile diri.

Gambar 57. Prototype Profile

 77

n. Prototype Logout
Ini menampilkan tempat dimana logout dapat diakses oleh
pengguna. Pilihan logout akan keluar bila pengguna
menekan panah yang tersedia di sebelah nama pengguna atau
header bagian kanan.

Gambar 58. Prototype Logout

F. Evaluate Design Against User Requirement

Setelah membuat desain sebagai solusi dari masalah yang telah
diketahui setelah menganalisis, peneliti harus melakukan uji coba dan
evaluasi terhadap desain. Desain yang sudah diuji coba wajib memenuhi
persyaratan yang diperlukan oleh pengguna. Pada tahap ini dilihat apakah
tujuan dari pengguna dan organisasi sudah tercapai.
Pada tahap ini dilakukan uji coba dan evaluasi tersebut

1. Run an Experiment
Sebelum dilakukannya evaluasi dengan user secara langsung.
Peneliti terlebih dahulu melakukan percobaan atau pengujian mandiri
pada interactive prototype yang telah dibuat. Hal ini dilakukan untuk
memastikan prototype yang dibuat sesuai dan berjalan dengan baik
sebelum ke pengguna akhir. Prototype telah diuji coba pada masing-
masing tasknya secara mandiri sebanyak 10 kali. Selain itu juga
melibatkan satu orang yaitu dengan inisial (RS) perempuan berusia 22
tahun mewakili pengguna akhir pada prototype sebelum melakukan
pengujian ke pengguna akhir. Berikut adalah hasil dari pengujian
prototype.
 78

Tabel 5. Run An Experiment

No Task Status

1 Melakukan daftar akun Berhasil

Berhasil
2 Melakukan Login

Berhasil
3 Masuk Ke Halaman Home Alumni
Berhasil
4 Masuk ke Halaman Lowongan Pekerjaan

Berhasil
5 Melihat Detail Pekerjaan
Berhasil
6 Melihat Tampilan Pekerjaan yang Disimpan

Berhasil
7 Apply Pekerjaan Sinarmas
Berhasil
8 Melakukan Kuisioner Tracer study
Berhasil
9 Masuk ke Halaman Berita
Berhasil
10 Melihat Detail Berita Wisuda
Berhasil
11 Masuk Ke Halaman Event
Berhasil
12 Melihat Detail Event Terbaru

Berhasil
13 Melihat Daftar Alumni
Berhasil
14 Melihat Detail Profile Alumni
Berhasil
15 Melihat Profile Diri

Berhasil
16 Melakukan Logout

2. Feedback and Research

Pengujian prototype selajutnya dilakukan menggunakan pengujian
user interface dari aspek Usability menggunakan SUS dan user
experience menggunakan UEQ untuk pengujian, sehingga dengan
menggunakannya SUS dan UEQ ini untuk mempermudah pengguna
dalam mengisi kuesioner yang nantinya akan digunakan untuk
mengukur Usability dan user experience.
 79

a. Pengujian System usability scale (SUS)

System usability scale (SUS) ini terdapat 10
pertanyaan untuk diisi oleh 20 responden. Menurut
penelitian terdahulu menunjukkan bahwa menggunakan
kuesioner SUS memungkinkan untuk mendapatkan hasil
Usability testing yang dirasakan dari suatu produk dengan
sampel kecil dan cukup yakin bahwa akan mendapatkan
penilaian yang baik tentang bagaimana pengguna melihat
suatu produk tersebut . Adapun rumus dalam melakukan
perhitungan SUS ini, dimana pertanyaan positif yaitu nomor
1,3,5,7 dan 9 akan dihitung dengan rumus (x-1), sedangkan
pertanyaan negatif yaitu nomor 2,4,6,8, dan 10 akan dihitung
dengan rumus (5-x) di mana x adalah nilai yang diberikan
oleh responden terhadap setiap pertanyaan. Kemudian untuk
memperoleh nilai pada setiap responden, maka akan
dilakukan perhitungan score SUS dengan menjumlahkan
pertanyaan negatif dan positif, setelah itu dikalikan dengan
2,5. Nilai akhir yang didapatkan dari hasil score SUS
selanjutnya akan dikategorikan berdasarkan tingkat,
acceptability, grade scale, dan adjective ratings.

Tahap untuk melakukan atau penyebaran kuesioner SUS

yaitu:
1) Menentukan jumlah responden. Disini penulis
menggunakan 20 responden Alumni FTI Perbanas
Institute
2) Responden mencoba untuk menjalankan prototype
aplikasi terlebih dahulu berdasarkan task yang telah
diberikan.
3) Setelah itu responden mengisi kuesioner SUS.
4) Setelah mengisi kuesioner SUS hasil jawaban
responden akan di konversi menjadi nilai yang sudah
di tentukan, setelah itu akan di input ke alat hitung
SUS hingga menjadikan hasil sebagai baik atau
tidaknya UI yang sudah di coba.
 80

Tabel 6. Penilaian Poin SUS

Sangat Tidak Setuju (STS) 1

Tidak Setuju (TS) 2

Ragu-ragu (RG) 3

Setuju (S) 4

Sangat Setuju (SS) 5

Setelah mengirimkan kuisioner pengujian sus, inilah hasil

skor asli sebelum dilakukan perhitungan.

Tabel 7. Data Pengisian Kuisioner SUS

SKOR
Responden
Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10
1 2 2 5 2 5 2 5 2 4 2
2 5 1 5 5 5 5 5 1 4 2
3 5 2 4 2 4 2 4 2 4 2
4 4 2 4 2 4 2 4 2 5 1
5 4 1 5 1 5 2 4 1 5 3
6 3 2 4 2 4 2 3 2 4 2
7 4 2 4 2 4 2 4 2 4 3
8 5 2 4 3 4 2 4 2 4 2
9 4 2 4 2 4 2 4 2 4 2
10 4 2 4 1 4 2 3 2 4 2
11 5 4 4 4 5 2 3 3 4 2
12 5 1 5 2 5 2 4 1 4 2
13 4 2 4 1 5 2 4 1 4 2
14 5 1 5 3 5 1 5 2 4 2
15 5 1 4 3 4 2 3 1 4 2
16 4 1 5 2 4 2 3 2 4 2
17 4 4 3 1 4 2 5 1 4 1
18 5 1 4 2 4 2 5 1 4 2
19 4 1 4 2 4 1 5 2 3 3
20 5 1 4 2 4 2 4 1 4 2
21 5 2 5 2 4 2 4 1 4 2

Dengan menggunakan data yang sudah diperoleh melalui

kuisioner SUS yang dibagikan kepada responden kemudian
 81

dilakukan perhitungan sesuai dengan langkah-langkah

perhitungan SUS yang sudah dijelaskan sebelumnya.
Berikut data hasi dari perhitungan SUS yang ditunjukkan
pada tabel di bawah ini :

Tabel 8. Data Perhitungan Skor SUS

SKOR Jumlah Nilai

Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 (Jumlah 2,5)
1 3 4 3 4 3 4 3 3 3 31 77,5
4 4 4 0 4 0 4 4 3 3 30 75
4 3 3 3 3 3 3 3 3 3 31 77,5
3 3 3 3 3 3 3 3 4 4 32 80
3 4 4 4 4 3 3 4 4 2 35 87,5
2 3 3 3 3 3 2 3 3 3 28 70
3 3 3 3 3 3 3 3 3 2 29 72,5
4 3 3 2 3 3 3 3 3 3 30 75
3 3 3 3 3 3 3 3 3 3 30 75
3 3 3 4 3 3 2 3 3 3 30 75
4 1 3 1 4 3 2 2 3 3 26 65
4 4 4 3 4 3 3 4 3 3 35 87,5
3 3 3 4 4 3 3 4 3 3 33 82,5
4 4 4 2 4 4 4 3 3 3 35 87,5
4 4 3 2 3 3 2 4 3 3 31 77,5
3 4 4 3 3 3 2 3 3 3 31 77,5
3 1 2 4 3 3 4 4 3 4 31 77,5
4 4 3 3 3 3 4 4 3 3 34 85
3 4 3 3 3 4 4 3 2 2 31 77,5
4 4 3 3 3 3 3 4 3 3 33 82,5
4 3 4 3 3 3 3 4 3 3 33 82,5
Rata-Rata 78,5

Dengan melihat data hasil perhitungan SUS yang diperoleh, skor

rata-rata adalah 78,5. Penentuan kesimpulan juga dapat
dilakukan hanya dengan grade scale melalui ketentuan untuk
rerata sebagai berikut (Ependi, Putra, & Panjaitan, 2019).
a. Grade A ≥ 80,3
b. 74 ≤ 𝑔𝑟𝑎𝑑𝑒 𝐵 <80,3
c. 68 ≤ 𝑔𝑟𝑎𝑑𝑒 𝐶 < 74,3
d. 51 ≤ 𝑔𝑟𝑎𝑑𝑒 𝐷 < 68
 82

b. Pengujian User experience dengan User experience

questionnaire (UEQ)
Pada pengujian UEQ tidak jauh berbeda dengan pengujian
SUS. Pengguna terlebih dahulu diwajibkan menyelesaikan
tas yang telah diberikan. Perbedaan dengan SUS, UEQ
terdiri dari total 26 komponen pertanyaan, yang akan disebar
ke 20 responden dan meliki skala antara nilai 1 (satu) sampai
dengan nilai 7 (tujuh) sebagai jawaban pertanyaan.

Tabel 9. Data Jawaban UEQ Responden

Items
1 2 3 4 5 6 7 8 9 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6
7 7 1 1 1 7 7 7 1 1 7 1 7 7 7 7 1 1 1 7 1 7 1 1 1 7
7 6 2 2 2 6 6 6 1 2 6 2 6 6 6 6 2 2 1 7 2 6 2 3 4 4
6 6 2 2 2 6 6 6 1 1 7 2 6 7 4 6 2 1 2 6 2 6 2 2 2 6
6 5 2 2 2 6 6 3 3 2 6 2 6 4 6 6 3 2 3 5 2 6 2 2 2 6
6 6 1 1 1 7 7 7 1 1 7 2 6 6 7 6 2 2 2 6 2 6 2 3 2 6
5 6 2 2 2 6 6 7 2 2 6 3 5 5 5 6 3 3 2 6 3 5 2 3 2 6
6 2 1 2 4 4 6 7 2 2 6 2 6 6 7 6 1 2 2 6 2 6 1 2 2 6
7 7 1 2 2 6 6 6 2 2 6 2 6 6 6 6 2 1 2 6 1 7 1 2 1 7
6 6 2 2 2 6 6 7 2 2 6 2 6 6 4 6 3 2 2 6 2 6 2 2 2 6
4 6 2 4 2 6 7 7 2 2 6 2 6 6 6 6 2 1 3 5 2 6 3 2 2 6
6 6 1 1 2 6 7 7 1 1 7 4 4 7 5 5 2 1 1 7 1 7 2 2 3 5
7 7 1 1 1 7 5 5 2 1 7 2 6 7 7 7 2 1 2 6 3 5 1 2 1 7
7 7 1 1 1 7 6 7 1 1 7 2 6 7 7 6 1 2 2 6 1 7 1 2 1 7
7 7 1 1 2 6 5 7 1 1 7 1 7 6 6 6 1 1 2 6 1 7 1 3 1 7
7 7 1 1 1 7 7 7 1 1 7 1 7 7 7 7 1 1 1 7 1 7 1 1 1 7
7 6 2 2 1 7 7 7 1 1 7 2 6 6 5 6 2 1 1 7 1 7 1 1 2 6
7 6 7 4 1 7 5 6 1 1 7 1 7 7 6 7 1 1 3 5 1 7 2 2 1 7
7 7 1 2 2 6 7 7 1 1 7 1 7 7 4 7 4 1 2 6 1 7 1 1 1 7
7 7 1 1 1 7 7 7 1 1 7 1 7 7 7 7 1 1 1 7 1 7 1 1 1 7
7 6 7 2 1 7 7 7 2 1 7 1 7 6 6 7 1 1 1 7 1 7 1 1 1 7
7 6 1 1 1 7 7 7 1 1 7 1 7 7 6 6 2 1 1 7 1 7 1 1 1 7

Hasil dari jawaban pada Tabel.9 selanjutnya akan dilakukan

konversi menjadi nilai yang sesuai untuk perhitungan UEQ.
 83

Jawaban dengan nilai +3 dipresentasikan sebagai nilai yang

paling positif sedangkan jawaban dengan nilai -3 adalah nilai
yang paling negatif. Contoh dari transformasi nilai sebagai
berikut :
Tabel 10. Transformasi skala nilai

1 2 3 4 5 6 7
Tidak o o o o o o o Tidak
Menyenangkan Menyenangkan
Transformasi -3 -2 -1 0 +1 +2 +3
Nilai

Berikut adalah transformasi skala nilai yang dibuat menggunakan

Tabel.9.

Tabel 11. Hasil Transformasi Nilai Data UEQ Responden

Items
1 2 3 4 5 6 7 8 9 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3 2 2 2 2 2 2 2 3 2 2 2 2 2 2 2 2 2 3 3 2 2 2 1 0 0
2 2 2 2 2 2 2 2 3 3 3 2 2 3 0 2 2 3 2 2 2 2 2 2 2 2
2 1 2 2 2 2 2 - 1 2 2 2 2 0 2 2 1 2 1 1 2 2 2 2 2 2
1
2 2 3 3 3 3 3 3 3 3 3 2 2 2 3 2 2 2 2 2 2 2 2 1 2 2
1 2 2 2 2 2 2 3 2 2 2 1 1 1 1 2 1 1 2 2 1 1 2 1 2 2
2 - 3 2 0 0 2 3 2 2 2 2 2 2 3 2 3 2 2 2 2 2 3 2 2 2
2
3 3 3 2 2 2 2 2 2 2 2 2 2 2 2 2 2 3 2 2 3 3 3 2 3 3
2 2 2 2 2 2 2 3 2 2 2 2 2 2 0 2 1 2 2 2 2 2 2 2 2 2
0 2 2 0 2 2 3 3 2 2 2 2 2 2 2 2 2 3 1 1 2 2 1 2 2 2
2 2 3 3 2 2 3 3 3 3 3 0 0 3 1 1 2 3 3 3 3 3 2 2 1 1
3 3 3 3 3 3 1 1 2 3 3 2 2 3 3 3 2 3 2 2 1 1 3 2 3 3
3 3 3 3 3 3 2 3 3 3 3 2 2 3 3 2 3 2 2 2 3 3 3 2 3 3
3 3 3 3 2 2 1 3 3 3 3 3 3 2 2 2 3 3 2 2 3 3 3 1 3 3
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3 2 2 2 3 3 3 3 3 3 3 2 2 2 1 2 2 3 3 3 3 3 3 3 2 2
3 2 - 0 3 3 1 2 3 3 3 3 3 3 2 3 3 3 1 1 3 3 2 2 3 3
3
3 3 3 2 2 2 3 3 3 3 3 3 3 3 0 3 0 3 2 2 3 3 3 3 3 3
 84

3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
3 2 - 2 3 3 3 3 2 3 3 3 3 2 2 3 3 3 3 3 3 3 3 3 3 3
3
3 2 3 3 3 3 3 3 3 3 3 3 3 3 2 2 2 3 3 3 3 3 3 3 3 3

Berdasarkan nilai yang sudah ditransformasi, langkah

selanjutnya adalah menghitung nilai rata-rata. Menghitung
nilai rata-rata pertanyaan dilakukan sesuai dengan skalanya
masing-masing. Pada pertanyaan UEQ dibagi menjadi 5
skala mengikuti Attractiveness Scale (Schrepp, Hinderks,
Thomaschewski, & Germany, 2017).

Gambar 59. Attractiveness Scale

1) Daya Tarik: Kesan keseluruhan produk. Apakah

pengguna suka atau tidak menyukainya? Apakah
menarik, menyenangkan atau menyenangkan?
2) Kejelasan: Apakah mudah untuk mengenal produk?
Apakah mudah untuk mudah dipelajari? Apakah
produknya mudah dipahami dan tidak ambigu?
3) Efisiensi: Dapatkah pengguna menyelesaikan tugas-
tugas mereka tanpa usaha yang tidak perlu? Apakah
interaksinya efisien dan cepat? Apakah produk bereaksi
terhadap masukan pengguna dengan cepat?
4) Ketepatan: Apakah pengguna merasa memegang
kendali atas interaksi? Dapatkah ia memprediksi
perilaku sistem? Apakah pengguna merasa percaya diri
ketika bekerja dengan produk?
5) Stimulasi: Apakah menarik dan memotivasi untuk
menggunakan produk? Apakah menyenangkan untuk
digunakan?
 85

6) Kebaruan: Apakah produknya inovatif dan kreatif?

Apakah produk itu menarik perhatian pengguna

Nilai skala mean UEQ memiliki ukuran penilaian sebagai

berikut.

Tabel 12. Interval Skala UEQ (Wulandari & Farida, 2019)

Skala Bad Below Above Good Excellent

Average Average
Daya Tarik <0.7 0.7-1.16 1.17-1.51 1.52-1.74 ≥1.75
Kejelasa <0.64 0.64-1.07 1.08-1.55 1.08-1.55 ≥1.9
Efisiensi <0.54 0.54-0.97 0.98-1.46 0.98-1.46 ≥1.78
Ketepatan <0.78 0.78-1.13 1.13-1.47 1.14-1.47 ≥1.68
Stimulasi <0.5 0.5-0.98 0.99-1.3 0.99-1.3 ≥1.55
Kebaruan <0.3 0.3-0.7 0.71-1.04 0.71-1.04 ≥1.4

Tabel 13. Nilai Mean Skala UEQ

UEQ Scales Mean

Daya tarik 2,310
Kejelasan 2,274
Efisiensi 2,452
Ketepatan 2,393
Stimulasi 2,429
Kebaruan 2,262
Berdasarkan Tabel.12 dapat disimpulkan bahwa nilai
mean skala UEQ yang dihasilkan penulis melalui testing
responden mendapatkan angka yang sangat positif.
Nilai mean skala UEQ juga dapat dilihat dalam grafik
pada Gambar.
 86

Gambar 60. Grafik Nilai Mean Skala UEQ

Untuk menampilkan tampilan yang lebih mudah

dalam menampilkan seberapa baik produk maka dilakukan
benchmark.

Tabel 14. Komparasi Benchmark UEQ

Scale Mean Comparisson to Interpretation

benchmark
Daya tarik 2,31 Excellent In the range of the 10% best
results
Kejelasan 2,27 Excellent In the range of the 10% best
results
Efisiensi 2,45 Excellent In the range of the 10% best
results
Ketepatan 2,39 Excellent In the range of the 10% best
results
Stimulasi 2,43 Excellent In the range of the 10% best
results
Kebaruan 2,26 Excellent In the range of the 10% best
results

Berdasarkan data-data di atas, menunjukan baha

pengujian menggunaka metode UEQ pada rancangan desain
prototype website tracer study FTI Perbanas Institute ini
mendapatkan nilai “excellent/sangat baik” dan dapat
diterima oleh pengguna.
 BAB V
PENUTUP

A. Kesimpulan
Kesimpulan yang dapat diambil dari perancangan desain user
interface website tracer study FTI Perbanas Institute dengan menggunakan
metode User centered design yang telah dilakukan dalam penelitian ini
maka didapatkan beberapa kesimpulan.

1. Menghasilkan prototype interface website tracer study FTI

Perbanas Institute menggunakan warna dominan biru yang
sesuai dengan target pengguna dengan kode hexa #0E91A1,
kode hexa ini cukup nyaman dilihat karena menghasilkan
warna yang nyaman, tenang dan tidak menyakiti mata
pengguna.

2. Menggunakan font inter karena font ini cocok dan sering

digunakan dalam perancangan prototype user interface dan
nyaman dilihat bagi pengguna. Dengan menggunakan tata
letak yang relative untuk menjaga urutan tata letak tetap
sederhana, gaya navigasi linear yang membuat tampilan
navigasi lebih rapih dan sederhana sesuai dengan kebutuhan
user.

3. Rancangan ini mendapatkan score 78 pada pengujian system

usability scale yang artinya rancangan ini dapat diterima
oleh pengguna dari segi interface

4. Hasil pengujian User experience dengan UEQ mendapatkan

nilai pada aspek daya tarik 2.31, kejelasan 2.27, efisiensi
2.45, ketepatan 2.39, stimulasi 2.43, kebaruan 2.26 yang
berarti telah memenuhi standar user experience.

5. Perancangan UI/UX pada website tracer study FTI Perbanas

Institute telah memenuhi standar penilaian dengan uji coba
usability dan user experience.

87
 88

B. Saran
Hasil penelitian ini menunjukan bahwa perancangan UI/UX sangat
penting dalam pengembangan sebuah sistem. Hal ini dikarenakan pada
perancangan UI/UX dilakukan uji coba usability dan user experience.
Namun dengan demikian penelitian yang telah dilakukan oleh penulis ini
masih jauh dari kata sempurna dan tentunya masih banyak kekurangan yang
tidak disengaja.

Oleh karena itu, perancangan ini perlu dikembangkan lebih lanjut agar
perancangan desain prototype website tracer study FTI Perbanas Institute
yang telah dibuat dapat diimplementasikan ke dalam bentuk website yang
sebenar-benarnya. Maka adapun saran pada perancangan desain UI/UX
website tracer study FTI Perbanas Institute yaitu sebagai berikut :

1. Desain website tracer study FTI Perbanas Institute ini masih dalam
bentuk prototype, untuk penelitian selanjutnya diharapkan dapat
dilakukan penyempurnaan dengan lebih baik dan dapat
diimplemetasikan ke dalam bentuk website yang sebenarnya.

2. Usahakan selalu berpusat kepada user. Dikarenakan suatu website

ataupun sistem pasti akan selalu kembali kepada kenyamanan
pengguna.
 89

DAFTAR PUSTAKA
Aryani, D., Sunandar, E., & Ramadhan, F. (2019). PROTOTYPE ALAT
PEMILAH HASIL PRODUKSI OLI OTOMATIS BERDASARKAN KODE
WARNA MENGGUNAKAN SENSOR TCS 230. 5(1), 43–54.
Ependi, U., Putra, A., & Panjaitan, F. (2019). Evaluasi tingkat kebergunaan
aplikasi Administrasi Penduduk menggunakan teknik System Usability Scale.
5(34), 63–76.
Hayaty, M., & Meylasari, D. (2018). Implementasi Website Berbasis Search
Engine Optimization ( SEO ) Sebagai Media Promosi. 5(2), 295–300.
Hidayat, H. (2020). Analisis Dan Perancangan Sistem Informasi Alumni ( Tracer
Study ) Berbasis Web Pada Sekolah Tinggi Ilmu Tarbiyah ( Stit ) Darul ‘
Ulum Sarolangun. 5(2), 261–273.
Hidayatullah, A. F. (2019). Pengembangan Front-end Sistem Informasi
UIITagihan Berbasis Web Menggunakan Pendekatan User Experience ( UX
).
Hootsuite. (2021). Data Tren Pengguna Internet dan Media sosial Tahun 2021 di
Dunia.
Joo, H. (2017). A Study on Understanding of UI and UX , and Understanding of
Design According to User Interface Change. 12(20), 9931–9935.
Kartiko, C., Wardhana, A. C., & Rakhmadani, D. P. (2022). Pengembangan
Mobile Learning Management System Dengan User Centered Design ( UCD
) Menggunakan Flutter Framework. 6(April), 960–968.
https://doi.org/10.30865/mib.v6i2.3524
Khasanah, I. U., Fachry, M., Adriani, N. S., & Defiani, N. (2018). Penerapan
Metode User Centered Design dalam Menganalisis User Interface pada
Website Universitas Sriwijaya. 21–27.
Lucitasari, D. R., Shodiq, M., & Khannan, A. (2019). Designing Mobile Alumni
Tracer Study System Using Waterfall Method : an Android Based. 7(9), 196–
202.
Niagahoster. (2022). Mengenal User Interface: Pengertian, Kegunaan, dan
Contohnya.
Nina, K., Mastra, L., & Dharmawan, R. F. (2017). TINJAUAN USER
INTERFACE DESIGN PADA WEBSITE E- COMMERCE LAKU6. 93–108.
Pakpahan, S. (2019). Aplikasi Tracer Study Alumni Universitas Katolik Santo
Thomas. 4(1), 86–91.
Rabbanii, I., Brata, A. H., & Brata, K. C. (2019). Penerapan Metode Lean UX
pada Pengembangan Aplikasi Bill Splitting menggunakan Platform Android.
3(7), 6831–6836.
Razi, M., Informasi, P. S., Andalas, U. D., Informasi, P. S., Andalas, U. D.,
 90

Informasi, P. S., & Andalas, U. D. (2021). PERANCANGAN SISTEM

PENELUSURAN ALUMNI ( TRACER STUDY ) BERBASIS WEB PADA
UNIVERSITAS DHARMA ANDALAS. 3(1), 143–146.
Rizka, M. (2018). Analisis Dan Perancangan Sistem Informasi Tracer Study
Berbasis WEB. 3(2), 69–73.
Schrepp, M., Hinderks, A., Thomaschewski, J., & Germany, S. A. P. A. G.
(2017). Design and Evaluation of a Short Version of the User Experience
Questionnaire ( UEQ-S ). 3, 103–108.
https://doi.org/10.9781/ijimai.2017.09.001
Setiyani, L. (2021). Desain Sistem : Use Case Diagram Pendahuluan.
(September), 246–260.
Soejono, A. W., Setyanto, A., Sofyan, A. F., & Anova, W. (2018). Evaluasi
Usability Website UNRIYO Menggunakan S ystem Usability Scale ( Studi
Kasus : Website UNRIYO ). XIII, 29–37.
Supriyatna, A., Andika, R., & Belakang, A. L. (2017). Mengukur kualitas apliaksi
gudang dengan metode usability nielsen. 7, 1–10.
Susanti, E., Fatkhiyah, E., & Efendi, E. (2019). PENGEMBANGAN UI / UX
PADA APLIKASI M-VOTING. 364–370.
Wulandari, I. R., & Farida, L. D. (2019). PENGUKURAN USER EXPERIENCE
PADA E-LEARNING DI LINGKUNGAN PENGUKURAN USER
EXPERIENCE PADA E-LEARNING DI LINGKUNGAN UNIVERSITAS
MENGGUNAKAN USER EXPERIENCE QUESTIONNARE ( UEQ ).
(August 2018).
 91

LAMPIRAN

1. Kuesioner Penelitian
92
93
94
95
96
 97

2. Hasil System Usability Scale

3. Hasil User Experience Questionnaire