UI / UX Engineering for Web Applications

Download UI / UX Engineering for Web Applications

Post on 29-Nov-2014

198 views

Category:

Software

0 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

<ul><li> 1. UI/UX Engineering for Web Applications Reggie Santos UP ITDC </li> <li> 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 </li> <li> 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 </li> <li> 4. Difference between Websites and Web Applications </li> <li> 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 </li> <li> 6. Difference between Websites and Web Applications </li> <li> 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) </li> <li> 8. Web Application Type: Open </li> <li> 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 </li> <li> 10. Web Application Type: Closed </li> <li> 11. Research Techniques for Knowing Your Users </li> <li> 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 </li> <li> 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 </li> <li> 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 </li> <li> 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 </li> <li> 16. Task Analysis </li> <li> 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 </li> <li> 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 </li> <li> 19. Design Principles Usability Affordance Intuitiveness Responsiveness Forgiveness Usability Affordance Intuitiveness Responsiveness Forgiveness </li> <li> 20. Design Principles Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics Consistency Familiarity Efficiency Accessibility Simplicity Aesthetics </li> <li> 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 </li> <li> 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 </li> <li> 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? </li> <li> 24. Design Principle: Usability </li> <li> 25. Design Principle: Usability </li> <li> 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 </li> <li> 27. Design Principle: Affordance </li> <li> 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 </li> <li> 29. Design Principle: Intuitiveness </li> <li> 30. Design Principle: Intuitiveness </li> <li> 31. Design Principle: Intuitiveness </li> <li> 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 </li> <li> 33. Design Principle: Responsiveness - Fast The interface, if not the software behind it, should work fast Seeing things load...</li></ul>