لماذا يكون للرسوم أثر أكبر من الكلمات؟

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

ما يحدث قبل القراءة

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

ثلاثة تأثيرات موثّقة جيّداً

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

كيف تبيع الرسوم عملياً

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

استعمال العناصر البصرية دون إثقال الموقع

1. فضّل صيغة SVG للأيقونات والرسوم التخطيطية والشعارات؛ فهي حادّة في كلّ الأحجام ولا تتجاوز بضعة كيلوبايتات.
2. خصّص التصوير الفوتوغرافي للأشياء الحقيقية (المنتجات والفريق وورشات العمل) وامنع الرسوم الجاهزة القابلة للتبديل.
3. حدّد أبعاد الصور في CSS دائماً لتفادي اهتزاز المحتوى أثناء التحميل.
4. صِف كلّ عنصر بصري يحمل معلومة في نصّه البديل؛ فما تراه العين يجب أن يوجد أيضاً لقارئ الشاشة ولجوجل.
5. حافظ على وحدة المعالجة (اللوحة اللونية نفسها وأسلوب الاقتصاص نفسه والحبيبات نفسها) في كلّ الصفحات.

ليس للرسوم أثر أكبر لأنّها أجمل بل لأنّها تصل أبكر. فهي تحتلّ المساحة التي لا يبلغها النصّ: الثواني الثلاث الأولى التي يقرّر فيها الزائر إن كان سيبقى.