⭐️ Every button should go through 3 phases of feedback to the user.
Courtesy of @ux.ale
❗Because feedback is how you let people know what your app is doing.
1️⃣ Before being pressed
🔹 Purpose: Inform of action.
Let the user know what will happen exactly if they tap the button.
🔸 Method: Label of the button. Don’t have vague labels or generic, be specific and informative.
2️⃣ During press
🔹 Purpose: Confirmation of action.
Confirm to the user that evidently the button has been pressed.
🔸 Method: Micro interaction. This could be achieved through a super simple micro interaction such as lower the opacity, changing the tint or shade of the color, making the button a bit bigger or perhaps a vibration.
3️⃣ After being pressed
🔹 Purpose: Notify system change.
An action has been requested into the system and is taking place.
🔸 Method: Loading screen (different loading animations) or jumping to another screen.
🤔 How to know which kind of interaction works best for the feedback that you want to give? Make a list of all the ones you can think of and then you just need to try them out. Make a simple mockup and put it in your phone.
✍🏻 If you have any questions, please leave them on the comments and I’ll be happy to answer them!
Hope you guys like it!
3 key phrases
Every pressed button should go through 3 phases of feedback to the user (not button states: active – disable, etc)
Before – Lobels
Just having a rectangle is not a solution. The label should inform what's going to happen when pressed.
During – “Is this working?”
Button feedback during tap allows your users to know that something has been activated.
During – “Oh no…”
In case of accidentally pressinga button, this feedback also indicates it's safe to release your finger.
After – “What's going on?”
Once released, tell or show users what action is taking place. Give them the ability to cancel their requested action.
Your interface should talk
Bonus — 4 tools that may be useful in your designer way:
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.