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

بسم الله الرحمن الرحيم
د. السيد عبدالمولى أبو خطوة

اسمُ الكاتب : د. السيد عبدالمولى أبو خطوة.
إجمالي القراءات : ﴿15774﴾.
عدد المشــاركات : ﴿4﴾.

◄ أسس تصميم شاشات البرمجيات التعليمية.
■ الشاشة هي : مزيج من العناصر التخطيطية ونظم الإبحار؛ فإذا كانت الرسالة مشوشة وصعبة الفهم؛ فإنها تشتت انتباه المتعلمين؛ مما يجعلهم لا يستمرون في التعلم من البرنامج (Vaughan ,1993:138).

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

1- مبادئ تصميم الشاشة :
أسهم الجشطالتيون إسهامات كثيرة في وضع قوانين لتنظيم مجال الإدراك البصري وتصميمه, وقد بحثت دراسة "شانج وتيوفينين" Chang & Tuovinen 2002 فاعلية استخدام قوانين الجشطالت الاتزان / التناظر Balance/Symmetry، الاستمرار Continuation، الإغلاق Closure، الشكل والأرضية Figure-Ground، النقطة المركزية Focal Point, التقارب Proximity , التشابه Similarity , البساطة Simplicity, الوحدة والتجانس Unity/Harmony - في تصميم برنامج كمبيوتر متعدد الوسائط، وأشارت نتائج الدراسة إلى أن هذه القوانين مفيدة للتصميم البصري للشاشة, وكذلك في فاعلية التعلم.
وتتضح تطبيقات قوانين الجشطالت من خلال المبادئ الخمس التالية للتصميم البصري للشاشة ؛ وهى : الاتزان Balance, الوحدة والثبات Consistency Unity and، البساطة Simplicity، التنظيم أو الوضوح Clarity، التأكيد Emphasis. Misanchuk,1993) (Schwier&، (Boyle, 1997:125) (Rieber, 2000:213).

• أولاً : الاتزان Balance :
يهتم الاتزان بالوزن البصري المعطى لكل عنصر من عناصر الشاشة, وكيفية توزيعه على الشاشة, وقد أوصت دراسة أجراها "كوون" (1996) Kwon والتي فحصت التأثيرات التفاضلية لاستخدام الاتزان والوحدة في التعليم القائم على الكمبيوتر - بمراعاة مبدأ الاتزان، ومبدأ الوحدة عند تصميم برامج الكمبيوتر التعليمية.

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

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

• ثانياً : الوحدة والثبات 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، ( (Schwier& Misanchuk, 1993:214 (Bearman, Centre of Medical Informatics,1997)،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).

• خامساً : التنظيم و الوضوح :
إدراك الموقف عند الجشطالت يسير وفق قانون التنظيم والوضوح وقوانين ثانوية هي التشابه والتقارب والإغلاق. (جابر عبد الحميد جابر، 1982 : 224)؛ فالتعلم وفق نظرية الجشطالت يتم وفق الكيفية التي ندرك بها الموقف، وإدراكنا هذا يتأثر بكيفية انتظام عناصر الموقف (بدر عمر العمر، 1990: 171).
ويرتبط التنظيم بترتيب مكونات المثير البصري والشكل العام له ؛ حيث يساعد تنظيم المجال الإدراكي على التعلم، ويقلل من ارتباك المتعلم وإحباطه، ويمنع تكوين مفاهيم خطأ من الرسالة التي يحملها المثير البصري، كما يساعد التنظيم في قيام المتلقي بقراءة المثير بسرعة وكفاءة، ولتحقيق التنظيم لابد أن يراعى المصمم وجود مسار واضح لعين المتلقي؛ لكى تسير فيه بطريقة تمكنه من قراءة المثير البصري (عبد الرحمن العيسوي ،1998: 61)، (على عبدالمنعم ،2000: 52).
ولتحقيق التنظيم والوضوح في الشاشة يجب مراعاة المبادئ التالية : , 1993:215) Misanchuk &(Schwier (Bearman, Centre of Medical Informatics ,1997)، (على عبد المنعم ،2000: 49)، (محمود عبد الحليم منسي ,2001 :123), (أنسى محمد أحمد قاسم, 2003 :115- 117).
♦ تمييز الشكل المهم عن الأرضية (الخلفية)؛ لكى يكون واضحا ويَسهل إدراكه.
♦ مراعاة خصائص المتعلمين وخبراتهم السابقة، كاستخدام أمثلة مألوفة ولغة مناسبة للمتعلمين.
♦ عدم استخدام أشكال أو تنظيمات مفتوحة ناقصة؛لأن الأشياء المفتوحة يصعب إدراكها، وتشتت الانتباه، ويبذل المتعلم جهدا لكى يكملها, وهذا يسير وفق قانون الإغلاق Closure عند الجشطالت.
♦ استخدام الترقيم الجرافيكى للقوائم.
كما أن تنظيم العناصر على الشاشة - تخطيط الشاشة - يجعل من السهل فهم المعلومات المعروضة عليها وإدراك العلاقات فيما بينها، وتوضح الأشكال التالية بعض النماذج القياسية لتخطيط الشاشة, والتي تأخذ صورة الحرفين : Z , A، وتحقق الاتزان وقيادة حركة العين, وقد يختلف التخطيط باختلاف عدد العناصر المعروضة على الشاشة ونوعها, كما يتحدد التصميم المناسب وفقاً لأهمية كل عنصر. ( Phillips & Digiorgio ,1997:80).
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
المراجع :
1- إبراهيم وجيه محمود.(1996). التعلم : أسسه ونظرياته وتطبيقاته,الإسكندرية : دار المعرفة الجامعية.
2- أنسى محمد أحمد قاسم. (2003). علم نفس التعلم, الإسكندرية : مركز الإسكندرية للكتاب.
3- باربارا سيلز وريتا ريتشي ( 1998). تكنولوجيا التعليم : التعريف ومكونات المجال، (ترجمة) بدر بن عبدالله الصالح، الرياض : مكتبة الشقري.
4- جابر عبدالحميد جابر. (1994). علم النفس التربوي، القاهرة: دار النهضة العربية.
5- جابر عبدالحميد جابر. (1998).التدريس والتعلم : الأسس النظرية - الاستراتيجيات والفاعلية، ط1، القاهرة : دار الفكر العربي.
6- عبدالله سالم المناعى. (1992).الكمبيوتر وسيلة مساعدة في العملية التعليمية, حولية كلية التربية، جامعة قطر، العدد (101). ص ص 241-262.
7- محمد عطية خميس (2003) . عمليات تكنولوجيا التعليم، القاهرة : دار الكلمة.
8- محمد عطية خميس (2003 ب) : منتوجات تكنولوجيا التعليم، القاهرة : دار الكلمة.
9- محمود عبدالحليم منسي. (2001 ). التعلم, الإسكندرية : دار المعرفة الجامعية.
10- Boyle, T. (1997) . Design for Multimedia Learning. London & New York: PRENTICE HALL.
11- 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.
12- 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.
13- Rieber, A L.( 2000), Computers, Graphics and Learning, U.S. ,Dollars.
14- Schwier, R., & Misanchuk, E.(1993).Interactive Multimedia Instruction, Englewood Cliffs, NJ: Educational Technology Publications, Inc.
15- Vaughan, T.(1993).Multimedia :Making It Work,New Delhi:Osborne /Mcgraw-Hill,Inc .
■ المواد المنشورة في مَنْهَل تعبر عن رأي كاتبها. ويحق للقارئ الاستفادة من محتوياته في الاستخدام الشخصي مع ذكر المصدر. مُعظَم المقالات أعيد ترتيب نشرها ليتوافق مع الفهرسة الزمنية للقسم.
Powered by Dimofinf CMS v5.0.0
Copyright© Dimensions Of Information.