How Do I UX?

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

@_davestadlerHi, I’m dave

pointing at post-it notes since 2007

@quickleft

development, design, and consulting.

we build applications for clients.

we build applications for ourselves.

AND WE’RE HIRING.

•boulder •portland

•san francisco

[email protected]

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

• Illustrator

• Typographer

• Web Designer

• Information Architect

• Interaction Designer

• User Interface Designer

• User Experience Designer

is this a designer?

…why are they always touching their faces?

• 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:

UX web design

what is MODERN WEB DESIGN?

“ 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”

be a problem solver.@jmspool

check out his site

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

• Great Articles

• Upcoming Workshops

• Upcoming Conferences

website design v.s. application design

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

by Leah Buley @ugleah

ux design drives application usability usability

builds customer

satisfaction

applications

why is netflix successful?

• Wealth of Content

• Cost

• Ease of Use

• Beautiful Navigation

• Intuitive Features

simple choices

• Clear Hierarchy

• Icons for Actions

• Rating system

• Secondary Navigation

simple interfaces

• Task oriented

• Generic UI Patterns

• Transparent

• Interactive

intuitive suggestions

• User Delight

• Enabling

• Taking out steps

Not all applications are created equally.

Caveat emptor

healthcare.gov

• Controversial Content

• Small Margin for Error

• Scalability Issues

• Usability Confusion

• Low Confidence

so where do we start?

conversation

• Talk to the client

• Listen to their idea(s)

• Take Notes

• Give Minimal Direction

• Keep in mind scope

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.

“ 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”

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.

A map to ux design

outline project scope

• Talk to your client

• Listen to their idea(s)

• Take Notes

• Give Minimal Direction

• Keep Realistic Parameters

• Pragmatism

proposals

• Inform

• Educate

• Display Worth

• Show Proof of Concept

• Direct to Action

read this bookDesign is a Job

by Mike Monteiro @monteiro

project kick-off

• Create Schedule

• Provide Educational Resources

• Rubrics

• Expectations

• Budget Transparency

• Deliverables

gather ideas from stakeholders

• Establish Who is Client Lead

• Enlist Allies

• Encourage Interaction

• Feedback Windows

• Acceptance Doors

run meetings effectively

• Introduction

• Set Expectations First

• Present

• Elicit Feedback

• Summarize

• Close

agile workflow

• Not just for Developers

• Transparency

• Pivoting

• Thwarts Client Shock

• Elicits Ideas from Team

don’t go chasing waterfalls

• Slows down the process

• Ad Agency Model

• Hides Designs for “Big Reveal”

• Puts Eggs in One Basket

• Isolates Designer

field research

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/

user interviews

• In-Person walkthroughs

• Phone Calls

• Hangouts/Skype

• Questionnaires

PLANNING FOR PROJECTS

• Resourcing the Team

• Research

• Discovery Phase

• Design

• Test

• Iterate

user journey mapping

• Use personas if available

• Walkthrough a use case

• Post-It notes

• White Boards

• Flow-charts

• Google Docs

card sorting

• User Centered Taxonomy

• Information Architecture

• Workflows

• Menu Structure

• Navigation Paths

• Open / Closed / Reverse

Site maps

• Break site into chunks

• Outline

• Condense Actions

• Top Level

• Hierarchy

use pinterestWrite all over them and put them everywhere.

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

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

content strategy

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

Rachel Lovinger @rlovinger”

Everything’s An Argument

by Andrea A. Lunsford

read this book

product design

design principles

1: Visual design !

2: interaction !

3: psychology

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/

example:

what are annotations?

• Key to Wireframe

• Short Descriptors

• Focus on Benefits

• Number Items

!

pencils and erasers

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?

use a ruler

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

!

Paper app - by 53

• Free

• Digital Wire-framing

• Extra nice features are $12

bar napkin will do in pinch

• Use at own discretion

get your hands dirty

• Start Today

• Anyone can learn

• Practice

• Practice

• Practice

high fidelity comps

photoshop etiquette

http://photoshopetiquette.com

• File Organization

• Best Practices

• Naming Conventions

• Layer Organization

example:

alternatives to photoshop?• Macaw

• Sketch

• Fireworks

macaw

• $130

sketch

• $30

style tiles• File Organization

• Best Practices

• Naming Conventions

• Layer Organization