Design with Physics

Quantum Newton’s Cradle

We all know that two bodies can’t occupy the same physical space. This kind of logic should be present in all our designs… I can’t travel from Porto to Lisbon, by train, without crossing the D. João bridge too, right? And what a great view it is, this part of the journey… you can actually see the Douro river in the middle of Porto and Gaia, with all these lovely old houses piled on top of one another, illuminated by streaming shafts of sun. I really love it and that is when magic happens, the emotion of this path.

Basically, the path of emotions goes hand to hand with the physics logic, when designing for our end user.

I actually wanted to name this article “Design for Emotion” (so worn out), but not everything produces good emotions, like when a design does not make sense, is sloppy, or even when transitions are too heavy emphasizing the focus and needs of the product. This actually gives bad emotions to the user. This is why physics is so important — the brain’s interpretation of these digital behaviours should be familiar to the user, could be a nice surprise like “crossing the bridge”, but it has to make sense.

“Doesn’t matter how practical your product is unless the user actually enjoys it. “

Creative Bloq Staff

This is true, but “enjoys”, here, doesn’t mean they will say something nice to their friends about the product design, or share it because of the aesthetic look! They enjoy it because it’s simple, it actually works and answers their needs. Instead of a Human-Computer experience, we should think Human-Humanised experience.

“Animation is more than just a “pretty face”… it’s smooth and enhances the entire experience”

Creative Bloq Staff

Next you’ll see some examples where keeping your design pursuant of physics rules can help users understand their actions:

Mailchimp email’s sent!

We’re hardwired to pay attention whenever we see something move. This works with “well done” tasks and with “are you sure?” tasks, this way the user feels always on track.

Mailchimp Caution! Do you really want to send this?

These animations re-enforce the responsibility of user actions at some point. This feeling is really important when you are dealing with clients or communities.

“Nothing feels more unnatural than a sudden change, because sudden changes just don’t exist in the real world.“

Adrian Zumbrunnen

Left: static scroll ✖️ – Right: smooth scroll ✔️

Upload file behaviour (k.im demo)

Upload button behaviour (k.im demo)

When the user understands the behaviour of the components (and these are only tiny examples👆) or the entire product, they are more patient and will be more pleased with the transitions, creating a certain empathy and control over the UI.

His face! x) How he do that?!💭

Consistent Design = Connected People (users)

This is a mindset we should keep when we are creating something, even if it means being bold/extravagant or simple/clean with some aesthetic look. It depends on what you want to communicate and for whom!

When our commitment to designing has always the same purpose and message, we are connecting with our users, so when we have this in mind, we have to be consistent with physics rules of real world too — to create engagement and familiar feelings, to be natural for the user.

Users always remember how the product makes them feel, not exactly what it looks like!

Thank you for your time ❤ See you later!

#madewithmoxy