PERANCANGAN UI/UX MICROSERVICE SISTEM INFORMASI AKADEMIK KAMPUS DENGAN METODE PERANCANGAN FIVE
PLANES.
(STUDI KASUS: AIS Mahasiswa UIN Jakarta) SKRIPSI
Oleh :
Adissa Vintha Junilla NIM :11160910000001
PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA
PERANCANGAN UI/UX MICROSERVICE SISTEM INFORMASI AKADEMIK KAMPUS DENGAN METODE PERANCANGAN FIVE
PLANES.
(STUDI KASUS: AIS Mahasiswa UIN Jakarta) SKRIPSI
Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer
Fakultas Sains dan Teknologi
Universitas Islam Negeri Syarif Hidayatullah Jakarta
Oleh :
Adissa Vintha Junilla NIM :11160910000001
PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA
ii
iii
PERNYATAAN ORISINALITAS Dengan ini saya menyatakan bahwa:
1. Skripsi ini merupakan hasil karya asli saya yang diajukan untuk memenuhi salah satu persyaratan memperoleh gelas Strata 1 di UIN Syarif Hidayatullah Jakarta. 2. Semua sumber yang saya gunakan dalam penulisan ini telah saya cantumkan sesuai dengan ketentuan yang berlaku di UIN Syarif Hidayatullah Jakarta.
3. Apabila di kemudian hari terbukti karya ini bukan hasil karya asli saya atau merupakan hasil jiplakan karya orang lain, maka saya bersedia menerima sanksi yang berlaku di UIN Syarif Hidayatullah Jakarta.
Jakarta, 19 Februari 2021
Adissa Vintha Junilla 11160910000001
iv
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI UNTUK KEPENTINGAN AKADEMIS
Sebagai civitas akademik UIN Syarif Hidayatullah Jakarta, saya yang bertandatangan dibawah ini:
Nama : Adissa Vintha Junilla NPM : 11160910000001 Program Studi : Teknik Informatika
Fakultas : Fakultas Sains dan Teknologi Jenis Karya : Skripsi
Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Islam Negeri Syarif Hidayatullah Jakarta Hak Bebas Royalti Non Eksklusif (Non-exclusive Royalti Free Right) atas karya ilmiah saya yang berjudul:
PERANCANGAN UI/UX MICROSERVICE SISTEM INFORMASI AKADEMIK KAMPUS DENGAN METODE PERANCANGAN FIVE
PLANES.
(STUDI KASUS: AIS Mahasiswa UIN Jakarta)
Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Non Eksklusif ini Universitas Islam Negeri Syarif Hidayatullah Jakarta berhak menyimpan, mengalihmedia/formatkan, mengelola dalam bentuk pangkalan data (database), merawat, dan mempublikasikan tugas akhir saya selama tetap mencantumkan nama saya sebagai penulis/pencipta dan sebagai pemilik Hak Cipta. Demikian pernyataan ini saya buat dengan sebenarnya.
Dibuat di : Jakarta Pada tanggal : 19 Februari 2021
Yang menyatakan
v
KATA PENGANTAR
Assalamu’alaikum Wr. Wb. Puji syukur senantiasa dipanjatkan kehadirat Allah SWT yang telah melimpahkan rahmat, hidayah serta nikmat-Nya sehingga penyusunan skripsi ini dapat diselesaikan. Sholawat dan salam senantiasa dihanturkan kepada junjungan kita bagina Nabi Muhammad SAW beserta keluarganya, para sahabatnya serta umatnya hingga akhir zaman. Penulisan skripsi ini mengambil tema dengan judul: “Perancangan UI/UX Microservice Sistem Informasi Akademik Kampus Dengan Metode Perancangan Five Planes. (Studi Kasus : AIS Mahasiswa UIN Jakarta”. Penyusunan skripsi ini adalah salah satu syarat untuk memperoleh gelar Sarjana Komputer (S.Kom) pada program studi Teknik Informatika, Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta.
Proses penyelesaian skripsi ini tidak lepas dari berbagai bantuan, dukungan, saran, dan kritik yang telah penulis dapatkan, oleh karena itu dalam kesempatan ini peneliti ingin mengucapkan terima kasih kepada:
1. Ibu Prof. Dr. Lily Suraya Eka Putri, M.Env.Stud selaku dekan Fakultas Sains dan Teknologi.
2. Bapak Dr Imam Marzuki Shofi, MT selaku ketua program studi Teknik Informatika dan Bapak Andrew Fiade, M.Kom selaku Sekretaris program studi Teknik Informatika.
3. Ibu Dewi Khairani, M.Sc dan Ibu Ummi Masrurohh, M.Sc selaku dosen pembimbing yang senantiasa membimbing penulis, meluangkan waktu, memberikan bantuan, semangat dan motivasi untuk penulis agar dapat menyelesaikan skripsi ini.
4. Seluruh Dosen, Staf Karyawan Fakultas Sains dan Teknologi, khususnya Program Studi Teknik Informatika yang telah memberikan ilmu, bimbingan dan bantuan sejak awal perkuliahan.
vi
5. Ibunda Penulis yang tidak pernah berhenti mendukung serta mendoakan setiap langkah kaki penulis selama menimba ilmu untuk menjadi priBadi yang sukses dan bermanfaat.
6. Teman penulis, Fahmi Alfin Ibrahim yang selalu memberikan dukungan, fasilitas, dan semangat setiap harinya.
7. Seluruh teman-teman TI angkatan 2016, yang telah memberikan dukungan dan segala bantuannya kepada penulis. Terimakasih atas pengalaman dan kenangan yang telah kita lalui bersama selama masa perkuliahan.
8. Keluarga besar PMII KOMFAST yang telah memberikan penulis banyak pengalaman khususnya pengalaman berorganisasi.
9. Teman sekaligus sahabat penulis, Aisyah Nur Fauziyah, Rani Puspita, Rida Zahra Purwana, dan Afina Erma Pradita yang selalu memberikan segala dukungan dan bantuan kepada penulis serta menemani dari masuk perkuliahan hingga akhir.
10. Seluruh responden, selaku orang-orang yang terlibat dalam penelitian penulis yang telah memberikan ide, opini, wawasan dan sebagainya kepada penulis dalam proses pengerjaan skripsi ini.
11. Semua pihak yang tidak dapat penulis sebutkan satu persatu yang telah membantu dalam penyelesaian penulisan skripsi ini.
Akhir kata, penulis berharap semoga skripsi ini bermanfaat serta menambah wawasan dan pengetahuan bagi pembaca. Penulis menyadari bahwa skripsi ini masih jauh dari sempurna, untuk itu kritik dan saran yang bersifat membangun sangat diharapkan dengan mengirimkan melalui email ke [email protected].
Jakarta, 19 Februari 2021
vii Nama : Adissa Vintha Junilla Program Studi: Teknik Informatika
Judul : Perancangan UI/UX Microservice Sistem Informasi Akademik Kampus Dengan Metode Perancangan Five Planes. (Studi Kasus : AIS Mahasiswa UIN Jakarta.
ABSTRAK
UIN Jakarta saat ini mempunyai sistem informasi akademis yang disebut AIS (Academic Information System). Sebagai sistem besar yang berperan penting dalam suatu lembaga perguruan tinggi, tentunya sistem perlu mempunyai performa baik. Yang terjadi pada AIS saat ini yaitu sistem tidak dapat diakses ketika salah satu bagian dari sistem didalamnya sedang mengalami perbaikan atau under maintenance, yang menyebabkan seluruh sistem mengalami maintenance total dan tidak dapat diakses. Untuk mengatasi permasalahan ini, maka dibangunlah rancangan microservice untuk AIS UIN Jakarta. Selain dalam segi performa, dari segi tampilan tentunya juga sangat berpengaruh untuk User Experience. Sistem informasi akademik memiliki User interface atau antarmuka yang berfungsi untuk menghubungkan pengguna dengan informasi yang dibutuhkan dari sistem itu sendiri. Berdasarkan penelitian sebelumnya ditemukan bahwa tampilan dalam AIS UIN Jakarta masuk dalam kategori Biasa Saja. Hal ini mengartikan bahwa AIS UIN Jakarta membutuhkan perubahan dari segi tampilan maupun kegunaannya sebagai interaktif mahasiswa. Untuk mencapai tujuan tersebut, dibutuhkan metode pengembangan UI/UX yang tepat agar tujuan utama AIS tercapai. Salah satu metode yang dapat digunakan adalah Five Planes. Metode Five Planes User experience elements terdiri atas 5 elemen, yaitu strategy plane adalah tahap untuk mencari tahu product objective dan user need. Scope plane adalah tahapan untuk menentukan spesifikasi fungsional dan konten lalu dilanjutkan dengan membuat scenario pengguna. Structure plane adalah perancangan arsitektur informasi dan desain interaksi. Skeleton plane adalah
viii
tahap perancangan desain low fidelity. Dan surface plane yaitu perancangan desain high fidelity. Prototype yang telah dibangun dinamakan AIS For Student Pada hasil evaluasi dengan menggunakan metode UEQ, AIS For Student pada skala Daya Tarik, Kejelasan, Ketepatan, stimulasi dan kebaruan mendapat hasil dengan kategori Good (Baik).
Kata Kunci : User Interface, User Experience, Five Planes, UEQ, Figma. Daftar Pustaka : 19 Jurnal + 10 Tesis + 6 E-book + 5 Website
ix Name : Adissa Vintha Junilla Study Program: Informatics Engineering
Title : Designing UI/UX Microservice Campus Academic Information System using Five Planes Method. (Case Study : AIS Mahasiswa UIN Jakarta)
ABSTRACT
UIN Jakarta currently has an academic information system called AIS (Academic Information System). As a large system that plays an important role in a higher education institution, the system needs to have Good performance. But sometimes, the system cannot be accessed when one part of the system inside is undergoing repair or under maintenance, which causes the entire system to undergo total maintenance and cannot be accessed. To solve this problem, a microservice design was built for AIS UIN Jakarta. Apart from the aspect of performance, in terms of appearance, of course, it is also very important for User Experience. Academic information systems have a user interface that functions to connect users with the information needed from the system itself. Based on research, it was found that the User Interface of AIS UIN Jakarta falls into the category of “Bad”. This means that AIS UIN Jakarta requires changes in terms of appearance so the user will have a Good time while accessing it. To achieve this goal, appropriate UI / UX development methods are needed in order to achieve AIS main objectives. One method that can be used is the Five Planes. The Five Planes Method user experience elements consist of 5 elements, the first one is the strategy plane is the stage for finding out product objectives and user needs. The scope plane is the stage for defining functional specifications and content and then continues to create user scenarios. The structure plane is an information architecture design and interaction design. The skeleton plane is building the low fidelity design. And the surface plane is building a high fidelity design. The prototype that has been built is called AIS For Student. In the
x
evaluation results using the UEQ method, AIS For Student on a scale of Attractiveness, Clarity, Accuracy, stimulation and novelty, the results are in the “Good” category.
Keywords : User Interface, User Experience, Five Planes, UEQ, Figma.
xi
DAFTAR ISI
LEMBAR PERSETUJUAN ... i
LEMBAR PENGESAHAN ... ii
PERNYATAAN ORISINALITAS ... iii
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI UNTUK KEPENTINGAN AKADEMIS ... iv
KATA PENGANTAR ... v
ABSTRAK ... vii
ABSTRACT ... ix
DAFTAR ISI ... xi
DAFTAR TABEL ... xvi
DAFTAR GAMBAR ... xvii
BAB 1 PENDAHULUAN... 2 1.1 Latar Belakang... 2 1.2 Rumusan Masalah ... 5 1.3 Batasan Masalah ... 5 1.3.1 Metode ... 5 1.3.2 Tools ... 6 1.3.3 Proses ... 6 1.4 Tujuan Penelitian ... 6 1.5 Manfaat Penelitian ... 6 1.5.1 Bagi Penulis... 6 1.5.2 Bagi Universitas ... 6 1.5.3 Bagi Pengelola ... 7 1.6 Metodologi Penelitian ... 7
xii
1.6.2 Metode Pengembangan Sistem ... 7
1.7 Sistematika Penulisan ... 7
BAB II LANDASAN TEORI ... 8
2.1 AIS UIN Jakarta ... 8
2.1.1 Pengertian AIS UIN Jakarta ... 8
2.1.2 Website AIS UIN Jakarta ... 8
2.1.3 Aplikasi Mobile AIS UIN Jakarta ... 10
2.2 User Interface ... 12
2.2.1 Definisi User Interface ... 12
2.2.2 Jenis-Jenis User Interface ... 12
2.2.3 Prinsip Perancangan User Interface ... 13
2.3 User Experience ... 13
2.3.1 Definisi User Experience ... 13
2.3.2 Komponen inti dalam User Experience ... 13
2.4 Sistem Informasi Akademik ... 15
2.4.1 Pengertian Sistem Informasi Akademik ... 15
2.4.2 Manfaat Sistem Informasi Akademik ... 16
2.5 Microservice ... 17
2.5.1 Definisi Microservice ... 17
2.5.2 Rancangan Microservice AIS UIN Jakarta ... 21
2.6 Five Planes Method ... 24
2.6.1 Strategy plane ... 25 2.6.2 Scope plane ... 26 2.6.3 Structure plane ... 26 2.6.4 Skeleton plane ... 26 2.6.5 Surface Plane ... 27 2.7 UEQ ... 27 2.7.1 Pengertian UEQ ... 27
xiii
2.7.2 Tahapan Evaluasi UEQ ... 31
2.8 Metode Pengumpulan Data ... 33
2.8.1 Studi Pustaka ... 33
2.8.2 Kuisioner ... 33
2.8.3 Wawancara ... 34
2.9 Studi Literatur Sejenis... 30
BAB III METODOLOGI PENELITIAN ... 37
3.1 Metode Pengumpulan Data ... 37
3.1.1 Kuesioner ... 37
3.1.2 Studi Pustaka ... 37
3.1.3 Wawancara ... 37
3.2 Metode Perancangan dan Evaluasi ... 38
3.2.1 Strategy plane ... 38 3.2.2 Scope plane ... 38 3.2.3 Structure plane ... 39 3.2.4 Skeleton plane... 39 3.2.5 Surface plane ... 39 3.2.6 Evaluasi ... 40 3.3 Kerangka Penelitian ... 41
BAB IV ANALISIS DAN PERANCANGAN ... 41
4.1 Strategy plane ... 41
4.1.1 Product Objective ... 41
4.1.2 User Needs ... 41
4.1.3 User Persona ... 45
4.2 Scope plane ... 46
4.2.1 Spesifikasi Fungsional dan Konten ... 46
4.2.2 Skenario Pengguna ... 47
xiv
4.3.1 Struktur Website ... 48
4.3.2 PTA Login ... 49
4.3.3 PTA Isi KRS... 50
4.3.4 PTA Cetak KRS ... 51
4.3.5 PTA Aktifitas Perkuliahan ... 51
4.3.6 PTA Nilai IP dan IPK ... 52
4.3.7 PTA Nilai TOEFL dan TOAFL ... 52
4.3.8 PTA Cek Data Dosen ... 53
4.3.9 PTA Cari Data Dosen ... 54
4.4 Skeleton plane ... 54
4.4.1 Wireframe Halaman Login ... 55
4.4.2 Wireframe Halaman Dashboard ... 55
4.4.3 Wireframe Halaman Isi KRS... 56
4.4.4 Wireframe Halaman Cetak KRS ... 57
4.4.5 Wireframe Aktifitas Perkuliahan ... 58
4.4.6 Wireframe Nilai IP dan IPK ... 59
4.4.7 Wireframe Nilai TOEFL dan TOAFL ... 60
4.4.8 Wireframe Cek Data Dosen ... 61
4.4.9 Wireframe Cari Data Dosen ... 62
4.5 Surface plane ... 63
4.5.1 Halaman Login ... 63
4.5.2 Halaman Lupa Password ... 66
4.5.3 Halaman Dashboard... 68
4.5.4 Halaman Isi KRS ... 70
4.5.5 Halaman Cetak KRS ... 77
4.5.6 Halaman Aktifitas Perkuliahan ... 78
4.5.7 Halaman Nilai IP dan IPK ... 80
xv
4.5.9 Halaman Data Dosen ... 84
4.5.10 Halaman Log out ... 88
BAB V HASIL DAN PEMBAHASAN ... 90
5.1 Perencanaan Testing ... 90
5.2 Analisis Hasil Pengujian ... 95
BAB IV KESIMPULAN DAN SARAN ... 104
6.1 Kesimpulan... 104
6.2 Saran ... 105
DAFTAR PUSTAKA ... 107
xvi
DAFTAR TABEL
Tabel 2.1 Studi Literatur Sejenis ... 30
Tabel 4.1 Spesifikasi Fungsional……….47
Tabel 5. 1 Data Responden ... 90
Tabel 5. 2 Hasil Jawaban Responden ... 95
Tabel 5.3 Hasil dari Perhitungan Mean, Variance dan Standart Deviation. ... 98
Tabel 5.4 Hasil Skala UEQ (Mean dan Varians)... 100
xvii
DAFTAR GAMBAR
Gambar 2.1 Tampilan Website AIS UIN Jakarta ... 9
Gambar 2.2 Tampilan Aplikasi Mobile AIS UIN Jakarta tahun 2018 ... 10
Gambar 2.3 Tampilan Aplikasi Mobile AIS UIN Jakarta tahun 2019 ... 11
Gambar 2.4 Tampilan Aplikasi Mobile AIS UIN Jakarta tahun 2020 ... 11
Gambar 2.5 Desain monolitik tradisional. Sumber (Sharma et al., 2016) ... 18
Gambar 2.6 Desain monolitik dengan SOA. Sumber (Sharma et al., 2016) ... 18
Gambar 2.7 Desain microservices. (Sharma et al., 2016) ... 19
Gambar 2.8 Bidang-bidang Five Planes ... 25
Gambar 2.9 Struktur aspek-aspek butir dari kuesioner UEQ ... 28
Gambar 2.10 Tujuh Skala Penilaian UEQ ... 30
Gambar 2.11 Skala Benchmark UEQ ... 31
Gambar 3.1 Kerangka Penelitian ... 41
Gambar 4.1 Hasil Grafik Skala UEQ ... 43
Gambar 4.2 Grafik Hasil Perhitungan Perbandingan Benchmark UEQ ... 45
Gambar 4.3 User Persona ... 46
Gambar 4.4 Struktur Website ... 48
Gambar 4.5 PTA Login ... 49
Gambar 4.6 PTA Isi KRS ... 50
Gambar 4.7 PTA Cetak KRS ... 51
Gambar 4.8 PTA Aktifitas Perkuliahan ... 51
Gambar 4.9 PTA Nilai IP dan IPK ... 52
Gambar 4.10 PTA Nilai TOEFL dan TOAFL ... 52
Gambar 4.11 PTA Cek Data Dosen ... 53
Gambar 4.12 PTA Cari Data Dosen ... 54
Gambar 4.13 Wireframe Halaman Login... 55
Gambar 4.14 Wireframe Halaman Dashboard ... 55
xviii
Gambar 4.16 Wireframe Halaman Isi KRS 2... 56
Gambar 4.17 Wireframe Halaman Isi KRS 3... 57
Gambar 4.18 Wireframe Halaman Cetak KRS 1 ... 57
Gambar 4.19 Wireframe Halaman Cetak KRS 2 ... 58
Gambar 4.20 Wireframe Aktifitas Perkuliahan 1 ... 58
Gambar 4.21 Wireframe Aktifitas Perkuliahan 2 ... 59
Gambar 4.22 Wireframe Nilai IP dan IPK 1 ... 59
Gambar 4.23 Wireframe Nilai IP dan IPK 2 ... 60
Gambar 4.24 Wireframe Nilai TOEFL dan TOAFL ... 60
Gambar 4.25 Wireframe Cek Data Dosen 1 ... 61
Gambar 4.26 Wireframe Cek Data Dosen 2 ... 61
Gambar 4.27 Wireframe Cari Data Dosen 1 ... 62
Gambar 4.28 Wireframe Cari Data Dosen 2 ... 62
Gambar 4.29 Halaman Login ... 63
Gambar 4.30 Halaman Login (Data Terisi) ... 64
Gambar 4.31 Halaman Login (Login Gagal) ... 64
Gambar 4. 32 Prototype Halaman Login ... 65
Gambar 4.33 Halaman Lupa Password ... 66
Gambar 4.34 Halaman Lupa Password (Email Terisi) ... 66
Gambar 4. 35 Halaman Lupa Password (Notifikasi Email Terkirim) ... 67
Gambar 4.36 Prototype Lupa Password ... 67
Gambar 4.37 Halaman Dashboard ... 68
Gambar 4.38 Halaman Dashboard (Hide Menu) ... 68
Gambar 4.39 Prototype Dashboard ... 69
Gambar 4.40 Halaman Awal Isi KRS ... 70
Gambar 4.41 Halaman Isi KRS (Pilih Semester) ... 71
Gambar 4.42 Halaman Isi KRS (Semester Terpilih) ... 71
xix
Gambar 4.44 Halaman Isi KRS (KRS Tersedia Page 1)... 72
Gambar 4.45 Halaman Isi KRS (Page 1 - Mengambil KRS) ... 73
Gambar 4 46 Halaman Isi KRS (Page 2) ... 73
Gambar 4.47 Halaman Isi KRS (Page 2 - Mengambil KRS) ... 74
Gambar 4.48 Halaman Isi KRS (Page 2 - Menghapus KRS) ... 74
Gambar 4.49 Halaman Isi KRS (Page 2 - Menyimpan KRS) ... 75
Gambar 4.50 Halaman Isi KRS (KRS yang telah terambil) ... 75
Gambar 4.51 Prototype Isi KRS ... 76
Gambar 4.52 Halaman Cetak KRS (Memilih Format) ... 77
Gambar 4. 53 Halaman Cetak KRS (Notifikasi berhasil dicetak) ... 77
Gambar 4.54 Prototype Cetak KRS ... 78
Gambar 4.55 Halaman Jadwal Perkuliahan ... 78
Gambar 4.56 Halaman Jadwal Perkuliahan (Detail) ... 79
Gambar 4.57 Prototype Aktifitas Perkuliahan ... 79
Gambar 4.58 Halaman Nilai IP dan IPK ... 80
Gambar 4.59 Halaman Nilai IP dan IPK (Detail Semester) ... 81
Gambar 4.60 Halaman Nilai IP dan IPK (Detail Nilai Mata Kuliah) ... 81
Gambar 4. 61 Prototype Nilai IP dan IPK... 82
Gambar 4.62 Halaman Nilai TOEFL dan TOAFL ... 83
Gambar 4.63 Prototype Nilai TOEFL dan TOAFL ... 83
Gambar 4.64 Halaman Data Dosen (Page 1) ... 84
Gambar 4.65 Halaman Data Dosen (Detail) ... 84
Gambar 4.66 Halaman Data Dosen (Page 2) ... 85
Gambar 4.67 Halaman Cari Data Dosen ... 85
Gambar 4.68 Halaman Cari Data Dosen (Field Terisi) ... 86
Gambar 4.69 Halaman Cari Data Dosen (Data Tidak Ditemukan) ... 86
Gambar 4.70 Halaman Cari Data Dosen (Data Ditemukan) ... 87
xx
Gambar 4.72 Halaman Logout ... 88 Gambar 4.73 Prototype Logout ... 89 Gambar 5.1 Hasil Perhitungan UEQ (Mean) ... 100 Gambar 5.2 Hasil Perhitungan UEQ (Skala Mean and Variance) ... 101
Uin Syarif Hidayatullah Jakarta BAB 1
PENDAHULUAN 1.1 Latar Belakang
Informasi merupakan kebutuhan yang sangat penting bagi setiap orang. Dengan adanya teknologi, penyebaran informasi dewasa ini sangat mudah dan cepat. Dalam perkembangannya, semua institusi, organisasi, dan sektor membutuhkan sistem informasi untuk mengolah dan memaksimalkan informasi yang ada agar lebih mudah, cepat, dan efektif untuk diakses oleh semua orang. Jika suatu lembaga menerapkan teknologi informasi ini dengan tepat, maka akan berdampak signifikan, seperti pencapaian visi, misi, dan berbagai hal yang berkaitan dengan pengembangan kelembagaan.
Di bidang akademik, sistem informasi juga menjadi hal yang umum di perguruan tinggi. Fungsi utama sistem informasi akademik adalah memberikan kemudahan bagi pengguna untuk mendapatkan dan mengakses informasi yang berkaitan dengan kegiatan akademik.
Universitas Islam Negeri Syarif Hidayatullah Jakarta atau UIN Jakarta adalah salah satu universitas yang terletak di Tangerang Selatan. UIN Jakarta memiliki 11 fakultas di dalamnya. Pembagian keilmuan terbagi menjadi dua, yaitu ilmu agama dan ilmu umum. Menurut data yang didapatkan dari Pangkalan Data Pendidikan Tinggi (PDDikti, 2020) pada tahun ajaran 2019/2020 terdapat 25957 mahasiswa dan 1024 dosen tetap di UIN Jakarta. Dengan jumlah sebanyak ini tentu dibutuhkan sistem informasi yang akan menunjang kegiatan perkuliahan. UIN Jakarta saat ini mempunyai sistem informasi akademis yang disebut AIS (Academic Information Sistem).
AIS UIN Jakarta adalah portal sistem informasi berbasis web yang digunakan oleh mahasiswa UIN Syarif Hidayatullah Jakarta. Sebagai sistem yang berperan besar dalam institusi pendidikan tinggi, tentunya sistem tersebut perlu memiliki kinerja
UIN Syarif Hidayatullah Jakarta yang baik dan akses yang cepat sehingga diharapkan mampu menghadapi situasi dimana banyak akses yang dilakukan oleh mahasiswa. Namun dari hasil kuisioner mengenai kinerja AIS kepada 150 mahasiswa UIN Syarif Hidayatullah Jakarta, sebanyak 53% responden menyatakan sering mengalami downtime server dan kinerja sistem yang lambat ketika banyak mahasiswa yang mengakses SIA. Selain kinerja sistem yang menurun, yang terjadi pada SIA saat ini karena penggunaan arsitektur monolitik yaitu sistem tidak dapat diakses ketika salah satu bagian dari sistem sedang dalam pemeliharaan yang menyebabkan seluruh sistem mengalami pemeliharaan total dan tidak dapat dilakukan. diakses. Ini karena setiap layanan pada arsitektur monolitik memiliki ketergantungan satu sama lain. Untuk mengatasi masalah tersebut, maka dibuatlah desain microservice untuk AIS UIN Jakarta. (Radhiyan, 2020).
Selain dalam segi performa, dari segi tampilan tentunya juga sangat berpengaruh untuk user experience. User experience merupakan pengalaman dan perasaan pengguna saat menggunakan suatu teknologi atau aplikasi tertentu. Oleh karena itu, perlu dilakukan perancangan aplikasi yang memenuhi kebutuhan pada aspek usability dan user experience di samping kebutuhan secara fungsional (Garrett, 2010). User experience menilai seberapa puas dan nyaman seseorang dengan produk, sistem, dan layanan. User experience memastikan bahwa aplikasi dapat memenuhi kebutuhan dan dapat digunakan oleh pengguna dengan pengalaman yang menyenangkan. Jika suatu aplikasi yang digunakan tidak dirancang dengan memperhatikan aspek user experience yang baik, maka akan mengakibatkan kebutuhan pengguna dalam menggunakan aplikasi tersebut tidak terpenuhi. Prinsip dalam membangun user experience adalah bahwa audiens dapat menentukan tingkat kepuasan mereka. (Widhiani et al., 2018). Sistem informasi akademik memiliki user interface atau antarmuka yang berfungsi untuk menghubungkan pengguna dengan
UIN Syarif Hidayatullah Jakarta informasi yang dibutuhkan dari sistem itu sendiri. Sistem informasi memiliki desain interface yang berbeda-beda sesuai dengan fungsi dan kebutuhan penggunanya.
User interface adalah salah satu faktor yang menentukan peningkatan traffic pada sebuah aplikasi. Karena user berinteraksi dengan logika pemrograman melalui user interface. Dan desain user interface sendiri menjadi sangat penting mengingat semakin efektif dan efisien suatu desain, maka user akan semakin senang menggunakan aplikasi tersebut (Aziza, 2019). Berdasarkan penelitian sebelumnya ditemukan bahwa berdasarkan ISO 13407, didapatkan hasil awal bahwa presentase 46,33% AIS UIN Jakarta masuk dalam kategori Biasa Saja. Dengan penilaian 3 kriteria ISO yang menghasilkan kategori Kurang Menarik dan 2 kriteria ISO dengan kategori Biasa saja (Waralalo, 2019). Hal ini mengartikan bahwa tampilan AIS UIN Jakarta saat ini tidak bisa diadaptasi untuk rancangan microservice yang telah dibangun. User interface AIS UIN Jakarta membutuhkan perubahan dari segi tampilan maupun kegunaannya sebagai interaktif mahasiswa. Untuk mencapai tujuan tersebut, dibutuhkan metode pengembangan UI/UX yang tepat agar tujuan utama AIS tercapai. Salah satu metode yang dapat digunakan adalah metode Five Planes. Metode Five Planes terdiri atas 5 elemen, yaitu strategy plane, scope plane, structure plane, skeleton plane, dan surface plane (Garrett, 2010). Secara umum, bidang paling bawah akan lebih abstrak dan bidang atas akan lebih konkrit. Dengan menggunakan metode Five Planes kerangka pengembangan UX lebih fleksibel dan dapat diadaptasi untuk pengembangan aplikasi berbasis web maupun aplikasi berbasis android (Destian, 2015). Pada penelitian yang dilakukan oleh (Syahrina & Kusumasari, 2020). Pada penelitian yang menggunakan metode Five Planes, tujuan utama pengembangan situs web dari tingkat strategis berhasil tercermin dalam antarmuka.
Di setiap bidang, ada elemen penting yang membangun antarmuka situs web. Pada
penelitian lainnya yang dilakukan oleh Jaiz (2018) dengan menggunakan Five Planes method pada aplikasi KRB Heritage menunjukkan hasil evaluasi usability testing
UIN Syarif Hidayatullah Jakarta perancangan medium fidelity didapatkan success rate untuk waktu dan time completion sebesar 100%. Dalam desain produk digital, User Interface sangat berpengaruh terhadap User Experience. Dengan digunakannya Five Planes Method ini diharapkan akan membuat tampilan desain antarmuka yang lebih baik lagi sehingga tujuan utama perancangan aplikasi berhasil tercermin dalam antarmuka.
Berdasarkan uraian di atas, penulis akan melakukan penelitian yang berjudul “Perancangan UI/UX Mikroservice Sistem Informasi Akademik Kampus Dengan Metode Perancangan Five Planes. (Studi Kasus : AIS Mahasiswa UIN Jakarta.” Dengan menggunakan metode tersebut diharapkan akan membantu untuk mengembangkan rancangan microservice AIS UIN Jakarta dari sisi User Interface dan User Experience berdasarkan kebutuhan pengguna agar aplikasi menjadi lebih baik sehingga tujuan utama dari pembuatan aplikasi tercapai.
1.2 Rumusan Masalah
Sesuai dengan permasalahan yang telah dikemukakan pada latar belakang, maka dari itu penulis merumuskan masalah yang akan diselesaikan sebagai berikut: Bagaimana mengembangkan rancangan microservice AIS UIN Jakarta dari sisi User Interface dan User Experience dengan menggunakan metode Five Planes?
1.3 Batasan Masalah
Batasan masalah dari penulisan penelitian ini mencakup 1.3.1 Metode
1. Menggunakan metode Five Planes untuk membangun User experience pada microservice AIS.
2. Menggunakan metode UEQ (User Experience Quesioner) untuk melakukan evaluasi.
UIN Syarif Hidayatullah Jakarta 1.3.2 Tools
1. Menggunakan Balsamiq Mockup untuk membangun wireframe. 2. Menggunakan Figma untuk membangun high fidelity prototype. 1.3.3 Proses
1. Prototype yang dibuat berbasis website.
2. Penelitian ini hanya sampai pada tahap testing design interface. 1.4 Tujuan Penelitian
Tujuan yang akan dicapai pada penelitian ini adalah untuk merancang tampilan User interface dan User experience pada microservice AIS untuk menunjang kegiatan perkuliahan dengan metode Five Planes.
1.5 Manfaat Penelitian 1.5.1 Bagi Penulis
1. Mengetahui prinsip dasar UI/UX.
2. Memberikan pemahaman dan pengetahuan tentang metode pengembangan UI/UX, khususnya metode Five Planes.
3. Memberikan pemahaman dan pengetahuan tentang pedoman atau prinsip dalam membangun UI/UX yang baik dan benar.
1.5.2 Bagi Universitas
1. Dapat menjadi karya ilmiah dalam ilmu teknologi informasi khususnya tentang UI/UX
2. Dapat dijadikan sebagai bahan acuan bagi peneliti lain yang berminat mengkaji permasalahan atau topik yang sama.
UIN Syarif Hidayatullah Jakarta 1.5.3 Bagi Pengelola
Memberikan rekomendasi apa saja yang diperlukan dalam pengembangan UI/UX aplikasi agar sesuai dengan kebutuhan pengguna.
1.6 Metodologi Penelitian
Metode yang digunakan penulis terbagi menjadi dua, yaitu metode pengumpulan data dan pengembangan sistem
1.6.1 Metode Pengumpulan Data
Merupakan metode digunakan penulis dalam melakukan penelitian lalu memprosesnya menjadi informasi yang diperlukan untuk mengetahui permasalahan yang dihadapi. Metode pengumpulan data yang digunakan adalah studi pustaka, wawancara, dan kuesioner.
1.6.2 Metode Pengembangan Sistem
Metode yang digunakan untuk mengembangkan User experience dan User interface dari microservice AIS UIN Jakarta.
1.7 Sistematika Penulisan
Sistematika penulisan dari karya tulis ini adalah sebagai berikut:
BAB I PENDAHULUAN
Pada bab ini penulis menjelaskan tentang latar belakang penelitian, rumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, metodologi dan sistematika penulisan.
UIN Syarif Hidayatullah Jakarta Bab ini menguraikan tentang landasan teori yang mendasari penulisan laporan tugas akhir ini, yaitu merancang prototipe aplikasi Microservice AIS dengan menggunakan metode Five Planes.
BAB III METODOLOGI PENELITIAN
Pada Bab ini berisi tentang metodologi yang digunakan dalam menyusun skripsi, seperti metodologi pengumpulan data dan metodologi dalam pengembangan prototipe aplikasi microserive AIS.
BAB IV ANALISIS DAN PERANCANGAN
Bab ini menjelaskan mengenai tahapan pengembangan prototipe aplikasi microserive AIS mulai dari tahap wawancara, perancangan wireframe, tahap desain, dan tahap pengujian.
BAB V HASIL DAN PEMBAHASAN
Bab ini menjelaskan rincian hasil pengujian serta analisis hasil pengujian.
BAB VI KESIMPULAN DAN SARAN
Pada bab ini berisi mengenai garis besar kesimpulan yang dibuat oleh penulis dan saran-saran yang diusulkan untuk pengembangan sistem lebih lanjut agar tercipta sistem yang lebih baik.
DAFTAR PUSTAKA
Daftar pustaka berisi rujukan-rujukan yang digunakan dalam penulisan
8 BAB II
LANDASAN TEORI 2.1 AIS UIN Jakarta
2.1.1 Pengertian AIS UIN Jakarta
AIS atau biasa disebut Sistem Informasi Akademik merupakan sebuah fasilitas sistem berbasis web yang berisikan profil dan perkembangan aktifitas akademik mahasiswa dari pemilihan mata kuliah hingga laporan penilaian, adapun didalamnya juga berisikan beberapa informasi yang ditujukan kepada mahasiswa, seperti kegiatan universitas atau himbauan untuk mahasiswa. Sistem AIS ini berada di jaringan Universitas Islam Negeri (UIN) Jakarta mulai digunakan pada tahun 2010. (Waralalo, 2019)
Academic Information System (AIS) adalah sistem administrasi akademik yang dikembangkan oleh UIN Syarif Hidayatullah Jakarta, dalam hal ini dilaksanakan oleh Pusat Teknologi Informasi dan Pangkalan Data (Pustipanda) sebagai leading sector-nya (Pustipanda, n.d.). Sistem ini sudah meliputi alur pendaftaran mahasiswa baru, aktivitas perkuliahan, beasiswa, sampai dengan wisuda. AIS dapat diakses di alamat http://ais.uinjkt.ac.id. (Pustipanda, 2017)
Saat ini, terdapat 2 cara untuk mengakses AIS UIN Jakarta, yang pertama adalah melalui website dan yang kedua adalah melalui application mobile.
2.1.2 Website AIS UIN Jakarta
Website AIS UIN Jakarta dibangun pada tahun 2010. Website ini dapat diakses secara online di komputer melalui browser seperti Mozilla Firefox, Internet Explorer dan Google Chrome. Berikut adalah tampilan website UIN Jakarta saat ini :
UIN Syarif Hidayatullah Jakarta Gambar 2. 1 Tampilan Website AIS UIN Jakarta. Sumber (AIS UIN Jakarta, 2021)
UIN Syarif Hidayatullah Jakarta 2.1.3 Aplikasi Mobile AIS UIN Jakarta
Aplikasi mobile AIS UIN Jakarta dibangun pada tahun 2015. Dan dirilis pada November 2018. Aplikasi Sistem Informasi Akademik berbasis Android ini merupakan salah satu solusi yang dibuat untuk menampilkan data AIS (Academic Information System) yang dibutuhkan oleh Dosen dan Mahasiswa pada ponsel dengan sistem operasi berbasis android. (Rolly & Hakiem, 2015). Tampilan aplkasi mobile AIS UIN Jakarta sempat mengalami beberapa kali perubahan. Berikut tampilan AIS mobile dari waktu ke waktu :
Gambar 2.2 Tampilan Aplikasi Mobile AIS UIN Jakarta tahun 2018. Sumber (APKPure, 2018)
UIN Syarif Hidayatullah Jakarta Gambar 2.3 Tampilan Aplikasi Mobile AIS UIN Jakarta tahun 2019. Sumber
(Muharram, 2019)
Gambar 2.4 Tampilan Aplikasi Mobile AIS UIN Jakarta tahun 2020. Sumber (Pustipanda, 2020)
UIN Syarif Hidayatullah Jakarta 2.2 User Interface
2.2.1 Definisi User Interface
User interface atau dalam bahasa Indonesia disebut antar muka adalah merupakan elemen penting dalam perangkat lunak dan menjadi jembatan antara manusia dengan objek digital sehingga terjadi dialog atau interaksi dua arah. (T.Suratno, 2016)
User interface menjadi penghubung langsung antara sistem dan pengguna. Oleh karena itu user interface harus dibuat dengan benar karena akan membentuk persepsi pengguna terhadap software. Perancangan user interface harus dibuat dengan memperhatikan kemudahan penggunaan agar dapat diterima masyarakat. Jika pengguna merasa user interface tidak menarik, sulit dipahami, menimbulkan rasa bosan, hal-hal tersebut dapat mengakibatkan gagalnya suatu aplikasi. (Susilo et al., 2018)
2.2.2 Jenis-Jenis User Interface
User interface terbagi menjadi dua jenis yaitu Command Line Interface (CLI) dan Graphical User Interface (GPU). (Handayaningtyas et al., 2019)
1. Command Line Interface (CLI) adalah proses pengguna memasukkan perintah berbasis teks atau dengan mengetik perintah untuk menjalankan tugas tertentu.
2. Graphical User Interface (GPU) adalah proses pengguna memasukkan perintah menggunakan menu grafik. Secara umum GPU dikembangkan untuk memudahkan pengguna dalam berinteraksi dengan sistem informasi. Tanpa disadari, pengguna aktif komputer dan perangkat elektronik lainnya telah menggunakan fitur Graphical User Interface (GPU), seperti MP3, MP4 player, dan perangkat game.
UIN Syarif Hidayatullah Jakarta 2.2.3 Prinsip Perancangan User Interface
Prinsip–prinsip dalam merancang user interface adalah sebagai berikut:
1. User familiarity (Mudah dikenali): Menggunakan istilah, konsep dan kebiasaan yang akrab oleh pengguna.
2. Consistency (Konsisten): Konsisten dalam operasi dan istilah di seluruh sistem sehingga tidak membingungkan.
3. Minimal surprise (Tidak membuat user kaget): Operasi bisa diprediksi prosesnya berdasarkan perintah yang diberikan.
4. Recoverability (Pemulihan): Recoverability ada dua macam; Confirmation of destructive action (konfirmasi terhadap tindakan yang merusak) dan ketersediaan fasilitas untuk pembatalan (undo)
5. User guidance (bantuan): Manual sistem online, menu bantuan, dan penjelasan terhadap ikon khusus tersedia.
6. User diversity (keberagaman): Fasilitas interaksi untuk berbagai jenis pengguna disediakan. (Reynaldi, 2019)
2.3 User Experience
2.3.1 Definisi User Experience
User Experince adalah pengalaman pengguna dalam merasakan kemudahan dan efisiensi dalam interaksi manusia-komputer. Termasuk persepsi seseorang tentang aspek praktis seperti kegunaan, kemudahan penggunaan, dan efisiensi sistem yang ada (Kristyawati & Jamilah, 2020) 2.3.2 Komponen inti dalam User Experience
Dalam user experience (UX) design terdapat 6 komponen penting yang perlu diketahui, yakni usability, interaction design, visual design, information architecture, content strategy, dan user research. Dengan
UIN Syarif Hidayatullah Jakarta memahami keenam komponen tersebut maka dapat membantu dalam mengimplementasikan desain UX dengan baik agar suatu produk menjadi lebih unggul dibandingkan dengan produk lain. (Garrett, 2011).
1. User research. User research riset pengguna adalah tindakan mewawancarai calon pengguna untuk memperjelas beberapa tujuan. Dengan melakukan riset pengguna dapat membantu mengetahui kelemahan-kelemahan yang ada sebelum diluncurkan. Selain itu dapat memperkuat potensi sehingga tujuan pembuatannya dapat tersampaikan kepada penggunanya.
2. Content strategy. Content strategy atau strategi konten didasarkan pada perencanaan, pembuatan, pengiriman, dan pengelolaan konten aplikasi. Tujuan dari strategi konten ini adalah untuk membuat konten yang berkelanjutan, menarik, dan berkelanjutan. Dengan begitu, pengguna akan tertarik dan bisa bertahan menggunakan aplikasi yang dibuat. 3. Information architecture. Arsitektur informasi adalah komponen desain
pengalaman pengguna yang tak terlupakan. Arsitektur informasi adalah pembuatan struktur informasi pada suatu produk agar mudah dipahami oleh pengguna. Komponen arsitektur informasi memudahkan pengguna dalam menggunakannya sehingga pengguna dapat menggunakannya secara optimal.
4. Interaction design. Interaction design atau desain interaksi adalah desain interaksi antara pengguna dan sistem. Tujuan utama dari desain interaksi adalah untuk memudahkan pengguna dalam menggunakannya tanpa harus merasa bingung atau kesulitan.
5. Visual design. Ketika desain interaksi telah dibuat sesuai dengan yang diinginkan dalam produk, komponen selanjutnya yang tidak kalah pentingnya adalah desain visual. Komponen ini perlu memperhatikan
UIN Syarif Hidayatullah Jakarta berbagai elemen tampilan visual mulai dari garis, bentuk, pilihan warna, tekstur visual, tipografi hingga tampilan visual animasi atau tiga dimensi. Masing-masing elemen tersebut harus mampu memberikan kenyamanan saat pengguna berinteraksi dengan apa yang dibuat. 6. Usability. Saat mengimplementasikan desain UX dalam mendesain
sebuah aplikasi, hal pertama yang harus diperhatikan adalah komponen usability. Arti usability atau kegunaan adalah sejauh mana pengguna tertentu dapat menggunakannya untuk mencapai tujuan tertentu secara efisien, efektif, dan pengguna menjadi puas saat menggunakannya.
2.4 Sistem Informasi Akademik
2.4.1 Pengertian Sistem Informasi Akademik
Sistem informasi akademik adalah sistem yang dibuat untuk mengolah data dan informasi yang berkaitan dengan akademik dalam suatu organisasi atau lembaga pendidikan, baik formal maupun informal, dari tingkat dasar hingga perguruan tinggi. Singkatnya, sistem informasi akademik merupakan suatu aplikasi yang dapat memfasilitasi pengolahan data dan informasi yang berkaitan dengan masalah akademik (Suryandani et al., 2017). Menurut Pangaribuan dan Subakti, sistem informasi akademik adalah sistem yang memberikan layanan informasi berupa data-data dalam hal-hal yang berkaitan dengan akademik. Dimana dalam hal ini layanan yang diberikan antara lain: penyimpanan data siswa baru, penentuan kelas, penentuan jadwal pelajaran, pembuatan jadwal pengajaran, pendistribusian wali kelas, dan proses penilaian. Berdasarkan uraian di atas, dapat disimpulkan bahwa sistem informasi akademik berbasis web adalah sistem yang dirancang untuk mengumpulkan berbagai macam data yang dikelola dan diolah secara otomatis dengan alat dan metode online tertentu. SIA akan menghasilkan informasi yang dibutuhkan untuk melaksanakan kegiatan akademik dengan baik guna memberikan
UIN Syarif Hidayatullah Jakarta kualitas layanan yang memuaskan bagi pengguna. Penerapan sistem akademik dengan menggunakan SIA dirasa lebih efektif dan efisien (Pangaribuan & Subakti, 2019).
2.4.2 Manfaat Sistem Informasi Akademik
Sistem informasi akademik memberikan beberapa manfaat bagi penggunanya antara lain:
1. Meningkatkan informasi akademik, pembentukan sistem informasi akademik untuk meningkatkan informasi akademik bagi mahasiswa dan sangat penting bagi dosen, dengan adanya sistem informasi akademik tersebut dosen dapat mengetahui secara tepat terutama tentang jadwal mengajar dan mengenal lebih jauh tentang mahasiswa.
2. Sistem informasi akademik membantu penentuan jadwal kuliah dan ploting mata kuliah. Dengan mengetahui jadwal yang bisa langsung diakses, dapat memberikan kesempatan kepada mahasiswa langsung memilih kelas atau kelas yang lainnya sesuai keinginan.
3. Pengiriman data yang cepat, banyak keuntungan dari adanya SIA yang dirasakan antara lain untuk melihat data yang diminta terutama data akademik sangat cepat, bagi mahasiswa sendiri menjadi lebih cepat karena terkoneksi dengan internet, hemat karena tidak perlu untuk datang ke kampus. Namun bisa dilakukan di rumah atau melalui internet dimanapun mereka berada. 4. Mengurangi biaya operasional. Sistem Informasi Akademik (SIA) terbukti
efektif memangkas biaya operasional pengelolaan data akademik, terutama dalam hal efektivitas kerja dan biaya alat tulis kantor. (Anwar, 2016).
UIN Syarif Hidayatullah Jakarta 2.5 Microservice
2.5.1 Definisi Microservice
Microservice merupakan arsitektur perangkat lunak yang mengambil konsep sistem terdistribusi (distributed systems) dan arsitektur berorientasi layanan atau SOA (Services Oriented Architechture). Microservices membagi sistem besar menjadi layanan-layanan kecil, independen, namun saling bekerja sama dan berkomunikasi menggunakan panggilan jaringan (network calls) atau API (application programming interface). Setiap layanan pada microservices berfokus untuk mengerjakan satu pekerjaan sesuai fungsionalitasnya, yang akan memudahkan dalam proses pengembangan, perbaikan, dan berbagai hal yang sulit dilakukan bila dikerjakan pada sistem yang besar (Newman, 2015). Microservices muncul untuk mengatasi batasan-batasan yang didapat dalam pengembangan tradisional menggunakan arsitektur monolitik, yang membangun seluruh sistem perangkat lunak dengan basis kode dan basis data yang sama, dan dapat mempengaruhi kinerja sistem bila terus berkembang dan menjadi sangat besar. Berikut adalah perbandingan diagram dari desain monolitik, desain monolitik dengan SOA, dan desain microservices (Sharma et al., 2016)
UIN Syarif Hidayatullah Jakarta Gambar 2.5 Desain Monolitik Tradisional. Sumber (Sharma et al., 2016)
UIN Syarif Hidayatullah Jakarta Gambar 2.7 Desain microservices. (Sharma et al., 2016)
Pada Gambar 2.5, diperlihatkan desain arsitektur monolitik. Dalam desain ini, seluruh komponen dibungkus menjadi satu kesatuan saling terhubung satu sama lain, dan menggunakan satu basis data yang sama. Tidak jauh berbeda, pada Gambar 2.6, diperlihatkan desain arsitektur monolitik berbasis layanan, dimana aplikasi dikembangkan berdasarkan layanannya, namun tetap dibungkus bersamaan. Berbeda dari kedua gambar sebelumnya, pada gambar 2.7 diperlihatkan desain microservices yang mana setiap komponen terpisah seluruhnya dan tidak terhubung satu sama lain dikarenakan desain dan pengembangannya berbasis komponen masing-masing layanan. Setiap layanan juga memiliki lapisan, API, dan basis data sendiri (Sharma et al., 2016).
Dalam (Newman, 2015), mengungkapkan beberapa keuntungan dalam menggunakan microservices, yaitu sebagai berikut :
UIN Syarif Hidayatullah Jakarta 1. Technology heterogeneity. Dalam penerapannya, pengembang sistem
dapat menggunakan teknologi yang tepat sesuai dengan kebutuhan layanan. Selain itu, dengan sistem yang terdiri dari beberapa layanan, pengembang sistem dapat memiliki tempat baru untuk mencoba teknologi baru. Pengembang dapat memilih layanan dengan resiko paling rendah dan menguji teknologi di sana, sehingga dapat menyerap teknologi baru dengan lebih cepat.
2. Resilience. Kunci dari teknik resiliensi adalah sekat. Jika satu komponen sistem pada microservices mengalami kegagalan, alih-alih seluruh sistem mengalami kegagalan total, sistem akan tetap berjalan dan mengisolasi sistem yang sedang mengalami kegagalan. Dengan microservices, pengembang sistem dapat membangun sistem yang mampu menangani kegagalan total layanan dan menurunkan fungsionalitasnya.
3. Scaling. Dengan microservices, memungkinkan pengembang sistem untuk hanya mengukur layanan yang memang perlu dilakukan pengukuran, tanpa harus mengukur seluruh layanan seperti pada arsitektur monolitik. 4. Ease of deployment. Dengan microservices, untuk mengubah satu baris
kode pada suatu layanan dan menjalankannya kembali dapat dilakukan tanpa melibatkan layanan-layanan lain yang tidak memerlukan perubahan, sehingga perubahan dapat dilakukan lebih cepat.
5. Organizational alignment. Dengan menerapkan microservices akan memudahkan pembagian jumlah orang yang bekerja untuk setiap layanan, sehingga kinerja tim menjadi lebih produktif.
6. Composability. Dengan microservices, komposisi layanan dapat dilakukan dengan mudah, karena proses pemilihan dan penyusunan setiap layanan hanya perlu untuk memperhatikan interface antar layanan.
UIN Syarif Hidayatullah Jakarta 7. Optimizing for replaceability. Dengan layanan microservices yang
berukuran kecil, biaya untuk mengganti layanan dengan implementasi yang lebih baik, atau penghapusan layanan, jauh lebih mudah untuk dikelola. Hambatan untuk melakukan penulisan ulang atau penghapusan layanan seluruhnya juga menjadi sangat rendah.
Selain itu, beberapa kelebihan dari arsitektur microservices juga ditambahkan oleh (Taibi et al., 2018), diantaranya yaitu :
1. Increased maintainability. Dalam penelitiannya menjelaskan bahwa ini merupakan karakteristik utama dari implementasi berbasis microservices yang dilaporkan oleh semua makalah yang ditelitinya.
2. Reuse. Pemeliharaan satu microservice akan mencerminkan setiap proyek yang terhubung, mengurangi upaya overhead dengan menerapkan perubahan yang sama untuk komponen yang sama, yang digunakan dalam berbagai proyek.
3. Observability. Arsitektur microservices membantu menvisualisasikan “status kesehatan” dari setiap layanan dalam sistem agar dapat dengan cepat menemukan dan merespons setiap masalah yang terjadi.
4. Unlimited application size. Dalam aplikasi monolitik, ukuran aplikasi dibatasi oleh perangkat keras dan spesifikasi wadah web, sementara microservices secara teori dapat membangun sistem tanpa batas ukuran. 2.5.2 Rancangan Microservice AIS UIN Jakarta
Penelitian ini didasarkan oleh perancangan arsitektur microservice perangkat lunak yang dibangun oleh M. Fathan Radhiyan. Berikut adalah hasil arsitektur microservice yang telah dirancang :
UIN Syarif Hidayatullah Jakarta Dalam desain arsitektur microservices untuk sistem informasi akademik AIS UIN Jakarta ini menggunakan API gateway, pola yang menjadi rekomendasi untuk digunakan dalam microservices, sebagai jalur masuk utama setiap request dari sisi klien. API gateway dapat mengatur jumlah request per klien, sehingga interaksi menjadi lebih sederhana dan kinerja sistem menjadi lebih baik. Selain itu, API gateway sebagai layanan juga berperan dalam mengatasi beberapa permasalahan utama, termasuk : 1) bagaimana berhubungan dengan fitur-fitur seperti security, caching, pembatasan, dan monitoring pada satu tempat, 2) bagaimana membatasi komunikasi yang terlalu dalam antara klien dan microservices, 3) bagaimana memenuhi kebutuhan klien yang bervariasi, 4) cara merutekan permintaan dari microservices backend, 5) bagaimana menemukan instansi microservices yang sedang berjalan, dan 6) bagaimana menemukan ketika terdapat instansi microservices yang tidak berjalan (Gadge & Kotwani, 2017).
Namun, sebagai single entry point, API gateway berpotensi mengalami bottleneck atau hambatan bila menerima banyak request. Untuk itu, Fathan menggunakan framework API berbasis graph, yaitu GraphQL, yang dirancang untuk mendukung pengambilan data yang efisien. Dengan GraphQL, klien dapat mengambil data yang dibutuhkan dalam sekali request ke dalam API gateway. Gambar di bawah ini, menunjukkan bagaimana desain arsitektur microservices dengan GraphQL sebagai API gateway.
UIN Syarif Hidayatullah Jakarta Gambar 2.8 Desain Arsitektur Microservices Sistem Informasi Akademik AIS
UIN Jakarta dengan GraphQL sebagai API gateway
Pada Gambar 2.8, klien terlebih dahulu mengirimkan request data ke API gateway, yang menggunakan Apollo GraphQL Server sebagai API gateway guna memudahkan komunikasi dengan GraphQL API (Stemmler, 2020c). Penggunaan Apollo Server juga diperlukan untuk menggabungkan schema-schema GraphQL dari tiap service yang ada menjadi sebuah schema tunggal menggunakan metode schema stitching, yang bertujuan membuat basis kode yang besar lebih mudah dikelola dengan memisahkan API yang besar menjadi layanan GraphQL yang lebih kecil dan terpisah (Touronen, 2019).
Penerapan arsitektur microservices terhadap sistem informasi akademik AIS UIN Jakarta dinilai tepat dikarenakan sistem informasi akademik merupakan sistem yang besar dan akan terus berkembang, dan karena hal ini pula penggunaan arsitektur monolitik dinilai tidak tepat dikarenakan penggunaan arsitektur monolitik yang lebih cocok digunakan pada aplikasi kecil dan lebih sederhana. Service yang terpisah juga memberikan keuntungan yang lebih baik dibandingkan arsitektur monolitik yang besar dan saling
UIN Syarif Hidayatullah Jakarta terhubung, seperti pemisahan masalah antar services, juga pengembangan setiap services yang dapat dikembangkan dengan tools yang berbeda, seperti database, bahasa pemrograman, monitoring, testing, dan pembangunan pipelines. Alasan lain untuk membagi aplikasi monolitik menjadi banyak microservices adalah untuk memangkas biaya saat menggunakan modern pay-by-usage cloud platform-as-a-service (PaaS), yaitu model komputasi awan dimana pihak ketiga mengirimkan hardware dan software tools kepada users melalui internet (Rouse, 2020), seperti AWS dan Azure, yang memungkinkan scaling dilakukan hanya pada aplikasi yang memang perlu dilakukan scaling, alih-alih men-scaling seluruh aplikasi monolitik (Touronen, 2019). Pembahasan lebih lanjut mengenai penggunaan platform-as-a-service (PaaS) pada microservices merupakan peluang untuk penelitian selanjutnya.
Penerapan microservices pada arsitektur sistem informasi akademik juga diperkuat dengan adanya penelitian tentang desain konsep arsitektur microservices pada sistem informasi akademik iGracias Universitas Telkom, dimana penggunaan arsitektur microservices dievaluasi menggunakan pendekatan ATAM. Dari hasil evaluasi dengan pendekatan ATAM dengan koresponden adalah programmer unit sistem informasi akademik Universitas Telkom, disimpulkan bahwa arsitektur microservices dapat diterapkan dan menjadi alternatif solusi untuk sistem informasi akademik iGracias dengan sifat modularity, independent, scalability, dan maintainability (Rezaldy et al., 2017). 2.6 Five Planes Method
Metode Five Planes adalah kerangka kerja untuk menggambarkan bagaimana user experience dapat dirancang. Dengan metode ini, user experience dari suatu produk akan lebih mudah dijelaskan dalam bentuk model konseptual, baik dari segi pemecahan masalah maupun cara penyelesaiannya. Metode Five Planes terdiri dari lima bidang: surface, skeleton, structure, scope dan strategy. Setiap bidang akan
UIN Syarif Hidayatullah Jakarta melakukannya bergantung pada bidang di bawahnya, jadi aplikasi harus dimulai dari bidang paling bawah. Umumnya, bidang paling bawah lebih abstrak dan bidang atasnya lebih konkrit.(Garrett, 2011).
Gambar 2.8 Bidang-bidang Five Planes 2.6.1 Strategy plane
Strategy plane adalah bidang yang berada di paling bawah. Di bidang ini, kita akan mengetahui product objective. Product objective adalah tujuan yang berasal dari dalam organisasi atau perusahaan yaitu tujuan bisnis seperti tujuan, sasaran, dan lain-lain. Selain tujuan produk, kami juga akan mencari tahu tentang user needs. User needs merupakan tujuan produk dari luar organisasi atau perusahaan yaitu pengguna yang akan menggunakan produk. Perancang harus tahu apa yang diinginkan pengguna untuk produk dan apakah produk tersebut memenuhi tujuan ini (Garrett, 2011).
UIN Syarif Hidayatullah Jakarta 2.6.2 Scope plane
Setelah strategi dibuat, kita perlu mengetahui bagaimana tujuan produk dan kebutuhan pengguna dapat terpenuhi. Proses ini terjadi di bidang Scope plane., di bidang ini menentukan functional spesification dan content requirement. Functional spesification merupakan gambaran fitur-fitur yang akan ada pada produk. Content requirement adalah deskripsi sekumpulan elemen konten yang akan ada di dalam produk..
2.6.3 Structure plane
Pada structure plane, fitur dan fungsi yang ditentukan dalam sebelumnya digabungkan menjadi sesuatu yang lebih kohesif dan mewakili sistem secara keseluruhan. Bidang ini terdiri dari interaction design dan information architecture. Di dalam interaction design kita mendefinisikan bagaimana sistem menanggapi apa yang dilakukan pengguna. Intinya, kita akan membuat user flow/flow task yang akan dilalui pengguna dari awal menggunakan produk hingga akhir (hingga tujuan pengguna terpenuhi). Information architecture adalah penataan elemen konten untuk membantu pengguna memahami informasi yang ditampilkan pada produk yang isinya akan dikelompokkan ke dalam kategori atau menu. (OKTAVITANTRI, 2018) 2.6.4 Skeleton plane
Skeleton plane adalah elemen di tingkat keempat. Elemen ini terdiri dari information design, interface design, dan navigation design. Pada titik ini, telah memulai bagian desain. Information design adalah penyajian informasi untuk memudahkan pemahaman. Informasi yang telah dikelompokkan dalam arsitektur informasi akan dimasukkan ke dalam layar. Interface design merupakan penataan elemen antarmuka sehingga memungkinkan pengguna untuk mulai dapat berinteraksi dengan fungsi atau fitur produk. Desain interface ini berbentuk wireframe. Navigation design adalah sekumpulan
UIN Syarif Hidayatullah Jakarta elemen layar yang memungkinkan pengguna untuk berpindah melalui arsitektur informasi. Implementasi dari skeleton plane adalah pembuatan wireframe yang akan memberikan gambaran kasar dari interface produk yang akan digunakan oleh pengguna. Skeleton plane dirancang untuk mengoptimalkan pengaturan bidang yang ada untuk efek dan efisiensi maksimum.
2.6.5 Surface Plane
Terakhir, pada Surface Plane, kerangka gambar yang dibuat digabungkan dengan konten dan estetika masing-masing untuk menghasilkan situs web fungsional yang memenuhi persyaratan bidang sebelumnya dan memiliki antarmuka yang menyenangkan. Bidang ini terdiri dari pengalaman pengguna, yang diwujudkan dalam bentuk high-fidelity design. High-fidelity design adalah desain yang sangat detail dalam hal font, warna, resolusi, dan lain-lain.
2.7 UEQ
2.7.1 Pengertian UEQ
User Experience Questionnaire (UEQ) erupakan alat pengolah data survei terkait pengalaman pengguna yang mudah diterapkan, andal, dan valid, melengkapi data dari metode evaluasi lain dengan penilaian kualitas subjektif. UEQ memungkinkan penilaian cepat dari pengalaman pengguna produk interaktif. Skala kuesioner dirancang untuk menangani tayangan pengalaman pengguna yang komprehensif. Format kuesioner mendukung tanggapan pengguna untuk segera mengungkapkan perasaan, kesan, dan sikap saat menggunakan suatu produk. User Experience Questionnaire (UEQ) dipahami sebagai kesan keseluruhan pengguna ketika pengguna berinteraksi dengan suatu produk yang mencakup 3 aspek yaitu Attractiveness (Daya Tarik), Pragmatic quality dan Hedonic quality (Schrepp, 2019). Aspek attractiveness
UIN Syarif Hidayatullah Jakarta merupakan dimensi valensi murni, yaitu berkaitan persepsi pengguna akan daya tarik sistem. Aspek pragmatis menunjukkan persepsi atas aspek teknis yang fokus pada tercapainya tujuan dalam desain suatu sistem atau layanan. Maka tujuan bisa tercapai apabila tugas dapat dilaksanakan secara cepat dan efisien (effeciency dimension), mudah dipahami (perspicuity dimension), dan tidak mengekang (dependability dimension). Sedangkan aspek hedonis merupakan aspek non teknis yang bersentuhan dengan emosi pengguna. Aspek ini merupakan kesenangan yang memotivasi (stimulation dimension) dan desain yang terbarukan (novelty dimension). Gambar 2.9 berikut menunjukkan struktur aspek-aspek butir dari kuesioner UEQ (Schrepp, 2019).
Gambar 2.9 Struktur aspek-aspek butir dari kuesioner UEQ UEQ berisi 6 skala dengan total 26 item yakni:
1. Attractiveness : Impresi umum pengguna atas produk, suka atau tidak suka. Item ukuran: annoying/enjoyable, Good/Bad, unlikable/pleasing,
UIN Syarif Hidayatullah Jakarta 2. Efficiency: kemungkinan pemakaian produk dengan cepat dan efisien,
keterorganisasian antarmuka. Item ukuran: fast/slow, inefficient/efficient, impractical/practical, organized/cluttered.
3. Perspicuity: kemudahan memahami pemakaian produk dan membiasakannya. Item ukuran: not understandable/ understandable, easy to learn/difficult to learn, complicated/ easy, clear/confusing.
4. Dependability: perasaan pengguna dalam kendali interaksi, keamanan dan memenuhi harapan. Item ukuran: unpredictable/predictable, obstructive/ supportive, secure not secure, meets expectations/does not meet expectations.
5. Stimulation: yang menarik dan menyenangkan dari penggunaan produk, motivasi pengguna ingin lebih memakainya. Item ukuran: valuable/inferior, boring/exiting, not interesting/interesting, motivating/demotivating.
6. Novelty: desain produk inovatif dan kreatif, menarik perhatian pengguna. Item ukuran: creative/dull, inventive/ conventional, usual leading edge, conservative/innovative.
Instrumen penelitian yang digunakan adalah UEQ yang berisi pertanyaan-pertanyaan untuk mengukur pengalaman pengguna responden. UEQ terdiri dari pasangan-pasangan yang saling bertentangan dalam arti. Direpresentasikan hasil dengan 7 (tujuh) skala seperti yang ditunjukkan pada Gambar 2.10. (Wulandari & Farida, 2018)
UIN Syarif Hidayatullah Jakarta Gambar 2.10 Tujuh Skala Penilaian UEQ
Untuk mendapatkan gambaran yang lebih baik tentang kualitas produk, perlu dilakukan perbandingan pengalaman pengguna produk yang diukur dengan hasil produk mapan lainnya, misalnya dari kumpulan data benchmark yang berisi beberapa jenis produk yang berbeda. Tolok ukur UEQ mengklasifikasikan produk ke dalam lima kategori (skala) sebagai berikut: 1. Excellent: termasuk dalam kisaran 10% produk yang memiliki skor
tertinggi.
2. Good: 10% produk pada dataset memiliki skor yang lebih tinggi, sedangkan 75% lainnya lebih rendah.
3. Above average: 25% produk pada dataset memiliki skor yang lebih tinggi, sedangkan 50% lainnya lebih rendah.
4. Below average: 50% produk pada dataset memiliki skor yang lebih tinggi, sedangkan 25% lainnya lebih rendah.
UIN Syarif Hidayatullah Jakarta Gambar 2.11 Skala Benchmark UEQ
2.7.2 Tahapan Evaluasi UEQ
Hasil analisa data UEQ menggunakan data tools UEQ dalam format .xlsx (Microsoft Excel). Data yang didapat dari hasil kuesioner dapat langsung dimasukan pada data tools UEQ pada menu Data, peneliti memasukan data responden ke dalam menu Data. Data tools UEQ memiliki beberapa tahapan, yaitu:
1. Konversi Data
Data responden yang telah dimasukan ke excel akan mengalami proses konversi data yaitu urutan nilai (positif kanan dan negatif kiri) diacak dalam kuesioner untuk meminimalkan kecenderungan jawaban. Seperti pada gambar 2.12 di bawah ini:
UIN Syarif Hidayatullah Jakarta Gambar 2.12 Konversi Data UEQ. Sumber (Umar et al., 2020)
Gambar 2.12 menunjukkan proses urutan nilai yang digunakan untuk meminimalkan kecenderungan jawaban dari setiap penelian. Data yang dikonversi akan menghasilkan nilai rata-rata perorang dengan masing-masing pengelompokkan berdasarkan aspek. Berikut rumus dari konversi data:
2. Hasil utama
Setelah data dikonversi, data dihitung kembali untuk mendapatkan hasil utama yaitu Result. Result adalah hasil utama dari UEQ yang menjadi tolak ukur untuk perhitungan selanjutnya yaitu benchmark. Skala keseluruhan dan skala asumsi dihitung menggunakan nilai rata-rata dan varian dari hasil rata-rata konversi data. Penentuan hasil ratarata skala memiliki nilai standar yaitu
-UIN Syarif Hidayatullah Jakarta 0.8 dan 0.8 merupakan hasil normal, nilai >0.8 merupakan nilai positif dan nilai negatif. Perhitungan result:
3. Set Data Benchmark
UEQ menggunakan standar benchmark, dengan data yang didapatkan dari 20190 orang dari 452 studi. Hasil rata-rata dan analisa result digunakan untuk mendapatkan nilai perbandingan. Nilai standar benchmark yaitu:
Excellent: Hasil mean >1.75, Good: Hasil mean >1.2,
Above Average: Hasil mean >1.17, Below Average: Hasil mean >0.7, dan Bad: Hasil mean <0.7.
2.8 Metode Pengumpulan Data 2.8.1 Studi Pustaka
Studi pustaka adalah metode pengumpulan data sekunder yang bersumber pada buku, literatur, jurnal-jurnal, referensi yang terkait dengan penelitian yang sedang dilakukan. (Sondak et al., 2019)
2.8.2 Kuisioner
Kuesioner atau angket adalah metode pengumpulan data dengan cara memberikan sekumpulan pertanyaan yang harus dijawab oleh responden.
UIN Syarif Hidayatullah Jakarta Kuisioner merupakan sekumpulan pertanyaan yang digunakan untuk memperoleh informasi dari responden terkait dengan pribadinya maupun hal-hal lain yang terkait dengan materi penelitian (Nugroho, 2018).
Terdapat tiga jenis kuisioner, yaitu kuisioner terbuka, tertutup, dan campuran. Kuisioner terbuka merupakan kuisioner dengan pertanyaan yang dapat dijawab oleh responden secara bebas, tanpa pilihan jawaban apapun, sementara kuisioner tertutup memberikan pertanyaan dengan pilihan jawaban tertentu kepada responden. Kemudian kuisioner campuran merupakan perpaduan dari kuisioner terbuka dan tertutup, dimana terdapat pilihan jawaban yang disediakan namun responden tetap dapat menjawab sesuai kemauan mereka.
Terdapat beberapa rumus untuk menenntukan sampling, diantaranya rumus sampling Taro Yamane. Yamane memberikan rumus yang disederhanakan untuk menghitung ukuran sampel (Israel, 2012) sebagai berikut :
n = 𝑁
N. 𝑑2+ 1
n = Jumlah sampel N = Jumlah populasi
d = Presisi yang ditetapkan 10% 2.8.3 Wawancara
Wawancara adalah tanya jawab yang terjadi antara orang yang mencari informasi (pewawancara) dengan orang yang memberi informasi (narasumber) dengan tujuan untuk mengumpulkan data atau memperoleh informasi (Faishal, 2018). Pengumpulan data dengan teknik ini dapat
UIN Syarif Hidayatullah Jakarta digunakan untuk memperoleh data yang bersifat fakta, misalnya umur, pekerjaan, dll. Wawancara dapat pula digunakan untuk mengetahui sikap, pendapat, pengalaman, dll.
Tabel 2.1 merupakan perbandingan dari beberapa penelitian sebelumnya yang telah penulis kumpulkan mengenai analisis UI / UX pada Sistem Informasi Akademik. Hal ini dimaksudkan untuk mengkaji dan mengetahui kelebihan dan kekurangan penelitian sebelumnya sehingga diharapkan penelitian ini dapat menjadi pelengkap atau penyempurnaan dari penelitian yang sudah ada.
Tabel 2.1 Studi Literatur Sejenis
No. Judul Penulis Hasil Kelebihan Kekurangan
1. Analisis User Interface (UI) dan User
Experience (UX) pada AIS UIN Jakarta Menggunakan Metode Heuristik Evaluation dan Webuse dengan Standar Iso 13407 (2019)
Mumtaz Haya Waralalo
Berhasil melakukan evaluasi UI/UX dari AIS UIN Jakarta dengan metode heuristic evaluation dan Web Usability Tool Evaluation sehingga didapatkan rekomendasi perbaikan untuk meningkatkan kualitas tampilan dan
penggunaannya. Evaluasi yang dilakukan ditunjang dengan kuesioner berdasarkan aspek cakupan ISO 13407.
Menggunakan banyak metode untuk melakukan evaluasi. Sehingga AIS UIN Jakarta dievaluasi dari banyak sisi.
Saat penulis
memberikan desain interface usulan, tidak disertai dengan metode yang menunjang.
