ANALISIS UX WIREFRAME DAN PROTOTYPES

PADA PORTAL STUDENT STMIK AMIKOM PURWOKERTO

MATA KULIAH MULTIMEDIA

Disusun oleh
1
2
3
4

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
AMIKOM PURWOKERTO
2019
 ABSTRAK

Portal Student Service Center yang dimiliki STMIK Amikom Purwokerto

yang beralamat student.amikompurwokerto.ac.id merupakan fasilitas yang

diberikan kampus bagi mahasiswa. Dengan adanya portal tersebut memudahkan

mahasiswa untuk mengakses kebutuhan akademik dari mulai info kampus, nilai,

cetak kartu ujian, input cuti, hingga history pembayaran.

Berdasarkan persoalan yang ada, ditemukan penyelesaian dengan analisa

analisa yang disusun berdasarkan User Experience (UX) pada pokok Wireframe dan

Prototype. Dengan cara mengamati selama lebih satu minggu yang dilakukan

kelompok kami.

Dengan disusunnya hasil analisis ini diharapkan dapat menjadi feedback

pada pihak developer maupun administrator untuk kedepannya digunakan sebagai

pengembangan guna memberikan kepuasan yang lebih bagi para pengguna portal

Student Service Center STMIK Amikom Purwokerto.

Kata kunci : User Experience,Wireframe, Prototype

 KATA PENGANTAR

Puji syukur kehadirat Allah SWT, atas segala limpahan rahmat, karunia,

serta nikmat-Nya yang tidak ternilai dan tidak dapat dihitung sehingga kami bisa

menyelesaikan tugas ini yaitu Analisis UX Wireframe dan Prototype Portal Student

STMIK Amikom Purwokerto yang disusun untuk memenuhi tugas mata kuliah

Multimedia.

Tugas ini berisikan pengamatan terhadap portal pada pokok wireframe dan

prototype dari sudut pandang user experience pengguna. Masalah yang diangkat

mulai dari rancangan rangka, alur, serta fungsi dari portal student tersebut.

Adapun penyusunan tugas ini kiranya masih jauh dari kata sempurna.

Dengan itu kami mengharapkan permohonan maaf kiranya banyak terdapat

kesalahan dalam penyusunan tugas ini. Kami berharap pembaca dapat memberikan

feedback kepada kami agar kemudian hari kami dapat membuat tugas dengan lebih

baik lagi.

Akhir kata kami ucapkan banyak terima kasih bagi para pihak yang telah

membantu menyusun tugas ini. Semoga bisa bermanfaat bagi pembaca ataupun

penelitian selanjutnya.

Purwokerto, 7 Juli 2019

Tim Penyusun
DAFTAR ISI
 BAB I

PENDAHULUAN

A. Latar Belakang Masalah

User Experience (UX) memegang peran penting dalam pembangunan

sebuah website, karena desain pada sebuah website harus rapi dan terorganisir.

Selain itu User Experience (UX) harus sesuai dengan kebutuhan pengguna dari

website yang dibangun. User Experience (UX) dibangun dengan melihat

kebutuhan pengguna atas sebuah website yang akan dibangun mulai tampilan,

fitur, serta bebagai kebutuhan lainnya.

Semakin berkembangnya zaman, kebutuhan pengguna terhadap

antarmuka website juga semakin tinggi. Semakin sering seseorang membuka

banyak halaman website semakin tinggi pula eskpektasi orang terhadap

antarmuka suatu website. Sebagian besar orang menyukai tampilan antarmuka

yang modern.

Begitupula pada website atau portal student.amikompurwokerto.ac.id

yang digunakan mahasiswa STMIK Amikom Purwokerto untuk mengakses

keperluan akademis. Tampilan website mempengaruhi kredibilitas suatu

institusi di mata pengguna.

Pada dasarnya, pengalaman pengguna dalam mengakses atau melihat

suatu website berkaitan erat dengan wireframe atau kerangka dari website itu

sendiri. Pembangunan wireframe akan berdampak besar pada antarmuka

 mahasiswa, karyawan, maupun administrator saat mengakses portal

student.amikompurwokerto.ac.id STMIK Amikom Purwokerto.

Dalam praktiknya, kepuasan pengguna terhadap antarmuka website

juga dipengaruhi dengan adanya prototype untuk menunjukan kepada

pengguna bahwa suatu website yang menunjukan fungsionalitas terhadap

pengguna untuk mensimulasikan sebuah website serta menguji terhadap alur

dari sebuah website itu sudah sesuai apa yang diharapkan.

B. Rumusan Masalah

Berdasarkan latar belakang yang telah dibahas, disimpulkan bahwa

rumusan masalah yang dibahas yaitu :

1. Apa itu Wireframe dan Prototype UX secara umum?

2. Bagaimana Wireframe dan Prototype tersebut bekerja pada situs

student.amikompurwokerto.ac.id?

3. Analisis keefektifan Wireframe dan Prototype pada situs

student.amikompurwokerto.ac.id dengan metode SWOT.

C. Batasan Masalah

Dalam perumusan masalah, analisa wireframe dan prototype dapat

dibangun dengan batasan yaitu sumber data yang digunakan dalam analisa

wireframe dan prototype adalah dari portal student.amikompurwokerto.ac.id

yang ada pada STMIK Amikom Purwokerto.

D. Manfaat Penelitian

Manfaat penelitian dalam analisa wireframe dan prototype adalah

mengetahui tampilan serta alur fungsi portal student.amikompurwokerto.ac.id

yang ada pada STMIK Amikom Purwokerto dalam sisi User Experience.
 BAB II

TINJAUAN PUSTAKA

A. Landasan Teori

1. Pengertian User Experience

Secara definisi, International Organization For Standarization

mendefinisakan User Experience yaitu pandangan dan respons seseorang

yang dihasilkan dari menggunakan suatu produk, sistem, atau jasa. Dari

definisi, User Experience bersifat subyektif dan difokuskan pada

penggunaan suatu produk, sistem, atau jasa. Lebih simple lagi, User

Experience adalah bagaimana yang kita rasakan tentang setiap interaksi

dengan apa yang ada di hadapan anda ketika anda menggunakan nya.

Suatu produk atau sistem dapat berupa website, web application, atau

desktop software. Secara general, User Experience merupakan suatu

bentuk human-computer interaction (HCI). [1]

2. Pengertian Wireframe

Wireframe dapat disebut sebagai blueprint dalam arsitektur.

Tujuan dibuatnya wireframe bukan desain visual, namun menyampaikan

susunan, struktur, layout, navigasi dan organisir konten. Maka dari itu,

biasanya wireframe dibuat dengan warna hitam putih. Wireframe lebih

menekankan isi dari konten. [2]

3. Pengertian Prototype

Prototype bukanlah hasil akhir. Banyak pengguna yang

berpikiran bahwa prototype adalah hasil akhir dari sebuah produk.

Banyak desainer yang kesulitan dalam menghadapi hal ini. Prototype

digunakan untuk menunjukan kepada user, business owner, developer,

tentang bagaimana aplikasi mobile atau website yang saat ini kita

rancang itu bekerja secara yang diharapkan oleh mereka semua, jika

terjadi sesuatu yang belum benar, maka diperlukannya kita merubah

prototype tersebut. [3]

 BAB III

METODOLOGI

A. Metode Penelitian

Metode penelitian menggunakan SWOT yaitu untuk membuat evaluasi

kekuatan (Strenght), kelemahan (Weakness), peluang (Opportunity), dan

ancaman (Threats). Analisa situasi dan kondisi bersifat deskriptif yaitu dengan

memberikan gambaran situasi yang dihadapi.

B. Metode Pengumpulan Data

Metode pengambilan data dilakukan dengan cara mengamati portal

student STMIK Amikom Purwokerto pada alamat website

student.amikompurwoketo.ac.id dari halaman login serta halaman user untuk

mengakses kebutuhan akademik. Selain itu juga melakukan pengamatan pada

alur fungsi serta seberapa efektif ketika user memanfaatkan peranan dari fitur

yang ada pada portal student Amikom.

C. Metode Analisis Data

Analisis SWOT (Strenght, Weakness, Oppurtunity, Threats) bertujuan

untuk memberikan deskripsi mengenai subjek penelitian berdasarkan data dari

variabel yang diperoleh dari kelompok subjek yang diteliti dan tidak

dimaksudkan untuk pengujian hipotesis.

 BAB IV

ANALISA DAN PEMBAHASAN

A. Analisis Hasil Penelitian

Pembahasan yang dilakukan dengan melakukan pengamatan portal

student STMIK Amikom Purwokerto terkait User Experience dalam hal

Wireframe dan Prototype yang menggunakan analisis deskriptif berupa SWOT.

1. Strenght (Kekuatan)

Bagi sebagian orang yang telah kami ambil sampel pendapatnya me

menyebutkan bahwa kerangka ataupun wireframe dari halaman login maupun

akses masuk kedalam menu portal yaitu simpel serta mudah dipahami.

Penempatan menu dengan fitur dropdown di sebelah kiri secara alur

keterbiasaan manusia lebih mudah untuk mengarahkan kursor. Secara

fungsionalitas dan prototype dari portal student tersebut sudah baik karena

bersifat mewakili seluruh layanan dalam satu portal saja.

Alat prototype-nya di desain untuk menyatukan seluruh layanan serta

tidak melupakan unsur efisiensi yang artinya portal tersebut tidak banyak

memerlukan perubahan layout dengan skala yang besar. Dari segi konsistensi

juga sudah baik karena setiap menu atau submenu yang diakses memiliki

tanpilan layout yang hampir sama.

Terdapat widget atau tampilan flash di sisi kiri menu bar dapat

menambah estetika dan kesan menarik. Interaksi kursor pengguna terhadap

portal student sebagian besar pada sisi kiri dan tengah menambah sisi praktis

serta efektif. Apabila server dalam keadaan tidak overload proses buka dan

pindah halaman juga relatif cepat. [4]

2. Weakness (Kelemahan)

Beberapa orang dalam kemempuan mengerti dalam hal website

mengatakan bahwa tampilan halaman login maupun halaman utama portal

student tersebut kurang dinamis. Apabila dibandingan dengan Universitas

Amikom Yogyakarta yang memiliki halaman login yang langsung

tersinkronisasi dengan login google dengan domain email kampus akan terlihat

lebih modern.

Penggunaan bahasa desain yang sekarang cenderung kurang trendy dan

kurang kompleks. Penggunaan font kurang tebal dan solid di bagian sidebar

halaman utama yang berdampak mengurangi visibilitas. Tinggi dan lebar

kerangka tidak fit pada layar (autofit margin) serta bukan tipe tampilan yang

responsif apabila diakses menggunakan perangkat handphone. [5]

3. Opportunity (Peluang)

Sesuai dengan poin poin yang ada pada Strenght portal student STMIK

Amikom Purwokerto memiliki peluang yang cukup bagus untuk saat ini.

Tampilan yang simple yang sudah mencakup kepentingan – kepentingan

akademik perlu dipertahankan. Namun dari sisi kedinamisan tampilan perlu

adanya peningkatan lagi.

 Dengan adanya update tampilan beserta dukungan server yang baik

semakin besar pula kesempatan ataupun peluang untuk tetap menarik minat

mahasiswa membuka portal student.

4. Threats (Ancaman)

Ancaman yang didapatkan mengingat dari 3 poin yang sudah diulas

diatas adalah apabila tampilan dari portal amikom beserta sumber daya server

tidak kunjung mendapatkan pembaharuan maka akan timbul berbagai macam

kemungkinan sebagai contoh pada kasus portal student dari Telkom University

terdapat oknum yang melakukan DdoS pada server dikarenakan responnya yang

buruk.

Kemungkinan itu bisa saja terjadi pada portal student STMIK Amikom

Purwokerto. Selain itu akan menimbulkan ketidakseimbangan antara status

STMIK Amikom Purwokerto sendiri yang akan beralih status menjadi

Universitas. [6]
 BAB V

PENUTUP

A. Kesimpulan dan Saran

Berdasarkan pengamatan dan penelitian yang dilakukan terhadap portal

Student Service Center STMIK Amikom Purwokerto yaitu User Experience

terhadap Wireframe dan Prototype apabila ditinjau dari sudut pandang orang

yang mengerti ataupun ahli terhadap UX maka hasilnya portal student STMIK

Amikom Purwokerto perlu adanya pembenahan.

Khususnya pada kedinamisan website serta penggunaan pemilihan font

yang mengacu pada visibilitas pengunjung. Selain itu dari sisi ketangguhan

server juga perlu ditingkatkan agar memberikan pengalaman yang

menyenankan bagi para pengunjung portal student.

Pembenahan sebaiknya mulai dilakukan secara berkala serta membuat

kuisioner yang ditujukan kepada mahasiswa agar memberikan feedback guna

keberhasilan pengembangan. Rekomendasi pembenahan difokuskan pada

tampilan responsif baik di seluruh lini halaman portal student.

 DAFTAR PUSTAKA

1. Pratama, Galih, 2017. Apa Perbedaan User Experience (UX) dan User
Interface (UI)?. Belajar Koding. Retrieved July 3, 2019, from Belajar
Koding: https://belajarkoding.net/apa-itu-user-experience-ux-dan-user-interface-
ui/

2. Tanudjaja, Christy, 2018. Perbedaan Wireframe, Mockup dan Prototype.

Binus University School of Information Systems. Jakarta. Retrieved July 3,
2019, from SIC Binus: https://sis.binus.ac.id/2018/01/19/perbedaan-
wireframe-mockup-dan-prototype/

3. Pricilia, Evelyn, 2017. Pengenalan Prototype pada UX (Part 1). Binus

University School of Information Systems. Jakarta. Retrieved July 3, 2019,
from SIC Binus: https://sis.binus.ac.id/2017/04/28/pengenalan-prototype-pada-
ux-part-1/

4. Widhiani, Dewa Ayu Putu Ari, 2018. Analisa User Experience pada Sistem
Informasi Akademik Universitas Pendidikan Ganesha Ditinjau Dari
Pengguna Mahasiswa. Jurnal Pendidikan Teknologi dan Kejuruan Vol. 15,
No. 1, Bali.

5. Adhipratama, Yoga, 2018. Perancangan Antarmuka Pengguna Dengan

Metode Lean UX pada Website Hello Work Dinas Tenaga Kerja Kabupaten
Pasuruan. Institut Bisnis Dan Informatika STIKOM Surabaya, Surabaya.

6. Salim, Hilmi, 2018. 5 Elemen User Experience. Medium. Retrieved July

7, 2019, from Medium: https://medium.com/@hilmisalim/5-elemen-user-
experience-870248b34631