Basic types of buttons in user interfaces
•Download as PPTX, PDF•
1 like•316 views
Buttons are among the most popular interactive elements of a user interface. What’s more, they are vital in creating solid interactions and positive user experience: allow a user to directly communicate with the digital product and send the necessary commands to achieve a particular goal.
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Basic types of buttons in user interfaces
- 1. www.tmasolutions.co m Basic Types of Buttons in User Interfaces
- 2. Table of Contents I. Definition of Button II. Types of Buttons 2 o CTA Button o Text Button o Dropdown Button o Hamburger Button o Plus Button o Expendable Button o Share Button o Ghost Button o Floating Action Button (FAB)
- 3. I. Definition of Button 3
- 4. I. Definition of Button 4
- 5. I. Definition of Button 5
- 6. II. Types of Buttons 6
- 7. II. Types of Buttons 7 o CTA Button o Text Button o Dropdown Button o Hamburger Button o Plus Button o Expendable Button o Share Button o Ghost Button o Floating Action Button (FAB)
- 8. II. Types of Buttons 8 CTA (Call To Action)
- 9. II. Types of Buttons 9 Text Button
- 10. II. Types of Buttons 10 Text Button
- 11. II. Types of Buttons 11 Dropdown Button
- 12. II. Types of Buttons 12 Dropdown Button
- 13. II. Types of Buttons 13 Hamburger Button
- 14. II. Types of Buttons 14 Plus Button
- 15. II. Types of Buttons 15 Expendable Button
- 16. II. Types of Buttons 16 Share Button
- 17. II. Types of Buttons 17 Share Button
- 18. II. Types of Buttons 18 Ghost Button Ghost Button
- 19. II. Types of Buttons 19 Floating Action Button (FAB)
- 20. II. Types of Buttons 20 Floating Action Button (FAB)
- 21. II. Types of Buttons 21 Floating Action Button (FAB)
- 22. Summary 22 CTA (Call To Action) Text Button Dropdown Button Hamburger Button Plus Button Expendable Button Share Button Ghost Button Floating Action Button (FAB)
- 23. THANK YOU! + 1 802-735-1392 + 61 414-734-277 +81 3-6432-4994 www.tmasolutions.com NorthAmerica number: Australia number: Japan number: Website: +84 8 3997-8000 Ext: 5639 +84 908-676-212 +84 8 3990-3303 sales@tmasolutions.com Tel: Mobile: Fax: Email:
Editor's Notes
- Buttons are among the most popular interactive elements of a user interface. What’s more, they are vital in creating solid interactions and positive user experience. Today, I will introduce the definitions and examples for the widely used types of buttons we daily seen on websites and mobile apps. Các nút là một trong những yếu tố tương tác phổ biến nhất trong thiết kế giao diện người dùng. Hơn nữa, nó cũng rất quan trọng trong việc tạo ra các tương tác và trải nghiệm người dùng hiệu quả. Hôm nay, tôi sẽ giới thiệu các định nghĩa và ví dụ cho các loại nút được sử dụng rộng rãi mà chúng ta thấy hàng ngày trên các trang web và ứng dụng di động.
- Button is a control that allows a user to directly communicate with the digital product and send the necessary commands to achieve a particular goal. For example, it may be the task to send an email, buy a product, download some data or a piece of content, turn on the player and tons of other possible actions. One of the reasons why buttons are so popular and user-friendly is that they efficiently imitate interaction with the objects in the physical world.(button turn on/off the light in the room,…) Nút là một điều khiển cho phép người dùng giao tiếp trực tiếp với sản phẩm kỹ thuật số và gửi các lệnh cần thiết để đạt được một mục tiêu cụ thể. Ví dụ, khi chúng ta muốn gửi email, mua sản phẩm, tải xuống một số dữ liệu hoặc một phần nội dung, bật trình phát và hàng tấn hành động có thể khác thì chúng ta cần một button để thực hiện các hành động trên.
- One of the reasons why buttons are so popular and user-friendly is that they efficiently imitate interaction with the objects in the physical world.(button turn on/off the light in the room,…) Một trong những lý do tại sao các button trên web và app rất phổ biến và thân thiện với người dùng là vì chúng mô phỏng một cách hiệu quả sự tương tác của chúng ta với các vật thể trong thực tiễn cuộc sống như các nút bật tắt đèn, quạt hay thậm chị các nút trên remote điều khiển máy điều hòa.
- Ví dụ về chức năng button trong thiết kế UI: Khi người dùng ấn vào bất kì một button nào tren trang này thì đều thực hiện 1 lệnh hay hành động nào đó như xem hình preview của room style theo category, hiển thị thông tin hay chuyển sang trang kế tiếp,....
- Nút kêu gọi hành động (CTA) là một yếu tố tương tác của giao diện người dùng mà nhằm mục đích khuyến khích người dùng thực hiện một hành động nhất định. Hành động này trình bày một chuyển đổi cho một trang hoặc màn hình cụ thể (ví dụ: mua, liên hệ, đăng ký, v.v.). về mặt kỹ thuật, nó có thể là bất kỳ loại nút nào được hỗ trợ với văn bản gọi hành động. Điều khác biệt với tất cả các nút khác trên trang hoặc màn hình là bản chất hấp dẫn của nó: nó phải thu hút sự chú ý và kích thích người dùng thực hiện hành động cần thiết.
- Một nút được trình bày với một từ, cụm từ hay 1 đoạn văn bản. Các nút này được đánh dấu bằng màu hoặc gạch chân và cũng có thể ko cần nhắn bằng yếu tố màu sắc nào cả ví dụ navigation trên header của web Ecommerce trong hình, với trải nghiệm người dùng quen thuộc trên nền tảng web, thì người dùng sẽ tự mặc định / hiểu đó là các text button để chuyển đến các nội dung khác của trang web. Tóm lại : Các nút văn bản thường được sử dụng để tạo các vùng tương tác phụ mà không làm sao lãng các điều khiển chính hoặc các yếu tố CTA.
- Một nút được trình bày với một từ, cụm từ hay 1 đoạn văn bản. Các nút này được đánh dấu bằng màu hoặc gạch chân và cũng có thể ko cần nhắn bằng yếu tố màu sắc nào cả ví dụ navigation trên header của web Ecommerce trong hình, với trải nghiệm người dùng quen thuộc trên nền tảng web, thì người dùng sẽ tự mặc định / hiểu đó là các text button để chuyển đến các nội dung khác của trang web. Tóm lại : Các nút văn bản thường được sử dụng để tạo các vùng tương tác phụ mà không làm sao lãng các điều khiển chính hoặc các yếu tố CTA.
- Dropdown button (Nút thả xuống) : khi bạn nhấp vào nó, sẽ hiển thị danh sách các lựa chọn cho người dùng chọn để thực thi. Mục đích của loại button này là gộp các lệnh lại chung trong 1 button để tiết kiệm dc không gian thiết kế cũng như giải quyêt được trường hợp có quá nhiều lệnh tương đồng đứng gần nhau.
- Ví dụ khác cho dropdown button
- Hamburger Button hay còn gọi là Menu button. Mục đích chính của button là giúp ẩn đi menu chính của trang hay ứng dụng. Khi bạn bấm hoặc chạm vào nó, menu sẽ mở rộng. Sỡ dĩ nó dc gọi là hamburger là do hình thức icon của buttonay làm bằng ba đường ngang trông giống như bánh mì kẹp thịt thông thường. Ngày nay, nó là một yếu tố tương tác được sử dụng rộng rãi của bố cục web và di động. Ưu điểm: giải phóng không gian làm cho giao diện tối giản và thoáng hơn, tiết kiệm rất nhiều không gian cho các yếu tố bố trí quan trọng khác, làm cho giao diện trông hài hòa trên các thiết bị khác nhau. Nhược điểm: yếu tố thiết kế này có thể gây nhầm lẫn cho những người không sử dụng trang web hay ứng dụng thường xuyên.
- Được nhấp hoặc gõ, nút cộng cho phép người dùng thêm một số nội dung mới vào hệ thống. Tùy thuộc vào loại ứng dụng, nó có thể là một bài đăng mới, thêm 1 liện hệ mới trong danh bạ, ghi chú,…
- Nút này mở ra một loạt các tùy chọn sau khi được nhấp hoặc gõ. Đây cũng là một cách nữa để thiết lập luồng tương tác thích hợp mà không làm quá tải màn hình, đặc biệt quan trọng đối với các giao diện di động bị giới hạn trong không gian màn hình. Ví dụ về ứng dụng lên kê hoạch du lich, người dùng thông qua expendable button phía dưới bottom bar để mở ra và chọn các loại hoạt động cần lên kế hoạch ngay lập tức ở màn hình đầu tiên mà không cần phải qua nhiều trang hay tác vụ khác.
- Với sự phổ biến cao của các mạng xã hội, Share button đã trở nên khá quên thuộc với những ai tham gia vào cộng động mạng xã hội. Nút loại này cho phép chia sẻ nội dung hoặc thành tích trực tiếp lên các tài khoản mạng xã hội
- Còn đối với website 1 doanh nghiệp các button có chức năng như 1 công cụ quảng bá giới thiệu hình ảnh, hoạt động của doanh nghiệp khi người xem click vào để dẫn họ đến các mạng xã hội, Fanpage của doanh nghiệp. Thông thường các button share này dc thiết kế 1 cách tối giản, phần lớn chỉ sử dụng icon các mạng xã hội và dc bố trí ở một góc phụ nào đó của thiết kế, cho phép người dùng tập trung vào chức năng chính nhưng vẫn luôn thấy các dấu hiệu truy cập nhanh vào hồ sơ xã hội của họ.
- Ghost button là một nút trong suốt trông trống rỗng, hay nói cách khác đây là button phụ. Button này thường dc thiết kế chỉ với border shape vs text. Loại nút này giúp thiết lập hệ thống phân cấp thị giác trong trường hợp có một hay nhiều các button chính trong cùng 1 trang, để thể hiện rõ hơn mức đọ ưu tiên cho các button.
- Trong Material Design ,nút hành động nổi (viết tắt là FAB) là nút thể hiện hành động chính trên màn hình ứng dụng. Thông thường, nó có một nút biểu tượng tròn nâng lên trên nội dung trang khác. Nút này thường cho phép truy cập tức thì vào các hành động thiết yếu hoặc phổ biến mà người dùng thực hiện với ứng dụng.
- Trong Material Design ,nút hành động nổi (viết tắt là FAB) là nút thể hiện hành động chính trên màn hình ứng dụng. Thông thường, nó có một nút biểu tượng tròn nâng lên trên nội dung trang khác. Nút này thường cho phép truy cập tức thì vào các hành động thiết yếu hoặc phổ biến mà người dùng thực hiện với ứng dụng. Dựa vào mục đích của người design mobile app mà floating button có thể: thực hiện 1 hành động chính như CTA, ví dụ trong hình FAB để chuyển sang 1 screen new email.
- Hiển thị các hành động bổ sung