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

    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 :rolleyes: (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;

    Zitat

    Keine CSS3 Freaks hier?


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

    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de

    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? :smilie085: .

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

    Einmal editiert, zuletzt von Der kleine Frosch (22. März 2013 um 13:24)

    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>

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    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