Webdesign: Damit aus Nutzern Kunden werden

Usability | Wireframes | HTML und CSS | Persona | Use Cases | Responsive Design | Call to Action

Jeder kommerzielle Webauftritt hat ein klares Ziel: Besucher werden zu Kunden. User Centered Design (nutzerorientierte Gestaltung) heisst die Darstellungsform, mit der Return on Investment im Internet generiert werden kann. Die INM Matrix, unsere Methode für alle Projekte, ist der Schlüssel zum Erfolg. Von der Definition der Ziele bis zur kontinuierlichen Optimierung umfasst sie alle Aspekte, darunter Usability (Gebrauchstauglichkeit) und natürlich auch Responsive Design.

Responsive Design für Mobile Endgeräte wie Smartphones oder Tablets

Webdesign muss das Markenerlebnis (Branding) optimal unterstützen. Genauso wichtig ist die Usability, damit der Nutzer die gesuchten Inhalte oder Informationen so schnell wie möglich findet. Daraus leitet sich die Informationsarchitektur der Webseite ab.

Usability
Jede Webseite hat klar definierte Ziele, der sogenannte Call to Action. Durch die richtige Benutzerführung, die auf verschiedenen Endgeräten vom Grossbildschirm eines Desktop bis zum Smartphone funktionieren muss, verwandeln sich Besucher zu zufriedenen Kunden. Sie klicken nicht weg, sondern beginnen, zu interagieren.

Wichtige Punkte bei der Usability sind:

  • Bedienerfreundlichkeit
  • Einfache Navigation
  • Richtige Platzierung von Logo, Bildern und grafischen Elementen
  • Seitenpfade und Titel
  • Hauptnavigation und Alternativnavigationen
  • Sprachwahl
  • Schnellsuche und Volltextsuche
  • Schriften und Linkauszeichnung

Gerne machen wir für Ihre Webseite einen Usability Check!

Wireframes: Die Baupläne einer Webseite
Nach der Sammlung, Kategorisierung und Nachverfolgung der Kundenbedürfnisse wird daraus ein Drahtgerüst erstellt, das bedeutet der englische Ausdruck Wireframe. Also die Struktur der Webseite wird definiert, ihre Hierarchien, leicht navigierbare Pfade, die möglichst schnell zum Ziel führen. Als Benchmark versucht der Hersteller eines Wireframe oder Mock-up das Design so aufzubauen, dass möglichst viele Ziele mit maximal zwei Klicks erreicht werden können. Ist diese Drahtpuppe vom Besitzer der Webseite abgenommen, wird sie bekleidet, es entsteht die visuelle Umsetzung in ein Design. Und die Programmierung der Webseite, denn hinter dem Design-Kleid steckt ein ganzer Maschinenraum, der das reibungslose Funktionieren der Webseite garantiert.

HTML und CSS: Immer die modernsten Baustein
Nur wenn die aktuell modernste HTML/CSS-Technologie verwendet wird, kann man die Vorteile des Internets optimal ausschöpfen:

  • Ideal für effiziente und wirkungsvolle Suchmaschinenoptimierung
  • Übersichtliche und vereinfachte Statistikauswertung durch Google Analytics oder andere Tools
  • Inhaltspflege mittels CMS ohne Programmierkenntnisse oder –kosten; einfach und schnell
  • Hohe Verbreitung und Unterstützung durch alle führenden Browserhersteller, inklusive auf mobilen Endgeräten
  • Ressourcensparend (benötigt wenig Arbeitsspeicher und Prozessorleistung)
  • Erfordert keine zusätzliche Installation (Plug-in)

Persona: Der Benutzer-Raster
Die Webseite ist für alle gleich. Aber jeder Besucher hat andere Bedürfnisse, Interessen, Ziele. Diese lassen sich kategorisieren, indem für die wichtigsten Benutzersegmente ein Profil erstellt wird. Dafür definiert man eine überschaubare Anzahl von Personen mit Namen, Geschlecht, Alter, Beruf, Ausbildung, Arbeitgeber, Kontaktgrund sowie Erwartungen und Bedürfnisse.

Was sind Personas

Diese Personenbeschreibungen gewinnt man aus der Analyse des Benutzerverhaltens in der Vergangenheit der Webseite, durch Befragungen aktueller User und am besten in einem Workshop mit der INM AG. Daraus entsteht ein entscheidender Perspektivwechsel. Wie in einem Supermarkt in der realen Welt geht es auch bei einer kommerziellen Webseite nicht in erster Linie darum, zu zeigen, was man hat. Sondern dem Nutzer oder Kunden ein Erfolgserlebnis zu verschaffen. Konkret soll der Besucher mit möglichst wenigen Klicks vom Aufrufen der Webseite zum gewünschten Ziel gelangen. Sei das die Befriedigung reiner Neugier, die Suche nach einer Information, nach einem Produkt, der Wunsch nach Kontaktaufnahme oder das Abrufen eines Datenblatts.

Use Cases: Die Fallbeispiele

Sind die wichtigsten Besuchersegmente definiert, werden konkrete Fallbeispiele entwickelt, um zu überprüfen, ob die Architektur der Webseite die jeweils optimale Antwort bereit hält. Das dazu verwendete Raster enthält unter anderem:

  • Warum besucht der Nutzer die Webseite, wie ist er auf sie aufmerksam geworden?
  • Was ist sein Ziel?
  • Wie erreicht er dieses Ziel?
  • Welches Endgerät benützt er?
  • Welche Reaktion, Call to Action, soll ausgelöst werden?
  • Ist es sein erster Besuch oder kennt er die Webseite bereits?
  • Was geschieht, wenn der Besucher sein Ziel nicht erreicht?
  • Was geschieht nach dem Call to Action, einer Kontaktaufnahme, einem Kauf?

Responsive Design: von gross bis klein
Die Zeiten sind längst vorbei, als eine Webseite nur darauf überprüft werden musste, ob sie von allen Browsern optimal dargestellt wird. Denn die Zeiten sind auch vorbei, als die überwältigende Mehrheit der Nutzer einen Grosbildschirm für das Surfen im Internet verwendete. Mit deutlich zunehmender Tendenz ist das Internet mobil geworden. Das bedeutet, dass die Darstellung einer Webseite die ganze Bandbreite von Widescreens über Tablets bis zu Smartphones abdecken muss. Das kann nicht einfach über Schrumpfen bewältigt werden, Responsive Design ist die richtige Antwort.

Gerade bei komplexen Webseiten benötigt man durchdachte Veränderungen in der Navigation und Menüführung. Ganz zu schweigen von Webshops und jedem Call to Action. Wenn der Button, der eine Interaktion auslösen soll, zu einem kleinen Punkt geschrumpft ist, ist er wirkungslos.

Call to Action: Die entscheidende Aktion

Leads und Sales, das ist die harte Währung, mit der sich eine Webseite bezahlt macht. Erst, wenn der Besucher auf einer B2B-Seite das Kontaktformular ausfüllt, hat er einen Lead generiert, aus dem ein Return on Investment entstehen kann. Erst, wenn der Besucher in einem Webshop auf den Bestellen-Button klickt, wurde der Call to Action beantwortet. Wie man ihn erfolgsorientiert einsetzt, wird hier an einem Beispiel erklärt:

 

zurück nach oben

Inhalte teilen