CH8 UX in the Real World [Student Version].pdf

CHAPTER 8 UX IN THE REAL WORLD Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Real world problems  Software tools  Specification methods  Interface design  Bui...

CHAPTER 8 UX IN THE REAL WORLD Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Real world problems  Software tools  Specification methods  Interface design  Building tools  Interaction devices  Image and video displays  Drivers Copyright © 2023 by BAC College Singapore Information Classification – Restricted User Experience (UX) refers to the overall experience a user has when interacting with a product, system, or service. Goal: To create a seamless, efficient, and enjoyable experience for the user, which can lead to increased user satisfaction, engagement, and loyalty. Copyright © 2023 by BAC College Singapore Information Classification – Restricted  User satisfaction Business success Increased accessibility Efficiency and productivity Brand reputation Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Public service Mobile apps E-commerce websites Healthcare Software interface Copyright © 2023 by BAC College Singapore Information Classification – Restricted UX design approach Impact Apple has always The focus on UX has been prioritized user experience a key factor in Apple’s through sleek design, market dominance and intuitive interfaces and customer loyalty seamless integration across devices Copyright © 2023 by BAC College Singapore Information Classification – Restricted UX design approach Impact Airbnb’s platform provides Airbnb’s user-friendly a smooth experience for design has established trust both hosts and guests. The and confidence among website and app feature a users, leading to a massive clean interface, easy-to- global user base use search filters and a streamlined booking process Copyright © 2023 by BAC College Singapore Information Classification – Restricted UX design approach Impact Spotify focuses on The tailored UX has helped personalized user Spotify maintain a leading experiences with features position in the music like custom playlists, streaming industry recommendations and easy navigation that allows users to easily discover and enjoy music Copyright © 2023 by BAC College Singapore Information Classification – Restricted Human-Computer Interaction (HCI) focuses on the design and use of computer technology, particularly the interfaces between people (users) and computers. However, several challenges and issues arise in real-world applications, affecting the efficiency, accessibility, and security of systems. Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Security and Accessibility issues Usability challenges privacy concern Physical disabilities Complex interface Data breaches Sensory disabilities Inconsistent design Privacy invasions Cognitive Learning curve Authentication disabilities issues Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Accessibility Security and Usability solutions solutions privacy solutions Universal design User-centered Clear principles design communication User testing with Consistency and Strong diverse groups standard authentication methods Copyright © 2023 by BAC College Singapore Information Classification – Restricted Human-Computer Interaction (HCI) involves the design and evaluation of user interfaces and interactions. Various software tools are employed to facilitate different stages of this process, including design, prototyping, and usability testing. Copyright © 2023 by BAC College Singapore Information Classification – Restricted Adobe XD Sketch Figma A comprehensive A vector-based design Cloud-based design design tool for creating tool focused in user tool that supports real- and prototyping user interface and web time collaboration and interfaces for web and design. prototyping mobile applications. Copyright © 2023 by BAC College Singapore Information Classification – Restricted InVision Axure RP Marvel A prototyping and collaboration tool that A robust prototyping A prototyping tool that allows designers to tool that supports focuses on ease of use create interactive advanced interactions and quick iteration prototypes and gather and dynamic content feedback from stakeholders Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Crazy Egg UserTesting Lookback Offers tools for A platform for Provides tools for live visualizing user conducting remote and recorded user interactions on websites usability testing and research sessions, through heatmaps, gathering feedback including usability scrollmaps and other from real users testing and interviews analytics Copyright © 2023 by BAC College Singapore Information Classification – Restricted Specification methods help translate user needs and project goals into actionable design criteria. Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Personas User stories Represent different user types, Provide a user-centered perspective helping designers understand and on system features and functionality. empathize with the target audience. Example: As a frequent flyer, I want to check my flight status on my phone so I Example: A persona might be ‘Sarah, 30- can stay updated on delays. year-old marketing manager who travels often and needs quick travel updates Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Scenario Use Cases Describe how users interact with a system in specific contexts, offering Offer detailed descriptions of user insight into workflows and potential interactions and system responses, design challenges. defining functional requirements. Example: A use case for an e-commerce Example: A scenario might describe a site might describe the process of a user user logging into an app, navigating to adding items to their cart, proceeding to the flight booking section, and checkout, and making a payment. completing a booking while on the go. Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Wireframes Mockups Present low-fidelity layouts focusing Provide high-fidelity, detailed visual on structure and functionality representations of the final design. Example: A wireframe for a login page Example: A mockup for a login page might include a username field, might show the final design with the company’s logo, color scheme, and password field, login button, and links polished typography, giving a realistic to "Forgot Password" and "Sign Up." preview of the completed interface. Copyright © 2023 by BAC College Singapore Information Classification – Restricted Good interface design is essential for creating effective and user- friendly digital products. Key principles include consistency and standards, feedback and responsiveness, and visual hierarchy and navigation. Copyright © 2023 by BAC College Singapore Information Classification – Restricted Consistency Standards  Visual consistency  Functional consistency  Platform standards  Internal and external  Industry standards consistency Copyright © 2023 by BAC College Singapore Information Classification – Restricted Feedback Responsiveness  Visual feedback  Speed  Auditory feedback  Clear indications of loading  Tactile feedback  Error handling Copyright © 2023 by BAC College Singapore Information Classification – Restricted Visual hierarchy Navigation  Size and scale  Clear structure  Color and contrast  Intuitive controls  Typography  Breadcrumbs  Spacing and grouping  Consistent placement Copyright © 2023 by BAC College Singapore Information Classification – Restricted Developing effective user interfaces requires a variety of tools and technologies. Key components include Integrated Development Environments (IDEs), frameworks and libraries, and version control systems. Copyright © 2023 by BAC College Singapore Information Classification – Restricted IDEs are comprehensive software  Code editors applications that provide a range of  Debugging tools tools for developing software  Build automation applications.  Integrated terminals  UI design integration Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Back-end frameworks provide Front-end frameworks help in server-side support and manage creating interactive user interfaces data and server-side logic Example: React, Angular, Vue.js Example: Express.js, Django, Ruby on Rails Libraries are collections of pre-written code that provide specific functionality and can be used within frameworks or independently Example: jQuery, Lodash, Bootstrap Copyright © 2023 by BAC College Singapore Information Classification – Restricted VCS manage changes to source code over time, allowing developers  Source Code Management to track revisions, collaborate with  Collaboration others and maintain a history of  Branching and Merging changes.  History Tracking Copyright © 2023 by BAC College Singapore Information Classification – Restricted Interaction devices are the hardware components that allow users to interact with digital systems and interfaces. They are crucial for translating user actions into digital commands and providing feedback. These devices come in various forms, each suited to different types of interactions and applications. Copyright © 2023 by BAC College Singapore Information Classification – Restricted Copyright © 2023 by BAC College Singapore Information Classification – Restricted Copyright © 2023 by BAC College Singapore Information Classification – Restricted Image and video displays are critical components that influence how users perceive and interact with digital systems. The type and quality of displays can significantly affect user experience, accessibility, and engagement. Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Liquid Crystal Display (LCD) Cathode Ray Tube (CRT)  Offer sharp images and good color reproduction  High refresh rates and good color accuracy  Lighter and more energy- efficient  Size and weight can be limiting  More suitable for portable  Flicker from the refresh rate can devices cause eye strain  Reduce eye strain due to absence of flicker and glare Copyright © 2023 by BAC College Singapore Information Classification – Restricted Light Emitting Diode (LED) Display Organics LED Display  Provide better contrast and  Provide excellent color brightness compared to accuracy, contrast and wide traditional LCDs viewing angles  The improved quality enhances  Ideal for curved or foldable user engagement screens Copyright © 2023 by BAC College Singapore Information Classification – Restricted Drivers are crucial components that enable communication between hardware devices and software applications. They play a significant role in ensuring that input and output devices function correctly within a digital environment. Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Communication facilitation Enhance functionality Consistency and performance Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Driver Updates Device Compatibility  Performance improvements  Operating system integration  Bug fixes  Hardware-specific drivers  Security enhancements  Legacy hardware  New features Copyright © 2023 by BAC College Singapore Information Classification – Restricted  Maintenance Challenges Installation Challenges  Keeping drivers updated  Compatibility issues  Device support discontinuation  Driver conflicts  Conflict after updates  User error  Driver installation errors Copyright © 2023 by BAC College Singapore Information Classification – Restricted In summary, this chapter covers how users interact with technology in the context of HCI, the importance of good user experience, and common challenges. The chapter reviews design tools, methods for creating effective interfaces, and different types of interaction devices like keyboards, mice, and VR. It also looks at speech recognition and display technology, and wraps up with key points and future trends in HCI. Copyright © 2023 by BAC College Singapore Information Classification – Restricted  CHAPTER 8 UX IN THE REAL WORLD Copyright © 2023 by BAC College Singapore Information Classification – Restricted