Human-Computer Interaction (HCI)

• Human-Computer Interaction (HCI) is an interdisciplinary field focused on the design, evaluation, and implementation of interactive computing systems for human use
• HCI aims to make interactions between users and computers more effective, efficient, and enjoyable
• HCI focuses on designing interactive computing systems that prioritize usability
• HCI aims to make technology easy to learn and use, ensuring human interactions with computers are intuitive and efficient
• HCI studies design aspects and system processing, incorporating cognitive science and engineering principles to improve user experiences
• HCI is crucial because it directly impacts how users perceive and engage with technology
• Effective HCI design can lead to increased productivity, reduced errors, and higher user satisfaction
• As technology integrates into daily lives, the need for intuitive interfaces continues to grow
• HCI can be applied in all disciplines involving computer installation.
• HCI Applications:
  • Computer Science: Application design and engineering
  • Psychology: Application of theories and analytical purposes
  • Sociology: Interaction between technology and organization
  • Industrial Design: Interactive products like mobile phones and microwave ovens
• HCI was previously known as man-machine studies or man-machine interaction, dealing with the design, execution, and assessment of computer systems for human use

Historical Evolution

• 1980s examples in Social Organization and Work: WordPerfect, Lotus 1-2-3
• Present/Latest examples in Social Organization and Work: Microsoft 365, Google Workspace
• 1980s examples in Application Areas: Arcade games, flight simulators
• Present/Latest examples in Application Areas: AR/VR in gaming, AI-driven simulators
• 1980s examples in Human-Machine Fit and Adaptation: CRT monitors, floppy disks for portability
• Present/Latest examples in Human-Machine Fit and Adaptation: OLED displays, cloud storage, and smart assistants
• 1980s examples for Human Information Processing included Command-line interfaces like MS-DOS
• Present/Latest examples for Human Information Processing include intuitive GUIs, touch gestures, and AI-powered recommendations
• 1980s examples for Language, Communication, and Interaction : Text-based games such as Zork
• Present/Latest examples for Language, Communication, and Interaction: Conversational AI
• 1980s examples for Ergonomics: IBM Model M keyboard, early computer mice
• Present/Latest examples for Ergonomics: Ergonomic keyboards, VR controllers, wearable tech like smartwatches
• 1980s examples for Input and Output Devices: Floppy disks, joysticks, dot matrix printers
• Present/Latest examples for Input and Output Devices: USB-C, touchscreens, haptic feedback devices, VR headsets
• 1980s examples for Dialogue Techniques: Command-line prompts
• Present/Latest examples for Dialogue Techniques: Drag-and-drop, voice commands, AI-driven chat interfaces
• 1980s examples for Dialogue Genre: Menu-driven applications like Lotus 1-2-3
• Present/Latest examples for Dialogue Genre: Adaptive UIs, customizable dashboards
• 1980s examples for Computer Graphics: Pixelated graphics in games like Pac-Man
• Present/Latest examples for Computer Graphics: Photorealistic 3D graphics, ray tracing
• 1980s examples for Dialogue Architecture: Simple file structures
• Present/Latest examples for Dialogue Architecture: Complex multi-layered architectures, cloud-based infrastructures
• 1980s examples for Design Approaches Iterative design for systems like the Macintosh
• Present/Latest examples for Design Approaches: Human-centered and agile design methodologies
• 1980s examples for Implementation Tools: BASIC, Pascal, C
• Present/Latest examples for Implementation Tools: Python, JavaScript, Swift, AI-assisted coding tools
• 1980s examples for Evaluation Techniques: Playtests for arcade games like Pac-Man
• Present/Latest examples for Evaluation Techniques: UX research with heatmaps, A/B testing, and real-time analytics
• 1980s examples for Example Systems and Case Studies: The Apple Macintosh, Commodore 64
• Present/Latest examples for Example Systems and Case Studies: Apple Vision Pro, Tesla Autopilot, and ChatGPT applications

Main Components of HCI

• The user is the human element in HCI, encompassing diverse characteristics like age, abilities, culture, goals, and emotions
• The computer refers to the hardware and software that users interact with, including physical devices, operating systems, applications, and user interfaces
  • Hardware encompasses physical devices like desktops, laptops, tablets, and smartphones
  • Software includes operating systems, applications, and user interfaces
  • System Capabilities include processing power, memory, storage, and connectivity
• Interaction is the bridge between the user and the computer, involving the design and evaluation of user interaction methods
  • Interaction Techniques are methods users employ to interact with the system, such as typing, clicking, and speaking
  • Interface Design involves creating visual and auditory elements that users interact with and good interface design is intuitive, consistent, and aesthetically pleasing

User-Centered Design (UCD) for Web Interfaces

• UCD is a design approach placing users at the core, aiming to create interfaces that optimize user experience by addressing needs, behaviors, and preferences
• User Research is essential for designing an effective web interface:
  • Surveys and Interviews: Gather qualitative and quantitative data to understand user needs and expectations
  • Usability Testing: Observe users interacting with interfaces to identify issues and areas for improvement
  • Analytics: Analyze web traffic data to understand user behavior and usage patterns
• Information Architecture: Organizing content logically for easy navigation
  • Sitemaps: Visual representations of a website's structure to ensure efficient information retrieval
  • Navigation Design: Creating intuitive menus and paths to enhance the overall user experience
• Wireframing and Prototyping involves creating visual representations of the web interface:
  • Wireframes: Low-fidelity sketches outlining the basic structure and layout
  • Interactive Prototypes: Higher-fidelity models simulating the user experience to refine design
• Visual Design includes aesthetic aspects while ensuring usability through color schemes, typography, graphics, and images
• Accessibility ensures the web interface is accessible to all users, including those with disabilities
  • Keyboard Navigation: Ensure all functionalities are accessible via keyboard for users with mobility impairments
  • Screen Reader Compatibility: Provide alternative text for images for visually impaired users
  • Responsive Design: Design for different devices to ensure a consistent experience across platforms
• Usability Testing and Iteration: Continuously testing and refining the design based on user feedback
  • A/B Testing: Compare two webpage versions to determine which performs better
  • User Feedback: Collect feedback through surveys and usability tests
  • Iteration: Make necessary changes and improvements based on feedback to enhance user experience
• Implementation and Monitoring:
  • Development: Translate the design into a functional web interface
  • Performance Monitoring: Use analytics tools to track user interactions
  • Continuous Improvement: Regularly update the web interface to enhance usability and address issues
• User-Centered Design examples:
  • Smartphone Home Screens: Intuitive navigation and customizable layouts
  • Online Banking Apps: Clear navigation and quick access to essential features
  • E-commerce Websites: Simple navigation and personalized recommendations
  • Medical Devices: Clear instructions and simple interfaces
  • Video Streaming Services: Personalized recommendations and easy navigation
  • Voice Assistants: Natural language processing for intuitive user commands
  • Public Kiosks: Touchscreens with multilingual support
  • Health and Fitness Apps: User-friendly interfaces with personalized insights
  • Educational Software: Gamification and clear progress indicators
  • Customer Support Chatbots: AI-powered chatbots for immediate user assistance

Usability

• Usability is the most important principles in HCI
• A useful system should be:
  • Easy to learn (Learnability)
  • Easy to remember (Memorability)
  • Effective to use (Effectiveness)
  • Efficient to use (Efficiency)
  • Safe to use (Safety)
  • Enjoyable to use (Utility)

Factors in HCI

• Include organizational factors and environmental factors
• Cognitive processes and capabilities

The Importance of Human Computer Interaction

• Important for UX improvement and software development companies hold it as a high priority

Defining Interaction Design

• Involves designing interactive digital products/services to enhance user experience and usability
• Key Aspects of Interaction Design:
  • User Needs: Address user needs, goals, and preferences
  • Context: Consider the context of use
  • Feedback: Provide clear and timely feedback
  • Consistency: Ensure consistent user experience
• Principles of Interaction Design:
  • Affordance: Design elements that indicate how they can be used
  • Signifiers: Use visual cues to guide users
  • Feedback: Provide immediate feedback for user actions
  • Constraints: Limit user actions to prevent errors
  • Consistency: Maintain uniform design patterns
  • Visibility: Make important elements easily visible
  • Mapping: Create logical relationships between controls and their effects
• User Control: Allow users to undo actions and provide easy navigation

Interaction Patterns and Components

• Navigation Patterns:
  • Menus: Clear and intuitive navigation
  • Breadcrumbs: Help users understand their location
• Form Design:
  • Input Fields: Easy-to-use fields with clear labels
  • Buttons: Clear and descriptive labels
• Interaction Components:
  • Modals: Use modal windows for important interactions
  • Tooltips: Provide additional information on hover or focus

Prototyping and Wireframing

• Essential for planning, visualizing, and refining web and mobile applications
• Wireframing: Creating low-fidelity sketches to outline structure and layout
• Prototyping: Developing interactive models for user experience testing and feedback
• Key Benefits:
  • Helps visualize layout and structure
  • Identifies potential issues early
  • Facilitates communication
  • Saves time and resources
• Popular Wireframing Tools:
  • Balsamiq
  • Sketch
  • Adobe XD

Wireframing Best Practices

• Keep it Simple: Focus on layout without getting bogged down in details
• Use Placeholders: Use placeholders for images and text
• Iterate: Create multiple versions and refine based on feedback
• Creating Wireframes:
  • Sketch the Layout: Begin with a rough sketch
  • Add Annotations: Explain purpose and functionality
  • Review and Refine: Review with stakeholders

Prototyping Tools

• Figma
• InVision
• Axure RP

Prototyping Best Practices

• Start with Wireframes: Use wireframes as the foundation
• Focus on Key Interactions: Highlight main user flows
• Test Early and Often: Conduct usability testing with real users
• Creating a Prototype:
  • Import Wireframes: Import wireframes into the tool
  • Add Interactions: Define interactions between screens
  • Simulate User Flows: Create user flows to simulate experience
  • Test and Iterate: Test and iterate based on feedback