Notizvorlagen-Website: Schreibflächen und Beschriftungen in der Demo trennen

Ausgangslage

Eine Website für Notizvorlagen zeigt in einer interaktiven Demo, wie eine Seite benutzt werden kann. Besucher tippen in die Vorschau und erwarten, dass sie in Schreibflächen schreiben. Doch auf der Demo gibt es auch erklärende Beschriftungen, etwa „Hier steht das Datum“ oder „Beispiel: Montag“. Wenn beides gleich aussieht und sich gleich verhält, wissen Besucher nicht, was später in der Vorlage vorhanden ist und was nur Demo-Hilfe war. Dieser Artikel schlägt einen Ablauf vor, der Schreibflächen und Beschriftungen trennt. Alle Beispiele sind erfundene Beispieleingaben, keine beobachteten Kundenergebnisse.

Eingaben

Erfassen Sie jedes Element der Demoseite in einer Liste mit vier Angaben: Name des Elements, Art, Zugehörigkeit und Verhalten. Mögliche Arten sind „Schreibfläche“, „feste Beschriftung der Vorlage“ und „Demo-Erklärung“. Die Zugehörigkeit lautet „gehört zur gelieferten Vorlage“ oder „nur in der Demo“. Das Verhalten lautet „bearbeitbar“ oder „nicht bearbeitbar“.

Zusätzlich legen Sie einen kurzen Hinweistext für die Demo fest, der erklärt, wie Elemente unterschieden werden. Ob Sie dafür Farben, Rahmen oder Symbole nutzen, ist Ihre Gestaltungsentscheidung. Entscheidend ist nur, dass die Unterscheidung nicht allein von der Farbe abhängt.

Entscheidungswege

Gehen Sie die Elementliste durch.

Fall A: Schreibfläche, gehört zur Vorlage. Sie ist bearbeitbar und erkennbar als Eingabefeld, zum Beispiel mit sichtbarem Rahmen und einem Platzhalter wie „hier schreiben“. Der Platzhalter ist kein Inhalt und verschwindet, sobald jemand tippt.

Fall B: Feste Beschriftung der Vorlage, etwa die Überschrift „Wochenplan“. Sie ist nicht bearbeitbar. Ein Klick darauf öffnet keinen Eingabecursor. Sie erscheint auch in der gelieferten Vorlage.

Fall C: Demo-Erklärung, etwa eine Sprechblase „Hier trägst du das Datum ein“. Sie ist nicht bearbeitbar und trägt einen deutlichen Vermerk „nur Demo“. Sie gehört nicht zum Lieferumfang. Eine Schaltfläche „Erklärungen ausblenden“ ist hilfreich, aber optional. Bietet die Demo sie an, muss sie per Tastatur erreichbar und bedienbar sein.

Fall D: Ein Element lässt sich nicht eindeutig einordnen. Dann wird es nicht in die Demo übernommen, bis die Zugehörigkeit geklärt ist.

Wenn Besucher Text in eine Schreibfläche eingeben, bleibt er nur in der Demo bestehen. Die Seite sagt das einmal klar und speichert nichts auf dem Server, sofern Sie das nicht ausdrücklich anders entscheiden und gesondert beschreiben.

Stoppbedingungen

Veröffentlichen Sie die Demo nicht, wenn eine Demo-Erklärung wie ein Teil der Vorlage aussieht, wenn eine feste Beschriftung ein Eingabecursor-Verhalten zeigt oder wenn eine Schreibfläche ohne erkennbaren Rahmen oder Platzhalter erscheint. Ebenfalls stoppen, wenn die Unterscheidung nur über Farbe funktioniert, die jemand mit Sehschwäche womöglich nicht wahrnimmt.

Beispiel mit erfundenen Daten

Die Beispielvorlage „Wochenplan“ hat eine feste Überschrift, sieben Schreibflächen für Tage und eine Datumszeile. In der Demo erscheint zusätzlich eine Erklärung „Beispiel: Montag, Einkauf erledigen“. Elementliste: Überschrift ist Art B, nicht bearbeitbar. Die sieben Tagesflächen sind Art A, bearbeitbar, mit Rahmen und Platzhalter. Die Datumszeile ist Art B. Die Erklärung ist Art C und trägt den Vermerk „nur Demo“. Wer die Erklärung anklickt, erhält keinen Eingabecursor. Wer „Erklärungen ausblenden“ wählt, sieht genau die Elemente, die später in der Vorlage stehen.

Abnahmetest

Lassen Sie eine Person, die die Vorlage nicht kennt, in der Demo drei Aufgaben erledigen. Erstens: In jede Schreibfläche ein Wort tippen. Zweitens: Auf jede Beschriftung klicken und sagen, ob das Element später in der Vorlage steht. Drittens: Die Erklärungen ausblenden und beschreiben, was übrig bleibt.

Der Test gilt als bestanden, wenn alle Schreibflächen Text annehmen, keine Beschriftung Text annimmt, die Person alle Elemente richtig dem Lieferumfang zuordnet und die Unterscheidung auch dann gelingt, wenn die Seite in Graustufen betrachtet wird. Prüfen Sie zusätzlich mit der Tastatur, ob die Tabulatortaste nur die Schreibflächen und die Schaltfläche „Erklärungen ausblenden“ anspringt, nicht aber feste Beschriftungen oder Demo-Erklärungen, und ob sich die Schaltfläche mit Enter oder Leertaste bedienen lässt.

Fazit

Eine Demo überzeugt, wenn Besucher sicher wissen, wo sie schreiben dürfen und was nur erklärt. Mit einer Elementliste, drei Arten, einem klaren Hinweis und einem kurzen Test mit einer unbefangenen Person trennen Sie Schreibflächen, feste Beschriftungen und Demo-Erklärungen sauber voneinander. So erwarten Käufer genau das, was sie später erhalten.

Quellen