Embed Size (px)
Citation preview
mStoner
From Guesswork to Gestalt:Designing for the BrainSeptember 2014
m
Agenda
UNDERSTANDING GESTALTFROM AN EVOLUTIONARY PSYCHOLOGY STANDPOINT
GIVING GOOD FEEDBACKUSING GESTALT PRINCIPLES
m
UNDERSTANDING GESTALTFROM AN EVOLUTIONARY PSYCHOLOGY STANDPOINT
m
Main Principles
Emergencethe whole is identified before the parts
Reificationour mind fills in the gaps
Multi-stabilitythe mind seeks to avoid uncertainty
m
Proximity
Similarity
Common Fate
Figure/Ground
Symmetry & Order
Proximity
m
Proximity
Elements tend to be perceived as aggregated into groups if they are near each other.
m
Proximity
Sitting designed by Jacqueline Steck from the Noun Project
Three hungry hunter-gatherersThe arrangement of this berry harvest might cause a fight.
m
Proximity
Sitting designed by Jacqueline Steck from the Noun Project
Three hungry hunter-gatherersThis arrangement establishes ownership by proximity
m
Proximity
Social Icons:Links to social networks or ways to share content?
m
Elements tend to be integrated into groups if they are similar to each other
Similarity
m
Frogs that are safe to eatFrogs of similar colors have similar levels of poison
Similarity
m
Frogs that are safe to eatFrogs of similar colors have similar levels of poison
Similarity
DON’T EAT! EAT!
m
Type hierarchy & use of color both helpUsing headings that have visual similarity aids scanning and helps us understand the most important info on the page
Similarity
m
Common Fate
When we see a number of objects moving together, then we assume they are connected and perceive the group as a single item.
m
These deer seem to have a consistent, predictable direction.A bystander would feel safe.
Common Fate
Person designed by Juan Pablo Bravo from the Noun Project
m
Being immediately aware of a sudden break in that predictability is relevant to the bystander’s safety.
Common Fate
!
m
This hyper-awareness of things moving against the stream or at a different speed can lend a sense of priority to certain aspects.
Common Fate
m
Figure/Ground
Elements are perceived as either figures (distinct elements of focus) or ground (the background or landscape on which the figures rest).
m
Pile of leaves, or death by snakebite?Without the ability to recognize the difference between something in the foreground versus something in the background, we’d have a tough time surviving.
Figure/Ground
Snake designed by Verena Gutentag from the Noun Project
m
Pile of leaves, or death by snakebite?In design, providing a clear figure/ground relationship makes things comfortingly clear to the user.
Figure/Ground
m
Legibility is all about the figure/ground relationship.
Figure/Ground
Magazine
m
2014 Communication Arts Winner’s Gallery
Figure/Ground
http://www.commarts.com/SearchOn.aspx?colpg=0&col=1223&inum=400
m
Symmetry & Order
There is a limit to the amount of information that the mind can keep track of. When the amount of visual information becomes too great the mind tries to simplify by grouping. Groups are formed in logical ways based on patterns and where the various items are located.
m
Symmetry & Order
In nature, symmetry & order equal survival.1. Symmetrical beings are perceived to have better genes.2. An ordered environment is safer.
>
>crack!
No way to hunt means no
food today.
Face designed by Edward Boatman from the Noun ProjectMan designed by Simon Child from the Noun Project
m
Symmetry & Order
Clear space allows our brains to create a sense of order.
m
Symmetry & Order
Content symmetry can help communicate equal hierarchy.
Two Deans Two Programs
m
GIVING GOOD FEEDBACKUSING GESTALT PRINCIPLES
m
Types of Feedback
Observational: observing a problem WITHOUT offering a solution
I’m noticing that the title of the event doesn’t jump out at me.
If you’re not a designer and you’re managing an experienced designer, this is a better course of action
m
Types of Feedback
Prescriptive: identify a problem AND offer a solution
Make that bigger and red!
Don’t offer this type until after asking “Did you consider______________?”
Can be helpful when time is tight and designer doesn’t have time to troubleshoot.
m
Student Org Camping Trip!
October 16-18Lake Winnipesaukee
S’mores, new friends, and you!
Email [email protected] by Oct 1 to register.
CAMPING FLYERRaw materials
Craig Deakin via Instagram ift.tt/O8Ut86
m
October 16-18Lake Winnipesaukee
S’mores, new friends, and you!
[email protected] by Oct 1 to register.
CAMPING FLYER1st draft
Student Org Camping Trip!
GESTALT FOCUSED FEEDBACK
• I’m not sure there’s a clear enough contrast on the lower text area. It’s a bit hard to read. (figure/ground)
• It’s tricky to understand that the When/where/what/how labels are related to the text on the right. (proximity)
•My eye goes right to the text Student Org. Is that more important than all other text? (order)
When & Where:
What:
How:
m
CAMPING FLYER2nd draft
Campfire designed by Megan Sheehan from the Noun Project
S’mores, new friends & you!
Join the Student Org Camping Trip to Lake Winnipesaukee!Register: [email protected] by Oct 1
16 -18OCT
GESTALT FOCUSED FEEDBACK
• Great figure/ground contrast.
• Removing the Who/What/How labels simplified the text. I like how the top headline has a lot of room to breathe, without crowding the image or other text. (proximity)
• Using the blue overlay along the bottom really helps contain the flyer details. (order)
m
Long document of links and information
R.A. LANDING PAGERaw materials
Document designed by Maximilian Becker from the Noun Project
Photo gallery from move-in day
m
R.A. LANDING PAGE1st draft
GESTALT FOCUSED FEEDBACK
• I like the photo! But the page feels a bit off-balance to me. I’m not quite sure where my eye should go first. (symmetry/order)
• The portal link is positioned right after a colon in the body text, so I found myself trying to connect those two content areas. (proximity)
•Because of the inconsistencies across headings, I’m not sure how this information is supposed to be grouped. I also can’t tell the photo caption from the body text. (similarity)
•Because the portal link introduces movement, it draws more attention that it should. (common fate)
LOGONAVIGATION LINKS | NAVIGATION LINKS | NAVIGATION LINKS | NAVIGATION LINKS
Welcome Resident Advisors!The Resident Advisor assumes an active leadership role in developing and maintaining a positive community environment within the residence halls. He or she serves as a role model and resource person in assisting students in their education, personal growth, and sense of belonging in the residence hall community.
The daily life of a Resident Advisor includes but is not limited to:
Developing positive relationships with all residents and knows them on a personal levelFostering a floor environment conducive to learning and academic successCommitting to developing a community that is safe, open, inclusive, and supportive for a diverse student populationManaging your floor’s presence on the portal
Login to Portal
RESPONSIBILITIESThe following are areas in which RAs have responsibilities: COMMUNITY BUILDING, STUDENT DEVELOPMENT , ACADEMIC, RESOURCE AND REFERRAL, POLICY ENFORCEMENT, TEAMWORK, ADMINISTRATIVE
Your floor may benefit from these links:
Health and Wellness Center | Recreation Center | Academic Support Center
Our energetic Move-In staff gets a bright and early start to the day!
Photo: Flickr: Move In Day 2011 - Nazareth College, Rochester, NY
m
R.A. LANDING PAGE2nd draft
LOGONAVIGATION LINKS | NAVIGATION LINKS | NAVIGATION LINKS | NAVIGATION LINKS
Login to Portal
Our energetic move-in staff gets a bright and early start to the day!
Welcome Resident Advisors!
The Resident Advisor assumes an active leadership role in developing and maintaining a positive community environment within the residence halls. He or she serves as a role model and resource person in assisting students in their education, personal growth, and sense of belonging in the residence hall community.
YOUR CHARGE RUN A TIGHT SHIP
The following are areas in which RAs have responsibilities:
•Community Building•Student Development•Academic•Resource And Referral•Policy Enforcement•Teamwork•Administrative
DAY-IN-THE-LIFE
• Develop positive relationships with all residents and know them on a personal level
• Foster a floor environment conducive to learning and academic success
• Commit to developing a community that is safe, open, inclusive, and supportive for a diverse student population
• Managing your floor’s presence on the portal
SUPPORT YOUR FLOOR
Make sure your floor knows about these resources:
• Health and Wellness Center
• Recreation Center • Academic Support
Center • Homecoming
Schedule• Parents Day
Guidelines
Did you know you’re the one who manages your floor’s portal?
Login to Portal↠
GESTALT FOCUSED FEEDBACK
• Everything is easy to read and the page is much more balanced! (figure/ground/symmetry)
• Now I understand why the portal link was there. The nearby explanatory text helps a lot. Removing the movement allows it to blend a bit more. (proximity/common fate)
•Creating a consistent header style and clearer type hierarchy really makes the purpose of each column clear. (order)
m
R.A. LANDING PAGEResponsive
Applying the same feedback and thought process to each viewport may cause significant differences in layout. That’s a good thing!
mStoner
From Guesswork to Gestalt:Designing for the BrainThank you!
E Learning designed by Attilio Baghino from the Noun Project
