Can the email address field have a different radius from the button?

We have pill-shaped buttons across the whole website. But I didn't want to make the email address field with the same shape seems doesn't look great. So my question is: Am I breaking the UI patterns if I design the button with a square shape rather than round?


1 Answer 1


A text field can have a round shape in the context of buttons, but making them both equally round would be a departure from tradition which is usually to differentiate text-entry components from buttons. Any time we depart from norms in UI we are taking risk and sometimes it can be rewarded.

In the context of an email application users will no doubt adapt to differences in the styling of elements, and that will be okay as long as: the elements are established consistently throughout the app (learnability), provided the app is used frequently enough by users so they don't forget (recall), and provided the application is not mission-critical context (severity).

In terms of screen scanability, the eye will have to stare a few ms longer to make out differences between a text entry component and a button because you have removed said shape distinctions. Taking small risks here and there is common in design and might be worthwhile if the user's wholistic impression is your app is simple and approachable (usually why we tend to make things rounded). If that's not a risk-goal you want to take up, you can save up the risk taking for areas that drive home the core value proposition of your product. In the end it's a judgement call only you as designer can make.

Not the answer you're looking for? Browse other questions tagged or ask your own question.