Kategorien
Webdesign

Wie reden Sie denn mit mir?

Machen Sie sich Gedanken, wie Sie Besucher auf Ihrer Website ansprechen? Falls ja: Gratulation. Offenbar tun das nämlich wenige. So verschenkt man unnötig Potenzial. Ein paar Tipps und Faustregeln können bereits vieles verbessern.

Kunden wollen nicht immer angesprochen werden. Wenn ich arbeite, und mein Handy klingelt, bin ich kurz angebunden. Ein Werbeanrufer bekam das kürzlich zu spüren, als er versuchte, mich am Telefon erst einmal in ein lockeres Gespräch zu verwickeln, ohne zu erwähnen, was er zu verkaufen hatte. Bevor er sein Anliegen vortragen konnte, hatte ich aufgelegt.

Es gibt Websites, die ganz ähnlich versagen. Den falschen Ton zur falschen Zeit anzuschlagen, kann viele Kunden kosten. Schnell wirkt man unpersönlich. Oder anbiedernd, wenn man die Personalisierung übertreibt. Oder unprofessionell, wenn man den Ton nicht hält. Aber wie behält man das im Blick? Wie geht es richtig?

Was ist zu entscheiden?
Natürlich gibt es keine ewig richtigen Regeln. Aber einige Knackpunkte lassen sich ausmachen, die alle ihren Part bei Entscheidungen spielen sollten. Bevor wir auf diese einen Blick werfen, widmen wir uns kurz den Fragen, die sich bei der Anrede eines Besuchers stellen. Schließlich geht es um mehr, als nur ‚Du‘ oder ‚Sie‘.

Direkte Anrede? Wer direkt, vielleicht sogar namentlich angesprochen wird, fühlt sich persönlicher behandelt und freundlicher empfangen. Aber das Versprechen persönlichen Umgangs ist gläsern, schließlich redet niemand wirklich mit dem Benutzer. Schleichen sich Fehler in die Anrede ein oder wird die Personalisierung übertrieben, kommt der Besucher sich eher veräppelt vor. Und unfreiwillige Komik lauert an jeder Ecke:

Locker oder Formell? Wer seine Nutzer siezt, sollte umgangssprachliche Ausdrücke meiden. Seriösität sollte trotzdem nicht mit trockenem Behördenstil verwechselt werden. Auch locker zu klingen, ohne sich peinlich anzubiedern, ist sehr schwer. Den meisten Websites, die auf junge Menschen zugeschnitten sind, sieht man deutlich an, ob der Autor selbst noch jung ist.

Wie autoritär? Vorsicht mit der Befehlsform! Niemand hört gern, was er zu tun und zu lassen hat. Auch Fehlermeldungen wie “Dazu sind Sie nicht autorisiert!” kommen nicht gut an. Gleichzeitig wollen Kunden aber klare, verbindliche Angaben bekommen. Um Deutlichkeit nicht mit Unverschämtheit zu verwechseln, hilft es oft, sich eine Aussage im persönlichen Gespräch vorzustellen. Wer sich allzu sehr mit dem Besucher gleichstellt, wirkt dagegen schnell unprofessionell. Wenn eine Fehlermeldung salopp erklärt “Wir wissen auch nicht, was da schief gelaufen ist”, verabschiedet sich der Besucher womöglich mit freundlichem Schulterzucken.

Duzen oder Siezen ist natürlich eine Kernfrage. Neben der Seriösität, die man vermitteln will, spielt vor allem das Alter eine Rolle. Wie jung will man laut eigenem Image sein? Wie alt sind die Kunden?

Mancher orientiert sich zu sehr am tatsächlichen Alter der Besucher. Das spielt zwar eine große Rolle. Aber vor allem ist die Wahl zwischen ‚Du‘ und ‚Sie‘ ein Werkzeug, um Distanz oder Nähe zu schaffen.

Und wie entscheidet man?
Die zu fällenden Entscheidungen sind beleuchtet. Aber wie entscheidet man sich? Viele halten das für einfach: Wer ein Beerdigungsinstitut online bringt, siezt, wer eine Kindercommunity gründet, duzt. Aber genauer hinzuschauen, bringt viele relevante Kriterien ans Tageslicht. Und wer sich online umschaut, der bekommt den Eindruck, dass im Detail doch nicht alles einfach ist.

Der Kontext entscheidet, was richtig und was falsch ist. Darüber hinaus hilft nur Erfahrung. Ein bisschen Systematik schafft auch bei der Einschätzung der eigenen Website Überblick. Was spielt alles in die Entscheidung hinein, wie man mit den Nutzern redet?

Art der Website: Kategorien wie ‚eShop‘ oder ‚Nachrichten‘ reichen in der Regel nicht aus. Welche Ware wird angeboten? Welches Image wird angestrebt? Müssen Besucher von einem Konzept überzeugt werden? Will man sympathisch dastehen? Ein genauer Blick auf Zweck und Inhalt der Site liefert ganz automatisch viele Antworten auf Stilfragen.

Zielgruppe: Idealerweise gibt es ein klar abgegrenztes Publikum, auf das man sich ausrichten kann. Häufigster Fehler ist hier, kein Mitglied der Zielgruppe zu fragen. Auch im kleinen Maßstab ist es unersetzlich, Testpersonen, zur Not aus dem Bekanntenkreis, zu rekrutieren und gezielt nach dem Ton und der Anrede zu fragen. Und zwar keine Ja/Nein-Fragen: Wie wirkt der Stil? Wie würde man sich den Sprecher so eines Textes vorstellen? In welchem Ton fühlt man sich angesprochen?

Bereich der Site: Jede Unterseite hat ihren Zweck. Aus diesem erwachsen spezifische Bedürfnisse. Im Verkaufsformular ist eine deutliche Sprache mit direkten Anweisungen wichtig. Auf der Startseite geht es eher darum, den Besucher freundlich zu begrüßen und Möglichkeiten aufzuzeigen. Tritt ein Fehler auf, muss man von verärgerten Usern ausgehen. Und so weiter.

Möglichkeiten: Nicht alles ist machbar. Wer will die Besucher zur Registrierung nötigen, nur um sie namentlich anzusprechen? Und Benutzernamen sind oft nichts, womit man angesprochen werden will. “Hallo, xyPuschel63”, klingt nicht persönlich, sondern albern. Und übertriebene Liebe zum Detail verführt zum Schwätzen. Knapper Text bleibt im Netz König. “Standort” ist schneller gelesen als “Sie befinden sich hier”.

Fazit
Das war doch alles nichts Neues? Eigentlich sollte das stimmen. Aber so lange immer noch formelhafte und austauschbare Texte im Netz dominieren, zeigen sich auf diesem Feld Probleme und Chancen. Wer den Nutzer unreflektiert so anredet, wie es ihm gerade in den Sinn kommt, übersieht oft Irritationen und offene Fragen, die er hinterlassen kann. Wer dagegen bewusst (und gut) entscheidet, hat ein wichtiges Alleinstellungsmerkmal für die eigene Site. ™

Erstveröffentlichung am 20.09.2007

Kategorien
Webdesign

Nintendo Wii: Die Rückkehr der Fernsehsurfer

Was hat man sich dabei nur gedacht? Jetzt werden mit Nintendos neuer Spielkonsole wieder hunderttausende Menschen in Deutschland auf das Internet losgelassen — vom Sofa aus. Erinnert das nicht an die Set-Top-Boxen aus alten Zeiten? Hoffentlich nicht: Der eingesetzte Opera-Browser liefert mehr Kompatibilität und Komfort als die eingeschränkten Kisten von damals. Aber auch, wenn der Fernseher jetzt so tun kann, als sei er 800 Pixel breit und der Browser die Seiten flüssig zoomt, kann das sicher nicht den Surfkomfort eines PC ersetzen.

Was soll man als Webmaster damit anfangen? Wenn die eigene Website Videos, Musik oder Bilder bietet, und die Inhalte auf die insgesamt eher junge Zielgruppe passen, dann kann man ja eine Version der Site für die Wii ins Auge fassen. Durch das Internet geistern bereits erfolgreiche YouTube-Mods und Flash-Spiele-Seiten. Und die Eigenheiten der eingesetzten Operaversion sind auch gut dokumentiert. Für Inspiration ist also gesorgt.

Kategorien
Webdesign

Webdesign: Gut vorgelegt

Von der ersten Idee bis zur fertigen Website erstreckt sich ein langer, steiniger Weg. Wer allerdings die ganze Strecke allein und ohne Hilfe zurücklegen will, der macht es sich unnötig schwer. Kein Arbeitsschritt, zu dem es nicht endlose Linklisten mit nützlichen Tipps, Anleitungen, Vorlagen, Tutorials, Testimonials und noch viel mehr gäbe. Da taucht direkt das nächste Problem auf: Wer soll den überfüllten Basar der Tippgeber und Hilfesteller überblicken?

Ist Ihnen das auch schon passiert? Vormittags stoßen sie auf eine umfassende Quellensammlung. Begeistert lassen sie sich inspirieren, durchforsten die Links – und plötzlich geht draußen die Sonne unter. Die Sichtung und Sortierung guter Tipps kann viel Zeit kosten.

Vorsortiert
Probieren wir etwas anderes: Nicht mehr als zwei Tipps zu jeder Kategorie. Dazu ein Kommentar, was Vorteile und gute Anwendungsgebiete für eine Website sind. Die vorgestellten Sites liefern nach meiner Erfahrung wertvolle Hilfe bei der optischen Gestaltung. Designideen, Farbschemata, Codegerüste für spezifische Layouts. Sie alle sind nützlich, ansprechend gestaltet, einfach zu nutzen und kosten nichts. Wer allerdings für kommerzielle Zwecke auf diese Quellen zugreift, sollte die Nutzungsbedingungen im Blick behalten.

Fertig designt
Ein komplettes Design einfach zu übernehmen, scheint zweifelhaft. Für schnelle Platzhalterseiten, als Lösung für Amateure oder als Inspiration und Startpunkt für eigene Lesitung kann es dagegen sehr gut dienen.

Open Source Web Design

Templates

Bei über 2080 freien Designs ist oswd inzwischen angekommen. Nützliche Vorschaufunktionen, ansprechendes Design und ihre anhaltende Popularität machen diese Site zu meinem liebsten Template-Archiv. Die Suchkriterien wären leider ausbaufähig, gehören aber schon zum besten im Web: Validation, Kontrast, Bilder, Hauptfarbe, CSS-Basierung und Spaltenzahl können abgefragt werden.

Open Web Design

Templates

Dasselbe in (etwas) schlechter: Auch hier werden über 2000 Designs versammelt. Die Vorschau funktioniert hier genau so gut, dafür stört mich aber das unausgewogene Design. Die Suche sieht ähnlich aus, wie bei oswd. Zwar fehlt hier das Kriterium Spaltenzahl, aber die getrennte Auswahlmöglichkeit für Erst- und Zweitfarbe ist Gold wert.

CSS-Gerüste
Vielseitiger und nützlicher sind Vorlagen, die dem Designer häufige Aufgaben abnehmen. Wer sich selbst noch keine wiederverwendbaren Vorlagen gebastelt hat, sollte ruhig mit der Arbeit anderer anfangen. Elegant und sauber gecodet sind meiner Meinung nach folgende Kandidaten.

Mollio

Templates

Gerade für Anfänger wird es kaum besser. Mollio versammelt 6 vollständig ausformulierte Designvorlagen. Die Resultate sind charakterlos, standardkonform und hervorragend dokumentiert.

Intensivstation

Templates

Die Intensivstation hält, was sie verspricht. Die über ein Dutzend Vorlagen sind ’nice and free‘, und decken fast alle typischen Grunddesigns ab. Der Kommentar ist knapp und sinnvoll.

Farben
Ein gutes Farbschema ist nicht schnell gefunden. Zwei Hilfsmittel verwende ich regelmäßig, für Inspiration und schnelle Tests.

Colorcombos

Templates

Vorschauen für die Farbwahl und -zusammenstellung gibt es viele. Die meisten davon sind für mich nutzlos, weil ich nicht von einer Briefmarke auf Wandtapeten schließen kann. Das minimalistische Tool von Colorcombos erlaubt das Zusammenstellen auf Riesenflächen. So wird anschaulich, wie ein Farbschema im großen Maßstab wirkt.

COLOURlovers

Templates

Wer sich von der Fantasie anderer inspirieren lassen will, findet bei den Colourlovers reichlich davon. Ein gutes Suchfeature, viele Bewertungen und ein Haufen Schemata warten.

Sandbox

Templates

An WordPress führt ja kaum noch ein Weg vorbei. Das heißt nicht, dass man damit glücklich werden müsste. Ein Theme in WordPress zu erstellen, ist nicht für jeden ein Klacks. Wer es gern möglichst übersichtlich und klar hat, und dazu eine knappe, nützliche Dokumentation schätzt, dem empfehle ich die Sandbox: Ein minimalistische Theme, dass als Startpunkt für eigenes Design dienen soll. Spätestens eine Competition hat demonstriert, dass die Sandbox vielseitig einsetzbar ist.

Den Werkzeugkoffer pflegen
Man kennt das von guten Handwerkern: Sie haben ihre eigenen Herangehensweisen entwickelt und setzen ganz gezielt bestimmte Werkzeuge für bestimmte Aufgaben ein. Ein gut sortierter Ordner mit wichtigen Lesezeichen ist viel Wert. Mit am Wichtigsten dabei ist, gut aufzuräumen und auszumisten. 50 Links auf Designgalerien helfen in der hektischen Praxis einfach nicht weiter. Statt dessen sollte man sie in ruhigen Momenten durchsuchen – und aussortieren.

Erstveröffentlichung 27.08.2007

Kategorien
Webdesign

Perfektes Layout

Sind Sie auch schon auf solche Versprechen reingefallen? Angeblich perfekte Layouts gibt es wie Sand am Meer; seltsam, dass man online kaum etwas von der Perfektion zu sehen bekommt. Was ist eigentlich perfekt? Und warum beschäftigen sich Webdesigner überhaupt mit Perfektion? Sollte man das nicht lassen?

Was nicht geht
Im eigentlichen Sinne kann man Perfektion nicht erreichen. Da hilft es, sich vor Augen zu führen, was Perfektion bedeutet: Etwas vollkommenes, vollendetes. Beides ist problematisch: Die Qualität einer Website bestimmt sich durch die Augen der Zielgruppe. Je größer die Zielgruppe wird, desto mehr Kompromisse sind nötig. Ein Kompromiss ist aber ein Zugeständnis, um einem anderen Ziel noch gerecht zu werden; so gibt es keine Vollkommenheit. Und Vollendung sollte in unserem dynamischen Medium ohnehin eher ein Schimpfwort sein, als ein Ziel.

Perfektion im Web gibt es also nicht. Was braucht man dann? Streben nach Perfektion. Auch, wenn es für einige paradox klingt: Es ist sinnvoll, sich zu Zielen aufzumachen, die man nie erreichen kann. Wer sich immer am Optimalfall misst, der schneidet immer schlecht ab – aber er wird nie um Dinge verlegen, die er verbessern könnte. Wer sich also ernsthaft um Perfektion bemüht, der ist auf dem Weg, gute Websites zu erstellen. Aber funktioniert das auch in der Praxis? Und kann man überhaupt sagen, was denn im Netz perfekt wäre?

Was geht
Um bei der Suche nach göttlichen Websites nicht den Boden unter den Füßen zu verlieren, sollte man nach ganz Greifbarem suchen. Sinnvoll klingt das Prinzip der Best Practice: Einfach nach Beispielen suchen, die ein Problem besser gelöst haben, als andere. Und im Netz funktioniert das ohne lange Fußwege. An vielen Orten wird vorgearbeitet – auch hier. Unsere (etwas ältere) Linksammlung mit Designgalerien ist ein guter Startpunkt, wenn man einen Überblick gewinnen will.

Sich regelmäßig nach der Konkurrenz umzuschauen, sollte für jeden Webdesigner Pflicht sein. Aber sich endlos durch Galerien zu wühlen, führt zu keinem bestimmtem Ziel; eher zu jener Form von Inspiration, die man sucht, um die Mittagspause in die Länge zu ziehen. Wie soll man vorgehen? Ein paar Vorüberlegungen können schon helfen.

Ein perfektes Layout, oder die beste Übersichtlichkeit ist an sich kein klares Ziel. Besser, man sucht nach ganz spezifischer Inspiration. Welche Website hat die effektivste Navigation? Welches Single-Page-Blog hat die effektivste Raumaufteilung? Wer hat schön gekennzeichnete Links, die den Lesefluss nicht stören?

Auch bei der ziellosen Suche nach Inspiration kann ein wenig Fokus Wunder wirken, um Nutzen aus der Recherche zu schlagen. Findet man ein gutes Beispiel, sollte man es nicht nur bookmarken, sondern auch einen genaueren Blick wagen. Was macht die Site so gut? Was ließe sich davon verallgemeinern? In anderen Bereichen einsetzen? Wie sind bestimmte Aspekte realisiert?

Je enger der Blickwinkel, desto aussagekräftiger die Resultate. Mit ein paar Designgalerien habe ich das asprobiert. Welche Galerie aus unserer Liste bekommt Aspekte des Interfaces besonders gut hin?

Perfekte Raumausnutzung
Wie kann man schnell viele Designs überblicken? Zum Beispiel durch ein eng gekacheltes Muster mit sinnvoll ausgewählten Thumbnails und schnell ladenden Tooltips. Beautifully macht es vor.

Perfekt den Mund gehalten
Wenn man eine Designgalerie betritt, will man vor allen Dingen die Ausstellungsstücke sehen, nicht die Galerie selbst. So manches Showcase verheddert sich und sieht selbst so schick aus, dass dort Ausgestelltes nicht mehr zur Geltung kommt. Anders web creme: Die Site sieht nach gar nichts aus. Und das ist durchaus als Kompliment gemeint. Jede vorgestellte Site hat hier genug Platz, um für sich zu wirken. Starke Navigationsmöglichkeiten fehlen zwar. Dafür stört die graue und minimalistische Site garantiert nicht.

Perfekte Navigation
Na gut, sicher nicht perfekt. Aber meiner Erfahrung nach der schnellste Weg zu ganz spezifischen Ergebnissen ist Design Meltdown allemal. In sinnvolle Kategorien unterteilt, die eher assoziativ als logisch funktionieren, finde ich hier fast immer, was ich suche. Da diese Website nicht nur beliebt ist, eignet sie sich auch hervorragend als Beispiel, warum Perfektion und ein großes Publikum nicht zueinander passen.

Nicht verwechseln!
Was war jetzt perfekt? Natürlich nicht. Während also die Orientierung an Perfektion eine gute Sache ist, um Entwicklungschancen zu beurteilen und Inspiration zu erhalten, hat sie eine klare Grenze: Die Realität. Als Webdesigner auf dem Markt kann sich keiner leisten, ewig an derselben Site zu arbeiten. Da helfen nur klare, realistische Ziele für den Alltag. Aber wer nicht ab und zu die marktwirtsachaftliche Brille abnimmt, der übersieht eine ganze Menge.

Erstveröffentlichung 20.08.2007

Kategorien
Webdesign

Mutiges Webdesign

Viel hat sich getan in den letzten Jahren: Wir haben Tabellen abgeschafft, Ajax entdeckt und uns von statischen Websites verabschiedet. Alles ist möglich. Aber warum sehen die meisten Websites immer noch so aus wie vorher? Ein kleiner Ausblick auf Fallstricke und Alternativen.

Module
Ein ganz normaler Ablauf im Webdesign: Nachdem geklärt wurde, was auf die Seite muss, werden Inhaltsblöcke hin und her geschoben. Schließlich hat alles seinen Platz, bekommt eine hübsche kleine Überschrift und wird mit dem Rest bündig ausgerichtet. Fertig? Hoffentlich nicht. Das Resultat mag ordentlich aussehen, aber es hat eine wesentliche Chance verspielt, sich vom drögen Einheitsbrei abzuheben. Auch, wenn die optische Aufteilung einer Website in funktionale Blöcke sinnvoll und oft nötig ist, muss man ihr das nicht ansehen.

Oft genug ist jedes Element einer Page ein klar abgegrenzter Kasten. Das mag funktional sein – schön ist es nicht. Schauen wir uns ein (recht beliebiges) Beispiel an:

Screenshot

Molly Holzschlag sich aufgeregt

  • Zu standardkonform: Ein Design, das durch das Befolgen von Standards definiert wird, fällt niemandem auf.
  • Kaum Variation: Gleiche Schriftgrößen, gleiche Hintergründe und gleiche Farben für verschiedene Elemente betonen gar nichts mehr
  • Zuviel Inhalt: Wer behält bei derartig vielen Elementen den Überblick?
  • Zuviel Tabelle: Warum sind Rubrikentitel und die zugehörigen Inhalte so stark voneinander getrennt? Warum muss jede Liste und jede Zusammenstellung verschiedener Inhalte mit Trennstrichen und alternierenden Zeilenfarben garniert werden?

Solche Probleme machen eine Site nicht schlecht. Das konkrete Beispiel dokumentiert nur idealtypisch häufige Probleme. Aber wie macht man’s besser?

Lösungen
Gutes Design geht einen Schritt weiter. Das ist immer mit Risiken verbunden. Es gilt, eine Balance zwischen kryptischer Avantgarde und 08/15-Design zu finden. Die folgenden Beispiele für gutes Design machen nicht alles richtig, aber sie bieten interessante Ansätze und Ideen.

Haus Hoyer

Screenshot

Koehorst in ‚t Veld

Screenshot

Grow Collective

Screenshot

We Create Things

Screenshot

Elegant und Simpel: die Typographie (Absätze plus Fettdruck) strukturiert den Inhalt. Dazu ein ansprechendes Farbschema, das die Aufmerksamkeit auf das Wichtigste (Arbeitsproben) lenkt, auch wenn’s durch die Web 2.0-Ästhetik nicht gerade gut im Gedächtnis bleibt. Abzüge gibt es für den unnötigen Flasheinsatz und die schlecht erkennbaren Links. Aber der Raum ist gut aufgeteilt und die Inhalte werden sofort erfasst.

B_CUBE

Screenshot

Wieder etwas ungewöhnliches: komplett mit Flash gemacht, ginge aber in abgespeckter Form auch ohne. Die Seite ist ein Musterbeispiel an klarer, intuitiv verständlicher Bedienung, obwohl die Navigation ganz ungewöhnlich funktioniert. Die Fußzeile wird sinnvoll genutzt, um obligatorische Infos immer bereit zu halten. Sehr übersichtlich, sehr schick.

Jesús Rodríguez Velasco

Screenshot

So sieht eine Standard-Website aus, wenn man jedes Detail liebevoll überlädt. Die Elemente stehen alle, wo sie stehen sollten. Aber von der schrägen Suchleiste über den schreiend riesigen Begrüßungstext bis hin zu den handgemalt verschnörkelten Rubrikentiteln gibt jedes Element ein Statement. Die zuerst chaotisch wirkenden Elemente werden klug immer wieder aufgegriffen. So entsteht Konsistenz im Chaos. Und immer hat die Schrift genug Raum, ist angenehm groß und gut lesbar.

Miguel Ripoll

Screenshot

Das Portfolio von Miguel Ripoll ist allein schon beeindruckend, weil er das obige Beispiel von Velasco gestaltet hat. Seine Website steht im krassen Kontrast: Ein Name, vier Links, fertig. Tolle Typographie und konsequente Reduktion aufs Wesentliche zeichnen den Auftritt aus. Textgrößen und -ausrichtung reichen völlig, um einen klar strukturierten, kühl eleganten Auftritt hinzulegen.

Keine Standards
Gibt es eine einheitliche Lösungsstrategie oder ein Muster, dem sich diese glorreichen sieben Beispiele unterordnen können? Vielleicht nicht. Aber darum geht es gerade. Wer aus den althergebrachten Schemata ausbrechen und etwas Neues, eigenes präsentieren möchte, der kann nicht nur auf Vorbilder schielen. Ein verbreiteter Trick ist sicher, sich von anderen Medien inspirieren zu lassen: Ästhetik ist universell. Sie intakt ins Web zu bekommen, ohne gleichzeitig die Prinzipien einer guten Website zu verraten – das ist das eigentliche Kunststück.

Erstveröffentlichung 13.07.2007

Kategorien
Webdesign

Warum kommt was wohin?

Inhalte auf einer Webpage platzieren – eigentlich ein alter Hut. Für Logo, Navigation, und wichtigen Inhalt gibt es Stammplätze, fast erkennt man beim Surfen ein unsichtbares Raster. Das wird entweder eingehalten oder die Site fällt durch. Ist das der Weisheit letzter Schluss? Nicht ganz.

Aus der Entfernung mag die richtige optische Aufteilung einer Webpage ganz einfach scheinen. Wer schon einmal daran gescheitert ist, Kunden Designprobleme zu erklären, kann ein Lied davon singen. Aus der Nähe der täglichen Arbeit präsentiert sich der Wust von Anforderungen, Regelungen, Trends und besonderen Wünschen oft als unlösbarer Knoten. Pauschale Lösungen gibt es da nicht. Wer alle Websites über einen Kamm scheren will, landet bei 08/15-Design. Wir wollen lieber einen Überblick schaffen, welche Techniken und welche Erfolgskriterien auf dem Schreibtisch liegen. Von da aus kann man Entscheidungen bewusster treffen und sich hoffentlich besser orientieren.

Ein ganzer Sack voll Konventionen
Webdesign ist noch jung und das Wissen von gutem Webdesign leitet sich schon deswegen aus anderen Disziplinen ab. Mediengestalter treffen auf Usabilityforscher, Informationsarchitekten auf Werber. In diesem Spannungsfeld haben sich einige Klassiker entwickelt.

Wo der Nutzer hinschaut
Das berühmte Jakob-Nielsen-F: Per Eyetracking hat Nielsen herausgefunden, was man auch ganz unwissenschaftlich bereits ahnt. Besucher einer Webpage schauen nach links oben und lassen dann den rastlosen Blick nach rechts, dann nach unten, dann wieder nach rechts wandern. Das passiert nicht systematisch. Zudem geht dem Besucher nach unten hin die Aufmerksamkeit aus. Aus diesem Aufmerksamkeitsmuster lässt sich grob ein F skizzieren. Websites, die von dieser Beobachtung profitieren wollen, platzieren die Elemente ihrer Site sinnvoll entlang diesem F. Also etwa das Logo links oben, rechts daneben eine Hauptnavigation, dann links nach Bedarf Unternavigation, mittig der wichtige Inhalt.

Auch ohne Blick auf das F gibt es klare Anhaltspunkte, wo ein Besucher hinschaut. Die Konvention diktiert Positionen für Logo, Inhalt und Navigation. Die haben Surfer genau so verinnerlicht wie Designer. Zudem ziehen Animationen und kräftige Farben Aufmerksamkeit auf sich. Aber sieht ein Element zu sehr nach Werbung aus, tritt der gegenteilige Effekt ein. Es wird von vielen Besuchern ganz ignoriert.

Gut verteilt
Alles, was man in den Raum stellt, nimmt ein Verhältnis zum Rest ein. Kein Innenarchitekt würde alle wichtigen Möbel möglichst dicht beieinander an den Hauseingang stellen. Damit Webdesigner das auch lernen, helfen Erkenntnisse aus dem Printdesign. Die Balance der Objekte und freien Flächen lässt sich auf vielen Wegen ausdrücken. Von der einfachen Einteilung einer Page in Spalten, über das Zugrundelegen eines Gitters bis hin zu Abhandlungen über White Space gehen die Versuche, den Raum klug einzuteilen.

Zwei Dinge stehen dabei im Fokus. Erstens müssen verschiedene Elemente räumlich klar voneinander getrennt werden. Zweitens muss die Anordnung der Elemente einer übergeordneten Logik folgen. Inhalte werden entlang unsichtbarer Linien angeordnet.

Dabei heraus kommt eine Schule des Webdesigns, die sich vom Bildschirm entfernt und die Augen zusammenkneift. Aus der Distanz kann man den Blick für das große Ganze entwickeln. So stellt man fest, dass die meisten Webpages heillos überfrachtet sind. Wenn dagegen eine klare optische Struktur entwickelt wurde, sieht alles gleich viel stimmiger aus. Das Auge muss weniger nach Inhalten suchen. Der Webdesigner kann die Aufmerksamkeit des Besuchers präziser lenken.

Platz für Wichtiges
Größe und Platzierung eines Elements sollten sich an seiner Wichtigkeit für die Site orientieren. Wichtig ist fast immer vieles auf einmal: dem Besucher den Zweck der Site kommunizieren, Kaufmöglichkeiten bewerben, übersichtliche Navigation, Hilfe und Kontaktmöglichkeiten anbieten, auf Neuigkeiten hinweisen. Aber die Leinwand, auf der wir arbeiten, hat enge (und ungewisse) Grenzen. Wir müssen wesentliche Ziele identifizieren und gezielt darauf hinarbeiten.

Immer noch werden aus der Angst, dass Besucher weder scrollen, noch klicken wollen, Monsterwebsites mit riesigem Kopf und mickrigem Körper geboren. Natürlich ist der erste Eindruck einer Seite oft das wichtigste Erfolgskriterium. Aber gerade deshalb muss ein guter Webdesigner harte Entscheidungen treffen. Vor allem das Weglassen ist eine hohe Kunst. Wie kann man einen Text kürzer und knackiger fassen? Welche Elemente sind besser auf Unterseiten aufgehoben? Einer guten Website merkt man an, dass alles planvoll an einem bestimmten Platz gelandet ist. Kein unnötiges Rauschen behindert die Information. Eine klare Hierarchie der Elemente ist zu erkennen. Erwartungen des Besuchers werden erfüllt.

Gesetze der Ästhetik
Erwähnen muss man sie. Darüber reden müssen wir hier allerdings kaum. Dass eine Website gut aussehen soll, versteht sich von selbst. Unter echten Bedingungen, nicht lokal auf dem Rechner oder auf dem Edeldisplay muss die Site attraktiv aussehen und den Geschmack der Zielgruppe treffen. Das ist immer schwer. Aber gute Beispiele gibt es zuhauf. Und den meisten professionellen Websites sieht man zumindest ein Bemühen an. Schließlich kann der Auftraggeber hier oft am besten erkennen, wenn etwas nicht stimmt.

Große Ziele
Verschiedene Wege haben wir rekapituliert – aber was ist das Ziel? Eine ganze Reihe von Kriterien muss erfüllt werden. Diese im Blick zu behalten, ist lebenswichtig. Nur so kann man die eigene Lage sinnvoll beurteilen. Für viele Kriterien gibt es objektive Messmethoden, die mit größerem Budget eine größere Rolle spielen sollten. Schließlich gibt es immer etwas zu verbessern.

Kosteneffizienz
Wer den eigenen Stundenlohn nicht im Blick behält, könnte ganz schnell draußen sein. Die Arbeitsgeschwindigkeit ist ein ewiger Stolperstein. Aber auch schlechte Kommunikation führt dazu, dass in sinnlose Beschäftigung investiert wird. Entwürfe werden ausgearbeitet, die niemand haben will. Webdesigner im Konkurrenzdruck versprechen dem Kunden aufwändige Gimmicks, obwohl das Budget eigentlich zu knapp ist. Kaum ein Mensch rechnet gern nach, aber gerade Selbständige müssen einen soliden Plan ihrer Finanzen haben, um zu überleben.

Nutzerfreundlichkeit
Grundsätzlich sollte eine Website leicht zu bedienen sein. Jeder, der sie benutzen möchte, sollte das ohne Probleme tun können. Groß angelegte Tests sind aber leider eine Seltenheit und so ist Kreativität und Einfühlungsvermögen gefragt, um den Kenntnisstand der Besucher und das Angebot der Site unter einen Hut zu bringen. Hier können Analyse-Tools weiterhelfen. Ist die Site erst einmal gestartet, bekommt man recht einfach Anhaltspunkte, ob die Nutzer mit der Website umgehen können.

Zielgruppenorientierung
Kaum eine Website ist wirklich für jeden gedacht. Je homogener die Gruppe der anvisierten Besucher ist, desto leichter fallen Entscheidungen. Auch hier können Analysetools helfen. Aber letztendlich führt an echtem Feedback kein Weg vorbei. Schnell verschätzt man sich, wenn man über Senioren, Studenten oder IT-Fachleute urteilt. Ganz leidig wird es beim Webdesign für junge Menschen. Viele kommen da nicht ohne Flash aus. Besser wäre oft, mit Kollegen anzuvisieren, für welche Gruppe man gestaltet und was diese Gruppe kann, erwartet und will.

Zwischen den Stühlen
Als Webdesigner befindet man sich, freundlich gesagt, in einem Spannungsfeld. Ideallösungen gibt es nicht. Also macht man zwangsläufig Fehler. So lange man es beruflich und finanziell verkraften kann, ist das eine gute Sache. Souveränität kommt nur durch Erfahrung. Immer sollten nach Milestones eines laufenden Projekts kritische Fragen gestellt werden. Was wird vernachlässigt? Auf welchem Auge ist ein Entwurf blind? Werden zentrale Konventionen missachtet? Besonders nach der Fertigstellung eines Jobs ist die kritische Nachbetrachtung überlebenswichtig. Dabei können die hier genannten Ziele als Orientierung dienen. Wer aus schlechten Erfahrungen lernt und neue Herangehensweisen entwickelt, kommt voran. ™

Erstveröffentlichung 05.07.2007

Kategorien
WordPress

Blogsoftware Teil 4 – Häufige Blogs und Präferenzen

Sieben Lösungen zum Bloggen haben wir uns genauer angeschaut. War das alles? Fast – wir sprechen ein paar Empfehlungen aus und würdigen Spezialisten, die unerwähnt geblieben sind.

Egal, ob sie selbst vorhaben, zu bloggen oder einem Kunden diese Möglichkeit verschaffen sollen: Bei den vorgestellten Lösungen sollte etwas für Sie dabei sein. Aber was? Je nachdem, welche Anforderungen im Detail gestellt werden, sind verschiedene Lösungen empfehlenswert. Einige typische Beispiele spielen wir durch.

Häufige Blogarten
Autoren eines kleinen persönlichen Blogs profitieren von einfacher und eleganter Software. Ist kein klarer kommerzieller Hintergrund und kein eingegrenztes Thema vorhanden, muss man auch nicht mit allzu großem Traffic rechnen. Wer dann noch Wert auf Flexibilität legt und schnell starten will, fährt mit WordPress sehr gut. Auch Kunden, die mit ihrem Blog nur etwas dokumentieren oder einen kleinen Mehrwert zu einer ansonsten recht statischen Site bieten wollen, finden sich dank der narrensicheren Bedienung schnell zurecht. Wer dagegen Textile mag und puren Code elegant findet, der fühlt sich oft eher bei Textpattern wohl. Vor allem, wenn nicht gerade 30 verschiedene Plugins benötigt werden, und Templates selbst entwickelt werden, ist das System empfehlenswert.

Soll ein Blog vor allem im Unternehmen eingesetzt werden, ist Movable Type eine starke Lösung. Der professionelle Support kann in brenzligen Situationen Last von den Schultern des Webdesigners nehmen. Gut, wenn man jemanden hat, den man für das Versagen der Software verantwortlich machen kann. Außerdem muss sich MT bezüglich der Nutzerfreundlichkeit gar nicht hinter WordPress verstecken. Mit dem Erscheinen einer neuen Version und der Zusicherung der entwickelnden Firma, sich wieder stärker um das Zugpferd zu kümmern, scheinen auch Zukunft und Aktualität des Systems sicher. Außerdem gibt es nach wie vor Kunden, die für das Prinzip Open Source nicht begeistert werden wollen. Hersteller Six Apart verspricht explizit, dass MT gut für interne und externe Businesskommunikation geeignet sei. Aber auch WordPress kann mit der nutzerfreundlichen Oberfläche und der offenkundig großen Popularität gut im Unternehmen aussehen. Hier sollten allerdings mögliche Probleme zu Serverlast, Kommentarspam und Sicherheitsproblemen antizipiert und präventiv behandelt werden.

Blogs, die vor allem eine Nachrichtenplattform darstellen, müssen Wert auf gute Performance, Sicherheit, die reibungslose Arbeit mit mehreren Nutzern und unter Umständen sogar mehreren Einzelblogs legen. Da bietet sich zum Beispiel Serendipity an. Dass Serendipity noch nicht so stark wie WordPress oder Movable Type ins Visier der Kommentarspammer geraten ist, kann viele Probleme lösen, bevor sie überhaupt auftreten. Außerdem bietet das System eine sehr gute Unterstützung für die Arbeit mit Grafiken, erlaubt die Arbeit mit mehreren Nutzern, ist leicht zu erweitern und erlaubt auch mehrere Blogs in derselben Installation. Das Konkurrenzprodukt WordPress MU könnte hier auch punkten, ist aber momentan noch nicht allzu lang erhältlich. Bevor es zum professionellen Einsatz kommt, sollte man dem System vielleicht noch etwas Zeit geben, sich auf dem Markt zu beweisen.

Wer weiter gehen muss, als einfach ’nur‘ ein paar Blogs zu hosten und eine echte Community aufbauen will, könnte es gleich professionell tun und Drupal einsetzen. Eine Vielzahl von Websites mit starkem Community-Aspekt sprechen eine deutliche Sprache. Außerdem ist das System für Profis schnell auch an exotische Bedürfnisse angepasst. Besuchern etwa die Möglichkeit zu geben, sich anzumelden und ein eigenes Blog zu unterhalten, in dem spezifische Dinge erlaubt und verboten sind, ist hier gar kein Problem. Somit bietet sich Drzpal auch für komplexe Websites an, bei denen Blogs ein integraler Bestandteil sind – aber eben auch nicht alles.

Präferenzen
Wer bereits Typo3 einsetzt, um etwa die eigene Website zu managen oder Mitarbeiter eines Unternehmens in die Nutzung eingewiesen hat, der kann eigentlich auch dabei bleiben. So wird der Wartungsaufwand reduziert und doppelte Einarbeitung verhindert. Wer allerdings mit Joomla arbeitet, sollte genau überlegen, was geplant ist, und was in Zukunft nötig werden könnte. Grundsätzlich kann man mit dem CMS bloggen. Aber so manche Funktion, die etwa für WordPress ganz selbstverständlich ist, kommt bisher nur über Hacks und Mehrarbeit ins System. Wer mit spezieller Blogsoftware, ob WordPress, ob Textpattern oder Serendipity arbeitet, wird nur selten einen guten Grund finden, umzusteigen. Nur spezielle Anforderungen rechtfertigen für Profis den Einsatz mehrerer Produkte. Oft überwiegt die Zeitersparnis, wenn Expertise und Wartungsaufwand nicht unter vielen Prtodukten aufgeteilt werden müssen. Besonders Durpal fällt hier als Allrounder ins Auge, der flexibel auf verschiedene Anforderungen eingehen kann.

Oft liegt der Schwerpunkt aber auch gar nicht beim Text. Mancher Fotoblogger schwört wegen der komfortablen Medienverwaltung auf Serendipity. Als Fall am Rande sei hier auch Loudblog erwähnt, das kaum als komplette Blogsoftware durchgeht, aber dafür genau auf die Bedürfnisse von Podcast-Betreibern zugeschnitten ist. Wer mit mehreren Sprachen arbeitet und auch über mehrere Blogs auf einer Installation nachdenkt, der landet oft bei b2evolution, dass an Popularität eingebüßt hat, aber immer noch vom Start weg flexibler ist, als viele Konkurrenzprodukte.

Wer ohne Erweiterbarkeit nicht leben kann, und möglichst schnell und einfach die Twitterbox, den neusten Medienfeed und überhaupt jedes Cutting Edge-Feature braucht, der greift immer noch am besten zu WordPress. Die Macht der Masse arbeitet hier für die Software wie nirgendwo sonst. Das gilt für Templates, Plugins, Support ebenso wie (leider) für Kommentarspam.

Geholfen?
Hoffentlich konnten wir ein wenig Licht ins Dickicht der Blogsoftware bringen. Sicher ist so mancher persönliche Favorit in der Artikelreihe unerwähnt geblieben. Auch unbekanntere Blogsoftware hat ihre Fans. Mancher hat sein ganz anders gelagertes Lieblings-CMS erfolgreich zur Blogplattform umgebaut. Aber die großen haben wir genannt, und wir haben Ihnen hoffentlich eine Idee davon gegeben, was wofür empfehlenwert ist. So bleibt uns nur noch der Hinweis: Bevor Sie sich für eine Softwarelösung entscheiden, sollte neben dem Test des Systems ein genauer Vergleich stehen, ob die benötigten Funktionen alle vorhanden sind. ™

Erstveröffentlichung 19.04.2007

Kategorien
Webdesign

Usability Tipps: Design für junge Leute und die erste Seite

Einer der attraktivsten Märkte für Website-Betreiber sind Teenager. Über die und ihr Surfverhalten gibt es natürlich auch einige Studien. Was bei denen aber herauskommt, entspricht oft nicht den gängigen Klischees. Bereits 2005 hatte Jakob Nielsen eine Studie zusammengefasst:

Teenager surfen nicht so versiert wie vergleichbare Erwachsene, sind schnell gelangweilt, und lesen ungern. Websites, die auf Teenager zugeschnitten sind, müssen einfach funktionieren und interaktive Features bringen. Viel weniger Gewicht fällt nach Nielsen auf vermeintliche Klassiker wie ‚coole Grafiken‘.

Was wollen Teenager also? Was ist erfolgreich? Die kürzeste Antwort lautet einer neuen Studie zufolge: Facebook. Der enge Verwandte des StudiVZ hat in einer Umfrage bei den 17- bis 25-jährigen auch Myspace deutlich geschlagen. Liegt es am besser aufgeräumten Layout? Weiter hoch im Kurs: YouTube, dann kommen vor allem Suchmaschinen und Infoportale.

Am Ende fällt die Antwort also gar nicht so mystisch aus: Junge Leute wollen einfache Seiten, die gut funktionieren, und bei denen sie sich selbst einbringen können. (jb)

Die erste Seite
Im Verlagsgeschäft eine Binsenweisheit: Neben dem Umschlagdesign braucht ein Buch einen guten Klappentext und einen packenden Start, wenn es sich Chancen auf Erfolg ausrechnen will. Entsprechende Bedeutung sollte der ersten Seite eines Webauftrittes zukommen, wenn Besucher gleich gefesselt und auf der Website gehalten werden sollen.

Wie geht das? Ein paar einfach Kriterien:

  1. Zur Sache kommen: Sofort muss klar sein, worum es geht. Entweder, die Seite bedient sich einer einfachen Metapher (etwa eine Nachrichtenseite oder ein eShop), oder an gut sichtbarer Stelle findet sich ein knapper, eindeutiger Infotext. Kommerzielle Seiten, die erst nach Scrollen oder einem Klick ihren Zweck preisgeben, schießen sich in den Fuß.
  2. Vorsicht vor Überfrachtung! Jedes Element auf der Startseite tritt in Konkurrenz um die Aufmerksamkeit des Lesers. Je besser Sie Ihre Startseite aufräumen können, desto besser können Sie gezielt beeinflussen, wie Besucher Ihre Seite sehen.
  3. Investieren Sie: Text und Design der Startseite sollten zu dem besten gehören, was Sie bieten können. „Willkommen auf meiner Homepage,…“ – das liest man an jeder Straßenecke des Webs. Haben Sie nicht mehr zu bieten?
  4. Neugierig machen: Haben Sie Ihrer Zielgruppe klar gemacht, dass hier viel Nutzen auf sie wartet? Versprechen Sie etwas.

Natürlich funktioniert all das nur, wenn Sie auch interessanten Inhalt zu bieten haben, den andere Menschen nutzen wollen. Klingt einleuchtend, oder? Aber warum halten sich dann so viele Sites da draußen nicht dran? (jb)

Ein ausführlicher Gedankengang von Vin Crosbie beschäftigt sich mit der Zukunft des elektronischen Publizierens. Was soll aus Zeitschriften und Tageszeitungen werden? Die Lösung liegt in geschickter Personalisierung meint Crosbie. Elektronisches Papier, das heißt gescannte PDF-Ausgaben, wie wir sie hier zu Lande fast wöchentlich neu sehen, könnten sich als Sackgasse herausstellen.

Kategorien
CMS Programmierung

Blogsoftware Teil 3 – Allrounder: Bloggen mit dem CMS

Wollen Sie wirklich nichts als bloggen? Wer vor allem eine komplexe Website aufbaut, braucht mehr, als nur Blogsoftware – und profitiert davon, wenn er mit dem ausgewachsenen CMS auch bloggen kann. Wir untersuchen Kandidaten, mit denen genau das möglich ist.

Drei der ganz Großen wollen wir ins Visier nehmen: Drupal, Typo3 und Joomla. Alle drei Systeme sind weit verbreitet. Vielleicht arbeiten Sie bereits mit einem dieser Programme? Dann lohnt sich ein Blick, ob die aktuelle Lösung für das anstehende Blog nicht ausreicht. Schließlich multipliziert man den Lernaufwand, die Wartungszeiten und unter Umständen auch die Serverlast, indem für jede Aufgabe ein eigenes Programm eingesetzt wird.

Drupal
Schon seit 2001 ist Drupal als ein OpenSource-CMS auf dem Markt, das erfolgreich Schwerpunkte setzen konnte. Während die grundlegende Installation nicht einmal WYSIWYG-Bearbeitung liefert, startet das System mit einer Vielzahl starker Erweiterungen, mächtiger Nutzerverwaltung und aktiver Weiterentwicklung durch. Eine Vielzahl von Websites, die auf Drupal basieren, unterstreichen die Vielseitigkeit des Systems. Natürlich kann Drupal auch bloggen  und speziell die Verwaltung mehrerer Blogs auf einer Installation wird oft als besondere Stärke angeführt.

ScreenshotWeder die Konfiguration noch die Verwaltung von Drupal sind besonders einsteigerfreundlich. Vorausgesetzt werden Apache (ab 1.3) oder IIS (ab 5), PHP (ab 4.3.3) und nach Möglichkeit MySQL (ab 4.1), zur Not auch PostgreSQL (ab 7.3). Ist das System einmal nach Kundenwünschen eingerichtet, können auch Laien damit komfortabel bloggen. Und mit der vor kurzem erschienenen Version 5 wird die rosige Perspektive des Systems einmal mehr unterstrichen. Mit dem Update geht allerdings auch ein Bruch mit Vorgängerversionen einher. Das ist gewollt, Drupal empfiehlt sich selbst nur Nutzern, die große Updates alle paar Monate in Kauf nehmen wollen. So will man auf dem neusten Stand der Technik bleiben. Klar, dass so manches nützliche Plugin noch nicht für Version 5 erschienen ist. Profis werden sich, nicht zuletzt dank der starken Community trotzdem gut zurechtfinden und können vor allem beim Aufbau von Websites mit starkem Social-Networking-Charakter glücklich werden.

Typo3
Eines der größten Schwergewichte im Web muss hier wohl kaum noch vorgestellt werden: Typo3 ist für viele Profis und Webdesignagenturen der Standard, um anspruchsvolle Websites zu entwickeln. ScreenshotAuf Dr. Web ist das System in mehreren Artikeln bereits vorgestellt worden. Auf den ersten Blick sind die Systemvoraussetzungen hier auch nicht viel höher als anderswo. Aber neben Apache oder IIS, PHP (ab 4) und MySQL (oder eine von mehreren alternativen Datenbanken) sind die Anforderungen an den Server recht hoch. Ein halbwegs schneller Prozessor und genug Arbeitsspeicher sind wichtig. Und ohne eine ganze Liste von Software auf dem Server (etwa zlib, GraphicsMagick) spielt Typo viele Stärken gar nicht erst aus. Für Anfänger ist das Interface ein wahr gewordener Alptraum. Ohne Betreuung und Einarbeitung durch Profis sollte kein Laie auf das System losgelassen werden. Aber auf die Idee, Typo extra zum Bloggen einzusetzen, würde ohnehin kaum jemand kommen.

Ist dagegen schon eine professionelle Website mit Typo eingerichtet, dann macht die zusätzliche Einrichtung eines Blogs in derselben Installation wenig Mühe. Besonders die Extension TIMTAB bietet in Kooperation mit zusätzlichen Erweiterungen inzwischen die volle Bandbreite an Blogfeatures. Die vielen technischen Klippen lassen sich nicht nur mit Hilfe der lebendigen Nutzergemeinschaft überbrücken, die besonders auch in Deutschland stark ist. Zu Typo3 gibt es auch eine Vielzahl guter Dokumentationen in Buchform. Besonders komfortabel oder einfach in der Handhabung wird Typo auch als Blog nicht. Aber es funktioniert.

Joomla
Ein Shootingstar unter den freien CMS ist Joomla. Auch, wenn unter der optisch einladenden Haube so manches nicht gerade intuitiv funktioniert, greifen auch Anfänger zu dem System. Mit Hilfe der regen Community kommt man aber durchaus ohne große Fachkenntnisse ans Ziel. Auf jeden Fall ist die Handhabung leichter, als bei Drupal oder bei Typo3. Die Installation klappt, PHP (ab 4.2), MySQL (ab 3.23) und einen Apache-Server (ab 1.13.19) vorausgesetzt, schnell und einfach. Die geforderte XML-Unterstützung und zlib-Bibliothek dürften in aller Regel kein Problem darstellen.

Screenshot

Längere Zeit gab es kaum eine sinnvolle Möglichkeit, mit Joomla zu bloggen. Rudimentär klappt das zwar vom Start weg, wer aber Wert auf zeitgemäße Funktionen, also Kommentare mit variablem Spamschutz, Tags, Trackbacks und so weiter legt, der war lange auf umständliche Lösungen angewiesen – etwa ein Plugin, dass eine komplette WordPress-Installation in Joomla einbindet. Inzwischen sind mit dem frei erhältlichen Mamblog und dem kostenpflichtigen My Blog (45 US$) zwei Plugins erhältlich, die Joomla in wenigen Klicks zur ordentlichen Bloglösung machen. Einige wesentliche Features fehlen noch, aber der schnelle Entwicklungsfortschritt lässt auf Besserung hoffen. Das kostenlose Mamblog muss dagegen noch nachsitzen, bis alle wichtigen Funktionen vorhanden und leicht nutzbar sind. Da das letzte Update über 100 Tage her ist, kann diese Lösung nicht guten Gewissens empfohlen werden. Bloggen mit Joomla ist damit Profis nur mit einer kleinen Zusatzinvestition zu empfehlen, funktioniert dann aber. Und nach einer kurzen Einweisung können es auch Anfänger.

Ein bisschen schlauer
Nun haben wir insgesamt sieben Kandidaten vorgestellt. Auch die drei neuen lassen sich auf OpenSource CMS testen. Zwar zeichnet sich bereits ab, welches System für welchen Nutzer zu empfehlen ist, aber wir wollen das genauer untersuchen – im vierten und letzten Teil unseres Artikels. Dort würdigen wir auch ein paar Systeme, die es nicht in den großen Überblick geschafft haben. ™

Erstveröffentlichung 13.04.2007

Kategorien
CMS Programmierung

Blogsoftware Teil 1 – Der Überblick

Sie planen ein Weblog. Vielleicht wollen Sie ihre Arbeit dokumentieren, oder mit Kollegen netzwerken. Welches Content Management System kommt in Frage? Hunderte. Aber welches ist am sinnvollsten? Wir riskieren einen Blick.

Sich für ein CMS zu entscheiden, kann lange dauern. Viele Datenbanken, Infoseiten, Überblickstabellen zum Thema kann man in Minuten finden. So viele, dass man den Überblick verliert. Wer nicht klare Vorbedingungen formuliert, ein festes Ziel vor Augen hat und damit leben kann, Einiges zu übersehen, der wird Wochen und Monate nur mit Suchen verbringen. Dieser mehrteilige Artikel ist der Beginn einer Reihe, in der für spezifische Aufgaben geeignete CMS gefunden werden sollen. Natürlich nicht mit Anspruch auf Vollständigkeit – lieber eine gute Auswahl, als ein endloser Waschzettel.

Das Ziel: Bloggen
Blogs sind schon lange kein festgelegtes Format mehr. Zwischen dem Moblog eines Teenagers, der kommentarlos Partyfotos veröffentlicht, und einem professionell betriebenen Testblog, an dem mehrere Autoren arbeiten, kann man kaum noch Gemeinsamkeiten finden. Ebenso sind die Bedürfnisse äußerst verschieden. Also müssen Kriterien her, um überhaupt zu einer brauchbaren Kandidatenliste zu kommen. Was spielt bei der Entscheidung für Blogsoftware eine Rolle?

  • Nutzerfreundlichkeit: Einfache Bedienbarkeit ist eine Tugend – aber zu welchem Preis bekommt man die? Selten gehen ein mächtiges, schnell bedienbares System mit vielen Funktionen und intuitiver Nutzerführung Hand in Hand.
  • Ausstattung: Sind Grafiken ein Schwerpunkt, kommt ein Podcast dazu? Müssen Zusatzinhalte in die Sidebar eingebaut werden? Schreibt ein Autor an dem Weblog, oder soll eine Gruppe daran arbeiten? Oder sollen gleich mehrere Blogs unter einem Dach leben? Was muss und was kann bei einem Projekt, das muss sorgfältig überlegt werden, bevor eine Auswahl möglich ist.
  • Wartung: Installiert in fünf Minuten! Das hilft wenig, wenn alle zwei Wochen ein Sicherheitsupdate fällig wird und jedes zweite davon die zugrunde liegende Datenbank zerstört. Können unerfahrene Nutzer im Backend Schäden anrichten? Lassen sich die reparieren? Oder bricht ohnehin alles zusammen, wenn fünfstellige Besucherzahlen erreicht werden? Informationen über den Zeitaufwand der technischen Betreuung sind ebenso schwer zu erhalten wie notwendig.
  • Sicherheit: Natürlich muss jedes System sicher sein. Aber je nach Zielgruppe schwankt die Priorität dieses Faktors. Wird mit dem Weblog Geld verdient? Welchen Schaden können Imageschäden anrichten? Wird das Blog einer Webdesignagentur gehackt, schütteln potenzielle Kunden entsetzt den Kopf. Vor allem stark verbreitete Systeme rücken immer wieder ins Visier von Angriffen.
  • Preis: Viele gute Systeme gibt es gratis. Guten Support oft nicht. Und wenn das Gratissystem nicht performant läuft, dann könnten Serverkosten den Preisvorteil auffrssen.
  • Systemvoraussetzungen: Glücklich ist, wer Server und Service Provider frei wählen kann. Viele können es nicht und sollten deswegen vorher genau schauen, welches Betriebsystem, welche Programme und welche Rahmenbedingungen sich die Blogsoftware wünscht.
  • Community: Nicht nur als nie versiegende Quelle kostenlosen Supports ist eine große Community wünschenswert. Mit vielen Nutzern kommen oft auch mehr Plugins und bessere Designvorlagen; für viele Projekte ein wichtiger Faktor.

Diese Punkte wollen wir berücksichtigen, um Ihnen die Entscheidung für einen der Kandidaten zu erleichtern. Manches davon ist keine Geschmacksache, sondern lebensnotwendig. Dazu gehören:

  • Aktive Entwicklung: Auch, wenn ein CMS noch aktuell wirkt, bleibt es das nie lang. Ist die Entwicklung eingestellt, oder schläft sie seit langem, dann ist das System nicht mehr zukunftssicher.
  • Erweiterbarkeit: Nichts ist ärgerlicher, als mit einer einfachen Anforderung im laufenden Betrieb vor die Wand zu fahren. Zusätzliche Funktionen sollten über Plugins, oder zumindest schnelle Workarounds einsetzbar sein.
  • Bekanntheit: Zu bekannt zu sein, kann auch schaden. Spätestens, wenn die Spambots zuschlagen oder wenn ein Exploit Stunden nach seiner Veröffentlichung auf das eigene Weblog angewendet wird, wird das jedem klar. Aber allzu unbekannte Systeme sollen hier nicht vorgestellt werden. Es muss sich schon einen Namen gemacht haben und sollte auch nicht in einer frühen Betaversion vorliegen.

Im zweiten Teil untersuchen wir die Spezialisten: Blogsoftware, die zum Bloggen und für nichts anderes gedacht ist. ™

Erstveröffentlichung 04.04.2007

Kategorien
CMS Programmierung WordPress

Blogsoftware Teil 2 – Die Spezialisten

Ein Blog ist doch eigentlich auch nur eine Website. Die Ränder des Formats sind unscharf, die Gemeinsamkeiten zwischen Blogs oft winzig. Aber so manches CMS hat sich einen Namen damit gemacht, Bloggern genau das zu geben, was sie brauchen. Wir untersuchen vier davon.

Um nicht an der Oberfläche bleiben zu müssen, beschränke ich mich auf wenige Kandidaten: WordPress, Movable Type, Textpattern und Serendipity. Alle sind sehr bekannt. Das ist auch gut so, denn Ruhm und eine starke Community gehen oft Hand in Hand. Auch, was Templates und Plugins betrifft, sowie eine sichere Perspektive bei der Weiterentwicklung, ist ein bekannter Name ein dickes Plus.

WordPress
Populärer geht es nicht: WordPress ist längst für viele Nutzer die selbstverständliche Wahl, wenn ein Blog gestartet werden soll – die Konkurrenz wird oft einfach ignoriert. Auf den ersten Blick überrascht das nicht. Die Installation auf dem Webserver funktioniert, PHP (ab 4.2) und MySQL (ab 4.0) vorausgesetzt, wirklich in wenigen Minuten. Die Administrationsoberfläche könnte effektiver gestaltet sein, hat sich aber im Vergleich zu älteren Versionen schon deutlich gesteigert. Die Menüführung ist einfach, auch technische Laien sollten sich zurechtfinden. Nicht nur zahlreiche Features sind vom Start weg vorhanden, bei einigen ist WordPress einsame Spitze. Die Zahl der Templates und Plugins etwa ist riesig, die Community leicht zu finden. Und während verschiedene Nutzer für ein Weblog eingerichtet werden können, muss man für verschiedene Blogs auf der Basis nur einer Installation zum kürzlich erschienen WordPress MU greifen.

Screenshot

Aber nicht alles ist prima. Die Menüführung bekommen andere Systeme noch eleganter hin. Auch hat WordPress nicht vom Start weg alle Funktionen, die man sich wünschen könnte. Zwar ist ein Spamschutz zuschaltbar, aber dank seiner hohen Popularität werden bekannte Blogs regelrecht von Kommentarspam überfallen. Da muss mit Plugins nachgelegt werden. Und ist das Weblog so richtig populär, zeigt sich WordPress nicht effektiv. Performanceprobleme sind leider keine Seltenheit. Schließlich mussten sich Nutzer in den letzten Monaten über viele Sicherheitsupdates ärgern, die den Wartungsaufwand deutlich erhöhten.

Der Texteditor bietet an Textverarbeitungen orientierte Schaltflächen zur Formatierung. Das funktioniert besonders unter Firefox gut, mit anderen Browsern gibt es teilweise Kopfschmerzen. In einigen wenigen Betriebsystem-/Browser-Szenarien muss man Plugins nachlegen, damit alles rund läuft. Und wer genau wissen will, was wie formatiert wurde, der muss öfter in den HTML-Modus wechseln. Natürlich schaffen manche Plugins Abhilfe, indem sie etwa die einfache Markupsprache Textile unterstützen. Auch, dass Plugins und Themes (Vorlagen) nicht vom Start weg im Backend installiert werden können, ist ein kleiner Patzer. Andere Systeme machen es dem Nutzer leichter. Rudimentär ist die Bilderverwaltung geraten.

So ist WordPress für manchen Nutzer am Ende ein Patchworkteppich, der alles abdecken kann, was man nur will – wenn auch nicht immer elegant. Eine große Nutzergemeinde schwört allerdings weiterhin auf das System.

Movable Type
Der einzige Kandidat in der Liste, der nicht als Open Source-Projekt entwickelt wird: Movable Type hat eine lange Geschichte, war vor einigen Jahren noch der Standard für Weblogs, und ist nicht zuletzt wegen der schleppend langsamen Weiterentwicklung ins Hintertreffen geraten. Immer noch brüstet sich Hersteller Six Apart damit, die Software für die erfolgreichsten und populärsten Blogs der Welt zu liefern. Im Januar ist eine neue Version erschienen und der Firmenchef verspricht eine rege Weiterentwicklung. Viele frustrierte Nutzer antworten mit Kritik und Häme. Nichtsdestotrotz ist Movable Type heute ein System, dass unsere Kriterienliste gut erfüllt. Ob die Möglichkeit, für Geld mehr Features und professionellen Support zu erhalten ein Vor- oder Nachteil ist, bleibt wohl Geschmacksache. Mehrere User und mehrere Blogs auf einer Installation sind inzwischen unterstützt. Die Grundversion des Programms ist frei erhältlich.

Screenshot

Die Wartung von Movable Type können heutzutage auch Laien bewältigen. Das war nicht immer so. Zwar ist die Installation an sich ein Kinderspiel, aber unter Umständen müssen Perl-Module auf dem Server nachinstalliert werden. Weitere Systemanforderungen sind eigentlich Standard: Apache oder Windows IIS werden als Umgebung empfohlen. Perl (ab 5.6.1) wird vorausgesetzt, verschiedene Datenbanken werden unterstützt (etwa MySQL ab Version 4). Ist das verifiziert, geht allerdings die Sonne auf. Das Nutzerinterface sieht klar strukturiert und einladend aus, mit minimalen Klicks und guter Orientierung kommt man schnell ans Ziel. Auch hier kann man den Komfort bei der Verwaltung der Vorlagen, oder beim Verfassen von Artikeln (z.B. für vernünftige WYSIWYG-Bearbeitung) deutlich mit Plugins steigern. Vorlagen gibt es in rauen Mengen, in sehr guter Qualität, und nur eine Websuche entfernt. Skeptiker ohne Perl auf dem Server testen zuerst Typepad, den fertig gehosteten Ableger.

Textpattern
Auf den ersten Blick ein Volltreffer für Puristen: Ein CMS; das ‚Text‘ schon im Namen führt, und wie kein anderes Interface auf eine nüchterne Nutzeroberfläche mit ganz viel Whitespace und einer klaren Designmetapher setzt. So weit, so gut. Textpattern ist auch durchaus leicht zu installieren (PHP ab 4.3, MySQL ab 3.23) und leicht zu bedienen – aber nur, wenn man keine Angst vor reinem Text hat. Neben HTML versteht Textpattern noch die elegante Markupsprache Textile, ein WYSIWYG-Editor ist hier aber ebenso Fehlanzeige wie manch nützliches Feature bei der Konkurrenz. Alles wirkt reduziert. Immerhin lassen sich Plugins ganz einfach aus dem Backend installieren. Aber zur Anpassung an die eigenen Bedürfnisse muss man als Nutzer vieles in große, übersichtliche Codefelder kopieren oder eintragen. Viele der exzellenten Templates für Textpattern zeigen, was hier alles möglich ist. Wer sich aber gar nicht erst mit Code befassen will, lässt besser die Finger hiervon.

Screenshot

Im Vergleich zur Konkurrenz ist hier alles eher klein geraten: Die Community ebenso, wie die Menge an Plugins. Wichtige Features sind aber alle da; mehrere Autoren, und Dateiuploads werden unterstützt, mehrere Blogs mit einer Installation sind dagegen nicht ohne Weiteres möglich. Wer aber gern alles unter Kontrolle hat, Übersicht und reinen Text schätzt, der kann hier beruhigt zugreifen.

Serendipity
Die Voraussetzungen für das immer beliebtere Serendipity sind etwas zahlreicher als bei den anderen: Nicht nur PHP und MySQL werden verlangt, auch Apache ist ein Muss, und ein paar weitere Empfehlungen werden auf der rudimentär gestalteten s9y-Website formuliert. Die Dokumentation ist knapp gehalten und die Nutzergemeinde ist nicht gerade riesig, aber es gibt sie, sie spricht deutsch und hilft gern weiter. Zudem bietet der (deutsche) Chefentwickler kommerziellen Support an. Gerade viele Anfänger schwören auf den schnellen und einfachen Start (Installation noch einfacher als in WordPress). Vom Start weg gibt es nur sehr rudimentäre Möglichkeiten der Textbearbeitung, die aber für viele Zwecke ausreichen und dann intuitiv funktionieren. Von der komfortablen Bildverwaltung könnten sich andere Systeme eine Scheibe abschneiden. Mehrere User können mit zugewiesenen Rechten an einem Blog schreiben. Aber Multiblogging ist auch hier Fehlanzeige.

Screenshot

Plugins sind in guter Zahl mitgeliefert und brauchen nur aktiviert zu werden, das sogenannte „Spartacus“-Plugin vorausgesetzt kann sogar die offizielle Datenbank aus dem Backend heraus durchsucht werden. Designvorlagen gibt es, aber die Zahl kann nicht mit der Konkurrenz mithalten. Wer mit etwas Geduld sucht, findet allerdings Hochwertiges.

Pausengong
Bis auf Movable Type können alle Systeme bei OpenSourceCMS getestet werden. Und ein Test vor der Entscheidung ist für jeden Profi ein Muss. Bevor wir aber ein Fazit ziehen wollen, nehmen wir im kommenden Teil des Artikels Allrounder unter die Lupe: Ausgewachsene Content Management Systeme, für die Bloggen nur einen Teil des Funktionsumfangs darstellt. ™

Erstveröffentlichung 04.04.2007

Kategorien
Webdesign

Schön dank Schrift

Sie wissen, welche Schrifttypen sicher für das Web sind, achten auf gute Lesbarkeit und arbeiten nur in Ausnahmefällen mit Text als Grafik. Davon mag Ihre Website gut funktionieren, besser aussehen wird sie deswegen aber noch lange nicht. White Space allein macht nicht schön. Aber was macht schön?

Auch, wenn sich kaum jemand daran hält: An jeder Straßenecke des Webs kann man nachlesen, wie man Schrift für eine Website richtig verwendet: Relative Schriftgrößen, zentrale Definition per CSS, Angabe von Alternativfonts, starker Kontrast, Verzicht auf kräftige Farben bei Text und Hintergrund. Solche Listen kann fast jeder Webdesigner herunterbeten. Dass viele sie ignorieren, ist trotzdem verständlich. Schließlich soll eine Website am Ende nicht nur funktionieren, sondern auch gut aussehen. So manche typographische Idee lässt sich nicht umsetzen, wenn Sie weitgehend auf Flash verzichten und Schrift nicht zur Grafik machen wollen. Zum Glück gibt es genug Gegenbeispiele: Websites, die ebenso barrierenarm und standardkonform wie schick sind. Riskieren wir einen kritischen Blick:

Mit Lorbeerkranz: A List Apart
Man darf das durchaus berühmte eZine über Webdesign als bekannt voraussetzen. Wer die Site noch nicht kennt und englisch versteht, sollte hier unbedingt öfter vorbeischauen. Die aktuelle, vierte Designversion besitzt ein „klassisches, fast gelehrtes Feeling“, wie es Chefredakteur Jeffrey Zeldman in einem aufschlussreichen Artikel ausdrückt. Tatsächlich scheinen die Anleihen an seriöse Zeitungen im dezenten Farbschema, dem etwas ironischen Lorbeerkranz im Hintergrund des Logos und dem mehrspaltigen Layout sofort durch. Aber wie wird Schrift hier eingesetzt?

Screenshot

Mit Verdana und Georgia beschränkt sich die Site auf zwei Standards im Webdesign. Verdana allein ist natürlich lange kein Hingucker mehr, bietet aber am Bildschirm eine hervorragende Lesbarkeit. Darauf liegt hier offenbar ein Fokus: Beim eigentlich wichtigen Inhalt werden uns keine extravaganten Designideen vorgesetzt. Per Line-Height und über eine gute Spaltenbreite für Artikel ist der Inhalt für Lesbarkeit gut optimiert. Raffiniert wird es, wenn Verdana in Versalien (Großbuchstaben), verzahnt mit Elementen in Georgia zusammen verwendet wird: Die Laufweite ist erhöht, und kurze Hinweise lassen sich so nicht nur prima lesen, sie sehen auch ausgesprochen elegant aus – zu sehen bei den Datumsangaben oben auf jeder Seite ebenso wie bei den Autornamen. Die Unterseiten für Artikel werden direkt unter der Überschrift noch von einem eingeschobenen Balken verziert, der dezent farblich markiert ist und sehr kleine Georgia und Verdanaschrift kombiniert. Das ist gut sichtbar, aber nicht zu auffällig für eine Kategoriezuordnung und eine Einladung zur Diskussion.

Screenshot

Verdana wird auch für die unauffällig platzierte Unternavigation verwendet. Auf der rechten Seite stehen Überschriften in Georgia, der Text in wechselnden Größen in Verdana. Georgia sieht nicht nur für Überschriften gut aus, sie kommt auch bei der Hauptnavigation oben auf der Seite zum Einsatz. Versalien und der eingefärbte Hintergrund sorgen dabei für eine klare Trennung vom Inhalt, ohne die Aufmerksamkeit des Lesers unnötig auf sich zu ziehen. Das Prinzip der Schriftenkombination wird übrigens auch in der Plakette fortgesetzt, welche die Nummer der aktuellen Ausgabe verkündet.

A List Apart kombiniert einfache Elemente auf raffinierte Weise. Während die Site auf den ersten Blick eher schlicht, wenn auch elegant daherkommt, ist sie auf den zweiten aufwendig komponiert.

Trocken: I/O
Einfacher kann gutes Design kaum daherkommen: Das I/O-Magazin beschränkt sich komplett auf Helvetica. Überschriften kommen fett in Versalien daher. Links und die Markierung der aktuellen Rubrik stehen in einem frischen hellblau, das fast schon zu hell für gute Lesbarkeit ist. Die konsequent kleingeschriebenen Rubriken bilden einen starken Kontrast zum fetten Logo. Der Schrägstrich wird hier als wichtiges Trennzeichen eingesetzt. Und das war es schon fast. Minimalismus, große Freiflächen und große Bilder, die spärlich eingesetzt werden – das funktioniert hier sehr gut. Die eher kleine Schrift und hohe Zeilenabstände verstärken nicht nur die Übersicht, sie wirken auch stimmig und stellen eine gute Übersetzung des Printdesigns dar.

Screenshot

Dass diese Site so gut funktioniert, liegt auch an der inhaltlichen Reduktion. Allzu viel Inhalt ließe sich hier nicht unterbringen, ohne dass aus dem kühlen Schick eine Textwüste würde. So lange aber alles mit der kleinen Navigation auf der linken Seite abgedeckt werden kann, ist das hier eine Blaupause für elegante Websites, die alle Nutzererwartungen erfüllen.

Prächtig: Church of the Incarnation
Auch Nichtchristen wie ich sind von der Website der Church of the Incarnation beeindruckt: Die außer Kontrolle geratene Größe des Titelbildes mag für Besucher mit Modem schmerzhaft sein, der Rest aber stimmt: Georgia und ein bisschen Multimediagewürz werden gekonnt eingesetzt, um einen Look zu erzeugen, der gleichzeitig prächtig, ornamental und sehr gut nutzbar daherkommt. Auch ältere Besucher können nicht an dem als ‚Überschrift‘ platzierten Logo vorbeischauen. Die großen Links zur Navigation darunter werden durch den Ornamentbalken als Unterstrich und die Kreuze als Trennzeichen deutlich aufgelockert. Und mit Georgia hat man dafür eine Schrift gefunden, die auch groß gut aussieht.

Screenshot

Leider wird hier bei Zwischenüberschriften, genau so wie in der Willkommensnachricht, mit Flashtext nachgeholfen; immerhin in einer barrierenarmen Variante. Auf den Unterseiten fallen die angenehm gewählten Breiten des Zweispaltenlayouts auf. Es scheint am goldenen Schnitt orientiert und rückt den Text angenehm in Szene. Bis auf einige Sünden bei der Wahl der Linkfarbe (hellgrün auf Créme hat zu wenig Kontrast) und die im Fließtext zu kleine Schriftgröße lädt hier alles zum Lesen ein. Insgesamt macht die Seite vor, wie Georgia und ein paar Grafiken einem im besten Sinne des Wortes altmodischen Design auf die Sprünge helfen. Auf einigen Unterseiten wird mit inkonsequenter Mischung von Flash- und Verdanaüberschriften, und plötzlichem Einsatz von Lucida Grande unnötig Unruhe ins Design gebracht. Das ist schade. Aber besonders die Homepage ist eine gute Anregung, wie Startseiten mit Text ansprechend gestaltet werden können.

Screenshot

Deutlich: Pickdee
Wann wurden Sie das letzte Mal so richtig angeschrien? Pickdee greift in die vollen und erschlägt den Besucher geradezu mit Riesenlettern, die Laufweite ist auf ein Minimum reduziert. Das ist erstens eindeutig, zweitens erinnert es an Boulevardzeitungen, was mit dem vorhandenen Sportkontext gut einher gehen dürfte. Die Seite erzeugt nur mit einer handvoll Schriftgrößen, Fettdruck und sattem Grün eine Optik, die funktioniert und im Gedächtnis bleibt. Dass all das mit Helvetica umgesetzt wurde, beeindruckt um so mehr. Deutlicher kann ein Design nicht zeigen, was mit einem Minimum an Schriften möglich ist. Großer Slogan, riesiges Logo, darunter große Navigation und prominent platziert eine Erklärung, was die Site soll. Das funktioniert und überzeugt.

Screenshot

Allerdings demonstriert Pickdee auch, wie man übers Ziel hinaus schießen kann. Auch beim Fließtext ist die Laufweite sehr klein. Das Resultat schmerzt beim Lesen in den Augen. Und so wichtige Links wie der Login und der Hilfebereich wurden allzu unauffällig in die rechte obere Ecke gepresst. Trotzdem: Ein beeindruckendes Plädoyer für große Schrift.

Und?
Was zeigt das alles? Nicht etwa, dass Georgia öfter verwendet werden sollte (das passiert ohnehin). Diese Beispiele sollen Ihnen vor allem Appetit machen, sich genauer umzuschauen: Jede attraktive Website kann Lektionen in gutem Design bieten. Stellt man dann fest, dass große Teile der Optik ohne Grafiken umgesetzt wurden, wird es spannend. Allen vorgestellten Sites ist gemein, dass sie mit einfachen CSS-Anweisungen eine stimmige Optik erzeugt haben, die gar nicht nach Standardschrift und 08/15-Design aussieht. Und sie alle haben sich an einfach zu formulierende Grundregeln gehalten, nach denen das Design halbwegs konsequent umgesetzt wurde – auch, wenn dafür im Detail oft komplexere Entscheidungen fällig werden.

Erstveröffentlichung 27.03.2007

Kategorien
Webdesign

Mehr sehen mit weniger Details: Wireframes

Eine gute Website braucht eine klare Struktur: An der Oberfläche, wie in der Tiefe. Die Probleme auf mehreren Ebenen zu verstehen und zu analysieren, ist nicht leicht. Wireframes sind ein wichtiger Helfer, um System in den Planungsdschungel zu bringen.

Wer schon einmal in einem Team von Menschen eine größere Website für eine Gruppe von Kunden gestaltet hat, kennt die Herausforderungen. Von einer reibungslosen Kooperation mit klaren Zielen und Entscheidungsstrukturen kann man oft nur träumen. In der Realität wacht man nachts schweißgebadet auf. Das Design ist fast fertig, dann stellen sich Änderungen in der Schriftgröße quer und werfen das Layout zurück zu Papierskizzen. Der Kunde steht vor dem fertigen Seitenentwurf und wünscht sich plötzlich eine Navigation mit ausklappenden Ordnern. Aber wo soll die Struktur herkommen?

Warum?
Ein Designprozess ist immer unübersichtlich. Selbst bei einer kleinen Site geht schnell Orientierung verloren. Ohne klaren Plan verzettelt man sich schnell beim Gestalten und legt beim ersten Entwurf schon das Farbschema fest, bevor man sich Gedanken zu Linkklassen gemacht hat. Als die dann geändert werden sollen, passen die zwei Linkfarben nicht mehr zu den drei Klassen. Überall lauern Gefahren der Zeitverschwendung. Unnötig erledigt man Aufgaben doppelt und dreifach.

Aus solchen Problemen ergeben sich Ziele, wie es besser funktionieren sollte. Vor der optischen Gestaltung muss ein klares Fundament stehen. Die inhaltliche Struktur muss festgelegt sein. Navigation und Sitemap sollten nicht nur angesprochen, sondern weitgehend fertig entwickelt sein. Die klare Trennung von Struktur und Design, mit der sich das erreichen lässt, bieten Wireframes.

Drahtgestell als Rettungsnetz
Für Wireframe-Modelle gibt es viele Namen: Layoutschema, Blaupause, Skizze, Mockup – auch, wenn all diese Begriffe eigentlich etwas anderes bedeuten, werden sie im alltäglichen Umgang munter durcheinander geworfen. Das ist kein Problem, so lange alle wissen, was gerade gemeint ist. Für diesen Artikel dient Wireframe als Überbegriff. Besonders bei Kunden, die kein englisch sprechen, sollte man aber ein einfacheres Wort einführen.

Ein Wireframe dient dazu, wie ein ‚Grundriss‘ der Website eine grundlegende Struktur darzustellen, die bereits erprobt, diskutiert und weiter entwickelt werden kann. Mit ihr lassen sich Zusammenhänge und Strukturen verdeutlichen, die Informationsarchitektur einer Site darstellen und Vorentscheidungen für das grafische Design fällen. An der Systematik verschiedener Wireframes haben sich viele gute Autoren versucht. Ich will uns das ersparen; schauen wir uns lieber an, welche Möglichkeiten er bietet. Was ihn ausmacht, muss immer mit Zweck und Zielgruppe aufs Neue entschieden werden. Welche Entscheidungen stehen an?

Grundsätzlich können Sie sich einen Wireframe als schematische Darstellung einer Website vorstellen: Wichtige Elemente wie das Logo, die Navigation und Textbereiche einer Site werden positioniert. Nichts muss wirklich enthalten sein, aber vieles kann:

  • Die Position der Elemente einer Site grob oder im Detail
  • Logos, konkrete Links, Eingabefelder und Überschriften
  • Die Variationen im Layout, indem jede wichtige Unterseite dargestellt wird
  • Ausgespart werden tatsächliche Texte und Grafiken

Streng genommen beginnen Wireframes also mit einer Stichpunktliste, die Elemente oder Struktur einer Site auflistet, und enden mit fast fertig anmutenden Entwürfen. Diese Spanne ist beabsichtigt: Schließlich gibt es viele Funktionen, die ein Wireframe erfüllen kann. Aber welche konkret?

Anwendungsbeispiele
In der internen Strukturplanung ist ein Wireframe ein wichtiges Referenzmittel. In seiner grundlegenden Form ist er hier besonders mit dem Papierentwurf vergleichbar. Die beiden Formen sind auch kombinierbar. Ein erstelltes Schema lässt sich auch ausdrucken und dann für alle als Vorlage im gemeinsamen Entwurfsprozess einsetzen. Mit Baumdiagrammen, Stichpunktlisten und Schemata, die die Aufteilung der Inhalte auf der Site beleuchten, kann man die inhaltliche Struktur möglichst klar und frei von anderen Störungen festlegen. Erst, wenn die klar ist, geht es um Optik.

Als Vorlage für Designer gibt ein Wireframe Auskunft darüber, wo auf der Site sich welche Elemente befinden. Die Anordnung der Inhalte wird so einer grundlegenden Struktur untergeordnet. Manche Designer beschweren sich, ein zu ausgefeilter Wireframe gebe ihnen wenig gestalterische Freiheit. Das mag stimmen; aber erstens sollten auch Designer zumindest anwesend sein, wenn die Informationsstruktur einer Site erarbeitet wird. Und zweitens ist auch die grundsätzliche Vorgabe eines Layouts mit Elementpositionen noch sehr weit vom tatsächlichen Design entfernt.

Beim Kundengespräch ist gute Planung und effektive Kommunikation gefragt: Laien können auf den ersten Blick oft nicht verstehen, wozu ein Layout ohne genaue Positionen, Farben und Grafiken dienen soll. „Das sieht ja furchtbar aus“, wird manchem Kunden schnell entfahren. Lassen sie sich davon nicht aus der Ruhe bringen: Stellen Sie klar, dass hier nur Aufteilung der Inhalte und Struktur zur Debatte stehen. Wird der Wireframe mit Blaupausen oder einem Schema verglichen, verstehen auch Outsider schnell, was das Ganze soll. Nun können Sie die Navigation vorstellen, die Aufteilung der Site erläutern, und dem Kunden hoffentlich ein genaueres Bild davon geben, warum was wie angeordnet ist.

Der Vorteil dieser Methode: Besseres Informationsmanagement. Jedem fällt es leichter, den Sinn oder Unsinn einer Aufteilung zu beurteilen, wenn die klar dargestellt ist, als wenn alle Elemente eines komplexen Designs auf einmal wahrgenommen werden. Funktioniert die Methode, bekommt der Kunde mehr Möglichkeiten, genaues Feedback zu geben.

In Anwendertests haben Wireframes schon lange einen festen Platz. Wenn etwa ein eShop-System getestet werden soll, oder die Nutzbarkeit einer Suchfunktion beurteilt werden muss, dann ist es ungemein hilfreich, nicht bis zum fertigen Design warten zu müssen. Außerdem lassen sich auftretende Probleme besser eingrenzen. Besucher werden noch nicht von aufblinkender Werbung abgelenkt, nicht durch die unruhige Grafik oder das grelle Farbschema irritiert. Allerdings muss man hier aufpassen: Viele optische Elemente, etwa der Überschriftenstil oder die Größe von Eingabefeldern spielen für die Nutzbarkeit eine zentrale Rolle, da sie das Verhalten des Besuchers stark beeinflussen können.

Wege zum Wireframe
„Womit werden Wireframes erstellt?“ wird oft gefragt. Ganz einfach fällt die Antwort nicht aus. Das hängt von vielen Variablen ab. Besonders beliebt ist echtes HTML, oft nur mit rudimentärem Stylesheet, oder Programme zum Erstellen von Schaugrafiken und Diagrammen, wie Visio (für Windows) oder OmniGraffle (Mac). Aber das Ziel bestimmt den Weg. Zuerst müssen sie sich über den konkreten Zweck des Entwurfs im Klaren sein. Stellen Sie sich drei einfache Fragen:

Welche Entscheidungen müssen gefällt werden? Ein Wireframe ist dann am besten, wenn er nicht für verschiedene Zwecke auf einmal herhalten muss. Gerade in der konzentrierten Darstellung einzelner Aspekte liegt ja seine Stärke.

Welche Elemente brauchen Sie dafür? Der Entwurf sollte alles enthalten, was für die Entscheidung relevant ist. Natürlich liegt vieles nicht, oder nur unfertig vor. Zur Not müssen da Platzhalter oder unfertige Elemente her. Besonders bei internen Besprechungen muss das Resultat ja nicht gut aussehen. Hauptsache, alle Beteiligten wissen, worum es geht.

Welche Zielgruppe haben Sie? Aus der Frage, ob enge Kollegen oder freie Mitarbeiter, Kunden, Testpersonen, oder nur sie selbst mit dem Wireframe umgehen werden, ergeben sich Anforderungen. Für kooperative Gestaltung ist Papier besser, als der Bildschirm. Besonders Kunden sollten mit keinem Fachwort zu viel und keinem unnötigen Element verunsichert werden.

Ein funktionaler Wireframe, der die Navigation einer Website verdeutlichen soll, könnte zum Beispiel aus dem Geflecht der einzelnen Seiten in HTML-Form bestehen. So können alle Beteiligten das Schema wirklich testen. Besser als ein Baumdiagramm zeigt der Entwurf die Nutzerperspektive. Ist das Layout flexibel genug, können die hier entstandenen Seiten durchaus bis zur fertigen Website weiter wachsen. DIV-Container können die Layoutbereiche verdeutlichen. Schriftformatierung wäre hier noch weitgehend unnötig. Auch auf Grafiken kann man eigentlich verzichten.


So kann man sich auf die Navigation konzentrieren.

Steht die grundsätzliche Aufteilung der Inhalte auf dem Bildschirm zur Diskussion, kann der rein optische Entwurf besser funktionieren. Sitzen nur wenige Personen zusammen, kann die Arbeit sogar effektiv am Bildschirm erfolgen. Ist ein produktives Gespräch mit vielen Beteiligten sinnvoll, hilft Papier weiter. Hier könnten auch Farben symbolisch zum Einsatz kommen, um verschiedene Funktionsbereiche zu trennen. Das Wissen um die tatsächlichen Inhalte ist hier wichtig, um allem genug Platz einzuräumen. Für die Diskussion kann es aber gerade nützlich sein, wenn möglichst viel Text und Grafik ausgespart werden, nur Kästen mit ihren Funktionsbezeichnungen hin und hergeschoben werden.


Wireframes müssen funktional aussehen, nicht gut.

Die Vielfalt möglicher Wireframes darzustellen, ergäbe hier keinen Sinn. Mit der Erfahrung kommen auch individuelle Favoriten. Reichlich Inspiration findet man online. Längst haben sich Verfahren eingebürgert, die die Grenzen des Wireframes komplett zerstören: Manche Wireframes sehen aus wie fertige Websites, andere möchte man eher zur geordneten Stichpunktliste erklären. Hauptsache, sie erfüllen den Zweck: Eine Website besser zu planen und zu beurteilen, bevor Arbeit unnötig wiederholt werden muss.

Links zum Thema:

Erstveröffentlichung 09.03.2007

Kategorien
Webdesign

Papierentwürfe – Bastelstunde für Profis

Websites auf Papier zu entwerfen funktioniert. Wichtig sind allerdings klare Ziele. Möglichkeiten und Beschränkungen des Mediums müssen beachtet werden. Dr. Web erläutert, wie sie von der Arbeit mit den einfachsten Mitteln profitieren können und wie Sie Ihr Repertoire erweitern.

Noch vor kurzem habe ich an dieser Stelle Werbung für die Arbeit mit Papierentwürfen gemacht. Auf den ersten Blick mag das unsinnig wirken. Ist eine Website nicht gerade als digitales Medium viel zu weit davon entfernt? Und sind die vielen interaktiven, multimedialen Elemente überhaupt darstellbar? Moderne Websites setzen doch heutzutage auf dynamische Elemente mit Ajax und eingebettete Flashelemente. Mag sein, aber schon seit vielen Jahren sind Papierentwürfe ein Klassiker unter Designern, die Wert auf saubere Planung und ausführliche Tests legen, bevor sie eine schicke Seite zusammenzimmern. Alte und neue Schule widersprechen einander nicht; sie können sich hervorragend ergänzen.

Warum?
Auf den zweiten Blick sind die vielen Vorzüge nicht schwer zu erkennen. Papierentwürfe schrecken niemanden ab. Viele Kunden sind sogar erleichtert, wenn Sie einfach mal in einem Entwurf herum malen dürfen. Endlich können sie auf einfache Art zeigen, was sie sich wünschen. Von der Mitwirkung ohne technisches Vorwissen profitieren auch Ihre Kollegen. Gerade mit Textern oder Grafikdesignern, die wenig Ahnung von den Hintergründen einer Website haben, kann die Kommunikation belebt werden. Die Arbeit am Bildschirm ruft bei vielen Menschen immer noch Respekt hervor. Dabei sind offene Worte im Gestaltungsprozess wichtig. Wenn Kunden ihre Änderungswünsche früh klarmachen, profitieren beide Seiten. Das geht am besten über ein Ambiente, in dem man einander gut versteht, und in dem niemand eingeschüchtert wird. Oft ist es mir passiert, dass ich mit einem recht ausgefeiltem Entwurf Diskussionen eher abgewürgt habe. Weil alles schon gut und fertig aussah, blieb Kritik aus. Vor einer schnellen Skizze hat niemand Respekt.

Abbildung

Änderungen sind immer schnell vorgenommen. Zettel hin- und herschieben, Elemente neu skizzieren – das geht innerhalb einer Besprechung. Anstatt sich Stichpunkte zu machen und das nächste Mal die neue Version zu präsentieren, schaut man sich gemeinsam die neue Skizze an. So fallen schnell wieder neue Details und Probleme ins Auge. Auf dem Papier mag eine Website immer anders aussehen, als auf dem Bildschirm, aber darin liegt auch ein großer Vorteil. Papierentwürfe sind übersichtlich, zum Anfassen und intuitiv zu manipulieren.

Schließlich kann gerade die technische Reduktion helfen, sich auf Wesentliches zu konzentrieren. Weder typographische Details noch das genaue Farbschema, noch Multimediales hat auf dem Papier etwas zu suchen. Gutes Layout der Elemente einer Site und ihre Nutzbarkeit stehen im Vordergrund. Das ist immer ein gutes Fundament für den komplexen Prozess des Webdesigns; bevor man sich in Details verliert, muss das Grundsätzliche geklärt sein.

Abbildung

Wofür?
Im Laufe der Jahre haben sich die verschiedensten Anwendungsformen für Papierentwürfe etabliert. Für einige eignet sich Papier besonders gut: Noch bevor die erste Zeile Code getippt wurde, kann es sinnvoll sein, sich mit Stift und Papier zusammenzusetzen und sich über Grundlagen abzustimmen. Allein kann man durch Skizzieren zu einem klareren Konzept und Ziel gelangen. In der Zusammenarbeit mit Kollegen oder Kunden kann man gewährleisten, dass alle am selben Strang ziehen. Eine gemeinsame Vision zu formulieren, die man sehen und anfassen kann, hilft ungemein.

Aufwendigere Projekte profitieren von Usabiltytests mit Papier. Jakob Nielsen und Morgan Kaufman sind zwei Autoritäten auf dem Gebiet, die auch online viel von Ihrer Erfahrung teilen. Grundlage kann hier etwa sein, Menschen mit dem Stift als ‚Maus‘ die Nutzbarkeit eines Designs nachvollziehen zu lassen. So lassen sich die Fundamente eines Designs sinnvoll testen, bevor viele Stunden in die Erarbeitung eines Entwurfs investiert wurden.

Abbildung

Egal, in welchem Stadium: Brainstorming bei der Arbeit im Team kann fast immer von Papier profitieren. Wenn man in einer Sackgasse steckt, ist es einfach besser, wenn jeder auf die Schnelle Zettel hin und herschieben, Elemente durchstreichen, neue Ideen skizzieren kann, als wenn eine Menschentraube dem Webdesigner im Nacken sitzt und ihn mit Vorschlägen bombardiert. So wird schnell eine kreative, entspanntere Atmosphäre geschaffen.

Auch, wenn schon Handfestes gestaltet wurde, kann der Schritt zurück auf das Papier helfen. Ist das Projekt in eine Sackgasse geraten? Wollen Sie zu grundsätzlichen Entscheidungsebenen zurück finden? Dann sollten Sie ausdrucken, was bisher gestaltet wurde, und zur Bastelstunde rufen. Auch Revisionen sind auf dem Papier oft intuitiver vorzunehmen. Und auch fortgeschrittenes Design lässt sich auf Papier darstellen.

Womit?
In der Wahl der Mittel gibt es viele Möglichkeiten. Mit verschiedenen Projekten und Besprechungen werden ganz andere Mittel sinnvoll. In jedem Fall sollte jeder der Beteiligten einen Stift haben, Zugriff auf Schere, Klebstoff und reichlich Papier. Neben dem billigsten und einfachsten Material, DIN A4-Blättern gibt es viele sinnvolle Mittel, mit der die Arbeit am Papierentwurf konkreter und anschaulicher wird.

Farben: Schrift und Hintergründe findet man schließlich auch im Web in allen Farben des Spektrums. Verschiedene Stifte und gefärbtes Papier können das nicht in allen Feinheiten wiedergeben. Aber Grundsätzliches ist darstellbar. Wo Signalfarben Orientierung schaffen sollen, Links erkennbar werden müssen, ist die Arbeit mit farbigen Arbeitsmaterialien sinnvoll. Auch für die funktionale Trennung können Farben helfen. Die dynamischen Elemente einer Seite, Navigationselemente, selbst ein ‚Browserfenster‘ können so dargestellt werden.

Abbildung

Formate: Wer nur mit A4-Blättern arbeitet, beschränkt die eigenen Möglichkeiten. Besonders nahe liegen kleine Zettel, mit denen sich das Layout einer Seite wirklich modular darstellen und verändern lässt. Die Elemente können übereinander gelegt, zusammen geklebt, auseinander geschnitten werden. So verdeutlichen sie oft die Gemeinsamkeiten und Unterschiede der Einzelseiten einer Website besser, als eine Livedemo das könnte. Auch Karteikarten bieten sich an, um eine beliebte Metapher der Navigation umzusetzen: die Navigation mit Karteireitern. Das Grundlayout passt (auch vom Seitenverhältnis) gut auf ein quer gelegtes A4-Blatt. Kleinere Formate werden darüber gelegt und verdeutlichen Änderungen.

Haftnotizen: Die kleinen farbigen Zettel nehmen schnell eine Sonderrolle bei der Arbeit ein. Sie dienen erstens dazu, Kommentare über die Seite festzuhalten. Schließlich ist es hilfreich, wenn optisch eine klare Trennung zwischen dem Entwurf und Kommentaren dazu besteht. Die Versuchung ist groß, Dinge auf den Entwurf zu kritzeln, die nicht auf der späteren Seite stehen sollen. So geht Übersicht verloren. Zweitens können die Klebezettel Pop-Up-Fenster simulieren: Bestätigungen, Fehlermeldungen, Loginfelder. Idealerweise sollten sich die beiden Zwecke nicht mischen.

Ausdrucke: Findet die Besprechung statt, nachdem schon Elemente gestaltet wurden, sollten die natürlich vorliegen. Um nicht an dem Stand der Entwicklungen vorbei zu reden oder immer wieder zum Computer zurückkehren zu müssen, können mehrere Ausdrücke der Designelemente helfen. Die zu zerschneiden, neu zusammenzufügen und zu ergänzen, ohne je eine CSS-Datei von innen zu sehen, kann auch auf Webdesigner befreiend wirken. Zusätzlich könnten Vorlagen zum Einsatz kommen. Ein paar Textblöcke, Bildelemente, Logos der Firma zum freien Platzieren zu haben, kann viel Gekritzel ersparen und ist für die weniger künstlerisch Begabten eine Erleichterung.

Abbildung

Arbeitshilfen: Natürlich sollten ausreichend Scheren, Stifte, Klebstoff und vor allem eine Digicam zur Hand sein. So kann man Änderungen schnell vornehmen, und erleichtert allen Beteiligten die Interaktion. Per Kamera werden Ergebnisse schnell und einfach festgehalten.

Drunter und Drüber: Alle Beteiligten sollten auf die Arbeitsfläche Zugriff haben. Ein riesiger Konferenztisch kann behindernd wirken, wenn nicht alle gut sehen, was gerade passiert, oder nicht jeder an die Entwürfe herankommt. Ohnehin können bei der Arbeit mit Papier zu viele Köche den Brei verderben. Zur Fixierung der Elemente kann ein Whiteboard oder eine Pinnwand gute Dienste leisten. Auf dem Whiteboard könnten dann noch Notizen zum Design Platz finden. Oder Folien werden für Anmerkungen über den Entwurf gelegt; die sind allerdings auch teuer, rutschen schnell und reflektieren bei Blitzlichtaufnahmen. In jedem Fall verdient die Arbeitsumgebung ein paar Vorüberlegungen. Mit der Erfahrung entwickeln sich dann Vorlieben und Gewohnheiten.

Ausprobieren
Mit diesen Mitteln haben Sie schon eine Menge Möglichkeiten. Aber mit etwas Kreativität und Erfahrung lassen sich auch die noch erweitern. Auch, wenn Ihre Arbeitsumgebung in Zukunft nicht aussieht, wie eine Bastelstunde im Kunstunterricht, können Ihnen einige der hier gemachten Anregungen hoffentlich weiterhelfen. So mancher Kunde und Kollege wird erst skeptisch auf ‚gemeinsames Basteln‘ als wichtigen Schritt im Gestaltungsprozess reagieren. Aber die Überzeugungsarbeit kann sich lohnen. Schließlich ist gute Kommunikation und saubere Planung eine der ewigen Hürden im Webdesign. Da ist jede Hilfestellung wertvoll. ™

Material zum Thema:

Erstveröffentlichung 05.03.2007

Kategorien
Webdesign

Schluss mit Ratespielen

Bieten auch Sie Ihren Kunden Websites an, die mit Content-Management-Systemen implementiert werden? Ist Ihr Blog mit Social Bookmarking-Services und Link auf Ihr Last.FM-Profil aufgepeppt? Haben Sie nächtelang an dem schicken Mouseover-Effekt für Ihre Navigation gearbeitet? Dann passen Sie mal auf, dass Ihre Besucher nicht kopfschüttelnd das Weite suchen.

Als ich beschloss, ein eigenes Blog zu gründen und Freunden davon erzählte, war ich erstaunt, wie wenige den Begriff je gehört hatten. Was wollte ich gründen? Manche lachten unwillkürlich, als sie das Wort zuerst hörten. Eine gute Freundin, die jeden Tag am Rechner sitzt und viel surft, tippte auf kleine, warzige Meeresungeheuer. ‚Weblog‘ wurde nicht viel besser verstanden. Die Frage, ob RSS-Feeds wohl reichen würden, oder ob ich auch Atom-Feeds ins Auge fassen sollte, verkniff ich mir. Das Problem liegt auf der Hand, ist aber nicht einfach in den Griff zu bekommen: Wie sprechen Sie Ihre Besucher richtig an? Sie wollen schließlich weder fachkundige Surfer langweilen, noch Anfänger vergraulen.

Mit wem reden Sie?
Eine kurze Bemerkung vorab: Jede Website profitiert von einer klar umrissenen Zielgruppe. Auf ein Blog mit nützlichen PHP-Snippets werden sich kaum völlige Technik-Laien verirren – die wissen schließlich kaum, was PHP überhaupt ist. Oft fällt die Eingrenzung des Publikums schwieriger aus. Aber wenn Sie sicher sind, dass Ihr Angebot nur für Netzprofis interessant ist, müssen Sie natürlich nicht für Anfänger gestalten.

Schöne Sünden
Eines der häufigsten Probleme von Websites ist nur allzu verständlich: Der Wunsch, gut auszusehen. An einer ansprechenden Präsentation führt kein Weg vorbei. Außerdem wollen Sie professionell wirken. Und Fachausdrücke signalisieren Kompetenz. Originalität ist wichtig. Schnell setzt man da auf ausgefallenes Interfacedesign und überraschende Effekte. Schließlich sehen doch gerade die Seiten vieler selbst ernannter Usability-Gurus zum Einschlafen langweilig aus. Mag stimmen, aber die Sache hat einen entscheidenden Haken. Wann immer Sie Eindeutigkeit, Nutzkomfort und Übersicht opfern, sägen Sie am Ast, auf dem Sie sitzen. Schauen wir uns einige Probleme genauer an.

Geheimnisvolle Buttons
Besonders auf Blogs häufig anzutreffen: An prominenter Stelle befinden sich Grafiken von kleinen Aliens mit roten Augen, Schlangenlinien, oder Ährenzweigen. Oder Slogans, in so kleiner Schrift, dass ich sie zuerst nicht lesen kann. Wenn ich die Augen dann zusammenkneife, entziffere ich ‚Create a Blog‘, ‚Valid XHTML‘, ‚Michael‘ oder sonst irgend etwas. Wenn ich wissen will, ob sie zu einem anderen Blog, einer erklärenden Seite oder zu Nacktfotos führen, muss ich darauf klicken. Diese Technik ist mit dem Phänomen der Mystery Meat Navigation verwandt, die schon vor vielen Jahren vom Experten für schlechte Webseiten, Vincent Flanders, gegeißelt wurde. Warum sollte man Text in kleine, unleserliche Grafiken verwandeln? Warum Buttons benutzen, die viele nicht verstehen?

Screenshot

Es gibt nur wenige Fälle, wo ein Icon ohne Text reichen mag, um verstanden zu werden. Wenn ich etwa eine Sprechblase sehe, gelange ich dann zu einem Kontaktformular, oder zu einem Forum? Oder werde ich direkt in mein Mailprogramm geworfen? Text gehört also fast immer dazu und sollte nach Möglichkeit genau so größer gestellt werden können wie der Fließtext Ihrer Site. Dank CSS lässt sich das auch optisch ansprechend umsetzen. Zumindest muss er aber vom Start weg angenehm groß sein.

Unerklärliche Begriffe
Eng mit den erwähnten Buttons verwandt sind kryptische Begriffe. Besonders schmerzhaft können Sie als Titel sein. Warum eine Linkliste mit „Del.icio.us“ überschreiben? Was sucht der „Typo3“-Link in der Navigationsleiste einer Webdesignagentur? Besonders kommerzielle Angebote sollten sich vor unnötiger Insidersprache hüten. Unverstandene Begriffe lösen Stress beim Besucher aus; auch im Fließtext. Oft genug lassen sich derartige Wörter durch allgemein Verständliches ersetzen.

Hier rückt die Zielgruppe wieder ins Zentrum der Aufmerksamkeit. Bei Hobbyprojekten kann man vielleicht auch mal einen Besucher verschrecken, um nicht immer alles erklären zu müssen. Kommerzielle Sites sollten von ganz unbedarften Besuchern ausgehen. Sie können ja immer noch ‚weitere Infos‘ anbieten, oder in einer Rubrik für ‚Häufige Fragen‘ erläutern, welches CMS sie einsetzen.

Screenshot

Überraschungen
Spielen Sie auch noch gern Adventures? An die frustrierenden Augenblicke, wenn ich mit dem Mauszeiger nach dem fehlenden Schlüssel suchen muss, erinnern mich heute viele Websites. Wenn Sie wesentliche Funktionen nur über Mouseover-Effekte zugänglich machen, müssen Sie sich gut fragen, ob ihre Besucher die finden und verstehen können. Links müssen immer deutlich von der Umgebung abgehoben sein. Buttons und dergleichen sollten eigentlich nie dezent sein. Denn dann klickt schließlich niemand. Falls der unauffällig platzierte Knopf nicht wichtig ist, sollten Sie sich fragen, was er überhaupt auf Ihrer Site verloren hat. Jeder ausgefallene Effekt, jede Abweichung von der Norm sollte gut überlegt sein und sich nicht in Kernbereiche Ihres Angebots verirren.

Fragezeichen
Manchmal ist es nicht zu vermeiden, schwierige Begriffe gehören in den Kernbereich mancher Angebote. Vielleicht ist das Thema Ihrer Beratungsleistung allein schon ein Brocken. Dann sollte aber auch die Hilfe nicht weit entfernt sein. Oft reicht es nicht, wenn vom Begriff aus eine Erklärung verlinkt ist oder per Mouseover eine kleine Erklärung eingeblendet wird. Auch, wenn Platz rar ist, eine schwer zu findende Hilfefunktion hilft nicht. Sie muss immer auffällig und leicht zu nutzen sein. Ein zentraler Link ‚Hilfe‘ in der Navigation könnte schnell gefunden werden. Der Inhalt sollte aber auch kontextabhängig auf die aktuelle Seite eingehen. Und ein Hilfetext muss doppelt und dreifach darauf abgeklopft werden, dass er leicht zu verstehen ist: kurze Sätze, keine Fachausdrücke, einfacher Stil. Wer auf ‚Hilfe‘ klickt, ist ja oft schon mit den Nerven am Ende und zu keiner Gehirnakrobatik mehr bereit.

Screenshot

Wo bin ich?
Eine gute Struktur zu finden, ist nicht leicht. Die auch zu vermitteln, kann noch schwerer sein. Spätestens, wenn eine Website Unterrubriken besitzt, sollten Sie über Pfadangaben und eine Sitemap nachdenken. Pfadangaben sind über dem Hauptinhalt gut platziert, Sitemaps werden am ehesten gefunden, wenn sie in der Navigation selbst als Punkt auftauchen. Suchfunktionen, die nicht gut funktionieren, vergraulen Besucher eher, als dass sie helfen. Wenn Sie sich fragen, was eine Suche können muss und wie Resultate gut aussehen, sollten Sie von den Besten lernen: Das Google-Layout ist den meisten Surfern gut bekannt und wird verstanden. Multimediale Angebote können von zusätzlichen Bildern der Suchergebnisse profitieren.

Vor allem sollten Sie natürlich den Nutzer schnell zum Ziel führen. Die Strukturierung einer Website wird oft nicht ernst genug genommen. Ist das bei Ihnen ein ausgeprägter Schritt im Designprozess, der nach Möglichkeit auch getestet und offen diskutiert wird? Software und Services zum Usertracking können im Nachhinein helfen, wenn Sie nicht sicher sind, ob Bereiche Ihres Auftritts gefunden werden.

Screenshot

Keine Website ist perfekt.
Welche Fehler Sie begangen haben, erfahren Sie nur, indem Sie andere auf Ihr Werk loslassen. Wenn Sie sich ausführliche Usabilitytests nicht leisten können, dann sollten Sie Ihre Besucher wirksam einladen, Feedback zu geben. Kein großes Angebot kommt heutzutage ganz ohne Redesign aus. Irgend etwas ist immer zu verbessern. Nachträgliche Korrekturen fallen, wenn überhaupt, dann eher positiv auf, vorausgesetzt Sie vermeiden große Brüche und gehen sicher, dass eine Veränderung innerhalb der vorhandenen Struktur sinnvoll und möglich ist.

Ein paar einfache Faustregeln können helfen, eine Website verständlich und nutzbar zu gestalten. Konfrontieren Sie jemanden mit dem Angebot, der garantiert unbedarft ist. Das können auch Freunde oder Verwandte sein. Natürlich müssen diese Personen auch im weitesten Sinne als Zielgruppe in Frage kommen. Auch Sie selbst können versuchen, ein Angebot mit den Augen eines Anfängers zu betrachten. Schauen Sie jede Einzelseite an und fragen Sie sich, ob alles verständlich und übersichtlich wirkt. Lesen Sie die Texte langsam durch. Wo treten Fachausdrücke auf? Vor allem in geballter Form. Lassen Sie eine automatische Rechtschreibkontrolle auf Ihren Text los. Die versteht viele Fachausdrücke nicht und kann so prima als ‚unerfahrener Leser‘ durchgehen. Kein Auge hat sie allerdings für das Grafikdesign. Ist je ein schwieriges Element zu sehen, ohne dass Hilfe in unmittelbarer Nähe wartet? Hat alles genug Platz? Fallen die wichtigen Elemente zuerst auf?

Ein guter Webdesigner hat immer im Blick, welche Informationen gerade nötig sind und welche nicht. Ersparen Sie Ihren Besuchern alles unnötige. Ein häufiges Problem für Designer ist, für die Zielgruppe gestalten zu müssen und nicht für sich selbst. Neben Einfühlungsvermögen hilft da nur Erfahrung. Der schlimmste Fehler wäre, sich selbst für ‚gut genug‘ zu halten. Wenn Sie mitbekommen, dass jemand etwas nicht versteht, sollten Sie sich freuen: Sie bekommen eine Gelegenheit, Ihre Website zu verbessern. ™

Erstveröffentlichung 26.02.2007

Kategorien
Webdesign

Wir brauchen besseren Text!

Keine Webseite kommt ohne Text aus. Text auf einer Webseite ist immer Kommunikation. Aber, mit wem reden Sie eigentlich? Schaut man sich online um, müsste die Antwort oft leider lauten: Mit niemand Bestimmtem. So vertreiben Sie Besucher. Wie man es besser macht…

Ob ihre Website einen kommerziellen Hintergrund hat, oder nicht: Warum ist sie online? Doch sicher, damit Menschen sie besuchen und die Inhalte dort nutzen. Erstaunlich, dass trotzdem viele Webmaster den Text, meist der wesentliche Inhalt, stiefmütterlich behandeln. Das gilt vor allem dann, wenn nicht gerade ein professioneller Texter oder Redakteur angestellt wurde, um die Seite inhaltlich zu betreuen. Natürlich ist das nicht immer zu bezahlen. Aber mit ein bisschen Sorgfalt lassen sich viele Fehler vermeiden. Welche?

Fassen Sie sich sich lang.
Eine der großen Weisheiten der Textgestaltung im Netz ist das berüchtigte flüchtige Leseverhalten online. Surfer scannen Text. Lesen die also praktisch nichts? Wenn Sie an diesem Absatz angekommen sind, dürfte Ihnen die Ironie der Frage nicht entgehen. Natürlich müssen Sie auf den Punkt kommen, mit gutem Layout Übersicht schaffen und kürzen, wo es geht. Aber an der Sprache führt kein Weg vorbei. Wenn Sie etwas zu erklären haben, müssen Sie das auch tun.

Gut geschriebener Text kann Spaß beim Lesen machen. Noch immer tummeln sich online Menschen mit überdurchschnittlicher Bildung. Viele von denen lesen gern. Haben Sie also keine Angst vor langem Text. Ist der gut strukturiert? Werden die wichtigen Inhalte vollständig vermittelt? Dann darf er auch länger sein; Surfer wissen, wie man nach unten scrollt.

Sagen Sie etwas.
Das ist schwerer, als es klingt. Bevor Sie sich die Mühe machen, sorgfältig Texte zu schreiben, sollten Sie sicher gehen, dass die nicht schon in besserer Form online sind. Natürlich können Sie nicht das ganze Netz durchforsten. Bringt aber eine schnelle Suche Besseres, als Sie es bieten können, dann sollten Sie umdenken; und zwar bevor alles geschrieben ist. Finden Sie ihre eigene Perspektive. Haben Sie besondere Erfahrungen und Meinungen zu ihrem Thema? Die sind wertvoller als Infos, die man an jeder Straßenecke bekommt.

Auch kommerzielle Angebote sollten etwas haben, das sie einzigartig macht. Die Zahl der austauschbaren Auftritte innerhalb einer Branche ist oft groß. Nutzen Sie Konkurrenzanalysen nicht nur zum Abgucken. Sie wollen doch im Gedächtnis bleiben, oder? Das geht am besten mit ihrer eigenen Sprache und mit Blick auf die Aspekte, die Ihr Unternehmen einzigartig machen. Wichtiger als Ihr kompletter Kompetenzbereich sind Ihre Stärken.

Zeigen Sie sich.
Text muss man gut lesen können. Natürlich denken Sie jetzt an Typographie und Layout. Das ist richtig; aber darum soll es hier nicht gehen. Na gut, bis auf eine Bitte: Setzen Sie den Text größer! Und gehen Sie sicher, dass eine weitere Vergrößerung durch den Surfer ihr Layout nicht zerstört. Das Problem begegnet mir immer wieder, auch auf ‚barrierefreien‘ Webseiten. Designer arbeiten an hochwertigen Bildschirmen. Und weil sie den Text ohnehin schon kennen, versuchen sie nicht, den nochmal in Ruhe zu lesen. Das Resultat ist Text, der gut aussieht, aber schnell unleserlich wird. Gehen Sie von Publikum aus, das älter ist als Sie und das schlechtere Bildschirme benutzt.

Aber Übersichtlichkeit ist viel mehr als Textgröße, Zeilenabstand und White Space. Denken Sie an Überschriften und Rubrikentitel. Die müssen einfach und einprägsam sein. Und sie müssen klar sagen, worum es geht. Originalität wird nicht immer belohnt. Vor allem die Navigation muss sofort einleuchten. Ob sie schick aussieht oder witzig klingt, ist zweitrangig. Etwas mehr Spielraum bieten Überschriften. Die müssen zum Lesen einladen. Insgesamt sollten Sie den kürzesten Texten die meiste Aufmerksamkeit schenken. Diese Schlüsselwörter sind Wegweiser durch ihren Onlineauftritt. Lenken Sie ihre Besucher weiter, indem Sie lange Absätze vermeiden, und sinnvolle Zwischenüberschriften einsetzen. Damit schüchtern auch lange Texte nicht mehr ein.

Sprachliche Form und Lesbarkeit gehen Hand in Hand. Achten Sie auf Satzlänge. Und schon jede alte Stillehre weiß, Sätze im Aktiv und ohne Verneinungen lesen sich leichter. Diese Regeln sollten Sie nicht sklavisch befolgen – sonst rattern Texte wie ein Maschinengewehr. Aber als Faustregeln sind sie gute Begleiter.

Bleiben Sie verständlich.
Oft bin ich verblüfft, was andere Menschen nicht kennen. Das ist die berüchtigte Fachbrille. Jeder weiß doch, was ein Weblog ist, oder? Natürlich nicht. Schließlich habe ich auch keine Ahnung, wozu eine Nockenwelle dient. Und mir passiert es immer noch, dass mich auf einer Seite zum Webdesign ein Artikel anlacht, dessen Überschrift ich gar nicht verstehe. Tatsächlich ist die Balance schwer zu finden. Sie wissen nicht genau, wer Sie besucht. Wenn Sie eine Website mit Fachhintergrund betreiben, dann sollen vor allem Fachleute den Inhalt verstehen. Erklären Sie zu viel, fühlen sich alte Hasen unterfordert oder gar beleidigt. Erklären Sie zu wenig, werden Sie nicht verstanden.

Für das Problem gibt es keine einfache Lösung. Ein Glossar kann helfen. Außerdem sollte aus Ihrer Website hervorgehen, wer die Zielgruppe ist. Welches Themengebiet? Welcher Kenntnisstand? So etwas sollte auf der Startseite erkennbar sein.

Besitzt Ihre Seite einen kommerziellen Hintergrund, müssen Sie hier viel Zeit investieren. Im Zweifelsfall wollen Sie immer verstanden werden. Kein Fachausdruck sollte ungefragt stehen bleiben. Vieles lässt sich einfach ausdrücken, ohne Profis zu langweilen. Eine Webdesignagentur sollte nicht damit werben, dass sie ein ‚Open-Source-CMS‘ einsetzen. Der Kunde erfährt so nicht, dass Sie kostenlose Software einsetzen, mit der sogar er selbst die Website verwalten kann.

Machen Sie alles besser.
Gott sei Dank gibt es die automatische Rechtschreibkorrektur. Warum viele sie nicht benutzen, ist mir nicht ganz klar. Aber eine volle Überarbeitung per Knopfdruck ist noch nicht erfunden. Die Korrekturfunktion ist nur ein Aspekt der Überarbeitung. Und auch, wenn Sie kein Lektor sind, sollten Sie einen guten Teil der Zeit, die Sie für die Erstellung Ihrer Inhalte aufwenden, in die Überarbeitung stecken. Das beginnt mit der Durchsicht entlang einiger Regeln. Vieles ist schon angesprochen: Verständlichkeit, Satzlänge, Wortwahl – das alles sollte nach dem Schreiben noch einmal unter die Lupe genommen werden. Wenn es geht, sollten Sie den Text mal ein paar Tage liegen lassen. Leider kann man sich diesen Luxus oft nicht leisten. Aber Sie könnten erstaunt sein, was Ihnen nach einer Woche auffällt.

Wenn der Inhalt steht, geht es an die formale Korrektur. Das macht niemandem Spaß. Aber viele Besucher reagieren angesäuert auf Fehler. Zumindest wirken sie unprofessionell. Automatische Korrekturen übersehen alles, was als ein anderes Wort erkannt wird. Und Grammatikhilfen stecken noch in den Kinderschuhen. Um ehrlich zu sein: Ich schalte sie gar nicht erst ein. Auch in Zeiten der Verwirrung durch die Rechtschreibreform sollten Sie zumindest auf konsistente Schreibung, einheitliche Standards bei der Zeichensetzung, der Getrennt- und Zusammen- sowie der Groß- und Kleinschreibung achten.

Je öfter man einen Text durcharbeitet, desto weniger sieht man. Das Problem kennt wohl jeder, der viel mit Texten zu tun hat. Können Sie sich die Wartezeit bis zur nächsten Überarbeitung nicht leisten, dann probieren Sie doch, bestimmte Aspekte einzeln abzuarbeiten. Also einen Durchgang lang auf die Zeichensetzung achten, den nächsten auf grammatische Bezüge, und so weiter. Die Scheuklappen bei der Arbeit können helfen, einen Bereich genauer zu sehen.

Finden Sie es heraus.
Oft gibt es kein dickes Budget, um eine Webseite zu testen. Aber Texte sind oft billiger zu testen, als grafische Elemente. Bitten Sie zuerst Kollegen oder Freunde, den fertigen Text zu begutachten. Machen Sie sich und ihrem Gegenüber klar, dass Freundlichkeit hier fehl am Platze ist und bitten Sie um offene Meinungen. Wenn Sie einige Stimmen zu Ihrem Text haben, können Sie selbst immer noch überlegen, welche Kritik unangebracht war oder nicht stimmt. Idealerweise sollte er am Bildschirm gelesen werden. Aber auch auf Papier sollte ein guter Text funktionieren.

Besonders kommerzielle Projekte sollten unbedingt ihren Text testen. Wird ihr Layout und die Benutzerführung untersucht? Dann hoffentlich auch der Inhalt. Fragen Sie Kunden, ob Sie alles verstanden haben, ob Texte gefallen haben, wo Probleme lagen. Nachrichtendienste bieten oft die Möglichkeit, Beiträge zu bewerten oder zu kommentieren; ein guter Anfang. Aber vielleicht können Sie Lesern, die ausführlicher reagieren, ein kleines Dankeschön versprechen? Schließlich ist ehrliche Kritik bares Geld wert.

Hören Sie auf.
Es gibt keinen perfekten Text. Auch in Büchern und renommierten Zeitschriften kann man Rechtschreibfehler finden. Wichtig ist ja, dass Fehler kleine Ausnahmen bleiben. Wer behauptet, so etwas dürfe nie passieren, lügt. Eine der wunderbarsten Eigenschaften von Text ist seine Einfachheit. Eine Website umzugestalten, kann ein Alptraum sein. Einen Text zu überarbeiten, geht dagegen immer einfach. Verzetteln Sie sich also nicht in der x-ten Korrektur, sondern setzen Sie sich konkrete Ziele. Sind die erreicht, können Sie online gehen. Perfektionieren können Sie den Text später.

Und haben Sie keinen falschen Respekt. Mit etwas Sorgfalt und klaren Regeln kann  jeder bessere Texte schreiben. Und je länger Sie es probieren, desto besser werden Sie. Viele Bereiche des Webdesigns sind sehr anspruchsvoll. Das Schreiben guter Texte ist da keine besondere Herausforderung.

Erstveröffentlichung am 22.02.2007