Lecturer1

HUMAN-COMPUTER INTERACTION (HCI) ‫تفاعل اإلنسان مع الحاسوب‬

TEXT ENTRY DEVICES ‫أجهزة إدخال النص‬
-keyboards (QWERTY .) ‫لوحات المفاتيح‬
-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 ‫ التخطيط‬- QWERTY

* Standard layout ‫تخطيط قياسي‬
-non-alphanumeric keys are placed differently ‫يتم وضع المفاتيح غير األبجدية بشكل‬
‫مختلف‬
-accented symbols needed for different scripts ‫الرموز الملونة المطلوبة للنصوص المختلفة‬

1 Zahra Qassim
-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 ‫يولد ترددًا على التغيير‬

ALTERNATIVE KEYBOARD LAYOUTS ‫تخطيطات لوحة المفاتيح‬

‫البديلة‬
Alphabetic
• keys arranged in alphabetic order ‫يتم ترتيب المفاتيح بترتيب أبجدي‬
• not faster for trained typists ‫ال يعتبر أسرع للمستخدمين المدربين‬
• not faster for beginners either! ‫ضا‬
ً ‫ال يعتبر أسرع للمبتدئين أي‬

DVORAK KEYBOARD ‫لوحة المفاتيح دفوراك‬

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 ‫ في‬٪15-10 ‫تحسين بنسبة‬
‫السرعة وتقليل التعب‬

2 Zahra Qassim
• But - large social base of QWERTY typists produce market pressures not to
change‫ القاعدة االجتماعية الكبيرة للمستخدمين الذين يستخدمون نظام‬- ‫ ولكن‬QWERTY ‫تولد‬
ً ‫ضغو‬
‫طا سوقية لعدم التغيير‬
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 shot preise imet letter shape fast ‫مثالية للتطبيقات‬
‫المحمولة سريعة ودقيقة في شكل الحروف‬
- once you have trained ‫بمجرد أن تتدرب‬
BUT - social resistance, plus fatigue after extended use ،‫ المقاومة االجتماعية‬- ‫ولكن‬
‫باإلضافة إلى التعب بعد استخدام مطول‬
NEW - niche market for some wearables ‫ سوق متخصص لبعض األدوات القابلة‬- ‫جديد‬
‫لالرتداء‬
HANDWRITING RECOGNITION ‫اعتراف الخط اليدوي‬
- Text can be input into the computer, using a pen and tablet ‫يمكن إدخال النص إلى‬
‫الكمبيوتر باستخدام قلم ولوحة‬
• 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 ‫التعامل مع أنماط الخط اليدوي المختلفة‬

3 Zahra Qassim
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 ‫للهواتف‬
not the same!! ‫ليست نفسها‬
*ATM like phone ‫مثل الهاتف‬
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 ،‫ليس هناك تخطيط موحد‬
"T" ً ‫المعكوس هو األكثر شيوعا‬

4 Zahra Qassim
POINTING AND DRAWING ‫اإلشارة والرسم‬
Mouse, Touchpad ‫ لوحة اللمس‬،‫الفأرة‬
Trackballs, Joysticks, tablets ‫ األجهزة اللوحية‬،‫ أجهزة الجوستيك‬،‫الكرات المتتبعة‬
Eyegaze . ‫تتبع العين‬

THE MOUSE ‫الفأرة‬

Relative movement.‫حركة نسبية‬
Movement of mouse moves screen cursor ‫حركة الفأرة تحرك مؤشر الشاشة‬.
Screen cursor oriented in (x, y) plane, mouse movement in (x, z) plane... ‫مؤشر‬
‫( الشاشة موجه في مستوى‬x ،y)‫ وحركة الفأرة في مستوى‬، (x ،z)...
The Features ‫المميزات‬
• requires physical space ‫يتطلب مساحة فيزيائية‬
• no arm fatigue ‫ال تسبب تعبًا في الذراع‬
- doesn't obscure the screen ‫ال تعترض الشاشة‬
• accurate and fast ‫دقيقة وسريعة‬
• Touchpad ‫لوحة اللمس‬.
• Trackball ‫الكرة المتتبعة‬
• Joystick ‫الجوستيك‬.
• light pen ‫القلم الخفيف‬.
• Digitizing tablet ‫اللوحة الرقمية‬
• Eyegaze ‫تتبع العين‬

5 Zahra Qassim
Lecturer 2
DISPLAY DEVICES ‫أجهزة العرض‬
BITMAP DISPLAYS ‫عرض نقطي‬
"screen is vast number of coloured dots "‫الشاشة عبارة عن عدد كبير من النقاط الملونة‬

RESOLUTION AND COLOUR DEPTH ‫الدقة وعمق األلوان‬

• Resolution ... used for ‫ المستخدمة ل‬... ‫الدقة‬
- number of pixels on screen (width x height) × ‫عدد البكسالت على الشاشة (العرض‬
)‫االرتفاع‬
- density of pixels (in pixels or dots per inch - dpi) ‫بالبكسل أو النقطة ( كثافة البكسالت‬
‫ في البوصة‬- dpi)
• Aspect ratio ‫( نسبة العرض إلى االرتفاع‬Aspect ratio)
- ration between width and height ‫النسبة بين العرض واالرتفاع‬
- 4:3 for most screens, 16:9 for wide-screen TV 4:3 ‫ للتلفزيونات‬16:9 ،‫لمعظم الشاشات‬
‫ذات الشاشة العريضة‬
• Colour depth: ‫عمق األلوان‬
- how many different colours for each pixel? ‫كم عدد األلوان المختلفة لكل بكسل‬
- black/white or greys only ‫أبيض وأسود أو درجات الرمادي فقط‬
- 256 from a pallete 256 ‫من لوحة األلوان‬
- 8 bits each for red/green/blue = millions of colours 8 ‫بت لكل من األحمر واألخضر‬
‫واألزرق = ماليين األلوان‬

6 Zahra Qassim
ANTI-ALIASING
Jaggies ‫مكافحة التشويش‬
diagonal lines that have discontinuities in to horizontal scan process ‫الخطوط‬
‫المائلة التي تحتوي على انقطاعات في عملية المسح األفقي‬
Anti-aliasing ‫مكافحة التشويش‬
sons edge by using shades of line colour ‫تمويه حافة الخط باستخدام درجات من لون الخط‬
VIRTUAL REALITY & 3D INTERACTION ‫الواقع االفتراضي والتفاعل ثالثي األبعاد‬
&AUGMENTED REALITY ‫والواقع المعزز‬
POSITIONING IN 3D SPACE ‫التموضع في الفضاء ثالثي األبعاد‬
• cockpit and virtual controls ‫قمرة القيادة والتحكم االفتراضية‬
- steering wheels, knobs and dials ... just like real! the mous of movement , , +
roll pich, yaw ‫ تما ًما مثل الواقع! حركة الماوس والدوران‬... ‫عجالت القيادة واألزرار والمؤشرات‬
‫والميل والميالن‬
• atre opies used o detet tnger portion
- VR helmets ‫الخوذ االفتراضية‬
- detect head motion and possibly eye gaze ‫كشف الحركة الرأسية وربما تحديد موضع‬
‫العين‬
• whole body tracking ‫تتبع الجسم بأكمله‬
• accelerometers strapped to limbs or reflective dots and video processing ‫مقاييس‬
‫السرعة المرتبطة باألطراف أو النقاط االنعكاسية ومعالجة الفيديو‬
- small TV screen for each eye ‫شاشة تلفزيون صغيرة لكل عين‬
- little different angles ‫زوايا مختلفة قليال‬
- 3D effect‫تأثير ثالثي األبعاد‬
VIRTUAL REALITY (VR ) &AUGMENTED REALITY (AR)
‫( الواقع االفتراضي‬VR) ‫( والواقع المعزز‬AR)

7 Zahra Qassim
Lecturer 3
THE INTERACTION ‫التفاعل‬
• interaction models ‫نماذج التفاعل‬
- translations between user and system ‫الترجمة بين المستخدم والنظام‬
• ergonomics ‫الراحة البدنية‬
- physical characteristics of interaction ‫الخصائص البدنية للتفاعل‬
• interaction styles ‫أنماط التفاعل‬
- the nature of user/system dialog ‫النظام‬/‫طبيعة حوار المستخدم‬
• context ‫السياق‬
- social, organizational, motivational ‫االجتماعي والتنظيمي والدافعي‬
MODELS OF INTERACTION ‫نماذج التفاعل‬
terms of interaction ‫مصطلحات التفاعل‬
Norman model interaction framework‫إطار عمل نموذج نورمان للتفاعل‬
SOME TERMS OF INTERACTION
domain - the area of work under study e.g. graphic design
‫ المجال الذي يتم دراسته أو العمل فيه على سبيل المثال التصميم الجرافيكي‬- ‫مجال‬.
goal
- what you want to achieve e.g. create a solid red triangle ،‫الهدف ما ترغب في تحقيقه‬
‫على سبيل المثال إنشاء مثلث أحمر صلب‬.
task
= how about do pirations or actions e.g.... select fill tool, click over triangle
‫ انقر فوق‬،‫ على سبيل المثال "حدد أداة التعبئة‬،‫ الخطوات أو اإلجراءات المطلوبة لتحقيق الهدف‬- ‫المهمة‬
‫"المثلث‬.
Note.. - traditional interaction
• use of terms differs a lot especially task/goal !!!
‫ خاصة المهمة والهدف‬،‫ التفاعل التقليدي يختلف في استخدام المصطلحات بشكل كبير‬- ‫مالحظة‬.

8 Zahra Qassim
DONALD NORMAN'S MODEL ‫نموذج دونالد نورمان‬
- Seven stages ‫سبعة مراحل‬
▪ user establishes the goal ‫يحدد المستخدم الهدف‬.
▪ formulates intention ‫يصيغ النية‬.
▪ specifies actions at interface ‫يحدد اإلجراءات على واجهة النظام‬.
▪ executes action ‫ينفذ اإلجراء‬.
▪ perceives system state ‫يتصور حالة النظام‬.
▪ interprets system state ‫يفسر حالة النظام‬
▪ evaluates system state with respect to goal ‫يقيم حالة النظام بالنسبة للهدف‬.
- Norman's model concentrates on user's view
of the interface ‫يركز نموذج نورمان على وجهة‬
‫نظر المستخدم للواجهة‬.

EXECUTION/ EVALUATION LOOP

9 Zahra Qassim
EXECUTION/ EVALUATION LOOP

USING NORMAN'S MODEL ‫استخدام نموذج نورمان‬

Some systems are harder to use than others ‫بعض األنظمة أصعب في االستخدام من غيرها‬
Gulf of Execution ‫خليج التنفيذ‬
user's formulation of actions ‫صياغة المستخدم لإلجراءات‬
actions allowed by the system ‫اإلجراءات المسموح بها من قبل النظام‬
Gulf of Evaluation ‫خليج التقييم‬
user's expectation of changed system state ‫توقعات المستخدم لتغيير حالة النظام‬
actual presentation of this state‫العرض الفعلي لهذه الحالة‬

10 Zahra Qassim
ABOWD AND BEALE FRAMEWORK ‫إطار عمل أبود وبيل‬
extension of Norman.. ‫تمديد لنموذج نورمان‬
their interaction framework has 4 parts ‫ أجزاء‬4 ‫يتكون إطار التفاعل لديهم من‬
▪ User ‫المستخدم‬
▪ Input ‫المدخالت‬
▪ System ‫النظام‬
▪ Output ‫اإلخراج‬

each has its own unique language ‫لكل جزء لغة فريدة به‬
interaction ‫ → التفاعل‬translation between languages ‫ترجمة بين اللغات‬
problems in interaction ‫ = المشاكل في التفاعل‬problems in translation ‫مشاكل في الترجمة‬
USING ABOWD & BEALE'S MODEL ‫استخدام نموذج أبود وبيل‬
user intentions ‫نوايا المستخدم‬
→ translated into actions at the interface ‫تُترجم إلى إجراءات على الواجهة‬
→ translated into alterations of system state reflected in the output display ‫تُترجم‬
‫إلى تغييرات في حالة النظام تُعكس في عرض اإلخراج‬
→ interpreted by the user ‫تُفسر من قبل المستخدم‬

general framework for understanding interaction ‫إطار عام لفهم التفاعل‬

• not restricted to electronic computer systems ‫غير مقتصر على أنظمة الحاسوب‬
‫اإللكترونية‬
• identifies all major components involved in interaction ‫يحدد جميع المكونات الرئيسية‬
‫المشاركة في التفاعل‬
• allows comparative assessment of systems ‫يسمح بالتقييم المقارن لألنظمة‬
• an abstraction‫تجريدة‬

11 Zahra Qassim
HUMAN ERROR - SLIPS AND MISTAKES ‫ االنزالقات واألخطاء‬- ‫الخطأ البشري‬
Slip ‫االنزالق‬
-understand system and goal ‫فهم النظام والهدف‬
-correct formulation of action ‫صياغة صحيحة لإلجراء‬
-incorrect action ‫إجراء غير صحيح‬
mistake‫الخطأ‬
-may not even have right goal! ‫قد ال يكون لديه حتى الهدف الصحيح‬
Fixing things? ‫إصالح األمور‬
-slip - better interface design ‫ تصميم واجهة أفضل‬- ‫االنزالق‬
-mistake - better understanding of system - ‫ فهم أفضل للنظام‬- ‫الخطأ‬

ERGONOMICS
physical aspects of interfaces industrial interfaces ‫الجوانب البدنية للواجهات الصناعية‬
ERGONOMICS
- Study of the physical characteristics of interaction ‫دراسة الخصائص البدنية للتفاعل‬
• Also known as human factors - but this can also be used to mean much of
HCI! ‫ضا ليشمل الكثير من واجهة‬ً ‫ ولكن يمكن استخدام ذلك أي‬- ‫ضا بعلم العوامل البشرية‬
ً ‫يُعرف أي‬
‫المستخدم وتفاعل اإلنسان معها‬
• Ergonomics good at defining standards and guidelines for constraining the
way we design certain aspects of systems ‫يعمل على تحديد المعايير واإلرشادات لتقييد‬
‫طريقة تصميم جوانب معينة من األنظمة‬.
ERGONOMICS - EXAMPLES
• arrangement of controls and displays ‫ترتيب عناصر التحكم والعروض‬
e.g. controls grouped according to function or frequency of use, or sequentially
‫ أو تتابعها بترتيب معين‬،‫ تجميع عناصر التحكم حسب الوظيفة أو تكرار االستخدام‬،‫على سبيل المثال‬.
• use of colour ‫استخدام األلوان‬
eg. userness of cour digest rokay, ‫ االستخدام الفعّال لأللوان‬،‫على سبيل المثال‬

12 Zahra Qassim
INDUSTRIA INTERFACES ‫واجهات صناعية‬
Office interface vs. industrial interface? ‫واجهة المكتب مقابل الواجهة الصناعية؟‬
Context matters! ‫!السياق يهم‬

... the oil soaked mouse! ... ‫!الماوس المغموس بالزيت‬

GLASS INTERFACES ? ‫واجهات الزجاج‬
• industrial interface: ‫واجهة صناعية‬
• traditional ... dials and knobs ‫ عدادات وأزرار‬... ‫التقليدية‬
• now ... screens and keypads ‫ شاشات وأجهزة المفاتيح‬... ‫اآلن‬
• glass interface ‫واجهة الزجاج‬
+ cheaper, more flexible, multiple representations, precise values ‫ أكثر‬،‫أرخص‬
‫ قيم دقيقة‬،‫ تمثيالت متعددة‬،‫مرونة‬
• not physically located, loss of context, complex interfaces ‫غير موجودة بشكل‬
‫ واجهات معقدة‬،‫ فقدان السياق‬،‫مادي‬
• may need both‫قد تحتاج إلى كليهما‬
INDIRECT MANIPULATION ‫التالعب غير المباشر‬
• office- direct manipulation ‫ التالعب المباشر‬- ‫في المكتب‬
- user interacts with artificial world ‫المستخدم يتفاعل مع عالم افتراضي‬
• industrial - indirect manipulation‫ التالعب غير المباشر‬- ‫في الصناعة‬
- user interacts with real world through interface ‫المستخدم يتفاعل مع العالم الحقيقي من‬
‫خالل واجهة‬
• issues ‫قضايا‬..
- feedback ‫ردود الفعل‬
- delays‫تأخيرات‬

13 Zahra Qassim
Lecturer 4
INTERACTION STYLES ‫أنماط التفاعل‬
dialogue ... computer and user distinct styles of interaction ‫ الكمبيوتر‬...‫الحوار‬
‫والمستخدم أنماط مميزة للتفاعل‬
COMMON INTERACTION STYLES ‫أنماط التفاعل المشتركة‬
• command line interface ‫واجهة خط األوامر‬
• menus ‫القوائم‬
• natural language ‫اللغة الطبيعية‬
• question/answer and query dialogue ‫جواب وحوار االستعالم‬/‫سؤال‬
• form-fills and spreadsheets ‫تعبئة النماذج وجداول البيانات‬
• WIMP
• point and click‫أشر وقم بالنقر‬
COMMAND LINE INTERFACE ‫واجهة سطر األوامر‬
• Way of expressing instructions to the computer directly
• function keys, single characters, short abbreviations, whole words, or a
combination ،‫ أحرف فردية‬،‫طريقة للتعبير عن التعليمات للكمبيوتر مباشرة أزرار الوظائف‬
‫ أو مزيج منها‬،‫ كلمات كاملة‬،‫اختصارات قصيرة‬
• suitable for repetitive tasks ‫مناسبة للمهام المتكررة‬
• better for expert users than novices ‫أفضل للمستخدمين الخبراء من المبتدئين‬
• offers direct access to system functionality ‫يوفر الوصول المباشر إلى وظائف‬
‫النظام‬
• command names/abbreviations should be meaningful! ‫يجب أن تكون‬
‫اختصارات األوامر ذات معنى‬/‫!أسماء‬
Typical example: the Unix system ‫ نظام يونكس‬:‫مثال نموذجي‬
MENUS ‫القوائم‬
- Set of options displayed on the screen ‫مجموعة من الخيارات المعروضة على الشاشة‬
• Options visible ‫خيارات مرئية‬
• less recall - easier to use ‫ أسهل في االستخدام‬- ‫استدعاء أقل‬
• rely on recognition so names should be meaningful ‫االعتماد على التعرف لذا يجب أن‬
‫تكون األسماء ذات معنى‬

14 Zahra Qassim
- Selection by:‫االختيار عن طريق‬
• numbers, letters, arrow keys, mouse ‫األرقام والحروف ومفاتيح األسهم والماوس‬
• combination (e.g. mouse plus accelerators) ‫ الماوس‬،‫مجموعة (على سبيل المثال‬
)‫باإلضافة إلى المسرعات‬

• Often options hierarchically grouped ‫في كثير من األحيان يتم تجميع الخيارات بشكل‬
‫هرمي‬
• sensible grouping is needed ‫هناك حاجة إلى تجميع معقول‬

• Restricted form of full WIMP system ‫ شكل مقيد لنظام‬WIMP ‫الكامل‬

NATURAL LANGUAGE ‫اللغة الطبيعية‬

• Familiar to user ‫مألوفة للمستخدم‬

• speech recognition or typed natural language ‫التعرف على الكالم أو اللغة الطبيعية‬
‫المكتوبة‬
• Problems ‫مشاكل‬
o vague‫غامض‬
o ambiguous
o hard to do well!
• Solutions ‫حلول‬
- try to understand a subset ‫حاول أن تفهم مجموعة فرعية‬
- pick on key words‫اختر الكلمات الرئيسية‬
QUERY INTERFACES ‫واجهات االستعالم‬
• Question/answer interfaces ‫واجهات األسئلة واألجوبة‬
- user led through interaction via series of questions ‫يقود المستخدم من خالل التفاعل‬
‫عبر سلسلة من األسئلة‬
- suitable for novice users but restricted functionality ‫مناسب للمستخدمين المبتدئين‬
‫ولكن وظائفه مقيدة‬
- often used in information systems ‫يستخدم السترجاع المعلومات من قاعدة البيانات‬
• Query languages (e.g. SQL) ‫لغات االستعالم‬
- used to retrieve information from database ‫يستخدم السترجاع المعلومات من قاعدة‬
‫البيانات‬

15 Zahra Qassim
- requires understanding of database structure and language syntax, hence
requires some expertise‫تتطلب فهما ً لبنية قاعدة البيانات وبالتالي تتطلب بعض الخبرة‬
،‫وصياغة اللغة‬
F..00ORM-FILLS ‫ملء النماذج‬
• Primarily for data entry or data retrieval ‫يستخدم أساسا ً إلدخال البيانات أو استرجاعها‬.
• Screen like paper form. ‫يشبه الشاشة النموذج الورقي‬.
• Data put in relevant place ‫يتم وضع البيانات في المكان المناسب‬.
• Requires ‫يتطلب‬
- good design ‫تصميم جيد‬
- obvious correction facilities ‫وجود إمكانيات واضحة للتصحيح‬.
WIMP INTERFACE ‫واجهة‬
Windows ‫نوافذ‬
Icons ‫أيقونات‬
Menus ‫قوائم‬
Pointers ‫مؤشرات‬
... or windows, icons, mice, and pull-down menus! ،‫ الماوس‬،‫ األيقونات‬،‫أو النوافذ‬
‫والقوائم القابلة للسحب‬
• default style for majority of interactive computer systems, especially PCs and
desktop machines ‫ خاصة الحواسيب‬،‫األسلوب االفتراضي لمعظم أنظمة الكمبيوتر التفاعلية‬
‫الشخصية وأجهزة سطح المكتب‬
POINT AND CLICK INTERFACES‫واجهات النقر والتحديد‬
• used in .. ‫ت ُستخدم في‬
- multimedia ‫الوسائط المتعددة‬ - web browsers ‫متصفحات الويب‬.
- hypertext ‫النص الفائق‬
• just click something! ‫مجرد النقر على شيء ما‬
- icons, text links or location on map ‫ روابط نصية أو موقع على الخريطة‬،‫أيقونات‬.
• minimal typing ‫الحد األدنى من الكتابة‬

16 Zahra Qassim
Lecturer 5
PARADIGMS ‫النماذج البرمجية‬
why study paradigms? ‫لماذا يجب دراسة النماذج البرمجية‬
Concerns ‫االهتمامات‬
- how can an interactive system be developed to ensure its
usability? ‫كيف يمكن تطوير نظام تفاعلي لضمان قابلية استخدامه‬
- how can the usability of an interactive system be demonstrated or measured?
‫كيف يمكن إظهار أو قياس قابلية استخدام نظام تفاعلي‬
History of interactive system design provides paradigms for usable designs
‫تاريخ تصميم األنظمة التفاعلية يوفر نماذج لتصميمات قابلة لالستخدام‬.
THE INITIAL PARADIGM ‫النموذج األولي‬
Batch processing ‫معالجة دفعة واحدة‬
Time-sharing‫المشاركة في الوقت الحقيقي‬
TIME-SHARING ‫التوزيع الزمني‬
• 1940s and 1950s - explosive technological growth ‫نمو تكنولوجي متفجر‬
• 1960s - need to channel the power ‫الحاجة إلى استغالل القوة‬
• J.C.R. Licklider at ARPA ‫ ليكليدر في وكالة أبحاث المشاريع المتقدمة‬.‫ آر‬.‫ سي‬.‫جي‬
• single computer supporting multiple users ‫استخدام جهاز كمبيوتر واحد لدعم عدة‬
‫مستخدمين‬
VIDEO DISPLAY UNITS ‫وحدات عرض الفيديو‬
• more suitable medium than paper ‫وسيلة أكثر مالءمة من الورق‬
• 1962 - Sutherland's Sketchpad
• computers for visualizing and manipulating data ‫استخدام الحواسيب لتصور وتالعب‬
‫البيانات بصورة مرئية‬
• one person's contribution could drastically change the history of
computing‫يمكن أن يؤثر مساهمة شخص واحد بشكل جذري على تاريخ الحوسبة‬
EXAMPLE PARADIGM ‫نموذج مثالي‬
- Batch processing ‫معالجة دفعة واحدة‬
- Timesharing ‫التوزيع الزمني‬
- Networking ‫الشبكات‬
- Graphical display ‫العروض الرسومية‬

17 Zahra Qassim
 - Microprocessor ‫المعالج‬
- WWW
- Ubiquitous Computing
A symbiosis of physical and electronic worlds in service of everyday
activities. ‫تكافل العوالم المادية واإللكترونية في خدمة األنشطة اليومية‬.
PERSONAL COMPUTING ‫الحوسبة الشخصية‬
• 1970s - Papert's LOGO language for simple graphics programming by
children ‫ لغة‬- ‫ في السبعينيات‬LOGO ‫لبرمجة الرسومات البسيطة من قبل األطفال‬
• A system is more powerful as it becomes easier to user ‫يصبح النظام أكثر قوة كلما‬
‫أصبح أسهل للمستخدم‬
• Future of computing in small, powerful machines dedicated to the individual
‫مستقبل الحوسبة في أجهزة صغيرة وقوية مخصصة للفرد‬
• Kay at Xerox PARC - the Dynabook as the ultimate personal computer ‫كاي في‬
‫ مختبر‬Xerox PARC - Dynabook ‫كأفضل حاسوب شخصي‬
WINDOW SYSTEMS AND THE WIMP INTERFACE ‫أنظمة النوافذ وواجهة‬
• humans can pursue more than one task at a time ‫يمكن للبشر متابعة أكثر من مهمة في‬
‫نفس الوقت‬
• windows used for dialogue partitioning, to "change the topic" ‫يستخدم النوافذ لتقسيم‬
‫ لـ "تغيير الموضوع‬، ‫"الحوار‬
• 1981 - Xerox Star first commercial windowing system ‫ نظام النوافذ‬- 1981 ‫عام‬
‫ التجاري األول‬Xerox Star
• windows, icons, menus and pointers now familiar interaction mechanisms
‫النوافذ والرموز والقوائم والمؤشرات آليات تفاعلية مألوفة اآلن‬
METAPHOR ‫االستعارة‬
• relating computing to other real-world activity is effective teaching
technique‫ربط الحوسبة بنشاط آخر في العالم الحقيقي هو تقنية تعليمية فعالة‬
- LOGO's turtle dragging its tail - ‫ سلحفاة‬LOGO ‫تجر ذيلها‬
- file management on an office desktop ‫إدارة الملفات على مكتب المكتب‬
- word processing as typing ‫معالجة النصوص كالكتابة‬
- financial analysis on spreadsheets ‫تحليل مالي على جداول البيانات‬
- virtual reality - user inside the metaphor ‫ المستخدم داخل االستعارة‬- ‫الواقع االفتراضي‬

18 Zahra Qassim
• Problems ‫المشاكل‬
– some tasks do not fit into a given metaphor ‫بعض المهام ال تناسب المجاز المعطى‬
– cultural bias‫التحيز الثقافي‬
DIRECT MANIPULATION ‫التالعب المباشر‬
• 1982 - Shneiderman describes appeal of graphically-based interaction• ‫عام‬
‫ شنايدرمان يصف جاذبية التفاعل المبني على الرسوم البيانية‬- 1982
- visibility of objects ‫رؤية الكائنات بوضوح‬
- incremental action and rapid feedback ‫العمليات التدريجية والتغذية الراجعة السريعة‬
- reversibility encourages exploration ‫القابلية للعكس تشجع على االستكشاف‬
- syntactic correctness of all actions ‫الصحة النحوية لجميع اإلجراءات‬
- replace language with action ‫استبدال اللغة بالعمل‬
• 1984 - Apple Macintosh
• the model-world metaphor ‫االستعارة من عالم النموذج‬
• What You See Is What You Get (WYSIWYG) ‫ما تراه هو ما تحصل عليه‬
SENSOR-BASED AND CONTEXT-AWARE INTERACTION ‫التفاعل القائم‬
‫على االستشعار والوعي بالسياق‬
• Humans are good at recognizing the "context" of a situation and reacting
appropriately ‫البشر يتمتعون بقدرة جيدة على التعرف على "السياق" للحالة واالستجابة بشكل‬
‫مناسب‬
• Automatically sensing physical phenomena (e.g., light, temp, location,
identity) becoming easier ‫يصبح االستشعار التلقائي للظواهر الفيزيائية (مثل الضوء‬
‫والحرارة والموقع والهوية) أسهل‬
• How can we go from sensed physical measures to interactions that behave as
if made "aware" of the surroundings?
‫كيف يمكننا االنتقال من القياسات الفيزيائية المكتشفة إلى تفاعالت تتصرف وكأنها "مدركة" للمحيط؟‬

19 Zahra Qassim