Архив за месяц: Февраль 2017

Как создавать более полезный, интересный, вовлекающий контент

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

Другими словами, это коммуникация.

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

Хороший дизайн превращает просто хорошую статью
в ценный информационный ресурс.

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

Но это не тот случай. Контент, который невозможно применить, — бесполезен.

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

F-template

Вывод: то, как представлена информация так же важно, как и сама информация.

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

Дизайн и вёрстка

Самое важное при создании контента — сделать его читабельным.

Это включает стилизацию страницы, текста, отступы, и саму вёрстку.

Создавайте удобную для чтения длину строки

Длина строки зависит от двух составляющих:

  • Размер шрифта.
  • Ширина колонки.

Большинство экспертов советуют: количество символов в строке десктопного текста должно быть не меньше 45 и не больше 75, для мобильных устройств – не больше 50 и не меньше 35.

reading-line-comparison

 

Более длинный текст вызывает у пользователя усталость и нетерпение. Короткий — обрывист и трудночитаем.

Так как сейчас у многих пользователей мониторы и гаджеты с высоким разрешением, на многих сайтах используется увеличенный шрифт (20-22px) и широкая колонка текста (800-1000 px). Но любое сочетание читаемого шрифта и удобной длины строки является приемлемым.

Установите подходящие отступы и высоту строки

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

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

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

line-height-vs-paragraph-spacing
Удалите отвлекающие элементы

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

Этому есть эстетические причины – страница выглядит чище и проще. Отсутствие отвлекающих элементов положительно влияет на вовлечённость и конверсию.

videofruit-no-sidebar

Videofruit упростил дизайн главной до одной колонки и обнаружил рост конверсии на 26%.

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

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

Чем меньше отвлекающих факторов, тем больше
вовлечённость и ценность контента для пользователя.

Написание и структура информации

Очертания строк и параграфов также влияет на степень вовлечённости пользователя.

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

Пишите с намерением

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

Вариация в длине и плотности строк дают нашим глазам возможность «зацепиться» за информацию. Это означает, что форма написанного текста  очень много значит.

Другими словами, это «крючок».

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

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

Чередуйте короткие, простые предложения и
более сложные разъясняющие абзацы,

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

Используйте подзаголовки

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

use-subheaders

Разбивайте текст

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

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

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

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

  1. Списки
  2. Фотографии
  3. Диаграммы, графики, другой визуал
  4. Цитаты
  5. Призывы к действию

Хороший пример равномерного разбиения текста — посты в Buffer Blog. Читатель легко понимает структуру статьи без необходимости вчитываться в каждое слово.

buffer-page-markup

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

Исследование Buzzsumo показало, что статьи, в которых каждые 75-100 символов текста разбавлены изображениями, получают больше репостов.

words-to-image-ratio-small

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

Как общее правило: каждые 200-400 символов должны быть разбавлены изображениями.

«Вёрстка и дизайн могут компенсировать недостатки контента»

Создание ценности с помощью дизайна

До сих пор мы говорили о самых основах, делающих любой контент более привлекательным.

Но дизайн может сделать намного больше.

«Хороший дизайн превращает контент в ценный информационный ресурс»

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

Контент с хорошим дизайном становится чем-то намного большим, чем просто «пост в блоге», а чем-то важным и особенным.

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

magazine-spread

 

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

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

Обеспечьте структуру навигации

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

Особенно если ваш ресурс охватывает широкий круг тем. Дизайн обогащает такие ресурсы, делает их более функциональными.

helpscout-design-experience

Пример Helpscout — огромная коллекция цитат аккуратно каталогизирована и разбита на понятные категории.

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

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

vero-example

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

Помогите пользователю лучше ориентироваться

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

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

moz-seo-guide

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

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

«Создание чего-то замечательного начинается  с замечательного контента»

Вывод: Хороший дизайн превращает просто хорошую статью в авторитетный ресурс информации – во что-то выдающееся и долгоиграющее. 

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

Что потребители по-настоящему хотят от видео-контента [Инфографика]

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

Хорошая новость: пользователи всегда хотят видеть больше видео, так как это был и остается самым цепляющим форматом контента.Процент открытия и кликабельность e-mail писем значительно выше, если в теме письма есть слово «видео», и в 4 раза больше людей предпочитают просмотр видео, чем чтение текста.

И даже если вы осведомлены об этой потребности пользователей, вы вероятно можете не знать, что именно они хотят. Сегодня в инфографике — выводы из исследования-опроса более 1000 респондентов. Они будут полезны маркетологам, которые хотят создавать видео, набирающее много кликов, просмотров и репостов.

!decoding-video

 

Взрыв из прошлого. 7 веб-сайтов, которые задумывались совсем для другого

Однажды, в далеком 2005 году, существовал сайт Youtube. Сегодня для всех – это самый известный в мире видеохостинг,  кроме того, находящийся в собственности у Google.  Но более 10 лет назад Youtube задумывался совсем для другого — тогда это был сайт знакомств.

Да, именно так всё и начиналось. Этот факт часто обсуждается основателями сайта, но не обычными пользователями. И с конца 90-х сколько ещё сайтов превратились в одно, хотя задумывались совсем для другого?

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

1. Amazon

Год основания: 1994.
Первоначальная задумка: Cамый большой книжный магазин на планете.

Тогда:

Амазон

Ходят слухи, что основатель Джеф Безос выбрал книги из списка 20 товаров, которые вероятнее всего принесли бы хорошие онлайн-продажи, так как при своей низкой стоимости всегда пользуются спросом. И Амазон до сих пор продаёт книги и много чего еще. Спустя 2 десятилетия после запуска сайта масштаб роста более чем впечатляет.


Сегодняшняя бизнес-модель:

  • «Амазон руководствуется 4-мя принципами: одержимость клиентами, а не конкурентами, страсть к изобретению, стремление к операционному совершенству, долгосрочное видение (мышление на долгосрочную перспективу)»
  • Амазон продает намного больше чем просто книги. Сейчас это электронная коммерция широкой направленности.
  • В дополнение к онлайн-торговле, Амазон производит и предлагает:
    • Амазон Эхо
    • E-ридер «Kindle»
    • Скачивание музыки
    • Доставка еды
    • Своё развлекательное вещание

Стоимость активов: $67.7 миллиардов.
Число сотрудников:230,800 человек.

2) Netflix

Год основания: 1997.
Первоначальная задумка: «Онлайн-прокат видео».

Раньше:

Netliix
Когда Reed Hastings and Marc Randolph основали Netlfix, у них было ясное намерение — изобрести для людей простой способ проката и возврата видео без необходимости ездить в ныне вымершие пункты видео-проката. Сегодня все выглядит несколько иначе.
Netliix2

Существующая бизнес-модель:

  • “Лидирующая в мире онлайн теле-сеть”
  • Он-лайн вещание собственных программ по технологии потокового видео;
  • Персонализированный контент, предоставляемый на основе пользовательского поведения и истории просмотра.
  • Прокат DVD и Blu-Ray дисков все еще доступен, но только через DVD.com — собственность

Стоимость активов: $11.26 миллиардов
Число сотрудников: 3,700 человек.

3) Facebook

Год основания: 2004 (как Thefacebook).
Первоначальная задумка: Социальная сеть с онлайн-каталогом имён, фотографий студентов университетов и колледжей.

Тогда: 

Facebook

С тех пор было много отсылок популярной культуры к этой соц. сети. Но первоначально намерения создателя Facebook Марка Цукерберга были предельно ясны – создать для студентов Гарварда онлайн-площадку для общения. В последствии, сеть охватила все университеты Америки, а в 2006 году – весь мир.

Сейчас:

Facebook-2
Сегодняшняя бизнес-модель:

  • «Дать людям возможность общаться и сделать мир более открытым и единым».
  • Любой человек может создать аккаунт, даже несовершеннолетние (с поправками).
  • Основной источник новостей для 44% населения Земли.
  • Число активных пользователей: 1,18 миллиардов.

Стоимость активов: $49.41 миллиардов.

4) YouTube

Год основания: 2005.
Первоначальная задумка: Первое онлайн-сообщество. Позволяющее пользователям размещать и делиться личными видеозаписями.

Тогда:

YouTube

Как мы уже говорили, в начале Youtube совсем недолго выполнял функции сайта знакомств, что часто упоминается в прессе его основателями. Как однажды сказал журналу Time исполнительный директор Chad Hurley, предполагалось что это будет сайт типа HOTorNOT.com, с рейтинговой системой оценок привлекательности пользователей от 0 до 10. К счастью огромного количества пользователей дела изменились.

Сейчас:

YouTube-2
Существующая бизнес-модель:

  • Позволяют миллиардам пользователей находить, смотреть и делиться уникальными видеозаписями.
  • YouTube Red с платным членством и просмотром видео и музыки без рекламы.
  • Приобретен корпорацией Google в 2006 году и с тех пор функционирует как Google-компания.

5) Inbound.org

Год основания: 2012
Первоначальная задумка: “Распространить огромное количество ценного контента о маркетинге.”

Тогда:

Inbound
Как гласит история: основатели Rand Fishkind и Dharmesh Shah начали проект «развлечения ради» и чтобы создать платформу для авторов контента, следующим инновационным веяниям в маркетинге. Здесь были форумы, Q&A, списки вакансий. Несмотря на то. что основной принцип ресурса остался прежним, но на сайте появилось много чего нового посмотреть и сделать.

Сейчас:

Inbound2
Существующая бизнес-модель:

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

Число членов: 204 929.

6) BuzzFeed

Год основания: 2006 г.
Первоначальная задумка: Отделить реально интересный контент от искусственно раскрученного.

Раньше:

Buzzfeed

 

 

Кажется, что BuzzFeed сам заработал себе имя среди обилия «контента» вроде опросников «Кем вы были в прошлой жизни?» и «Какое вы животное?» Вместо этого BuzzFeed работают на принципе предоставления только того контента, который интересен и на который стоит потратить время.

Сегодня:

Buzzfeed2
Существующая бизнес-модель:

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

Размер активов: $55.93 миллионов (по состоянию на 2015 год)
Количество сотрудников: 1300.

7) Airbnb

Год основания: 2008.
Первоначальная задумка: «Онлайн платформа для бронирования жилья по всему миру».

Раньше:

ABNB

Изначально известный как «AirBed&Breakfast» («Воздух-Кровать-Завтрак») начинали с с одной целью — помочь людям заработать денег. Весь фокус был в том, чтобы  помочь собственникам жилья получить дополнительный доход за счет ренты. И конечно же, арендаторы тоже выигрывают, так как находят доступное жильё. Но с даты своего основания Airbnb перенёс главное преобразование — стал более безопасным, более дорогим и предлагает больше, чем просто жильё.

Сейчас:
ABNB
Сегодняшняя бизнес-модель:

  • Надёжное онлайн-сообщество для поиска и бронирования жилья по всему миру.
  • Внедрен ряд мер для гарантии безопасности как съёмщиков, так и владельцев жилья.
  • Предлагается не только доступное жильё, но и по 4 000 $ за ночь.
  • Кроме жилья, «AirBed&Breakfast» предлагает разные услуги для путешественников:
    • Еду
    • Развлечения
    • Культурную программу
    • Выезды на природу
    • Посещение спортивных мероприятий

Стоимость активов: $67.7 миллиардов.
Число сотрудников:230,800 человек.
Вывод: Всё меняется. Бизнесы, бренды, предприниматели, сайты. Возможно, ваша оригинальная идея не получит развития в том направлении, в котором вы планировали. Возможно, вы знаете, как её масштабировать.

Приведенные примеры известных сайтов показывают, что очень полезно задаваться вопросами: «Что дальше?», «Что нужно поменять?» Конечно, эволюционные изменения требуют времени, а у упомянутых выше брендов прошло в среднем 12 лет между их «Тогда» и «Сейчас». Будьте терпеливы, будьте креативны, и тогда не будет пределов для развития и реновации вашего бизнеса и его онлайн-присутствия.

3 вечные ошибки в веб-дизайне

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

The Nielsen Norman Group — одно из самых авторитетных агентств в мире, консультирующее по вопросам UX-дизайна. Они в бизнесе уже несколько десятилетий, и одно за другим проводят исследования по дизайну, юзабилити, и UX. Одно из их первых исследований датируется 1996 годом (эпоха сериалов «Друзья» и «Секретные материалы») определило 10 ошибок веб-дизайна, вызывавших много проблем уже в ранние годы развития веба.

1_

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

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

  • Пользователь должен легко находить информацию;
  • Пользователь должен легко воспринимать информацию;
  • Пользователь должен легко ориентироваться в навигации по сайту.

Отсутствие ясности

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

Исследования выявили, что эти ошибки как правило вызывают отсутствие ясности:

  • Размещение контента в неожиданных местах;
  • Конкурирующие ссылки и категории
  • Скрытие информации о цене и дополнительных платежах.

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

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

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

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

overstock

 

UX-проблемы

UХ-дизайн определяет, насколько просто или сложно посетителю сайта удаётся достичь свои цели.

Исследование The Nielsen Norman Group выявило самые живучие ошибки в UX-дизайне:
• Островки информации
• Дубли ссылок
• Перенаправление пользователей на микросайты (целевые страницы)
• Неадекватные результаты поиска
• Ошибки фильтра

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

how-difficult-to-design-user-experience

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

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

Неразбериха в информационной архитектуре

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

Исследование опять же обнаружило, что дизайнеры очень упорны в совершении одних тех же ошибок, что и 20 лет назад:

  • Перегруз пользователя избыточной информацией
  • Скрытые ссылки

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

Wayfair.com – это пример того, как должна быть представлена информация на сайте. Контент легко читаем и очень эффективно сгруппирован.

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

Когда же эти ошибки останутся в прошлом?

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

Состояние видео-маркетинга в 2017 году [Последние данные]

Впечатление, что эксперты провозглашают каждый год «годом видео-маркетинга». Но для 2017 года это верно как никогда. Не секрет, что видео-контент стал невероятно популярным. И, подобно другим маркетинговым трендам, чем больше контента просмотрели пользователи, тем больше потратили маркетологи.

!!Camera

Самое последнее исследование утверждает, что видео — самый эффективный, распространенный вид контента, популярный среди пользователей как никогда раньше. База респондентов включала 311 человек — профессиональных маркетологов и онлайн-покупателей.

1. Видео помогает достичь ключевые цели в бизнесе

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

Но что действительно выделилось, так это отзывы о том, как видео-контент помог достичь ключевые бизнес-цели:

  • 97% анонимных респондентов ответили, что видео улучшило их представлени о продукте/услуге;
  • 81% респондентов назвали его главной причиной увеличения продаж;
  • 76% связали использование видео-контента с увеличением траффика на сайт;
  • Более половины респондентов (53%) заявили, что видео помогло снизить количество звонков в службу поддержки.

!business analyse

83%   респондентов ощутили, что в общем видео-контент дал хорошие показатели ROI, что выгодно отличается от количества респондентов, давших такой же ответ в прошлом году – 76%.

Похоже, что видео будет таким же широко распространенным. Неудивительно, что 99% фирм, использующих видео-контент, сообщают, что собираются продолжать и в 2017 году. И более того, 34% тех, кто еще не инвестирует в видео-контент, планируют это в наступающем году.

2. Видео очень популярно у потребителей

79% потребителей говорят (против 69% в прошлом году), что они скорее посмотрят видео о продукте, чем прочтут текст.

Кроме того, видео является самым надёжным способом для потребителей узнать о новом продукте. 91% потребителей просмотрели explainer video — короткие видеоролики-презентации продукта или услуги. Внушительная цифра — 84% респондентов заявили, что решили сделать заказ после просмотра видео о продукте.

3. Новые возможности для создания видео-контента

Такие технологии, как Facebook Live (используется 19% маркетологами), Snapchat (8%), Instagram video (26%), 360-градусное видео (12%) и виртуальная реальность (7%) – сейчас доступны всем маркетологам и менеджерам по маркетингу.

!!camera2

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

4. Закадровые треки набирают популярность

Закадровый голос присутствует практически во всех брендовых видео — но мы наблюдаем постепенно уход от ранее распространённых «голосов радиодиктора».

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

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

13 трендов в веб-дизайне, ожидаемых в 2017 году

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

Список из 13 дизайн-трендов, за которыми стоит следить в этом году, чтобы создавать стильные современные сайты:

1. Крупные шрифты
Всё больше компаний склонны использовать крупные шрифты с жирным начертанием. Этот приём отлично работает, если на остальном пространстве страницы применяется сдержанный минималистичный стиль. Пример — страница французского  агентства Big Youth.

big-youth

2. Синемаграф
Это проигрываемые на автоповторе короткие HD-видеоролики или файлы в Gif-формате. Размещенные на бэкграудне, они делают статичные страницы визуально более интересными и динамичными. Великолепный пример широкоэкранного синемаграфа — главная страница датского агентства CP+B Copenhagen. Такой приём несомненно удерживают внимание посетителя сайта больше, чем обычно.

3. Эксперименты с композицией
Чтобы выделиться из множества аккуратных разлинееных макетов сайтов, некоторые дизайнеры выбирают более смелые эклектичные структуры. Арт-директор Will Geddes показывает примеры своих работ в неожиданном коллаже из перекрывающих друг друга изображений:

WillGeddes

4. Яркие градиенты
Ожидается громкое возвращение калейдоскопичных градиентов. Сайт агентства из Цюриха Y7K — прекрасная иллюстрация, как сделать двухцветный эффект свежим и современным в случае заполнения градиентом главной страницы сайта.

gradient-agency

5. Яркие, насыщенные цветовые схемы
Многослойность из ярких цветов добавляет глубину и текстуру сайту, созданному на простом макете. Как в примере стильного бразильского сайта:

vivid-layers
6. Чёткие, прямые высказывания
На многих сайтах сделали выбор в пользу отказа от навигации и изображений, полагаясь только на несколько строк текста, информирующих о сфере компетенции компании.

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

text-layout

7. Иллюстрации
Всё больше компаний обращаются к иллюстраторам и графическим художникам за созданием эксклюзивных иллюстраций для своих сайтов. После стольких лет господства флэт-дизайна и минимализма, иллюстрации – это идеальный приём для придания сайту неповотримости и оригинального духа. Очаровательный пример — сайт NewActon (дизайн австралийского агентства ED).

illustration-layout

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

Minimalism
9. Дуплекс (дуотон)
Цветовые схемы из двух оттенков выглядят круто и современно. Как в этом примере Australian Design Radio.

duotone-layout

10. Сочетание вертикального и горизонтального текста
Освобождение от необходимости отображать текст только по горизонтали и расположение его вертикально вносит свежее новое измерение. Сочетание горизонтально и вертикально ориентированного текста используется на странице режиссера Мэтта Поттерфильда, которая иначе смотрелась бы слишком просто.

vertical-text

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

geometic-patterns
12. Модульный дизайн
Модульный дизайн определённо будет набирать обороты в 2017 году. Это верный способ создать аккуратный, доступный веб-сайт, удерживающий внимание и заинтересовывающий пользователя. Пример от дизайн-студии Waark демонстрирует нестандартный приём в модульном дизайне: наведение мыши на разделительные линии между модулями вызывает интересный волновой эффект.

Modular Design

13. Наложение текста на изображения
Текст, слегка перекрывающий изображения, стал популярным приёмом в блогах и портфолио. Художник-фрилансер и frontend-разработчик Thibault Pailloux выделили перекрывающий текст красочным подчеркиванием под каждым заголовком.

overlapping

60 терминов веб-дизайна, которые должен знать каждый маркетолог

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

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

Знакомая ситуация?

Все маркетологи прошли этот путь и знают, насколько необходимо владение словарём дизайн-терминов. Мы решили составить расширенный глоссарий этих терминов:

1. Выравнивание
Позиционирование элементов в дизайн-макете (текста, изображений и т.д.). Эти элементы могут быть выровнены относительно друг друга и относительно страницы. Этот текст выровнен по левому краю, а линии изображенные ниже — по правому.

alignment

2. Аналогичные цвета
Цвета, следующие друг за другом на цветовом круге.

analogous

3. Верхняя часть символа (Ascender)
выступает над верхней линией (высотой) строчного символа.

ascender-1

4. Базовая линия (baseline)
Невидимая линия, на которой расположены все символы в строке.

baseline

5. Высота заглавного символа
Расстояние между базовой линией и верхней точкой заглавного символа.

cap height

6. Цветовая модель CMYK (CMYK: Cyan, Magenta, Yellow, Key color)
Цветовая схема используется в полиграфии и охватывает меньше цветов, чем RGB-модель.

CMYK-1

7. Цветовой круг
Цветовой круг показывает взаимодействие между первичными, вторичными и третичными цветами, холодными и тёплыми.

BYR_color_wheel.svg

8. Цветовая схема
Сочетание двух и более цветов цветового круга, также называется гармонией цвета.

9. Дополнительные цвета
Цвета, расположенные друг напротив  друга на цветовом круге.

complementary
10. Сжатие
Уменьшение размера файла путём удаления лишних данных. Особенно полезно при пересылке или сохранении больших изображений.

11. Контраст
Подчёркивание различий между цветами, формами, пространством и другими элементами дизайна.
cotrast
12. Обрезка
Удаление частей изображения для перекомпозиции или для изменения линейных пропорций.


13. CSS (Каскадные таблицы стилей)
Фрагмент кода, отдельный от основного содержания и определяющий внешний вид и впечатление от веб-страницы.

14. Нижняя часть символа (Descender)
Часть буквенного символа, выходящего за границы базовой линии.

descender-1

 

15. Количество точек на дюйм (DPI)
Аналогично пикселю в вебе, точка — наименьшая единица измерения при печати цифровых изображений. Количество точек на дюйм (DPI) относится к разрешению печатного цифрового объекта – чем больше DPI, тем больше разрешение.

16. Тень
Визуальный эффект, создающий впечатление тени за графическим объектом.

Blurshadow
17. EPS
Формат файлов, используемый для изображений векторной графики, содержащих как текст, так и изображения.

18. Растушевка
Дизайнерская техника сглаживания резких переходов

19. Шрифт
Начертание букв определенного стиля и размера. Например, шрифт Times New Roman полужирный 14px.

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

21. Градиент
Дизайнерская техника плавного перехода одного цвета или части изображения в другой цвет или часть изображения.

gradient

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

23. Шестнадцатеричные цвета (HEX-код)
Код, используемый в HTML и CSS для определения специфического цвета. В обозначении содержит символ хэштега (#). Таблица с шестнадцатеричными цветовыми кодами:

Xterm_color
24. НTML
Язык гипертекстовой разметки для отображения содержимого веб-страниц.

25. Оттенок
То, что большинство людей называют цветом — красный, оранжевый, жёлтый.

26. JPEG
Формат файла, использующий сжатие как с потерями (loss) так и без потерь (lossless), причем потеря качества незаметна глазу. Чаще всего используется для фотографий и реалистичных картин с плавными переходами яркости и цвета.

27. Кернинг
Расстояние между символами.

1280px-Kerning_EN
28. Интерлиньяж
Расстояние между строками текста.

29. Сжатие данные с потерями (Loss)
Вид сжатия данных с уменьшением размера сжимаемого файла. Характерный пример — — JPEG.

30. Сжатие без потерь (Lossless)
Вид сжатия изображения, при котором оригинальные данные полностью восстанавливаются.

31. Средняя линия
Расстояние от базовой линии строки до верхней точки большинства строчных букв.

midline-1
32. Негативное пространство.
Пространство вокруг элементов дизайна на веб-странице или отдельном изображении. Синоним пустого пространства.

negativespace
33. Шрифты в формате OTF
Современный стандарт формата шрифтов. В одном файле содержится как экранная версия шрифта так и версия для печати. Совместима с Mac и Windows. Расширение файла со шрифтами — .otf.

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

Orphan-typesetting
35. Pantone
Цветовая палитра, созданная компанией Pantone. В основном используется в полиграфическом дизайне и используется для сопоставления напечатанных цвета с экранными на стадии цифрового дизайна.

pantone

37. PDF
Файловый формат, используемый для представления документов и презентаций.

38. Пиксел
Наименьший элемент цифрового изображения.

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

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

41. Прямоугольная цветовая схема
4 цвета — 2 пары дополняющих цветов.

rectangular

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

43. Цветовая модель RGB
Используется в веб-дизайне, так компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре.

RGB

44. Насыщенность (Saturation)
Свойство, характеризующее силу, интенсивность ощущения цветового тона.

HSV_lowgamma

45. Засечки (Serif)
Штрихи на концах линий в начертании символов. “Sans serif“ — соответственно шрифты без засечек.

46. Квадратная цветовая схема
4 цвета, равноудаленные друг от друга на цветовом круге.

SQUARE-4
49. Стержень
Основной вертикальный штрих буквенного символа, как в букве В и диагональный штрих в букве V.

50. Штрихи
Линии, определяющее очертания символа в гарнитуре шрифта.

51. Яркость
Степень присутствия в цвете черного или белого.

52. Третичные цвета
Эта цветовая схема сочетает цвета, расположенные друг к другу под углом в 120 градусов. Эта цветовая схема считается наилучшим сочетанием цветов.

triadic
53. Гарнитура шрифта
Коллекция символов, включающая буквы, цифры, пунктуацию. Например, Times New Roman, Arial, Helvetika.

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

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

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

57. Жирность шрифта
Тип начертания символов, который может быть полужирным, жирным, нормальным.

58. Пустое пространство
Белое пространство вокруг объектов дизайна. Синоним негативного пространства.

books-education-school-literature-48126
59. Висячая строка
Текст в конце абзаца, переходящий на следующую страницу или колонку. Как правило, портят эстетическое впечатления и снижают удобочитаемость текста.

2000px-Widow-typesetting.svg

60. Высота строчного символа
Расстояние между базовой линией и верхней точкой строчного символа.

xheight

Что нужно измерять, чтобы увеличить прибыль в 2017 году

Ведение бизнеса требует максимум отдачи от его владельца. Предприниматели вкладывают всё что у них есть—креативность, страсть, усилия, сбережения — всё. И спустя 5 лет после старта бизнеса половина из них выходят из игры. Спустя 10 лет две трети из них называют это освобождением.

Но почему?

Для многих фирм в большинстве случаев причина — недостаток тщательного измерения бизнес-показателей.

!business analyse

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

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

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

1. Валовой доход на одного сотрудника

Определение числа сотрудников на полной рабочей неделе — удобный способ измерения трудозатрат. Для этого нужно приравнять каждого сотрудника с полной занятостью (40 часов в неделю) к 1 FTE (англ. версия: 1 сотрудник = 1 FTE, Full time employee). Человек на 20-часовой рабочей неделе = 0.5 FTE.

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

2. Больше/меньше

Показатель отражает, как часто вы вписываетесь в бюджет или нет.

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

Budget_planning!

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

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

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

Решение этой проблемы — коренные изменения самого процесса формирования бюджета. Как правило, проблема — в занижении статей затрат. Хороший совет — увеличивать на 50% оценку затрат по каждой работе. Изначальная оценка часто описывает идеальный мир, где всё идёт по плану. Как часто это происходит в реальности? Прибавление 50% к изначальной стоимости работы, как правило, делает её реальной.

3. Прибыльность одного клиента

Фирмы часто отслеживают только общий объём прибыли. Редко они бывают настолько конкретны, чтобы проанализировать, сколько денег приносит один клиент. Эти цифры скрывают неприятную правду.

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

Income!

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

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

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

4. Минимальный уровень вовлечённости клиентов

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

  • количество часов, за которое вы выставляете счета;
  • валовой доход на одного клиента.

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

!profit

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

Итак, как вы узнаете своего «идеального клиента»? Как правило, он должен быть настолько крупным, чтобы принести вам прибыль, и чтобы при этом была возможна его эффективная поддержка.

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

5. Табели учёта рабочего времени

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

С этим невозможно согласиться.

Табели учёта критичны при ведении бизнеса, владельцы которого стремятся увеличить прибыль. Они незаменимы. Каждый должен заполнять их. Даже вы. Ваши сотрудники — это ваша самая большая статья расходов, и ваш самый ценный актив. Если вы не отслеживаете этот актив, как вы можете быть уверены, что хорошо им управляете?

!working time

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

Измеряйте свой успех в 2017 году

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

Мы рады были обнаружить, что большую часть этих показателей мы уже измеряем и это приносит результаты 🙂

Тренды в UX-дизайне в 2017 году, vol.2

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

В прошлом году мы стали свидетелями серии инноваций, произошедших в мире UX. Самый крупный и заметный из них — дополненная реальность PokemonGo – мобильная игра-бестселлер в США, заработавшая 50 миллионов скачиваний через 13 часов после своего релиза.

Можно с уверенностью сказать, что в сфере UX-дизайна в ближайшие месяцы будет сделан ряд смелых шагов. 5 ожидаемых тенденций в UX-дизайне в 2017 год:

1. Дизайн, экономящий ваше время

2017-ux-5

Безупречный UX-дизайн интуитивно понятен и экономит время пользователя — в единицу времени пользователь выполняет только одно действие. Яркий пример — на Uber процесс совершения сделки в системе бронирования предельно ясен и понятен.

Безупречный UX-дизайн интуитивно понятен и экономит время пользователя

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

2. Умная персонализация

2017-ux-4
И компании, и пользователи – все любят персонализацию. Но в 2016 году персонализация информации принесла не слишком приятные сюрпризы. Многие люди были шокированы результатами Brexit’а и президентских выборов в США, так как их ближайшие окружение создало ощущение, что весь мир разделяет их мнение.

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

3. Метрика за пределами интерфейса

2017-ux-3

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

  1. Время, проведенное на сайте.
  2. Переходы по страницам.
  3. Где произошёл уход со страницы до совершения пользователем целевого действия.

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

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

4. Расширение роли и специализации в проектировании интерфейсов

2017-ux-2

Проектирование интерфейсов – всегда было обширной сферой, но в 2017 году специализация в этой сфере будет направлена на новые технологии, такие как виртуальная реальность, искусственный интеллект.

Каждый, кто занят в разработке элементов интерфейса, является частью UX-команды.

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

5. UX как практика менеджмента

2017-ux1

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

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

B2B контент-маркетинг: ожидаемые тренды в 2017 году

Если вы B2B  маркетолог и до сих пор не инвестируете в создание контента, то вы — в абсолютном меньшинстве. Согласно исследованиям 88% B2B маркетологов утверждают, что их организации используют контент-маркетинг для достижения своих целей.

Разработка весомой стратегии контент-маркетинга стоит того: B2B компании, которые делали записи в блогах более 11 раз в месяц, наблюдали трёхкратный рост траффика  по сравнению с компаниями, обновляющими блог только раз в месяц.

Сегодня в инфографике — тренды, возможности, приоритеты для B2B маркетологов, на которые стоит обратить внимание в 2017:

!B2B-Content-Marketing-Trends-in-2017-HD