د.أيمن حمارشة
'تصميم واجهة المستخدم
إن الحقيقة الأساسية التي يجب أخذها ‏ بعين الاعتبار عند تطوير_ التطبيقات
(110841005ا00م) المختلفة هي أن واجهة التطبيق أهم شيء بالنسبة للمستخدم, وذلك لأن
احتياجاته المختلفة وعلى رأس هذه الاحتياجات سهولة الاستخدام إلا أنه من الملاحظ أن الكثيرين
من مطوري التطبيقات لا يعيرون اهتماما كافيا لهذا الجانب ويكون جل اهتمامهم منصبا على وضع
شفرات وأكواد "ذكية" أو تصميم نظام ألوان جذابة بدلا من التفكير في كيفية جعل التطبيق أكثر
سهولة في الاستخدام. لذلك تعتبر واجهة المستخدم الجيدة هي تلك التي تسمح للأشخاص الذين
يستخدمون التطبيق باستخدام ميزات وخصائص التطبيق دون الحاجة إلى قراءة كتيبات استخدام
(5ل1/0808). تتكون من عشرات الصفحات أو الحصول على دورات تدريب خاصة بكيفية
مما سبق يمكن القول أنه لكي تلقى الواجهة نجاحا وتصبح مرغوبة لدي المستخدم فإنه
يجب أن تتوفر فيها ميزات وخصائص منها على سبيل المثال الوضوح بحيث يفهم المستخدم بديهيا
ما عليه القيام به للوصول إلى ما يريد وهذا يحصل عندما تكون الواجهة مزودة برموز ونصوص
والتدريب على استخدام الواجهة. ولغرض الوصول إلى واجهات تتوفر فيها هذه الميزات وغيرها
فإنه يجب الالتزام ببعض القواعد وكذلك استخدام بعض التقنيات ومنها:
الاتساق أو الانسجام (لإ60175154600): وهذا يعني أن تعمل الواجهة على نفس النسق
بمعنى أن أي حدث معين يجب أن تكون له نفس النتيجة وبحيث يفهم المستخدم أن تكرار هذا
الحدث ولكن مع عنصر آخر في الواجهة سيكون له نفس الأثر. فمثلا النقر المزدوج على أيقونة
في كل مرة يتم فيها النقر المزدوج على أية أيقونة مهما كان التطبيق أو البرنامج الذي تمثله
الأيقونة. وبنفس الطريقة يجب أن تكون وظائف العناصر المتشابهة التي تظهر على الواجهة هي

د.أيمن حمارشة
نفسها, فمثلا النقر على الزرل] الموجود على شريط العنوان في أية نافذة في نظام 1/0/10008/5
يؤدي إلى إغلاق التطبيق أو البرنامج وهذا ما يجب أن يحدث عند النقر على نفس الزر في نافذة
أخرى لتطبيق آخر. هذا -طبعاد يتطلب وضع الأزرار في جميع النوافذ في نفس المكان وكذلك
ي التسميات (5ا26-) والرسائل (1/06558965) بالإضافة إلى استخدام
نفس الألوان (501161765 60107) في الأماكن المختلفة. إتباع هذه الخاصية عند التصميم يُمَكَن
المستخدم من تكوين نموذج ذهني دقيق لطريقة عمل عناصر الواجهة مما يساعد على سرعة الفهم
وضع معايير تصميم ثابتة (51380023505 179ا1/0008 561): إن الطريقة الوحيدة التي
يمكن من خلالها تحقيق خاصية الاتساق في واجهة المستخدم هي وضع معايير ثابتة للتصميم ومن
ثم إتباع هذه المعايير بدقة وخاصة تلك المعايير التي تم استخدامها سابقا في تطوير البرمجيات
بشكل عام وواجهات المستخدم بشكل خاص وهو ما يسمى نمذجة معايير التطبيق 110081109 )
في بعض الأحيان عند تطوير واجهات لبعض الأنظمة والتطبيقات يقوم أصحاب هذه
الأنظمة بتقديم بعض الأفكار والمقترحات التي قد تكون غير عادية أو ربما غير مناسبة فيما يتعلق
ي يجب أن تكون عليها هذه الواجهة أو طريقة عملها. في مثل هذه الحالة يجب الاستماع
لهذه الأفكار ولكن في الوقت نفسه يجب تقديم التوضيحات والبراهين على صواب المعايير والطرق
التي يستخدمها المطورون وأنها في نهاية المطاف تصب في مصلحة النظام أو التطبيق.
شرح قواعد الاستخدام (714165 106 817ا70): يعتبر شرح كيفية استخدام الواجهة
أهمية امتلاك
استخدام نفس الصيغة
للأشخاص الذين سوف يقومون بالتعامل مع التطبيق أمرا ضروريا. وهنا تبرز
الواجهة لخاصية الاتساق حيث أنه يمكن شرح قواعد الاستخدام مرة واحدة فقط كما أنه لا داعي
الشرح التفاصيل كلها لكونها تتكرر في أماكن عدة مما يجعل من السهل على المستخدم تعلم كيفية
التعامل مع الواجهة في وقت قصير وجهد قليل.

د.أيمن حمارشة
التنقل ‏ بين عناصر الواجهة ( 1046:7866 2ع5نا 600/660 11817193100
5))]): يجب أن يكون التنقل بين العناصر الرئيسية المكونة للواجهة سهلا وواضحا لأن
المستخدم سوف يصاب بالإحباط وربما لن يعود لاستخدام الواجهة مرة أخرى إذا كان الانتقال من
شاشة إلى أخرى صعبا مثلا. من ناحية أخرى إذا كان التنقل بين عناصر الواجهة المختلفة منسجما
مع المهمات والوظائف التي يقوم المستخدم بإنجازها فإن هذا سوف يساعد المستخدم على فهم
وإدراك خصائص التطبيق بشكل أفضل. وبما أن المستخدمين مختلفون في طريقة عملهم فإن النظام
'تطوير ما يعرف بمخطط تدفق الواجهة (01389:7811 /010ا 1116:1266 ؟56لا).
التنقل داخل الشاشة (502660 8 1]010/لا 1187/19841017): تتميز المجتمعات المختلفة
باختلاف ثقافتها وطريقتها في التعامل مع الأشياء. فالمجتمعات الغربية تختلف عن بعض
ة ومنها العربية في طريقة القراءة والكتابة مثلا, حيث نجد أن الإنسان الأوروبي
الكتابة من اليسار إلى اليمين ومن الأعلى إلى الأسفل ونجد الإنسان العربي
متعود على القراءة والكتابة من اليمين إلى اليسار ومن الأعلى إلى الأسفل, أما في الصين مثلا فهم
يكتبون ويقرؤون من الأعلى إلى الأسفل. هذا التنوع يجب أن ينعكس على الطريقة التي يتم بها
'تصميم الواجهة. فالواجهة الموجهة للاستخدام من قبل شخص أوروبي يجب أن يكون التعامل فيها
مع الاتجاهات والتنقل وكتابة التصوص منسجما مع ما تعود عليه هذا المستخدم حيث سيكون صعبا
عليه التعامل مع الاتجاه إذا كان من اليمين إلى اليسار وكذلك الأمر مع المستخدم العربي الذي تعود
على أن يكون الاتجاه من اليمين إلى اليسار أي أن التنقل داخل الشاشة يجب أن يكون بشكل
متوافق مع ثقافة المستخدم وطريقته.
كتابة الرسائل والتسميات بشكل فعال ( 9ا808ا 200 0165538065 1010لا
لا6600/8): إن الكتابة التي تظهر على الشاشة تعتبر المصدر الرئيسي للمعلومات بالنسبة
للمستخدم, لذلك يجب أن تكون طريقة كتابة التسميات والرسائل التي تُوَجُّه للمستخدم واضحة
ومفهومة وأن يتم صياغة التعبير بشكل يجعله سهل الفهم من قبل المستخدم كاستعمال الجمل
الواضحة والكلمات الكاملة بدلا من استعمال الاختصارات والرموز والجمل المبهمة. لذلك إذا كان
التعبير ضعيفا فلن يتم فهمه جيدا من قبل المستخدم, أما الرسائل التي يوجهها النظام للمستخدم

د.أيمن حمارشة
فيجب صياغتها بشكل واقعي وعلى نحو يضمن للمستخدم التحكم بشكل فعال وصحيح في العمليات
التي يريد من النظام أو التطبيق أن يقوم بها. فمثلا الرسالة التي نصها "إدخال معلومات شخصية"
لن يكون لها نفس وضوح الرسالة التي نصها "إدخال الاسم الثلاثي" حيث ستكون الرسالة الأولى
مبهمة بعض الشيء بالنسبة للبيانات التي يجب إدخالها, أما الرسالة الثانية فهي واضحة جدا
وسيقوم المستخدم بإدخل البيائات المطلوبة بشكل صحيح. بالإضافة إلى ذلك يجب أن تعرض
الرسائل باستمرار وفي مكان مناسب على الشاشة.
الفهم الصحيح لدور مكونات الواجهة (107/109615 انا 1176 010081754870ا): يقصد
بهذا أن يتم استخدام كل مكون من مكونات الواجهة على الوجه الصحيح وعلى النحو الذي يحقق
الغرض من وجود هذا المكون, لذلك يجب تعلم كيفية استخدام كل مكون وكل عنصر من خلال
معرفة الوظيفة التي يقوم بها.
دراسة واجهات أنظمة وتطبيقات أخرى (10840115ام80 انا 021187 24 ا00ا): من
المفيد أحيانا النظر بعمق إلى واجهات أنظمة وتطبيقات أخرى والاطلاع على الأفكار المستخدمة في
تصميمها ومحاولة الوصول إلى كل ما هو جديد ومبتكر ومحاولة الاستفادة من ذلك وفي الوقت
نفسه محاولة معرفة الجوائب السلبية في هذه الواجهات حتى لا يقع المصمم في نفس الخطأ مرة
أخرى عند تصميم الواجهات الخاصة به وأن لا يقوم بتقليد التصاميم الغير جيدة والغير ناجحة.
استخدام الألوان (ا20010011848 0107 58لا): تلعب الألوان دورا مهما في تصميم
الواجهات سواءً من ناحية إضفاء مسحة جمالية على الواجهة أو من خلال توظيفها في
العناصر في الواجهة. فمثلا يستخدم اللون الأحمر في تحذير المستخدم أو لفت انتباهه, ويتم اختيار
ألوان أخرى للقيام بأدوار معينة كإبراز بعض عناصر الواجهة وكذلك على تحديد وفهم الوظائف
المختلفة لعناصر الواجهة الأخرى. ومع ذلك يُنصّح بعدم الإفراط في استخدام الألوان بحيث يكون
عدد الألوان المستخدمة مناسباً وكذلك عدم استخدام الألوان المرهقة للنظر بكثرة والشيء المهم
الآخر هو أن تكون الألوان منسجمة وفي تناغم مع بعضها البعض وأن لا تُشعِر المستخدم بالنفور

د.أيمن حمارشة
إتباع قاعدة التبلين (©41ا 01743856 76 /7ا10ا0): عند استخدام الألوان في واجهة
التطبيق يجب التأكد أن الألوان لن تطغى على النص بحيث تجعله غير واضح أو غير مقروء. أفضل
طريقة لفعل ذلك هي إتباع قاعدة التباين بحيث يتم اختيار لون خط غامق في كتابة النص واختيار
خلفية فاتحة ليكتب عليها أو العكس, فالنص المكتوب بلون أزرق على خلفية بيضاء سيكون واضحا
ومن السهل قراءته في حين ستكون قراءة نفس النص لو كان على خلفية حمراء أمرا صعبا.
توقع أخطاء المستخدم (0115)8/)65 5675ل 570601 ): من المعروف أنه مهما
كانت خبرة المستخدم كبيرة في التعامل مع التطبيقات فإن الخطأً البشري الغير مقصود وارد
الحدوث. لذلك عند تصميم الواجهة يجب التفكير في استحداث الطرق التي
هذه الأخطاء كما هو حاصل مثلا عند محاولة حذف ملف حيث يقوم النظام بسؤال المستخدم لتأكيد
الأمر أو نفيه للتأكد من أن الأمر لم يصدر بطريق الخطأ.
أو تحد من وقوع
قابلية التصميم للتخمين (065190 1000148018): بكلمات أخرى إذا كان المستخدم لا
م التطبيق فالتصميم الجيد للواجهة يساعد المستخدم على توقع أو تخمين ما
يجب عليه فعله لتنفيذ شيء ماء
عزف تيفسي
الكثافة الإجمالية للشاشة ((080511 5076810 ال07818): من الصعب على المستخدم
فهم كيفية استخدام الواجهة إذا كانت الشاشة مزدحمة بالرموز والتسميات والصور المختلفة. ومن
المتعارف عليه أن نسبة إشغال الشاشة بشكل عام يجب أن لا تتجاوز 1640 من حجم الشاشة
تجميع العناصر ( 1180715 630110179): من الأمور المهمة في تصميم الواجهات هو أن
يتم تجميع العناصر التي ترتبط منطقيا مع بعضها البعض وذلك لتسهيل عملية وصول المستخدم
إليها وذلك لأنه عادة يتم استخدام هذه العناصر مجتمعة عند تنفيذ مهمة معيئة.
قابلية الواجهة للتطوير (0676100071614 الا): عند تصميم الواجهة يجب الأخذ بعين
الاعتبار إمكائية تطوير هذه الواجهة مستقبلا وذلك لتلبية احتياجات المستخدم التي قد تنش لاحقا.

د.أيمن حمارشه
مبادئ تصميم واجهة المستخدم
من أجل الوصول إلى تصميم جيد وناجح لواجهة المستخدم يراعي القواعد والتقنيات
السابق ذكرها فإن على المصممين إتباع بعض المبادئ المهمة ومن أهمها:
1. الهيكلية (©01100101 540101076 1116): وهذا يعني تنظيم واجهة المستخدم بشكل
هادف وبطرق مجدية ومفيدة مبنية على أساس نماذج واضحة ومتسقة بحيث تكون هذه
النماذج مرئية يمكن للمستخدم تمييزها بسهولة, كما ينبغي وضع الأشياء التي ترتبط مع
بعضها البعض في مجموعات وفصل الأشياء التي لا ترتبط مع بعضها. بشكل عام يمكن القول
بمعمارية واجهة المستخدم 8101111620176 1116:1266 ٠56لا‏ .
2. البساطة (011001018 5107010127 1116): حيث يجب أن يجعل التصميم المهمات
سهلة في الفهم والتنفيذ وأن يسهل عملية التواصل مع المستخدم وذلك من خلال التعامل مع
هذا المستخدم باللغة التي يفهمها وبالطريقة التي يفضلها. من الأمثلة على ذلك توفير طرق
مختصرة 51101101445 تسهل عملية الوصول إلى تطبيقات 80011084015 وإجراءات
3. الرؤية أو الشفافية (©ام011001 /0اآ0ا5آلا 1176): ينبغي على التصميم الجيد إبقاء
جميع الخيارات والموارد المطلوبة لتنفيذ مهمة معيئة مرئية وواضحة أمام المستخدم وفي
الوقت نفسه عدم تشتيت المستخدم بمعلومات غريبة وزائدة عن الحاجة. التصاميم الجيدة هي
تلك التي لا تقدم للمستخدم كم هائل من المعلومات البديلة ولا تخلط المعلومات الضرورية
بالمعلومات التي لا يحتاجها المستخدم في تنفيذ المهمة الآنية.
. التغذية المرتدة (©1م0101001 1660032 1116): حيث يجب على التصميم العمل
على أن يبقى المستخدم على علم بجميع الإجراءات والتفسيرات المتعلقة بالمهمة المطلوب
تنفيذها وذلك عن طريق تزويده وبشكل مستمر بكاقة المعلومات المتعلقة بالتغيرات والشروط
الجديدة التي قد تحدث أثناء التنفيذ وكذلك الأخطاء والاستثئاءات ذات الصلة بالعملية والتي تهم

د.أيمن حمارشة
5. السماح (8ا00107610 101672068 1116): أي أن يكون التصميم مرنا بحيث يقلل من
قيمة الأخطاء التي قد تحدث بسبب قلة خبرة المستخدم أو سوء استخدامه لموارد التطبيق وذلك
من خلال السماح له بالتراجع وإعادة الأمر مرة أخرى ومنع حدوث الأخطاء إذا أمكن.
6. إعادة الاستخدام (011001018 761156 1776): عندما يجعل التصميم المستخدم قادرا
على إعادة استخدام مكونات الواجهة وعناصرها المختلفة فإن هذا يقلل من حاجة المستخدم
للتذكر أو التفكير.

د.أيمن حمارشة
نماذج واجهة الاستخدام
يعتبر استخدام النماذج من أهم التقنيات المستخدمة في تصميم واجهات المستخدم وذلك
لأنها تمنح المصمم إمكانية إنشاء أكثر من نموذج لنفس الواجهة ومن ثم دراسة وتحليل الجوانب
المختلفة لكل نموذج من هذه النماذج من خلال إضافة أو حذف المكونات والعناصر المختلفة وصولا
المصمم تصورا أوليا عن واجهة المستخدم التي سوف يتم إنشاؤها, لذلك تعتبر هذه النماذج
الأساس النظري أو يمكن القول أنها الخطوة الأولى والمهمة التي يبدا منها تصميم وتطوير واجهة
المستخدم الحقيقية.
6605ل 010106 | _تحديد الاحتياجات
عم بجاعام عائظ بناء النموذج
301017026 2/2216 | تقييم النموذج
انتهاء
الشكل (1) خطوات إنشاء نموذج أولي لواجهة المستخدم

د.أيمن حمارشة
الشكل المبين أعلاه يُظهر خطوات عملية إنشاء نموذج واجهة المستخدم وكما هو واضح
فإن أولى هذه الخطوات هي تحديد المتطلبات (1416605 06461071176)_وهذا يعني تحليل
الواجهة من حيث تحديد متطلبات واحتياجات المستخدم وما يريده بالضبط من هذه الواجهة. ويقصد
شركة هاتف نقال يختلف في وظائفه ومهامه عن التطبيق المستخدم كمحرك بحث على الانترنت
وهذان يختلفان عن نظام الحجوزات المصمم لفندق سياحي وهكذا. وبالتالي فإن تصميم واجهة
الاستخدام في كل حالة من الحالات التي ورد ذكرها يجب أن يراعي البيئة والظروف والمهام التي
يجب على التطبيق القيام بها ليكون ذلك على أكمل وجه وفي أحسن صورة.
الشكل (2) مخطط تحديد المتطلبات
في الوقت الذي يتم فيه تحديد الاحتياجات يتم أيضا إنشاء ما يعرف بالنماذج الأولية
لواجهة المستخدم (51301017/065 104611306 :56لا ل55561088) والتي تكون على شكل
مخططات ورسومات تجريبية أو مسودات (5/6620065) تظهر عليها الملامح الأولوية والعناصر