• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
193
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

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. WorkingwithDevelopersFor Fun & ProfitJack Moffett | @jackmoffettSenior Interaction Designer, Inmediusdesignaday.tumblr.com
  • 2. Yeah, this happened.
  • 3. “The way we work at Apple isthat the complexity of theseproducts really makes it criticalto work collaboratively, withdifferent areas of expertise. Ithink that’s one of the thingsabout my job I enjoy the most. Iwork with silicon designers,electronic and mechanicalengineers, and I think you wouldstruggle to determine who doeswhat when we get together.We’re located together, we sharethe same goal, have exactly thesame preoccupation withmaking great products.”Sir Jonathan Ive
  • 4. We’re hiring!www.inmedius.com
  • 5. www.inmedius.com
  • 6. by the power of grayskull by Speculum Mundihttp://www.flickr.com/photos/speculummundi/4569110353/in/photostream/
  • 7. user study & requirements analysisinteraction & information designvisual design & graphics productionUI prototyping & implementationfunctional testingusability evaluationauthoring of user guides & training materials by the power of grayskull by Speculum Mundi http://www.flickr.com/photos/speculummundi/4569110353/in/photostream/
  • 8. Tight Integration the board is misleading by snickclunk http://www.flickr.com/photos/snickclunk/4119284398/in/photostream/
  • 9. Memory Lane by physiognomisthttp://www.flickr.com/photos/davidmican/315728765/
  • 10. Memory Lane by physiognomisthttp://www.flickr.com/photos/davidmican/315728765/ it hasn’t always been that way
  • 11. Fort Pitt Tunnel by ellenm1http://www.flickr.com/photos/ellenm1/4320606426/
  • 12. Driving through the Squirrel Hill Tunnel by Jason Pratthttp://www.flickr.com/photos/jasonpratt/912324482/
  • 13. Wrong Way by KungPaoCajunhttp://www.flickr.com/photos/begnaud/243996426/
  • 14. Pizza boxes by Marc Wathieuhttp://www.flickr.com/photos/marcwathieu/5395466993/
  • 15. Survey
  • 16. Survey IxDA.org IxDA on LinkedIn IxDA Pittsburgh AIGA Experience List Roundroom Mailing List DesignAday Twitter (#ixda #iai)
  • 17. Survey Viewed 308 Responded 90 Completed 82
  • 18. Years ofExperience
  • 19. Work SituationType of Company Type of Work Size of team
  • 20. SkillCompetency
  • 21. Participation
  • 22. Collaborationlifecycle
  • 23. Collaboration Requirements Analysis Designlifecycle Implementation Functional Testing Usability Testing
  • 24. Requirements
  • 25. Develop a shared understanding of the requirementsPre-game huddle by -just-jen- http://www.flickr.com/photos/whetzel/55214389/
  • 26. Develop a shared understanding of the requirementsPre-game huddle by -just-jen- http://www.flickr.com/photos/whetzel/55214389/
  • 27. Identify technicalchallenges“We need to connect this to this, using only those.”
  • 28. Identify technologiesThe cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/
  • 29. Identify technologiesThe cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/
  • 30. Estimate Time & EffortBy eflon http://www.flickr.com/photos/eflon/5079163335/
  • 31. Estimate Time “Ideally, the developers and I are to work & Effort closely together during the design phase... but it typically works out that they gloss over the document or attend a few meetings and get a basic understanding of what we are planning on doing, but never pay attention to the full details. Then they tend to come to me with questions or ‘are you crazy? I can’t do that!’ when it’s time for them to put together a timeline for their development assessment. After a few times of close calls, they are beginning to pay more attention to the pencil sketches and overall workflows we put together for them.”By eflon http://www.flickr.com/photos/eflon/5079163335/
  • 32. Estimate Time & EffortBy eflon http://www.flickr.com/photos/eflon/5079163335/
  • 33. Estimate Time & EffortBy eflon http://www.flickr.com/photos/eflon/5079163335/
  • 34. Estimate Time & EffortBy eflon http://www.flickr.com/photos/eflon/5079163335/
  • 35. Estimate Time & Effort software bill of materialsBy eflon http://www.flickr.com/photos/eflon/5079163335/
  • 36. Estimate Time & Effort How can we best prioritize our work to support the developers’ schedule?By eflon http://www.flickr.com/photos/eflon/5079163335/
  • 37. Use their tools A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 38. Issue Tracking A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 39. Issue Tracking A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 40. Issue Tracking Create items for each of your design tasks. Developers can subscribe to the ones that relate to their own tasks. Your estimates can be calculated in the chartboard, or not. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 41. Wiki A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 42. Wiki Subscribe to see what the developers are thinking. Document your own thinking so it is available to them. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 43. Subscribe
  • 44. Design
  • 45. Design DocumentationOne size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
  • 46. Design DocumentationOne size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
  • 47. Design DocumentationOne size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
  • 48. Design DocumentationOne size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
  • 49. Design Documentation Design the documentation for those that will wear it.One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
  • 50. “The developers really appreciated it, because theycould just look at it, and they didn’t have to wonderif the designer had forgotten something.” Bill Scott
  • 51. Documentation is part of the design process.One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
  • 52. Documentation is part of the design process. You learn a lot by describing your design.One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
  • 53. building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/ Implementation
  • 54. “I get most frustrated when, after providing apixel-perfect mockup, I see the finishedimplementation during the testing phase, and it’sdrastically different than what I spec’d (fonts,colors, sizes, spacing, alignment, positioning, etc).”
  • 55. Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancockhttp://www.flickr.com/photos/jdhancock/4393509633/
  • 56. Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancockhttp://www.flickr.com/photos/jdhancock/4393509633/ fight!
  • 57. “If you’re in a room filled with designers, bring up the topic of whether it’s valuable for a designer to also code. Immediately, the room will divide faster than Moses split the Red Sea. One side will tell you coding is an essential skill, while the other will vehemently argue how it dilutes the designer’s value.” Jared SpoolAn Event Apart 2010: San Diego - Jared Spool By peterjharthttp://www.flickr.com/photos/40054618@N03/5139909661/
  • 58. Do Designersneed to code?
  • 59. Will Learning to Code Make me a betterinteraction designer?
  • 60. Perceived DrawbacksTent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
  • 61. Tasked with coding instead of design “I found that when I tried to be both a designer and engineer/coder, I ended up doing a lot more engineering and a lot less design than I wanted to do. I think part of the problem is that engineering skills are, in the end, valued more than design skills.” Jennifer Tidwell, author of Designing Interfaces: Patterns for Effective InteractionTent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
  • 62. Tasked with coding instead of design Limit Creativity due to knowledge of difficultyTent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
  • 63. Tasked with coding instead of design Limit Creativity due to knowledge of difficultyTent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
  • 64. Tasked with coding instead of design Limit Creativity due to knowledge of difficulty Marginalize design skills to add coding skillsTent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
  • 65. Designer SoupMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 66. Designer Interaction Design Skills Soup Visual Design Skills Implementation Skills Business SkillsMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 67. Designer SoupMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 68. Designer T Soup MMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 69. Perceived BenefitsMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 70. Mighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 71. Calling BS on codersMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 72. Calling BS on coders Respect & credibilityMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 73. Calling BS on coders Respect & credibility Speaking their languageMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 74. Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & difficultyMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 75. Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & difficulty Participation in evaluation & selection of technologyMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 76. Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & difficulty Participation in evaluation & selection of technology Better able to create prototypesMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 77. Calling BS on coders Respect & credibility Speaking their language Knowledge of capabilities & difficulty Participation in evaluation & selection of technology Better able to create prototypes Participation in implementationMighty Elixir By Robert S. Donovanhttp://www.flickr.com/photos/booleansplit/2220774911/
  • 78. “Coding and designing are collections of skills. What we’ve learned is teams with a better distribution of skills, not segmented by roles, produce better results.”An Event Apart 2010: San Diego - Jared Spool By peterjharthttp://www.flickr.com/photos/40054618@N03/5139909661/
  • 79. “Coding and designing are collections of skills. What we’ve learned is teams with a better distribution of skills, not segmented by roles, produce better results.”An Event Apart 2010: San Diego - Jared Spool By peterjharthttp://www.flickr.com/photos/40054618@N03/5139909661/
  • 80. Participation inbuilding blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/ Implementation
  • 81. Participation inbuilding blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/ Implementation Less documentation is required when you implement your own design.
  • 82. Participation inbuilding blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/ Implementation Less documentation is required when you implement your own design. Get everything perfect the first time.
  • 83. Use their tools A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 84. Working in theProduction Code A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 85. Working in the I don’t have to ask permission to make changes or ask someoneProduction Code else to make them for me. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 86. Working in the I don’t have to ask permission to make changes or ask someoneProduction Code else to make them for me. I know that the final product will be the one that I designed. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 87. Working in the I don’t have to ask permission to make changes or ask someoneProduction Code else to make them for me. I know that the final product will be the one that I designed. With great power comes great responsibility. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 88. rainbow sprinkle donut By tommy.chhenghttp://www.flickr.com/photos/tommychheng/3226662528/
  • 89. With great power comes great responsibility.rainbow sprinkle donut By tommy.chhenghttp://www.flickr.com/photos/tommychheng/3226662528/
  • 90. VersionControl
  • 91. Functional TestingAbandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke iihttp://www.flickr.com/photos/ogwrnsk/5020082786/
  • 92. Designers make great testersAbandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke iihttp://www.flickr.com/photos/ogwrnsk/5020082786/
  • 93. Designers make Detail oriented great testersAbandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke iihttp://www.flickr.com/photos/ogwrnsk/5020082786/
  • 94. Designers make Detail oriented great testers Use the system more like a userAbandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke iihttp://www.flickr.com/photos/ogwrnsk/5020082786/
  • 95. Designers make Detail oriented great testers Use the system more like a user Know better than anyone how the thing is supposed to workAbandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke iihttp://www.flickr.com/photos/ogwrnsk/5020082786/
  • 96. Use their tools A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 97. Use their tools Participation is power. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 98. Use their tools Participation is power. Gives you the opportunity to record usability issues to be fixed prior to usability testing. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 99. Use their tools Participation is power. Gives you the opportunity to record usability issues to be fixed prior to usability testing. Don’t abuse it—follow the rules. A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/
  • 100. Usability Testing
  • 101. it works both ways
  • 102. it works both Have developers participate in field trials. ways
  • 103. it works both Have developers participate in field trials. ways They will gain a better appreciation of the users’ concerns.
  • 104. it works both Have developers participate in field trials. ways They will gain a better appreciation of the users’ concerns. Other developers will listen when one of their own is as adamant about usability concerns as you are.
  • 105. Relationshipsv2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 106. DO Notv2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 107. DO Not Critique engineering prototypes on aesthetics or interaction design.v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 108. DO Not Critique engineering prototypes on aesthetics or interaction design. Force your process on the developers.v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 109. DO Not Critique engineering prototypes on aesthetics or interaction design. Force your process on the developers. Expect developers to make changes at the last minute because you haven’t been involved until the end.v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 110. DO Not Critique engineering prototypes on aesthetics or interaction design. Force your process on the developers. Expect developers to make changes at the last minute because you haven’t been involved until the end. Expect developers to have the same visual sensibilities you have.v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 111. Yes Pleasev2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 112. Yes Please Position your involvement as something that makes your developers’ job easier.v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 113. Yes Please Position your involvement as something that makes your developers’ job easier. Be inclusive. It’s not our responsibility to make decisions so much as to offer options.v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 114. Yes Please Position your involvement as something that makes your developers’ job easier. Be inclusive. It’s not our responsibility to make decisions so much as to offer options. Find opportunities to educate.v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 115. Yes Please Position your involvement as something that makes your developers’ job easier. Be inclusive. It’s not our responsibility to make decisions so much as to offer options. Find opportunities to educate. Dare to compromise.v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 116. Yes Please Position your involvement as something that makes your developers’ job easier. Be inclusive. It’s not our responsibility to make decisions so much as to offer options. Find opportunities to educate. Dare to compromise. Be social - Jenna Bilotta says, “Drink a beer with your engineer.”v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
  • 117. Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
  • 118. Four Storms And A Twister by JD Hancock Conclusionhttp://www.flickr.com/photos/jdhancock/3842546304/
  • 119. Tight Dev Team IntegrationFour Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
  • 120. Tight Dev Team Integration Participate in the entire development processFour Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
  • 121. Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendlyFour Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
  • 122. Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendly Use the developers’ toolsFour Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
  • 123. Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendly Use the developers’ tools Learn implementation skillsFour Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
  • 124. Tight Dev Team Integration Participate in the entire development process Tailor documentation to be developer-friendly Use the developers’ tools Learn implementation skills Be respectful / Be socialFour Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
  • 125. for success jump for joy by Tinou Bao http://www.flickr.com/photos/tinou/506361030/
  • 126. Questions?Jack Moffett | @jackmoffettSenior Interaction Designer, Inmediusjmoffett@inmedius.comdesignaday.tumblr.com
  • 127. Suggested Reading• How designers and engineers can play nice (and still run with scissors) by Jenna Bilotta• Concept to Code - Code Literacy in UX by Ryan Betts• Owen Otto’s response to “How do UI designers work with engineers to ensure their vision is achieved?” on Quora• 3 Reasons Why Learning To Code Makes You A Better Designer by Jared Spool
  • 128. CreditsTypefaces: Blanch, by Atipus Myriad Pro, by AdobeSurvey visualizations created withParallel Sets by Robert Kosara.
  • 129. Thank youJack Moffett | @jackmoffettSenior Interaction Designer, Inmediusjmoffett@inmedius.comdesignaday.tumblr.com