In this presentation we get to know what is a Highly Usable app, and how visual hierarchy and grids contribute to achieve that goal.
Presented @ myNextStep Benelux 2013
11. copyright outsystems @ all rights reserved
Visual Hierarchy
Order in which the human eye
perceives the information
presented
mind
12. copyright outsystems @ all rights reserved
Visual Hierarchy
The brain disassociates objects from one another based in their
physical characteristics
23. copyright outsystems @ all rights reserved
Visual Hierarchy
The brain tries to organize
what is sees
through known patterns
24. copyright outsystems @ all rights reserved
Visual Hierarchy
Layouts should be created
in order to be
processed hierarchically
25. copyright outsystems @ all rights reserved
Visual Hierarchy
header
navigation
main content
secondary
content
footer
1st plane on visual hierarchy
is set by conventions
26. copyright outsystems @ all rights reserved
Visual Hierarchy
header
navigation
main content
secondary
content
footer
If you’re looking for content,
then you focus on this section
and forget the rest
27. copyright outsystems @ all rights reserved
Visual Hierarchy
main content
If you’re looking for content,
then you focus on this section
and forget the rest
28. copyright outsystems @ all rights reserved
Visual Hierarchy
Next plane on visual hierarchy provides a set of clusters of information
29. copyright outsystems @ all rights reserved
Visual Hierarchy
20px
20px
20px
10px
10px
10px
5px
5px
Best if distance multiples are used from plane to plane
20px 10 px 5px
As you drill down from plane to plane, the distance between objects shrinks
Always work with symmetry
be consistent in distances and margins
31. copyright outsystems @ all rights reserved
Visual Hierarchy
Each section has too many objects.
Objects in each section are not closer to each other than to other sections
37. copyright outsystems @ all rights reserved
Grids
Grids have been in use
since Middle Ages
38. copyright outsystems @ all rights reserved
Grids
In the 1950’s the
International Typographic Style
(aka Swiss Style), was created
39. copyright outsystems @ all rights reserved
Grids
The Swiss Style promotes:
Objectivity
Cleanliness
Readability
40. copyright outsystems @ all rights reserved
Grids
Forms the basis of a modular and systematic approach to the layout, making the design process quicker, and ensuring visual consistency between pages