PBA Front-End Week 6. Gestalt Laws The standard page compo- sition ”pattern” seems to be...
-
Upload
allan-todd -
Category
Documents
-
view
217 -
download
0
Transcript of 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