التفاعل بين الإنسان والحاسب - هندسة البرمجيات - ثالث ثانوي

84 الدرس الثاني التفاعل بين الإنسان والحاسب رابط الدرس www.ien.edu.sa ما المقصود بالتفاعل بين الإنسان والحاسب ؟ What is Human-Computer Interaction (HCI) يشير مصطلح التفاعل بين الإنسان والحاسب (HCI) إلى مجال دراسة التفاعل بين البشر وأجهزة الحاسب، حيث يهتم هذا المجال بتصميم وتكييف الأنظمة المختلفة للاستخدام البشري، مع التركيز على تصميم الواجهات المستخدمة من الأشخاص أو المستخدمون وأجهزة الحاسب. يهتم الباحثون في هذا المجال بالطرائق التي يتفاعل بها البشر مع أجهزة الحاسب وتقنيات التصميم المختلفة التي تسمح لهم بالتفاعل مع أجهزة الحاسب بطرائق مبتكرة. بنيت قواعد التفاعل بين الإنسان والحاسب على ثلاثة أُسس هي: المستخدم، والحاسب، وعملية التفاعل، والتي يتم تعريفها على أنها تدفق المعلومات بين الإنسان والحاسب. تخصصات التفاعل بين الإنسان والحاسب Human-Computer Interaction Majors توسعت دراسة التفاعل بين الإنسان والحاسب لتشمل علومًا مُستقاة من مجالات هندسة العوامل البشرية والعلوم المعرفية وكذلك علوم الحاسب. يهتم التفاعل بين الإنسان والحاسب بالجوانب المعرفية والأكاديمية لسلوك المستخدم، والتي تُعدُّ مُخرجاتها مدخلات أساسية في المجال التطبيقي، والذي تستند إليه تصميمات تجربة المستخدم (User Experience -UX ) وواجهة المستخدم (User Interface -UI ) هندسة العوامل للتطبيقات المختلفة مثل تطبيقات الهواتف الذكية ومواقع الويب. إن التعاون الفعّال بين الباحثين في مجال التفاعل بين الإنسان والحاسب (HCI) والمُصمِّمين لواجهة وتجربة المستخدم يؤدي في النهاية إلى تصميمات مثالية تلبي احتياجات المستخدمين. البشرية التفاعل بين الإنسان والحاسب علوم الحاسب العلوم المعرفية شكل 2.15: التفاعل بين الإنسان والحاسب وزارة التعليم Ministry of Education 2024-1446

تصميم تجربة المستخدم (User Experience Design (UX تشير تجربة المستخدم (UX) إلى انطباعات الشخص ومواقفه حول استخدام مُنتَج أو نظام أو خدمة معينة، ويشمل هذا الجوانب العملية والعاطفية للتفاعل بين الإنسان والحاسب. تتضمَّن تجربة المستخدم أيضًا تصور المستخدم لجوانب النظام المختلفة، مثل مكوناته وسهولة استخدامه وكفاءته، ويُمكن تطبيق هذا المفهوم على أي نظام، مثل أجهزة الصراف الآلي والسيارات والهواتف وما إلى ذلك. العوامل الرئيسة المؤثرة على تجربة المستخدم: اتسع مفهوم تجربة المستخدم ليشمل العديد من الجوانب بالإضافة إلى سهولة الاستخدام، وأصبح الانتباه إلى جميع جوانب تجربة المستخدم من أجل تقديم مُنتَجات ناجحة إلى السوق ضروريًا. لتحسين تجربة المستخدم، يجب أن يمتاز تصميم النظام ومحتوياته ووظائفه بما يلي: .1 مفيد: يلبي احتياجات المستخدمين. 2 قابليّة الاستخدام: يُمكن استخدام النظام بسهولة وبديهية. 3. ذو مظهر جذاب: تُستخدم عناصر التصميم بطريقة فريدة لتجذب المستخدم وتُضفي على النظام هويته الخاصة. .4 يسهل العثور عليه : يُمكن تصفح محتوياته والوصول إليها بسهولة من داخل النظام أو خارجه. .5 سهولة الوصول: يجب أن يشمل التصميم المستخدمين ذوي الاحتياجات الخاصة في خصائصه. 6. المصداقية يستمد النظام محتواه من مصادر موثوقة ومعتمدة. و 7 . القيمة: يجب أن يقدِّم المنتج قيمة لمن قاموا بإنشائه وللمستخدمين الذي يشترونه أو يستخدمونه. قابلية الاستخدام وسهولة < الوصول الجاذبية ) المصداقية ------ UX شكل 2.16: العوامل الرئيسة المؤثرة على تجربة المستخدم -- مفيد ←------ القيمة سهولة العثور عليه 85 وزارة التعليم Ministry of Education 2024-1446

واجهة المستخدم (User Interface (UI إن واجهة المستخدِم (UI) هي نقطة التفاعل والتواصل بين الإنسان والحاسب داخل الجهاز، ويُمكن القول بأن واجهة المستخدم هي الشكل الرسومي للتطبيق، وتتضمَّن الأزرار، والنصوص المقروءة ، والصور، وأشرطة التمرير، وحقول إدخال النص، إضافةً إلى العديد من العناصر الأخرى التي يتفاعل معها المستخدم. تحتوي واجهة المستخدم أيضًا على تخطيط الشاشة، والانتقالات، والتأثيرات المتحركة لواجهة المستخدم الرسومية، وجميع التفاصيل الدقيقة للتفاعل، وأي تأثيرات رسومية بحاجة إلى تصميم. Music 22.6 Smart Home Security Mzeday Tuesday Techsday Camera 17° CLOUDY شكل :2.17 واجهة المستخدم للأجهزة اللوحية تتمثل مهمة مُصممي واجهة المستخدم (UI) في تحديد مظهر التطبيق، وفي إنشاء شكل واجهة مستخدم التطبيق ومظهرها ، ويتعين على المصمِّم اختيار أنظمة الألوان وأشكال الأزرار ، وأنواع خطوط النصّ وحجمها ، وطريقة عرضها. و اعتبارات إنشاء واجهة مستخدم جيدة : ترتبط اعتبارات تصميم واجهة المستخدم بالعديد من العلوم والتخصصات الأخرى، كعلم النفس والفنون الجميلة، كما تأخذ بالاعتبار ما يلي: وزارة التعليم Ministry of Education 2024-1446 OFF ON 1. يجب أن يشير شكل الأزرار والعناصر الأخرى إلى وظيفتها، ويجب أن يسمح التصميم للمستخدم باستكشاف هذه الوظائف بسهولة. 2. يجب تصميم الواجهات وإضافتها بشكل صحيح ومناسب للمستخدم بحيث تكون عناصر التحكم مجاورة للأشياء المرتبطة بها. 86

87 وزارة التعليم Ministry of Education 2024-1446 clear text 3. يجب أن تأخذ عناصر الواجهة في الاعتبار قدرات المستخدم المرئية من حيث حجم الخط وتعديل النصّ وسطوع الألوان والتباين. .4. يجب أن تُزوّد الواجهة مستخدميها بالرسائل والإشارات التي توضّح استجابة النظام للأوامر المراد تنفيذها وتقديم التغذية الراجعة الفورية، وفيما يلي بعض تمت إضافة المنتج. تحذير: لا يُمكن ترك وصف المنتج فارغا. لا يُمكن إضافة المنتج، تأكد من اسم المنتج. الأمثلة: 5. يجب توفير أكبر عدد ممكن من الإعدادات أو التعبئة الافتراضية لتخفيف العبء على المستخدم كتوفير النماذج المعبأة مسبقًا، وفيما يلي بعض الأمثلة: ما الذي تريد أن تراه فيما بعد؟ هل لديك أي اقتراحات أو أفكار حول المنتج؟ لا تترد بالتواصل معنا. Name Khaled Abdullah E-mail address khaled@email.com Tell us why you like this idea? Send تعبئة تلقائية تعبئة تلقائية Idea details

88 كيف تعمل تجربة المستخدم وواجهة المستخدم معا ؟ How Do UX and UI Work Together غالبا ما يتم الخلط بين مفهومي: تجربة المستخدم، وواجهة المستخدم عند تصميم صفحات الويب وتطبيقات الهواتف الذكية. يَكمُن وجه الاختلاف بينهما في أن واجهة المستخدم تهتم بالمُخطَّط الرسومي للتطبيق أو موقع الويب، بينما تُركّز تجربة المستخدم على مدى سهولة أو صعوبة التفاعل مع عناصر واجهة المستخدم، ولذلك فإنه من الطبيعي أن تفرض تجربة المستخدم مواصفات واجهة المستخدم. الحاسب المكتبي والهاتف الذكي Desktop Computer and Smartphone لقد أصبحت الأجهزة المحمولة أكثر استخدامًا في هذه الأيام مقارنة بأجهزة الحاسب، كما تحولت إلى أداة أساسية للتسوق الإلكتروني ولتصفح وسائل التواصل الاجتماعي، وأداء مهام أخرى عبر الإنترنت. وهكذا فإنه من المهم مراعاة جهاز المستخدم عند تطوير مواقع الويب والتطبيقات الذكية، والتي ستتناولها الدروس القادمة. و عند تصميم التطبيقات ومواقع الويب، يجب مراعاة إمكانية عملها على جميع الأجهزة مثل الأجهزة المحمولة والمكتبية وكيفية اختلاف تجربة المستخدم عند استخدام التطبيق على الهاتف المحمول مقارنةً باستخدام الحاسب المكتبي. يجب الانتباه إلى العوامل المهمة التي تجعل الهاتف المحمول مختلفا ، وفهمها جيدًا ، وبالتالي وضع هذه العوامل بالاعتبـار عـنـد تصميم تطبيق الهاتف المحمول أو موقع الويب. الخصائص الرئيسة لأجهزة الحاسب المكتبية والهواتف المحمولة The Main Characteristics of Desktop Computers and Mobile Phones يُوضّح الجدول التالي خصائص الأجهزة المحمولة، مثلًا: أجهزة الحاسب المكتبية والمحمولة والهواتف الذكية والأجهزة اللوحية. جدول 2.3 الخصائص الأساسية للأجهزة الخاصية أجهزة الحاسب المكتبية والمحمولة الهواتف المحمولة والأجهزة اللوحية يُمكن لأجهزة الحاسب المكتبية تختلف شاشات الهواتف الذكية حسب الشركة المصنعة والطراز. ومع ذلك، فهي للمُستخدم اختيار ما يناسبه. دائما أصغر من أجهزة الحاسب المكتبية أو الاتصال بعدة شاشات مما يتيح الشاشة يتراوح حجم شاشات الحاسب المكتبي أو الحاسب المحمول بشكل عام بين 15 و 30 بوصة. المحمولة، ويتراوح حجم الشاشة عادة بين أربع وسبع بوصات. تحتوي معظم الأجهزة المحمولة على عدد تحتوي أصغر شاشة حاسب محمول بكسلات أقل من أجهزة الحاسب المكتبية دقة الشاشة على عدد 2304 × 1440 بكسل. فعلى سبيل المثال، تبلغ شاشة الهاتف الذكي إمكانية النقل المحمولة عادةً ما تكون خفيفة ومحمولة، إلا أنها لا تستطيع منافسة عالية الجودة 1334 × 750 بكسل. الهواتف الذكية خفيفة الوزن ويُمكن وضعها على الرغم من أن أجهزة الحاسب في الجيب أو حقيبة اليد، وهي مصممة لتكون مع المستخدم في كل مكان. أما الجهاز اللوحي فلا يُمكن وضعه في الجيب، ولكن يُمكن حمله بيد واحدة أيضًا. الهواتف الذكية من هذه الناحية. وزارة التعليم Ministry of Education 2024-1446

الخاصية أجهزة الحاسب المكتبية والمحمولة طرائق الإدخال تشغيل البرامج نظام التشغيل الاتصال بالإنترنت الهواتف المحمولة والأجهزة اللوحية قد تحتوي الهواتف الذكية على لوحة مفاتيح تُستخدم لوحة المفاتيح أو الفأرة على الشاشة أو شاشة تعمل باللمس أصغر للإدخال، وهي سلسة وسهلة الاستخدام بكثير من الحاسب، ويُمكن أن يواجه لغالبية المستخدمين، وتأتي بأحجام المستخدمون الذين يعانون من مشاكل الرؤية مختلفة. و يُمكن لأجهزة الحاسب المكتبية أو لديهم أصابع كبيرة صعوبة في الكتابة. على الرغم من التطور الهائل في إمكانيات والمحمولة تشغيل برامج أكثر قوة من الهاتف الذكي أو الجهاز اللوحي وذلك نظرا لحجمها ومكوناتها التي تتيح وجود مصادر أكبر من الطاقة. الهواتف المحمولة، إلا أن إمكانية تشغيل البرامج الضخمة عليها ما زالت محدودة مقارنة بأجهزة الحاسب المكتبية أو المحمولة. تم تصميم أنظمة تشغيل أجهزة تم تصميم أنظمة تشغيل الأجهزة المحمولة الحاسب المكتبية والمحمولة لتحقيق أندرويد (Android) وآي أو أس (iOS) الاستفادة القصوى من وحدات لتعمل على مجموعة محددة من الأجهزة مع المعالجة المركزية السريعة، ومساحة منح المستخدم إمكانية الوصول المقيد إلى القرص الكبيرة والمساحة الكبيرة المكوّنات، ويوجد كذلك تقييدات على لذاكرة الوصول العشوائي واستخدام متطلّبات الأجهزة لارتباط بيئة تطبيقات ميزات الرقائق الجديدة التي لا الأجهزة المحمولة بميزات خاصة بأجهزة تمتلكها معظم الأجهزة المحمولة. معينة. لا يُمكن أيضًا تشغيل أحدث التطبيقات يعد نظام تشغيل مايكروسوفت مغلق على نظام تشغيل قديم، والعكس صحيح. يُعدُّ نظام التشغيل أندرويد مفتوح المصدر. المصدر. تتميز أجهزة الحاسب المكتبية بإمكانية الاتصال بشبكة الإنترنت يُمكن للهواتف الذكية والأجهزة اللوحية السلكية إيثرنت (Ethernet) من الاتصال بشبكات واي فاي (Wi-Fi) خلال بطاقة الاتصال بالشبكة اللاسلكية للوصول إلى الإنترنت، ويُمكن ويتطلب أغلبها بطاقة خارجية للهواتف الذكية ومعظم الأجهزة اللوحية للاتصال بالشبكة اللاسلكية، أما أيضًا الاتصال بشبكة بيانات الجوال التي أجهزة الحاسب المحمولة فيحتوي تتيح الوصول إلى الإنترنت من أي مكان معظمها على بطاقتي شبكة لاسلكية تقريبًا، ولكنها قد تكون أكثر تكلفة. وسلكية. الاختلافات الوظيفية بين الهواتف المحمولة وأجهزة الحاسب المكتبية Functional Differences between Mobile Phones and Desktop Computers للهواتف المحمولة وأجهزة الحاسب وظائف مختلفة، ولكل من هذه الوظائف أهميته الخاصة، فبينما تُوفّر الهواتف المحمولة المرونة اللازمة للمستخدم للبحث عبر الإنترنت أو استخدام البريد الإلكتروني من أي مكان، فإن أجهزة الحاسب تُستخدم للمهام الأكثر تعقيدًا ، واستخدام كليهما في الوقت نفسه يتيح إنجاز العمل والمهام بشكل فعال. 89 وزارة التعليم Ministry of Education 2024-1446

واجهة مستخدم أندرويد ونظام تشغيل ويندوز Android User Interface and Windows Operating System أدى الاعتماد المتزايد للعديد من الشركات على تطبيقات الويب وتطبيقات الهاتف المحمول إلى تركيز الشركات على تحسين واجهة المستخدم من أجل تحسين تجربة المستخدم ككل ، ولذلك توجد مجموعة متنوعة من أنواع واجهات المستخدم. يدعم كل من نظام تشغيل مايكروسوفت ويندوز وقوقل أندرويد واجهة المستخدم الرسومية Las (Graphical User Interface - GUI) يعني أنه بدلًا من كتابة الأوامر، يتم التعامل مع كائنات رسومية مختلفة مثل الأيقونات باستخدام المؤشر يتشابه المبدأ الأساسي لكثير من واجهات المستخدم الرسومية المختلفة للغاية، ولذلك فإن معرفة المستخدم بكيفية استخدام واجهة مستخدم ويندوز ستمكنه من استخدام واجهة أندرويد وبعض واجهات المستخدم الرسومية الأخرى. mobile overlay desktop tablet header image social medio reponsive grid breakpoints? شكل 2.18: اعتبارات واجهة المستخدم الرسومية في تطوير التطبيقات فيما يلي بعض الخصائص الرئيسة لواجهة وتجربة المستخدم لنظامي التشغيل مايكروسوفت ويندوز وقوقل أندرويد بصفتهما أكثر أنظمة التشغيل استخدامًا. واجهة مستخدم مايكروسوفت ويندوز ، Microsoft Windows User Interface يستخدم ويندوز صناديق حوار تحتوي على العديد من العناصر المرئية وتعرض هذه الصناديق للمُستخدم أكبر قدر ممكن من المعلومات ذات العلاقة بسرعة، ويُمكن للمُستخدم باستخدام الفأرة والحد الأدنى من الكتابة على لوحة المفاتيح الاختيار بشكل مناسب وتشغيل التطبيقات أو الأوامر المطلوبة. واجهة مستخدم قوقل أندرويد Google Android User Interface الشاشة تختلف متطلبات تصميم واجهة المستخدم للأجهزة المحمولة بشكل كبير عن تلك الخاصة بأجهزة الحاسب المكتبية، حيث يفرض حجم الصغير وأدوات التحكم في الشاشة التي تعمل باللمس اعتبارات خاصة عند تصميم واجهة المستخدم لضمان سهولة الاستخدام والقراءة والاتساق. يُمكن استخدام الأيقونات في واجهة الهاتف المحمول على نطاق واسع، وقد يتم إخفاء عناصر التحكم تلقائيًا عند عدم استخدامها، ويجب أن تكون الأيقونات نفسها أصغر حجمًا ، وقد يكون من الضروري إخفاء وصف الأيقونات لتفادي إرباك المستخدم. يجب أن يكون المستخدمون قادرين على معرفة ما تشير إليه كل أيقونة سواء من خلال النصوص أو التمثيل الرسومي الذي يُمكن فهمه بسهولة. شكل 2.19 واجهة المستخدم لأنواع مختلفة من الأجهز وزارة التعليم Ministry of Education 2024-1446 90

1 تمرينات أجب عن الأسئلة التالية بناءً على ما تعلمته في هذا الدرس 1 ما المقصود بالتفاعل بين الإنسان والحاسب (HCI) اذكر مكوناته. 2. ما المقصود بتصميم واجهة المستخدم (UI)؟ 2 صف بإيجاز الفرق بين تجربة المستخدم (UX) وواجهة المستخدم (UI)؟ تجربة المستخدم (UX) واجهة المستخدم (UI) 91 وزارة التعليم Ministry of Education 2024-1446

92 3 ضع علامة ( √ ) أمام نوع الجهاز المناسب لكل وصف من الأوصاف التالية: .1 أجهزة قليلة التكلفة وبمواصفات عالية. 4 .2 يُمكن أن يصل حجم شاشتها إلى 30 بوصة. 3. تحتوي على شاشة ذات دقة أعلى. .4 خفيفة الوزن ويُمكن وضعها داخل الجيب. 5. يتم توصيلها عادةً بالفأرة ولوحة المفاتيح. أجهزة الحاسب المكتبية الأجهزة المحمولة قارن بين الوسائل التي تتصل بها أجهزة الحاسب المكتبية والأجهزة المحمولة بالإنترنت. وزارة التعليم Ministry of Education 2024-1446

5 حددا عدد الجملة الصحيحة والجملة الخاطئة فيما يلى: 1. يهتم التفاعل بين الإنسان والحاسب (HCI) حصريًا بتطوير منطق الأعمال للتطبيقات. 2. من أهم أوجه التشابه بين تجربة الهاتف المحمول وجهاز الحاسب المكتبي استخدام الأشخاص لها بالطريقة نفسها، وللمهام نفسها. 3. يشمل التفاعل بين الإنسان والحاسب (HCI) المجال العلمي للعلوم المعرفية. .4 لا يؤثر نظام التشغيل على سرعة الهاتف المحمول أو الحاسب المكتبي. 5. تمنحك الأجهزة المحمولة وصولاً كاملًا إلى جميع موارد الجهاز. .6 تُعد شبكات بيانات الهاتف المحمول أرخص وسيلة للاتصال بالإنترنت. 7. يستخدم مايكروسوفت ويندوز وقوقل أندرويد مكونات واجهة المستخدم الرسومية نفسها. 8. يتمتع مستخدمو الأجهزة المحمولة بإمكانية تصفح الإنترنت أثناء تنقلهم أو أثناء استخدام وسائل النقل العام. .9. يَستخدم الأشخاص في البيئات المكتبية الأجهزة المحمولة أكثر من استخدام أجهزة الحاسب. 10. يؤثر الاختلاف في استخدام الهواتف الذكية وأجهزة الحاسب المكتبية على طريقة عمل مواقع الويب والتطبيقات التي يجب أن تعمل بشكل جيد على كل جهاز. صحيحة خاطئة 93 وزارة التعليم Ministry of Education 2024-1446

94 6 أدرج بعض ميزات واجهة المستخدم (UI) وتجربة المستخدم (UX) الرئيسة لنظامي تشغيل مايكروسوفت ويندوز وقوقل أندرويد. نظام تشغيل ويندوز نظام تشغيل قوقل أندرويد 7 وضّح الاختلاف بين أنظمة تشغيل أجهزة الحاسب المكتبية والهواتف المحمولة. وزارة التعليم Ministry of Education 2024-1446