Почему 2013 год можно считать годом отзывчивого дизайна

Окончена ли эра персональных компьютеров? В США в 2012 году впервые с 2001 года зафиксировали снижение спроса на ПК, по сравнению с предыдущим годом. Зато все большим спросом пользуются планшеты и смартфоны.

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

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

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

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

Создание приложения кажется очевидным решением. Однако в этом случае придется создавать приложение для каждого устройства.

Что касается новостных сайтов, то в США 60% пользователей предпочитают читать новости с помощью мобильного интернета (по данным Pew Research Center), и не используют при этом приложения.

Что такое адаптивный и отзывчивый веб-дизайн

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

Преимущества очевидны: вы создаете свой сайт один раз, и он прекрасно работает на тысячах разных экранов.

Отзывчивый дизайн (responsive web-design) – это часть адаптивного дизайна (adaptive design). В русском языке эти термины часто используется как синонимы. Однако специалисты все же разделяют эти понятия. На портале habrahabr.ru можно найти подробное описание одного и другого термина: «Отзывчивый веб-дизайн = «резиновый» макет, в то время как адаптивный веб-дизайн = «резиновый» макет + прогрессивное улучшение». Подробнее можно почитать в статье «Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница?» на портале habrahabr.ru.

2013 – год отзывчивого дизайна

Учитывая быстрое распространение планшетов и смартфонов, 2013 год, по версии издания Mashable, станет годом «отзывчивого» дизайна.

Правда для российской действительности эта тенденция пока менее актуальна. Против 100 млн планшетов, проданных в США в 2012 году, Россия может противопоставить пока только 2,34 млн (за первые три квартала). Именно столько планшетов по данным IDC было поставлено в Россию за указанный период. Спрос на ноутбуки в России пока что превышает спрос на планшеты более чем в 3 раза: а те же первые три квартала в Россию было экспортировано 8,85 млн ноутбуков. По мнению Зарины Камытбаевой, аналитика IDC, в 2013 году ситуация не изменится, и по количеству проданных устройств ноутбуки также будут обгонять планшеты.

Источники: mashable.com, kommersant.ru

Как вдохновить на покупку, используя Lookbook

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

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

По своей сути, интернет-Lookbook представляет собой коллекцию фотографий, которая продвигает и помогает продавать продуктовую линейку, в данном случае, коллекцию одежды. В качестве примера авторы статьи предлагают рассмотреть Lookbook на DTLR.com.

Lookbook создает эмоциональную привлекательность

Ключевое преимущество маркетинга с использованием Lookbook – это способность «разбудить» чувства покупателя, которые являются важной движущей силой при принятии решения о покупке.
«Что такое шопинг?» — спрашивает Пако Андерхилл в своей книге 2008 года «Почему мы покупаем: Наука Покупки — обновленная и пересмотренная для Интернета».

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

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


Lookbook на сайте MALIBU NATIVE показывается видео, которое выражает определенный образ жизни

Lookbook в социальных медиа

Lookbook-концепция стала популярной на некоторых сайтах социальных медиа, В качестве примера можно привести Pinterest.

Пользователи этой относительно новой социальной сети размещают фотографии из различных коллекций одежды, которые представляют собой визуальные образы. Фактически, потребители создают «списки пожеланий» (wish lists), практически являющиеся лукбуками, и делятся ими с друзьями. В результате формируются сообщества группового шопинга.

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

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

Для того, чтобы подкрепить такой стиль шопинга, онлайн-ритейлерам стоит подумать об использовании высококачественных фотографий вместо простых изображений продукта, а также ввести кнопку “PIN IT”.

Lookbook на сайтах интернет-магазинов

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

Abercrombie & Fitch website — прекрасный пример такого Lookbook-маркетинга, где каждая страница Lookbook включает в себя опцию приобрести отдельный элемент, показанный в созданном образе.


Abercrombie & Fitch позволяет посетителям сайта сделать покупки прямо из этого Lookbook.

Точно так же, Lookbook магазина Roxy включает в себя ссылку «Купить этот образ».

Lookbook магазина Roxy также позволяет купить каждую вещь по отдельности из созданного образа.

Резюме:

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

Источник: practicalecommerce.com

20 советов как настроить сравнение товаров без ущерба для юзабилити

Что должна включать «юзабельная» страница сравнения товаров? Приводим советы портала getelastic.com на примере магазинов по продаже мобильных телефонов.

Категории и страницы поиска

1. Используйте с умом фильтры и инструменты сортировки

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

В качестве инструмента сортировки можно добавить отзывы клиентов.


Для выбора по цене иногда полезно использовать «ползунки».

2. Не выносите сравнение на боковую часть страницы сайта

В противном случае панель сравнения попадет в зону «баннерной слепоты».

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

3. Нужно иметь четкий «призыв к действию» (call to action) рядом с чек-боксом

Держите эти призывы к действию, по возможности, в поле зрения пользователя.

4. Ссылка должна оставаться ссылкой

Одним из самых основных правил веб-юзабилити является правило: «ссылка должна выглядеть как ссылка». Ссылки должны выглядеть интерактивными: быть выделенными другим цветом, подчеркнуты, или иметь подпись «нажмите на [____]».

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

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

6. Предложите сравнить товары на странице поиска

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

Таблицы сравнения

7. Сделайте кнопку «Закрыть» очевидной

Как и в случае с любым лайтбоксом, дизайн кнопки «Закрыть» должен быть очевидным.

8. Используйте большие изображения товаров

Клиенты очень быстро забывают, что они выбирали. Позвольте им вспомнить свой выбор с помощью хорошей картинки.

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

9. Сделайте картинку интерактивной

Удивительно, но некоторые таблицы сравнения включают в себя изображения, которые не являются интерактивными.

10. Включите «звездный» рейтинг

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

11. Сделайте цены заметными

Демонстрируйте цену везде, где это уместно, даже если это «от [цена]».

12. Сделайте кнопку «Добавить в корзину» заметной

Избегайте белых и серых кнопок. Как и любой призыв к действию, сделайте кнопку «Добавить в корзину» или «Выбрать» заметной.

Размещайте эти кнопки, как в верхней, так и в нижней части таблицы.

13. Не забывайте ставить ссылку «Подробнее о товаре»

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

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

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

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

15. «Печать / Сохранить» и функция «Отправить email»

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

16. Опция «Свернуть/Развернуть»

Длинные таблицы с большим количеством информации трудно воспринимать. Нужно предоставить возможность разворачивать и сворачивать ряд опций (для отображения и скрытия информации).

Ссылки нужно делать очевидным и интерактивными.

17. Скройте сходства или выделите подсветкой различия

Эта функция подчеркивает действительно разные варианты.


18. Добавьте всплывающие подсказки

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

19. Преобразование единиц измерения (при необходимости)

Если ваш магазин работает в нескольких странах, позаботьтесь о том, чтобы единицы измерения (граммы, сантиметры и др.) отражались корректно и соответствовали принятой в данной стране системе.

20. Лайтбокс должен иметь скролл

Для длинных страниц информации полоса прокрутки помогает клиентам сопоставить атрибуты товара.

«Анализируй это»: путеводитель по улучшению конверсии

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

«Анализируй это»: путеводитель по улучшению конверсии

*Кнопка «Призыв к действию» или «Call to action» расположена, как правило, на рекламном баннере, странице товара или посадочной странице. Примеры: «Купить», «Подписаться», «Посмотреть» и т.п.

Источник: seogadget.co.uk