Desain dan pengalaman pengguna

Pikirkan situs atau aplikasi favorit Anda. Apa yang membuatnya menjadi favorit? Sekarang, pikirkan situs atau aplikasi yang tidak Anda sukai. Apa yang tidak Anda sukai dari aplikasi ini? Cara pengguna berinteraksi dengan desain Anda dan pengalaman mereka di situs dan aplikasi Anda dapat bervariasi.

Pengalaman tersebut dapat berubah berdasarkan waktu, jenis perangkat yang digunakan, apakah mereka cukup tidur pada malam sebelumnya, apakah mereka tidak sehat, apakah mereka menggunakan teknologi pendukung, dan banyak lagi. Dengan hampir delapan miliar orang di seluruh dunia, kemungkinan cara orang menggunakan dan merasakan desain Anda tidak terbatas.

Desain inklusif

Bagaimana cara memenuhi semua kebutuhan calon pengguna sekaligus? Masukkan desain inklusif. Desain inklusif menggunakan pendekatan yang berpusat pada manusia yang menyatukan inklusivitas, kegunaan, dan aksesibilitas menjadi satu.

Diagram venn di mana aksesibilitas, inklusivitas, dan kegunaan semuanya bertemu di bagian tengahnya sebagai desain inklusif.

Selain itu, tidak seperti desain universal, yang berfokus pada satu desain yang dapat digunakan oleh sebanyak mungkin orang, prinsip desain inklusif berfokus pada desain untuk individu atau kasus penggunaan tertentu, lalu memperluas desain tersebut kepada orang lain.

Ada tujuh prinsip desain inklusif yang berfokus pada aksesibilitas:

  1. Berikan pengalaman yang sebanding: Pastikan antarmuka Anda memberikan pengalaman yang sama bagi semua orang, sehingga orang dapat menyelesaikan tugas dengan cara yang sesuai dengan kebutuhan mereka tanpa mengurangi kualitas konten.
  2. Pertimbangkan situasinya: Pastikan antarmuka Anda memberikan pengalaman yang berharga kepada pengguna, terlepas dari situasi mereka.
  3. Konsisten: Gunakan konvensi yang sudah dikenal dan terapkan dengan cara yang logis.
  4. Berikan kontrol: Pastikan orang dapat mengakses dan berinteraksi dengan konten sesuai cara yang mereka inginkan.
  5. Menawarkan pilihan: Pertimbangkan untuk menyediakan berbagai cara bagi pengguna untuk menyelesaikan tugas, terutama yang kompleks atau non-standar.
  6. Prioritaskan konten: Bantu pengguna berfokus pada tugas, fitur, dan informasi inti dengan mengatur elemen-elemen ini dalam urutan yang diinginkan dalam konten dan tata letak.
  7. Menambahkan nilai: Pertimbangkan tujuan dan signifikansi fitur serta cara fitur tersebut meningkatkan pengalaman bagi berbagai pengguna.

Persona

Saat mengembangkan desain atau fitur baru, banyak tim mengandalkan persona pengguna untuk memandu mereka melalui proses tersebut. Persona adalah karakter fiktif yang menggunakan produk digital Anda, sering kali didasarkan pada riset pengguna kuantitatif dan kualitatif.

Persona juga menawarkan cara yang cepat dan murah untuk menguji dan memprioritaskan fitur tersebut selama proses desain dan pengembangan. Persona membantu memfokuskan keputusan seputar komponen situs dengan menambahkan lapisan pertimbangan dunia nyata ke percakapan untuk membantu menyelaraskan strategi dan membuat sasaran yang berfokus pada grup pengguna tertentu.

Menyertakan disabilitas

Disabilitas dapat bersifat permanen, sementara, atau situasional. Disabilitas ini dapat memengaruhi sentuhan, penglihatan, pendengaran, dan ucapan.
Spektrum Persona dari Inclusive 101 Toolkit Microsoft.

"Setiap orang berbeda. Saya hanya bisa berbicara dari pengalaman saya. Jika Anda bertemu dengan satu orang Tuli, berarti Anda telah bertemu dengan satu orang Tuli—bukan semua dari kami."

Meryl Evans dari presentasi ID24 Deaf Tech: Travel Through Time from Past to Future.

Persona dapat digunakan sebagai alat desain inklusif saat Anda menggabungkan penyandang difabel ke dalam persona. Ada banyak cara untuk melakukannya. Anda dapat membuat persona khusus disabilitas, menambahkan disabilitas ke persona pengguna yang ada, atau bahkan membuat spektrum persona untuk mencerminkan realitas dinamis dari disabilitas situasional, sementara, dan permanen.

Apa pun cara Anda memasukkan orang dengan disabilitas ke dalam persona, mereka tidak boleh didasarkan pada orang sungguhan atau stereotip. Selain itu, persona tidak pernah menjadi pengganti pengujian pengguna.

Persona: Jane Bennet
Lihat contoh persona yang mendukung kasus penggunaan tertentu.
Jane Smith adalah wanita tinggi dengan rambut hitam panjang, mengenakan kemeja lengan panjang abu-abu dan celana jeans
  • Nama: Jane Bennet
  • Usia: 57 tahun
  • Lokasi: Essex, Inggris Raya
  • Pekerjaan: UX engineer
  • Keterbatasan: Tremor tangan akibat penyakit Parkinson dengan Onset Dini (YOPD)
  • Sasaran: menggunakan input speech-to-text untuk mempermudah penambahan saran kode; menemukan peralatan bersepeda secara online dengan sedikit penekanan tombol.
  • Ketidaknyamanan: situs yang tidak memiliki dukungan khusus keyboard; aplikasi untuk desain dengan area kecil untuk interaksi sentuh.

Sebagai UX engineer, Jane mendesain dan membuat halaman yang penting untuk menjaga situs perusahaannya tetap relevan. Dia mendukung banyak anggota tim sepanjang hari. Dia adalah raja dalam memadamkan api teknis, dan semua orang berjuang bersama di departemennya saat terjadi bencana secara tidak terduga.

Kehilangan keterampilan motorik halusnya akibat tremor semakin mempersulitnya menggunakan mouse. Dia semakin mengandalkan keyboard untuk menjelajahi web. Jane selalu berdedikasi pada kebugaran fisiknya. Ia menyukai balapan di jalan raya dan BMX. Hal ini semakin membuat ia terpukul saat didiagnosis menderita penyakit Parkinson dengan Onset Muda tahun lalu.

Simulator disabilitas

Gunakan kehati-hatian yang sangat tinggi saat menggunakan simulator disabilitas untuk mengemulasikan atau melengkapi persona Anda.

Simulator disabilitas adalah pedang bermata dua karena dapat membangun simpati atau empati—hal ini dapat bergantung pada individu, konteks tempat simulator digunakan, dan banyak faktor lain yang tidak dapat dikontrol. Banyak pendukung aksesibilitas menentang penggunaan alat simulator disabilitas dan merekomendasikan untuk mencari film, demo, tutorial, dan konten lainnya yang dibuat oleh penyandang disabilitas, serta mempelajari pengalaman mereka secara langsung.

"Saya rasa kita harus benar-benar jujur bahwa aktivitas simulasi apa pun tidak memengaruhi beberapa pemahaman terpenting yang ingin kita ketahui oleh orang-orang yang dapat melihat dalam hati dan pikiran mereka. Kebutaan bukanlah karakteristik yang mendefinisikan kita, bahwa kesalahpahaman dan ekspektasi rendah tentang kebutaan adalah kendala terbesar kita.

Kesalahpahaman tersebut menciptakan penghalang buatan yang mencegah kita berpartisipasi sepenuhnya, dan batasan palsu tersebut menjadi sesuatu yang menghambat kita."

Mark Riccobono, Presiden National Federation of the Blind.

Heuristik aksesibilitas

Pertimbangkan untuk menambahkan heuristik ke dalam alur kerja saat Anda membangun persona dan desain. Heuristik adalah aturan untuk desain interaksi, yang diperkenalkan pada tahun 1990 oleh Jakob Nielsen dan Rolf Molich. Sepuluh prinsip ini dikembangkan berdasarkan pengalaman bertahun-tahun di bidang teknik kegunaan, dan telah digunakan dalam desain dan program interaksi manusia- komputer sejak saat itu.

Pada tahun 2019, tim desain di Deque membuat dan membagikan kumpulan heuristic yang berfokus pada aksesibilitas digital yang baru. Menurut riset mereka, hingga 67% dari semua bug aksesibilitas untuk situs atau aplikasi dapat dihindari jika aksesibilitas menjadi bagian dari proses desain. Hal ini berdampak besar yang dapat dibuat bahkan sebelum satu baris kode ditulis.

Serupa dengan kumpulan heuristik awal, ada sepuluh heuristik aksesibilitas yang perlu dipertimbangkan saat merencanakan desain Anda.

  1. Metode dan modalitas interaksi: Pengguna dapat berinteraksi dengan sistem secara efisien menggunakan metode input pilihan mereka (seperti mouse, keyboard, sentuhan, dll.).
  2. Navigasi dan pencarian arah: Pengguna dapat menavigasi, menemukan konten, dan menentukan lokasi mereka, kapan saja, dalam sistem.
  3. Struktur dan semantik: Pengguna dapat memahami struktur konten di setiap halaman dan memahami cara beroperasi dalam sistem.
  4. Pencegahan dan status error: Kontrol interaktif memiliki petunjuk yang persisten dan bermakna untuk membantu mencegah kesalahan, serta memberi pengguna status error yang jelas yang menunjukkan masalah dan cara memperbaikinya setiap kali error ditampilkan.
  5. Kontras dan keterbacaan: Pengguna dapat dengan mudah membedakan dan membaca teks serta informasi penting lainnya.
  6. Bahasa dan keterbacaan: Pengguna dapat dengan mudah membaca dan memahami konten.
  7. Prediksi dan konsistensi: Pengguna dapat memprediksi tujuan setiap elemen. Anda dapat melihat dengan jelas bagaimana setiap elemen terkait dengan sistem secara keseluruhan.
  8. Waktu dan penyimpanan: Pengguna diberi cukup waktu untuk menyelesaikan tugas mereka dan tidak kehilangan informasi jika waktu (yaitu, sesi) habis.
  9. Gerakan dan berkedip: Pengguna dapat menghentikan elemen di halaman yang bergerak, berkedip, atau dianimasikan. Pengguna tidak boleh terganggu atau dirugikan oleh elemen ini.
  10. Alternatif visual dan auditori: Pengguna dapat mengakses alternatif berbasis teks untuk konten visual atau auditori yang menyampaikan informasi.

Setelah memiliki pemahaman dasar tentang heuristik aksesibilitas ini, Anda dapat menerapkannya ke persona atau desain menggunakan lembar kerja heuristik aksesibilitas dan dengan mengikuti petunjuk yang diberikan. Latihan ini akan lebih bermanfaat saat Anda mengumpulkan beberapa perspektif.

Contoh peninjauan heuristik aksesibilitas untuk checkpoint navigasi dan pemetaan rute dapat terlihat seperti berikut:

Checkpoint untuk navigasi dan pencarian rute Sangat baik (+2 poin) Lulus (+1 poin) Gagal (-1 poin) T/A (0 pt)
Apakah indikator yang jelas dan terlihat ditetapkan pada semua elemen aktif saat menerima fokus?
Apakah halaman memiliki teks judul yang bermakna, dengan informasi khusus halaman di awal?
Apakah elemen judul halaman dan H1 sama atau mirip?
Apakah ada judul yang bermakna untuk setiap bagian utama?
Apakah tujuan link ditentukan dari teks link saja atau konteks langsungnya?
Apakah link lewati disediakan di bagian paling atas halaman dan apakah link tersebut ditampilkan saat difokuskan?
Apakah organisasi elemen navigasi memfasilitasi pencarian arah?

Setelah semua anggota tim melihat halaman atau komponen dan melakukan peninjauan heuristik aksesibilitas, totalnya akan dihitung untuk setiap titik pemeriksaan. Pada tahap ini, Anda dapat memutuskan cara memperbaiki masalah yang ditemukan atau memperbaiki kelalaian yang sangat penting untuk mendukung aksesibilitas digital.

Anotasi aksesibilitas

Sebelum menyerahkan desain kepada tim pengembangan, Anda harus mempertimbangkan untuk menambahkan anotasi aksesibilitas.

Anotasi, secara umum, digunakan untuk menjelaskan pilihan materi iklan dan mendeskripsikan berbagai aspek desain. Anotasi aksesibilitas berfokus pada area tempat developer dapat membuat pilihan terprogram yang lebih mudah diakses dengan panduan tim desain atau spesialis yang berfokus pada aksesibilitas.

Anotasi aksesibilitas dapat diterapkan selama tahap proses desain, mulai dari wireframe hingga mockup fidelitas tinggi. Model ini dapat mencakup alur pengguna, status kondisional, dan fungsi. Mereka sering menggunakan simbol dan label untuk menyederhanakan proses dan menjaga desain sebagai fokus utama.

Contoh ilustrasi desain berikut berasal dari kit anotasi aksesibilitas Indeed.com untuk Figma.

Ilustrasi desain modifikasi visual yang digunakan untuk berbagai kemungkinan status tombol.
Desain tombol tindakan berbeda berdasarkan status: default, fokus, pengarahan kursor, aktif, dan dinonaktifkan.
Ilustrasi desain tiga ikon berbeda yang digunakan pada kartu postingan lowongan.
Tiga ikon memiliki teks alternatif yang ditandai. Ikon untuk "save job" dan "not interested" berfungsi sebagai tombol, sehingga teks alternatif sangat penting untuk memahami tindakan. Ikon di samping "Lamar dengan resume Indeed Anda" hanya bersifat dekoratif sehingga tidak memerlukan teks alternatif.
Ilustrasi hubungan yang harus dimiliki label formulir pada
  input terkait untuk bulan dan tahun.
Beberapa label input dapat dikaitkan dengan setiap input untuk membantu pengguna memahami konteks.

Bergantung pada program desain, Anda akan memiliki beberapa starter kit anotasi aksesibilitas untuk dipilih. Atau, jika ingin, Anda dapat membuat set sendiri. Dalam kedua kasus tersebut, Anda harus memutuskan informasi mana yang perlu disampaikan kepada tim serah terima dan format apa yang paling sesuai.

Beberapa hal yang perlu dipertimbangkan untuk anotasi aksesibilitas meliputi:

  • Warna: sertakan rasio kontras dari semua kombinasi warna yang berbeda dalam palet.
  • Tombol dan link: mengidentifikasi status default, pengarahan kursor, aktif, fokus, dan dinonaktifkan.
  • Link lewati: soroti aspek desain yang tersembunyi dan terlihat serta tempat link tersebut di halaman.
  • Gambar dan ikon: tambahkan rekomendasi teks alternatif untuk gambar dan ikon yang penting.
  • Audio dan video: menyoroti area dan link untuk teks, transkrip, dan deskripsi audio.
  • Judul: tambahkan level terprogram dan sertakan semua yang terlihat seperti judul.
  • Pembatas: menandai berbagai bagian desain dengan HTML atau ARIA.
  • Komponen interaktif: mengidentifikasi elemen yang dapat diklik, efek pengarahan kursor, area fokus.
  • Keyboard: mengidentifikasi tempat fokus harus dimulai (perhentian alfa) dan urutan tab berikut.
  • Formulir: menambahkan label kolom, teks bantuan, pesan error, dan pesan berhasil.
  • Nama yang aksesibel: identifikasi cara teknologi pendukung harus mengenali elemen tersebut.