SlideShare a Scribd company logo
“People ignore design that ignores people.”
— Frank Chimero, Designer and Illustrator
STACKON SEMINAR SERIES
Kevin Mathew Sunny
Interaction Design Principles
2
USER INTERFACE
/ˈjuːzə(r) ˌɪntə(r)ˈfeɪs/
the means by which the user
and a computer system
interact, in particular the use of
input devices and software.
3
PUNCHED CARDS CLI GUI
AUGMENTED
REALITY
5
“Most people make the mistake of thinking design is
what it looks like. People think it’s this veneer – that the
designers are handed this box and told, ‘Make it look
good!’ That’s not what we think the design is. It’s not
just what it looks like and feels like. The design is how it
works.”
STEVE JOBS
Create the content and functions of products that
are useful, easy to use, user-friendly, technically
feasible, and of commercial interest.
Basic Interaction Design Principles
IxD
CONSISTEN
T
MEANINGF
UL
SENSIBLE
MAKE THINGS VISIBLE
Relations between users intentions,
required actions and results.
REMIND
The user of what can be done and
how to do it.
The designer should be aware
of the users mental model.
Most of users are operating the
interface just based on their
instinct. In short, when they
encounter a button, they will
think this button will be
triggered to meet their needs.
But if this button get triggered in
some other operation rather
than user's expectation, it must
be a bad design.
MENTAL MODELS
The most basic principle of interaction design is to meet the user's needs. To determine the user’s
requirements is a product manager's basic work, there are many ways and tools to help us identify the
user's needs. For examples, observing user behavior, analyzing data, building user scenarios, and more.
MEET THE USERS NEEDS
When creating user experiences,
its not so much about doing what
users expect. Instead, its about
creating a design that clearly
meets their needs at the instant
they need it.
CONSISTENCY
It requires that within the
same or familiar functions and
scenes, to use the consistent
performance, operation, and
feeling in a (or a category)
product.
USE SIMPLE LANGUAGE
Users are not a designer or a
developer, most of them do not
understand the design concept and
development process, the language
and text of the product must be easy
to understand and very close to
general user's thoughts. However, we
need to think users are busy people
instead of not smart people. So we
have to optimize some functions for
middle-class users.
Correct operating parts
must stand out obviously
and can convey the correct
information to users. Also,
the user can operate the
interface based on his/her
life experience and instinct,
no extra learning.
INTUTIVE DESIGN
Provide feedback
The "communication" between people and machines is essentially
the process of information transmission. The process of
Information send out and get back will form an effective
interaction and mutual understanding. So the timely effective
feedback and explanation are particularly important.
Allow user making mistakes
When the user operates the interface, the mistakes that they
made must be allowed. Because this may not user's fault but a
design problem. And when the user is making a mistake, it should
provide effective information to guide him to the right operation
path. We need to avoid the error-prone situation, or check and
confirm the options before the actual action prompts to the user..
13
Interaction design is "user-centered design", user
experience plays the most important role in it. To grasp
some interaction design foundation knowledge is
important, but the greatest part is to let the user
operate and master the product easily, also, interact
with it, establish the basic cognitive ability of the
product, so that the product's operating mode can meet
the design intent.
TAKE-AWAY
14
Keep the interface simple
The best interfaces are almost
invisible to the user. They avoid
unnecessary elements and are clear
in the language they use on labels
and in messaging.
Create consistency and
use common UI elements
By using common elements in your
UI, users feel more comfortable and
are able to get things done more
quickly. It is also important to create
patterns in language, layout and
design throughout the site to help
facilitate efficiency. Once a user
learns how to do something, they
should be able to transfer that skill to
other parts of the site.
Be purposeful in page layout
Consider the spatial relationships
between items on the page and
structure the page based on
importance. Careful placement of
items can help draw attention to the
most important pieces of
information and can aid scanning and
readability.
15
Strategically use color and
texture
You can direct attention toward or
redirect attention away from items
using color, light, contrast, and
texture to your advantage.
Use typography to create
hierarchy and clarity.
Carefully consider how you use
typeface. Different sizes, fonts, and
arrangement of the text to help
increase scanability, legibility and
readability.
16
Make sure that the system
communicates what’s
happening.
Always inform your users of location,
actions, changes in state, or errors.
The use of various UI elements to
communicate status and, if
necessary, next steps can reduce
frustration for your user.
Think about the defaults.
By carefully thinking about and
anticipating the goals people bring to
your site, you can create defaults
that reduce the burden on the user.
This becomes particularly important
when it comes to form design where
you might have an opportunity to
have some fields pre-chosen or filled
out.
17
Psychology plays a big part in
a user’s experience with an
application. By
understanding how our
designs are perceived, we
can make adjustments so
that the apps we create are
more effective in achieving
the goals of the user.
The Psychology Principles
Every UI/UX Designer Needs to Know
Von Restorff Effect
The Von Restorff effect (also known as the
isolation effect) predicts that when multiple
similar objects are present, the one that
differs from the rest is most likely to be
remembered!
“When multiple similar objects are present, the one that differs from the rest is most likely to be remembered!”
Serial Position Effect
The Serial Position Effect is the propensity of a
user to best remember the first and last items
in a series.
Cognitive load
Cognitive load refers to the total amount of
mental effort being used in a person’s working
memory. To put it simply, it is the amount of
thought you need to exercise in order to
complete a specific task.
“Cognitive load is the amount of thought you need to exercise in order to complete a specific task. It’s easier for users
to learn something new if they can discern it to a pattern from something they understand”
Hick’s Law
Hick’s Law describes that the time it takes for
a person to make a decision depends on the
choices available to him or her. So if the
number of choices increases, the time to
make a decision increases logarithmically.
Law of Proximity
Law of proximity is part of the Gestalt Laws of
Perceptual Organization, and it states that
objects that are near, or proximate to each
other, tend to be grouped together. To put it
in simpler terms, our brain can easily
associate objects close to each other, better
than it does objects that are spaced far apart.
This clustering occurs because humans have a
natural tendency to organise and group things
together.
“The Law of Proximity states that objects that are near, or proximate to each other, tend to be grouped together”
THANK YOU
QUESTIONS?

More Related Content

What's hot

Introduction to HCI (UCC)
Introduction to HCI (UCC)Introduction to HCI (UCC)
Introduction to HCI (UCC)
apppsych
 
Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive Design
Karen Krull
 
Impacts of HCI
Impacts of HCIImpacts of HCI
Impacts of HCI
Shwe Yee
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
Kshitiz Anand
 
Hci [6]interaction design
Hci [6]interaction designHci [6]interaction design
Hci [6]interaction design
Welly Dian Astika
 
The Psychology of Human-Computer Interaction
The Psychology ofHuman-Computer InteractionThe Psychology ofHuman-Computer Interaction
The Psychology of Human-Computer Interaction
Simon Bignell
 
Hci and psychology
Hci and psychologyHci and psychology
Hci and psychology
Dr. Shaukat Wasi
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
Abdul Rasheed Memon
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
Latesh Malik
 
Human Computer Interaction
Human Computer InteractionHuman Computer Interaction
Human Computer Interaction
Jitu Choudhary
 
HUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTIONHUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTION
Javed Ahmed Samo
 
Psychology Human Computer Interaction
Psychology Human Computer InteractionPsychology Human Computer Interaction
Psychology Human Computer Interaction
Seta Wicaksana
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interaction
Kenny Nguyen
 
5 principles of Interactive design
5 principles of Interactive design 5 principles of Interactive design
5 principles of Interactive design
Steelers50
 
Human-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
Human-Centered Artificial Intelligence: Reliable, Safe & TrustworthyHuman-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
Human-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
JalnaAfridi
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI) Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
Sachith Perera
 
User cognitive aspects for HCI
User cognitive aspects for HCIUser cognitive aspects for HCI
User cognitive aspects for HCI
HafizMImran1
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
Latesh Malik
 
Hci activity#1
Hci activity#1Hci activity#1
Hci activity#1
Desalegn Aweke
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
Lahiru Danushka
 

What's hot (20)

Introduction to HCI (UCC)
Introduction to HCI (UCC)Introduction to HCI (UCC)
Introduction to HCI (UCC)
 
Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive Design
 
Impacts of HCI
Impacts of HCIImpacts of HCI
Impacts of HCI
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
 
Hci [6]interaction design
Hci [6]interaction designHci [6]interaction design
Hci [6]interaction design
 
The Psychology of Human-Computer Interaction
The Psychology ofHuman-Computer InteractionThe Psychology ofHuman-Computer Interaction
The Psychology of Human-Computer Interaction
 
Hci and psychology
Hci and psychologyHci and psychology
Hci and psychology
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Human Computer Interaction
Human Computer InteractionHuman Computer Interaction
Human Computer Interaction
 
HUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTIONHUMAN COMPUTER INTERACTION
HUMAN COMPUTER INTERACTION
 
Psychology Human Computer Interaction
Psychology Human Computer InteractionPsychology Human Computer Interaction
Psychology Human Computer Interaction
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interaction
 
5 principles of Interactive design
5 principles of Interactive design 5 principles of Interactive design
5 principles of Interactive design
 
Human-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
Human-Centered Artificial Intelligence: Reliable, Safe & TrustworthyHuman-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
Human-Centered Artificial Intelligence: Reliable, Safe & Trustworthy
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI) Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
 
User cognitive aspects for HCI
User cognitive aspects for HCIUser cognitive aspects for HCI
User cognitive aspects for HCI
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Hci activity#1
Hci activity#1Hci activity#1
Hci activity#1
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
 

Similar to Importance of UX-UI in Android/iOS Development- Stackon

User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
Saqib Raza
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
Preeti Chopra
 
Daffodil bit(s3) comp-1649_week 02_3 example1
Daffodil bit(s3) comp-1649_week 02_3 example1Daffodil bit(s3) comp-1649_week 02_3 example1
Daffodil bit(s3) comp-1649_week 02_3 example1
University of Greenwich
 
3 example1
3 example13 example1
3 example1
Huy Trần
 
IntrIntroduction
IntrIntroductionIntrIntroduction
IntrIntroduction
Preeti Mishra
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design
paulodavila
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
Ivano Malavolta
 
Assignment 4 hci
Assignment 4 hciAssignment 4 hci
Assignment 4 hci
Jeddie Bere
 
Slides chapter 12
Slides chapter 12Slides chapter 12
Slides chapter 12
Priyanka Shetty
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to Know
Pravin Mehta
 
Dashboard UX Design - Whitepaper for Volkswagen AG
Dashboard UX Design - Whitepaper for Volkswagen AGDashboard UX Design - Whitepaper for Volkswagen AG
Dashboard UX Design - Whitepaper for Volkswagen AG
Asis Panda
 
Lecture1.ppt
Lecture1.pptLecture1.ppt
Lecture1.ppt
AnsaRasheed3
 
1User Interface Development User Interface Dev.docx
1User Interface Development User Interface Dev.docx1User Interface Development User Interface Dev.docx
1User Interface Development User Interface Dev.docx
felicidaddinwoodie
 
20 Principles: UI Design
20 Principles: UI Design20 Principles: UI Design
20 Principles: UI Design
MoodLabs
 
UI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignUI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface Design
MoodLabs
 
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
Designing Interfaces [TIDWELL] - Resumo do 1º capituloDesigning Interfaces [TIDWELL] - Resumo do 1º capitulo
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
Sabine Araujo
 
Usability thinking
Usability thinkingUsability thinking
Usability thinking
Vladimir garnele
 
HCI Quick Guide
HCI Quick GuideHCI Quick Guide
HCI Quick Guide
Emanuel Fernandes
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - Presentation
MobileNepal
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
mbrosset
 

Similar to Importance of UX-UI in Android/iOS Development- Stackon (20)

User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
Daffodil bit(s3) comp-1649_week 02_3 example1
Daffodil bit(s3) comp-1649_week 02_3 example1Daffodil bit(s3) comp-1649_week 02_3 example1
Daffodil bit(s3) comp-1649_week 02_3 example1
 
3 example1
3 example13 example1
3 example1
 
IntrIntroduction
IntrIntroductionIntrIntroduction
IntrIntroduction
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
Assignment 4 hci
Assignment 4 hciAssignment 4 hci
Assignment 4 hci
 
Slides chapter 12
Slides chapter 12Slides chapter 12
Slides chapter 12
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to Know
 
Dashboard UX Design - Whitepaper for Volkswagen AG
Dashboard UX Design - Whitepaper for Volkswagen AGDashboard UX Design - Whitepaper for Volkswagen AG
Dashboard UX Design - Whitepaper for Volkswagen AG
 
Lecture1.ppt
Lecture1.pptLecture1.ppt
Lecture1.ppt
 
1User Interface Development User Interface Dev.docx
1User Interface Development User Interface Dev.docx1User Interface Development User Interface Dev.docx
1User Interface Development User Interface Dev.docx
 
20 Principles: UI Design
20 Principles: UI Design20 Principles: UI Design
20 Principles: UI Design
 
UI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignUI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface Design
 
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
Designing Interfaces [TIDWELL] - Resumo do 1º capituloDesigning Interfaces [TIDWELL] - Resumo do 1º capitulo
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
 
Usability thinking
Usability thinkingUsability thinking
Usability thinking
 
HCI Quick Guide
HCI Quick GuideHCI Quick Guide
HCI Quick Guide
 
Design Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - PresentationDesign Theory - Ankur Sharma - Presentation
Design Theory - Ankur Sharma - Presentation
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
 

Recently uploaded

Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
ZachWylie3
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
FIDO Alliance
 
UX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business GoalsUX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business Goals
FIDO Alliance
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
Tech Guru
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
Alison B. Lowndes
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
SelfMade bd
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
Priyanka Aash
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
Razin Mustafiz
 
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
AimanAthambawa1
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
Zilliz
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 

Recently uploaded (20)

Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
 
UX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business GoalsUX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business Goals
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
 
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
COVID-19 and the Level of Cloud Computing Adoption: A Study of Sri Lankan Inf...
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 

Importance of UX-UI in Android/iOS Development- Stackon

  • 1. “People ignore design that ignores people.” — Frank Chimero, Designer and Illustrator STACKON SEMINAR SERIES Kevin Mathew Sunny Interaction Design Principles
  • 2. 2 USER INTERFACE /ˈjuːzə(r) ˌɪntə(r)ˈfeɪs/ the means by which the user and a computer system interact, in particular the use of input devices and software.
  • 5. 5 “Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think the design is. It’s not just what it looks like and feels like. The design is how it works.” STEVE JOBS
  • 6. Create the content and functions of products that are useful, easy to use, user-friendly, technically feasible, and of commercial interest. Basic Interaction Design Principles IxD
  • 7. CONSISTEN T MEANINGF UL SENSIBLE MAKE THINGS VISIBLE Relations between users intentions, required actions and results. REMIND The user of what can be done and how to do it. The designer should be aware of the users mental model. Most of users are operating the interface just based on their instinct. In short, when they encounter a button, they will think this button will be triggered to meet their needs. But if this button get triggered in some other operation rather than user's expectation, it must be a bad design. MENTAL MODELS
  • 8. The most basic principle of interaction design is to meet the user's needs. To determine the user’s requirements is a product manager's basic work, there are many ways and tools to help us identify the user's needs. For examples, observing user behavior, analyzing data, building user scenarios, and more. MEET THE USERS NEEDS When creating user experiences, its not so much about doing what users expect. Instead, its about creating a design that clearly meets their needs at the instant they need it.
  • 9. CONSISTENCY It requires that within the same or familiar functions and scenes, to use the consistent performance, operation, and feeling in a (or a category) product.
  • 10. USE SIMPLE LANGUAGE Users are not a designer or a developer, most of them do not understand the design concept and development process, the language and text of the product must be easy to understand and very close to general user's thoughts. However, we need to think users are busy people instead of not smart people. So we have to optimize some functions for middle-class users.
  • 11. Correct operating parts must stand out obviously and can convey the correct information to users. Also, the user can operate the interface based on his/her life experience and instinct, no extra learning. INTUTIVE DESIGN
  • 12. Provide feedback The "communication" between people and machines is essentially the process of information transmission. The process of Information send out and get back will form an effective interaction and mutual understanding. So the timely effective feedback and explanation are particularly important. Allow user making mistakes When the user operates the interface, the mistakes that they made must be allowed. Because this may not user's fault but a design problem. And when the user is making a mistake, it should provide effective information to guide him to the right operation path. We need to avoid the error-prone situation, or check and confirm the options before the actual action prompts to the user..
  • 13. 13 Interaction design is "user-centered design", user experience plays the most important role in it. To grasp some interaction design foundation knowledge is important, but the greatest part is to let the user operate and master the product easily, also, interact with it, establish the basic cognitive ability of the product, so that the product's operating mode can meet the design intent. TAKE-AWAY
  • 14. 14 Keep the interface simple The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging. Create consistency and use common UI elements By using common elements in your UI, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site. Be purposeful in page layout Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.
  • 15. 15 Strategically use color and texture You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage. Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and readability.
  • 16. 16 Make sure that the system communicates what’s happening. Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for your user. Think about the defaults. By carefully thinking about and anticipating the goals people bring to your site, you can create defaults that reduce the burden on the user. This becomes particularly important when it comes to form design where you might have an opportunity to have some fields pre-chosen or filled out.
  • 17. 17 Psychology plays a big part in a user’s experience with an application. By understanding how our designs are perceived, we can make adjustments so that the apps we create are more effective in achieving the goals of the user. The Psychology Principles Every UI/UX Designer Needs to Know
  • 18. Von Restorff Effect The Von Restorff effect (also known as the isolation effect) predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered! “When multiple similar objects are present, the one that differs from the rest is most likely to be remembered!”
  • 19. Serial Position Effect The Serial Position Effect is the propensity of a user to best remember the first and last items in a series.
  • 20. Cognitive load Cognitive load refers to the total amount of mental effort being used in a person’s working memory. To put it simply, it is the amount of thought you need to exercise in order to complete a specific task. “Cognitive load is the amount of thought you need to exercise in order to complete a specific task. It’s easier for users to learn something new if they can discern it to a pattern from something they understand”
  • 21. Hick’s Law Hick’s Law describes that the time it takes for a person to make a decision depends on the choices available to him or her. So if the number of choices increases, the time to make a decision increases logarithmically.
  • 22. Law of Proximity Law of proximity is part of the Gestalt Laws of Perceptual Organization, and it states that objects that are near, or proximate to each other, tend to be grouped together. To put it in simpler terms, our brain can easily associate objects close to each other, better than it does objects that are spaced far apart. This clustering occurs because humans have a natural tendency to organise and group things together. “The Law of Proximity states that objects that are near, or proximate to each other, tend to be grouped together”

Editor's Notes

  1. Many of these early computers used punched cards, prepared using keypunch machines, as the primary method of input for computer programs and data. While punched cards have been essentially obsolete in computing since 2012, some voting machines still use a punched card system. The user interface evolved with the introduction of the command line interface, which first appeared as a nearly blank display screen with a line for user input. Users relied on a keyboard and a set of commands to navigate exchanges of information with the computer. This command line interface led to one in which menus (lists of choices written in text) predominated. Finally, the graphical user interface (GUI) arrived, originating mainly in Xerox's Palo Alto Research Center, adopted and enhanced by Apple Computer and effectively standardized by Microsoft in its Windows operating systems. Elements of a GUI include such things as windows, pull-down menus, buttons, scroll bars and icons. With the increasing use of multimedia as part of the GUI, sound, voice, motion video and virtual reality are increasingly becoming the GUI for many applications.
  2. Simple, Sophisticated and Neat  Steve’s obsession with ‘perfect’ design The primary interfaces he created for video games at Atari 
  3. Allow users to predict consequence of actions Communicated through the image of the system
  4. because behind Coca-Cola, there is a system called VI (Visual Identity System) that guides all of its external image design. 
  5. Middle class is mean/mode Send Information instead of submit
  6. the system must give the feedback to the user in the form of discoloration, shape change, vibration, light emission, etc. immediately. The purpose is to inform the user that their operation is known by the device. 
  7. This is the main reason why all call-to-actions (CTAs) look different from the rest of the action buttons on a site or application! We want users to be able to differentiate between a simple action button and a CTA, in order for them to have a clear understanding what the CTA does, whilst also remembering it throughout their use of the application or site.
  8. his is why most applications nowadays ditch the hamburger menu and go for a bottom or top bar navigation, placing the most important user actions to the right or left. In the image above, you can see some examples from popular iOS applications. Each put the “Home” and “Profile” items all the way to the left and right, with serial position effect in mind.
  9. Cognitive load theory can be differentiated into three types: Intrinsic cognitive load Extraneous cognitive load Germane cognitive load I will touch upon the Intrinsic and Germane types as I think that these are the most applicable to UX design. Intrinsic Cognitive Load Intrinsic cognitive load is the difficulty associated with a specific instructional topic. It’s the main reason micro-copy and copy play a huge role in a good user experience. For example most of the time on applications’ empty states, we prompt users to complete a task. Here, the copy needs to be short, simple and with the appropriate words in order for the user to be able to easily follow the instructions. Germane Cognitive Load Germane cognitive load is the cognitive load devoted to processing information and construction of schemas. The schemas describe a pattern of thought that organises categories of information and any relationships among them. One of the reasons we use design patterns is because they’re something we’re programmed to do by default – so it’s easier for the users to recognise and learn something new if they can discern it into a pattern from something they already understand.
  10. Hick’s Law describes that the time it takes for a person to make a decision depends on the choices available to him or her. So if the number of choices increases, the time to make a decision increases logarithmically.
  11. Hick’s Law describes that the time it takes for a person to make a decision depends on the choices available to him or her. So if the number of choices increases, the time to make a decision increases logarithmically.