7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Theory

9 Information Design Tipps, um Sie zu einem besseren Web Designer

Scroll to top
Read Time: 13 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Es ist wahrscheinlich der am wenigsten glamouröse Teil des Webdesigns, aber Informationsdesign ist keineswegs das Geringste. Informationen zu finden und zu konsumieren ist die Quintessenz der Web-Aufgabe, die weit über das Kaufen, Spielen und Kommunizieren hinausgeht. All das beinhaltet eine große Portion Informationsdesign. Wie Benutzer diese Informationen finden und dann nutzen, hängt davon ab, wie sie strukturiert und präsentiert werden. Daher sollte jeder Webdesigner in der Lage sein, qualifizierte und fundierte Entscheidungen zu treffen.

Dieser Beitrag ist Tag 3 unserer Webdesign-Sitzung. Creative-Sitzungen
«Sitzung Tag 2Sitzung Tag 4»/« Session Day 2Session Day 4 »

1 - Seien Sie methodisch

Informationsdesign ist ein Problem, das immer komplexer wird, je größer die Website ist. Aber auch eine kleine Website profitiert von einem methodischen Schritt-für-Schritt-Prozess, um herauszufinden, wie der Inhalt der Website bestellt und organisiert wird.Hier sind einige einfache Schritte, die Sie vielleicht machen möchten:

    1. Verstehen Sie den Inhalt, die Prozesse und den Zweck der Website
      Es ist ziemlich schwer, eine Menge Sachen zu organisieren, wenn man nicht weiß, was das eigentlich ist. Ihre erste Aufgabe besteht also darin, die Inhalte, Prozesse und Ziele der Website zu überfliegen. Der Inhalt einer Website bedeutet eine Kopie, Bilder, Videos und andere Inhalte, die Sie erhalten oder in denen Sie Informationen erhalten, die auf die Website gelangen. Die Prozesse einer Site sind die Aufgaben und Workflows, die Benutzer ausfüllen müssen, um mit einer Site interagieren zu können. Und die Ziele der Website beziehen sich sowohl auf beiden: die Ziele des Kunden als auch auf die des Benutzers.

      Bei einem einfachen Restaurantbeispiel könnten Sie also feststellen, dass Sie Text für die Seiten 1 bis 20 haben. Sie wissen, dass Benutzer versuchen werden, eine Aufgabe wie eine Reservierung abzuschließen. Sie können auch sehen, dass die Ziele eines Nutzers auf der Website darin bestehen, herauszufinden, was das Restaurant serviert, wo es sich befindet und ob es Tische gibt, und dann hoffentlich eine Reservierung vornehmen.  Letztendlich können die Ziele des Kunden darin bestehen, dem Benutzer zu dienen, aber auch, sie zu einer Reihe von Specials zu führen, die sie ausführen.

    2. Priorisieren und nach Benutzerpfaden suchen
      Sobald Sie einen festen Überblick über die Website haben, können Sie beginnen, Informationen zu priorisieren und herauszufinden, wie Benutzer die Website durchqueren.  Welche Wege werden sie nehmen, um ihre Ziele zu erreichen? Welche Seiten sind die wichtigsten? Was sollte man im Vorfeld sehen und welche Informationen unterstützen?

      Auch bei einem einfachen Beispiel wie unserer Restaurant-Website gibt es viele Möglichkeiten, die Informationen anzugeben. Zum Beispiel könnten Sie Specials direkt auf der Homepage drücken oder Sie könnten sie in den Reservierungsprozess einbinden, oder Sie könnten sie in den Menüs bearbeiten. Entsprechend können Sie feststellen, dass die Ziele eines Kunden eine andere Priorität für den Seiteninhalt haben. Vielleicht sagt Ihnen der Kunde, dass niemand dieses Restaurant jemals finden kann. Sie müssen also eine Seite "Wie komme ich her?" Erstellen und ihr eine hohe Priorität einräumen.

    3. Organisieren Sie die Informationen

      Mit einem Verständnis dessen, was in die Site hineingeht, und einem klaren Verständnis davon, wie die verschiedenen Elemente miteinander in Beziehung stehen, wie die Benutzer sie durcharbeiten wollen und wie wichtig verschiedene Bereiche sind, können Sie jetzt die Informationen für die Site organisieren . Diese Organisation umfasst nicht nur die Kategorisierung von Seiten - zum Beispiel das Herausfinden, dass "über das Unternehmen" in einen Tab "über" passt - sondern auch das Fragen und Umordnen der Inhalte, die Sie erhalten haben. Manchmal finden Sie vielleicht, dass es besser ist, mehrere Seiten zu kombinieren, einen langen Abschnitt zu trennen, einen Text in eine einfachere diagrammartige Darstellung umzuwandeln oder eine beliebige Anzahl anderer Umlagerungen.

      Entwickeln Sie eine Sitemap oder einen Plan, wie die Informationen in hierarchischer Weise angezeigt werden. Obwohl Sitemaps normalerweise nur aus einer Reihe von Feldern bestehen, die Seiten anzeigen, können Sie in allen möglichen zusätzlichen Informationen darüber arbeiten, wie die Site eingerichtet wird, einschließlich der schnellen Links von der Startseite, wie verschiedene Bereiche miteinander verknüpft werden können und Wege, die ein Benutzer durch eine Sitemap einnehmen könnte.


Nachdem wir festgestellt haben, dass es auf den Marktplätzen so viele Informationen gibt, glauben wir jetzt, dass ein Wiki der effektivste Weg ist, es zu organisieren

2 - Denken Sie außerhalb der Box

Sites mit einer angemessenen Komplexität können auf viele verschiedene Arten neu angeordnet und reorganisiert werden. Eine Site, an der ich unzählige Male organisiert und reorganisiert habe, ist FlashDen. Ich habe nicht mehr gezählt, wie oft ich das Menü angesehen und neu angeordnet habe. In einigen Fällen verschieben wir einfach Seiten in verschiedene Gruppen und Gruppen, sodass sie logischer erscheinen, und in anderen Fällen haben wir mehr Out-of-the-Box-Denken eingeführt.

Vor einigen Monaten wurde das Menü zum Beispiel zu komplex, so dass wir einen ganzen Haufen der "flauschigeren" Menüelemente entfernten und einen Blog erstellten, der jetzt Wettbewerbe, Newsletter, Unterseitenlinks und andere Seiten enthält, die das Menü überfluteten.

Kürzlich haben wir festgestellt, dass wir viele "Nachzügler" haben - das sind Seiten ohne Zuhause im Menü. Aus der Sicht des Informationsdesigners sind Nachzügler schrecklich - selbst ich kann mich nicht erinnern, wie ich zu einigen von ihnen komme!  Die Lösung besteht diesmal darin, ein Wiki-System zu erstellen, Inhalte auf oberster Ebene in das Menü hinter den Kulissen zu integrieren und dann das Wiki zu nutzen, um tiefere Informationsebenen mit eigenen Such-, Tagging- und Kategorisierungsfunktionen zu beherbergen.

Der Sinn meiner Erfahrungen mit FlashDen ist, dass das Organisieren von Informationen nicht unbedingt notwendig ist, um sie in Menüs und Untermenüs zu bringen. Möglicherweise stellen Sie fest, dass einige Informationen nicht auf einer Website vorhanden sein sollten oder dass eine Unterwebsite erforderlich ist oder dass Sie etwas ganz anderes tun müssen.  Mit FlashDen habe ich den Vorteil, dass ich seit fast 3 Jahren den Inhalt betrachte und bis heute finde ich neue Arrangements und Lösungen.

Um ein effektiver Informationsdesigner zu sein und die optimalsten Lösungen zu finden, muss man oft out of the box denken. Natürlich ist es viel einfacher zu sagen "Denken Sie über den Tellerrand hinaus" als zu tun! Manchmal sind wir in einer Box eingeschränkt, die wir nicht sehen können.  Vor einiger Zeit habe ich von einem Experiment gehört, bei dem ein Haufen springender Käfer in eine Glasbox gesteckt wurde und im Laufe der Zeit gelernt hat, nur so hoch zu springen. Als der Glasdeckel entfernt wurde, sprangen die Käfer weiter auf derselben, beschränkten Höhe, ohne zu merken, dass sie es könnten, wenn sie raus wollten.

Wie überwinden Sie eine Kiste, die Sie nicht sehen können? Einfach! Mit Hilfe von anderen, die nicht durch dieselben Probleme eingeschränkt sind.  Für komplexe Informationsdesigns werde ich oft andere Leute nach organisatorischen Ideen fragen, die ihnen nur das rohe Problem und nicht meine eigenen Permutationen geben.  Wenn man die Ideen eines Programmierers oder die Ansichten eines Benutzers sagt, werden Sie oft überraschen, da sich ihre Perspektiven völlig von Ihren eigenen unterscheiden und nicht von den gleichen Denkweisen gestört werden.


Wenn jemand eine riesige Website hat, muss es Chevron sein. Wie würdest du all diese Informationen organisieren?

3 - Halten Sie Ihre Struktur ausgeglichen

Wenn Sie große Mengen von Informationen organisieren, stellt sich natürlich immer die Frage, wie tief oder wie breit Ihre Navigation sein soll. Die Tiefe bezieht sich darauf, wie viele Ebenen von Kategorien und Unterkategorien es gibt, während die Breite angibt, wie viele Ebenen jeder Ebene vorhanden sind.Der Trick ist, das Gleichgewicht zu finden.  Wenn auf einer Ebene zu viele Elemente vorhanden sind - insbesondere auf der obersten Ebene - riskieren Sie, den Benutzer zu verwirren. Auf der anderen Seite, wenn ein Benutzer auf viele Ebenen klicken muss, riskieren Sie sie zu verlieren.

Eine gute Faustregel ist, die Anzahl der Optionen auf einer bestimmten Ebene auf 4 - 8 zu halten. Wenn Sie 8 Elemente der obersten Ebene mit jeweils 8 Unterkategorien und jeweils 8 Unterkategorien haben, haben Sie genug Platz für ein Site mit 512 Seiten. Natürlich balancieren sich die Dinge selten so gut aus. Man muss also wieder aufpassen, dass man keine schwere Seite und keine helle Seite hat. Zum Beispiel, auf einer Seite mit ein paar hundert Seiten, wenn Sie den Kontakt irgendwo auf die oberste Ebene stellen, wird es wahrscheinlich keine 8 Unterkategorien mit 8 Unter-Unterkategorien geben. Es ist wahrscheinlicher, dass der Kontakt ein ziemlich einfacher Abschnitt sein wird - selbst für eine komplexe Site.

Auf der anderen Seite, wenn Sie nicht so etwas wie Kontakt auf die oberste Ebene setzen, erhalten Sie möglicherweise eine ausgewogenere Informationstiefe, jedoch riskieren Sie, dass keine wichtige Benutzeraufgabe erledigt wird, da es schwierig ist, herauszufinden, wie Sie es finden die Kontaktinformationen.  Eine einfache Lösung für dieses spezielle Problem könnte darin bestehen, 'schnelle Links' hinzuzufügen, wo Sie einem Benutzer einige Optionen auf der Homepage geben, um tiefer in die Struktur zu springen, ohne den üblichen Weg zu gehen.


Bei NETTUTS haben wir uns dazu entschlossen, die Benutzergewohnheiten durch die Platzierung von Demo und Source-Buttons zu erleichtern.

4 - Design zum Scannen, Skimming und Springen

Ich weiß nichts über Sie, aber es ist sehr selten, dass ich jemals eine Webseite vollständig lesen werde. Ob es darum geht, Anweisungen, Bedingungen oder nur eine normale Kopie zu lesen, die meiste Zeit überfliege ich, scanne und springe. Angenommen, ich bin nicht der Einzige, der dies tut, ist es sinnvoll, Seiten so zu gestalten, dass sie diese Art des Informationskonsums erleichtern.

Wickeln Sie Schlüsselinformationen nicht in Textbündel ein - markieren Sie sie. Geben Sie den Benutzern keine Absätze - teilen Sie sie mit Überschriften, Zwischenüberschriften, Aufzählungszeichen, Diagrammen, was immer es braucht!  Denken Sie darüber nach, wie ein Nutzer Ihre Website nutzen und gestalten wird, um deren Nutzung zu erleichtern.

Ein gutes Beispiel für die Gestaltung des Benutzerverbrauchs ist unsere Schwesterseite NETTUTS, eine Website, die, wie die meisten von Ihnen wissen, Tutorials zu Webentwicklungsthemen veröffentlicht. Nun ist bei NETTUTS schon früh aufgefallen, dass die meisten Leute beim ersten Durchsehen eines Tutorials bis zum Ende überspringen, wo sie versuchen, einen Link zu einem Demo - und / oder Quellcode zu finden, damit sie entscheiden können, ob das Tutorial in der erster Platz.  Sobald wir das erkannt hatten, war es eine einfache Sache, spezielle Demo und Source Buttons hinzuzufügen und sie am Anfang der Tutorials zu platzieren. Diese einfache Anpassung, um unser Design an die Benutzerverbrauchsmuster anzupassen, hat uns viele positive Rückmeldungen erhalten.


PatternTap ist ein guter Ort, um Ideen zu bekommen und zu sehen, wie andere Leute Artikel und Textinformationen entwerfen

5 - Schaffen Sie den Text, den alle lesen werden

Ich bin mir nicht sicher, ob ich gerade älter werde, oder wenn ich meine ganze Zeit vor einem Bildschirm verbringe, macht mich nur wählerisch, aber in letzter Zeit nervt es mich wirklich, wenn mir Text präsentiert wird, der mich nicht dazu zwingt Lies es. Das Ziel eines Website-Designs besteht in der Regel darin, Informationen zu übermitteln, und das meiste davon ist geschriebener Text, so dass die Fokussierung auf eine gute Darstellung Priorität haben sollte.

Zu kleine Schriftgrößen, geringer Kontrast zwischen Text und Hintergrundfarbe oder schlechtes Verwenden von hellem Text auf dunklem Hintergrund sind Designssünden, die wir alle begangen haben (ich bin bei vielen Gelegenheiten dabei!) Aber darüber hinaus, Es gibt andere Möglichkeiten, wie Ihr Design den Besucher tatsächlich lesen kann. Ziel ist es, das Layout so zu gestalten, dass es die Besucher auf die Kopie fokussiert und sie mit Titeln, Zwischenüberschriften, Abgrenzungen, Pullquotes und anderen Techniken zum Ziehen des Auges anleitet.


Ein einfaches Beispiel für die Benutzerführung durch eine Site - ThemeForest's 4-Step-Guide

6 - Führen Sie den Benutzer sowohl über Seiten als auch durch Seiten

Zuvor habe ich Benutzerpfade erwähnt - das sind Wege, auf denen Benutzer dazu neigen, eine Website zu durchqueren. Viele davon werden einfach durch die Art und Weise entstehen, wie sich die Leute verhalten, aber bei der Planung können Sie wählen, wie ein Benutzer sowohl durch eine einzelne Seite als auch über mehrere Seiten geführt wird. Sobald Sie bestimmte Pfade kennen, können Sie in visuellen Hilfslinien und Links arbeiten, um ihnen zu helfen, sich auf diesem Pfad zu bewegen.

Zum Beispiel bei FlashDen, wenn ein neuer Benutzer ankommt, ist es unser Ziel, sie dazu zu bringen, sich zu registrieren, Dateien zu finden, Geld einzuzahlen und dann diese Dateien zu kaufen.  Also geben wir ihnen zunächst eine Zusammenfassung des vierstufigen Prozesses auf der Homepage, dann gibt es bei jedem Halt Hinweise, um den Benutzer auf den nächsten Schritt zu bringen. Bei unserem nächsten Redesign hoffe ich, dass dieser Weg noch offensichtlicher wird, da es für die Website unerlässlich ist, so zu arbeiten, wie sie sollte. Beachten Sie, dass der beschriebene Pfad nicht 4 Seiten, sondern 4 Aufgaben umfasst. Zum Beispiel kann das Suchen von Dateien den Benutzer dazu bringen, Dutzende von Seiten zu betrachten, aber es ist eine einzelne Aufgabe. Benutzerpfade müssen nicht über festgelegte Seiten hinausgehen, sie können ebenso einfach festgelegte Aufgaben umfassen!


Steve Krugs sehr lohnendes Buch!

7 - Übertreibe die Dinge nicht

Es sollte selbstverständlich sein, dass einfach für die Benutzer besser ist als kompliziert. Nichtsdestoweniger ist es allzu einfach, Designs zu kompliziert zu machen. Ich weiß, dass ich die Dinge oft komplizierter erscheinen lasse, so dass ich mehr visuelle Elemente auf einer Seite habe, mit der ich arbeiten kann (böser Collis, böser Collis!).  Eine weitere Überkompensations-Sünde verwendet unnötige Wörter auf Tasten und Handlungsaufforderungen. Steven Krug in seinem ausgezeichneten Buch Do not Make Me Think gibt das Beispiel einer hypothetischen Arbeitsstätte mit einem Knopf, der lautet:

  • Arbeitsplätze
  • Beschäftigungsmöglichkeiten
  • Jobs-O-Rama

Einer davon ist klar, einer ist einigermaßen offensichtlich, und einer ist - na, wer weiß.


Informationen können als mehr als nur Text dargestellt werden!

8 - Informationen visualisieren

Als Designer kennen wir mehr als die meisten den Wert eines guten Visuellen. Und es gibt viele Möglichkeiten, um Daten, Konzepte oder Informationen zu visualisieren oder zu visualisieren. Dieser Artikel, wie Sie sich erinnern werden, beginnt mit einem sehr grundlegenden Diagramm, wie Interface Design, Information Design und ästhetisches Design zusammenhängen. Diese Bilder unterbrechen nicht nur den Text, sondern sind auch einprägsamer und geben Ihnen die Möglichkeit, eine Seite zum Leben zu erwecken.

DoshDosh hat einen interessanten Artikel über Informationsvisualisierung, Diagramme und das, was der Autor Infografiken nennt, die es wert sind, ausgecheckt zu werden, auch wenn es nur um die brillanten grafischen Beispiele zu sehen ist.


Das Analysieren von Pfaden und Zielen war dank Tools wie Analytics noch nie einfacher

9 - Analysieren Sie Ihr Informationsdesign

Informationsdesign ist eines der Dinge, die auf Anhieb schwer zu bekommen sind. Sobald Sie eine Website erstellt haben, sollten Sie sie analysieren, um zu sehen, wie die Benutzer die Informationen verwenden und verarbeiten, wie sie sich verhalten und wo Sie Ihr Design verbessern können.

Ein nettes Tool in diesem Zusammenhang ist Google Analytics. Wo ich beispielsweise zuvor Nutzerpfade erwähnt habe, können Sie in Analytics mithilfe der Zielfunktion Pfade durch Seiten verfolgen. Sie richten eine Reihe von Seiten ein, und Analytics meldet die% der Besucher, die den Vorgang abgeschlossen haben (und per Klick an der Erweiterung), an jedem Punkt.

Eine weitere Analysefunktion, die Sie verwenden können, ist die Suche nach Suchbegriffen, mit der Sie sehen können, wonach Nutzer auf dem Suchfeld Ihrer eigenen Website suchen. Zu wissen, wonach Menschen suchen, sagt Ihnen, welche Informationen leichter verfügbar sein müssen!

Dieser Beitrag ist Tag 3 unserer Webdesign-Sitzung. Creative-Sitzungen
«Sitzung Tag 2Sitzung Tag 4» /« Session Day 2Session Day 4 »
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.