LARAPSI

Antar muka pengguna

simulasi pada mesin komputasi
kinerja tinggi

PEMBIMBING
Erick Paulus
TIM FACADE
Cipto Tri Utomo
Adi Purnama
Fikri Muhammad Iqbal
ABSTRAK
Perkembangan teknologi yang pesat saat ini mengaktibatkan terciptanya berbagai
sarana yang dapat digunakan untuk memberikan informasi. Saat ini, pemodelan menjadi
salah satu kajian yang menarik dikarenakan jika dibandingkan dengan membaca data hasil
perhitungan, pemodelan memberikan sebuah gambaran visual yang lebih mudah dimengerti.
Data yang harus mencakup segala kemungkinan menjadi permasalahan dalam visualisasi.
Untuk itu, diperlukan suatu mesin komputasi kinerja tinggi atau High Performance
Computing (HPC). Namun, sebagian besar mesin komputasi kinerja tinggi masih
menggunakan Command Line Interface (CLI), yang mana tidak semua peneliti tidak biasa
menggunakannya.
LARAPSI merupakan suatu aplikasi berbasis web yang ditujukan untuk
mempermudah penggunaan mesin komputasi kinerja tinggi dalam melakukan simulasi
dengan keluaran data gambar 2D, 3D, animasi, dan video. Agar aplikasi yang dikembangkan
sesuai harapan pengguna, metode pengembangan aplikasi LARAPSI menggunakan metode
User Centered Design yang melibatkan pengguna dalam proses pengembangan aplikasi.
Beberapa fitur unggulan aplikasi LARAPSI adalah pengatur file, konversi PNG ke CVT,
tampilan konsol, mengedit kode sumber dengan editor atau GUI, serta tampilan keluaran
hasil simulasi berupa gambar 2D, 3D, animasi, dan video. Berdasarkan hasil survei, diketahui
bahwa 85,7% responden mengatakan bahwa pembuatan aplikasi simulasi berbasis web akan
sangat membantu mempermudah dalam mengakses HPC atau menyelesaikan penelitian.

Kata kunci - CLI, Data, Mesin komputasi kinerja tinggi, Pemodelan 2D, Pemodelan 3D,
Simulasi,
LATAR BELAKANG MASALAH
Seiring dengan semakin berkembangnya teknologi, terdapat berbagai sarana yang dapat
digunakan untuk menyampaikan informasi. Salah satu kajian yang menarik yaitu pemodelan.
Pemodelan menjadi hal yang mulai terkenal di dunia penelitian berbasis visualisasi karena
pemodelan lebih mudah dimengerti dibandingkan membaca data hasil perhitungan.
Pemodelan dapat merepresentasikan data menjadi sebuah bentuk visual, sehingga hasil
penelitian dapat dimengerti dengan mudah oleh orang-orang yang tidak paham dengan data
hasil perhitungan. Visualisasi menjanjikan hasil yang mampu diterima dengan mudah oleh
berbagai disiplin ilmu. Bagi para peneliti, visualisasi membantu dalam menyampaikan
informasi hasil penelitian. Begitu juga bagi praktisi, visualisasi menjadi hal akhir yang
dikejar dalam mendemonstrasikan rancangannya, sehingga bukan jadi hal langka mahasiswa
juga banyak yang mengambil topik visualisasi untuk tugas akhir.

Permasalahan dari visualisasi adalah data dan alat yang digunakan untuk melakukan
sebuah simulasi yang akurat. Data yang dipakai harus mencakup semua kemungkinan yang
terjadi. Berbicara mengenai data besar, maka alat yang mampu mengelolanya juga harus kuat
dan cepat, terutama dalam proses pembuatan visualisasi seperti pemodelan visualisasi 3D
seperti simulasi SPH (Smoothed Particle Hydrodynamics). SPH adalah metode yang
digunakan untuk melakukan simulasi fluida dinamis pada astrofisika (Cueto-Felgueroso,
Colominas, Mosqueira, Navarrina, & Casteleiro, 2004). Maka dari itu, perlu suatu mesin
komputasi dengan kinerja tinggi agar mampu mengolah dan memproses data yang besar. Hal
ini dikarenakan jika menggunakan komputer biasa, mudah sekali terjadi kesalahan atau
kerusakan.

Mesin komputasi kinerja tinggi mengacu kepada supercomputer dan teknik pemrosesan
paralel untuk menyelesaikan masalah komputasi yang kompleks. Mesin komputasi kinerja
tinggi membantu para peneliti untuk mencari solusi dari masalah komputasi, keahlian teknik,
dan bisnis (Sadiku, Musa, & Musa, 2017). Sistem komputasi kinerja tinggi biasanya dibuat
dalam lingkup kluster, menjadikan komputer ini pengelolaannya sulit, mulai dari tampilan
berupa Command Line Interface (CLI), temperatur ruangan yang harus stabil dalam suhu
rendah, jaringan yang harus kuat, konfigurasi yang sulit, perangkat lunak pendukung yang
masih minim, tegangan listrik yang besar dan harga yang mahal membuat mesin komputasi
ini dalam penggunaannya dipakai secara bersama-sama sehingga diperlukan aplikasi yang
mampu mengelola mesin komputer tersebut. Kembali pada masalah pertama yaitu
pengelolaannya mayoritas menggunakan CLI, para peneliti yang biasa menggunakan
Graphical User Interface (GUI) akan kebingungan dalam menggunakan mesin komputasi
kinerja tinggi ini.

Berdasarkan permasalahan tersebut, muncul sebuah ide untuk membuat suatu aplikasi
yang mampu mengatur simulasi visualisasi, menampilkan hasil simulasi tersebut baik dalam
bentuk 2D, 3D, animasi atau juga video bernama LARAPSI. Aplikasi LARAPSI memiliki
dua antarmuka, yaitu GUI dan CLI, sehingga semua kalangan baik peneliti, praktisi,
mahasiswa dan dosen dapat menggunakan mesin komputasi kinerja tinggi sesuai dengan
kemampuan yang dimiliki. Aplikasi ini dikembangkan menggunakan metode User Centered
Design, dengan memfokuskan pengalaman pengguna ketika menggunakan aplikasi.
Pengguna ikut terlibat dalam proses pengembangan aplikasi pada dua tahapan, yaitu pada
tahapan analisis dan tahapan evaluasi.
TUJUAN DAN HASIL YANG AKAN DICAPAI
Tujuan dan hasil yang ingin dicapai dari rancangan aplikasi ini adalah sebagai berikut:

1. membuat tampilan aplikasi untuk mesin komputasi kinerja tinggi jadi lebih
mudah digunakan;
2. membuat peneliti yang berkonsentrasi dalam simulasi visualisasi, terutama
visualisasi SPH, dapat dengan mudah memproses data penelitiannya tanpa perlu
memikirkan sintaks dan alur kerja mesin komputasi kinerja tinggi secara CLI;
3. membuat simulasi yang mampu melakukan manajemen file dengan tampilan
GUI untuk mempermudah pengguna mesin komputasi kinerja tinggi dalam
melakukan manajemen file;
4. membuat pengguna umum dapat langsung melihat hasil proses mesin komputasi
berupa visualisasi, baik visualisasi 2D atau 3D;
5. menyediakan layanan-layanan yang membantu dalam mengelola data penelitian
untuk diubah menjadi data yang diperlukan dalam simulasi seperti konversi
PNG ke CVT, mengatur kode sumber baik secara GUI atau menggunakan editor
pada aplikasi, dan menyediakan layanan konsol untuk para peneliti yang terbiasa
menggunakan CLI.
METODE PENCAPAIAN TUJUAN
Pengembangan aplikasi LARAPSI menggunakan metode User Centered Desain
(UCD). Metode ini terdiri dari 5 tahapan pekerjaan, yaitu Plan (Persiapan), Research
(Pengumpulan Data), Concept (Penerjemahan Data), Design (Desain) dan Evaluation
(Evaluasi)

Gambar 1 User Centered design. Sumber: Dokumentasi Pribadi

1. Plan (Persiapan)
Tahap persiapan mendefinisikan rencana yang akan dilakukan dalam merancang
aplikasi LARAPSI. Persiapan yang dilakukan antara lain pembagian tugas tim dan
menentukan metode pencapaian tujuan.

Dari tahap persiapan, diperoleh hasil sebagai berikut :

a. Metode pencapaian tujuan aplikasi menggunakan metode User Centered Design

dengan 5 tahapan yaitu Plan, Research dengan menggunakan teknik wawancara,
survei, dan analisis persona. Tahapan Concept menggunakan teknik story boards
dan purwarupa. Tahapan Design mendefinisikan mock up, dan tahapan
Evaluation menggunakan usability testing.
b. Pembagian tugas dalam perancangan LARAPSI menggunakan sistem tanggung
jawab setiap langkahnya. Tahapan Research dan Evaluation dipegang oleh Cipto
 Tri Utomo. Pembuatan konsep oleh Fikri Muhammad Iqbal. Tahapan design oleh
Adi Purnama.

2. Research (Pengumpulan Data)

Pengumpulan data dilakukan dengan 3 cara pengumpulan data yang pertama adalah
interviews (wawancara).
a. Interviews (Wawancara)
Wawancara dilakukan kepada 3 responden. Responden pertama adalah pembuat
sistem mesin komputasi kinerja tinggi di Universitas Padjadjaran. Responden kedua
adalah dosen yang berkaitan dengan sistem komputasi kinerja tinggi. Responden ketiga
adalah pengguna mesin komputasi kinerja tinggi. Dari hasil wawancara tersebut, dapat
ditarik kesimpulan sebagai berikut:

 Arsitektur mesin komputasi kinerja tinggi Universitas Padjadjaran dapat

dilihat pada Gambar 2.

Gambar 2 Arsitektur mesin komputasi kinerja tinggi universitas padjadjaran

Berdasarkan Gambar 2, dapat diketahui bahwa letak aplikasi berada di luar

sistem mesin komputasi kinerja tinggi. Cara aplikasi berkomunikasi dengan
mesin komputasi kinerja tinggi menggunakan protokol Secure Shell (SSH) yang
langsung masuk ke dalam kluster mesin komputasi kinerja tinggi tersebut. Di
dalam kluster tersebut terdapat beberapa node. Masing-masing node mengerjakan
tugas penting. Proses komputasi menggunakan 2 node. Proses render
menggunakan 1 buah node, sementara 1 node lagi belum digunakan. Berdasarkan
Gambar 2 juga dapat diketahui bahwa mesin komputasi tersebut di operasikan
dengan menggunakan console.
Secara ringkas, agar aplikasi dapat menggunakan mesin komputasi, aplikasi
harus mempunyai akun SSH, di mana akun tersebut nanti menjadi jembatan akses
untuk mengoperasikan mesin komputasi dari luar lingkungan kluster. Artinya,
kita dapat mengakses mesin komputasi kinerja tinggi menggunakan jaringan
Internet, sehingga pengguna mampu mengontrol HPC tersebut sebagai client.

 Bentuk Aplikasi
Setelah melakukan wawancara pada responden, diperoleh informasi terkait
bentuk aplikasi sebagai berikut.
Aplikasi yang dibutuhkan oleh administrator mesin komputasi kinerja
tinggi (pembuatnya) adalah aplikasi untuk mengontrol pemakaian mesin
komputasi, pengguna yang mampu mengunggah data tanpa sintaks, sudah
tersedia paket-paket simulasi, log pengguna yang menggunakan mesin komputasi,
notifikasi selesai proses simulasi dan eror simulasi, layanan konsol dalam GUI,
dan dapat memantau keadaan mesin komputasi.
Aplikasi yang dibutuhkan oleh peneliti, dosen dan pengguna umum mesin
komputasi adalah aplikasi yang mampu digunakan di berbagai perangkat, dapat
melakukan konversi gambar menjadi bentuk koordinat (CVT) secara otomatis,
dapat melakukan kolaborasi dengan peneliti yang lain, mengurus berkas di mesin
komputasi dan melihat hasil visualisasi langsung baik itu tampilan 2D, 3D,
animasi atau video, dapat melakukan multi proses supaya dapat langsung
mengantrekan berbagai macam proyek, dan dapat menerima notifikasi dari mesin
komputasi baik itu melalui email atau dari aplikasi itu sendiri.

 Tampilan Aplikasi
Setelah melakukan wawancara pada responden, dapat ditarik kesimpulan
bahwa peneliti kebanyakan orang-orang yang relatif tua. Kebanyakan dari mereka
menginginkan tampilan aplikasi yang mudah dibaca tulisannya, warnanya jelas
dibedakan, dan memberikan informasi jika permintaan dari aplikasi mendapatkan
 respon yang lama dari mesin komputasi. Intinya, responden menginginkan
tampilan aplikasi yang minimalis, dan dikarenakan mayoritas pengguna HPC
menggunakan sistem operasi Windows, para responden menyarankan tata letak
tombol-tombol tidak jauh berbeda dengan sistem operasi Windows, seperti
tombol tutup aplikasi berada di pojok kanan atas.

b. Survey (Survei)
Survei dilakukan untuk memperoleh data dari pengguna mesin komputasi kinerja
tinggi lain, pengguna perangkat lunak simulasi, peneliti simulasi visualisasi, dan para
pengembang. Kami melakukan survei dengan teknik survei digital. Metode sampling
yang digunakan adalah simple random sampling.

 Instrumen/pertanyaan survei yang kami lakukan :

- Apa profesi Anda? (A. Mahasiswa, B. Peneliti, C. Praktisi, D. Dosen)
- Apa tingkat pendidikan Anda? (A. SMP, B. Sarjana, C. Magister, D.
Doktor)
- Apa fokus penelitian Anda? (A. Geofisika, B. Fisika, C. Kimia, D.
Biologi, E. Matematika, F. Statistika, G. Ilmu Komputer)
- Apakah Anda menggunakan alat komputasi dalam penelitian Anda?
(A. Iya B. Tidak)
- Jika Anda menjawab Ya, alat komputasi apa yang Anda gunakan
untuk penelitian Anda? (A. LAMMPS, B. Matlab, C. Scilab, D.
Python E. lainnya)
- Apakah Anda menggunakan mesin komputasi kinerja tinggi/High
Performance computing (HPC) dalam penelitian Anda?
- Apa yang biasa Anda gunakan untuk mengakses HPC? (A. Terminal,
B. Website, C. Mobile app)
- Apakah alat komputasi gampang untuk dipelajari? (A. Iya, B. Tidak)
- Jika ada aplikasi simulasi berbasis web, apakah itu akan
mempermudah Anda dalam mengakses HPC atau menyelesaikan
penelitian Anda? (A. Iya, B. Tidak)
- Fitur apa yang harus ditambahkan pada aplikasi tersebut? (A. Import
Data, B. Graph Model, C. Template Simulation, D. Modification
 Simulation, E. Download Result Simulation, F. View
Result Simulation, G. Access Terminal, H. File
Manager)
- Di mana Anda biasanya menemukan menu bar pada suatu aplikasi?
(A. Di samping kiri, B. Di samping kanan, C. Di atas konten )
- Apa Favorit UI design Anda? (A. Skeumorphism, B. Flat design, C.
Material design)

 Hasil survei :
Setelah menyebarkan survei selama 22 hari, diperoleh 21 responden dengan
hasil survei sebagai berikut:
- Apa profesi Anda? (Gambar 3)

Gambar 3 Hasil survei profesi

- Apa tingkat pendidikan Anda? (Gambar 4)

Gambar 4 Hasil survei tingkat pendidikan responden

- Apa fokus penelitian Anda? (Gambar 5)

Gambar 5 Hasil suvei fokus peneltian

- Apakah Anda menggunakan alat komputasi dalam penelitian Anda?
(Gambar 6)

Gambar 6 Hasil survei penggunaan alat komputasi

- Jika Anda menjawab Ya, alat komputasi apa yang Anda gunakan
untuk penelitian Anda? (Gambar 7)

Gambar 7 Hasil survei jenis alat komputasi yang digunakan responden

- Apakah Anda menggunakan mesin komputasi kinerja tinggi/High

Performance computing (HPC) dalam penelitian Anda? (Gambar 8)

Gambar 8 Hasil survei penggunaan HPC

- Apa yang biasa Anda gunakan untuk mengakses HPC? (Gambar 9)

- Apakah alat komputasi gampang untuk di pelajari? (Gambar 10)

Gambar 10 Hasil survei kesusahan alat komputasi

- Jika ada aplikasi simulasi berbasis web apakah itu akan

mempermudah Anda dalam mengakses HPC atau menyelesaikan
penelitian Anda? (Gambar 11)

Gambar 11 Hasil surveri HPC berbasis Web

- Fitur apa yang harus ditambahkan pada aplikasi tersebut? (Gambar

12)

Gambar 12 Hasil survei fitur yang harus ada pada aplikasi

 - Di mana Anda biasanya menemukan menu bar pada suatu aplikasi?
(Gambar 13)

Gambar 13 Hasil survei letak menu bar

- Apa favorit UI design Anda? (Gambar 14)

Gambar 14 Hasil survei favorit UI

 Analisis Persona
Survei dilakukan pada lingkungan kampus Universitas Padjadjaran dan
sebagian instansi yang mempunyai mesin komputasi kinerja tinggi. Proses
analisis pengguna melibatkan 21 responden survei yang terdiri atas 20 mahasiswa
dan 2 orang peneliti. Selain itu, analisa pengguna juga melibatkan 3 responden
wawancara yang terdiri 1 orang expert dan 2 orang dosen sekaligus peneliti.
Tabel 1 menjelaskan hasil dari analisis persona perancangan aplikasi LARAPSI.
Diketahui bahwa mesin komputasi kinerja tinggi atau sering di sebut HPC ini
memang menjadi barang langka bagi mereka terutama bagi mahasiswa. Dari hasil
survei, hanya 8 responden yang menggunakan HPC pada penelitiannya. Hasil
survei juga menunjukkan CLI begitu mudah dipelajari hal ini terjadi karena
responden mayoritas berada di disiplin ilmu-ilmu komputer dan geofisika yang
mayoritas menggunakan CLI dalam penulisan source code. Namun, jika
demikian, ide untuk membuat website dalam pengurusan HPC adalah ide yang
 sangat mereka apresiasi. Responden juga menyarankan agar tampilan yang
diusung lebih ke arah flat design dengan ciri desain sederhana, minimalis, namun
elegan. Hal ini menjadikan tampilan desain lebih enak dipandang, terlebih warna-
warna dari flat design ini cenderung tidak menyakiti mata dibandingkan dengan
tampilan design skeumorphism yang lebih mengedepankan aero glass dan 3D
embos sehingga agak kurang jelas untuk dipandang apalagi digunakan bagi
peneliti yang sudah tergolong tua.

TABEL 1 ANALISIS PERSONA APLIKASI

Profesi Pelajar Peneliti Praktisi Dosen
Pendidikan SMA, Sarjana Magister, - Magister,
Doktor Doktor
Fokus penelitian 47% 70% - 50%
Geofisika
Fokus penelitian 38% - - 50%
Ilmu komputer
Fokus penelitian 5 % - - -
Statistika
Fokus penelitian 5 % - - -
Kimia
Fokus penelitian - - - -
Ekonomi
Fokus penelitian 5 % 30% - -
Biologi
Menggunakan 70% 100% - 100%
computational Tool
Menggunakan HPC 40% 100% - 100%
Mengakses HPC 40% 100% - 100%
dengan terminal
Mengakses HPC 20% - - -
dengan
menggunakan
Website
Mengakses HPC 20% 50% - -
dengan
menggunakan
Mobile apps
Fitur yang harus Import Data, Import Data, - Import Data,
ada Graph Model, Graph Model, Graph Model,
Template Template Template
Simulation, Simulation, Simulation,
Modification Modification Modification
Simulation, Simulation, Simulation,
Download Result Download Download
Simulation, Result Result
View Simulation, Simulation,
Result Simulation, View Result View Result
Access Terminal, Simulation, Simulation,
File Manager Access Access
Terminal, Terminal,
File File
Manager Manager
Menubar di 73% 0% - -
samping kiri
Menubar samping 15 % 0% - -
kanan
Menubar di atas 5% 100% - 100%
Desain 20% 0% 0%
Skeumorphism
Desain Flat Design 50% 100% 100%
Desain Material 30% 0 0
Design
3. Concept
Pada bagian concept dijelaskan hasil mengekstrak informasi dari tahapan
research menjadi sebuah bentuk storyboard.
Item-item yang diperlukan berdasarkan hasil research adalah :
Halaman Login/signup
Halaman ini merupakan halaman
awal untuk mengakses aplikasi.
Pengguna dapat masuk ke dalam
aplikasi setelah melakukan
pendaftaran. Beberapa informasi
yang diperlukan untuk
pendaftaran adalah email, nama
dan kata sandi.

Halaman Ruang Kerja

(Workspace)
Pada halaman ini, pengguna
dapat membuat ruang kerja,
menambahkan kolaborator, dan
menampilkan ruang kerja yang
telah dibuat.

Modal Tambah Ruang Kerja

Modal ini berisi form di mana
pengguna dapat melakukan
pengisian data yang diperlukan
untuk membuat sebuah ruang
kerja baru.

Halaman Layanan
Halaman ini berisi layanan-
layanan yang diperlukan oleh
pengguna seperti pengatur file,
memilih layanan pekerjaan
(jobs), konsol, keluaran (output)
dan konversi PNG.
Halaman Pekerjaan (Jobs)
Halaman ini berisi daftar antrean
kode sumber yang dieksekusi
oleh HPC. Di halaman ini,
pengguna dapat menambahkan
pekerjaan yang akan dilakukan.

Halaman Kumpulan Simulasi

Halaman ini berisi kumpulan
simulasi yang dapat dieksekusi
oleh HPC. Pengguna dapat
dengan bebas memilih layanan
simulasi yang tersedia, kemudian
data yang dipilih akan direkam
dan digunakan pada templat
penulisan kode pekerjaan.

Halaman Cara Menulis Kode

Sumber
Halaman ini berisi 3 cara
penulisan kode sumber, yaitu
menggunakan templat, pengedit
kode, dan GUI. Pengguna bisa
bebas memilih untuk menulis
kode sumber sesuai 3 pilihan
tersebut.

Halaman Templat Kode

Sumber
Halaman ini berisi templat kode
sumber sesuai simulasi yang telah
dipilih di halaman kumpulan
simulasi.
Halaman Pengedit Kode
Halaman ini berisi jendela
pengedit kode sehingga pengguna
bebas menuliskan source code.

Halaman Kode dengan GUI

Halaman ini berisi cara
menuliskan kode namun dengan
menggunakan GUI, sehingga
pengguna hanya memilih sintaks
yang digunakan. Sintaks dapat
disusun dengan metode drag and
drop, mengisi judul pekerjaan dan
kemudian dikirim.

Halaman Konversi Gambar ke

CVT
Halaman ini berisi layanan untuk
melakukan konversi dari ekstensi
PNG ke dalam bentuk daftar
koordinat. Pengguna dapat
mengunggah file dari komputer
lokal atau mengambil data dari
pengatur file pada aplikasi yang
telah disediakan.
Halaman Konsol
Halaman ini berisi halaman
konsol untuk mengakses HPC
secara CLI. Halaman ini
disediakan bagi pengguna yang
terbiasa menggunakan CLI.
Pengguna juga bisa membuat
pekerjaan, mengonversi gambar
dan melihat keluaran di peramban
mereka.
 Halaman Keluaran
Halaman ini berisi tampilan hasil
dari proses HPC secara 2D, 3D,
animasi dan video. Pada halaman
ini, pengguna dapat mengunduh,
melihat langsung, atau mengubah
tampilan dari 2D ke 3D atau
animasi ke video.

Berdasarkan informasi tersebut dapat diketahui halaman-halaman yang harus

dibuat dan didesain di tahap selanjutnya.

4. Design (Desain)
Bagian desain menjelaskan pembuatan rancangan UX dan UI yang diambil dari tahapan
konsep, kemudian disesuaikan dengan aliran desain yang digunakan. LARAPSI
menggunakan aliran desain flat design. Flat design adalah gaya desain antarmuka yang
menekankan pada penggunaan minimum elemen yang memberikan ilusi tiga dimensi (seperti
penggunaan bayangan, gradien, atau tekstur), dan difokuskan pada penggunaan elemen
sederhana, tipografi, dan warna datar minimalis. Rincian desain aplikasi LARAPSI adalah
sebagai berikut :
a. Halaman Login
Concept

Mockup
 UX
Halaman Login
− Tombol login terdapat efek fluid bila ditekan untuk memberikan informasi
bahwa tombol tersebut sudah ditekan.
− Pada formulir, terdapat formulir auto fokus di mana akan ada highlight di bagian
bawah form input yang akan diisi untuk menandakan bahwa form tersebut aktif
− Setelah menekan tombol login, muncul halaman loading sebagai bentuk
pemberitahuan bila data yang dikirim sedang diproses

b. Halaman ruang kerja (Workspace)

Concept

Mockup
 UX
Halaman Ruang Kerja (Workspace)
− Tampilan kartu ruang kerja ditampilkan per baris maksimal 3 buah kartu. Dalam
kartu terdapat judul, tanggal dibuat, dan deskripsi pekerjaan. Tombol open
didesain sama dengan tombol login untuk menandakan bahwa tombol sudah
diklik dan kartu bisa dicari dengan mengisikan kata atau kalimat yang ingin
dicari di search bar.
− Tombol logout berada di pojok kanan atas. Tombol logout akan muncul jika di-
hover atau diklik.
− Tombol Add Workspace merupakan tombol pemicu untuk mengeluarkan modal
dengan efek fluid bila telah diklik/
− Older/Newer jika diklik akan menggeser ke arah yang ditunjukkan oleh panah
tombol. Misal, bila diklik ke arah newer maka akan menyembunyikan kartu
pertama dan akan memuat ulang kartu keempat untuk ditampilkan.

c. Modal Add Workspace

Concept

Mockup
 UX
Modal Add Workspace
− Form terdapat highlight untuk form active.
− Tombol add/close memiliki efek fluid bila ditekan.

d. Halaman Layanan
Concept

Mockup

UX
Halaman Layanan
− Tombol layanan (Jobs, PNG to CVT, Console, Output) masih memakai efek
yang sama, yaitu fluid bila ditekan.
− Tampilan pengatur file disesuaikan dengan Windows Explorer. Jika file atau
folder diklik kanan, pengguna dapat mengganti nama, menghapus, menyalin, dan
mimindahkan file atau folder. Khusus untuk file, jika file diklik kanan maka
pengguna dapat mengunduh file.
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.

e. Halaman Jobs
Concept

Mockup

UX
Halaman Jobs
− Pada kartu jobs terdapat daftar job yang dapat di-scroll. Tampilan awal
menampilkan 7 pekerjaan. Pengguna dapat menambahkan pekerjaan dengan cara
klik ikon “+” di pojok kanan atas kartu jobs.
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

f. Halaman Kumpulan Simulasi

Concept
 Mockup

UX
Halaman Kumpulan Simulasi
− Terdapat gambar simulasi yang dapat diklik. Jika di-hover, kursor berubah
menjadi kursor click.
− Tombol nama simulasi memiliki efek fluid setelah diklik.
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

g. Halaman Cara Menulis Kode Sumber

Concept

Mockup
 UX
Halaman Cara Menulis Kode Sumber
− Terdapat gambar cara menulis kode sumber yang bisa diklik. Jika tombol di-
hover, kursor berubah menjadi kursor klik.
− Tombol nama cara menulis kode sumber (using template, using code editor dan
using GUI) memiliki efek fluid setelah diklik.
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

h. Halaman Templat Kode Sumber

Concept

Mockup

UX
Halaman Templat Kode Sumber
− Di dalam kartu terdapat form di mana jika diklik akan ada highlight di bawah
form input yang aktif (pada form input title)
− Pada kartu juga bisa langsung melakukan penggantian variabel kode sumber
yang sesuai dengan simulasi yang dipilih. Pengguna mengganti variabel-variabel
dan terdapat interaksi scroll bila tampilan tidak cukup di layar.
− Tombol execute memiliki efek fluid setelah diklik
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

i. Halaman Pengedit Kode

Concept

Mockup

UX
Halaman Pengedit Kode
− Di dalam kartu terdapat form dimana bila diklik akan ada highlight di bawah
form input yang aktif (pada form input title).
− Pada kartu juga bisa langsung menulis kode sumber seperti menulis kode sumber
pada pengedit kode lainnya. Scroll bar akan muncul bila penulisan kode sumber
 melebihi tampilan yang disediakan.
− Tombol execute memiliki efek fluid sesudah diklik.
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

j. Halaman Kode dengan GUI

Concept

Mockup

UX
Halaman Kode dengan GUI
− Pada halaman ini terdapat perintah-perintah yang tersedia. Jika ikon “+” pada
perintah diklik, maka perintah tersebut akan pindah ke kolom used dan
parameter bisa langsung dimasukkan.
− Kolom used terdapat interaksi drag and drop untuk menyusun perintah.
− Kolom parameter terdapat parameter yang dapat diubah nilainya. Parameter
ditampilkan dalam bentuk form. Highlight form focus juga terdapat pada form
ini.
− Tombol Delete dan Submit memiliki efek fluid setelah diklik.
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

k. Halaman Konversi PNG ke CVT

Concept

Mockup

UX
Halaman Konversi PNG ke CVT
− Pada kartu konversi PNG ke CVT, terdapat drop down nama file gambar.
Gambar yang ditampilkan sebanyak 7 gambar. Jika terdapat lebih dari 7 gambar,
maka pengguna dapat melakukan scroll pada drop down nama file gambar.
− Bentuk form pada kartu masih memiliki efek highlight form focus
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

l. Halaman Konsol
Concept
 Mockup

UX
Halaman Konsol
− Halaman konsol terdapat terminal dengan tampilan terminal dan cara kerja
terminal seperti terminal pada umumnya.
− Tombol jobs, pngtocvt dan output memiliki efek fluid setelah diklik.
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

m. Halaman Keluaran
Concept

Mockup
 UX
Halaman Keluaran
− Kartu select job digunakan untuk memilih jobs yang telah selesai diproses oleh
HPC. Kartu ini berisi drop down maksimal 7 daftar. Jika lebih dari 7, maka
selebihnya menggunakan scroll.
− 2D View berisi kumpulan frame gambar hasil proses HPC dengan interaksi
zoom in dan zoom out menggunakan scroll pada mouse atau gestur 2 jari pada
layar touch screen.
− Video preview berisi pemutar video yang mampu memutar animasi dan video
dengan ukuran standar.
− 3D view bisa dilakukan scrolling xyz dengan menekan dan men-slide pada
gambar.
− Tombol memiliki efek fluid setelah diklik.
− Menampilkan tombol logout dengan hover atau klik ikon di pojok kanan atas.
− Dapat mencari pekerjaan dengan memasukkan kata kunci di search bar.

Setelah rancangan desain dibangun, langkah selanjutnya adalah pembuatan purwarupa

(prototype).

5. Evaluation (Evaluasi)
Evaluasi menggunakan evaluasi penggunaan (usability) yang akan dilakukan bila
purwarupa sudah terbentuk. Pengujian kebergunaan merupakan metode yang melibatkan
pengguna langsung (Ghazali,Ariffin,&Omar,2014) atau sekelompok pakar user interface
untuk mengevaluasi tingkat kemudahan suatu produk aplikasi ketika digunakan (Nielsen,
1993). Selanjutnya, Nielsen mendefinisikan evaluasi kebergunaan ke dalam 5 komponen
(Mazumder & Das, 2014), yaitu:
 a. Learnability, merupakan komponen tentang seberapa mudah pengguna dapat
menjalankan tugasnya ketika pertama kali menggunakan aplikasi tersebut.
b. Efficiency, merupakan komponen tentang seberapa besar kinerja pengguna ketika
menggunakan aplikasi untuk menjalankan tugasnya.
c. Memorability, merupakan komponen tentang seberapa cepat atau mahir pengguna
dapat menjalankan tugasnya ketika menggunakan aplikasi untuk kedua kali atau
seterusnya.
d. Errors, merupakan komponen tentang seberapa banyak kesalahan yang
dihasilkan oleh sistem dan seberapa mudah pengguna dapat mengatasi kesalahan
tersebut.
e. Satisfaction, merupakan komponen tentang seberapa nyaman pengguna terhadap
tampilan aplikasi.
Metode perhitungan evaluasi kegunaan menggunakan skala Likert dengan kriteria
bobot nilai 1 (sangat rendah), 2 (rendah), 3 (netral), 4 (tinggi), dan 5 (sangat tinggi).
Persamaan (1) menunjukkan formulasi perhitungan persentase indeks untuk setiap komponen
kebergunaan.

Rumus Index % = Total Skor / Y x 100

Y = jumlah responden *Skor tertinggi Likert (Angka Tertinggi adalah 5)

ANALISIS DESAIN KARYA
1. Target Desain
Berdasarkan hasil research yang telah dilakukan, terdapat beberapa target pengguna
utama aplikasi LARAPSI, yaitu:
a. Mahasiswa
Mahasiswa yang dimaksud di sini adalah mahasiswa yang mengambil tugas akhir
simulasi, terutama simulasi dalam bidang studi geofisika dan ilmu komputer. Hal ini
dikarenakan mahasiswa tersebut akan membutuhkan mesin komputasi kinerja tinggi
jika dalam penelitiannya menggunakan data yang besar dan hasilnya ingin disajikan
dalam bentuk 3D, atau video data tersebut harus di-render dengan kartu grafis yang
tinggi.
b. Peneliti
Peneliti menjadi sasaran dari aplikasi LARAPSI, terutama peneliti yang bergerak
dalam bidang pemodelan data. Mesin komputasi kinerja tinggi sangat diperlukan
supaya bisa memvisualisasikan hasil penelitian secara halus dan berbentuk 3D serta
cepat dalam memproses data.
c. Dosen
Dosen menjadi sasaran dari aplikasi LARAPSI, terutama dosen yang
mengajarkan mesin komputasi kinerja tinggi di ilmu komputer dan pemodelan simulasi
di geofisika. Hal ini menjadi kesempatan yang besar untuk mengajarkan cara
penggunaan mesin komputasi kinerja tinggi dengan cara yang baru.
d. Praktisi
Praktisi menjadi sasaran dari aplikasi LARAPSI, terutama praktisi yang bekerja
dalam bidang-bidang geofisika. Hal ini dikarenakan visualisasi sangat berguna untuk
melaporkan hasil kerja yang telah dilakukan kepada orang yang kurang begitu mengerti
terhadap hasil yang berupa perhitungan saja.
2. Batasan Produk
a. Aplikasi hanya dibuat untuk situs web.
b. Aplikasi membutuhkan koneksi internet agar bisa diakses.
c. Perintah-perintah pada GUI belum sepenuhnya ada.
 d. Pengedit kode masih berupa text area, untuk itu snippet dan plugin belum bisa
digunakan seperti auto complete.
e. Simulasi yang tersedia untuk sekarang hanya simulasi SPH (fluida).
f. Responsif layar hanya mampu mengatasi hingga layar 6 inci.
3. Perangkat Keras yang Digunakan
Perangkat keras yang kami gunakan dalam uji coba aplikasi adalah sebagai berikut:
a. Laptop Macbook Pro 2015
 Layar retina display 13,3 inch
 Prosesor 2,7 Ghz
 RAM 8 GB
 MacOs high sierra
 Wifi nirkabel Wi-Fi 802.11ac

b. Tablet Huawei Mediapad T2

 Layar IPS 7 inch
 ProsessorQuad-core 1.5 GHz Cortex-A7
 RAM 2 GB
 OS Android v6.0 (Marshmallow)
 Wi-Fi 802.11 b/g/n, Wi-Fi Direct

c. Oppo f3+
 Layar IPS 6 inch
 Octa-core (4x1.95 GHz Cortex-A72 & 4x1.44 GHz Cortex-A53)
 6 GB RAM
 OS Android 6.0 (Marshmallow)
 Wi-Fi 802.11 a/b/g/n/ac, dual-band

d. Asus E202SA
 Layar LCD LED backlight 11,6
 Prosesor Intel Celeron N3050 dual-core 1,6GHz TurboBoost 2,16GHz
 RAM 2GB DDR3L 1600MHz
 OS Windows 10
 Wifi nirkabel Wi-Fi 802.11ac
SKENARIO PENGGUNAAN RANCANGAN PRODUK
Skenario penggunaan rancangan produk disertakan dalam sebuah studi kasus paling
menonjol dari aplikasi LARAPSI, yaitu menuliskan kode sumber dan melihat hasil mesin
komputasi kinerja tinggi.

1. Penulisan kode sumber

Persona : Diki
Umur : 20 tahun
Profesi : Mahasiswa Ilmu Komputer
Platform : Macbook Pro 13,3 inch
Skenario:
Pengguna membuka halaman LARAPSI di peramban menggunakan Chrome
Version 68.0.3440.106 (Official Build) (64-bit). Pengguna melakukan login,
memasukkan email dan password yang telah di berikan oleh admin. Setelah login,
pengguna masuk ke halaman ruang kerja.
Ketika pengguna memilih add simulation, muncul modal berisi form judul
simulasi, deskripsi, colabolator dan project manajer. Setelah mengisi semua field,
pengguna mengklik add, kemudian pengguna kembali pada halaman workspace dan
terlihat daftar workspace yang baru ditambahkan. Pengguna menekan tombol open dan
melihat tampilan layanan.
Pada tampilan tersebut, pengguna memilih layanan pekerjaan dan pengguna juga
diarahkan ke halaman pekerjaan. Pengguna menambahkan pekerjaan baru dengan
mengklik tombol add job. Kemudian pengguna memilih simulasi SPH dan memilih
penulisan kode sumber menggunakan templat. Pengguna mengklik tombol execute,
kemudian diarahkan ke halaman pekerjaan dan menunggu status pekerjaan selesai.
Pengguna logout.

2. Melihat hasil simulasi mesin komputasi kinerja

tinggi Persona : Diki
Umur : 20 tahun
Profesi : Mahasiswa ilmu komputer
Platform : Macbook Pro 13,3 inch
Skenario :
Pengguna membuka halaman LARAPSI di peramban menggunakan Chrome
Version 68.0.3440.106 (Official Build) (64-bit). Pengguna melakukan login,
memasukkan email dan password yang telah di berikan oleh admin. Setelah login,
pengguna masuk ke halaman ruang kerja.
Pengguna membuka ruang kerja yang sudah dibuat sebelumnya dengan mengklik
open pada kartu ruang kerja yang diinginkan. Pengguna kemudian akan masuk ke
halaman layanan. Pada halaman ini, pengguna memilih layanan keluaran (output) dan
diarahkan ke halaman tersebut. Pada halaman keluaran, pengguna memilih pekerjaan
yang ingin dilihat keluarannya. Pekerjaan yang telah dibuat ditampilkan dalam menu
drop down. Setelah pengguna mengklik select, maka tampilan video muncul. Pengguna
memilih frame di form gambar. Gambar yang diinginkan akan ter-render sesuai frame.
Dengan mengklik 3D, maka pengguna akan melihat tampilan 3D. Untuk mengunduh,
pengguna mengklik tombol download. Pengguna logout.
DAFTAR PUSTAKA

Cueto-Felgueroso, L., Colominas, I., Mosqueira, G., Navarrina, F., & Casteleiro, M. (2004).
On the Galerkin formulation of Smoothed Particle Hydrodynamics. International
Journal for Numerical Methods in Engineering, 60, 1475–1512.

Ghazali, M., Ariffin, N. A. M., & Omar, R. (2014). User centered design practices in
healthcare: A systematic review. In 2014 3rd International Conference on User
Science and Engineering (i-USEr) (pp. 91–96). https://doi.org/10.1109/
IUSER.2014.7002683

Mazumder, F. K., & Das, U. K. (2014). Usability Guidelines For Usable User Interface.
International Journal of Research in Engineering and Technology, 3(9), 2319–
2322.

Nielsen, J. (1993). Usability Engineering. New York: Academic Press.

Paulus, E., Nawawi, R., Mira, S., Undang A.D., & Setiawan, H. (2018). Jurnal
Sosioteknologi. Jurnal Sosioteknologi, FSRD – ITB. Bandung, ISSN 1858 – 3474

Sadiku, M. N. O., Musa, S. M., & Musa, O. M. (2017). High-Performance Computing : A

Primer, 4(10), 4661–4663.