Skip to main content

Day 2 - Usability and Design

Assignment 1: Moodboard

  • Due: Friday September 9
  • Objective: Create a Moodboard for a website in Figjam
  • Important Content:
    • Design Concept
    • Color themes
    • Screenshots of UI elements for inspiration
    • Visual hierarchy used in moodboard to show ideas

Morning Activity: Graphic Jam

  • Time: 45 minutes to 1 hour
  • 1 full class run through with 3 participants
  • Structure: 3 groups of 8* (1 person will act as facilitator)
  • Tool: Figjam

Debrief (20* min)

  • Each team will get a chance to talk about their favourite board
    • Facilitator screen shares
    • Team members talk about their images

Break 15 Min

What is a Moodboard?

  • What is a Moodboard: Freecodecamp Article
  • Ways to establish a design concept
  • Find inspiration for color, typefaces, tone, imagery, emotion, identity…
  • Moodboards are used to communicate with clients, to establish a base pattern of styles, to gather stock content, and to brainstorm
  • Tools commonly used:
    • Figma or Figjam
    • Pinterest (great for getting your client to drop ideas into a space for you to look at)
    • Any other whiteboarding software could work
    • Manually with pen, paper, and images

Go over Assignment 1

  • Questions

Break

Usability

How we make information easy to access in web space

Activity: Usability and good/bad design of items from home

  • In small groups, talk about the items that you found around your house
    • In what way are they good or bad design
    • Are there any mental models or metaphors at play with your item? or is that item the basis for a digital metaphor (think about the mental models video)
  • After about 15 minutes discuss items as a class (1 or 2 from each group)
    • If you didn’t participate in the first debrief, participate in this one

Terminology

  • Usability : A quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process.
  • Information Hierarchy : A discipline that focuses on organizing, structuring, and labeling content in an effective and sustainable way.
  • Satisfice : When a user chooses the first reasonable option instead of the best option.
  • Interaction Cost : The sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.

Satisficing

Unless faced with life-changing information, most site visitors won’t read all of the content provided but settle for a “good-enough” answer. Better sorting and clearer writing satisfy users without exhausting the limited time they’re willing to spend on a website.

How we really use the web:

  1. We don’t read pages. we scan them.
  1. We don’t make optimal choices. We satisfice. Satisficing
  2. We don’t figure out how things work. We muddle through. Information foraging Source: Don’t Make Me Think by Steve Krug

Usable sites/apps minimize Interaction Cost

Throughout this program we will be making design decisions that will (hopefully) maximize the usability of our websites and applications by minimizing interaction costs for the user. We do this by minimizing:

Break 15 Minutes

Common UI Elements

To make content scannable and hierarchically organized, we use a variety of UI elements to organize content.

For your assignment 1, you will be finding screenshots of UI elements that you like and fit your design concept for inspiration

Important Elements

  • Headers
  • Navigation (a class of elements in it’s own)
  • Lists
  • Cards
  • Footers
  • Hero Sections

Small Group Activity

  • Navigate to: Ui-Patterns
  • Search through different elements
  • Discuss your preferences and instances that you recognize from your favourite websites
  • Debrief:
    • As a class, each group will talk about 1 element and show one site that reflects that element

Lab Time

  • Work on Assignment 1

Homework