Introduction to User Experience Design PDF

y Session 2 nl O se...

y Session 2 nl O se U Introduction to tre User Experience en Design C h ec pt rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 1 of 24 © Aptech Limited  y nl O Learning Objectives se U ▪ Define User Experience (UX) and User Experience Design ▪ Describe the difference between UI and UX tre ▪ Describe different elements of UX Design ▪ Explain the significance of UX en ▪ List and explain the principles of User Experience Design ▪ ▪ Describe the UX design process C Describe the best practices in User Experience Design h ▪ Distinguish between a good and bad UX design ec pt rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 2 of 24 © Aptech Limited  Definition of UX and UX Design y nl O se U tre User Experience Overall experience and en satisfaction of user after using a Website or computer application. C h User Experience ec Design Process of understanding pt user requirement to improve information rA architecture. Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 3 of 24 © Aptech Limited  Difference Between UI and UX 1-3 y nl O se User Interface (UI) U tre A collection of elements. Example: text fields and buttons. en User Experience (UX) C h Overall experience of using the interface. ec Identifies users and their requirements. pt Meets user requirements. rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 4 of 24 © Aptech Limited  Difference Between UI and UX 2-3 y nl O User Interface (UI) User Experience (UX) se U tre Interaction point between user and The interaction itself. en the system. C A component of the overall UX. Includes the entire process of design. h ec Tangible. Subjective and difficult to measure. pt Visual design and interaction design Focuses on human behavior. are important. rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 5 of 24 © Aptech Limited  Difference Between UI and UX 3-3 y nl O User Interface (UI) User Experience (UX) se U tre Requires creative and convergent Requires creative and critical en design. design. C Focuses on presentation of content. Focuses on context. h ec Determining factor of UX. Determines future use of the system. pt Process is detailed to meet Understands users. requirements. rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 6 of 24 © Aptech Limited  Elements of User Experience Design 1-3 y nl O se User Research U tre Visual Information en Design Architecture C User Experience Design (UXD) h ec pt Interaction rA Usability Design Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 7 of 24 © Aptech Limited  Elements of User Experience Design 2-3 y nl O Visual Represents the aesthetics of a Website. se Design U Uses visual elements for communication. tre en Usability Ease with which user uses the application. C h A combination of various factors. ec pt rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 8 of 24 © Aptech Limited  Elements of User Experience Design 3-3 y nl O Information Focuses on organization of content. se Architecture U Interaction tre Design User-centric approach for interactive system. en User Research C Focuses on understanding user requirements, behaviors, expectations, and motivations. h ec pt rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 9 of 24 © Aptech Limited  Significance of User Experience y nl O se Helps user to navigate the site. U tre en Drives user back to the site. C h ec Without UX, Websites, applications, and pt software can fail. rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 10 of 24 © Aptech Limited  Principles of User Experience Design 1-8 y nl O se U Familiarity Clarity Recoverability tre en Responsiveness and Feedback C Simplicity Content Delivery h ec pt rA Delight Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 11 of 24 © Aptech Limited  Principles of User Experience Design 2-8 y nl O se U Familiarity tre ▪ User can recognize familiar en UI components. C h ec pt rA Example to Demonstrate Familiarity Principle Image courtesy: http://www.8164.org/familiarity-learnability/ Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 12 of 24 © Aptech Limited  Principles of User Experience Design 3-8 y nl O se Clarity U ▪ Focuses on arrangement of tre elements on the page. en ▪ Answers three basic questions: ▪ ▪ What is it? What can I do here? C h ▪ Why should I do it? ec pt Example to Demonstrate Clarity Principle rA Image courtesy: http://conversionxl.com/5-principles-of- persuasive-web-design/ Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 13 of 24 © Aptech Limited  Principles of User Experience Design 4-8 y nl O se Recoverability U ▪ User actions should be tre reversible. en ▪ Design should guide users on proceeding further. C h ▪ User should never be left at a ec 'dead-end'. pt Example to Demonstrate Recoverability Principle rA Image courtesy: thetrainline.com Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 14 of 24 © Aptech Limited  Principles of User Experience Design 5-8 y nl O se Responsiveness and Feedback U ▪ No lag time in loading. tre ▪ Helpful information should be en included. ▪ Provide appropriate and timely C h feedback. ec pt Example to Demonstrate Responsiveness and rA Feedback Principle Image courtesy: http://www.makemytrip.com/ Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 15 of 24 © Aptech Limited  Principles of User Experience Design 6-8 y nl O se Simplicity U tre ▪ Simple to understand and simple to use. en ▪ Include important elements. C h ▪ Common tasks should be ec simple. pt rA Example to Demonstrate Simplicity Principle Image Courtesy: http://www.apple.com/watch/ Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 16 of 24 © Aptech Limited  Principles of User Experience Design 7-8 y nl O se Content Delivery U Provide well-timed and relevant tre ▪ content. en ▪ Increases user satisfaction. C h ec pt Example to Demonstrate “Content Delivery” Principle rA Image Courtesy: https://www.amazon.com Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 17 of 24 © Aptech Limited  Principles of User Experience Design 8-8 y nl O se U Delight tre ▪ Intuitive, simple, and attractive. en ▪ Attention to detail. ▪ Use fonts, color palette, graphics, C h and animation wisely. ec pt rA Example to Demonstrate “Delight” Principle Image Courtesy: https://yourkarma.com/ Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 18 of 24 © Aptech Limited  Best Practices in User Experience Design y nl O se Create emotive design U Take Test and advantage Optimize Identify goals of web Usability typography tre Reduce Take inputs en clutter Highlight Best Improve real-time C Practices readability changes Best h Practices ec Research UI Design patterns collaboratively Keep Use simple Menus and pt and familiar Navigation language Simple rA Anticipate Create paper Build errors prototypes personas Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 19 of 24 © Aptech Limited  User Experience Design Process 1-2 y nl O se U Design Test tre en Research C Optimize h ec Stages pt rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 20 of 24 © Aptech Limited  User Experience Design Process 2-2 y nl O Research Design se Important stage. Product assumes tangible Identifies content and design shape. requirement. Information transformed into U Eliminates assumptions. designs. Used for Information tre architecture. en C h Test Optimize ec Evaluates product. Requires observation of user A stage where the design will pt navigation. become perfect. Optimize design based on An iterative process. rA observations. May require several iterations. Frequent testing helps resolve Fo red flags early. Final product is user-approved. Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 21 of 24 © Aptech Limited  Good vs. Bad UX Design 1-2 y nl O se Good Design Bad Design U tre Invisible to the user Cluttered interface en Easy navigation Poor navigation Simple layout C Confusing layout h ec Pleasant color scheme Bright color scheme pt Mix of text and visuals Heavy text content rA Solicits feedback No option for feedback Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 22 of 24 © Aptech Limited  Good vs Bad UX Design 2-2 y nl O se U Display the Current Aesthetic Use of State Color and Hierarchy tre en Using Clear Language C Handling Errors h ec pt Error rA Communication Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 23 of 24 © Aptech Limited  Summary y nl O ▪ User Experience is the overall experience and satisfaction a user has when interacting with a product such as a Website or computer se application. ▪ UX design is the process of understanding the requirements of a user and U intuitively addressing them by improving the product’s information tre architecture, interaction design, and visual design. ▪ Critical elements of a good UX design: Visual design, Usability, Information en architecture, Interaction design, and User research. ▪ Key principles: Familiarity, Clarity, Recoverability, Responsiveness and C Feedback, Simplicity, Content Delivery, and Delight. h ▪ Well-defined UX process creates a positive experience. Process - ec Research, Design, Test, Optimize. ▪ Good design is useful, purposeful, provides better experience, and easy pt to understand. A bad design can be identified easily. rA Fo Elegant and Effective Website Design with UI and UX/ Introduction to User Experience Design / S02/ 24 of 24 © Aptech Limited