Muster
Interface-Muster: Landingpages, Onboarding, Checkout, Formulare und mehr. Wann sie passen, wie man sie baut, mit guten und schlechten Beispielen.
MusterAbo-Kündigung gestalten: der ehrliche AblaufWie gestaltet man die Kündigung eines Abos? Sichtbarer Kündigungsbutton, wenige Schritte, ein Angebot zum Überspringen, Bestätigung mit Datum, § 312k BGB.MusterCheckout-Design: Regeln und BeispielCheckout-UX-Regeln: Gastkauf, ehrliche Schrittanzeige, Gesamtkosten früh, Fehler und Vertrauen. Mit Baymard-Daten und zwei Abläufen im Vergleich.MusterCookie-Banner gestalten: Einwilligung nach TDDDG und DSGVOWie gestaltet man ein Cookie-Banner? Gleichwertiges Akzeptieren und Ablehnen, leere Kästchen, erforderliche Cookies, Widerruf und drei Banner zum Testen.MusterDie Preisseite (Pricing Page) gestaltenWie gestaltet man eine SaaS-Preisseite? Tariftabelle, empfohlener Tarif, ehrlicher Jahresschalter, Umsatzsteuer und FAQ. Mit Köder-Effekt zum Ausprobieren.MusterDie Produktdetailseite (PDP) gestalten: Regeln und BeispielProduktseite im Onlineshop gestalten: Bilder, Größenbuttons, Gesamtbetrag mit Versand, Liefertermin, Bestätigung im Warenkorb und fixierter Button mobil.MusterDie richtige Tastatur im mobilen Formular: type, inputmode und autocompleteDie richtige Tastatur in mobilen Formularen: type, inputmode, autocomplete und enterkeyhint. Live-Beispiel für Telefon, Steuer-ID, IBAN und PLZ.MusterFehlermeldungen schreiben: Regeln und BeispieleWie schreibt man eine Fehlermeldung? Sichtbar, am Feld, mit dem, was passiert ist, und wie man es behebt. Deutsche Beispiele und eine Übung.MusterFormulardesign: Regeln und BeispieleRegeln für Formulardesign: Label, Platzhalter, Fehlermeldung und Live-Validierung. Schlechtes und gutes Formular im Vergleich, mit Checkliste.MusterInline-Validierung: wann und wie?Wann validiert man ein Formular: beim Tippen, beim Verlassen des Felds oder beim Absenden? Zu frühe Fehler, Erfolgsmeldung, Fehlerübersicht, aria-invalid.MusterLogin- und Registrierungsseite gestaltenWie gestaltet man Login und Registrierung? Gastoption, Passwortregeln, Passwort anzeigen, Fehlermeldungen, autocomplete und WCAG 3.3.8.MusterModal und Pop-up gestalten: wann und wie?Wann nutzt man ein Modal, wann nicht? Zeitpunkt, Esc und Schließen-Button, Fokusfalle, Vollbild auf dem Handy. Mit schlechtem und gutem Modal zum Testen.MusterTippbereich: Wie groß muss ein Button auf dem Handy sein?Tippbereich und Mindestgröße für Buttons: iOS 44 pt, Android 48 dp, WCAG 24 px. Sichtbare Größe, Abstand, Ecken, ein Fingertest und CSS-Code.MusterWarenkorbabbruch: Rate und GründeWas ist die Abbruchrate im Warenkorb und wie berechnet man sie? Abbruchgründe nach Baymard, die UX-Korrektur für jeden Grund und ein Prüftool.MusterWas ist ein CTA-Button? Einen guten Call to Action gestaltenWas ist ein CTA-Button und wie schreibt man seinen Text? Beispiele für Buttontexte, primär und sekundär, Tippbereich und Kontrast, dazu eine Live-Demo.MusterWas ist eine Landingpage, und wie gestaltet man sie?Was ist eine Landingpage und wie gestaltet man sie? Die Abschnitte, Tun und Lassen, der Unterschied mobil, Barrierefreiheit und eine Checkliste.MusterWie gestaltet man ein gutes Onboarding?Wie gestaltet man Onboarding? Vergleichen Sie Einführungstour, Tipps und leeren Zustand im Live-Beispiel. Mobil, Barrierefreiheit und Checkliste.