Lec1.pdf

‫تصميم واجهات المستخدم‬ ‫‪Lecture 1‬‬ ‫‪1‬‬  ‫مقدمة ونظرة عامة‬ ‫ يعتبر تصميم واجهة المستخدم أحد أفرع علم التفاعل بين‬ ‫االنسان والحاسوب (‪.)Human computer interaction‬‬ ‫ علم التفاعل بين اإلنسان والحاسوب هو العلم المختص‬ ‫بدراسة وتخطيط وتصميم عمل ا...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 1‬‬ ‫‪1‬‬  ‫مقدمة ونظرة عامة‬ ‫ يعتبر تصميم واجهة المستخدم أحد أفرع علم التفاعل بين‬ ‫االنسان والحاسوب (‪.)Human computer interaction‬‬ ‫ علم التفاعل بين اإلنسان والحاسوب هو العلم المختص‬ ‫بدراسة وتخطيط وتصميم عمل الناس والحواسيب معا من‬ ‫أجل تلبية احتياجات اإلنسان بأنجح السبل و أكثرها راحة‪.‬‬ ‫ وحتى يتحقق ذلك يجب أن يراعي المصمم مجموعة متنوعة‬ ‫من العوامل وهي‪:‬‬ ‫‪2‬‬  ‫مقدمة ونظرة عامة‬ ‫متطلبات( ‪ )requirements‬الناس وتوقعاتهم ( ‪.)expectations‬‬ ‫‪.1‬‬ ‫قدرات الناس (‪ )capabilities‬والقيود المادية ( ‪)physical limitations‬‬ ‫‪.2‬‬ ‫كيفية معالجة الناس للمعلومات‪ ،‬و كيفية عمل النظام اإلدراكي ‪cognitive‬‬ ‫‪.3‬‬ ‫‪ system‬لإلنسان‪.‬‬ ‫جعل تجربة اإلنسان مع النظام ممتعة‪.‬‬ ‫‪.4‬‬ ‫كما يجب أن ينظر المصمم أيضا إلى القيود والخصائص التقنية لألجهزة‬ ‫‪.5‬‬ ‫وبرامج الحاسوب‪.‬‬ ‫‪3‬‬ ‫العلوم والتخصصات التي تساهم في عملية تصميم‬ ‫واجهات المستخدم‬ ‫المناهج والتخصصات المتعددة التي تنتج عنها واجهات المستخدم‬ ‫‪4‬‬  ‫تعريف واجهة المستخدم‬ ‫‪Defining the user interface‬‬ ‫تعرف الواجهة بأنها الجزء الذي يبين حدود االتصال بين كيانين‬ ‫ّ‬ ‫ ‬ ‫كجزء من البرمجيات أو جهاز مع ّدات و مستخدم‪.‬‬ ‫الواجهة تشير أيضا إلى الشكل العا ّّم المجرد الذي يبرز الكيان به‬ ‫ ‬ ‫نفسه إلى الخارج‪.‬‬ ‫يمكن للواجهة ان تُع ّدل داخلياّ بدون التأثير على طريقة تفاعل‬ ‫ ‬ ‫الكيانات الخارجية معها‪.‬‬ ‫تزود الواجهة أيضا وسائل الترجمة بين الكيانات التي ال تتكلّم‬ ‫قد ّ‬ ‫ ‬ ‫نفس اللغة‪ ،‬كالواجهة بين اإلنسان والحاسوب‪.‬‬ ‫ تسمى الواجهة بين اإلنسان و الحاسوب واجهة المستخدم ‪.user interface‬‬ ‫ الشكل التالى يوضح الواجهة بين اإلنسان و الحاسوب‪.‬‬ ‫‪5‬‬  ‫تعريف واجهة المستخدم‬ ‫‪Defining the user interface‬‬ ‫المستخدم‬ ‫ّ‬ ‫واجهة‬ ‫الواجهة بين االنسان و الحاسوب‪.‬‬ ‫‪6‬‬  ‫تعريف واجهة المستخدم‬ ‫‪Defining the user interface‬‬ ‫ واجهة المستخدم هي أهم جزء في أي نظام حاسوبي ألنها‬ ‫تمثل النظام لمعظم المستخدمين‪.‬‬ ‫ فالواجهة هي الجزء من الحاسوب والبرمجيات الذي يمكن‬ ‫رؤيته و‪ /‬أو يمكن سماعه ويمكن االتصال به و التعامل معه‬ ‫مباشرة‪.‬‬ ‫ فالكم الهائل من الشفرة و البرمجيات يختبئ وراء الشاشات‬ ‫و لوحة المفاتيح والفأرة‪.‬الشكل التالى يبين ذلك‪.‬‬ ‫‪7‬‬  ‫تعريف واجهة المستخدم‬ ‫‪Defining the user interface‬‬ ‫واجهةّالمستخدمّتمثلّالنظامّالحاسوبيّلمعظمّالمستخدمين‬ ‫‪8‬‬ ‫عناصر واجهات المستخدم‬ ‫ لواجهةّالمستخدمّعنصرانّأساسيانّهما‪:‬‬ ‫ المدخالت ‪input‬‬ ‫ ال ُمخرجات ‪.output‬‬ ‫‪9‬‬  ‫عناصر واجهات المستخدم‬ ‫ المدخالت ‪input‬‬ ‫وهي التي تبين كيفية توصيل الشخص الحتياجاته أو رغباته إلى الحاسوب‪.‬‬ ‫ ‬ ‫يتم توصيل المدخالت بواسطة العديد من األدوات و التي تعرف بأدوات‬ ‫اإلدخال‪.‬يمكن تصنيف أدوات اإلدخال كالتّالي‪:‬‬ ‫– المفاتيحّالرقميةّ‪Digital keys‬‬ ‫ لوحةّالمفاتيحّ‪keyboard‬‬ ‫– أدواتّاإلشارةّ ‪Pointing Devices‬‬ ‫هناكّالكثيرّمنّأدواتّاإلشارةّالمتوفرةّتجارياّوّيمكنّاختيارّاألداةّالمناسبةّوّفقاّللوظيفةّوّ‬ ‫ ‬ ‫المه ّمةّالمرادّإنجازهاّو‪/‬أوّالتفضيلّالشخصي‪.‬منّأدواتّاإلشارةّماّيلي‪:‬‬ ‫الفأرةّ‪mouse‬‬ ‫ ‬ ‫القلمّالضوئيّ‪light pen‬‬ ‫ ‬ ‫شاشةّاللمسّ‪touch screen‬‬ ‫ ‬ ‫كرةّالمسارّ‪track ball‬‬ ‫ ‬ ‫لوحةّاللمسّ ‪touch pad‬‬ ‫ ‬ ‫‪10‬‬  ‫عناصر واجهات المستخدم‬ ‫– أدواتّمتعددةّالوظيفةّ‪Multifunction Devices‬‬ ‫– بعضّاألدواتّّتسمحّبطرقّمتنوعةّللتفاعالت‪ّ،‬مثلّ‬ ‫ عصاّالقيادةّ ‪joysticks‬للمتعددةّاألبعادّ‬ ‫ قفازّإدخالّالبياناتّ‪data-glove‬‬ ‫– الصوتّ‪ /‬الكالمّ‪.Voice/Speech‬‬ ‫ يستعملّالصوتّوّالكالمّللتعليماتّالمنطوقةّ‪.spoken instruction‬‬ ‫ وّيمكنّاالستفادةّمنّاستخدامّهذهّالتقنياتّللمستخدمينّذويّاالحتياجاتّ‬ ‫الخاصة‪.‬‬ ‫‪11‬‬  ‫عناصر واجهات المستخدم‬ ‫ ال ُمخرجات ‪.output‬‬ ‫ هي الكيفية التي ينقل بها الحاسوب نتيجة الحسابات‬ ‫‪ computations‬ومتطلبات المستخدم ‪.requirements‬‬ ‫ أكثر أدوات اإلخراج شيوعاّ هي‪:‬‬ ‫– شاشة العرض ‪Display Screen‬‬ ‫– آليات االستفادة من قدرات الشخص السمعية مثل آليات تركيب‬ ‫الصوت ‪.Voice Synthesizer‬‬ ‫‪12‬‬  ‫عناصر واجهات المستخدم‬ ‫ التصميم الجيد للواجهات هو الذي يق ِّ ّدم مزيجا جيداّ لتصميم‬ ‫أدوات المدخالت والمخرجات التي تلبي إحتياجات المستخدم‬ ‫وتراعي القدرات والقيود في أنجح طريقة ممكنة‪.‬‬ ‫ الواجهة الجيدة هي تلك التي تم ِّ ّكن المستخدم من التركيز على‬ ‫المعلومات المهمة التي بين يديه إلتمام المهمة بدال من‬ ‫التركيز في األدوات المستخدمة لعرض المعلومات‪.‬‬ ‫‪13‬‬  ‫أهمية التصميم الجيد للواجهات‬ ‫‪The importance of good interface design‬‬ ‫للواجهة جيدة التصميم أهمية كبرى للمستخدمين‪ ،‬فهي نافذة‬ ‫ ‬ ‫المستخدم لالطالع على قدرات النظام‪ ،‬والجسر لالستفادة من‬ ‫قدرات البرمجيات‪.‬‬ ‫وهي و كما ذكرنا سابقا‪ ّ،‬تمثل النظام للعديد من المستخدمين ألنها‬ ‫ ‬ ‫واحدة من عدد قليل من العناصر المرئية للنظام‪.‬‬ ‫الواجهة هي أيضا وسيلة من خاللها يتم تقديم العديد من العمليات‬ ‫ ‬ ‫المهمة‪.‬‬ ‫هذه العمليات كثيرا ما يكون لها تأثير مباشر على عمل‬ ‫ ‬ ‫المؤسسات و عالقات المؤسسات بعمالئهم‪.‬انظر الشكل التالى‬ ‫الذي يبين إرتباط المستخدم بالواجهة عن طريق التفاعل‪.‬‬ ‫‪14‬‬  ‫أهمية التصميم الجيد للواجهات‬ ‫‪The importance of good interface design‬‬ ‫ارتباط المستخدم بالواجهة عن طريق التفاعل‬ ‫ التخطيط الواجهة والمظهر ونظام التنقل أو المالحة ‪ navigation system‬تأثير‬ ‫كبير على المستخدم‪.‬‬ ‫ إذا كان تصميم الواجهة غير جيد (سيئ) فسيجد المستخدم صعوبة كبيرة في القيام‬ ‫بأعماله وسينتج عن ذلك الكثير من األخطاء‪ ،‬و ربما يبعد المستخدم عن النظام‬ ‫بشكل دائم ‪.‬‬ ‫‪15‬‬  ‫أهمية التصميم الجيد للواجهات‬ ‫‪The importance of good interface design‬‬ ‫ فيما يلي أمثلة لبعض النظم والتأثير الذي قد يسببه سوء‬ ‫التصميم‪:‬‬ ‫أ‪ -‬النظم ذات االهمية في الحياة ‪.Life-critical systems‬‬ ‫– مثل نظم مراقبة الحركة الجوية والمفاعالت النووية و محطات‬ ‫الطاقة‪.‬‬ ‫– التصميم غير الجيد لواجهات هذه األنظمة يؤدي إلى‪:‬‬ ‫ تعريض سالمة مستخدميها و‪/‬أو عامة الجمهور للخطر‪.‬‬ ‫ التكاليفّمرتفعةّوّمعّذلكّفهيّذاتّاعتماديةّ ‪reliability‬وفعاليةّ‬ ‫‪.effectiveness‬‬ ‫ طول فترات التدريب‪.‬‬ ‫‪16‬‬  ‫أهمية التصميم الجيد للواجهات‬ ‫‪The importance of good interface design‬‬ ‫ب – أنظمة االستخدامات الصناعية ‪ Industrial‬والتجارية‬ ‫‪.commercial‬‬ ‫– مثل النظم المصرفية ‪ Banking‬و نظم التأمين ‪insurance‬‬ ‫ونظم إدارة المخزون ‪ stock management‬والحجوزات‬ ‫‪ reservation‬والفواتير ‪.billing‬‬ ‫ زيادة التكلفة ‪.‬‬ ‫ الحاجة إلى التدريب‪.‬‬ ‫ زيادة نسبة معدالت الخطأ‪.‬‬ ‫‪17‬‬  ‫أهمية التصميم الجيد للواجهات‬ ‫‪The importance of good interface design‬‬ ‫ج – التطبيقات المكتبية والمنزلية و تطبيقات الترفيه‬ ‫‪.entertainment applications‬‬ ‫– مثلّتطبيقاتّمعالجةّالكلماتّ‪ Word processing‬والبريدّ‬ ‫االلكترونيّ‪ electronic mail‬وعقدّالمؤتمراتّعنّطريقّ‬ ‫الحاسوبّ‪ computer conferencing‬ونظمّالعابّالفيديوّ‬ ‫‪.video games‬‬ ‫– سوءّالتصميمّيتسببّفيّاآلتي‪:‬‬ ‫ جعلّعمليةّتحديدّوإختيارّالوظيفةّ ‪functionality‬مهمةّصعبةّلوجودّ‬ ‫طائفةّواسعةّمنّالمستخدمينّلهذهّالتطبيقاتّوّتشملّالمستخدمينّ‬ ‫الخبراءّوالمبتدئينّعلىّحدّسواء‪.‬‬ ‫‪18‬‬  ‫أهمية التصميم الجيد للواجهات‬ ‫‪The importance of good interface design‬‬ ‫د ‪ -‬النظم االستكشافية ‪Exploratory‬و االبداعية ‪ creative‬و‬ ‫التعاونية ‪.cooperative systems‬‬ ‫– مثل نظم قواعد البيانات ‪ Database‬و األدوات الفنية ‪artist‬‬ ‫‪ toolkits‬و الحزم االحصائية ‪ statistical packages‬و نظم‬ ‫النماذج العلمية ‪.scientific modeling systems‬‬ ‫– من المشاكل التي تواجه تصميم هذه النظم‪:‬‬ ‫ صعوبة وصف المقاييس ويرجع ذلك إلى كثرة المهام‪.‬‬ ‫‪19‬‬  ‫أهداف تصميم واجهة المستخدم‬ ‫ يهدف تصميم الواجهات إلى جعل العمل مع الحاسوب عملية‬ ‫سهلة وممتعة وذات إنتاجية‪.‬و ذلك عن طريق اآلتي‪:‬‬ ‫تقليل الوقت الالزم لتعلم مهمة معينة من مهام النظام‪.‬‬ ‫‪.1‬‬ ‫سرعة األداء‪.‬و ذلك بتقليل الوقت الذي يستغرقه المستخدم ألداء مهمة‬ ‫‪.2‬‬ ‫معينة‪.‬‬ ‫تقليل معدل األخطاء التي تحدث من قبل المستخدمين‪.‬‬ ‫‪.3‬‬ ‫تحسين عملية إحتفاظ ‪ Retention‬المستخدم بالمعلومات مع مرور‬ ‫‪.4‬‬ ‫الوقت والزمن‪.‬‬ ‫تكرار االستخدام وسهولة التعلم تساعد على جعل عملية االحتفاظ‬ ‫‪.5‬‬ ‫أفضل‪.‬‬ ‫الرتياح الذاتي‪ ،‬جعل تجربة المستخدم مع النظام تجربة ممتعة‪.‬‬ ‫‪.6‬‬ ‫‪20‬‬