الاثنين، الساعة 8:47. المدير التنفيذي يريد لوحة المبيعات بألوان الشركة، واجتماع مجلس الإدارة يبدأ الساعة 9:00. البيانات جاهزة، لكن التصميم لا. معظم تقارير Power BI لا تفشل بسبب الأرقام، بل لأن أحدًا لا يستطيع قراءتها في الثواني العشر التي يمنحها لها المدير.
هذا تقرير عملاء محتملين: الحملات، وأسباب رفض العملاء، ومصادرهم، ومن ما زال ينتظر اتصالًا. (Contoso متجر إلكترونيات وهمي، وكل الأرقام وهمية أيضًا.) كل عنصر مرئي هو العنصر الصحيح، لكن المشكلة في كل ما حوله.
ما المشكلة؟
- ألوان كثيرة جدًا. الأزرق والبرتقالي والوردي والأصفر والأخضر تتنافس، فلا يعني أي منها شيئًا.
- بلا شبكة. بطاقات بأحجام مختلفة ومسافات غير متساوية ولوحات تكاد تتحاذى، فتبدو الصفحة غير مكتملة.
- بلا ترتيب للقراءة. العنوان في المنتصف والشعار على اليسار وتبويبات الصفحات في الأسفل. العين لا تعرف من أين تبدأ.
- ألوان بلا معنى. خلايا خضراء وصفراء وحمراء كاملة تصرخ بنفس قوة الأرقام المهمة.
ما الذي غيّرناه، ولماذا ينجح؟
لم يتغير شيء في البيانات. أبقينا كل العناصر المرئية وغيّرنا خمسة قرارات تصميم فقط:
- لون واحد للعلامة التجارية مع ألوان محايدة هادئة. الكحلي للبيانات والرمادي الفاتح لما سواها. عندما يكون لون واحد فقط قويًا، يتضح أين تنظر.
- المؤشرات أولًا، في صف واحد من بطاقات متساوية. تُقرأ الصفحة من أعلى اليسار، لذا تأتي الأرقام الخمسة التي يسأل عنها المدير أولًا.
- شبكة واحدة ومسافة واحدة في كل مكان. كل لوحة تتحاذى مع ما فوقها وما بجانبها. لا أحد يلاحظ الشبكة الجيدة، لكن الجميع يلاحظ السيئة.
- عناوين تشرح. عنوان قصير وتحته عنوان فرعي يوضح ما هو الجيد، مثل "12% أو أكثر جيد".
- اللون للحالة فقط. الأخضر والأصفر والأحمر يظهرون فقط كنص على الأرقام التي تحتاج انتباهًا، مثل نسبة التأهيل وعدد أيام انتظار العميل.
نفس إعادة التصميم في ثلاث خطوات
بنينا أداة مجانية لهذا بالضبط: مولّد السمات والتخطيطات لـ Power BI. هذه هي الإعدادات وراء التقرير أعلاه:
- الألوان. اختر لونًا جاهزًا أو لون علامتك التجارية، فتتبعه السمة كلها: ثمانية ألوان للبيانات والنصوص والخلفيات والجداول، وألوان الجيد والمحايد والسيئ للحالات. ويحذرك فحص الوضوح إذا صعبت قراءة النص.
- مقاس الصفحة والتخطيط. 1920 × 1080، وتخطيط الملخص التنفيذي، وخمس بطاقات مؤشرات، وشريط فلاتر في الأعلى، وزوايا دائرية، وخط ملون فوق كل بطاقة وخط للشريط العلوي. وتتحدث المعاينة الحية مع كل نقرة.
- التنزيل. ثلاثة ملفات: السمة (JSON) وخلفية مطابقة (PNG) وجدول فيه الموضع والحجم الدقيق لكل عنصر مرئي (CSV).
داخل Power BI
- استورد السمة: View › Themes › Browse for themes.
- اضبط الخلفية: Format page › Canvas background › Image، مع Image fit على Stretch وTransparency على 0%.
- أضف كل عنصر مرئي واكتب أرقامه الأربعة من الجدول في Format › General › Properties، فيستقر تمامًا على لوحته. لا يستطيع Power BI استيراد المواضع، لذا هذه هي الخطوة اليدوية الوحيدة، وتستغرق نحو دقيقة لكل صفحة.
التفصيلة التي كلفتنا ساعات: استخدم Stretch
يوفر Power BI عدة طرق لملاءمة صورة الخلفية مثل Normal وFit وFill. مع أي خيار غير Stretch يغيّر Power BI حجم الصورة قليلًا فتنزاح اللوحات بضع بكسلات، فلا تستقر العناصر عليها تمامًا. اختبرنا ذلك على 1920 × 1080 وعلى 1280 × 720، ومع Stretch تطابقت كل اللوحات تمامًا.
التقارير العربية بنقرة واحدة
القارئ العربي يبدأ من اليمين. بنقرة واحدة يتحول التخطيط كله من اليمين إلى اليسار: تنتقل المؤشرات والفلاتر والشعار إلى الجهة التي يبدأ منها القارئ العربي، ويتبعها جدول المواضع.
نفس البيانات ونفس العناصر. الفرق أن التقرير أصبح له ترتيب للقراءة، فيجد المدير الإجابة قبل أن يبدأ الاجتماع.