Плохие практики в верстке и UX

Х@habr_comмедиа / агрегатор

3 нед

Разбор типичных ошибок в HTML и CSS, которые делают интерфейсы неудобными и недоступными для пользователей.

Плохо спроектированные интерфейсы напрямую влияют на конверсию и доступность продукта для пользователей.

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

HTML и CSS помогут вам сделать ужасный интерфейс для пользователя Вводишь номер телефона, жмёшь Enter, форма стоит на месте. Жмёшь ещё раз, потом ещё. А чуть раньше текст с иконкой цветом выдавал себя за ссылку, и его хотелось открыть в новой вкладке с зажатым ctrl, но вкладка так и не открылась. Багов здесь нет, интерфейс работает ровно так, как его разметили. Подобные решения собраны с живых сайтов: подпись «fire» у иконки, которую скринридер честно зачитает незрячему пользователю, обводка фокуса, обрезанная сверху, и поле для кода из пуша, где вместо цифровой клавиатуры открывается стандартная с мелкими клавишами. Последнее автор увидел, когда его маме с травмированной кистью нужно было заплатить за коммуналку. Посмотрим, какие ещё подозрительные решения стоит поискать у себя в проекте.

Кратко (AI)

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

Плохие практики в верстке и UX

Кратко (AI)

Обсуждение