DEV Community

Discussion on: Should a button communicate the current state, the intended behavior, or both?

Collapse
 
vuild profile image
Vuild
  • Hover states should be optional as they don't always exist (mob/kiosk/disabled/TV etc). Active state.
  • Combination of icon & text. Icon should "be more substantial" once activated. Think filled hearts vs outline. Finger presssable (44px+ says HIG).
  • It's not save, it's "bookmark". You are not saving anything. There is no organizational element. Icon on the left shows bookmark (that's "tag" really, but looks like a bookmark-ish). A variation of that works better.
  • Use correct casing. trendy lower case & EASY DESIGN ALL UPPPER reduce readability. Harder to pull off.
  • Avoid 'hurdling' (distractions that have to be seen 1000x times but rarely used - save btn distracting from titles & activity level). The instinct is "more saves because it stands out" but that is not aways correct. If the content is good, people will find the way to "save" it.

a.. Now:

  1. Your btn says "Follow'
  2. I press, it says "Followed" (or following). Supplement it with the appropriate symbol (or color). Behavior is implied. Done.

b. Otherwise:

  1. Your btn says "Follow?'
  2. I press, it shows my next action. "Unfollow".

In this case, I am subliminally being told to unfollow you so your current choice seems better.

Like, Unicorn & Save/Bookmark are pretty much 1-2-3 rating system where all three btns do almost the same thing (they could be merged, with a built in bookmark aspect). Then you can have other features.

Follow/unfollow on your profile listings, along with descriptions would be useful (so you can follow or unfollow without having to check each profile).