Introduction to GUI
Components and Events
Introduction and
motivation
Advances in GUIs
face voice gestures
Eye tracking
virtual devices
Voice Asist.
Advances in Human-Computer
Interaction - HCI
• Interaction technologies for sensor-based environments.
• Visualization of data from heterogeneous sources.
• HCI in smart and AI-based systems.
• Intelligent user interfaces.
• Human–robot interaction.
• Ubiquitous computing and implicit interaction.
• UX design for older users.
• Mobile interaction design.
• Usability of IoT systems.
• HCI in eHealth and wellbeing systems.
• Brain–computer interaction.
• New HCI methods for UX design and evaluation.
• 3D user interfaces for virtual and augmented reality systems.
• Haptics interfaces (teleoperated remote systems)
Frontiers | Progress in Brain Computer Interface: Challenges and Opportunities | Frontiers in Systems Neuroscience
https://www.frontiersin.org/articles/10.3389/fnsys.2021.578875/full
The City Brain System in China
¿Es un sistema de vigilancia o de control extremo en China?
https://www.youtube.com/watch?v=E6ZPzOE3BOc
China clasifica a los buenos y malos ciudadanos a través del crédito social
https://www.youtube.com/watch?v=pZu9N-3yn_M&ab_channel=DWEspa%C3%B1ol
The Metaverse
Qué es el metaverso y cuáles son las dudas que ¿Qué es el metaverso? - Miklos Lukacs en vivo
genera este mundo “gemelo” digital | BBC Mundo • https://www.youtube.com/watch?v=WF0B84_QEbo
• https://www.youtube.com/watch?v=XIJwITC2DeU
Advances in Software
Development
The Model-View-Controller (MVC)
Pattern
GUI libraries implement the MVC pattern. Web frameworks too
• The data is stored in the model, where it can be accessed by many views.
• The view displays the data from the model.
• The controller allows one to manipulate the data in the model.
How the MVC Works
Python
Example:
Without MVC
Python
Example:
With MVC
The Model
The
Observer
Pattern
Subject
Observers
Example:
With MVC
The View The Controller
The Program
The MVC Pattern & the Layers
Architecture
• MVC is the concept of encapsulating some data together with its processing (the
model) and isolate it from the manipulation (the controller) and the presentation
(the view) part that has to be done on a user Interface.
• A model is an object representing data or even activity, e.g. a database table.
• A view is some form of visualization of the state of the model.
• A controller offers facilities to change the state of the model. The controller mediates
communication and unifies validation
3-tier architecture
Advances in Software Development
Today, building software is a team work
• Software construction is a team effort where people with various complementary skill sets
cooperate and contribute to a project
• In consequence, there are many different jobs that one can do within the software industry
• You do not need to be an expert in all areas to work in the software industry
• Main roles: Developers, Artists, Designers, Team leaders, Managers, Marketing experts, …
• Technology and terminology change and expand overtime. So, keep learning
The VIEW and its Associated Roles
Backend Engineer
Frontend Engineer
These roles work on the VIEW:
• requirements, design and
QA Automation Engineer
implementation, testing
QA Manual Engineer
Operations Engineer
Data Engineer
Business Intelligence Analyst
UX Designer
UI Designer
What is UX?
UX: User experience
UX refers to how people interact with a product.
In the digital design world, UX refers to everything that affects a user’s interaction
with a digital product. When people use a product, they usually evaluate their
experiences according to the following criteria:
• Value. Does this product give me value?
• Function. Does this product work?
• Usability. Is it easy to use?
• General impression. Is it pleasant to use?
Check the Laws of UX. https://lawsofux.com/
GUI
GUI Matters a Lot!
• It is the means by which users benefit from the app services
• It is a determining factor to attract users
• It largely determines the degree of user satisfaction with the app
GUI
• A graphical user interface is the part of a software system that allows the
users to interact with the functionalities provided by such system.
• It is composed by a wide variety of graphic components designed to
implement specific types of interactions.
Examples:
• windows, menu bars, buttons, tables, text fields, pop-ups, scroll bars, etc.
GUIs Components
User Interfaces at the 70s
Graphic User Interfaces (GUIs)
User Interfaces at the 80s
Graphic User Interfaces (GUIs)
User Interfaces at the 90s
Graphic User Interfaces (GUIs)
UIs at the 2000s
2015 – Windows 10
Graphic User Interfaces (GUIs)
Two Important Concepts Regarding GUI
1. Usability or User Experience (UX)
Usability is the ease of use and learnability of a human-made object
• Navigation
• Familiarity
• Consistency
• Error prevention
• Feedback
• Visual clarity
• Flexibility & efficiency
Two Important Concepts Regarding GUI
2. Color Harmony
Harmony can be defined as a pleasing arrangement of colors
Color harmony delivers visual interest and a sense of order
When something is not harmonious, it's either boring or
chaotic
Color Theory: https://www.colormatters.com/
Color Theory for Designers, Part 1: The Meaning of Color — Smashing Magazine
https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
Color Matters a lot
Colors affect us in
numerous ways,
both mentally and
physically.
Graphic User Interfaces (GUIs)
Color Matters a lot
Color Wheel
P Primar T Tertiary
y P
T T
S
S
Colors affect us in
numerous ways, T
T
both mentally and
physically.
P
P
T T
S
S Secondar
y
Graphic User Interfaces (GUIs)
The Meaning of Colors
Red: Passion, Love, Anger Yellow: Happiness, Hope, Deceit
Orange: Energy, Happiness, Vitality Purple: Creativity, Royalty, Wealth
Green: New Beginnings, Abundance, Nature Brown: Nature, Wholesomeness,
Dependability
Blue: Calm, Responsible, Sadness Black: Mystery, Elegance, Evil
White: Purity, Cleanliness, Virtue Tan or Beige: Conservative, Piety, Dull
Cream or Ivory: Calm, Elegant, Purity Gray: Moody, Conservative, Formality
Color Schemes
Complementa Split-
ry color Complementar
scheme y color scheme
Rectangle
Analogous (tetradic) color
color scheme scheme
Triadic color Square color
scheme scheme
Graphic User Interfaces (GUIs)
Color Schemes - Example
Complementary color scheme
Graphic User Interfaces (GUIs)
Color Schemes - Example
Split-Complementary color scheme
Graphic User Interfaces (GUIs)
Color Schemes - Example
Rectangle (tetradic) color scheme
Graphic User Interfaces (GUIs)
