Human Computer Interaction (HCI) Lecture Notes PDF

‫‪Human computer‬‬ ‫)‪Interaction (HCI‬‬ ‫تفاعل اإلنسان مع‬ ‫الحاسوب‬ ‫المحاضرة ‪8 #‬‬ ‫‪1‬‬  ‫مبادئ التصميم‬ ‫ رؤية شنايدرمان لتصميم واجهة المستخدم‬ ‫أش...

‫‪Human computer‬‬ ‫)‪Interaction (HCI‬‬ ‫تفاعل اإلنسان مع‬ ‫الحاسوب‬ ‫المحاضرة ‪8 #‬‬ ‫‪1‬‬  ‫مبادئ التصميم‬ ‫ رؤية شنايدرمان لتصميم واجهة المستخدم‬ ‫أشار شنايدرمان إلى العناصر الرئيسيّة التي تجعل الواجهات عالية الجودة‪.‬وتأ ّكد من ّ‬ ‫أن‬ ‫استدالالته قادرة على تقديم تجربة مستخدم ممتعة وفعّالة‪.‬ونذكر في ما يلي القواعد الذهبيّة‬ ‫الثمانية‪:‬‬ ‫‪.1‬التماسك ‪ -‬حا ِفظ على قابلية توقّع واجهتك؛ ينظر البشر إلى ما يتوقّعونه‪.‬‬ ‫‪.2‬االختصارات – خ ِفّف من الذاكرة واجعَل بعض الوظائف مؤتمنة وسريعة‪.‬هذا ما يظهر في‬ ‫ملفات تعريف االرتباط التي تحفظ المعلومات الشخصية في ك ّل حالة‪.‬‬ ‫‪.3‬الحوار – قُم بإبالغ المستخدم عن حالة التطبيق؛ وتُعتبر رسائل التحقّق من الص ّحة مثاالً جيّدًا‬ ‫في هذا المجال‪.‬‬ ‫‪.4‬التحكّم – إس َمح للمستخدمين بتعديل إجراءاتهم على نظامك‪.‬‬ ‫‪2‬‬  ‫مبادئ التصميم‬ ‫القرب – قُم بتحديد أولويات معلوماتك وفقًا ألهمية وظائفها؛ قُم بإدارة عناصرك وتحديد‬ ‫‪.5‬‬ ‫موقعها بطريقة ذكية‪.‬‬ ‫األلفة ‪ -‬يجب أن يكون المستخدمون قادرين على تحديد الغرض من عناصرك من دون‬ ‫‪.6‬‬ ‫الحصول على التوجيه‪.‬‬ ‫إن الواجهات المعقّدة المشبعة بالعناصر تُن ِفر المستخدم‪.‬حافِظ على بساطة‬ ‫البساطة – ّ‬ ‫‪.7‬‬ ‫الوظائف ووضوحها!‬ ‫الجاذبية – تح َّل بالسحر والجذابية‪ ،‬واستخ ِدم األلوان الباردة والدافئة‬ ‫‪.8‬‬ ‫‪3‬‬  ‫رؤية شنايدرمان لتصميم واجهة المستخدم‬ ‫‪.1‬التماسك ‪ (-‬اإلتساق أو اإلنسجام )‪ -‬حافِظ على قابلية توقّع واجهتك؛ ينظر البشر إلى ما‬ ‫يتوقّعونه‪.‬‬ ‫يعتبر شرح كيفية اإلستخدام الواجهة لالشخاص الذين سوف يقومون بالتعامل مع التطبيق أمرا‬ ‫ضروريا ‪،‬هنا تبرز أهمية امتالك الواجهة لخاصية اإلتساق شرح االستخدام لمرة واحدة فقط‬ ‫لكونها تتكرر في أماكن عدة مما يسهل المستخدم التعلم في وقت قصير وجهد قليل‬ ‫‪.2‬االختصارات – خ ِفّف من الذاكرة واجعَل بعض الوظائف مؤتمنة وسريعة‪.‬هذا ما يظهر في‬ ‫ملفات تعريف االرتباط التي تحفظ المعلومات الشخصية في ك ّل حالة‪.‬‬ ‫وهذا أن تعمل الواجهة علي نفس النسق بمعني أن أي حدث معين يجب أن تكون له نفس النتيجة‬ ‫وبحيث يفهم المستخدم أن تكرارهذا الحدث ولكن مع عنصر آخر في الواجهة سيكون له نفس‬ ‫األثر ‪.‬‬ ‫فمثال عند النقر علي زر الموجود علي شريط العنوان في أية نافذة ‪ Windows‬يؤدي إلي‬ ‫إغالق التطبيق أو البرنامج وهذا مايجب أن يحدث عند النقر علي نفس الزر في نافذة أخري‬ ‫لتطبيق آخر ‪.‬‬ ‫‪4‬‬  ‫رؤية شنايدرمان لتصميم واجهة المستخدم‬ ‫‪.3‬الحوار – قُم بإبالغ المستخدم عن حالة التطبيق؛ وتُعتبر رسائل التحقّق من الص ّحة مثاالً جيّدًا‬ ‫في هذا المجال‪.‬‬ ‫إن الكتابة التي تظهر علي الشاشة تعتبر المصدر الرئيسى للمعلومات بالنسبة للمستخدم ‪،‬لذلك‬ ‫يجب ان تكون طريقة كتابة التسميات والرسائل التي توجه للمستخدم واضحة و مفهومة ‪،‬بدال من‬ ‫استخدام الرموز والجمل المبهمة ‪.‬‬ ‫‪.4‬التحكّم – إس َمح للمستخدمين بتعديل إجراءاتهم على نظامك‪.‬‬ ‫التنقل بين عناص الواجهة ‪:‬يجب أن يكون التنقل بين العناصر الرئيسية المكونة للواجهة سهال و‬ ‫واضحا إلن المستخدم سوف يشعر لالحباط إذا كان االنتقال من شاشة إلي اخري صعبا ‪.‬ومن‬ ‫ناحية أخري التنقل بين عناصر الواجهة المختلفة منسجما مع المهمات والوظائف التي يقوم‬ ‫المستخدم بإنجازها ‪.‬‬ ‫التنقل داخل الشاشة ‪ :‬المجتمعات تختلف ‪،‬في الغرب الكتابة تكون من اليسار إلي اليمين ‪،‬المجتمع‬ ‫العربي من اليمين إلي اليسار ‪،‬المجتمع الصيني يكتبون ويقرؤون من من األعلي إلي األسفل‬ ‫‪،‬التنقل داخل الشاشة يجب أن يكون بشكل متوافق مع ثقافة المستخدم وطريقته ‪.‬‬ ‫‪5‬‬  ‫رؤية شنايدرمان لتصميم واجهة المستخدم‬ ‫‪.5‬القرب – قُم بتحديد أولويات معلوماتك وفقًا ألهمية وظائفها؛ قُم بإدارة عناصرك وتحديد‬ ‫موقعها بطريقة ذكية‪.‬الفهم الصحيح لدور مكونات الواجهة ‪:‬استخدام كل مكون من مكونات‬ ‫الواجهة علي الوجه الصحيح وعلي النحو الذي يحقق الغرض من وجود هذا المكون‬ ‫‪.6‬األلفة ‪ -‬يجب أن يكون المستخدمون قادرين على تحديد الغرض من عناصرك من دون‬ ‫الحصول على التوجيه‪.‬‬ ‫إذا كان المستخدم ال يعرف كيف يستخدم التطبيق فالتصميم الجيد للواجهة يساعد المستخدم‬ ‫علي توقع أو تخمين ما يجب عليه فعله لتنفيذ شيئا ما ‪.‬‬ ‫إن الواجهات المعقّدة المشبعة بالعناصر تُن ِفر المستخدم‪.‬حا ِفظ على بساطة‬‫‪.7‬البساطة – ّ‬ ‫الوظائف ووضوحها!‬ ‫الكثافة اإلجمالية لشاشة من الصعب للمستخدم الفهم إذا كانت الشاشة مزدحمة بالرموز والتسميات‬ ‫والصور المختلفة ‪.‬‬ ‫‪6‬‬  ‫رؤية شنايدرمان لتصميم واجهة المستخدم‬ ‫‪.8‬الجاذبية – تح َّل بالسحر والجذابية‪ ،‬واستخ ِدم األلوان الباردة والدافئة‬ ‫تلعب األلوان دورا مهما في تصميم الواجهات سواءا من ناحية إضفاء مسحة جمالية أو من‬ ‫خالل توظيفها في إبراز بعض العناصر في الواجهة ‪.‬ومع ذلك يجب عدم اإلفراط في استعمال‬ ‫األلوان حتي ال يشعر المستخدم بالنفور‬ ‫‪7‬‬  ‫‪.1‬تجميع‬ ‫العناصرالمرتبطة‬ ‫معا‬ ‫‪.8‬استخدام‬ ‫‪.2‬المحافظة‬ ‫خطوط‬ ‫علي تناسق‬ ‫واضحة في‬ ‫الواجهة‬ ‫الواجهة‬ ‫أساسيات‬ ‫‪.7‬إضافة‬ ‫اشارات مرئية‬ ‫تصميم‬ ‫‪.3‬إنشاء‬ ‫تسلسل هرمي‬ ‫في الواجهة‬ ‫واجهة‬ ‫مرئي‬ ‫المستخدم‬ ‫‪.6‬المحافظة‬ ‫‪.4‬المحافظة‬ ‫علي التباين‬ ‫علي بساطة‬ ‫في الواجهة‬ ‫الواجهة‬ ‫‪.5‬استخدام‬ ‫األلوان بشكل‬ ‫هادف‬ ‫‪8‬‬  ‫تصميم واجهة المستخدم‬ ‫‪.1‬تجميع العناصرالمرتبطة معا‬ ‫يعد تجميع العناصر في واجهة المستخدم (‪) UI‬جانبًا أساسيًا من التصميم الذي يمكن أن يؤثر‬ ‫بشكل كبير على سهولة االستخدام وجماليات المنتج‪.‬إنها تقنية يمكنها‪ ،‬عند تنفيذها بشكل مدروس‪،‬‬ ‫توجيه المستخدمين من خالل تفاعل سلس وبديهي مع التطبيق أو موقع الويب‪.‬‬ ‫‪9‬‬  ‫تصميم واجهة المستخدم‬ ‫‪.2‬المحافظة علي تناسق الواجهة‬ ‫هو مبدأ تصميم يتعلق بتنظيم العناصر داخل الواجهة بطريقة تعزز من‬ ‫جمالية التصميم وقابلية االستخدام‪.‬إذا تم تنظيم العناصر بشكل جيد‪،‬‬ ‫يصبح من السهل على المستخدمين معالجة المعلومات والتفاعل مع‬ ‫الواجهة‪.‬‬ ‫‪.1‬تنسيق النصوص‪ :‬يجب تنسيق النصوص بالتوازي مع بعضها‬ ‫البعض لتحقيق التوازن والوضوح‪.‬‬ ‫‪.2‬العناصر البصرية‪ :‬يجب محاذاة الصور واأليقونات بطريقة تسهل‬ ‫القراءة والتفاعل‪.‬‬ ‫‪.3‬التموضع الفعّال‪ :‬استخدم التموضع لتوجيه انتباه المستخدم وتسهيل‬ ‫التنقل‪.‬‬ ‫‪.4‬التناسق‪ :‬محاذاة العناصر بشكل متناسق عبر جميع الصفحات يحقق‬ ‫التوازن ويعزز من تجربة المستخدم‪.‬‬ ‫‪10‬‬  ‫تصميم واجهة المستخدم‬ ‫‪.3‬إنشاء تسلسل هرمي مرئي‬ ‫تسلسل الهرمي ( ‪) Hierarchy‬يعتبر من األساسيات في تصميم واجهات المستخدم‪.‬يُستخدم‬ ‫لتنظيم المعلومات والعناصر بطريقة تسهل على المستخدم فهم األولويات والتنقل بسهولة في‬ ‫الواجهة‪.‬‬ ‫‪.1‬حجم العناصر‪ :‬استخدام الحجم لتوضيح أهمية عنصر معين‪ ،‬مثل جعل العناوين أكبر من النص‬ ‫العادي‪.‬‬ ‫‪.2‬اللون والتباين‪ :‬استخدام اللون والتباين لجذب االنتباه إلى عناصر مهمة‪.‬‬ ‫‪.3‬الموقع الفيزيائي‪ :‬وضع العناصر األكثر أهمية في مواقع تُر ِكز عليها العين بشكل طبيعي‪ ،‬مثل‬ ‫الزاوية العليا اليسرى‪.‬‬ ‫‪.4‬التجاوزات واإلشارات‪ :‬استخدام األيقونات والسهام لداللة المستخدم على الخطوات التالية‬ ‫‪11‬‬ ‫تصميم واجهة المستخدم‬ ‫‪.3‬إنشاء تسلسل هرمي مرئي‬ ‫‪12‬‬ ‫تصميم واجهة المستخدم‬ ‫‪.4‬المحافظة علي بساطة الواجهة‬ ‫يعد تبسيط واجهة المستخدم أمرا حيويا حتي يقوم‬ ‫المستخدمين بالتركيز علي المعلومات ذات الصلة فقط‬ ‫‪.‬يمكن أن تؤدي المعلومات واألساليب المرئية الغير‬ ‫ضرورية إلي تشتيت اإلنتباه ‪.‬‬ ‫‪.5‬استخدام األلوان بشكل هادف‬ ‫تلعب األلوان دورا مهما في تصميم الواجهات سواءا‬ ‫من ناحية إضفاء مسحة جمالية أو من خالل توظيفها‬ ‫في إبراز بعض العناصر في الواجهة ‪.‬ومع ذلك يجب‬ ‫عدم اإلفراط في استعمال األلوان حتي ال يشعر‬ ‫المستخدم بالنفور‪.‬‬ ‫‪13‬‬  ‫تصميم واجهة المستخدم‬ ‫‪.6‬المحافظة علي التباين في الواجهة‬ ‫التباين (‪)Contrast‬هو مبدأ يستخدم لتحقيق تأثير قوي في تصميم الواجهات‪.‬يعمل التباين‬ ‫على تمييز العناصر من بعضها البعض‪ ،‬ويمكن أن يكون على شكل تباين لوني‪ ،‬حجمي‪ ،‬أو‬ ‫شكلي‪.‬هذا المبدأ يساهم في جذب انتباه المستخدم وتوجيهه‬ ‫‪.1‬تباين األلوان‪ :‬استخدام ألوان متباينة للنص والخلفية لتعزيز القراءة‪.‬‬ ‫‪.2‬تباين الحجم‪ :‬استخدام أحجام مختلفة للنصوص لتوضيح األهمية النسبية للمحتوى‪.‬‬ ‫‪.3‬تباين الشكل‪ :‬استخدام أشكال متباينة لفصل العناصر وتوجيه االنتباه‪.‬‬ ‫‪.4‬التباين في التوضع‪ :‬استخدام التباين في التوضع لتحقيق تأثيرات مرئية متعددة األبعاد‪.‬‬ ‫‪14‬‬  ‫تصميم واجهة المستخدم‬ ‫‪.1‬تباين األلوان‪ :‬استخدام ألوان متباينة للنص والخلفية لتعزيز القراءة‪.‬‬ ‫‪.2‬تباين الحجم‪ :‬استخدام أحجام مختلفة للنصوص لتوضيح األهمية النسبية للمحتوى‪.‬‬ ‫‪15‬‬  ‫تصميم واجهة المستخدم‬ ‫‪.3‬تباين الشكل‪ :‬استخدام أشكال متباينة لفصل العناصر وتوجيه االنتباه‪.‬‬ ‫‪.4‬التباين في التوضع‪ :‬استخدام التباين في التوضع لتحقيق تأثيرات مرئية متعددة األبعاد‪.‬‬ ‫‪16‬‬  ‫تصميم واجهة المستخدم‬ ‫‪.7‬إضافة اشارات مرئية في الواجهة‬ ‫ال يجب اإلعتماد علي اللون وحده كمؤشر ‪،‬فهناك العديد من األنواع المختلفة لعمي األلوان‬ ‫(ال يستطيعوا التميز بين األحمر واألخضر ‪ ،‬والبعض العمي الكلي )‪.‬‬ ‫‪-‬استخدام خطوط واضحة في واجهة المستخدم ‪:‬‬ ‫للوضوح والبساطة‬ ‫‪17‬‬ ‫تصميم واجهة المستخدم‬ ‫‪.8‬استخدام خطوط واضحة في الواجهة‬ ‫‪18‬‬