teaching_web_development

HCI principles and universal accessibility

Human-Computer Interaction (HCI) is a multidisciplinary field focused on the design and use of computer technology, particularly the interfaces between people (users) and computers. The goal of HCI is to create systems that are efficient, effective, and satisfying for users.

Key Principles of HCI

1. User-Centered Design: Designing systems with the needs, preferences, and limitations of end-users in mind.

2. Consistency: Ensuring that similar operations and elements behave in similar ways across the system to reduce the learning curve.

3. Feedback: Providing users with clear and immediate feedback on their actions to help them understand the results of their interactions.

4. Affordance: Designing elements in a way that suggests their functionality (e.g., buttons should look clickable).

5. Error Prevention and Recovery: Designing systems to minimize the chances of user errors and providing easy ways to recover from them.

6. Flexibility and Efficiency of Use: Allowing users to customize their interactions and providing shortcuts for experienced users.

7. Aesthetic and Minimalist Design: Keeping interfaces clean and uncluttered to avoid overwhelming users with unnecessary information.

Universal Accessibility

Universal accessibility refers to the design of products, devices, services, or environments for people with disabilities. The goal is to ensure that everyone, regardless of their abilities or disabilities, can access and use technology effectively.

Principles of Universal Accessibility

1. Perceivable: Information and user interface components must be presented in ways that users can perceive, regardless of their sensory abilities (e.g., providing text alternatives for images).

2. Operable: User interface components and navigation must be operable by all users, including those with motor impairments (e.g., ensuring that all functionality is available from a keyboard).

3. Understandable: Information and the operation of the user interface must be understandable to all users (e.g., using clear and simple language).

4. Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies (e.g., ensuring compatibility with screen readers).

Best Practices for Universal Accessibility

• Use semantic HTML to ensure that content is structured logically.
• Provide alternative text for images and multimedia content.
• Ensure sufficient color contrast between text and background.
• Design for keyboard navigation and avoid relying solely on mouse interactions.
• Test interfaces with assistive technologies such as screen readers.

UX design

• User Experience (UX) design focuses on enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.

• Good UX design considers the entire user journey, from initial contact to final interaction.

Interaction Design

• Interaction design is a subset of UX design that focuses specifically on the design of interactive digital products and services. It involves creating engaging interfaces with well-thought-out behaviors.

Wireframing and Prototyping

• Wireframing is the process of creating a visual guide that represents the skeletal framework of a digital product. It helps in planning the layout and functionality before detailed design and development.
• Prototyping involves creating an early model of a product to test and validate design concepts and user interactions.
• 💡 Use Miro or Figma for wireframing and prototyping.

Information Architecture

• Information architecture (IA) is the practice of organizing and structuring content in a way that makes it easy for users to find and navigate information.
• Good IA enhances usability and helps users understand where they are within a digital product.

Sitemaps and Navigation Design

• Sitemaps are visual representations of the structure of a website or application, showing the relationships between different pages and sections.
• Navigation design focuses on creating intuitive and efficient ways for users to move through a digital product.
• Draw.io can be used to create sitemaps and navigation flows.
• digestwebdesign.com article on IA

Storyboarding

• Storyboarding is a technique used to visualize the user journey and interactions with a product through a series of illustrations or images.
• It helps designers understand user needs and behaviors, and plan the overall experience.
• Sample tool: Canva Storyboard Maker

Design Patterns

• Design patterns are reusable solutions to common design problems. They provide a standard way of solving specific design challenges and can improve consistency across a product.
• Examples include navigation menus, search bars, and form layouts.
• UI Patterns: A collection of design patterns for user interfaces.

Accessibility

• Resources
  • W3C Web Accessibility Initiative (WAI): Comprehensive resources and guidelines for web accessibility.
  • A11y Project: A community-driven effort to make web accessibility easier.

The elements of user experience

• 📚 📝 The User Experience: A detailed look at the components of user experience design.

• 🚀 Concept The elements of user experience framework, developed by Jesse James Garrett, outlines five key planes of user experience design: Strategy, Scope, Structure, Skeleton, and Surface.
• The User Experience: A detailed look at the components of user experience design.

• This framework helps designers understand the different aspects of user experience and how they interrelate.

• Each plane builds upon the previous one, starting with the overall strategy and moving down to the visual design of the interface.

• Plan your project so that work on each plane is completed before moving to the next.

• 🤔 When the Web started, there were two groups of people: one saw Web pages as documents (and applied principles from traditional media such as publishing), the other saw them as applications (and applied principles from desktop applications).

• Today, most Web sites are a mixture of both.

Duality of Web as document and application

• Web as Document: Focuses on delivering content, such as articles, images, and videos. The primary goal is to inform or entertain the user.
• Web as Application: Emphasizes tasks: interactivity and functionality, allowing users to perform tasks such as filling out forms, making purchases, or using web-based software.
• Designers must balance these two aspects to create effective and engaging web experiences.

Human centered design

• Human-Centered Design (HCD) is an approach to problem-solving that prioritizes the needs, preferences, and limitations of end-users throughout the design process.
• HCD involves understanding users through research, involving them in the design process, and iteratively testing and refining solutions based on user feedback.
• The goal of HCD is to create products and services that are not only functional but also enjoyable and accessible for the people who use them.

Design thinking

• Design Thinking is a problem-solving approach that emphasizes empathy, creativity, and iterative testing. It involves five key stages: Empathize, Define, Ideate, Prototype, and Test.
• Design Thinking encourages designers to deeply understand user needs, generate a wide range of ideas, and create prototypes to test and refine solutions.
• This approach fosters innovation and helps create user-centered products and services.

User experience design process

1. Research: Understand the users, their needs, and the context of use through methods such as interviews, surveys, and observations.
2. Define: Synthesize research findings to define user personas, scenarios, and requirements.
3. Ideate: Generate a wide range of ideas and potential solutions through brainstorming and other creative techniques.
4. Prototype: Create low-fidelity and high-fidelity prototypes to visualize and test design concepts.
5. Test: Conduct usability testing with real users to gather feedback and identify areas for improvement.
6. Implement: Work with developers to bring the design to life, ensuring that the final product meets user needs and design specifications.
7. Evaluate: Continuously assess the user experience post-launch and make iterative improvements based on user feedback and analytics.

A diagram of the process can be found here.

Usability 101 by Jakob Nielsen

📝 See PDF here, page 15

• Jakob Nielsen, a renowned usability expert, has outlined ten key principles for designing usable interfaces:
  1. Visibility of system status: Keep users informed about what is going on through appropriate feedback within a reasonable time.
  2. Match between system and the real world: Use language and concepts familiar to users, following real-world conventions.
  3. User control and freedom: Provide users with the ability to undo and redo actions easily.
  4. Consistency and standards: Follow platform conventions and maintain consistency throughout the interface.
  5. Error prevention: Design systems to prevent errors from occurring in the first place.
  6. Recognition rather than recall: Minimize the user’s memory load by making objects, actions, and options visible.
  7. Flexibility and efficiency of use: Allow users to tailor frequent actions and provide shortcuts for experienced users.
  8. Aesthetic and minimalist design: Avoid unnecessary information and focus on essential elements.
  9. Help users recognize, diagnose, and recover from errors: Use clear error messages and provide constructive solutions.
  10. Help and documentation: Provide easily accessible help and documentation when needed.
• A diagram summarizing these is shown here

Prototyping (A powerful tool for HCI)

• 🧩 🚀Video on HCI prototyping Stanford

• Protyotyping grounds communication.

• Communicating to stakeholders.

• 🧩🚀 Concept Serves as a common ground.

• 🤔❓ Example: Kodak built a quick prototype to show what a digital camera can do.

• It is incomplete. It is like a sketch.

• Buxton Sketching User Experiences book.

• The number of possibilities narrows as time goes on. This is shown in the figure below:

• In the 1990s Jeff Hawkins was prototyping the Palm Pilot. He built a wooden prototype to test the size and shape of the device (form factor).

• 🧩🚀 Concept Try lots of different ideas quickly.

• Cost of change increases as time goes on.

• Biggest changes should be made early.

🎮🛠️ Activity (power of prototypes)

• 🎮🛠️ Listen to this great TEDx talk by Scott Klemmer

• Never go to a meeting without a prototype

• 🧩🚀 Prototypes are like postcards from the future

Usability studies

• Video lecture from Stanford

• How are users going to use the system?

• Usability studies involve observing and analyzing how real users interact with a product or system to identify usability issues and areas for improvement.

• Alan Kay prototyped the Dynabook concept in the 1970s. He built a physical model to demonstrate the idea of a portable computer for learning.

📚📝 Software

• Figma: A collaborative interface design tool for creating wireframes, prototypes, and design systems.
• Miro: An online collaborative whiteboard platform for brainstorming, wireframing, and planning.
• Canva Storyboard Maker: A tool for creating storyboards to visualize user journeys and interactions.

Birth of HCI

• Video by Scott Klemmer on the history of HCI

• TEDx talk by Scott Klemmer

• Field started with Vannevar Bush’s 1945 article “As We May Think” in The Atlantic Monthly.

• 🤔❓Memex concept: a personal device to store and retrieve information using associative links. All the world’s knowledge stored and accessed easily. Remind you of something?

• 🧩🚀 Concept You could use machines to extend the power of the human mind.

• Analog device designed to serve as a mechanized extension of human memory.

• Desk-like workstation equipped with translucent screens and microfilm storage. The device was intended to house a user’s entire personal library of books, records, and communications, providing a solution to the “information explosion” of the post-war era by making vast amounts of data instantly retrievable.

• The true breakthrough of the Memex was the concept of associative indexing, which served as the conceptual blueprint for the modern hyperlink. Bush realized that the human mind operates by association rather than by rigid, alphabetical, or numerical filing. The Memex would allow a user to create “trails” of related information, permanently linking two items together so that pulling up one would automatically lead to the other. By mirroring the nonlinear nature of human thought, the Memex aimed to transform a static archive into a dynamic, personalized web of knowledge.

• This motivated the birth of the World Wide Web.

• Graphical User Interface (GUI) invented at Xerox PARC in the 1970s.

• Ivan Sutherland’s 1963 Sketchpad system was an early pioneering computer program that introduced the concept of graphical user interfaces (GUIs) and interactive computer graphics. It allowed users to create and manipulate graphical objects directly on a computer screen using a light pen, laying the groundwork for interactive computing.

• Followed by Douglas Engelbart’s 1962 report “Augmenting Human Intellect: A Conceptual Framework”. He demonstrated the oN-Line System (NLS) in 1968, which featured hypertext linking, video conferencing, and a mouse-driven cursor.

• Alan Kay at Xerox PARC envisioned the Dynabook in the 1970s, a portable, personal computer for learning and creativity, which laid the conceptual foundation for modern laptops and tablets.

• It is the 1980s. It is now 40 years since Vannavar Bush’s article.

• The Long Nose of Innovation by Buxton.

• The power of prototypes.

Participant observation

Video lecture on participant observation

• “You can observe a lot by watching” - Yogi Berra

• App for truck drivers needs to have big icons and buttons, and stylus since they will be wearing gloves.

• Deep hanging out

• Be a good apprentice

• Look around for workarounds. For example, post-it notes on printers reminding people how to use it. That could be an opportunity for improving the device.

• Anthropologists/ethnographers studying how people used fax machine at Xerox PARC. We assume that if people cannot use a technology, they are “dumb”. However maybe the technology has been designed well enough.

• Walmart asked users in a survey if they would like the aisle to be less cluttered? Please note that they did not ask how the users used the facilities and asked them a leading question. This actually let them to declutter the aisles and eventually led to decline in sales!

Experience economy

• pg 14 PDF here

• Pine, B. Joseph, and James H. Gilmore. “Welcome to the experience economy.” Harvard business review 76 (1998): 97-105.https://hbr.org/1998/07/welcome-to-the-experience-economy

• The experience economy is a concept that suggests businesses should focus on creating memorable experiences for customers rather than just providing goods or services.

• Previously , economies evolved from agrarian to industrial to service-based. The next stage is the experience economy, where the focus is on engaging customers through unique and personalized experiences.

• In the context of HCI and UX design, this means designing digital products and services that engage users on an emotional level, creating positive and lasting impressions.

• By prioritizing user experience and emotional engagement, businesses can differentiate themselves in a competitive market and build stronger relationships with their customers.

Interviewing participants

• What makes something interesting? Anything can be interesting. Even a washing machine.

• Talk with the right people. Not the top echelons. But the people in the middle. (Malcom Gladwell)

• Do not ask leading questions : Would you like a daily update?

• Sometimes users do not know what they want. Heny Ford had said: If you asked users in 1800s what they wanted, they would have said a faster horse.

• Concept: 🧩🚀 The designer knows the possibilities, but the user does not

• Instead ask users about their daily lives

• Ask good questions (open ended questions)

_ Silence is golden. Listen to the users and give them time to reflect and respond.

Interview techniques

• Diaries. Keep interviewees diaries which they write.

• Followup. Remind people.

• Meet people regularly.

• Lead users. Designers help lead users come up with good solutions. Doctors come up with innovative solutions.

• Democratizing Innovation and Lead users by Eric von Hippel

• Create personas of users. Models of different kinds of users.

Reading Materials

• The User Experience: A detailed look at the components of user experience design.
• Introduction to HCI University of Washington course: Course materials and lectures on Human-Computer Interaction.
• HCI slides
• Stanford full course playlist on YouTube for HCI
• Coursera HCI Course: An online course covering the fundamentals of HCI.
• Coursera course on Design Principles: A course that explores key design principles in HCI.

• Next: UX design fundamentals

This site is open source. Improve this page.