Hoff NDS: spesifikasi design system neurodivergen Hoff Research

Kerja dalam proses (WIP): spesifikasi ini masih berubah.

Inilah Hoff NDS, design system yang saya guna dalam produk Hoff Research dan terapkan, kadang-kadang secara senyap, dalam setiap projek baharu. Bukti di sebalik setiap peraturan ada dalam post tentang design system untuk orang neurodivergen. Di sini hanya normanya.

Tujuan dan skop

Sistem ini wujud untuk mengurangkan beban kognitif, kebimbangan dan kesilapan dalam antara muka digital, mengutamakan orang neurodivergen dan memberi manfaat kepada semua. Ia meliputi tiga jenis had:

• Kekal, seperti penglihatan terhad, disleksia dan autisme
• Sementara, seperti kecederaan, keletihan dan kesan ubat
• Situasi, seperti tempat bising, sambungan lemah dan tekanan

Premisnya: pembelajaran dan keputusan berlaku dalam otak, bukan pada skrin. Setiap usaha yang dihabiskan untuk mentafsir antara muka ialah usaha yang diambil daripada tugas sebenar. Peranan reka bentuk ialah menurunkan kos membaca, menavigasi dan membuat keputusan.

Ia bukan tema visual. Ia set peraturan berjustifikasi. Setiap seksyen menyatakan peraturan, sebab, neurotaip yang dilayani dan prinsip UX yang menyokongnya. Apabila peraturan ada nombor, nombor itu normatif.

Asas

Beban kognitif. Orang dengan ADHD berprestasi lebih rendah dan masa tindak balasnya lebih berubah-ubah di bawah beban tinggi. Jadi hanya apa yang melayani matlamat skrin kekal kelihatan. Jika sesuatu elemen tidak memaklumkan tugas, ia mengalih perhatian daripadanya.

Tekanan baik dan tekanan buruk. Ada tahap ketegangan yang membantu fokus dan tahap yang melumpuhkan. Antara muka menyerap tekanan mengendali, mencari dan tersilap, supaya ketegangan seseorang pergi kepada kandungan.

Kebolehjangkaan. Perubahan susun atur, kedudukan atau nama yang tidak dijangka memecahkan model mental dan menjatuhkan fokus, dengan kos lebih tinggi bagi orang autistik dan dengan ADHD. Kedudukan penting stabil antara skrin, nama sesuatu tindakan kekal dari awal hingga akhir aliran, dan tiada yang bergerak tanpa tindakan orang itu.

Pemperibadian sebagai keperluan. Pilihan deria berbeza antara neurotaip dan dalam setiap neurotaip. Sistem ini mewajibkan sekurang-kurangnya tiga tema warna (gelap, cerah dan kontras tinggi), tiga saiz teks dan kawalan yang mematikan animasi. Kawalan ini kelihatan, bukan terkubur dalam tetapan.

Pemuliharaan kerumitan. Ada kerumitan minimum yang tidak boleh dibuang tanpa memusnahkan fungsi. Memudahkan lebih daripada itu hanya menjadikan semuanya lebih mengelirukan. Matlamatnya membuang lebihan, bukan fungsi.

Pereka mesti faham warna, ya

Kontras memandu pilihan warna, bukan estetika. Teks berterusan menyasarkan 7:1 atau lebih (tahap AAA). Minimum mutlak bagi sebarang teks bermaklumat ialah 4.5:1 (tahap AA).

Peraturan. Seluruh palet berketepuan rendah: tiada neon, tiada warna terang menyala, tiada kecerahan melampau. Warna tidak pernah menjadi satu-satunya pembawa maklumat. Setiap keadaan yang dikomunikasikan dengan warna disertai teks, ikon atau bentuk.

Sebab. Warna terang dan kontras kromatik kuat menyebabkan ketidakselesaan dan beban deria pada orang autistik, dengan ADHD dan dengan tekanan visual. Dalam ADHD ada bukti diskriminasi warna yang berkurang, terutamanya pada paksi biru-kuning, dan buta warna merah-hijau ialah bentuk paling biasa dalam populasi. Kedua-duanya menguatkan larangan warna sebagai isyarat tunggal. Tema gelap ialah lalai kerana banyak penggunaan berlaku pada waktu malam, bila kurang cahaya dari skrin kurang mengganggu.

Palet rujukan:

Tema kontras tinggi: latar hitam, teks putih, aksen dicerahkan dan sempadan diperkuat. Nisbah kontras setiap pasangan disemak dengan alat pada setiap perubahan token. Teks pudar tidak pernah membawa maklumat, hanya hierarki.

Keadaan sistem mempunyai semantik tetap: positif untuk kejayaan, perhatian untuk ralat dan amaran, aksen untuk tindakan dan pilihan. Warna yang sama tidak pernah bermaksud perkara lain pada skrin lain.

Neurotaip: penglihatan terhad, buta warna, sindrom Irlen dan tekanan visual, autisme, ADHD. Prinsip: keterhubungan seragam dan kesan estetika-kebolehgunaan, dengan syarat bahawa keindahan tidak boleh menyembunyikan masalah.

Tipografi, sebelum menghabiskan sehari suntuk mencari fon

Peraturan. Fon sans-serif humanis dengan huruf yang jelas berbeza. Teks badan 1rem hingga 1.25rem atas asas 16px, iaitu 16 hingga 20px. Jarak baris 150% hingga 170%. Jarak huruf ditambah sedikit: 0.005em hingga 0.02em untuk badan dan kira-kira 0.03em untuk teks kecil seperti label dan kapsyen. Tajuk sekurang-kurangnya 20% lebih besar daripada badan, dibezakan dengan ketebalan, bukan dengan menukar keluarga fon. Baris paling panjang 66 aksara.

Sebab. Fon humanis mempunyai bukaan lebih luas dan bentuk huruf lebih jelas, yang menyokong bacaan pada skrin biasa dan pada pelbagai saiz. Jarak lebih besar mengurangkan crowding, yang sangat mengganggu orang disleksia, dan ia perubahan tipografi dengan bukti paling banyak. Fon yang dijual "untuk disleksia" tidak menunjukkan manfaat dalam kajian terkawal.

Aksara tanpa kembar. Fon membezakan tanpa kekeliruan huruf I besar, l kecil dan nombor 1; huruf bercermin b, d, p dan q; sifar dan O. Jujukan alfanumerik, seperti kata laluan, kod dan pengecam, dipaparkan dalam fon yang menjamin perbezaan ini, dengan jarak tambahan.

Serif terhad kepada konteks editorial pilihan, tidak pernah dalam teks berfungsi, kerana sebahagian orang menggunakan skrin berketumpatan rendah, di mana serif merosot.

Neurotaip: disleksia, diskalkulia, penglihatan terhad, fungsi eksekutif, sindrom Irlen. Prinsip: Prägnanz.

Nombor itu sejagat

Peraturan. Jujukan nombor yang panjang dipecah seperti di dunia sebenar: telefon dalam blok, dokumen dalam blok, kad dalam kumpulan empat. Medan nombor membetulkan kesilapan yang boleh dijangka serta-merta, seperti huruf o di tempat sifar. Setiap kuantiti atau masa dalam digit disertai sokongan visual: bar kemajuan dengan peratus ditulis, pembilang langkah dengan langkah semasa ditonjolkan, atau grafik perkadaran.

Sebab. Diskalkulia ialah kesukaran berterusan dengan nombor, tanpa mengira umur dan persekolahan. Baki masa yang diberi hanya sebagai nombor tidak bermakna bagi sesetengah profil. Bar separuh penuh dengan teks "50%, 3 daripada 6" menyampaikan data yang sama melalui tiga saluran. Tetapi ada had: menggantikan nombor sepenuhnya dengan animasi abstrak sudah terlalu jauh dan mengelirukan. Nombor kekal, visual mengiringi.

Neurotaip: diskalkulia, disleksia, fungsi eksekutif, penglihatan terhad. Prinsip: Prägnanz, hukum Tesler, pisau cukur Occam.

Jarak, ruang bernafas (tolonglah) dan susun atur

Peraturan. Skala jarak dalam rentak 4: 4, 8, 12, 16, 24, 32, 48, 64 dan 96 piksel. Ruang kosong yang murah hati antara kumpulan. Yang berkaitan diletak dekat, yang tidak berkaitan dipisahkan dengan jelas. Satu lajur bacaan utama; kandungan tidak pernah bersaing dalam lajur selari yang sama hierarki. Navigasi, kandungan dan tindakan kekal di kawasan yang sama pada setiap skrin dan setiap saiz viewport.

Sebab. Ruang kosong ialah maklumat: ia menyampaikan kumpulan dan hierarki sebelum membaca. Susun atur yang padat menaikkan kos mengimbas, dengan penalti lebih besar untuk ADHD. Skala tetap menghapuskan keputusan sewenang-wenang dan mengekalkan rentak yang boleh dijangka.

Neurotaip: ADHD, disleksia, autisme, fungsi eksekutif. Prinsip: Prägnanz, keterhubungan seragam, hukum Jakob.

Sasaran sentuh dan klik

Peraturan. Sasaran minimum 48 kali 48 piksel untuk sebarang elemen interaktif. Tindakan utama 60 kali 60. Antara muka untuk kanak-kanak guna 60 sebagai minimum dan 80 hingga 100 piksel untuk tindakan kritikal, terutamanya bawah umur 8 tahun. Sekurang-kurangnya 8 piksel antara sasaran berjiran, 16 jika boleh. Kawasan aktif boleh lebih besar daripada lukisan elemen, menerima sentuhan yang sedikit tersasar.

Sebab. Sasaran lebih besar dan lebih dekat mengurangkan masa memilih dan kesilapan. Bagi orang dengan dispraksia dan kanak-kanak yang motor halusnya masih berkembang, kawasan besar mengurangkan usaha fizikal. Menyeret dengan tepat sukar bagi kanak-kanak kecil dan sentiasa ada alternatif dengan sentuhan.

Neurotaip: dispraksia, ADHD, penglihatan terhad, kanak-kanak dalam perkembangan motor. Prinsip: hukum Fitts.

Gerakan

Seksyen ini tentang kesihatan, bukan estetika. Tiada apa yang berkelip lebih daripada tiga kali sesaat, tanpa kecuali, kerana risiko sawan fotosensitif.

Peraturan. Peralihan 200 hingga 500 milisaat, perlahan, boleh dijangka dan sama jenis di seluruh produk; utamakan kelegapan dan warna, elakkan anjakan besar. Animasi mengambil kurang daripada satu pertiga skrin. Tiada animasi berjalan sendiri dalam gelung. Pilihan gerakan dikurangkan sistem sentiasa dihormati, menggantikan animasi dengan peralihan kelegapan ringkas, dan antara muka juga ada kawalan sendiri untuk mematikan semua gerakan. Dilarang: putaran berterusan, paralaks, karusel automatik, elemen yang terbang masuk, konfeti dan sebarang gerakan yang tidak diminta.

Sebab. Gerakan pada skrin menyebabkan loya, pening dan kekeliruan arah bagi orang dengan gangguan vestibular. Animasi tidak relevan lebih mengganggu orang autistik berbanding purata. Bagi ADHD, gerakan berterusan ialah gangguan kekal, walaupun dalam penglihatan periferi, kerana mata mengikutnya.

Neurotaip: epilepsi fotosensitif, gangguan vestibular, autisme, ADHD, orang sangat sensitif. Prinsip: ambang Doherty.

Butang, pautan dan medan

Peraturan. Yang boleh diklik kelihatan boleh diklik, berbeza secara visual daripada sebarang elemen hiasan. Setiap elemen interaktif ada empat keadaan yang kelihatan: rehat, hover, fokus dan aktif. Fokus ialah cincin 3 piksel dengan jarak 2 hingga 3 piksel, dalam warna kontras tinggi, kelihatan dalam semua tema, dan tidak pernah dibuang. Satu tindakan utama sahaja bagi setiap skrin, dengan hierarki jelas antara utama, sekunder dan halus. Ikon menguatkan niat tetapi tidak menggantikan teks pada tindakan penting.

Medan borang: label sentiasa kelihatan di atas medan, tidak pernah hanya placeholder, kerana placeholder hilang tepat ketika memori kerja paling memerlukannya. Teks bantuan sebelum medan bila formatnya tidak jelas. Ketinggian minimum sama dengan sasaran sentuh. Pengesahan pada masa yang betul: bukan pada setiap kekunci, bukan hanya semasa hantar.

Sebab. Butang dan pautan ialah elemen paling kritikal pada halaman. Kebolehcapaian melangkaui HTML semantik dan label untuk pembaca skrin: reka bentuk visual menentukan sama ada seseorang teragak-agak atau bertindak. Teragak-agak ialah beban, dan kekaburan ialah kesilapan yang ditangguhkan.

Neurotaip: dispraksia, disleksia, ADHD, fungsi eksekutif, pengguna papan kekunci dan pembaca skrin. Prinsip: hukum Fitts, kesan von Restorff, pisau cukur Occam.

Borang dan pencegahan kesilapan

Peraturan. Proses berat, seperti pendaftaran, pembayaran dan tetapan awal, dibahagi kepada langkah pendek, satu perkara bagi setiap langkah, dengan kedudukan jelas: langkah semasa, jumlah dan apa seterusnya. Sistem liberal dalam apa yang diterima dan tegas dalam apa yang dipulangkan: ia menerima ruang, sengkang, titik dan huruf besar yang tertukar, dan menormalkannya sendiri. Kemajuan disimpan, kerana gangguan ialah kebiasaan, bukan pengecualian, bagi khalayak keutamaan.

Mesej ralat tidak meminta maaf, tidak menyalahkan dan tidak kabur. Ia menyatakan apa yang berlaku dan cara menyelesaikannya, dalam satu ayat. Contohnya: "Kurang dua digit. Nombor telefon bimbit ada 10 atau 11 digit."

Sebab. Berdepan aliran yang panjang dan kabur, orang dengan ADHD atau kesukaran fungsi eksekutif cenderung berhenti atau mengambil jalan paling murah, walaupun salah. Langkah pendek dengan kedudukan kelihatan menukar satu kos besar kepada beberapa kos kecil, dengan rasa kemajuan.

Neurotaip: ADHD, fungsi eksekutif, diskalkulia, kebimbangan. Prinsip: hukum Miller, hukum Postel, hukum Parkinson, peraturan puncak dan akhir.

Komunikasi sistem

Peraturan. Amaran, pengesahan, pemberitahuan dan mesej mengikut satu corak visual bagi setiap jenis di seluruh produk. Kejayaan mesra dan terus. Ralat sopan dan berorientasikan penyelesaian. Nama sesuatu tindakan kekal sepanjang aliran: butang "terbitkan" menghasilkan pengesahan "diterbitkan", tidak pernah sinonim. Pemberitahuan wujud untuk melayani orang itu, bukan untuk menariknya kembali: tiada penglibatan semula, urgensi rekaan atau kekurangan buatan. Orang itu mengawal apa yang diterima, dan lalainya ialah minimum.

Sebab. Konvensyen yang dilanggar dan gaya yang tidak konsisten menimbulkan rasa tidak percaya dan menjatuhkan fokus. Onboarding tidak menggantikan kejelasan: skrin mesti difahami sebelum interaksi pertama. Tutorial ialah tampalan untuk antara muka yang gagal.

Neurotaip: ADHD, disleksia, fungsi eksekutif, autisme. Prinsip: hukum Jakob, hukum Miller, peraturan puncak dan akhir.

Kapsyen, audio dan media

Peraturan. Semua media bertutur ada kapsyen yang diselaraskan, dalam teks cerah atas latar gelap padu, dalam blok sehingga dua baris. Audio tidak pernah bermula sendiri. Setiap pemain ada jeda, undur dan kawalan kelajuan. Kandungan penting tidak pernah wujud hanya dalam audio atau hanya dalam video: sentiasa ada alternatif teks.

Sebab. Kapsyen melayani orang pekak atau kurang pendengaran, orang yang lebih memahami dengan membaca, orang di tempat bising dan orang yang memerlukan pengukuhan melalui dua saluran. Bunyi yang tidak dijangka ialah serangan deria bagi profil autistik dan sangat sensitif.

Neurotaip: pekak dan kurang pendengaran, autisme, ADHD, orang sangat sensitif, pemprosesan auditori. Prinsip: redundansi saluran dan Prägnanz.

Kandungan dan nada penulisan

Peraturan. Ayat aktif, ayat pendek, satu idea bagi setiap ayat, satu perkara bagi setiap perenggan. Nama menerangkan apa yang dikawal dan dikenali oleh orang itu, bukan cara sistem dibina. Butang menyatakan dengan tepat apa yang berlaku: "simpan perubahan", bukan "hantar". Bahasa mudah tanpa melayan seperti kanak-kanak. Jargon hanya bila ia istilah yang perlu dipelajari, dan diterangkan pada kali pertama. Setiap perkataan pada skrin ada fungsi; yang tidak membantu memahami dibuang.

Sebab. Bagi orang disleksia, dan bagi sesiapa di bawah beban, kos menyahkod teks bersaing dengan kandungannya. Ringkas itu kebolehcapaian.

Neurotaip: disleksia, ADHD, fungsi eksekutif, penutur bukan asli. Prinsip: pisau cukur Occam, hukum Tesler.

Corak antara muka

Peraturan. Kandungan dahulu: setiap skrin bermula daripada matlamat orang itu, dan yang tidak melayani matlamat dibuang. Navigasi konsisten, dengan item yang sama di tempat yang sama. Tiada pop-up yang mengganggu tugas, kecuali risiko sebenar dan segera. Tiada perubahan susun atur tanpa tindakan orang itu. Ketumpatan terkawal: tunjuk lebih atas permintaan dan bukan longgokkan semuanya. Mod fokus tersedia dalam aliran panjang, menyembunyikan semua yang bukan tugas semasa.

Sebab. Berdepan banyak pilihan yang bersaing, orang dengan ADHD cenderung terkaku atau memilih tugas paling murah. Memelihara kerumitan bermaksud membelanjakannya di tempat yang menghasilkan nilai: pada kandungan, bukan pada operasi.

Neurotaip: ADHD, autisme, fungsi eksekutif, kebimbangan. Prinsip: paradoks kerumitan, hukum Hick, hukum Jakob, kesan estetika-kebolehgunaan.

Token

Neurotaip yang dipertimbangkan

Prinsip UX

Senarai semak pematuhan

Sebelum menerbitkan sebarang skrin:

• Kontras semua teks bermaklumat sekurang-kurangnya 4.5:1 dan 7:1 untuk teks badan
• Sans-serif humanis, dengan I, l dan 1, b, d, p dan q, 0 dan O berbeza
• Jarak baris 150% atau lebih dan baris sehingga 66 aksara
• Setiap sasaran interaktif 48 piksel atau lebih dengan 8 piksel ruang
• Fokus papan kekunci kelihatan pada setiap elemen interaktif
• Tiada kelipan melebihi tiga sesaat
• Gerakan dikurangkan dihormati dan kawalan gerakan tempatan ada
• Tiga tema dan tiga saiz teks berfungsi
• Label kelihatan pada setiap medan dan ralat berorientasikan penyelesaian
• Nombor panjang bersegmen dan kuantiti dengan sokongan visual
• Media bertutur berkapsyen dan tanpa main automatik
• Satu tindakan utama bagi setiap skrin
• Nama setiap tindakan sama dari awal hingga akhir aliran
• Tiada mekanik penglibatan kompulsif

Proses

Sistem ini dokumen hidup. Setiap peraturan baharu masuk dengan justifikasi dan neurotaip yang dilayani, dan setiap peraturan sedia ada boleh dicabar dengan bukti yang lebih baik. Ujian dengan orang neurodivergen sebenar ialah sebahagian daripada kitaran reka bentuk, dengan kaedah penyertaan, dan bukan peringkat pengesahan akhir. Bila ujian bercanggah dengan peraturan, peraturan berubah, dan perubahan direkodkan dengan tarikh dan sebab.

Hoff Research. Make it simple, but significant.