Chapter 1 Design - Introduction - PDF

chapter 1 Introduction of Human Computer / Machine Interaction 7/19/2024 1  Course Assessment  10% on Attendance  10% Assignments/ Projects  20% on the Mid-term Exam  40% on the Final Exam Some ru...

chapter 1 Introduction of Human Computer / Machine Interaction 7/19/2024 1  Course Assessment  10% on Attendance  10% Assignments/ Projects  20% on the Mid-term Exam  40% on the Final Exam Some rules 7/19/2024 2 Outliner An introduction. USER INTERFACE UI UX Frameworks of UI Interactive interface. Utility  Usability , Utility  Concepts related to the assessment of Utility / usefulness and usability 7/19/2024 3 Back ground What is Human Computer Interaction? To answer this question we have some definitions as follows : HCI (human-computer interaction) is the study of how people interact with computers. HCI is an area/ field focused on user interface (UI) Extent computers developed for successful interaction with human beings. ‫اﻟﺧﻠﻔﯾﺔ‬ ‫ﻣﺎ ھو اﻟﺗﻔﺎﻋل ﺑﯾن اﻹﻧﺳﺎن واﻟﺣﺎﺳوب؟‬ :‫ﻟﻺﺟﺎﺑﺔ ﻋﻠﻰ ھذا اﻟﺳؤال ﻟدﯾﻧﺎ ﺑﻌض اﻟﺗﻌرﯾﻔﺎت ﻋﻠﻰ اﻟﻧﺣو اﻟﺗﺎﻟﻲ‬.‫ھو دراﺳﺔ ﻛﯾﻔﯾﺔ ﺗﻔﺎﻋل اﻷﺷﺧﺎص ﻣﻊ أﺟﮭزة اﻟﻛﻣﺑﯾوﺗر‬HCI) ) ‫اﻟﺗﻔﺎﻋل ﺑﯾن اﻹﻧﺳﺎن واﻟﺣﺎﺳوب‬ UI)) ‫ﻣﺟﺎل ﯾرﻛز ﻋﻠﻰ واﺟﮭﺔ اﻟﻣﺳﺗﺧدم‬/‫اﻟﺗﻔﺎﻋل ﺑﯾن اﻹﻧﺳﺎن واﻟﺣﺎﺳوب ھو ﻣﺟﺎل‬.‫ﻣدى ﺗطور أﺟﮭزة اﻟﻛﻣﺑﯾوﺗر ﻟﻠﺗﻔﺎﻋل اﻟﻧﺎﺟﺢ ﻣﻊ اﻟﺑﺷر‬ 7/19/2024 4 It is a science that examines the design and use of computer technology, with a focus /emphasis On the interfaces between (users) and computers Human-computer interaction HCI, abbreviation for interaction ‫ ﻣﻊ اﻟﺗرﻛﯾز ﻋﻠﻰ اﻟواﺟﮭﺎت ﺑﯾن )اﻟﻣﺳﺗﺧدﻣﯾن( وأﺟﮭزة‬،‫و ﻋﻠم ﯾدرس ﺗﺻﻣﯾم واﺳﺗﺧدام ﺗﻛﻧوﻟوﺟﯾﺎ اﻟﻛﻣﺑﯾوﺗر‬ ‫ﻛﻣﺑﯾوﺗر‬ interaction ‫ اﺧﺗﺻﺎر ﻟـ‬،HCI ‫ﺗﻔﺎﻋل ﺑﯾن اﻹﻧﺳﺎن واﻟﺣﺎﺳوب‬ Discussion about questions T, F How Discu with stude 7/19/2024 5  cont….Definitions of HCI Human-computer interaction (HCI) 1-Human-computer interaction is the study, planning, and design of how people/ user and computers work together. [ Type of Communication.‫اﻟﻣﺳﺗﺧدﻣﯾن واﻟﺣﺎﺳوب ﻣﻌًﺎ‬/‫ اﻟﺗﻔﺎﻋل ﺑﯾن اﻹﻧﺳﺎن واﻟﺣﺎﺳوب ھو دراﺳﺔ وﺗﺧطﯾط وﺗﺻﻣﯾم ﻛﯾﻔﯾﺔ ﻋﻣل اﻷﺷﺧﺎص‬-1 ‫]ﻧوع اﻻﺗﺻﺎل‬ 2- HCI , is an area/field that focuses on enhancement interactions between human/user and computer ‫اﻟﻤﺴﺘﺨﺪم واﻟﻜﻤﺒﯿﻮﺗﺮ‬/‫ﺣﻘﻞ ﯾﺮﻛﺰ ﻋﻠﻰ ﺗﻌﺰﯾﺰ اﻟﺘﻔﺎﻋﻼت ﺑﯿﻦ اﻹﻧﺴﺎن‬/‫ھﻮ ﻣﺠﺎل‬HCI -2 Discussion 7/19/2024about questions T, F 6  cont….Definitions of HCI Human-computer interaction (HCI) 3- Interested with the design, implementation, and evaluation of interactive computing systems for human use and with the study of phenomena surrounding them” ‫ﻣﮭﺘﻢ ﺑﺘﺼﻤﯿﻢ وﺗﻨﻔﯿﺬ وﺗﻘﯿﯿﻢ أﻧﻈﻤﺔ اﻟﺤﻮﺳﺒﺔ اﻟﺘﻔﺎﻋﻠﯿﺔ ﻟﻼﺳﺘﺨﺪام اﻟﺒﺸﺮي ودراﺳﺔ اﻟﻈﻮاھﺮ اﻟﻤﺤﯿﻄﺔ ﺑﮭﺎ‬-3 4- Understanding How People Interact with Computers: Characteristics of computer systems, past and present, that have caused, and are causing, people’s problems. ‫ وﺗﺘﺴﺒﺐ‬،‫ اﻟﺘﻲ ﺗﺴﺒﺒﺖ‬،‫ ﻓﻲ اﻟﻤﺎﺿﻲ واﻟﺤﺎﺿﺮ‬،‫ ﺧﺼﺎﺋﺺ أﻧﻈﻤﺔ اﻟﻜﻤﺒﯿﻮﺗﺮ‬:‫ ﻓﮭﻢ ﻛﯿﻔﯿﺔ ﺗﻔﺎﻋﻞ اﻟﻨﺎس ﻣﻊ أﺟﮭﺰة اﻟﻜﻤﺒﯿﻮﺗﺮ‬-4.‫ ﻣﺸﺎﻛﻞ ﻟﻠﻨﺎس‬،‫ﻓﻲ‬ why Discussion about questions T, F 7/19/2024 7  HCI designers must consider a variety of factors: Focus on human/ 1– what people want and expect, physical limitations and abilities people possess, user abilities 2--how information processing systems work, Focus on the technology 3– what people find enjoyable and attractive. 4– Technical characteristics and limitations of the computer hardware and software must also be considered. Discussion about questions T, F 7/19/2024 8  objectives of HCI/Goals The field of human-computer interaction aims to  - Designing user interfaces (UI) and developing technologies to improve usability  -Designing user interface accessibility and user experience.(UX)  Evolution Usability ‫اﻷھداف‬/‫أھداف اﻟﺗﻔﺎﻋل ﺑﯾن اﻹﻧﺳﺎن واﻟﺣﺎﺳوب‬ ‫ﯾﮭدف ﻣﺟﺎل اﻟﺗﻔﺎﻋل ﺑﯾن اﻹﻧﺳﺎن واﻟﺣﺎﺳوب إﻟﻰ‬ ‫ ﺗﺻﻣﯾم واﺟﮭﺎت اﻟﻣﺳﺗﺧدم وﺗطوﯾر اﻟﺗﻘﻧﯾﺎت ﻟﺗﺣﺳﯾن ﻗﺎﺑﻠﯾﺔ اﻻﺳﺗﺧدام‬-.‫ ﺗﺻﻣﯾم إﻣﻛﺎﻧﯾﺔ اﻟوﺻول إﻟﻰ واﺟﮭﺔ اﻟﻣﺳﺗﺧدم وﺗﺟرﺑﺔ اﻟﻣﺳﺗﺧدم‬- ، 7/19/2024 9 How to make interact/ interaction between human and machine ? How Discuss with student 7/19/2024 10  USER INTERFACE 7/19/2024 11  DEFINING THE USER INTERFACE (UI)  User interface, design is a subset of a field of study called human-computer interaction (HCI). The user interface (UI) is to  The part of a computer and its software that people can see, hear, touch, talk , touch , and , … so on.  The user interface has essentially two components: input and output HCI).) ‫ اﻟﺗﺻﻣﯾم ھو ﺟزء ﻣن ﻣﺟﺎل اﻟدراﺳﺔ ﯾﺳﻣﻰ اﻟﺗﻔﺎﻋل ﺑﯾن اﻹﻧﺳﺎن واﻟﺣﺎﺳوب‬،‫واﺟﮭﺔ اﻟﻣﺳﺗﺧدم‬-1 ‫ واﺟﮭﺔ اﻟﻣﺳﺗﺧدم ھﻲ‬-2 ‫اﻟﺟزء ﻣن اﻟﺣﺎﺳوب وﺑراﻣﺟﮫ اﻟذي ﯾﻣﻛن ﻟﻠﻧﺎس رؤﯾﺗﮫ وﺳﻣﺎﻋﮫ وﻟﻣﺳﮫ واﻟﺗﺣدث‬.‫ اﻹدﺧﺎل واﻹﺧراج‬:‫ﺗﺗﻛون واﺟﮭﺔ اﻟﻣﺳﺗﺧدم ﺑﺷﻛل أﺳﺎﺳﻲ ﻣن ﻣﻛوﻧﯾن‬ Discussion about questions T, F 7/19/2024 12 User interfaces are consider software only ( T,F) Input is how a person communicates his / her needs to the computer.  Some common input components are the keyboard, mouse, trackball, one's finger, and one's voice. Output is how the computer conveys the results of its computations and requirements to the user..‫اﻹدﺧﺎل ھو اﻟطرﯾﻘﺔ اﻟﺗﻲ ﯾﻧﻘل ﺑﮭﺎ اﻟﺷﺧص اﺣﺗﯾﺎﺟﺎﺗﮫ إﻟﻰ اﻟﻛﻣﺑﯾوﺗر‬-1.‫ واﻟﺻوت‬،‫ واﻹﺻﺑﻊ‬،‫ وﻛرة اﻟﺗﺗﺑﻊ‬،‫ واﻟﻔﺄرة‬،‫ﺑﻌض ﻣﻛوﻧﺎت اﻹدﺧﺎل اﻟﺷﺎﺋﻌﺔ ھﻲ ﻟوﺣﺔ اﻟﻣﻔﺎﺗﯾﺢ‬.‫ اﻹﺧراج ھو اﻟطرﯾﻘﺔ اﻟﺗﻲ ﯾﻧﻘل ﺑﮭﺎ اﻟﻛﻣﺑﯾوﺗر ﻧﺗﺎﺋﺞ ﺣﺳﺎﺑﺎﺗﮫ وﻣﺗطﻠﺑﺎﺗﮫ إﻟﻰ اﻟﻣﺳﺗﺧدم‬-2 Discussion about questions T, F 7/19/2024 13  What’s UI design?  User interface (UI) design is about building interfaces with a focus on styling and interactivity.  Goal The UI designer’s goal is to create an interface the user finds easy to use and aesthetically pleasing..‫ ﯾﺗﻌﻠﻖ ﺗﺻﻣﯾم واﺟﮭﺔ اﻟﻣﺳﺗﺧدم ﺑﺑﻧﺎء واﺟﮭﺎت ﻣﻊ اﻟﺗرﻛﯾز ﻋﻠﻰ اﻟﺗﺻﻣﯾم واﻟﺗﻔﺎﻋل‬ ‫ ﯾﺗﻣﺛل ھدف ﻣﺻﻣم واﺟﮭﺔ اﻟﻣﺳﺗﺧدم ﻓﻲ إﻧﺷﺎء واﺟﮭﺔ ﯾﺟدھﺎ اﻟﻣﺳﺗﺧدم ﺳﮭﻠﺔ اﻻﺳﺗﺧدام وﻣﻣﺗﻌﺔ ﻣن اﻟﻧﺎﺣﯾﺔ‬.‫اﻟﺟﻣﺎﻟﯾﺔ‬ 7/19/2024 14  What’s UI design? UI brings together concepts from interaction design, visual design, and information architecture. User Interface (UI) Design focuses on expect, / anticipating what users may /might need to do Ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions..‫ ﯾﺟﻣﻊ ﺗﺻﻣﯾم واﺟﮭﺔ اﻟﻣﺳﺗﺧدم ﺑﯾن اﻟﻣﻔﺎھﯾم ﻣن ﺗﺻﻣﯾم اﻟﺗﻔﺎﻋل واﻟﺗﺻﻣﯾم اﻟﻣرﺋﻲ وھﻧدﺳﺔ اﻟﻣﻌﻠوﻣﺎت‬ ‫ﺗوﻗﻊ ﻣﺎ ﻗد ﯾﺣﺗﺎج اﻟﻣﺳﺗﺧدﻣون إﻟﻰ اﻟﻘﯾﺎم ﺑﮫ‬/‫ ﯾرﻛز ﺗﺻﻣﯾم واﺟﮭﺔ اﻟﻣﺳﺗﺧدم ﻋﻠﻰ ﺗوﻗﻊ‬ ‫ اﻟﺗﺄﻛد ﻣن أن اﻟواﺟﮭﺔ ﺗﺣﺗوي ﻋﻠﻰ ﻋﻧﺎﺻر ﯾﺳﮭل اﻟوﺻول إﻟﯾﮭﺎ وﻓﮭﻣﮭﺎ واﺳﺗﺧداﻣﮭﺎ ﻟﺗﺳﮭﯾل ھذه‬.‫اﻹﺟراءات‬ 7/19/2024 15  why is it( UI) important? It makes it easier for your target user/ audience to interact with it. It makes it easier for your target user/audience to clearly see what products are. In simple terms, a User Interface (UI) is the features of a device or an application that allow a user to interact with it..‫اﻟﺟﻣﮭور اﻟﻣﺳﺗﮭدف اﻟﺗﻔﺎﻋل ﻣﻌﮫ‬/‫ إﻧﮫ ﯾﺟﻌل ﻣن اﻷﺳﮭل ﻋﻠﻰ اﻟﻣﺳﺗﺧدم‬.‫اﻟﺟﻣﮭور اﻟﻣﺳﺗﮭدف رؤﯾﺔ اﻟﻣﻧﺗﺟﺎت ﺑوﺿوح‬/‫ إﻧﮫ ﯾﺟﻌل ﻣن اﻷﺳﮭل ﻋﻠﻰ اﻟﻣﺳﺗﺧدم‬.‫ھﻲ ﻣﯾزات اﻟﺟﮭﺎز أو اﻟﺗطﺑﯾﻖ اﻟﺗﻲ ﺗﺳﻣﺢ ﻟﻠﻣﺳﺗﺧدم ﺑﺎﻟﺗﻔﺎﻋل ﻣﻌﮫ‬UI) ) ‫ واﺟﮭﺔ اﻟﻣﺳﺗﺧدم‬،‫ ﺑﻌﺑﺎرات ﺑﺳﯾطﺔ‬ 7/19/2024 16  Interactive interface 7/19/2024 17 Interactive interface 1 -Define an interactive interface as a mediator between user and computer. 2- Transfers the actions of the user during the implementation of a work to the technology that helps him to carry out this mission ‫اﻟواﺟﮭﺔ اﻟﺗﻔﺎﻋﻠﯾﺔ‬.‫ ﺗﻌرﯾف اﻟواﺟﮭﺔ اﻟﺗﻔﺎﻋﻠﯾﺔ ﻛوﺳﯾط ﺑﯾن اﻟﻣﺳﺗﺧدم واﻟﺣﺎﺳوب‬-1 ‫ ﻧﻘل ﺗﺻرﻓﺎت اﻟﻣﺳﺗﺧدم أﺛﻧﺎء ﺗﻧﻔﯾذ ﻋﻣل ﻣﺎ إﻟﻰ اﻟﺗﻘﻧﯾﺔ اﻟﺗﻲ ﺗﺳﺎﻋده ﻋﻠﻰ ﺗﻧﻔﯾذ ھذه اﻟﻣﮭﻣﺔ‬-2 7/19/2024 18  Some Interfaces in the World  VCR(videocassette recorder)  Mouse  Phone  Copier : specifically : a machine for making copies of graphic matter (such as printing, drawings, or pictures)  Car  Airline reservation  Air traffic control 19  Explaining If the user wants to send an email, we have: 1- Action: Send an email. 2- Technology used: screen, keyboard, mouse, computer,...etc. 3- Interactive interface: screen, keyboard, mouse, mail program electronic Notes: We do not consider the computer from the interface because there is no direct contact between it and between the user during the execution of the work Discussion about questions- Multi choice or T,F The computer is consider the as Interactive interface ( T,F) 7/19/2024 20  Evaluation of interactive interfaces 7/19/2024 21 1- The quality of the representation of the interactive interfaces is evaluated by tow concepts : utility and usability ‫ اﻟﻔﺎﺋدة وﺳﮭوﻟﺔ اﻻﺳﺗﺧدام‬:‫ ﯾﺗم ﺗﻘﯾﯾم ﺟودة ﺗﻣﺛﯾل اﻟواﺟﮭﺎت اﻟﺗﻔﺎﻋﻠﯾﺔ ﻣن ﺧﻼل ﻣﻔﮭوﻣﯾن‬-1 A- Utility : Utility of Interactive interfaces are required to allow the user to use the technology available for easy, efficient and fun execution of work. 1 - We say about an interface that it is useful if it provides all the functions that it, needed by the user to do the work as required, ‫ إن ﻓﺎﺋدة اﻟواﺟﮭﺎت اﻟﺗﻔﺎﻋﻠﯾﺔ ﻣطﻠوﺑﺔ ﻟﻠﺳﻣﺎح ﻟﻠﻣﺳﺗﺧدم ﺑﺎﺳﺗﺧدام اﻟﺗﻛﻧوﻟوﺟﯾﺎ اﻟﻣﺗﺎﺣﺔ ﻟﺗﻧﻔﯾذ اﻟﻌﻣل ﺑﺳﮭوﻟﺔ وﻛﻔﺎءة‬:‫ اﻟﻔﺎﺋدة‬-‫أ‬.‫وﻣﺗﻌﺔ‬ ‫ ﻧﻘول ﻋن اﻟواﺟﮭﺔ أﻧﮭﺎ ﻣﻔﯾدة إذا ﻛﺎﻧت ﺗوﻓر ﺟﻣﯾﻊ اﻟوظﺎﺋف اﻟﺗﻲ ﯾﺣﺗﺎﺟﮭﺎ اﻟﻣﺳﺗﺧدم ﻟﻠﻘﯾﺎم ﺑﺎﻟﻌﻣل ﻛﻣﺎ ھو ﻣطﻠوب‬-1 1-utility is about providing functions that users need in the first place Only Discussion about questions- Multi choice or T,F 7/19/2024 22 B- usability : is interested/concerned with making functions easy and pleasant to use, ،‫ ﯾﮭﺗم ﺑﺟﻌل اﻟوظﺎﺋف ﺳﮭﻠﺔ وﻣﻣﺗﻌﺔ ﻟﻼﺳﺗﺧدام‬:‫ ﻗﺎﺑﻠﯾﺔ اﻻﺳﺗﺧدام‬-‫ب‬ Notes: 1-utility is about providing functions that users need in the first place Only when usability is combined with utility do products become useful to their users :‫ﻣﻼﺣظﺎت‬ ‫ ﻓﻘط ﻋﻧدﻣﺎ ﯾﺗم اﻟﺟﻣﻊ ﺑﯾن‬.‫ اﻟﻔﺎﺋدة ﺗﺗﻌﻠﻖ ﺑﺗوﻓﯾر اﻟوظﺎﺋف اﻟﺗﻲ ﯾﺣﺗﺎﺟﮭﺎ اﻟﻣﺳﺗﺧدﻣون ﻓﻲ اﻟﻣﻘﺎم اﻷول‬-1 ‫ﺳﮭوﻟﺔ اﻻﺳﺗﺧدام واﻟﻔﺎﺋدة ﺗﺻﺑﺢ اﻟﻣﻧﺗﺟﺎت ﻣﻔﯾدة ﻟﻣﺳﺗﺧدﻣﯾﮭﺎ‬ when usability is combined with utility do products become useful to their users 2-Utility + Usability = Usefulness Discussion about questions- Multi choice or T,F Which first during design? 7/19/2024 23  How can we judge whether the interface achieves 'utility' and 'usability? 7/19/2024 24  How can we judge whether the interface achieves 'utility' and 'usability? We can say that the interface is better as far as you can make representation, the work to be done is close to the mental representation that the user has in order to work. The quality of representation is evaluated by the concepts of 'utility' and 'utility’ ‫ ﻛﯾف ﯾﻣﻛﻧﻧﺎ اﻟﺣﻛم ﻋﻠﻰ ﻣﺎ إذا ﻛﺎﻧت اﻟواﺟﮭﺔ ﺗﺣﻘﻖ "اﻟﻔﺎﺋدة" و"اﻟﻘﺎﺑﻠﯾﺔ ﻟﻼﺳﺗﺧدام"؟‬ ‫ ﻓﺎﻟﻌﻣل اﻟذي ﯾﺗﻌﯾن اﻟﻘﯾﺎم ﺑﮫ ﻗرﯾب ﻣن اﻟﺗﻣﺛﯾل‬،‫ ﯾﻣﻛﻧﻧﺎ اﻟﻘول إن اﻟواﺟﮭﺔ أﻓﺿل ﺑﻘدر ﻣﺎ ﯾﻣﻛﻧك ﺗﻘدﯾم اﻟﺗﻣﺛﯾل‬.‫اﻟذھﻧﻲ اﻟذي ﯾﻣﺗﻠﻛﮫ اﻟﻣﺳﺗﺧدم ﻣن أﺟل اﻟﻌﻣل‬ "‫ ﯾﺗم ﺗﻘﯾﯾم ﺟودة اﻟﺗﻣﺛﯾل ﻣن ﺧﻼل ﻣﻔﮭوﻣﻲ "اﻟﻔﺎﺋدة" و"اﻟﻔﺎﺋدة‬ Discussion about questions- T,F 7/19/2024 25 Evaluation  Things we can measure – Time to learn – -Used – Rember 26  What we need? 1-Clear objective for what we want to do? 2- determine the required of interfaces ‫ ﻣﺎ اﻟذي ﻧﺣﺗﺎﺟﮫ؟‬ ‫ ھدف واﺿﺢ ﻟﻣﺎ ﻧرﯾد اﻟﻘﯾﺎم ﺑﮫ؟‬-1 ‫ ﺗﺣدﯾد اﻟواﺟﮭﺎت اﻟﻣطﻠوﺑﺔ‬-2 7/19/2024 27  Example : Utility There are two operations (Gmail, Paint Shop Pro ) , Consider we need sending messages In order to send an email: Gmail is useful, but Paint Shop Pro is not Gmail , is Useful for email related tasks 7/19/2024 28 Consider we need sending photos There are two operations (Gmail, Paint Shop Pro ) paint shop pro X is useful for the photo editing task but the Gmail is not useful for this tasks 7/19/2024 29  Usability Usability is one of the key concepts in HCI. It is interested /concerned with making systems easy to learn and use.  A usable system is: Easy to learn Easy to remember how to use Effective to use Efficient to use safe to use enjoyable to use Discussion about questions- Multi choice or T,F 7/19/2024 30  Why is usability important? To answer refer to usability : is interested/concerned with making functions easy and pleasant to use, usability is combined with utility do products become useful to their users ‫ ﻟﻣﺎذا ﺗﻌد ﻗﺎﺑﻠﯾﺔ اﻻﺳﺗﺧدام ﻣﮭﻣﺔ؟‬ ‫ راﺟﻊ‬،‫ ﻟﻺﺟﺎﺑﺔ ﻋﻠﻰ ھذا اﻟﺳؤال‬ ،‫ﯾﮭﺗم ﺑﺟﻌل اﻟوظﺎﺋف ﺳﮭﻠﺔ وﻣﻣﺗﻌﺔ ﻟﻼﺳﺗﺧدام‬/‫ ﯾﮭﺗم‬:‫ ﻗﺎﺑﻠﯾﺔ اﻻﺳﺗﺧدام‬ ‫ ﻗﺎﺑﻠﯾﺔ اﻻﺳﺗﺧدام ﺗﺗﺣد ﻣﻊ اﻟﻣﻧﻔﻌﺔ ﺣﺗﻰ ﺗﺻﺑﺢ اﻟﻣﻧﺗﺟﺎت ﻣﻔﯾدة ﻟﻣﺳﺗﺧدﻣﯾﮭﺎ‬ 7/19/2024 31  1-Ease of learning : How easy it is to learn to use the interface, and how much it needs user of time: A. In order to learn to use the interface in order to do basic work? B. In order to learn to use it for a wide range of work? :‫ وﻣﺎ ﻣﻘدار اﻟوﻗت اﻟذي ﯾﺣﺗﺎﺟﮫ اﻟﻣﺳﺗﺧدم‬،‫ ﻣﺎ ﻣدى ﺳﮭوﻟﺔ ﺗﻌﻠم اﺳﺗﺧدام اﻟواﺟﮭﺔ‬ ‫ ﻣن أﺟل ﺗﻌﻠم اﺳﺗﺧدام اﻟواﺟﮭﺔ ﻟﻠﻘﯾﺎم ﺑﺄﻋﻣﺎل أﺳﺎﺳﯾﺔ؟‬.‫ أ‬ ‫ ﻣن أﺟل ﺗﻌﻠم اﺳﺗﺧداﻣﮭﺎ ﻟﻣﺟﻣوﻋﺔ واﺳﻌﺔ ﻣن اﻷﻋﻣﺎل؟‬.‫ ب‬ Discussion about questions- T,F 7/19/2024 32  2-Easy to remember: How quickly to remember to use the interface for business Which is only done by the user, and are there mechanisms to remind him of that when needed? ‫ وھل‬،‫ ﻣﺎ ﻣدى ﺳرﻋﺔ ﺗذﻛر اﺳﺗﺧدام اﻟواﺟﮭﺔ ﻟﻸﻋﻣﺎل اﻟﺗﻲ ﯾﻘوم ﺑﮭﺎ اﻟﻣﺳﺗﺧدم ﻓﻘط‬:‫ ﺳﮭوﻟﺔ اﻟﺗذﻛر‬-2 ‫ھﻧﺎك آﻟﯾﺎت ﻟﺗذﻛﯾره ﺑذﻟك ﻋﻧد اﻟﺣﺎﺟﺔ؟‬ Discuss about the of interfa Evalua Discussion about questions- T,F 7/19/2024 33  Interactive interfaces with out usability leads to 1- Frustration 2- wasted time and errors. ‫ﺗؤدي اﻟواﺟﮭﺎت اﻟﺗﻔﺎﻋﻠﯾﺔ اﻟﺗﻲ ﺗﻔﺗﻘر إﻟﻰ ﻗﺎﺑﻠﯾﺔ اﻻﺳﺗﺧدام إﻟﻰ‬ ‫ اﻹﺣﺑﺎط‬-1.‫ إﺿﺎﻋﺔ اﻟوﻗت واﻷﺧطﺎء‬-2 7/19/2024 34 UI Design/Develop Process  Analyze user’s goals  Create design alternatives Design  Analyze designs  Implement prototype  Test Evaluate Implement  Refine 35  1 User experience (UX) 7/19/2024 36  What is the difference of UX and UI?  UI refers to the screens, buttons, toggles, icons, and other visual elements that you interact with when using a website, app, or other electronic device by Short ( input/ output) UX refers to the entire interaction you have with a product, including how you feel about the interaction ‫ ﺑﻣﺎ ﻓﻲ ذﻟك ﺷﻌورك ﺗﺟﺎه اﻟﺗﻔﺎﻋل‬،‫إﻟﻰ اﻟﺗﻔﺎﻋل اﻟﻛﺎﻣل اﻟذي ﻟدﯾك ﻣﻊ اﻟﻣﻧﺗﺞ‬UX ‫ﯾﺷﯾر ﻣﺻطﻠﺢ‬ UX related with usability while UI related both utility and usability 7/19/2024 37  What’s User experience (UX) design? User experience (UX) design is the process designers use to create products that deliver relevant and valuable experiences to users. ‫ھﻲ اﻟﻌﻣﻠﯾﺔ اﻟﺗﻲ ﯾﺳﺗﺧدﻣﮭﺎ اﻟﻣﺻﻣﻣون ﻹﻧﺷﺎء ﻣﻧﺗﺟﺎت ﺗوﻓر ﺗﺟﺎرب ذات ﺻﻠﺔ‬UX) ) ‫ ﺗﺻﻣﯾم ﺗﺟرﺑﺔ اﻟﻣﺳﺗﺧدم‬.‫وﻗﯾﻣﺔ ﻟﻠﻣﺳﺗﺧدﻣﯾن‬ UX designers create meaningful experiences by integrating elements of branding, marketing, engineering, design, and usability into a product. ‫ ﯾﻌﻣل ﻣﺻﻣﻣو ﺗﺟرﺑﺔ اﻟﻣﺳﺗﺧدم ﻋﻠﻰ إﻧﺷﺎء ﺗﺟﺎرب ذات ﻣﻌﻧﻰ ﻣن ﺧﻼل دﻣﺞ ﻋﻧﺎﺻر اﻟﻌﻼﻣﺔ‬.‫اﻟﺗﺟﺎرﯾﺔ واﻟﺗﺳوﯾﻖ واﻟﮭﻧدﺳﺔ واﻟﺗﺻﻣﯾم وﺳﮭوﻟﺔ اﻻﺳﺗﺧدام ﻓﻲ اﻟﻣﻧﺗﺞ‬ 7/19/2024 38  Step User Interface Design 7/19/2024 39  Top 5 Steps of UI/UX Design Process 1.Product Definition.- planning Product Definition is the first phase includes/ involved in the user design process. 2- Research./ element design The research is the most crucial element for a designer. ‫ﺗﺟرﺑﺔ اﻟﻣﺳﺗﺧدم‬/‫ ﺧطوات ﻓﻲ ﻋﻣﻠﯾﺔ ﺗﺻﻣﯾم واﺟﮭﺔ اﻟﻣﺳﺗﺧدم‬5 ‫ أھم‬ ‫ اﻟﺗﺧطﯾط‬-.‫ ﺗﻌرﯾف اﻟﻣﻧﺗﺞ‬.‫ﺗﺗﺿﻣﻧﮭﺎ ﻋﻣﻠﯾﺔ ﺗﺻﻣﯾم اﻟﻣﺳﺗﺧدم‬/‫ ﺗﻌرﯾف اﻟﻣﻧﺗﺞ ھو اﻟﻣرﺣﻠﺔ اﻷوﻟﻰ اﻟﺗﻲ ﺗﺗﺿﻣﻧﮭﺎ‬ ‫ ﺗﺻﻣﯾم اﻟﻌﻧﺎﺻر‬/.‫ اﻟﺑﺣث‬-2.‫ اﻟﺑﺣث ھو اﻟﻌﻧﺻر اﻷﻛﺛر أھﻣﯾﺔ ﺑﺎﻟﻧﺳﺑﺔ ﻟﻠﻣﺻﻣم‬ 7/19/2024 40  Top 5 Steps of UI/UX Design Process 3- Analysis. In this phase, make use of the things collected in the Research phase. 4- Design/ Wireframing: Wireframing represents a user interface design process of coming up with a web or mobile application’s structure. - It presents a layout of content and functionality 5- Validation or Testing..‫ اﻟﺗﺣﻠﯾل‬-3.‫ اﺳﺗﺧدم اﻷﺷﯾﺎء اﻟﺗﻲ ﺗم ﺟﻣﻌﮭﺎ ﻓﻲ ﻣرﺣﻠﺔ اﻟﺑﺣث‬،‫ﻓﻲ ھذه اﻟﻣرﺣﻠﺔ‬ ‫ ﯾﻣﺛل اﻹطﺎر اﻟﺳﻠﻛﻲ ﻋﻣﻠﯾﺔ ﺗﺻﻣﯾم واﺟﮭﺔ اﻟﻣﺳﺗﺧدم ﻟﻠﺗوﺻل إﻟﻰ ﺑﻧﯾﺔ ﺗطﺑﯾﻖ وﯾب أو‬:‫ اﻹطﺎر اﻟﺳﻠﻛﻲ‬/‫ اﻟﺗﺻﻣﯾم‬-4.‫ﺟوال‬.‫طﺎ ﻟﻠﻣﺣﺗوى واﻟوظﺎﺋف‬ ً ‫ ﯾﻘدم ﻣﺧط‬-.‫ اﻟﺗﺣﻘﻖ أو اﻻﺧﺗﺑﺎر‬-5 7/19/2024 41  Frameworks of UI 7/19/2024 42  Frameworks of UI 1- What are the design frameworks? 2- A design framework is a simple visual structure that helps User/ organize the information and ideas of a problem so you can work on it more effectively. 3- A framework is often composed of a relevant list of element /categories. 4- These element /categories are developed from initial research that should be a part of every new project. ‫أطر ﻋﻣل واﺟﮭﺔ اﻟﻣﺳﺗﺧدم‬ ‫ ﻣﺎ ھﻲ أطر ﻋﻣل اﻟﺗﺻﻣﯾم؟‬-1 ‫ إطﺎر ﻋﻣل اﻟﺗﺻﻣﯾم ھو ﺑﻧﯾﺔ ﺑﺻرﯾﺔ ﺑﺳﯾطﺔ ﺗﺳﺎﻋد اﻟﻣﺳﺗﺧدم ﻋﻠﻰ ﺗﻧظﯾم اﻟﻣﻌﻠوﻣﺎت واﻷﻓﻛﺎر اﻟﺧﺎﺻﺔ‬-2.‫ﺑﻣﺷﻛﻠﺔ ﻣﺎ ﺣﺗﻰ ﺗﺗﻣﻛن ﻣن اﻟﻌﻣل ﻋﻠﯾﮭﺎ ﺑﺷﻛل أﻛﺛر ﻓﻌﺎﻟﯾﺔ‬.‫اﻟﻔﺋﺎت‬/‫ ﻏﺎﻟﺑًﺎ ﻣﺎ ﯾﺗﻛون اﻹطﺎر ﻣن ﻗﺎﺋﻣﺔ ذات ﺻﻠﺔ ﻣن اﻟﻌﻧﺎﺻر‬-3.‫اﻟﻔﺋﺎت ﻣن ﺧﻼل اﻟﺑﺣث اﻷوﻟﻲ اﻟذي ﯾﺟب أن ﯾﻛون ﺟز ًءا ﻣن ﻛل ﻣﺷروع ﺟدﯾد‬/‫ ﯾﺗم ﺗطوﯾر ھذه اﻟﻌﻧﺎﺻر‬-4 7/19/2024 43  What is a Design Framework? 1- A design framework is a set of tools, workflows, protocols, and processes for design projects. 2 - Design frameworks provide teams with a systematic approach to solving problems and delivering projects. 3- Design frameworks help with onboarding new hires or handing over responsibilities. ‫ﻣﺎ ھو إطﺎر اﻟﺗﺻﻣﯾم؟‬.‫ إطﺎر اﻟﺗﺻﻣﯾم ھو ﻣﺟﻣوﻋﺔ ﻣن اﻷدوات وﺳﯾر اﻟﻌﻣل واﻟﺑروﺗوﻛوﻻت واﻟﻌﻣﻠﯾﺎت ﻟﻣﺷﺎرﯾﻊ اﻟﺗﺻﻣﯾم‬-1.‫ ﺗوﻓر أطر اﻟﺗﺻﻣﯾم ﻟﻠﻔرق ﻧﮭ ًﺟﺎ ﻣﻧﮭﺟﯾًﺎ ﻟﺣل اﻟﻣﺷﻛﻼت وﺗﺳﻠﯾم اﻟﻣﺷﺎرﯾﻊ‬-2.‫ ﺗﺳﺎﻋد أطر اﻟﺗﺻﻣﯾم ﻓﻲ دﻣﺞ اﻟﻣوظﻔﯾن اﻟﺟدد أو ﺗﺳﻠﯾم اﻟﻣﺳؤوﻟﯾﺎت‬-3 7/19/2024 44  Design methods Design methods are the practical building blocks of the design process. Design A method is a way to systematically solve a problem. ‫ طرق اﻟﺗﺻﻣﯾم‬.‫ طرق اﻟﺗﺻﻣﯾم ھﻲ اﻟﻠﺑﻧﺎت اﻷﺳﺎﺳﯾﺔ اﻟﻌﻣﻠﯾﺔ ﻟﻌﻣﻠﯾﺔ اﻟﺗﺻﻣﯾم‬.‫ اﻟﺗﺻﻣﯾم اﻟطرﯾﻘﺔ ھﻲ طرﯾﻘﺔ ﻟﺣل ﻣﺷﻛﻠﺔ ﺑطرﯾﻘﺔ ﻣﻧﮭﺟﯾﺔ‬ 7/19/2024 45  What is the relation between design frameworks and design methods 1- certainly true that specific design frameworks have an affinity to specific design methods; a- Design Methods is defined as the group of methods used in a specified field, b- Design framework is defined as a structure of rules or ideas. c - Design A method is a way to systematically solve a problem. d-Design a framework is a structured approach to problem solving. ‫ﻣﺎ ھﻲ اﻟﻌﻼﻗﺔ ﺑﯾن أطر اﻟﺗﺻﻣﯾم وطرق اﻟﺗﺻﻣﯾم؟‬ ‫ ﻣن اﻟﻣؤﻛد أن أطر اﻟﺗﺻﻣﯾم اﻟﻣﺣددة ﻟﮭﺎ ﺻﻠﺔ ﺑطرق ﺗﺻﻣﯾم ﻣﺣددة؛‬-1 ،‫ﻌرف طرق اﻟﺗﺻﻣﯾم ﺑﺄﻧﮭﺎ ﻣﺟﻣوﻋﺔ اﻟطرق اﻟﻣﺳﺗﺧدﻣﺔ ﻓﻲ ﻣﺟﺎل ﻣﺣدد‬ ‫ ﺗ ُ ﱠ‬-‫أ‬.‫ﻌرف إطﺎر اﻟﺗﺻﻣﯾم ﺑﺄﻧﮫ ﺑﻧﯾﺔ ﻣن اﻟﻘواﻋد أو اﻷﻓﻛﺎر‬ ‫ ﯾ ُ ﱠ‬-‫ب‬.‫ اﻟطرﯾﻘﺔ ھﻲ طرﯾﻘﺔ ﻟﺣل ﻣﺷﻛﻠﺔ ﺑﺷﻛل ﻣﻧﮭﺟﻲ‬:‫ اﻟﺗﺻﻣﯾم‬-‫ج‬.‫ ﺗﺻﻣﯾم إطﺎر ھو ﻧﮭﺞ ﻣﻧظم ﻟﺣل اﻟﻣﺷﻛﻼت‬-‫د‬ 7/19/2024 46  12 How to make the interact between human and computer Brief discussion -How to Manage interact -Increasing -Disinserting 7/19/2024 47  END 7/19/2024 48