Responsive and Organic Design fundamentals

1. Responsive & Organic design
INTERACTION DESIGN
A referential book such as a handbook or manual.

2. Interaction Design: Responsive & OrganicDesign
INDEX
Responsive Design
Organic Design

3. Interaction Design: Responsive & OrganicDesign
Responsive Design

4. Interaction Design: Responsive & OrganicDesign
Responsive designs can create simple,
consistent user experiences across a
multitude of devices, but they are not
panaceas for future-proofing designs.
Devices proliferate for users, frustrate designers.
The mobile web is exploding. With mobile’s ascendance, businesses
need to prioritize their mobile strategy and investment. But for too many
companies, mobile is still an afterthought, when it should be considered
a more critical investment than their desktop strategy.
What are Responsive and Screen-tailored web design and why
should I care?
Responsive design has emerged as a potential salve to development
complexity, especially as companies are understandably looking for
operational efficiencies. Typically, a site tailored for mobile viewing has
a distinct domain (such as mobile.example.com).
It generally requires a separate code base, its own content and UX
strategy, and a discrete visual design. This means a brand has to build
two separate websites, with potentially double the workload when it
comes to maintenance.
RESPONSIVE

5. Interaction Design: Responsive & OrganicDesign
RESPONSIVE CODING
Code 1 Code 2 Code 3
Code
Screen size tailored approach
Responsive approach
Equal to 3 independent projects
Equal to 1.5 projects

6. Interaction Design: Responsive & OrganicDesign
Responsive design is not limited to the User
Interface only but to the Content and
Experience model as well.
What is Responsive Visual Design (UI)?
Responsive web design allows the layout and content to reformat,
reposition and resize itself in real time. It uses a single code base to
serve HTML based on the user’s device and browsers. It includes fluid
grid, flexible images and media queries to deliberately modify the page
layout for different viewing contexts.
What is Responsive Content Design?
Responsive content design allows the content re-organizing to better fit
the user experience needs in each different devices.
This including option to hide/show specific content group, cut long
sentence and / or identify different call to action based on the screen.
(es: “Sign Up for Join to the community” in the desktop version could
become “Sign Up” on mobile)
What is Responsive Experience Design (UI)?
As well the User Experience steps process change for better fit and
simply the usability in each different screen device especially then the
Human Interface change from pointer (mouse), touch or Selector
(remoto control)
RESPONSIVE

7. Interaction Design: Responsive & OrganicDesign
RESPONSIVE BEHAVIORS Animated Images

8. Interaction Design: Responsive & OrganicDesign
RESPONSIVE VISUAL & CONTENT
Not Responsive Content
Responsive Content
Not Responsive UI
Responsive UI

9. Interaction Design: Responsive & OrganicDesign
RESPONSIVE USER EXPERIENCE (UXD)
Sequential UX
Companion UX
Simultaneous UX
Equal UX VS Responsive UX
Improving UX

10. Interaction Design: Responsive & OrganicDesign
Pros and Cons
There are advantages and
disadvantages to each methodology.
There are several factors an
organization should consider when
deciding which approach to adopt:
RESPONSIVE VS TAILORED
Responsive Traditional
PRO CONS PRO CONS
Single code base requires less
long-terms maintenance
More UX / Schematic Design
constraints
Traditional code bases ensure
UX and Content will be
optimized for specific devices
Code become outdates quickly
as new sizes, resolutions and
form factors arise.
Allow faster adaption to new
screen size
Longer lead time and higher
one-time setup cost
Lower on-time setup costs and
shorter Q/A process
High maintenance costs
Single URL for improve search
ranking and social sharing
experiences
Requires high collaboration
between Interactions, Visual
design and Development
Better devices integration for
locations and touch
Some users may not want a
sperate experience particularly
on tablets
No need to set up server-side
redirects
Harder to integrate IAB standar
Ads
Loading only mobile assets
potentially results faster load
time
Potentially different URL
structures can impact SEO.
Potentially lowers mobile
bounce rates while increase
page views and time spent
May have to make functionally
compromises if user goals vary
between desktop and mobile.

11. Interaction Design: Responsive & OrganicDesign
RESPONSIVE
Businesses need to think carefully about their
users experiences, as well as their overall
business goals, content, organizational
structure and technical expertise.
Businesses need to align organizational structure with the chosen
design framework.
A company that adopts a responsive design approach may also need
to realign its organizational structure and processes.
Responsive design requires Interaction design team & technical
developers to be involved much earlier in the design process to
understand what functionality is feasible.
Content strategists also need to understand how designing for
responsive affects copy, with a need for shorter, more concise
language.
Additionally, reviewing work in responsive design requires ongoing
input across different devices, rather than intermittent wireframe
reviews. Most importantly, digital and mobile departments must be
integrated to make responsive design work.
Being a mobile leader requires choosing the right design framework,
and that choice must be driven by user needs and expectations.
Businesses need to think carefully about their users experiences, as
well as their overall business goals, content, organizational structure
and technical expertise.
For some, these factors will lead to choosing a hybrid approach
combining the best of responsive and discrete methodologies.
Whatever the ultimate approach, businesses must recognize that while
future-proofing is an alluring concept, it remains far from a proven
reality.

12. Interaction Design: Responsive & OrganicDesign
Organic Design

13. Interaction Design: Responsive & OrganicDesign
ORGANIC DESIGN
The Organic Design is a process method to
create easy interfaces and user experience
customized on the consumer knowledge and
environment.
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.
Progressive Approach
Ambient Determinate the aspect

14. Interaction Design: Responsive & OrganicDesign
ORGANIC DESIGN
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.
The elements determinate
the group comportment
Optimize and think Modular

15. Interaction Design: Responsive & OrganicDesign
ORGANIC DESIGN
The Interface change his aspect and
complexity proportional to the evolving of
User knowledge about the product.
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...”
Complexity & User
Knowledge

16. INTERACTION DESIGN DEPARTMENT
Thank you.
Author: Mirco Pasqualini, April 2014