Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » FAQ-Seiten gestalten

FAQ-Seiten gestalten

FAQ-Seiten sind ein wesentlicher Bestandteil vieler Webseiten. Sie werden nicht von jeder Site benötigt, wenn Sie jedoch etwas verkaufen, eine Dienstleistung anbieten oder Informationen über ein komplexes Thema liefern, können FAQs Ihren Besuchern das Leben sehr erleichtern.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 7 Minuten
  • von Cameron Chapman
  • 2. Juni 2010
Bookmarke mich
Share on pocket

FAQ-Seiten sind ein wesentlicher Bestandteil vieler Webseiten. Sie werden nicht von jeder Site benötigt, wenn Sie jedoch etwas verkaufen, eine Dienstleistung anbieten oder Informationen über ein komplexes Thema liefern, können FAQs Ihren Besuchern das Leben sehr erleichtern.

Das Format einer FAQ-Seite ist je nach Site sehr unterschiedlich, es gibt also keine wirklich „richtige“ Gestaltungsmethode. Allerdings sind da einige entscheidende Dinge, die man nicht vergessen sollte. Um es einfach zu halten, merken Sie sich einfach F.A.Q.: Fokussieren Sie sich auf Informationen, Assistieren Sie Ihren Besuchern durch Interaktion und Quo vadis – stellen Sie den derzeitigen Status in Frage. Für eine entsprechende Erklärung und Ideen für die Implementierung lesen Sie weiter. Zu Referenzzwecken haben wir außerdem drei Beispiele für FAQ-Seiten behandelt.

Fokussieren Sie sich auf Informationen

Wir alle wissen, dass der Inhalt König ist. Wenn es jedoch um FAQ-Seiten geht, sind die Informationen, die Sie präsentieren, wirklich das absolut wichtigste Ding. Sie müssen sicherstellen, dass die Präsentation der Inhalte in einer möglichst effizientesten und effektiven Art und Weise erfolgt.

Information steht an erster Stelle

Das einzige, worum es bei einer FAQ-Seite geht, ist das Anbieten von Informationen für Ihre Besucher. Wenn Sie diese Seiten gestalten, stellen Sie sicher, dass die Informationen an erster Stelle stehen. Mit anderen Worten, lassen Sie nicht zu, dass Ihre Design-Entscheidungen den Inhalt überschatten.
Lulu FAQ
Die Website von Lulu bietet auf ihren FAQ-Seiten ein Design, das geradeheraus und auf den Inhalt fokussiert ist.

Form folgt der Funktion

Vermeiden Sie grelle Designs, verspielte Layouts und andere Gestaltungselemente, die vom Inhalt Ihrer Seiten ablenken. Halten Sie sich an eine leicht lesbare Schriftarten, entsprechenden Kontrast und ein ziemlich einfaches Layout.
Amazon New Seller FAQ
Obwohl die doppelten seitlichen Scrollbalken die Seite von Amazon ein bisschen unaufgeräumt wirken lassen, konzentriert sie sich doch auf den Inhalt in der mittleren Spalte.

Längere FAQs organisieren

Denken Sie darüber nach, wie Sie Ihre FAQ-Seite am besten organisieren. Je länger Ihre FAQ-Seite ist, desto mehr Sorgfalt müssen Sie darauf verwenden, um sicherzustellen, dass die Besucher die Antworten finden, die sie suchen.

Lulu FAQ sidebar
Bei Lulu sind die FAQs in der Seitenleiste nach Kategorie und Unterkategorie organisiert, wodurch jede FAQ-Kategorie aus jeder anderen Kategorie heraus zugänglich ist.

Kategorien schaffen Überblick

Kategorien sind der beste Weg, um eine längere FAQ-Seite zu organisieren. Wie Sie Ihre Kategorien definieren, liegt natürlich ganz bei Ihnen und Sie sollten sich gezielt an der Site orientieren. Das Ziel von Kategorien ist es, es Ihren Besuchern leichter zu machen, die Informationen zu finden, die sie suchen. Stellen Sie daher sicher, dass die Kategorien logisch sind und nicht zu viele Fragen beinhalten. Dennoch möchten Sie nicht mehr Kategorien haben, als nötig sind.

Creative Commons Full FAQ

Die komplette FAQ-Seite von Creative Commons verwendet ein Inhaltsverzeichnis, um alle Fragen und Antworten in ihren FAQ zu umreißen und zu verlinken. Sie ist ein bisschen lang, aber immer noch ein vernünftiger Weg, um diese Art von FAQ-Seite zu organisieren.

Denken Sie daran, dass alles, was Sie im Hinblick auf die Organisation auf Ihrer FAQ-Seite tun, mit Ihrem Enduser im Hinterkopf geschehen sollte. Sie möchten es Ihren Besuchern leichter machen, das Gesuchte zu finden. Indem Sie es leichter machen, die Informationen zu finden, steigern Sie die Wahrscheinlichkeit, dass sie mit Ihnen Geschäfte tätigen.

Machen Sie sie leicht auffindbar

Was nützt es, einen FAQ-Bereich zu haben, wenn Ihre Besucher ihn nicht finden können? Die Antwort: Er nützt nichts. Ihre FAQ-Seite muss für Ihre Besucher leicht zu finden sein, ansonsten brauchen Sie noch nicht einmal eine anzubieten.

Creative Commons Abbreviated FAQ
Creative Commons bindet in der oberen Navigation einen Link ein, der direkt zu den abgekürzten FAQs führt. Von da aus steht ein Link zu den vollständigen FAQs zur Verfügung.

Es gibt ein paar logische Stellen für die Platzierung Ihrer FAQs. Der erste logische Ort ist in Ihrer Hauptnavigation. Einige Sites verwenden eher einen FAQ-Link als die Links „Hilfe“ oder „Über uns“, je nach Natur ihrer Site.

Amazon Help
Amazon verlinkt von der Haupt-Hilfeseite zu den gängigsten FAQ-Themen.

Die nächste logische Stelle, wo man sie platzieren kann, ist als ein Unterabschnitt Ihrer Seiten „Hilfe“ oder „Über uns“. Wenn jemand eine Frage über Ihre Site oder Ihr Unternehmen hat, sind die Abschnitte „Hilfe“ oder „Über uns“ wahrscheinlich die ersten Stellen, an denen er nachsehen wird.

Assistieren Sie Ihren Besuchern durch Interaktion

Die Art und Weise, in der Ihre User mit Ihren FAQs interagieren, ist von entscheidender Bedeutung. Durchdenken Sie die Art und Weise, in der Ihre Besucher die von Ihnen präsentierten Informationen tatsächlich nutzen werden und machen Sie es ihnen so leicht wie möglich.

Anklickbare Fragen

Wenn Sie in Ihren FAQs mehr als acht oder zehn Fragen haben oder wenn die Antworten auf diese Fragen jeweils länger als ein Absatz sind, ist es eine gute Idee, die Fragen aufzulisten, ohne die Antworten direkt unter ihnen zu zeigen. Dadurch ist der Inhalt leichter zu erfassen.

Lulu FAQ Clickable Questions


Lulu listet die Fragen im oberen Abschnitt einer jeden Kategorieseite auf und verlinkt sie mit der entsprechenden, weiter unten stehenden Antwort.

Es gibt zwei Wege, die Sie gehen können, um anklickbare Fragen zu erstellen. Der erste Weg ist, Ihre Fragen oben zu platzieren und die Antworten getrennt am Ende, mit Ankerlinks, die die Fragen mit den entsprechenden Antworten verbinden. Das ist eine großartige Methode, die Sie verwenden können, wenn Sie nicht mit JavaScript arbeiten möchten.
Der andere Weg ist die Verwendung von JavaScript, um die Antworten zu verbergen. Mit dieser Methode erscheint die Antwort umgehend unter der Frage, sobald ein Besucher auf eine solche Frage klickt. Einige Designer animieren das (mit einem Ziehharmonika- oder Einschubeffekt), während andere die Antwort einfach erscheinen lassen und die Frage nach unten springt.

Machen Sie es einfach, eine neue Frage zu stellen

Wenn jemand die Antwort auf seine Frage nicht in den FAQ finden kann, ist es wahrscheinlich, dass er Sie direkt fragen möchte. Stellen Sie sicher, dass Sie ein Frage- oder Kontaktformular einbinden, das leicht von Ihrer FAQ-Seite aus zu erreichen ist.

Amazon New Seller FAQ Support

Amazon platziert seine Support-Kontaktwege auf den FAQ-Seiten in markanter Weise.

Stellen Sie den derzeitigen Status in Frage

Während FAQ-Seiten das Augenmerk auf die Bereitstellung von Informationen für die Besucher legen müssen, gibt es keinen Grund, warum Sie bei der Art und Weise, wie Ihre FAQ-Seiten aussehen und agieren, nicht kreativ werden sollten. Es gibt eine ganze Reihe von unterschiedlichen Wegen die Sie gehen können, damit sich Ihre FAQ-Seite von der Masse abhebt und es ist ein Bereich, den viele Designer übersehen und dem sie nicht viel Zeit widmen.
Hier ein paar Ideen für einzigartige FAQ-Interfaces. Ich kann nicht dafür garantieren, dass sie nicht bereits vorher verwendet wurden, bin jedoch sicher, dass ich sie nie auf irgendwelchen FAQ-Seiten gesehen habe. Noch nicht.

Modale Fenster

Modale Fenster werden für alle möglichen Dinge verwendet, warum also nicht für FAQ-Seiten? Modale Fenster können, wenn sie gut gestaltet und implementiert sind, eine Site auf einer weiteren Ebene verfeinern, so dass sie sich wirklich von der Konkurrenz abhebt. Hier einige konkrete Ideen für das Einbinden von modalen Fenstern:

  • Wenn ein Besucher auf eine Kategorie klickt, lassen Sie die Fragen und Antworten für diese Kategorie in einem modalen Fenster erscheinen.
  • Wenn Sie keine riesige Anzahl von Fragen haben, erwägen Sie, dass sich die Antworten dazu in einem modalen Fenster öffnen. Das kann ganz besonders nützlich sein, wenn Sie die Fragenseite in Übereinstimmung mit Ihrem gesamten (nicht textfreundlichen) Design der Site halten möchten, die Antworten jedoch leichter lesbar sein sollen.
  • Eine andere Idee ist es, modale Fenster zu verwenden, um Ihre FAQs in den Rest Ihrer Site zu integrieren. Verlinken Sie zu FAQ-Themen innerhalb von anderen Seiten und lassen Sie sie in modalen Fenstern direkt auf der Seite erscheinen. Das erleichtert das Finden von Informationen über die bestimmten Themen, ohne dass der Besucher die Seite, auf der er sich befindet, verlassen muss.

Apple Store Modal Window
Apple verwendet modale Fenster, um bestimmte Dinge innerhalb des Stores zu erklären. Das Gleiche könnte leicht dazu verwendet werden, um FAQ-Informationen über Themen anzuzeigen.

Spaltenansicht

Sicherlich nicht der beste Name für dieses Layout, er passt jedoch. Grundsätzlich erscheinen bei diesem Design alle Ihre Fragen in einer Spalte. Wenn dann jemand auf eine Frage klickt, erscheint die Antwort in einer angrenzenden Spalte. Sie können die Spalten so gestalten, dass sie sich unabhängig voneinander scrollen oder zusammen scrollen lassen. Das ist eine ziemlich einfache Modifikation, würde jedoch wirklich gut funktionieren, wenn sie in ein minimalistisches Design einer Site eingebaut wird.

Horizontales Scrollen

Ich habe bis jetzt noch keine Website zu sehen bekommen, die sich innerhalb ihrer FAQ-Seite horizontales Scrollen zunutze macht. Mit der immer größeren Verbreitung von Widescreen-Monitoren wird horizontales Scrollen immer beliebter. Warum sollte man das nicht auf einer FAQ-Seite ausprobieren?

FAQs in Tabs

Wenn Sie nicht zu viele Kategorien haben, warum verwenden Sie dann nicht ein Tab-Interface für Ihre FAQ? Das wäre besonders hilfreich, wenn Sie AJAX-Tabs verwenden, um den Übergang zwischen den Kategorien nahtlos zu gestalten.
Tag Clouds – Schlagwortwolken
Wenn Sie eine sehr große FAQ-Seite haben, erwägen Sie eher die Organisation mit einer Schlagwortwolke als Standardkategorien. Die Leute werden in zunehmendem Maße vertrauter mit Schlagwortwolken und diese bieten einen großartigen Weg, Informationen zu finden und dabei gleichzeitig ein bisschen weniger formal als andere Kategorien zu bleiben.

Weitere Quellen

  • The Perfect FAQ Page! Die perfekte FAQ-Seite – ein Posting von Thierry Koblentz, das sich in die Programmieraspekte der Gestaltung einer großartigen FAQ-Seite vertieft.
  • How to Write an Effective FAQ Page Wie man eine effektive FAQ-Seite schreibt – ein Posting von Web Hosting Geeks, das sich auf die Inhalte konzentriert, die eine FAQ-Seite umfassen sollte.
  • Designing Your FAQ Page to Presale Gestalten Sie Ihre FAQ-Seite für die Marktvorbereitung – ein Posting von The Dabbling Mum, in dem über die Informationsarchitektur von FAQ-Seiten gesprochen wird.
  • Common Pages – FAQ Design Übliche Seiten – FAQ-Gestaltung – Eine sehr kurze Seite vom COI Usability Toolkit, die einige sehr wertvolle Informationen darüber liefert, wie man nützlichere FAQ-Seiten erstellt.

Zusammenfassung

FAQ-Seiten können zu den nützlichsten Bestandteilen einer jeden Website gehören. Ohne ein gut durchdachtes Userinterface können sie jedoch auch ein schwarzes (Informations)Loch sein. Machen Sie sich gründliche Gedanken darüber, wie Ihre Besucher Ihre FAQs tatsächlich nutzen werden und stellen Sie sicher, dass Sie ihre Bedürfnisse durch den gesamten Gestaltungsprozess hindurch berücksichtigen. Und vergessen Sie nicht, Ihre FAQ-Seite zusammen mit dem Rest der Interfaces Ihrer Seite zu testen.

(mm),

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Cameron Chapman

Cameron Chapman

Agenturpartner

Webagentur klickbeben

Innsbruck

Haurand Webdesign

Aachen

WeDeSu Online-Agentur

Speyer

Webtronix Media GmbH

Hanau

Werbeagentur Hannover | 360 Grad Konzept

Hannover

Alle Agenturpartner

Jobs

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

Elektroinstallateur – Rechenzentrum

Karlsruhe

API Developer für die TelemaxX Cloud

Karlsruhe

Teamleiter Online Marketing

München

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.