Опишите ваш проект
Наши специалисты свяжутся с вами в ближайшее время
Отправив запрос вы получаете:
  • Письмо или звонок от нашего менеджера
  • Оценку своего проекта
  • Личную встречу, при необходимости
  • Конфиденциальность гарантирована!
maxim_kaschjev
Ваш менеджер
Максим Кащеев
С удовольствием ответим на все ваши вопросы
Задать вопрос
UX/UI

Mobile First — общий подход к разработке или просто тренд веб-дизайна 2019 года

Методика mobile first заключается в том, чтобы на всех этапах производства сайта отдавать приоритет работе над мобильной версией (МВ) для популярной ширины десктопов современных смартфонов: 360-375px. А уже от нее наследовать архитектуру страниц для ноутбуков и компьютеров.

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

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

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

За и против

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

Голоса в поддержку:

  • интерфейс получается легким и лаконичным, улучшается юзабилити;
  • метод работает на самых ранних этапах, сразу можно отсечь ненужный функционал;
  • не будет потерь контента на пути от десктопа к мобильному экрану;
  • органичное mobile first ранжирование со стороны поисковых систем;
  • мобильные пользователи (МП) получают тот контент, который нужен здесь и сейчас без тонны скрытых стилей, кода и картинок;
  • все больше индустрий, где доля МП преобладает;
  • объем такого трафика растет и рынку есть куда развиваться;
  • проще приучить человека к МВ, чем заставить установить приложение, повторяющее функции веб-ресурса.

Возражения:

  • есть отрасли, где это неприменимо;
  • обилие разных устройств, которые нужно охватить;
  • опытный  СЕО-специалист  может обеспечить работу над МВ, чтобы не пострадать от mobile first ранжирования;
  • сложнее делать прототипы и концепцию на ранних этапах;
  • клиенты мало разбираются в специфике и не хотят переплачивать за крутые методологии;
  • непросто преодолеть психологический барьер в дизайне с МВ;
  • технические разногласия под Андроид и iOS;
  • нужны специалисты более высокого класса, потому что делать качественный mobile first сложнее;
  • можно отдельно бюджетно сделать мобильный сайт на поддомене, а не создавать адаптивный дизайн существующего;
  • такой трафик переоценен, большинство сидит в социальных сетях и мессенджерах.

Источник аргументов: https://www.cossa.ru/trends/157587/

От автора: «Возражение о том, что подавляющее число МП тратят время не на серфинг, а на социальные сети и обмен сообщениями, очень весомое и справедливое. Оно подтверждается статистикой, приведенной в следующей части статьи. Но самому автору на личном опыте приходилось наблюдать, как резким скачком возрастает число постоянных посетителей после внедрения адаптивной верстки, отвечающей методологиям mobile first. Дайте пользователю возможность просматривать материалы веб-платформы во время ланча или в поезде метро — он навсегда ваш!

Если кто-то не в состоянии сделать хороший мобильный UX, это не значит, что такие сайты не имеют права на жизнь. Следите за крупными игроками рынка и требованиями Google, чтобы понимать реальное положение дел и своевременно фиксировать тренды UX-дизайна 2019 года».

Трафик «на черный день»

На сто человек приходится, в среднем, 96 мобильных телефонов. Наибольшая концентрация в Гонконге — до двух с половиной телефонов на человека, наименьшая — на Кубе и в Северной Корее, где статистика говорит о двенадцати телефонах на группу такого же объема. Более половины общего количества смартфонов дают возможность просматривать веб-ресурсы. При этом, стационарным доступом в интернет обеспечены всего 48% населения Земли.

Почти половине пользователей смартфон нужен только для традиционных методов использования — звонков и сообщений. Они не загружают новые приложения и почти не просматривают сайты. Такие люди составляют резерв емкости аудитории мобильного интернета «на черный день»

Статистика привычек и поведения от агентства ThinSlices:

  • 68% операций со смартфоном производится дома;
  • 72% юзеров постоянно держат свой смартфон под рукой;
  • обычный пользователь обращается к телефону около 150 раз в сутки;
  • европейцы чаще используют гаджет днем, американцы вечером, а китайцы — во время обеда;
  • самые популярные сервисы для использования «на ходу»: Facebook, YouTube, Gmail, WeChat, Twitter, Skype, Whatsapp и Instagram, но рекордсменом остается Google Maps.

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

Рейтинг различных видов деятельности при помощи смартфона:

  • отдых и развлечения — 46%;
  • общение — 19%;
  • покупки — 12%;
  • управление иными видами деятельности — 11%;
  • подготовка к другой деятельности — 7%;
  • поиск информации — 4%;
  • интересы и хобби — 1%.

Первые три категории списка концентрируют 77% общего времени, проводимого с телефоном в руках.

Составляющие метода mobile first

Чтобы сделать качественный продукт, учитывая не только тренды веб-дизайна 2019 года, но и удобство конечного потребителя, необходимо соблюдать ряд технических рекомендаций. Они затрагивают не только контент, но и меню, оптимизацию веса страниц, узнаваемость объектов.

Контент на первом месте

«Как правило, контент имеет преимущество перед навигацией на мобильных устройствах», — Luke Wroblewski «Mobile First»

МП хочет немедленно получить результат, а не уточняющие вопросы. Очень хорошая иллюстрация: представьте человека, задавшего вопрос и держащего в руках стопку карточек с ответами. Он достает карточку, две-три секунды изучает и берет новую. Мы не знаем, насколько много карточек он посмотрел ранее. И не знаем, сколько еще карточек готов просмотреть.

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

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

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

Аналогичной концепции разработчикам необходимо придерживаться и при разработке mobile first сайтов. Хватает средств типографики и цветового кодирования, чтобы выделить важное и расставить акценты. Картинка без информационного наполнения — лишняя нагрузка. Создание анимации для сайта также должно быть вписано в концепцию помощи продвижения юзера к цели.

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

Простая и отзывчивая навигация

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

В остальных случаях навигация выглядит традиционно: скромная иконка и раскрывающееся поверх контента бургер-меню. Но и тут есть свои хитрости.

  • Иконка бургера должна менять вид при открытом меню и давать возможность закрыть навигацию.
  • Если пункты меню различаются по важности, стоит визуально обозначить акценты — выделить иконкой или цветом пункт с каталогом продукции или главную посадочную страницу с информацией об услуге/продукте.
  • Когда структура сайта сложная — меню может быть многоуровневым, с переходом на дополнительные блоки со ссылками на подкатегории.
  • Для длинных меню второго уровня лучше отводить отдельный блок в бургере с возможностью прокручивать экран вниз.
  • Если ссылок на втором уровне немного, отличным вариантом будет просто разворачивать каталог в древовидную структуру.
  • При многоуровневой навигации всегда должна быть возможность вернуться на шаг назад, не закрывая меню.
  • Если намечается большая вложенность, стоит ограничиться двумя первыми пунктами в бургере, а далее размещать прямо в начале страницы ссылки на более глубокие уровни каталога. Конечно, можно упрятать 4-5 разных экранов со ссылками в бургер-меню. Но по результатам тестов, такой навигацией тяжело пользоваться из-за длинной последовательности шагов.
  • Тренды современного веб-дизайна сайтов — это про удобство, поэтому в футере желательно сделать дублирующую структуру навигации в другом виде — реализовать ее при помощи аккордеона, с разворачиванием дерева страниц.

Доказанный факт: бургер-меню — сомнительное решение, негативно влияющее на глубину просмотра страниц, но зачастую ему попросту нет альтернативы. Чтобы немного улучшить опыт пользователя, можно дублировать важные пункты навигации прямо на странице. Как вариант, добавить на первой странице хорошо заметную кнопку «Каталог товаров», открывающую нужный уровень основной навигации без необходимости искать иконку или открывать отдельное меню каталога.

При работе с мобильной навигацией, обязательно нужно отслеживать пути движения по сайту. Важно корректировать дизайн меню, если по части пунктов люди перемещаются намного реже.

Кнопки и призывы к действию на маленьком экране

Перед тем как совершать какую-либо активность, читатель несколько секунд сканирует пространство в поисках нужной/интересной информации. При этом внимание направлено по вполне определенной траектории — сверху вниз, с периодическими перемещениями слева направо.

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

Внизу или наверху

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



Если кнопка подразумевает повторяемые шаги (настройки, редактирование, отметка «избранное»), будет логичным разместить ее в верхней части. В случае с интернет-магазином, в шапку добавляют только иконку корзины, а в нижнюю часть карточки товара — «купить».

Горизонтально и вертикально

Кнопки призыва к действию можно группировать в условиях мобильного экрана. Если два таких элемента поставлены рядом, чаще всего это подразумевает, что они связаны общей задачей. Например, «да/нет», «вперед/назад», «принять/пропустить».

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



Если же расположить их одну под другой, это воспринимается иначе — как основное и второстепенное, с совершенно разным контекстом. Хороший пример — «Купить» и «Написать продавцу» на маркетплейсе. Одна команда не отменяет другой, но «Купить» выглядит более приоритетно.

Визуальный язык призывов к действию

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

На примере блок «Start» буквально сигнализирует, что он главный.

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

Простой пример: все подтверждающие — большие и зеленые, а все кнопки отказа — красные. А «купить премиум доступ» — вовсе синяя, чтобы подчеркнуть свою исключительность. После просмотра пары страниц, человек может не читать текст при нажатии, полагаясь на их визуальную иерархию. Главное — не обмануть ожидания и не сломать привычку после того, как в дебрях личного кабинета найдется большой зеленый блок с надписью «удалить мой аккаунт навсегда», добавленный в спешке фронтенд-разработчиком.

Прилипающие кнопки

Мы все привыкли к «липким» меню и прочим деталям, сохраняющим свою позицию относительно экрана, несмотря на прокрутку страницы. В случае со смартфоном, нужно быть осторожным, используя данный прием для фиксации призывов к действию.



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

Иногда разработчик ставит внизу «липкую кнопку» с важным целевым действием, думая, что посетитель неизбежно ее заметит и отреагирует. А потом она вдруг подпрыгивает вверх, потому что телефон расценил нажатие внизу экрана как просьбу показать интерфейс браузера. Такая мелочь, а бесит. Стоит помнить, что тренды веб-разработки не имеют значения, если пользователь испытывает дискомфорт при использовании продукта.

Источник: https://medium.com/@uxmovement/the-optimal-placement-for-mobile-call-to-action-buttons-f75ec0d3c81d

Чек-лист оптимизации мобильного сайта

  1. Изображения правильно подобраны для показа на разных видах экранов. Фото контент имеет достаточное качество, чтобы без замыливания отображаться на retina дисплее смартфона.
  2. Баннеры имеют правильное соотношение сторон на разных гаджетах. Если в телефоне баннер тяготит к квадратной или портретной форме, то на десктопе — к более широкой по горизонтали.
  3. Все кнопки имеют достаточный размер и не расположены слишком близко, чтобы исключить случайное нажатие.
  4. Проведена  оптимизация скорости загрузки сайта, убрано все лишнее.
  5. Поля ввода определены правильно, с указанием типа. Особенно важно для ввода номеров телефона и кредитных карт — на смартфоне целесообразно открывать исключительно цифровую клавиатуру.
  6. Для указания даты, времени и других специальных форматов используются нативные средства ввода. Достигается также при помощи правильного указания типа поля ввода.
  7. Если ссылки располагаются в виде списка, одна под другой, они имеют кликабельные области вокруг текста, чтобы юзер не искал, куда приложить палец.
  8. Для контента указаны разумные отступы от края и комфортный межстрочный интервал.
  9. Технические данные загружаются постепенно или по запросу, при помощи lazy load — особенно справедливо для больших каруселей с карточками товаров.

Несколько моментов в угоду Google Mobile First Indexing:

  • разумный размер шрифта по мнению Google — не менее 14-16px;
  • текстовый контент структурирован и разбит на абзацы;
  • предложения не длиннее 50-60 символов;
  • текст имеет подходящую контрастность относительно фона;
  • мобильная и десктопная версия одинаково наполнены контентом;
  • все кликабельные элементы имеют активную область, в которую реально попасть пальцем — не менее 44px в высоту;
  • для отображения медиа-контента используются стандарты HTML5;
  • между объектами достаточно свободного пространства;
  • попапы не мешают изучать контент;
  • соблюдена микроразметка, особенно на страницах интернет-магазинов, а также в хлебных крошках и на страницах с контактами;
  • сайт быстро загружается;
  • нет дополнительной прокрутки из-за элементов, более широких по горизонтали, чем экран телефона (исключение: галереи и блоки карточек с возможностью свайпа).

Источник: https://webpromoexperts.net/blog/mobajl-ferst-gugla-2018/

Один палец и один глаз

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

Директор по продуктам компании Google и автор книги «Mobile First», Люк Вроблески отметил, что мобильные интерфейсы должны сочетать высокую скорость взаимодействия с простыми функциями и кристально ясную подачу информации. Типичный пользователь оперирует смартфоном при помощи одного пальца, захватывая экран практически только одним глазом на протяжении частых, но коротких сессий. Поэтому тренды в UX-дизайне 2019 года все больше ориентированы на скорость и использование гаджетов в транспорте.

Правило «один палец и один глаз» можно смело применять для качественной оценки дизайна мобильного приложения или адаптивного веб-сайта. Полностью этот принцип звучит как вопрос: «Может ли пользователь за шестьдесят секунд выполнить необходимое действие при помощи одного пальца и одного глаза?»

Почему только за минуту? Люди, более 150 раз в день обращающиеся к смартфону с разными задачами, не имеют лишних 5-10 минут на освоение громоздкого или не понятного интерфейса. Если вам не удалось уложиться в срок взаимодействия или не получилось донести нужную информацию — юзер просто уйдет к тому, кто смог это сделать. Потребность в скорости и доступности — краеугольный камень мотивации МП.

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

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

Краткие выводы для тех, кто не осилил текст

  1. Суть метода mobile first в первоначальной разработке адаптива с оптимальным набором контента и функций.
  2. При работе над десктопной версией новое не добавляется, только переформатируется и оформляется иначе.
  3. В мире на данный момент почти у каждого есть телефон, половина использует его как основное устройство для серфинга и общения. А значит перспективы у разработки mobile friendly сайтов гигантские.
  4. 77% мобильного трафика приходится на развлечения, общение и покупки.
  5. Метод mobile first востребован и имеет право на жизнь, если у продукта есть хотя бы намек на аудиторию со смартфонами.
  6. Разработка сайтов требует более высокой квалификации и затрат времени, а значит будет дороже для заказчика.
  7. Грамотная и проработанная разработка адаптивных сайтов приводит к повышению конверсии и большей лояльности пользователей.
  8. При использовании смартфона люди тратят считанные секунды на принятие решения, поэтому страницы нужно наполнить исключительно полезным контентом.
  9. Навигацию на сайте для смартфона необходимо сделать максимально понятной, без большой вложенности.
  10. Бургер меню — необходимое зло. Приоритетные элементы навигации можно дублировать на страницах сайта.
  11. Существует «гравитация чтения» — внимание направлено сверху вниз, с отклонениями слева направо. Это нужно учитывать при размещении призывов к действию.
  12. Расположенным рядом кнопкам необходимо поддерживать друг друга, а не конкурировать (в идеале — одна кнопка без вариантов).
  13. Специалисты делают активные объекты столь большими, чтобы они были комфортны для нажатия пальцем.
  14. Скорость загрузки страницы — самое важное. Она достигается не только при помощи оптимизации страниц, но и за счет грамотного проектирования контента и применения постепенной загрузки данных.
  15. Google Mobile First Indexing на стороне Добра в лице разработчиков мобильных сайтов.
  16. Почаще задавать себе вопрос: «Может ли пользователь за шестьдесят секунд выполнить необходимое действие при помощи одного пальца и одного глаза?».
  17. Это хорошая статья.
Поделись своей эмоцией после прочтения статьи
Давайте обсудим Ваш проект
Мы с радостью сделаем бесплатную оценку вашего проекта
Или просто загрузите файл с презентацией или описанием
Моисеев Артем
Business Development Manager
Моисеев Артем