perancangan desain user interface dan user...

95

Click here to load reader

Upload: dinhhuong

Post on 06-Jun-2019

289 views

Category:

Documents


9 download

TRANSCRIPT

Page 1: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

PERANCANGAN DESAIN USER INTERFACE DAN USER

EXPERIENCE PADA APLIKASI SIAKAD DENGAN

MENGGUNAKAN METODE USER CENTERED DESIGN (UCD)

PADA UNIVERSITAS ISLAM NEGERI SUNAN AMPEL

SURABAYA

TUGAS AKHIR

Program Studi S1 Sistem Informasi Oleh: AHMAD IQBAL YUNUS 14.41010.0068

FAKULTAS TEKNOLOGI DAN INFORMATIKA INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA 2018

Page 2: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

PERANCANGAN DESAIN USER INTERFACE DAN USER EXPERIENCE PADA APLIKASI SIAKAD DENGAN

MENGGUNAKAN METODE USER CENTERED DESIGN (UCD) PADA UNIVERSITAS ISLAM NEGERI SUNAN AMPEL

SURABAYA

TUGAS AKHIR

Diajukan sebagai salah satu syarat untuk menyelesaikan

Program Sarjana

Disusun Oleh

Nama : Ahmad Iqbal Yunus

NIM : 14.41010.0068

Program : S1 (Strata Satu)

Jurusan : Sistem Informasi

FAKULTAS TEKNOLOGI DAN INFORMATIKA

INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA

2018

Page 3: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi
Page 4: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi
Page 5: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

iii

“Lebih baik menerangi seseorang daripada hanya sekedar bersinar,

membawa seseorang kepada renungan kebenaran daripada

merenungi kesalahan

Page 6: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

v

ABSTRAK

SIAKAD adalah aplikasi sistem informasi akademik berbasis web dengan

tujuan memberikan informasi seputar akademik kepada mahasiswa. Aplikasi

SIAKAD yang beralamat http://siakad.uinsby.ac.id. Jumlah pengunjung aplikasi

SIAKAD hanya meningkat pada saat perwalian. Hal ini dikarenakan informasi

yang terdapat pada SIAKAD kurang lengkap. Selain itu terdapat beberapa

permasalahan antara lain pergantian satu halaman ke halaman lain membutuhkan

waktu yang lama, penggunaan aplikasi SIAKAD sangat jelas dan mudah

digunakan, sistem hanya memuat halaman yang dibutuhkan pengguna, aplikasi

SIAKAD mempunyai tampilan yang menarik, sistem mempunyai kecepatan akses

yang memadai, sistem memiliki kecepatan download yang bagus.

Solusi dari masalah ini adalah merancang desain antarmuka

pengguna/pengalaman pengguna dengan metode User Centered Design, yang

terdiri dari memahami dan menentukan konteks pengguna, menspesifikasikan

kebutuhan pengguna, membuat perbaikan rancangan antarmuka pengguna dan

mengevaluasi hasil rancangan desain baru.

Hasil penelitian ini adalah perancangan desain user interface dan user

experience yang baru terdiri dari fitur: menu dropdown, form materi, menu

tambahan pada bagian kiri tidak ditampilkan, perbaikan disetiap menu,

mempunyai akses yang memadai dan mempunyai kecepatan download yang

kurang baik.

Kata Kunci : Sistem Informasi Akademik (SIAKAD), User Centered Design

(UCD), User Interface, User Experience.

Page 7: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

vi

KATA PENGANTAR

Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa yang telah

memberikan rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan

Tugas Akhir dengan judul “Perancangan Desain User Interface Dan User

Experince Pada Aplikasi SIAKAD Dengan Menggunakan Metode User Centered

Design (UCD) pada Universitas Islam Negeri Sunan Ampel Surabaya”.

Tugas Akhir ini dibuat dalam rangka memenuhi salah satu syarat

memperoleh gelar Sarjana Strata 1 (S1), Fakultas Teknologi dan Informatika

STIKOM Surabaya, Program Studi Sistem Informasi. Dalam penyusunan Tugas

Akhir ini tidak lepas dari bantuan banyak pihak yang benar-benar telah

memberikan masukan, motivasi, dan dukungan kepada penulis. Untuk ini penulis

mengucapkan banyak terima kasih kepada:

1. Kedua orang tua tercinta yang selalu memberikan dukungan serta mendoakan

keberhasilan dan keselamatan selama menempuh pendidikan.

2. Ibu Sulistiowati, S.Si., M.M selaku dosen pembimbing yang telah

meluangkan waktu untuk memberikan bimbingan selama proses pembuatan

laporan Tugas Akhir.

3. Ibu Tan Amelia, S.Kom., M.MT selaku dosen pembimbing yang telah

meluangkan waktu untuk memberikan bimbingan selama proses pembuatan

laporan Tugas Akhir.

4. Teman-teman kampus yang ikut membantu dalam memberikan dukungan

saran, doa serta motivasi yang membuat penulis bersemangat dalam

menyelesaikan laporan Tugas Akhir.

Page 8: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

vii

5. Semua pihak yang tidak dapat penulis sebutkan satu persatu yang telah

membantu dalam penyelesaian penulisan laporan Tugas Akhir ini.

Semoga Tuhan Yang Maha Esa memberikan balasan yang setimpal

kepada semua pihak yang telah memberikan bantuan, bimbingan, dan nasehat.

Penulis menyadari bahwa Tugas Akhir yang dikerjakan masih banyak

kekurangan. Sehingga kritik dan saran dari semua pihak sangatlah diharapkan

agar aplikasi ini dapat lebih baik lagi di kemudian hari. Semoga laporan Tugas

Akhir ini dapat diterima dan bermanfaat bagi penulis dan semua pihak.

Surabaya, Agustus 2018

Penulis

Page 9: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

viii

DAFTAR ISI

Halaman

ABSTRAK ...............................................................................................................v

KATA PENGANTAR ........................................................................................... vi

DAFTAR ISI ........................................................................................................ viii

DAFTAR TABEL ....................................................................................................x

DAFTAR GAMBAR ............................................................................................. xi

DAFTAR LAMPIRAN ..........................................................................................xv

BAB I PENDAHULUAN .....................................................................................1

1.1 Latar Belakang .................................................................................... 1

1.2 Perumusan Masalah ............................................................................. 3

1.3 Batasan Masalah .................................................................................. 3

1.4 Tujuan .................................................................................................. 4

1.5 Manfaat ................................................................................................ 4

1.6 Sistematika Penulisan .......................................................................... 4

BAB II LANDASAN TEORI ................................................................................6

2.1 Sistem Informasi Akademik ................................................................ 6

2.2 Website ................................................................................................ 6

2.3 Perancangan ........................................................................................ 7

2.4 User Interface ...................................................................................... 7

2.5 User Experience .................................................................................. 9

2.6 User Centered Design ........................................................................ 12

2.7 WEBUSE .......................................................................................... 13

Page 10: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

ix

2.7.1 Kriteria Evaluasi Kuisioner ..................................................... 15

2.8 Populasi Dan Sampel ........................................................................ 18

2.8.1 Populasi ................................................................................. 18

2.8.2 Sampel ................................................................................... 18

2.9 Uji Validitas ...................................................................................... 19

2.10 Uji Reliabilitas ................................................................................. 19

2.11 Penentuan Warna Dalam User Interface ......................................... 20

BAB III METODOLOGI PENELITIAN............................................................... 22

3.1 Tahap Awal Penelitian ...................................................................... 23

3.1.1 Wawancara Dan Observasi.................................................... 23

3.1.2 Studi Literatur ........................................................................ 33

3.1.3 Evaluasi Desain Lama ........................................................... 34

3.1.4 Uji Validitas dan Reliabilitas ................................................ 36

3.1.5 Analisis Deskriptif ................................................................. 37

BAB IV PEMBAHASAN ......................................................................................39

4.1 Tahap Perancangan ........................................................................... 39

4.1.1 Memahami Dan Menentukan Konteks Pengguna ................. 39

4.1.2 Menspesifikasikan Kebutuhan Pengguna .............................. 39

4.1.3 Membuat Perbaikan Rancangan Antarmuka Pengguna ........ 40

4.1.4 Evaluasi Hasil Perbaikan Rancangan .................................... 69

BAB V PENUTUP.................................................................................................77

5.1 Kesimpulan ........................................................................................ 77

5.2 Saran .................................................................................................. 77

DAFTAR PUSTAKA ............................................................................................78

LAMPIRAN ........................................................... Error! Bookmark not defined.

BIODATA PENULIS ............................................ Error! Bookmark not defined.

Page 11: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

x

DAFTAR TABEL

Halaman

Tabel 1.1 Grafik Pengunjung .................................................................................. 1

Tabel 2.1 Kriteria usability dan keterkaitan kategori usability ............................. 15

Tabel 3.1 Uji Validitas .......................................................................................... 36

Tabel 3.2 Uji Reliabilitas ...................................................................................... 37

Tabel 4.1 User Story ............................................................................................. 42

Tabel 4.2 Uji Validitas .......................................................................................... 70

Tabel 4.3 Uji Reliabilitas ...................................................................................... 71

Page 12: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

xi

DAFTAR GAMBAR

Halaman

Gambar 1.1 Statistik Pengunjung Website SIAKAD ............................................. 2

Gambar 2.1 User Centered Design........................................................................ 12

Gambar 3.1 Tahapan – Tahapan Metodologi Penelitian ....................................... 22

Gambar 3.2 Tampilan Menu Home ..................................................................... 24

Gambar 3.3 Daftar Modul ..................................................................................... 25

Gambar 3.4 Biodata Mahasiswa ........................................................................... 25

Gambar 3.5 Publikasi IAIN .................................................................................. 26

Gambar 3.6 Forum Materi..................................................................................... 26

Gambar 3.7 Forum Tugas ..................................................................................... 26

Gambar 3.8 Forum Diskusi ................................................................................... 27

Gambar 3.9 Data Kurikulum ................................................................................. 27

Gambar 3.10 Kartu Rencana Studi (KRS) ............................................................ 28

Gambar 3.11 Jadwal Kuliah .................................................................................. 28

Gambar 3.12 Absensi ............................................................................................ 29

Gambar 3.13 Skripsi ............................................................................................. 29

Gambar 3.14 Konsultasi Mahasiswa ..................................................................... 30

Gambar 3.15 Kartu Hasil Studi (KHS) ................................................................. 30

Gambar 3.16 Kemajuan Belajar ............................................................................ 31

Gambar 3.17 Daftar Nilai ...................................................................................... 31

Gambar 3.18 Transkrip ......................................................................................... 32

Gambar 3.19 Riwayat Mengulang ........................................................................ 32

Page 13: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

xii

Gambar 3.20 Keuangan ......................................................................................... 33

Gambar 3.21 Tabulasi Data .................................................................................. 35

Gambar 3.22 Hasil Analisis Deskriptif ................................................................. 38

Gambar 4.1 User Persona Mahasiswa UINSA ..................................................... 41

Gambar 4.2 Sitemap .............................................................................................. 42

Gambar 4.3 Home ................................................................................................. 43

Gambar 4.4 SIM .................................................................................................... 43

Gambar 4.5 Biodata Mahasiswa ........................................................................... 44

Gambar 4.6 Publikasi IAIN .................................................................................. 45

Gambar 4.7 Forum Materi..................................................................................... 45

Gambar 4.8 Forum Tugas ..................................................................................... 46

Gambar 4.9 Forum Diskusi ................................................................................... 46

Gambar 4.11 Kurikulum Jurusan .......................................................................... 47

Gambar 4.12 Data Kelas Sebaran ......................................................................... 47

Gambar 4.13 Jadwal Ujian Tengah Semester (UTS) ............................................ 48

Gambar 4.14 Ujian Akhir Semester (UAS) .......................................................... 48

Gambar 4.15 Kartu Rencana Studi (KRS) ............................................................ 49

Gambar 4.16 Jadwal Kuliah .................................................................................. 49

Gambar 4.17 Absensi ............................................................................................ 50

Gambar 4.18 KKN ................................................................................................ 50

Gambar 4.19 Skripsi ............................................................................................. 50

Gambar 4.20 Form Yudisium ............................................................................... 51

Gambar 4.21 Konsultasi Mahasiswa ..................................................................... 51

Gambar 4.22 Sisa Matakuliah ............................................................................... 52

Page 14: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

xiii

Gambar 4.23 Kartu Hasil Studi (KHS) ................................................................. 52

Gambar 4.24 Kemajuan Belajar ............................................................................ 53

Gambar 4.25 Daftar Nilai ...................................................................................... 53

Gambar 4.26 Daftar Nilai ...................................................................................... 54

Gambar 4.27 Riwayat Mengulang ........................................................................ 55

Gambar 4.28 Keuangan ......................................................................................... 55

Gambar 4.29 Tampilan Home ............................................................................... 56

Gambar 4.30 Daftar Modul ................................................................................... 56

Gambar 4.31 Biodata Mahasiswa ......................................................................... 57

Gambar 4.32 Publikasi IAIN................................................................................. 58

Gambar 4.33 Forum Materi................................................................................... 58

Gambar 4.34 Forum Tugas ................................................................................... 58

Gambar 4.35 Forum Diskusi ................................................................................. 59

Gambar 4.36 Pesan ............................................................................................... 59

Gambar 4.37 Data Kurikulum ............................................................................... 60

Gambar 4.38 Data Kelas Sebaran ......................................................................... 60

Gambar 4.39 Jadwal Ujian Tengah Semester (UTS) ............................................ 61

Gambar 4.40 Jadwal Ujian Akhir Semester (UAS) .............................................. 61

Gambar 4.41 Kartu Rencana Studi (KRS) ............................................................ 62

Gambar 4.42 Jadwal Kuliah .................................................................................. 62

Gambar 4.43 Absensi ............................................................................................ 63

Gambar 4.44 Kuliah Kerja Nyata (KKN) ............................................................. 63

Gambar 4.45 Skripsi ............................................................................................. 63

Gambar 4.46 Form Yudisium ............................................................................... 64

Page 15: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

xiv

Gambar 4.47 Konsultasi Mahasiswa ..................................................................... 64

Gambar 4.48 Sisa Matakuliah ............................................................................... 65

Gambar 4.49 Kartu Hasil Studi (KHS) ................................................................. 65

Gambar 4.50 Kemajuan Belajar ............................................................................ 66

Gambar 4.51 Daftar Nilai ...................................................................................... 66

Gambar 4.52 Transkrip ......................................................................................... 67

Gambar 4.53 Riwayat Mengulang ........................................................................ 68

Gambar 4.54 Keuangan ......................................................................................... 68

Gambar 4.55 Tabulasi Data .................................................................................. 69

Gambar 4.56 Analisis Deskriptif........................................................................... 72

Gambar 4.57 Menu Dropdown ............................................................................. 72

Gambar 4.58 Form Materi .................................................................................... 73

Gambar 4.59 Tampilan Menu ............................................................................... 74

Gambar 4.60 Jadwal Matakuliah........................................................................... 75

Gambar 4.62 Jadwal UTS/UAS ............................................................................ 75

Gambar 4.61 Pembayaran UKT ............................................................................ 76

Gambar 4.63 Sisa Matakuliah ............................................................................... 76

Page 16: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

xv

DAFTAR LAMPIRAN Halaman

Lampiran 1 Form Kartu Bimbingan ....................... Error! Bookmark not defined.

Page 17: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Universitas Islam Negeri Sunan Ampel Surabaya adalah salah satu

perguruan tinggi Negeri di Surabaya yang telah menerapkan sistem teknologi

informasi. Universitas Islam Negeri Sunan Ampel Surabaya berdiri pada tahun

1965. Salah satu layanan teknologi informasi yang ada di Universitas Islam

Negeri Sunan Ampel Surabaya adalah Sistem Informasi Akademik (SIAKAD).

SIAKAD adalah aplikasi sistem informasi akademik berbasis web dengan tujuan

memberikan informasi seputar akademik kepada mahasiswa. Dengan adanya

SIAKAD mahasiswa dapat mengetahui informasi yang berkaitan dengan

akademik kampus seperti biodata mahasiswa, publikasi IAIN, forum kelas, pesan,

kurikulum jurusan, kuliah semester, Kartu Rencana Studi (KRS), jadwal kuliah,

absensi, skripsi, form yudisium, konsultasi mahasiswa, Kartu Hasil Studi (KHS),

kemajuan belajar, daftar nilai, transkrip, riwayat mengulang, dan keuangan.

Aplikasi SIAKAD yang beralamat http://siakad.uinsby.ac.id berdasarkan

traffic pengunjung website SIAKAD selama satu tahun terakhir yaitu:

Tabel 1.1 Grafik Pengunjung Bulan Pengunjung Maret 2017 28768 Apr-17 13961 Mei 2017 16899 Juni 2017 37285 Juli 2017 307085 Agustus 2017 203752 Sep-17 90665 Oktober 2017 23166 Nov-17 16563 Desember 2017 31370

Page 18: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

2

Bulan Pengunjung Januari 2018 347530 Febuari 2018 222945 Maret 2018 26069

Dari data diatas terlihat pada saat perwalian terjadi peningkatan

pengunjung yaitu pada bulan Juli mencapai 307085 pengunjung dan Januari

mencapai 347.530 pengunjung, sedangkan pada saat perkuliahan biasa

pengunjung tidak terlalu banyak pada saat perwalian.

Gambar 1.1 Statistik Pengunjung Website SIAKAD

(Sumber: Pusat Teknologi Informasi dan Pangkalan Data (PUSTI PD)) Hasil wawancara dengan pihak Pusat Teknologi Informasi dan Pangkalan

Data (PUSTI PD) Universitas Islam Negeri Sunan Ampel Surabaya bahwa

banyaknya pengunjung pada bulan Juli dan Januari dikarenakan adanya perwalian

oleh mahasiswa yang menggunakan aplikasi SIAKAD untuk melihat informasi

Kartu Rencana Studi (KRS) yang telah disetujui oleh dosen wali, Selanjutnya

pada bulan Maret, April, Mei, Juni, Agustus, September, Oktober November,

Desember, Februari dan Maret diketahui terjadi penurunan jumlah pengunjung

dikarenakan berkurangnya intensitas penggunaan aplikasi SIAKAD oleh

Page 19: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

3

mahasiswa. Penggunaan aplikasi SIAKAD tidak sebanyak pada saat waktu

perwalian atau menjelang pergantian semester. Dari hasil wawancara dengan 45

mahasiswa yang telah menggunakan aplikasi SIAKAD dapat melihat jadwal

informasi kuliah, transkrip nilai dan KHS, melihat informasi nilai, namun 45

mahasiswa mengeluhkan tampilan aplikasi yang kurang menarik sehingga

mahasiswa enggan menggunakan aplikasi SIAKAD dalam sehari – hari.

Oleh karena itu dalam Tugas Akhir ini dilakukan penelitian untuk

merancang Desain User Interface dan User Experience Sistem Informasi

Akademik (SIAKAD) dengan menggunakan metode User Centered Design

(UCD) pada Universitas Islam Negeri Sunan Ampel Surabaya. Dengan adanya

penelitian ini, membuat aplikasi SIAKAD menjadi lebih menarik baik dari segi

Design Interface dan User Experience yang sesuai dengan kebutuhan pengguna.

1.2 Perumusan Masalah

Berdasarkan latar belakang masalah di atas, maka rumusan masalah pada

penelitian ini adalah bagaiamana cara merancang User Interface dan User

Experience pada aplikasi SIAKAD dengan menggunakan metode User Centered

Design (UCD) pada Universitas Islam Negeri Sunan Ampel Surabaya.

1.3 Batasan Masalah

Batasan masalah pada penelitian ini adalah sebagai berikut:

1. Ujicoba dilakukan terhadap 45 mahasiswa pengguna aplikasi SIAKAD.

2. Proses yang digunakan dalam merancang User Interface dan User

Experince berdasarkan metode User Centered Design (UCD), karena

metode tersebut dapat membantu untuk mengidentifikasi agar dapat

ditemukan solusinya.

Page 20: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

4

1.4 Tujuan

Berdasarkan latar belakang yang telah diuraikan diatas maka dapat

dituliskan tujuannya adalah sebagai berikut:

1. Menghasilkan rancangan User Interface dan User Experience pada

aplikasi SIAKAD dengan menggunakan metode User Centered Design

(UCD).

1.5 Manfaat

Manfaat pada penelitian ini adalah sebagai berikut:

1. Memperbaiki tampilan aplikasi SIAKAD dengan adanya Visual

Interface aplikasi yang menarik.

2. Memaksimalkan interaksi pengguna terhadap aplikasi SIAKAD agar

dapat digunakan dengan memberikan User Experience yang mudah

dipahami.

1.6 Sistematika Penulisan

Untuk memudahkan di dalam memahami permasalahan dan

pembahasannya, maka penulisan Laporan Tugas Akhir ini dibuat dengan

sistematika sebagai berikut:

BAB I PENDAHULUAN

Pada BAB I membahas tentang latar belakang masalah, perumusan

masalah, batasan masalah, tujuan, manfaat, serta sistematika penulisan laporan.

BAB II LANDASAN TEORI

Pada BAB II berisi teori – teori pengunjung yang digunakan untuk

menyelesaikan Tugas Akhir. Teori – teori penunjang antara lain sistem informasi

Page 21: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

5

akademik, website, perancangan, User Interface, User Experience, User Centered

Design, webuse, kriteria evaluasi kuisioner, populasi dan sampel, uji validitas dan

uji reliabilitas.

BAB III METODOLOGI

Pada BAB III membahas tentang metode penelitian, tahap awal, tahap

perancangan, dan tahap akhir.

BAB IV PEMBAHASAN

Pada bab IV menjelaskan tentang hasil penelitian dan pembahasan dari

hasil kuisioner, kemudian dilakukan uji validitas dan realibilitas menggunakan

perangkat lunak SPSS, dan untuk perancangan desain dengan bantuan perangkat

lunak Experince Desain (XD).

BAB V PENUTUP

Pada BAB V menjelaskan uraian dari kesimpulan hasil analisis dan

pembahasan yang telah dilakukan, beserta rekomendasi yang dapat digunakan

untuk perbaikan dan pengembangan yang dilakukan di masa mendatang.

Page 22: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

6

BAB II

LANDASAN TEORI

2.1 Sistem Informasi Akademik

Menurut Agustin (2012) kata akademik berasal dari serapan bahasa

Inggris, yaitu academy. Secara harfiah, kata academy berarti sekolah, yang juga

dapat diartikan sebagai segala sesuatu yang berhubungan dengan proses

penunjang kegiatan sekolah atau lembaga pendidikan beserta pelaku didalamnya.

Berdasarkan pada pengertian akademik di atas, maka sistem informasi akademik

adalah segala macam hasil interaksi antara elemen di lingkungan akademik untuk

menghasilkan informasi yang kemudian dijadikan landasan pengambilan

keputusan, melaksanakan tindakan, baik oleh pelaku proses itu sendiri maupun

dari pihak luar.

2.2 Website

Menurut Rudianto (2011) Website atau disingkat dengan web merupakan

sekumpulan halaman yang terdiri dari beberapa laman yang berisi informasi

dalam bentuk digital baik itu teks, gambar, animasi yang disediakan melalui jalur

internet sehingga dapat diakses dari seluruh dunia. Website dapat dibagi menjadi

2 jenis, yaitu :

1. Website Statis:

Merupakan web yang halamannya tidak berubah, biasanya untuk

melakukan perubahan yang dilakukan secara manual dengan mengubah kode.

Website statis informasinya merupakan informasi satu arah, yakni hanya

berasal dari pemilik softwarenya saja, hanya bisa diperbarui oleh pemiliknya

saja. Contoh website statis ini, yaitu profil perusahaan.

Page 23: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

7

2. Website Dinamis:

Merupakan web yang halaman selalu update, biasanya terdapat halaman

backend (halaman administrator) yang digunakan untuk menambah atau

mengubah konten. Web dinamis membutuhkan database untuk menyimpan.

Website dinamis mempunyai arus informasi dua arah, yakni berasal dari

pengguna dan pemilik, sehingga pembaruan dapat dilakukan oleh pengguna

dan juga pemilik website.

2.3 Perancangan

Perancangan sistem informasi adalah sebuah kegiatan merancang dan

menentukan cara mengolah sistem informasi dari hasil analisa sistem sehingga

dapat memenuhi kebutuhan dari pengguna termasuk diantaranya perancangan

User Interface, data dan aktivitas proses (o’brien dan marakas, 2009:639).

Perancangan adalah sebuah proses untuk mendefinisikan sesuatu yang

akan dikerjakan dengan mengunakan teknik yang bervariasi serta didalamnya

melibatkan deskripsi mengenai arsitektur serta detail mengenai komponen dan

juga keterbatasan yang akan dialami dalam proses pengerjaannya (Rizky, 2011).

Perancangan adalah proses pengembangan spesifikasi baru berdasarkan

rekomendasi hasil analisis sistem (Subhan, 2012).

2.4 User Interface

User Interface merupakan bagian dari sistem informasi yang perlu

interaksi dari pengguna untuk membuat input dan output. Menjelaskan bahwa

sebuah sistem informasi baru mempengaruhi banyak dari sistem informasi yang

ada lainnya, dan analisis harus memastikan bahwa semua bekerja bersama-sama.

Sistem juga harus berinteraksi dengan pengguna baik di dalam maupun di luar

Page 24: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

8

organisasi. User Interface yang lebih dari sekedar layar, itu adalah serangkai

tampilan grafis yang dapat dimengerti oleh pengguna dalam menggunakan sistem,

konseptual dan fisik (Satzinger, Jackson, & Burd, 2010). Dari penjelasan tersebut

User Interface mempunyai peran yang penting dalam efektivitas suatu sistem

informasi. Pembuatan User Interface bertujuan untuk menjadikan teknologi

informasi tersebut mudah digunakan oleh pengguna, adapun langkah-langkah

membuat User Interface (intentics inc, 2017):

1. User Research

User Research adalah tahapan untuk mengetahui kebutuhan user atau

calon user. Salah satu cara untuk mengetahui kebutuhan user adalah dengan

wawancara.

2. Design and Prototyping

Design and Prototyping adalah mulai dari sketsa sederhana dan wireframes

yang rendah kesetiaan dan melanjutkan wireframes, mockups, and prototypes.

a. Wireframes

Sebuah wireframe adalah sketsa dari sistem yang akan dibangun.

Wireframes harus mengklarifikasi dengan tepat elemen apa yang menyadari

fitur yang berbeda di semua halaman atau layar produk masa depan tetapi

tanpa detail lengkap.

b. Prototypes

Sebuah prototipe dalam hal ini, adalah tata letak semi-fungsional yang dapat

memberikan pratinjau kesetiaan yang tinggi dari fungsi antarmuka

pengguna aplikasi atau situs web (front-end) yang sebenarnya. Sementara

prototipe mungkin tidak memiliki fungsionalitas penuh, itu umumnya

Page 25: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

9

memberikan pelanggan dan / atau pengguna akhir kemampuan untuk

mengklik di sekitar elemen antarmuka dan menyimulasikan cara aplikasi

benar-benar akan berfungsi. Prototipe mungkin atau mungkin tidak

termasuk elemen desain yang lengkap. Pada tahap ini, kita dapat

mendemonstrasikan dan mendiskusikan setelah demonstrasi tidak hanya

elemen apa yang menampilkan fitur produk, tetapi bagaimana mereka dapat

bekerja. Ini membantu untuk menguji ide dan membuat beberapa perubahan

pada tahap awal proyek. Prototipe dapat dengan mudah direvisi, lebih rumit

dari pada wireframes tetapi jauh lebih mudah dari pada produk akhir. Jadi,

membuat prototipe juga dapat meningkatkan efisiensi proses pengembangan

perangkat lunak.

c. Mockups

Untuk menghasilkan Mockups setelah meninjau wireframes (tetapi bukan

sebaliknya wireframes) adalah keputusan yang tepat. Model mockup

menunjukkan semua grafik, tipografi, warna dan elemen halaman lainnya.

Mockup biasanya hanya file gambar.

3. Evaluation

Seperti yang bisa kita lihat, evaluasi harus dimasukkan dalam semua tahap

proses desain. Tujuan utama dari tahap evaluasi adalah untuk menilai kualitas

suatu desain, tidak dalam abstrak, tetapi bagaimana hal itu sesuai dengan

kebutuhan pengguna dan menampilkan semua fitur produk.

2.5 User Experience

Menurut definisi dari ISO 9241-210, User Experience adalah persepsi

seseorang dan responnya dari penggunaan sebuah sistem, produk, dan jasa. User

Page 26: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

10

Experience merupakan ilmu yang mengkaji tentang apa yang dirasakan oleh

pengguna dalam menggunakan sistem sehingga mendapatkan kepuasan setelah

menggunakannya.

Sedangkan menurut Garrett (2011) User Experience bukanlah tentang

cara kerja dari suatu produk atau layanan yang ada. Tetapi bagaimana interaksi

antara user dengan produk, seperti pengalaman pengguna (User Experience)

dalam menggunakan produk, apakah mudah digunakan, sesederhana apa dalam

mengoperasikan produk atau layanan hingga pengalaman untuk menemukan,

menyerap dan memahami informasi yang tersedia. Hal ini penting karena ketika

sebuah produk sedang dikembangkan, biasanya lebih memperhatikan apa yang

dilakukannya atau dikembangkan. Sedangkan Pengalaman pengguna User

Experience adalah sisi lain yang sering diabaikan, baik dalam segi persamaan

hingga bagaimana cara kerjanya. Padahal User Experience dapat membuat

perbedaan antara produk yang sukses dan gagal, adapun terdapat langkah-langkah

User Experience (Thai lam, 2016):

1. Melakukan wawancara terhadap pengguna

User Research adalah tahapan untuk mengetahui kebutuhan user

atau calon user. Salah satu cara untuk mengetahui kebutuhan user adalah

dengan wawancara.

2. Membuat User Persona

User persona adalah dokumentasi yang berisi penjelasan tentang

karakteristik user digabungkan dengan tujuan, kebutuhan dan

ketertarikannya yang menjadi target user yang didapatkan dari hasil

penelitian tentang user yang sesuai target.

Page 27: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

11

3. Membuat user story / site map

User story adalah kita akan menggunakan kertas atau sticky note

sebagai media diskusi dimana pada user story kita hanya menggunakan

deskripsi sederhana yang berfokus kepada user goal ketimbang system

goal.

Site map Sitemap adalah sebuah peta yang berisi berbagai macam

direktori yang terdapat dalam sebuah website/blog. Istilah yang lebih

sederhana adalah daftar isi. Semua artikel/konten yang telah dibuat akan

terlihat dalam sitemap dalam tampilan lebih simpel. Pastinya ini sangat

penting untuk sebuah website/blog karena tanpa adanya ini pembaca akan

kesulitan untuk menemukan informasi yang dicari.

4. Mulai membuat wireframes dan interaksi prototipe desain

Wireframe adalah kerangka dasar dalam merancang sebuah

aplikasi/website yang akan kita buat. Ini merupakan tahap paling penting

sebelum membuat sebuah aplikasi/website seutuhnya. Karena pada tahap

ini pembahasan tentang fitur, konten, interface dan elemen penting lainnya

dibahas dengan detail. Begitu juga dengan alur kerja dari sebuah

aplikasi/website tersebut. Sehingga dalam proses pengerjaan tahap

berikutnya tidak mengalami kebingungan dan menyimpang dari tujuan

awal. Sementara itu, untuk pembuatan wireframe yaitu menggunakan

adobe xd (experience design).

User Experience bukan hanya apa yang pengguna lihat, bukan

hanya menghasilkan desain yang menarik untuk dipandang, namun dapat

menjawab mengapa desain tersebut seperti itu, desain yang mampu

Page 28: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

12

membuat perasaan pengguna nyaman ketika berhasil memperoleh

tujuannya pada saat menggunakan produk atau aplikasi.Karena terdapat

beberapa hal yang perlu dipelajari untuk dapat membuat User Experience

yang baik dan sesuai maka disebut sebagai User Experience Designer.

2.6 User Centered Design

Menurut Simatupang (2014) User Centered Design (UCD) merupakan

paradigma baru dalam pengembangan sistem berbasis website. Konsep dari User

Centered Design (UCD) adalah pengguna sebagai pusat dari proses

pengembangan sistem dan tujuan atau sifat-sifat, konteks serta lingkungan sistem

semua didasarkan dari pengalaman pengguna. Tujuan dilakukan pendekatan User

Centered Design (UCD) adalah untuk menghasilkan produk dengan nilai usability

yang tinggi. Berikut merupakan fase-fase dalam User Centered Design.

Plant the user centered design

process

Understand and specify context of

use

Specify user requirements

Product design solutions

Evaluate design agains

requirements

Design solutionments

user requirements

Gambar 2.2 User Centered Design

Page 29: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

13

a) Tahap 1: Plan the User Centered Design process

Pada tahap ini melakukan diskusi terhadap Pusat Teknologi

Informasi dan Pangkalan Data (PUSTI PD) selaku pihak yang akan

mengerjakan proyek, untuk mendapatkan komitmen bahwa proses

pembangunan proyek adalah berpusat kepada pengguna atau user. Proyek

akan memiliki waktu dan tugas untuk melibatkan pengguna atau user

dalam awal dan akhir atau dimana mereka dibutuhkan.

b) Tahap 2: Understand and specify context of use

Pada tahap ini akan mengidentifikasi pengguna yang akan

menggunakan produk. Ini akan menjelaskan untuk apa dan dalam kondisi

apa yang akan menggunakan produk.

c) Tahap 3: Specify user requirements

Pada tahap ini akan mengidentifikasi kebutuhan dari pengguna.

d) Tahap 4: Product design solutions

Pada tahap ini akan membangun suatu desain sebagai solusi dari

produk yang sedang dianalisis.

e) Tahap 5: Evaluate design agains requirements

Pada tahap ini akan melakukan evaluasi terhadap desain yang telah

dibuat.

2.7 WEBUSE

Standar internasional (ISO 9241-11), usability sebagai sejauh mana suatu

sistem dapat digunakan oleh pengguna dalam konteks tertentu dengan

efektivitas,efisiensi dan kepuasan. Sedangkan, efisiensi adalah sumber daya yang

dikeluarkan sehubungan dengan keakuratan dan kelengkapan pengguna untuk

Page 30: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

14

mencapai tujuan, dan kepuasan yang digambarkan sebagai kenyamanan dan

akseptabilitas (Matera et all., 2006).

Meskipun rekomendasi ISO 9241-11 telah menjadi standar bagi komunitas

para ahli usability, (Nelson, 2012) mengemukakan 5 atribut usability berdasarkan

pada evaluasi website usability yaitu :

1. Learnability :

Menjelaskan tingkat kemudahan pengguna dalam mempelajari website

untuk memenuhi tugas-tugas dasar ketika pertama kali menggunakan website

tersebut.

2. Efficiency :

Menjelaskan tingkat kecepatan pengguna dalam menyelesaikan tugas-

tugas setelah mempelajari website.

3. Memorability :

Menjelaskan tingkat kemudahan pengguna dalam menggunakan website

dengan baik, setelah lama tidak menggunakan.

4. Errors :

Menjelaskan berapa jumlah kesalahan yang dibuat oleh pengguna, dan

bagaimana cara pengguna memperbaiki kesalahan dengan mudah.

5. Satisfaction :

Menjelaskan tingkat kepuasan pengguna dalam menggunakan website.

Website Usability adalah suatu indikator keberhasilan sebuah website

berinteraksi dengan pengguna dalam melaksanakan tugas tertentu dengan mudah

(Al-Badi & Mayhew, 2010). Ukuran keberhasilan dari website usability dilihat

dari seberapa baik sebuah website dalam memberikan kualitas layanan kepada

Page 31: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

15

pengguna, mengurangi kemungkinan kesalahan pada sistem, memudahkan proses

pembelajaran website dan penggunaan secara efisien sehingga pengguna merasa

puas dengan website tersebut. Untuk dapat mengetahui kualitas website dalam

berinteraksi dengan pengguna adalah dengan cara melakukan evaluasi website

dari aspek usability.

2.7.1 Kriteria Evaluasi Kuisioner

Menjadi Kriteria evaluasi website usabililty diidentifikasi ke dalam 12

kriteria usability yaitu aksesibilitas, adanya unsur yang mengganggu, penempatan

konten, pencarian informasi, informasi up-to-date, waktu download, membuka

jendela browser baru, respon sesuai harapan pengguna, deskripsi hyperlink,

konsisten design, penggunaan warna, informasi dosen.Kriteria tersebut

menunjukkan bahwa satu kriteria akan memiliki keterkaitan antar kategori

usability lebih dari satu yang berhubungan dengan aspek usability (Islam dan

Tsuji, 2011). Kriteria usability dan keterkaitan kategori usability ditunjukkan pada

Tabel 2.1. Kriteria usability dan keterkaitan kategori usability.

Tabel 2.2 Kriteria usability dan keterkaitan kategori usability

No Kriteria Usability Kategori Usability

Content, organization,

and readability

Navigation and links

User interface design

Performance and

effectiveness

Educational purpose

1 Aksesibilitas X

2 Adanya unsur yang mengganggu X

3 Penempatan konten X

4 Pencarian informasi X X X

5 Informasi up-to-date X

6 Waktu download X

Page 32: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

16

No Kriteria Usability Kategori Usability

Content, organization,

and readability

Navigation and links

User interface design

Performance and

effectiveness

Educational purpose

7 Membuka jendela browser baru X X

8 Respon sesuai harapan pengguna X X

9 Deskripsi hyperlink X X X

10 Konsisten design X X

11 Penggunaan warna X

12 Informasi dosen X

Kriteria di atas memuat aspek yang paling penting dari website usability.

Dari 12 kriteria usability diklasifikasikan kedalam 5 kategori usability (Islam dan

Tsuji, 2011) sebagai berikut:

1. Content, organization, and readability

2. Navigation and links

3. User interface design

4. Performance and effectiveness

5. Educational purpose

Kategori-kategori tersebut digunakan untuk mengevaluasi usability pada

website perguruan tinggi. Penjelasan rinci dari 5 kategori usability sebagai

berikut:

a. Content, organization, and readability

Content yang baik adalah content yang mudah dipahami oleh pengguna,

jelas, dan terorganisir dengan baik. Website yang terorganisir dengan baik dan

dapat memberikan pemahaman yang cepat bagi pengguna (Leavitt dan

Shneiderman, 2010).

Page 33: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

17

b. Navigation and links.

Metode yang digunakan untuk mencari dan mengakses informasi dalam

situs web secara efektif dan efisien untuk membantu pengguna website

disebut dengan Navigation. Sedangkan, links berfungsi menghubungkan

pengguna dengan cara memilih dan mengklik links pada halaman hypertext

(homepage), yang menyebabkan terbukanya halaman baru. links yang baik

harus menggunakan teks daripada grafis sehingga mudah dipahami oleh

pengguna (Leavitt dan Shneiderman, 2010).

c. User Interface Design

User Interface Design sebuah metode yang membutuhkan pertimbangan

dengan baik saat merancang dan mengembangkan website. Hal yang penting

dalam merancang User Interface Design diantaranya menetapkan tujuan,

menentukan pengguna dan menyediakan content yang bermanfaat. Untuk

memastikan hasil yang terbaik perlu mempertimbangkan berbagai isu-isu

User Interface Design dan unjuk kerja yang baik bagi pengguna (Leavitt dan

Shneiderman, 2010).

d. Performance and effectiveness.

Performance website dapat diukur dengan caraseberapa cepat suatu

website melakukan proses atau transaksi tertentu sehingga menghasilkan

kinerja pengguna yang cepat dan efisien (Baltzan dan Phillips, 2008).

Sedangkan, effectiveness merupakan keberhasilan sebuah website

menghasilkan informasi yang tepat bagi pengguna (Leavitt dan Shneiderman,

2010).

Page 34: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

18

e. Educational purpose.

Memberikan informasi dan layanan transaksi berisi tentang fitur

pendidikan kepada pengguna secara cepat melalui website (Islam dan Tsuji,

2011).

2.8 Populasi Dan Sampel

2.8.1 Populasi

Menurut (Morrisan, 2012) populasi dapat didefinisikan sebagai suatu

kumpulan subjek, variabel, konsep, atau fenomena. Kita dapat meneliti setiap

anggota populasi untuk mengetahui sifat populasi yang bersangkutan. Sedangkan

menurut (Sugiyono, Statistika Untuk Penelitian, 2011) Populasi merupakan

wilayah generalisasi yang terdiri atas objek/subjek yang mempunyai kuantitas dan

karakteristik tertentu yang ditetapkan oleh peneliti untuk dipelajari dan kemudian

ditarik kesimpulannya.

2.8.2 Sampel

Sampel adalah bagian dari populasi yang mewakili seluruh karakteristik

dari populasi. Sebuah populasi dengan kuantitas besar dapat diambil sebagian

dengan kualitas sampel yang mewakili sama persis dengan kualitas dari populasi

dengan kata representatif. jumlah dari sampel tidak selalu besar dan juga tidak

selalu kecil, hal ini bergantung pada pada keterwakilan karakter dari sampel.

Menurut Nurudin, dkk (2014) sebuah studi simulasi Monte Carlo oleh

Smith dan Wells menunjukan bahwa ukuran sampel 30 sudah sesuai dengan

teorema limit pusat untuk Distribusi Normal.

Page 35: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

19

2.9 Uji Validitas

Uji validitas digunakan untuk mengetahui kelayakanbutir-butir pertanyaan

dalam suatu daftar pertanyaan dalam mendefinisikan suatu variabel. Daftar

pertanyaan ini pada umumnya mendukung suatu kelompok variabel tertentu.

Suatu kuesioner dikatakan valid jika pertanyaan pada suatukuesioner mampu

untuk mengungkapkan sesuatu yang akan diukur oleh kuesioner tersebut.

Menurut Suharsimi (2006) tinggi rendahnya validitas instrumen

menunjukkan sejauh mana data yang dikumpulkan tidak menyimpang

Dari gambaran tentang variabel yang dimaksud. Untuk menguji validitas

instrumen dalam penelitian ini menggunakan rumus korelasi product moment

adalah sebagai berikut:

Dimana:

r= Koefisien validitas

n= Banyaknya responden

X= Nilai pembanding / skor pernyataan tiap nomor

Y = Nilai dari instrumen yang akan dicari validitasnya.

2.10 Uji Reliabilitas

Reliabilitas adalah keandalan atau konsistensi alat ukur, sehingga

reliabilitas merupakan ukuran suatu kestabilan atau konsistensi responden dalam

menjawab hal yang berkaitan dengan variabel-variabel pertanyaan yang

merupakan dimensi suatu variabel dan disusun dalam suatu bentuk kuesioner.

Page 36: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

20

(Suharsimi, 2006) menyatakan bahwa reliabilitas menunjukkan suatu instrumen

cukup dapat dipercaya untuk digunakan sebagai alat pengumpul data karena

instrumen tersebut sudah cukup baik.

Rumus yang banyak digunakan untuk uji reliabilitas adalah Alpha

Cronbach. Dalam menghitung reliabilitas instrumen, peneliti menggunakan rumus

Alpha Cronbach digunakan untuk mencari reliabilitas instrumen yang skornya

berbentuk skala. Uji reliabilitas dapat dilakukan secara bersama-sama terhadap

seluruh butir pertanyaan jika nilai Alpha Cronbach> 0.60 maka reliabel dan

jikanilai Alpha Cronbach< 0.60 maka tidak reliabel (Malhotra, 2007).

Dimana:

k = Jumlah instrumen pertanyaan

∑sj2 = Jumlah varians tiap instrumen

sx2 = Varians dari kesuluruhan instrument

2.11 Penentuan Warna Dalam User Interface

Menurut Jason Beaird (2007) warna dapat mempengaruhi mood dan

menimbulkan perubahaan perasaan. Beberapa warna dapat meningkatkan tekanan

darah, peningkatan metabolisme, dan ketegangan mata. Secara garis besar warna

dapat dikategorikan menjadi tiga kelompok yaitu warna dingin (biru, hijau),

warna panas (merah, orange, kuning), dan warna netral (hitam, putih). Secara

filosifis masing-masing warna memiliki arti yang berbeda-beda yaitu:

1. Merah : Warna yang menarik, dramatis, dan kaya.

2. Biru : Warna yang melambangkan keterbukaan, kecerdasan, keyakinan,

dan menenangkan.

3. Hijau : Warna yang melambangkan pertumbuhan, kesegaran, dan harapan.

Page 37: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

21

4. Kuning : Warna yang melambangkan kebahagiaan.

5. Orange : Warna yang melambangkan ceria, segar.

6. Hitam :Warna yang melambangkan kekuasaan, kemewahan, dan kekuatan.

7. Putih :Warna yang melambangkan kesempurnaan, cahaya, dan kemurnian.

Page 38: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

22

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

Menghasilkan rancangan desain baru

Tahap Akhir

Tahap Perancangan

Memahami dan menentukan

konteks pengguna

Menspesifikasikan kebutuhan pengguna

Membuat perbaikan rancangan antarmuka pengguna

Evaluasi hasil perbaikan rancangan

Wawancara

Wawancara

Adobe Experience Design

Kuisioner WEBUSE

Menghasilkan data yang akurat

Menghasilkan data yang akurat

Menghasilkan rancangan desain

baru

Mengetahui peningkatan

aplikasi SIAKAD

Proses Cara / Menggunakan Output

TAHAP AWAL

Mengumpulkan Data Wawancara Menghasilkan

data yang akurat

Studi Literatur Buku / Jurnal

Evaluasi Desain Baru

Uji Validitas dan Reliabilitas

Kuisioner WEBUSE

SPSS

Landasan Teori

Daftar kekurangan aplikasi SIAKAD

Menghasilkan data yang valid

dan reliabel

Analisis Descriptive SPSS

Menghasilkan nilai rata- rata standart

devisiasi

Gambar 3.3 Tahapan – Tahapan Metodologi Penelitian

Evaluasi Desain Lama

Page 39: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

23

3.1 Tahap Awal Penelitian

Pada tahap ini dilakukan terlebih dahulu wawancara lalu observasi

kemudian baru studi literatur dan melakukan evaluasi desain lama pada aplikasi

SIAKAD.

3.1.1 Wawancara Dan Observasi

Sebelum melakukan penelitian ini, wawancara sangatlah dibutuhkan untuk

membantu penulis dalam pengerjaan. Pada saat itu penulis melakukan survei

kepada bagian Pusat Teknologi Informasi dan Pangkalan Data (PUSTI PD) dan

mahasiswa Universitas Islam Negeri Sunan Ampel Surabaya, serta mencari dan

mengumpulkan data tentang masalah yang terjadi pada aplikasi SIAKAD. Penulis

menanyakan apa saja masalah yang pernah terjadi pada aplikasi SIAKAD,

Berdasarkan hasil wawancara yaitu:

1. Desain aplikasi SIAKAD lebih disederhanakan lagi.

2. Kesulitan mencari informasi terkait materi dan tugas yang diberikan oleh

dosen matakuliah.

3. Perbaikan user interface dan user experience agar lebih enak dan nyaman

dipandang serta lebih mudah untuk digunakan.

4. Terdapat beberapa menu yang memiliki informasi sama.

Setelah melakukan wawancara maka melakukan observasi untuk

mengamati objek yang diteliti. Pada penelitian ini dilakukan dengan mengamati

proses serta menu-menu dan fitur apa saja yang ada pada aplikasi SIAKAD

Universitas Islam Negeri Sunan Ampel Surabaya. Dengan adanya observasi maka

dapat diketahui proses serta fungsi apa saja yang akan diamati pada aplikasi

SIAKAD Universitas Islam Negeri Sunan Ampel Surabaya serta sebagai

Page 40: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

24

perbandingan dalam pembuatan desain User Interace dan User Experience

nantinya. Berikut adalah beberapa menu yang ada pada aplikasi SIAKAD

Universitas Islam Negeri Sunan Ampel Surabaya:

1. Home

Gambar 3.4 Tampilan Menu Home

Berfungsi untuk melihat informasi seperti: grafik kemajuan belajar

mahasiswa, melihat jadwal perkuliahan.

Page 41: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

25

2. Daftar Modul

Gambar 3.5 Daftar Modul

Berfungsi sebagai panduan penggunaan aplikasi SIAKAD.

3. Biodata Mahasiswa

Gambar 3.6 Biodata Mahasiswa

Berfungsi untuk mengetahui identitas dari mahasiswa.

Page 42: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

26

4. Publikasi IAIN

Gambar 3.7 Publikasi IAIN

Berfungsi tentang pengumuman-pengumuman tentang Matakuliah, daftar

wisuda, KKN.

5. Forum Materi

Gambar 3.8 Forum Materi

Berfungsi untuk forum diskusi Tanya jawab antara mahasiswa dengan dosen.

6. Forum Tugas

Gambar 3.9 Forum Tugas

Berfungsi untuk memberi informasi tentang tugas-tugas perkuliahan.

Page 43: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

27

7. Forum Diskusi

Gambar 3.10 Forum Diskusi

Berfungsi untuk diskusi antara dosen dengan mahasiswa.

8. Data Kurikulum

Gambar 3.11 Data Kurikulum

Berfungsi untuk melihat kurikulum jurusan yang sedang ditempuh.

Page 44: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

28

9. Kartu Rencana Studi (KRS)

Gambar 3.12 Kartu Rencana Studi (KRS)

Berfungsi sebagai untuk melaksanakan program kartu rencana studi

mahasiswa.

10. Jadwal Kuliah

Gambar 3.13 Jadwal Kuliah

Berfungsi untuk mengetahui jadwal perkuliahan mahasiswa.

Page 45: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

29

11. Absensi

Gambar 3.14 Absensi

Berfungsi untuk absensi selama satu semester.

12. Skripsi

Gambar 3.15 Skripsi

Berfungsi untuk melaporkan kemajuan mahasiswa yang sedang menempuh

mata kuliah skripsi.

Page 46: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

30

13. Konsultasi Mahasiswa

Gambar 3.16 Konsultasi Mahasiswa

Berfungsi untuk konsultasi mahasiswa dengan dosen wali.

14. Kartu Hasil Studi (KHS)

Gambar 3.17 Kartu Hasil Studi (KHS)

Berfungsi untuk mengetahui nilai dari masing-masing matakuliah.

Page 47: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

31

15. Kemajuan Belajar

Gambar 3.18 Kemajuan Belajar

Berfungsi untuk menampilkan grafik SKS, IPS, dan IPK yang ditempuh.

16. Daftar Nilai

Gambar 3.19 Daftar Nilai

Berfungsi sebagai berfungi untuk mengetahui hasil nilai yang dicapai

mahasiswa.

Page 48: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

32

17. Transkrip

Gambar 3.20 Transkrip

Berfungsi untuk menampilkan informasi transkrip nilai mahasiswa secara

detail.

18. Riwayat Mengulang

Gambar 3.21 Riwayat Mengulang

Berfungsi untuk mengetahui matakuliah yang mengulang setiap semester.

Page 49: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

33

19. Keuangan

Gambar 3.22 Keuangan

Berfungsi untuk memberikan informasi mengenai pembayaran SPP kepada

mahasiswa.

3.1.2 Studi Literatur

Studi literatur Dilakukan dengan mencari informasi dari berbagai literatur

yang berhubungan dengan kegiatan penelitian tentang perancangan desain user

interface dan user experience menggunakan metode User Centered Design

(UCD). Berikut merupakan literature yang digunakan oleh penulis.

1. Website Usaibility menurut Al – Badi & Mayhew (2010).

2. The Elements of User Experience menurut Garret,J (2011).

3. Kriteria kategori usaibility menurut Islam dan Tsuji (2011).

4. Pengertian dari 5 kategori usaibility menurut Leavitt dan Shneiderman

(2010).

Page 50: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

34

5. Marketing Research: An Applied Approach, 3rd European Edition menurut

Malhotra,N.B. (2007).

6. Definisi efisiensi keakuratan dan kelengkapan pengguna menurutMatera et

all., (2006).

7. Metode penelitian survey menurut Morrisan(2012).

8. Atribut usaibility menurut Nelson (2012).

9. Ukuran Sampel dan Distribusi Sampling dari Beberapa Variabel Random

menurut 10. Nurudin Muhammad. Novitasari M, Muhlasah. Kusnandar,

Dadan (2014).

10. Konsep dasar rekayasa perangkat lunak menurut Rizky, S (2011).

11. Penerapan Metode User Centered Design Untuk Perancangan Aplikasi

Berbasis Web menurut Simatupang, Riko Mangasi (2014).

12. Analisa Perancangan Sistem menurut subhan , M (2012).

13. Prosedur penelitian (suatu pendekatan praktik) menurut suharsimi,A

(2006).

14. Metode penelitian pendidikan menurut Sugiyono (2009).

15. Statistika Untuk Penelitian menurut Sugiyono (2011).

16. System Analysis And Design in A Changing World menurut Satzinger, J.

W., Jackson, R. B., & Burd, S. D (2010).

3.1.3 Evaluasi Desain Lama

Pada tahap ini akan dilakukan evaluasi desain lama SIAKAD yang berupa

kuisioner WEBUSE, penyebaran kuisioner WEBUSE dengan jumlah sampel

sebanyak 45 mahasiswa aktif yang telah menggunakan aplikasi SIAKAD.

Selanjutnya dilakukan tabulasi data yang ditunjukkan pada gambar

Page 51: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

35

Gambar 3.23 Tabulasi Data

Keterangan :

X1 = Aplikasi SIAKAD menyediakan informasi yang dibutuhkan mahasiswa

X2 = Menu – menu yang ada pada aplikasi SIAKAD mudah dipahami dan

dimengerti

X3 = Adanya keterangan setiap menu pada aplikasi SIAKAD

X4 = Warna background desain aplikasi SIAKAD menarik

X5 = Pergantian satu halaman ke halaman lainnya tidak membutuhkan waktu

yang lama

X6 = Penggunaan aplikasi SIAKAD sangat jelas dan mudah digunakan

X7 = Tulisan yang digunakan pada aplikasi SIAKAD dapat dibaca

X8 = Sistem hanya memuat halaman yang dibutuhkan pengguna

X9 = Aplikasi SIAKAD mempunyai tampilan yang menarik

X10 = Sistem mempunyai kecepatan akses yang memadai

X11 = Sistem memiliki kecepatan download yang bagus

X12 = Aplikasi SIAKAD telah menyediakan informasi terkait dosen

Page 52: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

36

3.1.4 Uji Validitas dan Reliabilitas

Langkah selanjutnya adalah dilakukan Uji validitas. Uji validitas

digunakan untuk mengukur pertanyaan apakah sudah valid atau belum, dengan

melihat nilai korelasi dari masing – masing point pertanyaan yang telah

ditentukan. Dalam uji validitas ini menggunakan aplikasi SPSS, dalam output

SPSS menampilkan korelasi dari masing – masing point pertanyaan tiap variabel

terhadap total penilaian. Pertanyaan dinyatakan valid jika menunjukan nilai

korelasi (rHitung) lebih besar dari Rtabel dengan alpha 0,05. Pada penelitian ini

untuk menentukan Rtabel dengan menentukan degress of freedom (df) terlebih

dahulu dengan cara N (jumlah sampel) = 45, maka df = N(45) – 2 = 43. Jadi df 43

= 0.248. Pengujian validitas tiap variabel berdasarkan indikator, Hasil dari uji

validitas yang kurang dari Sig. (2 tailed) = 0. 05 dinyatakan valid.

Tabel 3.3 Uji Validitas Variabel Sig. (2 tailed) Keterangan

X1 0.292 Valid

X2 0.256 Valid

X3 0.311 Valid

X4 0.308 Valid

X5 0.324 Valid

X6 0.284 Valid

X7 0.358 Valid

X8 0.304 Valid

X9 0.291 Valid

X10 0.387 Valid

Page 53: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

37

Variabel Sig. (2 tailed) Keterangan

X11 0.311 Valid

X12 0.299 Valid

Sedangkan uji reliabilitas digunakan untuk menguji tingkat konsistensi

jawaban dari responden sehingga kuisioner dapat digunakan untuk pengujian yang

dibutuhkan. Kuisioner sendiri dapat dikatakan reliabel apabila nilai keseluruhan

lebih besar dibandingkan dengan Cronbach’s Alpha. Hasil pengujian reliabilitas

dikatakan reliabel seperti tabel 3.2 Uji Reliabilitas.

Tabel 3.4 Uji Reliabilitas

Cronbach’s Alpha rTabel Keterangan

0.670 0.248 Reliabel, karena nilai

Cronbach’s Alpha lebih

besar dari nilai rTabel.

3.1.5 Analisis Deskriptif

Pada Analisis deskriptif ini akan menjelaskan tentang jawaban keseluruhan

dari responden. Dalam hal ini menggunakan jawaban dengan skala 1 – 4, mulai

dari angka (1) dengan jawaban “sangat tidak setuju”, (2) dengan jawaban “tidak

setuju”, (3) dengan jawaban “setuju”, (4) dengan jawaban “sangat setuju”.

Page 54: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

38

Gambar 3.24 Hasil Analisis Deskriptif

Pada gambar 3.22 dapat dilihat hasil dari analisis deskriptif bahwa variabel

X5 = menu dropdown, X6 = form materi, X8 = menu pada bagian kiri tidak boleh

ditampilkan, X9 = perbaikan disetiap menu, X10 = sistem mempunyai akses yang

memadai, X11 = sistem mempunyai akses download yang bagus, memiliki nilai

mean dibawah 3,00 sehingga menjadi prioritas bahan perbaikan

Page 55: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

39

BAB IV

PEMBAHASAN

Pada bab tiga membahas tahapan yang akan dilakukan pada penelitian ini,

maka pada bab empat akan membahas hasil analisis pada penelitian ini. Hasil

analisis dan pembahasan akan di mulai sesuai dengan tahap-tahapan yang telah

dicantumkan pada bab tiga.

4.1 Tahap Perancangan

4.1.1 Memahami Dan Menentukan Konteks Pengguna

Pada tahap ini akan memahami dan menentukan konteks pengguna dengan

wawancara. Berdasarkan hasil wawancara terhadap 45 mahasiswa di Universitas

Islam Negeri Sunan Ampel Surabaya diperoleh kekurangan pada bagian:

1. Kurangnya infomasi mengenai perubahan jadwal matakuliah

2. Tidak adanya informasi terkait dengan batas awal dan batas akhir

pembayaran Uang Kuliah Tunggal (UKT)

3. Tidak adanya informasi mengenai Ujian Tengah Semester (UTS) dan

juga Ujian Akhir Semester (UAS)

4. Tidak adanya informasi mengenai sisa matakuliah yang akan ditempuh

oleh mahasiswa

4.1.2 Menspesifikasikan Kebutuhan Pengguna

Pada tahap ini akan menspesifikasikan kebutuhan pengguna dengan

wawancara. Berdasarkan hasil wawancara terhadap mahasiswa Universitas Islam

Negeri Sunan Ampel Surabaya yaitu:

a. Kebutuhan informasi

1) Data perubahan jadwal perkuliahan

Page 56: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

40

2) Data informasi keuangan

3) Data nilai UTS, UAS, Tugas dan Nilai Akhir

4) Data matakuliah yang belum diambil tiap semester

b. Kebutuhan fungsional

1) Menampilkan jadwal perubahan perkuliahan

2) Menampilkan informasi tentang keuangan

3) Menampilkan nilai UTS, UAS, Tugas, Nilai Akhir

4) Menampilkan daftar sisa matakuliah

c. Kebutuhan non-fungsional

1) Sistem dapat diakses dimana saja selama terkoneksi internet.

2) Sistem harus dalam kondisi stabil pada saat KRS

4.1.3 Membuat Perbaikan Rancangan Antarmuka Pengguna

Pada tahap membuat perbaikan rancangan antarmuka pengguna

berdasarkan langkah – langkah User Interface/User Experience yaitu:

1. Melakukan wawancara terhadap pengguna (Research).

a. Apakah tampilan desain SIAKAD cukup menarik bagi pengguna

Jawaban: biasa – biasa saja

b. Apakah semua informasi mengenai perkuliahan terdapat pada aplikasi

SIAKAD

Jawaban: tidak

c. Informasi apa saja yang anda cari dalam SIAKAD

Jawaban: KRS, nilai, absensi, jadwal, transkrip nilai

d. Dalam seminggu, berapa kali anda menggunakan aplikasi SIAKAD

Jawaban: empat kali dalam seminggu

Page 57: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

41

2. Membuat User Persona (analysis).

Setelah wawancara kepada 45 mahasiswa maka langkah berikutnya

yaitu membuat user persona untuk menentukan karakteristik pengguna

mahasiswa UINSA. Berdasarkan hasil wawancara dengan 45 mahasiswa

didapatkan beberapa data seperti gambar 4.1 User Persona Mahasiswa

UINSA.

Gambar 4.25 User Persona Mahasiswa UINSA

3. Membuat User Story/Sitemap.

Setelah membuat user persona maka langkah berikutnya yaitu

membuat user story untuk menentukan karakteristik pengguna mahasiswa

UINSA. Berdasarkan hasil wawancara dengan 45 mahasiswa didapatkan

beberapa data seperti tabel 4.1 User Story.

Page 58: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

42

Tabel 4.5 User Story Sebagai Saya Ingin Maka

Mahasiswa

Mengetahui jadwal perubahan secara online

Saya tidak akan datang ke bagian akademik

Mengetahui informasi terkait batas awal dan batas akhir pembayaran Uang Kuliah Tunggal (UKT)

Saya tidak akan datang ke bagian keuangan

Mengetahui Informasi terkait dengan Tidak adanya informasi mengenai Ujian Tengah Semester (UTS) dan juga Ujian Akhir Semester (UAS)

Saya tidak akan datang ke bagian akademik

Informasi terkait perubahan jadwal matakuliah SIAKAD Tidak adanya informasi mengenai sisa matakuliah yang akan ditempuh oleh mahasiswa

Saya tidak akan datang ke bagian akademik

Setelah membuat user story langkah berikutnya yaitu membuat

sitemap untuk menentukan setiap menu yang ada pada aplikasi SIAKAD.

Adapun hasil sitemap terdapat pada gambar 4.2 Sitemap.

Sistem Informasi Akademik

Portal Perkuliahan Perkuliahan(Mhs)

Laporan(Mhs)

Home Kurikulum KRS KHS

User Guide Jadwal Kuliah

Kemajuan Belajar

Menu SIM Absensi Daftar Nilai

Kuliah Semester

Biodata Mahasiswa

Kuliah Kerja Nyata (KKN) Transkrip

Publikasi IAIN Skripsi Riwayat

Mengulang

Forum Kelas Form Yudisium

Pesan Konsultasi Mahasiswa

Keuangan

Logout Jadwal Ujian

Sisa Matakuliah

Gambar 4.26 Sitemap

Page 59: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

43

4. Membuat Wireframes dan prototipe interaksi desain.

A. Wireframe

Gambar 4.27 Home

Berfungsi untuk melihat informasi seperti: grafik kemajuan belajar

mahasiswa, melihat jadwal perkuliahan.

Gambar 4.28 SIM

Berfungsi sebagai panduan penggunaan aplikasi SIAKAD.

Page 60: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

44

Gambar 4.29 Biodata Mahasiswa

Berfungsi untuk mengetahui identitas dari mahasiswa

Page 61: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

45

Gambar 4.30 Publikasi IAIN

Berfungsi tentang pengumuman – pengumuman matakuliah, daftar wisuda, KKN.

Gambar 4.31 Forum Materi

Berfungsi untuk forum diskusi tanya jawab antara mahasiswa dengan dosen.

Page 62: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

46

Gambar 4.32 Forum Tugas

Berfungsi untuk memberikan informasi tentang tugas-tugas perkuliahan.

Gambar 4.33 Forum Diskusi

Berfungsi untuk diskusi antara dosen dengan mahasiswa

Gambar 4.10 Pesan

Berfungsi untuk mengirim pesan secara elektronik.

Page 63: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

47

Gambar 4.34 Kurikulum Jurusan

Berfungsi untuk melihat kurikulum jurusan yang sedang ditempuh

Gambar 4.35 Data Kelas Sebaran

Berfungsi untuk melihat kurikulum jurusan yang sedang ditempuh

Page 64: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

48

Gambar 4.36 Jadwal Ujian Tengah Semester (UTS)

Berfungsi untuk melihat jadwal UTS.

Gambar 4.37 Ujian Akhir Semester (UAS)

Berfungsi untuk melihat UAS.

Page 65: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

49

Gambar 4.38 Kartu Rencana Studi (KRS)

Berfungsi untuk melaksanakan program kartu rencana studi.

Gambar 4.39 Jadwal Kuliah

Berfungsi untuk mengetahui jadwal perkuliahan mahasiswa.

Page 66: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

50

Gambar 4.40 Absensi

Berfungsi untuk absensi selama satu semester.

Gambar 4.41 KKN

Berfungsi untuk mengetahui data tentang Kuliah Kerja Nyata (KKN).

Gambar 4.42 Skripsi

Berfungsi untuk melaporkan kemajuan mahasiswa yang sedang menempuh skripsi.

Page 67: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

51

Gambar 4.43 Form Yudisium

Berfungsi untuk mengetahui data tentang mahasiswa yudisium.

Gambar 4.44 Konsultasi Mahasiswa

Berfungsi untuk konsultasi mahasiswa dengan dosen wali.

Page 68: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

52

Gambar 4.45 Sisa Matakuliah

Berfungsi untuk mengetahui matakuliah yang belum diambil.

Gambar 4.46 Kartu Hasil Studi (KHS)

Berfungsi untuk mengetahui nilai dari masing-masing matakuliah.

Page 69: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

53

Gambar 4.47 Kemajuan Belajar

Berfungsi untuk menampilkan grafik SKS, IPS, dan IPK yang ditempuh.

Gambar 4.48 Daftar Nilai

Berfungsi untuk mengetahui hasil nilai yang dicapai mahasiswa.

Page 70: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

54

Gambar 4.49 Daftar Nilai

Berfungsi untuk menampilkan nilai transkrip secara detail.

Page 71: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

55

Gambar 4.50 Riwayat Mengulang

Berfungsi untuk menampilkan matakuliah yang tidak lulus.

Gambar 4.51 Keuangan

Berfungsi untuk memberikan informasi mengenai pembayaran Uang Kuliah Tunggal (UKT).

Page 72: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

56

B. Prototyping Desain

Berdasarkan teori pemilihan warna user interface (Jason Beaird, 2007). Pada

penelitian ini memilih warna yang sesuai yaitu: warna hijau melambangkan

pertumbuhan, kesegaran, dan harapan. Warna putih melambangkan

kesempurnaan, cahaya, dan kemurnian.

Gambar 4.52 Tampilan Home

Berfungsi untuk melihat informasi seperti: grafik kemajuan belajar mahasiswa, kalender akademik, daftar nilai, dan melihat jadwal perkuliahan.

Gambar 4.53 Daftar Modul

Berfungsi sebagai paduan penggunaan aplikasi SIAKAD.

Page 73: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

57

Gambar 4.54 Biodata Mahasiswa

Berfungsi untuk mengetahui identitas dari mahasiswa.

Page 74: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

58

Gambar 4.55 Publikasi IAIN

Berfungsi tentang pengumuman – pengumuman matakuliah, daftar wisuda, KKN.

Gambar 4.56 Forum Materi

Berfungsi untuk forum diskusi tanya jawab antara mahasiswa dengan dosen.

Gambar 4.57 Forum Tugas

Berfungsi untuk memberi informasi tentang tugas – tugas perkuliahan.

Page 75: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

59

Gambar 4.58 Forum Diskusi

Berfungsi untuk diskusi antara dosen dengan mahasiswa.

Gambar 4.59 Pesan

Berfungsi untuk mengirim pesan secara elektronik.

Page 76: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

60

Gambar 4.60 Data Kurikulum

Berfungsi untuk melihat kurikulum jurusan yang sedang ditempuh.

Gambar 4.61 Data Kelas Sebaran

Berfungsi untuk melihat jadwal angkatan atas dan angkatan bawah.

Page 77: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

61

Gambar 4.62 Jadwal Ujian Tengah Semester (UTS)

Berfungsi untuk melihat jadwal Ujian Tengah Semester.

Gambar 4.63 Jadwal Ujian Akhir Semester (UAS)

Berfungsi untuk melihat jadwal Ujian Akhir Semester.

Page 78: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

62

Gambar 4.64 Kartu Rencana Studi (KRS)

Berfungsi untuk melaksanakan program kartu rencana studi.

Gambar 4.65 Jadwal Kuliah

Berfungsi untuk mengetahui jadwal perkuliahan mahasiswa.

Page 79: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

63

Gambar 4.66 Absensi

Berfungsi untuk absensi selama satu semester.

Gambar 4.67 Kuliah Kerja Nyata (KKN)

Berfungsi untuk mengetahui data tentang kuliah kerja nyata.

Gambar 4.68 Skripsi

Berfungsi untuk melaporkan kemajuan mahasiswa yang sedang menempuh skripsi.

Page 80: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

64

Gambar 4.69 Form Yudisium

Berfungsi untuk mengetahui data tentang mahasiswa yudisium.

Gambar 4.70 Konsultasi Mahasiswa

Berfungsi untuk konsultasi mahasiswa dengan dosen wali.

Page 81: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

65

Gambar 4.71 Sisa Matakuliah

Berfungsi untuk mengetahui matakuliah yang belum diambil.

Gambar 4.72 Kartu Hasil Studi (KHS)

Berfungsi untuk mengetahui nilai dari masing-masing matakuliah.

Page 82: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

66

Gambar 4.73 Kemajuan Belajar

Berfungsi untuk menampilkan grafik SKS, IPS, dan IPK yang ditempuh.

Gambar 4.74 Daftar Nilai

Berfungsi untuk mengetahui hasil nilai yang dicapai mahasiswa.

Page 83: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

67

Gambar 4.75 Transkrip

Berfungsi untuk menampilkan informasi transkrip nilai mahasiswa secara detail.

Page 84: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

68

Gambar 4.76 Riwayat Mengulang

Berfungsi untuk mengetahui matakuliah yang mengulang setiap semester.

Gambar 4.77 Keuangan

Berfungsi untuk memberikan informasi mengenai pembayaran Uang Kuliah Tunggal (UKT).

Page 85: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

69

4.1.4 Evaluasi Hasil Perbaikan Rancangan

Pada tahap evaluasi hasil perbaikan rancangan melakukan penyebaran

kuisioner WEBUSE dengan jumlah sampel sebanyak 45 mahasiswa aktif yang

telah menggunakan aplikasi SIAKAD. Selanjutnya dilakukan tabulasi data yang

ditunjukkan pada gambar

Gambar 4.78 Tabulasi Data

Keterangan :

X1 = Aplikasi SIAKAD menyediakan informasi yang dibutuhkan mahasiswa

X2 = Menu – menu yang ada pada aplikasi SIAKAD mudah dipahami dan

dimengerti

X3 = Adanya keterangan setiap menu pada aplikasi SIAKAD

X4 = Warna background desain aplikasi SIAKAD menarik

X5 = Pergantian satu halaman ke halaman lainnya tidak membutuhkan waktu

yang lama

X6 = Penggunaan aplikasi SIAKAD sangat jelas dan mudah digunakan

X7 = Tulisan yang digunakan pada aplikasi SIAKAD dapat dibaca

Page 86: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

70

X8 = Sistem hanya memuat halaman yang dibutuhkan pengguna

X9 = Aplikasi SIAKAD mempunyai tampilan yang menarik

X10 = Sistem mempunyai kecepatan akses yang memadai

X11 = Sistem memiliki kecepatan download yang bagus

X12 = Aplikasi SIAKAD telah menyediakan informasi terkait dosen

A. Uji Validitas dan Reliabilitas

Langkah selanjutnya adalah dilakukan Uji validitas. Uji validitas

digunakan untuk mengukur pertanyaan apakah sudah valid atau belum, dengan

melihat nilai korelasi dari masing – masing point pertanyaan yang telah

ditentukan. Dalam uji validitas ini menggunakan aplikasi SPSS, dalam output

SPSS menampilkan korelasi dari masing – masing point pertanyaan tiap

variabel terhadap total penilaian. Pertanyaan dinyatakan valid jika menunjukan

nilai korelasi (rHitung) lebih besar dari Rtabel dengan alpha 0,05. Pada

penelitian ini untuk menentukan Rtabel dengan menentukan degress of

freedom (df) terlebih dahulu dengan cara N (jumlah sampel) = 45, maka df =

N(45) – 2 = 43. Jadi df 43 = 0.248. Pengujian validitas tiap variabel

berdasarkan indikator, Hasil dari uji validitas yang kurang dari Sig. (2 tailed) =

0. 05 dinyatakan valid.

Tabel 4.6 Uji Validitas

Variabel Sig. (2 tailed) Keterangan

X1 0.306 Valid

X2 0.307 Valid

X3 0.327 Valid

X4 0.427 Valid

Page 87: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

71

Variabel Sig. (2 tailed) Keterangan

X5 0.536 Valid

X6 0.348 Valid

X7 0.376 Valid

X8 0.379 Valid

X9 0.540 Valid

X10 0.614 Valid

X11 0.687 Valid

X12 0.425 Valid

Sedangkan uji reliabilitas digunakan untuk menguji tingkat konsistensi

jawaban dari responden sehingga kuisioner dapat digunakan untuk pengujian yang

dibutuhkan. Kuisioner sendiri dapat dikatakan reliabel apabila nilai keseluruhan

lebih besar dibandingkan dengan Cronbach’s Alpha. Hasil pengujian reliabilitas

dikatakan reliabel seperti tabel 4.3 Uji Reliabilitas.

Tabel 4.7 Uji Reliabilitas

Cronbach’s Alpha rTabel Keterangan

0.796 0.248 Reliabel, karena nilai

Cronbach’s Alpha lebih

besar dari nilai rTabel.

Page 88: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

72

B. Analisis Deskriptif

Gambar 4.79 Analisis Deskriptif

Hasil dari analisis deskriptif terdapat pada gambar 4.56 bahwa perbaikan

rancangan desain terdapat pada

1. X5 = Menu Dropdown

Menu dropdown baru yang terdapat pada aplikasi SIAKAD dapat dilihat pada

gambar 4.57. Menu dropdown.

Gambar 4.80 Menu Dropdown

Page 89: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

73

2. X6 = Form Materi

Menu form materi baru yang bisa didownload lebih dari satu materi yang

terdapat pada aplikasi SIAKAD dapat dilihat pada gambar 4.58. Form Materi.

Gambar 4.81 Form Materi

Page 90: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

74

3. X8 = Menu Pada Bagian Kiri Tidak Boleh Ditampilkan

Tampilan desain baru yang tidak menampilkan menu pada bagian kiri dapat

dilihat pada gambar 4.59. Menu dropdown.

Gambar 4.82 Tampilan Menu Bagian Kiri

4. X9 = Perbaikan pada Menu jadwal matakuliah, pembayaran UKT, jadwal

UTS/UAS, sisa matakuliah.

a. Menu Jadwal Matakuliah baru yang terdapat pada aplikasi SIAKAD dapat

dilihat pada gambar 4.60. Jadwal Matakuliah.

Page 91: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

75

Gambar 4.83 Jadwal Matakuliah

b. Menu Jadwal UTS/UAS baru yang terdapat pada aplikasi SIAKAD dapat

dilihat pada gambar 4.61. Jadwal UTS/UAS.

Gambar 4.84 Jadwal UTS/UAS

Page 92: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

76

c. Menu Pembayaran UKT baru yang terdapat pada aplikasi SIAKAD dapat

dilihat pada gambar 4.62. Pembayaran UKT.

Gambar 4.85 Pembayaran UKT

d. Menu Sisa Matakuliah baru yang terdapat pada aplikasi SIAKAD dapat

dilihat pada gambar 4.63. Sisa Matakuliah.

Gambar 4.86 Sisa Matakuliah

Page 93: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

77

BAB V

PENUTUP

5.1 Kesimpulan

Dari hasil pembahasan laporan Tugas Akhir ini penulis memberikan

kesimpulan sebagai berikut:

1. Kombinasi warna yang sesuai dengan kebutuhan.

2. Font Segoe UI yang mudah dibaca oleh user, pada setiap halaman.

3. Layout yang konsisten pada setiap halaman.

4. Feature tambahan menu seperti jadwal perubahan matakuliah, sisa matakuliah

dan jadwal ujian.

5. User Experience yang sesuai dengan responden untuk mendapatkan informasi

atau mencapai tujuan dalam perkuliahan.

5.2 Saran

Pada penelitian ini, prototype yang dihasilkan yaitu:

1. Tampilan website yang dioperasikan dalam device desktop, sehingga dapat

dikembangkan lagi, yakni membuat tampilan prototype dalam segala ukuran

device, sehingga mampu menghasilkan prototype yang lebih baik.

2. Perguruan Tinggi UINSA harus meningkatkan kapasitas bandwitch.

Page 94: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

78

DAFTAR PUSTAKA

Agustin, T. (2012). Analisis dan Perancangan Sistem Informasi Akademik pada

AMIKOM Cipta Darma Surakarta Berbasis web framework CodeIgniter.

Yogyakarta: STMIK AMIKOM.

Al-Badi & Mayhew. (2010). Website Usaibility. Jakarta:kencana.

Garret,J. (2011). The Elements of User Experience: User - Centered Design the

Web and Beyond, Second Edition. Berkeley: California: New Riders.

Islam dan Tsuji. (2011). Kriteria Kategori Usaibility. Bandung:Pearson.

Intetics Inc. “The Main Steps of The User Interface Design”.

https://intetics.com/blog/the-main-steps-of-the-user-interface-design.

Intetics Inc. “The Main Steps of The User Interface Design”.

https://intetics.com/blog/the-main-steps-of-the-user-interface-design.

Jason Beird. (2007). The Beautiful Of WEB Design. Bandung. Paperback.

Malhotra,N.B. (2007). Marketing Research: An Applied Approach, 3rd European

Edition. Harlow, UK: Pearson Education.

Matera et all., (2006). Definisi Efisiensi Keakuratan dan Kelengkapan Pengguna.

Pearson.

Morrisan. (2012). Metode penelitian survei. Jakarta: Kencana.

Nelson. (2012). Atribut usaibility. Jakarta:Graha Ilmu.

Nurudin Muhammad. Novitasari M, Muhlasah. Kusnandar, Dadan.(2014).

Ukuran Sampel dan Distribusi Sampling dari Beberapa Variabel Random

Kontinu. Buletin Ilmiah Mat. Stat. dan Terapannya (Bimaster).

O'Brein dan Marakas. (2009). Pengantar Sistem Informasi. Jakarta: Salemba.

Rizky, S. (2011). Konsep Dasar Rekayasa Perangkat Lunak. Jakarta: Prestasi

Pustaka Publisher.

Rudianto, A. M. (2011). Pemrograman Web Dinamis menggunakan PHP dan

MySQL. Yogyakarta: C.V ANDI OFFSET.

Simatupang, Riko Mangasi. (2014). Penerapan Metode User Centered Design

Untuk Perancangan Aplikasi Berbasis Web. Informasi dan Teknologi

Ilmiah (INTI) Volume III 1-5.

Page 95: PERANCANGAN DESAIN USER INTERFACE DAN USER …sir.stikom.edu/id/eprint/3143/1/14410100068-2018-STIKOMSURABAYA.pdf · Sistem Informasi Ak (SIAKAD). SIAKAD adalah aplikasi sistem informasi

79

Subhan, M. (2012). Analisan Perancangan Sistem. Jakarta: Lentera Ilmu

Cendekia.

Suharsimi, A. (2006). Prosedur Penelitian (Suatu Pendekataan Praktik). Jakarta:

Rineka Cipta.

Sugiyono. (2009). Metode Penelitian Pendidikan. Bandung: Alfabeta.

Sugiyono. (2011). Statistika Untuk Penelitian. Bandung: Alfabeta.

Satzinger, J. W., Jackson, R. B., & Burd, S. D. (2010). System Analysis And

Design in A Changing World. Boston: Course Technology.

Thai lam.” 6 Steps in A Common UX Design Process”. https://blog.prototypr.io/a-

common-product-ux-design-process-55af4ab5665e