Wie auch in zwischenmenschlichen Beziehungen kann der erst Eindruck eines Nutzers von deiner Webseite entscheidend sein. Das schnelle, leichte Auffassen der wichtigen Information kann bestimmen, ob der Nutzer verweilt oder deine Webseite direkt wieder verlässt. Damit deine Nutzer nicht gleich das Weite suchen, gucken wir uns im ersten Teil der Website-Audit Serie den Ersten Eindruck deiner Webseite an.

    Erster Eindruck

    Der erste Schritt bei meinem Website-Audit ist es, die Webseite aufzurufen, durchzuscrollen und auf mich wirken zu lassen. Das mache ich mit dem Endgerät, welches ich gerade zur Hand habe. Bei mir ist das meistens im Arbeitsumfeld der Laptop, wenn ich unterwegs bin auch mal das Smartphone. Generell überprüfe ich aber jede Webseite auf unterschiedlichen Endgeräten.

    Bevor ich dir zeige, wie genau ich den ersten Eindruck einer Webseite ermittle, teste doch mal deine eigene Seite:

    Icon Checkliste Erster Eindruck
    30 Sekunden Test

    Wie gut ist der erste Eindruck deiner Webseite?

    1) Welche dieser Elemente sieht man vor dem ersten Scrollen auf deiner Webseite?

    Schritt 1/4

    Schritt 2

    Schritt 3

    Auswertung

    2) Welche der folgenden Elemente existieren auf deiner kompletten Startseite?

    Schritt 2/4

    Schritt 2

    Schritt 3

    Auswertung

    3) Welche der folgenden Kriterien erfüllt deine Webseite?

    Schritt 3/4

    Schritt 2

    Schritt 3

    Auswertung

    Wie gut ist der erste Eindruck deiner Webseite?

    x von 18 Punkten

    CHECKLISTE

    30 SEKUNDEN TEST

    Der erste Eindruck deiner Webseite ist gut.

    Zeig uns deine Webseite =)

    Wie gut ist der erste Eindruck deiner Webseite?

    Danke! =)

    CHECKLISTE

    30 SEKUNDEN TEST

    Wir gucken uns deine Webseite gerne mal an.

    Die wichtigsten Fragen beim ersten Eindruck

    Folgende Fragen stelle ich mir, wenn ich den ersten Eindruck einer Webseite ermitteln will. Auch wenn mir die Webseite nicht unbekannt ist, versuche ich mich immer in die Position eines Nutzers hineinzuversetzen, der die Webseite das erste Mal sieht.

    Was ist der Zweck dieser Webseite und wird dieser Zweck kommuniziert?

    Es ist ausgesprochen wichtig, dass die Webseite diese Frage schnell und effizient beantwortet. Gerade Nutzer, die durch Google-Suchen auf deine Webseite kommen, springen schnell wieder ab und gehen zum nächsten Suchergebnis, wenn sie auf deiner Seite nicht die gewünschten oder erwarteten Informationen finden. Schnelles Abspringen der Nutzer (auch als Bounce Rate bekannt) ist eines der sogenannten User Signals, die Google für das Ranking deiner Seite in Betracht ziehen. Vereinfacht gesagt: wenn die Nutzer von deiner Seite enttäuscht sind und wegklicken, kann das dazu führen, dass immer weniger Nutzer deine Webseite zu Gesicht bekommen.

    Responsive Ansicht Zahnarzt - negatives Beispiel
    Schlechte User Signals: Diese Zahnarzt-Webseite ist auf mobile nicht responsive. Nutzer müssten heranzoomen, um Informationen zu finden. Die meisten Nutzer springen an dieser Stelle ab und suchen einen anderen Zahnarzt.
    Responsive Ansicht Zahnarzt - positives Beispiel
    Besser: Der Nutzer kann sofort zu den wichtigsten Informationen navigieren.

    Praktisch bedeutet das, dass du die wichtigsten Informationen bereits vor dem ersten Scrollen sichtbar machen solltest. Beim ersten Eindruck geht es noch nicht darum, wie gut oder effizient oder wirkungsvoll kommuniziert wird (darum geht es später in Design & Usability), sondern darum, ob kommuniziert wird.

    Dabei achte ich vor allen darauf, ob ich den Namen und das Logo des Unternehmens finde, ob ich in wenigen Augenblicken den Claim (also die Hauptaussage, das Versprechen oder den Lösungsansatz) der Webseite finde und ob mich die Navigation auf die nötigen zusätzlichen Informationen verweisen kann.

    Die folgende Tabelle kann dir dabei helfen, deine eigene Webseite einzuschätzen:

    Wer? (Wem gehört die Webseite / wer präsentiert sich hier?) Logo, Seitentitel, Überschrift Seitentitel "Extavium - Das wissenschaftliche Mitmachmuseum"
    Was? (Was wird angeboten / beworben?) Seitentitel, Überschrift, Navigation, Header-Bild, Header-Text Überschrift: "mitmachen | staunen | verstehen", Bilder: Kinder
    Wie? (Wie soll ich mit der Webseite interagieren / was soll ich hier tun?) Navigation, Call-To-Action Call-To-Action: "Jetzt spenden"
    Beispiel

    Case Study: Mitmachmuseum Extavium

    Laut Logo handelt es sich um ein interaktives wissenschaftliches Museum. Der Spenden-Aufruf ist hier sehr prominent, wenn auch durch den Cookie-Hinweis teilweise verdeckt. Auf den ersten Blick sehe ich zwei Navigationsbereiche. Der obere Bereich ist tatsächlich keine Navigation, auch wenn das Styling es vermuten lässt. Die eigentlich Navigation verspricht Informationen über Ausstellungen, Kurse und Termine und konkrete Angaben zu Öffnungszeiten und Preisen. Aus der Bildsprache im Header und den Klassenstufen unterhalb der Navigation schließe ich, dass dieses Museum sich an Kinder, vielleicht ausschließlich Schulkinder richtet.

    Fallstudie Museum Extavium Erster Eindruck
    Beispiel

    Case Study: Museum Barberini Potsdam

    Bei dieser Webseite handelt es sich um ein Museum in Potsdam. Die Navigation deutet darauf hin, dass ich hier Informationen über aktuelle und zukünftige wechselnde Ausstellungen finde und sich vielleicht ein interaktiver Bereich hinter "Entdecken und Forschen" versteckt. Der CTA-Button für den Ticket-Verkauf deutet darauf hin, dass ich online Tickets erwerben kann. Von dem Hero-Image und den Ausstellungsnamen darunter schließe ich, dass das Museum unterschiedliche Kunstrichtungen zeigt und ein wechselndes Angebot an Ausstellungen bietet.

    Fallstudie Museum Barberini Erster Eindruck

    Wirkt die Webseite professionell?

    Wenn deine Webseite in irgendeiner Form einen unternehmerischen Zweck verfolgt, du also eine Ware oder eine Dienstleistung verkaufen oder du dich anderweitig als professionelles Individuum positionieren willst, dann muss deine Webseite auch Professionalität ausstrahlen.

    Das Attribut "professionell" bezieht sich dabei auf den Inhalt (das, was du über dein Unternehmen sagst), die Optik (Design + UI-Elemente) und die Rahmenbedingungen (rechtliche und technische Voraussetzungen).

    Es ist außerdem essentiell, dass die Erwartungen des Nutzers erfüllt werden. Internet-Nutzer haben ein gelerntes Verhalten, dass sie bei jeder neuen Webseite anzuwenden versuchen. Wenn diese Erwartungen nicht erfüllt werden, kann das für den Nutzer frustrierend und abschreckend sein. Insgesamt lässt sich dieser Aspekt als die Usability der Webseite zusammenfassen und darauf gehe ich in einem späteren Teil diese Serie noch einmal detaillierter ein.

    Im ersten Schritt reicht es mir jedoch, folgende Erwartungen zu prüfen:

    1)  Erfüllt die Webseite meine grundlegenden Erwartungen an Webseiten? Ist das die Webseite eines legitimen Unternehmens?

    • Sind Logo oder Name des Unternehmens vorhanden?
    • Sind Header, Navigation, Inhalt, Footer vorhanden?
    • Sind Kontaktdaten oder Informationen über das Unternehmen verfügbar?
    • Existieren die DSGVO-konformen rechtliche Hinweise, also Cookie-Hinweis, Impressum und Datenschutz? Hat die Webseite ein SSL-Zertifikat?
    • Gibt es so genannte Trust-Faktoren? (Referenzen, Bewertungen, Zertifikate,...)
    Exkurs

    Trust-Faktoren

    Als Trust-Faktoren bezeichnet man Elemente oder Inhalte auf der Webseite, die beim Nutzer Vertrauen erwecken und den Nutzer davon überzeugen, dass es sich um ein legitimes, professionelles Unternehmen handelt. Trust-Elemente sind z.B. folgende:

    • Referenzen / Kundenlogos: Lassen deinen Nutzer sehen, dass du schon für andere bekannte Kunden gearbeitet hast.
    • Kundenbewertungen: Am besten von einer unabhängigen Quelle wie Google my Business, damit Nutzer differenzierte Meinungen lesen können.
    • Zertifikate / Zeugnisse / Auszeichnungen: Je offizieller, desto besser. Wurdest du als guter Arbeitgeber ausgezeichnet? Arbeitest du nach einer bestimmen ISO-Norm? Hast du eine Zusatzqualifikation für eine bestimmte Schnitttechnik als Friseur abgeschlossen?
    • Bilder von dir / deinem Team: Bilder von echten Menschen schaffen sehr viel Vertrauen, da dein Nutzer so schneller eine persönliche Bindung und Sympathie aufbaut. Dadurch ist es wahrscheinlicher, dass er oder sie deine Dienstleistungen in Anspruch nimmt.
    • Kostenlose Tests: Ob du eine App verkaufst, eine Beratungsdienstleistung anbietest oder ein Ladengeschäft betreibst: Wenn du deinem Kunden einen kostenlosen Vorgeschmack gibst, bei dem er oder sie sich noch nicht finanziell verpflichten muss, weckst du Vertrauen in deine Angebote. Das kann z.B. in Form eines Gutscheins, eines Testzeitraums oder einer unverbindlichen Vorbesprechung sein.
    Beispiel

    Case Study: Museum Barberini Potsdam

    Webseite grundlegende Erwartungen
    Beispiel

    Case Study: Mitmachmuseum Extavium

    Webseite grundlegende Erwartungen

    Sowohl das Museum Barberini als auch das Mitmachmuseum Extavium erfüllen mein grundlegenden Erwartungen an Webseiten. Da Kontaktdaten und Bilder der Lokalitäten bereit gestellt werden, bin ich davon überzeugt, dass diese Museen tatsächlich existieren und ich bedenkenlos einen Ausflug dahin planen kann.

    2)  Sieht die Webseite so aus, als sei sie professionell gebaut worden, oder eher wie ein DIY-Projekt?

    • Sieht man ein grundlegendes Design? Und ist dieses relativ modern? (z.B. die ganze Bildschirmbreite wird genutzt vs. Box-Layout mit 900px Breite)
    • Hat die Webseite sinnvolle, moderne UI-Elemente? (z.B. Google Maps Karte vs. Besucherzähler)
    Beispiel: Diese Webseite des Museums Historische Mühle in Potsdam scheint etwas in die Jahre gekommen zu sein.
    Beispiel: Diese Webseite des Museums Historische Mühle in Potsdam scheint etwas in die Jahre gekommen zu sein.
    Exkurs

    Warum sollte dein Webdesign zeitgemäß sein?

    Über Geschmack lässt sich bekanntlich streiten. Daher tue ich mich schwer damit, Webseiten als objektiv schön oder hässlich zu betiteln. (Mein persönliche Meinung habe ich aber natürlich trotzdem 😉 ) Es lässt sich aber durchaus feststellen, ob das Design zeitgemäß ist. Dabei geht es weniger um die Ästhetik als darum, die aktuellen Standards und Erwartungen an Webseiten zu erfüllen. Aber warum ist das überhaupt relevant?

    • Relevanz und Aktualität: Wenn die Nutzer deiner Seite ansehen, dass sie länger nicht mehr aktualisiert wurde, verlieren Sie potentiell Vertrauen in deine Dienstleistung und zweifeln an deiner Professionalität. Gibt es dein Geschäft überhaupt noch?
    • Komfort und gelerntes Verhalten: Wie vorhin bereits erwähnt haben Nutzer ein bestimmtes gelerntes Verhalten bei der Verwendung von Webseiten. Neuerungen, die gut von Nutzern angenommen werden, verbreiten sich und werden nach einer Weile zur Norm.
      Beispiel: Responsives Design war vor einigen Jahren noch eine nette Zusatzleistung. Mittlerweile ist es eine Voraussetzung, die deine Nutzer an deine Webseite stellen. Das liegt unter anderem daran, dass mittlerweile über die Hälfte aller Webseitenaufrufe über mobile Endgeräte erfolgen. Wenn deine Webseite nicht responsive ist, dann kannst du deshalb potentiell Kunden verlieren.

    Gibt es offensichtliche Fehler?

    Um dies festzustellen, scrolle ich die Seite durch und klicke auf UI-Elemente (z.B. Buttons, Formulare) und gucke, ob sich die Seite wie erwartet verhält, ob es Darstellungsfehler gibt, ob Bilder oder UI-Elemente nicht geladen werden (z.B. extern eingebundene Terminbuchungen) oder ob die Seite sichtbare Fehlermeldungen wirft (404-Fehler oder PHP-Fehler, die auf der Webseite ausgegeben werden).

    Beispiel: Die Webseite der Stadt Potsdam verweist auf eine Unterseite des Museum Alexandrowka, die nicht mehr existiert und nicht weitergeleitet wird.

    Fazit & Ausblick

    Am Ende dieses Prozesses habe ich einen klaren ersten Eindruck von der Seite und kann mir folgende Fragen beantworten:

    • Was ist der Zweck dieser Webseite?
    • Ist es die Webseite eines professionellen Unternehmens / Individuum?
    • Wurde die Webseite professionell und modern gebaut?
    • Gibt es Fehler auf dieser Webseite?

    Die Antworten helfen mir zu entscheiden, worauf ich im weitere Audit-Prozess meine Aufmerksamkeit richte. Wenn meine Grundannahme nach dem ersten Eindruck z.B. ist, dass diese Webseite ein DIY-Projekt ist, richte ich im weiteren Verlauf besonderen Fokus auf die rechtlichen Bestimmungen und Sicherheitsaspekte, da diese bei Hobby-Webseiten-Bastlern oft nur rudimentär vorhanden sind. Wenn die Seite zwar professionell designt ist, aber wichtige Elemente fehlen oder der Zweck nicht deutlich kommuniziert, betrachte ich später die Usability der Webseite aufmerksamer.

    Das beendet unseren ersten Teil des Website Audits. Nachdem wir uns einen ersten Eindruck verschafft haben, können wir mit der Sicherheit und den technischen Grundlagen der Webseite weitermachen. Der zweite Teil der Website-Audit Serie folgt in Kürze.

    Die Website-Audit Serie

    In der Serien Website-Audit veröffentlichen wir jede Woche einen Artikel zu einem der Themenbereich. Wir beschreiben detailliert unsere Vorgehensweise beim Website-Audit, erklären, welche Punkte für Nutzer besonders wichtig sind und wieso, und geben dir Tipps und Tools an die Hand, mit denen du deinen eigenen Website-Audit durchführen kannst. Dabei unterscheiden wir auch ganz transparent, was du auch als Laie selbst beheben kannst, und wo du dir lieber einen Profi suchen solltest.

    • Erster Eindruck - Wie wirkt deine Website?
    • Sicherheit & technische Grundlagen - Wie sicher ist deine Website?
    • DSGVO - Ist deine Website DSGVO-konform?
    • Performance - Wie schnell ist deine Website?
    • Design & Usability - Findet sich der Nutzer auf deiner Website zurecht?
    • SEO - Wie wird deine Website bei Google gefunden?

    Hinterlassen Sie einen Kommentar