Где лучше располагать основную кнопку действия в мобильном интерфейсе: по центру экрана или у края?

Почему расположение кнопки имеет значение

В мобильных интерфейсах пользователь чаще всего взаимодействует с экраном одной рукой, удерживая устройство большим пальцем. Согласно закону Фиттса, время достижения цели зависит от расстояния до неё и размера цели. Размещение основной кнопки действия (Call to Action, CTA) в центре экрана заставляет пользователя тянуться пальцем, что увеличивает время и вероятность ошибки.

Зоны досягаемости большого пальца

Исследования показывают, что наиболее удобная зона для нажатия — нижняя треть экрана, особенно по краям. Центр экрана и верхняя часть требуют либо перенапряжения пальца, либо смены хвата телефона, что неудобно. Поэтому кнопки вроде «Купить», «Отправить», «Далее» размещают внизу.

Практический пример

Рассмотрим форму заказа в мобильном приложении. Кнопка «Оформить заказ» должна быть закреплена внизу экрана, а не плавать в центре:

<div class="order-form">
  <!-- поля формы -->
  <div class="sticky-bottom">
    <button class="btn-primary">Оформить заказ</button>
  </div>
</div>

<style>
.sticky-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: white;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}
.btn-primary {
  width: 100%;
  padding: 16px;
  font-size: 18px;
}
</style>

Исключения

В некоторых случаях, например, в играх или при использовании двух рук, кнопка может быть в центре. Но для типовых мобильных приложений (e-commerce, соцсети, банкинг) нижнее расположение — стандарт.

Вывод: Основную кнопку действия в мобильном интерфейсе следует размещать в нижней части экрана, чтобы минимизировать усилие пользователя и ускорить взаимодействие. Это улучшает юзабилити и конверсию.