ربما كنت هناك من قبل. كيف نختار بين عرض نموذج للمستخدمين، ومتى ننتقل بهم إلى صفحة جديدة منفصلة؟ وهل يهم على الإطلاق؟ في الواقع، هو كذلك. ويؤثر القرار على تدفق المستخدمين، وسياقهم، وقدرتهم على البحث عن التفاصيل، ومعها تكرار الأخطاء وإكمال المهام. كلا الخيارين يمكن أن يكونا مزعجين ومحبطين – في الوقت الخطأ، وفي المكان الخطأ. لذلك من الأفضل أن نقوم بالأمر بشكل صحيح. حسنًا، دعونا نرى كيف نفعل ذلك. الوسائط مقابل مربعات الحوار مقابل التراكبات مقابل العرض المبسط بينما نتحدث غالبًا عن مكون واجهة مستخدم مشروط واحد، غالبًا ما نتجاهل الفروق الدقيقة الدقيقة بين جميع أنواع الوسائط المختلفة. في الواقع، ليست كل الوسائط هي نفسها. الوسائط، ومربعات الحوار، والتراكبات، والصناديق المبسطة - كلها تبدو متشابهة، ولكنها في الواقع مختلفة تمامًا:
Dialog مصطلح عام لـ "المحادثة" (المستخدم ↔ النظام). Overlayلوحة محتوى صغيرة يتم عرضها أعلى الصفحة. يجب أن يتفاعل ModalUser مع تعطيل التراكب + الخلفية. يجب أن يتفاعل NonmodalUser مع تمكين التراكب + الخلفية. LightboxDimmed الخلفية لتركيز الانتباه على الوسائط.
وكما أوضحت Anna Kaley، فإن معظم التراكبات تظهر في الوقت الخطأ، وتقاطع المستخدمين أثناء المهام الحرجة، وتستخدم لغة سيئة، وتقطع تدفق المستخدمين. فهي متقطعة بطبيعتها، وعادةً ما تكون بمستوى عالٍ من الخطورة دون حاجة قوية لذلك.
من المؤكد أنه يجب إبطاء المستخدمين ومقاطعتهم إذا كان لعواقب أفعالهم تأثير كبير، ولكن بالنسبة لمعظم السيناريوهات غير المشروطة، فهي أكثر دقة وخيار أكثر ودية لجذب انتباه المستخدم. إذا كان هناك أي شيء، فأنا أقترح دائمًا أن يكون افتراضيًا. الوسائط → للمهام الفردية المستقلة كمصممين، غالبًا ما نرفض الوسائط باعتبارها غير ذات صلة ومزعجة - وغالبًا ما تكون كذلك! - ومع ذلك فإن لها قيمتها أيضًا. يمكن أن تكون مفيدة جدًا لتحذير المستخدمين بشأن الأخطاء المحتملة أو مساعدتهم على تجنب فقدان البيانات. يمكنهم أيضًا المساعدة في تنفيذ الإجراءات ذات الصلة أو التعمق في التفاصيل دون مقاطعة الحالة الحالية للصفحة. لكن الميزة الأكبر للنماذج المشروطة هي أنها تساعد المستخدمين في الحفاظ على سياق الشاشة الحالية. لا يعني ذلك واجهة المستخدم فقط، بل يعني أيضًا الإدخال المُحرر، وموضع التمرير، وحالة الأكورديون، واختيار المرشحات، والفرز، وما إلى ذلك.
في بعض الأحيان، يحتاج المستخدمون إلى تأكيد التحديد بسرعة (على سبيل المثال، المرشحات كما هو موضح أعلاه) ثم المتابعة فورًا من هناك. وبطبيعة الحال، يمكن أن يحقق الحفظ التلقائي نفس الشيء، ولكنه ليس مطلوبًا أو مرغوبًا فيه دائمًا. وغالبًا ما لا يكون حظر واجهة المستخدم فكرة جيدة. ومع ذلك، لا يتم استخدام الوسائط لأية مهام. عادةً، نستخدمها لمهام فردية قائمة بذاتها حيث يجب على المستخدمين المشاركة وإكمال المهمة ثم العودة إلى حيث كانوا. ومن غير المستغرب أنها تعمل بشكل جيد مع التفاعلات القصيرة ذات الأولوية العالية (مثل التنبيهات والإجراءات التدميرية والتأكيدات السريعة). عندما تساعد الوسائط: 🚫 غالبًا ما تكون الوسائط مزعجة وغزوية ومربكة. 🚫 فهي تجعل من الصعب المقارنة والنسخ واللصق. ✅ ومع ذلك، تسمح الوسائط المشروطة للمستخدمين بالحفاظ على سياقات متعددة. ✅ مفيدة لمنع الأخطاء التي لا رجعة فيها وفقدان البيانات. ✅ مفيدة إذا كان إرسال المستخدمين إلى صفحة جديدة قد يكون مزعجًا. ✅ أظهر شكلاً فقط إذا كان المستخدمون سيقدرون التعطيل. ✅ افتراضيًا، تفضل مربعات الحوار غير المحظورة ("nonmodals"). ✅ اسمح للمستخدمين بتصغير مربع الحوار أو إخفائه أو استعادته لاحقًا. ✅ استخدم شكلاً لإبطاء المستخدمين، على سبيل المثال، التحقق من الإدخال المعقد. ✅ أعط مخرجًا باستخدام "إغلاق"، أو مفتاح ESC، أو انقر خارج الصندوق. الصفحات → لسير العمل المعقد ومتعدد الخطوات لا تعمل المعالجات أو التنقل المبوب ضمن الوسائط بشكل جيد، حتى في منتجات المؤسسات المعقدة - حيث تعمل اللوحات الجانبية أو الأدراج عادةً بشكل أفضل. تبدأ المشاكل عندما يحتاج المستخدمون إلى مقارنة نقاط البيانات أو الإشارة إليها - إلا أن النماذج المشروطة تحظر هذا السلوك، لذلك يعيدون فتح الصفحة نفسها في علامات تبويب متعددة بدلاً من ذلك.
بالنسبة للتدفقات الأكثر تعقيدًا والعمليات متعددة الخطوات، تعمل الصفحات المستقلة بشكل أفضل. تعمل الصفحات أيضًا بشكل أفضل عندما تتطلب الاهتمام الكامل للمستخدم، والرجوع إلى الشاشة السابقة ليس مفيدًا جدًا. وتعمل الأدراج على تنفيذ المهام الفرعية التي تكون معقدة جدًا بالنسبة لنموذج بسيط، ولكنها لا تحتاج إلى التنقل بالكامل في الصفحة. متى يجب تجنب الوسائط: 🚫 تجنب الوسائط لرسائل الخطأ. 🚫 تجنب الوسائط لإشعارات الميزات. 🚫 تجنب الوسائط لتجربة الإعداد. 🚫 تجنب الوسائط للمهام المعقدة والطويلة ومتعددة الخطوات. 🚫 تجنب الوسائط المتداخلة المتعددة واستخدم السابق/التالي بدلاً من ذلك. 🚫 تجنب الوسائط التي يتم تشغيلها تلقائيًا ما لم يكن ذلك ضروريًا للغاية. تجنب كليهماللمهام المتكررة في العديد من المنتجات المعقدة والمثقلة بالمهام، سيجد المستخدمون أنفسهم يؤدون نفس المهام بشكل متكرر، مرارًا وتكرارًا. هناك، تضيف كل من الوسائط والتنقلات الجديدة للصفحة احتكاكًا لأنها تقاطع التدفق أو تجبر المستخدمين على جمع البيانات المفقودة بين جميع علامات التبويب أو طرق العرض المختلفة. في كثير من الأحيان، ينتهي الأمر بالمستخدمين بتجربة معطلة، مليئة بالتأكيدات التي لا تنتهي أبدًا، أو التحذيرات المبالغ فيها، أو التعليمات المطولة، أو مجرد نقاط مرجعية مفقودة. كما ذكر Saulius Stebulis، في هذه السيناريوهات، غالبًا ما تعمل الأقسام القابلة للتوسيع أو التحرير الموضعي بشكل أفضل - فهي تحافظ على ثبات المهمة على الشاشة الحالية. من الناحية العملية، في العديد من السيناريوهات، لا يكمل المستخدمون مهامهم بشكل منفصل. إنهم بحاجة إلى البحث عن البيانات، أو نسخ القيم ولصقها، أو تحسين الإدخالات في أماكن مختلفة، أو مجرد مراجعة السجلات المماثلة أثناء عملهم خلال مهامهم. تعد التراكبات والأدراج أكثر فائدة في الحفاظ على الوصول إلى بيانات الخلفية أثناء المهمة. ونتيجة لذلك، يبقى السياق دائمًا في مكانه، متاحًا للرجوع إليه أو النسخ واللصق. احفظ الوسائط والتنقل في الصفحة للحظات التي يضيف فيها الانقطاع قيمة حقيقية - خاصة لمنع الأخطاء الجسيمة. الوسائط مقابل الصفحات: شجرة القرار منذ فترة، قام ريان نيوفيلد بتجميع دليل مفيد جدًا لمساعدة المصممين على الاختيار بين النماذج والصفحات. يأتي مزودًا بورقة غش سهلة الاستخدام بتنسيق PNG ونموذج Google Doc مع أسئلة مقسمة إلى 7 أقسام. إنها طويلة وشاملة للغاية، ولكن من السهل جدًا متابعتها:
قد يبدو الأمر شاقًا، لكنها عملية بسيطة جدًا مكونة من 4 خطوات:
سياق الشاشة. أولاً، نتحقق مما إذا كان المستخدمون بحاجة إلى الحفاظ على سياق الشاشة الأساسية. تعقيد المهمة ومدتها. يمكن أن تستخدم المهام الأبسط والمركزة وغير المشتتة للانتباه تدفقات مشروطة، ولكنها طويلة ومعقدة تحتاج إلى صفحة. الإشارة إلى الصفحة الأساسية. بعد ذلك، نتحقق مما إذا كان المستخدمون يحتاجون غالبًا إلى الرجوع إلى البيانات الموجودة في الخلفية أو ما إذا كانت المهمة عبارة عن تأكيد أو تحديد بسيط. اختيار التراكب المناسب. أخيرًا، إذا كان التراكب خيارًا جيدًا بالفعل، فإنه يرشدنا إلى الاختيار بين مشروط أو غير مشروط (يميل نحو غير مشروط).
التفاف كلما أمكن، تجنب حظر واجهة المستخدم بأكملها. اجعل مربع حوار عائمًا، يغطي واجهة المستخدم جزئيًا، ولكنه يسمح بالتنقل والتمرير والنسخ واللصق. أو اعرض محتويات النموذج كدرج جانبي. أو استخدم الأكورديون العمودي بدلاً من ذلك. أو قم بنقل المستخدمين إلى صفحة منفصلة إذا كنت تريد إظهار الكثير من التفاصيل. ولكن إذا كنت ترغب في تعزيز كفاءة المستخدمين وسرعتهم، فتجنب الوسائط بأي ثمن. استخدمها لإبطاء المستخدمين، وتجميع انتباههم، ومنع الأخطاء. وكما أشارت تيريز فيسيندين، لا أحد يحب أن تتم مقاطعته، ولكن إذا كان لا بد من ذلك، فتأكد من أن الأمر يستحق التكلفة تمامًا. تعرف على "أنماط تصميم الواجهة الذكية" يمكنك العثور على قسم كامل حول النماذج والبدائل في Smart Interface Design Patterns، وهي دورة فيديو مدتها 15 ساعة تحتوي على 100 من الأمثلة العملية من مشاريع الحياة الواقعية - مع تدريب مباشر على تجربة المستخدم في وقت لاحق من هذا العام. كل شيء بدءًا من القوائم المنسدلة الضخمة وحتى جداول المؤسسات المعقدة - مع إضافة 5 قطاعات جديدة كل عام. انتقل إلى المعاينة المجانية. استخدم الرمز BIRDIE لتوفير خصم 15%. تعرف على أنماط تصميم الواجهة الذكية، دورة الفيديو الخاصة بنا حول تصميم الواجهة وتجربة المستخدم.
تدريب الفيديو + تجربة المستخدم (UX)فيديو فقطالفيديو + التدريب على تجربة المستخدم (UX)$ 495.00 $ 699.00
احصل على فيديو + تدريب على تجربة المستخدم 25 درس فيديو (15 ساعة) + تدريب مباشر على تجربة المستخدم. ضمان استرداد الأموال لمدة 100 يوم. الفيديو فقط$ 300.00$ 395.00
احصل على دورة الفيديو 40 درس فيديو (15 ساعة). يتم تحديثها سنويًا. وهي متاحة أيضًا كحزمة UX مع دورتين فيديو.
موارد مفيدة
أنواع مختلفة من النوافذ المنبثقة، بقلم آنا كالي أفضل الممارسات لتصميم نماذج واجهة المستخدم، بواسطة Uxcel نحن نستخدم عددًا كبيرًا جدًا من الوسائط اللعينة: إرشادات تجربة المستخدم، بقلم أدريان إيجر الحوارات المشروطة وغير المشروطة، بقلم تيريز فيسيندن تصميم واجهة المستخدم الحديثة للمؤسسات: مربعات الحوار المشروطة، بقلم جيمس جاكوبس الوسائط في أنظمة التصميم
