Lec4.pdf

‫تصميم واجهات المستخدم‬ ‫‪Lecture 4‬‬ ‫‪1‬‬  ‫المبادئ العامة لتصميم واجهات المستخدم‬ ‫الرسوماتية‬ ‫ توفير الجاذبية البصرية و ذلك باآلتي‪:‬‬ ‫توفير تباين ‪ contrast‬بين عناصر الشاشة‪...

‫تصميم واجهات المستخدم‬ ‫‪Lecture 4‬‬ ‫‪1‬‬  ‫المبادئ العامة لتصميم واجهات المستخدم‬ ‫الرسوماتية‬ ‫ توفير الجاذبية البصرية و ذلك باآلتي‪:‬‬ ‫توفير تباين ‪ contrast‬بين عناصر الشاشة‪.‬‬ ‫–‬ ‫خلق تجمعات ‪ groupings‬بين العناصر المتشابهة في الشكل و‪/‬أو المعنى‪.‬‬ ‫–‬ ‫تنظيم عناصر الشاشة‪.‬‬ ‫–‬ ‫توفير التمثيل الثالثي االبعاد‪.‬‬ ‫–‬ ‫استخدام األلوان بشكل فعال وبسيط‪.‬‬ ‫–‬ ‫ توفير الوضوح لجميع‪:‬‬ ‫العناصر البصرية ‪.Visual elements‬‬ ‫–‬ ‫الوظائف ‪.Functions‬‬ ‫–‬ ‫المجازات ‪.Metaphors‬‬ ‫–‬ ‫الكلمات والنصوص ‪.Words and text‬‬ ‫–‬ ‫‪2‬‬ ‫المبادئ العامة لتصميم واجهات المستخدم‬ ‫الرسوماتية‬ ‫ إتاحة التوافق للمستخدم في ‪:‬‬ ‫– المهام والوظائف‪.‬‬ ‫– وجهة نظر المستخدم مع المصمم‪.‬‬ ‫ توفر الوضوح بالسماح للمستخدم من ‪:‬‬ ‫– معرفة الشئ الذي ينظر إليه في الشاشة‬ ‫– معرفة مايجب أن يفعل إلنجاز المهمة‬ ‫– معرفة متى يفعل ذلك‬ ‫– معرفة لماذا يفعل ذلك‬ ‫– معرفة كيف يفعل ذلك‬ ‫‪3‬‬  ‫المبادئ العامة لتصميم واجهات المستخدم‬ ‫الرسوماتية‬ ‫ توفير التناغم باآلتي‪:‬‬ ‫– المكونات المتماثلة ينبغي أن يكون لها شكل مماثل واستخدامات‬ ‫متماثلة وتعمل بالمثل‪.‬نفس اإلجراء ينبغي أن يؤدي إلى نفس‬ ‫النتيجة‪.‬‬ ‫– ال ينبغي تغيير العناصر المهمة‬ ‫– ال ينبغي تغيير أماكن العناصر القياسية‪.‬‬ ‫– اتباع المعايير والمبادئ التوجيهية (مثل واجهة مايكروسوفت‬ ‫ويندوز ‪ ،‬وغيرها‪).‬‬ ‫‪4‬‬  ‫المبادئ العامة لتصميم واجهات المستخدم‬ ‫الرسوماتية‬ ‫ إعطاء المستخدم التحكم في الواجهة‪ ،‬و ذلك باالتي‪:‬‬ ‫– يجب أن تكون اإلجراءات نتيجة صريحة لطلبات المستخدمين ‪.‬‬ ‫– يجب أن تتم اإلجراءات على وجه السرعة ‪.‬‬ ‫– يجب أن يكون المستخدم قادرا ً على ايقاف اإلجراءات او إنهاؤها ‪.‬‬ ‫– يجب أن يشعر المستخدم بأنه متحكم بالنظام‪.‬‬ ‫– بجب أن تتسلسل األفكار و األعمال‪.‬‬ ‫– توفير الكفاءة ‪.‬‬ ‫– استخدام األلفة و استخدام االستعارات بواقعية‪.‬‬ ‫‪5‬‬  ‫المبادئ العامة لتصميم واجهات المستخدم‬ ‫الرسوماتية‬ ‫ توفير المرونة من خالل دعم‪:‬‬ ‫– المستخدم لالستفادة من معارفه ومهاراته‬ ‫– التفضيل الشخصي للمستخدم‬ ‫– عادات المستخدم‬ ‫ توفير رسائل أخطاء بناءة عند حدوث الخطأ‪.‬‬ ‫ توفير طريقة للتخلص من االخطاء و العودة الفورية إلى نقطة معينة عند‬ ‫حدوث الخطأ‪.‬‬ ‫ تقديم البساطة‪.‬‬ ‫– جعل اإلجراءات المشتركة بسيطة‪.‬‬ ‫– التوحيد‪.‬‬ ‫ الشفافية‪.‬‬ ‫– يجب على المستخدم اال يشعر بالقلق ازاء المشاركة‪.‬‬ ‫‪6‬‬  ‫الواجهات الرسوماتية المتطورة‬ ‫‪Advanced graphical interfaces‬‬ ‫ توجد الكثير من الواجهات الرسوماتية المتطورة و التي‬ ‫سن من إمكانيات المستخدم في الوصول إلى المعلومات و‬ ‫تح ّ‬ ‫استكشاف وتجسيد المعلومات‪.‬مثال على ذلك‪:‬‬ ‫– الصور المتحر ّكة التفاعلية ‪interactive animations‬‬ ‫– البيئات االفتراضية ‪virtual environments‬‬ ‫‪7‬‬  ‫الواجهات الرسوماتية المتطورة‬ ‫‪Advanced graphical interfaces‬‬ ‫ واجهات الوسائط المتعددة ‪multimedia‬‬ ‫هي الواجهات التي تجمع وسائط ‪media‬تفاعلية مختلفة في واجهة‬ ‫–‬ ‫واحدة‪.‬‬ ‫مثل أشكال مختلفة من الرسومات و النصوص و الفيديو الصوت‬ ‫–‬ ‫والصور المتحر ّكة‪.‬‬ ‫نص‬ ‫يقوم المستخدم بالنقر ‪click‬على الروابط ‪links‬في صورة أو ّ‬ ‫–‬ ‫فيظهر جزء آخر من البرنامج أو جزء من برنامج آخرأو صور‬ ‫متحر ّكة أو يتم تشغيّل لقطة فيديو‪.‬بعد ذلك يستطيع المستخدم أن يرجع‬ ‫إلى مكانه أو االنتقال إلى مكان آخر عن طريق الروابط‪.‬‬ ‫الشكل التالى يبين بيئة تعلمية بالوسائط المتعددة من ‪BioBlast‬‬ ‫–‬ ‫‪8‬‬ ‫الواجهات الرسوماتية المتطورة‬ ‫‪Advanced graphical interfaces‬‬ ‫بيئة تعليمية بالوسائط المتعددة‪.‬‬ ‫‪9‬‬  ‫الواجهات الرسوماتية المتطورة‬ ‫‪Advanced graphical interfaces‬‬ ‫ الحقيقة االفتراضية والبيئات االفتراضية ‪Virtual reality and virtual‬‬ ‫‪environments‬‬ ‫تزويد محاكاة للواقع عن طريق الحاسوب وهي تعطي المستخدم إحساس االشتراك‬ ‫–‬ ‫في بيئة صناعية بدال من المالحظة الخارجية لمثل هذه البيئة‪.‬‬ ‫الشكل التالى يوضح تصميما ً ثالثي األبعاد و تصميما ً ثنائي األبعاد لنفس اللعبة‪.‬‬ ‫–‬ ‫تقدم أنواعا ً جديدة من التجربة‪ ،‬تم ّكن المستخدمين من التفاعل مع األجسام و التنقّل‬ ‫–‬ ‫في فضاء ثالثي األبعاد ‪.3 D space‬‬ ‫تخلق تجارب ‪experience‬تفاعلية جذّابة جدا للمستخدم ‪.‬‬ ‫–‬ ‫من مساوئ الواجهات الحقيقة االفتراضية وخصوصا البيئات االفتراضية المدمجة‬ ‫–‬ ‫‪ augmented reality‬أن شاشات العرض المحمولة على الرأس‬ ‫‪ Head-mounted displays‬و التي تستخدم في التفاعل مع الواجهة‪ ،‬غير مريحة‬ ‫في اللبس كما يمكن أن تسبّب الغثيان الناتج من الحركة ‪motion sickness‬‬ ‫والتضليل ‪.disorientation‬‬ ‫‪10‬‬ ‫الواجهات الرسوماتية المتطورة‬ ‫‪Advanced graphical interfaces‬‬ ‫شاشات العرض المحمولة على الرأس التي تستخدم في التفاعل‬ ‫مع واجهة البيئات االفتراضية المدمجة‬ ‫‪11‬‬ ‫الواجهات الرسوماتية المتطورة‬ ‫‪Advanced graphical interfaces‬‬ ‫االختالف في التصميم ثالثي األبعاد و ثنائي األبعاد لأللعاب‬ ‫‪12‬‬  ‫اللغة الطبيعية‬ ‫‪Natural language‬‬ ‫‪ -5‬اللغة الطبيعية ‪Natural language‬‬ ‫– هذا النوع من انواع التفاعل لم ينجح تماما في ح ّل عملي‬ ‫لواجهات المستخدم‪.‬و ذلك بسبب صعوبة تطبيق أنظمة عالية‬ ‫الكفاءة معتمدة على اللغة الطبيعية‪.‬هذا النوع من التطبيقات في‬ ‫أغلب األحيان مستند على تقنيات الذكاء الصناعي ‪Artificial‬‬ ‫‪ Intelligence‬مثل شبكات االنتقال المدمجة ‪augmented‬‬ ‫‪transition networks‬‬ ‫‪13‬‬  ‫االستفسار ‪Query‬أو أسلوب سؤال ‪ /‬جواب‬ ‫‪Question/answer‬‬ ‫‪ -6‬االستفسار ‪Query‬أو أسلوب سؤال ‪ /‬جواب‬ ‫‪Question/answer‬‬ ‫أساوب االستفسار يو ّجه المستخدم خالل التفاعل عن طريق‬ ‫ ‬ ‫سلسلة من األسئلة‪.‬‬ ‫يستخدم أغلب األحيان في أنظمة المعلومات‪.‬‬ ‫ ‬ ‫مثال للغات االستفسار ‪SQL‬التي تستعمل لبناء االستفسارات‬ ‫ ‬ ‫والسترجاع المعلومات من قواعد البيانات‪.‬‬ ‫االستخدام الفعال للغة ‪ SQL‬يتطلب فهم أساسيات قواعد البيانات و‬ ‫ ‬ ‫تركيب اللغة ‪.language syntax‬‬ ‫‪14‬‬