What are Speed Dials in UI Design and How to Use Them?

Discover the speed dial UI design element, from how it translates into the user interface of apps and websites, to useful UI UX designer tips on how to create them.

We have to admit this to ourselves - shortcuts are amazing! Whether we are rushing in the morning to an important meeting and we take a less crowded route to it, or we are resumed to the last chapter in a video game because our character died so we take a faster approach to get to the point we left at, shortcuts can be life savers in many situations. 

The UI UX design universe is filled with plenty of shortcuts that help users reach their goals in a more accessible and straightforward way. One of the means by which digital designs are made more effective is through the addition of speed dials. But what exactly does this web design element represent? 

Speed dial is an essential design system element that gives the user the ability to access any link at a faster pace when there are more actions available. The links and attributes are added directly to the element and can disable, open, direction, position, ripple, and modify certain. 

Floating action buttons, also known as FABs, normally represent the notorious actions that can be found on the screen. The speed dial is one of the behaviors of a FAB, and it is a common practice for UI UX designers to integrate speed dial behaviors into them, as it has plenty of advantages for the user interface and the user experience.

As UI UX designers, it is important to be familiar with the types of speed dials that exist, so that we know in which contexts we should include them to optimize our web designs. 

• Regular. This is the most common type of speed dial and can be seen on various websites and apps’ user interfaces. 
• Mini. We should integrate mini speed dials in the UI design of smaller screens, such as for mobile phones. Besides this, mini FABs are used to maintain visual coherence with other elements of the user interface. 
• Extended. The extended speed dial should be applied to larger user interfaces.

When it comes to the anatomy of speed dials, this is quite simple and intuitive. The first component of a floating action button is the container. We will generally see these containers appear on user interfaces in the shape of a circle, as users are familiar with this specific shape for speed dials. 

The second component of a FAB is the icon, which is part of the container element. During the design process, we must pay attention to what icons we pick and make sure that they are easily accessible to our audience. 

• Common Actions. The main purpose of FABs is to help users reach links and destinations in the website or app that they interact with the most. We use them in UI UX design to represent the most encountered actions from actions, and not for features that most users would probably not even think about. Use a speed dial to create, share, or explore further actions.
• Inclusion. As UI UX designers, we are very familiar with the phrase less is more. And this is oftentimes the case for user interfaces, as adding too many elements to it could result in an overcrowded page that is difficult to navigate and inaccessible. To avoid this unfortunate income, we should only integrate speed dials when it is necessary. 
• Color. Because speed dials are UI design elements, they must support the overall visual coherence of the web page design. We should use the same color pallet as the one that we have allocated to the rest of the page, while also making sure that it stands out. For example, if our website has shades and tones of blue, we could pick something that complements those colors.
• Amount. The amount of actions we attach to our FAB is another important aspect to take into account during the design process. As a general rule, we should include at least three actions but no more than six to a speed dial.
• Contacts. If we are talking about the type of content that goes into an FAB, the contacts section is often used. 
• Placement. The position that speed dials occupy on the user interface is also relevant and should be chosen based on the context of the website or app. These can be attached to top app bars, as well as on the edge of some components, depending on the case. 
• What to avoid. There are a few things that we should stray away from adding to our speed dials. For example, overflow menus are not suitable for FABs. 

Modifier. This property has the aesthetic appearance of the component.

Ripple. if the speed dial element poses this feature, the button will have a ripple effect when the user interacts with it.

Position. This property represents the vertical and horizontal positioning of the components.

Direction. It specifies the direction the items are placed.

Disable. This represents whether the element is disabled or not.

Open. It represents whether the menu is open or not.

We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.

“You press the button, we do the rest.” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!