تصميم تفاعلات هادفة

اكتشف المبادئ الأساسية لتصميم التفاعل الهادف ، وما هي تحديات التصميم التي يمكن للتفاعل أن يحلها ، وكيفية إدخالها في عمليتك.

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

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

أربعة مبادئ أساسية لتصميم تفاعل هادف

1. تجنب خلق العقبات

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

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

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

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

2. تطابق الحركة مع الرسالة

إذا قررت شركة Apple أن جميع تفاعلاتها على نظام التشغيل iOS ستكون سريعة وحادة وفي وجهك وتقوم بالكثير من الأشياء الشائكة ، فهل ستشعر وكأنك تستخدم أحد منتجات Apple؟ إذا كنت تستخدم تطبيق Alton Towers وشاهدت رسومًا متحركة بطيئة التلاشي ووفرة من التحولات على غرار Ken Burns ، فهل ستشعر وكأنها مكان سحري من المرح والإثارة ، أو إعلان M&S TV؟

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

3. أعطها الغرض

يتمتع تصميم التفاعل بإمكانيات كبيرة للارتقاء بتجربة المستخدم ، وهذا هو سبب إغراء الإفراط في الاستخدام والاستخدام دون غرض. هل تتذكر مواقع فلاش؟

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

4. اجعلها غير مرئية

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

مقدار التفكير في تصميم التفاعل على التطبيقات والمواقع المستخدمة على نطاق واسع مثل Facebook و Pinterest و Twitter و Google Products غير مفهوم. ومع ذلك ، لن تلاحظ ذلك حقًا حتى يشير إليك شخص ما. إنها تجعل التصميم غير مرئي حتى تتمكن من الاستمتاع بالتجربة وبناء علاقة عاطفية أقوى مع المنتج أو الخدمة أو المحتوى.

ستة تحديات تصميم يمكن أن يحلها التصميم التفاعلي

1. التوجه والسياق

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

إليك بعض الأمثلة على إنشاء سياق باستخدام التفاعل:

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

2. توضيح السبب والنتيجة

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

3. تقديم الملاحظات

في هذا المثال ، لنأخذ زر الدفع. كم عدد بوابات التجارة الإلكترونية التي تم تنفيذها بشكل سيئ والتي جربتها حيث قمت بالنقر فوق زر "ادفع الآن" اللامع اللطيف ، فقط لكي تقابل بالارتباك حول ما إذا كنت قد نقرت عليه أم لا لأنه يعالج؟ لم تقل أن هذا ما كانت تفعله. لذلك ، يمكن للتفاعل أن يغير حالة الزر ومع قليل من الرسوم المتحركة ، يمكنه إخبار المستخدم أن "الدفع قيد المعالجة" ، ثم يخبر المستخدم عند "استلام الدفع" قبل الانتقال إلى صفحة تأكيد الطلب. لا مزيد من التساؤل عما يحدث لمدة عشر ثوانٍ والتساؤل عما إذا كنت قد كسرت الإنترنت.

4. تسليط الضوء على المعلومات الرئيسية

يمكن للرسوم المتحركة أن تعزز وتجذب الانتباه إلى المعلومات الهامة بشكل أفضل من المحتوى الثابت.

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

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

5. خلق تصور للأداء

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

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

يمكنك أيضًا استخدام أوقات التحميل كفرصة لتثقيف المستخدمين حول ما يحدث وما سيحدث من خلال الرسائل الودية التي تقضي على وقت الانتظار.

6. إضافة شخصية العلامة التجارية

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

يعد بناء اتصال عاطفي مع المستخدم طريقة رائعة للحصول على زيارات منتظمة. يمكن أن يجعل التصميم التفاعلي التكنولوجيا أكثر تركيزًا على الإنسان - وهو أمر جيد دائمًا الهدف منه.

إدخال التفاعل في عملية التصميم الخاصة بك

اسكتشات منخفضة الدقة وشركات

أدوات تصميم التفاعل

• Keynote: إذا كنت تبحث عن فكرة بسيطة وبسيطة لتوصيل فكرتك ، فإن Keynote هو الفوز السريع.
• Adobe Animate: احتفظ بكل شيء داخل Adobe وقم بالعبور بسلاسة مع الأدوات الأخرى. هذا مثالي للرسوم المتحركة التوضيحية.
• Tumult Hype: إذا كنت معتادًا على واجهة Sketch وتعرف طريقك حول المخططات الزمنية ، فستكون في المنزل تمامًا مع Tumult.
• Framer: هذه أداة تصميم تفاعلية مبنية لهذا الغرض ولديها إمكانات متقدمة حقًا لمطابقة الرسوم المتحركة الخاصة بك مع JavaScript.
• المبدأ: من خلال ارتباط Sketch الجميل ، أصبحت Principle نقطة انطلاق للتفاعل. إنه سهل التعلم نسبيًا ، وما يمكنك تحقيقه فيه رائع.
• Atomic: أضف البيانات والمنطق والمتغيرات لجعل تفاعلاتك عملية مثل البناء النهائي. هذا مخصص للمصمم المتقدم الذي لديه بعض المعرفة بالترميز.
• Invision Studio: لا تزال الأيام الأولى ، ولكن Invision Studio لديه بعض القدرات الرائعة وأوجه التشابه مع Principle. سيحدد الوقت ما إذا كان هذا سيتقدم بما يكفي للسيطرة على سوق النماذج الأولية والتعاون.

ملاحظات التسليم التفصيلية

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

قم بتجميع مكتبة من العروض التوضيحية والإلهام

أضفه إلى نظام التصميم الخاص بك

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

للمساعدة في تصميم الويب وتجربة المستخدم (UX) ، تواصل معنا اليوم.

إذا كنت بحاجة إلى مساعدة بشأن تجربة المستخدم الخاصة بك ، فلا تتردد في الاتصال بنا.