Улучшение пользовательского интерфейса

Размеры, которые нужно знать

Зона большого пальца

Телефон чаще держат одной рукой. Верх экрана достижим хуже низа, поэтому:

• Основные действия — внизу: «купить», «отправить», «позвонить».
• Разрушающие действия — не рядом с частыми. «Удалить» вплотную к «сохранить» гарантирует ошибки.
• Навигация — снизу или в шторке, а не мелким списком вверху.
• Не прячьте важное под свайп-жест без видимой альтернативы.

Формы: где теряют больше всего

<label for="tel">Телефон</label>
<input id="tel" name="tel" type="tel"
       inputmode="tel" autocomplete="tel"
       placeholder="+7 900 000-00-00">

<label for="email">Почта</label>
<input id="email" name="email" type="email"
       inputmode="email" autocomplete="email">

• type и inputmode — открывают нужную клавиатуру: цифровую для телефона, с «@» для почты.
• autocomplete — включает автозаполнение и экономит десятки секунд.
• Видимый label, а не только placeholder: подсказка исчезает при вводе.
• Минимум полей. Каждое лишнее — потерянные заявки.
• Ошибки рядом с полем, а не общим списком сверху.
• Кнопка отправки не перекрыта клавиатурой.

Что мешает чаще всего

Проверка на устройстве

1. Откройте пять ключевых страниц на реальном телефоне при мобильной сети.
2. Пройдите целевой сценарий одной рукой, не увеличивая масштаб.
3. Проверьте, попадаете ли пальцем в кнопки с первого раза.
4. Заполните форму: открывается ли нужная клавиатура, работает ли автозаполнение.
5. Проверьте на солнце или при яркости 30 % — контраст.
6. Отметьте всё, что раздражало: это и есть список задач.

Итог

Мобильный интерфейс — вопрос конкретных чисел, а не вкуса: 44 px на цель, 16 px на текст, 8 px между элементами, правильные атрибуты полей ввода. Эти требования проверяемы, и их выполнение снимает большую часть проблем. Дальше — главная страница и навигация.