Six and A Half Philosophies
如果无法正常显示，请先停止浏览器的去广告插件。
1. Alex (Jun) Zhu ,
User Experience Manager, SAP
2. “
The physicist who is only a physicist can still be a first-class
physicist and a most valuable member of society. But nobody
can be a great economist who is only an economist - and I am
even tempted to add that the economist who is only an
economist is likely to become a nuisance if not a positive
danger.
”
Friedrich Hayek
The Dilemma of Specialization
3. Multidisciplinary Landscape of Design:
Urban Planning
Economics
Architecture
System
Dynamics
Linguistics
Art
Business
Design
Literature
Technology
Philosophy
Ethics
Psychology
Sociology
Politics
Anthropology
Biography
4. What Is Design?
5. My Personal Definition of Design:
“
Design refers to the human activity to invent a
new structure for utility
”
Note:
This is a very general definition, and should apply to all kinds of design
activities, including UX design, industrial design, architectural design, urban
design, process design, organization design, you name it.
6. “Human Activity”:
Design Non-design
Structure created by design Structure created by nature
(Mercedes-Benz Bionic Concept Car) (Boxfish)
Please note that I didn’t use “artificial” here. Human activity does not necessarily create artificial design, but
can also create so-called natural design or organic design. To be introduced later…
7. “New”:
Design Non-design
New structure created by design Existing structure materialized
and copied
8. “Structure”:
Design
Non-design
In year 2007, our revenue is
8.2M in manufacturing
industry, 3.2M in professional
service industry, 1.4M in
wholesale/retail, and 1.2M in
High-Tech.
Structured elements
Unstructured (or loosely
structured) elements
Please note that “structured/unstructured” is a fairly relative judgment. Finally you can find a structure in
almost everything in the world.
9. “Utility”:
Design Non-design (Art)
Structure created for utility Structure created for expression
(Schroder House, Gerrit Rietveld) (Composition in Red, Yellow and Blue, Piet
Mondrian)
10. How Structure Is Structured:
Boundary: border with its environment
Entities
Substructures
Ties between entities or
substructures
Structure of Solar System
11. Tie between
substructures
Entity with
attributes
External Force
Tie between
substructures
External Force
Environment/Context
Substructure
Boundary
12. Types of Structures (by Entity):
• Structure of Physical Entities
• Structure of Informational Entities (visual elements, data,
etc.)
• Structure of People
• Structure of Time
• Structure of Logic
• Structure of Behaviors/Events/Activities
• Structure of Mind
• Structure of Economy
• Etc.
13. Structure of Physical Entities:
Keyboard Layout of BlackBerry
The Giant Swiss Army Life
14. Structure of Informational Entities:
Typology Map of Metro Line
A Typical Portal Layout
15. Structure of People:
Organization Hierarchy
Social Network Visualization
(Jon Kleinberg & Lars Backstrom, Cornell
University)
16. Structure of Time:
Gantt Chart
Outlook Calendar
17. Structure of Logic:
Function show_hide_dynamicpane () {
if (!show_flag) {
dynamicpane.visibility = “visible”;
} else {
dynamicpane.visibility = “invisible”;
}
}
A Process Flow
If-Else Logic Structure
18. Structure of Mind:
Taxonomy of “Cognitive Domain”
(Professor Bloom, 1956)
What’s On A Man’s Mind?
(Image source: crazy-jokes.com)
19. Structure of Economy:
GDP Structure of Year 2005
(Data Source: National Statistics Bureau)
SAP Financial Performance from
Google Finance
20. A Few Types of Structure (By Form):
Linear Structure
Unipolar Network
Structure
Matrix Structure Network Structure
Multipolar Network
Structure Nonpolar Network
Structure
21. Linear Structure:
Guided Activity (Wizard)
Linear Structure
22. Matrix Structure:
Horizontal/Vertical Information Architecture
Function/Product Matrix Org Structure
Matrix Structure
Product Mgt.
Product A
Product B
Product C
Design
Development
23. Unipolar Network Structure:
Web Portals See Themselves as Hub of Internet
Unipolar Network
Structure
Urban Structure of Beijing
(image source from Google Map)
24. Multipolar Network Structure:
Typical Information Architecture of A Website
Multipolar Network
Structure
Urban Structure of Shanghai
(image source from Google Map)
25. Multipolar Network Structure:
Social Network
Nonpolar Network
Structure
Semantic Network
(e.g. Wikipedia)
User Experience
Architecture
Design
Human
Scale
Prototype
26.
27. “
The word ‘universe’ is derived from the Old Greek univers,
from Latin universa, which combines uni- (the combining form
of unus, or ‘one’) with versus (perfect passive participle of
vertere, or ‘turn’). The word, therefore, means ‘all turned into
one’ or ‘revolving as one’ or ‘orbiting as one’.
”
Etymology of The Term "Universe”
Wikipedia
28. Mathematic Formulas of Tao:
Absolute Formula:
Pragmatic Formula:
M = 6.5
29. Proposed 6.5 Philosophies for UX Design:
1. The city creates the theater and is the theater
2. This is a semi-structured world
3. Goodness of fit: Environmental Fitness
4. Goodness of fit: Internal Fitness
5. The ecosystem, gene, invisible hand, and supply chain
6. Talk, write, and imagine using language
6.5. To design or not design, this is a question
30.
31. Kashgar, 2005
Mistério e melancolia de uma rua
(Giorgio de Chirico, 1914)
Trastevere, Rome, 2004
Delhi, 2007
32. “
The essential physical means of a city's existence are the fixed site, the
durable shelter, the permanent facilities for assembly, interchange, and
storage; the essential social means are the social division of labor, which
serves not merely the economic life but the cultural process. The city in its
complete sense, then, is a geographic plexus, an economic organization,
an institutional process, a theater of social action, and an esthetic symbol
of collective unity.
…
The city creates the theater and is the theater. It is in the city, the city as
theater, that man’s more purposive activities are formulated and worked
out, through conflicting and cooperating personalities, events, groups, into
more significant culminations
”
Lewis Mumford
The Culture of Cities, 1937
33. “
In vain, great-hearted Kublai, shall I attempt to describe Zaira, city of high bastions.
I could tell you how many steps make up the streets rising like stairways, and the
degree of the arcades' curves, and what kind of zinc scales cover the roofs; but I
already know this would be the same as telling you nothing. The city does not consist
of this, but of relationships between the measurements of its space and the events of
its past: the height of a lamppost and the distance from the ground of a hanged
usurper's swaying feet; the line strung from the lamppost to the railing opposite and
the festoons that decorate the course of the queen's nuptial procession; the height of
that railing and the leap of the adulterer who climbed over it at dawn; the tilt of a
guttering and a cat's progress along it as he slips into the same window; the firing
range of a gunboat which has suddenly appeared beyond the cape and the bomb that
destroys the guttering; the rips in the fish net and the three old men seated on the
dock mending nets and telling each other for the hundredth time the story of the
gunboat of the usurper, who some say was the queen's illegitimate son, abandoned in
his swaddling clothes there on the dock.
Italo Calvino
Chapter 1, Invisible Cities
”
34. “
宽宏大量的忽必烈汗啊，无论我怎样描述采拉这个有许多巍峨碉堡的
城，都是徒劳无功的。
我可以告诉你，像楼梯一样升高的街道有多少级，拱廊的弯度多大，
屋顶 上铺着怎样的锌片；可是我已经知道，那等于什么都没有告诉
你。组成这城市的并不是这些东西而是它的空间面积与历史事件之间
的关系：灯柱的高度、被吊死的篡朝者摆荡的脚与地面的距离；系在
灯柱与对面铁栏之间的绳索、女皇大婚巡行时沿路张结的彩带；栅栏
有多高、偷情的男子如何在黎明时分跃起爬过它；檐槽的斜度、他闪
进窗子时一头猫怎样沿着檐槽走过；突然在海峡外出现的炮艇的火器
射程有多远、炮弹怎样轰掉檐槽；鱼网的裂口、坐在码头上的三个老
人怎样一面补网一 面交换已经讲过一百次的炮艇和篡朝者的故事 —
— 有人说他是在襁褓时就给遗弃在这码头上的、女皇的私生子。
”
Italo Calvino
Chapter 1, Invisible Cities
35. “
In order to define this quality in buildings and in
towns, we must begin by understanding that every
place is given its character by certain patterns of
events that keep on happening there.
”
Christopher Alexander
The Timeless Way of Building
36. Now, let’s go back to my definition of design:
“
Design refers to the human activity to invent a
new structure for utility.
”
37. “Ends” and “Means” of Design:
Structure of Physical Objects
+
+
+
=
=
+
Structure of Informational Objects
Direct Manipulation
Structure of Logic
Structure of Time
Structure of Behaviors/Events/Activities
Structure of People
Structure of Mind
Structure of Economy
Influence
Ends
38. Example: Architecture
Direct Manipulation
Influence
Goal
39. Example: BlackBerry
Direct Manipulation
Influence
Goal
40. Conclusion:
The mission of design is to improve the human emotion (structure of
mind), and economic outcome (structure of economy)
To achieve this mission, we have to influence the “structure of events”
(e.g. the process flow) and the “structure of people” (e.g. social
network), by manipulating the controls, screens, behaviors, information
architecture, etc.
This also determines the design process: “define the mission” ->
“design the stories” -> “design the UI”
41.
42. The “Hard” Part and The “Soft” Part in Cosmos:
Three Nebulae in Narrow Band
(Source: NASA Website)
43. The “Hard” Part and The “Soft” Part in Our Life:
Relatively “Hard” Part Relatively “Soft” Part
Solid Liquid
Organization Community
Managership Leadership
Database Documents
Law Morality
Engineering Design
BBS Wiki
Process Practice
Browse Search
Left Brain Right Brain
Reality Dream
Science Art/Philosophy
Explicit Knowledge Tacit Knowledge
Analytic Thinking Intuition
Quantitative Qualitative
Structuralism Deconstructionism
… …
44. The Benefit and Cost of “Structure”:
Benefit:
Regularity & Stability
Controllability
Predictability
Internal force to balance with external force
Out-of-the-box Utility
Etc.
Cost:
Cost to construct, deploy, and maintain
Inflexibility
Diversity Lose: opportunity cost to become other structures
45. Example: In-house Recruiting System
Think about what are the benefits and costs for a company to develop an in-
house system to manage their recruiting process.
Benefit:
Regularity & Stability: process standardization
Controllability: accountability, policy reinforcement, etc.
Predictability: process transparency
Internal force: work flow, status management
Out-of-the-box Utility: best practices
Cost:
Cost to construct, deploy, and maintain: development cost, implementation
cost, maintenance cost, etc.
Inflexibility: what if the process changes dramatically? what a big re-
organization happens? What if the approver is on vacation? …
Diversity lose: people are forced to use the same process and methods without
exceptions
46. Metaphor: A Restaurant That Only Serves Combo
Benefit:
No need to order one by one
Seems to reflect the best
practice
Etc.
But:
I like everything but the meat
soup, since I am vegetarian!!!
47. “
The problem, like all those with which we are
concerned, is one of balance. Too little liberty brings
stagnation and too much brings chaos.
”
Bertrand Russell
48. Conclusion:
Be cautious not to over-structure or over-design. Reach a good balance
between being structured and being flexible (unstructured) through:
• Componentization and Configuration
• “Soft Control” by offering guidance and best practices
• Leave a “hole” to accommodate unstructured activities, and provide a convenient link if
possible and necessary.
Design Time
Highly dynamic activities
Medium dynamic activities
Fixed activities
Run Time
Link
?
49. Componentization and Configuration:
SAP NetWeaver™
PEOPLE INTEGRATION
Multichannel access
Portal
Collaboration
INFORMATION INTEGRATION
Knowledge Mgmt
Master Data Mgmt
PROCESS INTEGRATION
Integration
Broker
Business
Process Mgmt
APPLICATION PLATFORM
J2EE
ABAP
DB and OS Abstraction
Management
Bus. Intelligence
Service Oriented Architecture:
SAP NetWeaver
50. Soft Control (Semi-Structure):
Graphic Navigation in SAP
Profitability Modeling Tool
Business Process Foundation in SAP
Consolidation Solution
51. Linked “Hole”:
Save as PDF
Structured Data
Date: xxx
City: xxx
Purpose: xxx
…
Unstructured Data
?
Attach emails
Upload receipts
Print out
Submit
+
Paper
Receipts
Attach scanned receipts
Ask For
Clarifications
Company
Expense Policy
52. Linked “Hole”:
Productive Applications
(Unstructured)
Transaction Systems
(Structured)
• Copy as a link/Paste
• Automatically
determined by Word
using Smart Tags
53. Linked “Hole”:
Outlook
(Unstructured)
Adobe Interactive Form
(Semi-structured)
Database
(Structured)
54. Linked “Hole”:
Duet™ - Seamless integrates Microsoft® Office and
SAP Backend
55. Linked “Hole”:
Customer-Uploaded
Image (unstructured)
System-generated
Data (structured)
SAP Performance
Mgt. System
56.
57. Fallingwater
(Frank Lloyd Wright, 1936)
58. Fitness:
A well-designed structure needs to have 2 different kinds of
fitness
Environmental Fitness (balance with external forces):
Fitness between the structure and its
environment/context
Internal Fitness (balance with internal forces):
Fitness between the elements, substructures, and their
ties.
59. Environmental Fitness:
External Force
Environment/Context
External Force
60. Example: BlackBerry
Existing Structure
(Environment/Context)
New Structure
n
Influe
Cons
t
ce
raint
61. Example: Ross Lovegrove’s Organic Design
“Go” Chair Ty Nant Water Bottle
(Ross Lovegrove) (Ross Lovegrove)
62. Example: Natural Language Search
Normal Search Engine Natural Search Engine
Search Engine 1 Search Engine 2
Usability Venders China List me the top 5 usability venders in China
Search Search
Virtual Company A Virtual Company A
Virtual Company B Virtual Company B
Virtual Company B was established in 2004 and
now has 12 FTEs… Virtual Company B was established in 2004 and
now has 12 FTEs…
Virtual Company A is a Beijing-based usability
service vender…
Environment has to adapt
to the new structure
Virtual Company A is a Beijing-based usability
service vender…
Good Environmental
Fitness
63. “
There is a quality even meaner than outright ugliness or
disorder, and this meaner quality is the dishonest mask of
pretended order, achieved by ignoring or suppressing the real
order that is struggling to exist and to be served.
”
Jane Jacobs
Urban Thinker
64. “
The rightness of the form depends, in each one of these cases, on
the degree to which it fits the rest of the ensemble.
”
Christopher Alexander
Notes on the Synthesis of Form
65. Challenges:
Indefinite possibilities are available to define the boundary
between the structure and its environment/context
Usually the environment/context is ambiguous to the
designers (consider the regularities and irregularities in
the world)
Usually the environment/context changes over instances
Sometimes the environment/context evolves over time
66. Solutions:
1. Find an appropriate scope of the design (define an
appropriate boundary)
2. An adapted “Reductionism” approach to solve ambiguity:
Understand -> Generalize -> Imagine -> Scope -> Model
-> Design -> Trial & Error -> Solve
3. Four mindsets: Skeptic -> Dreamer -> Architect ->
Scientist
4. Adaptability of the structure, in terms of localization,
customization, and personalization (e.g. the surface of
sofa can always adapt to the people sitting there)
5. Provide an organic structure that emerges, adapts, and
grows (to be addressed later)
67. 1. Define The Border with The Environment
68. Indefinite Possibilities to Set Boundary:
Environment/Context
?
Indefinite Possibilities to Set Borders
69. “
He who defines the problem, declares the solution.
”
Bob Baxley
Design Vision Conversation
“
The greatest challenge to any thinker is stating the problem in a
way that will allow a solution.
”
Bertrand Russell
Design Vision Conversation
70. Example:
A. Improve the efficiency of my production and distribution
B.
Improve the efficiency of my supply chain
Result A
Internal Production Efficiency:
•
•
•
•
Production Process & Technology
Distribution Center
Agile manufacturing, JIT (kanban)
Etc.
Result B
Supply Chain Efficiency:
• Vender Managed Inventory
• Outsourcing
• Information sharing
• RFID
71. Example:
A. Find new technologies to reduce the CO 2 emission
B. Reinvent the ecosystem to reduce the greenhouse gas emission
C. Solve or relieve the “global warming” problem
Result A Result B
• CO 2 -reducing Technologies • Policies (regulations,
taxes, accounting, etc.)
• Incentives
• Market/Industrialization
• Public awareness
• Alternative Energy
Result C
• CO 2 Capturing and Reuse
(e.g. plastic production,
cryogen, petroleum
mining, etc.)
• Or even wilder idea: use
CO 2 as cryogen to cool
down our planet?
72. Example:
A. Improve the usability of the registration form of our website
B. Improve the registration process of our web site
C. Improve the internet registration experience in general
Result A
Result B
Non-registered user
New User Registration Form:
Full Name: * Alex Zhu
Email Address: * Keepsilence.com@gmail.com
Password: * XXXXXX
Repeat Password: * XXXXXX
Mailing Address:
Line 1: *
Other fields…
# 1293, Pudong South
Manual
Registration
Shopping Cart
Place Order
(enter name,
email, mailing
address, etc.)
Automatic
Registration
Result C
Google Toolbar
73. A More Radical Solution to Reduce “Transaction Cost”?
Transaction
History recorded
Website A
User Repository
Call
• Credibility
• Transaction
History
• Favorites
• Preferences
• Profile
• etc.
Register Now
Return
Register
once for all
Visit
Visit
Call
Register Now
Return
Transaction
History recorded
Website B
74. General Principles:
The broader you defines the boundary, the more likely
your solution will have a strategic impact. This is where
innovation often occurs.
However, this is an economic decision which means you
need first consider the capacity (production possibility
curve), feasibility, and then do an ROI evaluation
5
A
B
4
C
3
D
2
E
1
0
F
1
2
3
4
5
75. 2. An Adapted “Reductionism” Approach to
Solve Ambiguity
76. “
Architectural design problems can also be referred to as being
‘wicked problems’ in that they have no definitive formulation,
no explicit ‘stopping rule’, always more than one plausible
explanation, a problem formulation that corresponds to a
solution and vice versa, and that their solutions cannot be
strictly correct or false.
”
Peter Powel
77. “
The first was never to accept anything for true which I did not clearly know to be
such; that is to say, carefully to avoid precipitancy and prejudice, and to comprise
nothing more in my judgment than what was presented to my mind so clearly and
distinctly as to exclude all ground of doubt.
The second, to divide each of the difficulties under examination into as many parts
as possible, and as might be necessary for its adequate solution.
The third, to conduct my thoughts in such order that, by commencing with objects the
simplest and easiest to know, I might ascend by little and little, and, as it were, step
by step, to the knowledge of the more complex; assigning in thought a certain order
even to those objects which in their own nature do not stand in a relation of
antecedence and sequence.
And the last, in every case to make enumerations so complete, and reviews so
general, that I might be assured that nothing was omitted.
”
René Descartes
Discourse on the Method of Rightly
Conducting the Reason
78. Reductionism Methodology:
1. Filter away all that may be in doubt.
2. Divide difficulties to as small pieces as necessary.
3. Start with the simplest problems.
4. Make Lists, Tables, Diagrams.
Source: Wikipedia
(Term: “Discourse on the Method”)
79. Definition of Reductionism:
In philosophy, reductionism asserts that the nature of complex things is
reduced to the nature of sums of simpler or more fundamental things.
Practical Benefits:
Break down complex problems into smaller parts which are more
understandable and operable.
In this way, specialization and collaboration are possible, and the
problem can be solved in a progressive manner
Select an order to solve these parts step by step, depending on the
complexity of each part and its dependency with other parts.
Though reductionism has been criticized a lot in the past 2 centuries
(mainly by Holism, Structuralism, and Emergentism who believe “the
whole is more than the sum of its parts”), this is still a very pragmatic
approach to solve complex issues regardless of its limitations.
80. Non-human animals could be
reductively explained as automata
(De Homines 1622)
Paul Cézanne believed that all
objects can be abstracted as
cylinders, spheres, and cones.
81. Constraints of Reductionism:
Study a part in isolation, ignoring the interplay between the part and its
context
Proven to be error-prone by biography science, linguists, chemistry, and
many other disciplines (e.g. Being isolated from their contexts, words
will lose their meaning; Water has totally different quality with oxygen
or hydrogen)
82. An Adapted “Reductionism” Approach:
?
Understand
Generalize/
Filter
Imagine
? ?
Scope
Design
Trial & Error
Solve
x
x
Model
83. General Principles:
Macro -> Micro
Backbone -> Flesh
Enumeration: Abundance -> Choice
“Damped” Iteration
84. Macro -> Micro, Backbone -> Fresh
Three perspectives to understand a new city:
Bird View (Macro thinking, big picture)
Night View (Noise filtering, structure, backbone, pattern
identification)
Attendance (Micro thinking, experience, empathy, validate)
Bird View
Night View
Attendance
85. “
Looks like a ridge from one perspective,
Looks like a peak from another,
Knowing not the true face of Lushan Mountain,
”
For I am in its midst.
Su Dongpo
Handwriting on The Wall of Xilin
86. Metaphor: The Development Process of Baby
Product Vision
Blueprint
Week 1
Week 4
Week 6
High-Fidelity
Week 22
Week 24
Image source: http://www.pregnancy.org
Low-Fidelity
Week 30
Week 14
Week 18
Product Delivery Adaptation
Birth 1 year old
87. Seven Bridges of Königsberg:
Leonhard Euler
Chapter 1, Invisible Cities
88. A “Micro -> Macro” Process:
Macro Level
SM Deliverables
Virtual Company
UX Deliverables
<-> Model Company
System-level Requirements <-> ersonas
System-level design:
Detailed use cases <->
Role Specifications
• Function tree
• System-level use cases
Micro Level
• Information Architecture
• Screen flow (very low-fi)
• UI specs for Common Behaviors
Use Scenarios + UI Mockups + UI
Specifications
89. Design Portal: Modal Company
FutureTech System
Modal Company
• Company intro
• Industries
• Customers &
Competitors
• Organization
Structure
• Information
Landscape
Personas
• Browse by name
• Browse by
organization
• Search
Business Processes
• Browse
Now, you are here: Design Portal > Modal Company > Organization Structure
90. Design Portal: Persona
FutureTech System
Modal Company
• Company intro
• Industries
Now, you are here: Modal Company Portal > Personas > Kate Zhang
Organizational data: Responsibilities:
Name: Kate Zhang As a sales manager in Akron’s office
in NY, Kate not only takes care of
the sales performance in the east
coast, but also needs to…
• Customers &
Competitors Company: FutureTech
• Organization
Structure Department: Office New York
• Information
Landscape Subordinates: Nancy Wang, Tony Lee,
Xiaoyan Liu,
Position: Sales Manager
Direct Manager: Feng Tang
Personas Other information:
• Browse by name Computer Skills: Professional
• Browse by
organization
• Search
Business Processes
• Browse
Working Environment: shared office
Equipments: Laptop, Blackberry, Fax,
Printer, Telephone
Software: SAP CRM, Outlook, Excel,
Word, Powerpoint, WebEx, etc.
Goals:
• Wants to maintain a healthy
opportunity pipeline in her team
• Wants to achieve the sales
quota
• Wants the team to be motivated
• Etc.
Business Processes involved:
• Order to Cash
• Hire a new employee
• Expense Reimbursement
Management
91. Design Portal: System-Level Use Case
FutureTech System
Company Overview
• Company intro
• Industries
• Customers &
Competitors
• Organization
Structure
• Information
Landscape
Personas
• Browse by name
• Browse by
organization
• Search
Business Processes
• Browse
Now, you are here: Design Portal > Business Processes > ERM Process
92. “Abundance -> Choice”
Image source: www.blog.speculist.com
93. “Damped Iteration”:
Field Research
Ad-hoc Research
Lab Research
?
? ?
Understand
x x
“Damped” Iteration
94. 3. Four Mindsets For Designers
95. Realist
Some things are independent
of mind
Everything is mind dependent
Architect
Rationalist
Some knowledge of the
world is independent of
our own experience
Idealist
Dreamer
The structure of the mind Our mind structures the
matches, in some respects, world
the structure of the world
Kant
Plato
Descartes
Scientist
Empiricist
All knowledge of the world We can gain knowledge of
the world, but only
comes from experience
through experience
Aristotle
Skeptic
We have no better insight
into the workings of our
minds than into the world
itself
Locke Hume
Russell Berkeley
Categorization of Classical Epistemology
96. What Mindsets Are Required in Design?
Architect
• Scope
Dreamer
• Imagine
• Model
• Design
Scientist
• Validate
Skeptic
• Understand
• Generalize/Filter
97. General Principles:
Since very few people really have all of these 4 very
different mindsets, certain level of specialization in the
design process seems to be necessary
However, the cost of specialization also needs to be
evaluated (e.g. how to make sure the information fidelity
across the researchers and designers, etc.). Refer to next
section regarding internal fitness
“Focus with context” approach might be the best option
98. 4. Adaptability to deal with individual
differences across instances
99. Different Levels of Adaptability:
Localization Country Scale
Industrialization Industry Scale
Customization
Personalization
Company Scale
Human Scale
100. Example: CSCW Design
High Power Distance Culture
(mono-nuclear)
Medium Power
Distance Culture
(poly-nuclear)
Low Power Distance
Culture
Organization
Structure
(Environment)
(semi-homogenous)
Environmental
Fitness
Collaboration
Structure
(Design)
Centralized Model Decentralized Model
(hierarchical communication) (hierarchical + collaboration)
Distributed Model
(Non-centered, social
networking, clique)
101. Metaphor: Roadway Design in Urban Planning
Urban Structure
(Environment)
Mono-nuclear Poly-nuclear
(e.g. Beijing) (e.g. Shanghai)
Low Power Distance
Culture
(semi-homogenous)
Environmental
Fitness
Roadway
Structure
(Design)
Centralized Model
Decentralized Model
Distributed Model
102.
103. Internal Fitness:
Solomon Guggenheim Museum, New York
(Frank Lloyd Wright, 1959)
104. Internal Fitness:
This is a cutting board in your kitchen. It is built into the
kitchen counter. When you are not using the cutting
board it slides into the counter (Picture A). When you
need to use it, you slide it out (Picture B). It is very
convenient.
But wait…you got a new problem.
Reason:
When you design a structure, you need to consider how
all parts work together.
Source: http://www.baddesigns.com
105. “
Form ever follows function.
”
Louis Henri Sullivan
Lippincott's Magazine
“
Form follows function - that has been misunderstood. Form
and function should be one, joined in a spiritual union.
”
Frank Lloyd Wright
106. Interplay between Form and Function:
Function is the origin of the form
Form is constrained by the function, but not deterministic
(the same function can be satisfied by various forms)
Diversity of forms embodies uniqueness (culture,
personality, aesthetics, etc.)
Form can also have an influence over function and make
the latter evolve
107. Internal Fitness:
External Force
Internal Force
External Force
Internal Force
108. What’s Internal Fitness?
Balance among internal forces:
Conceptual Integrity (different goals and strategies)
Connection and communication (silos, misunderstandings, etc.)
Consistency (functional, behavioral, visual, mental model, etc.)
109. Challenges:
For complex systems, reductionism approach seems to be the only
pragmatic way to make specialization & collaboration possible
Parts are studied and solved apart from the whole (context), and
therefore there is a potential fallacy of composition (whole does not
equal to the sum of parts)
A part’s neighbors are changing over time
Dilemma of specialization: different organizations, goals, knowledge,
experience, skills, locations, culture, languages, personality, you name it
Hard to balance the efficiency and the communication intenseness
among the people who work on these parts
110. A “Fallacy of Composition” Example in Economics:
If an individual farmer adopts a new cultivation technique , he will earn
more from the improved production efficiency.
What happens if all famers adopt this new technology?
Price
S 1
D 1
Answer:
A
P 1
B
P 2
Q 1 Q 2
S 2
Quantity
The famers will earn less if all of
them adopt the technology!
111. “
Any organization that designs a system (defined broadly) will
produce a design whose structure is a copy of the organization's
communication structure.
”
Melvin Conway
Datamation, 1968
112. Solutions:
Introduce systems thinking to understand the overall system landscape
and interdependencies. This might be done by a few architects but with
the whole group involved and informed
Carefully break down the whole into the parts, to avoid over
fragmentation.
Standards, guidelines, governance, etc.
Patterns: share the same language (to be addressed later)
“Focus with context” when studying the parts
Try to align the organization structure with the system structure
Improve communication model in the entire organization, across
disciplines (design, research, development, PM, marketing, support,
etc.) and across functional parts (products, components, etc.)
113. “
If you wish to influence or control the behavior of a system,
you must act on the system as a whole. Tweaking it in one
place in the hope that nothing will happen in another is
doomed to failure—that’s what connectedness is all about.
”
Dennis Sherwood
Systems Thinking
114. Systems Thinking:
Systems Thinking, also known as System Dynamics, focuses on
how the thing being studied interacts with the other
constituents of the system.
Therefore instead of isolating smaller and smaller parts of a
system, systems thinking involves a broader view, looking at
larger and larger numbers of interactions.
115. Systems Thinking Diagram:
-
Unit Price
Example:
+
Technology
Advancement
+
Quantity
+
Revenue
+
Visualize a more completed
landscape of the farmer’s
problem.
116. Example: Travel Management Cultural Model
From SAPEnjoy Project (joint project with InContext, Enterprise)
117.
118. Plants in The Nature (Alex)
Prosperity in A Market
(Bab)
119. Challenges:
Environment changes over time
Mechanic structure does not scale
For complex problems, chaos ubiquitously exists in both
environment and the internal organization, which makes
up-front and centralized design/control impossible
We are witnessing a “Unipolar –> Multipolar –> Nonpolar”
paradigm shift in the structure of our world in a lot of
areas (which may be explained the Entropy theory), and
design has to match in many cases
120. Environment Changes Over Time:
For example, after a company has deployed an enterprise
application:
The legal requirements may change
Business environment may change
Business process may change
Company policy may change
Organization structure may change
IT landscape may change
Etc.
121. Chaos (deterministic, unpredictable):
“
A butterfly's wings might create tiny changes in the atmosphere
that ultimately cause a tornado to appear.
”
Edward Lorenz
Image source from Wikipedia
122. Langton’s Virtual Ant:
A 4-state 2-dimensional Turing machine invented in the 1980s. The ant starts
out on a grid containing black and white cells, and then follows the following
set of rules.
1. If the ant is on a black square, it turns right and moves forward one unit.
2. If the ant is on a white square, it turns left and moves forward one unit.
3. When the ant leaves a square, it inverts the color.
Result from the Computational Simulation
123. Our World Is Getting More Homogeneous!
Monopoly Economy
/Command Economy Corporate
Economy Consumer Economy
(Liberalism) Economy
Bipolar World
(before 1990) Multipolar World
(after 1990) Globalization
(till ?) World
Politics
Realism Modernism Post-modernism Art
Web 1.0
(Centralized
Production) Web 1.5
(Integration) Web 2.0
(Mash-up, Collective
Intelligence, etc.) Internet
124. Solutions:
Embrace the complexity, irregularity, and unpredictability
of the environment. Shift from the “machine” metaphor to
“organism” metaphor and “market” metaphor.
“Organism” metaphor:
•
•
•
•
Ecosystem
Seed
Gene
Evolves, adapts, and grows
“Market” metaphor:
•
•
•
•
“The Invisible Hand”
Self-interest and Incentive
Supply Chain
Specialization and Transaction cost
125. 1. The “Organism” Metaphor
126. “
Let the design:
• be inspired by nature and be sustainable, healthy, conserving, and
diverse.
• unfold, like an organism, from the seed within.
• exist in the "continuous present" and "begin again and again".
• follow the flows and be flexible and adaptable.
• satisfy social, physical, and spiritual needs.
• "grow out of the site" and be unique.
• celebrate the spirit of youth, play and surprise.
• express the rhythm of music and the power of dance.
”
Frank Lloyd Wright
An Organic Architecture
127. “Organism” Metaphor:
Cell
Gene
Seed
128. Sophistication Achieved by Genetic Algorithm:
Complex or sophisticated outcomes derived from groups of
individuals following simple rules.
Simple Rules:
3.Separation
4.Alignment
5.Cohesion
Craig Reynolds’s Computational
Model “Boids”
129. Organic Model:
T 1 T 2
Environment Environment
Inorganic
Structure
Environmental Fitness
at Time Point 1
T 1
Environment
Environmental unfitness
at Time Point 1
T 2
Environment
Organic
Structure
Environmental Fitness
at Time Point 1
Environmental Fitness
at Time Point 2
130. Man-made Creature by Theo Jansen by using
Genetic Algorithm
131. Wikipedia: A self-organized encyclopedia that
grows everyday
132. Tags,
Semi-structured , Collective
Intelligence ,
Evolve , Flexibility , Democracy ,
Organic ,
Visualization,
Discoverability , Information
Decentralized
Tagging: an emerging structure with no up-
front planning or central control
133. Amazon’s Recommendation Engine:
Intelligence based on simple algorithms
134. Social Network:
Another example of growing structure
135. 2. The “Market” Metaphor
136. “
He generally, indeed, neither intends to promote the public interest, nor
knows how much he is promoting it.
…
He intends only his own gain, and he is in this, as in many other cases,
led by an invisible hand to promote an end which was no part of his
intention.
…
By pursuing his own interest he frequently promotes that of the society
more effectually than when he really intends to promote it.
”
Adam Smith
The Wealth of Nations
137. “
Motivation is the art of getting people to do what you want
them to do because they want to do it.
”
Dwight D. Eisenhower
The Wealth of Nations
138. Order Achieved by Self-Interest:
Complex or sophisticated outcomes derived from groups of individuals
following simple rules (self-interest in this case).
Simple Rules:
D
S 1
Free Market (Order Under The
Chaos)
3.Buy more when price
goes down
4.Sell more when price
goes up
139. Market-driven Modal:
T 1 T 2
Environment Environment
Ego-centered
Structure
Environmental Fitness
at Time Point 1
T 1
Environment
Environmental unfitness
at Time Point 1
T 2
Environment
Open Structure and
Open Market
Environmental Fitness
at Time Point 1
Environmental Fitness
at Time Point 2
140. Supply Chain in Different Paradigms:
Unipolar paradigm
(e.g. web 1.0)
Multipolar paradigm
(e.g. web 1.5)
Nonpolar paradigm
(e.g. web 2.0)
Value Supply (Design Time)
Value Consumption (Run Time)
141. Specialization and Marketplace:
Each supplier only needs to take care of a much smaller scope of
problem and with much more regularity
Each supplier is more responsive and adaptable to its local environment
change (self-interest driven), and therefore the whole market is more
adaptable
The mission of design is to reduce the transaction cost and reach the
best economic efficiency
142. Transaction Cost Reduced by SOA:
SOA
High Transaction Cost (n=10)
Lower Transaction Cost (n=5)
143. Open Source Example: Firefox’s
Extensions
144. Yahoo Widget
145. Commonalities Between Wal-Mart & Yahoo Widget?
Customer (One-stop
Shopping Experience)
User (Integrated User
Experience)
P&G
Google
Widget
Repository
VMI
RFID
Protocol
Wal-Mart
EDI
Yahoo
XML
SDK
Information Sharing
Supply Chain of Wal-Mart
Supply Chain of Yahoo Widget
146. “SOA” As A “Dissection Table”:
“
Beautiful as the chance encounter of a
sewing machine and an umbrella on a
dissection table.
”
Comte de Lautreamont
Maldoror
147. EBay: Order Achieved by Reputation
Mechanism (self-interest)
148. Market-driven Approach to Relieve Global
Warming: Greenhouse Gas Emission Trading
149. Second Life: self-created and self-
organized society
150. Google: A Market Place for Websites
to Attract Customers
151. Mash-up: Google Map as a service +
Smugmug as photo sharing service
152.
153. Language As The Greatest Invention of Human Beings:
Key functions of language:
Communicate
Document
Learn
Think and develop new knowledge: people subconsciously use language to
construct ideas in mind
Why I think language as the greatest human invention:
The indefinite and complex world can be represented and understood by our
finite and less complex language, maybe not 100% completely and accurately.
How could?
The structure of the language somehow represents the structure of the world
The language finds the regularities in the irregularities, or in other words, the
patterns of the complex.
Language evolves, adapts, and grows over time, contributed by collective
intelligence of people across generations
154. Commonality Between Language and Design?
Key functions of design:
Communicate
Innovate
Why language is needed in design:
External Fitness: design should reflect the structure of the environment
(or the world); design should communicate with users in an
understandable manner
Internal Fitness: the parts need to communicate with each other;
designers who work on these parts need to communicate with each
other in an understandable manner
Organicism: to create an organic structure that evolves, adapts, and
grows, a common language should be provided, to enable the collective
intelligence
155. Etymology of “Design” in Chinese Language:
This component means
“language”
The Word “Design” in Chinese
156. Etymology of “Design” in Chinese Language:
Control people by
using language
Language
Control, drive,
employ
Count numbers by
using language
Language
Ten
Etymology of These 2 Chinese Characters by
Xu Shen (100 AC)
157. How Chinese Characters Are Structured:
Metaphor, Symbolize
Atomic Building Blocks
(no meaning)
Low-level Composited Building Blocks
(meaning: mouth)
Metaphor, logical
aggregates,
pictophonetics
Layout
Algorithm
Metaphor, logical
aggregates,
pictophonetics
Layout
Algorithm
Word finally composited
(meaning: design, create)
High-level Composited Building Blocks
(meaning: speak, language)
158. How Words, Sentences, and Paragraphs Are Structured:
Character (meaning: design,
create)
Metaphor, Reference
Action + Object
Algorithm
Word with more complete but fixed
meaning (meaning: design)
Character (meaning: ideas)
Metaphor,
Reference
Grammar
Metaphor, Reference,
Express
Context, Style
Paragraph with more situational and
dynamic meaning (context more
important than words)
Sentence with situational meaning
(meaning: help me to design)
159. How Chinese Character Evolves: “Horse”
Oracle Bone Script
~1200 BC
~200 AC
1950
~221 BC
Seal Script
Clerical
Script
Regular Script
(Traditional)
Regular Script
(Simplified)
Bronze Script
Concrete, irregular,
inconsistent, complex
Abstract, regular,
consistent, simple
160. Some Facts About Chinese Language:
Synchronic study as of 2001:
8 basic strokes (atomic building blocks)
~214 composited building blocks
~80,000 Chinese characters in total, with ~3,500 of them commonly used, and
~2000 frequently used in daily life
Infinite sentence and paragraph compositions
Diachronic study:
The basic strokes almost never changed
The building blocks and characters evolve gradually from concrete to abstract,
from irregular to regular
The number of characters commonly used today does not increase much
compared with the “Oracle Bone Script” period (3000 years ago)
The composited building blocks were simplified and reduced a few times (latest
change is the Simplified Chinese revolution in mainland China)
161. Structure Elements in Language:
Different Levels of Building Blocks
Configurable Building Blocks
Complex,
Irregular Dynamic, Free,
Stylish,
Expressive
Simple,
Regular Fixed, Restricted,
Consistent
Composition
Layout Algorithms
Polysemy
Grammar to define relationships
and rules
Metaphors and References link
to the real world
Cross-referencing
Constrained Freedom
162. Design As Language – Perfect Match!
Different Levels of Building Blocks
Configurable Building Blocks
Complex,
Irregular,
Infinite
Composition
Dynamic, Free,
Stylish,
Expressive
Applications
Layout Algorithms
Flows
Polysemy
Grammar to define relationships
and rules
Screens
Metaphors and References link
to the real world
Patterns
Pattern Elements
Cross-referencing
Constrained Innovation
UI Controls
Simple, Regular,
Less
Fixed, Restricted,
Consistent
163. How to Design As Language:
Unspecific Problem
Specific Problem
Metaphor,
Reference
Metaphor,
Reference
?
Narrate and Express:
Reference, Invoke,
(Composite the structure in an
Configure
innovate way)
+
-
Environmental
Fitness
Solution emerges
F(x
) Є
UI Dictionary
Internal
Fitness
(Language Best Practices)
Model Companies/Personas
164. Benefits of This Approach:
Liberate designers from trivial activities, but shift the focus to more
design activities (e.g. process, application)
Enable designers, and potentially partners, customers, and users in the
“Multipolar” or “Nonpolar” model, by sharing the language, and
therefore the structure can grow
Internal fitness reached by using the same language (building blocks
and grammar)
Solution emerges when the problem is narrated in a natural manner,
and therefore both environmental fitness and internal fitness can be
achieved
Innovation reached by narrating the problem in a creative way
Uniqueness reached by “writing styles”
Best practices
Economic efficiency and scalability (lower marginal cost)
165. How Narrative Design Works:
Problem:
Design an application for a regional sales manager to manage the sales activities and
performance in his region.
Narrative Design:
Tony, sales manager of FutureTech, comes to the office in the morning. He logs into the
system. The first thing he wants to do is to check whether there are some exceptions in
his area of responsibility. The system messages him that there is an opportunity moving
very slowly in the pipeline in the past month, and therefore Tony wants to drill down to
see the reasons behind, and check who is the responsible person to respond to this
problem.
He realizes that the price set in the quotation is too high. The sales rep of this
opportunity is Bob. Since the customer BigMoney is very strategic to the company’s
growth, and therefore Tony creates a task for Bob to adjust the price in the quotation.
…
166. How Narrative Design Works:
Problem Narration:
Noun.
The sales rep of this opportunity is Bob.
Since the customer BigMoney is very
strategic to the company’s growth, and
therefore Tony creates a task for Bob to
adjust the price in the quotation.
Noun.
+
-
F(x)
Є
Design Dictionary
(Language Best Practices)
Model Companies,
Personas
167. Question:
Does this approach lead to “design determinism”?
Does this approach kill design freedom and room for
creativity?
Can design be automated by the computer this way, if the
artificial intelligence is sophisticated enough?
Does this mean designer becomes less necessary?
168. No!!!
To narrate the problem accurately, you have to
understand the problem accurately, which is the most
important and difficult job in most cases.
The same problem can be narrated in very different way
(next slide shows a different version of story adapted for
“high power distance” culture)
Great creativity is not to reinvent the wheel, but reinvent
the car
Designers become more strategic because they are
moving to the upper end of the food chain.
169. Adapted Version of The Story:
Problem Narration:
Noun.
The sales rep of this opportunity is Bob.
Since the customer BigMoney is very
strategic to the company’s growth, and
therefore Tony opens the corresponding
quotation by himself, overwrites the price,
and then informs Bob about this decision.
Noun.
+
-
F(x)
Є
Design Dictionary
(Language Best Practices)
Model Companies,
Personas
170. How Should Design Language Evolve:
As suggested by the diachronic study of the Chinese language,
the following principles/recommendations may apply to the
design dictionary:
Number of UI controls should be relatively quite stable
As atomic building blocks, UI controls should not change much over
time
New UI patterns can be invented only when necessary
Very infrequently used UI patterns should fade out over time
You can keep a relatively large screen repository, but hold the
assumption that less than 20% of these screens are frequently used.
Spend 80% of your effort on this 20% screens according to Pareto’s rule
171.
172. On One Hand:
African photos by Kevin Carter
An Undesigned Life:
poverty, suffer, unsatisfied demand,
fight with environment
Chicago photos (Alex)
A Designed Life:
abundance, enjoy, sufficient supply, utilize
the environment
173. On The Other Hand:
Shangri-la, Kashgar (Alex) Anonymous images searched from
internet
An Undesigned Life: A Designed Life:
natural, alive, diversity, free, relax,
emotional, sustainable
artificial, isolated, commodity, restricted,
incursion, cold, environmental damaging
174. The Ultimate Questions:
How do designers (as a whole) impact the world and the
human life?
Does our work really create value? Are we spending
money, time, and effort doing right things?
Does design sometimes become a “surplus of intellect” or
“show-off of creativity”?
Are we solving the complexity or rather contributing to the
complexity?
To design, or not design?
175. My Speculation How Complexity Evolves in Human Society:
Starting Point
Problem 1
Intents to
solve
S1
Solution 1
Generates
new problem
P1
Intents to
solve
Intents to
solve
S2
S3
Conflict and then
generate new
problem
Generates
new problem
Intents to
solve
Problem 2
Generates
new problem
Problem
Solution
Intents to solve
Generates new problem
Conflict and then generate new problem
176. A Critical View of Our Civilization:
Phenomenon:
In the very beginning, we only have a few basic problems (food, shelter,
disease, sex, etc.)
In the end, we get thousands of millions of solutions, as well as
thousands of millions of new problems!
Some of the basic problems are relatively better solved, but the others
are even getting worse (e.g. freedom in life, happiness, environment,
etc.)
Example:
The ultimate intention for human to invent computer is NOT to increase
productivity, but to serve people and liberate people from the work
But now, how many people (including you and me) are serving the
computer, and working even harder than before?
177. Some Explanations:
Too many solutions intent to solve the same problem, driven by self-
interest (think about the furious competition in the market)
Well-designed solutions may solve the problem completely (without
generating new problems), but only in an ideal world
Badly-designed solutions create more problems (negative value)
There might be more badly-designed solutions than well-designed
solutions in the world
There are conflicts, inconsistencies, incompatibilities between
solutions, and therefore new problems are generated
Endless cycle, and exponential increase
Unfortunately the complexity itself is an organic structure like the virus
that scales, grows, and spreads
Can be explained by the chaos theory (chaos can emerge by a group of
individuals interacting with simple rules)
178. Why I Count This As “Half” Philosophy:
What we are able to improve (the pragmatic part):
Try to leverage systems thinking to avoid creating “negative value”
Improve interoperability both internally and externally, to reduce the “conflict
and generate new problems” phenomenon. The SOA concept can apply to not
only the software arena, but also many other areas (e.g. physical products)
Ask the “to design, or not design” question first before you design
Find somewhere else to consume our “surplus of intellect”…
Leave some creativity to the Buddha/God/Brahma/nature/etc., depends on
what ever religion you believe…
What we are not able to change (the non-pragmatic part):
Self-interest (companies survive by “solving” solutions)
Never-ending demands of human being
Now we really have a lot of problems to solve (e.g. global warming problem,
etc.)
179. “
Plurality should not be posited without necessity.
”
Occam's razor
William of Ockham
180.
181. “
The man who grasps principles can successfully
choose his own methods. The man who tries methods,
ignoring principles, is sure to have trouble.
”
Ralph Waldo Emerson
182. “
We must first learn a discipline which teaches us the true
relationship between ourselves and our surroundings. Then,
once this discipline has done its work, we will be ready to give
up the discipline, and act as nature does.
This is the timeless way of building: learning the discipline - and
shedding it.
”
Christopher Alexander
The Timeless Way of Building