Mobile First: что это и как это работает

Как следует из самого термина, mobile-first design – это подход, при котором веб-дизайнеры сначала начинают разработку продукта для мобильных устройств. Для этого можно сделать эскиз или прототип веб-приложения, рассчитанный на небольшой экран, и постепенно переходить к более крупным размерам экрана. 

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

Проектирование и разработка для небольших экранов вынуждает дизайнеров удалять все, что не является обязательным для визуализации и навигации сайта. 

Как появилась технология Mobile-First Design?

Ранее веб-сайты часто разрабатывались с учетом того, что доступ к ним будет осуществляться в основном с настольных компьютеров. В конце концов разработчики попытались изменить эти сайты, сократив некоторые функции для улучшения просмотра на мобильных или планшетных устройствах. 

Такой подход к уменьшению масштаба веб-сайтов широко известен как Graceful Degradation или Desktop-First Approach.

Недостаток этого подхода в том, что некоторые веб-элементы плохо адаптируются к меньшим размерам экрана. Следовательно, это ухудшает визуальный вид веб-сайтов на небольших устройствах.

Чтобы решить эту проблему, разработчики предложили другой подход — Progressive Advancement или Mobile-First Design.

Подход mobile-first позволяет дизайнерам начинать процесс разработки веб-сайта сначала для небольших устройств, а затем добавлять больше функциональных возможностей для экранов большего размера.

Почему Mobile-First Design так важен?

Мобильные устройства стали неотъемлемой частью современного веб-ландшафта и будут продолжать играть важную роль и в будущем. Как уже упоминалось в начале, на долю мобильных устройств приходится примерно половина всего веб-трафика.

Следует также учитывать, что число пользователей мобильных устройств превысило число пользователей настольных компьютеров. По данным Statcounter GlobalStats, общее число “мобильных” пользователей продолжает расти, и их доля на рынке составляет 60,43% по сравнению с пользователями настольных компьютеров. Например, пользователи смартфонов проводят в своем телефоне в среднем 3 часа 15 минут, а проверяют телефон 58 раз в день.

Приведенные выше данные показывают, что пользователи по всему миру постепенно переходят с ПК на мобильные устройства. Естественно, веб-дизайнерам имеет смысл по-другому расставлять свои приоритеты и следовать правилу «mobile-first» при разработке ИТ-продуктов.

Как реализовать подход Mobile-First в дизайне продукта?

Представим, что веб-дизайнеру необходимо разработать сайт для ресторана. Поскольку необходимо следовать подходу mobile-first дизайнер должен подумать о том, что пользователь будет ожидать от сайта ресторана на мобильном устройстве. 

Дизайнеры должны определить основные вещи, которые ищет пользователь, заходя на сайт ресторана с мобильного устройства. Учитывая, что пользователь находится на мобильном устройстве, можно предположить, что он обычно ищет: часы работы, точное местоположение и контактные данные (или кнопку для звонка, учитывая, что это мобильный телефон). 

Когда речь идет о ПК, у веб-дизайнеров есть все необходимое пространство для того, чтобы продемонстрировать дополнительные детали. Эти детали могут включать сообщения в блоге, изображения недавно проведенных мероприятий, интерьер или контактные формы для улучшения продвижения ресторана.

Резюмируем

Глобальные тенденции в области технологий меняются с бешеной скоростью, но ключевой критерий успеха e-commerce остается неизменным: чтобы увеличить прибыль, лояльность и узнаваемость бренда, вы должны создать превосходный пользовательский опыт. Все элементы веб-сайта должны работать, быстро загружаться и помогать пользователям находить то, что им нужно. 

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

Источник: browserstack.com, uxmatters.com