Es geht nicht darum, den Nutzern oder Interessenten eine Falle zu stellen. Das Ziel sind konkrete Handlungsanweisungen und das klare Aufzeigen von Handlungsoptionen. Nutzer verlangen sogar danach. Oft hört man z.B. “Und jetzt?”, “Wo geht’s weiter?” oder ähnliche Fragen, wenn man Nutzer beobachtet. Fragen, die auf erste Probleme hinweisen.

Wo geht’s lang und was kommt jetzt?

In Bestellprozessen muss man Orientierungshilfen anbieten. Sehr hilfreich sind hierbei Fortschrittsindikatoren bzw. Navigationsmechanismen, die den Flow unterstützen. Kombiniert mit klar formulierten Handlungsanweisungen werden die Nutzer besser durch den Prozess geleitet. Unklare Call-To-Action sind ein wichtiger Konversionskiller.

Zu viel Klickmisch

Oft möchte man den Nutzern auch alternative Wege aufzeigen oder zusätzliche Dinge anbieten. Z.B. irgendwelches Zubehör. Die Folge sind dann oft Minenfelder mit zahlreichen und verstreuten CTA-Elementen bzw. Buttons. Diese Elemente buhlen um die Aufmerksamkeit der Nutzer. Abhhilfe schaffen hier eine Konzentration auf die wichtigsten Optionen und eine Gewichtung der verschiedenen Elemente. Sekundäre Elemente sollten auch sekundär dargestellt werden (Primary & Secondary Actions in Web Forms).

Zu viel Klickmisch hat übrigens ähnliche und teilweise sogar die gleichen Ursachen, wie das Bauchladensyndrom.

Klickmisch-Links

• Looking at “calls to action” on your website – Episode 40
• Nudge your users in the right direction
• Good Call-To-Action-Buttons

Die Ursachen hierfür sind nicht selten Anforderungen nach dem Motto „Die Startseite muss die Wurst sein“ oder „Den Nutzer packen und reinholen“. Verlustängste und unscharfe Zielvorgaben tun ihr übriges.

Unter Dauerbeschuss stehende, dadurch überforderte und genervte Besucher wenden sich ab und verlassen die Webseite. Sofern es Alternativen gibt oder der Markt nicht rein von Preisen diktiert wird.

Selten sieht man Geschäfte bzw. Läden, deren gesamtes Angebot draußen vor der Tür oder im Schaufenster ausgebreitet ist. Wo ist also das Problem bei Webseiten? Wo kann man ansetzen?

Zunächst muss man Verlustängste abbauen. Keiner verpasst etwas wesentliches, nur weil nicht gelich alles auf der Startseite erscheint. Es hilft ungemein, wenn man sich mal Gedanken über die Ziele und Aufgaben einer Webseite macht. Wenn man sich auf die wichtigsten Inhalte und Botschaften konzentriert. Voraussetzung hierfür: Kenne/definiere Deine Zielgruppe(n) und Ziele.

Die Startseiten bzw. Homepages sind nicht immer die wichtigsten Seiten und verlieren zudem weiter an Bedeutung: The Decline of the Homepage. Ich denke aber, dass Homepages meistens – für den Einstieg – doch noch die wichtigsten Seiten darstellen.

Das Bauchladensyndrom gilt es zu behandeln, in dem man Prioritäten setzt (Kampf um die besten Plätze) und die Herausforderungen gestalterisch löst (Essential Tips for designing an effective Homepage).

Eine Homepage ist irgendwie auch eine virtuelle Ladentheke.

Man kann das ganze heute schon realisieren. Wenn auch nur mit Extra-Klimmzügen, will man es crossbrowser-mäßig heute schon einsetzen.

Webdesigntrends sind Frühjahr für Frühjahr ein beliebtes Thema. Nie waren wir hipper als dieses Jahr und verkürzen uns so die Wartezeit bis zum noch besseren kommenden Jahr.

So war u.a. der Spaltensatz in CSS3 Thema im Artikel Web Design Trends for 2010.

Now, with increased screen resolutions and the advent of grid layouts, more designers are adapting this method to the web to make websites easier to use and to fit in more content.

In den meisten Fällen war es bisher aber so, dass mir die Sache das Lesen enorm erschwert hat. Grund hierfür ist der unreflexierte Einsatz. Effekthascherei wird auch mit CSS3 fehl am Platz sein. Lesbarkeit ist ein wichtiges Gut. Auch in modernen Zeiten und eigentlich mindestens schon so lange es Print (-design) gibt ;-)

Droht der Spaltensatz zur neuen Mikroskopschrift zu werden?

Using several columns allows you to fit more content in the same space.

Sucht man nach Gründen z.B. für erhöhte Abbruchraten, sind es oft auch die weniger offensichtlichen Aspekte, die zum Tragen kommen. Usability wird nicht nur von Webdesignern und -entwicklern beeinflusst.

Dabei hilft es, sich mal allgemeine Aspekte und Einflussfaktoren von UID (User Interface Design) zu vergegenwärtigen.

Ich würde das mal auf die folgenden vier Felder verteilen:

• Informationsarchitektur und Organisation
• Gestaltung und Psychologie
• Ergonomie und Interaktionsdesign
• Verständnis und Transparenz

Der Hund liegt außerdem ja meistens unter der Oberfläche begraben. Usability-Probleme also auch? Könnte man annehmen.

Die Oberfläche, Interaktionen und Flows können da handwerklich noch so gut sein, die Texte noch so gut lesbar. Wenn Produkte  sehr erklärungsbedürftig sind, hat man außerdem ein weiteres Problem. Werden Preismodelle nicht absolut transparent und nachvollziehbar erläutert (Bsp. Handytarife), hat man spätestens dann Probleme, wenn man nicht der deutlich günstigste Anbieter ist.

Verständnis – nicht nur im Sinn einer möglichst einfachen Sprache – und Transparenz. Sie dürften auch eine besonders gewichtige Rolle spielen. Zumindest abseits der reinen Informationsangebote.

Man darf auch bei den sog. A/B-Tests nicht vergessen, nur verschiedene Layout-Variationen in Betracht zu ziehen. Oft kann auch das Wording den Ausschlag geben.

Punkte, denen ich mal weiter nachgehen und darüber berichten werde.

Gefragt sind jedenfalls nicht nur die Architekten und Erbauer der Oberflächen. Produktmanagement, Vertrieb und Marketing können auch ihren Beitrag leisten.

Noch hat die Neuerung kaum Einfluss auf die Rankings bei Google. Es sind zunächst nur etwa 1% aller Suchanfragen betroffen. Hinzu kommt, dass Google das erst mal auf den .com-Bereich beschränkt. Sobald aber die Erprobungsphase abgeschlossen ist, dürfte wohl jeder Webseitenbetreiber mehr oder weniger betroffen sein.

Allerdings ist die Ladezeit einer Webseite nur ein Faktor unter vielen. Wie hoch sein Gewicht ist, kann wohl niemand sagen. Mal abgesehen davon, gibt es eben Faktoren, die weitaus wichtiger sind. Wie z.B. und v.a. relevante Inhalte selbst.

Außerdem scheint die Sache noch nicht ganz ausgereift. Zumindest kann ich mir die teils enormen Schwankungen nicht erklären. Die müsste mir Google mal erklären, oder eben weiter an seinen Messmethoden arbeiten. Hier z.B. die Aufzeichnungen der Google Laps zum Webzeugkoffer.

Andere Tools liefern mir konstantere Ergebnisse.

Überraschung – Ladezeit hat schon immer Gewicht

Mal abgesehen davon, dass die Ladezeit jetzt zum Rankingfaktor erhoben wurde. Ladezeiten von Webseiten als Qualitätsmerkmal, sind im Prinzip so alt wie die erste Webseite.

Im Sinne von Userexperience spielen die Ladezeiten schon immer eine gewichtige Rolle. Dauert’s den Besuchern zu lange, sind sie ganz schnell wieder weg. Das Überangebot an Information im Netz sorgt für Alternativen – meistens.

Das neue Gute daran

Durch Google’s Zug werden auch SEOs dazu genötigt, sich verstärkt um Usability- und Technikaspekte ihrer Webseiten zu kümmern. So gesehen wäre es nicht schlecht, wenn der neue Rankingfaktor ein paar Pfunde auf die Waage bringen würde.

Maßnahmen und Tools

Ein paar allgemeine und einige speziell auf Wordpress bezogene Tipps hat Vladimir Simovic zusammengefasst.

Wem die Welt der Ladezeitenoptimierung noch neu ist, der findet im Netz eine Fülle an Tipps und Tools. Eine Auswahl:

Messen

• Yahoo! YSlow – Firefox Add-On
• Page Speed – Firefox Add-On
• Google Webmaster-Tools
• Pingdom Tools – Online

Handeln

• How-To Minimize Load Time for Fast User Experiences
• How to reduce the number of HTTP requests
• Checklist for Better Web Graphics

Gas geben! Auch wenn der Ranking-Aspekt noch nicht wirklich zählt.

[...] (Website) schließlich kam aus Deutschland und bestand aus eng gesetzten Zeilen, die auf zwölf Seiten ein Phänomen behandelten, [...] Der Text wies einen bemerkenswerten Mangel an Absätzen auf und war eindeutig für Leute geschrieben, deren Vorstellung von Ekstase eine mit Formeln vollgekritzelte Schiefertafel war.

Hat der Autor, speziell bei deutschen Angeboten, etwa entsprechende Erfahrungen gemacht? Wir werden es nie erfahren. Aber trotzdem noch einmal der Hinweis auf zwei Artikel, hier aus dem Webzeugkoffer: Typografie ist das halbe Webdesign und Mehr Lesbarkeit im Web – Einfach.

Mit dieser Frage beschäftigt sich auch Craig Buckler in seinem Artikel The Problem With Opera auf sitepoint.com (mit anschließender angeregter Diskussion).

Das Kernproblem liegt Wohl in einem gewissen Mangel an Usability oder zumindest intuitiver Bedienbarkeit. Optionen und Funktionen sind oft nicht dort zu finden, wo ich sie erwarte. Erwarte, weil sich bei anderen Vertretern unabhängig vom Hersteller, gewisse vertraute Bedienkonzepte etabliert haben. Es sind auch die umfangreichen und oft schwer auffindbaren Konfigurationsmöglichkeiten.

Opera is also configurable in ways which you don’t see in other applications. Perhaps that’s innovative, but it can lead to confusion. I’ve been using the application for many years but I often have difficulty locating the option I need.

Otto Normal wird es wohl so oder so ähnlich sehen. Auch weil ein Browser etwas ganz einfaches ist. Das Programm, mit dem man ins Internet geht. Und das möglichst ohne Hürden.

Few people are willing to climb the steep learning curve especially when competing browsers offer an easier and less disorientating experience.

Von daher war Opera auch für mich nie das Tool der Wahl. Auch die Tatsache, dass Opera ziemlich zuverlässig ist, was die Interpretation der Eingaben der Webdesigner angeht, ändert für mich nichts daran. Man hat mit dem Opera zwar eine ziemlich hohe Zuverlässigkeitsquote, soweit man sauberen und der Spezifikation entsprechenden Code schreibt.

Das wiegt es für mich aber nicht auf. Mein Tool der Wahl, muss mir selbst als Nutzer eine gelungene Userexperience liefern. Außerdem muss es ein Browser sein, der über einen relevanten Marktanteil und eine Vielzahl von Entwicklertools verfügt. Schon seit Jahren ist daher Firefox meine Nr. 1 und der Rest ist für mich nur zum testen da.

In einem weiteren Artikel beschäftigte sich Craig übrigens damit, warum Opera eigentlich der beste Browser der Welt sein könnte: Is Opera 10.5 the Best Browser Ever?

Die Abbildung zeigt ein Suchformular, wie es nicht mehr zeitgemäß ist. Das was den Nutzern oft als “Expertensuche” verkauft wird (z.B. Operatoren wie die zum Verknüpfen von Suchergebnissen AND oder OR etc.), ist für mich unbrauchbar bzw. zumindest nur mit erhöhtem Aufwand benutzbar.

Wir erinnern uns an einen wesentlichen Aspekt von Usability: Effizienz – Die Möglichkeit, Aufgaben zuverlässig mit möglichst wenig Aufwand lösen zu können. In diesem Fall ist dieses Kriterium für mich nicht erfüllt.

Gerade im vorliegenden Beispiel, ist die Möglichkeit einer Anpassung der Suchanfrage über die bekannten SQL-Operatoren, eine Spur zu viel. Ich erwarte hier eine wirkliche erweiterte Suchfunktionalität. Ein ordentliches Formular, dass mir die wichtigsten Suchkriterien anbietet. Suchkriterien, die ich dann über ein gut gestaltetes Formular definieren und variieren kann.

Soll eine Möglichkeit angeboten werden, mehrere Suchbegriffe einzugeben, kann auch ein Texteingabefeld ausreichend sein. Mit einem entsprechenden Hinweis, dass mehrere Suchbegriffe durch Komma getrennt eingegeben werden können.

Wobei man es mit dem Angebot an möglichen Suchoptionen nicht übertreiben sollte. Denn auch das kann verwirren und bremsen.

Kürzlich erschienene Veröffentlichungen können einen Teil dazu beitragen, bessere Formulare und somit auch bessere Suchfunktionen zu realisieren:

• Formulare total 1 (Formulardesign) (Technikwürze Podcast)
• Formulare total 2 (Barrierefreie Formulare) (Technikwürze Podcast)
• Web Forms for People

User interface patterns and conventions can, and should, be broken, provided one criterion is met: the new solution is better at its task than the one it replaces.

Das Problem bei Patterns besteht darin, dass sie mit der Zeit u.U. etwas unflexibel machen. Hier können z.B. auch Antipatterns für Abhilfe sorgen.

Typography is the backbone of good web designBrian Hoff

Aber oft endet Webdesign bereits kurz nach dem Header. Dabei kann man in keinem Bereich des Webdesigns mit wenig Mitteln (ein paar Zeilen CSS)  schon sehr viel erreichen.

Macht eine Website auf den ersten Blick noch einen guten Eindruck, kann dieser bei genauerem Hinsehen schnell dahin sein. Fehlende Abstände (margin) und Polster (padding), niedrige Zeilenhöhen (line-height) und mikroskopisch kleine Schrift sind nur ein paar Symptome der Typoritis.

Grundvoraussetzung: Lesbarkeit

Auch im Web geht es v.a. um Information in Textform. Neben einem gut strukturierten und ansprechenden Webdesign, steht außerdem die Lesbarkeit mit an oberster Stelle. Gefolgt von Design und Eleganz des Schriftbildes. Was nützt ein Feuerwerk an Transparenzen und Schattierungen, wenn die Besucher nichts lesen können oder wollen?

Oft wird auch explizit eine möglichst kleine Schriftgröße gefordert. „Weil’s einfach besser aussieht.“ Das mag sein – auf den ersten Blick. Dann wenn ich mir eine Website als Bild betrachte. Was sie aber nicht ist. Davon abgesehen, kann auch große Schrift, wenn sie geschickt in Szene gesetzt wird, ihren Reiz haben. Dann sieht’s nicht nur gut aus, sondern es ist auch gut lesbar.

Keiner muss Experte in Sachen Typografie sein. Aber wenn man sich die Mühe macht, die wichtigen Grundregeln zu beherzigen, hat man schon viel erreicht. Darüber hinaus kann man dann seine Leser auch durch gelungene typografische Gestaltung begeistern.

Grundlagen

• The Elements of Typographic Style Applied to the Web (Klassiker)
• Typefacts
• Korrekte Typografie für’s Web mit HTML
• Typographie im Web
• A guide to Web typography
• Typography
• typographie web (französisch)

Lesbarkeit, Design & Eleganz

• Typography is the backbone of good web design
• Make Your Texts More Readable
• The 100% Easy-2-Read Standard
• 20 Do’s and Don’ts of Effective Web Typography
• Elegant Web Typography (Slideshare Präsentation)
• Dan Rubin on Web Typography (Interview)

Ressourcen & Tools

• Web Font Specimen
• Typedia
• Typography tips from 7 top designers
• Typetester
• Typechart
• CSS Type Set

Mehr Vielfalt

Wer außerdem gerne auf eine Vielzahl von Schriften zurückgreifen möchte oder muss (Stichwort „Hausschrift“), dem stehen dann erweiternde Techniken und Tools zur Verfügung. Die drei Hauptrollen spielten dieses Jahr @font-face, Cufon und Typekit. Ein alter Bekannter ist außerdem sIFR.

Mehr Vielfalt kann aber auch noch so ihre Tücken haben, wie ein prominentes Beispiel zeigte: Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts.

@font-face

War bereits Bestandteil der CSS2-Spezifikation, wurde aber, auf Grund mangelnder Unterstützung durch die Browserhersteller, aus CSS2.1 wieder verbannt. Mit CSS3 erlebt diese Methode ihre Renaissance. Dazu noch etwas mehr bei Tobias Otte: @font-face im Einsatz.

Cufon

Hier erfolgt eine dynamische Schriftersetzung mit Hilfe von Javascript und bietet eine Flash freie Alternative zu sIFR. Mehr zu Cufon bei Cameron Moll: Exploring Cufón, a sIFR alternative for font embedding.

Typekit

Auch Typekit setzt auf Javascript zur Einbindung System unabhängiger Schriften. Ich habe selbst auch kurz auf Typekit geblickt. Es hat aber auch noch ein paar Macken im Rendering.

Allen drei erwähnten Ansätzen ist eines gemeinsam: Probleme. Man hat entweder noch nicht die absolute Vielfalt (Lizenzen und Unterschiede im Rendering) oder es bestehen noch Unterschiede in der Browserunterstützung und Uneinigkeit über unterstütze Formate einzubettender Schriftfamilien.

Wir sind zwar schon ziemlich nah dran an einer neuen Vielfalt in Sachen Web-Typografie. Aber es kann nicht schaden, wenn man sich erst mal auf die Grundlagen beschränkt und sich allgemein um bessere Lesbarkeit und ansprechende Schriftbilder bemüht.