Ultimate magazine theme for WordPress.

3 طرق لتحسين تجربة تطبيق الهاتف مع الرسوم المتحركة

3

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

هناك العديد من الأسباب لإنشاء الرسوم المتحركة – مهما كانت دقيقة أو علنية – في تطبيق جوال. يمكن:

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

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

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

كيفية تحسين تجربة تطبيقات الجوال باستخدام الرسوم المتحركة

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

توفر أدلة Telerik Kendo عروضًا توضيحية وإرشادات حول كيفية إنشاء رسوم متحركة لكل مكون من مكوناتها.

بقدر ما تقرر كيف ومتى ستستخدمها ، دعنا نلقي نظرة على بعض التطبيقات التي يبدو أنها اكتشفت كل ذلك:

النصيحة 1: اجعل علامتك التجارية تنبض بالحياة

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

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

لنلقِ نظرة على الفرق بين شاشة البداية غير المتحركة والشاشة المتحركة.

هذه هي شاشة البداية الخاصة بـ أسانا المتمردين تطبيق للياقة البدنية:

شاشة البداية الثابتة لتطبيق Asana Rebel للجوال.  يتم قطعه بسرعة إلى شاشة مقدمة التطبيق.

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

الآن ، دعنا نقارن ذلك بأحد منافسيها: آابتيف.

يبدأ تطبيق Aaptiv للجوّال بشاشة دفقة مدتها 3 ثوانٍ تحتوي على شاشة بيضاء بشعارها المتحرك والملون.

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

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

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

شاشة دفقة الرسوم المتحركة Duolingo تقدم للمستخدمين تعويذة البومة.  تبدو وكأنها صورة ثابتة حتى تومض البومة بأعينها.

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

بومة Duolingo المتحركة ترفع الأوزان لزيادة المستخدمين لتلقي درسًا أصعب.

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

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

نصيحة 2: لا تلفت الانتباه إلى انتقالات الشاشة إذا لم تكن مضطرًا إلى ذلك

عند التستر على شاشة التحميل ، من الواضح أنك تريد أن تجعل الرسوم المتحركة وقت الانتظار يبدو وكأنه لا شيء.

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

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

وفقا ل نموذج المعالج البشريمتوسط ​​زمن حركة العين 230 مللي ثانية. بينما تستجيب عيون بعض الأشخاص بسرعة أكبر من ذلك (70 مللي ثانية هي النهاية المنخفضة) ، هناك البعض الذي يستغرق وقتًا أطول بكثير لملاحظة التغيير على الصفحة (حتى 700 مللي ثانية).

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

هذا ال مطبخ شبكة الغذاء تطبيق الجوال:

يستخدم تطبيق Food Network Kitchen للجوّال رمز هامبرغر متحرك لنقل المستخدمين بين الصفحات.

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

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

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

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

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

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

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

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

النصيحة 3: جذب الانتباه إلى العناصر الإضافية القيّمة

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

عبر GIPHY

إذا كنت ستطلب من المستخدمين إيقاف ما يفعلونه مؤقتًا و “انظر هنا” ، فمن الأفضل أن يكون ذا قيمة لهم – وليس مجرد شيء تستفيد منه (أو مالك التطبيق).

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

يأخذ تلعثم، على سبيل المثال:

يستخدم Bumble مزيجًا من الإيماءات المتحركة وزرًا كذابًا لإشراك المستخدمين في تطبيق المواعدة.

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

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

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

على سبيل المثال ، هذا هو ملف اليومية لغز الكلمات المتقاطعة برنامج:

يلفت تطبيق الهاتف المحمول Daily Themed Crossword Puzzle الانتباه إلى زر تسجيل الدخول إلى Facebook مع الرسوم المتحركة.

هذه هي الشاشة التي يراها المستخدمون الجدد عند فتح التطبيق. الخيارات بسيطة:

  • تسجيل الدخول باستخدام الفيسبوك
  • تواصل كضيف

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

يمكنك أيضًا تحريك الأزرار الثانوية في تطبيقك بالطريقة أبيكوريوس يفعل:

يستخدم تطبيق الهاتف المحمول Epicurious طريقة سهلة لنقل الأزرار الثانوية لـ

عندما يدخل المستخدم إحدى صفحات الوصفة ، فإنه يرى صورة الغلاف والعنوان وبداية الوصفة. عندما يبدأون في التحرك لأسفل الصفحة ، يتم عرض ثلاثة أزرار مفيدة (لكن ثانوية) بلطف.

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

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

يتم إحتوائه

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

عند التفكير في الرسوم المتحركة لتطبيقك المحمول ، فكر حقًا في:

ما يضيفه إلى تجربة المستخدم و…

ما الذي قد يسلبه من التجربة.

إذا كانت الفوائد تفوق العيوب (مثل أوقات التحميل البطيئة ، والإدراك السلبي للعلامة التجارية ، وإهدار واجهة المستخدم ، وما إلى ذلك) ، فجرّب ذلك!

Source link

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.