Ergebnis 1 bis 7 von 7

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

  1. #1
    Der kleine Frosch
    Gast

    Frage 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 (Denkt euch die Animation bitte dazu.).
    Bsp1.jpgBsp2.JPGBsp3.JPG
    Wäre toll wenn da jemand schon Erfahrung damit hat. Vl. gibt es ja schon DIE Lösung.

    z.B. cursor:help;
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Der kleine Frosch
    Gast

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

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

  3. #3
    Teeny Avatar von styleshiet
    Registriert seit
    06.06.2012
    Beiträge
    49
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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

  4. #4
    Der kleine Frosch
    Gast

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

    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?
    Geändert von Der kleine Frosch (22.03.2013 um 14:24 Uhr)

  5. #5
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

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

    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-Code:
    <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;
    }
    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!

  6. #6
    Der kleine Frosch
    Gast

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

    Danke!

  7. #7
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

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

    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

Ähnliche Themen

  1. Erkennt Text nicht ?
    Von driver im Forum Datenbank Forum - MySQL und andere Datenbanksoftware
    Antworten: 1
    Letzter Beitrag: 19.01.2011, 14:23
  2. hover-effekt mit text bei bildern
    Von gor14984 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 17.01.2009, 18:12
  3. Bei a:hover: Text in Tabelle erscheinen lassen
    Von schrepfer im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 04.01.2006, 16:08
  4. HOVER-EFFEKT BEI TEXT?
    Von finefine im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 18.10.2005, 13:59
  5. bei hover soll text erscheinen
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 06.03.2005, 21:23

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •