Lecture 2: User Interface Design Principles (Arabic)

‫تصميم واجهات المستخدم‬ ‫‪Lecture 2‬‬ ‫‪1‬‬  ‫أنواع قوانين التصميم‬ ‫‪types of design rules‬‬ ‫المبادئ ‪Principles‬‬ ‫ ‬ ‫هي األهداف العاّم ة التي يمكن أن تستخدم في تنظيم‬ ‫ ‬...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 2‬‬ ‫‪1‬‬  ‫أنواع قوانين التصميم‬ ‫‪types of design rules‬‬ ‫المبادئ ‪Principles‬‬ ‫ ‬ ‫هي األهداف العاّم ة التي يمكن أن تستخدم في تنظيم‬ ‫ ‬ ‫عملية التصميم‪.‬‬ ‫المب ادئ ال تح ّدد طرق ًا إلنج از األه داف مم ا يجع ل من‬ ‫ ‬ ‫الصعب استعمال المبادئ عمليًا‪.‬‬ ‫على سبيل المثال مبادئ مثل‪:‬‬ ‫ ‬ ‫– االنتظام و أالتساق ‪Consistency‬‬ ‫– البساطة ‪Simplicity‬‬ ‫ من الص عب أن تع ّر ف و من الص عب أن تق ّدم في‬ ‫التصميم‪.‬‬ ‫‪2‬‬  ‫أنواع قوانين التصميم‬ ‫‪types of design rules‬‬ ‫ التوجيهات ‪Guidelines‬‬ ‫ هي قواع د عاّم ة ّتتب ع في عملي ة التص ميم‪.‬من‬ ‫الض روري أن تك ون عاّم ة ح تى يمكن أن تطّب ق‬ ‫في الكثير من السياقات ‪.contexts‬‬ ‫ التوجيهات يمكن أن تستنتج من دراسة العوامل‬ ‫البش رية أو علم النفس أو المع ايير أو يمكن أن‬ ‫تكتسب بالخبرة‪.‬‬ ‫‪3‬‬  ‫أنواع قوانين التصميم‬ ‫‪types of design rules‬‬ ‫المعايير ‪Standards‬‬ ‫ ‬ ‫هي مب ادئ أو توجيه ات أو قواع د يجب أن تتب ع لض مان‬ ‫ ‬ ‫كفاءة المنتج و حماية المستخدمين‪.‬‬ ‫عادة ما ُتوض ع المع ايير و ُتف رض من قب ل المؤسس ات‬ ‫ ‬ ‫الص ناعية و الهيئ ات المحلي ة أو الدولي ة المتخصص ة‬ ‫لضمان التزام شريحة كبيرة من المصممين بها‪.‬‬ ‫مث ال على ذل ك‪ ISO 9241 :‬ال ذي يع ّر ف االس تخدامية‬ ‫ ‬ ‫أو قابلي ة منتج ما لالس تخدام ‪ usability‬بأنه ا الفعالي ة‬ ‫ا‬ ‫اءة ‪ efficiency‬والرض‬ ‫‪ effectiveness‬والكف‬ ‫‪ satisfaction‬الذي أنجز بها المستخدمون المهام‪.‬‬ ‫‪4‬‬  ‫أنواع قوانين التصميم‬ ‫‪types of design rules‬‬ ‫ القوانين‬ ‫ توج د مجموع ات مختلف ة من الق وانين‬ ‫المستخدمة في عملية التصميم ومن أشهرها‪:‬‬ ‫‪Nielsen’s‬‬ ‫رة ‪10‬‬ ‫ن العش‬ ‫– توجيه ات نيلس‬ ‫‪Heuristics‬‬ ‫ة‬ ‫ة الثماني‬ ‫نايدرمان الذهبي‬ ‫– قوانين ش‬ ‫‪Shneiderman’s 8 Golden Rules‬‬ ‫– مبادئ نورمان السبعة ‪Norman’s 7 Principles‬‬ ‫‪5‬‬  ‫أنواع قوانين التصميم‬ ‫‪types of design rules‬‬ ‫ توجيه‪.‬ات (نيلس‪.‬ن) العش‪.‬رة ‪Nielsen’s 10 Heuristics‬‬ ‫رؤية حالة النظام‪.‬‬ ‫‪.1‬‬ ‫التطابق بين النظام والعالم الحقيقي‪.‬‬ ‫‪.2‬‬ ‫حرية المستخدم و تحكمه بالنظام‪.‬‬ ‫‪.3‬‬ ‫التناسق والمعايير‪.‬‬ ‫‪.4‬‬ ‫الوقاية من الخطأ‪.‬‬ ‫‪.5‬‬ ‫التمييز بدال من التذكير‪.‬‬ ‫‪.6‬‬ ‫المرونة وكفاءة االستخدام‪.‬‬ ‫‪.7‬‬ ‫التصميم الجمالي والبسيط‪.‬‬ ‫‪.8‬‬ ‫مس اعدة المس تخدمين على تمي يز وتش خيص األخط اء ‪ ،‬والتع افي‬ ‫‪.9‬‬ ‫منها‪.‬‬ ‫المساعدة والتوثيق ‪.‬‬ ‫‪.10‬‬ ‫‪6‬‬  ‫قوانين شنايدرمان الذهبية الثمانية‬ ‫‪Shneiderman’s 8 Golden Rules‬‬ ‫ اق‪.‬ترح ش‪.‬نايدرمان المجموع‪.‬ة التالي‪.‬ة من المب‪.‬ادئ ال‪.‬تي نتجت‬ ‫األنظم‪...‬ة‬ ‫ن ‪.‬‬‫ة ل‪.‬لت‪.‬ط‪...‬بي‪.‬ق ف‪.‬ي‪..‬كث‪...‬ير م ‪.‬‬ ‫من ت‪.‬ج‪.‬ارب‪...‬ه‪.‬وهي‪.‬ق‪.‬ابل‪....‬‬ ‫‪.‬ف‬ ‫م‪.‬تحس‪..‬ينها و ص‪..‬ياغتها ل‪.‬تناس‪..‬ب مختل‪..‬‬ ‫نت ‪.‬‬‫التف‪.‬اع‪.‬لي‪..‬ة‪.‬بع‪..‬د أ ‪.‬‬ ‫األنظمة‪.‬‬ ‫ السعي لتوفير االتساق ‪.consistency‬‬ ‫– يجب المحافظ ة على تسلس ل ث ابت لألعم ال في الح االت المماثل ة‪ ،‬يك ون‬ ‫اإلتساق في اآلتي‪:‬‬ ‫– المصطلحات‪.‬‬ ‫– األوامر‪.‬‬ ‫– القوائم‪.‬‬ ‫– شاشات المساعدة‪.‬‬ ‫– األلوان‪.‬‬ ‫– الخطوط‪.‬‬ ‫‪7‬‬  ‫قوانين شنايدرمان الذهبية الثمانية‬ ‫‪Shneiderman’s 8 Golden Rules‬‬ ‫ تمكين المس‪.....‬تخّدمين من إس‪.....‬تخدام‬ ‫اإلختصارات ‪.short-cuts‬‬ ‫– عندما يزيد مع ّدل االستعمال يرغب المستخدم في‬ ‫تخفيض ع دد التف اعالت وزي ادة س رعة التف اعل‪.‬‬ ‫يمكن إس تعمال الكث ير من التقني ات لمس اعدة‬ ‫المستخدمين وخصوصا الخبراء منهم و ذلك باآلتي‪:‬‬ ‫– المختصرات ‪Abbreviations‬‬ ‫– المفاتيح الوظيفة ‪function keys‬‬ ‫– األوامر الخفية ‪hidden commands‬‬ ‫‪8‬‬  ‫قوانين شنايدرمان الذهبية الثمانية‬ ‫‪Shneiderman’s 8 Golden Rules‬‬ ‫ توف‪..‬ير التغذي‪..‬ة المرتجع‪..‬ة ‪feedback‬‬ ‫المفيدة‪.‬‬ ‫ لك ّل عمل يجب على النظام توفير بعض الردود‬ ‫أو التغذي ة المرتجع ة‪.‬لألعم ال المتك ّر رة‬ ‫والبس يطة‪ ،‬يك ون ال رّد بس يطًا‪ ،‬بينم ا لألعم ال‬ ‫غ ير المتك ّر رة والرئيس ية‪ ،‬يجب أن يك ون ال رّد‬ ‫أكثر تفصيًال‪.‬أنظر الشكل التالى‪.‬‬ ‫‪9‬‬  ‫قوانين شنايدرمان الذهبية الثمانية‬ ‫‪Shneiderman’s 8 Golden Rules‬‬ ‫مثال للتغذية المرتجعة من‬ ‫النظام‬ ‫‪10‬‬  ‫قوانين شنايدرمان الذهبية الثمانية‬ ‫‪Shneiderman’s 8 Golden Rules‬‬ ‫التصميم المتكامل للحوارات‪.‬‬ ‫ ‬ ‫ سالس‪.‬ل االج‪.‬راءات ينبغي تنظيمه‪.‬ا في مجموعات‪.‬‬ ‫يجب أن يك‪.‬ون لك‪.‬ل إج‪.‬راء بداي‪.‬ة ووس‪.‬ط ونهاية ‪. closure‬‬ ‫–‬ ‫توفير طريقة بسيطة لمعالجة األخطاء‪.‬‬ ‫ ‬ ‫– تق ديم طريق ة بس يطة لمعالج ة األخط اء ق در المس تطاع‪ ،‬بحيث ُيمِّكن النظ ام‬ ‫المستخدم من اكتشاف الخطأ إذا اخطأ‪.‬يجب أن يكون النظام قادرا على تقديم‬ ‫آليات مفهومة و بسيطة لمعالجة األخطاء‪.‬‬ ‫ سهولة عكس ‪ reversal‬اإلجراءات‪.‬‬ ‫ه ذه الم يّز ة تخّف ف من قل ق المس تخدم و تش ّج عه على استكش اف‬ ‫ ‬ ‫الخيارات الجديدة‪.‬إذا أخطأ المستخدم فيمكنه عكس اإلجراء و الرجوع إلى‬ ‫الخطوة الص حيحة‪.‬الشكل الت الى يوضح إيقونات مص ممة عكس اإلجراءات‬ ‫(‪.) Undo-Redo‬‬ ‫‪11‬‬  ‫قوانين شنايدرمان الذهبية الثمانية‬ ‫‪Shneiderman’s 8 Golden Rules‬‬ ‫عكس اإلجراءات‬ ‫‪12‬‬  ‫قوانين شنايدرمان الذهبية الثمانية‬ ‫‪Shneiderman’s 8 Golden Rules‬‬ ‫ الح‪.‬د من التحمي‪.‬ل على ال‪.‬ذاكرة قص‪.‬يرة‬ ‫المدى‪:‬‬ ‫– ذاك رة المس تخدم قص يرة الم دى مح دودة في‬ ‫س عتها‪ ،‬و له ذه المحدودي ة ت أثير على عملي ة معالج ة‬ ‫المعلومات في ال ذاكرة‪.‬يجب وض ع ذل ك في‬ ‫اإلعتبار عند التصميم‪.‬‬ ‫‪13‬‬  ‫مبادئ نورمان السبعة‬ ‫( ‪)Norman’s 7 Principles‬‬ ‫– اس تخدم المعرف ة الشخص ية (المكتس بة) والمعرف ة من‬ ‫العالم الخارجي‪.‬‬ ‫– بّس ط تركيب المهام‪.‬‬ ‫– اجعل األشياء مرئية وذلك لسد الثغرة بين فجوة التنفيذ‬ ‫(‪ )gulf of execution‬و فج وة التق ييم ‪gulf of‬‬ ‫‪.evaluation‬‬ ‫ فجوة التنفيذ ‪ :Gulf of execution‬عدم التناسب بين نوايا‬ ‫المستخدم واألعمال المسموح بها‪.‬‬ ‫ فج وة التق ييم ‪ :Gulf of evaluation‬ع دم التواف ق بين‬ ‫تمثي ل النظ ام وتوقع ات المس تخدم الش كل الت الى ي بين‬ ‫فجوة التنفيذ و فجوة التقييم‪.‬‬ ‫‪14‬‬  ‫مبادئ نورمان السبعة‬ ‫( ‪)Norman’s 7 Principles‬‬ ‫– خطط بشكل صحيح‪.‬‬ ‫– إستغّل قّوة القيود الطبيعية واالصطناعية‪.‬‬ ‫– أجعل التصميم قادرًا على تالفي األخطاء‪.‬‬ ‫– إذا فشل ك ل ما ورد أعاله استعمل مقياس ًا موّح دًا‬ ‫‪.standardize‬‬ ‫‪15‬‬  ‫أنماط التصميم‬ ‫‪design patterns‬‬ ‫النم ط ‪ pattern‬ه و ح ّل ث ابت لمش كلة متك ّر رة ض من س ياق‬ ‫ ‬ ‫معين‪.‬‬ ‫أنم اط التص ميم ه و منهج إلع ادة اس تعمال ‪ reusing‬المعرف ة‬ ‫ ‬ ‫المكتسبة من حلول التصميم الناجحة‪.‬‬ ‫و هو منهج في التصميم يستخدم في علم التفاعل بين اإلنسان‬ ‫ ‬ ‫و الحاس وب ‪ HCI‬و هندس ة البرمجي ات‪ ،‬وه و مأخوذ من من اهج‬ ‫التصميم في الهندسة المعمارية‪.‬‬ ‫ته دف أنم اط التص ميم إلى االس تخدام المتك رر لحل ول وض عت‬ ‫ ‬ ‫لمش اكل تعت بر في ح د ذاته ا متك ررة أو متواج دة بك ثرة في‬ ‫عملية تصميم البرمجيات‪.‬‬ ‫ال تنطب ق ه ذه النظري ة على تص ميم البرمجي ات فق ط‪ ،‬ب ل‬ ‫ ‬ ‫تتعدداه إلى عدة علوم أخرى‪.‬‬ ‫‪16‬‬  ‫مبادئ التصميم الجيد‬ ‫‪Principles of good interface‬‬ ‫‪design‬‬ ‫– الحالة و بدائل اإلجراءات ينبغي ان تكون واضحة‪.‬‬ ‫– ينبغي ان يك ون النم وذج المف اهيمي ‪conceptual‬‬ ‫ورة‬ ‫قًا مع ص‬ ‫دا و متس‬ ‫‪ model‬جي‬ ‫النظام ‪system image.‬‬ ‫– ينبغي أن تتضمن الواجهة مطابقة جيدة تكشف عن‬ ‫العالقات بين مراحل النظام المختلفة‪.‬‬ ‫ة‬ ‫ة مرتجع‬ ‫تخدم تغذي‬ ‫– يجب أن يتلقى المس‬ ‫‪ feedback‬مستمرة‪.‬‬ ‫‪ ،،،،،‬الله الموفق‬ ‫‪17‬‬