مدونة قابلية الاستخدام

تساعدك أنماط التصميم في فهم مواقع الانترنت بشكل أكبر وأعمق، وفي حل المشاكل التي قد تواجهها في موقعك. (للمزيد حول أنماط التصميم)

ملاحظة: أعلم ان “كشف العناصر تدريجياً” قد لا تكون الترجمة المناسبة لـResponsive Disclosure، لكنها احدى تلك الحالات التي تصعب فيها الترجمة الحرفية.

تحديث: تم تغيير الترجمة الى “الكشف التفاعي”، أشكر الأخ حسام على اقتراح ترجمة أفضل.

المشكلة التي يحلها هذا النمط

عرض جميع العناصر الموجودة في صفحة موقعك على المستخدم دفعة واحدة قد يتسبّب في تشتيته او يزيد من تعقيد أو “ازدحام” واجهة الموقع بالنسبة له. تبرز هذه المشكلة عادة في النماذج (forms) المطلوب تعبئتها، كما ترى في النموذج التالي:

نموذج استعادة كلمة المرور في موقع STC

الحل المقترح لتلك المشكلة

استخدام طريقة الكشف التفاعلي، أو ما يسمّى بـResponsive Disclosure. فكرة هذا النمط هو اخفاء جميع العناصر التي قد لا يحتاجها المستخدم، والابقاء على الضروري منها فقط، و من ثم اظهار باقي العناصر عند الحاجة.

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

نموذج مشاركة التحديثات في facebook

متى يستخدم هذا النمط

يمكنك استخدام هذا النمط في الحالات التالية:

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

كيف يحل هذا النمط المشكلة

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

كيفية تطبيق هذا النمط

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

في حال كان النموذج طويلاً، يفضّل توضيح المدة التي قد يستغرقها تعبئة النموذج مسبقاً.

يمكنك تطبيق هذا النمط بسهولة باستخدام تقنية الجافاسكريبت (javascript).

المزيد من الأمثلة

صورة من حساب الموقع في twitter