Die 3 Arten von Bildern, die im Web am besten funktionieren
Beim visuellen Geschichtenerzählen wenden Sie normalerweise drei verschiedene Bildtypen an: Symbolbilder, Symbolbilder und Indexbilder. Es gibt keinen Bildtyp, der für das Webdesign am besten geeignet ist. Jeder Bildtyp kann häufig gleichzeitig für dasselbe Projekt verwendet werden, um die gewünschten Ergebnisse zu erzielen.
Schauen wir uns die Eigenschaften der einzelnen Bildtypen an und untersuchen dann die besten Verwendungsszenarien.
01. Kultbilder
Wie in der Visual Storyteller-Handbuch zum Webdesign ikonische Bilder sind sofort erkennbar und stark mit einem definierten Konzept verbunden. Sie sind im Allgemeinen auch sehr wörtliche Bilder, sodass selbst jemand, der sie nicht kennt, eine allgemeine Bedeutung ableiten kann. Sie sehen aus wie das, was sie bedeuten.
Denken Sie an die Symbole für männliche und weibliche Toiletten. Eine menschliche Figur in einer Hose oder einem Kleid ist ziemlich einfach zu interpretieren, unabhängig davon, ob Sie diese Bilder jemals gesehen haben oder nicht oder ob Ihnen ihre Bedeutung jemals erklärt wurde.
Dinge wie Pfeile, Rollstühle und Symbole, die vereinfachte Formen physischer Dinge sind, fallen häufig auch unter ikonische Bilder. Icon-Sets (wie UXPins kostenloses Icon Pack ) sind oft eine ausgezeichnete Quelle für ikonische Bilder, da sie offensichtlich und leicht mit oder ohne Textbeschriftungen zu interpretieren sein müssen.
Diagramme, Diagramme und wissenschaftliche Illustrationen sind Beispiele für ikonische Bilder. Sie repräsentieren Informationen buchstäblich auf eine Weise, die schwer falsch zu interpretieren ist (was der Eckpfeiler eines ikonischen Bildes ist).
Denken Sie an die Symbole, die Sie wahrscheinlich im Web oder in einer Anwendung finden werden:
- Umschläge zur Angabe der E-Mail
- Ein Mülleimer zeigt an, dass etwas gelöscht wurde
- ein Haus, um die Homepage anzuzeigen
- eine Festplatte, um anzuzeigen, dass etwas gespeichert wurde
- ein Häkchen, um den Abschluss der Aufgabe anzuzeigen
Unabhängig von der vorherigen Kenntnis dieser Symbole in einer bestimmten Einstellung können die meisten Benutzer eine fundierte Vermutung darüber anstellen, was durch Klicken auf diese Symbole ausgelöst wird.
Während einige Symbolbilder möglicherweise als symbolisch begonnen haben (mehr über symbolische Bilder im nächsten Abschnitt), sind viele jetzt so weit verbreitet, dass sie zu Symbolen geworden sind.
Wie Sie anhand einiger Symbole in der Prototyping-App sehen können UXPin Das Ordnersymbol wird allgemein als Symbol zum Öffnen einer Datei anerkannt, aber der Ordner selbst zeigt dies ohne seine langjährige kulturelle Assoziation nicht an.
Gleiches gilt für das häufig verwendete 'Zahnrad' -Symbol für den Zugriff auf Einstellungen sowie für die Symbole zum Hochladen (normalerweise mit einem nach oben zeigenden Pfeil) und zum Herunterladen (einschließlich eines nach unten zeigenden Pfeils) und viele andere.
Dies ist ein häufiges Ergebnis eines Bildes, das Teil der Mainstream-Kultur wird: Seine Bedeutung kann so fest werden, dass es allgemein anerkannt wird, auch wenn diese Bedeutung ursprünglich gelernt werden musste. Wie in beschrieben Best Practices für das Web-UI-Design Sie müssen nicht immer neue kreative Wege beschreiten: Verwenden Sie allgemein akzeptierte Symbole, um ein grundlegendes Verständnis zu schaffen, und fügen Sie dann nach Bedarf kreative Schnörkel hinzu.
Eines ist zu beachten: Nicht alle Symbole sind Symbole. Einige müssen noch erklärt werden, bevor sie richtig interpretiert werden (bekannt als expliziter Signifikant).
Designer entscheiden sich manchmal für die Verwendung von Symbolen, die an das Design oder Thema ihrer eigenen Site angepasst sind. Diese Arten von Symbolen müssen jedoch möglicherweise aus Gründen der Übersichtlichkeit gekennzeichnet werden, da sie rein symbolisch sind. Zumindest sollte ein Etikett erscheinen, wenn Sie mit der Maus darüber fahren. In Fällen, in denen Benutzer die Bedeutung eines Symbols sofort erkennen sollen, bleiben Sie bei Bildern, die tatsächlich Symbole sind.
02. Symbolische Bilder
Symbolische Bilder sind abstrakter als ikonische Bilder und vermitteln oft mehr ein Gefühl oder eine allgemeine Idee als ein bestimmtes konkretes Objekt. Symbolische Bilder werden sehr oft in Logos gesehen, da sie die Gefühle verstärken, die eine Marke vermitteln möchte.
Das Microsoft Windows-Logo ist beispielsweise eine abstrakte Darstellung eines Fensters, jedoch keine direkte Interpretation. Jemand könnte es interpretieren, um etwas anderes darzustellen, insbesondere wenn sie aus einer Kultur stammen, in der ein anderer Fensterstil üblicher ist.
Symbolische Bilder müssen im Allgemeinen ihre Bedeutung haben. Sie sind nicht sofort erkennbar, weil sie nicht wörtlich sind. Bis die Bedeutung gelernt ist, können sie weithin interpretiert werden.
Stattdessen werden symbolische Bilder verwendet Semiotik - visuelle Grammatik - um mehr Bedeutung zu vermitteln als ikonische Bilder. Symbolische Bilder sind visuelle Metaphern, und diese Metaphern müssen oft gelernt werden, um richtig interpretiert zu werden.
Zugegeben, viele Symbole werden auf kultureller Ebene erkannt, da sie häufig mit bestimmten Dingen oder Ideen verwendet werden.
Ein Beispiel wären Verkehrszeichen wie Stoppschilder (die in den meisten Ländern achtseitig sind, in Japan jedoch nur dreiseitig und dem US-amerikanischen Ertragsschild ähnlicher sind, und in zahlreichen anderen Ländern ist das Schild ein Kreis mit ein Dreieck darin). Und wenn Sie jemanden aus einem Land fragen, was die Verkehrszeichen eines anderen Landes bedeuten, wird er wahrscheinlich einen beträchtlichen Prozentsatz davon falsch sehen.
Dies liegt daran, dass diese Bilder eher symbolisch als ikonisch sind. Ihre Bedeutungen müssen gelehrt werden und basieren oft eher auf kulturellen Assoziationen als auf universellen Verständnissen.
Ein Beispiel in der Welt des Webdesigns ist das Hamburger-Menüsymbol. Obwohl es einem Menü etwas ähnelt, ist das Bild zu abstrakt, um genau als ikonisch bezeichnet zu werden. Infolge, eine Studie tatsächlich festgestellt, dass seine Interpretation altersabhängig ist. Tatsächlich verstanden 80 Prozent der Benutzer zwischen 18 und 44 Jahren seine Bedeutung, während nur 52 Prozent der älteren Benutzer verstanden.
03. Indexbilder
Indexbilder verknüpfen Bedeutungen zwischen dem Erscheinungsbild des Bildes und seiner Darstellung. Ein Thermometer, das anzeigt, dass es unter Null liegt, zeigt beispielsweise an, dass etwas kalt ist.
Indexbilder sind einige der am häufigsten vorkommenden Bilder in Werbung und Design. Wir neigen dazu, Dinge nicht zu wörtlich darzustellen, oft, weil wir es vorziehen, eine Emotion hervorzurufen, anstatt dem Benutzer wörtliche Informationen in den Rachen zu schieben.
Betrachten Sie diese beiden Beispiele:
- Würden Sie aus Trauer ein Bild von einer weinenden Person (buchstäblich) oder einen dunklen, wolkigen Tag verwenden, an dem es regnet und ein Kinderfahrrad unbenutzt und durchnässt im Vorgarten sitzt (emotional)?
- Würden Sie ein Bild von jemandem verwenden, der lächelt (wörtlich), oder von einem niedlichen Welpen, der im Sand spielt (emotional), um Glück hervorzurufen?
Beide Arten von Bildern weisen auf eine Emotion hin, aber das letztere Beispiel lässt den Benutzer eher etwas fühlen, als nur an das Wort für die Emotion zu denken.
Angenommen, Sie möchten Menschen nostalgisch machen, wenn sie Ihre Website besuchen. Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber mit Bildern zu beginnen, die dieses Gefühl hervorrufen, ohne „NOSTALGIA“ zu schreien, ist ein guter Anfang. Wenn Ihre Zielgruppe wahrscheinlich in den Dreißigern ist, können Sie Bilder verwenden, die an die 1980er Jahre erinnern, da dies die Zeit war, als Ihre Zielgruppe aufwuchs.
Sie können den gleichen Effekt mit abstrakteren visuellen Elementen wie Farbpaletten erzielen. Die Verwendung einer Neonfarbpalette, die an die späten 80er und frühen 90er Jahre erinnert, wird sofort einen ganz anderen Eindruck hinterlassen als eine Farbpalette aus rosigen Rosa und gedämpften Aquas, die in den 1950er Jahren häufiger vorkam.
Welches funktioniert am besten?
Alle drei Bilder haben ihren Platz in gutem Design. Wie bei allen Entwurfstechniken hängt alles von den Parametern Ihres Projekts ab. Das heißt aber nicht, dass es keine guten Grundregeln gibt.
Wenn Sie die grundlegende Navigationsstruktur Ihrer Website erstellen, möchten Sie wahrscheinlich bei Bildern bleiben, die ikonisch sind oder die die Grenze zwischen ikonisch und symbolisch ziehen. Sie möchten nicht, dass Ihre Besucher ein bestimmtes Bild betrachten und sich fragen, was passiert, wenn sie darauf klicken.
Aus diesem Grund müssen Grafiken wie Symbole, die für die Navigation verwendet werden, allgemein erkennbar und so nah wie möglich an Symbolen sein. Es gibt unzählige Optionen für Symbole, unabhängig davon, ob Sie Ihre eigenen entwerfen oder ein vorgefertigtes Set verwenden möchten. Stellen Sie nur sicher, dass Sie ein Set finden, das für Ihre Besucher leicht zu interpretieren ist, und haben Sie keine Angst, es zu kennzeichnen, wenn es nicht sofort klar ist.
Das Auffinden der Bilder, die Sie auf Ihrer Website verwenden möchten, ist weitgehend ein Kinderspiel. Es gibt nur so viele Dinge, die buchstäblich repräsentieren, was Sie vermitteln möchten. Am schwierigsten ist es, Bilder zu finden, die den richtigen Stil für Ihr Gesamtdesign haben.
Für andere visuelle Elemente Ihrer Website und insbesondere für die visuellen Inhalte, die den Inhalt begleiten, können Sie jedoch mehr kreative Freiheit ausüben. Sie können abstraktere Bilder verwenden, die durch den Kontext anderer Bilder und anderer Arten von Inhalten auf Ihrer Website deutlich werden.
Ihre Entscheidung, ein symbolischeres Bild oder ein abstrakteres Indexbild zu verwenden, hängt sowohl vom allgemeinen Stil und Inhalt Ihrer Website als auch von Ihrer Zielgruppe ab.
Eine Möglichkeit, indexische Bilder zu finden, wenn Sie sich nicht sicher sind, wie Sie eine Idee vermitteln möchten, ist die Verwendung der Stichwortsuche auf Foto-Sharing-Websites wie Flickr oder Stock-Foto-Websites (verwenden Sie unbedingt Bilder mit einem entsprechende Lizenz wenn Sie sie tatsächlich in Ihrem Design verwenden, anstatt nur die Suche als Inspiration zu verwenden).
Wenn Sie beispielsweise auf Flickr nach 'Liebe' suchen, erhalten Sie eine Vielzahl von Bildern, die Liebe darstellen können: Herzen, Blumen (insbesondere Rosen), den Eiffelturm, glückliche Paare, eine beunruhigende Anzahl von Bildern von Käfern, die sich paaren als einige, die das Wort 'Liebe' in verschiedenen Medien direkt darstellen. Dies bietet einen guten Ausgangspunkt, um genau die Bilder zu finden oder zu erstellen, die Sie möglicherweise in meinem Design verwenden möchten.
Ein anderes Beispiel wäre die Suche nach etwas wie 'Angst'. Sie erhalten Bilder von Horrorfilm-Bösewichten, Höhen, Gewalt, Menschen, die Angst zu haben scheinen, verschiedenen Tieren und ähnlichen Bildern. Es ist klar zu erkennen, welche Arten von Bildern bei einem Besucher Angst hervorrufen können.
Diese Art der Recherche ist wichtig, um festzustellen, welche Arten von Bildern Sie beim visuellen Geschichtenerzählen vermeiden sollten. Sie können ein bestimmtes Bild nicht mit einer bestimmten Idee verknüpfen, aber ein wenig Forschung könnte ergeben, dass ein erheblicher Teil der Bevölkerung eine Korrelation herstellt.
Machen Sie einen Spielplan
Stellen Sie eine freie Verknüpfung mit diesen Konzepten und den Arten von Bildern her, die Sie möglicherweise verwenden. Suchen Sie auch nach Bildern, die auf diesen Schlüsselwörtern basieren, und beginnen Sie mit dem Brainstorming, was am besten zusammenarbeitet und was Sie auf jeden Fall weglassen möchten.
Wenn Sie mehr visuelle Designtechniken wünschen, lesen Sie das kostenlose E-Book Das Visual Storyteller-Handbuch zum Web-UI-Design . Viele Tipps werden durch die Analyse von 29 Beispielen von Unternehmen wie Tesla, Fitbit, Microsoft, Squarespace, Foursquare und anderen bereitgestellt.
Wörter : Jerry Cao
Jerry Cao ist Content-Stratege bei UXPin - die Wireframing- und Prototyping-App - wo er In-App- und Online-Inhalte für die Wireframing- und Prototyping-Plattform entwickelt.
So was? Lese das!
- 3 kostenlose Fotosuchwerkzeuge, die das Auffinden von Bildern erleichtern
- So bereiten Sie Ihre Bilder für die Webnutzung vor
- Beschleunigen Sie Ihre Website, indem Sie Bilder verwischen
