Что такое правильный дизайн и как с ним связаны прототипы сайтов

0
219

Что такое правильный дизайн и как с ним связаны прототипы сайтов

Сайты, как известно, должны решать задачи бизнеса. Это касается всего, что есть на сайте: дизайн, тексты, картинки. Но что такое дизайн? Люди часто воспринимают дизайн как гармонию цветов и «поиграйте со шрифтами», но не как инструмент решения задач. Мы должны помнить, что дизайн — проектирование, а не рисование, и даже составление прототипов сайтов — это тоже дизайн. Недавно мы впечатлились статьёй от «Intercom» как раз на эту тему. Понимая, что полезные знания должны распространяться и что этому часто мешает языковой барьер, я решила перевести и опубликовать эту статью в нашем блоге. Она описывает подход, который очень близок и нам. И, кстати, должна вас предупредить — статья длинная, картинок мало, текста много, но, если вы прочитаете её до конца, ваш взгляд на дизайн уже не будет прежним.
Только одно из этих погодных приложений пытается решить реальную проблему.

В дизайне продуктов и в дизайн сообществах происходят совершенно противоположные вещи. С одной стороны, существуют такие прекрасные статьи, как статьи от Ryar Singer и Julie Zhuo, которые двигают нашу профессию вперёд. С другой стороны, растёт количество людей, публикующих и обсуждающих свои работы на Dribble, и это тянет нашу профессию назад. Этот пост не о Dribble как таковом, а о том, чего стоит Dribble-сообщество. На протяжении всей статьи я буду использовать термин «дизайн продукта», но под этим я также подразумеваю дизайн опыта использования и интерактивный дизайн.

«Выглядит отлично!». Как Dribble-сообщество поощряет поверхностные работы

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

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

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

Самый важный дизайн продукта, как правило, — самый уродливый

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

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

Вот почему переделка дизайна других людей — чистая глупость.Взять к примеру, новый логотип Yahoo, iOS 7, изменения в интерфейсе Facebook, новый новый Twitter, ребрендинг Americam Airlines. Люди слишком далеки от контекста, чтобы судить о решениях, принятых во время этих процессов, они не располагают должными знаниями и требованиями, не знают ограничения и политики организации.

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

Дизайн продукта — это миссия, это видение, это архитектура

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

Миссия — зачем мы существуем кроме того, как зарабатывать деньги?
Видение — Во что мы верим относительно будущего? Как это поможет нам выполнить свою миссию?

Дизайн начинается с миссии компании. Потом проходит через видение компании. Трудно делать достойный дизайн в компании, где нет ясных, находящих применение на практике, миссии и видения. Если в вашей компании не хватает миссии, сотворите её.

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

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

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

Что такое правильный дизайн и как с ним связаны прототипы сайтов

Архитектура продукта не то же самое, что информационная архитектура. Это не набор страниц, которые связаны друг с другом, и не описание того, что делает какая-нибудь кнопка. Эту функцию всегда будет лучше выполнять прототип. Архитектура — более глубокий уровень, нежели перечисленное. Это стуктура. Это кирпичи, из которых построен дом. Она показывает объекты системы и связи между ними.
Не припомню, чтобы я когда-нибудь увидел архитектуру продукта, описанную на Dribbble. До сих пор очень редко можно увидеть, что дизайнер рассказывает о том, как его работа соотносится с миссией, двигает видение вперёд или как она укладывается в архитектуру продукта. Это должно быть нормой, а не исключением.

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

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

Подумайте о 4 слоях дизайна

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

Что такое правильный дизайн и как с ним связаны прототипы сайтов

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

Дизайн систем будет значить всё больше и больше по мере того, как web проникает всюду

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

Проектирование статических, связанных страниц — умирающая профессия.Невероятный рост мобильных технологий, API, SDK, открытые партнёрства между платформами и продуктами рисуют нам кристально чистую картину будущего, где мы все создаём системы. PDF с прототипами умирают, Photoshop как инструмент дизайна продукта тоже умирает. Дизайнеры толкают наше мастерство вперёд, маневрируя между набросками, маркерной доской и инструментами прототипирования (Quartz Composer, After Effects, Keynote, CSS/HTML)
PDF с прототипами умирают, Photoshop как инструмент дизайна продукта тоже умирает. Дизайнеры толкают наше мастерство вперёд, маневрируя между набросками, маркерной доской и инструментами прототипирования.

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

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

Мы строим дизайн по принципу Клэйтона Кристенсена

Читайте также: Как изучить потребности Клиента: модель Клэйтона Кристенсена

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

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

Добавить, кажется, и нечего. А вы что думаете, дорогие читатели, которые прочитали до конца? Поделитесь своим мнением о статье в комментариях!

Хотите, чтобы сайт решал бизнес-задачи?
Обратитесь к нам!