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

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

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

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

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

Typical Collaborative Design Areas
Architecture
Software
Movies!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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

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

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

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

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

It involves is a network of participants
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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

Every participant can propose
solutions for design issues
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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

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

Why does collaboration
not automatically mean
improvement?
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

Participants are inter-dependent.
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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

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

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

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

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

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

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

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

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

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

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

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

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

How is that achieved?
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

● 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

An example of interdisciplinary patterns:
The Undo Dilemma
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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

The Undo dilemma
Edit Delete
Edit Delete
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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

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

Pop ups are Bad!
Avoid them!
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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
! Don‘t ask, do and UNDO !
Memi Beltrame: Made by Many – On Collaborative Design
6th phpDay – May 15th/16th 2009 Verona - Italy

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

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

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

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

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

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

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