تصميم واجهات التفاعل

52
ر ي ي عا م م ي م ص ت هات ج وا ل ع ا ف ت ل ا ع م دم خ ت س م ل ا ى ف ات ي ج م ر لي ا ة ي م ي ل ع ت ل ا1

Upload: max-al-max

Post on 27-Jul-2015

1.931 views

Category:

Documents


15 download

TRANSCRIPT

Page 1: تصميم واجهات التفاعل

مع التفاعل واجهات تصميم معاييرالتعليمية البرمجيات فى المستخدم

1

Page 2: تصميم واجهات التفاعل

البحث عناصر

) االستخدام التفاعل واجهات مفهوم -(/الشاشات.

)االستخدام التفاعل واجهات أنواع- (/الشاشات.

التفاعل. واجهة تصميم - مفهوم تصميم عند مراعاتها يجب التي االعتبارات-

0/ الشاشات التفاعل واجهات التفاعل/ واجهات تصميم ومعايير أسس-

. الشاشات

2

Page 3: تصميم واجهات التفاعل

) االستخدام التفاعل واجهات مفهوم : أوال(/الشاشات.

تفاعل واجهة" أيضا تسمى والتى"UI" المستخدم مع التفاعل واجهة

الكمبيوتر. ونظام المستخدم بين الحدود تمثل"المستخدم مع الكمبيوتر مع أشخاص مجموعة أو شخصا كان سواء المستخدم يتفاعل حيث

االتصال. قنوات خالل من التفاعل هذا والبرنامج. يتم اآللة بشقيه الكمبيوتر

محسوس. يتعلق وآخر منطقى شقين: شق إلى التفاعل واجهة وتنقسم الشق المستخدم. أما مع البرنامج به يتفاعل الذى بالمنطق المنطقى الشق

الكمبيوتر. وقد مع التفاعل أثناء يسمع أو يرى ما بكل فيتعلق المحسوس التوجه قبل األمر بادئ فى"GUI" الرسومية التفاعل واجهة مصطلح ظهر البصرى التصميم التعليم. ويؤثر فى وتوظيفها المتعددة الوسائط إلى

ورغبته له فهمه ومدى البرنامج، نحو الدارس انطباع على لتفاعل لواجهة واجهة فى المرئية العناصر جميع البصرى التصميم استخدامه. ويضم فى

وتقديم المعلومات، وعرض ،Screen Layout الشاشة تنظيم مثل التفاعل(Lucas, 1991 : 56المرئية. ) التعليمات

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

االستخدام )هندسة يسمى بما ذلك ويتصلErgonomics البرنامج مع تفاعلهUsability Engineeringالقياسى للتوحيد الدولية المنظمة أصدرت (. وقد

ISOعليه أطلق معيارا ISO 9241تفاعله أثناء المستخدم براحة والمتعلق (Perlman, 2002 : 2الكمبيوتر. ) شاشة فى المرئية العناصر مع

لتنظيم األساسية والقواعد المبادئ يلى(جالل )عمرو فيما ونستعرض*اإلطار محتوى

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

التفاعل. واجهة عناصر من عنصر أى

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

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

مبدأ االتزان مبدأ يصاحب أن يجب بل متزن، متناظر توزيع كل بين الخلط يتم ال حتى إطار مصطلح البحث واستخدم الشاشة، لمصطلح كمرادف إطار مصطلح يستخدم*

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

3

-1-

-2-

Page 4: تصميم واجهات التفاعل

اإلطار أن يظهر حيث ( التالى،3) شكل فى يتضح كما الوحدة بل متناظر بشكل عناصره توزيع رغم باالتزان يوحى ال األول

لمبدأ الفتقاده اإلطار إرجاء فى مبعثرة العناصر بان شعورا يعطى أعطى بعضها من العناصر تقريب الثانى اإلطار وفى الوحدة،(Lucas, 1991 : 57معا. ) واالتزان بالوحدة شعورا

الوحدة بمبدأ وعالقته اإلطار عناصر اتزان يوضح شكل

4

Page 5: تصميم واجهات التفاعل

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

إلى يؤدى التفاعل واجهة تصميم فى المألوفة الصور استخدام- يرتبط أن يجب لذلك النظام، مع للتعامل الالزمة اإلجراءات تقليل

البرنامج وبموضوع جهة، من المتعلم وبيئة بخبرة الشاشات تصميم استخدام المألوفة الصور ( منPark, 1993 : 72أخرى. ) جهة من

المألوفة، الخطوط واستخدام عليها، المتعارف اللونية األكوادمألوف. منظور من التعليمية الرسومات وعرض

التصميم يراعى أن اإلطار: يجب لعناصر المنطقى التصميم- فاإلطار التعليمى، البرنامج إطارات عناصر جميع فى المنطقى

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

لليسار المتجه السهم التالى، اإلطار يعنى لليمين المتجه السهمالسابق. لإلطار الرجوع يعنى

فال اإلطار؛ فى فارغة مساحات تترك أن اإلطار: يحسن تزاحم عدم- ويفضل واحد، إطار على المعلومات من كثير لوضع سبب توجد

أربعة أو ثالث عن الفقرة تزيد وال قصيرة، فقرات إلى النص تجزيئمزدوجة. مساحة بينها يفصل عبارات

جديد، إطار إنشاء يتم متى تقرير التدوير: يجب استخدام تجنب- فإن منفصلة، صفحات تنشئ لم فادا المعلومات، تقع وأين

اسفل من التدوير بشكل العرض فى تستمر سوف المعلومات فقد إلى به ويؤدى المتعلم، ضيق يثير التدوير هذا ألعالها، اإلطار على يصعب مما الثابت؛ اإلطار فى حدود نتيجة المعلومات بعض

البرنامج تقسيم دائما واألفضل البرنامج، فى مكانه تحديد المتعلم مسح أن حيث التدوير، إلى تحتاج ال والتى منفصلة صفحات إلى الجزء مكان جديد آخر جزء وعرض مشاهدته، تم اإلطار من جزء

المعلومات المتعلم يالحظ ال أحيانا اإلطار، باقى ترك مع الممسوح تحتاج التى الحاالت هذه مثل فى يفضل لذلك أضيفت التى الجديدة

المعلومات لتقديم جديدا إطارا تنشئ أن كثيرة معلومات عرضالجديدة.

المتعلم: كمناطق ومساعدة المعلومات لتنظيم اإلطارات استخدام- مفاهيم لوضع أو رجع يضع أو للسؤال المتعلم فيها يستجيب المكان بين التناسق يتم أن الفهم. ويجب على يساعد مما أساسية اإلطار من جزء فى تعليمات أو سؤاال تقدم وال اإلطارات، ووظيفة

الرجع. منطقة أو االستجابة لوضع الجزء نفس تستخدم ثم

5

Page 6: تصميم واجهات التفاعل

التفاعل مفاتيح

االنتباه: فيجب ولفت للتأكيد النصوص كتابة فى األبناط نوع- واألمثلة والعناوين الموضوعات رؤوس كتابة فى استخدامها

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

.(Kearsley, 1986 : 43- 48مختلفة. ) أنماط أربعة من أكثر يستخدم

التفاعل: واجهات ثانيا:أنواع

المصطلحات من الكثير مع المستخدم مع التفاعل واجهة مصطلح يرتبط Graphical User المستخدم مع الرسومية التفاعل مثل: واجـهة األخرى

Interface "GUI" (Bishop, 2002 : 1)المتعددة الوسائط تفاعل واجهة و التفاعل واجهة و"Multimedia User Interface "MUI المستخدم مع

Logical User Interface "LUI" (UNESCO, 1990 المستخدم مع المنطقية Auditory User Interface المستخدم مع المسموعة التفاعل واجهة و(2 :

"AUI" (Winn, 1994 : 211) …الخ .

التفاعل: واجهة تصميم ثالثا: مفهوم

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

وأنواعها صياغتها حيث من العرض(، )شاشات البرنامج إطارات وتصميم فى المستخدمة التعليمية الوسائط جميع تصميم وكذلك ومكوناتها، ومداها ولغة خطية ورسوم متحركة ورسوم ومتحركة ثابتة صور من المحتوى تقديم

شاشات تصميمات أحد يوضح التالى شكلال ويوضح وموسيقى، منطوقةالبرنامج:

6

الرئيسى العنوان

الفرعى العنوان

النص

المتحركة الصورالمكتوب

الرسوم أو المتحركة

الثابتة الصور الرسوم أو

التخطيطية

Page 7: تصميم واجهات التفاعل

التفاعل. واجهة تصميمات أحد يوضح شكل

الوسائط برامج البرنامج( فى )شاشات اإلطارات أنواع وتتعدد اإلطارات أنواع بعض توضيح ويمكن منها والهدف موقعها حسب المتعددة

يلى: فيما

المادة اسم عنوان على اإلطارات هذه : وتحتوىافتتاحية إطارات باستخدام وذلك البرنامج، بإنتاج قامت التى والهيئة الرئيسى والعنوانالمختلفة. الوسائط

كيفية عن للمتعلم وتوجيهات إرشادات تقديم فيها : ويتمإرشادية إطارات كيفية المتعلم لتعريف أو السؤال على اإلجابة كيفية أو البرنامج فى السير

التحكم.

إلكساب التمهيد أو التعلم موضوع على : وتحتوىتمهيدية إطاراتجديدة. معرفة المتعلم

كل نهاية فى المتعلم اختبار إلى اإلطارات هذه : وتهدفاختباريه إطاراتللمتعلم. النهائى االختبار أو وحدة

المعرفة على اإلطارات هذه المعلومات: وتحتوى تنمية إطاراتالمتعلم. يكتسبها أن يراد التى الجيدة والمعلومات

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

بالنص. مصاحبة أو منفرد المتحركة الرسوم أو المنطوقة

والحق كمترادفين، والتعزيز الرجع استعمال فى الكتاب بعض ويخطأ تتلو التى المعلومات تقديم عملية هو فالرجع مهما، تربويا فرقا بينهما أن

نقدم حينما ألننا المتعلم، على المعلومات هذه أثر فهو التعزيز أما االستجابة، أنها بمعنى لها، معززة المعلومات هذه تكون فقد االستجابة تلو معلومات

العقوبة موقع تقع أنها بمعنى سالبة، المعلومات تكون وقد االستجابة، تقوى المتعلم، إلى األثر هذا ويرجع االستجابة، لتكرار ميله وتثبط للمتعلم، بالنسبة

رجع أن أو يعززها، الصحيحة االستجابة رجع بأن نقطع أن نستطيع فال الذين المتعلمين من فكثير تكرارها، إلى الميل سيثبط الخاطئة االستجابة

7

القائمسابقة

إنهاءتالى

Page 8: تصميم واجهات التفاعل

بكمية رجع تلقى من يتضايقون قد واقتدار بسرعة تعلمهم فى يتقدمون يتقدموا لكى منه قليال قدرا يفضلون وقد الصحيحة، استجاباتهم يعزز كبيرة

فتحإيجابى. ) غير التعزيز ولكن إيجابيا فيها الرجع يكون حالة هذه بسرعة،(.61 ،1995الحليم: عبد الباب

بقاء يستمر أن المتوقع من أنه االستجابى االشتراط مبادئ أكدت وقد على الشرطى، المثير اقترن طالما اكتسابها بمجرد ما، شرطية استجابة

الظاهرة هذه على ويطلق00الالشرطى بالمثير الوقت، لبعض األقل(.1984،205ل. دافيدوف: لندا .) Extinction االنطفاء

تثبيت إلى تؤدى التعزيز أساليب تنويع أن سكنر نظرية أكدت كما زاهر، الغريبالتعليم. ) تأكيد إلى يؤدى وذلك الصحيحة، االستجابات

(. 59 ،1999بهبهانى: إقبال

الراجعة التغذية ( أن92 ،2000المنعم: عبد على) أوضح وقد التغذية كانت الرسالة فهم فإذا المستقبل، على الرسالة فعل رد هى

تحريك أو الموافقة على تدل كلمات صورة فى تكون كأن إيجابية الراجعة أما األسئلة، بعض على صحيحة إجابات صورة فى أو والخلف لألمام الرأس

كأن- يهز سلبية تكون الراجعة التغذية فإن الرسالة المستقبل يفهم لم إذا التى األسئلة عن صحيحة غير إجابات شكل فى أو واليسار اليمين جهة رأسهرسالته. على يعدل أو يغير أن للمرسل يمكن وبالتالى إليه توجه

المتعددة( أن الوسائط )برامج المفرد التعليم تصميم عند ويراعى مستوى ليعرف ما عمل من ينتهى عندما فورية راجعة تغذية للمتعلم يقدم بصورة المرتجعة التغذية تقدم أن ويراعى الهدف، نحو تقدمه ومدى األداء

-286 ،2000المنعم: عبد علىمختلفة. ) وبأساليب ومتنوعة متكررة287.)

معلومات تقديم أساليب اختالف حول الدراسات بعض أجريت وقد تزويد أن ( إلى2000فايد: محمود صالح) دراسة فتوصلت الرجع

استجابة خطأ حالة فى لها مختصر شرح مع الصحيحة باإلجابة المتعلم خطأ أم صواب إجابته عن المتعلم تعريف من التحصيل على أفضل المتعلم

فقط.

تصميم عند مراعاتها يجب التي االعتبارات رابعا:: 0 ت / الشاشا التفاعل واجهات

قدر إتاحة مثل، التفاعل واجهة تصميم عند األشياء بعض مراعاة المهم من بالزمن مرتبطين بصريين وسيطين جمع عدم الفارغة، المساحات من كاف التفاعل واجهة وثبات إطار كل فى تحكم مفاتيح وجود اإلطار، نفس فى

8

Page 9: تصميم واجهات التفاعل

فى بها المرتبطة والمفاتيح وخصائصها الواجهة خيارات تظل أن بمعنىالتفاعل. لواجهة خارجى إطار وجود اإلطارات، تتغير عندما تتغير وال مكانها،

على تؤثر عوامل هناك أن إلى التفاعل واجهة بثبات االهتمام ويرجع الخاطفة الرؤية ألن عليه االنتباه تركيز ومدى رؤيته، مدة مثل الشكل ثبات

أما دقيق، وغير مشوشا إدراكنا تجعل االنتباه تركيز وعدم للشكل، السريعة عن المختلفة المعلومات بتجميع البصرى للجهاز تسمح التى الكافية الرؤية

صحيح إدراك عنها فينتج مركز انتباه يصاحبها والتى ومكوناته، الشكل الشكل تصحيح على البصرى الجهاز تساعد أنها كما ومكوناته، للشكل(.96 ،2001محمد: فائقة على، )السيد

عليه أكد ما إلى التفاعل بواجهة يحيط إطار بوضع االهتمام يرجع كما مرور بعد البشرية العين إن ( حيث45 ،2001محمد: فائقة على، )السيد

متجانس شئ أى رؤية عن تعجز المتواصلة الرؤية من تقريبا دقائق عشر فإن تميزه واحدة حافة ولو الشيء لهذا ظهر إذا تميزه،أما حواف له ليس طبيعة من تلقائية بطريقة يحسن البصرى جهازنا ألن رؤيته من تتمكن العين

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

التصميم عملية عند ترتكب التى األخطاء بعض وهناك: اآلتى ومنها

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

(.52-51 ،2000الكريم: عبد

التفاعل/ واجهات تصميم ومعايير أسس خامسا: : . الشاشات

كاآلتى: المعايير بعض موسى أحمد أورد حيث وخصائص الخيارات استخدام فى االختصار بمعنى ، البساطة- 1

0 والعرض للتوجيه ضرورى هو ما على واالقتصار التحكم0 الفارغة المساحات من كافى قدر - إتاحة20 اإلطار داخل التفاعل واجهة عناصر - اتزان30 النصوص من أكثر الثابتة والصور الرسوم على - التركيز40 العين حركة مع اإلطار محتويات - تنظيم50 الواحد اإلطار فى األكثر على عناصر ثالثة - وجود6 كل فى وليس فقط األول اإلطار فى للبرنامج المنتجة الهيئة - ظهور7

0 اإلطارات0 اإلطار أسفل التحكم مفاتيح - وجود8

9

Page 10: تصميم واجهات التفاعل

القائمة – السابق – ) التالى إطار لكل تحكم مفاتيح - وجود9( مساعدة – خروج – الرئيسية

الواجهة خيارات تظل أن بمعنى ، التفاعل واجهة - ثبات10 عندما تتغير وال ، مكانها فى ، بها المرتبطة والمفاتيح وخصائصها

0 اإلطار يتغير0 نفسه اإلطار فى بالزمن مرتبطين بعدين وسيطين جمع - عدم110 بعدية عناصر تواجد دون الصوت استخدام - عدم12 أعلى الثابت وضع يكون متحرك ووسيط ثابت وسيط جمع - عند13

0 اإلطار يسار منتصف المتحرك اإلطار يسار0 باإلطار يحيط كامل إطار - وجود140 ألوان أربعة عن تزيد ال الشاشة فى المستخدمة األلوان - عدد150 المتعارضة األلوان - تخفيف160 اللونى التباين نقص - تجنب17 األحمر اللون مثل اللونى الزيع تسبب التى األلوان - تجنب18

. الصريحين واألزرق0 بالتدريج بالصوت مصاحب الموضوع عنوان - ظهور190 اإلطار محتويات عرض فى - التدرج200 يسبقه الذى اإلطار بمحتوى اإلطار محتوى - ربط21 استجابة كل بعد ، الشاشة على معروضة المعلومات تظل - أن22

0 جديد إطار إلى االنتقال تلميذال يقرر حتى0 الواحد اإلطار فى سؤال من أكثر عرض - عدم23 تحقيق من بانتهائه تلميذال تفيد أخيرة رسالة البرنامج يقدم - أن24

األهداف0 البرنامج من للخروج واحد اختيار - وجود25 )أحمدوتشكره تلميذال تودع ودية بعبارات البرنامج ينهى - أن26

(64 موسى،ص

يلى: كما المعايير هذه بالتفصيل أورد(1999جودت) مصطفى ان اال : التفاعل واجهات تصميم فى عامه - مبادئ1

بتصميم تتصل التى العامه المبادئ من عددا يلى فيما نستعرض: التعليمية الكمبيوتر برامج فى التفاعل واجهات

البساطة : البساطة مبدأ التفاعل واجهات تصميم فى شيوعا المبادئ اكثر من

واجهة عناصر عنصرمن اى فى البسيط التصميم تفضيل الى ويشيرالتفاعل.

الفارغة المساحات من كافى قدر اتاحت : تصميم فى الفارغه المساحات تكلف ال المطبوعة المواد يعكس

العناصر. باقى وضوح على تساعد ولكنها شيئا المبرمج االطارات

االطار عناص اتزان :

10

Page 11: تصميم واجهات التفاعل

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

عن يتحقق والذى الوحدة مبدأ االتزان مبدأ يصاحب ان يجب بل

كوحدة. تدرك ان الى المتقاربه العناصر ميل طريق

الكمبيوتر لشاشات المصرى المركز : من نبدأ بحث العناصر تنظم ان يجب لذلك بالضبط الوسط فى هو

. الدارس عين تركيز حيث من المناطق اكثر النه الوسط

المألوفه الصور استخدام : الى يؤدى التفاعل واجهة تصميم فى المالوفه الصور استخدام ان

يرتبط ان يجب لذلك النظام مع للتعامل االزمه االجراءات تقليل

من البرنامج جهةوبموضوع من المتعلم وبيئة بخبره االطارات تصميم

المتعارف اللونية االكواد استخدام المألوفة الصور وتشمل اخرى جهة

من التعليمية الرسومات وعرض المألوفة الخطوط واستخدام عليها

مألوف منظور

االطار لعناصر المنطقى التصميم : البرنامج اطارات عناصر جميع فى المنطقى التصميم يراعى ان يجب

النتعلم مع تفاعل واجهة كونه بقدر فنيا عمال ليس ماالطار التعليمى

لطلب االستفهام عالمة استخدام المنطقى التصميم اشكال ومن

الورقة ،شكل السابق االطار يعنى لليمين المتجه السهم المساعدة

ضمن الرموز تلك معانى على ينص ان ويجب ، تقرير طباعة يعنى

البرنامج. اطارات فى شارحة بعبارات أو االستخدام دليل

فى النصوص من أكثر الرسومات على التركيز

: االطارات تصميم الى اعادتها فيجب كثيره نصية عناصر على االطار احتواء وعند

أو المكتوب النص مقابل فى الرسومية الجوانب على ليركز المصمم

. المسموع

نافذة من أكثر استخدام : يطلق والذى االطار نفس فى نافذة من أكثر استخدام الى نضطر قد

مساحة استغالل على ياعد والذى المتعددة النوافذ اسلوب عليه

الوقت نفس فى وظيفة من أكثر أداء يمكن حيث اكبر بشكل االطار

11

Page 12: تصميم واجهات التفاعل

المبادئ مراعاة يجب البرنامج فى نافذة من أكثر استخدام ،وعند

:- التالية

النافذة الجديدة النافذة تغطى ان الضرورى من ليس

هناك ان طالما بجوارها نظهر ان يمكن بل السابقة

. الشاشة على كاف مكان يلى ما النوافذ تجاور مسببات من :

i.متجاورتين نافذتين من المعلومات مقارنة فى الرغبة .ii.مثل المعنى لوضوح معا النافذتين كال اظهار الى الحاجة

. النصى التعليق بها واخراى الرسومات بها نافذةiii.النافذة مع التفاعل فى االولى النافذة بينات استخدام

بها التعويض يتم االولى النافذة فى ارقام ،كورود الثانية

الثانية بالنافذة معادلة فى

يلى ما النوافذ تراكيب مسببات :i.فى التى النافذة من الواجهة فى التى النافذة تتفرع

بين العالقة لبيان التراكيب يلزم وهنا ، الخلفية

. الموضوعينii.الغير والنافذة ، السطح على النشطة النافذة تكون

الخلفية فى نشطةiii.من الرغم ،على متجورتين لنافذتين االطار يتسع ال

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

المتعلم. تشتت ال حتى الشاشة على تحتاجها والمعا،ومن المستخدمة النوافذ ترتيب باعادة للمتعلم السماح

تبعا الراسى أو الفقى ،التصغير،الترتيب التكبير ذلك أشكال

يتطلب عندما فقط الشرط هذا ،ويتحقق المتعلم لراحة

الوقت نفس فى نافذة من أكثر مع التفاعل المتعلم ن البرنامج

اطار من أكثر استخدام : من أكثر كذلك يستخدم االطار نفس فى نافذة من أكثر يستخدم كما

يكون ان يفضل بل البرنامج اطارات لجميع موحد نمط تصميم

موحدا تصميما يوجد ،بحيث االطار وظيفة عن معبرا التصميم

باطارات خاص اخر تصميم عن يختلف ، المعلومات عرض الطارات

بين باالتساق االحتفاظ ،ويجب المساعدات الطارات واخر ، االسئلة

الموحد التصميم مثال ، الوظيفة بنفس تقوم التى االطارات تصميم

12

Page 13: تصميم واجهات التفاعل

أن قبل حتى يدركها المتعلم يجعل التحذيرات أو التوجيهات الطارات

تحذير. كلمة يقرأ

وظيفية مناطق االطارالى تقسيم : البرنامج اطارات من نوع كل فى الوظيفية المناطق تحديد يجب

ظهور مناطق ،كذلك التعليق فيها يظهر التى المناطق ،كتحديد

ما مراعات ويجب ، التفاعل ازرا فيها التى ،والمناطق المساعداتيلى:-

المحتوى. مع تتناسب مساحات تحديدالحواف حول الصغيرة الوظيفيه المساحات وضع

الهامة العناصر ووضع ، الشاشة وسط فى ،وليس

الشاشة. وسط فىيجب ،كما مألوفة منطقية اشكال فى العناصر تنسيق

االول العنصر يكون العربية اللغة قراءة اتجاه مراعاة

فى يكون االنجليزية وفى ، الشاشة مين اعلى فى

الشاشة. يسار اعلى

تتجاور بحيث البعض ببعضها المتصلة العناصر جميع

عن لتمييزها باطار احاتطها يمكن كما ، معا

. االخرى العناصر

االطار فى ازرار استخدام :. اليمين جهة استخداما االكثر االزرار جعل يفضل

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

) > العالمة يشبة مسار فى الشاشة أسفل فى اخرى مرة لليسار

) < (. العالمة اتجاة فى فتنظم العربية اللغة اطارات ،أما(

: البرنامج اطارات بناء -تدريج2 مرة يظهر ال محتواها ان فى الكتاب صفحات عن البرامج اطارات تتميز

تدريجية بصورة االطار محتويات بناء يتم حيث الكتاب صفحة بعكس واحدة المستمر التحديث مع ، عليها فقط المستخدمة العناصر تبقى بحيث

: التالية للقواعد وفقا لمحتوياتها

13

Page 14: تصميم واجهات التفاعل

االطار داخل العناصر عرض : اظهار يتم بل ، واحدة مرة العناصر من كبيرة كمية عرض يجب ال

مثال بالفارة كنقرة المتعلم من اشارة البرنامج ينتظر ثم اثنين أو عنصر

المتعلم ويعطى ، التالى العنصر اضافة قبل معين مفتاح ضغط أو ،

. الذاتية لسرعته وفقا االطار عناصر مع يتوافق لكى الفرصة

السابق بالمحتوى االطار ربط : للمعاونة االطار ضمن السابقة المعلومات من كافى قدر ترك يفضل

االطار يزدحم ال حتى مبالغة دون ولكن ، الجارى النشاط على

تظل المعلومات اى تقدير التربوى المصمم مهام ومن ، بالعناصر

. يحذف وايها االطار ضمن

الطويلة النصوص تقسيم : تظهر بحيث ، بالتدريج االطار فى الطويل النص محتوى يظهر ان يجب اخر جزء لعرض المستخدم من اشارة البرنامج ينتظر ثم جمل عدة

. السابق النص على االبقاء مع النص من

جديد اطار لبداية االشارة : أو صوتى لمؤثر مصاحبته طريق عن جديد اطار بدية تمييز يمكن

البرنامج من جديد جزء فى بدأ انه المتعلم يدرك بحيث مميز بصرى

. السابق لالطار تابع وليس

: البرنامج فى اللون - توظيف3 GUI الرسومية المستخدم مع التفاعل واجهة فى الهامة المكونات احد اللون

يمكن اتصال قناة كونه الى جماليا أو فنيا عمال كونه يتعدى اللون واستخدام أخرى،ولتحقيق مفاهيم نحو االنتباه وجذب ، معينة مفالهيم تدعيم خاللها من

: يلى ما مراعاة يجب التعليمى البرنامج فى للون االمثل التوظيففى ضرورية الغير االلوان تجنب : وظيفيا اللون استخدام

هامة غير اماكن الى المستخدم عين يقود اللون تجعل ،وال النص

وبدال ، فيها المبالغ ،والخلفيات المتجاوره المناطق بين كالفواصل

:- التالية الحاالت فى اللون يستخدم ذلك من

i.من فئة لكل معبر لون باستخدام المختلفة العناصر بين التمييز

العناصر باقى عن يميزها العناصرii.النص باقى عن مختلف بلون العناوين تمييز ،مثل االتمام تركيز

iii.لها موحد لون باستخدام المتشابهة العناصر بين الربط

14

Page 15: تصميم واجهات التفاعل

iv.الى تضطر فقد: الطويلة النصوص داخل البحث عملية تسريع

ن المساعدات اطارات مثل واحد اطار فى مطول مقال كتابة االساسية الكلمات تمييز فى اللون استخدام يفضل حيث

. النص فى البحث عملية فى لالسراع

يلى ما خالل من وذلك : للهدف المناسب اللون تخير :i.بينها المستخدم يخلط ال حتى قليلة لونية أكواد استخدام

للعناوين أخر ولون ، االساسية للكلمات معبر لون ،كاستخدام

الهامه للمالحظات ثالث ولونii.خريطة رسم فعند ، عليها المتعارف الطبيعية بااللوان التمسك

االخضر واللون المائية للمسطحات االزرق الون يستخدم مثال

على يسهل ،مما للصحارى االصفر واللون للزراعات

المحتوى. فهم المستخدم

واللون الزهرى اللون وخاصة : الصارخة االلوان تجنب

وفقا تختلف النها االلوان من جدا الفاتحة والدرجات ، االرجوانى

عرضها الممكن االلوان بعدد يتعلق فيما الحاسبات فى العرض لنظام

ونمط ، لون عرض ونمط ، لون عرض ونمط ، اللون أحادى وابرزها

النمط فى ذكرها السابق الدرجات تظهر وال ، لون مليون عرض

. له التالية الثالثة االنماط بين درجاتها وتختلف اللون أحادى

االزرق واللون االحمر اللون مثل : المتعارضة االلوان تجنب

فى االلوان تلك درجات تميز لن البشرية العين الن ، جنب الى جنبا

مع االحمر اللون استخدام عدم يجب كما ، صحيح بشكل الحالة هذة

اللون ،أو االزرق اللون مع االخضر اللون استخدام أو ، االخضر اللون

االصفر. اللون مع االزرق

قدر على المحافظة من البد : اللونى التباين نقص تجنب

االبيض اللون استخدام ينبغى فال ، واالرضية الشكل بين التباين من

. االسود اللون مع الغامق االزرق اللون وال ، االصفر اللون مع

االزرق اللون استخدام تجنب يجب : اللونى الزيغ تجنب

ذلك ويرجع ، طويلة نصوص اى كتابة فى الصريح االحمر أو الصريح

15

Page 16: تصميم واجهات التفاعل

على قادرة غير العين شبكية تجعل التى اللونى الزيغ خاصية الى

. عائمة فتظهر ، االلوان تلك تفاصيل فى التركيز

فى الون توظيفا عند اللونى العمى حاالت مراعاة

يصابون المسخدمين جميع ان الدراسات بينت : التفاعل واجهة

الضوء فى الكمبيوتر الىشاشة النظ عند المؤقت اللونى بالعمى

وعدم التفاعل واجهة فى اللون توظيف فى الحرص ،لذلك المنخفض

. االلوان تمييز فى المتعلم قدرة على االعتماد

: المكتوب النص - عرض4 على تعرض مكتوبة بيانات من الشاشة تحتويه ما كل هو المكتوب النص

واجهات فى النص استخدام أسس ومن ، البرنامج مع تفاعله أثناء المستخدم: يلى ما التفاعل

الكتاب كصفحة ليست الكمبيوتر شاشة : ان حيث أكبر ببنط وتكتب النص من أقل قدر على تحتوى أن لذلك

. الكتاب وضوح مقدار عن تقل الكمبيوتر شاشة وضوح مقدار

بعبارات واستبدلها الفقرات استخدام تجنب

: مختصره تلغرافية يجهد يجهد الشرح فى المطولة الفقرات استخدام ان وجد فقد

. بالملل ويصيبه المستخدم

الفقرات فى قصيرة سطور استخدام : حركة تتطلب القصيرة الطور ان الجريبية البحوث خالل من وجد حيث. القراءة فى أقل عين

االطار نفس على والصورة النص بين الجمع :: التالية الحاالت فى ضروريا الجمع هذا ويصبح

الرسومات فى الحال هو كما الرسم من جزءا النص كون

. البيانيةورسوم الخرائط فى كما الرسم لمحتوى شارحا النص كون

القليل ربما ولكن ، الكلمات آالف تساوى قد ،فالصور التشريح

فبدون ، الصورة تاثير ن تضاعف الصحيح مكانها فى الكلمات ن

ان يجب لذلك ، فهمه يصعب البيانى الرسم محاور على الكتابة

16

Page 17: تصميم واجهات التفاعل

نفس فى الرسم مع يكون وقد ، للرسم مجاورا النص يكون

يفضل فانه مطولة شروح الى تحتاج التى الحاالت وفى ، الكتلة

شروح اضافة مع االساسية العناصر على النص يركز أن

. مسوعةفى كما مساعدا عنصرا والرسم ، االساس هو النص كان اذا

. المفاتيح لوحة على الكتابة تعليم برامجالمعنى وضوح على الحرص :

لديه ليس الكمبيوتر طريق عن يتعلم الذى المتعلم فان الكتاب بعكس قاموس احضار أو الكلمات معانى فى التفكير فى يفقده الذى الوقت

، معين بوت المتعلم استجابة تحدد ما فغالبا ، معينة عبارة معنى لفهم. السؤال فهم محاولة فى المتعلم وقت اضاعة يجب فال لذا

على متقاربه ببعض المرتبطة العبارات وضع

. الشاشة

من عينة على ونوعة الخط حجم تجريب

فى استخدامه على الموافقة قبل المستفيدين

. انقرائيته من للتاكد البرنامج

ملساء حواف ذات خطوط استخدام : داخل النص كل كتابة فى المزخرفة أو التقليدية الخطوط وتجنب

. البرنامج

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

سهولة من التاكد يجب لذلك الكلمة من لموقعه وفقا يتغير العربى

تعريب شفرة استخدام يجب كما. الحاالت جميع فى الخط قراءة

دعى ما وهذا. عرض منصة من أكثر بين البرنامج تبادل تتيح موحدة

برامج فى التفاعل واجهة فى النص لتعريب معايير اصدار الى

. القياسى للتوحيد الدولية المنظمة فأصدرت الكمبيوتر

النص تمييز : تمييز وسيلة من اكثر استخدام أو النص تمييز فى المبالغة تجنب سبيل على. المستخدم تشتت الى يؤدى ذلك الن متجاور بشكل

17

Page 18: تصميم واجهات التفاعل

كلمات بجانب سوداء أحرف ذات كلمات استخدام يجب ال المثال

. السطر نفس خطفى تحتها وأخرى مائلة(: الحرف ارتفاع) المثالى الخط حجم ، الكمبيوتر شاشة حجم منها عوامل بعدة للخط االمثل تحديد يتأثر

وبشكل المستخدم لدى البصريه والقدرات ، للعرض النقطيه والكثافة

لذلك ، الخط حجم صغر كلما للشاشة النقطيه الكثافة زادت كلما عام

العرض كثافة بالضبط يحدد ان التفاعل واجة مصمم على يجب

. المناسب الخط حجم استخدام ثم ومن ، المثالى

للحرف االمثل الحجم حساب : التالية المعادلة األنسى للمعايير االمريكى الوطنى المعهد حدد

الحرف ارتفاع لحساب زاوية* الرؤية مسافة ( *0.01745) ثابت( = االرتفاع) الحرف حجم

. الرؤية

: الثابتة والصور التعليمية الرسومات - عرض5 بل فقط الكتوب النص على التعليمية المتعددة الوسائل برامج التقتصر

والصور التعليمية الرسومات االستخدام الشائعة الوسائل من

عام بشكل التعليمى الموقف فى توظيفها تحدد استخدام* الفوتوغرافية

االسس ومن الخصوص وجه على التعليمية الكمبيوتر برامج برامج وفى

برامج فى الفوتوغرافية والصور التعليمية الرسومات بتوظيف الخاصة

: يلى ما التعليمية الكمبيوتر

تؤدى ان يمكن جدا كثيرة تفاصيل على التى الصور

االمكان قدر التبسيط يجب لذلك ، المتعلم انتباه تشتت الى

.

مظللة الغير الخطية الرسومات استخدام :: التالية الحاالت فى مظللة الغير الخطية الرسومات تستخدم

الهندسية والرسومات ، المشروعات ومخططات ، التدفق خرائط .

(. االشارات وليست الرموز) المرور ،كعالمات المجردة الرموز

المسلسلة الخطية الرسومات :: التالية الحاالت فى المسلسلة الخطية الرسومات تستخدم

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

والملونة المظللة الخطية الرسومات استخدام :

18

Page 19: تصميم واجهات التفاعل

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

. الدمويه الدورة رسم فى واالزرق االحمر اللونين استخدامللرسم الثالث بالبعد االيحاء .الخرائط رسم عند االلوان تستخدم ان يجب .الرسومات فى التظليل أو االلوان استخدام يفضل

. البيانيةالخرائط عرض :

الرسم مفتاح بجوارها يظهر ان يجب خريطة على البرنامج احتواء عند. الرسم ومقياس

النسب على المحافظة : الطبيعية النسب على تحافظ ان يجب التعليمية الخطية الرسومات

. الكاريكاتيورية الرسومات بعكس الرسم فىالكاريكاتيورية الرسومات :

عدم بشرط التعزيز فى الكاريكاتيورية الرسومات استخدام يمكن. المتعلم من السخرية

االصغر الى االكبر من البدء : البدء يجب ، الموضوع لنفس أكبر رسم من جزءا الرسم يكون عندما مصر خرطة دراسة عند مثال ، االكبر الشكل من الرسم موقع بتحديد

القلب دراسة وعند ، افريقيا الى بالنسبة موقعها بعرض البدء يجب

موقعه ثم موقعه ثم االنسان جسم لحجم ونسبته بموقعه البدء يجب

. منفرد بشكل ودراسته القلب تكبير قبل الدورى الجهاز منالداخل الى الخارج من البدء :

عرض يجب اخر رسم تحت الطبيعة فى مستقرا الرسم كان اذا الهيكل دراسة فعند ، الداخلى التكوين عرض قبل اوال الخارجى الرسم

بنسبة انسان صورة استعراض يفضل االنسان لجسم الغظمى

بأحد وذلك العظمى الهيكل استعراض ثم البداية فى الطبيعة

: الطريقتين وذلك الداخلى الشكل مع الخارجى الشكل يتجاور : التجاور(1

من عنصر كل موقع وادراك بينهما المقارنة من الدارس ليتمكن

. الخارجى للشكل بالنسبة الداخلى الشكل عناصر بالفأرة عليه النقر وعند أوال الخارجى الشكل يظهر : االبحار(2

ويفضل ، الداخلية المكونات ،ويظهر الخارجى الغطاء يختفى

بحيث والخروج الولوج خاصية للمستخدم البرنامج يعطى ان

أو ، وتكبيره العام الشكل عناصر من عنصر على التركيز يمكن

19

Page 20: تصميم واجهات التفاعل

المتحف فى الحال هو كما اخر عنصر الى عنصر من الدخول

. التخيلى

الشكل وحدة على االبقاء : واذا كلية كوحدة تميزة صفات للشكل ان الجيد الشكل لقانون تبعا

تبعا المرئيه قيمته تأثرت الجديدة المؤثرات أو عناصر عليه اضفت

الشكل تمييز يصعب بحيث الجديدة المؤثرات أو العناصر تلك لقوة

الصورة محتويات حول اطار اضافة فان االغالق لقانون وتبعا ، االصلى

. متحد كل انه على الشكل تدرك العين يجعل

البرنامج الكساب الفوتوغرافيه الصور استخدام

. الواقعية من المزيدالصوره تبرز ان يجب : الموضوع خصائص اظهار

قدر البعد مع التعلم موضوع خصائص التعليمية الفوتوغرافية

. مألوفة الغير والزوايا الفنية عن االمكانالدارس يكون ال حتى ، الرمادية الصورة استخدام تجنب

موضوع تدريس عند خاصة التعلم موضوع عن خاطئ انطباعا

. مرة الولعلى الفوتوغرافية الصورة حجم فى المبالغة عدم

ذلك من وبدال ، كبيرة تخزينية مساحات تتطلب النها ، الشاشة

. المقربة اللقطات تستخدموالفوتوغرافية الخطية الصور بين الجمع :

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

والصور ظاهريا مختلفة تبدو قد الطيور الن بعينه طائر تصوير يصعب

لذلك ، التعميم على الطالب تساعد لن بعينه لطائر الفوتوغرافية

ذلك يلى للطيور التشريحية الصفات يجمع خطى رسم تضع ان يفضل

. الصفات تلك فيها تظهر مختلفة لطيور الصور عددمن

: المتحركة الرسومات -عرض6 التى المسلسلة الثابتة الرسومات من عدد اال هى ما المتحركة الرسومات

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

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

: البرنامج

20

Page 21: تصميم واجهات التفاعل

نمو كمراحل ، المتغيرة أو المتحركة االشياء عن التعبير

. البسيط البندول حركة أو نباتتمثيلها يمكن ال التى المجردة المفاهيم عن التعبير

هيدروجين بذرتين االكسوجين ذرة اتحاد فى كما ، الواقع فى

النظرية فى بالحركة الضوء تأثير تمثيل أو ماء جزئ لتكوين

. النسبيةالرسومات على المحاكاة برامج اغلب تعتمد

. االبعاد ثالثية المتحركةفى والتنوع ، البرنامج نحو المتعلم انتباه جذب

. الملل يبعد مما المفاهيم عرض اساليب

بالفيديو تصويرها يمكن ال خطرة مواقف عن التعبير ، . يعمل ذرى مفاعل كقلب

طويلة زمنية فترات فى تحدث مواقف عن التعبير تآكل القارات، تحرك ،مثل بالفيديو ادراكها يصعب

. الرسوبية الطبقات فى البترول تكون ، الشواظئتسجل ولم ، الماضى فى حدثت مواقف عن التعبير

المنقرضة. والكائنات ، الكواكب نشأة مثلحدثت عديدة عناصر بين من واحد عنصر تجريد

أما هو كما الواقع تصور الفيديو فلقطة سويا، وتستغنى الموضوع تأخد أن فيمكنها المتحركة الرسومات

الدراس. تشتت قد والتى المحيطة العناصر عنالرسومات استخدام عدم دواعى بعض

المتحركة:oكالفلكلور. بالفيديو تسجيلها يمكن اجتماعية مواقف عن التعبيرoهنا ، بالبيئة الكائن بتفاعل يرتبط ظاهر سلوك عن التعبير

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

oالمقدمة تيترات كاستعراض متتابعة، ثابتة صور عن التعبير ، متتابعة ثابتة بصور المتحركة الرسومات عن االستعاضة فيمكنزمنيا.

oالتعليمية: الكمبيوتر برامج فى المتحركة الرسومات توظيفoالنصى التعليق عن الرسم محتوى على الصوتى التعليق يفضل

الرسم بين المستخدم عين يشتت األخير ألن المكتوبالمرتبط- نفسه. والنص – زمنية بفترة المتحرك

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

21

Page 22: تصميم واجهات التفاعل

oاال المتحركة الرسومات داخل اللون استخدام فى المبالغة عدم قلت كلما الرسم ألوان قلت كلما ألنه ذلك، الموضوع تطلب اذا

األجهزة على بكفاءة عمل وكلما ، لتخزينه المطلوبة المساحةالمختلفة.

oالرجع فى المتحركة الرسومات استخدام امكانية (FeedBack) المتعلم لمكافأة أو ، الخطأ حالة فى الصحيحة االجابة لتوضيح

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

الرسم يستخدم أن يجب ال كما ، المتعلم مستوى حول خاطئةالمتعلم. من السخرية فى المتحرك

oاالعتبار فى الوضع مع ، مالئمة المتحركة الرسومات حجم جعل التخزينية المساحة زيادة يقابله الحجم زيادة فى المبالغة أن

الرسم تمييز تجعل الحجم تقليل فى المبالغة أن كما ، المطلوبةالتعليمية. مميزاته الرسم يفقد ثم ومن ، السهل باألمر ليس

oثابتة الرسم أجزاء وباقى يتحرك الرسم من جزء كون حالة فى فيفضل( جسم فى يخفق قلب كرسم) اطار يقتصر أن االنسان

الخلفية فى وتوضع ، الجزء ذلك على المتحركة الرسومات التخزينية المساحة فى الفاقد توفر وبالتالى ، ثابتة صورة

للبرنامج.oاطار 14.5بسرعة المتحركة الرسومات اطارات معظم تعمل

االحساس لتعميق االطارات تلك عدد زيادة ،ويمكن الثانية فىالتخزين. متطلبات زيادة يعنى ذلك ان اال ، الطبيعية بالحركة

oالبرامج فى االبعاد ثالثية المتحركة الرسومات استخدام يمكن تخزين ومساحة ، أطول اعداد فترات تتطلب انها اال ، التعليمية

الظل واستخدام التفاصيل اظهار حيث من أدف أنها اال ، أكبرالمتعلم. اقناع ثم ومن والنور

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

: الفيديو لقطات - عرض7برنامج فى الفيديو استخدام دواعى

التعليمى: الكمبيوترoيكسب حيث الحركة على تعتمد التى والمهارات األحداث اظهار

بالواقعية. االحساس الموضوع الفيديوoاما ، طبيعية وبطريقة مباشرة يراه أن يستطيع ماال للمتعلم اظهار

ماضية زمنية فترة فى وقوعه بسبب أو المتناهية، لدقته أو لخطورته لحدوثه ( أو نبات )كنمو ادراكها يصعب طويلة زمنية فترة فى أو

22

Page 23: تصميم واجهات التفاعل

لندرة ذلك( أو عن الناشئة والموجات الماء فى كتلة بسرعة) كسقوطنيزك(. ) هبوط الحدوث

oالبرنامج. نحو المتعلم اهتمام لجذب يستخدمoالتصحيحى الرجع فى تستخدم Corrective FeedBack، فى تستخدم وال

التعزيز.oاالنسانية. والعواطف الدوافع اظهار فى تستخدم

برنامج فى الفيديو استخدام عدم دواعى التعليمى: الكمبيوتر

يتطلب الفيديو ان حيث ، اللين القرص خالل من تعمل التى البرامج بمساحة فيديو لقطة عرض فان المثال سبيل فعلى كبيرة، تخزينية مساحات

بايت. ميجا4.5 تخزينية مساحة يتطلب ثانية42 لمدة بكسل160*120oفيها تظهر ال ثابتة مواقع الفيديو لقطات تصور أن يجب ال

فوتوغرافية. بصور عنها االستعاضة الحركة) كاألهرامات( ويمكنoمن أكثر فيها المتحركة الرسوم استخدام يفضل حاالت هناك

السابقة. الفقرة فى تناولناها الفيديو لقطاتفى الفيديو توظيف أسس

التعليمى: الكمبيوتر برنامج محاولة فى المتعلم وقت تضيع ال حتى مألوف غير منظور من تصور - ال

المشهد. محتوى فهم والتخزين ، الصورة وضوح يتحقق بحيث ، الفيديو نافذة حجم - مالئمة

يكون المناسب الحجم أن التجارب بينت وقد ، الطبيعية والحركة ، األقل)نقطة(. بسكيل160*120

اللقطات استخدام يفضا لذا نسبيا صغيرة فيديو نافذة الستخدام - نظرا ونتجنب ، مفيدة الغير العتاصر الكادر من يستبعد بحيث االمكان قدر المقربة

العامة. اللقطات حالة فى اال ، الفيديو لقطات عرض فى الطبيعية السرعة - استخدام

بسرعة كتلة( أو ) انفجار البطيئة االبالسرعة تدرك ال التى األحداث تصويرالقمر..( . حركة نبات، ) نمو الطبيعية السرعة تفوق

تعليمى عمل تعد أنك وتذكر ، ومنطقية طبيعية الكاميرا حرجات - جعل دعائى. وليس

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

زادت المشهد فترة زادت كلما ألنه ، االمكان قدر التخزينية المساحة - توفيرطريق: عن ذلك ويتم ، المطلوبة التخزينية المساحة

فقط. المحورية األحداث اظهارمن المستخدم ليتمكن التكرارات استخدام اتاحة يجب

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

تثبيت فى الرغبة حالة وفى ، بالصور استبدالها يمكن

23

Page 24: تصميم واجهات التفاعل

تثبيت مفتاح اتاحة فيفضل ، متحرك مشهد من جزءثابت. مشهد فى ثوان عدة اضاعه من بدل االطار

التعليمية: البرامج فى الصوت - توظيف8 وترمز المتعددة، التعليمية الوسائل برامج فى أساسى عنصر الصوت

وهىAUI باألحرف البرنامج فى الصوت تصميم الى البحوث من الكثير ما كل ضمنها ويدخل ، المستخدم المستخدم تفاعل واجهة لمسمى اختصارمعه. المستخدم تفاعل أثناء البنامج عن ويصدر الدارس يسمعهالبرامج فى الصوت استخدام مجاالت

التعليمية: لتنبيه جرس صوت كاصدار ، المستخدم فيه وقع خطا على - الداللة

Beep عليه يطلق ما وهو ، الخطأ المفتاح على ضغط انه المستخدمSoundآخر. الى برنامج من يختلف قد أنه رغم

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

ويجب ، الخطأ لبيان أو تعزيز كأداة سواء ، الرجع فى الصوت - استخدام استخدامه. فى المبالغة عدم

النصوص تجنب فى الرغبة عند الدرس موضوع على الصوتية - التعليقات . الطويلة المكتوبة

الصوتية. المؤثرات طريق عن التعلم ببيئة المستخدم - اقناع البرنامج. فى الصوت استخدام فى االسراف - عدم

الصوت: ادراك قوانين من لقانونين التعليمى البرنامج فى الصوت ادراك عملية تخضع

Good الجيد االستمرار قانون هما الجشتالط النفس علمContinuationاالغالق وقانونClosure، المدركات مجال فى المستخدمين

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

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

بامج فى الصوت لتوظيف عامة ارشادات : التعليمية الكمبيوتر

لها، المصاحب الوظيفة مع متسق المستخدم الصوت يكون أن يجب- عن ويختلف االيجابى أو السلبى التعزيز صوت عن يختلف االنذار فصوتأخرى. صوتية مؤثرات

ال اللفظية- حتى غير– الصوتية الرموز استخدام فى االسراف - عدم المستخدم. مخيلة فى تختلط

المستخدم. على معناها يختلط ال حتى المتقاربة النغمات - تجنب

24

Page 25: تصميم واجهات التفاعل

أو المساعدات داخل البرنامج فى المستخدمة الصوتية الرموز - تعريف للبرنامج. المرافق الكتيب فى

أراد. متى اللفظية الرسائل الغاء فى التحكم من المتعلم - تمكين يتم أن يجب بل ، المرئية التفاعل واجهة عن مستقال الصوت يستخدم - ال

يظهر ما كل ربط يشترط ال ولكن ، الشاشة على المستخدم يراه بما ربطهصوتية. برسالة الشاشة على

المستخدم انتباه جذب على قدرة أكثر لكنه ، الزوال سريع مثير - الصوت تتطلب عندما الصوت استخدام يجب لذلك ، الشاشة الى ينظر ال الذى

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

التعليمية: الكمبيوتر برامج واقعى آخر صوت لمحاكاة الجهاز يصدره صوت ،أى الصوتى بالمؤثر يقصد وصوت الزجاج، انكسار كصوت معين، لفعل مصاحب الطبيعة فى يحدث الى الصوتى المؤثر ويهدف الشارع، فى السيارات وصوت ، البحر أمواج المؤثر يكون وأحيانا البرنامج، له يقدمها التى البديلة بالبيئة المستخدم اقناع

صوت من القلب كفاءةعمل كتمييز نفسه، التعلم موضوع هو الصوتى بنفس المؤثرات تلك تسجيل البرنامج واضع يراعى أن يجب لذلك نبضاته،يلى: ما مراعاة يجب كما ، الواقع فى عليها تكون التى الدرجة

القناعEnvironmental Sound بيئى كصوت استخدم اذا الصوتى المؤثر فى عليه يتواجد الذى المستوى بنفس يكون أن يجب البديلة بالبيئة المتعلممصطنعة. تبدو قد التى المؤثرات حشد فى المبالغة دون ، الواقع

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

أن يفضل – مثال المطر كصوت – الخلفية في تكون التي الصوتية - المؤثرات – حدث عن تعبر التي الصوتية المؤثرات , بينما تدريجيا تختفي وأن تظهر

. فجأة وتختفي تظهر ما فغالبا – سيارتين بين كحدث ال – القلب خفقان كصوت – للتعلم موضوعا الصوتية المؤثرات تكون - عندما

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

نصية رسالة يصاحب , قد الرجع أنواع من كنوع الصوتي المؤثر - يستخدم , الرجع في الصوتية المؤثرات استخدام في االقتصاد , ويجب اليصاحبها وقد

ويشترط الخاطئة لالجابة وآخر الصحيحة لالجابة أحدهما مؤثرين استخدام. المستخدم من السخرية أو المبالغة عدم

برامج في الموسيقى توظيف أسس : التعليمية الكمبيوتر

25

Page 26: تصميم واجهات التفاعل

تسجل , وهي الصوتية التسجيالت أشكال من آخر شكل الموسيقى : بطريقتين

يتم حيث واقعي تسجيل , وتعطيDigital Music الرقمية الموسيقى* أنها , اال الصوت مكبر طريق عن بالفعل يحدث الذي الصوت تسجيل(. دقيقة لكل ميجابايت15 ) حوالي كبيرة تخزينية سعت تتطلب

كاختصار MIDI كذلك عليه , ويطلق النغمات بناء اعادة أسلوب* لم وان األسلوب , وهذاMusical Instrument Digital Interface للمسمى

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

اصطناعيا يبدو قد أنه , اال الرقمية الموسيقى أسلوب يتطلبه مما 100/1. المطلوبة النتائج يحقق فال اآلالت بعض مع

األسس التعليمي البرنامج في الموسيقى استخدام ويحددالتالية:

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

. , فاللحن الموقف عن التعزيز في المستخدم اللحن يعب أن - يجب

في وأقصر ايقاعا أسرع الغالب في يكون الصحيحة االجابة عند المستخدم ايقاعا أبطأ فيكون الخاطئة االجابة عند المستخدم اللحن , أما النغمات. الحزن عن وينم النغمات في وأطول

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

النوع من الموسيقى ملفات تكون أن يفضل MIDIتكرارات فى تتكرر أن Loopقد ألنها

مساحة يتطلب وهذا طويلة، لفترات تستمر باألسلوب سجلت ما اذا جدا عالية تخزينية

الرقمى. أو الشاشة على هامة رسالة ظهور عند

موسيقى تختفى أن يجب أسئلة تقديمالخلفية.

بيئية كأصوات الخلفية موسيقى تستخدم قد بعض فى التعلم ببيئة المتعلم اقناع فى

26

Page 27: تصميم واجهات التفاعل

الوطنية الموضوعات ففى ، األحيان المميز اللحن قدم اذا والسياحية والسياسية

الدولة تلك من بمشاهد مصحوبا معينة لدولة بيئة مع المتعلم انسجام من ذلك زاد

البرنامج. واجهات فى الوسائل لدمج العامة - القواعد 9

التفاعل: االطار، نفس فى وسيلتين من أكثر الوسائل: استخدام بدمج يقصد

واجهة فى معا تجمع بل مستقلة تستخدم ال المتعددة الوسائل فعناصريلى: ما منها معايير بعدة الجمع هذا ويرتبط ، الوسائل متعددة التفاعل

، االطار نفس فى بالزمن مرتبتطين بصريتين وسيلتين جمع اطالقا ينبغى - ال ففى ، االطار نفس فى جنب الى جنبا فيديو ولقطة متحرك رسم كتجاور الرسم من جزء عن سينصرف الفيديو لقطة الدارس فيه يراقب الذى الوقت

الوسيلتين ببدء أو الوسيلتين، عرض بتعاقب ذلك استبدال ويمكن ، المتحرك يسمح ثم ، الدارس يختارها فقط، واحدة تحريك ويتمPause الثبات حالة فى. األولى من االنتهاء بعد األخرى باختيار له

مكتوبا وليس مسموعا عليها التعليق يكون أن ثابتة صور عرض عند - يفضلمتابعتها. من الدارس يتمكن حتى

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

ويمكن ، الحظة نفس فى صوتى ومؤثر موسيقى تستخدم : الالصوت دمج يكون أن بشرط ، مسموع لتعليق كخلفية صوتى موثر أو موسيقى استخدام

الصوتى. المؤثر أو الموسيقى من أعلى الصوتى التعليق أن متحركة رسوم أو فيديو لقطة على صوتى تعليق استخدام عند -يفضل

كما التزامن، عيوب لتالفى الملف نفس الفيديوفى ملف مع الصوت يدمج مثل ضمنها الصوت دمج يمكن المتحركة الرسومات ملفات أنواع بعض توجد

(Microsoft Multimedia Movie Player( MMM) )وملفات Quicktime for Window.

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

يجب وال عليها، التعليق ذلك يلى الصورة تظهر ثم ، الصورة لموضوع صوتىبعد. تظهر لم صورة على الصوتى التعليق

يركز الشاشة على بصرية عناصر تواجد دون بأنواعه الصوت يستخدم - الراديو. جهاز ليس الكمبيوتر فجهاز ، الدارس عليها

27

Page 28: تصميم واجهات التفاعل

اطار فى البصرية العناصر بين - الربط 10العرض:

، المستخدم مع التفاعل لواجهة المكونة الوسائل بين الربط يجب واحد، اطار فى الوسائل من عدد جمع ليس فالهدف منها، البصرية خاصة

هذا فى مبررلتواجدها بشكل الوسائل تلك بين رابط ايجاد من البد بل بتفككها الدارس يشعر التفاعل واجهة عناصر بين الربط واهمال ، االطار

فالنص ، العناصر تلك تمثلها معينة مفاهيم بارتباط الشعور يفقده قد بل ، من أكثر وجود حالة وفى له، المجاورة بالصورة يرتبط وأن مثال- البن–

يلى وفيما ، للربط أخرى وسائل ايجاد يجب االطار نفس فى نص كتلةالعرض: اطار فى البصرية العناصر بربط الخاصة القواعد بعضالرسم: باستخدام االطار نفس فى النص كتلة ربط

الربط يفضل فانه االطار نفس على نص كتلة من أكثر استخدام حالة فى الى السابق الجزء من ينتقل سهم أو خط مثل رسمومية، بطريقة بينهم

منتظم الغير التوزيع حالة فى ضروريا الشرط هذا ويصبح ، التالية األجزاءواحدة. دفعة وظهورها الشاشة على النص لكتل

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

السينى االحداثيان وكتابة البيانى الرسم على المختلفة المنحنيات تمييزالرسم. هذا فهم يمكن لكى والصادى

التجاور طريق عن الربط: مفهوما المعقد التصميم لجعل هامة كأداة الشاشة على التجاور يستخدم

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

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

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

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

.األخرى للموضوعات الفرعية العناوين وعن الشارح، النص عن

االنتباه(: - التمييز)توجيه 11للتمييز األساسية الوظيفة

28

Page 29: تصميم واجهات التفاعل

المستخدم انتباه لتوجيه ، العناصر باقى عن الشاشة فى عنصر تمييز هى عنصر وضع تريد التمييز"فقط" عندما أساليب تستخدم أن فيمكنك لذا اليه،.المستخدم اهتمام بؤرة فى

النص: تمييز أساليبItalic)المائلة) األحرف - استخدام(.Bold)الداكن الخط - استخدام معينة عبارة استضاءة معدل فى التغيير به الوميض: ويقصد - استخدام

نابض. بشكل(Underline) الهامة العبارة تحت خط - استخدام] [،} {) (، األقواس - استخدامالهامة العبارة خلف ظل بوضع التظليل - استخدام

سوداء. خلفية على أبيض نص ككتابة األلوان - عكسمميز. بلون الهامة العبارات أو العناوين باللون: جعل - التمييز

النص. عناصر باقى عن يميزها صندوق فى الهامة العبارات - وضعخارجى. بخط التحديد - استخدام

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

مع الخصوص وجه على االسلوب هذا - ويستخدم النص، نحو الدارسالتحذيرية. العباراتيلى: فيما الصورة: وتتمثل تمييز أساليب

خارجى. باطار الهامة األجزاء احاطة أو مميز بلون صندوق فى - وضعهاالهام. الجزء على باألسهم - االشارةمخالف. بلون العناصر باقى بينما ملون الهام العنصر : يجعل باللون - التمييز

- الوميضباألسهم. - االشارةنحوها. الدارس اهتمام جذب الى يؤدى الرسومات على الصوتى - التعليق

الهامة: العرض مكونات تكبير غيرها من أكبر تكون وأن الشاشة، األهم الكتلة تتوسط أن يجب

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

المستخدم.هامة الغير العناصر استبعاد :

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

العناصر على فقط االبقاء تضمن القاعدة هذه ، منها االنتهاء بعد حذفهاتشتتها. ومنع تمييزها ثم ومن االطار فى الهامة

استخدام فى االسراف ينبغى : الالتمييز فى االقتصاد يتم حتى صورة، أو لنص واحد اطار فى التمييز من مختلفة أساليب

بخط كلماتها بعض على تحتوى التى فالعبارة الهامة، العناصر تمييز

29

Page 30: تصميم واجهات التفاعل

يصعب مائلة، وبعضها مظللة، وبعضها خط، تحته وبعضها ، داكنفيها. الهامة الكلمات تحديد

من الحكم يمكن التى النقاط ( بعضالصالح بدر) أورد وقد هذا الوسائط تصميم يتضمن حيث متعددة وسائط برنامج على خاللها

الشاشة: لتصميم الرئيسة المبادئ توظيف المتعددة

بعناصر دمجها دون والوضوح بالبساطة المرئيات عرض يتميز عشوائية.

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

ألخرى.

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

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

سهولة الشاشة على المعلومات وعرض التطبيق واجهة تصميم يوفر :االستخدام

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

أجزاء: وحدات، إلى مقسمة الشاشة على المعروضة المعلومات وفقرات. ودروس،

رؤية لتوفير البيضاء المساحات مالئم نحو على التصميم يستخدم (.Visual Appeal) وجذابة مشوقة

التصميم يوفر � � استخداما المقرر. أجزاء في اإلبحار ألدوات متناسقا

الواحدة. الشاشة على مكثفة معلومات عرض التصميم يتجنب

منطقي. وتدفق بوضوح الشاشة على معروضة المعلومات

التي المعلومات لتحديد مناسبة أساليب التصميم يستخدم المتعلم يؤشر عندما اللون تغير ) مثل المتعلم يختارها

عليها

30

Page 31: تصميم واجهات التفاعل

المراجـــع الوسائط برامج تقويم (:2002يوسف) -ابراهيم1

االبتدائية المرحلة لتالميذ المقدمة التعليمية المتعددة التربوية المعايير ضوء فى العام التعليم بمدارس االزهر، جامعة التربية، كلية ماجستير، رسالة ،والفنية

.67-62ص

تصميم متغيرات اختالف فاعلية(: 2004جالل) -عمرو2 تحصيـل علـى الوسائـط متعـددة الكمبيوتر برامج وبناء

،العملية ومهاراتهم التعليم تكنولوجيا شعبـة طـالب.56-53 االزهر،ص التربية،جامعة دكتوراة،كلية رسالة

التربوية المعايير (: قائمة1999جودت) -مصطفى3 التعليمية، الكمبيوتر برامج النتاج الفنية والمتطلبات

التربية،جامعة كلية ماجستير، رسالة ،5 رقم ملحق.66-44 ,صحلوان

اإللكتروني (: التعلم2005) الصالح الله عبد بن - بدر4

بحثية ورقة،الجودة أجل من التعليمي: شراكة والتصميم

لتكنولوجيا المصرية للجمعية العاشر العلمي لمؤتمر

شمس. عين جامعة ، التربية كلية التعليم،

31