fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

3 key phrases of a simple button


Tegra - January 21, 2020 - 0 comments

⭐️ Every button should go through 3 phases of feedback to the user.

Courtesy of @ux.ale

❓Why? ⁣
❗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! ⁣

Every pressed button should go through 3 phases of
feedback to the user (not button states: active - disable, etc)

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

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 – “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.

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.

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

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.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *