You are on page 1of 32

‫معايير تصميم واجهات التفاعل مع‬

‫المستخدم فى البرمجيات التعليمية‬

‫‪1‬‬

‫عناصر البحث‬
‫ مفهوم واجهات التفاعل‬‫) الستخدام (‪/‬الشاشات‪.‬‬
‫ أنواع واجهات التفاعل‬‫)الستخدام (‪/‬الشاشات‪.‬‬
‫ مفهوم تصميم واجهة التفاعل‪.‬‬‫ العتبارات التي يجب مراعاتها عند تصميم‬‫واجهات التفاعل ‪ /‬الشاشات ‪0‬‬
‫ أسس ومعايير تصميم واجهات التفاعل‪/‬‬‫الشاشات ‪.‬‬

‫‪2‬‬

‫أول ‪ :‬مفهوم واجهات التفاعل‬
‫) الستخدام (‪/‬الشاشات‪.‬‬
‫واجهة التفاعل مع المستخدم "‪ "UI‬والتى تسمى أيضا " واجهة‬
‫تفاعل الكمبيوتر مع المستخدم" تمثل الحدود بين المستخدم ونظام‬
‫الكمبيوتر‪ .‬حيث يتفاعل المستخدم سواء كان شخصا أو مجموعة أشخاص‬
‫مع الكمبيوتر بشقيه اللة والبرنامج‪ .‬يتم هذا التفاعل من خلل قنوات‬
‫التصال‪.‬‬
‫وتنقسم واجهة التفاعل إلى شقين‪ :‬شق منطقى وآخر محسوس‪ .‬يتعلق‬
‫الشق المنطقى بالمنطق الذى يتفاعل به البرنامج مع المستخدم‪ .‬أما‬
‫الشق المحسوس فيتعلق بكل ما يرى أو يسمع أثناء التفاعل مع الكمبيوتر‪.‬‬
‫وقد ظهر مصطلح واجهة التفاعل الرسومية "‪ "GUI‬فى بادئ المر قبل‬
‫التوجه إلى الوسائط المتعددة وتوظيفها فى التعليم‪ .‬ويؤثر التصميم‬
‫البصرى لواجهة لتفاعل على انطباع الدارس نحو البرنامج‪ ،‬ومدى فهمه له‬
‫ورغبته فى استخدامه‪ .‬ويضم التصميم البصرى جميع العناصر المرئية فى‬
‫واجهة التفاعل مثل تنظيم الشاشة ‪ ،Screen Layout‬وعرض المعلومات‪،‬‬
‫وتقديم التعليمات المرئية‪(Lucas, 1991 : 56) .‬‬
‫وقد ركزت كثير من البحوث والدراسات على تصميم الطر ووضعت لذلك‬
‫عدة معايير مثل التساق‪ ،‬والتوازن‪ ،‬والتجانس‪ ،‬وراحة المستخدم فى‬
‫تفاعله مع البرنامج ‪ Ergonomics‬ويتصل ذلك بما يسمى )هندسة‬
‫الستخدام ‪ .(Usability Engineering‬وقد أصدرت المنظمة الدولية للتوحيد‬
‫القياسى ‪ ISO‬معيارا أطلق عليه ‪ ISO 9241‬والمتعلق براحة المستخدم‬
‫أثناء تفاعله مع العناصر المرئية فى شاشة الكمبيوتر‪(Perlman, 2002 : 2) .‬‬
‫ونستعرض فيما )عمرو جلل( يلى المبادئ والقواعد الساسية لتنظيم‬
‫*‬
‫محتوى الطار‬

‫‪-‬‬

‫البساطة ‪ :Simplify‬من أكثر المبادئ شيوعا فى تصميم واجهات‬
‫التفاعل مبدأ البساطة‪ ،‬ويشير إلى تفضيل التصميم البسيط فى‬
‫أى عنصر من عناصر واجهة التفاعل‪.‬‬

‫‪-‬‬

‫إتاحة قدر كاف من المساحات الفارغة ‪ :Blank Spaces‬والتى ل‬
‫تكلف المبرمج شيئا بعكس المواد المطبوعة بل تساعد على‬
‫وضوح باقى العناصر المستخدمة فى الطار‪.‬‬

‫‪-‬‬

‫اتزان عناصر الطار‪ :‬ويتعلق مبدأ التزان بتوزيع العناصر داخل‬
‫الطار مع مراعاة المساحات الفارغة‪ .‬ويجب التنبيه إلى انه ليس‬

‫* يستخدم مصطلح إطار كمرادف لمصطلح الشاشة‪ ،‬واستخدم البحث مصطلح إطار حتى ل يتم الخلط‬
‫بين مسمى الشاشة ‪ Screen‬بمسمى آخر وهو ‪ Monitor‬وهو بعيد كل البعد عن واجهات التفاعل‪ .‬كما أن‬
‫مصطلح إطار هو الكثر شيوعا فى التطبيقات التربوية‪.‬‬

‫‪3‬‬

‫‪1- -‬‬

‫‪2- -‬‬

‬‬ ‫شكل يوضح اتزان عناصر الطار وعلقته بمبدأ الوحدة‬ ‫‪4‬‬ . 1991 : 57) .‫كل توزيع متناظر متزن‪ ،‬بل يجب أن يصاحب مبدأ التزان مبدأ‬ ‫الوحدة كما يتضح فى شكل ) ‪ ( 3‬التالى‪ ،‬حيث يظهر أن الطار‬ ‫الول ل يوحى بالتزان رغم توزيع عناصره بشكل متناظر بل‬ ‫يعطى شعورا بان العناصر مبعثرة فى إرجاء الطار لفتقاده لمبدأ‬ ‫الوحدة‪ ،‬وفى الطار الثانى تقريب العناصر من بعضها أعطى‬ ‫شعورا بالوحدة والتزان معا‪(Lucas.

‫‪-‬‬ ‫المركز البصرى لشاشة الكمبيوتر هو فى الوسط بالضبط‪ ،‬لذلك‬ ‫يجب أن تنظم العناصر بحيث تبدأ من الوسط لنه اكثر المناطق‬ ‫التى تركز عليها عين الدارس‪.‬‬ ‫‪-‬‬ ‫استخدام الطارات لتنظيم المعلومات ومساعدة المتعلم‪ :‬كمناطق‬ ‫يستجيب فيها المتعلم للسؤال أو يضع رجع أو لوضع مفاهيم‬ ‫أساسية مما يساعد على الفهم‪ . 1993 : 72) .‬ومن أشكال‬ ‫التصميم المنطقى استخدام علمات الستفهام لطلب المساعدة‪،‬‬ ‫السهم المتجه لليمين يعنى الطار التالى‪ ،‬السهم المتجه لليسار‬ ‫يعنى الرجوع للطار السابق‪.‬من الصور المألوفة استخدام‬ ‫الكواد اللونية المتعارف عليها‪ ،‬واستخدام الخطوط المألوفة‪،‬‬ ‫وعرض الرسومات التعليمية من منظور مألوف‪.‬‬ ‫‪-‬‬ ‫تجنب استخدام التدوير‪ :‬يجب تقرير متى يتم إنشاء إطار جديد‪،‬‬ ‫وأين تقع المعلومات‪ ،‬فادا لم تنشئ صفحات منفصلة‪ ،‬فإن‬ ‫المعلومات سوف تستمر فى العرض بشكل التدوير من اسفل‬ ‫الطار لعلها‪ ،‬هذا التدوير يثير ضيق المتعلم‪ ،‬ويؤدى به إلى فقد‬ ‫بعض المعلومات نتيجة حدود فى الطار الثابت؛ مما يصعب على‬ ‫المتعلم تحديد مكانه فى البرنامج‪ ،‬والفضل دائما تقسيم البرنامج‬ ‫إلى صفحات منفصلة والتى ل تحتاج إلى التدوير‪ ،‬حيث أن مسح‬ ‫جزء من الطار تم مشاهدته‪ ،‬وعرض جزء آخر جديد مكان الجزء‬ ‫الممسوح مع ترك باقى الطار‪ ،‬أحيانا ل يلحظ المتعلم المعلومات‬ ‫الجديدة التى أضيفت لذلك يفضل فى مثل هذه الحالت التى‬ ‫تحتاج عرض معلومات كثيرة أن تنشئ إطارا جديدا لتقديم‬ ‫المعلومات الجديدة‪.‬‬ ‫‪5‬‬ .‬ويجب أن يتم التناسق بين المكان‬ ‫ووظيفة الطارات‪ ،‬ول تقدم سؤال أو تعليمات فى جزء من الطار‬ ‫ثم تستخدم نفس الجزء لوضع الستجابة أو منطقة الرجع‪.‬‬ ‫‪-‬‬ ‫استخدام الصور المألوفة فى تصميم واجهة التفاعل يؤدى إلى‬ ‫تقليل الجراءات اللزمة للتعامل مع النظام‪ ،‬لذلك يجب أن يرتبط‬ ‫تصميم الشاشات بخبرة وبيئة المتعلم من جهة‪ ،‬وبموضوع البرنامج‬ ‫من جهة أخرى‪ (Park.‬‬ ‫‪-‬‬ ‫عدم تزاحم الطار‪ :‬يحسن أن تترك مساحات فارغة فى الطار؛‬ ‫فل توجد سبب لوضع كثير من المعلومات على إطار واحد‪ ،‬ويفضل‬ ‫تجزيئ النص إلى فقرات قصيرة‪ ،‬ول تزيد الفقرة عن ثلث أو‬ ‫أربعة عبارات يفصل بينها مساحة مزدوجة‪.‬‬ ‫‪-‬‬ ‫التصميم المنطقى لعناصر الطار‪ :‬يجب أن يراعى التصميم‬ ‫المنطقى فى جميع عناصر إطارات البرنامج التعليمى‪ ،‬فالطار‬ ‫ليس عمل فنيا بقدر كونه واجهة تفاعل مع المتعلم‪ .

1990 : 2‬و واجهة التفاعل المسموعة مع المستخدم‬ ‫‪ … (Auditory User Interface "AUI" (Winn.‫‪-‬‬ ‫نوع البناط فى كتابة النصوص للتأكيد ولفت النتباه‪ :‬فيجب‬ ‫استخدامها فى كتابة رؤوس الموضوعات والعناوين والمثلة‬ ‫والسئلة أو فى نص تريد أن تبرزه‪ ،‬فهذا يجذب انتباه المتعلم‬ ‫يجعل العرض اكثر إثارة بصريا‪ ،‬مع الحذر من استخدام هذه‬ ‫النماط بشكل مبالغ فيه على شاشة واحدة‪ ،‬وكقاعدة عامة‪ ،‬يجب‬ ‫أل يستخدم أكثر من أربعة أنماط مختلفة‪Kearsley.‬‬ ‫‪.‬‬ ‫ثالثا‪ :‬مفهوم تصميم واجهة التفاعل‪:‬‬ ‫ويقصد بتصميم واجهة التفاعل وضع مفاتيح تحكم فى كل إطار‬ ‫ولهذا سميت واجهة تفاعل لن المتعلم يتفاعل معها عن طريق هذه‬ ‫المفاتيح وتصميم إطارات البرنامج )شاشات العرض(‪ ،‬من حيث صياغتها‬ ‫وأنواعها ومداها ومكوناتها‪ ،‬وكذلك تصميم جميع الوسائط التعليمية‬ ‫المستخدمة فى تقديم المحتوى من صور ثابتة ومتحركة ورسوم متحركة‬ ‫ورسوم خطية ولغة منطوقة وموسيقى‪ ،‬ويوضح الشكل التالى يوضح أحد‬ ‫تصميمات شاشات البرنامج‪:‬‬ ‫العنوان الرئيسى‬ ‫العنوان الفرعى‬ ‫الصور الثابتة‬ ‫النص‬ ‫التخطيطية‬ ‫مفاتيح التفاعل‬ ‫المكتوب‬ ‫‪6‬‬ ‫أو الرسوم‬ .(48‬‬ ‫ثانيا‪:‬أنواع واجهات التفاعل‪:‬‬ ‫يرتبط مصطلح واجهة التفاعل مع المستخدم مع الكثير من‬ ‫المصطلحات الخرى مثل‪ :‬واجـهة التفاعل الرسومية مع المستخدم‬ ‫‪ (Graphical User Interface "GUI" (Bishop. 1986 : 43-) . 2002 : 1‬و واجهة تفاعل‬ ‫الوسائط المتعددة مع المستخدم ‪ "Multimedia User Interface "MUI‬و‬ ‫واجهة التفاعل المنطقية مع المستخدم "‪Logical User Interface "LUI‬‬ ‫‪ ((UNESCO. 1994 : 211‬الخ‪.

‫الصور المتحركة‬ ‫أو الرسوم‬ ‫المتحركة‬ ‫سابق‬ ‫القائم‬ ‫ة‬ ‫تالى‬ ‫إنهاء‬ ‫شكل يوضح أحد تصميمات واجهة التفاعل‪.‬‬ ‫وتتعدد أنواع الطارات )شاشات البرنامج( فى برامج الوسائط‬ ‫المتعددة حسب موقعها والهدف منها ويمكن توضيح بعض أنواع الطارات‬ ‫فيما يلى‪:‬‬ ‫إطارات افتتاحية‪ :‬وتحتوى هذه الطارات على عنوان اسم المادة‬ ‫والعنوان الرئيسى والهيئة التى قامت بإنتاج البرنامج‪ ،‬وذلك باستخدام‬ ‫الوسائط المختلفة‪.‬‬ ‫إطارات إرشادية‪ :‬ويتم فيها تقديم إرشادات وتوجيهات للمتعلم عن‬ ‫كيفية السير فى البرنامج أو كيفية الجابة على السؤال أو لتعريف المتعلم‬ ‫كيفية التحكم‪.‬‬ ‫إطارات تمهيدية‪ :‬وتحتوى على موضوع التعلم أو التمهيد لكساب‬ ‫المتعلم معرفة جديدة‪.‬‬ ‫إطارات تنمية المعلومات‪ :‬وتحتوى هذه الطارات على المعرفة‬ ‫والمعلومات الجيدة التى يراد أن يكتسبها المتعلم‪.‬‬ ‫ويخطأ بعض الكتاب فى استعمال الرجع والتعزيز كمترادفين‪ ،‬والحق‬ ‫أن بينهما فرقا تربويا مهما‪ ،‬فالرجع هو عملية تقديم المعلومات التى تتلو‬ ‫الستجابة‪ ،‬أما التعزيز فهو أثر هذه المعلومات على المتعلم‪ ،‬لننا حينما‬ ‫نقدم معلومات تلو الستجابة فقد تكون هذه المعلومات معززة لها‪ ،‬بمعنى‬ ‫أنها تقوى الستجابة‪ ،‬وقد تكون المعلومات سالبة‪ ،‬بمعنى أنها تقع موقع‬ ‫العقوبة بالنسبة للمتعلم‪ ،‬وتثبط ميله لتكرار الستجابة‪ ،‬ويرجع هذا الثر إلى‬ ‫المتعلم‪ ،‬فل نستطيع أن نقطع بأن رجع الستجابة الصحيحة يعززها‪ ،‬أو أن‬ ‫‪7‬‬ .‬‬ ‫إطارات اختباريه‪ :‬وتهدف هذه الطارات إلى اختبار المتعلم فى نهاية‬ ‫كل وحدة أو الختبار النهائى للمتعلم‪.‬‬ ‫إطارات الرجع‪ :‬وتحتوى هذه الطارات على معلومات الرجع للمتعلم فى‬ ‫ضوء استجابته‪ ،‬ويمكن تقديم الرجع بصور مختلفة عن طريق النص أو‬ ‫اللغة المنطوقة أو الرسوم المتحركة منفرد أو مصاحبة بالنص‪.

‬فتح الباب عبد الحليم‪.‬‬ ‫رابعا‪ :‬العتبارات التي يجب مراعاتها عند تصميم‬ ‫‪:‬‬ ‫واجهات التفاعل ‪ /‬الشاشات ‪0‬‬ ‫من المهم مراعاة بعض الشياء عند تصميم واجهة التفاعل مثل‪ ،‬إتاحة‬ ‫قدر كاف من المساحات الفارغة‪ ،‬عدم جمع وسيطين بصريين مرتبطين‬ ‫بالزمن فى نفس الطار‪ ،‬وجود مفاتيح تحكم فى كل إطار وثبات واجهة‬ ‫التفاعل بمعنى أن تظل خيارات الواجهة وخصائصها والمفاتيح المرتبطة بها‬ ‫‪8‬‬ .‬دافيدوف‪.‬الغريب زاهر‪،‬‬ ‫إقبال بهبهانى‪.(1984،205 :‬‬ ‫كما أكدت نظرية سكنر أن تنويع أساليب التعزيز تؤدى إلى تثبيت‬ ‫الستجابات الصحيحة‪ ،‬وذلك يؤدى إلى تأكيد التعليم‪) .‬‬ ‫ويراعى عند تصميم التعليم المفرد )برامج الوسائط المتعددة( أن‬ ‫يقدم للمتعلم تغذية راجعة فورية عندما ينتهى من عمل ما ليعرف مستوى‬ ‫الداء ومدى تقدمه نحو الهدف‪ ،‬ويراعى أن تقدم التغذية المرتجعة بصورة‬ ‫متكررة ومتنوعة وبأساليب مختلفة‪) . Extinction‬لندا ل‪ .‫رجع الستجابة الخاطئة سيثبط الميل إلى تكرارها‪ ،‬فكثير من المتعلمين‬ ‫الذين يتقدمون فى تعلمهم بسرعة واقتدار قد يتضايقون من تلقى رجع‬ ‫بكمية كبيرة يعزز استجاباتهم الصحيحة‪ ،‬وقد يفضلون قدرا قليل منه لكى‬ ‫يتقدموا بسرعة‪ ،‬هذه حالة يكون الرجع فيها إيجابيا ولكن التعزيز غير‬ ‫إيجابى‪) .‬على عبد المنعم‪-286 ،2000 :‬‬ ‫‪.(59 ،1999 :‬‬ ‫وقد أوضح )على عبد المنعم‪ (92 ،2000 :‬أن التغذية الراجعة‬ ‫هى رد فعل الرسالة على المستقبل‪ ،‬فإذا فهم الرسالة كانت التغذية‬ ‫الراجعة إيجابية كأن تكون فى صورة كلمات تدل على الموافقة أو تحريك‬ ‫الرأس للمام والخلف أو فى صورة إجابات صحيحة على بعض السئلة‪ ،‬أما‬ ‫إذا لم يفهم المستقبل الرسالة فإن التغذية الراجعة تكون سلبية كأن‪ -‬يهز‬ ‫رأسه جهة اليمين واليسار أو فى شكل إجابات غير صحيحة عن السئلة‬ ‫التى توجه إليه وبالتالى يمكن للمرسل أن يغير أو يعدل على رسالته‪.(61 ،1995 :‬‬ ‫وقد أكدت مبادئ الشتراط الستجابى أنه من المتوقع أن يستمر‬ ‫بقاء استجابة شرطية ما‪ ،‬بمجرد اكتسابها طالما اقترن المثير الشرطى‪،‬‬ ‫على القل لبعض الوقت‪ ،‬بالمثير اللشرطى ‪00‬ويطلق على هذه الظاهرة‬ ‫النطفاء ‪).(287‬‬ ‫وقد أجريت بعض الدراسات حول اختلف أساليب تقديم معلومات‬ ‫الرجع فتوصلت دراسة )صالح محمود فايد‪ (2000 :‬إلى أن تزويد‬ ‫المتعلم بالجابة الصحيحة مع شرح مختصر لها فى حالة خطأ استجابة‬ ‫المتعلم أفضل على التحصيل من تعريف المتعلم عن إجابته صواب أم خطأ‬ ‫فقط‪.

‬‬ ‫حيث أورد أحمد موسى بعض المعايير كالتى‪:‬‬ ‫‪ -1‬البساطة ‪ ،‬بمعنى الختصار فى استخدام الخيارات وخصائص‬ ‫التحكم والقتصار على ما هو ضرورى للتوجيه والعرض ‪0‬‬ ‫‪ -2‬إتاحة قدر كافى من المساحات الفارغة ‪0‬‬ ‫‪ -3‬اتزان عناصر واجهة التفاعل داخل الطار ‪0‬‬ ‫‪ -4‬التركيز على الرسوم والصور الثابتة أكثر من النصوص ‪0‬‬ ‫‪ -5‬تنظيم محتويات الطار مع حركة العين ‪0‬‬ ‫‪ -6‬وجود ثلثة عناصر على الكثر فى الطار الواحد ‪0‬‬ ‫‪ -7‬ظهور الهيئة المنتجة للبرنامج فى الطار الول فقط وليس فى‬ ‫كل الطارات ‪0‬‬ ‫‪ -8‬وجود مفاتيح التحكم أسفل الطار ‪0‬‬ ‫‪9‬‬ .‬محمود‬ ‫عبد الكريم‪.‬‬ ‫_ وجود نماذج مزخرفة ليس لها أهمية‪.‬‬ ‫_ ازدحام الشاشة بالعبارات والشكال‪.(96 ،2001 :‬‬ ‫كما يرجع الهتمام بوضع إطار يحيط بواجهة التفاعل إلى ما أكد عليه‬ ‫)السيد على‪ ،‬فائقة محمد‪ (45 ،2001 :‬حيث إن العين البشرية بعد مرور‬ ‫عشر دقائق تقريبا من الرؤية المتواصلة تعجز عن رؤية أى شئ متجانس‬ ‫ليس له حواف تميزه‪،‬أما إذا ظهر لهذا الشيء ولو حافة واحدة تميزه فإن‬ ‫العين تتمكن من رؤيته لن جهازنا البصرى يحسن بطريقة تلقائية من‬ ‫طبيعة المعلومات التى يستقبلها حيث يأخذ الحدود الفاصلة ويزيد من‬ ‫صفاتها لذلك يصبح الجانب المظلم أكثر ظلمة‪ ،‬والجانب المضيء أكثر‬ ‫ضياء‪.(52-51 ،2000 :‬‬ ‫خامسا‪:‬أسس ومعايير تصميم واجهات‬ ‫التفاعل‪ /‬الشاشات ‪:.‫فى مكانها‪ ،‬ول تتغير عندما تتغير الطارات‪ ،‬وجود إطار خارجى لواجهة‬ ‫التفاعل‪.‬‬ ‫وهناك بعض الخطاء التى ترتكب عند عملية التصميم ومنها التى‪:‬‬ ‫_ تعارض اللوان وتضاربها‪.‬‬ ‫ويرجع الهتمام بثبات واجهة التفاعل إلى أن هناك عوامل تؤثر على‬ ‫ثبات الشكل مثل مدة رؤيته‪ ،‬ومدى تركيز النتباه عليه لن الرؤية الخاطفة‬ ‫السريعة للشكل‪ ،‬وعدم تركيز النتباه تجعل إدراكنا مشوشا وغير دقيق‪ ،‬أما‬ ‫الرؤية الكافية التى تسمح للجهاز البصرى بتجميع المعلومات المختلفة عن‬ ‫الشكل ومكوناته‪ ،‬والتى يصاحبها انتباه مركز فينتج عنها إدراك صحيح‬ ‫للشكل ومكوناته‪ ،‬كما أنها تساعد الجهاز البصرى على تصحيح الشكل‬ ‫)السيد على‪ ،‬فائقة محمد‪.‬‬ ‫_ وجود أكثر من اختيارين لغلق البرنامج‪.‬‬ ‫_ الخلط المبتذل فى التكرار والحركة‪.‬‬ ‫_ وضع كلمات وأرقام كثيرة يصعب التركيز عليها وتصيب بالملل‪) .

‫‪ -9‬وجود مفاتيح تحكم لكل إطار ) التالى – السابق – القائمة‬ ‫الرئيسية – خروج – مساعدة (‬ ‫‪ -10‬ثبات واجهة التفاعل ‪ ،‬بمعنى أن تظل خيارات الواجهة‬ ‫وخصائصها والمفاتيح المرتبطة بها ‪ ،‬فى مكانها ‪ ،‬ول تتغير عندما‬ ‫يتغير الطار ‪0‬‬ ‫‪ -11‬عدم جمع وسيطين بعدين مرتبطين بالزمن فى الطار نفسه ‪0‬‬ ‫‪ -12‬عدم استخدام الصوت دون تواجد عناصر بعدية ‪0‬‬ ‫‪ -13‬عند جمع وسيط ثابت ووسيط متحرك يكون وضع الثابت أعلى‬ ‫يسار الطار المتحرك منتصف يسار الطار ‪0‬‬ ‫‪ -14‬وجود إطار كامل يحيط بالطار ‪0‬‬ ‫‪ -15‬عدد اللوان المستخدمة فى الشاشة ل تزيد عن أربعة ألوان ‪0‬‬ ‫‪ -16‬تخفيف اللوان المتعارضة ‪0‬‬ ‫‪ -17‬تجنب نقص التباين اللونى ‪0‬‬ ‫‪ -18‬تجنب اللوان التى تسبب الزيع اللونى مثل اللون الحمر‬ ‫والزرق الصريحين ‪.‬‬ ‫‪‬‬ ‫اتاحت قدر كافى من المساحات الفارغة ‪:‬‬ ‫يعكس المواد المطبوعة ل تكلف المساحات الفارغه فى تصميم الطارات المبرمج‬ ‫شيئا ولكنها تساعد على وضوح باقى العناصر‪.‬‬ ‫‪10‬‬ .‬‬ ‫‪ -19‬ظهور عنوان الموضوع مصاحب بالصوت بالتدريج ‪0‬‬ ‫‪ -20‬التدرج فى عرض محتويات الطار ‪0‬‬ ‫‪ -21‬ربط محتوى الطار بمحتوى الطار الذى يسبقه ‪0‬‬ ‫‪ -22‬أن تظل المعلومات معروضة على الشاشة ‪ ،‬بعد كل استجابة‬ ‫حتى يقرر التلميذ النتقال إلى إطار جديد ‪0‬‬ ‫‪ -23‬عدم عرض أكثر من سؤال فى الطار الواحد ‪0‬‬ ‫‪ -24‬أن يقدم البرنامج رسالة أخيرة تفيد التلميذ بانتهائه من تحقيق‬ ‫الهداف‬ ‫‪ -25‬وجود اختيار واحد للخروج من البرنامج ‪0‬‬ ‫‪ -26‬أن ينهى البرنامج بعبارات ودية تودع التلميذ وتشكره)أحمد‬ ‫موسى‪،‬ص ‪(64‬‬ ‫ال ان مصطفى جودت)‪ (1999‬أورد بالتفصيل هذه المعايير كما يلى‪:‬‬ ‫‪ -1‬مبادئ عامه فى تصميم واجهات التفاعل ‪:‬‬ ‫نستعرض فيما يلى عددا من المبادئ العامه التى تتصل بتصميم‬ ‫واجهات التفاعل فى برامج الكمبيوتر التعليمية ‪:‬‬ ‫‪‬‬ ‫البساطة ‪:‬‬ ‫من اكثر المبادئ شيوعا فى تصميم واجهات التفاعل مبدأ البساطة ويشير الى تفضيل‬ ‫التصميم البسيط فى اى عنصرمن عناصر واجهة التفاعل‪.

‫‪‬‬ ‫اتزان عناص الطار ‪:‬‬ ‫ويتعلق مبدأ التزان بتوزيع العناصر داخل الطار مع مراعاة المساحات الفارغة‬ ‫ويجب التنبيه الى انه ليس كل توزيع متناظر متزن بل يجب ان يصاحب مبدأ التزان‬ ‫مبدأ الوحدة والذى يتحقق عن طريق ميل العناصر المتقاربه الى ان تدرك كوحدة‪.‬‬ ‫‪‬‬ ‫استخدام الصور المألوفه ‪:‬‬ ‫ان استخدام الصور المالوفه فى تصميم واجهة التفاعل يؤدى الى تقليل الجراءات‬ ‫الزمه للتعامل مع النظام لذلك يجب ان يرتبط تصميم الطارات بخبره وبيئة المتعلم‬ ‫من جهةوبموضوع البرنامج من جهة اخرى وتشمل الصور المألوفة استخدام الكواد‬ ‫اللونية المتعارف عليها واستخدام الخطوط المألوفة وعرض الرسومات التعليمية من‬ ‫منظور مألوف‬ ‫‪‬‬ ‫التصميم المنطقى لعناصر الطار ‪:‬‬ ‫يجب ان يراعى التصميم المنطقى فى جميع عناصر اطارات البرنامج التعليمى مالطار‬ ‫ليس عمل فنيا بقدر كونه واجهة تفاعل مع النتعلم ومن اشكال التصميم المنطقى‬ ‫استخدام علمة الستفهام لطلب المساعدة السهم المتجه لليمين يعنى الطار السابق‬ ‫‪،‬شكل الورقة يعنى طباعة تقرير ‪ ،‬ويجب ان ينص على معانى تلك الرموز ضمن دليل‬ ‫الستخدام أو بعبارات شارحة فى اطارات البرنامج‪.‬‬ ‫‪‬‬ ‫التركيز على الرسومات أكثر من النصوص فى تصميم الطارات ‪:‬‬ ‫وعند احتواء الطار على عناصر نصية كثيره فيجب اعادتها الى المصمم ليركز على‬ ‫الجوانب الرسومية فى مقابل النص المكتوب أو المسموع ‪.‬‬ ‫‪‬‬ ‫المركز المصرى لشاشات الكمبيوتر ‪:‬‬ ‫هو فى الوسط بالضبط لذلك يجب ان تنظم العناصر بحث نبدأ من الوسط لنه اكثر‬ ‫المناطق من حيث تركيز عين الدارس ‪.‬‬ ‫‪‬‬ ‫استخدام أكثر من نافذة ‪:‬‬ ‫‪11‬‬ .

i‬‬ ‫الرغبة فى مقارنة المعلومات من نافذتين متجاورتين ‪.iii‬‬ ‫‪،‬كورود ارقام فى النافذة الولى يتم التعويض بها فى معادلة بالنافذة‬ ‫الثانية‬ ‫•‬ ‫مسببات تراكيب النوافذ ما يلى ‪:‬‬ ‫تتفرع النافذة التى فى الواجهة من النافذة التى فى الخلفية ‪ ،‬وهنا‬ ‫‪.‫قد نضطر الى استخدام أكثر من نافذة فى نفس الطار والذى يطلق عليه اسلوب النوافذ‬ ‫المتعددة والذى ياعد على استغلل مساحة الطار بشكل اكبر حيث يمكن أداء أكثر من‬ ‫وظيفة فى نفس الوقت ‪،‬وعند استخدام أكثر من نافذة فى البرنامج يجب مراعاة المبادئ‬ ‫التالية ‪-:‬‬ ‫ليس من الضرورى ان تغطى النافذة الجديدة النافذة السابقة بل يمكن‬ ‫•‬ ‫ان نظهر بجوارها طالما ان هناك مكان كاف على الشاشة ‪.‬‬ ‫استخدام بينات النافذة الولى فى التفاعل مع النافذة الثانية‬ ‫‪.‬‬ ‫السماح للمتعلم باعادة ترتيب النوافذ المستخدمة معا‪،‬ومن أشكال ذلك‬ ‫•‬ ‫التكبير ‪،‬التصغير‪،‬الترتيب الفقى أو الراسى تبعا لراحة المتعلم ‪،‬ويتحقق هذا‬ ‫الشرط فقط عندما يتطلب البرنامج ن المتعلم التفاعل مع أكثر من نافذة فى نفس‬ ‫الوقت‬ ‫•‬ ‫استخدام أكثر من اطار ‪:‬‬ ‫‪12‬‬ .ii‬‬ ‫الخلفية‬ ‫تكون النافذة النشطة على السطح ‪ ،‬والنافذة الغير نشطة فى‬ ‫ل يتسع الطار لنافذتين متجورتين ‪،‬على الرغم من الحاجة‬ ‫‪.iii‬‬ ‫اليهما معا ‪ ،‬مما يؤدى الى استخدام التراكيب‪.‬‬ ‫‪.‬‬ ‫الحاجة الى اظهار كل النافذتين معا لوضوح المعنى مثل نافذة‬ ‫‪.i‬‬ ‫يلزم التراكيب لبيان العلقة بين الموضوعين ‪.ii‬‬ ‫بها الرسومات واخراى بها التعليق النصى ‪.‬‬ ‫•‬ ‫من مسببات تجاور النوافذ ما يلى ‪:‬‬ ‫‪.‬‬ ‫يفضل حذف النوافذ التى ل تفى بشروط التجاور أو التراكيب ول‬ ‫•‬ ‫تحتاجها على الشاشة حتى ل تشتت المتعلم‪.

‬‬ ‫‪‬‬ ‫تنظيم محتويات الطار مع حركة العين ‪:‬‬ ‫تنظيم العناصر فى الطار المعدة باللغة النجليزية بداية باعلى يسار الشاشة ثم‬ ‫تنزل الى اسفل متجة نحو اليمين ثم تعود لليسار مرة اخرى فى أسفل الشاشة فى‬ ‫‪13‬‬ .‬‬ ‫‪ ‬جميع العناصر المتصلة ببعضها البعض بحيث تتجاور معا ‪ ،‬كما‬ ‫يمكن احاتطها باطار لتمييزها عن العناصر الخرى ‪.‬‬ ‫‪‬‬ ‫استخدام ازرار فى الطار ‪:‬‬ ‫يفضل جعل الزرار الكثر استخداما جهة اليمين ‪.‬‬ ‫‪‬‬ ‫تقسيم الطارالى مناطق وظيفية ‪:‬‬ ‫يجب تحديد المناطق الوظيفية فى كل نوع من اطارات البرنامج ‪،‬كتحديد المناطق التى‬ ‫يظهر فيها التعليق ‪،‬كذلك مناطق ظهور المساعدات ‪،‬والمناطق التى فيها ازرا‬ ‫التفاعل ‪ ،‬ويجب مراعات ما يلى‪-:‬‬ ‫•‬ ‫تحديد مساحات تتناسب مع المحتوى‪.‬‬ ‫وضع المساحات الوظيفيه الصغيرة حول الحواف ‪،‬وليس فى وسط‬ ‫•‬ ‫الشاشة ‪ ،‬ووضع العناصر الهامة فى وسط الشاشة‪.‫كما يستخدم أكثر من نافذة فى نفس الطار يستخدم كذلك أكثر من تصميم نمط موحد‬ ‫لجميع اطارات البرنامج بل يفضل ان يكون التصميم معبرا عن وظيفة الطار ‪،‬بحيث‬ ‫يوجد تصميما موحدا لطارات عرض المعلومات ‪ ،‬يختلف عن تصميم اخر خاص‬ ‫باطارات السئلة ‪ ،‬واخر لطارات المساعدات ‪،‬ويجب الحتفاظ بالتساق بين تصميم‬ ‫الطارات التى تقوم بنفس الوظيفة ‪ ،‬مثل التصميم الموحد لطارات التوجيهات أو‬ ‫التحذيرات يجعل المتعلم يدركها حتى قبل أن يقرأ كلمة تحذير‪.‬‬ ‫تنسيق العناصر فى اشكال منطقية مألوفة ‪،‬كما يجب مراعاة اتجاه‬ ‫•‬ ‫قراءة اللغة العربية يكون العنصر الول فى اعلى مين الشاشة ‪ ،‬وفى‬ ‫النجليزية يكون فى اعلى يسار الشاشة‪.

‬‬ ‫‪‬‬ ‫تقسيم النصوص الطويلة ‪:‬‬ ‫يجب ان يظهر محتوى النص الطويل فى الطار بالتدريج ‪ ،‬بحيث تظهر عدة جمل ثم‬ ‫ينتظر البرنامج اشارة من المستخدم لعرض جزء اخر من النص مع البقاء على النص‬ ‫السابق ‪.‬‬ ‫‪ -3‬توظيف اللون فى البرنامج ‪:‬‬ ‫اللون احد المكونات الهامة فى واجهة التفاعل مع المستخدم الرسومية ‪ GUI‬واستخدام اللون‬ ‫يتعدى كونه عمل فنيا أو جماليا الى كونه قناة اتصال يمكن من خللها تدعيم مفلهيم معينة ‪،‬‬ ‫‪14‬‬ .‬‬ ‫‪-2‬تدريج بناء اطارات البرنامج ‪:‬‬ ‫تتميز اطارات البرامج عن صفحات الكتاب فى ان محتواها ل يظهر مرة واحدة بعكس صفحة‬ ‫الكتاب حيث يتم بناء محتويات الطار بصورة تدريجية بحيث تبقى العناصر المستخدمة فقط‬ ‫عليها ‪ ،‬مع التحديث المستمر لمحتوياتها وفقا للقواعد التالية ‪:‬‬ ‫‪‬‬ ‫عرض العناصر داخل الطار ‪:‬‬ ‫ل يجب عرض كمية كبيرة من العناصر مرة واحدة ‪ ،‬بل يتم اظهار عنصر أو اثنين ثم‬ ‫ينتظر البرنامج اشارة من المتعلم كنقرة بالفارة مثل ‪ ،‬أو ضغط مفتاح معين قبل اضافة‬ ‫العنصر التالى ‪ ،‬ويعطى المتعلم الفرصة لكى يتوافق مع عناصر الطار وفقا لسرعته‬ ‫الذاتية ‪.‫مسار يشبة العلمة ) > ( ‪،‬أما اطارات اللغة العربية فتنظم فى اتجاة العلمة‬ ‫) < (‪.‬‬ ‫‪‬‬ ‫ربط الطار بالمحتوى السابق ‪:‬‬ ‫يفضل ترك قدر كافى من المعلومات السابقة ضمن الطار للمعاونة على النشاط الجارى‬ ‫‪ ،‬ولكن دون مبالغة حتى ل يزدحم الطار بالعناصر ‪ ،‬ومن مهام المصمم التربوى‬ ‫تقدير اى المعلومات تظل ضمن الطار وايها يحذف ‪.‬‬ ‫‪‬‬ ‫الشارة لبداية اطار جديد ‪:‬‬ ‫يمكن تمييز بدية اطار جديد عن طريق مصاحبته لمؤثر صوتى أو بصرى مميز بحيث‬ ‫يدرك المتعلم انه بدأ فى جزء جديد من البرنامج وليس تابع للطار السابق ‪.

‬‬ ‫‪15‬‬ .‫وجذب النتباه نحو مفاهيم أخرى‪،‬ولتحقيق التوظيف المثل للون فى البرنامج التعليمى يجب‬ ‫مراعاة ما يلى ‪:‬‬ ‫استخدام اللون وظيفيا ‪ :‬تجنب اللوان الغير ضرورية فى النص ‪،‬ول تجعل‬ ‫•‬ ‫اللون يقود عين المستخدم الى اماكن غير هامة كالفواصل بين المناطق المتجاوره‬ ‫‪،‬والخلفيات المبالغ فيها ‪ ،‬وبدل من ذلك يستخدم اللون فى الحالت التالية ‪-:‬‬ ‫التمييز بين العناصر المختلفة باستخدام لون معبر لكل فئة من العناصر‬ ‫‪.ii‬‬ ‫يستخدم الون الزرق للمسطحات المائية واللون الخضر للزراعات واللون‬ ‫الصفر للصحارى ‪،‬مما يسهل على المستخدم فهم المحتوى‪.ii‬‬ ‫تركيز التمام ‪،‬مثل تمييز العناوين بلون مختلف عن باقى النص‬ ‫‪.iv‬‬ ‫مقال مطول فى اطار واحد مثل اطارات المساعدات ن حيث يفضل استخدام‬ ‫اللون فى تمييز الكلمات الساسية للسراع فى عملية البحث فى النص ‪.‬‬ ‫•‬ ‫تخير اللون المناسب للهدف ‪ :‬وذلك من خلل ما يلى ‪:‬‬ ‫استخدام أكواد لونية قليلة حتى ل يخلط المستخدم بينها ‪،‬كاستخدام لون‬ ‫‪.i‬‬ ‫يميزها عن باقى العناصر‬ ‫‪.‬‬ ‫تجنب اللوان الصارخة ‪ :‬وخاصة اللون الزهرى واللون الرجوانى ‪،‬‬ ‫•‬ ‫والدرجات الفاتحة جدا من اللوان لنها تختلف وفقا لنظام العرض فى الحاسبات فيما‬ ‫يتعلق بعدد اللوان الممكن عرضها وابرزها أحادى اللون ‪ ،‬ونمط عرض لون ‪ ،‬ونمط‬ ‫عرض لون ‪ ،‬ونمط عرض مليون لون ‪ ،‬ول تظهر الدرجات السابق ذكرها فى النمط‬ ‫أحادى اللون وتختلف درجاتها بين النماط الثلثة التالية له ‪.iii‬‬ ‫الربط بين العناصر المتشابهة باستخدام لون موحد لها‬ ‫تسريع عملية البحث داخل النصوص الطويلة ‪ :‬فقد تضطر الى كتابة‬ ‫‪.‬‬ ‫تجنب اللوان المتعارضة ‪ :‬مثل اللون الحمر واللون الزرق جنبا الى جنب‬ ‫•‬ ‫‪ ،‬لن العين البشرية لن تميز درجات تلك اللوان فى هذة الحالة بشكل صحيح ‪ ،‬كما‬ ‫يجب عدم استخدام اللون الحمر مع اللون الخضر ‪ ،‬أو استخدام اللون الخضر مع‬ ‫اللون الزرق ‪،‬أو اللون الزرق مع اللون الصفر‪.i‬‬ ‫معبر للكلمات الساسية ‪ ،‬ولون أخر للعناوين ولون ثالث للملحظات الهامه‬ ‫التمسك باللوان الطبيعية المتعارف عليها ‪ ،‬فعند رسم خريطة مثل‬ ‫‪.

‬‬ ‫‪ -4‬عرض النص المكتوب ‪:‬‬ ‫النص المكتوب هو كل ما تحتويه الشاشة من بيانات مكتوبة تعرض على المستخدم أثناء تفاعله‬ ‫مع البرنامج ‪ ،‬ومن أسس استخدام النص فى واجهات التفاعل ما يلى ‪:‬‬ ‫‪‬‬ ‫شاشة الكمبيوتر ليست كصفحة الكتاب ‪:‬‬ ‫لذلك أن تحتوى على قدر أقل من النص وتكتب ببنط أكبر حيث ان مقدار وضوح شاشة‬ ‫الكمبيوتر تقل عن مقدار وضوح الكتاب ‪.‬‬ ‫•‬ ‫مراعاة حالت العمى اللونى عند توظيفا الون فى واجهة التفاعل ‪:‬‬ ‫بينت الدراسات ان جميع المسخدمين يصابون بالعمى اللونى المؤقت عند النظ الىشاشة‬ ‫الكمبيوتر فى الضوء المنخفض ‪،‬لذلك الحرص فى توظيف اللون فى واجهة التفاعل‬ ‫وعدم العتماد على قدرة المتعلم فى تمييز اللوان ‪.‬‬ ‫تجنب الزيغ اللونى ‪ :‬يجب تجنب استخدام اللون الزرق الصريح أو الحمر‬ ‫•‬ ‫الصريح فى كتابة اى نصوص طويلة ‪ ،‬ويرجع ذلك الى خاصية الزيغ اللونى التى‬ ‫تجعل شبكية العين غير قادرة على التركيز فى تفاصيل تلك اللوان ‪ ،‬فتظهر عائمة ‪.‬‬ ‫‪16‬‬ .‬‬ ‫‪‬‬ ‫تجنب استخدام الفقرات واستبدلها بعبارات تلغرافية مختصره ‪:‬‬ ‫فقد وجد ان استخدام الفقرات المطولة فى الشرح يجهد يجهد المستخدم ويصيبه بالملل ‪.‫تجنب نقص التباين اللونى ‪ :‬لبد من المحافظة على قدر من التباين بين‬ ‫•‬ ‫الشكل والرضية ‪ ،‬فل ينبغى استخدام اللون البيض مع اللون الصفر ‪ ،‬ول اللون‬ ‫الزرق الغامق مع اللون السود ‪.‬‬ ‫‪‬‬ ‫استخدام سطور قصيرة فى الفقرات ‪:‬‬ ‫حيث وجد من خلل البحوث الجريبية ان الطور القصيرة تتطلب حركة عين أقل فى‬ ‫القراءة ‪.

‬‬ ‫اذا كان النص هو الساس ‪ ،‬والرسم عنصرا مساعدا كما فى برامج‬ ‫•‬ ‫تعليم الكتابة على لوحة المفاتيح ‪.‬‬ ‫‪ ‬تجريب حجم الخط ونوعة على عينة من المستفيدين قبل الموافقة‬ ‫على استخدامه فى البرنامج للتاكد من انقرائيته ‪.‬‬ ‫كون النص شارحا لمحتوى الرسم كما فى الخرائط ورسوم التشريح‬ ‫•‬ ‫‪،‬فالصور قد تساوى آلف الكلمات ‪ ،‬ولكن ربما القليل ن الكلمات فى مكانها‬ ‫الصحيح تضاعف ن تاثير الصورة ‪ ،‬فبدون الكتابة على محاور الرسم البيانى‬ ‫يصعب فهمه ‪ ،‬لذلك يجب ان يكون النص مجاورا للرسم ‪ ،‬وقد يكون مع الرسم‬ ‫فى نفس الكتلة ‪ ،‬وفى الحالت التى تحتاج الى شروح مطولة فانه يفضل أن‬ ‫يركز النص على العناصر الساسية مع اضافة شروح مسوعة ‪.‬‬ ‫‪‬‬ ‫استخدام خطوط ذات حواف ملساء ‪:‬‬ ‫وتجنب الخطوط التقليدية أو المزخرفة فى كتابة كل النص داخل البرنامج ‪.‬‬ ‫‪‬‬ ‫الحرص على وضوح المعنى ‪:‬‬ ‫بعكس الكتاب فان المتعلم الذى يتعلم عن طريق الكمبيوتر ليس لديه الوقت الذى يفقده فى‬ ‫التفكير فى معانى الكلمات أو احضار قاموس لفهم معنى عبارة معينة ‪ ،‬فغالبا ما تحدد‬ ‫استجابة المتعلم بوت معين ‪ ،‬لذا فل يجب اضاعة وقت المتعلم فى محاولة فهم السؤال ‪.‫‪‬‬ ‫الجمع بين النص والصورة على نفس الطار ‪:‬‬ ‫ويصبح هذا الجمع ضروريا فى الحالت التالية ‪:‬‬ ‫•‬ ‫كون النص جزءا من الرسم كما هو الحال فى الرسومات البيانية ‪.‬‬ ‫‪‬‬ ‫استخدام اللغة العربية فى واجهة التفاعل ‪:‬‬ ‫‪17‬‬ .‬‬ ‫‪‬‬ ‫وضع العبارات المرتبطة ببعض متقاربه على الشاشة ‪.

‬‬ ‫‪‬‬ ‫حجم الخط المثالى ) ارتفاع الحرف (‪:‬‬ ‫يتأثر تحديد المثل للخط بعدة عوامل منها حجم شاشة الكمبيوتر ‪ ،‬والكثافة النقطيه‬ ‫للعرض ‪ ،‬والقدرات البصريه لدى المستخدم وبشكل عام كلما زادت الكثافة النقطيه‬ ‫للشاشة كلما صغر حجم الخط ‪ ،‬لذلك يجب على مصمم واجة التفاعل ان يحدد بالضبط‬ ‫كثافة العرض المثالى ‪ ،‬ومن ثم استخدام حجم الخط المناسب ‪.‬‬ ‫‪ -5‬عرض الرسومات التعليمية والصور الثابتة ‪:‬‬ ‫لتقتصر برامج الوسائل المتعددة التعليمية على النص الكتوب فقط بل من الوسائل الشائعة‬ ‫الستخدام الرسومات التعليمية والصور الفوتوغرافية *استخدام تحدد توظيفها فى الموقف‬ ‫التعليمى بشكل عام وفى برامج برامج الكمبيوتر التعليمية على وجه الخصوص ومن السس‬ ‫الخاصة بتوظيف الرسومات التعليمية والصور الفوتوغرافية فى برامج الكمبيوتر التعليمية‬ ‫ما يلى ‪:‬‬ ‫‪ ‬الصور التى على تفاصيل كثيرة جدا يمكن ان تؤدى الى تشتت انتباه‬ ‫المتعلم ‪ ،‬لذلك يجب التبسيط قدر المكان ‪.‬‬ ‫‪‬‬ ‫حساب الحجم المثل للحرف ‪:‬‬ ‫حدد المعهد الوطنى المريكى للمعايير النسى المعادلة التالية لحساب ارتفاع الحرف‬ ‫حجم الحرف ) الرتفاع ( = ثابت ) ‪* ( 0.‬وهذا ما‬ ‫دعى الى اصدار معايير لتعريب النص فى واجهة التفاعل فى برامج الكمبيوتر فأصدرت‬ ‫المنظمة الدولية للتوحيد القياسى ‪.‬‬ ‫‪‬‬ ‫استخدام الرسومات الخطية الغير مظللة ‪:‬‬ ‫تستخدم الرسومات الخطية الغير مظللة فى الحالت التالية ‪:‬‬ ‫‪18‬‬ .01745‬مسافة الرؤية *زاوية الرؤية ‪.‬كما يجب‬ ‫استخدام شفرة تعريب موحدة تتيح تبادل البرنامج بين أكثر من منصة عرض ‪.‬‬ ‫‪‬‬ ‫تمييز النص ‪:‬‬ ‫تجنب المبالغة فى تمييز النص أو استخدام اكثر من وسيلة تمييز بشكل متجاور لن ذلك‬ ‫يؤدى الى تشتت المستخدم ‪ .‬على سبيل المثال ل يجب استخدام كلمات ذات أحرف‬ ‫سوداء بجانب كلمات مائلة وأخرى تحتها خطفى نفس السطر ‪.‫يعد أكثر صعوبة وتعقيدا من استخدام اللغة اللتينية لن الحرف العربى يتغير وفقا‬ ‫لموقعه من الكلمة لذلك يجب التاكد من سهولة قراءة الخط فى جميع الحالت ‪ .

‫• خرائط التدفق ‪ ،‬ومخططات المشروعات ‪ ،‬والرسومات الهندسية ‪.‬‬ ‫‪19‬‬ .‬‬ ‫•‬ ‫لتحليل الحركة أو المهارة ‪ ،‬مثل قفز لعب الجمباز ‪.‬‬ ‫•‬ ‫اليحاء بالبعد الثالث للرسم ‪.‬‬ ‫استخدام اللون الدال على الوظيفة ‪ :‬كما هو الحال فى استخدام اللونين‬ ‫•‬ ‫الحمر والزرق فى رسم الدورة الدمويه ‪.‬‬ ‫• الرموز المجردة ‪،‬كعلمات المرور ) الرموز وليست الشارات (‪.‬‬ ‫•‬ ‫يجب ان تستخدم اللوان عند رسم الخرائط ‪.‬‬ ‫• الرسومات الخطية المسلسلة ‪:‬‬ ‫تستخدم الرسومات الخطية المسلسلة فى الحالت التالية ‪:‬‬ ‫•‬ ‫اذا تعذر استخدام الصور المتحركة أو لقطات الفديو ‪.‬‬ ‫‪‬‬ ‫البدء من الكبر الى الصغر ‪:‬‬ ‫عندما يكون الرسم جزءا من رسم أكبر لنفس الموضوع ‪ ،‬يجب البدء بتحديد موقع الرسم‬ ‫من الشكل الكبر ‪ ،‬مثل عند دراسة خرطة مصر يجب البدء بعرض موقعها بالنسبة الى‬ ‫افريقيا ‪ ،‬وعند دراسة القلب يجب البدء بموقعه ونسبته لحجم جسم النسان ثم موقعه ثم‬ ‫موقعه من الجهاز الدورى قبل تكبير القلب ودراسته بشكل منفرد ‪.‬‬ ‫‪ ‬المحافظة على النسب ‪:‬‬ ‫الرسومات الخطية التعليمية يجب ان تحافظ على النسب الطبيعية فى الرسم بعكس‬ ‫الرسومات الكاريكاتيورية ‪.‬‬ ‫•‬ ‫يفضل استخدام اللوان أو التظليل فى الرسومات البيانية ‪.‬‬ ‫‪ ‬استخدام الرسومات الخطية المظللة والملونة ‪:‬‬ ‫•‬ ‫تمييز جزء من الرسم عن باقى العناصر ‪.‬‬ ‫‪ ‬عرض الخرائط ‪:‬‬ ‫عند احتواء البرنامج على خريطة يجب ان يظهر بجوارها مفتاح الرسم ومقياس الرسم ‪.‬‬ ‫‪‬‬ ‫الرسومات الكاريكاتيورية ‪:‬‬ ‫يمكن استخدام الرسومات الكاريكاتيورية فى التعزيز بشرط عدم السخرية من المتعلم ‪.

‫‪‬‬ ‫البدء من الخارج الى الداخل ‪:‬‬ ‫اذا كان الرسم مستقرا فى الطبيعة تحت رسم اخر يجب عرض الرسم الخارجى اول‬ ‫قبل عرض التكوين الداخلى ‪ ،‬فعند دراسة الهيكل الغظمى لجسم النسان يفضل‬ ‫استعراض صورة انسان بنسبة الطبيعة فى البداية ثم استعراض الهيكل العظمى وذلك‬ ‫بأحد الطريقتين ‪:‬‬ ‫التجاور ‪ :‬يتجاور الشكل الخارجى مع الشكل الداخلى وذلك ليتمكن‬ ‫‪(1‬‬ ‫الدارس من المقارنة بينهما وادراك موقع كل عنصر من عناصر الشكل الداخلى‬ ‫بالنسبة للشكل الخارجى ‪.‬‬ ‫البحار ‪ :‬يظهر الشكل الخارجى أول وعند النقر عليه بالفأرة يختفى‬ ‫‪(2‬‬ ‫الغطاء الخارجى ‪،‬ويظهر المكونات الداخلية ‪ ،‬ويفضل ان يعطى البرنامج‬ ‫للمستخدم خاصية الولوج والخروج بحيث يمكن التركيز على عنصر من‬ ‫عناصر الشكل العام وتكبيره ‪ ،‬أو الدخول من عنصر الى عنصر اخر كما هو‬ ‫الحال فى المتحف التخيلى ‪.‬‬ ‫اظهار خصائص الموضوع ‪ :‬يجب ان تبرز الصوره الفوتوغرافية‬ ‫•‬ ‫التعليمية خصائص موضوع التعلم مع البعد قدر المكان عن الفنية والزوايا‬ ‫الغير مألوفة ‪.‬‬ ‫‪‬‬ ‫استخدام الصور الفوتوغرافيه لكساب البرنامج المزيد من الواقعية ‪.‬‬ ‫تجنب استخدام الصورة الرمادية ‪ ،‬حتى ل يكون الدارس انطباعا‬ ‫•‬ ‫خاطئ عن موضوع التعلم خاصة عند تدريس موضوع لول مرة ‪.‬‬ ‫عدم المبالغة فى حجم الصورة الفوتوغرافية على الشاشة ‪ ،‬لنها‬ ‫•‬ ‫تتطلب مساحات تخزينية كبيرة ‪ ،‬وبدل من ذلك تستخدم اللقطات المقربة ‪.‬‬ ‫‪ ‬البقاء على وحدة الشكل ‪:‬‬ ‫تبعا لقانون الشكل الجيد ان للشكل صفات تميزة كوحدة كلية واذا اضفت عليه عناصر أو‬ ‫المؤثرات الجديدة تأثرت قيمته المرئيه تبعا لقوة تلك العناصر أو المؤثرات الجديدة بحيث‬ ‫يصعب تمييز الشكل الصلى ‪ ،‬وتبعا لقانون الغلق فان اضافة اطار حول محتويات‬ ‫الصورة يجعل العين تدرك الشكل على انه كل متحد ‪.‬‬ ‫‪‬‬ ‫الجمع بين الصور الخطية والفوتوغرافية ‪:‬‬ ‫عند تدريس مفهوم ما لول مرة يفضل استخدام رسم خطى يلى ذلك بعض المثلة‬ ‫المصورة له ‪ ،‬فعند تدريس وحدة عن تشريح الطيور يصعب تصوير طائر بعينه لن‬ ‫‪20‬‬ .

‬‬ ‫‪21‬‬ .‬‬ ‫التعبير عن مواقف حدثت فى الماضى ‪ ،‬ولم‬ ‫•‬ ‫تسجل مثل نشأة الكواكب ‪ ،‬والكائنات المنقرضة‪.‬واتخذت الرسومات المتحركة فى الكمبيوتر شكل‬ ‫أكثر تعقيدا من خلل انشاء الرسومات المتحركة ثلثية البعاد ‪ ،‬والتى تنشأ اطار بعد أخر وانما‬ ‫ينشأ العنصر ثلثى البعاد ثم يتم تحريكه وفقا لمتجهات سابقة التوصيف ‪.‬‬ ‫‪-6‬عرض الرسومات المتحركة ‪:‬‬ ‫الرسومات المتحركة ما هى ال عدد من الرسومات الثابتة المسلسلة التى تعرض متتابعة‬ ‫وبسرعة معينة مما يعطى اليحاء بالحركة ‪.‬‬ ‫•‬ ‫تعتمد اغلب برامج المحاكاة على الرسومات المتحركة ثلثية البعاد ‪.‬‬ ‫‪‬‬ ‫بعض دواعى استخدام الرسومات المتحركة فى البرنامج ‪:‬‬ ‫التعبير عن الشياء المتحركة أو المتغيرة ‪ ،‬كمراحل نمو نبات أو‬ ‫•‬ ‫حركة البندول البسيط ‪.‬‬ ‫التعبير عن مواقف خطرة ل يمكن تصويرها بالفيديو ‪ ،‬كقلب مفاعل‬ ‫•‬ ‫ذرى يعمل ‪.‬‬ ‫التعبير عن المفاهيم المجردة التى ل يمكن تمثيلها فى الواقع ‪ ،‬كما فى‬ ‫•‬ ‫اتحاد ذرة الكسوجين بذرتين هيدروجين لتكوين جزئ ماء أو تمثيل تأثير‬ ‫الضوء بالحركة فى النظرية النسبية ‪.‬‬ ‫تجريد عنصر واحد من بين عناصر عديدة‬ ‫•‬ ‫حدثت سويا‪ ،‬فلقطة الفيديو تصور الواقع كما هو‬ ‫أما الرسومات المتحركة فيمكنها أن تأخد الموضوع‬ ‫وتستغنى عن العناصر المحيطة والتى قد تشتت الدراس‪.‬‬ ‫التعبير عن مواقف تحدث فى فترات زمنية‬ ‫•‬ ‫طويلة يصعب ادراكها بالفيديو ‪،‬مثل تحرك القارات‪،‬‬ ‫تآكل الشواظئ ‪ ،‬تكون البترول فى الطبقات الرسوبية ‪.‬‬ ‫جذب انتباه المتعلم نحو البرنامج ‪ ،‬والتنوع فى اساليب عرض‬ ‫•‬ ‫المفاهيم مما يبعد الملل ‪.‬‬ ‫‪o‬‬ ‫التعبير عن سلوك ظاهر يرتبط بتفاعل الكائن بالبيئة ‪ ،‬هنا يمكون‬ ‫‪o‬‬ ‫الفيديو أصدق تعبيرا ‪ ،‬كسلوك الحيوانات المختلفة مع بعضها البعض فى البيئة‪.‫الطيور قد تبدو مختلفة ظاهريا والصور الفوتوغرافية لطائر بعينه لن تساعد الطالب‬ ‫على التعميم ‪ ،‬لذلك يفضل ان تضع رسم خطى يجمع الصفات التشريحية للطيور يلى‬ ‫ذلك عددمن الصور لطيور مختلفة تظهر فيها تلك الصفات ‪.‬‬ ‫بعض دواعى عدم استخدام الرسومات‬ ‫‪‬‬ ‫المتحركة‪:‬‬ ‫التعبير عن مواقف اجتماعية يمكن تسجيلها بالفيديو كالفلكلور‪.

‬‬ ‫توظيف الرسومات المتحركة فى برامج الكمبيوتر التعليمية‪:‬‬ ‫‪o‬‬ ‫يفضل التعليق الصوتى على محتوى الرسم عن التعليق النصى المكتوب‬ ‫‪o‬‬ ‫لن الخير يشتت عين المستخدم بين الرسم المتحرك‪-‬المرتبط بفترة زمنية –‬ ‫والنص نفسه‪.‬‬ ‫اظهار للمتعلم مال يستطيع أن يراه مباشرة وبطريقة‬ ‫‪o‬‬ ‫طبيعية ‪ ،‬اما لخطورته أو لدقته المتناهية‪ ،‬أو بسبب وقوعه فى فترة‬ ‫زمنية ماضية أو فى فترة زمنية طويلة يصعب ادراكها )كنمو نبات (‬ ‫‪22‬‬ .‫التعبير عن صور ثابتة متتابعة‪ ،‬كاستعراض تيترات المقدمة ‪ ،‬فيمكن‬ ‫‪o‬‬ ‫الستعاضة عن الرسومات المتحركة بصور ثابتة متتابعة زمنيا‪.‬‬ ‫امكانية استخدام الرسومات المتحركة فى الرجع )‪(FeedBack‬‬ ‫‪o‬‬ ‫لتوضيح الجابة الصحيحة فى حالة الخطأ ‪ ،‬أو لمكافأة المتعلم على اجابته‬ ‫الصحيحة ‪ ،‬ولكن ل يجب اضافة رسوم متحركة طريفة فى حالة الجابة الخاطئة‬ ‫لن ذلك قد يدفع المتعلم الى تكرار الخطأ لمشاهدة الرسم‪ ،‬وهذا قد يؤدى الى‬ ‫توقعات خاطئة حول مستوى المتعلم ‪ ،‬كما ل يجب أن يستخدم الرسم المتحرك‬ ‫فى السخرية من المتعلم‪.‬‬ ‫يمكن استخدام الرسومات المتحركة ثلثية البعاد فى البرامج التعليمية ‪،‬‬ ‫‪o‬‬ ‫ال انها تتطلب فترات اعداد أطول ‪ ،‬ومساحة تخزين أكبر ‪ ،‬ال أنها أدف من‬ ‫حيث اظهار التفاصيل واستخدام الظل والنور ومن ثم اقناع المتعلم‪.‬‬ ‫عدم المبالغة فى استخدام اللون داخل الرسومات المتحركة ال اذا تطلب‬ ‫‪o‬‬ ‫الموضوع ذلك‪ ،‬لنه كلما قلت ألوان الرسم كلما قلت المساحة المطلوبة‬ ‫لتخزينه ‪ ،‬وكلما عمل بكفاءة على الجهزة المختلفة‪.‬‬ ‫تعمل معظم اطارات الرسومات المتحركة بسرعة ‪ 14.‬‬ ‫الرسومات المتحركة المستخدمة فى شرح مهارة أو حدث معين يجب‬ ‫‪o‬‬ ‫أن يتاح للطالب اعادتها أكثر من مرة حسب قدرته على متابعتها‪.‬‬ ‫جعل حجم الرسومات المتحركة ملئمة ‪ ،‬مع الوضع فى العتبار أن‬ ‫‪o‬‬ ‫المبالغة فى زيادة الحجم يقابله زيادة المساحة التخزينية المطلوبة ‪ ،‬كما أن‬ ‫المبالغة فى تقليل الحجم تجعل تمييز الرسم ليس بالمر السهل ‪ ،‬ومن ثم يفقد‬ ‫الرسم مميزاته التعليمية‪.‬‬ ‫فى حالة كون جزء من الرسم يتحرك وباقى أجزاء الرسم ثابتة ) كرسم‬ ‫‪o‬‬ ‫قلب يخفق فى جسم النسان( فيفضل أن يقتصر اطار الرسومات المتحركة على‬ ‫ذلك الجزء ‪ ،‬وتوضع فى الخلفية صورة ثابتة ‪ ،‬وبالتالى توفر الفاقد فى المساحة‬ ‫التخزينية للبرنامج‪.5‬اطار فى‬ ‫‪o‬‬ ‫الثانية ‪،‬ويمكن زيادة عدد تلك الطارات لتعميق الحساس بالحركة الطبيعية ‪،‬‬ ‫ال ان ذلك يعنى زيادة متطلبات التخزين‪.‬‬ ‫عند الضطرار الى استخدام تعليقات نصية مكتوبة يفضل دمجها مع‬ ‫‪o‬‬ ‫الرسم فى كتلة واحدة‪.‬‬ ‫‪ -7‬عرض لقطات الفيديو ‪:‬‬ ‫دواعى استخدام الفيديو فى برنامج‬ ‫‪‬‬ ‫الكمبيوتر التعليمى‪:‬‬ ‫اظهار الحداث والمهارات التى تعتمد على الحركة حيث‬ ‫‪o‬‬ ‫يكسب الفيديو الموضوع الحساس بالواقعية‪.

‬‬ ‫ جعل حرجات الكاميرا طبيعية ومنطقية ‪ ،‬وتذكر أنك تعد عمل تعليمى‬‫وليس دعائى‪.‬‬ ‫ ل يفضل استخدام الفلتر اللونية لنها تغير من الدرجات الطبيعية للون‪.‬‬ ‫‪‬‬ ‫أسس توظيف الفيديو فى‬ ‫برنامج الكمبيوتر التعليمى‪:‬‬ ‫ ل تصور من منظور غير مألوف حتى ل تضيع وقت المتعلم فى محاولة‬‫فهم محتوى المشهد‪.‬‬ ‫ نظرا لستخدام نافذة فيديو صغيرة نسبيا لذا يفضا استخدام اللقطات‬‫المقربة قدر المكان بحيث يستبعد من الكادر العتاصر الغير مفيدة ‪،‬‬ ‫ونتجنب اللقطات العامة‪.‬‬ ‫يستخدم لجذب اهتمام المتعلم نحو البرنامج‪.‬‬‫ توفير المساحة التخزينية قدر المكان ‪ ،‬لنه كلما زادت فترة المشهد‬‫زادت المساحة التخزينية المطلوبة ‪ ،‬ويتم ذلك عن طريق‪:‬‬ ‫‪ ‬اظهار الحداث المحورية فقط‪.‬‬ ‫‪23‬‬ .5‬‬ ‫ميجا بايت‪.‫أو لحدوثه بسرعة) كسقوط كتلة فى الماء والموجات الناشئة عن‬ ‫ذلك( أو لندرة الحدوث ) هبوط نيزك(‪. (.‬‬ ‫ل يجب أن تصور لقطات الفيديو مواقع ثابتة ل تظهر فيها‬ ‫‪o‬‬ ‫الحركة) كالهرامات( ويمكن الستعاضة عنها بصور‬ ‫فوتوغرافية‪.‬‬ ‫تستخدم فى اظهار الدوافع والعواطف النسانية‪.‬‬ ‫ استبعاد العناصر الصغيرة من المشهد ‪ ،‬والذى يقل حجمها عن ‪4‬‬‫بكسل ‪ ،‬لن الدارس لن يدركها بسهولة‪.‬‬ ‫‪ ‬يجب اتاحة استخدام التكرارات ليتمكن‬ ‫المستخدم من تكرار عرض المهارة دون الحاجة الى‬ ‫تكرار التسجيل ‪.‬‬ ‫‪o‬‬ ‫‪ ‬دواعى عدم استخدام الفيديو فى برنامج‬ ‫الكمبيوتر التعليمى‪:‬‬ ‫البرامج التى تعمل من خلل القرص اللين ‪ ،‬حيث ان الفيديو يتطلب‬ ‫مساحات تخزينية كبيرة‪ ،‬فعلى سبيل المثال فان عرض لقطة فيديو‬ ‫بمساحة ‪ 160*120‬بكسل لمدة ‪ 42‬ثانية يتطلب مساحة تخزينية ‪4.‬‬ ‫‪o‬‬ ‫تستخدم فى الرجع التصحيحى ‪،Corrective FeedBack‬‬ ‫‪o‬‬ ‫ول تستخدم فى التعزيز‪.‬‬ ‫ استخدام السرعة الطبيعية فى عرض لقطات الفيديو ‪ ،‬ال فى حالة‬‫تصوير الحداث التى ل تدرك البالسرعة البطيئة ) انفجار كتلة( أو بسرعة‬ ‫تفوق السرعة الطبيعية ) نمو نبات‪ ،‬حركة القمر‪.‬‬ ‫هناك حالت يفضل استخدام الرسوم المتحركة فيها أكثر من‬ ‫‪o‬‬ ‫لقطات الفيديو تناولناها فى الفقرة السابقة‪.‬‬ ‫ ملئمة حجم نافذة الفيديو ‪ ،‬بحيث يتحقق وضوح الصورة ‪ ،‬والتخزين‬‫القل ‪ ،‬والحركة الطبيعية ‪ ،‬وقد بينت التجارب أن الحجم المناسب يكون‬ ‫‪ 160*120‬بسكيل )نقطة(‪..

‬‬ ‫‪ -8‬توظيف الصوت فى البرامج التعليمية‪:‬‬ ‫الصوت عنصر أساسى فى برامج الوسائل التعليمية المتعددة‪ ،‬وترمز‬ ‫الكثير من البحوث الى تصميم الصوت فى البرنامج بالحرف ‪ AUI‬وهى‬ ‫اختصار لمسمى واجهة تفاعل المستخدم المستخدم ‪ ،‬ويدخل ضمنها كل ما‬ ‫يسمعه الدارس ويصدر عن البنامج أثناء تفاعل المستخدم معه‪.‬‬‫‪ -‬عدم السراف فى استخدام الصوت فى البرنامج‪.‬‬ ‫‪ ‬مجالت استخدام الصوت فى البرامج‬ ‫التعليمية‪:‬‬ ‫ الدللة على خطا وقع فيه المستخدم ‪ ،‬كاصدار صوت جرس لتنبيه‬‫المستخدم انه ضغط على المفتاح الخطأ ‪ ،‬وهو ما يطلق عليه ‪Beep‬‬ ‫‪Sound‬رغم أنه قد يختلف من برنامج الى آخر‪.‬‬ ‫ اقناع المستخدم ببيئة التعلم عن طريق المؤثرات الصوتية‪.‫‪ ‬عدم اضاعة مساحة التخزين فى لقطات ثابتة ‪،‬‬ ‫والتى يمكن استبدالها بالصور ‪ ،‬وفى حالة الرغبة فى‬ ‫تثبيت جزء من مشهد متحرك ‪ ،‬فيفضل اتاحة مفتاح‬ ‫تثبيت الطار بدل من اضاعه عدة ثوان فى مشهد‬ ‫ثابت‪.‬‬ ‫‪ ‬ارشادات عامة لتوظيف الصوت فى‬ ‫بامج الكمبيوتر التعليمية ‪:‬‬ ‫ يجب أن يكون الصوت المستخدم متسق مع الوظيفة المصاحب لها‪،‬‬‫فصوت النذار يختلف عن صوت التعزيز السلبى أو اليجابى ويختلف عن‬ ‫مؤثرات صوتية أخرى‪.‬‬ ‫‪24‬‬ .‬‬ ‫ التعليقات الصوتية على موضوع الدرس عند الرغبة فى تجنب‬‫النصوص المكتوبة الطويلة ‪.‬‬ ‫‪ ‬ادراك الصوت‪:‬‬ ‫تخضع عملية ادراك الصوت فى البرنامج التعليمى لقانونين من قوانين‬ ‫علم النفس الجشتالط هما قانون الستمرار الجيد ‪Good‬‬ ‫‪Continuation‬وقانون الغلق ‪ ،Closure‬المستخدمين فى مجال‬ ‫المدركات البصرية ‪ ،Visual Perceptions‬ال أن البحوث التجريبية بينت‬ ‫أن التغيرات فى منحنى الصوت تميل الى الدراك بشكل مستمر ‪ ،‬بدل من‬ ‫النقطاع المفاجئ للنغمة ‪ ،‬لذلك يفضا استخدام الختفاء التدريجى للنغمات‬ ‫الموسيقية عند استخدامها غى البرامج التعليمية‪ ،‬كما ثبت أن الصوات‬ ‫المنقطعة المتتالية تميل الى أن تدرك كشئ مستمر وفقا لقانون الغلق‪.‬‬ ‫ استخدام الصوت فى الرجع ‪ ،‬سواء كأداة تعزيز أو لبيان الخطأ ‪،‬‬‫ويجب عدم المبالغة فى استخدامه‪.‬‬ ‫ عدم السراف فى استخدام الرموز الصوتية –غير اللفظية‪ -‬حتى ل‬‫تختلط فى مخيلة المستخدم‪.‬‬ ‫ تنبيه المستخدم لموضوع هام ‪،‬أو تحذير فورى ‪ ،‬وهو مشابه للصوت‬‫السابق ‪ ،‬لكن يصحبه تعليق مكتوب على الشاشة‪.

‬‬ ‫ يستخدم المؤثر الصوتي كنوع من أنواع الرجع ‪ .‬‬‫ تعريف الرموز الصوتية المستخدمة فى البرنامج داخل المساعدات أو‬‫فى الكتيب المرافق للبرنامج‪.‬‬ ‫‪25‬‬ .‬‬‫ المؤثرات الصوتية التي تكون في الخلفية – كصوت المطر مثل – يفضل‬‫أن تظهر وأن تختفي تدريجيا ‪ .‬استخدام مؤثرين أحدهما للجابة الصحيحة وآخر للجابة الخاطئة‬ ‫ويشترط عدم المبالغة أو السخرية من المستخدم ‪.‬‬ ‫ الصوت مثير سريع الزوال ‪ ،‬لكنه أكثر قدرة على جذب انتباه‬‫المستخدم الذى ل ينظر الى الشاشة ‪ ،‬لذلك يجب استخدام الصوت عندما‬ ‫تتطلب الرسالة رد فعل سريع ولحظى ‪ ،‬أو تتفق مع أحداث زمنية ‪،‬‬ ‫واستخدام الرسائل المرئية عندما ل تتطلب الرسائل استجابات سريعة ‪ ،‬أو‬ ‫اذا كانت الرسالة معقدة ويحتاج المستخدم الى رؤيتها مكتوبة ليفهمها‬ ‫كالمعادلت الرياضية‪.‫ تجنب النغمات المتقاربة حتى ل يختلط معناها على المستخدم‪.‬‬‫ ل يستخدم الصوت مستقل عن واجهة التفاعل المرئية ‪ ،‬بل يجب أن‬‫يتم ربطه بما يراه المستخدم على الشاشة ‪ ،‬ولكن ل يشترط ربط كل ما‬ ‫يظهر على الشاشة برسالة صوتية‪.‬ويجب القتصاد في استخدام المؤثرات الصوتية في‬ ‫الرجع ‪ .‬‬ ‫‪ ‬اسس استخدام المؤثرات الصوتية فى‬ ‫برامج الكمبيوتر التعليمية‪:‬‬ ‫يقصد بالمؤثر الصوتى ‪،‬أى صوت يصدره الجهاز لمحاكاة صوت آخر واقعى‬ ‫يحدث فى الطبيعة مصاحب لفعل معين‪ ،‬كصوت انكسار الزجاج‪ ،‬وصوت‬ ‫أمواج البحر ‪ ،‬وصوت السيارات فى الشارع‪ ،‬ويهدف المؤثر الصوتى الى‬ ‫اقناع المستخدم بالبيئة البديلة التى يقدمها له البرنامج‪ ،‬وأحيانا يكون‬ ‫المؤثر الصوتى هو موضوع التعلم نفسه‪ ،‬كتمييز كفاءةعمل القلب من‬ ‫صوت نبضاته‪ ،‬لذلك يجب أن يراعى واضع البرنامج تسجيل تلك المؤثرات‬ ‫بنفس الدرجة التى تكون عليها فى الواقع ‪ ،‬كما يجب مراعاة ما يلى‪:‬‬ ‫المؤثر الصوتى اذا استخدم كصوت بيئى ‪Environmental‬‬ ‫‪Sound‬لقناع المتعلم بالبيئة البديلة يجب أن يكون بنفس المستوى الذى‬ ‫يتواجد عليه فى الواقع ‪ ،‬دون المبالغة فى حشد المؤثرات التى قد تبدو‬ ‫مصطنعة‪.‬كما يجب الحرص على أن تحاكي الواقع‬ ‫حتي يقتنع بها المتعلم ‪.‬‬ ‫اذا صاحب المؤثر الصوتى تعليق لفظى منطوق ‪ ،‬يجب أن يكون هذا‬ ‫المؤثر فى الخلفية ‪ ،‬أى أقل من حيث شدة الصوت ‪ ،‬والشرح اللفظى فى‬ ‫المقدمة‪.‬بينما المؤثرات الصوتية التي تعبر عن حدث‬ ‫– كحدث بين سيارتين – فغالبا ما تظهر وتختفي فجأة ‪.‬‬ ‫ ل يفضل استخدام الصدى مع المؤثرات الصوتية‪.‬‬ ‫ تمكين المتعلم من التحكم فى الغاء الرسائل اللفظية متى أراد‪.‬قد يصاحب رسالة نصية‬‫وقد ليصاحبها ‪ .‬‬ ‫ عندما تكون المؤثرات الصوتية موضوعا للتعلم – كصوت خفقان القلب –‬‫ل يجب أن يضاف اليها الصدى ‪ .

‬ال أنه قد يبدو‬ ‫اصطناعيا مع بعض اللت فل يحقق النتائج المطلوبة ‪.‬‬ ‫ثم يعاد عزف المقطوعة الموسيقية عند التشغيل ‪ .‬تهدف أساسا لربط عناصر‬‫البرنامج ‪ . Musical Instrument Digital Interface‬وهذا‬ ‫السلوب وان لم يسجل الموجات الصوتية الحقيقية ‪ .‬وكموضوع للتعلم‪.‬ال أنه يختزن البناء‬ ‫الساسي للمقطوعة الموسيقية ‪ .‬‬ ‫‪ ‬عند ظهور رسالة هامة على الشاشة أو‬ ‫تقديم أسئلة يجب أن تختفى موسيقى‬ ‫الخلفية‪.‬وهي تسجل‬ ‫بطريقتين ‪:‬‬ ‫* الموسيقى الرقمية ‪ .‬ويكلف هذا السلوب‬ ‫سعت تبلغ ‪ 100/1‬مما يتطلبه أسلوب الموسيقى الرقمية ‪ .‬ويطلق عليه كذلك ‪ MIDI‬كاختصار‬ ‫للمسمى ‪ .‬فاللحن‬‫المستخدم عند الجابة الصحيحة يكون في الغالب أسرع ايقاعا وأقصر‬ ‫في النغمات ‪ .‬حيث يخصص لكل وحدة من الدرس لحنا يميزها عن باقي‬ ‫الوحدات ‪ .‬‬ ‫* أسلوب اعادة بناء النغمات ‪ .‬‬ ‫‪26‬‬ .‬‬ ‫‪ ‬يفضل أن تكون ملفات الموسيقى من‬ ‫النوع ‪ MIDI‬أن تتكرر فى تكرارات ‪ Loop‬لنها‬ ‫قد تستمر لفترات طويلة‪ ،‬وهذا يتطلب‬ ‫مساحة تخزينية عالية جدا اذا ما سجلت‬ ‫بالسلوب الرقمى‪.‫‪ ‬أسس توظيف الموسيقى في برامج‬ ‫الكمبيوتر التعليمية ‪:‬‬ ‫الموسيقى شكل آخر من أشكال التسجيلت الصوتية ‪ .‬‬ ‫ال أنها تتطلب سعت تخزينية كبيرة ) حوالي ‪ 15‬ميجابايت لكل دقيقة (‪.‬ويحدد اللت المشتركة ودور كل منها ‪.‬‬ ‫ يجب أن يعب اللحن المستخدم في التعزيز عن الموقف ‪ .‬وأخرى للخطأ ‪ .‬ويجب تعريفها للمستخدم في‬ ‫المساعدات ‪.‬ويجب أن يكون في الخلفية ‪ .‬‬ ‫ الموسيقى المستخدمة كخلفية للبرنامج ‪ .‬‬‫ يجب أن تقتصر الموسيقى المستخدمة في التعزيز على لحنين فقط لحن‬‫للجابة الصواب ‪ .Digital Music‬وتعطي تسجيل واقعي‬ ‫حيث يتم تسجيل الصوت الذي يحدث بالفعل عن طريق مكبر الصوت ‪.‬‬ ‫‪ -‬يجب أن تظهر موسيقى الخلفية تدريجيا وتختفي تدريجيا ‪.‬وكخلفية للبرنامج ‪ .‬‬ ‫ويحدد استخدام الموسيقى في البرنامج التعليمي السس‬ ‫التالية‪:‬‬ ‫ تستخدم الموسيقى في التعزيز ‪ .‬أما اللحن المستخدم عند الجابة الخاطئة فيكون أبطأ ايقاعا‬ ‫وأطول في النغمات وينم عن الحزن ‪.‬والتعزيز ‪.‬أي أقل في الشدة من التعليقات‬ ‫اللفظية ‪ .

‫‪ ‬قد تستخدم موسيقى الخلفية كأصوات‬ ‫بيئية فى اقناع المتعلم ببيئة التعلم فى‬ ‫بعض الحيان ‪ ،‬ففى الموضوعات الوطنية‬ ‫والسياسية والسياحية اذا قدم اللحن المميز‬ ‫لدولة معينة مصحوبا بمشاهد من تلك‬ ‫الدولة زاد ذلك من انسجام المتعلم مع بيئة‬ ‫البرنامج‪.‬‬ ‫دمج الصوت‪ :‬ل تستخدم موسيقى ومؤثر صوتى فى نفس الحظة ‪،‬‬ ‫ويمكن استخدام موسيقى أو موثر صوتى كخلفية لتعليق مسموع ‪ ،‬بشرط‬ ‫أن يكون التعليق الصوتى أعلى من الموسيقى أو المؤثر الصوتى‪.‬‬ ‫ يفضل عند عرض صور ثابتة أن يكون التعليق عليها مسموعا وليس‬‫مكتوبا حتى يتمكن الدارس من متابعتها‪.‬‬ ‫ يفضل استخدام خلفية موسيقية واحدة متصلة لربط عدد من الصور‬‫المتعاقبة التى تعالج موضوع واحد‪ ،‬وذلك اذا لم يكن هناك شرح مسموع‬ ‫لها‪.‬‬ ‫‪27‬‬ .‬‬ ‫ عند استخدام صورة ثابتة مع تعليق صوتى عليها ‪ ،‬يفضل البدء بتمهيد‬‫صوتى لموضوع الصورة ‪ ،‬ثم تظهر الصورة يلى ذلك التعليق عليها‪ ،‬ول‬ ‫يجب التعليق الصوتى على صورة لم تظهر بعد‪.‬‬ ‫‪ -9‬القواعد العامة لدمج الوسائل فى واجهات‬ ‫التفاعل‪:‬‬ ‫يقصد بدمج الوسائل‪ :‬استخدام أكثر من وسيلتين فى نفس الطار‪،‬‬ ‫فعناصر الوسائل المتعددة ل تستخدم مستقلة بل تجمع معا فى واجهة‬ ‫التفاعل متعددة الوسائل ‪ ،‬ويرتبط هذا الجمع بعدة معايير منها ما يلى‪:‬‬ ‫ ل ينبغى اطلقا جمع وسيلتين بصريتين مرتبتطين بالزمن فى نفس الطار‬‫‪ ،‬كتجاور رسم متحرك ولقطة فيديو جنبا الى جنب فى نفس الطار ‪ ،‬ففى‬ ‫الوقت الذى يراقب فيه الدارس لقطة الفيديو سينصرف عن جزء من‬ ‫الرسم المتحرك ‪ ،‬ويمكن استبدال ذلك بتعاقب عرض الوسيلتين‪ ،‬أو ببدء‬ ‫الوسيلتين فى حالة الثبات ‪ Pause‬ويتم تحريك واحدة فقط‪ ،‬يختارها‬ ‫الدارس ‪ ،‬ثم يسمح له باختيار الخرى بعد النتهاء من الولى ‪.‬‬ ‫ يفضل ان يكون التعليق النصى المصاحب للرسومات المتحركة ‪،‬مسموعا‬‫ويمكن أن يكون مكتوب على نفس اطار الرسم المتحرك‪.‬‬ ‫يفضل عند استخدام تعليق صوتى على لقطة فيديو أو رسوم متحركة أن‬‫يدمج الصوت مع ملف الفيديوفى نفس الملف لتلفى عيوب التزامن‪ ،‬كما‬ ‫توجد بعض أنواع ملفات الرسومات المتحركة يمكن دمج الصوت ضمنها‬ ‫مثل )‪((Microsoft Multimedia Movie Player( MMM‬‬ ‫وملفات ‪.Quicktime for Window‬‬ ‫ ل ينبغى أن يكرر التعليق الصوتى نفس محتوى النص المكتوب ‪ ،‬ويفضل‬‫أن يقتصر النص المكتوب على العناوين والنقاط الرئيسية ‪ ،‬ثم يستكمل‬ ‫بعد ذلك الشرح باستخدام التعليق الصوتى‪.

‬‬ ‫• الربط باستخدام اللون‪:‬‬ ‫ جعل العبارات المتصلة بعضها البعض بنفس اللون‬‫ جعل العناصر فى الرسم البيانى التى تمثل نفس المتغير لها نفس‬‫اللون‪.‬‬ ‫فى حالة صعوبة استخدام مبدأ التجاور بين عنصرين مرتبطين على‬ ‫الشاشة يمكن استخدام التتابع فى ظهور العناصر المرتبطة‪.‬ومن الحالت التى يجب فيها التجاور على‬ ‫الشاشة ما يلى ‪:‬‬ ‫ عند شرح رسم ما يجب أن يجاور هذا الرسم النص الشارح له‪.‬‬ ‫ يجب أن يكون للعناوين الفرعية لنفس الموضوع نفس اللون الذى‬‫يميزها عن النص الشارح‪ ،‬وعن العناوين الفرعية للموضوعات الخرى‪.‬‬ ‫• ربط عناصر الرسوم بعضها الى بعض باستخدام‬ ‫النص‪:‬‬ ‫عند وجود رسم مكون من أكثر من عنصر ‪ ،‬فانه يفضل ايضاح الرابطة‬ ‫بين هذه العناصر عن طريق عناوين فرعية وتعليقات جانبية مثال ذلك‬ ‫ضرورة تمييز المنحنيات المختلفة على الرسم البيانى وكتابة الحداثيان‬ ‫السينى والصادى لكى يمكن فهم هذا الرسم‪.‬‬‫يجب أن تتبع المعلومات الحديثة بالمعلومات السابقة لها مباشرة فى‬ ‫نفس الطار لكى تظهر الصلة بينها‪.‬‬‫ عند كتابة السؤال يجب أن تكون منطقة الستجابة بجوار السؤال‪.‬‬ ‫‪ -10‬الربط بين العناصر البصرية فى اطار‬ ‫العرض‪:‬‬ ‫يجب الربط بين الوسائل المكونة لواجهة التفاعل مع المستخدم‬ ‫‪ ،‬خاصة البصرية منها‪ ،‬فالهدف ليس جمع عدد من الوسائل فى اطار‬ ‫واحد‪ ،‬بل لبد من ايجاد رابط بين تلك الوسائل بشكل مبررلتواجدها فى‬ ‫هذا الطار ‪ ،‬واهمال الربط بين عناصر واجهة التفاعل يشعر الدارس‬ ‫بتفككها ‪ ،‬بل قد يفقده الشعور بارتباط مفاهيم معينة تمثلها تلك‬ ‫العناصر ‪ ،‬فالنص –مثل‪ -‬لبن وأن يرتبط بالصورة المجاورة له‪ ،‬وفى‬ ‫حالة وجود أكثر من كتلة نص فى نفس الطار يجب ايجاد وسائل أخرى‬ ‫للربط ‪ ،‬وفيما يلى بعض القواعد الخاصة بربط العناصر البصرية فى‬ ‫اطار العرض‪:‬‬ ‫• ربط كتلة النص فى نفس الطار باستخدام الرسم‪:‬‬ ‫فى حالة استخدام أكثر من كتلة نص على نفس الطار فانه يفضل‬ ‫الربط بينهم بطريقة رسمومية‪ ،‬مثل خط أو سهم ينتقل من الجزء‬ ‫السابق الى الجزاء التالية ‪ ،‬ويصبح هذا الشرط ضروريا فى حالة‬ ‫التوزيع الغير منتظم لكتل النص على الشاشة وظهورها دفعة واحدة‪.‫ ل يستخدم الصوت بأنواعه دون تواجد عناصر بصرية على الشاشة يركز‬‫عليها الدارس ‪ ،‬فجهاز الكمبيوتر ليس جهاز راديو‪.‬‬ ‫• الربط عن طريق التجاور‪:‬‬ ‫يستخدم التجاور على الشاشة كأداة هامة لجعل التصميم المعقد‬ ‫مفهوما من قبل المستخدم ‪ .‬‬ ‫‪28‬‬ .

‬‬ ‫‪ ‬تكبير مكونات العرض الهامة‪:‬‬ ‫يجب أن تتوسط الكتلة الهم الشاشة‪ ،‬وأن تكون أكبر من غيرها‬ ‫وينطبق هذا على كتل النص ‪ ،‬والصور على حد سواء أما باقى العناصر‬ ‫الثانوية كالتعليمات وقوائم الخيارات والنصوص الشارحة فيجب أن‬ ‫توضع فى جانب من الشاشة أو تحت قائمة تظل كامنة الى أن‬ ‫يستدعيها المستخدم‪.‬‬‫ استخدام التحديد بخط خارجى‪.‫‪ -11‬التمييز)توجيه النتباه(‪:‬‬ ‫‪ ‬الوظيفة الساسية للتمييز‬ ‫هى تمييز عنصر فى الشاشة عن باقى العناصر ‪ ،‬لتوجيه انتباه المستخدم‬ ‫اليه‪ ،‬لذا فيمكنك أن تستخدم أساليب التمييز"فقط" عندما تريد وضع عنصر‬ ‫فى بؤرة اهتمام المستخدم‪.‬‬‫ وضع العبارات الهامة فى صندوق يميزها عن باقى عناصر النص‪.‬‬‫‪ -‬التعليق الصوتى على الرسومات يؤدى الى جذب اهتمام الدارس نحوها‪.(Bold‬‬‫ استخدام الوميض‪ :‬ويقصد به التغيير فى معدل استضاءة عبارة معينة‬‫بشكل نابض‪.‬‬ ‫ استخدام خط تحت العبارة الهامة )‪(Underline‬‬‫ استخدام القواس ) (‪[ ]،{ }،‬‬‫ استخدام التظليل بوضع ظل خلف العبارة الهامة‬‫ عكس اللوان ككتابة نص أبيض على خلفية سوداء‪.‬‬‫ التمييز باللون‪ :‬جعل العناوين أو العبارات الهامة بلون مميز‪.،‬ويستخدم هذا السلوب على وجه الخصوص مع‬ ‫العبارات التحذيرية‪.‬‬ ‫‪ ‬استبعاد العناصر الغير هامة ‪:‬‬ ‫تتعرض بعض العناصر بالطار الى التقادم وتصبح غير هامة ‪ ،‬لذلك‬ ‫يجب أن تحذف مع البقاء على العناصر الهامة لشرح النقاط اللحقة ‪،‬‬ ‫‪29‬‬ .‬‬‫ وجود فترة توقف قبل ظهور العبارةيؤدى الى تركيز الهتمام نحوها‪.‬‬ ‫‪ ‬أساليب تمييز النص‪:‬‬ ‫ استخدام الحرف المائلة))‪Italic‬‬‫ استخدام الخط الداكن)‪.‬‬ ‫‪ ‬أساليب تمييز الصورة‪ :‬وتتمثل فيما‬ ‫يلى‪:‬‬ ‫ وضعها فى صندوق بلون مميز أو احاطة الجزاء الهامة باطار خارجى‪.‬‬‫ استخدام منبهات صوتية مصاحبة لظهور النص يؤدى الى جذب انتباه‬‫الدارس نحو النص‪ .‬‬‫ الشارة بالسهم على الجزء الهام‪.‬‬ ‫ الوميض‬‫ الشارة بالسهم‪.‬‬‫ التمييز باللون ‪ :‬يجعل العنصر الهام ملون بينما باقى العناصر بلون‬‫مخالف‪.

‫ثم يتم حذفها بعد النتهاء منها ‪ ،‬هذه القاعدة تضمن البقاء فقط على‬ ‫العناصر الهامة فى الطار ومن ثم تمييزها ومنع تشتتها‪.‬‬ ‫‪ ‬القتصاد فى التمييز‪ :‬ل ينبغى السراف فى‬ ‫استخدام أساليب مختلفة من التمييز فى اطار واحد لنص أو صورة‪،‬‬ ‫حتى يتم تمييز العناصر الهامة‪ ،‬فالعبارة التى تحتوى على بعض‬ ‫كلماتها بخط داكن ‪ ،‬وبعضها تحته خط‪ ،‬وبعضها مظللة‪ ،‬وبعضها‬ ‫مائلة‪ ،‬يصعب تحديد الكلمات الهامة فيها‪.‬‬ ‫هذا وقد أورد )بدر الصالح( بعض النقاط التى يمكن الحكم من‬ ‫خللها على برنامج وسائط متعددة حيث يتضمن تصميم الوسائط‬ ‫المتعددة توظيف المبادئ الرئيسة لتصميم الشاشة‪:‬‬ ‫‪30‬‬ .

‬‬ ‫‪ ‬يستخدم التصميم أساليب مناسبة لتحديد المعلومات‬ ‫التي يختارها المتعلم ) مثل تغير اللون عندما يؤشر‬ ‫المتعلم عليها‬ ‫‪31‬‬ .‬‬ ‫يتميز تصميم الشاشة بالتناسق في أسلوب العرض‪ ،‬ومواقع‬ ‫المعلومات‪ ،‬واستخدام اللون‪ ،‬وشكل الخط وحجمه من شاشة‬ ‫لخرى‪.(Visual Appeal‬‬ ‫يوفر التصميم استخداما ً متناسقا ً لدوات البحار في أجزاء المقرر‪.‬‬ ‫يستخدم التصميم على نحو ملئم المساحات البيضاء لتوفير رؤية‬ ‫مشوقة وجذابة )‪.‬‬ ‫يتجنب التصميم عرض معلومات مكثفة على الشاشة الواحدة‪.‬‬ ‫يحقق تصميم المرئيات المعروضة على الشاشة مبدأ الوحدة‬ ‫بالنسبة لترابط الجزاء في كل متكامل ووجود مركز اهتمام‪.‬‬ ‫المعلومات معروضة على الشاشة بوضوح وتدفق منطقي‪.‬‬ ‫يدعم استخدام الوسائط المتعددة ) مرئيات ثابتة ومتحركة‪ ،‬وفيديو‬ ‫وصوت( أهداف التعلم في المقرر‪.‬‬ ‫يوفر تصميم واجهة التطبيق وعرض المعلومات على الشاشة‬ ‫سهولة الستخدام‪:‬‬ ‫يتضمن تصميم واجهة التطبيق استخدام أساليب وأدوات إبحار‬ ‫سهلة وواضحة للتفاعل والتصال مع البرنامج‪.‫يتميز عرض المرئيات بالبساطة والوضوح دون دمجها بعناصر‬ ‫عشوائية‪.‬‬ ‫المعلومات المعروضة على الشاشة مقسمة إلى أجزاء‪ :‬وحدات‪،‬‬ ‫ودروس‪ ،‬وفقرات‪.

‫المراجـــع‬ ‫‪-1‬ابراهيم يوسف)‪ :(2002‬تقويم برامج الوسائط‬ ‫المتعددة التعليمية المقدمة لتلميذ المرحلة البتدائية‬ ‫بمدارس التعليم العام فى ضوء المعايير التربوية‬ ‫والفنية‪ ،‬رسالة ماجستير‪ ،‬كلية التربية‪ ،‬جامعة الزهر‪،‬‬ ‫ص ‪.56-53‬‬ ‫‪-3‬مصطفى جودت)‪ :(1999‬قائمة المعايير التربوية‬ ‫والمتطلبات الفنية لنتاج برامج الكمبيوتر التعليمية‪،‬‬ ‫ملحق رقم ‪ ،5‬رسالة ماجستير‪ ،‬كلية التربية‪،‬جامعة‬ ‫حلوان‪.66-44‬‬ ‫‪ -4‬بدر بن عبد الله الصالح )‪ :(2005‬التعلم اللكتروني‬ ‫والتصميم التعليمي‪ :‬شراكة من أجل الجودة‪،‬ورقة‬ ‫بحثية لمؤتمر العلمي العاشر للجمعية المصرية‬ ‫لتكنولوجيا التعليم‪ ،‬كلية التربية ‪ ،‬جامعة عين شمس‪.‬‬ ‫‪32‬‬ .‬ص ‪.67-62‬‬ ‫‪-2‬عمرو جلل)‪ :(2004‬فاعلية اختلف متغيرات تصميم‬ ‫وبناء برامج الكمبيوتر متعـددة الوسائـط علـى تحصيـل‬ ‫طـلب شعبـة تكنولوجيا التعليم ومهاراتهم العملية‪،‬‬ ‫رسالة دكتوراة‪،‬كلية التربية‪،‬جامعة الزهر‪،‬ص ‪.