Для чего нужны пустые экраны на сайте и как с ними работать
Перевод материала иллюстратора компании Shopify Меган Робичод об инструментах для оформления пустых экранов.
В избранное
В избранном
Команда иллюстраторов Shopify — это я, Райан Коулман, Холли Шофилд и Эрин Монкриф. Нам ещё помогают Блейк Стивенсон и Алек У-него-нет-фамилии-в-slack-а-я-не-детектив.
Значительную часть своего успеха я всегда объясняла вниманием к деталям (читай — невротическим перфекционизмом). Поэтому мне было сложно понять, как распределять своё время, чтобы увеличить продуктивность работы.
Раньше я оценивала продукт, руководствуясь общей целесообразностью и качеством. Теперь я такое решение принимаю на основе сложных расчётов, исходя из количества пользователей — того, как долго они видят продукт и насколько глубоко он их способен впечатлить. Из-за этого пустые экраны оказываются в сложном положении: их видит лишь небольшой процент пользователей и всего несколько секунд.
Мы потратили много времени, решая, не оставить ли старые пустые экраны. Мне больно видеть два разных стиля иллюстраций в нашем продукте. Но если всего два процента пользователей увидят пустой экран с иллюстрациями в старом стиле, может они даже не заметят разницы, и стоит потратить время на что-то получше?
Несмотря на низкий интерес пользователей, мы решили пойти ва-банк с пустыми экранами и проработать каждый. По двум причинам: эффект и лоск.
Да, всего два процента пользователей увидят любой из этих пустых экранов, но эти два процента очень важны. Они — это новые пользователи, которые исследуют продукт и решают, хотят ли остаться. Они могут расстроиться, если столкнутся с трудностями на сайте и не поймут, что делать дальше.
Они не понимают функциональность продукта и как им пользоваться. Существуют разные критические моменты. По отдельности сложно оправдать затрату времени на каждый конкретный пустой экран, но в целом они важны.
Мы же не будем сообщать пользователю: «Что-то пошло не так, и мы не знаем, что именно, но мы нарисовали котика». Если мы готовы превратить этот негативный момент в позитивный с помощью реального обучения и понимания — надо это применять.
Внимание к деталям, последовательность и лоск очень важны для продукта. Они становятся основой для доверия. Они говорят о том, что мы работаем продуманно, тщательно и продолжим поддерживать пользователя, даже если он не является нашим основным клиентом. Пустой экран в старом стиле говорит пользователю о том, что мы сами отвергаем свой продукт.
Мы стремимся создать что-то новое и яркое, не заботясь о том, что уже создали. Это как заброшенный газон; как сломанное окно; как пицца, у которой съели всю начинку. Внимание к деталям имеет значение, потому что, когда мы показываем, что нам важны даже мелочи, люди доверяют заботу о более крупных вещах.
Как только мы решительно настроились на создание 39 (и это только начало) уникальных пустых экранов, мы получили дополнительную выгоду от больших объёмов работы. Так мы создали себе песочницу, на которой можем развиваться и отлаживать собственный стиль иллюстраций.
Для каждого иллюстратора это возможность внедрить свою личность, стиль рисунка и собственные идеи в Shopify. Мы также опирались на работы друг друга, когда переходили к следующему пустому экрану.
Стиль иллюстраций изменился, он больше не был решением одного человека, теперь это была командная работа. Мы могли разработать индивидуальный подход к каждой иллюстрации и смотреть на всю работу, как на единое целое. Одновременно стратегически мыслить о том, что мы хотим сказать как коллектив, и изучать мельчайшие нюансы того, как меняется тон индивидуальной иллюстрации.
Одна из текущих задач работы в Shopify — это попытаться уловить и кратко сформулировать, кто наш пользователь. Но это невозможно. Наши пользователи такие же разные, как снежинки. Мы уже насчитали девять типов личностей и это только приблизительное описание.
Каждый рассказ о становлении предпринимателя, о значении его дела — уникален. Пустые экраны позволили нам по-новому показать, как мы сопереживаем и понимаем, что это значит — быть предпринимателем.
Вместо того, чтобы пытаться подобрать краткое описание с помощью одной истории или типа личности, мы получили множество разных историй. Если смотреть индивидуально, то каждый пустой экран — это один снимок конкретного предпринимателя; вместе они представляют собой немалую работу, иллюстрирующую разнообразие среды, ежедневных задач, сложностей, возраста, пола, расы, контекста — предпринимательства.
Первый раунд
Первое, что мы сделали — создали сетку пустых экранов, мы были уверены, что сможем справиться с каждым. Это послужило нам вдвойне: во-первых, мы получили способ находить и заменять всё, что было в старом стиле иллюстраций (первый шаг по наведению лоска, к которому мы так стремились);, а во-вторых это дало нам время на обсуждение каждого пустого экрана.
Давление — это хорошо, а «мне нужно ещё 20 иллюстраций к завтрашнему дню, мне всё равно, какой у вас там часовой пояс» — это плохо. Мы решили, что лучше хорошо сделаем чуть больше 30 иллюстраций и не будем спешить, чем плохо сделаем все 39 картинок. И с тех пор мы получили прекрасный инструмент, который помогает поддерживать цельность и последовательность стиля иллюстраций в любой части Shopify —, но это тема другой публикации.
Когда была готова типовая иллюстрация, мы для начала попытались определить высокоэффективные и высокоприоритетные экраны. Оказалось, что это бесполезно. Первая отладка пустых экранов по большей части заключалась в том, чтобы создать историю и установить стиль иллюстраций. Мы попробовали определить, какими иллюстрациями следовало заняться в первую очередь, но это нам не помогло. Хотя мы всё равно это сделали.
Базовый стиль мы уже установили: фон, передний план, персонажи, цвета. Мы знали, что детали рисуем по-разному: изгибы, линии; здесь реалистичная одежда, а там она изображена шаблонно. Но первая версия — это лишь наброски.
Если иллюстрации совпадают по стилю, мы отправляли их заказчику. Большую часть своего времени мы тратили на то, что хотели донести, меньше времени уходило на то, как мы собирались это сказать. Главное, чтобы метафора была верной, стиль можно обновить позднее.
Второй раунд
Говорите сейчас или всегда рисуйте носы по-моему.
Мы запустили Polaris в первом раунде, похлопали друг друга по плечу, а потом сразу же разнесли всё в пух и прах. Суть второй отладки была в том, чтобы решить, как нам вместе двигаться вперёд. Неожиданно для себя мы пришли к согласию по поводу того, как рисовать ноги, потому что в целом это не просто маленькая деталь, это инструмент, который мы используем для поддержания последовательности по всему Shopify и у всех наших иллюстраторов.
Поэтому мы сделали то, что делает каждый хороший дизайнер — мы всё вывесили на стену.
Очень полезно видеть перед собой все работы. Обычно я не придираюсь и не стану говорить, что иллюстратор нарисовал три линии на обратной стороне кредитки вместо четырёх, или что работа сделана заливкой, а я хочу, чтобы это было нарисовано обводкой. Но если повесить всё на стену и подвергнуть комплексной критике, это поможет созданию экрана.
Здесь нет никаких «правильно» или «неправильно»; здесь нет места фразам вроде «у него лучше нарисовано, чем у неё»; важно соблюдать единый стиль экранов. Несогласованность сразу же выделяется, также заметны повторяющиеся элементы, которыми мы пользуемся, чтобы создать системность. Некоторые из них просто найти и исправить, например, дефекты светотени, кегль или «чёрт побери, как много оттенков фиолетового».
Другие характеристики: игривость, необычность, торжественность — сложнее выявить. Ни одна из них не может быть неправильной, просто они разные. А иногда приходится понять, что нельзя оставить оба экрана, выбрать один и двигаться дальше.
Нерационально использовать время на то, чтобы вернуться и обновить, например, ноги. Никто не заметит, что мы изменили руки, чтобы они были на десять процентов более натуральными. Чтобы создать эффективное руководство по иллюстрации, которое позволит вносить изменения в работы, имеет смысл возвращаться к пустым экранам и придирчиво разбирать их.
Изменения пустых экранов:
- изменили все ноги с двумя тонами на один тон и тени;
- изменили обводку на переднем плане на «чёрную» и добавили эффект round caps;
- изменили цвета рубашек на белый;
- удалили облака (слишком причудливые);
- добавили деталей в одежду (форма, тени, складки);
- увеличили детали, которые были толщиной в 1 pt, до 2 pt;
- изменили BG baseline до 6 pt;
- изменили перспективу на ногах на двухточечную перспективу;
- удалили тени на шеях;
- изменили обводку на 2/4/6 px (@ 2x);
- изменили фактуру дерева на менее интенсивную 20% прозрачность 2 px;
- изменили уши на более натуральные, лицо указывает вперёд;
- закруглили углы геометрических форм;
- изменили пропорции на более реалистичные;
- изменили руки на более натуральные.
После того, как мы нашли и обновили мелкие детали — ноги, руки, изгибы — всё ещё были несоответствия между некоторыми пустыми экранами. Они выглядят одинаково, они нарисованы одинаково, я ещё раз вернулась и удалила шнурки.
Но всё сводится к несоответствиям во мнении о Shopify. Где исходные условия Shopify? Мы можем быть в полном восторге, а можем быть хладнокровными, спокойными и собранными — в тональности Shopify есть и то, и другое. Но нельзя прыгать от радости и быть абсолютно равнодушным одновременно.
Иллюстрации, которые вы найдете ниже, находятся на противоположных концах спектра, и мы решили, что хотим остановиться где-то посередине. Нам нужна индивидуальность, но не нужен хаос. У предпринимателя довольно суматошный день, и наш нейтральный голос должен быть чем-то стабильным, успокаивающим и информативным, но он должен обладать гибкостью, чтобы присоединиться к празднованию, когда это будет необходимо.
Оба экрана сделаны в одном стиле, следуют единой линии. Мы могли оставить оба экрана и просто определять, в какой ситуации более приемлема выражаемая ими тональность. Абстрагируясь от самого персонажа, мы смотрели на то, какую историю рассказывает каждая иллюстрация.
В каждой иллюстрации есть начало, середина и конец; развитие действия, кульминация и спокойствие, после того, как сюжетная линия заканчивается. Вместо того, чтобы определять, как изображать каждого персонажа, мы определяли ту часть истории, которая содержала подходящую тональность, а также движение, то есть что именно ассоциируется с экраном — энергичность или стабильность.
Умеренно положительная ситуация
Эта тональность должна использоваться только в положительных ситуациях. Прежде, чем начать использовать положительную тональность, убедитесь, что продавец не столкнётся с большим количеством иллюстраций в такой тональности за короткий период времени.
Если слишком часто использовать восторженный тон, Shopify начинает казаться неискренним. Например, положительная тональность используется, чтобы отпраздновать вместе с продавцом — она как бы говорит продавцу: такие моменты не часто бывают, так что остановитесь на минутку, поздравьте себя.
В положительных иллюстрациях Shopify используются следующие инструменты:
- изображает кульминацию или напряжение истории;
- более насыщенная цветовая палитра;
- преувеличенные, энергичные позы персонажей;
- линии движения;
- конфетти.
Примеры: первая продажа, запуск магазина.
Умеренно положительная ситуация
Такую тональность можно использовать постоянно. Это моменты, где мы можем быть довольно игривыми, но не чрезмерно бодрыми. Это моменты определённо хороших новостей, но вместе они теряют свой эффект, и возникает риск, что они заберут на себя слишком много внимания, отвлекут от поставленной на данный момент задачи, если будут слишком громкими.
В умеренно положительных иллюстрациях Shopify используются следующие инструменты:
- изображается спокойствие в конце истории или процесс до развития действия;
- динамичные, энергичные, но не преувеличенные позы персонажей;
- спокойная цветовая гамма и один цветовой акцент;
- линии движения.
Примеры: юбилей, объявление о появлении новой функциональности.
Нейтральная ситуация
В иллюстрациях Shopify нейтральная тональность используется в моменты обучения, или когда надо представить контент очень просто. Это не объявление о запуске новой функции, но скорее объяснение функциональности, которая уже давно существует. Можно также использовать литературные приёмы (метафора, преувеличение, соположение), но в целом должно возникать ощущение тихого разговора.
В иллюстрациях Shopify в нейтральных ситуациях используются следующие инструменты:
- изображается спокойствие в конце истории или процесс до развития действия;
- спокойная цветовая гамма и один цветовой акцент;
- спокойные, стабильные позы персонажей;
Примеры: пустые экраны, иллюстрации, относящиеся к деликатным вопросам (например, денег).
Негативные ситуации
В иллюстрациях Shopify негативная тональность не используется, но иллюстрации используются в негативных ситуациях. Эти ситуации рассматриваются как возможность для обучения. Информация изображена буквально, прямо показывается то, что продавец должен знать, здесь же размещены рекомендации по следующим шагам.
В иллюстрациях Shopify в негативных ситуациях используются следующие инструменты:
- спокойная цветовая гамма и один цветовой акцент;
- персонажи не используются в негативных ситуациях, только объекты.
Например, пользователь не может использовать заглавные буквы.
А теперь применим это к нашим пустым экранам. Было неожиданно легко найти персонажей, которые подходили определённой ситуации. В будущем это дало нам инструменты, которые позволяли с лёгкостью менять тональность по всем точкам соприкосновения в Shopify.
Пользуясь знанием о выборе пустых экранов, мы можем легко передвигаться от продукта к маркетингу и обратно, не делая ни одного изменения в самом стиле иллюстраций.
От этого:
К этому:
Я хотела бы, чтобы это была история о том, как мы нашли три-четыре базовых элемента, которые представляют предпринимательство, сократили их до чего-то простого и снова встроили их в стиль иллюстраций.
Наша история не была настолько простой. Мы крали идеи друг у друга, потому что думали, что они работают. Мы сражались, держались своей позиции по носам, лицам и цветам. Мы тысячу раз спрашивали друг друга «а как насчет этого?», пока нам не удавалось найти решение.
Это был беспорядок. Но суть этого беспорядка в том, что когда вы делаете шаг назад, хорошая работа устоит.
Мы не гонимся за тем, что красиво, просто у нас есть чутьё. Мы не только находим рабочий продукт, но ещё выясняем, почему он работает. Совсем не важно, в каком порядке вы это делаете. Можно найти базовые элементы для начала работы или, наоборот, вытащить элементы из законченной иллюстрации, главное — потребности вашего продукта.
Остальные пустые экраны в Shopify можно посмотреть здесь.
#дизайн
© vc.ru
