Downloaded 238 times
Uploaded byDave Stadler
How Do I UX?
This document provides tips and advice for navigating a career in user experience (UX) design. It discusses key aspects of UX like defining UX versus UI, conducting user research, creating wireframes and prototypes, and effective project planning and workflow. Specific tips include talking to clients to understand needs, using agile methods, conducting card sorting and user interviews, and the importance of sketching, wireframing and iteration. Recommended books and tools are also provided.
More Related Content
How Do I UX?
- 1. How Do IUX? Navigating Buzz-Words and Doing Work
- 2.
- 3.
- 4.
- 5.
- 6. we build applications forclients.
- 7. we build applications forourselves.
- 8.
- 9.
- 10.
- 11. let’s talk designin terms of web • Graphic Designer • Illustrator • Typographer • Web Designer • Information Architect • Interaction Designer • User Interface Designer • User Experience Designer
- 12. is this adesigner?
- 13. …why are theyalways touching their faces?
- 14. • Helvetica • SteveJobs • 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.
- 16. what is MODERNWEB DESIGN?
- 17. “ I’ve been amazedat 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 problemsolver. @jmspool
- 19. check out hissite https://www.uie.com/articles/ • Great Articles • Upcoming Workshops • Upcoming Conferences
- 20. website design v.s.application design
- 21. read this book TheUser Experience Team of One: A Research and Design Survival Guide by Leah Buley @ugleah
- 22.
- 23.
- 24. why is netflixsuccessful? • Wealth of Content • Cost • Ease of Use • Beautiful Navigation • Intuitive Features
- 25. simple choices • ClearHierarchy • Icons for Actions • Rating system • Secondary Navigation
- 26. simple interfaces • Taskoriented • Generic UI Patterns • Transparent • Interactive
- 27. intuitive suggestions • UserDelight • Enabling • Taking out steps
- 28. Not all applicationsare created equally. Caveat emptor
- 29. healthcare.gov • Controversial Content •Small Margin for Error • Scalability Issues • Usability Confusion • Low Confidence
- 30. so where dowe start?
- 31. conversation • Talk tothe client • Listen to their idea(s) • Take Notes • Give Minimal Direction • Keep in mind scope
- 32. The summation ofan 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 notUI. 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 notui 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 toux 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 Designis a Job by Mike Monteiro @monteiro
- 39. project kick-off • CreateSchedule • Provide Educational Resources • Rubrics • Expectations • Budget Transparency • Deliverables
- 40. gather ideas fromstakeholders • 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 • Notjust for Developers • Transparency • Pivoting • Thwarts Client Shock • Elicits Ideas from Team
- 43. don’t go chasingwaterfalls • Slows down the process • Ad Agency Model • Hides Designs for “Big Reveal” • Puts Eggs in One Basket • Isolates Designer
- 44.
- 45. persona research • Targetspecific 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-Personwalkthroughs • 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 • UserCentered Taxonomy • Information Architecture • Workflows • Menu Structure • Navigation Paths • Open / Closed / Reverse
- 50. Site maps • Breaksite into chunks • Outline • Condense Actions • Top Level • Hierarchy
- 51. use pinterest Write allover them and put them everywhere.
- 52. buy lots ofthese Write all over them and put them everywhere.
- 53. sleep near anotebook Ideas come at all hours, not just at the office.
- 54.
- 55. “ …content strategy isto copywriting, as information architecture is to design. Rachel Lovinger @rlovinger ”
- 56. Everything’s An Argument byAndrea A. Lunsford read this book
- 57.
- 58. design principles 1: Visualdesign ! 2: interaction ! 3: psychology
- 59. wire-framing • Sketching isnot 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.
- 61. what are annotations? •Key to Wireframe • Short Descriptors • Focus on Benefits • Number Items !
- 62.
- 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?
- 64.
- 65. take a life-studyclass • 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 willdo in pinch • Use at own discretion
- 68. get your handsdirty • Start Today • Anyone can learn • Practice • Practice • Practice
- 69.
- 70. photoshop etiquette http://photoshopetiquette.com • FileOrganization • Best Practices • Naming Conventions • Layer Organization
- 71.
- 72. alternatives to photoshop? •Macaw • Sketch • Fireworks
- 73.
- 74.
- 75. style tiles • FileOrganization • Best Practices • Naming Conventions • Layer Organization