قابلية الإستخدام للأيقونات Icons والرموز في الويب

كتبه أحمد مجدي 4 مايو 2012

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

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

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

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

ما هى الأيقونات Icons؟
ما هى الأيقونات Icons؟

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

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

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

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

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

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

استخدم بيتر رمز السلسلة للدلالة على الرابط Link
استخدم بيتر رمز السلسلة للدلالة على الرابط Link

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

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

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

استخدم بيتر عدد اكبر من الأيقونات واعاد التجربة مرة أخرى
استخدم بيتر عدد اكبر من الأيقونات واعاد التجربة مرة أخرى

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

نتائج نسبة فهم المستخدمين لوظائف الأيقونات
نتائج نسبة فهم المستخدمين لوظائف الأيقونات

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

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

نصيحة خبير: لا تستخدم الأيقونات الا عندما تعلم جيداً مستوى زوار موقعك هل هم مستخدمون خبراء سيفهون معانى الرموز والأيقونات ام لا؟
نصيحة خبير: لا تستخدم الأيقونات الا عندما تعلم جيداً مستوى زوار موقعك هل هم مستخدمون خبراء سيفهون معانى الرموز والأيقونات ام لا؟

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

أى الأيقونات تجدها ابسط وأقرب للإشارة إلى رئيسية الموقع؟
أى الأيقونات تجدها ابسط وأقرب للإشارة إلى رئيسية الموقع؟

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

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

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

عن كاتب المقال

أحمد مجدي
مهندس تجربة الاستخدام، مدير المشروعات في نيوكسيرو ورئيس تحرير معمل ألوان، متخصص في تصميم واجهات مواقع ،تطبيقات الويب والموبايل منذ عام 2006. تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 10 تعليقات

اترك تعليقاً على المقال

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