Werkzeugkoffer

Den Anfang macht der Werkzeugkoffer von Matthias Schütz. Matthias hat auf sehr ansprechende Weise Links zu den Themen

• Inspirationen
• Farben
• Typografie
• Grafik und Design
• Stock Photos
• Programmierung
• CSS
• Webbrowser und Benchmarks
• Firefox-Erweiterungen
• Cross-Browser-Testing
• Schriftarten im Web
• JavaScript-Frameworks
• JavaScript-Werkzeuge
• Bookmarklets
• Lightboxes
• PHP-Entwicklung
• CMS
• Analyse und Validierung
• FTP-Software
• so wie Statistik und Trends

zusammen getragen. Da sollte für jeden von Euch was dabei sein.

Der zweite Tipp ist für diejenigen unter Euch, die etwas mit Texten zu tun haben.

Wordweb

Auf der Seite wordweb.ch findet Ihr 10 Tools für Texter. Die Palette reicht von Slogan Geeneratoren bis zu Redensarten und Zitaten-Findern.

Habt Ihr noch einen Tipp? Hinterlasst einen Kommentar!

Auf dem Play-Knopf ist ein kleiner Pfeil nach oben. Fährt man mit der Maus über diesen Pfeil, erscheint ein Symbol, das total selbsterklärend ist. Ein super Beispiel für ein sehr gutes GUI-Design, wie ich finde.

Youtube GUI: schneller/langsamer

Super, oder?

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?

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?

Der Benutzer klickt auf einer Webseite auf einen Link und füllt ein Formular aus, um einem Freund eine Seite zu empfehlen. Darauf hin erhält der Freund eine E-Mail mit einem vorgefertigten Text und dem Link zu der Webseite, die empfohlen wurde.

Doch macht das in einer Welt von Social Web, Twitter und Facebook noch Sinn? Ich denke mittlerweile hat sich das total überholt. Der Link oder das Icon für diese Funktion nimmt nur Platz weg und kann viel besser durch ein Icon “Twitter” oder “Facebook” ersetzt werden.

Wie ist Eure Meinung?

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

Das Ganze ist dabei sehr nett verpackt und gut anzuhören.

In meinen Augen ein echter Tipp.