توقّف مؤقّت
سأقوم بالتوقّف مؤقتاً عن كتابة المواضيع وذلك لظروف السفر ولاصابتي بالانلفونزا في الوقت ذاته.
سأعود للكتابة ان شاءالله خلال أول اسبوعين من شهر مارس ان شاءالله.
أرشيف شهر فبراير, 2010
هل مواضيعي مترجمة أم أصيلة؟
يعتقد البعض اني اترجم مواضيعي التي اكتبها في هذا الموقع سواء من كتب أو مقالات أخرى في الانترنت. ومع اني لا أرى في ذلك مشكلة بما أن المدوّنة تعليمية، الّا اني احببت أن أوضّح هذه النقطة حتى تتّضح الصورة للقرّاء بشكل عام، و لمن قد يرغبون في أن أعمل معهم مستقبلاً بشكل خاص.
جميع المواضيع التي اكتبها في هذا الموقع أصيلة. قد أستعين -بطبيعة الأمر- بعدّة مصادر عند كتابة الموضوع لمعرفة وجهات النظر المختلفة حوله أو التأكّد من تغطية جميع محاوره، ولكن في نهاية الأمر اكتب الموضوع كاملاً استناداً على خبرتي وما اعتقده شخصياً (وقد يخالف حتى ما ذكر في بعض الكتب التي أقرأها).
قد استثني مما سبق سلسلة مواضيع “أنماط التصميم” بما اني اضطر ان اجعل النمط الذي اكتب عنه قريباً مما كتب عن نفس النمط في المواقع الأخرى، وذلك لانها حلول تم الاتفاق عليها تقريباً ولا مجال لكتابة شيء جديد كلياً، ولكنها لا تزال مواضيع أصيله حيث انني لا اترجمها بشكل أو بآخر.
المضحك في الأمر ان هناك جهتين رسميّتين (الى الآن) تجنبتا العمل معي في هذا المجال (بعد ان تم اقتراح ذلك داخلياً) بحجّة انني “اترجم فقط” وافتقر للمؤهلات المطلوبه للقيام بعمل كهذا (كالشعر الأشقر مثلاً). لست مستاءاً من ذلك فهم من سيخسر في النهاية، ولكن أحببت أن اكتب هذا الموضوع عموماً للتوضيح.
نمط تصميم: قيم افتراضيّة جيّدة (Good defaults)
سأقوم كل سبت ان شاءالله نشر نمط تصميم يساعدك في فهم مواقع الانترنت بشكل أكبر وأعمق، ويساعدك في حل المشاكل التي قد تواجهها في موقعك. ( ماهي انماط التصميم؟)
المشكلة التي يحلها هذا النمط
مشكلة اضطرار مستخدمي موقعك الى تعبئة جميع حقول نماذجه (forms)، مع ان اغلبهم قد يتفقون في القيم التي يقومون باستخدامها في تلك النماذج.
الحل المقترح لتلك المشكلة
وضع قيم افتراضيّة جيّدة في بعض (او جميع) حقول النموذج المطلوب تعبئته، وذلك حتى تصبح تعبئة النماذج الموجودة في موقعك أسهل وأسرع.
متى يستخدم هذا النمط
لا ينصح بتطبيق هذا النمط في جميع النماذج الموجودة في موقعك، ويفضّل حصر استخدامه على الحالات التالية:
- اذا كان النموذج يحتوي على الكثير من الحقول وقد يحتاج الى وقت طويل لتعبئته.
- اذا كان يمكنك تخمين القيم التي سيدخلها مستخدمي موقعك في النموذج.
كيف يحل هذا النمط المشكلة
ببساطة يحل المشكلة عن طريق مساعدة مستخدمي موقعك على تعبئة النماذج بشكل أسرع وأسهل.
كيفية تطبيق هذا النمط
هذه بعض النصائح لكيفية تطبيق هذا النمط:
- حدّد قيماً افتراضية جيدة في الحقول التي قد تحتوي على قيمة يتّفق عليها أغلب مستخدمي موقعك. مثال بسيط: اذا كان أغلب زوّار موقعك من السعودية، فاجعل القيمة الافتراضية لحقل “البلد” هي “السعودية”.
- يمكنك تحديد القيم الافتراضيّة الجيّدة اما بناء على ما تعرفه عن مستخدمي موقعك وما يدخلونه عادة في النماذج، او حتى القيام ببرمجة ذلك بحيث يتعرّف موقعك تلقائياً على القيم التي يدخلها كثيراً الزوّار في نماذج موقعك، وتحديدها كقيم افتراضيّة.
- ابتعد عن وضع قيم افتراضية لحقول ذات قيم حسّاسه (اشياء متعلقه بالدين أو السياسة أو الجنس..الخ)، حتى لا يتسبب ذلك في اغضاب مستخدمي موقعك.
- عندما تضع قيمة افتراضية لحقل ما، فهناك احتمال ان المستخدم لن يغيّر تلك القيمه ويستخدم المحدّدة مسبقاً حتى ان لم تكن صحيحة، فكن حذراً في اختيار الحقول التي تضع لها قيم افتراضية، خاصة في الحقول المهمّة.
مثال على هذا النمط
نموذج الحجز في موقع الخطوط السعودية يضع تاريخ اليوم كقيمة افتراضية لحقل تاريخ المغادرة، بما انه لا يمكنك المغادرة في يوم سابق منطقياً
أين المشكلة؟ #5
سلسلة “أين المشكلة؟” هي سلسلة خفيفة تحتوي مواضيعها على صورة من موقع أو تطبيق، و المطلوب منك اكتشاف مشكلة أو أكثر في الصورة المتضمّنة من ناحية قابلية الاستخدام. قد تكون المشكلة خلل واضح في قابلية الاستخدام، أو طريقة غير عملية لعرض المحتوى، أو غير ذلك.
صورة اليوم هي من الجزء الأعلى لموقع امبراطورية وحيد:
صورة من موقع امبراطورية وحيد (اضغط للعرض بحجمها الأصلي)
وجدت خمسة مشاكل في هذه الصوره، فهل يمكنك تحديدها؟
شاركنا بما تجده في التعليقات.
نمط تصميم: فتات الخبر (Breadcrumbs)
سأقوم كل سبت ان شاءالله نشر نمط تصميم يساعدك في فهم مواقع الانترنت بشكل أكبر وأعمق، ويساعدك في حل المشاكل التي قد تواجهها في موقعك، فارجو أن لا تبخل علي باقتراحاتك وارائك لتطوير هذه السلسلة حيث انها ما زالت في بدايتها. ( ماهي انماط التصميم؟)
المشكلة التي يحلها هذا النمط
المستخدم (او الزائر) يرغب في معرفة موقعه الحالي في الموقع، حتى يساعده ذلك في فهم تقسيم وهيكلة محتوى الموقع ويسهّل له تصفّحه.
مثال على نمط فتات الخبز
الحل المقترح لتلك المشكلة
استخدام وسيلة تصفّح مساعدة تسمّى Breadcrumbs (أو “فتات الخبز” كترجمة)، تعرض بها أقسام محتوى الموقع حسب هيكلتها بشكل عرضي، حيث يمثّل أول رابط أعلى قسم حسب هيكلة الموقع (وهو الصفحة الرئيسية عادة)، وحتى الصفحة التي يستعرضها المستخدم حالياً.
سمّيت وسيلة التصفّح هذه بـ”فتات الخبز” نسبة إلى قصّة مشهورة استخدم بها طفلين فتات الخبز كوسيلة ارشاديّة لمعرفة طريق العودة لمنزلهم.
متى يستخدم هذا النمط
استخدم هذا النمط عندما يكون محتوى موقعك ضمن هيكلة ذات ثلاث مستويات على الأقل (قسم يحتوي على قسم فرعي، وذلك القسم الفرعي يحتوي على قسم فرعي آخر…الخ).
كيف يحل هذا النمط المشكلة
يساعد هذا النمط زوّار ومستخدمي موقعك على:
- فهم هيكلة محتواه بشكل بسيط وسريع.
- سهولة التنقّل بين أقسام المحتوى.
- فهم سياق الصفحة أو القسم الذي يستعرضونه حالياً (في حال زيارتهم للموقع من احدى صفحاته الداخليه).
كيفية تطبيق هذا النمط
- يتم وضع روابط الأقسام بشكل عرضي مفصوله بفواصل (عادة علامة “>” أو “»”) بحيث يكون أول رابط هو رابط الصفحة الرئيسية (أو أعلى مستوى في محتويات الموقع)، وبقيّة الروابط حسب هيكلة محتوى الموقع (القسم الفرعي ثم القسم الذي يليه وهكذا).
- يسمّى كل رابط باسم عنوان القسم الذي يربط له.
- يتم وضع اسم الصفحة التي يستعرضها المستخدم حالياً في نهاية “فتات الخبز”، وتكون بشكل مختلف (عادة لون أغمق بدون رابط)
- لا تستخدم روابط “فتات الخبز” في الصفحة الرئيسية.
- لا تستخدم “فتات الخبز” كوسيلة رئيسية لتصفّح الموقع، بل استخدمها كوسية مساعدة ثانوية فقط.
أمثلة على هذا النمط
مثال 1
مثال 3
مثال 2
الآن يمكنك متابعة التعليقات على المواضيع عبر بريدك الالكتروني
يكتب قرّاء هذه المدوّنة عادة تعليقات تحتوي على اضافات أو نقاشات جميله ومثرية بشكل كبير للموضوع، ومن المؤسف ان الكثير لا يمكنه متابعة تلك النقاشات بسبب عدم وجود وسيلة عملية للتنبيه عن الردود الجديدة.
لذلك أضفت الآن خاصيّة التنبيه عن التعليقات الجديدة على موضوع ما على بريدك الالكتروني التي ستجدها تحت الفراغ الذي تكتب به تعليقك. يمكنك أيضاً الغاء هذه الخاصية في أي وقت ترغب به. (هذه الخاصية كانت موجودة سابقاً وتوقفت عن العمل لاسباب تقنيه)
ما رأيك ان نقوم الآن باختبار الاضافة معاً بشكل سريع في هذا الموضوع؟ وفي حال واجهتك أي مشكلة باستخدامها، يمكنني العمل على حلها مباشرة.
جديد موقع “قيّم”: تخسيس الصفحة الرئيسية
بعد دمج الصفحتين الرئيسيتين لموقع “قيّم”، قرّرنا تخفيف الازدحام في الصفحة الرئيسية واعادة هيكلة الصفحة من جديد. سأشاركك ببعض تفاصيل هذا التحديث وأسباب التغييرات التي قمنا بها لتعم الفائدة.
الصفحة السابقة كانت مزدحمة بكثير من العناصر وليست منسّقه كما ترى في الصورة:
صورة الصفحة الرئيسية القديمة لموقع قيّم (اضغط الصورة لتكبيرها)
ما قمنا بتغييره هو التالي:
- أزلنا نموذج تسجيل الدخول لا حاجة له بما ان الزائر لا يحتاج لتسجيل دخوله لتصفّح محتويات الموقع، اذ انه قد يوحي للزوّار بان تسجيل الدخول اجباري للاستفادة من محتوى الموقع.
- أزلنا الشرح الموجود على جانب الموقع بما أننا وضعنا شرح للموقع في اعلى الصفحة في التحديث السابق، فلا حاجة لوجود شرحا مكرّرا حتى وان كان مختصراً.
- أزلنا آخر تحديثات منتدى الموقع بما ان المنتدى يعتبر خاصية جانبيه وليست أساسية في الموقع.
- أزلنا قائمة أحدث المطاعم، فهي لا تقدّم فائدة حقيقية للزائر، اذ ان الزائر لا يبحث عادة عن المطاعم التي تم اضافتها للتو في الموقع، بل المواقع التي تناسب المواصفات او التقييمات التي يبحث عنها.
- غيرنا طريقة عرض أحدث الصور بحيث يمكن الآن رؤية تواريخ الصور والمطاعم الخاصة بها حتى تصبح أكثر فائدة.
- وضعنا التقييمات في قائمة جانبية جديدة في الصفحة سنستخدمها لاحقاً لتطويرات قادمة.
باقي التعديلات هي مجرد تحريك للعناصر في الصفحة حتى تظهر بشكل متناسق كما ترى في الصورة:
نمط تصميم: نظام المكافآت (Collectible Achievements)
سأقوم كل سبت ان شاءالله نشر نمط تصميم يساعدك في فهم مواقع الانترنت بشكل أكبر وأعمق، ويساعدك في حل المشاكل التي قد تواجهها في موقعك، فارجو أن لا تبخل علي باقتراحاتك وارائك لتطوير هذه السلسلة حيث انها ما زالت في بدايتها. ( ماهي انماط التصميم؟)
ملاحظة: “نظام المكافآت” ليست ترجمة لـCollectible Achievements، وانما وضعت الأسم الانجليزي الأصلي حتى يسهل للقاريء البحث ومعرفة المزيد عنه.
المشكلة التي يحلها هذا النمط
عندما تملك تطبيقاً او خدمة على الانترنت تحتوي على اقسام أو خواص قد لا يستخدمها المستخدم في الظروف الطبيعية سواء كان ذلك لعدم وجود حافز لاستخدام تلك الخواص أو لجهل المستخدم بها.
الحل المقترح لتلك المشكلة
اعط المستخدم مكافئات معنويّة عند قيامهم بمهام معيّنة في تطبيقك (مثل مساعدة عدد معيّن من الاشخاص، استخدام احدى الخواص بشكل معيّن…الخ، حسب نوعيّة تطبيقك).
هذه المكافآت ليست ملموسة، بل تكون عادة عبارة عن أيقونات مميّزة تضاف لملف المستخدم الشخصي عند قيامه باشياء محدّده مسبقاً في موقعك، حتى يستطيع المستخدمين الآخرين استعراض انجازات ذلك المستخدم في موقعك.
9 طرق سهلة لتطوير تصميم موقعك بشكل كبير
من المهم جداً ان يكون تصميم موقعك جذاب ومريح للعين واحترافي أيضاً، اذ ان ذلك يجذب المزيد من الزوّار ويريح الزوّار الحاليين في تصفّح الموقع، ويرفع من مصداقيّة موقعك. لن تحتاج الى الاستعانة بمصمّم محترف أو حتى أي مهارات في التصميم حتى تقوم بذلك، فسأشاركك في هذا الموضوع بـ9 طرق سهلة تمكّنك من تطوير تصميم موقعك على الانترنت بشكل كبير.
و حتى أوضّح فائدة تلك الطرق، ساطبّق كل واحدة منها لتطوير التصميم البسيط التالي الذي يحتوي على مشاكل تتكرر كثيراً في كثير من المواقع:
اضغط على الصورة لعرضها بحجمها الطبيعي
يرجى ملاحظة اني ساستخدم كلمة “عنصر” للإشارة الى أي عنصر يكون عادة في صفحات الانترنت من عناوين وصور ونصوص وما الى ذلك.
فلنبدأ:
