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

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

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

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 Wildfire 3” screen 240 x 320 Apple Cinema Display 30” screen 2560 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 ExampleExample 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