Karl Smith User Experience Architect (UEA) It's all about making other peoples experiences good ones

Basic UX design patterns

Principles

Pre-accepted and trusted visual standards are vital to user acceptance and experience as they encourage adoption of technology systems. This is vital so that users don’t need to learn new or counter intuitive interaction behaviours.

Overview

Just as the creators of hypertext transfer protocol (http) were able to attribute their invention to Vannevar Bush’s ‘Memex’ so user interface architects are able to attribute the key concepts of user interface structures to principals defined by Gestalt. The following explains the key principals of user interface design as key patterns based upon Gestalt principals.

Karl's Research

The psychology of visual location, shape  and colour are critical  to enable user to understand and interpret their location and expectations of use in any given area. My research from 2002 defined additional aspects as 'biographical templates' that establish key perceptions and personal drivers which I linked to persona's.

Key patterns

Law of continuation

Continuation is the eye’s instinctive action to follow a direction derived from the visual field. For example, in Figure 1.1 our eyes follow the rail tracks from the left of the picture to the top or vice versa, with Figure 1.2 the eye follows the text box layout.

Law of figure-ground

We distinguish the foreground and background in a visual field.  Two different foreground colours let the viewer perceive different things from the same illustration, as illustrated in Figures 2.1 and 2.2. If our focus (foreground) colour is black, then in the Figure 2.1, you can see a vase.  In Figure 2.2, when the background is black, we see two faces.

Law of closure

Open shapes make the individual perceive that the visual pattern is incomplete and the sense of incompletion serves as a distraction to the learner.” Our minds will tend to close gaps and complete unfinished forms. In Figure 3 the letters used to form the word “INCOMPLETE” are sliced into parts but our minds complete the unfinished forms.

Law of balance / symmetry

A visual object will appear as incomplete if the visual object is not balanced or symmetrical.  A psychological sense of equilibrium, or balance, is usually achieved when visual ‘weight’ is placed evenly on each side of an axis for example, Figure 4.1 illustrates visual balance but in Figure 4.2 the image appears unbalanced.

Law of focal point

Every visual presentation needs a focal point, called the centre of interest or point of emphasis. This focal point catches the viewer’s attention and persuades the viewer to follow the visual message further. Figure 5.1 shows how a differently shaped element appears to protrude out from among other elements and draws attention, 5.2 create high impact.

Law of isomorphic correspondence

All images do not have the same meaning to us, because we interpret their meanings based on our experiences.  If we were to see the image in Figure 6 on a computer screen, we would interpret its meaning as a help or question icon, even if we could not understand the German word “Hilfe” because we associate a question mark with ‘help’ based on past experience.

Law of proximity

The law of proximity states that items placed near each other appear to be a group. Viewers will mentally organise closer elements into a coherent object, because they assume that closely spaced elements are related and those further apart are unrelated. In Figure 7, people mentally arrange the sign in component together as a form.

Law of unity / harmony

Unity implies that a congruity or arrangement exists among the elements in a design; they look as though they belong together, as though there is some visual connection beyond mere chance that has caused them to come together.  If the related objects do not appear within the same form, the viewer will consider the separate objects to be unrelated to the main visual design, leading to confusion. Figure 8.1 and 8.2 are examples of unity in presentation where all of objects are arranged together into a unified form.

Law of Similarity

Similar objects will be counted as the same group and this technique can be used to draw a viewer’s attention. Below in Figure 9 the viewer can recognise a triangle inside the square, because these elements look similar and thus part of the same form.

Law of Simplicity

When users are presented with visuals, there is an unconscious effort to simplify what is perceived into what the viewer can understand. The simplification works well if the graphical message is already uncluttered, but if the graphics are complex and open to interpretation the simplification process may lead to unintended conclusions. The example below Figure 10:1 shows the Plough star grouping which people can naturally join together, while Figure 10:2 just shows the Sky

References

Chang, D., Nesbitt, K., V., Australian Computer Society, 2006. Developing Gestalt-based design guidelines for multi-sensory displays. MMUI '05: Proceedings of the 2005 NICTA-HCSNet Multimodal User Interaction Workshop - Volume 57 , Volume 57.

Kearsley, G., Campbell, R., L., Elkerton, J., Judd, W., Walker,  J., SIGCHI conference. 1998. Online help systems: design and implementation issues (panel). CHI '88: Proceedings of the SIGCHI conference on Human factors in computing systems.

Flieder, K., Modrritscher, F., CHI Montreal 2006. Foundations of a Pattern Language based on Gestalt Principals.