Мы отметили Microsoft Clarity как продукт, разработанный с учетом практических задач в реальных условиях настоящими специалистами по продуктам, которые понимают проблемы, с которыми сталкиваются такие компании, как Switas. Такие функции, как отслеживание кликов и ошибок JavaScript, оказались бесценными для выявления проблем и технических неполадок у пользователей, что позволило внести целенаправленные улучшения, напрямую повлиявшие на пользовательский опыт и коэффициенты конверсии.
Адаптивный дизайн
Адаптивный дизайн — это подход к созданию веб-интерфейсов, которые подстраиваются под размер и возможности устройства, на котором они отображаются, используя гибкую компоновку, адаптивные изображения и медиа-запросы CSS для переформатирования единого кода в зависимости от размера окна просмотра. Введенный в качестве отдельной практики Итаном Маркоттом в 2010 году, он заменил более ранний подход, предполагавший создание отдельных сайтов для настольных компьютеров и мобильных устройств, и теперь является стандартным подходом практически для всей веб-разработки.
Главное преимущество адаптивного дизайна заключается в использовании одной версии, а не нескольких. Разные мобильные сайты со временем расходятся, накапливают несоответствия, усложняют аналитику и индексацию в поисковых системах, а также удваивают стоимость каждого изменения. Адаптивный дизайн обеспечивает единство контента, URL-адресов и функциональности, что также соответствует тому, как поисковые системы индексируют и ранжируют страницы, поскольку индексация с приоритетом мобильных устройств оценивает мобильную версию одного и того же URL-адреса.
Распространенное заблуждение заключается в том, что адаптивность означает лишь то, что макет не ломается. Переформатирование столбцов в стопку при узком поле зрения — это минимум, а не цель. Подлинная адаптивность учитывает различный контекст, возможности и намерения, связанные с разными устройствами: сенсорные области, размер которых соответствует пальцам, а не курсорам, шаблоны навигации, подходящие для небольших экранов, а не для сжатых меню настольных компьютеров, приоритезация контента, при которой наиболее важный материал располагается первым, когда все расположено вертикально, и формы, использующие соответствующие типы ввода и клавиатуры.
На практике именно производительность чаще всего является слабым местом адаптивных решений. Макет, который визуально подстраивается, но при этом загружает изображения размером с настольный компьютер, полные пакеты JavaScript и ненужные компоненты, отображает страницу, которая выглядит корректно, но плохо работает именно на тех устройствах и соединениях, которые меньше всего способны выдержать такую нагрузку. Адаптивные изображения с соответствующими наборами исходных файлов, условная загрузка компонентов, которые не отображаются в маленьких окнах просмотра, и отложенная загрузка некритичных ресурсов — вот что делает такой подход эффективным на практике, а не только в браузере, масштабированном под размер настольного компьютера.
Для тестирования адаптивного дизайна требуются реальные устройства, а не просто изменение размера окна браузера. Эмуляторы не воспроизводят неточность сенсорного ввода, реальные сетевые условия, ограничения памяти на оборудовании среднего уровня или то, как системные клавиатуры и элементы интерфейса браузера занимают вертикальное пространство. Многие из наиболее распространенных дефектов, включая закрытие ввода клавиатурой, «залипание» элементов, занимающих большую часть небольшого экрана, и горизонтальное переполнение, вызванное одним широким элементом, невидимы в эмуляции настольных компьютеров и сразу бросаются в глаза на телефоне.
При разработке адаптивного дизайна также необходимо учитывать масштабирование текста и увеличение масштаба, которые часто упускаются из виду и являются распространенной причиной проблем с доступностью. Макет, созданный с фиксированными размерами в пикселях, может корректно перестраиваться на разных устройствах по ширине, но полностью переставать работать, когда пользователь увеличивает размер текста по умолчанию в браузере или увеличивает масштаб до 200%, что является настройкой, на которую постоянно полагаются многие пользователи. Контент, выходящий за пределы контейнеров, обрезающийся или требующий горизонтальной прокрутки в этих условиях, не соответствует стандартам удобства использования и доступности. Тестирование при увеличенном размере текста и высоком уровне масштабирования занимает минуты и выявляет категорию дефектов, которые никогда не обнаруживаются при тестировании на устройствах по ширине, поскольку эти два ограничения по-разному влияют на макет.
Поскольку адаптивность охватывает верстку, контентную стратегию и доставку контента, её редко можно улучшить одной лишь настройкой контрольных точек. дизайн продукта Надежный подход заключается в определении компоновки, отступов и поведения компонентов во всех окнах просмотра в рамках системы проектирования таким образом, чтобы новые страницы по умолчанию наследовали правильное поведение. Вопросы производительности относятся к следующему: веб-производительность работает, поскольку разница между адаптивным сайтом, который конвертирует пользователей на мобильных устройствах, и сайтом, который этого не делает, обычно заключается в весе и стратегии загрузки, а не в макете.
Свитас, как показано на
