Поделиться , , Google+, Pinterest,

Опубликовано в:

Дрибббилизация дизайна

Только одно из приложение решает реальную проблему

Дрибббилизация дизайна

На сегодняшний день мнения среди дизайнеров — разделились. С одной стороны у нас есть потрясающие примеры в виде публикаций от таких людей как Ryan Singer и Julie Zhuo двигающие нашу профессию вперед. С другой же стороны, мы имеем дело с растущим числом людей публикующих и обсуждающих свои работы на Dribbble, ради лайков, в результате чего наша профессия движется назад. Данная публикация не столько о самом Dribbble, сколько о значимости Dribbble сообщества. Я буду использовать термин “продуктовый дизайн”, но я включаю в это понятие UX.

«Выглядит круто!» — так Dribbble сообщество оценивает поверхностную работу

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

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

0-S9-REG4HypP3H75i

Самая важная часть продуктового дизайна как правило самая неприглядная

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

Худшие кандидаты присылали плоские PNG, PDF полные ваерфреймов, не решающих проблем, без каких-либо бизнес и технических ограничений. Без контекста. Эти pixel perfect, ретина готовые PNG картинки, наверняка выглядят круто на Dribbble, но они теряют свою ценность, когда речь заходит о решении реальных задач в реальных проектах.

Вот почему редизайн работ других людей является чистым безумием, например, вот вам новый Yahoo логотип, iOS7, изменения в Facebook, Новый-Новый-Twitter, Ребрендинг компании American Airlines. Люди делающие редизайн этих проектов не понимают контекст принимаемых решений, не знают требований, ограничений, организационной политики.

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

Продуктовый дизайн — это миссия, видение и структура

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

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

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

После миссии и видения — архитектура продукта. Не техническая архитектура, а скорее компоненты вашего продукта и как они соотносится друг к другу. Система. В первое утро первого рабочего дня в Фэйсбуке, Chris Cox (VP (вице-президент) продуктового дизайна) провел невероятную вводную беседу (видео). Он бы мог говорить о чем угодно с сотрудниками, работающими над разными проектами, но все свое внимание он направил на объяснение архитектуры продукта и как это соотносится с миссией компании.

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

0-fb4VT19zqPtU47S3
Архитектура продукта: Фэйсбук

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

0-CNrLXlHtTXHAtX1d
Архитектура продукта: Интерком

Я даже не припомню, что бы видел описание архитектуры продукта на Dribbble.

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

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

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

 1-FEHeyNVToNWytTU4DkAa3A

Думайте в четырех плоскостях

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

1-qfijaI0V_WoOFE5s1VL5WQ

Результат: Начните с понимания результата. Что ваш продукт делает проще и лучше для пользователей? Многие продукты без четкого понимания результата заканчиваются плачевно.

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

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

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

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

С проникновением интернета в нашу жизнь, проектирование систем будет иметь еще большее значение

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

1-sj13QE9avqE772eE-5jqrA
Как однажды сказал Чарльз Эймс: «В конце концов все соединяется».

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

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

Источник: medium.com

Оригинал статьи: The Dribbblisation of Design

comments powered by HyperComments