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):
- Size: Notice in the example on the left that the squares and circles are presented in two different sizes. Do you first notice them grouping because of their shape or their size? The difference between the sizes is probably greater here than the difference in the shapes. Had they been only slightly larger the shape difference might have been noticed first. The potential, however, for size variation is greater than the differences possible in shape so size is usually a more dominant similarity type.
Size has the additional advantage of letting items be B I G ! You learned when you study emphasis that bigger is better when it comes to visibility.
- Value/Color: Another powerful similarity type is value/color. The two are grouped together because value is part of color but can act independently (black and white images).
Again notice that the dominant grouping concept is color not shape. Color makes items easy to identify and hence makes a good grouping tool. Value can work as easily as color, and in fact sometimes is a stronger design element. You learned about color and value in the first section of the course. Try to learn all you can about using color in each of your assignments. Try different combinations of things to see what works and what does not work.
- Shape: Shape, and shape like elements such as direction and texture, can also form groups. When all other things are equal it performs quite well in this function. The squares and circles used here are simple geometric shapes. It is possible to make shapes that are more distinct and therefore more noticeable. Complex shapes may stand out more but there is attractiveness to simpler shapes that makes them more powerful visual elements in most cases. They appeal to our sense of order.
A simple example of using shapes to group is the use of italic or bold type to emphasis and separate parts of a sentence.
These and other similarity types are used extensively in design to create order and to organize information into specific groups in order to make the material presented more understandable. You will be using magazines for the raw material for this lesson's project. Look at how they are organized and notice how often the various concepts just mentioned are used to control groups of information.
It is important to understand that it is possible, often necessary, to deliberately make items look different in order to make them stand out or to create more variety in a composition. You will use dissimilar looking items in the project for this lesson to better understand how to create and control variety.
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:
- Erstens ist das, was man Konsistenz einer Benutzeroberfläche nennt (sprich: eine einheitliche Gestaltung in verschiedenen Teilanwendungen und -fenstern) immer das Ergebnis von Ähnlichkeiten. Wie wir gerade gesehen haben, sind z.B. in einem guten Web-Shop die Tasten für das Ausführen von Navigationsschritten einheitlich gestaltet.
- Zweitens bietet Ähnlichkeit eine Möglichkeit, Elemente auch über größere Distanzen hinweg zu verbinden. Vom Standpunkt eines Gestalters aus gesehen ergänzt es also das Gesetz Nähe. Wenn es nicht möglich ist, Gemeinsamkeiten durch Nähe zu kodieren, kann man dem Benutzer durch Ähnlichkeit verdeutlichen, was zusammengehört und was nicht.
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