أرشيف التصنيف ‘أنماط التصميم’
تساعدك أنماط التصميم في فهم مواقع الانترنت بشكل أكبر وأعمق، وفي حل المشاكل التي قد تواجهها في موقعك. (للمزيد حول أنماط التصميم)
المشكلة التي يحلها هذا النمط
مشكلة اضطرار مستخدمي موقعك الى تعبئة جميع حقول نماذجه (forms)، مع ان اغلبهم قد يتفقون في القيم التي يقومون باستخدامها في تلك النماذج.
الحل المقترح لتلك المشكلة
وضع قيم افتراضيّة جيّدة في بعض (او جميع) حقول النموذج المطلوب تعبئته، وذلك حتى تصبح تعبئة النماذج الموجودة في موقعك أسهل وأسرع.
متى يستخدم هذا النمط
لا ينصح بتطبيق هذا النمط في جميع النماذج الموجودة في موقعك، ويفضّل حصر استخدامه على الحالات التالية:
- اذا كان النموذج يحتوي على الكثير من الحقول وقد يحتاج الى وقت طويل لتعبئته.
- اذا كان يمكنك تخمين القيم التي سيدخلها مستخدمي موقعك في النموذج.
كيف يحل هذا النمط المشكلة
ببساطة يحل المشكلة عن طريق مساعدة مستخدمي موقعك على تعبئة النماذج بشكل أسرع وأسهل.
كيفية تطبيق هذا النمط
هذه بعض النصائح لكيفية تطبيق هذا النمط:
- حدّد قيماً افتراضية جيدة في الحقول التي قد تحتوي على قيمة يتّفق عليها أغلب مستخدمي موقعك. مثال بسيط: اذا كان أغلب زوّار موقعك من السعودية، فاجعل القيمة الافتراضية لحقل “البلد” هي “السعودية”.
- يمكنك تحديد القيم الافتراضيّة الجيّدة اما بناء على ما تعرفه عن مستخدمي موقعك وما يدخلونه عادة في النماذج، او حتى القيام ببرمجة ذلك بحيث يتعرّف موقعك تلقائياً على القيم التي يدخلها كثيراً الزوّار في نماذج موقعك، وتحديدها كقيم افتراضيّة.
- ابتعد عن وضع قيم افتراضية لحقول ذات قيم حسّاسه (اشياء متعلقه بالدين أو السياسة أو الجنس..الخ)، حتى لا يتسبب ذلك في اغضاب مستخدمي موقعك.
- عندما تضع قيمة افتراضية لحقل ما، فهناك احتمال ان المستخدم لن يغيّر تلك القيمه ويستخدم المحدّدة مسبقاً حتى ان لم تكن صحيحة، فكن حذراً في اختيار الحقول التي تضع لها قيم افتراضية، خاصة في الحقول المهمّة.
مثال على هذا النمط
نموذج الحجز في موقع الخطوط السعودية يضع تاريخ اليوم كقيمة افتراضية لحقل تاريخ المغادرة، بما انه لا يمكنك المغادرة في يوم سابق منطقياً
مصنف في أنماط التصميم | 4 تعليقات »
تساعدك أنماط التصميم في فهم مواقع الانترنت بشكل أكبر وأعمق، وفي حل المشاكل التي قد تواجهها في موقعك. (للمزيد حول أنماط التصميم)
المشكلة التي يحلها هذا النمط
المستخدم (او الزائر) يرغب في معرفة موقعه الحالي في الموقع، حتى يساعده ذلك في فهم تقسيم وهيكلة محتوى الموقع ويسهّل له تصفّحه.
مثال على نمط فتات الخبز
الحل المقترح لتلك المشكلة
استخدام وسيلة تصفّح مساعدة تسمّى Breadcrumbs (أو “فتات الخبز” كترجمة)، تعرض بها أقسام محتوى الموقع حسب هيكلتها بشكل عرضي، حيث يمثّل أول رابط أعلى قسم حسب هيكلة الموقع (وهو الصفحة الرئيسية عادة)، وحتى الصفحة التي يستعرضها المستخدم حالياً.
سمّيت وسيلة التصفّح هذه بـ”فتات الخبز” نسبة إلى قصّة مشهورة استخدم بها طفلين فتات الخبز كوسيلة ارشاديّة لمعرفة طريق العودة لمنزلهم.
متى يستخدم هذا النمط
استخدم هذا النمط عندما يكون محتوى موقعك ضمن هيكلة ذات ثلاث مستويات على الأقل (قسم يحتوي على قسم فرعي، وذلك القسم الفرعي يحتوي على قسم فرعي آخر…الخ).
كيف يحل هذا النمط المشكلة
يساعد هذا النمط زوّار ومستخدمي موقعك على:
- فهم هيكلة محتواه بشكل بسيط وسريع.
- سهولة التنقّل بين أقسام المحتوى.
- فهم سياق الصفحة أو القسم الذي يستعرضونه حالياً (في حال زيارتهم للموقع من احدى صفحاته الداخليه).
كيفية تطبيق هذا النمط
- يتم وضع روابط الأقسام بشكل عرضي مفصوله بفواصل (عادة علامة “>” أو “»”) بحيث يكون أول رابط هو رابط الصفحة الرئيسية (أو أعلى مستوى في محتويات الموقع)، وبقيّة الروابط حسب هيكلة محتوى الموقع (القسم الفرعي ثم القسم الذي يليه وهكذا).
- يسمّى كل رابط باسم عنوان القسم الذي يربط له.
- يتم وضع اسم الصفحة التي يستعرضها المستخدم حالياً في نهاية “فتات الخبز”، وتكون بشكل مختلف (عادة لون أغمق بدون رابط)
- لا تستخدم روابط “فتات الخبز” في الصفحة الرئيسية.
- لا تستخدم “فتات الخبز” كوسيلة رئيسية لتصفّح الموقع، بل استخدمها كوسية مساعدة ثانوية فقط.
أمثلة على هذا النمط
مثال 1
مثال 3
مثال 2
مصدر الأمثلة
مصنف في أنماط التصميم | 6 تعليقات »
تساعدك أنماط التصميم في فهم مواقع الانترنت بشكل أكبر وأعمق، وفي حل المشاكل التي قد تواجهها في موقعك. (للمزيد حول أنماط التصميم)
ملاحظة: “نظام المكافآت” ليست ترجمة لـCollectible Achievements، وانما وضعت الأسم الانجليزي الأصلي حتى يسهل للقاريء البحث ومعرفة المزيد عنه.
المشكلة التي يحلها هذا النمط
عندما تملك تطبيقاً او خدمة على الانترنت تحتوي على اقسام أو خواص قد لا يستخدمها المستخدم في الظروف الطبيعية سواء كان ذلك لعدم وجود حافز لاستخدام تلك الخواص أو لجهل المستخدم بها.
الحل المقترح لتلك المشكلة
اعط المستخدم مكافئات معنويّة عند قيامهم بمهام معيّنة في تطبيقك (مثل مساعدة عدد معيّن من الاشخاص، استخدام احدى الخواص بشكل معيّن…الخ، حسب نوعيّة تطبيقك).
هذه المكافآت ليست ملموسة، بل تكون عادة عبارة عن أيقونات مميّزة تضاف لملف المستخدم الشخصي عند قيامه باشياء محدّده مسبقاً في موقعك، حتى يستطيع المستخدمين الآخرين استعراض انجازات ذلك المستخدم في موقعك.
أكمل قراءة بقية الموضوع »
مصنف في أنماط التصميم | 8 تعليقات »
هذه التدوينة تستهدف: مصممّي ومطوّري المواقع
تساعدك أنماط التصميم في فهم مواقع الانترنت بشكل أكبر وأعمق، وفي حل المشاكل التي قد تواجهها في موقعك. (للمزيد حول أنماط التصميم)
ملاحظة: أعلم ان “كشف العناصر تدريجياً” قد لا تكون الترجمة المناسبة لـResponsive Disclosure، لكنها احدى تلك الحالات التي تصعب فيها الترجمة الحرفية.
تحديث: تم تغيير الترجمة الى “الكشف التفاعي”، أشكر الأخ حسام على اقتراح ترجمة أفضل.
المشكلة التي يحلها هذا النمط
عرض جميع العناصر الموجودة في صفحة موقعك على المستخدم دفعة واحدة قد يتسبّب في تشتيته او يزيد من تعقيد أو “ازدحام” واجهة الموقع بالنسبة له. تبرز هذه المشكلة عادة في النماذج (forms) المطلوب تعبئتها، كما ترى في النموذج التالي:
نموذج استعادة كلمة المرور في موقع STC
الحل المقترح لتلك المشكلة
استخدام طريقة الكشف التفاعلي، أو ما يسمّى بـResponsive Disclosure. فكرة هذا النمط هو اخفاء جميع العناصر التي قد لا يحتاجها المستخدم، والابقاء على الضروري منها فقط، و من ثم اظهار باقي العناصر عند الحاجة.
ابرز مثال على كيفية استخدام هذا النمط هو نموذج مشاركة التحديثات في موقع facebook، فالموقع لا يريك الا اهم عنصر في نموذج المشاركة (الحقل الذي تكتب به)، وثم من يظهر لك باقي العناصر المتعلّقة به عندما تضغط على الحقل الفارغ:
نموذج مشاركة التحديثات في facebook
متى يستخدم هذا النمط
يمكنك استخدام هذا النمط في الحالات التالية:
- لتبسيط واجهة موقعك، وذلك باخفاء اي عنصر غير ضروري أو يعتمد على استخدام عناصر أخرى ترتبط بها (كما في المثال السابق).
- عندما يكون لديك نموذج يحتوي على العديد من الحقول التي قد لا يحتاجها المستخدم الا عند اختياره لاختيارات معيّنة (مثال: لا داعي لاظهار حقول “المدينة” و “الحي” اذا لم يكن المستخدم قد حدّد دولته في حقل “البلد”)
- لديك نموذج طويل نسبياً ويحتوي على عدة أقسام، ولا تريد أن ينفّر ذلك مستخدمي موقعك، فتقوم باظهار القسم الأول من النموذج فقط، ومن اظهار كل قسم عندما يكمل المستخدم تعبئة القسم الذي يسبقه.
كيف يحل هذا النمط المشكلة
يساعد هذا النمط في تبسيط ما يتفاعل معه المستخدم بشكل عام من نماذج أو غيره، وذلك باخفاء العناصر الثانوية والابقاء على العناصر الرئيسية المهمّة، مما يساعد المستخدم على التركيز على ما يحتاجه في تلك اللحظه فقط.
كيفية تطبيق هذا النمط
على افتراض انك تريد تطبيقه على نموذج: أظهر فقط العناصر التي يحتاجها المستخدم للبدء في تعبئة ذلك النموذج، وعندما يبدأ في تعبئة النموذج ابدأ بالكشف عن العناصر الأخرى تدريجياً. لا تخفي ما قام بتعبئتة المستخدم سابقاً، وذلك حتى يستطيع العودة له وتصحيحه.
في حال كان النموذج طويلاً، يفضّل توضيح المدة التي قد يستغرقها تعبئة النموذج مسبقاً.
يمكنك تطبيق هذا النمط بسهولة باستخدام تقنية الجافاسكريبت (javascript).
المزيد من الأمثلة
صورة من حساب الموقع في twitter
مصنف في أنماط التصميم | 5 تعليقات »
هذه التدوينة تستهدف: مصمّمي ومطوّري المواقع
تساعدك أنماط التصميم في فهم مواقع الانترنت بشكل أكبر وأعمق، وفي حل المشاكل التي قد تواجهها في موقعك. (للمزيد حول أنماط التصميم)
المشكلة التي يحلها هذا النمط
المستخدم يريد استعراض محتوى الموقع حسب الأكثر شعبية أو الأكثر استخداماً.
الحل المقترح لتلك المشكلة
استخدام ما يسمى بـ”سحابة الأوسمة” (أو Tag Cloud)، والـ”سمة” (أو الـTag) ببساطة هي شيء يساعد في وصف محتوى معيّن (موضوع، خبر، صورة، ملف…الخ)، و ذلك لتسهيل البحث عن المحتويات في الانترنت وتسهيل تصفّحها والربط بينها.
سحابة الأوسمة لاحدى المدوّنات العربية
متى يستخدم هذا النمط
يمكنك استخدام هذا النمط في الحالات التالية:
- اذا كنت تستخدم أكثر من 10-20 وسم مختلف لوصف محتويات موقعك.
- اذا كان موقعك يوفّر للمستخدمين امكانية مشاركة المحتوى (ملفات، صور،مواضيع..الخ) ووضع أوسمة له.
- اذا كان زوّار موقعك قد يرغبون في تصفّح المحتويات حسب الأكثر أهميّة أو شعبية (أمثلة: موقع اخباري: الزوّار قد يرغبون في معرفة الاخبار المهمة أيضاً وليس الجديدة فقط. موقع مشاركة الصور: الزوّار قد يرغبون في معرفة أكثر انواع الصور مشاركة بين الناس في وقت معيّن)
كيف يحل هذا النمط المشكلة
يوفّر هذا النمط صورة لمحتويات موقعك الأكثر شعبية (أو الأكثر عدداً) مقابل محتوياته الأقل شعبية (أو الأقل عدداً) تسهّل على الزوّار أخذ فكرة عن محتويات الموقع وتصفّح المحتويات المهمّة أو الأكثر شعبيّة، حيث أن استخدام التصنيفات لا يحل تلك المشكلة لقلّة عددها عادة.
يعتبر هذا النمط وسيلة مساعدة لتصفّح محتويات الموقع، ولا يجب أن يستخدم كوسيلة أساسية للقيام بذلك.
كيفية تطبيق هذا النمط
ضع أكثر 30 إلى 40 وسم استخداماً تستخدمهم في موقعك (أو يستخدمها مستخدمي موقعك) مجموعة مرتّبة بشكل أبجدي (وتسمّى سحابة) في روابط، بحيث يؤدي كل رابط إلى صفحة تحتوي على قائمة بالمحتويات التي وسمت بذلك الوسم.
بعد ذلك حدّد “وزن” كل وسم (كل ما زاد استخدام وسم معيّن، كل ما زاد “وزنه” في السحابة). يتم تحديد وزن وسم معيّن بتقسيم عدد عناصر محتوى الموقع التي تم استخدام ذلك الوسم لوصفها على اجمالي عدد عناصر المحتوى الموجودة في الموقع، و من ثم مقارنة ناتج ذلك الوسم بنواتج الأوسمة الأخرى في الموقع لمعرفة وزنه أو شعبيّتة (قد تبدو هذه المعادلة معقّدة، ولكنها فعلياً بسيطة).
يمكن تمثيل وزن كل وسم بطريقتين (او باستخدامها معاً بطريقة أو بأخرى):
- باستخدام الأحجام: وزن الوسم يتحدّد حسب حجمه، فكل ما كبر حجمه كلما ثقل وزنه، مما يعني انه مهم أو شعبيته عاليه. هذه الطريقة الأكثر استخداماً.
- باستخدام الالوان: الأوسمة ذات اللون الغامق أثقل وزناً من الأوسمة ذات اللون الباهت.
المزيد من الأمثلة
سحابة الأوسمة في موقع دعم ووردبريس
سحابة الأوسمة في موقع أمازون (لاحظ كيف تم استخدام اكثر من طريقة لعرض وزن الأوسمة)
مصنف في أنماط التصميم | 5 تعليقات »
هذه التدوينة تستهدف: مدراء المواقع و مصممّي الجرافيكس
تم تحديث التدوينة 23 يونيو، 2009
عند تصميمك لمواقعك، ستواجهك عادة مشاكل في عرض بعض محتوياته او مزاياه بشكل سهل و منطقي للزوار، خاصة ان لم تكن تملك خبرة كافية في هذا المجال، مثل: ماهي الطريقة الانسب لتقييم الاشياء في الموقع؟ ماهي الطريقة الاكفأ لتصميم قائمة تصفّح موقعك الرئيسية؟ ما هي الطريقة الأنسب لتعبة نوع معين من المعلومات (رقم التلفون، التاريخ..الخ) في نماذج الموقع؟ و ما الى ذلك.
لحل تلك المشاكل و التحديات، يمكنك الاستعانة بما يسمى بـ”انماط التصميم” (Design Patterns). فهي حلول مقترحة لها تم وضعها من قبل اناس مختصّين. و تلك الانماط عادة تكون عبارة عن افكار فقط، و ليست ادوات تساعدك في بناء تلك الحلول.
يحتوي نمط التصميم عادة على:
- اسم نمط التصميم.
- ماهيّته.
- مثال او اكثر عليه.
- متى يجب استخدامه.
- لماذا يجب استخدامه (تبرير منطقي).
- كيفية تطبيقه.
و قد تحتاج الى استعراض احد انماط التصميم حتى تتضح الفكرة.
يمكنك ايجاد الكثير من انماط التصميم الجاهزة للإستفادة منها في المواقع المختصة بها مثل:
و هذه ليست الفائدة الوحيدة لانماط التصميم، فعند عملك مع اكثر من شخص على تطوير موقع معيّن، يمكنك اختيار عدد من تلك من الانماط لتصبح كمرجع للجميع، حتى تضمن تناسق اقسام الموقع بغض النظر عن الشخص الذي يعمل عليه. و ان كنت متخصصا في قابلية الاستخدام مثلا، فيمكنك انشائها بنفسك اذا استدعت الحاجة.
المشكلة الوحيدة هنا ان جميع مواقع انماط التصميم على الانترنت هي باللغة الانجليزية، و لكن سأعمل ان شاءالله على ترجمة ما اجده مفيدا منها لأشاركك بها عن طريق هذه المدونة بشكل دوري.
ان كانت لديك اي استفسارات عن الموضوع، فلا تتردد في كتابتها في التعليقات.
مصنف في أنماط التصميم, قابلية الاستخدام | 17 تعليقات »
