Дизайн как средство повествования.

Перевод статьи:  Telling stories with your designs.
Автор:  Dan Rajan.

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

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

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

Диаграмма.

Процесс формирования сюжета вашего сайта предусматривает участие двух основных компонентов — персоны и повествования.

Персоны.

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

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

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

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

Для создания персоны сайта вам понадобится следующее:

  • Исчерпывающее представление о вашей Целевой Аудитории.
    Как уже упоминалось выше, персона пользователя может быть полезна при формировании персоны сайта, однако она не должна быть ее зеркальным отображением, а лишь поддерживать с ней тесную связь, в противном случае ваш сайт будет чрезмерно узконаправленным.
  • Упоминания о ключевых фигурах вашей организации (если таковые имеются).
    Это может пригодиться, если индивидуальность вашего бренда основана на людях из вашей организации и в этом случае персона сайта может отражать некоторые присущие им элементы. Подобно тому, как это сделано у Apple со Стивом Джобсом или на сайте компании по разработке игр mojang.com, которая использует свое лидирующее название "Minecraft" в заголовочной части сайта и во всех других заметных местах.
  • Рекламный контент.
    Этот элемент участвует в зарождении и последующем формировании поведенческих возможностей пользователя вашего сайта и частично находится под воздействием персоны сайта, но в тоже время, являясь ее неотъемлемой частью, он в свою очередь оказывает влияние и на нее. Такого рода контент формирует представление о направленности сайта, его персоне и поэтому играет важную роль в этом вопросе. Я еще вернусь к данной теме далее в статье, однако на этом этапе все же стоило упомянуть о взаимосвязи подобного контента с персонами.
  • Любой другой уместный контент/документация.
    Смысл такой рекомендации может показаться слишком размытым. Но необходимо понимать, что по причине многообразия сайтов любой аспект или связанный с определенным сайтом контент может быть очень полезен при создании его персоны и использование даже на первый взгляд несущественных и едва заметных вещей может привести к весьма ощутимым отличиям во внешнем интерфейсе веб-ресурса.

Повествование.

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

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

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

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

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

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

Навигационная панель.

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

Однако, естественный подтекст навигационной панели с таким оформлением, к несчастью для сайта, заключается в том, что поскольку ссылка «ПОДДЕРЖКА» следует сразу же за «КУПИТЬ», то обязательно случиться что-нибудь ужасное и нашей последней надеждой после безрезультатного обращения в службу технической поддержки будет прямой контакт с представителями производителя продукта, на которых можно выйти после активации ссылки «КОНТАКТЫ». (Причина, по которой поддержка потерпела неудачу, скорее всего, заключается не только в том, что она обладает плохой репутацией в различных отраслях, а еще и потому, что в данном случае она является участником следующего сценария: «если поддержка реализована на подобающем уровне, то для чего нам выходить на контакт еще с кем-то?»)

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

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

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

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

И следующий раз, когда вы посетите сайт Apple.com, задумайтесь о том, какой персоной он обладает и что его разработчики пытались довести до вашего внимания при создании навигации, размещая ссылку на ведущий Mac продукт компании первой (*На сегодняшний день она сдвинулась на второе место, уступив первое магазину, но в данном случае это не столь важно.), однако ссылку на последнюю модель бренда iPhone не второй, а в центре навигационного меню, а также используя логотип Apple для оформления кнопки перехода на домашнюю страницу сайта компании с целью узнаваемости своей торговой марки.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *