designing with the mind in mind - college of wooster

Designing with the Mind in Mind

Chapters 1 to 3

Presented by : Gunjan Joshi

October 13th 2020

- JEFF JOHNSON

1

Overviewu Chapter 1 - Our Perception is Biased

u Perception Biased by Experience

u Perception Biased by Current Context

u Perception Biased by Goals

u Taking Biased Perception into account when designing

u Chapter 2 – Our Vision is Optimized to See Structureu Proximity

u Similarity

u Continuity

u Closure

u Symmetry

u Figure/Ground

u Common Fate

u Combined

u Chapter 3- We Seek and Use Visual Structure

u Structure Enhances People’s Ability to Scan Long numbers

u Data-specific Controls provide even more Structure

u Visual Hierarchy lets People Focus on the Relevant Information2

Chapter 1Our Perception is Biased

u Perceptions are heavily biased by 3 factors:

u The past: our experience

u The present: the current context

u The future: our goals

3

Perception Biased by Experience

u Past perceptions can bias current perception is different ways

Perceptual Priming• When perceptual system has been primed to see

a rabbit, you see a rabbit.

• When perceptual system has been primed to see a duck, you see a duck.

• What you see depends on what you were told to see.

• Perceptual priming are not limited to visuals only.

• Example: “New Vaccine Contains Rabies” might be understood differently by people.

• People who had recently heard stories about contaminated vaccines might interpret it differently than by people who had recently heard stories about successful uses of vaccines to fight diseases.

Image taken from The Independent https://www.independent.co.uk/news/science/duck-or-rabbit-100-year-old-optical-illusion-tells-you-how-creative-you-are-a6873106.html

4

Familiar Perceptual Patterns or frames

§ We spend most of our lives in familiar situations.

§ Repeated exposure these situation builds a pattern in our minds- perceptual patterns or frames.

§ These mental frames bias our perception to see objects expected in each situation.

§ Example: We know most rooms in our homes very well- how they are laid out and where our objects are located.

§ Our experience with homes is broader, we have a pattern for homes in general. We expect to see a stove and a sink in the kitchen and a shower, a bathtub, a toilet, a sink in the bathroom.

§ If you visit a house in which there is no stove in the kitchen, you might nonetheless later recall seeing one, because your mental frame for kitchens has a strong stove component.

§ The ‘Next’ button in the last multistep dialog box is switched, many people would not immediately notice it.

§ Consistent placement of controls is a common user-interface guideline, to ensure that reality matches the user’s frame for the situation.

5

Image taken from the textbook: Designing with the mind in mind

Habituation

• Repeated exposure to the same perceptions reduces our perceptual system’s sensitivity to them.

• People get habituated to a range of activities.

• We get habituated in computer usage when we install something, and we always get a window for End-user License Agreement or delete something and get a window with a ‘Are you sure you want to delete this file?’.

Attentional Blink

• After we spot or hear something important, we are nearly deaf and blind to other stimuli for a very brief period (0.15-0.45 seconds) after recognizing the first information, even though our ears and eyes stay functional.

• Thought to be caused by brain’s attention and perceptual mechanism briefly being fully occupied with processing the first information.

• Example: You plan to meet two friends of your friends at a station. As the train arrives, your subway car passes one of your friends, and you spot him briefly through your window.

• In the next split second, your window passes your other friend, but you fail to notice her because her image hit your retina during the attentional blink that resulted from your recognition of your first friend.

First image taken from https://help.zend.com/zendstudio/current/content/installing_zend_studio_on_windows.htmSecond image take from http://completesolution24.blogspot.com/2011/12/how-to-

disableinactive-you-sure-you_25.html

6

https://help.zend.com/zendstudio/current/content/installing_zend_studio_on_windows.htm

Perception Biased by Current Context

• The word in which a character appears may affect how we identify the character.

• The same character is perceived as H or A depending on the surrounding letters.

• Comprehension of a sentence or a paragraph can influence what words we see in it.

• The same letter sequence can be read as different words depending on the meaning of the surrounding paragraph.

• Biasing of perception by the current context works between different senses too.

• Example: Ventriloquists learn to talk without moving their mouths much. As a result, viewers’

brains perceive the talking as coming from the nearest moving mouth: that of the ventriloquist’s puppet.

• The pattern of recognizing a letter, a word, or an object is caused by input from the neural activity

stimulated by the context- the context includes other objects and events or even memories.

Images taken from the textbook: Designing with the mind in mind

7

Perception Biased by Goals

• Our perception is influenced by our goals and plans.

• Goals guide our perceptions – we sample what we need from the world around us.

• Goals filter our perceptions – things unrelated to our goals tend to be ignored preconsciously,

and never register in our conscious minds.

When asked to look for a screwdriver in the picture, we immediately find the screwdriver ignoring everything else.

Image taken from https://www.popularmechanics.com/home/tools/reviews/g1760/50-tools-everyone-should-own/

8

The mechanisms by which our current goals bias our perception are:

u Influencing where we look

You are asked to do the following :

Find information about courses for international students

-either go the tab that says Information for international students

- Or use the search bar on top right

You ignore anything unrelated to your goal.

u Sensitizing our perceptual systems to certain features

Example : When you are looking for a red car in a large parking lot,

red cars will seem to pop out as you scan the lot, and cars of other

colors will barely register in your consciousness, even though you do

in some sense see them. Images taken from the textbook: Designing with the mind in mind

9

Taking Biased Perception into Account when Designing

Avoid Ambiguity

• Avoid ambiguous information displays

• Test your design to verify that all users interpret the display in the same way

• Rely on standards or conventions in circumstances where ambiguity is unavoidable

Be consistent

• Place information and controls in consistent locations

• Controls and data displays that serve the same function on different pages should be placed in the same position on each page

• Controls should also have the same color, text fonts, shading, and so on

Understand the goals

• Realize that users’ goals may vary, and that their goals strongly influence what they perceive

• Ensure that at every point in an interaction, the information users need is available, prominent, and maps clearly to a possible user goal

10

Chapter 2Our Vision is Optimized to See Structure

u Human vision is holistic.

u Our visual system automatically imposes structure on visual input and is wired to perceive whole shapes, figures, and objects rather than disconnected edges, lines, and areas.

u This is also known as Gestalt principles of visual perception.

11

Gestalt Principle : Proximity• The relative distance between objects in a display affects our perception of whether and how the

objects are organized into subgroups.

• In figure A, the stars are closer together horizontally than they are vertically, so we see three rows of stars,

• In Figure B, stars are closer together vertically than they are horizontally, so we see three columns.

• Items on a display can be visually grouped simply by spacing them closer to each other than to other controls, without group boxes or visible borders

• This reduces visual clutter in a user interface

• If connected controls are too far apart people will have trouble perceiving them as related,

making the software harder to learn and remember.


12

Gestalt Principle: Similarity

• Objects that look similar appear grouped.

• The slightly larger, “hollow” stars in the image are perceived as a group.

• In the Page Setup dialog box in MacOS application:

• The three very similar and tightly spaced Orientation settings are clearly intended to appear grouped.

• The three menus are not so tightly spaced but look similar enough that they appear related even though that probably wasn’t intended.

• Users know exactly what these settings map to.


13

Gestalt Principle: Continuity

• Our visual perception is biased to perceive continuous forms rather than disconnected segments

• Our visual system has tendency to resolve ambiguity or fill in missing data to perceive whole objects.

• Our visual system fills in the missing spaces for the ‘I’, ‘B’ and ‘M’ in the logo.

• It is not at all ambiguous; it is easily seen as three bold letters.

• Slider controls are a user-interface example of the Continuity principle.

• We see a slider as depicting a single range controlled by a handle that appears somewhere on the slider, not as two separate ranges separated by the handle.


14

Gestalt Principle: Closure

• Our visual system automatically tries to close open figures so that they are perceived as whole objects rather than separate pieces.

• Related to Principle of continuity.

• We see the combination of shapes in the figure as a white triangle overlapping another triangle and three black circles

• The figure only contains three V shapes and three black Pac-men but we see a combination of shapes.

• Icons depicting stacks of objects exhibit the Closure principle: partially visible objects are perceived as whole.

• The files inside the folder are perceived as whole even though they are partially visible.


Image taken from HowtoGeekhttps://www.howtogeek.com/63359/how-to-customize-folder-backgrounds-and-icons-in-windows-explorer/

15

Gestalt Principle: Symmetry • We tend to parse complex scenes in a way that reduces the complexity.

• The data in our visual field usually has more than one possible interpretation

• Our vision automatically organizes and interprets the data to simplify it and give it symmetry

• Example, we see the complex shape in the figure as two overlapping diamonds.

• Not as two touching corner bricks or a pinch-waist octahedron with a square in its center.

• A pair of overlapping diamonds is simpler than the other two interpretations shown on the right.

Gestalt Principle: Figure/Ground• Our mind separates the visual field into the figure (the foreground) and ground (the background).

• The foreground consists of the elements of a scene that are the object of our primary attention, and the background is everything else.

• When objects overlap, we see the smaller as the figure(the small blue triangle) and the larger

as the ground (the large orange circle).

• Our perception of figure versus ground is not completely determined by scene characteristics.

• It also depends on the viewer’s focus of attention.

• Pop-ups and watermarks behind the contents act as examples for this principle in user

interface.Images taken from the textbook: Designing with the mind in mind

16

Gestalt Principle: Common Fate

• The previous six Gestalt principles concerned perception of unmoving figures and objects.

• Related to the Proximity and Similarity principles— it affects whether we perceive objects as grouped.

• The Common Fate principle concerns moving objects

• The principle states that objects that move together are perceived as grouped or related.

• Example: In the figure showing dozens of pentagons, if seven of them wiggled in synchrony, people would see them as a related group, even if the wiggling pentagons were separated from each other and looked no different from all the other pentagons.


17

Gestalt Principle: Combined

• In real-world visual scenes, the Gestalt principles work together, not individually.

• For example, the Mac OS desktop usually shows the following principles : Proximity, Similarity, Continuity, Closure, Symmetry, and Figure/Ground.

• Common Fate is used (along with similarity) when a user selects several files or folders and drags them as a group to a new location


18

Chapter 3We Seek and Use Visual Structure

u When information is presented in a terse, structured way, it is easier for people to scan and understand.

u The more structured and terser the presentation of information, the more quickly and easily people can scan and comprehend it.

u For information displays to be easy to scan, they must also conform to the rules of graphic design.

19

Structure Enhances People’s Ability to Scan Long Numbers

• Information can be made easier to scan if they are structured.

• A long number (like telephone and credit card) can be broken up in two ways:

Ø the user interface breaks it up explicitly by providing a separate field for each part of the number

Ø the interface provides a single number field but lets users break the number into parts with spaces or punctuation

• Systems that do not segment the numbers or do not allow users to include spaces or other punctuation, makes it harder for people to scan a number or verify that they typed it correctly.

• Segmenting data fields can provide a useful visual structure

• Dates are an example of a case in which segmented fields can improve readability and help prevent data entry errors

20 Images taken from the textbook: Designing with the mind in mind

Data-Specific Controls Provide Even More Structure

• A step up from segmented data fields

• Instead of using simple text fields, designers can use controls that are designed specifically to display (and accept as input) a value of a specific type

• For example, dates can be presented (and accepted) in the form of menus combined with pop-up calendar controls

• Email address field that uses segmented text fields with data-specific controls

21Images taken from the textbook: Designing with the mind in mind

Visual Hierarchy Lets People Focus on the Relevant Information

• The most important goal in structuring information presentations is to provide a visual hierarchy

• Visual hierarchy should :

u Break the information into distinct sections, and break large sections into subsections

u Label each section and subsection properly in such a way to clearly identify its content

u Present the sections and subsections as a hierarchy, with higher-level sections presented more strongly than lower-level ones

• Enhances scannability allowing people to instantly separate what is relevant to their goals and focus their attention towards it

• They find what they are looking for more quickly because they can easily skip everything else

• Example : In the information display, if we require information about Content Relationship, it is significantly easier to find the required information in the hierarchical presentation.

22


• Visual hierarchy is extremely important in interactive control panels and forms.

• The example consists of dialog boxes from two different music software products –Band-in-a-Box and GarageBand.

• The Reharmonize dialog box of Band-in-a-Box has poor visual hierarchy, making it hard for users to find things quickly.

• In contrast, GarageBand’s Audio/MIDI control panel has good visual hierarchy, so users can quickly find the settings they are interested in.

23


Discussionv Have you ever noticed a bad visual hierarchy in any of the software or system

you use? If so, has this bad hierarchy make you stop using such product?

v After reading about the Gestalt Principles, have you noted which principles are followed by the software or system you use?

v Examples of data-specific controls other than dates and email addresses.

v What do we do if ambiguity is unavoidable and the current standards or conventions do not help resolving the ambiguity?

24

designing with the mind in mind - college of wooster

Documents