SAIT WBDV

Web Developer Fast Track - Winter 2021

Usability and Accessibility

Housekeeping

  1. Recording sessions
  2. House Rules
    • Cameras on:
      1. 8-9am
      2. During breakout discussions and when paired coding
      3. During fishbowl discussions (if you’re speaking)
      4. After 2pm
    • Be an excellent neighbour:
      • People are allowed to like (and not like) things;
      • Work the problem before asking for help;
      • Teach a skill you’ve learned.
    • Ask a question any time during a live stream.
    • One-on-ones: DM your instructor to book a time for a video/audio chat outside of class-time (preferrably not in the morning or during a break/lunch).
  3. Slack tour
    • @mention someone if it’s important or a direct reply to someone’s message. Otherwise the person might not see it. This is not necessary for DMs.
    • Can your question be answered by a classmate? Consider posting it in #winter-2021 instead of DMing your instructor. The answer will probably be of use to the rest of the group (don’t forget to work the problem yourself, first).
    • Don’t wait for someone to be online before asking them a question. Just ask the question and give the person some time to respond.
    • Want to meet any past grads? Post a message in #general.
    • Poll: Are you using Mac or PC?

Homework

  1. Tool time
    • Read: Markdown Cheatsheet
      • Markdown will be used to write your GitHub README files (the file nerds use to document their projects). Github converts your markdown into HTML.
  2. Mental Models
    • Watch: UX Design Basics - Mental Models by Jamal Nichols
    • Find an example of product design (a handy tool, piece of equipment, etc) in your immediate(ish) area (home, office, vehicle, etc). You will be discussing your find in a group of 3 or 4 tomorrow.
  3. Accessibility

Frontend development is unique in web because your software interacts directly with the user (the backend doesn’t have to deal with mouse clicks, for example). Knowing your user is the first step to designing intuitive and accessible applications.

Objectives for the day

  • Define usability and explain it’s importance to web design.
  • Define a mental model.
    • Compare and contrast System Models and Interaction Models.
    • Discuss the role of a user experience designer.
  • Define accessibility and why it’s important to web design.
    • Describe some of the ways that web content may be inaccessible to certain users.
    • List examples of devices that can be web-enabled.

1. Mental Models in Design

Mental models are how your mind uses past experience to predict real-life outcomes, like unlocking the door of your home. If the door knob was magically moved a few centimeters to the left or right, you would notice it instantly and your keys might still be in your pocket.

If the world you expect is off, by even a little: your mind wakes up, pays attention and starts working the problem.

Materials

2. Accessibility

A founding principle of the Web is that it should be available (i.e. usable) to everyone, regardless of physical limitations. We’ll cover accessibility in more detail later in the program. For now, we just need to know it’s important.

Materials

Clean-up time!