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

Memi Beltrame

Made by ManyOn Collaborative Design

phpday, may 15th 2009Verona

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

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...

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

Why am I here?

To raise awareness and to show the dynamics of collaborative design

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

Argh! Design! Go away, I am a Developer!

Design is not only pushing pixels

Designing means arranging stuff:Pixels, Databases, Code, Processes

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

Collaborative Design takes place whenever an artefact is planned

and/or implemented by two or more participants.

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

Typical Collaborative Design Areas

ArchitectureSoftwareMovies!

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

The Internet is (probably) the biggest single instance of

Collaborative Design

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

Collaborative Design is a reality.

It is the inevitable process that emerges when you build something

as a team.

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

Unlike UCD or TDD it is nothing you choose, it just happens,

nolens volens.

UCD: User centered designTDD: Test driven development

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

It just happens, ok.

Understand it.Control it.

Embrace it.

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

Even the simplest Customer < > Contractor Relationship

involves Collaborative Design

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

It involves is a network of participants

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

The goal is a common product with a high overall utility

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

Every participant can propose solutions for design issues

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

In theory a Design should move towards an optimum of utility

Utility

Time

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

In theory. Not in reality.

Utility

Time

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

Why does collaboration not automatically mean

improvement?

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

Participants are inter-dependent.

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

Participants are inter-dependent.Inter-dependency means

„I need something“

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

Every participant has a self-interest

Customer:Affordable yet magic

Designer:beautiful and usable

Developer:solid, stable and performing

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

Fulfilling self-interest meansReaching a local optimum of utility

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

Are participants willing to compromise their self interest for

the sake of a global optimum?

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

A B C D global Utility

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

A B C D global Utility

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

The system can become very complex

Webserver admin

DB Admin

php-Developer

Proxy guy

Mobile Services admin

Grafics

Usability guy

DB SpecialistProject Lead

Management

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

It's hard to keep track of the interactions and design decisions

Webserver admin

DB Admin

php-Developer

Proxy guy

Mobile Services admin

Grafics

Usability guy

DB SpecialistProject Lead

Management

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

Subsytems can emerge

Webserver admin

DB Admin

php-Developer

Proxy guy

Mobile Services admin

Grafics

Usability guy

DB SpecialistProject Lead

Management

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

Subsytems also have a local optimum utility plus they are loyal!

Webserver admin

DB Admin

php-Developer

Proxy guy

Mobile Services admin

Grafics

Usability guy

DB SpecialistProject Lead

Management

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

Every new participant brings a shift in the oveall utility.

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

Every old participant must be aware of this and accept it. Otherwise the team is possibly ripped apart.

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

Successful Collaborative Design is based on the commitment of each

participants to achieve an optimum of overall utility.

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

How is that achieved?

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

● 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!

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

An example of interdisciplinary patterns:

The Undo Dilemma

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

A list of users to be administered

Edit DeleteEdit Delete

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

The Undo dilemma

Edit DeleteEdit Delete

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

What happens if you hit Delete?

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

What happens if you hit Delete?

Usually: a pop up!

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

Pop ups are Bad! Avoid them!

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

Use Undo!

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

Because:UNDO• is the rescuer of users in distress.• encourages exploration.• eliminates sensless confirmation-dialogs

Don‘t ask, do and UNDO ! !

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

Pop Ups are easy to implement,Undo is not.

It requires a well planned process

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

Frontend and backend people must decide on a pattern of implementation.

This is a collaborative design decision.

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

Possible patterns of implementation of undo in the database:

1) Through a Flag2) Through a history table

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

Implementation of Undo

VIEW view_users------------------------| ID | name | surname |------------------------| 1 | Pio | Polli |------------------------| 3 | Toni | Marroni |------------------------

SELECT * From `users` WHERE is_deleted = 0

TABLE users-------------------------------------| ID | name | surname | is_deleted |-------------------------------------| 1 | Pio | Polli | 0 |-------------------------------------| 2 | Enzo | Enzi | 1 |-------------------------------------| 3 | Toni | Marroni | 0 |-------------------------------------

1) Through a FLAG

• simple• Ideal to undo deletions• Downside: data may be materialized twice

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

Implementations of undo

TABLE users_history----------------------------------| ID | ID_users | name | surname | ----------------------------------| 1 | 1 | Pio | Polli |----------------------------------| 2 | 2 | Enzo | Enzi |----------------------------------| 3 | 3 | Toni | Marroni | ----------------------------------| 4 | 2 | Enio | Enzi |----------------------------------

TABLE users------------------------| ID | name | surname |------------------------| 1 | Pio | Polli |------------------------| 2 | Enio | Enzi |------------------------| 3 | Toni | Marroni |------------------------

2) Through a history table

Table users_history: every change also executes an INSERT

Table users: every change is an UPDATE

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

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

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

Thank you!

Slides: http://slides.liip.ch