Hoff NDS: مشخصهٔ دیزاین سیستم نورودایورجنت Hoff Research

کار در جریان (WIP): این مشخصات هنوز در حال تغییر است.

این Hoff NDS است، دیزاین سیستمی که در محصولات Hoff Research به کار می‌برم و، گاهی بی‌صدا، در هر پروژهٔ تازه اعمالش می‌کنم. شواهد پشت هر قاعده در نوشته دربارهٔ دیزاین سیستم برای افراد نورودایورجنت آمده است. اینجا فقط خود هنجار است.

هدف و دامنه

این سیستم برای کاهش بار شناختی، اضطراب و خطا در رابط دیجیتال وجود دارد، با اولویت دادن به افراد نورودایورجنت و به سود همه. سه نوع محدودیت را پوشش می‌دهد:

• دائمی، مثل کم‌بینایی، نارساخوانی و اوتیسم
• موقت، مثل آسیب، خستگی و اثر دارو
• موقعیتی، مثل محیط پرسروصدا، اتصال ضعیف و استرس

فرض پایه: یادگیری و تصمیم در مغز اتفاق می‌افتند، نه روی صفحه. هر تلاشی که صرف رمزگشایی رابط شود، از کار اصلی کم می‌شود. نقش طراحی پایین آوردن هزینهٔ خواندن، پیمایش و تصمیم‌گیری است.

این یک تم دیداری نیست. مجموعه‌ای از قواعد مستدل است. هر بخش قاعده، دلیل، انواع عصبی مخاطب و اصول UX پشتش را اعلام می‌کند. وقتی قاعده عدد دارد، آن عدد هنجاری است.

بنیان‌ها

بار شناختی. افراد مبتلا به ADHD زیر بار بالا عملکرد پایین‌تر و نوسان بیشتری در زمان واکنش دارند. برای همین فقط آنچه به هدف صفحه خدمت می‌کند دیده می‌شود. اگر عنصری به کار کمک نکند، حواس را از آن پرت می‌کند.

استرس خوب و استرس بد. سطحی از تنش به تمرکز کمک می‌کند و سطحی فلج می‌کند. رابط استرس کار کردن، جست‌وجو و اشتباه را جذب می‌کند تا تنش فرد صرف محتوا شود.

پیش‌بینی‌پذیری. تغییر غیرمنتظره در چیدمان، جایگاه یا نام، مدل ذهنی را می‌شکند و تمرکز را می‌اندازد، و برای افراد اوتیستیک و مبتلا به ADHD هزینهٔ بیشتری دارد. جایگاه‌های مهم میان صفحه‌ها ثابت‌اند، نام یک کنش از آغاز تا پایان مسیر حفظ می‌شود و هیچ چیز بدون کنش فرد جابه‌جا نمی‌شود.

شخصی‌سازی به عنوان الزام. ترجیح حسی میان انواع عصبی و درون هر کدام متفاوت است. سیستم دست‌کم سه تم رنگی (تیره، روشن و کنتراست بالا)، سه اندازهٔ متن و یک کنترل برای خاموش کردن انیمیشن را الزامی می‌کند. این کنترل‌ها در دسترس‌اند، نه دفن‌شده در تنظیمات.

پایستگی پیچیدگی. حداقلی از پیچیدگی هست که بدون نابود کردن کارکرد نمی‌شود حذفش کرد. ساده‌سازی فراتر از آن فقط همه چیز را گیج‌کننده‌تر می‌کند. هدف حذف زیادی است، نه کارکرد.

طراح باید رنگ را بفهمد، بله

کنتراست است که انتخاب رنگ را هدایت می‌کند، نه زیبایی. متن پیوسته ۷:۱ یا بیشتر را هدف می‌گیرد (سطح AAA). حداقل مطلق برای هر متن اطلاعاتی ۴٫۵:۱ است (سطح AA).

قاعده. کل پالت اشباع پایین دارد: نه نئون، نه رنگ تند، نه روشنایی افراطی. رنگ هرگز تنها حامل اطلاعات نیست. هر حالتی که با رنگ بیان شود، متن، آیکون یا شکل همراه دارد.

دلیل. رنگ تند و کنتراست رنگی شدید برای افراد اوتیستیک، مبتلا به ADHD و دچار استرس بینایی ناراحتی و بار حسی اضافه ایجاد می‌کند. در ADHD شواهدی از تمایز رنگی ضعیف‌تر وجود دارد، به‌ویژه روی محور آبی‌زرد، و کوررنگی قرمزسبز رایج‌ترین شکل در جمعیت است. هر دو ممنوعیت رنگ به عنوان تنها نشانه را تقویت می‌کنند. تم تیره پیش‌فرض است، چون بخش زیادی از استفاده در شب است، وقتی نور کمتر صفحه کمتر آزار می‌دهد.

پالت مرجع:

تم کنتراست بالا: پس‌زمینهٔ سیاه، متن سفید، رنگ‌های تأکید روشن‌تر و حاشیه‌های پررنگ‌تر. نسبت کنتراست هر جفت با ابزار در هر تغییر توکن بررسی می‌شود. متن کم‌رنگ هرگز اطلاعات حمل نمی‌کند، فقط سلسله‌مراتب.

حالت سیستم معنای ثابت دارد: مثبت برای موفقیت، توجه برای خطا و هشدار، رنگ تأکید برای کنش و انتخاب. یک رنگ در صفحهٔ دیگر هرگز معنای دیگری ندارد.

انواع عصبی: کم‌بینایی، کوررنگی، سندرم ایرلن و استرس بینایی، اوتیسم، ADHD. اصول: پیوستگی یکنواخت و اثر زیبایی‌کاربردپذیری، با این قید که زیبایی نباید مشکلی را پنهان کند.

تایپوگرافی، پیش از اینکه یک روز کامل دنبال فونت بگردید

قاعده. فونت بدون سریف انسان‌گرا با حروف کاملاً متمایز. متن اصلی 1rem تا 1.25rem روی پایهٔ 16px، یعنی ۱۶ تا ۲۰ پیکسل. فاصلهٔ سطر ۱۵۰٪ تا ۱۷۰٪. فاصلهٔ حروف کمی بیشتر: 0.005em تا 0.02em برای متن اصلی و حدود 0.03em برای متن کوچک مثل برچسب و زیرنویس. عنوان‌ها دست‌کم ۲۰٪ بزرگ‌تر از متن اصلی، متمایز با وزن، هرگز با عوض کردن خانوادهٔ فونت. طول سطر حداکثر ۶۶ نویسه.

دلیل. فونت‌های انسان‌گرا دهانه‌های بازتر و شکل حروف متمایزتر دارند که خواندن روی صفحه‌های معمولی و در اندازه‌های گوناگون را پشتیبانی می‌کند. فاصلهٔ بیشتر ازدحام بصری را کم می‌کند که برای افراد نارساخوان بسیار آزاردهنده است، و این تغییر تایپوگرافیکی با بیشترین شواهد است. فونت‌هایی که «برای نارساخوانی» فروخته می‌شوند در مطالعات کنترل‌شده سودی نشان ندادند.

نویسه‌های بی‌همزاد. فونت بدون ابهام I بزرگ، l کوچک و ۱ را، حروف آینه‌ای b، d، p و q را، و صفر و O را از هم جدا می‌کند. رشته‌های الفبایی‌عددی، مثل رمز عبور، کد و شناسه، با فونتی نمایش داده می‌شوند که این تمایزها را تضمین می‌کند، با فاصلهٔ اضافه.

فونت سریف‌دار فقط در بافت ویرایشی اختیاری می‌ماند، هرگز در متن کاربردی، چون بخشی از مردم از صفحه‌های کم‌تراکم استفاده می‌کنند که سریف در آن‌ها خراب می‌شود.

انواع عصبی: نارساخوانی، نارسایی در حساب، کم‌بینایی، کارکرد اجرایی، سندرم ایرلن. اصل: پرگنانتس.

اعداد جهانی‌اند

قاعده. رشته‌های عددی بلند مثل دنیای واقعی بخش‌بندی می‌شوند: تلفن در بلوک‌ها، سند در بلوک‌ها، کارت در گروه‌های چهارتایی. فیلد عددی خطاهای قابل پیش‌بینی را همان لحظه اصلاح می‌کند، مثل حرف o به جای صفر. هر مقدار یا زمان با رقم، پشتیبان دیداری دارد: نوار پیشرفت با درصد نوشته‌شده، شمارندهٔ مرحله با برجسته کردن مرحلهٔ جاری، یا نمایش گرافیکی نسبت.

دلیل. نارسایی در حساب دشواری پایدار با اعداد است، مستقل از سن و تحصیلات. زمان باقی‌مانده که فقط با عدد گفته شود برای برخی معنایی ندارد. نواری که تا نیمه پر شده با متن «۵۰٪، ۳ از ۶» همان داده را از سه کانال می‌رساند. اما حدی هست: جایگزین کردن کامل عدد با انیمیشن انتزاعی از حد می‌گذرد و گیج می‌کند. عدد می‌ماند، تصویر همراهی می‌کند.

انواع عصبی: نارسایی در حساب، نارساخوانی، کارکرد اجرایی، کم‌بینایی. اصول: پرگنانتس، قانون تسلر، تیغ اوکام.

فاصله‌گذاری، جای نفس (لطفاً) و چیدمان

قاعده. مقیاس فاصله با گام ۴: ۴، ۸، ۱۲، ۱۶، ۲۴، ۳۲، ۴۸، ۶۴ و ۹۶ پیکسل. فضای سفید سخاوتمندانه میان گروه‌ها. آنچه مرتبط است نزدیک می‌ماند، آنچه مرتبط نیست آشکارا جدا. یک ستون اصلی خواندن؛ محتوا هرگز در ستون‌های موازی هم‌سطح رقابت نمی‌کند. ناوبری، محتوا و کنش در هر صفحه و هر اندازهٔ viewport در همان ناحیه می‌مانند.

دلیل. فضای سفید خودش اطلاعات است: گروه‌بندی و سلسله‌مراتب را پیش از خواندن منتقل می‌کند. چیدمان فشرده هزینهٔ مرور را بالا می‌برد، با جریمهٔ بیشتر برای ADHD. مقیاس ثابت تصمیم‌های دلبخواهی را حذف می‌کند و ریتم را قابل پیش‌بینی نگه می‌دارد.

انواع عصبی: ADHD، نارساخوانی، اوتیسم، کارکرد اجرایی. اصول: پرگنانتس، پیوستگی یکنواخت، قانون جیکوب.

هدف‌های لمس و کلیک

قاعده. حداقل هدف ۴۸ در ۴۸ پیکسل برای هر عنصر تعاملی. کنش اصلی ۶۰ در ۶۰. رابط‌های کودکان ۶۰ را حداقل می‌گیرند و برای کنش‌های حیاتی ۸۰ تا ۱۰۰ پیکسل، به‌ویژه زیر ۸ سال. دست‌کم ۸ پیکسل بین هدف‌های همسایه، ۱۶ هر جا ممکن باشد. ناحیهٔ فعال می‌تواند بزرگ‌تر از طرح عنصر باشد و لمسی کمی بیرون از آن را بپذیرد.

دلیل. هدف بزرگ‌تر و نزدیک‌تر زمان انتخاب و خطا را کم می‌کند. برای افراد دچار دیسپراکسی و کودکانی که مهارت حرکتی ظریفشان هنوز در حال رشد است، ناحیهٔ بزرگ تلاش بدنی را کم می‌کند. کشیدن دقیق برای کودکان خردسال دشوار است و همیشه جایگزینی با لمس دارد.

انواع عصبی: دیسپراکسی، ADHD، کم‌بینایی، کودکان در رشد حرکتی. اصل: قانون فیتس.

حرکت

این بخش دربارهٔ سلامت است، نه زیبایی. هیچ چیز بیش از سه بار در ثانیه چشمک نمی‌زند، بدون استثنا، به دلیل خطر تشنج حساس به نور.

قاعده. گذارها ۲۰۰ تا ۵۰۰ میلی‌ثانیه، کند، قابل پیش‌بینی و از یک نوع در کل محصول؛ شفافیت و رنگ را ترجیح دهید و از جابه‌جایی بزرگ پرهیز کنید. انیمیشن کمتر از یک‌سوم صفحه را می‌گیرد. هیچ انیمیشنی خودبه‌خود در حلقه اجرا نمی‌شود. ترجیح کاهش حرکت در سیستم همیشه رعایت می‌شود و انیمیشن با یک گذار سادهٔ شفافیت جایگزین می‌شود، و رابط کنترل خودش را هم برای خاموش کردن همهٔ حرکت‌ها دارد. ممنوع: چرخش پیوسته، پارالاکس، چرخ‌فلک خودکار، عناصری که پروازکنان وارد می‌شوند، کاغذ رنگی و هر حرکتی که کسی نخواسته.

دلیل. حرکت روی صفحه در افراد دچار اختلال دهلیزی تهوع، سرگیجه و سردرگمی ایجاد می‌کند. انیمیشن نامرتبط به افراد اوتیستیک بیش از میانگین آسیب می‌زند. برای ADHD حرکت دائم حواس‌پرتی همیشگی است، حتی در دید پیرامونی، چون چشم دنبالش می‌رود.

انواع عصبی: صرع حساس به نور، اختلال دهلیزی، اوتیسم، ADHD، افراد بسیار حساس. اصل: آستانهٔ دوهرتی.

دکمه‌ها، پیوندها و فیلدها

قاعده. آنچه کلیک‌پذیر است کلیک‌پذیر به نظر می‌رسد و از نظر دیداری با هر عنصر تزئینی فرق دارد. هر عنصر تعاملی چهار حالت دیدنی دارد: سکون، hover، فوکوس و فعال. فوکوس یک حلقهٔ ۳ پیکسلی با فاصلهٔ ۲ تا ۳ پیکسل است، با رنگ پرکنتراست، دیدنی در هر تم، و هرگز حذف نمی‌شود. یک کنش اصلی در هر صفحه، با سلسله‌مراتب روشن میان اصلی، ثانویه و کم‌پیدا. آیکون نیت را تقویت می‌کند، اما در کنش مهم جای متن را نمی‌گیرد.

فیلدهای فرم: برچسب همیشه بالای فیلد دیده می‌شود، هرگز فقط placeholder، چون placeholder درست وقتی محو می‌شود که حافظهٔ کاری بیشترین نیاز را به آن دارد. متن راهنما وقتی قالب روشن نیست پیش از فیلد می‌آید. حداقل ارتفاع برابر هدف لمسی است. اعتبارسنجی در لحظهٔ درست: نه با هر کلید، نه فقط هنگام ارسال.

دلیل. دکمه‌ها و پیوندها حیاتی‌ترین عناصر صفحه‌اند. دسترس‌پذیری فراتر از HTML معنایی و برچسب برای صفحه‌خوان است: طراحی دیداری تعیین می‌کند فرد مردد می‌شود یا عمل می‌کند. تردید بار است و ابهام خطای به تعویق افتاده.

انواع عصبی: دیسپراکسی، نارساخوانی، ADHD، کارکرد اجرایی، کاربران صفحه‌کلید و صفحه‌خوان. اصول: قانون فیتس، اثر فون رستورف، تیغ اوکام.

فرم‌ها و پیشگیری از خطا

قاعده. فرایندهای سنگین، مثل ثبت‌نام، پرداخت و پیکربندی اولیه، به گام‌های کوتاه تقسیم می‌شوند، یک موضوع در هر گام، با جایگاه روشن: گام فعلی، مجموع و آنچه بعد می‌آید. سیستم در پذیرش آسان‌گیر و در بازگرداندن سخت‌گیر است: فاصله، خط تیره، نقطه و حروف بزرگ و کوچک جابه‌جا را می‌پذیرد و خودش یکدست می‌کند. پیشرفت ذخیره می‌شود، چون برای مخاطب اولویت‌دار وقفه قاعده است، نه استثنا.

پیام خطا عذرخواهی نمی‌کند، سرزنش نمی‌کند و مبهم نیست. می‌گوید چه شد و چطور حل می‌شود، در یک جمله. مثلاً: «دو رقم کم است. شمارهٔ همراه ۱۱ رقم دارد.»

دلیل. در برابر مسیری بلند و مبهم، افراد مبتلا به ADHD یا دچار دشواری کارکرد اجرایی تمایل دارند رها کنند یا ارزان‌ترین راه را بروند، حتی اگر اشتباه باشد. گام کوتاه با جایگاه دیدنی یک هزینهٔ بزرگ را به چند هزینهٔ کوچک تبدیل می‌کند، با حس پیشرفت.

انواع عصبی: ADHD، کارکرد اجرایی، نارسایی در حساب، اضطراب. اصول: قانون میلر، قانون پوستل، قانون پارکینسون، قاعدهٔ اوج و پایان.

ارتباط سیستم

قاعده. هشدارها، اعتبارسنجی‌ها، اعلان‌ها و پیام‌ها برای هر نوع از یک الگوی دیداری واحد در کل محصول پیروی می‌کنند. موفقیت گرم و مستقیم است. خطا مؤدب و رو به راه‌حل. نام یک کنش در کل مسیر حفظ می‌شود: دکمهٔ «انتشار» تأیید «منتشر شد» را می‌دهد، هرگز مترادفی. اعلان برای خدمت به فرد است، نه برای برگرداندنش: نه درگیرسازی دوباره، نه فوریت ساختگی، نه کمیابی مصنوعی. فرد کنترل می‌کند چه دریافت کند و پیش‌فرض حداقل است.

دلیل. قرارداد شکسته و سبک ناهمخوان بی‌اعتمادی می‌آورند و تمرکز را می‌اندازند. آشناسازی جای وضوح را نمی‌گیرد: صفحه باید پیش از نخستین تعامل قابل فهم باشد. آموزش گام‌به‌گام وصله‌ای برای رابطی است که شکست خورده.

انواع عصبی: ADHD، نارساخوانی، کارکرد اجرایی، اوتیسم. اصول: قانون جیکوب، قانون میلر، قاعدهٔ اوج و پایان.

زیرنویس، صدا و رسانه

قاعده. هر رسانهٔ گفتاری زیرنویس هم‌زمان دارد، با متن روشن روی پس‌زمینهٔ تیرهٔ یکدست، در بلوک‌های حداکثر دوخطی. صدا هرگز خودبه‌خود شروع نمی‌شود. هر پخش‌کننده مکث، عقب‌گرد و کنترل سرعت دارد. محتوای ضروری هرگز فقط صوتی یا فقط ویدیویی نیست: همیشه جایگزین متنی هست.

دلیل. زیرنویس به ناشنوایان و کم‌شنوایان، به کسانی که با خواندن بهتر می‌فهمند، به کسانی که در محیط پرسروصدا هستند و به کسانی که تقویت از دو کانال لازم دارند خدمت می‌کند. صدای غیرمنتظره برای افراد اوتیستیک و بسیار حساس تهاجمی حسی است.

انواع عصبی: ناشنوایی و کم‌شنوایی، اوتیسم، ADHD، افراد بسیار حساس، پردازش شنیداری. اصول: افزونگی کانال و پرگنانتس.

محتوا و لحن نوشتار

قاعده. وجه معلوم، جملهٔ کوتاه، یک ایده در هر جمله، یک موضوع در هر بند. نام آنچه را فرد کنترل می‌کند و می‌شناسد توصیف می‌کند، نه شیوهٔ ساخت سیستم را. دکمه دقیقاً می‌گوید چه می‌شود: «ذخیرهٔ تغییرات»، نه «ارسال». زبان ساده بدون کودکانه کردن. اصطلاح تخصصی فقط وقتی که همان چیزی است که فرد باید یاد بگیرد، و آن وقت در نخستین بار توضیح داده می‌شود. هر واژه روی صفحه کارکرد دارد؛ آنچه به فهم کمک نمی‌کند حذف می‌شود.

دلیل. برای افراد نارساخوان، و برای هر کسی زیر بار، هزینهٔ رمزگشایی متن با محتوای آن رقابت می‌کند. ایجاز دسترس‌پذیری است.

انواع عصبی: نارساخوانی، ADHD، کارکرد اجرایی، گویشوران غیربومی. اصول: تیغ اوکام، قانون تسلر.

الگوهای رابط

قاعده. اول محتوا: هر صفحه از هدف فرد آغاز می‌شود و آنچه به هدف خدمت نکند حذف می‌شود. ناوبری یکدست، با همان موارد در همان جاها. هیچ پنجرهٔ بازشویی کار را قطع نمی‌کند، مگر خطر واقعی و فوری. هیچ تغییر چیدمانی بدون کنش فرد. تراکم کنترل‌شده: نشان دادن بیشتر بر اساس درخواست به جای ریختن همه چیز. حالت تمرکز در مسیرهای طولانی در دسترس است و هر چه را که کار جاری نیست پنهان می‌کند.

دلیل. در برابر گزینه‌های رقیب فراوان، افراد مبتلا به ADHD تمایل دارند خشکشان بزند یا ارزان‌ترین کار را انتخاب کنند. پایستگی پیچیدگی یعنی خرج کردنش جایی که ارزش می‌سازد: در محتوا، نه در کار کردن با رابط.

انواع عصبی: ADHD، اوتیسم، کارکرد اجرایی، اضطراب. اصول: پارادوکس پیچیدگی، قانون هیک، قانون جیکوب، اثر زیبایی‌کاربردپذیری.

توکن‌ها

انواع عصبی در نظر گرفته‌شده

اصول UX

چک‌لیست انطباق

پیش از انتشار هر صفحه:

• کنتراست هر متن اطلاعاتی دست‌کم ۴٫۵:۱ و برای متن اصلی ۷:۱
• فونت بدون سریف انسان‌گرا، با I، l و ۱، b، d، p و q، ۰ و O متمایز
• فاصلهٔ سطر ۱۵۰٪ یا بیشتر و سطر تا ۶۶ نویسه
• هر هدف تعاملی ۴۸ پیکسل یا بیشتر با ۸ پیکسل فضای خالی
• فوکوس صفحه‌کلید دیدنی روی هر عنصر تعاملی
• هیچ چشمکی بیش از سه بار در ثانیه
• رعایت کاهش حرکت و وجود کنترل محلی حرکت
• سه تم و سه اندازهٔ متن در حال کار
• برچسب دیدنی در هر فیلد و خطاهای رو به راه‌حل
• عددهای بلند بخش‌بندی‌شده و مقدارها با پشتیبان دیداری
• رسانهٔ گفتاری با زیرنویس و بدون پخش خودکار
• یک کنش اصلی در هر صفحه
• نام هر کنش از آغاز تا پایان مسیر یکسان
• هیچ سازوکار درگیرسازی اجباری

فرایند

این سیستم یک سند زنده است. هر قاعدهٔ تازه با دلیل و انواع عصبی مخاطبش وارد می‌شود و هر قاعدهٔ موجود را می‌شود با شواهد بهتر به چالش کشید. آزمون با افراد نورودایورجنت واقعی بخشی از چرخهٔ طراحی است، با روش مشارکتی، نه مرحلهٔ نهایی اعتبارسنجی. وقتی آزمون با قاعده‌ای در تضاد باشد، قاعده تغییر می‌کند و تغییر با تاریخ و دلیل ثبت می‌شود.

Hoff Research. Make it simple, but significant.