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

Москва 2013

http://mobikit.ru

Шапка и организация меню

Выпадающее меню в «шапке» сайта представлено кнопкой с типовой иконкой. Как правило, это 3 горизонтальные полоски одинаковой ширины, тонкие или средней толщины

Стандартная иконка меню мобильного сайта

Вариации на тему

Со словом «Меню»

С буллетами 4 полоски Толстыеполоски

Кнопка выпадающего меню

Полоскиразной ширины

Полоски с обрамлением Много полосокс буллетами

http://mobikit.ru

Шапка и организация меню

Кнопка меню располагается, как правило, ближе к правому краю шапки. Такое расположение обусловленорасположением логотипа (привычное расположение логотипа в web – левый верхний угол). Также, оно не противоречит актуальным UX исследованиям, в частности How Do Users Really Hold Mobile Devices?Реже применяется расположение кнопки слева. Еще реже применяется центральное расположение меню.

Примеры расположения в шапке сайта

Расположение кнопки выпадающего меню

Справа Слева Другое

http://mobikit.ru

Шапка и организация меню

Выпадающее меню реализуется, как правило, 3 способами:1. Перекрытие контента сверху полупрозрачным или сплошным блоком с пунктами меню2. Смещением контента сайта влево или вправо, в зависимости от расположения кнопки меню. Смещение

может затрагивать шапку, может сдвигать только основной контент.3. Перекрытие контента слева или справа полупрозрачным или сплошным блоком с пунктами меню

Примеры реализации

Механика выпадающего меню

Перекрытие контента сверху сплошным блоком

Перекрытие контентаслева сплошным блоком

Смещение контентасайта вправо

без смещения шапки

Смещение контентасайта вправо

со смещением шапкиПерекрытие контента сверху

полупрозрачным блоком

http://www.mamaye.org/ http://m.prometheusreg.com/http://www.hennessy.com/us

http://mobikit.ru

Шапка и организация меню

Примеры реализации

Структура выпадающего менюСуществует 2 основных варианта организации меню – список и сетка. Оба варианта могут содержать иконки.

Меню-списокс иконками

Меню-списокбез иконок

Меню-списокгибридное

Мню-сетка без иконок Меню-сетка с иконками

http://www.siteman.no/ http://uk.rimmellondon.com/ http://m.hiddenvalley.com/ http://www.hennessy.com/us

http://mobikit.ru

Шапка и организация меню

Физическое появление меню реализуется следующими способами:1. Плавное появление с равномерным движением2. Плавное появление с ускорением3. Плавное появление с замедлением4. Моментальное появлениеЭти способы актуальны как для вертикального выпадающего меню, так и для варианта со смещением контента

Примеры реализации

Физика выпадающего меню

Плавное появление

Моментальное появление

http://mobikit.ru

Шапка и организация меню

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

Примеры реализации

Без выпадающего меню

С иконками С текстовыми ссылками

http://m.post.edu/

http://www.aniika.com/shop/

http://m.htc.com/us

http://m.t-mobile.com/

http://m.gmc.com/

http://m.prudential.com/

http://m.nordstrom.com/

http://m.whalewatchgoldcoast.com.au/

http://m.foodnetworkstore.com/

http://mobikit.ru

Шапка и организация меню

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

Примеры реализации

Гибридные варианты

http://www.dyson.com/

http://m.zgallerie.com/ http://www.officedepot.com/

http://m.subway.com/pages/home

http://m.si.com/

http://mobikit.ru

Шапка и организация меню

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

Поиск по сайту

Поиск: прочие типовые элементы шапки

Стандартныйзнак поиска

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

Скрыто Отображается Всегда отображается

Размещение поисковой строкив «сайдбаре»

http://m.samsung.com/us/

http://m.magellangps.com/

http://m.vichyusa.com/

http://m.hasbro.com

http://mobikit.ru

Шапка и организация меню

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

ГеоЛокатор

Геолокатор: прочие типовые элементы шапки

Стандартный знак геопоиска

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

Вариации на тему Примеры использования

http://touch.toyota.com/

http://www.theartofshaving.com/

http://m.clinique.com/

http://mobile.drivetime.com/

http://www.7forallmankind.com/mobile

http://www.dyson.com/

http://www.officedepot.com/

http://m.subway.com/pages/home

http://mobikit.ru

Шапка и организация меню

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

Корзина

Корзина: прочие типовые элементы шапки

Стандартный знак корзины

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

Вариации на тему

Примеры использования

Редкие случаи отображения стоимости

http://m.zagg.com/

http://m.finishline.com/

http://www.visualsupply.co/

http://mobile.decoywines.com/

http://m.kohls.com/

http://mobikit.ru

Шапка и организация меню

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

Вариации на тему

Примеры использования

Размещение в «сайдбаре» Размещение в выпадающем меню

http://m.flirtprom.com/ http://uk.rimmellondon.com/

http://m.orbitgum.com/

http://www.ikea.se/

http://m.fancyfeast.com/

http://www.bk.com/en/us/mobile/index.html

http://mobikit.ru

Шапка и организация меню

Click-2-call: прочие типовые элементы шапкиФункционал звонка по клику размещается двумя способами:1. Текстом click-2-call ссылки является сам номер телефона2. Текстом click-2-call ссылки является рекламный слоган («позвони нам», «горячая линия») или сlick-2-call

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

Номер телефона является текстом ссылки

Примеры использования

Click-2-call в виде иконки

http://mobikit.ru

Типовые элементы сайта

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

Примеры использования Слайдер на внутренней странице

http://www.bk.com/ http://m.chevrolet.com/

http://mobikit.ru

Типовые элементы сайта

Графический слайдер: механикаГрафический слайдер как правило управляется жестом «swipe», который позволяет перелистывать элементы привычным движением пальца, как страницы книги.Существует несколько механизмов реакции слайдера на жест «swipe»:

1. Смена кадра после завершения «swipe»Прокрутка кадра происходит только после того, как пользователь завершил «swipe» и убрал палец с экрана

2. Смена кадра в момент «swipe»Прокрутка кадра происходит в тот момент, когда пользователь производит «swipe» и еще не убрал палец с экрана.В данном случае, если два варианта взаимодействия:2.1 Кадр прокручивается самостоятельно, не дожидаясь завершения пользовательского действия «swipe»2.2 Кадр следует за пальцем пользователя:

2.2.1 С откатом назад при прокрутке кадра менее 50%Если пользователь сделал короткий «swipe» и смещение кадра произошло менее чем на 50%, то кадр откатывается назад2.2.2 Без отката назад, при любом значении прокрутки кадра

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

Механизм первого/последнего кадраСуществует 2 варианта поведения пограничных кадров:

со сменой последнего на первый («бесконечная карусель») без смены (дальнейшая прокрутка невозможна)

http://mobikit.ru

Типовые элементы сайта

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

сайтах)2. Слайдер является навигационным элементом, заголовком контента, меняющегося при его прокрутке.

Результаты игр на спортивных сайтах

Примеры использованияПогода

на главной m.mail.ruНавигация по

рубрикам новостейНавигация по

расписанию спортклуба

http://www.nba.com http://m.si.com/ http://m.mail.ru/ http://m.yandex.ru/

http://mobikit.ru

Типовые элементы сайта

Меню главной страницы

Меню главной страницы имеет 2 основных типа организации:

1. Меню-список (list) - может содержать иконки разделов или только текст2. Меню-сетка (grid) - всегда реализуется с иконками разделов

Меню-список с иконками

Примеры использованияМеню-список

без иконок Меню-сетка

http://m.swatch.com http://m.aureusmedical.com/ http://www.garmin.com/us/m http://touch.toyota.com http://m.hsn.com/

http://mobikit.ru

Типовые элементы сайта

ФотогалереяФотогалерея применяется в следующих случаях:1. Фотогалерея одного объекта (корпоративный сайт с фотографиями офиса, промо-сайт одного продукта с фото)2. Несколько фотогалерей (каталог объектов, у каждого своя фотогалерея)

Также, существует 2 способа организации просмотра фотографий галереи: на отдельной странице с навигацией на основной странице

Навигация по галерее , как правило, реализуется в виде стрелок (следующий, предыдущий) , смены изображений путем «swipe» или лентой/сеткой из превью фотографий, размещаемой под просматриваемым изображением.

Превью фото с просмотром на отдельной странице

Примеры использования

Фото с превью на странице продукта

http://m.mitsubishi-motors.ru/http://m.volvocars.com/

http://mobikit.ru

Типовые элементы сайта

Список товаровСписок товаров характерен для интернет магазинов и организуется двумя основными способами:

Список с превью Сетка

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

Список товаров в виде сетки

Примеры использования

Стандартный переключательвида списка

Редкий вариант: список товаров с горизонтальной прокруткойСтандартный список

http://www.drpepper.com/mobile http://m.hm.com http://m.hsn.com/

http://mobikit.ru

Типовые элементы сайта

Список товаров: структура элемента товараЭлементы товаров в виде сеткиЭлементы товаров в виде списка

1. Название товара2. Кнопка добавления в корзину3. Цена4. Рейтинг (внутренний или

соцсети)5. Информация о действующей

скидке6. Информация о доставке7. Фото товара

1

3

6

7

1

234

5

6

7

http://mobikit.ru

Типовые элементы сайта

Сравнение товаровФункционал сравнения товаров характерен для интернет магазинов, но применяется редко, ввиду сложности реализации в мобильном интерфейсе.

Сравнение характеристик автомобилейПримеры использования

http://m.mitsubishi-motors.ru/

http://mobikit.ru

Типовые элементы сайта

Карточка товараКарточка товара характерна для интернет магазинов, содержит подробную информацию о товаре и возможность заказа/добавления в корзину

1. Название товара2. Артикул3. Цена4. Рейтинг (внутренний или соцсети)5. Информация о действующей скидке6. Фото товара(фотогалерея)7. Выбор цвета/текстуры8. Выбор размера9. Выбор количества10. Описание товара11. Отзывы о товаре12. Социальные сети13. Видеообзор14. Статус доступности15. Кнопка добавления в корзину/заказа16. Кнопка добавления в избранное

Основные характеристики1

1

23

4

5

6

6

7

7

8

8

9

9

10 11 12

14

15

15

16

http://m.uggaustralia.com/

http://mobikit.ru

Типовые элементы сайта

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

1. Название товара (ссылка на карточку)2. Цена3. Количество4. Превью5. Стоимость 6. Возможность удаления7. Общая сумма8. Форма оформления заказа или 9. Ссылка/кнопка на форму

1

1

2

2

3

34

5

4

6

6

7

7

8

8

http://m.hsn.com/

http://mobikit.ru

Типовые элементы сайта

Подвал (Footer)Стандартно, подвал содержит правовую информацию о использовании материалов сайта, контактную информацию, ссылки на социальные сети, ссылку на web версию сайта и прочую вторичную информацию.

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

Зафиксированный подвал

Типовые элементы для мобильного сайта компании «Якитория»

Москва 2013

http://mobikit.ru

Типовые элементы сайта Якитория

http://www.hennessy.com/us

Организация разделов меню

http://m.hm.com http://www.eyeballnyc.com/mobile http://www.samovidic.com/mobile/iphone

Организация менюПример организации выпадающего меню

Типовые элементы сайта Якитория

Организация меню внутри разделов

http://mobikit.ru

http://www.bobbibrowncosmetics.com/index.tmpl

http://m.amerisleep.com http://m.zennioptical.com

http://mobikit.ru

Типовые элементы сайта Якитория

Организация конечной страницы товараhttp://m.cariboucoffee.com http://www.getcrackin.com/mobile/ http://www.newbalance.com

Спасибо за внимание!

+7 495 787-63-37info@mobikit.ruhttp://mobikit.ru