25May, 2020
Language blog :
English
Share blog : 
25 May, 2020
English

Basic techniques of button design

By

4 mins read
Basic techniques of button design

Make buttons look like buttons.

One of the most essential thing of the user interface is users need to know instantly what is "clickable" and what's not. Create the buttons by using appropriate visual signifiers (such as size, shape, color, shadow, etc.) to make the element look like a button. PLEASE DO NOT ASSUME THAT YOUR UI IS ALREADY OBVIOUS FOR YOUR USERS. In many cases, designers intentionally don't identify buttons as interactive elements because they assume the interactive elements are obvious for users. When designing an interface, you should always keep in mind that "Your ability to interpret clickability signifiers aren't the same as your users' because you know what each element in your design is intended to do."

Use familiar designs for your buttons

Here are a few examples of buttons that are familiar to most users :

  • Solid button with square borders
  • Solid button with round corners
  • Solid button with shadows.
  • Ghost button
Familiar designs for buttons

Don't play hunt-the-button game with your users

Buttons should be located in places where users can easily find them or expect to see. If users can't find a button, they won't know that it exists. Test your design on discoverability. When users first navigate to a page that contains some actions that you want them to take, it should be easy to spot an appropriate button for the user.

Label buttons with what they do

Buttons with generic or misleading labels can be a huge source of frustrations for your users.
Users should clearly understand what happens when they click on a button. Let see a simple example, Imagine that you accidentally triggered a remove action, and now you see the following error message.

It's not clear what does "Ok" and "Cancel" represent in this dialog. Most users will ask themselves, "What happens when I click on "Cancel"?Instead of using "Ok" label, it's better to use "Remove." This will make it clear what this button does for the user. Also, if the button is a potentially dangerous operation, you can use red color to state this fact.

Label buttons

Proper size for your buttons

Button size should reflect the priority of this element on the screen. A large button means more important action and it's important to make the buttons finger-friendly for mobile users.

Proper size for buttons

Avoid using too many buttons

This is a common problem for many apps and websites. When you provide too many options, your users end up doing nothing.

Avoid using too many buttons

Last but not least, provide visual or audio feedback on the interaction

When users click or tap on the button, they expect that the user interface will respond with appropriate feedback. Based on the type of operation, this might be either visual or audio feedback. When users don't have any feedback, they might consider that the system didn't receive their command and will repeat the action. Such behavior often causes multiple unnecessary operations.

Why is this happening? As humans, we expect some feedback after we interact with an object. It might be visual, audio, or tactile feedback, anything that acknowledges the fact that interaction was registered.

If you find this interesting, don't forget to subscribe to get the latest articles or check out all Design articles here.

Thank you information from https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

12
July, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
12 July, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
12
July, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
12 July, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
12
July, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
12 July, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.