“قابلية الاستخدام” هي تعريب لكلمة “usability” (يُوزَبِلِتِي) الإنجليزية, و هي تشير إلى مدى سهولة استخدام شيء معين – أي شيء – سواء كان موقع انترنت, أو هاتف جوال, أو أي شي آخر نقوم باستخدامه. و لكن تركيزنا في هذه المدونة سيكون محصوراً على قابلية استخدام مواقع الانترنت. أو بالأخص, كيفية تطوير قابلية استخدام موقعك على الانترنت.

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

• يوضح الهدف أو الغرض منه للمستخدم في أقل وقت.
• يعرض محتواه بشكل واضح و مناسب للقراءة.
• يمكّن زوار الموقع من الوصول للمعلومة التي يبحثون عنها بشكل بسيط و سلس.
• يمكّن مستخدمي الموقع (سواء حاليين أو جدد) من استخدام مزايا الموقع (مثل الاشتراك في خدمة معينة, التسجيل, تسديد الفواتير…إلخ) بشكل واضح و سهل, و بأقل نسبة أخطاء ممكنة.

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

ستقدّم هذه المدونة إن شاء الله نوعين من المحتوى: محتوى مكتوب و محتوى مرئي. و سأحرص إن شاء الله على إنشائها و نشرها بشكل دوري.

هذه طريقه تقليديه للتصميم: صمّم شيئاً، ارفق ارشادات الاستخدام معه، ودع المستخدمين يتبعونها.

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

قد تتسائل “كيف يحدث ذلك؟ لم أستخدم شيئاً كهذا من قبل”، ولكن في الواقع سبق لك ان استخدمت العديد منها.

على سبيل المثال، لابد انك قمت باستخدام مقص كهذا من قبل:

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

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

هذا باختصار ما أعني بالارشادات الضمنيه.

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

هذا هو شكل النظام الترفيهي:

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

حسناً تحدثّنا بما فيه الكفايه عن الأشياء خارج نطاق الانترنت. ماذا عن مواقع الانترنت؟

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

تصاميم ترشد المستخدم ضمنياً الى ما يجب أن يقوم به

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

تصاميم ترشد المستخدم ضمنياً الى ما يجب أن يقوم به

أحياناً حتى حجم الحقل يعطي تلميحات معيّنة للمستخدم. مثلاً اذا استخدمنا الحقل التالي لطلب رقم الحساب:

تصاميم ترشد المستخدم ضمنياً الى ما يجب أن يقوم به

فقد يعتقد المستخدم ان الرقم المطلوب هو الرقم القصير (النظام القديم) وليس رقم الـIBAN (النظام الجديد).

أيضاً أي شيء يكون بارزاً…:

تصاميم ترشد المستخدم ضمنياً الى ما يجب أن يقوم به

…أو أي نص تحته خط…:

سيعطي للمستخدم تلميحاً انه يمكنه التفاعل معه، لأنه في الحالة الأولى يبدو كزر، وفي الحالة الثانية يبدو كرابط.

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

تصاميم ترشد المستخدم ضمنياً الى ما يجب أن يقوم به

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

ماذا يعني كل هذا؟

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

اذا كانت لديك أية اسئلة حول هذا الموضوع، فلا تتردد بكتابتها في التعليقات.