Трудно быть простым

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

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

Украинские фонды

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

Когда прошел первый шок, стало понятно, что это выписка из индивидуального пенсионного счета. Решив придать ей более «финансовый» вид и хоть минимально обеспечить читаемость, мы вооружились карандашами. Через полчаса листик был исчеркан вдоль и поперек, зато мы с Ковжуном поняли, что там написано. Примечательно то, что менеджер, приславший этот документ, сам не мог объяснить, как в нем разобраться.

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

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

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

Подбиваем итог (сколько осталось денег) и собираем preview документа.

Policy.net.ua

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

В ходе обсуждения с .ic выяснилось, что они и сами не до конца и неодинаково понимали схему работы ресурса. Таким образом, объяснение с раскладыванием по полочкам оказалось полезным всем участникам процесса. Грубо говоря, на ресурсе обсуждаются идеи, которые превращаются в документы (policy papers), которые хоть сейчас подавай в парламент или используй в реальной жизни. Все детерминировано, а участие в обсуждениях принимают уважаемые эксперты и много авторитетных в своих областях людей. Если кратко, то это think tank.

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

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

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

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

Прямо сейчас можно посмотреть рабочие макеты главной страницы сайта и внутренней страницы этапа, а работающий сайт по адресу policy.net.ua.

Лирическое отступление
Не всегда важно очень облегчать восприятие. При желании отдать миллион долларов первой понравившейся девушке, которая станет на руки, совсем не обязательно втолковывать всем курносым пышногрудым блондинкам эту информацию. Они заинтересованы в том, чтобы понять все правильно. Не всегда важно донести информацию для всех. Например, я не очень расстроюсь, если кто-то не сможет открыть или зайти внутрь моего сайта. Я не фрилансер, я не стремлюсь охватить абсолютно всех, я не воспринимаю genn.org как инструмент продаж. Это просто одна из красивых вещей, которые мне нравится делать. И сайт отрабатывает все то, для чего предназначался, хоть и нарушает чуть ли не десяток канонов ;) Впрочем, в качестве негативного примера попыток следования гласным и негласным канонам предлагаю почитать оценку сайта ТурбоМолочников другом Кортунова, неким blackbox.

Итого

Для того, чтобы создать что-то функциональное и полезное, необходимо определиться с целями, которые следует достичь. Исходя из этих целей разработать средства, а потом, применив их, создать удобную красоту. Прохождение этих этапов непростое и увлекательное, но без погружения всех участников процесса в суть разрабатываемого объекта не обойтись. Не следует пренебрегать общением с разработчиками и идеологами проекта. Во-первых, они все равно изначально на шажок впереди (потом-то мы их обгоняем ;)), а во-вторых, объясняя суть, они и сами смогут понять чем занимаются. Если же вовлечь их в разбор функциональности по кирпичикам и построение понятных схем работы (как в примере с policy.net.ua), то появляется куда больше шансов сделать по-настоящему удобную штуковину. Кроме того, это избавит от последующего объяснения, почему именно так, а не иначе — мы же придумали это вместе! Свои творения любой заказчик всегда любит больше, чем чужие ;)

Можно сделать вывод, что при разработке дизайна любого объекта нельзя лениться. Разница между неумением что-то сделать и нежеланием очевидна при первом взгляде на продукт. Поэтому, когда в следующий раз мне закажут что-то вроде оформления Октоберфеста, я потребую погрузить меня в атмосферу этого праздника минимум на полгода! ;)