Devanny, Desain User Interface Ramah Bagi Autism Spectrum Disorder … 343-359

## DESAIN USER INTERFACE RAMAH BAGI AUSTISM SPECTRUM DISORDER MELALUI PENGEMBANGAN WEBSITE APLIKASI "TEMAN INKLUSI”

## Devanny Gumulya
Desain Produk, Fakultas Desain, Universitas Pelita Harapan email: devanny.gumulya@uph.edu

## Abstrak
Orang  dengan Autism  Spectrum  Disorder (ASD)  menghadapi  masalah  yang  berbeda  ketika berinteraksi dengan informasi di situs web. Penelitian ini menginvestigasi rekomendasi desain User Interface (UI) yang dapat diakses untuk ASD melalui panduan UI ramah ASD serta pedoman easy to read information untuk orang dengan gangguan belajar. Penelitian ini berjenis kualitatif, dan mengikuti lima tahap design thinking : berempati, definisi masalah, ideasi, prototipe, dan pengujian.  Hasil  penelitian  ini  adalah  rancangan User  Interface "Teman  Inklusi"  yaitu  aplikasi situs  web  pembelajaran  assitif  untuk  ASD.  Hasil  penelitian  merekomendasikan  bahwa  saat membuat situs web untuk ASD, desainer harus dengan seksama mengatur variabel presentasi dan interaksi UI. Komponen UI harus memiliki lebih sedikit animasi, lebih sedikit jenis dan sedikit perbedaan  ukuran font ,  lebih  sedikit  gambar  kompleks,  lebih  banyak  area  putih,  dan pembahasan suatu topik yang kompleks dibuat dengan penyajian informasi disertai contoh yang disampaikan secara visual dan audio.  Dengan mengimplentasikan prinsip – prinsip UI ramah ASD  dan  pedoman easy  to  read  information untuk  orang  dengan  gangguan  belajar, website aplikasi Teman Inklusi berhasil mendapatkan rata-rata penilaian 96 (dari skala 1-100) dari uji coba pada 9 mahasiswa ASD. Penelitian ini berkontribusi pada pengembangan tentang prinsip- prinsip User Interface untuk mengembangkan situs web ramah autisme untuk konteks digital.
Kata Kunci: design thinking , user Interface , web ramah autisme

## Abstract
People  with  Autism  Spectrum  Disorder  (ASD)  encounter  distinct  issues  when  interacting  with information  on  websites.  We  investigate  the  requirements  for  developing  an  accessible  User Interface for users with autism spectrum disorders (ASD) as well as the rules for producing easy- to-read material for people with learning difficulties in this work. The research is qualitative, and it follows the five stages of design thinking: empathize, define, ideate, prototype, and test. The study's outcome is the User Interface of "Teman Inklusi," a learning assistive website application for people with autism spectrum disorder. According to the study, while creating a website for ASD, designers should carefully arrange the UI presentation and interaction. It must have less animation,  fewer  font  types  and  sizes,  fewer  complex  pictures,  more  white  space,  and  an example  that  is  conveyed  both  visually  and  audibly  when  discussing  complex  topics.  By implementing the UI for ASD and easy to read and the guidelines for the production of easy-to- read information for people with learning disabilities, the proposed website application "Teman Inklusi" got an average score of 96 from scale 1 – 100 from user Testing with 9 ASD. This research contributes to a better knowledge of the User Interface principles for developing autism-friendly websites in the digital world.
Keywords: austism spectrum disorder friendly website, design thinking, user interface
http://publikasi.dinus.ac.id/index.php/andharupa/index
__________________ Received: 16 February 2022 _________________________ Available online at: bit.do/andharupa 25 September 2023 _________________________

## 1. PENDAHULUAN
Autism spectrum Disorder (ASD) adalah suatu kondisi gangguan saraf di otak manusia yang  menyebabkan  keterlambatan  perkembangan  seseorang  pada  kemampuan berkomunikasi  serta  berinteraksi  sosial.  ASD  ditandai  dengan  pandangan  mata  yang tidak konsisten dan pola prilaku berulang-ulang (Ismail & Rozzani, 2021; Utami, 2018). ASD seperti anak pada umumnya memiliki tingkat kecerdasan dan gaya belajar beragam yang  dikenal  dengan  VARK  yang  merupakan  singkatan  dari Visual,  Auditory,  Reading, and  Kinesthetic (Gutierrez  et  al.,  2018) . Visual adalah  kemampuan  seseorang  untuk belajar dari apa yang dilihatnya. Auditory adalah kemampuan seseorang untuk belajar dari  apa  yang  didengarnya. Kinestethic adalah  kemampuan  seseorang  untuk  belajar dengan  mempraktikkan  apa  yang  dipelajari.  80%  gaya  belajar  ASD  adalah visual kinesthetic (Yu et al., 2018).
Gaya  belajar  yang  berbeda-beda  ini  dapat  diakomodasi  dengan  media  edukatif  yang didukung  dengan  teknologi  komputer  dan  internet  yang  saat  ini  sudah  banyak membantu  ASD  (Valencia  et  al.,  2021).  Komputer  dapat  membantu  kendala  interaksi antara  ASD  dan  orang  lain  dengan  memungkinkan  bentuk  komunikasi  yang  baru, sosialisasi serta metode pembelajaran yang baru.
Belajar dengan metode flash card bagi ASD
Belajar  dengan  flashcard  adalah  hal  yang  umum  bagi  ASD.  Dalam  proses  terapi  ASD menggunakan metode flashcard Picture Exchange Communication System (PECS). PECS merupakan salah satu wujud dari Augmentative and Alternative Communication (AAC) yaitu  suatu  sistem  komunikasi  alternatif  dengan  media  bergambar  untuk  membantu ASD  berkomunikasi  dengan  orang  disekitarnya. Dalam  PECS  penekanan  ada  di  kata “ exchange ”  dimana ASD  berkomunikasi dengan bertukar  kartu  gambar dengan orang lain untuk meminta sesuatu atau mengkomentari sesuatu.
Sejarahnya, PECS dikembangkan di negara Amerika Serikat di tahun 1985 oleh seorang ahli pendidikan Autistic. Sistem PECS pertama kali diterapkan untuk siswi ASD usia PAUD di Kota Delaware, Amerika Serikat. PECS dinilai berhasil dan akhirnya berkembang ke seluruh  dunia  dan  menjadi  metode  standar  yang  diajarkan  ketika  ASD  terapi  untuk membantunya untuk berkomunikasi dengan orang sekitarnya. Terdapat enam tahapan PECS  berdasarkan  buku  B.F.  Skinner  berjudul  “Verbal  Behavior,  and  Broad  Spectrum Applied Behavior Analysis” (Sautter & LeBlanc, 2006)
Tabel 1. Tahapan PECS [Sumber: Sautter & LeBlanc, 2006]
Tahapan Penjelasan Tahap 1: Cara berkomunikasi ASD  belajar  mengasosiasikan  objek  yang  ada  di  kartu bergambar dengan objek riil. Sebagai contoh, bila di kartu terdapat  gambar  boneka,  maka  ASD  diajar  untuk memahami ketika ia menukarkan kartu bergambar boneka ia akan mendapatkan boneka yang riil.
Tahapan Penjelasan Tahap 2: Jarak dan Konsistensi Setelah memahami bahwa kartu dapat ditukarkan dengan objek  riil,  ASD  kemudian  diperkenalkan  pada  tahap memberikan  kartu  kepada  orang  yang  tidak  berada  di dekatnya.  Ini  melibatkan  ASD  dalam  pemahaman  jarak saat menukarkan kartu dengan objek yang diinginkannya. Selanjutnya,  tahap  berikutnya  melibatkan  ASD  dalam mengambil  jarak  dari  kartu,  sehingga  ia  harus  berjalan untuk mengambil kartu dan kemudian berjalan lagi untuk memberikannya  kepada  lawan  bicara.  Konsistensi  dalam melakukan  tahapan  ini  sangat  penting.  Tujuan  dari tahapan ini adalah mengajarkan ASD untuk berkomunikasi melalui PECS dengan objek yang beragam dalam berbagai situasi dan dengan berbagai orang. Selanjutnya di tahap ini penggunaan  PECS  dikembangkan  dengan  menggunakan alat  bantu  tambahan  yaitu  buku  komunikasi  PECS, didalamnya  terdapat  beberapa  lembar  papan  dengan perekat  sementara  seperti  selotip.  Pada  papan  tersebut direkatkan  kartu-kartu  bergambar  sesuai  dengan perkembangan  kosakata  ASD.  Kartu  bergambar  semakin kompleks  kombinasi  kata  benda,  kerja,  sifat  dan keterangan.  ASD  diajarkan  untuk  mengambil  kartu  dari dalam  buku  dan  merekatkan  kartu  yang  mereka  ingin komunikasikan di bagian muka buku. Tahap 3: Diskriminasi Gambar Di  tahap  ini  penggunaan  buku  komunikasi  PECS  di tingkatkan  komplekstisitasnya.  ASD  diajarkan  untuk membedakan  dua  kartu  mulai  dari  katagori  yang  sama kata  benda,  hingga  berbeda  katagori  seperti  kata  benda dan kata kerja. Di tahap ini ASD dievaluasi apakah ia dapat mengambil kartu yang tepat untuk objek yang tepat. Tahap 4: Struktur kalimat Di tahap selanjutnya, penggunaan buku komunikasi PECS ditingkatkan,  ASD  diajarkan  untuk  membuat  kalimat sederhana  dengan  beberapa  kartu  PECS  pada  papan kalimat.  Papan  kalimat  ditempel  beberapa  kartu  PECS. ASD  diajarkan  untuk  memberikan  papan  kalimat  pada lawan bicara baru ia mendapatkan objek yang diinginkan. Lawan bicara mengajak ASD untuk mengatakan objek yang ada di kartu PECS. Misalnya Saya ingin jus jeruk. Tahap 5: Bertanya secara responsive Di tahap ini ASD sudah semakin mahir menggunakan PECS dan ASD belajar menjawab pertanyaan dengan kartu PECS. Lawan  bicara  bertanya  pada  ASD,  Apa  yang  kamu inginkan? ASD menjawab dengan memiliki kartu PECS dan merekatkannya pada papan kalimat.
Tahapan Penjelasan Tahap 6: Berkomentar Setelah  ASD  dalam menjawab  dengan  kartu  PECS.  Maka ditahap  selanjutnya  ASD  diajar  untuk  memberikan komentar  pada  situasi  disekitarnya  seperti:  Apa  yang dilihat?  Apa  yang  didengar?  ASD  menjawab  dengan mengambil  kartu  kata  kerja  dan  kata  benda.  Kartu  kata kerja Saya lihat ( I see ) dan kartu kata benda (anjing). ASD juga  diajarkan  untuk  membedakan  Saya  lihat  dan  Saya ingin.  Jadi  ada  kalanya  ASD  dapat  menggunakan  PECS untuk  menjelaskan  objek  yang  dilihat  bukan  untuk mendapatkan objek tersebut.
Kelebihan dari metode PECS adalah (National Autism Resources, 2023) adalah 1) mudah untuk  digunakan,  karena  pendamping  ASD  tidak  perlu  memerlukan  pelatihan  khusus yang lama untuk menggunakan kartu PECS dan alat bantunya; 2) ASD diajarkan secara bertahap untuk menggunakan kartu PECS; 3) PECS dibuat dari bahan-bahan yang mudah didapat, sehingga dapat direplikasi dengan mudah oleh siapapun; dan 4) penggunaan PECS  dapat  diadaptasikan  di  berbagai  kondisi  dan  perkembangan  ASD.    PECS  sendiri telah  memiliki  aplikasi  yang  disebut  "Card  Talk"  yang  memiliki  tampilan  seperti  yang ditunjukkan  gambar  1.  Dalam  aplikasi  ini,  ASD  dapat  menggunakan  kartu  bergambar yang  sudah  tersedia,  di  mana  setiap  kartu  dilengkapi  dengan  suara.  Hal  ini memungkinkan kartu tersebut membantu ASD dalam berkomunikasi dengan orang lain.
Gambar 1. Tampilan muka aplikasi Card Talk
[Sumber: Dokumentasi Penulis, 2022]
Selain itu aplikasi terdapat menu untuk membuat kartu bergambar sendiri dengan fitur kamera,  rekaman  suara  dan  label  sehingga  kartu  dapat  bertambah  sesuai  dengan kosakata ASD.
Gambar 2. Fitur membuat kartu bergambar Card Talk [Sumber: Dokumentasi Penulis, 2022]
Prinsip-Prinsip Easy to Read Information Untuk Orang dengan Gangguan Belajar ASD termasuk dalam kategori orang dengan gangguan belajar, untuk itu perlu didalami bagaimana mempersiapkan informasi yang mudah dipahami. Pedoman ini diambil dari European  Guidelines  for  the  Production  of  Easy-to-Read  Information  for  People  with Learning  Disability (Freyhoff  et  al.,  1998) . Karakteristik  dari  dokumen  yang  mudah dibaca  untuk  orang  dengan  gangguan  belajar  adalah  (a)  Penggunaan  bahasa  yang sederhana dan lugas sesuai dengan usia pembaca, (b) Satu ide pokok per kalimat, (c) Tidak menggunakan istilah-istilah khusus, singkatan, inisial, (d) Struktur kalimat jelas dan logis, (e) Terdapat gambar, simbol, ikon yang membantu menjelaskan, dan (f) Terdapat contoh penjelasan.
User Interface untuk Austism Spectrum Disorder
User Interface (UI) adalah bagian dari sistem yang berperan sebagai penengah antara pengguna  dan  sistem  dan  memfasilitasi  agar  pengguna  dapat  menggunakan  sistem secara  efisien  (Chithra  &  Henila,  2019).    Secara  sederhana,  UI  adalah  tampilan  antar muka dari suatu produk digital seperti aplikasi, website , piranti lunak. Tampilan antar muka terbentuk dari elemen-elemen visual seperti font , ikon, tombol, navigasi, menu, tool  bar ,  kotak  teks ,  input,  form,  list ,  dan modal  window .    Berdasarkan  rekomendasi pedoman World Wide Web Consortium (W3C) melalui Web Accessibility Initiative (WAI) untuk meningkatkan kemudahan aksesbilitas bagi orang- orang dengan keterbatasan, maka Pavlov (2014) dan Yu et al. (2018) dalam hasil penelitian merumuskan persyaratan User Interface bagi ASD.
Tabel 2. Pandungan User Interface untuk Austism Spectrum Disorder [Sumber: dikembangkan dari Pavlov, 2014 dan Yu et al., 2018]
No Variabel Hal yang sebaiknya dilakukan Hal yang sebaiknya dihindari 1 Presentasi • Gunakan font dan latar belakang yang kontras • Gunakan warna lembut dan tidak kontras • Pastikan kotak box jelas terpisah dengan bagian yang lain
• Gunakan teks dalam 1 kolom
• Penggunaan warna terang
• Penggunaan gambar di latar belakang
• Teks dan gambar yang bertumpuk
No Variabel Hal yang sebaiknya dilakukan Hal yang sebaiknya dihindari • Gunakan grafik yang sederhana • Gunakan gambar yang sederhana • Gunakan font sans-serif yang jelas • Ukuran font tidak boleh lebih kecil dari 14 pt • Kombinasi font maksimal 2
• Penggunaan elemen pop up
yang dapat mengganggu fokus ASD
• Kombinasi warna yang terlalu banyak 2 Interaksi • Desain sederhana dan menggunakan sedikit elemen di layar • Sebaiknya tool bar hanya 1 • Menggunakan instruksi pendek di setiap langkah • Penggunaan interface yang tidak teratur
• Penggunaan button dengan gambar ikon saja, kecuali
untuk aksi “kembali”
3 Personalisasi • Jarak baris
• Tema untuk layar teks dan

## background
Pavlov (2014) memberikan contoh implementasi prinsip UI ramah ASD pada karyanya membuat website aplikasi  bernama  openbook  untuk  melakukan  penyederhanaan bahasa  bagi  ASD.  Pada  rancangan  ini  dapat  dilihat  bagaimana  implementasi  prinsip- prinsip  UI  ramah  ASD.    Dapat  dilihat  pada  gambar  3,  Pavlov  (2014)  membuat  setiap button terdapat ikon dan teks, font sans serif, 1 tool bar , semua teks dalam 1 kolom, warna  keseluruhan website aplikasi  adalah  kombinasi  abu-abu  dan  biru  yang  tidak kontras, namun warna button dan teks kontras agar mudah dikenali ASD.
Gambar 3. Contoh website ramah ASD [Sumber: Dikembangkan dari Pavlov, 2014]
Yu et al. (2018) juga melakukan penelitian pada website yang ramah ASD, dinyatakan website di  sebelah  kiri  lebih  ramah  ASD  dari website di  sebelah  kanan,  karena menggunakan  tipe font yang  lebih  sedikit. Website di  sebelah  kanan  menggunakan  3 tipe font yang beragam. Selain itu website di sebelah kiri tidak terdapat animasi iklan seperti di website sebelah kanan.
Gambar 4. Contoh website ramah ASD [Sumber: Dikembangkan dari Yu et al., 2018]
Dari  penelitian  terdahulu  dapat  dilihat  bahwa  penelitian User  Interface ramah  ASD masih dapat dikembangkan. Untuk membuat kartu bergambar untuk ASD, saat ini baru ada aplikasinya tetapi belum ada dalam format website aplikasi. Penelitian ini dilakukan ke arah perancangan website aplikasi untuk penggunaan desktop dengan argumen yaitu 1) ASD di tingkat perkuliahan memiliki pelajaran dengan kosakata yang lebih sulit dan banyak mempelajari konsep abstrak, dan 2) Nature perkuliahan banyak menggunakan laptop,  karena  proses  belajar  akan  lebih  maksimal  bila  menggunakan  laptop  dari smartphone .
Studi ini bertujuan untuk mengisi gap penelitian website aplikasi kartu bergambar untuk ASD. Kontribusi penelitian ini pada keilmuan desain adalah menemukan pengetahuan baru dalam proses merancang website aplikasi kartu bergambar untuk mahasiswa ASD dengan  menerapkan  prinsip-prinsip  UI  ramah  ASD  serta  pedoman Easy  to  Read Information pada website aplikasi  untuk  membantu  mahasiswa  ASD  berkomunikasi dengan  dosen  serta  teman  kuliah  dan  membantu  ASD  dalam  mempelajari  konsep- konsep abstrak.

## 2. METODE PENELITIAN
Penelitian  berjenis  kualitatif  dengan  mengadaptasi  model design  thinking (Platner, 2015) yang terdiri dari lima tahapan yang bergerak secara iteratif:
Gambar 5. Diagram alir penelitian
[Sumber: Dokumentasi Penulis, 2022]
Tahap  pertama  adalah  empati  yaitu  peneliti  mengidentifikasi  kendala  ASD  dalam perkuliahan. Tahap kedua yaitu definisi dimana peneliti mengidentifikasi pemasalahan ASD dalam perkuliahan. Tahap ketiga adalah ideasi yaitu peneliti mencari ide website aplikasi dengan menerapkan prinsip-prinsip UI ramah ASD serta pedoman Easy to Read Information. Tahap  keempat  adalah  prototipe,  rancangan website aplikasi  dibuat prototipe dan interaktifnya di piranti adobe XD. Tahap terakhir atau tahap kelima yaitu Testing dimana  rancangan website aplikasi  diujii  pada  5  ASD.  Responden  diminta memberikan review dalam bentuk simple usability Testing .

## 3. HASIL DAN PEMBAHASAN

## 3.1 Tahap Empati
Pada  tahap  empati  dilakukan  wawancara  pada  9  responden  ASD,  proses  wawancara dilakukan bersama dengan pendamping yang sebagian besar adalah ibu dari ASD.
Gambar 6. Suasana wawancara dengan responden [Sumber: Dokumentasi Penulis, 2022]

## Data demografi responden adalah sebagai berikut
Tabel 3. Data Responden Penelitian
[Sumber: Dokumentasi Penulis, 2022]
ASD Pen- damping Jenis Kelamin Usia Universitas Sem- ester Jurusan Alasan memilih jurusan Hobi ASD A Ibu Laki-laki 25 Universitas Kristen Duta Wacana Yogyakarta (UKDW) 7 Pendidikan Bahasa Inggris Belum tahu Baca buku, nonton TV, dan main musik ASD B Ibu dan kakak Laki-laki 21 Universitas Negri Surabaya (UNESA) 3 Pendidikan Kesejahtera an Keluarga (PKK) Kesukaan saya Memasak ASD C Ibu Laki-laki 22 Universitas Terbuka 8 Akuntansi Pilihan orang tua Origami dan menggambar ASD D Ibu Laki-laki 20 Universitas Pelita Harapan 4 Desain Produk Ingin mengambil desain otomotif Browsing internet, memberes- kan barang, memberes- kan tas ASD E Ibu Perempuan 25 Universitas Airlangga Surabaya Sudah lulus Matematika Kesukaan saya Nonton balapan. Mendengar- kan musik
ASD Pen- damping Jenis Kelamin Usia Universitas Sem- ester Jurusan Alasan memilih jurusan Hobi ASD F Ibu Laki – laki 22 Universitas Negri Surabaya (UNESA) 5 Pendidikan Luar Biasa/PLB karena saya salah satu bagian dari jurusan yang saya ambil Menyanyi ASF G Ibu Laki – laki 22 Universitas Negri Surabaya (UNESA) 5 D3 Desain Grafis Meng- gambar dan main playstation Nonton TV ASD H Ibu Perempuan 19 Universitas Negri Surabaya (UNESA) 1 Pendidkan Luar Biasa Melihat orang-orang disekeliling saya Menari ASD I   Ibu Laki - laki 22 Universitas Negri Surabaya (UNESA) 5 D3 Desain Grafis Kesukaan saya Bersepeda Secara garis besar karakter responden ASD adalah a) Extrovert (4/9 = 44.4%)
b) Agak penyindiri dan sedikit suka keramaian (4/9 = 44.4%)
c) Bertanggung jawab (5/9 = 55.6%)
d) Emosi netral (5/9 = 55.6%)
e) Suka mencoba hal yang baru (4/9 = 44.4%)
Secara garis besar responden terdiagnosa ASD di usia PAUD 4 – 5 tahun, seluruh ASD pernah menjalani terapi di usia PAUD, dan berhenti terapi di usia 9 tahun. Namun ada 1 ASD yang terapi hingga SMP.  Tiga terapi yang umum dijalani ASD adalah terapi perilaku, terapi bicara, Applied Behavior Analysis (ABA) dan terapi bermain.  Semua ASD pernah menggunakan PECS saat terapi dan fitur yang disukai adalah penjelasan dalam bentuk teks dan gambar. Dari hasil wawancara 9 ASD pada tahap empati ditemukan tema-tema sebagai berikut:
Tabel 4. Hasil tahap empati [Sumber: Dokumentasi Penulis, 2022] Tema Kutipan Wawancara yang Representatif a. Kendala Akademik
Kendala komunikasi bahasa ( language impairment ) "Hampir tidak pernah berkomunikasi dengan orang baru" ASD D "Susunan kalimat SPOK-nya suka berantakan", pendamping ASD A "Sulit bercerita dengan runut pasti ada yang salah", pendamping ASD E Kendala pemahaman ( decoding ) "Saya susah sekali memahami bacaan buku dengan teks panjang ", ASD A "Sulit sekali memahami konsep abstrak seperti pernikahan", ASD B
"Sulit sekali menangkap bahan kuliah yang panjang", ASD A "Saya tidak mengerti materi kuliah", ASD C "Saya tuh sulit mengingat resep yang berbeda-beda", ASD D
Tema Kutipan Wawancara yang Representatif Kendala menghubungkan informasi dengan pengetahuan sebelumnya ( retrieving and integrating information )
"Terkendala di pelajaran sosial yang sifatnya tidak baku dan banyak pilihannya seperti prilaku yang mencerminkan sila ke-
2 itu apa aja", pendamping ASD E
“Saya sulit mencari bahan untuk tugas kuliah dan tidak tahu bertanya ke siapa," ASD C
Kendala analisa "Saya sulit menganalisa materi kuliah yang panjang", ASD A b. Kendala non Akademik Kendala interaksi sosial "Teman-teman tidak peduli dengan kondisi Saya", ASD A
"Sudah diingatkan berkali-kali, kalau bertemu dosen harus mengucapkan salam dan permisi dulu", pendamping ASD E "Tidak peka dengan kondisi orang lain melihat prilakunya aneh", pendamping ASD B Fokus pada dunia sendiri  "Tidak merasa sepi, karena ia memiliki banyak hobi mulai dari menggambar, melipat, menulis dan membuat kue, pendamping ASD Kendala tidak percaya diri "Merasa cemas sekali karena teman-teman saya suka menyepelekan dan merasa dirinya lebih hebat dari orang lain, jadi saya menjadi tidak percaya diri,” ASD A

## 3.2 Definisi Masalah
Dari  data  wawancara,  penulis  mendefinisikan  masalah  yang  akan  dipecahkan  dalam perancangan yaitu
a) Atensi  ASD  yang  singkat.  ASD  memiliki  atensi  fokus  yang  singkat  5-10  menit. Beberapa kali saat diwawancara ASD menjawab di luar pertanyaan yang ditanyakan.
b) Kendala  Bahasa.  ASD  terkendala  dalam  berbahasa  dengan  struktur  yang  baik  dan benar.
c) Kendala  Pemahaman  Mata  Kuliah  Non  Eksak.  ASD  terkendala  dalam  memahami pelajaran  dengan  konsep  abstrak  seperti  kewarganegaraan,  Pancasila,  pelajaran dengan pemahaman nilai – nilai yang abstrak dan tidak pasti.
d) Sistem  sosialisasi  ASD.  ASD  sulit  bersosialiasi  dengan  teman  sejurusan,  karena lingkungan  kuliah  yang  jauh  lebih  luas  dari  SMA.  ASD  lebih  leluasa  berkomunikasi melalui teks dari percakapan verbal. ASD terkendala dalam tugas presentasi di depan kelas.

## 3.3 Ideasi
Dari  masalah-masalah  yang  ditemukan  maka website aplikasi  yang  dirancang  akan menyelesaikan masalah akademik dan non akademik dengan metode kartu bergambar yang  diadaptasikan  dari PECS  dan dibuat  sesuai dengan  prinsip-prinsip  UI  ramah  ASD serta pedoman Easy to Read Information .  Konsep dari website aplikasi ini adalah suatu platform diberi nama Teman Inklusi, dengan misi ingin menjadi teman bagi ASD selama masa kuliah.  Studi kasus dari website aplikasi ini adalah untuk konteks Universitas Pelita Harapan (UPH), untuk pembelajaran mata kuliah (MK) umum non eksak sebagai studi kasus pertama adalah untuk MK Kewarganegaraan dan Pancasila.
Website ini menghubungkan pihak akademik yaitu dosen, ASD, dan pihak non akademik yaitu mentor dari student life UPH dan konselor di Hope (sebuah layanan konseling milih Yayasan Universitas Pelita Harapan). Walau UPH belum menyelenggarakan pendidikan inklusi  namun  UPH  sudah  memiliki  pihak-pihak  yang  dapat  membantu  ASD.  Sebagai langkah awal keduanya dapat saling bersinergi untuk membantu kendala akademik dan non  akademik  ASD  dipertemukan  di platform teman  inklusi.    Keberadaan website aplikasi teman inklusi adalah sebagai pendukung website learning management system (LMS) UPH.  Pengguna dari website ini ada beberapa: dosen, ASD, mentor dan konselor.
Gambar 7. Skema Interaksi Stakeholder dari teman inklusi [Sumber: Dokumentasi Penulis, 2022]

## 3.4 Prototipe
Interface  website dirancang  dengan  gaya  desain  sederhana,  tanpa  elemen  dekorasi  dengan penggunaan area putih yang dominan untuk mengurangi potensi distraksi ASD.
Gambar 8. Tampilan beranda Teman Inklusi [Sumber: Dokumentasi Penulis, 2022]
Menu utama selalu tetap diatas agar ASD dapat dengan mudah kembali ke menu awal dan menu yang aktif digaris bawahi.
Gambar 9. Navigasi menu utama pada Teman Inklusi [Sumber: Dokumentasi Penulis, 2022]
Gambar 10. Tampilan menu belajar Teman Inklusi [Sumber: Dokumentasi Penulis, 2022]
Website aplikasi  teman  inklusi  memiliki  tiga  fitur  utama  yaitu  Belajar,  Tutor,  dan Komunitas.  Fitur  Belajar  yaitu  fitur  penjelasan  materi  kulah  dalam  bentuk  kartu bergambar yang dibuat oleh dosen di teman inklusi untuk mahasiswa ASD.  Kartu terdiri dari tiga bagian yaitu judul, gambar, dan deskripsi.  Kartu dilengkapi fitur audio untuk merekam  suara  penjelasan  dosen,  agar  informasi  penting  dapat  lebih  ditekankan. Setelah  membaca  satu  kartu  ASD  diminta  untuk  membuat  catatan.  ASD  dikondisikan agar aktif dalam belajar, tidak pasif membaca materi saja. Di akhir pembelajaran dengan kartu  bergambar  ASD  diminta  untuk  memberikan review .  Tujuan  dari  fitur  ini  adalah agar dosen mendapatkan feedback tentang materi kartu bergambar yang dibuatnya.
Gambar 11. Rancangan kartu bergambar Teman Inklusi
[Sumber: Dokumentasi Penulis, 2022]
Pada  gambar  11  dapat  dilihat  penerapan  prinsip  UI  ramah  ASD  ada  pada  variabel presentasi  dimana  desain  menggunakan  tone  biru  dan  abu-abu  yang  tidak  kontras, hirarki  yang  jelas, body teks  dibuat  1  kolom,  dan  warna button dan  teks  kontras. Penerapan  prinsip easy  to  read  information adalah  pada  penggunaan  kalimat  aktif, bahasa  sederhana  dan  penjelasan  dengan  contoh  konkrit  yang  dijelaskan  dengan kombinasi teks dan gambar.
Gambar 12. Fitur catatan Teman Inklusi [Sumber: Dokumentasi Penulis, 2022]
Pada gambar 12 adalah menu membuat catatan yang muncul setelah munculnya 1 kartu bergambar.  Pada  gambar  13  dapat  dilihat  diakhir  pembelajaran  dengan  kartu bergambar  ASD  diminta  menilai  pengalaman  pembelajarannya.  Tujuan  dari  fitur  ini adalah  agar  dosen  sebagai  pembuat  kartu  mendapatkan feedback akan  materi  yang sudah dibuatnya.  Pada fitur ini juga diterapkan prinsip easy to read information pada kartu bergambar dengan menggunakan kalimat instruksi pendek dan box dengan garis batas yang jelas untuk menulis ulasan.
Gambar 13. Fitur ulasan catatan Teman Inklusi [Sumber: Dokumentasi Penulis, 2022]
Untuk  membentuk  sistem  sosialisasi  ASD  dibuat fitur website kedua  dan  ketiga  yaitu menu  Tutor . Menu  tutor  merupakan fitur  di website aplikasi  untuk  membantu  ASD dalam  berkomunikasi  melalui  kartu  bergambar  dengan  pihak  lain  seperti  mentor mahasiswa, konselor, dosen dan asisten dosen. Komunikasi dilakukan melalui fitur chat secara individu dengan menunggah kartu bergambar.
Gambar 14. Fitur unggah kartu bergambar Teman Inklusi [Sumber: Dokumentasi Penulis, 2022]
Menu Komunitas adalah fitur di website aplikasi wadah forum agar ASD dapat bertanya pada komunitas, berbeda dengan menu tutor yang bersifat individu. Di menu ini ASD dapat bertanya tentang satu topik dan pihak yang merespon dapat dari pihak akademik dan  non  akademik.  Harapannya  dengan  menu  ini  ASD  dapat  menjangkau  komunitas yang  lebih  luas.  Sistem  komunikasi  juga  sama  seperti  di  menu  tutor  ASD  dapat mengunggah kartu bergambar di menu forum.
Gambar 5. Fitur diskusi Teman Inklusi [Sumber: Dokumentasi Penulis, 2022]
3.5 Testing Testing dilakukan  dengan  meminta  9  responden  ASD  melakukan  5  kegiatan  inti  di website teman inklusi yaitu membuka kartu bergambar Mk Pancasila, membuat catatan kartu bergambar di menu belajar, membuat ulasan kartu bergambar di menu belajar, mengechat dosen, dan menggungah kartu bergambar. Di akhir testing 9 ASD mengisi kuisioner simple usability Testing dengan skala likert 1-5 yaitu 1 = Sangat tidak setuju, 2 = Tidak setuju, 3 = Netral, 4 = Setuju, 5 = Sangat setuju
Menurut (Brooke, 1995) cara perhitungan SUS, nomor ganjil score – 1 dan nomor genap 5 – score . Total nilai dirata-rata dan dikali bobot 2,5 dan didapatkan nilai SUS.
Tabel 5. Simple Usability Testing [Sumber: Dokumentasi Penulis, 2022] No Pertanyaan ASD A ASD B ASD C ASD D ASD E ASD F ASD G ASD H ASD I 1 Saya berpikir akan menggunakan sistem ini lagi 5 4 4 3 4 4 4 3 5 2 Saya merasa sistem ini rumit untuk digunakan 2 1 3 1 2 2 2 1 2 3 Saya merasa sistem ini mudah digunakan 4 4 4 4 5 4 3 4 3 4 Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakan sistem ini 2 2 3 2 2 1 2 2 2
No Pertanyaan ASD A ASD B ASD C ASD D ASD E ASD F ASD G ASD H ASD I 5 Saya merasa fitur-fitur sistem ini berjalan dengan semestinya 5 5 4 5 4 4 4 5 4 6 Saya merasa ada banyak hal yang tidak konsisten (tidak serasi pada sistem ini) 2 1 3 1 1 2 1 1 1 7 Saya merasa orang lain akan memahami cara menggunakan sistem ini dengan cepat 4 4 4 4 5 5 4 5 4 8 Saya merasa sistem ini membingungkan 2 1 3 1 1 1 2 1 2 9 Saya merasa tidak ada hambatan dalam menggunakan sistem ini 4 4 4 5 4 4 5 4 4 10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini 1 3 1 2 1 2 2 2 1 Total Nilai 33 33 27 34 35 33 31 34 32 Rata – rata 32,44 Nilai Simple Usability Test 32,44 * 0,25 = 81,11
Dari hasil simple usability test (SUT) didapatkan nilai 81,11. Suatu produk digital dengan nilai >68 dapat dikatakan sebagai produk digital yang mudah digunakan ( user friendly ) (Moran, 2019). Teman inklusi mendapat nilai rata-rata SUT 81,11 dari sembilan SL maka dapat  disimpulkan  bahwa  Teman  Inklusi  adalah website yang  ramah  dan  mudah digunakan ASD.

## 4. KESIMPULAN
Dari  proses  merancang website aplikasi  teman  inklusi  dengan  mengimplementasikan prinsip-prinsip  UI  ramah  ASD  serta  pedoman Easy  to  Read  Information didapatkan beberapa pengetahuan baru yaitu:
Tabel 6. Rekomendasi UI ramah ASD hasil penelitian [Sumber: Dokumentasi Penulis, 2022]
No Variabel Hal yang sebaiknya dilakukan Hal yang sebaiknya dihindari 1 Presentasi • Keseluruhan tone warna website yang
tidak kontras • Warna kontras untuk teks dan button • Font sans serif dengan garis dan ujung yang jelas sehingga huruf lebih mudah dibaca.
• Penggunaan white space yang dominan
untuk mengurangi potensi distraksi dan membantu pembaca konsentrasi pada teks yang di depan mereka. • Elemen animasi bergerak • Elemen pop up
No Variabel Hal yang sebaiknya dilakukan Hal yang sebaiknya dihindari 2 Interaksi • Indikasi halaman pada struktur hirarki navigasi. • Satu call to action di satu halaman
3 Easy to Read Information • Menjelaskan dengan bahasa sederhana
• 1 kalimat 1 ide pokok • Menjelaskan contoh dengan gambar dan dijelaskan dengan bahasa sederhana • Penambahan audio untuk membantu
menjelaskan inti teks
Dari  temuan  ini  dapat  disimpulkan  bahwa  hasil  penelitian  mendukung  rekomendasi penelitian Yu et al. (2018)  yang menyatakan bahwa website ramah ASD adalah website dengan sedikit animasi, jenis dan ukuran font yang tidak beragam, dan sedikit gambar yang rumit. Penelitian juga mendukung rekomendasi hasil penelitian Pavlov (2014) yang menyatakan bahwa variable presentasi dan interaksi adalah dua variabel yang penting untuk diperhatikan ketika merancang produk digital untuk ASD.
Selain  mendukung  pengetahuan  yang  sudah  ada,  hasil  penelitian  juga  memberikan beberapa  pengetahuan  baru  bagi  para  desainer website yaitu  a)  Rekomendasi  pada variabel  presentasi  yaitu  penggunaan  area  putih  yang  dominan  untuk  mengurangi potensi  distraksi  fokus  ASD,  dan  b)  Rekomendasi  penjelasan  konsep  abstrak  dengan kombinasi  contoh,  gambar  dan  audio  suara.  Ketiganya  bersinergi  untuk menstimulasi sensori penglihatan dan pendengaran dalam rangka membentuk pemahaman ASD akan konsep abstrak.
Secara  keseluruhan  dapat  disimpulkan  bahwa  implementasi  prinsip-prinsip  UI  ramah ASD serta pedoman Easy to Read Information pada website aplikasi Teman Inklusi dapat dinyatakan berhasil, karena hasil pengujian simple usability testing didapatkan nilai yang cukup  baik  yaitu  81,11.  Adapun  penelitian  ini  masih  belum  sempurna  hal  yang  perlu diteliti ke depannya adalah kegunaan kartu bergambar sebagai media komunikasi ASD dengan  pihak  lain  belum  dapat  teruji  keefektifannya.  Penelitian  ke  depan  dapat melakukan  penelitian  longitudinal  melihat  efektifitas  penggunaan  kartu  bergambar sebagai media komunikasi mahasiswa ASD.

## 5. UCAPAN TERIMAKASIH
Penulis ingin mengucapkan terima kasih atas bantuan, bimbingan serta kerjasama dari berbagai  pihak  yang  telah  membantu  dalam  penyusunan  karya  ilmiah  ini.  Penulis menyampaikan terima kasih kepada:
a) Dr.  Martin  L.  Katoppo  S.T,  M.T.  selaku  Dekan  Fakultas  Desain  Universitas  Pelita Harapan.
b) Dr.-Ing. Ihan Martoyo, S.T., M.Sc selaku Ketua LPPM Universitas Pelita Harapan.
c) Artikel ini merupakan bagian dari seri publikasi penelitian internal dengan nomor P- 003-SoD/II/2020.

## DAFTAR PUSTAKA
Brooke,  J.  (1995).  SUS:  A  “Quick  and  Dirty”  Usability  Scale. Usability  Evaluation  In Industry , July , 207 – 212. Chithra,  P.,  &  Henila,  M.  (2019). User  Interface Design  Issues  for  Easy  and  Efficient Human Computer Interaction: An Explanatory Approach. International Journal of Computer Sciences and Engineering , 6 (10), 628 – 632.
Freyhoff, G., Hess, G., Kerr, L., Menzel, E., Tronbacke, B., & Veken, K. Van Der. (1998).
Make  it  Simple  European  Guidelines  for  the  Production  of  Easy-to-Read Information for People with Learning Disability (Issue June). http://www.inclusion-europe.org/documents/99.pdf
Gutierrez, M., Mendez, M., Centeno, B., & Osorio, L. (2018). The Styles Visual, Auditory, Kinesthetic And Competences In The Classroom. International Journal of Recent Scientific Research , 10 (December), 30693 – 30695.
Ismail,  U.  U.,  &  Rozzani,  ;  Rusyaizila  Ramli;  Nabilah.  (2021).  User  Experience  / User Interface (UX/UI)  Design  for  Autistic  Spectrum  Disorder  (ASD)  Color  Based Emotion Detection  System:  A Review . 2021  IEEE International  Conference  on Automatic Control & Intelligent Systems (I2CACI) .
Moran,  K.  (2019). Usability  Testing  101 .  https://www.nngroup.com/articles/usability- Testing -101/
National Autism Resources. (2023). The Picture Exchange Communication System (PECS) . https://nationalautismresources.com/the-picture-exchange-communication- system-pecs/
Pavlov, N. (2014). User Interface for People with Autism Spectrum Disorders. Journal of Software Engineering and Applications , 07 (02), 128 – 134.
Platner, H. (2015). An introduction to Design thinking . Iinstitute of Design at Stanford .
Sautter,  R.  A.,  &  LeBlanc,  L.  A.  (2006).  Empirical  Applications  of  Skinner’s  Analysis  of Verbal Behavior with Humans. The Analysis of Verbal Behavior , 22 (1), 35 – 48. Utami, T. S. D. (2018). Pemerolehan Bentuk-Bentuk Kalimat Anak Autis Yayasan Pelita Hati Palembang. Jurnal Didascein , 3 (2), 709 – 715.
Valencia, K., Rusu, C., & Botella, F. (2021). User experience factors for people with autism spectrum disorder. Applied Sciences (Switzerland) , 11 (21).
Yu,  B.,  Murrietta,  M.,  Horacek,  A.,  &  Drew,  J.  (2018).  A  Survey  of  Autism  Spectrum Disorder Friendly Website s. SMU Data Science Review , 1 (2).