05b-II3131 UI Design Guidelines

User Interface Design
Guideline
II3131 Human Computer Interaction
K1 Adi Mulyanto
K2 Fitra Arifiansyah/Nasy’an Taufiq Al Ghifari
K3 Muhammad Romadhon Al-ghazali/Adi Mulyanto
Program Studi Sistem dan Teknologi Informasi
Institut Teknologi Bandung.
Overview
2
01 02 03 04 05
What is User Designing User UI vs UX Design Know Your Basic Principles
Interface Interface for Users
Design Users

3
What is User Interface (UI) Design
User interface (UI) design is the process designers use to build

interfaces in software or computerized devices, focusing on looks or
style.
Designers aim to create interfaces which users find easy to use and
pleasurable.
UI design refers to graphical user interfaces and other forms—e.g.,

voice-controlled interfaces.
https://www.interaction-design.org/literature/topics/ui-design

Good UI is
4
Michal Malewicz, co-founder and CEO of UX consultancy Hype4

Designing UI for Users
5
User Interfaces are the access points where users

Interact with designs. They come in three formats:
Graphical user interfaces (GUIs)

Users interact with visual representations on digital control panels.
A computer’s desktop is a GUI.
Voice-controlled Interfaces (VUIs)

Users interact with these through their voices. Most smart
assistants—e.g., Siri on iPhone and Alexa on Amazon devices—are
VUIs.
Gesture-based interfaces
Users engage with 3D design spaces through bodily motions: e.g.,
in virtual reality (VR) games.

6
to design UIs best, you should consider:
1. User judge designs quickly and care about usability

• They don’t care about your design, but about getting their tasks done easily and
with minimum effort.
• Your design should therefore be “invisible”: Users shouldn’t focus on it but on
completing tasks: e.g., ordering pizza on Domino’s Zero Click app.

7
to design UIs best, you should consider:
2. UIs should also be enjoyable

• When your design predicts users’ needs, they can enjoy more personalized and
immersive experiences. Delight them, and they’ll keep returning.
• Where appropriate, elements of gamification can make your design more fun.
3. UIs should communicate brand values

• Good design is emotional design.
• Users associate good feelings with brands that speak to them at all levels and keep
the magic of pleasurable, seamless experiences alive.

8
UI vs UX Design
UI design is more concerned with the surface and overall feel of a

design
UX design covers the entire spectrum of the user experience.
One analogy is to picture UX design as a car with UI design as the

driving console.

Know your Users
9
A good user interface design for your website is one of the critical
aspects that make your website attractive and usable for your
customers.
Great looking user interface that doesn’t have a clear purpose isn’t
going to be very useful.
Have a clear understanding of your users, their goals, and how and
when they will likely use the product.

Basic Principles of UI Design
10
Make buttons and other elements Put controls near objects that user
perform predictably want to control
Maintain high discoverability Keep users informed
Keep interfaces simple Use appropriate UI design

patterns
Respect the user’s eye and Maintain consistency

attention
Minimize the number of actions for Intuitive

performing tasks

1. Make buttons and other elements
11
perform predictably
Make sure that all the buttons and

other common elements perform
predictably (including responses such
as pinch-to-zoom) so users can
unconsciously use them everywhere.
Form should follow function.

2. Maintain High Discoverability
12
Discoverability can be defined as the ability for a

user to find content or functionality present in a
given experience such as a website, mobile app or
in-car technology.
Clearly label icons and include

well-indicated affordances: e.g., shadows for
buttons.
There are several way to maintain discoverability,

such as logical grouping and avoid complex hidden
interactions.

Logical Grouping
13
Items that have strong relationships, i.e. action

buttons, should be located together into logical
groups.
By structuring screen content into logically, the

user will make sense of it much faster and is more
likely to find what they need.
One example is to use an action or navigation bar.

These all do similar functions in one component.

Avoid Complex Hidden Interactions
14
Complex interactions involving multiple digits

should only be used where there is a need to avoid
an inadvertent operation or is for extremely rare
functions.
Some example are long presses, press two buttons

at the same time.
There are complex operations that require

multiple digits and yet are stereotypical, i.e.
Apple shortcuts to undo typing on iPhone and split the keyboard on the iPad.
CTRL-ALT-DEL

3. Keep Interfaces Simple
15
Apply “less is more” approach.
One of the most important lessons to learn early

on with UI design is to not over-design or give
users too many options or information at once.
Focus on simplicity is what fuels the successful

design of Apple products to this day and that same
principle is essential to the UI design of digital
products.

4. Respect the user’s eye and attention 16
Focus on hierarchy and readability:

• Use proper alignment. Typically choose edge (over
center) alignment.
• Draw attention to key features using:

Color, brightness and contrast. Avoid including
colors or buttons excessively.
Text.

Use Proper Alignment 17
Alignment is the design theory which builds order,

organization, and as a by-product from successful
implementation, improves readability.
Consider this three alignments type:

• Vertical
• Horizontal
• Object
A good tip when combining objects with content is to

align objects centrally and to align content left.
https://uxdesign.cc/principles-of-ui-design-alignment-dd707e983f29

Color, Brightness, and Contrast 18
Use contrasting colours. You may want to avoid using similar

colours such as grey, black and white. If possible, you should
try to use different colours like red and green. It’s easier to
distinguish between two different colours than to recognise
two colours similar to each other.
Keep a balance. Choose colours that are close to each other

in saturation but still distinguishable.
Avoid using colours that are close to each other in

lightness. For example, dark blue and light blue may be too
close in colour and look the same. However, they’ll be easily
distinguished if they’re not near saturation.

Text 19
Font sizes, bold type/weighting, italics, capitals and

distance between letters.
Users should pick up meanings just by scanning.

20
5. Minimize the number of actions for performing tasks
Ease complex tasks by using progressive

disclosure.
Progressive disclosure is a strategy for managing

information complexity.
• When you use progressive disclosure, you show
only the information necessary at that point in
the interaction.
• And you display more advanced functionalities
of the app interface as the user interacts with it.
https://uxplanet.org/design-patterns-progressive-disclosure-for-mobile-apps-f41001a293ba

21
Progressive Onboarding
Interactive progressive onboarding is a good

example of progressive disclosure.
This is basically a user-guided tour where hints are

only triggered when the user reaches the
appropriate point in their experience.
Hints may appear in different orders for different

users.

22
Instructional Overlay
Progressive disclosure can be used to disclose

the right information, exactly when the user needs
it.
Any time you mask important functionality, it’s

very important to give your users a cue that they
can still access that functionality.

23
Animated Hints
Games have a lot of examples of progressive

disclosure.
Many games have to reveal game mechanics as

users move further into a game.
So the hints are only triggered when the user

reaches the appropriate point in their experience.

24
6. Put controls near objects that user want to control
Position buttons where users can easily find or

expect to see them.
For example, a button to submit a form should be

near the form.
If the content is where users expect, the chance of

them finding it is hugely increased.

25
7. Keep users informed
Regarding system responses/actions with

feedback :
• Things like loading screens and messages of
confirmation or error messages make the
difference between good and great UI design.
• It is important to let users know what is going
on behind the scenes of a product to reduce
user pain points and frustration that will make
them not want to use the product.

26
8. Use appropriate UI design patterns
Use appropriate UI design patterns to help guide

users and reduce burdens (e.g., pre-fill forms).
• Beware of using dark patterns, which include
hard-to-see prefilled opt-in/opt-out checkboxes
and sneaking items into users’ carts.
User interface (UI) design patterns are

reusable/recurring components which designers
use to solve common problems in user interface
design.

27
UI Design Patterns
Websites and apps have a conventional look and feel because of design patterns such as global navigation and
tab bars.
In UI design, you can use design patterns as a quick way to build interfaces that solve a problem—for instance, a
date picker design pattern to let users quickly pick a date in a form.
So, UI design patterns serve as design blueprints that allow designers to choose the best and commonly used
interfaces for the specific context the user faces.
Some of the most common UI design patterns are:

• Breadcrumbs
• Lazy Registration
• Date Picker
• Social Media
• Leaderboard

28
Breadcrumbs
Use linked labels to provide secondary navigation that

shows the path from the front to the current site page in
the hierarchy.
This pattern shows the hierarchy of browsed content, so

users are able to switch between pages rapidly.
Breadcrumbs is a popular pattern for ecommerce

websites. Since most ecommerce websites have a
branched structure with multiple product categories, it’s
important to provide users with the ability to effortlessly
come back to a product category or the main page.

29
Lazy Registration
The Lazy Registration pattern allow users to use your

system and take action before or without registering.
The idea is to let users interact enough with your system

so that the actual registration is just another small step in
the larger process.
Use this sign-up pattern to let user sample what your

site/app offers for free or familiarize themselves with it.
The classic Shopping Cart pattern is a good example of

Lazy Registration: users can browse and choose products
and only have to register when they proceed to check
out.
https://ui-patterns.com/patterns/LazyRegistration

30
Date Picker
If you want to provide your users with an

opportunity to select dates for a flight or a room,
you’re likely to use an element called a date picker
(or a calendar picker).
A date picker displays a calendar and lets users

pick a date or a range of dates in a few clicks
without entering them manually.
Date pickers are convenient for selecting a date

range: as a rule, such systems display two
calendars side by side so a user can choose a date
range in a few clicks (or taps).

31
Social Media
Social media patterns serve several functions at

once. These patterns facilitate communication
(chat), content sharing (auto-sharing), building
social reputation (testimonials), and other social
interactions (follow, invite a friend).
The social media category, despite its name,

doesn’t necessarily mean using patterns in social
media websites or apps. Depending on the
context, these patterns are also used for building a
sense of trust, competition, and user engagement

32
Leaderboard
The leaderboard pattern is commonly used to indicate

the best performers in a category.
It’s efficient to use this pattern in a highly competitive

environment to stimulate user involvement in a game or
a competition and drive a sense of community.
A successfully implemented leaderboard pattern is

contextual, which means that you should compare only
users with similar levels, activity rates, and so on. Also,
it’s better to compare users with people from their
friends lists or people who are in the same location. As a
rule, people feel more involved when they compete with
people they know or at least could potentially meet.

33
9. Maintain Consistency
Be consistent across your ecosystem of different

features, screens and applications.
Using consistency increases predictability of

where to look and find what is required.
This reduces the need to learn and increases

usability.
https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f
It also raises confidence in the user that you’ve
provided a good experience.

34
10. Intuitive
Always provide next steps which users can deduce naturally, whatever their
context.
A user interface is successfully intuitive if a user doesn’t need much (or, ideally,
any!) training on how to use it.
An intuitive product allows the user to focus on the problem they’re trying to
solve, the question they’re trying to answer, or the task they’re trying to
complete, rather than focusing on how to use the system.
This can be accomplished through following established and understood design

patterns, making sure your use of color (particularly status/indicator colors),
typography, and iconography is clear and consistent, and that when you do run
into an error, the system tells you what’s wrong.

35
Conclusion
Because the best interface is no interface, you

should offer users the most direct, accessible,
comfortable control (and best experience) where
they’ll forget they’re using your design.
Therefore, keep asking yourself “Can I make things

simpler?”.

36
Creativity is the key to success

in the great education
Terima Kasih

05b-II3131 UI Design Guidelines

Uploaded by

Copyright:

Available Formats

05b-II3131 UI Design Guidelines

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

05b-II3131 UI Design Guidelines

Uploaded by

Copyright:

Available Formats

User Interface Design

II3131 Human Computer Interaction

Program Studi Sistem dan Teknologi Informasi

What is User Interface (UI) Design

User interface (UI) design is the process designers use to build

UI design refers to graphical user interfaces and other forms—e.g.,

Program Studi Sistem dan Teknologi Informasi

Michal Malewicz, co-founder and CEO of UX consultancy Hype4

Program Studi Sistem dan Teknologi Informasi

User Interfaces are the access points where users

Graphical user interfaces (GUIs)

Voice-controlled Interfaces (VUIs)

Program Studi Sistem dan Teknologi Informasi

to design UIs best, you should consider:

1. User judge designs quickly and care about usability

Program Studi Sistem dan Teknologi Informasi

to design UIs best, you should consider:

2. UIs should also be enjoyable

3. UIs should communicate brand values

Program Studi Sistem dan Teknologi Informasi

UI design is more concerned with the surface and overall feel of a

UX design covers the entire spectrum of the user experience.

One analogy is to picture UX design as a car with UI design as the

Program Studi Sistem dan Teknologi Informasi

Program Studi Sistem dan Teknologi Informasi

Maintain high discoverability Keep users informed

Keep interfaces simple Use appropriate UI design

Respect the user’s eye and Maintain consistency

Minimize the number of actions for Intuitive

Program Studi Sistem dan Teknologi Informasi

Make sure that all the buttons and

Form should follow function.

Program Studi Sistem dan Teknologi Informasi

Discoverability can be deﬁned as the ability for a

Clearly label icons and include

There are several way to maintain discoverability,

Program Studi Sistem dan Teknologi Informasi

Items that have strong relationships, i.e. action

By structuring screen content into logically, the

One example is to use an action or navigation bar.

Program Studi Sistem dan Teknologi Informasi

Complex interactions involving multiple digits

Some example are long presses, press two buttons

There are complex operations that require

Program Studi Sistem dan Teknologi Informasi

Apply “less is more” approach.

One of the most important lessons to learn early

Focus on simplicity is what fuels the successful

Program Studi Sistem dan Teknologi Informasi

Focus on hierarchy and readability:

• Draw attention to key features using:

Program Studi Sistem dan Teknologi Informasi

Alignment is the design theory which builds order,

Consider this three alignments type:

A good tip when combining objects with content is to

Program Studi Sistem dan Teknologi Informasi

Use contrasting colours. You may want to avoid using similar

Keep a balance. Choose colours that are close to each other

Avoid using colours that are close to each other in