Slide 1

CHAPTER 4:
Design

Designing the User Interface:

Strategies for Effective Human-Computer Interaction

Sixth Edition

Ben Shneiderman, Catherine Plaisant,

Maxine S. Cohen, Steven M. Jacobs, and Niklas Elmqvist
in collaboration with
Nicholas Diakopoulos
Addison Wesley
is an imprint of Presented by:
Dr. AL-GAWDA
© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
 Slide 2

Organizational Support for

Design
• Design is inherently creative and unpredictable.
Interactive system designers must blend
knowledge of technical feasibility with a mystical
esthetic sense of what attracts users.
• Some companies are beginning to employ chief
design officers (CDOs), which may help to
promote usability and design thinking at every
level
• Return on Investment (ROI) business case for
focusing on usability has been made powerfully
and repeatedly
1-2

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-2

‫الدعم التنظيمي للتصميم‬

‫ يجب على مصممي النظام التفاعليين خلط المعرفة بجدوى التقنية‬.‫التصميم بطبيعته اإلبداعية ال يمكن التنبؤ به‬
.‫مع الحس الجمالي الغامض لما يجذب المستخدمين‬
‫ والتي قد تساعد على تعزيز سهولة االستخدام‬،CDOs) ( ‫بدأت بعض الشركات توظيف كبار ضباط التصميم‬
‫وتصميم التفكير على كل المستويات‬
‫للتركيز على سهولة االستخدام بقوة وبشكل متكرر‬ROI) ( ‫وقد تم إجراء حالة عائد االستثمار‬
 Slide 3

Organizational Support for

Design (concluded)
• Usability engineering has evolved into a
recognized discipline with maturing practices and
a growing set of standards
• Usability engineers and user-interface architects,
sometimes called the user experience (UX) team
are gaining experience in organizational change
• The Usability Experience Professionals
Association (UXPA) holds annual meetings
called the “World Usability Day”

1-3

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-3

‫تطورت هندسة قابلية االستخدام إلى نظام معترف به مع ممارسات النضج ومجموعة متنامية من المعايير‬
‫ الذين يطلق عليهم أحيانًا فريق تجربة المستخدم‬، ‫مهندسو قابلية االستخدام ومهندسو واجهة المستخدم‬
‫ )يكتسبون خبرة من التغيير التي تحصل في المنظمات‬UX)
‫( اجتماعات سنوية تسمى "اليوم العالمي لالستخدام" يناقشوا‬UXPA) ( ‫تعقد رابطة محترفي تجربة االستخدام‬
‫ويقيموا البرامج من ناحية عيوب التصميم السابق وافكار تصيمية جديدة‬
 Slide 4

Design Process
• Rosson and Carroll
(scenario-based) design
characterization:
– Design is a process, not a
state
– The design process is
nonhierarchical
– The process is radically
transformational
– Design intrinsically
involves the discovery of
new goals

1-4

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-4

‫عملية التصميم‬
:)‫توصيف تصميم روس وكارول (على أساس السيناريو‬
) ‫التصميم هو عملية (مستمرة) وليس حالة (تبدء وتنهي‬
‫عملية التصميم هي غير هرمية‬
‫هذه العملية هي تحول جذري‬
‫التصميم ينطوي في جوهره على اكتشاف أهداف جديدة غير متوقعة‬

‫وصف لحالة البداية لكل االشياء واالشخاص‬

‫عناصر السيناريو المقترح في البداية وصف‬

 ‫‪Slide 5‬‬

‫)‪Design Process (continued‬‬

‫‪An iterative design process would consist of four distinct phases‬‬

‫‪1-5‬‬

‫‪© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.‬‬ ‫‪4-5‬‬

‫‪Fig. 4.1‬‬
‫تتكون عملية التصميم التكراري من أربع مراحل متميزة‬

‫‪ Inception‬بداية استهالل‬
‫‪ Preliminary‬تمهيدي‬
‫‪ Evaluation‬تقييم‬

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

‫تصميم الويندوز هل مستمره او انتهت الى اليوم‬
‫تصميم الويندوز عملية مستمرة واي اصدار من الويندوز يعتبر بروجيكت‬
 Slide 6

Design Process: Phase 1 -

Requirements Analysis
• Examples of requirements regarding system behavior for
three distinct types of interactive systems: an e-commerce
website, an ATM, and a mobile messaging app

1-6

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-6

Box 4.1
‫ موقع ويب للتجارة‬:‫أمثلة للمتطلبات المتعلقة بسلوك النظام بالنسبة إلى ثالثة أنواع مختلفة من األنظمة التفاعلية‬
‫جوال‬
ّ ‫ وتطبيق مراسلة‬، ‫ وجهاز صراف آلي‬، ‫اإللكترونية‬
 ‫‪Slide 7‬‬

‫‪Design Process: Phase 1 -‬‬

‫‪Requirements Analysis‬‬
‫‪• Examples of requirements regarding system behavior for‬‬
‫‪three distinct types of interactive systems: an e-commerce‬‬
‫‪website, an ATM, and a mobile messaging app‬‬

‫‪1-7‬‬

‫‪© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.‬‬ ‫‪4-7‬‬

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

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

‫‪ 15‬ثانيه لكي تختار (لو شخص نسي بطاقته داخل الصراف ) وبعدها سوف يخبرك بظرورة اغالق هذه‬
‫الجلسة‬

‫متطليات تجربة المستخدم‬

‫يلبي االوامر للمستخدمين في اقل من نصف ثانيه‬

‫تغيير االيقونات وااللوان ليس كل الناس نمط واحد‬

 Slide 8

Design Process: Phase 2 –

Preliminary and Detailed Design
• The design phase in turn consists of two stages:
1. a preliminary stage, where the high-level design or
architecture of the interactive system is derived
2. a detailed stage, where the specifics of each
interaction is planned out
• The preliminary stage is also called architectural
or conceptual design
• Examples of suitable design methods include
sketching, paper mockups, and high-fidelity
prototypes
– Can be clarified via tools, patterns, best practices
1-8

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-8

‫ التصميم المبدئي والتفصيلي‬- 2 ‫ المرحلة‬:‫عملية التصميم‬

:‫مرحلة التصميم بدورها تتكون من مرحلتين‬
‫ حيث يتم اشتقاق التصميم أو البنية عالية المستوى للنظام التفاعلي‬، ‫مرحلة أولية‬
‫ حيث يتم تخطيط تفاصيل كل تفاعل‬، ‫مرحلة مفصلة‬
‫تسمى المرحلة التمهيدية أيضًا بالتصميم المعماري أو التصوري‬
‫ ونماذج عالية الدقة‬، ‫ نماذج باألحجام الطبيعية للورق‬، ‫تتضمن أمثلة أساليب التصميم المناسبة رس ًما‬
‫يمكن توضيحها من خالل األدوات واألنماط وأفضل الممارسات‬
 Slide 9

Design Process: Phase 3 –

Build and Implementation
• Where all the planning gets turned into actual,
running code
– The actual software and hardware engineering
needed to achieve this are outside the scope of this
book
– Included in this text is software development platforms
for interactive applications for mobile apps, the web
and PC’s
– Make sure to evaluate tool capabilities, ease of use,
ease to learn, cost, and performance
– Tailor tool choices for the size of the job

1-9

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-9

‫ البناء والتنفيذ‬- 3 ‫ المرحلة‬:‫عملية التصميم‬

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

‫يوجد شبتر لالدوات المستخدمه في التصميم‬

 Slide 10

Design Process: Phase 4 –

Evaluation
• Developers test and validate the system
implementation to ensure that it conforms
to the requirements and design set out
earlier in the process
• Chapter 5 covers a range of suitable
evaluation methods for this phase in depth

1-10

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-10

‫ التقييم‬- 4 ‫ المرحلة‬:‫عملية التصميم‬

‫المطورين اختبار والتحقق من صحة تنفيذ النظام للتأكد من أنها تتوافق مع المتطلبات والتصميم المبين في وقت‬
‫سابق في هذه العملية‬
‫يغطي الفصل الخامس مجموعة من طرق التقييم المناسبة لهذه المرحلة من العمق‬
 Slide 11

Design Frameworks

• User-centered design (UCD)

– Takes the needs, wants, and limitations of the actual
end users into account during each phase of the design
process
• Participatory design (PD)
– Direct involvement of people in the collaborative design
of the things and technologies they use
• Agile interaction design
– Development methods for self-organizing, dynamic
teams and that facilitate flexible, adaptive, and rapid
development that is robust to changing requirements
and needs 1-11

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-11

‫أطر التصميم او منصات التصميم‬

)UCD) ‫تصميم تتمحور حول المستخدم‬
‫يأخذ احتياجات وطلبات وقيود المستخدمين النهائيين الفعليين في االعتبار خالل كل مرحلة من مراحل عملية‬
‫التصميم‬
) PD)( ‫التصميم التشاركي‬
‫المشاركة المباشرة لألشخاص في التصميم التعاوني لألشياء والتقنيات التي يستخدمونها‬
‫تصميم التفاعل السريع‬
‫أساليب التطوير الخاصة بالفرق الديناميكية منظمة داخليا (ذاتية التنظيم) والتي تسهل التطوير المرن والتكيفي‬
)‫والسريع والقوي للمتطلبات واالحتياجات المتغيرة (النه سوف ياتيك مستخدم ال يعرف ماذا يريد‬
‫كل اطار من االطر السابقة له ادواته وطريقة عمله الخاص‬
 Slide 12

Participatory Design

• Intergenerational and interdisciplinary design team from

the University of Maryland’s KidsTeam working on new
human-computer interaction technologies using paper
prototypes

1-12

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-12

Fig. 4.2
‫التصميم التشاركي‬
‫ في جامعة‬KidsTeam ‫فريق تصميم متعدد األجيال (كبار صغار مراهقين ) ومتعددي التخصصات من‬
‫ميريالند يعمل على تقنيات تفاعلية جديدة بين اإلنسان والحاسوب باستخدام النماذج الورقية لتصميم مثال ايباد‬
.... ‫او تصميم لعبه‬
 Slide 13

Agile Interaction Design

• Professor Jon Froehlich and his students working in the

HCIL Hackerspace at University of Maryland, College Park

1-13

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-13

Fig. 4.3
‫تصميم التفاعل السريع‬
‫ كوليدج بارك‬، ‫البروفيسور جون فروهليتش وطالبه الذين يعملون في مجال هاكير سبيس في جامعة ميريالند‬
‫معمل للتصاميم سرع مرن ويتعامل مع المستخدم بسهولة‬
 Slide 14

Design Methods

• Practical building blocks that form the actual

day-to-day activities in the design process
– Ideation and creativity
– Surveys, interviews and focus groups
– Ethnographic observation
– Scenario development and storyboarding
– Prototyping

1-14

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-14

‫طرق التصميم‬
‫اللبنات العملية التي تشكل األنشطة الفعلية يوما بعد يوم التي تستخدم في عملية التصميم‬
‫التفكير واإلبداع‬
)‫استطالعات الرأي والمقابالت ومجموعات التركيز( تجميع مجموعة من الناس لمناقشة موضوع معين‬
‫المراقبة االثنوغرافية‬
‫وضع السيناريوهات والقصص المصورة مثال سيناريو زبون يشترى من تطبيق او من موقع‬
‫النماذج‬
 ‫‪Slide 15‬‬

‫)‪Design Methods (concluded‬‬

‫•‬ ‫)‪Illustration of how the solutions considered during a design process will grow (diverge‬‬
‫‪and shrink (converge) iteratively until it eventually fixates on a single point, the finished‬‬
‫‪product‬‬
‫•‬ ‫‪This particular design process involves three iterations, but real processes may have‬‬
‫‪1-15‬‬
‫‪more or fewer iterations.‬‬
‫‪© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved.‬‬ ‫‪4-15‬‬

‫‪Fig. 4.4‬‬

‫توضيح للكيفية التي ستنمو بها الحلول التي يتم النظر فيها أثناء عملية التصميم (تتباعد) ‪ divergence‬لدرجة‬
‫انه في هذه المرحلة ممكن ينظر الفريق انه مستحيل تنفيذ هذا المشروع نتيجة لكثرة تشعب متطلبات المستخدم‬
‫بالصبر وفهم المشروع اكثر سوف تتقلص (تتقارب) ‪ convergence‬ممكن بعدها يحصل ‪ divergence‬ثاني‬
‫لكن اقل من االول ثم ‪ convergence‬تتقارب بشكل اكبر ويحدث هذا بشكل متكرر حتى يتم تثبيت المتطلبات‬
‫في نهاية المطاف على نقطة واحدة ‪ ،‬المنتج النهائي‬
‫تتضمن عملية التصميم الخاصة هذه ثالثة تكرارات ‪ ،‬لكن العمليات الحقيقية قد تحتوي على تكرارات أكثر أو‬
‫أقل‪.‬‬
‫توسع تضييق توسع اخر اقل من االول‬
 Slide 16

Ethnographic Observation

• Preparation
– Understand organization policies and work culture
– Familiarize yourself with the system and its history
– Set initial goals and prepare questions
– Gain access and permission to observe/interview

• Field Study
– Establish rapport with managers and users
– Observe/interview users in their workplace and collect
subjective/objective quantitative/qualitative data
– Follow any leads that emerge from the visits
1-16

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-16

‫المراقبة االثنوغرافية‬
‫تجهيز او التحضير‬
)‫فهم سياسات المنظمة وثقافة العمل (عدم االلتزام بالدوام في المؤسسات الحكومية‬
‫تآلف مع النظام وتاريخه حاول تتعود على النظام‬
‫حدد األهداف األولية وأعد األسئلة‬
‫ وعمل المقابالت مع العاملين‬/ ‫الحصول على إذن رسمي والسماح بالمراقبة للعمل‬

‫دراسة ميدانية‬
‫تأسيس عالقة مع المديرين والمستخدمين عالقة عمل‬
‫ الموضوعية‬/ ‫ النوعية الموضوعية‬/ ‫ مقابلة المستخدمين في أماكن عملهم وجمع البيانات الكمية‬/ ‫مراقبة‬
‫اتبع أي خيط او دليل تظهر من الزيارات‬
 Slide 17

Ethnographic Observation
(concluded)
• Analysis
– Compile the collected data in numerical, textual, and
multimedia databases
– Quantify data and compile statistics
– Reduce and interpret the data
– Refine the goals and the process used

• Reporting
– Consider multiple audiences and goals
– Prepare a report and present the findings
1-17

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-17

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

‫التقارير‬
... ‫فكر في جماهير متعددة وأهداف متعددة في المؤسسات نظام مالي اداري‬
‫إعداد تقرير وتقديم وشرح النتائج التي توصلت اليها‬
 Slide 18

Storyboarding

• A storyboard is a graphic organizer in the form

of illustrations or images displayed in sequence for the
purpose of pre-visualizing a motion picture,
animation, motion graphic or interactive media sequence.

1-18

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-18

Fig. 4.6
‫قصص مصورة‬
‫لوحة العمل عبارة عن منظم رسومي على شكل رسوم توضيحية أو صور معروضة بالتسلسل لغرض عرض‬
.‫تصور مسبق لصورة متحركة أو رسم متحرك أو رسم متحرك أو تسلسل وسائط تفاعلية‬
 Slide 19

Prototyping

• Low-fidelity prototypes are generally created by

sketching, using post-it notes, or cutting and gluing
pieces of paper together (paper mockups)
• Medium-fidelity prototypes are often called wireframes,
and provide some standardized elements (such as
buttons, menus, and text fields), even if potentially drawn
in a sketchy fashion, and has some basic navigation
functionality
• High-fidelity prototypes look almost like the final
product and may have some rudimentary computational
capabilities; however, the prototype is typically not
complete and may not be fully functional 1-19

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-19

Fig. 4.7 and 4.8

‫النماذج واحدة من طرق التصميم االساسية‬
‫ أو قطع‬، ‫ باستخدام مالحظات ما بعدها‬، ‫عادة ً ما يتم إنشاء النماذج األولية منخفضة الدقة من خالل رسمها‬
)‫ولصق أجزاء من الورق معًا (نماذج باألحجام الطبيعية للورق‬
‫ وتوفر بعض العناصر القياسية (مثل األزرار‬،wireframes ‫عادة ً ما تسمى النماذج األولية المتوسطة بـ‬
‫ ولها بعض وظائف‬، ‫ حتى إذا كان من المحتمل أن يتم رسمها بطريقة غير واضحة‬، )‫والقوائم والحقول النصية‬
‫التنقل األساسية‬
‫تبدو النماذج األولية عالية الدقة اكثر موثوقية تقريبا وكأنها المنتج النهائي وقد تكون لديها بعض القدرات‬
‫ وقد ال يعمل بشكل كامل‬، ‫ فإن النموذج األولي غير مكتمل‬، ‫الحسابية البدائية ؛ ومع ذلك‬
‫ ان يكون شغال بشكل كامل‬prototypes ‫ال تتوقع من‬
 Slide 20

Design Tools, Practices, and

Patterns
• Design Tools
‒ Dedicated prototyping design tools are specifically designed for
the purpose of creating interface mockups rapidly and effortlessly
• Design Guidelines and Standards
‒ Guideline documents are a powerful tool for interaction design
‒ Four E’s: Education, Enforcement, Exemption, Enhancement
• Interaction Design Patterns
‒ Best-practice solutions to commonly occurring problems
specified in such a way that they can be reused and applied to
slightly different variations of a problem over and over again
‒ Model-View-Controller (MVC), document interface, Web app
page architecture

1-20

© 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. 4-20

‫أدوات التصميم والممارسات واألنماط‬

‫أالدوات المستخدمة في التصميم‬
‫صممت خصيصا أدوات(برامج تطبيقات) تصميم النماذج المخصصة لغرض إنشاء نماذج بالحجم الطبيعي‬
‫بسرعة وبدون عناء‬
‫إرشادات التصميم والمعايير‬
‫وثائق التوجيه هي أداة قوية لتصميم التفاعل‬
، ‫ واإلعفاء بعض االشياء ممكن التسامح فيها‬، ‫ واإلنفاذ من خالل الضغط او التحفيز‬، ‫ التعليم‬:‫أربعة هـ‬
‫والتحسين لمحاولة حل المشاكل‬
‫أنماط تصميم التفاعل‬
‫حلول أفضل الممارسات للمشاكل الشائعة التي تحدث بطريقة يمكن إعادة استخدامها وتطبيقها على اختالفات‬
ً ‫مختلفة قليالً للمشكلة مرارا ً وتكرارا‬
‫ بنية صفحة تطبيق الويب‬، ‫ واجهة المستندات‬،Model-View-Controller (MVC)