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.