Girl Develop It- don't be shy, develop it Logo!

Intro to User Experience

Class 3

Welcome

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun!

Introduction

I'm here to help!

Agenda

  1. Information Architecture
  2. Interaction Design
  3. Wireframing
  4. Rapid prototyping
  5. Iterating on Feedback
  6. Visual Design
  7. Resource Review

1. Information Architecture

The 'Scent' of a Website

Human Computer Interaction
(available to NC residents via NC LIVE)

Example

www.nytimes.com

Card Sorting

Example website

Pick out all the 'things' in a site

  • Write them down, each seperately.
  • Look for groups and patterns
  • People, places things
  • Put things that are alike together

Hub and Spoke Diagrams

  • Come up with a description of what makes things alike
  • SAT logic: X is to Y as A is to B
  • Nouns, verbs, and adjectives

Sitemaps

Example

2. Interaction Design

Make a map

Example Requirements

  • User uploads a file
  • Superuser is notified, approves and rejects file
  • File is posted to website, or is not posted

Example Requirements

  • User logs in, uploads a file
  • Superuser logs in, is notified, approves and rejects file
  • File is posted to website, or is not posted

Some holes

  • What does the user see before she has uploaded a file?
  • Can the user see other files she’s uploaded in the past? Can she edit them?
  • How is the superuser notified? Email, RSS feed, in-app messaging?
  • What happens when the superuser rejects a file? Is the user notified?
  • Is the user notified when the file is approved? When it’s posted?

Exercise: Let's map it out

A note on states

  • A given page or section of a website or application may be variable.
  • Buttons and links can be disabled, active, already viewed.
  • Content may be filtered
  • Always indicate visually to the user what is happening
  • See also: affordance

3. Wireframing

  • Separate layouts, architecture, and interactions from branding and color.
  • Less emotional
  • Quick to implement
  • Example

Wireframing Tools

  • Balsamiq
  • Mockingbird
  • Cacoo
  • Adobe Suite
  • Omnigraffle
  • MS Visio

Paper/Whiteboard Wireframes

4. Prototyping in Code

  • The way of the future
  • Telepathic design implementation

5. Getting Feedback

  • Iterate
  • Don't get attached

Exercise: Make a wireframe

6. Visual Design

This is where all your hard work starts to pay off

You've already done the hard part!

Usability and Color

  • Color affects accessibility. (Up to 10% of the population is colorblind*)
  • We have cultural expectations about color.
  • We have years of training using computers with certain conventions.
*Via Color Blind Awareness

Some common conventions

Green Success Message

Red Fail Message

Contrast

Lack of Contrast

Fonts

Fun != easy to read.

Get feedback from professionals

7. Resource Review

Books

  • Designing Web Usability, Jakob Nielsen. $34 on Amazon
  • Don't Make Me Think: A Common Sense Approach to Web Usability, Steve Krug. $22 on Amazon
  • The Elements of User Experience: User-Centered Design for the Web and Beyond, Jesse James Garrett. $24 on Amazon.
  • Envisioning Information, Edward Tufte. $33 on Amazon.
  • Web Form Design: Filling in the Blanks, Luke Wroblewski. $39 on Amazon

Online Resources

Make some friends

Some people to follow

Conferences

  • An Event Apart
  • IxDA
  • Agile UX
  • IA Summit
  • CHI

Meetups- the poor girl's conference

  • Refresh the Triangle (Refreshes are everywhere in the US)
  • Local chapter of The Usability Professional’s Association, TriUXPA
  • Local chapter of Interaction Design Association
  • AIGA

Toys

Go forth, and be awesome!