• 30. Juni 2024

Redesign Eintragsseite – Modernisierung, Usability, Interaktionen, Scroll

Redesign Eintragsseite – Modernisierung, Usability, Interaktionen, Scroll

Redesign Eintragsseite – Modernisierung, Usability, Interaktionen, Scroll 559 1024 Andrej

Um die Eintragsseite zu modernisieren und die Benutzerführung zu verbessern, haben wir ein umfangreiches Redesign umgesetzt. Die Änderungen beziehen sich vor allen Dingen auf die Ansicht im Desktop.

Redesign Eintragsseite - Branchenportal Software discoverize

Redesign Eintragsseite – Branchenportal Software discoverize

Ansprechend und übersichtlich – Design Modernisierung der Eintragsseite

Das letzte große Update der Eintragsseite liegt schon mehrere Jahre zurück. Seit dem haben sich sowohl im technischen Bereich als auch bei der Erwartung der Besucher viele Dinge geändert.

Vor allen Dingen wollten wir den initialen visuellen Eindruck attraktiver gestalten. Deswegen zeigen wir das Hauptbild deutlich größer an und zeigen zusätzlich 2 weitere Bilder für Kontext an. Die Karte und Bewertungs-Zusammenfassung zeigen wir nun ebenfalls neben den Bildern in der Kachel-Sektion an. Die nützlichen Eigenschaften werden ebenfalls im bekannten Design von der Suchseite dargestellt. Wir zeigen an dieser Stelle auch nur noch die ausgefüllten Eigenschaften an. Nicht ausgefüllte Eigenschaften werden in der initialen Übersicht automatisch ausgeblendet.

Die Beschreibung des Unternehmens erhält auch deutlich mehr Platz – wir zeigen hier nun 9 Zeilen Text an, statt vorher drei – mehr Text kann – wie bisher auch – aufgeklappt werden.

Neu: Eintragsseiten Navigation im Sticky Header mit primärem Button

Initial blenden wir in der Desktop-Ansicht die „alten“ Tabs aus. Sobald der Besucher scrollt, zeigen wir die Eintragsseiten- Navigation an.

Sticky Header Eintragsseite - scrollen nach unten

neue Ansicht – Sticky Header Eintragsseite – scrollen nach unten

alte Ansicht mit Tabs

alte Ansicht mit Tabs

Diese enthält folgende Elemente:

  • Link zurück zur Suchseite
  • Bewertungs-Box
  • Eintrags-Name (zurück nach oben scrollen)
  • Tabs (Links zu Lage, Fotos, Bewertungen, Kontakt)
  • primäre Interaktion
  • weitere Aktionen (weitere Buttons, Favorit, Vergleich, Bewertung abgeben, Bild hochladen, Teilen, Eintrag verbessern, Inhalt melden)

Wichtig ist hier der Button mit der primären Interaktion (CTA). Dies ist der Button, der in der Kontakt-Box an erster Stelle angezeigt wird. Als Default ist hier die unverbindliche Anfrage hinterlegt. Dies kann aber durch individuelle Buttons ersetzt werden.

Durch die Positionierung im Sticky Header scrollt auch dieser Button stets mit. So kann der Besucher jederzeit Kontakt zum Unternehmen aufnehmen, ohne nach oben oder unten scrollen zu müssen. Durch die weitere-Button Funktionalität sind alle wichtigen Interaktionen stets im Viewport zu sehen und somit direkt erreichbar.

Eine weitere große Veränderung ist die Tatsache, dass alle Inhalte der Eintragsseite jetzt ohne Klicks durchgescrollt werden können.

Die Sektionen Übersicht (Kacheln, Beschreibung, Kontakt-Box, nützliche Eigenschaften), Lage, Fotos, Bewertungen und Kontakt sind weiter über die Eintragsseiten-Navigation erreichbar.

Somit können Besucher bequem durch alle Inhalte scrollen, ohne Klicken zu müssen. Um schnell zu einem bestimmten Bereich zu gelangen sind die Tab-Links stets präsent.

Globaler Sticky Header nur beim Scrollen nach oben

Um den Fokus noch mehr auf die Inhalte der Eintragsseite zu lenken, wird der globale Sticky Header (mit Logo, Naviation und Freitextsuche) nur noch angezeigt, wenn man wieder nach oben scrollt. Sobald die Besucher nach unten scrollen zeigen wir nur den Sticky Header der Eintragsseite an.

Sticky Header Eintragsseite plus globaler Sticky Header- scrollen nach oben

Sticky Header Eintragsseite plus globaler Sticky Header- scrollen nach oben

Dadurch bleibt der Fokus der Besucher auf der Eintragsseite. Sollte diese jedoch nicht passend sein und der Besucher deswegen nach oben scrollen, wird der globale Sticky Header wieder angezeigt und man kann zur Suchseite oder anderen Inhalten navigieren.

Mobile Version – Scroll Verhalten ändert sich

In der mobilen Version bleibt vieles wie bis jetzt. Die initiale Ansicht / Übersicht ist vereinfacht. Wir konnten durch das Redesign ebenfalls die initiale Content Verschiebung (CLS) verringern, da wir an dieser Stelle JavaScript ausbauen konnten.

Das Scroll-Verhalten wird hier übernommen. Gerade mobil ist scrollen stets schneller als klicken. Daher kommen die Besucher schneller zu den gewünschten Informationen. Über die Tabs sind diese auch weiterhin zusätzlich per Klick erreichbar.

Sonderfälle Kachel-Block

Es gibt einige Sonderfälle, die wir beim Redesign beachten müssen:

  1. Eintrag hat nur 1 Bild: In der Praxis sind dies meist Portale (vor allen Dingen im B2B Bereich), bei denen vorrangig Logos der Unternehmen hinterlegt sind.
    In diesem Fall zeigen wir eine schmale Kachel an:
    Eintragsseiten Redesign - Sonderfälle

    Eintragsseiten Redesign – Sonderfälle

  2. Keine Bewertungen: Wir zeigen die Box mit „erste Bewertung abgeben an.
  3. Keine Adresse: Box mit „leider keine Geo-Koordinaten“ hinterlegt.
  4. 2 Bilder: Kartenbox wird breiter.

Zusammenfassung

Folgende Elemente ändern sich im Zuge des Redesigns:

  1. Vereinfachung des Designs
  2. Hauptbild mit Galerie wird größer
  3. Zwei Zusatzbilder vermitteln einen besseren Eindruck vom Unternehmen
  4. Karte und Bewertungs-Zusammenfassung geben wichtige Kontext-Informationen
  5. Klare nützliche Eigenschaften
  6. Längerer Beschreibungs-Text
  7. Alle Inhalte sind mit Scrollen erreichbar
  8. Sticky Header der Eintragsseite mit Links zu Sektionen
  9. Primäre Interaktion im Sticky Header der Eintragsseite
  10. Weitere Interaktionen im Sticky Header
  11. Globaler Sticky Header nur beim nach oben scrollen
  12. 2 Premiumblöcke (bei Basis-Einträgen) auf der Detailseite
  13. Bilder-Layout in der Galerie: 3 Bilder pro Zeile für etwas größere Bilder
  14. Einheitliche runde Ecken bei allen wichtigen Elementen
  15. Mobil wird das neue Scroll-Verhalten übernommen

 

 

 

Hinterlasse eine Antwort

    Unverbindlichen Beratung anfragen

    Gerne besprechen wir in einem Vorgespräch in ca. 15 Minuten Ihre Portalidee und ob und wie sich diese mit discoverize umsetzen ließe. Entweder per Telefon oder gerne auch in Person bei uns im Büro.



    9-12 Uhr12-15 Uhr15-18 Uhr

      Kontakt zum discoverize Team

      Bei allen Fragen rund Branchenportale, Beratung, Strategie helfen wir gerne weiter.