جلب التفاعل التفاعلي والرسوم المتحركة واجهة المستخدم إلى الحياة من خلال التعاون بين المطور والمصممين

يمكننا إنشاء تجربة مبهجة للمستخدمين من خلال التفاعل الجزئي ورسوم واجهة المستخدم!

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

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

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

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

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

ما هم؟ لماذا هو جيد لتجربة المستخدم؟ لماذا يجب على المصممين والمطورين دمجهم في عملهم؟ كيف يمكن لفرق تصميم المنتج العمل معًا لتحسينها؟

ما هي التفاعلات الصغرى ولماذا نهتم بها؟

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

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

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

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

على الرغم من أن هذه "الإجراءات" تتخذ عدة أشكال مختلفة ، إلا أن بعض الأمثلة الشائعة تشمل:

  • عندما ننتقل "عنصر" إلى عربة التسوق الافتراضية.
  • عندما نختار بين خيارين على زر تبديل يشبه CTA.
  • عندما "نسحب" لتحديث موجز الأخبار ومشاهدة آخر التحديثات.
  • عندما "ننتقل لأعلى ولأسفل" في تغذية طويلة أو صفحة.

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

مبادئ التفاعلات الصغرى

هناك ثلاثة مبادئ أراها دائمًا عند تصميم التفاعلات الصغيرة.

  1. الاستمرارية (والبراعة)

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

2. القدرة على التنبؤ

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

3. التحويلية

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

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

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

كيف يمكن للمطورين والمصممين العمل معًا لتحقيق التفاعلات الصغيرة في الحياة

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

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

أولاً ، دعنا ننتقل إلى وصف سريع لعملية التصميم ...

في وضع مثالي ، عندما يأتي المصمم بفكرة للتفاعل الجزئي ، يستمر سير العمل التقليدي بالترتيب التالي:

  1. يطور المصمم العناصر المرئية وتأثيرات الرسوم المتحركة الضرورية لتحقيق فكرته.
  2. يقدم المصمم النموذج النهائي ومفاهيمه الأساسية لأعضاء الفريق الآخرين.

ولكن ماذا لو لم تتم عملية التصميم من الناحية العملية كما تفعل نظريًا؟ ماذا لو كنا نعرض لوحة القصة أو نموذج غير مكتمل؟ أو أي شخص آخر في الفريق هو تصميم النموذج؟

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

  1. لا يتم توصيل فكرة الرسوم المتحركة بوضوح كاف.

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

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

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

3. المصمم والمطور ليسا على نفس الصفحة

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

ما هي بعض الحلول لهذه القضايا؟

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

الآن ، لم نعد نناقش ما إذا كانت ستضم التفاعلات المصغرة أم لا ، نحن نبحث عن طرق لجعلها أفضل!

دليل التفاعل بين الهيكل العظمي ودليل التفاعل

"إن مفهوم التفاعل والهيكل العظمي ودليل التفاعل لا يترك مجالاً للتفسير الذي يمكّنني من بدء العمل على الفور والثقة في مطابقة رؤية المصمم." - Jesse M Majcher / Lead Lead IOS engineer

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

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

  1. مفهوم التفاعل بين الهيكل العظمي (دراسة الحركة)

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

2. دليل التفاعل

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

3. مهارات النماذج الأولية للمصممين

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

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

إذا كنت معتادًا على الترميز:

  • الجوال: Xcode ، استوديو أندرويد
  • الجوال أو الويب: Framer
  • الويب: CSS animation

إذا كنت ترغب في تصميم تفاعل بين دفعة شبيهة بالشاشة ووحدة نمطية:

  • إنفيس وماربيل

إذا كنت ترغب في إنشاء تفاعلات أكثر تفصيلاً:

  • مبدأ ، Adobe CC ، اوريغامي ستوديو و Pixate

إذا كنت تريد إنشاء تفاعلات مفصلة + رسوم متحركة:

  • بعد المؤثرات

حاليًا ، أنا معجب باستخدام After Effect لنماذجي الأولية. حتى لو لم تكن تفاعلية (أي قابلة للنقر) ، فهي الطريقة المثلى لتقديم مفهوم الرسوم المتحركة. أيضا ، ليس هناك قيود على التأثير وأنت قادر على التحكم في حركة التفاصيل. من الممكن حتى استخدامه لإجراء تفاعل في الفضاء ثلاثي الأبعاد ، مثل AR و VR.

تفاعلات فريق مبهجة تجعل من أجل منتجات مبهجة

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

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

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

لمزيد من المعلومات حول واجهات برمجة التطبيقات (APIs) ، والأحداث المفتوحة المصدر ، وأحداث المجتمع ، وثقافة المطورين في Capital One ، تفضل بزيارة DevExchange ، بوابة مطور البرامج الشاملة لدينا: developer.capitalone.com.