الحياة في الحركة: دليل لتحريك تصورات بيانات الجوال

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

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

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

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

فوائد الرسوم المتحركة لتصورات البيانات المتنقلة

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

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

تشير الأبحاث إلى أن تحريك الرسوم البيانية الثابتة يمكن أن يحسن الإدراك الرسومي ويزيد من اهتمام المشاهد. بدلاً من عرض الرسم البياني دفعة واحدة ، على سبيل المثال ، يمكن أن تدخل العناصر بسرعات متفاوتة حتى لا تربك المشاهد بمعلومات كثيرة جدًا. تقول Tetiana Donska ، مصممة UI / UX في شبكة Toptal ومقرها لندن: "تساعد الحركات على إظهار أو تحسين التسلسل الهرمي المرئي للعناصر ، أو اتجاه المحاور وكيفية عرض البيانات".

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

يمكن أن يؤدي دمج التحديثات في الوقت الفعلي في تصورات البيانات المتحركة إلى جعلها أكثر جاذبية للمستخدمين. يقول Olajide Akinpelu ، مصمم Toptal UI / UX ومقره نيجيريا ، إن رؤية تحديث البيانات أمام أعيننا يساعد على الإدراك البشري. سيواجه المستخدم الذي يقوم بتحديث البيانات الثابتة صعوبة أكبر في اكتشاف التغييرات ؛ تساعدهم الحركة في الوقت الفعلي على تحديد الأفكار التي قد يفوتونها بخلاف ذلك.

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

تقنيات الرسوم المتحركة وتصور البيانات للجوال

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

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

تغيير القيمة

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

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

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

التخفيف والإزاحة والتأخير

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

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

الأبوة والأمومة

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

الأبوة والأمومة طريقة فعالة لزيادة التفاعل وإنشاء التسلسل الهرمي.

تكبير

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

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

مزالق تصميم الحركة يجب تجنبها

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

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

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

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

يضيف Estabrook: "بالنسبة لجميع التصور المرئي للبيانات ، عليك أن تسأل ، ما هي المعلومات التي تقدمها للمستخدم حتى يتمكن من اتخاذ القرار التالي ... الضغط على زر أو كتابة رسالة بريد إلكتروني أو التعمق أكثر. ماذا عليك أن تفعل لتقديم تلك [المعلومات] لهم؟ "

يمكنك تصميم تصورات مركزة وفعالة لبيانات الجوال من خلال تجنب هذه المزالق:

مرئيات كثيفة الاستخدام للموارد لا تضيف قيمة كبيرة

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

الرسوم المتحركة البراقة أو الزائدة عن الحاجة

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

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

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

أسلوب غير متناسق

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

وفقًا لـ Akinpelu ، مصمم UX / UI في نيجيريا ، فإن الحفاظ على الاتساق الأسلوبي "في نوع الانتقال الذي تستخدمه ، ونوع الرسوم المتحركة ، ومزيج الألوان" يساعد المستخدمين على التنقل في مجموعات البيانات.

مواكبة الزيادة في البيانات

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

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

مزيد من القراءة على مدونة Toptal Design

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