Designer vs Developer - A Battle Royal v1.0
•
3 likes•1,491 views
SharePoint Fest Chicago 2013 - Can designers and developers work together to create a frictionless solution? Often times barriers exist between designers and developers. Let's look at what UX really is, not hearsay and learn some interesting ways devs can help. And bring peace to this historical battle field, by showing the two factions can work together amicably when supported by a well-defined process. Content covered will center around web, desktop, mobile, and yes a little bit of SharePoint. Discussion topics will include a brief history of user experience (UX) design, a "concept to deliverable" process involving designers and developers, and finally a short demo highlighting covered concepts.
Designer vs Developer - A Battle Royal v1.0
- 2. DESIGNER DEVELOPER Bryan “Rock Star” Gulley @uxjester Interaction Design UI Development Information Architecture SharePoint UI Sleuth Nicole “Nicky” Maynard @punkynixter User Research Information Architecture Interactive Design Visual Design
- 5. “Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs
- 7. Started when humans made tools to make tasks easier After WWII ·Engineers research, lessons learned ·Human Factors & Ergonomics Society Paul Fitts ·Improved cockpits ·Fitts’s law still used today
- 8. Dieter Rams · Braun industrial designer · “Less, but better” Walt Disney · First immersive experience by UCD · “Imagineers” first UX team?
- 11. us·er noun A person who uses or operates something, esp. a computer or other machine. Synonyms Consumer, customer, employee, client, patient Antonyms Stakeholder, steering committee member, designer, developer Defined by Google.
- 12. What is UX a person's perceptions and responses that result from the use or anticipated use of a product, system or service ISO1924
- 13. Includes The Users’ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use
- 14. Influential Factors System User Context of Use What Who Why When Where
- 15. Everything That Affects A User’s Interaction
- 16. Meet the users’ needs & reach business goals Solve business problems! Improve communication! Drive adoption & productivity! Ensure profitability! Enjoyable to use!
- 17. Meet the users’ needs & reach business goals Make people happy by creating great experiences
- 18. User Experience Drives Behavior & Action How a user feels about a system Impacting time, cost, profit and satisfaction Impacting time, cost, profit and satisfaction Affects their behavior & choices How a user feels about a system Negative ImpactUndesired BehaviorBad Experience
- 19. User Experience Drives Behavior & Action How a user feels about a system Impacting time, cost, profit and satisfaction Impacting time, cost, profit and satisfaction Affects their behavior & choices How a user feels about a system Positive ImpactDesired BehaviorGood Experience
- 23. A Developer’s Approach to UX 23 ! White boarding ! Wireframing ! Prototyping ! Implementation
- 24. White Boarding 24 ! Think “Sketch” ! Information Architecture ! User Centered Design
- 25. Wireframes & Prototypes 25 ! Think “Skeleton” ! Sketch to Screen ! Annotated User Interface ! Shareable ! Testable
- 26. 26 DEMO
- 27. Disclaimer 27 ! Previous 4 slides are an example of how not to conduct development tasks with users ! More on that later
- 28. Implementation 28 ! Skeleton to SharePoint ! Putting it all together ! Migrating the “design” with Design Manager ! We are not limited to the Design Manager ! Use of SharePoint Designer Strongly Discouraged
- 29. 29 DEMO
- 30. Tips, Tricks & Tools ! Tips ! Don’t use SharePoint Designer for master pages, page layouts, HTML, CSS, JS, etc. ! Use tools that work well in your workflow ! Tricks ! Network Drives ! Build reusable frameworks, libraries, plug-ins, “Starter” assets ! Utilize proven work by others ! Tools ! Raw HTML, CSS, and JavaScript ! Libraries like Twitter Bootstrap, YUI, jKit, Wirefy ! Sublime Text, Notepad ++, Coda, Plain Ol’ NotePad ! Axure, OmniGraffle, Fireworks, etc.
- 33. How we work together · Communication - keep everyone involved in the whole process · Check your ego at the door · Set expectations and boundaries, build trust · Know each other’s lingo · Understand each other’s process, job and value · Be excited to teach one another – not chastise for gaps in knowledge · Devs aren’t machines, they have feelings too · Designers aren’t machines, great work takes time
- 34. Key Take Aways · NNg’s Intranet Design Annuals · UX is valuable investment · $10 change in UX phase, $100 in Design, $1,000 in Development · UX bridges the gap between business and IT by being the spokesperson for the user · Design and Development are equally important · Keep communication open throughout the entire process · Learn each others’ job, limitations, lingo · Collaboration is more important than your ego, you are working toward he same goal
- 35. 35 Robert Toro Portals & Collaboration Practice Director robert.toro@slalom.com 630.309.4042 Nicole Maynard UX Designer nicolem@slalom.com 630.251.8821 Bryan Gulley UI Developer bryang@slalom.com 773.359.3384 SLALOM CONTACTS
- 36. © 2013 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the current view of Slalom, LLC. as of the date of this presentation. SLALOM MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.