Your SlideShare is downloading. ×
0
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
How Do I UX by Quick Left
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How Do I UX by Quick Left

364

Published on

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? …

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.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
364
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. How Do I UX? Navigating Buzz-Words and Doing Work
  2. @_davestadler Hi, I’m dave
  3. pointing ! at post-it notes! since 2007
  4. @quickleft
  5. development, design, and consulting.
  6. we build applications! for clients.
  7. we build applications! for ourselves.
  8. AND WE’RE HIRING.
  9. •boulder! •portland! •san francisco
  10. info@quickleft.com
  11. let’s talk design in terms of web • Graphic Designer! • Illustrator! • Typographer! • Web Designer! • Information Architect! • Interaction Designer! • User Interface Designer! • User Experience Designer
  12. is this a designer?
  13. …why are they always touching their faces?
  14. • 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:
  15. UX web design
  16. what is MODERN WEB DESIGN?
  17. “! 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”
  18. be a problem solver. @jmspool
  19. check out his site https://www.uie.com/articles/ • Great Articles! • Upcoming Workshops! • Upcoming Conferences
  20. website design v.s. application design
  21. read this book The User Experience Team of One: ! A Research and Design Survival Guide by Leah Buley! @ugleah
  22. ux design! drives ! application ! usability usability! builds ! customer! satisfaction e
  23. applications
  24. why is netflix successful? • Wealth of Content! • Cost! • Ease of Use! • Beautiful Navigation! • Intuitive Features
  25. simple choices • Clear Hierarchy! • Icons for Actions! • Rating system! • Secondary Navigation
  26. simple interfaces • Task oriented! • Generic UI Patterns! • Transparent! • Interactive
  27. intuitive suggestions • User Delight! • Enabling! • Taking out steps
  28. Not all applications are created equally. Caveat emptor
  29. healthcare.gov • Controversial Content! • Small Margin for Error! • Scalability Issues! • Usability Confusion! • Low Confidence
  30. so where do we start?
  31. conversation • Talk to the client! • Listen to their idea(s)! • Take Notes! • Give Minimal Direction ! • Keep in mind scope
  32. 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.
  33. “! 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 ”
  34. 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.
  35. A map to ux design
  36. outline project scope • Talk to your client! • Listen to their idea(s)! • Take Notes! • Give Minimal Direction ! • Keep Realistic Parameters! • Pragmatism
  37. proposals • Inform ! • Educate! • Display Worth! • Show Proof of Concept! • Direct to Action
  38. read this book Design is a Job by Mike Monteiro! @monteiro
  39. project kick-off • Create Schedule! • Provide Educational Resources ! • Rubrics! • Expectations! • Budget Transparency! • Deliverables
  40. gather ideas from stakeholders • Establish Who is Client Lead! • Enlist Allies! • Encourage Interaction! • Feedback Windows! • Acceptance Doors
  41. run meetings effectively • Introduction! • Set Expectations First! • Present ! • Elicit Feedback! • Summarize! • Close
  42. agile workflow • Not just for Developers! • Transparency! • Pivoting! • Thwarts Client Shock! • Elicits Ideas from Team
  43. don’t go chasing waterfalls • Slows down the process! • Ad Agency Model! • Hides Designs for “Big Reveal”! • Puts Eggs in One Basket! • Isolates Designer
  44. field research
  45. 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/
  46. user interviews • In-Person walkthroughs! • Phone Calls! • Hangouts/Skype! • Questionnaires
  47. PLANNING FOR PROJECTS • Resourcing the Team! • Research! • Discovery Phase! • Design! • Test! • Iterate
  48. user journey mapping • Use personas if available! • Walkthrough a use case! • Post-It notes! • White Boards! • Flow-charts! • Google Docs
  49. card sorting • User Centered Taxonomy! • Information Architecture! • Workflows! • Menu Structure! • Navigation Paths! • Open / Closed / Reverse
  50. Site maps • Break site into chunks! • Outline! • Condense Actions! • Top Level ! • Hierarchy
  51. use pinterest
  52. buy lots of these Write all over them and put them everywhere.
  53. sleep near a notebook Ideas come at all hours, not just at the office.
  54. content strategy
  55. “! …content strategy is to copywriting, as information architecture is to design. Rachel Lovinger ! @rlovinger ”
  56. Everything’s An Argument by Andrea A. Lunsford read this book
  57. product design
  58. design principles 1: Visual design! ! 2: interaction! ! 3: psychology
  59. 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/
  60. example:
  61. what are annotations? • Key to Wireframe! • Short Descriptors! • Focus on Benefits! • Number Items!
  62. pencils and erasers
  63. 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
  64. use a ruler
  65. 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!
  66. Paper app - by 53 • Free! • Digital Wire-framing! • Extra nice features are $12
  67. bar napkin will do in pinch • Use at own discretion
  68. get your hands dirty • Start Today! • Anyone can learn! • Practice! • Practice! • Practice
  69. high fidelity comps
  70. photoshop etiquette http://photoshopetiquette.com • File Organization! • Best Practices! • Naming Conventions! • Layer Organization
  71. example:
  72. alternatives to photoshop? • Macaw! • Sketch! • Fireworks
  73. macaw • $130
  74. sketch • $30

×