Выстроить дизайн-процессы в стартапе — опыт основателя фонда Initialized Capital Статьи редакции

Конспект лекции Гарри Тена о том, почему важны эмпатия и пользовательские интервью, на какой стадии развития компании нанимать дизайнера и где его найти.

Переведено волонтёрами Y Combinator по-русски. При поддержке школы стартапов Russol. Цель инициативы — передать русскоязычному пространству опыт создания и развития компаний вроде Airbnb, MixPanel или Twitch. Волонтёры также проводят бесплатные просмотры переведённых лекций в инкубаторах, коворкингах, и университетах Пензы, Саратова, Кишинева, Астаны и других городов. Участвовать в просвещении, получить знания и перенять опыт.

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

Мне вспоминается компания Leica. Продукты компании красивы и функциональны. Благодаря хорошей функциональности камеры компании были лучше конкурентов: в восемь раз легче и в десять раз дешевле .

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

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

Одна из книг, которую хочется порекомендовать, — «Дизайн повседневных вещей» Дона Нормана. У него целая глава посвящена потрясающе красивым дверям, которые не знаешь, как открывать. Это одна из абсурднейших ситуаций.

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

О чём думают пользователи? Что они чувствуют? Представьте себя на месте того, кто впервые видит ваш продукт.

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

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

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

Если ты не знаешь, кто твой пользователь, какая у него проблема, ты рискуешь сделать что-то подобное:

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

А дизайн ради дизайна — это не дизайн, это искусство. Ничего плохого в искусстве нет, но мы здесь не за этим.

Существуют различные виды дизайна. Их не меньше, чем вещей, нужных человеку.

• Архитектура абсолютно точно одна из форм дизайна.
• Ландшафтный дизайн. Как человек может попасть в определённое место, как понимает, куда идти.
• Упаковка. Что я чувствую, когда нахожу у двери подарок? Зачем нужна подарочная коробка?
• Дизайн продукта. Что за проблему решает продукт? Кому он предназначен?
• Дизайн взаимодействия. Как это работает?
• Визуальный дизайн. Как это выглядит?

Поставьте перед собой проблему, а после задайтесь вопросом: кто те люди, сталкивающиеся с ней?

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

И это касается даже b2b-компаний, ведь там работают не только руководители, но и рядовые сотрудники. Нужно подумать, почему они работают на эту компанию, что ими движет.

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

Благодаря тому, что вы «расписываете» типы пользователей, сразу видно, для кого создаётся продукт. Нужно внимательно следить за нуждами.

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

Подумайте об этом, как о спринте: одна-две недели, чтобы найти все баги. Так вы приблизитесь к первому приоритету.

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

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

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

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

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

Ещё один момент, с которым все сталкиваются при разработке, — объём работы, качество продукта и время.

• Объём. Количество взятой работы.
• Качество. Нельзя охватить его с помощью требований, о нём судят пользователи продукта. Также сюда входят ошибки и элементы, которые не работают.
  
• Время. Вы можете сделать функциональность качественной, без ошибок, но тогда придётся сдвинуть сроки на пару недель. Если вы возьмёте большой объём работы, то не успеете всё сделать качественно, в таком случае пользователи получат продукт с массой ошибок.
  

Ещё одна причина, почему важна приоритизация, — без неё вы можете сделать множество странных и неуместных решений. Бывало ли у вас такое, что, настраивая iPhone или другое устройство, вы думали: «Кто и зачем это сделал?» Скорее всего, разработчики просто не стали доделывать продукт до конца. Они просто махнули рукой: «А давайте выкатывать так».

Это большая ошибка. Без приоритизации падает качество, и продукт может провалиться.

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

Можно, скажем, использовать сервис схем и диаграмм OmniGraffle, но есть и другие платформы. На этом этапе необходимо определиться с текстом, призывами к действию, последовательностью экранов. Пока не нужно думать о цвете, о шрифте, об итоговом внешнем виде. Вам даже не нужно сильно переживать о макете.

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

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

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

Суть командного языка в том, чтобы люди выполняли всё сказанное вами. И нужно действительно говорить с ними. Я почти уверен: многие из вас совершают одну известную ошибку на сайте или в дизайне какого-либо продукта. Эта ошибка — пассивный залог. Заходя на сайты большинства крупных компаний, вы увидите: они написаны в пассивном залоге.

Например, сайт Microsoft. Компания может так делать, потому что она крупная. У неё есть специалисты, которые продадут продукт, и огромный капитал. Но вы как стартап не можете себе такое позволить. И всё, что вы пишете, должно быть прямым, призывать к действию, быть очень понятным.

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

Хочу показать ошибочный подход, с которым начинающие дизайнеры или те, кто занимается дизайном самостоятельно, всё время сталкиваются. Они постоянно пытаются сделать что-то невероятно новое. Не советую так поступать на этапе проектирования взаимодействия.

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

Есть множество вещей, которыми вы уже пользовались. И вы можете использовать их в своём продукте. Не нужно быть новатором, вам нужно что-то, что максимально быстро приведёт людей в нужное место.

С помощью него вы доносите до пользователя самое важное на визуальном уровне. Какие эмоции вы хотите пробудить? Как пользователи должны себя чувствовать?

Хочу добавить: давайте избегать украшательств. Главное — определиться, какую информацию вы доносите. Попробуйте посмотреть на один из ваших макетов и представить, что будет, если вы удалите один из элементов. Сюда входит входит всё: картинки, поля, строки и так далее. Если их удалить, будет ли заметно?

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

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

Есть метод, который я называю «беглый тест». Попробуйте пробежаться глазами по сайту или мобильному приложению. Вы не можете уловить детали того, что на странице, но понимаете основные формы. Не имея возможности прочитать текст, вы знаете, что есть что-то, что зацепило глаз, например сильный контраст или широкий шрифт на странице.

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

У вас есть страница регистрации.

Увидев её, пользователь скажет: «Почему регистрация здесь? Это часть создания аккаунта? Не похоже, больше выглядит как часть чего-то другого».

«А вот так гораздо лучше».

Это очень простой принцип, который обязательно учитывать. Если вы возьмете несколько подобных концепций, у вас получится визуальная иерархия. И тут в дело вступает сетка.

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

Это основа в создании блоков с возможностью делать визуальное проектирование в своём собственном стиле.

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

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

Сперва определите, что вам нужно показать на странице, а затем расставьте текст, поля и так далее, используя сетку. Связанные объекты необходимо размещать рядом, укажите заголовки, не забывайте про контраст. 90% времени у вас уйдёт на выбор подходящей сетки.

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

Также вам не нужно заполнять всё пространство. Пустота полезна, например, она позволяет обратить внимание пользователя на какой-либо элемент.

Как только у вас появился макет, можно начать тестирование. Распечатайте макет и покажите тем, кто ещё его не видел. Задавайте открытые вопросы, например: «Вы на этой странице, чтобы сделать то-то. На что вы сейчас смотрите? На что собираетесь кликнуть?» Так вы проверите, работает ли тот или иной элемент.

Самый краткий ответ: на предпосевной стадии вы можете заниматься дизайном вместе с сооснователем, на посевной и, возможно, перед раундом А вам понадобятся консультации дизайнера.

Перед началом раунда A, скорее всего, у вас не будет элементов интерфейса, которые увидят пользователи. Но уверен: на этом этапе понадобятся API-дизайнеры. Это очень важно, иначе при создании API можно что-то потерять. И вот здесь уже можно начинать задумываться о найме первого дизайнера.

К началу раунда B стоит подумать о том, как собрать полноценную команду. Когда у вас работают 10–15 разработчиков и вы только нанимаете первого дизайнера, ему будет некомфортно. Он привык работать в команде с другими дизайнерами.

На Dribbble есть отличные портфолио, многих можно найти на LinkedIn. Behance, Krop — это сайты, которые вам следует посмотреть. Обратите внимание на компании в вашей области, которые создали качественный дизайн. Можно начать с контакта с ними. У AIGA (Американский институт графического искусства) есть небольшая база данных дизайнеров.

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

Это, скорее всего, будут люди со всего мира: Филиппин, Таиланда, Восточной Европы, Азии, США. Многие из них невероятно талантливы и только начинают карьеру дизайнера.

Также при найме не стоит забывать о рекомендациях. Вот ещё несколько сайтов, где можно найти дизайнеров: Viget и Plato.

Сперва проведите собеседование по телефону. Неважно, насколько хорошо портфолио, важнее умение общаться. Телефонное собеседование — хорошая возможность проверить коммуникативные навыки.

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

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

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

Но всё это только рекомендации. Есть множество других способов собеседования дизайнеров.

Также есть книги по дизайну.

Конечно, список не полный, но если прочитаете их, то, скорее всего, станете неплохим дизайнером.

А вот полезные ссылки:

• Taste for Makers;
• How to make your first wireframe by InVision;
• InVision Blog;
• UXPin Studio;
• UI Patterns.

На ней вы можете рассказать свою историю. Все пытаются копировать Microsoft и Google, чтобы показаться крутыми. Но здесь важнее просто рассказать о том, чем вы занимаетесь. А также быть реальной компанией, до которой можно достучаться — то есть отвечать на электронные письма и так далее.

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

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

Общественная онлайн-школа стартапов Russol дважды в год проводит публичные бесплатные лекции, где на примере основателей компаний YouDo, Kabanchik.ua, «Флакон», Leta, Cinemood узнаете, как находить идеи, первых клиентов, создавать продукт, привлекать инвестиции. Школа ищет экспертов, спикеров и партнёров на 2019–2020 годы, чтобы делиться своим опытом со слушателями. Участие на добровольных началах. Передать свой опыт другим.

#russol