Download - The Science behind Good UIs and UXs
![Page 1: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/1.jpg)
The Science Behind Good
UXs and UIsBy : Abdelrahman Othman Helal & Peter Osama
![Page 2: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/2.jpg)
FACT !95% of Websites Fail at UX despite of the
Good UI !
![Page 3: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/3.jpg)
Quote !
“Usability really just means making sure that
something works well: that a person of
average (or even below average) ability and
experience can use the thing – whether it’s a
web site, remote control, or revolving door –
for its intended purpose without getting
hopelessly frustrated.” – Steve Krug
![Page 4: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/4.jpg)
Road Map 1- Definitions
2- User Centered Designs (UCD)
3- Hierarchy of UX Needs
4- Design Principles
5- Why you should Care ?
6- Some Tips About Creating Good UIs and UXs
7- Coding Phase : How to draw your UI Design , How to
Implement it (Web Design Examples)
![Page 5: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/5.jpg)
1-Definitions What is a UX ?
User Experience (UX) involves a person's behaviors, attitudes, and emotions about
using a particular product, system or service. User Experience includes the
practical, experiential, affective, meaningful and valuable aspects of human–
computer interaction and product ownership (Wikipedia)
What is a UI ?
The user interface, in the industrial design field of human–machine interaction, is
the space where interactions between humans and machines occur. The goal of this
interaction is effective operation and control of the machine on the user's end, and
feedback from the machine, which aids the operator in making operational
decisions (Wikipedia)
![Page 6: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/6.jpg)
Examples
![Page 7: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/7.jpg)
![Page 8: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/8.jpg)
![Page 9: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/9.jpg)
![Page 10: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/10.jpg)
![Page 11: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/11.jpg)
The UX Venn Diagram
![Page 12: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/12.jpg)
Where The UI Fits ?
Back-end infrastructure: servers, databases and programming.
Content (i.e. words and pictures).
Information architecture: how the content is organized and navigated.
User interface: where the user interacts with the above.
![Page 13: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/13.jpg)
2- User Centered Design (UCD)
The “U” in UI: USER; the “H” in HCI: HUMAN
“Focus on the user and all else will follow.”
(Google)
Focus on: people, their motivations, goals and behaviours.
Must be aware of technological constraints but UI design is not a technological
process.
![Page 14: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/14.jpg)
User Centered Design (UCD) .. (Cont)
Involve users at all stages of the design process.
![Page 15: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/15.jpg)
User Requirements
Who are the users?
How many different types of user are there?
What do they want to be able to do?
How do they currently do it?
Where do they currently do it?
Where might they want to be able to do it?
How might they want to be able to do it?
![Page 16: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/16.jpg)
USER GOALS, STRATEGIC GOALS AND
CONSTRAINTS
What are the strategic goals (“business goals”) of the product you are creating;
what were you funded to do?
Tensions between strategic goals and user goals: how will this be managed?
What constraints do you have:
Financial
Time
Technology
People
![Page 17: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/17.jpg)
ENGAGING WITH USERS
Interviews via Skype or Email.
Online surveys (generally better for quantitative information).
Existing published information about user behaviours.
![Page 18: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/18.jpg)
Think On Papers , Not on a PC
![Page 19: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/19.jpg)
Design Principals
Simplicity
Structure
Visibility
Consistency
Tolerance
Feedback
![Page 20: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/20.jpg)
a. Simplicity
![Page 21: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/21.jpg)
a. Simplicity
![Page 22: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/22.jpg)
b. Structure
![Page 23: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/23.jpg)
b. Structure
![Page 24: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/24.jpg)
The Hierarchy of UX Needs
![Page 25: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/25.jpg)
Why you should care ?
Finance
Impact
Ethics
![Page 26: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/26.jpg)
Some Tips about creating a good UI
Plan plan plan plan plan plan plan plan plan plan
Know the end goal
Smart, but not too smart
Reveal the bigger picture
Back to basics
Solve problems
Act Like a user
![Page 27: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/27.jpg)
Some Tips about creating a good UX
Get into the user itself , know him .
Sketch Ideas out
Collaborate
Make it fun
Make every piece useful
Make it Understandable
Make it Valid
![Page 28: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/28.jpg)
Coding Phase
![Page 29: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/29.jpg)
Coding Phase
![Page 30: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/30.jpg)
Coding Phase
![Page 31: The Science behind Good UIs and UXs](https://reader031.vdocuments.us/reader031/viewer/2022032216/55a6aaf41a28abf4018b46a2/html5/thumbnails/31.jpg)
Any Questions ?