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)