View
111
Download
0
Category
Tags:
Preview:
DESCRIPTION
User Experience Design, or UX Design, is often a mystifying term thrown around in sales pitches, conferences, client engagements, and the like, but what does it really entail? Any successful application is always built, at its core, around problem solving. Take a look through the presentation to see how we approach UX Design here at Quick Left. We’ll help navigate through all the buzz words, and get down to real world examples of successful user experience design. This is part one of a two part series. Part two coming soon.
Citation preview
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
Recommended