Introduction to UI / UX Design rumaisa mughal
“For products to be successful, they will need to meet the customer needs simultaneously from three perspectives: Usefulness, Usability and Desirability.” - Elizabeth B. Sanders (1992)
How UX Solves Problems
Every project starts with a simple question..
Who are our users? (Hint: It’s not everyone on earth!)
User Research
Surveys
Field Studies
Card Sorting
Eye-tracking
A/B Testing
Moderated User (Lab) Testing
User Research Case Study “Why are Men not using Pinterest?”
Choose Your Own Adventure Scenario
We believe that [building this feature] [for these people] will achieve [this outcome] We will know we are successful when we see [this signal from the market].
Users (Desirability)
Technology (Viability)
Interface Design
Backend, Engineering, Foundation
Information Design, Usability Engineering
UX Design Information Architecture
Interaction Design
Business (Feasibility) Vision, Goals, Analytics Budget, Demographics
Interaction Flows
Low-Fidelity Sketches
Wireframes
Prototyping Work out all the interaction flaws
Compositions
Usability The ability to use something, and how easy that something can be used.
Easy to learn
Inform User
Less steps
Visual System
Undo Mistakes
To the Point
IT IS BETTER TO SHOW PEOPLE A
LITTLE BIT
OF INFORMATION AND LET THEM CHOOSE IF THEY WANT
MORE DETAILS
INSTEAD OF JUST DESCRIBING THINGS,
SHOW AN EXAMPLE
IF SOMETHING IS
CLICKABLE
MAKE SURE IT
LOOKS LIKE IT IS CLICKABLE
IF A TASK IS
ERROR-PRONE, BREAK IT UP INTO
SMALLER CHUNKS
DON’T MAKE PEOPLE
REMEMBER THINGS. PEOPLE CAN ONLY REMEMBER
3-4 ITEMS AT A TIME
CLUTTERED PEOPLE CAN’T FIND INFORMATION IF PAGES ARE
Enjoyable
Usable
Functional
The user prefers the solution
The user is able to use the solution
The solution does something
“Fail Fast, Learn Fast, Move Fast!” The Lean (UX) Startup
“When I design, I work very hard to make the interface experience feel like there’s a human on the other end, not a computer.” - Aaron Walter
CHANGE Freedom / Risk / Mastery
SOCIAL BELONGING
INDIVIDUAL FULFILLMENT
Community / Connection
Independence
ORDER Stability / Control
“
EVERYTHING we interact with has an interface
”
Warm Colors
Cool Colors
Neutral Colors
.5 min
Upbeat colors, gives Warmth and Joy; can also cause Irritation and Restlessness
Good fortune, Relaxing, Health enhancing, and Organic
Earth, Raw, Rough, Old, Rugged, Serious, Rich
Caring, Tenderness, Innocence, Self-worth, Love Heart muscles can’t race fast enough
Sophisticated, Refined, Corporate, and Luxurious.
Luxury, Wealth, Elegance, Royalty, Mystery, Nobility, and Wisdom
Peace, Calm, Relaxation, and Reliability Appetite suppressant - Colder
Vibrant, Energetic and Fun
Intensity, Love, Energy, Excitement, Extreme, Brave Research: Wearing red makes team more confident, aggressive and dominant - makes people impatient.
Power, Evil, Strength, Intelligence, Stylish, Timeless Makes people look thinner - objects tend to look heavier, or grim.
Luxury, Wealth, Elegance, Royalty, Mystery, Nobility, and Wisdom
Reading Gravity Primary Optical Area
Strong Fallow Area
Weak Fallow Area
Terminal Area
Create Visual Hierarchy
Typography 101 The use of typography, symbols, color, and other static and dynamic graphics are used to convey facts, concepts and emotions. This makes up an information-oriented, systematic graphic design which helps people understand complex information. Successful visual communication through information-oriented, systematic graphic design relies on some key principles of graphic design.
Typography 101 The use of typography, symbols, color, and other static and dynamic graphics are used to convey facts, concepts and emotions. This makes up an information-oriented, systematic graphic design which helps people understand complex information. Successful visual communication through information-oriented, systematic graphic design relies on some key principles of graphic design.
Pay attention to Hyphenation, Widows and Orphans
Treat Text as User Interface
‘Comic Sans’ is a sin! Do not use it!
Look: 10% Feel: 30%
The things you use: 60% Usability, Proficiency, Reliability, Functionality
“User Interface is like a joke, if you have to explain it, it’s not that good.”