Post on 03-Dec-2015
description
UX Introduction
I’m working in Marvel: War of Heroes project
and started learning UX & UI from SQUAD project
UI?UX?Why?How?What’s next?
What is UI?
Stands for “User Interface”
It’s everything you see on the screen:
What is UI?
Stands for “User Interface”
It’s everything you see on the screen: Information Inputs Animations
Main buttons are still clear if the screen is blur
What is UX?
Stands for “User Experience”
Three components of UX: Usability Look Feel
What is UX?
Stands for “User Experience”
Three components of UX: Usability (How to use?) Look (Color, graphic, theme...) Feel (Joy of use, Interaction, Reaction)
Good design = Good UI + Good UX
Good design = Good UI + Good UX
Bad news: It’s mostly gifted
Good design = Good UI + Good UX
Good news: It can be learnt
Good graphic, bad UX
Good graphic, bad UX
Bad graphic, good UX
Bad graphic, good UX
Bad graphic, good UX
Good graphic, good UX
Good graphic, good UX
Can you guess where the BUY button is?
Good graphic, good UX
Good graphic, good UX
Can you guess where clickable areas are ?
Good graphic, good UX
Good graphic, good UX
Good graphic, good UX
Bad graphic, bad UX
Bad graphic, bad UX
Bad graphic, bad UX
Why should we care ?
Users need tools to solve their problems
If they feel good, they stay
Why should we care ?
Users need tools to solve their problems
If they feel good, they stay, then pay
Why should we care ?
Users need tools to solve their problems
If they feel good, they stay, then pay
They don’t care about: Your superb data design Your high-end technology YOU
Why should we care ?
CS cost decreases after improving UX
Revenue increases after improving UX
Why should we care ?
CS cost decreases 90% after improving UX
Revenue increases 300M$ after improving UX
Basic UX design process
1. Research & strategy
2. Wireframe
3. Mockup
4. Prototype
Basic UX design process
1. Research & strategy
2. Wireframe
• Basic presentation of design elements
• Used for communication, documentations
3. Mockup
4. Prototype
Basic UX design process
1. Research & strategy
2. Wireframe
3. Mockup
• Static visualization
• Used for visual feeling
4. Prototype
Basic UX design process
1. Research & strategy
2. Wireframe
3. Mockup
4. Prototype
• Add interaction
• Used for user testing
What’s coming next ?
1. Common design mistakes
2. Basic design principles
3. Basic emphasizing techniques
4. UI components
5. Animations in UI
6. Trends
7. Wireframe, Mockup, Prototype
What’s coming next ?
1. Common design mistakes
2. Basic design principles
3. Basic emphasizing techniques
4. UI components
5. Animations in UI
6. Trends
7. Wireframe, Mockup, Prototype
What’s coming next ?
1. Common design mistakes
2. Basic design principles
3. Basic emphasizing techniques
4. UI components
5. Animations in UI
6. Trends
7. Wireframe, Mockup, Prototype
What’s coming next ?
1. Common design mistakes
2. Basic design principles
3. Basic emphasizing techniques
4. UI components
5. Animations in UI
6. Trends
7. Wireframe, Mockup, Prototype
What’s coming next ?
1. Common design mistakes
2. Basic design principles
3. Basic emphasizing techniques
4. UI components
5. Animations in UI
6. Trends
7. Wireframe, Mockup, Prototype
What’s coming next ?
1. Common design mistakes
2. Basic design principles
3. Basic emphasizing techniques
4. UI components
5. Animations in UI
6. Trends
7. Wireframe, Mockup, Prototype
What’s coming next ?
1. Common design mistakes
2. Basic design principles
3. Basic emphasizing techniques
4. UI components
5. Animations in UI
6. Trends
7. Wireframe, Mockup, Prototype
What’s coming next ?
And a lot more:
• Color theory
• Typography
• User persona
• ...
UX Resources
Google’s Material Design
Any questions?
It’s just the begining...