Memi Beltrame

 Made by Many
On Collaborative Design
           phpday, may 15th 2009
                  Verona




 Memi B...
Who I am: Memi Beltrame

 • Developping websites since 1997
 • Using php since 2000
 • 2003-2007 Study of cinematography
 ...
Why am I here?



    To raise awareness and to show the
     dynamics of collaborative design




          Memi Beltrame...
Argh! Design! Go away, I am a Developer!




     Design is not only pushing pixels
    Designing means arranging stuff:
 ...
Collaborative Design takes place
  whenever an artefact is planned
and/or implemented by two or more
           participan...
Typical Collaborative Design Areas
               Architecture
                Software
                 Movies!



    Me...
The Internet is (probably) the
 biggest single instance of
    Collaborative Design




  Memi Beltrame: Made by Many – On...
Collaborative Design is a reality.

  It is the inevitable process that
emerges when you build something
              as ...
Unlike UCD or TDD it is nothing you
     choose, it just happens,
          nolens volens.


UCD: User centered design
TDD...
It just happens, ok.

         Understand it.
          Control it.
          Embrace it.



Memi Beltrame: Made by Many –...
Even the simplest
Customer < > Contractor Relationship
   involves Collaborative Design




     Memi Beltrame: Made by Ma...
It involves is a network of participants




       Memi Beltrame: Made by Many – On Collaborative Design
       6th phpDa...
The goal is a common product
  with a high overall utility




   Memi Beltrame: Made by Many – On Collaborative Design
  ...
Every participant can propose
 solutions for design issues




   Memi Beltrame: Made by Many – On Collaborative Design
  ...
In theory a Design should move
  towards an optimum of utility
Utility




                                        Time


...
In theory. Not in reality.

Utility




                                        Time




          Memi Beltrame: Made by ...
Why does collaboration
not automatically mean
     improvement?


  Memi Beltrame: Made by Many – On Collaborative Design
...
Participants are inter-dependent.




     Memi Beltrame: Made by Many – On Collaborative Design
     6th phpDay – May 15t...
Participants are inter-dependent.
    Inter-dependency means
       „I need something“



     Memi Beltrame: Made by Many...
Every participant has a self-interest
                                            Customer:
                              ...
Fulfilling self-interest means
Reaching a local optimum of utility




      Memi Beltrame: Made by Many – On Collaborative...
Are participants willing to
compromise their self interest for
 the sake of a global optimum?




     Memi Beltrame: Made...
A   B      C       D           global Utility

    Memi Beltrame: Made by Many – On Collaborative Design
    6th phpDay – ...
A   B      C       D           global Utility

    Memi Beltrame: Made by Many – On Collaborative Design
    6th phpDay – ...
The system can become very complex
php-Developer           Grafics         Webserver admin
                               ...
It's hard to keep track of the
interactions and design decisions
                        Grafics         Webserver admin
 ...
Subsytems can emerge
                        Grafics         Webserver admin
                                             ...
Subsytems also have a local
optimum utility plus they are loyal!
                        Grafics         Webserver admin
 ...
Every new participant brings a shift
in the oveall utility.




       Memi Beltrame: Made by Many – On Collaborative Desi...
Every old participant must be aware
of this and accept it. Otherwise the
team is possibly ripped apart.




       Memi Be...
Successful Collaborative Design is
 based on the commitment of each
participants to achieve an optimum
          of overal...
How is that achieved?




Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - I...
● Raising awareness
● Remove barriers between you and the

  customer to form a team
● High iteration in the workflow

● El...
An example of interdisciplinary patterns:

      The Undo Dilemma



        Memi Beltrame: Made by Many – On Collaborativ...
A list of users to be administered

                              Edit Delete
                              Edit Delete


...
The Undo dilemma

                          Edit Delete
                          Edit Delete


Memi Beltrame: Made by Man...
What happens if you hit Delete?




   Memi Beltrame: Made by Many – On Collaborative Design
   6th phpDay – May 15th/16th...
What happens if you hit Delete?
Usually: a pop up!




   Memi Beltrame: Made by Many – On Collaborative Design
   6th php...
Pop ups are Bad!
Avoid them!




     Memi Beltrame: Made by Many – On Collaborative Design
     6th phpDay – May 15th/16t...
Use Undo!



Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy
Because:
UNDO
• is the rescuer of users in distress.
• encourages exploration.
• eliminates sensless confirmation-dialogs

...
Pop Ups are easy to implement,
                Undo is not.

It requires a well planned process




   Memi Beltrame: Made...
Frontend and backend people must
decide on a pattern of implementation.

This is a collaborative design decision.




    ...
Possible patterns of implementation of
         undo in the database:

           1) Through a Flag
      2) Through a his...
Implementation of Undo

 1) Through a FLAG
TABLE users                                   VIEW view_users
-----------------...
Implementations of undo

 2) Through a history table
TABLE users                     TABLE users_history
-----------------...
Implementations of undo

 2) Through a history table
    Pros
    • Allows endless undo
    • Works as a history
    • Is ...
Thank you!
Slides: http://slides.liip.ch



 Memi Beltrame: Made by Many – On Collaborative Design
 6th phpDay – May 15th/...
Upcoming SlideShare
Loading in …5
×

Made by Many: On Collaborative Design

3,142 views
3,046 views

Published on

This presentation covers an introduction to the principles of Collaborative Design. It was presented at the phpDay2009 in Verona, the focus therefore is web-development. The ideas presented though apply to any area of work where artefacts are created in teams.

The original abstract:
Any application contains many different elements of design, from application architecture to the display on the screen. Whenever an application is planned and/or implemented by a team Collaborative Design is inevitably an integral part of the process. This session explores the dynamics of Collaborative Design and the risks and chances it poses.

Published in: Design
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,142
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
25
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Made by Many: On Collaborative Design

  1. 1. Memi Beltrame Made by Many On Collaborative Design phpday, may 15th 2009 Verona Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  2. 2. Who I am: Memi Beltrame • Developping websites since 1997 • Using php since 2000 • 2003-2007 Study of cinematography • 2007 to present: specialising in frontend and interaction design • Since 2008 for Liip Agile Web Development • Movie enthusiast • 1st feature film in preparation... some day... Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  3. 3. Why am I here? To raise awareness and to show the dynamics of collaborative design Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  4. 4. Argh! Design! Go away, I am a Developer! Design is not only pushing pixels Designing means arranging stuff: Pixels, Databases, Code, Processes Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  5. 5. Collaborative Design takes place whenever an artefact is planned and/or implemented by two or more participants. Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  6. 6. Typical Collaborative Design Areas Architecture Software Movies! Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  7. 7. The Internet is (probably) the biggest single instance of Collaborative Design Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  8. 8. Collaborative Design is a reality. It is the inevitable process that emerges when you build something as a team. Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  9. 9. Unlike UCD or TDD it is nothing you choose, it just happens, nolens volens. UCD: User centered design TDD: Test driven development Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  10. 10. It just happens, ok. Understand it. Control it. Embrace it. Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  11. 11. Even the simplest Customer < > Contractor Relationship involves Collaborative Design Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  12. 12. It involves is a network of participants Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  13. 13. The goal is a common product with a high overall utility Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  14. 14. Every participant can propose solutions for design issues Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  15. 15. In theory a Design should move towards an optimum of utility Utility Time Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  16. 16. In theory. Not in reality. Utility Time Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  17. 17. Why does collaboration not automatically mean improvement? Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  18. 18. Participants are inter-dependent. Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  19. 19. Participants are inter-dependent. Inter-dependency means „I need something“ Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  20. 20. Every participant has a self-interest Customer: Affordable yet magic Developer: solid, stable and performing Designer: beautiful and usable Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  21. 21. Fulfilling self-interest means Reaching a local optimum of utility Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  22. 22. Are participants willing to compromise their self interest for the sake of a global optimum? Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  23. 23. A B C D global Utility Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  24. 24. A B C D global Utility Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  25. 25. The system can become very complex php-Developer Grafics Webserver admin Management Proxy guy Usability guy Mobile Services admin DB Specialist DB Admin Project Lead Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  26. 26. It's hard to keep track of the interactions and design decisions Grafics Webserver admin Management php-Developer Proxy guy Usability guy Mobile Services admin DB Specialist DB Admin Project Lead Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  27. 27. Subsytems can emerge Grafics Webserver admin Management php-Developer Proxy guy Usability guy Mobile Services admin DB Specialist DB Admin Project Lead Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  28. 28. Subsytems also have a local optimum utility plus they are loyal! Grafics Webserver admin Management php-Developer Proxy guy Usability guy Mobile Services admin DB Specialist DB Admin Project Lead Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  29. 29. Every new participant brings a shift in the oveall utility. Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  30. 30. Every old participant must be aware of this and accept it. Otherwise the team is possibly ripped apart. Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  31. 31. Successful Collaborative Design is based on the commitment of each participants to achieve an optimum of overall utility. Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  32. 32. How is that achieved? Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  33. 33. ● Raising awareness ● Remove barriers between you and the customer to form a team ● High iteration in the workflow ● Elaboration of interdisciplinary patterns ● Talk, talk, talk, talk! Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  34. 34. An example of interdisciplinary patterns: The Undo Dilemma Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  35. 35. A list of users to be administered Edit Delete Edit Delete Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  36. 36. The Undo dilemma Edit Delete Edit Delete Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  37. 37. What happens if you hit Delete? Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  38. 38. What happens if you hit Delete? Usually: a pop up! Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  39. 39. Pop ups are Bad! Avoid them! Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  40. 40. Use Undo! Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  41. 41. Because: UNDO • is the rescuer of users in distress. • encourages exploration. • eliminates sensless confirmation-dialogs ! Don‘t ask, do and UNDO ! Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  42. 42. Pop Ups are easy to implement, Undo is not. It requires a well planned process Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  43. 43. Frontend and backend people must decide on a pattern of implementation. This is a collaborative design decision. Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  44. 44. Possible patterns of implementation of undo in the database: 1) Through a Flag 2) Through a history table Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  45. 45. Implementation of Undo 1) Through a FLAG TABLE users VIEW view_users ------------------------------------- ------------------------ | ID | name | surname | is_deleted | | ID | name | surname | ------------------------------------- ------------------------ | 1 | Pio | Polli | 0 | | 1 | Pio | Polli | ------------------------------------- ------------------------ | 2 | Enzo | Enzi | 1 | | 3 | Toni | Marroni | ------------------------------------- ------------------------ | 3 | Toni | Marroni | 0 | ------------------------------------- SELECT * From `users` WHERE is_deleted = 0 • simple • Ideal to undo deletions • Downside: data may be materialized twice Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  46. 46. Implementations of undo 2) Through a history table TABLE users TABLE users_history ------------------------ ---------------------------------- | ID | name | surname | | ID | ID_users | name | surname | ------------------------ ---------------------------------- | 1 | Pio | Polli | | 1 | 1 | Pio | Polli | ------------------------ ---------------------------------- | 2 | Enio | Enzi | | 2 | 2 | Enzo | Enzi | ------------------------ ---------------------------------- | 3 | Toni | Marroni | | 3 | 3 | Toni | Marroni | ------------------------ ---------------------------------- | 4 | 2 | Enio | Enzi | ---------------------------------- Table users: every change is Table users_history: every change an UPDATE also executes an INSERT Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  47. 47. Implementations of undo 2) Through a history table Pros • Allows endless undo • Works as a history • Is not limited to a single data entry • allows „edit in place“ on a high level Cons • Needs a more complex system • Executes more SQL queries and creates more traffic and data Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy
  48. 48. Thank you! Slides: http://slides.liip.ch Memi Beltrame: Made by Many – On Collaborative Design 6th phpDay – May 15th/16th 2009 Verona - Italy

×