В наши дни «сторителлинг» стал довольно модным словом в различных отраслях: от маркетинга до публичных выступлений. Тем не менее, это одна из тенденций, имеющая смысл в применении. Сторителлинг – это первичная форма общения, столь же древняя, как человечество, и может быть является отличительным фактором, который делает нас такими, какие мы есть. Разработка веб-сайта требует отличной базы, которую Вы можете получить на курсах верстки.
В то время как сторителлинг является мощным средством, это редко используемый инструмент в арсенале веб-дизайнера. В этой статье мы рассмотрим, как два разных сайта, The Cutter STORIS.info и War Untold, используют данный прием. Прежде чем сравнивать и сопоставлять эти сайты, давайте сначала посмотрим, что делает истории настолько привлекательными.
Сила сторителлинга
Истории – это основной способ внедрения, управления, хранения, доступа и передачи информации, а также связи с другими. Это то, как наш мозг функционирует, и как мы имеем дело с другим, казалось бы, хаотичным и случайным миром. Действительно, наш мозг реагирует на содержание, ища историю, которая могла бы объяснить ситуацию. История помогает нам создавать когнитивные карты, ментальные модели и повествования.
Сторителлинг – мощный инструмент связи и управления, потому что:
- Истории обеспечивают определение порядка и смысла.
- Истории могут сделать материал более запоминающимся.
- Истории могут быть вызвать сопровождаться вызыванием чувствами и эмоциями.
- Истории мощно убеждают в тех случаях, когда факты не справляются с этой задачей, позволяя аудитории прийти к самому желаемому выводу.
Кроме того, рассказы могут передавать информацию таким образом, который прорывается сквозь туман информационной перегрузки, что еще больше помогает пользователям лучше выполнять свои задачи. Но самое главное, рассказы – один из ключевых способов общения с аудиторией.
В The Psychological Power of Storytelling, автор Памела Браун Рутледж предполагает, что «когда организации, бренды или отдельные лица определяют и развивают основную историю, они создают и демонстрируют подлинный смысл и цель, в которые другие могут верить, участвовать и делиться». Это делает сторителлинг неоценимым средством при создании веб-сайта или приложения.
Связь с веб-дизайном
Большая часть того, что нужно учитывать при создании истории, такая же, как то, что необходимо для создания веб-сайта или приложения:
- Кто аудитория?
- Каковы твои цели?
- У вас есть четкое значение?
Хорошая история наиболее эффективна, показывая, а не рассказывая. Хорошие истории поддерживают вашу аудиторию и используют привычную структуру, чтобы привлечь внимание, чтобы пользователи хотели знать, что происходит дальше, и поэтому они будут вынуждены продолжать следовать истории. Разве это не очень похоже на то, к чему мы стремимся при создании веб-сайтов?
Сторителлинг применительно к веб-дизайну
Сторителлинг – это не только контент. Для веб-сайтов и цифровых медиа рассказы могут передаваться на нескольких уровнях, причем контент является только одним из них. На самом деле, чтобы эффективно передавать историю в цифровом виде, мы должны использовать все аспекты веб-дизайна и переплетать их в один красиво переписанный целостный комплекс.
Применяя сторителлинг к веб-дизайну, мы должны учитывать различия между устным или письменным сторителлингом и тем, что сообщается через всю совокупность веб-сайта или приложения. Эти отличия наиболее заметны в:
- Содержании.
- Визуальном восприятии.
- Пользовательском опыте.
Контент
С контентом мы должны помнить, что в отличие от устного или письменного сторителлинга, сеть связей полностью нелинейна. Пользователи могут заходить на наши сайты в любой момент, поэтому важно предоставлять подсказки для ориентации по контенту (или маркеры локации), чтобы пользователь мог лучше ориентироваться среди доступной информации.
Рассказ, который хорошо показан в содержании, помогает пользователю, устанавливая прочные связи между информацией. Кроме того, рассказ должен проявляться не только через макроконтент сайта, то есть основные абзацы и большой текст тизера, но также через микросодержание в виде заголовков / подзаголовков, надписей навигации, текста гиперссылки, текста кнопки, полей и URL-адресов.
Визуальные эффекты
Визуальные эффекты должны не только «освещать» историю, но и рассказывать историю. Что я имею в виду? Во-первых, нам нужно учитывать склонность человеческого мозга к визуальным эффектам, иначе известную как Pictorial Superiority Effect (PSE). Это означает, что зрячие пользователи поглощают на 75% больше информации от изображений, чем через любой другой тип.
Понимая историю, которую мы хотим рассказать визуально, мы можем использовать ее для руководства по выбору дизайна, пробелов, типографики, текстуры, пропорции и иерархии, чтобы мощно передавать некую часть истории без слов.
Пользовательский опыт
Интерактивность интернета предполагает что мы можем использовать пользовательский интерфейс для дальнейшего улучшения истории, рассказанной через контент и визуальные эффекты. Мы делаем это, искусно направляя пользователя через сайт для достижения своих целей таким образом, чтобы улучшать историю, которую вы рассказываете, а также историю, которую пользователи создают для себя, когда они пользуются сайтом или приложением. Сторителлинг, включенный в интерактивную часть сайта, может информировать пользователей, как перемещаться со страницы на страницу.
Если это кажется очень сложным, расслабьтесь. Хорошей новостью является то, что вы, вероятно, уже несколько раз подсознательно использовали несколько форм сторителлинга в своих цифровых свойствах на каком-то уровне. Некоторые из лучших практик в веб-дизайне, юзабилити и стратегии контента уже поставили нас на путь сторителлинга в веб-дизайне. Трюк состоит в том, чтобы сделать то, что было подсознательно сознательным, а затем принять это осознание и начать продвигаться к мастерству.
Сравнение и контраст
Теория – вещь хорошая, но для того, чтобы мы смогли достичь уровня мастерства, даже лучшие теории должны поддерживаться практикой. Давайте рассмотрим некоторые из рассмотренных выше концепций, сравнив и сопоставив два сайта, которые изобилуют потенциалом сторителлинга.
Storis
STORIS – корабль береговой охраны Второй мировой войны, богатый историей, который отслужил более 64 лет активной службы с 1942 по 2007 год. Цели сайта Cutter STORIS, представленные читателем:
- Поделиться исторической значимостью и достижениями корабля.
- Поделиться детализированной информацией на STORIS.
- Для получения самой последней информации об усилиях по созданию первого морского музея STORIS в Аляске.
Учитывая целевую аудиторию и заявленные цели сайта, ясно, что сторителлинг должен быть критическим аспектом веб-сайта на всех уровнях: контент, визуальный дизайн и пользовательский интерфейс. Давайте посмотрим, как хорошо внедрен сторителлинг на главной странице.
Контент
На первый взгляд на главной странице сайт выглядит так же, как и у правительственного агентства, и контент только усиливает это впечатление, с формальной, жесткой информацией, которая не имеет цвета или размера. Заголовки являются информационными, не вызывающими воспоминаний, и они просто отражают навигацию, которая не дает посетителю особого удовольствия вникать в сайт.
В идеале, заголовки должны переплетаться. Кроме того, гиперссылки в контенте должны быть переписаны скорее как неотразимые тизеры, чтобы они стимулировали любопытство и воображение аудитории.
Визуальные эффекты
Минималистичный современный дизайн The Cutter STORIS.info не указывает на историческую глубину содержания и предпосылки сайта. Хотя цвета сочетаются с морским кораблем, сайт ориентирован на любителей истории. Можно использовать больше текстур, чтобы погрузиться в именно тот возраст и время.
Как ни странно, хотя сам корабль является основным смыслом сайта, изображение корабля является одним из самых маленьких элементов на странице. Чтобы эффективно рассказать историю корабля, следует показать большие фотографии судна с того времени и сейчас, чтобы визуально указать на приоритеты сайта.
Пользовательский опыт
С точки зрения UX, страница не структурирована таким образом, чтобы привлекать пользователей. На сайте не хватает «тизеров» в виде интерактивных элементов, которые привлекают внимание пользователя и побуждают их исследовать остальную часть истории сайта. Даже простые ссылки «Читать дальше» в конце абзаца заставили бы читателей читать дальше. Другой вариант – сделать более крупной область изображения в слайд-шоу со ссылками.
War Untold
Сайт War Untold создан для того, чтобы рассказывать истории о людях, которые участвовали в Великой войне. Сайт разработан не только для того, чтобы отметить их участие, но и для существования форума, где люди, потратившие половину своей жизни на поле боя, но тем не менее, не известные, могут рассказать о себе
Как и сайт The Cutter STORIS, историческая ориентация этого сайта (а также его внимание к истории) требует, чтобы сторителлинг был важным элементом этого сайта. Давайте посмотрим, насколько хорошо рассказывается история на этом сайте.
Контент
Используя условный язык, такой как «Западный фронт», «Тогда и сейчас» и «Новости с фронта», названия навигации хорошо помогают заложить основу для рассказа истории. Описательное микросодержание под заголовками навигации далее объясняет, какой контент будет найден в каждом разделе, заставляя пользователя нажимать ссылки, чтобы узнать больше информации.
Погружаясь глубже в сайт за пределами главной страницы на целевую страницу «Истории», мы видим, что контент является кратким, но в заголовке текста используется язык, который заставляет читателя щелкнуть истории, чтобы узнать больше. В отдельных историях вводные содержания и цитаты вызывают интерес, который заставляет пользователей продолжать читать.
Визуальные эффекты
На домашней странице смесь старинных и современных фотографий рассказывает историю сайта. Слайд-шоу изображений является самым большим элементом на странице и привлекает пользователя узнать историю веб-сайта. Кроме того, карусель обеспечивает визуальный интерес.
Использование текстуры и типографии передает ощущение старинного качества. На страницах, глубже на сайте, дизайн передает ощущение истории, используя модный газетный мотив на страницах «Истории» и «Новости с фронта».
На страницах «Истории» вводный контент имитирует редакционную информационную карту, в то время как область содержимого страницы выглядит как вкладка папки, что дополнительно создает идеальную синергию между контентом и визуальными эффектами сайта.
Пользовательский опыт
Интерактивная панель навигации и слайд-шоу изображений на главной странице побуждают пользователя к дальнейшему исследованию и поиску большей части истории. Однако, хотя на домашней странице есть кнопка «См. Дополнительные ссылки», она может извлечь выгоду из ссылок «Подробнее».
Область «Then and Now» сайта не только поощряет пользователя к продолжению пермещения в глубь сайта, но и помогает ориентировать пользователей на страницах. В правом нижнем углу основного контента каждой страницы есть ссылка на следующую страницу, а в правом нижнем и правом верхнем углу секции основного контента есть ссылка «Назад», чтобы вернуть пользователя на целевую страницу раздела.
Конец?
В этом случае «конец» – это действительно только начало. Сайт Cutter STORIS имеет хорошую структуру, но он может многое почерпнуть из War Untold.
Сайты Cutter STORIS и War Untold – это простые примеры, которые вы можете изучить, чтобы лучше понять, как включить сторителлинг в ваши веб-сайты и приложения. Разработка веб-сайта требует отличной базы, которую Вы можете получить на курсах верстки.
Записаться сейчас / Бесплатная консультация