## JITET (Jurnal Informatika dan Teknik Elektro Terapan)

## PERANCANGAN  UI/UX  MENGGUNAKAN  METODE USER  CENTERED  DESIGN  BERBASIS  WEB  PADA PERHITUNGAN  LUASAN  KUMUH  BALAI  PRASARANA PERMUKIMAN WILAYAH LAMPUNG
M Faisal Akbar Ritonga 1 , Mona Arif Muda 2 , Trisya Septiana 3 , M Komarudin 4

## 1,2,3,4 Jurusan Teknik Elektro Universitas Lampung
Riwayat artikel: Received: 3 Februari 2023 Accepted: 7 April  2023
Published: 12 April  2023

## Keywords:
User Interface, User Experience, User Centered Design, Luasan Kumuh, Web, SUS
Corespondent Email: faisal.mf617.mf@gmail.com
Abstrak Dalam  perancangan  aplikasi  web  perhitungan  luasan  kumuh membutuhkan  UI/UX  sebagai  bagian  dari  pembuatan website ,  UI/UX dirancang sesuai dengan kebutuhan user, UI/UX yang baik akan berdampak pada  pengalaman  para  pengguna  aplikasi  web.  Perancangan  UI/UX menggunakan metode User Centered Design (UCD), metode UCD digunakan untuk  memaksimalkan  interaksi  dengan user tentang  kebutuhan user pada aplikasi.  Pada  aplikasi  web  perhitungan  luasan  kumuh  terdapat  fitur  yang mempermudah user dalam  melakukan  pendataan,  fitur  ini  bertujuan  untuk mempersingkat waktu yang dibutuhkan untuk pendataan. Tampilan UI yang telah  dirancang  kemudian  dievaluasi  menggunakan System  Usability  sScale (SUS),  SUS  menghasilkan  nilai  skor  sus  yang  menentukan  tingkat keberhasilan UI, tampilan UI aplikasi perhitungan luasan kumuh mendapatkan nilai 84,5 dengan grade B dan dikategorikan acceptable yang berarti tampilan UI aplikasi perhitungan luasan kumuh sudah mencukupi kebutuhan user.
Abstract. In  designing  a  web  application,  calculating  the  area  of  slums requires UI/UX as part of making a website, UI/UX is designed according to user  needs,  good  UI/UX  will  have  an  impact  on  the  experience  of  web application  users.  UI/UX  design  uses  the  User  Centered  Design  (UCD) method,  the  UCD  method  is  used  to  maximize  interaction  with  users  about user needs in applications. In the slum area calculation web application, there is a feature that makes it easier for users to collect data, this feature aims to shorten  the  time  needed  for  data  collection.  The  UI  display  that  has  been designed  is  then  evaluated  using  the  System  Usability  Scale  (SUS),  SUS produces a sus score that determines the success rate of the UI, the UI display for the slum area calculation application gets a value of 84.5 with grade B and  is  categorized  as  acceptable,  which  means  the  UI  display  for  area calculation application slum is sufficient for user needs.

## 1. PENDAHULUAN
Direktorat  Jendral  Cipta  Karya  Pekerjaan Umum dan  Perumahan  Rakyat (Dirjen  PUPR) memiliki  program  kota  tanpa  kumuh  (kotaku) dalam  menangani  masalah  wilayah  kumuh  di provinsi  Lampung  yang  berkolaborasi  dengan
pemerintah  pusat  dan  pemerintah  daerah  serta melibatkan  berbagai stake  holder .  Dalam pelaksanaan  program  ini  dilakukan  dalam beberapa  tahapan  yang  terdiri  dari  pendataan, perencanaan,  pelaksanaan,  pemantauan  dan evaluasi, dan keberlanjutan[1].
Mekanisme  dan  proses  pendataan  terbilang merepotkan.  Hal  ini  terlihat  dari  proses pendataan  yang  berpindah-pindah  mulai  dari form , spreadsheet logbook SIM  kemudian  R0. Proses  pendataan  ini  terlihat  mengalami hambatan  yang  signifikan  pada  pemindahan data  tingkat  RT/RW  pada logbook SIM  ke  R0 dimana, proses pemindahan datanya dilakukan satu  persatu  dan  terbilang  merepotkan.  Untuk menangani  hal  tersebut  dirancang  aplikasi sederhana Linker yang dapat memotong proses pemindahan  data  dari logbook SIM  ke  R0.
Namun,  hal  tersebut  masih  belum  menangani masalah kesulitan dalam mekanisme pendataan dengan spreadsheet oleh surveyor sehingga kegiatan masih kurang efektif dan optimal Teknologi  aplikasi  berbasis  web  dirancang sebagai solusi dalam menangani permasalahan tersebut. Dengan kemampuan yang memungkinkan aplikasi dapat berjalan diperangkat manapun selama terhubung internet
memungkinkan kemudahan
penggunaan  dan  data  yang  terpusat.  Dengan memanfaatkan teknologi web dapat memudahkan  proses  perhitungan  dan  laporan dari kegiatan yang difasilitasi aplikasi web[2].
User Interface penting pada sistem aplikasi karena;  hampir  semua  aplikasi  memiliki antarmuka  pengguna, interface yang  buruk membuat  frustasi  bagi  pengguna  dan  akan mempengaruhi produktivitas, pesaing mungkin memiliki sistem yang lebih baik [3]
UCD ( User Centered Design ) adalah filosofi perancangan  yang  menempatkan  pengguna sebagai pusat dari proses pengembangan sistem. Pendekatan  UCD  telah  didukung  berbagai teknik, metode, tools , prosedur, dan proses yang membantu  perancangan  sistem  interaktif  yang lebih  berpusat  pada  pengguna.  sasaran  UCD adalah lebih dari sekedar membuat produk yang berguna.  UCD  menerjemahkan  partisipasi  dan pengalaman manusia ke dalam rancangan [4]
Agar  terciptanya  perancangan  tampilan antarmuka  yang  menarik  dan  memenuhi kebutuhan penggunaan aplikasi website perhitungan luasan kumuh, Dengan menggunakan pendekatan user centered design (UCD), dapat digunakan untuk kerangka proses perbaikan  dan  evaluasi  tampilan  antarmuka karena  perannya  yang  menempatkan customer sebagai pusat dalam pengembangan sistem [5].
Dari  pendekatan  metode user  centered design tersebut  diharapkan  dapat  memberikan desain rekomendasi yang dapat menyelesaikan masalah  yang  telah  didapatkan  dari  hasil evaluasi  dan  menghasilkan  tampilan user interface yang lebih baik dari sebelumnya.

## 2. TINJAUAN PUSTAKA
User  Interface dari  setiap  produk perangkat lunak sangat penting untuk keberhasilannya  [10].  Tidak  peduli  apa  ide hebat  yang  dibuat  oleh  pemilik  produk  dan bagaimana  teknologi komprehensif yang digunakan  oleh  tim  pengembangan  perangkat lunak, produk tidak akan berhasil jika pengguna bingung, takut atau tidak tahu cara menggunakannya.  Pembuatan User  Interface bertujuan untuk menjadikan teknologi informasi  tersebut  mudah  digunakan  oleh pengguna,  adapun  langkahlangkah  membuat User Interface [7]. User experience merupakan sebuah  pengalaman  ( experience )  yang  didapat oleh user bagaimana yang mereka rasakan dan interaksi pada setiap aspek dari produk atau jasa layanan [5].
UML digunakan dalam pemodelan visual dari suatu rancangan pemrograman atau proses rekayasa. UML dalam pemodelannya berorientasi objek yang menjadi standar dalam visualisasi, perancangan dan pendokumentasian sistem software .  Dengan  UML  digunakan beberapa  model  UML  untuk  menggambarkan aplikasi  perhitungan  luasan  kumuh  dalam beberapa  kasus  skenario.  Penggunaan  UML merupakan  standar  penulisan  dalam  membuat rancangan aplikasi [6].
Pengujian usability terhadap  aplikasi yang  dirancang  dengan  menggunakan  metode System Usability Scale (SUS). SUS merupakan alat survey yang dipergunakan untuk mengukur sejauh  mana  tingkat  kegunaan  suatu  sistem sehingga dapat diketahui apakah sistem tersebut memiliki  manfaat  bagi  pengguna  atau  tidak. Metode  SUS  menggunakan  kusioner  yang memiliki 10 butir pertanyaan dengan pengukuran jawaban menggunakan skala likert [7].

## 3. METODE PENELITIAN
Pada  laporan  penelitian  ini  menggunakan metode  UCD  yang  dimulai  dengan  persiapan
perancangan  desain  UI  kemudian  menentukan kebutuhan  pengguna  dan  merancang  tampilan UI  hingga  pematangan  desain  UI  yang menghasilkan    tampilan  perancangan  UI  yang sebelumnya  telah  diuji  terlebih  dahulu  dengan menggunakan  metode usability  testing dari aplikasi  perhitungan  luasan  kumuh. Metode UCD  ( User  Centered  Design )  memiliki beberapa  proses  yang  dapat  dilakukan  seperti pada gambar 2.1.

## 3.1. Understand Context of Use
Dalam  tahap  ini  dilakukan  perencanaan sebelum menjalankan UCD.

## 3.2. Specify User Requirements
Dalam tahap ini dilakukan untuk mengetahui bagaimana pengguna yang akan menggunakan website dan menentukan tujuan dalam pengukuran nantinya.
3.3. Design Solution Dalam
tahap   ini dilakukan proses pembuatan website dari hasil analisa sebelumnya

## 3.4. Evaluates Against Requirements
Dalam tahap ini dilakukan pengujian kepada pengguna mengenai website yang sudah dibuat dan menganalisis hasil pengujian.
Gambar 2.1 User Centered Design

## 3.4.1. Understand Context of Use
Tahap  ini  merupakan  persiapan  dari perancangan  UI  aplikasi  perhitungan  luasan kumuh  dengan  mengumpulkan  data  dengan cara wawancara dengan pihak terkait dan studi literatur serta pengumpulan data.

## 3.4.2. Specify User Requirements
Tahap specify  user  requirements dilakukan untuk  identifikasi  apa  saja  yang  pengguna butuhkan terhadap aplikasi website perhitungan luasan  kumuh,  pada  tahap  ini  akan  berisi surveyor sebagai actor dari aplikasi perhitungan luasan  kumuh  ,  kemudian use  case diagram dimana  diagram  ini  berisi  aktifitas actor interaksi yang terjadi pada aplikasi perhitungan luasan kumuh , activity diagram yang memuat berjalannya aplikasi perhitungan luasan kumuh dari login sampai  kepada  mengubah  hasil database R0  menjadi  dokumen  pdf  dan  excel dan  berjalannya  aplikasi  perhitungan  luasan kumuh, kemudian ditahap ini berisi user stories yang membahas tentang kebutuhan dari actor .

## 3.4.3. Design Solutions
Tahap design solutions
dilakukan perancangan  desain  UI yang  dimulai  dari membuat  sketsa  gambar interface tiap  bagian pada website yang  akan  berupa  perancangan antarmuka high-fidelity dari website perhitungan luasan kumuh. Perancangan desain ini dilakukan berdasarkan acuan yang didapatkan dari tahap understand context of use dan specify user requirements . Selanjutnya akan dirancang  desain user  interface dari  aplikasi perhitungan luasan kumuh yang akan digunakan  oleh  admin  dan surveyor dari  BPP
Wilayah Lampung.

## 3.4.4. Evaluate Against Requirements
Tahap evaluate  against  requirements akan dilakukan usability  testing pada  tampilan  UI website perhitungan luasan kumuh yang sudah dibuat  dengan tools Adobe  XD untuk mengetahui  tingkat  kesesuaian  rancangan user interface  website ini  dengan  kebutuhan  dan keinginan user .  Pada usability  testing ini akan menampilkan hasil pengujian aplikasi
perhitungan luasan kumuh dengan menggunakan  metode system  usability  scale (SUS) selanjutnya skor pada SUS akan dihitung dengan rumus perhitungan SUS untuk mendapatkan  skor  SUS  dari  aplikasi website perhitungan luasan kumuh yang telah dirancang desain nya menggunakan tools Adobe XD. skor SUS  didapatkan  dari  penyebaran  daftar
pertanyaan yang sudah ditentukan oleh metode SUS  kepada actor yang  akan  menggunakan aplikasi  tersebut,  skor  SUS  akan    menentukan pengalaman  yang  didapat  oleh actor selama menggunakan aplikasi, sehingga dengan penyebaran  pertanyaan  SUS  kami  dapat mengetahui kepuasan actor dalam
menggunakan  aplikasi,  skor  SUS  yang memiliki skor lebih dari 50 akan menunjukkan bahwa actor puas selama menggunakan aplikasi website perhitungan luasan kumuh.

## 4. HASIL DAN PEMBAHASAN

## 4.1. Understand Context Of Use
Pada tahap Understand Context of Use berisi pertanyaan  wawancara  dan  hasil  wawancara dengan  pihak  terkait  dengan  cara  wawancara menggunakan  kuisioner  yang  sudah  dibuat seperti pada tabel 1
Tabel 1 Tabel daftar pertanyaan
No Pertanyaan 1 Apa kendala pada kegiatan perhitungan luasan kumuh pada saat ini?
2 Teknologi dan metode apa yang digunakan pada saat ini?
3 Apakah teknologi saat ini sudah memenuhi? Apabila belum memenuhi apa yang menjadi kekurangannya?
4 Apabila  dikembangkan  teknologi  baru  apa yang dibutuhkan dan kemudahan seperti apa dalam  mendata  kekumuhan  desa  dalam program kotaku?
5 Siapa  saja  yang  akan  aktif  dalam  kegiatan pengolahan data kekumuhan?
6 Apabila  dikembangkan  teknologi  baru  apa saja batasan yang ditetapkan?
7 Apakah  data  yang  sudah  selesai  diinput nantinya akan digunakan kembali?
8 Apakah  tidak  masalah  apabila  harus terhubung  ke  internet  dalam  pengolahan data?
Tabel  1  merupakan  kuisioner  pertanyaan yang  dibuat  untuk  mendapatkan  jawaban tentang kebutuhan pengguna website perhitungan  luasan  kumuh  dengan  cara wawancara kepada pihak BPPWL [8], wawancara  dilakukan  bersama  3  orang
narasumber  yang  diantaranya  akan  menjadi user dan admin pada website perhitungan luasan kumuh [9].
Tabel 2. Tabel daftar jawaban
No Jawaban 1 Perlu pelatihan untuk setiap tim surveyor,
setiap tim surveyor dibagi beberapa daerah.  Proses  pengolahan  data  cukup menyulitkan karena data diinput dua kali untuk  data  hasil  wawancara  kekumuhan kemudian  diinput  kembali  untuk  data perhitungan R0 untuk menentukan tingkat kekumuhan.
2 Teknologi ditetapkan dari pusat menggunakan Excel
3 Tidak semua bisa Excel dan tidak semua surveyor masih muda dan cepat memahami perhitungan baseline . Penggunaannya  sangat  kompleks  untuk itu dibeberapa kasus terdapat masalah dan harus  menggunakan  Excel  yang  tidak semua  mempunyai  laptop  dan  cepat memahami penggunaan Excel
4 Harapannya  proses  penginputan  hanya  1 kali setelah wawancara dan yang terpenting mudah digunakan, bisa digunakan  dimana  saja  mudah  diinstall dan diakses
5 Beberapa pihak dalam tim surveyor yang bertanggung  jawab  untuk  input  data, kemudian pihak BPPW Lampung menjadi bagian  dari  admin  sebagai  penanggung jawab.  Tim surveyor menginput  data survey dan  beberapa  pihak  BPPW Lampung bertugas melihat proses penginputan data yang dilakukan oleh tim surveyor
6 Untuk  penggunaan  teknologi  baru  tidak termasuk dalam anggaran . oleh karena itu teknologi  yang  dibuat  harus  bisa  diakses tanpa melakukan transaksi dan tidak sulit dalam pemeliharaannya
7 Data-data  dijadikan  arsip  serta  sebagai acuan untuk kegiatan selanjutnya
8 Untuk penggunaan aplikasi dapat diakses secara offline namun  pihak  BPPW
Lampung  tidak  keberatan  apabila  belum memungkinkan  untuk  dapat  diakses secara offline , tim surveyor bisa mengumpulkan  data  dan  menginputnya setelah survey dan wawancara. Harapannya bisa digunakan untuk kegiatan offline dan  datanya bisa  diakses dari mana saja
Tabel  3.2.  Merupakan  tabel  jawaban  dari hasil wawancara yang telah dilakukan dengan 3 orang pihak BPPWL sebagai narasumber.

## 4.2. Specify User Requirements
Pada tahap Specify User Requirements berisi user stories use case diagram , use case scenario dan activity diagram yang menjadi acuan untuk tahap selanjutnya.
4.2.1. User stories User  stories dibutuhkan untuk menjelaskan kebutuhan  dari  pengguna  aplikasi website perhitungan  luasan  kumuh.  Pada  aplikasi  ini terdapat user yang  terbagi  menjadi  dua actor yaitu admin dan surveyor yang sudah terdaftar pihak  BPPWL.  Masing-masing  dari actor memiliki kebutuhan untuk menjalankan aplikasi website perhitungan  luasan  kumuh terdapat 27 user stories pada penelitian ini.

## 4.2.2. Use Case Diagram
Use  case diagram  merupakan  metode  yang digunakan  untuk  menggambarkan  kebutuhan fungsional user yang direpresentasikan sebagai actor dari sebuah sistem. pada aplikasi website perhitungan  luasan  kumuh    penggambaran kebutuhan  fungsional user .  Penggambaran kebutuhan fungsional ini menggunakan metode use case diagram yang dikelompokkan menjadi 2 actor yaitu. admin dan surveyor seperti pada
gambar 1 Gambar 1 Use case diagram
Gambar 1 merupakan use case diagram yang menggambarkan  kebutuhan  fungsional  dari admin  dan surveyor .  Pada use  case diagram menjelaskan kebutuhan fungsional. Terdapat 8 kebutuhan fungsional pada surveyor sedangkan pada actor terdapat 11 kebutuhan fungsional.

## 4.2.3. Use Case Scenario
Use  case  scenario menjelaskan  bagian  dari use  case diagram  yang  sebelumnya  dalam bentuk  skenario  kasus  yang  dilakukan  oleh actor .  Terdapat  30 use  case  scenario pada penelitian  ini  salah  satu  contoh  seperti  pada tabel 3
Tabel 3 Use case scenario
Login Ringkasan Admin mengakses admin area Aktor Admin Pre-kondisi Login Aliran Dasar User dengan  menggunakan kredensial  admin  yang  tepat dapat  masuk  ke  dalam  admin area Aliran Alternatif -
Post-kondisi
Dapat mengakses fitur admin
4.2.4. Activity Diagram
Activity diagram  berisi  detail  skenario  dari use case diagram. Activity diagram menjelaskan penjabaran  aktifitas  dari actor dalam  skenario penggunaan  fitur  dalam  bentuk  yang  lebih abstrak dan bertahap. Adapun beberapa activity diagram dari penelitian ini sebagai berikut:
Gambar 2  Admin login
Gambar  2  adalah activity diagram yang menjelaskan proses admin melakukan login ke dalam  aplikasi.  Proses  dimulai  dengan  admin yang menginput data kredensial untuk melakukan  autentikasi login, data  kredensial yang  diinput  pada  aplikasi  merupakan  data kredensial yang sudah dibuat oleh pihak terkait untuk  menjaga  keamanan  dalam  proses pendataan.
Gambar 3Manajemen user
Gambar  3    adalah activity diagram  yang menjelaskan  aktifitas  admin  dalam  melakukan proses manajemen user, setelah admin berhasil melakukan  autentikasi login aplikasi  langsung dapat  mengakses  fitur  manajemen user pada admin area.
Gambar 4 Manajemen hak akses
Gambar 4 merupakan activity diagram yang menjelaskan  aktifitas  admin  dalam  melakukan proses  manajemen  hak  akses,  admin  dapat melakukan  manajemen  hak  akses  dengan mengakses fitur manajamen akses yang terdapat pada  admin  area  untuk  menambah  atau menghapus hak akses user.

## Gambar 5 Manajemen survey
Gambar 5 merupakan activity diagram yang menjelaskan  aktifitas  admin  dalam  melakukan proses  manajemen survey, admin  dapat melakukan  manajemen survey dengan  cara mengakses semua fitur manajemen survey yang terdapat pada admin area.

## Gambar 6 Logout
Gambar 6 merupakan activity diagram yang menjelaskan  aktifitas  admin  dalam  melakukan proses logout, admin  dapat  mengakses  fitur logout untuk keluar dari aplikasi.
Gambar 7 Surveyor login
Gambar 7  merupakan activity diagram yang menjelaskan aktiftias surveyor dalam melakukan  proses login , surveyor melakukan autentikasi login dengan cara memasukkan data kredensial  yang  telah  dibuat  pihak  terkait  jika data kredensial sesuai makan surveyor berhasil masuk aplikasi dan dapat mengakses semua fitur
Gambar 8 Menambah survey
Gambar 8 merupakan activity diagram yang menjelaskan aktifitas surveyor dalam melakukan proses menambah survey , surveyor
dapat  mengakses  fitur  tambah survey untuk menambah survey.
Gambar 9 Logout
Gambar 9  merupakan activity diagram yang menjelaskan aktifitas surveyor dalam melakukan  proses logout , surveyor dapat mengakses  fitur logout untuk  keluar  dari aplikasi.
4.2.5. Designs Solutions
Design Solutions berisi perancangan wireframe aplikasi dan akan diimplementasikan dalam bentuk high fidelity
A. Wireframe Wireframe digunakan  sebagai  sketsa  awal yang digunakan sebagai acuan untuk membuat
high-fidelity dari  aplikasi  terdapat  240  sketsa yang  akan  diimplementasikan  kedalam  bentuk high fidelity.

## Gambar 10 Wireframe login
Gambar  10  merupakan  gambar wireframe login pada  aplikasi  yang  menjelaskan  proses admin  melakukan login ke  dalam  aplikasi. Wireframe akan  diimplementasikan  dalam bentuk protoype.
Gambar  11  Manajemen user, hak  akses, survey
Gambar  11  merupakan  gambar wireframe dari  fitur  manajemen user, hak  akses, survey yang  menjelaskan  aktifitas  admin  dalam melakukan  proses  manajemen user, setelah admin  berhasil  melakukan  autentikasi login aplikasi  langsung  dapat  mengakses  fitur manajemen user pada admin area.
Gambar 12 Melihat data survey
Gambar  12  merupakan  tampilan wireframe yang  menjelaskan  aktifitas  admin  dalam melakukan  proses  melihat  data survey, admin dapat  melakukan  proses  melihat  data survey dengan  cara  mengakses  fitur  data survey dan lokasinya  yang  terdapat  pada  manajemen survey.

## Gambar 13 Admin logout
Gambar  13  merupakan  gambar  tampilan wireframe  logout yang  menjelaskan  aktifitas admin  dalam  melakukan  proses logout, admin dapat mengakses fitur logout untuk keluar dari aplikasi.
Gambar 14 Tampilan awal surveyor
Gambar  14  merupakan  gambar  tampilan wireframe awal dari website perhitungan luasan kumuh  denga  mengakses  fitur start untuk memulai  proses  pendataan  perhitungan  luasan kumuh.
Gambar 15 Surveyor login
Gambar  15  merupakan  gambar  tampilan wireframe yang menjelaskan aktiftias surveyor dalam  melakukan  proses login , surveyor melakukan  autentikasi login dengan  cara memasukkan data kredensial yang telah dibuat pihak terkait jika data kredensial sesuai makan surveyor berhasil  masuk  aplikasi  dan  dapat mengakses  semua  fitur  yang  tersedia,  jika surveyor memasukkan  data  kredensial  yang tidak  sesuai  maka surveyor tidak  bisa  masuk mengakses aplikasi.

## Gambar 16 Menambah survey
Gambar  16  merupakan  gambar  tampilan wireframe yang menjelaskan aktifitas surveyor dalam  melakukan  proses  menambah survey , surveyor dapat mengakses fitur tambah survey untuk menambah survey .
Gambar 17 Surveyor logout
Gambar  17  merupakan  gambar  tampilan wireframe yang menjelaskan aktifitas surveyor dalam melakukan proses logout , surveyor dapat mengakses  fitur logout untuk  keluar  dari aplikasi  dan  langsung  menuju  halaman  awal website .

## B. High fidelity
High-fidelity dibuat berdasarkan acuan yang terdapat pada wireframe , high-fidelity merupakan  proses  pembuatan  tampilan  UI untuk  dikembangkan  pada front maupun back end aplikasi  terdapat  240  tampilan  UI  pada aplikasi.

## Gambar 18 Login
Gambar 18 merupakan gambar tampilan UI login pada  aplikasi  yang  menjelaskan  proses admin  melakukan login ke  dalam  aplikasi.
Proses  dimulai  dengan  admin yang menginput data  kredensial  untuk  melakukan  autentikasi login, data kredensial yang diinput pada aplikasi merupakan  data  kredensial  yang  sudah  dibuat oleh  pihak  terkait  untuk  menjaga  keamanan dalam proses pendataan.
Gambar  19  Manajemen user, hak akses, survey
Gambar 19 merupakan gambar tampilan UI dari  fitur  manajemen user, hak  akses. survey yang  menjelaskan  aktifitas  admin  dalam melakukan  proses  manajemen user, setelah admin  berhasil  melakukan  autentikasi login aplikasi  langsung  dapat  mengakses  fitur manajemen user pada admin area.
Gambar 20 Melihat data survey
Gambar 20 merupakan tampilan tampilan UI yang  menjelaskan  aktifitas  admin  dalam melakukan  proses  melihat  data survey, admin dapat  melakukan  proses  melihat  data survey dengan  cara  mengakses  fitur  data survey dan lokasinya  yang  terdapat  pada  manajemen survey.
Gambar 21 merupakan gambar tampilan UI logout yang menjelaskan aktifitas admin dalam melakukan proses logout, admin dapat
mengakses  fitur logout untuk  keluar  dari aplikasi.
Gambar 22 Tampilan awal
Gambar  22  merupakan  gambar  tampilan awal  dari website perhitungan  luasan  kumuh dengan  mengakses  fitur start untuk  memulai proses pendataan perhitungan luasan kumuh.

## Gambar 23 Surveyor login
Gambar 23 merupakan gambar tampilan UI yang  menjelaskan  aktiftias surveyor dalam melakukan  proses login , surveyor melakukan autentikasi login dengan cara memasukkan data kredensial  yang  telah  dibuat  pihak  terkait  jika data kredensial sesuai makan surveyor berhasil masuk  aplikasi  dan  dapat  mengakses  semua fitur  yang  tersedia, jika surveyor memasukkan data kredensial yang tidak sesuai maka surveyor tidak bisa masuk mengakses aplikasi.

## Gambar 24 Menambah survey
Gambar 24 merupakan gambar tampilan UI yang  menjelaskan  aktifitas surveyor dalam melakukan proses menambah survey , surveyor dapat  mengakses  fitur  tambah survey untuk menambah survey .
Gambar 25 Surveyor logout
Gambar 25 merupakan gambar tampilan UI yang  menjelaskan  aktifitas surveyor dalam melakukan  proses logout , surveyor dapat mengakses  fitur logout untuk  keluar  dari aplikasi  dan  langsung  menuju  halaman  awal website .

## 4.2.6. Evaluate Against Requirements
Pada  tahap Evaluate  Against  Requirements merupakan  tahapan  terakhir  dari metode  UCD dengan  mengumpulkan  5  responden  yang berhubungan  langsung  dengan  pihak  BPPWL untuk  diberikan  kuisioner  pertanyaan  SUS, kemudian  jawaban  dari  kuisioner  pertanyaan akan  dilakukan  perhitungan  skor,  skor  SUS digunakan  sebagai  acuan  penilaian  kepuasan actor  dalam  menggunakan  aplikasi website tersebut.

## Tabel 4 Kategori SUS
Grade Scale Acceptability Ranges Adjective Ratings A Acceptable Best Imaginable B Acceptable Excellent C Acceptable Good D Marginal Ok F Not Acceptable Worst Imaginable

## Tabel 5 Hasil perhitungan SUS
No Responden Skor Grad e Scal e Accepta bility Ranges Adjective Ratings 1 Responden 1 85 B Accepta ble Excellent 2 Responden 2 82,5 B Accepta ble Excellent 3 Responden 3 82,5 B Accepta ble Excellent 4 Responden 4 82,5 B Accepta ble Excellent 5 Responden 5 90 A Accepta ble Best Imaginab le Jumlah Skor 422,5 Rata - Rata 84,5 B Accepta ble Excellent
Tabel 5  merupakan tabel hasil perhitungan skor  SUS  yang  telah  dihitung  menggunakan rumus perhitungan SUS, hasil perhitungan yang didapatkan  menunjukan  nilai  skor  yang  bagus diatas  nilai  80,  nilai  skor  SUS  diatas  80 menunjukkan  nilai grade  scale yang  baik  dan nilai acceptability yang  didapat  dari  setiap responden  menunjukkan  hasil acceptability yang  baik  dengan  nilai  rata  -rata  hasil perhitungan  SUS  adalah  84,5  menunjukkan nilai  yang  bagus  dikarenakan  memiliki grade scale B. Dengan nilai rata-rata 84,5 menunujukkan acceptability  ranges yang  baik yaitu acceptable dan adjective  ratings yang didapat  adalah Excellent yang  berarti high- fidelity apikasi website perhitungan  luasan kumuh dapat diterima dengan baik. pergantian
warna  pada background data  profil  yang sebelumnya  hijau  menjadi  biru  dikarenakan warna  biru  melambangkan  Dinas  Permukiman Umum  dan  Perumahan  Rakyat  kemudian penambahan  fitur  hapus survey pada  riwayat survey bertujuan  untuk  memudahkan surveyor melakukan  penghapusan survey ,  perubahan dilakukan  karena  adanya  saran  dari  pihak BPPWL  bertujuan  untuk  memaksimalkan pengalaman pengguna aplikasi.

## 5. KESIMPULAN
Desain tampilan aplikasi telah dirancang sesuai dengan kebutuhan surveyor meliputi tampilan untuk survey, responden dan hasil survey yang  ditunjukan  dengan nilai  SUS yang  didapatkan  dari  civitas  BPPWL.  Dan desain  tampilan  aplikasi  telah  dirancang sesuai  dengan  kebutuhan  admin  meliputi tampilan untuk manajemen survey, manajemen  hak  akses  dan  manajemen  dan manajemen user yang  ditunjukan  dengan nilai SUS yang didapatkan dari civitas
BPPWL. Rancangan
UI/UX sudah memenuhi  kebutuhan  dan  memiliki  nilai usability yang  baik,  Berdasarkan  rata-rata nilai SUS yang didapat mencapai nilai 84,5 dengan kategori acceptable dan grade scale mendapat huruf mutu B.

## UCAPAN TERIMA KASIH
Penulis  mengucapkan  terima  kasih  kepada semua pihak pihak terkait yang telah membantu dalam penelitian.

## DAFTAR PUSTAKA
[1] Kementrian  PUPR,  “Tentang  Program  Kota
Tanpa Kumuh (Kotaku),”
Kotaku.
http://kotaku.pu.go.id/page/6880/tentangprogr am-kota-tanpa-kumuhkotaku  (accessed  May
12, 2021).
[2] Direktorat Jendral Cipta Karya, and Kementrian  PUPR,  “Pendataan  Baseline
Kotaku.” Feb. 20, 2020.
[3] Heny,  D.  (2016).  Analisis  User  Interface  dan User Experience pada Website Sekolah Tinggi Teknologi Adisutjipto Yogyakarta. Conference SENATIK  STT  Adisutjipto  Yogyakarta,  2,
183.
[4] Rahman, N. 2018. Implementasi Metode User Centred Design Pada Pengembangan Gim Matematika  Berbasis  Desktop  Bagi  Siswa  Sd
Negeri  1  Candiwulan.  Skripsi.  Yogyakarta: Universitas Islam Indonesia.
[5] Amborowati,  A.  (2012).  Rancang  Sistem Pameran  Online  Menggunakan  Metode  UCD (User Centered Design).
[6] Galitz,  W.  O.  (2007).  The  Essential  Guide  to User Interface Design: An Introduction to GUI Design  Principles  and  Techniques,  Third Edition. Indianapolis: Wiley Publishing, Inc.
[7] Garrett,  J.  J.  (2011).  The  Elements  of  User Experience Second Edition. California:
Peachpit.
[8] BPPW Lampung, “Prosedur Operasional Baku
(Pob) Pendataan Permukiman Kumuh
Partisipatif,” p. 59. [9] BPPW  Lampung,  “Proses  Pengolahan  Data Baseline 2020.” 2020.Direktorat Pengembangan Kawasan Permukiman,
[10] Susanto,  I.  (2009).  Interaksi  Manusia  dan Komputer edisi 2. Penerbit Andi.