Made by Many: On Collaborative Design

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

description

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.

Transcript of Made by Many: On Collaborative Design

Page 1: Made by Many: On Collaborative Design

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

Page 2: Made by Many: On Collaborative Design

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

Page 3: Made by Many: On Collaborative Design

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

Page 4: Made by Many: On 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

Page 5: Made by Many: On Collaborative Design

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.

Page 6: Made by Many: On Collaborative Design

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

Typical Collaborative Design Areas

ArchitectureSoftwareMovies!

Page 7: Made by Many: On Collaborative Design

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

Page 8: Made by Many: On 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.

Page 9: Made by Many: On Collaborative Design

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

Page 10: Made by Many: On Collaborative Design

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.

Page 11: Made by Many: On Collaborative Design

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

Page 12: Made by Many: On 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

Page 13: Made by Many: On Collaborative Design

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

Page 14: Made by Many: On Collaborative Design

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

Every participant can propose solutions for design issues

Page 15: Made by Many: On Collaborative Design

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

Page 16: Made by Many: On Collaborative Design

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

In theory. Not in reality.

Utility

Time

Page 17: Made by Many: On Collaborative Design

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

Why does collaboration not automatically mean

improvement?

Page 18: Made by Many: On Collaborative Design

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

Participants are inter-dependent.

Page 19: Made by Many: On Collaborative Design

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“

Page 20: Made by Many: On Collaborative Design

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

Page 21: Made by Many: On Collaborative Design

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

Page 22: Made by Many: On Collaborative Design

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?

Page 23: Made by Many: On Collaborative Design

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

A B C D global Utility

Page 24: Made by Many: On Collaborative Design

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

A B C D global Utility

Page 25: Made by Many: On Collaborative Design

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

Page 26: Made by Many: On Collaborative Design

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

Page 27: Made by Many: On Collaborative Design

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

Page 28: Made by Many: On Collaborative Design

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

Page 29: Made by Many: On Collaborative Design

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.

Page 30: Made by Many: On Collaborative Design

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.

Page 31: Made by Many: On Collaborative Design

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.

Page 32: Made by Many: On Collaborative Design

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

How is that achieved?

Page 33: Made by Many: On Collaborative Design

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!

Page 34: Made by Many: On Collaborative Design

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

An example of interdisciplinary patterns:

The Undo Dilemma

Page 35: Made by Many: On Collaborative Design

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

Page 36: Made by Many: On Collaborative Design

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

The Undo dilemma

Edit DeleteEdit Delete

Page 37: Made by Many: On Collaborative Design

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

What happens if you hit Delete?

Page 38: Made by Many: On Collaborative Design

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!

Page 39: Made by Many: On Collaborative Design

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

Pop ups are Bad! Avoid them!

Page 40: Made by Many: On Collaborative Design

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

Use Undo!

Page 41: Made by Many: On Collaborative Design

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

Page 42: Made by Many: On Collaborative Design

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

Page 43: Made by Many: On Collaborative Design

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.

Page 44: Made by Many: On Collaborative Design

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

Page 45: Made by Many: On Collaborative Design

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

Page 46: Made by Many: On Collaborative Design

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

Page 47: Made by Many: On Collaborative Design

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

Page 48: Made by Many: On Collaborative Design

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

Thank you!

Slides: http://slides.liip.ch