analisis dan perancangan user interface pada...
TRANSCRIPT
ANALISIS DAN PERANCANGAN USER INTERFACE PADA SISTEM
INFORMASI KEPEGAWAIAN (SIMPEG) BADAN KEPEGAWAIAN DAN
PENGEMBANGAN SUMBER DAYA MANUSIA KABUPATEN
SUMENEP DENGAN METODE USER CENTERED DESIGN (UCD)
BASED ON CONTEXTUAL DESIGN
TUGAS AKHIR
Program Studi
S1 SISTEM INFORMASI
Oleh:
ANDI TRI ANGGARA
15410100164
FAKULTAS TEKNOLOGI DAN INFORMATIKA
UNIVERSITAS DINAMIKA
2020
ANALISIS DAN PERANCANGAN USER INTERFACE PADA SISTEM
INFORMASI KEPEGAWAIAN (SIMPEG) BADAN KEPEGAWAIAN DAN
PENGEMBANGAN SUMBER DAYA MANUSIA KABUPATEN
SUMENEP DENGAN METODE USER CENTERED DESIGN (UCD)
BASED ON CONTEXTUAL DESIGN
TUGAS AKHIR
Diajukan sebagai salah satu syarat untuk menyelesaikan
Program Sarjana
Oleh:
Nama : Andi Tri Anggara
NIM : 15410100164
Program Studi : S1 Sistem Informasi
FAKULTAS TEKNOLOGI DAN INFORMATIKA
UNIVERSITAS DINAMIKA
2020
iii
“ Bismillahirrohmanirrohim ”
“ Apa yang kita nikmati hari ini bisa jadi bukan karena usaha dan kerja keras
kita, melainkan karena do’a kedua orang tua yang tiada henti ”
vii
ABSTRAK
Badan Kepegawaian dan Pengembangan Sumber Daya Manusia Kabupaten
Sumenep (BKPSDM) sebagai satuan kerja perangkat daerah untuk mengemban
tugas dalam menjamin kelancaran penyelenggaraan manajemen kepegawaian di
daerah Kabupaten Sumenep. Salah satu program yang dilaksanakan dalam
membangun tata kelola kepegawaian ini adalah dengan penataan kelola data
pegawai melalui Sistem Informasi Kepegawaian (SIMPEG). Berdasarkan
observasi dengan pengguna Sistem Informasi Kepegawaian (SIMPEG) Kabupaten
Sumenep, ditemukan permasalahan berupa dari segi tampilan dan proses kerja
saat menggunakan Sistem Informasi Kepegawaian (SIMPEG). Dari permasalahan
yang ditemukan pada SIMPEG, maka ditawarkan metode User Centred Design
(UCD) based on Contextual Design (CD) yang menempatkan pengguna Sistem
Informasi Kepegawaian (SIMPEG) sebagai pertimbangan utama dalam
membangun sebuah sistem baru. Dalam proses perancangan contextual design
terdapat 6 (enam) langkah yang dilakukan mulai dari collecting data, interpretasi,
konsolidasi data, visioning, storyboarding, user environment design dan
prototyping. Dengan adanya perancangan Sistem Informasi Kepegawaian
(SIMPEG) menggunakan metode user centered design (UCD) based on
contextual design menghasilkan perancangan desain user interface dan user
experience Sistem Informasi Kepegawain (SIMPEG) baru yang terdiri dari fitur:
menu login, menu lupa password, menu pegawai, menu anjab, menu pensiun,
menu ulang tahun dan menu akun. Fungsi: ubah, hapus, simpan, unduh data
pegawai yang sesuai dengan kebutuhan pengguna.
Kata Kunci: Sistem Informasi Kepegawaian, User Interface, User Experience,
User Centered Design, Contextual Design.
viii
KATA PENGANTAR
Puji syukur atas kehadirat Allah SWT karena atas rahmat-Nya, penulis
dapat menyelesaikan Laporan Tugas Akhir yang berjudul “Analisis dan
Perancangan User Interface pada Sistem Informasi Kepegawaian (SIMPEG)
Badan Kepegawaian Dan Pengembangan Sumber Daya Manusia Kabupaten
Sumenep Dengan Metode User Centered Design (UCD) Based On Contextual
Design”.
Laporan Tugas Akhir ini disusun guna menyelesaikan mata kuliah Tugas
Akhir di Universitas Dinamika yang bertujuan untuk mengimplementasikan ilmu-
ilmu yang telah didapat selama masa perkuliahan. Selain itu Tugas Akhir
merupakan salah satu persyaratan untuk dapat menyelesaikan program studi Strata
Satu (S1).
Dalam pelaksanaan dan penyusunan Laporan Tugas Akhir ini penulis
menyadari sepenuhnya untuk menyelesaikan laporan ini tidak terlepas dari
dukungan, semangat, motivasi, kritik, saran dan bimbingan dari semua pihak.
Pada kesempatan ini, penulis ingin mengucapkan terima kasih kepada:
1. Ibu, Bapak, Kakak dan Adik tercinta yang selalu memberikan doa, motivasi
dan semangat.
2. Bapak Prof. Dr. Budi Jatmiko, M.Pd. selaku Rektor Universitas Dinamika.
3. Bapak Dr. Anjik Sukmaaji, S.Kom., M.Eng. selaku Kepala Program Studi S1
Sistem Informasi dan selaku dosen pembahas yang telah memberikan kritikan,
saran, serta kritikan dalam membantu penyempurnaan Laporan Tugas Akhir.
4. Ibu Sulistiowati, S.Si., M.M. selaku dosen pembimbing 1 yang telah
memberikan semangat, motivasi, dan telah sabar membimbing penulis dalam
menyusun Laporan Tugas Akhir.
5. Ibu Oktaviani, S.E., M.M. selaku dosen pembimbing 2 yang telah memberikan
semangat, motivasi, dan telah sabar membimbing penulis dalam menyusun
Laporan Tugas Akhir.
6. Sahabat-sahabat seperjuangan Sistem Informasi 2015 yang telah membantu,
memberikan semangat, dukungan, dan motivasi sehingga penulis dapat
menyelesaikan Laporan Tugas Akhir.
ix
Semoga Allah SWT membalas segala kebaikan semua pihak yang telah
membantu penulis. Dan dalam penyusunan Laporan Tugas Akhir ini, penulis
menyadari masih terdapat banyak kekurangan, dikarenakan keterbatasan ilmu
pengetahuan, wawasan serta pengalaman penulis. Untuk itu penulis mohon maaf
atas segala kekurangan tersebut, sehingga kritik, saran dan masukan yang
bersifat membangun sangatlah diharapkan bagi penulis.
Surabaya, 04 September 2020
Penulis
x
DAFTAR ISI
Halaman
ABSTRAK ........................................................................................................... vii
KATA PENGANTAR ........................................................................................ viii
DAFTAR ISI .......................................................................................................... x
DAFTAR GAMBAR ........................................................................................... xii
DAFTAR TABEL .............................................................................................. xix
DAFTAR LAMPIRAN ....................................................................................... xx
BAB I PENDAHULUAN ...................................................................................... 1
1.1 Latar Belakang ................................................................................ 1
1.2 Rumusan Masalah ........................................................................... 2
1.3 Batasan Masalah ............................................................................. 3
1.4 Tujuan ............................................................................................. 3
1.5 Manfaat ........................................................................................... 3
1.6 Sistematika Penulisan ..................................................................... 4
BAB II LANDASAN TEORI ............................................................................... 6
2.1 Analisa dan Perancangan Sistem .................................................... 6
2.2 User Interface (UI) ......................................................................... 6
2.3 User Experience (UX) .................................................................... 9
2.4 Konsep Dasar Sistem Informasi .................................................... 10
2.5 Sistem Informasi Kepegawaian .................................................... 11
2.6 User Centered Design (UCD) ....................................................... 11
2.7 Pendekatan User Centered Design (UCD) ................................... 14
2.8 Contextual Design ......................................................................... 15
BAB III METODOLOGI PENELITIAN ......................................................... 20
3.1. Plan The User Centered Design Process ...................................... 21
3.1.1. Studi Literatur ................................................................... 21
3.1.2. Collecting Data 1 .............................................................. 21
3.2. Understand and Specify Context Of Use ...................................... 21
3.2.1. Collecting Data 2 .............................................................. 21
3.3. Specify User and Organisational Requirement ............................ 25
3.3.1. Interpretasi ........................................................................ 25
xi
Halaman
3.3.2. Konsolidasi Data ............................................................... 26
BAB IV HASIL DAN PEMBAHASAN ............................................................ 30
4.1. Product Design Solutions ............................................................. 30
4.1.1. Visioning ........................................................................... 30
4.1.2. Storyboarding ................................................................... 31
4.1.3. User Environment Design (UED) ..................................... 32
4.1.4. Paper Prototype ................................................................ 32
4.2. Evaluate Design Again Requirement ............................................ 34
4.2.1. Evaluasi Paper Prototype ................................................. 34
4.2.2. Prototype ........................................................................... 35
4.2.3. Evaluasi Prototype ............................................................ 42
4.3. Design Solutionments User Requirement ..................................... 42
4.3.1. Perancangan Prototype Akhir ........................................... 42
BAB V PENUTUP ............................................................................................... 43
5.1 Kesimpulan ................................................................................... 43
5.2 Saran ............................................................................................. 43
DAFTAR PUSTAKA .......................................................................................... 44
LAMPIRAN ......................................................................................................... 46
xii
DAFTAR GAMBAR
Halaman
Gambar 2.1 Tahapan User Centered Design (UCD) ............................................ 12
Gambar 3.1 Metodologi Penelitian ....................................................................... 20
Gambar 4.1 Visioning Halaman Login .................................................................. 30
Gambar 4.2 Visioning Halaman Utama ................................................................ 31
Gambar 4.3 Paper Prototype Login ...................................................................... 33
Gambar 4.4 Paper Prototype Halaman Utama ..................................................... 33
Gambar 4.5 Color Schemes ................................................................................... 35
Gambar 4.6 Font Nunino Sans .............................................................................. 35
Gambar 4.7 Prototype Halaman Login ................................................................. 36
Gambar 4.8 Prototype Halaman Login Gagal ....................................................... 36
Gambar 4.9 Prototype Halaman Utama ................................................................ 37
Gambar 4.10 Prototype Halaman Pegawai ........................................................... 38
Gambar 4.11 Prototype Halaman Anjab ............................................................... 38
Gambar 4.12 Prototype Halaman Statistik ........................................................... 39
Gambar 4.13 Prototype Halaman Notifikasi Grafik Berhasil Diunduh ................ 39
Gambar 4.14 Prototype Halaman Pensiun ............................................................ 40
Gambar 4.15 Prototype Halaman Notifikasi Tabel Pensiun Berhasil Diunduh ... 40
Gambar 4.16 Prototype Halaman Ulang Tahun.................................................... 41
Gambar 4.17 Prototype Halaman Notifikasi Tabel Ulang Tahun Berhasil Diunduh
............................................................................................................................... 41
Gambar 4.18 Prototype Halaman Akun ................................................................ 42
Gambar L 2.1 Halaman Login............................................................................... 47
Gambar L 2.2 Halaman Utama ............................................................................. 47
Gambar L 2.3 Halaman Jabatan ............................................................................ 48
Gambar L 2.4 Halaman Mutasi ............................................................................. 48
Gambar L 2.5 Halaman Struktur Organisasi ......................................................... 49
Gambar L 2.6 Halaman Pegawai .......................................................................... 49
Gambar L 2.7 Halaman Lokasi Kerja ................................................................... 50
Gambar L 2.8 Halaman Identitas Pegawai............................................................ 50
xiii
Halaman
Gambar L 2.9 Halaman Pengalaman Kerja .......................................................... 51
Gambar L 2.10 Halaman SK CPNS ...................................................................... 51
Gambar L 2.11 Halaman SK PNS ........................................................................ 52
Gambar L 2.12 Halaman Riwayat Pangkat ........................................................... 52
Gambar L 2.13 Halaman Riwayat Jabatan............................................................ 53
Gambar L 2.14 Halaman Riwayat Gaji ................................................................. 53
Gambar L 2.15 Halaman Pendidikan .................................................................... 54
Gambar L 2.16 Halaman Diklat Struktural ........................................................... 54
Gambar L 2.17 Halaman Diklat Fungsional ......................................................... 55
Gambar L 2.18 Halaman Pendidikan .................................................................... 55
Gambar L 2.19 Halaman Penataran ...................................................................... 56
Gambar L 2.20 Halaman Seminar......................................................................... 56
Gambar L 2.21 Halaman Kursus........................................................................... 57
Gambar L 2.22 Halaman Orang Tua ..................................................................... 57
Gambar L 2.23 Halaman Mertua .......................................................................... 58
Gambar L 2.24 Halaman Suami / Istri .................................................................. 58
Gambar L 2.25 Halaman Anak ............................................................................. 59
Gambar L 2.26 Halaman Saudara ......................................................................... 59
Gambar L 2.27 Halaman Organisasi ..................................................................... 60
Gambar L 2.28 Halaman Penghargaan ................................................................. 60
Gambar L 2.29 Halaman Penilaian DP-3.............................................................. 61
Gambar L 2.30 Halaman Penilaian Potensi Diri ................................................... 61
Gambar L 2.31 Halaman Prestasi ......................................................................... 62
Gambar L 2.32 Halaman Hukuman ...................................................................... 62
Gambar L 2.33 Halaman Cuti ............................................................................... 63
Gambar L 2.34 Halaman Riwayat Penugasan ...................................................... 63
Gambar L 2.35 Halaman Penguasaan Bahasa ...................................................... 64
Gambar L 2.36 Halaman Riwayat Nikah .............................................................. 64
Gambar L 2.37 Halaman Tambahan Masa Kerja ................................................. 65
Gambar L 2.38 Halaman Golongan Ruang ........................................................... 65
Gambar L 2.39 Halaman Eselon ........................................................................... 66
xiv
Halaman
Gambar L 2.40 Halaman Pendidikan .................................................................... 66
Gambar L 2.41 Halaman Jenis Kelamin ............................................................... 67
Gambar L 2.42 Halaman Agama .......................................................................... 67
Gambar L 2.43 Halaman Golongan Umur ............................................................ 68
Gambar L 2.44 Halaman Tipe Pegawai ................................................................ 68
Gambar L 2.45 Halaman Pensiun ......................................................................... 69
Gambar L 2.46 Halaman Ulang Tahun ................................................................. 69
Gambar L 2.47 Halaman Akun ............................................................................. 70
Gambar L 3.1 User Persona 1 .............................................................................. 70
Gambar L 3.2 User Persona 2 .............................................................................. 71
Gambar L 3.3 User Persona 3 .............................................................................. 71
Gambar L 3.4 User Persona 4 .............................................................................. 72
Gambar L 3.5 User Persona 5 .............................................................................. 72
Gambar L 3.6 User Persona 6 .............................................................................. 73
Gambar L 3.7 User Persona 7 .............................................................................. 73
Gambar L 4.1 Sticky Notes Kegunaan .................................................................. 74
Gambar L 4.2 Sticky Notes Proses ........................................................................ 74
Gambar L 4.3 Sticky Notes Informasi yang dibutuhkan ....................................... 75
Gambar L 4.4 Sticky Notes Kolaborasi ................................................................. 75
Gambar L 4.5 Sticky Notes Peralatan .................................................................... 76
Gambar L 4.6 Sticky Notes Pengguna ................................................................... 76
Gambar L 4.7 Sticky Notes Fitur yang sering digunakan ...................................... 77
Gambar L 4.8 Sticky Notes Kekurangan ............................................................... 77
Gambar L 4.9 Sticky Notes Saran.......................................................................... 78
Gambar L 5.1 Proses Perubahan Kata Sandi ........................................................ 78
Gambar L 5.2 Proses Perubahan atau Penambahan Data Pegawai ....................... 79
Gambar L 6.1 Affinity Diagram ............................................................................ 80
Gambar L 7.1 Visioning Halaman Pegawai .......................................................... 82
Gambar L 7.2 Visioning Halaman Pegawai Tidak Memiliki Tabel ...................... 82
Gambar L 7.3 Visioning Halaman Statistik .......................................................... 83
Gambar L 7.4 Visioning Halaman Pensiun ........................................................... 83
xv
Halaman
Gambar L 7.5 Visioning Halaman Ulang Tahun .................................................. 84
Gambar L 7.6 Visioning Halaman Akun ............................................................... 84
Gambar L 8.1 Storyboard Proses Kerja Baru User SIMPEG 1 ............................ 85
Gambar L 8.2 Storyboard Proses Kerja Baru User SIMPEG 2 ........................... 86
Gambar L 9.1 User Environment Design (UED) pada SIMPEG ......................... 87
Gambar L 10.1 Paper Prototype Sub Menu Utama .............................................. 88
Gambar L 10.2 Paper Prototype Sub Menu Pangkat/Golongan ........................... 88
Gambar L 10.3 Paper Prototype Sub Menu Peninjauan Masa kerja .................... 89
Gambar L 10.4 Paper Prototype Sub Menu Pendidikan ...................................... 89
Gambar L 10.5 Paper Prototype Sub Menu Jabatan ............................................ 90
Gambar L 10.6 Paper Prototype Sub Menu Diklat .............................................. 90
Gambar L 10.7 Paper Prototype Sub Menu Keluarga .......................................... 91
Gambar L 10.8 Paper Prototype Sub Menu Kursus ............................................. 91
Gambar L 10.9 Paper Prototype Sub Menu Penghargaan .................................... 92
Gambar L 10.10 Paper Prototype Sub Menu DP3 ............................................... 92
Gambar L 10.11 Paper Prototype Sub Menu SKP ............................................... 93
Gambar L 10.12 Paper Prototype Sub Menu Hukuman Disiplin ......................... 93
Gambar L 10.13 Paper Prototype Sub Menu Cuti ............................................... 94
Gambar L 10.14 Paper Prototype Sub Menu CPNS/PNS .................................... 94
Gambar L 10.15 Paper Prototype Sub Menu Unit Organisasi ............................. 95
Gambar L 10.16 Paper Prototype Sub Menu Pemberhentian .............................. 95
Gambar L 10.17 Paper Prototype Sub Menu Angka Kredit ................................ 96
Gambar L 10.18 Paper Prototype Menu Anjab .................................................... 96
Gambar L 10.19 Paper Prototype Menu Statistik ................................................ 97
Gambar L 10.20 Paper Prototype Menu Pensiun ................................................. 97
Gambar L 10.21 Paper Prototype Menu Ulang Tahun ......................................... 97
Gambar L 11.1 Protoype Halaman Lupa Password ............................................. 98
Gambar L 11.2 Protoype Halaman Lupa Password Gagal ................................... 98
Gambar L 11.3 Protoype Halaman Isi Email Lupa Password .............................. 99
Gambar L 11.4 Protoype Halaman Password Berhasil Dikirim .......................... 99
Gambar L 11.5 Protoype Halaman Daftar Tabel Data Pegawai ......................... 100
xvi
Gambar L 11.6 Prototype Halaman Sub Menu Data Utama ............................... 100
Gambar L 11.7 Prototype Halaman Tab Identitas .............................................. 101
Gambar L 11.8 Prototype Halaman Tab Posisi dan Jabatan............................... 101
Gambar L 11.9 Prototype Halaman Tab Data Lainnya ...................................... 101
Gambar L 11.10 Prototype Halaman Notifikasi Data Utama Berhasil Disimpan
............................................................................................................................. 102
Gambar L 11.11 Prototype Halaman Sub Menu Pangkat/Golongan .................. 103
Gambar L 11.12 Prototype Halaman Isi Form Pangkat/Golongan .................... 103
Gambar L 11.13 Prototype Halaman Konfirmasi Hapus Data ........................... 104
Gambar L 11.14 Prototype Halaman Notifikasi Data Pangkat/Golongan Berhasil
Disimpan ............................................................................................................. 104
Gambar L 11.15 Prototype Halaman Sub Menu Peninjauan Masa Kerja .......... 105
Gambar L 11.16 Prototype Halaman Konfirmasi Hapus Data ........................... 106
Gambar L 11.17 Prototype Halaman Notifikasi Data Peninjauan Masa Kerja
Berhasil Disimpan ............................................................................................... 106
Gambar L 11.18 Prototype Halaman Sub Menu Pendidikan .............................. 107
Gambar L 11.19 Prototype Halaman Konfirmasi Hapus Data ........................... 108
Gambar L 11.20 Prototype Halaman Notifikasi Data Pendidikan Berhasil
Disimpan ............................................................................................................. 108
Gambar L 11.21 Prototype Halaman Sub Menu Jabatan .................................... 109
Gambar L 11.22 Prototype Halaman Konfirmasi Hapus Data ........................... 110
Gambar L 11.23 Prototype Halaman Notifikasi Data Jabatan Berhasil Disimpan
............................................................................................................................. 110
Gambar L 11.24 Prototype Halaman Sub Menu Diklat ...................................... 111
Gambar L 11.25 Prototype Halaman Konfirmasi Hapus Data ........................... 112
Gambar L 11.26 Prototype Halaman Notifikasi Data Diklat Berhasil Disimpan 112
Gambar L 11.27 Prototype Halaman Tab Keluarga ........................................... 113
Gambar L 11.28 Prototype Halaman Tab Orang Tua ........................................ 113
Gambar L 11.29 Prototype Halaman Tab Suami/Istri ........................................ 114
Gambar L 11.30 Prototype Halaman Tab Anak ................................................. 114
Gambar L 11.31 Prototype Halaman Konfirmasi Hapus Data ........................... 115
xvii
Halaman
Gambar L 11.32 Prototype Halaman Notifikasi Data Keluarga Berhasil Disimpan
............................................................................................................................. 115
Gambar L 11.33 Prototype Halaman Sub Menu Kursus .................................... 116
Gambar L 11.34 Prototype Halaman Konfirmasi hapus Data ............................ 117
Gambar L 11.35 Prototype Halaman Notifikasi Data Kursus Berhasil Disimpan
............................................................................................................................. 117
Gambar L 11.36 Prototype Halaman Sub Menu Penghargaan ........................... 118
Gambar L 11.37 Prototype Halaman Konfirmasi Hapus Data ........................... 119
Gambar L 11.38 Prototype Halaman Notifikasi Data Penghargaan Berhasil
Disimpan ............................................................................................................. 119
Gambar L 11.39 Prototype Halaman Tab Riwayat DP3 .................................... 120
Gambar L 11.40 Prototype Halaman Tab Pejabat Penilai .................................. 120
Gambar L 11.41 Prototype Halaman Tab Atasan Penilai ................................... 121
Gambar L 11.42 Prototype Halaman Kornfirmasi Hapus Data .......................... 121
Gambar L 11.43 Prototype Halaman Notifikasi Data DP3 Berhasil Disimpan.. 122
Gambar L 11.44 Prototype Halaman Tab Riwayat SKP .................................... 122
Gambar L 11.45 Prototype Halaman Tab Pejabat Penilai .................................. 123
Gambar L 11.46 Prototype Halaman Tab Atasan Penilai .................................. 123
Gambar L 11.47 Prototype Halaman Konfirmasi Hapus Data ........................... 124
Gambar L 11.48 Prototype Halaman Notifikasi Data SKP Berhasil Disimpan . 124
Gambar L 11.49 Prototype Halaman Sub Menu Hukuman Disiplin .................. 125
Gambar L 11.50 Prototype Halaman Konfirmasi Hapus Data ........................... 126
Gambar L 11.51 Prototype Halaman Notifikasi Data Hukuman Disiplin Berhasil
Disimpan ............................................................................................................. 126
Gambar L 11.52 Prototype Halaman Tab Cuti Reguler ..................................... 127
Gambar L 11.53 Prototype Halaman Tab CLTN ............................................... 127
Gambar L 11.54 Prototype Halaman Konfirmasi Hapus Data ........................... 128
Gambar L 11.55 Prototype Halaman Notofikasi Data Cuti Berhasil Disimpan . 128
Gambar L 11.56 Prototype Halaman Sub Menu CPNS / PNS ........................... 129
Gambar L 11.57 Prototype Halaman Notifikasi Data CPNS/PNS Berhasil
Disimpan ............................................................................................................. 129
xviii
Halaman
Gambar L 11.58 Prototype Halaman Sub Menu Unit Organisasi ....................... 130
Gambar L 11.59 Prototype Halaman Konfirmasi Hapus Data ........................... 131
Gambar L 11.60 Prototype Halaman Notifikasi Data Unit Organisasi Berhasil
Disimpan ............................................................................................................. 131
Gambar L 11.61 Prototype Halaman Sub Menu Pemberhentian ........................ 132
Gambar L 11.62 Prototype Halaman Konfirmasi Hapus data Pemberhentian ... 133
Gambar L 11.63 Prototype Halaman Notifikasi Data Pemberhentian Behasil
Disimpan ............................................................................................................. 133
Gambar L 11.64 Prototype Halaman Sub Menu Angka Kredit .......................... 134
Gambar L 11.65 Prototype Konfirmasi Hapus Data Angka Kredit .................... 135
Gambar L 11.66 Prototype Halaman Notifikasi Data Angka Kredit Berhasil
Disimpan ............................................................................................................. 135
Gambar L 11.67 Prototype Halaman Tab Jabatan .............................................. 136
Gambar L 11.68 Prototype Halaman Tab Mutasi ............................................... 136
Gambar L 11.69 Prototype Halaman Tab Struktur Organisasi ........................... 137
Gambar L 11.70 Prototype Halaman Notifikasi Data Anjab Berhasil Diunduh 137
xix
DAFTAR TABEL
Halaman
Tabel 3.1 Tabel Konsolidasi data .......................................................................... 26
Tabel 3.2 Tabel Hasil Benchmark Aplikasi 1 (Satu) ............................................ 27
Tabel 3.3 Tabel Hasil Benchmark Aplikasi 2 (Dua) ............................................. 28
xx
DAFTAR LAMPIRAN
Halaman
Lampiran 1. Biodata Diri ...................................................................................... 46
Lampiran 2. Tampilan SIMPEG Saat Ini .............................................................. 47
Lampiran 3. User Persona .................................................................................... 70
Lampiran 4. Sticky Notes ...................................................................................... 74
Lampiran 5. Sequence Model ................................................................................ 78
Lampiran 6. Affinity Diagram ............................................................................... 80
Lampiran 7. Visioning ........................................................................................... 81
Lampiran 8. Storyboarding ................................................................................... 85
Lampiran 9. User Environment Design (UED ...................................................... 87
Lampiran 10. Paper Prototype ............................................................................. 88
Lampiran 11. Prototype ........................................................................................ 98
1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Badan Kepegawaian dan Pengembangan Sumber Daya Manusia
(BKPSDM) Kabupaten Sumenep sebagai satuan kerja perangkat daerah untuk
mengemban tugas dalam menjamin kelancaran penyelenggaraan manajemen
kepegawaian daerah Kabupaten Sumenep. Berdasarkan surat keputusan Kepala
Badan Kepegawaian, Pendidikan dan Pelatihan Kabupaten Sumenep Nomor:
188/007A/KEP/435.203/2011 tentang Penetapan Visi dan Misi Pelayanan pada
Badan Kepegawaian dan Pengembangan Sumber Daya Manusia (BKPSDM)
menyebutkan bahwa visi yang akan dicapai adalah “Terwujudnya Manajemen
Kepegawaian dan Aparatur Pemerintah yang Berkualitas dan Profesional”. Guna
mewujudkan visi organisasi tersebut, BKPSDM telah merumuskan misi yang
akan dilaksanakan dengan “Meningkatkan Kualitas Pelayanan Administrasi dan
Manajemen Kepegawaian yang Efektif dan Efesien”. Salah satu program yang
dilaksanakan BKPSDM Kabupaten Sumenep dalam membangun tata kelola
kepegawaian ini adalah dengan penataan kelola data pegawai melalui Sistem
Informasi Kepegawaian (SIMPEG).
Pada tahun 2012, BKPSDM mulai menggunakan SIMPEG. SIMPEG ini
menyajikan berbagai macam informasi dan data dari seluruh Pegawai Negeri Sipil
(PNS) yang ada di Kabupaten Sumenep, menu yang ada pada SIMPEG bagian
user adalah sebagai berikut: Menu Login, Menu Utama, Menu Anjab: Sub Menu
Jabatan, Sub Menu Mutasi dan Sub Menu Struktur Organisasi. Menu Pegawai,
Menu Statistik: Sub Menu Golongan Ruang, Sub Menu Eselon, Sub Menu
Pendidikan, Sub Menu Jenis Kelamin, Sub Menu Agama, Sub Menu Golongan
Umur dan Sub Menu Tipe Pegawai. Menu Pensiun dan Menu Ulang Tahun.
Berdasarkan observasi, ditemukan permasalahan berupa keluhan-keluhan
dari pengguna SIMPEG. Untuk memastikan keluhan tersebut dilakukan
wawancara kontekstual dengan melibatkan pengguna SIMPEG serta
mendiskusikannya secara langsung tentang apa keinginan pengguna untuk
pekermbangan SIMPEG kedepannya.
2
Berdasarkan hasil wawancara kontektual tersebut ditemukan untuk
permasalahan dari segi tampilan dan proses kerja saat menggunakan SIMPEG.
Untuk dari segi tampilan pengguna mengeluhkan pada penggunaan font yang
terlalu kecil dan tipis, tampilan background yang norak, kontras warna yang
kurang menarik, tidak ada fitur lupa password pada menu login, sub menu pada
menu pegawai terlalu banyak, animasi pada SIMPEG kurang menarik, spasi antar
font dan baris terlalu sempit, tata letak yang terlalu monoton, jika membuka menu
pegawai otomatis mengarahkan pada tab yang baru dan menu-menu pada
SIMPEG masih belum update mengikuti SIMPEG pusat. Untuk dari segi proses
kerja, pengguna mengeluhkan pada pengubahan atau penambahan data pegawai.
Proses pengubahan atau penambahan data pegawai yang berjalan saat ini, jika
pengguna ingin melakukan pengubahan atau penambahan data pegawai, pengguna
tidak bisa langsung mengubah atau menambah data pegawai pada aplikasi
SIMPEG dan pengguna harus datang langsung pada Badan Kepegawaian dan
Pengembangan Sumber Daya Manusia Kabupaten Sumenep agar bisa mengubah
ata menambahkan data pegawai.
Oleh karena itu dalam Tugas Akhir ini dilakukan penelitian untuk
menganalisis dan merancang desain user interface SIMPEG Badan Kepegawaian
dan Pengembangan Sumber Daya Manusia Kabupaten Sumenep. Metode yang
digunakan dalam penelitian ini adalah User Centred Design (UCD) Based On
Contextual Design, yang menempatkan pengguna aplikasi sebagai pertimbangan
utama dalam membangun sebuah SIMPEG. Dalam Contextual Design, pengguna
selaku pihak yang paling banyak melakukan interaksi dengan sistem akan menjadi
faktor utama dalam penilaian SIMPEG. Hal ini akan memperjelas apa saja yang
menjadi kebutuhan pengguna terhadap penggunaan SIMPEG. Dengan adanya
penelitian ini, membuat SIMPEG menjadi lebih baik dari segi desain User
Interface yang sesuai dengan kebutuhan pengguna.
1.2 Rumusan Masalah
Berdasarkan latar belakang masalah di atas, maka rumusan masalah pada
penelitian ini adalah bagaimana memenuhi kebutuhan pengguna, menganalisis
permasalahan dan merancang User Interface pada SIMPEG BKPSDM Kabupaten
3
Sumenep Dengan Metode User Centered Design (UCD) Based On Contextual
Design.
1.3 Batasan Masalah
Dalam menganalisis dan merancang User Interface pada SIMPEG
BKPSDM Kabupaten Sumenep ini diperlukan pembatasan agar tidak
menyimpang dari topik yang diambil. Batasan masalah pada penelitian ini adalah
sebagai berikut:
1. Responden dalam penelitian ini adalah Pegawai Negeri Sipil (PNS) yang
bekerja di bagian kepegawaian yang menjadi pengguna SIMPEG.
2. Proses yang digunakan dalam merancang User Interface berdasarkan metode
User Centered Design (UCD) Based On Contextual Design.
3. SIMPEG yang diteliti hanya pada bagian User (Menu Login, Menu Utama,
Menu Anjab: Sub Menu Jabatan, Sub Menu Mutasi dan Sub Menu Struktur
Organisasi. Menu Pegawai, Menu Statistik: Sub Menu Golongan Ruang, Sub
Menu Eselon, Sub Menu Pendidikan, Sub Menu Jenis Kelamin, Sub Menu
Agama, Sub Menu Golongan Umur dan Sub Menu Tipe Pegawai. Menu KP,
Menu Pensiun dan Menu Ulang Tahun).
1.4 Tujuan
Berdasarkan latar belakang yang telah diuraikan diatas maka dapat
dituliskan tujuannya adalah sebagai berikut:
1. Menghasilkan User Interface yang memiliki keseragaman baik dari segi
warna, font, gambar dan tata letak dengan prototype.
2. Menghasilkan User Experience pada SIMPEG dengan menggunakan metode
User Centered Design (UCD) Based On Contextual Design.
1.5 Manfaat
Adapun manfaat yang diharapkan dalam penelitian ini adalah sebagai
berikut:
1. Memperbaiki tampilan Sistem Informasi Kepegawaian (SIMPEG) Badan
Kepegawaian dan Pengembangan Sumber Daya Manusia (BKPSDM)
4
Kabupaten Sumenep dengan Visual Interface yang lebih menarik berdasarkan
kebutuhan pengguna.
2. Mempermudah user saat berinteraksi dengan Sistem Informasi Kepegawaian
(SIMPEG) Badan Kepegawaian dan Pengembangan Sumber Daya Manusia
(BKPSDM) Kabupaten Sumenep yang sesuai dengan pengalaman user dan
mudah dipahami.
1.6 Sistematika Penulisan
Sistematika dalam penulisan laporan Analisis dan Perancangan User
Interface Pada Sistem Informasi Kepegawaian (SIMPEG) Badan Kepegawaian
dan Pengembangan Sumber Daya Manusia Kabupaten Sumenep dengan Metode
User Centered Design (UCD) Based On Contextual Design adalah sebagai
berikut:
BAB I PENDAHULUAN
Bab ini menjelaskan tentang latar belakang, perumusan masalah,
batasan masalah yang menjelaskan batasan-batasan dari sistem yang
dibuat agar tidak menyimpang dari ketentuan yang ditetapkan. Tujuan
dan manfaat, kemudian dilanjutkan dengan membuat sistematika
penulisan laporan.
BAB II LANDASAN TEORI
Bab ini menjelaskan tentang teori-teori yang berkaitan dalam
penyelesaian laporan analisis dan perancangan user interface pada
SIMPEG. Landasan teori meliputi User Interface, User Experience,
User Centered Design (UCD) dan Contextual Design.
BAB III METODOLOGI PENELITIAN
Bab ini menjelaskan tentang penjelasan mengenai tahapan yang
dikerjakan dalam menyusun dan menyelesaikan tugas akhir yang terdiri
dari studi literatur, collecting data, interpretasi, konsolidasi data,
visioning, storyboarding, user environment design dan prototype.
5
BAB IV PEMBAHASAN
Bab ini menjelaskan tentang pembahasan mengenai proses visioning,
storyboarding, user environtment design dan perancangan prototyping
dengan menggunakana perangkat lunak Adobe XD (Experience
Design).
BAB V PENUTUP
Bab ini menjelaskan tentang kesimpulan yang diperoleh dari penelitian
yang telah dilakukan dan saran terhadap hal yang dapat dikembangkan
lagi pada penelitian ini.
6
BAB II
LANDASAN TEORI
2.1 Analisa dan Perancangan Sistem
Analisa dan perancangan sebuah sistem informasi merupakan salah satu
langkah awal yang harus dilakukan guna mengevaluasi permasalahan yang sedang
terjadi serta mendefinisikan kendala yang mungkin akan dihadapi.
Menurut Dian Ade Kurnia (2013) analisa sistem didefinisikan sebagai
proses penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian
komponennya dengan maksud untuk mengidentifikasi dan mengevaluasi
permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan yang
terjadi, dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan
perbaikannya. Fase analisa sistem dilakukan setelah fase perencanaan sistem dan
sebelum perancangan sistem. Dalam pengerjaannya analisa sistem membutuhkan
ketelitian agar tidak terjadi kesalahan pada tahap perancangan.
Menurut Rosita Cahyaningtyas (2015) perancangan sistem adalah suatu
proses pemilihan dan pemikiran yang menghubungkan fakta-fakta berdasarkan
asumsi-asumsi yang berkaitan dengan masa datang dengan menggambarkan dan
merumuskan kegiatan-kegiatan tertentu yang diyakini diperlukan untuk mencapai
tujuan-tujuan tertentu dan menguraikan bagaimana pencapaiannya.
Menurut Darmawan (2013) tahap perancangan atau desain sistem
mempunyai dua tujuan utama yaitu:
1. Memenuhi kebutuhan pemakai sistem (user).
2. Memberikan gambaran yang jelas dan menghasilkan rancangan bangun yang
3. lengkap kepada pemograman komputer dan ahli-ahli teknik lainnya yang
terlibat dalam pengembangan atau pembuatan sistem yang terinci.
2.2 User Interface (UI)
Menurut Latiansah (2012) user interface (UI) adalah interaksi antara
pengguna dengan komputer. Istilah lain dari user interface adalah Human
Computer Interaction (HCI) yang merupakan semua aspek dari interaksi antara
pengguna dan komputer.
7
Tujuan dari user interface (UI) adalah merancang interface yang efektif
untuk sistem perangkat lunak. Efektif artinya siap digunakan, dan hasilnya sesuai
dengan kebutuhan. Kebutuhan disini adalah kebutuhan penggunanya. Pengguna
sering menilai sistem dari interface, bukan dari fungsinya melainkan dari UI-nya.
Jika desain user interface (UI) buruk, hal tersebut seringkali menjadi alasan untuk
tidak menggunakan software tersebut. Sebelum masuk ke dalam tahap pembuatan
user interface (UI), ada beberapa hal yang harus dipersiapkan terlebih dahulu,
yaitu:
1. Menentukan masalah yang ingin diselesaikan.
2. Mengenali pengguna produk.
3. Melihat apa yang telah dilakukan pesaing di bidang produk yang sejenis.
4. Mengumpulkan persyaratan produk secara keseluruhan.
Menurut Deborah J. Mayhew (1999) ada 17 prinsip dasar dalam pembuatan
user interface (UI) yang perlu diketahui, yaitu:
1. User Compatibility, sebuah user interface (UI) harus sesuai dengan user yang
menggunakannya.
2. Product Compatibility, sebuah user interface (UI) harus mempertahankan
kompabilitas antar produk.
3. Task Compatibility, rancangan user interface (UI) sesuai dengan tugas yang
akan dilakukan user.
4. Workflow Compatibility, pengorganisasian berdasarkan group atau yang lain
agar user dapat lebih mudah melakukan tugasnya.
5. Consistency, konsistensi fungsi perintah dalam user interface (UI) dengan
tidak membuat command-command yang membuat user ambigu.
6. Familiarity, dengan menggunakan gambaran atau konsep yang sudah banyak
dikenal orang.
7. Simplicity, merancang user interface (UI) yang tidak kompleks dengan tidak
menampilkan semua fungsionalitasnya (menyembunyikan fungsi-fungsi yang
jarang digunakan).
8. Direct Manipulation, user langsung menyaksikan suatu perubahan yang user
lakukan.
8
9. Control, yaitu user interface (UI) yang akan dibuat harus sepenuhnya dapat
mengontrol user.
10. WYSIWYG (What You See Is What You Get), dimana tampilan yang
disodorkan haruslah tepat seperti yang diinginkan user. Misalnya saat
mencetak halaman document, sistem menyediakan fasilitas print preview dan
hasil cetak harus sama dengan tampilan print previewnya.
11. Flexibility, membuat user interface (UI) yang fitur-fiturnya dapat dicapai
tidak hanya dengans satu cara saja.
12. Responsiveness, dimana sistem harus selalu merespon dengan cepat apa yang
diinputkan oleh user, seperti menampilkan progress bar.
13. Invisible Technology, yaitu saat user menggunakan aplikasi tidak perlu tahu
apa saja yang sedang terjadi saat ia menggunakan aplikasi tersebut.
14. Robustness, yaitu handal, dimana sistem yang dibuat harus dapat menangani
kesalahan user dengan menyediakan recovery atau semacamnya.
15. Protection, yaitu user interface (UI) harus melindungi user dari kesalahan-
kesalahan umum yang sering dilakukan
16. Ease of Learning, yaitu user interface (UI) harus mudah dipelajari untuk user
awam atau baru saja memakai aplikasi agar user termotivasi untuk
menggunakannya.
17. Ease of Use, yaitu user interface (UI) harus mudah digunakan untuk
mempercepat kinerja user, baik user awam atau user berpengalaman. Hal ini
akan membuat pekerjaan user semakin cepat selesai.
User interface (UI) berperan penting dalam efektivitas suatu sistem
informasi. Pembuatan user interface (UI) bertujuan untuk menjadikan teknologi
informasi tersebut mudah digunakan oleh pengguna. Adapun langkah-langkah
membuat user interface (UI) (intentics inc, 2017):
1. User Research, adalah tahapan untuk mengetahui dan mengumpulkan
kebutuhan data user. Salah satu cara untuk mengetahui kebutuhan user adalah
dengan observasi dan wawancara. Hasil dari user research ini akan menjadi
panduan untuk mendesain aplikasi.
2. Design and Prototyping, dimulai dari pembuatan sketsa sederhana /
wireframe, mockup, and prototype.
9
a. Wireframe, adalah membuat sketsa hitam putih yang menekankan isi dari
konten yang akan dibuat. Tujuan dari wireframe ini untuk membuat
susunan struktur, layout, navigasi dan isi konten.
b. Mockups, untuk menunjukkan gambaran nyata dari sebuah konsep yang
telah dibuat wireframe berupa semua grafik, tipografi, warna dan elemen
halaman lainnya.
c. Prototype, bertujuan untuk mensimulasikan bagaimana user berinteraksi
dengan UI secara nyata dengan meng-klik software yang digunakan untuk
mendapat respon. Prototype mungkin tidak termasuk elemen desain yang
lengkap. Pada tahap ini, prototype dapat didemonstrasikan dan
mendiskusikannya. Setelah demonstrasi, prototype dievaluasi sesuai
kebutuhan user. Ini dapat membantu untuk menguji ide dan membuat
beberapa perubahan pada tahap awal proyek. Prototype mudah direvisi,
sehingga membuat prototype juga meningkatkan efisiensi proses
pengembangan perangkat lunak.
3. Evaluation, yang bertujuan untuk menilai kualitas suatu desain, tidak dalam
abstrak, tetapi bagaimana hal itu sesuai dengan kebutuhan pengguna dan
menampilkan semua fitur produk.
2.3 User Experience (UX)
Menurut Garrett (2011) user experience (UX) bukanlah tentang cara kerja
dari suatu produk atau layanan yang ada tetapi interaksi antara user dengan
produk, seperti pengalaman pengguna dalam menggunakan produk, apakah
mudah digunakan, sesederhana apa dalam mengoperasikan produk atau layanan
hingga pengalaman untuk menemukan, menyerap dan memahami informasi yang
tersedia.
user experience (UX) menjawab pertanyaan mengapa desain dibuat.
Penelitiannya diperlukan untuk mencapai kesimpulan baru, membangun fakta,
dan menemukan masalah. Selain itu, penelitian user experience (UX) membantu
untuk memahami pengguna dan kebutuhan pengguna (Cheng, 2014).
Inti dari user experience (UX) adalah pengalaman pengguna saat
menemukan atau mendapat nilai dari sebuah produk. Apakah produk tersebut
10
dapat digunakan, bermanfaat, menarik, dan mudah digunakan oleh para pengguna
yang memiliki keterbatasan. Tujuan user experience (UX) lebih berkaitan dengan
perasaan, dan pengalaman pengguna dengan produk yang dipakai. Perasaan yang
dapat pengguna berikan sebagai hasil pengujian/evaluasi adalah: memuaskan,
nyaman, menghibur, membantu, indah, kreatif, stumulasi kognitif,
menyenangkan, mengejutkan, menantang, membosankan, membuat frustrasi,
mengganggu. Hal-hal ini muncul karena pengguna menggunakan sebuah produk
(Rogers, Sharp, & Preece, 2011). user experience (UX) sendiri terdiri dari empat
elemen yang saling tergantung:
1. Branding, mencakup semua hal yang terkait dengan estetika dan desain yang
ada di dalam website.
2. Usability, secara umum mensyaratkan kemudahan pengguna terhadap
komponen dan fitur yang ada pada sebuah situs.
3. Functionality, mencakup semua hal teknik dan proses yang
melatarbelakanginya dan aplikasinya.
4. Content, mengacu pada konten yang sebenarnya dari sebuah situs (teks,
multimedia, dan gambar) serta strukturnya atau arsitektur informasinya.
2.4 Konsep Dasar Sistem Informasi
Menurut Jogiyanto (2009) sistem informasi adalah suatu sistem di dalam
organisasi yang mempertemukan kebutuhan pengelola transaksi harian,
mendukung operasi, bersifat manajerial dan kegiatan strategi dari suatu organisasi
dan menyediakan pihak luar tertentu dengan laporan-laporan yang diperlukan.
Sistem informasi diartikan sebagai sebuah sistem yang saling terintegrasi satu
sama lain secara optimal dengan memanfaatkan perangkat keras dan perangkat
lunak komputer yang dibantu dengan prosedur manual, model manajemen dan
basis data untuk mengolah data menjadi sebuah informasi. Informasi yang akan
dihasilkan nantinya dapat digunakan sebagai acuan dalam pengambilan keputusan
untuk mencapai tujuan.
Teknik operasi yang terdapat dalam sistem informasi memiliki 4 (empat)
komponen dasar yaitu mengumpulkan, mengolah, menyimpan dan menyebarkan
informasi. Namun pada penerapannya, komputer sebagai sarana penunjang
11
memiliki keterbatasan, sehingga peran manusia masih tetap penting sebagai
pengendali atas pengolahan data yang dilakukan oleh komputer.
2.5 Sistem Informasi Kepegawaian
Berdasarkan Keputusan Menteri Dalam Negeri No. 17 Tahun 2000 tentang
Sistem Informasi Manajemen Kepegawaian Depdagri dan Pemda menyebutkan
bahwa Sistem Informasi Manajemen Kepegawaian adalah suatu totalitas terpadu
yang terdiri atas perangkat pengolahan meliputi pengumpulan, prosedur, tenaga
pengolah, dan perangkat lunak; perangkat penyimpanan meliputi pusat data dan
bank data serta perangkat komunikasi yang saling berkaitan, bergantung, dan
saling menentukan dalam rangka penyediaan informasi di bidang kepegawaian.
Updating data PNS secara berkala dilakukan dengan pendekatan sistem,
satu sistem akan berhubungan dengan subsistem lainnya dalam satu organisasi.
Sedangkan dalam administrasi negara, sebuah pemerintahan merupakan suatu
organisasi yang sangat besar, dimana kepegawaian adalah salah satu sub
sistemnya. Organisasi yang besar umumnya beroperasi dengan memelihara record
personel yang dikomputerisasikan (Amsyah, 2001). SIMPEG merupakan suatu
aplikasi perangkat lunak (software) yang digunakan untuk mengelola data-data
kepegawaian di lingkungan pemerintah daerah yang terintegrasi dan menyeluruh.
Berdasarkan Keputusan Menteri Dalam Negeri No. 17 Tahun 2000 tentang
Sistem Informasi Manajemen Kepegawaian Depdagri dan Pemda menyebutkan
bahwa Sistem Informasi Manajemen Kepegawaian adalah suatu totalitas terpadu
yang terdiri atas perangkat pengolahan meliputi pengumpulan, prosedur, tenaga
pengolah, dan perangkat lunak; perangkat penyimpanan meliputi pusat data dan
bank data serta perangkat komunikasi yang saling berkaitan, bergantung, dan
saling menentukan dalam rangka penyediaan informasi di bidang kepegawaian.
2.6 User Centered Design (UCD)
User Centered Design (UCD) merupakan paradigma baru dalam
pengembangan sistem berbasis web. Konsep dari User Centered Design (UCD)
adalah pengguna sebagai pusat dari proses pengembangan sistem, dan
tujuan/sifat-sifat, konteks serta lingkungan sistem semua didasarkan dari
12
pengalaman pengguna (Simatupang, 2014). Berikut ini adalah gambar tahapan
User Centered Design (UCD).
Gambar 2.1 Tahapan User Centered Design (UCD)
a. Tahap 1: Plan The User Centered Design Process
Pada tahap ini dilakukan diskusi dengan pihak terkait yang membuat aplikasi,
untuk mendapatkan komitmen bahwa proses pembuatan aplikasi adalah berpusat
kepada pengguna.
b. Tahap 2: Understand and Specify Context Of Use
Pada tahap ini dilakukan identifikasi terhadap pengguna aplikasi, dimana
pengguna menjelaskan untuk apa dan dalam kondisi apa dalam menggunakan
aplikasi ini.
c. Tahap 3: Specify User and Organisational Requirement
Pada tahap ini dilakukan identifikasi secara rinci terhadap kebutuhan
pengguna.
d. Tahap 4: Product Design Solutions
Pada tahap ini membangun suatu desain sebagai solusi dari aplikasi yang
sedang dianalisis.
e. Tahap 5: Evaluate Design Again Requirement
Pada tahap ini melakukan evaluasi terhadap desain yang telah dibuat, tahap
ini memiliki tujuan agar mengetahui desain yang sudah dibuat sudah memenuhi
kebutuhan user.
13
f. Tahap 6: Design Solutionments User Requirement
Pada tahap ini melakukan penyelesaian terhadap desain yang telah dibuat atau
penyempurnaan desain sesuai dengan kebutuhan user.
Tujuan dilakukan pendekatan UCD adalah untuk menghasilkan produk
dengan nilai usability yang tinggi (Mulia, 2016). Dalam perancangan sistem
berdasarkan metode UCD memiliki beberapa petunjuk yang dituangkan dalam
beberapa prinsip-prinsip perancangan tersebut yakni, fokus pada pengguna,
perancangan terintegrasi, perancangan interaktif. Beberapa prinsip-prinsip desain
antarmuka pengguna yang dikenalkan UCD yaitu, (Ritter, 2014):
1. Functionality
Fungsionalitas dari sebuah perangkat lunak dengan efektif, efisien dan
memuaskan dalam mencapai tujuan tertentu sesuai dengan kebutuhan.
2. Usability
Sebuah sistem informasi harus mempunyai kegunaan pada tipe orang yang
berbeda dan juga pada lingkungan yang berbeda. Kegunaan sebuah sistem
informasi dipengaruhi oleh beberapa faktor, di dalamnya adalah user, lingkungan
dan jenis perangkat. Interaksi pengguna dengan sistem informasi dipengaruhi oleh
karakteristik mereka. Beberapa persamaan karakter para pengguna tersebut
adalah:
a) Visual Clarity, kejelasan visual pada sistem informasi yang digunakan.
b) Consistency, sesuai dengan sistem nyata serta sesuai dengan produk yang
dihasilkan. Software Engineer harus memperhatikan hal-hal yang bersifat
konsisten saat merancang aplikasi khususnya antarmuka. Contoh:
pewarnaan warna, struktur menu, huruf, format desain yang seragam
pada antarmuka di berbagai bagian sehingga pengguna tidak kesulitan
saat berpindah posisi atau lokasi dalam menyelesaikan pekerjaan,
(Anggraini, 2015).
c) Informative feedback, mengirim kembali informasi tentang tindakan apa
yang telah dilakukan dan apa yang telah dicapai, yang memungkinkan
seseorang untuk melanjutkan kegiatan tersebut (Norman, 2002).
d) Explicitness, ketegasan pada setiap fungsi pada sistem informasi tersebut.
14
e) Appropriate Functionality, fungsi yang tepat pada setiap fungsi yang ada
di sistem informasi.
f) Flexibility and Control, kecocokan sistem dengan end user.
g) Error Prevention and Control, pencegahan dan kontrol kesalahan pada
sistem informasi.
h) User Guidance and Support, adanya manual penggunaan yang up to date
3. Learnability, seberapa mudah sistem untuk dipelajari.
4. Efficiency, seberapa efisien proses yang dilalui sistem untuk bekerja.
5. Reliability, kehandalan dalam sistem informasi berfungsi seperti yang
diinginkan, tampilan akurat.
6. Maintainability, kemampuan software untuk dimodifikasi (koreksi, adaptasi,
perbaikan) secara efektif dan efisien.
7. Utility/Usefulness, fungsionalitas sistem berfungsi sesuai keinginan pengguna
sehingga mampu menyelesaikan tujuan dari suatu pekerjaan/ permainan.
2.7 Pendekatan User Centered Design (UCD)
Dalam arti luas user centered design (UCD) merupakan jenis desain user
interface (UI), dimana proses menurut kebutuhan, keinginan dan keterbatasan
pengguna tidak hanya pada hasil akhir produk, tetapi diberikan perhatian luas
pada pengguna disetiap tahap proses perancangan. Proses perancangan yang
berpusat pada pengguna dapat membantu developer perangkat lunak untuk
memenuhi tujuan produk rekayasa bagi pengguna. Syaratnya pengguna harus
dianggap benar dari awal dan termasuk dari seluruh siklus pembuatan produk
(Patrick, 2002).
Beberapa metode pendekatan UCD menurut ISO Standard Human-
Centered Design for Interactive Systems (ISO 9241-210, 2010) sebagai berikut:
1. Cooperative Design
Metode yang melihatkan pengguna dan developer pada pijakan yang sama.
Metode ini telah dikembangkan sejak tahun 1970 dan telah menjadi tradisi
Skandinavia untuk rancangan IT Artifact.
2. Participatory Design
15
Metode yang terinspirasi dari metode cooperative design, hampir memiliki
konsep yang sama, hanya lebih fokus pada partisipasi para pengguna, dan
biasanya metode ini digunakan untuk produk yang besar dan sangat diinginkan
oleh pengguna. Berkembang sejak tahun 1990 di Amerika Utara.
3. Contextual Design
Metode yang berpusat pada pengguna dalam konteks yang sebenarnya.
Berkembang sejak tahun 1999 dan beberapa ide juga diadopsi dari participatory
design. Developer diberi prosedur agar lebih memahami pengguna dari proses
pendekatan yang dilakukan, baik juga untuk organisasi yang ingin memperoleh
pengalaman baru dalam menggunakan produk.
ISO Standard menjelaskan 6 (enam) prinsip yang akan memastikan
rancangan yang berpusat pada pengguna yaitu:
1) Rancangan didasarkan pada pemahaman eksplisit pengguna, tugas dan
lingkungan.
2) Pengguna harus terlibat dalam seluruh rancangan dan pengembangan.
3) Rancangan didorong dan disempurnakan dengan evaluasi yang berpusat pada
pengguna.
4) Proses yang dilakukan berulang-ulang (iterasi).
5) Perancangan membahas pengalaman pengguna secara keseluruhan.
6) Developer/pembuat produk harus memiliki keterampilan dan kedisiplinan.
2.8 Contextual Design
Contextual Design adalah proses desain yang berpusat pada pengguna yang
menggunakan penelitian lapangan mendalam untuk mendorong desain yang
inovatif. contextual design menambahkan teknik untuk menganalisis dan
menyajikan data pengguna, mendorong ide dari data pengguna, merancang solusi
produk secara spesifik, dan mengiterasi solusi tersebut dengan pengguna.
contextual design dapat digunakan untuk memperbaiki atau memperluas produk
yang sudah ada dan mendorong peta jalan untuk produk jangka panjang. (H.
Beyer dan K. Holtzblatt, 1999).
16
Terdapat tujuh tahapan dalam contextual design, antara lain collecting data,
interpretation, data consolidation, visioning, storyboarding, user environment
design (UED) dan prototyping.
1. Collecting Data
Collecting Data merupakan tahapan dimana peneliti memahami kondisi dan
pemahaman user terkait suatu rancangan produk (H. Beyer dan K. Holtzblatt,
1999). Collecting Data menggunakan metode observasi dan one to one interview
atau disebut wawancara kontekstual (contextual inquiry). Wawancara kontekstual
adalah satu-satunya wawancara yang dilakukan di ruang kerja pengguna karena
wawancara ini difokuskan pada pengamatan pekerjaan yang sedang berlangsung.
Wawancara kontekstual mempermudah pekerjaan kita dengan melibatkan
pengguna dan akan menyesuaikan dengan keinginan pengguna secara langsung
tanpa meg-edit-nya lagi di kemudian hari dan juga dapat mendiskusikannya secara
langsung apa yang terjadi kepada pengguna. Collecting data pada contextual
design didefinisikan dalam empat prinsip, yaitu (Karen et al, 2005).
a) Context: Wawancara dilakukan di tempat kerja user. Peneliti mengamati
bagaimana user melakukan pekerjaannya dan membahas apa yang dihasilkan
produk tersebut. Selain itu, peneliti mengumpulkan rincian data lain yang
relevan dengan penelitian.
b) Partnership: User dan peneliti melakukan kolaborasi dalam memahami
pekerjaan user. Dilakukan dengan cara mengamati user dan mendiskusikan
apa yang user lakukan.
c) Interpretation: Peneliti membagi interpretasi dan wawasan dengan user
selama wawancara. User dapat memperluas dan memperbaiki pemahaman
peneliti.
d) Focus: Peneliti mengarahkan interaksi terhadap topik yang relevan.
Dalam mengumpulkan data, setidaknya ada 4-6 (tergantung pada ruang
lingkup proyek) user yang akan diobservasi dan wawancara. Keuntungan
menggunakan wawancara kontekstual (contextual inquiry), adalah teknik ini
termasuk teknik yang sangat flexible, detail, dan reliable. Setelah semua hasil
wawancara terkumpul, selanjutnya dibuat user persona dari setiap user yang telah
diwawancara. Tujuan dari membuat user persona adalah untuk membantu dalam
17
perancangan desain dengan lebih fokus pada karakter dan menampilkan
kebutuhan yang user inginkan pada sistem.
2. Interpretation
Data dari hasil wawancara tersebut kemudian dinterpretasi dengan cara
menuliskan jawaban dari user pada stiky notes dan ditempelkan di dinding secara
berkelompok berdasarkan topik pertanyaan guna mendapatkan isu utama dan
informasi suatu produk. Kemudian dibuat work model secara rinci untuk
memahami setiap aspek yang berguna dalam tahap perancangan desain. Sesi
interpretasi berguna untuk mempertemukan tim antar lintas fungsi untuk
mendengar seluruh hasil wawancara dan observasi. Sesi ini memungkinkan setiap
orang dalam tim menyampaikan persepsinya melalui sticky notes dan work model
untuk menangkap permasalahan dan menggambarkan pandangan bersama dari
data yang didapatkan. Wawancara tim terdiri dari anggota tim sebanyak 4-8 orang
dan mendengarkan peneliti menceritakan kembali apa yang didapatkan. Saat
wawancara terjadi, anggota tim dapat menambah wawasan terhadap penelitian.
Pada tahap ini terdapat lima work model yang digunakan, yaitu (H. Beyer dan K.
Holtzblatt, 1999).
a) Flow model: Menampilkan data koordinasi, komunikasi, interaksi, aturan dan
tanggung jawab masing-masing dalam lingkungan organisasi/kerja user.
b) Sequence model: Menampilkan breakdown tahapan-tahapan aktivitas user.
c) Cultural model: Menampilkan norma-norma, pengaruh, tekanan yang
terdapat dalam aktivitas kerja.
d) Artifact model: Menampilkan dokumen atau perangkat yang mendukung
aktivitas kerja user.
e) Physical model: Menampilkan office layout, network topology, atau layout
dari tools komputer yang digunakan.
3. Data Consolidation
Pada tahap data konsolidasi menggabungkan beberapa data yang telah
dianalisa dengan cara melewatkan jawaban yang sama pada satu topik untuk
menghindari pengulangan kata yang memiliki makna sama ke dalam bentuk
affinity diagram (H. Beyer dan K. Holtzblatt, 1999). Affinity diagram
menggambarkan pola umum dan struktur secara keselurahan dalam bentuk mind
18
map. Hal ini bertujuan untuk mendapatkan proses kerja, fitur dan inovasi dari
target. Konsolidasi menghasilkan representasi dari target yang mendorong design
action.
4. Visioning
Pada langkah ini, tim lintas-fungsional datang bersama-sama untuk
membuat rancangan atau ide tentang bagaimana konsep produk dan teknologi
baru yang lebih baik dan dapat mendukung praktik kerja pengguna (H. Beyer dan
K. Holtzblatt, 1999). Tim visi dimulai dengan meninjau data untuk
mengidentifikasi isu-isu utama. Sesi pengumpulan data diikuti dengan sesi
pembentukan visi, tim visioning menghasilkan berbagai konsep produk baru
dengan merekayasa skenario atau keinginan mereka berdasarkan data yang
dikumpulkan.
5. Storyboarding
Setelah visioning, tim mengembangkan visi dalam storyboard, memikirkan
skenario tentang bagaimana orang akan bekerja dengan sistem yang baru.
Memahami cara saat kerja, struktur dan alur kerja baru. Storyboard menyusun
rincian dari visi, dipandu oleh data konsolidasi, menggunakan gambar dan teks
dalam serangkaian tabel.
6. User Evironment Design (UED)
User Environment Design (UED) merencanakan bagaimana dapat
mendukung user saat bekerja pada sistem yang baru. Contextual design
menggunakan user environment design (UED) diagram dalam memperlihatkan
fokus area, yaitu area yang terlihat oleh pengguna atau yang relevan dengan
pengguna. Fokus area dapat didefinisikan lebih lanjut sebagai fungsi dalam sistem
yang mendukung jenis tertentu atau bagian dari pekerjaan. user environment
design (UED) juga menyajikan bagaimana fokus area berhubungan satu sama lain
dan menunjukkan hubungan antar fokus area.
7. Prototyping
Menguji desain dengan paper prototype bahkan dengan prototype interaktif
yang lebih canggih, sebelum tahap implementasi membantu para desainer
berkomunikasi dengan pengguna tentang sistem yang baru dan mengembangkan
desain lebih lanjut. Prototype menguji struktur user environment design (UED)
19
dan ide user interface (UI) awal, serta pemahaman tentang pekerjaan, sebelum
tahap implementasi.
20
BAB III
METODOLOGI PENELITIAN
Metodologi penelitian adalah sekumpulan peraturan, kegiatan, dan prosedur
yang digunakan oleh pelaku suatu disiplin ilmu. Metodologi juga merupakan
analisis teoritis mengenai suatu cara atau metode. Penelitian merupakan suatu
penyelidikan yang sistematis untuk meningkatkan sejumlah pengetahuan, juga
merupakan suatu usaha yang sistematis dan terorganisasi untuk menyelidiki
masalah tertentu yang memerlukan jawaban (Sugiyono, 2009). Metodologi
penelitian ini dapat dilihat pada gambar dibawah ini.
Gambar 3.1 Metodologi Penelitian
21
3.1. Plan The User Centered Design Process
3.1.1. Studi Literatur
Pada tahapan ini merupakan tahap awal penelitian, tahap yang dilakukan
adalah studi literatur yang berarti mengumpulkan berupa informasi, teori dan
referensi penting yang didapatkan dari berbagai sumber mengenai topik penelitian
ini, yaitu tentang perancangan user interface, user experience dan metode user
centered design (UCD) based on contextual design yang akan dijadikan dasar dan
acuan serta berguna untuk memperkuat kajian peneliti dalam pengembangan
SIMPEG.
3.1.2. Collecting Data 1
Tahapan collecting data 1 (satu) merupakan tahapan dimana peneliti
meminta izin kepada pihak Badan Kepegawaian dan Pengembangan Sumber
Daya Manusia Kabupaten (BKPSDM) untuk melakukan evaluasi user interface
dan user experience Sistem Informasi Kepegawaian (SIMPEG) yang sesuai
kebutuhan pengguna.
3.2. Understand and Specify Context Of Use
3.2.1. Collecting Data 2
Tahapan collecting data 2 (dua) ini merupakan tahapan dimana peneliti
memahami kondisi, menganalisis dan memahami user dan pihak BKPSDM
terkait penggunaan SIMPEG pada Badan Kepegawaian dan Pengembangan
Sumber Daya Manusia Kabupaten Sumenep.
A. Sistem Informasi Kepegawaian (SIMPEG)
Disini peneliti melakukan kolaborasi dengan pihak BKPSDM dan pengguna
SIMPEG untuk memahami perkerjaan pengguna daam menggunakan SIMPEG
dengan cara mengamati dan mendiskusikan apa yang sedang pengguna lakukan.
Berdasrkan hasil diskusi dengan Staff Bidang Data dan Informasi Kepegawaian
Badan Kepegawaian dan Pengembangan Sumber Daya Manusia (BKPSDM)
Kabupaten Sumenep Bapak Heru Adi Dharmawan adalah sebagai berikut:
1. SIMPEG merupakan produk pengembangan pada tahun 2012.
22
2. SIMPEG belum dikembangkan lebih lanjut sesuai perkembangan zaman.
3. SIMPEG belum dikembangkan lebih lanjut terkait aturan, dan kebijakan
baru administrasi kepegawaian yang berdasar pada Badan Kepegawaian
Negara (BKN).
Pengguna SIMPEG ini adalah Pegawai Negeri Sipil (PNS) Kabupaten
Sumenep yang bekerja dibagian kepegawaian. Hasil pengamatan peneliti tampilan
SIMPEG saat ini terdapat 47 (empat puluh tujuh) halaman yang terdiri dari 8
(delapan) halaman primer dan 39 (tiga puluh sembilan) halaman sekunder sebagai
berikut:
1) Menu login.
2) Menu utama.
3) Menu anjab: sub menu jabatan, sub menu mutasi dan sub menu struktur
organisasi.
4) Menu pegawai: sub menu lokasi pegawai, sub menu identitas pegawai, sub
menu pengalaman kerja, sub menu SK CPNS, sub menu SK PNS, sub menu
riwayat pangkat, sub menu riwayat jabatan, sub menu riwayat gaji, sub
menu pendidikan umum, sub menu diklat struktural, sub menu diklat
fungsional, sub menu diklat teknis, sub menu penataran, sub menu seminar,
sub menu kursus, sub menu orang tua, sub menu mertua, sub menu
suami/istri, sub menu anak, sub menu saudara, sub menu organisasi, sub
menu penghargaan, sub menu penilaian DP-3, sub menu penilaian potensi
diri, sub menu catatan prestasi, sub menu hukuman, sub menu cuti, sub
menu riwayat penugasan, sub menu penguasaan bahasa, sub menu riwayat
nikah dan sub menu tambahan masa kerja.
5) Menu statistik: sub menu golongan ruang, sub menu eselon, sub menu
pendidikan, sub menu jenis kelamin, sub menu agama, sub menu golongan
umur dan sub menu tipe pegawai.
6) Menu pensiun.
7) Menu ulang tahun.
8) Menu akun.
Tampilan SIMPEG saat ini dapat dilihat pada lampiran 2, yang meliputi
gambar L 2.1 hingga gambar L 2.47. Selama ini SIMPEG terdapat 2 pengguna
23
yaitu admin dan user. Admin merupakan pengguna yang dapat melakukan segala
aktifitas lebih dari pada user. Admin disini dapat mengolah seluruh data pegawai
di Kabupaten Sumenep dari login, merubah password admin dan user, melihat
data pegawai, mencetak data pegawai, menambah data pegawai, mengubah data
pegawai, dan menghapus data pegawai yang ada di Kabupaten Sumenep.
Sementara itu, user merupakan pengguna yang telah terdaftar di SIMPEG. Pada
setiap instansi memiliki 1 user saja, user tersebut hanya bisa diakses oleh bagian
IT kepegawaian instansi tersebut. user disini hanya bisa melakukan login, ubah
password, mencetak data pegawai, download data pegawai dan melihat seluruh
data pegawai di suatu instansi tersebut, jadi user disini tidak bisa menghapus dan
mengubah data pegawai jika terjadi kesalahan atau perubahan data pegawai.
A. Wawancara Kontekstual
Pada tahap ini dilakukan proses wawancara kontekstual dengan 1 admin dan
6 user. Kegunaan proses wawancara kontekstual ini untuk mengetahui bagaimana
kerja admin dan user SIMPEG dalam memenuhi kebutuhan terhadap informasi
SIMPEG. Daftar pertanyaan tersebut mencangkup What, When, Who, Where, Why
dan How (5W+1H) yang memiliki perbedaan antara admin dan user. Meskipun
pertanyaan tersebut berbeda, akan tetapi hal yang perlu ditangkap dari admin dan
user SIMPEG intinya mencangkup alasan dasar, motivasi dan opini untuk
mendorong desain. Berikut adalah pertanyaan kontekstual pada user dan admin
SIMPEG.
1. Wawancara Kontekstual User/Pengguna
a) Seberapa seringkah anda menggunakan komputer? Kegiatan apa saja
yang dilakukan?
b) Seberapa lama anda menggunakan SIMPEG?
c) Seberapa pentingkah SIMPEG dalam kehidupan kantor ini?
d) Apa yang mendorong motivasi anda untuk menggunakan SIMPEG?
e) Peralatan apa saja yang digunakan dalam menjalankan SIMPEG?
f) Siapa saja yang menggunakan SIMPEG?
g) Dalam menjalankan SIMPEG anda berkolaborasi dengan siapa saja?
h) Kegunaan apa saja yang diperoleh dari SIMPEG ini?
24
i) Proses apa saja yang dilakukan dalam menjalankan SIMPEG?
j) Informasi apa saja yang dibutuhkan dalam menggunakan SIMPEG?
k) Fitur apa saja yang sering anda gunakan dalam menggunakan SIMPEG?
l) Bagaimana cara anda menjalankan SIMPEG?
m) Bagaimana proses jika ingin melakukan editing / kesalahan data pada
SIMPEG?
n) Masalah apa yang anda hadapi dengan menjalankan SIMPEG ini (proses,
tampilan, informasi, font, warna, tata letak dan menu)?
o) Solusi apa yang anda inginkan dari permasalahan yang anda sebutkan
tadi?
2. Wawancara Kontekstual Admin
a) Seberapa seringkah anda menggunakan komputer? kegiatan apa saja
yang dilakukan?
b) Seberapa pentingkah SIMPEG dalam kehidupan kantor ini?
c) Apa yang mendorong motivasi anda untuk menggunakan SIMPEG?
d) Peralatan apa saja yang digunakan dalam menjalankan SIMPEG?
e) Siapa saja yang menggunakan SIMPEG?
f) Dalam menjalankan SIMPEG anda berkolaborasi dengan siapa saja?
g) Kegunaan apa saja yang diperoleh dari SIMPEG ini?
h) Proses apa saja yang dilakukan dalam menjalankan SIMPEG?
i) Informasi apa saja yang dibutuhkan dalam menggunakan SIMPEG?
j) Fitur apa saja yang sering anda gunakan dalam menggunakan SIMPEG?
k) Bagaimana cara anda menjalankan SIMPEG?
l) Bagaimana proses jika ingin memasukkan data pegawai baru, melakukan
editing dan jika terjadi kesalahan data pada SIMPEG?
m) Apakah SIMPEG Daerah yang berjalan sekarang sesuai dengan aturan
SIMPEG Nasional sekarang?
n) Masalah apa yang anda hadapi dengan menjalankan SIMPEG ini (proses,
tampilan, informasi, font, warna, tata letak dan menu)?
o) Solusi apa yang anda inginkan dari permasalahan yang anda sebutkan
tadi?
25
Setelah hasil wawancara direkam, ouput dari hasil wawancara tersebut
adalah user persona. Selanjutnya dibuat user persona dari setiap pengguna
SIMPEG yang telah diwawancarai. Adapun user persona yang dibuat meliputi 1
admin dan 6 user SIMPEG yang dirahasiakan identitasnya dengan cara mengganti
nama dan foto yang diwawancarai. Persona ini diperlukan untuk membantu dalam
perancangan SIMPEG sehingga menjadi lebih fokus dengan karakter pengguna
dan kebutuhan mereka pada SIMPEG. Tampilan user persona pada pengguna
SIMPEG dapat dilihat pada lampiran 3 yang meliputi gambar L 3.1 hingga
gambar L 3.7.
3.3. Specify User and Organisational Requirement
3.3.1. Interpretasi
Tahapan interpretasi ini adalah menafsirkan kembali hasil observasi dan
wawancara kontekstual dengan cara menuliskan kembali jawaban pengguna
SIMPEG pada sticky note yang berdasarkan jawaban dari user dan admin
SIMPEG yang ada pada user persona, langkah selanjutnya adalah
menginterpretasikan jawaban tersebut. Pada awalnya dibuat topik terlebih dahulu
seperti kegunaan SIMPEG, proses menggunakan SIMPEG, informasi apa saja
yang dibutuhkan dalam menggunakan SIMPEG, kolaborasi dengan siapa saja,
peralatan yang dibutuhkan, pengguna SIMPEG siapa saja, fitur yang sering
digunakan, kekurangan, dan saran. Kemudian setiap jawaban user dicatat pada
aplikasi sticky notes dan dikelompokkan berdasarkan topik yang sesuai. Berikut
ini adalah tampilan sticky notes yang telah dibuat dapat dilihat pada lampiran 4
yang meliputi gambar L 4.1 hingga gambar L 4.9.
Kemudian dibuat work model secara rinci untuk memahami setiap aspek
yang berguna dalam tahap perancangan desain. Work model yang digunakan
adalah sequence model untuk mengetahui langkah-langkah terperinci yang
dilakukan pengguna SIMPEG untuk menyelesaikan tugasnya. Sequnce model
yang dibuat adalah sequence model login dan pengubahan atau penambahan data
pegawai. Proses login yang berjalan saat ini jika user ingin masuk ke halaman
utama SIMPEG user harus login dengan memasukkan NIP dan password user,
jika NIP dan password benar user akan masuk pada halaman utama SIMPEG.
26
Tetapi jika user salah memasukkan password, user harus menghubungi pihak
BKPSDM via telepon agar mendapatkan password.
Proses pengubahan atau penambahan data pegawai yang berjalan saat ini
adalah user menerima laporan pengubahan atau penambahan data dari pegawai
yang terkait dan setelah itu pegawai terkait membawa bukti pengubahan atau
penambahan data pegawai serta berkas pendukung kemudian user mengecek bukti
dan berkas pendukung itu valid atau tidak, jika data dinyatakan valid user
mengajukan surat usulan pengubahan atau penambahan data kepada pimpinan
instansi. Setelah itu user datang ke kantor BKPSDM untuk menyerahkan semua
bukti dan berkas pendukung pengubahan atau penambahan data pegawai untuk
bisa melakukan perubahan dan jika data pegawai telah diubah user akan
mendapatkan konfirmasi dari BKPSDM via telepon jika data telah di revisi.
Sequence model pada penggunaan SIMPEG dapat dilihat pada lampiran 5 yang
meliputi gambar L 5.1 hingga gambar L 5.2.
3.3.2. Konsolidasi Data
Pada tahapan konsolidasi data ini menganalisa jawaban yang telah dibuat di
stiky notes dengan cara melewatkan jawaban yang sama pada satu topik untuk
menghindari terjadinya pengulangan kata yang memiliki makna yang sama
(redundancy) sehingga mendapat permasalahan secara rinci dan membuat model
kerja dari berbagai aspek yang berbeda dalam bentuk mind map menggunakan
aplikasi FreeMind. Hal ini bertujuan untuk mendapatkan proses kerja, fitur dan
inovasi dari SIMPEG yang disajikan dalam bentuk Affinity Diagram. Adapun
topik yang terdapat pada diagram ini adalah kegunaan, proses, informasi yang
dibutuhkan, kolaborasi, peralatan, pengguna, kekurangan dan saran. Tampilan
affinity diagram dapat dilihat pada lampiran 6 gambar L 6.1.
Tabel 3.1 Tabel Konsolidasi data
No. Kondisi Saat ini Harapan
1. Pengguna tidak bisa melakukan perubahan data
secara langsung.
Pengguna ingin melakukan
perubahan data secara langsung
tanpa datang ke kantor
BKPSDM.
2. Sub menu yang ada pada menu pegawai terlalu
banyak.
Sub menu yang berkaitan satu
sama lain sebaiknya dijadikan 1
(satu) sub menu.
27
No Kondisi Saat Ini Harapan
3. Tidak ada fitur ubah password . Menambah fitur lupa password.
4. Tata letak maupun animasi terlalu monoton. Tata letak diperbarui dan
Menambah animasi yang
menarik agar tidak
membosankan.
5. Menu pada SIMPEG masih belum update mengikuti
SIMPEG Badan Kepegawaian Negara (BKN).
Menu-menu SIMPEG di-update
mengikuti SIMPEG Badan
Kepegawaian Negara (BKN).
Berdasarkan berdasarkan tabel 3.1 ditemukan permasalahan dari bahwa
pengguna tidak bisa melakukan perubahan data secara langsung, sub menu yang
ada pada menu pegawai terlalu banyak sehingga membingungkan pengguna saat
memilih menu pada SIMPEG, tidak ada fitur ubah password saat login sehingga
pengguna jika lupa dengan password harus menghubungi BKPSDM via telepon
atau datang langsung pada kantor BKPSDM, tata letak maupun animasi terlalu
monoton sehingga membosankan pengguna saat menggunakan SIMPEG, dan
menu pada SIMPEG masih belum update mengikuti SIMPEG Badan
Kepegawaian Negara yang menjadi pusat kepegawaian.
Harapan pengguna dari permasalahan diatas adalah pengguna ingin
melakukan perubahan data secara langsung tanpa datang ke kantor BKPSDM,
Sub menu yang berkaitan satu sama lain sebaiknya dijadikan 1 (satu) sub menu,
menambah fitur lupa password, tata letak diperbarui dan menambah animasi yang
menarik agar tidak membosankan pengguna dan menu-menu pada SIMPEG di-
update mengikuti SIMPEG Badan Kepegawaian Negara (BKN). Setelah
mendapatkan permasalahan pada tabel 3.1, selanjutnya melakukan benchmark
terhadap SIMPEG Badan Kepegawai Negara (BKN) untuk mengetahui proses
yang tersedia, sehingga dapat dipelajari dan diterapkan pada SIMPEG Kabupaten
Sumenep untuk membantu permasalahan yang dialami oleh pengguna. Hasil
benchmark SIMPEG dapat dilihat pada tabel 3.2 dan tabel 3.3.
Tabel 3.2 Tabel Hasil Benchmark Aplikasi 1 (Satu)
Aplikasi Login Utama Anjab Pegawai
SIMPEG
Kabupaten
Sumenep
Rumit Rumit Mudah Rumit
SIMPEG BKN Mudah Mudah Mudah Mudah
28
Tabel 3.3 Tabel Hasil Benchmark Aplikasi 2 (Dua)
Aplikasi Statistik Pensiun Ulang
Tahun Akun
SIMPEG
Kabupaten
Sumenep
Mudah Mudah Mudah Mudah
SIMPEG BKN Mudah Mudah Mudah Mudah
Berdasarkan tabel 3.2 dan tabel 3.3 terlihat bahwa untuk proses login pada
SIMPEG BKN memiliki alur proses yang mudah. Hal ini dikarenakan pada proses
login SIMPEG BKN jika pengguna lupa dengan password, pada SIMPEG BKN
terdapat fitur lupa password sehingga mempermudah pengguna untuk
mendapatkan password jika pengguna lupa dengan password-nya. Kemudian
proses halaman utama pada SIMPEG BKN menampilkan menu-menu SIMPEG
pada bagian sisi kiri mengikuti layout aplikasi yang digunakan pengguna sehari-
hari dan untuk proses pegawai SIMPEG Kabupaten Sumenep mempunyai sub
menu yang terlalu banyak dan SIMPEG Kabupaten Sumenep juga belum update
mengikuti SIMPEG BKN, karena seluruh SIMPEG yang ada di Indonesia harus
mengacu pada SIMPEG BKN agar mudah memberi informasi pegawai pada
SIMPEG BKN. Menu-menu pegawai yang ada pada SIMPEG BKN saat ini
adalah sebagai berikut:
1. Sub menu data utama: Tap identitas, tap posisi & jabatan dan tap data
lainnya
2. Sub menu pangkat/golongan.
3. Sub menu peninjauan masa kerja.
4. Sub menu pendidikan.
5. Sub menu jabatan.
6. Sub menu diklat.
7. Sub menu keluarga: Tap keluarga, tap orang tua, tap suami/istri dan tap
anak.
8. Sub menu kursus.
9. Sub menu penghargaan.
10. Sub menu DP3: Tap riwayat DP3, tap pejabat penilai dan tap atasan penilai.
11. Sub menu SKP: Tap riwayat SKP, tap pejabat penilai dan tap atasan penilai.
12. Sub menu hukuman.
29
13. Sub menu cuti: Tap cuti regular dan tap CLTN.
14. Sub menu CPNS/PNS.
15. Sub menu unit organisasi.
16. Sub menu pemberhentian.
17. Sub menu angka kredit.
Hasil dari analisis diatas terdapat 3 hal yang akan dilanjutkan atau menjadi
fokus pembahasan pada tahap berikutnya yakni proses halaman login, halaman
utama dan halaman pegawai.
30
BAB IV
HASIL DAN PEMBAHASAN
4.1. Product Design Solutions
4.1.1. Visioning
Pada tahapan visioning ini merupakan tahap dimana data pengguna yang
telah dikonsolidasikan selanjutnya membuat rancangan atau ide tentang
bagaimana konsep SIMPEG dan dapat mendukung praktik kerja pengguna (H.
Beyer dan K. Holtzblatt, 1999). dimulai dengan meninjau data untuk
mengidentifikasi isu-isu utama pada SIMPEG. Pada tahap visioning ini juga
menghasilkan berbagai konsep produk baru dengan merekayasa skenario atau
keinginan mereka berdasarkan data yang dikumpulkan. Permasalahan berdasar
analisis sebelumnya adalah pada proses halaman login, halaman utama dan
halaman pegawai. Berikut adalah hasil visioning pada permasalahan tersebut:
1. Visioning Halaman Login
Gambar 4.1 Visioning Halaman Login
Pada halaman login SIMPEG sebelumnya terdapat NIP, password dan
tombol login. Jika pengguna lupa dengan password-nya, pengguna menghubungi
pihak BKPSDM via telepon atau datang langsung pada kantor BKPSDM. Gambar
4.1 merupakan tampilan visioning halaman login dari SIMPEG. Pada halaman ini
terdapat icon, logo BKPSDM yang baru, NIP, password, tombol login dan link
31
lupa password. Jika pengguna lupa dengan password-nya pengguna menekan link
lupa password, kemudian pengguna akan diarahkan pada halaman lupa password
dan akan mendapatkan password yang dikirimkan melalui email pengguna yang
telah terdaftar sebelumnya pada SIMPEG.
2. Visioning Halaman Utama
Gambar 4.2 Visioning Halaman Utama
Pada halaman utama SIMPEG sebelumnya, tata letak menu tedapat pada
footer halaman sehingga pengguna tidak terbiasa dengan aplikasi yang menu-nya
terdapat pada footer halaman dan tidak ada animasi saat berpindah halaman.
Gambar 4.1 merupakan tampilan visioning halaman utama dari SIMPEG. Pada
halaman ini terdapat icon, logo, foto profil dari pegawai yang melakukan login,
menu-menu SIMPEG pada bagian sisi kiri halaman dan pada bagian tengah
halaman terdapat halaman kerja pengguna. Visioning dari setiap menu halaman
utama dapat dilihat pada lampiran 7 yang meliputi gambar L 7.1 hingga gambar L
7.6.
4.1.2. Storyboarding
Setelah melakukan tahap visioning dan mendapatkan proses kerja baru user
SIMPEG, selanjutnya mengembangkan visi tersebut kedalam storyboarding
dengan cara memikirkan skenario tentang bagaimana user akan bekerja dengan
SIMPEG yang baru dan memahami alur proses kerja baru dari SIMPEG. Selain
32
itu, storyboard juga membentuk perjalanan user dan karakter (persona) dalam
menggunakan SIMPEG. Dalam proses membuatnya, suatu skenario memuat
karakter dari persona, scenario (scene), alur cerita (plot) dan narasi. Adapun
storyboard dari proses kerja user baru SIMPEG dapat dilihat pada lampiran 8
yang meliputi gambar L 8.1 hingga gambar L 8.2.
4.1.3. User Environment Design (UED)
Setelah diketahui skenario pengguna SIMPEG, selanjutnya akan
dikembangkan rancangan dari lingkungan kerja user pada berbagai tugas yang
dilakukan oleh mereka dalam menggunakan SIMPEG. Pada tahap user
environtment design (UED) ini merencanakan bagaimana dapat mendukung user
saat bekerja pada sistem SIMPEG yang baru. Contextual design menggunakan
user environtment design (UED) diagram dalam memperlihatkan fokus area.
Fokus area dapat didefinisikan lebih lanjut sebagai fungsi dalam sistem yang
mendukung bagian dari pekerjaan user SIMPEG. User environment design (UED)
juga menyajikan bagaimana setiap bagian SIMPEG berhubungan satu sama lain
dan menunjukkan hubungan antar bagian SIMPEG. Adapun user environment
design dari SIMPEG dapat dilihat pada lampiran 9 gambar L 9.1.
4.1.4. Paper Prototype
Setelah membuat user environment design (UED), selanjutnya
dikembangkan dengan membuat paper prototype yang mewakili detail kotak
dialog, tombol, menu, dan elemen-elemen antarmuka apa saja yang akan
digunakan oleh user SIMPEG baru.
1. Paper Prototype Login
Pada gambar 4.3 merupakan paper prototype dari halaman login. Untuk bisa
masuk pada halaman utama SIMPEG, pengguna terlebih dahulu mengisi NIP dan
password kemudian menekan tombol login jika NIP dan password benar
pengguna akan diarahkan pada halaman utama apabila pengguna lupa dengan
password-nya, pengguna menekan link lupa password kemudian pengguna
diarahkan pada halaman lupa password setelah itu pengguna mengisi NIP dan
33
email yang sebelumnya telah terdaftar pada SIMPEG. Kemudian pengguna
diarahkan pada halaman yang konfirmasi jika password telah terkirim pada email
pengguna.
Gambar 4.3 Paper Prototype Login
2. Paper Prototype Halaman Utama
Gambar 4.4 Paper Prototype Halaman Utama
34
Pada gambar 4.4 merupakan paper prototype dari halaman utama. Pada
halaman ini terdapat menu pegawai, menu anjab, menu statistik, menu pensiun,
menu ulang tahun, menu tabel dan menu akun. Selanjutnya jika pengguna ingin
melihat atau mengubah data pribadi pegawai, pengguna dapat memilih menu
pegawai dan akan diarahkan pada halaman menu pegawai. Kemudian jika
pengguna ingin melihat seluruh analisis jabatan pegawai pada kantor tersebut
pengguna memilih menu anjab dan akan diarahkan pada halaman menu anjab.
Setelah itu jika pengguna ingin melihat informasi grafik dari data seluruh
pegawai, pengguna memilih menu statistik dan akan diarahkan pada halaman
menu statistik. Jika pengguna ingin melihat informasi pegawai yang akan pensiun,
pengguna memilih menu pensiun dan akan diarahkan pada halaman menu
pensiun. Kemudian jika pengguna ingin melihat informasi pegawai yang akan
ulang tahun, pengguna memilih menu ulang tahun dan akan diarahkan pada
halaman menu pensiun. Jika pengguna ingin melakukan pengubahan password,
pengguna memilih menu akun dan pengguna akan diarahkan pada menu akun.
Jika pengguna ingin melihat seluruh data pegawai pada kantor tersebut, pengguna
memilih menu tabel dan pengguna akan diarahkan pada menu tabel. Adapun
paper prototype dari setiap menu dapat dilihat pada lampiran 10 yang meliputi
gambar L 10.1 hingga gambar L 10.21.
4.2. Evaluate Design Again Requirement
4.2.1. Evaluasi Paper Prototype
Setelah membuat paper prototype, hasil dari paper prototype tersebut
dicetak dan diujikan kepada pengguna SIMPEG dengan menjelaskan apa saja
menu-menu dan fungsi yang ada pada SIMPEG kepada pengguna. Kemudian
pengguna mencoba memahami paper prototype SIMPEG baru, jika terjadi
kekurangan atau ketidakpahaman peneliti akan langsung memperbaiki
pemahaman atau kesalahan tersebut. Tujuan dari mencetak hasil paper prototype
tersebut agar mempermudah saat memodifikasi permasalahan selama wawancara
dengan pengguna.
35
4.2.2. Prototype
Pada tahap protoype ini, dibuat prototype interaktif dari hasil evaluasi paper
prototype SIMPEG baru. Pembuatan prototype interaktif ini menggunakan
aplikasi experience design (XD) dengan mensimulasikan bagaimana user
berinteraksi dengan user interface (UI) SIMPEG secara nyata dengan menekan
fitur yang digunakan untuk mendapat respon. Warna yang digunakan pada
prototype SIMPEG dapat dilihat pada color schemes dibawah ini.
Gambar 4.5 Color Schemes
Color schemes yang dominan digunakan yaitu warna biru tua (navy) dengan
hexa color #233645. Tujuan dipilihnya warna navy karena warna tersebut
termasuk warna yang tenang, bersifat profesional dan mampu merangsang
pemikiran yang jernih dalam menyelesaikan tugas. Warna tersebut juga cocok
dengan warna logo BKPSDM yang menonjolkan warna putih dan tosca. Color
schemes warna abu-abu muda dengan hexa color #E8E8E9 yang terletak pada sisi
tengah bertujuan untuk mempermudah user dalam melihat dan mengisi data
pegawai.
. Sedangkan untuk font yang digunakan adalah jenis “Nunino Sans”. Font
ini dipilih karena tidak memiliki lengkungan pada bagian bawah sehingga
memudahkan user untuk membaca atau melihat text dengan font tersebut. Font ini
juga terbagi menjadi beberapa macam style yakni extra light, regular, italic, semi
bold, bold, extra bold, dan black. semilight, italic, regular, semibold, bold dan
black yang digunakan dibeberapa kondisi sesuai dengan kebutuhan. Font nunito
sans dapa dilihat pada gambar dibawah ini.
Gambar 4.6 Font Nunino Sans
36
1. Prototype Halaman Login
Halaman login digunakan untuk pengguna yang ingin mengakses SIMPEG.
Pengguna harus mengisi NIP dan password pada textbox yang telah tersedia,
kemudian pengguna menekan tombol login. Sistem akan memverifikasi NIP dan
password yang telah diisi oleh pengguna, jika NIP dan password pengguna
terverifikasi sistem akan menampilkan halaman utama. Prototype halaman login
dapat dilihat pada gambar 4.7.
Gambar 4.7 Prototype Halaman Login
Jika sistem tidak dapat memverifikasi NIP atau password pengguna, sistem
akan menampilkan pesan error “NIP atau Password anda salah”. Prototype login
gagal dapat dilihat pada gambar 4.8.
Gambar 4.8 Prototype Halaman Login Gagal
37
Apabila pengguna lupa dengan password-nya, pengguna menekan link lupa
password dan akan mengarahkan pada halaman lupa password. Halaman lupa
password dapat dilihat pada lampiran 11 yang meliputi gambar L 11.1 hingga
gambar L 11.4.
2. Prototype Halaman Utama
Halaman utama merupakan halaman beranda dari SIMPEG. Pada halaman
utama menampilkan logo BKPSDM, foto, nama, login sebagai apa dan instansi
pengguna yang login pada SIMPEG, terdapat juga menu pegawai, anjab, statistik,
pensiun, ulang tahun, tabel pegawai, logout dan pencarian. Prototype halaman
utama dapat dilihat pada gambar 4.9.
Gambar 4.9 Prototype Halaman Utama
3. Prototype Halaman Pegawai
Halaman pegawai merupakan halaman untuk mengelola profil dari pegawai.
Pada halaman pegawai terdapat sub menu data utama, pangkat/golongan,
peninjauan masa kerja, pendidikan, jabatan, diklat, keluarga, kursus, penghargaan,
DP3, SKP, hukuman displin, cuti, cpns/pns, unit organisasi, pemberhentian dan
angka kredit. Prototype pada sub menu pegawai dapat dilihat pada lampiran 11
yang meliputi gambar L 11.5 hingga gambar L 11.66 dan prototype halaman
utama dapat dilihat pada gambar 4.10.
38
Gambar 4.10 Prototype Halaman Pegawai
4. Prototype Halaman Anjab
Halaman anjab merupakan halaman untuk mengelola analisis jabatan dari
pegawai. Pada halaman anjab terdapat sub menu jabatan, mutasi dan struktur
organisasi. Prototype pada sub menu anjab dapat dilihat pada lampiran 11 yang
meliputi gambar L 11.67 hingga gambar L 11.70 dan prototype halaman anjab
dapat dilihat pada gambar 4.11.
Gambar 4.11 Prototype Halaman Anjab
39
5. Prototype Halaman Statistik
Halaman statistik merupakan halaman untuk menampilkan informasi berupa
grafik berdasarkan golongan ruang, eselon, pendidikan, jenis kelamin, agama,
golongan umur dan tipe pegawai dari data seluruh pegawai yang ada pada instansi
tersebut. Prototype halaman statistik dapat dilihat pada gambar 4.12.
Gambar 4.12 Prototype Halaman Statistik
Jika pengguna ingin mengunduh grafik, pengguna menekan icon unduh dan
sistem akan menampilkan notifikasi jika data berhasil di unduh. Prototype
halaman notifikasi grafik berhasil diunduh dapat dilihat pada gambar 4.13.
Gambar 4.13 Prototype Halaman Notifikasi Grafik Berhasil Diunduh
40
6. Prototype Halaman Pensiun
Halaman pensiun merupakan halaman untuk menampilkan informasi
seluruh pegawai yang akan pensiun pada kantor tersebut. Pada halaman pensiun
terdapat form pencarian untuk mencari pegawai sesuai keinginan, unduh data
tabel pensiun, menampilkan data pegawai pensiun berdasarkan periode bulan
maupun tahun dan juga menampilkan tabel pensiun yang berisi NIP, NIP baru,
nama, nomor badan kepegawaian negara (BKN), tanggal BKN, SK pensiun,
tanggal pensiun, terhitung mulai tanggal (TMT), tanggal lahir, L/P,
golongan/ruang, eselon, jabatan, alamat, masa kerja dan usia. Prototype halaman
pensiun dapat dilihat pada gambar 4.14. Jika pengguna ingin mengunduh tabel
pensiun, pengguna menekan icon unduh dan sistem akan menampilkan notifikasi
jika data berhasil di unduh. Prototype halaman notifikasi tabel pensiun berhasil
diunduh dapat dilihat pada gambar 4.15.
Gambar 4.14 Prototype Halaman Pensiun
Gambar 4.15 Prototype Halaman Notifikasi Tabel Pensiun Berhasil Diunduh
41
7. Prototype Halaman Ulang Tahun
Halaman ulang tahun merupakan halaman untuk menampilkan informasi
seluruh pegawai yang akan ulang tahun pada kantor tersebut. Pada halaman ulang
tahun terdapat form pencarian untuk mencari pegawai sesuai keinginan, unduh
data tabel ulang tahun, menampilkan data pegawai ulang tahun berdasarkan
periode bulan maupun tahun dan juga menampilkan tabel ulang tahun yang berisi
NIP, NIP baru, nama, L/P, tanggal lahir, usia, golongan/ruang dan jabatan.
Prototype halaman pensiun dapat dilihat pada gambar 4.16. Jika pengguna ingin
mengunduh tabel ulang tahun, pengguna menekan icon unduh dan sistem akan
menampilkan notifikasi jika data berhasil di unduh. Prototype halaman notifikasi
table pensiun berhasil diunduh dapat dilihat pada gambar 4.17.
Gambar 4.16 Prototype Halaman Ulang Tahun
Gambar 4.17 Prototype Halaman Notifikasi Tabel Ulang Tahun Berhasil Diunduh
42
8. Prototype Halaman Akun
Halaman akun merupakan halaman untuk mengubah password pengguna
SIMPEG. Pada halaman akun, terlebih dahulu pengguna memasukkan password
lama, kemudian pengguna memasukkan password baru sesuai dengan keinginan
pengguna dan pengguna mengkonfirmasi dengan memasukkan kembali password
baru pengguna setelah itu pengguna menakan tombol simpan untuk menyimpan
password baru pengguna. Prototype halaman akun dapat dilihat pada gambar
4.18.
Gambar 4.18 Prototype Halaman Akun
4.2.3. Evaluasi Prototype
Setelah dilakukan pembuatan prototype dari hasil perubahan evaluasi paper
prototype, maka selanjutnya dilakukan evaluasi prototype untuk memastikan
SIMPEG telah benar–benar memenuhi kebutuhan pengguna dan fungsi yang ada
telah berjalan dengan baik.
4.3. Design Solutionments User Requirement
4.3.1. Perancangan Prototype Akhir
Pada tahap prototype akhir ini dilakukan perbaikan dari hasil evaluasi
prototype dan melakukan rancangan prototype akhir dengan language prototyping
dari hasil akhir analisis dan perancangan SIMPEG.
43
BAB V
PENUTUP
5.1 Kesimpulan
Berdasarkan hasil pembahasan laporan Tugas Akhir ini penulis memberikan
kesimpulan sebagai berikut:
1. Penelitian ini menghasilkan tentang kebutuhan user Sistem Informasi
Kepegawaian (SIMPEG) Badan Kepegawaian dan Pengembangan Sumber
Daya Manusia Kabupaten Sumenep (BKPSDM).
2. Penelitian ini menghasilkan perancangangan user interface dan user
experience Sistem Informasi Kepegawaian (SIMPEG) Badan Kepegawaian
dan Pengembangan Sumber Daya Manusia Kabupaten Sumenep (BKPSDM)
menggunakan User Centered Design (UCD) Based On Contextual Design.
3. User Interface (UI) pada Sistem Informasi Kepegawaian (SIMPEG) Badan
Kepegawaian dan Pengembangan Sumber Daya Manusia Kabupaten
Sumenep (BKPSDM) dibuat berdasarkan kebutuhan user melalui collecting
data, interpretasi, konsolidasi data, visioning, storyboarding, user
environment design dan prototyping.
5.2 Saran
Pada penelitian lanjutan akan dilakukan implementasi rancangan beserta
pengujian usability testing pada pada Sistem Informasi Kepegawaian (SIMPEG)
Badan Kepegawaian dan Pengembangan Sumber Daya Manusia (BKPSDM)
Kabupaten Sumenep.
44
DAFTAR PUSTAKA
Amsyah. 2001. Manajemen Sistem Informasi. Jakarta : PT Gramedia Pustaka
Anggraini, Gita Listya. 2015. Analisis User Experience dan User Interface Pada
Website Job Portal Dengan Pendekatan User-Centered Design dan
GOMS Analisys. Universitas Gadjah Mada.
Cahyaningtyas, R. 2015. Perancangan Sistem Informasi Perpustakaan Pada SMP
Negeri 3 Tulakan, Kecamatan Tulakan Kabupaten Pacitan. Indonesian
Journal on Networking and Security, Volume 4 No 2, 17. Pasuruan.
Cheng, N. 2014. Internet. What is UX Research and Why Should I Care?.
http://chaione.com/what-is-ux-research-and-whyshould-i-care/. Diakses
pada tanggal 15 agustus 2019.
Darmawan, Deni. 2013. Metode Penelitian Kuantitatif. Bandung: PT Remaja
Rosdakarya.
Deborah J. Mayhew. 1999. General Principles of UI Design. USA : Elvesier
Scient.
Garrett, J J. 2011. The Elements of User Experience: User-Centered Design for
the Web and Beyond, Second Edition. Berkeley: California: New Riders.
H. Beyer and K. Holtzblatt. 1999. Contextual design Envolved. Morgan &
Claypool.
H. Karen, J. B. Wendell, and W. Shelley. 2005. Rapid Contextual design: A How-
To Guide to Key Techniques for User-Centered Design. San Fransisco :
Morgan Kaufmann
Intetics Inc. 2017. Internet. “The Main Steps of The User Interface Design”.
https://intetics.com/blog/the-main-steps-of-the-user-interface-design.
Diakses pada tanggal 23 September 2019.
International Organization for Standardization. 2010. ISO 9241-210: 2010 Human
Centered Design Process for Interactive Systems. Swiszerland :
International Organization for Standardization.
Jogiyanto. 2009. Sistem Teknologi Informasi. Yogyakarta: Andi.
Keputusan Menteri Dalam Negeri No. 17 Tahun 2000 tentang Sistem Informasi
Manajemen Kepegawaian.
45
Kurnia, D. A. 2013. Sistem Informasi Manajemen Perpustakaan Untuk
Meningkatkan Kualitas Layanan. Jurnal Online ICT STMIK IKMI, Vol. 10,
23. Cirebon.
Latiansah, S. 2012. Pengertian User Interface. Jakarta : PT. Elex Media
Komputindo.
Mulia, Atikah Hayyu. 2016. Pengembangan Antarmuka Aplikasi Astofit Dengan
Pendekatan User Centered Design. Malang: Universitas Brawijaya.
Norman, D. A. 2002. The Design of Everyday Things (Reprint ed). New York:
Basic Books.
Patrick, W. Jordan. 2002. Designing Pleasure Product: An Introduction to the
New Human Factors. CRC press.
Ritter, F.E., Baxter, G.D, Churchill, E.F. 2014. “Foundations for Designing User-
Cencered Systems”, Springer. London. Page 47-50.
Rogers, Y., Sharp, H., & Preece, J. 2011. Interaction Design: Beyond Human -
Computer Interaction (3rd Edition). Wiley.
Simatupang, Riko Mangasi. 2014. Penerapan Metode User Centered Design
Untuk Perancangan Aplikasi Radio Streaming Berbasis Web. Informasi
dan Teknologi Ilmiah (INTI) Volume III 1-5.