Wie viele Zeichen sind 65? Eigene Illustration

Wie lang darf eine Zeile sein? Beispiel AWS-Blog

Die Länge einer Zeile entscheidet mit über den Leseerfolg. Vor allem, wenn die Zeile zu lang wird, wird es für den Leser schwierig, den Inhalt einfach und vollständig zu erfassen. (Auch wenn das eh eine Wunschvorstellung ist.) Designer wissen das.

Too wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text. (https://baymard.com/blog/line-length-readability)

In der Typographie gelten Werte zwischen 60 und 75 Zeichen pro Zeile als gut lesbar. Einige empfinden auch 50 Zeichen als annehmbar. Zu schmale Zeilen erhöhen den Aufwand für die Augen ebenfalls, das sollte auch vermieden werden.

(Wird es nicht immer: Ich sehe euch an, Bild-Top-Flop-Ranking und Wired-Magazin.)

In die andere Richtung, also bei längeren Zeilen, gilt ein Wert um 100-105 als das Maximum: https://www.viget.com/articles/the-line-length-misconception

In einem gänzlich designerfernen Bereich, nämlich in der technischen Dokumentation von Neuerungen bei Amazon Web Services, finden sich die längen Textzeilen, die ich in jüngster Zeit gesehen habe. Um sie zu einfach messen, habe ich mir sogar eine Chrome Extension installiert, mit der man Zeichen in einer Markierung schnell zählen lassen kann. Den Namen und den Link verrate ich hier nicht, davon gibt es viele – die eine, die ich hatte, hat mir nicht besonders gut gefallen.

Und? Tipps gefällig?

Ich verrate es: 185 Zeichen hat eine solche Monsterzeile. Für mich ist das  unlesbar. Mein erster Klick geht dann entweder zurück in den Feedreader, oder auf den Mercury Reader von Postlight, einen Nachfolger von Readability.

(Beim Programmieren sind mehr Zeichen je nach Umfeld hilfreich, aber auch da gibt es Diskussionen über die ideale Zeichenzahl: https://news.ycombinator.com/item?id=7289967)

Das ist natürlich alles am Desktop, wo ich aber glaube, dass der Inhalt von vielen gelesen wird. Bei B2B-Veröffentlichungen wie diesen gehe ich von einem höheren Desktop-Anteil als beim sonstigen Web aus. (Die genauen Zahlen von AWS wären natürlich interessant.)

Aber: Weißt du, ob deine Webseite gut zu lesen ist?

P.S. Wenn jemand bei Amazon mir sagt, dass der Desktop-Anteil unter 10 Prozent ist und die meisten Leser die Inhalte eh im Reader konsumieren, dann ist meine Argumentation natürlich auch widerlegt. Und ich bin einfach ein hoffnungsloser Dinosaurier, dass er nicht alles am Smartphone macht.

Amazon nimmt es sehr genau mit der Zeitzone

Ich habe mich für ein Trainingsprogramm von Amazon Web Services angemeldet. Dabei ist mir dieses kleine Nugget Formular-Gold über den Weg gelaufen, also ich habe dann Berlin angeklickt:

Hintergrund sind die besonderen Steuerbedingungen der einzigen deutschen Exklave Büsingen. Die führen dazu, dass man in Büsingen mit Schweizer Franken bezahlt. Also behandelt Amazon auch die Zeitzone, die die gleiche ist, dort anders.

Medium, Plagiate sind das größte Lob

Es war einmal eine Webseite, auf der die lesbaren und auf jeder Deviceklasse gut gestalteten Texte das Alleinstellungsmerkmal waren. Sie hieß Medium.com und hatte kein Geschäftsmodell. Dann kamen die, die das auch sahen, und die alles kopierten, was sie sahen: Looks (https://code.tutsplus.com/tutorials/wordpressium-creating-a-medium-like-experience–cms-22669) und Funktionen (https://premium.wpmudev.org/blog/select-text-and-tweet/).

Also sieht jetzt Medium wieder anders aus, und ich habe immer noch Phantom-Optik-Erlebnisse. Etwa wenn ich diese Follow-Aufrufe sehe, und mein erster Gedanke ist: „Das ist doch die falsche Schrift!“ (Ist sie nicht, das ist bloß meine Erinnerung, die da spricht.)

Photo by Aaron Burden on Unsplash

Herbstputz

Du hast drei Webseiten, die du auf dem gleichen Framework basieren. Und doch haben sich Unterschiede eingeschlichen. Wie kannst du die Unterschiede wieder angleichen? Indem du erst mal herausfindest, wie der Ist-Zustand ist.

Interface Inventory | Brad Frost: „Enter the interface inventory.

An interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website“

(Via.)

Warum mache ich das alles? Weil ich die nächste Version unseres Frontends für das Webseiten-Plattform-Produkt plane, das ich bei TargetVideo verantworte. Das wird ein Decoupled Frontend sein, erstens, weil man das heute so macht, zweitens, um die Arbeit für die Redakteure sicherer zu machen. Bei besonders großen Lastspitzen geht nämlich unsere skalierende WordPress-Umgebung dann doch mal in die Knie – etwa wenn viele Seiten neu aufgerufen werden (hallo, Google-Crawler).

Und jetzt bin ich wieder in Keynote. Tschüss!

Die Bahn: Die 2-Cent-User-Experience bei einem 2000-Euro-Stück Papier

Dass ich zur Arbeit pendle, ist bekannt. Meist mit dem Zug, manchmal mit dem Auto, wenn die Verspätungen die Anschlüsse zu einer Frechheit machen. Mein Chef hat mir sogar schon ein Buch übers Pendeln geschenkt. Montags wie heute ziehe ich aber den Zug vor. Da sind die ganzen Wochenpendler auch noch zusätzlich auf den Straßen und machen München noch mehr zu einem Nadelöhr.

Das erste Jahr im Startup ist vorbei, und jetzt stand auch die Verlängerung meiner Monatskarte für den Bahnverkehr an. Die kostet weit über 200 Euro im Monat und wird zentral in den Ländern von einer Fahrkartenstelle verschickt. Wenn man so viel Geld ausgibt, erhält man automatisch einen BahnCard 25 dazu, und weil ich mit der Monatskarte so hoch einsteige, hat die gleich Silberstatus. Der nennt sich natürlich Comfort. Das ist ganz gut, weil man damit auch in die Bahnhofslounges könnte. Könnte sage ich, weil es am Ostbahnhof in München keine gibt, sondern nur am Hauptbahnhof. Und der liegt in den allermeisten Fällen nicht auf meiner Strecke. Bringt mir also nix. Da ich nicht mit Zügen der Deutschen Bahn fahre, sondern nur mit dem privaten Anbieter Meridian. Der hat auch ein Stammkundenprogramm, aber das nimmt keiner ernst. Eine andere Geschichte.

Dass die Deutsche Bahn User Experience nicht kann, wissen wir. Wer einmal mit der ÖBB Railjet gefahren ist oder dort bloß ein Ticket gebucht hat, weiß, dass es auch mit einem deutschen Wording besser geht. Die Website der ÖBB ist wirklich spektakulär gut geworden. In Deutschland fällt mir zum Vergleich nur der lokale öffentliche Nahverkehr in München der MVG auf, die eine wirklich durchdachte Antwort gegeben haben auf die Probleme der Nutzer. Auch wenn die so anders ist, dass man sich erst einmal orientieren muss.

Was stört mich jetzt konkret an der User Experience? Wenn ich eine Fahrkarte kündige, muss ich das Stück Papier als Einschreiben an die Bahn zurückschicken, damit die sich nicht herausreden kann, das Ding nie erhalten zu haben. Das empfiehlt die Bahn selbst in ihren FAQs.

Wenn sie selbst aber eine Fahrkarte im Wert von mehr als 2500 Euro verschickt, macht sie das mit einem einfachen DIN-lang-Brief. Dann wird der Träger einfach zwei mal geknickt. Nun gut, die Fahrkarte würde ja auf ein Drittel des Papierformates passen. Aber es gibt einen Versatz von vier Millimetern, so dass ich das ganze Jahr mit einer hässlichen Knickkante in der  Plastikeinschubhülle leben muss. Das muss man im Foto sehen:

Meine Schülerfahrkarte vor 30 Jahren war genauso verknickt, jeden Monat. Aber da trug einen Gutteil der Kosten die öffentliche Hand, da war mir die Sorgfalt egal. Bahn, ich bin ein Premiumkunde und nur ein paar hundert Euro von der schwarzen BahnCard entfernt. Deren Kunden erfahren die Behandlung, die sie verdienen.

Bei jedem Autovermieter erhalte ich nach der ersten Buchung ein Stück Plastik, das professioneller und markensicherer ist. Daher habe ich mich mal daran gemacht, das zu redesignen. Wohlgemerkt, ich bin kein Designer. Aber das kriege sogar ich besser hin, Bahn.

Hier ist mein Vorschlag.

Redesign-Frequent-Traveller

Ich bin kein Designer. (Habe das mit Sketch, OpenSans als Schriftart und einem Foto von Unsplash entworfen.)

Man könnte sogar daraus ein echtes Unboxing-Erlebnis machen. Man kann das etwa in sehr günstige Echtlederhüllen stecken, manch ein Shop verschickt so etwas als Giveaway an seine Frequent Einkäufer.

Liebe Bahn, solltest du einige meiner Vorschläge zumindest für Langstreckenpendler wie mich aufnehmen wollen, mein Honorar wäre ein Jahr einer schwarzen BahnCard 100, ok?

TL;DR

Kundenzentriertes Denken findet man bei der Bahn nicht. Hochwertige Güter sollten auch hochwertig verpackt sein. Meine Fahrkarte kostet so viel wie zwei iPhones. Jedes Jahr.

Warum ich das Fliegenschiss-Slide hasse

Bereit für einen Rant? Heute ist das Fliegenschiss-Slide dran. Was ist das? Wenn dir im B2B-Bereich heutzutage etwas verkaufen will, macht er das in den allermeisten Fällen mit einem Powerpoint-Slide-Deck, einer Präsentation. Nach dem Titelblatt und einer kurzen Vorstellung des Unternehmens, das der Redner/die Rednerin repräsentiert, kommt sie dann: die große Logo-Sammlung all der Referenzkunden, die nicht schnell genug der Verwendung ihres Logos widersprochen haben. Diese Folie möchte ich das Fliegenschiss-Slide nennen. Amerikaner würden das wohl ein Nascar-Slide nennen – da kann man die ganzen Sponsoren auch nicht erkennen, wenn die Autos an einem Besucher auf der Rennstrecke vorbei rasen.

Warum finde ich das Slide so negativ? Dafür gibt es viele Gründe:

  1. Die meisten der dort präsentierten Unternehmen wissen nicht, dass ihr Logo in Vertreterpräsentationen benutzt wird. Am besten machen Sie immer gleich den Gegen-Check: Gibt es ein offizielles Testimonial des Unternehmens auf der Webseite des Präsentators? Wenn nicht, wurde dafür kein offizielles Ok eingeholt.
  2. Wenn die Anzahl der Logos zehn übersteigt, kann man die einzelnen Firmen aus den hinteren Reihen des Konferenzraumes eh nicht mehr lesen. Dann sendet die Folie nur das Signal: Schaut mal, wie toll wir sind!
  3. Der Präsentator weiß um die Wirkung der Folie und sagt ein paar Dinge, um ihre Wirkung zu mildern. Oder anders: Er distanziert sich von seiner Firma. Das muss man keinem Mitarbeiter zumuten.
  4. Wenn auf der Folie vor allem große Unternehmen drauf sind, etwa DAX- und MDAX-Unternehmen oder Fortune-500-Firmen, dann muss  die Frage erlaubt sein: Wie gut könnt ihr euch dann um meine Bedürfnisse kümmern?
  5. Es ist einfach, einen Praktikanten hinzusetzen und bitten, die ganzen Logos aus der Google-Bildersuche zusammenzukopieren. Ohne Rücksicht auf Urheberrechte und Markenrechte und den ganzen Rattenschwanz. Was schwieriger ist? Einen passenden Usecase heraussuchen und dokumentieren, der zwar von einem der vielen präsentierten Unternehmen stammt, aber die Bedürfnisse des aktuell anwesenden, künftigen Kunden bereits vorwegnimmt oder gelöst hat. Das würde mich aber genauso wie viele andere Interessenten mehr interessieren.

Das Redesign von Amazon Web Services: S3

Eins der Features, das Amazon Web Services bei seiner Amazon-Hausmesse in Las Vegas angekündigt hatte, war das Tagging von Objekten in S3. Warum ist das interessant? In großen AWS-Accounts verliert man schnell den Überblick, besonders wenn mehrere Teams Ressourcen anlegen können. Daher ist ein Tagging-Konzept wichtiger Bestandteil beim Wachstum. Tagging macht es für den Administrator oder Billing-Verantwortlichen leichter, die einzelnen Instanzen und Ressourcen den unterschiedlichen Bereichen, Kunden und/oder Projekten zuweisen zu können. Sonst ist die Abrechnung unmöglich.

Seit re:Invent ist es möglich, einzelne Objekte in S3-Buckets unterschiedlich voneinander zu taggen. Bisher war das nur auf Bucket-Ebene möglich. So habe ich das verstanden. Continue reading →

Software, die ich nutze: Origami von Facebook

Auch wenn ich unter anderem das Produktmanagement für ein Do-It-Yourself-Portal verantworte, mit Origami meine ich nicht die Falttechnik aus Japan. Origami ist eine Software von Facebook für das Design von App-Prototypen auf dem Mac. Besonders ausgelegt ist diese für das gute Zusammenspiel mit den Dateien, die aus Sketch kommen. Sketch ist eine unter jüngeren Designern sehr beliebte Vektorzeichenanwendung, die deutlich schneller und performanter ist als Illustrator oder vergleichbare Adobe-Produkte.

Origami konkurriert mit anderen Hybriden (kann Design und ist Entwicklung recht nahe) wie Framer.js um das Mindset und den Marktanteil der Designer/Developer. Es ist kein Tool wie Axure RP, das sich an den gestandenen Informationsarchitekten richtet – und wo jede Animation weh tut. Zumindest ist das meine Erfahrung aus dem letzten Projekt bei ProSiebenSat.1, wo ich viel mit Axure gemacht habe und in großen Projekten damit auch immer die Anmutung der Seite vermitteln konnte. Aber Axure hat zwei Schwächen: Responsive Prototypes sind echt schwer, und eben diese Animationen. Vom heftigen Preisschild (500 Euro aufwärts) mal ganz abgesehen. Axure befördert auch eher einen eher schlichten Look der Prototypen. Hier einer meiner ersten:

Was ist jetzt an Origami so besonders? Es kommt von den Animationen her. Von diesen neuen Workflows, die App-Designern und -Entwicklern seit 2007 so bekannt sind, die aber für Web-Menschen wie mich, die Kanzlerin würde sagen Neuland sind. Oder zumindest waren. Auch ich beschäftige mich viel mit den aktuellen Trends, aber ich werde mich nie Designer nennen. Na, vielleicht ja doch.

Wer eng mit Entwicklern zusammenarbeitet und ihre logische Denkweise kennt, kommt mit dem Programm ganz gut klar. Die größte Hürde waren für mich die neuen Begriffe der Animationswelt. Meine ersten Berührungen mit dem Thema waren beim Buch vom Val Head zum Thema. Das empfiehlt sich sicher, vorher die Animationsmuster zu überlegen und auch zu wissen, welche Animation welchen Effekt auf den Nutzer hat.

Origami ist mir zu kompliziert – was kann ich tun?

Der Einstieg ist bei Axure einfacher, aber man braucht dafür auch einen Tag, um das zu verstehen, wie das alles gedacht ist. DAs Gute ist, dass die Anbieter inzwischen die Power von Video-Tutorials entdeckt haben. Zwar ist der Sprecher meist nicht besonders inspririerend, aber ich kann das Video an der Stelle anhalten, an der ich etwas nicht verstehe und immer wieder zurückspulen. Das ist etwas, was auch der beste Erklärtext nicht kann. Mein Tipp ist Keynote für Mac-Nutzer. Auch damit habe ich schon Prototypen gemacht. Die Animationen, die Apple dem Programm spendiert hat, sind zu viel für Präsentationen. Aber für animierte Microinteraktionen sind sie perfekt.

Rant: Meine Scribbles nenne ich ab sofort Design

Design mache ich auch ab und zu. Früher habe ich das einfach Scribbles oder Skizzen oder meinetwegen auch Prototypen genannt. Ab sofort nenne ich das Design. Warum? Jeder kann sich Designer nennen. Der Begriff Designer ist nicht geschützt. Du kannst Photoshop? Dann bist du Designer. Bisschen #oldskool, aber eben Designer.

Auf meinem treuen Pendelbegleiter, einem 13-zölligen MacBook Pro läuft zwar Sketch, der neue Liebling der Designer, weil die Power für Photoshop nicht reicht, und weil ich die meisten Designs eh als skalierbare Vektorformate brauche.

SVG for the win in web Design!

Bei einem Nebenprojekt hatte ich jetzt das zweifelhafte Vergnügen, mit einem Designer zusammenzuarbeiten, der sich auf die gleiche Art auch Designer nennt. Ich hätte die Chuzpe nicht besessen. Deswegen nehme ich mir den Rat eines früheren HIPPOs von mir an: mehr dicke Eier wagen. Bäm, bäm, bäm.

Für das erste Vertical bei TargetVideo habe ich ein Moodboard als Briefing an meinen erklären Lieblingsdesigner für solche Projekte verschickt. Was er daraus gemacht hat, hat meine Erwartungen noch übertroffen. Dafür zahle ich gern. Ich designe nicht, um andere Designer aus dem Job zu treiben. Ich designe, um nicht schlechtes Geld gutem hinterherzuwerfen. Versteht mich nicht falsch: Gute Designer, ihr seid euer Geld wert. Aber dann seid ihr Profis. Webfonts, die keine sind, sind ein Indiz dafür, dass ihr es nicht seid.

Und jetzt beruhige ich mich wieder, mache einen Entspannungstee und ein Erkältungsbad.

Nice UI Pattern bei AWS Pop-up Loft & Innovation Lab

Einmal war ich schon da, und ich werde sicher noch ein paar Mal ins AWS Pop-up Loft & Innovation Lab pilgern. Oder hingehen, wenn das zuviel Aufladung in diesen Zeiten ist. Amazon Web Services ist mit einem Pop-up-Store mitten in der Münchener Innenstadt zu Gast. Naja, zumindest in recht zentraler Lage, nicht an der Peripherie wie mit ihrer Deutschlandzentrale in Nord-Schwabing. (Gemerkt, was ich da getan habe: Peripherie und Zentrum in Kontrast benutzt, für einen ironischen Effekt? Wenn man Witze schon erklären muss…)

Bevor man da hingeht, soll man sich registrieren auf einer Single-Purpose-Site von Amazon. Die hat natürlich SSL, wie sich das für den Cloud-Riesen gehört. Aber es gibt eine schöne Funktion unter dem Button für die Registrierung. Der zeigt „Registrieren“, wenn man sich noch nicht angemeldet hat. Und wenn man es getan hat, teilt er sich in zwei Buttons auf – stornieren oder Kalendereintrag herunterladen. Viel eleganter kann man das nicht machen. Es entspricht genau meiner Erwartung, wie sich solche ein Feature verhalten soll. Toll.

AWS Muster Innovation Lab Agenda