Micro-Interactions


steigern Aufmerksamkeit

Es sind die kleinen Dinge, die es oft ausmachen. Der Unterschied zwischen "funktioniert" und "funktioniert besser" ist oft nur eine winzige Animation, welche die Aufmerksamkeit lenkt und damit die Usability unterstützt. Ein kurzes Blinken oder leichtes Drehen, ein Wechsel der Farbe oder sanftes Wackeln zeigen dem User "ja Du hast mit dem Mauszeiger getroffen" oder "o.k. ich habe Deinen Click aufgenommen".

Ein leichter Parallax-Effekt erzeugt Tiefe und Bewegung auf dem Bildschirm, ein animiertes Aufklappen eines Menüs oder das Einfliegen von Bauteilen verursachen deutlich mehr "joy of use" als ein plumpes Erscheinen. Das weiss man an sich schon seit der Erfindung und Verbreitung von PowerPoint. 

Auf dieser Seite haben wir ein paar Beispiele zusammengestellt. Einfach so - zur Inspiration. Viel Spass dabei.

Hover-Buttons

buttonbutton

Klick-Buttons

Mobiles Menü

Counter

SomeText GoesHere

SomeText GoesHere

SomeText GoesHere

SomeText GoesHere

Live the adventure

Slide-In

Gabelbrücke

Schwinge

Carbonteile

Umlenkhebel

Gabelbruecke

Kurvenkiller par excellence

Hauptrahmen

Das Herzstueck eines schnellen Motorrads

Umlenk-Hebel

Kraftfluss - Die Richtung macht's

Schwinge

Sichere FÜhrung in jeder (SchrÄg-) Lage

Carbon-Heck

Bequemer als jedes Sofa

Dropdown

Kuchendiagramm

Diagramme

Triple Ring Chart

This describes the value of the outer ring

This describes the value of the middle ring

This describes the value of the inner ring

Column Line Chart

This is just a legend for what is happening in the column line chart

Stacked Column Chart

This is just a legend for what is happening in the stacked column chart

Bar Chart

This is just a legend for what is happening in the bar chart