تصميم المنتجات وUI/UX

تصميم التفاعل

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

ناقش مشروعك معناناقش تفاعلات منتجك

من يأتينا بأعمال تصميم التفاعل

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

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

تفاعلات تُخبر المستخدمين بما يحدث

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

نماذج أولية بمساعدة الذكاء الاصطناعي، وحركة يحكم عليها المصممون

كيف يساعد الذكاء الاصطناعي

  • يُعِدّ جردًا بالحالات لكل مكوّن وشاشة، حتى لا تُغفَل أي حالة فارغة أو حالة تحميل أو خطأ أو نجاح.
  • يولّد صيغًا بديلة للحركة والتفاعل في النماذج الأولية، فتُقارَن التوقيتات والسلوكيات أثناء الاستخدام.
  • يصوغ مسودات شيفرة النماذج الأولية بلغة CSS أو بمكتبة Framer Motion، فتُجرَّب التفاعلات في متصفح حقيقي مبكرًا.
  • يصوغ مسودات مواصفات الحركة وملاحظات التنفيذ انطلاقًا من النماذج الأولية المعتمدة، ليراجعها المصممون.

ما يتولّاه خبراؤنا

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

حالات النموذج، من السكون إلى التعافي

خريطة حالات توضيحية لنموذج فيه زر إرسال؛ ولكل مكوّن رئيسي خريطته الخاصة.

  1. السكون

    تعرض الحقول تسميات ظاهرة ونصوصًا إرشادية؛ ولا يتحرك شيء حتى يتصرف المستخدم.

  2. المرور بالمؤشر والتركيز

    إشارة مرئية عند المرور بالمؤشر، وحلقة تركيز ظاهرة لمستخدمي لوحة المفاتيح، دون الاعتماد على اللون وحده أبدًا.

  3. الإدخال والتحقق

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

  4. التحميل

    عند الإرسال، يُظهر الزر التقدم ويتجاهل الضغطات المتكررة؛ وتُضاف رسالة حالة عند الانتظار الأطول.

    نقطة تحقق: يقيّم المصممون التوقيت على الأجهزة المستهدفة

  5. النجاح أو الخطأ

    تؤكد رسالة النجاح ما تغيّر؛ ويوضح الإرسال الفاشل السبب ويحتفظ بكل ما أدخله المستخدم.

  6. التعافي

    ينتقل التركيز إلى الرسالة، وتعلنها قارئات الشاشة، ويستطيع المستخدم إعادة المحاولة أو التعديل.

    نقطة تحقق: يتحقق مصمم من مخرجات قارئ الشاشة

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

كيف نصمم التفاعلات

  1. 01

    التدقيق

    نراجع المسارات والمكونات الحالية بحثًا عن الحالات الناقصة والاستجابات غير الواضحة والحركة التي تشتت المستخدمين أو تُبطئهم.

  2. 02

    التصميم والنماذج الأولية

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

  3. 03

    تحديد المواصفات

    إرشادات الحركة ورموزها وملاحظات التنفيذ، مع متطلبات إمكانية الوصول والأداء لكل تفاعل.

  4. 04

    البناء والتحقق

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

طريقتان للعمل بأدوات الذكاء الاصطناعي

يساعد الذكاء الاصطناعي في توليف الأبحاث المسموح باستخدامها واستكشاف التصاميم. اختر أين يُسمح له بمعالجة أبحاثك وملفاتك.

لست متأكدًا؟ سنوصي بإحداهما خلال تحديد النطاق. قارن خيارات التطوير بالذكاء الاصطناعي

ما تحصل عليه

مخرجات تصميم التفاعل

  • حالات التفاعل

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

  • التفاعلات الدقيقة

    استجابات مرئية للأزرار ومفاتيح التبديل والتحقق من النماذج والحفظ والإشعارات، ليعرف المستخدمون أن إجراءهم قد نجح.

  • الانتقالات والتنقل

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

  • تصميم الإيماءات

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

  • إرشادات الحركة

    المُدد ومنحنيات الحركة وتنسيق تسلسلها ورموز الحركة، موثقة مرة واحدة لتطبّق كل الفرق الحركة بالطريقة نفسها.

  • النماذج الأولية والتنفيذ

    نماذج أولية تفاعلية إلى جانب ملفات Lottie أو شيفرة CSS أو Framer Motion، يبنيها مهندسونا عندما يكون ذلك ضمن النطاق، أو نحدد مواصفاتها لمهندسيك.

طلبات شائعة في تصميم التفاعل

سيناريوهات نموذجية نحدد نطاقها، وليست دراسات حالة لعملاء.

  • زر دفع لا يُظهر أي استجابة

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

  • استيراد طويل خلف مؤشر تحميل دوّار

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

  • إجراءات التمرير السريع في قائمة على الجوال

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

ما لا يشمله تصميم التفاعل

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

كيف ترتبط التفاعلات بالبناء وضمان الجودة والتشغيل

  • مواصفات يستطيع المطورون البناء عليها

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

  • حالات يفحصها فريق ضمان الجودة

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

  • تصميم لحالات الإخفاق الفعلية

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

  • تحسين بعد الإطلاق

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

أسئلة وأجوبة

الأسئلة الشائعة

هل ستُبطئ الرسوم المتحركة تطبيقنا؟

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

هل يستطيع المستخدمون إيقاف الرسوم المتحركة؟

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

هل تنفّذون التفاعلات، أم تصممونها فقط؟

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

ما أدوات الرسوم المتحركة التي تستخدمونها؟

نستخدم Figma وProtoPie للنماذج الأولية، وAfter Effects مع Lottie للرسوم المتحركة المعقدة، وCSS أو Framer Motion في مشاريع الويب. وتستخدم مشاريع الجوال الأصلية أدوات الحركة الخاصة بكل منصة. وتساعد أدوات الذكاء الاصطناعي في إنتاج الصيغ البديلة وشيفرة النماذج الأولية، ويراجعها المصممون والمهندسون.

عرض كل دراسات الحالة
عرض كل المشاريع
عرض كل المقالات

صمّم تفاعلات يفهمها المستخدمون

أخبرنا بالمسارات التي تبدو غير واضحة أو غير مكتملة، وسنقترح أين يفيد تصميم التفاعل أكثر وكيف يصل إلى منتجك المبني.

ناقش مشروعك معناناقش تصميم التفاعل