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

Mikhail Belstar
Nov 3, 2015 · 7 min read
Image for post
Image for post
Только одно из приложение решает реальную проблему

Это перевод статьи Paul Adams (Intercom)

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

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

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

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

Image for post
Image for post

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

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

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

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

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

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

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

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

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

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

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

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

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

Image for post
Image for post
Архитектура продукта: Интерком

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

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

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

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

Image for post
Image for post

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

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

Image for post
Image for post

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

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

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

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

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

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

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

Image for post
Image for post
Как однажды сказал Чарльз Эймс: “В конце концов все соединяется”.

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

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

Dribbble примеры в шапке взяты у bwaddington kolage claudioguglieri alden BillSKenney dash

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

Image for post
Image for post

Спасибо! ☺

Official Russian

Истории и идеи каждого на русском.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store