## Prototype User Interface Mobile App E-Learning
Henderi 1 , Praditya Aliftiar* 2 , Alwan Hibatullah 3
1 Program Studi Magister Teknik Informatika Universitas Raharja, 2 Program Studi Sistem informasi Universitas Raharja, 3 Program Studi Teknik Informatika Universitas Raharja Email : 1 henderi@raharja.info, *2 praditya.aliftiar@raharja.info ,
3 alwanhibatullah@raharja.info

## Abstrak
Teknologi  informasi  telah  berkembang  dengan  pesat  dari  waktu  ke  waktu.  Adapun  salah  satu teknologi  yang lumrah dimiliki oleh banyak  orang  saat ini  adalah smartphone dengan platform android dan IOS .  Dengan  mengetahui faktor  ini,  para mobile  developer saling berlomba  untuk merancang  aplikasi  dengan user  interface yang  menarik  sehingga user tertarik  untuk menggunakannya.  Pada  tahap  dalam  pengembangan  aplikasi mobile ,  dimulai  dari  perancangan prototype  user  interface .  Tahap  ini  bertujuan  untuk  memvisualisasikan  kebutuhan user , meningkatkan  pengalaman  pengguna  dan  mempermudah  proses coding oleh programmer . Dalam  penelitian  ini,  peneliti  menerapkan  metode prototype .  Penelitian  ini  menghasilkan sebuah  rancangan prototype  user  interface aplikasi e-learning yang  terdiri  dari high  fidelity prototype .
Kata kunci : prototype , user interface , aplikasi mobile, e-learning

## Abstract
Information  technology  has  developed  rapidly  from  time  to  time.  One  of  the  technologies commonly owned by many people today is smartphones with the Android and IOS platforms. By knowing  this  factor,  mobile  developers  compete  with  each  other  to  design  applications  with attractive  user  interfaces  so  that  users  are  interested  in  using  them.  At  this  stage  in  mobile application development, starting from designing a user interface prototype. This stage aims to visualize user needs, improve user experience and simplify the coding process by programmers. In  this  study,  researchers  applied  the  prototype  method.  This  research  produces  a  prototype design for the e-learning application user interface which consists of a high fidelity prototype.
Keyword : prototype, user interface, mobile app, e-learning

## 1. Pendahuluan
Seiring  dengan  pesatnya  perkembangan  teknologi,  penggunaan smartphone semakin meningkat.  Berdasarkan  survey  kominfo  pada  tahun  2017  menunjukan  sebanyak  66,3% masyarakat  indonesia  yang  telah  menggunakan smartphone dan  sebanyak  45%  masyarakat indonesia  menggunakan  internet. [1] Hal  ini  menunjukan  bahwa  cukup  banyak  masyarakat  yang menggunakan smartphone dan  internet  untuk  menunjang  berbagai  kebutuhan.  Banyaknya pengguna smartphone membuat  para mobile  developer saling  berlomba   untuk  merancang aplikasi dengan user interface yang menarik sehingga user tertarik untuk menggunakan aplikasi dan meningkatkan pengalaman pengguna dalam menggunakan aplikasi.
Pada  masa  dunia  yang  dilanda  pandemi  covid-19  seperti  sekarang  ini,  masyarakat  harus membatasi  segala  aktivitas  yang  menimbulkan  keramaian  dan  mematuhi  protokol  kesehatan yang  ada.  Salah  satu  aktivitas  yang  dibatasi  adalah  aktivitas  belajar  mengajar  yang  ada  di Kampus. Para Mahasiswa tidak diperkenankan untuk mengikuti pembelajaran di Kampus secara tatap muka. Oleh karena itu, melihat dari permasalahan ini peneliti berinisiatif untuk merancang
suatu  prototype  aplikasi  mobile  e-learning  yang  dapat  digunakan  oleh  Mahasiswa  untuk pembelajaran  melalui  daring.  Dengan  menggunakan  aplikasi  ini,  Mahasiswa  dapat  mengakses kelas  dimanapun  dan  kapanpun  dengan  menggunakan  smartphone  yang  terhubung  dengan jaringan internet.
Aplikasi    mobile    memiliki    tampilan    antarmuka    yang    menghubungkan    antara user dengan sistem yang disebut dengan user interface . Dalam proses merancang suatu tampilan user interface dimulai  dari  tahap prototyping dimana  berisi  gambaran  aplikasi  yang  nantinya  akan dikembangkan. Pada penelitian  ini proses prototyping menggunakan high fidelity . High fidelity prototype  memiliki  tingkat  presisi  tinggi  karena  sudah  memiliki  ukuran  baik  untuk  tata  letak, font , icon ,  warna  yang  digunakan,  dan  lainnya.  Dengan  dibuatnya high  fidelity prototype diharapkan dapat mempermudah programmer dalam proses coding aplikasi.

## 2. Metode Penelitian
Penulis  menggunakan  metode prototype dalam  merancang user  interface ,  sehingga diperoleh  gambaran mengenai  aplikasi  yang akan dikembangkan.  Pada bagian  ini  terdiri dari 3 langkah yaitu :
a. Pengumpulan kebutuhan
Di  tahap  ini  peneliti  mengumpulkan  data  yang  terdiri  dari  kebutuhan user agar prototype yang dibuat sesuai dan berjalan dengan baik.
b. Merancang prototype
Di  tahap  ini,  dibuat  rancangan prototype  user  interface sesuai  dengan  kebutuhan. Rancangan ini meliputi high fidelity prototype.
c. Evaluasi
Di  tahap  ini  peneliti  melakukan  evaluasi  dan  pengujian  terdahap  prototype  yang dirancang peneliti.
Gambar 1. Metode Prototype

## Literature Review
Berikut  ini  adalah  penelitian  yang  telah  dilakukan  dan  searah  dengan  topik  yang  akan dibahas pada jurnal ini, yaitu sebagai berikut:
1. Penelitian yang dilakukan  oleh  Aris  Martono,  Padeli,  dan  Rosalina  Miliartha mengenai “Rancang Bangun Aplikasi  Sistem Diskusi Pembelajaran Online Pada Perguruan Tinggi”.
Permasalahan  yang  dibahas  yaitu  perkembangan  diskusi  pembelajaran      untuk      kelas reguler      pada      perguruan      tinggi      raharja      kurang  berkembang,    sehingga    dibuatlah sebuah  wadah  untuk  diskusi  pembelajaran, sehingga  memudahkan  proses  pembelajaran diluar    perkuliahan.    Untuk  pengumpulan  data  pada  penelitian  ini  dilakukan  dengan
wawancara  dan  observasi,  serta  menggunakan  metode UML dalam  melakukan  pemodelan sistem [2]
2. Penelitian  yang  dilakukan  oleh  Atnis  Kurnia  Rianingtyas  dan  Kartika  Kusuma  Wardani mengenai  “Perancangan User  interface Aplikasi Mobile Sebagai  Media  Promosi  Digital UMKM Tour  and  Travel ”.  Permasalahan  yang  dibahas  yaitu  persaingan  usaha  dalam lingkup  bidang  tour  dan  travel  yang  dikuasai  oleh  travel  skala    besar,    sehingga    usaha skala    UMKM    membutuhkan media dalam  bentuk digital  untuk  mempromosikan  jasanya kepada  para  wisatawan.  Pada  penelitian  ini  digunakan  metode deep  interview dalam mengumpulkan  kebutuhan user . Penelitian ini  bertujuan  untuk  menghasilkan  rancangan prototype  user interface aplikasi mobile yang sesuai dengan rancangan user experience .[3]
3. Penelitian  yang  dilakukan  oleh  Syifa  Fauzia,  Fenty  Eka  Muzayyana  Agustin,  Undang Syaripudin dan Yuditha Ichsani mengenai   “Perancangan Prototype Tampilan Antarmuka Pengguna  Aplikasi Web Kamardagang.com  Dengan  Teknik Flat  Design Pada  PT.  Selaras Utama  Internasional”.  Permasalahan  yang  dibahas  yaitu user  interface pada  web kamardagang.com  yang  masih  sederhana  sehingga  membuat  web  kurang user friendly. Pada  penelitian  ini  menggunakan  teknik flat  design  dalam merancang prototype ,  sehingga tampilan  web  lebih  minimalis  dan  menekankan  pada  sisi  fungsionalitas.  Penelitian  ini bertujuan  untuk  menghasilkan  rancangan prototype user interface website kamardagang.com  yang  minimalis  , user    friendly ,    dan    memudahkan    para    front-end developer  pada  saat  penerapan desain prototype ke dalam aplikasi [4]
4. Penelitian    yang    dilakukan    oleh    Diky    Wardhani    dan    Akhmad    Pandhu    Wijaya mengenai  “Perancangan Prototype  User  interface Aplikasi Mobile Sistem  Informasi Akademik  Institut  Teknologi  dan  Bisnis  Bank  Rakyat  Indonesia”.  Permasalahan  yang dibahas  yaitu  BRI  Institute  sebagai  pemain  baru  dalam  dunia  pendidikan,  mencoba memanfaatkan  teknologi  informasi  untuk  menunjang  kegiatan  operasional  yaitu    sistem informasi  akademik.  Pada  penelitian  ini  menggunakan  metode prototype sehingga user dapat  memberikan  masukan  terkait  fitur-fitur  pada  aplikasi.  Penelitian  ini  bertujuan  untuk memudahkan  developer  pada  saat  mengembangkan  aplikasi  dan  meningkatkan user experience  saat  menggunakan  aplikasi.  Hasil  dari  penelitian  ini  yaitu  prototipe  antarmuka login , halaman menu, dan halaman perkuliahan. [5]
5. Penelitian  yang  dilakukan  oleh  Moh  Dani  Ariawan,  Agung  Triayudi  dan  Ira  Diana Sholihati  mengenai  “Perancangan User  Interface  Design dan User  Experience  Mobile Responsive Pada  Website  Perusahaan”.  Permasalahan  yang  dibahas  adalah  Pada    website direktorat  jenderal   ketenagalistrikan  masih   kurang user  friendly , dikarenakan  tampilan website    yang    kurang    menarik  dan    belum  responsive    saat  diakses  melalui  perangkat smartphone.  Pada  penelitian  ini  menggunakan  metode HCD sehingga  berfokus  pada pengguna. Penelitian  ini bertujuan untuk menerapkan aspek UI dan UX lebih nyaman saat mengakses web. [6]
6. Penelitian  yang  dilakukan  oleh  Malik  Abdul  Aziz,  Hanifah  Muslimah  Az-Zahra,  Lutfi Fanami  mengenai  “Evaluasi  dan  Perancangan User  interface Aplikasi Mobile Layanan Pengaduan  Masyarakat Online Menggunakan Human  Centered  Design ”.  Permasalahan yang  dibahas  yaitu  mengevaluasi  kualitas user  interface pada  aplikasi  RAPOR  dan  Qlue. Penelitian  ini  menggunakan  metode  pengujian  usability  testing  yang  didukung  dengan kuesioner  USE  dan  juga  metode  Human  Centered  Design.  Tujuan    penelitian    ini    yaitu untuk  mengevaluasi  dan  menghasilkan  rekomendasi rancangan user interface yang lebih baik. [7]

## 3. Hasil Dan Pembahasan

## 3.1 Use Case Diagram Mobile App E-learning
Gambar 2. Use Case Diagram Mobile App E-learning
Berdasarkan gambar 2 use case diagram di atas, dapat dijabarkan :
a.    1 sistem yang mencakup kegiatan secara keseluruhan pada mobile app e-learning . b.    2 actor yang melakukan kegiatan yaitu Dosen dan Mahasiswa. c.    16 use case yang dilakukan oleh actor tersebut.

## 3.2 Flowchart Mobile App E-learning
Gambar 3. Flowchart Mobile App E-learning
Pada  gambar  3 flowchart menjelaskan  alur  tentang  penggunaan mobile  app  e-  learning . Apabila user sudah  mendaftar  dan  memiliki  akun, user dapat  langsung  melakukan login ke dalam aplikasi, namun jika belum memiliki akun maka user harus register terlebih dahulu. Saat user berhasil melakukan login maka langsung diarahkan ke menu home . Pada menu home , user dapat melihat progress yang telah berjalan, total assignment , user juga dapat menginput kode kelas jika ingin bergabung dengan kelas yang diinginkan, serta dapat melihat beberapa kelas yang sudah diikuti oleh user .
Saat user mengklik  salah  satu  dari  beberapa  kelas  yang  sudah  diikuti,  maka  akan ditampilkan  beberapa  menu  diantaranya  yaitu  menu assignment ,  menu lesson dan  menu member . Pada menu assignment , user dapat melihat tugas yang telah diberikan oleh dosen. Serta pada  menu lesson , user dapat  melihat  materi  yang  ada  pada  kelas  tersebut,  dan  pada  menu member , user dapat  melihat  anggota  kelas  yang  terdiri  dari  dosen  dan  mahasiswa yang ada pada kelas tersebut.

## 3.3 High Fidelity Prototype
High  fidelity  Prototoype memiliki  tingkat  presisi  design  yang  tinggi  karena  sudah  memiliki ukuran  pada  tata  letak, font , icon ,  gambar,  warna  yang digunakan,  dan  lainnya. Pada  tahap  ini dirancang  menggunakan software figma.  Berikut  adalah  rancangan high  fidelity  user  interface mobile app e-learning :

## a. Halaman Login
Gambar 4. Tampilan Halaman Login
Pada gambar 4 halaman login terdapat terdapat beberapa elemen yang ada pada user  interface, yaitu  foto  ilustrasi,  input e-mail  dan  password , login  button untuk masuk ke dalam aplikasi dan  jika user belum  memiliki  akun, user diharuskan  untuk  daftar  terlebih  dahulu  melalui  link register pada bagian bawah.
b. Halaman Register
Gambar 5. Tampilan Halaman Register
Pada  gambar  5  halaman register terdapat  elemen-elemen  yang  ada  pada user  interface, yaitu foto  ilustrasi,  input  nama,  e-mail  dan  password.  Serta  terdapat register  button pada  bagian bawah.

## c. Halaman Home
Gambar 6. Tampilan Halaman Home
Pada  gambar  6  halaman home terdapat  beberapa  elemen  yang  ada  pada user  interface yaitu dashboard yang  berisi progress dan  total assignment .  Serta  terdapat search  bar untuk menginput  kode  kelas.  Pada  bagian  bawah  terdapat  elemen card yang  berisi  foto  ilustrasi  dan nama kelas.

## d. Halaman Assignment
Gambar 7. Tampilan Halaman Assignment
Pada  gambar  7  halaman assignment terdapat  beberapa  elemen  yang  ada  pada user  interface yaitu  nama  kelas,  nama  dosen,  3  navigasi  bar  yaitu assignment,  lesson  dan  member .  Serta terdapat elemen card yang berisi informasi  tugas, dan deadline tugas yang telah diberikan oleh Dosen.

## e. Halaman Lesson
Gambar 8. Tampilan Halaman Lesson
Pada  gambar  8  halaman lesson terdapat  beberapa  elemen  yang  ada  pada user  interface yaitu nama  kelas,  nama  dosen,  navigasi  yang  terdiri  dari assignment,  lesson dan member , serta card yang  berisi  foto  ilustrasi  ,  pertemuan,  deskripsi  materi,  serta text  learn  now untuk  mengakses materi.
f. Halaman Member
Gambar 9. Tampilan Halaman Member
Pada  gambar  9  halaman member terdapat  beberapa  elemen  yang ada  pada user  interface yaitu nama  kelas,  nama  dosen,  navigasi  yang  terdiri  dari assignment,  lesson dan member , serta card yang berisi foto user , nama user dan status user .
3.4  Pengujian Prototype
- Pada langkah ke 4, semua user cukup lancar berada di menu assignment .
- Pada  langkah  ke  5,  semua user cukup  lancar  berada  di  menu lesson .  Pada  langkah  ke  6, semua user cukup lancar berada di menu member.
- Dari  keempat  user  tidak ditemukan  user  yang bingung  pada  saat  berada  di
- langkah 1 s/d langkah 6.
Gambar 10. Skenario Test
Pada  gambar  10  tahap  pengujian  dibuat  skenario  yang berisi  step  1 sampai  6. Tujuannya  yaitu untuk  memandu user dalam  melakukan  tes.  Pada  step  1 user diarahkan  ke  tampilan register , step  2  menu login ,  step  3  menu home ,  step  4  menu assignment , step 5 menu lesson dan step 6 menu member .  Hasil  pengujian  kemudian  akan  dicatat  kedalam  tabel  hasil  dari  evaluasi  atau pengujian.
Tabel 1. Tabel Hasil Pengujian
Berdasarkan tabel 1 hasil pengujian, maka didapatkan hasil sebagai berikut :
●    Pada langkah ke 1, semua user cukup lancar berada di menu register .
●    Pada langkah ke 2, semua user cukup lancar berada di menu login .
●    Pada langkah ke 3, user 1 dan 3 kurang lancar berada di menu utama. Sementara user 2 dan 4 cukup lancar berada di menu utama.

## 4. Kesimpulan
Berdasarkan penjelasan yang telah dijabarkan pada penelitian ini, maka peneliti dapat menarik kesimpulan sebagai berikut :
1. Prototype dirancang  dengan  metode high  fidelity sehingga  dapat  menjadi  acuan programmer dalam proses coding aplikasi
2. Dari hasil pengujian dengan 6 skenario dan 4 user , didapatkan hasil bahwa prototype yang telah dirancang dapat dipahami oleh user dengan baik.

## 5. Saran
Dalam pengembangan selanjutnya, terdapat beberapa saran yang dapat menjadi evaluasi dan masukan, yaitu :
1. Penambahan  fitur video  conference pada  setiap  kelas, sehingga  Mahasiswa  dan Dosen dapat bertatap muka secara daring.
2. Pengembangan prototype menjadi  aplikasi mobile yang  dirancang  dengan framework maupun native .

## Daftar Pustaka
[1] Kominfo.  Survey  Penggunaan  TIK.  2017. Jakarta  :  Pusat  Penelitian  dan  Pengembangan Aplikasi  Informatika  dan  Informasi  dan  Komunikasi  Publik  Badan  Penelitian  dan Pengembangan  Sumber  Daya  Manusia  Kementerian  Komunikasi  dan  Informatika Republik Indonesia.
[2] Martono,  Aris.,  Padeli  dan  Rosalina  Miliartha.  2016.  Rancang  Bangun  Aplikasi Sistem  Diskusi  Pembelajaran Online Pada  Perguruan  Tinggi.  Tangerang:  Jurnal  CCIT. Vol. 9, No. 3.
[3] Rianingtyas,  Atnis  Kurnia  dan  Kartika  Kusuma  Wardani.  2018.  Perancangan User interface Aplikasi  Mobile  Sebagai  Media  Promosi  Digital  UMKM  Tour  and  Travel. Surabaya: Jurnal SAINS DAN SENI ITS. Vol. 7, No. 2. ISSN : 2337-3520.
[4]    Fauzia,  Syifa.,      Fenty  Eka  Muzayyana  Agustin,  Undang  Syaripudin  dan  Yuditha Ichsani.  2016.  Perancangan Prototype Tampilan  Antarmuka  Pengguna  Aplikasi  Web Kamardagang.com  Dengan  Teknik  Flat  Design  Pada  PT.  Selaras  Utama  Internasional.
Jakarta: Jurnal Teknik Informatika. Vol. 9, No. 2, Oktober 2016. ISSN : 1979-1960.\
[5]    Wardhani,  Diky  dan  Akhmad  Pandhu  Wijaya.  2020.  Perancangan Prototype  User interface Aplikasi Mobile Sistem Informasi Akademik Institut Teknologi dan Bisnis Bank Rakyat Indonesia. Jurnal BRI Tech Vol. 1, No. 2, Januari 2020. ISSN : 2686-6021.
[6]   Ariawan,  Moh  Dani.,  Agung  Triayudi  dan  Ira  Diana  Sholihati.  2020.  Perancangan User interface Design    dan User Experience    Mobile    Responsive    Pada    Website Perusahaan. Medan:  Jurnal  Media  Informatika  Budidarma.  Vol.  4,  No.  1,  Januari  2020. ISSN  :  2614-5278.
[7]   Aziz,  Malik  Abdul.,  Hanifah  Muslimah  Az-Zahra  dan  Lutfi  Fanami.  2019. Evaluasi  dan Perancangan User  interface Aplikasi  Mobile  Layanan  Pengaduan  Masyarakat  Online Menggunakan      Human      Centered      Design.      Malang:      Jurnal      Pengembangan Teknologi Informasi dan Ilmu Komputer. Vol. 3, No. 1, Januari 2019. ISSN : 2548-964.