Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
processes + patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl
processes + patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl design design
processes + patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl patterns design
design patterns + process patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl on codeïne
what if we could prove that <ul><li>a social network site requires remote evaluation </li></ul><ul><li>a card sort improve...
what if we could prove that <ul><li><design pattern> requires <process pattern> </li></ul><ul><li>a card sort improves bre...
what if we could prove that <ul><li><design pattern> requires <process pattern> </li></ul><ul><li><process pattern> improv...
what if we could prove that <ul><li><design pattern> requires <process pattern> </li></ul><ul><li><process pattern> improv...
what if we could combine <ul><li><design pattern> with <process pattern>  </li></ul><ul><li><process pattern> with <design...
what if we could combine <ul><li><design patterns>   + <process patterns>  </li></ul><ul><li>best practices on steroids! <...
<design pattern> <ul><li>is a general, repeatable solution to a commonly-occurring problem </li></ul><ul><li>is either pro...
<design pattern> examples <ul><li>Shopping cart (summary of items and prices, add, delete, details, checkout,  ) </li></ul...
<design pattern> collections <ul><li>a library of patterns </li></ul><ul><li>structured, layered and linked (a pattern lan...
<design pattern> collections
<design pattern> collections
<design pattern> collections
<design pattern> collections
<process pattern> <ul><li>describes sequences of general techniques, tasks, actions </li></ul><ul><li>works at the task, s...
<process pattern> examples <ul><li>team review task (announce review, distribute deliverable, review with team, publish re...
<proces pattern> collections <ul><li>a library of patterns </li></ul><ul><li>structured, layered and linked (a pattern lan...
IconProcess: UX Workflow “ The project team transforms the Vision or Business Concept for the application into concrete re...
IconProcess: Develop IA Purpose: - Organize the website's content and features into a logical structure of the whole websi...
<design patterns> + <process patterns> <ul><li>are different </li></ul><ul><li>yet similar </li></ul><ul><li>give a feel f...
the patterns are different <ul><li><design patterns> describe context of use  when is it good for the user (and the busine...
but the patterns are similar too <ul><li>both are driven by “forces” (&quot;users want...&quot; vs. &quot;the project requ...
patterns give a feel for the work <ul><li><design pattern> collections tell you how much you have to design from scratch a...
patterns give a feel for the work
patterns give a feel for the work
in the strategy layer you use <ul><li><design patterns> experience patterns, site type patterns </li></ul><ul><li><process...
in the scope layer you use <ul><li><design patterns> entire collections to see what's already there, main user concept, me...
in the structure layer you use <ul><li><design patterns> site type, main navigation, search, search results, index, sitema...
in the skeleton layer you use <ul><li><design patterns> layout, visual hierarchy, tone of voice, action buttons </li></ul>...
in the surface layer you use <ul><li><design patterns> mood, grid, layout, eye direction </li></ul><ul><li><process patter...
patterns give a feel for the work
the patterns can be linked <ul><li><design patterns> are used/generated when applying a <process pattern> Examples: review...
<process pattern> : review Create Deliver
<process pattern> : review Create Deliver Edit
<process pattern> : review Edit Review Deliver Create
<process pattern> : review Edit Deliver Review Prepare Review Technical Review Team Review Client Review Project Review pr...
<process pattern> : review Edit Review Deliver Create
<process pattern> : review Create Edit Project Approach Review Technical Approach Review Create Approach Review
<process pattern> : review Edit Review Deliver Create
<process pattern> : review Create Edit Project Evaluation Technical Evaluation Review Deliver
<process pattern> : review Edit Review Deliver Approach Evaluate
<process pattern> : review uses/generates <design patterns> Edit Review Deliver Approach Evaluate <design patterns>
<process pattern> : user research Set-up research Perform research Analyse results Determine goals Promote results <design...
the patterns are linked <ul><li><design patterns> are used/generated when applying a <process pattern> Examples: review pr...
welie.com + <proces patterns> (warning: vaporware!)
welie.com + <proces patterns>
welie.com + <proces patterns>
welie.com + <proces patterns> what how ( user research ,  card sort )
welie.com + <proces patterns> who ( user researcher ,  information architect )
the patterns are linked <ul><li><design patterns> are used/generated when applying a <process pattern> Examples: review pr...
<design patterns> + <process patterns> <ul><li>are different </li></ul><ul><li>yet similar </li></ul><ul><li>give a feel f...
what if we could <ul><li>browse <design pattern> collections and find <process patterns> associated with them </li></ul><u...
what if we gathered data on <ul><li>which <design patterns> work best for which site types </li></ul><ul><li>which <proces...
then we could <ul><li>apply that data when composing: - designs, - design processes - design teams for all types of sites ...
challenge <ul><li>“ in New York State, architects have developed a database on roof design and performance. The database t...
challenge <ul><li>“ How interesting it would be to go even deeper in the analysis: what were the organizational patterns a...
challenge <ul><li>“ in  Barcelona, Information Architects  have developed a database on  infospaces’   design patterns and...
challenge <ul><li>“ How interesting it would be to go even deeper in the analysis: what were the organizational patterns a...
challenge <ul><li>I challenge you to think about ways to combine <design patterns> + <process patterns> </li></ul>
design patterns + process patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl
Upcoming SlideShare
Loading in …5
×

Processes + Patterns

12,184 views

Published on

EuroIA presentation by Peter Boersma on "process patterns + design patterns"

Published in: Technology, Business

Processes + Patterns

  1. 1. processes + patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl
  2. 2. processes + patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl design design
  3. 3. processes + patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl patterns design
  4. 4. design patterns + process patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl on codeïne
  5. 5. what if we could prove that <ul><li>a social network site requires remote evaluation </li></ul><ul><li>a card sort improves breadcrumbs </li></ul><ul><li>an Agile team is bad for a marketing site </li></ul>
  6. 6. what if we could prove that <ul><li><design pattern> requires <process pattern> </li></ul><ul><li>a card sort improves breadcrumbs </li></ul><ul><li>an Agile team is bad for a marketing site </li></ul>
  7. 7. what if we could prove that <ul><li><design pattern> requires <process pattern> </li></ul><ul><li><process pattern> improves <design pattern> </li></ul><ul><li>an Agile team is bad for a marketing site </li></ul>
  8. 8. what if we could prove that <ul><li><design pattern> requires <process pattern> </li></ul><ul><li><process pattern> improves <design pattern> </li></ul><ul><li><process pattern> is bad for <design pattern> </li></ul>
  9. 9. what if we could combine <ul><li><design pattern> with <process pattern> </li></ul><ul><li><process pattern> with <design pattern> </li></ul>
  10. 10. what if we could combine <ul><li><design patterns> + <process patterns> </li></ul><ul><li>best practices on steroids! </li></ul>
  11. 11. <design pattern> <ul><li>is a general, repeatable solution to a commonly-occurring problem </li></ul><ul><li>is either proven effective or seen often enough to be considered worth following </li></ul><ul><li>is not a finished design that can be transformed directly into code </li></ul>
  12. 12. <design pattern> examples <ul><li>Shopping cart (summary of items and prices, add, delete, details, checkout, ) </li></ul><ul><li>Paging mechanism (number of results, number of pages, current page, current results, next, previous, first, and last page) </li></ul><ul><li>E-commerce site (product catalogue, search, user account, shopping cart, marketing, ordering process, product configurator, trust information) </li></ul>
  13. 13. <design pattern> collections <ul><li>a library of patterns </li></ul><ul><li>structured, layered and linked (a pattern language) </li></ul><ul><li>Examples </li></ul><ul><li>Martijn van Welie's Patterns in Interaction Design http://www.welie.com </li></ul><ul><li>Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns </li></ul><ul><li>Chris Messina’s screenshot collection at: http://www.flickr.com/photos/factoryjoe/ </li></ul><ul><li>The Design of Sites (ISBN-10 020172149X) http:// www.designofsites.com </li></ul>
  14. 14. <design pattern> collections
  15. 15. <design pattern> collections
  16. 16. <design pattern> collections
  17. 17. <design pattern> collections
  18. 18. <process pattern> <ul><li>describes sequences of general techniques, tasks, actions </li></ul><ul><li>works at the task, stage or phase level </li></ul><ul><li>consists of reusable building blocks </li></ul><ul><li>allows an organization to tailor a process </li></ul>
  19. 19. <process pattern> examples <ul><li>team review task (announce review, distribute deliverable, review with team, publish report, update & re-distribute deliverable) </li></ul><ul><li>usability evaluation stage (set goals, determine method, create prototype, create scenarios, recruit participants (optional), perform test, report findings) </li></ul><ul><li>inception phase (gather requirements, write business case, set scope, identify actors, asses risks, plan, estimate, adapt process) </li></ul>
  20. 20. <proces pattern> collections <ul><li>a library of patterns </li></ul><ul><li>structured, layered and linked (a pattern language) </li></ul><ul><li>Examples </li></ul><ul><li>IconProcess http://www.iconprocess.com </li></ul><ul><li>Rational Unified Process http://www-306.ibm.com/software/awdtools/rup/ </li></ul><ul><li>Process Patterns - Building Large-Scale Systems Using Object Technology ( ISBN-10: 0521645689) http:// www.ambysoft.com / books / processPatterns.html </li></ul>
  21. 21. IconProcess: UX Workflow “ The project team transforms the Vision or Business Concept for the application into concrete requirements, visual designs, and prototypes through roles, activities and artifacts defined in the IconProcess User Experience discipline. This discipline's participants analyze users' needs and then define a corresponding digital experience using a mix of technical and creative skills.”
  22. 22. IconProcess: Develop IA Purpose: - Organize the website's content and features into a logical structure of the whole website - Define page structures for individual pages or page types (i.e., templates) - Develop navigation mechanisms to facilitate users' access to information and functionality How to Staff: In early iterations, the Information Architect collaborates with the Content Manager to create the initial Site Map based on the Business Concept. As the team clarifies the requirements by working with stakeholders, the Information Architect and the Requirements Analyst work together or frequently review each other's work to refine the evolving Site Map and Wireframes as the Requirements Analyst refines the requirements. The Graphic Designer and User Interface Prototyper give the Information Architect valuable feedback on the Wireframes and interaction design while applying the visual design to the Wireframes and building the prototypes. The Information Architect uses that information to further improve the information architecture.
  23. 23. <design patterns> + <process patterns> <ul><li>are different </li></ul><ul><li>yet similar </li></ul><ul><li>give a feel for the work </li></ul><ul><li>can be linked </li></ul>
  24. 24. the patterns are different <ul><li><design patterns> describe context of use when is it good for the user (and the business owner) to apply this pattern? </li></ul><ul><li><process patterns> describe context of design when do what types of designers deliver what (to the business owner) and how? </li></ul>
  25. 25. but the patterns are similar too <ul><li>both are driven by “forces” (&quot;users want...&quot; vs. &quot;the project requires...&quot;) </li></ul><ul><li>both describe pre-conditions (&quot;the solution requires...&quot; vs. &quot;teams want...“) </li></ul><ul><li>both describe post-conditions (“this makes users feel…” vs. “this makes sure teams…”) </li></ul><ul><li>both refer to team skills (“an IA designs…” vs. “an IA designs…”) </li></ul>
  26. 26. patterns give a feel for the work <ul><li><design pattern> collections tell you how much you have to design from scratch and how much can be reused </li></ul><ul><li><process pattern> collections tell you what activities are necessary and who should perform them </li></ul>
  27. 27. patterns give a feel for the work
  28. 28. patterns give a feel for the work
  29. 29. in the strategy layer you use <ul><li><design patterns> experience patterns, site type patterns </li></ul><ul><li><process patterns> write business case, calculate ROI, design thinking patterns, perform user research </li></ul>
  30. 30. in the scope layer you use <ul><li><design patterns> entire collections to see what's already there, main user concept, mental model </li></ul><ul><li><process patterns> run scoping workshops, estimate, plan releases </li></ul>
  31. 31. in the structure layer you use <ul><li><design patterns> site type, main navigation, search, search results, index, sitemap, related content, local navigation, wizards </li></ul><ul><li><process patterns> perform requirements workshops, perform concept test, perform card sort, create content inventory, create controlled vocabulary, design reviews </li></ul>
  32. 32. in the skeleton layer you use <ul><li><design patterns> layout, visual hierarchy, tone of voice, action buttons </li></ul><ul><li><process patterns> apply eye tracking, perform usability test </li></ul>
  33. 33. in the surface layer you use <ul><li><design patterns> mood, grid, layout, eye direction </li></ul><ul><li><process patterns> user research, create moodboard, create mockup, create styleguide </li></ul>
  34. 34. patterns give a feel for the work
  35. 35. the patterns can be linked <ul><li><design patterns> are used/generated when applying a <process pattern> Examples: review process, user research </li></ul><ul><li><process patterns> are useful when applying a <design pattern> Example: breadcrumbs </li></ul>
  36. 36. <process pattern> : review Create Deliver
  37. 37. <process pattern> : review Create Deliver Edit
  38. 38. <process pattern> : review Edit Review Deliver Create
  39. 39. <process pattern> : review Edit Deliver Review Prepare Review Technical Review Team Review Client Review Project Review primary designer designer’s senior concept/lead designer primary team reviewers responsible for signoff
  40. 40. <process pattern> : review Edit Review Deliver Create
  41. 41. <process pattern> : review Create Edit Project Approach Review Technical Approach Review Create Approach Review
  42. 42. <process pattern> : review Edit Review Deliver Create
  43. 43. <process pattern> : review Create Edit Project Evaluation Technical Evaluation Review Deliver
  44. 44. <process pattern> : review Edit Review Deliver Approach Evaluate
  45. 45. <process pattern> : review uses/generates <design patterns> Edit Review Deliver Approach Evaluate <design patterns>
  46. 46. <process pattern> : user research Set-up research Perform research Analyse results Determine goals Promote results <design patterns>
  47. 47. the patterns are linked <ul><li><design patterns> are used/generated when applying a <process pattern> Examples: review process, user research </li></ul><ul><li><process patterns> are useful when applying a <design pattern> Example: breadcrumbs </li></ul>
  48. 48. welie.com + <proces patterns> (warning: vaporware!)
  49. 49. welie.com + <proces patterns>
  50. 50. welie.com + <proces patterns>
  51. 51. welie.com + <proces patterns> what how ( user research , card sort )
  52. 52. welie.com + <proces patterns> who ( user researcher , information architect )
  53. 53. the patterns are linked <ul><li><design patterns> are used/generated when applying a <process pattern> Examples: review process, user research </li></ul><ul><li><process patterns> are useful when applying a <design pattern> Example: breadcrumbs </li></ul>
  54. 54. <design patterns> + <process patterns> <ul><li>are different </li></ul><ul><li>yet similar </li></ul><ul><li>give a feel for the work </li></ul><ul><li>can be linked </li></ul>
  55. 55. what if we could <ul><li>browse <design pattern> collections and find <process patterns> associated with them </li></ul><ul><li>browse <process pattern> collections and find <design patterns> associated with them </li></ul><ul><li>browse pattern collections to get a feel for the work in each phase </li></ul>
  56. 56. what if we gathered data on <ul><li>which <design patterns> work best for which site types </li></ul><ul><li>which <process patterns> work best for which team compositions </li></ul><ul><li>which <design patterns> work best with which <process patterns> </li></ul><ul><li>which design & process pattern combinations create the best sites </li></ul>
  57. 57. then we could <ul><li>apply that data when composing: - designs, - design processes - design teams for all types of sites </li></ul><ul><li>explain to our clients: - why we design what we design - why we design how we design and have statistical proof </li></ul>
  58. 58. challenge <ul><li>“ in New York State, architects have developed a database on roof design and performance. The database tracks a growing number of the state's 10,000 buildings, recording variables of location, design conditions, specified components, testing results, and the history of problems and their solutions. By correlating design information with performance problems, the architects identify patterns of success and failure.” How Buildings Learn - What happens after they’re built (Steward Brand) </li></ul>
  59. 59. challenge <ul><li>“ How interesting it would be to go even deeper in the analysis: what were the organizational patterns associated with the roof successes and failures? Which arrangements can detect crucial errors and correct them, and which cannot? The answer to that question could affect all of architecture.” How Buildings Learn - What happens after they’re built (Steward Brand) </li></ul>
  60. 60. challenge <ul><li>“ in Barcelona, Information Architects have developed a database on infospaces’ design patterns and process patterns . The database tracks a growing number of Europe’s millions of infospaces , recording variables of location, design conditions, specified components, testing results, and the history of problems and their solutions. By correlating design information with performance problems, the Information Architects identify patterns of success and failure.” Adapted from: How Buildings Learn - What happens after they’re built (Steward Brand) </li></ul>
  61. 61. challenge <ul><li>“ How interesting it would be to go even deeper in the analysis: what were the organizational patterns associated with the infospaces’ successes and failures? Which arrangements can detect crucial errors and correct them, and which cannot? The answer to that question could affect all of Information Architecture .” Adapted from: How Buildings Learn - What happens after they’re built (Steward Brand) </li></ul>
  62. 62. challenge <ul><li>I challenge you to think about ways to combine <design patterns> + <process patterns> </li></ul>
  63. 63. design patterns + process patterns best practices on steroids EuroIA 2007, Barcelona Peter Boersma, Info.nl

×