Дизайн Glory Mlory
5 485

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

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

В закладки
Аудио

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

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

Текстовые кнопки труднее нажимать

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

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

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

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

Текстовые кнопки, написанные капсом, труднее читать

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

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

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

Текстовые кнопки сложнее распознать

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

Что использовать вместо текстовых кнопок

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

Контурная кнопка

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

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

Светлая кнопка

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

Кнопка с визуальной тяжестью

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

Когда нужны текстовые кнопки

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

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

Не злоупотребляйте текстовыми кнопками

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Glory Mlory", "author_type": "self", "tags": ["\u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438","ux"], "comments": 7, "likes": 30, "favorites": 72, "is_advertisement": false, "subsite_label": "design", "id": 71877, "is_wide": false, "is_ugc": true, "date": "Mon, 17 Jun 2019 14:46:51 +0300" }
{ "id": 71877, "author_id": 301918, "diff_limit": 1000, "urls": {"diff":"\/comments\/71877\/get","add":"\/comments\/71877\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/71877"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
7 комментариев

Популярные

По порядку

Написать комментарий...
7

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

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

Ответить
0

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

Ответить
2

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

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

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

Ответить
0

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

юзабилити это и есть стандарт

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

Ответить
0

Давайте вы ознакомитесь с https://habr.com/ru/post/203308/, потом будем предметно разговаривать. Втирать про устоявшиеся выражения и "плохую юзабилити, а так же - экологию, химию и экономику" можно бабушкам из подъезда. И да, на говно с пальмовым маслом тоже есть стандарт - от этого говно с пальмовым маслом лучше не становится.

Ответить
0

Хорошая тема, давай еще

Ответить
0

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }