Das häufigste Problem, das wir bei einem Redesign sehen, ist ein leerer erster Bildschirm. Manchmal ist er mit einem teuer produzierten Video, einem animierten Logo und einer Überschrift aus fünf Wörtern gefüllt. Doch an Informationen fehlt es. Die Person hat die Website geöffnet, um herauszufinden, ob Sie ihr helfen können, und die einzige Antwort lautet: „Willkommen in unserer Welt“.
Bei 88Lab geben wir uns drei Sekunden, um zu zeigen, was das Unternehmen anbietet und was der nächste Schritt ist. Das ist unser Praxistest für Klarheit. Zeigen Sie den ersten Bildschirm kurz einer Person, die das Unternehmen nicht kennt, und fragen Sie sie, was sie von hier aus tun kann. Wenn sich der Besucher an die Hintergrundfarbe erinnert, aber nicht weiß, ob das Unternehmen Möbel verkauft, Küchen entwirft oder Innenraumberatung anbietet, ist unsere erste Aufgabe, die Überschrift und das Angebot zu überarbeiten. Die Animation kann warten.
Die sechs Techniken aus dem Video „6 EASY Tips to 10x Any Site’s Design“ bieten eine gute Grundlage für eine solche Prüfung. Wir greifen daraus sechs Designentscheidungen auf und wenden sie auf Aufgaben aus unserer Praxis an. Sie erfahren, warum es sich bei einem Medium mit großem Archiv lohnt, mit einer schwierigen Überschrift zu beginnen - und warum bei einem Geschenk mit persönlicher Beschriftung das wichtigste Detail erst im Warenkorb erscheint.[1]
Was Besucher tun können sollten
Bevor Sie Ihr Designprogramm öffnen, nehmen Sie drei echte Fragen aus Ihren letzten Kundengesprächen. Wenn jemand fragt: „Arbeiten Sie nach meiner Zeichnung?“, fehlen auf der Seite andere Informationen als bei der Frage: „Kann ich sehen, wie es in echt aussieht?“ Für die erste Person erstellen Sie eine kurze Erklärung, wie Sie Aufträge entgegennehmen. Für die zweite wählen Sie ein fertiggestelltes Projekt aus und zeigen es mit genügend Details. So wissen Sie bereits, was jeweils auf die Seite gehört.
Beschreiben Sie den Erfolg auch aus Sicht des Unternehmens. Bei einem Hotel kann eine Anfrage wertvoll sein, wenn sie Reisedaten, Gästezahl und eine Kontaktmöglichkeit enthält. Bei einem Medium ist es ein Erfolg, wenn Leser einen bestimmten Beitrag im Archiv finden. Für einen Großhändler wird das Interesse an einem Verpackungsfoto geschäftlich relevant, wenn der Käufer die Packungsgröße findet und nach der Lieferung fragen kann. Wenn all diese Aufgaben unter „mehr Engagement“ zusammengefasst werden, fällt es dem Designer schwer, fundiert zu entscheiden, was größer und was kürzer werden soll. In Portfolio von 88Lab finden Sie Beispiele für alle drei Fälle.
Die erste Skizze können Sie auch auf Papier anfertigen. Schreiben Sie die Überschrift so, wie Sie die Dienstleistung am Telefon erklären würden. Darunter platzieren Sie einen Beleg, den der Kunde ansehen kann, und notieren, was beim Klick auf den Button passiert. Lassen Sie das Blatt von einem Kollegen aus dem Vertrieb lesen. Wenn er mündlich ergänzen muss: „Eigentlich gilt der Preis für zwei Personen“ oder „Wir arbeiten nur mit Unternehmen“, gehört diese Information schon in die Skizze.
1. Wählen Sie Schriftarten mit der echten Überschrift Ihres Unternehmens aus
Im Video wählt der Designer zuerst die Schriftart für Überschriften und kombiniert dann die schmale Instrument Serif mit der breiteren Geist Sans. Das ist ein guter Ansatz für eine Seite, auf der wenige Wörter den ersten Eindruck prägen sollen. Der Name eines Architekturprojekts wirkt in breiten, kräftigen Buchstaben anders als in derselben schmalen Serifenschrift. Die Auswahl fällt leichter, wenn der tatsächliche Name zusammen mit dem Foto und einer kurzen Projektbeschreibung vor Ihnen steht.
Sie haben drei sinnvolle Möglichkeiten. Mit einer Schriftfamilie können Sie durch Größe und Stärke eine klare Hierarchie schaffen. Eine große Schriftfamilie mit verwandten Serif- und Sans-Serif-Varianten sorgt für mehr Abwechslung. Und wenn Überschriften einen eigenen Charakter brauchen, kombinieren Sie eine ausdrucksstarke Überschriftenschrift mit einer ruhigeren Schrift für Absätze. Stellen Sie die beiden nebeneinander und verwenden Sie echten Text. Zwei fast identische Schriftschnitte wirken oft wie ein versehentlicher Austausch, während ein deutlicher Unterschied erklärt, was Überschrift und was Zusatzinformation ist.
Bei einer bulgarischen Website testen Sie zuerst mit kyrillischem Text. In der Demo eignet sich Instrument Serif gut für eine große englische Überschrift. Die Schriftgestalter geben jedoch an, dass die Schrift nur lateinische Zeichen enthält. Verwenden Sie diese Version für „Küchen nach Maß planen“, ersetzt der Browser die fehlenden bulgarischen Buchstaben durch eine Ersatzschrift. In der Praxis beurteilen Sie dann ein ganz anderes Layout.[2]
Bevor Sie die Typografie freigeben, prüfen Sie auf einem Smartphone Ihre längste Überschrift, einen normalen Absatz, einen Preis und die Beschriftung des Hauptbuttons. Eine Überschrift, die am Computer auf zwei Zeilen gut aussieht, kann auf dem Smartphone fast den ganzen Bildschirm einnehmen. Oft hilft eine präzisere Formulierung am besten. Die Schrift so weit zu verkleinern, dass der alte Text gerade noch passt, ist selten eine gute Lösung.
Wie man eine Überschrift für eine Website mit über 600.000 Artikeln gestaltet
Beim Redesign von „Банкеръ“ überführten wir über 600.000 Beiträge von einer eigenen Plattform zu WordPress. Wir aktualisierten die Themenbereiche und ermöglichten den Lesern, selbst auszuwählen, welche Kategorien sie sehen möchten. Eine redaktionelle Vorlage muss sowohl die kurze Nachricht von heute als auch eine lange Überschrift aus dem Archiv bewältigen. Manuell angepasste Zeilen in drei hübschen Demokarten sagen wenig darüber aus, wie das Medium morgen früh aussehen wird.[3]
Wenn Ihnen ein solches Layout gefällt, geben Sie dem Designer den kürzesten und den längsten echten Titel der letzten Woche, ein Interview mit zwei Namen und einen Beitrag ohne Bild. Bitten Sie darum, alles gleichzeitig in der Nachrichtenübersicht und in den Artikeln selbst zu zeigen. Besonders aufschlussreich sind Titel, die sich erst am Ende unterscheiden. Wenn die automatische Kürzung zwei identische Sätze auf dem Bildschirm zurücklässt, muss der Leser beide öffnen, um das Gesuchte zu finden. Abhilfe schaffen eine zusätzliche Zeile in der Kachel, eine schmalere Bildspalte oder die Möglichkeit, für die Übersicht einen kürzeren Titel festzulegen.
Auch die Auszeichnung der Überschriften auf der Seite ist wichtig. Bitten Sie das Team, Ihnen die Liste ohne Gestaltung zu zeigen. Gibt es eine Hauptüberschrift, aus der das Thema hervorgeht? Folgen darunter Abschnitte mit aussagekräftigen Namen? Die richtige Reihenfolge hilft Menschen, die sich mit Screenreadern orientieren. Der Designer kann ein Zitat oder eine Zahl größer darstellen, ohne dass der Entwickler es als neuen Abschnitt im Dokument auszeichnet.[4]
Schreiben Sie zum Abschluss des Typografietests auf einem echten Smartphone einen Namen mit „щ“, „ъ“ und „й“, einen Preis mit Cent und ein Datum mit vierstelligem Jahr. Sind Punkte, Akzente und Dezimalkomma bei normaler Schriftgröße zu erkennen? Wählen Sie einen Absatz aus und lesen Sie ihn bis zum Ende, ohne den Bildschirm zu vergrößern. Manchmal sieht eine Schrift auf einem Plakat mit fünf Wörtern großartig aus, doch bei einem längeren Absatz verliert man beim Lesen die Zeile. Bewahren Sie dann ihren Charakter für die Überschriften und verwenden Sie für den Fließtext eine leichter lesbare Schrift.
2. Setzen Sie auf dem ersten Bildschirm einen klaren visuellen Schwerpunkt
Wenn auf der Seite alles zuerst gesehen werden will, muss der Besucher selbst entscheiden, was Aufmerksamkeit verdient. Wählen Sie das zentrale Element passend zu Ihrem Angebot. Für eine Möbelwerkstatt könnte es ein Foto einer fertigen Küche sein, auf dem zu sehen ist, wie eine schwierige Ecke gelöst wurde. Für Software für Werkstätten könnte es ein Bildschirm sein, der zeigt, wie ein eingegangener Auftrag einem verfügbaren Techniker zugewiesen wird. In beiden Fällen vermittelt das Bild etwas, das Sie sonst erklären müssten.
Nehmen wir eine Möbelwerkstatt, die Küchen für kleine Wohnungen anfertigt. Die Überschrift „Handwerkskunst bis ins Detail“ könnte genauso gut auf einer Website für Uhren stehen. „Maßgefertigte Küchen für kleine Wohnungen“ macht sofort klar, für wen das Angebot gedacht ist. Neben das Foto würden wir „Fertige Küchen ansehen“ setzen. Wenn die Werkstatt tatsächlich erste Kostenschätzungen anhand von Bauplänen erstellt, ist nach der Galerie der richtige Platz für „Maße für ein Angebot senden“. So passt der Button zu der Entscheidung, die der Besucher an diesem Punkt treffen kann.
Eröffnen Sie die Startseite von 88Lab und entscheiden Sie selbst. Erkennen Sie sofort, dass wir Websites, Plattformen und digitales Marketing anbieten? Wenn Sie schon ein konkretes Vorhaben haben, können Sie „Projekt besprechen“ auswählen. Wenn Sie sich erst einen Eindruck von uns verschaffen möchten, finden Sie daneben „Projekte ansehen“. Beim Scrollen sehen Sie unsere Arbeit für CoolFit, Pulse Fitness & Spa, Apolonia Resort und „Банкеръ“. Weiter unten können Sie nachvollziehen, wie wir vom ersten Gespräch bis zum Start der Website vorgehen. Diese Reihenfolge orientiert sich an den Fragen, die wir bei einem ersten Gespräch von Ihnen erwarten würden: Was machen Sie? Für wen haben Sie das schon gemacht? Wie würden wir zusammenarbeiten? Erst danach würden wir Sie fragen, ob Ihnen das Design und die Animationen gefallen.
So wählen Sie ein Bild aus, das eine Frage beantwortet
Im Video geht es um Software für die Verwaltung von Dienstleistungsunternehmen. Der Autor greift ein Motiv aus den Diagrammen eines solchen Produkts auf und setzt es mit orangefarbenen vertikalen Linien um. So erhält der Besucher eine visuelle Vorstellung von Daten und ihrer Anordnung. Auf einer anderen Website wären dieselben Linien einfach nur Hintergrund. Vervollständigen Sie für Ihre eigene Seite den Satz: „Wir zeigen genau das, weil der Kunde sehen möchte, …“. Lautet die Antwort „dass wir modern sind“, müssen Sie bei der Auswahl noch einmal nachlegen.[1]
Für die Möbelwerkstatt würden wir um zwei Aufnahmen derselben Küche bitten. Auf der ersten ist der ganze Raum zu sehen und man erkennt, wie klein er ist. Auf der zweiten zeigt der geöffnete Schrank, wie die schwierige Ecke genutzt wurde. Schreiben wir über das zweite Foto „Funktionale Lösungen“, muss der Kunde selbst erraten, was er sieht. Mit der Erklärung „Die Schublade lässt sich ganz öffnen, ohne an die Spülmaschine zu stoßen“ liefert das Foto eine Antwort, die der Käufer auf die eigene Wohnung übertragen kann.
Geben Sie auch Hinweise zum Bildausschnitt. Ein Panorama einer Wohnung kann auf einem Laptop großartig aussehen und auf dem Smartphone nur die leere Wand zwischen Fenster und Bett zeigen. Wenn eine kleinere Version desselben Bildes ausreicht, kann der Entwickler dem Browser über srcset und sizes mehrere Größen anbieten. Verschwindet das Motiv aus dem Bildausschnitt, ist eine eigene mobile Komposition mit picture sinnvoll. Liefern Sie beide freigegebenen Ansichten mit. So weiß die Person, die das nächste Foto hochlädt, was unbedingt sichtbar bleiben muss.[5]
Manchmal scheidet das beste Bild für den zentralen Bereich aus, sobald man den Kontext wechselt. Ein Foto eines glänzenden Konferenzraums beantwortet zum Beispiel nicht die Frage, ob die Software tatsächlich einen verfügbaren Techniker anzeigen kann. Ein kleiner, gut lesbarer Ausschnitt aus der Arbeitsoberfläche mit Beispieldaten würde mehr Informationen liefern. Zeigen Sie nur die Zeilen, die nötig sind, um den Vorgang zu verstehen. Ein Foto des ganzen Bildschirms, auf Smartphonebreite verkleinert, bewahrt die Form des Produkts und verliert fast alles, was der Besucher sehen wollte.
3. Wiederholen Sie Details, die dem Besucher bei der Orientierung helfen
Im Video wird das „visuelle Reim“ genannt. In der Demonstration greift der Designer das Dreieck aus dem Logo im Symbol für ein Dropdown-Menü, im Pfeil des Hauptbuttons und im Bildrahmen wieder auf. Die einzelnen Bereiche wirken dadurch wie Teile derselben Website. Für ein Unternehmen sind jedoch Wiederholungen bei den Elementen am nützlichsten, mit denen der Besucher interagiert. Wenn er einmal gelernt hat, wie der Buchungsbutton aussieht, sollte er ihn auch auf der Seite des konkreten Zimmers wiedererkennen.
Stellen Sie sich eine Hotelwebsite vor, auf der der ausgefüllte grüne Button zu den verfügbaren Terminen führt. In der Galerie kennzeichnet dasselbe grüne Rechteck „Zimmer mit Aussicht“, lässt sich aber nicht anklicken. Ein paar Zeilen weiter unten öffnet dieselbe Form ein Foto. Das Design ist formal farblich einheitlich, aber nicht in seiner Bedeutung. Verwenden Sie den auffälligsten Button für die gewünschte Aktion und gestalten Sie die Informationsbeschriftung anders.
Für eine schnelle Überprüfung sammeln Sie alle Buttons, Textlinks und Beschriftungen der Startseite auf einem Bildschirm. Was sieht aus, als ließe es sich anklicken? Was lässt sich tatsächlich anklicken? Navigieren Sie anschließend mit der Tabulatortaste durch die Seite. Sie sollten sehen können, wo sich der Fokus befindet, und alle Aktionen erreichen, die das Design so überzeugend darstellt.[6]
Wann Sie die Website nach Zielgruppen strukturieren sollten - und wann Sie die Angebote miteinander verknüpfen sollten
Unsere Arbeit an CoolFit und Pulse Fitness & Spa zeigt, wie unterschiedlich die Fragen sein können, die Menschen an zwei Websites derselben Branche haben. Die digitale Sportkarte CoolFit bringt drei Seiten zusammen. Der Arbeitgeber informiert sich über einen Benefit für sein Team. Der Mitarbeiter hat bereits eine Karte und sucht nach Orten, an denen er sie nutzen kann. Der Betreiber einer Sportstätte möchte wissen, wie er Partner werden kann. Wir haben die Informationen nach diesen drei Rollen geordnet und für alle, die einen Ort zum Trainieren suchen, Filter nach Angeboten und eine interaktive Karte vorgesehen.[7]
Stellen Sie sich einen Mitarbeiter vor, der nach der Arbeit schwimmen gehen würde, wenn es auf dem Heimweg ein passendes Schwimmbad gäbe. Zuerst interessieren ihn die Orte, an denen seine Karte zum Schwimmen gilt. Dann entscheidet die Lage, für welchen davon er sich entscheidet. Dieselbe Karte mit den Standorten hat für die Person, die den Benefit vereinbart, eine andere Bedeutung. Sie möchte vielleicht wissen, ob Kollegen in verschiedenen Städten einen Ort zum Sporttreiben finden. Es ist hilfreich, wenn beide von unterschiedlichen Stellen auf der Website zu denselben Informationen gelangen. Wird ein neuer Standort hinzugefügt, stehen so beiden Zielgruppen aktuelle Daten zur Verfügung.
Für Pulse haben wir die Inhalte der alten Website übernommen und Verknüpfungen zwischen Clubs, Trainings und Trainern erstellt. Um Standorte zu finden, haben wir eine Karte und Filter eingebunden.[8]
Hier kann derselbe Besucher seine Auswahl an drei verschiedenen Stellen beginnen. Heute sucht er einen Club in der Nähe des Büros, morgen empfiehlt ihm ein Freund einen Trainer und nächste Woche möchte er ein anderes Training ausprobieren. Wenn Sie eine solche Struktur planen, nehmen Sie eine konkrete Frage. „Wo kann ich mit diesem Trainer trainieren?“ zeigt, welche Verknüpfung auf der Trainerseite benötigt wird. „Was kann ich in diesem Club trainieren?“ gibt an, welche Verknüpfung in die andere Richtung führen sollte.
Prüfen Sie denselben Weg, indem Sie direkt auf einer Unterseite starten. Wer sie über Google geöffnet hat, hat die Erklärungen auf der Startseite nicht gesehen. Geben Sie der Person die Adresse der Seite zu einem bestimmten Training und bitten Sie sie, einen passenden Standort auszuwählen. Wenn sie zur Suchmaschine zurückkehrt, fragen Sie, was sie erwartet hatte. Vielleicht fehlt die Stadt neben dem Clubnamen oder der Link zum Club geht zwischen den Bildern unter. Die beiden Beobachtungen führen zu unterschiedlichen Anpassungen.
So prüfen Sie Filter und die Rückkehr zu den Ergebnissen
Wählen Sie eine Kombination, bei der Sie vorab wissen, dass es im Katalog mindestens zwei passende Ergebnisse gibt. Geben Sie der teilnehmenden Person eine Situation, die für sie relevant ist, zum Beispiel die Wahl zwischen zwei Schwimmbädern in der Nähe ihres Arbeitsplatzes. Lassen Sie sie den ersten Standort öffnen und dessen Lage beurteilen. Bitten Sie sie anschließend, auch den zweiten anzusehen. Beobachten Sie, was sie vorfindet, wenn sie auf dem Smartphone auf „Zurück“ tippt. Ist die ausgewählte Sportart noch eingestellt? Sieht sie wieder den Standort in der Liste, von der sie gestartet ist? Notieren Sie, was sie erneut eingeben oder auswählen musste. Achten Sie auch darauf, ob sie den Standort wiedererkennt, den sie gerade angesehen hat. Zwei identische Titelbilder können dazu führen, dass sie denselben Standort ein zweites Mal öffnet.
Machen Sie auch einen zweiten Versuch mit einer Kombination ohne Ergebnisse. Wer unbedingt schwimmen möchte, ist vielleicht bereit, in einen benachbarten Stadtteil zu fahren. Erkennt die Person, welche Bedingung sie ändern muss, und kann sie die übrigen beibehalten? Wenn zwei Personen aus unterschiedlichen Gründen Schwierigkeiten haben, dokumentieren Sie diese getrennt. „Bei der Rückkehr vom Standort wurde die ausgewählte Sportart zurückgesetzt“ gibt Entwicklern einen Schritt, den sie nachvollziehen können. Gehen Sie nach der Korrektur denselben Weg auf demselben Smartphone noch einmal durch und prüfen Sie, ob Sie die beiden Standorte jetzt vergleichen können.
4. Setzen Sie Tiefe und Bewegung gezielt ein
Tiefe lässt sich mit einem kaum wahrnehmbaren Schatten, einer Textur, der Überlagerung zweier Elemente oder einem halbtransparenten Hintergrund erzeugen. In einem Dropdown-Menü hilft zum Beispiel ein leichter Schatten um die Liste dabei zu erkennen, wo das Menü endet und die darunterliegende Seite weitergeht. In der Demo fügt der Autor dem Titelbild eine dezente Textur hinzu und überträgt einen Teil des Glaseffekts auf die Karten. Das Titelmotiv bleibt dabei erkennbar.
Genau hier lohnt es sich, den schwierigen Fall auszuprobieren. Eine halbtransparente Karte sieht auf einem zuvor ausgewählten dunklen Foto hervorragend aus. Was passiert, wenn ein Redakteur ein helles Küchenfoto mit weißen Schränken hochlädt? Beim Zuschnitt für Mobilgeräte kann der Titel genau auf dem hellsten Bereich liegen. Prüfen Sie es auch mit einem solchen Foto. Eine deckende Fläche hinter dem Text könnte das Problem für alle folgenden Projekte lösen.
Fragen Sie sich bei Animationen, worauf die Besucher warten müssen. Der Übergang zwischen zwei Bildern kann den Unterschied zwischen ihnen verdeutlichen. Muss der Besucher jedoch warten, bis sich die Buchstaben der Überschrift zusammengesetzt haben, um zu verstehen, womit Sie sich beschäftigen, erscheinen die wichtigsten Informationen zuletzt. Zeigen Sie sie von Anfang an. Für Menschen, die weniger Bewegung bevorzugen, sollten Sie eine ruhigere Version vorsehen. Mit der CSS-Einstellung prefers-reduced-motion kann die Website die Geräteeinstellung berücksichtigen. Am Ende unserer Startseite gibt es außerdem eine Schaltfläche „Animationen reduzieren“.[9][10]
Wann 3D-Animationen auf einer kommerziellen Website sinnvoll sind
Für den bulgarischen Vertreter der American Pop Corn Company haben wir eine Website erstellt, auf der sich beim Scrollen ein dreidimensionales Popcorn, ein Schriftzug und Produktverpackungen bewegen. Danach gelangt der Besucher zu einem Katalog, Informationen zu Produktion und Lieferung sowie der Möglichkeit, eine Anfrage zu einem ausgewählten Produkt zu senden. Geschäftspartner können Verpackungsgrößen, Stückzahlen pro Karton und Palettierungsdaten prüfen. Die Website bietet auch eine Steuerung für die dekorativen Animationen.[11]
Dieses Beispiel stellt eine gute Bedingung an jeden Effekt. Stellen Sie sich den Einkäufer einer Handelskette vor, dem die Präsentation gefällt und der den Link an einen Kollegen aus der Logistik schickt. Der Kollege öffnet den Link mit einer konkreten Frage zur Verpackung. Muss er sich bei jedem Besuch erst die gesamte Präsentation ansehen, wird der Effekt zu einem wiederkehrenden Zeitaufwand. Bei einem solchen Projekt würden wir zwei unterschiedliche Aufgaben prüfen. Kann ein neuer Besucher das einprägsame Objekt mit dem tatsächlichen Produkt in Verbindung bringen? Findet ein wiederkehrender Besucher direkt den passenden Eintrag im Katalog?
Um die Bewegung schon vor der Programmierung zu bewerten, bitten Sie um drei Einzelbilder. Was ist vor dem Beginn zu sehen, was wird in der Mitte enthüllt und womit bleibt die Person am Ende zurück? Stellen Sie ihnen die statische Variante gegenüber. Fehlt darin eine wichtige Kaufbedingung, geben Sie ihr einen festen Platz. Wenn alles Wichtige bereits verständlich ist, können Sie in Ruhe beurteilen, ob die Bewegung Freude macht oder eine Veränderung erklärt. So wird das Gespräch über Animationen konkret - auch für den Inhaber, der noch nie eine Designsoftware geöffnet hat.
Prüfen Sie auch Zwischenzustände auf einem echten Telefon. Scrollen Sie schnell, kehren Sie abrupt nach oben zurück, öffnen Sie mitten in der Animation das Menü und drehen Sie anschließend das Gerät. Wird sofort der richtige Text angezeigt? Bleibt die Schaltfläche an ihrer Position, wenn Sie sie antippen? Testen Sie dieselbe Abfolge mit aktivierter Einstellung „Bewegung reduzieren“. Besucher sollten das Produkt und die gewünschte Aktion auch dann erreichen, wenn sie eine ruhigere Darstellung wählen. Das ist ein praktischer Test, den Sie nach dem Austausch von Bildern oder dem Hinzufügen eines neuen Abschnitts wiederholen können.
5. Schaffen Sie eine Hierarchie, ohne die Lesbarkeit zu beeinträchtigen
Auf einer Produktseite haben Name, Preis, Größe und Herstellungsdauer unterschiedliche Funktionen. Der Name hilft Kunden bei der Orientierung, die Größe entscheidet, ob das Produkt für sie geeignet ist, und die Herstellungsdauer kann darüber entscheiden, ob sie es überhaupt bestellen. Wenn „Wird innerhalb von 20 Werktagen angefertigt“ in hellgrauer Schrift unter einer großen Schaltfläche „Kaufen“ steht, kann die wichtigste Bedingung leicht jemandem entgehen, der ein Geschenk für die nächste Woche sucht.
Im Video wurde die Deckkraft einer Unterüberschrift auf 70 % reduziert, damit die Überschrift stärker hervortritt. Das Ergebnis hängt von der Ausgangsfarbe und dem Hintergrund unter den Buchstaben ab. Die Web Content Accessibility Guidelines (WCAG 2.2) legen für Stufe AA einen Mindestkontrast von 4,5:1 für normalen Text und 3:1 für großen Text fest. Als groß gilt eine Schrift mit mindestens 18 pt in normaler oder 14 pt in fetter Stärke. Zum Beispiel erreicht #999999 auf Weiß nur etwa 2,85:1. Derselbe Text in #666666 auf Weiß kommt auf etwa 5,74:1. So können Sie sekundären Text optisch zurückhaltend und trotzdem gut lesbar gestalten.[12]
Bevor Sie den Text heller machen, versuchen Sie, seine Schriftstärke zu verringern, ihn mit mehr Abstand abzusetzen oder das Detail neben dem Element zu platzieren, auf das es sich bezieht. Prüfen Sie den Bildschirm auch mit der Frage: „Was könnte ich übersehen, wenn ich nur kurz darüberblicke?“ Eine blasse Nummer auf einem Galeriebild und eine blasse Lieferzeit können im Entwurf gleich gut aussehen. Für Kunden haben sie unterschiedliche Folgen.
Was vom Auswahlvorgang bis zur Bestätigung sichtbar bleiben sollte
In unserem Projekt für Ellie & Co personalisieren Besucher einen Plüschelefanten. Sie wählen die Farbe, auf welches Ohr die Beschriftung kommt und wie sie aussehen soll. Der Name oder die Botschaft ist direkt auf dem Produkt zu sehen. Die ausgewählten Details werden im Warenkorb gespeichert, und das abschließende Formular sendet eine Anfrage an das Team. Kunden erhalten eine Bestätigung mit einer Referenznummer. Die letzte Aktion hat hier eine ganz genaue Bedeutung und umfasst keine Online-Zahlung.[13]
Stellen Sie sich vor, Sie kaufen ein Geschenk für Zwillinge. Sie legen zwei Elefanten mit unterschiedlichen Namen in den Warenkorb. Welche Informationen möchten Sie sehen, bevor Sie die Anfrage absenden? Zwei identische kleine Bilder und ein Gesamtbetrag allein werden Sie kaum beruhigen. Achten Sie darauf, dass bei jedem Stück die eigene Beschriftung, die ausgewählte Farbe und eine Möglichkeit angezeigt werden, genau dieses Stück zur Bearbeitung wieder aufzurufen. Eine solche Übung zeigt, was auf dem letzten Bildschirm gut lesbar sein muss. Die Marke kann sich eine zarte Typografie leisten, aber der Name auf einem Geschenk für ein fremdes Kind sollte in der Vorschau deutlich zu erkennen sein.
Auch bei Mitteilungen gibt es eine Hierarchie. Beim Absenden ist am wichtigsten, zu erklären, was mit der Anfrage geschieht. Wenn das E-Mail-Feld unvollständig ist, geben Sie direkt daneben einen Hinweis, behalten Sie bereits eingegebene Werte bei und lassen Sie die Person gezielt den fehlenden Eintrag korrigieren. Bei mehreren Fehlern hilft zusätzlich eine Zusammenfassung mit Links zu den entsprechenden Feldern. Sagen Sie nach erfolgreichem Absenden, was Sie erhalten haben und was als Nächstes passiert. „Wir haben die Anfrage für die beiden Elefanten erhalten“ ist ein anderes Versprechen als „Die Bestellung wurde bezahlt“. Formulieren Sie die Nachricht passend dazu, was das System tatsächlich tut.[14]
Testen Sie auf einem kleinen Bildschirm, indem Sie eine Farbe auswählen, den Text vergrößern und versuchen, die Auswahl mit einer Hand zu korrigieren. Die kleine Farbkachel kann dezent bleiben, während die aktive Fläche darum größer ist. Das WCAG-2.2-Kriterium zur Mindestgröße von Zeigezielen sieht auf Stufe AA 24 × 24 CSS-Pixel vor und erlaubt Ausnahmen, unter anderem bei ausreichendem Abstand zwischen den Elementen. Ein visuelles Quadrat von 16 Pixeln kann sich in einer größeren Schaltfläche befinden. Ergänzen Sie die ausgewählte Farbe um einen Namen oder ein deutliches Symbol, damit Kunden ihre Auswahl auch bei reduzierter Bildschirmhelligkeit überprüfen können.[15]
6. Vergleichen Sie verschiedene Lösungen, bevor Sie eine davon freigeben
Wenn Ihr Designer Ihnen drei Varianten derselben Seite mit unterschiedlichen Grüntönen zeigt, können Sie Ihre Lieblingsfarbe auswählen. Sie wissen aber noch nicht, welche Inhalte auf den ersten Bildschirm gehören. Im Video erzählt der Autor, dass er zwölf Varianten des Hauptmotivs ausprobiert hat. Das ist sinnvoll, solange die Varianten unterschiedliche Ideen testen. Zwei können ausreichen, wenn die Wahl zwischen ihnen etwas Wesentliches verändert.
Bei einem Küchenstudio könnte die erste Version mit einem fertiggestellten Projekt beginnen und eine Schaltfläche zur Galerie bieten. Die zweite könnte zeigen, wie aus den Raummaßen ein Entwurf entsteht, und Besucher dazu einladen, einen Grundriss zu senden. Die erste spricht Kunden an, die nach Stil und Qualitätsnachweisen suchen. Die zweite passt zu jemandem, der bereits Maße hat und einen Anbieter auswählt. Bevor Sie eine der beiden Versionen ausarbeiten, zeigen Sie sie Menschen, die Ihren Kunden ähnlich sind. Beschreiben Sie die Situation den Teilnehmenden mit denselben Worten, die ein Kunde verwenden würde. Wenn Sie sagen „Öffnen Sie die Galerie“, haben Sie die erste Entscheidung bereits für sie getroffen. Das frühe Testen verschiedener Lösungen ist Teil des Ansatzes des Design Council.[16]
Zwei erste Bildschirme für denselben Urlaub
Für Apolonia Resort haben wir die mobile Version gestaltet, eine Möglichkeit für Anfragen vorgesehen und das Buchungssystem Quendoo integriert.[17]
Wie könnten wir zwei Ideen für eine solche Startseite vergleichen? Stellen Sie sich für die Übung zwei Skizzen vor. In der ersten steht ein Foto der Anlage im Mittelpunkt, darunter folgen eine kurze Beschreibung und die Schaltfläche „Zimmer entdecken“. In der zweiten verwenden wir dasselbe Foto, lassen aber mehr Platz für die Auswahl von Reisedaten und Gästezahl. Darunter steht „Verfügbarkeit prüfen“.
Geben Sie einer teilnehmenden Person ein Telefon mit der ersten Skizze und einer konkreten Aufgabe. „Sie reisen mit Ihrem Partner und Ihrem achtjährigen Kind vom 12. bis 16. Juni. Sie möchten herausfinden, ob Sie in einem Zimmer übernachten können und wie viel der gesamte Aufenthalt kostet. Zeigen Sie mir, wie Sie das prüfen würden.“ Lassen Sie die Person selbst entscheiden, wo sie beginnt. Öffnet sie sofort die Zimmerfotos, sehen Sie nach, ob sie von dort aus die Verfügbarkeit für die konkreten Daten prüfen kann. Notieren Sie, wann sie zurückgehen muss und welche Beschriftung sie auf der Schaltfläche erwartet hätte.
Achten Sie bei der zweiten Skizze auf ein anderes Problem. Jemand kann den Kalender leicht finden und trotzdem abspringen, wenn beim Hinzufügen eines Kindes unklar ist, wo dessen Alter angegeben wird. Dasselbe gilt, wenn man erst auf dem nächsten Bildschirm erfährt, ob der Preis für das Zimmer, eine Nacht oder den gesamten Aufenthalt gilt. Die Lösung ist hier ganz konkret: Der Designer zeigt bei der Auswahl eines Kindes das Feld für das Alter an und stellt den Zeitraum neben den Preis. Anschließend testet er dieselbe Aufgabe mit einer weiteren Person. Zum Schluss bittet er sie zu sagen, welchen Betrag die Familie voraussichtlich zahlen wird. So zeigt sich, ob sie den Preis verstanden hat - auch wenn sie alle Felder ohne Zögern ausgefüllt hat.
Wonach jemand sucht, der noch keine Reisedaten hat
Für die nächste Testperson ändern Sie die Aufgabe: „Sie planen im Sommer einen Urlaub mit Ihren Eltern. Bevor Sie entscheiden, wann Sie verreisen, möchten Sie ihnen zwei passende Unterkunftsvorschläge schicken.“ Beobachten Sie, ob die Person Zimmer ohne ausgewählte Reisedaten findet, wie sie die Vorschläge vergleicht und was sich öffnet, wenn sie den Link an ihre Angehörigen schickt. Verdeckt der Kalender den ganzen Bildschirm des Smartphones und nimmt die Testperson an, dass sie die Reisedaten bereits kennen muss, kann der Designer neben dem Formular einen gut sichtbaren Link „Zimmer ansehen“ platzieren. Führt der geteilte Link zurück zur Startseite, braucht jeder Vorschlag eine eigene Adresse. Beide Anpassungen ergeben sich aus einem konkreten Hindernis im Test.
Was nach dem Absenden des Formulars passiert
Nehmen wir ein separates Lernbeispiel von einer Website für Dienstleistungen. Zwei zufällig zugeordneten, vergleichbaren Gruppen zeigen wir im selben Zeitraum unterschiedliche Versionen des Formulars. Die Kriterien für eine passende Anfrage werden vorab mit dem Vertriebsteam vereinbart und sind für beide Versionen gleich. In der ersten Gruppe senden von 1.000 Besuchern 40 das Formular ab, davon interessieren sich 20 für eine Dienstleistung, die das Unternehmen anbietet. In der zweiten Gruppe senden von 1.000 Besuchern 52 das Formular ab, davon sind 18 Anfragen passend.
Berücksichtigen wir nur die Einsendungen, liegt die zweite Version mit zwölf mehr vorn. Bezogen auf alle Besucher haben jedoch bei der ersten Version 2 % und bei der zweiten 1,8 % eine passende Anfrage gesendet. Dieser kleine Unterschied lässt die Frage nach dem Gewinner offen. Bevor wir das Formular ändern, lohnt es sich, nachzulesen, wonach die Personen in den unpassenden Anfragen gesucht haben. Vielleicht weckt die Beschreibung Erwartungen an eine andere Dienstleistung. Das ist eine Erklärung, die wir mit einer weiteren Änderung überprüfen können.
So testen Sie die fertige Website auf dem Smartphone
Wenn ich ein Design auswähle, öffne ich die Website auf meinem Smartphone. Ich achte darauf, wie schnell der erste Bildschirm erscheint, was ich daraus erfahre und wie einfach ich den nächsten Schritt machen kann. Wenn Sie eine Seite mit einem Anfrageformular testen, versuchen Sie, es mit einer Hand auszufüllen. Ist die Schaltfläche noch erreichbar, wenn der Cookie-Hinweis erscheint? Verdeckt die Tastatur das Feld? Ist die Bestätigung nach dem Absenden sichtbar? Selbst die schönste Variante würde ich ablehnen, wenn sie mich ablenkt oder ich erst herausfinden muss, was das Unternehmen eigentlich anbietet.
So unterscheiden Sie eine langsame Website von einem unklaren Design
Messen Sie zuerst, wann der Hauptinhalt erscheint. Dafür gibt es die Kennzahl LCP. Sie erfasst, wann das größte relevante Element im sichtbaren Bereich gerendert wird - häufig ein Titelbild oder ein Textblock. Als guter LCP-Wert gelten bis zu 2,5 Sekunden beim 75. Perzentil der Besuche. Dabei werden Mobilgeräte und Desktopgeräte getrennt betrachtet. Wird das große Bild spät geladen, ist das eine konkrete Aufgabe für die Geschwindigkeitsoptimierung.[18]
Zeigt die Messung ein Problem, prüfen Sie zuerst, welches Element als größtes erfasst wurde. Ist es das Titelbild, kontrollieren Sie, ob seine URL bereits im initialen HTML zu finden ist und ob es für verzögertes Laden markiert wurde. Letzteres eignet sich für viele Bilder weiter unten auf der Seite, verzögert aber das Bild, das man sofort erwartet. Für ein kritisches Bild kann eine hohe Ladepriorität sinnvoll sein. Allen Bildern eine hohe Priorität zu geben, macht die Auswahl jedoch wirkungslos. Weist die Kennzahl auf Text hin, prüfen Sie, wann die Überschrift erscheint und wodurch sie verzögert wird, bevor Sie die ganze Bildergalerie komprimieren.[19]
Öffnen Sie für die mobile Darstellung auch eine Seite mit ungewöhnlich viel Inhalt. Prüfen Sie, ob Absätze und übliche Bedienelemente bei einer Breite von 320 CSS-Pixeln hineinpassen. Die WCAG erläutert, wie sich Inhalte mit vertikaler Leserichtung neu anordnen lassen müssen, auch für Menschen, die die Ansicht vergrößern. Elemente, deren Bedeutung von einer zweidimensionalen Anordnung abhängt, etwa manche Tabellen und Karten, sind davon ausgenommen. In der Praxis ist es ein großer Unterschied, ob Sie eine breite Logistiktabelle in ihrem eigenen Bereich verschiebbar machen oder die ganze Website nach links rutscht, nur weil eine Überschrift über den Bildschirmrand hinausragt.[20]
Sobald der Bildschirm sichtbar ist, folgt unser Drei-Sekunden-Test. Zeigen Sie ihn kurz einer Person, die das Unternehmen nicht kennt. Nehmen Sie das Smartphone weg und stellen Sie zwei Fragen. „Was bietet dieses Unternehmen an? Was würden Sie anklicken, wenn Sie die Dienstleistung brauchen?“ Die Antwort „Ich habe eine Küche gesehen, die mir gefällt, und würde mir gern die anderen Projekte ansehen“ verrät Ihnen mehr über die Qualität der Startseite als ein höfliches „Sie ist sehr modern“.
Welche Änderung Sie zuerst beauftragen sollten
Nach der Prüfung haben Sie wahrscheinlich Anmerkungen zur Schrift, zu den Bildern, zum Formular und zu einem Dutzend weiterer Details. Notieren Sie zu jedem Punkt, was die Person versucht hat und wie weit sie gekommen ist. So können Sie dem Team eine Aufgabe mit einem klaren Ziel geben.
Wenn das Budget diesen Monat nur für eine Änderung reicht, beginnen Sie mit dem Hindernis, das die Erledigung der Hauptaufgabe verhindert. Haben mehrere Hindernisse ähnliche Folgen, prüfen Sie, wie oft sie auftreten und wie viel Aufwand die jeweilige Korrektur erfordert. Betrifft das Problem nur Smartphones, sehen Sie nach, wie viele Ihrer Kunden tatsächlich ein Smartphone nutzen, und ermitteln Sie, welche Geräte betroffen sind. Schon ein kurzer Bericht wie „Beim Eingeben der E-Mail-Adresse wird die Schaltfläche von der Tastatur verdeckt“ reicht für eine erste wirksame Korrektur aus, wenn er Seite und Gerät nennt.
Bevor die nächste Version freigegeben wird, lassen Sie den Computer stehen und öffnen Sie Ihre Startseite auf dem Smartphone einer Person außerhalb des Teams. Geben Sie ihr eine konkrete Aufgabe und lassen Sie sie diese erledigen, ohne Tipps zu geben. An der Stelle, an der Sie helfen möchten, sollte die nächste Überarbeitung ansetzen.
