Ihr findet das Buch hier.

Noch vor der eigentlichen Konzeption steht in der Regel einen genaue Analyse der Ziele der Webseite und der damit verbunden Zielgruppen. Was will ich mit meiner Webseite erreichen? Wen spreche ich auf meiner Webseite an? Diese beiden Fragen bilden den Kern dieser Analyse.

Aufgrund dieser Analyse ergeben sich Anforderungen, die eine Startseite erfüllen muss. Die Hauptzielgruppen sollen auf der Startseite gleich auf den richtigen Weg gebracht werden.

Fakt ist, dass auf der Startseite nicht unendlich viel Platz zur Verfügung steht. Neben dem wahrscheinlich vorhanden Logo müssen sich Elemente wie Claim, Navigation, Suche, Sprachweiche, Kontakt, etc. wiederfinden. Hinzu kommt sicherlich das Wichtigste, nämlich der Content. Doch wie führe ich meine identifizierten Zielgruppen schon auf der Startseite?

Schauen wir uns ein paar Beispiele an.

Spiegel Online

Spiegel Online

Spiegel Online wird als Hauptzielgruppe den an aktuellen Nachrichten interessierten Endbenutzer haben. Dem entsprechend ist die Startseite aufgebaut. Der Contentbereich wird durch eine große Hauptnachricht gefolgt von weiteren Nachrichten gefüllt. Der Besucher scannt die Seite nach aktuellen Nachrichten und liest die, die ihn interessieren.

Apple

Apple

Apple nutzt in der Regel die Startseite als Bühne, um ein aktuelle Produkt darzustellen (in diesem Fall das iPad). Dabei zeigt Apple bewusst nur ein Produkt groß und prominent und alle anderen Produkte werden in den Hintergrund gedrängt bzw. werden auf der Startseite nicht gefunden.

37signals

37signals

37signals zeigt auf der Startseite seine wichtigsten Produkte mit einer sehr kurzen Beschreibung und dem Symbols des Produkts. Der Leser entscheidet, wofür er sich interessiert und erfährt dann auf Unterseiten mehr zu einem Produkt. Weiterhin zeigt 37signals Testimonials um dem Besucher Vertrauen zu den Produkten zu geben.

Erkenntnisse

Vergleichen wir die drei genannten Seiten so ergeben sich grundsätzliche unterschiedliche Ansätze, die Startseite zu gestalten und die Besucher so zu führen.

37signals nutzt die Startseite, um dem Besucher die Hauptprodukte kurz zu erklären und ihn dann auf die jeweilige Produktdetailseite zu führen, auf der er weiter Informationen findet. Unterstützt werden die Produkte durch Testimonials zufriedener Nutzer.

Apple nutzt den kompletten Platz der Startseite, um ein einzelnes Produkt vorzustellen. Der Besucher soll sich das aktuelle Top Produkt ansehen. Nutzer, die sich für ein anderes Produkt interessieren, navigieren über das Menü dort hin.

Spiegel Online bietet seinen Besuchern die aktuellsten und wichtigsten Nachrichten auf der Startseite. Ältere oder nicht so wichtige Nachrichten findet der Besucher, wenn er sich denn überhaupt dafür interessiert, über das Menü.

Negativbeispiel Hochtief

Hochtief

Bevor ich ein paar Schlussfolgerungen ziehe, möchte ich noch ein Negativbeispiel für eine Startseite zeigen. Hochtief ist ein Baukonzern, der aus vielen einzelnen Unternehmungen besteht. Die Startseite zeigt sehr gut, was passieren kann, wenn man alle Dienstleistungen und Produkte auf der Startseite zeigen möchte. Es ist auf den ersten Blick sehr schwer, sich überhaupt auf der Seite zu orientieren, da zu viele Elemente vorhanden sind. Als Beispiel sei hier das Hochtief Gateway genannt. Sicherlich war die Idee hinter diesem Element, den Besucher auf eine der Unternehmensseiten der Aktiengesellschaft zu führen. Heraus gekommen ist leider eine lange Liste von Links, die dem Besucher nicht helfen. Hier wäre es besser gewesen, einen Filter- oder Fragenassistent anzubieten.

Schlussfolgerung

Es gibt nicht DIE Aufteilung einer Startseite. Vielmehr hängt die Gestaltung davon ab, welche Zielgruppen ich habe und wie heterogen diese sind.

Habe ich mehrere gleichwertige Produkte, deren Anzahl aber nicht zu hoch ist, könnte der 37signals-Weg für meine Seite der richtige sein.

Habe ich ein Top Produkt, und alle anderen Produkte sind für einen gewissen Zeitraum diesem untergeordnet, so kann ich Anlehnungen an der Apple-Startseite nehmen.

Besteht mein Produkt aus Informationen, die zeitlich begrenzt interessant sind, so könnte Spiegel Online ein Vorbild für mich sein.

Alle drei Beispiele lösen das Problem des Platzmangels auf der Startseite elegant und führen den Besucher.

Screen vs. Magazin: 100% ist nicht groß; Bild von Wilson Miner.

Erzähl uns nicht, wir sollen die Schriftgröße anpassen

Wir wollen unsere Browser Einstellung nicht jedes mal ändern, wenn wir eine Webseite besuchen!

Erzähl uns nicht, volle Webseiten sehen besser aus

Überfüllte Webseiten sehen nicht gut aus, sie sehen hässlich aus. Seiten mit irgendwelchen Sachen füllen hat der Usability noch nie geholfen. Es ist Faulheit, die dich veranlasst, uns alle möglichen Informationen an den Kopf zu werfen. Wir wollen, dass du dir Gedanken machst und vorauswählst, was wichtig ist. Wir wollen nicht deine Arbeit machen.

Erzähl uns nicht, scrollen ist böse

Dann sind nämlich alle Webseiten böse. Es ist nichts falsches am Scrollen. Gar nichts. Genau so wie nichts böses daran ist, eine Buchseite umzublättern.

Erzähl uns nicht, Text sei nicht wichtig

95% von dem, was Webdesign ausmacht ist Typographie.

Erzähl uns nicht, wir sollen uns Brillen kaufen

Lehn dich vielmehr zurück (!) und lese in einer entspannten Position weiter.

Fünf einfache Regeln

1. Standard Schriftgröße für lange Texte

Die Schriftgröße des Textes den du gerade liest ist nicht groß. Es ist die Schriftgröße, die Browser als Default anzeigen. Es ist die Schriftgröße, die von Browsern zur Anzeige vorgesehen war.

Wir wollen keine “Größer” oder “Kleiner” Buttons drücken und wir wollen unsere Browser Einstellungen nicht verändern. Wir wollen einfach loslesen. Wir wollen, dass du deine Einstellungen an unsere anpasst und nicht anders herum.

Am Anfang ist es schwieriger ein gutes Layout mit einer großen Schriftart zu erstellen, aber diese Herausforderung wird dir helfen, eine einfachere klarere Seite zu designen. Eine Seiten mit Informationen vollstopfen ist nicht schwer, aber eine Seite schlicht und einfach bedienbar zu gestalten ist es. Am Anfang wirst du geschockt sein, wie groß die Default Schriftgröße ist. Aber nach ein paar Tagen wünscht du dir keinen kleineren Schriftrgöße als 100% für den Text. Es sieht zwar erstmal groß aus, aber du wirst feststellen warum alle Browser Hersteller diese Größe als Default ausgewählt haben.

2. Aktiver “White Space”

Lass deinen Text atmen. Die Benutzung von White Space ist kein Steckenpferd von Designern und keine Geschmacksfrage.

“The width of the column must be proportioned to the size of the type. Overlong columns are wearying to the eye and also have an adverse psychological effect. Overshort columns can also be disturbing because they interrupt the flow of reading and put the reader off by obliging the eye to change lines too rapidly.”
Josef Muller-Brockmann, Grid Systems

Luft um den Text zu lassen reduziert den Stress Level und macht es wesentlich einfacher, sich auf die Hauptsache zu konzentrieren. Du musst nicht das ganze Fenster füllen. Dass White Space besser aussieht ist kein Seiteneffekt: Es ist die logische Konsequenz von funktionalem Design. Wer sagt, Webseiten müssen überfüllt sein?

Muller-Brockmann: “The question of the column width is not merely one of design or format; the question of legibility is of equal importance.”

Bitte stell sicher, dass die Linienbreite (line width) nicht zu groß ist und dass Du nach rechts und links Platz lässt damit das Auge es einfacher hat zu springen. Wir wollen weder die Schriftgröße noch die Fenstergröße anpassen. Wenn wir eine Webseite öffnen, wollen wir sie sofort lesen. Spaltenbreiten die skalieren sind nett; Unendliche Textzeilen über die ganze Bildschirmbreite sind es nicht.

Die Grundregel lautet: 10 bis 15 Worte pro Zeile. Für Liquid Layouts mit einer Schriftgröße von 100% ist eine Spaltenbreite von 50% (in Relation zur Fenstergröße) ein guter Mittelwert für die meisten Auflösungen.

3. Leserfreundliche Zeilenhöhe

Das sagen die Spezialisten:

Zeilenhöhen, die zu schmal sind, schaden der Lesegeschwindigkeit weil die obere und untere Zeile vom Auge zur gleichen Zeit erfasst wird. Das Auge kann nicht exklusiv auf eine Zeile fokussieren und der Leser verschwendet Energie an der falschen Stelle und ermüdet schneller. Das gleiche gilt für Zeilen, die zu viel Abstand haben.

Die Default HTML Zeilenhöhe ist zu klein. Erhöhst Du die Zeilenhöhe ist der Text einfacher lesbar. 140% Zeilenhöhe ist ein guter Richtwert.

4. Klarer Farbkontrast

Dies sollte eigentlich selbstverständlich sein, aber wenn Du immer noch glaubst, Du kannst die folgenden Kombinationen verwenden:

1. Hellgrauer Text auf hellergrauem Hintergrund
2. Silberfarbener Text auf einem schneeweißen Hintergrund
3. Grauer Text auf einem gelben Hintergrund
4. Gelber Text auf einem roten Hintergrund
5. Grüner Text auf einem roten Hintergrund und so weiter…

… dann bist du kein Webdesigner sondern nur ein Designer mit einer Attitüde. Wenn du darauf bestehst, ein Webdesigner zu sein, dann musst du dir darüber bewusst sein, dass dies keiner je erfahren wird, weil keiner lesen kann, was du schreibst. Hör auf mit diesem Unsinn und lass uns sehen, was du geschrieben hast. Anmerkung: Für das Screendesign ist ein zu starker Kontrast (z.B. schwarz und weiß) auch nicht ideal, weil der Text anfängt zu flackern. Empfehlung: #333 auf #fff.

5. Kein Text in Bildern

Wir wollen in der Lage sein, Text zu suchen, Text zu kopieren, Text zu speichern, mit dem Mauszeiger zu spielen und Text zu markieren, während wir ihn lesen. Text in Bildern sieht schön aus, aber es geht nicht um schön bei Webdesign. Es geht um Kommunikation und um Information und Information muss lesbar, benutzbar skalierbar, zitierbar und verschickbar sein.

Wenn du deine Webseite nicht gutaussehend machen kannst ohne Text in Bildern zu benutzen, solltes Du noch einmal von vorne anfangen.

Dies ist eine Übersetzung des wunderbaren Artikels “The 100% Easy-2-Read Standard” aus dem Information Architects Blog.

Wie sind Eure Erfahrungen mit der Verwendung von Textgrößen? Was gefällt Euch? Welche Diskussionen hattet Ihr schon mit Kollegen oder Kunden zu dem Thema?

1. Google Positionscheck

Das erste Online Tool Google Position Check bietet die Möglichkeit, für eine Domain und ein bestimmtes Keyword schnell zu prüfen, auf welcher Position bei Google die Domain für das Keyword gelistet ist. Das Tool bietet die Möglichkeit, google.de, .com, .fr, .it, .at, .ch und .co.uk abzufragen. Dabei werden die SERPs bis Position 1000 berücksichtigt.

2. Backlink Analyse

Linkdiagnosis.com bietet einen Dienst an, die Backlinks einer Domain aufzulisten. Zur Nutzung des Dienstes wird ein Firefox AddOn benötigt. Die Oberfläche des Tools ist sehr ausgereift und bietet einen großen Komfort in der Bedienung, vor allen auch bei der Darstellung und Filterung der Ergebnisse. Je nach Anzahl der gefundenen Backlinks kann die Analyse einige Zeit dauern, das Warten lohnt sich aber.

Linkdiagnosis

3. OnPage Faktoren

Das Tool der Wahl um einen Seite für ein bestimmtes Keyword auf Optimierungspotential zu überprüfen heißt SenSEO und ist ein Firefox AddOn, dass ich schon einmal in einem Artikel vorgestellt habe.

4. Überblick über die Verlinkung eine Seite

Das Tools Linkscape von seomoz.com erstellt dem Benutzer einen Überblick über die Verlinkung einer eingegebenen Domain. Interessant ist diese Tool vor allem in der Konkurrenzanalyse, weil ich einen guten Überblick darüber bekommen, wie die Konkurrenz im Vergleich zu meiner Seite verlinkt ist.

Linkscape

5. Keyword Häufigkeit

Mit Google Insights for Search bietet Google die Möglichkeit, für bestimmte Keywords das Suchvolumen über die Zeit abzufragen. Dies kann für einzelne Keywords interessant sein. Für mich ist aber die Möglichkeit wichtig, das Suchvolumen von unterschiedlichen Keywords vergleichen zu können. Interessant ist dies immer dann, wenn es für ein Keyword unterschiedliche Schreibweisen gibt. Als Beispiel seien hier die Keywords “Autoversicherung” und “Auto Versicherung” genannt. Nach welchem Begriff wird häufiger gesucht? Welchen Begriff sollte ich bevorzugt auf meinen Seiten verbauen? Für diese Fragen liefert Google Insights for Search die Antwort.

Google Insights for Search

Welche Online-Tools habt Ihr im Einsatz? Wofür nutzt Ihr diese?

In diesem Artikel stelle ich euch die Tools vor, die mir bei dieser Arbeit helfen.

Mindmaps

Ein Mindmap-Tool gehören für mich zu der Grundausstattung auf einem Rechner. In der Konzeptionsphase dienen mir Mindmaps dazu, Ideen zu sammeln und zu strukturieren. Weiterhin finde ich Mindmaps sehr geeignet dafür, die Webseitenstruktur zu erarbeiten.

Ich setze zur Erstellung von Mindmaps “freemind” ein. Besonders gut gefällt mir, dass ich Seitenzweigen Nummern geben und somit einen Priorität festlegen kann. Weiterhin habe ich mit Mindmaps die Möglichkeit, die Seiten einfach umzustrukturieren. Die Notizfunktion erlaubt mir, Notizen wie z.B. mögliche Inhalte für Seiten, festzuhalten. Freemind kann das Ergebnis in die unterschiedlichsten Formate wie z.B. PDF oder JPG exportieren, so dass ich dem Kunden das Ergebnis zuschicken kann.

Mockups

Mockups dienen dazu, die Elemente einer Seite optisch darstellen zu können. Es geht dabei nicht darum, Farben und Formen festzulegen, sondern zu definieren, welche Elemente auf einer Seite sind.

Mein Tool der Wahl ist hier Balsamiq. Balsamiq ist eine Air-basierte Anwendung die sehr einfach zu bedienen ist und mit der ich in relativ kurzer Zeit gute Ergebnisse erzielen kann. Hier ein Beispiel für ein Mockup mit Balsamiq.

Beispiel Balsamiq Mockup

Das Ergebnis lässt sich z.B. als JPG speichern und kann so an den Kunden gegeben werden.

Planung

Als Schweizer Messer benutze ich in der Konzeptionsphase an vielen Stellen Excel. Excel bietet mir die Möglichkeit tabellarische Informationen strukturiert zu sammeln. Dies können Zeitschienen oder auch andere Planungsinformationen sein.

Viel mehr ist es eigentlich nicht, was bei mir im Einsatz ist. Tools wie Mail oder Word habe ich hier nicht explizit erwähnt, verstehen sich aber von selbst.

Was benutzt Ihr, wenn Ihr eine neue Webseite konzipiert?

Oh nein, nicht noch ein Artikel zu dem Thema GTD. Das ist doch schon soooo alt.

Ich weiß, das Thema Getting Things Done ist ziemlich ausgelutscht. Ich will in diesem Artikel auch nicht das Prinzip noch einmal erklären, sondern eher die Dinge, die für mich gut funktionieren, erläutern.

GTD Arbeitsablauf (René Weber)

Das Tool

Die erste Erkenntnis für mich ist, dass man ein gutes Tool (oder mehrere, wir kommen da gleich noch einmal drauf) für GTD benötigt. Hier solltet Ihr nicht versuchen, am falschen Ende zu sparen. Ich benutze OmniFocus – fast schon der Klassiker (allerdings nur für Mac verfügbar).

Das Tools sollte sehr einfach zu bedienen sein, damit es einen nicht durch schlechte Usability davon abhält, es zu benutzen. OmniFocus hat den Vorteil, dass eine iPhone App verfügbar ist, mit der es möglich ist, Aufgaben jeder Zeit zu erfassen und mit dem Mac zu synchronisieren. So kann ich meine Aufgaben dann erfassen, wenn sie mir gerade einfallen. Ich bin sie also sofort los und muss sie nicht im Gehirn mit mir rumschleppen. Dies ist sehr befreiend, wie Ihr auch im Fazit nachlesen könnt.

Kontexte

Als nächstes ist es wichtig in OmniFocus die für einen selber passenden Kontexte anzulegen. Für mich hat sich dabei vor allem folgendes als praktikabel herausgestellt. Als Oberkategorie für die Kontexte habe ich die grundsätzliche Einteilung in “Firma” und “Privat”. In der nächsten Ebene unter Firma habe ich die unter anderem die für mich wichtigen Kontexte “Meetings und Personen” so wie “Warten auf”. Unterhalb dieser finden sich dann Kontexte der einzelnen Kollegen. Das Ganze sieht dann verkürzt so aus:

• Firma
  • Meetings und Personen
    • EG
    • HH
    • …
  • Warten auf
    • EG
    • HH
    • …

Natürlich habe ich noch ein paar mehr Kontexte um meine eigene Arbeit zu organisieren. Diese sind meiner Meinung nach aber sehr individuell und nicht so einfach auf andere übertragbar. Ein Kontext aus dieser Kategorie ist bei mir “Mac”, also alles, was ich an meinem MacBook mache.

Der Vorteil an dem obigen Verfahren ist es, dass ich jeder Zeit sehen kann, was ich mit wem noch besprechen muss. Dies ist sehr praktisch, wenn ich mich kurz mit einem Kollegen hinsetzen will, um anstehende Dinge zu besprechen. Damit fällt das lästige “Da war noch irgendwas, dass ich sagen wollte” weg.

Die zweite Kategorie “Warten auf” kann ein Lebensretter sein. Wie oft habe ich früher gedacht “Das habe ich abgegeben, da muss ich mich nicht mehr drum kümmern”. Damit waren viele Aufgaben einfach nicht mehr auf meinem Radar. Durch GTD habe ich gelernt, dass es immer noch mein Ding ist, auch wenn gerade wer anders daran arbeitet. Nicht, dass meine Kollegen schlecht arbeiten würden, aber auch sie vergessen halt mal was. Durch den Kontext “Warten auf” kann ich nun regelmäßig nachschauen, wer mir denn noch etwas zuliefern soll, damit ich meine Aufgabe erledigen kann.

Projekte

Quer zu den Kontexten stehen Projekte. Diese sind eine andere Sicht auf meine Aufgaben. Ich sehe mit Hilfe von Projekten, welche Aufgaben in einem bestimmten Projekt zu erledigen sind. Ich nutze diese Ansicht in der Praxis recht selten. Warum weiß ich auch nicht so genau, anscheinend komme ich gut ohne aus.

Next Action

Die nächste wichtige Erkenntnis für mich war, dass Aufgaben so zergliedert werden sollen, dass eine eindeutige nächste Aktion formuliert wird (“Next Action”). Diese nächste Aktion muss so beschaffen sein, dass sie auch ausführbar ist. Das klingt plausibel, ich habe es aber früher selten so gemacht. Ein Beispiel dazu:

Ich bereite ein Meeting für einen Kunden vor. Früher hätte eine Aufgabe genau so ausgesehen “Meeting für Kunden XY vorbereiten”. Dies ist viel zu ungenau und schafft unbewusst (oder bewusst) ein Gefühl der Unbehaglichkeit – und zwar jedes Mal, wenn ich diese Aufgabe vor mir habe.

Warum? Nun, weil ich jedes mal im Kopf überlege, was dafür zu tun ist. Tritt dieses Gefühl auf, kann es sein, dass ich diese Aufgabe gar nicht erst angehe. Ich drücke mich darum, weil es zu unkonkret ist. Eine konkrete nächste Aktion würde bei mir hier lauten “Kunde XY zum Meeting einladen”. Sehe ich so eine Aufgabe, kann ich sie sofort abarbeiten. Ich rufe den Kunden an, vereinbare einen Termin und trage diesen in den Kalender ein. Es ergibt sich daraus fasst zwangsläufig die nächste Aufgabe, die zu einer neuen “Next Action” wird, z.B. “Raum buchen”. Seit dem ich versuche, Aufgaben nach diesem Prinzip zu formulieren, fällt es mir deutlich einfachen, Aufgaben abzuarbeiten.

Abarbeiten

Eine weitere für mich wichtig Säule von GTD ist das Thema “Abarbeiten”. Hierunter verstehe ich den Prozess, die anstehenden “Nächsten Aktionen” regelmäßig durchzugehen und zu erledigen. Dies hilft, Aufgaben zeitgerecht abzuarbeiten. In der Regel schaue ich jeden Morgen und jeden Abend die nächsten Aktionen durch. Manchmal auch öfter.

Kalender

Ein weiteres wichtiges Tool ist für mich der Kalender geworden. Hier trage ich mittlerweile nicht nur Meetings ein, sondern auch Dinge, die ich bis zu einem bestimmten Zeitpunkt erledigen muss. Dabei nutze ich die Möglichkeit, Einträge in meinen Kalender machen zu können, die nicht an eine bestimme Uhrzeit gebunden sind, sondern über den Tag hinweg erledigt werden können. Dabei ist mir bewusst, dass es Dinge gibt, die ich an dem geplanten Tag nicht machen kann, weil etwas anderes dazwischen kommt. Die Zuordnung von Aufgaben zu Tagen hilft mir trotzdem sehr, die Arbeit zu organisieren und im Überblick zu behalten.

Auch für den Kalender gilt: regelmäßiges Durchschauen. Ich schaue jeden Morgen in den Kalender, um zu sehen, was an dem Tag anliegt. Weiterhin schaue ich jeden Abend in den Kalender um zu sehen, was ich nicht geschafft habe. Dieses verschiebe ich entsprechend auf die nächsten Tage (so weit es denn geht…). Abends schaue ich dann auch noch, was am nächsten Tag anliegt. Freitags abends schaue ich noch einmal die ganze vergangene Woche durch. Wenn ich etwas nicht geschafft habe, verschiebe ich es auch die nächste Woche. Ebenso schaue ich auf die nächste Woche, um einen Überblick darüber zu haben, was anliegt.

Fazit

Vor mehr als eineinhalb Jahren habe ich angefangen, mich mit dem Thema GTD zu beschäftigen. Ich habe viel ausprobiert (Tools, Kontexte, Verfahren, etc) und bin mit meiner jetzigen Organisation sehr zufrieden. Ich bin mir bewusst, dass ich an einigen Stellen “Abkürzungen” wähle und nicht die reine Lehre von GTD anwende, das ist mir aber egal. Eventuell kann ich an der einen oder anderen Stelle noch etwas verbessern, aber so wie ich es mir eingerichtet habe, funktioniert es für mich.

Insgesamt ist es einfach ein befreiendes Gefühl, wenn man nicht mehr mit dem Gedanken “Da war doch noch was, das ich machen sollte” durch die Gegend läuft und damit nicht abschalten kann. Ich kann Euch versichern, dass das aus dieser Ungewissheit automatisch entstehende Gefühl tatsächlich nach einiger Zeit verschwindet, weil man weiß, dass alle Aufgaben in einem sicheren System auf einen warten.

Wie sind Eure Erfahrungen? Was macht Ihr anders? Benutzt Ihr überhaupt GTD oder etwas ähnliches zur Selbstorganisation?