Course Notes - Session 1

Overview

Nathan Valderrama Instructor nathanvalderrama@gmail.com

Introductions:

  • Name
  • Why UX
  • Favorite or Worst App
  • Experience level

General stuff and things

  • Story from Nathan regarding the shadow program at Boulder Running Club

  • Credibility is becoming a large thing. The trend is coming back that reviews are really helpful. Reviews don't generate themselves, actually. You need to prompt people to leave the reviews... you have to ask for them!

  • Moore's Law is applicable to how fast UI/UX tech, jobs, etc. are moving right now. Everything is exponential. There was a story about the inventor of Chess playing a game against the Chinese emperor.
  • Jakob's Law is that we use what already works because the user already knows how to use it, they spend more time on other websites than yours. See below
  • Best way to learn in this industry is peer-to-peer learning and knowledge

Card Sort Exercise

  • It's about grouping
  • It's about laying something in front of users, and letting them sort the cards into a category to determine importance, or all sorts of things
  • Question: What do we need to accomplish a successful UX Project, front to back?
  • Use testing to validate your assumptions, or whatever

Design Philosophy

  • Space Jam website!
    • Apparently it's industry-wide famous among UX folk
    • Example of using not-good IA
    • No nesting (hierarchy)

Human Computer Interaction Fundamentals

Miller's Law

  • Miller's Law pertains to how many things a human mind can remember/understand at a time... this is about 7 +/- 2.
  • This means (in a UI/UX example) that we should design ideally 5 or fewer features/items/whatever "above the fold" or in a given space
  • Affordance: the quality or property of an object that defines its possible uses or makes clear how it can or should be used

Jakob's Law

  • Don't reinvent the wheel, users are used to common site design patterns
  • You reuse what works, because user's are already used to it
  • User's spend the majority of their time on other websites
  • Where does the logo go?

Von Restorf Effect

  • This is basically isolation, and can help users interact with and work through a UI. Make an element different in order to draw attention to it, so it stands out.
    • Isolate by position
    • Isolate by color
    • Isolate by size

Subconscious Design

  • Elements that the user doesn't notice exist, but help guide them through the UI without them knowing
  • Subtle elements like horz rules, drop shadows, etc.

Agile vs. Waterfall

Pick a project and initial requirements

  • Create app description
  • Define user story/stories
  • Define requirements
  • Audit requirements
  • Draw or document workflows

⭐ CAIC App and Website Improvements

Description: The CAIC website and mobile apps provide constantly updated backcountry avalanche forecasts for everyone in Colorado.

User Stories:

  1. As a CAIC app user, I would like the option to see updates from actual user submitted avalanche observations.
  2. As a CAIC app and website user I would like the ability to submit an avalanche observation with a specific location. (Already exists on the Submit an Obs page, neat! But can it be improved?)
  3. As a CAIC app and website user I would like to be able to view User Submitted Avalanche Observations "near me".

Requirements:

  • User Story #1:
    • Create feature parity for the user submitted avalanche observations website feature within the app UI.
  • User Story #2:
    • Select specific location (Lat/Long) of observation on a map (website and app)
    • Use location awareness to identify Lat/Long of observation being submitted
    • Create feature parity for the user submission of observation website feature within the app UI.
  • User Story #3:
    • Select on a map specific location and/or use device location information
    • Set a range of distance from that location
    • Return a list of user submitted observations using the location/distance parameters

⭐ Shuttlemate

Description: A hook-up app for mountain bikers, rafters, skiers, and other outdoor recreationalists to connect and share the burden of transportation logistics when doing activities that involve point-to-point travel.

User Story: As a mountain biker, I want an app that connects me with other riders who want to share the vehicle logistics for point-to-point (one-way) trails where commercial shuttle services are either unavailable or cost prohibitive.

Requirements:

  • Location aware (optional, might not be necessary for an MVP)
  • User can input what trail they want to ride, and what day/time they want to ride it
  • Matches with other users interested in the same trail/day
  • Provides a way for the two users to connect IRL

Evan Chute Portfolio Website

Description: Website showcasing my graphic, digital, interactive, and UI/UX design.

User Story: As a hiring manager I need to ensure that Evan Chute is capable of the work I am going to hire him for.

Requirements:

  • Feature and display all of my work, sortable/filterable by "some criteria"
  • Resume
  • About Evan
  • Case Studies

Untappd

Description: App that allows users to check-in, rate, and comment on beers they and other users have drank. Also has gamification, social, discovery, and other functionality.

User Story:

Requirements:

PassWitch

Description: A password creation, storage, and auto-fill app.

User Story:

Requirements:

MTB Project

Description:

User Story:

Requirements:

Volunteer App

Description:

User Story:

Requirements:

User Flow Workshop

  • Starts with a user!
  • Symbols
    • Square/rectangle for pages/screens
    • Small ovals for buttons
    • Diamonds for decisions
  • Don't worry about UI elements... make these things dead simple and w/o design (this is disable)
  • Happiness meter (wait... what?)

Follup

Homework

  1. Refined Requirements (Text Doc)
  2. Userflow based on requirements (Drawing, document, .sketch, .xd, draw.io)

Resources

A .zip archive of all resources can be downloaded here.


This page was last updated: 11-6-2019