Rethink: a button

Ogi Yak
3 min readMay 24, 2017

--

Note: Consider 4th and 6th Gestalt principles: Symmetry and Closure.

How a button should looks like to be more “natural” tap-able thing? Let see some variations based on the text alignment:

Comment your choice below. 1st for button on the top, 5th for the bottom.

Maybe.. we familiar with the 3rd button (centered align), what is the reason? Let me assume that you are right handed, device used is a phone, and you are tapping with your right-thumb, so that:

  • if you choose because “I want to tap the text”, why didn’t you choose the 4th (text is right aligned)? which is more closer to your thumb.
  • if you choose because “I naturally like symmetric object”, may be you are right, but should it always be a symmetry? not be more tap-able or use-able.
  • if you design it and choose because “It saves some space, padding and margin, it looks perfect this way”, acceptable. No comeback for this :D

The 3th button is used in so many UIs in the web and mobile. Take a look at these:

Google
Twitter

I personally choose the 3rd button. But I propose (XD) the 2nd button. Let me assume that you are right handed, using a mobile phone, and tap with your right-thumb, so that:

  • if I tap the 2nd button, my thumb will not block the text which is in some cases, needed to be shown. “Am I pressing the right button?”
Tapping 2nd button illustration
  • If in the future we can “play” with a button, 2nd button may give us more experiences (more playable). Other buttons’ able too XD
Sliding onto the button without loosing the text/content
  • if in the future we can feel a button with our thumb, the 2nd button may give us pressed-level experience.
Sliding may be represented as “to deny an action” or “to eliminate an option”
Buy button, just for the 2nd button sample

The first reason is the strongest. Ahhh, just another thoughts to share. It may not change Elon Musk projects or change our life but we use a button to do many things in this decade or in some futures. This’s my first Medium post in shape of “not a perfect English”. Thank you…

--

--

Ogi Yak

Entering a world that some called ui/ux designer, some called product designer