How Do I UX?

of 75 /75
How Do I UX? Navigating Buzz-Words and Doing Work

description

Introduction to User Experience Design.

Transcript of How Do I UX?

Page 1: How Do I UX?

How Do I UX?Navigating Buzz-Words and Doing Work

Page 2: How Do I UX?

@_davestadlerHi, I’m dave

Page 3: How Do I UX?

pointing at post-it notes since 2007

Page 4: How Do I UX?

@quickleft

Page 5: How Do I UX?

development, design, and consulting.

Page 6: How Do I UX?

we build applications for clients.

Page 7: How Do I UX?

we build applications for ourselves.

Page 8: How Do I UX?

AND WE’RE HIRING.

Page 9: How Do I UX?

•boulder •portland

•san francisco

Page 11: How Do I UX?

let’s talk design in terms of web• Graphic Designer

• Illustrator

• Typographer

• Web Designer

• Information Architect

• Interaction Designer

• User Interface Designer

• User Experience Designer

Page 12: How Do I UX?

is this a designer?

Page 13: How Do I UX?

…why are they always touching their faces?

Page 14: How Do I UX?

• Helvetica

• Steve Jobs

• Unsolicited Re-designs

• i.e. Weather Apps

• Research and Statistics

• Cheeky T-Shirts

• Adobe software

Things Designers Like:

• Comic Sans

• Steve Ballmer

• Unsolicited Feedback

• i.e. “My cousin is a designer”

• Opinions and Gut Feelings

• Cargo shorts

• Gimp software

Things Designers Don’t Like:

Page 15: How Do I UX?

UX web design

Page 16: How Do I UX?

what is MODERN WEB DESIGN?

Page 17: How Do I UX?

“ I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration - likely because so much bad design simply is decoration. - Good design isn’t. !

- Good design is problem solving.

Jeffrey Veen”

Page 18: How Do I UX?

be a problem solver.@jmspool

Page 19: How Do I UX?

check out his site

https://www.uie.com/articles/

• Great Articles

• Upcoming Workshops

• Upcoming Conferences

Page 20: How Do I UX?

website design v.s. application design

Page 21: How Do I UX?

read this bookThe User Experience Team of One: A Research and Design Survival Guide

by Leah Buley @ugleah

Page 22: How Do I UX?

ux design drives application usability usability

builds customer

satisfaction

Page 23: How Do I UX?

applications

Page 24: How Do I UX?

why is netflix successful?

• Wealth of Content

• Cost

• Ease of Use

• Beautiful Navigation

• Intuitive Features

Page 25: How Do I UX?

simple choices

• Clear Hierarchy

• Icons for Actions

• Rating system

• Secondary Navigation

Page 26: How Do I UX?

simple interfaces

• Task oriented

• Generic UI Patterns

• Transparent

• Interactive

Page 27: How Do I UX?

intuitive suggestions

• User Delight

• Enabling

• Taking out steps

Page 28: How Do I UX?

Not all applications are created equally.

Caveat emptor

Page 29: How Do I UX?

healthcare.gov

• Controversial Content

• Small Margin for Error

• Scalability Issues

• Usability Confusion

• Low Confidence

Page 30: How Do I UX?

so where do we start?

Page 31: How Do I UX?

conversation

• Talk to the client

• Listen to their idea(s)

• Take Notes

• Give Minimal Direction

• Keep in mind scope

Page 32: How Do I UX?

The summation of an individual’s sensory driven experience, created through their interaction with a particular company, person, and/or other element.

user experience in brief.

Page 33: How Do I UX?

“ UX is not UI. UX is an acronym for “user experience.” It is almost always followed by the word “design.” …But these designers aren’t designing things in the same sense as a visual or interface designer. !

- UX is the intangible design of a strategy that brings us to a solution.

Erik Flowers @Erik_UX”

Page 34: How Do I UX?

ux is not ui

www.uxisnotui.com

UX and UI are buzz words. !

UX = User Experience UI = User Interface !

Be careful, and learn the difference. UX is much more comprehensive and encapsulates many professions in the field. !

Whereas UI generally refers solely to a screen design, or specific designer.

Page 35: How Do I UX?

A map to ux design

Page 36: How Do I UX?

outline project scope

• Talk to your client

• Listen to their idea(s)

• Take Notes

• Give Minimal Direction

• Keep Realistic Parameters

• Pragmatism

Page 37: How Do I UX?

proposals

• Inform

• Educate

• Display Worth

• Show Proof of Concept

• Direct to Action

Page 38: How Do I UX?

read this bookDesign is a Job

by Mike Monteiro @monteiro

Page 39: How Do I UX?

project kick-off

• Create Schedule

• Provide Educational Resources

• Rubrics

• Expectations

• Budget Transparency

• Deliverables

Page 40: How Do I UX?

gather ideas from stakeholders

• Establish Who is Client Lead

• Enlist Allies

• Encourage Interaction

• Feedback Windows

• Acceptance Doors

Page 41: How Do I UX?

run meetings effectively

• Introduction

• Set Expectations First

• Present

• Elicit Feedback

• Summarize

• Close

Page 42: How Do I UX?

agile workflow

• Not just for Developers

• Transparency

• Pivoting

• Thwarts Client Shock

• Elicits Ideas from Team

Page 43: How Do I UX?

don’t go chasing waterfalls

• Slows down the process

• Ad Agency Model

• Hides Designs for “Big Reveal”

• Puts Eggs in One Basket

• Isolates Designer

Page 44: How Do I UX?

field research

Page 45: How Do I UX?

persona research

• Target specific demographics for users

• Discover multiple personas

• Build out interactions

• Test Personas

• Tie Personas to Workflows

https://blog.mailchimp.com/new-mailchimp-user-persona-research/

Page 46: How Do I UX?

user interviews

• In-Person walkthroughs

• Phone Calls

• Hangouts/Skype

• Questionnaires

Page 47: How Do I UX?

PLANNING FOR PROJECTS

• Resourcing the Team

• Research

• Discovery Phase

• Design

• Test

• Iterate

Page 48: How Do I UX?

user journey mapping

• Use personas if available

• Walkthrough a use case

• Post-It notes

• White Boards

• Flow-charts

• Google Docs

Page 49: How Do I UX?

card sorting

• User Centered Taxonomy

• Information Architecture

• Workflows

• Menu Structure

• Navigation Paths

• Open / Closed / Reverse

Page 50: How Do I UX?

Site maps

• Break site into chunks

• Outline

• Condense Actions

• Top Level

• Hierarchy

Page 51: How Do I UX?

use pinterestWrite all over them and put them everywhere.

Page 52: How Do I UX?

buy lots of theseWrite all over them and put them everywhere.

Page 53: How Do I UX?

sleep near a notebookIdeas come at all hours, not just at the office.

Page 54: How Do I UX?

content strategy

Page 55: How Do I UX?

“ …content strategy is to copywriting, as information architecture is to design.

Rachel Lovinger @rlovinger”

Page 56: How Do I UX?

Everything’s An Argument

by Andrea A. Lunsford

read this book

Page 57: How Do I UX?

product design

Page 58: How Do I UX?

design principles

1: Visual design !

2: interaction !

3: psychology

Page 59: How Do I UX?

wire-framing

• Sketching is not Drawing

• Layer your Sketches

• Loosen up

• Play to your strengths

• Focus on Interaction

• Design is in the Details

http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/

Page 60: How Do I UX?

example:

Page 61: How Do I UX?

what are annotations?

• Key to Wireframe

• Short Descriptors

• Focus on Benefits

• Number Items

!

Page 62: How Do I UX?

pencils and erasers

Page 63: How Do I UX?

get ‘cool grey’ markers

• Expensive

• Worth it

• Usually around $40

http://www.amazon.com/Primsacolor-Premier-Double-Markers-Colored/dp/B0007YLFC6/ref=sr_1_cc_1?

Page 64: How Do I UX?

use a ruler

Page 65: How Do I UX?

take a life-study class

• Draw Naked People

• Get over yourself

• Turns out almost no one is a ‘model’

• Great way to learn how to sketch quickly

• Takes Pressure Away

!

Page 66: How Do I UX?

Paper app - by 53

• Free

• Digital Wire-framing

• Extra nice features are $12

Page 67: How Do I UX?

bar napkin will do in pinch

• Use at own discretion

Page 68: How Do I UX?

get your hands dirty

• Start Today

• Anyone can learn

• Practice

• Practice

• Practice

Page 69: How Do I UX?

high fidelity comps

Page 70: How Do I UX?

photoshop etiquette

http://photoshopetiquette.com

• File Organization

• Best Practices

• Naming Conventions

• Layer Organization

Page 71: How Do I UX?

example:

Page 72: How Do I UX?

alternatives to photoshop?• Macaw

• Sketch

• Fireworks

Page 73: How Do I UX?

macaw

• $130

Page 74: How Do I UX?

sketch

• $30

Page 75: How Do I UX?

style tiles• File Organization

• Best Practices

• Naming Conventions

• Layer Organization