فى هذا المقال سأتناول بعض الجوانب الخاصة بتصميم واختيار الأيقونات والرموز داخل المواقع وتطبيقات الويب.
الأيقونات Icons اصبحت جزء لا يتجزأ من أى واجهة موقع او تطبيق، ولكن فى كثير من الأحيان لا نلقى بالا لما يمكن ان يحدث لو وضعنا ايقونة غير مفهومة، معقدة او غير واضحة المعالم داخل واجهة الموقع، ما أقصدة هنا هى الأيقونات والرموز بالغة الصغر والتى لا يتجاوز حجمها ١٦ X ١٦ بيكسل.
ما هى الأيقونات Icons ولماذا نستخدمها؟
الأيقونات ظهرت عندما بدأت انظمة التشغيل تستبدل واجهتها التى تعتمد على الجمل البرمجية النصية مثل MS-Dos بأنظمة تشغيل تعتمد على النوافذ مثل 98 Windows، فاتجهت شركات انتاج انظمة التشغيل الى استبدال الجمل النصية برموز وصور من أجل تبسيط Simplifying واجهات هذة الانظمة.
وعلية يجب ان ندرك ان مستخدمى الحاسوب عموماً لديهم خبرة ومعرفة مسبقة بماهية الأيقونات، لماذا؟ لأن مستخدم الويب قبل ان يلج الى اي موقع فإنه يدخل الى نظام التشغيل ثم يتعامل مع بعض الايقونات ليصل الي المتصفح ومن ثم يلج الى الموقع.
ما هى الأيقونات Icons؟
الأيقونات Icons تعرف بأنها ” رسالة بصرية مبسطه تصف مهمة، برنامج، خاصية أو مفهوم، دون الحاجة الى شرحها بالكلمات”، الأيقونات ترتبط أيضا كما ذكرت سابقاً بمفهوم التبسيط Simplifying، وهذا المفهوم يتم تحقيقة بأربعة معايير:-
- الحـــــــذف:- احذف أي شئ غير مهم أو غيرضرورى.
- الإختبـــــاء:- هل هناك شئ معقد؟ خبئة.
- التنظيــــم:- رتب العناصر وفق ترتيب منطقى معين.
- الإستبدال:- استبدل الوظائف والعناصر وفق الموقف.
عند تطبيق هذة المبادئ الأربعه على اى عنصر معقد فإنه يتحول إلى عنصر بسيط.
دعنا نتخيل لو ان الأيقونات لم تخترع بعد! ماذا سيكون شكل محرر التدوينات فى نظام ادارة محتوى مثل الووربريس دون استخدام الأيقونات؟!
قبل وبعد اختراع الأيقونات
الأوامر فى كلا الصورتين واحدة، ولكن فى الصورة الأولى الأوامر ممثلة بالنصوص، والثانية ممثلة بالأيقونات والرموز، بالطبع واضح ما هو التأثير الذى ادخله استخدام الأيقونات على تصميم الواجهات للمواقع وتطبيقات الويب:
- تقليص المساحة التى تستخدمها الأوامر من واجهة إستخدام الموقع او التطبيق.
- سرعة مسح/تعرف عين المستخدم للأمر ومن ثم يحدد هل هو الأمر الذى يبحث عنه ام لا ؟
علاقة الأيقونات بقابلية إستخدام الموقع
قبل ان نحاول فهم العلاقة بين استخدام الأيقونات /الرموز وبين قابلية استخدام الموقع سنبحر قليلاً فى دراسة قام بها Peter Steen لدراسة علاقة الايقونات بقابلية الإستخدام، قام بيتر بإستخدام عدد من الأيقونات والرموز فى واجهة محرر لنظام إدارة محتوى، واستخدم رمز السلسلة او الكيبل كأيقونة للدلالة على الرابط Link …
استخدم بيتر رمز السلسلة للدلالة على الرابط Link
يقول بيتر ” لقد استخدمنا رمز السلسلة ليرشد المستخدم لكيفية ادراج رابط فى الموضوع، ببساطة سيضغط المستخدم على الأيقونه ومن ثم يدرج الرابط”.
لكن الغريب فى الأمر ان معظم المستخدمين الذين تم اختبار الواجهة عليهم لم يفهوموا معنى رمز السلسلة بل اعتقدوا انه يرمز الي ربط عنصرين معاً، فسر بيتر هذا الأمر بقولة ” لقد اعتقدنا انه من البديهى ان يفهم المستخدم ما هو معنى أيقونة السلسلة، ولكن اعتقادنا هذا كان خاطئاً لان مستخدمى الويب ليسوا جميعاً مهوسي ويب Geeks كما انهم ليسوا على نفس المستوى من الخبرة، سيفهومون ما يفهمه المطور والمصمم”.
أعاد بيتر التجربة مرة أخرى ولكن بعدما استخدم عدد اكبر من الأيقونات لكى يرمز الى عدد أكبر من الأوامر فى محرر النصوص، واستخدم ايقونتين مختلفتين ليرمز الى الرابط Link، لقد استخدم أيقونة السلسلة و أيقونة الكرة الأرضية …
استخدم بيتر عدد اكبر من الأيقونات واعاد التجربة مرة أخرى
عرض هذة الايقونات على المستخدمين وجلس بيتر يقيس مدى فهم المستخدمين لوظيفة كل ايقونة على حدة، ثم وضع النتائج فى الجدول التالى:-
نتائج نسبة فهم المستخدمين لوظائف الأيقونات
نلاحظ من النتائج ان الأيقونتين Link1 ، Link2 كانت نسبة الفهم من قبل المستخدمين لا تتجاوز ٢٥٪ وهى نسبة متدنية جداً جعلت بيتر يعيد التفكير فى ماهية الأيقونة المناسبة ليعبر عن الرابط فى واجهة المحرر الذى يصممة … فى النهاية اضطر الى عدم استخدام اى ايقونة بل استخدم الثلاث حروف الأشهر عندما نكتب رابط لأى موقع لقد استخدم WWW !!!
الدروس المستفادة
نصيحة خبير: لا تستخدم الأيقونات الا عندما تعلم جيداً مستوى زوار موقعك هل هم مستخدمون خبراء سيفهون معانى الرموز والأيقونات ام لا؟
أولاً: لا تفترض ان كل ما تفهمة انت يفهم المستخدم بدورة، هذا معتقد خاطئ تماماً، استخدام الأيقونات فى واجهات الإستخدام يفترض ان المستخدم يفهم معنى الأيقونه، هذا لا ينطبق على كل المستخدمين، انه ينطبق على المستخدمين المتمرسين على استخدام الويب وتصفح المواقع دورياً، خاصةً اذا كانت الأيقونات المستخدمة فى واجهة الموقع لم يراها المستخدم فى نظام التشغيل الذى يستخدمة.
أى الأيقونات تجدها ابسط وأقرب للإشارة إلى رئيسية الموقع؟
ثانيا: اذا قررت استخدام الأيقونات فإنه بجب عليك ان تتأكد من أن الأيقونة المستخدمة تراعى المعايير التالية:-
- ليست معقدة اكثر من اللازم، راعى معايير البساطة الأربعة ( الحذف، الإختباء، التنظيم، الإستبدال).
- تتماشى مع الفرضيات العامة والمتعارف عليها فى اوساط الويب ( أيقونة المنزل تشير الى رئيسية الموقع، أيقونة الهاتف تشير الى وسائل الإتصال بإدارة الموقع … الخ) فلا تستخدم ايقونة توصل المستخدم لمكان لا يتوقعة.
ثالثاً: اذا كنت ستضع كلمة تحت الأيقونة لتصف ما ترمز إلية الأيقونة، انصحك الا تستخدم الأيقونة بل اكتب الكلمة وفقط … مافائدة الأيقونة اذاً وضعت كلمة اسفل منها تصف ما ترمز له؟
