How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp
40 likes23,360 views
The document outlines a presentation by Dan Olsen on becoming a successful UX designer as a solo practitioner. It covers the importance of user experience (UX) design, its distinction from user interface (UI) design, and various elements such as information architecture, interaction design, and visual design. The talk emphasizes the need for diverse skills in product teams and provides tools and techniques for effective UX design.
![{ ]
How to be
A UX Design
Army of One
Dan Olsen
Olsen Solutions
Silicon Valley
Product Camp
March 23, 2013](https://image.slidesharecdn.com/how-to-be-a-ux-design-army-of-one-by-dan-olsen-silicon-valley-product-camp-2013-130324001105-phpapp02/85/How-to-Be-a-UX-Design-Army-of-One-by-Dan-Olsen-at-Silicon-Valley-Product-Camp-1-320.jpg)
![http://olsensolutions.com
{ Questions?
] http://slideshare.net/dan_o
@danolsen](https://image.slidesharecdn.com/how-to-be-a-ux-design-army-of-one-by-dan-olsen-silicon-valley-product-camp-2013-130324001105-phpapp02/85/How-to-Be-a-UX-Design-Army-of-One-by-Dan-Olsen-at-Silicon-Valley-Product-Camp-46-320.jpg)
How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp
- 1. { ] How to be A UX Design Army of One Dan Olsen Olsen Solutions Silicon Valley Product Camp March 23, 2013
- 2. My Background n Educa/on n BS, Electrical Engineering, Northwestern n MS, Industrial Engineering, Virginia Tech n MBA, Stanford n Web development and UI design courses n 20 years of Product Management Experience n Managed submarine design for 5 years n 5 years at Intuit, led Quicken Product Management n Led Product Management at Friendster n CEO & Cofounder of YourVersion (personalized news) n Product consultant: Box, YouSendIt, Epocrates n Speaker, Author “42 Rules of Product Management” Will post slides to hYp://slideshare.net/dan_o
- 3. UX Design Army of One n What is “UX Design”? n UX = User experience n Designing the product in a way that : n meets customer needs See my other talks n meets needs beYer than alterna/ves n delivers a great user experience Focus of my talk today n “UX” vs. “UI” (User Interface): UX is broader n Why “Army of One”? n Great UX takes diverse set of people/skills n Skills are o`en missing from your product team n Good product people fill cri/cal gaps Copyright © 2013 Olsen Solu/ons
- 4. Gegng from PRD to Code Product Coded Product Requirements Document (PRD) Copyright © 2013 Olsen Solu/ons
- 5. Gegng from PRD to Code UX Design Product Coded Product Requirements Document (PRD) Copyright © 2013 Olsen Solu/ons
- 6. The UX Design Gap on Many Product Teams Level Define Design Code 1 Engineering 2 Product Mgmt Engineering 3 Product Mgmt Engineering Product Mgmt Engineering 4 PM Eng UI 5 PM Eng 5 Copyright © 2013 Olsen Solu/ons
- 7. Dan’s UX Design Iceberg What most people see and react to Visual Design What good product people Interaction think about Design Information Architecture Conceptual Design Copyright © 2013 Olsen Solu/ons
- 8. The Elements of User Experience by Jesse James GarreY Diagram available at www.jjg.net Copyright © 2013 Olsen Solu/ons
- 9. User Experience Framework = Workflow for the Product Team Workflow Coding Product UI/Interac/on Visual Developer Manager Designer Designer Copyright © 2013 Olsen Solu/ons
- 10. The Product A-‐Team Visual UI Designer Developer Designer Product Manager Copyright © 2013 Olsen Solu/ons
- 11. Elements of User Experience Design Consists of Three Dis/nct Elements: n Informa/on Architecture n Structure and layout at both site and page level n How site is structured (sitemap) n How site informa/on is organized (site layout) n How each page is organized (page layout) n Interac/on Design n How user and product interact with one another n User flows (e.g., naviga/on across mul/ple pages) n User input (e.g., controls and form design) n Visual Design n “How it looks” vs. “What it is”, o`en called “chrome” n Fonts, colors, graphical elements 10 Copyright © 2013 Olsen Solu/ons
- 12. Informa/on Architecture n Documents used n Sitemap n Show how sec/ons of website are organized n Show major naviga/on paYerns n Wireframes n Show the layout of components on a page n Does NOT focus on visual design n Black & White n No graphics n Templates for overall website and individual pages n Tools: Visio, OmniGraffle, Axure, Powerpoint, Word, Excel, Photoshop, Balsamiq, whiteboard Copyright © 2013 Olsen Solu/ons
- 13. Informa/on Architecture Sitemap Copyright © 2013 Olsen Solu/ons
- 14. Informa/on Architecture Sitemap Copyright © 2013 Olsen Solu/ons
- 15. Wireframe
- 16. Napkin Wireframe 15 Copyright © 2013 Olsen Solu/ons
- 17. Visual Hierarchy n Very important: impacts how users scan & read n Can you rank these circles in order of importance? Copyright © 2013 Olsen Solu/ons
- 18. Visual Hierarchy is Cri/cal n Posi/on n Top more important than boYom n Le` more important (le`-‐to-‐right languages) n Size n Larger more important than smaller n Color & contrast n Brighter/higher contrast more important than darker/lower contrast Copyright © 2013 Olsen Solu/ons
- 19. Visual Hierarchy Example Eye Tracking Heatmap 2 1 3 4 5 6 Copyright © 2013 Olsen Solu/ons
- 20. Eye Tracking Heatmap of Google Search Results Page What’s going on here? Why the dropoff?
- 21. Put Key Info & Ac/ons Above The Fold Landing Page A Landing Page B The Fold Key action is above the fold Key action is below the fold 20 Copyright © 2009 O2010 YourVersion Copyright © lsen Solu/ons LLC
- 22. Gestalt Principles: How We Visually Perceive Objects n Figure and Ground n Similarity n Proximity n Closure Copyright © 2013 Olsen Solu/ons
- 23. Grids Ensure You Have Good Alignment of Your Design Elements 970 pixel grid example 12 columns Each 68 px wide with 14 px guYer Copyright © 2013 Olsen Solu/ons
- 24. Can Use Grid to Make Blocks of Varying Width Copyright © 2013 Olsen Solu/ons
- 25. Wireframe Using Grid Copyright © 2013 Olsen Solu/ons
- 26. Interac/on Design n Documents used n Flowchart n Combina/on of Wireframes & Flowcharts n Tools: Visio, OmniGraffle, Powerpoint, Photoshop, whiteboard n May build prototype using HTML, jQuery, Ruby on Rails, Flash, or paper n Usability tes/ng can help find problems 25 Copyright © 2013 Olsen Solu/ons
- 27. Flowchart showing condi/onal logic Copyright © 2013 Olsen Solu/ons
- 28. Napkin Flowchart Copyright © 2013 Olsen Solu/ons
- 29. Combo Wireframe & Flowchart Copyright © 2013 Olsen Solu/ons
- 30. Visual Design n Documents used n Mockups (aka comps) n Tools used: n Photoshop n Illustrator n Fireworks n Deliverables n Usually images n Can be HTML & CSS Copyright © 2013 Olsen Solu/ons
- 31. Visual Design Mockup 30 Copyright © 2013 Olsen Solu/ons
- 32. Visual Design UI Spec Copyright © 2013 Olsen Solu/ons
- 33. Color Theory 101 n What are the primary colors? n A: Red, Yellow, Blue n B: Red, Green, Blue Copyright © 2013 Olsen Solu/ons
- 34. Hue & Color Wheel Primary Colors Secondary Colors Ter/ary Colors Copyright © 2013 Olsen Solu/ons
- 35. Colors are Specified as RGB Values n For each color, value can vary from 0 to 255 n Values are wriYen in hexadecimal (base 16) n Instead of 1 to 10, hex goes from 1 to 16 n Since we run out of digits, A thru F are used n A=10, B=11, C=12, D=13, E=14, F=15 n #10 = 16 in base 10 (1 x 16 + 0 x 1) Prize n #FF = 255 in base 10 (15 x 16 + 15 x 1) # 00 00 00 # FF 00 00 # FF FF FF # FF FF 00 Red Green Blue Red Green Blue Red Green Blue Red Green Blue 0 0 0 255 0 0 255 255 255 255 255 0 = Black = Red = White = Yellow Copyright © 2013 Olsen Solu/ons
- 36. Tints, Shades, and Tones n Tints: adding white to a pure hue n Shades: adding black to a pure hue n Tones: adding gray to a pure hue: 35 Copyright © 2013 Olsen Solu/ons
- 37. Specifying Color PaleYe Copyright © 2013 Olsen Solu/ons
- 38. Fonts 101 4 common fonts: n Times New Roman n Courier! n Arial" n Helvetica" n How is Courier different than the other 3 fonts? n Most designs use 2 fonts n one for body text n one for headings Copyright © 2013 Olsen Solu/ons
- 39. Fonts in a Browser n Web font choices use to be quite limited n Not any more, thanks to CSS @font-‐face n Other CSS proper/es for controlling text: n font-‐family n color n font-‐size n line-‐height n font-‐weight (bold) n font-‐style (italic) n text-‐decora/on (underline) n text-‐shadow (CSS3) Copyright © 2013 Olsen Solu/ons
- 40. What’s your Weapon of Choice? n Visio / OmniGraffle n Powerpoint n Photoshop / Illustrator / Fireworks n Balsamiq n Others? Copyright © 2013 Olsen Solu/ons
- 41. Design Ar/facts: Interac/vity vs. Fidelity Alpha Prototype Interactivity Interactive InVision* Wireframe Hand Static Mockup sketch Wireframe Fidelity *hYp://www.invisionapp.com 40 Copyright © 2013 Olsen Solu/ons
- 42. Design Tools: Fidelity vs. Effort 3 Photoshop Product Design Fidelity Manager 2 1 Balsamiq Visio Visual Hand Designer sketch Effort to Create Artifact Copyright © 2013 Olsen Solu/ons
- 43. Why Balsamiq Is Great n Super easy to learn and use n Widget library has most UI elements n Can annotate with s/cky notes n Can add click naviga/on between pages to illustrate a user story n Can export as PDF (so others don’t need to have Balsamiq), mul/ple pages in 1 PDF n Best $79 you’ll spend n hYp://www.balsamiq.com Copyright © 2013 Olsen Solu/ons
- 44. But wait, there’s more! What I didn’t have /me to cover n Understanding and priori/zing customer needs n Iden/fying your product value proposi/on n User tes/ng and design itera/on n Measuring user experience with analy/cs n See my other talks on all of the above hYp://slideshare.net/dan_o Copyright © 2013 Olsen Solu/ons
- 45. UX Army of One Cheat Sheet n Iden/fy & fill gaps in your Product A-‐Team n Be sketchy n Wireframe n Visual hierarchy n Gestalt principles n Flow n Mockups n Grid, Color PaleYe, Fonts Copyright © 2013 Olsen Solu/ons
- 46. http://olsensolutions.com { Questions? ] http://slideshare.net/dan_o @danolsen