HCI 10 Lecture Notes PDF

‫‪Human computer‬‬ ‫)‪Interaction (HCI‬‬ ‫تفاعل اإلنسان مع‬ ‫الحاسوب‬ ‫المحاضرة ‪10#‬‬ ‫‪1‬‬  ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫تجربة المستخدم ‪User Experience UX‬‬ ‫واجهة المستخدم ‪User Interface UI‬‬...

‫‪Human computer‬‬ ‫)‪Interaction (HCI‬‬ ‫تفاعل اإلنسان مع‬ ‫الحاسوب‬ ‫المحاضرة ‪10#‬‬ ‫‪1‬‬  ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫تجربة المستخدم ‪User Experience UX‬‬ ‫واجهة المستخدم ‪User Interface UI‬‬ ‫‪.1‬تعريف واجهة المستخدم (‪:)UI‬‬ ‫واجهة المستخدم (‪ )UI‬هي كل ما يراه المستخدم ويتفاعل معه على الشاشة عند استخدامه لتطبيق أو‬ ‫جهاز معين‪.‬تشمل عناصر الواجهة التصميم البصري للصفحة‪ ،‬األزرار‪ ،‬الرموز‪ ،‬القوائم‪،‬‬ ‫النصوص‪ ،‬والخلفيات‪.‬الهدف من تصميم واجهة المستخدم هو تسهيل التفاعل بين المستخدم والنظام‬ ‫وتحقيق أهدافه بأقل جهد ممكن‪.‬‬ ‫عناصر واجهة المستخدم‬ ‫ األزرار‪ :‬تستخدم لتنفيذ أوامر معينة‪.‬‬ ‫ القوائم‪ :‬توفر خيارات متعددة للمستخدم‪.‬‬ ‫ الحقول النصية‪ :‬تسمح بإدخال النصوص‪.‬‬ ‫ الرموز‪ :‬تسهل التفاعل بسرعة ووضوح‪.‬‬ ‫ اإلشعارات‪ :‬تعطي المستخدم معلومات عن حالة النظام‪.‬‬ ‫‪2‬‬  ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫تجربة المستخدم ‪User Experience UX‬‬ ‫واجهة المستخدم ‪User Interface UI‬‬ ‫‪.2‬تعريف تجربة المستخدم (‪)UX‬‬ ‫ تجربة المستخدم )‪)UX‬هي االنطباع العام للمستخدم حول كيفية تفاعلهم مع المنتج أو النظام‪.‬‬ ‫تتعلق بتجربة المستخدم بشكل أوسع‪ ،‬بما في ذلك سهولة االستخدام‪ ،‬أداء النظام‪ ،‬والرضا العام عن‬ ‫التفاعل مع واجهة المستخدم‪.‬ال تقتصر تجربة المستخدم على الواجهة فقط‪ ،‬بل تشمل جميع‬ ‫المراحل التي يمر بها المستخدم منذ بداية استخدام المنتج وحتى الوصول إلى هدفه‪.‬‬ ‫عناصر تجربة المستخدم‬ ‫ سهولة االستخدام‪ :‬مدى سهولة استخدام النظام بدون تعقيدات‪.‬‬ ‫ االستجابة‪ :‬سرعة استجابة النظام ألوامر المستخدم‪.‬‬ ‫ الرغبة‪ :‬مستوى الرضا الذي يشعر به المستخدم بعد التفاعل مع النظام‪.‬‬ ‫ التوجيه واإلرشاد‪ :‬توفير تعليمات واضحة ودعما ً في كل خطوة‬ ‫‪3‬‬  ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫‪.3‬أهمية واجهة المستخدم وتجربة المستخدم‪:‬‬ ‫تصميم واجهة المستخدم وتجربة المستخدم الجيدة يمكن أن يكون له تأثير كبير على نجاح أو فشل‬ ‫أي منتج تكنولوجي‪.‬إذا كانت واجهة المستخدم معقدة وغير بديهية‪ ،‬فإن ذلك قد يؤدي إلى إحباط‬ ‫المستخدمين وفشل المنتج‪.‬بينما إذا كانت تجربة المستخدم ممتعة وسهلة‪ ،‬سيزيد ذلك من الرضا‬ ‫والوالء للمنتج‪.‬‬ ‫‪.4‬الفرق بين واجهة المستخدم وتجربة المستخدم‬ ‫ واجهة المستخدم )‪ )UI‬هي الواجهة البصرية التي يتفاعل معها المستخدم‪ ،‬بينما تجربة المستخدم‬ ‫(‪ )UX‬هي التجربة الكاملة التي يمر بها المستخدم أثناء استخدامه للمنتج‪.‬‬ ‫يمكن أن تكون واجهة المستخدم رائعة ولكن تجربة المستخدم غير مرضية إذا كان النظام معقدًا أو‬ ‫بطيئًا‪.‬‬ ‫على العكس‪ ،‬يمكن أن تكون تجربة المستخدم رائعة حتى إذا كانت واجهة المستخدم بسيطة ولكن‬ ‫األداء العام للمنتج سيئ‪.‬‬ ‫‪4‬‬  ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫‪.5‬المبادئ األساسية لتصميم واجهة المستخدم‬ ‫البساطة‪ :‬اجعل التصميم بسي ً‬ ‫طا وسهل الفهم‪.‬‬ ‫التناسق‪ :‬حافظ على التناسق في األلوان والخطوط والعناصر عبر النظام‪.‬‬ ‫االستجابة‪ :‬تأكد من أن التفاعل مع النظام سريع وفعال‪.‬‬ ‫الوضوح‪ :‬اجعل األزرار والعناصر األخرى واضحة وسهلة التمييز‪.‬‬ ‫التغذية الراجعة‪ :‬قدم إشعارات للمستخدم حول حالة النظام‪.‬‬ ‫‪.6‬المبادئ األساسية لتجربة المستخدم‬ ‫سا وبدون تأخير‪.‬‬ ‫التفاعل السلس‪ :‬ينبغي أن يكون االنتقال بين الشاشات سل ً‬ ‫الوصولية‪ :‬تصميم واجهات يمكن الوصول إليها من قبل جميع الفئات‪ ،‬بما في ذلك األشخاص ذوي‬ ‫االحتياجات الخاصة‪.‬‬ ‫التفاعل الطبيعي‪ :‬توفير تفاعل طبيعي يتناسب مع طريقة تفكير المستخدم‪.‬‬ ‫اإلشراك العاطفي‪ :‬إحداث اتصال عاطفي مع المستخدم من خالل تصميم يعكس حاجاتهم وتفضيالتهم‪.‬‬ ‫‪5‬‬  ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫‪.7‬أدوات تصميم واجهة المستخدم وتجربة المستخدم‬ ‫أدوات تصميم الواجهات ‪ (UI Design Tools):‬مثل ‪Adobe XD ،Figma ،Sketch‬‬ ‫أدوات اختبار تجربة المستخدم ‪ )UX Testing Tools):‬مثل ‪،Lookback ،UsabilityHub‬‬ ‫‪.Hotjar‬‬ ‫‪.8‬خطوات تصميم واجهة وتجربة المستخدم‬ ‫‪.1‬البحث والتحليل‪:‬‬ ‫‪ -‬فهم احتياجات المستخدمين والمشاكل التي يواجهونها‪.‬‬ ‫‪ -‬دراسة الجمهور المستهدف وسلوكياتهم‪.‬‬ ‫‪.2‬تصميم النماذج األولية‪:‬‬ ‫‪ -‬إنشاء نماذج أولية للواجهة‪.‬‬ ‫‪ -‬تحديد العناصر الرئيسية مثل األزرار والقوائم‪.‬‬ ‫‪6‬‬  ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫‪.3‬اختبار واجهة المستخدم‪:‬‬ ‫‪ -‬إجراء اختبارات تجريبية لمعرفة مدى سهولة االستخدام‪.‬‬ ‫‪ -‬جمع مالحظات المستخدمين لتحسين التصميم‪.‬‬ ‫‪.4‬التنفيذ‪:‬‬ ‫‪ -‬تحويل التصميم إلى منتج نهائي باستخدام األدوات البرمجية‪.‬‬ ‫‪.5‬التقييم والتحسين المستمر‪:‬‬ ‫‪ -‬تحليل ردود الفعل وتحديث التصميم بشكل دوري لتحسين تجربة المستخدم‪.‬‬ ‫‪.9‬أمثلة تطبيقية على واجهة وتجربة المستخدم‪:‬‬ ‫ تطبيقات الهاتف المحمول‪ :‬مثل تطبيقات التواصل االجتماعي التي تعتمد على تصميم بسيط‬ ‫وسهل االستخدام لجذب المستخدمين‪.‬‬ ‫ المواقع اإللكترونية‪ :‬مثل مواقع التجارة اإللكترونية التي تركز على تبسيط عملية الشراء وزيادة‬ ‫الراحة للمستخدمين‪.‬‬ ‫‪7‬‬ ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫‪8‬‬ ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫‪9‬‬  ‫تصميم واجهة المستخدم ‪User Interface UI‬‬ ‫‪.10‬التحديات في تصميم تجربة المستخدم وواجهة المستخدم‪:‬‬ ‫تعقيد األنظمة‪ :‬صعوبة تحقيق توازن بين الوظائف الكثيرة وتجربة المستخدم السهلة‪.‬‬ ‫االختالفات الثقافية‪ :‬اختالف تفضيالت وأساليب التفاعل بنا ًء على الثقافة المحلية للمستخدمين‪.‬‬ ‫التطور التكنولوجي‪ :‬مواكبة التغيرات السريعة في التكنولوجيا وضمان توافق األنظمة مع األجهزة‬ ‫المختلفة‪.‬‬ ‫الخالصة ‪:‬‬ ‫تصميم واجهة المستخدم وتجربة المستخدم من العوامل الحاسمة في نجاح أي منتج تقني‪.‬من خالل‬ ‫فهم احتياجات المستخدم وتطبيق المبادئ الصحيحة‪ ،‬يمكن تحسين مستوى رضا المستخدمين‪ ،‬مما‬ ‫يؤدي إلى تحسين الكفاءة والوالء للمنتجات‪.‬‬ ‫‪10‬‬