Раннее прототипирование контента: структура и инструменты04.07.2016 15:08

В эпоху цифровой экономики главным товаром является контент. Контент — это золото, которое мы переплавляем в пользовательский опыт, и бриллиант, который мы вставляем в оправу из наших программ лояльности. Тем не менее мы слишком поздно берёмся за его разработку. Не покладая рук мы трудимся над прототипами взаимодействия и визуального дизайна, а реальные тексты откладываем на потом. А следовало бы поступать по-другому.

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

Хотя в прошлом мы неплохо справлялись с разработкой простых систем (сайтов и технологий), большие динамические системы кажутся нам гораздо более сложными и непредсказуемыми. По мере укрупнения систем их сложность растёт по экспоненте, а поведение становится всё более нелинейным и с трудом поддаётся прогнозированию. В крупных системах ошибка округления до тысячной доли может радикально изменить результат (Melanie Mitchell Complexity. A Guided Tour, страница 33). А ведь все мы работаем в сети, состоящей из триллиона узлов.

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

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

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

Один из инструментов, который исследователи используют, чтобы понимать поведение динамических систем, называется «модель белого ящика». Специалист по системам Джеральд Вайнберг пишет: в то время как поведение «чёрного ящика» скрыто, поведение «белого ящика» совершенно очевидно. Для сложных систем эта прозрачность крайне важна: Вайнберг далее отмечает, что «даже простейшие системы иногда преподносят сюрпризы своим разработчикам» (An Introduction to General Systems Thinking, страница 172).

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

Чтобы создать белый ящик для цифрового контента, нужно три составляющих:

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

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

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

Структура раннего прототипирования контента

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

Для этой структуры я выбрал Excel, Jekyll, ZURB Foundation и Browser Sync, связав их в одно целое с помощью скрипта Gulp. Эти программы и приложения широко доступны, в большинстве своем это открытые источники, у них активные сообщества поддержки и отличная документация.

Структура раннего прототипирования контента

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

Excel

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

Jekyll

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

Foundation

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

Browser Sync

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

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

Если вы паникуете из-за наличия кода — не паникуйте. Эти инструменты удобны в использовании, и у них отличные сообщества поддержки. Не нужно быть продвинутым разработчиком, чтобы воплощать свои идеи в жизнь, — необходимо знать лишь основы HTML и CSS. Это несложные языки, а их изучение не ухудшит ваши дизайнерские способности. Легенда шрифтового дизайна Эрик Спикерман как-то сказал: «Вам следует научиться если не писать код, то хотя бы понимать и оценивать его, потому что код — это то же самое, чем были гайки и винты 100 лет назад». Лучший способ научиться плавать — это войти в воду.

Пример раннего прототипирования контента — Общественный центр The Green Lake

Чтобы лучше понять, что представляет собой раннее прототипирование контента, рассмотрим реальный цифровой контент. Общественный центр The Green Lake продвигает классы, программы и мероприятия для членов местного сообщества. К сожалению, вся информация об их текущих классах, программах и событиях была доступна только в PDF-документах, которые можно было просматривать только на сайте, оптимизированном под мониторы определённого размера. Вот как это выглядело:

Список курсов на сайте Общественного центра The Green Lake

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

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

Наброски в скетчбуке

Добавить контент

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

Таблицы Directory и Feed также включены в стартовый комплект и включают в себя разные категории (столбцы) для соответствующих типов контента. Каждая таблица экспортирует контент в её собственный носитель (в данном случае это Catalogue, Directory и Feed), а также в её файл JSON. Вы можете добавить сколько угодно таблиц —, но убедитесь, что обновили файл конфигурации Jekyll таким образом, что он знает, куда их переносить (подробности читайте в документации к плагину Jekyll Data Pages Generator).

Добавить больше контентных пакетов

По мере того как я добавлял пакеты контента (строки в таблице), новые страницы автоматически добавлялись к прототипу. Каждая строка представляет одну страницу, а каждый столбец в этой строке — переменную, которую Jekyll помещает в шаблон, когда создаёт страницу. В этом примере контент из каталога Общественного центра довольно однороден. Если же описания элементов сильно различаются по длине, вы можете просто посмотреть, как изменение влияет на макет страницы. Возможно, вы решите разделить контент по-другому или добавить новые элементы — например, резюме.

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

Добавить структуру и иерархию с помощью HTML

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

Система шаблонов Jekyll возьмёт любые созданные вами шаблоны и вставит их в глобальный шаблон, включающий заголовок и иконку навигации. Это то, что подразумевается под выражением Layout: default — мы называем «шаблоном по умолчанию» эту самую «обложку» для шаблонов. Вы можете встраивать шаблоны так глубоко, как хотите, хотя обычно не требуется глубины больше, чем в один или два уровня. Для размещения повторяющихся элементов — таких как списки страниц и глобальные ссылки — вы также можете использовать includes, который вставляет конкретные куски кода в шаблон. Почитайте официальные документы Jekyll, чтобы узнать больше о шаблонах и вкладках.

Добавить логику с помощью тегов разметки Jekyll

Jekyll позволяет добавлять логику с помощью базовых тегов, подходящих к его системе шаблонов. Здесь я использовал тег for для поиска по списку классов центра The Green Lake (я создал этот список, когда добавлял контентные пакеты) и выделил каждый класс как ссылку:

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

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

Добавить стиль и отзывчивое поведение с помощью CSS от Foundation

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

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

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

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

Альтернативные версии домашней страницы мобильной версии сайта The Green Lake

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

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

Такая гибкость позволяет легко тестировать разные варианты организации экрана и контента на пользователях, используя реальный контент — тот, который ваша аудитория может получить из первых рук и оценить на своём опыте. Конечная форма прототипа — это HTML, CSS и JavaScript, поэтому для получения пользовательских отзывов вы можете использовать комфортный для себя инструмент тестирования (мне нравится User Testing и Lookback).

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

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

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

Системное мышление по ту сторону интернета

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

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

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