SAIT WBDV

Web Developer Fast Track - Winter 2021

Web Conventions

Source: Don’t Make Me Think, Chapter 2

Definitions

Convention
A widely used or standard design pattern. Don’t Make Me Think; Chapter 3
Satisfice
When a user chooses the first reasonable option instead of the best option. DMMT; Chapter 2

How we really use the web

  1. We don’t read pages. we scan them.
  2. We don’t make optimal choices. We satisfice.
  3. We don’t figure out how things work. We muddle through.

Conventions are popular design patterns that evolve over time as the user becomes more knowledgeable. Your audience will have pre-defined expectations that fall into three general categories:

  • Where things are located on a page. Example: login button -> top right.
  • How things work. Example: the shopping cart metaphor.
  • How things look. Example: errors are red and like buttons are blue.

Making web pages scannable

  1. Create Visual Hierarchies
    • Prominence -> importance
    • Logically related -> visually related
    • Nesting -> parent/child relationships
  2. Design Content for Cards (see Designing Card-Based User Interfaces)
    • Break pages up into clearly defined areas
    • Use plenty of headings
    • Keep paragraphs short
    • Use bullet points and numbered lists
  3. Extras
    • Make it obvious what’s clickable
    • Highlight key terms
    • Keep text readable by increasing contrast with their background

Web web conventions

  • Primary navigation
  • Secondary, tertiary navigation
  • Breadcrumb navigation
  • Utilities
  • Search
  • Social links

Activities

In groups of 3 or 4:

1. Convention hunt

Your instructor didn’t have time to add images of common web design conventions. Help him out:

  1. Browse through this list of common UI Design Patterns and search for more.
  2. Find real world examples of web conventions. What’s the name of the convention?
  3. What new conventions have surfaced since the pandemic started?
  4. What conventions can you find in software on devices that are not phones, laptops, etc?
  5. Take a screen capture (not the whole screen, please) of the best/worst and post the images (with the name of the convention and a link to the website) to #winter-2021.