What is human-computer interaction (HCI)?

( ‫ما هو التفاعل بين اإلنسان والحاسوب‬HCI)‫؟‬

* HCI is the study and the practice of usability.
* .‫هي دراسة وممارسة قابلية االستخدام‬
It is about understanding and creating software and other technology that
people will want to use, will be able to use, and will find effective when
used.
‫ وسيتمكنون‬، ‫يتعلق األمر بفهم وإنشاء البرامج والتقنيات األخرى التي سيرغب الناس في استخدامها‬
.‫ وسيجدونها فعالة عند استخدامها‬، ‫من استخدامها‬

*HCI is the study of how people use computer systems to perform

certain tasks.
*.‫هي دراسة كيفية استخدام الناس ألنظمة الكمبيوتر ألداء مهام معينة‬
HCI tries to provide us with all understanding of the computer and the
person using it, so as to make the interaction between them more effective
and more enjoyable.
‫يحاول‬HCI ‫ وذلك لجعل التفاعل بينهما أكثر‬، ‫تزويدنا بكل فهم للكمبيوتر والشخص الذي يستخدمه‬
.‫فعالية ومتعة‬

Introduction to HCI AP Dr. Siti Salwah Salim

What is human-computer interaction (HCI)?
‫ما هو التفاعل بين اإلنسان والحاسوب‬

* HCI concerns:‫مخاوف‬
process: design, evaluation and implementation
‫ التصميم والتقييم والتنفيذ‬:‫العملية‬
on: interactive computing systems for human use
on: ‫أنظمة الحوسبة التفاعلية لالستخدام البشري‬
plus: the study of major phenomena surrounding them
‫ دراسة الظواهر الكبرى المحيطة بهم‬:‫زائد‬

Introduction to HCI AP Dr. Siti Salwah Salim

 Allow users to carry outtasks
‫السماح للمستخدمين بتنفيذ المهام‬
 Safely‫بأمان‬

 Effectively‫بفعاليه‬

 Efficiently‫بكفاءه‬

 Enjoyably‫بشكل ممتع‬

4
 ‫سهولة االستخدام‬

 Important issue
‫امر هام‬
 Combination of‫مزيج من‬

 Ease of learning‫سهولة التعلم‬

 High speed of user task performance

 ‫سرعة عالية ألداء مهام المستخدم‬

 Low user error rate

 ‫معدل خطأ مستخدم منخفض‬

 Subjective user satisfaction

 ‫رضا المستخدم الشخصي‬

 User retention over time

5
 ‫رضا المستخدم الشخصي‬
Ensuring usability. . ‫ضمان سهولة االستخدام‬

“A usable software system is one that supports the effective and efficient completion of
tasks in a given work context” (Karat and Dayton1995).

( "‫"نظام البرمجيات القابل لالستخدام هو الذي يدعم اإلنجاز الفعال والفعال للمهام في سياق عمل معين‬Karat and Dayton
1995).

The bottom-line benefits of more usable software system to business

usersinclude:
:‫تشمل الفوائد النهائية لنظام برمجيات أكثر قابلية لالستخدام لمستخدمي األعمال ما يلي‬
 Increased productivity‫زيادة اإلنتاجية‬
 Decreased user training time and cost‫تقليل وقت تدريب المستخدم وتكلفته‬
 Decreased user errors‫انخفاض أخطاء المستخدم‬
 Increased accuracy of data input and data interpretation
 ‫زيادة دقة إدخال البيانات وتفسير البيانات‬
 Decreased need for ongoing technical support
 ‫انخفاض الحاجة إلى الدعم الفني المستمر‬

Introduction to HCI AP Dr. Siti Salwah Salim

The bottom-line benefits of usability to development organizations
include:
:‫تشمل الفوائد األساسية لقابلية االستخدام في المنظمات اإلنمائية ما يلي‬
 Greater profits due to more competitive products/services
 ‫ الخدمات األكثر تنافسية‬/ ‫أرباح أكبر بسبب المنتجات‬
 Decreased overall development and maintenance costs
 ‫انخفاض إجمالي تكاليف التطوير والصيانة‬
 Decreased customer supportcosts
 ‫انخفاض تكاليف دعم العمالء‬
 More follow-on business due to satisfied customers
‫المزيد من متابعة األعمال بسبب رضا العمالء‬

 Not to use the term ‘user-friendly’ which intended to mean a system

with high usability but always misinterpreted to mean tidying up the
screen displays to make it more pleasing

 ‫عدم استخدام مصطلح "سهل االستخدام" الذي يقصد به نظام ذو قابلية استخدام عالية ولكن يساء تفسيره دائما‬
‫على أنه يعني ترتيب شاشات العرض لجعلها أكثر إرضاء‬
Introduction to HCI AP Dr. Siti Salwah Salim
To achieve usability,the design of the user interface to any interactive product, needs to take
into account and b e tailored around a number of factors,including:

‫ بما‬، ‫ يجب أن يأخذ تصميم واجهة المستخدم ألي منتج تفاعلي في االعتبار وأن يتم تخصيصه حول عدد من العوامل‬، ‫لتحقيق قابلية االستخدام‬
:‫في ذلك‬
 Cognitive, perceptual,and motor capabilities and constraints of peoplein
general
 ‫القدرات المعرفية واإلدراكية والحركية وقيود الناس بشكل عام‬

 Special and unique characteristics of the intended user population in particular

 ‫الخصائص الخاصة والفريدة من نوعها لجمهور المستخدمين المقصودين على وجه الخصوص‬

 Unique characteristics of the users’physical and social work environment

 ‫الخصائص الفريدة لبيئة العمل المادية واالجتماعية للمستخدمين‬

 Unique characteristics and requirements of the users’ tasks,which are being

supported b y the software
 ‫ والتي يدعمها البرنامج‬، ‫الخصائص والمتطلبات الفريدة لمهام المستخدمين‬

 Unique capabilities and constraints of the chosen software and/or hardware and platform for
the product

 ‫ أو األجهزة والنظام األساسي للمنتج‬/ ‫القدرات والقيود الفريدة للبرنامج المختار و‬

Introduction to HCI AP Dr. Siti Salwah Salim

Different design Needs
‫احتياجات التصميم المختلفة‬
Three broad categories of computer user:

:‫ثالث فئات عامة لمستخدمي الكمبيوتر‬

Expert users with detailed knowledge of that particular system.
.‫مستخدمون خبراء لديهم معرفة مفصلة بهذا النظام المعين‬
Occasional users who know well how to perform the tasks they need to perform
frequently.
.‫المستخدمون العرضيون الذين يعرفون جيدًا كيفية أداء المهام التي يحتاجون إليها بشكل متكرر‬
Novices who have never used the system before.

.‫المبتدئين الذين لم يستخدموا النظام من قبل‬

Users may well be novices at one computer application but experts at another one, so
users will belong to different categories for particular computer systems.
‫ لذلك سينتمي المستخدمون‬، ‫قد يكون المستخدمون مبتدئين في أحد تطبيقات الكمبيوتر ولكنهم خبراء في تطبيق آخر‬
.‫إلى فئات مختلفة ألنظمة كمبيوتر معينة‬

Introduction to HCI AP Dr. Siti Salwah Salim

Different design Needs

Strive to understand the important factors, development of

tools and techniques, achieve effective and safe system.
‫ وتحقيق‬، ‫ وتطوير األدوات والتقنيات‬، ‫نسعى جاهدين لفهم العوامل المهمة‬
.‫نظام فعال وآمن‬

Introduction to HCI AP Dr. Siti Salwah Salim

 ‫تحسين الواجهات‬

 Know the User!!‫تعرف على المستخدم‬

 Physical abilities‫القدرات البدنية‬

 Cognitive abilities‫القدرات المعرفية‬

 Personality differences‫االختالفات الشخصية‬

 Skill differences‫اختالفات المهارة‬

 Cultural diversity‫التنوع الثقافي‬

 Motivation‫التحفيز‬

 Special needs‫االحتياجات الخاصة‬

11
 ‫خطأين فادحين‬

‫افترض أن جميع المستخدمين متشابهون‪ Assume all users are alike‬‬

‫افترض أن جميع المستخدمين مثل المصمم‪ Assume all users are like the designer‬‬

‫‪12‬‬
 Not just computers!

 VCR
 Wristwatch
 Phone
 Copier
 Car
 Plane cockpit
 Airline reservation
 Air traffic control
 Running shoes!

13
Teaching User Interface Development to Software
Engineers , Gary Perlman, Ohio University.
‫ جاري‬، ‫تدريس تطوير واجهة المستخدم لمهندسي البرمجيات‬
.‫ جامعة أوهايو‬، ‫بيرلمان‬
“There are not many specialists in user interface development, so most software user interfaces
are designed and built by software engineers. These engineers need training about how to build
usable and useful user interfaces, but the scarcity of user interface specialists is correlated with
the lack of educators ready to train user interface developers.
‫ لذلك تم تصميم وبناء معظم واجهات مستخدم البرامج بواسطة‬، ‫"ال يوجد العديد من المتخصصين في تطوير واجهة المستخدم‬
‫ ولكن ندرة‬، ‫ يحتاج هؤالء المهندسون إلى تدريب حول كيفية بناء واجهات مستخدم مفيدة وقابلة لالستخدام‬.‫مهندسي البرمجيات‬
.‫المتخصصين في واجهة المستخدم مرتبطة بنقص المعلمين المستعدين لتدريب مطوري واجهة المستخدم‬

A software engineer who has been trained in user interface development should have gained
perspective, learned about methods and tools, and gained an appreciation of their limits.

، ‫ وتعلم عن األساليب واألدوات‬، ‫منظورا‬

ً ‫يجب أن يكون مهندس البرمجيات الذي تم تدريبه على تطوير واجهة المستخدم قد اكتسب‬
.‫تقديرا لحدودها‬
ً ‫واكتسب‬

Their perspective should include: the importance of the user interface, the impact of good and
bad user interfaces, and the diversity of users and applications”.

." ‫ وتنوع المستخدمين والتطبيقات‬، ‫ وتأثير واجهات المستخدم الجيدة والسيئة‬، ‫ أهمية واجهة المستخدم‬:‫يجب أن يشمل منظورهم‬

Introduction to HCI AP Dr. Siti Salwah Salim

Teaching User Interface Development to Software
Engineers , Gary Perlman, Ohio University.
‫ جامعة‬، ‫ جاري بيرلمان‬، ‫تدريس تطوير واجهة المستخدم لمهندسي البرمجيات‬
.‫أوهايو‬
“About methods and tools they should know: the tradeoffs of design decisions involving different
dialogue types and input/output devices, the information resources available for design, the
benefits and costs of developing tools for user interface implementation, the need to integrate
training materials with the user interface, the need to evaluate system usability, and information
about some design and evaluation tools.
/ ‫ مقايضات قرارات التصميم التي تتضمن أنواعًا مختلفة من الحوار وأجهزة اإلدخال‬:‫"حول األساليب واألدوات التي يجب أن يعرفوها‬
‫ والحاجة إلى دمج مواد‬، ‫ وفوائد وتكاليف تطوير األدوات لتنفيذ واجهة المستخدم‬، ‫ وموارد المعلومات المتاحة للتصميم‬، ‫اإلخراج‬
.‫ ومعلومات حول بعض أدوات التصميم والتقييم‬، ‫ والحاجة إلى تقييم قابلية استخدام النظام‬، ‫التدريب مع واجهة المستخدم‬

Finally, software engineers building user interfaces must know the limits of their knowledge:
when and how to work with human factors engineers as consultants for design and evaluation,
when and how to work with technical writers for implementation of a system of user guidance,
when and how to work with a statistical consultant, and the difficulty of measurement and the
complexity of making decisions based on data.”
‫ متى وكيف يعملون مع مهندسي‬:‫ يجب أن يعرف مهندسو البرمجيات الذين يقومون ببناء واجهات مستخدم حدود معرفتهم‬، ‫أخيرا‬ ً
‫ ومتى و كيفية‬، ‫ ومتى وكيفية العمل مع الكتاب التقنيين لتنفيذ نظام توجيه المستخدم‬، ‫العوامل البشرية كمستشارين للتصميم والتقييم‬
." ‫ وصعوبة القياس وتعقيد اتخاذ القرارات بنا ًء على البيانات‬، ‫العمل مع مستشار إحصائي‬

Introduction to HCI AP Dr. Siti Salwah Salim

 Visibility – what is seen

‫ ما يُرى‬- ‫الرؤية‬
 A ffordance – what operations and manipulation can be done to a
particular object
‫ ما هي العمليات والمعالجة التي يمكن إجراؤها على كائن معين‬- ‫التكلفة‬
 What is visible must have a good mapping to their effect
‫ما هو مرئي يجب أن يكون له تخطيط جيد لتأثيره‬
Perceived affordance – what a person thinks can be done to the
object
‫ ما يعتقد الشخص أنه يمكن القيام به مع الكائن‬- ‫التكلفة المتصورة‬

Introduction to HCI AP Dr. Siti Salwah Salim

Importance of HCI
In the past, problems with poor interface design of computer software have
contributed to an enormous loss in productivity, ranging from increases in time taken
to input and process information after computerization, to deaths from airline crashes
due to pilots misreading the instrument readings on their aircraft.
‫ تتراوح من‬، ‫ ساهمت مشاكل التصميم السيئ لواجهة برامج الكمبيوتر في خسارة هائلة في اإلنتاجية‬، ‫في الماضي‬
‫ إلى الوفيات الناجمة عن حوادث الطيران‬، ‫الزيادات في الوقت المستغرق في إدخال المعلومات ومعالجتها بعد الحوسبة‬
. ‫بسبب سوء قراءة الطيارين لقراءات األجهزة على طائراتهم‬
A US study in the 1980s found that:
• only 20% of new systems studied were considered to be successes
• 40 % produced only marginal gains
• 40 % resulted in rejection or failure of the system
• this represents a huge loss of money, time and effort from all of the people involved.
• :‫وجدت دراسة أمريكية في الثمانينيات أن‬
• ‫ فقط من األنظمة الجديدة التي تمت دراستها ناجحة‬٪20 ‫تم اعتبار‬
• ‫ أنتجوا مكاسب هامشية فقط‬٪40
• ‫ نتج عنها رفض أو فشل النظام‬٪40
• .‫هذا يمثل خسارة فادحة للمال والوقت والجهد من جميع األشخاص المعنيين‬
Introduction to HCI AP Dr. Siti Salwah Salim
Importance of HCI
HCI will be increasingly important in the following areas:
‫تزداد أهمية‬HCI :‫في المجاالت التالية‬

• As part of software development process and system design methods

• ‫كجزء من عملية تطوير البرمجيات وطرق تصميم النظام‬

• As part of future legal requirements for software

• ‫كجزء من المتطلبات القانونية المستقبلية للبرامج‬

• As the basis for a set of usability criteria to evaluate and choose from

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

• amongst competing products
• ‫من بين المنتجات المنافسة‬

• As the basis for successful marketing strategy to the increasingly

• ‫كأساس الستراتيجية التسويق الناجحة على نحو متزايد‬

• important home and small business user
• ‫المستخدم المهم في المنزل واألعمال الصغيرة‬

Introduction to HCI AP Dr. Siti Salwah Salim

Relationship of HCI to other disciplines

Introduction to HCI AP Dr. Siti Salwah Salim

HCI is a multidisciplinary field – HCI
draws expertise from a number of
different areas of study.

HCI ‫ يستمد‬- ‫هو مجال متعدد التخصصات‬HCI ‫الخبرة من عدد من‬

.‫مجاالت الدراسة المختلفة‬

Introduction to HCI AP Dr. Siti Salwah Salim

References:
Jenny Preece, Alan Dix, and HCI web resources.

Introduction to HCI AP Dr. Siti Salwah Salim

chapter 1

the human
 the human
• Information i/o …‫استيعاب االدخال واالخراج عند الناس تختلف‬
– visual, auditory, haptic, movement
• Information stored in memory
• ‫المعلومات المخزنة في الذاكرة‬
– sensory, short-term, long-term
• Information processed and applied
• ‫معالجة المعلومات وتطبيقها‬
– reasoning, problem solving, skill, error
• Emotion influences human capabilities
• ‫تؤثر العاطفة على القدرات البشرية‬
• Each person is different
‫مجال الرؤية‪Vision‬‬

‫‪Two stages in vision‬‬

‫مرحلتان في الرؤية »‬

‫‪• physical reception of stimulus‬‬

‫مثال رؤية المصباح‬
‫(هنقر ستيشن)مثال شعار التطبيق يوضح الي غرض يعمل به‬
‫• االستقبال الجسدي للمحفزات‬

‫‪• processing and interpretation of‬‬

‫‪stimulus‬‬
‫مثال تشغيل الزر للمصباح يعمل ام ال‬
‫مثال التطبيق(هنقر ستيشن)تطبيق خاص لالكل‬
The Eye - physical reception
‫ االستقبال الجسدي‬- ‫العين‬
• mechanism for receiving light and transforming it
into electrical energy
• ‫آلية استقبال الضوء وتحويله إلى طاقة كهربائية‬
• light reflects from objects
• ‫ينعكس الضوء من األشياء‬
• images are focused upside-down on retina
• ‫الصور مقلوبة على شبكية العين‬
• retina contains rods for low light vision and cones
for colour vision
• ‫تحتوي شبكية العين على قضبان للرؤية الخافتة ومخاريط لرؤية األلوان‬
• ganglion cells (brain!) detect pattern and
movement
• ‫تكتشف الخاليا العقدية (الدماغ!) النمط والحركة‬
 Interpreting the signal
‫تفسير اإلشارة‬
• Size and depth‫الحجم والعمق‬
– visual angle indicates how much of view object occupies
– ‫تشير الزاوية المرئية إلى مقدار ما يشغله كائن العرض‬
(relates to size and distance from eye))‫(يتعلق بالحجم والمسافة من العين‬
– visual acuity is ability to perceive detail (limited)
– )‫حدة البصر هي القدرة على إدراك التفاصيل (محدودة‬
– familiar objects perceived as constant size
– ‫األشياء المألوفة التي يُنظر إليها على أنها حجم ثابت‬
(in spite of changes in visual angle when far away)
– )‫(على الرغم من التغييرات في الزاوية البصرية عندما تكون بعيدة‬
– cues like overlapping help perception of size and depth
– ‫تساعد اإلشارات مثل التداخل في إدراك الحجم والعمق‬
 Interpreting the signal (cont)
‫تفسير اإلشارة‬
• Brightness‫سطوع‬
– subjective reaction to levels of light
– ‫رد فعل شخصي لمستويات الضوء‬
– affected by luminance of object
– ‫تتأثر بإضاءة الكائن‬
– measured by just noticeable difference
– ‫تقاس فقط بفارق ملحوظ‬
– visual acuity increases with luminance as does
flicker ‫مثل هذا اللون‬
– ‫تزيد حدة البصر مع السطوع كما يزيد الوميض‬
‫االغلب يرونه‬
• Colour‫لون‬ ‫ازرق واالخر‬
– made up of hue, intensity, saturation ‫يراه اخضر‬
– ‫يتكون من اللون والشدة والتشبع‬
– cones sensitive to colour wavelengths
– ‫مخاريط حساسة لألطوال الموجية اللونية‬
– blue acuity is lowest
– ‫حدة األزرق هي األدنى‬
– 8% males and 1% females colour blind
– ‫ إناث عمى األلوان‬٪1 ‫ ذكور و‬٪8
Interpreting the signal (cont)
)‫تفسير اإلشارة (تابع‬
• The visual system compensates for:
• :‫يعوض النظام البصري عن‬
– movement‫حركة‬
– changes in luminance..‫التغييرات في اإلنارة‬

• Context is used to resolve ambiguity

• ‫يستخدم السياق لحل الغموض‬

• Optical illusions sometimes occur due to

over compensation
• ‫تحدث الخدع البصرية أحيانا بسبب اإلفراط في التعويض‬
Optical Illusions‫خداع بصري‬

the Ponzo illusion the Muller Lyer illusion

‫بالمختصر الشكل يفرق برؤية الشخص له‬

Optical Illusions

the Ponzo illusion the Muller Lyer illusion

‫نفس الحجم‬
‫قراءة‪Reading‬‬
‫•‬ ‫عدة مراحل‪Several stages::‬‬
‫مثل تحديد لغة الكتاب من النظر‪– visual pattern perceived‬‬
‫ينظر إلى النمط البصري –‬
‫‪– decoded using internal representation of language‬‬
‫استخدام اللغه المناسبه للقراءة الكتاب‪:‬فك الشفرة باستخدام التمثيل الداخلي للغة –‬
‫‪– interpreted using knowledge of syntax, semantics,‬‬
‫‪pragmatics‬‬
‫فُسرت باستخدام المعرفة النحوية والدالالت والبراغماتية –‬
‫يعرف انها مثال لغه انقليزيه فيقرأ »‬
‫•‬ ‫‪Reading involves saccades and fixations‬‬
‫•‬ ‫تتضمن القراءة المراوغة والتثبيتات‬
‫•‬ ‫‪Perception occurs during fixations‬‬
‫•‬ ‫يحدث اإلدراك أثناء التثبيتات‬
‫•‬ ‫‪Word shape is important to recognition‬‬
‫•‬ ‫شكل الكلمة مهم للتعرف عليها‬
‫•‬ ‫‪Negative contrast improves reading from computer‬‬
‫‪screen‬‬
‫•‬ ‫يحسن التباين السلبي القراءة من شاشة الكمبيوتر‬
Hearing‫سمع‬

• Provides information about environment:

• :‫يوفر معلومات حول البيئة‬
distances, directions, objects etc.
• Physical apparatus::‫الجهاز الفيزيائي‬
– outer ear – protects inner and amplifies sound
– middle ear – transmits sound waves as
vibrations to inner ear
– inner ear – chemical transmitters are released
and cause impulses in auditory nerve
• Sound‫الصوت‬
– pitch – sound frequency
– loudness – amplitude
– timbre – type or quality
Hearing (cont)
• Humans can hear frequencies from 20Hz to
15kHz
• ‫ كيلو هرتز‬15 ‫ هرتز إلى‬20 ‫يمكن للبشر سماع ترددات من‬
– less accurate distinguishing high frequencies than
low.
– .‫أقل دقة في التمييز بين الترددات العالية من الترددات المنخفضة‬

• Auditory system filters sounds

• ‫يقوم النظام السمعي بتصفية األصوات‬
– can attend to sounds over background noise.
– .‫يمكن أن يحضر األصوات فوق ضوضاء الخلفية‬
– for example, the cocktail party phenomenon.
– .‫ ظاهرة حفالت الكوكتيل‬، ‫على سبيل المثال‬
Touch‫ صلة‬.‫ اتصال‬.‫لمس‬
• Provides important feedback about environment.
• .‫يقدم مالحظات مهمة حول البيئة‬
• May be key sense for someone who is visually impaired.
• .‫قد تكون منطقية لشخص ضعيف البصر‬
• Stimulus received via receptors in the skin:
• :‫يتم استقبال التحفيز عبر مستقبالت في الجلد‬
– thermoreceptors – heat and cold
– nociceptors – pain
– mechanoreceptors – pressure
(some instant, some continuous)
• Some areas more sensitive than others e.g. fingers.
• .‫بعض المناطق أكثر حساسية من غيرها مثل أصابع‬
• Kinethesis - awareness of body position
• ‫ الوعي بموقف الجسم‬- ‫الحركية‬
– affects comfort and performance.
Movement‫حركة‬
• Time taken to respond to stimulus:
reaction time + movement time
• ‫ وقت الحركة‬+ ‫ وقت رد الفعل‬:‫الوقت المستغرق لالستجابة للمحفز‬
• Movement time dependent on age, fitness etc.
• .‫يعتمد وقت الحركة على العمر واللياقة البدنية وما إلى ذلك‬
• Reaction time - dependent on stimulus type:
• :‫ يعتمد على نوع التحفيز‬- ‫وقت رد الفعل‬
– visual ~ 200ms
– auditory ~ 150 ms
– pain ~ 700ms

• Increasing reaction time decreases accuracy in

the unskilled operator but not in the skilled
operator.
• ‫زيادة وقت رد الفعل يقلل من الدقة في المشغل غير الماهر ولكن ليس في‬
.‫المشغل الماهر‬
 Movement (cont)‫مهم باالختبار‬
• Fitts' Law describes the time taken to hit a
screen target:
• :‫يصف قانون فيتس الوقت المستغرق للوصول إلى هدف الشاشة‬

Mt = a + b log2(D/S + 1)
where: a and b are empirically determined constants
Mt is movement time
D is Distance
S is Size of target

 targets as large as possible

distances as small as possible
 ‫أهداف كبيرة بقدر اإلمكان لمسافات صغيرة قدر اإلمكان‬
 ‫كلما زاد الحجم قل االخطاء وزادت الدقه والعكس صحيح‬
Memory‫ذاكرة‬
There are three types of memory function:
:‫هناك ثالثة أنواع من وظائف الذاكرة‬
Sensory memories‫ذكريات حسية‬

Short-term memory or working memory

‫الذاكرة قصيرة المدى أو الذاكرة العاملة‬

Long-term memory‫ذاكرة طويلة المدى‬

Selection of stimuli governed by level of arousal.

.‫اختيار المحفزات التي يحكمها مستوى اإلثارة‬
sensory memory‫الذاكرة الحسية‬
• Buffers for stimuli received through
senses
• ‫مخازن المنبهات المتلقاة من خالل الحواس‬
– iconic memory: visual stimuli
– ‫ المحفزات البصرية‬:‫الذاكرة األيقونية‬
– echoic memory: aural stimuli
– ‫ محفزات سمعية‬:‫ذاكرة صدى‬
– haptic memory: tactile stimuli
– ‫ المنبهات اللمسية‬:‫الذاكرة اللمسية‬
• Examples
– “sparkler” trail
– stereo sound
• Continuously overwritten
Short-term memory (STM)
‫الذاكرة قصيرة المدى‬
• Scratch-pad for temporary recall

– rapid access ~ 70ms

– rapid decay ~ 200ms

– limited capacity - 7± 2 chunks

Examples

212348278493202

0121 414 2626

HEC ATR ANU PTH ETR EET

Long-term memory (LTM)
‫ذاكرة طويلة المدى‬
• Repository for all our knowledge
• ‫مستودع لكل ما لدينا من معلومات‬
– slow access ~ 1/10 second
– slow decay, if any
– huge or unlimited capacity

• Two types
– episodic – serial memory of events
– ‫ ذاكرة متسلسلة لألحداث‬- ‫عرضي‬
– semantic – structured memory of facts,concepts, skills
– ‫ الذاكرة المنظمة للحقائق والمفاهيم والمهارات‬- ‫الذاكرة الداللية‬

semantic LTM derived from episodic LTM

LTM ‫الداللية مشتقة من‬LTM ‫العرضي‬
Long-term memory (cont.)
• Semantic memory structure
• ‫بنية الذاكرة الداللية‬
– provides access to information
– ‫يوفر الوصول إلى المعلومات‬
– represents relationships between bits of information
– ‫يمثل العالقات بين أجزاء من المعلومات‬
– supports inference
– ‫يدعم االستدالل‬

• Model: semantic network

• ‫ الشبكة الداللية‬:‫النموذج‬
– inheritance – child nodes inherit properties of parent
nodes
– ‫ ترث العقد الفرعية خصائص العقد األصلية‬- ‫الوراثة‬
– relationships between bits of information explicit
– ‫العالقات بين أجزاء من المعلومات صريحة‬
– supports inference through inheritance
– ‫يدعم االستدالل من خالل الميراث‬
LTM - semantic network
LTM - ‫الشبكة الداللية‬
 Models of LTM - Frames
• Information organized in data structures
• ‫المعلومات المنظمة في هياكل البيانات‬
• Slots in structure instantiated with values for instance
of data
• ‫تم إنشاء الفتحات في الهيكل باستخدام قيم على سبيل المثال من البيانات‬
• Type–subtype relationships
• ‫العالقات بين النوع والنوع الفرعي‬
DOG COLLIE

Fixed Fixed
legs: 4 breed of: DOG
type: sheepdog
Default
diet: carniverous Default
sound: bark size: 65 cm
Variable Variable
size: colour
colour
Models of LTM - Production rules
Representation of procedural knowledge.
.‫تمثيل المعرفة اإلجرائية‬
Condition/action rules
‫ العمل‬/ ‫قواعد الشرط‬
if condition is matched
then use rule to determine action.
‫إذا تم مطابقة الشرط‬
‫ثم استخدم القاعدة لتحديد اإلجراء‬
IF dog is wagging tail
THEN pat dog

IF dog is growling
THEN run away
 LTM - Storage of information
• Rehearsal‫تكرار‬/‫بروفة‬
– information moves from STM to LTM

• total time hypothesis‫فرضية الوقت اإلجمالي‬

– amount retained proportional to rehearsal time

• distribution of practice effect‫توزيع تأثير الممارسة‬

– optimized by spreading learning over time

• structure, meaning and familiarity‫الهيكل والمعنى واأللفة‬

– information easier to remember
– ‫سهولة تذكر المعلومه‬
LTM - Forgetting‫النسيان‬

decay
– information is lost gradually but very slowly

interference
– new information replaces old: retroactive
interference
– old may interfere with new: proactive inhibition

so may not forget at all memory is selective …

… affected by emotion – can subconsciously `choose' to
forget
LTM – retrieval‫استدعاء المعلومه‬

recall
– information reproduced from memory can be
assisted by cues, e.g. categories, imagery

recognition‫التعرف‬
– information gives knowledge that it has been seen
before
– ‫تعطي المعلومات المعرفة بأنه قد تمت رؤيتها من قبل‬
– less complex than recall - information is cue
– ‫ المعلومات هي إشارة‬- ‫أقل تعقيدا من االسترجاع‬
 Thinking

Reasoning:is a means of inferring new information

from what is already known
‫ هو وسيلة الستنتاج معلومات جديدة مما هو معروف بالفعل‬:‫االستدالل‬

deduction, induction, abduction

Problem solving
Deductive Reasoning‫المنطق االستنتاجي‬
• Deduction:‫المستقطع‬
– derive logically necessary conclusion from given
premises.
– .‫استنباط استنتاج ضروري منطقيا من أماكن معينة‬
e.g. If it is Friday then she will go to work
It is Friday
Therefore she will go to work.

• Logical conclusion not necessarily true:

• :‫االستنتاج المنطقي ليس بالضرورة صحيحا‬
e.g. If it is raining then the ground is dry
It is raining
Therefore the ground is dry
Deduction (cont.)

• When truth and logical validity clash …

• ... ‫عندما تتعارض الحقيقة والصالحية المنطقية‬
e.g. Some people are babies
Some babies cry
Inference - Some people cry
• Correct?
Inductive Reasoning‫االستدالل االستقرائي‬
• Induction::‫الحث‬
– generalize from cases seen to cases unseen
– ‫التعميم من الحاالت التي ينظر إليها على الحاالت غير المرئية‬
e.g. all elephants we have seen have trunks
therefore all elephants have trunks.

• Unreliable::‫غير موثوق‬
– can only prove false not true

• … but useful!
• Humans not good at using negative
evidence
• ‫البشر ال يجيدون استخدام األدلة السلبية‬
– e.g. Wason's cards.
 Wason's cards

7 E 4 K
If a card has a vowel on one side it has an even number on the other

Is this true?

How many cards do you need to turn over to find out?

…. and which cards? E,7

Abductive reasoning‫المنطق االستبادي‬

• reasoning from event to cause

• ‫المنطق من حدث إلى سبب‬
– e.g. Sam drives fast when drunk.
– If I see Sam driving fast, assume drunk.

• Unreliable::‫غير موثوق‬
– can lead to false explanations
– ‫يمكن أن يؤدي إلى تفسيرات خاطئة‬
Problem solving

• Process of finding solution to unfamiliar task

using knowledge.
• Several theories.
• Gestalt
– problem solving both productive and reproductive
– productive draws on insight and restructuring of problem
– attractive but not enough evidence to explain `insight'
etc.
– move away from behaviourism and led towards
information processing theories
Problem solving (cont.)

Problem space theory

– problem space comprises problem states
– problem solving involves generating states using legal
operators
– heuristics may be employed to select operators
e.g. means-ends analysis
– operates within human information processing system
e.g. STM limits etc.
– largely applied to problem solving in well-defined areas
e.g. puzzles rather than knowledge intensive areas
Problem solving (cont.)

• Analogy
– analogical mapping:
• novel problems in new domain?
• use knowledge of similar problem from similar domain
– analogical mapping difficult if domains are semantically
different

• Skill acquisition
– skilled activity characterized by chunking
• lot of information is chunked to optimize STM
– conceptual rather than superficial grouping of problems
– information is structured more effectively
Errors and mental models‫مهم‬
‫األخطاء والنماذج الذهنية‬
Types of error
• slips ‫اخطاء غير مقصوده‬
– right intention, but failed to do it right
– causes: poor physical skill,inattention etc.
– change to aspect of skilled behaviour can cause slip

• Mistakes‫اخطاء مقصوده‬
– wrong intention
– cause: incorrect understanding
humans create mental models to explain behaviour.
if wrong (different from actual system) errors can occur
Emotion‫المشاعر‬
• Various theories of how emotion works
• ‫نظريات مختلفة لكيفية عمل العاطفة‬
– James-Lange: emotion is our interpretation of a
physiological response to a stimuli
– Cannon: emotion is a psychological response to a
stimuli
– Schacter-Singer: emotion is the result of our
evaluation of our physiological responses, in the
light of the whole situation we are in
• Emotion clearly involves both cognitive and
physical responses to stimuli
• ‫من الواضح أن العاطفة تتضمن كال من االستجابات المعرفية‬
‫والجسدية للمنبهات‬
 Emotion (cont.)
• The biological response to physical stimuli is
called affect
‫تسمى االستجابة البيولوجية للمنبهات الجسدية بالتأثير‬
• Affect influences how we respond to situations
• ‫يؤثر التأثير على كيفية استجابتنا للمواقف‬
– positive  creative problem solving
– negative  narrow thinking
– Why Emotion is Critical Part In Designing ?
– ‫لماذا تعتبر العاطفة جزءا حاسما في التصميم؟‬
– Ans:

“Negative affect can make it harder to do ‫مهم‬

even easy tasks; positive affect can make
it easier to do difficult tasks”
‫"التأثير السلبي يمكن أن يجعل من الصعب القيام بالمهام السهلة ؛ التأثير‬
" ‫اإليجابي يمكن أن يسهل القيام بالمهام الصعبة‬
Emotion (cont.)

• Implications for interface design

• ‫اآلثار المترتبة على تصميم الواجهة‬
– stress will increase the difficulty of problem solving
– ‫سيزيد التوتر من صعوبة حل المشكلة‬
– relaxed users will be more forgiving of shortcomings
in design
– ‫سيكون المستخدمون المريحون أكثر تسامحا مع أوجه القصور في التصميم‬
– aesthetically pleasing and rewarding interfaces will
increase positive affect
– ‫ستزيد الواجهات المبهجة والمجزية من الناحية الجمالية من التأثير اإليجابي‬
 Individual differences‫الفروقات الفردية‬
• long term
– sex, physical and intellectual abilities
• short term
– effect of stress or fatigue
• changing
– age

Ask yourself:‫مهم‬
will design decision exclude section of user
population?
‫ هل سيستثني قرار التصميم قسما من المستخدمين؟‬:‫اسأل نفسك‬
 Psychology and the Design of
Interactive System
‫علم النفس وتصميم النظام التفاعلي‬
• Some direct applications
• ‫بعض التطبيقات المباشرة‬
– e.g. blue acuity is poor
 blue should not be used for important detail

• However, correct application generally requires

understanding of context in psychology, and an
understanding of particular experimental conditions
• ‫ وفهم ظروف‬، ‫ فإن التطبيق الصحيح يتطلب عموما فهم السياق في علم النفس‬، ‫ومع ذلك‬
‫تجريبية معينة‬

• A lot of knowledge has been distilled in

– guidelines (chap 7)
– cognitive models (chap 12)
– experimental and analytic evaluation techniques (chap 9)
• Ass1:

• Produce a semantic network of the

main information in this chapter
 chapter 2

the computer
The Computer
a computer system is made up of various elements
‫يتكون نظام الكمبيوتر من عناصر مختلفة‬
each of these elements affects the interaction
‫كل عنصر من هذه العناصر يؤثر على التفاعل‬
– input devices – text entry and pointing
– output devices – screen (small&large), digital paper
– virtual reality – special interaction and display devices
– physical interaction – e.g. sound, haptic, bio-sensing
– paper – as output (print) and input (scan)
– memory – RAM & permanent media, capacity & access
– processing – speed of processing, networks
Interacting with computers
‫التعامل مع أجهزة الكمبيوتر‬
to understand human–computer interaction
… need to understand computers!
!‫ بحاجة إلى فهم أجهزة الكمبيوتر‬... ‫لفهم التفاعل بين اإلنسان والحاسوب‬
what goes in and out
devices, paper,
sensors, etc.

what can it do?

memory, processing,
networks
 A ‘typical’ computer system
"‫نظام كمبيوتر "نموذجي‬
? • screen, or monitor, on which there are windows
• keyboard
window 1
• mouse/trackpad
window 2
• variations
– desktop
– laptop
– PDA
12-37pm

• the devices dictate the styles of interaction that the system

supports
• If we use different devices, then the interface will support a
different style of interaction
‫تحدد األجهزة أنماط التفاعل التي يدعمها النظام‬
‫ فستدعم الواجهة نمطا مختلفا من التفاعل‬، ‫إذا استخدمنا أجهزة مختلفة‬
How many …

• computers in your house?

– hands up, …
… none, 1, 2 , 3, more!!

• computers in your pockets?

are you thinking …

… PC, laptop, PDA ??
How many computers …

in your house? in your pockets?

• PC • PDA
• TV, VCR, DVD, HiFi, • phone, camera
cable/satellite TV • smart card, card with
• microwave, cooker, magnetic strip?
washing machine • electronic car key
• central heating • USB memory
• security system
try your pockets and
can you think of more? bags
Interactivity?
‫التفاعل؟‬
Long ago in a galaxy far away … batch processing
– punched card stacks or large data files prepared
– long wait ….
– line printer output
… and if it is not right …

Now most computing is interactive

‫اآلن معظم الحوسبة تفاعلية‬
• rapid feedback
• the user in control (most of the time)
• doing rather than thinking …

Is faster always better?yes it is better of course

‫يفرق من شي الى شي اخر مثل اليوتيوب يكون بالسرعه العاديه افضل من المسرع‬
Richer interaction

sensors
and devices
everywhere
 text entry devices
‫أجهزة إدخال النص‬

keyboards (QWERTY et al.)

chord keyboards, phone pads
handwriting, speech
‫‪Keyboards‬‬
‫‪• Most common text input device‬‬
‫جهاز إدخال النص األكثر شيوعا •‬
‫‪• Allows rapid entry of text by experienced‬‬
‫‪users‬‬
‫يسمح بإدخال سريع للنص من قبل المستخدمين ذوي الخبرة •‬
‫‪• Keypress closes connection, causing a‬‬
‫‪character code to be sent‬‬
‫يؤدي الضغط على المفاتيح إلى إغالق االتصال ‪ ،‬مما يتسبب في إرسال •‬
‫رمز الحرف‬
‫‪• Usually connected by cable, but can be‬‬
‫‪wireless‬‬
‫عادة ما يتم توصيله بواسطة كابل ‪ ،‬ولكن يمكن أن يكون السلكيا •‬
layout – QWERTY

• Standardised layout‫تخطيط موحد‬

but …
• non-alphanumeric keys are placed differently
• accented symbols needed for different scripts
• minor differences between UK and USA keyboards

• QWERTY arrangement not optimal for typing

• ‫ترتيب‬QWERTY ‫ليس األمثل للكتابة‬
– layout to prevent typewriters jamming!
• Alternative designs allow faster typing but large social
base of QWERTY typists produces reluctance to change.
• ‫ لكن القاعدة االجتماعية الكبيرة لكاتبي‬، ‫تسمح التصميمات البديلة بكتابة أسرع‬
QWERTY .‫تنتج إحجاما عن التغيير‬
QWERTY (ctd)

1 2 3 4 5 6 7 8 9 0
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M , .
SPACE
alternative keyboard layouts
‫تخطيطات لوحة المفاتيح البديلة‬
Alphabetic‫أبجدي‬
– keys arranged in alphabetic order
– not faster for trained typists
– not faster for beginners either!

Dvorak‫دفوراك‬
– common letters under dominant fingers
– biased towards right hand
– common combinations of letters alternate between hands
– 10-15% improvement in speed and reduction in fatigue
– But - large social base of QWERTY typists produce market
pressures not to change
special keyboards‫لوحات مفاتيح خاصة‬

• designs to reduce fatigue for RSI

• for one handed use
– e.g. the Maltron left-handed keyboard
Chord keyboards‫لوحات المفاتيح وتر‬
only a few keys - four or 5
letters typed as combination of keypresses
compact size
– ideal for portable applications
short learning time
– keypresses reflect letter shape
fast
– once you have trained

BUT - social resistance, plus fatigue after extended use

NEW – niche market for some wearables
‫ باإلضافة إلى التعب بعد االستخدام المطول‬، ‫ المقاومة االجتماعية‬- ‫ولكن‬
‫ سوق متخصص لبعض األجهزة القابلة لالرتداء‬- ‫جديد‬
phone pad and T9 entry
• use numeric keys with
multiple presses
2 –abc 6 -
mno
3 -def 7 -
pqrs
4 -ghi 8 -
tuv
5 -jkl 9 -
wxyz
• hello = 4433555[pause]555666
• surprisingly fast!
• T9 predictive entry
– type as if single key for each letter
– use dictionary to ‘guess’ the right word
– hello = 43556 …
– but 26 -> menu ‘am’ or ‘an’
Handwriting recognition
‫التعرف على خط اليد‬
• Text can be input into the computer, using a
pen and a digesting tablet
• ‫يمكن إدخال النص في الكمبيوتر باستخدام قلم وجهاز لوحي‬
– natural interaction

• Technical problems::‫مشاكل تقنية‬

– capturing all useful information - stroke path,
pressure, etc. in a natural manner
– segmenting joined up writing into individual letters
– interpreting individual letters
– coping with different styles of handwriting

• Used in PDAs, and tablet computers …

… leave the keyboard on the desk!
Speech recognition‫التعرف على الكالم‬

• Improving rapidly‫يتحسن بسرعة‬

• Most successful when::‫يكون األكثر نجاحا عندما‬

– single user – initial training and learns peculiarities
– ‫ تدريب أولي ويتعلم الخصائص المميزة‬- ‫مستخدم واحد‬
– limited vocabulary systems
– ‫أنظمة مفردات محدودة‬

• Problems with‫مشاكل مع‬

– external noise interfering‫تدخل الضوضاء الخارجية‬
– imprecision of pronunciation‫عدم الدقة في النطق‬
– large vocabularies‫مفردات كبيرة‬
– different speakers‫متحدثين مختلفين‬
Numeric keypads‫لوحات المفاتيح الرقمية‬

• for entering numbers quickly:

• :‫إلدخال األرقام بسرعة‬
– calculator, PC keyboard
• for telephones 1 2 3 7 8 9
4 5 6 4 5 6
not the same!! 1 2 3
7 8 9
0 # 0 . =
ATM like phone *
telephone calculator
positioning, pointing and drawing
‫تحديد المواقع والتأشير والرسم‬

mouse, touchpad
trackballs, joysticks etc.
touch screens, tablets
eyegaze, cursors
the Mouse

• Handheld pointing device

• ‫جهاز تأشير محمول‬
– very common!‫شلئع اكيد‬
– easy to use‫سهل االستخدام‬

• Two characteristics
– planar movement
– buttons
(usually from 1 to 3 buttons on top, used for
making a selection, indicating an option, or to
initiate drawing etc.)
the mouse (ctd)
Mouse located on desktop
‫يقع الماوس على سطح المكتب‬
– requires physical space
– ‫يتطلب مساحة مادية‬
– no arm fatigue‫ال تعب في الذراع‬

Relative movement only is detectable.

Movement of mouse moves screen cursor
Screen cursor oriented in (x, y) plane,
mouse movement in (x, z) plane …
… an indirect manipulation device.
– device itself doesn’t obscure screen, is accurate and fast.
– hand-eye coordination problems for novice users
How does it work?
Two methods for detecting motion

• Mechanical
– Ball on underside of mouse turns as mouse is moved
– Rotates orthogonal potentiometers
– Can be used on almost any flat surface

• Optical
– light emitting diode on underside of mouse
– may use special grid-like pad or just on desk
– less susceptible to dust and dirt
– detects fluctuating alterations in reflected light intensity to
calculate relative motion in (x, z) plane
Even by foot …

• some experiments with the footmouse

– controlling mouse movement with feet …
– not very common :-)

• but foot controls are common elsewhere:

– car pedals
– sewing machine speed control
– organ and piano pedals
Touchpad‫لوحة اللمس‬

• small touch sensitive tablets

• ‘stroke’ to move mouse pointer
• used mainly in laptop computers

• good ‘acceleration’ settings important

• ‫إعدادات "تسريع" جيدة مهمة‬
– fast stroke
• lots of pixels per inch moved
• initial movement to the target
– slow stroke
• less pixels per inch
• for accurate positioning
Trackball and thumbwheels
‫عجالت االبهام‬
Trackball
– ball is rotated inside static housing
• like an upside down mouse!
– relative motion moves cursor
– indirect device, fairly accurate
– separate buttons for picking
– very fast for gaming
– used in some portable and notebook computers.

Thumbwheels …
– for accurate CAD – two dials for X-Y cursor position
– for fast scrolling – single dial on mouse
Joystick and keyboard nipple

Joystick
• indirect
pressure of stick = velocity of movement
• buttons for selection
on top or on front like a trigger
• often used for computer games
aircraft controls and 3D navigation

Keyboard nipple
– for laptop computers
– miniature joystick in the middle of the keyboard
Touch-sensitive screen
• Detect the presence of finger or stylus on the screen.
• .‫الكشف عن وجود اإلصبع أو القلم على الشاشة‬
– works by interrupting matrix of light beams, capacitance changes
or ultrasonic reflections ‫يعمل عن طريق مقاطعة مصفوفة الحزم الضوئية أو تغيرات السعة‬
‫أو االنعكاسات فوق الصوتية‬
– direct pointing device‫جهاز التأشير المباشر‬

• Advantages:
– fast, and requires no specialised pointer
– good for menu selection
– suitable for use in hostile environment: clean and safe from
damage.

• Disadvantages:
– finger can mark screen‫اثر البصمه‬
– imprecise (finger is a fairly blunt instrument!)
• difficult to select small regions or perform accurate drawing
– lifting arm can be tiring
Stylus and light pen‫قلم وقلم ضوئي‬

Stylus
• small pen-like pointer to draw directly on screen
• may use touch sensitive surface or magnetic detection
• used in PDA, tablets PCs and drawing tables

Light Pen
• now rarely used
• uses light from screen to detect location

BOTH …
– very direct and obvious to use
– but can obscure screen
Digitizing tablet

• Mouse like-device with cross hairs

• used on special surface

- rather like stylus

• very accurate
- used for digitizing maps
Eyegaze)‫نظرات العين(تتبع العين‬
• control interface by eye gaze direction
• ‫دواجهة التحكم عن طريق اتجاه نظرة العين‬
– e.g. look at a menu item to select it
• uses laser beam reflected off retina
• ‫يستخدم شعاع الليزر المنعكس عن شبكية العين‬
– … a very low power laser!
• mainly used for evaluation (ch x)
• )‫تستخدم أساسا للتقييم (الفصل العاشر‬
• potential for hands-free control
• ‫إمكانية التحكم بدون استخدام اليدين‬
• high accuracy requires headset
• ‫تتطلب الدقة العالية سماعة رأس‬
• cheaper and lower accuracy devices available
sit under the screen like a small webcam
• ‫األجهزة األرخص ثمنا ً واألقل دقة المتاحة تجلس تحت الشاشة مثل كاميرا الويب الصغيرة‬
Cursor keys‫مفاتيح المؤشر‬

• Four keys (up, down, left, right) on keyboard.

• Very, very cheap, but slow.
• Useful for not much more than basic motion for text-
editing tasks.
• No standardised layout, but inverted “T”, most common
Discrete positioning controls

• in phones, TV controls etc.

– cursor pads or mini-joysticks
– discrete left-right, up-down
– mainly for menu selection
display devices‫أجهزة العرض‬

bitmap screens (CRT & LCD)

large & situated displays
digital paper
bitmap displays pixels‫يعرض الصورة النقطية‬

• screen is vast number of coloured dots

resolution and colour depth
‫الدقة وعمق اللون‬
• Resolution … used for‫الدقة… المستخدمة ل‬
– number of pixels on screen (width x height)
– )‫عدد البكسل على الشاشة (العرض × االرتفاع‬
• e.g. SVGA 1024 x 768, PDA perhaps 240x400
– density of pixels (in pixels or dots per inch - dpi)
– - ‫كثافة البكسل (بالبكسل أو النقاط في البوصة‬dpi)
• typically between 72 and 96 dpi
• Aspect ratio‫ابعاد متزنة‬
– ration between width and height
– 4:3 for most screens, 16:9 for wide-screen TV
• Colour depth::‫عمق اللون‬
– how many different colours for each pixel?
– black/white or greys only
– 256 from a pallete
– 8 bits each for red/green/blue = millions of colours
anti-aliasing
Jaggies
• diagonal lines that have discontinuities in due to horizontal
raster scan process.
• .‫خطوط قطرية بها انقطاعات بسبب عملية المسح النقطي األفقي‬

Anti-aliasing
– softens edges by using shades of line colour
– ‫ينعم الحواف باستخدام ظالل لون الخط‬
– also used for text
– ‫تستخدم أيضا للنص‬
Cathode ray tube‫أنبوب أشعة الكاثود‬

• Stream of electrons emitted from electron gun, focused

and directed by magnetic fields, hit phosphor-coated
screen which glows
• ‫ المركز والموجه بواسطة‬، ‫ضرب تيار من اإللكترونات المنبعثة من مسدس اإللكترون‬
‫ الشاشة المطلية بالفوسفور والتي تضيء‬، ‫المجاالت المغناطيسية‬
• used in TVs and computer monitors electron beam

electron gun

focussing and
deflection

phosphor-
coated screen
‫! ‪Health hazards of CRT‬‬
‫المخاطر الصحية ألنبوب أشعة القطب السالب!‬
‫•‬ ‫)!‪X-rays: largely absorbed by screen (but not at rear‬‬
‫•‬ ‫األشعة السينية‪ :‬تمتصها الشاشة إلى حد كبير (ولكن ليس في الخلف!)‬
‫•‬ ‫‪UV- and IR-radiation from phosphors: insignificant levels‬‬
‫•‬ ‫األشعة فوق البنفسجية واألشعة تحت الحمراء من الفوسفور‪ :‬مستويات ضئيلة‬
‫•‬ ‫)‪Radio frequency emissions, plus ultrasound (~16kHz‬‬
‫•‬ ‫انبعاثات التردد الالسلكي ‪ ،‬باإلضافة إلى الموجات فوق الصوتية (~ ‪ 16‬كيلو هرتز)‬
‫•‬ ‫‪Electrostatic field - leaks out through tube to user. Intensity‬‬
‫‪dependant on distance and humidity. Can cause rashes.‬‬
‫•‬ ‫المجال الكهروستاتيكي ‪ -‬يتسرب عبر األنبوب إلى المستخدم‪ .‬تعتمد الشدة على المسافة والرطوبة‪ .‬يمكن أن‬
‫يسبب طفح جلدي‪.‬‬
‫•‬ ‫‪Electromagnetic fields (50Hz-0.5MHz). Create induction‬‬
‫‪currents in conductive materials, including the human body.‬‬
‫‪Two types of effects attributed to this: visual system - high‬‬
‫‪incidence of cataracts in VDU operators, and concern over‬‬
‫‪reproductive disorders (miscarriages and birth defects).‬‬
‫•‬ ‫المجاالت الكهرومغناطيسية (‪ 50‬هرتز ‪ 0.5 -‬ميجا هرتز)‪ .‬خلق تيارات تحريضية في المواد الموصلة ‪ ،‬بما في‬
‫ذلك جسم اإلنسان‪ .‬يُعزى نوعان من التأثيرات إلى هذا‪ :‬الجهاز البصري ‪ -‬نسبة عالية من إعتام عدسة العين في‬
‫‪ ،‬والقلق بشأن االضطرابات اإلنجابية (اإلجهاض والتشوهات الخلقية)‪VDU .‬مشغلي‬
 Health hints …... ‫تلميحات صحية‬
• do not sit too close to the screen
• ‫ال تجلس بالقرب من الشاشة‬
• do not use very small fonts
• ً ‫ال تستخدم خطو‬
‫طا صغيرة جدًا‬
• do not look at the screen for long periods without
a break
• ‫ال تنظر إلى الشاشة لفترات طويلة دون انقطاع‬
• do not place the screen directly in front of a bright
window
• ‫ال تضع الشاشة أمام نافذة مشرقة مباشرة‬
• work in well-lit surroundings
• ‫العمل في محيط جيد اإلضاءة‬

 Take extra care if pregnant.

but also posture, ergonomics, stress
 ‫ واإلجهاد‬، ‫ وبيئة العمل‬، ‫ ولكن أيضًا الموقف‬.‫توخى الحذر إذا كنت حامال‬
Liquid crystal displays LCD
‫شاشات الكريستال السائل‬
• Smaller, lighter, and … no radiation problems.
.‫ ال توجد مشاكل إشعاعية‬... ‫أصغر حج ًما وأخف وزنًا و‬
• Found on PDAs, portables and notebooks,
… and on desktop and even for home TV
• ‫توجد في أجهزة المساعد الرقمي الشخصي واألجهزة المحمولة وأجهزة الكمبيوتر الم‬increasingly ‫ وبشكل‬... ‫حمولة‬
‫متزايد على سطح المكتب وحتى على التلفزيون المنزلي‬
• also used in dedicted displays:
digital watches, mobile phones, HiFi controls
– ‫ وأدوات التحكم‬، ‫ والهواتف المحمولة‬، ‫ الساعات الرقمية‬:‫تستخدم أيضًا في شاشات العرض‬HiFi
• How it works …
– Top plate transparent and polarised, bottom plate reflecting.
– Light passes through top plate and crystal, and reflects back to
eye.
– Voltage applied to crystal changes polarisation and hence colour
– N.B. light reflected not emitted => less eye strain
special di
‫بروجكتر‬splays‫اجهزة عرض مخصصه‬
Random Scan (Directed-beam refresh, vector display)
– draw the lines to be displayed directly
– no jaggies
– lines need to be constantly redrawn
– rarely used except in special instruments

Direct view storage tube (DVST)

– Similar to random scan but persistent => no flicker
– Can be incrementally updated but not selectively erased
– Used in analogue storage oscilloscopes
large displays‫شاشات كبيره الحجم‬

• used for meetings, lectures, etc.

• .‫تستخدم لالجتماعات والمحاضرات وما إلى ذلك‬
• technology‫تقنية‬
plasma – usually wide screen
video walls – lots of small screens together
projected – RGB lights or LCD projector
– hand/body obscures screen
– may be solved by 2 projectors + clever software
back-projected
– frosted glass + projector behind
situated displays‫شاشات عرض‬

• displays in ‘public’ places"‫يعرض في األماكن "العامة‬

– large or small
– very public or for small group
• display only‫عرض فقط‬
– for information relevant to location
• or interactive‫أو تفاعلي‬
– use stylus, touch sensitive screem
• in all cases … the location matters
• ‫ الموقع مهم‬... ‫في جميع الحاالت‬
– meaning of information or interaction is related to
the location
 Hermes a situated display

• small displays beside office doors

• handwritten notes left using stylus
small displays
•beside
office owner reads notes using web interface
office doors

handwritten office owner

notes left reads notes
using stylus using web interface
Digital paper‫ورق رقمي‬
appearance

• what?
– thin flexible sheets
– updated electronically cross
section
– but retain display

• how?
– small spheres turned
– or channels with coloured liquid
and contrasting spheres
– rapidly developing area
virtual reality and 3D interaction
‫الواقع االفتراضي والتفاعل ثالثي األبعاد‬

positioning in 3D space
moving and grasping
seeing 3D (helmets and caves)
positioning in 3D space
‫تحديد المواقع في الفضاء ثالثي األبعاد‬
• cockpit and virtual controls
– steering wheels, knobs and dials … just like real!
• the 3D mouse
– six-degrees of movement: x, y, z + roll, pitch, yaw
• data glove
– fibre optics used to detect finger position
• VR helmets
– detect head motion and possibly eye gaze
• whole body tracking
– accelerometers strapped to limbs or reflective dots
and video processing
pitch, yaw and roll

yaw

roll
pitch
3D displays

• desktop VR
– ordinary screen, mouse or keyboard control
– perspective and motion give 3D effect
• seeing in 3D
– use stereoscopic vision
– VR helmets
– screen plus shuttered specs, etc.

also see extra slides on 3D vision

VR headsets

• small TV screen for each eye

• slightly different angles
• 3D effect
VR motion sickness‫دوار‬/‫صداع‬

• time delay‫تأخير الوقت‬

– move head … lag … display moves
– conflict: head movement vs. eyes
• depth perception‫إدراك العمق‬
– headset gives different stereo distance
– but all focused in same plane
– conflict: eye angle vs. focus
• conflicting cues => sickness
– helps motivate improvements in technology
simulators and VR caves

• scenes projected on walls

• realistic environment
• hydraulic rams!
• real controls
• other people
physical controls, sensors etc.
‫االشياء الملموسه‬

special displays and gauges

sound, touch, feel, smell
physical controls
environmental and bio-sensing
dedicated displays‫شاشات مخصصة‬

• analogue representations:
• :‫التمثيالت التناظرية‬
– dials, gauges, lights, etc.

• digital displays::‫شاشات رقمية‬

– small LCD screens, LED lights, etc.

• head-up displays ‫شاشات عرض رأسية‬

– found in aircraft cockpits
– show most important controls
… depending on context
Sounds‫اصوات‬

• beeps, bongs, clonks, whistles and

whirrs

• used for error indications

• confirmation of actions e.g. keyclick

‫واضححح‬also see chapter 10

Touch, feel, smell

• touch and feeling important

• ‫اللمس والشعور باألهمية‬
– in games … vibration, force feedback
– in simulation … feel of surgical instruments
– called haptic devices

• texture, smell, taste

– current technology very limited
BMW iDrive

• for controlling menus

• feel small ‘bumps’ for each item
• makes it easier to select options by feel
• uses haptic technology from Immersion Corp.
 physical controls

• specialist controls needed …

– industrial controls, consumer products, etc.

easy-clean
smooth buttons

multi-function
control
large buttons
clear dials

tiny buttons
Environment and bio-sensing
‫البيئة واالستشعار الحيوي‬
• sensors all around us
– car courtesy light – small switch on door
– ultrasound detectors – security, washbasins
– RFID security tags in shops
– temperature, weight, location

• … and even our own bodies …

– iris scanners, body temperature, heart rate,
galvanic skin response, blink rate
paper: printing and scanning

print technology
fonts, page description, WYSIWYG
scanning, OCR
Printing

• image made from small dots

• ‫صورة مصنوعة من نقاط صغيرة‬
– allows any character set or graphic to be
printed,
• critical features::‫الميزات الحرجة‬
– resolution
• size and spacing of the dots
• measured in dots per inch (dpi)
– speed
• usually measured in pages per minute
– cost!!
Types of dot-based printers‫مهم‬
‫أنواع الطابعات النقطية‬
• dot-matrix printers‫طابعات نقطية‬
– use inked ribbon (like a typewriter
– line of pins that can strike the ribbon, dotting the paper.
– typical resolution 80-120 dpi
• ink-jet and bubble-jet printers‫ارخص نوع ومنتشر‬
• ‫طابعات نفث الحبر وطابعات نفث الفقاعات‬
– tiny blobs of ink sent from print head to paper
– typically 300 dpi or better .
• laser printer‫طابعة ليزرية‬
– like photocopier: dots of electrostatic charge deposited on
drum, which picks up toner (black powder form of ink)
rolled onto paper which is then fixed with heat
– typically 600 dpi or better.
Printing in the workplace‫مهم‬
‫الطباعة في مكان العمل‬
• shop tills‫طابعه فواتير‬
– dot matrix‫تشكيل نقطي‬
– same print head used for several paper rolls
– ‫نفس رأس الطباعة المستخدم للعديد من لفات الورق‬
– may also print cheques‫يمكن أيضًا طباعة الشيكات‬

• thermal printers‫الطابعات الحرارية‬

– special heat-sensitive paper
– ‫ورق خاص حساس للحرارة‬
– paper heated by pins makes a dot
– ‫الورق المسخن بواسطة دبابيس يجعل نقطة‬
– poor quality, but simple & low maintenance
– ‫ ولكن صيانة بسيطة ومنخفضة‬، ‫جودة رديئة‬
– used in some fax machines
– ‫تستخدم في بعض أجهزة الفاكس‬
Fonts‫الخطوط‬
• Font – the particular style of text
• ‫ النمط المعين للنص‬- ‫الخط‬
Courier font
Helvetica font
Palatino font
Times Roman font
 §´  (special symbol)

• Size of a font measured in points (1 pt about 1/72”)

(vaguely) related to its height
• ‫ بوصة) (بشكل غامض) يتعلق بارتفاعه‬1/72 ‫ نقطة حوالي‬1( ‫حجم الخط المقاس بالنقاط‬
This is ten point Helvetica
This is twelve point
This is fourteen point
This is eighteen point
and this is twenty-four point
Fonts (ctd)‫مهم انواع الخطوط‬

Pitch
– fixed-pitch – every character has the same width
• e.g. Courier
– variable-pitched – some characters wider
e.g. Times Roman – compare the ‘i’ and the “m”
Serif or Sans-serif‫االنواع مهمم‬
– sans-serif – square-ended strokes
• e.g. Helvetica
– serif – with splayed ends (such as)
e.g. Times Roman or Palatino
Readability of text‫سهولة قراءة النص‬

• lowercase‫أحرف صغيرة‬
– easy to read shape of words
• UPPERCASE‫األحرف الكبيرة‬
– better for individual letters and non-words
e.g. flight numbers: BA793 vs. ba793

• serif fonts
– helps your eye on long lines of printed text
– but sans serif often better on screen
Page Description Languages‫مهم‬
‫لغات وصف الصفحة‬
• Pages very complex‫صفحات معقدة للغاية‬
– different fonts, bitmaps, lines, digitised photos, etc.
• .‫ إلخ‬، ‫ صور رقمية‬، ‫ خطوط‬، ‫ صور نقطية‬، ‫خطوط مختلفة‬
• Can convert it all into a bitmap and send to the printer
… but often huge !
• !‫ ولكن في كثير من األحيان ضخمة‬... ‫يمكن تحويل كل ذلك إلى صورة نقطية وإرسالها إلى الطابعة‬

• Alternatively Use a page description language

• ‫ استخدم لغة وصف الصفحة‬، ‫بدال ً من ذلك‬
– sends a description of the page can be sent,
– ، ‫يرسل وصفا للصفحة يمكن إرسالها‬
– instructions for curves, lines, text in different styles, etc.
– .‫ إلخ‬، ‫تعليمات حول المنحنيات والخطوط والنصوص بأنماط مختلفة‬
– like a programming language for printing!
– !‫مثل لغة برمجة للطباعة‬

• PostScript is the most common

Screen and page‫الشاشة والصفحة‬

• WYSIWYG
– what you see is what you get‫ما تراه هو ما تحصل عليه‬
– aim of word processing, etc..‫ إلخ‬، ‫الهدف من معالجة الكلمات‬
• but …
– screen: 72 dpi, landscape image
– print: 600+ dpi, portrait
• can try to make them similar
but never quite the same
• so … need different designs, graphics etc, for
screen and print
Scanners‫الماسحات الضوئية‬

• Take paper and convert it into a bitmap

• ‫خذ ورقة وقم بتحويلها إلى صورة نقطية‬

• Two sorts of scanner‫نوعان من الماسح الضوئي‬

– flat-bed: paper placed on a glass plate, whole page
converted into bitmap
– hand-held: scanner passed over paper, digitising strip
typically 3-4” wide

• Shines light at paper and note intensity of reflection

– colour or greyscale

• Typical resolutions from 600–2400 dpi

Scanners (ctd)

Used in
– desktop publishing for incorporating
photographs and other images

– document storage and retrieval systems,

doing away with paper storage
+ special scanners for slides and
photographic negatives
Optical character recognition
‫التعرف الضوئي على الحروف‬
• OCR converts bitmap back into text
• ‫يقوم‬OCR ‫بتحويل الصورة النقطية مرة أخرى إلى نص‬
• different fonts‫خطوط مختلفة‬
– create problems for simple “template
matching” algorithms
– more complex systems segment text,
decompose it into lines and arcs, and
decipher characters that way
• page format‫تنسيق الصفحة‬
– columns, pictures, headers and footers
Paper-based interaction
‫التفاعل الورقي‬
• paper usually regarded as output only
• ‫يعتبر الورق عادة كمخرجات فقط‬
• can be input too – OCR, scanning, etc.
• .‫ التعرف الضوئي على الحروف والمسح الضوئي وما إلى ذلك‬- ‫يمكن إدخاله أيضا‬
• Xerox PaperWorks
– glyphs – small patterns of /\\//\\\
• used to identify forms etc.
• used with scanner and fax to control applications

• more recently‫في اآلونة األخيرة‬

– papers micro printed - like watermarks
– ‫ مثل العالمات المائية‬- ‫أوراق مطبوعة دقيقة‬
• identify which sheet and where you are
– special ‘pen’ can read locations
• know where they are writing
 memory

short term and long term

speed, capacity, compression
formats, access
Short-term Memory – RAM
‫ ذاكرة الوصول العشوائي‬- ‫الذاكرة قصيرة المدى‬
• Random access memory (RAM)
– on silicon chips‫على رقائق السيليكون‬
– 100 nano-second access time‫ نانو ثانية‬100 ‫وقت وصول يصل إلى‬
– usually volatile (lose information if power turned off)
– )‫عادة متقلبة (تفقد المعلومات في حالة انقطاع التيار الكهربائي‬
– data transferred at around 100 Mbytes/sec
– ‫ ثانية‬/ ‫ ميغا بايت‬100 ‫نقل البيانات بمعدل‬

• Some non-volatile RAM used to store basic

set-up information
• ‫تُستخدم بعض ذاكرة الوصول العشوائي غير المتطايرة لتخزين معلومات‬
‫اإلعداد األساسية‬
• Typical desktop computers:
4gb to 128gb gb RAM
Long-term Memory – disks
‫ األقراص‬- ‫الذاكرة طويلة المدى‬
• magnetic disks‫األقراص الممغنطة‬
– floppy disks store around 1.4 Mbytes
– hard disks typically 40 Gbytes to 100s of Gbytes
access time ~10ms, transfer rate 100kbytes/s

• optical disks‫األقراص الضوئية‬

– use lasers to read and sometimes write
– more robust that magnetic media
– CD-ROM
- same technology as home audio, ~ 600 Gbytes
– DVD - for AV applications, or very large files
Blurring boundaries

• PDAs
– often use RAM for their main memory

• Flash-Memory
– used in PDAs, cameras etc.
– silicon based but persistent
– plug-in USB devices for data transfer
speed and capacity‫السرعة والقدرة‬

• what do the numbers mean?

• some sizes (all uncompressed) …

– this book, text only ~ 320,000 words, 2Mb
– the Bible ~ 4.5 Mbytes
– scanned page ~ 128 Mbytes
• (11x8 inches, 1200 dpi, 8bit greyscale)
– digital photo ~ 10 Mbytes
• (2–4 mega pixels, 24 bit colour)
– video ~ 10 Mbytes per second
• (512x512, 12 bit colour, 25 frames per sec)
virtual memory‫ذاكرة افتراضية‬
• Problem:
– running lots of programs + each program large
– ‫ كل برنامج كبير‬+ ‫تشغيل الكثير من البرامج‬
– not enough RAM‫ال يكفي ذاكرة الوصول العشوائي‬

• Solution - Virtual memory :

• :‫ الذاكرة االفتراضية‬- ‫الحل‬
– store some programs temporarily on disk
– ‫تخزين بعض البرامج بشكل مؤقت على القرص‬
– makes RAM appear bigger
– ‫يجعل ذاكرة الوصول العشوائي تبدو أكبر‬

• But … swapping
– program on disk needs to run again
– copied from disk to RAM
– slows t h i n g s d o w n
Compression‫ضغط‬
• reduce amount of storage required
• ‫تقليل كمية التخزين المطلوبة‬
• lossless‫بدون فقدان بيانات‬
– recover exact text or image – e.g. GIF, ZIP
– ‫ على سبيل المثال‬- ‫استعادة النص أو الصورة بالضبط‬GIF ،ZIP
– look for commonalities:
• text: AAAAAAAAAABBBBBCCCCCCCC 10A5B8C
• video: compare successive frames and store change
• lose‫تخسر‬
– recover something like original – e.g. JPEG, MP3
– ‫ على سبيل المثال‬- ‫استعادة شيء مثل األصل‬JPEG ،MP3
– exploit perception
• JPEG: lose rapid changes and some colour
• MP3: reduce accuracy of drowned out notes
Storage formats – text‫قراءة‬
‫ نص‬- ‫تنسيقات التخزين‬
• ASCII - 7-bit binary code for to each letter and
character
• UTF-8 - 8-bit encoding of 16 bit character set
• RTF (rich text format)
- text plus formatting and layout information
• SGML (standardized generalised markup language)
- documents regarded as structured objects
• XML (extended markup language)
- simpler version of SGML for web applications
Storage formats – media‫قراءة‬
‫ الوسائط‬- ‫تنسيقات التخزين‬
• Images:
– many storage formats :
(PostScript, GIFF, JPEG, TIFF, PICT, etc.)
– plus different compression techniques
(to reduce their storage requirements)

• Audio/Video
– again lots of formats :
(QuickTime, MPEG, WAV, etc.)
– compression even more important
– also ‘streaming’ formats for network delivery
methods of access

• large information store

– long time to search => use index
– what you index -> what you can access
• simple index needs exact match
• forgiving systems:
– Xerox “do what I mean” (DWIM)
– SOUNDEX – McCloud ~ MacCleod
• access without structure …
– free text indexing (all the words in a document)
– needs lots of space!!
 processing and networks

finite speed (but also Moore’s law)

limits of interaction
networked computing
Finite processing speed
‫سرعة معالجة محدودة‬
• Designers tend to assume fast processors, and
make interfaces more and more complicated
• ‫ وجعل الواجهات أكثر تعقيدًا‬، ‫يميل المصممون إلى افتراض معالجات سريعة‬

• But problems occur, because processing cannot

keep up with all the tasks it needs to do
• ‫ ألن المعالجة ال يمكنها مواكبة جميع المهام التي تحتاج إلى القيام‬، ‫لكن المشاكل تحدث‬
‫بها‬
– cursor overshooting because system has buffered
keypresses
– icon wars - user clicks on icon, nothing happens,
clicks on another, then system responds and
windows fly everywhere

• Also problems if system is too fast - e.g. help

screens may scroll through text much too rapidly
to be read
Moore’s law‫مهم‬

• computers get faster and faster!

• 1965 …
– Gordon Moore, co-founder of Intel, noticed a pattern
– processor speed doubles every 18 months
– PC … 1987: 1.5 Mhz, 2002: 1.5 GHz
• similar pattern for memory
– but doubles every 12 months!!
– hard disk … 1991: 20Mbyte : 2002: 30 Gbyte
• baby born today
– record all sound and vision
– by 70 all life’s memories stored in a grain of dust!

/e3/online/moores-law/
the myth of the infinitely
fast machine
‫أسطورة اآللة السريعة بال حدود‬
• implicit assumption … no delays
an infinitely fast machine
• what is good design for real machines?
• good example … the telephone :
– type keys too fast
– hear tones as numbers sent down the line
– actually an accident of implementation
– emulate in deisgn
Limitations on interactive‫مهم‬
performance
‫قيود على األداء التفاعلي‬
Computation bound‫حساب ملزم‬
– Computation takes ages, causing frustration for the user
Storage channel bound‫قناة التخزين ملزمة‬
– Bottleneck in transference of data from disk to memory
Graphics bound‫الرسومات ملزمة‬
– Common bottleneck: updating displays requires a lot of
effort - sometimes helped by adding a graphics co-
processor optimised to take on the burden
Network capacity‫قدرة الشبكة‬
– Many computers networked - shared resources and files,
access to printers etc. - but interactive performance can be
reduced by slow network speed
Networked computing‫مهم‬
‫الحوسبة الشبكية‬
Networks allow access to …
• large memory and processing
• other people (groupware, email)
• shared resources – esp. the web

Issues
– network delays – slow feedback
– conflicts - many people update data
– unpredictability
The internet

• history …
– 1969: ARPANET US DoD, 4 sites
– 1971: 23; 1984: 1000; 1989: 10000
• common language (protocols):
– TCP – Transmission Control protocol
• lower level, packets (like letters) between machines
– IP – Internet Protocol
• reliable channel (like phone call) between programs on
machines
– email, HTTP, all build on top of these
 chapter 5

interaction design
basics
‫أساسيات تصميم التفاعل‬
 interaction design basics
• design::‫التصميم‬
– what it is, interventions, goals, constraints
– ‫ما هي التدخالت واألهداف والقيود‬
• the design process‫عملية التصميم‬
– what happens when‫ماذا يحدث عندما‬
• users
– who they are, what they are like …
• scenarios‫سيناريوهات‬
– rich stories of design‫قصص ثرية عن التصميم‬
• navigation‫التنقل‬
– finding your way around a system
– ‫تجد طريقك حول النظام‬
• iteration and prototypes
• ‫التكرار والنماذج األولية‬
– never get it right first time! ‫ال تحصل عليه بالشكل الصحيح من المرة‬
!‫األولى‬
interactions and interventions
‫التفاعالت والتدخالت‬
design interactions not just interfaces
‫تفاعالت التصميم وليس الواجهات فقط‬
not just the immediate interaction‫ليس فقط التفاعل الفوري‬
e.g. stapler in office – technology changes interaction style
• manual: write, print, staple, write, print, staple, …
• electric: write, print, write, print, …, staple

designing interventions not just artefacts

‫تصميم التدخالت وليس المصنوعات اليدوية فقط‬
not just the system, but also …... ‫ ولكن أيضًا‬، ‫ليس فقط النظام‬
• documentation, manuals, tutorials
• ‫الوثائق والكتيبات والبرامج التعليمية‬
• what we say and do as well as what we make
• ‫ما نقوله ونفعله باإلضافة إلى ما نصنعه‬
‫?‪what is design‬‬

‫‪achieving goals within constraints‬‬

‫تحقيق األهداف ضمن القيود‬

‫األهداف ‪ -‬الغرض‪• goals - purpose‬‬

‫‪– who is it for, why do they want it‬‬
‫لمن هو ‪ ،‬لماذا يريدون ذلك –‬
‫القيود‪• constraints‬‬
‫المواد والمنصات‪– materials, platforms‬‬
‫اليوجد شي ناجح بشكل كامل او “ المقايضات‪• trade-offs‬‬
‫االستغناء عن شي لشي اخر‬
‫‪golden rule of design‬‬
‫القاعدة الذهبية للتصميم‬

‫‪understand your materials‬‬

‫فهم المواد الخاصة بك‬
‫يجب فهم قدراتك بشكل كامل والمتاح عندك وعند فريقك“‬
for Human–Computer Interaction

understand your materials

• understand computers‫فهم أجهزة الكمبيوتر‬

– limitations, capacities, tools, platforms
• understand people‫فهم الناس‬
– psychological, social aspects
– human error
• and their interaction …... ‫وتفاعلهم‬
To err is human ‫الوقوع في الخطأ‬
• accident reports .... ‫تقارير الحوادث‬
– aircrash, industrial accident, hospital mistake
– enquiry … blames … ‘human error’
• but …
– concrete lintel breaks because too much weight
– blame ‘lintel error’ ?
… no – design error
we know how concrete behaves under stress
• human ‘error’ is normal‫"الخطأ" البشري أمر طبيعي‬
– we know how users behave under stress
– so design for it!
• treat the user at least as well as physical
materials!
• !‫تعامل مع المستخدم على األقل باإلضافة إلى المواد المادية‬
Central message …

the user
‫نهتم باستخدام المستخدم‬
 The process of design
‫عملية التصميم‬

scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
Steps …... ‫خطوات‬
• requirements‫المتطلبات‬
– what is there and what is wanted …
– ... ‫ما هو هناك وما هو مطلوب‬
• analysis‫التحليالت‬
– ordering and understanding‫الترتيب والفهم‬
• design‫التصميم‬
– what to do and how to decide‫ماذا تفعل وكيف تقرر‬
• iteration and prototyping‫التكرار والنماذج األولية‬
– getting it right … and finding what is really needed!
– !‫ وإيجاد ما هو مطلوب حقًا‬... ‫الحصول عليها بشكل صحيح‬
• implementation and deployment‫التنفيذ والنشر‬
– making it and getting it out there‫صنعها وإخراجها هناك‬
… but how can I do it all ! !
! !‫ ولكن كيف يمكنني أن أفعل كل شيء‬...
• limited time  design trade-off
• ‫ مقايضة التصميم‬، ‫وقت محدود‬
• usability?‫سهولة االستخدام؟‬
– finding problems and fixing them? 
– ‫إيجاد المشاكل وحلها؟‬ 
– deciding what to fix?‫تحديد ما يجب إصالحه؟‬

• a perfect system is badly designed

• ‫تم تصميم نظام مثالي بشكل سيء‬
– too good  too much effort in design
– ‫ بذل الكثير من الجهد في التصميم‬، ‫جيد جدًا‬
 ‫تركيز المستخدم‪user focus‬‬

‫تعرف المستخدم الخاص بك‪know your user‬‬

‫شخصية‪personae‬‬
‫تحقيقات ثقافية‪cultural probes‬‬
know your user‫تعرف المستخدم الخاص بك‬

• who are they?

• probably not like you!
• talk to them
• watch them
• use your imagination
‫اختراع شخصيه الكترونيه الختبار ‪Persona‬‬
‫تطبيقك وعمل سيناريو خاص لكل شخصيه‬
‫‪• description of an ‘example’ user‬‬
‫وصف "مثال" المستخدم •‬
‫صا ‪– not necessarily a real person‬‬
‫ليس بالضرورة شخ ً‬
‫حقيقيًا‬
‫استخدام كمستخدم بديل‪• use as surrogate user‬‬
‫ماذا تعتقد بيتي‪– what would Betty think‬‬
‫التفاصيل مهمة‪• details matter‬‬
‫يجعلها "حقيقية"’‪– makes her ‘real‬‬
example persona
Betty is 37 years old, She has been Warehouse Manager for five
years and worked for Simpkins Brothers Engineering for twelve
years. She didn’t go to university, but has studied in her
evenings for a business diploma. She has two children aged 15
and 7 and does not like to work late. She did part of an
introductory in-house computer course some years ago, but it
was interrupted when she was promoted and could no longer
afford to take the time. Her vision is perfect, but her right-hand
movement is slightly restricted following an industrial accident 3
years ago. She is enthusiastic about her work and is happy to
delegate responsibility and take suggestions from her staff.
However, she does feel threatened by the introduction of yet
another new computer system (the third in her time at SBE).
cultural probes‫تحقيقات ثقافية‬

• direct observation‫المالحظة المباشرة‬

– sometimes hard‫صعب في بعض األحيان‬
• in the home‫في البيت‬
• psychiatric patients, …
• … ،‫مرضى نفسيين‬

• probe packs‫حزم التحقيق‬

– items to prompt responses
• e.g. glass to listen at wall, camera, postcard
– given to people to open in their own environment
they record what is meaningful to them

• used to …
– inform interviews, prompt ideas, enculture designers
‫سيناريوهات‪scenarios‬‬

‫‪stories for design‬‬

‫‪use and reuse‬‬
‫قصص للتصميم‬
‫االستخدام وإعادة االستخدام‬
 scenarios

• stories for design‫قصص للتصميم‬

– communicate with others‫تواصل مع االخرين‬
– validate other models‫التحقق من صحة النماذج األخرى‬
– understand dynamics‫فهم الديناميات‬

• linearity‫الخطية‬
– time is linear - our lives are linear - ‫الوقت خطي‬
‫حياتنا خطية‬
– but don’t show alternatives‫لكن ال تعرض البدائل‬
scenarios …

• what will users want to do?

• ‫ماذا يريد المستخدمون أن يفعلوا؟‬

• step-by-step walkthrough ‫اإلرشادات التفصيلية خطوة‬

‫بخطوة‬
– what can they see (sketches, screen shots)
– what do they do (keyboard, mouse etc.)
– what are they thinking?

• use and reuse throughout design

• ‫االستخدام وإعادة االستخدام خالل التصميم‬
scenario – movie player
Brian would like to see the new film “Moments of Significance”
and wants to invite Alison, but he knows she doesn’t like “arty”
films. He decides to take a look at it to see if she would like it
and so connects to one of the movie sharing networks. He uses
his work machine as it has a higher bandwidth connection, but
feels a bit guilty. He knows he will be getting an illegal copy of
the film, but decides it is OK as he is intending to go to the
cinema to watch it. After it downloads to his machine he takes
out his new personal movie player. He presses the ‘menu’
button and on the small LCD screen he scrolls using the arrow
keys to ‘bluetooth connect’ and presses the select button. On
his computer the movie download program now has an icon
showing that it has recognised a compatible device and he drags
the icon of the film over the icon for the player. On the player
the LCD screen says “downloading now”, a percent done
indicator and small whirling icon. … … …
also play act …... ‫تلعب أيضا التمثيل‬
• mock up device‫جهاز محاكاة‬
• pretend you are doing it‫تتظاهر أنك تفعل ذلك‬
• internet-connected swiss army knife …
• ... ‫سكين الجيش السويسري المتصل باإلنترنت‬
but where is that thumb?

use toothpick as stylus

… explore the depths
‫ استكشاف األعماق‬...
• explore interaction‫اكتشف التفاعل‬
– what happens when

• explore cognition‫استكشاف اإلدراك‬

– what are the users thinking

• explore architecture‫استكشف الهندسة المعمارية‬

– what is happening inside
use scenarios to ..

• communicate with others‫تواصل مع االخرين‬

– designers, clients, users

• validate other models‫التحقق من صحة النماذج األخرى‬

– ‘play’ it against other models

• express dynamics
– screenshots – appearance
– scenario – behaviour
linearity‫تتابع‬
Scenarios – one linear path through system
‫ مسار خطي واحد عبر النظام‬- ‫السيناريوهات‬

Pros:
– life and time are linear
– easy to understand (stories and narrative are
natural)
– concrete (errors less likely)
Cons:
– no choice, no branches, no special conditions
– miss the unintended

• So:
– use several scenarios
– use several methods
 the systems

info and help management messages

start

navigation design
add user remove user

local structure – single screen

‫ شاشة واحدة‬- ‫الهيكل المحلي‬
global structure – whole site
main remove
‫ الموقع بأكمله‬- ‫الهيكل العالمي‬
confirm
screen user

add user
levels

• widget choice
– menus, buttons etc.
• screen design
• application navigation design
• environment
– other apps, O/S
the web …

• widget choice • elements and tags

– <a href=“...”>

• screen design • page design

• navigation design • site structure
• environment • the web, browser,
external links
physical devices

• widget choice • controls

– buttons, knobs, dials

• screen design • physical layout

• navigation design • modes of device
• environment • the real world
think about structure‫فكر في الهيكل‬

• within a screen‫داخل الشاشة‬

– later ...
• local
– looking from this screen out
• global
– structure of site, movement between
screens
• wider still
– relationship with other applications
‫‪local‬‬

‫‪from one screen looking out‬‬

‫من شاشة واحدة تنظر للخارج‬
‫من الصفحه االساسيه تصل االى اخر صفحه من “‬
‫شاشه واحده‬
‫البحث عن الهدف‪goal seeking‬‬
‫تتبع صفحه صفحه‬

‫‪goal‬‬
‫‪start‬‬
goal seeking

goal
start

progress with local knowledge only ...

goal seeking

goal
start

… but can get to the goal

goal seeking

goal
start

… try to avoid these bits!

 four golden rules‫أربع قواعد ذهبية‬

• knowing where you are‫معرفة مكانك‬

• ‫موقع‬/‫معرفه انت باي قسم في يرنامج‬
• knowing what you can do‫معرفة ما يمكنك القيام به‬

• knowing where you are going‫معرفة إلى أين أنت ذاهب‬

– or what will happen
• knowing where you’ve been‫معرفة اين ستكون‬
– or what you’ve done
 where you are – breadcrumbs

shows path through web site hierarchy

‫يظهر المسار من خالل التسلسل الهرمي لموقع الويب‬
top level category sub-category
web site this page

live links
to higher
levels
beware the big button trap

things other things

the thing from

more things
outer space

• where do they go?

– lots of room for extra text!
modes

• lock to prevent accidental use …

– remove lock - ‘c’ + ‘yes’ to confirm
– frequent practiced action
• if lock forgotten
– in pocket ‘yes’ gets pressed
– goes to phone book
– in phone book …
‘c’ – delete entry
‘yes’ – confirm
… oops !
global

between screens
within the application
‫بين الشاشات‬
‫داخل التطبيق‬
hierarchical diagrams ‫المخططات الهرمية‬

the system

info and help management messages

add user remove user

hierarchical diagrams ctd.

• parts of application‫أجزاء من التطبيق‬

– screens or groups of screens

• typically functional separation

the systems

info and help management messages

add user remove user

navigating hierarchies
‫التنقل في التسلسالت الهرمية‬
• deep is difficult!

• misuse of Miller’s 7 ± 2
– short term memory, not menu size

• optimal?
– many items on each screen
– but structured within screen

see /e3/online/menu-breadth/
think about dialogue

what does it mean in UI design?

Minister: do you name take this woman …

Man: I do
Minister: do you name take this man …
Woman: I do
Minister: I now pronounce you man and wife
think about dialogue

what does it mean in UI design?

Minister: do you name take this woman …

• marriage service
• general flow, generic – blanks for names
• pattern of interaction between people
• computer dialogue
• pattern of interaction between users and system
• but details differ each time
network diagrams

main remove
confirm
screen user

add user

• show different paths through system

• ‫تظهر مسارات مختلفة من خالل النظام‬
network diagrams ctd.
• what leads to what‫ما يقود إلى ماذا‬
• what happens when‫ماذا يحدث عندما‬
• including branches‫بما في ذلك الفروع‬
• more task oriented then hierarchy
• ‫أكثر توجها نحو المهام ثم التسلسل الهرمي‬
main remove
confirm
screen user

add user
wider still‫ال يزال أوسع‬

between applications
and beyond ...
‫بين التطبيقات‬
... ‫وما بعدها‬
wider still …

• style issues::‫قضايا النمط‬

– platform standards, consistency
• functional issues‫القضايا الوظيفية‬
– cut and paste
• navigation issues‫قضايا المالحة‬
– embedded applications
– links to other apps … the web
 Dix , Alan

Finlay, Janet
Abowd, Gregory
Beale, Russell

screen design and layout

‫تصميم الشاشة وتخطيطها‬
basic principles
grouping, structure, order
alignment
use of white space
‫المبادئ األساسية‬
‫ الترتيب‬، ‫ الهيكل‬، ‫التجمع‬
ABCDEFGHIJKLM
NOPQRSTUVWXYZ ‫انتقام‬
‫استخدام المساحات البيضاء‬
basic principles‫المبادئ األساسية‬

• ask
– what is the user doing?

• think
– what information, comparisons, order

• design
– form follows function
available tools‫األدوات المتاحة‬

• grouping of items‫تجميع العناصر‬

• order of items ‫ترتيب العناصر‬
• decoration - fonts, boxes etc.
• .‫ الخطوط والمربعات وما إلى ذلك‬- ‫الزخرفة‬
• alignment of items‫محاذاة العناصر‬
• white space between items
• ‫مسافة بيضاء بين العناصر‬
grouping and structure
‫التجمع والهيكل‬
logically together  physically together
‫ماديا معا‬ ‫معا منطقيا‬
Billing details: Delivery details:
Name Name
Address: … Address: …
Credit card no Delivery time

Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
order of groups and items
‫ترتيب المجموعات والعناصر‬
• think! - what is natural order

• should match screen order!

– use boxes, space etc.
– set up tabbing right!

• instructions
– beware the cake recipie syndrome!
… mix milk and flour, add the fruit
after beating them
decoration‫زخرفة‬

• use boxes to group logical items

• use fonts for emphasis, headings
• but not too many!!

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
alignment - text‫ نص‬- ‫محاذاة‬

• you read from left to right (English and

European)

 align left hand side

boring but
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography readable!
Wizard of Oz
Xena - Warrior Princess

Willy Wonka and the Chocolate Factory

Winston Churchill - A Biography
Wizard of Oz
fine for special effects Xena - Warrior Princess
but hard to scan
alignment - names

• Usually scanning for surnames

 make it easy!
• !‫يجعل األمر سهال‬ ‫عادة ما يكون البحث عن ألقاب‬
Alan Dix


Janet Finlay
Gregory Abowd
Dix , Alan

Finlay, Janet


Russell Beale Abowd, Gregory
Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
alignment - numbers

532.56
think purpose! 179.3
256.317
which is biggest? 15
73.948
1035
3.142
497.6256
alignment - numbers

visually:
627.865
long number = big number 1.005763
382.583
align decimal points 2502.56
or right align integers 432.935
2.0175
652.87
56.34
multiple columns‫أعمدة متعددة‬

• scanning across gaps hard:

(often hard to avoid with large data base fields)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 2

• use leaders

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 3

• or greying (vertical too)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 4

• or even (with care!) ‘bad’ alignment

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
white space - the counter

WHAT YOU SEE

white space - the counter

WHAT YOU SEE

THE GAPS BETWEEN

space to separate
space to structure
space to highlight
physical controls‫ازرار فعليه‬

• grouping of items
–defrost
defrostsettings
settings
– type of food
type of food
– time to cook
time to cook
physical controls

• grouping of items
• order of items
1)type
1) typeofofheating
heating
1
2) temperature
2) temperature
3) time to cook
3) time to cook
4) start 2
4) start
3

4
physical controls

• grouping of items
• order of items
• decoration
– different colours
different colours for
for different
different functions
functions
– lines around related
lines around related
buttons(temp up/down)
buttons
physical controls

• grouping of items
• order of items
• decoration
• alignment
– centered text in buttons
centred text in buttons
? easy to scan ?
? easy to scan ?
physical controls

• grouping of items
• order of items
• decoration
• alignment
• white space
– gaps to aid grouping
gaps to aid grouping
 user action and control
‫عمل المستخدم والتحكم فيه‬

entering information‫إدخال المعلومات‬

knowing what to do‫تعرف ماذا تفعل‬
affordances‫النفقات‬
entering information
Name: Alan Dix
Address: Lancaster
• forms, dialogue boxes


– presentation + data input
– similar layout issues Name: Alan Dix
– alignment - N.B. different label lengths Address: Lancaster

• logical layout
– use task analysis (ch15)
– groupings
?
Name: Alan Dix
Address: Lancaster

– natural order for entering information

• top-bottom, left-right (depending on culture)
• set tab order for keyboard entry

N.B. see extra slides for widget choice

knowing what to do‫تعرف ماذا تفعل‬

• what is active what is passive

– where do you click
– where do you type
• consistent style helps
– e.g. web underlined links
• labels and icons
– standards for common actions
– language – bold = current state or action
Affordances‫من الرؤيه تعرف عمله‬

mug handle
• psychological term
‘affords’
• for physical objects grasping
– shape and size suggest actions
• pick up, twist, throw
– also cultural – buttons ‘afford’ pushing
• for screen objects
– button–like object ‘affords’ mouse click
– physical-like objects suggest use
• culture of computer use
– icons ‘afford’ clicking
– or even double clicking … not like real buttons!
 appropriate appearance
‫المظهر المناسب‬

presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation
presenting information
‫تقديم المعلومات‬
• purpose matters name size
– sort order (which column, numeric alphabetic) chap10
chap1 12
17
– text vs. diagram chap10
chap5 16
12
chap11
chap1 17
51
– scatter graph vs. histogram chap12
chap14 262
22
chap13
chap20 27
83
• use paper presentation principles! chap14
chap8
……
32
22
…

• but add interactivity

– softens design choices
• e.g. re-ordering columns
• ‘dancing histograms’ (chap 21)
aesthetics and utility
‫جماليات وفائدة‬
• aesthetically pleasing designs
– increase user satisfaction and improve productivity
• beauty and utility may conflict
– mixed up visual styles  easy to distinguish
– clean design – little differentiation  confusing
– backgrounds behind text
… good to look at, but hard to read
• but can work together
– e.g. the design of the counter
– in consumer products – key differentiator (e.g. iMac)
colour and 3D

• both often used very badly!!‫كالهما يستخدم بشكل سيء للغاية‬

• colour
– older monitors limited palette
– colour over used because ‘it is there’
– beware colour blind!
– use sparingly to reinforce other information
• 3D effects
– good for physical information and some graphs
– but if over used …
e.g. text in perspective!! 3D pie charts
bad use of colour

• over use - without very good reason (e.g. kids’ site)

• colour blindness
• poor use of contrast
• do adjust your set!
– adjust your monitor to greys only
– can you still read your screen?
across countries and cultures
‫عبر البلدان والثقافات‬
• localisation & internationalisation
– changing interfaces for particular cultures/languages
• globalisation
– try to choose symbols etc. that work everywhere

• simply change language?

– use ‘resource’ database instead of literal text
… but changes sizes, left-right order etc.
• deeper issues
– cultural assumptions and values
– meanings of symbols
– e.g tick and cross … +ve and -ve in some cultures
… but … mean the same thing (mark this) in others

 
 HCI:
GESTALT PRINCIPLES

1
MULTI-STABILITY ‫متعدد‬
‫االستقرار‬

• What do you recognize first?

• ‫ماذا تعرف أوال؟‬
– An apple
– A woman
– A man
– All of them ???
• Human mind seeks for PATTERNS,
avoid UNCERTAINTY.
، ‫عقل اإلنسان يبحث عن أنماط‬
.‫تجنب عدم اليقين‬
INVARIANCE‫التفاوت‬

• What do you recognize first?

– A kitty
– Other black animals
• We’re good at recognizing
SIMILARITIES and DIFFERENCES
‫نحن جيدون في التعرف‬
‫أوجه التشابه واالختالفات‬
Gestalt Principles
 Proximity‫القرب‬
 Similarity‫تشابه‬
 Continuity‫استمرارية‬
 Closure‫إنهاء‬
 Symmetry‫تناظر‬
 Figure/Ground‫ارض االرقام‬
 Common Fate‫مصي موحد‬ ‫ر‬

Gestalt is the German word for “shape” or “figure”

‫الت ي‬
"‫تعت "الشكل" أو "الشكل‬ ‫ه الكلمة األلمانية ي‬
‫الجشطالت ي‬ 4
Proximity‫القرب‬//‫المسافات‬
 The relative distance between objects in a display
affects our perception of whether and how objects
are organized into sub-groups.
 ‫تؤثر المسافة النسبية ربي الكائنات يف العرض عىل إدراكنا لما إذا‬
.‫كان يتم تنظيم الكائنات يف مجموعات فرعية وكيفية تنظيمها‬
Proximity

6
Proximity

7
Proximity

8
Proximity

9
Proximity
 UI designers want to group similar things. This
firewall policy
 .‫يريد مصممو واجهة المستخدم تجميع أشياء متشابهة‬
‫سياسة جدار الحماية هذه‬

10
PROXIMIT Y
Head menu
Sub menu
List Items
Hierarchy of components
PROXIMIT Y
THE DISTANCE OF:
Characters
Words
Lines
Paragraphs
Same level components
Different level of components
Similarity‫تشابه‬
 Objects that look similar appear grouped.
 .‫الت تبدو متشابهة مجمعة‬
‫تظهر الكائنات ي‬

13
Similarity

14
Similarity

15
Similarity

16
Similarity

17
 Similarity:
Proximity: Buttons have same font
Buttons are close to each and color so appear
other so appear grouped grouped

15
 Similarity: Same color
indicating that both
are related to on/off
state.

Proximity:
Output is grouped so
looks similar

Similarity: Same color

is confusing here
since it has nothing to
do with on/off state

19
Proximity VS. Similarity‫مهم‬
Proximity VS. Similarity ,Can you Explore them here ?
Continuity
 We resolve ambiguity by adding in missing data in
such a way that we perceive whole objects. We are
biased towards perceiving continuous forms rather
than disconnected pieces.
 ‫نقوم بحل الغموض عن طريق إضافة البيانات المفقودة بطريقة‬
‫منحازون نحو إدراك األشكال‬
ً ‫ نحن‬.‫تجعلنا ندرك األشياء بأكملها‬
.‫المستمرة بدال من القطع المنفصلة‬

22
Continuity

23
Continuity

24
Continuity

25
Continuity

26
Continuity

We suppose that the

snake's body is
continuing under
the water, while the
artist did not draw it
that way.

27
Closure‫إنهاء‬
 We automatically try and close open figures so
they are seen as whole objects rather than bits of
line.
 ‫المفتوحة بحيث ُينظر إليها عىل‬
ً ‫األشكال‬ ‫إغالق‬ ‫ا‬ ً
‫تلقائي‬ ‫نحاول‬
.‫أنها كائنات كاملة بدال من أجزاء من الخطوط‬

28
Closure

29
Closure

30
Despite the occlusion
the above icon still
looks like a circle
26
Symmetry‫تناظر‬
 We tend to parse complex images in a way that
reduces complexity. Even if there are multiple
interpretations, our brain tries to pick the simplest
one.
 ‫ حت‬.‫نميل إىل تحليل الصور المعقدة بطريقة تقلل من التعقيد‬
‫ فإن دماغنا يحاول اختيار‬، ‫تفسيات متعددة‬
‫ر‬ ‫لو كانت هناك‬
.‫أبسطها‬

32
Symmetry

33
Symmetry

34
Symmetry

35
Symmetry

36
Symmetry

37
Both of these
appear as
circles despite
both of them
being made up
of two separate
colors

33
Figure/Ground
 Our brains try and separate images into a
foreground and a background.
 .‫تحاول أدمغتنا فصل الصور إىل مقدمة وخلفية‬

34
Figure/Ground

35
Figure/Ground

41
Figure/Ground

42
Common Fate
 Similar to proximity and similarity, but concerning
moving objects. Things that move with similar
patterns are seen as grouped.
 .‫ ولكن فيما يتعلق باألجسام المتحركة‬، ‫يشبه القرب والتشابه‬
.‫تعتي مجمعة‬
‫الت تتحرك بأنماط متشابهة ر‬ ‫األشياء ي‬

43
Common Fate

44
Principles often happen together

42
https://www.gapminder.org/tools//#$chart-type=bubbles
43
Questions?

48
 chapter 10

Universal Design
‫تصميم عالمي‬
‫‪• Universal design is about designing‬‬
‫‪systems so that they can be used by‬‬
‫‪anyone in any circumstance.‬‬
‫التصميم العام يدور حول تصميم األنظمة بحيث يمكن ألي شخص •‬
‫استخدامها في أي ظرف من الظروف‪.‬‬
‫سؤال اذكؤ تقنيه طبقت التصميم العالمي به؟الجوال •‬
• Universal design means
designing for diversity,
including:
• ، ‫يعني التصميم الشامل التصميم من أجل التنوع‬
:‫بما في ذلك‬
– people with sensory, physical
or cognitive impairment
– ‫األشخاص الذين يعانون من ضعف حسي أو جسدي‬
‫أو إدراكي‬
– people of different ages
– ‫األشخاص الذين يعانون من ضعف حسي أو جسدي‬
‫أو إدراكي‬
– people from different
cultures and backgrounds.
– .‫أشخاص من ثقافات وخلفيات مختلفة‬
7 universal design principles
- NCSW
- ‫ مبادئ تصميم عالمية‬7NCSW

1. equitable use‫ االستخدام العادل‬.1

– the design is useful to people with a range
of abilities. and appealing to all. No user is
excluded or stigmatized.
– ‫ وجذابة‬.‫التصميم مفيد لألشخاص الذين لديهم مجموعة من القدرات‬
.‫ ال يتم استبعاد أي مستخدم أو وصمه‬.‫للجميع‬
 7 universal design principles
- NCSW

2. flexibility in use‫ المرونة في االستخدام‬.2

– choice of methods of use and adaptively to
the user’s pace, precision and custom.
– .‫اختيار طرق االستخدام والتكيف مع وتيرة المستخدم ودقته وتخصيصه‬
7 universal design principles
3. simple and intuitive to use
‫ بسيطة وسهلة االستخدام‬.3
– regardless of the knowledge,
experience, language or level of
concentration of the user.
– ‫بغض النظر عن المعرفة أو الخبرة أو اللغة أو‬
.‫مستوى تركيز المستخدم‬
7 universal design principles

4. perceptible information‫ المعلومات الملموسة‬.4

– the design should provide effective
communication of information
– ‫يجب أن يوفر التصميم التواصل الفعال للمعلومات‬
– (e.g. graphic, verbal, text, touch).
7 universal design principles

5. tolerance for error‫ التسامح مع الخطأ‬.5

– minimizing the impact and damage caused
by mistakes or unintended behavior.
– ‫التقليل من التأثير والضرر الناجمين عن األخطاء أو السلوك غير‬
.‫المقصود‬
7 universal design principles

6. low physical effort‫ انخفاض الجهد البدني‬.6

-minimizing physical effort and fatigue
‫ تقليل المجهود البدني والتعب‬-
7 universal design principles
7. size and space for approach and use
‫ الحجم والفضاء للنهج واالستخدام‬.7
– Regardless of body size, posture or
mobility.
– .‫بغض النظر عن حجم الجسم أو الموقف أو الحركة‬
• All physical components should be comfortably
reachable by seated or standing users.
• ‫يجب أن تكون جميع المكونات المادية في متناول المستخدمين الجالسين أو‬
.‫الواقفين‬
Multi-modal systems input
‫أنظمة متعددة الوسائط‬
• Multi-modal systems are those that use
more than one human input channel in
the interaction.
• ‫األنظمة متعددة الوسائط هي تلك التي تستخدم أكثر من قناة إدخال‬
.‫بشرية في التفاعل‬
• These systems may, for example, use:
– – speech
– – non-speech sound
– – touch
– – handwriting
Multi-Sensory Systems
‫أنظمة متعددة الحواس‬output
• More than one sensory channel in interaction
• ‫أكثر من قناة حسية في التفاعل‬
– e.g. sounds, text, hypertext, animation, video, gestures,
vision
• Used in a range of applications::‫تستخدم في مجموعة من التطبيقات‬
– particularly good for users with special needs, and virtual
reality
– ‫جيد بشكل خاص للمستخدمين ذوي االحتياجات الخاصة والواقع االفتراضي‬
• Will cover‫سوف تغطي‬
– general terminology‫المصطلحات العامة‬
– speech
– non-speech sounds
– handwriting
• considering applications as well as principles
• ‫النظر في التطبيقات وكذلك المبادئ‬
 Usable Senses‫الحواس القابلة لالستخدام‬
The 5 senses (sight, sound, touch, taste and smell) are
used by us every day
‫ الشم) كل يوم‬، ‫ الذوق‬، ‫ اللمس‬، ‫ الصوت‬، ‫نستخدم الحواس الخمس (البصر‬
– each is important on its own‫كل منها مهم بمفرده‬
– together, they provide a fuller interaction with the natural
world
– ‫تفاعًل أكمل مع العالم الطبيعي‬
ً ‫ يوفران‬، ‫معًا‬

Computers rarely offer such a rich interaction

‫نادرا ما تقدم أجهزة الكمبيوتر مثل هذا التفاعل الغني‬
ً
Can we use all the available senses? ‫هل يمكننا استخدام كل الحواس‬
‫المتاحة؟‬
– ideally, yes‫ نعم‬، ‫من الناحية المثالية‬
– practically – no‫ ال‬- ‫عمليا‬

We can use • sight • sound • touch (sometimes)

We cannot (yet) use • taste • smell
 Multi-modal vs. Multi-media
‫متعدد الوسائط مقابل الوسائط المتعددة‬
• Multi-modal systems‫أنظمة متعددة الوسائط‬
– use more than one sense (or mode ) of interaction
– ‫استخدام أكثر من حاسة (أو نمط) للتفاعل‬
e.g. visual and aural senses: a text processor may speak the
words as well as echoing them to the screen

• Multi-media systems‫أنظمة الوسائط المتعددة‬

– use a number of different media to communicate
information
– ‫استخدام عدد من الوسائط المختلفة لتوصيل المعلومات‬
e.g. a computer-based teaching system:may use video,
animation, text and still images: different media all using the
visual mode of interaction; may also use sounds, both speech
and non-speech: two more media, now using a different mode
 Speech

Human beings have a great and natural

mastery of speech
‫يتمتع البشر بإتقان كبير وطبيعي للكالم‬

– makes it difficult to appreciate the complexities

– ‫يجعل من الصعب تقدير التعقيدات‬
but
– it’s an easy medium for communication
– ‫إنها وسيلة سهلة للتواصل‬
Structure of Speech‫هيكل الكالم‬

phonemes ‫الصوتيات‬
– 40 of them
– basic atomic units
– sound slightly different depending on the context
they are in, these larger units are …
allophones
– all the sounds in the language
– between 120 and 130 of them
– these are formed into …
morphemes
– smallest unit of language that has meaning.
Speech (cont’d)

Other terminology:
• prosody
– alteration in tone and quality
– variations in emphasis, stress, pauses and pitch
– impart more meaning to sentences.
• co-articulation
– the effect of context on the sound
– transforms the phonemes into allophones
• syntax – structure of sentences
• semantics – meaning of sentences
Speech Recognition Problems
‫مشاكل التعرف على الكالم‬
• Different people speak differently:
• :‫يتحدث األشخاص المختلفون بشكل مختلف‬
– accent, intonation, stress, idiom, volume, etc.
• The syntax of semantically similar sentences may vary.
• .‫قد يختلف بناء الجملة للجمل المتشابهة لغو ًيا‬
• Background noises can interfere..‫يمكن أن تتداخل ضوضاء الخلفية‬
• People often “ummm.....” and “errr.....”
• Words not enough - semantics needed as well
• ‫ الدالالت مطلوبة أيضًا‬- ‫الكلمات ال تكفي‬
– requires intelligence to understand a sentence
– ‫يتطلب ذكاء لفهم الجملة‬
– context of the utterance often has to be known
– ‫غالبًا ما يجب معرفة سياق الكًلم‬
– also information about the subject and speaker
– ‫أيضا معلومات عن الموضوع والمتحدث‬
e.g. even if “Errr.... I, um, don’t like this” is recognised, it is a fairly useless piece
of information on it’s own
Speech Recognition: useful?
‫ مفيد؟‬:‫التعرف على الكالم‬
• Single user or limited vocabulary systems
e.g. computer dictation
• ‫مستخدم واحد أو أنظمة مفردات محدودة على سبيل المثال إمًلء الكمبيوتر‬
• Open use, limited vocabulary systems can work
satisfactorily
e.g. some voice activated telephone systems
• ‫ على سبيل‬، ‫يمكن ألنظمة االستخدام المفتوح والمفردات المحدودة أن تعمل بشكل مرضي‬
‫ بعض أنظمة الهاتف التي تعمل بالصوت‬.‫المثال‬
• general user, wide vocabulary systems …
… still a problem
• ‫ أنظمة مفردات واسعة…… ال تزال مشكلة‬، ‫مستخدم عام‬
• Great potential, however‫ ومع ذلك‬، ‫إمكانات كبيرة‬
– when users hands are already occupied
e.g. driving, manufacturing
– for users with physical disabilities
– lightweight, mobile devices
Speech Synthesis‫اصطناع الكالم‬

The generation of speech

Useful
– natural and familiar way of receiving information
– ‫طريقة طبيعية ومألوفة لتلقي المعلومات‬
Problems
– similar to recognition: prosody particularly
– ‫ عرض خاص‬:‫مشابه لالعتراف‬

Additional problems
– intrusive - needs headphones, or creates noise in the
workplace
– ‫ أو يحدث ضوضاء في مكان العمل‬، ‫ يحتاج إلى سماعات رأس‬- ‫تدخلي‬
– transient - harder to review and browse
– ‫ أصعب في المراجعة والتصفح‬- ‫عابر‬
Speech Synthesis: useful?
‫ مفيد؟‬:‫تركيب الكالم‬
Successful in certain constrained applications
when the user:
:‫ناج ًحا في بعض التطبيقات المقيدة عندما يقوم المستخدم بما يلي‬
– is particularly motivated to overcome problems
– ‫هو الدافع بشكل خاص للتغلب على المشاكل‬
– has few alternatives‫بدائل قليلة‬

Examples:
• screen readers‫قارئات الشاشة‬
– read the textual display to the user
utilised by visually impaired people
– ‫قراءة العرض النصي للمستخدم الذي يستخدمه ضعاف البصر‬
• warning signals‫إشارات التحذير‬
– spoken information sometimes presented to pilots whose
visual and haptic skills are already fully occupied
– ‫يتم تقديم المعلومات المنطوقة أحيانًا إلى الطيارين الذين تكون مهاراتهم البصرية واللمسية مشغولة‬
‫بالكامل بالفعل‬
Non-Speech Sounds ‫األصوات غير‬
‫الكالمية‬
boings, bangs, squeaks, clicks etc.

• commonly used for warnings and alarms

• ‫يشيع استخدامها للتحذيرات واإلنذارات‬

• Evidence to show they are useful

• ‫أدلة إلثبات أنها مفيدة‬
– fewer typing mistakes with key clicks
– ‫عدد أقل من أخطاء الكتابة مع النقرات على المفاتيح‬
– video games harder without sound
– ‫ألعاب الفيديو أصعب بدون صوت‬

• Language/culture independent, unlike speech

• ‫ على عكس الكالم‬، ‫ الثقافة مستقلة‬/ ‫اللغة‬
Non-Speech Sounds: useful?
‫ مفيدة؟‬:‫األصوات غير الكالمية‬
• Dual mode displays::‫يعرض الوضع المزدوج‬
– information presented along two different sensory
channels
– ‫المعلومات المقدمة على طول قناتين حسي مختلفتين‬
– redundant presentation of information
– ‫عرض زائدة عن الحاجة للمعلومات‬
– resolution of ambiguity in one mode through information in
another
– ‫حل الغموض في أحد األوضاع من خالل المعلومات في طريقة أخرى‬
• Sound good for‫صوت جيد لـ‬
– transient information‫معلومات عابرة‬
– background status information‫معلومات حالة الخلفية‬

e.g. Sound can be used as a redundant mode in the Apple

Macintosh; almost any user action (file selection, window
active, disk insert, search error, copy complete, etc.) can have
a different sound associated with it.
Auditory Icons‫أيقونات سمعية‬
• Use natural sounds to represent different types of object or
action
• ‫استخدم األصوات الطبيعية لتمثيل أنواع مختلفة من األشياء أو اإلجراءات‬
• Natural sounds have associated semantics which can be
mapped onto similar meanings in the interaction
e.g. throwing something away
~ the sound of smashing glass
• ‫تحتوي األصوات الطبيعية على دالالت مرتبطة يمكن تعيينها على معاني مماثلة في التفاعل على سبيل المثال‬
‫رمي شيء بعيدًا ~ صوت تحطيم الزجاج‬
• Problem: not all things have associated meanings
• ‫ ليست كل األشياء لها معاني مرتبطة‬:‫المشكلة‬

• Additional information can also be presented:

• :‫يمكن أيضًا تقديم معلومات إضافية‬
– muffled sounds if object is obscured or action is in the background
– ‫أصوات مكتومة إذا كان الكائن محجوبًا أو كان اإلجراء في الخلفية‬
– use of stereo allows positional information to be added
– ‫يسمح استخدام الستيريو بإضافة المعلومات الموضعية‬
SonicFinder for the Macintosh
SonicFinder ‫لماكنتوش‬
• items and actions on the desktop have associated
sounds
• ‫العناصر واإلجراءات على سطح المكتب لها أصوات مرتبطة‬
• folders have a papery noise‫المجلدات لها ضوضاء ورق‬
• moving files – dragging sound‫ سحب الصوت‬- ‫نقل الملفات‬
• copying – a problem …
sound of a liquid being poured into a receptacle
rising pitch indicates the progress of the copy
• ‫ صوت سائل يصب في وعاء يشير ارتفاع الصوت إلى تقدم النسخة‬.. ‫ مشكلة‬- ‫نسخ‬
• big files have louder sound than smaller ones
• ‫الملفات الكبيرة لها صوت أعلى من الصوت األصغر‬
touch
• haptic interaction ‫تفاعل لمسي‬
– cutaneous perception‫اإلدراك الجلدي‬
• tactile sensation; vibrations on the skin
– kinesthetics‫الحركية‬
• movement and position; force feedback
• information on shape, texture, resistance,
temperature, comparative spatial factors
• ‫معلومات عن الشكل والملمس والمقاومة ودرجة الحرارة والعوامل المكانية‬
‫المقارنة‬
• example technologies‫مثال على التقنيات‬
– electronic braille displays‫شاشات برايل اإللكترونية‬
– force feedback devices e.g. Phantom
• resistance, texture
Handwriting recognition
‫التعرف على خط اليد‬
Handwriting is another communication mechanism
which we are used to in day-to-day life
• ‫الكتابة اليدوية هي آلية اتصال أخرى اعتدنا عليها في الحياة اليومية‬
• Technology
– Handwriting consists of complex strokes and spaces
– ‫تتكون الكتابة اليدوية من ضربات ومسافات معقدة‬
– Captured by digitising tablet
– ‫تم التقاطها عن طريق رقمنة الجهاز اللوحي‬
• strokes transformed to sequence of dots
– large tablets available ‫األجهزة اللوحية الكبيرة المتاحة‬
• suitable for digitising maps and technical drawings
– smaller devices, some incorporating thin screens to
display the information
– ‫ بعضها يشتمل على شاشات رفيعة لعرض المعلومات‬، ‫أجهزة أصغر‬
• PDAs such as Palm Pilot
• tablet PCs
Handwriting recognition (ctd)

• Problems
– personal differences in letter formation
– ‫االختالفات الشخصية في تكوين الخطابات‬
– co-articulation effects‫آثار التعبير المشترك‬

• Breakthroughs::‫اختراقات‬
– stroke not just bitmap‫السكتة الدماغية ليس فقط الصورة النقطية‬
– special ‘alphabet’ – Graffeti on PalmOS

• Current state::‫الوضع الحالي‬

– usable – even without training‫ حتى بدون تدريب‬- ‫قابلة لالستخدام‬
– but many prefer keyboards!!‫لكن الكثيرين يفضلون لوحات المفاتيح‬
gesture‫إيماءة‬
• applications‫التطبيقات‬
– gestural input - e.g. “put that there”
– "‫ على سبيل المثال "ضع ذلك هناك‬- ‫إدخال إيمائي‬
– sign language‫لغة اإلشارة‬
• technology‫تقنية‬
– data glove‫قفاز البيانات‬
– position sensing devices e.g MIT Media Room
– ‫أجهزة استشعار الموقع مثل‬MIT Media Room
• benefits
– natural form of interaction – pointing
– ‫ التأشير‬- ‫الشكل الطبيعي للتفاعل‬
– enhance communication between signing and non-signing
users
– ‫تعزيز االتصال بين المستخدمين الموقعين وغير الموقعين‬
• problems
– user dependent, variable and issues of coarticulation
– ‫ ومتغير وقضايا الترابط‬، ‫يعتمد على المستخدم‬
Designing for Diversity‫التصميم من أجل التنوع‬
• The designer considers three key areas:
• :‫يأخذ المصمم في االعتبار ثالثة مجاالت رئيسية‬
• Designing for users with disabilities‫تصميم للمستخدمين ذوي االحتياجات الخاصة‬
• visual impairment‫مشاكل بصرية‬
• hearing impairment‫ضعف السمع‬
• physical impairment‫ضعف جسدي‬
• speech impairment‫اضطراب الكالم‬
• dyslexia‫عسر القراءة‬
• autism‫الخوض‬
• Designing for different age groups‫التصميم لمختلف الفئات العمرية‬
• Old people‫كبار السن‬
• Children‫أطفال‬
• Designing for cultural differences‫تصميم لالختالفات الثقافية‬
Designing for users with disabilities
‫تصميم للمستخدمين ذوي اإلعاقة‬
• visual impairment
– screen readers, SonicFinder
• hearing impairment
– text communication, gesture, captions
• physical impairment
– speech I/O, eyegaze, gesture, predictive systems (e.g. Reactive keyboard)
• speech impairment
– speech synthesis, text communication
• dyslexia‫عسر القراءة‬
– speech input, output
• autism
– communication, education
Designing for users with disabilities
visual impairment
 The rise in the use of graphical interfaces reduces the
possibilities for visually impaired users
 ‫إن زيادة استخدام الواجهات الرسومية يقلل من احتماالت المستخدمين المعاقين بصر ًيا‬
 Designing for users with disabilities
hearing impairment
 have little impact on the use of an interface
 ‫ما مدى ضآلة التأثير على استخدامنا للواجهة‬
 Captioning audio content making audio files easier and more
efficient to index and search
 ‫التسمية التوضيحية للمحتوى الصوتي مما يجعل فهرس ملفات الصوت والبحث باستخدام‬ACR
‫وأكثر كفاءة‬
 Designing for users with disabilities
physical impairment
 Users with physical disabilities vary in the amount of control and
movement over their hands ,impact in mouse control difficulty
 ‫المستخدمون الذين يعانون من إعاقات جسدية بدرجة كبيرة جدًا في مقدار التحكم والحركة على‬
‫ التأثير في صعوبة التحكم في الماوس‬، ‫أيديهم‬
 eyegaze system which tracks eye movements to control the
cursor,
 ‫تحكم في المؤشر باستخدام حركات نظام‬Iz System Witch Tracks A ،
 keyboard driver that can be attached to the user’s head.
 .‫رأس المستخدم مع برنامج تشغيل لوحة المفاتيح الذي يتم إرفاقه‬
 predictive system, such as the Reactive keyboard, cut the
typing requirement considerably
 ‫ قص متطلبات الكتابة القابلة للتهيئة‬، ‫ مثل لوحة المفاتيح التفاعلية‬، ‫النظام التنبئي‬
Designing for users with disabilities

 speech impairment
multimedia systems provide a number of tools for
communication, including synthetic speech and text-based
communication and conferencing systems
‫ بما في ذلك الكالم التركيبي‬، ‫توفر أنظمة الوسائط المتعددة عددًا من أدوات االتصال‬
‫وأنظمة االتصاالت والمؤتمرات القائمة على النصوص‬
Designing for users with disabilities
Dyslexia
 Users with cognitive disabilities such as dyslexia can find
textual information difficult
 ‫المستخدمون الذين يعانون من إعاقات معرفية مثل صعوبة اختبار‬Dyslexia Chan
Find
 Designing for users with disabilities
Autism
 affects a person’s ability to communicate and interact with people
around them and to make sense of their environment
 ‫التأثيرات تتواصل وتتفاعل مع قدرة الناس مع الناس من حولهم وبأقصى إحساس ببيئتهم‬
1. Social interaction – problems
2. Communication – problems
3. Imagination – problems
How might universal design of
technology assist people with autism?
‫كيف يمكن أن يساعد التصميم العالمي للتكنولوجيا‬
‫األشخاص المصابين بالتوحد؟‬
communication and education.
Designing for different age groups
• age groups
– older people e.g. disability aids, memory aids, communication
tools to prevent social isolation
– children e.g. appropriate input/output devices, involvement in
design process
 Older people:
• email and instant messaging, can provide social interaction in cases where lack
of mobility or speech difficulties and reduce face-to-face possibilities.
 Children
• Information in Graphics, sound and text, Pen-based interfaces, touch
or handwriting, may be easier for children than keyboard and mouse
Designing for cultural differences

 The other factors such as age, gender, race, sexuality, class, religion
and political persuasion, may all influence an individual’s response to a
system

e.g. interpretation and acceptability of language, cultural symbols,

gesture and colour
 ‫ على استجابة الفرد‬، ‫قد تؤثر العوامل األخرى مثل العمر والجنس والعرق والجنس والطبقة والدين واإلقناع السياسي‬
‫ على سبيل المثال تفسير وقبول اللغة والرموز الثقافية واإلشارة واللون‬، ‫لنظام ما‬

 The designer practice universal design which include language, cultural symbols,
gestures and use of color
 ‫ واإليماءات ولوننا‬، ‫ والرموز الثقافية‬، ‫يمارس المصمم لغة ساحرة التصميم العالمي‬
Exercise :
In the discussion board : 2 Marks ……. DUE before next lecture

1- Provide an example for any tech related product (with an image) . Then explain
which principle of (the universal design principles) does your example is satisfying?

‫ ثم اشرح أي مبدأ (مبادئ التصميم العام) يرضي مثالك؟‬.)‫ تقديم مثال ألي منتج متعلق بالتكنولوجيا (مع صورة‬-1
2- Provide an example for a product or an app that offers benefits for users with
disabilities
౨ - ‫قدم مثاالً لمنتج أو منتج أعلى يقدم مزايا للمستخدمين ذوي االحتياجات الخاصة‬
ESTABLISHING REQUIREMENTS
‫تحديد المتطلبات‬
 Overview
• The importance of requirements
• Different types of requirements
• Data gathering for requirements
• Data analysis and presentation
• Task description: Scenarios
Use Cases
Essential use cases
• Task analysis: HTA

www.id-book.com 2
 What, how and why?
What needs to be achieved?
‫ما الذي يجب تحقيقه؟‬
1. Understand as much as possible about users, task, context
2. ‫فهم قدر اإلمكان حول المستخدمين والمهمة والسياق‬

3. Produce a stable set of requirements

4. ‫قم بإعداد مجموعة مستقرة من المتطلبات‬

How can this be done?‫كيف يمكن القيام بذلك؟‬

• Data gathering activities‫أنشطة جمع البيانات‬

• Data analysis activities‫أنشطة تحليل البيانات‬

• Expression as ‘requirements’"‫التعبير على أنه "متطلبات‬

• All of this is iterative‫كل هذا تكراري‬

www.id-book.com 3
 What, how and why?
• Why bother?
Requirements
definition is the
stage where
failure occurs
most commonly
‫لماذا تهتم؟‬
‫تعريف المتطلبات هو‬
‫المرحلة التي يحدث فيها‬
‫الفشل بشكل شائع‬
Getting requirements right is crucial
‫الحصول على المتطلبات الصحيحة أمر بالغ األهمية‬
www.id-book.com 4
 Establishing requirements
• What do users want? What do users ‘need’?

Requirements need clarification, refinement, completion, re-scoping

‫ إعادة تحديد النطاق‬، ‫ استكمال‬، ‫ صقل‬، ‫المتطلبات تحتاج إلى توضيح‬
Exp:‫مثل توكلنا الصوره الشخصيه متطلب لكي اليتم التالعب بهوية الشخص‬

Input: Requirements document (maybe)

)‫ وثيقة المتطلبات (ربما‬:‫المدخالت‬
Output: stable requirements
‫ متطلبات مستقرة‬:‫اإلخراج‬

• Why ‘establish’?‫لماذا "إنشاء"؟‬

Requirements arise from understanding users’ needs

‫تنشأ المتطلبات من فهم احتياجات المستخدمين‬
Requirements can be justified & related to data
www.id-book.com 5
‫يمكن تبرير المتطلبات وترتبط بالبيانات‬
Requirements template
‫نموذج المتطلبات‬

www.id-book.com 6
 ‫‪Different kinds of requirements‬‬
‫أنواع مختلفة من المتطلبات‬
‫األشياء داخل النظام مثل"‪:‬الدفع‪,‬الطلب‪,‬تحديد منتج‪/ ,‬وظيفي‪• Functional: :‬‬
‫حذف منتج‬
‫ما يجب أن يفعله النظام‪—What the system should do‬‬

‫)‪• (Non-functional: security, response time...‬‬

‫األشياء المتعلقه بالنظام‪:‬الجماليات األمان الترتيب•‬
‫(غير وظيفي‪ :‬األمان ‪ ،‬وقت االستجابة ‪)...‬‬
‫‪• Data:‬‬
‫?‪—What kinds of data need to be stored‬‬
‫ما أنواع البيانات التي يجب تخزينها؟—‬

‫‪—How will they be stored (e.g.‬‬ ‫?)‪database‬‬

‫‪www.id-book.com‬‬ ‫‪7‬‬
 Different kinds of requirements
Environment or context of use::‫البيئة أو سياق االستخدام‬
• physical: dusty? noisy? vibration? light? heat? humidity? …. (e.g. ATM)
• ‫ (مثل‬.… ‫ متربة؟ مزعج؟ اهتزاز؟ ضوء؟ الحرارة؟ رطوبة؟‬:‫المادية‬ATM)

• social: sharing of files, of displays, in paper, across great distances,

synchronous, privacy for clients
• ‫ خصوصية للعمالء‬، ‫ متزامن‬، ‫ عبر مسافات بعيدة‬، ‫ في الورق‬، ‫ العروض‬، ‫ مشاركة الملفات‬:‫اجتماعي‬

• organisational: hierarchy, IT department’s attitude and remit, user support,

communications structure and infrastructure, availability of training
• ‫ وهيكل‬، ‫ ودعم المستخدم‬، ‫ وسلوك قسم تكنولوجيا المعلومات واختصاصاته‬، ‫ التسلسل الهرمي‬:‫التنظيمي‬
‫ وتوافر التدريب‬، ‫االتصاالت والبنية التحتية‬

www.id-book.com 8
 Different kinds of requirements
Users: Who are they?

— Characteristics: nationality, educational background, attitude to computers

—‫ الموقف من الكمبيوتر‬، ‫ الخلفية التعليمية‬، ‫ الجنسية‬:‫الخصائص‬

— System use: novice, expert, casual, frequent

—‫ متكرر‬، ‫ غير رسمي‬، ‫ خبير‬، ‫ مبتدئ‬:‫استخدام النظام‬

— Novice: prompted, constrained, clear

—‫ واضح‬، ‫ مقيد‬، ‫ موجه‬:‫المبتدئ‬

— Expert: flexibility, access/power

—‫ القوة‬/ ‫ الوصول‬، ‫ المرونة‬:‫خبير‬
— Frequent: short cuts‫ االختصارات‬:‫متكرر‬

— Casual/infrequent: clear menu paths

—‫ مسارات قائمة واضحة‬:‫ نادر‬/ ‫عرضي‬

9
 What are the users’ capabilities?
‫ما هي قدرات المستخدمين؟‬
Humans vary in many dimensions: :‫يختلف البشر في العديد من األبعاد‬
— size of hands may affect the size and positioning of input buttons
—‫قد يؤثر حجم العقارب على حجم أزرار اإلدخال وموضعها‬

— motor abilities may affect the suitability of certain input and output devices

—‫قد تؤثر القدرات الحركية على مالءمة بعض أجهزة اإلدخال واإلخراج‬
— height if designing a physical kiosk
—‫االرتفاع في حالة تصميم كشك فعلي‬

— strength - a child’s toy requires little strength to operate, but greater strength to
change batteries
—‫ ولكن تتطلب قوة أكبر لتغيير البطاريات‬، ‫ تتطلب لعبة الطفل القليل من القوة لتشغيلها‬- ‫القوة‬

— disabilities (e.g. sight, hearing, dexterity)

—)‫اإلعاقات (مثل البصر والسمع والبراعة‬

www.id-book.com 10
 Personas
• Capture a set of user characteristics (user profile)
• )‫التقاط مجموعة من خصائص المستخدم ( ملف تعريف المستخدم‬

• Not real people, but synthesised from real users

• ‫ ولكن تم توليفه من مستخدمين حقيقيين‬، ‫ليس أناسًا حقيقيين‬

• Should not be idealised‫ال ينبغي أن تكون مثالية‬

• Bring them to life with a name, characteristics, goals, personal

background
• ‫اجعلهم ينبضون بالحياة مع االسم والخصائص واألهداف والخلفية الشخصية‬

• Develop a small set of personas with one primary

• ‫تطوير مجموعة صغيرة من الشخصيات مع أساسي واحد‬

www.id-book.com 11
Example Persona

www.id-book.com 12
 Data gathering for requirements
‫جمع البيانات للمتطلبات‬
• Interviews:

— Props, e.g. sample scenarios of use,

prototypes, can be used in interviews
— ‫ في المقابالت‬، ‫ والنماذج األولية‬، ‫ على سبيل المثال يمكن استخدام نماذج سيناريوهات االستخدام‬، ‫الدعائم‬

— Good for exploring issues

— ‫جيد الستكشاف القضايا‬

— Development team members can connect with stakeholders

— ‫يمكن ألعضاء فريق التطوير التواصل مع أصحاب المصلحة‬

• Focus groups::‫مجموعات التركيز‬

— Group interviews‫مقابالت جماعية‬

— Good at gaining a consensus view and/or highlighting areas of conflict

— ‫ أو تسليط الضوء على مناطق الصراع‬/ ‫جيد في الحصول على رأي إجماع و‬

— But can be dominated by individuals

— ‫ولكن يمكن أن يهيمن عليها األفراد‬

www.id-book.com 13
 Data gathering for requirements
• Questionnaires::‫االستبيانات‬
— Often used in conjunction with other
techniques
— ‫غالبًا ما تستخدم جنبًا إلى جنب مع تقنيات أخرى‬
— Can give quantitative or qualitative data
— ‫يمكن أن تعطي بيانات كمية أو نوعية‬
— Good for answering specific questions from
a large, dispersed group of people
— ‫جيد لإلجابة على أسئلة محددة من مجموعة كبيرة ومتفرقة من الناس‬
• Researching similar products::‫البحث عن منتجات مماثلة‬
— Good for prompting requirements‫جيد للمطالبة بالمتطلبات‬

www.id-book.com 14
 Data gathering for requirements
• Direct observation::‫المالحظة المباشرة‬

— Gain insights into stakeholders’ tasks

— ‫اكتساب رؤى حول مهام أصحاب المصلحة‬

— Good for understanding the nature and

context of the tasks
— ‫جيد لفهم طبيعة وسياق المهام‬

— But, it requires time and commitment

from a member of the design team, and
it can result in a huge amount of data
— ‫ ويمكن أن ينتج عنه كمية هائلة من البيانات‬، ‫ولكنه يتطلب وقتًا والتزامًا من أحد أعضاء فريق التصميم‬

• Indirect observation::‫المالحظة غير المباشرة‬

— Not often used in requirements activity

— ‫ال تستخدم في كثير من األحيان في نشاط المتطلبات‬

— Good for logging current tasks

— ‫جيد لتسجيل المهام الحالية‬

www.id-book.com 15
Data gathering for requirements
Studying documentation: :‫وثائق الدراسة‬
— Procedures and rules are often written
down in manuals
—‫غال ًبا ما يتم تدوين اإلجراءات والقواعد في الكتيبات‬

— Good source of data about the steps

involved in an activity, and any
regulations governing a task
—‫ وأي لوائح تحكم مهمة ما‬، ‫مصدر جيد للبيانات حول الخطوات المتضمنة في النشاط‬

— Not to be used in isolation‫ال تستخدم بمعزل عن غيرها‬

— Good for understanding legislation, and

getting background information
—‫جيد لفهم التشريعات والحصول على معلومات أساسية‬

— No stakeholder time, which is a limiting

factor on the other techniques
—‫ وهو عامل مقيد للتقنيات األخرى‬، ‫ال يوجد وقت ألصحاب المصلحة‬ 16
Some examples

Cultural
probes
‫تحقيقات ثقافية‬

www.id-book.com 17
 Some examples
Ethnographic study, interviews, usability tests, and user
participation
‫دراسة إثنوغرافية ومقابالت واختبارات قابلية االستخدام ومشاركة المستخدم‬

www.id-book.com 18
 Contextual Inquiry Deleted
‫التحقيق السياقي‬
• An approach to ethnographic study where user is expert, designer is apprentice
• ‫ والمصمم متدربًا‬، ‫نهج للدراسة اإلثنوغرافية حيث يكون المستخدم خبيرًا‬

• A form of interview, but‫شكل من أشكال المقابلة ولكن‬

— at users’ workplace (workstation))‫في مكان عمل المستخدمين (محطة العمل‬

— 2 to 3 hours long‫ ساعات‬3 ‫ إلى‬2 ‫من‬

• Four main principles::‫أربعة مبادئ رئيسية‬

— Context: see workplace & what happens

—‫ انظر مكان العمل وما يحدث‬:‫السياق‬
— Partnership: user and developer collaborate
—‫ يتعاون المستخدم والمطور‬:‫الشراكة‬

— Interpretation: observations interpreted by user and developer together

—‫ المالحظات التي يفسرها المستخدم والمطور معًا‬:‫التفسير‬

— Focus: project focus to understand what to look for

—‫ التركيز على المشروع لفهم ما الذي تبحث عنه‬:‫التركيز‬

19
 Considerations for data gathering (1)
‫)مهم‬1( ‫اعتبارات خاصة بجمع البيانات‬
• Identifying and involving stakeholders:
users, managers, developers, customer reps?, union reps?, shareholders?
• ‫ والمساهمون؟‬، ‫ وممثلو االتحاد‬، ‫ وممثلو العمالء‬، ‫ والمطورون‬، ‫ والمديرون‬، ‫ المستخدمون‬:‫تحديد وإشراك أصحاب المصلحة‬

• Involving stakeholders: workshops, interviews, workplace studies, co-opt stakeholders onto the development team
• ‫ وإشراك أصحاب المصلحة في فريق التطوير‬، ‫ ودراسات مكان العمل‬، ‫ والمقابالت‬، ‫ ورش العمل‬:‫إشراك أصحاب المصلحة‬

• ‘Real’ users, not managers

• ‫المستخدمون "الحقيقيون" وليس المديرون‬

• Political problems within the organisation

• ‫المشاكل السياسية داخل المنظمة‬

• Dominance of certain stakeholders

• ‫هيمنة بعض أصحاب المصلحة‬

• Economic and business environment changes

• ‫التغييرات في البيئة االقتصادية والتجارية‬

• Balancing functional and usability demands

• ‫موازنة المتطلبات الوظيفية وقابلية االستخدام‬

www.id-book.com 20
Considerations for data gathering (2)‫مهم‬
• Requirements management: version control, ownership
• ‫ الملكية‬، ‫ التحكم في اإلصدار‬:‫إدارة المتطلبات‬
• Communication between parties::‫التواصل بين األطراف‬
— within development team‫ضمن فريق التطوير‬
— with customer/user‫ المستخدم‬/ ‫مع العميل‬
— between users… different parts of an organisation use different
terminology
— ‫ تستخدم أجزاء مختلفة من المنظمة مصطلحات مختلفة‬... ‫بين المستخدمين‬
• Domain knowledge distributed and implicit :
• :‫معرفة المجال موزعة وضمنية‬
— difficult to dig up and understand‫من الصعب حفرها وفهمها‬
— knowledge articulation: how do you walk?
— ‫ كيف تمشي؟‬:‫صياغة المعرفة‬
• Availability of key people‫توافر األشخاص الرئيسيين‬

www.id-book.com 21
 Data gathering guidelines
‫إرشادات جمع البيانات‬
• Focus on identifying the stakeholders’ needs//‫التركيز على احتياجات الناس لبرنامجك‬
• ‫ركز على تحديد احتياجات أصحاب المصلحة‬
• Involve all the stakeholder groups//
• ‫قم بإشراك جميع مجموعات أصحاب المصلحة‬
• Involve more than one representative from each stakeholder group
• ‫قم بإشراك أكثر من ممثل واحد من كل مجموعة من أصحاب المصلحة‬
• Use a combination of data gathering techniques
• ‫استخدم مجموعة من تقنيات جمع البيانات‬
• Support the process with props such as prototypes and task descriptions
• ‫دعم العملية بالدعائم مثل النماذج األولية وأوصاف المهام‬

www.id-book.com 22
Data interpretation and analysis
‫تفسير البيانات وتحليلها‬
• Start soon after data gathering session
• ‫ابدأ بعد فترة وجيزة من جلسة جمع البيانات‬
• Initial interpretation before deeper analysis
‫*تفسير مبدئي قبل تحليل أعمق‬
• Different approaches emphasize different
elements e.g. class diagrams for object-oriented
systems, entity-relationship diagrams for data
intensive systems
• ‫تؤكد المناهج المختلفة على عناصر مختلفة على سبيل المثال الرسوم البيانية‬
‫للفئة لألنظمة الموجهة للكائنات ومخططات العالقة بين الكيانات لألنظمة كثيفة‬
‫البيانات‬
23
 Task descriptions
‫أوصاف المهام‬
• Scenarios‫سيناريوهات‬
― an informal narrative story, simple, ‘natural’, personal, not
generalizable
― ‫ غير قابلة للتعميم‬، ‫ شخصية‬، "‫ "طبيعية‬، ‫ بسيطة‬، ‫قصة سردية غير رسمية‬
• Use cases‫استخدم حاالت‬
— assume interaction with a system‫افترض التفاعل مع النظام‬
— assume detailed understanding of the interaction
— ‫تفترض فهمًا تفصيليًا للتفاعل‬
• Essential use cases‫حاالت االستخدام األساسية‬
— abstract away from the details‫الملخص بعيدًا عن التفاصيل‬
— does not have the same assumptions as use cases
— ‫ليس لديه نفس االفتراضات مثل حاالت االستخدام‬

www.id-book.com 24
 Scenario for travel organizer
‫سيناريو منظم السفر‬
“The Thomson family enjoy outdoor activities and want to try their hand at sailing this year. There are
four family members: Sky (10 years old), Eamonn (15 years old), Claire (35), and Will (40). One evening
after dinner they decide to start exploring the possibilities. They all gather around the travel organizer
and enter their initial set of requirements – a sailing trip for four novices in the Mediterranean. The
console is designed so that all members of the family can interact easily and comfortably with it. The
system’s initial suggestion is a flotilla, where several crews (with various levels of experience) sail
together on separate boats. Sky and Eamonn aren’t very happy at the idea of going on vacation with a
group of other people, even though the Thomsons would have their own boat. The travel organizer
shows them descriptions of flotillas from other children their ages and they are all very positive, so
eventually, everyone agrees to explore flotilla opportunities. Will confirms this recommendation and asks
for detailed options. As it’s getting late, he asks for the details to be saved so everyone can consider
them tomorrow. The travel organizer emails them a summary of the different options available.”

‫"تتمتع عائلة‬Thomson ‫ إيمون‬، )‫ سنوات‬10( ‫ سكاي‬:‫ هناك أربعة أفراد من العائلة‬.‫باألنشطة الخارجية وترغب في تجربة اإلبحار هذا العام‬
‫ يجتمعون جميعًا حول منظم‬.‫ في إحدى األمسيات بعد العشاء قرروا البدء في استكشاف االحتماالت‬.)40( ‫ سنة) وويل‬35( ‫ كلير‬، )‫ سنة‬15(
‫ تم تصميم وحدة التحكم بحيث يمكن لجميع‬.‫ رحلة إبحار ألربعة مبتدئين في البحر األبيض المتوسط‬- ‫السفر ويدخلون مجموعة متطلباتهم األولية‬
‫ حيث تبحر عدة أطقم (بمستويات مختلفة من الخبرة) معًا على‬، ‫ االقتراح األولي للنظام هو األسطول‬.‫أفراد األسرة التفاعل معها بسهولة وراحة‬
‫ لم تكن‬.‫متن قوارب منفصلة‬Sky ‫و‬Eamonn ‫ على الرغم من أن‬، ‫سعداء جدًا بفكرة الذهاب في إجازة مع مجموعة من األشخاص اآلخرين‬
Thomsons ، ‫ يُظهر لهم منظم السفر أوصافًا ألساطيل من األطفال اآلخرين في سنهم وهم جمي ًعا إيجابيون للغاية‬.‫سيكون لديهم قاربهم الخاص‬
‫ طلب حفظ‬، ‫ مع تأخر الوقت‬.‫ سيؤكد هذه التوصية ويطلب خيارات مفصلة‬.‫ يوافق الجميع على استكشاف فرص األسطول‬، ‫لذلك في النهاية‬
." ‫صا للخيارات المختلفة المتاحة عبر البريد اإللكتروني‬
ً ‫ يرسل لهم منظم السفر ملخ‬.‫التفاصيل حتى يتمكن الجميع من التفكير فيها غدًا‬

www.id-book.com 25
Scenarios and Personas

www.id-book.com 26
 Use case for travel organizer
1. The system displays options for investigating visa and vaccination requirements.
2. .‫ يعرض النظام خيارات للتحقق من متطلبات التأشيرة والتطعيم‬.1
2. The user chooses the option to find out about visa requirements.
.‫ يختار المستخدم الخيار لمعرفة متطلبات التأشيرة‬.2
3. The system prompts user for the name of the destination country.
.‫ يقوم النظام بمطالبة المستخدم باسم بلد الوجهة‬.3
4. The user enters the country’s name..‫ يقوم المستخدم بإدخال اسم البلد‬.4
5. The system checks that the country is valid..‫ يتحقق النظام من صالحية الدولة‬.5
6. The system prompts the user for her nationality..‫ يطالب النظام المستخدم بجنسيته‬.6
7. The user enters her nationality..‫ يدخل المستخدم جنسيتها‬.7
8. The system checks the visa requirements of the entered country for a passport holder of her nationality.
.‫ يتحقق النظام من متطلبات التأشيرة الخاصة بالدولة التي تم إدخالها لحامل جواز السفر من جنسيتها‬.8
9. The system displays the visa requirements.
.‫ يعرض النظام متطلبات التأشيرة‬.9
10. The system displays the option to print out the visa requirements.
.‫ يعرض النظام خيار طباعة متطلبات التأشيرة‬.10
11. The user chooses to print the requirements.
.‫ يختار المستخدم طباعة المتطلبات‬.11

www.id-book.com 27
Alternative courses for travel organizer
‫دورات بديلة لمنظم السفر‬
Some alternative courses:

6. If the country name is invalid:

6.1 The system displays an error message.
6.2 The system returns to step 3.
8. If the nationality is invalid:
8.1 The system displays an error message.
8.2 The system returns to step 6.
9. If no information about visa requirements is found:
9.1 The system displays a suitable message.
9.2 The system returns to step 1.
www.id-book.com 28
Example use case diagram for travel organizer

www.id-book.com 29
 Example essential use case for travel organizer

retrieve Visa

USER INTENTION SYSTEM RESPONSIBILITY

find visa requirements request destination and

nationality

supply required information

obtain appropriate visa info
obtain copy of visa info
offer info in different formats
choose suitable format
provide info in chosen format

www.id-book.com 30
 Task analysis‫تحليل المهمة‬
• Task descriptions are often used to envision new systems or devices
• ‫غالبًا ما تُستخدم أوصاف المهام لتصور أنظمة أو أجهزة جديدة‬
• Task analysis is used mainly to investigate an existing situation
• ‫يستخدم تحليل المهام بشكل أساسي للتحقيق في الوضع الحالي‬
• It is important not to focus on superficial activities
• ‫من المهم عدم التركيز على األنشطة السطحية‬
– What are people trying to achieve? ‫ما الذي يحاول الناس تحقيقه؟‬
– Why are they trying to achieve it?‫لماذا يحاولون تحقيق ذلك؟‬
– How are they going about it?‫كيف هم ذاهبون حيال ذلك؟‬

• Many techniques, the most popular is Hierarchical Task Analysis

(HTA)
• ( ‫ األكثر شيوعً ا هي تحليل المهام الهرمية‬، ‫العديد من التقنيات‬HTA)

www.id-book.com 31
 Hierarchical Task Analysis
‫تحليل المهام الهرمي‬
• Involves breaking a task down into subtasks, then sub-sub-tasks
and so on. These are grouped as plans which specify how the tasks
might be performed in practice
• ‫ يتم تجميعها كخطط تحدد‬.‫ ثم مهام فرعية وما إلى ذلك‬، ‫يتضمن تقسيم مهمة إلى مهام فرعية‬
‫كيفية تنفيذ المهام في الممارسة العملية‬

• HTA focuses on physical and observable actions, and includes

looking at actions not related to software or an interaction device
• ‫يركز‬HTA ‫ ويتضمن النظر في اإلجراءات‬، ‫على اإلجراءات المادية والتي يمكن مالحظتها‬
‫غير المتعلقة بالبرنامج أو جهاز التفاعل‬

• Start with a user goal which is examined and the main tasks for
achieving it are identified
• ‫ابدأ بهدف المستخدم الذي تم فحصه وتحديد المهام الرئيسية لتحقيقه‬
• Tasks are sub-divided into sub-tasks
• ‫تنقسم المهام إلى مهام فرعية‬

www.id-book.com 32
 Example Hierarchical Task Analysis

0. In order to buy a DVD

1. locate DVD
2. add DVD to shopping basket
3. enter payment details
4. complete address
5. confirm order

plan 0: If regular user do 1-2-5.

If new user do 1-2-3-4-5.
www.id-book.com 33
Example Hierarchical Task Analysis
(graphical)

www.id-book.com 34
 Summary‫ملخص‬
• Getting requirements right is crucial
• ‫الحصول على المتطلبات الصحيحة أمر بالغ األهمية‬

• There are different kinds of requirement, each is significant for

interaction design
• ‫ كل منها مهم لتصميم التفاعل‬، ‫هناك أنواع مختلفة من المتطلبات‬

• The most commonly-used techniques for data gathering are:

questionnaires, interviews, focus groups, direct observation, studying
documentation and researching similar products
• ‫ االستبيانات والمقابالت ومجموعات التركيز والمالحظة‬:‫األساليب األكثر شيوعًا لجمع البيانات هي‬
‫المباشرة ودراسة التوثيق والبحث عن منتجات مماثلة‬

• Scenarios, use cases and essential use cases can be used to articulate
existing and envisioned work practices.
• ‫يمكن استخدام السيناريوهات وحاالت االستخدام وحاالت االستخدام األساسية لتوضيح ممارسات‬
.‫العمل الحالية والمتصورة‬

• Task analysis techniques such as HTA help to investigate existing

systems and practices
• ‫تساعد تقنيات تحليل المهام مثل‬HTA ‫في التحقيق في األنظمة والممارسات الحالية‬
www.id-book.com 35
‫كل شي مهم بذا ‪Design Rules‬‬
‫الشبتر‬
‫قواعد التصميم‬
design rules

Designing for maximum usability

– the goal of interaction design
‫ الهدف من تصميم التفاعل‬- ‫التصميم لتحقيق أقصى قدر من االستخدام‬

• Principles of usability‫مبادئ سهولة االستخدام‬

– general understanding‫فهم عام‬

• Standards and guidelines‫المعايير والمبادئ التوجيهية‬

– direction for design‫اتجاه التصميم‬

• Design patterns‫أنماط التصميم‬

– capture and reuse design knowledge
– ‫التقاط وإعادة استخدام المعرفة التصميمية‬
types of design rules‫أنواع قواعد التصميم‬
• principles‫مبادئ‬
– abstract design rules
– ‫قواعد التصميم المجردة‬
– low authority
– ‫سلطة منخفضة‬ Guidelines

increasing generality
increasing generality
– high generality
– ‫عمومية عالية‬
• standards‫المعايير‬
– specific design rules
Standards
– ‫قواعد تصميم محددة‬
– high authority‫سلطة عالية‬
– limited application
– ‫تطبيق محدود‬ increasing authority
increasing authority

• guidelines‫القواعد االرشادية‬
– lower authority‫سلطة أقل‬
– more general application
– ‫تطبيق أكثر عمومية‬
Principles to support usability
‫مبادئ لدعم سهولة االستخدام مهم‬
Learnability‫قابلية التعلم‬
the ease with which new users can begin effective
interaction and achieve maximal performance
‫السهولة التي يمكن من خاللها للمستخدمين الجدد بدء التفاعل الفعال وتحقيق أقصى قدر من األداء‬

Flexibility‫المرونة‬
the multiplicity of ways the user and system exchange
information
‫تعدد طرق تبادل المعلومات بين المستخدم والنظام‬

Robustness‫المتانة‬
the level of support provided the user in determining
successful achievement and assessment of goal-
directed behaviour
‫مستوى الدعم المقدم للمستخدم في تحديد اإلنجاز الناجح وتقييم السلوك الموجه نحو الهدف‬
Principles of learnability‫مبادئ التعلم‬

Predictability‫القدرة على التنبؤ‬

– determining effect of future actions
based on past interaction history
– ‫تحديد تأثير اإلجراءات المستقبلية بنا ًء على تاريخ التفاعل السابق‬
– operation visibility‫رؤية العملية‬

Synthesizability‫انسيابيه‬/‫التوليف‬
– assessing the effect of past actions
– ‫تقييم تأثير اإلجراءات السابقة‬
– immediate vs. eventual honesty
– ‫الصدق الفوري مقابل الصدق النهائي‬
Principles of learnability (ctd)

Familiarity‫معرفة‬
– how prior knowledge applies to new system
– ‫كيف تنطبق المعرفة السابقة على النظام الجديد‬
– guessability; affordance‫ تحمل‬.‫التخمين‬

Generalizability‫التعميم‬
– extending specific interaction knowledge to new
situations
– ‫توسيع نطاق المعرفة التفاعل المحددة لمواقف جديدة‬

Consistency‫تناسق‬
– likeness in input/output behaviour arising from
similar situations or task objectives
– ‫ اإلخراج الناشئ عن مواقف أو أهداف مهمة مماثلة‬/ ‫التشابه في سلوك اإلدخال‬
Principles of flexibility
‫مبادئ المرونة‬
Dialogue initiative‫مبادرة الحوار‬
– freedom from system imposed constraints on input dialogue
– ‫فرض التحرر من النظام قيودًا على مدخالت الحوار‬
– system vs. user pre-emptiveness
– ‫النظام مقابل استباق المستخدم‬

Multithreading‫تعدد‬
– ability of system to support user interaction for more than
one task at a time
– ‫قدرة النظام على دعم تفاعل المستخدم ألكثر من مهمة في وقت واحد‬
– concurrent vs. interleaving; multimodality
– ‫المتزامن مقابل التشذير ؛ تعدد الوسائط‬

Task migratability‫قابلية ترحيل المهام‬

– passing responsibility for task execution between user and
system
– ‫تمرير المسؤولية عن تنفيذ المهام بين المستخدم والنظام‬
Principles of flexibility (ctd)

Substitutivity‫التبادلية‬
– allowing equivalent values of input and output
to be substituted for each other
– ‫السماح باستبدال القيم المتكافئة للمدخالت والمخرجات ببعضها البعض‬
– representation multiplicity; equal opportunity
– ‫تعدد التمثيل فرصةمتساوية‬

Customizability‫التخصيص‬
– modifiability of the user interface by user
(adaptability) or system (adaptivity)
– )‫قابلية تعديل واجهة المستخدم من خالل المستخدم (قابلية التكيف) أو النظام (التكيف‬
Principles of robustness
‫مبادئ المتانة‬
Observability‫المالحظة‬
– ability of user to evaluate the internal state of the
system from its perceivable representation
– ‫قدرة المستخدم على تقييم الحالة الداخلية للنظام من تمثيله الملحوظ‬
– browsability; defaults; reachability; persistence;
operation visibility
– ‫ إصرار؛ رؤية العملية‬.‫ قابلية الوصول‬.‫ التخلف عن السداد‬.‫قابلية التصفح‬

Recoverability‫التعافي‬
– ability of user to take corrective action once an error
has been recognized
– ‫قدرة المستخدم على اتخاذ إجراءات تصحيحية بمجرد التعرف على الخطأ‬
– reachability; forward/backward recovery;
commensurate effort
– ‫ الخلف ؛ جهد متناسب‬/ ‫ االنتعاش إلى األمام‬.‫قابلية الوصول‬
Principles of robustness (ctd)

Responsiveness‫إستجابة‬
– how the user perceives the rate of
communication with the system
– ‫كيف يدرك المستخدم معدل االتصال مع النظام‬
– Stability‫استقرار‬

Task conformance‫مطابقة المهمة‬

– degree to which system services support all of
the user's tasks
– ‫الدرجة التي تدعم بها خدمات النظام جميع مهام المستخدم‬
– task completeness; task adequacy
– ‫اكتمال المهمة كفاية المهمة‬
Using design rules
Guidelines

increasing generality
increasing generality
Design rules
Standards
• Suggest how to increase usability
• ‫اقترح كيفية زيادة قابلية االستخدام‬
• Differ in generality and authority increasing
increasingauthority
authority

• ‫تختلف في العموم والسلطة‬

Standards
• set by national or international bodies to ensure
compliance by a large community of designers
standards require sound underlying theory and slowly
changing technology

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

• hardware standards more common than software high

authority and low level of detail

• ‫معايير األجهزة أكثر شيوعًا من السلطة العالية للبرامج ومستوى منخفض من التفاصيل‬

• ISO 9241 defines usability as effectiveness, efficiency

and satisfaction with which users accomplish tasks

• ‫عرف قابلية االستخدام على أنها الفعالية والكفاءة والرضا التي ينجز بها المستخدمون المهام‬
ّ ُ‫ي‬
Guidelines

• more suggestive and general

• ‫أكثر إيحائية وعمومية‬
• many textbooks and reports full of guidelines
• ‫العديد من الكتب المدرسية والتقارير المليئة باإلرشادات‬
• abstract guidelines (principles) applicable during
early life cycle activities
• ‫إرشادات مجردة (مبادئ) قابلة للتطبيق خالل أنشطة دورة الحياة المبكرة‬
• detailed guidelines (style guides) applicable
during later life cycle activities
• ‫إرشادات مفصلة (أدلة نمط) قابلة للتطبيق أثناء أنشطة دورة الحياة الالحقة‬
• understanding justification for guidelines aids in
resolving conflicts
• ‫فهم تبرير المبادئ التوجيهية يساعد في حل النزاعات‬
Golden rules and heuristics
‫القواعد الذهبية واالستدالل‬
• “Broad brush” design rules
• Useful check list for good design
• Better design using these than using nothing!
• Different collections e.g.
– Nielsen’s 10 Heuristics (see Chapter 9)
– Shneiderman’s 8 Golden Rules
– Norman’s 7 Principles
Nielsen’s 10 Heuristics‫االستدالل العشر لنيلسن‬
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Error prevention
5. Help users recognize, diagnose, and recover from errors
6. Consistency and standards
7. Recognition rather than recall
8. Flexibility and efficiency of use
9. Aesthetic and minimalist design
10. Help and Documentation
Nielsen’s 10 Heuristics
• Visibility of system status‫رؤية حالة النظام‬
Nielsen’s 10 Heuristics
• Match between system and the real world
• ‫تطابق بين النظام والعالم الحقيقي‬
Nielsen’s 10 Heuristics
• User control and freedom‫تحكم وحرية المستخدم‬
Nielsen’s 10 Heuristics
• Error prevention‫منع الخطأ‬
Nielsen’s 10 Heuristics
• Help users recognize, diagnose, and recover from errors
• ‫ساعد المستخدمين في التعرف على األخطاء وتشخيصها والتعافي منها‬
Nielsen’s 10 Heuristics
• Consistency and standards‫االتساق والمعايير‬
Nielsen’s 10 Heuristics

• Recognition rather than recall‫االعتراف بدال من التذكر‬

Nielsen’s 10 Heuristics
• Flexibility and efficiency of use
• ‫مرونة وكفاءة في االستخدام‬
Nielsen’s 10 Heuristics
• Aesthetic and minimalist design‫التصميم الجمالي والبسيط‬
Nielsen’s 10 Heuristics
• Help and Documentation‫المساعدة والتوثيق‬
For more information about Nielsen’s Heuristics :

https://www.nngroup.com/articles/ten-
usability-heuristics/
Shneiderman’s 8 Golden Rules
1. Strive for consistency
2. ‫ السعي لتحقيق االتساق‬.1
2. Enable frequent users to use shortcuts
‫ قم بتمكين المستخدمين المتكررين من استخدام االختصارات‬.2
3. Offer informative feedback
‫ تقديم مالحظات مفيدة‬.3
4. Design dialogs to yield closure
‫ تصميم الحوارات لتسفر عن اإلغالق‬.4
5. Offer error prevention and simple error handling
‫ عرض منع األخطاء ومعالجة األخطاء البسيطة‬.5
6. Permit easy reversal of actions
‫ السماح بعكس اإلجراءات بسهولة‬.6
7. Support internal locus of control
‫ دعم موضع السيطرة الداخلي‬.7
8. Reduce short-term memory load
‫ تقليل حمل الذاكرة قصيرة المدى‬.8
Norman’s 7 Principles
1. Use both knowledge in the world and knowledge in the
head.
2. .‫ استخدم المعرفة في العالم والمعرفة في الرأس‬.1
2. Simplify the structure of tasks.
.‫ تبسيط هيكل المهام‬.2
3. Make things visible: bridge the gulfs of Execution and
Evaluation.
.‫ جسر هوة التنفيذ والتقييم‬:‫ جعل األمور مرئية‬.3
4. Get the mappings right.
.‫ احصل على التعيينات بشكل صحيح‬.4
5. Exploit the power of constraints, both natural and artificial.
.‫ الطبيعية منها والمصطنعة‬، ‫ استغالل قوة القيود‬.5
6. Design for error.
.‫ تصميم للخطأ‬.6
7. When all else fails, standardize.
.‫ قم بتوحيد المعايير‬، ‫ عندما يفشل كل شيء آخر‬.7
Summary

Principles for usability‫مبادئ لسهولة االستخدام‬

– repeatable design for usability relies on maximizing
benefit of one good design by abstracting out the
general properties which can direct purposeful design
– ‫يعتمد التصميم القابل للتكرار لالستخدام على تعظيم االستفادة من تصميم جيد واحد من‬
‫خالل استخالص الخصائص العامة التي يمكن أن توجه التصميم الهادف‬
– The success of designing for usability requires both
creative insight (new paradigms) and purposeful
principled practice
– ‫يتطلب نجاح التصميم من أجل سهولة االستخدام رؤية إبداعية (نماذج جديدة) وممارسة‬
‫مبدئية هادفة‬

Using design rules

– standards and guidelines to direct design activity
– ‫المعايير والمبادئ التوجيهية لتوجيه نشاط التصميم‬
 Design rules for Usability

Principles Standards and Guidelines

Learnability Flexibility Robustness

• Nielsen’s 10 Heuristics
• Norman’s 7 Principles
• Predictability • Dialogue • Observability
• Shneiderman’s 8 Golden
initiative
Rules
• Synthesizability • Recoverability
• Multithreading
• Familiarity • Responsiveness
• Task
• Generalizability migratability • Task
conformance
• Consistency • Substitutivity
• Customizability
 &
Prototyping
Copyright © 2013 Grapefruit SRL. All Rights Reserved.
7 GRAPEFRUIT | SKETCHING & PROTOTYPING

Expectations

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

9 GRAPEFRUIT | SKETCHING & PROTOTYPING

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Copyright © 2013 Grapefruit SRL. All Rights Reserved.
12 GRAPEFRUIT | SKETCHING & PROTOTYPING

Sketching
Copyright © 2013 Grapefruit SRL. All Rights Reserved.
 Why?

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

13 GRAPEFRUIT | SKETCHING & PROTOTYPING

Incredibly simple

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

14 GRAPEFRUIT | SKETCHING & PROTOTYPING

We Need
Pen & paper

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Copyright © 2013 Grapefruit SRL. All Rights Reserved.
16 GRAPEFRUIT | SKETCHING & PROTOTYPING

Toolkit

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

17 GRAPEFRUIT | SKETCHING & PROTOTYPING

Lines

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

18 GRAPEFRUIT | SKETCHING & PROTOTYPING

Warm up

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

19 GRAPEFRUIT | SKETCHING & PROTOTYPING

Text

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

20 GRAPEFRUIT | SKETCHING & PROTOTYPING

Weight

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

22 GRAPEFRUIT | SKETCHING & PROTOTYPING

Depth

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

24 GRAPEFRUIT | SKETCHING & PROTOTYPING

Look here!!!

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

26 GRAPEFRUIT | SKETCHING & PROTOTYPING

Labelling

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

27 GRAPEFRUIT | SKETCHING & PROTOTYPING

Templates

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

28 GRAPEFRUIT | SKETCHING & PROTOTYPING

Focus

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

29 GRAPEFRUIT | SKETCHING & PROTOTYPING

Show, don’t tell

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

30 GRAPEFRUIT | SKETCHING & PROTOTYPING

not perfect

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

32 GRAPEFRUIT | SKETCHING & PROTOTYPING

What, not how

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Copyright © 2013 Grapefruit SRL. All Rights Reserved.
Copyright © 2013 Grapefruit SRL. All Rights Reserved.
35 GRAPEFRUIT | SKETCHING & PROTOTYPING

Patterns

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

36 GRAPEFRUIT | SKETCHING & PROTOTYPING

Sketch Discuss Iterate

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

37 GRAPEFRUIT | SKETCHING & PROTOTYPING

The board

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

38 GRAPEFRUIT | SKETCHING & PROTOTYPING

Check the experts

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

41 GRAPEFRUIT | SKETCHING & PROTOTYPING

The story

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

43 GRAPEFRUIT | SKETCHING & PROTOTYPING

Testing
Copyright © 2013 Grapefruit SRL. All Rights Reserved.
Copyright © 2013 Grapefruit SRL. All Rights Reserved.
Copyright © 2013 Grapefruit SRL. All Rights Reserved.
46 GRAPEFRUIT | SKETCHING & PROTOTYPING

For testing we need

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

 ‫‪Prototype‬‬
‫النموذج المبدئي‬
Prototyping
 • A prototype is a draft version of a product that
allows you to explore your ideas and show the
intention behind a feature or the overall design
concept to users before investing time and money
into development.
• ‫النموذج األولي هو نسخة أولية من منتج يسمح لك باستكشاف‬
‫أفكارك وإظهار النية من ميزة أو مفهوم التصميم العام‬
Prototyping .‫للمستخدمين قبل استثمار الوقت والمال في التطوير‬
• A prototype can be anything from paper
drawings (low-fidelity) to something that allows
click-through of a few pieces of content to a fully
functioning site (high-fidelity).
• ‫يمكن أن يكون النموذج األولي أي شيء بد ًءا من الرسومات‬
‫الورقية (منخفضة الدقة) إلى شيء يسمح بالنقر فوق بضع أجزاء‬
.)‫من المحتوى إلى موقع يعمل بكامل طاقته (دقة عالية‬
 • Provide the means for examining design problems and evaluating
solutions
‫توفير وسائل فحص مشاكل التصميم وتقييم الحلول‬
• It is much cheaper to change a product early in the development
process than to make change after you
• ‫إن تغيير منتج في وقت مبكر من عملية التطوير أرخص بكثير من إجراء التغيير بعد‬
.‫ تطوير الموقع‬develop the site.
Benefits of
• Prototyping allow you to gather feedback from users while you
Prototypes are still planning and designing your web site.
• ‫تسمح لك النماذج األولية بجمع التعليقات من المستخدمين بينما ال تزال تخطط لموقع‬
.‫الويب الخاص بك وتصميمه‬
‫فوائد النماذج‬ • The biggest improvements in user experience come from

‫األولية‬ gathering usability data as early as possible.

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

• It’s cheaper to make changes before any code has been written
than to wait until after the implementation is complete
• ‫من األرخص إجراء تغييرات قبل كتابة أي رمز بدالً من االنتظار حتى اكتمال التنفيذ‬
What can be a prototype?

Every form of representation

• Sketches
• Graphics
• Power-point slides
• Role Play, Acting
• Video
• Diagrams & Frameworks
• Hand Made Constructions
• Machined Constructions
• Virtual Models
• Packaging
• Spaces
• –……
 Clarify goals and
requirements
Design by doing “Reflective conversation
with the materials”

What are Give users the

experience of use
Look and feel

prototypes
used for Test specific aspects
Compare alternatives
Make changes

Show feasibility for Proof of concept

buy-in Manage expectations

 Sketch Prototype
The Difference
between Evocative Didactic
Sketches and Suggest Describe
Prototypes Explore Refine
Although the difference Question Answer
between sketches,
wireframes, and Propose Test
prototypes isn’t always
clear, there are differences Provoke Resolve
in their intentions. Bill
Buxton, in his book
Sketching User Tentative Specific
Experiences, provides a list
of descriptors that help Non-committal Depiction
explain the differences:
Prototype High-Fidelity and Low-Fidelity
Prototyping
fidelity
 • Are often paper-based.
• .‫غالبًا ما تكون ورقية‬
• Do not allow user interactions.
• .‫ال تسمح بتفاعالت المستخدم‬
• They range from a series of hand-drawn mock-ups to
Low-fidelity •
printouts.
.‫وهي تتراوح من سلسلة من النماذج المرسومة باليد إلى المطبوعات‬
prototypes •
•
In theory, low-fidelity sketches are quicker to create.
.‫ يعد إنشاء الرسومات منخفضة الدقة أسرع‬، ‫من الناحية النظرية‬

‫نماذج أولية‬ • Low-fidelity prototypes are helpful in enabling early

visualization of alternative design solutions, which helps
provoke innovation and improvement.
‫منخفضة الدقة‬ • ‫النماذج األولية منخفضة الدقة مفيدة في تمكين التصور المبكر لحلول‬
.‫ مما يساعد على تحفيز االبتكار والتحسين‬، ‫التصميم البديلة‬
• An additional advantage to this approach is that when
using rough sketches, users may feel more comfortable
suggesting changes.
• ‫ قد يشعر‬، ‫ميزة إضافية لهذا النهج هي أنه عند استخدام الرسومات التقريبية‬
.‫المستخدمون براحة أكبر في اقتراح التغييرات‬
 • Are computer-based..‫تعتمد على الكمبيوتر‬
• Usually allow realistic (mouse-keyboard) user
interactions.
• .)‫تسمح عادةً بالتفاعالت الواقعية للمستخدم (لوحة مفاتيح الماوس‬
High-fidelity • Take you as close as possible to a true
representation of the user interface.
prototypes • .‫يأخذك في أقرب وقت ممكن من التمثيل الحقيقي لواجهة المستخدم‬
• Assumed to be much more effective in collecting
‫نماذج أولية عالية‬ true human performance data (e.G., Time to
complete a task),
‫الدقة‬ • ‫يُفترض أنه أكثر فاعلية في جمع بيانات األداء البشري الحقيقية‬
، )‫ الوقت إلكمال المهمة‬، ‫(على سبيل المثال‬
• Demonstrate actual products to clients,
management, and others
• ‫إظهار المنتجات الفعلية للعمالء واإلدارة وغيرهم‬
High-Fidelity VS. Low-Fidelity Prototyping
Prototyping tools
Adobe XD
prototyping tools
Axure RP
prototyping tools
JustInMind
prototyping tools
InVision
The previous tools were only examples
There are other tools you may discover and use.
Evaluation Techniques
‫تقنيات التقييم‬
A simple interaction design lifecycle model
‫نموذج دورة حياة تصميم تفاعلي بسيط‬
• Evaluation‫تقييم‬
– tests usability and functionality of system
– ‫اختبارات قابلية االستخدام ووظائف النظام‬
– occurs in laboratory, field and/or in collaboration
with users
– ‫ أو بالتعاون مع المستخدمين‬/ ‫ أو الميدان و‬/ ‫يحدث في المختبر و‬
– evaluates both design and implementation
– ‫بتقييم كل من التصميم والتنفيذ‬
– should be considered at all stages in the design life
cycle
– ‫يجب أخذها في االعتبار في جميع مراحل دورة حياة التصميم‬
Goals of Evaluation‫أهداف التقييم‬

• assess extent of system functionality

• ‫تقييم مدى وظائف النظام‬
• assess effect of interface on user
• ‫تقييم تأثير الواجهة على المستخدم‬
• identify specific problems
• ‫تحديد مشاكل معينة‬
‫تقنيات التقييم‪Evaluation Techniques‬‬

‫‪• Evaluation techniques can be categorized as follows:‬‬

‫يمكن تصنيف تقنيات التقييم على النحو التالي‪• :‬‬
‫‪1. Expert-based‬‬
‫على أساس الخبراء ‪2.‬‬
‫‪3. Model-based‬‬
‫على أساس النموذج ‪4.‬‬
‫‪5. User-based‬‬
‫المستندة إلى المستخدم •‬
Expert-based Evaluation Techniques
‫تقنيات التقييم القائمة على الخبراء‬
• It can be expensive to regularly carry out user test at all life cycle
stages. Moreover, it can be difficult to get an accurate assessment based
on incomplete designs and prototypes. Therefore evaluation through
expert analysis.
• ‫ عالوة على‬.‫قد يكون إجراء اختبار المستخدم بانتظام في جميع مراحل دورة الحياة مكلفًا‬
‫ قد يكون من الصعب الحصول على تقييم دقيق بنا ًًء على تصميمات ونماذج أولية غير‬، ‫ذلك‬
.‫ لذلك التقييم من خالل تحليل الخبراء‬.‫مكتملة‬

• Expert evaluation: designer or HCI expert assesses a design based on

known/standard cognitive principles or empirical results.
• ‫ يقوم المصمم أو خبير‬:‫تقييم الخبراء‬HCI ‫بتقييم التصميم بنا ًًء على المبادئ المعرفية‬
.‫ المعيارية أو النتائج التجريبية‬/ ‫المعروفة‬

• Expert analysis methods are relatively cheap.

• .‫تعتبر طرق التحليل الخبيرة رخيصة نسبيًا‬
Examples of expert analysis methods
‫أمثلة على طرق التحليل الخبيرة‬
• Cognitive Walkthrough
• ‫اإلدراك المعرفي‬
• Heuristic Evaluation
• ‫تقييم ارشادي‬
• Review-based evaluation
• ‫التقييم القائم على المراجعة‬
Cognitive Walkthrough
‫اإلدراك المعرفي‬
– evaluates design on how well it supports user in learning task
– ‫يقيّم التصميم على مدى جودة دعمه للمستخدم في مهمة التعلم‬
– usually performed by expert in cognitive psychology
– ‫عادة ما يؤديها خبير في علم النفس المعرفي‬
– expert ‘walks though’ design to identify potential problems
using psychological principles
– ‫تصميم "يمشي" خبير لتحديد المشاكل المحتملة باستخدام المبادئ النفسية‬

– 4 requirements in order to perform the CW:

 specification or prototype of the system
 ‫المواصفات أو النموذج األولي للنظام‬
 description of the task the user is to perform
 ‫وصف المهمة التي يتعين على المستخدم القيام بها‬
 complete, written list of actions constituting the task
 ‫قائمة كاملة مكتوبة باإلجراءات التي تشكل المهمة‬
 description of the user (including the level of experience and
knowledge)
 )‫وصف المستخدم (بما في ذلك مستوى الخبرة والمعرفة‬
Cognitive Walkthrough (ctd)
( ‫اإلرشادات المعرفية‬ctd)
The evaluator steps through each of the actions trying to answer the
following 4 questions:
ً
:‫محاول اإلجابة على األسئلة األربعة التالية‬ ‫يقوم المقيم بخطوات خالل كل إجراء من اإلجراءات‬

• is the effect of the action the same as the user's goal at that point? [what the action
will do/action's effect should be what the user intends/user's goal.]
• ‫ يجب أن يكون تأثير اإلجراء هو‬/ ‫هل تأثير اإلجراء هو نفس هدف المستخدم في تلك المرحلة؟ [ما سيفعله اإلجراء‬
].‫ هدف المستخدم‬/ ‫ما ينوي المستخدم‬

• will users see that the action is available [when they want it] - visibility at that
time?
• ‫ الرؤية في ذلك الوقت؟‬- ]‫هل سيرى المستخدمون أن اإلجراء متاح [عندما يريدون ذلك‬

• once users have found the correct action will they know/recognize it is the one they
need? [effective representation of the action, clear representation.]
• ‫ يدركون أنه اإلجراء الذي يحتاجون إليه؟ [التمثيل‬/ ‫ هل سيعرفون‬، ‫بمجرد أن يجد المستخدمون اإلجراء الصحيح‬
].‫ تمثيل واضح‬، ‫الفعال للعمل‬

• after the action is taken, will users understand the feedback they get? [effective
confirmation that the action has been taken.]
• ].‫ هل سيتفهم المستخدمون التعليقات التي يحصلون عليها؟ [تأكيد فعال على اتخاذ اإلجراء‬، ‫بعد اتخاذ اإلجراء‬
Cognitive Walkthrough (ctd)( ‫ اإلرشادات المعرفية‬ctd)
• forms are used to guide analysis e.g. cover form [for the
four requirements above, date, time, evaluators of the
CW], answer form [for answering the four questions
above], usability problem report [for describing any
negative answers/problems, severity of the problem e.g.
frequency of occurrence and seriousness of the problem,
date, time, evaluators].
• ‫تستخدم النماذج لتوجيه التحليل على سبيل المثال نموذج الغالف [للمتطلبات‬
‫ مقيمو‬، ‫ الوقت‬، ‫ التاريخ‬، ‫األربعة أعاله‬CW] ‫ نموذج اإلجابة [لإلجابة على‬،
/ ‫ تقرير مشكلة قابلية الستخدام [لوصف أي إجابات‬، ]‫األسئلة األربعة أعاله‬
‫ خطورة المشكلة على سبيل المثال تواتر حدوث المشكلة‬، ‫مشاكل سلبية‬
.]‫ المقيمون‬، ‫ الوقت‬، ‫ التاريخ‬، ‫وخطورتها‬
Heuristic Evaluation‫تقييم ارشادي‬
• The experts are provided with the proper scenarios to use to support them when
interacting with the system/prototype under evaluation. They then evaluate the
system/prototype individually. This is to ensure an independent and unbiased evaluation
by each expert. They assess the user interface as a whole and also the individual user
interface elements. The assessment is performed with reference to a set of established
usability principles.
• ‫ ثم‬.‫ النموذج األولي قيد التقييم‬/ ‫يتم تزويد الخبراء بالسيناريوهات المناسبة الستخدامها في دعمهم عند التفاعل مع النظام‬
‫ يقومون بتقييم واجهة‬.‫ هذا لضمان تقييم مستقل وغير متحيز من قبل كل خبير‬.‫ النموذج األولي بشكل فردي‬/ ‫يقومون بتقييم النظام‬
‫ يتم إجراء التقييم بالرجوع إلى مجموعة من مبادئ قابلية االستخدام المعمول‬.‫المستخدم ككل وكذلك عناصر واجهة المستخدم الفردية‬
.‫بها‬
• usability criteria (heuristics) are identified
• )‫يتم تحديد معايير قابلية االستخدام (االستدالل‬
• design examined by experts to see if these are violated
• ‫فحص التصميم من قبل الخبراء لمعرفة ما إذا كان قد تم انتهاكها‬

• Example heuristics
– system behaviour is predictable
– ‫يمكن التنبؤ بسلوك النظام‬
– system behaviour is consistent
– ‫يمكن التنبؤ بسلوك النظام‬
– feedback is provided
– ‫يتم توفير التغذية الراجعة‬

• When all the experts are through with the assessment, they come together and
compare and appropriately aggregate their findings.
• .‫ يجتمعون معًا ويقارنون نتائجهم ويجمعونها بشكل مناسب‬، ‫عندما ينتهي جميع الخبراء من إجراء التقييم‬
Review-based evaluation
• Results from the literature used to support or
disprove parts of design.
• .‫نتائج من األدبيات المستخدمة لدعم أو دحض أجزاء من التصميم‬

• Care needed to ensure results are transferable to

new design.
• .‫العناية الالزمة لضمان إمكانية نقل النتائج إلى تصميم جديد‬

• It is expensive to repeat experiments continually

and therefore a review of relevant literature can
save resources (e.g., effort, time, finances, etc).
• ‫ وبالتالي فإن مراجعة األدبيات ذات الصلة يمكن‬، ‫أمرا مكل ًفا‬
ً ‫يعد تكرار التجارب باستمرار‬
.)‫ إلخ‬، ‫ الجهد والوقت والموارد المالية‬، ‫أن توفر الموارد (على سبيل المثال‬
Evaluating through user
Participation
‫التقييم من خالل مشاركة المستخدم‬
 Evaluating through user Participation
User-based evaluation techniques include:
1. experimental methods,‫طرق تجريبية‬
2. observational methods,، ‫طرق المراقبة‬
3. query techniques (e.g., questionnaires and
interviews), physiological monitoring methods
(e.g., eye tracking, measuring skin
conductance, measuring heart rate).
4. ‫ وطرق المراقبة الفسيولوجية (على‬، )‫تقنيات االستعالم (مثل االستبيانات والمقابالت‬
.)‫ وقياس معدل ضربات القلب‬، ‫ وقياس موصلية الجلد‬، ‫ تتبع العين‬، ‫سبيل المثال‬

User-based methods can be conducted in the

laboratory and/or in the field.
.‫ أو في الميدان‬/ ‫يمكن إجراء األساليب المستندة إلى المستخدم في المختبر و‬
Laboratory studies‫الدراسات المختبرية‬

• Advantages::‫مزايا‬
– specialist equipment available‫المعدات المتخصصة المتاحة‬
– uninterrupted environment‫المعدات المتخصصة المتاحة‬

• Disadvantages:
– lack of context‫عدم وجود سياق‬
– difficult to observe several users cooperating
– ‫عدم وجود سياق‬

• Appropriate‫مالئم‬
– if system location is dangerous or impractical
for constrained single user systems to allow
controlled manipulation of use
– ‫خطيرا أو غير عملي ألنظمة المستخدم الفردي المقيدة للسماح‬
ً ‫إذا كان موقع النظام‬
‫بالتالعب المتحكم فيه في االستخدام‬
Field Studies‫دراسات ميدانيه‬

• Advantages:
– natural environment‫بيئة طبيعية‬
– context retained (though observation may alter
it)
– )‫تم االحتفاظ بالسياق (على الرغم من أن المالحظة قد تغيره‬
– longitudinal studies possible‫دراسات طولية ممكنة‬

• Disadvantages:
– Distractions, movements, danger, noise
– ‫اإللهاءات والحركات والخطر والضوضاء‬

• Appropriate
– where context is crucial for longitudinal studies
– ‫حيث السياق مهم للدراسات الطولية‬
A longitudinal study is a correlational research study that involves repeated
observations of the same variables over long periods of time — often many decades. It
is a type of observational study
‫ إنه نوع من‬.‫ غالبًا لعقود عديدة‬- ‫الدراسة الطولية هي دراسة بحثية ارتباطية تتضمن مالحظات متكررة لنفس المتغيرات على مدى فترات طويلة من الزمن‬
‫الدراسة القائمة على المالحظة‬
 Evaluating Implementations
‫تقييم التطبيقات‬
Requires an artefact:
simulation, prototype,
full implementation
:‫يتطلب قطعة أثرية‬
‫محاكاة نموذج أولي‬
‫التنفيذ الكامل‬
 Evaluation

Design Evaluating Implementation Evaluating

(require simulation, prototype,
full implementation)

1. Cognitive Walkthrough
2. Heuristic Evaluation Laboratory
3. Review-based evaluation Field
Experimental factors‫العوامل التجريبية‬

• Subjects‫المواضيع‬
– who – representative, sufficient sample
– ‫ عينة كافية‬، ‫ ممثل‬- ‫من‬
• Variables‫المتغيرات‬
– things to modify and measure
– ‫أشياء لتعديلها وقياسها‬
• Hypothesis‫فرضية‬
– what you’d like to show
– ‫ماذا تريد أن تظهر‬
• Experimental design‫تصميم تجريبي‬
– how you are going to do it
– ‫كيف ستفعل ذلك‬
Observational Methods‫طرق المراقبة‬
 Think Aloud‫فكر بصوت عال‬
• user observed performing task
• ‫الحظ المستخدم أداء المهمة‬
• user asked to describe what he is doing and why, what he
thinks is happening etc.
• .‫ وما يعتقد أنه يحدث وما إلى ذلك‬، ‫طلب المستخدم وصف ما يفعله ولماذا‬

• Advantages
– simplicity - requires little expertise‫ يتطلب القليل من الخبرة‬- ‫البساطة‬
– can provide useful insight‫يمكن أن توفر رؤية مفيدة‬
– can show how system is actually use ‫يمكن أن يوضح كيف يتم استخدام النظام‬
‫بالفعل‬
• Disadvantages
– subjective‫شخصي‬
– selective‫انتقائي‬
– act of describing may alter task performance
– ‫قد يؤدي فعل الوصف إلى تغيير أداء المهمة‬
Cooperative evaluation‫التقييم التعاوني‬
• variation on think aloud
• ‫االختالف في التفكير بصوت عال‬
• user collaborates in evaluation
• ‫يتعاون المستخدم في التقييم‬
• both user and evaluator can ask each other questions
throughout
• ‫يمكن لكل من المستخدم والمقيم طرح أسئلة على بعضهما البعض طوال الوقت‬

• Additional advantages‫مزايا إضافية‬

– less constrained and easier to use
– ‫أقل تقييدًا وأسهل في االستخدام‬
– user is encouraged to criticize system
– ‫يتم تشجيع المستخدم على انتقاد النظام‬
– clarification possible
– ‫توضيح ممكن‬
 Protocol analysis‫تحليل البروتوكول‬
• paper and pencil – cheap, limited to writing speed
• ‫ يقتصران على سرعة الكتابة‬، ‫ رخيصان‬- ‫الورق والقلم‬
• audio – good for think aloud, difficult to match with other
protocols
• ‫ ويصعب مطابقته مع البروتوكوالت األخرى‬، ‫ مفيد للتفكير بصوت عال‬- ‫الصوت‬
• video – accurate and realistic..‫ دقيق وواقعي‬- ‫فيديو‬
• computer logging – automatic, large amounts of data difficult
to analyze
• ‫ كميات كبيرة من البيانات تلقائية يصعب تحليلها‬- ‫تسجيل الكمبيوتر‬
• user notebooks –subjective, useful insights, good for
longitudinal studies
• ‫ رؤى موضوعية ومفيدة وجيدة للدراسات الطولية‬- ‫دفاتر المستخدم‬

• Mixed use in practice..‫استخدام مختلط في الممارسة‬

• audio/video transcription difficult and requires skill.
• .‫ الفيديو صعب ويتطلب مهارة‬/ ‫نسخ الصوت‬
• Some automatic support tools available
• ‫بعض أدوات الدعم التلقائي المتاحة‬
 Observational Methods
post-task walkthroughs
‫طرق المراقبة تجول ما بعد المهمة‬
• transcript played back to participant for comment
• ‫تم تشغيل النص للمشارك للتعليق‬
– immediately  fresh in mind
– ‫ جديد في االعتبار‬ ‫على الفور‬
– delayed  evaluator has time to identify questions
– ‫ المقيم لديه الوقت لتحديد األسئلة‬ ‫متأخر‬
• useful to identify reasons for actions and alternatives
considered
• ‫مفيد في تحديد أسباب اإلجراءات والبدائل التي تم النظر فيها‬
• necessary in cases where think aloud is not possible
• ‫ضروري في الحاالت التي يكون فيها التفكير بصوت عال غير ممكن‬
 Observational Methods
‫طرق المالحظه‬

• Think Aloud
• Cooperative evaluation
• Protocol analysis
• Post-task walkthroughs
Query Techniques‫تقنيات االستعالم‬

Interviews
Questionnaires
 Interviews

• analyst questions user on one-to -one basis

usually based on prepared questions
• ‫يقوم المحلل بإجراء أسئلة على المستخدم على أساس فردي بنا ًء على أسئلة معدة مسبقًا‬
• informal, subjective and relatively cheap
• ‫غير رسمية وذاتية ورخيصة نسبيًا‬

• Advantages
– can be varied to suit context‫يمكن أن تتنوع لتناسب السياق‬
– issues can be explored more fully‫يمكن استكشاف القضايا بشكل كامل‬
• Disadvantages
– very subjective‫شخصي جدا‬
– time consuming
– Limited
Questionnaires

• Set of fixed questions given to users

• ‫مجموعة من األسئلة الثابتة تعطى للمستخدمين‬

• Advantages
– quick and reaches large user group
– ‫سريع ويصل إلى مجموعة كبيرة من المستخدمين‬
– can be analyzed more carefully
– ‫يمكن تحليلها بعناية أكبر‬
• Disadvantages
– less flexible‫أقل مرونة‬
– less probing‫أقل تحقيقا‬
Questionnaires (ctd)

• Need careful design

– what information is required?
– how are answers to be analyzed?

– Disadvantages?
Physiological methods‫الطرق الفسيولوجية‬

Eye tracking
Physiological measurement
 eye tracking‫تتبع العين‬
• head or desk mounted equipment tracks the position of the
eye
• ‫معدات مثبتة على الرأس أو المكتب تتعقب موضع العين‬
• eye movement reflects the amount of cognitive processing a
display requires
• ‫تعكس حركة العين مقدار المعالجة المعرفية التي تتطلبها الشاشة‬
• measurements include‫تشمل القياسات‬
– fixations: eye maintains stable position. Number and duration
indicate level of difficulty with display
– ‫ يشير الرقم والمدة إلى مستوى صعوبة العرض‬.‫ تحافظ العين على وضع ثابت‬:‫التثبيتات‬
– rapid eye movement from one point of interest to another
– ‫حركة العين السريعة من نقطة اهتمام إلى أخرى‬
– scan paths: moving straight to a target with a short fixation at
the target is optimal
– ‫ االنتقال مباشرة إلى الهدف مع تثبيت قصير على الهدف هو األمثل‬:‫مسارات المسح‬
eye tracking
physiological measurements
• emotional response linked to physical changes
• ‫استجابة عاطفية مرتبطة بالتغيرات الجسدية‬
• these may help determine a user’s reaction to an interface
• ‫قد تساعد في تحديد رد فعل المستخدم على الواجهة‬
• measurements include:
– heart activity, including blood pressure, volume and pulse.
– .‫ بما في ذلك ضغط الدم والحجم والنبض‬، ‫نشاط القلب‬
– activity of sweat glands::‫نشاط الغدد العرقية‬
– electrical activity in muscle: electromyogram (EMG)
– ‫ مخطط كهربية العضل‬:‫النشاط الكهربائي في العضالت‬
– electrical activity in brain: electroencephalogram (EEG)
– ‫ مخطط كهربية الدماغ‬:‫النشاط الكهربائي في الدماغ‬
• some difficulty in interpreting these physiological responses
- more research needed
• ‫ هناك حاجة إلى مزيد من البحث‬- ‫بعض الصعوبة في تفسير هذه االستجابات الفسيولوجية‬
physiological measurements
• electromyogram

• electroencephalogram
 Choosing an Evaluation Method

When in process: Design vs. Implementation

Style of evaluation: Laboratory vs. Field
Type of measures: Qualitative vs. Quantitative
Level of information: High level vs. Low level
Level of interference: Normal vs. Complex
Resources available: Time, subjects,
equipment, expertise