Text Usability - Hover, Spoiler und Co. - Wie erkennt der User den Unterschied?

Der kleine Frosch

Vorwort:
Hallo, seit kurzem bin ich verliebt... in Spoiler .

Ich finde sie total nützlich, gerade auf großen Websites, wo sie dem User bei Mouseover/ Hover z.B. eine kleine Vorschau bieten, ohne den Dokumentenfluss zu (zer-)stören.

Hauptteil:
Im speziellen geht es darum Text zu gestalten. Wie kann ich es einrichten, dass der User nur vom hinsehen schon weiß:
"Ah, hier finde ich wahrscheinlich Details, wenn ich mit der Maus darüber fahre."

Im Anhang sind 3 Beispiele von Text-Spoilern in ihrer natürlichen Umgebung (Denkt euch die Animation bitte dazu.).

Wäre toll wenn da jemand schon Erfahrung damit hat. Vl. gibt es ja schon DIE Lösung.

z.B. cursor:help;

Der kleine Frosch

Oje, schaut schlecht aus^^ Keine CSS3 Freaks hier?^^

styleshiet

Zitat

Keine CSS3 Freaks hier?

Doch schon...
Aber so recht verstehe ich dein Problem nicht, Deine Beschreibung und deine Bilder sind wenig aussagekräftig.

Der kleine Frosch

Anderer Erklärungsversuch:

Wenn du in deine Fußnote schaust, siehst du eine blaue Schrift, selbst wenn es nicht eine selbsterklärende "Url" wäre, würdest du vermuten, dass es sich um einen Link handelt. Hyperlinkblau kennt jeder?!

Wie bekomme ich also für Spoiler und Hover Events ein derartige Frontend-Bekanntheit, wie für Hyperlinkblau? .

Welche Farbe würde sich gut eignen?
oder doch...
Kontur?
Schatten?
Background-Color?
Symbole?
Buttons?

Tobse

Das hat weniger mit CSS3 als mit Webdesign zu tun. Folgendes macht (auf mich) einen guten Eindruck, musst du aber eher mühevoll in ein anderes Design einbetten:

HTML

<a class="infobox">Infotext<span>zusatzinfo</span></a>

Code

a.infobox {
    background-color: #FFDEA2;
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px dotted #000;
}
a.infobox span {
    /* genauere positionierungs-definitionen */
    padding: 3px;
    background-color: #FFE6B7;
    border: 1px solid #000;
    display: none;
}
a.infobox:hover span {
    display: block;
}

Alles anzeigen

Der kleine Frosch

Danke!

lukasn

Weniger wichtig als das aussehen des Buttons ist ein Icon, in der Regel ein Pfeil oder Chevron. Zeigt er nach unten, rechnet man mit einem Dropdown. Zeigt er nach Rechts, mit einem Navigationsbutton oder eben "Read more...", um welches der beiden es sich handelt, sollte aus der Positionierung und dem Buttontext klar sein.

Schau dir als Inspiration z.B. mal das html5-Element <details> an, das bietet genau die Funktionalität an, welche du benötigst und wird meines Wissens nach in allen unterstützen Browsern mit einem dreieckigen Pfeil nach Rechts dargestellt. Eine andere Quelle für "erwartungskonforme" Bedienelemente sind moderne CSS-Frameworks wie z.B. Twitter Boilerplate.

Gruss,
-Lukas

Tags