Размеры UI-элементов в приложениях

Одно из основных различий между мобильным приложением и сайтом  заключается в функциональности. В отличие от мобильных версий сайта, которые предназначены в основном для предоставления информации, мобильные приложения предлагают возможность выполнения задач. Как правило, они также содержат более интерактивный контент.

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

Перечень UI-элементов очень широк. Например, прогресс бары, слайдеры, чекбоксы и обычные кнопки. Ниже мы представили несколько основных элементов, с которыми пользователь взаимодействует чаще всего:

Action menu — кнопка, которая представляет собой три точки/ три полоски (гамбургер) и при нажатии на которую открывается меню с разделами.

Tab bar — панель вкладок, которая находится в нижней  части экрана.

При помощи панели вкладок пользователь быстро переключается между разделами приложения (свайп вправо/влево, касание). Тапбар в верхней части экрана называется App bar.

Checkbox — элемент, который позволяет выбрать несколько опций.

‍

При выборе размера компонентов дизайна нужно учитывать два аспекта:

1. Удобство пользования и доступность

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

2. Эстетика и внешний вид

Интерфейс должен быть визуально привлекательным: текст и иконки компонентов должны быть заметными, легко читаемыми, чтобы не создавать препятствий для пользования.

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

Следовательно, элементы вашего интерфейса должны также отвечать этим требованиям, чтобы ЦА было удобно пользоваться приложением.

‍

Обычно люди взаимодействуют с мобильными устройствами при помощи пальцев, поэтому важно рассказать не только про их размер, но и расположение на экране.

Помните: все люди держат телефон по-разному.

Зеленое — зона большого пальца. Это область экрана, до которой пользователи могут удобно дотянуться большим пальцем. Все, что выходит за ее пределы (желтая и красная области) заставит человека напрячь пальцы и вызвать дискомфорт. Так, согласно эмпирическому правилу UX, ключевые интерактивные элементы должны размещаться в зоне большого пальца одной руки, потому что именно так большинство пользователей взаимодействуют с интерфейсом. Не забывайте учитывать левшей, для которых область большого пальца немного смещается:

При разработке любого экрана вашего приложения не забудьте провести тест зоны большого пальца. Просто возьмите объединенную зону большого пальца выше и наложите ее на свой пользовательский интерфейс — убедитесь, что ключевые элементы вашего дизайна попадают в зеленые зоны.

В маленькие элементы управления намного сложнее попасть пальцем, чем в большие. Когда вы проектируете мобильный интерфейс, лучше всего сразу это предусмотреть и постараться сделать элементы побольше, так вы улучшите пользовательский опыт.

Важно! Элементы не должны быть слишком большими и занимать все пространство экрана. Чтобы разобраться с оптимальным размером элементов, можно обратиться к руководствам наиболее  известных мобильных платформ:

Гайдлайн от Apple — iPhone Human Interface Guidelines — рекомендует такие минимальные размеры для тач-элемента: 44px в ширину и 44px в высоту.

Руководство от Microsoft — Windows Phone UI Design and Interaction Guide предлагает использовать размер 34px с минимальной тач-областью 26px.

Гайдлайн Material Design для приложений на Android используйте интерактивные элементы размером не менее 48 x 48 dp и оставляйте между ними минимум 8 dp свободного пространства.

Помните, что площадь касания может быть больше или меньше размера самого элемента. Наиболее удобно для пользования —сделать интерактивную площадь чуть больше. Как минимум она должна быть от 7 до 10 мм. Обращайте внимание на то, что касаемся мы пальцами (а размер пальцев у всех разный). Для того чтобы не были задеты другие элементы при нажатии, стоит делать область касания примерно 8 мм с границей между элементами 2 мм.

В зависимости от того, где на экране располагается элемент, отступы вокруг него должны быть меньше или больше.

Мы точнее всего вводим данные в центре экрана и наименее точно — по краям (как сверху, так и снизу).

В своей книге “Touch Design For Mobile Interfaces” (Сенсорный дизайн для мобильных интерфейсов) Стивен Хубер утверждает:

Чтобы свести к минимуму случайные касания, размер интерактивных элементов должен быть 11 мм (или 31pt / 42px) в верхней части экрана и 12 мм (или 34pt / 46px) в нижней части экрана. В центре мы могли бы уменьшить их до 7 мм (или 20pt / 27px). Эти значения включают как ширину, так и отступы.

Стивен Хубер сделал специальную таблицу, которая поможет вам перевести пункты в пиксели и em, в SP или DP для Android, точки для iOS и DIP или px для Windows.

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

Например, современный iPhone X использует базовое разрешение 375 на 812 пикселей, но фактическое количество пикселей в три раза больше (3x) и составляет 1125 на 2436 пикселей. Например, если вы проектируете кнопку, вам нужно сделать ее высотой не менее 44 точек. Это означает, что при проектировании в масштабе 1x это будет 44 пикселя (при 1x пиксель — это то же самое, что и точка), а при 2x это будет 88 пикселей, но в вашем дизайне будут все те же 44 точки.

Если вы проектируете при помощи векторных инструментов (Figma) вам не нужно беспокоиться о разных моделях телефона, ведь  базовое разрешение 1x служит шаблоном, который работает на всех экранах.

Интерактивная площадь на весь экран

Интерактивные элементы могут занимать весь экран только в том случае, если они достаточно важны. Например, особенность интерфейса TikTok: когда вы просматриваете контент, вы можете проводить пальцем вверх или вниз, чтобы перемещаться между видео. Область касания для пролистывания обычно занимает весь экран. Если основная цель — дать возможность пролистывать контент, то интерактивная область может быть на весь экран.

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

Протестируйте прототип самостоятельно или при помощи знакомых или проведите UX-исследования с представителями ЦА.

Посмотрите свой дизайн или прототип на целевом устройстве в размере один к одному с помощью Figma. Этот режим можно включить для предварительного просмотра или вы можете загрузить приложение Figma на свой телефон и увидеть конечный результат, который будет наиболее близок к продукту.

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

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

Иерархия

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

Пример с кнопкой: если большая кнопка окружена другими большими кнопками, кнопка больше не будет выглядеть большой. В то время как кнопка среднего размера, окруженная кнопками немного меньшего размера, занимает меньше места и оказывает большее влияние.

Взаимосвязь

В создании интерфейса важно создавать связь/ассоциацию между различными элементами. Это удобно, если вам необходимо сгруппировать контент. Здесь поможет расстояние между элементами и изменение размера. Несмотря на то что нашему глазу приятнее смотреть на симметричные вещи, расположенные с равными промежутками в интерфейсе это может стать минусом. Уменьшение размера промежутка между компонентами создает из разрозненной группы единый функциональный элемент.

Ценность

В рамках UI ценность приложения — это то, что оно может предложить пользователю. Это может быть кнопка для просмотра премиум-пакета или слоган в верхней части вашего интерфейса с информацией о продукте. Увеличение расстояния и размера элементов создают эту ценность для пользователя. Если вы готовы использовать ценное экранное пространство вокруг элемента, пользователь обязательно поймет, что объект важен. Т. е. если элемент крупный, ценный.

Рассмотренные выше советы не являются строгими указаниями к выбору размеров UI-элементов, но они наиболее распространены и проверены при пользовании. Если вы сомневаетесь в правильности выбора размера, обратитесь к готовым руководствам ОС для мобильных устройств или выберите известный и удобный готовый интерфейс в качестве шаблона. Пробуйте, создавайте и не забывайте тестировать!