ui / ux engineering for web applications
DESCRIPTION
* Differences between Websites and Web Applications * Research Techniques for Knowing Your Users * Task Analysis * UI/UX Design Principles for Web ApplicationsTRANSCRIPT
![Page 1: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/1.jpg)
UI/UX Engineering for Web
ApplicationsReggie Santos
UP ITDC
![Page 2: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/2.jpg)
Outline
Difference between Websites and Web Applications
Research Techniques for Knowing Your Users
Task Analysis
UI/UX Design Principles for Web Applications
References
Difference between Websites and Web Applications
Research Techniques for Knowing Your Users
Task Analysis
UI/UX Design Principles for Web Applications
References
![Page 3: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/3.jpg)
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
![Page 4: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/4.jpg)
Difference between Websites and Web
Applications
![Page 5: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/5.jpg)
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
![Page 6: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/6.jpg)
Difference between Websites and Web
Applications
![Page 7: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/7.jpg)
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)
![Page 8: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/8.jpg)
Web Application Type: Open
![Page 9: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/9.jpg)
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
![Page 10: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/10.jpg)
Web Application Type: Closed
![Page 11: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/11.jpg)
Research Techniques for Knowing Your Users
![Page 12: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/12.jpg)
Research Techniques for Knowing Your Users
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
![Page 13: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/13.jpg)
Research Techniques for Knowing Your Users
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
![Page 14: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/14.jpg)
Research Techniques for Knowing Your Users
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
![Page 15: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/15.jpg)
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
![Page 16: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/16.jpg)
Task Analysis
![Page 17: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/17.jpg)
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
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
![Page 18: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/18.jpg)
Task Analysis
Helps you understand: 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
Helps you understand: 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
![Page 19: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/19.jpg)
Design Principles
Usability Affordance Intuitiveness Responsiveness Forgiveness
Usability Affordance Intuitiveness Responsiveness Forgiveness
![Page 20: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/20.jpg)
Design Principles
Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics
Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics
![Page 21: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/21.jpg)
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
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
![Page 22: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/22.jpg)
Design Principle: Usability
Facts about human vision and seeing 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
Facts about human vision and seeing 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
![Page 23: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/23.jpg)
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?
![Page 24: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/24.jpg)
Design Principle: Usability
![Page 25: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/25.jpg)
Design Principle: Usability
![Page 26: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/26.jpg)
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
![Page 27: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/27.jpg)
Design Principle: Affordance
![Page 28: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/28.jpg)
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
![Page 29: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/29.jpg)
Design Principle: Intuitiveness
![Page 30: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/30.jpg)
Design Principle: Intuitiveness
![Page 31: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/31.jpg)
Design Principle: Intuitiveness
![Page 32: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/32.jpg)
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
![Page 33: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/33.jpg)
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
![Page 34: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/34.jpg)
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
![Page 35: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/35.jpg)
Design Principle: Responsiveness -
Feedback
![Page 36: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/36.jpg)
Design Principle: Responsiveness -
Feedback
![Page 37: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/37.jpg)
Design Principle: Responsiveness -
Feedback
![Page 38: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/38.jpg)
Design Principle: Responsiveness -
Feedback
![Page 39: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/39.jpg)
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
![Page 40: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/40.jpg)
Design Principle: Responsiveness - Errors
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
![Page 41: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/41.jpg)
Design Principle: Responsiveness - Errors
![Page 42: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/42.jpg)
Design Principle: Responsiveness - Errors
![Page 43: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/43.jpg)
Design Principle: Responsiveness - Errors
![Page 44: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/44.jpg)
Design Principle: Responsiveness - Errors
![Page 45: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/45.jpg)
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
![Page 46: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/46.jpg)
Design Principle: Responsiveness
![Page 47: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/47.jpg)
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
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
![Page 48: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/48.jpg)
Design Principle: Responsiveness
Server-side validation Pros
Secure because it will work even if JavaScript is turned off in the browser and it cannot be easily bypassed by malicious users
Server-side validation Pros
Secure because it will work even if JavaScript is turned off in the browser and it cannot be easily bypassed by malicious users
![Page 49: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/49.jpg)
Design Principle: Responsiveness
Server-side validation 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
Server-side validation 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
![Page 50: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/50.jpg)
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
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
![Page 51: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/51.jpg)
Design Principle: Responsiveness
Client-side 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
Client-side 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
![Page 52: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/52.jpg)
Design Principle: Responsiveness
![Page 53: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/53.jpg)
Design Principle: Responsiveness
![Page 54: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/54.jpg)
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
![Page 55: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/55.jpg)
Design Principle: Responsiveness
![Page 56: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/56.jpg)
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
![Page 57: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/57.jpg)
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
![Page 58: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/58.jpg)
Design Principle: Responsiveness
![Page 59: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/59.jpg)
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
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
![Page 60: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/60.jpg)
Design Principle: Responsiveness
![Page 61: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/61.jpg)
Design Principle: Responsiveness
Confirmation fields 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
Confirmation fields 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
![Page 62: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/62.jpg)
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
![Page 63: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/63.jpg)
Design Principle: Responsiveness
![Page 64: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/64.jpg)
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
![Page 65: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/65.jpg)
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
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
![Page 66: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/66.jpg)
Design Principle: Responsiveness
Rules of Thumb in Web Form 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.
Rules of Thumb in Web Form 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.
![Page 67: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/67.jpg)
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
![Page 68: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/68.jpg)
Design Principle: Forgiveness
![Page 69: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/69.jpg)
Design Principle: Forgiveness
![Page 70: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/70.jpg)
Design Principle: Forgiveness
![Page 71: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/71.jpg)
Design Principle: Forgiveness
![Page 72: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/72.jpg)
Design Principle: Forgiveness
![Page 73: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/73.jpg)
Design Principle: Forgiveness
![Page 74: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/74.jpg)
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
![Page 75: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/75.jpg)
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
![Page 76: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/76.jpg)
Design Principle: Consistency - Internal
![Page 77: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/77.jpg)
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
![Page 78: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/78.jpg)
Design Principle: Consistency - External
![Page 79: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/79.jpg)
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
![Page 80: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/80.jpg)
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
![Page 81: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/81.jpg)
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
![Page 82: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/82.jpg)
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
![Page 83: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/83.jpg)
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
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
![Page 84: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/84.jpg)
Design Principle: Consistency – Layout
Well-established conventions 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)
Well-established conventions 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)
![Page 85: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/85.jpg)
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)
![Page 86: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/86.jpg)
Design Principle: Consistency –
Functions
![Page 87: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/87.jpg)
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
![Page 88: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/88.jpg)
Design Principle: Consistency – Visual
Treatment
![Page 89: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/89.jpg)
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
![Page 90: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/90.jpg)
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
![Page 91: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/91.jpg)
Design Principle: Familiarity
![Page 92: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/92.jpg)
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
![Page 93: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/93.jpg)
Design Principle: Efficiency
![Page 94: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/94.jpg)
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
![Page 95: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/95.jpg)
Design Principle: Efficiency
![Page 96: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/96.jpg)
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)
![Page 97: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/97.jpg)
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)
![Page 98: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/98.jpg)
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)
![Page 99: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/99.jpg)
Design Principle: Accessibility
![Page 100: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/100.jpg)
Design Principle: Accessibility
![Page 101: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/101.jpg)
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
![Page 102: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/102.jpg)
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
![Page 103: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/103.jpg)
Design Principle: Simplicity
![Page 104: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/104.jpg)
Design Principle: Simplicity – Modal
Windows
![Page 105: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/105.jpg)
Design Principle: Simplicity – Hover
Controls
![Page 106: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/106.jpg)
Design Principle: Simplicity – Controls on
Demand
![Page 107: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/107.jpg)
Design Principle: Simplicity – Expanding
Forms
![Page 108: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/108.jpg)
Design Principle: Simplicity – Labels inside Input Forms
![Page 109: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/109.jpg)
Design Principle: Simplicity – Icons
instead of Text
![Page 110: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/110.jpg)
Design Principle: Simplicity – Context-
based Controls
![Page 111: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/111.jpg)
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
![Page 112: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/112.jpg)
Design Principle: Simplicity - Restraint
![Page 113: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/113.jpg)
Design Principle: Simplicity - Restraint
![Page 114: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/114.jpg)
Design Principle: Simplicity - Restraint
![Page 115: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/115.jpg)
Design Principle: Simplicity - Restraint
![Page 116: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/116.jpg)
Design Principle: Simplicity - Restraint
![Page 117: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/117.jpg)
Design Principle: Simplicity - Restraint
![Page 118: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/118.jpg)
Design Principle: Simplicity - Restraint
![Page 119: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/119.jpg)
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
![Page 120: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/120.jpg)
Design Principle: Aesthetics - Affect
![Page 121: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/121.jpg)
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
![Page 122: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/122.jpg)
Design Principle: Aesthetics - Affect
Product personality influences our perceptions Product personality influences our perceptions
![Page 123: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/123.jpg)
Design Principle: Aesthetics - Affect
![Page 124: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/124.jpg)
Design Principle: Aesthetics - Affect
![Page 125: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/125.jpg)
Design Principle: Aesthetics - Affect
![Page 126: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/126.jpg)
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
Why should we care? People identify with (or avoid) certain
personalities Trust is related to personality Perception and expectations are linked with
personality
![Page 127: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/127.jpg)
Design Principle: Aesthetics - Affect
Why should we care? 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?
Why should we care? 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?
![Page 128: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/128.jpg)
Design Principle: Aesthetics – Trust and
Credibility
![Page 129: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/129.jpg)
Design Principle: Aesthetics – Trust and
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
![Page 130: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/130.jpg)
Design Principle: Aesthetics – Trust and
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
![Page 131: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/131.jpg)
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."
![Page 132: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/132.jpg)
Design Principle: Aesthetics
![Page 133: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/133.jpg)
Summary Difference between Websites and Web Applications
Research Techniques for Knowing Your Users
Task Analysis
UI/UX Design Principles for Web Applications
Usability Affordance Intuitiveness Responsiveness Forgiveness
Difference between Websites and Web Applications
Research Techniques for Knowing Your Users
Task Analysis
UI/UX Design Principles for Web Applications
Usability Affordance Intuitiveness Responsiveness Forgiveness
![Page 134: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/134.jpg)
Summary UI/UX Design Principles for Web Applications
Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics
UI/UX Design Principles for Web Applications
Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics
![Page 135: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/135.jpg)
References Difference between UI and UX
http://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/ http://www.helloerik.com/ux-is-not-ui
Designing UI for Business Web Applications http://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/
Designing for Real People http://52weeksofux.com/post/385981879/you-are-not-your-user
Task Analysis http://www.usability.gov/how-to-and-tools/methods/task-analysis.html
http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/
Difference between UI and UX http://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/ http://www.helloerik.com/ux-is-not-ui
Designing UI for Business Web Applications http://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/
Designing for Real People http://52weeksofux.com/post/385981879/you-are-not-your-user
Task Analysis http://www.usability.gov/how-to-and-tools/methods/task-analysis.html
http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/
![Page 136: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/136.jpg)
References Designing and Selecting Components for Uis
http://uxmag.com/articles/designing-amp-selecting-components-for-uis Why Consistency is Critical
http://www.sitepoint.com/why-consistency-is-critical/ Forgiveness in UI Design
http://www.jankoatwarpspeed.com/forgiveness-in-ui-design/ Web Form Validation: Best Practices and Tutorials
http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/
Designing and Selecting Components for Uis http://uxmag.com/articles/designing-amp-selecting-components-for-uis
Why Consistency is Critical http://www.sitepoint.com/why-consistency-is-critical/
Forgiveness in UI Design http://www.jankoatwarpspeed.com/forgiveness-in-ui-design/
Web Form Validation: Best Practices and Tutorials http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/
![Page 137: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/137.jpg)
References 7 Interface Design Techniques to Simplify and Declutter
your Interfaces http://www.webdesignerdepot.com/2009/02/7-interface-design-techniques-to-simplify-and-de-clutter-your-interfaces/
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-design-techniques-to-simplify-and-de-clutter-your-interfaces/ Restraint
http://www.usabilitypost.com/2009/10/02/restraint/ In Defense of Eye Candy
http://alistapart.com/article/indefenseofeyecandy
![Page 138: UI / UX Engineering for Web Applications](https://reader034.vdocuments.site/reader034/viewer/2022051209/5479a258b47959a9098b4814/html5/thumbnails/138.jpg)
References 12 Useful Techniques for Good User Interface Design in
Web Applications http://uxdesign.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
8 Characteristics of Successful User Interfaces http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/
12 Useful Techniques for Good User Interface Design in Web Applications
http://uxdesign.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/ 8 Characteristics of Successful User Interfaces
http://www.usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/