PERANCANGAN PROTOTYPE ANTARMUKA SIAKAD

SMAN 1 JOMBANG BERBASIS WEBSITE

PROPOSAL SKRIPSI

Oleh:
DZIKRI ALIF ABDILLAH NIM. 1741720052

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI MALANG
2020

i
 HALAMAN PENGESAHAN
PERANCANGAN PROTOTYPE ANTARMUKA SIAKAD SMAN
1 JOMBANG BERBASIS WEBSITE

Disusun oleh:
DZIKRI ALIF ABDILLAH NIM. 1741720052

Proposal Skripsi ini telah diuji pada tanggal xx-xx-xxxx

Disetujui oleh:

1. Pembimbing : Erfan Rohadi, ST., M.Eng., Ph.D

Utama NIP. 197201232008011006 ...........................

2. Pembahas I : ……………………………….
NIP. xxxxxxxxxxxxxxxxxxx ...........................

3. Pembahas II : ……………………………….
NIP. xxxxxxxxxxxxxxxxxxx ...........................

Mengetahui,

Ketua Jurusan Ketua Program Studi

Teknologi Informasi Teknik Informatika

Rudy Ariyanto, S.T., M.Cs. Imam Fahrur Rozi, S.T., M.T.

NIP. 19711110 199903 1 002 NIP. 19840610 200812 1 004

ii
 DAFTAR ISI

DAFTAR ISI ............................................................................................................................ iii

DAFTAR GAMBAR................................................................................................................. v

DAFTAR TABEL .................................................................................................................... vi

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

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

1.2 Rumusan Masalah .................................................................................................... 2

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

1.4 Tujuan ...................................................................................................................... 3

1.5 Manfaat .................................................................................................................... 3

BAB II. LANDASAN TEORI .................................................................................................. 3

2.1 Sistem Informasi Akademik ..................................................................................... 3

2.2 User Interface ........................................................................................................... 4

2.3 User Experience ....................................................................................................... 5

2.4 Usability ................................................................................................................... 5

2.4.1 System Usability Scale ........................................................................................ 6

2.5 User Centered Design .............................................................................................. 8

2.6 Wireframe ...............................................................................................................10

BAB III. METODOLOGI PENGEMBANGAN ......................................................................11

3.1 Analisis Kebutuhan .................................................................................................11

3.2 Deskripsi Sistem .....................................................................................................11

3.3 Metode Pengembangan ...........................................................................................12

3.3.1 Analysis ..............................................................................................................13
3.3.2 Design .................................................................................................................14
3.3.3 Evaluation ...........................................................................................................15
3.3.4 Implementation ...................................................................................................15

BAB IV. JADWAL PENGEMBANGAN ................................................................................16

4.1 Jadwal Pengembangan ............................................................................................16

iii
DAFTAR PUSTAKA ...............................................................................................................17

iv
 DAFTAR GAMBAR
Gambar 2. 1 Rentang penilaian System Usability Scale ................................................ 8
Gambar 2. 2 Siklus User Centered Design .................................................................... 9
Gambar 3. 1 Tahapan proses User Centered Design .................................................. 13
Gambar 3. 2 Sitemap Website SIAKAD Pelajar .......................................................... 13
Gambar 3. 3 User flow Melihat Biodata ...................................................................... 14
Gambar 3. 4 User flow Melihat Status Pembayaran SPP ............................................ 14
Gambar 3. 5 User flow Melihat Data Absensi ............................................................. 14
Gambar 3. 6 User flow Melihat Nilai UTS .................................................................. 14
Gambar 3. 7 User flow Melihat Nilai UAS.................................................................. 14
Gambar 3. 8 User flow Melihat Pengumuman............................................................. 14

v
 DAFTAR TABEL

Tabel 2. 1 Pertanyaan kuesioner System Usability Scale ............................................... 6

Tabel 4. 1 Jadwal Pelaksanaan Pengembangan ........................................................... 16

vi
 1

BAB I. PENDAHULUAN

1.1 Latar Belakang

Sistem Informasi Akademik (SIAKAD) adalah suatu sistem informasi yang
menghubungkan semua tenaga kependidikan akademis yang penggunanya terdiri atas
pelajar, guru dan para pelaku dalam berjalannya suatu sistem informasi akademik. Jika
dilihat dari sisi kebutuhan pengguna, secara umum para pelaku membutuhkan alat bantu
untuk menyalurkan informasi secara umum, akan tetapi kebutuhan setiap pengguna
tentunya berbeda satu sama lain. Para pelajar membutuhkan akses untuk informasi
mengenai alur akademik seperti melihat nilai sekolah, nilai tugas, dan melihat absensi.
Sedangkan untuk tenaga pendidik membutuhkan informasi seperti menampilkan
penugasan pengajaran kelas, menampilkan rekap absensi dan jadwal kegiatan sekolah.
Pendidikan dan teknologi merupakan dua hal yang saling ketergantungan. SMAN
1 Jombang adalah suatu lembaga pendidikan tingkat menengah atas yang berada di kota
Jombang, Jawa Timur yang belum mempunyai rancangan desain prototype antarmuka
untuk halaman SIAKAD baik dalam bentuk website ataupun mobile. Dengan adanya
kebutuhan pengguna yang beragam, tiap pengguna tidak bisa diberi perlakuan yang
sama dari sisi pengalaman pengguna (user experience) dan tampilan antarmuka (user
interface) yang sama. Apabila diberikan perlakuan yang sama akan terdapat suatu
permasalahan dalam hal pengalaman pengguna dan tampilan antarmuka pada saat
mengakses halaman website, dimana memungkinkan adanya pengguna yang
kebingungan pada saat melihat tampilan halaman dari SIAKAD, jika pengguna
mengalami kesulitan dalam penggunaannya dan merasa kebingungan maka akan timbul
masalah lainnya seperti : pengguna tidak menggunakan aplikasi karena sulit dimengerti,
membutuhkan upaya lebih untuk sosialisasi cara penggunaan aplikasi, dan adanya biaya
untuk memperbaiki desain atau desain ulang halaman website yang ada.
Permasalahan pengalaman pengguna dan tampilan antarmuka yang mungkin
muncul dapat dicegah melalui metode user centered design dan system usability scale.
Metode user centered design adalah proses desain yang berfokus pada kebutuhan
pengguna, dimana sebuah produk akan didesain khusus untuk pengguna tertentu, dalam
studi kasus ini ditujukan pada pelajar. Produk yang akan dikembangkan menggunakan
pendekatan user centered design, dioptimalkan untuk pengguna dan ditekankan pada
bagaimana kebutuhan pengguna terhadap penggunaan suatu produk. Selain itu metode
 2

system usability scale merupakan suatu alat bantu yang berupa kuesioner untuk
mengukur persepsi kegunaan dari pengguna. Diciptakan oleh John Brooke pada tahun
1986 dan dulu digunakan untuk menguji sistem elektronik kantor, namun seiring
berjalannya waktu system usability scale digunakan untuk menguji beberapa aplikasi
maupun desain berbasis website,desktop maupun untuk mobile. Metode yang
digunakan untuk menguji desain antarmuka atau black box testing yaitu menggunakan
2 cara yaitu menggunakan Maze.design untuk menguji prototype kepada pengguna
dengan memberikan task dan goal yang harus dipenuhi dan dengan system usability
scale (SUS) untuk mengetahui rentang penilaian, apakah tampilan yang diberikan sudah
termasuk dalam kategori baik atau belum.
Hasil dari tugas akhir ini diharapkan mampu untuk memberikan gambaran
mengenai tampilan dari halaman SIAKAD, khususnya tampilan halaman antarmuka
pada pelajar. Tolak ukur kepuasan pengguna pada rancangan desain prototype
antarmuka dari SIAKAD untuk pelajar menjadi prioritas yang utama, karena dengan
kepuasan dan kemudahan pengguna tersebut desain dari halaman antarmuka SIAKAD
bisa menyelesaikan tujuannya untuk mendekatkan para pengguna dan tidak
membingungkan bagi para pengguna, khususnya pelajar.
Pada pengembangan ini, penulis akan mengembangkan sebuah desain rancangan
prototype antarmuka SIAKAD berbasis website dengan menggunakan metode user
centered design sebagai metode yang memudahkan proses perancangan desain
antarmuka yang berfokus pada kebutuhan pengguna serta menggunakan metode system
usability scale untuk mengevaluasi hasil dari desain prototype.

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas, maka rumusan masalah yang dapat diambil
adalah sebagai berikut:
1. Bagaimana cara menerapkan user centered design pada proses desain
pengembangan antarmuka SIAKAD berbasis website ?
2. Bagaimana cara melakukan system usability scale pada pengembangan antarmuka
SIAKAD berbasis website?
3. Bagaimana cara implementasi kebutuhan pengguna kedalam desain?
4. Bagaimana hasil evaluasi perancangan user interface dan user experience pada
tampilan antarmuka SIAKAD berbasis website?
 3

1.3 Batasan Masalah

Adapun batas permasalahan untuk mendukung dalam proses pengembangan ini
adalah:
1. Uji coba dilakukan pada pelajar SMAN 1 Jombang.
2. Prototype antarmuka menggunakan aplikasi Figma.
3. Pengembangan ini tidak mencakup pembuatan sistem aplikasi.
4. Pembuatan desain ditujukan untuk front end, tidak meliputi back end sistem
akademik.
5. Metode evaluasi desain menggunakan metode system usability scale.
6. Hasil akhir dari pengembangan ini berupa High-fidelity prototype.

1.4 Tujuan
Tujuan penelitian ini adalah menghasilkan rancangan desain prototype pada
SIAKAD berbasis website dengan menggunakan metode User Centered Design (UCD)
dan merancang pengalaman pengguna yang baik dan sesuai dengan kebutuhan.

1.5 Manfaat
Manfaat pengembangan ini adalah memudahkan proses pengembangan aplikasi
SIAKAD berbasis website dan memaksimalkan interaksi pengguna terhadap aplikasi
agar memberikan user experience yang mudah dipahami.

BAB II. LANDASAN TEORI

2.1 Sistem Informasi Akademik

Menurut Agustin (2012) kata akademik berasal dari serapan Bahasa Inggris,
yaitu academy. Secara artian, kata academy berarti sekolah, yang juga dapat diartikan
sebagai segala sesuatu yang berhubungan dengan proses penunjang kegiatan sekolah
atau lembaga pendidikan beserta para pelaku didalamnya yang berfungsi untuk
mempermudah sarana pembelajaran dalam sebuah institusi atau lembaga dalam
melakukan pekerjaannya. Berdasarkan pengertian akademik di atas, maka sistem
informasi akademik adalah segala macam hasil interaksi antara elemen di dalam
 4

lingkup akademik untuk menghasilkan suatu informasi yang akan dijadikan sebuah
landasan pengambilan keputusan, melakukan kebijakan, melaksanakan tugas,
melaksanakan tindakan, baik oleh pelaku proses itu sendiri maupun dengan bantuan
dari pihak luar yang semua prosesnya dibantu oleh sistem.
2.2 User Interface
User Interface atau tampilan antarmuka adalah tampilan visual sebuah produk
yang menghubungkan sistem dengan pengguna (user). Tampilan antarmuka dapat
beruka bentuk, warna, dan tulisan yang didesain semenarik mungkin untuk membuat
para pengguna merasa senang pada saat menggunakan aplikasi. User Interface (UI)
adalah bagaimana tampilan sebuah produk dilihat oleh pengguna, penerapan antarmuka
dapat ditemukan pada beberapa platform, diantaranya pada android, website, dan pada
aplikasi desktop. Tampilan User Interface dirancang dengan desain yang memuat
beberapa aspek, mulai dari layout, gambar, warna, typography (penulisan) yang mudah
dibaca dan hal lainnya untuk menambah nilai keindahan. Semua elemen tersebut saling
berkaitan satu sama lain di dalam merancang sebuah tampilan antarmuka yang baik
bagi pengguna.
Ada 6 karakteristik menurut (Niagahoster, 2020) yang dibutuhkan untuk
membuat desain User Interface (UI) yang baik, yaitu :
1. Jelas dan ringkas, istilah ini digunakan agar membuat desain dan konten
yang ditujukan kepada pengguna tidak membuat pengguna kebingungan
dan jenuh pada saat berinteraksi dengan sebuah aplikasi pada perangkat
mobile maupun website.
2. Desain responsive, yang berarti pengguna dapat mengakses website di
berbagai perangkat, seperti komputer dan mobile dengan baik. Maksud
dari responsive yaitu menyesuaikan resolusi pada perangkat yang
digunakan.
3. Informasi terstruktur, yaitu sebuah tatanan dalam menyusun informasi
yang jelas dan dapat dimengerti oleh pengguna agar informasi yang
disampaikan dapat diterima dengan mudah. Faktor pendukung untuk
membuat tampilan informasi yang terstruktur berupa pemilihan font dan
warna yang senada.
4. Konsisten, pada desain antarmuka dibutuhkan konsistensi agar
pengguna dapat memahami tampilan, seperti fungsi-fungsi tombol,
 5

ikon, menu, maupun struktur navigasi yang ada. Hal ini memudahkan
pengguna dalam mencerna informasi.
5. Kontras warna yang baik, yang berarti pemilihan warna dalam desain
user interface sangat penting dan berpengaruh pada pengguna, jika
warna tidak kontras maka akan membuat pengguna enggan untuk
menggunakan aplikasi maupun mengunjungi website.
6. Intuitif, tampilan desain antarmuka dikatakan baik jika disebut intuitif,
yang berarti ketika pengguna menggunakan produk, mereka tidak perlu
untuk berfikir tentang apa yang mereka lakukan.

2.3 User Experience

User Experience yaitu sebuah istilah pengalaman pengguna dalam merasakan
suatu kemudahan dan efisiensi pada saat melakukan interaksi pada aplikasi. User
Experience (UX) adalah emosi dan sikap seseorang tentang penggunaan produk,
sistem, atau layanan tertentu. Ini mencakup beberapa aspek praktis, pengalaman,
efektif, berarti, dan berharga dari interaksi antara manusia dengan website, aplikasi,
komputer maupun dengan hal yang berkaitan dengan aktifitas pengguna yang
merasakan efek atau dampak dari apa yang telah dikerjakan dan juga kepemilikan
produk.
2.4 Usability
Usability yaitu tingkatan kemampuan antarmuka aplikasi dapat digunakan
untuk mempermudah hidup pengguna (Pressman, 2012). Usability didefinisikan
sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut
penilaian (Jacob, 1994) yaitu :
1. Learnability adalah kemudahan di mana aplikasi perangkat lunak atau
produk dapat diambil dan dipahami oleh pengguna. Semakin baik
kemampuan belajar suatu aplikasi, semakin sedikit pelatihan dan waktu
yang dibutuhkan seseorang untuk menggunakannya.
2. Efficiency yaitu seberapa cepat user untuk mencapai tujuan pada saat
menggunakan produk tersebut.
3. Memorability adalah kemudahan user dalam memahami fitur produk.
Sekali user sudah pernah mempelajari sebuah produk, maka untuk
 6

seterusnya akan ingat bagaimana cara penggunaannya. Umumnya UX

atau User Experience terdiri dari tiga karakteristik yaitu user yang
terlibat, bagaimana cara user berinteraksi dengan sebuah produk atau
sistem, dan pengalaman apa yang dirasakan oleh user yang menarik.
4. Errors adalah seberapa banyaknya kesalahan yang dilakukan oleh user
saat menggunakan produk.
5. Satisfaction adalah tingkat kenyamanan user menggunakan produk.
Pada usability dilihat pada sejauh mana sebuah tugas mudah dikerjakan oleh
sebuah produk,seminimal mungkin tahapan yang dikerjakan untuk mencapai tujuan
tertentu melalui sebuah produk, dan bagaimana pengguna mengerjakan sebuah tugas
dengan produk tersebut.
2.4.1 System Usability Scale
System Usability Scale (SUS) merupakan salah satu metode uji bagi pengguna
yang ditemukan oleh John Brooke pada 1986 yang berupa kuisioner. Metode ini
menyediakan jalan efektif untuk mengevaluasi dari usability sebuah produk seperti
website maupun aplikasi. Metode system usability scale adalah alat praktis untuk
mengukur persepsi kemudahan penggunaan, dan dapat digunakan di berbagai produk
dan layanan digital untuk membantu para praktisi user experience dalam menentukan
apakah terdapat kesalahan dengan solusi desain yang dirasakan oleh pengguna.
Pada dasarnya metode ini memiliki 10 pertanyaan berbentuk kuisioner yang
diikuti dengan 5 opsi jawaban untuk setiap pertanyaan, mulai dari sangat setuju hingga
sangat tidak setuju. Untuk pertanyaan dari metode system usability scale dapat dilihat
pada Tabel 2.1 dibawah ini.
Tabel 2. 1 Pertanyaan kuesioner System Usability Scale

No. Pertanyaan
1 I think that I would like to use this system frequently
(saya berpikir saya akan sering menggunakan sistem ini)
2 I found the system unnecessarily complex
(saya merasa sistem ini rumit untuk digunakan)
3 I thought the system was easy to use
(saya merasa sistem ini mudah digunakan)
 7

4 I think that I would need the support of a technical person to be

able to use this system.
(saya berpikir saya membutuhkan bantuan dari orang teknis untuk
dapat menggunakan sistem ini )
5 I found the various functions in this system were well integrated.
(saya menemukan berbagai fungsi dalam sistem ini terintegrasi
dengan baik)
6 I thought there was too much inconsistency in this system.
(saya merasa ada banyak hal yang tidak konsisten pada sistem ini)
7 I would imagine that most people would learn to use this system very
quickly.
(saya membayangkan kebanyakan orang akan belajar untuk
menggunakan sistem ini dengan sangat cepat)
8 I found the system very cumbersome to use.
(saya menemukan kerumitan pada sistem ini ketika digunakan)
9 I felt very confident using the system.
(saya merasa yakin menggunakan sistem ini)
10 I needed to learn a lot of things before I could get going with this
system.
(saya membutuhkan belajar banyak hal sebelum saya menggunakan
sistem in)

Aturan dalam penilaian System Usability Scale yaitu sebagai berikut :

1. Setiap pertanyaan nomor ganjil, nilai setiap pertanyaan yang didapat
dari nilai pengguna dikurangi 1.
2. Setiap pertanyaan nomor genap, nilai akhir didapat dari nilai 5 dikurangi
nilai pertanyaan yang didapat dari pengguna.
3. Nilai SUS didapat dari hasil penjumlahan score setiap pertanyaan yang
kemudian dikali 2,5.
Dalam perhitungan score berlaku pada setiap responden. Untuk perhitungan
selanjutnya, nilai SUS dari masing-masing responden dicari nilai rata-ratanya dengan
menjumlahkan semua nilai dan dibagi dengan total responden. Berikut adalah rumus
untuk menghitung nilai SUS :
 8

∑𝑥
𝑋̅ = (6.1)
𝑛
Keterangan :
𝑥̅ : Nilai rata-rata
∑𝑥 : Jumlah nilai SUS
n : Jumlah responden
Score SUS memiliki rentang nilai dari 0-100. Untuk mengetahui kualitas dari
perangkat lunak yang dibuat, berikut merupakan acuan penilaian dari SUS yang pada
Gambar 2.1 berikut.

Gambar 2. 1 Rentang penilaian System Usability Scale

Dari Gambar 2. 1 dilihat beberapa batasan nilai yang menjadi tolak ukur dalam
menentukan nilai dari SUS, yaitu sebagai berikut :
1. Jika rentang nilai antara 0 – 25.5, maka dikatakan paling buruk.
2. Jika rentang nilai antara 25.5 – 35.5, maka dikatakan buruk.
3. Jika rentang nilai antara 35.5 – 55.5, maka dikatakan standar.
4. Jika rentang nilai antara 55.5 – 75.5, maka dikatakan baik.
5. Jika rentang nilai antara 75.5 – 100 keatas, maka dikatakan paling baik.
2.5 User Centered Design
User Centered Design (UCD) adalah proses desain yang berfokus pada
kebutuhan pengguna. Produk yang dikembangkan dengan pendekatan ini dioptimalkan
untuk end-user serta ditekankan pada bagimana kebutuhan atau keinginan dari end-user
terhadap penggunaan suatu produk. Sedangkan menurut (Wood, 2014) User Centered
Design (UCD) adalah pendekatan untuk desain dan pengembangan user interface yang
 9

melibatkan pengguna di seluruh proses desain dan pengembangan. Desain ini tidak
hanya berfokus pada pemahaman pengguna sistem komputer yang sedang
dikembangkan tetapi juga membutuhkan pemahaman tentang tugas yang akan
dilakukan pengguna dengan sistem dan lingkungan dimana mereka akan
menggunakannya. Menggunakan pendekatan user centered design harus
mengoptimalkan kegunaan sistem pada perangkat. Desain dirancang dengan adaptasi
terhadap perilaku pengguna dalam menggunakan produk sehingga produk yang
dikembangkan tidak memberatkan pengguna atau memaksa pengguna untuk merubah
perilakunya ketika menggunakan produk tersebut. Tujuannya adalah agar produk yang
dikembangkan dapat bermanfaat serta mudah digunakan bagi para pengguna. Adapun
untuk siklus singkat dari proses User Centered Design dapat dilihat pada Gambar 2.2

Gambar 2. 2 Siklus User Centered Design

1. Analysis, tahapan pertama ini penting karena untuk menentukan tujuan

dari produk dan siapa saja yang menjadi targetnya. Fase ini merupakan
analisis kebutuhan dan apa permasalahan yang dihadapi oleh pengguna.
Untuk mengetahui permasalahan yaitu dengan cara research atau
menggali informasi kepada target pengguna.
2. Design, fase ini merupakan desain yang berdasar research yang
dilakukan pada tahap analysis. Proses desain merupakan proses
iterative, setiap tahapan dari proses desain akan dievaluasi. Beberapa
langkah pada proses desain adalah konsep, konsep ini dituangkan ke
dalam moodboards atau wireframe. Setelah konsep dikembangkan dan
dievaluasi, prototype dapat dibuat. Pengguna dapat menguji dan
berinteraksi dengan prototype.
 10

3. Evaluation, tahap ini merupakan evaluasi terhadap produk yang akan

dibuat dengan menggunakan beberapa cara, seperti wawancara,
observasi, eye tracking maupun survey kepada pengguna.
4. Implementation, tahapan ini merupakan akhir dari proses desain yaitu
dengan menyelesaikan prototype berdasarkan hasil evaluasi.
2.6 Wireframe
Wireframe yaitu rancangan awal pada sebuah desain web maupun aplikasi yang
dapat dibuat menggunakan software Photoshop, AdobeXD, Balsamiq Mockup maupun
dengan software yang dapat digunakan untuk membuat wireframe. Tujuan dalam
adanya wireframe ini memudahkan pada saat pembuatan suatu rancangan susunan
dalam struktur aplikasi, seperti navigasi, layout, dan konten. Maka dari itu, biasa
umumnya pembuatan wireframe menggunakan warna yang kontras seperti hitam dan
putih. Wireframe lebih menekankan isi dari konten sebelum masuk ke tahap pembuatan
aplikasi web maupun mobile.
Beberapa kelebihan wireframe antara lain :
1. Menggambarkan layout umum dari suatu website maupun aplikasi.
2. Menghemat biaya dan waktu.
3. Meminimalisir kesalahan pada saat tahap pembuatan aplikasi oleh
developer.
4. Mempermudah developer dalam membuat tatanan aplikasi.
5. Membangun kepercayaan antara user dan stakeholders
 11

BAB III. METODOLOGI PENGEMBANGAN

3.1 Analisis Kebutuhan

Dalam tugas akhir ini akan dibuat sebuah rancangan prototype antarmuka atau
desain antarmuka dari sistem informasi akademik (SIAKAD) SMAN 1 Jombang.
Dengan sebuah rancangan desain antarmuka dari prototype ini dapat memberikan
gambaran mengenai tampilan antarmuka dari sisi pengguna yaitu pelajar, desain yang
akan dibuat dengan menerapkan metode user centered design sebagai tolak ukur untuk
mendesain tampilan antarmuka untuk website SIAKAD dan system usability scale
untuk mengetahui apakah desain rancangan yang sudah dibuat sudah sesuai dengan
kebutuhan para pengguna serta mengetahui nilai dari tolak ukur desain yang sudah
dirancang termasuk dalam kategori sangat buruk,baik,cukup ataupun sangat baik.
Pengembangan desain antarmuka SIAKAD ini ditujukan untuk
menggambarkan tampilan SIAKAD pada sisi pengguna khusus yaitu para pelajar dan
mengetahui apakah tampilan yang sudah dirancang sudah sesuai dengan apa yang
diharapkan oleh para pelajar.
3.2 Deskripsi Sistem
Dengan latar belakang yang telah disampaikan sebelumnya bahwa penggunaan
metode user centered design dalam proses perancangan tampilan antarmuka SIAKAD
pada SMAN 1 Jombang yang berbasis website sudah sesuai, karena dalam beberapa
aspek untuk membuat sebuah desain rancangan desain antarmuka yang mudah dan
dapat dipahami oleh pengguna khususnya para pelajar dibutuhkan pendekatan melalui
user interface atau antarmuka agar pengguna nyaman pada saat menggunakan aplikasi
dan tidak merasa kebingungan dalam penggunaan aplikasi. Dari kemudahan tersebut
telah mengatasi permasalahan pada pengguna dalam bentuk visualisasi tampilan desain
antarmuka pada website..
Tabel 3. 1 Deskripsi Konsep Aplikasi

Judul Perancangan prototype antarmuka SIAKAD SMAN 1

Jombang Berbasis Website.
Jenis Aplikasi Desain prototype untuk menggambarkan tampilan
SIAKAD pada sisi pelajar
Pengguna Pengguna adalah para pelajar SMAN 1 Jombang.
 12

Konten Desain antarmuka dan prototype berisi tentang fitur-

fitur pada SIAKAD yang ditujukan kepada pelajar.
Aplikasi Desain antarmuka berupa prototype untuk website
Teknologi Website

Berdasarkan tabel 3.1 tentang deskripsi aplikasi maka kebutuhan aplikasi yang
akan dibuat dikategorikan ke dalam kebutuhan perangkat lunak dan kebutuhan
perangkat keras. Yaitu :
 Kebutuhan Perangkat Lunak
Semua jenis perangkat lunak atau tool yang digunakan untuk membantu proses
pengembangan sistem parkir ini adalah sebagai berikut.:
o Sistem operasi Windows
o Microsoft Office, sebagai alat bantu untuk penulisan laporan dan proposal
selama pengembangan sistem.
o Microsoft Excel, sebagai alat bantu penghitungan untuk system usability scale.
o Figma, sebagai alat bantu untuk pembuatan prototype.
o Balsamiq Mockup, alat bantu untuk pembuatan wireframe.
o StarUML, sebagai penunjang dalam membuat use case diagram dan
flowchart.
o Maze.design, penyedia layanan untuk membantu dalam melakukan usability
testing kepada pengguna.

 Kebutuhan Perangkat Keras

Adapun perangkat keras yang terlibat pada saat proses pengembangan sistem
adalah sebagai berikut :
o Laptop dengan spesifikasi prosesor AMD A12-9720 RADEON R7, RAM 8
Gb, HDD 1 Tb.

3.3 Metode Pengembangan

Dalam membuat rancangan pengembangan desain dari tampilan antarmuka
sistem informasi akademik (SIAKAD) berbasis website pada SMAN 1 Jombang yang
ditujukan pada pengguna yaitu pelajar, diperlukan melakukan analisis terhadap apa saja
 13

kebutuhan yang dibutuhkan, dalam proses pengembangan ini dibantu dengan metode
User Centered Design dengan tahapan sebagai berikut

Gambar 3. 1 Tahapan proses User Centered Design

3.3.1 Analysis
Seperti ditampilkan pada gambar 3.1 bahwa pengembangan desain sistem
diawali dengan menganalisis kebutuhan untuk mengetahui kebutuhan yang akan
dibangun, seperti kebutuhan perangkat lunak, perangkat keras, konsep, kebutuhan
fungsional dan non fungsional berdasarkan permasalahan yang terjadi.
Agar mengetahui alur dan fitur apa saja yang terdapat pada sistem informasi
akademik (SIAKAD) maka diperlukan untuk melakukan observasi terhadap pengguna
yang dituju maupun melakukan research mandiri. Berikut adalah contoh sitemap
mengenai beberapa fitur yang akan dirancang prototype desain halaman antarmukanya,
sitemap website dapat dilihat pada Gambar 3.2

Gambar 3. 2 Sitemap Website SIAKAD Pelajar

Untuk mempermudah dalam penjelasan analisis kebutuhan pengguna, maka

dijelaskan dalam bentuk user flow. User flow yaitu langkah-langkah yang akan
dilakukan pengguna untuk mencapai tujuan tertentu pada saat menggunakan fitur dari
 14

sebuah aplikasi, dalam studi kasus ini yaitu aplikasi dari SIAKAD yang diambil dari
sisi pelajar sebagai pengguna, gambaran secara umum dari proses user flow SIAKAD
dapat dilihat pada Gambar 3. 3 dibawah ini

Gambar 3. 3 User flow Melihat Biodata

Gambar 3. 4 User flow Melihat Status Pembayaran SPP

Gambar 3. 5 User flow Melihat Data Absensi

Gambar 3. 6 User flow Melihat Nilai UTS

Gambar 3. 7 User flow Melihat Nilai UAS

Gambar 3. 8 User flow Melihat Pengumuman

3.3.2 Design
Pada tahap ini setelah analisis permasalahan, semua dituangkan kedalam bentuk
wireframe yang merupakan rancangan awal dari analisis yang di bentuk kedalam
desain. Wireframe dapat dibuat menggunakan media pensil dan kertas maupun dengan
 15

software pendukung, diantaranya Figma,Balsamic dan AdobeXD. Jika tahap ini selesai,
maka masuk tahap evaluation.
3.3.3 Evaluation
Tahap ini merupakan evaluasi terhadap desain wireframe yang dibuat pada
tahap design , beberapa cara digunakan untuk memaksimalkan hasil evaluasi tampilan
dengan cara seperti wawancara, observasi, research, dan eye tracking. Jika terdapat
kesalahan ataupun kekurangan maka kembali ke tahap design, jika sudah sesuai maka
dilanjutkan ke tahap implementation.
3.3.4 Implementation
Implementasi pada tahap ini berupa high-fildelity prototype yang dapat
berinteraksi dengan pengguna, high-fidelity prototype kemudian diimplementasikan
kedalam bentuk tampilan website oleh developer, dengan pengujian akhir yang dibantu
oleh system usability scale untuk mengukur usabilitas dari pelajar. Jika terdapat
kekurangan maka akan kembali ke tahap evaluation untuk diperbaiki, namun jika sudah
sesuai dan selesai maka bisa dilanjutkan kedalam bentuk kode oleh front end developer.
 16

BAB IV. JADWAL PENGEMBANGAN

4.1 Jadwal Pengembangan

Pelaksanaan pengembangan dilakukan berdasarkan tahapan pengembangan yang telah dibahas sebelumnya. Adapun jadual pengembangan
tampak sebagaimana tabel berikut.
Tabel 4. 1 Jadwal Pelaksanaan Pengembangan
 17

DAFTAR PUSTAKA

Cerah, I. (2020). Pengembangan Front-End Website Perpustakaan Politeknik Negeri

Jakarta Dengan Menggunakan Metode UCD. 1-11.
Dewi, R. (2020). SISTEM PEMESANAN PRODUK PADA RESELLER BAJU
MUSLIMAH MENGGUNAKAN METODE USER CENTERED DESIGN.
Edisusilo. (2020, 12 26). Cara Menggunakan System Usability Scale. Retrieved from
https://www.edisusilo.com/cara-menggunakan-system-usability-scale/
Fadli, M. R. (2020, 12 16). PERANCANGAN USER INTERFACE DAN USER
EXPERIENCE PADA APLIKASI MOBILE INDOSPORT DENGAN
MENGGUNAKAN PENDEKATAN USER CENTERED DESIGN. Retrieved
from Universitas Negeri Semarang: http://lib.unnes.ac.id/39368/
Foundation, I. D. (2020, 12 15). What is User Centered Design? Retrieved from
Interaction Design Foundation: https://www.interaction-
design.org/literature/topics/user-centered-design
Foundation, I. D. (2020, 12 16). What is User Experience (UX) Design? Retrieved from
Interaction Design: https://www.interaction-design.org/literature/topics/ux-
design
Huda, W. (2017). EVALUASI USER INTERFACE PADA SISTEM INFORMASI
AKADEMIK DI STIE PUTRA BANGSA MENGGUNAKAN METODE
USER CENTERED SYSTEMS DESIGN. Jurnal Ekonomi dan Teknik
Informatika.
Indra, R. (2019). Evaluasi dan Perbaikan Antarmuka Pengguna Menggunakan
Pendekatan User Centered Design (UCD) dan Card Sorting. 3, 4835-4845.
Industry, A. (2020, 12 17). Medium blog of artificial industry. Retrieved from Article
User Centered Design: https://medium.com/artificial-industry/user-centered-
design-ac0889e3e1e2
Niagahoster. (2020, 12 16). Mengenal User Interface: Pengertian, Kegunaan, dan
Contohnya. Retrieved from Mengenal User Interface: Pengertian, Kegunaan,
dan Contohnya: https://www.niagahoster.co.id/blog/user-interface/
Pandayin, A. H. (2012). Penerapan Metode User Centered Design (UCD) pada Aplikasi
Katalog Wisata Kuliner Berbasis Web.
 18

Unikom, Codelabs. (2020, 12 16). User Centered Design — Pengertian, Perbedaan

dengan HCD, dan Aktivitas di Dalamnya. Retrieved from Medium:
https://medium.com/codelabs-unikom/user-centered-design-ee25536850b7
Yuliani, P. (2015). RANCANG BANGUN SISTEM INFORMASI OBYEK WISATA
BERBASIS WEB MENGGUNAKAN METODE USER CENTERED
DESIGN (UCD). JURNAL ANGKASA, 7.
Yunus, A. I. (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.