SPD 1.2

Dan Morse

October 29th, 2018

UX/UI design

Why learn this?
- For you
  - More attractive portfolio
- For your users
  - Increase conversions
  - Reduce customers getting confused or lost
  - Retention

Class objectives

Define and compare and cantrast UX and UI
Identify and utilize many of the common UX conventions in the US
Describe and utilize inforamtion hierarchy to improve your users experience of your application
Describe the importance of system state to a good user expereince

General notes

UX encapsulates the UI.
UX
- Information Hierarchy
- SYstem state
- User hourneys
- wireframes
- prototypes
UI
- Colors
- fonts
- typography
- graphics
- animations

UX

Follow Convention vs break convention
- Follow UX convention
  - Many users
  - diverse set of users
  - maximize conversions
  - design "falls to the back"
  - Examples
    - A startup
    - A conventional business or client
- Break UX Convention
  - Few users
  - Only highly techie/designie people use it
  - You want it to stand out
  - Design is in the forefront
  - Examples
    - Personal webssites
    - For edgy creatives

TPS

Common UX conventions
- web
  - Horizontal navbar that spans the entire page
  - Sign in button on the right of it
  - Different fonts/font-sizes for headings, paragraphs, and other information on the page
  - Splitting information on pages into thirds for easy digest
  - Using icons to represent actions or places the user can go to or do
  - Clear call to action
  - Scrolling down, rather than sideways
  - smooth animations
  - Making what's clickable stand out
  - Logo redirects to homepage
  - Profile picture goes to profile page
  - Hamburger menus
  - footers
  - cards
  - popup alerts
  - announcement banners
  - carousels of images
  - pointer changing over links
  - hover effects
  - active link effects
  - table of contents
  - breadcrumbs
  - red/yellow/green -> Err/Warning/Success
- Mobile
  - Slide to take action

Visual Hierarchy

Common Visual Hierarchy conventions
- Larger / different fonts to convey different information
- Text placement
- Bullet points
- Colors
- Avoid blocks of text
- Spacing
- Symmetry
- Contrast
- Direction
- Page scanning patterns

System state

Examples of system state
- Logged in
- Loading
- Error
  - User error
  - Client-side error
  - Server-side error
- Success
- System Down