Published on | Prototyping: From UX to Front End — Medium Shalini Singh

Interactive design is born with the concept of the button or link

The most distinguish and exciting addition to the world of design is button — it was never there on a wall, a canvas, a newspaper or magazine, poster, anything. But can we deal with it yet?

Most new designers feel comfortable with the button; In-fact all interaction designers do is designing buttons. Although, the more you are into designing, only then you know how to tackle this beast.

Interaction design comes with a lot of possibilities — links, hover effects, action buttons, drag and drop, selecting an item, adding new items, etc etc. A lot can be derived from intuitiveness (show a lot of people — test) and solved problems (find similar problems in the design world — draw useful tips from many products).

The challenge lies in creating an intuitive UI for these in your product. A lot of times people will ask — the button needs to be more prominent, this does not look like clickable etc etc.

Here are some personal learnings about the interactive world –

Consistency — Create guidelines. First thing is to follow a set a rule within your product. Do all external links look the same? There has to be consistency if you want to make you design intuitive–people get used to set norms and learn by doing. So it is possible that your links are not working throughout the platform. If they work once, we are done with the job!
Hover states — It is a good idea to specify a hover state incase of clickable entities. Might not be that important for a buttons but works wonders for links. Also, some tabs being used to filter content should have hover states. Similarly, category names in drop-downs or otherwise should have hover states if they are clickable. Hover states helps in discovery of actions that might have been diluted in the visual design.
Heat-maps — User testing wins. All kinds of clickable things (buttons, link etc) need to be tracked to understand and improve design. Less clicks do not mean the design is unintuitive because the link itself may not be important for users (no clicks definitely mean a design fail!).
Action hierarchy — Some actions are more important than others. For example, ‘add to cart; is more important than ‘add to wishlist’. Set a visual hierarchy to the actions — categorise them as primary, secondary, tertiary and finally an underline text is enough for a trivial action (niche use case). As a thumb rule, stick to one primary button per page. Make it most prominent using brand colours. The secondary buttons can be two, assign them much less visual weight than primary so that it does not compete with primary action.
Avoid overkill — This would occur when I want all my categories to be prominent and I colour them all pink! Whenever there are more than three or four clickable entities or actions, choose a tertiary or lesser visual design than the actual action. For example, if play is the primary action for a movie, we can choose to use primary button for play; but if we have a list of episodes and play is still primary, we cannot use primary multiple times (primary can only be one per page) so we use secondary instead.

Visual hierarchy for buttons

Happy designing!

Art with a button was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Art with a button

Cool stuff, every week

More Articles