هل نظرت يوما الي أيقونة وعانيت لتعرف معناها ؟ المستخدمين يفعلون هذا دائما مع الايقونات التي لا يفهمون معناها او غير مالوفة لديهم. ويوجد مجموعة قليلة من الايقونات العالمية المالوفة لدي المستخدمين . ولهذا السبب يجب أن تقوم بعمل الايقونات واضحة وبديهية . واليك بعض القواعد الاساسية لتتبعها لجعل ايقوناتك واضحة وبديهية للمستخدمين.

1- قم دائما بتسمية أيقوناتك, مالم تكن المساحة محدوده.

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

في هذا المثال لا يوجد مساحة لاسماء الأيقونات, لذلك التلميحيات تساعد في توضيحها.

2- وضح دائما كلا من عمل الأيقونة والهدف منها.

لجعل الأيقونة بديهية أكثر ما يمكن , فعليك أن تتاكد ان الأيقونة توضح كلا من عملها والهدف منها .

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

واليكم مثال ممتاز لشرح ذلك : هذه صورة لطائرة ورقية لارسال بريد الكتروني . فالورقة توضح البريد الالكتروني, وهي مطوية بشكل طائرة ورقية لتوضح فعل الارسال .

أيقونة طائرة ورقية تظهر وضوح الفعل والعنصر

3- قم بترتيب الأيقونات المتشابهة معا في مجموعة واحدة.

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

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

4-حافظ علي ترتيب الأيقونات وتناسقها وتلائمها في مكانها.

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

ترتيب الأيقونات ومكانها يظل متناسق بالرغم من تغير التصميم

5- اجعل لأيقوناتك فكرة تصورية مشتركة.

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

ومثال علي تناقض الفكرة التصورية هو ايقونة عمل خط علي الكلمة في الوسط في برامج تحرير النصوص . ومعظم برامج تحرير النصوص تعرف ايقونة الخط العرض (Bold) بحرف ال (B) وايقونة الخط المائل   (italics) بحرف ال (I) وايقونة الخط اسفل الكلمة (underline ) بحرف (U) .

الأيقونات الاخري تتبع فكرة تصورية مشتركة . ولكن أيقونة خط في الوسط تختلف عنهم بعدم استخدام حرف (S)

6-تجنب استخدام الايقونات ذات المفهوم العام والتى قد تعنى أكثر من معنى.

من الافضل استخدام ايقونات للاحداث المحدده عن استخدام الايقونات ذو المفهوم العام .
فايقونات الاحداث المحدده لديك عناصر واضحة لتعرض بها حدث محدد. ومع الايقونات ذات المفهوم العام فيجب عليك التفكير في عنصر يرتبط عادة بالفعل ,وعندما تجد واحدا فانت ما زلت في خطر ان يفهموه بشكل مختلف .

وفي دراسة اجرت وجدو ان نصف المستخدمين الذين اختبروهم لم يفهموا ايقونات التراجع, العودة “undo” وايقونة فعل الشيئ ثانية “redo” . فهذه الايقونات العامة وضحت بسهم يشير الي الشمال واليمين . فهذه الاسهم يمكن أن يكون لها أكثر من معني لاي مستخدم قد راها من قبل بوظيفة مختلفة في واجهة اخري . فبدلا من استخدام الاسهم فقط في هذه الايقونة فمن الافضل استخدام اختصارات ‘undo’ و ‘redo’ , ‘Un’ و ‘Re’ مع سهم صغير يشير الي الخلف والامام .
فالاسهم لوجدها يمكن ان يكون لها أكثر من معني ولكن لو اضفت عنصر مميز يشبه الفعل, ستكون الأيقونة واضحة وبديهية .

الأسهم لوحدها يمكن أن يكون لها أكثر من معني , وبإضافة الاختصارات ‘Un’ و ‘Re’ للايقونات يوضع معناها ويسهله علي المستخدمين .

7-تجنب استخدام صور الايقونات المستعارة.

يوجد ميل لاستخدام الايقونات المستعارة عندما تكون الصور البصرية مشابهة لفعل غير متوفر .مع ذلك يمكن ان تحدث نتائج عكسية لو الصور المجازية ليست مرتبطة بالفعل الممثل . فاستخدام صورة مقص لتمثل فعل القطع “cut”سهل الفهم لان معظم الناس يربطو المقص بقطع الأشياء . ولكن استخدام صورة سلسلة مربوطة لتوضح الروابط التشعبية ليست سهلة للفهم لان معظم الناس غير قادرين علي ربطهم ببعض وفهمهم. ونفس الدراسة وجدت أن 64.71% من المستخدمين المختبرين لم يفهمو ايقونة السلسلة للروابط التشعبية.
ربما من الأفضل اختيار صورة للروابط التشعبية والتي تتبع فكرة تصورية مشتركة .فحرف ال “L” في شكل الروابط التشعبية صورة تمثل كلا من أيقونة الفعل والوظيفة . وبالطبع الحرف “L” يمثل الربط “linking” . ولتوضيح الوظيفة تم جعل حرف ال “L” باللون الأزرق وعمل خط اسفله .
ايقونة عمل خط اسفل الكلمة لديها أيضا خط اسفلها ,ولكن ما يميز أيقونة الرابط عنها هو اللون الأزرق والحرف المختلف . وتستطيع أيضا أن تزيد سماكة الخط أسفل الحرف في أيقونة الرابط لجعله أكثر تميزا واختلافا .وهذا الشكل الجديد لايقونة الرابط واضح وبديهي ومختلف عن استخدام صورة السلسلة المترابطة .

الاشخاص لا يربطو السلسلة المترابطة برابط الموقع, ولكن يربطو اللون الأزرق والخط السفلي برابط الموقع.

8- تجنب أن تكون الايقونات بها الكثير من التفاصيل المحدده.

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

السقف , المدخنة , الباب هي الخصائص الوحيدة التي تحتاجها لتخبر الأعضاء أن الأيقونة تعني منزل “home”

9- تجنب استخدام البعد الثالث والظلال الثقيلة في تصميم الايقونات الصغيرة.

استخدام البعد الثالث فى تصميم الايقونات مع ظل ثقيل يجعلها اكثر واقعية لتعزيز الاتصال البصرى.ولكن استخدامهم في الايقونات الصغيرة يمكن ان يجعل الايقونات مشوشة ومحيرة.

فالبعد الثالث افضل استخداماته في الايقونات الكبيرة والمتوسطة لان المستخدمين يستطيعون تفسير المنظور بسهولة.ولكن عندما يتم تصغيير الايقونة فان دقة البعد تبدا بالتلاشي والمستخدمين يجدوا انفسهم ينظرون للايقونة من زاوية غير مالوفة .ويفضل في تصميم الايقونات الصغيرة استخدام الاشكال المسطحة والمستقيمة . ليتعرف عليها المستخدمين من خلال شكلها المميز.

الظلال الثقيلة في الايقونات الصغيرة تربك وتحير المستخدمين . وعندما يكون الظل ثقيل جدا ,فانه يجعل الايقونة غير واقعية وغامضة. فاذا كنت تحتاج لعمل ظل لايقونتك , فيجب عليك تقليل حجمه وجعله ضيق ,فبهذه الطريقة فان الظل سيعزز الايقونة بدلا من التدخل في حدودها وشكلها .

ايقونات باحجام مختلفة . المنظور ثلاثي الابعاد والظل يجعل الايقونات تبدو اقل جمالا وتعقديا .

اجعل ايقوناتك واضحة باتباع تلك القواعد ال 9

يوجد العديد من الفوائد لاستخدام الايقونات في واجهة المستخدم :

• توفر الكثير من المساحة في عناصر التحكم الخاصة بك.

• تجعل عناصر التحكم أكثر قابلية للفهم عبر الثقافات المتعددة.

• تجعل إجراءات واجهتك أسهل للتعلم وللايجاد .

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