HN Explorer

Let's talk about buttons, like on a UI

1 points by swayvil ↗ HN
Buttons need identifying. A label or icon. To this end we have several devices.

    Verbose descriptive label.
    pros : guides nooby 1%. 
    cons : clutters ui for nonnooby 99%.

    Shortened descriptive label. Effects proportional to shortness.
    pros : Helps noobs some. Conserves space some. 
    Cons : cryptic.

    Icon
    pros : conserves space. pretty.
    cons : cryptic as a rule.

    Tooltip text, the ui enhancer.
    pros : provides explanations in cryptic situations.
    cons : People don't give hovering a chance.
Can you add to this?

1 comment

[ 5.2 ms ] story [ 14.3 ms ] thread
lsiunsuex
A mixture of similarly styled versions of all of the above.

If your asking "how" to design something, you need to look at the medium it'll be delivered to.

Apps don't do hovering tooltips. You can build tutorials to take the place of that.

When space is confined, you might use an icon with a tooltip. When space is plentiful, a verbose button is better. All of these items styled in the same style gives cohesiveness to the UI.

When dealing with responsive designs such as websites, you may hide a verbose button and replace it with an icon. A user will most likely not scale a browser to see if its responsive, but a user may use a website on both a desktop and a mobile device. Most users don't understand that a responsive website is usually the same website with a little code to scale things. In other words, to use a verbose button on a desktop version but an icon on a mobile version; the user adapts because thats the interface / space constraints they expect.

(2 cents)