| When the model changes, the view is notified and updates its display to reflect the changes. | View Update |
| Types and number of people evaluating, how formal the evaluation is, and where the evaluation takes place. | Factors in Evaluation |
| Things should be placed where you'd expect them to be | Intuitive Layout |
| Effective Feedback | Visual Cues
Audio Signals
Haptic Feedback |
| Users shouldn't have to do unnecessary steps to complete tasks. | Minimal Effort |
| Buttons and menus should be easy to understand. | Clear and Simple |
| Things should be placed where you'd expect them to be | Intuitive Layout |
| Similar elements should look and behave the same way throughout the app or website. | Consistent Design |
| Use colors, icons, and animations to guide users | Visual Cues |
| Sounds can confirm actions or alert users to important information | Audio Signals |
| Physical sensations, like vibrations, can enhance the user experience. | Haptic Feedback |
| Effective Feedback | Visual Cues
Audio Signals
Haptic Feedback |
| Efficient Interaction | Quick Response Times
Minimal Effort
Easy Navigation |
| The technology should respond promptly to user input. | Quick Response Times |
| Users shouldn't have to do unnecessary steps to complete tasks. | Minimal Effort |
| Error Prevention and Recovery | Clear Error Messages
Undo/Redo Functionality
Input Validation
Contextual Help |
| When errors occur, provide informative and actionable error messages. | Clear Error Messages |
| Allow users to reverse actions and recover from mistakes. | Undo/Redo Functionality |
| Prevent invalid input by providing real-time feedback or blocking incorrect entries. | Input Validation |
| Offer assistance and guidance within the interface, such as tooltips or help menus. | Contextual Help |
| Why Good HCI Design matters? | Enhanced User Experience
Increased Productivity
Improved Accessibility |
| How to evaluate HCI Design? | Is it easy to understand?
Is it easy to navigate?
Does it respond quickly to my actions?
Does it look visually appealing? |
| It is a set of software that acts as a bridge between you (the user)
and the computer's operating system. It's what allows you to interact with applications through graphical elements like windows, buttons, and menus. | User Interface Layer |
| Touching an app icon, scrolling through your social media feed, and typing a message are all interactions made possible by the Ul layer. | Using Smartphone |
| Clicking on links, filling out online forms, and watching videos involve various Ul elements and event handling behind the scenes. | Browsing the Internet |
| Game controllers, on-screen buttons, and visual feedback are all part of the Ul layer that creates an interactive gaming experience. | Playing Video Games |
| The touchscreen, buttons, and displayed instructions are all Ul components that guide you through the transaction. | Using an ATM |
| Even modern cars utilize Ul principles in their dashboards, navigation systems, touchscreens. and | Driving a Car |
| Key Roles of the UI Layer | Handling Input and Output
Event-Driven Architecture
UI Objects and Event Handlers
Window Manager |
| The Ul layer manages the flow of information between you and the computer. When you click a mouse or type on a keyboard, the Ul layer translates
these actions into signals the computer can understand. It also takes the computer's output, like text or images, and displays it on your screen. | Handling Input and Output |
| The Ul layer works on an event-driven model. This means it's constantly listening for events, such as mouse clicks or keyboard entries. When an event happens, the Ul layer triggers a corresponding action, like opening a file or closing a window. | Event-Driven Architecture |
| Ul objects are the building blocks of the interface, like windows, buttons, and menus. Each object has an event handler, which is a piece of code that tells the computer what to do when a specific event occurs on that object.
• For example, the event handler for a button might tell the computer to open a new window when the button is clicked. | UI Objects and Event Handlers |
| The window manager is a special program that controls the placement and appearance of windows on your screen. It allows you to move, resize, and close windows, as well as switch between different applications. | Window Manager |
| Examples of Events in User Interface Layer | Mouse Events
Keyboard Events
Window Events
Touch Events
Other Events |
| Occurs when a mouse button is pressed and released over a Ul object like a button or a link. | Click |
| Happens when a mouse button is pressed and released twice in quick succession over a Ul object. | Double-click |
| These events detect when the mouse cursor moves into or out of a specific Ul object, like hovering over a button or leaving a window. | Mouse Enter/Exit |
| Occurs when any key on the keyboard is pressed down. | Key Press |
| Happens when a key is released after being pressed. | Key Release |
| These events are triggered by specific combinations of keys pressed simultaneously, like Ctrl+C for copying text or Alt+Tab for switching between windows. | Keyboard Shortcuts |
| Triggered when a user resizes a window by dragging its edges. | Window Resize |
| Occurs when a window becomes active and receives input focus, either by clicking on it or using a keyboard shortcut. | Window Focus |
| Happens when a user closes a window, usually by clicking the close button or using a keyboard shortcut. | Window Close |
| Similar to a mouse click, occurs when a finger touches and lifts from the screen. | Tap |
| Happens when a finger slides across the screen in a particular direction. | Swipe |
| Involves two fingers moving closer together or farther apart on the screen, often used for zooming. | Pinch |
| These events are generated at regular intervals by a timer and are often used for tasks like animation or periodic updates. | Timer Events |
| These events are related to changes in the system state, such as network connectivity changes or low battery warnings. | System Events |
| Like a blueprint or a set of guidelines for building something. In the world of computer programs, especially those that people interact with (like apps or websites), a framework is a way of organizing the different parts of the program so they work together smoothly.
Instead of building everything from scratch each time, you can use a framework as a starting point. | Frameworks |
| It is like a blueprint or a map that outlines the relationships between different ideas, concepts, or variables in a specific context. It provides a structure for understanding how these elements connect and influence each other. | Conceptual Framework |
| Why use Frameworks? | More Organized
More Flexible
More Productive
Easier to Maintain |
| Frameworks help manage the different parts of the program, like how it looks and how it works. | More Organized |
| It's easier to change or add new parts without messing up the whole thing. | More Flexible |
| Developers can build things faster because they're not starting from scratch every time. | More Productive |
| It's simpler to fix problems and update the program later on. | Easier to Maintain |
| It is a framework that divides an application into three interconnected parts. This approach is used in interactive program development, particularly for large-scale systems, because it helps organize and manage complex applications | The MVC (Model, View, and Controller) |
| It is the core of the application that handles the underlying problem, data, or information. It is responsible for the application's logic and computations.
For instance, in a banking application, the model would manage account balances, calculate interest, and handle wire transfers. | Model |
| It is responsible for the output and presentation of the data to the user. It uses widgets in modern GUI-based interfaces.
For example, in a banking app, the view would display account balances, transaction lists, and other relevant data. | View |
| Handles user input and manipulates the view, which in turn manipulates the model. It interprets user actions and relays them to the model.
The controller is also responsible for finding the object in focus and invoking the corresponding event handler. | Controller |
| How MVC Works Together? | User Interaction
Controller's Role
Model Update
View Update |
| The user interacts with the view (e.g., clicks a button). | User Interaction |
| The controller receives this input and interprets it. | Controller's Role |
| The controller tells the model to update the data accordingly. | Model Update |
| When the model changes, the view is notified and updates its display to reflect the changes. | View Update |
| Why MVC is Helpful? | Separation of Concerns
Flexibility
Faster Development |
| Examples of ISO's | ISO 25010
ISO 9001
Android Core App Quality |
| Focuses on quality characteristics for software products (e.g., functionality, reliability, usability, efficiency, maintainability, portability). | ISO 25010 |
| This standard sets out the requirements for a quality management system (QMS). | ISO 9001 |
| Refers to a set of guidelines and best practices established by Google to ensure that Android apps provide a consistent,
reliable, and enjoyable user experience. | Android Core App Quality: |
| What is User Interface? | It is the way a person interacts with a computer or device. It includes everything from screens and buttons to voice commands. The goal is to make these interactions as smooth and intuitive as possible. |
| How do we evaluate User Interface? | Observation
Expert Heuristic Evaluation
Measurement
Factors in Evaluation |
| This is like watching people use your app or website and asking them questions about it. You can observe how they interact with the finished product or a simulation of it. | Observation |
| Instead of users, experts in human-computer interaction (HCI) review your interface. They use a checklist of guidelines, called heuristics, to identify potential issues. | Expert Heuristic Evaluation |
| You're trying to measure how good the interface is. | Measurement |
| General principles of digital interface design based on the problems real users face when using digital systems. | Nielsen's Ten Heuristics |
| The system should always let users know what's happening. | Visibility of System Status |
| The system should use language users understand. | Match Between System and the Real World |
| Users need an easy way to undo mistakes. | User Control and Freedom |
| Things should work the same way across the interface. | Consistency and Standards |
| Design the interface to prevent mistakes. | Error Prevention |
| Make it easy for users to find options rather than having to remember them. | Recognition Rather Than Recall |
| Allow experienced users to speed up their work. | Flexibility and Efficiency of Use |
| Don't clutter the interface with unnecessary information. | Aesthetic and Minimalist Design |
| Error messages should be clear and helpful. | Help Users Recognize, Diagnose, and Recover from Errors |
| If needed, help should be easy to find and use. | Help and Documentation |
| This can include the time it takes to complete a task, how many tasks can be completed in a given time, and how many errors are made. | Quantitative Measurement |
| Gathering opinions from users using questionnaires. | Qualitative Measurement |
| Types and number of people evaluating, how formal the evaluation is, and where the evaluation takes place. | Factors in Evaluation |
