Microinteractions: تصميم مع التفاصيل
"إن أفضل المنتجات تفعل شيئين جيدًا: الميزات والتفاصيل. الميزات هي التي تجذب الأشخاص إلى منتجك ؛ التفاصيل هي ما يبقيهم هناك ”يقول دان سفير. لا يمكن التأكيد على أهمية التفاصيل. التفاصيل تجعل المستخدمين يحبون أو يكرهون تطبيق أو موقع ويب. Microinteractions هي تلك التفاصيل. قد يتم التغاضي عنها بسهولة في مخطط التصميم العالمي ، لكنها تحتفظ بالتجربة بأكملها معًا.
في هذا المقال ، سأشرح ما هو التداخل الدقيق ، ولماذا هي مهمة وتقدم بعض الأمثلة الرائعة.
ما هو Microinteraction
Microinteractions هي لحظات خفية تتمحور حول إنجاز مهمة واحدة. تقريبا جميع التطبيقات من حولنا تملأ مع microinteractions.
لقد كان المثال الأكثر شهرة على مبدأ التثبيط الدقيق موجودًا قبل فترة طويلة من اختراع أجهزة الكمبيوتر. غالبًا ما يكون مفتاح التشغيل / الإيقاف أول الأشخاص الذين يلتقون مع المنتج.
تتضمن بعض الأمثلة الأخرى الخاصة بالميزنات الصغيرة المحددة ما يلي:
- يتم عرض إشعار الاهتزاز مع رمز الوضع الصامت عند تبديل جهاز iPhone إلى وضع كتم الصوت.
- نمط واجهة مستخدم السحب إلى التحديث. من خلال ربط رغبة المستخدم في العثور على مزيد من المحتوى مع نشاط التحديث ، تصبح التجربة أكثر سلاسة.
رصيد الصورة: Ramotion
- زر "الإعجاب" على الشبكات الاجتماعية والذي يبرز التغييرات باستخدام الرسوم المتحركة التفاعلية. تُعلم هذه التعليقات المستخدمين أنهم مدرجون في قائمة أولئك الذين أعجبوا بالبريد.
رصيد الصورة: Dribbble
لماذا يعملون
باختصار ، تعمل ميزة microinteractions على تحسين تجربة المستخدم من خلال جعل واجهة المستخدم أقل آلية وأكثر إنسانية. في كثير من الأحيان نفكر في الشكل والمظهر وكيف يرتبط بالتصميم. عندما نفكر في التآثرات الصغرى ، فإنها تقارب التوازن بين كيفية شعور المستخدمين بالمنتج أو الخدمة أو العلامة التجارية. Microinteractions صقل التصميم الذي يركز على الإنسان من خلال:
- توفير ردود فعل فورية - نداء الملاحظات المرئية إلى رغبة المستخدم الطبيعية للاعتراف. ويعرف المستخدم على الفور أنه تم قبول إجراءاتهم ، وأنهم يريدون أن يشعروا بالسعادة من خلال مكافأة بصرية.
- العمل كوسيط للتفاعل - لدى Microinteractions القدرة على تشجيع المستخدمين على التفاعل الفعلي. يمكنهم توجيه المستخدمين في كيفية العمل مع التطبيق.
- جلب البهجة - Microinteractions هي فرصة مثالية لفرحة إضافية صغيرة في التصميم دون الانتقاص من التجربة الرئيسية.
فوائد إضافية
نظرًا لكون المنظور المجهري موجزًا بطبيعته ، فيجب تصميمه للاستخدام المتكرر. يمكن للمؤسسات الصغرى المصممة جيدًا إنشاء:
حلقة العادة
Microinteractions هي المكونات الرئيسية لحلقات العادة. تتشكل العادات عندما يقوم الناس بأداء نفس الإجراءات مرارا وتكرارا. حلقة العادة النموذجية تتكون من ثلاثة عناصر:
- Cue - Trigger الذي يبدأ العمل
- روتين - رداً على الإشارة ، فإنك تقوم بإجراء ما
- مكافأة - فائدة تحصل عليها من إكمال الروتين ، سبب إكمال الإجراء
كلما كانت المكافأة أقوى كلما ازدادت العادة.
يُعد إخطار Facebook حول طلب صداقة جديد مثالًا جيدًا على حلقة العادة: تشير الشارة الحمراء والرمز المبيّن ( cue ) إلى وجود طلب جديد ، مما يجعل المستخدم ينقر على الرمز ( الروتين ) لمشاهدة معلومات حول الشخص ( المكافأة ). بعد فترة ، ينقر المستخدمون تلقائيًا على الرمز عندما يشاهدون الشارة الحمراء.
لحظات التوقيع
إذا تم إنجازها بشكل جيد ، يمكن أن تكون المكاسب المتناهية الصغر هي اللحظات المميزة التي تزيد من ولاء العملاء. اللحظات المميزة هي عبارة عن عدد صغير من المكاسب التي تم رفعها لتكون جزءًا من العلامة التجارية. فكر في زر "أعجبني" في Facebook. يصبح جزء طبيعي من واجهة الفيسبوك. إذا أزال Facebook هذه الميزة فجأة ، فسيلاحظها المستخدمون وسيعتقدون أن التطبيق معطل.
تحديد الفرص
جزء من جمال المنبهات الصغيرة هو أنه يمكن إدراجها في مجموعة متنوعة من الأماكن ، حول أي إجراء محتمل. الصغرى هي جيدة ل:
تسليط الضوء على التغييرات
يمكن أن يوجه Microinteractions انتباه المستخدم . في كثير من الحالات ، يتم استخدام الرسوم المتحركة لجذب انتباه المستخدم إلى التفاصيل المهمة (مثل الإشعارات).
ائتمانات الصورة: Dribbble
التقليل من جهد المستخدم
الإكمال التلقائي هو مثال رائع على التثقيف الدقيق. الكتابة لها تكلفة تفاعل عالية ؛ انها عرضة للخطأ والوقت المستهلك حتى مع لوحة مفاتيح كاملة (وأكثر من ذلك على شاشة تعمل باللمس). يساعد الإكمال التلقائي المستخدم على توفير الإجابة الصحيحة بشكل أسرع وبدون أخطاء مطبعية. أثناء كتابة كل حرف ، سيقدم النظام أفضل التخمينات بالنسبة للكلمات التي تحاول البحث عنها.
ائتمانات الصورة: fancy.surge.sh
تقديم ملاحظات لإظهار ما تم إنجازه
يمكن لـ Microinteractions تعزيز الإجراءات التي يقوم بها المستخدم. من خلال اتباع مبدأ " show، don't tell" ، يمكنك استخدام التعليقات المتحركة لعرض ما تم إنجازه. في سبيل Stripe ، عندما يقوم المستخدم بالنقر فوق "دفع" ، يظهر زر تدور لفترة وجيزة قبل أن يظهر التطبيق حالة النجاح. تشعِر ميزة Checkmark animation أن المستخدمين يشعرون بسهولة بسداد الدفعة وأن المستخدمين يقدرون هذه التفاصيل المهمة.
تقديم معلومات الحالة
ينص مبدأ جاكوب نيلسن على مبدأ الاستخدام الاستدلالي الأول: يجب على النظام دائمًا إبقاء المستخدمين على علم بما يحدث. يعد مؤشر الكتابة في الدردشة مثالًا رائعًا على التآثرات المصغرة التي توفر معلومات الحالة. يظهر على شاشة رفيقك أثناء إنشاء رسالة في الدردشة.
ائتمانات الصورة: Dribbble
التحقق من صحة بيانات المستخدم
أحد الأجزاء الأكثر أهمية والتي غالباً ما يتم تجاهلها من تصميم النموذج هو معالجة الأخطاء . من الطبيعي أن تخطئ الطبيعة البشرية ، وربما لا يعفي النموذج الخاص بك من الخطأ البشري. لا يعجب المستخدمين عندما يمرون بعملية ملء نموذج فقط لمعرفة عند الإرسال ، بأنهم قد ارتكبوا خطأ. هذا هو المكان الذي يلعب فيه التحقق الصغري من الصحة جزءًا منه في شكل سهل الاستخدام. يعمل التحقق من صحة المحتوى في الوقت الفعلي على إبلاغ المستخدمين فورًا عن صحة البيانات المقدمة. يتيح هذا الأسلوب للمستخدمين تصحيح الأخطاء التي يقومون بها بشكل أسرع دون الحاجة إلى الانتظار حتى يقوموا بالضغط على زر "إرسال" للاطلاع على الأخطاء. عندما يتم ذلك بشكل صحيح ، يمكنه تحويل تفاعل غامض إلى تفاعل واضح.
استنتاج
التصميم في التفاصيل. حتى التفاصيل البسيطة تستحق اهتمامًا وثيقًا ، لأن كل هذه اللحظات الصغيرة تشكل الإحساس ، فهي تأتي معًا لتشكل منتجًا شموليًا جميلاً.
"إن الفرق بين المنتجات التي نحبها وتلك التي نتسامح معها هي في الغالب المزائج المتناهية التي نملكها." - Dan Saffer
إذا كنت تهتم بتجربة المستخدم ، فيجب أن تهتم بالميزات الصغيرة. نظرًا لأن المنتج الخاص بك لا يصل إلا إلى أقل قدر ممكن من التميُّز microinteraction الذي يمتلكه الأشخاص معه.