Чему вас не научат в школе дизайна: узнайте об этом у короля Сидхарта
Опубликовано: 2021-04-03Учебные программы университетов довольно сильно структурированы. Вы делаете шаг 1, затем шаг 2 и так далее, и на каждом этапе пути есть привратники, — сказал король Сидхарт на TMS2021.
Очень сложно понять, что будет работать в дизайне на коммерческой основе. Но разбивка процесса создания выполнимых проектов на три вопроса помогает
Давая аудитории обзор того, что означают интерфейс и серверная часть, Сидхарт объяснил необходимость понимания различных ролей, которые играют заинтересованные стороны при создании продукта.
Срок службы технологии, используемой в промышленности, опережает университетские учебные программы быстрее, чем когда-либо прежде. Не то чтобы университеты не знали об этой проблеме, но они мало что могли с этим поделать. Учебные программы требуют некоторого времени, чтобы быть переработанными, и к тому времени, когда они вступают в силу, они уже начинают терять свое преимущество. Поэтому университеты в основном ограничивают свои учебные программы базовыми основами.
«Некоторый опыт приходит только из отрасли, когда вы там работаете», — говорит Кинг Сидхарт, отвечающий за дизайн, UX и продукт в Headout. Выступая на The Makers Summit 2021 , Сидхарт затронул проблемы, с которыми дизайнеры сталкиваются в реальной рабочей среде, познакомив аудиторию с 3 критически важными аспектами разработки и дизайна продукта, а именно: как измерять дизайн, как создаются продукты и как работают системы проектирования. должен быть расширяемым.
Моделирование реальной рабочей среды
Цвет, типографика, макеты, микровзаимодействия, тени, анимация и визуальная коммуникация — это то, чему легко научить в школе дизайна, — сказал Сидхарт на захватывающем занятии, которое показало один из самых высоких уровней вовлеченности аудитории. Эти темы были тщательно изучены, и в учебную программу уже включен огромный объем работы. Но проблемы, с которыми в отрасли сталкивается дизайнер, носят достаточно динамичный характер. Нельзя ожидать ясности в тот момент, когда проект начинается в реальной жизни. Учебные программы университетов довольно сильно структурированы. Вы делаете шаг 1, затем шаг 2 и так далее, и на каждом этапе пути есть привратники, и вы можете двигаться вперед только тогда, когда закончите эти шаги в порядке», — добавил Сидхарт.
Трудно подражать бизнес-сценариям в условиях школы дизайна, потому что маркетинг, разработка, поддержка клиентов, продажи — все они участвуют в процессе проектирования. Дизайн имеет свои последствия с момента, когда клиент начинает взаимодействовать с продуктом, до момента привлечения пользователей бизнесом.
«Компания — это не бесконечный ресурс. Где бы вы ни работали, у них ограниченное время, ограниченные деньги и ограниченные инженеры, и поэтому вы должны расставлять приоритеты и выбирать свои битвы, и опять же, что не может быть подражать в колледже » , - прокомментировал король Сидхарт. Оптимизация между перспективами бизнеса и пользовательским опытом, обратной связью, последствиями решений, принятых другими командами, трудно подражать в среде колледжа.
Он также заявил, что конкретные проблемы, с которыми можно столкнуться на работе, трудно предвидеть во время обучения в школе дизайна. «О, это потрясающе выглядит, захватывающе и все такое, но изменит ли это бизнес? Откуда мы знаем, что пользователя это действительно волнует, и возможно ли это вообще технически? Будет ли масштабироваться? Что, если дизайн сломается, если кто-то внес быстрое исправление или кто-то внес непреднамеренное изменение? Как мы измеряем влияние? Нужно ли нам проводить ручное тестирование?» — спросил король Сидхарт.
Очень сложно понять, что будет работать в дизайне с коммерческой точки зрения, но Сидхарт помог аудитории, разбив процесс создания осуществимого дизайна на три вопроса:
- Как вы измеряете свой дизайн?
- Как строятся конструкции инженерными группами?
- Как масштабировать свои проекты?
Мы погружаемся в них глубже с простыми примерами впереди.
ТРАНСЛЯЦИЯ СЕССИИ ЗДЕСЬ
Измерение дизайна
Дизайнеры хорошо разбираются в методах исследования, но когда дело доходит до данных, большинству из них трудно их понять, заметил Кинг Сидхарт. Но как вообще выглядят данные для дизайнеров?
Допустим, у нас есть целевая страница с описанием вашего предложения и призывом к действию. У него также есть резервная кнопка CTA под названием «узнать больше», потому что не все люди сначала нажмут кнопку «купить сейчас». Чтобы проанализировать эффективность дизайна в этом случае, мы используем аналитику на основе событий. В этом случае загрузка страницы и нажатие кнопки будут событиями, а текст кнопки, цвет кнопки и атрибуты устройства, такие как тип устройства, ОС, браузер, IP-адрес, местоположение и т. д., будут свойствами.
Чтобы помочь нам зафиксировать эти события и свойства, можно использовать профессиональные программные решения, такие как Mixpanel и Amplitude, которые также являются спонсорами саммита производителей 2021. Они поставляются с некоторыми свойствами по умолчанию, такими как атрибуты устройства, упомянутые выше, готовые к использованию и настраиваемые. свойства, которые помогают правильно настроить пользовательскую историю для отдельных случаев.
Кроме того, эти инструменты также помогают нам понять ряд шагов, которые пользователи предпринимают, чтобы достичь желаемого призыва к действию. И эти отдельные события также могут быть помечены желаемыми свойствами и проанализированы, чтобы увидеть, на каком этапе пользователи уходят. Сидхарт представил идею воронок. Воронки в основном отображают пользователей на каждом этапе пути, пока они не предпримут желаемое действие.
Затем мы можем использовать эти данные для оптимизации нашей целевой страницы. Различные KPI и оптимизации для одного и того же также будут здесь. Например, процент отказов в приведенном выше примере говорит нам, сколько пользователей, на которых была нацелена маркетинговая кампания, купили продукт.
Рекомендуется для вас:
Эти метрики помогают нам дополнительно исследовать, соответствует ли дизайн результатам, и помогают нам принимать решения, которые могут повысить ценность продукта. Лучше, чтобы дизайнеры знали, как понимать и интерпретировать аналитику, чтобы обнаруживать проблемы и проверять решения. Потому что данные чрезвычайно ценны и очень много говорят о поведении пользователей. Это помогает нам понять взаимосвязь между различными типами данных о производительности и качественными данными, чтобы получить полную историю пользователей.
Факторинг проектирования для дизайна
«Столько дизайнеров будут создавать удивительные проекты, только в конце концов инженеры откажутся от них, заявив, что это невозможно», — заметил Сидхарт. Поэтому чрезвычайно важно понимать, как создаются продукты, чтобы решить многие вопросы осуществимости на ранних стадиях.
Давая аудитории обзор того, что означают интерфейс и серверная часть, Сидхарт объяснил необходимость понимания различных ролей, которые играют заинтересованные стороны при создании продукта.
Проще говоря, интерфейс — это часть приложения, обращенная к пользователю, и пользователи могут с ней взаимодействовать. Бэкэнд (или «серверная сторона») — это часть веб-сайта, которую никто не может видеть. Он отвечает за хранение и организацию данных, а также за то, чтобы все на стороне клиента действительно работало. Backend заботится об аутентификации пользователей, платежах и автоматизирует бизнес-логику. Веб-сайты портфолио дизайнеров в основном создаются с использованием технологий внешнего интерфейса, не имеющих особого отношения к серверной части.
Сидхарт привел пример приложения Twitter, которое помогает аудитории лучше визуализировать эти идеи. Front end и back end, также являющиеся синонимами клиентской и серверной сторон, постоянно взаимодействуют друг с другом через Интернет. Понимание того, что Интернет может быть ненадежным и что в большинстве стран развивающегося мира нет доступа к интернет-скоростям, к которым мы привыкли, может очень помочь при разработке опыта для пользователя.
Когда приложение Twitter загружается в первый раз, можно увидеть скелетное состояние приложения. Это убеждает пользователя, что приложение работает. Но если пользователь просматривает приложение во второй раз, он его не увидит, так как браузер или устройство уже закешировали необходимые файлы для более быстрой загрузки приложения. Тайник — это временное локальное хранилище, которое чем-то похоже на хранение необходимых предметов в местном продуктовом магазине, а не непосредственно у фермера . «Это экономит время при приготовлении пищи. Серверы CDN делают то же самое для вас. Хотя вам все равно придется готовить, время, необходимое для получения ингредиентов, будет сведено к минимуму», — добавил Сидхарт.
Тем временем устройство запросило бы данные вашей учетной записи с серверов. Эти данные будут включать людей, за которыми вы следите, их твиты и временную шкалу, которую вам покажет Twitter. У вас не будет флотов, которые будут отображаться заранее, поскольку приложение отдает приоритет определенному набору информации через API, чтобы вовремя отобразить, что является обязанностью внешнего интерфейса, чтобы вы не разочаровались и не закрыли приложение.
Думайте об API как о людях, которые хранят информацию, необходимую для выполнения своей работы. Некоторые предоставят вам информацию довольно быстро, а некоторые не торопятся. Приложение не может заблокировать свой путь, ожидая поступления данных, а затем отображая их на экране. Поэтому все это происходит асинхронно. Части приложения отображаются по мере поступления данных. Поэтому дизайнерам важно понимать это узкое место и учитывать функцию времени при проектировании», — добавил Сидхарт.
Эффекты медленной загрузки страниц очень хорошо задокументированы. Пользователи с большей вероятностью уйдут с целевой страницы, если она не оптимизирована для скорости. Пользователи могут обнаруживать задержки порядка 1/10 секунды в соответствии с NN Group, которая приводит основные правила человеческого восприятия времени. Таким образом, эффекты медленной загрузки страниц довольно мгновенны. Постепенное улучшение скорости окупается.
Лучший способ понять эти идеи — использовать свои дизайнерские сверхспособности, такие как эмпатия. Вы можете развернуть ментальную модель, в которой передняя и задняя части являются людьми и разговаривают друг с другом, чтобы выполнить работу.
ТРАНСЛЯЦИЯ СЕССИИ ЗДЕСЬ
Масштабируемые системы проектирования
«Вам нужно понять, как работает инженерия, чтобы в конечном итоге прийти к системам», — объяснил Сидхарт. По его словам, некоторые проблемы с осуществимостью дизайна можно было бы решить с помощью хаков, но это повышает вероятность того, что эти исправления дизайна со временем исчезнут. Вот почему Сидхарт уделяет особое внимание дизайн-системе.
«Пользовательский интерфейс выглядит простым, потому что это не так. Дизайнеры тратят бессчетное количество часов на разработку пользовательского интерфейса. Чтобы вам было легко со всеми скрытыми сложностями», — сказал Сидхарт, рассказывая аудитории о важности систем проектирования и о том, как даже старшие дизайнеры не понимают, что их системы обречены на провал.
Он привел пример историй из Instagram, чтобы лучше понять дизайн-системы. Обычно можно сказать, что истории наверху — это просто серия кругов, не понимая, как эти круги, которые также можно бесконечно прокручивать, отображают различные действия пользователя и выбор системы.
«Легко чертить круги и делать их равноудаленными. Проектирование с учетом состояний делает систему расширяемой», — добавил он, рассказывая , как он и его команда в Headout думали об идеях состояний и вариантов для компонентов пользовательского интерфейса еще до того, как Figma недавно представила функцию для управления ими и их создания.
Теперь, как пользователь, вы можете сделать различные выборы в отношении историй. Вы можете создать новую, посмотреть истории других людей или зайти в Instagram в прямом эфире. Существует также определенная логика пользовательского интерфейса, о которой позаботились за вас. Например, истории, которые вы смотрели, можно пересматривать, пока они не станут доступны в конце верхней прокрутки. Там может быть несколько жизней, которые также должны быть представлены.
Выбор, сделанный пользователем в этих случаях, является состоянием элемента, таким как видимые и невидимые состояния историй, а выбор, навязанный системой, представляет собой вариации, например, жив ли кто-то, смотрели ли вы свою собственную историю или нет.
Есть также аспекты моушн-дизайна, включенные в истории: когда вы нажимаете на любую из историй, которые вы еще не смотрели, появляются красные точки, которые вращаются по кругу при загрузке историй. Эти взаимодействия настолько плавны, что мы их даже не замечаем.
В Instagram также есть своя философия дизайна и руководства по стилю. Логика пользовательского интерфейса также является частью самой дизайн-системы. Например, всякий раз, когда пользователь вводит текст в поле ввода, в некоторых случаях требуется проверка ввода. Постоянный поток сообщений об ошибках, когда пользователь печатает, слишком раздражает. В этом случае команда инженеров должна быть на борту с логикой потока взаимодействия, чтобы они правильно воспринимали взаимодействие с пользователем. Кроме того, в системе дизайна необходимо учитывать локализацию контента для новой демографической группы пользователей. Учет всех упомянутых выше идей делает дизайн-систему по-настоящему масштабируемой.
Независимо от того, задает ли он вопросы на основе данных, которые открывают идеи, выводящие продукт на новый уровень, или говорит на языке инженеров, чтобы оптимизировать дизайн для повышения производительности, а затем сделать продукт действительно масштабируемым, эти навыки, безусловно, необходимы дизайнеру. набор инструментов, чтобы поднять свою карьеру на новый уровень.