"Seeing vs. Understanding: The Hidden Psychology of Design", Irene Shkarovska, Olha Holubieva

🤔 Looks matter. But do they really help? In design, we often glorify aesthetics, but does making something “pretty” actually make it more usable? This talk breaks down the psychological battle between visual appeal and functional clarity, exploring how design influences both emotion and cognition.

We'll take you through:

- How composition theory shapes both aesthetics and usability.
- Why visual design is crucial for some products but useless for others.
- The role of cognitive load: real reason users click (or don’t).
- How visual triggers manipulate emotions and decision-making.
- The secret to balancing eye candy with functionality to create truly effective design.

🔥 Get ready for a mix of psychology, interaction design, and a few hard truths. If you've ever wondered whether you should lean into visuals or focus on usability—this talk will help you decide.

1. Human
vision
WHY THAT
MATTERS?
is a tool
Iryna ShkarovskaOlha Holubieva

3. What Eye tells to
our Brain?

4. Information

8. Please, don’t think
of a white bear.
Thanks!

9. Brain has patterns,
We can learn them :)

10. Create

11. Create

12. +

13. +

14. Form is r a n g e
of meanings

15. Visual composition, each
element and its properties –
Information.

16. Button

17. By Alan Fletcher

18. Different visual
Complexity =
Different time
to analyze

19. ` ` ` ` ` Parameters & Time
Contrast Location Color Shape Relations Small Details

20. #Challenging
#Clear
#Unexpected
#Appropriate Timing
#Emotional
#Structured
#Harmonized
#Logical

21. Fo — Conditional "form coefficient" (e.g. how
visually complex or important the design is)
Fu — "Function coefficient" (how complex or
critical functionality is)
P (0…1) — The fate of "personal perception"
that will shift the emphasis either to form or
to function.
Ratio =
Fo × P
Fu × (1 – P )
>1 — The "weight" of the form prevails
<1 — The function is more important over form
=1 — They are balanced

22. M=O/C
M is the aesthetic measure → beauty
O is order (symmetry, balance, and regularity)
C is complexity (amount of information or detail in a design)
chaos ! < M < booored "
Aesthetic Measure by George David Birkhoff

23. While it’s not used in an exact
mathematical sense, its principle
—balancing order and
complexity—helps designers
create aesthetically pleasing
experiences.
order
complexity

24. •Lacking essential elements
•Lacking structure, poorly
arranged
•The design or concept doesn’t
feel intentionally simple (like
good minimalism) but rather
unfinished, as if something is
missing

25. order
complexity
↓ order
↓ complexity
dumbed down,
unfinished,
efficient

26. •Clean, structured, minimal
•Uses hierarchy and white
space effectively

27. order
complexity
↑ order
↓ complexity
simple, focused
unengaging

28. •Chaotic
•No CTA
•Frustrating
•Overwhelming

29. •Non legible
•Overwhelming
•Not boring

30. •Colors convey additional
information
•Too dense and overcrowded
with text
•Minimal visual hierarchy
•Outdated aesthetic
•Lack of whitespace and
separation
•Steep learning curve

31. order
complexity
↓ order
↑ complexity
lack visual
hierarchy,
overwhelming

32. •Clean, organized layout
•Good visual contrast with
effective color coding
•Information-dense but well-
structured
•CTA buttons are clearly
highlighted
•Well-balanced use of text and
iconography
•Quite complex but structured.
•Uses a strict grid

33. order
complexity
↑ order
↑ complexity
complex,
structured

34. order
complexity
←
landing
pages

35. Most common
Form & Function
ratio in design
areas:
UI/UX
Brand & MarketingInterior
Industrial
Manufacturing
Entertainment
Motion
*Analyzed with Deep Research (O1 model)
1:2
3:1
1:1
1:3
1:4
2:1
2:1

36. WRONG RATIOORIGINAL

37. Original

38. Harmony
Ratio:
60: 30 :10
Main space/Dominant color
Repetitive patterns
Long descriptions text
Headers & highlighted information
Secondary color
Key forms/primary group
Focal points/Accident font
Accent color/element
Call to actions/icons
60 30 10

39. Color
Type hierarchy
Negative space
Form size & complexity
User actions rhythm

40. BLUE
BLUE

41. YELLO
YELLOW

42. GREY
GREY

43. RED
RED

45. Aesthetic-
Effect
Usability

47. → Perceived Ease
Attractive = Engaging & Reliable
Positive
Emotions
Associations → Perceived Value

48. Dont’sDo’s
● Overdesigned = Confusing.
If aesthetics are prioritized over function
(e.g., fancy animations, excessive visuals),
the UX can suffer.
● Low Contrast = Hard to Read. Some
modern “pretty” designs use low-contrast
text, subtle buttons, or minimalist input
fields that sacrifice readability.
● Unfamiliar Interactions. Overly creative
UI patterns (e.g., hidden menus, abstract
icons) can make navigation harder.
● Clarity Through Visual Hierarchy. A
well-designed UI uses spacing, contrast,
typography, and colors to guide the user’s
attention → reduces cognitive load
● Emotional Connection & Trust.
People associate good design with
professionalism and reliability.
● Consistency & Predictability. A
visually pleasing design often follows good
design principles → help users recognize
patterns and reduce friction.

61. order
complexity
balancing order
& complexity

62. order
complexity

63. order
complexity

64. order
complexity

65. order
complexity
space for
improvemnt

66. order
complexity
space for
improvemnt
●
Cognitive load
should align with the context
●
If something is designed
poorly, its perceived functionality
will decrease

67. Why do you need to
train visual basics?

68. #9 Hours Passed
#Візьму Google Fonts
#Щось Не Те
#Я Ж Не Віжуал
#Як Небуло Стайл Гайду?
#Right or Left?
#Contr… What?
#А Що Не Те?
#Графема?#Clients Сhoice V.24
#FigmaColorGenerator
#Візьми Піпеткою З Фото
#ЗроблюзСинім
#Це Ж Не Брендинг
#Це Ж Вайр
#Cітка?
#Scrolling Pinterest
#Align Center
#V27_New_Updated
#V_24.3.1.2
#Пошукаю на Dribbble
#GPT Image
#Спробуй А Iшкою

69. Familiar?

72. #Before #After

73. Bye-
Bye,
Guys!
THANKS
FOR
BEARING
US:)