UI/UX

Введение в продуктовый дизайн

Перевод статьи «Intro To Product Design» с рассуждениями о принципах продуктового дизайна, его применении к окрудающей действительности и какими знаниями должен обладать продуктовый дизайнер.


Вступление

Кто угодно может стать продуктовым дизайнером.

Привет! Меня зовут Стефани Энгл.

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

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

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

Что такое дизайн?

Хороший дизайн решает проблему

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

Продуктовые дизайнеры особо заботятся об опыте взаимодействия с продуктами (хотя и само понятие “продукт” очень широкое). И хотя визуальный аспект продукта — как самый заметный — занимает дизайнера больше всего, он также продумывает и остальные аспекты, которые способны повлиять на пользовательский опыт.

1*ffeMjogECDIPMWlcQ2wYXwПо своей сути, автомобиль Тесла — это всего лишь дизайнерское решение проблемы загрязнения воздуха выхлопными газами.

Выдающийся дизайн придает значение форме и функции

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

Если дизайн работает, значит работает — каким же образом красота добавляет мощи функциональному дизайну? Красота предполагает связь между дизайнером и его аудиторией. Для дизайнера красивый дизайн — это страсть и пижонство: эдакая мастерски написанная ода, а может быть подмигивание в сторону своей аудитории и коллег. Для пользователей красота дизайна — это первый и самый сильный сигнал уважения (это искаженная трактовка чьей-то цитаты — пожалуйста, скажите мне, чьей?)

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

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

Лучший дизайн тот, который рисует вдохновляющее будущее

Сложно объяснить эту идею “многообещающего” дизайна лучше, чем это сделала Джули Чжо в своей статье Design’s North Star.

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

1*2S4osrBq4XqGRU74On5QwAГоворя, что Тесла — это просто электромобиль для богатых,мы сильно недооцениваем дизайн. Тесла — это первый шаг к популяризации идеи экологической сознательности, которая является залогом более здоровой и чистой планеты.

1*5JpIEKMzfZKfJsxdK3JJvwНа своем пути, Тесла приоткрывает двери в мир принципиального нового дизайна: автономных электромобилей. Не буду вдаваться в детали, но этот мир предоставляет бесконечные возможности в вопросах безопасности и продуктивности. (На заметку: На картинке изображен концепт автомобиля Mercedes. Почему-то Илон Маск не захотел поделиться со мной концептом самоуправляемого автомобиля Тесла)

Почему дизайн так важен?

Дизайн повсюду

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

1*fT5JkEdijWEYq7BRfSytigЕсли на двери есть ручка — само собой напрашивается движение “на себя” (“pull”).

Дизайн в своих худших проявлениях может убивать

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

1*2oerS4jPvgH9Z_nTw0Ff8w“Дженни умерла от интоксикации и обезвоживания. Это произошло во время того, как опытные медсестры пытались разобраться в этом интерфейсе”. — Джонатан Шариат, Трагический дизайн.

Дизайн в своих лучших проявлениях способен изменить мир

Дизайн не только обещает и вдохновляет на лучшее будущее — по-настоящему успешный дизайн создает такое будущее. Известный пример такого дизайна — iPhone. Думаю, не нужно объяснять, насколько он изменил мир.

1*V0UyTCVeYKUZG5SOIFMZtA“Вся ваша жизнь в кармане”. — Стив Джобс на презентации iPhone 3G, WWDC 2007

Как проектировать продукт?

На реальном примере: Как Airbnb запроектировали в свои продукты доверие

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

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

Поймите свою роль в масштабах всего проекта

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

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

С этой точки зрения, общение имеет особо важное значение для дизайна. Если вы работаете в команде, ваша задача убедиться, что каждый член команды способен понять и проникнуться вашей идеей от начала и до конца.

Определите проблему (или возможность)

Определившись со своим местом в команде, вы должны глубже погрузиться в проблему, над решением которой вы работаете.

Здесь легче сказать, чем сделать. Люди — достаточно нерациональные существа: Heuristic

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

Ниже вы найдете список вопросов, составленный на основании базы, которую внедрил Йон Лэкс (директор по дизайну в Facebook), когда я работала под его началом. Эти вопросы могут стать отличной стартовой площадкой, чтобы сфокусироваться на дизайне и убедиться, что вы решаете правильные (реальные!) проблемы:
— Какую проблему вы пытаетесь решить?
— Откуда вы знаете, что это реальная проблема? На основании каких данных/историй и т.п. вы думаете, что проблема реальна?
— Почему именно эту, а не другие проблемы, стоит решать? У вас ограниченные ресурсы и время — почему стоит потратить их на эту проблему?

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

1*AtmT5eIV7ZCpVSoImTw--w

Разработайте гипотезу

Отлично! Вы мастерски определили проблему. Теперь важно обозначить решение, которые и будет гипотезой, лежащей в основе итогового дизайна. Гипотеза должна напрямую соотноситься с проблемой и не должна предполагать, что исход дела предопределен (ко всем предположениям надо относиться скептически!).

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

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

Вот хорошая ссылка для начала: Picking the Right Metrics, Part 1: WTF is a Metric?
Когда выберете метрики, критически взгляните на успех, в том смысле, в каком вы его только что определили. Что или кто может помешать вам его добиться? Проанализируйте свои ресурсы, время, ценности и аудиторию.

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

1*LT-7xH7Osai4kB9ahEpLNQОсвещение и угол съемки играют огромную роль.

Сделайте гипотезу тестируемой

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

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

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

Рисунки/ вайрфреймы

Карандаш и бумага, Balsamiq, т.п.

Является ли ваше решение максимально простым? Какими путями можно добиться того же функционала, и где пришлось пойти на компромисс?

1*pIvSgzqGncSmCEttEJbdFQ

Высокоуровневые визуальные решения

PhotoshopSketch by Bohemian Coding (на картинке), IllustratorMS PaintMaya, т.п.

Как ваше решение вписывается в существующие системы и паттерны? Какие сигналы вы посылаете аудитории?

1*hD0zn96f8gqv1XyuJwqYbQ

Прототипирование

Code, Origami by Facebook, Framer.jsFlintoPixateKeynote, т.п.

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

1*0vClzbSwEnoj6IhynbJNVA

Дизайнеры часто оказываются очень глубоко вовлеченными в этот процесс, но вам следует тщательно планировать свое расписание и посвятить этому этапу правильное количество времени — не нужно создавать каждый интерфейс и элемент дизайна прямо сейчас. Однако, вам стоит выделить время и просчитать, что будет, если дизайн, скажем так, “сломается”. Это гораздо важнее, чем идеальные палитры цветов. Винс Спилмен отлично описывает ситуации, когда вашему дизайну может понадобиться план Б: The Nine States of Design.

Тестируйте гипотезу, наблюдайте за поведением, записывайте наблюдения

Все достаточно очевидно: запустите дизайн в реальный мир и наблюдайте, как подтверждаются ваши гипотезы по мере взаимодействия людей с дизайном. Вы можете не быть исследователем, но вы можете задавать вопросы и дать аудитории возможность выразить свое мнение. Эта статья от исследователя Airbnb дает несколько полезных советов и мыслей относительно проведения исследования: Embracing Uncertainty in UX Research

Мне бы хотелось подчеркнуть, что эти тесты не должны быть продуманы до мелочей (мы часто прототипируем при помощи бумажных вырезок и рисунков). Если можете, попробуйте максимально отразить реальность: аудиторию, контекст и т.п. Facebook Design создали несколько отличных инструментов, чтобы буквально поместить дизайн в разные руки.

1*MeTvJepHDGd8HbblMcBsvQВот вам фокус.

Более того, записывайте все, что найдете. Будьте систематичны и последовательны. Сконцентрируйтесь на том, что аудитория показывает, а не говорит вам.

1*rPjjFC_WHi0R3Zzyhdi2FQСистематический подход Airbnb к процессу бронирования — что изменилось? Где спад?

Совершенствуйте свой дизайн

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

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

1*RxgtcojCpaPJUJXrMZHiWAAirbnb до и после визуального редизайна. Какие картинки, такое и доверие.

Смойте и повторите

Имейте в виду, что метрики успеха, обозначенные нами ранее, не являются абсолютными — они фокусируются на “больше” и “лучше”, а не на конкретных волшебных числах. Это происходит потому, что дизайн никогда не бывает “готов” — что-то всегда можно изменить и улучшить. Это делает дизайнеров одновременно одними из самых оптимистичных и постоянно неудовлетворенных людей в мире
¯\_(ツ)_/¯.

Более того, это означает, что вы всегда должны думать, как улучшить свой дизайн. Определите, найдите, сделайте, измерьте, повторите.

1*cCjNZ5GIi1bqmUKtNXVp0wAirbnb в районе 2013 года (слева) и в 2015 (справа).

В завершении

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

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

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

1*3V2T_fhF1wGosJePGfpUeAПуть Airbnb пройден на <1%.

Заключительные мысли

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

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

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

Источник: medium

  • http://vk.com/id278830185 Юрий Пшеничников

    кошмар!