• Home
• Blog
• Typografie

10 August, 2022

 Hallo und HerzlichWillk ommen bei der Usability AcaDemy! I c H bi n Vanessa und werde e u ch heute etwas üBer die TYpo grafie erzählen.

Du hattest Probleme dabei den Text zu lesen? Keine Sorge da bist du nicht die einzige Person. Das hängt damit zusammen, dass die Schrift die Augen ziemlich überanstrengt und die Abstände zwischendurch viel zu groß sind. Also im groben lässt sich sagen, die Typografie hat im hohen Bogen versagt. Doch was ist eigentlich Typografie? Darauf gehe ich noch etwas genauer ein.

Was ist Typografie?

„Typografie ist die Kunst, richtige Abstände und Proportionen für Texte zu finden.Vornehmlich Ziel der Typografie ist dabei eine lesefreundliche Textgestaltung zu finden.“

-C.D. Khazaeli, Crashkurs Typo und Layout (2005), S. 70

Sehr interessant, aber was bedeutet das übersetzt? Einfach gesagt, Typografie ist das Erscheinungsbild von Text. Die eine Aufgabe der Typografie ist es die Lesbarkeit eines Textes zu erhöhen, damit der Inhalt verständlich rüberkommt und die andere, die Botschaft des Textes zu untermalen. Dies kann durch gut durchdachte Proportionen, Schriftarten, Schriftgrößen und Farben für den Text erreicht werden. Wichtig hierbei ist noch zwischen Mikro -und Makrotypografie zu unterscheiden.

Was ist der Unterschied zwischen Mikrotypografie und Makrotypografie?

Mikrotypografie

Mikrotypografie oder auch Detailtypografie genannt, befasst sich mit den Feinheiten des Schriftsatzes eines Layouts. Somit ist diese für die Optik und die Lesbarkeit zuständig. Zu Mikrotypografie gehören folgende Aspekte, wie die Laufweite, diese beschreibt den Abstand zwischen einzelnen Buchstaben. Des Weiteren sind die Spationierung, der horizontale Abstand zwischen einzelnen Zeichen, und die Ligaturen, Verbindung zweier oder mehrerer Buchstaben zu einem einzigen, ein Bestandteil. Genauso gehören die Wortabstände, Schriftarten und richtige Zeichensetzung dazu.

Makrotypografie

Die Makrotypografie beschäftigt sich mit dem Layout der Druck- oder Webseite. Hier werden unter anderem das Seitenformat, der Satzspiegel, aber auch Schriftgröße, Zeilenabstand oder die Verwendung und Platzierung von grafischen Elementen bestimmt. Wichtig hierbei ist es das Verhältnis zwischen bedruckter und unbedruckter Fläche zu beachten, damit es nicht zu überladen wirkt.

Wie beeinflusst sie uns im Alltag? Wie wirken Schriften auf uns?

Typografie begegnet uns überall im Alltag. Die Müsliverpackung verrät uns ihren Inhalt, das Ausgangsschild wo es rausgeht und das Straßenschild wo es hingeht. All das nehmen wir unbewusst aus unserer Umgebung wahr und beeinflusst uns. Egal ob es die Wahl der Schriftart, der Satz der Buchstaben oder die Verwendung von Satzzeichen ist. Dabei kommen wir auch auf die User Experience zu sprechen. Den Begriff kennen wir bereits aus dem Artikel „Usability und User Experience: Was ist der Unterschied?“. Wenn uns ein Logo oder Schriftzug eines Kalenders nicht anspricht, werden wir ihn nicht kaufen, vielleicht verbinden wir auch unterbewusst etwas mit genau dieser Schriftart, dass wir nicht mögen. Deshalb kann das Gestaltungsmittel Schrift nicht nicht auf uns wirken.

Typografie, Kalligrafie, Lettering – Was ist der Unterschied?

Da ich im oberen Teil bereits Typografie erklärt habe, werde ich hier nur noch kurz auf die anderen beiden Arten eingehen.

Lettering

Kurz gesagt ist Lettering die Kunst, Buchstaben und Schriftzügen zu zeichnen. Hierbei steht die Gestaltung von Wörtern, Buchstaben oder Sätze im Vordergrund. Dabei sind keine Grenzen gesetzt, ob verschiedene Schriftstile, verschiedene Formen, Verschnörkelungen oder Groß- und Kleinbuchstaben.

Kalligrafie

Kalligrafie ist die hohe Kunst der Schönschrift. Dabei übt man so lange einzelne Buchstaben zu schreiben und auf die Linienführung zu achten, bis man sie perfekt ausüben kann.

Typografie im Web – worauf du achten solltest

Die Typografie im Web hat sich sehr weiterentwickelt. Wir können endlich Webfonts (lizenz- bzw. kostenfrei und kostenpflichtige Schriftarten) verwenden und müssen nicht mehr die Standardschriftarten wie Verdana, Tahoma oder Arial. Dennoch müssen wir bei der Auswahl einiges beachten, wie zum Beispiel die verschiedenen Endgeräte. Somit sollte die Typografie auf Smartphones, Tablets oder Monitoren gut lesbar sein. Wie du dies erreichen kannst, erzähle ich dir.

Wähle immer eine gut lesbare Schrift! Dabei musst du dich nicht immer nach deinem Corporate Design richten, da manche Schriften nicht im Web funktionieren, wie sie es im Print tun würden. Schriften mit starken Serifen funktionieren dafür gut. Für Headlines kannst du auch speziellere Schriftarten wählen, aber dennoch auf die Lesbarkeit achten und bei Fließtexten solltest du hauptsächlich auf die Lesbarkeit achten.

Definiere für dich selbst H1-Hx und den Fließtext! Dabei solltest du festlegen wie die Schriftart & -schnitt; Schriftgröße; Zeilenabstand, bzw. Line Hight und Frabe sein sollte. H1 (größte Überschrift) sollte nur einmal gesetzt werden, wegen der SEO.

Achte auf eine visuelle Hierarchie! Setze deutliche Absätze zwischen verschiedenen Elementen, zum Beispiel durch Zwischenüberschriften, damit der Leser nicht von Informationen überflutet wird.

Verzichte auf manuelle Umbrüche! Denn im Web werden Wörter nicht automatisch getrennt, somit entstehen durch manuelle sehr unschöne und mehrere Umbrüche hintereinander.

Ich hoffe, ich konnte euch einen kleinen Überblick über die Typografie verschaffen und ihr könnt die kleinen Tipps für eure Webseite umsetzen.

Trainer

10 August, 2022

Viele von uns haben sich bestimmt schon einmal die Frage gestellt: Ist ein Prototyp wirklich notwendig? Man plant doch schon lang genug, wozu sollte jetzt auch noch ein Prototyp erstellt werden, der nicht nur Zeit frisst sondern auch Geld?

Ein Prorotyp beschreibt ein Modell, welches der erste Entwurf eines zukünftigen Produkts ist. Mit diesem Modell lassen sich Arbeitsabläufe, die Wirkung oder die Wahrnehmung testen, ohne das fertige Produkt schon zu haben. Nach einem solchen Test wird das Produkt verbessert, solange bis es allen Anforderungen entspricht. Ist das der Fall, so wird das Produkt auf den Markt gebracht.

Um den Ablauf wie ein Prototyp erstellt wird besser zu verstehen, schauen wir uns ein Beispiel an:

Luigi ist stolzer Besitzer einer Pizzeria. Durch die Covid-19-Pandemie und die daraus resultierenden Lockdowns, sind ihm einige Einnahmen ausgeblieben und er hat sich überlegt, wie er diese wieder einnehmen kann. Sein Sohn hatte eine Idee: Luigi sollte nicht nur Anrufbestellungen annehmen, sondern auch Online-Bestellungen annehmen. Da Luigi aber keine eigene App hat und auch nicht programmieren kann, kommt er auf uns (Die UX-Designer seines Vertrauens) zu.

Nachdem einige Interviews mit möglichen Benutzern geführt wurden und herausgefunden wurde was die Benutzer brauchen um ihr Ziel (Pizza bestellen, um satt zu werden) erreichen zu können, kommen wir an den Punkt an, an welchem wir mit einem ersten Entwurf von Luigis Pizza-App beginnen können: dem Low-Fidelity-Prototyp (kurz: Lo-Fi; deutsch: gering detailgetreu).

Low-Fidelity-Prototyp

Ein Low-Fidelity-Prototyp ist ein Prototyp, welcher sich weniger mit dem Design beschäftigt und eher darauf abzielt, die Funktionalität eines interaktiven Systems (z.B. eine App) zu zeigen. Meist zeigen Low-Fidelity-Prototypen einen groben Überblick des Layouts. Dabei werden Bilder meist mit einem Platzhalter dargestellt (z.B. ein Rechteck mit einem „X“ in der Mitte) und Texte mit Blindtext oder mit Linien dargestellt. Ein großer Vorteil solcher Prototypen ist, dass sie schnell erstellt und günstig sind. Low Fidelity-Prototypen können auch grob per Hand auf ein Blatt Papier gemalt werden. Diese lassen sich ebenfalls schnell von Kollegen/Freunden/Kunden testen und innerhalb von wenigen Augenblicken aktualisieren. Eine einzelne Seite eines Low-Fidelity-Prototypen nennt man Wireframe.

Wireframe

Die ersten Entwürfe zum Layout und den Funktionen wurden gemacht. Luigi hat allerdings einige Änderungsvorschläge. Er will seine Funktionen anders aufgeteilt haben und eine andere Anordnung der Bilder. Da der Low-Fidelity-Prototyp so simpel aufgebaut ist, können diese Änderungen innerhalb von 5 Minuten umgesetzt werden. Das erste Konzept steht und der nächste Schritt wird sein einen etwas detailgetreueren Prototypen zu bauen, den High-Fidelity-Prototypen (kurz: Hi-Fi; deutsch: hohe detailgetreue).

High-Fidelity-Prototyp

High-Fidelity-Prototypen zeigen meist eine ziemlich detailgetreue Abbildung eines zukünftigen Produkts (z.B. eine Website). Hierbei spielt das Design eine wichtige Rolle, um Kollegen, Kunden oder anderen Interessenvertretern zu zeigen, wie genau das zukünftige Produkt aussehen soll. Vorteil hierbei ist, dass ohne Programmiererfahrung mithilfe eines Prototyping-Tools (z.B. Figma) Interaktionen eingebaut werden können und somit anderen die Funktionen der Benutzungsschnittstellen (z.B. ein Knopf auf dem „jetzt bestellen“ steht) präsentiert werden können. Auch Entwicklern kann man so seine Ideen und was umzusetzen ist, besser mitteilen.

Der High-Fidelity-Prototyp wurde nun erstellt und Luigi präsentiert. Er findet ihn gut, ist sich aber noch nicht sicher, ob seine neue App gut bei den Kunden ankommt und ob die App nutzerfreundlich ist. Der Prototyp muss somit erst noch evaluiert werden.

Eine (Usability-)Evaluation ist ein Test bei welchem Produkte oder Prototypen von zukünftigen Produkten auf Nutzerfreundlchkeit und Gebrauchstauglichkeit untersucht werden. Fehler, welche während eines solchen Tests gefunden werden, werden anschließend behoben oder verbessert.

Der High-Fidelity-Prototyp wird getestet und es stellt sich heraus dass das wichtigste vergessen wurde: die Bezahlmöglichkeit für den Kunden. Dieser Fehler wird behoben indem schnell und einfach eine neue Seite im (Hi-Fi-)Prototypen erstellt wird und die fehlende Funktion hinzugefügt wird. Es sind keine Entwickler notwendig für diesen Schritt, da Prototyping-Programme intuitiv und simpel aufgebaut sind. Nachdem beheben aller gefundener Fehler, welche relevant scheinen wird die App an die Entwickler weitergegeben und programmiert.

Luigi ist sehr glücklich mit seiner neuen App und hat sogar schon einige neue Kunden dadurch dazugewonnen.

Um die Frage zu beantworten, ob ein Prototyp immer notwendig ist: ja ist er.

Prototypen helfen beim Testen und Verbessern von Produkten. Ohne diese, müsste für jeden neuen Versuch eines funktionierenden Produkts ein neues gebaut oder programmiert werden, was auf Dauer nicht nur viel mehr Zeit, sondern auch viel mehr Geld fressen würde.

Trainer