8

I was looking for case studies or UX research to figure out what is the best practice for button alignment especially in email templates, but couldn't find anything relevant.

Our practice:

  • We tend to align buttons to left on the desktop version

  • Buttons on the mobile version are automatically stretched to full width

Can you refer any study / research / whatsoever which deals with this topic?

3

Personal "First-Thoughts"

While I cannot provide you with a case study on the matter I have done a lot of research (~24 consecutive hours) and I can provide you with both my methods and reasonings as to why I believe them to be both sound and practical:

In my websites, the ones I write, I style my buttons to be:

  • 25% of the width of their containers in large desktop sizes (900-1000px+),
  • 50% on tablet sizes (600-700px+) and
  • 100% in mobile phone sizes (300-400px+).

The exact ranges depends on what you wish to use. Here is my reasoning:

  • Larger screen sizes tend to be desktop computers and even when they are touch controlled require less area relative to the entire screen
  • as the real estate of the end-user's screen becomes smaller, the relative area of interactive elements must increase to maintain functionality (think Apple Watch or Galaxy Gear vs mobile phone vs computer).

Making buttons larger relative to smaller screen sizes (widths) was the most obvious solution I could make.

To conclude on the topic of button size, your logic is sound, and your concern is a very real one. Thank you for asking! I'm glad more people care about this!


Button Alignment

You also mentioned left aligned buttons on desktop!

In my flagship website, I have a sticky back to top button which automatically avoids the footer at the bottom of my pages with a simple JavaScript condition. On desktop it is located on the right, but on mobile (300-400px or less), in this case one-handed devices, I add a class which places it on the left. Why? Because most people operate their phones using their right hand, and having a button so close to their palm can be both damaging over time and possibly annoying. It is far more natural, and uses less muscles to simply drop the thumb down without bending it, or at least not as much.

Research & Illustrations

Here are some images and sources which back up my points made earlier, and hopefully bridge the gap if I did not explain myself clearly enough (I provide the images and quotes only as a archive of both what I feel best answers the question, and as a way to prevent loss of information if the following sources were to cease to exist):


Most natural thumb areas on mobile phones:

Most natural thumb areas on mobile phones

(Source: http://blog.experts-exchange.com/ee-blog/smartphone-thumb-zone/)


And on the larger side of things, the natural touch regions of laptop devices:

Natural touch regions of laptop devices

(Source: http://alistapart.com/article/how-we-hold-our-gadgets)

Honestly when it comes to what makes a good button placement, this second link does a wonderful job at describing what is best for the comfort of all users, short of providing (cookie-based if anonymous website use) options for left vs right handed use:


The Thumb's Natural Arc

Mobile phone natural thumb range

only a third of the screen is truly effortless territory: at the bottom, on the side opposite the thumb. For example, if you hold a phone in the right hand, your thumb falls naturally in an arc at the bottom left corner of the screen—no stretching your thumb or shifting the phone required. The same arc shape applies to the two-handed cradle grip, but the arc is larger because the thumb has greater range of motion.


Left vs Right Hand Operation

What about lefties? The thumb zone flips from left to right. But this left-versus-right distinction isn’t especially crucial, since most of us switch hands easily (and frequently) depending on context. Even so, optimizing for one hand penalizes the other: the best solutions put core features at screen middle, where left and right thumb zones overlap. In the end, top versus bottom is more important than left versus right. No matter which hand you use, screen bottom is most comfortable, while the top demands a stretch. That rule holds true for all phone screens, large or small, but as phones grow to jumbo dimensions, that top-screen stretch becomes a strain.


Phablet Zones Shift

Effect of the pinky finger as support to hold a device

The size and shape of the thumb zone shifts when the phone’s dimensions require support from the little finger.


Natural Tablet Regions

Common thumb range on tablet devices

We tend to grab tablets at the sides, and while the specific location wanders up and down, thumbs settle at the middle to top third of the screen. This grip makes the neighboring sides and top corners most friendly to touch. On the flip side, the top and bottom edges of tablet screens are hostile zones, because of the necessary reach. The bottom is especially tough, since thumbs are rarely near the bottom...


So there you have it! I hope that the information provided is as helpful for you as it was for me! While I knew most of the information already, it was very helpful to find that someone had created some wonderful illustrations and I hope this helps many others as well!

0

I found some tips over here so I shared it with you below.

http://uxmovement.com/mobile/10-tips-to-get-you-started-with-responsive-design/

https://www.campaignmonitor.com/dev-resources/guides/mobile/

Though I am not expert. Hope this will help you.

  • 1
    can you pull out the key information to prevent losing the answer due to link rot? – Midas May 27 '16 at 8:19
  • @Midas this link itself gives you key information with highlighted points. Because one of my friend who is designer has also explain me this some days ago. So I have suggest to go with this link. – Jasmin Javia May 27 '16 at 8:48
  • 2
    @jasmin-javia the point is, if that website disappears, this answer becomes useless. If you copy the main points (e.g. images plus pull quotes) this answer will still be useful if that site vanishes. – PixelSnader May 27 '16 at 10:04
  • @PixelSnader OK now I got your point.thanx – Jasmin Javia May 27 '16 at 10:15
  • @JasminJavia Yes, It's be very useful if you follow PixelSnader's advice. Thanks! :) – Monomeeth May 27 '16 at 22:59
0

Based on my personal experience A/B testing and the results of numerous eye-tracking studies, I recommend that the button (which I assume counts as the "conversion") be inline with the movement of the reader's eye.

That means the full-width button is always inline (but can get silly when too wide).

The smaller button on the wider viewport is beneath the strongest vertical, visual element(s). Easiest example is a form where the eye typically tracks down the left-hand edge of the form fields. There, the button would be left-aligned. If it were an email with a strong centered image or text, it would be reasonable to place the button also centered.

0

Let's take the example of the login screen. Typically we will have a logo, Heading, User Name, Password, Remember me, Login Button, Forgot Password, Register/Signup fields. As users naturally read from left to right, after entering their password they are almost close to the end of password text fields. So, I suggest to right aligned the login button to the password text field. It will reduce the time in reaching the button from your current position and also balances the screen if we are using good white space in the design.

If we are aligning the button to the left side of the text field, the user needs to travel back from the current position in a reverse direction ( Right to left ) for a positive action which is not intuitive. Comments and suggestion are always welcomed.

-2

As a user experience, button should be eye catcher and it should be highlighting color,it should be align right side, because user is more preference the right alignment.

  • Welcome to the site, Navin. Do you have any evidence to support your assertion that users prefer right alignment? – Graham Herrli Jul 21 '16 at 5:27
  • just take a simple example, whatever i have done to know about the user view about button alignment, EXAMPLE PRACTICE check "disable the text from button and check where user click first to submit there query. i have seen this while paying the amount of my mobile bill through online banking there button color is same as the text color only little difference in text, i clicked cancel two times because of their text color, i asked many of the users they are facing same problem, so this is the real time experience where you will find 80% positive result and 20% negative result, now it is as per u – Navin Prakash Jul 21 '16 at 5:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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