D esain T ampilan S istem A bsensi P ek uliahan dengan
S ekolah T inggi T eknik S urabayaE mail : gracelevina@ stts.edu, riandika.lumaris@ gmail.com, joan@ stts.edu
A bstr ak
A bstrak-S istem Infromasi Mahasiswa sangat penting dalam bidang perkuliahan, dengan tujuan untuk memfasilitasi mahasiswa sehingga mahasiswa mendapatkan informasi secara jelas mengenai kegiatan selama studinya. S alah satu sistem informasi yang terpenting adalah sistem informasi absensi. Permasalah umum yang dihadapi oleh seorang mahasiswa adalah salah perhitungan jumlah absensi mahasiswa yang menyebabkan seseorang tidak dapat mengikuti ujian. D alam peraturan akademik telah terdapat peraturan untuk kebutuhan syarat minimum kehadiran pada suatu mata kuliah. J ika suatu sistem User Interface tidak memiliki fungsi dan tampilan yang baik dapat menyebabkan terjadinya human error.
D engan permasalahan yang telah disebutkan, dibangun sebuah sistem informasi absensi sesuai dengan kebutuhan user. D alam mencapai upaya agar didapatkan aplikasi dengan User E xperience yang baik, dipilih metode storyboarding untuk membuat prototyping tampilan. D iharapkan dengan penggunaan elemen-elemen User E xperience dapat membangun sistem yang mencangkup inputan informasi mengenai absensi mahasiswa. S elain itu, dihasilkan juga laporan-laporan yang berkaitan dengan absensi oleh admi n yang diberikan kepada manajemen. S elain itu juga supaya mahasiswa dapat melihat absensi mereka pada website sistem informasi yang sudah diakses oleh mahasiswa.
K ata K unci: S istem I nfor masi A bsensi, User E xper ience, S tor yboar ding 1. Pendahuluan
T eknologi informasi mempunyai dampak yang sangat besar dalam kehidupan manusia. Hal ini dapat dimanfaatkan untuk mendukung berbagai bidang, yaitu: membantu mempercepat proses kegiatan, akurasi data, ketepatan waktu, kesederhanaan, dan relevansi yang menjadi penentu kualitas informasi yang dihasilkan. T ujuan utamanya adalah untuk meningkatkan pelayanan dan dapat dimanfaatkan secara efektif. S ehubungan dengan teknologi yang sangat maju, peranan sistem informasi berbasis online semakin marak.
pendidikan masih berisfat offline. B anyak kendala yang seringkali dihadapi oleh B iro A dministrasi A kademik. C ontohnya adalah perhitungan jumlah absensi untuk penentuan sanksi tidak boleh mengikuti ujian (T B U) jika seorang mahasiswa tidak memenuhi jumlah tatap muka dalam mata kuliah. T erkadang B iro A dministrasi A kademik mendapatkan data yang salah. Hal tersebut dapat menyebabkan beberapa mahasiswa yang seharusnya tidak terkena T B U absen, dianggap mengalami T B U absen. Penyelesaian masalah yang sering kali dilakukan adalah mahasiswa yang bersangkutan harus melapor pada B iro A dministrasi A kademik untuk dapat melanjutkan mata kuliah yang diambilnya.
Masalah lain yang terjadi adalah ketika ada seorang mahasiswa yang menambah sebuah mata kuliah pada minggu keempat, maka petugas B iro A dministrasi A kademik tidak dapat menambahkan absensi pada minggu pertama, kedua, dan ketiga secara langsung. Hal ini dikarenakan perkuliahan pada minggu pertama, kedua, dan ketiga telah berjalan. Petugas B iro A dministrasi A kademik harus mengimputkan kembali data-datanya secara manual. D ata-data yang diinputkan dimulai dari awal, jadi petugas B iro A dministrasi A kademik harus memasukkan kembali data mahasiswa yang sudah mengikuti kelas sesuai jadwal ditambah dengan mahasiswa yang mengikuti kelas sesuai jadwal melalui batal tambah, bukan melalui pegisian F R S pada sistem informasi mahasiswa pada saat perwalian
Masalah lain yang sering dialami oleh B iro A dministrasi A kademik adalah mahasiswa tidak dapat mengetahui jumlah absensi yang telah diambilnya. S etiap mahasiswa diberikan 4 (empat) kali kesempatan untuk absen pada setiap mata kuliah yang diambilnya. S eringkali mahasiswa yang ingin melakukan absen pada mata kuliah tertentu, tidak menghitung absen yang sudah diambilnya. J adi mahasiswa yang bersangkutan harus melihat jumlah absensi mereka terlebih dahulu di B iro A dministrasi A kademik dan menghitungnya secara manual.
S egala sesuatu yang dilakukan secara manual, pasti bisa terjadi kesalahan yang disebabkan oleh kelalaian manusia (human error). Padahal jika terjadi kesalahan dalam absensi dapat menyebabkan mahasiswa tidak dapat mengikuti ujian tengah semester ( UT S ) maupun ujian akhir semester (UA S ). Hal ini dapat menyebabkan jalannya absensi perkuliahan menjadi semakin rumit, lambat, dan tidak efisien. Oleh karena itu, akan dibuat sistem informasi absensi secara online dengan menggambar prototypenya terlebih dahulu. T ujuan pembuatan sistem infromasi absensi ini adalah agar menghitung jumlah absensi dari masing-masing mahasiswa dan nantinya dapat dilihat atau diakses dari website sistem informasi mahasiswa. Pada akhirnya mahasiswa tidak perlu mencari data absen mereka pada B iro A dministrasi A kademik lagi, mereka dapat membuka account sistem informasi mahasiswanya, dan mendapatkan jumlah absensi mereka. S elain itu juga, dilengkapi dengan laporan untuk institusi Pendidikan terkait dengan performansi absensi mahasiswa.
2. T eor i D asar 2.1 User E xperience
dengan User Interface atau Usability, namun User E xperience merupakan konsep yang lebih luas.” (J acob Nielsen; D on Norman, 2017)
“User E xperience bukanlah mengenai desain industri yang baik, multi-touch, atau tampilan menarik. User E xperience ialah mengenai bagaimana caranya untuk melampaui batas material. User E xperience adalah tentang menciptakan pengalaman melalui peralatan yang ada.” (Marc Hassenzahl, 2014)
UX adalah kualitas pengalaman yang didapat oleh seseorang saat berinteraksi dengan sebuah desain tertentu. D engan begitu, UX D esign dapat disimpulkan sebagai metodologi dalam pengembangan perangkat lunak di mana prosesnya berpusat pada optimasi kualitas pengalaman yang didapat user selama berinteraksi dengan sistem. D i dalam pelaksanaannya, desain yang didasarkan pada UX tidak serta merta dibuat. B anyak hal yang mempengaruhi baiknya suatu tampilan. S ebagai desainer, beberapa pertanyaan di bawah ini menjadi landasan dari bagaimana suatu desain dibuat, yaitu:
- A udience: S iapa yang menjadi segmen tujuan? - C ontent: A pa yang ingin disampaikan?
- C ontext: D i mana pesan tersebut disampaikan? - Process: K apan pesan tersebut disampaikan? - Problem: Mengapa A nda menyampaikannya?
Pada dasarnya, proses pengembangan software melalui tahapan yang disebut S oftware D evelopment L ife C ycle (SD L C ) . Pendekatan S D L C yang paling umum dipakai adalah dengan model J aterfall. Namun J aterfall hanya berjalan satu arah saja, sedangkan sering kali website memerlukan peninjauan ulang berdasarkan hasil penelitian untuk hasil yang maksimal. K arena itu, UX Mastery menerapkan S D L C yang bernama UX Process dengan beberapa penyesuaian kepada proses implementasi UX .(UX Mastery, 2017)
2.2 S toryboard S ej ar ah S tor yB oar d
S toryboard adalah prototipe narasi yang menceritakan skenario yang menggambarkan bagaimanakasus penggunaan dan persyaratan fungsional yang digunakan dalam konteks user yang sebenarnya. S toryboard biasanya mengikuti plot tertentu atau alur cerita untuk memberitahu cerita yang diilustrasikan dengan maket interface atau ilustrasi dari pengguna akhir menggunakan / berinteraksidengan perangkat lunak ( A rnowitz ,J onathan, dkk, 2006). Proses storyboard dikenal pada saat dikembangkan oleh J alt D isney Productions pada awal 1930-an, setelah beberapa tahun, lalu proses storyboard yang sama dikembangkan secara lebih lanjut oleh J alt D isney dan studio animasi lainnya.
desainer untuk menggambarkan dan mengatur ide-ide sehingga nantinya bisa mendapatkan umpan balik atau feedback yang nantinya berguna untuk pengembangan sistem selanjutnya (UsabilityNet, 2015).
D asar S toryboard
D alam pembuatan suatu sistem desktop, storyboard juga berguna untuk memahami konteks sifat manusia dimana nantinya perangkat lunak akan digunakan. Pada sisi lainnya, storyboard juga dapat digunakan untuk mengeksplorasi pengalaman sebelum membuat suatu software. J ika storyboard dapat dibuat dengan sempurna, maka hal tersebut dapat menjadikan suatu perangkat lunak yang akan dibuat memiliki desain yang terbaik dan lebih efisien. S toryboard membantu untuk melakukan hal ini jauh lebih baik daripada menggunakan skenario use case.
A lasan mengapa storyboard sangat efektif dalam pembuatan suatu sistem ini karena cerita mencerminkan cara sehari-hari manusia menjalani hidupnya. C erita adalah cara yang berumur ribuan tahun untuk berhubungan pengalaman manusia, dan bahkan sebelum ada kata-kata, orang-orang menggunakan gambar untuk berkomunikasi pengalaman mereka. D alam pengalaman pengguna desain, storyboard akan menjadikan software lebih hidup melalui penggabungan pengalaman user dan penggunaan konteks user nyata di tempat-tempat yang nyata melakukan hal-hal yang nyata, bukan hanya beberapa abstrak.
S toryboard paling sering digunakan kepada awal pendesainan perangkat lunak. S toryboard juga digunakan untuk membantu tim software untuk menyempurnakan ide awal untuk memastikan bahwa tujuan akhir dari satu tim itu adalah satu dan sama. S toryboard membuat pemahaman bersama tentang tujuan dari perangkat lunak yang akan dibuat dan apa yang akan dilakukan nantinya oleh software yang akan dibuat. D alam proses pembuatan, storyboard juga dapat bertindak untuk menjaga suatu tim agar terfokus pada solusi inti sesuai dengan tujuan awal.
D alam pembuatan storyboard ada beberapa hal yang harus diperhatikan seperti (A rnowitz, J onathan, 2006):
- S iapa yang akan menggunakan software tersebut?
- D alam kondisi apa mereka akan menggunakan software tersebut?
- A pakah fitur-fitur yang dibuat dalam software tersebut sudah mencukupi tujuan dari user ?
- B agaimana penggunaan software tersebut akan mempengaruhi orang lain dalam alur kerja?
G ambar 1 Nar atif S tor yboar d
Gambar 1 menunjukkan contoh naratif storyboard. Naratif storyboard berisi tentang cerita dari storyboard yang akan di tunjukkan. C erita yang disajikan pada naratif storyboard merupakan inti dari cerita yang akan diceritakan, tidak semua kalimat dituangkan dalam desain storyboard ini. Gambar 2 menunjukkan contoh storyboard mock-up. Pada gambar 2 dapat dilihat bahwa desain storyboard mock-up lebih tampak tidak rapi daripada storyboard naratif pada Gambar 1. S ecara keseluruhan storyboard naratif lebih banyak menarik minat dari user pengguna storyboard.
L angk ah-langk ah Pembuatan S tor yboar d - V isi
S toryboard yang bagus memerlukan visi yang jelas dalam pembuatannya. S emakin jelas visi dasar pembuatan storyboard, semakin jelas pula desain storyboard yang nantinya akan dibuat. V isi yang dibuat juga tidak boleh luput dari goal atau tujuan yang diinginkan pada awalnya. V isi biasanya dilandasi dengan alasan, mengapa software yang akan dibuat dapat laku dipasaran. V isi juga merupakan slogan yang dapat membantu dalam pemberian keputusan.
- Papan I de
B oard ide merupakan kumpulan dari gambar-gambar, produk, dan kumpulan user yang menjadi sumber atau penunjuk dalam pembuatan storyboard. Pada bagian board ide, user dapat menuangkan semua ide yang dimiliki misalnya mengedit foto yang akan digunakan. D ari papan ide, terkadang dapat ditemukan masalah-masalah yang nantinya dapat mengganggu proses berjalannya software, sehingga dapat diperbaiki sebelum software dibuat. Gambar 3 menunjukkan contoh board ide.
G ambar 3 C ontoh B oar d I de - K ontek s
K onteks yang sesuai dengan storyboard dibutuhkan dalam penyusunan storyboard. K onteks yang dibutuhkan dalam penyusunan storyboard harus sesuai dengan visi yang telah ditentukan sebelumnya.
- L atar B elak ang
S toryboard yang benar, harus dibuat berlandaskan hal yang melatarbelakangi pembuatan storyboard. S emakin jelas latar belakang pembuatan, semakin jelas pula storyboard yang akan dibuat nantinya. A pabila dalam pembuatan storyboard tidak memiliki latar belakang yang jelas, maka dapat dipastikan bahwa dalam proses penyusuan storyboard, user akan mengalami kesusahan dan hasil akhir dari storyboard tidak maksimal.
- S k enar io dan D esain
storyboard. S kenario harus dibuat secara rinci dan sesuai dengan keadaan yang akan terjadi apabila skenario tersebut akan dijalankan. D esain yang dibuat juga harus dapat menggambarkan scenario yang terjadi dengan baik dan dapat mudah dimengerti, misalkan apabila user ingin memilih aplikasi dalam handphone, maka desain yang baik harusnya menunjukkan user yang memegang handphone dan didalam handphone tersebut, terdapat aplikasi yang akan ditunjukkan.
- I mplementasi D esain S tor yboar d
Pada tahap keenam atau tahap storyboard ini, adalah proses penyusunan storyboard. S emua bahan dari board ide dapat dituangkan pada storyboard ini. D alam penyusunan storyboard, isi dari storyboard tersebut harus tetap sesuai dengan visi dan konteks serta latar belakang. S toryboard yang dibuat juga harus dapat menggambarkan keadaan yang sebenarnya serta dapat mengatasi kejadian yang akan terjadi selanjutnya. S emua kemungkinan yang ada dapat dibuat pada storyboard ini. Misalnya apabila user memilih cancel maka apa yang akan terjadi dan apabila user memilih next , hal apa yang akan terjadi selanjutnya.
K elebihan pada S tor yboar d
1. Memperjelas penyajian pesan agar tidak terlalu bersifat verbal
2. S toryboard tidak mengharuskan user untuk meluangkan waktu yang lama untuk memahami sistem yang digunakan
3. K elalaian sistem dapat terlihat pada storyboard, sehingga kesalahan dapat diperbaiki agar tidak menghabiskan biaya lebih banyak daripada sistem mengalami kesaalahan pada saat suda berjalan
4. S toryboard yang rinci dapat menghemat waktu dalam menulis dokumentasi proyek
5. S toryboard dapat membantu user agar fokus pada isi total program. B aik dari sudut pandang keseluruhan program dan interaksi pengguna.
K ek ur angan pada S tor yboar d
1. S toryboard memiliki keterbatasan dalam menunjukkan gambar yang memiliki gerakan-gerakan. A tau dengan kata lain, storyboard tidak dapat menunjukkan objek yang dapat bergerak.
2. S toryboard juga memili ki keterbatasan dalam menambahkan audio visual. S ehingga dalam pembelajaran, penggunaan storyboard kurang dapat dimaksimalkan.
3. A nalisa S istem
K ebutuhan yang dibutuhkan oleh sistem B iro A dmin merupakan hal yang dapat digunakan sebagai dasar dalam penelitian ini. S istem abesensi B iro A dministrasi A dmin memiliki beberapa kebutuhan dan spesifikasi yang dibutuhkan sebagai tambahan agar sistem yang dimiliki dapat berjalan dengan lebih baik lagi. S istem yang dibutuhkan adalah sistem yang dapat secara otomatis membuat minggu perkuliahan tanpa harus memasukkan tanggal perkuliahan secara manual.
mahasiwa tidak bisa ujian. S ebagai contoh, suatu saat ada mahasiswa yang tidak bisa ujian karena terkena T B U absensi, padahal menurut mahasiwa tersebut, dia tidak pernah absen atau absensinya tidak melebihi 4 (empat) kali. Pada kasus tersebut, dapat dikatakan bahwa sistem absensi yang lama, perlu diberi tambahan agar sistem yang ada dapat berjalan dengan lebih baik.
3.1 A nalisa S istem L ama
3.2 S istem B ar u
4. S tor yboar ding
D alam pembuatan sebuah sistem informasi absensi yang baru, dibentuklah penggambaran sistem dengan menerapkan ilmu User E xperience. S alah satu metode dari User E xperience yang dapat diterapkan adalah model storyboard dengan memanfaatkan prototyping. L angkah-langkah pembuatan dalam storyboarding, sebagai berikut:
V isi
V isi dari sistem informasi absensi ini adalah menampilkan informasi absensi dari mahasiswa setiap pertemuan kuliah dengan dosen dan kemudahan akses laporan untuk mahasiswa. D iharapkan untuk kemudahan akses, sistem ini dapat diakses dimana saja.
Papan I de
Perhitungan absensi mahasiswa dilakukan secara otomatis. Pembatalan, tambahan, dan pengganti kuliah dapat dilakukan secara cepat dan dapat diakses dimana saja. L aporan yang diminta oleh pihak manajemen dapat dicetak dan diakses di mana saja.
K ontek s
K onteks yang dibutuhkan dalam penyusunan storyboard harus sesuai dengan visi yang telah ditentukan sebelumnya, yaitu aplikasi berupa website yang dapat diakses dimana saja.
L atar B elak ang
Perhitungan jumlah absensi untuk penentuan sanksi tidak boleh mengikuti ujian (T B U) jika seorang mahasiswa tidak memenuhi jumlah tatap muka dalam mata kuliah. S ering kali B iro A dministrasi A kademik mendapatkan data yang salah sehingga dapat menyebabkan beberapa mahasiswa yang seharusnya tidak terkena T B U absen, dianggap mengalami T B U absen. Mahasiswa tidak dapat mengetahui jumlah absensi yang telah diambilnya karena informasi yang diperoleh tidak bisa didapatkan secara langsung. Oleh sebab itu, seringkali mahasiswa yang ingin melakukan absen pada mata kuliah tertentu, tidak menghitung absen yang sudah diambilnya. Hal ini terjadi karena B iro A dministrasi A kademik menghitung absen tersebut secara manual
S k enar io dan D esain
OO yaitu: normal (kuliah berjalan seperti biasa), batal (peniadaan kuliah), ganti (penggantian kuliah), dan tambah (penambahan mata kuliah). F orm S istem Informasi A bsensi ini dapat dilihat pada Gambar 7.
G ambar 7
F or m J adwal Per temuan K uliah
- K etika status pada form jadwal pertemuan kuliah diisi dengan status tambah, makan akan muncul form tambahan mata kuliah. S tatus pada form ini menunjukkan adanya tambahan kuliah pada mata kuliah tertentu. F orm tambahan mata kuliah ini dapat dilihat pada G ambar 8.
G ambar 8
F or m T ambahan M ata K uliah
G ambar 9
F or m Peniadaan M ata K uliah
- K etika status pada form jadwal pertemuan kuliah diisi dengan status ganti, maka akan muncul form penggantian mata kuliah. S tatus pada form ini menunjukkan bahwa kuliah ini diganti oleh dosen yang bersangkutan dari jadwal sebenarnya. F orm penggantian mata kuliah ini dapat dilihat pada G ambar 10.
G ambar 10
F or m Penggantian M ata K uliah
G ambar 11 F or m D etail A bsensi
- L aporan yang dihasilkan dari integrasi sistem informasi absensi, berupa laporan berita acara. L aporan ini juga dapat diprint oleh pihak B iro A dministrasi A kademik. L aporan berita acara ini dapat dilihat pada Gambar 12.
- D osen juga dapat mengecek mahasiswa yang terkena T B U A bsensi pada mata kuliah tertentu. D engan adanya laporan ini, dosen dapat memantau dan mengingatkan mahasiswa yang tidak masuk kuliahnya. S elain itu juga, didapatkan detail mahasiswa siapa saja yang terkena T B U absen. L aporan daftar mahasiswa penerima T BU absensi ini dapat dilihat pada Gambar 13.
G ambar 13
L apor an D etail D aftar M ahasiswa Pener ima T B U A bsensi
G ambar 14
L apor an K ehadir an M ahasiswa
- Mahasiswa juga dapat melihat daftar kehadiran pada mata kuliah yang sedang diambilnya. L aporan ini dapat diakses secara online, sehingga mahasiswa tidak perlu lagi ke pihak B iro A dministrasi A kademik untuk menanyakan sudah berapa kali melakukan absen pada mata kuliah tertentu. Mahasiswa juga dapat mengetahui status dari masing-masing mata kuliah. Hanya ada 2 (dua) status, yaitu: normal dan T BU admin. L aporan daftar mahasiswa ini dapat dilihat pada G ambar 15.
G ambar 15
L apor an A bsensi M ahasiswa
6. K esimpulan
1. Storyboarding dapat memberikan desain user interface lebih interaktif sebab ada gambaran interaksi yang detail dari desain tampilan. Hal ini terlihat pada contoh desain yang dikembangkan.
2. User E xperience dapat menambah kegunaan aplikasi karena dapat menyesuaikan kemampuan pengguna. Hal ini terjadi karena dalam pengembangannya user diajak berinteraksi langsung.
D aftar Pustak a
A rnowitz ,J onathan, et al, E ffective Prototyping for Sotfware Makers, C alifornia:E lsevier.inc.2006.halaman 295
A rnowitz ,J onathan, et al, E ffective Prototyping for Sotfware Makers,C alifornia:E lsevier.inc.2006.halaman 301
E dutechwiki, “Storyboarding”, diakses pada tanggal 24 F ebruari 2015 dari
http://edutechwiki.unige.ch/en/S toryboard-ing
J acob Nielsen; D on Norman. “T he D efinition of User E xperience”.
http://www.nngroup.com/articles/definition-user-experience/ (diakses 24 J anuari 2017).
Marc Hassenzahl (2014) : User E xperience and E xperience D esign. In: S oegaard, Mads and D am, R ikke F riis (eds.). "T he E ncyclopedia of Human-C omputer Interaction, 2nd E d.". A arhus, D enmark: T he Interaction D esign F oundation. https://www.interaction-design.org/literature/book/the-
encyclopedia-of-human-computer-interaction-2nd-ed/user-experience-and-experience-design/
UsabilityNet, “S toryboarding”, diakses pada tanggal 30 A gustus 2015, dari
http://www.usabilitynet.org/tools/storyboarding.htm
