I see this one all the time: something that looks like a button, but only a portion of it is tappable. Consider this example from a recent email I received (emails are notorious for this crap):
This screenshot shows a very large call to action, which is good. Unfortunately, as the screenshot illustrates, the majority of the “button” is a table cell and the tappable link is just the text inside it.
The markup itself isn’t horrible; here’s a distillation of that row in the design:
<table> <tbody> <tr> <td> <a href="…">Shop Biotek Marine</a> </td> </tr> </tbody> </table>
The problem is that the 15px padding and overall button styles were put on the table cell rather than the link itself. Setting the link to have a
display of “block” or “inline-block” would allow it to be given vertical padding (which is probably the issue the designer was struggling with here). Then the remainder of the styles could be migrated without adjusting the design at all.
When you design something that looks interactive, always make sure the whole thing is actually tappable. It will go along way toward reducing user frustration.
Aaron Gustafson on a common design issue: Buttons and links that can’t be clicked everywhere where the visual click area seems to be.
In addition, remember that buttons or links need to be activated using the keyboard which means that
<a>elements need to have a
hrefattribute, for example.