تصميم واجهات المستخدم Lecture 1

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

‫تصميم واجهات المستخدم‬ ‫‪Lecture 1‬‬ ‫‪1‬‬  ‫مقدمة ونظرة عامة‬ ‫ يعت‪%‬بر تص‪%‬ميم واجه‪%‬ة المس‪%‬تخدم أح‪%‬د أف‪%‬رع علم‬ ‫التفاع‪%%%‬ل بين االنس‪%%%‬ان والحاس‪%%%‬وب (‪Human‬‬ ‫‪.)computer interaction‬‬ ‫ علم التفاع‪%‬ل بين اإلنس‪%‬ان والحاس‪%‬وب ه‪%‬و العلم‬ ‫المختص بدراس‪%‬ة وتخطي‪%‬ط وتص‪%‬ميم عم‪%‬ل الن‪%‬اس‬ ‫والحواس‪%%%‬يب مع‪%%%‬ا من أج‪%%%‬ل تلبي‪%%%‬ة احتياج‪%%%‬ات‬ ‫اإلنسان بأنجح السبل و أكثرها راحة‪.‬‬ ‫ وح‪%%‬تى يتحق‪%%‬ق ذل‪%%‬ك يجب أن ي‪%%‬راعي المص‪%%‬مم‬ ‫مجموعة متنوعة من العوامل وهي‪:‬‬ ‫‪2‬‬  ‫مقدمة ونظرة عامة‬ ‫متطلب‪%%%%%%‬ات( ‪ )requirements‬الن‪%%%%%%‬اس وتوقع‪%%%%%%‬اتهم‬ ‫‪.1‬‬ ‫(‪.) expectations‬‬ ‫قدرات الن‪%%%%%%‬اس (‪ )capabilities‬والقي‪%%%%%%‬ود المادي‪%%%%%%‬ة‬ ‫‪.2‬‬ ‫( ‪)physical limitations‬‬ ‫كيفي‪%‬ة معالج‪%‬ة الن‪%‬اس للمعلوم‪%‬ات‪ ،‬و كيفي‪%‬ة عم‪%‬ل النظ‪%‬ام‬ ‫‪.3‬‬ ‫اإلدراكي‪ cognitive 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‬‬ ‫ فيم‪K‬ا يلي أمثل‪K‬ة لبعض النظم والت‪K‬أثير ال‪K‬ذي ق‪K‬د‬ ‫ه س‪KKKKKKKKKKKK‬وء‪K‬التص‪KKKKKKKKKKKK‬ميم‪:‬‬ ‫ي‪K‬س‪KKKKKKKKKKKK‬بب‪K K‬‬ ‫أ‪ -‬النظم ذات االهمي‪%%%%%%‬ة في الحي‪%%%%%%‬اة ‪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‬‬  ‫أهداف تصميم واجهة المستخدم‬ ‫ يه‪KKK‬دف تص‪KKK‬ميم الواجه‪KKK‬ات إلى جع‪KKK‬ل العم‪KKK‬ل م‪KKK‬ع‬ ‫الحا‪K‬س‪K‬وب‪ K‬عملي‪K‬ة‪K‬س‪K‬ه‪K‬لة وم‪K‬متع‪K‬ة وذا‪K‬ت إنتاج‪K‬ي‪K‬ة‪.‬و ذل‪K‬ك‬ ‫عن طريق اآلتي‪:‬‬ ‫تقلي‪%‬ل ال‪%‬وقت الالزم لتعلم مهم‪%‬ة معين‪%‬ة من مه‪%‬ام النظام‪.‬‬ ‫‪.1‬‬ ‫سرعة األداء‪.‬و ذل‪%‬ك بتقلي‪%‬ل ال‪%‬وقت ال‪%‬ذي يس‪%‬تغرقه المس‪%‬تخدم ألداء‬ ‫‪.2‬‬ ‫مهمة معينة‪.‬‬ ‫تقلي‪%‬ل مع‪%‬دل األخط‪%‬اء ال‪%‬تي تح‪%‬دث من قب‪%‬ل المستخدمين‪.‬‬ ‫‪.3‬‬ ‫تحس‪%‬ين عملي‪%‬ة إحتف‪%‬اظ ‪ Retention‬المس‪%‬تخدم بالمعلوم‪%‬ات م‪%‬ع‬ ‫‪.4‬‬ ‫مرور الوقت والزمن‪.‬‬ ‫تك‪%‬رار االس‪%‬تخدام وس‪%‬هولة التعلم تس‪%‬اعد على جع‪%‬ل عملي‪%‬ة االحتف‪%‬اظ‬ ‫‪.5‬‬ ‫أفضل‪.‬‬ ‫الرتي‪%‬اح ال‪%‬ذاتي‪ ،‬جع‪%‬ل تجرب‪%‬ة المس‪%‬تخدم م‪%‬ع النظ‪%‬ام تجرب‪%‬ة ممتع‪%‬ة‪.‬‬ ‫‪.6‬‬ ‫‪20‬‬