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

صناديق التغشية Overlays، صناديق المحادثة Dialog boxes نوافذ منبثقة Modal windows، سمّها ما شئت، تلك النّوافذ الصغيرة التي تنبثق في منتصف الشاشة وتشدّ انتباهك قد استخدمت كثيرًا (وأحيانًا بشكل خاطئ) في عالم التّصميم.

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

1. قلل من استخدام النوافذ المنبثقة قدر الإمكان

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

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

تسمح شبكة "LinkedIn" لمستخدميها بأن يعدّلوا حقلًا داخل الصفحة مباشرة بدلًا من استخدام نافذةٍ للتعديل.

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

تستخدم شبكة Twitter نافذة منبثقة لكي يتمكن المستخدم من كتابة تغريدة جديدة.

من الأفضل لـ Twitter أن يسمح للمستخدم بكتابة تغريدته داخل الصفحة.

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

2. لا تظهر النوافذ المنبثقة فجأة

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

3. أضف تغشية سوداء على الصفحة خلف النافذة المنبثقة

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

4. دع المستخدم يغلق النافذة بالنقر (اللمس) خارجها

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

5. وفر دائما زر إغلاق واضح

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

يوفّر متجر "John Lewis" زر إغلاقٍ واضح في أعلى يمين نوافذ الانبثاق خاصتهم.

6. لا تضمن أكثر من خطوة في نفس النافذة

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

حاول تجنّب النوافذ المنبثقة العملاقة كهذه النافذة من Braclays Bank.

7. لا تحشر الكثير داخل النافذة المنبثقة

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

8. ضمن المعلومات المهمة

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

9. تجنب استخدام النوافذ المنبثقة على الهواتف

من الجيّد عمومًا أن تتجنّب استخدام النوافذ المنبثقة على الهواتف. على شاشات الهواتف الصغيرة لا بد أن تأخذ النافذة المنبثقة كامل عرض الشاشة (فآخر أمر ترغب حدوثه هو أن يكون لديك نافذة منبثقة بالغة الصغر على الهاتف)، فلماذا لا تستخدم صفحةً بدلًا من ذلك؟ إذا استخدمت النوافذ المنبثقة في تصميمٍ متجاوب فسيكون من السهل غالبًا الحفاظ على نفس السلوك عبر مختلف الأجهزة. لذلك، من المهم التأكد أن أي نافذة منبثقة تستخدمها تناسب الهاتف. وكمثالٍ على ذلك، نوافذ Bootstrap المنبثقة (انظر الصورةَ أدناه) تعمل على نحوٍ متساوٍ بطريقة جيّدة في الأجهزة المحمولة -سطح المكتب- والهاتف معًا. بما أن النوافذ المنبثقة على الهاتف ستتطلّب غالبًا النزول والصعود بالشاشة، ستكون إضافة زر إغلاق أو إلغاء في الأعلى والأسفل فكرةً جيّدة.

تأكّد من أن أي نافذة منبثقة تستعملها هي نافذة مناسبة للهاتف، كما هي نوافذ Bootstrap المنبثقة.

10. تحقق من قابلية وصول النوافذ المنبثقة

من الواضح أن أخذ القابلية للوصول Accessibility بعين الاعتبار أمرٌ مهم لأي تصميم، ولذلك من المهم التأكد من كون أي نافذة منبثقة تُراعي قابلية الوصول. وكمثال، تأكد من أن التركيز focus موجّه إلى النافذة المنبثقة عند فتحها (بدلًا من البقاء في الصفحة الحالية) بحيث يتمكّن المستخدم من التصفّح باستعمال لوحة مفاتيحه. تأكد أيضًا من كون زر الإغلاق يمتلك لصيقة label تعريفيًّة مناسبًة لمستخدمي أدوات قراءة الشاشة.

ترجمة -وبتصرف- للمقال: guidelines to consider when using overlays / modals لصاحبه Neil Turner.