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.
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.
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.
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.
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.
Typical Collaborative Design Areas
Architecture
Software
Movies!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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.
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.
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.
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.
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.
It involves is a network of participants
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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.
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.
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.
In theory. Not in reality.
Utility
Time
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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.
Participants are inter-dependent.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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.
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.
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.
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.
A B C D global Utility
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

24.
A B C D global Utility
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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.
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.
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.
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.
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.
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.
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.
How is that achieved?
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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.
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.
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.
The Undo dilemma
Edit Delete
Edit Delete
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

37.
What happens if you hit Delete?
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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.
Pop ups are Bad!
Avoid them!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

40.
Use Undo!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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.
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.
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.
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.
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.
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.
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.
Thank you!
Slides: http://slides.liip.ch
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy