Microinteraction Examples - Relational Information Subtle and modern effects

Boring

This contains a lot of information. But tabular data isn't visually compelling.

John Smith Partner Chicago
Steve Smith Partner Chicago
Andrea Smith Partner Chicago
Dave Smith Partner Chicago
Thomas Smith Partner Chicago

Hover + Popup

Display the most important information upfront and then have the user engage to see more.

Patricia Smith Partner Chicago
John Smith Partner Chicago
Saul Smith Partner Chicago
Erin Smith Partner Chicago
Kevin Smith Partner Chicago
Bradley Smith Partner Chicago

Flip

Adds a more interesting display technique utilizing 3D transformations.

Bill Noodleburg
Senior Account Director
billiam@example.com
555.555.5555
Brandt Eloi
Director, Business Development
belly@example.com
555.555.5555
Kalev Pikachu
Managing Director, Strategy
kaptcha@example.com
555.555.5555

Contact Wheel

Fun way of using iconography and animation to represent data relationships.

James Smith
Partner
Victoria Smith
Partner
Andrew Smith
Partner
Samantha Smith
Partner