UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN...
Transcript of UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN...
![Page 1: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/1.jpg)
A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN
UI THAT ROCKS
![Page 2: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/2.jpg)
![Page 3: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/3.jpg)
![Page 4: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/4.jpg)
USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD.
A UI THAT ROCKS IS A UI THAT DOESN’T MAKE YOUR USERS THINK.
![Page 5: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/5.jpg)
![Page 6: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/6.jpg)
Gestalt psychology
COMPLEX IMAGES TEND TO BE REDUCED TO SIMPLER SHAPES
GESTALT PRINCIPLES DESCRIBE HOW THE HUMAN EYE PERCEIVES VISUAL ELEMENTS
![Page 7: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/7.jpg)
Gestalt psychology
WE PERCEIVE THE WHOLE OBJECT BEFORE THE COMPONENT PARTS
PERCEPTUAL ORGANISATION UNDERLIES HUMAN PERCEPTION
![Page 8: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/8.jpg)
THE WHOLE IS OTHER THAN THE SUM OF ITS PARTS
Kurt Koffka
WE IDENTIFY WHOLE MEANINGFUL OBJECTS IMMEDIATELY AND WITHOUT CONSCIOUS EFFORT
![Page 9: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/9.jpg)
Gestalt psychology
WESTERN DESIGN THEORY IS BASED ON GESTALT PRINCIPLES
MANY OF THE DESIGN PRINCIPLES WE FOLLOW ARISE OUT OF GESTALT THEORY
![Page 10: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/10.jpg)
EMERGENCE SIMPLE SHAPES ARRANGED TOGETHER CAN CREATE A MORE COMPLEX IMAGE.
![Page 11: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/11.jpg)
THE OVERALL APPEARANCE OF AN ELEMENT MUST ALWAYS TAKE PRECEDENCE OVER THE DETAILS.
PRINCIPLE OF EMERGENCE: TAKEAWAY FOR WEB DESIGN
![Page 12: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/12.jpg)
MULTI STABILITY OUR MIND CAN ONLY INTERPRET ONE VIEW AT ONCE
![Page 13: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/13.jpg)
![Page 14: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/14.jpg)
DON’T MAKE THEM THINK: AVOID AMBIGUITY OR INFORMATION OVERLOAD IN YOUR UI. USABILITY TESTS ARE YOUR FRIEND.
PRINCIPLE OF MULTISTABILITY: TAKEAWAY FOR WEB DESIGN
![Page 15: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/15.jpg)
REIFICATION WE SEE A COMPLETE REPRESENTATION EVEN WITH LIMITED VISUAL INFORMATION
![Page 16: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/16.jpg)
![Page 17: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/17.jpg)
YOUR USERS’ MINDS CAN FILL IN THE GAPS: BOLDLY USE WHITE SPACE AS A DESIGN TOOL.
PRINCIPLE OF REIFICATION: TAKEAWAY FOR WEB DESIGN
![Page 18: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/18.jpg)
INVARIANCE WE RECOGNISE OBJECTS EVEN WHEN THEY DIFFER IN PERSPECTIVE, ROTATION, SCALE…
![Page 19: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/19.jpg)
![Page 20: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/20.jpg)
INVARIANCE, FOR NOW, IS THE EDGE THE HUMAN BRAIN HAS OVER BOTS. ON THE WEB, TYPICALLY USED IN CAPTCHA.
PRINCIPLE OF INVARIANCE: TAKEAWAY FOR WEB DESIGN
![Page 21: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/21.jpg)
Gestalt psychology
SOME PRINCIPLES ARE MORE HELPFUL THAN OTHERS
THE MOST RELEVANT GESTALT PRINCIPLES FOR WEB DESIGN
![Page 22: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/22.jpg)
FIGURE/GROUND WE ARE ABLE TO FOCUS ON ONE PART OF A SCENE FILTERING OUT THE OTHER ELEMENTS
![Page 23: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/23.jpg)
![Page 24: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/24.jpg)
MAKE SURE THAT THE MOST IMPORTANT PARTS OF YOUR UI STAND OUT CLEARLY AGAINST THE BACKGROUND.
FIGURE/GROUND ORGANISATION: TAKEAWAY FOR WEB DESIGN
![Page 25: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/25.jpg)
SIMILARITY THE HUMAN EYE GROUPS TOGETHER ELEMENTS THAT SHARE SIMILAR FEATURES.
![Page 26: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/26.jpg)
![Page 27: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/27.jpg)
UI ELEMENTS THAT PERFORM A SIMILAR FUNCTION / BELONG TO A SAME GROUP SHARE ONE OR MORE VISUAL FEATURE.
LAW OF SIMILARITY: TAKEAWAY FOR WEB DESIGN
![Page 28: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/28.jpg)
PROXIMITY THE HUMAN EYE GROUPS TOGETHER ELEMENTS THAT ARE CLOSE TO ONE ANOTHER IN SPACE
![Page 29: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/29.jpg)
![Page 30: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/30.jpg)
MAKE SURE THAT ELEMENTS THAT BELONG TO A SAME GROUP ARE PLACED IN CLOSE PROXIMITY.
LAW OF PROXIMITY: TAKEAWAY FOR WEB DESIGN
![Page 31: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/31.jpg)
COMMON REGION WE PERCEIVE ITEMS AS GROUPED WHEN THEY SHARE THE SAME CLEARLY DELINEATED AREA.
![Page 32: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/32.jpg)
![Page 33: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/33.jpg)
MAKE UI EASY TO USE BY PLACING GROUPS OF ELEMENTS WITHIN THE SAME CLEARLY DEFINED REGION OF SPACE.
LAW OF COMMON REGION: TAKEAWAY FOR WEB DESIGN
![Page 34: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/34.jpg)
CLOSURE OUR MIND SUPPLIES THE MISSING INFORMATION FOR INCOMPLETE SHAPES
![Page 35: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/35.jpg)
![Page 36: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/36.jpg)
MINIMAL DESIGNS CAN HELP UI BY AVOIDING VISUAL OVERLOAD. LET USERS FILL IN THE GAPS.
LAW OF CLOSURE: TAKEAWAY FOR WEB DESIGN
![Page 37: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/37.jpg)
CONTINUATION THE EYE PERCEIVES THE PATH AS A CONTINUOUS FLOW
![Page 38: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/38.jpg)
![Page 39: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/39.jpg)
USE GESTALT TO MAKE YOUR UI ROCK. ALSO USE IT TO EXPLAIN TO CLIENTS WHY THE LOGO CAN’T BE BIGGER.
GESTALT PSYCHOLOGY: MAIN TAKEAWAY FOR WEB DESIGN
![Page 40: UI that rocks - Piccia Neri...A PRACTICAL INTRODUCTION TO GESTALT PRINCIPLES APPLIED TO WEB DESIGN UI THAT ROCKS USE GESTALT TO MAKE YOUR USERS AVOID COGNITIVE OVERLOAD. A UI THAT](https://reader033.fdocuments.net/reader033/viewer/2022042712/5f9207f9e9b7450d696f43fc/html5/thumbnails/40.jpg)
DON’T MAKE THEM THINK.
GESTALT PSYCHOLOGY: MAIN TAKEAWAY FOR WEB DESIGN