Webdesign: Die Ins und Outs der Usability

Wie Sie die optimale Bedienbarkeit Ihrer Website gewährleisten

Internet-User sind ungeduldig: Wer nicht sofort findet was er sucht, klickt weiter. Genauso schnell wie das Web verändern sich auch die Gewohnheiten der User und somit auch die Ansprüche an die Usability von Web-Angeboten. Während fixe Seitengrößen noch vor einigen Jahren gang und gäbe waren, ist heute Responsive Design das Nonplusultra. Die Ins und Outs zeigen, wie Usability im Jahr 2013 aussehen sollte.

Usability = Benutzerfreundlichkeit

Usability beschreibt die Benutzerfreundlichkeit einer Website oder eines E-Commerce-Shops – mit ihr steht und fällt der Erfolg eines Webangebots. Anhand der Benutzeroberfläche navigiert der User durch ein Web-Angebot und gelangt so an die gesuchten Informationen. Eine klare Struktur und eine psychologisch durchdachte Navigation stillen das Bedürfnis des Besuchers nach Kontrolle über seine Aktionen. Eine Funktion oder ein Button, der nicht sofort schlüssig scheint und keine erkennbare Soll-Aktion erkennen lässt, reicht bereits für einen Seitenabbruch aus.

Logische Hierarchien und sinnvolle Pfade

Ein Aufbau, der nicht dem geistigen Pfad des Nutzers entspricht, kann sich negativ auf das User-Verhalten auswirken. Mit einer gut gestalteten Hierarchie und logischen Pfaden fangen Sie Ihre Nutzer optimal auf. Oftmals ist es sinnvoll und komfortabel, auf der höchsten Ebene zu beginnen und sich nach unten zu spezifischer werdenden Informationen hin zu bewegen.

Optimierte Usability bringt viele Vorteile

Mehr als 80% der virtuellen Einkaufskörbe in Online-Shops werden gar nicht erst zum Abschluss gebracht, was in vielen Fällen durch eine verbesserte Usability im Shop geändert werden könnte. Ein Web-Angebot sollte neben einer intuitiven Navigation ein funktionelles Design, robustes Fehlermanagement, eine Feedbackfunktion für die Besucher und auch personalisierte Elemente aufweisen.

Eine optimale Bedienbarkeit Ihrer Website sollte also jederzeit gewährleistet sein, denn die Optimierung der Web-Usability bringt viele Vorteile für Ihr Unternehmen. Im Rahmen Ihres Online-Marketings erhöhen Sie den Bekanntheitsgrad Ihres Online-Auftritts. Durch zufriedene User können benutzerfreundliche Landingpages die Kosteneffizienz Ihrer Kampagnen deutlich steigern.

Das richtige Konzept finden

Ein wichtiges Ziel der Usability-Optimierung kann es beispielsweise sein, Besucher zu Kunden zu machen, also eine Konversion zu erzielen. Doch auch die Minimierung des Besucher- bzw. Kundenverlusts kann im Mittel-punkt der Zielerreichung stehen. Mit Hilfe eines guten Usability-Konzepts auf Ihrer Website tragen Sie zur Steigerung der Zielgruppenakzeptanz bei. Sie binden Ihre Kunden an Ihre Marke oder Ihr Produkt.

Die Vorteile, die der Einsatz von effizienten Usability-Methoden offenbart, sind vielfältig. Nicht nur die Kostenersparnis durch geringen Support und zufriedene Kunden steigern Ihren ROI. Durch gute Usability hebt sich Ihr Unternehmen von der Konkurrenz ab und erhält nachhaltig bessere Marktchancen.

Alle Vorteile einer guten Usability im Überblick:

• Steigerung der Zielgruppenakzeptanz
• Kundenbindung
• Kostenersparnis durch weniger Support
• Steigerung der Werbemittel-Effizienz und Effektivität
• Positives Markenimage
• Minimieren des Besucher- und Kundenverlusts

Die aktuellen Ins und Outs der Website Usability

OUT: fixe Seitengröße IN: Responsive Design

Als es das mobile Internet noch nicht gab und der Desktop für Internetnutzer als einziges Endgerät zur Verfügung stand, reichten fixe Seitengrößen für Web-Auftritte aus. Mit dem Aufkommen von Smartphones und Tablets änderten sich auch die Ansprüche der Nutzer. Content kann nicht eins zu eins übertragen werden und die Touch-Technik verlangt beispielsweise größere Buttons als am Desktop.

Insbesondere das Responsive Design veränderte die Welt der Usability-Bastler. Die optimale Darstellung digitaler Präsenzen auf unterschiedlichen Endgeräten wird durch den Einsatz von Responsive Design möglich. Für mobile Nutzer sind komprimierte, skalierbare und selektierte Informationen aufgrund von Zeitmangel ausgesprochen wichtig. Daher sollten Unternehmen Abstand von der konventionellen „Spaltenanpassung“ nach dem trivialen Prinzip „Content verschiebt sich je nach Displaygröße spaltenweise nach unten“ nehmen.

 

Website Usability: Die Ins und Outs im Webdesign from TWT Interactive

 

OUT: Scroll-Verbot IN: Infinit Scrolling

Scrollen ist das neue Klicken: als das Internet noch in den Kinderschuhen steckte, lautet das Credo allerdings „Bloß nicht scrollen“. Studien zeigten aber, dass der User durchaus scrollt und das bietet für Webdesigner weitaus mehr Spielräume. Durch Infinit Scrolling und Single Page Webdesign wurden viele neue Maßstäbe in Bezug auf Usability gesetzt.

Der Inhalt von Single oder One Page Webseiten wird vollständig in einem HTML-Dokument abgelegt. Solche Designs funktionieren vor allem dann, wenn man es schafft, das Thema der Website in die Gestaltung einzubau-en und ungewöhnliche (Interaktions-) Effekte zu verwenden. User sollten zu jedem Zeitpunkt wissen, wo sie sich auf der Seite befinden. Deswegen sollte eine klassische Navigation, die jederzeit sichtbar ist, nicht fehlen. Die jeweiligen Kapitel der Website können über eine (Hash-)URL wie eine Webseite verlinkt und via Ankernavigation angesprungen werden.

One Page-Design kommt häufig in Kombination mit der Parallax Scrolling-Technik zum Einsatz. Beim sogenannten Parallax Scrolling bewegen sich Vorder- und Hintergrund verschieden schnell, wodurch beim Betrachter der Eindruck von Tiefe entsteht. Die verstärkte Verbreitung von HTML5 und CSS3 begünstigen den Einsatz des Parallax Scrolling.

Hier gibt es viele Best Practices für gelungenes One Page Design.

OUT: Systemschriften IN: beliebige Schriften

Zu Beginn der Internet-Ära war man als Web-Designer auf einige wenige System-Schriften beschränkt. Die Wahl einer Schrift war begrenzt, da man, anders als im Print-Sektor, nur auf sogenannte Systemschriften zurückgreifen konnte. Dies sind Schriften die nur im jeweiligen Betriebssystem vorinstalliert sind, vom Browser erkannt und somit im Internet dargestellt werden können. Das komplette Internet war also auf ein gutes Dutzend Standard-Schriftarten beschränkt.

Seit der Einführung der CSS-Regel @font-face sind nun beliebige Schriftschnitte in der Ausgestaltung der Webseiten möglich. Mit @font-face kön-nen Schriftarten in ihrem vollen Umfang auf Webseiten zum Einsatz kommen. Schriftarten können über CSS mit Dateien verknüpft und vom Server geladen werden. Es sollten dabei jedoch immer die aktuellen Bestimmungen zu Urheberrechten und individuellen Copyrights der Schriftarten beachtet werden.

OUT: Kleine Schriftgrößen IN: Pixelschriften

Kleine Schriften galten im Webdesign lange Zeit als schick. Usability-Aspekte, wie z. B. Lesbarkeit, standen an zweiter Stelle. Die technische Weiterentwicklung hin zum Responsive Webdesign und die verstärkte Nutzung des Internets auf mobilen Endgeräten, lässt das Thema Schriftgröße für Webdesigner wieder interessant werden. Große Typografie entpuppt sich sowohl aus ästhetischen als auch aus Gründen der Benutzer-freundlichkeit zum In-Thema.

Darüber hinaus sind auch Pixel-Schriftarten im Trend. Sie werden nicht nur bei Flash-Websites gern verwendet, sondern auch bei Navigationen, Bildunterschriften oder kleineren Textbausteinen wie beispielsweise Headlines und Slogans. Diese Elemente können in vielen Fällen mit den pixeligen Buchstaben aufgewertet werden. Pixel-Schriftarten vermitteln ein technisches Flair, drücken aber gleichzeitig auch eine kühle Eleganz und Minimalismus aus. Für den Fließtext weisen diese Schriften aber meist eine zu geringe Größe auf.

Hier gibt es einige gut lesbare Pixelschriften im Überblick.

OUT: Intro-Screens IN: Content

Splash-Pages, oder auch Intro-Screens waren bei Webdesignern der ers-ten und zweiten Stunde sehr beliebt. Eine Splash-Page beschreibt die spezielle Intro-Homepage einer Website, die meist eine Flash-File oder Grafik beinhaltet. Solche Intro-Screens können jedoch die Indexierung in Suchmaschinen verhindern, wenn z.B. der einzige Link zu den nachfol-genden Seiten auf Basis von Flash oder JavaScript umgesetzt wurde. Splash Pages kommen heute nur noch selten vor und aus Sicht der Usability ist das auch gut so. Viel besser ist es, direkt mit dem Content und der eigentlichen Homepage einzusteigen. So binden Sie die User besser und erreichen die Ziele Ihres Webauftritts schneller.

OUT: „interaktive“ Usability – Flash IN: HTML5

Wer vor ein paar Jahren von Web-Applikationen sprach, der meinte ent-weder Java oder Flash. Früher war der Einsatz von Flash ein absolutes Muss, wenn es um Interaktivität ging. Heute sind die meisten Ideen mit HTML5 genauso gut zu realisieren – und das sogar mit verkürzten Lade-zeiten. Zwar liegt Flash was Möglichkeiten, Erlernbarkeit usw. betrifft noch immer vor HTML5, aber Flash hat auch einige Jahre mehr Erfahrung im Gepäck. Der offene Webstandard HTML5 soll den Browser schneller und die Internet-Entwicklung unabhängig von proprietären Programmen der Big-Player machen. Durch die mobile Ära hat HTML5 einen großen Schub erlebt und Adobe hat die Entwicklung von Flash-Plugins für mobile Geräte bereits eingestellt.

Hier gibt es eine Gegenüberstellung von Flash und HTML5.