AMDE 355 – User Flows, Navigation & Interaction Design (Week 9)

01 / What is a user flow?

A user flow is a sequence of steps a person takes to accomplish a goal in a digital product. It describes the route through screens, decisions, and actions—not just how the screens look individually.

Example — a portfolio visitor wants to contact the designer

02 / Map the flow before designing the screens

Start with plain-language steps. You do not need a polished diagram to identify missing steps or confusing decisions. A simple flow is easier to discuss and revise early.

GOAL: Find a project and contact the designer

[Home]
   |
   v
[Browse projects]
   |
   v
[Open project detail]
   |
   v
[Select Contact]
   |
   v
[Complete contact form]
   |
   v
[Confirmation message]

This flow is a starting point, not the only possible solution. A visitor might contact the designer directly from the home page, or use a persistent navigation link. Compare alternatives and decide which best serves the audience and task.

Add a decision and recovery path

[Contact form]
   |
   v
{Required fields complete?}
   | Yes                 | No
   v                     v
[Submit form]       [Show helpful error]
   |                     |
   v                     v
[Confirmation]      [Return to missing field]

03 / Information architecture: organize before decorating

Information architecture (IA) is the way content and features are organized, labeled, and connected. Good IA helps people predict where information lives and understand how sections relate to one another.

Example — a simple portfolio site map

Home
├── Work
│   ├── Project A
│   ├── Project B
│   └── Project C
├── About
└── Contact

Ask whether “Work,” “Projects,” or “Portfolio” is the clearest label for the audience. A label that sounds clever to the designer may be less useful than a familiar label that people immediately understand.

04 / Navigation patterns and responsive behavior

Navigation should be predictable, consistent, and appropriate to the amount of content. A small portfolio may need only a few links. A larger site may need categories, secondary navigation, or search.

Example — semantic navigation markup

<header class="site-header">
  <a class="site-logo" href="/">Studio Name</a>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/work/">Work</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
  </nav>
</header>

The nav element identifies a navigation region. The accessible label clarifies its purpose, and each link has a meaningful destination. Use real URLs for the project rather than leaving placeholder links in the final version.

Responsive navigation example

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-header ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 640px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .site-header ul {
    flex-wrap: wrap;
  }
}

This is a simple responsive pattern, not a universal navigation solution. Resize the browser and check whether the links remain visible, readable, and easy to tap.

05 / Interaction states: show what the interface is doing

Every interactive control has states. At minimum, consider its default appearance, hover appearance, keyboard focus, active or pressed state, disabled state when relevant, and feedback after an action.

Example — button states

.button {
  padding: 0.8rem 1.1rem;
  border: 2px solid #172033;
  background: #b8f34b;
  color: #172033;
  cursor: pointer;
}
.button:hover {
  background: #a5df35;
}
.button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Explain that hover is not a replacement for keyboard focus. A disabled control should also communicate that it is unavailable and should not be the only way to explain why an action cannot be completed.

06 / Feedback, forms, and error prevention

Good interaction design anticipates questions and helps people recover. Form labels should be clear, errors should identify the problem, and successful actions should produce a useful confirmation.

Example — a form field with a visible label

<form action="/contact/" method="post">
  <label for="email">Email address</label>
  <input id="email" name="email"
    type="email" autocomplete="email" required>
  <button type="submit">Send message</button>
</form>

The label is explicitly connected to the input through matching for and id values. The placeholder should not be used as the only label because it disappears as people type.

Example — a helpful confirmation message

<p role="status">
  Thanks — your message has been received.
  We’ll respond as soon as we can.
</p>

In a working application, the confirmation should only appear after the form has actually been accepted. Do not show a success message merely because someone clicked the button if submission failed.

07 / Accessibility is part of the flow

Accessibility is not a final decoration pass. It affects whether people can perceive information, navigate between steps, understand controls, and recover from mistakes.

• Use semantic HTML elements for navigation, headings, forms, buttons, and links.
• Use descriptive link text rather than repeated “read more” or “click here” labels where possible.
• Keep visible keyboard focus indicators.
• Ensure text and interactive controls have sufficient contrast.
• Associate form labels and errors with the relevant fields.
• Do not communicate an error or selected state through color alone.
• Test the interface without a mouse.

08 / In-class assignment — Map and improve a user flow

Choose the primary task for your Project 1 interface. Create a user flow, examine the navigation, and revise the design so a visitor can complete the task with fewer points of confusion.

Deliverables

• One-sentence user goal and intended audience.
• A labeled user-flow diagram or step-by-step flow map.
• One identified friction point and an explanation of its impact.
• One implemented interface revision.
• A short usability-test note: task, observed hesitation, and next revision.

09 / Peer testing worksheet

Use this worksheet when a classmate tests your flow. Record what they do and say, not only what you think they should have done.

10 / Final self-check

• The user goal and intended audience are clear.
• The flow includes the steps needed to reach a meaningful outcome.
• Navigation labels are familiar, specific, and consistent.
• Interactive controls have visible and understandable states.
• Forms have visible labels and helpful error or confirmation feedback.
• The design has been tested at desktop, tablet, and mobile widths.
• The main task can be attempted using a keyboard.
• A classmate tested the flow without being coached through it.
• The revision is based on observed evidence and the next test is documented.