مصمم - مدونة تصميم وتطوير المواقع العربية

ما هي قابلية الإستخدام على الوِب؟ هل هذه إحدى المصطلحات التي أصبح يستخدمها المصممون للتباهي بمهتنهم؟ أم هل هي علم من علوم تصميم الواجهات الذي هو في تطور دائم؟ ما الفرق بين المُسمى مصمم مواقع ومطور واجهات؟

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

باختصار، قابلية الإستخدام

إذن ما هو هذا العلم الذي نتحدث عنه؟ قابل للإستخدام هو مصطلح يعبّر عن كل ما هو فعّال في تحقيق تواصل بين المُستخدِم والمُستخدَم. قد تكون تحكمات في السيارة أو لوحة مفاتيح منزلية أو هاتف محمول أو تطبيق على الحاسوب أو في حالتنا موقع على الوِب.

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

أمثلة واقعية خارج الشاشة

كما ذكرت مُسبقاً، قابلية الإستخدام لا تنحصر فقط في تطبيقات الحاسوب أو مواقع الوِب، فهي قد تكون أي أداة نتعامل معها يومياً كانت تحكمات في سيارتك أو المنبه الذي ايقظك صباح اليوم!

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

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

من تصوير clampants على فليكر.

من تصوير m.gifford على فليكر.

من تصوير D’Arcy Norman على فليكر.

من تصوير eldan على فليكر.

من تصوير illustir على فليكر.

من تصوير Jordan Roher على فليكر.

تحسين قابلية الإستخدام على موقعك

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

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

الإلتزام بالعُرف

كما وضحتُ في موضوعٍ سابق، بعض المواقع تقوم بتغيير بعض العناصر المتعارف عليها على الوِب كالروابط المُسطرة لأسبابٍ ليست واضحة ولا تخدم تجاه الموقع في نهاية المطاف. فعلى سبيل المثال يمكنك تغيير مؤشر الماوس باستخدام الأنماط عند الوقوف على رابط. المتعارف عليه هو أن المؤشر يتحول إلى إصبع وهذا هو الأمر عبر جميع المتصفحات وعلى جميع الأنظمة، فلماذا نغيره؟

إستخدام المساعِدات البصرية بتناسق ورُشد

تصميم الواجهة بلوحة ألوان محددة وبرسوماتٍ متناسقة يزيد من سهولة قراءتها واستخدامها.، لذا فمن المهم عدم الإفراط في استخدام مختَلف العناصر بتنوع واسع كتعدد الخطوط وكثرة الألوان واختلاف الرسوم حتى لا يصبح الوصول إلى المعلومات على الموقع أو التطبيق أمر مُرهق.

كل هذا يصب في اتجاه جعل الواجهة موحدة عبر جميع الصفحات. فأنت لا تريد مستخدم واجهتك أن يتساءل إذا ما كان على نفس الموقع أم انتقل إلى موقع آخر في العملية بدون علمه، أليس كذلك؟

توفير سُبل واضحة للإبحار عبر الموقع

إذا سألت رواد قابلية الإستخدام ماذا يجعل نظم الإبحار عبر الموقع جيدة، فسيجمعون على الرأي الآتي.

ثلاثة أسئلة أي نظام إبحار ناجح يستطيع الرد عليها في أي وقت:

1. من أين أتيت؟
2. أين أنا الآن؟
3. إلى أين يمكنني الذهاب من مكاني؟

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

وضع تقسيم تدرجي منطقي في عناصر الواجهة

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

المغزى من هذا المثال هو أن تضع المعلومات على موقعك حسب تقسيم هرمي منطقي. على سبيل المثال، تنسيق وسوم العناوين h1 إلى h6 يجب أن توحي بأهمية متدرجة حيث أن h1 يكون الأكبر حجماً ويليه h2 أصغر حجماً ويليه h3 إلخ.

المستخدم هو الأولوية

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

مصادر

• مبادئ في تصميم واجهات قابلة للإستخدام (إنجليزي)
• مدونة قابلية الإستخدام – مشهور الدبيان
• لا تجعلني أفكر! – ستيف كروغ، الطبعة الثانية ٢٠٠٥
• عشرة اكتشافات في قابلية الإستخدام (إنجليزي)
• ويكيبيديا: قابلية الإستخدام (إنجليزي)

الصورة البارزة الأصلية من تصوير Franco Folini على فليكر.