UI Design: Basic Types of Buttons in User Interfaces
Buttons hold a prominent position as interactive components within a user interface, garnering widespread popularity. Their significance lies in their ability to foster seamless interactions and enhance the overall user experience. In this installment of our UI/UX glossary series, we present a comprehensive compilation of definitions and illustrative examples for various types of buttons commonly encountered in websites and mobile applications.
What Is a Button?
A button serves as an interactive element that facilitates the receipt of expected feedback from a system upon executing a specific command. Essentially, it acts as a control mechanism enabling direct communication between users and digital products, allowing them to send commands to accomplish specific goals. For instance, buttons can be employed to send emails, make purchases, download data or content, activate a media player, and countless other actions. One of the primary reasons behind the widespread popularity and user-friendliness of buttons is their ability to emulate interactions with physical objects.
In contemporary user interfaces, buttons exhibit a remarkable diversity and serve a multitude of purposes. Typically, these interactive zones are clearly delineated for enhanced visibility, featuring distinct geometric shapes and often accompanied by explanatory text that describes the intended action triggered by the button. Designers invest significant time and effort into crafting effective and attention-grabbing buttons that seamlessly integrate into the overall stylistic concept while providing sufficient contrast to stand out within the layout.
Now, let’s explore the various types of buttons extensively utilized in both mobile and web interfaces.
CTA Button
A call-to-action (CTA) button serves as an interactive element within a user interface with the primary purpose of encouraging users to take specific actions. These actions typically lead to conversions for a particular page or screen, such as making a purchase, contacting, subscribing, and more. In essence, a CTA button transforms a passive user into an active one. Technically, a CTA button can take on various forms as long as it is accompanied by a call-to-action text. What sets it apart from other buttons on the page or screen is its captivating nature: it must grab attention and motivate users to perform the desired action.
Text Button
In this context, the terminology is straightforward: text buttons are presented solely as text without any specific shapes, filled backgrounds, or visual indicators typically associated with buttons in the physical world. The text itself serves as the visual representation of the button. However, despite lacking traditional button aesthetics, these text buttons remain interactive controls that allow users to engage with the interface. They may be accompanied by color highlighting or underlines to indicate their interactive nature.
In the context of website headers, text buttons often serve as connectors between users and core content sections of the website. In such cases, they are not explicitly marked as buttons since most elements within the header zone are interactive by default. Text buttons are commonly used to create secondary interactive zones without overshadowing the main controls or primary call-to-action (CTA) elements.
Dropdown Button
A dropdown button is a type of button that, when clicked, reveals a drop-down list containing mutually exclusive items. This type of button is commonly found in settings menus. When a user selects an option from the list, it is typically visually indicated as active, often through color differentiation.
Hamburger button
Another commonly known interactive element is the hamburger button, which serves as a toggle for hiding and revealing a menu. When clicked or tapped, the menu expands to display its contents. The name “hamburger” comes from the button’s three horizontal lines, resembling a stacked hamburger. Although widely used in web and mobile layouts, discussions regarding its pros and cons persist.
Frequent internet users are accustomed to the hamburger button, understanding that it conceals various categories of website content without the need for additional explanations. One of the advantages is that it frees up space, contributing to a more minimalist and spacious interface. From a functional standpoint, it allows room for other essential layout elements. Additionally, it proves beneficial for responsive and adaptive design, concealing navigation elements and creating a harmonious interface across different devices.
Critics of the hamburger menu argue that its design can be confusing for infrequent website users, potentially leading to navigation issues and a subpar user experience. The abstract nature of the hamburger icon can mislead users. Therefore, the decision to implement the hamburger button should be based on user research and an understanding of the target audience’s abilities and needs.
While the use of hamburger menus remains a topic of debate in modern web and app design, they are still widely utilized.
Plus Button
The plus button, when clicked or tapped, allows users to add new content to the system. The specific action triggered by the plus button depends on the type of app and its functionality. It can be used to create new posts, contacts, locations, notes, or items in a list — essentially, any fundamental action relevant to the digital product.
In some cases, when users tap the plus button, they are directly taken to a modal window or screen dedicated to creating the content. In other instances, there may be an intermediate stage where users are presented with additional options to choose from, making the process of adding content more focused and customizable.
Share Button
With the widespread popularity of social networks, chat platforms, and email services, social sharing buttons have become essential for connecting app or website content to a user’s social profile. These buttons simplify the process of sharing content or achievements directly to social networking accounts. They are typically presented with recognizable icons that feature the brand sign of specific social networks.
In contemporary design, if sharing is not the primary action expected from the user on a particular page, the social sharing buttons may not be explicitly marked as traditional buttons. Instead, only the icons representing the social networks are displayed without additional shapes, color markings, or underlining. This approach promotes minimalism, efficient use of negative space, and allows users to focus on the main functionality while still providing visible access points to their social profiles.
Ghost Button
A ghost button is a transparent button that appears empty or “hollow” in design. It is sometimes referred to as an “empty,” “hollow,” or “naked” button. The visual indication that it is a button is typically provided by a thin border surrounding the button’s copy.
Ghost buttons are useful for establishing visual hierarchy when multiple call-to-action (CTA) elements are present. The primary CTA is typically presented as a filled button, while secondary CTAs are given as ghost buttons. This distinction helps prioritize the main action while still providing access to secondary options.
For example, consider a sign-up screen. The screen showcases buttons of three different types. The core CTA, representing the most popular and easy way to sign up quickly, is presented as a filled button. The ghost button offers access to a less popular option, serving as a secondary CTA. Additionally, a text button integrated into the next line acts as an answer to a question and is marked with color. This approach effectively establishes a solid visual hierarchy for the buttons on the screen.
By using ghost buttons alongside filled buttons and text buttons, designers can create a clear visual distinction between primary and secondary CTAs, guiding users towards the desired actions while maintaining a visually pleasing interface.
Floating Action Button (FAB)
In Material Design, the floating action button (FAB) serves as the primary action button on an app screen. It is typically a round icon button that appears elevated above other content on the page. The FAB provides instant access to essential or frequently used actions within the app. Depending on the mobile application’s design and information architecture, the FAB can:
1. Perform a core action: It can trigger actions such as opening a new email screen, initiating the addition of photo or video content, or searching for specific content in the gallery.
2. Show additional actions: The FAB can expand or display a menu of secondary actions related to the primary function.
3. Transform into other UI elements: In certain cases, the FAB can transform into different UI elements or adapt its appearance based on the app’s context or user interaction.
The position of the FAB on the screen is typically determined by the need for high visibility and can vary based on the overall design concept of the app’s screens. It is generally recommended to use only one FAB per screen to avoid overwhelming the user and to maintain focus and clarity.
For instance, consider a flow of interactions for a traveler’s diary app that incorporates a bottom app bar, an overlapping FAB, and a woven image list. This design concept utilizes the FAB to provide a central and easily accessible button for performing primary actions related to the app’s purpose.
By implementing the FAB according to Material Design principles, designers can create intuitive and efficient user interfaces, allowing users to quickly access key functionalities while maintaining a visually appealing and coherent app design.
Factors of Effective Button Design
Size: The size of a button plays a crucial role in informing users about its importance and establishing a visual hierarchy. A well-designed call-to-action button should be large enough to be easily located but not excessively big to disrupt the overall layout structure. Industry leaders often provide recommendations for button sizes in their design guidelines. For instance, Apple suggests that CTAs in mobile UI should be at least 44x44 pixels, while Microsoft recommends 34x26 pixels. When designing for mobile, it is essential to adhere to these guidelines to minimize the risk of app rejection due to poor UI design.
Color: Color selection is vital in making buttons easily noticeable and distinguishing between primary and secondary actions. Colors have a significant impact on human mood and behavior, making them powerful tools in design. When choosing colors for CTAs, it is important to ensure sufficient contrast between the button and the background to make the button stand out from other UI components.
Shape: Call-to-action buttons often take the form of horizontal rectangles, as this shape is universally recognized as clickable and interactive. Additionally, it is recommended to design CTAs with rounded corners, as they draw attention to the button’s content. The decision to use rounded corners should align with the overall stylistic concept of the webpage or mobile app screen.
Placement: Proper placement of buttons is crucial in establishing a clear visual hierarchy and facilitating navigation. Buttons should be positioned in areas where users’ eyes naturally scan, ensuring that other visual aspects, such as color and size, effectively draw attention. Designers should identify the most scannable areas and place buttons with core functionality along the user’s path.
Copy: The microcopy of a button, though short, should be powerful and attention-grabbing. It is often presented in capital letters to enhance its attractiveness within the layout. However, the decision to use capital letters depends on the overall design concept, typography, and desired tone of the text message.
Taking a look at the landing page design for a kindergarten, we can analyze the various buttons used:
1. The core call-to-action (CTA) button inviting visitors to join is instantly noticeable. It is designed as a rounded rectangular filled button with a color that contrasts with the background while visually connecting to the animated hero image. The CTA text is displayed in a simple, readable font, using all capital letters.
2. The header features four text buttons that connect users to important content sections on the website.
3. The left part of the header features a secondary CTA button, quickly scannable, allowing registered users to access their accounts.
4. The share buttons are presented in round shapes, but they do not possess high color contrast to avoid distracting users from the main CTA.
This is just an overview of the different types of buttons, and we will continue exploring and providing more UI design examples in our upcoming posts. Stay tuned for updates.
