Design The New Business — 40-минутный документальный фильм о дизайн-мышлении в применении к бизнесу.

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

Дизайн-мышление — по определению Александра Остервальдера, одного из героев фильма — набор инструментов и техник, используемых для создания нового. Чего нового — не так важно: например, к компании IDEO, северо-американскому апологету дизайн-мышления обращаются банки с запросом на инновации в сфере банковских сбережений, Procter&Gamble с задачей разработать новый продукт, или фонд Билла и Мелисса Гейтс в поисках решения вечной проблемы питьевой воды в Африке.

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

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

Design The New Business — субъективное экспресс-погружение в предметную область, серия коротких интервью с независимыми консультантами, владельцами дизайн-агенств, преподавателями и дизайн-мыслителями из крупных корпораций (Philips, Volkswagen Group). Именно крупный бизнес, по заявлению авторов фильма, и является целевой аудиторией фильма, однако вдохновиться может предприниматель любого калибра.

Практической информации в фильме, увы, почти нет. Да и трудно, честно говоря, разобраться в вопросе, не потратив хотя бы пару часов на его изучение. Пожалуй, хорошим введением в тему может стать книга Тима Брауна из IDEO Change by Design, которую сейчас готовят к публикации на русском.

Фильм свободно доступен онлайн на английском языке с английскими субтитрами: www.designthenewbusiness.com.

Для i-business.ru.

Не стану пересказывать статью полностью, но зафиксирую довольно важное для себя наблюдение по поводу. Исследования Зайонка и обнаруженный им феномен Mere exposure effect (к сожалению, не смог обнаружить, как на русский переводится его название) лишний раз доказывают, что низкий уровень графического дизайна и вообще визуальной среды — проблема системная и в некотором смысле самовоспроизводящаяся.

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

В штате Мэн, США есть город Бангор с населением в 35000 человек, что, для сравнения, в 6 с лишним раз меньше Великого Новгорода или, скажем, Пскова. В Бангоре с XIX века существует городская газета — The Bangor Daily News. С середины июня сайт издания работает на движке WordPress — этим фактом после того, как на нём же стали работать Techcrunch, Mashable и другие крупномасштабные медийные проекты, уже никого не удивишь. Примечательно то, как выстроен рабочий процесс редакции:

1. Идеи для материалов и их черновики создаются в Google Docs, там же они обсуждаются при помощи встроенных комментариев, правятся и доводятся до чистового состояния редактором.
2. Готовый материал помещается в определённую категорию, после чего он автоматически попадает в Wordpress.
3. В Wordpress редактор публикует материал для веба, а также настраивает внешний вид заголовка для печатной версии.
4. История автоматически появляется в InDesign уже с отформатированным заголовком и текстом.

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

В этом видео Уильям Дэйвис демонстрирует рабочий процесс:

Технические нюансы довольно подробно описаны в блоге разработчиков и, что особенно ценно, практически все специально разработанные для газеты плагины для Вордпресса доступны абсолютно бесплатно:

• The Zoninator, позволяющий вручную упорядочивать посты, выводимые на главной странице (к слову, на Cinespana.org мы эту задачу решили через виджеты, без дополнительных плагинов),
• Edit Flow, позволяющий управлять рабочим процессом при помощи ролей и разрешений,
• Docs to WordPress, берущий на себя импорт документов из Google Docs (требуется настройка запуска скрипта через Cron или Wp-cron),
• Media Credit, добавляющий поле «Credit» (авторство) к любой загружаемой фотографии и автоматический его вывод.

Плагины других авторов, используемые на Bangor Daily News:

• Co-Authors Plus, позволяющий установить несколько авторов для одного материала.
• CP Redirect, позволяющий настроить редиректы со старого сайта
• XML import для импорта материалов старого сайта (установка этого плагина доступна в стандартном меню Worpdress Инструменты → Импорт; для его работы требуется подготовка архива старого сайта в XML соответственно).

К сожалению, плагин для InDesign в свободный доступ не выложен, однако и без него можно поэкспериментировать с экспортом данных из Wordpress в XML (это можно реализовать через шаблоны или использовать стандартный RSS) и их импортом в InDesign.

via 1000words / via urbansheep

К слову

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

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

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

1. Пространственные (вся предметная и понятийная среда)
2. Чувственные (все, что связано с нашими желаниями, восприятием и самочувствием)
3. Коммуникационные (взаимодействия, передвижение, энергообмен всего и вся)

Вся заметка Типология Дизайна 1.0 несомненно стоит внимания, Лиза очень чётко всё расписывает.

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

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

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

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

Современное понимание дизайна в мире давно не соответствует российскому представлению о нем как об «украшательстве». Слова «дизайн» и «инновации» становятся синонимами: говоря «дизайн», мы подразумеваем не просто внешнюю оболочку чего бы то ни было — речь идет о всей цепочке создания нового продукта (New Product Development). Поэтому компании, которая стремится к успеху в условиях новой, «умной» экономики, буквально придется овладевать навыками дизайн-мышления (design thinking). src

Смена парадигмы

На смену technology-driven strategy приходит human-driven strategy. Новые продукты создаются не потому, что появилась новая технология, а исходя из реальных потребностей человека. New product development. Для бизнесов это новые горизонты. Пример — компания Schindler, которую дизайн-мышление перевело из статуса производителя лифтов и эскалаторов в статус интегратора комплексных решений по управлению трафиком.

Роль дизайнера

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

Дизайн-исследования

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

Разница между маркетинговым исследованием и дизайн-исследованием: в первом случае исследование с участием 100 человек выдаёт 1 идею, во втором — исследование с участием 10 человек выдаёт 100 идей.

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

Голубые океаны

Екатерина рассказала о концепции голубых и красных океанов (Blue ocean strategy). Красные океаны — это известные индустрии, с очерченными границами, маркетинговыми категориями и перегруженными рынками. Голубые океаны — океаны будущего, океаны инноваций. Пример голубого океана — iPod + iTunes, фактически новый рынок, созданный Apple.

Интересующие меня вопросы

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

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

Кстати, интересным образом от Екатерины за всю лекцию слова юзабилити я не услышал ни разу — интересно, почему.

Ссылки

Статья Екатерины в Harvard Business Review, в которой всё то же самое излагается в куда более структурированном виде.

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

Инновации@МГУ: человекоцентричный дизайн, русский IDEO и активация дизайн-мышления.

На сайте компании IDEO, неоднократно упоминавшейся Екатериной в течение лекции, доступен для скачивания Human-Centered Design Toolkit.

Презентация What marketers should know about design-research.

Небольшая презентация Дэниэля наглядно иллюстрирует принцип COPE:

Я довольно часто наталкиваюсь на разговоры о семантической разметке в вебе. На мой взгляд, работоспособность любой технологии зависит от того, насколько удобно и понятно её поддержка реализована для конечного пользователя, в данном случае контнет-менеджера. Очень многие современные CMS хотя и не столь явно ориентированы на выдачу HTML (большинство из них может отдавать данные также XML-форматах: RSS, Atom и т.д.), однако подход к хранению информации остаётся достаточно примитивным.

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

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

Схематически это могло бы выглядеть примерно так:

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

Осмысленная структура позволит, как в случае NPR, на лету создавать новые виды представления, легко и просто расширять функционал, строить качественных поиск. На мой взгляд, использование WYSIWYG должно быть минимизировано (в большинстве случае достаточно тегов strong, em, h1-h3, гиперссылок и вставки изображений), а результат работы визуального редактора должен тщательно чиститься. (В плане чистоты и лаконичности мне очень симпатичен WYSIWYG-плагин для jQuery.) Чем дискретней, атомарней данные, тем легче их организовывать, сортировать, повторно использовать, анализировать. Вместо склада текстов можно формировать базы данных, извлекая из них новые смыслы и значения.

Современные фреймворки вроде Symphony, Ruby on Rails или Django, разумеется, предоставляют функционал для построения в кратчайшие сроки CMS с оптимальной структурой хранения данных, однако я пока не встречал удобных инструментов, не требующих навыков программирования для решения типовых задач по созданию специфичных структур данных. Мне кажется, что при нынешнем развитии технологий это вполне посильная задача для очень большого процента случаев.

Кстати, на завтрашнем Хакдее я буду читать доклад о контенте, и непременно затрону и этот вопрос. Мне было бы интересно обсудить его с профессиональными программистами.

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

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

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

Именно поэтому я никогда не приступаю к стадии графического дизайна без формирования полного виденья проекта и высоко- и низкоуровневого проектирования.

Доступны субтитры на русском языке.

Однако существует и совместимый со стандартами способ подключения шрифтов — через CSS-правило @font-face. Хабрахабр: Прекрасные шрифты посредством @font-face. Нидерландская словолитня Typotheque предлагает пользоваться такой возможностью и утверждает, что работать это будет в 95% современных браузеров, включая Internet Explorer (в расчетах шрифтовики ссылаются на статью со статистикой из Википедии.

Typotheque впервые предлагает специальную лицензию для использования на веб, которая в 5 раз дешевле, чем стандартная. Например, Fedra Sans Std Book по веб-лицензии обойдется всего 18 евро, против 90 за полную. Установить шрифт, приобретенный по веб-лицензии, на свой компьютер нельзя, он подключается непосредственно к сайту через CSS-файл и загружается . При этом действуют ограничения по трафику — 500 мегабайт в месяц. Каждый гигабайт свыше этого объема будет стоит 1 евро. Таким образом, Typotheque не только впервые используют бизнес-модель, связанную с фактической арендой шрифтов, но и выступают в качестве первопроходцев на ниве лицензирования оных для использования в сети.

Протестировать услугу можно совершенно бесплатно в течение месяца, «приобретя» пробную лицензию, а для крупных компаний, которые не устраивает зависимость от стороннего хостинга, предусмотрена серверная лицензия, по которой каждое начертание обойдется в 1500 €. На момент написания этой заметки у Typotheque есть 2 отличных супергарнитуры с поддержкой кириллицы: Fedra и Greta, так что эксперименты можно проводить и с русскоязычными сайтами. К сожалению сайт студии работает последние сутки с перебоями и до магазина достучаться не так-то и просто — но я склонен списывать это на ажиотаж, связанный с запуском сервиса, и надеюсь что скоро проблема будет решена. В любом случае, файлы шрифтов располагаются на распределенный хостинге Amazon, и опасаться за их доступность не стоит.

www.typotheque.com/webfonts

Смотрите также

@font-face или назад в будущее — подробная статья по теме внедрения шрифтов от Павл Ловцевича.

Update

В настоящий момент техника не работает в Google Chrome, несмотря на то, что этот браузер, как и Safari, основан на движке Webkit. В силу неизвестных соображений безопасности поддержка рендеринга сторонних шрифтов в Хроме отключена. Ее можно вручную включить, запустив программу с параметрами –enable-remote-fonts. Update: заработало.

Update 2

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

In Soviet Russia

Действительно, в России стандартом считается верстка, при которой дизайн занимает 100% экрана, независимо от разрешения, в то время как западные сайты чаще всего сделаны по жесткой сетке и зафиксированы по ширине. Артемий Андреевич Лебедев, отец советского веб-дизайна вероятный, изобретатель и ярый поборник резиновой верстки, презрительно называет фиксированные сайты «скриншотами». Практически все сайты Студии имеют пропорциональную верстку, и именно они являлись и являются до сих пор источником идей, вдохновения и технических решений для тысяч дизайнеров, верстальщиков и разработчиков.

И у такого подхода есть очевидные плюсы. Грамотно выполненная резиновая верстка может повысить доступность и качество интерфейса сайта, она адаптируется под различные разрешения и размер окна, максимально эффективно используя рабочее пространство. Однако для некоторых приемов такой верстки неизбежно требуется применение таблиц и Javascript’а, и, как это практикуется в Студии — без какого-либо пиитета к веб-стандартам. Впрочем, с точки зрения бизнеса веб-стандарты хороши тогда, когда позволяют экономить или зарабатывать, а не ограничивают функционал и снижают качество продукта, коим является любой сайт. С этой позиции высказывание Лебедева о том, что лучшей валидатор — это браузер, кажется более чем оправданным.

Следуйте за мной

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

Довольно трудно, если не невозможно сделать сайт, который смотрелся бы одинаково хорошо при ширине экрана и в 1024 и 1920 пикселей — разница почти в 2 раза. А между тем оба эти разрешения сейчас в ходу и убывать ни одно, ни другое не собирается — с одной стороны, дешевеют широкоформатные мониторы, с другой — появляется все больше нетбуков и прочей портативной техники с разрешениями, о которых веб-дизайнеры начали было забывать. Поэтому очень важно при резиновой верстке зафиксировать максимальную ширину, на которую будет растягивать ваш сайт. Сделать это можно при CSS-свойства помощи max-width, разумеется с отдельными телодвижениями для IE.

Fix my sink

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

Из обоих миров

Совмещение приемов фиксированной и резиновой верстки, а также немного Javascript’а могут давать довольно интересные результаты. Например, лэйауты, в которых количество колонок с пропорциональной шириной зависит от доступного пространства (пример). Используя готовые наработки, можно создавать резиновые сайты по стандартам, тратя минимальное время на совместимость и используя техники, привычные по упомянутой выше 960 grid system — умельцы адаптировали ее под резину. К слову, в CSS3 потребность в резиновой верстке учтена — спецификация Flexible Box Layout Module все еще находится в состоянии черновика, однако с синтаксисом уже можно экспериментировать при помощи плагина для jQuery. Спецификация Flexible Box Layout Module на сайте W3C.