How to add touches of magic to the Interactions

Nov 20 · 4 min read

There’s a fine line between an interaction that has the touch of magic and one that can be completely overwhelming. The most magical interactions are a bit unexpected, simple, create an emotional response and make the user want to use it again.

Interactions with Magic

What makes an interaction truly magical is that it anticipates what the user is going to do next.

To design this type of interactive interface, you need to know your users exceptionally well. And once you have that data, then you can brainstorm ways to create those connections.

Some examples include:

  1. Browsing video data by clicking directly on characters in the video rather than using a slider;
  2. Bumping mobile devices to transfer files; and
  3. Selecting 3D point clouds just by drawing a 2D lasso.

Direct Clickability

Too often you land on a website and the elements you click don’t do anything. With more direct clickability, more elements are objects that take you to new elements and so on to create a web of clicks and links and paths that the user can take.

There aren’t enough of these interactions out there yet, but when you find it they are a lot of fun. The website for the movie, Sing, is a great example. Every element is designed to make the website feel like an interactive extension of the movie.

Bumps and Haptics

Bumps can be real or perceived, such as in the Konterball game, depending on the device type. In many of these instances, the desktop web design uses motion that users sense, but on phones or watches or VR devices, there’s a haptic element to it.

Web design, which has been virtually virtual to this point, is coming alive with touch-based interactions. Expect more interfaces that you touch and the feedback loop is closed with a physical response from the device.

Intelligent Animation

Animations are everywhere. It seems like almost every website has something moving embedded, whether it is a video clip or hover effect or loading divot.

One type of intelligent interaction might be a moving photo or cinemagraph. This technique mixes still and live-action with subtle movements or motions in a way that makes users want to look deeper into the design.

Google Entity

Entity GG

GG Sheet

GG Doc

GG Slide

GG Form

GG Draw

GG Map

GG Site


Written by

Realizing Ideas —

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade