SlideShare utilise les cookies pour améliorer les fonctionnalités et les performances, et également pour vous montrer des publicités pertinentes. Si vous continuez à naviguer sur ce site, vous acceptez l’utilisation de cookies. Consultez nos Conditions d’utilisation et notre Politique de confidentialité.
SlideShare utilise les cookies pour améliorer les fonctionnalités et les performances, et également pour vous montrer des publicités pertinentes. Si vous continuez à naviguer sur ce site, vous acceptez l’utilisation de cookies. Consultez notre Politique de confidentialité et nos Conditions d’utilisation pour en savoir plus.
By the end of this lesson:
• Ascertain a basic understanding of what precisely UI/UX is
• Understand and be able to relate the importance of UX
from a business perspective
• Evaluate designs from a User’s Experience point of view
• Be able to apply this knowledge for all future projects
•What is UI / UX
•The Scope of UI / UX
•The most Important Principles of UI
/ UX Design
What it UI / UX?
•Why do we need to study UI / UX?
• UI is the platform that the user interacts with when
using your program.
• UX it the totality of the experience resulting from
his/her use of your program.
It is a form of Engineering
• The practice of approaching the design of anything using
proven and time tested knowledge in pursuit of maximum
efficiency and effectivity
• UI/UX is the practice of designing websites and web
applications pursuant of making the user experience better
using proven and time tested knowledge
• “To study UI/UX is to study the engineering of websites”
The Scope of UI/UX
• Know the objective of your website.
• Engineer your website so that its design is centered around
•Watch the following vido to
highlight how UI / UX affects your
•The principles of UI Design that
influence the overall UX
• Brand Image
• Beauty is on the inside? Unfortunately, not
for businesses in a competitive world
• Is the study of how things are known via the
• Appearances have a substantial impact on
• People identify, and avoid certain personalities
• Trust is related to personality
• Perception and expectations are linked to personality
• Consumers judge products based on their companies
• Consider what type of personality you are creating with
your application based on appearance
• “The extent of ease that users experience when using your
• Is your site easy or hard to use?
• What are the factors that influence the ease or difficulty of
using your website?
• Is your website cluttered an disorganized, making it difficult
for the user to properly identify the use of it’s elements?
• The lack of form in your website will ultimately give it an
amateurish appearance and detract from the website’s
credibility, regardless of the quality of your product.
• Bad Layout
• Is the text misleading, confusing or not properly
representing the elements they are designed to describe?
• Are there crucial elements missing from your site (or just
difficult to find?)
• Avoid putting unnecessary details and distractions in your
website that do not contribute to its function
• Affordance is the science of how the image or functionality
of an object adheres to what is expected of it.
• When effectively executed, a user should be able to know
what to do with it.
• “The 4 second rule” when it comes to Web Design, a user
should be able to identify the purpose of the website and
each individual element within the first 4 seconds of looking
• This concept applies to entire websites.
• Examples of Affordance Implementation
• A button should look like a button and can be expected to
behave like a button.
• Examples of Lack of Affordance Implementation
• Is your site loading fast enough to maintain the user’s
• Are the images you are using too large to load quickly?
• Is the code you are using efficient?
• Denotes the measure of a websites capacity to react with
user input, this contributes greatly to the UX
• Buttons that depress on click
• Loading indicators for processes that take time
• Confirmation messages that appear after actions performed
• The website should be able to provide an avenue to
respond to a user’s needs
• If there are errors, a user should be provided with a way to
contact the developer
• What constitutes the overall image of your site
• It is important to maintain a consistent design throughout
all pages, one that is commensurate with the image of the
• Standards and conventions should be applied all throughout
• If the search bar is at the upper right, then it should be at
the upper right for all pages
• As users move through your site, they should be reassured
that they are still in the same place by a unifying theme
• Applies not only to obvious elements like logos and
navigation, but also content elements like fonts and
• UI is the congregation of the front facing elements that your
users interact with
• UI / UX can be applied anywhere, not just websites or
• UI / UX Design Principles:
• Brand Image
• Form into 6 groups
• Research about any company website and create a 10
minute PowerPoint presentation explaining how the
website applied the principles discussed in this lesson
• The PowerPoint itself has to exhibit the principles discussed
in this lesson
• At the end of the presentation, create 3 slides
demonstrating bad UI / UX design, be creative with the
• You may download any image on the internet to
supplement the graphics you will use, so long as you credit