Контент-первое прототипирование

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

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

Дальнейшее чтение на SmashingMag:

• Оптимизация дизайна для быстрого тестирования прототипа
• Выбор правильного инструмента для прототипирования
• Прототипирование контента в адаптивном веб-дизайне
• Возрождение прототипов пользовательского интерфейса

Хотя в прошлом мы неплохо разбирались в простых системах (подумайте о статических веб-сайтах и ​​интрасетях), оказалось, что большие динамические системы немного сложнее и менее предсказуемы. По мере роста систем они становятся экспоненциально более сложными, а по мере усложнения их поведение становится все более нелинейным, и нам, бедным обезьянам, становится все труднее его предвидеть. В больших системах ошибки округления до тысячного десятичного знака могут радикально изменить результаты (Митчелл 33). Поскольку Интернет приближается к триллиону узлов, это мир, для которого мы все сейчас проектируем.

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

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

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

Модель белого ящика для контента

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

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

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

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

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

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

Платформа прототипирования Content-First

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

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

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

Excel

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

Джекилл

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

фундамент

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

Браузерсинхронизация

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

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

Если вы паникуете, потому что это связано с кодом…

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

Пример прототипирования с приоритетом содержания: общественный центр Green Lake

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

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

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

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

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

Захват контента

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Получайте обратную связь заранее и пересматривайте по ходу дела

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

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

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

Эта гибкость позволяет вам легко тестировать различные иерархии экранов и обработку контента с пользователями, а также позволяет вам использовать в этих тестах реальный контент, контент, который ваша аудитория может испытать (и на который отреагирует) из первых рук. Поскольку окончательная форма прототипа — это HTML, CSS и JavaScript, вы можете собирать отзывы пользователей с помощью любого удобного вам инструмента тестирования (мне нравятся UserTesting и Lookback).

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

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

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

Системное мышление за пределами Интернета

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

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

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

Процитированные работы

• Сложность, экскурсия с гидом , Мелани Митчелл (Нью-Йорк: Оксфорд, 2009 г.)
• Введение в общее системное мышление , Джеральд Вайнберг (Нью-Йорк: Дорсет Хаус, 1975).