Приступая к разработке UX/UI библиотеки

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

Отправная точка

У меня есть три источника информации по системному подходу в проектировании.

GE’s Predix Design System 
Это недавно вышедшая статья о том, как GE внедряла системный подход. Они базировались на втором для меня источнике.

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

Modular Web Design: Creating Reusable Components for User Experience Design and Documentation, Nathan Curtis, 2010
Можно сказать, уже старая и обойденная стороной книга. По ней никогда не было особенно хороших отзывов, такой крепкий середнячок. А по мне так она, просто, опередила время. Когда-то она стала для меня первым толчком к понимаю места модульности при проектировании.

Что надумал на сегодня

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

Принципы (Principles)

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

Принципы обеспечивают создания единого продукта.

Элементы (Elements)

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

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

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

Компоненты (Components & Patterns)

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

Особенностью компонента в том, что он содержит в себе решение по некоторой пользовательской задаче.

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

Шаблоны (Templates)

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

Сценарии использования (User Scenarios & Use Case)

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

Выйдет ли «каменный цветок»

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

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

UX проектирование сайта