UI UX introduction

What & Why?
User Interface
Design
Content Provider : Oussama
Présentateur : Ismail Norri

User Interface Design
.. The design of user interfaces for machines and software, such as
computers, home appliances, mobile devices, and other electronic
devices, with the focus on maximizing usability and the user experience.
The aim is to make the user’s interaction as simple and efficient as
possible, in terms of accomplishing user goals ..
- Wikipedia

.. The design of user interfaces for different software or machines with a
clear purpose
Make a better experience for users when navigating through your
app, platform or website.

● The visual elements of a product
or digital experience.
● A translation of a brand’s vision into
a product or a software.
● Common UIs are on: the phone,
computer, or tablet; at the ATM;
and in your car.

What & Why?
User Experience
Design

User Experience Design
.. User experience design (UXD, UED, or XD) is the process of enhancing
user satisfaction with a product by improving the usability, accessibility,
and pleasure provided in the interaction with the product.
.. User experience design encompasses traditional human–computer
interaction (HCI) design, and extends it by addressing all aspects of a
product or service as perceived by users ..
- Wikipedia

User Experience Design
.. UX Design is studying user behaviour and understanding user motivations
with the goal of designing better digital experiences.
Make a better experience for users by understanding their
behaviour and how they interact with a product or a software.

UI vs UX
● UX design is what makes an
interface useful
● UI design is what makes an
interface beautiful.

The FIVE planes
The Design
Process

1. Strategy
● What is the problem you are
trying to solve?
● What are your user needs?
● How does your product fit
within a business context
(product objectives)?

2. Scope
● Defining functional specifications and
content requirements of your platform.
● What are the features, and how might
you prioritize them?
● The challenge is prioritizing features
while minimizing tradeoffs.

3. Structure
● Information architecture is
concerned with how the
information within an app is
organized.
● User flows map out the specific
journeys users embark on
through the app to help solve their
specific need

4. Skeleton
● Achieve the structure of an
interface design and
information design.
● UX or Product Designers start
designing, testing, and iterating
on wireframes.

5. Surface
● Communicate the brand,
product, value and functionality
in one cohesive image.
● UI Designers and Visual
Designers start their work.
● Tools: Adobe XD, Sketch,
Photoshop, Figma etc

What makes good UI?
UI Design Core
Principles

Clarity
● There’s nothing worse than ambiguity in an app.
● Understand which design might help a user best achieve their goals.
● Let the user feel confident while navigating through your app.

Feedback
● Every action needs a reaction.
● This includes Loading states, Error and Success messages etc
● Let the user know what is going on !

Feedback
Example: Facebook loading state while
waiting for the content.

Consistency
● Be consistent in you UI elements.
● Once your users start learning how to use a product, they shouldn’t
have to relearn it.
● Good consistency and structure will make your users feel at home.

Consistency
UI, Behaviour, Look and Feel
Consistency in the Clear app

Use established design patterns
● Innovation is awesome and encouraged, but it shouldn’t have to be at
the expense of the user experience
● Many of these established design principles are grounded in human
perception.
● These are the best practices within the UI design space.

Lazy registration
Pattern in moqups

Pinterest uses
Cards for its content

Autocomplete suggestions at
google.com

Visual hierarchy
● The arrangement of elements in a way that implies relative
importance
● The way we perceive information is affected by several factors that
contribute to how we rank the hierarchy of the content within the
layout.
● Typography, White space and Colors are part of this visual hierarchy

Visual hierarchy: Typography
● The two primary factors that makes a good typography are:
Legibility and Readability.
● Legibility depends on the typeface. It is how each individual
letterform is distinguishable from one another.
● Readability is determined by how you manipulate a particular
typeface to make it easier to comprehend.

NEVER center large
Blocks of copy.
The eye knows exactly
where the next line
begins.

Visual hierarchy: White space
● White space helps with readability and comprehension immensely.
● Readers find it easier to focus on and process generously spaced
content.
● White space can be used to create strong hierarchy.

On the left side negative
space is applied
on the right there isn’t
significant negative space
considered.

How line spacing influences
readability and text
comprehension.

Visual hierarchy: Colors
● Colors have a key role in expressing the brand and intents.
● The more colors there are, the less impact each individual color will
have.
● Keeping decent contrast between colors keeps a design accessible.

The great use of brand
colors in the facebook
app.

Choosing the right
colors for the actions

Instagram understands
That the less colors
the more impact they
have

Patterns exist for
a reason ;)
Some UI Patterns

● https://medium.freecodecamp.org/whats-the-difference-between-ux-and-ui-design-
2ca8d107de14
● http://thenewcode.com/869/Understanding-User-Experience-Design
● https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-
laymans-guide/
● https://www.invisionapp.com/design-defined/user-interface-design
● https://www.invisionapp.com/inside-design/core-principles-of-ui-design/
● https://www.usertesting.com/blog/ui-vs-ux/
● https://blog.prototypr.io/intro-to-user-interface-design-ui-61df3aa90d24
● https://www.smashingmagazine.com/2018/02/comprehensive-guide-user-experience-design/
● -----
● https://careerfoundry.com/en/blog/ux-design/5-big-differences-between-ux-and-ui-design/
● https://theblog.adobe.com/4-golden-rules-ui-design
● ------
● https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html
● https://www.invisionapp.com/inside-design/wireframe-examples/
● https://read.compassofdesign.com/using-color-in-ui-design-559fafa17bf4

UI UX introduction

In this document