Архив за месяц: Март 2017

Что даёт адаптивный дизайн сайта [Инфографика]

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

И то, на какие именно сайты, заходят мобильные пользователи очень интересует всех маркетологов. Если верить исследованию Google «Путь мобильного пользователя к покупке» , поисковики – самая популярная отправная точка у мобильных пользователей (48%), следом идут сайты различных брендов (33%) и приложения (26%).

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

Что это такое, как это работает, и почему нужно перейти на респонсивный дизайн в инфографике:

what-is-responsive

Психология дизайна: 8 психологических принципов, котoрые пригодятся при разработке

Psychology_for_Designers

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

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

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

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

8 психологических принципов, которые необходимо знать при создании дизайн-концепции

1. Ментальные модели

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

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

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

Desktop_Files

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

В ходе дизайн-процесса нужно постоянно себя проверять: не раздражают ли визуальные элементы и их размещение в макете, ясно ли общее послание, или оно ненамеренно скрыто?

2) Эффект Ресторфф

Или эффект изоляции — эффект человеческой памяти, когда объект, выделяющийся из ряда однородных, запоминается лучше других.

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

Von_Restorff_Effect_Example

Пример на изображении выше слишком прост. Эффект Ресторффа можно найти на любой веб-странице, так как ваше внимание привлекается строго определенными элементами.

Чаще всего этот эффект выражен в элементах призыва к действию (CTA):

conversion-lab-landing-page-1-1

3) Гештальт-принципы
Гештальт-психология исследует зрительное восприятие объектов относительно друг друга.

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

  • Принцип близости: объекты, расположенные рядом, воспринимаются как единая логическая группа. Несмотря на то что, букву U в логотипе Unilever, составляют разные фигуры, человеческий глаз в первую очередь распознает целостную фигуру буквы U.

!Unilever_Logo

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

nbc

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

Girl_Scouts

  • Принцип непрерывности: зрительное восприятие естественным образом движется от одного объекта к другому. Логотип Олимпийских игр – пример визуала, в котором элементы являются продолжением друг друга.

Screen_Shot

  • Фигура и фон: когда глаз видит объект как объект, он отделяет его от окружающего  пространства (фона). В логотипе, посвященному Стиву Джобсу, в зависимости от того, на чем сфокусирован глаз, воспринимается или яблоко, или силуэт Стива Джобса.

Jobs_art_Mak002_web-780x780

4) Висцеральные реакции

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

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

Airbnb_Visceral_Reactions

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

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

5) Психология цвета

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

Их краткое изложение:

Голубой: безопасный, спокойный, честный, доверие, сильный, заботливый

Корпорации часто используют это цвет, чтобы внушить чувство надёжности и уверенности в их бренде.

Цветовая схема Facebook убеждает пользователя, что это надежная и авторитетная социальная сеть, что внушает пользователям чувство безопасности, даже при размещении личной информации.

Facebook_Blue

Красный: энергия, любовь, действие, активность, страсть.

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

Coca_Cola_Red

Оранжевый: счастливый, общительный, дружелюбный, доступный.
Любимый цвет маркетингового ресурса Hubspot.

HubSpot_Orange

Жёлтый: логичный, оптимистичный, думающий наперед, уверенный, игривый.

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

Bzzy_Yellow

Зеленый: рост, органика, естественность, забота, свежесть, земля.

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

Whole_Foods_Green

Черный: утончённость, роскошь, соблазнительный, формальный, авторитетный.

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

Многоцветность: многоканальный, позитивный, игривый, смелый, безграничный.

Google — самый известный пример использования нескольких цветов в логотипе, и в полной мере вызывает выше названные ассоциации с многоцветностью.

Google_Multicolor

 

6) Психология форм

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

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

at_and_t__logo

Логотип сервиса беспроводных сетей AT&T’s

Прямоугольники и треугольники: стабильность, баланс, сила, профессионализм, эффективность, мужественность.

Microsoft и Delta в своих логотипах использует квадраты и треугольники, что вызывает чувство стабильности, эффективности — положительные чувства при ассоциации с брендом.

Microsoft_White_Logo
Delta_Logo
Вертикальные линии: мужественность, сила, агрессия.

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

sc_square_480

Горизонтальные линии: сообщество, спокойствие, уверенность.

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

220px-Hrc_logo.svg
7) Теория двойного кодирования
Вы, конечно же, в курсе статистики, утверждающей, что наш мозг обрабатывает визуальную информацию в 60 000 раз быстрее текстовой. Теория двойного кодирования состоит в том, что и визуальные и вербальные сигналы передают информацию, но их сочетание помогает мозгу лучше ее запомнить.

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

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

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

Primary_Secondary_Teriary_Colors

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

Если затраты перевешивают выгоды, мы вряд ли совершим предполагаемое действие.

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

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

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

Как скорость загрузки сайта влияет на конверсию и продажи

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

Это довольно просто: чем выше скорость сайта, тем довольнее ваши посетители.

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

Чтобы увидеть реальную силу времени загрузки сайта, мы собрали в инфографике 12 кейс-стадий реальных компаний, иллюстрирующих эффект от сокращения времени загрузки сайта.!page-load-time

15 отличных концепций редизайна сайтов

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

Мы покопались в Dribbble (социальная сеть для дизайнеров) и собрали несколько вдохновляющих примеров отличных концепций редизайна сайта.

Mikolas-Vans-concept
Редизайн сайта Vans от Mykolas Puodžiūnas

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

ebay_with_bg_shot800
Редизайн Ebay.com от Tintins

samer-evernote-market-concept

Редизайн Evernote Market от Samer

thumb-thule

Редизайн Thule.com от Mykolas Puodžiūnas

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

Charles-Patterson-Skype-concept

Редизайн Skype от Charles Patterson

«Всегда легко работать над чем-то ради развлечения. В итоге получилось очень свежо и классно».

pandora-concept-bryce-thomas

Концепция Pandora(медиа плеер) от Bryce Thompson

«Такой дизайн страницы выгодно выделяется среди других на рынке медиа плееров.»

specialized-bikes-landing-page-concept-shot

Посадочная страница профессиональных велосипедов, концепция Petras Nargėla

soundcloud-lp-concept

Редизайн лэндинга SoundCloud от Raaz Das
«Я попытался сделать сайт чистым и понятным для всех пользователей.»

dribbble-nytimes-redesign

Редизайн-концепция NYTimes.com от Jon Pritzl.

Трудно поверить, но авторитетное интернет-издание настолько консервативно, что до сих пор не обзавелось адаптивной версией.
«Воссоздать заново главную страницу New York Times уже считается самой древней задачей в сообществе дизайнеров. Я хотел использовать узнаваемый стиль и брендовый капитал интернет-издания, и в то же время создать современный и удобный новостной портал».

rolling-stone-website-redesign

Редизайн Rolling Stone от Jason Kirtley
«Вариант редизайна объёмной статьи о музыканте.»

imdb-dribbbble

Редизайн IMDb (Интернет-база кинофильмов) от George Vasyagin

«Считаю, что IMDb должен быть упрощен и каждый блок должна служить своей отдельной цели.»

redesign_copie

Редизайн Gmail от Valentin Salmon
«Я использовал узнаваемый стиль Gmail.com, и привнёс кое-что новое.»

hm-dribbble

Редизайн главной H&M от Andrew Baygulov

facebook

Редизайн Facebook от Eyal Zuri
«Редизайн социальной сети сделал ради развлечения.»

5 простых способов оптимизировать сайт для успешной генерации лидов

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

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

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

Быстрый обзор:

!lead_generation_visualization

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

Рассмотрим в деталях 5способов оптимихации сайта для успешной лидогенерации.

1. Выяснить текущее состояние лидогенерации

Это необходимо для отслеживания дальнейшего успеха и выявления слабых мест для улучшения.

Лучший способ протестировать текущее состояние — воспользоваться таким инструментом, как Marketing Grader, который оценивает ресурсы лидогенерации (посадочные страницы и призывы к действию) и даёт обратную связь о способах улучшения существующего контента.

!LP

Также можно сравнить успешные и не очень успешные лэндинги. Например, лэндинг А посетили 1000 уникальных пользователей из них 10 заполнили форму и конвертировались в лиды. Для лэндинга А конверсия составляет 1%. У лэндинга B тоже 1000 посетителей, из которых 50 сконвертировались в лиды, что означает 5%-ную конверсию — отличный показатель. Следующий шаг — посмотреть чем отличаются лэндинги А и Б, и соответствующим образом оптимизировать лэндинг А.

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

2. Оптимизация каждого шага процесса лидогенерации

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

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

Вопрос — Как? Многие фирмы борются  увеличение конверсии до нужного процента. И проводят A/B-split тестирование двух версий посадочной страницы, чтобы выяснить, что работает лучше на каждой странице.  В результате применяются такие меры, как добавление формы на главную, изменение формулировки вопросов в форме. Результат? Может достигать увеличения конверсии на 27%.

!AB

Если собираетесь провести A/B-тест на странице, проверьте три ключевых фактора, влияющих на процесс лидогенерации:

А) Призыв к действию

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

Б) Посадочные страницы

Согласно исследованию, HubSpot, компании с 30+ посадочными страницами на своем сайте генерируют в 7 раз больше лидов, чем компании с числом посадочных страниц от 1 до 5.

В) Страница благодарности

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

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

Бонус: Отправка подтверждающего e-mail’a

Как только посетитель сконвертировался в лид и информация о нём попала в вашу базу, можно отправить письмо-благодарность или письмо-приветствие.

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

3. Персонализируйте призывы к действию

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

Более того, персонализированные призывы к действию конвертируют в лиды на 42% больше посетителей. Другими словами, динамический контент и персонализация помогает генерировать больше лидов.

Как это работает? Вот как страница  Hubspot выглядит для нового посетителя:

Screen_Shot_2015-05-06_at_10.05.05_AM

И вот как выглядит для клиента:

Screen_Shot_2

4. Тестируйте, тестируйте, тестируйте

Эту часть часть процесса невозможно переоценить. A/B тестинг делает чудеса с количеством кликов.

Например, когда маркетинговое агентство Friendbuy провело простой A/B тест призывов к действию, они обнаружили 211% рост количества кликов по таким кнопкам. Такая простая вещь, как тестирование формулировок призывов к действию, структуры посадочной страницы и используемых изображений может иметь огромное влияние.

 

5. Заботьтесь о своих лидах

Помните: ни один лид не превратится волшебным образом в вашего клиента. Лиды настолько хороши насколько хороши ваши усилия по их доведению до статуса клиента.

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

Пример фоллоу-ап письма:

Screen_3
Тикие e-mail’ы предлагают получателю лучший контент, ведут их по воронке продаж и приволят к выполнению финального целевого действия, нужного вам. Компании, которые тратят время и усилия на фоллоу-ап письма и сопровождение лидов получают 50% рост продаж по сравнению с компаниями, которые этого не делают.

16 трендов в E-mail дизайне в 2017 [Инфографика]

Перемены — единственное, что постоянно. E-mail маркетинг — не исключение.

За годы в e-mail маркетинге произошел ряд изменений и улучшений, что позволило дизайнерам превращать выпуски e-mail рассылок в настоящие маркетинговые шедевры.

Сегодняшняя инфографика поможет спланировать стратегию e-mail маркетинга на остаток 2017 года.

!!Email-Design-Trends-2017-V3

8 инструментов для SEO-аудита вашего сайта

Ничто так не обескураживает маркетологов как внезапные обновления алгоритма Google.

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

Тем не менее, есть ряд инструментов — платные и бесплатные, которые помогают посмотреть на ваш сайт так, как это делает Google.

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

Сегодня рассмотрим 8 инструментов, которые помогают вести SEO-аналитику как маркетолог … и как Google-bot.

1. Google вебмастер

Стоимость: бесплатно.

Лучший способ понять как Google воспринимает ваш сайт — спросить у самого Google.

Google Вебмастер — это ресурс, понятный для новичков, разъясняющий основы поисковой системы Google.

Например, инструмент Fetch as Google позволяет просмотреть каждый URL, что особенно важно при устранении неполадок при низкой SEO-производительности. Полученная информация позволит  исправить ошибки на странице и удалить вредоносный код, в случае если ваш сайт взломали.

Fetch_as_Google

Ещё одна классная функция в  Google Вебмастере — Page Speed Insights — измеряет скорость загрузки как мобильной, так  и десктопной версии сайта. Так как запросы с мобильных устройств уже превосходят с десктопные, скорость загрузки сайта является одним из важных показателей для удержания посетителей.

2. Check my Links

Стоимость: бесплатно.

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

Этот инструмент по проверке неработающих ссылок облегчает редактору сайта внесение исправлений еще до того, как страница станет доступна для всеобщего просмотра. Возьмём, например, сайт Wikipedia. Страница термина «Маркетинг» содержит 711 ссылок. Check my Links не только в считанные секунды проверил все ссылки, но также и нашел 7 неработающих ссылок.

Broken_Link_Checker

Сервис выделяют работающие ссылки — зеленым цветом, неработающие или неактивные — красным.

3. MozProTools

Стоимость: бесплатный 30-дневный период и последующие платные тарифы – от 99 до 599$.

Подписка на этот сервис обеспечивает вас инструментом «всё-в одном» для улучшения ваших позиций в поисковых системах.

!woorank

Собственный встроенный бот анализирует более чем 3000 ссылок введенного URL’a. По завершении пользователь получает e-mail отчёт с подробной информацией о каждой ссылке сайта.

Это очень удобный сервис для поиска дубликатов контента и редиректов, которые влияют на SEO-производительность.

4. SEO report Card

Стоимость: бесплатно.

SEO report Card помогает определить на каком вы месте среди конкурентов.

UpCity

В обмен на пару контактных данных SEO Report Card предоставит отчет со следующей информацией:

  • Анализ ранжирования – скриншот, показывающий на каком месте ваш сайт в поисковиках: Google, Yahoo, and Bing! Ваше ранжирование зависит от выбранного ключевого слова перед формированием отчета.
  • Наращивание массы ссылок – подробный отчёт о количестве сайтов, которые ссылаются на ваш сайт.
  • Аналитика сайта — анализ, насколько успешно вы использовали главные ключевые слова на своем сайте.
  • Доступность сайта — отчет о времени загрузки и уровне доступности для сканеров.
  • Метрика доверия — обзор уровня доверия и репутации вашего сайта.
  • Текущая индексация — указывает, сколько страниц вашего сайта было проиндексировано.

5. HubSpot’s Website Grader

Стоимость: бесплатно.

Website_Grader_HubSpot
Онлайн-инструмент генерирует персонализированные отчеты, основанные на следующих ключевых метриках:

  • Производительность анализ веса, количества запросов, скорости загрузки.
  • Адаптив — проверка на наличие мобильной версии сайтов.
  • SEO — анализ видимости вашего сайта как для людей, так и роботов, проверка мета-тегов и тегов <title>.
  • Безопасность — проверка на наличие SSL-сертификатов.

Всё, что нужно – это ссылка на ваш сайт и действующий e-mail. После ввода этой этих данных вы за считанные секунды получите подробный отчёт.

6. Woorank

Стоимость: бесплатный 14-дневный пробный период. После – 49 дол. в месяц, 149 дол/месяц премиум-тариф.

Этот инструмент отличается глубиной аналитики и раскрывает возможности для улучшения и оптимизации.

Каждый отчет разделен на разделы:
Маркетинг-чеклист

  • SEO
  • Адаптивность под мобильные устройства
  • Юзабилити
  • Технологии
  • Социальные сети
  • Посетители

При охвате более 70 показателей этому инструменту трудно не выявить возможности для улучшения.

Как дополнительный бонус – возможность загружать отчеты в pdf-формате.

7. Screaming Frog SEO Spider

Стоимость: бесплатная лайт-версия с некоторыми ограничениями и платный тариф на год за 160$.

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

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

Видео-инструкция:

!SF

Программа интуитивно понятна и имеет удобную навигацию. Всю полученную информацию можно экспортировать в файл Excel для дальнейшей аналитики.

*Ограничения бесплатной версии — по каждому сайту могут быть просканированы только 500 сcылок. Для снятия ограничения оплачивается платный тариф в 160$.

8. Found’s SEO Audit Tool

Стоимость: бесплатно.

Это простой инструмент для маркетологов, находящий самые частые SEO-ошибки на сайте. Просто введите ссылку на сайт и вы получите подробный SEO-аудит.

Программа разделена на три части:

  • Техническую — анализ доменного имени и карты сайта.
  • Контентную — анализирует ключевые слова и мета данные.
  • Аналитику внешних ссылок — оценивает количество и качество внешних ссылок.

Результаты аналитики можно загрузить в pdf-формате и поделиться с заинтересованными лицами.

 

Дизайнер и разработчик: дружба навек. Что для этого нужно?

В какой-то момент все дизайнеры обнаруживают себя в следующей ситуации:

Вы завершили дизайн-проект и получили одобрение от заказчика передали дизайн разработчику.

Но затем вы получаете предварительный вариант. И… то, что получилось имеет мало общего с созданным дизайном.

В чём причина?

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

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

Бывалые дизайнеры из сообщества InVision провели тысячи часов с разработчиками, выясняя как построить безупречный рабочий процесс. Вывод: обе стороны должны приложить к этому руку.

!!dev-002

4 совета, чтобы построить идеальные отношения дизайнерам и разработчикам:

Ознакомьтесь с ограничениями со стороны сервера

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

Краткий разговор с разработчиком в самом начале проекта может прояснить весь процесс. Результат — лучший дизайн, и время не будет потрачено зря на создание чего-то нереализуемого.

!dev-003

Узнайте о возможностях и ограничениях со стороны клиента

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

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

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

  • Нужна клавиатура для раскрытия и заполнения форм;
  • Регулировка размера кнопок в зависимости от размера пальца пользователя
  • Проблемы соединения. Дизайн должен отлично выглядеть, даже если загружается по блокам.
  • Мобильный дизайн должен быть простым. Главным образом, потому что графическая карта мобильных устройств имеет ограничения по сравнению с десктопами.
  • Обеспечение возможности открытия контекстного меню, если это необходимо.
  • Мгновенное предоставление информации. Мобильные пользователи, как правило, делают несколько дел одновременно.

Эти ограничения разрешимы, если информация предоставляется просто, быстро и ясно, а интерфейс мобильного сайта предельно понятен.

!dev-001

Создавайте демо-макет и пользовательскую документацию

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

Структурируйте файлы и папки

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

Пример, хорошо названных файлов:

  • ClientName_PageName_WidthXHeight_platform.psd
  • MyClient_AboutUs_1334x750_IOS.psd

В главной папке всегда храните последнюю версию файла. И всегда объединяйте файлы по платформам. Это сведет вероятность работы над неверным вариантом дизайна к нулю.

Эти 4 совета сделают жизнь дизайнера и разработчика намного проще, а рабочую атмосферу — воплощённой мечтой.

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

Фоновое видео: за и против

Использование фонового видео – дизайнерский тренд, вот уже несколько лет являющийся предметом горячих споров.

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

С другой стороны, во имя эстетики страдает юзабилити. И сразу вспоминаются времена, когда страницы были нашпигованы гифками и флэш-анимациями.

Но уместно и со вкусом используемое фоновое видео – это только плюс для пользовательского опыта.

Достоинства фонового видео

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

Fonovoe_video

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

Создание представления о сложном товаре, услуге

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

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

Улучшает SEO

Если ваш видеоролик уже размещён на нескольких платформах, это увеличивает SEO-ценность вашего сайта. Чем больше просмотров получает ваше видео, тем лучше его позиции в поисковиках.

!videoSeo

Добавление описания  с правильно подобранными ключевыми словами способствует лучшему ранжированию в поисковиках и восприятию видео.

Недостатки фонового видео

Низкая скорость загрузки

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

speedSite

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

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

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

Слишком много элементов на странице

Больше — не всегда лучше. Слишком много элементов отвлекает. Вместо вызова определенных эмоций.

Фоновое видео, сделанное на «пять+»

Фоновое видео — не для всех. Слепое следование трендам только потому, что так «круче выглядит» может оказать медвежью услугу вашим клиентам.
Но если вы взвесили все за и против и до сих пор уверены, что оно для вас, то пройдитесь по следующему чек-листу:

Совместимо с брендом

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

Круто сделано

!video

Создание видео — довольно затратное мероприятие. Ресурсы будут потрачены зря, если результат будет ниже плинтуса. На что стоит обратить внимание:

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

Сжатие. Буферизация создает впечатление, что сайт медленно грузится. Вполне достаточно 720р видеофайла с битрейтом 750-1250 кбит/сек.

Наложение слояпозволит скрыть недостатки слишком сжатого видео с помощью правильно подобранного оттенка.

Проигрывается только фоном

!NYC

Фоновое видео — только на фоне. Оно не является центром внимания на сайте. Поменьше отвлекайте пользователей:

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

— контрастный цвет текста. Текст поверх видео должен быть разборчивым —  с тенью и правильного контрастного цвета.

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

Короткое с ограниченным автоповтором

Помните, что это не полнометражное кино. Длинное видео — медленная скорость загрузки — то, что так не любят пользователи.

Ограничьте время ролика 10-15 секундами. Максимум – 30-40 секундами. Идеальный вес файла – 6 MB.

Повторы не должны быть бесконечными. Это только съедает ресурс пользовательского процессора, снижает скорость загрузки сайта. Для длинного видео установите однократный повтор. Для короткого — JavaScript кодом установите определенное количество повторов.

Не забывайте про пользователей мобильных устройств

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

Вывод: Фоновое видео подходит далеко не для всех сайтов. Чтобы гарантировать, что видео займёт свое место на сайте, необходимо проводить сплит-тестирование прежде, чем реализовать его на всём сайте.  Создавайте альтернативные страницы, рекламируйте  их и смотрите на реакцию пользователей.

Идеальная длина (в символах) всего в онлайне [Инфографика]

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

Сегодня в инфографике — вывод таких исследований, выявивших оптимальную длину практичсекие любого online-сообщения:

Инфографика4