Icon consistency in buttons

Question

I am designing a page for apps. This page will show apps available for integration.

Question

• Should I make them all text only buttons or it's fine that some buttons are icon+text?

Default

• All apps are with 'Connect' button
• Else, if app is not available for integration due to multiple factors, apps cannot hide but have 'Learn More' button instead. (This is a fix business decision)

Context

• When an app is connected, the button options are updated to 'Disconnect', 'Settings' and 'Sync'
• In the future, there might be other button options such as 'Register', 'Authentication'. These options will depend on the type of apps integrated.

Issue

• Some buttons are text only ('Connect', 'Learn More') while some are icon+text ('Settings', 'Sync'). Is consistency is a must in this case?

Justification

• Consistency for button can only be achieved if all buttons are text only
• However, having common icon (such as 'Settings', 'Sync') in several buttons help user identify button faster especially when some apps have 3-5 buttons
• I'm not keen on adding icon for all buttons due to ambiguity in meaning especially for 'Learn More', 'Connect', 'Register'

Thank you in advance, guys!

Answer 1

I just noticed you're also looking for some help, so I figured I'd take a Stab at it :)

As a general note: I think we have a relatively "low impact" issue on our hands here, meaning neither approach is likely to pose a major hurdle to the user. However, these type of details do add up, so your question is entirely valid!

For starters, you'd definitely be doing yourself a favor in not committing to having an icon for every button, since it costs you time to search for an icon that is at the very least somewhat relevant to the function. Especially once more features are added. I'm in a similar situation with my current project at the moment, and we have some downright laughable icons for some stuff...

Now to address the user side

Icons such as "settings cog", which enjoy almost universal recognition are super helpful and actively sought out by users. So I think it would be unfortunate to drop the icons altogether!

Personally I'd even prefer to use some "less than ideal" icons for some functions, than to forgo the benefit of these standard icons completely. Even more so if you have the chance to commission custom which are more representative of your functions. But that's a rare luxury.

Bottom line: I think you can mix the button types. If the actions were vertically aligned it would be a different story, since the start of the word would jump around

Some more things to consider

I totally agree with you that having an icon for "read more", "connect", "disconnect" is weird and not likely to be of great help to your users. Thinking out loud: For the purpose of argument you could consider to "officially" classify two icon groups: "Primary" without icon (connect, disconnect, read more...) and "secondary" with supportive icons.

If it makes sense you could group the buttons that have an icon together and vice versa, for additional consistency. However, if there's a clear priority and logical order to the buttons than this is of course more important.

I'm aware my answer isn't as clear-cut as you'd probably hoped, so I'm more than happy to keep the discussion going if you have any questions or counterarguments :)