Lesson Interaction Between the User and the Computer - Software Engineering - ثالث ثانوي

Lesson 2 Interaction Between the User and the Computer Link to digital lesson www.ien.edu.sa What is Human-Computer Interaction (HCI)? Human-Computer Interaction (HCI) refers to the study of interaction between humans and computers, and is concerned with designing and adapting systems for human use, with a focus on designing interfaces used by people (users) and computers. Researchers in this field note the ways in which humans interact with computers and the various design techniques that allow humans to interact with computers in new ways. As mentioned earlier, the principle of HCI consists of three components: the user, the computer, and the interaction loop, which is defined as the flow of information between the human and the computer. Human-Computer Interaction Majors The study of human-computer interaction extends to draw data from the fields of human factors engineering and cognitive science as well as computer science. HCI is concerned with the cognitive and academic aspects of user behavior, whose outputs are essential inputs to the applied field upon which User Experience (UX) and User Interface (UI) designs are based for various applications such as smartphone applications and websites. Thus, the collaboration between researchers in the field of HCI and designers on the user experience and interface ultimately leads to perfect designs that meet the needs of users. Computer science Human-Computer interaction Cognitive science وزارة التعليم Ministry of Education 84 2024-1446 Human factors engineering Figure 2.15: Human-Computer Interaction

User Experience Design (UX) User experience (UX) refers to a person's impressions and attitudes about using a particular product, system, or service. This includes the practical and emotional aspects of human-computer interaction. User experience also includes a user's perception of various aspects of the system such as utilities, ease of use, and efficiency, and this concept can be applied to any system such as ATMs, cars, phones, etc. Key factors affecting user experience: The concept of user experience has expanded to include many aspects in addition to usability, and it has become important to pay attention to all aspects of user experience in order to deliver successful products to the market. To improve user experience, the design, contents and functionality of the system should be: 1. Useful: Meets users' needs. 2. Usable: The system can be used easily and intuitively. 3. Attractive in appearance: The design elements are used in a unique way that attracts the user and gives the system its own identity. 4. Easily Findable: Its contents can be easily browsed and accessed from within or outside the system. 5. Accessible: The design should include users with special needs in its characteristics. 6. Credible: The system derives its content from reliable and approved sources. 7. Valuable: The product must deliver value to the business which creates it and to the user who buys or uses it. Accessible and usable وزارة التعليم Ministry of Education 2024-1446 --> Useful Attractive ← UX --> Credible Valuable ------- ------> Easily findable Figure 2.16: Key factors affecting UX 85

User Interface (UI) The user interface (UI) is the point of interaction and communication between the human and the computer inside the device. It can be said that the user interface is the graphic form of the application, and it contains buttons, readable texts, images, scroll bars, and text entry fields, as well as many other elements that the user interacts with, including screen layout, transitions, GUI animations, all the interaction subtleties and any animation effects that need to be designed. jeart Home 22.6 17° CLOUDY Meday Theaday Rechesclay Music Security Camera Figure 2.17: UI for tablet devices The task of user interface (UI) designers is to define the look and of both the application and the interface. They must choose color schemes, button shapes, font widths, and text font types. Considerations for creating a good user interface: User interface design considerations are related to many other sciences and disciplines such as psychology and the visual arts, including the following: 1. The shape of buttons and other elements should be indicative of their function and the design should allow the user to easily explore these functions. OFF ON 2. Interfaces must be designed and laid out properly and ergonomically for the us user, so that controls are adjacent to their related objects. وزارة التعليم Ministry of Education 86 2024-1446

3. Interface elements must take into account the visual capabilities of the user in terms of font size, text adjustment, and color brightness and contrast. clear text 4. The interface should provide its users with messages and signals showing the system's response to the commands to be executed and providing feedback. Below are some examples: Product added. Warning: Product description cannot be empty. The product could not be added. Ensure that the product name is valid. 5. Consider providing as many default settings as possible to reduce the burden on the user (for example, providing pre-populated forms). Below are some examples: What do you want to see next? Do you have any product suggestions or ideas? We are all ears. وزارة التعليم Ministry of Education 2024-1446 Name Khaled Abdullah Autofill E-mail address khaled@email.com Tell us why you like this idea? Send Autofill Idea details 87

How Do UX and UI Work Together? The concepts of UX and UI are often confused in web design and smartphone applications. The difference is that user interface is concerned with the graphical layout of an application or website, while user experience focuses on how easy or difficult it is to interact with user interface elements. Therefore, user experience usually dictates user interface specifications. Desktop Computer and Smartphone The use of mobile devices has now overtaken the use of computers as the way most people browse, shop, use social media and perform other online tasks. Therefore, it is important to consider the device that the user is using when developing websites and smart applications, which we will address in the coming lessons. When designing applications and websites, it should be taken into account how they will work on all devices (mobile and desktop), and how the user experience differs when using the application on the mobile phone from using the desktop computer, and to understand this, you must realize the important factors that make the mobile phone different. Once you understand this difference, you can take these factors into consideration when designing your mobile application or making your decision to design the website. The Main Characteristics of Desktop Computers and Mobile Phones In the following table, the characteristics of mobile devices (mobile phones and tablets) and computers (desktops and laptops) are illustrated. Table 2.3: Main device properties Property Screen size Screen resolution Desktop and laptop computers Desktop computers can connect to multiple screens, which enables you to choose what suits you best. Desktop or laptop screens are usually between 15-30 inches. The smallest laptop screen contains 2304 x 1440 pixels. Mobile phones/tablets Mobile phone screens vary by manufacturer and model. However, they are always smaller than desktop or laptop computers, and the screen size usually ranges between four and seven inches. Most mobile devices have fewer pixels than desktop computers, for example, a high-quality smartphone screen has 1334 x 750 pixels. Transport Although laptops are usually light and portable by design, they cannot compete with smartphones in this regard. Mobile phones are lightweight and can fit in a purse or pocket, they are designed to go everywhere with you. A tablet may not fit in your pocket, but it is still light and can be carried in one hand. عاب التعليم Ministry of Education 88 2024-1446

Property Input methods Desktop and laptop computers The keyboard or mouse is used for input, and it is smooth and easy to use for the majority of users, and it comes in different sizes. Mobile phones/tablets Mobile phones may have an on-screen keyboard or touch screen that is much smaller than a computer, and users with large fingers or vision problems can have difficulty typing. Software Operating system Internet Connection Because of their less restrictive size, components, and power requirements, desktop and laptop computers can run more powerful software than a smartphone or tablet. Desktop and laptop operating systems are designed to take advantage of fast CPUs, large disk space, large amounts of RAM, and use new chipset features that most mobile devices don't have. Microsoft's operating system is closed source. Desktop computers are characterized by the ability to connect to the wired Internet network Ethernet, and most of them require the use of a wireless network card USB Wi-Fi Adapter to connect to the wireless network, most laptops contain a wireless and wired network card. Despite the huge development in the capabilities of mobile phones, they still fall short of running huge programs compared to the performance of traditional desktop or laptop computers. Mobile operating systems (Android) and (iOS) are designed to run on a specific set of devices without giving you full access to your system hardware. They also have a strict system of hardware requirements because the mobile app ecosystem is closely tied to specific hardware features. In other words, you can't run the latest apps on an older mobile OS, and vice versa. The Android operating system is open source. Mobile phones and tablets can connect to Wi-Fi networks to access the Internet. Smartphones and most tablets can also connect to a mobile data network, which allows access to the Internet from almost anywhere, but it can be more expensive. Functional Differences between Mobile Phones and Desktop Computers Mobile phones and computers have different functions and both are important in their own way. Mobile phones provide the flexibility necessary for the user to search online or use e-mail anywhere, while the computer is used for more complex tasks. Using both at the same time can facilitate your .work and help you accomplish your tasksة التعليم Ministry of Education 2024-1446 89

Android User Interface and Windows Operating System The increasing reliance of many companies on web applications and mobile applications has led companies to focus on improving the user interface in order to improve the overall user experience, so there is a wide variety of types of user interfaces. Both Microsoft Windows and Google Android OS support Graphical User Interface (GUI), which means that instead of typing commands, different graphical objects such as icons are handled using a pointing device. The basic principle of different GUIs is very similar. Using your knowledge of how to use a Windows user interface we'll walk you through how to use Android and some other GUIS. desktop tablet header image social medio overlay mable 0 reponsive grid breakpoints? Figure 2.18: GUI considerations in application development The following are some of the main characteristics of the UI and UX of Microsoft Windows and Google Android, which are some of the most used operating systems. Microsoft Windows User interface Windows uses dialog boxes that contain various visual elements that quickly show the user as much relevant information as possible, and with the use of the mouse and minimal keyboard typing, the user can select appropriately and launch the required applications/commands. Google Android User interface User interface design requirements for mobile devices differ significantly from those for desktop computers, as the small screen size and touch screen controls force special considerations when designing the user interface to ensure usability, readability and consistency. In the mobile interface, icons could be used more extensively and controls may be automatically hidden when not used. The icons themselves need to be smaller, and there isn't enough room to display a label for everything on the screen which can cause some confusion to the user. Users must ⚫ be able to understand each command's icon and its meaning either through readable text or an pill understandable graphical representation. Ministry of Education 90 2024-1446 Figure 2.19: User interface on different device types

Exercises 1 Answer the following questions based on what you learned in this lesson. 1. What is meant by human-computer interaction (HCI)? Mention its components. 2. What is User Interface Design (UI)?. 2 Briefly explain the difference between user experience and user interface. وزارة التعليم Ministry of Education 2024-1446 UX UI 91

3 Put a tick ✓ in front of the appropriate device type for each of the following descriptions: 1. Low cost devices with high specifications. 2. Its screen size can be up to 30 inches. 3. Screen resolution is usually higher. 4. These devices are light in weight and fit in the pocket. 5. It is usually attached to a mouse and keyboard. Desktop Portable Computers Devices 4 Compare the means by which desktop and mobile devices connect to the Internet. وزارة التعليم Ministry of Education 92 ZU24-1446

5 Read the sentences and tick ✓ True or False. 1. HCI exclusively studies the business logic development of applications. 2. One of the most important similarities between the mobile and desktop experience is that people use them in the same way and for the same types of tasks. 3. HCI includes the scientific field of cognitive science. 4. The operating system has no effect on the speed of a mobile phone or desktop computer. 5. Mobile devices give you full access to all the hardware resources. 6. Mobile data networks are the cheapest means to connect to the Internet. 7. Microsoft Windows and Google Android use the same GUI components. 8. Mobile device users have the opportunity to search online while commuting or using public transportation. 9. Mobile devices are more commonly used by people in office environments than computers. 10. The difference in smartphone and desktop computer usage affects the types ⚫of websites and apps that work well on each device. وزارة التعليم Ministry of Education 2024-1446 True False 93

6 List some of the main UI and UX features of the Google Android and Microsoft Windows operating systems. Google Android operating system Microsoft Windows operating system 7 Explain the difference between the operating systems of desktop computers and mobile phones. وزارة التعليم Ministry of Education 94 2024-1446