Навигация мобильного приложения:  идеальные кнопки

Любое мобильное приложение взаимодействует с пользователем путем нажатия определенных элементов на экране. Расположение и размер этих элементов определяет то, будет ли продукт удобен для пользователя, или же попытка нажать кнопку будет сопровождаться большим количеством ошибок из-за неправильного выбора элементов навигации.

Что нужно учитывать

Хорошая верстка мобильного приложения включает крупные кнопки
Мобильными приложениями просто пользоваться с любого устройства

Вне зависимости от типа, мобильные приложения всегда предполагают совершение пользователем определенных действий; в планировщиках задач это может быть активация новой задачи или отметка о выполнении уже поставленной, а, к примеру, в играх – взаимодействие с какими-то элементами. Любое подобное действие владелец смартфона выполняет при помощи нажатия кнопки пальцами, а это означает, что для того, чтобы приложение было признано удобным, это нажатие должно осуществляться с минимальной сложностью. Для этого верстка мобильных приложений учитывает следующие моменты:

  • Размеры, рекомендованные для кнопок. Так, самый большой рекомендованный размер, указанный в гайде от Apple, составляет 44px в ширину и столько же в высоту, а руководства от Microsoft и вовсе советуют делать кнопки меньшего размера. Однако в реальности эти размеры не соответствуют площади пальца, которым пользователь взаимодействует с приложением. Если строго следовать гайдам и не учитывать действительных потребностей, есть риск сделать кнопки слишком маленькими, из-за чего попадать по ним станет сложнее, и это приведет к большому количеству ошибок.
  • Расположение кнопок на экране. Многие из тех, кто пользуются мобильными приложениями в определенных целях, привыкли к конкретному расположению элементов навигации. К примеру, если поместить кнопки навигации вверху экрана вместо привычного расположения снизу, это вызовет сложности и увеличит время на поиск нужного элемента. Однако здесь многое зависит от предназначения самого приложения.
  • Расположение кнопок относительно друг друга. Приложения, в которых элементы управления размещены слишком близко, вызывают негативную реакцию у пользователей, которые достаточно часто осуществляют случайное нажатие ненужного им в данный момент элемента вместо целевого.
  • Понятный отклик. Очень важно, чтобы дизайн мобильных приложений был понятен пользователю, в том числе и за счет получения определенного отклика при нажатии той или иной кнопки. Поэтому окрашивание градиентом элементов управления остается актуальным даже с учетом тенденции к «плоскому» интерфейсу; можно также использовать и кнопки-переключатели, если это отвечает предназначению этого элемента управления.

Дизайн-студия мобильных приложений, работающая над интерфейсом и принимающая во внимание все вышеперечисленные моменты, гарантированно создаст более удобный и привлекательный продукт для смартфонов.

Что показывает практика

Большинство из нас взаимодействует с приложениями при помощи подушечек указательного и большого пальца, и именно от этого стоит отталкиваться разработчикам. Создать слишком маленькие и близко расположенные элементы – значит предложить пользователю сменить его привычный «тап» подушечкой пальца на нажатие боковой поверхностью или кончиком пальца, то есть, совершить дополнительные действия. Поэтому идеальной кнопкой может считаться та, которую можно нажать привычным образом, при этом область тапа не будет полностью скрываться под пальцем – это даст уверенность в том, что действие совершено правильно и попало точно в цель.

Расположение и размер кнопок адаптированы под каждый экран
Крупные кнопки легко нажимать любым пальцем

Максимально комфортный размер для нажатия указательным пальцем составляет примерно 50 px в ширину – таким образом края цели остаются видны, и это позволяет получить визуальный отклик о том, что нажатие произведено правильно. Такой размер цели также обеспечивает более быстрое взаимодействие с приложением в целом, и именно поэтому рекомендуется делать основные элементы управления именно такими.