Abstrak—Networking  semasa  studi  menjadi  kebutuhan  utama mahasiswa dalam menopang karirnya di masa depan. Kekuatan jaringan  yang  luas  tentunya  dapat  memudahkan  langkah mahasiswa  dalam  pengembangan  kemampuannya  di  bidang masing-masing. Saat ini, ITS telah mengakomodir pengembangan  karir  mahasiswa  melalui  lembaga  PPK-SAC yang  menaungi  kegiatan  perencanaan  karir  bagi  mahasiswa ITS.  Akan  tetapi,  celah  antar  sesama  mahasiswa  masih didapatkan.  Celah  ini  dapat  menjembatani  minat  yang  saling berkaitan  untuk  pengembangan  karir  para  mahasiswa.  Maka dengan  itu,  modul  Komunitas  myITS  Connect  dibuat  dengan harapan  dapat  menjadi  wadah  dalam  pengembangan  minat mahasiswa.  Modul  yang  mengandung  fitur  media  sosial  ini dirancang  untuk  saling  menghubungkan  mahasiswa  dalam menjejakkan portofolio karirnya. Dengan latar belakang calon pengguna  yang  merupakan  mahasiswa  dari  berbagai  bidang studi  yang  ada  di  ITS,  pendekatan  yang  terbaik  diperlukan untuk  memudahkan  penggunaan  aplikasi  ini.  Metode  User- centered  Design  dimana  setiap  fase  pengembangan  yang dilakukan berpusat kepada pengguna menekankan kebutuhan dan  kondisi  pengguna.  Pengembangan  antarmuka  pengguna myITS Connect modul Komunitas dilakukan dengan membuat sketsa  untuk  diimplementasikan  sebagai  halaman  front-end aplikasi pada akhirnya.
Kata  Kunci—myITS  Connect,  Komunitas,  User-Centered Design.

## I. PENDAHULUAN
ENGGUNAAN internet sebagai media komunikasi saat ini  telah  menjadi  hal  utama  bagi  manusia.  Salah  satu kegiatan  dalam  berselancar  di  dunia  maya  yang  menjadi proporsi  terbesar  yaitu  penggunaan  media  sosial  dalam membentuk  komunitas  yang  besar  di  internet. Facebook , platform media sosial terbesar di dunia, memiliki 2,4 miliar pengguna. Platform media sosial lainnya termasuk Youtube dan Whatsapp juga masing-masing memiliki lebih dari satu miliar  pengguna.  Dengan  populasi  penduduk  dunia  saat  ini sejumlah  7,7  miliar  orang  dan  pengguna  internet  aktif  di dunia  sejumlah  3,5  miliar  pengguna,  ini  menunjukkan platform media sosial digunakan oleh satu dari tiga orang di dunia,  dan  lebih  dari  dua  pertiga  dari  semua  pengguna internet.
Saat  ini  media  sosial  memiliki  rentang  pengguna  yang bervariasi,  dengan  proporsi  pengguna  generasi  Millenial sebesar  90%  dari  total  populasi  Millenial  di  dunia,  diikuti generasi  X  sebesar  77.5%,  dimana  merupakan  klasifikasi generasi pada mahasiswa saat ini. Dengan jumlah pengguna media sosial dengan komunitas di dalamnya yang besar pada generasi yang saat ini menjadi mahasiswa, akan memudahkan rencana dari implementasi modul Komunitas
dari  myITS  untuk  meningkatkan  jaringan  komunikasi mahasiswa di lingkungan ITS. Terlebih lagi saat ini Indonesia juga  merupakan  negara  dengan  pengguna social  network untuk  kegiatan  terkait  bisnis  terbesar  di  dunia,  dengan persentase sebesar 65% dari seluruh pengguna sosial media di  Indonesia.  Ini  merupakan  jumlah  yang  besar  jika dibandingkan  negara  seperti  Amerika  Serikat  yang  hanya 27%  pengguna  sosial  medianya  yang  dimanfaatkan  sebagai media kegiatan profesional.
Networking selama menjadi mahasiswa menjadi kebutuhan  utama  dalam  menopang  karir  kedepannya. Dengan  kekuatan  jaringan  yang  luas,  tentunya  dapat memudahkan langkah dalam  mengembangkan kemampuan pada  bidang  masing-masing  mahasiswa.  ITS  dalam mengakomodir pengembangan karir mahasiswa sebelumnya telah memiliki lembaga PPK-SAC yang menaungi kegiatan konseling,  pemetaan,  hingga  perencanaan  karir  bagi mahasiswa  ITS.  Akan  tetapi  masih  terdapat  celah  antar sesama  mahasiswa  ITS  dalam  menjembatani passion yang saling  berkaitan  untuk  pengembangan  karir  mahasiswa. Maka melalui modul Komunitas myITS Connect diharapkan dapat menjadi wadah dalam pengembangan minat mahasiswa melalui  komunitas  di  dalam  media  sosial  yang  dirancang untuk saling menghubungkan mahasiswa dalam menjejakkan portofolio karirnya.
Dengan latar belakang calon pengguna modul Komunitas pada  myITS  Connect  yang  merupakan  mahasiswa  dari berbagai  bidang  studi  yang  ada  di  ITS,  maka  perlu pendekatan  yang  terbaik  untuk  memudahkan  mahasiswa dalam menggunakan aplikasi ini. Pendekatan User-centered Design dimana  di  setiap  fase,  setiap  langkah  yang  diambil berpusat  kepada  pengguna,  serta  ditekankan  kepada kebutuhan  dan  kondisi  pengguna.  Semua  dirancang  agar sesuai dengan kebiasaan pengguna berinteraksi, senatural dan seefisien  mungkin.  Metode  yang  digunakan  harus  bisa mendapatkan  data  yang  sesuai  dengan  kondisi  lapangan, bagaimana  pengguna  menggunakan  sistem  tersebut,  dan batasan  yang  pengguna  alami  ketika  menggunakan  aplikasi tersebut.
Hasil  dari  penelitian  untuk  Tugas  Akhir  ini  diharapkan dapat menghasilkan aplikasi yang mengedepankan kebutuhan  dan  pengalaman  pengguna  sehingga  dapat meningkatkan  kualitas networking antar  mahasiswa  ITS melalui  penggunaan  aplikasi  myITS  Connect  pada  modul Komunitas.  Perancangan  antar  muka  yang  menarik  dan mudah  dipahami  dapat  meningkatkan engagement dari pengguna sehingga diharapkan aplikasi ini dapat bermanfaat bagi pengembangan karir mahasiswa ITS.

## Desain dan Evaluasi Antarmuka Pengguna Responsif myITS Connect Modul Komunitas Menggunakan Metodologi User-Centered Design
Jaler Dio Fadhilah, Hadziq Fabroyir, dan Rizky Januar Akbar Departemen Teknik Informatika, Institut Teknologi Sepuluh Nopember (ITS)
e-mail : hadziq@if.its.ac.id
P

## II. TINJAUAN PUSTAKA

## A. Perancangan Pengalaman Pengguna
Perancangan  pengalaman  pengguna,  atau  lebih  dikenal dengan User  Experience  Design (UX  Design),  merupakan cara  yang  mengutamakan  penggunanya  dalam  mendesain sebuah produk [1]. Didefinisikan oleh Don Norman, ilmuwan yang  berfokus  pada  ilmu  kognitif  dan co-founder dari “Nielsen Norman Group Design Consultancy”, menyatakan bahwa  UX  Design  mencakup  semua  aspek  interaksi pengguna  aplikasi  dengan  perusahaan,  layanannya,  dan produknya.  Dari  definisi  ini,  UX  Design  tidak  selalu berkaitan  dengan  bidang  teknologi  digital.  Melalui  definisi Don  Norman  tersebut,  UX  Design  mencakup  seluruh interaksi yang berhubungan langsung dengan pelanggan dan penyedia  layanannya.  Maka  dari  itu,  dalam  perancangan pengalaman  pengguna  harus  memperhatikan  kualitas interaksi  pengguna  dan  juga  kebutuhan  perusahaan  dalam menawarkan produknya, sehingga menghasilkan experience yang berkesan bagi penggunanya.
B. User-Centered Design
User-Centered  Design (UCD)  atau  proses  desain  yang berpusat pada pengguna, merupakan proses penguraian fase- fase  pada  siklus  desain  dan  pengembangan  yang  berfokus untuk  mendapatkan  pemahaman  pengguna  produk.  UCD memiliki  standar  internasional  yang  terangkum  pada  ISO 9241-210:2019 tentang  “ Human-centred design for interactive  systems ”  [2] . Pada  dasarnya,  proses  pada  UCD tidak  memiliki  metode  yang  spesifik  pada  setiap  fasenya. Terdapat  beberapa  prinsip  yang  mendasari  desain  yang berfokus pada pengguna. Desain didasarkan pada pemahaman tentang pengguna, kegiatan yang dilakukan, dan lingkungannya. Dilanjutkan dengan evaluasi dari pengguna, dan  membahas  pengalaman  pengguna  secara  keseluruhan. Proses ini melibatkan pengguna di seluruh proses desain dan pengembangan  dan  ini  dilakukan  secara  berulang-ulang hingga  menghasilkan  kepuasan  atas  sistem  yang  dibangun dari penggunanya.

## C. Persona
Persona  adalah  alat  yang  berguna  untuk  mensimulasikan peran dari pengguna aplikasi. Merupakan karakter fiksi yang dibuat,  persona  dibentuk  berdasarkan  penelitian  yang dilakukan untuk mewakili jenis pengguna berbeda yang akan menggunakan  produk  yang  dibuat.  Menciptakan  persona akan  membantu  memahami  kebutuhan,  pengalaman, perilaku, dan tujuan pengguna aplikasi. Dengan membentuk persona,  maka  desainer  aplikasi  dapat  terbantu  untuk mengenali  bahwa  orang  yang  berbeda  memiliki  kebutuhan yang berbeda. Persona juga dikenal sebagai model characters atau composite characters [3] .
D. Usability Evaluation
Usability Evaluation berfokus pada bagaimana pengguna dapat  mempelajari  dan  menggunakan  produk  yang  telah dibangun. Usability  Evaluation juga  dapat  menjadi  acuan pada  seberapa  puas  pengguna  dengan  proses  penggunaan produk  yang  dilakukan  observasi. Usability mengacu  pada kualitas  pengalaman  pengguna  saat  berinteraksi  dengan produk  atau  sistem,  termasuk  situs web ,  perangkat  lunak, perangkat, atau aplikasi. Maka diperlukan standar yang dapat
memenuhi  variabel  keefektifan,  efisiensi  dan  kepuasan pengguna secara keseluruhan.
E. Heuristic Evaluation
Heuristic  Evaluation adalah  metode  untuk  mengukur usability antarmuka  pengguna  dengan  melakukan  observasi kemudian  melaporkan  permasalahan  yang  timbul.  Jakob Nielsen  dan  Rolf  Molich  merumuskan  metode  ini  untuk mengidentifikasi  masalah  yang  kemudian  dibandingkan dengan  prinsip  dasar user  interface sehingga  disebut  juga evaluasi heuristik.

## F. Dashforge
Dashforge merupakan templat dasbor berbasis Bootstrap 4 yang  mempunyai  ciri  khas style yang  modern  dan clean dengan desain yang minimal. Dibangun menggunakan SASS preprocessor, HTML5, CSS3 dan jQuery plugins, Dashforge menggunakan helper/utilities  class pada  umumnya  yang dimana  merupakan reusable  class sehingga  memberikan kelebihan dengan meningkatnya kecepatan memuat halaman. Dasbor  yang  dibawakan  oleh  Dashforge  juga  dapat dikustomisasi  dengan  aplikasi  lainnya  sesuai  kebutuhan sehingga memberikan fleksibilitas dan reusability yang baik [4].

## G. Figma
Alat  untuk  melakukan  pembuatan  prototipe  saat  ini semakin bervariasi dengan hadirnya Figma. Diluncurkan ke publik pada tahun 2016 oleh Dylan Field dan Evan Wallace, Figma  yang  merupakan  aplikasi  grafik  vektor  dan  alat pembuatan  prototipe  menawarkan  fitur  kolaborasi  di  waktu yang bersamaan sehingga memudahkan kerjasama tim dalam pengembangan  aplikasi  kedepannya  [5].  Figma  juga menawarkan  “ Code  Mode ”  yang  sangat  berguna  bagi developer  untuk  menjadikan  referensi  desain  yang  dibuat untuk  diimplementasikan.  Fitur  “ Prototype  Mode ”  juga berguna bagi desainer untuk merancang, mempresentasikan, dan  memodifikasi  prototipe  yang  dibuat.  Kolaborasi  antar desainer  dan  pemrogram  akan  lebih  mudah  dengan  adanya kedua fitur diatas karena dapat digunakan bersamaan secara lansung [6].

## H. HTML5
HTML5  adalah  versi  kelima  dari  teknologi  HTML  yang merupakan bahasa untuk mnyusun struktur dan menampilkan isi  dari  website.  Pengembangan  HTML5  memiliki  tujuan untuk  memperbaharui  kemampuan  teknologi  HTML  agar dapat  beradaptasi  dengan  teknologi  multimedia  terbaru  dan mudah diadaptasi baik oleh manusia dan komputer. Dengan versi  HTML  yang  lebih  baru,  terdapat  elemen,  atribut,  dan behavior yang  terbarukan  sehingga  dapat  membangun website  dan  aplikasi  yang  lebih  beragam.  Dikembangkan secara  terbuka  agar  dapat  digunakan  oleh  semua Web Developer ,  terdapat  beberapa  teknologi  di  HTML5  yang terklasifikasikan  oleh  fungsinya  antara  lain; Semantics, konektivitas,  penyimpanan  data  secara  luring,  multimedia, efek  dan  grafik  2D/3D,  integrasi  dan  performa,  akses perangkat, dan styling [7] .
I. CSS
Cascading  Style  Sheet (CSS)  merupakan  struktur  untuk memberikan style yang  dapat  berupa fonts, spasi , dan
pewarnaan  dari  suatu  halaman  HTML.  CSS  juga  dapat digunakan  untuk  mengatur  berbagai  parameter  diantaranya ukuran  gambar,  margin,  dan  lainnya.  Dengan  adanya  CSS, halaman  yang  dibentuk  menggunakan  HTML  dapat ditampilkan dengan berbagai pola yang berbeda. Penggunaan CSS sebagai teknologi dalam mengembangkan website telah distandarisasi oleh World Wide Web Consortium atau W3C agar dapat beradaptasi di semua browser yang ada.
J. JavaScript
JavaScript  atau  biasa  dikenal  JS  merupakan  bahasa pemrograman populer yang merupakan salah satu bagian dari teknologi inti pembentuk website bersamaan dengan HTML dan CSS. JavaScript berguna untuk menjadikan halaman web
lebih  interaktif  d  an  merupakan  bagian  aplikasi web yang esensial. Meskipun JS terkenal sebagai skrip untuk halaman web ,  Node.js,  Apache  CouchDB,  dan  Adobe  Acrobat  juga menggunakan  JS  dimana  penggunaannya  di  media  selain browser .  JavaScript  merupakan  bahasa  pemrograman  yang berbeda  dari  bahasa  pemrograman  Java,  dimana  terdapat perbedaan  yang  jauh  dalam  sintaks,  semantik,  dan penggunannya [7].

## K. WebXR
WebXR  merup  akan Application  Programming  Interface (API) perangkat untuk menjalankan aplikasi XR pada website dengan cara memberikan kemampuan halaman website untuk mendeteksi  apabila  kemampuan  XR  tersedia  dan  kemudian menampilkan imagery pada  perangkat  XR.  WebXR  Device API  menyediakan  akses  ke  input  (berupa  perintah  dan informasi  dari  perangkat  kontrol)  dan  output  (berupa tampilan  ke  perangkat)  yang  berkaitan  dengan  perangkat Virtual Reality (VR) dan Augmented Reality (AR) sehingga
Gambar 1. Affinity diagram aplikasi myITS connect modul komunitas.
Gambar 2. User persona myITS connect .
Gambar 3. Sitemap aplikasi myITS connect modul komunitas.
Tabel 1.
Daftar pertanyaan wawancara pengguna
No. Pertanyaan Jawaban 1. Apa tujuan utama penggunaan media sosial anda saat ini? Untuk  teroneksi  dengan  orang lain,  agar  tahu update dengan relasi, ingin menunjukkan eksistensi diri. 2. Adakah hal lainnya yang menghambat dalam branding  perusahaan  di media sosial? Terkait  kendala  teknis  seperti jaringan internet, terdapat juga masalah  kepercayaan  pada proses perekrutan yang dilakukan secara online karena tidak  melihat  secara  langsung fisik kantornya. Tabel 2. Daftar kebutuhan pengguna aplikasi myITS connect No. Kebutuhan Pengguna Tujuan atau Fungsi 1. Mencari orang Pencari Kerja Melakukan  pencarian orang berdasarkan kata kunci nama yang diinputkan. 2. Mengelola akun perusahaan Perusahaan Mengubah dan memperbarui akun perusahaan yang meliputi  foto  profil, foto sampul, dan biodata umum perusahaan. 3. Membuat postingan Pencari  Kerja dan perusahaan Melakukan  input  yang dapat berupa teks, gambar, maupun video yang  ditautkan  untuk dibagikan. Tabel 3. Contoh tugas usability evaluation
No. Instruksi 1. Masuk dengan akun myITS 2. Mengelola akun saya 3. Mencari orang sesuai kata kunci 4. Melihat notifikasi 5. Menghubungkan orang menjadi koneksi
6. Membuka salah satu kategori pada komunitas 7. Bergabung dengan komunitas 8. Membuat diskusi pada komunitas 9. Membuat komunitas milik sendiri 10. Keluar dari akun
dengan  adanya  WebXR  Device  API,  VR  dan  AR  dapat ditautkan pada website yang dibuat.

## III. ANALISIS DAN PERANCANGAN SISTEM
A. Wawancara Pengguna
Kegiatan wawancara pengguna dilakukan untuk mengidentifikasi permasalahan yang dialami pengguna yang terdiri  dari  dua  tipe,  pencari  kerja  dan  pemilik  perusahaan. Wawancara  pengguna  digunakan  untuk  menggali  fitur-fitur yang  dibutuhkan  dalam  pengembangan  myITS  Connect modul  Komunitas.  Adapun  contoh  pertanyaan  dan jawabannya  ditunjukkan  pada  Tabel  1  yang  diajukan  saat wawancara.

## B. Analisis Hasil Wawancara
Analisis  masalah  didapatkan  dari  wawancara  pengguna yang  telah  dilakukan  kepada  10  responden.  Analisis  yang digunakan  penulis  menggunakan  metode Affinity  Mapping untuk  menemukan  permasalahan  dan  kebutuhan  pengguna dari aplikasi ini yang menghasilkan affinity diagram seperti yang ditampilkan pada Gambar 1.
Hasil  dari  aktifitas affinity  mapping ini  akan  didapatkan penulis  berupa  keinginan  dan  hambatan  yang  dialami  oleh para pengguna. Dengan begitu, terbentuklah target pengguna yang  diidentifikasikan  menjadi  tiga  persona  dengan  latar
belakang mahasiswa  ITS, Fresh  graduate ITS,  dan  Alumni ITS  pengelola  perusahaan  seperti  yang  ditunjukkan  pada Gambar 2.

## C. Daftar Kebutuhan Pengguna
Berdasarkan hasil wawancara, daftar kebutuhan pengguna dibuat  yang  berisi  fitur  yang  akan  dibangun  dalam  aplikasi myITS  Connect.  Berisi  penyelesaian  masalah  yang  dialami pengguna yang ditemukan pada saat proses Affinity Mapping . Keseluruhan user  requirements ini  berjumlah  47  yang beberapa contohnya dapat dilihat pada Tabel 2.

## D. Perancangan Arsitektur Navigasi Antarmuka Pengguna
Arsitektur  navigasi  antarmuka  dari  myITS  Connect diinterpretasikan  dengan  Sitemap  setelah  mengetahui  fitur- fitur yang akan dibangun. Gambar 3 merupakan Sitemap dari aplikasi myITS Connect modul Komunitas.

## E. Komponen Antarmuka Pengguna
Merancang  antarmuka  dapat  dikerjakan  lebih  cepat menggunakan  komponen  yang  mengikuti  aturan  desain. Dalam  perancangannya,  myITS  Connect  menggunakan
Gambar 4. Palet warna aplikasi  myITS connect modul komunitas.
Gambar 5. Tipografi aplikasi myITS connect modul komunitas.
Gambar 6. Layout aplikasi myITS connect modul komunitas.
Gambar 7. Carousel aplikasi myITS connect modul komunitas.
Gambar 8. Sketsa jelajahi komunitas aplikasi myITS connect.
Gambar 9. Mockup jelajahi komunitas aplikasi myITS connect.
Gambar  10.  Implementasi  halaman  jelajahi  komunitas  pada  tampilan komputer dan seluler.
templat  standar  yang  digunakan  di  seluruh  aplikasi  myITS yaitu  Dashforge . Berikut  adalah  contoh  komponen  dari aplikasi myITS Connect modul Komunitas:

## 1) Palet Warna
Palet  warna  merupakan  daftar  warna  yang  digunakan dalam  membangun  aplikasi  ini.  Penentuan  palet  warna dilakukan  penulis  sebelum  memulai  desain  agar  rancangan antarmuka  yang  dihasilkan  terlihat  menarik.  Penggunaan palet warna pada Gambar 4 didasari pada penggunaan standar warna  yang  digunakan  pada  keseluruhan  aplikasi  myITS sehingga menghasilkan identitas yang serasi.

## 2) Tipografi
Tipografi  merupakan  teknik  memilih  dan  menata  huruf dengan pengaturan penyebarannya pada ruang yang tersedia, untuk  menciptakan  kesan  tertentu,  guna  kenyamanan membaca semaksimal mungkin. Pada Gambar 5 ditunjukkan penggunaan  tipografi  pada  rancangan  antarmuka  pengguna myITS Connect dengan menggunakan font “IBM Plex Sans” yang dibuat oleh IBM Brand Experience & Design Styles.

## 3) Layout
Pengaturan  layout  merupakan  hal  yang  penting  dalam pengembangan  aplikasi  ini.  Dengan  perangkat  gawai  yang digunakan target pengguna bervariasi, maka tampilan layout antarmuka perlu disesuaikan agar dapat mengadaptasi dengan
banyak  jenis  gawai.  Pengembangan  yang  dilakukan  untuk myITS  Connect  ini  menyasar  pada  pengguna  perangkat komputer  ( Desktop  PC )  dan  dapat  responsif  kepada mobile device dengan  anatomi  layout desktop dan mobile  device terlihat  seperti  pada  Gambar  6.  Bagian  (1)  merupakan app bars ,  bagian  (2)  merupakan  navigasi  dimana pada  tampilan mobile device disimpan melalui tombol navigasi, dan bagian (3) merupakan bodi dari aplikasi.
4) Carousel
Carousel merupakan  komponen  yang  digunakan  untuk memberikan pengalaman yang berbeda bagi pengguna untuk menjelajah kategori pada komunitas. Dengan tampilan visual yang  kontras  dan  menggunakan  navigasi  horizontal  seperti yang terlihat pada Gambar 7.

## F. Sketsa Perancangan Antarmuka Pengguna
Perancangan  antarmuka  aplikasi  myITS  Connect  diawali dengen  pembuatan  sketsa  ( low-fidelity )  (Gambar  8). Rancangan  antarmuka  yang  akan  dijabarkan  menjadi beberapa bagian fitur agar memudahkan penataan rancangan ke  tahap  selanjutnya  yaitu mockup ( high-fidelity )  dan kemudian  diimplementasikan  menjadi  kode front-end.
Gambar 11. Hasil evaluasi penambahan sapaan pengguna.
Gambar 12. Hasil evaluasi perubahan tombol hapus komentar.
Gambar  13.  Grafik  waktu  penyelesaian usability  evaluation oleh pencari kerja.
Gambar  14.  Grafik  waktu  penyelesaian usability  evaluation oleh pengelola perusahaan.
Gambar  15.  Grafik  tingkat  keberhasilan usability  evaluation oleh pencari kerja.
Gambar 16. Grafik tingkat keberhasilan usability evaluation oleh  peran perusahaan.
Berikut  contoh  sketsa  antarmuka  aplikasi  myITS  Connect modul Komunitas.

## G. Mockup Perancangan Antarmuka Pengguna
Setelah dibentuk sketsa antarmuka pengguna, perancangan antarmuka  aplikasi  myITS  Connect  modul  Komunitas dilanjutkan  dalam  bentuk mockup yang  sudah  siap  untuk diimplementasikan menjadi kode front-end. Contoh mockup antarmuka pengguna ditunjukkan pada Gambar 9.

## IV. IMPLEMENTASI
Realisasi  antarmuka  aplikasi  myITS  Connect  modul Komunitas  yang  diimplementasikan  pada website responsif menggunakan templat tema Dashforge, sebagai penyeragaman seluruh aplikasi myITS, berbasis pemrograman pada HTML, CSS dan JavaScipt. Kemampuan website yang responsif seperti yang ditampilkan pada contoh Gambar 10, dapat memberikan kemudahan pengguna untuk membuka  dan  menjalankan  aplikasi  ini  melalui  komputer desktop maupun mobile device .
Implementasi juga menampilkan cuplikan kode salah satu komponen yang diterapkan di aplikasi myITS Connect pada halaman jelajahi komunitas yaitu carousel .

## V. EVALUASI
Pada bagian ini dibahas mengenai evaluasi yang dilakukan pada implementasi sistem yang dibangun untuk mendapatkan antarmuka  yang  sesuai  dengan  kebutuhan  pengguna. Kegiatan  evaluasi  yang  dilakukan  antara  lain usability evaluation yang  dilakukan  dua  iterasi  untuk  mendapatkan hasil  evaluasi  implementasi  antarmuka  yang  maksimal.
Evaluasi  lainnya  juga  dilakukan  berdasarkan  10  poin heuristic  evaluation berdasarkan  antarmuka  aplikasi myITS Connect yang dibangun.
A. Usability Evaluation
Evaluasi usability merupakan metodologi yang digunakan untuk  menguji  kelayakan  aplikasi  myITS  Connect  modul Komunitas.  Dilakukan  dengan  dua  kali  iterasi,  pengujian dilakukan  dengan  melibatkan  10  partisipan  yang  sama dengan  responden  wawancara  pengguna  menggunakan antarmuka  pengguna  yang  telah  diimplementasikan  pada website  front-end melalui  pertemuan  daring via  zoom meeting. Pada  Tabel  3  disajikan  contoh  tugas  yang diinstruksikan pada partisipan usability evaluation.
Setelah  melalui usability  evaluation pertama,  didapatkan evaluasi formatif pertama yang menampilkan 6 permasalahan pengguna pada saat melakukan testing yang datanya diambil dari  catatan  pada  hasil  evaluasi  sumatif  sebelumnya.  Dari permasalahan  tersebut  akan  dirumuskan  solusi  yang  perlu dilakukan pada antarmuka aplikasi yang dilakukan pengujian pada partisipan evaluasi siklus pertama. Pada evaluasi siklus kedua  yang  dilakukan  untuk  menguji  hasil  perubahannya, didapatkan  1  permasalahan  yang  dihasilkan  solusi  yang mengatasi  semua  permasalahan  yang  dialami  partisipan evaluasi. Berikut contoh hasil evaluasi yang dilakukan.
Beberapa  partisipan  evaluasi  kebingungan  saat  mencari akses  menuju  halaman  profil  akun,  yang  penempatannya pada avatar pengguna  di  setiap  halaman.  Evaluasi  yang dilakukan  perubahan  antarmukanya  yaitu  penambahan  kata sapaan nama pengguna di samping avatar seperti yang terlihat pada  Gambar  11,  sehingga  lebih  memberikan  atensi  bahwa komponen tersebut mengarahkan ke profil akun pengguna Temuan masalah lainnya yaitu terdapat 2 dari 10 partisipan yang salah menekan tombol hapus komentar yang berwarna
Gambar 17. Evaluasi heuristik yang dilakukan pada gambar postingan beranda.
Tabel 4.
Analisis evaluasi heuristik No. Prinsip Heuristik Hasil 1. Visibilitas status sistem Terpenuhi 2. Keselarasan antara sistem dengan dunia nyata Terpenuhi 3. Kontrol dan kebebasan pengguna Terpenuhi 4. Standar dan konsistensi Terpenuhi 5. Pencegahan kesalahan Terpenuhi 6. Memberikan  informasi  yang jelas Terpenuhi 7. Fleksibilitas dan efisiensi penggunaan Terpenuhi 8. Estetika dan desain yang minimalis Belum Terpenuhi 9. Bantu  pengguna  mengenali, mendiagnosa,  dan  mengatasi masalah Terpenuhi 10. Bentuk dokumentasi sistem yang ringkas Terpenuhi Tabel 5. Tindak lanjut untuk pemenuhan poin heuristik Prinsip Heuristik Permasalahan Solusi Estetika dan desain yang minimalis Gambar  yang  tampil pada postingan terlalu besar  sehingga  saat tampil di desktop kurang proporsional Menyesuaikan ukuran  gambar  yang tampil sehingga memiliki ukuran yang lebih proposional.
biru ( primary ). Perubahan yang dilakukan berupa penggantian  jenis  tombol  hapus  komentar  menjadi  jenis primary berwarna biru seperti yang terlihat pada Gambar 12, dari yang sebelumnya secondary berwarna putih. Penggantian  ini  didasari  pada  jenis  aksi  negatif  tidak bermasalah  apabila  diberikan  tombol  jenis primary pada modal konfirmasinya,  seperti  yang  digunakan  pada modal konfirmasi logout .
Setelah  2  iterasi usability  evaluation dilakukan,  maka dapat  dihasilkan  data  hasil  evaluasi  berupa  variable  waktu penyelesaian  dan  tingkat  keberhasilan  partisipan  dalam menyelesaikan tugas. Hasil evaluasi yang merupakan waktu penyelesaian  partisipan  dalam  melakukan  instruksi  yang diberikan,  disajikan  dalam  bentuk  grafik  seperti  yang ditampilkan pada Gambar 13 dan Gambar 14. Terdapat 4 data yang ditampilkan tiap grafik berupa waktu penyelesaian tiap partisipan pada iterasi 1, iterasi 2, rata-rata semua partisipan pada iterasi 1, dan pada iterasi 2.
Berdasarkan  data  yang  disajikan  di  Gambar  13  dan Gambar  14,  setiap  partisipan  memiliki  waktu  penyelesaian yang bervariasi pada setiap siklusnya. Terdapat  3 partisipan yang  durasinya  lebih  cepat  pada  evaluasi  siklus  kedua, dengan  7  partisipan  yang  menghasilkan  durasi  lebih  lama. Hal  ini  wajar  dikarenakan  terdapat  penambahan  tugas  yang dilakukan sebagai hasil evaluasi siklus pertama. Pada siklus pertama  terdapat  9  tugas  untuk  pencari  kerja  dan  8  tugas untuk pengelola perusahaan. Sedangkan untuk siklus kedua, terdapat  12  tugas  untuk  pencari  kerja  dan  11  tugas  untuk pengelola perusahaan. Poin penting yang perlu dicatat yaitu waktu  penyelesaian  secara  rata-rata  per  tugasnya  menjadi lebih cepat, dari 18,3 detik per tugas menjadi 16,5 detik  per tugas  untuk  pencari  kerja.  Sedangkan  pada  pengelola perusahaan, waktu rata-rata per tugasnya dari 22,4 detik per tugas,  menjadi  17,8  detik  per  tugasnya.  Hal  ini  dapat dianggap sebagai peningkatan kemampuan pengguna dalam menggunakan aplikasi myITS Connect.
Selanjutnya pada Gambar 15 dan Gambar 16 menunjukkan hasil tingkat keberhasilan usability evaluation yang diperoleh seluruh partisipan pada evaluasi siklus pertama dan kedua.
Terdapat  peningkatan  tingkat  keberhasilan  pada  semua partisipan pencari kerja dan pengelola perusahaan. Rata-rata tingkat  keberhasilan  pencari  kerja  pada  evaluasi  pertama hanya  sebesar  89,7%  dengan  salah  satu  faktor  penyebab rendahnya  rata-rata  tingkat  keberhasilan  yaitu  adanya  tugas yang  gagal  dilaksanakan  pada  partisipan  pertama.  Tingkat keberhasilan  partisipan  pertama  sendiri  tergolong  rendah, hanya  sebesar  66,7%.  Akan  tetapi  semua  berubah  setelah dilakukan  perubahan  evaluasi  tahap  pertama  dan  diuji kembali  pada  evaluasi  tahap  kedua.  Rata-rata  tingkat keberhasilan pencari kerja meningkat sebesar 9,1% menjadi rata-rata  setiap  partisipan  pencari  kerja  sebesar  98,8%. Sedangkan  pada  rata-rata  tingkat  keberhasilan  pengelola perusahaan pun meningkat juga sebesar 7,9% menjadi 95,4%. Terdapat 6 partisipan yang mencatatkan tingkat keberhasilan yang sempurna, sehingga dapat disimpulkan perubahan yang dilakukan dari evaluasi siklus pertama memberikan dampak yang  signifian  pada  tingkat  keberhasilan  pada  seluruh partisipan usability evaluation .
B. Heuristic Evaluation
Proses evaluasi lainnya yaitu menggunakan metode
evaluasi  heuristik  ( heuristic  evaluation ).  Metode  evaluasi heuristik ini dilakukan penulis untuk membandingkan sistem yang sudah dibuat dengan 10 poin heuristik sehingga dapat diketahui  apakah  aplikasi  yang  dibuat  sudah  memenuhi usability antarmuka.  Tabel  4  menunjukkan  hasil  Heuristic Evaluation.
Dari hasil analisis heuristic yang dilakukan, terdapat 1 poin heuristic yang belum terpenuhi yaitu pada prinsip ‘Estetika dan  desain  yang  minimalis’.  Poin  ini  dirasa  beberapa partisipan testing sebelumnya  belum  terpenuhi  pada  bagian tertentu  di  rancangan  antarmuka  pengguna.  Sehingga, dilakukan  evaluasi  pada  rancangan  antarmuka  pengguna yang  telah  dibuat,  dengan  detil  bagian  yang  bermasalah dijelaskan seperti pada Tabel 5.
Berdasarkan  solusi  yang  diberikan  pada  antarmuka postingan (Tabel 5), maka perubahan dilakukan seperti yang terlihat  pada  Gambar  17.  Sebelum  dilakukan  evaluasi heuristik, ukuran gambar pada postingan terlihat terlalu besar sehingga  memenuhi  sebagian  besar  layar  yang  ditampilkan pada versi desktop . Sedangkan setelah dilakukan perubahan, ukuran  gambar  yang  ditampilkan  tampak  lebih  proposional dengan  ukuran  layar  sehingga  pengguna  dapat  melihat informasi  lainnya  yang  sebelumnya  terhalangi  oleh  gambar tersebut.

## VI. KESIMPULAN
Bagian  ini  diberikan  kesimpulan  yang  didapatkan  dari pengerjaan Tugas Akhir dan saran dari kegiatan desain dan evaluasi aplikasi myITS Connect modul Komunitas sebagai pengembangan  lanjutan  di  masa  yang  akan  datang, diantaranya;  (1)  Implementasi  metode user-centered  design pada  pengembangan  antarmuka  aplikasi  myITS  Connect modul Komunitas dilakukan dengan beberapa fase. Pertama, melakukan wawancara pengguna yang menghasilkan affinity diagram ,  target  persona,  dan  daftar  kebutuhan  pengguna. Proses  dilanjutkan  dengan  melakukan  perancangan  sketsa, mockup hingga  pada  akhirnya  diimplementasikan  menjadi baris kode antarmuka halaman aplikasi ( front-end page ) yang berdasarkan analisis yang telah dilakukan. (2) Implementasi antarmuka  dibuat  berdasarkan  aturan  desain  yang  diikuti yaitu berdasarkan templat Dashforge sebagai dasar tema yang digunakan pada seluruh aplikasi myITS. Bahasa pemrograman yang digunakan pada implementasi antarmuka ini  terdiri  atas  HTML,  CSS  dan  JavaScript  yang  dirancang secara  responsif.  (3)  Evaluasi  dilaksanakan  menggunakan usability evaluation yang dilakukan dengan dua kali iterasi, dan heuristic evaluation yang dilakukan dengan membandingkan  sistem  yang  sudah  dibuat  dengan  10  poin heuristik.  Pada usability  evaluation terjadi  peningkatan tingkat  keberhasilan  dari  evaluasi  yang  dilakukan  sebesar 9,1% oleh pencari kerja dan 7,9% oleh pengelola perusahaan. Sehingga success  rate akhir  dari usability  evaluation mencapai 98,8% oleh pencari kerja dan 95,4% oleh pengelola perusahaan. Pada penilaian berdasarkan waktu penyelesaian dari evaluasi yang dilakukan, terjadi efsiensi rata-rata waktu penyelesaian per task yang diberikan sebesar 1,8 detik untuk evaluasi oleh pencari kerja dan 4,6 detik untuk evaluasi oleh pengelola perusahaan. Evaluasi heuristik juga telah dilakukan pada  aplikasi  dengan  diberikan  masukan  untuk  melakukan
perubahan,  sehingga  aplikasi  myITS  Connect  modul Komunitas juga telah memenuhi kaidah heuristik.

## DAFTAR PUSTAKA
[1]  Usability.gov, “User-Centered Design Basics,” Digital.gov team , 2021. https://www.usability.gov/what-and-why/user-centered-design.html.
[2]  R.  F.  Dam  and  T.  Y.  Siang,  “Personas–A  Simple  Introduction,” Interaction  Design  Foundation ,  2021.  https://www.interaction- design.org/literature/article/personas-why-and-how-you-should-use- them.
[3]  Usability.gov, “Usability Evaluation Basics,” Digital.gov team , 2021. https://www.usability.gov/what-and-why/usability-evaluation.html.
[4]  C.  W.  Group,  “Cascading  Style  Sheets,” W3.org ,  2021. https://www.w3.org/Style/CSS/Overview.en.html.
[5]  D.  Juju  and  M.  Studio, Seri  Penuntun  Praktis  Join  Multiply ,  1st  ed. Jakarta: Elex Media Komputindo, 2008.
[6]  D. Flanagan, JavaScript: The Definitive Guide , 6th ed. United Stated of Amerika: O’Reilly Media, Inc, 2011.
[7]  W.  I.  W.  W.  and  C.  Groups,  “WebXR,” Immersiveweb.dev ,  2021. https://immersiveweb.dev/.