The Power of UI Interactions

Mobile > App > Design > Interactive Design > Animations

Interactive UI design is a huge driver for usability and engagement of an app. And the most successful app category — Games —got a lot of experience with that topic. Think of this one day when Pokemon Go launched first. Sure, the app was adding social features and the well-known story and brand of the fictional creatures called Pokemon. But the gaming experience was not new at all. Treasure hunt apps with geocaching technology — which work in a very similar way — have been in the app stores since the early days. And some of them were really fun to play, like Pokemon Go. But none of these apps had significant success. One key differentiator of the Pokemon app and many other successful games is the usage of moving elements, the so called UI interactions. They grab the users attention, communicate status and provide feedback, enhance the sense of direct manipulation and help users visualize the results of their actions. Also they look fancy and increase the brand’s value.

The evolution of Super Mario Kart from 1992's SNES edition to 2014's Wii edition (Mario Kart 8) is a very good example of the power of UI interactions.

The evolution of Super Mario Kart from 1992 SNES edition to 2014 Wii edition (Mario Kart 8)

I believe that other apps should learn from gaming apps and improve their UI interaction concepts. This Medium post should help you get inspired. It is a collection of beautiful, hand-picked animation concepts by great designers from all around the world.

The collection is structured in chapters (use “Cmd+F” to jump):

1. Login / 2. Open Details / 3. Chat / 4. Add Items / 5. Menu / 6. Map / 7. Onboarding / 8. Filter / 9. Refresh / 10. Swipe / 11. Tab Bar / 12. Notifications / 13. Loading / 14. Other

The top five animation artists (by mentions) of this collection are:

1. Login

by Jakub Antalík 😎
by Anton Aheichanka 🍋

2. Open Details

by Abhinav Chhikara
by Hila Peleg
by Cuberto
by Ramotion 🍉
by Dmytro Prudnikov 🚀
by Frank Lau 🍒
by SteelKiwi Dev. 💍
by Leo Leung 😅
by Charles Patterson 🍄
by Jakub Antalík 😻
by Sergey Valiukh 🐎
by Sergey Valiukh 🍀
by Leo Leung 🌷

3. Chat

by Srikant Shetty 🎹
by Émilie BADIN 💡
by Gal Shir ⏳
by Jakub Antalík 🌄

4. Add Item

by CreativeDash
by Ludmila Shevchenko
by Jakub Antalík 🎱
by Cuberto 🍋
by Sergey Valiukh ☃️

7. Onboarding

by Vasjen Katro ⚽️
by Clay 🚀
by Ramotion ⚓️

8. Filter

by Leo Leung 🎎
by Dmytro Prudnikov 🔭
by Anton Aheichanka 🔮

9. Refresh

by Zee Young 💊
by Anastasiia Andriichuk 🌅
by Ramotion 🚎
by Sergey Valiukh 🏀
by Dmytro Prudnikov 🍎
by Ramotion 🐛

10. Swipe

by Stan Yakusevich 😈
by Stan Yakusevich 👊
by Sergey Valiukh 👏🏾
by Charles Patterson 🤖
by Rustem Sirazetdinov 👽
by shuishouge 👀
by Antonio Junior 🙏🏼
by Leo Leung 😈
by Sergey Valiukh 👼🏻

11. Tab Bar

by Karol Ortyl 😹
by Ramotion 😀
by Sergey Valiukh 🌿

12. Notifications

by JuusanDo ❤️
by Dylan
by JuusanDo 😬

13. Loading

by Zach Roszczewski 🛁
by Petr Had Sketch book ⛱
by Colin Garven 🎲
by SteelKiwi Dev. 😜

14. Other

by Gal Shir 📱
by Eddie Lobanovskiy 👻
by Anton Aheichanka 👋
by Jona Dinges 🙌
Interactive Button by Ramotion 🐶
by Leo Leung 🐳
by Petr Knoll 🐻
The Wheel by CreativeDash 🐼
3D Finance Chart by CreativeDash 🐦

Get more articles like this? Follow me on Medium or signup for the weekly newsletter