Working with Developers
-
Upload
jack-moffett -
Category
Design
-
view
200 -
download
0
description
Transcript of Working with Developers
![Page 1: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/1.jpg)
Working with DevelopersFor Fun & ProfitJack Moffett | @jackmoffettSenior Interaction Designer, Inmediusdesignaday.tumblr.com
![Page 2: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/2.jpg)
Yeah, this happened.
![Page 3: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/3.jpg)
![Page 4: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/4.jpg)
“The way we work at Apple is that the complexity of these products really makes it critical to work collaboratively, with different areas of expertise. I think that’s one of the things about my job I enjoy the most. I work with silicon designers, electronic and mechanical engineers, and I think you would struggle to determine who does what when we get together. We’re located together, we share the same goal, have exactly the same preoccupation with making great products.”
Sir Jonathan Ive
![Page 5: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/5.jpg)
![Page 8: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/8.jpg)
by the power of grayskull by Speculum Mundi http://www.flickr.com/photos/speculummundi/4569110353/in/photostream/
![Page 9: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/9.jpg)
by the power of grayskull by Speculum Mundi http://www.flickr.com/photos/speculummundi/4569110353/in/photostream/
user study & requirements analysisinteraction & information designvisual design & graphics productionUI prototyping & implementationfunctional testingusability evaluationauthoring of user guides & training materials
![Page 10: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/10.jpg)
Tight Integration
the board is misleading by snickclunkhttp://www.flickr.com/photos/snickclunk/4119284398/in/photostream/
![Page 11: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/11.jpg)
Memory Lane by physiognomisthttp://www.flickr.com/photos/davidmican/315728765/
![Page 12: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/12.jpg)
it hasn’t always been that way
Memory Lane by physiognomisthttp://www.flickr.com/photos/davidmican/315728765/
![Page 13: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/13.jpg)
Fort Pitt Tunnel by ellenm1 http://www.flickr.com/photos/ellenm1/4320606426/
![Page 14: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/14.jpg)
Driving through the Squirrel Hill Tunnel by Jason Pratt http://www.flickr.com/photos/jasonpratt/912324482/
![Page 15: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/15.jpg)
Wrong Way by KungPaoCajunhttp://www.flickr.com/photos/begnaud/243996426/
![Page 16: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/16.jpg)
Pizza boxes by Marc Wathieu http://www.flickr.com/photos/marcwathieu/5395466993/
![Page 17: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/17.jpg)
Survey
![Page 18: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/18.jpg)
Survey IxDA.orgIxDA on LinkedInIxDA PittsburghAIGA Experience ListRoundroom Mailing ListDesignAdayTwitter (#ixda #iai)
![Page 19: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/19.jpg)
Survey ViewedRespondedCompleted
3089082
![Page 20: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/20.jpg)
Years of Experience
![Page 21: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/21.jpg)
Work Situation
Type of Work
Type of Company
Size of team
![Page 22: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/22.jpg)
![Page 23: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/23.jpg)
Skill Competency
![Page 24: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/24.jpg)
Participation
![Page 25: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/25.jpg)
Collaboration lifecycle
![Page 26: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/26.jpg)
Collaboration lifecycle
Requirements AnalysisDesignImplementationFunctional TestingUsability Testing
![Page 27: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/27.jpg)
Requirements
![Page 28: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/28.jpg)
Develop a shared understanding of the requirements
Pre-game huddle by -just-jen- http://www.flickr.com/photos/whetzel/55214389/
![Page 29: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/29.jpg)
Develop a shared understanding of the requirements
Pre-game huddle by -just-jen- http://www.flickr.com/photos/whetzel/55214389/
![Page 30: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/30.jpg)
“We need to connect this to this, using only those.”
Identify technical
challenges
![Page 31: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/31.jpg)
Identify technologies
The cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/
![Page 32: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/32.jpg)
Identify technologies
The cup that can only be half-full. by vrogy http://www.flickr.com/photos/vrogy/511644410/
![Page 33: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/33.jpg)
Estimate Time & Effort
By eflon http://www.flickr.com/photos/eflon/5079163335/
![Page 34: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/34.jpg)
Estimate Time & Effort
“Ideally, the developers and I are to work 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/
![Page 35: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/35.jpg)
Estimate Time & Effort
By eflon http://www.flickr.com/photos/eflon/5079163335/
![Page 36: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/36.jpg)
Estimate Time & Effort
By eflon http://www.flickr.com/photos/eflon/5079163335/
![Page 37: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/37.jpg)
Estimate Time & Effort
By eflon http://www.flickr.com/photos/eflon/5079163335/
![Page 38: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/38.jpg)
Estimate Time & Effort software bill of materials
By eflon http://www.flickr.com/photos/eflon/5079163335/
![Page 39: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/39.jpg)
Estimate Time & Effort
How can we best prioritize our work to support the
developers’ schedule?
By eflon http://www.flickr.com/photos/eflon/5079163335/
![Page 40: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/40.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Use their tools
![Page 41: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/41.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Issue Tracking
![Page 42: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/42.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Issue Tracking
![Page 43: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/43.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
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.
![Page 44: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/44.jpg)
![Page 45: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/45.jpg)
![Page 46: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/46.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Wiki
![Page 47: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/47.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Wiki Subscribe to see what the developers are thinking.
Document your own thinking so it is available to them.
![Page 48: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/48.jpg)
![Page 49: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/49.jpg)
Subscribe
![Page 50: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/50.jpg)
Design
![Page 51: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/51.jpg)
Design Documentation
One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
![Page 52: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/52.jpg)
Design Documentation
One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
![Page 53: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/53.jpg)
Design Documentation
One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
![Page 54: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/54.jpg)
Design Documentation
One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
![Page 55: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/55.jpg)
Design Documentation
One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
Design the documentationfor those that will wear it.
![Page 56: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/56.jpg)
![Page 57: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/57.jpg)
![Page 58: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/58.jpg)
Bill Scott
“The developers really appreciated it, because they could just look at it, and they didn’t have to wonder if the designer had forgotten something.”
![Page 59: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/59.jpg)
Documentation is part of the design process.
One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
![Page 60: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/60.jpg)
Documentation is part of the design process.
One size fits all…. By The Candid Streethttp://www.flickr.com/photos/haddadi/5971508861/
You learn a lot by describing your design.
![Page 61: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/61.jpg)
Implementation
building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/
![Page 62: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/62.jpg)
“I get most frustrated when, after providing a pixel-perfect mockup, I see the finished implementation during the testing phase, and it’s drastically different than what I spec’d (fonts, colors, sizes, spacing, alignment, positioning, etc).”
![Page 63: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/63.jpg)
![Page 64: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/64.jpg)
![Page 65: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/65.jpg)
![Page 66: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/66.jpg)
![Page 67: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/67.jpg)
Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancockhttp://www.flickr.com/photos/jdhancock/4393509633/
![Page 68: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/68.jpg)
Admiral Ackbar vs. Admiral Kirk (58/365) By JD Hancockhttp://www.flickr.com/photos/jdhancock/4393509633/
fight!
![Page 69: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/69.jpg)
“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.”
An Event Apart 2010: San Diego - Jared Spool By peterjhart http://www.flickr.com/photos/40054618@N03/5139909661/
Jared Spool
![Page 70: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/70.jpg)
Do Designers need to code?
![Page 71: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/71.jpg)
Will Learning to Code Make me a better
interaction designer?
![Page 72: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/72.jpg)
Perceived Drawbacks
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
![Page 73: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/73.jpg)
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 Interaction
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
![Page 74: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/74.jpg)
Tasked with coding instead of design
Limit Creativity due to knowledge of difficulty
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
![Page 75: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/75.jpg)
Tasked with coding instead of design
Limit Creativity due to knowledge of difficulty
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
![Page 76: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/76.jpg)
Tasked with coding instead of design
Limit Creativity due to knowledge of difficulty
Marginalize design skills to add coding skills
Tent By planetlight http://www.flickr.com/photos/planetlight/4767815082/in/photostream/
![Page 77: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/77.jpg)
Designer Soup
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 78: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/78.jpg)
Designer Soup
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
Interaction Design Skills
Visual Design Skills
Implementation Skills
Business Skills
![Page 79: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/79.jpg)
Designer Soup
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 80: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/80.jpg)
Designer Soup
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
TM
![Page 81: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/81.jpg)
Perceived Benefits
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 82: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/82.jpg)
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 83: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/83.jpg)
Calling BS on coders
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 84: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/84.jpg)
Calling BS on codersRespect & credibility
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 85: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/85.jpg)
Calling BS on codersRespect & credibilitySpeaking their language
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 86: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/86.jpg)
Calling BS on codersRespect & credibilitySpeaking their languageKnowledge of capabilities & difficulty
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 87: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/87.jpg)
Calling BS on codersRespect & credibilitySpeaking their languageKnowledge of capabilities & difficultyParticipation in evaluation & selection of technology
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 88: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/88.jpg)
Calling BS on codersRespect & credibilitySpeaking their languageKnowledge of capabilities & difficultyParticipation in evaluation & selection of technologyBetter able to create prototypes
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
![Page 89: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/89.jpg)
Calling BS on codersRespect & credibilitySpeaking their languageKnowledge of capabilities & difficultyParticipation in evaluation & selection of technologyBetter able to create prototypes
Mighty Elixir By Robert S. Donovan http://www.flickr.com/photos/booleansplit/2220774911/
Participation in implementation
![Page 90: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/90.jpg)
“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 peterjhart http://www.flickr.com/photos/40054618@N03/5139909661/
![Page 91: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/91.jpg)
“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 peterjhart http://www.flickr.com/photos/40054618@N03/5139909661/
![Page 92: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/92.jpg)
building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/
Participation in Implementation
![Page 93: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/93.jpg)
building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/
Participation in Implementation
Less documentation is required when you implement your own design.
![Page 94: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/94.jpg)
building blocks By ella novak http://www.flickr.com/photos/cookylida/3334177358/
Participation in Implementation
Less documentation is required when you implement your own design.
Get everything perfect the first time.
![Page 95: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/95.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Use their tools
![Page 96: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/96.jpg)
![Page 97: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/97.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Working in the Production Code
![Page 98: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/98.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Working in the Production Code
I don’t have to ask permission to make changes or ask someone else to make them for me.
![Page 99: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/99.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Working in the Production Code
I don’t have to ask permission to make changes or ask someone else to make them for me.
I know that the final product will be the one that I designed.
![Page 100: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/100.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Working in the Production Code
I don’t have to ask permission to make changes or ask someone 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.
![Page 101: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/101.jpg)
rainbow sprinkle donut By tommy.chhenghttp://www.flickr.com/photos/tommychheng/3226662528/
![Page 102: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/102.jpg)
rainbow sprinkle donut By tommy.chhenghttp://www.flickr.com/photos/tommychheng/3226662528/
With great power comes great responsibility.
![Page 103: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/103.jpg)
Version Control
![Page 104: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/104.jpg)
![Page 105: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/105.jpg)
![Page 106: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/106.jpg)
Functional TestingAbandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
![Page 107: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/107.jpg)
Designers make great testers
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
![Page 108: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/108.jpg)
Designers make great testers
Detail oriented
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
![Page 109: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/109.jpg)
Designers make great testers
Detail oriented
Use the system more like a user
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
![Page 110: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/110.jpg)
Designers make great testers
Detail oriented
Use the system more like a user
Know better than anyone how the thing is supposed to work
Abandoned buildings of Ichikawa junior/senior high school, Chiba Japan. By naosuke ii http://www.flickr.com/photos/ogwrnsk/5020082786/
![Page 111: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/111.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Use their tools
![Page 112: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/112.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Use their tools Participation is power.
![Page 113: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/113.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
Use their tools Participation is power.
Gives you the opportunity to record usability issues to be fixed prior to usability testing.
![Page 114: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/114.jpg)
A successful tool is one that was used to do something undreamed of by its author. by katerhahttp://www.flickr.com/photos/katerha/5746905652/
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.
![Page 115: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/115.jpg)
Usability Testing
![Page 116: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/116.jpg)
it works both ways
![Page 117: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/117.jpg)
it works both ways
Have developers participate in field trials.
![Page 118: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/118.jpg)
it works both ways
Have developers participate in field trials.
They will gain a better appreciation of the users’ concerns.
![Page 119: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/119.jpg)
it works both ways
Have developers participate in field trials.
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.
![Page 120: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/120.jpg)
Relationshipsv2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
![Page 121: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/121.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
DO Not
![Page 122: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/122.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
DO Not Critique engineering prototypes on aesthetics or interaction design.
![Page 123: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/123.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
DO Not Critique engineering prototypes on aesthetics or interaction design.
Force your process on the developers.
![Page 124: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/124.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
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.
![Page 125: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/125.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
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.
![Page 126: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/126.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
Yes Please
![Page 127: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/127.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
Yes Please Position your involvement as something that makes your developers’ job easier.
![Page 128: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/128.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
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.
![Page 129: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/129.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
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.
![Page 130: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/130.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
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.
![Page 131: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/131.jpg)
v2.19: March 19th (Pirate Socks) by Phoney Nicklehttp://www.flickr.com/photos/mslivenletlive/427537759/
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.”
![Page 132: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/132.jpg)
Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
![Page 133: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/133.jpg)
Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
Conclusion
![Page 134: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/134.jpg)
Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
Tight Dev Team Integration
![Page 135: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/135.jpg)
Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
Tight Dev Team Integration Participate in the entire
development process
![Page 136: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/136.jpg)
Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
Tight Dev Team Integration Participate in the entire
development process
Tailor documentation to be developer-friendly
![Page 137: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/137.jpg)
Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
Tight Dev Team Integration Participate in the entire
development process
Tailor documentation to be developer-friendly
Use the developers’ tools
![Page 138: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/138.jpg)
Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
Tight Dev Team Integration Participate in the entire
development process
Tailor documentation to be developer-friendly
Use the developers’ tools
Learn implementation skills
![Page 139: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/139.jpg)
Four Storms And A Twister by JD Hancockhttp://www.flickr.com/photos/jdhancock/3842546304/
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 social
![Page 140: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/140.jpg)
for success
jump for joy by Tinou Bao http://www.flickr.com/photos/tinou/506361030/
![Page 141: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/141.jpg)
Questions?Jack Moffett | @jackmoffettSenior Interaction Designer, [email protected]
![Page 142: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/142.jpg)
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
![Page 143: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/143.jpg)
CreditsTypefaces: Blanch, by Atipus
Myriad Pro, by Adobe
Survey visualizations created with Parallel Sets by Robert Kosara.
![Page 144: Working with Developers](https://reader037.fdocuments.us/reader037/viewer/2022103110/54b73e504a795966598b46e2/html5/thumbnails/144.jpg)
Thank youJack Moffett | @jackmoffettSenior Interaction Designer, [email protected]