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?

Nichts ist in der Vorangebotsphase (und natürlich auch im Projekt) wichtiger, als den Kunden und sein Anliegen zu verstehen.

Dieser einfache und einleuchtende Satz und dessen Aussage kann trotzdem schwierig in der Praxis umzusetzen sein – mit schlimmen Folgen.

Es ist unheimlich wichtig, in einem Vorangebotsgespräch möglichst lange in der so genannten Informationsphase zu bleiben. Dies ermöglicht es mir, den Kunden und dessen Ziele für ein Projekt wirklich zu verstehen. In der Praxis tendiert man eher dazu möglichst schnell über Features, Funktionen oder Referenzen sprechen zu wollen, da dies in der Regel viel konkretere Themen sind. Doch verstehe ich den Kunden und dessen Bedürfnisse nicht, so kann ich ihn auch nicht richtig beraten. Im schlimmsten Fall erzähle ich im etwas über Funktionen, die er gar nicht braucht und rede nicht über das, was er eigentlich möchte.

Dazu folgendes Beispiel aus einem Rollenspiel:

Zielstellung war es, einem Kunden eine Reise zu verkaufen. Die Aussage war, dass der Kunde jede Reise nehmen wird, wenn ich sie ihm nur gut verkaufe. Ich hatte 10 Minuten Zeit, mir ein Reiseziel auszudenken und Argumente zu überlegen, warum der Kunde diese Reise buchen sollte.

In dem Gespräch habe ich alle Register gezogen und alles aufgezählt, was mit so eingefallen ist. Toller Pool, super Essen, Wellness-Bereich, klasse Zimmer, tolles Rahmenprogramm, günstiger Preis. Alles was einem halt so einfällt. Aber der Kunde wollte einfach nicht buchen.

Was ist da falsch gelaufen? Ich habe den Fehler gemacht, zu schnell aus der Informationsphase heraus zu gehen. Ich habe den Kunden nicht verstanden. Ich kannte seine Bedürfnisse nicht. Es stellte sich nämlich heraus, dass der Kunde mit einem behinderten Kind reist und es für ihn am wichtigsten ist, dass das Hotel behindertengerecht ist.

Erhellend, oder? Und genau so kann es mit einem potentiellen Kunden in einem Webprojekt gehen.

Wie kann ich länger in der Informationsphase bleiben?

Als erstes ist es wichtig, sich bewusst zu machen, dass es diese Phase überhaupt gibt. Dann solltet Ihr versuchen, mit Fragen den Kunden aktiv zu “löchern”. Geeignet für mich ist hier die Frage “Was noch”. “Was für Funktionen benötigen Sie noch?”, zum Beispiel. Kommt auf diese Frage ein “Nein, das wäre alles”, ist die Wahrscheinlichkeit hoch, dass alle Informationen für das Projekt angesprochen wurden.

Kennt Ihr so eine Situation? Wie geht Ihr damit um?

Der Kunde muss nicht schlecht sein, wenn er eines dieser Kriterien erfüllt, ihr solltet aber aufmerksam werden.

Die Kriterien lauten:

• Er hat eine “Machen Sie es schnell” Haltung und einen unrealistischen Zeitplan
• Er möchte den Prozess abkürzen und denkt, eine Zielgruppenanalyse oder eine allgemeine Strategie für die Webseite ist nicht nötig
• Er hat keine genaue Vorstellung von dem Content, möchte aber, dass er “cool” aussieht
• Er möchte eine Demo-Webseite und sagt “der echte Seite kommt schon später”
• Er kann keine finale Zustimmung zu etwas geben oder stellt keinen Kontakt zum Entscheider her
• Er hat keine Zeit, sich mit den grundsätzlichen Fragen des Projekts zu beschäftigen
• Er meldet sich nicht auf Rückfragen von dir
• Er wechselt oft seine Meinung und kann sein Feedback nicht formulieren
• Er möchte den kreativen Prozess und oder den Produktionsprozess selber erledigen um “Geld zu sparen”

Kommt Dir davon was aus der Praxis bekannt vor?

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.

In der Regel notiere ich mir am Tag ziemlich viel, und das immer noch auf Papier. Ich habe  zwischendurch versucht, alles auf meinem Rechner zu notieren, aber den habe ich einfach nicht immer dabei (obwohl es ein Laptop ist) und ich kann auch nicht so schnell tippen, wie ich mit der Hand schreiben kann.

Eine Zeit lang habe ich auf normalem losen Papier meine Notizen gemacht und diese später pro Projekt in Klarsichthüllen gepackt. Der Nachteil dieser losen Zettel ist, dass ich die, die ich gerade gebracht hätte, nicht dabei hatte und dass sie einfach unsortiert in den Klarsichthüllen rumliegen.

Ich bin dann irgendwann dazu übergegangen, alles in einfachen karierten Ringblöcken zu notieren. Dies hat den Vorteil, dass der Block immer bei mir ist und alles chronologisch drin steht.

Ich schreibe mir immer groß an den Rand das aktuelle Datum und das aktuelle Thema, so dass ich recht schnell alte Notizen wiederfinden kann.

Ganz optimal ist das System noch nicht. Ich wünsche mit immer wieder ein “cmd” “f” um in dem Block suchen zu können. Ich hatte schon einmal geschaut, was es an elektronischen Lösungen gibt, bin davon aber auch nicht überzeugt.

Insgesamt ist die Lösung mit dem Ringblock für mich die, die am besten funktioniert.

Wie organisiert Ihr Eure Zettel? Benutzt Ihr etwas elektronisches? Wenn ja, was? Oder habt Ihr auch einen Notizblock? Wie durchsucht Ihr den? Welche Tricks und Kniffe gibt es, ein Information in einem Block gut wiederzufinden?

1. Keine genauen Spezifikationen

Ein wichtiger Faktor für den Erfolg eines Projektes sind genaue Spezifikationen. In der Regel sollte schon zum Zeitpunkt der Angebotserstellung klar sein, was hinten rauskommen soll. Die Spezifikationen beschreiben, was im Rahmen des Projekts gemacht wird und vor allem auch was nicht gemacht wird. Die Spezifikationen müssen nicht in einem 100 Seiten Pflichtenheft niedergeschrieben werden. Es geht auch kürzer, z.B. mit einer einfachen Beschreibung oder Stichwortliste. Alternativ dazu kann ein Mockup der Funktionen (z.B. mit Balsamiq) helfen.

Der Umfang des Dokument hängt zum Einen von der Größe des Projektes und zum Anderen vom Kunden ab. Ist auf Kundenseite ein Ansprechpartner mit entsprechender Erfahrung in Webprojekten vorhanden, oder besteht schon eine längere Beziehung zu dem Kunden, kann oft eine längere Beschreibung der einzelnen Funktionen entfallen.

Kein Projekt ohne Spezifikationen.

2. Keine Definition des Zeitrahmens

Eigentlich ist dies eine Selbstverständlichkeit. Trotzdem kann es einem immer wieder passieren, dass zwar z.B. der Gegenstand des Projekts klar umrissen ist, aber keine Festlegungen bezüglich der zeitlichen Umsetzung des Projektes gemacht wurden. Daher kann ich nur den Tipp geben, schon in der Angebotsphase, aber spätestens zu Projektbeginn den Termin für den GoLive mit dem Kunden zu besprechen. Für mich gilt dabei, dass wir mit unserer Aufgabe deutlich vor dem GoLive fertig sein müssen, damit noch genug Zeit für Tests, Bugfixes so wie Content Pflege übrig ist.

Kein Projekt ohne zeitliche Planung.

3. Keine festen Ansprechpartner

Schlimm wird es, wenn einer der Projektpartner keinen festen Ansprechpartner benennen will oder kann. Gerade in heißen Phasen des Projekts (in der Regel der Projektanfang und das -ende) benötige ich beim Kunden eine Person, die auf Kundenseite Anfragen annimmt und weiterleitet so wie Entscheidungen herbeiführt. Das Gleiche gilt natürlich auch für den Kunden. Dieser bekommt von uns einen festen Ansprechpartner für das Projekt genannt.

Kein Projekt ohne vorher festgelegte Ansprechpartner.

4. Keine “mit einer Stimme reden” auf Kundenseite

Ich muss mir sicher sein können, dass der Gegenstand des Projektes von allen Entscheidern auf Kundenseite verstanden wurde und von allen auch getragen wird. Nichts ist schlimmer als eine Abteilung beim Kunden, die vor der Projektvergabe nicht gefragt wurde und versucht, ein laufendes Projekt zu torpedieren. Existiert so eine Gegenströmung bedarf es viel Energie, das Projekt dennoch erfolgreich zu gestalten.

Einigkeit über den Projektgegenstand auf Kundenseite.

5. Keine Ressourcenplanung

Der letzte kritische Punkt kann dramatische Folgen für den Projektverlauf haben. Je nach Größe des Projektes wird dies auf unserer Seite von einem Team von mehreren Mitarbeitern durchgeführt. Um den geplanten GoLive Termin einhalten zu können ist es wichtig, die Kollegen, die in dem Projekt arbeiten sollen, auch zur Verfügung zu haben. Daher gehört eine Ressourcenplanung (auch wenn ich das Wort überhaupt nicht mag) zu einem Projekt dazu.

Kein Projekt ohne Ressourcenplanung.

Was für Erfahrungen haben Ihr gemacht? Welche Fehler haben bei Euch zu einem schwierigen Projektverlauf geführt?

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?

• Kaffee holen :)
• Kalender ansehen: Was steht heute an?
• OmniFocus ansehen: Welche Next Actions stehen drin?
• Netvibes öffnen: Was ist so los?

Wie sieht Euer Start in den Tag aus?