order
DESCRIPTION
Order concepts for web designersTRANSCRIPT
WEB DESIGNMater of Arts in Communication Design
Order & equilibrium
WEB DESIGN NABA 2014 Roberto DADDA 2 Order
"Order." Merriam-Webster.com. Merriam-Webster, n.d. Web. 12 Feb. 2014. <http://www.merriam-webster.com/dictionary/order>.
"Disorder." Merriam-Webster.com. Merriam-Webster, n.d. Web. 12 Feb. 2014. <http://www.merriam-webster.com/dictionary/disorder>.
WEB DESIGN NABA 2014 Roberto DADDA 3
Disorder gives the idea of complexity
Order
WEB DESIGN NABA 2014 Roberto DADDA 4
Ordered complexity!
Order
WEB DESIGN NABA 2014 Roberto DADDA 5
We need order AND simplicity!
Order
WEB DESIGN NABA 2014 Roberto DADDA 6 Order
Everything Should Be Made as Simple as Possible, But Not Simpler
Albe
rt E
inst
ein,
14
Mar
ch 1
879
– 18
Apr
il 19
55)
WEB DESIGN NABA 2014 Roberto DADDA 7 Order
WEB DESIGN NABA 2014 Roberto DADDAOrder 8
WEB DESIGN NABA 2014 Roberto DADDA
Information density
Order 9
usefull infototal info
too low
too high
• Waste of precious screen space
• Two many click• Impession of loosing time• STM needed to understand
correlation between pages and pages elements
• Impression of confusion• STM needed to undertand
page elements• Difficult to remember• Download time rises
EQUILIBRIUM!
WEB DESIGN NABA 2014 Roberto DADDA 10
Grid usage, clean design & test with user’s
Order
WEB DESIGN NABA 2014 Roberto DADDA 11
Let’s learn from video makers
Order
http://userinterfaced.com/designing-video-information-density-for-optimum-audience-engagement/
WEB DESIGN NABA 2014 Roberto DADDA 12
Contrast & user’s focus
Order
With color, dimension, shape… contrast we may attract the user attention on elements and information flow direction.
Joan
MIR
O, S
tars
in S
nails
' Sex
es 1
925
WEB DESIGN NABA 2014 Roberto DADDA 13 Order
WEB DESIGN NABA 2014 Roberto DADDA
In page design…
• Identify element’s correlation, connection and order using the laws of Gestalt
• Use de facto general standards
• Use reasonable local standards
• Evoid useless information
• Minimize cognitive loadOrder 14
WEB DESIGN NABA 2014 Roberto DADDA 15
Balanced design
Order
NONEXISTENT CAOS
TOO MUCHCORRECT
R u l e sD
e s
i g
n e
f f o
r t
simple complex
triv
ial
deep
WEB DESIGN NABA 2014 Roberto DADDA 16
Graphics for usability, the goals• Be easy to read (text and images) for all the expected
users• Help to understand structure of page giving to the user a
sensation of simplicity • Help to associate homogeneous content elements• Use visual codes usual for the expected users and
coherent• Use coherent visual codes inside the pages ecosystem• Avoid redundancy• Avoid ambiguity
Order
WEB DESIGN NABA 2014 Roberto DADDA 17
Noise and chaos
• Noise• Avoid the usage of useless visual
elements that divert the attention from the meaningful ones
• Chaos• Avid putting too many elements
together, they will interfere!
Order
WEB DESIGN NABA 2014 Roberto DADDA 18Order
Dad
a or
Dad
aism
was
an
art m
ovem
ent o
f the
Eu
rope
an a
vant
-gar
de in
the
early
20t
h ce
ntur
y.
WEB DESIGN NABA 2014 Roberto DADDA 19 Order
WEB DESIGN NABA 2014 Roberto DADDA 20
Contrast, alikeness, stratification
• Contrast• Use it to differentiate elements and make the
user focus where needed
• Alikeness• Group with this gestalt law correlated and
homologous elements
• Stratification• Visual layers help users to identify logical
correlation and background
Order
WEB DESIGN NABA 2014 Roberto DADDA 21
Structure and visual journey
• Structure• Use graphics elements, shape and
position to make content structure and elements correlations evident (Grid, alignment, panes…)
• Visual journey• Give to the customer the possibility of
perceiving interaction as a logical journey easy to find and to remember.
Order
WEB DESIGN NABA 2014 Roberto DADDA 22 Order
WEB DESIGN NABA 2014 Roberto DADDA
Consistence & contest
• Consistence• Let’s call the same elements with
the same names, symbols, colors, shapes…
• Context• Adapt symbols to the contest and
to the attended user’s
Order 23
WEB DESIGN NABA 2014 Roberto DADDAOrder 24
Roberto Dadda
[email protected]+39 338 775 22 03Twitter, facebook, linkedin: robertodadda