Deka Dwi Rhamadani-Fst

DESAIN PROTOTIPE APLIKASI PEMBELAJARAN
JARAK JAUH MENGGUNAKAN METODE UCD

(Studi Kasus : PT Multi Media Access)
Skripsi
Diajukan sebagai salah satu syarat sarjana
Oleh :
Deka Dwi Rhamadani
NIM : 11160910000068
PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH
JAKARTA
2021/1442 H
LEMBAR PERSETUJUAN
DESAIN PROTOTIPE APLIKASI PEMBELAJARAN JARAK JAUH

MENGGUNAKAN METODE UCD
(Studi Kasus : PT Multi Media Access)

Skripsi
Oleh :
Deka Dwi Rhamadani 11160910000068
Menyetujui,
Dosen Pembimbing I,
Dosen Pembimbing II,
Viva Arifin, MMSI Yusuf Durachman, MIT

NIP. 197308102006042001 NIP. 197308102006042001
Mengetahui,
Ketua Program Studi Teknik Informatika
Dr. Imam Marzuki Shofi, M.T

NIP. 197202052008011010
ii
LEMBAR PENGESAHAN
iii
PERNYATAAN ORISINALITAS
iv
PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI
Sebagai sivitas akademik UIN Syarif Hidayatullah Jakarta, saya yang bertanda tangan di
bawah ini:
Nama : Deka Dwi Rhamadani
NIM : 11160910000068
Program Studi : Teknik Informatika
Fakultas : Sains dan Teknologi
Jenis Karya : Skripsi
Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada

Universitas Islam Negeri Syarif Hidayatullah Jakarta Hak Bebas Royalti Noneksklusif
(Non-exclusive Royalty Free Right) atas karya ilmiah saya yang berjudul :
“DESAIN PROTOTIPE APLIKASI PEMBELAJARAN JARAK JAUH

MENGGUNAKAN METODE UCD (Studi Kasus : PT Multi Media Access)”
Beserta perangkat yang ada (jika diperlukan. Dengan Hak Bebas Royalti Nonekslusif 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/pecipta dan sebagai pemilik Hak Cipta.
Demikian Pernyataan ini saya buat dengan sebenarnya.
Dibuat di : Tangerang Selatan
Pada tanggal : 05 Agustus 2021
Yang menyatakan
Deka Dwi Rhamadani
v
Nama : Deka Dwi Rhamadani
Program Studi : Teknik Informatika
Judul : Desain Prototipe Aplikasi Pembelajaran Jarak Jauh
Menggunakan Metode UCD
ABSTRAK
Pada saat ini seluruh kehidupan manusia di bumi ini terganggu dengan adanya
pendemi covid-19. Seluruh negara yang ada didunia termasuk di Indonesia
terpaksa harus memutuskan menutup semua kegiatan yang ada di sekolah,
perkantoran, perindustrian, serta perguruan tinggi. Dengan ini pemerintah
Indonesia harus terpaksa mengambil keputusan untuk menutup semua kegiatan
dan sekolah yang ada di daerah yang sudah terdampak covid-19 untuk
mengurangi dan mencegah kontak langsung dengan orang-orang dan untuk
menyelamatkan anak-anak dari covid-19. Salah satu bidang yang paling
terdampak yaitu dalam dunia pendidikan, sehingga proses kegiatan belajar
mengajar menjadi terganggu. Akibat dari dampak tersebut guru dan siswa
melakukan proses kegiatan belajar mengajar dilakukan di rumah (online)/daring.
Banyak para guru mengeluh dengan adanya pembelajaran dilakukan di rumah
(online)/daring, sebab guru kesulitan mengajar, mengabsen kehadiran siswa,
memberikan materi/tugas kepada anak-anak didiknya. Dengan belajar dirumah
siswa jadi malas untuk belajar malah kebanyakan bermain game. Selain itu siswa
terkadang kesulitan dalam mengumpulkan tugas yang diberikan oleh guru,
karena siswa harus paket data untuk mengubungkan ke jaringan internet.
Kebanyakan juga siswa mengalami kesulitan mencari signal di rumahkan ketika
harus mengumpulakan tugas melalui aplikasi chatting ataupun sejenisnya.
Terkadang siswa bingung untuk menjawab peratanyaan dari guru karena tidak
diberi materi oleh guru, terkadang siswa membeli materi disalah satu aplikasi
yaitu ruang guru, namun dengan membeli membuat pengeluaran dana orang tua
makin banyak, terkadang guru memberi materi melalui aplikasi google classroom
namun kapasitas penyimpanannya tidak cukup untuk mengupload nya. Dengan
vi
permasalahan tersebut, maka penulis mendesain prototype aplikasi pembelajaran
jarak jauh menggunakan metode UCD. Pendekatan UCD ada lima proses yaitu
Plan the Human Centered Process, Specify the Content of Use, Specify the User
and Organization Requirement, Produce Design Solution, Evaluate Design
Against Requirements. Dalam mengevaluasi keberhasilan high fidelity prototype
menggunakan metode System Usability Scale (SUS). Hasil yang didapat dari
pengujian dngan metode SUS didapatkan skor 75, artinya skor tersebut
dinyatakan diterima oleh pengguna.
Kata Kunci : Online, UCD, Ruang Guru, Google classroom,User
Interface, SUS, Prototipe
Jumlah Pustaka : 33 (2009-2020)
Jumlah Halaman : VI Bab + 60 Tabel + 95 Gambar
vii
Name : Deka Dwi Rhamadani
Study Program : Informatic Engineering
Title : Desain Prototipe Aplikasi Pembelajaran Jarak Jauh
Menggunakan Metode UCD
ABSTRACT
At this time all human life on this earth is disrupted by the Covid-19 pandemic. All
countries in the world, including Indonesia, are forced to decide to close all
activities in schools, offices, industries, and universities. With this, the Indonesian
government must be forced to decide to close all activities and schools in areas
that have been affected by Covid-19 to reduce and prevent direct contact with
people and to save children from Covid-19. One of the most affected areas is in
the world of education so that the process of teaching and learning activities is
disrupted. As a result of this impact teachers and students carry out the process of
teaching and learning activities carried out at home (online) / online. Many
teachers complain that learning is done at home (online) / online because the
teacher has difficulty teaching, absences students provide material/assignments to
their students. By studying at home, students become lazy to study, instead, they
mostly play games. Besides, students sometimes have difficulty collecting
assignments given by the teacher, because students have to pack data to connect
to the internet network. Most students also have difficulty finding signals at home
when they have to collect assignments via chat applications or the like. With these
problems, the authors designed a distance learning application prototype using
the UCD method. The UCD approach consists of five processes, namely Plan the
Human-Centered Process, Specify the Content of Use, Specify the User and
Organization Requirements, Produce Design Solution, Evaluate Design Against
Requirements. In evaluating the success of the high fidelity prototype using the
System Usability Scale (SUS) method. The results obtained from testing with the
SUS method obtained a score of 75, meaning that the score was declared
accepted by the user.
viii
Keywords : Online, UCD, Teacher Room, Google classroom,User
Interface, SUS, Prototipe
Number Of Libraries : 33 (2009-2020)
Number Of Pages : VI Chapters + 60 Tables + 95 Pictures
ix
KATA PENGANTAR
Bismillahirrahmaanirrahiim.
Assalamu’alaikum Wr. Wb.
Alhamdullilah segala puji serta syukur penulis panjatkan atas kehadirat

Allah SWT yang telah memberikan Rahmat dan Hidayah nya sehingga penulis
dapat menyelesaikan skripsi ini. Tak lupa shalawat serta salam kepada nabi
Muhammad SAW, beserta keluarga, para sahabat, dan para pengikutnya.
Skripsi dengan berjudul ―Desain Prototipe Aplikasi Pembelajaran Jarak

Jauh Menggunakan Metode UCD (Studi Kasus : PT Multi Media Access)‖
disusun dalam rangka memenuhi sebuah syarat untuk mencapai gelar Sarjana
Komputer Program Studi Teknik Informatika Fakultas Sains dan Teknologi
Universitas Islam Negeri Syarif Hidayatullah Jakarta.
Penyusun sebuah skripsi ini, telah banyak di bimbing serta berbagi

bantuan, dukungan, saran, dan kritik yang telah penulis dapatkan, oleh karena itu
dalam kesempatan ini peneliti ingin mengucapkan berterima 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.
3. Bapak Rizal Broer Bahaweres, M.Kom selaku Pembimbing
Akademik.
4. Ibu Viva Arifin, MMSI dan Bapak Yusuf Durachman, M.IT selaku
dosen pembimbing yang tanpa henti meluangkan waktu,
memberikan bimbingan, bantuan, semangat dan motivasi sehingga
skripsi ini dapat selesai dengan baik.
5. Bapak dan Ibu Dosen Teknik Informatika UIN Jakarta yang telah
memberikan ilmu kepada penulis selama perkuliahan.
6. Kedua orang tua, Ayah, Ibu, Kaka, Adek atas segala do’a serta
dukungan pada penulis menyelesaikan sebuah skripsi ini.
x
7. Tim bigbos Basit Tri Anggoro, Muhammad Faisal, Yusuf Wisnu,
Abdul Khobir, Iqbal Zaqul yang sudah memberikan dukungan
serta semangat kepada penulis.
8. Jefri Ferianto selaku sahabat dari SMP yang sudah memberikan
semangat dan do’a kepada penulis.
9. Dinda Putri Narlisa, Ken Regar selaku teman di komunitas yang
sudah memberikan dukungan serta do’a kepada penulis.
10. Dio Christ Mardana, Bintang Ghalliyan Ibnunas selaku sahabat
selama di tempat KKN yang sudah memberikan dukungan dan
do’a kepada penulis.
11. Rahmi Nur Magfirah selaku sahabat satu komunitas yang sudah
membantu mencarikan responden.
12. Seluruh teman-teman TI angkatan 2016 , Khususnya teman-teman
TI C yang telah memberikan dukungan dan segala bantuan kepada
penulis. Terima kasih atas pengalaman dan kenangan yang telah
kita bersama lalui selama masa perkuliahan.
13. Seluruh responden, selaku orang-orang yang terlibat dalam
penelitian penulis telah memberikan ide, opini, wawasan dan
sebagainya kepada penulis dalam pengerjaan skrpsi ini.
14. Semua pihak yang tidak dapat penulis sebutkan secara satu persatu
yang telah membantu dalam penyelesaian penulisan skrpsi ini.
Penulis berharap semoga skrpsi ini dapat bermanfaat serta menambah wawasan
dan pengetahuan bagi pembaca. Bahwa skrpsi ini masih jauh dari sempurna,
untuk itu kritik dan saran dari pembaca untuk perbaikan dan penyempurnaan
laporan ini.
Jakarta,
Deka Dwi Rhamadani
xi
DAFTAR ISI
LEMBAR PERSETUJUAN ............................................................................................. ii

LEMBAR PENGESAHAN ............................................................................................. iii
PERNYATAAN ORISINALITAS.................................................................................. iv
PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI ........................................... v
ABSTRAK ........................................................................................................................ vi
ABSTRACT .................................................................................................................... viii
KATA PENGANTAR ....................................................................................................... x
DAFTAR ISI.................................................................................................................... xii
DAFTAR TABEL .......................................................................................................... xvi
DAFTAR GAMBAR .................................................................................................... xviii
BAB I PENDAHULUAN ................................................................................. 1
1.1 Latar Belakang ........................................................................................................... 1
1.2 Rumusan Masalah ...................................................................................................... 4
1.3 Batasan Masalah ......................................................................................................... 5
1.3.1 Metode ......................................................................................................... 5
1.3.2 Tools ............................................................................................................ 5
1.3.3 Proses ........................................................................................................... 5
1.4 Tujuan Penelitian ........................................................................................................ 5
1.5 Manfaat Penelitian ...................................................................................................... 6
1.5.1 Manfaat Bagi Peneliti .................................................................................. 6
1.5.2 Manfaat Bagi Universitas ............................................................................ 6
1.5.3 Manfaat Bagi Pembaca ................................................................................ 6
1.5.4 Manfaat Bagi Pengguna ............................................................................... 6
1.6 Metode Penelitian ....................................................................................................... 6
1.6.1 Metode Pengumpulan Data .......................................................................... 6
1.6.2 Metode Perancangan Prototipe .................................................................... 7
1.7 Sistematika Penulisan ................................................................................................. 7
BAB II LANDASAN TEORI ............................................................................ 9
2.1 Desain Prototipe ......................................................................................................... 9
2.1.2 Low Fidelity Prototyping ........................................................................... 10
xii
2.1.3 High Fidelity Prototyping .......................................................................... 10
2.2 User Interface ........................................................................................................... 11
2.3 User Experience ....................................................................................................... 11
2.4 Pendidikan ................................................................................................................ 12
2.5 User Persona ............................................................................................................. 13
2.6 Aplikasi .................................................................................................................... 13
2.7 Warna ....................................................................................................................... 13
2.8 Metode Pengumpulan Data ...................................................................................... 14
2.8.1 Obervasi ..................................................................................................... 14
2.8.2 Wawancara................................................................................................. 15
2.8.3 Studi Pustaka.............................................................................................. 15
2.9 Metode User Centered Design (UCD) ..................................................................... 15
2.9.1 Konsep User Centered Design (UCD) ...................................................... 16
2.9.2 Proses Metode User Centered Design (UCD) ........................................... 17
2.9.3 Perbedaan Metode UCD Dengan Metode Yang Lain ................................ 17
2.10 Hierarchical Task Analysis (HTA) ......................................................................... 18
2.11 Usability Testing..................................................................................................... 19
2.12 System Usability Scale............................................................................................ 20
2.13 Adobe XD............................................................................................................... 21
2.14 Photoshop ............................................................................................................... 21
2.15 Balsamiq Mockup................................................................................................... 21
2.16 Flaticon ................................................................................................................... 21
2.17 Mockup................................................................................................................... 22
2.18 Wireframe ............................................................................................................... 22
2.19 Literatur Sejenis ..................................................................................................... 23
BAB III METODOLOGI PENELITIAN ........................................................ 26
3.1 Metode Pengumpulan Data ...................................................................................... 26
3.1.1 Obervasi ..................................................................................................... 26
3.1.2 Studi Pustaka.............................................................................................. 26
3.1.3 Wawancara................................................................................................. 26
3.1.4 Kuesioner ................................................................................................... 27
3.2 Metode Penelitian ..................................................................................................... 27
3.2.1 Teknik Penarikan Sampel .......................................................................... 28
3.2.2 Metode User Centered Design (UCD) ...................................................... 28
xiii
3.2.3 Alur Penelitian ........................................................................................... 31
BAB IV ANALISA DAN PERANCANGAN .................................................. 33
4.1 Profil PT. Multimedia Access .................................................................................. 33
4.2 Flow Pendekatan UCD Secara Umum ..................................................................... 33
4.3 Plan the Human Centered Design ............................................................................ 34
4.3.1 Flow Plan the Human Centered Process ................................................... 34
4.3.2 Keterangan Pengerjaan Plan the Human Centered Process ..................... 34
4.4 Specify the Context of Use ........................................................................................ 35
4.4.1 Flow Specify the Content Of Use ............................................................... 35
4.4.2 Keterangan Pengerjaan Specify the Content of Use ................................... 36
4.5 Specify the User and Organization Requirement ..................................................... 37
4.5.1 Flow Specify the User and Organization Requirement ............................. 37
4.5.2 Mengidentifikasi Kebutuhan User ............................................................. 37
4.5.3 persona ....................................................................................................... 42
4.5.4 Analisis Tugas User ................................................................................... 46
4.6 Perencanaan Guru.................................................................................................... 47
4.7 Perencanaan Siswa .................................................................................................. 50
4.7.1 Model Skenario .......................................................................................... 53
4.8 Product Design Solution ........................................................................................... 62
4.8.1 Flow Tahap Product Design Solution ........................................................ 62
4.8.2 Design ........................................................................................................ 63
4.8.3 Ilustrasi ...................................................................................................... 65
4.8.4 Perancangan Wireframe ............................................................................. 68
4.8.5 Perancangan High Fidelity Prototype ...................................................... 101
4.9 Prototipe ................................................................................................................. 129
4.9.1 Guru ......................................................................................................... 129
4.9.2 Siswa ........................................................................................................ 136
4.10 Evaluate Design Against Requirements ............................................................... 140
Flow Tahap Evaluate Design Against Requirements .............................................. 140
BAB V HASIL DAN PEMBAHASAN......................................................... 143
5.1 Perencanaan Testing SUS ...................................................................................... 143
BAB VI KESIMPULAN DAN SARAN ......................................................... 148
6.1 Kesimpulan ............................................................................................................. 148
6.2 Saran ....................................................................................................................... 148
xiv
DAFTAR PUSTAKA ..................................................................................................... 150
LAMPIRAN .................................................................................................................... 154
xv
DAFTAR TABEL
Tabel 2. 1 Perbedaan UCD Dengan Metode Lain............................................................. 18

Tabel 2. 2 Tabel Literatur Sejenis ..................................................................................... 23
Tabel 4. 1 Persona Gabungan ........................................................................................... 42
Tabel 4. 2 Model Skenario Guru ....................................................................................... 53
Tabel 4. 3 Model Skenario Siswa ..................................................................................... 59
Tabel 4. 4 Daftar Ilustrasi yang digunakan ....................................................................... 66
Tabel 4. 5 Wireframe Halaman Login .............................................................................. 68
Tabel 4. 6 Wireframe Halaman Register .......................................................................... 69
Tabel 4. 7 Wireframe Halaman Beranda Guru ................................................................. 70
Tabel 4. 8 Wireframe Halaman Absen dan Kuis .............................................................. 70
Tabel 4. 9 Wireframe Halaman Tambah Jadwal Absen ................................................... 71
Tabel 4. 10 Wireframe Halaman Kuis .............................................................................. 72
Tabel 4. 11 Wireframe Halaman Tambah Kuis ................................................................ 72
Tabel 4. 12 Wireframe Halaman Pertanyaan .................................................................... 73
Tabel 4. 13 Wireframe Halaman Tambah Pertanyaan ...................................................... 74
Tabel 4. 14 Wireframe Halaman Edit Pertanyaan ............................................................ 74
Tabel 4. 15 Wireframe Halaman Hapus Pertanyaan ......................................................... 75
Tabel 4. 16 Wireframe Halaman Detail Jawaban ............................................................. 75
Tabel 4. 17 Wireframe Halaman Detail Absensi .............................................................. 76
Tabel 4. 18 Wireframe Halaman Daftar Siswa ................................................................. 77
Tabel 4. 19 Wireframe Halaman Lihat Detail Siswa ........................................................ 77
Tabel 4. 20 Wireframe Halaman Materi Siswa ................................................................. 78
Tabel 4. 21 Wireframe Halaman Materi ........................................................................... 79
Tabel 4. 22 Wireframe Halaman Edit Materi ................................................................... 79
Tabel 4. 23 Wireframe Halaman Tugas Siswa ................................................................. 80
Tabel 4. 24 Wireframe Halaman Upload Tugas Siswa ..................................................... 81
Tabel 4. 25 Wireframe Halaman Edit Tugas Siswa .......................................................... 81
Tabel 4. 26 Wireframe Halaman Jawaban Tugas Siswa ................................................... 82
Tabel 4. 27 Wireframe Halaman Raport Siswa ................................................................ 83
Tabel 4. 28 Wireframe Halaman Pop up Tambah Raport Siswa ...................................... 83
Tabel 4. 29 Wireframe Halaman Pop up Edit Raport Siswa............................................. 84
Tabel 4. 30 Wireframe Halaman Video Conference ......................................................... 84
Tabel 4. 31 Wireframe Halaman Pup up Buat Agenda Conference ................................. 85
Tabel 4. 32 Wireframe Halaman Pup up Edit Agenda Conference .................................. 86
Tabel 4. 33 Wireframe Halaman Room Video Conference .............................................. 86
Tabel 4. 34 Wireframe Halaman Popup Share Screen ...................................................... 87
Tabel 4. 35 Wireframe Halaman Share Screen ................................................................. 88
Tabel 4. 36 Wireframe Halaman Chat .............................................................................. 88
Tabel 4. 37 Wireframe Halaman Absen............................................................................ 89
Tabel 4. 38 Wireframe Halaman Login Siswa .................................................................. 90
Tabel 4. 39 Halaman Register ........................................................................................... 90
xvi
Tabel 4. 40 Wireframe Halaman Beranda Siswa .............................................................. 91
Tabel 4. 41 Wireframe Halaman Kumpulan Tugas .......................................................... 92
Tabel 4. 42 Wireframe Halaman Upload Tugas ............................................................... 92
Tabel 4. 43 Wireframe Halaman Materi ........................................................................... 93
Tabel 4. 44 Wireframe Halaman Kuis .............................................................................. 94
Tabel 4. 45 Wireframe Halaman Pop up Absensi ............................................................. 94
Tabel 4. 46 Wireframe Halaman Pertanyaan .................................................................... 95
Tabel 4. 47 Wireframe Halaman Nilai .............................................................................. 96
Tabel 4. 48 Wireframe Video Coference .......................................................................... 97
Tabel 4. 49 Wireframe Halaman Room Siswa Video Conference ................................... 98
Tabel 4. 50 Wireframe Halaman Chat .............................................................................. 98
Tabel 4. 51 Wireframe Halaman Chat Guru ..................................................................... 99
Tabel 4. 52 Wireframe Halaman Raport ......................................................................... 100
Tabel 4. 53 Wireframe Halaman Profil Siswa ................................................................ 100
Tabel 4. 54 Tabel checklist daftar keinginan guru .......................................................... 141
Tabel 4. 55 Tabel checklist daftar keinginan siswa ........................................................ 142
Tabel 5. 1 Pertanyaan Responden ................................................................................... 144
Tabel 5. 2 Hasil Pengujian .............................................................................................. 145
Tabel 5. 3 Hasil Testing SUS .......................................................................................... 147
xvii
DAFTAR GAMBAR
Gambar 1. 1 Grafik Penyebaran Covid – 19 Di Indonesia ................................................. 1

Gambar 2. 1 User Centered Design .................................................................................. 15
Gambar 2. 2 Prinsip Perancangan UCD............................................................................ 16
Gambar 2. 3 Contoh Hierarchical Task Analysis ............................................................. 19
Gambar 2. 4 SUS Score .................................................................................................... 20
Gambar 3. 1 Alur Penelitian ............................................................................................. 32
Gambar 4. 1 Flow Pendekatan UCD Secara Umum ......................................................... 33
Gambar 4. 2 Flow Plan UCD the Human Centered Process ............................................. 34
Gambar 4. 3 Flow Specify the Content Of Use ................................................................ 35
Gambar 4. 4 Flow Specify the User and Organization Requirement ................................ 37
Gambar 4. 5 User persona siswa ....................................................................................... 44
Gambar 4. 6 User persona Guru ....................................................................................... 45
Gambar 4. 7 User persona Pegawai Negeri Sipil .............................................................. 46
Gambar 4. 8 Flow Tahap Specify the User and Organization Requirement Guru ............ 47
Gambar 4. 9 Hierarchical Task Analysis Setelah Dilakukan Penurunan Guru ................. 49
Gambar 4. 10 Flow Tahap Specify the User and Organization Requirement Siswa ........ 50
Gambar 4. 11 Hierarchical Task Analysis Setelah Dilakukan Penurunan Siswa ............. 52
Gambar 4. 12 Flow Tahap Produce Design Solution ........................................................ 62
Gambar 4. 13 Logo Aplikasi ............................................................................................. 63
Gambar 4. 14 Tipografi..................................................................................................... 63
Gambar 4. 15 Warna ......................................................................................................... 64
Gambar 4. 16 Ikon Menu Bar ........................................................................................... 64
Gambar 4. 17 Ikon Dokumen............................................................................................ 65
Gambar 4. 18 Halaman Login ......................................................................................... 102
Gambar 4. 19 Halaman Register Guru ............................................................................ 102
Gambar 4. 20 Halaman Dashboard Guru ........................................................................ 103
Gambar4. 21 Halaman Absen dan Kuis .......................................................................... 103
Gambar 4. 22 Halaman Tambah Jadwal Absen .............................................................. 104
Gambar 4. 23 Halaman Detail Absen ............................................................................. 104
Gambar 4. 24 Halaman Kuis ........................................................................................... 105
Gambar 4. 25 Halaman Tambah Kuis ............................................................................. 105
Gambar 4. 26 Halaman Detail Pertanyaan ...................................................................... 106
Gambar 4. 27 Halaman Tambah Pertanyaan .................................................................. 106
Gambar 4. 28 Halaman Edit Pertanyaan ......................................................................... 107
Gambar 4. 29 Halaman Detail Jawaban .......................................................................... 107
Gambar 4. 30 Halaman Daftar Siswa.............................................................................. 108
Gambar 4. 31 Halaman Tambah Kelas ........................................................................... 108
Gambar 4. 32 Halaman Detail Siswa .............................................................................. 109
Gambar 4. 33 Halaman Tambah Siswa ........................................................................... 109
Gambar 4. 34 Halaman Edit Siswa ................................................................................. 110
Gambar 4. 35 Halaman Daftar Materi Siswa .................................................................. 110
Gambar 4. 36 Halaman Upload Materi Siswa ................................................................ 111
Gambar 4. 37 Halaman Edit Materi ................................................................................ 111
xviii
Gambar 4. 38 Halaman Tugas Siswa .............................................................................. 112
Gambar 4. 39 Halaman Upload Tugas Siswa ................................................................. 112
Gambar 4. 40 Halaman Edit Tugas Siswa ...................................................................... 113
Gambar 4. 41 Halaman Jawaban Tugas Siswa ............................................................... 113
Gambar 4. 42 Halaman Raport Siswa ............................................................................. 114
Gambar 4. 43 Halaman Tambah Raport Siswa ............................................................... 114
Gambar 4. 44 Halaman Edit Raport Siswa ..................................................................... 115
Gambar 4. 45 Halaman Agenda Video Conference ........................................................ 115
Gambar 4. 46 Halaman Tambah Agenda Video Conference .......................................... 116
Gambar 4. 47 Halaman Edit Agenda Video Conference ................................................ 116
Gambar 4. 48 Halaman Video Conference ..................................................................... 117
Gambar 4. 49 Halaman Popup Share Screen .................................................................. 117
Gambar 4. 50 Halaman Popup Share Screen .................................................................. 118
Gambar 4. 51 Halaman Chat ........................................................................................... 118
Gambar 4. 52 Halaman Absen ........................................................................................ 119
Gambar 4. 53 Halaman Login siswa ............................................................................... 119
Gambar 4. 54 Halaman Register siswa ........................................................................... 120
Gambar 4. 55 Halaman Beranda Siswa .......................................................................... 120
Gambar 4. 56 Halaman Daftar Siswa.............................................................................. 121
Gambar 4. 57 Halaman Upload Jawaban Tugas siswa ................................................... 121
Gambar 4. 58 Halaman Pesan Berhasil Upload .............................................................. 122
Gambar 4. 59 Halaman Pesan Berhasil Mengunduh Tugas ............................................ 122
Gambar 4. 60 Halaman Daftar Materi ............................................................................ 123
Gambar 4. 61 Halaman Berhasil Mengunduh Materi ..................................................... 123
Gambar 4. 62 Halaman Daftar Kuis................................................................................ 124
Gambar4. 63 Halaman Absen ......................................................................................... 125
Gambar 4. 64 Halaman Pertanyaan................................................................................. 125
Gambar 4. 65 Halaman Nilai .......................................................................................... 126
Gambar 4. 66 Halaman Video Conference ..................................................................... 126
Gambar 4. 67 Halaman Ruang Video Conference .......................................................... 127
Gambar 4. 68 Halaman Chat Siswa ................................................................................ 127
Gambar 4. 69 Halaman Chat Guru.................................................................................. 128
Gambar 4. 70 Halaman Raport ....................................................................................... 128
Gambar 4. 71 Prototipe Register dan Login ................................................................... 129
Gambar 4. 72 Prototipe Beranda guru ........................................................................... 130
Gambar 4. 73 Prototipe Absen ........................................................................................ 131
Gambar 4. 74 Prototipe Kuis .......................................................................................... 131
Gambar 4. 75 Prototipe daftar Siswa .............................................................................. 132
Gambar 4. 76 Prototipe Daftar Materi Siswa .................................................................. 132
Gambar 4. 77 Prototipe Jawaban Tugas Siswa ............................................................... 133
Gambar 4. 78 Prototipe Raport ....................................................................................... 133
Gambar 4. 79 Prototipe Video conference ...................................................................... 134
Gambar 4. 80 Prototipe Chat .......................................................................................... 134
Gambar 4. 81 Prototipe Pop Up Absen ........................................................................... 135
Gambar 4. 82 Prototipe Beranda Siswa .......................................................................... 136
Gambar 4. 83 Prototipe Daftar Tugas Siswa................................................................... 137
xix
Gambar 4. 84 Prototipe Daftar Materi Siswa .................................................................. 137
Gambar 4. 85 Prototipe Daftar Kuis ............................................................................... 138
Gambar4. 86 Prototipe Video Conference ...................................................................... 138
Gambar 4. 87 Prototipe Halaman Chat ........................................................................... 139
Gambar 4. 88 Prototipe Raport Siswa ............................................................................. 139
Gambar 4. 89 Flow Tahap Evaluate Design Against Requirements ............................... 140
xx
BAB I
PENDAHULUAN
1.1 Latar Belakang

Pendidikan merupakan salah satu faktor yang sangat penting bagi
perkembangan seorang anak. Dalam hal ini orang tua wajib memberikan
pendidikan kepada anak, supaya anak selalu berkembang melalui
pengalaman-pengalaman dan juga ilmu yang sudah dipelajari nya.
Pada saat ini seluruh kehidupan manusia di bumi ini terganggu

dengan adanya pendemi covid-19. Seluruh negara yang ada didunia
termasuk di Indonesia terpaksa harus memutuskan menutup semua
kegiatan yang ada di sekolah, perkantoran, perindustrian, serta perguruan
tinggi. Seluruh dunia termasuk di indonesia harus mengalami krisis yang
datang secara tiba-tiba.
Gambar 1. 1 Grafik Penyebaran Covid – 19 Di Indonesia
(Sumber : https://covid19.go.id/peta-sebaran)
Pada gambar 1.1 menyatakan bahwa penyebaran covid-19 yang

ada di indonesia sudah meyebar ke seluruh daerah yang ada di indonesia.
Dengan ini pemerintah indonesia harus terpaksa mengambil keputusan
untuk menutup semua kegiatan termasuk sekolah yang ada di daerah yang
sudah terdampak covid-19 untuk mengurangi dan mencegah kontak
langsung dengan orang-orang dan untuk menyelamatkan anak-anak dari
covid-19.
1
2
Melalui wawancara oleh Bapak Sugiono Kepala Pusat Data

Statistika Jakarta Selatan, beberapa dampak bagi keberlangsungan
pendidikan yang ada di indonesia yang di sebabkan oleh pendemi covid-
19. Dampak jangka pendek, yang di rasakan oleh banyak keluarga yang
ada di indonesia baik di kota maupun daerah-daerah adalah Sekolah di
rumah. Sekolah di rumah bagi sebagian keluarga adalah suatu kejutan
yang sangat besar khusus nya bagi produktivitas orang tua yang sibuk
dengan pekerjaannya di kantor maupun di luar rumah. Namun dengan
belajar di rumah problem psikologis bagi anak-anak peserta didik akan
terganggu, yang biasa belajar bertatap muka langsung dengan guru-guru
saat ini harus belajar di rumah. Dengan belajar dirumah anak-anak akan
menjadi malas untuk belajar dan kebanyakan malah menyibukkan untuk
bermain.
Dampak jangka panjang dari covid-19 dari sisi pendidikan adalah
aspek keadilan dan ketidak setaraan antar kelompok masyarakat dan antar
daerah di indonesia. Banyak dari guru-guru yang bukan pns mengeluh
dengan adanya pembelajaran online (daring), sebab guru-guru kesulitan
mengajar dan memberi materi kepada anak-anak didikannya. Menurut
wawancara salah satu guru yang ada di SDN Serua Indah 3 yaitu kokom
komariah menyatakan bahwa dengan belajar di rumah sangat berat karena
tidak bisa menjelaskan materi secara langsung dengan siswanya, dan guru-
guru di SDN Serua Indah juga kesulitan untuk memberi soal dan juga
untuk absen kehadiran siswa, sering kali orang tua siswa yang datang ke
sekolah untuk mengambil soal untuk anaknya, tapi dengan datang ke
sekolah bisa saja dapat menyebarkan covid-19 karena orang tua yang ke
sekolah belum tentu dalam kadaan sehat. Siswa pun terkadang sulit
menjawab soal-soal yang di berikan oleh guru-guru mereka. Sering kali
siswa harus membeli materi di beberapa website untuk menjawab soal
yang di berikan guru Dengan hal ini dapat memberatkan orang tua, karena
harus membayar materi di website dan belum lagi membeli paket data
untuk menghubungkan jaringan ke internet. Banyak dari orang tua
UIN Syarif Hidayatullah Jakarta

3
merasakan keberatan karena ada beberapa orang tua yang terkena PHK
dan belum lagi untuk membayar biaya sekolah anaknya.
Menurut Winda salah satu siswi SMPN 3 Eromoko merasa

keberatan belajar di rumah, di karenakan di rumahnya kesulitan untuk
mendapat sinyal dan sering kali untuk mengumpulkan tugas harus melalui
aplikasi chatting terkadang kala harus kirim melalui gmail.
Dari beberapa data yang di sampaikan diatas, bahwa aplikasi
pembelajaran jarak jauh sangat di butuhkan oleh user.
Selain User Interface, menerapakan User Experience pada proses

perancangan aplikasi, maka produk yang dibuat akan memiliki
kesempatan yang besar untuk digunakan oleh pengguna yang
membutuhkan produk yang kita buat dari sisi proses bisnis, UX
mengakomodasi pada keterlibatan pengguna, mulai dari pembahasan ide,
pengambilan suatu keputusan, sampai evaluasi (Fitra Arie Budiawan,
2019).
Berdasarkan studi literatur yang penulis amati, peneliti terkait
mengenai perancangan prototipe UI/UX yang dilakukan oleh Ahmad
Iqbal Yunus, tentang : ― Perancangan Desain User Interface Dan User
Experience Pada Aplikasi Siakad Dengan Menggunakan Metode User
Centered Design (UCD) Pada Universitas Islam Negeri Sunan Ampel
Surabaya (Yunus, Teknologi, & Informatika, 2018). Permasalahan dari
penelitian tersebut adalah jumlah pengunjung situs website pada SIAKAD
yang naik turun karena infomasi yang kurang lengkap, dan kurang
menarik pada tampilan antarmuka pada website SIAKAD. Data
pendukung pada penelitian tersebut adalah wawancara dan obervasi
kepada bagian Pusat Teknologi dan Pangkalan Data (PUSTI PD) dan
mahasiswa Universitas Islam Negeri Sunan Ampel Surbaya. Solusi dari
penelitian tersebut dapat dirangkum dalam metode, tools dan proses.
Penelitian tersebut menggunakan metode User Centered Design tetapi
peneliti tidak dijelaskan tools yang digunakan dalam membuat
prototyping . Penelitian tersebut berfokus pada tampilan website yang

4
dioperasikan di dalam device desktop. Proses atau tahapan dalam

permasalan tersebut ada dua, tahapan pertama pada penelitian tersebut
yaitu : wawancara, obervasi, studi literatur, evaluasi desain lama, uji
validasi dan reabilitas. Tahapan kedua yaitu perancangan antara lain :
memahami dan menentukan konteks pengguna, menspesifikasikan
kebutuhan pengguna, membuat perbaikan rancangan antarmuka
pengguna, membuat wireframe/prototipe interaksi desain dan terakhir
evaluasi hasil perbaikan rancangan.
Penelitian tentang perancangan prototipe UI/UX lainnya adalah
penelitian oleh Helmi Previanto Firmansyah, tentang : ―Perancangan
UI/UX Pelayanan Otomatis Badan Perpustakan dan Kearsipan Jawa
Timur dengan Menggunakan Metode Heuristik Webuse‖ (Firmansyah,
2018). Permasalahan pada penelitian tersebut adalah pada tampilan
aplikasinya dalam perancangan UI/UX kurang begitu matang. Solusi dari
permasalahannya ini dapat dirangkum dan terbagi menjadi metode, tools,
dan proses. Pada penelitian tersebut perancang tidak menjelaskan
menggunakan tools yang digunakan pada sistem tersebut. Model
penelitian atau dukungan data dalam penelitian tersebut diantaranya
adalah dengan penentukan sampel, dan pembuatan kuisoner. Proses
penelitian tersebut di bagi menjadi dua tahapan, yaitu : tahapan analisis
dengan uji validasi dan reabilitas serta analisis deskriptif.
Berdasarkan studi literatur diatas cocok untuk metode User
Centered Design (UCD), sehingga penulis melakukan penelitian yang
berfokus pada perancangan desain aplikasi pembelajaran jarak jauh
menggunakan metode User Centered Design (UCD), sebagai solusi dari
masalah tampilan antarmuka (interface).
1.2 Rumusan Masalah

Bagaimana desain prototipe aplikasi pembelajaran jarak jauh
menggunakan metode UCD ?

5
1.3 Batasan Masalah

Penelitian ini berfokus kepada anatar muka nya saja untuk mencapai suatu
penelitian yang terarah dan fokus, maka penulis membatasi penelitiannya
menjadi tiga bagian, yaitu :
1.3.1 Metode
1. Impelementasi metode UCD (User Centered Design) pada
desain aplikasi pembelajaran jarak jauh.
2. Metode UCD ini menggunakan beberapa langkah yaitu : Plan
the human centered process, specity the content of use, design,
specify the user, produce design solution, evaluate design
against requirements.
1.3.2 Tools
1. Spesifikasi laptop yang digunakan untuk penulisan dan
pembuatan prototipe ini adalah Laptop ASUS X555QG, 8 GB
RAM, Hardisk 1 TB, Processor AMD A12 dengan Sistem
Operasi Windows 10 Pro 64-bit.
2. Aplikasi pembuatan prototipe menggunakan Balsamiq Mockup,
Adobe XD, photoshop, draw io untuk pembuatan konsep sistem.
1.3.3 Proses
1. Penelitian ini berfokus pada tampilan antarmuka aplikasi
pembelajaran jarak jauh.
2. Tahap evaluasi dalam penelitian ini akan menggunakan System
Usability Scale (SUS).
1.4 Tujuan Penelitian

Tujuan yang ingin di capai penulis dalam penelitian ini adalah untuk
membuat desain prototipe aplikasi pembelajaran jarak jauh menggunakan
metode UCD.

6
1.5 Manfaat Penelitian
1.5.1 Manfaat Bagi Peneliti

1. Menambah pengetahuan penulis mengenai tampilan dalam
sebuah aplikasi dengan metode User Centered Design (UCD).
2. Sebagai portofolio penulis yang akan berguna untuk masa yang
akan datang.
1.5.2 Manfaat Bagi Universitas

1. Menambah referensi literatur keperpustakaan Universitas Islam
Negeri Hidayatullah Jakarta.
2. Memberikan gambaran terahadap penerapan ilmu pengetahuan
yang terlah diajari selama kuliah.
3. Sebagai sebuah referensi untuk mahasiswa dan mahasiswi dalam
membuat desain selanjutnya.
1.5.3 Manfaat Bagi Pembaca

1. Mengetahui cara menggunakan suatu metode User Centered
Design (UCD) dalam sebuah aplikasi.
2. Sebagai referensi penelitian sejenis selanjutnya yang
berhubungan dengan UI/UX.
1.5.4 Manfaat Bagi Pengguna

1. Guru dapat mudah melakukan pembelajaran tanpa harus tatap
muka dengan siswa secara langsung.
2. Siswa dapat mengetahui tugas dari guru tanpa datang kesekolah.
3. Siswa dapat mengumpulkan tugas tanpa datang kesekolah.
4. Bandwidth internet lebih murah.
1.6 Metode Penelitian

Pada penyusunan penelitian ―Desain Prototipe Aplikasi Pembelajaran
Jarak Jauh Menggunakan Metode UCD‖, Penulis Menggunakan dua
metode, yaitu :
1.6.1 Metode Pengumpulan Data

1. Obervasi

7
Kegiatan obervasi di lakukan untuk kegiatan pengamatan

terhadap suatu obyek atau orang lain.
2. Wawancara
Kegiatan wawancara di lakukan kepada narasumber yang ahli
dan perusahaan yang akan membuatkan aplikasinya.
3. Studi Pustaka
Proses pengumpulan data yang di lakukan dengan mencari
bahan-bahan referensi yaitu : buku, jurnal, dan studi literatur
sejenis, serta mencari referensi tambahan melalui beberapa
website.
1.6.2 Metode Perancangan Prototipe

Pada penelitian ini menggunakan metode User Centered Design
(UCD) untuk pengembangan sistemnya.
1.7 Sistematika Penulisan

Dalam penyusunan tugas akhir ini penulis menggunakan sistematika
penulisan sebagai berikut:
BAB I PENDAHULUAN
Bab ini membahas mengenai latar belakang
masalah, tujuan penelitian, manfaat penelitian,
rumusan masalah, batasan masalah, metedeologi
penulisan dan sistematika penulisan.
BAB II LANDASAN TEORI
Bab ini menguraikan tentang landasan teori yang
mendasari penulisan laporan tugas akhir ini, yaitu
desain prototipe aplikasi pembelajaran jarak jauh
yang dapat membantu orang tua dan anak-anak
untuk belajar di rumah dengan menggunakan
metode User Centered Design (UCD).
BAB III METODOLOGI PENELITIAN
Bab ini berisi tentang metodologi yang di gunakan
dalam menyusun skripsi, seperti metodologi

8
pengumpulan data dan metodologi dalam desain

prototipe aplikasi pembelajaran jarak jauh.
BAB IV ANALISIS DAN PERANCANGAN
Bab ini menjelaskan mengenai tahapan desain
prototipe aplikasi pembelajaran jarak jauh mulai
dari tahap wawancara, tahap mendesain, dan tahap
pengujian.
BAB V HASIL DAN PEMBAHASAN
Bab ini menjelaskan rincian hasil pengujian serta
analisis hasil pengujian.
BAB VI KESIMPULAN DAN SARAN
Bab ini berisi tentang kesimpulan dari permasalahan
yang ada, berisi tentang pemecahannya serta saran
yang diajukan penulis dalam pembahasan terseb

BAB II
LANDASAN TEORI
2.1 Desain Prototipe

Desain adalah penyusunan rencana atau kesepakatan untuk
pembangunan (pembangunan) pada suatu sistem (Ralph & Wand, 2009).
Prototyping adalah proses pembuatan model sederhana software yang
mengizinkan pengguna memiliki gambaran dasar tentang program serta
melakukan pengujian awal. Prototyping memberikan fasilitas bagi
pengembang dan pemakai untuk saling berinteraksi selama proses
pembuatan, sehingga pengembang dapat dengan mudah memodelkan
perangkat yang akan dibuat (Aryani, Sunandar, & Ramadhan, 2019).
Penelitian yang di lakukan (Dhanar, 2019), Prototyping adalah suatu
metode yang digunakan untuk pengembangan suatu sistem ataupun
perangkat lunak. Dengan metode prototyping ini akan dihasilkan prototype
sistem sebagai perantara pengembang dan pengguna agar dapat
berinteraksi dalam proses kegiatan pengembangan sistem informasi. Agar
proses pembuatan prototype ini berhasil dengan baik adalah dengan
mendefinisikan aturan-aturan pada tahap awal, yaitu pengembang dan
pengguna harus satu pemahaman bahwa prototype dibangun untuk
mendefinisikan kebutuhan awal (Purnomo, 2017).
Adapun 4 metodologi prototyping yang paling utama (Purnomo,
2017) adalah sebagai berikut :
1. Illustrative, menghasilkan contoh laporan dan tampilan layar.
2. Simulated, mensimulasikan beberapa alur kerja sistem tetapi tidak
menggunakan data real.
3. Functional, mensimulasikan beberapa alaur sistem yang
sebenarnya dan menggunakan data real.
4. Evolutionary, menghasilkan model yang menjadi bagian dari
operasional sistem.
9
10
Prototype menjadi alat bantu ketika akan berkomunikasi dengan

pihak-pihak yang terlibat dalam pembuatan sebuah produk. Prototype
dapat terbagi menjadu dua jenis yang berbeda yaitu, low-fidelity
prototyping dan high-fidelity prototyping.
2.1.2 Low Fidelity Prototyping

Low fidelity prototyping adalah sebuah prototype yang
belum mengambarkan produk asli secara final (Muraqabatullah,
2016). Low Fidelity Prototyping sangat berguna karena proses
pembuatannya yang sederhana, murah dan dapat di ubah sesuai
kebutuhan dengan cepat, fleksibel dan memungkinkan untuk
mengeksplor lebih jauh lagi ide desain dan alternatif lainnya (
Previanto, 2018).
Adapun proses yang di lakukan dalam low fidelity prototyping

menurut ( Previanto, 2018).
1. Storyboarding adalah salah satu contoh proses low fidelity
prototyping. Storyboarding terdiri dari beberapa gambaran
yang mendeskripsian bagaimana pengguna menjalankan suatu
tugas menggunakan desain interface yang sedang di
kembangkan. Bisa berupa gambaran layar interface atau bisa
merupakan beberapa gambaran skenario yang menunjukan
bagaimana pengguna menggunakan suatu sistem.
2. Sketching, low fidelity prototyping banyak mengandalkan
penggambaran sketsa melalui media kertas. Sketsa berisi
gambaran kasar bagaimana desain interface akan di buat.
Sketsa mengandung tombol, simbol, yang akan di gunakan
pada desain interface.
2.1.3 High Fidelity Prototyping

Membuat desain interface berdasarkan sketsa yang telah di
buat. Hasil dari desain interface ini akan di jadikan dokumen
rekomendasi desain interface perbaikan untuk meningkatkan
usability pelayanan otomatis perpusatakaan ( Previanto, 2018).

11
2.2 User Interface

User interface adalah bukan hanya tentang warna dan bentuk,
melainkan tentang bagaimana menyajikan alat (tools) yang tepat kepada
pengguna untuk bias mencapai tujuannya. Selain itu, user interface lebih
dari sekedar tombol, menu dan form bagi pengguna yang harus diisi oleh
pengguna. User Interface adalah suatu hubungan antara pengguna dan
pengalaman, kesan pertama dan kesan yang abadi. Desain user interface
yang baik harus menghasilkan keseimbangan yang sempurna antara
estetika yang menawan dan interaktivitas tanpa usaha (effortless).
User interface adalah input dan output yang langsung melibatkan
pengguna. User interface dapat di gunakan langsung oleh pengguna
internal maupun eksternal system. Desain dari user interface sangat
bervariasi tergantung pada faktor-faktor seperti tujuan interface,
karakteristik pengguna, dan karakteristik perangkat interface tertentu.
Misalnya, meskipun semua interface harus di rancang untuk kemudahan
penggunaan yang maksimal, ada beberapa pertimbangan lain, seperti
efisien operasional, yang mungkin penting bagi pengguna internal yang
dapat di latih untuk menggunakan interface spesifik yang di optimalkan
untuk perangkat keras tertentu (misalnya, keyboard, mouse, dan layar
resolusi lebih tinggi besar) (Satzinger & Jackson, & Burd, 2012).
2.3 User Experience

Menurut Wulandari (2018) User experience merupakan istilah
pengalaman pengguna dalam merasakan suatu kemudahan dan efisiensi
dalam interaksi manusia dengan komputer. Istilah user experience semakin
menjadi perhatian karena kebutuhan pengguna semakin luas dan kompleks
yang tidak hanya mengenai kebutuhan fungsional dan estetika saja.
User Experiece (UX) menilai seberapa kepuasan dan kenyamanan
seseorang terhadap sebuah produk, sistem, dan jasa. Sebuah prinsip dalam
membangun UX adalah khalayak mempunyai kekuasaan dalam
menentukan tingkat kepuasan sendiri (costumer rule) (Wiryawan, 2011).
Dalam perancangan user interface dan user experience ada
beberapa proses yang akan di lakukan (Peak, 2018).

12
a. Understanding your user

Proses perancangan di mulai dengan memahami target pengguna mulai
dari perilaku, kebutuhan dan tujuan pengguna, sehingga dapat
mengidentifikasi persona sehingga dapat memulai merancang board.
b. Wireframes
Dalam merancang tidak hanya memperhitungkan persona dan board
tetapi juga skenario pengguna guna mengetahui spesifikasi fungsional
rancangan.
c. Graphic design
Merancang sesuai keperluan antarmuka yang akan di gunakan dan
menyesuaikan antarmuka yang familiar dengan pengguna. Beberapa
faktor yang mendukung Graphic Design yaitu ukuran layar, ukuran
ikon, touch gestures. Dalam merancang, UI dapat beradaptasi dengan
berbagai perangkat dan mode sehiggga pengguna dapat memahami
konteks dari sebuah aplikasi.
d. Interactive visual prototyping
Interactive visual prototyping merupakan proses perancangan dengan
membuat prototipe visual yang interaktif, sehingga pengguna dapat
memahami tampilan dan nuansa dari aplikasi.
e. Gathering Feedback
Prototipe yang sudah di rancang akan diuji kepada pengguna untuk
mengetahui rancangan dapat di pahami dengan mudah atau tidak dan
seberapa ramah hasil rancangan. Setelah menerima feedback dari
pengguna, maka tahap selanjutnya melakukan perubahan terhadap
rancangan yang menyesuaikan hasil feedback.
Pada penelitian ini menghasilkan user interface berdasarkan
kebutuhan pengguna yang di dapatkan dari analisi user experience
untuk merancang user interface yang sesuai dengan kebutuhkan
pengguna penelitian ini menggunakan metode Goal Directed Design.
2.4 Pendidikan
Pendidikan merupakan suatu proses sadar yang dilakukan kepada
peserta didik guna menumbuhkan dan mengembangkan jasmani maupun

13
rohani secara optimal untuk mencapai tingkat kedewasaan (Ramdhani,

2013).
Suatu sistem pendidikan dapat dikatakan berkualitas/bermutu, jika
proses belajar-mengajar berlangsung secara menarik dan menantang
sehingga peserta didik dapat belajar sebanyak mungkin melalui proses
belajar yang berkelanjutan (Romlah, 2016).
2.5 User Persona

User persona adalah suatu model dari user aktif yang bertujuan untuk
mengetahui secara detail mengenai karakteristik user. Persona dapat
memberikan target user dari suatu produk atau aplikasi yang
merepresentasikan tentang bagaimana user akan menggunakan suatu
sistem (Aldi Ilham Abubakar, Eko Darwiyanto, S.T, M.T, Dawam Dwi
Jatmiko Suwawi, 2019).
2.6 Aplikasi
Aplikasi merupakan penerapan, menyimpan sesuatu hal, data,
permasalahan, pekerjaan kedalam suatu sarana atau media yang dapat
digunakan untuk diterapkan menjadi sebuah bentuk yang baru (Suhartini,
2017).
Menurut (Siregar & Fauzi, 2018) Pengertian aplikasi secara umum
adalah alat terapan yang difungsikan secara khusus dan terpadu sesuai
kemampuan yang dimilikinya, aplikasi merupakan suatu perangkat
komputer yang siap pakai bagi user.
2.7 Warna
Pengertian aplikasi secara umum adalah alat terapan yang difungsikan
secara khusus dan terpadu sesuai kemampuan yang dimilikinya aplikasi
merupakan suatu perangkat komputer yang siap pakai bagi user (
Previanto, 2018).
Berikut psikologi warna :

14
1. Warna Merah
Warna merah merupakan salah satu warna premier/utama yang
dianggap cukup efektif jika digunakan untuk tombol call to action.
Secara umum, warna merah memang memiliki daya tarik yang cukup
kuat, karena warna merah yang terlihat kontras, seringkali diasosiasikan
sebagai peringatan, penunjuk bahaya, dan kewaspadaan.
2. Warna Biru
Warna biru merupakan salah satu warna premier yang menjadi
warna favorit di seluruh dunia. Hal ini dapat di lihat dari banyaknya
biru di setiap perusahaan. Pengguna warna biru dalam website, simbol
perusahaan (logo), brand identity, seragam, bangunan, dan lain-lain.
Sifat warna biru adalah damai dan tenang, loyalitas, kebijaksanaan,
intelektual, kebesaran dan kekuasaan.
Penerapan warna biru kedalam suatu website untuk menunjukan
sifat ketenangan, intelektual, serta bijaksana. Cocok untuk perusahaan
yang bergerak di bidang teknologi, kepemerintahan, pendidikan,
organisasi sosial, dan lain-lain.
3. Warna Hijau
Warna hijau merupakan warna sekunder hasil kombinasi antara warna
biru dan kuning. Warna hijau adalah warna dingin atau sejuk yang
sering di kaitan dengan lingkungan dan alam. Sehingga warna hijau
dapat di simbolkan dengan kesuburan, pertumbuhan, kesegaran,
pembaharuan, keselamatan, persetujuan, dan kestabilan ( Previanto,
2018).
2.8 Metode Pengumpulan Data
2.8.1 Obervasi
Obervasi adalah teks yang berfungsi untuk memberikan
informasi tentang suatu objek atau situasi setelah di adakan
investigasi atau penelitian secara sistematis. Teks berisi fakta yang
sesuai dengan pengamatan dan tidak berisi opini dari penulis
(Puspita, 2020).

15
2.8.2 Wawancara
Wawancara adalah suatu metode yang digunakan untuk
memperoleh data dengan cara mengajukan pertanyaan-pertanyaan
secara langsung (Ibrahim & Rahman, 2019).
2.8.3 Studi Pustaka

Studi pustaka adalah suatu metode pengumpulan data dengan
menggunakan buku-buku dan pencarian di internet sebagai bahan
referensi dalam penulisan laporan dan pembuatan sistem (Ibrahim
& Rahman, 2019).
2.9 Metode User Centered Design (UCD)

User Centered Design (UCD) merupakan paradigma baru dalam
pengembangan sistem berbasis web. User centered design (UCD) juga
sering disebut sebagai human centered design (Yatana Saputri, Fadhli, &
Surya, 2017).
Menurut (Khasanah, 2018) UCD merupakan suatu proses desain
user interface yang berfokus pada interface, accessibility, dan Usefulnes
dalam desain user interface yang melibatkan pengguna(user) sebagai pusat
dari proses dengan memberikan masukan atau penilaian dalam bentuk
kuesioner.
Gambar 2. 1 User Centered Design

(sumber ISO : 13407)

16
2.9.1 Konsep User Centered Design (UCD)

Menurut (Mukti, 2018) Prinsip kerja user centered design (UCD)
dapat di lihat di bawah ini :
1. User familiarity / mudah dikenali
pengguna secara umum, misalnya: untuk sistem perkantoran
gunakan istilah letters, documents, folders bukan directories,
file, identifiers.
2. Consistency
Konsisten dalam operasi dan istilah yang digunakan di seluruh
sistem sehingga tidak membingungkan.
3. Minimal surprise / Tidak membuat pengguna terkejut
Operasi yang terjadi dapat diprediksi oleh pengguna sesuai
dengan perintah yang ada.
4. Recoverability/ pemulihan
Recoverability ada dua macam yaitu : confirmation of
destructive action (konfirmasi terhadap aksi yang merusak)
atau ketersediaan fasilitas pembatalan (undo).
5. User guidance/ bantuan
Adanya cara penggunaan sistem sehingga pengguan lebih
mudah dalam menjalankan sistem.
Gambar 2. 2 Prinsip Perancangan UCD
(Norman, 1986)

17
2.9.2 Proses Metode User Centered Design (UCD)

Menurut gambar 2.1 terdapat 5 proses dalam user centered design
(UCD), dalam hal ini sejalan dengan pendapat (L. Albani and G.
Lombardi (FIMI), 2010), menurutnya terdapat 5 proses User
Centered Design (UCD), di antaranya :
1. Plan the human centred process

Pada tahap ini di lakukan diskusi terhadap orang-orang
yang 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
proses atau dimana mereka di butuhkan.
2. Specify the context of use
Untuk mengidentifikasi orang yang akan menggunakan
produk. Hal ini akan menjelaskan untuk apa dan dalam kondisi
seperti apa mereka yang akan menggunakan produk.
3. Specify the user and organisational requirements
Mengidentifikasi kebutuhan pengguna/user.
4. Product design solutions
Membangun desain sebagai solusi dari produk yang sedang di
lakukan.
5. Evaluate design against user requirement
Melakukan evaluasi terhadap desain yang dilakukan apakah
tujuan pengguna telah tercapai.
2.9.3 Perbedaan Metode UCD Dengan Metode Yang Lain

Perbedaan metode user centered design metode lain.

18
Tabel 2. 1 Perbedaan UCD Dengan Metode Lain

User Centered Activity Centered
Goal Directed Design
Design Design
(GDD)
(UCD) (ACD)
User Centered Activity Centered Goal Directed Design
Design ( UCD) Design (ACD) (GDD) berfokus pada
berfokus pada berfokus ada aktifitas, tujuan pengguna.
pengguna dan dimana ACD Dalam proses GDD
mempertimbangkan menanyakan tugas juga memasukan apa
tujuan atau kegiatan tugas yang di sebut
atau kegiatan apa "skenario": deskritpif
yang harus diaktifkan cerita naratif tentang
oleh bagaimana
alikasi/alat/sistem kepribadian terlibat
atau menggunakan
aplikasi.
Alur UCD meliputi Alur ACD meliputi Alur GDD meliputi

establishing observing, reframing, research, modelling,
requirement, converging, requirement,
desgining, experimenting framework,
prototyping, evaliatin rejinement, support
2.10 Hierarchical Task Analysis (HTA)

Hierarchical Task Analysis Merupakan pendekatan yang terstruktur
dan objektif untuk mendeskripsikan kinerja pengguna dalam
menyelesaikan suatau task berdasarkan dari faktor manusia. HTA ini
memberikan gambaran atau pemahaman bagaimana cara pengguna untuk
melaksanakan suatu task untuk mencapai tujuannya. HTA merupakan
suatu alat yang fleksibel yang dapat disesuaikan dengan berbagai situasi
dan kebutuhan (Aldi Ilham Abubakar, Eko Darwiyanto, S.T, M.T, Dawam
Dwi Jatmiko Suwawi, 2019) .

19
Gambar 2. 3 Contoh Hierarchical Task Analysis
(Sumber : Hornsby, 2010)
2.11 Usability Testing

Untuk mengevaluasi sebuah produk dengan mengujinya langsung
pada pengguna. Tujuannya adalah untuk mengidentifikai masalah uji
ketergunaan seperti, mengumpulkan data kualitatif dan kuantitatif,
mengukur kemudahan, mengukur efisiensi dan menentukan kepuasan
pengguna dengan produk (Luh Putri Ari Wedayanti, Kadek Ayu
Wirdiani, & Ketut Adi Purnawan, 2019). Pengukuran usability,
dilakukan menggunakan serangkaian kuisioner yang dapat mengolah data
yang berhubungan dengan efektifitas, efisiensi dan kepuasan dalam
penggunaan suatu sistem informasi (Sahfitri & Ulfa, 2015).
Menurut (Santoso, 2018) terdapat beberapa jenis kuisioner yang

dapat digunakan untuk mengukur usability seperti :
a. System Usability Scale (SUS), yang ditawarkan secara

komersial dalam bentuk paket.
b. Post-Study System Usability Questionnaire (PSSUQ),
merupakan paket kuisioner yang dirilis oleh IBM yang terdiri
atas 19 item instrument pengukuran.
c. WAMMI dan SUPR-Q untuk mengukur website.
d. Single Ease Question (SEQ) yang terdiri dari satu pertanyaan
singkat.
e. USE (Usefulness, Satisfaction, and Ease of use), serta beberapa
paket kuisioner lainnya.

20
2.12 System Usability Scale

System Usability Scale (SUS) merupakan suatu metode uji pengguna
yang meyediakan alat ukur yang bersifat ―quick and dirty‖ yang dapat
diandalkan. System Usability Scale (SUS) merupakan instrumen yang
murah tetapi efektif untuk menguji usabilty suatu produk, termasuk
website, telepon genggam, aplikasi televisi dan yang lainnya (Ramadhan,
2019). Menurut (Ramadhan, 2019) terdapat beberapa penilaian terhadap
system usability scale adalah sebagai berikut :
a. Skala yang digunakan adalah sangat tidak setuju (strongly
disagree) sampai sangat setuju (strongly agree) bernilai 1
sampai 5.
b. Untuk pernyataan bernomor ganjil dihitung dengan cara : nilai
dari respon pengguna dikurangi dengan nilai 1.
c. Untuk pernyataan bernomor genap dihitung dengen cara : nilai
5 dikurangi dengan nilai dari respon penggun.
d. Jumlahkan nilai respon yang telah dihitung pada poin 2 dan 3
diatas, dan kalikan hasilnya dengan nilai 2.5. Hasil perhitungan
ini akan mengkonversi rentang nilai menjadi antara 0–100.
Gambar 2. 4 SUS Score
(Sumber : https://uxpamagazine.org/sustified/)

21
2.13 Adobe XD
Adobe Experience Design merupakan aplikasi desktop untuk
merancang user interface, merancang mockup, prototype alur pengguna
serta interaksi pengguna (Budhiluhoer, 2018).
2.14 Photoshop
Adobe Photosop adalah perangkat lunak editor citra buatan Adobe
Systems yang di khususkan untuk pengeditan foto, gambar, dan
pembuatan efek, Perangkat lunak ini banyak digunakan oleh fotografer
digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar
(market leader) untuk perangkat lunak pengolah gambar, dan bersama
Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi
oleh Adobe System (Sakti, 2017) .
2.15 Balsamiq Mockup

Balsamiq Wireframes adalah alat wireframing UI dengan ketelitian
rendah yang cepat yang mereproduksi pengalaman membuat sketsa di
notepad atau papan tulis, tetapi menggunakan komputer.
ini benar-benar memaksa Anda untuk fokus pada struktur dan konten,
menghindari diskusi panjang tentang warna dan detail yang seharusnya
muncul nanti dalam proses (Balsamiq.com, 2020).
2.16 Flaticon
Flaticon adalah salah satu website yang menyediakan icon secara gratis
ataupun berbayar untuk mengunduh ikon pada flaticon terdapat 3 jenis
user di antaranta (Flaticon, 2020).
a. Non-registered User
Para pengguna yang tidak terdaftar atau masuk ke situs website kami
hanya dapat membuat 1 Koleksi Ikon dan batas unduhan akan dibatasi
hingga 10 ikon per hari. Selain itu, pengguna yang tidak terdaftar
tidak akan dapat mengunduh Paket Ikon.
b. Registed User

22
User yang sudah terdaftar sebagai aggota flaticon tetapi belum

membeli paket premium dapat membuat 3 koleksi ikon dengan 50
ikon untuk setiap koleksi. Batasan unduhan 100 ikon perhari.
c. Premium User
User yang sudah melakukan pembayaran akan mendapatkan koleksi
ikon tanpa batas. Setiap koleksi ikon dapat memiliki 256 ikon.
Batasan unduhan adalah 2000 ikon perhari.
2.17 Mockup
Mockup adalah sebuah media visual atau preview dari sebuah konsep
desain ―datar‖ yang diberikan efek visual sehingga hasilnya sangat
menyerupai wujud nyata, mockup dapat memberikan gambaran nyata
dari sebuah konsep desain bagaimana konsep itu akan terlihat nantinya
jika sudah diaplikasikan menjadi atau kedalam benda nyata (Rizkita,
Rosely, & Nugroho, 2018).
2.18 Wireframe
Pembuatan wireframe merupakan tahapan paling dasar dalam membuat
desain. Wireframe dibuat secara manual menggunakan pulpen dan kertas.
Tipe wireframe yang dibuat adalah low-fidelity wireframe, dimana hasil
desain wireframe akan memiliki tingkat kemiripan yang rendah dengan
prototype yang akan dibuat ditahap selanjutnya. Keuntungan
menggunakan tipe low-fidelity wireframe adalah proses pembuatannya
lebih cepat dibandingkan dengan high-fidelity wireframe (Zulkarnain,
2019).
Menurut (Segara, 2019), kerangka wireframe di bagi menjadi tiga
komponen : desain informasi, desain navigasi, dan desain antarmuka.
Tata letak halaman adalah tempat komponen-komponen ini bersatu yang
memiliki sebuah pola, sementara wireframing menggambarkan hubungan
antara komponen-komponen didalamnya.

23
2.19 Literatur Sejenis

Pada tabel 2.2, peneliti menggunakan literatur sejenis yang sudah ada sebelumnya yaitu penelitian user experince.
Tabel 2. 2 Tabel Literatur Sejenis
No Penulis Judul Tujuan Metode Tools Kesimpulan
1 (Santoso, 2018) USABILITY USER untuk memberikan Field - pelajaran kamus

INTERFACE DAN infomasi bahasa Observation, kolok bengkala
USER EXPERINCE isyarat dalam setiap Questionnaire, untuk
MEDIA pergerakan Thinking Aloud mengetahui
PEMBELAJARAN bahasa isyarat
KAMUS KOLOK setiap
BENGKALA pergerakan
BERBASIS ANDROID
2 (Yatana Saputri et Penerapan Metode untuk menyembuhkan User Centered - Pengguna harus
al., 2017) UCD (User Centered penyakit stroke Design (UCD) pengetahui
Design) Pada E- sistem User
Commerce Putri Intan Centered Design
Shop Berbasis Web

24
3 (Khasanah et al., Penerapan Metode User untuk mengukur User Centered Google Form Dengan
2018) Centered Design dalam kelayakan User Design Menggunakan
Menganalisis User Interface pada website (UCD) Metode UCD
Interface pada website tersebut dengan dapat
Universitas Sriwijaya menggunakan metode mengetahui
UCD(User centered kelayakan
Design) website pada
Universitas
4 (Prakasa & Perancangan User Untuk memudahkan Five Planes Font yang wisatawan tidak
Ardiansyah, Experience Aplikasi wisatakan untuk yaitu Strategy digunakan dalam kesulitan lagi
2018) Marketplace Paket mencari paket wisatan Plane, Scope pembuatan untuk mencari
Wisata Indonesia Untuk Plane, Structure medium fidelity paket wisata
Wisatawan Lokal Plane, Skeleton prototype adalah sehingga
Plane, Surface Poppins dan wisatawan dapat
Plane Icon melakukan
pemesanan dan
pembayaran
5 (Rendiansah, Az- Pengembangan User untuk memandu Human Centered - Aplikasi Guide
zahra, & Saputra, Interface Aplikasi wisatawan yang Design me dapat
2017) Guide Me Berbasis Web sedang ada di jawa membantu
dengan Pendekatan timur wisatawan untuk
Human-Centered mencari tour
Design guide

25
Berdasarkan analisis penulis membandingkan 5 studi literatur dengan penelitian penulis, kelebihan penelitian penulis dibandingkan 5 studi
literatur sebelumnya yakni :
1. Penelitian ini menggunakan Balsamic Mockup dan adobe XD sedangkan literatur diatas tidak menjelaskan aplikasi yang dipakai untuk
mendesain aplikasi.
2. Pada penelitian di atas tidak di beri tahu aplikasi yang digunakan untuk mendesain sebuah aplikasi, untuk penelitian ini menggunakan
Balsamic Mockup dan Adobe XD untuk mendesain sebuah aplikasi.
3. Penelitian ini menggunakan metode SUS untuk evaluasi. Sedangkan literatur di atas tidak begitu jelas penelitiannya menggunakan
metode apa yang digunakan untuk memberikan pertanyaan.
4. Penulis menggunakan metode UCD karena dari literatur sebelumnya bahwa menggunakan metode UCD terbukti yang memiliki
tingkat usability yang tinggi jika diimplementasikan terhadap sebuah aplikasi.
5. Penelitian ini menggunakan HTA karena metode HTA dapat mengetahui bagaimana cara melakukan kerja serta langkah-langkah dan
penelitian ini menggunakan metode SUS untuk mengetahui evaluasi, sedangkan literatur diatas tidak menggunakan HTA dalam proses
penelitian dan tidak menggunakan metode lainnya untuk evaluasi.

BAB III
METODOLOGI PENELITIAN
3.1 Metode Pengumpulan Data

Dalam penelitian ini penulis menggunakan tiga cara untuk mengumpulkan
data, yaitu : obervasi, wawancara, dan studi pustaka.
3.1.1 Obervasi
Berdasarkan hasil survei, penulis akan mengamati user sebanyak
10 orang guru yang mengalami kesulitan akses pembelajaran pada
masa pendemi. Penulis akan melakukan obervasi di sekitar jakarta
dan luar jakarta.
3.1.2 Studi Pustaka

Di dalam studi pustaka ini, peneliti membaca dan mempelajari
materi yang terkait dengan penelitian dari sumber referensi yang
terpercaya seperti, buku, jurnal, e-book, dan situs di internet.
Setelah mendapatkan referensi yang relevan tersebut, penulis lalu
mencari informasi yang di butuhkan dalam penelitian ini.
Informasi yang di dapatkan di gunakan dalam penyusunan
landasan teori, dan metodologi penelitian. Pustaka yang di jadikan
acuan dapat di lihat pada halaman daftar pustaka.
3.1.3 Wawancara
Dalam hal wawancara ini penulis melakikan dengan bentuk
wawancara terstruktur. Penulis melakukan wawancara dengan
narasumber, yaitu orang yang di berkecimpung di UI/UX pada PT.
Multi Media Access yaitu Ganjar Putro Indratoro yang tentunya
berkaitan dengan ruang lingkup penelitian pada tanggal 4 juni
2020 pada PT. Multi Media Access yaitu Ganjar Putro Indratoro
yang berkaitan dengan ruang lingkup penelitian pada tanggal 4
juni 2020, pukul 09.00-15.00 WIB di kantor perwakilan PT. Multi
Media Access yang bertempat di Kawasan Jakarta
26
27
Garden City, Jl. Lantana II No. 22 – Jakarta. Jefri Ferianto selaku

UX sawangan kota Depok. Penulis melakukan wawancara. 5 di
antaranya adalah orang tua, guru, murid dan pegawai negeri sipil
yang memiliki anak. Pada tanggal 25 juni penulis melakukan
wawancara dengan guru di SDN Serua Indah 3 pada jam 10.00-
12.00 WIB, penulis melakukan wawancara dengan murid di
tangerang selatan pada tanggal 6 Agustus 2020 pada jam 09.00-
10.00, dan penulis wawancara dengan murid di salah satu kota di
jawa tengah pada tanggal 8 September 2020 pada jam 14.00-16.00
WIB. Penulis melakukan wawancara dengan salah satu orang tua
murid di tangerang selatan pada 10 Agustus 2020 pada jam 13.00-
13.30 WIB. Penulis melakukan wawancara oleh pegawai negeri
sipil di kecamatan bogor pada tanggal 16 September 2020 di
diskominfo Kabupaten Bogor pada jam 13.30-15.00 WIB, penulis
melakukan wawancara pegawai negeri sipil di Jakarta Selatan pada
tanggal 1 Oktober 2020 di pusat data dan statistika Jakarta Selatan
pada jam 13.00—14.30 WIB.
3.1.4 Kuesioner
Kuesioner dilakukan dengan memberikan daftar pertanyaan kepada
100 responden menggunakan teknik purposive samping. Kuesioner
disebarkan melalui media online menggunakan Google Form
untuk mendapatkan jawaban dari respoden. Tujuan dilakukan
kueisoner untuk mengidentifikasi masalah terkait pembelajaraan
pada masa pendemi, mengetahui seberapa tertarik user dalam
kesulitan pembelajaran pada masa pendemi, serta mengetahui
seperti apa yang user butuhkan dalam memudahkan pembelajaran
pada masa pendemi untuk rekomendasi aplikasi pembelajaran jarak
jauh yang akan di rancang.
3.2 Metode Penelitian

Metode penelitian yang digunakan untuk rancangan aplikasi ini yaitu
menggunakan metode User Centered Design (UCD).

28
3.2.1 Teknik Penarikan Sampel

Dalam penelitian ini, teknik penarikan sampel yang digunakan oleh
penulis adalah :
1. Penulis menggunakan teknik penarikan sampel yang disebut

dengan purposive sampling.
2. Purposive sampling adalah penarikan jumlah sampel dengan
kriteria tertentu dari peneliti yang relevan dengan masalah yang
ada.
3. Kriteria yang digunakan oleh penulis ada 5. Kriteria pertama
yaitu guru sebagai pengajar disekolah, kriteria kedua wali murid
sebagai perwakilan murid untuk mengumpulkan tugas,kriteria
ketiga murid untuk mengukur aplikasi tersebut mudah atau
tidak, kriteria keempat yaitu umum untuk membantu memberi
masukan terhadap aplikasi yang akan dipakai mudah atau
belum. Kriteria 5 dinas Infomasi dan Komunikasi untuk
memberikan masukan terhadap aplikasi kuy-daring.
3.2.2 Metode User Centered Design (UCD)

Dalam penelitian menggunakan metode User Centered Design
(UCD). Peneliti menggunakan 5 teknik yaitu, Plan the Human
Centered Process, Specify the Content of Use, Specify the User and
Organization Requirement, Produce Design Solution¸dan Evaluate
Design Against Requirements.
Di bawah ini merupakan penjelasan ketika yang digunakan dalam

metode User Centered Design (UCD), yaitu :
1. Plan the Human Centered Process

Pada tahap Plan the Human Centered Process peneliti
melakukan wawancara dengan narasumber yang
berkecimpungan sebagai UI/UX Designer yaitu Ganjar Putro
Indratoro, mengkonfirmasi dan menindak lanjuti penemuan-
penemuan pada metode User Centered Design (UCD). Penulis

29
melakukan wawancara selama enam jam dari pukul 09.00-

15.00 WIB di kantor perwakilan PT. Multi Media Access yang
bertempat di Kawasan Jakarta Garden City, Jl. Lantana II No.
22 – Jakarta.
2. Specify the Content of Use

Pada tahap Specify the Content of Use peneliti melakukan
wawancara dengan narasumber yang berkecimpung sebagai
UX Reseacher. UX Reseacher adalah sesorang yang
membantu perusahaan dalam cakupan user experince. Pada
tahap ini, wawancara di lakukan untuk mengkonfirmasi dan
menindak lanjuti penemuan-peneuman pada metode User
Centered Design (UCD). Penulis melakukan wawancara
selama dua jam dari pukul 10.00-12.00 WIB di kawasan
sawangan kota depok. Penelitian ini bertujuan untuk
mengetahui kebutuhan atau pengalaman user menurut UX
Researcher. Dengan kata lain penulis melakukan wawancara
untuk meminta ide dan saran dari Jefri Ferianto.
3. Specify the Use and Organization Requirement
Pada tahap Specify the Use and Organization Requirement
ini penulis melakukan diskusi dengan 5 orang. Penulis
melakukan wawancara dengan guru, wali murid, murid,
Pegawai Negeri Sipil dan umum, dengan menggunakan teknik
pemilihan responden menggunakan purposive sampling
dengan kriteria pertama yaitu guru, wali murid, murid,
pegawai negeri sipil, kriteria kedua yaitu user yang
mengalami kesulitan pembelajaran. Hal ini bertujuan guna
mendapatkan informasi untuk menindak lanjuti proses specify
the user and organization requirement selama kurang lebih 20
menit perorangnya yang dilakukan pada 25 Juni, 6 Agustus,
10 Agustus, 8 September, 1 Oktober, 6 Desember. Penulis
melakukan diskusi dengan guru. Penulis menggunakan teknik
pemilihan responden menggunakan purosive sampling dengan

30
kriteria pertama yaitu responden adalah pekerja aktif,

responden kedua yaitu user yang kesulitan dalam mengajar.
Penulis melakukan diskusi dengan user murid. Penulis
menggunakan teknik pemilihan responden menggunakan
purposive sampling dengan kriteria pertama pekerja aktif
yaitu user yang kesulitan dalam belajar. Penulis menggunakan
teknik sampling dengan kriteria pertama yaitu wali murid ,
kriteria kedua yang kesulitan dapat mengumpulkan tugas.
Setelah di peroleh data-data hasil wawancara, maka
langkah pertama selanjutnya adalah melakukan Analisis task
user dengan menggunakan Hierarchical Task Analysis
(HTA). Setelah membuat HTA maka untuk menjelaskan
proses pada HTA peneliti menggunakan model sknario yang
terdapat penjelasan dan alur pada tugas pada HTA. Setelah
mendapatkan alur tugas pada proses sebelumnya maka lanjut
pada proses melakukan pengolahan dan analisis data agar
menjadi informasi yang berguna untuk pembuatan aplikasi
wireframe dan prototype high fidelity menggunakan tools
yang sudah dijelaskan pada bab sebelumnya. Dalam tahap
Specify the User and Organization Requirement peneliti
melakukan diskusi dengan tujuan yaitu mengumpulkan data
melalui kuesioner dan menggali gagasan, opini serta ide baru
dari user. Adapun list pertanyaan tahap Specify the User and
Organization Requirement.
4. Produce Design Solution
Pada tahap Produce Design Solution penulis membuat High
Fidelity Prototype dengan menggunakan Balsamiq Mockup
dan merancang High Fidelity Prototype dengan menggunakan
Adobe XD.

31
5. Evaluate Design Against Requirements

Pada tahap Evaluate Design Against Requirements penulis
melakukan pengujian terhadap rancangan yang telah di buat
dengan menggunakan teknik Usability Testing menggunakan
metode System Usability Scale (SUS). Untuk aspek kepuasan
di ukur menggunakan kuesioner System Usability Scale.
Penyaringan responden menggunakan lembar kuesioner

yang sudah di siapkan melalui Google Form sebagai
tambahan pengujian partisipan kepada masyarakat untuk
menyukseskan sebuah penelitian ini. Penulis menggunakan
purposive sampling dengan memberikan 10 pertanyaan
melalui Google Form yang akan diajukan kepada 100
responden kemudian menilai dengan sekala 1 sampai dengan
5. Yaitu STS : Sangat Tidak Setuju (skala 1), TS : Tidak
Setuju (skala 2), N : Netral (skala 3), S : Setuju (skala 4), SS :
Sangat Setuju (skala 5). Selama proses testing, responden
meng-checklist pada pertanyaan yang ada pada Google Form
yang sudah di siapkan peneliti agar peneliti dapat melihat
tingkat keberhasilan dalam interaksi user dengan rancangan
prototype.
3.2.3 Alur Penelitian

Alur penelitian merupakan urutan logis dari pemikiran peneliti
untuk memecahkan suatu masalah penelitian, dan di tuangkan
dalam diagram flow chart dari awal hingga akhir, sehingga
penelitian dapat berjalan sistematis sesuai dengan konsep yang
telah dibuat. Kerangka penelitian dalam membuat desain prototipe
aplikasi pembelajaran jarak jauh ini telah dituangkan dalam gambar
flow chart pada dibawah ini.

32
Gambar 3. 1 Alur Penelitian

BAB IV
ANALISA DAN PERANCANGAN
4.1 Profil PT. Multimedia Access

PT Multi Media Access (MMA) adalah salah satu perusahaan yang
bergerak di bidang Information and Communication Technology (ICT)
dan Internet Service Provider (ISP), yang berlokasi di yang bertempat di
Kawasan Jakarta Garden City, Jl. Lantana II No. 22 Jakarta. Perusahaan
ini Memberikan Internet Service Provider, Web-based Application, dan
Network & IT Value Added Service.
4.2 Flow Pendekatan UCD Secara Umum

Plan the Human Centered
Process
Dalam tahap ini penulis melakukan
wawancara dengan UI/UX Designers Pada
PT. Multi media Access
Specify the Content of

Use
Peneliti melakukan wawancara

dengan narasumber sebagai UX
Reseacher Pada PT. Multi media
Access
Evaluate Design Against
Requirements Specify the User and
Organization Requirement
Pada tahap ini Adalah meng checklist
pada halaman dari setiap desain apakah
sudah sesuai atau belum terhadap Pada tahap ini penulis melakukan diskusi dengan
keinginan user dengan melakukan 5 orang. Penulis melakukan wawancara dengan
pengujian menggunakan teknik guru, wali murid, murid, Pegawai Negeri Sipil
dan umum
Usability Testing.
Produce Design
Solution
Pada tahap Produce Design

Solution penulis membuat High
Fidelity Prototype dengan
menggunakan Balsamiq Mockup
dan merancang High Fidelity
Prototype dengan menggunakan
Adobe XD
Gambar 4. 1 Flow Pendekatan UCD Secara Umum
33
34
4.3 Plan the Human Centered Design
4.3.1 Flow Plan the Human Centered Process
Flow Tahap Plan the Human

Centered Process
Pada tahap ini

adalah tahap diskusi
dengan bagian UI
Penulis melakukan
wawancara dengan
expert pada UI/UX
Desaigner
Penulis memberikan
10 pertanyaan ke
bagian UI/UX
Designers
Penulis memperoleh
hasil wawancara
yang nanti nya
digunakan untuk
membuat low dan
high fidelity
prototype
Gambar 4. 2 Flow Plan UCD the Human Centered Process
4.3.2 Keterangan Pengerjaan Plan the Human Centered Process

Dalam tahap ini peneliti melakukan wawancara dengan UI/UX
Designers pada PT. Multi Media Akses yaitu Ganjar Putro
Indratoro dengan 10 pertanyaan yang ada pada lampiran 1.
Wawancara dilakukan secara terstruktur dimana pertanyaan sudah
dipersiapkan dulu untuk mencapai suatu tujuan tertentu. Hasil dari
wawancara peneliti menyatakan bahwa UI/UX adalah bagian yang
sangat penting dalam sebuah aplikasi dan bertujuan untuk
membuat aplikasi yang user frendly, sehingga tujuan awal aplikasi
tersebut dapat dicapai. Narasumber setuju bahwa UI/UX dalam
sebuah aplikasi dapat menjadi ciri khas yang membedakan dengan
produk lain karena sebelum UI dibuat maka UI/UX Designers
harus mendefinisikan UX terlebih dahulu. Jika UX sudah di
definisikan dengan baik sesuai dengan requirement yang diberikan

35
otomatis UI akan mengikuti pola UX itu, sehingga aplikasi yang

dibuat akan memiliki ciri khas dari requirement maupun tujuan
awal dibuat aplikasi tersebut. Menurut narasumber tidak ada
parameter yang baku untuk UI/UX dari pembuatan aplikasi, semua
itu tergantung kebutuhan dan tujuan awal dibuatnya aplikasi. Jadi
parameter itu ditentukan dari kebutuhannya. Dari hasil wawancara
juga narasumber berpendapat bahwa Aplikasi Pembelajaran Jarak
Jauh sangat penting dalam masa pandemi ini. Menurut narasumber,
Aplikasi Pembelajaran Jarak Jauh sangat dibutuhkan karena untuk
mengurangi dan mencegah kontak langsung dengan orang-orang
dan untuk menyelamatkan anak-anak dari covid-19 maka untuk
kegiatan pembelajaran di sekolah dilakukan secara daring. Dalam
aplikasi Pembelajaran Jarak Jauh ini ada beberapa fitur guru dapat
memberikan materi berupa video atau dokumen, dan video
conference dan siswa dapat upload tugas dan mengunduh materi.
4.4 Specify the Context of Use
4.4.1 Flow Specify the Content Of Use

Specify the
Content Of Use
Pada tahap ini

adalah tahap diskusi
dengan expert pada
bagian UX(user
experience)
Peneliti melakukan
wawancara secara
expert pada bagian
UX Researcher
Peneliti memberikan
10 pertanyaan
kepada UX
researcher
Peneliti memperoleh
hasil wawancara
yang nanti nya
digunakan untuk
membuat low dan
high fidelity
prototype sesuai
kebutuhan user
menurut expert
Gambar 4. 3 Flow Specify the Content Of Use

36
4.4.2 Keterangan Pengerjaan Specify the Content of Use

Dalam tahap ini peneliti melakukan wawancara dengan UX
Researcher dengan Jefri Ferianto untuk meminta ide dan saran
dengan 10 pertanyaan yang sudah dijelaskan sebelumnya dan ada
pada lampiran 2 dilakukan secara terstruktur dimana pertanyaan
sudah disiapkan untuk mencapai suatu tujuan tertentu. Hasil dari
wawancara tersebut menyatakan bahwa selain guru hanya
mengupload tugas dan murid mengumpulkan tugas secara online
hendaknya untuk aplikasi pembelajaran jarak jauh ditambahkan
fitur video conference untuk menggantikan tatap muka langsung
antara guru dan murid di sekolah sangat penting menurut
narasumber.

37
4.5 Specify the User and Organization Requirement
4.5.1 Flow Specify the User and Organization Requirement

Specify the User and
Organization Requirement
Tahapan wawancara
dengan user
penulis melakukan diskusi dengan

5 orang. Penulis melakukan
wawancara dengan guru, wali
murid, murid, Pegawai Negeri
Sipil dan umum
Penulis melakukan wawancara

dengan durasi selama kurang lebih
20 menit perorangnya seputar user
needs, user targets, user
knowledges, dan lain-lain
Penulis memperoleh hasil

wawancara yang nanti nya
digunakan untuk membuat low
dan high fidelity prototype sesuai
kebutuhan user
Penulis melakukan Analisis task Penulis Penulis menggunakan

user dengan menggunakan model sknario yang terdapat
Hierarchical Task Analysis penjelasan dan alur pada tugas
(HTA). pada HTA unutk mempermudah
user menggunakan aplikasi
tersebut
Gambar 4. 4 Flow Specify the User and Organization Requirement
4.5.2 Mengidentifikasi Kebutuhan User

Penulis dalam tahap ini memberikan pertanyaan kepada responden
yang berjumlah 5 orang antara lain dengan guru, wali murid,
murid, Pegawai Negeri Sipil, dengan menggunakan teknik
pemilihan responden menggunakan purposive sampling dengan
kriteria pertama yaitu guru, wali murid, murid, pegawai negeri
sipil, kriteria kedua yaitu user yang mengalami kesulitan
pembelajaran. Hal ini bertujuan guna mendapatkan informasi untuk
menanggapi proses specify the user and organization requirement
selama kurang lebih 20 menit per orangnya. Maka dapat
dikumpulkan beberapa point sebagai berikut:

38
1. Hasil wawancara kepada pengguna dalam proses akademis

terhadap sistem pembelajaran dalam pandemi.
a. Mengumpulkan tugas masih lewat email dan ke sekolah.
b. Memberikan tugas, dan materi masih menggunakan grup
whatsapp dan email terkendala file jika terlalu besar dan
pesan grup yang banyak, sehingga guru mengirim lagi materi
tersebut.
c. Pengumpulan tugas siswa kurang efektif karena masih
menggunakan grup whatsapp.
2. Hal-hal yang menjadi tujuan user menggunakan aplikasi
pembelajaran jarak jauh seperti dibawah:
a. Pembelajaran jarak jauh salah satu solusi untuk menerapkan
social distancing guna mencegah mata rantai penyebaran
wabah covid 19.
b. Guru lebih mudah menyampaikan materi, tugas dan satu
sistem tanpa menggunakan aplikasi lain.
c. Siswa lebih muda dalam menerima materi pembelajan proses
dilakukan dalam satu aplikasi.
3. Alat atau aplikasi yang digunakan user dalam kegiatan
pembelajaran jarak jauh sebelum menggunakan aplikasi kuy-
daring ini sebagai berikut :
Alat :
a. Laptop
b. Smartphone
c. Internet/ wifi
Aplikasi :
a. Whatsapp
b. Gmail
c. Crome browser
d. Zoom Metting

39
4. Hal-hal yang diharapkan pengguna dalam aplikasi pembelajaran

jarak jauh( kuy daring) ini:
a. Guru dapat mengelola tugas dan jawaban siswa.
b. Guru dapat memberikan materi berupa dokumen atau video
berdasarkan kelas dan siswanya.
c. Guru dapat mengelola agenda video coference.
d. Sistem terdapat sistem login dan register sebagai guru dan
siswa mengupdate profil.
e. Siswa dapat mengunduh tugas dan materi.
f. Siswa dapat mengumpulkan tugas dalam satu aplikasi, dan
melakukan video conference dengan mudah dengan melihat
daftar agenda.
5. Hal-hal yang perlu user ketahui sebelum menggunakan aplikasi
Kuy-daring sebagai berikut:
a. Fungsi dan tujuan dari aplikasi.
b. Kualitas aplikasi.
c. Tata cara penggunaan aplikasi.
d. Fitur dalam aplikasi.
6. Hal-hal yang diinginkan pengguna dalam menggunakan aplikasi
pembelajaran jarak jauh ini sebagai berikut:
a. Warna sekunder yang menarik seperti biru dan gambar atau
ikon vector.
b. Tampilan yang user friendly.
c. Tampilan yang mudah dipahami.
d. Terdapat fitur kelola tugas.
e. Terdapat fitur kelola daftar materi dokumen atau video.
f. Terdapat fitur agenda video conference.
g. Terdapat fitur jawaban tugas untuk mengecek jawaban tugas
dari siswa.
h. Terdapat fitur daftar siswa.
7. Motivasi penguna untuk menggunakan aplikasi pembelajaran
jarak jauh ini sebagai berikut:

40
a. Agar pembelajaran siswa tetap berlangsung selama pandemi

dan lebih efektif.
b. Supaya guru lebih mudah saat menyampaikan tugas, materi
video, dan tatap muka virtual ke siswa dengan mudah dengan
sebuah aplikasi.
c. Supaya guru lebih mudah dalam mengkoreksi jawaban dari
siswa karena terdapat daftar siswa.
8. Hal-hal apa yang membuat frustation sebelum menggunakan
aplikasi pembelajaran jarak jauh sebagai berikut:
a. Dalam pembelajaran jarak jauh ketika menyampaikan tugas
atau materi menggunakan grub whatsapp dan email.
b. Saat melakukan video conference menggunakan zoom
sebagai tatap muka secara virtual.
c. Kurang efisien dan kesulitan ketika siswa mengunduh materi
dari grub whatsapp siswa dikarenakan terlalu banyak chat
yang menumpuk.
d. Guru sedikit kesulitan ketika membuat agenda meeting video
conference.
9. Keuntungan pengguna selama menggunakan aplikasi
pembelajaran jarak jauh sebagai berikut:
a. Pembelajaran jarak jauh dengan aplikasi ini lebih efisien dan
mudah karena tempat nya satu sistem dan banyak fitur yang
sesuai dengan kebutuhan pembelajaran.
b. Guru dimudahkan saat penyampaian materi berupa dokumen
atau video dan memberikan tugas dan melihat jawaban siswa.
c. Guru juga lebih mudah membuat agenda video conference
jadi siswa bisa mempersiapkan materi apa yang akan dibahas
saat meeting.
d. Guru juga lebih mudah mengatur siswa sesuai kelas yang
diikuti dan guru dapat mengatur username dan password jika
diperlukan untuk dalam segi keamanan.

41
e. Siswa lebih mudah mengunduh soal dan mengupload

jawaban sesuai id tugas list yang ada dalam dashboard siswa.
f. Siswa dapat melihat agenda video conference sebelum
dilakukan jadi bisa mempersiapkan materi yang akan
dipelajari.
g. Siswa dapat melihat dan mengunduh materi berupa dokumen
dan video dengan mudah.
Dalam penelitian ini terdapat point-point informasi yang digunakan

penulis untuk mengumpulkan data dan jawaban dari responden,
yaitu:
1. Goals
Terdapat informasi mengenai tujuan adanya aplikasi jarak jauh
(kuy-daring).
2. Tools
Terdapat informasi alat atau aplikasi gunakan selama
pembelajaran jarak jauh dimasa pandemi.
3. User Target
Terdapat informasi yang bisa dikumpulkan oleh penulis perihal
apa saya yang user harapkan dalam aplikasi kuy-daring.
4. User Knowledge
apa saja yang perlu pengguna ketahui sebelum menggunakan
aplikasi kuy-daring.
5. User Needs
apa saja yang pengguna butuhkan dan inginkan dalam kuy-
daring.
6. Motivation
Terdapat informasi yang terdapat dalam pengguna aplikasi kuy-
daring.
7. Frustration

42

apa saja frustration dari pengguna sebelum menggunakan
aplikasi kuy-daring.
8. Impacts
apa saja keuntungan yang akan didapatkan oleh pengguna
menggunakan aplikasi kuy-daring.
4.5.3 persona
Berdasarkan data yang didapatkan, menghasilkan tabel untuk user
persona gabungan antara kebutuhan guru dan siswa seperti tabel
4.1:
Tabel 4. 1 Persona Gabungan
Goals Tools
 Pembelajaran jarak jauh salah satu solusi Alat:

untuk menerapkan social distancing guna
 Laptop
mencegah mata rantai penyebaran wabah
 Smartphone
covid 19.
 Internet/ wifi
 Guru lebih mudah menyampaikan materi,
tugas dan satu sistem tanpa Aplikasi:
menggunakan aplikasi lain.
 Whatsapp
 Siswa lebih muda dalam menerima
 Gmail
materi pembelajan proses dilakukan
 Crome browser
dalam satu aplikasi.
 Zoom Metting
User Target User Needes
 Guru dapat mengelola tugas dan jawaban  warna sekunder yang menarik
siswa. seperti biru dan gambar atau ikon
 Guru dapat memberikan materi berupa vector.
dokumen atau video berdasarkan kelas  Tampilan yang user friendly.

43
dan siswanya.  Tampilan yang mudah dipahami.

 Guru dapat mengelola agenda video  Terdapat fitur kelola tugas.
coference.  Terdapat fitur kelola daftar materi
 Sistem terdapat sistem login dan register dokumen atau video.
sebagai guru dan siswa mengupdate  Terdapat fitur agenda video
profil. conference.
 Siswa dapat mengunduh tugas dan materi  Terdapat fitur jawaban tugas
 Siswa dapat mengumpulkan tugas dalam untuk mengecek jawaban tugas
satu aplikasi, dan melakukan video dari siswa.
conference dengan mudah dengan  Terdapat fitur daftar siswa.
melihat daftar agenda.
User Knowledges Motivations
 Fungsi dan tujuan dari aplikasi.  Agar pembelajaran siswa tetap

 Kualitas aplikasi. berlangsung selama pandemi dan
 Tata cara penggunaan aplikasi. lebih efektif.
 Fitur dalam aplikasi.  Supaya guru lebih mudah saat
menyampaikan tugas, materi
video, dan tatap muka virtual ke
siswa dengan mudah dengan
sebuah aplikasi
 Supaya guru lebih mudah dalam
mengkoreksi jawaban dari siswa
karena terdapat daftar siswa.
Frustation Impact
 Dalam pembelajaran jarak jauh ketika  Agar pembelajaran siswa tetap

menyampaikan tugas atau materi berlangsung selama pandemi dan
menggunakan grub whatsapp dan email. lebih efektif.
 Saat melakukan video conference  Supaya guru lebih mudah saat
menggunakan zoom sebagai tatap muka menyampaikan tugas, materi
secara virtual. video, dan tatap muka virtual ke
 Kurang efisien dan kesulitan ketika siswa siswa dengan mudah dengan
mengunduh materi dari grub whatsapp sebuah aplikasi
siswa dikarenakan terlalu banyak chat  Supaya guru lebih mudah dalam

44
yang menumpuk. mengkoreksi jawaban dari siswa

 Guru agak kesulitan ketika membuat karena terdapat daftar siswa.
agenda meeting video conference.
Berikut merupakan user persona dari salah satu user siswa, guru
dan pegawai negeri sipil, dalam penelitian desain aplikasi
pembelajaran jarak jauh dengan menggunakan template dari
photoshop.
Gambar 4. 5 User persona siswa

45
Gambar 4. 6 User persona Guru

46
Gambar 4. 7 User persona Pegawai Negeri Sipil
4.5.4 Analisis Tugas User

Pada proses Analisis Task User ini menggunakan Hierarchal Task
Analysis (HTA) yang bertujuan berfokus pada performance kerja
dan bagaimana cara kerja serta proses-proses awal dalam
mencapai tujuan dengan ruang lingkup seluruh penelitian. Berikut
adalah Hierarchical Task Analysis dalam aplikasi pembelajaran
jarak jauh ini.

47
Analisis Tugas Guru
Sub-Task:
1. Masuk/Daftar aplikasi kuy-daring

2. Klik ―Beranda‖ pada side bar menu
3. Klik "Absen dan kuis" pada side bar menu
4. Klik ―Daftar Siswa‖ pada side bar menu
5. Klik ―Tugas Siswa‖ pada side bar menu
6. Klik "Daftar Materi Siswa" pada side bar menu
7. Klik "Raport" pada side bar menu
8. Klik ―Video Conference‖ pada side bar menu
9. Klik ―chat‖ pada side bar menu
10. Klik ―absensi‖ pada side bar menu
11. Klik ―Seeting‖ di dropdown menu navbar
12. Klik ―keluar‖ di dropdown menu navbar
4.6 Perencanaan Guru

Rencana 0: kerjakan 1-2-3-4-5-6-7-8-9-10-11-12 dalam urutan
Berikut merupakan diagram Hierarchical Task Analysis (HTA) dalam a
plikasi pembelajaran jarak jauh (kuy-daring).
0.Aplikasi
Kuy-daring
1.Login/ 2.Halaman 3. Absen 4.Daftar 5. Tugas 6.Daftar 8.Video 11.Setting 12. Keluar
Register Beranda dan Kuis 7. Raport 9. Chat 10. Absensi
Siswa Siswa Materi Siswa Coference Profil Aplikasi
Gambar 4. 8 Flow Tahap Specify the User and Organization Requirement Guru
Diagram Hierarchical Task Analysis (HTA) di atas sebagai penghalusan

deskripsi turunan dari HTA, ada beberapa heuristic, seperti dibawah:
1. Restruktur: perluasan pada tugas ―Login atau Register‖.

2. Restruktur: perluasan pada tugas ―Halaman Beranda‖.

48
3. Restruktur: pembangkitan pada tugas ―Absen dan kuis‖ pada side

bar menu‖.
4. Restruktur: pembangkitan pada tugas ―Daftar Siswa‖ pada side bar
menu‖.
5. Restruktur: pembangkitan pada tugas ―Tugas Siswa‖ pada side bar
menu.
6. Restruktur: pembangkitan pada tugas ―Daftar Materi Siswa‖ pada
side bar menu.
7. Restruktur: pembangkitan pada tugas ―Raport‖ pada side bar menu.
8. Restruktur: pembangkitan pada tugas ―Video Conference‖ pada
side bar menu.
9. Restruktur: pembangkitan pada tugas ―Chat‖ pada side bar menu‖.
10. Restruktur: pembangkitan pada tugas ―Absensi‖ pada side bar
menu‖.
11. Restruktur: pembangkitan pada tugas ―Setting profil‖ pada Navbar.
12. Restruktur: pembangkitan pada tugas ―Keluar Aplikasi‖ pada
Navbar.

49
0.Aplikasi
Kuy-daring
1.Login/ 2.Halaman 3. Absen dan 4.Daftar 5.Tugas 6.Daftar 8.Video 12. keluar
7. Raport 9. Chat 10. Absensi 11.Setting
Register Beranda Kuis Siswa Siswa materi siswa Conference aplikasi
Plan 11.1 Plan 12.1
Plan 10 12.1
10.1 11.1
Keluar
Setting
aplikasi
Plan 9
Profil
9.1
Plan 8 10.1.
8.1 - 8.4
Mengisi
Absensi
Plan 7
7.1-7.4
Plan 6
6.1-6.4
Plan 2
Lihat jumlah tugas, materi,
9.1.
agenda dan siswa Plan 5 Chat
5.1-5.4
Plan 4
8.4.
8.1 Menambah 8.2. Mengedit 8.3. Menghapus
4.1-4.4 Melihat Agenda
Agenda Video Agenda Video Agenda Video
Video
Conference Conference Conference
Conference
Plan 3
Plan 1. 3.1 – 3.4
do “sudah daftar” 1.1
IF “belum daftar” 1.2
7.1 7.2. 7.3.
7.4.
Menambah Mengedit Menghapus
Lihat Raport
Raport Raport Raport
6.1 6.2. 6.3. 6.4.

Menambah Mengedit Menghapus Unduh
2.1
Materi Siswa Materi Siswa Materi Siswa Materi Siswa
Menampilkan
jumlah tugas,
materi,
raport, absen 5.1 5.2. 5.3 5.4.
dan Menambah Mengedit Menghapus Melihat
kuis,jawaban Tugas Siswa Tugas Siswa Tugas Siswa Tugas Siswa
tugas, agenda
video
coference, 4.1 4.2. 4.3. 4.4.
dan daftar Menambah Mengedit Menghapus Melihat
siswa siswa siswa siswa siswa
3.1 3.2 3.3. 3.4. 3.6. 3.7. 3.8. 3.9.

3.5.
Menambah Melihat Melihat Menambah Menambah Mengedit Hapus Melihat Nilai
Detail Kuis
Jadwa Absen Jadwal Detail absen Kuis pertanyaan Pertanyaan Pertanyaan Siswa
1.1 register 1.2 Login
Masukkan masuk ke
username dan halaman
password beranda
klik login
1.1.1 Isi form 1.1.2 masuk

register guru halaman
login
Gambar 4. 9 Hierarchical Task Analysis Setelah Dilakukan Penurunan Guru

50
Analisis Tugas Siswa

Sub-Task :
1. Masuk/Daftar aplikasi kuy-daring

2. Klik ―Beranda‖ pada side bar menu
3. Klik ―Daftar Tugas‖ pada side bar menu
4. Klik ―Daftar Materi‖ pada side bar menu
5. Klik ―Daftar Kuis‖ pada side bar menu
6. Klik ―Video Conference‖ pada side bar menu'
7. Klik ―Chat‖ pada side bar menu
8. Klik ―Raport‖ pada side bar menu
9. Klik ―Setting‖ di dropdown menu navbar
10. Klik ―Keluar Aplikasi‖ di dropdown menu navbar
4.7 Perencanaan Siswa

Rencana 0: kerjakan 1-2-3-4-5-6 -7-8-9-10 dalam urutan
Berikut merupakan diagram Hierarchical Task Analysis (HTA) dalam
aplikasi pembelajaran jarak jauh (kuy-daring).
0.Aplikasi
Kuy-daring
1.Login/ 2.Halaman 3.Daftar 4.Daftar 6. Daftar 5.Video 9. Setting 10.Keluar

7. Chat 8. Raport
Register Beranda Tugas Materi Kuis Conference Profil aplikasi
Gambar 4. 10 Flow Tahap Specify the User and Organization Requirement Siswa
Diagram Hierarchical Task Analysis (HTA) di atas sebagai penghalusan

deskripsi turunan dari HTA, ada beberapa heuristic, seperti dibawah:
1. Restruktur: perluasan pada tugas ―Login atau Register‖.

2. Restruktur: perluasan pada tugas ―Halaman Beranda‖.
3. Restruktur: pembangkitan pada tugas ―Daftar Tugas‖ pada side bar
menu‖.

51
4. Restruktur: pembangkitan pada tugas ―Daftar Materi‖ pada side bar

menu.
5. Restruktur: pembangkitan pada tugas ―Daftar Kuis‖ pada side bar
menu‖.
6. Restruktur: pembangkitan pada tugas ―Video Conference‖ pada
side bar menu.
7. Restruktur: pembangkitan pada tugas ―Chat‖ pada side bar menu‖.
8. Restruktur: pembangkitan pada tugas ―Raport‖ pada side bar
menu‖.
9. Restruktur: pembangkitan pada tugas ―Setting‖ pada Navbar.
10. Restruktur: pembangkitan pada tugas ―Keluar Aplikasi‖ pada
Navbar.

52
0.Aplikasi
Kuy-daring
1.Login/ 2.Halaman 3.Daftar 4.Daftar 5.Daftar 6.Video 9.Setting 10.Keluar

Register Beranda Tugas Materi Kuis 7. Chat 8. Raport
Conference Profil aplikasi
Plan 10
10.1
Plan 9
9.1
Plan 8
8.1
10. Keluar
Plan 7
aplikasi
7.1 9.1 Setting
Profil
Plan 6
6.1-6.3
Plan 5 8.1. Melihat 8.2. 8.3. Donwload

5.1-5.3
raport Print raport raport
Plan 4
4.1-4.2
Plan 2
Lihat jumlah tugas, materi,
7.1. Chat 7.2. Chat
Plan 3
agenda dan siswa 3.1-3.4 Siswa Guru
Plan 1.
do “sudah daftar” 1.1
IF “belum daftar” 1.2
6.1 Melihat
6.2 masuk room 6.3 keluar room
Agenda video
conference conference
coference
5.1 Melihat 5.3 Memulai

5.2 Absensi 5.4 Nilai kuis
daftar kuis kuis
4.1 4.2.
Melihat Mengunduh
daftar materi materi
2.1
Menampilkan
jumlah tugas, 3.1 3.2. 3.3.
materi, dan Melihat Mengunduh mengupload
agenda video Daftar Tugas tugas jawaban
coference,
1.1 register 1.2 Login
Masukkan masuk ke
username dan halaman
password beranda
klik login
1.1.1 Isi form 1.1.2 masuk

register guru halaman
login
Gambar 4. 11 Hierarchical Task Analysis Setelah Dilakukan Penurunan

Siswa

53
4.7.1 Model Skenario

Dalam model skenario ini dibagi menjadi dua yaitu guru dan siswa
seperti tabel dibawah ini.
Tabel 4. 2 Model Skenario Guru
No Task Sub-Task Goals Description
1 Masuk/daftar - Masukan - Memasukan nama Alur Masuk/daftar

aplikasi Kuy- nama pengguna dan kata aplikasi:
Daring pengguna sandi untuk masuk
1. Jika user sudah
dan kata ke halaman awal
memiliki akun,
sandi beranda aplikasi
maka user harus
- Mengisi form
menginput ―nama
- Isi form registrasi untuk
pengguna‖ dan
dengan sesuai - Menyimpan database
―kata sandi‖
user baru
2. Lalu user mengklik
button ―login‖ dan
akan langsung
masuk ke halaman
beranda
2 Menu Beranda Melihat jumlah data Melihat jumlah data Alur Halaman beranda:
daftar siswa, tugas Melihat jumlah data
siswa, kumpulan tugas, dan memilih menu
daftar materi siswa, sidebar sesuai akses
dan video conference. sebagai guru.
3 Absen dan kuis - Tambah jadwal Menambah jadwal - Guru menekan tombol
absen absen siswa tambah jadwal dan
mengisi form setelah
terisi menekan tombol
tambah
Melihat jadwal yang

Guru melihat semua

54
ada jadwal dan detail waktu

absen
- Melihat jadwal
Melihat data absensi Guru melihat detail
absensi dari siswa
- Melihat detail
Menambah kuis
absensi Guru menekan tombol
tambah kuis dan mengisi
- Tambah kuis form setelah terisi semua
dan tekan tombol
Melihat data kuis yang tambah
ada
Guru melihat detai isi
- Detail kuis
danl informasi dari kuis
Menambah pertanyaan
baru
Guru menekan tombol
tambah pertayaan dan
mengisi form ketika
- Tambah
pertanyaan sudah selesai tekan
tombol tambah
Mengedit pertanyaan
Guru menekan tombol

edit dan menganti isi
dari pertanyaan yang
- Edit pertanyaan diinginkan setelah
selesai tekan tombol
simpai
Guru menekan tombol

hapus pertanyaan dan
Menghapus data
menekan akan muncul
pertanyaan
notif persetujuan
- Hapus pertanyaan menghapus data

55
Guru menekan tombol

lihat jawaban
Melihat detail jawaban dan

- Melihat nilai siswa
nilai siswa
4 Daftar siswa - Tambah - Menambah - Guru menekan

siswa data siswa tombol tambah
siswa dan mengisi
form setelah terisi
dengan benar klik
simpan.
- Guru menekan
- Edit siswa - Mengedit
tombol edit sesuai
data siswa
dengan siswa yang
akan diubah siswa,
setelah muncul
form edit dan
mengupdate
datanya lalu klik
update untuk
disimpan
didatabase.
- Hapus - Menghapus - Guru menekan

siswa data siswa tombol hapus
sesuai data siswa
yang dipilih dan
data terhapus dari
database.
- Lihat siswa - Melihat data siswa - Guru melihat semua

56
siswa berserta
kelasnya dan detail
akun nya.
5 Tugas siswa - Upload tugas siswa Mengunduh jawaban - Dengan klik unduh
- Edit tugas siswa siswa. dapat melihat
- Hapus tugas siswa jawaban siswa yang
- Unduh jawaban dipilih
tugas siswa
- Lihat tugas siswa - Filter data siswa yang
ditampilkan sesuai
mata pelajaran pada
dropdown yang
dipilih
6 Daftar materi - Tambah - Menambah

- Guru menekan
siswa materi data materi
tombol tambah
siswa siswa
materi siswa dan
mengisi form
setelah terisi
dengan benar klik
simpan.
- Guru menekan
- Edit materi - Mengedit
tombol edit sesuai
siswa data materi
dengan materi
siswa
siswa yang akan
diubah, setelah
muncul form edit
dan mengupdate
datanya lalu klik
update untuk
disimpan
didatabase.

57
- Hapus - Menghapus
- Guru menekan
materi data materi
tombol hapus
siswa siswa
sesuai data materi
siswa yang dipilih
dan data terhapus
dari database.
Lihat materi siswa Melihat data materi siswa
- Guru melihat semua
materi siswa beserta
kelasnya dan detail
akun nya.
7 Raport - Tambah - Menambah - Guru menekan

raport raport siswa tombol tambah
raport memilih
siswa dan upload
raport
- Lihat raport - Melihat data - Guru melihat
raport semua data eaport
yang ada
- Edit raport - Mengubah - Guru menekan
data raport tombol edit dan
merubah data
raport
- Hapus - Guru menekan
- Menghapus
raport tombol hapus dan
data raport
keluar notif
konfirmasi
8 Video - Tambah Menambah - Guru menekan
Conference Agenda Agenda tombol tambah
Video Video Agenda Video
Conference Conference Conference dan
mengisi form

58
setelah terisi
dengan benar klik
simpan.
- Guru menekan
- Edit - Mengedit
tombol edit sesuai
Agenda Agenda
dengan Agenda
Video Video
Video Conference
Conference Conference
yang akan diubah,
setelah muncul
form edit dan
mengupdate
datanya lalu klik
update untuk
disimpan
didatabase.
- Guru menekan
- Hapus - Menghapus
tombol hapus
Agenda Agenda
sesuai data agenda
Video Video
yang dipilih dan
Conference Conference
data terhapus dari
database.
- Guru melihat semua
- Lihat Agenda - Melihat Agenda
agenda
9 chat Chat siswa Menghubungi Guru memilih siswa

siswa via chat yang akan dihubungi
dan mengirim pesan
10 absensi Absensi Mengisi presensi Guru mengisi absensi
dengan memilih salah
saatu pilihan absen
yang ada seperti alfa,
sakit, izin, dan hadir

59
11 Setting Profil Edit profil - Mengubah Klik tombol setting atau

profil Guru ikon di navbar, akan
muncul form edit profil
klik simpan untuk
menyimpan.
12 Keluar Keluar aplikasi - Guru keluar Klik tombol keluar untuk

aplikasi keluar dari aplikasi
Tabel 4. 3 Model Skenario Siswa
No Task Sub-Task Goals Description
1 Masuk/daftar Masukan Memasukan nama

- jika user sudah
aplikasi Kuy- nama pengguna dan kata
memiliki akun,
Daring pengguna sandi untuk masuk
maka user harus
dan kata ke halaman awal
menginput ―nama
sandi beranda aplikasi
pengguna‖ dan
Mengisi form untuk
―kata sandi‖
Isi form registrasi Menyimpan database
- Lalu user mengklik
dengan sesuai user baru
button ―login‖ dan
akan langsung masuk
ke halaman beranda
2 Menu Beranda Memilih menu sidebar Melihat jumlah data daftar memilih menu sidebar
tugas, daftar materi, daftar sesuai akses sebagai siswa.
nilai, dan jadwal video.
3 Daftar tugas - Lihat tugas - Melihat daftar
- siswa melihat
- Unduh tugas
semua daftar tugas
tugas - Mengunduh tugas
- siswa mengunduh
- Upload tugas - Mengupload jawaban
tugas tugas yang
diberikan guru
dengan klik tombol

60
unduh sesuai mata

pelajaran
- siswa upload jawaban
berdasarkan tugas
yang dipilih, terdapat
form upload jawaban
tugas dan mendapat
notifikasi berhasil
upload.
4 Daftar materi Unduh materi mengunduh materi Siswa mengunduh materi

dengan tombol download
materi bisa berupa video
dan dokumen.
5 Daftar Kuis - Lihat Kuis - Melihat daftar - Siswa melihat semua

agenda kuis daftar kuis yang ada
- Absensi - Mengisi Absensi - Siswa wajib mengisi

absensi dengan memilih
hadir dan menekan
tombol simpan
- Siswa menekan tombol
- Mulai Kuis - Memulai kuis yang
mulai kuis dan
tercantum
mengerjakan kuis yang
telah dipilih
- Siswa menekan tombol
- Melihat nilai kuis yang lihat nilai dan akan
- Nilai Kuis dilakukan terlihat nilai kuis,
jawaban yang benar dan
salah serta kunci
jawaban dari kuis
6 Video - Lihat - Melihat daftar - Siswa melihat

Conference Agenda Agenda semua agenda yang
- Masuk - Menguikuti akan dilaksanakan

61
zoom agenda dan sudah

- Keluar zoom - Keluar dari zoom dilaksanakan
- Siswa mengklik
tombol ikuti kelas
untuk memulai
video conference
- Siswa klik tombol
keluar untuk keluar
dari kelas zoom
7 Chat Chat Siswa/Guru Menghubungi - Siswa dapat

Guru/Siswa memilih
menghubungi guru
dengan menekan
tombol giuru
kemudian untuk
menghubungi siswa
lain siswa dapat
menekan tombol
siswa, untuk
mengirim pesan
siswa mengisikan
pesannya dan tekan
enter
8 Raport Melihat Raport - Melihat Raport - Siswa melihat
raport dari hasil
pembelajarannya
- Print Raport - Siswa menekan
tombol print dan
akan melakukan
print raport
- Download - Siswa menekan

62
tombol download
dan akan otomatis
download raport
9 Setting Profil Edit profil - Mengubah Klik tombol setting atau
profil ikon di navbar, akan
- Siswa muncul form edit profil

klik simpan untuk
menyimpan.
10 Keluar Keluar aplikasi Guru keluar aplikasi Klik tombol keluar untuk
keluar dari aplikasi
4.8 Product Design Solution

Penelitian ini Menghasilkan analisa dan perancangan aplikasi
pembelajaran jarak jauh berupa gambar screen shot low fidelity prototype
(wireframe) dan screen shot prototype high fidelity (adobe XD) dengan
pendekatan UCD.
4.8.1 Flow Tahap Product Design Solution
Gambar 4. 12 Flow Tahap Produce Design Solution

63
4.8.2 Design
A. Logo
Gambar 4. 13 Logo Aplikasi
Sebagai identitas aplikasi kuy-daring itu sendiri, penulis

menambahkan logo yang dibuat berdasarkan warna dan tujuan
dari aplikasi tersebut. Ilustrasi buku dipilih sebagai dari belajar,
terdapat pula diatas buku berbentuk bulat yang didefinisikan
sebagai manusia. Hal tersebut diharapkan sejalan dengan tujuan
dari aplikasi tersebut, yakni dapat menjadi media untuk
mempelajarai berbagai pelajaran dan ilmu sehingga pengetahuan
bagi para siswa.
B. Tipografi
Gambar 4. 14 Tipografi
Pada perancangan desain kuy-daring, digunakan font

berjenis semibold yaitu (font yang tidak memiliki kaki-kaki)

64
yaitu Open Sans. Font tersebut digunakan secara keseluruhan

baik headline maupun bodytext pada aplikasi. Open Sans dipilh
dikarenakan bentuknya mudah di baca.
C. Warna
Terdapat beberapa kelompok warna yang digunakan dalam
perancangan desain aplikasi kuy-daring.
Gambar 4. 15 Warna
Warna putih memberikan arti bersih dan suci, untuk warna biru
memberikan arti pengabdian
D. Ikon
Gambar 4. 16 Ikon Menu Bar

( Sumber : freepik.com)

65
Rancangan desain aplikasi Kuy-daring pada penelitian ini

menggunakan beberapa ikpn seperti gambar diatas, diantaranya
untuk ikon menu beranda ( biru tua ikon rumah: beranda, biru
muda ikon buku: absen dan kuis, merah ikon orang: daftar
siswa, hijau ikon muda garis-garis: daftar materi siswa, hijau tua
ikon buku: tugas siswa, pink ikon ceklis: jawaban tugas siswa,
kuning ikon hp: raport, navy kamera: video conference, ungu
ikon pesan: chat) ikon menu pembelajaran dibuat berwarna agar
menarik. Tujuan digunakan ikon yakni untuk mempermudah
pengguna mengenali berbagai fitur pada aplikasi kuy-daring.
Gambar 4. 17 Ikon Dokumen

(Sumber : Flaticon.com)
Ikon diatas mengambarkan jenis file yang di unggah atau

diupload oleh guru/siswa dalam system aplikasi kuy-daring,
seperti .pdf, .ppt, .doc, Format video .mp4.
4.8.3 Ilustrasi
Desain aplikasi kuy-daring menggunakan beberapa ilustrasi yang
di ambil dengan tujuan untuk memberikan informasi dalam bentuk
visual yang mudah dipahami, menghibur dan memperindah
tampilan supaya agar menarik perhatian siswa. Berikut merupakan
ilustrasi yang digunakan :

66
Tabel 4. 4 Daftar Ilustrasi yang digunakan

(Sumber : https://material.io/resources)
Ilustrasi Keterangan
Digunakan pada halaman login

pada aplikasi Kuy-daring
Digunakan Pada Halaman Beranda

aplikasi kuy-daring
Digunakan pada halaman menu

absen dan kuis, daftar siswa
Digunakan pada halaman kuis,

halaman detail siswa

67
Digunakan pada halaman materi

siswa
Digunakan pada halaman tugas siswa
Digunakan pada halaman jawaban

tugas siswa, raport siswa
Pop up absen siswa
Pop up Berhasil mengunduh file

68
Pop up berhasil Di download
4.8.4 Perancangan Wireframe

Dalam perancangan wireframe penulis membuat sketsa antarmuka
dengan tujuan untuk membuat low fidelity prototype(wireframe).
Ada dua perancangan wireframe yang dibuat untuk guru dan siswa,
sebagai berikut:
1. Wireframe Guru
Tabel 4. 5 Wireframe Halaman Login
Wireframe Halaman Login
Deskripsi:
Wireframe Halaman login ini adalah halaman pertama sebelum masuk ke halaman

69
dashboard guru. Guru harus memasukkan username dan password jika data yang
dimasukkan benar langsung masuk ke halaman beranda guru.
Tabel 4. 6 Wireframe Halaman Register
Wireframe Halaman Register
Deskripsi:
Wireframe Halaman Register meliputi inputan nama guru, NIY, Nama Sekolah,
Username, Password setelah terisi semua klik daftar.

70
Tabel 4. 7 Wireframe Halaman Beranda Guru
Wireframe Halaman Beranda Guru
Deskripsi:
Wireframe Halaman Beranda Guru adalah halaman setelah guru berhasil
melakukan login, dihalaman ini terdapat menu-menu antara lain guru dapat
mengelola jadwal absen, kuis, materi, tugas, video conference, raport dapat
melakukan chat dan absen.
Tabel 4. 8 Wireframe Halaman Absen dan Kuis

Wireframe Halaman Absen dan kuis

71
Deskripsi :
Wireframe Halaman Absen dan kuis adalah halaman guru untuk menambah
jadwal absen, menambah kuis dan menampilkan detail dari jadwal absen.
Tabel 4. 9 Wireframe Halaman Tambah Jadwal Absen
Wireframe Halaman Tambah Jadwal Absen
Deskripsi
Wireframe halaman tambah jadwal absen adalah halaman guru untuk
menambah jadwal dari absen, ada beberapa inputan seperti tangga, kelas, mulai,
akhir ketika sudah terisi semua bisa menekan tambah untuk menambah jadwal
baru atau batal untuk membatalkan menambah jadwal

72
Tabel 4. 10 Wireframe Halaman Kuis
Wireframe Halaman Kuis
Deskripsi :
Wireframe halaman kuis adalah halaman guru untuk melihat list kuis yang ada
dan untuk menambah kuis baru
Tabel 4. 11 Wireframe Halaman Tambah Kuis
Wireframe Halaman Tambah Kuis

73
Deskripsi
Wirefrime halaman tambah kuis adalah halaman guru untuk menambah kuis
baru terdapat beberapa inputan yang harus diisi seperti tanggal, nama kuis, dan
kelas. Jika sudah selesai guru dapat menekan tombol tambah untuk menambah
kuis dan apabila ingin membatalkan guru dapat menekan tombol batal
Tabel 4. 12 Wireframe Halaman Pertanyaan

Wireframe Halaman Pertanyaan
Deskripsi
Wireframe halaman pertanyaan adalam halaman guru yang menampilkan list
pertanyaan dan detail dari setiap pertanyaan seperti durasi, skor dan guru dapat
menambah pertanyaan, edit dan hapus

74
Tabel 4. 13 Wireframe Halaman Tambah Pertanyaan
Wireframe Halaman Tambah Pertanyaan
Deskripsi
Wireframe halaman tambah pertanyaan adalah halaman guru untuk menambah
pertanyaan, guru diharuskan mengisi soal, pilihan a, b, c, d, dan jawaban dari
pertanyaan. Jika sudah selesai guru dapat menekan tombol tambah apabila guru
ingin membatalkan tambah pertanyaaan guru dapat menekan tombol batal
Tabel 4. 14 Wireframe Halaman Edit Pertanyaan

Wireframe Halaman Edit Pertanyaan
Deskripsi
Wireframe halaman edit pertanyaan adalah halaman guru untuk merubah
pertanyaan yang ada atau dipilih, jika guru sudah merubah pertanyaan yang dia

75
inginkan guru dapat menekan tombol simpan apabila ingin membatalkan guru
dapat menekan tombol batal
Tabel 4. 15 Wireframe Halaman Hapus Pertanyaan

Wireframe Halaman Pop Up Hapus Pertanyaan
Deskripsi :
Wireframe halaman pup up hapus pertanyaan adalah notifikasi ketika guru ingin
menghapus data, tekan tombol hapus jika ingin menghapus data apabila ingin
membatalkan guru dapat menekan tombol batal
Tabel 4. 16 Wireframe Halaman Detail Jawaban
Wireframe Halaman Detail Jawaban
Deskripsi

76
Wireframe Halaman Detail Jawaban adalah halaman guru untuk melihat detail
jawaban dari murid seperti jumlah jawaban benar dan salah serta nilai dari
siswa
Tabel 4. 17 Wireframe Halaman Detail Absensi
Wireframe Halaman Detail Absensi
Deskripsi
Wireframe Halaman detail absensi adalah halaman guru untuk melihat detail
absensi dari murid seperti nis siswa, namasiswa, jumlah alfa, sakit dan izin
siswa

77
Tabel 4. 18 Wireframe Halaman Daftar Siswa
Wireframe Halaman Daftar Siswa
Deskripsi:
Wireframe Halaman Daftar Siswa adalah halaman ini untuk melihat daftar
siswa dan kelas berdasarkan guru dalam membagi kelas dan siswa. Guru bisa
melihat total siswa dan aksi lihat detail siswa.
Tabel 4. 19 Wireframe Halaman Lihat Detail Siswa
Wireframe Halaman Lihat Detail Siswa
Deskripsi:

78
Wireframe Halaman Lihat Detail Tugas adalah halaman ini guru dapat melihat
daftar siswa dan jawaban sesuai yang dipilih oleh guru dalam halaman
kumpulan tugas sebelumnya, untuk tombol unduh untuk melihat jawaban dari
siswa, dan menu lihat untuk melihat soal nya.
Tabel 4. 20 Wireframe Halaman Materi Siswa
Wireframe Halaman Materi Siswa
Deskripsi:
Wireframe Halaman Materi Siswa adalah halaman guru untuk mengelola materi
siswa seperti menambah materi, mengedit materi, menghapus materi dan
melihat materi untuk siswa sesuai kelas dan pelajaran, guru dapat memberikan
materi berupa video atau dokumen.

79
Tabel 4. 21 Wireframe Halaman Materi
Wireframe Halaman Materi
Deskripsi:
Wireframe Halaman Upload Materi adalah halaman guru untuk menambah
materi yang berupa dokumen, terdapat beberapa inputan dari mata pelajaran,
kelas, dan upload file berupa dokumen atau video. Setelah form terisi semua
tinggal klik upload untuk menyimpan dan tombol batal untuk membatalkan.
Tabel 4. 22 Wireframe Halaman Edit Materi
Wireframe Halaman Edit Materi

80
Deskripsi:
Wireframe Halaman Upload Materi adalah halaman guru untuk menambah
materi yang berupa dokumen, terdapat beberapa inputan dari mata pelajaran,
kelas, dan upload file berupa dokumen atau video. Setelah form terisi semua
tinggal klik upload untuk menyimpan dan tombol batal untuk membatalkan.
Tabel 4. 23 Wireframe Halaman Tugas Siswa
Wireframe Halaman Tugas Siswa
Deskripsi:
Wireframe Halaman Tugas siswa adalah halaman guru untuk menambah tugas,
mengedit tugas, menghapus tugas dan melihat tugas untuk siswa sesuai kelas
dan pelajaran.

81
Tabel 4. 24 Wireframe Halaman Upload Tugas Siswa
Wireframe Halaman Upload Tugas Siswa
Deskripsi:
Wireframe Halaman Tugas siswa adalah halaman guru untuk menambah tugas,
terdapat beberapa inputan dari mata pelajaran, kelas, nama tugas, dan upload soal
berupa dokumen. Setelah form terisi semua tinggal klik upload untuk menyimpan
tugas dan tombol batal untuk membatalkan.
Tabel 4. 25 Wireframe Halaman Edit Tugas Siswa
Wireframe Halaman Edit Tugas Siswa

82
Deskripsi:
Wireframe Halaman Tugas siswa adalah halaman guru untuk mengubah data
tugas, guru dapat mengubah beberapa inputan dari mata pelajaran, kelas, nama
tugas, dan upload soal berupa dokumen. Setelah form terisi semua tinggal klik
update untuk menyimpan perubahan data tugas yang di edit dan tombol batal
untuk membatalkan.
Tabel 4. 26 Wireframe Halaman Jawaban Tugas Siswa
Wireframe Halaman Jawaban Tugas Siswa
Deskripsi:
Wireframe Halaman Jawaban Tugas Siswa adalah halaman guru untuk melihat
hasil jawaban tugas yang dikumpulkan oleh siswa, dan dapat menghapus
jawaban tugas dan melihat semua tugas yang sudah dikumpulkan oleh siswa
sesuai pelajaran, kelas, tanggal, total siswa yang mengumpulkan dan nama file.
Guru juga dapat melihat detail tugas untuk melihat detail kumpul tugas.

83
Tabel 4. 27 Wireframe Halaman Raport Siswa
Wireframe Halaman Raport Siswa
Deskripsi :
Wireframe halaman raport siswa adalah halaman guru untuk megelola raport
siswa seperti melakukan tambah raport baru, edit raport, hapus dan juga
download raport siswa.
Tabel 4. 28 Wireframe Halaman Pop up Tambah Raport Siswa
Wireframe Halaman Pop up Tambah Raport Siswa
Deskripsi :
Wireframe halaman pop up tambah raport siswa adalah halaman guru untuk
menambah raport siswa baru, guru memilih kelas dan nama siswa serta updload
file raport siswa setelah selesai guru bisa uploas raport

84
Tabel 4. 29 Wireframe Halaman Pop up Edit Raport Siswa
Wireframe Halaman Pop up Edit Raport Siswa
Deskripsi
Wireframe halaman pop up adalah halaman guru untuk melakukan ubah data
raport yang sudah ada, setelah merubah data yang di inginkan guru dapat
menekan tombol simpan
Tabel 4. 30 Wireframe Halaman Video Conference
Wireframe Halaman Video Conference
Deskripsi:
Wireframe Halaman Video Conference adalah halaman guru untuk mengelola
video Conference siswa seperti menambah agenda video Conference, mengedit

85
agenda, menghapus agenda dan melihat agenda untuk siswa sesuai kelas dan
pelajaran, dan waktu mulai dan selesai, guru dapat mengetahui status agenda
seperti telah selesai, mulai, akan datang.
Tabel 4. 31 Wireframe Halaman Pup up Buat Agenda Conference
Wireframe Halaman Pup up Buat Agenda Conference
Deskripsi:
Wireframe Halaman Buat Agenda Conference adalah halaman guru untuk
menambah agenda, terdapat beberapa inputan dari mata pelajaran, kelas,
tanggal pelaksanaan, jam mulai, jam selesai, Setelah form terisi semua lalu klik
buat agenda untuk menyimpan tugas dan tombol cancel untuk membatalkan.

86
Tabel 4. 32 Wireframe Halaman Pup up Edit Agenda Conference
Wireframe Halaman Pup up Edit Agenda Conference
Deskripsi:
Wireframe Halaman Edit Agenda Conference adalah halaman guru untuk
mengedit agenda yang diinputkan sebelumnya, terdapat beberapa inputan yang
dapat di ubah dari mata pelajaran, kelas, tanggal, waktu mulai dan selesai.
Setelah form terisi semua tinggal klik update untuk menyimpan data yang
sudah diedit dan tombol batal untuk membatalkan.
Tabel 4. 33 Wireframe Halaman Room Video Conference
Wireframe Halaman Room Video Conference
Deskripsi:
Wireframe Halaman Room Video Conference adalah halaman guru dan murid
untuk melakukan video Conference. Dalam layar video dapat menampilkan
wajah guru dan siswa untuk berinteraksi dan terdapat menu bagikan layar untuk

87
guru menampilakan layar monitor jika ada materi yang disampaikan dalam
bentuk power point atau dokumen lainya, terdapat tombol keluar untuk keluar
dari room video Conference.
Tabel 4. 34 Wireframe Halaman Popup Share Screen
Wireframe Halaman Popup Share Screen
Deskripsi:
Wireframe Halaman Popup Share Screen adalah halaman guru ini dapat meng
share layar monitor sesuaimateri yang disampaikan dalam bentuk power point
atau dokumen lainya, setelah memilih salah satu slide screen lalu klik tombol
bagikan layar agar bisa dilihat oleh siswa dalam room video Conference.

88
Tabel 4. 35 Wireframe Halaman Share Screen
Wireframe Halaman Share Screen
Deskripsi:
Wireframe Halaman Popup Share Screen adalah halaman ini menampilkan
screen atau slide yang dibagikan kesiswa bisa dilihat oleh siswa dalam room
video Conference.
Tabel 4. 36 Wireframe Halaman Chat
Wireframe Halaman Chat

89
Deskripsi :
Wireframe Halaman Chat adalah halaman guru untuk menghubungi siswa
melalui sistem
Tabel 4. 37 Wireframe Halaman Absen
Wireframe Halaman Absen
Deskripsi :
Wireframe Halaman absen adalah halaman guru untuk melakukan absen presensi diri
ketika melakukan pembelajaran pada hari yang ditentukan, diberikan empat pilihan
absensi yaitu sakit, izin dan hadir.

90
2. Wireframe siswa
Tabel 4. 38 Wireframe Halaman Login Siswa
Wireframe Halaman Login Siswa
Deskripsi :
Wireframe Halaman login ini adalah halaman pertama sebelum masuk ke
halaman dashboard siswa. Siswa harus memasukkan username dan password
jika data yang dimasukkan benar langsung masuk ke halaman beranda siswa.
Tabel 4. 39 Halaman Register
Wireframe Halaman Register

91
Deskripsi :
Wireframe Halaman Register meliputi inputan nama, NIK, Nama Sekolah,
Username, Password setelah terisi semua lalu klik daftar.
Tabel 4. 40 Wireframe Halaman Beranda Siswa
Wireframe Halaman Beranda Siswa
Deskripsi :
Wireframe Halaman Beranda Siswa adalah halaman setelah siswa berhasil
melakukan login, di halaman ini terdapat menu-menu antara lain siswa dapat
melihat tugas, melihat materi, melihat daftar kuis dan melakukan kuis, melihat
jadwal video conference. menghubungi guru via chat, dan download raport

92
Tabel 4. 41 Wireframe Halaman Kumpulan Tugas
Wireframe Halaman Kumpulan Tugas
Deskripsi :
Wireframe Halaman Jawaban Tugas Siswa adalah halaman siswa untuk
mendownload tugas dan menjawab tugas dengan upload tugas dari tugas yang
diberikan oleh guru.
Tabel 4. 42 Wireframe Halaman Upload Tugas
Wireframe Halaman Upload Tugas
Deskripsi :

93
Wireframe Halaman Upload Tugas siswa adalah halaman siswa untuk

mengupload jawaban dari tugas yang diberikan guru, terdapat beberapa inputan
dari mata pelajaran, dan upload jawaban. Setelah form terisi semua kemudian
klik upload untuk menyimpan jawaban tugas dan tombol batal untuk
membatalkan.
Tabel 4. 43 Wireframe Halaman Materi
Wireframe Halaman Materi
Deskripsi :
Wireframe Halaman Materi Siswa adalah halaman siswa untuk mengambil atau
mengunduh materi berupa video atau dokumen.

94
Tabel 4. 44 Wireframe Halaman Kuis
Wireframe Halaman Kuis
Deskripsi :
Wireframe halaman kuis adalah halaman siswa untuk melihat list kuis yang ada,
pada halaman ini siswa dapat melakukan kuis dan melihat nilai kuisnya
Tabel 4. 45 Wireframe Halaman Pop up Absensi
Wireframe Halaman Pop up Absensi
Deskripsi :

95
Wireframe Halaman Pop up Absensi adalah halaman siswa dimana siswa

diharuskan untuk mengisi absen sebelum mengisi kuis yang ada
Tabel 4. 46 Wireframe Halaman Pertanyaan
Wireframe Halaman Pertanyaan
Deskripsi :
Wireframe halaman pertanyaan adalah halaman siswa untuk mengisi pertanyaan
dari kuis yang telah dipilih, siswa mengisi dengan memilih salah satu jawaban
yang tersedia

96
Tabel 4. 47 Wireframe Halaman Nilai
Wireframe Halaman Nilai
Deskripsi :
Wireframe halaman nilai adalah halaman siswa untuk melihat hasil jawaban
dari kuis yang telah di jawab oleh siswa

97
Tabel 4. 48 Wireframe Video Coference
Wireframe Halaman Video Coference
Deskripsi :
Wireframe Halaman Video Conference adalah halaman siswa untuk mengikuti
agenda video conference yang guru buat sesuai kelas dan pelajaran, kemudian
waktu mulai dan selesai, siswa dapat mengetahui status agenda seperti telah
selesai, mulai, akan datang.

98
Tabel 4. 49 Wireframe Halaman Room Siswa Video Conference
Wireframe Halaman Room Siswa Video Conference
Deskripsi :
Wireframe Halaman Room Siswa Video Conference adalah halaman Siswa
untuk masuk dan mengikuti agenda video conference yang didalamnya guru
dapat memberi materi secara langsung melalui camera atau persentasi materi.
Tabel 4. 50 Wireframe Halaman Chat
Wireframe Halaman Chat Siswa
Deskripsi :
Wireframe Halaman Chat Siswa adalah halaman siswa untuk berkomunikasi dengan

99
bertukar pesan antar siswa agar lebih interaktif
Tabel 4. 51 Wireframe Halaman Chat Guru
Wireframe Halaman Chat Guru
Deskripsi :
Wireframe halaman chat guru adalah halaman siswa untuk menghubungi guru dengan
cara bertukar pesan ketika siswa memiliki pertanyaan dari materi atau tugas

100
Tabel 4. 52 Wireframe Halaman Raport
Wireframe Halaman Raport
Deskripsi :
Wireframe halaman raport adalah halaman siswa untuk melihat raport hasil belajarnya
selaman satu semester, siswa dapat mendownload raportnya serta mencetak raport
tersebut sendiri.
Tabel 4. 53 Wireframe Halaman Profil Siswa
Wireframe Halaman Profil Siswa

101
Deskripsi :
Wireframe Halaman Profil Siswa adalah bisa mengedit profil siswa dari nama,
NIK, nama sekolah, username, dan password.
4.8.5 Perancangan High Fidelity Prototype

Pada bagian ini penulis membuat sketsa antarmuka tujuannya adalah
untuk membuat High fidelity prototype. Warna utama aplikasi
pembelajaran jarak jauh ini adalah warna biru dengan nilai HEX dan
warna putih dengan nilai HEX. Hasil dari pembuatan mockup sebagai
berikut:

102
A. Mockup Halaman Guru:

1. Halaman Login
Gambar 4. 18 Halaman Login
2. Halaman Register Guru
Gambar 4. 19 Halaman Register Guru

103
3. Halaman Dashboard guru
Gambar 4. 20 Halaman Dashboard Guru
4. Halaman Absen dan Kuis
Gambar4. 21 Halaman Absen dan Kuis

104
5. Halaman Tambah Jadwal Absen
Gambar 4. 22 Halaman Tambah Jadwal Absen
6. Halaman Detail Absen
Gambar 4. 23 Halaman Detail Absen

105
7. Halaman Halaman Kuis
Gambar 4. 24 Halaman Kuis
8. Halaman Tambah Kuis
Gambar 4. 25 Halaman Tambah Kuis

106
9. Halaman Detail Pertanyaan
Gambar 4. 26 Halaman Detail Pertanyaan
10. Halaman Tambah Pertanyaan
Gambar 4. 27 Halaman Tambah Pertanyaan

107
11. Halaman Edit Pertanyaan
Gambar 4. 28 Halaman Edit Pertanyaan
12. Halaman Detail Jawaban
Gambar 4. 29 Halaman Detail Jawaban

108
13. Halaman Daftar Siswa
Gambar 4. 30 Halaman Daftar Siswa
14. Halaman Tambah Kelas
Gambar 4. 31 Halaman Tambah Kelas

109
15. Halaman Detail Siswa
Gambar 4. 32 Halaman Detail Siswa
16. Halaman Tambah Sswa
Gambar 4. 33 Halaman Tambah Siswa

110
17. Halaman Edit Siswa
Gambar 4. 34 Halaman Edit Siswa
18. Halaman Daftar Materi Siswa
Gambar 4. 35 Halaman Daftar Materi Siswa

111
19. Halaman Upload Materi Siswa
Gambar 4. 36 Halaman Upload Materi Siswa
20. Halaman Edit Materi
Gambar 4. 37 Halaman Edit Materi

112
21 Halaman Tugas Siswa
Gambar 4. 38 Halaman Tugas Siswa
22. Halaman Upload Tugas Siswa
Gambar 4. 39 Halaman Upload Tugas Siswa

113
23. Halaman Edit Tugas Siswa
Gambar 4. 40 Halaman Edit Tugas Siswa
24. Halaman Jawaban Tugas Siswa
Gambar 4. 41 Halaman Jawaban Tugas Siswa

114
25. Halaman Raport Siswa
Gambar 4. 42 Halaman Raport Siswa
26. Halaman Tambah Raport Siswa
Gambar 4. 43 Halaman Tambah Raport Siswa

115
27. Halaman Edit Raport Siswa
Gambar 4. 44 Halaman Edit Raport Siswa
28. Halaman Agenda Video Conference
Gambar 4. 45 Halaman Agenda Video Conference

116
29. Halaman Tambah Agenda Video Conference
Gambar 4. 46 Halaman Tambah Agenda Video Conference
30. Halaman Edit Agenda Video Conference
Gambar 4. 47 Halaman Edit Agenda Video Conference

117
31. Halaman Video Conference
Gambar 4. 48 Halaman Video Conference
32. Halaman Popup Share Screen
Gambar 4. 49 Halaman Popup Share Screen

118
33. Halaman Popup Share Screen
Gambar 4. 50 Halaman Popup Share Screen
34. Halaman Chat
Gambar 4. 51 Halaman Chat

119
35. Halaman Absen
Gambar 4. 52 Halaman Absen
B. Mockup Halaman Siswa:
1. Halaman Login siswa
Gambar 4. 53 Halaman Login siswa

120
2. Halaman Register siswa
Gambar 4. 54 Halaman Register siswa
3. Halaman Beranda siswa
Gambar 4. 55 Halaman Beranda Siswa

121
4. Halaman Daftar Tugas
Gambar 4. 56 Halaman Daftar Siswa
5. Halaman Upload Jawaban Tugas siswa
Gambar 4. 57 Halaman Upload Jawaban Tugas siswa

122
6. Halaman Pesan Berhasil Upload
Gambar 4. 58 Halaman Pesan Berhasil Upload
7. Halaman Pesan Berhasil Mengunduh Tugas
Gambar 4. 59 Halaman Pesan Berhasil Mengunduh Tugas

123
8. Halaman Daftar Materi
Gambar 4. 60 Halaman Daftar Materi
9. Halaman Berhasil Mengunduh Materi
Gambar 4. 61 Halaman Berhasil Mengunduh Materi

124
10. Halaman Daftar Kuis
Gambar 4. 62 Halaman Daftar Kuis

125
11. Halaman Absen
Gambar4. 63 Halaman Absen
12. Halaman Pertanyaan
Gambar 4. 64 Halaman Pertanyaan

126
13. Halaman Nilai
Gambar 4. 65 Halaman Nilai
14. Halaman Video Conference
Gambar 4. 66 Halaman Video Conference

127
15. Halaman Ruang Video Conference
Gambar 4. 67 Halaman Ruang Video Conference
16. Halaman Chat Siswa
Gambar 4. 68 Halaman Chat Siswa

128
17. Halaman Chat Guru
Gambar 4. 69 Halaman Chat Guru
18. Halaman Raport
Gambar 4. 70 Halaman Raport

129
4.9 Prototipe
4.9.1 Guru
1. Register dan Login
Gambar 4. 71 Prototipe Register dan Login

130
2. Beranda guru
Gambar 4. 72 Prototipe Beranda guru

131
3. Absen
Gambar 4. 73 Prototipe Absen
4. Kuis
Gambar 4. 74 Prototipe Kuis

132
5. daftar Siswa
Gambar 4. 75 Prototipe daftar Siswa
6. Daftar Materi Siswa
Gambar 4. 76 Prototipe Daftar Materi Siswa

133
7. Jawaban Tugas Siswa
Gambar 4. 77 Prototipe Jawaban Tugas Siswa
8. Raport
Gambar 4. 78 Prototipe Raport

134
9. Video conference
Gambar 4. 79 Prototipe Video conference
10. Chat
Gambar 4. 80 Prototipe Chat

135
11. Pop up absen
Gambar 4. 81 Prototipe Pop Up Absen

136
4.9.2 Siswa
1. beranda siswa
Gambar 4. 82 Prototipe Beranda Siswa

137
2. Daftar Tugas Siswa
Gambar 4. 83 Prototipe Daftar Tugas Siswa
3. Daftar Materi Siswa
Gambar 4. 84 Prototipe Daftar Materi Siswa

138
4. Daftar Kuis
Gambar 4. 85 Prototipe Daftar Kuis
5. Video Conference
Gambar4. 86 Prototipe Video Conference

139
6. Halaman Chat
Gambar 4. 87 Prototipe Halaman Chat
7. raport siswa
Gambar 4. 88 Prototipe Raport Siswa

140
4.10 Evaluate Design Against Requirements
Flow Tahap Evaluate Design Against Requirements
Evaluate Design
Againt Requirement
Tahap ini
mengevaluasi
terhadap aplikasi
yang telah dibuat
Evaluasi
menggunakan
metode system
Usability (SUS)
Mendapatkan nilai
75 dan memiliki
target akseptibilitas
yang tinggi
Gambar 4. 89 Flow Tahap Evaluate Design Against Requirements
Menurut penulis berdasarkan Evaluasi Desain User Requirement yang

akan di uraikan dengan meng-checklist ―iya/tidak‖ untuk mengetahui
apakah desain sudah sesuai dengan keinginan pengguna, pengguna ini
dibagi menjadi dua bagian akses sebagai guru dan siswa. Daftar
keinginan pengguna sebagai berikut:

141
Tabel 4. 54 Tabel checklist daftar keinginan guru
Daftar Keinginan guru
No Keinginan Pengguna iya/tidak Keterangan

1 login guru Iya (√) Keinginan telah terpenuhi.
2 register guru Iya (√) Keinginan telah terpenuhi.
3 Beranda Guru Iya (√) Keinginan telah terpenuhi.
4 Absen dan Kuis Iya (√) Keinginan telah terpenuhi.
5 Tambah Jadwal Absen Iya (√) Keinginan telah terpenuhi.
6 Tambah Kuis Iya (√) Keinginan telah terpenuhi.
7 Tambah Detail Kuis Iya (√) Keinginan telah terpenuhi.
8 Detail Kuis Iya (√) Keinginan telah terpenuhi.
10 Tambah Pertanyaan Iya (√) Keinginan telah terpenuhi.
11 Edit Pertanyaan Iya (√) Keinginan telah terpenuhi.
12 Nilai Siswa Iya (√) Keinginan telah terpenuhi.
13 Tugas Siswa Iya (√) Keinginan telah terpenuhi.
14 Upload Tugas Siswa Iya (√) Keinginan telah terpenuhi.
15 Edit Tugas Siswa Iya (√) Keinginan telah terpenuhi.
16 Materi Siswa Iya (√) Keinginan telah terpenuhi.
Halaman Upload
17 Video Iya (√) Keinginan telah terpenuhi.
Halaman Materi
18 Dokumen Iya (√) Keinginan telah terpenuhi.
19 Video Conference Iya (√) Keinginan telah terpenuhi.
Pup up Buat Agenda
20 Conference Iya (√) Keinginan telah terpenuhi.
Pup up Edit Agenda
Halaman Room Video
23 Halaman Popup Share Iya (√) Keinginan telah terpenuhi.

142
Screen
24 Halaman Share Screen Iya (√) Keinginan telah terpenuhi.
Halaman Jawaban
25 Tugas Siswa Iya (√) Keinginan telah terpenuhi.
Halaman Lihat Detail
26 Tugas Iya (√) Keinginan telah terpenuhi.
27 Daftar siswa Iya (√) Keinginan telah terpenuhi.
28 Halaman Chat Iya (√) Keinginan telah terpenuhi.
29 Halaman Absen Iya (√) Keinginan telah terpenuhi.
Tabel 4. 55 Tabel checklist daftar keinginan siswa
Daftar Keinginan Siswa
No Keinginan Pengguna iya/tidak Keterangan

1 login siswa Iya (√) Permintaan telah terpenuhi.
2 register siswa Iya (√) Permintaan telah terpenuhi.
3 Beranda Siswa Iya (√) Permintaan telah terpenuhi.
4 Halaman Daftar Tugas Iya (√) Permintaan telah terpenuhi.
5 Halaman Upload Tugas Iya (√) Permintaan telah terpenuhi.
6 Halaman Download Tugas Iya (√) Permintaan telah terpenuhi.
7 Halaman Daftar Materi Iya (√) Permintaan telah terpenuhi.
8 Halaman Download Materi Iya (√) Permintaan telah terpenuhi.
9 Daftar Kuis Iya (√) Permintaan telah terpenuhi.
10 Halaman Absensi Iya (√) Permintaan telah terpenuhi.
11 Halaman Mulai Kuis Iya (√) Permintaan telah terpenuhi.
12 Halaman Nilai Kuis Iya (√) Permintaan telah terpenuhi.
13 Video Coference Iya (√) Permintaan telah terpenuhi.
14 Halaman Chat Iya (√) Permintaan telah terpenuhi.
15 Halaman Raport Iya (√) Permintaan telah terpenuhi.
Halaman Room Siswa Video
16 Iya (√) Permintaan telah terpenuhi.
Conference

BAB V
HASIL DAN PEMBAHASAN
5.1 Perencanaan Testing SUS

Pada penelitian ini terdapat 10 pertanyaan yang akan diajukan kepada
responden kemudian menilai dengan skala 1 sampai 5. Pertanyaan nomor
ganjil (1, 3, 5, 7, 9) merupakan pertanyaan yang bernada positif.
Sedangkan pertanyaan nomor genap (2, 4, 6, 8, 10) merupakan pertanyaan
yang bernada negatif seperti yang ditunjukkan pada tabel 5.1.
Dengan keterangan skala sebagai berikut:
STS : Sangat Tidak Setuju

TS : Tidak Setuju
N : Netral
S : Setuju
SS : Sangat Setuju
Pada pengujian SUS terdapat beberapa langkah. Berikut adalah langkah-

langkah dari pengujian SUS:
1. Pertanyaan urutan ganjil adalah pertanyaan yang bernada positif. Maka

skor yang didapat dari pengguna dikurangi dengan 1.(Skor - 1)
2. Pertanyaan urutan genap adalah pertanyaan yang bernada negatif. Maka
skor dihitung dengan 5 yang dikurangi dengan skor yang didapat dari
pengguna.(5 - Skor)
3. Setelah melakukan perhitungan pada hasil dari nilai setiap pertanyaan
maka semua hasil tersebut dijumlahkan dan hasil jumlah dikali 2,5.
Hasil pengujian nya pada tabel 5.2.
143
144
Tabel 5. 1 Pertanyaan Responden
Skala
No Pertanyaan 1 2 3 4 5
STS TS N S SS
Saya pikir saya akan sering menggunakan
1. aplikasi ini
2. Saya menemukan fitur yang seharusnya tidak
merepotkan
3. Saya merasa aplikasi ini mudah digunakan
4. Saya sepertinya membutuhkan bantuan seseorang
agar bisa lancar menggunakan
aplikasi ini
5. Saya pikir fitur yang terdapat pada aplikasi
ini sudah terintegrasi dengan baik
6. Saya pikir dalam aplikasi terdapat banyak hal
yang tidak konsisten
7. Menurut saya, orang lain dapat mempelajari
cara menggunakan aplikasi ini dengan cepat
Saya merasa aplikasi ini sangat sulit untuk
8. digunakan
Saya merasa nyaman menggunakan
9. aplikasi ini
10. Saya perlu belajar banyak hal sebelum saya
dapat menggunakan aplikasi ini

145
Tabel 5. 2 Hasil Pengujian
Berikut adalah hasil pengujian menggunakan SUS:
Pertanyaan
Responden
1 2 3 4 5 6 7 8 9 10 Nilai
1 5 5 5 2 5 2 5 2 5 3 77,5
2 5 5 5 5 5 2 5 1 3 1 72,5
3 5 5 5 2 5 2 5 2 5 3 77,5
4 5 5 5 5 5 2 5 1 3 1 72,5
5 5 5 5 5 5 2 5 1 3 1 72,5
6 4 4 5 2 4 2 5 2 5 3 75
7 3 1 4 3 4 1 5 1 5 3 80
8 5 5 5 5 5 2 5 1 3 1 72,5
9 5 5 5 5 5 2 5 1 3 1 72,5
10 5 5 5 2 5 2 5 2 5 3 77,5
11 3 1 4 3 4 1 5 1 5 3 80
12 5 5 5 5 5 2 5 1 3 1 72,5
13 5 5 5 5 5 2 5 1 3 1 72,5
14 3 1 4 3 4 1 5 1 5 3 80
15 4 4 4 5 4 2 4 2 4 4 57,5
16 5 5 5 5 5 2 5 1 3 1 72,5
17 4 4 5 2 4 2 5 2 5 3 75
18 5 5 5 2 5 2 5 2 5 3 77,5
19 4 4 5 2 4 2 5 2 5 3 75
20 5 5 5 5 5 2 5 1 3 1 72,5
21 4 4 5 2 4 2 5 2 5 3 75
22 5 5 5 5 5 2 5 1 3 1 72,5
23 5 5 5 2 5 2 5 2 5 3 77,5
24 5 5 5 2 5 2 5 2 5 3 77,5
25 3 1 4 3 4 1 5 1 5 3 80
26 5 5 5 5 5 2 5 1 3 1 72,5
27 3 1 4 3 4 1 5 1 5 3 80
28 5 5 5 5 5 2 5 1 3 1 72,5
29 5 5 5 5 5 2 5 1 3 1 72,5
30 3 2 4 2 3 3 4 3 3 4 57,5
31 5 5 5 5 5 2 5 1 3 1 72,5
32 5 5 5 2 5 2 5 2 5 3 77,5
33 5 5 5 2 5 2 5 2 5 3 77,5
34 4 4 5 2 4 2 5 2 5 3 75
35 5 5 5 5 5 2 5 1 3 1 72,5
36 5 3 5 2 4 2 4 2 4 3 75

146
37 5 5 5 2 5 2 5 2 5 3 77,5
38 5 5 5 2 5 2 5 2 5 3 77,5
39 3 1 4 3 4 1 5 1 5 3 80
40 5 5 5 2 5 2 5 2 5 3 77,5
41 3 1 4 3 4 1 5 1 5 3 80
42 5 5 5 5 5 2 5 1 3 1 72,5
43 4 4 5 2 4 2 5 2 5 3 75
44 4 4 5 2 4 2 5 2 5 3 75
45 5 5 5 2 5 2 5 2 5 3 77,5
46 5 5 5 2 5 2 5 2 5 3 77,5
47 4 4 5 2 4 2 5 2 5 3 75
48 5 5 5 5 5 2 5 1 3 1 72,5
49 4 4 5 2 4 2 5 2 5 3 75
50 5 5 5 5 5 2 5 1 3 1 72,5
51 5 5 5 5 5 2 5 1 3 1 72,5
52 4 4 5 2 4 2 5 2 5 3 75
53 5 5 5 2 5 2 5 2 5 3 77,5
54 3 1 4 3 4 1 5 1 5 3 80
55 5 5 5 5 5 2 5 1 3 1 72,5
56 5 5 5 5 5 2 5 1 3 1 72,5
57 4 4 5 2 4 2 5 2 5 3 75
58 5 5 5 2 5 2 5 2 5 3 77,5
59 4 4 5 2 4 2 5 2 5 3 75
60 5 5 5 5 5 2 5 1 3 1 72,5
61 3 1 4 3 4 1 5 1 5 3 80
62 5 5 5 5 5 2 5 1 3 1 72,5
63 4 4 5 2 4 2 5 2 5 3 75
64 4 4 5 2 4 2 5 2 5 3 75
65 5 5 5 2 5 2 5 2 5 3 77,5
66 5 5 5 2 5 2 5 2 5 3 77,5
67 4 4 5 2 4 2 5 2 5 3 75
68 5 5 5 2 5 2 5 2 5 3 77,5
69 5 5 5 5 5 2 5 1 3 1 72,5
70 3 1 4 3 4 1 5 1 5 3 80
71 5 5 5 5 5 2 5 1 3 1 72,5
72 4 4 5 2 4 2 5 2 5 3 75
73 4 4 5 2 4 2 5 2 5 3 75
74 3 1 4 3 4 1 5 1 5 3 80
75 5 5 5 2 5 2 5 2 5 3 77,5
76 5 5 5 5 5 2 5 1 3 1 72,5
77 5 5 5 2 5 2 5 2 5 3 77,5
78 5 5 5 5 5 2 5 1 3 1 72,5
79 5 5 5 5 5 2 5 1 3 1 72,5

147
80 4 4 5 2 4 2 5 2 5 3 75
81 3 1 4 3 4 1 5 1 5 3 80
82 5 5 5 5 5 2 5 1 3 1 72,5
83 5 5 5 5 5 2 5 1 3 1 72,5
84 5 5 5 2 5 2 5 2 5 3 77,5
85 3 1 4 3 4 1 5 1 5 3 80
86 5 5 5 5 5 2 5 1 3 1 72,5
88 5 5 5 5 5 2 5 1 3 1 72,5
87 3 1 4 3 4 1 5 1 5 3 80
89 4 4 4 5 4 2 4 2 4 4 57,5
90 5 5 5 5 5 2 5 1 3 1 72,5
91 4 4 5 2 4 2 5 2 5 3 75
92 5 5 5 2 5 2 5 2 5 3 77,5
93 4 4 5 2 4 2 5 2 5 3 75
94 5 5 5 5 5 2 5 1 3 1 72,5
95 4 4 5 2 4 2 5 2 5 3 75
96 5 5 5 5 5 2 5 1 3 1 72,5
97 5 5 5 2 5 2 5 2 5 3 77,5
98 5 5 5 2 5 2 5 2 5 3 77,5
99 3 1 4 3 4 1 5 1 5 3 80
100 3 1 4 3 4 1 5 1 5 3 80
Jumlah 7500
Nilai SUS 75
Tabel 5. 3 Hasil Testing SUS
Acceptability Rentang Jumlah

No. Persentase
Ranges Skor Tanggapan
1. Not Acceptable 0-50 0 0%
2. Marginal 50-70 0 0%
3. Acceptable 70-100 30 100%
Hasil Pengujian SUS adalah 75 yang ditunjukkan pada tabel 5.2 hasilnya masuk
Acceptable (dapat diterima) dengan persentase 100% sehingga bisa diterima dan
siap digunakan oleh pengguna aplikasi.

BAB VI
KESIMPULAN DAN SARAN
6.1 Kesimpulan
Dari hasil penelitian yang telah dilakukan penulis dapat disimpulkan
sebagai berikut:
Penulis mengembangkan prototipe aplikasi menggunakan pendekatan
User Centered Design (UCD). Pendekatan UCD ada lima proses yaitu
Plan the Human Centered Process yaitu tahap wawancara terstruktur
kepada expert UI/UX Designer, Specify the Content of Use yaitu tahap
wawancara terstruktur kepada expert UX Researcher, Specify the User and
Organization Requirement yaitu tahap wawancara kepada 5 orang antara
lain dengan guru, wali murid, murid, Pegawai Negeri Sipil.
Penulis menggunakan teknik task analysis dalam menentukan

workflow yang berupa diagram HTA (Hierarchical Task Analysis) dan
juga penulis membuat model skenario, Dalam tahap Produce Design
Solution menghasilkan wireframe dan high fidelity prototype, dan teknik
terakhir adalah Evaluate Design Against Requirements untuk
mengevaluasi keberhasilan high fidelity prototype yang telah dibuat
menggunakan metode System Usability Scale (SUS). Dalam hasil
pengujian menggunakan metode Testing SUS mendapatkan skor 75,
dimana dengan skor tersebut dinyatakan diterima oleh pengguna aplikasi.
Sehingga dengan ada nya aplikasi kuy-daring siswa dan guru dengan
mudah belajar dan berkomunikasi.
6.2 Saran
Setelah menyimpulkan penelitian, penulis mempunyai saran dan
rekomendasi untuk proses pengembangan peneli yang lain adalah:
1. Ditambahkan menu absen sakit untuk siswa
148
149
2. Melakukan evaluasi dengan pengujian lainnya

3. Setelah mendapatkan hasil evaluasi desain sebaiknya segera melakukan
perbaikan pada desain yang memiliki nilai terendah agar desain
mempunyai nilai usibility akhir yang lebih tinggi dan hasil yang
memuasakan.
4. Aplikasi kuy-daring akan lebih baik jika desain dikembangkan untuk
mobile.

DAFTAR PUSTAKA
Aldi Ilham Abubakar, Eko Darwiyanto, S.T, M.T, Dawam Dwi Jatmiko Suwawi,
M. . (2019). Perancangan Media Pembelajaran Unsur Golongan IA dan VII
A Periodik Kimia dengan Teknologi Augmented Reality Menggunakan
Metode Goal-Directed Design. 6(2), 1–11.
Aryani, D., Sunandar, E., & Ramadhan, F. (n.d.). PROTOTYPE ALAT PEMILAH
HASIL PRODUKSI OLI OTOMATIS BERDASARKAN KODE WARNA
MENGGUNAKAN SENSOR TCS 230. 5(1), 43–54.
Balsamiq.com (2020) Quick and Easy Wireframing Tool. Retrieved from

https://balsamiq.com/wireframes/
Firmansyah, H. (2018). Perancangan UI/UX Pelayanan Otomasi Badan

Perpustakaan dan Kearsipan Jawa Timur Dengan menggunakan Metode
Heuristik Webuse.
Fitra Arie Budiawan, 2019. (2019). DESAIN INTERAKSI APLIKASI PLATFORM

DESIGN THINKING.
FlatIcon. (2020). Download limit: How many icons can I download? Retrieved
from https://support.flaticon.com/he/en-us/articles/213303205-Download-
limit-How-many-icons-can-I-download-
Ibrahim, I., & Rahman, A. (2019). Sistem Informasi Kearsipan Online Pada Pt.
Tower Bersama Group ( Tbg ) Banjarmasin. Technologia: Jurnal Ilmiah,
10(1), 40. https://doi.org/10.31602/tji.v10i1.1756
Judul, H. (2019). WISATA RINTISAN MENGGUNAKAN METODE USER

CENTERED DESIGN.
150
151
Khasanah, I. U., Fachry, M., Adriani, N. S., Defiani, N., Saputra, Y., & Ibrahim,
A. (2018). Penerapan Metode User Centered Design dalam Menganalisis
User Interface pada Website Universitas Sriwijaya. INTEGER: Journal of
Information Technology, 3(2), 21–27.
https://doi.org/10.31284/j.integer.2018.v3i2.226
L. Albani and G. Lombardi (FIMI). (2010). User Centred Design for

EASYREACH. (November 2010), 1–45.
Luh Putri Ari Wedayanti, N., Kadek Ayu Wirdiani, N., & Ketut Adi Purnawan, I.
(2019). Evaluasi Aspek Usability pada Aplikasi Simalu Menggunakan
Metode Usability Testing. Jurnal Ilmiah Merpati (Menara Penelitian
Akademika Teknologi Informasi), 7(2), 113.
https://doi.org/10.24843/jim.2019.v07.i02.p03
Mukti, Y. (2018). Rancang Bangun Website Sekolah Dengan Metode User

Centered Design (UCD). Jurnal Ilmiah Betrik, 9(02), 84–95.
https://doi.org/10.36050/betrik.v9i02.34
Muraqabatullah, M. (2016). KOMPARASI PERANGKAT LUNAK HIGH-

FIDELITY PROTOTYPING : MARVEL DAN UXPIN PADA
PENGEMBANGAN APLIKASI WEB LEARNING MANAGEMENT SYSTEM
( LMS ).
Prakasa, A. I. G., & Ardiansyah, F. (2018). Perancangan User Experience

Aplikasi Marketplace Paket Wisata Indonesia untuk Wisatawan Lokal.
Jurnal Ilmu Komputer Dan Agri-Informatika, 5(1), 51.
https://doi.org/10.29244/jika.5.1.51-60
Priana, A. J., Tolle, H., Aknuranda, I., & Arisetijono, E. (2018). User experience
design of stroke patient communications using Mobile Finger (MOFI)
Communication Board with user center design approach. International
Journal of Interactive Mobile Technologies, 12(2), 162–176.
https://doi.org/10.3991/ijim.v12i2.7937
Purnomo, D. (2017). Model Prototyping Pada Pengembangan Sistem Informasi.

152
2(2), 54–61.
Puspita, R., Studi, P., Informatika, T., Sains, F., Teknologi, D. A. N., Islam, U., &
Syarif, N. (2020). PENGEMBANGAN PROTOTIPE APLIKASI
COMMUNITY MENGGUNAKAN BALSAMIQ MOCKUP DAN FIGMA (
Studi Kasus : PT Mozaik Bintang Persada ) MENGGUNAKAN BALSAMIQ
MOCKUP DAN FIGMA ( Studi Kasus : PT Mozaik Bintang Persada ).
Ralph, P., & Wand, Y. (2009). A Proposal for a Formal Definition of the Design
Concept. https://doi.org/10.1007/978-3-540-92966-6
Ramadhan, D. W. (2019). PENGUJIAN USABILITY WEBSITE TIME

EXCELINDO MENGGUNAKAN SYSTEM USABILITY SCALE (SUS)
(sTUDI KASUS: WEBSITE TIME EXCELINDO). JIPI (Jurnal Ilmiah
Penelitian Dan Pembelajaran Informatika), 4(2), 139.
https://doi.org/10.29100/jipi.v4i2.977
Ramdhani, M. A. (2013). Lingkungan Pendidikan dalam Implementasi

Pendidikan Karakter. 28–37.
Rendiansah, M., Az-zahra, H. M., & Saputra, M. C. (2017). Pengembangan User

Interface Aplikasi Guide Me ! Berbasis Web dengan Pendekatan Human-
Centered Design. Jurnal Pengembangan Teknologi Informasi Dan Ilmu
Komputer (J-PTIIK) Universitas Brawijaya, 1(11), 1302–1311.
Rizkita, N., Rosely, E., & Nugroho, H. (2018). Aplikasi Pendaftaran dan
Transaksi Pasien Klinik Hewan di Bandung Berbasis Web. EProceedings of
Applied Science, 4(3), 1512–1520.
Sahfitri, V., & Ulfa, M. (2015). Pendukung Proses Pembelajaran di Perguruan

Tinggi Menggunakan USE QUESTIONNAIRE. Ilmiah MATRIK, 17, 53–66.
Sakti, H. gunawan. (2017). Pengaruh Media Desain Grafis Berbasis Adobe

Photoshop Terhadap Kreativitas Belajar Siswa Kelas X pada Mata Pelajaran
Desain Grafis. Jurnal Realita, 2(2), 325–344.
Santoso, J. (2018). Usability User Interface dan User Experience Media

153
Pembelajaran Kamus Kolok Bengkala Berbasis Android. Jurnal Sistem Dan

Informatika, 12(2), 174–181.
Satzinger, J. W., & Jackson, R. B. (n.d.). SYSTEMS ANALYSIS AND DESIGN IN

A CHANGING WORLD.
Segara, A. (2019). Penerapan Pola Tata Letak ( Layout Pattern ) pada

Wireframing Halaman Situs Web. Jurnal Magenta, STMK Trisakti, 3(1),
452–464.
Siregar, H. F., & Siregar, Y. H. (2018). Perancangan Aplikasi Komik Hadist

Berbasis Multimedia. 2(2), 113–121.
Wiryawan, M. B. (2011). USER EXPERIENCE ( UX ) SEBAGAI BAGIAN DARI

PEMIKIRAN DESAIN DALAM PENDIDIKAN TINGGI DESAIN
KOMUNIKASI VISUAL. 2(2), 1158–1166.
Yatana Saputri, I. S., Fadhli, M., & Surya, I. (2017). Penerapan Metode UCD
(User Centered Design) Pada E-Commerce Putri Intan Shop Berbasis Web.
Jurnal Nasional Teknologi Dan Sistem Informasi, 3(2), 269–278.
https://doi.org/10.25077/teknosi.v3i2.2017.269-278
Yunus, A. I., Teknologi, F., & Informatika, D. A. N. (2018). PERANCANGAN

DESAIN USER INTERFACE DAN USER EXPERIENCE PADA APLIKASI
SIAKAD DENGAN MENGGUNAKAN METODE USER CENTERED
DESIGN ( UCD ) PADA UNIVERSITAS ISLAM NEGERI SUNAN AMPEL
SURABAYA EXPERIENCE PADA APLIKASI SIAKAD DENGAN
MENGGUNAKAN METODE USER CENTERED DE.
Zulkarnain, A. (2019). Penerapan Mobile-First Design pada Antarmuka Website

Profil Sekolah Menggunakan Metode Human-Centred Design (Studi Kasus:
SMPN 21 Malang). Jurnal Ilmiah Teknologi Informasi Asia, 13(2), 125.
https://doi.org/10.32815/jitika.v13i2.408

154
LAMPIRAN
Lampiran 1. Surat keputusan Dosen Pembimbing Skrpsi

155
Lampiran 2. List Pertanyaan Narasumber dalam proses Plan Human Centered Process
dan Specify the Content of Use
No Pertanyaan
1 Apa Tujuannya adanya UI/UX?
Apakah UI/UX dapat membuat sebuah
2 produk menjadi sebuah ciri khas yang
membedakan dengan produk lainnya?
Apa saja parameter untuk membuat
3 sebuah UI/UX yang memenuhi kriteria
yang diinginkan dari pengguna?
4 Apa saja aplikasi yang cocok di era
pendemi ini?
5 Apa yang dimaksud aplikasi kuy daring?
6 Apakah dengan dibuat nya aplikasi kuy
daring dapat memudahkan orang lain?
7 apa saja aspek yang dibutuhkan dalam
pembuatan aplikasi kuy-daring?
8 siapa saja pengguna yang akan
menggunakan aplikasi kuy-daring?
9 Warna apa saja yang digunakan dalam
pembuatan aplikasi ku-daring?
Dalam Kondisi seperti apa pengguna
10 akan menggunakan sebuah aplikasi kuy-
daring?
Lampiran 3. List Pertanyaan Narasumber dalam proses Specify User and Organization
Requirement
No Pertanyaan
Bagaimana perkembangan pembelajaran
1
di sekolah saat pendemi
waktu pembelajaran online berlangsung
2
menggunakan aplikasi apa
Untuk Tugas Biasanya dikumpulkan
3
melalui apa?
Untuk menjawab materi biasanya
4
memakai aplikasi bayar atau gratis?

156
Lampiran 4, Survey Penggunaan Aplikasi Lain
Aplikasi yang Digunakan
12
20
WHATSAPP
ZOOM
28 GOOGLE MEET
GOOGLE CLASSROOM
40
Lampiran 5, Kesulitan Sinyal Ketika Sedang Belajar Daring
Kesulitan Sinyal
40
Iya
Tidak
60

Deka Dwi Rhamadani-Fst

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Deka Dwi Rhamadani-Fst

Diunggah oleh

Hak Cipta:

Format Tersedia

DESAIN PROTOTIPE APLIKASI PEMBELAJARAN

JARAK JAUH MENGGUNAKAN METODE UCD

PROGRAM STUDI TEKNIK INFORMATIKA

DESAIN PROTOTIPE APLIKASI PEMBELAJARAN JARAK JAUH

(Studi Kasus : PT Multi Media Access)

Deka Dwi Rhamadani 11160910000068

Viva Arifin, MMSI Yusuf Durachman, MIT

Ketua Program Studi Teknik Informatika

Dr. Imam Marzuki Shofi, M.T

Nama : Deka Dwi Rhamadani

Program Studi : Teknik Informatika

Fakultas : Sains dan Teknologi

Jenis Karya : Skripsi

Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada

“DESAIN PROTOTIPE APLIKASI PEMBELAJARAN JARAK JAUH

Demikian Pernyataan ini saya buat dengan sebenarnya.

Dibuat di : Tangerang Selatan

Pada tanggal : 05 Agustus 2021

Deka Dwi Rhamadani

Kata Kunci : Online, UCD, Ruang Guru, Google classroom,User

Interface, SUS, Prototipe

Jumlah Pustaka : 33 (2009-2020)

Jumlah Halaman : VI Bab + 60 Tabel + 95 Gambar

Number Of Libraries : 33 (2009-2020)

Number Of Pages : VI Chapters + 60 Tables + 95 Pictures

Assalamu’alaikum Wr. Wb.

Alhamdullilah segala puji serta syukur penulis panjatkan atas kehadirat

Skripsi dengan berjudul ―Desain Prototipe Aplikasi Pembelajaran Jarak

Penyusun sebuah skripsi ini, telah banyak di bimbing serta berbagi

Deka Dwi Rhamadani

LEMBAR PERSETUJUAN ............................................................................................. ii

Tabel 2. 1 Perbedaan UCD Dengan Metode Lain............................................................. 18

Gambar 1. 1 Grafik Penyebaran Covid – 19 Di Indonesia ................................................. 1

1.1 Latar Belakang

Pada saat ini seluruh kehidupan manusia di bumi ini terganggu

Gambar 1. 1 Grafik Penyebaran Covid – 19 Di Indonesia

Pada gambar 1.1 menyatakan bahwa penyebaran covid-19 yang

Melalui wawancara oleh Bapak Sugiono Kepala Pusat Data

UIN Syarif Hidayatullah Jakarta

Menurut Winda salah satu siswi SMPN 3 Eromoko merasa

Selain User Interface, menerapakan User Experience pada proses

UIN Syarif Hidayatullah Jakarta

dioperasikan di dalam device desktop. Proses atau tahapan dalam

1.2 Rumusan Masalah

UIN Syarif Hidayatullah Jakarta

1.3 Batasan Masalah

1.4 Tujuan Penelitian

UIN Syarif Hidayatullah Jakarta

1.5 Manfaat Penelitian

1.5.1 Manfaat Bagi Peneliti

1.5.2 Manfaat Bagi Universitas

1.5.3 Manfaat Bagi Pembaca

1.5.4 Manfaat Bagi Pengguna

1.6 Metode Penelitian

1.6.1 Metode Pengumpulan Data

UIN Syarif Hidayatullah Jakarta

Kegiatan obervasi di lakukan untuk kegiatan pengamatan

1.6.2 Metode Perancangan Prototipe

1.7 Sistematika Penulisan

UIN Syarif Hidayatullah Jakarta

pengumpulan data dan metodologi dalam desain

UIN Syarif Hidayatullah Jakarta

2.1 Desain Prototipe