بدأت مشواري في عالم قابلية الاستخدام في عام 2006 عندما رغبت في دافعي تعلّم بعض الشيء عن هذا المجال حتى استعين به في تطوير مواقعي الخاصة, ثم احببت فكرته خاصة ان هدفه هو تسهيل استخدام مواقع الانترنت للجميع. و منذ ذلك الحين و انا اقوم بتطوير معلوماتي و شحذ مهارتي بإستمرار عن طريق القراءة المستمرة و مساعدة اصحاب المواقع في تطوير واجهات مواقعهم. و صلت الآن و لله الحمد الى مرحلة متقدمة, و اقوم حاليا في العمل على عدة مشاريع كمختص في قابلية الاستخدام (usability) و تجربة المستخدم (user experience).
يفترض أصحاب المواقع كثيراً بأن زوّار مواقعهم سيقومون بقضاء الوقت الكافي لفهم افكارها ومزاياها بشكل كامل، بينما في الواقع قد لا يقضي الزائر أكثر من 5 ثواني عندما يزور الموقع لأوّل مرّة، ويغادر بعدها في حال لم يفهم ما يميّز الموقع بسرعه (لأنه على الأغلب لديه أشياء أخرى يفضّل قضاء وقته بها). لكن هناك طريقه ستساعدك كثيراً ان شاءالله في ايصال هدف وميزة موقعك بسرعه للزوّار الجدد، والمحافظة على أكبر قدر ممكن منهم، وذلك عن طريق القيام بما يلي:
تخيّل ان موقعك هو عبارة عن محل صغير بين ملايين المحلات الأخرى (المواقع الأخرى)، وهناك الكثير من المتسوّقين (مستخدمي الانترنت) الذي يتجولون في السوق (الانترنت) ويتفحّصون جميع المحلات الموجودة على امل ايجاد منتجات او معلومات تناسبهم. اذا كان موقعك جيداً، فستكون المحادثة بين مسؤول المبيعات في محلك (لنفرض انه يمثّل الصفحة الرئيسية في موقعك) و المتسوّق (زائر موقعك) كالتالي:
الكاريكاتير السابق يمثّل موقع ذو صفحة رئيسية بسيطة توضّح للزائر الجديد فكرته بشكل مختصر وواضح، ومن ثم تتيح للزائر الحصول على المزيد من المعلومات كلما تصفّح الموقع أو استخدمه أكثر، مثل الصفحة الرئيسية لموقع Twitter:
عندما ينضم متخصّص في قابلية الاستخدام الى احدى المشاريع لتطويرها، فهدفه في الحقيقة ليس استيفاء مناسبته للزوّار والمستخدمين فقط كما يعتقد الكثير، بل يتّزن في عمله ليراعي أهداف المشروع على المدى البعيد، وميزانية وقدرات التطوير المخصصّه لذلك المشروع، وقد يؤثّر ذلك في طريقة عمله على المشروع بحيث يستغني عن بعض الأمور التي تطوّر قابلية الاستخدام وتجربة المستخدم في الموقع.
ففي مشاريع الانترنت، هناك ثلاثة ادوار رئيسية عادة يتقمّصها المسؤولين عن المشروع:
دور مسؤول الأعمال: ويراعي طرق الربح من الموقع وتحقيق اهدافه في جلب المزيد من الزوّار والحصول على صفقات الرعاية. يمثّل هذا الدور عادة المدراء أو أعضاء مجلس الادارة (في حال كان المشروع يتبع لشركة) أو المسؤولين أو أي شخص مسؤول عما سبق ذكره في الموقع.
دور مسؤول التطوير: ويراعي الامكانات المتوفّرة لتطوير المشروع (عدد المبرمجين والمصمّمين، امكاناتهم وخبرتهم…الخ) والميزانيّة المخصصّة للتطوير والحلول المتوفّره وما الى ذلك. يمثّل هذا الدور عادة المبرمجين أو مدراء المشاريع أو أي شخص يتّخذ القرارات المتعلّقة بجزئية التطوير.
دور مسؤول قابلية الاستخدام: ويراعي قابلية استخدام (أو سهولة استخدام) الموقع للزوّار والمستخدمين لكي يؤدوا مهامهم ويحصلون على ما يريدونه بسهولة. يمثّل هذا الدور عادة المتخصصين في قابلية الاستخدام أو المصمّمين أو مسؤولي التسويق أو أي شخص يهمّه ضمان سهولة استخدام الموقع.
قد يتقمّص شخص واحد جميع هذه الأدوار، أو يعطى كل دور لشخص أو أكثر، حسب حجم المشروع.
ماذا يحدث عندما يطغى احد تلك الأدوار على الأدوار الأخرى؟
عندما تضطر الى عرض الكثير من المعلومات في احدى صفحات أو أقسام موقعك، ففي كثير من الأحيان لا يكون مناسباً عرضها جميعاً في جدول أو ما شابه (وهو ما يفعله الكثير من مصممّي ومطوّري المواقع)، ويكون حينها من الأفضل عرضها في سياق معيّن مما يجعل الصفحة تبدو ابسط و “أخف” مع انها فعلياً تعرض نفس المعلومات.
على سبيل المثال، في الصورة التالية (التي قمت بتصميمها لاستخدمها كمثال توضيحي فقط)، يتم عرض معلومات المتعلّقة بسيارة معروضة للبيع:
طريقة عرض معلومات السيارة قبل التعديل
كما ترى، عرض المعلومات بهذه الطريقه يجعل الصفحة تبدو مزدحمة، ويصعّب نسبياً الوصول للمعلومة المطلوبة (خاصة من قبل الزوّار الجدد، بما انهم لا يعرفون مكان كل معلومة مسبقاً).
لنرى الآن كيف ستبدو نفس المعلومات عندما نعرضها في سياق معيّن يوصلها للزائر بشكل أبسط وأسرع:
يضيّع مصمّمي المواقع الكثير من الوقت والجهد في تصميم واجهات مواقعهم بشكل كامل ومن ثم تعديلها (أو حتى تغييرها كلياً!) لتتناسب مع احتياجات الموقع او مع رغبة عملائهم أو مدرائهم او ما إلى ذلك، بينما يمكنهم اختصار الكثير من الوقت بتصميم النماذج الأوليّة. فالنموذج (أو Prototype – وسأسميه هنا “نموذج” كاختصار) هو نسخة مبسّطه لتصميم واجهة موقع انترنت تستخدم بشكل مبدأي لتوضيح أفكار مقترحة للتصميم قبل البدء في تنفيذه كما ترى في الصورة:
مثال على نموذج بسيط صمّم باستخدام ورقة وقلم
هناك عدة فوائد لاستخدام النماذج منها:
التركيز على فكرة الموقع وتقسيم المحتوى بدلاً من تضييع الوقت في النقاش حول الجماليات، حيث ان النماذج لا تمثّل التصميم النهائي.
ايجاد تصميم سريع يسهل مناقشته والتعديل عليه بسرعه وبسهولة لتوفير الوقت والجهد قبل البدء في تركيبه وبرمجته.
امكانية اختبار كفاءة وفعالية التصميم (باستخدام اختبار قابلية الاستخدام) قبل البدء في تركيبه وبرمجته (سأوضح طريقتها مستقبلاً).
بشكل عام، يمكننا تصنيف النماذج الى نوعين:
نماذج منخفضة الدقّة (low-fidelity prototypes): وهي النماذج التي تصممّ عادة بشكل سريع باستخدام ورقة وقلم، وهي ليست بالضرورة مطابقة للتصميم النهائي، بل تمثّل فكرته وكيفية عمله فقط. استخدم النماذج منخفضة الدقة عند رغبتك في شرح ومناقشة فكرة التصميم وتقسيم المحتوى.
نماذج عالية الدقّة (high-fidelity prototypes): وهي النماذج التي تصمّم باستخدام برامج الكمبيوتر (مثل Axure RP و Dreamweaver) وتشمل الكثير من تفاصيل واجهة الموقع لتحاكي قدر الامكان التصميم النهائي للموقع، وتستطيع ان رغبت تمكين المستخدم من التفاعل مع العناصر الموجودة به من أزرار وروابط وما الى ذلك كما لو كان يستخدم موقعاً حقيقياً (حتى يعرف كيف سيعمل الموقع عندما ينتهي). استخدم النماذج عالية الدقّة عند رغبتك في عرض الموقع على شخص يشاركك القرار في الموقع (عميل، مدير، مستثمر…الخ) قبل الانتقال الى تركيبه وبرمجته، أو لاستخدام النموذج كمرجع لفريق تطوير الموقع.
مثال على نموذج عالي الدقّه مصمّم باستخدام برنامج Axure RP
قد يعتقد البعض ان تصميم النماذج الأوليّه مضيعة للوقت، لكنه فعلياً يوفّر الكثير من الوقت والجهد والمال على المدى البعيد، اذ انه يمكّنك من اختبار فكرة تصميمك قبل تطبيقها.
اذا كانت لديك أية اسئلة حول هذا الموضوع، فلا تتردّد بكتابتها في التعليقات.
خلال الفترة السابقة لاحظت ان من أكبر المشاكل التي تواجه قرّاء المدوّنة الجدد هي عدم معرفة كيفية البدء في تعلّم المزيد عن مجال قابلية الاستخدام. فالمواضيع مرتّبة حسب تاريخ نشرها، وهو نظام يناسب المدوّنات الاخباريه اكثر من المدوّنات التعليمية، حيث ان استخدامه في المدوّنات التعليمية قد يدفن مواضيع قيّمة ويجعل الوصول اليها صعباً. ولهذا السبب، قمت بانشاء قسم “دليل المواضيع” في المدوّنة.
القسم يحتوي على قائمة باغلب مواضيع المدوّنة مرتّبة في تصنيفات أعم وأشمل من التصنيفات الموجودة في المدوّنة. القسم بشكله الحالي هو مجرّد خطوة أولى لحل هذه المشكلة، وسأستمر في تطويره ان شاءالله وتطوير المدوّنة بشكل عام لتسهيل الحصول على المعلومة، وجذب المزيد من المهتمين الى هذا المجال. وقد أقوم ايضاً بتحرير بعض المواضيع القديمة لتسهيل شرح افكارها بناء على تعليقات واضافات القرّاء السابقة عليها.
وأخيراً ارغب في ذكر ملاحظة بسيطة بخصوص سلسلة أنماط التصميم التي كنت انشرها كل سبت: سأستمر في كتابة ونشر مواضيع عن أنماط التصميم، ولكنها لن تكون بشكل اسبوعي كالسابق، وانما سأكتب عن نمط بين الحين والآخر، وذلك للتركيز أكثر على نواحي أخرى في هذا المجال.
اذا كانت لديك أية اقتراحات أو ملاحظات سواء عن هذا التحديث أو عن أي شيء آخر، فارجو ان لا تبخل علي بها مهما كانت صغيرة.
استضافتني قناة المجد مؤخراً في برنامجها “حياة تك” للتحدّث عن مجال قابلية الاستخدام وتوضيح فكرته وأهمّيته. وهذا هو فيديو اللقاء:
أشكر الأخ علي العزازي على اعداده الرائع للقاء وادارته بشكل ممتاز في رأيي.
ان كانت لديك أية ملاحظات في طريقة ايصالي للمعلومة (أو حتى اقتراحات لتطويرها أكثر) فارجو ان تذكرها لي في التعليقات، حيث اني احاول الوصول لانسب وأسرع طريقة يمكنني ان اشرح بها فكرة وفائدة هذا المجال حتى لمن لا يعرف عنه أي شيء مسبقاً.
يعتقد البعض اني اترجم مواضيعي التي اكتبها في هذا الموقع سواء من كتب أو مقالات أخرى في الانترنت. ومع اني لا أرى في ذلك مشكلة بما أن المدوّنة تعليمية، الّا اني احببت أن أوضّح هذه النقطة حتى تتّضح الصورة للقرّاء بشكل عام، و لمن قد يرغبون في أن أعمل معهم مستقبلاً بشكل خاص.
جميع المواضيع التي اكتبها في هذا الموقع أصيلة. قد أستعين -بطبيعة الأمر- بعدّة مصادر عند كتابة الموضوع لمعرفة وجهات النظر المختلفة حوله أو التأكّد من تغطية جميع محاوره، ولكن في نهاية الأمر اكتب الموضوع كاملاً استناداً على خبرتي وما اعتقده شخصياً (وقد يخالف حتى ما ذكر في بعض الكتب التي أقرأها).
قد استثني مما سبق سلسلة مواضيع “أنماط التصميم” بما اني اضطر ان اجعل النمط الذي اكتب عنه قريباً مما كتب عن نفس النمط في المواقع الأخرى، وذلك لانها حلول تم الاتفاق عليها تقريباً ولا مجال لكتابة شيء جديد كلياً، ولكنها لا تزال مواضيع أصيله حيث انني لا اترجمها بشكل أو بآخر.
المضحك في الأمر ان هناك جهتين رسميّتين (الى الآن) تجنبتا العمل معي في هذا المجال (بعد ان تم اقتراح ذلك داخلياً) بحجّة انني “اترجم فقط” وافتقر للمؤهلات المطلوبه للقيام بعمل كهذا (كالشعر الأشقر مثلاً). لست مستاءاً من ذلك فهم من سيخسر في النهاية، ولكن أحببت أن اكتب هذا الموضوع عموماً للتوضيح.
تساعدك أنماط التصميم في فهم مواقع الانترنت بشكل أكبر وأعمق، وفي حل المشاكل التي قد تواجهها في موقعك. (للمزيد حول أنماط التصميم)
المشكلة التي يحلها هذا النمط
مشكلة اضطرار مستخدمي موقعك الى تعبئة جميع حقول نماذجه (forms)، مع ان اغلبهم قد يتفقون في القيم التي يقومون باستخدامها في تلك النماذج.
الحل المقترح لتلك المشكلة
وضع قيم افتراضيّة جيّدة في بعض (او جميع) حقول النموذج المطلوب تعبئته، وذلك حتى تصبح تعبئة النماذج الموجودة في موقعك أسهل وأسرع.
متى يستخدم هذا النمط
لا ينصح بتطبيق هذا النمط في جميع النماذج الموجودة في موقعك، ويفضّل حصر استخدامه على الحالات التالية:
اذا كان النموذج يحتوي على الكثير من الحقول وقد يحتاج الى وقت طويل لتعبئته.
اذا كان يمكنك تخمين القيم التي سيدخلها مستخدمي موقعك في النموذج.
كيف يحل هذا النمط المشكلة
ببساطة يحل المشكلة عن طريق مساعدة مستخدمي موقعك على تعبئة النماذج بشكل أسرع وأسهل.
كيفية تطبيق هذا النمط
هذه بعض النصائح لكيفية تطبيق هذا النمط:
حدّد قيماً افتراضية جيدة في الحقول التي قد تحتوي على قيمة يتّفق عليها أغلب مستخدمي موقعك. مثال بسيط: اذا كان أغلب زوّار موقعك من السعودية، فاجعل القيمة الافتراضية لحقل “البلد” هي “السعودية”.
يمكنك تحديد القيم الافتراضيّة الجيّدة اما بناء على ما تعرفه عن مستخدمي موقعك وما يدخلونه عادة في النماذج، او حتى القيام ببرمجة ذلك بحيث يتعرّف موقعك تلقائياً على القيم التي يدخلها كثيراً الزوّار في نماذج موقعك، وتحديدها كقيم افتراضيّة.
ابتعد عن وضع قيم افتراضية لحقول ذات قيم حسّاسه (اشياء متعلقه بالدين أو السياسة أو الجنس..الخ)، حتى لا يتسبب ذلك في اغضاب مستخدمي موقعك.
عندما تضع قيمة افتراضية لحقل ما، فهناك احتمال ان المستخدم لن يغيّر تلك القيمه ويستخدم المحدّدة مسبقاً حتى ان لم تكن صحيحة، فكن حذراً في اختيار الحقول التي تضع لها قيم افتراضية، خاصة في الحقول المهمّة.
مثال على هذا النمط
نموذج الحجز في موقع الخطوط السعودية يضع تاريخ اليوم كقيمة افتراضية لحقل تاريخ المغادرة، بما انه لا يمكنك المغادرة في يوم سابق منطقياً
سلسلة “أين المشكلة؟” هي سلسلة خفيفة تحتوي مواضيعها على صورة من موقع أو تطبيق، و المطلوب منك اكتشاف مشكلة أو أكثر في الصورة المتضمّنة من ناحية قابلية الاستخدام. قد تكون المشكلة خلل واضح في قابلية الاستخدام، أو طريقة غير عملية لعرض المحتوى، أو غير ذلك.
زائر جديد؟ ستجد في هذا الموقع مواضيع عن كيفية تطوير تجربة المستخدم (user experience) في تطبيقات ومواقع الانترنت (أي كيف تجعلها أسهل وأمتع وأكثر عملية للمستخدمين). بالاضافة الى مقالات ومقاطع فيديو تقيم سهولة استخدام اشياءاً نتعامل معها عادة (من اجهزه وغيره)
