Good vs Bad UI

Miratul Khusna Mufida

2016

What do you Think

about this UI?

Too Crowded
The layout is not clear
What does the icon mean?
What the color mean?
User task is not clear

Same Metaphor for

different action

Bad UI

Bad UI
Its better but

Not consistent some using default color

The symbol inside or outside textfield

Clickable or fill out?

Good UI Design

Good UI Design
Align, Nicely space down

Accesibility

Look a like a real product

Looks good

Good UI Design
All align nicely

The important things Emphasize

Less important information is less

visible

The key of good UI Design

Aesthetically pleasing
Familiar
Logical
Functional
Efficient

Interaction Design Principles

Learnability
Efficiency
Memorability
Error recovery
Simplicity

Mapping
Visibility
Feedback
Consistency
Satisfaction

Learnability
An interface should be easy to use
from the first time a user interact
with it
The main functionality should be
visible to user to achieve what the
user goals to be done

Efficiency
The number of steps for user to
complete the task
Key task should be made as
efficient as possible

Memorability
Interface should be easier to use
each time the user interact with it
Frequency of use is the key factor
in memorability

Error Recovery
In a perfect UI user should never
be allowed to make a mistake

Simplicity
Usual task should be easy and less
common task should be possible
Keep focus to the visual design
and layout y avoid un necessary
functionality

Mapping
What the user expects to happen
when they interact with the user
interface is exactly what should
happen

Visibility
The most important information
should be the most visible
Less important information should
be less visible
Understanding the user goals is
critical

Feedback
User should always be in control
of the user interface

Consistency & Satisfaction

Like item should always be
displayed and act the same way
across the entire application
UI standards

How much the user enjoys or

dislike the software

Analyze and plan your GUI Using

10 principle of Interaction
design