في هذا المقال سأتناول بعض الجوانب الخاصة بتصميم وإختيار الأيقونات والرموز داخل المواقع وتطبيقات الويب، الأيقونات Icons أصبحت جزء لا يتجزأ من أي واجهة موقع أو تطبيق، ولكن فى كثير من الأحيان لا نلقي بالا لما يمكن أن يحدث لو وضعنا أيقونة غير مفهومة، معقدة أو غير واضحة المعالم داخل واجهة الموقع، ما أقصده هنا هي الأيقونات والرموز بالغة الصغر والتي لا يتجاوز حجمها ١٦ X ١٦ بيكسل.

ما هي الأيقونات Icons ولماذا نستخدمها؟

الأيقونات ظهرت عندما بدأت أنظمة التشغيل تستبدل واجهتها التي تعتمد على الجمل البرمجية النصية مثل MS-Dos بأنظمة تشغيل تعتمد على النوافذ مثل 98 Windows، فأتجهت شركات إنتاج انظمة التشغيل إلى استبدال الجمل النصية برموز وصور من أجل تبسيط Simplifying واجهات هذه الانظمة.

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

الأيقونات Icons تعرف بأنها “رسالة بصرية مبسطة تصف مهمة، برنامج، خاصية أو مفهوم، دون الحاجة إلى شرحها بالكلمات”، الأيقونات ترتبط أيضاً كما ذكرت سابقاً بمفهوم التبسيط Simplifying، وهذا المفهوم يتم تحقيقه بأربعة معايير:-

1. الحـــــــذف:- أحذف أي شيء غير مهم أو غير ضرورى.
2. الإختبـــــاء:- هل هناك شيء معقد؟ خبئة.
3. التنظيــــم:- رتب العناصر وفق ترتيب منطقي معين.
4. الإستبدال:- استبدل الوظائف والعناصر وفق الموقف.

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

• تقليص المساحة التي تستخدمها الأوامر من واجهة إستخدام الموقع أو التطبيق.
• سرعة مسح/تعرف عين المستخدم للأمر ومن ثم يحدد هل هو الأمر الذي يبحث عنه أم لا؟

علاقة الأيقونات بقابلية إستخدام الموقع

قبل أن نحاول فهم العلاقة بين إستخدام الأيقونات /الرموز وبين قابلية استخدام الموقع سنبحر قليلاً فى دراسة قام بها Peter Steen لدراسة علاقة الايقونات بقابلية الإستخدام، قام بيتر بإستخدام عدد من الأيقونات والرموز فى واجهة محرر لنظام إدارة محتوى، واستخدم رمز السلسلة أو الكيبل كأيقونة للدلالة على الرابط  Link …

يقول بيتر “لقد استخدمنا رمز السلسلة ليرشد المستخدم لكيفية إدراج رابط في الموضوع، ببساطة سيضغط المستخدم على الأيقونة ومن ثم يدرج الرابط”.

لكن الغريب في الأمر ان معظم المستخدمين الذين تم اختبار الواجهة عليهم لم يفهوموا معنى رمز السلسلة بل اعتقدوا انه يرمز إلى ربط عنصرين معاً، فسر بيتر هذا الأمر بقوله  “لقد اعتقدنا انه من البديهى أن يفهم المستخدم ما هو معنى أيقونة السلسلة، ولكن اعتقادنا هذا كان خاطئاً ﻷن مستخدمي الويب ليسوا جميعاً مهوسي ويب Geeks كما أنهم ليسوا على نفس المستوى من الخبرة، سيفهومون ما يفهمه المطور والمصمم”.

أعاد بيتر التجربة مرة أخرى ولكن بعدما استخدم عدد أكبر من الأيقونات لكي يرمز إلى عدد أكبر من الأوامر في محرر النصوص، واستخدم ايقونتين مختلفتين ليرمز إلى الرابط Link، لقد استخدم أيقونة السلسلة و أيقونة الكرة الأرضية …

عرض هذه الايقونات على المستخدمين وجلس بيتر يقيس مدى فهم المستخدمين لوظيفة كل ايقونة على حدة، ثم وضع النتائج فى الجدول التالى:-

نلاحظ من النتائج أن الأيقونتين Link1 ، Link2 كانت نسبة الفهم من قبل المستخدمين لا تتجاوز ٢٥٪ وهى نسبة متدنية جداً جعلت بيتر يعيد التفكير في ماهية الأيقونة المناسبة ليعبر عن الرابط في واجهة المحرر الذي يصممه … في النهاية أضطر إلى عدم إستخدام أي أيقونة بل استخدم الثلاث حروف الأشهر عندما نكتب رابط لأي موقع لقد استخدم WWW !!!

الدروس المستفادة

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

ثانيا: إذا قررت إستخدام الأيقونات فإنه بجب عليك أن تتأكد من أن الأيقونة المستخدمة تراعي المعايير التالية:-

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

ثالثاً: اذا كنت ستضع كلمة تحت الأيقونة لتصف ما ترمز إليه الأيقونة، انصحك ألا تستخدم الأيقونة بل اكتب الكلمة وفقط … ما فائدة الأيقونة إذاً وضعت كلمة اسفل منها تصف ما ترمز له؟