Mobile First Design: он стоит вашего внимания

Ваш продукт под рукой, или что такое такое Mobile First Design. Удобство пользования, скорость загрузки, полная работа функционала и т.д. Звучит заманчиво, правда? А это напрямую зависит от того, как данный продукт был построен. Мы предлагаем детальнее разобраться в тематике Mobile First Design, понять как эта система функционирует и разведать, что на этот счет думает Google.

Mobile First заменяет адаптивный дизайн

Сначала появился телефон

Суть Mobile First Design заключается в том, что дизайн продукта и построение его “настольной” версии изначально создается для мобильных устройств. Исторически сложилось, что креация продукта начинается с сайта для большого экрана. Для остальных гаджетов уже адаптируется готовая версия. Так вот, переверните все с ног на голову и вы получите Mobile First Design. Его продуцировать начинают со смартфонов.

И если ранее считалось, что оптимизирование веб-сайтов для телефонов нерационально, так как на смартфонах преимущественно пользуются приложениями и социальными сетями, то статистика в начале 2019 года показывает абсолютно противоположные результаты. Процентный показатель использования мобильных для поиска информации в Интернете составил 61%, а это на 5% больше 2018 года. И этот показатель будет только увеличиваться с разработкой и совершенствованием компактных переносных устройств, которые по своим характеристикам могут превзойти ПК.

Вам это нужно знать, чтобы не запутаться

Адаптивный дизайн не Mobile First. Версия, которая создается для смартфона не просто адаптирует веб-страницу под телефон. Корректнее будет сказать, что Mobile First заменяет адаптивный дизайн. Мобильная версия также подразумевает сжатие веса файлов для ускорения загрузки страниц, а процесс использования продукта через мобильную версию становится максимально комфортным.

Ранжирование в поисковых системах выдает мобильные версии выше. И первым о таких намерениях заявил Google:

«Мы будем увеличивать значение показателя mobile-friendly в нашем рейтинге результатов. Эти изменения повлияют на мобильный поиск на всех языках мира и окажет значительное влияние на результаты поиска. Следовательно, пользователям будет легче находить результаты оптимизированные под их устройства.»

Прогрессивное улучшение или изящная деградация?

Неизвестно, кто автор этих определений Mobile First, но они описывают два основных подхода к формированию продуктов.

Прогрессивное улучшение

В MVP мы его еще называем cupcake method. Это когда вы представляете перед собой базовый функционал продукта, страницы и т.д. А потом начинаете понемногу добавлять дополнительные фичи, чтобы не перегрузить продукт лишними элементами.

Изящная деградация

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

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

Процентный показатель использования мобильных для поиска информации в Интернете составил 61%, а это на 5% больше 2018 года

Почему Mobile First — это скорее преимущество?

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

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

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

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

Мы решили не расписывать все плюсы и недостатки, а вкратце их описать. Сначала хорошее:

Необычный функционал;
Ускорение процесса покупки и заказа товаров;
Улучшенное ранжирование поисковыми системами;
Высокая скорость загрузки;
Огромные перспективы.

Из минусов:

Несоответствие размеров интерфейса для каждого устройства;
Высокая стоимость.

Расставим акценты — несоответствие расширения это самая большая проблема. К примеру, у большинства вашей целевой аудитории iPhone 6/7/8, и вы проектируете под него продукт. Но! Появляются другие модели и вам нужно создавать новые версии дизайна, чтобы все работало так как должно и на других гаджетах.

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

Наш дизайнер сделал определенную схему эргономики мобильного телефона

А теперь немного эргономики

Обратите внимание на это изображение, здесь мы видим хорошие, допустимые зоны для размещения элементов дизайна и те места, которые вообще не стоит использовать.

Задача Mobile First Design расположить нужные кнопки, фичи и CTA именно там, где это необходимо.

Смартфоны используются везде, поэтому очень важно производить качественную продукцию

Вы задумывались над тем, что лучше: скролл, тап или свайп? По популярности такой порядок: тап, свайп и скролл.

Тап считается самым популярным, он взаимодействует с любым элементом дизайна. Свайп чуть менее популярный, но он иногда используется как защитный дизайн. К примеру, чтобы не сделать случайное нажатие.

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

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

В первую очередь, стоит отметить, что если ваш пользователь не разобрался в навигации сайта за 5 секунд использования продукта, то это плохой дизайн для вашей компании. А маркетолог Луис Эбрю вообще рекомендует не прятать меню в иконку, а просто оставить все как есть: «Посетителям будет весьма удобно изучать интернет-ресурс, когда под рукой у них будет такой путеводитель».

Первая иконка гамбургер-меню была разработана еще в 1981 году. Самое компромиссное решение — это использовать привычный гамбургер с упоминанием “меню”. При скроллинге слово прячется и остается только иконка.

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

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

Давайте подытожим

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