Рекомендации по дизайну мобильной версии сайта. В чём разница между адаптивом и мобильной версией. О стандартных приёмах в привычных интерфейсах.

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

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

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

4. Более 50 % использует
моб.устройства наряду
с компьютерами
Как люди выходят в сеть

5. Более 50 % использует
моб.устройства наряду
с компьютерами
Как люди выходят в сеть
Более 20 % выходят в сеть
только с мобильных
устройств

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

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

8. 29% всех визитов на веб-сайты
совершается с мобильных устройств
Доля заходов с мобильных устройств
Доля визитов со смартфонов составляет
2/3 визитов с моб.устройств. Эта цифра
продолжает расти!

9. 29% всех визитов на веб-сайты
совершается с мобильных устройств
Доля заходов с мобильных устройств
Доля визитов со смартфонов составляет
2/3 визитов с моб.устройств. Эта цифра
продолжает расти!
Доля визитов с планшетов начала
медленно падать (это подтверждается и
падением спроса на планшеты)

10. Распределение по ОС и устройствам
iOS 8-9
— 90% айфонов
Android 4.2-5.0
— 80% андроидов

11. 95% всех визитов
с мобильных устройств
приходится на iOS и Android
Распределение по ОС и устройствам
iOS 8-9
— 90% айфонов
Android 4.2-5.0
— 80% андроидов

12. 95% всех визитов
с мобильных устройств
приходится на iOS и Android
Распределение по ОС и устройствам
iOS 8-9
— 90% айфонов
Android 4.2-5.0
— 80% андроидов
Количество визитов без JS минимально, можно сильно не париться.
jQuery mobile используют все, включая Яндекс и других.

13. В 2016 году без моб.версии нельзя
юзабилити сайта на моб.устройстве напрямую связано с конверсией в этом канале
Конверсия больше, если пользователю удобно на моб.устройстве
нельзя игнорировать каждого третьего потенциального клиента
Каждый третий пользователь заходит на сайт с моб.устройства
И Яндекс и Google официально объявили о приоритете адаптированных сайтов в моб.выдаче
Mobile-friendly сайты выше в моб.выдаче, чем desktop-only

14. VSМоб.версия Адаптив
Отдельная дизайн сайта
под мобильные устройства
Адаптация десктопного
дизнайна под маленькие экраны

15. руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
Моб.версия АдаптивVS

16. руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
Моб.версия АдаптивVS

17. руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
Моб.версия АдаптивVS

18. руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия АдаптивVS

19. руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
VS

20. макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
VS

21. макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
обновлением всей верстки = обновление адаптива
Легок в поддержке
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
VS

22. макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
обновлением всей верстки = обновление адаптива
Легок в поддержке
грузится 70% кода, который вообще не нужен
Ощутимо медленнее
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
VS

23. макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
обновлением всей верстки = обновление адаптива
Легок в поддержке
грузится 70% кода, который вообще не нужен
Ощутимо медленнее
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
по сути решение «здесь и сейчас»
Не удобно развивать
VS

24. макеты редко нужны, верстка одна, интеграции нет
Прост и быстр в разработке
обновлением всей верстки = обновление адаптива
Легок в поддержке
грузится 70% кода, который вообще не нужен
Ощутимо медленнее
руки не связаны интерфейсом десктопа
«Сделано для моб.устройств»
не загружается код для десктопа
Быстро работает (меньше кода)
масштабируемая структура, интерфейс
Удобна в расширении и развитии
отдельные дизайн макеты, верстка, интеграция
Больше работ по созданию
Моб.версия Адаптив
любые изменения вносятся отдельно от десктопа
Требует отдельной поддержки
по сути решение «здесь и сейчас»
Не удобно развивать
либо многое нужно менять при перестроении
Не высокое юзабилити
VS

25. Моб.версия АдаптивVS
Оптимальна для сложных,
больших, функциональных
сайтов
— интернет-магазины
— крупные порталы
— площадки (сервисы)
— везде, где много функционала

26. Моб.версия АдаптивVS
Оптимальна для сложных,
больших, функциональных
сайтов
Оптимальна для простых,
информационных, мало
меняющихся сайтов
— интернет-магазины
— крупные порталы
— площадки (сервисы)
— везде, где много функционала
— корпоративные сайты
— лэндинги
— сайты СМИ
— простые инф. сайты

27. VSm.site.com RESS
Выделение мобильной
версии на поддомен
Отправка нужного кода
в зависимости от устройства

28. m.site.com RESS
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
VS

29. m.site.com RESS
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
VS

30. m.site.com RESS
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
VS

31. m.site.com RESS
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
VS

32. m.site.com RESS
можно делаться, нет проблем с индексацией
Один и тот же URL
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
VS

33. m.site.com RESS
можно делаться, нет проблем с индексацией
Один и тот же URL
нет предложений «перейти на моб.версию» и т.п.
Открывается сразу
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
VS

34. m.site.com RESS
можно делаться, нет проблем с индексацией
Один и тот же URL
нет предложений «перейти на моб.версию» и т.п.
Открывается сразу
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
можно доверять и не беспокоиться
Так делают Яндекс, Гугл и другие
VS

35. m.site.com RESS
можно делаться, нет проблем с индексацией
Один и тот же URL
нет предложений «перейти на моб.версию» и т.п.
Открывается сразу
отдельный URL — отдельная страница. Все просто
В лоб, но привычно и надежно
при входе с мобильного без m. надо спрашивать
Надо предлагать переход
по сути m.site.com — отельный сайт
Разные URL
проблемы, когда part.site.com и т.д.
Сложности, когда поддомены
можно доверять и не беспокоиться
Так делают Яндекс, Гугл и другие
плюсы очевидны, очевидных минусов нет
Самый современный подход сейчас
VS

36. стандартные приемы в мобильных интерфейсах
«Люди привыкли»
Очень поможет

37. 1 / 4
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка

38. 2 / 4
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка

39. 3 / 4
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка

40. 4 / 4
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка

41. Связной
1 / 3
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка

42. Техносила
2 / 3
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка

43. Wallmart
3 / 3
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка

44. Яндекс.Маркет
1 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход

45. iOS
2 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход

46. Amazon
1 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие

47. Amazon
2 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие

48. Яндекс.Маркет
1 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие
Открытие слоя, модального окна или действие выбора
Полоса без стрелки — слой / действие

49. Яндекс.Маркет
2 / 2
Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие
Открытие слоя, модального окна или действие выбора
Полоса без стрелки — слой / действие

50. Сдвиг или переход; скролл внутри меню
Меню — это бургер
Логотип, меню, поиск — до 3-4 объектов
Аскетичная шапка
iOS
Переход на следующий экран / страницу
Полоса со стрелкой вправо — переход
Раскрытие вложенного списка; без перехода
Полоса со стрелкой вниз — раскрытие
Открытие слоя, модального окна или действие выбора
Полоса без стрелки — слой / действие
Однозначный выбор; видно, что выбрано
Полоса со значением — выбрано
1 / 1

51. Расшифровка работы функции
iOS
1 / 1
Подпись под полосой — объяснение

52. Расшифровка работы функции
Яндекс.Маркет
Другой цвет текста или выравнивание по центру
1 / 1
Подпись под полосой — объяснение
Полоса другого стиля — показать больше

53. Расшифровка работы функции
Подпись под полосой — объяснение
Яндекс.Маркет
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
1 / 1

54. Расшифровка работы функции
Подпись под полосой — объяснение
Яндекс.Маркет
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
Множественный выбор; видно, что выбрано
Вторая строка в полосе — выбранное
1 / 1

55. Расшифровка работы функции
Подпись под полосой — объяснение
iOS
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
Множественный выбор; видно, что выбрано
Вторая строка в полосе — выбранное
1 / 2
Разделение разных типов информации на группы
Зонирование фоном — понимание

56. Расшифровка работы функции
Подпись под полосой — объяснение
Яндекс.Маркет
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
Множественный выбор; видно, что выбрано
Вторая строка в полосе — выбранное
2 / 2
Разделение разных типов информации на группы
Зонирование фоном — понимание

57. Расшифровка работы функции
Подпись под полосой — объяснение
Другой цвет текста или выравнивание по центру
Полоса другого стиля — показать больше
Объяснение логической группы строк
Заголовок над полосами — группа
Множественный выбор; видно, что выбрано
Вторая строка в полосе — выбранное
1 / 1
Разделение разных типов информации на группы
Зонирование фоном — понимание
Разделение разных типов информации на группы
Привычное поведение поиска
Курсор в поле
Запрос введен

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

59. Шапка

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

61. Шапка
Заголовок фирменным шрифтом
Кнопки фирменным цветом

62. Шапка
Заголовок фирменным шрифтом
Кнопки фирменным цветом
Консистенция с полной версией: цена, баллы

63. Шапка
Заголовок фирменным шрифтом
Кнопки фирменным цветом
Консистенция с полной версией: цена, баллы
Кнопка акцентным фирменным цветом

64. Шапка
Заголовок фирменным шрифтом
Кнопки фирменным цветом
Консистенция с полной версией: цена, баллы
Кнопка акцентным фирменным цветом
Выбранное в фильтре фирменным цветом

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

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

78. Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное

79. Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам

80. Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Элементы крупные, зоны безопасности большие
Тапать будут пальцами

81. Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Элементы крупные, зоны безопасности большие
Тапать будут пальцами
Лучше слои или отдельные страницы
Минимум всплывашек

82. Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Элементы крупные, зоны безопасности большие
Тапать будут пальцами
Лучше слои или отдельные страницы
Минимум всплывашек

83. Отсекайте смелее, оставляйте только главное
Мало места и это прекрасно!
Главное
минимум элементов в один ряд - надежно
Все по строкам
Элементы крупные, зоны безопасности большие
Тапать будут пальцами
Лучше слои или отдельные страницы
Минимум всплывашек

84. все, что при хавере надо выносить на
Хавера нет, забудьте
Главное

85. все, что при хавере надо выносить на
Хавера нет, забудьте
Главное

86. все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
по страницам или в рамках слоев по шагам
Хлебных крошек нет — навигация

87. все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
по страницам или в рамках слоев по шагам
Хлебных крошек нет — навигация

88. все, что при хавере надо выносить на
Хавера нет, забудьте
Главное
по страницам или в рамках слоев по шагам
Хлебных крошек нет — навигация
Можно смело использовать, уже привычно
Горизонтальный скролл блоков

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

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

91. от 320 до 1024
320-640 разрешение 80% пользователей
Сначала под 320-640
при повороте устройства элементы будут
растягиваться + может увеличиваться
количество элементов в строке
(например, товарная сетка на 320-640 — 2
товара в строке, на 1024 — до 4)
до 1024 резина + адаптив
1024
планшет
320
смартфон
Достаточно подготовить макеты на 640 +
визуальную нотацию изменения интерфейса
при просмотре на 1024

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

93. Можно детально изучать, разбирать на дизайн-решения и использовать
Хорошие примеры
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
Адаптив

94. 🙌
Спасибо
slideshare.net/Aidem_ru
aidem.ru