О дизайне и эмпатии

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

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

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

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

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

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

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

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

О пользовательских интервью

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

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

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

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

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

О приоритетах

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

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

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

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

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

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

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

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

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

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

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

Дизайн взаимодействия

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

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

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

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

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

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

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

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


О создании нового на этапе проектирования взаимодействия

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

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

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

Визуальный дизайн

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

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

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

Контраст

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

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

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

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

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

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

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

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

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

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

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

Создание макета

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

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

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

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

Примечание от автора публикации: Я Юрий, основатель некоммерческой школы стартапов RUSSOL, координирую инициативу по переводу курса лекций школы стартапов Y Combinator. Вместе с волонтерами и фрилансерами мы перевели и субтитровали 36 часов видео о создании стартапов, начиная с поиска идеи и заканчивая инвестициями и международными продажами. Материалы 2018 года тут, 2017 года — там.

Миссия RUSSOL — хотим, чтобы на постсоветском пространстве рос и развивался средний класс. И мы помогаем начинающим предпринимателям открытыми образовательными лекциями, митапами, конференциями, где рассказываем как найти идею, создать продукт, привлекать деньги и выходить на международные рынки. Как часть инициативы мы начинаем переводить письма Джефа Безоса акционерам Amazon.

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

Материал опубликован в VC