Merancang untuk aksesibilitas

Desain Berorientasi Pengguna di Power BI

Maarten Van den Broeck

Content Developer at DataCamp

Defisiensi penglihatan warna (CVD)

  • Mempengaruhi sekitar 8% pria dan 0,5% wanita
  • Dua penyebab utama: kekurangan jenis kerucut tertentu di mata ("anomali") atau tidak adanya jenis kerucut tertentu ("anopia")
1 https://en.wikipedia.org/wiki/Color_blindness
Desain Berorientasi Pengguna di Power BI

Defisiensi penglihatan warna (CVD)

  • Mempengaruhi sekitar 8% pria dan 0,5% wanita
  • Dua penyebab utama: kekurangan jenis kerucut tertentu di mata ("anomali") atau tidak adanya jenis kerucut tertentu ("anopia")
Nama Kerucut Kemungkinan
Protanomali Merah 1% pria
Protanopia Merah 1% pria
Deuteranomali Hijau 5% pria
Deuteranopia Hijau 1% pria
Tritanomali Biru Jarang P/L
Tritanopia Biru Jarang P/L
1 https://en.wikipedia.org/wiki/Color_blindness
Desain Berorientasi Pengguna di Power BI

CVD dalam praktik

Penglihatan tipikal

Gambar contoh dari SQL Server Integration Services tahun 2008.

Tritanopia

Gambar yang sama, seperti terlihat oleh penderita tritanopia.

Protanopia

Gambar yang sama, seperti terlihat oleh penderita protanopia.

Deuteranopia

Gambar yang sama, seperti terlihat oleh penderita deuteranopia.

Desain Berorientasi Pengguna di Power BI

Tips penggunaan warna yang lebih baik

  • Lebih sedikit, lebih baik!
  • Utamakan visual yang tidak bergantung pada warna sebagai sinyal
  • Gunakan palet warna ramah CVD
  • Sediakan indikator selain warna
  • Gunakan alat seperti Coblis

Treemap seperti terlihat oleh penderita protanopia.

Desain Berorientasi Pengguna di Power BI

Ukuran font

Sesuaikan tema yang ada.

Atur ukuran font ke nilai default yang cukup besar.

Desain Berorientasi Pengguna di Power BI

Mode kontras tinggi

Mengaktifkan mode kontras tinggi di Windows.

Contoh dasbor Power BI dalam mode kontras tinggi.

Desain Berorientasi Pengguna di Power BI

Meningkatkan kontras

  • Rasio kontras: perbedaan kecerahan yang terlihat antara dua warna
  • Rekomendasi minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18 pt atau lebih)
  • Gambar latar biasanya menurunkan rasio kontras
  • Gunakan alat uji kontras untuk memeriksanya
Desain Berorientasi Pengguna di Power BI

Pembaca layar

  • Power BI mendukung pembaca layar—alat yang membacakan teks pada halaman atau "alt text" gambar bagi pengguna dengan penglihatan terbatas
  • Power BI dapat menampilkan visual sebagai tabel, memudahkan pembaca melihat daftar nilai
  • Alt Text menjelaskan visual dan dapat berbasis teks statis atau nilai suatu field
  • Pintasan keyboard terbatas dan pembaca layar tidak membaca semua konten

Mengatur alt text untuk pembaca layar.

Desain Berorientasi Pengguna di Power BI

Smart narrative

Contoh smart narrative.

Desain Berorientasi Pengguna di Power BI

Audiens kita

  • Organisasi riset ingin memahami tren inflasi
  • Pengguna laporan mungkin memiliki kebutuhan aksesibilitas visual
Desain Berorientasi Pengguna di Power BI

Ayo berlatih!

Desain Berorientasi Pengguna di Power BI

Preparing Video For Download...