Desain dan pengalaman pengguna

Pikirkan tentang situs web atau aplikasi favorit Anda—apa yang membuatnya menjadi favorit Anda? Sekarang, coba pikirkan tentang {i>website<i} atau aplikasi yang tidak Anda sukai? Cara pengguna berinteraksi dengan desain dan pengalaman mereka di situs web dan aplikasi Anda dapat bervariasi.

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

Desain inklusif

Bagaimana kita bisa memenuhi semua kebutuhan pengguna potensial sekaligus? Masuki desain inklusif. Desain inklusif memanfaatkan pendekatan yang berpusat pada manusia yang menyatukan inklusivitas, kegunaan, dan aksesibilitas menjadi satu.

Tidak seperti desain universal, yang berfokus pada satu desain yang dapat digunakan sebanyak mungkin orang, prinsip desain inklusif berpusat pada desain untuk individu atau kasus penggunaan tertentu, lalu memperluas desain itu 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-orang dapat menyelesaikan tugas dengan cara yang sesuai dengan kebutuhan mereka tanpa mengganggu kualitas konten.
2. Pertimbangkan situasinya: Pastikan antarmuka Anda memberikan pengalaman yang berharga bagi pengguna, apa pun situasinya.
3. Bersikap konsisten: Gunakan konvensi yang sudah dikenal dan terapkan dengan cara yang logis.
4. Berikan kontrol: Pastikan orang lain dapat mengakses dan berinteraksi dengan konten dengan cara yang mereka inginkan.
5. Tawarkan pilihan: Pertimbangkan untuk memberikan cara yang berbeda kepada orang-orang untuk menyelesaikan tugas, terutama yang kompleks atau tidak standar.
6. Prioritaskan konten: Bantu pengguna berfokus pada tugas, fitur, dan informasi inti dengan mengatur elemen-elemen tersebut dalam urutan yang diinginkan dalam konten dan tata letak.
7. Memberikan nilai tambah: Mempertimbangkan tujuan dan signifikansi fitur serta bagaimana fitur tersebut meningkatkan pengalaman pengguna yang berbeda.

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 penelitian kuantitatif dan kualitatif pengguna.

Persona juga menawarkan cara yang cepat dan murah untuk menguji dan memprioritaskan fitur tersebut selama proses desain dan pengembangan. Mereka 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.

Menggabungkan disabilitas

"Setiap orang pasti berbeda. Saya hanya bisa berbicara berdasarkan pengalaman saya. Saat bertemu dengan satu penyandang Tunarungu, maka Anda telah bertemu satu Penyandang Tunarungu—tidak semua kami".

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

Persona dapat digunakan sebagai alat desain inklusif ketika Anda menggabungkan penyandang disabilitas ke dalam persona Anda. Ada banyak cara berbeda untuk melakukan ini. Anda dapat membuat persona khusus disabilitas, menambahkan disabilitas pada persona pengguna yang ada, atau bahkan membuat spektrum persona untuk mencerminkan realitas dinamis terkait disabilitas situasional, sementara, dan permanen.

Tidak peduli bagaimana Anda menggabungkan penyandang disabilitas ke dalam persona Anda, mereka tidak boleh didasarkan pada orang atau stereotip yang nyata. Dan persona tidak pernah menjadi pengganti pengujian pengguna.

Simulator disabilitas

Berhati-hatilah saat menggunakan simulator disabilitas untuk meniru atau melengkapi persona Anda.

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

"Saya pikir kita harus benar-benar jujur bahwa aktivitas simulasi tidak memengaruhi sebagian pemahaman terpenting yang kita inginkan agar diketahui oleh penglihatan dalam hati dan kepala mereka. Kebutaan bukanlah karakteristik yang mendefinisikan kita, bahwa kesalahpahaman dan ekspektasi yang rendah tentang kebutaan adalah hambatan terbesar kita.

Kesalahpahaman tersebut menciptakan penghalang buatan yang mencegah kami berpartisipasi sepenuhnya, dan batasan palsu tersebut membentuk sesuatu yang menahan kami."

Mark Riccobono, President of National Federation of the Blind

Heuristik aksesibilitas

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

Hingga pada tahun 2019, tim desain di Deque membuat dan membagikan sekumpulan heuristik baru yang berfokus pada aksesibilitas digital. Menurut riset mereka, hingga 67% dari semua bug aksesibilitas untuk situs atau aplikasi dapat dihindari jika aksesibilitas merupakan bagian dari proses desain. Itu dampak besar yang dapat dibuat bahkan sebelum satu baris kode ditulis.

Mirip dengan kumpulan heuristik asli, ada sepuluh heuristik aksesibilitas yang perlu dipertimbangkan saat merencanakan desain Anda.

1. Metode dan modalitas interaksi: Pengguna dapat berinteraksi secara efisien dengan sistem menggunakan metode input yang mereka pilih (seperti mouse, keyboard, sentuh, dll.).
2. Navigasi dan pemilihan arah: Pengguna dapat dengan mudah menjelajahi, menemukan konten, dan menentukan posisi mereka kapan saja di 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, dan memberi pengguna status error yang jelas yang menunjukkan masalah yang terjadi dan cara memperbaikinya setiap kali error ditampilkan.
5. Kontras dan keterbacaan: Pengguna dapat dengan mudah membedakan serta membaca teks dan informasi penting lainnya.
6. Bahasa dan keterbacaan: Pengguna dapat membaca dan memahami konten dengan mudah.
7. Prediktabilitas dan konsistensi: Pengguna dapat memprediksi tujuan setiap elemen. Jelas bagaimana setiap elemen berhubungan dengan sistem secara keseluruhan.
8. Waktu dan pemeliharaan: Pengguna diberi waktu yang cukup untuk menyelesaikan tugas dan tidak kehilangan informasi jika waktu (misalnya, sesi) habis.
9. Gerakan dan flash: Pengguna dapat menghentikan elemen di halaman yang bergerak, berkedip, atau yang dianimasikan. Pengguna tidak boleh terganggu atau dirusak oleh elemen ini.
10. Alternatif visual dan auditori: Pengguna dapat mengakses alternatif berbasis teks untuk konten visual atau auditori apa pun 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 lebih mencerahkan ketika Anda mengumpulkan berbagai perspektif.

Contoh peninjauan heuristik aksesibilitas untuk pos pemeriksaan navigasi dan pemilihan arah dapat terlihat seperti berikut:

Setelah semua orang di tim melihat halaman atau komponen dan melakukan peninjauan heuristik aksesibilitas mereka, jumlah total akan dihitung untuk setiap checkpoint. Pada tahap ini, Anda dapat memutuskan cara memperbaiki masalah yang ditemukan atau memperbaiki kesalahan yang penting untuk mendukung aksesibilitas digital.

Anotasi aksesibilitas

Sebelum menyerahkan desain kepada tim pengembangan, sebaiknya pertimbangkan menambahkan anotasi aksesibilitas. Secara umum, anotasi digunakan untuk menjelaskan pilihan kreatif dan menjelaskan berbagai aspek desain. Anotasi aksesibilitas berfokus pada area tempat developer dapat membuat pilihan terprogram yang lebih mudah diakses dengan bimbingan tim desain atau spesialis yang berfokus pada aksesibilitas.

Anotasi aksesibilitas dapat diterapkan dalam setiap tahap proses desain, mulai dari {i>wireframe<i} hingga maket {i>high-fidelity<i}. Properti tersebut dapat mencakup alur pengguna, status kondisional, dan fungsi. Mereka sering menggunakan simbol dan label untuk merampingkan proses dan menjaga desain sebagai fokus utama.

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

Bergantung pada program desain Anda, Anda akan memiliki beberapa kit starter anotasi aksesibilitas untuk dipilih. Atau, jika mau, Anda dapat membuat set Anda 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: mencakup rasio kontras dari semua kombinasi warna yang berbeda dalam palet.
• Tombol dan link: mengidentifikasi status default, pengarahan kursor, aktif, fokus, dan nonaktif.
• Lewati link: menyoroti aspek desain yang tersembunyi/terlihat dan menautkannya pada halaman.
• Gambar dan ikon: tambahkan rekomendasi teks alternatif untuk gambar/ikon penting.
• Audio dan video: menandai area/link untuk teks, transkrip, dan deskripsi audio.
• Judul: tambahkan level terprogram dan sertakan semua yang terlihat seperti judul.
• Penanda: menyoroti berbagai bagian desain dengan HTML atau ARIA.
• Komponen interaktif: mengidentifikasi elemen yang dapat diklik, efek pengarahan kursor, area fokus.
• Keyboard: identifikasi tempat fokus harus dimulai (perhentian alfa) dan urutan tab berikut.
• Formulir: menambahkan label kolom, teks bantuan, pesan error, dan pesan berhasil.
• Nama yang dapat diakses: identifikasi cara teknologi pendukung mengenali elemen tersebut.