Should I add arrow indicators to dropdown-style buttons in my mobile app, or is it unnecessary visual clutter?

Question

I’m designing a video generation mobile app and have a prompt entry screen with option buttons at the bottom. Each button (e.g., Model, Duration, Aspect Ratio) opens a small selection menu.

Here’s how it looks now (no arrows):

When I showed this to a few people, I got feedback that it wasn’t obvious these buttons open a list of choices. My concern is that if I add arrow indicators (chevrons), the interface may start to feel visually cluttered, since the buttons already have icons and text.

My questions are:

1. From a UX perspective, is it worth adding arrow indicators to make the affordance clearer, even if it increases visual noise?

2. Would having both an icon and an arrow icon on the same button feel redundant to most users?

3. Are there alternative patterns to signal that a button opens a list, without relying on arrows?

I’d love to hear thoughts on best practices here—particularly for mobile apps where screen space and clarity are both at a premium.

Answer 1

You ask the right questions:

1. From a UX perspective, is it worth adding arrow indicators to make the affordance clearer, even if it increases visual noise?

The answer heavily depends on testing. The buttons look like what some design systems call pills or tags. They are normally not used for dropdown menu's, so it would be safer to add a signifier to it. I added some examples below.

2. Would having both an icon and an arrow icon on the same button feel redundant to most users?

That depends on how it is designed. It's also a matter of personal skill and taste. If you add distance between the arrow and the label, it wouldn't be a problem. See example below.

3. Are there alternative patterns to signal that a button opens a list, without relying on arrows?

Arrows, ellipsis and the hamburger icon are the most common signifiers for telling there's a hidden menu. Arrows indicate the direction in which the menu will open, but in your case it looks like not to be a problem to not have that information.

A few examples to the answers:

Using the full view ports width there is more space possible between label and arrow (also creating larger click/touch areas):

Use vertical space instead of horizontal space as an alternative for placing the arrow:

Again use vertical space instead of horizontal space: Add extra height to add the icon below. Added three dots (ellipsis) as an alternative for the arrow:

Answer 2

The goal is for the user to find out where to change those settings. If they click on the buttons and find the setting they are looking for, it is not a problem. And you are right, arrows would create visual clutter.

Users can learn, and it's not a problem to be surprised by an interaction as long as they are not influenced negatively (slowed down, blocked, increased cognitive load, etc).

How did you test the app/screen? This heavily influences the answers you get and how biased they are.

Answer 3

I think its fine as long as all the buttons show a list of choices. Its not unusual, I have seen it on a few sites and have done it myself.

If only some buttons do this, then that throws the users.

The last time I did it on windows, I made up a cursor showing a list.

Html has one built in

.context-menu-item {
    cursor: context-menu;
}