Post on 11-Aug-2014
description
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
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
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