Foundamental Elements for Organic UI Design

1. ORGANIC UI DESIGN
by Mirco Pasqualini
December 2002 - First Draft
Jenuary 2010 - Last draft
Organic UI Design by Mirco Pasqualini
http://www.linkedin.com/in/mircopasqualini

2. Foundamentals
Progressive approach
That’s the most important rule for any UI Designer and Architect.
The general dynamic of this argument is “the Interface change
his aspect and complexity proportional to the evolving of User
knowledge about the interface”.
The perfect interface is when it will be customized for each user
and evolving in the time for follow the user experience. The user
found around him only he need.
Ambient determinate the aspect
One of most frequently error starting since the the beginning of
each UI project is the Skin of interface. Very often we spend few
time to understand how our UI design will be display in different
device and how many different use it can have from each user.
Itʼs look like as decide to be an Eskimo (People from North Pole),
were like as an Eskimo and living like as an Eskimo and think to
be able to live in any corner of the world from Africa, to Arabia,
from Pacific to Miami. This is one of the most important needs
of any UI. The Adaptation to the ambient. The adaptation donʼt
change his main function but will determinate the look&feel and
the interactive design behaviors.
Organic UI Design by Mirco Pasqualini
http://www.linkedin.com/in/mircopasqualini

3. Foundamentals
The elements determinate the group comportment
Starting to think at an interface like as a group of single elements,
related them self with a strong property of grouping focused to
a specific job/s. Now think to an UI like as a the people group of
Survival Reality Show, the kind, property and expertise to each
people will be determinate the good life or the death of entire
team.
This is the same things happen in any UI design project; choose
the right UI element, interactive behaviors, how many elements
determinate the result like as put chocolate into the milk for have a
light brown or dark brown result.
Sharing is the engine of evolution
At the base of any evolution process, the “sharing” capabilities,
determinate the good or bad performing in any team. The best
team in the world in any sport will be Football, Basket, Soccer, F1,
etc.., are winner because they move like as “10” but they think like
as “1”. They have a good based sharing knowledge, they have the
same vision, same focus, same target with different roles. Sharing
a method in the same UI or sharing a visual element in more
elements grid make a best performing and make the structure
more light.
Optimize and think Modular
Optimize, Optimize, Optimize. Donʼt have any redundancy of
UI elements, this help you to make a most quickly interface
development and more easy update and customization process
when needed. Think to each grid element like as modular, the
Interface design reflects the typical human activity especially the
mobility, Art and financial rules. In finance for example, when a
modular unit donʼt work well and / or make debit, it will be close
or changed with other without shake other unit parent or father.
Conslusion
Design an UI is exactly like as build a good Soccer team where
you are the Team Manager.
Organic UI Design by Mirco Pasqualini
http://www.linkedin.com/in/mircopasqualini

4. Object Oriented Vision
Objects definition
In any interface grid, any element use and displayed will be Property
considered like as an independent element. Each element will be
linked with other and create a cloud of objects related by the same Function
scope.
Skin
Each object is defined by:
1. Skin
2. Function
3. Property
Behavior
Any elements into an UI have a behavior determined by an event.
Usually this events determinate the behaviors of other elements
and in some case the changed of them. The clean and optimized UI
design architecture determinate too the clean and easy behaviors
organization.
Ambient and Relation
Like as describe in the “Fundamentals” chapter, any elements will
change is Skin for a best adapting to the ambient and group where
it will be place. Usually the information about the Skin is provided
by the ambient, like as a Soccer team provide colored T-Shirt to
each players.
Organic UI Design by Mirco Pasqualini
http://www.linkedin.com/in/mircopasqualini

5. Object Oriented Vision
Complexity & User Knowledge
When you create grid and group elements focused to specific function, think the
discover of this “grid” with a progressive approach. An other variable element of UI
behaviors is the TIME and each USER. The TIME of experience of each user with the
Interface determinate his knowledge of the tool and this is reflect into a sharing of
“work method”, “Workflow” and “UI organization” between the tool and the User.
Is like as talk with a Baby or talk with a professional Developer, the start point will be
different.
Evolving
An other step to consider when you design UI is the evolving of the elements and the
grid in their skill and behaviors.
Directly linked to previous point of “complexity” and “Ambient Relation” the design work,
the look&Feel and architecture of the grid, require to be think into a progress evolution
where very ofter you need to consider “not-programatic-evolutions-step”. Usually this is
translate in “This space will manage future buttons or needs...”
Data UI Data UI Functions UI Display & Devices
Server Connectors Framework Behaviors
Adapter
DEVICE #1
DEVICE #2
DEVICE #3
Organic UI Design by Mirco Pasqualini
http://www.linkedin.com/in/mircopasqualini

6. Development Process
How Start
A good start is collect more information possible about the project/interface focus, the elements/content and the
ambients where it lives. This step i like call “Immersion” because you need to really go in the depth in to the UI
“scope-of-life” and watch this stage with many eyes in all over side possible.
In the Immersion step you need collect:
1. Information about the contents and their self-relations.
2. Define the UI grid you require
3. Define a list a User Profiles (capabilities, device, knowledge, expertise, needs, etc..)
4. Define a list of typical workflow for each user profiles (Make some survey )
5. Do a benchmark between:
• UI do the same work with same content
• UI do the same work with different kind of content
• UI do a similar work with different kind of content but with similar complex relations them self.
6. Identify Interface solutions don’t have any relations with your project for “work” and “content but they represent
and innovation approach if used in your project.
7. Introduce that you identify at point 6. The Interface design is like as a Movie or a Music composition, you require
the main melody & synopsis but you need too the “Whaoo” effect.
8. Create a Visual Wire-frame of the UI and define the grid behaviors for ambient adaptation
9. Optimize the process and define each content details elements to place
10. Prototype the graphical UI merging the UI Needs and introducing the Innovation “elements” Refine and
re-evaluate the GUI with WF for a better match solutions.
Organic UI Design by Mirco Pasqualini
http://www.linkedin.com/in/mircopasqualini

7. Human Kind Approach
That’s the most important rule for any UI Designer and Architect. The general dynamic of this argument is “the
Interface change his aspect and complexity proportional to the evolving of User knowledge about the interface”.
The perfect interface is when it will be customized for each user and evolving in the time for follow the user
experience. The user found around him only he need.
I know this is a redundancy in this document but is the MOST IMPORTANT THING!
Some sample
The rules of Organic Interface is study from many years into digital business. For example from many years in many
Microsoft desktop application like as Office Suite and recently into Adobe Suite, in the application menu, some option
are hidden and the application show you only the main action (some time the most used) at first look. The user can
ask to show all option available only on demand.
Thanks to progress of technology the Apple iPhone realize the vision of many years ago when the UI Designer
understand about the future of UI start from physical products, where the interface will be change.
The iPhone represent the best application of Organic Design. At the begin to the user offer only 1 option: “The start
Button”. After it show him some other option (applications). His Human Interface is great because can change basing
the use you want do of device (phone-call, gaming, messaging, etc..)
To talk more friendly when you meet a new people the first thing you say is “What’s your name?” and not “Which is
the formula will explain the black matter into the black hole and hidden macro Cosmo?”
Organic UI Design by Mirco Pasqualini
http://www.linkedin.com/in/mircopasqualini

8. Credits
Organic UI Design
Created by Mirco Pasqualini
Email: mircopasqualini@me.com
Skype: mircostudio
LinkedIn: http://www.linkedin.com/in/mircopasqualini
Versione 1.0
All the abstract wallpaper picture used here are from
http://www.your-majesty.com/
NOTE: I pray you to excuse me for my incorrect syntax
form but english is not my native language
Organic UI Design by Mirco Pasqualini
http://www.linkedin.com/in/mircopasqualini