6. Differenz zwischen Design und Realität

Egal welche Vorgehensweise wir nutzen, wir sollten immer im Blick behalten, dass der Designer nur einen idealisierten Zustand entwirft. Gerne nutzen Designer einfache, kurze Überschriften oder Navigationseinträge, damit die Optik kompakter, angenehmer wirkt. Genauso enden auch nebeneinander stehende Container gerne auf der gleichen Höhe. Das tun sie auch dann, wenn sie nicht im gleichen semantischen Kontext platziert sind.

Der Entwurf des Designers ist ein nach optischen Gesichtspunkten erstellter Zustand. Er sollte uns für die Realisierung nicht unnötig irritieren. Deshalb plädiere ich dafür, sehr frühzeitig im Entwicklungsprozess mit möglichst realistischen Inhalten zu arbeiten.

Vor Jahren arbeitete ich mit einem Freund und Kollegen am Relaunch eines inhaltsstarken Verlagsangebotes. Dabei wurde auch ein Kommentarwidget entworfen, das aus einem externen Tool gespeist werden sollte. Dummydaten hatten wir keine, deshalb sah der erste Entwurf folgendermassen aus:

Die verlinkten Kommentarauszüge sind recht knapp gehalten, deshalb ist das ganze Modul nicht besonders hoch. In der Liveseite wurden die Kommentarauszüge umfangreicher, die Namen länger und dadurch das ganze Modul größer.

Da die zusätzlichen Inhalte vertikalen Raum einnahmen, entstand daraus kein Designproblem. Schlimm wäre es gewesen, wenn sich diese Diskrepanz zwischen Planung und Realität auf ein horizontal ausgerichtetes Designelement ausgewirkt hätte, wie beispielsweise die horizontale Navigation oder die Breadcrumb.

Realistische Dummy-Inhalte nutzen

Der Wert eines Designs oder eines Moduls wächst mit der Verwendung realistischen Inhalts. Kann der Kunde noch keine fertigen Texte liefern, so können Sie entweder auf die alten Inhalte oder zumindest auf passenden Blindtext zurückgreifen. Bei deutschsprachigen Websites sollten Sie dementsprechend immer deutschen Blindtext nutzen. Und speziell in horizontalen Navigationen sollten die Linknamen nicht zu kurz sein. Es ist ein entscheidender Unterschied, ob man eine horizontale Navigation nur mit “Item 1”, “Item 2” usw. füllt oder ob man realistische Linktexte nimmt. Die deutsche Sprache hat viele lange Worte und bei horizontalen Navigationen ist der Platz limitiert. Deshalb empfehle ich immer, “Arbeiterstrandbadstraße” in eine Navigation einzufügen. Der Name einer Wiener Haltestelle ist ein prima Beispiel für einen komplexen, langen Navigationseintrag. “Wirtschaft & Soziales” oder “Schule & Hochschule” sind ähnlich praktisch. Lange Linktexte lassen möglicherweise Probleme in einer horizontalen Navigation erscheinen, die auf den ersten Blick verborgen gewesen sind.

Kann der Kunde nicht frühzeitig Inhalte liefern, sollte er zumindest eine vorläufige Inhaltsstruktur und damit auch Navigationspunkte kommunizieren. Sie sollten möglichst früh mit realistischen Inhalten arbeiten. Dummy-Inhalte erscheinen möglicherweise als eine Nebensächlichkeit, sind sie aber nicht. Bindet man an Stelle der zuerst genutzten grauen Bildattrappen später aussagekräftige Bilder ein, ergeben deren Farben mit dem Design der Seite einen vollkommen neuen Eindruck. Es gibt im Internet zahllose Dienste für Platzhalterbilder mit echten Motiven, anstelle einfacher grauer Platzhalter mit Dimensionsangaben.

Auch bei Blindtext kann man eine Menge falsch machen. Das beliebte “Lorem ipsum” ist nur angebracht, wenn man eine Seite für einen Lateinkurs erstellen möchte. Für deutschsprachige Seiten ist es ungeeignet, denn Deutsch hat viel längere Worte, mehr Unterlängen und vor allem Umlaute. Insgesamt ergibt sich ein komplett anderes Schriftbild. Das ist durchaus von Bedeutung. Denn oft haben wir es bei Layouts mit kleinräumigen Boxen zu tun. In diese passen oft kaum zwei lange Worte. Auch Überschriften können schnell zweizeilig werden. Ist dann der Raum für die Überschrift auch noch in der Höhe limitiert, hat der Nutzer das Nachsehen.

Quellen für realistische Dummy-Inhalte

Die größte Auswahl an unterschiedlichen Platzhalterbildern bietet sicherlich lorempixel. Deren Bilder bindet man schlicht durch einen direkten Link mit den gewünschten Dimensionen des Bildes ein. Man kann sich dabei komplett ein zufälliges Bild liefern lassen, es aber auch thematisch eingrenzen. Für Blindtexte empfehle ich den Blindtextgenerator. Er bietet eine große inhaltliche Bandbreite, man kann die Wörter oder Zeichen beschränken, die Anzahl der Absätze wählen und auch gleich HTML mit ausgeben lassen. Zudem liegen die Texte in vielen Sprachen vor.

Solange man keine vom Kunden gelieferten Testdaten hat, können Bilder und ein paar Texte noch immer zu wenig sein. Es gibt noch mehr Platzhalter-Inhalte. Unter GenerateData.com kann man sich Testinhalte als Tabelle, CSV-Datei, Excel, JSON, XML oder SQL ausgeben lassen. Die Anwendung ist dafür gedacht, falsche Personenprofile zu erschaffen. Möchte man dann ein Nutzerprofil erstellen und ein Profilbild fehlt, kann man sich bei UIFaces bedienen. Richtig komplexe Nutzerprofile kann man sich vom FakeNameGenerator erstellen lassen. Möchte man all diese Aufgaben an ein PHP-Skript übertragen, so gibt es auch dieses. Eine weitere interessante Seite ist Lists. Dort findet man sehr viele Listen mit sehr unterschiedlichen Inhalten. Diese kann man im JSON-Format herunterladen.

Das Ergebnis sollen halbwegs realistische Inhalte sein. Sie sind unsere Kontrolle, ob das Layout nicht nur in der Theorie, sondern auch in der Praxis funktioniert.