Webdesign, App Design
Tipps für das bessere User Interface
Ein Bestell-Button der übersehen wird, ein nicht gefundenes Suchfeld oder eine viel zu ausführliches Anmeldeformular können über Erfolg und Misserfolg, Bestellung oder Abbruch entscheiden. Interface Design bedeutet, auf Websites und in Apps nicht nur Farben und Schriften auszuwählen und zu einer hübschen Optik zu verarbeiten. Schönes Design wirkt nur, wenn es insgesamt gut funktioniert. Interface Design bedeutet also, ein möglichst gutes Zusammenspiel zwischen Inhalt, Technik und der Optik zu finden. Tolle Menüs nutzen nichts, wenn der Inhalt nicht überzeugt. Letzterer wiederum kann seine Stärken nicht ausspielen, wenn der Button für die Bestellung nicht gefunden wird - oder der Server nach dem Klick darauf ewig braucht, um zu reagieren.
Schwächen und Optimierungsmöglichkeiten gibt es immer und überall. Die gute Nachricht dabei: Oft ist es gar nicht so aufwändig kleine Details zu verbessern und die Änderungen können eine große Wirkung haben. Ein gutes User Interface im Web sorgt für eine gute Konversionsrate, kümmert sich also um die Business-Seite und macht es dem Besucher leicht, seine Ziele umzusetzen - zum Beispiel ein Produkt zu bestellen.
Die folgenden Tipps müssen nicht hundertprozentig zu jeder Website oder App passen. Sie sind aber Denkanstöße wo Sie den Hebel bei Ihrem Interface ansetzen könnten.
- Klare Anweisungen
Der Visiten- und Postkartendruckdienst Moo.com macht es so: Ein kurzer, klarer Text in einer Spalte und unten die Aufforderung zum Handeln. - Weniger ist mehr
Drei Produkt-Highlights und Kontakt bilden die komplette Navigation: Der Heimautomatisierungs-Spezialist Basalte lebt sein Motto "Weniger ist mehr" auch in der simplen, wie übersichtlichen Navigation seiner Homepage. - Visueller "Klickzwang"
Weniger ist mehr: Auch der Online-Dienst "If this then that" setzt auf spartanisches Layout. - Suchfunktion
Beim Rad-Shop Brügelmann gibt es auf den ersten Blick eine simple, gewöhnliche Suchfunktion. Die Feinheiten werden dann auf der Ergebnisseite rechts angeboten: Der User kann die vielen Produkte nach Preis, Farbe und anderen Parametern wie Rahmenhöhe nachträglich einschränken. Ein Klick reicht und die Liste wird damit "verkürz". - What you want is what you get
Einen Kalender sollte man nicht mit Pop-up- Menüs entfremden, sondern so anbieten, wie ihn der User haben möchte: als Kalender. Ein gutes Beispiel dafür ist die die Seite der Bahn. - Schieben...
Preisbereiche lassen sich schneller per Schieberegler einstellen (hier Radshop Brügelmann)... - ... statt tippen
als per Eingabefeld (wie bei wigglersport.de). - Kunden sprechen lassen
Lassen Sie - statt über sich selbst zu reden - doch die Kunden zu Wort kommen. Das wirkt oft wesentlich überzeugender. - Grafische Kniffe
Der Cloud-Anbieter Box hebt das meistverkaufte Abomodell grün hervor. Das macht die Tabelle besser und schneller erfassbar. - Anmeldung ruck zuck
Die Social Media-Plattform Pinterest wirbt schon vor der Anmeldung damit, dass sie nur 45 Sekunden dauern wird. - Es geht auch per Mail
Die Anmeldung per E-Mail ist der im Vergleich zur Facebook-Anmeldung aufwändigere Weg. Doch hier werden nur die notwendigsten Daten abgefragt. Einige Felder wie Wohnort sind korrekt vorausgewählt und werden vermutlich per IP-Lokalisierung ermittelt. - Navigieren per Tastatur
Bei den Webby Awards gehört die Keyboard-Navigation zu den coolen Attraktionen der Website. - Keine Klickarie
Die Suche bei den Webby Awards erfordert kein Klicken in ein Texteingabefeld; der User kann einfach lostippen und oben links erscheint der eingegebene Suchbegriff. - Tastatur auch bei Twitter
Unter Powerusern sehr beliebt: Der Kurznachrichtendienst Twitter lässt sich auch im Web hervorragend per Tastatur steuern. - Standortfunktionen nutzen
Der Online-Shop etsy.com ermittelt den Standort des Besuchers und schlägt beim Erstbesuch die passende Einstellung von Land und Währung vor.
Inhalte simpel vermitteln, dann auffordern
Hier noch eine Sidebar, da noch ein Angebot, hier noch ein Banner... auf vielen Websites weiß der User nicht, wo er zuerst hinschauen soll. Das Lesen wird ebenfalls zu einer fragmentierten Angelegenheit, da zahlreiche Elemente um Aufmerksamkeit buhlen. Bei vielen Inhalten reicht aber tatsächlich ein Ein-Spaltenlayout, um den Inhalt zu vermitteln. Dann lenkt nichts den Leser ab, er kann sich voll auf den Inhalt konzentrieren. Geschichten lassen sich besser vermitteln, der Sprung zum "Call to Action" fällt einfacher - also der Aufforderung beispielsweise zur Bestellung, Anmeldung oder zum Mitmachen. Am Ende des Textes wird dazu einfach ein prominenter, deutlich sichtbarer Button angeboten. Der Website-Betreiber behält mit dem Einspalten-Layout mehr Kontrolle über den Verlauf des Inhalts, das Verhalten des Besuchers wird besser vorhersehbar.
Diese Methode ist besonders für Landing Pages geeignet, die zum Beispiel die User von einem Social Media Beitrag abholen und mehr Infos servieren. Ebenso können Newsletter oder Apps profitieren - überhaupt zahlt sich die Einspalten-Übersichtlichkeit auf Mobilgeräten besonders aus. Bei komplexen News-Seiten, Online-Shops etc. klappt eine Spalte oft nur schwer; aber vielleicht sind ein paar Spalten weniger schon ein großer Schritt zum besseren Erlebnis?