UI / UX Engineering for Web Applications

UI/UX Engineering
for Web
Applications
Reggie Santos
UP ITDC

Outline
 Difference between Websites and Web Applications
 Research Techniques for Knowing Your Users
 Task Analysis
 UI/UX Design Principles for Web Applications
 References
 Task Analysis
 References

Difference between
Websites and Web
Applications
Website
 Collection of pages consisting mostly of static content,
images and video, with limited interactive functionality
(i.e. except for the contact form and search
functionality)
 Primary role is to inform
Website
 Collection of pages consisting mostly of static content,
images and video, with limited interactive functionality
(i.e. except for the contact form and search
functionality)
 Primary role is to inform

Difference between
Websites and Web
Applications

Difference between
Websites and Web
Applications
Web applications
 Dynamic, interactive systems that help businesses
perform business critical tasks and that increase and
measure their productivity
 Primary role is to perform a function that serves the
user's tasks and according to defined business rules
Web applications
 Dynamic, interactive systems that help businesses
perform business critical tasks and that increase and
measure their productivity
 Primary role is to perform a function that serves the
user's tasks and according to defined business rules

Web Application Type:
Open
Open
 Online applications that are easily accessible to
anyone who opens an account (either for free or
by paying a fee)
Open
 Online applications that are easily accessible to
anyone who opens an account (either for free or
by paying a fee)

Web Application Type:
Closed
Closed/line-of-business
 Usually not accessible outside the company that
uses it, and they can be considered "offline"
applications (though many systems expose their
functionality to business partners via either services
or specialized interfaces)
 Usually run on the company's local network and
are available only to employees
Closed/line-of-business
 Usually not accessible outside the company that
uses it, and they can be considered "offline"
applications (though many systems expose their
functionality to business partners via either services
or specialized interfaces)
 Usually run on the company's local network and
are available only to employees

Research Techniques
for Knowing Your Users

Research Techniques
 User Interviews
 Guided conversations with existing or potential
users to help you understand their preferences and
attitude
 Contextual Inquiry
 Combining direct user observation with an
interview that takes place in the users environment
in order to better understand their work
environment, the problems they are trying to solve
and other related preferences
 User Interviews
 Guided conversations with existing or potential
users to help you understand their preferences and
attitude
 Contextual Inquiry
 Combining direct user observation with an
interview that takes place in the users environment
in order to better understand their work
environment, the problems they are trying to solve
and other related preferences

Research Techniques
 Surveys
 A clear set of questions distributed to a wider
audience in order to gather results that can help
validate existing data and personas
 Card sorting
 A grouping task for individuals or small groups used
to establish common patterns and identify areas of
confusion
 Surveys
 A clear set of questions distributed to a wider
audience in order to gather results that can help
validate existing data and personas
 Card sorting
 A grouping task for individuals or small groups used
to establish common patterns and identify areas of
confusion

Research Techniques
 Usability testing
 The process of performing a series of specific tests
on a site or a product to reveal potential usability
problems and identify solutions to address them
 Usability testing
 The process of performing a series of specific tests
on a site or a product to reveal potential usability
problems and identify solutions to address them

Task Analysis
 The process of learning about ordinary users by
observing them in action to understand in detail how
they perform their tasks and achieve their intended
goals
 Help identify the tasks that your website and
applications must support and can also help you refine
or re-define your site's navigation or search by
determining the appropriate content scope
 The process of learning about ordinary users by
observing them in action to understand in detail how
they perform their tasks and achieve their intended
goals
 Help identify the tasks that your website and
applications must support and can also help you refine
or re-define your site's navigation or search by
determining the appropriate content scope

Task Analysis
 Helps you understand:
 What your users' goals are; what they are trying to
achieve
 What users actually do to achieve those goals
 What experiences (personal, social, and cultural) users
bring to the tasks
 What your users' goals are; what they are trying to
achieve
 What users actually do to achieve those goals
 What experiences (personal, social, and cultural) users
bring to the tasks

Task Analysis
 How users are influenced by their physical
environment
 How users' previous knowledge and experience
influence:
 How they think about their work
 The workflow they follow to perform their tasks
 How users are influenced by their physical
environment
 How users' previous knowledge and experience
influence:
 How they think about their work
 The workflow they follow to perform their tasks

Design Principles
 Usability
 Affordance
 Intuitiveness
 Responsiveness
 Forgiveness
 Usability
 Affordance
 Intuitiveness
 Responsiveness
 Forgiveness

Design Principles
 Consistency
 Familiarity
 Efficiency
 Accessibility
 Simplicity
 Aesthetics
 Consistency
 Familiarity
 Efficiency
 Accessibility
 Simplicity
 Aesthetics

Design Principle:
Usability
 Facts about human vision and seeing
 We have sharp vision in the center of our focus that
is good at paying attention and identifying detail
 We have poor peripheral vision that can identify
movement and contrast, but not identify detail
 We have sharp vision in the center of our focus that
is good at paying attention and identifying detail
 We have poor peripheral vision that can identify
movement and contrast, but not identify detail

Design Principle:
Usability
 Shadows help us perceive information in three
dimensions – light from above and shadow below
makes things pop out of the page
 Sudden movement, changes in contrast and the
appearance of images can attract visual attention
 Shadows help us perceive information in three
dimensions – light from above and shadow below
makes things pop out of the page
 Sudden movement, changes in contrast and the
appearance of images can attract visual attention

Design Principle:
Usability
 Checklist for choosing components
 Is there enough contrast and spacing for a user to
really see the component?
 Do changes happen right where the user is
looking?
 If changes happen outside the field of vision, is
there something that will attract visual attention
(movement or color) so they see the change? And
does the change persist long enough to be
spotted?
 Checklist for choosing components
 Is there enough contrast and spacing for a user to
really see the component?
 Do changes happen right where the user is
looking?
 If changes happen outside the field of vision, is
there something that will attract visual attention
(movement or color) so they see the change? And
does the change persist long enough to be
spotted?

Design Principle:
Affordance
 Attribute of an item that communicates what can be
done with it
 When effective, users should be able to figure out
what to do with an item just by looking at it
 Shadows and highlights can make buttons pop,
sliders look like they can be slid and dials look like
they can be turned
 Attribute of an item that communicates what can be
done with it
 When effective, users should be able to figure out
what to do with an item just by looking at it
 Shadows and highlights can make buttons pop,
sliders look like they can be slid and dials look like
they can be turned

Design Principle:
Intuitiveness
 About learned behavior and can be considered
synonymous with the phrase "easy to learn"
 Things that are easy to learn build on existing
knowledge
 Usable components
 People can figure out how to operate just by
looking at its visual representation
 Builds on existing knowledge by using existing
conventions
 About learned behavior and can be considered
synonymous with the phrase "easy to learn"
 Things that are easy to learn build on existing
knowledge
 Usable components
 People can figure out how to operate just by
looking at its visual representation
 Builds on existing knowledge by using existing
conventions

Design Principle:
Intuitiveness

Design Principle:
Responsiveness
 Feedback and error recovery

Users should be informed about (potential) errors
and how they can affect their work

Also contains actions which users can perform in
order to recover from the error

Some mistakes are irreversible so it is important to
suggest solutions to help remedy problems
 Feedback and error recovery

Users should be informed about (potential) errors
and how they can affect their work

Also contains actions which users can perform in
order to recover from the error

Some mistakes are irreversible so it is important to
suggest solutions to help remedy problems

Design Principle:
Responsiveness - Fast
 The interface, if not the software behind it, should
work fast
 Seeing things load quickly, or at the very least, an
interface that loads quickly (even if the content is
yet to catch up) improves the user experience
 The interface, if not the software behind it, should
work fast
 Seeing things load quickly, or at the very least, an
interface that loads quickly (even if the content is
yet to catch up) improves the user experience

Design Principle:
Responsiveness -
Feedback
 Must be plainly visible, and must happen where
the user is looking
 Can take many forms, including (but not limited
to):
 Buttons that appear to depress on click
 Waiting indicators for processes that take time
 Search results that appear as they are found
(rather than after a delay)
 Confirmation messages that appear after
actions
 Must be plainly visible, and must happen where
the user is looking
 Can take many forms, including (but not limited
to):
 Buttons that appear to depress on click
 Waiting indicators for processes that take time
 Search results that appear as they are found
(rather than after a delay)
 Confirmation messages that appear after
actions

Design Principle:
Responsiveness -
Feedback

Design Principle:
Responsiveness - Errors
 Avoid: Users need to be able to avoid errors
 Many errors can be avoided by a good task
flow, layout and labeling
 Identify: If an error does occur, users need to be
able to quickly see that something happened
and understand what to do about it
 Correct: Users need to be able to quickly correct
an error and be able to move forward right away
 Avoid: Users need to be able to avoid errors
 Many errors can be avoided by a good task
flow, layout and labeling
 Identify: If an error does occur, users need to be
able to quickly see that something happened
and understand what to do about it
 Correct: Users need to be able to quickly correct
an error and be able to move forward right away

Design Principle:
 Choosing the right components is a very big factor in
error management
 A combo box (combination of single-select list
and text entry box) reduces the error to a much
greater extent than just a text entry field
 Giving the user an initial set of options, simple
data entry and formatting errors can be
avoided
 Date pickers reduce the margin of error
compared to date text entry fields
 Auto-complete helps people select from long
lists
 Choosing the right components is a very big factor in
error management
 A combo box (combination of single-select list
and text entry box) reduces the error to a much
greater extent than just a text entry field
 Giving the user an initial set of options, simple
data entry and formatting errors can be
avoided
 Date pickers reduce the margin of error
compared to date text entry fields
 Auto-complete helps people select from long
lists

Design Principle:

Design Principle:
Responsiveness
 Web form validation

Ensure that the user provided necessary and
properly formatted information needed to
successfully complete an operation

Validation methods

Server-side validation

Client-side validation
 Web form validation

Ensure that the user provided necessary and
properly formatted information needed to
successfully complete an operation

Validation methods

Server-side validation

Client-side validation

Design Principle:
Responsiveness

Design Principle:
Responsiveness
 Server-side validation

Information is being sent to the server and
validated using one of the server-side
programming languages

If the validation fails, the response is then sent
back to the client, the page that contains the
web form is refreshed and feedback is shown

Information is being sent to the server and
validated using one of the server-side
programming languages

If the validation fails, the response is then sent
back to the client, the page that contains the
web form is refreshed and feedback is shown

Design Principle:
Responsiveness

Pros

Secure because it will work even if JavaScript is
turned off in the browser and it cannot be easily
bypassed by malicious users

Pros

Secure because it will work even if JavaScript is
turned off in the browser and it cannot be easily
bypassed by malicious users

Design Principle:
Responsiveness

Cons

Users will have to fill in the information without
getting a response until they submit the form,
resulting in a slow response from the server

Except validation through AJAX

Ajax calls to the server can validate as you
type and provide immediate feedback

Cons

Users will have to fill in the information without
getting a response until they submit the form,
resulting in a slow response from the server

Except validation through AJAX

Ajax calls to the server can validate as you
type and provide immediate feedback

Design Principle:
Responsiveness
 Client-side validation

Pros

Form never gets submitted if validation fails

Immediate feedback if validation fails

Cons

Relies on JavaScript

Can be bypassed if users turn JavaScript is off

Why validation should always be
implemented both the client and server

Pros

Form never gets submitted if validation fails

Immediate feedback if validation fails

Cons

Relies on JavaScript

Can be bypassed if users turn JavaScript is off

Why validation should always be
implemented both the client and server

Design Principle:
Responsiveness

Cons

Validation is done on the client using script
languages such as JavaScript

User's input can be validated as they type –
more responsive, visually rich validation

Cons

Validation is done on the client using script
languages such as JavaScript

User's input can be validated as they type –
more responsive, visually rich validation

Design Principle:
Responsiveness
 What to validate

Required information

Information without which operation cannot be
completed successfully

Validation has to ensure that the user provided
all the necessary details in the web form and it
has to fail if at least one of the fields is not
provided
 What to validate

Required information

Information without which operation cannot be
completed successfully

Validation has to ensure that the user provided
all the necessary details in the web form and it
has to fail if at least one of the fields is not
provided

Design Principle:
Responsiveness
 Required information

According to smashingmagazine's survey, designers
tend to remove all unnecessary details and
distractions which do not help the user complete the
form
 Required information

According to smashingmagazine's survey, designers
tend to remove all unnecessary details and
distractions which do not help the user complete the
form

Design Principle:
Responsiveness
 Correct format

Applies to various cases such as email address,
URL, dates, phone numbers, and others

If the information is not in the correct format,
users should be informed and correct format
should be suggested
 Correct format

Applies to various cases such as email address,
URL, dates, phone numbers, and others

If the information is not in the correct format,
users should be informed and correct format
should be suggested

Design Principle:
Responsiveness
 Confirmation fields

When dealing with data that is important to the
system, it is a good practice to let the users
confirm their input using additional confirmation
fields

This way users can be certain that they provided
correct information

e.g. passwords, email addresses

When dealing with data that is important to the
system, it is a good practice to let the users
confirm their input using additional confirmation
fields

This way users can be certain that they provided
correct information

e.g. passwords, email addresses

Design Principle:
Responsiveness

According to a survey, email confirmation was
mandatory in only 18% of websites, while
password confirmation was mandatory in 72% of
websites

Surprisingly, large websites such as Facebook,
LinkedIn, Stumbleupon and Twitter do not
require password confirmation

According to a survey, email confirmation was
mandatory in only 18% of websites, while
password confirmation was mandatory in 72% of
websites

Surprisingly, large websites such as Facebook,
LinkedIn, Stumbleupon and Twitter do not
require password confirmation

Design Principle:
Responsiveness
 Validation feedback

If validation fails, the system should let the users
know it by providing a clear and unambiguous
message (usually one or two sentences) and ways
to correct the errors
 Validation feedback

If validation fails, the system should let the users
know it by providing a clear and unambiguous
message (usually one or two sentences) and ways
to correct the errors

Design Principle:
Responsiveness
 What to Avoid

Single error pages

Feedback messages in popup windows
 What to Avoid

Single error pages

Feedback messages in popup windows

Design Principle:
Responsiveness
 Rules of Thumb in Web Form
Validation Design

Never omit server-side validation

Do not provide confusing validation feedback. It
should clearly communicate the errors and ways to
fix them.

Do not let users think about what information is
required, always clearly mark required fields

Never provide validation feedback on a single page
or in a popup alert
Validation Design

Never omit server-side validation

Do not provide confusing validation feedback. It
should clearly communicate the errors and ways to
fix them.

Do not let users think about what information is
required, always clearly mark required fields

Never provide validation feedback on a single page
or in a popup alert

Design Principle:
Responsiveness
Validation Design

Do not use dynamic effects as a compensation for a
badly designed form. Fancy effects would not hide a
poorly designed web form.

If you use Captcha, do not forget to provide audio
support and enable users to "reload" the Captcha

Do not forget to inform users when the form was
completed successfully. It is as important as a good
validation feedback.
Validation Design

Do not use dynamic effects as a compensation for a
badly designed form. Fancy effects would not hide a
poorly designed web form.

If you use Captcha, do not forget to provide audio
support and enable users to "reload" the Captcha

Do not forget to inform users when the form was
completed successfully. It is as important as a good
validation feedback.

Design Principle:
Forgiveness
 Allow users to recover from errors, or even better to
prevent errors
 Allow users to recover from errors, or even better to
prevent errors

Design Principle:
Consistency
"A foolish consistency is the bugbear of
small minds" – Ralph Waldo Emerson
"A foolish consistency is the bugbear of
small minds" – Ralph Waldo Emerson

Design Principle:
Consistency - Internal
 Standards and conventions should be established
and applied throughout all the content
 e.g. navigation, color, terminology
 e.g. a user who encounters the "Search" at the
top right on one page will have problems if it is
arbitrarily moved to different locations on other
pages of the site
 Standards and conventions should be established
and applied throughout all the content
 e.g. navigation, color, terminology
 e.g. a user who encounters the "Search" at the
top right on one page will have problems if it is
arbitrarily moved to different locations on other
pages of the site

Design Principle:
Consistency - Internal

Design Principle:
Consistency - External
 context within a group or family
 consistent with general practice
 users will tend to apply rules they have learned
elsewhere, even if those rules do not actually apply
to the current site
 e.g. Google apps/services
 context within a group or family
 consistent with general practice
 users will tend to apply rules they have learned
elsewhere, even if those rules do not actually apply
to the current site
 e.g. Google apps/services

Design Principle:
Consistency - External

Design Principle:
Consistency
 Makes business sense
 Allows developers to develop a small set of
templates for pages and other design elements,
and apply them throughout the site
 Makes writing, publishing and maintenance easier,
and supports the implementation of XML, CSS and
other technologies that rely on structured content
 Makes business sense
 Allows developers to develop a small set of
templates for pages and other design elements,
and apply them throughout the site
 Makes writing, publishing and maintenance easier,
and supports the implementation of XML, CSS and
other technologies that rely on structured content

Design Principle:
Consistency -
Language
 Terminologies
 "Voice"
 e.g. warm and friendly, legalistic
 Makes your site appear simpler and more
authoritative
 Terminologies
 "Voice"
 e.g. warm and friendly, legalistic
 Makes your site appear simpler and more
authoritative

Design Principle:
Consistency – UI
Elements
 Apply them as they are originally defined
 e.g. option buttons (radio buttons) only for
mutually-exclusive items
 e.g. check boxes if the user can choose one or
more options
 Apply them as they are originally defined
 e.g. option buttons (radio buttons) only for
mutually-exclusive items
 e.g. check boxes if the user can choose one or
more options

Design Principle:
Consistency – UI
Elements
 Graphic treatment
 e.g. options should be round
 e.g. check boxes should be square
 e.g. editable fields should have white
backgrounds
 e.g. non-editable fields should be gray
 Graphic treatment
 e.g. options should be round
 e.g. check boxes should be square
 e.g. editable fields should have white
backgrounds
 e.g. non-editable fields should be gray

Design Principle:
Consistency – Layout
 Well-established conventions
 the company logo should appear at the top left of
the page with the associated homepage link
 navigation on the top or left (or both)
 breadcrumbs (if used) below the primary
navigation
 the company logo should appear at the top left of
the page with the associated homepage link
 navigation on the top or left (or both)
 breadcrumbs (if used) below the primary
navigation

Design Principle:
Consistency – Layout
 Content in the center of the page
 Related material and promotions on the right
 Search on the top right (although there are many
exceptions to this)
 Content in the center of the page
 Related material and promotions on the right
 Search on the top right (although there are many
exceptions to this)

Design Principle:
Consistency –
Functions
 a public transport website might be expected to
offer timetables, fare information, and a trip
planner
 a cinema website may be expected to offer a
ticket-booking system. If the site cannot provide
this, at least provide information on equivalent
functions (such as a phone number for bookings)
 a public transport website might be expected to
offer timetables, fare information, and a trip
planner
 a cinema website may be expected to offer a
ticket-booking system. If the site cannot provide
this, at least provide information on equivalent
functions (such as a phone number for bookings)

Design Principle:
Consistency –
Functions

Design Principle:
Consistency – Visual
Treatment
 As the user moves through your site, the visual
treatment provides reassurance that they are still
in the same place, and gives an overall
impression of professionalism and reliability
 Applies not only to the obvious elements like logos
and navigation, but also to content elements,
fonts and backgrounds
 As the user moves through your site, the visual
treatment provides reassurance that they are still
in the same place, and gives an overall
impression of professionalism and reliability
 Applies not only to the obvious elements like logos
and navigation, but also to content elements,
fonts and backgrounds

Design Principle:
Consistency – Visual
Treatment

Design Principle:
Consistency
 Tip: Define user interface guidelines for each
project or for a group of projects
 Tip: Define user interface guidelines for each
project or for a group of projects

Design Principle:
Familiarity
 Draw on concepts from the users' previous
experiences and use appropriate metaphors
 Draw on concepts from the users' previous
experiences and use appropriate metaphors

Design Principle:
Efficiency
 Focus users on completing tasks in the easiest and
fastest way
 Provide keyboard support and shortcuts
 Personalization
 Focus users on completing tasks in the easiest and
fastest way
 Provide keyboard support and shortcuts
 Personalization

Design Principle:
Accessibility

more than just providing the necessary features to
support the technologies used by people with a
disability, such as visual impairment, motor disabilities
or intellectual disabilities

also about supporting older people (with variable font
size), people in rural locations (with a light page
weight) or people with colour blindness (by not using
colour alone as a highlight)

more than just providing the necessary features to
support the technologies used by people with a
disability, such as visual impairment, motor disabilities
or intellectual disabilities

also about supporting older people (with variable font
size), people in rural locations (with a light page
weight) or people with colour blindness (by not using
colour alone as a highlight)

Design Principle:
Accessibility
 assistive/adaptive technologies:

built-in customizing options (such as changes to font
sizes and styles, changes to mouse appearance and
operation, changes to keyboard operation, changes
to the operation of warnings and notifications)

simple built-in aids (such as magnification or read
aloud options)
 assistive/adaptive technologies:

built-in customizing options (such as changes to font
sizes and styles, changes to mouse appearance and
operation, changes to keyboard operation, changes
to the operation of warnings and notifications)

simple built-in aids (such as magnification or read
aloud options)

Design Principle:
Accessibility
 all functions must work using a keyboard as well as a
mouse (including scripts, hovers, onmouseovers, etc.)
 content must make sense when rendered linearly

assistive technology works with the code, so that
the underlying code must make sense, not just the
visual presentation

non-text elements (images, multimedia, etc.) must
have text equivalents

structure must be created with code not visual
presentation (e.g. headings, lists, tables, forms)
 all functions must work using a keyboard as well as a
mouse (including scripts, hovers, onmouseovers, etc.)
 content must make sense when rendered linearly

assistive technology works with the code, so that
the underlying code must make sense, not just the
visual presentation

non-text elements (images, multimedia, etc.) must
have text equivalents

structure must be created with code not visual
presentation (e.g. headings, lists, tables, forms)

Design Principle:
Accessibility

Design Principle:
Simplicity
"The simplest way to achieve simplicity is
through thoughtful reduction" – John
Maeda, The Laws of Simplicity
"The simplest way to achieve simplicity is
through thoughtful reduction" – John
Maeda, The Laws of Simplicity

Design Principle:
Simplicity
 Quality of being natural, plain and easy to understand
 Most people naturally dislike complexity in devices
and software
 Quality of being natural, plain and easy to understand
 Most people naturally dislike complexity in devices
and software

Design Principle:
Simplicity – Modal
Windows

Design Principle:
Simplicity – Hover
Controls

Design Principle:
Simplicity – Controls on
Demand

Design Principle:
Simplicity – Expanding
Forms

Design Principle:
Simplicity – Labels
inside Input Forms

Design Principle:
Simplicity – Icons
instead of Text

Design Principle:
Simplicity – Context-
based Controls

Design Principle:
Simplicity - Restraint

Quality of holding yourself back and implementing
something which solves the problem in the simplest
way possible

Giving your work an identity certainly does not mean
you are losing restraint but it may lead you down the
road of implementing too many design elements for
the sake of design elements

Instead, apply your identity to the core elements

Quality of holding yourself back and implementing
something which solves the problem in the simplest
way possible

Giving your work an identity certainly does not mean
you are losing restraint but it may lead you down the
road of implementing too many design elements for
the sake of design elements

Instead, apply your identity to the core elements

Design Principle:
Simplicity - Restraint

Design Principle:
Aesthetics

The science of how things are known via the senses

Examines our affective domain response to an object
or phenomenon

The science of how things are known via the senses

Examines our affective domain response to an object
or phenomenon

Design Principle:
Aesthetics - Affect

Design Principle:
Aesthetics - Affect
"... emotion is not a luxury: it is an
expression of basic mechanisms of life
regulation developed in evolution, and is
indispensable for survival. It plays a
critical role in virtually all aspects of
learning, reasoning and creativity.
Somewhat surprisingly, it may play a
role in the construction of consciousness."
-- Antonio Damasio, neurobiologist
"... emotion is not a luxury: it is an
expression of basic mechanisms of life
regulation developed in evolution, and is
indispensable for survival. It plays a
critical role in virtually all aspects of
learning, reasoning and creativity.
Somewhat surprisingly, it may play a
role in the construction of consciousness."
-- Antonio Damasio, neurobiologist

Design Principle:
Aesthetics - Affect

Product personality influences our perceptions
Product personality influences our perceptions

Design Principle:
Aesthetics - Affect
 Why should we care?

People identify with (or avoid) certain
personalities

Trust is related to personality

Perception and expectations are linked with
personality

People identify with (or avoid) certain
personalities

Trust is related to personality

Perception and expectations are linked with
personality

Design Principle:
Aesthetics - Affect

Consumers "choose" products that are an
extension of themselves

We treat sufficiently advanced technology as
though it were human

Consider: What kind of personality are you
creating with your application? And what
expectations does this personality bring with it?

Consumers "choose" products that are an
extension of themselves

We treat sufficiently advanced technology as
though it were human

Consider: What kind of personality are you
creating with your application? And what
expectations does this personality bring with it?

Design Principle:
Aesthetics – Trust and
Credibility

Design Principle:
Credibility
 According to a study, the "appeal of the overall
visual design of a site, including layout,
typography, font size, and color schemes", is the
number one factor we use to evaluate a website's
credibility
 According to a study, the "appeal of the overall
visual design of a site, including layout,
typography, font size, and color schemes", is the
number one factor we use to evaluate a website's
credibility

Design Principle:
Credibility
 Aside from providing the basics, such as reliable
information and uptime, attention to design details
implies that the same care and attention has been
spent on the other (less visible) parts of the product
– which implies that this is a trustworthy product
 Aside from providing the basics, such as reliable
information and uptime, attention to design details
implies that the same care and attention has been
spent on the other (less visible) parts of the product
– which implies that this is a trustworthy product

Design Principle:
Aesthetics
"affect, which is inexplicably linked to
attitudes, expectations and motivations,
plays a significant role in the cognition
of product interaction... the perception
that affect and cognition are
independent, separate information
processing systems is flawed."
"affect, which is inexplicably linked to
attitudes, expectations and motivations,
plays a significant role in the cognition
of product interaction... the perception
that affect and cognition are
independent, separate information
processing systems is flawed."

Summary
 Task Analysis
 Usability
 Affordance
 Intuitiveness
 Responsiveness
 Forgiveness
 Task Analysis
 Usability
 Affordance
 Intuitiveness
 Responsiveness
 Forgiveness

Summary
 Consistency
 Familiarity
 Efficiency
 Accessibility
 Simplicity
 Aesthetics
 Consistency
 Familiarity
 Efficiency
 Accessibility
 Simplicity
 Aesthetics

References

Difference between UI and UX

http://www.webdesignerdepot.com/2012/06/ui-vs-ux-wha

http://www.helloerik.com/ux-is-not-ui

Designing UI for Business Web Applications

http://uxdesign.smashingmagazine.com/2010/02/25/desig

Designing for Real People

http://52weeksofux.com/post/385981879/you-are-not-you

Task Analysis

http://www.usability.gov/how-to-and-tools/methods/task-

http://www.usabilitypost.com/2009/04/15/8-characterist

Difference between UI and UX

http://www.webdesignerdepot.com/2012/06/ui-vs-ux-wha

http://www.helloerik.com/ux-is-not-ui

Designing UI for Business Web Applications

http://uxdesign.smashingmagazine.com/2010/02/25/desig

Designing for Real People

http://52weeksofux.com/post/385981879/you-are-not-you

Task Analysis

http://www.usability.gov/how-to-and-tools/methods/task-

http://www.usabilitypost.com/2009/04/15/8-characterist

References

Designing and Selecting Components for Uis

http://uxmag.com/articles/designing-amp-selecting-com

Why Consistency is Critical

http://www.sitepoint.com/why-consistency-is-critical/

Forgiveness in UI Design

http://www.jankoatwarpspeed.com/forgiveness-in-ui-desi

Web Form Validation: Best Practices and Tutorials

http://www.smashingmagazine.com/2009/07/07/web-form

Designing and Selecting Components for Uis

http://uxmag.com/articles/designing-amp-selecting-com

Why Consistency is Critical

http://www.sitepoint.com/why-consistency-is-critical/

Forgiveness in UI Design

http://www.jankoatwarpspeed.com/forgiveness-in-ui-des

Web Form Validation: Best Practices and Tutorials

http://www.smashingmagazine.com/2009/07/07/web-form

References

7 Interface Design Techniques to Simplify and Declutter
your Interfaces

http://www.webdesignerdepot.com/2009/02/7-interface-

Restraint

http://www.usabilitypost.com/2009/10/02/restraint/

In Defense of Eye Candy

http://alistapart.com/article/indefenseofeyecandy

7 Interface Design Techniques to Simplify and Declutter
your Interfaces

http://www.webdesignerdepot.com/2009/02/7-interface-

Restraint

http://www.usabilitypost.com/2009/10/02/restraint/

In Defense of Eye Candy

http://alistapart.com/article/indefenseofeyecandy

References

12 Useful Techniques for Good User Interface Design in
Web Applications

http://uxdesign.smashingmagazine.com/2009/01/19/12-us

8 Characteristics of Successful User Interfaces

http://www.usabilitypost.com/2009/04/15/8-characteristic

12 Useful Techniques for Good User Interface Design in
Web Applications

http://uxdesign.smashingmagazine.com/2009/01/19/12-u

8 Characteristics of Successful User Interfaces

http://www.usabilitypost.com/2009/04/15/8-characteristic

UI / UX Engineering for Web Applications

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (15)

Similaire à UI / UX Engineering for Web Applications

Similaire à UI / UX Engineering for Web Applications (20)

Plus de Reggie Niccolo Santos

Plus de Reggie Niccolo Santos (15)

Dernier

Dernier (20)

UI / UX Engineering for Web Applications