اجعل عنوان الرسم ونطاقه ووحدة القياس والخلاصة الضرورية واضحة قبل ظهور أي تلميح. يمكن لتلميحات الإنفوجرافيك التفاعلي أن تكشف تفاصيل مرتبطة بنقطة أو عمود، لكن لا ينبغي أن تتحول إلى المكان الوحيد الذي يفهم منه القارئ ما الذي تقارنه. ابدأ مراجعتك بإخفائها ذهنيًا: هل ما زال الرسم يجيب عن سؤاله الرئيسي؟ إذا اختفى المعنى كله، فأعد توزيع المعلومات قبل إضافة حركة أو تحسين شكل النافذة.
الفكرة العملية هي فصل ما يحتاجه الجميع لفهم الرسم عما يظهر عند طلب تفصيل. ثم تحدد كيف يصل القارئ إلى ذلك التفصيل بالوسائل التي تدعمها الواجهة فعلًا. ولا يكفي أن تعمل النافذة في عرض المصمم باستخدام الفأرة؛ المطلوب وصف سلوكها، وتنفيذه، وفحص الحالات المقصودة. الخطوات التالية مقترحات مراجعة.
ابدأ بعقد واضح للمعلومة
لنفترض إنفوجرافيك افتراضيًا يقارن زمن تجهيز الطلبات في ثلاثة فروع خلال شهر محدد. قبل رسم الأعمدة، اكتب ما الذي تقيسه البيانات: الزمن بالدقائق، ومعنى القيمة المعروضة، والفترة التي تخصها. لا تترك هذه المعلومات لتظهر عند الوقوف فوق عمود بعينه. وإذا كانت القيم تقديرية أو مستندة إلى عينة، فاحتفظ بوصف مناسب لهذا الحد في المحتوى المصاحب، بدل أن يبدو الرسم أوسع مما تسمح به بياناته.
في ملف العمل، ضع ثلاثة أعمدة لتنظيم النص: معلومة ثابتة، وتفصيل عند الطلب، وملاحظة مصدر. قد يكون اسم الفرع والقيمة الأساسية ضمن العرض الثابت، بينما تتضمن النافذة عدد الطلبات المرتبطة بالقيمة إذا كان متاحًا ومفيدًا. هذا توزيع افتراضي يمكن تغييره بحسب كثافة الرسم وسؤاله، لكنه يجبر الفريق على مناقشة سبب إخفاء كل معلومة، بدل وضع كل النصوص في النافذة لأن مساحتها تبدو مريحة.
اكتب التلميح كجزء مكمل للرسم
ابدأ النص باسم العنصر المقصود، ثم أظهر القيمة بوحدتها، ثم أضف التفصيل الذي يفسرها عند الحاجة. في مثالنا الافتراضي لا تكفي عبارة «الفرع الثاني: 12» إذا كانت الوحدة غير ظاهرة أو كان الرقم يحتمل أكثر من معنى. استخدم بيانات مصطنعة ومعلنة أثناء تصميم التجربة، ثم استبدلها ببيانات معتمدة قبل التسليم. ولا تنقل عددًا من جدول آخر إلى النافذة اعتمادًا على تشابه ترتيب الصفوف فقط.
خصص موضعًا للبيانات الناقصة إن كان هذا واردًا في المصدر. إذا لم تسجل قيمة لأحد الفروع، فلا تعرض صفرًا لمجرد أن المكوّن يحتاج رقمًا. اكتب في مواصفات المحتوى ماذا تعني حالة عدم التوفر، وكيف تختلف عن الصفر وعن انتظار التحديث. وبعد أي ترتيب جديد للأعمدة، راجع ارتباط التلميح بالعنصر نفسه، حتى لا تبقى النافذة تعرض اسم فرع آخر بسبب فهرسة قديمة.
حدّد سلوك النافذة قبل تسليم الرسم
تتناول إرشادات W3C للمحتوى الذي يظهر عند التحويم أو التركيز شروط إمكان إخفائه، والانتقال بالمؤشر إليه، واستمرار ظهوره أثناء الحاجة إليه، مع استثناءات وتفاصيل في المعيار. المقصود ألا تعرقل نافذة مؤقتة القراءة أو تختفي أثناء محاولة الوصول إلى محتواها. اكتب السلوك المطلوب بجوار التصميم؛ صورة ثابتة لنافذة مفتوحة لا توضح وحدها كيف ظهرت أو كيف ستغلق.
في مثال الفروع، ضع حالات مراجعة محددة: الانتقال من العمود إلى النافذة، والتحرك إلى العمود المجاور، ومحاولة قراءة الطرف الأخير من النص، وإغلاق التلميح إذا حجب معلومة. سجّل السلوك المتوقع في كل حالة قبل فحصه. فإذا لم ينفذ المكوّن بعد، سمّ القائمة «متطلبات»؛ ولا تضع علامة نجاح عليها بناء على لقطة توضيحية أو وعد من قالب جاهز لم تستخدمه.
راجع الوصول بلوحة المفاتيح
لا تجعل المرور بالمؤشر هو الوسيلة الوحيدة لاستدعاء المعلومة. تتضمن إرشادات W3C التنبيه إلى إتاحة المحتوى الذي يظهر بالتحويم عند التركيز بلوحة المفاتيح أيضًا. ويرسم دليل أنماط ARIA للتلميحات علاقة بين العنصر المشغّل والوصف، مع بقاء التركيز على المشغّل وإمكان الإغلاق بمفتاح الهروب. هذه نقاط لفهم السلوك؛ لا تكفي إضافة اسم نمط إلى التصميم لإثبات صحة تنفيذه أو إتاحته.
راجع في خطة الاختبار كيف تعرف أي فرع وصل إليه التركيز، وما إذا كانت التفاصيل تخصه، وأين ينتقل التركيز بعد ذلك. إذا كان لديك عدد كبير من النقاط، فتجنب افتراض أن جعلها كلها محطات متتابعة هو أفضل حل دون تجربة؛ ناقش طريقة الوصول المناسبة للبيانات مع من ينفذ المكوّن. ولا تسجل نجاح قارئ شاشة اعتمادًا على نجاح لوحة المفاتيح وحدها؛ فهما جانبان يحتاج كل منهما فحصًا يناسبه.
خطّط للمس بدل تقليد الفأرة
اكتب سيناريو واضحًا للعرض على الهاتف: ما الذي يحدث عند اختيار عمود، وكيف يغلق القارئ التفاصيل أو ينتقل إلى غيرها؟ هذه قرارات تنفيذ مقترحة يلزم تجربتها في المكوّن المختار. لا تستخدم عبارة «يدعم الهاتف» في مواصفات التسليم دون وصف ما جرى التحقق منه. فقد يكون حجم الرسم مناسبًا للشاشة، بينما تبقى التفاصيل معتمدة على تحويم لا توفره طريقة الاستخدام نفسها.
في مثالنا يمكن اقتراح منطقة تفاصيل ثابتة أسفل الرسم تعرض الفرع المحدد، مع جدول بيانات مصاحب يوفر طريقًا آخر للمعلومات. قبل اعتماد الفكرة، قارنها بالسؤال الأصلي: هل يجد القارئ قيمة الفرع بسرعة، وهل يعرف أي اختيار تتبعه التفاصيل؟ لا تضف منطقة جديدة لمجرد ملء الفراغ، ولا تخفِ الجدول بعيدًا ثم تفترض أنه حل كل عقبة في الرسم التفاعلي.
اختبر الحالات التي تتسبب في فقد المعنى
جهز بيانات تجريبية تشمل اسم فرع طويلًا، وقيمة غير متاحة، وتقاربًا بين عمودين، ونصًا أطول داخل التلميح. قارِنها بالبيانات الحقيقية المتوقعة قبل اعتبارها قائمة كافية. راجع أيضًا ما يحدث عند تكبير المحتوى أو وضع العنصر قرب طرف الشاشة؛ إذا قُطع النص، فسجل الحالة والنسخة وطريقة الوصول المستخدمة. وصف المشكلة بدقة يساعد على إصلاحها أكثر من ملاحظة عامة تقول إن النافذة تحتاج تنسيقًا.
وتحقق من بقاء معنى المقارنة في نسخة ثابتة إذا كان من المتوقع استخدامها في تقرير أو صورة مشاركة. هذه النسخة تحتاج تحريرًا خاصًا لما سيظهر فيها، لأن نافذة مؤقتة في صفحة تفاعلية لن تفتح داخل صورة. حدد المعلومات التي ينبغي إضافتها إلى النسخة الثابتة بدل التقاط الشاشة في حالة عشوائية. وإذا لم تُطلب نسخة كهذه، سجلها خارج نطاق التسليم دون الادعاء أنها جاهزة.
سلّم السلوك والحدود مع الشكل
اجمع في تسليم العمل نصوص العنوان والوحدات وملاحظات المصدر، ومحتوى التلميحات، وحالات الفتح والإغلاق، وقائمة الفحوص المنفذة. اكتب بجوار كل فحص ما شاهدته فعلًا، واترك الحالة غير المنفذة ظاهرة. وفي المثال الافتراضي لا يجوز تحويل مخطط المراجعة السابق إلى نتيجة تقول إن المستخدمين فهموا الرسم؛ فلا توجد هنا جلسات أو بيانات مشاهدة تسند ذلك.
تنتهي المراجعة المفيدة حين يعرف الفريق ما الذي يجب أن يظل واضحًا طوال الوقت، وما الذي يظهر عند طلب التفصيل، وكيف يتحقق من ذلك. عندئذ تضيف التلميحات قيمة إلى إنفوجرافيك مفهوم أصلًا، ويصبح من السهل مناقشة كل نافذة بوصفها جزءًا من قراءة البيانات، بدل الاكتفاء بانطباع أن الرسم صار تفاعليًا لأنه يستجيب لحركة الفأرة.
الخلاصة في سطر: ضع العنوان والقيم والوحدات الأساسية في الرسم الثابت، واترك للتلميح التفاصيل، وتأكد أنه يعمل باللمس ولوحة المفاتيح.
المصادر وروابط التحقق
تفضّل المشاهدة على القراءة؟
نفس الأفكار بشرح سريع في فيديوهات قصيرة على مصفوفة النجاح — يوتيوب، تيك توك، وتليجرام.
