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

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

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

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

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

لا ينصح بتطبيق هذا النمط في جميع النماذج الموجودة في موقعك، ويفضّل حصر استخدامه على الحالات التالية:

• اذا كان النموذج يحتوي على الكثير من الحقول وقد يحتاج الى وقت طويل لتعبئته.
• اذا كان يمكنك تخمين القيم التي سيدخلها مستخدمي موقعك في النموذج.

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

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

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

هذه بعض النصائح لكيفية تطبيق هذا النمط:

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

مثال على هذا النمط

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

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

المستخدم (او الزائر) يرغب في معرفة موقعه الحالي في الموقع، حتى يساعده ذلك في فهم تقسيم وهيكلة محتوى الموقع ويسهّل له تصفّحه.

مثال على نمط فتات الخبز

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

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

سمّيت وسيلة التصفّح هذه بـ”فتات الخبز” نسبة إلى قصّة مشهورة استخدم بها طفلين فتات الخبز كوسيلة ارشاديّة لمعرفة طريق العودة لمنزلهم.

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

استخدم هذا النمط عندما يكون محتوى موقعك ضمن هيكلة ذات ثلاث مستويات على الأقل (قسم يحتوي على قسم فرعي، وذلك القسم الفرعي يحتوي على قسم فرعي آخر…الخ).

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

يساعد هذا النمط زوّار ومستخدمي موقعك على:

• فهم هيكلة محتواه بشكل بسيط وسريع.
• سهولة التنقّل بين أقسام المحتوى.
• فهم سياق الصفحة أو القسم الذي يستعرضونه حالياً (في حال زيارتهم للموقع من احدى صفحاته الداخليه).

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

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

أمثلة على هذا النمط

مثال 1

مثال 3

مثال 2

مصدر الأمثلة

ملاحظة: “نظام المكافآت” ليست ترجمة لـCollectible Achievements، وانما وضعت الأسم الانجليزي الأصلي حتى يسهل للقاريء البحث ومعرفة المزيد عنه.

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

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

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

اعط المستخدم مكافئات معنويّة عند قيامهم بمهام معيّنة في تطبيقك (مثل مساعدة عدد معيّن من الاشخاص، استخدام احدى الخواص بشكل معيّن…الخ، حسب نوعيّة تطبيقك).

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

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

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

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

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

كما يقوم هذا النمط بربط المستخدم بتطبيقك على الانترنت، حيث انه سيصعب عليه ترك تطبيقك واستخدام تطبيق منافس، وذلك حتى لا يفقد مكافآته التي استثمر وقته في الحصول عليها.

بالطبع لكل قاعدة شواذ، فهناك نسبة من مستخدمي تطبيقك لن يأبهوا بتلك المكافآت، ولكن الأغلبية بالتأكيد ستهتم بها في حال تنفيذها بالشكل الصحيح.

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

1. صمّم أيقونه جذّابه لكل مكافأه، وأجعل كل مكافأه مقرونه بعنوان لها ونص يشرح المهمّة المطلوب القيام بها للحصول عليها.
2. اجعل المهام المطلوب القيام بها متفاوتة الصعوبة، واحرص ان تكون هناك بضعة مهام سهلة جداً يمكن للمستخدمين الجدد الحصول عليها بسرعه، وذلك حتى تشجّعهم للحصول على المزيد.
3. عندما يحصل المستخدم على احدى المكافآت، نبّهه بذلك وضع أيقونة تلك المكافأه (مع شرحها) في ملفّه الشخصي حتى يتمكّن الأخرون من رؤيتها.

أمثلة على مهام يمكنك مكافأه المستخدم عليها:

دعني أوضّح لك فكرة المكافآت في حال لم يسبق لك رؤيتها من قبل، تخيّل ان هناك تطبيقاً يستخدمه قرّاء الكتب للكتابة عن وتقييم ما قرؤوه من كتب. يمكن لذلك التطبيق مكافأه مستخدمينه عند قيامهم بالمهام التالية على سبيل المثال:

• مكافاة “قاريء جديد”: يحصل عليها المستخدم عند كتابته عن أول كتاب قرأه.
• مكافأة “ناقد كتب”: يحصل عليها المستخدم عند تقييمه لخمسة كتب.
• مكافأة “قاريء اجتماعي”: يحصل عليها المستخدم عندما يعلّق على 20 تقييم من تقييمات أعضاء الموقع.

أمثلة على هذا النمط

مكافآت في الملف الشخصي لاحد أعضاء موقع stackoverflow، لاحظ ان هناك مكافآت ذهبيه وفضيه وبرونزيه (حسب الصعوبة)

طريقة نظام المكافآت في ألعاب البلايستيشن 3. ليست تطبيقاً على الانترنت، ولكنها تحمل نفس الفكرة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

المستخدم يريد استعراض محتوى الموقع حسب الأكثر شعبية أو الأكثر استخداماً.

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

استخدام ما يسمى بـ”سحابة الأوسمة” (أو Tag Cloud)، والـ”سمة” (أو الـTag) ببساطة هي شيء يساعد في وصف محتوى معيّن (موضوع، خبر، صورة، ملف…الخ)، و ذلك لتسهيل البحث عن المحتويات في الانترنت وتسهيل تصفّحها والربط بينها.

سحابة الأوسمة لاحدى المدوّنات العربية

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

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

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

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

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

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

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

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

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

يمكن تمثيل وزن كل وسم بطريقتين (او باستخدامها معاً بطريقة أو بأخرى):

• باستخدام الأحجام: وزن الوسم يتحدّد حسب حجمه، فكل ما كبر حجمه كلما ثقل وزنه، مما يعني انه مهم أو شعبيته عاليه. هذه الطريقة الأكثر استخداماً.
• باستخدام الالوان: الأوسمة ذات اللون الغامق أثقل وزناً من الأوسمة ذات اللون الباهت.

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

سحابة الأوسمة في موقع دعم ووردبريس

سحابة الأوسمة في موقع أمازون (لاحظ كيف تم استخدام اكثر من طريقة لعرض وزن الأوسمة)

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

لحل تلك المشاكل و التحديات، يمكنك الاستعانة بما يسمى بـ”انماط التصميم” (Design Patterns). فهي حلول مقترحة لها تم وضعها من قبل اناس مختصّين. و تلك الانماط عادة تكون عبارة عن افكار فقط، و ليست ادوات تساعدك في بناء تلك الحلول.

يحتوي نمط التصميم عادة على:

1. اسم نمط التصميم.
2. ماهيّته.
3. مثال او اكثر عليه.
4. متى يجب استخدامه.
5. لماذا يجب استخدامه (تبرير منطقي).
6. كيفية تطبيقه.

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

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

• Yahoo! Design Pattern Library
• UI Pattern Factory
• Quince

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

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

ان كانت لديك اي استفسارات عن الموضوع، فلا تتردد في كتابتها في التعليقات.