Dashboard UX Lab

صمّم حالات لوحة المعلومات التي لا تظهر في أي لقطة شاشة

تقضي لوحات المعلومات الحقيقية وقتًا طويلًا في التحميل، أو في انتظار خدمات بطيئة، أو دون بيانات تعرضها، أو في حالة إخفاق، أو وهي تحجب بيانات لا يحق للمستخدم رؤيتها. يتيح لك هذا المختبر استدعاء كل حالة من هذه الحالات عمدًا، وأن ترى بدقة كيف ينبغي أن تستجيب لوحة معلومات متقنة الصنع: على الشاشة، ولقارئ الشاشة، ولتركيز لوحة المفاتيح.

افتح المختبراقرأ أدلة السيناريوهات

تصل البيانات في أقل من ثانية، ويحل المحتوى محل عناصر مؤقتة بالحجم نفسه تمامًا.

افتح هذه الحالة في المختبر: اكتمل التحميل

ستة سيناريوهات، وثلاث لغات، وتنفيذان مستقلان لمواصفة واحدة، يُختبران في Chromium وFirefox وWebKit مع كل تغيير.

لا تُقاس لوحة المعلومات بمظهرها حين تكون البيانات مثالية، بل بسلوكها حين تتأخر تلك البيانات أو تغيب أو تُخفق أو تكون خارج صلاحياتك.

المشكلة

تكاد تصاميم لوحات المعلومات وعروضها التوضيحية تقتصر دائمًا على المسار المثالي: تصل البيانات فورًا، ويُرجع كل عامل تصفية نتائج، ويستطيع كل مستخدم رؤية كل شيء. أما في بيئة الإنتاج فالحالات الأخرى شائعة، وفيها تُكسب ثقة المستخدمين أو تضيع.

ما يواجهه المستخدمون فعلًا

  • مؤشر تحميل لا يتغير أبدًا، دون أي دليل على أن شيئًا ما زال يحدث.
  • محتوى يقفز من مكانه كلما انتهى أحد العناصر من التحميل في وقت مختلف.
  • مخطط فارغ لعامل تصفية لم يطابق شيئًا ببساطة، دون أي تفسير.
  • رسالة «حدث خطأ ما» لمشكلة في الصلاحيات، مع زر لإعادة المحاولة لن يفيد أبدًا.
  • أزرار إعادة محاولة ترسل الطلب نفسه مرتين، واستجابات متأخرة تستبدل بيانات أحدث منها.
  • مستخدمو قارئات الشاشة لا يسمعون شيئًا عندما تتغير البيانات، أو يسمعون سيلًا من الإعلانات القديمة.
  • تركيز لوحة المفاتيح يقفز إلى أعلى الصفحة عندما يختفي زر.

كيف تُعالَج هذه الحالات عادةً

تصل معظم الفرق إلى هذه الحالات بالطريقة نفسها، اختصارًا بعد آخر:

  1. التصميم يغطي حالة اكتمال البيانات فقط

    تعرض النماذج بيانات كاملة، وتُؤجَّل حالات التحميل والفراغ والخطأ، أو تُختزل في مؤشر تحميل ورسالة عامّين.

  2. كل مكوّن يرتجل

    يضيف كل عنصر مؤشر التحميل ونص الخطأ الخاصين به، فتختلف التوقيتات والصياغة وطريقة الاستعادة داخل الصفحة الواحدة.

  3. الاختبار يعتمد على إبطاء الشبكة يدويًا

    يبطّئ أحدهم شبكة المتصفح مرة واحدة، ويلقي نظرة سريعة، ثم يمضي. ولأن السلوك لا يُوثَّق أبدًا، فإنه ينحرف مع الوقت.

  4. إمكانية الوصول تُراجَع في النهاية

    تُراجَع الإعلانات وسلوك التركيز في تدقيق متأخر، حين يصبح تغييرها مكلفًا.

لا خطأ في أي من هذه الخطوات بمفردها، لكنها مجتمعةً تعني أن أحدًا لا يتولى مسؤولية الحالات التي يراها المستخدمون أكثر من غيرها في الظروف الحقيقية.

كيف يساعد هذا المختبر

يتعامل المختبر مع كل حالة على أنها سلوك أساسي ومحدد بدقة، ويُظهر الجوانب الخفية من هذا السلوك.

  • مواصفة مكتوبة للسلوك

    التوقيتات (لا شيء خلال 300 مللي ثانية، وهياكل مؤقتة حتى 3 ثوانٍ، ثم شرح عند 3 ثوانٍ، وزر إلغاء عند 8 ثوانٍ) والنصوص والإعلانات وقواعد التركيز كلها موثّقة، فيمكن مراجعتها ومناقشتها.

  • سيناريوهات قابلة للتكرار

    كل تركيبة من زمن الاستجابة والإخفاق والدور وعامل التصفية لها رابط خاص، فيستطيع المصمم والمطوّر والمختبِر رؤية الحالة نفسها تمامًا.

  • مفتش يكشف ما لا تُظهره لقطات الشاشة

    يعرض خط زمني مباشر كل طلب وكل تغيّر في الحالة، وكل رسالة أُرسلت إلى قارئ الشاشة، وكل نقل برمجي للتركيز.

  • مواصفة واحدة وتنفيذان

    بُني السلوك نفسه بـ React وبـ TypeScript دون إطار عمل، وتتحقق منهما مجموعة اختبارات واحدة مشتركة، فتكون المقارنة منصفة.

  • ثلاث لغات، إحداها من اليمين إلى اليسار

    كل شيء يعمل بالإنجليزية والإسبانية والعربية، مع تخطيط معكوس، وتنسيقات أرقام محلية، وقواعد جمع خاصة بكل لغة.

مقارنة بالأدوات التي ربما تستخدمها

المختبر مرجع لا بديل. هذه الأدوات ممتازة فيما صُممت له، ويوضح الجدول أين يتوقف دور كلٍّ منها.

أدوات شائعة لبناء حالات لوحات المعلومات واختبارها، وما تغطيه كل أداة
الأداةمفيدة فيما لا تقدّمه
أدوات المطوّرين في المتصفح (إبطاء الشبكة)إبطاء الطلبات الحقيقية أو حجبها لمعرفة ما يحدث.تعريفًا لما ينبغي أن يحدث، أو حالات قابلة للتكرار والمشاركة، أو عرضًا للإعلانات والتركيز.
Mock Service Worker (MSW)محاكاة استجابات الواجهة البرمجية وتأخيرها وأخطائها في المتصفح وفي الاختبارات.إرشادات حول كيفية استجابة الواجهة لتلك الاستجابات.
Storybookبناء المكوّنات وتوثيقها بمعزل عن غيرها، بقصة لكل حالة.الانتقال بين الحالات مع مرور الوقت، كطلب بطيء يتحول إلى خطأ ثم إلى إعادة محاولة.
مكتبات المكوّنات (الهياكل المؤقتة وحالات الفراغ والنتيجة)وحدات بناء جاهزة لكل حالة.متى تُعرض كل منها، ولأي مدة، وماذا يُعلَن.
مكتبات جلب البيانات (⁦TanStack Query⁩ و⁦SWR⁩)حالة الطلبات والتخزين المؤقت وإعادة المحاولة والإلغاء في الشيفرة.تصميم كل حالة كما يراها المستخدم.
Dashboard UX Labمرجع محدد وقابل للفحص والاختبار لسلوك كل حالة، بثلاث لغات.مكوّنات جاهزة للإنتاج أو مكتبة للتثبيت. استخدمه إلى جانب الأدوات السابقة.

ستة سيناريوهات للاستكشاف

يفتح كل سيناريو المختبر على تلك الحالة، ولكل سيناريو أيضًا دليل مكتوب.

ست قواعد يلتزم بها المختبر

  • لا هياكل مؤقتة للاستجابات السريعة.

    لا تظهر العناصر المؤقتة إلا بعد 300 مللي ثانية.

  • البطء زمنٌ لا حالة.

    تتغير الرسالة عند 3 ثوانٍ، ويظهر زر الإلغاء عند 8 ثوانٍ.

  • الفراغ إجابة لا خطأ.

    يذكر عامل التصفية ويقدّم مخرجًا.

  • الإخفاق يُشرح ويمكن تداركه.

    معرّف للطلب، وإعادة محاولة واحدة، ودون إرسال مزدوج.

  • المنع ليس إخفاقًا.

    لا إعادة محاولة مع الخطأ 403؛ بل اشرح من يستطيع منح الوصول.

  • أعلن مرة واحدة، وانقل التركيز نادرًا.

    فقط عندما يختفي العنصر الذي يحمل التركيز.

لمن هذا المختبر

  • مطوّرو الواجهات الأمامية

    رؤية معالجة الطلبات والإلغاء والإعلانات وإدارة التركيز وهي تعمل معًا، وقراءة الشيفرة التي تقف وراءها.

  • المصممون ومديرو المنتجات

    استخدام السيناريوهات والأدلة قائمةَ تحقق ولغةً مشتركة لتحديد الحالات التي تتجاوز المسار المثالي.

  • مراجعو إمكانية الوصول والمختبِرون

    إعادة إنتاج أي حالة من رابط، ورؤية ما أُعلن بالضبط وإلى أين انتقل التركيز.

بُني واختُبر باستخدام

  • Astro
  • React
  • TypeScript
  • HTML
  • CSS
  • Node.js
  • npm
  • Vitest
  • Playwright
  • ESLint
  • GitHub
  • GitHub Actions

اكسر لوحة معلومات عمدًا

أبطئها، واجعلها تُخفق، واسحب منها الصلاحيات، ثم شاهد ما تفعله واجهة متقنة الصنع.

افتح المختبراقرأ المواصفة على GitHub

ثلاث طرق لكسرها

أين وصل المشروع

الهدف: أن يصبح سلوك لوحة المعلومات أسهل في الرؤية والسماع والاختبار مما تتيحه أي أداة من أدوات المطوّرين في المتصفح اليوم.

تعرض أدوات المطوّرين الطلبات وشجرة DOM، لكنها لا تُظهر ما ينتظره الشخص، ولا ما يقوله قارئ الشاشة، ولا أين يستقر تركيز لوحة المفاتيح. يُبنى هذا المختبر علنًا ليُظهر ذلك تحديدًا، مرحلةً بعد مرحلة.

  1. منجز

    الأساسات

    • مواصفة مكتوبة لست حالات للوحة المعلومات، مع توقيتاتها
    • نسختان منها بـ React وبـ TypeScript دون إطار عمل، متطابقتان بكسلًا ببكسل
    • الإنجليزية والإسبانية والعربية من اليمين إلى اليسار
    • اختبارات آلية في Chromium وFirefox وWebKit
    افتح المختبر

  2. منجز

    المقارنة جنبًا إلى جنب

    • النسختان في عرض واحد، تتحكم فيهما مجموعة واحدة من الأدوات
    • زمن البدء وحجم التنزيل، مقيسان في متصفحك أنت
    شاهدهما جنبًا إلى جنب

  3. منجز

    تقنيات مساعدة حقيقية

    • سيناريو لقارئ الشاشة محسوب من المواصفة ومفحوص في النسختين مع كل تعديل
    • جدول نتائج ونموذج مفتوحان لكل من يختبر بـ NVDA أو VoiceOver أو TalkBack
    • تأجيل مراجعة المتحدثين الأصليين: لا يتوفر مراجع بعد، والاقتراحات تبقى مفتوحة
    نفّذ سيناريو الاختبار

  4. منجزأنت هنا

    رؤية الزمن، لا الحالة فقط

    • خط زمني في المختبر يمكنك التنقل فيه: ما الذي كان على الشاشة، وما الذي سُمع، وأين كان التركيز في أي لحظة
    • تصدير أي سيناريو، أو أي إعدادات مخصصة، كاختبار Playwright جاهز؛ ويشغّل CI كل اختبار منشور
    تنقّل في طلب داخل المختبر

  5. التالي

    أحضر بياناتك

    • الصق استجابة واجهتك البرمجية وشاهد كيف تتعامل معها كل حالة
    • مكونات أكثر: النماذج والقوائم والتمرير اللانهائي

اطّلع على حالة إمكانية الوصولأكثر مساهمة مفيدة هي ملاحظاتك على المواصفة: افتح مشكلة على GitHub.