Desain dan pengalaman pengguna

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

Pengalaman tersebut dapat berubah berdasarkan waktu dalam sehari, jenis perangkat yang digunakan, apakah mereka cukup tidur pada malam sebelumnya, apakah mereka sedang 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 potensi kebutuhan pengguna sekaligus? Masukkan desain inklusif. Desain inklusif menggunakan pendekatan yang berfokus pada manusia yang menggabungkan inklusivitas, kegunaan, dan aksesibilitas menjadi satu.

Diagram Venn yang menunjukkan bahwa aksesibilitas, inklusivitas, dan kegunaan bertemu di tengah sebagai desain inklusif.

Tidak seperti desain universal, yang berfokus pada satu desain yang dapat digunakan oleh sebanyak mungkin orang, prinsip desain inklusif berpusat pada desain untuk individu atau kasus penggunaan tertentu, lalu memperluas desain tersebut ke orang lain.

Ada tujuh prinsip desain inklusif yang berfokus pada aksesibilitas:

  1. Memberikan pengalaman yang sebanding: Pastikan antarmuka Anda memberikan pengalaman yang setara 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 orang-orang, terlepas dari keadaan mereka.
  3. Konsisten: Gunakan konvensi yang sudah dikenal dan terapkan secara logis.
  4. Memberikan kontrol: Pastikan orang dapat mengakses dan berinteraksi dengan konten sesuai cara yang mereka sukai.
  5. Menawarkan pilihan: Pertimbangkan untuk memberikan berbagai cara bagi orang untuk menyelesaikan tugas, terutama tugas yang kompleks atau tidak standar.
  6. Prioritaskan konten: Bantu pengguna berfokus pada tugas, fitur, dan informasi inti dengan mengatur elemen ini dalam urutan yang diinginkan dalam konten dan tata letak.
  7. Menambah 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, yang 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 terkait 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 kemampuan berbicara.
Spektrum Persona dari Microsoft Inclusive 101 Toolkit.

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

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

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

Terlepas dari cara Anda memasukkan penyandang disabilitas ke dalam persona, mereka tidak boleh didasarkan pada orang sungguhan atau stereotipe. Dan persona tidak pernah menjadi pengganti pengujian pengguna.

Persona: Jane Bennet
Lihat contoh persona yang mendukung kasus penggunaan tertentu.
Jane Smith tinggi dengan rambut panjang berwarna gelap, mengenakan kemeja lengan panjang abu-abu dan celana jeans
  • Nama: Jane Bennet
  • Usia: 57 tahun
  • Lokasi: Essex, Inggris Raya
  • Pekerjaan: UX engineer
  • Disabilitas: Tremor tangan akibat penyakit Parkinson dengan onset dini (YOPD)
  • Sasaran: menggunakan input ucapan ke teks untuk mempermudah penambahan saran kode; menemukan peralatan bersepeda secara online dengan sedikit penekanan tombol.
  • Frustrasi: situs yang tidak memiliki dukungan khusus keyboard; aplikasi yang didesain dengan area kecil untuk interaksi sentuh.

Sebagai UX engineer, Jane mendesain dan membuat halaman yang penting untuk menjaga relevansi situs perusahaannya. Dia mendukung banyak anggota tim sepanjang hari. Dia adalah ratu dalam memadamkan masalah teknis, dan menjadi orang yang diandalkan semua orang di departemennya saat terjadi masalah yang tidak terduga.

Kehilangan kemampuan motorik halusnya karena tremor membuatnya semakin sulit menggunakan mouse. Dia semakin mengandalkan keyboard untuk menjelajahi web. Jane selalu berdedikasi untuk menjaga kebugaran fisiknya. Dia menyukai balap jalanan dan BMX. Hal ini semakin membuatnya terpukul saat ia didiagnosis menderita penyakit Parkinson Onset Awal tahun lalu.

Simulator disabilitas

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

Simulator disabilitas adalah pedang bermata dua karena dapat membangun simpati atau empati—hal ini dapat bergantung pada individu, konteks penggunaan simulator, dan banyak faktor lain yang tidak dapat dikontrol. Banyak pendukung aksesibilitas yang menentang penggunaan 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 rasa kita harus benar-benar jujur bahwa aktivitas simulasi apa pun tidak memengaruhi beberapa pemahaman terpenting yang ingin kita sampaikan kepada orang yang dapat melihat dalam hati dan pikiran mereka. Kebutaan bukanlah karakteristik yang mendefinisikan kita, bahwa kesalahpahaman dan ekspektasi rendah tentang kebutaan adalah hambatan terbesar kita.

Kesalahpahaman tersebut menciptakan hambatan 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 Anda saat Anda membuat 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 rekayasa kegunaan, dan telah digunakan dalam program desain dan interaksi manusia-komputer sejak saat itu.

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

Mirip dengan set 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 pilihan mereka (seperti mouse, keyboard, sentuhan, dll.).
  2. Navigasi dan penunjuk arah: Pengguna dapat menjelajahi, 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 berinteraksi dalam sistem.
  4. Pencegahan dan status error: Kontrol interaktif memiliki petunjuk yang persisten dan bermakna untuk membantu mencegah kesalahan, serta memberikan status error yang jelas kepada pengguna yang menunjukkan apa masalahnya 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. Prediktabilitas dan konsistensi: Pengguna dapat memprediksi tujuan setiap elemen. Jelas bagaimana setiap elemen berhubungan dengan sistem secara keseluruhan.
  8. Waktu dan pelestarian: Pengguna diberi waktu yang cukup untuk menyelesaikan tugas mereka dan tidak kehilangan informasi jika waktu mereka (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 audio: Pengguna dapat mengakses alternatif berbasis teks untuk konten visual atau audio apa pun yang menyampaikan informasi.

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

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

Titik pemeriksaan untuk navigasi dan penentuan arah 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 bagian awal?
Apakah elemen judul halaman dan H1 sama atau serupa?
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 penentuan arah?

Setelah semua orang dalam tim melihat halaman atau komponen dan melakukan tinjauan heuristik aksesibilitas, totalnya 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.

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

Anotasi aksesibilitas dapat diterapkan selama tahap apa pun dalam proses desain, mulai dari {i>wireframe<i} hingga {i>mockup high-fidelity<i}. Detail tersebut dapat mencakup alur pengguna, status bersyarat, 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, arahkan kursor, aktif, dan dinonaktifkan.
Ilustrasi desain tiga ikon berbeda yang digunakan pada kartu postingan lowongan kerja.
Tiga ikon memiliki teks alternatif yang ditandai. Ikon untuk "simpan lowongan" dan "tidak tertarik" berfungsi sebagai tombol, sehingga teks alternatif sangat penting untuk memahami tindakan. Ikon di samping "Lamar dengan resume Indeed Anda" murni dekoratif dan oleh karena itu 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, Anda akan memiliki beberapa kit awal anotasi aksesibilitas yang dapat dipilih. Atau, jika ingin, Anda dapat membuat set sendiri. Dalam kedua kasus tersebut, Anda harus memutuskan informasi mana yang perlu dikomunikasikan kepada tim pengalihan dan format apa yang paling cocok.

Beberapa area yang perlu dipertimbangkan untuk anotasi aksesibilitas meliputi:

  • Warna: menyertakan rasio kontras dari semua kombinasi warna yang berbeda dalam palet.
  • Tombol dan link: mengidentifikasi status default, saat kursor diarahkan, aktif, fokus, dan dinonaktifkan.
  • Lewati link: menyoroti aspek desain yang tersembunyi dan terlihat serta tempat link tersebut berada di halaman.
  • Gambar dan ikon: menambahkan rekomendasi teks alternatif untuk gambar dan ikon penting.
  • Audio dan video: menandai area dan link untuk teks, transkrip, dan deskripsi audio.
  • Judul: menambahkan tingkat terprogram dan menyertakan semua yang terlihat seperti judul.
  • Penanda: menandai berbagai bagian desain dengan HTML atau ARIA.
  • Komponen interaktif: mengidentifikasi elemen yang dapat diklik, efek mengarahkan kursor, area fokus.
  • Keyboard: mengidentifikasi tempat fokus harus dimulai (alpha stop) dan urutan tab berikutnya.
  • Formulir: menambahkan label kolom, teks bantuan, pesan error, dan pesan berhasil.
  • Nama yang dapat diakses: mengidentifikasi cara teknologi pendukung harus mengenali elemen.