Resize für Bilder – aktiv ziehen
… vergleiche Eingabefelder in Kontaktformularen.
Ziehen Sie (mit der Maus halt) an der unteren rechten Ecke, können Sie das Foto (nicht proportional) vergrößern.
Die maximale Größe ist hier begrenzt (auf 200%), geht aber über kleinere Monitorränder hinweg.
Derlei könnte ja durchaus Grundlage für (raffiniertes) Design werden …
Button – aktiv klicken
Die Möglichkeiten, Bilder auf Websites aktiv durch den Nutzer vergrößert zu bekommen, sind zahlreich.
Wer den Quelltext hier liest, wird erkennen, dass eine einfache Variante gewählt wurde, um genau dies anbieten zu können:
Vergrößern: Klicken Sie bitte aufs Foto.
Verkleinern: Klicken Sie außerhalb (oberhalb oder seitlich) des Fotos.
Beide Varianten sind nicht mehr als „Skizzen“ – in der Überlegung, wohin die Reise gehen könnte.
Mikroanimationen
Mikroanimationen
sollen ja (wieder) Trend sein. Kleine animierte Bildchen, welche mitunter bei „Klick“ irgendwie reagieren, vielleicht sogar etwas (sinnvolles) machen – oder auch einfach selbstständig und ohne Pause irgendetwas tun.
Im Idealfall sollen diese Mikros die Nutzer an die Hand nehmen und diese und jene Funktion der Webseite begleiten. Sie sollen gar die Nutzererfahrung (User Experience) verbessern – und helfen, Nutzer an die jeweilige Website zu binden.
Denken wir uns dazu: Nach zwei Dutzend dieser bemühten Zappellieschen auf verschiedenen Websites ist es aber auch mal genug! Und der wieder einmal gering geschätzte Nutzer samt seinen Erfahrungen suche eher das Weite …
Bei (vom Datenvolumen gesehen) zugemüllten Websites sind animierte Preloader oder Ladebalken die richtige Wahl, um die Wartezeiten der Nutzer zu versüßen …
Allerdings, bräuchte ich einen Ladebalken für die Darstellung meiner Seiten, wäre doch die erste Überlegung, wie ich mein Werk kleiner hinbekomme und den Preloader weg …
Mir fällt für solche Trends eigentlich nie etwas brauchbares ein – und mitunter erinnern solche Mikroanimationen (zumal zuhauf) an den Charme einer gif-verseuchten Website aus den 1990 Jahren. Allein von der Schreiberei im Quelltext und dem Aufwand an CSS gesehen sind solche animierten Mikrodinger eher fragwürdig. Und es ist zu befürchten, dass die Frage nach Barrierefreiheit dieser kleinen Zappler auch eher selten gestellt wird.
Beispiele Mikroanimationen
- Hamburger-Menü-Symbol wird zu einem Schließen-Kreuz.
- Schließen-Kreuz rotiert, ändert Farbe, Größe …
- [nervig:] Kontaktsymbol fordert penetrant Aufmerksamkeit (durch Dehnung, Leuchten, Zappeln …)
- [nervig,
hover-Effekte, besonders, wenn kaum zu umgehen:] horizontale Inhaltsboxen ändern bei Mauskontakt ständig Ihre Größe und derlei … - [total nervig als
hover-Effekt:] Mikro-Animation mutieren zu Makro-Animation
Beispiel Mikro-Animation zu Makro-Animation via (selbst bestimmten) „Klick“.
„Klick“ oberhalb oder neben der Animation macht`s wieder klein:
Idee kommt von meiner Spielwiese aus 2022: A large universe of documents
.