Дизайн мобильной версии сайта

Мобильная версия сайтарекомендации по дизайну

по данным исследований ФОМ и Яндекса в 2016 году

На 2016 год

Как люди выходят в сеть

Более 50 % использует моб.устройства наряду

с компьютерами

Как люди выходят в сеть

Более 50 % использует моб.устройства наряду

с компьютерами

Как люди выходят в сеть

Более 20 % выходят в сеть только с мобильных

устройств

Доля заходов с мобильных устройств

29% всех визитов на веб-сайты совершается с мобильных устройств

Доля заходов с мобильных устройств

29% всех визитов на веб-сайты совершается с мобильных устройств

Доля заходов с мобильных устройств

Доля визитов со смартфонов составляет 2/3 визитов с моб.устройств. Эта цифра продолжает расти!

29% всех визитов на веб-сайты совершается с мобильных устройств

Доля заходов с мобильных устройств

Доля визитов со смартфонов составляет 2/3 визитов с моб.устройств. Эта цифра продолжает расти!

Доля визитов с планшетов начала медленно падать (это подтверждается и падением спроса на планшеты)

Распределение по ОС и устройствам

iOS 8-9 — 90% айфонов

Android 4.2-5.0 — 80% андроидов

95% всех визитовс мобильных устройств

приходится на iOS и Android

Распределение по ОС и устройствам

iOS 8-9 — 90% айфонов

Android 4.2-5.0 — 80% андроидов

95% всех визитовс мобильных устройств

приходится на iOS и Android

Распределение по ОС и устройствам

iOS 8-9 — 90% айфонов

Android 4.2-5.0 — 80% андроидов

Количество визитов без JS минимально, можно сильно не париться.jQuery mobile используют все, включая Яндекс и других.

В 2016 году без моб.версии нельзя

юзабилити сайта на моб.устройстве напрямую связано с конверсией в этом канале

Конверсия больше, если пользователю удобно на моб.устройстве

нельзя игнорировать каждого третьего потенциального клиента

Каждый третий пользователь заходит на сайт с моб.устройства

И Яндекс и Google официально объявили о приоритете адаптированных сайтов в моб.выдаче

Mobile-friendly сайты выше в моб.выдаче, чем desktop-only

VS Моб.версия Адаптив

Отдельная дизайн сайта под мобильные устройства

Адаптация десктопного дизнайна под маленькие экраны

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

Моб.версия Адаптив VS

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

Моб.версия Адаптив VS

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

масштабируемая структура, интерфейс

Удобна в расширении и развитии

Моб.версия Адаптив VS

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

масштабируемая структура, интерфейс

Удобна в расширении и развитии

отдельные дизайн макеты, верстка, интеграция

Больше работ по созданию

Моб.версия Адаптив VS

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

масштабируемая структура, интерфейс

Удобна в расширении и развитии

отдельные дизайн макеты, верстка, интеграция

Больше работ по созданию

Моб.версия Адаптив

любые изменения вносятся отдельно от десктопа

Требует отдельной поддержки

VS

макеты редко нужны, верстка одна, интеграции нет

Прост и быстр в разработкеруки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

масштабируемая структура, интерфейс

Удобна в расширении и развитии

отдельные дизайн макеты, верстка, интеграция

Больше работ по созданию

Моб.версия Адаптив

любые изменения вносятся отдельно от десктопа

Требует отдельной поддержки

VS

макеты редко нужны, верстка одна, интеграции нет

Прост и быстр в разработке

обновлением всей верстки = обновление адаптива

Легок в поддержке

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

масштабируемая структура, интерфейс

Удобна в расширении и развитии

отдельные дизайн макеты, верстка, интеграция

Больше работ по созданию

Моб.версия Адаптив

любые изменения вносятся отдельно от десктопа

Требует отдельной поддержки

VS

макеты редко нужны, верстка одна, интеграции нет

Прост и быстр в разработке

обновлением всей верстки = обновление адаптива

Легок в поддержке

грузится 70% кода, который вообще не нужен

Ощутимо медленнее

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

масштабируемая структура, интерфейс

Удобна в расширении и развитии

отдельные дизайн макеты, верстка, интеграция

Больше работ по созданию

Моб.версия Адаптив

любые изменения вносятся отдельно от десктопа

Требует отдельной поддержки

VS

макеты редко нужны, верстка одна, интеграции нет

Прост и быстр в разработке

обновлением всей верстки = обновление адаптива

Легок в поддержке

грузится 70% кода, который вообще не нужен

Ощутимо медленнее

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

масштабируемая структура, интерфейс

Удобна в расширении и развитии

отдельные дизайн макеты, верстка, интеграция

Больше работ по созданию

Моб.версия Адаптив

любые изменения вносятся отдельно от десктопа

Требует отдельной поддержки

по сути решение «здесь и сейчас»

Не удобно развивать

VS

макеты редко нужны, верстка одна, интеграции нет

Прост и быстр в разработке

обновлением всей верстки = обновление адаптива

Легок в поддержке

грузится 70% кода, который вообще не нужен

Ощутимо медленнее

руки не связаны интерфейсом десктопа

«Сделано для моб.устройств»

не загружается код для десктопа

Быстро работает (меньше кода)

масштабируемая структура, интерфейс

Удобна в расширении и развитии

отдельные дизайн макеты, верстка, интеграция

Больше работ по созданию

Моб.версия Адаптив

любые изменения вносятся отдельно от десктопа

Требует отдельной поддержки

по сути решение «здесь и сейчас»

Не удобно развивать

либо многое нужно менять при перестроении

Не высокое юзабилити

VS

Моб.версия Адаптив VS

Оптимальна для сложных, больших, функциональных

сайтов

— интернет-магазины — крупные порталы — площадки (сервисы) — везде, где много функционала

Моб.версия Адаптив VS

Оптимальна для сложных, больших, функциональных

сайтов

Оптимальна для простых, информационных, мало меняющихся сайтов

— интернет-магазины — крупные порталы — площадки (сервисы) — везде, где много функционала

— корпоративные сайты — лэндинги — сайты СМИ — простые инф. сайты

VS m.site.com RESS

Выделение мобильной версии на поддомен

Отправка нужного кодав зависимости от устройства

m.site.com RESS

отдельный URL — отдельная страница. Все просто

В лоб, но привычно и надежно

VS

m.site.com RESS

отдельный URL — отдельная страница. Все просто

В лоб, но привычно и надежно

при входе с мобильного без m. надо спрашивать

Надо предлагать переход

VS

m.site.com RESS

отдельный URL — отдельная страница. Все просто

В лоб, но привычно и надежно

при входе с мобильного без m. надо спрашивать

Надо предлагать переход

по сути m.site.com — отельный сайт

Разные URL

VS

m.site.com RESS

отдельный URL — отдельная страница. Все просто

В лоб, но привычно и надежно

при входе с мобильного без m. надо спрашивать

Надо предлагать переход

по сути m.site.com — отельный сайт

Разные URL

проблемы, когда part.site.com и т.д.

Сложности, когда поддомены

VS

m.site.com RESS

можно делаться, нет проблем с индексацией

Один и тот же URLотдельный URL — отдельная страница. Все просто

В лоб, но привычно и надежно

при входе с мобильного без m. надо спрашивать

Надо предлагать переход

по сути m.site.com — отельный сайт

Разные URL

проблемы, когда part.site.com и т.д.

Сложности, когда поддомены

VS

m.site.com RESS

можно делаться, нет проблем с индексацией

Один и тот же URL

нет предложений «перейти на моб.версию» и т.п.

Открывается сразу

отдельный URL — отдельная страница. Все просто

В лоб, но привычно и надежно

при входе с мобильного без m. надо спрашивать

Надо предлагать переход

по сути m.site.com — отельный сайт

Разные URL

проблемы, когда part.site.com и т.д.

Сложности, когда поддомены

VS

m.site.com RESS

можно делаться, нет проблем с индексацией

Один и тот же URL

нет предложений «перейти на моб.версию» и т.п.

Открывается сразу

отдельный URL — отдельная страница. Все просто

В лоб, но привычно и надежно

при входе с мобильного без m. надо спрашивать

Надо предлагать переход

по сути m.site.com — отельный сайт

Разные URL

проблемы, когда part.site.com и т.д.

Сложности, когда поддомены

можно доверять и не беспокоиться

Так делают Яндекс, Гугл и другие

VS

m.site.com RESS

можно делаться, нет проблем с индексацией

Один и тот же URL

нет предложений «перейти на моб.версию» и т.п.

Открывается сразу

отдельный URL — отдельная страница. Все просто

В лоб, но привычно и надежно

при входе с мобильного без m. надо спрашивать

Надо предлагать переход

по сути m.site.com — отельный сайт

Разные URL

проблемы, когда part.site.com и т.д.

Сложности, когда поддомены

можно доверять и не беспокоиться

Так делают Яндекс, Гугл и другие

плюсы очевидны, очевидных минусов нет

Самый современный подход сейчас

VS

стандартные приемы в мобильных интерфейсах

«Люди привыкли»

Очень поможет

1 / 4

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

2 / 4

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

3 / 4

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

4 / 4

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Связной

1 / 3

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Техносила

2 / 3

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Wallmart

3 / 3

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Яндекс.Маркет

1 / 2

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Переход на следующий экран / страницу

Полоса со стрелкой вправо — переход

iOS

2 / 2

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Переход на следующий экран / страницу

Полоса со стрелкой вправо — переход

Amazon

1 / 2

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Переход на следующий экран / страницу

Полоса со стрелкой вправо — переход

Раскрытие вложенного списка; без перехода

Полоса со стрелкой вниз — раскрытие

Amazon

2 / 2

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Переход на следующий экран / страницу

Полоса со стрелкой вправо — переход

Раскрытие вложенного списка; без перехода

Полоса со стрелкой вниз — раскрытие

Яндекс.Маркет

1 / 2

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Переход на следующий экран / страницу

Полоса со стрелкой вправо — переход

Раскрытие вложенного списка; без перехода

Полоса со стрелкой вниз — раскрытие

Открытие слоя, модального окна или действие выбора

Полоса без стрелки — слой / действие

Яндекс.Маркет

2 / 2

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапка

Переход на следующий экран / страницу

Полоса со стрелкой вправо — переход

Раскрытие вложенного списка; без перехода

Полоса со стрелкой вниз — раскрытие

Открытие слоя, модального окна или действие выбора

Полоса без стрелки — слой / действие

Сдвиг или переход; скролл внутри меню

Меню — это бургер

Логотип, меню, поиск — до 3-4 объектов

Аскетичная шапкаiOS

Переход на следующий экран / страницу

Полоса со стрелкой вправо — переход

Раскрытие вложенного списка; без перехода

Полоса со стрелкой вниз — раскрытие

Открытие слоя, модального окна или действие выбора

Полоса без стрелки — слой / действие

Однозначный выбор; видно, что выбрано

Полоса со значением — выбрано

1 / 1

Расшифровка работы функции

iOS

1 / 1

Подпись под полосой — объяснение

Расшифровка работы функции

Яндекс.Маркет

Другой цвет текста или выравнивание по центру

1 / 1

Подпись под полосой — объяснение

Полоса другого стиля — показать больше

Расшифровка работы функции

Подпись под полосой — объяснениеЯндекс.Маркет

Другой цвет текста или выравнивание по центру

Полоса другого стиля — показать больше

Объяснение логической группы строк

Заголовок над полосами — группа

1 / 1

Расшифровка работы функции

Подпись под полосой — объяснениеЯндекс.Маркет

Другой цвет текста или выравнивание по центру

Полоса другого стиля — показать больше

Объяснение логической группы строк

Заголовок над полосами — группа

Множественный выбор; видно, что выбрано

Вторая строка в полосе — выбранное

1 / 1

Расшифровка работы функции

Подпись под полосой — объяснениеiOS

Другой цвет текста или выравнивание по центру

Полоса другого стиля — показать больше

Объяснение логической группы строк

Заголовок над полосами — группа

Множественный выбор; видно, что выбрано

Вторая строка в полосе — выбранное

1 / 2

Разделение разных типов информации на группы

Зонирование фоном — понимание

Расшифровка работы функции

Подпись под полосой — объяснениеЯндекс.Маркет

Другой цвет текста или выравнивание по центру

Полоса другого стиля — показать больше

Объяснение логической группы строк

Заголовок над полосами — группа

Множественный выбор; видно, что выбрано

Вторая строка в полосе — выбранное

2 / 2

Разделение разных типов информации на группы

Зонирование фоном — понимание

Расшифровка работы функции

Подпись под полосой — объяснение

Другой цвет текста или выравнивание по центру

Полоса другого стиля — показать больше

Объяснение логической группы строк

Заголовок над полосами — группа

Множественный выбор; видно, что выбрано

Вторая строка в полосе — выбранное

1 / 1

Разделение разных типов информации на группы

Зонирование фоном — понимание

Разделение разных типов информации на группы

Привычное поведение поиска

Курсор в поле

Запрос введен

бренд–коммуникация с пользователем через интерфейс на примере сети магазинов цифровой техники «КЕЙ»

Дизайн–язык

Шапка

Шапка

Заголовок фирменным шрифтом

Шапка

Заголовок фирменным шрифтом

Кнопки фирменным цветом

Шапка

Заголовок фирменным шрифтом

Кнопки фирменным цветом

Консистенция с полной версией: цена, баллы

Шапка

Заголовок фирменным шрифтом

Кнопки фирменным цветом

Консистенция с полной версией: цена, баллы

Кнопка акцентным фирменным цветом

Шапка

Заголовок фирменным шрифтом

Кнопки фирменным цветом

Консистенция с полной версией: цена, баллы

Кнопка акцентным фирменным цветом

Выбранное в фильтре фирменным цветом

Хорошего и не очень хорошего дизайна мобильных версий

Примеры

Всё время держите в голове при дизайне моб.версии

Помните

Отсекайте смелее, оставляйте только главное

Мало места и это прекрасно!

Главное

Отсекайте смелее, оставляйте только главное

Мало места и это прекрасно!

Главное

минимум элементов в один ряд - надежно

Все по строкам

Отсекайте смелее, оставляйте только главное

Мало места и это прекрасно!

Главное

минимум элементов в один ряд - надежно

Все по строкам

Элементы крупные, зоны безопасности большие

Тапать будут пальцами

Отсекайте смелее, оставляйте только главное

Мало места и это прекрасно!

Главное

минимум элементов в один ряд - надежно

Все по строкам

Элементы крупные, зоны безопасности большие

Тапать будут пальцами

Лучше слои или отдельные страницы

Минимум всплывашек

Отсекайте смелее, оставляйте только главное

Мало места и это прекрасно!

Главное

минимум элементов в один ряд - надежно

Все по строкам

Элементы крупные, зоны безопасности большие

Тапать будут пальцами

Лучше слои или отдельные страницы

Минимум всплывашек

Отсекайте смелее, оставляйте только главное

Мало места и это прекрасно!

Главное

минимум элементов в один ряд - надежно

Все по строкам

Элементы крупные, зоны безопасности большие

Тапать будут пальцами

Лучше слои или отдельные страницы

Минимум всплывашек

все, что при хавере надо выносить на

Хавера нет, забудьте

Главное

все, что при хавере надо выносить на

Хавера нет, забудьте

Главное

все, что при хавере надо выносить на

Хавера нет, забудьте

Главное

по страницам или в рамках слоев по шагам

Хлебных крошек нет — навигация

все, что при хавере надо выносить на

Хавера нет, забудьте

Главное

по страницам или в рамках слоев по шагам

Хлебных крошек нет — навигация

все, что при хавере надо выносить на

Хавера нет, забудьте

Главное

по страницам или в рамках слоев по шагам

Хлебных крошек нет — навигация

Можно смело использовать, уже привычно

Горизонтальный скролл блоков

все, что при хавере надо выносить на

Хавера нет, забудьте

Главное

по страницам или в рамках слоев по шагам

Хлебных крошек нет — навигация

Можно смело использовать, уже привычно

Горизонтальный скролл блоков

случайные нажатия, использование на бегу, один так и звонок и т.д.

Помните, что устройство в руке

все, что при хавере надо выносить на

Хавера нет, забудьте

Главное

по страницам или в рамках слоев по шагам

Хлебных крошек нет — навигация

Можно смело использовать, уже привычно

Горизонтальный скролл блоков

случайные нажатия, использование на бегу, один так и звонок и т.д.

Помните, что устройство в руке

от 320 до 1024

320-640 разрешение 80% пользователей

Сначала под 320-640

при повороте устройства элементы будут растягиваться + может увеличиваться количество элементов в строке (например, товарная сетка на 320-640 — 2 товара в строке, на 1024 — до 4)

до 1024 резина + адаптив

1024планшет

320смартфон

Достаточно подготовить макеты на 640 + визуальную нотацию изменения интерфейса при просмотре на 1024

Не забывайте про возврат

Обычно в футере ссылка «Полная версия». Можно продублировать в меню.

На мобильной версии переключатель на полную

В футере ссылка «Мобильная версия

На полной версии переключатель на мобильную

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

Можно детально изучать, разбирать на дизайн-решения и использовать

Хорошие примеры

afisha.yandex.ru avia.yandex.ru market.yandex.ru etsy.com cian.ru nike.com

Мобильная версия

apple.com tehnosila.ru meduza.io kremlin.ru tinkoff.ru mel.fm

Адаптив

🙌Спасибо

slideshare.net/Aidem_ru

aidem.ru