[1]اساسيات تفاعل الانسان مع الحاسوب

Virtual University- Human Computer Interaction1 Imran Hussain | UMT
Human-Computer Interaction
‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬

Computer + Information
+

‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫تعريف‬
‫وتنفيذ‬ ‫ممم‬‫ي‬‫وتقي‬ ‫ممممميم‬‫بتص‬ ‫ممم‬‫ت‬‫يه‬ ‫الذي‬ ‫ممم‬‫ل‬‫الع‬ ‫مومم‬‫ه‬
‫مع‬ ‫شر‬ ‫الب‬ ‫ستخدمها‬ ‫لي‬ ‫ية‬ ‫التفاعل‬ ‫صاء‬ ‫الح‬ ‫مة‬ ‫أنظ‬
.‫بهم‬ ‫المحيطة‬ ‫والمعرفة‬ ‫العلوم‬ ‫اغلب‬ ‫دراسة‬
‫من‬ ‫سوب‬‫الحا‬ ‫مع‬ ‫سان‬‫الن‬ ‫عل‬‫لتفا‬ ‫واجهات‬ ‫ير‬‫تطو‬
‫يذ‬‫التنف‬ ‫لى‬‫إ‬ ‫صميم‬‫الت‬.‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫مبادئ‬
‫والعلوم‬ ‫النفس‬ ‫ممم‬‫ل‬‫ع‬ ‫ملمم‬‫تشم‬ ‫ميم‬‫ت‬‫وال‬ ‫ممب‬‫م‬‫مو‬‫الحاس‬
‫ا‬‫ل‬‫النسان‬ ‫سلوك‬ ‫هم‬ ‫ف‬ ‫في‬ ‫ساعد‬ ‫ت‬ ‫تي‬ ‫ال‬ ‫يه‬ ‫دراك‬
.‫و‬ ‫التفاعل‬ ‫نماذج‬ ‫عرض‬ ‫مةم‬‫ي‬‫التفاعل‬ ‫الشياء‬ ‫معمم‬‫م‬
.‫باستخدام‬ ‫مةم‬‫ي‬‫التفاعل‬ ‫مم‬‫م‬‫مم‬‫النظ‬ ‫ممممميم‬‫تص‬ ‫ملممم‬‫التواص‬
.‫النظام‬ ‫واجهات‬ ‫تصميم‬ ‫مدم‬‫ن‬‫ع‬ ‫كمحور‬ ‫ستخدم‬ ‫الم‬

‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫تعريف‬
•‫من‬ ‫سوب‬‫الحا‬ ‫مع‬ ‫سان‬‫الن‬ ‫عل‬‫لتفا‬ ‫واجهات‬ ‫ير‬‫تطو‬
‫يذ‬‫التنف‬ ‫لى‬‫إ‬ ‫صميم‬‫الت‬.‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫مبادئ‬
‫والعلوم‬ ‫النفس‬ ‫ممم‬‫ل‬‫ع‬ ‫ملمم‬‫تشم‬ ‫ميم‬‫ت‬‫وال‬ ‫ممب‬‫م‬‫مو‬‫الحاس‬
‫ا‬‫ل‬‫النسان‬ ‫سلوك‬ ‫هم‬ ‫ف‬ ‫في‬ ‫ساعد‬ ‫ت‬ ‫تي‬ ‫ال‬ ‫يه‬ ‫دراك‬
.‫و‬ ‫التفاعل‬ ‫نماذج‬ ‫عرض‬ ‫مةم‬‫ي‬‫التفاعل‬ ‫الشياء‬ ‫معمم‬‫م‬
.‫باستخدام‬ ‫مةم‬‫ي‬‫التفاعل‬ ‫مم‬‫م‬‫مم‬‫النظ‬ ‫ممممميم‬‫تص‬ ‫ملممم‬‫التواص‬
.‫النظام‬ ‫واجهات‬ ‫تصميم‬ ‫مدم‬‫ن‬‫ع‬ ‫كمحور‬ ‫ستخدم‬ ‫الم‬
.‫التقييم‬ ‫وأساليب‬ ‫التنفيذ‬ ‫دعم‬ ‫في‬ ‫مقدمة‬
•

 (Human)
– the end-user
– the others in the organization
 Computer
– hardware
– Software
 Interaction
– user “tells” the computer what is he wants
– computer communicates results

‫النسان‬
-‫النهائي‬ ‫المستخدم‬
-‫المنظمات‬ ‫في‬ ‫ألخري‬ ‫الشياء‬
‫الحاسوب‬
-‫المادي‬ ‫الكيان‬
-‫البرمجة‬
‫التفاعل‬
” ” -‫يريد‬ ‫هو‬ ‫مادا‬ ‫الحاسوب‬ ‫يأمر‬ ‫المستخدم‬
-‫للمستخدم‬ ‫المحصلة‬ ‫يعطي‬ ‫الحاسوب‬

Human
‫النسان‬
Computer
‫الحاسوب‬
Interaction
‫تفاعل‬

The goals of HCI
 To develop or improve the :
• Safety (design of safety-critical systems)
• Utility (the functionality of a system)
• Effectiveness
• Efficiency
• Usability (making systemseasy to learn and easy to use)

‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫أهداف‬
: ‫وتحسين‬ ‫لتطوير‬
-‫النظام‬ ‫امن‬
-‫النظام‬ ‫وظائف‬ ‫في‬ ‫المتمثلة‬ ‫والمنفعة‬ ‫الفائدة‬
-‫الستخدام‬ ‫فاعلية‬
-‫بالزمن‬ ‫المقترنة‬ ‫الفاعلية‬
-‫التعلم‬ ‫سهولة‬ ‫في‬ ‫المتمثلة‬ ‫ألستخداميه‬
‫والستخدام‬

Practical presses of HCI
 Design,
 Implementation
 Evaluation of user interfaces

‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫لتفاعل‬ ‫العملية‬ ‫العمليات‬
‫التصميم‬
‫التنفيذ‬
‫النظام‬ ‫مع‬ ‫المستخدم‬ ‫تفاعل‬ ‫تقييم‬

Practical presses of
HCI

Practical Goals of HCI
 Develop usable products
 Involve users in the design/evaluation process
 Practice throughout out software life cycle

‫مع‬ ‫النسان‬ ‫لتفاعل‬ ‫العملية‬ ‫الهداف‬
‫المنتجات‬ ‫استخدام‬ ‫تطوير‬
‫والتقييم‬ ‫التصميم‬ ‫عمليات‬ ‫في‬ ‫المستخدمين‬ ‫اشراك‬
‫البرنامج‬ ‫حياة‬ ‫دورة‬ ‫خارج‬ ‫مكان‬ ‫كل‬ ‫في‬ ‫التدريب‬

Why Study HCI?
 Usability of design is often an afterthought, something
to be added at the end
 Management doesn’t understand how good designs are
created
 A good UI is not an inspiration but the result of a
process (and lots of hard work)
Following UI level guideline is not enough

‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫دراسة‬ ‫سبب‬
,‫إضافة‬ ‫بعد‬ ‫ما‬ ‫في‬ ‫تخطر‬ ‫ما‬ ‫غالبا‬ ‫للتصميم‬ ‫ألستخداميه‬
‫النظام‬ ‫من‬ ‫النهاية‬ ‫عند‬ ‫إزالة‬ ‫أو‬
‫للنظام‬ ‫ل‬ ‫أو‬ ‫جيد‬ ‫التصميم‬ ‫إن‬ ‫لكيفية‬ ‫لتفهم‬ ‫الدارة‬
‫المنشئ‬
‫الفكار‬ ‫علي‬ ‫مبنية‬ ‫ليست‬ ‫الجيدة‬ ‫المستخدم‬ ‫شاشات‬
‫الكيانات‬ ‫من‬ ‫والعديد‬ ‫عمليات‬ ‫محصلة‬ ‫علي‬ ‫بل‬ ‫الموحاة‬
‫الفيزيائية‬
‫كافي‬ ‫غير‬ ‫المستخدم‬ ‫لشاشة‬ ‫التوجيهات‬ ‫مستوي‬

Why Study HCI (cont.)
Most programmers believe they are UI experts
Most programmers think users are just like themselves
Knowing how to use a UI development tool, doesn’t mean
you can make a usable interface
Good design means profit/efficiency
Makes YOU more employable/marketable

‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫دراسة‬ ‫سبب‬
.....‫الحاسوب‬
‫رسم‬ ‫لكيفية‬ ‫خبراء‬ ‫بأنهم‬ ‫يؤمنون‬ ‫المبرمجين‬ ‫معظم‬
‫المستخدمين‬ ‫شاشات‬
‫مثلهم‬ ‫المستخدمين‬ ‫بان‬ ‫يعتقدون‬ ‫المبرمجين‬ ‫معظم‬
‫الشاشات‬ ‫رسم‬ ‫تطوير‬ ‫لمعدات‬ ‫استخدام‬ ‫كيفية‬ ‫معرفة‬
‫ذات‬ ‫الشاشات‬ ‫جعل‬ ‫تستطيع‬ ‫انك‬ ‫معناه‬ ‫ليس‬
‫استخداميه‬
‫وفاعلية‬ ‫ومكاسب‬ ‫فائدة‬ ‫يعني‬ ‫الجيد‬ ‫التصميم‬
‫والوظائف‬ ‫علي‬ ‫الحصول‬ ‫علي‬ ‫قدرة‬ ‫اكتر‬ ‫تجعلك‬
‫والتسويق‬

What do HCI professionals do?
 interaction designers - people involved in the design of all
the interactive aspects of a product
 usability engineers - people who focus on evaluating
products, using usability methods and principles
 web designers - people who develop and create the visual
design of websites, such as layouts
 information architects - people who come up with ideas of
how to plan and structure interactive products
 user experience designers - people who do all the above but
who may also carry out field studies to inform the design of
products

‫تفاعل‬ ‫في‬ ‫المحترفين‬ ‫بها‬ ‫يقوم‬ ‫التي‬ ‫المهام‬
‫الحاسوب‬ ‫مع‬ ‫النسان‬
‫التفاعل‬ ‫مصممي‬:‫لكل‬ ‫التصميم‬ ‫في‬ ‫المختصة‬ ‫الشخاص‬
‫للمنتجات‬ ‫التفاعلية‬ ‫الوجهات‬
‫ألستخداميه‬ ‫مهندسي‬:‫تقييم‬ ‫علي‬ ‫تركز‬ ‫التي‬ ‫الشخاص‬
,‫ألستخداميه‬ ‫وطرق‬ ‫مبادئ‬ ‫باستخدام‬ ‫المنتجات‬
: ‫النترنت‬ ‫مواقع‬ ‫مصممي‬‫في‬ ‫المختصة‬ ‫الشخاص‬
‫مثل‬ ‫النترنت‬ ‫لموقع‬ ‫المرئية‬ ‫التصاميم‬ ‫وإنشاء‬ ‫تطوير‬
‫المخططات‬
: ‫المعلومات‬ ‫مخططي‬‫استخلص‬ ‫في‬ ‫المختصة‬ ‫الشخاص‬
‫التفاعلية‬ ‫المنتجات‬ ‫وبناء‬ ‫تخطيط‬ ‫لكيفية‬ ‫الفكار‬
: ‫المستخدمين‬ ‫خبرة‬ ‫مصممي‬‫يقومون‬ ‫الدين‬ ‫الشخاص‬
‫الدراسة‬ ‫مجال‬ ‫استخلص‬ ‫بإمكانهم‬ ‫كذلك‬ ‫سبق‬ ‫ما‬ ‫بكل‬
‫للمنتجات‬ ‫التصميم‬ ‫لتعلم‬

Importance of HCI
• In order to achieve efficient, effective and safe products/systems:
– Productivity
(introducing technology that does not support the work may
cause reduced productivity)
– Safety
(crashed air planes and nuclear power plant disasters have led to
an understanding why HCI is important!)
Computers should be designed for the needs and capabilities of the
people for whom they are intended!

‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫أهمية‬
: ‫وتحسين‬ ‫لتطوير‬
-‫النظام‬ ‫امن‬
-‫النظام‬ ‫وظائف‬ ‫في‬ ‫المتمثلة‬ ‫والمنفعة‬ ‫الفائدة‬
-‫الستخدام‬ ‫فاعلية‬
-‫بالزمن‬ ‫المقترنة‬ ‫الفاعلية‬
-‫والستخدام‬ ‫التعلم‬ ‫سهولة‬ ‫في‬ ‫المتمثلة‬ ‫ألستخداميه‬
: ‫إلي‬ ‫بالضافة‬
-‫النتاجية‬
-‫المان‬

‫مع‬ ‫النسان‬ ‫بتفاعل‬ ‫المتعلقة‬ ‫العلوم‬ ‫توزيع‬
Artificial intelligence ‫الذكية‬ ‫الصناعات‬
Information System‫المعومات‬ ‫أنظمة‬
Ergonomics‫التفاعلية‬ ‫الواجهات‬ ‫مواءمة‬
Languages ‫اللغات‬
Interaction HardWare‫المادية‬ ‫الكيانات‬ ‫تفاعل‬
Computer Science ‫الحاسوب‬ ‫علوم‬
Psychology ‫النفس‬ ‫علم‬
Cognitive‫الدراك‬
Social‫الجتماعية‬ ‫العلوم‬
Organizational‫التوثيق‬

‫ألستخداميه‬
‫الستخدام‬ ‫علي‬ ‫القدرة‬
Usability

Usability Definitions
 ISO
 The effectiveness, efficiency, and satisfaction with which specified
users achieve specified goals in particular environments
 Preece et al
 A measure of the ease with which a system can be
learned or used, its safety, effectiveness and
efficiency and the attitude of its users towards it

‫ألستخداميه‬ ‫تعريف‬
•‫للمراد‬ ‫والتحقيق‬ ‫بالزمن‬ ‫المقترنة‬ ‫والفاعلية‬ ‫ألستخداميه‬ ‫الفاعلية‬
‫بيئات‬ ‫في‬ ‫محددة‬ ‫أهداف‬ ‫لتحقيق‬ ‫محددين‬ ‫لمستخدمين‬ ‫والهدف‬
.‫خاصة‬
•‫و‬ ‫والمن‬ ‫التعلم‬ ‫و‬ ‫الستخدام‬ ‫علي‬ ‫القدرة‬ ‫ناحية‬ ‫من‬ ‫للسهولة‬ ‫قياس‬
‫المرجوة‬ ‫الهداف‬ ‫إلي‬ ‫والوصول‬ ‫الزمنية‬ ‫والفاعلية‬ ‫الستخدام‬ ‫فاعلية‬
.‫ومستخدميه‬ ‫للنظام‬

Usability principles
• Similar to design principles, except more prescriptive
• Used mainly as the basis for evaluating systems
• Provide a framework for heuristic evaluation

‫ألستخداميه‬ ‫أساسيات‬
•. ‫إرشادا‬ ‫و‬ ‫تقدما‬ ‫اكتر‬ ‫انه‬ ‫ماعدا‬ ‫التصميم‬ ‫لساسيات‬ ‫مشابه‬
•. ‫النظام‬ ‫تقييم‬ ‫لقواعد‬ ‫أساسي‬ ‫مستخدم‬
•.‫التقييم‬ ‫لتوجيه‬ ‫نطاق‬ ‫يولد‬

Usability goals
Effective to use (produce desired effect)
Have good utility (be useful)
Efficient to use
Easy to learn
Easy to remember how to use
Safe to use
Satisfying to use

‫ألستخداميه‬ ‫أهداف‬
‫الستخدام‬ ‫فاعلية‬
‫جيدة‬ ‫منفعة‬ ‫يمتلك‬
‫بالزمن‬ ‫المقترنة‬ ‫الستخدام‬ ‫فاعلية‬
‫التعلم‬ ‫سهل‬
‫الستخدام‬ ‫لكيفية‬ ‫التذكر‬ ‫سهل‬
‫الستخدام‬ ‫امن‬
‫الستخدام‬ ‫تحقيق‬

Usability and user experience
Goals
• How do usability goals differ from user experience
goals?
• Are there trade-offs between the two kinds of goals?
– e.g. can a product be both fun and safe?
• How easy is it to measure usability versus user
experience goals?

‫للستخداميه‬ ‫بالنسبة‬ ‫المستخدم‬ ‫خبرة‬ ‫أهداف‬
•.‫المستخدم‬ ‫خبرة‬ ‫أهداف‬ ‫و‬ ‫الستخداميه‬ ‫أهداف‬ ‫اختلف‬ ‫كيفية‬
•.‫الهداف‬ ‫من‬ ‫لنوعين‬ ‫بين‬ ‫تناوب‬ ‫هناك‬ ‫هل‬
•.‫المستخدم‬ ‫خبرة‬ ‫وأهداف‬ ‫للستخداميه‬ ‫القياس‬ ‫سهوله‬ ‫هي‬ ‫كيف‬

‫التصميم‬ ‫مع‬ ‫التفاعل‬
Interaction Design
( ID )

What is interaction design?
 Designing interactive products to support
people in their everyday and working lives
 The design of spaces for human
communication and interaction

‫التصميم‬ ‫مع‬ ‫التفاعل‬ ‫هو‬ ‫ما‬
‫أيامهم‬ ‫كل‬ ‫في‬ ‫الناس‬ ‫لدعم‬ ‫التفاعلية‬ ‫المنتجات‬ ‫تصميم‬
‫أعمالهم‬ ‫وحياة‬
‫والتفاعل‬ ‫الناس‬ ‫لتواصل‬ ‫للفضاءات‬ ‫التصميم‬

Goals of interaction design
• Develop usable products
–Usability means easy to learn , effective to use and
provide an enjoyable experience
• Involve users in the design process

‫التصميم‬ ‫مع‬ ‫التفاعل‬ ‫أهداف‬
‫للمنتجات‬ ‫الستخدام‬ ‫علي‬ ‫القدرة‬ ‫تطوير‬
‫التصميم‬ ‫عمليات‬ ‫في‬ ‫المستخدمين‬ ‫إشراك‬

From HCI to Interaction Design
• Human-computer interaction (HCI) is:
“concerned with the design, evaluation and
implementation of interactive computing systems for
human use and with the study of major phenomena
surrounding them” (ACM SIGCHI, 1992, p.6)
• Interaction design (ID) is:
“the design of spaces for human communication and
interaction”
• Increasingly, more application areas, more technologies
and more issues to consider when designing ‘interfaces’

‫مع‬ ‫التفاعل‬ ‫إلي‬ ‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬ ‫من‬
‫التصميم‬
•‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬) :HCI(
‫التفاعلية‬ ‫الحساب‬ ‫أنظمة‬ ‫مع‬ ‫والتنفيذ‬ ‫والتقييم‬ ‫بالتصميم‬ ‫المهتم‬ ‫هو‬
‫البشر‬ ‫لستخدام‬.‫بهم‬ ‫المحيطة‬ ‫الشياء‬ ‫ودراسة‬
•‫التصميم‬ ‫مع‬ ‫التفاعل‬):ID(
.‫والتفاعل‬ ‫البشر‬ ‫لتصال‬ ‫لفضاءات‬ ‫التصميم‬
•‫دلك‬ ‫إلي‬ ‫بالضافة‬, ,‫عند‬ ‫معتبرة‬ ‫اكتر‬ ‫وتقنيات‬ ‫قضايا‬ ‫اكتر‬ ‫تطبيقات‬ ‫ساحة‬
.‫الشاشات‬ ‫تصميم‬

Relationship between ID, HCI
and other fields
‫الخري‬ ‫والمجالت‬ID , HCI ‫بين‬ ‫العلقة‬
• Academic disciplines contributing to ID:
‫التصميم‬ ‫مع‬ ‫للتفاعل‬ ‫الكاديمية‬ ‫الفروع‬ ‫توزيع‬
– Psychology (‫النفس‬ ‫)علم‬
–Social Sciences (‫اجتماعية‬ ‫)علوم‬
–Computing Sciences(‫المحاسبة‬ ‫علوم‬)
– Engineering (‫)الهندسة‬
– Ergonomics (‫التفاعلية‬ ‫الواجهات‬ ‫مواءمة‬)
–Informatics (‫)الثقافة‬

and other fields
‫ألخري‬ ‫والمجالت‬ID , HCI ‫بين‬ ‫العلقة‬
• Design practices contributing to ID:
ID ‫مع‬ ‫العملية‬ ‫التصميمات‬ ‫توزيع‬
– Graphic design ‫الرسومات‬ ‫تصميم‬
– Product design ‫المنتجات‬ ‫تصميم‬
– Artist-design ‫الفني‬ ‫تصميم‬
– Industrial design ‫الصناعات‬ ‫تصميم‬
– Film industry ‫الفلم‬ ‫صناعة‬

and other fields
‫ألخري‬ ‫والمجالت‬ ID , HCI ‫بين‬ ‫العلقة‬
• Interdisciplinary fields that ‘do’
interaction design:
‫التفاعلية‬ ‫التصاميم‬ ‫تعمل‬ ‫التي‬ ‫الفروع‬ ‫مجالت‬
– HCI ‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫تفاعل‬
– Human Factors ‫البشرية‬ ‫العوامل‬
– Cognitive Engineering‫الدراكية‬ ‫الهندسة‬
– Cognitive Ergonomics ‫الدراكية‬ ‫التفاعلية‬ ‫الوجهات‬ ‫مواءمة‬
– Computer Supported Co-operative Work
‫للحاسوب‬ ‫داعم‬ ‫مساعد‬ ‫مشغل‬ ‫عمل‬
– Information Systems ‫المعلوماتية‬ ‫النظمة‬

‫بين‬ ‫التفاعل‬ ‫وتقنيات‬ ‫طرق‬
‫والحاسوب‬ ‫النسان‬

. ‫السهل‬ ‫بالشئ‬ ‫ليس‬ ‫تعتبر‬ ‫الحاسوب‬ ‫نظم‬ ‫تصميم‬
.‫معقدة‬ ‫الحاسوب‬ ‫نظم‬
‫معلومات‬ ‫مصادر‬ ‫مع‬ ‫التعامل‬ ‫تصميمها‬ ‫عند‬ ‫يجب‬
.‫عديدة‬ ‫وتقنيات‬ ‫وأدوات‬ ‫مختلفة‬
.‫وخبرة‬ ‫مهارات‬ ‫التصميم‬ ‫طريقة‬ ‫تتطلب‬
‫طبيعتها‬ ‫في‬ ‫وتختلف‬ ‫للتصميم‬ ‫طرق‬ ‫عدة‬ ‫هناك‬
.‫تنفيذها‬ ‫وكيفية‬

‫التصميم‬ ‫تعريف‬
‫نظام‬ ‫تعريف‬ ‫في‬ ‫تقنية‬ ‫ومعلومات‬ ‫علمية‬ ‫أسس‬ ‫استخدام‬
‫تكلفة‬ ‫بأقل‬ ‫ذلك‬ ‫يتم‬ ‫ان‬ ‫علي‬ ‫مسبقا‬ ‫معرفة‬ ‫أنشطة‬ ‫لتنفيذ‬
‫التصميم‬ ‫أساسيات‬ ‫كفاءة‬ ‫باعلي‬ ‫و‬
‫الول‬ ‫النشاط‬‫علي‬ ‫نظرة‬ ‫بإلقاء‬ ‫وذلك‬ ‫المتطلبات‬ ‫فهم‬
‫المستخدمين‬ ‫مع‬ ‫الحتياجات‬ ‫ومناقشة‬ ‫المشابهة‬ ‫المنتجات‬
.‫التصميم‬ ‫في‬ ‫المشاكل‬ ‫لكتشاف‬ ‫موجود‬ ‫نظام‬ ‫أي‬ ‫وتحليل‬
‫الثاني‬ ‫النشاط‬‫أشكال‬ ‫عدة‬ ‫بإنتاج‬ ‫وذلك‬ ‫المنتج‬ ‫تطوير‬
.‫النهائي‬ ‫الشكل‬ ‫إلي‬ ‫الوصول‬ ‫حتى‬

How to design
Need to take into account:
Who the users are
What activities are being carried out
Where the interaction is taking place
Example:
compare the differences between a cell phone and a
public pay phone
how do these differences manifest themselves in the
design and use of phones?

‫التصميم‬ ‫كيفية‬
:‫بالعتبار‬ ‫الخذ‬ ‫يجب‬
‫المستخدمين‬ ‫هم‬ ‫من‬
‫المستخلصة‬ ‫النشاطات‬ ‫هي‬ ‫ما‬
‫التفاعل‬ ‫يأخذه‬ ‫الذي‬ ‫المكان‬ ‫أين‬

‫تصميم‬HCI‫المستخدم‬ ‫علي‬ ‫مرتكز‬ ‫يكون‬ ‫ان‬ ‫يجب‬
.‫ومتطلباته‬
‫من‬ ‫والخبرات‬ ‫المعارف‬ ‫بين‬ ‫تكامل‬ ‫عملية‬ ‫التصميم‬ ‫يكون‬
.‫التفاعل‬ ‫في‬ ‫تساهم‬ ‫التي‬ ‫المختلفة‬ ‫المناهج‬
‫التصميم‬ ‫يوافق‬ ‫بحيث‬ ‫تكرارية‬ ‫عملية‬ ‫علي‬ ‫مبني‬ ‫يكون‬
.‫المستخدم‬ ‫احتياجات‬
‫المستخدم‬ ‫علي‬ ‫المرتكز‬ ‫التصميم‬ ‫من‬ ‫الهدف‬
‫المستخدمين‬ ‫بواسطة‬ ‫والستخدام‬ ‫التعلم‬ ‫سهلة‬ ‫نظم‬ ‫إنتاج‬
.‫المعنيين‬
‫علي‬ ‫المرتكز‬ ‫التصميم‬
‫المستخدم‬

User-Centered Design
Find out
• who users are
• what their goals are
• what tasks they need to perform
Task Analysis
• Characterize what steps users need to take to achieve their goal
• Create scenarios of actual use
• Decide which users and tasks to support
Design based on this
Evaluate the design
•Test interface (with users, usability experts)
•Do this before implementation

‫المستخدم‬ ‫علي‬ ‫المرتكز‬ ‫التصميم‬
‫المستخدم‬ ‫من‬ ‫التية‬ ‫المعلومات‬ ‫استخلص‬
‫المستخدم‬ ‫يكون‬ ‫من‬
‫المستخدم‬ ‫أهداف‬ ‫هي‬ ‫ما‬
‫تحقيقها‬ ‫يحتاجون‬ ‫التي‬ ‫المهام‬ ‫هي‬ ‫ما‬
‫المهام‬ ‫تحليل‬
‫أهدافه‬ ‫لتحقيق‬ ‫المستخدم‬ ‫يحتاجها‬ ‫التي‬ ‫الخطوات‬ ‫هي‬ ‫ما‬ ‫تحديد‬
‫الحقيقي‬ ‫للمستخدم‬ ‫سيناريوهات‬ ‫إنشاء‬
‫لدعمها‬ ‫والهداف‬ ‫المستخدمين‬ ‫من‬ ‫أي‬ ‫قرر‬

HCI Design Process
‫الحاسوب‬ ‫مع‬ ‫النسان‬ ‫لتفاعل‬ ‫التصميم‬ ‫عمليات‬
‫المستخدم‬ ‫علي‬ ‫المرتكزة‬

Users’ needs
understand what people are good and bad at
easier to recall than remember (menus vs. command
line)
understand how they currently do things and then
make it better,
e.g., how do people read hardcopy magazines and how
would you make it better in softcopy?

‫المستخدم‬ ‫احتياجات‬
‫جيدون‬ ‫غير‬ ‫او‬ ‫جيدون‬ ‫هم‬ ‫فيما‬ ‫الناس‬ ‫فهم‬
)‫و‬ ‫القوائم‬ ‫التذكر‬ ‫من‬ ‫أسهل‬ ‫الستخدام‬ ‫إعادة‬
( ‫الوامر‬ ‫خط‬
‫وبدلك‬ ‫حاليا‬ ‫للشياء‬ ‫الناس‬ ‫عمل‬ ‫كيفية‬ ‫فهم‬
‫أفضل‬ ‫جعلها‬

User experience goals
 Satisfying
 Fun
 Enjoyable
 Entertaining
 Helpful
 Motivating
 Aesthetically pleasing
 Rewarding
 support creativity
 emotionally fulfilling

‫المستخدم‬ ‫خبرة‬ ‫أهداف‬
( )‫التحقيق‬ ‫الهداف‬ ‫تحقيق‬ ‫علي‬ ‫القدرة‬
‫مزاجي‬
‫الستمتاع‬
‫يسلي‬
‫المساعدة‬ ‫علي‬ ‫القدرة‬ ‫له‬
‫محفز‬
‫وجمالي‬ ‫فني‬
‫يكافئ‬
‫النشاء‬ ‫يدعم‬
‫والنفعالية‬ ‫العاطفية‬ ‫ينفد‬

Design Principles
‫التصميم‬ ‫مبادئ‬

Top level principles
 Three top level principles
Learnability, effectiveness and accommodation
Twelve main principles categorized in the three top level categories
Systems should be
 Learnable. Principles 1–4 are concerned with access, ease of learning
and remembering
 Effective. Principles 5–7 are concerned with ease of use and 8–9 are
concerned with safety
 Accommodating. Principles 10–12 are concerned with accommodating
differences between people and respecting those
differences

‫العلى‬ ‫المستوي‬ ‫مبادئ‬
‫الثلثة‬ ‫العلى‬ ‫المستوي‬ ‫مبادئ‬
‫التعلم‬ ‫سهولة‬,‫الفاعلية‬,‫الختلف‬ ‫مع‬ ‫متوافق‬
12‫الثلثة‬ ‫العلى‬ ‫المستوي‬ ‫لمبادئ‬ ‫مسجل‬ ‫أساسي‬ ‫مبدءا‬
‫يكون‬ ‫أن‬ ‫يجب‬ ‫النظام‬
: ‫التعلم‬ ‫سهولة‬‫ال‬‫من‬ ‫مبادئ‬1-4‫الوصول‬ ‫بكيفية‬ ‫مهتمة‬
‫والتذكر‬ ‫التعلم‬ ‫وسهولة‬
‫الفاعلية‬:‫ال‬‫من‬ ‫مبادئ‬5-7‫من‬ ‫و‬ ‫الستخدام‬ ‫بسهولة‬ ‫مهتمة‬
8-9‫بالمان‬ ‫مهتمة‬
: ‫الختلف‬ ‫مع‬ ‫متوافق‬‫ال‬‫من‬ ‫مبادئ‬10-12‫بالختلف‬ ‫مهتمة‬
‫الختلف‬ ‫دلك‬ ‫واحترام‬ ‫الشخاص‬ ‫بين‬

Twelve Principles for good
human-centred design
1. Visibility
2. Consistency
3. Familiarity
4. Affordance
5. Navigation
6. Control
7. Feedback
8. Recovery
9. Constraints
10. Flexibility
11. Style
12. Conviviality

‫المبادئ‬12‫المستخدم‬ ‫علي‬ ‫مرتكز‬ ‫لتصميم‬
‫الجيدة‬
1.‫الجيد‬ ‫الوضوح‬
2.‫المحتواة‬
3.‫العتيادية‬
4.‫التحمل‬ ‫علي‬ ‫القدرة‬
5.‫النتقال‬ ‫سهولة‬
6.‫التحكم‬ ‫قدرة‬
7.‫بسهولة‬ ‫الرجوع‬ ‫إمكانية‬
8.‫بسهولة‬ ‫الستعادة‬ ‫علي‬ ‫القدرة‬
9.‫القيود‬
10.‫المرونة‬
11.‫الجيد‬ ‫التخطيط‬
12.‫الجتذاب‬ ‫علي‬ ‫القدرة‬

Top level principle of Learnability
consists of
‫المحتواة‬ ‫تعلم‬ ‫لقدرة‬ ‫الساسية‬ ‫المبادئ‬
 Principle 1 ‫الجيد‬ ‫الوضوح‬ Visibility
 Principle 2 ‫المحتواة‬ Consistency
 Principle 3 ‫العتيادية‬ Familiarity
 Principle 4 ‫التحمل‬ ‫علي‬ ‫القدرة‬ Affordance

Principle 1 – Visibility
 Try to ensure that things are visible so that people
can see what functions are available and what the
system is currently doing.
 This is an important part of the psychological
principle that it is easier to recognize things than
to have to recall them.
 If it is not possible to make it visible, make it
observable.
 Consider making things ‘visible’ through the use of
sound and touch.

‫مبدءا‬1-‫الوضوح‬
‫فان‬ ‫وبالتالي‬ ‫واضحة‬ ‫الشياء‬ ‫تلك‬ ‫أن‬ ‫من‬ ‫تتأكد‬ ‫أن‬ ‫حاول‬
‫مادا‬ ‫و‬ ‫المتاحة‬ ‫الوظائف‬ ‫هي‬ ‫ما‬ ‫رؤية‬ ‫يمكنها‬ ‫الناس‬
‫حاليا‬ ‫النظام‬ ‫يعمل‬
‫من‬ ‫لها‬ ‫يكون‬ ‫التي‬ ‫النفس‬ ‫علم‬ ‫لمبدءا‬ ‫مهم‬ ‫جزء‬ ‫هدا‬
‫بهم‬ ‫التصال‬ ‫إعادة‬ ‫من‬ ‫الشياء‬ ‫تسجيل‬ ‫السهل‬
‫مراقبة‬ ‫اجعلها‬ ‫واضحة‬ ‫جعلها‬ ‫السهل‬ ‫من‬ ‫ليس‬ ‫كان‬ ‫ادا‬

Principle 2 – Consistency
‫مبدءا‬2-‫المحتواة‬
‫التصميم‬ ‫في‬ ‫المساعدة‬ ‫النشاطات‬ ‫جميع‬ ‫علي‬ ‫احتواء‬ ‫مكتبة‬ ‫إنشاء‬ ‫عملية‬ ‫هي‬
.‫النظام‬ ‫لستخدام‬ ‫والمساعدة‬ ‫التصميم‬ ‫لكيفه‬ ‫معلومات‬ ‫إلي‬ ‫بالضافة‬
•.‫التصميم‬ ‫لخصائص‬ ‫الستخدام‬ ‫محتواة‬
•‫والخرائط‬ ‫النماذج‬ ‫علي‬ ‫الحفاظ‬ ‫و‬ ‫محتوي‬ ‫تأكيد‬ ‫عبارة‬ ‫هو‬ ‫الفتراضي‬ ‫المحتواة‬
.‫للنظام‬ ‫التصميمية‬
•‫واللوان‬ ‫التصرف‬ ‫محتوى‬ ‫علي‬ ‫التأكيد‬ ‫عن‬ ‫عبارة‬ ‫هو‬ ‫الفيزيائي‬ ‫المحتواة‬
.‫والشاشات‬ ‫والسماء‬

Principle 3 – Familiarity
 Use language and symbols that the intended
audience will be familiar with.
 Where this is not possible because the concepts
are quite different from those people know
about, provide a suitable metaphor to help them
transfer similar and related knowledge from a
more familiar domain.
 e.g. recycle bin = delete?

‫مبدءا‬3-‫العتيادية‬
‫عند‬ ‫عليها‬ ‫المتعارف‬ ‫والرموز‬ ‫اللغة‬ ‫استخدم‬
‫اعتيادية‬ ‫تكون‬ ‫سوف‬ ‫وبدالك‬ ‫الجمهور‬
‫المفاهيم‬ ‫لن‬ ‫ممكن‬ ‫غير‬ ‫دلك‬ ‫يكون‬ ‫عندما‬
,‫بتزويدهم‬ ‫قم‬ ‫الناس‬ ‫لؤلئك‬ ‫قليل‬ ‫مختلفة‬
‫لهم‬ ‫مناسبة‬ ‫نصية‬ ‫بكتابة‬

Principle 4 – Affordance
 Design things so it is clear what they are for;
 for example make buttons look like buttons so people will press them.
 Make a slot for inserting a credit card look like a credit card slot!
 Affordance refers to the properties that things have (or are
perceived to have) and how these relate to how the things
could be used.
 Buttons afford pressing, chairs afford sitting on and post-it
notes afford writing a message on and sticking next to
something else.
 Affordances are culturally determined.

‫مبدءا‬4-‫التحمل‬ ‫علي‬ ‫القدرة‬
‫عملها‬ ‫يعرف‬ ‫وبدلك‬ ‫بوضوح‬ ‫الشياء‬ ‫صمم‬
‫الشياء‬ ‫تلك‬ ‫خصائص‬ ‫إلي‬ ‫تشير‬ ‫التحمل‬ ‫علي‬ ‫القدرة‬
‫استخدامها‬ ‫وإمكانية‬ ‫البعض‬ ‫بعضها‬ ‫مع‬ ‫علقتها‬ ‫وبالتالي‬
,‫كتابة‬ ‫تتحمل‬ ‫الملحظات‬ ‫الضغط‬ ‫تتحمل‬ ‫اليقونات‬
‫الرسائل‬
‫الشياء‬ ‫إيجاد‬ ‫ثقافة‬ ‫تعني‬ ‫التحمل‬ ‫علي‬ ‫القدرة‬

Top - level principle of Effectiveness
‫للفاعلية‬ ‫الساسية‬ ‫المبادئ‬
 ‫الستخدام‬ ‫سهولة‬Ease of Use which consists of
Principle 5 – ‫النتقال‬ ‫سهولة‬ Navigation
Principle 6 - ‫التحكم‬ Control
Principle 7 – ‫الرجاع‬ ‫قدرة‬ Feedback
 ‫والمن‬ ‫المان‬ Safe and Secure which consists of
Principle 8 – ‫الستعادة‬ ‫قدرة‬ Recovery
Principle 9 - ‫التعقيد‬ Constraints

Principle 5 – Navigation
 Provide support to enable people to move around the
parts of the system; maps, directional signs and
information signs.
 Menus are often used for navigation, signs (labels)
indicate where else you can go in the system.

‫مبدءا‬5-‫التنقل‬ ‫سهولة‬
‫علي‬ ‫المستخدم‬ ‫قدرة‬ ‫علي‬ ‫المستخدم‬ ‫قدرة‬ ‫تزويد‬
, )‫خرائط‬ ‫النظام‬ ‫أجزاء‬ ‫بين‬ ‫التنقل‬ ‫قدرة‬
( ,‫المعلومات‬ ‫علمات‬ ‫التجاهات‬ ‫علمات‬
‫التنقل‬ ‫سهولة‬ ‫في‬ ‫ماتستخدم‬ ‫عادتا‬ ‫القوائم‬

Principle 6 – Control
 Make it clear who or what is in control and allow people to take
control.
 Control is enhanced if there is a clear, logical mapping
between controls and the effect that they have.
 Also make clear the relationship between what the system
does and what will happen in the world outside the system.

‫مبدءا‬6-‫التحكم‬
‫النظام‬ ‫في‬ ‫بالتحكم‬ ‫لهم‬ ‫المخول‬ ‫للشخاص‬ ‫واضحة‬ ‫اجعلها‬
‫بين‬ ‫منطقية‬ ‫خرائط‬ ‫هناك‬ ‫كان‬ ‫إذا‬ ‫التحكم‬ ‫تحسين‬ ‫يمكن‬
‫يمتلكون‬ ‫هم‬ ‫لما‬ ‫والتأثير‬ ‫المتحكمين‬
‫سوف‬ ‫ومادا‬ ‫النظام‬ ‫عمل‬ ‫بين‬ ‫واضحة‬ ‫العلقات‬ ‫اجعل‬
‫للنظام‬ ‫الخارجي‬ ‫العالم‬ ‫في‬ ‫يحدث‬

Principle 7 – Feedback
 Rapidly feed back information from the system to people so that
they know what effect their actions have had.
 Constant and consistent feedback will enhance the feeling of
control.
 Pressing a button or pulling a lever

‫مبدءا‬6-‫الرجاع‬
•‫يمكنهم‬ ‫بدلك‬ ‫المستخدم‬ ‫إلي‬ ‫النظام‬ ‫من‬ ‫المعلومات‬ ‫إرجاع‬ ‫سهولة‬
.‫التصميم‬ ‫أثناء‬ ‫تغيرات‬ ‫أحدات‬ ‫علي‬ ‫أعمالهم‬ ‫تأثير‬ ‫معرفة‬
•.‫التحكم‬ ‫علي‬ ‫القدرة‬ ‫في‬ ‫أحسن‬ ‫شعور‬ ‫تعطي‬ ‫الرجاع‬ ‫عملية‬ ‫وجود‬
•. ‫بالسحب‬ ‫أو‬ ‫الرجاع‬ ‫زر‬ ‫علي‬ ‫بالضغط‬ ‫ام‬ ‫الرجاع‬ ‫عملية‬ ‫وتكون‬

Safe and Secure
Principle 8 – Recovery ‫مبدءا‬8-‫المعلومات‬ ‫استعادة‬
‫المعلومات‬ ‫استعادة‬ ‫علي‬ ‫القدرة‬
 enable recovery from actions, particularly mistakes and
errors, quickly and effectively.
‫او‬ ‫أخطاء‬ ‫تحدت‬ ‫عندما‬ ‫الصلية‬ ‫المعلومات‬ ‫استعادة‬ ‫قدرة‬
.‫وفاعلية‬ ‫بسرعة‬ ‫فيها‬ ‫نقص‬

Principle 9 – Constraints ‫مبدءا‬9-‫القيود‬
Constraints – Involve limiting the actions that can be
performed in a particular design
Safe and Secure
‫القيود‬
‫أو‬ ‫العمال‬ ‫جعل‬ ‫تعني‬
‫عند‬ ‫إل‬ ‫تعمل‬ ‫ل‬ ‫الوامر‬
‫المناسبة‬ ‫الساحة‬ ‫وجود‬
‫لها‬ ‫المخصصة‬ ‫أو‬

Principle 10 – Flexibility
 Allow multiple ways of doing things so as to
accommodate users with different levels of experience
and interest in the systems.
 Provide people with the opportunity to change the way
things look or behave so that they can personalize the
system.

Principle 10 – Flexibility ‫مبدءا‬10-‫المرونة‬
•‫اختلف‬ ‫لمراعاة‬ ‫مختلفة‬ ‫بطرق‬ ‫أشياء‬ ‫بتنفيذ‬ ‫السماح‬
.‫النظمة‬ ‫في‬ ‫للمستخدمين‬ ‫والهتمام‬ ‫الخبرة‬ ‫مستوى‬
•‫طرق‬ ‫تغير‬ ‫من‬ ‫تمكنهم‬ ‫التي‬ ‫بمميزات‬ ‫الناس‬ ‫تزويد‬
‫شخصنه‬ ‫من‬ ‫يمكنهم‬ ‫وبدلك‬ ‫للشياء‬ ‫والتصرف‬ ‫المشاهدة‬
.‫النظام‬

Aesthetics ‫الجماليات‬
 Principle 11 – Style ‫مبدءا‬11-‫النمط‬
 designs should be stylish and attractive
‫فاعلية‬ ‫وذات‬ ‫نمطية‬ ‫تكون‬ ‫أن‬ ‫يجب‬ ‫التصاميم‬
Principle 12 – Conviviality ‫مبدءا‬11-‫جذاب‬
Interactive systems should be polite, friendly, and
generally.
.‫وعمومية‬ ‫ولطيفة‬ ‫مهذبة‬ ‫تكون‬ ‫أن‬ ‫يجب‬ ‫التفاعلية‬ ‫النظمة‬

‫البرمجيات‬ ‫تطوير‬

‫البرمجيات‬ ‫تطوير‬
•.‫هندسي‬ ‫منهج‬ ‫هو‬ ‫البرمجيات‬ ‫تطوير‬
•‫خطوات‬ ‫علي‬ ‫بناء‬ ‫المنتج‬ ‫بتطوير‬ ‫يقوم‬ ‫الهندسي‬ ‫المنهج‬
.‫علمية‬ ‫وبتقنيات‬ ‫مهيكلة‬
•‫التطوير‬ ‫عملية‬ ‫لفهم‬ ‫وسيلة‬ ‫البرمجيات‬ ‫هندسة‬
•‫في‬ ‫المستخدم‬ ‫من‬ ‫المرتجعة‬ ‫التغذية‬ ‫من‬ ‫الستفادة‬
.‫الولي‬ ‫التصميم‬ ‫مراحل‬
•‫الزبون‬ ‫من‬ ‫نوعان‬ ‫هناك‬customer
‫مع‬ ‫يتعامل‬ ‫وهو‬ ‫البرمجيات‬ ‫لشركة‬ ‫عميل‬ ‫زبون‬
‫البرنامج‬ ‫تطوير‬ ‫فترة‬ ‫خلل‬ ‫برايه‬ ‫ويدلي‬ ‫المصممين‬

•‫البرمجيات‬ ‫حياة‬ ‫دورة‬
‫البرمجيات‬ ‫لتطوير‬ ‫تتم‬ ‫التي‬ ‫النشاطات‬ ‫تصف‬
•‫البرمجيات‬ ‫حياة‬ ‫دورة‬ ‫يصف‬ ‫الشلل‬ ‫نظام‬
‫النظام‬ ‫لحالة‬ ‫الفيزيائي‬ ‫التمثيل‬ ‫بين‬ ‫المسافة‬ ‫هي‬
.‫له‬ ‫المستخدم‬ ‫توقع‬ ‫وبين‬

•‫يريده‬ ‫لما‬ ‫استنتاج‬ ‫عملية‬ ‫هي‬ ‫تحليلها‬ ‫او‬ ‫المتطلبات‬ ‫جمع‬
. ‫المنتجة‬ ‫البرمجيات‬ ‫من‬ ‫الزبون‬
•‫تعرف‬ ‫المصمم‬ ‫ويكملها‬ ‫العميل‬ ‫من‬ ‫تقدم‬ ‫ورقة‬ ‫هناك‬
.‫النظام‬ ‫من‬ ‫المطلوب‬ ‫تصف‬ ‫التطبيق‬ ‫بوصف‬
•‫بالمقابلت‬ ‫تكمل‬ ‫وغامضة‬ ‫مبهمة‬ ‫نقاط‬ ‫هناك‬ ‫أن‬ ‫يمكن‬
.‫والتقويم‬ ‫المعطاة‬ ‫البيانات‬ ‫وتحليل‬ ‫الملحظات‬ ‫وكتابة‬
•‫الطبيعية‬ ‫البيئة‬ ‫عن‬ ‫معلومات‬ ‫جمع‬ ‫يتم‬

HCI design models
‫النسان‬ ‫لتفاعل‬ ‫التصميم‬ ‫نماذج‬
‫الحاسوب‬ ‫مع‬

HCI design models
 Norman Model ‫نموذج‬‫نورمان‬
 Waterfall model ‫النسيابي‬ ‫النموذج‬
 The star life cycle model ‫حياة‬ ‫دورة‬ ‫نموج‬
‫النجوم‬
 Rapid prototyping ‫السريعة‬ ‫البتدائية‬ ‫النمدجه‬

The waterfall model
Requirements
analysis &
specification
System &
software
design
Implementation
& unit testing
Integration
& system
testing

The star life cycle
Task analysis /
functional
analysis
Requirements
specification
Conceptual design /
formal design
Prototyping
Implementation
Evaluation

Rapid prototyping

[1]اساسيات تفاعل الانسان مع الحاسوب

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [1]اساسيات تفاعل الانسان مع الحاسوب

Similar to [1]اساسيات تفاعل الانسان مع الحاسوب (20)

[1]اساسيات تفاعل الانسان مع الحاسوب