Скотт Харф привёл результат исследования минимального размера кнопки для тач-интерфейсов и сравнил с рекомендациями Apple, Google и Microsoft.

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

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

In English (копия в Вебархиве). #button #mobile

Мэтью Стендедж написал о применении неактивных кнопок [English].

Иногда лучше позволить пользователю ошибиться и получить подходящую обратную связь, чем не дать ему ошибиться.

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

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

#form #button

Джаскаран Сингх написал о расположении кнопок «Ок» и «Отмена» в диалоговом окне.

— Плюсы «Ок — Отмена»: логический порядок расположения вариантов (сначала основное, затем дополнительное) совпадает с порядком чтения, если человек читает слева направо; с помощью клавиатуры можно быстрее перейти к кнопке «Ок», которая нужна пользователям чаще;
— Плюсы «Отмена — Ок»: основная кнопка находится там же, где заканчивается движение пользовательского взгляда; «Отмена» возвращает пользователя назад, а «Ок» перемещает дальше, поэтому такое расположение кнопок соответствует логике отображения прошлого слева, а будущего справа;
— Несмотря на плюсы разных вариантов, надо придерживаться стандартов платформы: в Windows «Ок — Отмена», в интерфейсах Apple «Отмена — Ок»;
— Если у вас веб-приложение, узнайте или (если статистики нет) предположите, какая платформа у большинства ваших пользователей;
— Придерживайтесь выбранного порядка расположения кнопок во всех интерфейсах своего продукта.

#layout #button #popup

Энтони Ценг написал, как снизить когнитивную нагрузку при работе с похожими кнопками.

— Выделить кнопку основного действия;
— Если подписи имеют схожие значения, добавить иконки, которые подчеркнут разницу. Но подобрать такие иконки может быть непросто;
— Например, для кнопок «Send Money (отправить деньги)» и «Transfer (перевести)» иконками можно показать, что это отправка денег другому человеку и перевод на другой банковский счёт;
— Разделить кнопки на группы по смыслу. Пользователям будет проще действовать, руководствуясь мышечной памятью;
— Например, кнопки отправки и перевода выровнять по левому краю модуля, а оплаты счетов и пополнения баланса — по правому.

In English. #cognitive_load #button

Александр Мачуговский написал о неактивных кнопках и расположении кнопок в мобильных формах.

— Блокировать действие уместно, когда не выполнены условия для его выполнения;
— Проблема в том, что условия могут быть разными: не хватает данных от пользователя (на текущем экране, прошлом, в сторонних сервисах вроде подтверждения имейла) или компонентов программы (медленный интернет или вычисления, внутренние ошибки);
— Неактивная кнопка не подскажет, в чём проблема, а также плохо заметна;
— Блокировка кнопок может быть полезна для необратимых деструктивных действий, чтобы совершить ошибку было сложнее;
— В мобильной форме фиксированная в нижней части экрана кнопка занимает место, и её преждевременное нажатие (если она не заблокирована) приводит к ошибке. Лучше расположить её в конце формы — пользователь увидит её, прокрутив экран с формой до конца, и она как раз окажется под пальцем;
— Если форма занимает меньше одного экрана, кнопку можно закрепить в нижней части экрана, чтобы на неё легко было нажать;
— Таким образом в длинных и коротких формах пользователь будет видеть кнопки в одном и том же месте.

#form #button #mobile

Егор Камелев написал о проблеме неактивной кнопки при отправке формы.

— Если кнопка отправки формы активна, когда пользователь заполнил не все обязательные поля, на неё можно нажать и получить обратную связь: сообщение о том, какие поля не заполнены или заполнены неправильно;
— Если кнопка по умолчанию неактивна, ещё до заполнения формы могут возникнуть вопросы и сомнения: точно ли она неактивна (мало ли серых кнопок и проблем с контрастом в вебе), что сделать, чтобы она стала активной, и (из комментариев) вдруг произошёл сбой и её неактивность вызвана чем-то кроме незаполненной формы;
— Если пользователь заполнил форму, но не заметил обязательных полей или (если поля не валидируются сразу) ошибся где-то с форматом, на кнопку нажать не получится и обратной связи никакой не появится;
— Можно придумать костыль и обрабатывать нажатия на неактивную кнопку, но тогда получится просто активная кнопка, своим внешним видом вызывающая лишние вопросы и сомнения;
— Понятно, что если это очень важная форма, пользователь будет биться, пока не разберётся. Но если это что-то заменимое, пользователь просто уйдёт.

#button #form