Мобильный интерфейс — не уменьшенный десктоп
Самая распространённая ошибка при проектировании мобильных интерфейсов — думать о телефоне как об уменьшенном компьютере. Это не так. Пользователь держит телефон в руке, часто одной, нередко в движении, при ярком свете или в темноте. У него нет мыши с точностью в пиксель — только палец шириной 7–10 мм. И у него нет желания читать длинные тексты на маленьком экране.
Хороший мобильный UX проектируется под эти ограничения, а не вопреки им.
Принцип большого пальца
Исследование Стивена Хупера показало, что большинство пользователей держат телефон одной рукой и управляют большим пальцем. Это означает разные зоны досягаемости: нижняя часть экрана — лёгкая зона, середина — нормальная, верхняя — сложная (нужно тянуться). Критические действия — основные кнопки, навигация, CTA — должны быть в нижней части экрана. Именно поэтому tab bar у iPhone внизу, а не вверху.
Минимальный размер зон касания
Apple рекомендует минимум 44x44pt для интерактивных элементов. Google Material Design — 48x48dp. Это не размер видимого элемента, а размер зоны касания (hit area). Маленькие кнопки и ссылки — прямой путь к случайным нажатиям и раздражению пользователя. Проверить легко: открыть сайт на телефоне и попробовать точно нажать на каждую ссылку в навигации.
Приоритизация контента
На маленьком экране всё не помещается, и это нормально. Задача дизайнера — правильно расставить приоритеты. Правило: один экран — одна главная задача. Не «показать всё», а «помочь пользователю сделать одно конкретное действие». Всё остальное — ниже по скроллу или на отдельном экране.
Типография для мобильных
Минимальный размер основного текста — 16px (на мобильных браузерах это предотвращает автоматический зум при фокусе на поле). Line-height — минимум 1.5 для читаемости. Длина строки — 45–75 символов. Контраст — минимум 4.5:1 (WCAG AA). На мобильных это особенно важно, потому что экраны читаются при разном освещении.
Формы на мобильных
Формы — слабое место большинства мобильных интерфейсов. Ключевые принципы: каждое поле на отдельной строке (не два поля в ряд), правильный тип клавиатуры (tel для телефона, email для email, numeric для чисел), автофокус на первое поле, крупные лейблы над полями (не placeholder вместо label — они исчезают при вводе). Автозаполнение через атрибуты autocomplete — обязательно.
Навигация
Tab bar внизу (до 5 элементов) — стандарт для мобильных приложений. Для сайтов — гамбургер-меню допустим, но его главный недостаток: пользователь не видит навигацию сразу. Для частых сценариев — sticky bottom navigation. Жесты (свайп назад, pull-to-refresh) — ожидаемые паттерны, их нужно поддерживать.
Типичные ошибки мобильного UX
- Hover-состояния без touch-состояний (на мобильных нет hover).
- Слишком плотное размещение ссылок — пользователь нажимает не то.
- Попап на весь экран при первом визите (подписка, куки, Push permissions) — уходит сразу.
- Горизонтальная прокрутка контента — пользователи не ожидают её и теряются.
- Видео с автовоспроизведением со звуком — немедленная потеря доверия.
Вывод
Мобильный UX — это отдельная дисциплина, а не адаптация десктопного дизайна. Проектирование под большой палец, правильные зоны касания, приоритизация контента и хорошо работающие формы — это не технические детали, а прямые факторы конверсии и удержания на платформе, где большинство пользователей взаимодействует с вашим продуктом.