UI and UX guidelines that determine the look and feel of user interfaces across the web for both sites and apps.

1. Welcome to Presentation on
User Interface (UI) Guidelines
Copyright 2018 Automated Logical Software (P) Ltd.
User Interface Design Guidelines

2. what is user interface(ui)
User interface (UI) design is the process of making
interfaces in software or other computerized devices
which is focus on looks and style or user interface (UI)
is everything designed into an information device
which the person can interact with the information
Copyright 2018 Automated Logical Software (P) Ltd.

3. User Interface Design Guidelines
There are 10 User Interface Design Guidelines. Which was defined by
Jakob Neilson
1.Visibility of system status:- I Know what’s going on
2.Match between system and the real world:- I Know what you are
talking about
3.User control and freedom:- How to get out of here
4.Consistency and standards:- Oh It’s same all across
5.Error prevention:- Thank you for reminding that..
6.Recognition rather than recall:- I Know what I have do.
7.Flexibility and efficiency of use: - I Know how to use the system as
per my comfort.
8.Aesthetic and minimalist design: - Wow it’s Awesome and doing well.
9.Help users recognize, diagnose and recover from errors: - I know
what is wrong and how I can fix it.
10.Help and documentation: - Ohh no please help me.
Copyright 2018 Automated Logical Software (P) Ltd.

4. 1. Visibility of system status:- I Know what’s going
on
It refers to how the system is conveyed to its users. It’s should always
keep users informed about what is going on, through appropriate
feedback within reasonable time.
Let’s look some example to clearly understand.
Copyright 2018 Automated Logical Software (P) Ltd.
Visibility of system status

5. Copyright 2009 Automated Logical Software (P) Ltd.
Visibility of system status Example

6. Visibility of system status Examples
Copyright 2018 Automated Logical Software (P) Ltd.
I Know
what’s
going
on

7. Match between system and the real
world
Copyright 2018 Automated Logical Software (P) Ltd.
2. Match between system and the real
world:- I Know what you talking
about
Designers should always think to user perspective to use the element
simple presenting information or language with familiar words,
phrases, and concepts rather than system-oriented terms. Interfaces
that follow real-world conventions and make information appear in a
natural and logical order to demonstrate empathy and
acknowledgement for users.
Let’s look some example to clearly understanding.

8. Copyright 2018 Automated Logical Software (P) Ltd.
Match between system and the real
world
I Know
what you
are talking
about

9. 3. User control and freedom:- How to
get
out of here
Designer should always take care of if the user select system function by mistake and
wants to leave the unwanted state without having to go through an extended
dialogue. System should support the undo and redo.
Let’s look some example to clearly understanding.
Copyright 2018 Automated Logical Software (P) Ltd.
User control and freedom

10. Copyright 2009 Automated Logical Software (P) Ltd.
User control and freedom

11. Copyright 2018 Automated Logical Software (P) Ltd.
User
I Know
How to
get out of
here
User control and freedom

12. 4. Consistency and standards :- Oh It’s
same all across
Designer should always think when designing the interface need fellow the pattern.
So the user should not have the wonder whether different words, situation or action
mean the same thing.
Let’s look some example to clearly understanding.
Copyright 2018 Automated Logical Software (P) Ltd.
Consistency and standards

13. Copyright 2018 Automated Logical Software (P) Ltd.
Consistency and standards

14. Copyright 2018 Automated Logical Software (P) Ltd.
Consistency and standards
Oh it’s
Same all
the across

15. Copyright 2018 Automated Logical Software (P) Ltd.
Consistency and standards

16. 5. Error prevention:- Thank you for
reminding that.
Designer should always think when designing the interface how to show
the error message in plan word rather than showing system error
language. If Users are distracted from the task so we need to prevent
unconscious errors by offering suggestions, utilizing constraints, and
being flexible
Let’s look some example to clearly understanding
Copyright 2018 Automated Logical Software (P) Ltd.
Error prevention

17. Copyright 2018 Automated Logical Software (P) Ltd.
Error prevention
Thank
you for
reminding
for that

18. 6. Recognition rather than recall :- I
Know
what I have do
Designer should always think when designing the interface how to
minimize the user memory by making objects, action and option to
visible. User should not have to remember the information from one
part to dialogue to another.
Let’s look some example to clearly understanding.
Copyright 2018 Automated Logical Software (P) Ltd.
Recognition rather than recall

19. Copyright 2018 Automated Logical Software (P) Ltd.
Recognition rather than recall
I Know
what I
have do

20. Copyright 2018 Automated Logical Software (P) Ltd.
Recognition rather than recall

21. Copyright 2018 Automated Logical Software (P) Ltd.
7. Flexibility and efficiency of use :-
Thank
you for reminding that.
We Need to design interface where the interface should be flexible
transforming itself between experienced and non experienced user and
they can use the system according their understanding or conveniently .
Let’s look some example to clearly understanding.
Flexibility and efficiency of use

22. Copyright 2018 Automated Logical Software (P) Ltd.
Flexibility and efficiency of use

23. Copyright 2018 Automated Logical Software (P) Ltd.
Flexibility and efficiency of use
I Know
how to use
the system
as per my
comfort

24. Copyright 2018 Automated Logical Software (P) Ltd.
8. Aesthetic and minimalist design:-
Wow
it’s Awesome and doing well
When we design the interface don’t need to put everything just keep to
relevant units of information and their relative visibility. Don’t put
irrelevant or rarely units of information.
Let’s look some example to clearly understanding.
Aesthetic and minimalist design

25. Copyright 2018 Automated Logical Software (P) Ltd.
Aesthetic and minimalist design
Wow it’s
Awesome
and doing
well

26. Copyright 2018 Automated Logical Software (P) Ltd.
Help users recognize, diagnose and
recover from errors
9. Help users recognize, diagnose and
recover from errors :- I know what is
wrong and how I can fix it.
We need to assume users are unable to understand technical
terminology. We should give the error messages should be expressed in
plain language to ensure nothing gets lost in translation.
Let’s look some example to clearly understanding.

27. Copyright 2018 Automated Logical Software (P) Ltd.
Help users recognize, diagnose and
recover from errors

28. Copyright 2018 Automated Logical Software (P) Ltd.
I know
what is
wrong and
how I can
fix it
Help users recognize, diagnose and
recover from errors

29. Copyright 2018 Automated Logical Software (P) Ltd.
10. Help and documentation :- Ohh no
please help me
It is better to provide the help and documentation so the user easy to
search, focused on the user's task, list concrete steps to be carried out,
and not be too large.
Let’s look some example to clearly understanding.
Help and documentation

30. Copyright 2018 Automated Logical Software (P) Ltd.
Help and documentation
Ohh no
please help
me

31. Copyright 2018 Automated Logical Software (P) Ltd.
User Interface Design Guidelines