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

Перевод статьи от UX Movement.

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

Текстовые кнопки редко соответствуют этим стандартам. Вот что вы должны знать, прежде чем использовать текстовые кнопки в своём приложении.

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

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

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

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

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

Чтобы решить проблему с нажатием текстовых кнопок, некоторые дизайнеры оформляют свои текстовые кнопки в заглавные. Система Google Material Design поддерживает этот стиль кнопок, но имеет свои недостатки.

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

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

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

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

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

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

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

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

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

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

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

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

Перевод выполнен при поддержке Telegram-канала UI/UX Designer.

#ux #юзабилити

7 комментариев

Anton Ryabyh

17.06.2019

Палец полностью закрывает текстовую кнопку, оставляя пользователей без визуальной подсказки, зарегистрировано ли действие.

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

Ответить

Игорь Маркелов

18.06.2019

Хотел об этом написать, в пример можно привести Google. У них хорошо реализован данный функционал, где граница ссылки занимает большое пространство и с нажатием проблем не возникает.

Игорь Мыслинский

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

Ага, а на десктопных приложениях стандарты юзабилити толще и глубже. У стандартов нет понятия высоты. У юзабилити, к тому же, нет стандартов (юзабилити это и есть стандарт) - все зависит от контекста и пользователя.

Давайте писать правильно: "Требования к интерактивным элементам, таким, как кнопки, для устройств с сенсорными экранами и ручным вводом жестче, чем при использовании курсора мыши на десктопе ..."

Григорий Резниченко

А я думал, что я один такой зануда)
Высокие стандарты - это устоявшееся словосочетание в русском языке. В английском, к слову, так же - high standards.
Здесь же не про нормативные документы органов стандартизации говорится, так что в данном случае стандарты могут быть выше/ниже.

юзабилити это и есть стандартЮзабилити - это "степень удобства использования", и стандартом само по себе быть не может. У продукта может быть отстойная юзабилити, как в таком случае это можно назвать стандартом?))