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

@_davestadler

Hi, 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

info@quickleft.com

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

e

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 pinterest

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?s=aps&ie=UTF8&qid=1395063254&sr=1-1-catcorr&keywords=greyscale+markers

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