Lec3.pdf

‫تصميم واجهات المستخدم‬ ‫‪Lecture 3‬‬ ‫‪1‬‬  ‫أساليب التفاعل‬ ‫‪Interaction Styles‬‬ ‫ في ما يلي أنواع أو أساليب التفاعل المستعملة‪ ،‬و يعتمد اختيار‬ ‫األسلوب على نوع المستخدمِ والمه ّمة التي يريد القيام بها‪.‬‬...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 3‬‬ ‫‪1‬‬  ‫أساليب التفاعل‬ ‫‪Interaction Styles‬‬ ‫ في ما يلي أنواع أو أساليب التفاعل المستعملة‪ ،‬و يعتمد اختيار‬ ‫األسلوب على نوع المستخدمِ والمه ّمة التي يريد القيام بها‪.‬‬ ‫ أساليب التفاعل هي‪:‬‬ ‫لغة األوامر ‪.command language‬‬ ‫‪.1‬‬ ‫ملء االستمارات ‪.form fill-in‬‬ ‫‪.2‬‬ ‫اختيار القائمة ‪.menu selection‬‬ ‫‪.3‬‬ ‫المعالجة المباشرة ‪.direct manipulation‬‬ ‫‪.4‬‬ ‫اللغة الطبيعية ‪.Natural language‬‬ ‫‪.5‬‬ ‫لغة االستفسار ‪ Query language‬أو أسلوب سؤال ‪ /‬جواب‬ ‫‪.6‬‬ ‫‪Question/answer‬‬ ‫‪2‬‬  ‫أساليب التفاعل‬ ‫‪Interaction Styles‬‬ ‫‪ -1‬لغة األوامر ‪(Command Language‬أو إدخال األوامر)‬ ‫– أسلوب لغة األوامر هو الطريقة المباشرة التي يتم عن طريقها‬ ‫تجسيد األوامر إلى الحاسوب ‪.‬يمكن أن يكون مفاتيح وظيفة‬ ‫‪function keys‬أو حروفاِ ‪ characters‬أو إختصارات‬ ‫‪ abbreviations‬قصيرة أو كلمات كاملة‪ ،‬أو مزيجاِ من كل ذلك‪.‬‬ ‫‪3‬‬  ‫مزايا وعيوب أسلوب لغة األوامر‬ ‫‪advantages and disadvantages‬‬ ‫ الميزات ‪advantages‬‬ ‫أسلوب مناسب للمهام التكرارية ‪.repetitive tasks‬‬ ‫‪.1‬‬ ‫يناسب المستخدمين الخبراء أكثر من المبتدئين‪.‬‬ ‫‪.2‬‬ ‫يوفّر الوصول المباشر لوظائف النظام المرنة‪.‬‬ ‫‪.3‬‬ ‫المعرفة من قبل المستخدم ‪macros‬‬ ‫ّ‬ ‫تسهل عملية إنشاء االختصارت‬ ‫‪.4‬‬ ‫‪.user-defined‬‬ ‫مناسبة للتفاعل مع شبكات الحواسيب حتى مع انخفاض عرض‬ ‫‪.5‬‬ ‫النطاق الترددي ‪.low bandwidth.‬‬ ‫استخدام واجهات األوامر شائع للكتابة في شبكة اإلنترنت ‪web‬‬ ‫‪.6‬‬ ‫‪scripting‬‬ ‫‪4‬‬  ‫مزايا وعيوب أسلوب لغة األوامر‬ ‫‪advantages and disadvantages‬‬ ‫ العيوب ‪disadvantages‬‬ ‫لغةِاألوامرِتضعِعبئاِإدراكياِكبيراِعلىِالمستخدمِألنِهذاِاألسلوبِفيِالتفاعلِ‬ ‫‪.1‬‬ ‫يعتمدِعلىِالتذكرِوِاالسترجاعِ‪ recall‬بدالِمنِالتمييزِ‪. recognition‬‬ ‫العددِالكبيرِمنِاألوامرِوِالخياراتِوِالمتغيراتِِالتيِيجبِحفظهاِعنِظهرِ‬ ‫‪.2‬‬ ‫قلب‪ِ،‬والِيوفرِالنظامِِأيِمساعدةِللمستخدمِفيِمهمةِاسترجاعِأسماءِاألوامر‬ ‫منِالذاكرة‪.‬وهذهِالمهمةِليستِسهلةِألنِالعديدِمنِاألوامرِمختصرة‪.‬‬ ‫القدرةِعلىِاالحتفاظِ ‪ retention‬باألوامرِفيِالذاكرةِعموماِضعيفةِجداِ‪.‬‬ ‫‪.3‬‬ ‫قابليةِتعلمِ ‪ learnability‬االوامرِسيئةِللغاية‪.‬‬ ‫‪.4‬‬ ‫معدالتِالخطاِِ ‪ error rates‬مرتفعة‪.‬‬ ‫‪.5‬‬ ‫صعوبةِتوفيرِرسائلِالخطأ ‪ error messages‬والمساعدةِ ‪ help‬بسببِتنوعِ‬ ‫‪.6‬‬ ‫االحتماالت‪ِ،‬باالضافةِإلىِتعقيدِوضعِالمهامِمعِمفاهيمِالواجهةِوالتركيب‪.‬‬ ‫الِيصلحِلغيرِالخبراءِمنِالمستخدمين‪.‬‬ ‫‪.7‬‬ ‫‪5‬‬  ‫ملء االستمارات‬ ‫‪Form Fill-in‬‬ ‫‪ -2‬ملء االستمارات ‪Form Fill-in‬‬ ‫– أسلوب ملء اإلستمارات (ويسمى أيضا ملء الفراغات) يستهدف‬ ‫مجموعة مختلفة من المستخدمين من اولئك الذين يستهدفهم‬ ‫أسلوب لغة األوامر‪ ،‬وهم غير الخبراء من المستخدمين‪.‬‬ ‫– عند ظهور واجهات ملء االستمارات ألول مرة‪ ،‬كانت كل‬ ‫الواجهة في شكل استمارة ‪ ،form‬على عكس الكثير من الواجهات‬ ‫الموجودة اليوم و التي تعتبر خليط من أساليب التفاعل المختلفة‪.‬‬ ‫‪6‬‬  ‫مزايا وعيوب أسلوب ملء االستمارات‬ ‫ مزايا وعيوب أسلوب ملء االستمارات‬ ‫ فيما يلي بعض النقاط التي تبين مزايا وعيوب أسلوب ملء االستمارات‬ ‫ الميزات ‪advantages‬‬ ‫– يبسط عملية إدخال البيانات‪.‬‬ ‫صر عملية التعلُّم ألن الحقول ‪fields‬محددة سلفا‪ ،‬ومن السهل التعرف‬ ‫– يق ّ‬ ‫عليها و تمييزها‪.‬‬ ‫– تو ّجه المستخدم من خالل قواعد محددة سلفا‪.‬‬ ‫ العيوب ‪disadvantages‬‬ ‫– تشغل االستمارات مساحة من كبيرة الشاشة‪.‬‬ ‫– يجعل أسلوب ملء االستمارات عملية إدخال المهام التجارية عملية جامدة‬ ‫‪.rigid‬‬ ‫‪7‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫‪ -3‬اختيار القوائم ‪Menus Selection‬‬ ‫– القائمة ‪Menu‬هي مجموعة من الخيارات المعروضة على الشاشة‪،‬‬ ‫عند إختيار وتنفيذ واحد أو أكثر من هذه الخيارات ينتج تغيير في حالة‬ ‫الواجهة‪.‬‬ ‫– في النظام الذي يقوم على اختيار القائمة‪ ،‬يختار المستخدم‬ ‫أمر ‪command‬محدداِ من مجموعة األوامر المرتبة في القوائم‬ ‫ويالحظ تأثير هذا االختيار‪.‬‬ ‫– اذا كانت التسميات على القوائم ‪ /‬األوامر مفهومة (ومجمعة جيدا) يمكن‬ ‫للمستخدمين إنجاز مهامهم دون الحاجة الي التعلّم ‪learning‬أو التّذكر‬ ‫‪ memorization‬ألن إيجاد األمر‪ /‬القائمة يعتمد على التمييز‬ ‫‪ recognition‬و ليس على التذكر و اإلسترجاع ‪ recall‬من الذاكرة‪.‬‬ ‫‪8‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫ هياكل و طرق تصفّح القوائم‬ ‫‪menu structures and navigation‬‬ ‫– هيكل العمق ‪structure depth‬‬ ‫العمق يوفر‪:‬‬ ‫ ‬ ‫أقل اكتظاظ على القوائم‪.‬‬ ‫ ‬ ‫يتم مسح ‪scan‬خيارات أقل‪.‬‬ ‫ ‬ ‫أسهل الختفاء الخيارات غير المتوفرة‪.‬‬ ‫ ‬ ‫من غير المحتمل أن تعرض الخيارات المتشابهة سوية‪.‬‬ ‫ ‬ ‫– هيكل العرض ‪structure breadth‬‬ ‫ العرض يوفر‪:‬‬ ‫ خطوات أقل‪ ،‬و زمن وصول أقصر‪.‬‬ ‫ سهولة التعلّم ألن العالقات تكون مرئية للمستخدم‪.‬‬ ‫‪9‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫ع‬ ‫م‬ ‫ق‬ ‫عرض‬ ‫مست ويات متعددة‬ ‫إختيارات متعددة في المستوى الواحد‬ ‫الشكل يوضح هياكل القوائم‪.‬‬ ‫‪10‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫أنواع القوائم ‪types of menus‬‬ ‫ ‬ ‫القوائم المس ّطحة ‪Flat menus‬‬ ‫ ‬ ‫هذا النوع من القوائم جيّد في عرض عدد صغير من الخيارات‬ ‫ ‬ ‫إن حجم شاشة العرض صغير‪،‬‬ ‫في فترة زمنية قصيرة حيث‪ِّ ،‬‬ ‫ومثال على ذلك شاشة جهاز ‪ iPods‬المستخدم لسماع الموسيقى‪.‬‬ ‫انظر الشاشة المبينة في الشكل التالى‪.‬‬ ‫لكن تراكم قوائم الخيارات بعضها ببعض يجعل الوصول إلى‬ ‫ ‬ ‫الخيار المطلوب بالقائمة يتطلّب ع ّدة خطوات‪ ،‬و أيضا يجعل‬ ‫عملية االنتقال خالل الشاشات مضجرة‪.‬‬ ‫‪11‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫نموذج لقائمة ‪ iPod‬المسطحة‬ ‫‪12‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫سعة ‪Expanding menus‬‬ ‫القوائم المتو ّ‬ ‫ ‬ ‫تم ّكن من عرض خيارات أكثر على شاشة واحدة‪.‬‬ ‫ ‬ ‫يتميز هذا النوع بمرونة أكثر في التصفّح‪ ،‬إذ يسمح إلختيار‬ ‫ ‬ ‫سعة‬ ‫الخيارات بأن يتم في نفس النافذة‪.‬وأكثر أنواع القوائم المتو ّ‬ ‫انتشاراِ هي القوائم المتعاقبة ‪.menus cascading‬‬ ‫الشكل التالى يوضح طريقة القوائم المتعاقبة‪.‬الحظ مستويات‬ ‫ ‬ ‫القوائم‪ ،‬أساسية وثانوية و ثالثية و رباعية المستوى‪.‬‬ ‫من عيوب هذه األسلوب أن كثرة المستويات تستلزم تحكماِ دقيقاِ‬ ‫ ‬ ‫بالفأرة و قد يؤ ّدي هذا إلى اختيار الخيارات الخاطئة أحياناِ‪.‬‬ ‫‪13‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫الشكل يوضح أسلوب القوائم المتعاقبة بمستوياته المتسلسلة‬ ‫‪14‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫القائمة المنسدلة ‪Pull-Down Menu‬‬ ‫ ‬ ‫القائمة المنسدلة هي قائمة لالختيار وهي ال تظهر عادة وال يتم‬ ‫ ‬ ‫عرض البنود الخاصة بها اال عند الضغط على العنوان أو النقر‬ ‫بواسطة المؤشر‪.‬‬ ‫القائمة المنبثقة ‪Pop-up‬‬ ‫ ‬ ‫تظهر القائمة المنبثقة عند النقر على منطقة معيّنة من الشاشة أو‬ ‫ ‬ ‫أيقونة‪.‬‬ ‫مثال على ذلك القائمة التي تظهر عند النقر على الجزء األيمن‬ ‫ ‬ ‫من الفأرة ‪ right click‬في سطح المكتب ‪ desk top‬في نظام‬ ‫التشغيل ويندوز‪.‬‬ ‫‪15‬‬  ‫اختيار القوائم‬ Menus Selection Types of Menus ‫أنواع القوائم‬ File Edit View Insert Format Help New Open Menu bar Close Cascading Save Menu Save As Cut Send to > My Document… Copy My File... Paste Pop-up Pull-down Menu Menu ‫أنواع القوائم المختلفة‬ 16  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫القائمة المنبثقة من سطح المكتب في نظام التشغيل ويندوز‪.‬‬ ‫‪17‬‬  ‫اختيار القوائم‬ ‫‪Menus Selection‬‬ ‫ مزايا وعيوب إسلوب اختيار القائمة‬ ‫ الميزات ‪advantages‬‬ ‫أسلوب اختيار القائمة هو أسلوب مثالي للمستخدمين المبتدئين‪.‬يمكن جذب الخبراء‬ ‫–‬ ‫من المستخدمين عند استخدام آليات سريعة لالختيار مثل إستخدام االختصارات‬ ‫‪.shortcuts‬‬ ‫يتيح عملية االستكشاف‪ ،‬إذ تم ّكن المستخدمين من النظر في القوائم الختيار األمر‬ ‫–‬ ‫المناسب للمهمة دون االضطرار الى تذكر اسم األمر و طريقة كتابته إمالئيا كما هو‬ ‫الحال عند استخدام أسلوب لغة األوامر‪.‬‬ ‫يوفر الدعم للمستخدم‬ ‫–‬ ‫من السهل معالجة االخطاء‪.‬‬ ‫–‬ ‫ العيوب‬ ‫– العدد الكبير من القوائم قد يؤدي الى تعقيد المهام‪.‬‬ ‫– قد يجد الخبراء من المستخدمين أسلوب القوائم بطئاِ‪.‬‬ ‫‪18‬‬  ‫المعالجة المباشرة‬ ‫‪Direct Manipulation‬‬ ‫‪ -4‬المعالجة المباشرة ‪Direct Manipulation‬‬ ‫– مصطلحِالمعالجةِالمباشرةِِفيِتصميمِالواجهاتِيستخدمِلوصف‬ ‫اسلوبِالتفاعلِ'المباشر' أوِالتعاملِالمباشرِمعِالكينوناتِ‪objects‬‬ ‫فيِالبرمجيات‪.‬‬ ‫– الشكلِِالتالىِشاشةِتوضحِمنهجِالمعالجةِالمباشرةِالمستخدمِفيِشاشةِ‬ ‫نافذةِاستكشافِالملفاتِ‪ File Explorer‬فيِنظامِ‪.Windows‬‬ ‫ تتميزِواجهاتِالمعالجةِالمباشرةِبالخصائصِالتاليةِ‪:‬‬ ‫– إمكانيةِرؤيةِالكينوناتِالمرادِالتعاملِمعها‪.‬‬ ‫– تنفيذِاإلجراءاتِيكونِتدريجياِوِسريعاِِوِيمكنِعكسه‪.‬‬ ‫– استبدالِلغةِاألوامرِالمعقدةِالتركيبِبالتعاملِالمباشرِمعِاألشياء‪.‬‬ ‫‪19‬‬  ‫المعالجة المباشرة‬ ‫‪Direct Manipulation‬‬ ‫شاشة توضح منهج المعالجة المباشرة‪ ،‬نافذة استكشاف الملفاات ‪ File Explorer‬فاي نظاام ‪Windows‬‬ ‫‪.‬‬ ‫‪20‬‬  ‫المعالجة المباشرة‬ ‫‪Direct Manipulation‬‬ ‫ ميزات وعيوب المعالجة المباشرة‬ ‫ الميزات ‪:advantages‬‬ ‫يعرض المفاهيم المهمة بصريا‪.‬‬ ‫–‬ ‫سهل التعلم‪.‬‬ ‫–‬ ‫يمكن تجنب األخطاء بسهولة أكبر‪.‬‬ ‫–‬ ‫تشجع االستكشاف‪.‬‬ ‫–‬ ‫يعتمد على التمييز على عكس أسلوب األوامر الذي يعتمد على التلقين أو التذكر‬ ‫–‬ ‫ العيوب‪:‬‬ ‫– قد تكون صعبة البرمجة أحياناِ‪.‬‬ ‫– ليست مناسبة لشاشات العرض الصغيرة‪.‬‬ ‫– االستعارات أو المجاز ‪ metaphors‬يمكن أن تكون مضللة إذا مااختلفت عما تمثله‪.‬‬ ‫‪21‬‬  ‫واجهات المستخدم الرسوماتية‬ ‫‪GUI Graphical User Interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫‪GUI Graphical User‬‬ ‫واجهة المستخدم الرسوماتية‬ ‫ ‬ ‫‪ Interface‬هي نوع من أنواع واجهات المستخدم‪ ،‬والتي تتيح‬ ‫لإلنسان التفاعل مع الحاسوب‪.‬‬ ‫فبدال من تقديم قوائم نصية فقط أو أوامر تتطلب الطباعة‪،‬‬ ‫ ‬ ‫واجهات المستخدم الرسوماتية تتيح إستخدام أسلوب المعالجة‬ ‫المباشرة‪.‬‬ ‫آلية التفاعل االساسية هي أداة اإلشارة ‪. pointing device‬‬ ‫ ‬ ‫اداة اإلشارة هي المعادل االلكتروني ليد اإلنسان‪.‬يتفاعل‬ ‫ ‬ ‫المستخدم مع مجموعة من العناصر تعرف بالكينونات ‪.objects‬‬ ‫‪22‬‬  ‫واجهات المستخدم الرسوماتية‬ ‫‪GUI Graphical User Interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫هذه الكينونات دائما مرئية للمستخدم ‪ ،‬وتستخدم ألداء المهام‪.‬‬ ‫ ‬ ‫يقوم المستخدم بأداء عمليات و تعرف باإلجراءات ‪ action‬على هذه‬ ‫ ‬ ‫الكينونات‪.‬‬ ‫وتشمل اإلجراءات عمليات مثل الوصول ‪ accessing‬والتعديل‬ ‫ ‬ ‫‪modifying‬و اإلشارة إلى األشياء ‪ pointing‬واالختيار ‪.selecting‬‬ ‫و تستخدم واجهات المستخدم الرسوماتية األيقونات ‪graphical icons‬‬ ‫ ‬ ‫و المؤشرات البصرية ‪visual indicators‬و عناصر رسومية أخرى‬ ‫تسمى القطع ‪.widgets‬‬ ‫وغالبا ما تستخدم األيقونات جنبا إلى جنب مع النص ‪ text‬أو العالمات‬ ‫ ‬ ‫‪ labels‬لتمثيل المعلومات واتخاذ اإلجراءات المتاحة للمستخدم‪.‬‬ ‫و تؤدي اإلجراءات خالل المعالجة المباشرة للعناصر الرسومية‪.‬‬ ‫ ‬ ‫‪23‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫ النوافذ ‪Windows‬‬ ‫النافذة هي‪ :‬المساحة التي تعرض المعلومات على الشاشة‪ ،‬تعرض محتوياتها بشكل‬ ‫–‬ ‫مستقل عن بقية الشاشه‪.‬‬ ‫من السهل على المستخدم التعامل مع النافذة ‪ :‬فيمكن فتحها واغالقها بالنقر ‪click‬‬ ‫–‬ ‫على أيقونة ‪ icon‬أو تطبيق‪ ،‬و يمكن نقلها إلى اي منطقة بسحبها ‪dragging‬‬ ‫(بالنقر في منطقة معينة من النافذة عادة على شريط العنوان في أعلي النافذة مع‬ ‫الضغط على زر أداة اإلشارة ثم تحريك أداة االشارة)‪.‬‬ ‫يمكن وضع النافذة أمام او خلف نافذة أخرى‪.‬‬ ‫–‬ ‫كما يمكن تعديل حجمها‪ ،‬و يمكن استخدام شريط التمرير ‪scrollbar‬للتنقل داخل‬ ‫–‬ ‫أقسامها‪.‬‬ ‫يمكن أيضا فتح نوافذ متعددة ‪Multiple windows‬في وقت واحد‪ ،‬وفي هذه‬ ‫–‬ ‫الحالة يمكن لكل نافذة عرض تطبيق أو ملف مختلف‪.‬‬ ‫و يفيد ذلك عند العمل في بيئة متعددة المهام ‪.multitasking environment‬‬ ‫–‬ ‫‪24‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫ هناك العديد من أنواع النوافذ المتخصصة منها‪:‬‬ ‫– نافذة المتصفح ‪browser window‬تسمح للمستخدم بالتحرك‬ ‫إلى األمام وإلى الوراء من خالل سلسلة من الوثائق أو صفحات‬ ‫الويب ‪.web pages‬متصفحات الويب ‪ Web browsers‬هي‬ ‫مثال على هذه األنواع من النوافذ‪.‬انظر الشكل التالى لمتصفح‬ ‫الويب ‪ Internet Explorer‬من مايكروسوفت‪.‬‬ ‫‪25‬‬ ‫عناصر واجهات المستخدم الرسوماتية‬ Components of graphical user interfaces (Windows, Icons, Menus, Pointing- WIMP) ‫متصفح الويب من مايكروسوفت‬ 26  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫– النوافذ الطرفية ‪Terminal windows‬مصممة لترسيخ التفاعل مع‬ ‫واجهات المستخدم النصية ‪ text user interfaces‬داخل الواجهة‬ ‫الرسوماتية الكليّة‪.‬شاشات أنظمة التشغيل ‪DOS‬و ‪ UNIX‬هي أمثلة‬ ‫على هذه النوع من النوافذ‪.‬‬ ‫– النافذة الصغيرة ‪child window‬تفتح تلقائيا أو نتيجة لنشاط المستخدم‬ ‫في نافذة من النوافذ الرئيسية (الوالدين) ‪.parents window‬مثال‬ ‫على هذا النوع من النوافذ هو النوافذ المنبثقة على اإلنترنت‪.‬‬ ‫– نافذة الرسالة ‪message window‬أو صندوق الحوار ‪dialog box‬‬ ‫هو نوع من أنواع النوافذ الصغيرة‪.‬و هي عادة نافذة صغيرة وأساسية‬ ‫تفتح بواسطة البرنامج لعرض معلومات إلى المستخدم و‪ /‬أو للحصول‬ ‫على المعلومات من المستخدم‪.‬و عادة ما يكون لها زر يجب أن يدفع‬ ‫للسماح للبرنامج بمواصلة العمل‪.‬‬ ‫‪27‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫ األيقونات ‪Icons‬‬ ‫– األيقونة هي صورة رسومية ‪ ،graphical image‬هي صورة‬ ‫صغيرة تمثل ملفاِ أو برنامجاِ أو صفحة ويب أو أمراِ‪.‬‬ ‫– األيقونة هي طريقة سريعة لتنفيذ األوامر و فتح الوثائق وإدارة‬ ‫البرامج‪.‬‬ ‫– االيقونات ايضا مفيدة عند البحث عن غرض في متصفح الويب‬ ‫‪ ،web browser‬ألنه في كثير من نظم التشغيل جميع الوثائق‬ ‫التي لها نفس االمتداد ‪ extension‬يكون لها نفس األيقونة‪.‬‬ ‫‪28‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫بعض من األيقونات المستخدمة في نظام ويندوز و متصفح الويب‬ ‫‪29‬‬  ‫عناصر واجهات المستخدم الرسوماتية‬ ‫‪Components of graphical user interfaces‬‬ ‫)‪(Windows, Icons, Menus, Pointing- WIMP‬‬ ‫ القوائم ‪Menus‬‬ ‫– القوائم تسمح للمستخدم لتنفيذ األوامر عن طريق االختيار من قائمة بها خيارات‪.‬يتم‬ ‫االختيار عن طريق الفأرة او غيرها من أدوات اإلشارة داخل ‪.GUI‬ويمكن أيضا‬ ‫استخدام لوحة المفاتيح‪.‬القوائم مريحة ألنها تظهر كل االوامر المتاحة داخل‬ ‫البرمجيات‪.‬وهذا يقلل من كمية الوثائق التي يجب أن يقراءها المستخدم لفهم‬ ‫البرمجيات‪.‬‬ ‫ المؤشرات ‪Pointers‬‬ ‫– من العناصر األكثر شيوعا في واجهة المستخدم الرسوماتية هي المؤشر و هي‬ ‫صورة رسومية على الشاشة تشير إلى مكان وجود جهاز اإلشارة ‪pointing‬‬ ‫‪ ،device‬ويمكن استخدامها الختيار األشياء وتحريك األوامر التي تظهر على‬ ‫الشاشة‪.‬المؤشر عادة ما يبدو على شكل سهم له زاوية ‪ ،angled arrow‬ولكن‬ ‫يمكن أن يختلف في الشكل باختالف البرامج أو أنظمة التشغيل‪.‬ومن األمثلة على‬ ‫يتحول المؤشر إلى شكل قفاز ممتد مع‬ ‫ّ‬ ‫ذلك في متصفحات الويب ‪web browsers‬‬ ‫مؤشر اصبع عند مروره من فوق الرابط ‪.hyperlink‬الشكل التالى يبين أشكاالِ‬ ‫مختلفة من المؤشرت‪.‬‬ ‫‪30‬‬ ‫عناصر واجهات المستخدم الرسوماتية‬ Components of graphical user interfaces (Windows, Icons, Menus, Pointing- WIMP) ‫الشكل يبين أشكال مختلفة من المؤشرت‬ 31