أسس تصميم شاشات البرمجيات التعليمية

مقدمــة :

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

كما ان استخدام الكمبيوتر كأحد الوسائل المساعدة فى التعليم يعتبر وسيلة فاعلة فى العملية التعليمية حيث أثبتت معظم الأبحاث قى مجال الكمبيوتر والتعليم مدى فاعليته فى إتاحة بيئة تعليمية فعالة للمتعلم . ( عبد الله سالم المناعى , 1992 : 241 ) .

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

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

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

ويقصد بتصميم الشاشة : تصميم النصوص والأشكال البصرية على شاشة الكمبيوتر طبقاً لمبادئ تصميم الرسالة. (باربارا سيلز و ريتا ريتشى، 1998 : 200) وقد أثبتت الدراسات أن تصميم الشاشة الجيد يُسهل تفاعل المتعلم مع المادة ويزيد من دافعيته واستمراره في التعلم (عبد الله سالم المناعي،1992: 255 ) .

• مبادئ تصميم الشاشة : أسهم الجشطالتيون إسهامات كثيرة في وضع قوانين لتنظيم مجال الإدراك البصري وتصميمه , وقد بحثت دراسة “شانج وتيوفينين ” Chang & Tuovinen (( 2002 فاعلية استخدام قوانين الجشطالت – الاتزان / التناظر Balance/Symmetry، الاستمرار Continuation، الإغلاق  Closure، الشكل والأرضية Figure-Ground، النقطة المركزيةFocal Point, التقارب Proximity , التشابه Similarity , البساطةSimplicity , الوحدة والتجانس Unity/Harmony – في تصميم برنامج كمبيوتر متعدد الوسائط، وأشارت نتائج الدراسة إلى أن هذه القوانين مفيدة للتصميم البصري للشاشة, وكذلك في فاعلية التعلم .

وتتضح تطبيقات قوانين الجشطالت من خلال المبادئ الخمس التالية للتصميم البصري للشاشة ؛وهى: الاتزانBalance, الوحدة و الثباتConsistency  Unity and، البساطة Simplicity، التنظيم أو الوضوح Clarity،التأكيدEmphasis

أولاً: الاتزان Balance :

يهتم الاتزان بالوزن البصري المعطى لكل عنصر من عناصر الشاشة , و كيفية توزيعه على الشاشة .

ويوجد بين نوعين من الاتزان هما :

• الاتزان الشكلي : ويتحقق بجعل العناصر الموجودة على أحد جانبي الشاشة مشابهة تماماً في الشكل والحجم واللون مع العناصر الموجودة على الجانب الآخر , فإذا ما وضعت خطاً في منتصف الشاشة تنقسم إلي نصفين متماثلين يوضحه الشكل التالي:

• الاتزان غير الشكلي: ويكون عادة غير متناظر؛ فعدد من المفردات الصغيرة على أحد جانبي الشاشة يوازن بمفردة كبيرة على الجانب الآخر، أو وضع عنصر صغير بعيدا عن مركز الشاشة من العناصر الأكبر ويوضحه الشكل التالي :

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

حالة اتزان للشاشة (على اليمين) وحالة أخرى لعدم الاتزان (على اليسار) Boyle,1997:125). )

ثانياً: الوحدة و الثبات Consistency   Unity and  :     

تشير الوحدة إلي كلية wholeness   الخبرة؛ حيث تُعرض كل عناصر تشكيل الخبرة معاً في نفس الوقت ؛ لأن لكل عنصر دوره في السياق، بينما يشير الثبات إلي توافق كل أجزاء البرنامج معاً ؛ فالتخطيط الأساسيlayout  للمكونات يجب أن يكون متوافقاً عبر شاشات البرنامج.    (214 (Hix & Hartson, 1993،((Schwier& Misanchuk, 1993  (Bearman, Centre of Medical Informatics,1997) ،(Skaalid,1999b)  .

ويمكن تحقيق الوحدة باستخدام مبدأ التقارب Proximity ؛ وهو أحد قوانين الجشطالت في تنظيم مجال الإدراك البصري للمتعلم؛ حيث يساعد تقارب الأشياء على إدراكها كمجموعة واحدة أو كمجموعات، وإذا كانت الأشياء متباعدة فإن الفرد يبذل جهدا لتقريبها مما يسبب له الحيرة ؛ لذا ينبغي وضع الأشياء متقاربة معاً لسهولة إدراكها؛ فالأشياء المتقاربة في الزمان والمكان يسهل إدراكها كمجموعة أو كصيغ مستقلة (بدر عمر العمر،1990: 168) (جابر عبد الحميد جابر، 1994 : 234)، (إبراهيم وجيه محمود ،1996: 142),(محمود عبد الحليم منسي ,2001 :122) .

كما يمكن تحقيق الوحدة باستخدام مبدأ التكرار Repetition – تكرار اللّون، أو الشكل -، وكذلك استخدام مبدأ التشابه Similarity – أحد قوانين الجشطالت في تنظيم مجال الإدراك البصري للمتعلم – الذي ينص على أن الأشياء والنصوص المتشابهة – في الشكل أو الحجم أو اللون – تدرك كمجموعة واحدة ؛ وذلك بوضع خط تحتها أو تعليمها  ببنط ثقيل أو بلون مختلف ؛ لتركيز الانتباه عليها , وتميل الأشياء المتشابهة إلى أن تتجمع في وحدة فتظهر الخطوط المتشابهة مثلا أو النقاط المتماثلة على أنها وحدة إدراكية (جابر عبد الحميد جابر،1982 : 225)، ( إبراهيم وجيه محمود، 1996: 142)، (محمود عبد الحليم منسي ,2001 :123)، ( أنسى محمد أحمد قاسم , 2003 :116).

  ويمكن تحقيق الثبات باتباع ما يلى ((Hix & Hartson, 1993،                 Skaalid,1999b)), (محمد عطية خميس, 2003ب:190) :

• وضع التعليمات والتوجيهات و أزرار التحكم، في مكان ثابت في جميع أجزاء البرنامج .
• وضع إدخالات المتعلم- كتابة إجابته- في مكان ثابت من الشاشة، واستخدام كلمات توجيهية؛ مثل : “اكتب إجابتك هنا” .
• وضع العنوان، و رقم الصفحة أعلى الشاشة، مثلأ الصفحة2 من 10.
• توحيد أسلوب العرض من مقطع إلي آخر في البرنامج .
• تخصيص نفس المكان لعرض العناصر المتشابهة؛ مثل: معلومات التوجيه، أدوات الإبحار، تغذية راجعة .
• استخدام نفس اللون لنفس الوظائف .
• استخدام نفس سلوك التفاعل في الحالات المشابهة ؛(القوائم ، والأيقونات ) .

ثالثاً: البساطة Simplicity :البساطة في تصميم الشاشة هى: الاقتصاد في استخدام الخيارات وخصائص التحكم, والاقتصار على ما هو ضروري لتوجيه العرض (محمد عطية خميس , 2000 :394) فبساطة الشكل البصري تسهل عملية قراءته (على عبد المنعم،2000:  49) .

ومبدأ البساطة هو: أحد قوانين الجشطالت في تنظيم مجال الإدراك البصري للمتعلم ؛ فعندما تعرض على الفرد مواد بصرية، فإنه يبذل جهداً لا شعورياً لتبسيط ما يدركه في شكل يمكن فهمه، ومن ثم فالأفراد  يبسطون ما يدركون حسب خبراتهم السابقة وتوقعاتهم الحالية، ويرى برونر : أنه يجب على المصمم الاقتصاد في المعلومات ،بشكل معتدل، بحيث تكون موجهة نحو العملية أو المهمة أو المشكلة المطلوبة فقط ؛ فإذا زادت المعلومات عن ذلك زاد الجهد العقلي الذي يبذله المتعلم ؛ فالعرض الفعال هو البسيط الذي يسهل فهمه وإدراكه (محمد عطية خميس , 2003 ب :33)، (نضال عبد اللطيف برهم ،2004: 139- 140) .

وأفضل أشكال التصميم هى التي تتصف بالبساطة ؛ فعناصر التصميم الكثيرة قد تشتت انتباه المتعلمين , ويجب مراعاة المبادئ التالية لتحقيق بساطة الشاشة : (Hix & Hartson, 1993), (Bearman, Centre of Medical Informatics,1997)، (على عبد المنعم ،2000:  49)، (محمد عطية خميس , 2003 ب :33) .

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

رابعاً: التأكيد Emphasis:

ويُقصد به توجيه الانتباه إلي العنصر الأكثر أهمية على الشاشة؛ حيث يحتاج المصمم إلى توجيه انتباه الطالب إلي المعلومات الأكثر أهمية في العرض, في حين المعلومات الثانوية – الأزرار , المساعدات التعليمية – يُفضل أن تكون في خلفية الشاشة (Rieber, 2000:149)  .

يؤكد ثورنديك في قانون العناصر السائدة Law of Propotency على أن المتعلم لدية القدرة على الاستجابة  للعناصر السائدة في المشكلة؛ أى أن لديه القدرة على أن ينتقى العنصر المهم في الموقف ويوجه استجابته إليه , ويهمل العناصر غير المهمة التي قد تربكه (إبراهيم وجيه محمود ،1996: 107), (محمود عبد الحليم منسي,2001 :103) .

كما يؤكد أصحاب نظرية الجشطالت على العلاقة بين الشكل والأرضية ؛ فالشكل ينبغي أن يكون مميزا عن الأرضية حتى يمكن إدراكه ،أما إذا لم تكن هناك معالم محددة للشكل تذبذب إدراكنا له؛ فالمجال الإدراكي لظاهرة ما ينقسم إلي قسمين؛ الأول: وهو الشكل، وهو الجزء السائد الذي يكون مَركزاً للانتباه، أما القسم الثاني: فهو الأرضية وهو بقية المجال الذي يعمل كخلفية متناسقة منتشرة يبرز عليها الشكل كبقعة الضوء في الحجرة المظلمة (بدر عمر العمر،1990: 166), ( أنسى محمد أحمد قاسم , 2003 :115) .

و تؤكد نظرية معالجة المعلومات على أنه يصعب على الإنسان الانتباه إلى كل المثيرات الخارجية بأنواعها المختلفة؛ لذلك فهو ينتقي مثيرا معينا يقوم بالتركيز عليه دون المثيرات الأخرى التي تكون خارج إطار الشعور، ويساعد الانتباه الإنسان على عملية الانتقاء. (بدر عمر العمر،1990: 177)

ويمكن تنفيذ التأكيد بالمقارنة Contrast  كوضع شكل صغير – نقطة بؤرية- بين أشكال أكبر، أو وضع عنصر عمودي بين عناصر أفقية، أو عنصر مضيء بين عناصر مظلمة؛ فالعين عموما تنتقل من العنصر الأكبر على الشاشة إلي العنصر الأصغر وكذلك تنجذب إلي اللون الأقوى أولاً، كما أن وضع عنصر في المركز سيتم إدراكه غالباً كنقطة بؤرية              ( phillips & Digiorgio ,1997: 79:80)، ( Skaalid,1999b).

كما يساعد تخطيط الشاشة الجيد على توجيه العين إلي العنصر الأكثر أهمية , ويوضح الشكل التالي كيف تتجه العين مباشرة إلي العنوان القاتم (المهم) ثم تتجه إلي الرسومات في اليمين ثم إلي محتوى المعلومات في اليسار ,بينما في الشكل الأخر تتجه العين نحو الرسومات القاتمة ثم إلي العنوان ثم إلي النص( Phillips & Digiorgio ,1997: 81 )

تخطيط الشاشة (بتصرف) ( Phillips & Digiorgio ,1997: 81 )

خامساً: التنظيم و الوضوح:

إدراك الموقف عند الجشطالت يسير وفق قانون التنظيم والوضوح وقوانين ثانوية هى التشابه والتقارب والإغلاق. (جابر عبد الحميد جابر، 1982 : 224)؛ فالتعلم وفق نظرية الجشطالت يتم وفق الكيفية التي ندرك بها الموقف، وإدراكنا هذا يتأثر بكيفية انتظام عناصر الموقف (بدر عمر العمر، 1990: 171) .

ويرتبط التنظيم بترتيب مكونات المثير البصري والشكل العام له ؛ حيث يساعد تنظيم المجال الإدراكي على التعلم، ويقلل من ارتباك المتعلم وإحباطه، ويمنع تكوين مفاهيم خطأ من الرسالة التي يحملها المثير البصري، كما يساعد التنظيم في قيام المتلقي بقراءة المثير بسرعة وكفاءة، ولتحقيق التنظيم لابد أن يراعى المصمم وجود مسار واضح لعين المتلقي؛ لكى تسير فيه بطريقة تمكنه من قراءة المثير البصري (عبد الرحمن العيسوي ،1998: 61)، (على عبد المنعم ،2000: 52)  .

ولتحقيق التنظيم والوضوح في الشاشة يجب مراعاة المبادئ التالية:

• تمييز الشكل المهم عن الأرضية (الخلفية)؛ لكى يكون واضحا ويَسهل إدراكه .
• مراعاة خصائص المتعلمين وخبراتهم السابقة، كاستخدام أمثلة مألوفة ولغة مناسبة للمتعلمين .
• عدم استخدام أشكال أو تنظيمات مفتوحة ناقصة؛لأن الأشياء المفتوحة يصعب إدراكها،وتشتت الانتباه، ويبذل المتعلم جهدا لكى يكملها, وهذا يسير وفق قانون الإغلاق Closure عند الجشطالت .
• استخدام الترقيم الجرافيكى للقوائم .

المراجع

• إبراهيم وجيه محمود.(1996). التعلم:أسسه ونظرياته وتطبيقاته,الإسكندرية : دار المعرفة الجامعية.
• أنسى محمد أحمد قاسم.( 2003). علم نفس التعلم , الإسكندرية: مركز الإسكندرية للكتاب .
• باربارا سيلز و ريتا ريتشي ( 1998). تكنولوجيا التعليم : التعريف ومكونات المجال، ( ترجمة ) بدر بن عبد الله الصالح، الرياض : مكتبة الشقري .
• جابر عبد الحميد جابر.(1994). علم النفس التربوي، القاهرة: دار النهضة العربية.
• جابر عبد الحميد جابر.(1998).التدريس والتعلم : الأسس النظرية – الاستراتيجيات والفاعلية، ط1، القاهرة : دار الفكر العربي.
• عبد الله سالم المناعى.(1992).الكمبيوتر وسيلة مساعدة في العملية التعليمية , حولية كلية التربية، جامعة قطر، العدد (101). ص ص 241-262.
• محمد عطية خميس ( 2003) . عمليات تكنولوجيا التعليم، القاهرة : دار الكلمة .
• محمد عطية خميس ( 2003 ب ) : منتوجات تكنولوجيا التعليم، القاهرة: دار الكلمة.
• محمود عبد الحليم منسي.(2001 ). التعلم , الإسكندرية :  دار المعرفة الجامعية.

• Boyle, T. (1997) . Design for Multimedia Learning. London & New York: PRENTICE HALL.
• Kwon, H.,(1996).The Effects of Unity-Balance Screen Design on the Learning of Mathematics in Computer-Based Instruction. Dissertation Abstracts International, Vol. 57 No. I July 1996 , PP.179-180.
• Phillips,R.& Digiorgio.A.(1997).Design ,In Phillips. R.(Eds),The Developer’s Hand Book to Interactive Multimedia, London : Kogan Page Ltd, PP 65-88.
• Rieber, A L.( 2000), Computers, Graphics and Learning,S. ,Dollars.
• Schwier, R., & Misanchuk, E.(1993).Interactive Multimedia Instruction, Englewood Cliffs, NJ: Educational Technology Publications, Inc.
• Vaughan, T.(1993).Multimedia :Making It Work,New Delhi:Osborne /Mcgraw-Hill,Inc.