AMDE 355 – Interactive Web Experiences (Week 10)

01 / What makes a website interactive?

An interactive web experience responds to a user’s action and communicates what happened. Interaction can be as simple as a navigation link, an expandable panel, a filterable project list, or a form that confirms a successful action. The key is not complexity; it is whether the behavior supports a real user goal.

Example — a microinteraction

02 / Choose an interaction that serves a purpose

Before writing code, define the user need and the behavior. Avoid adding animation or interaction just because it is possible. A useful interaction reduces effort, makes information easier to explore, or provides feedback.

Plan the interaction before coding

03 / Interaction states and microinteractions

Every interactive component needs states that make its behavior understandable. Consider the default state, hover, keyboard focus, active or pressed state, expanded or collapsed state, loading state, success, error, and disabled state where appropriate.

Example — button hover and focus states

.action-button {
  background: #b8f34b;
  color: #172033;
  border: 2px solid #172033;
  padding: 0.8rem 1.1rem;
  transition: background-color 160ms ease;
}
.action-button:hover {
  background: #a5df35;
}
.action-button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}

Test with a mouse, then use Tab to reach the button. Hover and focus are different states: keyboard users need a visible focus indicator even when there is no pointer.

04 / Build a show-and-hide interaction

This first example uses HTML and CSS to explain the concept. The button is a real button, not a link pretending to be a control. For an actual toggle, JavaScript will update the visible content and accessible state.

HTML structure

<section class="project-card">
  <h2>Project: Field Notes</h2>
  <p>A short introduction to the project.</p>
  <button
    class="details-toggle"
    type="button"
    aria-expanded="false"
    aria-controls="project-details">
    Show project details
  </button>
  <div id="project-details" hidden>
    <p>Research, sketches, prototypes, and final outcome.</p>
  </div>
</section>

JavaScript behavior

const toggle = document.querySelector('.details-toggle');
const details = document.querySelector('#project-details');

toggle.addEventListener('click', () => {
  const isExpanded = toggle.getAttribute('aria-expanded') === 'true';

  toggle.setAttribute('aria-expanded', String(!isExpanded));
  details.hidden = isExpanded;
  toggle.textContent = isExpanded
    ? 'Show project details'
    : 'Hide project details';
});

Walk through the logic: find the button and content, listen for a click, check the current state, update the accessible expanded value, show or hide the content, and change the label. In this one-button example, querySelector() is enough because there is only one matching component.

05 / Add a filter to a project list

Filtering helps visitors narrow content without navigating to a new page. The labels should be understandable, and the interface should make it obvious which filter is selected and how many results remain.

HTML example

<div class="filters" aria-label="Filter projects">
  <button type="button" data-filter="all">All</button>
  <button type="button" data-filter="web">Web</button>
  <button type="button" data-filter="identity">Identity</button>
</div>

<p id="filter-status" role="status">Showing all projects</p>

<div class="project-grid">
  <article class="project-item" data-category="web">Web project</article>
  <article class="project-item" data-category="identity">Identity project</article>
  <article class="project-item" data-category="web">Another web project</article>
</div>

JavaScript example

const filterButtons = document.querySelectorAll('[data-filter]');
const projectItems = document.querySelectorAll('.project-item');
const filterStatus = document.querySelector('#filter-status');

filterButtons.forEach((button) => {
  button.addEventListener('click', () => {
    const category = button.dataset.filter;
    let visibleCount = 0;

    projectItems.forEach((item) => {
      const matches = category === 'all' ||
        item.dataset.category === category;
      item.hidden = !matches;
      if (matches) visibleCount++;
    });

    filterStatus.textContent =
      `Showing ${visibleCount} project(s)`;

    filterButtons.forEach((otherButton) => {
      otherButton.setAttribute(
        'aria-pressed',
        String(otherButton === button)
      );
    });
  });
});

Explain the loop in plain language: when a filter button is selected, the script checks every project, compares its category with the chosen filter, hides items that do not match, and updates the result message. The pressed state communicates the current selection.

06 / Make interaction work for different users

Interactive elements must be operable, perceivable, and understandable. Do not rely on color or hover alone. Make the focus state visible, use native buttons for actions, and communicate changes in content or status.

• Use a button for an action and an a element for navigation to another location.
• Ensure interactive controls work with a keyboard.
• Make focus visible and distinguishable from hover.
• Use clear labels that describe the action or destination.
• Provide a visible state change when content expands, filters update, or a task completes.
• Respect reduced-motion preferences if transitions or animation are used.
• Test at mobile widths and ensure controls have comfortable touch targets.

Reduced-motion example

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

Motion should enhance the interaction, not be the only way a user can understand the state or complete the task.

07 / In-class assignment — Create a small interactive portfolio

Build a small interactive section for your Project 1 website or prototype. Choose one useful interaction and implement it in HTML, CSS, and JavaScript. Focus on clarity and behavior rather than visual complexity.

Deliverables

• A working interactive component or prototype.
• A short description of the user need and interaction states.
• HTML, CSS, and JavaScript used for the behavior, where applicable.
• Evidence of keyboard and responsive testing.
• A brief reflection describing tester feedback and one revision.

08 / Interaction planning worksheet

09 / Final self-check

• The interaction solves a real user need rather than adding decoration alone.
• The action and resulting state are clear.
• Buttons and links are used for their appropriate purposes.
• Keyboard focus is visible and the interaction is keyboard operable.
• State changes are communicated through more than color alone.
• Responsive behavior has been checked.
• JavaScript does not show a success state when an action has failed.
• A classmate tested the interaction without being coached through it.
• The reflection identifies one observed issue and one improvement.