Gestalt Principles 1

Gestalt Principles

Lim Zhen Ling Samantha

Nanyang Technological University

Gestalt Principles 2

Proximity http://www.ntu.edu.sg/Pages/default.aspx

According to the law of proximity, items that appear closer appear more related than items that appear further away. The NTU home page uses this principle in organization of the blue hyperlinks to other NTU websites. This is done by placing some hyperlinks closer together and others further away. For instance, the blue hyperlinks “UNDERGRADUATE, GRADUATE, INTERNATIONAL…” are perceived to be related to ADMISSIONS whereas the links “RESEARCH DIRECTORY, ACADEMIC PROFILE, CENTRES…” are perceived to be related to RESEARCH. This is because the former group of hyperlinks is more proximal to the word ADMISSIONS instead of the word RESEARCH; the blue hyperlink UNDERGRADUATE is closer to GRADUATE than RESEARCH DIRECTORY. Subconscious grouping of the blue hyperlinks is reinforced by the law of similarity where the hyperlinks share same colour and font, and law of area where each group is further segmented by light grey boxes.

Gestalt Principles 3

Although there are more than 50 blue hyperlinks in the left panel, usage of the law of proximity effectively aids them to be organized into nine smaller categories thereby minimizing the number of items processed at one time and reducing search time. Visual display of the many hyperlinks appear less cluttered because of the usage of this principle. However, the web designer may consider lowering dependence on knowledge in the world. Instead of using labels such as ADMISSIONS which is less asethetically pleasing and contributes to clutter, refinements of learned images may placed proximally or as a watermark behind each group of hyperlinks instead.

Similarity http://msn.foxsports.com/

The Gestalt law of similarity enables similar elements to be perceived more related than dissimilar elements. The MSN Fox Sports website demonstrates this principle by displaying navigation buttons of differing degrees of dissimilarity. Navigation buttons sharing the same font and colour appear most related i.e. the grey SPORTS button and the grey TECH button, followed by buttons sharing the same font and similar colours i.e. the yellow and orange buttons in uppercase labels, lastly buttons sharing neither font nor colour. Therefore, principle of similarity enables the user to quickly organize the navigation buttons into three distinct categories with two of them more similar to each other and recognize that similar buttons perform related functions. For instance, if the user recognizes that the yellow navigation buttons NFL and MLB are sports teams, the law of similarity would allow him or her to associate them to the similar orange navigation buttons to some extent. The user would thus understand the orange buttons FANTASY and COMMUNITY with regard to sports teams. If he or she would like to navigate to websites unrelated to the sports teams, grey navigation buttons would be selected instead of the yellow or orange buttons as they are the most dissimilar to the yellow navigation buttons.

Gestalt Principles 4

The underlying principle of similarity in the design of the MSN Fox Sports website takes advantage of the knowledge in the head. Instead of having to explicitly label the navigation buttons on a gradient of similarity, the designer uses colours and fonts of differing levels of similarity. Thus website design can be more flexible and more aesthetically appealing. User experience of viewing the website would therefore be enhanced.

Closure http://www.bravotv.com

The Gestalt principle of closure is the tendency to perceive stand-alone elements cohesively (as a pattern) instead of individually. The Bravo TV website demonstrates this principle as at first glance, the user perceives smaller video and picture elements as part of the few large blue segments featuring major themes instead of disparate elements. For instance, the user would recognize that the thumbnail pictures in the blue rectangular segment REAL HOUSEWIVES ON DEMAND are videos of Bravo TV shows since the one featured is indicated so by a refinement of PAUSE icon. The law of proximity further reinforces the association between the individual thumbnails.

Gestalt Principles 5

By taking advantage of the user’s subconscious ability to perceive individual elements as smaller cohesive groups, Bravo TV is able to present more information (increasing visibility) in smaller sizes without compromising the information’s accessibility. Usage of a grid-based design allows large amount of information to be presented meaningfully without overwhelming the user, improving marketing effectiveness of the website. In addition, enhanced user experience via effective usage of gestalt principle would eventually boost internet traffic and browsing time, thus improving Bravo TV’s value as an advertorial space. Continuation http://edventure.ntu.edu.sg/webapps/portal/frameset.jsp?tab_id=_2_1&url=%2fwebapps%2fblackboard%2fexecute%2flauncher%3ftype%3dCourse%26id%3d_321225_1%26url%3d

The Gestalt laws of continuation states that elements arranged in a straight line or a smooth curve are perceived to be a group and thus appear more related than elements not on the same line or curve. This webpage makes use of the principle of continuation by placing the hyperlinks for different purposes in two separate continuous lines. It enables user perception of two distinct groups – the tabs placed in a horizontal line and the white links in a vertical line. As hyperlinks in the same group appear more related, the user would perceive them to perform similar functions or have the same target or feedback. This eases user navigation, search and formulation of action sequences. The similarity between the hyperlinks (law of similarity) further reinforces their groupings.

For instance, the user knows that the white hyperlinks on the orange panel ANNOUNCEMENTS and COURSE INFORMATION pertains to that module selected in the home page (MY EDVENTURE) whereas the tabs in the top horizontal line MY EDVENTURE

Gestalt Principles 6

and WEBMAIL are NTU students’ websites for personal usage. If the user would like to find out more information about a particular module, the principle of continuation would guide the user to search for the navigation link on the vertical orange panel instead of the horizontal line. The principle thus effectively reduces the gulf of execution especially for a new user of the NTU student websites.

Area http://store.apple.com/us/browse/home/shop_ipod/family/ipod_nano?intcmp=AIC-WWW-NAUS-BUYNOW-HEAD-IPODNANO-080910

According to the Gestalt principle of area, people tend to perceive smaller shapes as the foreground while the larger shape is perceived as the background when the smaller shape is enclosed in the larger shape. This principle is demonstrated in Apple iPod Nano website’s small white search bars and small grey SELECT buttons. The former is enclosed in the larger grey horizontal navigation bar on top whereas the latter is perceived to be on a large rectangular background.

Gestalt Principles 7

The law of Area aids design of the Apple Website by directing the user’s attention to the small SELECT buttons and search bars. This is because items in the foreground garner more of the user’s attention instead of the background. By highlighting search bars and item selection buttons, usability of searching and purchasing of Apple products is heightened. High visibility and accessibility of critical functions to Apple online shopping process would boost online sales.