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
 ...
Difference between
Websites and Web
Applications
Website
 Collection of pages consisting mostly of static content,
images...
Difference between
Websites and Web
Applications
Difference between
Websites and Web
Applications
Web applications
 Dynamic, interactive systems that help businesses
perf...
Difference between
Websites and Web
Applications
Web Application Type:
Open
Open
 Online applications that are easily accessible to
anyone who opens an account (either fo...
Web Application Type:
Open
Web Application Type:
Closed
Closed/line-of-business
 Usually not accessible outside the company that
uses it, and they c...
Web Application Type:
Closed
Research Techniques
for Knowing Your Users
Research Techniques
for Knowing Your Users
 User Interviews
 Guided conversations with existing or potential
users to he...
Research Techniques
for Knowing Your Users
 Surveys
 A clear set of questions distributed to a wider
audience in order t...
Research Techniques
for Knowing Your Users
 Usability testing
 The process of performing a series of specific tests
on a...
Task Analysis
 The process of learning about ordinary users by
observing them in action to understand in detail how
they ...
Task Analysis
Task Analysis
 Helps you understand:
 What your users' goals are; what they are trying to
achieve
 What users actually ...
Task Analysis
 Helps you understand:
 How users are influenced by their physical
environment
 How users' previous knowl...
Design Principles
 Usability
 Affordance
 Intuitiveness
 Responsiveness
 Forgiveness
 Usability
 Affordance
 Intui...
Design Principles
 Consistency
 Familiarity
 Efficiency
 Accessibility
 Simplicity
 Aesthetics
 Consistency
 Famil...
Design Principle:
Usability
 Facts about human vision and seeing
 We have sharp vision in the center of our focus that
i...
Design Principle:
Usability
 Facts about human vision and seeing
 Shadows help us perceive information in three
dimensio...
Design Principle:
Usability
 Checklist for choosing components
 Is there enough contrast and spacing for a user to
reall...
Design Principle:
Usability
Design Principle:
Usability
Design Principle:
Affordance
 Attribute of an item that communicates what can be
done with it
 When effective, users sho...
Design Principle:
Affordance
Design Principle:
Intuitiveness
 About learned behavior and can be considered
synonymous with the phrase "easy to learn"
...
Design Principle:
Intuitiveness
Design Principle:
Intuitiveness
Design Principle:
Intuitiveness
Design Principle:
Responsiveness
 Feedback and error recovery

Users should be informed about (potential) errors
and how...
Design Principle:
Responsiveness - Fast
 The interface, if not the software behind it, should
work fast
 Seeing things l...
Design Principle:
Responsiveness -
Feedback
 Must be plainly visible, and must happen where
the user is looking
 Can tak...
Design Principle:
Responsiveness -
Feedback
Design Principle:
Responsiveness -
Feedback
Design Principle:
Responsiveness -
Feedback
Design Principle:
Responsiveness -
Feedback
Design Principle:
Responsiveness - Errors
 Avoid: Users need to be able to avoid errors
 Many errors can be avoided by a...
Design Principle:
Responsiveness - Errors
 Choosing the right components is a very big factor in
error management
 A com...
Design Principle:
Responsiveness - Errors
Design Principle:
Responsiveness - Errors
Design Principle:
Responsiveness - Errors
Design Principle:
Responsiveness - Errors
Design Principle:
Responsiveness
 Web form validation

Ensure that the user provided necessary and
properly formatted in...
Design Principle:
Responsiveness
Design Principle:
Responsiveness
 Server-side validation

Information is being sent to the server and
validated using on...
Design Principle:
Responsiveness
 Server-side validation

Pros

Secure because it will work even if JavaScript is
turne...
Design Principle:
Responsiveness
 Server-side validation

Cons

Users will have to fill in the information without
gett...
Design Principle:
Responsiveness
 Client-side validation

Pros

Form never gets submitted if validation fails

Immedia...
Design Principle:
Responsiveness
 Client-side validation

Cons

Validation is done on the client using script
languages...
Design Principle:
Responsiveness
Design Principle:
Responsiveness
Design Principle:
Responsiveness
 What to validate

Required information

Information without which operation cannot be...
Design Principle:
Responsiveness
Design Principle:
Responsiveness
 Required information

According to smashingmagazine's survey, designers
tend to remove...
Design Principle:
Responsiveness
 Correct format

Applies to various cases such as email address,
URL, dates, phone numb...
Design Principle:
Responsiveness
Design Principle:
Responsiveness
 Confirmation fields

When dealing with data that is important to the
system, it is a g...
Design Principle:
Responsiveness
Design Principle:
Responsiveness
 Confirmation fields

According to a survey, email confirmation was
mandatory in only 1...
Design Principle:
Responsiveness
 Validation feedback

If validation fails, the system should let the users
know it by p...
Design Principle:
Responsiveness
Design Principle:
Responsiveness
 What to Avoid

Single error pages

Feedback messages in popup windows
 What to Avoid...
Design Principle:
Responsiveness
 Rules of Thumb in Web Form
Validation Design

Never omit server-side validation

Do n...
Design Principle:
Responsiveness
 Rules of Thumb in Web Form
Validation Design

Do not use dynamic effects as a compensa...
Design Principle:
Forgiveness
 Allow users to recover from errors, or even better to
prevent errors
 Allow users to reco...
Design Principle:
Forgiveness
Design Principle:
Forgiveness
Design Principle:
Forgiveness
Design Principle:
Forgiveness
Design Principle:
Forgiveness
Design Principle:
Forgiveness
Design Principle:
Consistency
"A foolish consistency is the bugbear of
small minds" – Ralph Waldo Emerson
"A foolish consi...
Design Principle:
Consistency - Internal
 Standards and conventions should be established
and applied throughout all the ...
Design Principle:
Consistency - Internal
Design Principle:
Consistency - External
 context within a group or family
 consistent with general practice
 users wil...
Design Principle:
Consistency - External
Design Principle:
Consistency
 Makes business sense
 Allows developers to develop a small set of
templates for pages and...
Design Principle:
Consistency -
Language
 Terminologies
 "Voice"
 e.g. warm and friendly, legalistic
 Makes your site ...
Design Principle:
Consistency – UI
Elements
 Apply them as they are originally defined
 e.g. option buttons (radio butto...
Design Principle:
Consistency – UI
Elements
 Graphic treatment
 e.g. options should be round
 e.g. check boxes should b...
Design Principle:
Consistency – Layout
 Well-established conventions
 the company logo should appear at the top left of
...
Design Principle:
Consistency – Layout
 Well-established conventions
 Content in the center of the page
 Related materi...
Design Principle:
Consistency –
Functions
 a public transport website might be expected to
offer timetables, fare informa...
Design Principle:
Consistency –
Functions
Design Principle:
Consistency – Visual
Treatment
 As the user moves through your site, the visual
treatment provides reas...
Design Principle:
Consistency – Visual
Treatment
Design Principle:
Consistency
 Tip: Define user interface guidelines for each
project or for a group of projects
 Tip: D...
Design Principle:
Familiarity
 Draw on concepts from the users' previous
experiences and use appropriate metaphors
 Draw...
Design Principle:
Familiarity
Design Principle:
Efficiency
 Focus users on completing tasks in the easiest and
fastest way
 Provide keyboard support a...
Design Principle:
Efficiency
Design Principle:
Efficiency
 Focus users on completing tasks in the easiest and
fastest way
 Provide keyboard support a...
Design Principle:
Efficiency
Design Principle:
Accessibility

more than just providing the necessary features to
support the technologies used by peop...
Design Principle:
Accessibility
 assistive/adaptive technologies:

built-in customizing options (such as changes to font...
Design Principle:
Accessibility
 all functions must work using a keyboard as well as a
mouse (including scripts, hovers, ...
Design Principle:
Accessibility
Design Principle:
Accessibility
Design Principle:
Simplicity
"The simplest way to achieve simplicity is
through thoughtful reduction" – John
Maeda, The La...
Design Principle:
Simplicity
 Quality of being natural, plain and easy to understand
 Most people naturally dislike comp...
Design Principle:
Simplicity
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 pr...
Design Principle:
Simplicity - Restraint
Design Principle:
Simplicity - Restraint
Design Principle:
Simplicity - Restraint
Design Principle:
Simplicity - Restraint
Design Principle:
Simplicity - Restraint
Design Principle:
Simplicity - Restraint
Design Principle:
Simplicity - Restraint
Design Principle:
Aesthetics

The science of how things are known via the senses

Examines our affective domain response...
Design Principle:
Aesthetics - Affect
Design Principle:
Aesthetics - Affect
"... emotion is not a luxury: it is an
expression of basic mechanisms of life
regula...
Design Principle:
Aesthetics - Affect

Product personality influences our perceptions
Product personality influences our...
Design Principle:
Aesthetics - Affect
Design Principle:
Aesthetics - Affect
Design Principle:
Aesthetics - Affect
Design Principle:
Aesthetics - Affect
 Why should we care?

People identify with (or avoid) certain
personalities

Trus...
Design Principle:
Aesthetics - Affect
 Why should we care?

Consumers "choose" products that are an
extension of themsel...
Design Principle:
Aesthetics – Trust and
Credibility
Design Principle:
Aesthetics – Trust and
Credibility
 According to a study, the "appeal of the overall
visual design of a...
Design Principle:
Aesthetics – Trust and
Credibility
 Aside from providing the basics, such as reliable
information and u...
Design Principle:
Aesthetics
"affect, which is inexplicably linked to
attitudes, expectations and motivations,
plays a sig...
Design Principle:
Aesthetics
Summary
 Difference between Websites and Web Applications
 Research Techniques for Knowing Your Users
 Task Analysis
 ...
Summary
 UI/UX Design Principles for Web Applications
 Consistency
 Familiarity
 Efficiency
 Accessibility
 Simplici...
References

Difference between UI and UX

http://www.webdesignerdepot.com/2012/06/ui-vs-ux-wha

http://www.helloerik.co...
References

Designing and Selecting Components for Uis

http://uxmag.com/articles/designing-amp-selecting-com

Why Cons...
References

7 Interface Design Techniques to Simplify and Declutter
your Interfaces

http://www.webdesignerdepot.com/200...
References

12 Useful Techniques for Good User Interface Design in
Web Applications

http://uxdesign.smashingmagazine.co...
Upcoming SlideShare
Loading in …5
×

UI / UX Engineering for Web Applications

1,033 views

Published on

* Differences between Websites and Web Applications
* Research Techniques for Knowing Your Users
* Task Analysis
* UI/UX Design Principles for Web Applications

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,033
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

UI / UX Engineering for Web Applications

  1. 1. UI/UX Engineering for Web Applications Reggie Santos UP ITDC
  2. 2. 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
  3. 3. 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
  4. 4. Difference between Websites and Web Applications
  5. 5. 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
  6. 6. Difference between Websites and Web Applications
  7. 7. 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)
  8. 8. Web Application Type: Open
  9. 9. 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
  10. 10. Web Application Type: Closed
  11. 11. Research Techniques for Knowing Your Users
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. Task Analysis
  17. 17. 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
  18. 18. 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
  19. 19. Design Principles  Usability  Affordance  Intuitiveness  Responsiveness  Forgiveness  Usability  Affordance  Intuitiveness  Responsiveness  Forgiveness
  20. 20. Design Principles  Consistency  Familiarity  Efficiency  Accessibility  Simplicity  Aesthetics  Consistency  Familiarity  Efficiency  Accessibility  Simplicity  Aesthetics
  21. 21. 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
  22. 22. 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
  23. 23. 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?
  24. 24. Design Principle: Usability
  25. 25. Design Principle: Usability
  26. 26. 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
  27. 27. Design Principle: Affordance
  28. 28. 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
  29. 29. Design Principle: Intuitiveness
  30. 30. Design Principle: Intuitiveness
  31. 31. Design Principle: Intuitiveness
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Design Principle: Responsiveness - Feedback
  36. 36. Design Principle: Responsiveness - Feedback
  37. 37. Design Principle: Responsiveness - Feedback
  38. 38. Design Principle: Responsiveness - Feedback
  39. 39. 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
  40. 40. 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
  41. 41. Design Principle: Responsiveness - Errors
  42. 42. Design Principle: Responsiveness - Errors
  43. 43. Design Principle: Responsiveness - Errors
  44. 44. Design Principle: Responsiveness - Errors
  45. 45. 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
  46. 46. Design Principle: Responsiveness
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. Design Principle: Responsiveness
  53. 53. Design Principle: Responsiveness
  54. 54. 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
  55. 55. Design Principle: Responsiveness
  56. 56. 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
  57. 57. 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
  58. 58. Design Principle: Responsiveness
  59. 59. 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
  60. 60. Design Principle: Responsiveness
  61. 61. 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
  62. 62. 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
  63. 63. Design Principle: Responsiveness
  64. 64. 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
  65. 65. 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
  66. 66. 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.
  67. 67. 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
  68. 68. Design Principle: Forgiveness
  69. 69. Design Principle: Forgiveness
  70. 70. Design Principle: Forgiveness
  71. 71. Design Principle: Forgiveness
  72. 72. Design Principle: Forgiveness
  73. 73. Design Principle: Forgiveness
  74. 74. 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
  75. 75. 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
  76. 76. Design Principle: Consistency - Internal
  77. 77. 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
  78. 78. Design Principle: Consistency - External
  79. 79. 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
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. 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
  84. 84. 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)
  85. 85. 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)
  86. 86. Design Principle: Consistency – Functions
  87. 87. 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
  88. 88. Design Principle: Consistency – Visual Treatment
  89. 89. 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
  90. 90. 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
  91. 91. Design Principle: Familiarity
  92. 92. 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
  93. 93. Design Principle: Efficiency
  94. 94. 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
  95. 95. Design Principle: Efficiency
  96. 96. 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)
  97. 97. 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)
  98. 98. 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)
  99. 99. Design Principle: Accessibility
  100. 100. Design Principle: Accessibility
  101. 101. 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
  102. 102. 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
  103. 103. Design Principle: Simplicity
  104. 104. Design Principle: Simplicity – Modal Windows
  105. 105. Design Principle: Simplicity – Hover Controls
  106. 106. Design Principle: Simplicity – Controls on Demand
  107. 107. Design Principle: Simplicity – Expanding Forms
  108. 108. Design Principle: Simplicity – Labels inside Input Forms
  109. 109. Design Principle: Simplicity – Icons instead of Text
  110. 110. Design Principle: Simplicity – Context- based Controls
  111. 111. 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
  112. 112. Design Principle: Simplicity - Restraint
  113. 113. Design Principle: Simplicity - Restraint
  114. 114. Design Principle: Simplicity - Restraint
  115. 115. Design Principle: Simplicity - Restraint
  116. 116. Design Principle: Simplicity - Restraint
  117. 117. Design Principle: Simplicity - Restraint
  118. 118. Design Principle: Simplicity - Restraint
  119. 119. 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
  120. 120. Design Principle: Aesthetics - Affect
  121. 121. 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
  122. 122. Design Principle: Aesthetics - Affect  Product personality influences our perceptions Product personality influences our perceptions
  123. 123. Design Principle: Aesthetics - Affect
  124. 124. Design Principle: Aesthetics - Affect
  125. 125. Design Principle: Aesthetics - Affect
  126. 126. 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
  127. 127. 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?
  128. 128. Design Principle: Aesthetics – Trust and Credibility
  129. 129. 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
  130. 130. 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
  131. 131. 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."
  132. 132. Design Principle: Aesthetics
  133. 133. 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
  134. 134. 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
  135. 135. 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
  136. 136. 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
  137. 137. 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
  138. 138. 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

×