Ähnlichkeit

Das Gesetz der Ähnlichkeit

guter Artikel aus: www.ch-becker.de - Vortragsseminar

Sich ähnlich sehende Elemente werden nach diesem Gesetz eher als zusammengehörig empfunden als sich unähnlich sehende. Ob diese sich in Form, Farbe o.a. ähneln ist egal. (siehe Abb. 4)

Das Gesetz der Ähnlichkeit

gute Beispiele aus: www.webmasterpro.de

Definition

Beschreibt das Auffassungsmerkmal, dass ähnliche Elemente als zusammengehörige erfasst werden. Wir ordnen gruppieren also eher Vierecke mit Vierecken als gemischte Formen aus Vierecken und Kreisen. Doch so eine Zusammengehörigkeit kann nicht nur über die Form verursacht werden. Auch andere Faktoren wie Farbe, Orientierung oder Geschwindigkeit können dies bewirken.

Das "Gesetz der Ähnlichkeit" gehört zu den "Gestaltgesetzen der Wahrnehmung", welche sich mit verschiedenen Prinzipien der Wahrnehmung von Elementen beschäftigen.

Praxisbeispiele

Nach Farbe: Im ersten Beispiel empfinden wir die roten Kreise als zusammengehörige. Dabei kann auch die Helligkeit die Farbe beeinflussen und so als Unterscheidungsmerkmal fungieren.

Nach Größe: Das zweite Beispiel zeigt Kreise in unterschiedlichen Formen. Die größeren Kreise stechen aus der Gruppe hervor und wir nehmen diese als zusammengehörig wahr.

Nach Orientierung: Die folgenden Vierecke sind in Form und Farbe identisch. Sie unterscheiden sich nur durch die Orientierung im Raum. Dennoch fassen wir die Vierecke 2, 4 und 5 als zusammengehörig auf.

Nach Form: Das wohl einfachste Beispiel bildet die Einordnung nach der Form. Wir fassen Objekte nach dem äußeren Erscheinungsbild auf und ordnen diese zueinander zu.

xxx

Das Gesetz der Ähnlichkeit

guter Artikel aus: www.designguide.at

Ähnliche Objekte als gleiche interpretiert

Bei dem hier vorliegenden Bild kommt das Gesetz der Ähnlichkeit zur Geltung. Dieses Gesetz beschreibt die Fähigkeit unseres Gehirns, dicht beieinander liegende Objekte die ähnliche Eigenschaften haben (Form, Größe, ..) als ein Ganzes zu betrachten.

Bei nebenstehendem Bild deutet unser Gehirn die Abbildung als Ansammlung von gleichartigen Objekten, obwohl diese nicht gleichartig sind. Unser Hirn erkennt, dass die Objekte die gleiche Größe haben, das reicht aus um von unserem Hirn als gleichartige Objekte interpretiert zu werden.

Prinzip der Ähnlichkeit:

Formulierung aus: www.stud.tu-ilmenau.de (nicht mehr online)

Unter gleichen Bedingungen werden die Elemente zu Figuren gruppiert, die sich am ähnlichsten sind.

Gesetz der Ähnlichkeit

xxx guter Artikel aus: www.gestaltpsychologie.net

Ähnliche Objekte als gleiche interpretiert

Beim Gestaltgesetz der Ähnlichkeit werden einander ähnliche Elemente eher als zusammengehörig wahrgenommen als einander unähnliche Elemente.

Das Beispiel rechts zeigt ein Bild dieses Gestaltgesetzes. Dort hat man den Eindruck, dass die jeweils roten und schwarzen Linien zusammengehörig sind. Alleine die Farbgebung beeinflusst hier unsere Wahrnehmung.

Ähnlichkeit

Artikel aus: www.braekling.de

Weiter geht es mit der Reihe über die Gestaltgesetze. Nach der Prägnanz (Gute Gestalt) und der Nähe möchte ich heute das Gesetz der Ähnlichkeit genauer erläutern. Insbesondere soll auch aufgezeigt werden, dass sich die Gesetze zwar ergänzen, aber auch miteinander konkurrieren können.

Schauen wir uns zunächst die nebenstehende Grafik an. Wir sehen ein Rechteck, dass mit X- und O-Symbolen gefüllt ist. Innerhalb dieser Form erkennen wir aber auch die einzelnen Spalten mit X- bzw. O-Symbolen als zusammengehörig. Man könnte sagen, dass sich ähnliche Formen als Streifen durch die Grundform ziehen.

Das Gesetz der Ähnlichkeit funktioniert natürlich nicht nur mit Formen, sondern beispielsweise auch mit Farben. Im zweiten Bild sehen wir mehrere Streifen. Sollten wir diese gruppieren wollen, dann neigen wir dazu die jeweils paarweise gleichfarbigen Streifen als zusammengehörig zu betrachten, also zweimal rot, zweimal blau, zweimal rot und noch zweimal blau.

In beiden Fällen unterstützt uns aber auch das Gesetz der Nähe, d.h. durch die gleichen Abstände müssen wir zur genaueren Gruppierung andere Maßstäbe, also die Ähnlichkeit, ansetzen.

Betrachten wir nun das dritte Bild: Hier konkurrieren Nähe und Ähnlichkeit miteinander. Wie würdest Du das Bild jetzt gruppieren? Eher nach Zeilen, wie es die Nähe vorgibt, oder weiterhin nach Spalten aufgrund der Ähnlichkeit? Hier sehen wir ein typisches Prinzip optischer Täuschungen im Praxiseinsatz: Je nachdem welchen Maßstab wir zur Gruppierung der Bildelemente verwenden unterscheidet sich unsere persönliche Ansicht des Gesamtbildes. Man spricht auch von Gestaltwechseln.

Da solche Täuschungen in unseren Designs aber nicht erwünscht sind, müssen wir uns immer darüber im Klaren sein, dass die von uns intendierten Gruppierungen nicht zwingend vom Betrachter genauso wahrgenommen werden.

Schauen wir abschließend nochmal auf unseren Frühstückskonfigurator aus Teil 2 (Nähe). Zu Variante 1 wurde dort schon alles gesagt:

Variante 1 verzichtet auf Nähegruppierungen, wodurch alle Radiobuttons gleichwertig wirken. Problematisch ist jedoch, dass offenbar zwei Radiobuttons auswählbar sind… was (so wissen wir aus Erfahrung im Umgang mit solchen Schaltflächen) nicht möglich sein dürfte. Erst durch solche Überlegungen und genaueres Betrachten des Formulars erschließt sich, dass es sich um zwei verschiedene Gruppen von Radiobuttons (Belag & Brot) handelt, die getrennt voneinander bedient werden.

Nun mache ich mir in Variante 2 das Gesetz der Ähnlichkeit zu Nutze. Die Radiobuttons zur Brotauswahl haben in dieser Fassung eine andere Farbe als die Buttons zur Belagwahl. So kann der Nutzer sofort erkennen, dass es sich um unterschiedliche Auswahlgruppen handelt und dadurch den Konflikt der doppelten Auswahlmöglichkeit schnell auflösen.

Aber natürlich könnte der Nutzer die Farben auch falsch interpretieren, z.B. als reine Dekoration oder gar als Fehlerindikator, weil ja zwei Radiobuttons ausgewählt sind. Damit wären wir wieder beim Ausgangsproblem. Um die von uns intendierte Gruppierung “abzusichern” können wir aber die Gesetze der Nähe und Ähnlichkeit kombinieren, wie Variante 3 zeigt. Wir haben sozusagen ein Netz mit doppeltem Boden aufgespannt, obwohl es natürlich weiterhin bessere Möglichkeiten zur Darstellung unseres Frühstückskonfigurators gibt.

Jedoch hilft uns das Gesetz der Ähnlichkeit nicht nur bei der Gruppierung irgendwelcher Elemente. Vielmehr ist es auch eine wichtige Grundlage um unseren Designs Konsistenz zu verleihen. Beispielsweise sollten Navigationselemente im gesamten Bedienungskontext zueinander ähnlich sein, damit sie jederzeit als solche wiedererkannt werden können. Einem Nutzer würde es wenig helfen, wenn auf jeder Unterseite eines Webangebots die Navigationsleiste anders aussieht, z.B. wenn er immer wieder erneut nach einem neuen Home-Icon suchen muss.

Gesetz der Ähnlichkeit

xxx guter Artikel aus: www.andreashurni.ch

Ähnliche Objekte als gleiche interpretiert

Auch in wesentlichen Punkten ähnliche Dinge werden gruppiert und als zusammengehörig aufgefasst. Entsprechend wird voneinander getrennt und als unabhängig wahrgenommen was sich in wichtigen Merkmalen unterscheidet.

Worin die Ähnlichkeit besteht ist soweit noch unwesentlich, sei es Farbe, Textur, Grösse oder auch Helligkeit. Mit zunehmendem Grad der Ähnlichkeit steigt auch die Tendenz der Gruppierung.

Während das Gesetz der Nähe über kurze Distanzen gruppiert, so wird durch Ähnlichkeit auch über grössere Abstände hinweg ein gemeinsamer Bezug erstellt.

Gesetz der Gleichartigkeit

guter Artikel aus: iug.upb.de

Ähnliche Objekte als gleiche interpretiert

Gesetz der Gleichartigkeit

Sind mehrere verschiedenartige Elemente wirksam, so besteht eine Tendenz zur Zusammenfassung der gleichartigen (d. h. gleichen oder ähnlichen) Elementen zu Gruppen.

Das Gesetz der Gleichartigkeit vereint die bei Wertheimer aufgeführten Faktoren "Gleichheit" und "Ähnlichkeit" [Me66:700] und ist in vielerlei Hinsicht elementar: Laut Katz (vgl. [Ka69:35]) treten alle anderen Gesetze erst dann in Kraft, wenn - als eine Folge von ungleichartigen Qualitäten - eine Unterteilung des Feldes erfolgt ist. Praktisch bedeutet dies, dass einzelne Elemente leichter zu einer Einheit zusammengeschlossen werden, wenn sich die Teilstücke ähneln (z. B. in Bezug auf Form oder Farbe).

Sind innerhalb einer solchen Verteilung einige Elemente noch ähnlicher als der Rest, spalten sie sich als "Untergruppe" heraus. Das Gesetz der Gleichartigkeit bezieht sich in der Regel auf Eigenschaften wie Größe, Form oder Ausrichtung der Glieder (nach Wertheimer), kann jedoch auch Textur- oder stoffliche Eigenschaften umfassen. Die Stärke der Wirkung dieses Gesetzes ist von der Verschiedenheit bzw. Gleichartigkeit der Elemente abhängig.

SIMILARITY

guter Artikel aus: daphne.palomar.edu

Ähnliche Objekte als gleiche interpretiert

SIMILARITY

Similarity is concerned with what items look like.

Understand how similarity works to produce both unity and variety.

Subject matter will be eliminated for this discussion because gestalt is based on what items look like not what they are like.

There is a limit to the amount of information that the mind can keep track of. When the amount of visual information becomes too great the mind tries to simplify by grouping. Groups are formed in logical ways based what information look like and where the various items are located. Similarity is concerned with what items look like.

Similarity is a powerful grouping concept and as such can contribute significantly towards achieving unity. The more alike the items are, the more likely they are to form groups. By the same token, if items are dissimilar, they will resist grouping and tend to show more variety. It is important to understand that all of the gestalt concepts can be used both ways -- to group and to ungroup

There are three major similarity types -- ways items can look alike (or look different):

Gesetz der Ähnlichkeit:

Artikel aus: www.informatik.uni-bremen.de

Einander ähnlich sehende Elemente werden eher als zusammengehörig erlebt als einander unähnlich sehende

Gleichheit

Artikel aus: weblab.uni-lueneburg.de

Gleichheit

Sind unter einer Anzahl verschiedenartiger Figuren zwei oder mehr gleichartig, werden sie als Gruppe wahrgenommen.

Gesetz der Ähnlichkeit

Artikel aus: e-teaching.org

Das Gesetz der Ähnlichkeit greift die Beobachtung auf, dass optische Reize mit gleicher oder ähnlicher Struktur als zusammengehörig eingeordnet werden. Wie die Grafik zeigt, können die Gesetze der Nähe und Ähnlichkeit durchaus miteinander konkurrieren. Dem Betrachter fällt es sehr schwer, entweder Quer- oder Längsreihen zu bilden. Im nachfolgenden Beispiel dagegen gliedern Nähe und Ähnlichkeit Informationen in einen sinnstiftenden thematischen Zusammenhang.

Die rechte, neu gestaltete Liste ermöglicht nun den Studierenden Zusammenhängendes auch zusammen zu sehen: Nach dem Gesetz der Nähe wurde thematisch Verwandtes nah beieinander gruppiert. Die nach dem Gesetz der Ähnlichkeit angelegte Struktur unterstützt die unmittelbare visuelle Orientierung innerhalb der Gruppe. Alle Überschriften erscheien optisch gleich, für die Unterpunkte gilt dies ebenso. Die beiden Strukturelemente unterscheiden sich in Schriftart und -größe sowie der Einrückung.

In statischen Abbildungen lässt sich Ähnlichkeit durch Form, Farbe, Textur, Position, Orientierung und Größe ausdrücken. Visuelle Ähnlichkeit lässt auf sachliche Zusammenhänge schließen, daher sollten gleiche Elemente auch gleich gekennzeichnet sein. Objekte einer Klasse können innerhalb einer Grafik z.B. in derselben Form erscheinen. Unterschiedliche Inhaltsbereiche lassen sich durch verschiedene Farbgebung abgrenzen. Für positive und negative Werte in einer Tabelle können unterschiedliche Formatierungen verwendet werden.

Law of Similarity

Artikel aus: psychology.about.com

The law of similarity suggests that things similar things tend to appear grouped together. Grouping can occur in both visual and auditory stimuli.

Similarity

Artikel aus: graphicdesign.spokanefalls.edu

Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern.

The example above (containing 11 distinct objects) appears as as single unit because all of the shapes have similarity.

Unity occurs because the triangular shapes at the bottom of the eagle symbol look similar to the shapes that form the sunburst.

When similarity occurs, an object can be emphasised if it is dissimilar to the others. This is called anomally.

The figure on the far right becomes a focal point because it is dissimilar to the other shapes.

Proximity

Artikel aus: graphicdesign.spokanefalls.edu

Proximity occurs when elements are placed close together. They tend to be perceived as a group.

The nine squares above are placed without proximity. They are perceived as separate shapes.

When the squares are given close proximity, unity occurs. While they continue to be separate shapes, they are now perceived as one group.

The fifteen figures above form a unified whole (the shape of a tree) because of their proximity.

Gestalt Principles of Perception 2 – Similarity

Artikel aus: www.andyrutledge.com

As Gestalt principles go, the principle of similarity would seem to be one of the simplest to grasp. It states things that are similar are perceived to be more related than things that are dissimilar. Simple enough, right? As a web designer, however, you’ll need to be familiar with all of the ways that elements can be similar so that you can in any given situation choose the right one to exploit. This is because the different modes of similarity are not created equal. Some are strongly communicative while others are comparatively weak …and there is context to consider. It seems that the principle of similarity is not quite so simple as we might imagine.

Similarity is a powerful mechanism for communication. Its power comes from the fact that it is the counterpart to the most fundamental element of meaning: contrast. Here in part 2 of the Gestalt principles series, let’s examine this principle of similarity and how it can be exploited as a communicative mechanism in our web design work.

Fundamentals

There are all sorts of ways that elements can be perceived as being similar, and thus, related. These include similarity of color, size, shape, texture, dimension, and orientation, to name just a few. In order to illustrate some of these similarity modes, let’s do some fundamental evaluations:

Do the elements shown above seem related to one another or not?As there are very few consistencies among the elements above, it is unlikely that anyone would perceive any significant similarity. As a result, the elements are not perceived as being related to one another in any way.

Let’s make it a bit easier to perceive some similarity:

Which elements above seem related? How?There are differences between the many elements above, but there are also similarities. If asked to categorize the elements above, almost anyone would say that the strongest communication toward categorization is dependent upon shape. Based on shape, it seems that the squares are related to one another and the circles are related to one another. It is important to note that in this example shape, not proximity or size, provides the strongest communication.

Let’s change things a bit and see how our perception is led.

Which of the elements above seem related? How?In all likelihood, you’ve decided that the large squares are related to one another and the small squares are related to one another. Size is a way to provide contrast, therefore consistency of size can be exploited to suggest relationships.

Glance quickly at the image below and then read the question that follows…

Which of the elements above seem related to one another? How?Similarity of color (or consistent contrast) is the strongest way to suggest relationships. It is also the characteristic that registers first in our perception when our brain is working to make sense of our surroundings. Patterns and chaos can camouflage size and shapes and these characteristics might have only minor variations, but color penetrates these factors efficiently. Because of this fact (or possibly as the reason for this fact) color is often used in nature as a powerful communication tool for danger. Throughout history, a clear perception of color’s communication has been vital to the survival of humans and other organisms.

Okay, let’s move beyond mere survival and get into more practical matters of web design effectiveness with this principle.

The power of similarity in web design

In designing web pages and applications, part of any designer’s job is to provide visual clues as to which interface elements are related to one another. This is done so that the end user or viewer of these pages or applications can quickly perceive organization and make sense of what the designer has created so that they know how to use or interact with it.

Links

Links allow for some of the fundamental interactions inherent to web pages and applications. As such they must be distinguished from other elements around them and they must be somewhat conspicuous—highly or mildly conspicuous, according to the relevant context. But since links share a common function, they generally need to be similar to one another (again, according to context).

In the example above, Douglas Bowman has styled the links in the copy of his Stopdesign site to be blue, contrasting with the overall gray of his body copy. By the principle of similarity, those of us who can distinguish blue from gray automatically recognize that all text styled in this manner is link text.

But it is not necessary that all links be similarly styled in order for there to be clarity. The principle of similarity is quite contextual in our perception. For example, the AIGA website uses a variety of link styles and colors and link text styles—all toward a specific purpose:

Here (above) we can see several different kinds of similarity among text links. The differences in styling communicate differences in context, category, or purpose. Links in the sidebar are underlined and are blue to provide color contrast (and a warm/cool difference for even more contrast) between the sidebar and the main body. In the primary content, there are links of 4 colors; with and without underlines, normal and italic, serif and sans-serif font, emboldened and normal weight, all-caps and mixed-case words.

What is important in this example, however, is that despite the many variations in link color and style we can rather quickly perceive the categorical indications:

It is all complex and fussy, but there is some measure of clarity of communication despite the complexity. With a bit of extrapolation and consideration, I’m sure you can think of all sorts of permutations of the principle of similarity as applied to links …and other things.

Page content

When designing and styling web page content, one of the most important jobs we have is to show content relationships—how some content components are related to one another and less related to other content elements. This can be done to reinforce content hierarchies, replace visual structure with implied structure, and generally communicate context.

In the example above, the web applications that 37signals offers are shown here using a consistent visual motif. Most conspicuous is the distinct shape and color palette used for the icons, so we immediately perceive that the four bits of information about their web apps are related in some way. If we then read one of the examples, say the top one for Basecamp, we can then immediately assume (correctly) that all of the other entries that are styled and configured in this manner are also web apps offered by 37signals. Here, consistency of styling and presentation indicates consistency of category or context.

Note that this similarity is reinforced by how the apps’ information contrasts strongly with the surrounding content. Because of this contrast and similarity there is no need to structurally “wall-off” these four elements from the surrounding content in order to show their relatedness.

In the example above, the main page for (the now defunct??) UX Magazine uses the principle of similarity to communicate that all of the bits of content that appear inside square, gray-bordered boxes are references (links) to articles. This impression is then reinforced by the user experience: all of these elements have a consistent behavior when a cursor hovers over them (image below).

Organization

Perceiving similarities not only helps us to assume what elements in a layout are related to one another, it also then implies structure based on the patterns that emerge, as demonstrated by the following examples:

The above example shows a grid of elements where no divisional structure is evident. All of the elements seem to be equally related.

This example above clearly shows that the structure is columnar. Since the shapes are consistent, color is the communicative feature here.

In this example above, it is clear that the elements are arranged into horizontal rows.

The example above shows that the elements are split into two categories, where all of the gray squares are related and all of the brown squares are related (similar to the AIGA example above). The two sections are clearly distinct, even though this example—and all of the previous ones in this section—have exactly the same physical structure.

In these examples, color (or more fundamentally, contrast) has been used to imply relationships and create structure. These examples offer clear lessons for web designers. Among those lessons is the fact that physical structure is not necessary for describing page structure and content relationships. Instead, one might clearly imply structure based solely on the consistency or contrast of styling and dimension of the content. I’m sure you can extrapolate many lessons from these simple examples.

More simple complexity

Like all fundamental ideas or principles, this is dead-simple stuff; and yet this simple principle has nearly unfathomable depths. In this fact we find one of the dangers of simple concepts: if we imagine only simple extrapolations from simple ideas or fundamental principles, our efforts will forever be relegated to heavy-handed mechanisms and trite results.

If you follow my articles regularly you are aware that I spend lots of time dwelling on fundamentals. Do not, however, mistake an interest in fundamentals for a suggestion that design must be kept fundamental or simplistic. It is the purpose of fundamentals to open wide doors to conceptual depths, and to the subtleties that lay beyond. Without a keen understanding of the (many) fundamentals, designers will be forever barred from those depths. Study hard.

The next installment in this series will touch on some principles that define how the physical page structures we design create direct and indirect communication.

References: 1. Universal Principles of Design, by William Lidwell, Kritina Holden, and Jill Butler

Similarity

Artikel aus: graphicdesign.spokanefalls.edu

Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern.

The example above (containing 11 distinct objects) appears as as single unit because all of the shapes have similarity.

Unity occurs because the triangular shapes at the bottom of the eagle symbol look similar to the shapes that form the sunburst.

When similarity occurs, an object can be emphasised if it is dissimilar to the others. This is called anomally.

The figure on the far right becomes a focal point because it is dissimilar to the other shapes.

Das Gesetz der Ähnlichkeit

Artikel aus: www.kommdesign.de

Dinge, die ähnlich sind, werden von unserer Wahrnehmung gruppiert, also als zusammengehörig aufgefaßt. Umgekehrt werden Dinge, die sich in wichtigen Merkmalen unterscheiden, als voneinander getrennt oder unabhängig wahrgenommen.

Die Abbildung zeigt wieder 10 Linien. Die Distanzen zwischen ihnen sind gleich, nach dem Gesetz der Nähe gibt es also keine Struktur in ihrer Anordnung. Die Ähnlichkeit in der Farbgebung bewirkt aber, dass sie in unserer Wahrnehmung gruppiert werden. Die roten und schwarzen Linie bilden 5 Paare, und wir tendieren dazu, diese Paare als Einheiten wahrzunehmen.

Worauf die Ähnlichkeit zurückgeht, ist übrigens in dem Gesetz nicht festgelegt. Es kann sich um Farben, Textur, Größe, Helligkeit oder auch um die Bewegungsrichtung, die Geschwindigkeit handeln. Je mehr Gemeinsamkeiten zwei Objekte aufweisen, desto stärker ist die Gruppierungstendenz in unserer Wahrnehmung. Das Gesetz der Ähnlichkeit kann ganz direkt auf das Webdesign übertragen werden. Auf einer Web-Seite (oder einem Interface) werden Elemente, die gleich aussehen und sich eindeutig von den anderen unterscheiden zu einer Gruppe zusammengeschlossen. Man kann dies sehr schön an den Shopping-Buttons auf amazon.com zeigen:

Die Buttons "Add to Cart", "More like this" und "Add to Wish List" haben die gleiche prägnante Form, und durch das Orange werden sie von den anderen Elementen auf der Seite farblich eindeutig abgesetzt. Trotz der großen Distanzen zwischen den Buttons erkennt unsere Wahrnehmung diese Ähnlichkeiten mühelos und faßt die Buttons zu einer funktionellen Gruppe zusammen - was in diesem Beispiel auch gewünscht und sinnvoll ist. Auch wenn ein Benutzer noch niemals einen Shop bedient hat, selbst wenn er noch nie im Internet unterwegs war, wird er intuitiv erkennen, dass diese Elemente etwas gemeinsam haben müssen. Worin diese Gemeinsamkeit in der Funktion oder Bedeutung bestehen könnte, ist alleine aufgrund der Ähnlichkeit in der Gestaltung natürlich nicht erkennbar. Das Gesetz der Ähnlichkeit ist im Webdesign aus (mindestens) zwei Gründen wichtig:

Zur Veranschaulichung des zweiten Punktes möchte ich noch kurz auf ein Beispiel eingehen. Die folgende Tabelle habe ich auf der Website der Uni Wien gefunden. Es geht darin um ein für unbedarfte Besucher unerhört langweiliges Thema, nämlich statistische Daten zu Beschäftigungszahlen:

Dieses Layout ist alles andere als gelungen. Die Abstände der Werte innerhalb einer Kategorie - z.B. zwischen den Zahlen 162 und 5 (unter "Summe"), die logisch zusammengehören - sind größer als die Abstände zwischen den Werten und den Zeichen, welche die Spalten begrenzen (dem "I"). Unser Auge gruppiert unwillkürlich die falschen Zeichen zusammen - weshalb es ziemlich anstrengend ist, die Zahlen in der Tabelle zu analysieren.

In dieser Tabelle wurden die zusammengehörigen Werte jeweils in der gleichen Farbe dargestellt. Der Wechsel von grüner zu roter Schrift wäre eigentlich nicht erforderlich, er sorgt nur für eine zusätzliche optische Trennung. Das Layout ist auch jetzt noch nicht optimal, da das Gesetz der Nähe weiter verletzt ist. Durch die Farbgebung - also das Gesetz der Ähnlichkeit - wird die Darstellung jedoch entscheidend verbessert.

xxx

Artikel aus: xxx

xxx

xxx

xx

xxx

xx

xxx

xx

xxx

xx

xxx

xxx

Artikel aus: xxx

xxx

xxx

xx

xxx

xx

xxx

xx

xxx

xx

xxx