Pertimbangan yang perlu diterapkan dalam mendesain proyek untuk klien berusia lanjut
Sebelum memulai membahas mendesain untuk usia lanjut, kita main tebak-tebakan dulu ya. Angka berapa yang tertera di bawah ini? Jawaban yang benar ada di paling bawah. Mohon dibaca dulu sampai selesai sebelum masuk ke “kunci jawaban” ya!
Desain yang baik itu adalah yang inklusif. Bagaimana rasanya kalau kita tidak bisa menggunakan sebuah produk karena keterbatasan yang kita miliki?
Coba tonton video ini tanpa suara: Microsoft Design. Lalu coba tonton lagi dengan memejamkan mata dan dengan suara.
Untuk mengetahui kenapa desain itu harus inklusif, saya memiliki beberapa tautan yang bisa dibaca lebih lanjut:
- Inclusive Design Principles
- Inclusive | Microsoft Design
- Inclusive Design: those ignored that we must design for
- The principles of inclusive design
- Inclusive Design: those ignored that we must design for
- The No. 1 thing you’re getting wrong about inclusive design
Bagi Anda yang matanya normal, Anda akan melihat 12 warna berbeda. Bagaimana dengan yang mengalami buta warna? Di bawah ini adalah tampilan warna hasil simulasi.
Bisa dilihat di atas banyak warna yang terlihat mirip sekali. Ini akan menyulitkan orang-orang yang memiliki keterbatasan penglihatan, baik karena memiliki buta warna maupun yang sudah menua. Penjelasan selengkapnya bisa ditonton di video berikut:
Apa saja yang perlu dilakukan oleh desainer terkait keterbatasan penglihatan ini?
Jangan bergantung kepada warna.
Ini adalah prinsip utama dan sudah digaungkan oleh W3C, sebuah organisasi standarisasi world wide web.
If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.
WCAG
W3C sudah membuat standar aksesibilitas (WCAG) dengan tiga level berbeda:
- A, AA, dan AAA.
- A dan AA.
- A.
Untuk bisa mencapai level tertinggi (AAA), maka sebuah produk harus memenuhi persyaratan level yang ada di bawahnya.
Panduan WCAG memang terlalu kompleks untuk dimengerti dan perlu waktu tersendiri untuk membacanya. Untuk panduan aksesibilitas yang lain bisa mengacu pada Accessibility Developer Guide!.
Ini adalah beberapa standar WCAG terkait warna dan teks.
Level A: 1.4.1. Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Level AA: 1.4.3. The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Level AA: 1.4.4. Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
Level AAA: 1.4.6. The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
- Large Text: Large-scale text and images of large-scale text have contrast ratio of at least 4.5:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Walau panduan ini dibuat untuk situs web, saya rasa tidak ada salahnya untuk menerapkannya ke bidang lain seperti desain aplikasi seluler maupun desain grafis.
Apa saja tip terkait warna dan aksesibilitas?
Pastikan teks dan elemen grafis bisa dimengerti walau dilihat tanpa warna.
Dosen saya dulu sering meminta saya mengubah warna desain yang sudah dibuat menjadi grayscale. Saya baru mengerti maksudnya 3 tahun setelah wisuda.
Dengan “mematikan” warna, kita bisa melihat kontras yang dimiliki oleh desain yang sudah dibuat.
Lalu bagaimana dengan infografis seperti pie chart, bar chart, dsb? Kalau terpaksa menggunakan warna, cara ini bisa dilakukan:
Dengan menambahkan pola/ornamen pada warna, maka elemen itu jadi punya tambahan “identitas”.
Ikuti standar rasio kontras minimum.
Salah satu hal utama di WCAG adalah dengan membuat teks dan elemen UI memiliki kontras yang cukup dibandingkan dengan warna latar belakangnya, yaitu 4,5:1 untuk teks biasa dan 3:1 untuk judul.
Saya menggunakan tool Colour Contrast Analyzer (CCA) untuk mengetahui rasionya. Tool ini bisa diunduh gratis di Colour Contrast Analyser (CCA).
Buat palet warna yang memiliki kontras cukup tinggi dan konsisten.
Panduan di sini lengkap sekali: Designing Systematic Colors.
Ringkasan: Dengan membuat palet warna yang memiliki kontras tinggi dan konsisten, kita bisa mengubah warna sebuah desain dengan mudah.
Ini adalah skema warna pada Material UI:
Banyak sekali, bukan? Tapi kalau dibuat jadi grayscale, semua warna itu terlihat konsisten.
Walau memiliki pilihan warna yang cukup banyak, kita bisa beralih ke warna lain (misal dari merah ke biru dengan tingkatan yang sama) tanpa perlu kehilangan kontras.
Tool ini bisa digunakan untuk membuat palet warna: ColorBox by Lyft Design.
Berikan kontrol kepada pengguna.
Saya rasa tip terakhir ini hanya berlaku untuk desain produk digital (situs web, aplikasi seluler, dsb).
Ini adalah tangkapan layar dari situs Manchester City Council. Situs ini memberikan pilihan kepada penggunanya untuk mengatur beberapa elemen di situsnya: ukuran teks, jenis font, spasi huruf, hingga tema warna.
Ini adalah tampilan tema warnanya:
Dengan memberikan pilihan ini, pengguna bisa menggunakan situs web dengan lebih mudah tanpa dibatasi oleh warna.
Jawaban tebak-tebakan:
Tidak ada angkanya. Bagaimana rasanya mencoba mencari tahu sesuatu tanpa mengetahui apa yang salah? Frustasi? Bingung?
Itu salah satu pengalaman menggunakan desain eksklusif.
Gambar Ishihara di atas bisa dibuat di Ishihara Plate Generator.
Catatan: Ini adalah salinan jawaban saya di Quora. Saya akan menulis ulang jawaban yang saya suka di Quora ke dalam blog saya.
Do you recommend this post?
