## PENERAPAN METODE USER CENTERED DESIGN (UCD) PADA UI/UX APLIKASI MOBILE KOMIK
Oleh: Adele Mailangkay 1)
Kevin Sinaga 2)
Perbanas Institute 1,2)
E-mail: adele@perbanas.id 1) yohaneskevinsinaga45@gmail.com 2)

## ABSTRACT
This design aims to produce an online comic mobile application user interface design in the form of a prototype designed using figma. The design of this interface uses the User-centered design method, which in this design focuses on the user or users and must consider the needs, goals,  and  input  of  the  user,  and  uses  theories  regarding  UI  design,  UI  design  principles, design work principles, application design principles, applying layouts, as well as deepening color  psychology  so  that  the  message  and  impression  you  want  to  convey  can  be  achieved. Based  on  an  analysis  of  the  needs  of  the  target  audience,  determine  the  content  to  be displayed,  and  classify  the  required  information,  sketch  ideas  and  implement  the  results  in the form of digital prototypes. The results of this design consist of a prototype user interface design for online comic applications.
Keywords:  User  interface,  User-centered  design,  online  comics,  Mobile  Applications, Prototype

## ABSTRAK
Perancangan  ini  bertujuan untuk  menghasilkan  rancangan user  interface aplikasi  mobile komik online dalam bentuk prototipe yang dirancang menggunakan figma. Perancangan antar muka  ini  menggunakan  metode User-centered  design ,  dimana  dalam  perancangan  ini berfokus pada user atau pengguna dan harus mempertimbangkan kebutuhan, tujuan, dan masukan  dari  pengguna,  serta  menggunakan  teori  mengenai  ui  desain,  prinsip  perancangan ui, prinsip kerja desain, prinsip desain aplikasi, penerapan layout, serta pendalaman psikologi warna sehingga pesan dan kesan yang ingin disampaikan dapat tercapai. Berdasarkan analisis dari kebutuhan target audience, di tentukan konten-konten yang akan ditampilkan, dan mengelompokkan informasiinformasi yang dibutuhkan, sketsa ide serta  implementasi  hasil  dalam  bentuk  prototipe  digital.  Hasil  perancangan  ini  terdiri  yaitu berupa prototype desain user interface aplikasi komik online .
Kata  Kunci:  User  Interface,  User-Centered  Design,  Komik  Online,  Aplikasi  Mobile, Prototype

## 1. PENDAHULUAN
Komik  adalah  gambar  yang  saling berdekatan  dengan  gambar  lainnya  yang sengaja  diurutkan  untuk  menyampaikan informasi dan menghasilkan respon estetika  dari  pembacanya  (Lestari  &
Irwansyah, 2020). Selain itu, komik adalah narasi  yang  diceritakan  melalui  rangkaian gambar yang disusun satu demi satu dalam bentuk  garis  horizontal,  garis  (strip)  atau kotak  yang  disebut  “panel”  yang dibacakan  secara  lisan  dari  kiri  ke  kanan.
Dialog  dalam  komik  dengan  balon  kata yang  menggambarkan  petualangan  satu atau  lebih  karakter  dalam  urutan  waktu yang  terbatas.  Komik  juga  merupakan bentuk  literasi  yang  dimaksudkan  sebagai sarana  hiburan  masyarakat.  Komik  terdiri dari serangkaian gambar yang dihubungkan bersama (Putra et al., 2020).
Di  Zaman  modern  seperti  sekarang terdapat  berbagai  banyak  jenis  dan  genre dalam  komik.  Seperti  genre  horror, comedy,  romance,  dan  fantasy.  Komik tidak  hanya  dibuat  dengan  di  cetak  saja, pada  zaman  dimana  teknologi  sudah berkembang komik juga bisa dibaca secara online .  Di  indonesia  sendiri  komik online paling  banyak  diminati  oleh  kalangan remaja  modern.  Banyak  dari  mereka menghabiskan  waktu  senggang  dengan membaca  komik.  dapat  dilihat  pada gambar  di  bawah  ini,  peneliti  mengambil data  survei  yang  dilakukan  oleh  (Rina, 2016) dari situs website  “jakpat” terhadap aplikasi baca komik online yaitu webtoon.
Survei  ini  dilakukan  pada  tahun  2016, Jakpat mensurvei pembaca webtoon sebanyak 519 user webtoon dan hanya 200 responden yang memiliki aplikasi webtoon di smartphone mereka. Penulis mengambil data  survey  dari  JAKPAT  pada  tanggal 9/29/2021.
Berdasarkan  survey  data  pengguna Webtoon  terdapat  519  responden  yang terlibat  dan  dari  519  responden  tersebut
populasi  pengguna  webtoon  yang  paling banyak  ada  di  DKI  Jakarta  sebanyak 22,74%  dan  disusul  oleh  East  Java sebanyak  17.92%.  dari  ke-4  provinsi tersebut  bisa  kita  lihat  bahwa  pemakaian webtoon  lebih  banyak  dipakai  oleh  laki- laki  dibanding  dengan  perempuan.  Dari ke-4  provinsi  tersebut  laki-laki  yang menggunakan  webtoon  sebanyak  50,48% sementara  pengguna  webtoon  perempuan sebanyak 49,52%.
Jakpat melakukan survey dan menanyakan  kepada  responden  alasan mengapa  mereka  membaca  webtoon.  Dari hasil  survey  yang  didapat  ternyata  cerita webtoon menarik mereka untuk membacanya  (77,5%).  Responden  lainnya mengatakan  mendapatkan  titik  garis  dan kualitas  gambar  webtoon  adalah  alasan mereka membaca webtoon.
Dari  hasil  observasi  yang  peneliti lakukan  terhadap  beberapa  komik online yaitu  KOOMIK  (dilihat  dari  komentar Play  Store  KOOMIK)  dan  WEBTOON (dilihat dari komentar App Store WEBTOON).  Terdapat  permasalahan  di user  interface aplikasi  mobile  KOOMIK yang  ditulis  sendiri  oleh user /pembaca KOOMIK dan WEBTOON seperti tampilan UI yang monoton atau pun saran dari user seperti  menambahkan  beberapa fitur dalam aplikasinya ataupun menghapus fitur yang menyusahkan menurut user .
User Interface diperlukan  dalam  suatu pembuatan  sistem.    Dengan  adanya    antar muka, diharapkan  pengguna  akan  mudah memahami    apa    yang    harus    dilakukan dan    menghindari  terjadinya  kebingungan saat  menggunakan  sistem.  Desain  UI adalah menciptakan sebuah media komunikasi  yang  efektif  antara  manusia dengan  computer  (Muhammad  Trisna Firmansya,2020).
Dalam  pembuatan  UI  ada  beberapa metode  yang  digunakan  seperti  Design Thinking  adalah  proses  berulang  dimana kita berusaha memahami pengguna, menantang  asumsi,  dan  mendefinisikan kembali masalah dalam upaya mengidentifikasi strategi dan solusi alternatif,  selain  itu  ada  juga  HCD ( Human Centered Design ) adalah framework dari perancangan user interface suatu  sistem  informasi  yang berfokus  kepada  seseorang  yang  akan menggunakan sistem yang akan dirancang. Terakhir ada UCD ( User centered design ) yang  dimana  terfokus  berdasarkan  desain yang  berpusat  pada  manusia  dengan analisis target user yang lebih mendalam.
Dalam pembuatan desain user interface kali  ini  menggunakan  metode User centered design (UCD) dikarenakan developer  dapat  mengambil  keputusan dalam  desain  yang  didasarkan  oleh kebutuhan user komik online dan  tujuan
dari user komik online .  Tujuan  dari penelitian  ini  adalah  untuk  menghasilkan perancangan desain user interface aplikasi komik online yang menarik, memudahkan user dalam membaca komik dan kepuasan pada  pengalaman  pembaca  komik online dan  Manfaat  dari  penelitian  ini  adalah dapat  memberikan  masukan  terhadap penelitian  yang  berhubungan  dengan  UI bagi  pengembang  komik  online  aplikasi mobile  dan  Terciptanya  suatu  prototype desain user interface aplikasi komik online berbasis  mobile  yang  memenuhi  standar kebutuhan dan kepuasan pengguna.

## 2. METODE PENELITIAN
Pada penelitian ini menggunakan tahapan pada UCD ( User centered design ) yang terdiri dari 4 tahap, yaitu specify the context of us, specify user and organizational requirements, produce design  solutions,  evaluate  design  against user requirements.  Observasi/  Survei, Interview.

## 3. HASIL DAN PEMBAHASAN

## Activity Diagram
Iterasi  Pertama Activity  Diagram dibuat untuk mengetahui alur yang akan dilakukan  oleh  pengguna  terhadap  fungsi yang  ada  pada prototype aplikasi  mobile mengenai komik online yang dibuka.
User flow Iterasi Pertama
User  flow pada  perancangan  desain UI/UX  aplikasi  mobile  ini  digunakan untuk  menggambarkan  langkah-langkah pada  fitur  yang  dilakukan  oleh  pengguna untuk  mencapai  tujuan  dari  fitur  tersebut. User  flow berupa  langkah-langkah  untuk dilakukan oleh pengguna dalam mengerjakan suatu task.
Tahap Minimum Viable Products Iterasi Pertama
Iterasi  Pertama  Berdasarkan  hasil  dari tahap  declaration  assumption  didapatkan fitur yang akan dijadikan dalam pembuatan wireframe dan prototype .
Wireframe Iterasi Pertama
1. Wireframe Splash Screen
Ketika user masuk  pertama  kali  ke aplikasi akan mendapatkan tampilan splash screen  yang  akan  delay  selama  beberapa detik  dan  akan  masuk  ke  halaman login/daftar.

## Gambar 1 Splash Screen
2. Wireframe Daftar dan masuk
Ketika  pengguna  membuka  aplikasi tersebut akan diarahkan ke splash screen yg akan  tampil  selama  beberapa  detik  setelah itu akan menuju halaman daftar atau login. Pada  halaman  login  adalah  tahap  untuk
user yang  sudah  memiliki  akun  untuk masuk  ke  halaman  utama  aplikasi  komik online kamikaze  dengan  cara  memasukan nama  yang  sudah  didaftarkan  dan  kata sandi.
Gambar 2 Wireframe Daftar dan Masuk 3. Wireframe Lupa Kata Sandi
Pada  halaman  ini  akan  diminta  untuk memasukan  email  yang  sudah  di  daftarkan ke  akun user ,  setelah user memasukan email  nya  dan  mengirimnya  makan  akan dapat  pop  up  anda  telah  berhasil  dan user akan  mendapatkan  password  baru  di  email
yang sudah user input.

## 4. Wireframe Home
Ini  adalah  tampilan  utama  dari  aplikasi kamikaze,  terdapat  beberapa  pilihan  yang bisa  anda  pilih  untuk  membaca  komik. Bisa  lewat  komik  yang user favorit  kan, jika  anda  ingin  membaca  komik  yang
sudah  pernah user baca, user juga  bisa melihat rekomendasi komik yang ditawarkan  oleh  kamikaze  untuk  pilihan baca user yang lebih banyak.
5. Wireframe Top Komik
Pada  tampilan  ini user di  suguhkan kumpulan  top  komik  dari  urutan  1  sampai 5 untuk menambahkan bacaan komik user .
6. Wireframe bacaan komik
Tampilan  ini  menunjukan wireframe bacaan komik dan tampilan episode komik nya, selain itu user dapat memberikan love pada episode yang di baca dan memberikan komentar.
7. Wireframe komentar episode
Pada tampilan ini user dapat memberikan  komentar  pada  episode  yang di  abaca  dan  dapat  juga  membalas komentar  orang  lain  selain  itu  juga  dapat memberikan like pada  komentar  orang lain.
8. Wireframe Notifikasi
Notifikasi  ini  untuk  memberitahu  info beberapa  hal  untuk user ,  seperti  Komen user yang dibalas  oleh user lain, feedback laporan  untuk  komik  yang  anda  laporkan dan  pemberitahuan  dan  pemberitahuan tentang kendala update komik jika terjadi.
9. Wireframe Hapus Notifikasi
Pada tampilan ini user dapat menghapus  notifikasi  nya  agar  tidak menumpuk.
10. Wireframe laporkan
User dapat  melaporkan  komik  yang mengandung  konten  yang  tidak  pantas, berkaitan  dengan  hak  cipta,  atau  pun konten error.
11. Wireframe Share Komik
User dapat  melakukan  share  komik yang user suka  ke  pada  teman  melalui Facebook, line ataupun WhatsApp.
12. Wireframe Rating
User dapat memberi rating pada komik yang  sedang user baca  ataupun user suka, guna  untuk  menambahkan  popularitas komik tersebut.
Komponen Desain User interface
1. Warna
Warna  dominan  yang  digunakan  pada desain prototype aplikasi  adalah  warna Oren  dengan  kode  hexa  #FD6A02.  Salah satu  alasan  kenapa  memilih  warna  ini adalah  Karen  kualifikasi  dari  hasil  google form yang peneliti berikan kepada responden.  Selain  itu  pemilihan  warna Oren  ini  dikarenakan  Oren  memiliki  arti optimis, percaya diri, kreatifitas, petualangan  dan  senang.  Pada  arti  warna tersebut  maka  digunakan  agar  pengguna bisa  mendapatkan  emosi  yang  paling cocok dari warna Oren adalah petualangan, kreatifitas dan kesenangan.
Sehingga  cocok  untuk  di  aplikasikan  ke rancangan UI komik online .
2. Tipografi
Tipografi  yang  dipilih  yaitu  Roboto,
karena  font  jenis  ini  paling  mudah  dibaca oleh  mata user .  Font  jenis  ini  merupakan font  yang  memiliki  kerangka  mekanis  dan sebagian  besar  bentuknya  geometris.  Pada saat  yang  sama,  font  ini  menampilkan kurva  yang  ramah  dan  terbuka.  Sehingga, tidak  hanya  untuk  tampilan  digital  saja font  ini  terlihat  nyaman  oleh  mata manusia.
3. Kontrol UI
Komponen  interaktif  dalam  antarmuka pengguna  aplikasi  pada  perancangan UI/UX  aplikasi  mobile  ini  terdapat  pada tombol  (ikon,  text  dan  fitur  slide  komik), bidang text, tombol love, like.
4. Layout Bentuk  layout  yang  digunakan  pada perancangan desain UI/UX aplikasi mobile komik online adalah linear  layout . Linear layout adalah  layout  yang  memberikan susunan  tata  letak  komponen  secara  garis lurus baik vertikal maupun horizontal. List tampilan  komik  disajikan  dengan  linear layout dengan menampilkan gambar cover komik,  judul  komik  dan  genre  komik sehingga memudahkan user untuk memilih komik yang ingin dibaca dengan mengklik gambar  cover  komik  tersebut.  Dari penjelasan  tersebut  alasan  untuk  memakai linear  layout  adalah  karena  memudahkan user untuk  memilih  komik  dan  dapat banyak  menampilkan  komik  untuk user dengan tampilan yang sejajar dan memudahkan nya.
5. Grafis
Ilustrasi yang digunakan pada perancangan UI  aplikasi  mobile ini adalah vector  design. Dengan  gayat  visual  yang detail  akan  terlihat  lebih  menarik  sesuai dengan  apa  yang user mau.  Ilustrasi  ini dibuat dengan menggunakan
Icon8(website). Interactive Prototype
Tahap perancangan interactive prototype ini  dari  segi interface akan dibuat  lebih  detail  lagi  dibandingkan dengan metode wireframe . Dari segi visual dan  kontennya  sudah  lebih  berwarna  dan hampir  menyamai  dengan  final  produk. Selain  itu  juga  ditambahkan  transisi  dan animasi serta fitur yang lebih interaktif dan menarik.  Pada  perancangan interactive prototype ini  menggunakan  warna  Oren dengan  kode  hexa  #FD6A02  sebagai warna  dasar  nya  dan  Roboto.  Pembuatan interactive  prototype hasil  dari wireframe yang dibuat dengan penambahan komponen  seperti color  palette ,  tipografi,
navigation, notification, button, dan illustration.
User akan diarahkan otomatis ke splash screen yang  akan  muncul  di  awal  aplikasi lalu  akan  di  arahkan  ke landing  page login/daftar.  Ketika user telah  berhasil melakukan  pendaftaran  akun  maka user akan  di  arahkan  ke  tahapan  pemilihan genre  guna  memenuhi  kebutuhan  baca user yang akan di tampilkan di Home Page
1. Prototype Daftar
Ketika  pengguna  membuka  aplikasi tersebut  akan  diarahkan  ke splash  screen
yg  akan  tampil  selama  beberapa  detik setelah  itu  akan  menuju  halaman  daftar atau login. Pada halaman ini user disuruh.
Gambar 3 Prototype Daftar
2. Tahapan Pemilihan Genre Pada  tampilan  ini user disuruh  untuk memilih  genre  yang user suka  agar  pada tampilan home dapat di tampilkan kumpulan  komik  yang user suka  dan
rekomendasi  komik  untuk user sesuai dengan  apa  yang user suka.  Tapi  sebelum itu user di  haruskan  daftar  dan  setelah  itu akan diarahkan pada tahap pemilihan genre ini.
Gambar 4 Prototype Pemilihan Genre
2. Prototype Login
Pada  tampilan  ini  atau  tahap  ini  adalah tahap untuk user yang sudah memiliki akun untuk  masuk  ke  halaman  utama  aplikasi
komik online kamikaze  dengan  cara memasukan  nama  yang  sudah  didaftarkan dan kata sandi.

## Gambar 5 Prototype Login
3. Prototype Home
Ini  adalah  tampilan  utama  dari  aplikasi kamikaze,  terdapat  beberapa  pilihan  yang bisa anda pilih untuk membaca komik. Bisa lewat  komik  yang user favorit  kan,  jika
anda  ingin  membaca  komik  yang  sudah pernah user baca, user juga  bisa  melihat rekomendasi  komik  yang  ditawarkan  oleh kamikaze  untuk  pilihan  baca user yang lebih banyak.

## Gambar 6 Prototype Home 4. Prototype Search /pencarian
Ini  adalah  tampilan  dimana user bisa mencari  komik  lebih  luas  dari  beberapa fitur  yang  di  tampilkan  di  home  untuk user .
Run An Experiment
(RUSYDINA  NOVITASARI,  2020) Pada  tahap  ini  hasil  dari  perancangan prototype MVP  pada  iterasi  pertama  akan dilakukan pengujian secara mandiri terlebih dahulu. Hal ini dilakukan untuk memastikan  MVP  yang  dibuat  sesuai  dan dapat  berjalan  dengan  baik  sebelum dilakukan  pengujian  pada  iterasi  kedua  ke pengguna  akhir. Prototype MVP  telah dicoba  di  setiap  task  nya  secara  mandiri sebanyak 10 kali. Selain itu juga melibatkan  satu  orang  yaitu  dengan  inisial (LV) perempuan berusia 29 tahun mewakili pengguna  akhir  pada prototype UI  aplikasi mobile sebelum melakukan pengujian pada iterasi  kedua  ke  pengguna  akhir.  Hasil pengujian prototype MVP  meliputi  daftar akun, pemilihan genre komik setelah daftar (genre  yang di  pilih: horror, aksi,  komedi), login, melihat tampilan rekomendasi komik,  mencari  genre  komik  aksi  lewat filter,  melihat  tampilan  kumpulan  episode
dari  komik  apa  saja  (bebas  pilih  komik yang mana saja, membagikan / share komik apa  saja  (bebas  pilih  komik  yang  mana saja),  melaporkan  komik  sebagai  “konten error  “(bebas  pilih  komik  yang  mana  saja) dan  melihat  komentar  bacaan  komik eps.279“(bebas  pilih  komik  yang  mana saja), menyukai/like bacaan komik eps.279“(bebas  pilih  komik  yang  mana saja),  masuk  ke  halaman  “Top  Komik”, melihat  jadwal  komik,  menghapus  semua daftar  komik  favorit,  melihat  notifikasi, mengganti bahasa menjadi bahasa “inggris”,  mengganti  resolusi  gambar menjadi  “tinggi”  dan  melakukan  logout.
Declare Assumption Iterasi Kedua
Tahap  deklarasi  asumsi  pada  iterasi kedua  tidak  mengalami  banyak  perubahan dari iterasi yang pertama. Hanya dilakukan penambahan serta perbaikan fitur ke dalam rancangan  aplikasi  yang  didapat  dari  hasil iterasi pertama. Yaitu pada bentuk tampilan halaman  favorit  dan  notifikasi  di  samakan agar  terlihat  lebih  konsisten,  typo  pada setiap  halaman  di  perbaiki,  penambahan icon  dan  penambahan  kata-kata  di  kolom komentar,  dan  penambahan  foto  profile  / input  foto  pada  menu  profile.  Fitur
perbaikan  yang  ditambahkan  tersebut direpresentasikan  dengan  menggunakan task yang ada seperti di atas.
Use case Diagram
Iterasi  Pertama Use  case diagram disusun  untuk  mengetahui  apa  saja  yang dapat  dilakukan  oleh  pengguna  terhadap prototype aplikasi  mobile  mengenai  komik online .
Activity Diagram
Iterasi  Pertama Activity  Diagram dibuat untuk mengetahui alur yang akan dilakukan oleh  pengguna  terhadap  fungsi  yang  ada pada prototype aplikasi  mobile  mengenai komik online yang dibuat.
User flow Iterasi Kedua
User  flow pada  perancangan  desain UI/UX aplikasi mobile ini digunakan untuk menggambarkan langkah-langkah pada fitur  yang  dilakukan  oleh  pengguna  untuk mencapai  tujuan  dari  fitur  tersebut. User flow berupa langkah-langkah untuk dilakukan oleh pengguna dalam mengerjakan suatu task.

## 4. SIMPULAN
Simpulan  yang  dapat  diambil  dari perancangan desain user interface aplikasi mobile informasi produk
kosmetik  dengan  menggunakan  metode
User centered design yang telah dilakukan  dalam  penelitian  ini  maka didapatkan beberapa kesimpulan:
1. Menghasilkan prototype aplikasi mobile komik online menggunakan warna  dominan  Oren  yang  sesuai dengan  target  pengguna  yaitu user pembaca  komik online dengan kode  hexa  #FD6A02,  dengan menggunakan  font Roboto ,  tata letak  yang  relative  untuk  menjaga hirarki  tata  letak  tetap  sederhana, gaya  vertical  liner  layout  yang membuat  tampilan  lebih  rapih  dan sederhana sesuai dengan kebutuhan user .
2. Menghasilkan desain user interface yang  baik  sesuai  dengan  hasil  dari Usability testing menggunakan System Usability Scale  (SUS) dengan  hasil  70  yang  artinya prototype aplikasi  dapat  diterima oleh  pengguna  atau  memenuhi kepuasan  pengguna  dari  segi user interface .
3. Desain  perancangan user  interface pada  aplikasi  mobile  mengenai komik online yang dapat disimpulkan sudah memenuhi standar penilaian dari Usability dan user experience .

## 5. DAFTAR PUSTAKA
Lestari,  A.  F.,  &  Irwansyah.  (2020).  Line Webtoon  Sebagai  Industri  Komik Digital. Jurnal  Ilmu  Komunikasi ,
6 (2), 134–148.
Muhammad  Trisna  Firmansyah1,  Rahmat Fauzi2, S. fajar S. G. (2020).
e-Proceeding of  Engineering : Vol.7,  No.2
Agustus 2020 | Page 7574 Perancangan  User  Interface  Dan User Experience Mobile Application Sibengkel Untuk
Memenuhi  Kebutuhan  Pengguna
Dengan  Metode  User-Centered
Design (UCD) . 7 (2), 7574–7580.
Putra, K. A. S. A., Sugandi, & Arsyad, A.
W.  (2020). Representasi  Budaya
Toleransi  Masyarakat  Indonesia
Pada  Komik  Online  “Next  Door
Country.” 8 (1), 1.
Rina,  S.  (2016). Online  Webtoon  Users  –
Survey Report .