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

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

Больше пространства между иконками

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

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

Круглые подложки для визуальной помощи

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

Когда пользователь не видит краев иконки, это усложняет понимание того, нажал ли он на нее. Края кнопки выступают визуальным помощником, подтверждая точность нажатия.

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

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

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

Хороший пример использования подкладок — панель управления в iPhone. У каждой кнопки есть подкладка, места между кнопками достаточно. С таким количеством кнопок, помочь пользователю не промахнуться очень важно.

Простота нажатия

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

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

Автор статьи anthony

Перевод — Дежурка

Смотрите также:

• Как иллюстрировать пошаговые этапы в мобильном дизайне
• Как сделать удобную форму ввода телефона
• Что не так с выпадающим меню