02-Gestalt Applications in HCI.pdf

Human-Computer Interaction Gestalts Law - Uses in human– computer interaction  Uses in human–computer interaction The gestalt laws are used in user interface design. The laws of similarity and proximity can, for example, be used as guides for placing radio buttons. They may also be use...

Human-Computer Interaction Gestalts Law - Uses in human– computer interaction  Uses in human–computer interaction The gestalt laws are used in user interface design. The laws of similarity and proximity can, for example, be used as guides for placing radio buttons. They may also be used in designing computers and software for more intuitive human use. Law of proximity Items that are located close together are usually perceived as a single group. The items in that group are considered to be distinct and different from items located further away. For example, in the following image, we seem to perceive three separate groups: ooo oo ooo ooooo oo ooo ooooo oo ooooo oo ooooo And in the following image, some of these dots appear to be arranged in rows, and others in columns. ooooooooooo o o o o o o o o o o ooooooooooo o o o o o o o o o o ooooooooooo o o o o o It’s due to their proximity. The distance between the dots making up each row or column is less than the distance between a dot in one row or column and the nearest dot in the next row or column. Applying the law of proximity to user interface design, take a look at this form: Conceptually, each label matches up with a corresponding text-entry field. And yet the labels are so far away from the text-entry fields that the labels appear to form their own group, and the fields appear to form another group. The connection between each label and its corresponding field isn’t perfectly obvious. One way to fix this is to move the labels and fields closer together so that we’re emphasizing the horizontal pairs of labels and fields rather than the two columns: Law of similarity Visual items that share some property or attribute are perceived as belonging together, whereas items with differing properties or attributes are perceived as belonging to different groups. For example, in the following image, you can probably detect three groups, even though the items in those groups aren’t in proximity to each other: Returning to the data-entry form example, if we wanted to improve the form without moving the groups closer together, we could also try making the pairings more explicit by making sure that each label and field share an attribute, like the background color: Law of continuation Visual items that appear to be a continuation of a preceding sequence or line of similar items are perceived as belonging together. As well, once your eye begins following the line or sequence, it will continue doing so until something else catches your attention. For example, the icons on this Eclipse splash screen are arranged to a form a curve that your eye is likely to follow: Law of closure Lines (or visual elements that are repeated to form lines) are more likely to be perceived together as a common visual unit if they appear to form the outline or “closure” of a surface or shape, even if that outline is not complete. The mind fills in any gaps in incomplete shapes, to achieve closure in the form of a familiar shape. Some visual designers suggest that incomplete shapes can create interest; the mind has to do a bit of work to fill in the missing information, and this “puzzle-solving” is apparently captivating and eye-catching. Beyond Gestalt’s laws, additional laws have been proposed, such as: Law of common region (Palmer, 1992) Visual items situated together in demarcated (bordered) regions are perceived as belonging together. For example, in this Print dialog from Microsoft Word, controls are contained in frames; obviously all of the controls in the “Copies” frame belong together and relate to controlling the number of copies: Applying the Gestalt Principle to the Web Design Workflow On the following slides are a few web examples and their respective layout silhouettes. The silhouette view is what the brain identifies as the page shape. Trying to change anything other than the main shape will result, more or less, in the same design... and going back to your client with the same design after they've requested changes will make the client feel that nothing has been done. Law of Proximity The Law of Proximity indicates that elements that are near to each other tend to be perceived as a single unit. This can be very helpful for e.g. if you want to display two categories of elements on a web page of which each has more than one piece of content. Figure 2 shows how this Gestalt Law is used on the UX Booth website to group elements that belong together. Different distances between the elements give us the impression of three columns, of which each contains one teaser per article. Law of Similarity The Law of Similarity claims that elements that appear similar are perceived as one unit. So elements that have for e.g. the same color, shape, or other common characteristics, are perceived to be belonging together. In Figure 3 you can see how CNN uses this Gestalt Law to present different topics within one news category as a unit. Law of Closure The Law of Closure explains why elements are recognized even if they are incomplete or nonexistent. This is due to our previous experiences and prior knowledge about possible shapes and figures, thus mentally we can supplement missing parts of an element. Figure 4 shows how we used this law for our homepage usabilla.com. There is a white background with round corners that runs out towards the bottom of the page. Still, we do not perceive elements at the bottom of the page as falling apart, but we can imagine the content area continues. Law of Good Continuation The Law of Good Continuation can be applied to both the design aspect as well as the content aspect of elements. Eyes can easily and naturally follow elements that are arranged along a continuous line, those elements are therefore perceived as a unit. Figure 5 shows how Concept7 use the Law of Good Continuation on their website. Concept7 use a small arrow (at the bottom right hand side) to direct their users sight. Law of Figure and Ground The Law of Figure and Ground describes how we rather perceive a figure than the background which flows around it. Figure 6 shows how we placed several logos on a colored background. Only the logos are perceived, not the shapes that result from placing the logo on the colored background. Law of Simplicity The Law of Simplicity indicates that elements are always perceived in the most easiest way possible. Simplicity of the whole emphasizes the importance of striking features. This can be used as an advantage on a website. Keep it simple and the focus on what really matters. Law of Symmetry This law comprises the fact the we prefer symmetric appearances over asymmetric ones. Symmetric objects or arrangements are associated with positive aspects such as stability, consistency and structure. Asymmetric arrangements on the other hand give a rather negative impression, like something is wrong, missing, or out of balance. For example, the head of the BBC website uses an abstract picture of a globe in the background to create a harmonious and balanced appearance.