هناك انقطاع خطير في صناعة البرمجيات. يعيش “المبدع” (المطور/المصمم) في فقاعة من الامتيازات التكنولوجية.

الجهاز: ماك بوك برو إم 3 ماكس (\4000 دولار).
الاتصال: ألياف بصرية (1 جيجابت في الثانية). *الشاشة: شاشة 32 بوصة بدقة 4K.
البيئة: مكتب هادئ ومكيف.

“المستهلك” (المستخدم) يعيش في الواقع.

الجهاز: Samsung Galaxy A12 عمره 3 سنوات (\200 دولار).
الاتصال: متقطع 4G في قطار متحرك.
الشاشة: شاشة 6 بوصة مكسورة بسبب وهج الشمس.
البيئة: حمل البقالة، وتشتت انتباه الأطفال.

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

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل عند تقاطع الفخامة والتكنولوجيا. لقد رأينا الكثير من العلامات التجارية تستثمر الملايين في “التحول الرقمي” فقط لتشهد نموًا ثابتًا.

نناقش هذا لأن عائد الاستثمار لهذه الاستراتيجية غالبًا ما يُساء فهمه. لا يتعلق الأمر فقط بـ “التحديث”؛ بل يتعلق بتعظيم القيمة الدائمة (LTV) لكل تفاعل رقمي.

لماذا تناقش Maison Code التعاطف؟

نحن المطورين. نحن نحب المعدات المتطورة. لكننا نجبر أنفسنا على المعاناة. لدينا “درج جهاز اختبار” مليء بأجهزة Android القديمة (Moto G وPixel 3). نرى الموقع الذي يعمل بمعدل 60 إطارًا في الثانية على iPhone 15 يعمل بمعدل 10 إطارات في الثانية على Moto G. نحن نناقش هذا لأن الأداء هو العدالة. إذا كان موقعك يعمل فقط على الهواتف باهظة الثمن، فإنك تستثني 50% من السوق. وهذا عمل سيء.

1. بروتوكول “Slow 3G”.

يجب على كل مطور في Maison Code القيام بذلك مرة واحدة في الأسبوع.

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

2. مصاص دماء البطارية (التعاطف مع الطاقة)

(راجع جمالية الوضع الداكن). يشعر المستخدمون بالقلق بشأن عمر البطارية. إنها غريزة البقاء الحديثة. إذا كان موقع الويب الخاص بك يقوم بتشغيل رسوم متحركة جافا سكريبت ثقيلة في الخلفية، فستصبح هواتفهم ساخنة. تستنزف البطارية. رد الفعل: يغلقون علامة التبويب. ومن الناحية المثالية، فإنهم يلومون موقعك. ومن الناحية الواقعية، فإنهم يشعرون أن “الإنترنت بطيء اليوم”. الإصلاح:

استخدم “IntersectionObserver” لإيقاف الرسوم المتحركة مؤقتًا عندما تكون خارج الشاشة.
لا تقم بتشغيل الفيديو تلقائيًا إلا إذا تفاعل المستخدم.
احترام “يفضل الحركة المنخفضة”.

3. فقر البيانات (تكلفة الميجابايت)

في الولايات المتحدة/الاتحاد الأوروبي، لدينا خطط بيانات غير محدودة. وفي البرازيل أو الهند أو نيجيريا، تكون البيانات باهظة الثمن. 1 جيجابايت من البيانات قد تكلف 5% من الراتب الشهري. إذا كان حجم صفحتك الرئيسية 10 ميجابايت، فأنت تكلف المستخدم أموالًا حرفيًا لمجرد أن يقول “مرحبًا”. الحساب الأخلاقي: هل هذه الصورة بحجم 4 ميجابايت تستحق التكلفة التي يتحملها المستخدم؟ إذا كان مجرد ديكور، قم بحذفه. إذا كان هو المنتج، فاضغطه (WebP/AVIF). احترم محفظة المستخدم.

4. سهولة الوصول هي التعاطف (وليس الامتثال)

تتعامل معظم الشركات مع إمكانية الوصول (A11y) كقائمة مرجعية قانونية. “هل لدينا علامات بديلة؟ نعم. لن تتم مقاضاتنا.” هذه هي العقلية الخاطئة. تتعلق إمكانية الوصول بـ الشمول.

المستخدم الكفيف: يستخدم قارئ الشاشة.
المستخدم ذو إعاقة حركية: يستخدم لوحة المفاتيح فقط (بدون ماوس).
مستخدم Colorblind: لا يمكنه التمييز بين اللون الأحمر (خطأ) والأخضر (النجاح). حالة العمل: 15% من السكان يعانون من بعض الإعاقات. إذا كان موقعك متاحًا، فستحصل على حصة سوقية أكبر بنسبة 15%. (راجع عائد استثمار إمكانية الوصول).

5. التعاطف الثقافي (التوطين)

يمتد التعاطف إلى اللغة. يمكنك ترجمة موقعك إلى الفرنسية. “اشتر الآن” -> “صيانة Acheter”. لكن هل تقوم بتحويل العملة؟ هل تظهر السعر باليورو؟ هل تحسب الواجبات؟ التوطين “الكسول”: استخدام ترجمة Google والاحتفاظ بالدولار الأمريكي. التوطين التعاطفي: “نرى أنك في فرنسا. لقد حسبنا ضريبة القيمة المضافة. السعر نهائي. نحن نشحن مع Colissimo.” وهذا يخبر المستخدم: “نحن نفهم واقعك”. (راجع التجارة بلا حدود).

6. اختبار “تشتت انتباه الوالدين” (الحمل المعرفي)

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

“إنشاء حساب” (قواعد تعقيد كلمة المرور).
“إسم الأم الأوسط”.
“استطلاع: كيف سمعت عنا؟”. لقد فقدتهم. الإصلاح: تسجيل خروج الضيف. أبل باي (معرف الوجه). تتطلب إزالة الاحتكاك التعاطف مع سياق المستخدم.

7. قلق النماذج (تصميم النموذج)

الأشكال مرهقة. “هل كتبت بريدي الإلكتروني بشكل صحيح؟” “هل سيتصلون بي؟” الأنماط المضادة:

العلامات النجمية في كل مكان: رقم الهاتف *. لماذا تحتاج هاتفي؟
التحقق القوي: “تنسيق غير صالح” باللون الأحمر قبل أن أنتهي من الكتابة. ** التصميم التعاطفي **:
الحقول الاختيارية: قم بوضع علامة على الحقول على أنها “اختيارية” بدلاً من وضع علامة على الحقول المطلوبة.
التحقق المضمن: “يبدو جيدًا!” (علامة الاختيار الخضراء).
إخفاء الإدخال: قم بتنسيق رقم الهاتف (555) 123-4567 تلقائيًا أثناء الكتابة.

8. حالة “لا توجد بيانات”.

يصمم المصممون شاشات تحتوي على “بيانات مثالية”.

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

9. نغمة رسالة الخطأ

عندما تسوء الأمور (404، 500، فشل الدفع)، كيف تتحدث مع المستخدم؟ تكنوقراط: خطأ 500: تم رفض الاتصال بقاعدة البيانات. استثناء SQL. التعاطف: عفوًا! حدث خطأ ما من جانبنا. لقد تم إخطارنا. يرجى المحاولة مرة أخرى خلال 5 دقائق. لا تلوم المستخدم مطلقًا (“إدخال غير صالح”). خذ اللوم دائمًا (“لم نتمكن من فهم ذلك”). اللغة تشكل العاطفة.

10. “الطية” ميتة (عمق التمرير)

غالبًا ما يقول العملاء: “ضع كل شيء فوق الطية!” فحص التعاطف: على الهاتف المحمول، “الطي” صغير جدًا. 30% من الشاشة عبارة عن شريط URL ومفاتيح البرامج. إذا قمت بحشر شعار Hero وعنوان وزر في 400 بكسل، فسيبدو الأمر وكأنه فوضى عارمة. ** التصميم المبني على التعاطف **: اسمح للمستخدم بالتمرير. التمرير أمر طبيعي. إنه أسهل من النقر. لا تخف من أضعاف. الخوف من الفوضى.

11. أهداف اللمس (الأصابع السمينة)

لدي إبهام سمين. متوسط مساحة لمس الإبهام هو 44 × 44 بكسل. إذا قمت بتصميم زر إغلاق صغير على شكل “X” بحجم 20 × 20 بكسل، فسوف أفتقده. سوف أقوم بالنقر على الإعلان الموجود خلفه. سوف تغضب. ** القاعدة **: الحد الأدنى لهدف اللمس = 44 بكسل (إرشادات Apple). إضافة الحشو إلى العناصر القابلة للنقر. اجعل من السهل علي أن أنجح.

12. اختبار عمى الألوان (الدولتونية)

8% من الرجال مصابون بعمى الألوان (Deuteranomaly). إذا كانت “حالة الخطأ” مجرد نص أحمر، فقد لا يرونها. إذا كان “سعر البيع” الخاص بك عبارة عن نص أحمر فقط، فقد يفوتهم ذلك. الإصلاح: استخدم الترميز الزائد. لا تستخدم اللون فقط. استخدم اللون + الأيقونة + الشكل.

الخطأ: النص الأحمر + أيقونة 🛑.
النجاح: النص الأخضر + ✅ أيقونة. وهذا يضمن حصول الجميع على الرسالة، بغض النظر عن بيولوجيتهم.

13. الخلاصة: التعاطف هو الربح

التعاطف ليس “مهارة ناعمة”. إنه “متطلب صعب” للحجم. لا يمكنك التوسع إلى مليون مستخدم إذا قمت فقط بالإنشاء لـ 1% من المستخدمين الذين لديهم أحدث إصدار من iPhone. يجب عليك البناء من أجل واقع العالم الفوضوي والبطيء والمشتت. عندما تفعل ذلك، يبدو برنامجك “قويًا”. إنه يعمل للجميع، في كل مكان. هذا هو تعريف الجودة. وفي نهاية المطاف، الجودة هي ما يدفع الإيرادات. موقع يعمل للجميع ويبيع للجميع. لا تترك المال على الطاولة بتجاهل الـ99%.

بناء الفقاعة؟

نقوم بإجراء اختبار معمل الأجهزة وتدقيق إمكانية الوصول للتأكد من أن موقعك يعمل بنسبة 99%.

تدقيق تجربة المستخدم الخاصة بي. قم بتوظيف مهندسينا.