pba front-end week 6. gestalt laws the standard page compo- sition ”pattern” seems to be...

PBA Front-End

Week 6

Gestalt Laws

• The standard page compo-sition ”pattern” seems to be well-established; it works!

• But…why does it work…?• Because it employs many of

the Gestalt Laws

Gestalt Laws

• Gestalt Laws are a part of Cognition Psychology – how we percieve things in the surrounding world

• Gestalt (from German) means ”a whole structure or form, that emerges when a set of smaller, simpler components are combined in a certain way”

• Not a perfect translation…

Gestalt Laws

Gestalt Laws

Gestalt Laws

• The Gestalt Laws are a set of statements about perception of elements in a certain context

• About ten laws – we will discuss some of them in the following

Gestalt Laws

• Law of Proximity• Elements that are close to each other will be

perceived as one single structure

Gestalt Laws

• Is this…• …four vertical columns…• …or…• …seven horizontal rows…• …or…• …28 unrelated dots…?

Gestalt Laws

• Is this…• …four vertical columns…• …or…• …seven horizontal rows…• …or…• …28 unrelated dots…?

Gestalt Laws

• Law of Similarity• Elements that look similar will be perceived as

one single structure

Gestalt Laws

• Is this…• …12 unrelated

columns…• …or…• …six groups of two

columns, alternating between white and yellow?

Gestalt Laws

• Law of Closure• Humans have a tendency to perceive an

incomplete structure as complete (to close or fill the gaps)

Gestalt Laws

• Is this…• …five unrelated

circle fragments…• …or…• …a circle?

Gestalt Laws

• Is this…• …five unrelated

circle fragments…• …or…• …a circle?

Gestalt Laws

• How many triangles do you see in the pictures…?

Gestalt Laws

• Law of Closure (variant)• Elements within a bounding structure will

be perceived as one single structure

Gestalt Laws

• Is this…• …six groups of two

columns, alternating between white and yellow…

• …or…• …three boxes con-

taining a varying number of dots?

Gestalt Laws

• These three laws…– Law of Proximity– Law of Similarity– Law of Closure

• …are used very often in web design!

Gestalt Laws

Law of Proximity:These menu items are related, and are physically close

Gestalt Laws

Law of Similarity:These menu items are related, and they look similar

Gestalt Laws

Law of Similarity:These menu items are related, and they look similar (but different from the other types of menu items)

Gestalt Laws

Law of Closure:Do we have a outline of a box here…?

Gestalt Laws

Law of Closure:Do we have a outline of a box here…?

Gestalt Laws

• Law of Prägnanz (or Good Form)• Humans tend to order a set of elements

into one simple, recognisable form

Gestalt Laws

• Is this…• …a triangle and a

square..• …or…• …three geometric

figures…• …or…• 11 linies…?

Gestalt Laws

• Is this…• …a mysterious face

on the surface of Mars…

• …or…• …just a random

effect caused by light and shadow…?

Gestalt Laws

• Law of Isomorphism (or Past Experience)• Past experience and context has an

influence on how we perceive an element

Gestalt Laws

• Is this…• …the letter ”B”• …or…• …the number 13…?

Gestalt Laws

• You are on a Danish website…• What do you expect to happen, when you

click on these icons…?

Gestalt Laws

• Law of Good Continuation• When there is an intersection between two

or more objects, we tend to perceive each object as a single uninterrupted object

Gestalt Laws

• How did we produce this figure…?

Gestalt Laws

• How did we produce this figure…?

+ =

Gestalt Laws

• How did we produce this figure…?

+ =

Gestalt Laws

• Law of Figure and Ground• We tend to organize our perceptions by

distinguishing a figure from a ground

Gestalt Laws

• Is this…• …a vase...• …or…• …two faces in

silhouette?

Gestalt Laws

http://www.slideshare.net/rogerpitiot/gestalt-theory

Gestalt Laws

Using Contrast

• The Gestalt Laws mainly deal with perception of ”similar” elements (similar appearance, similar position, etc.)

• How do we make something stand out, in order for the user to notice it?

• We can use contrast

Using Contrast

• What is contrast…?• The difference in visual properties that makes

an object (or its representation in an image) distinguishable from other objects and the background…

• or• Things which look different from one another!

Using Contrast

• Types of contrast– Color contrast– Size contrast– Shape contrast– Positional Contrast

Using Contrast

• Color contrast can be useful for clearly separating an area from the background

Using Contrast

• Another type of color contrast is between warm and cool colors

Using Contrast

• We can also use the tint/shade/tone of colors to create contrast– This is important!– This is normal– This is not so important…

Using Contrast

• Using a single color in a black/white graphic creates a strong contrast

Using Contrast

• Size contrast – size does matter!• We usually perceive a large object to be

more important than a small object

Using Contrast

• Size contrast is also extremely common in web typography

–This is important!– This is normal– This is not so important…

Using Contrast

• Size contrast is also extremely common in web typography

–This is important!– This is normal– This is not so important…

Using Contrast

• I wonder what they want us to do…?

Using Contrast

• Humans quickly identify a shape that is different than other, neighbouring shapes

• Can signify that e.g a button has a special function

Using Contrast

• Humans quickly notice if something is ”out of place”

• Similar to shape contrast – use it to signify that e.g. a button does something special

• Often used together with other types of contrast

Using Contrast

Universal Usability

• Two aspects of usability in web design– Enabling the typical user to accomplish her task

as efficiently as possible (the user doesn’t want to spend time on our wesbite)

– Enabling any user to be able to use our website, no matter his limitations

Universal Usability

• Accessibility – making the web accessible for users with disabilities

• W3C – World Wide Web Consortium established the Web Accessibility Initiative (WAI) in 1999

• http://www.w3.org/WAI/

Universal Usability

• Usability – how do we measure that…?– Speed – how quickly can the user accomplish the

desired task– Error rate – how many errors happened during the

process?– Learnability – how easy is it to do again?– Satisfaction – do we want to do it again?

Universal Usability

• User-centered design• The developer is not the

user – the user is the user • Ask the user – but how…?– User focus groups– Task analysis– User testing and feedback– Web analytics

Universal Usability

• User focus groups– Face-to-face meetings with a group of potential

users (target audience)– Get ideas directly from the ”source”– Priorities– Get to know your target audience better– Use during entire process– Managed by Usability Lead, not trivial…

Universal Usability

• Task analysis / User testing– How does a user actually accomplish her task?– What steps are involved?– What information should be available?– Silently observe the user when she tries to

accomplish her task (video, eye-track,…)– Enables us to build ”models” of a task, to be used

in actual design

Universal Usability

• Web analytics (what is it…?)– Tools provided by the website

host to gather information about how your website is being used

– A post-deployment tool, so most useful for ”tweaking” your website design

– Google Analytics

Universal Usability

• Information available from Google Analytics– Users previous website– Keywords used in search engine– Pages visitied on site (and order)– User configuration (OS, browser, screen

resolution, color settings, etc.)– Number of visits by the user– …and more

Universal Usability

• Problems with Web analytics– Caching– Personal user information (age, gender,

disabilities, …)– Why did the user visit your website…?

• Use analytics as supplement, not as your only source of user information

Universal Usability

• How do we manage all this user information?• One strategy: construct a set of ”personas”• A persona is a fictious user – a ”condensate”

of the gathered user information• Construct enough personas to cover the range

of users you want to accomodate• Example

Universal Usability

• So, can we make one website that is– As efficient as possible for the typical user?– Accessible for all users?

• No…and yes!– We still only design and create one website…– …but it is so flexible that it can ”manifest” itself

in an appropriate manner for everybody• Universal Design

Universal Usability

• Principles of Universal Design– Eqitable Use– Flexibility in Use– Simple and Intuitive Use– Perceptible Information

Universal Usability

• Equitable Use• The design is useful and marketable to people

with diverse abilities. Provide the same means of use for all users: identical whenever possible; equivalent when not

• Only diversify when you really need to

Universal Usability

• Flexibility in Use• The design accommodates a wide range of

individual preferences and abilities. Provide choice in methods of use

• The web offers a great deal of flexibility – use it!

Universal Usability

• Simple and Intuitive Use• Use of the design is easy to understand, regard-

less of the user’s experience, knowledge, language skills, or current concentration level. Eliminate unnecessary complexity and arrange information consistent with its importance

• To try achieve a high signal-to-noise ratio…

Universal Usability

• Perceptible Information– The design communicates necessary information

effectively to the user, regardless of ambient conditions or the user’s sensory abilities.

– Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information and provide compatibility with a variety of techniques or devices used by people with sensory limitations

Universal Usability

• Perceptible Information – examples– Provide alternative text for images– Use proper markup for headings, etc.– Provide audio alternative for video– Provide text alternative for audio– Provide ways of regulating text sizes,

contrast, color palette, etc

Universal Usability

Responsive Design

• Is there such a thing as a ”typical user” of our website…?

• With regards to– Screen resolution– Bandwidth– Browser– Plug-ins– …

Responsive Design

• Harder and harder to define a ”typical user”…• …so we should move beyond that!• User ”landscape” defined in terms of personas,

with different habits, platforms, abilities, etc• Our design should provide all personas with a

positive user experience

Responsive Design

• One element in user behavior which is evolving rapidly is choice of platform

• Platform: The device through which the user accesses the website

Responsive Design

Platforms anno 2000

Responsive Design

Platforms today…

Responsive Design

• Today – a very wide range of platforms• A wide range of– Screen sizes– Screen resolutiuons

• Responsive design – the notion of letting the website adapt dynamically to the platform at hand

Responsive Design

• Is that even possible…?

50x pixels

HTC Wildfire3” screen240 x 320

Apple Cinema Display30” screen2560 x 1600

Responsive Design

• How can a website adapt between 240x320 and 2560x1600 resolutions…?– Solution 1: Don’t!– Solution 2: Some elements

static, some dynamic– Solution 3: Everything is

dynamic!

Responsive Design

• Solution 1 – Don’t• What’s wrong with the good ol’ ”this site is

optimised for 1024x768”…?• It reads– ”I’m lazy”– ”I don’t want to do something new”– ”I don’t care about my users”– ”Scroll around or go away”

Responsive Design

• Solution 2: Some elements static, some dynamic

• Status quo for many websites today• Dynamic: layout columns and text• Static: images, menus, etc.• Better, but is still problematic particularly for

”narrow” resolutions

Responsive Design

• Solution 3: Everything is dynamic• When the resolution is changed, (almost)

everything in the layout changes• Not only size, but possibly also position!• Some elements might be replaced or

omitted entirely• Example Example

Responsive Design

• How is it done…(technically)?– Awareness of platform (media query)– Awareness of resolution– Fluid grids– Fluid images– Show/hide content– Dynamic choice of layout

Responsive Design

• Awareness of device and resolution• CSS3 supports ”media query”• Given media and resolution, pick a suitable

layout (defined by CSS)• Isn’t resolution all that matters…?– 1280x720 on 4”– 1280x720 on 12”

Responsive Design

• Fluid images• Change the image according to

available space• ”Raw” resizing of the image• Show/hide portions of the image• Not trivial how to scale an image in

an aesthetically pleasing manner…

Responsive Design

• Dynamic choice of layout• Rearrange or show/hide elements• Biggest concern is usually the

width of the layout• Move column content to the top

of the page• Avoid the horisontal scroll bar!

Responsive Design

• Is that even possible…?• Not in all cases…• …but we can at least

improve the user experi-ence in most cases

Responsive Design