Lecture 2: User Interface Design PDF

‫تصميم واجهات المستخدم‬ ‫‪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‬بأنها الفعالية ‪effectiveness‬‬ ‫والكفاءة ‪ efficiency‬والرضا ‪ 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‬‬