107. Дизайн без дизайна

В этом выпуске рассылки Проектората: статьи об увеличении конверсии сайта, интерфейсах SCADA-систем, выживании в первый месяц работы в заграничной компании, обсуждении начала исследования с заказчиком, визуальной культуре в дизайне интерфейсов, 5-секундном тесте, а также видео Антона Шнайдера о дизайне без дизайна.

Увеличение конверсии сайта

В Autooptimize собрали 43 способа увеличить конверсию сайта. Вот некоторые из них:

  1. В заголовке примерное количество замените на конкретное. «Узнайте, как этот блог вырос до 10471 подписчиков всего за 12 месяцев». Конкретное количество звучит правдоподобнее и не выглядит искусственным;
  2. Призыв к действию («Добавить в корзину», «Зарегистрироваться») разместите над видео, а не под ним. Кому не нужны доводы в пользу вашего продукта, тому будет проще сделать следующий шаг (зарегистрироваться);
  3. Не показывайте форму заказа, пока пользователь добавляет товары в корзину. Так каталог будет выглядеть менее шумно. Показывайте её после нажатия на «Перейти в корзину». Так пользователь выполняет небольшое действие на начальном этапе покупки — это увеличивает вероятность последующего действия;
  4. Разместите отзывы под рекламным видео. Отзывы уменьшат сомнения, которые останутся после его просмотра;
  5. Добавьте надписи «Бесплатная доставка», «100% безопасность», «Гарантия возврата денег», печать доверия Verisign и другие элементы, которые успокаивают пользователя во время покупки;
  6. Измените цвет и форму кнопки с призывом к действию. Протестируйте различные варанты;
  7. Если есть бесплатная пробная версия продукта, разместите большую заметную кнопку «FREE TRIAL». Часть пользователей просто хочет двигаться вперёд, чем проще это сделать, тем лучше;
  8. Попробуйте поменять цвет заголовка на красный, даже если он не будет соответствовать вашему дизайну;
  9. Если предложение ограничено по времени, добавьте таймер обратного отсчёта.

Интерфейсы SCADA-систем

Евгений Честнов написал об интерфейсах SCADA-систем.

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

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

  1. На объекте всегда горят сроки. Создание системы диспетчеризации — последняя стадия, которая начинается, когда все инженерные системы прошли пусконаладочные работы;
  2. Зачастую этим занимается программист. Система диспетчеризации — 12 тысяч переменных и 10 рабочих дней только на то, чтобы привязать их к элементам интерфейса;
  3. Среди заказчиков распространено мнение, что пользователям таких систем красивые картинки не нужны, и нет понимания, что суть такого интерфейса не в картинках.

Евгений показал примеры интерфейсов и рассказал, как развивает их с учётом всех ограничений.

Первый месяц в зарубежной компании

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

  1. Задавайте много вопросов, уточняйте значения терминов и аббревиатур. Не бойтесь показаться неопытным специалистом. Записывайте ответы. Узнайте, где искать ответы на вопросы, чтобы потом спокойно изучить детали;
  2. Не стесняйтесь своего английского. Если есть барьер на личном уровне, договоритесь с кем-нибудь из коллег вместе сходить на обед и обсудить нерабочие темы;
  3. Просите обратную связь как можно раньше. Возможно, вы не знаете чего-то важного и взялись за решение проблемы не с той стороны. Спрашивайте совета у коллег, учитесь у них;
  4. Составляйте список дел на день и неделю, отслеживайте время, которое тратите на выполнение той или иной задачи;
  5. Выполняйте обещания. Пообещали что-то сделать к определённому дню, сделайте это в срок (а лучше раньше);
  6. Готовьтесь к встречам. Заранее отправляйте участникам встречи повестку, чтобы они могли подготовиться. Знайте, что вы хотите решить или согласовать на встрече. Фиксируйте, что обсудили и решили и какие шаги предстоят;
  7. Проводите воркшопы, чтобы вовлечь команду в сбор знаний о продукте и генерирование идей.

Обсуждение начала исследования с заказчиком

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

Обсуждать надо с тем, кто принёс задачу, кому важен результат и кто планирует с ним дальше работать. Договорённости лучше зафиксировать. На некоторые вопросы у заказчика может не быть ответов — обсуждайте и решайте вместе.

  1. Цель исследования: какой результат заказчик хочет получить и как им воспользоваться, с какими вопросами пришёл, как поймёт, что результат получен;
  2. Сроки: сколько исследование может занять, когда начнётся, есть ли у заказчика дедлайн;
  3. Что уже известно: результаты других исследований, знания бизнес-процесса и его участников, описанная аналитика и статистика;
  4. Что известно о пользователях и сценариях, чтобы точнее сформировать выборку для исследования;
  5. Гипотезы для проверки. Что будет, если гипотеза не подтвердится?
  6. Взаимодействие с заказчиком: насколько глубоко он хочет погрузиться в процесс, в какие моменты будет синхронизация (например, ревью скрипта, работа с выборкой), в каком виде удобно воспринимать результат исследования.

Визуальная культура в дизайне интерфейсов

Матвей Правосудов написал о визуальной культуре в дизайне интерфейсов.

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

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

Вкус — наше мерило красоты. Он помогает за мгновение сказать, плохая картинка или хорошая. Его можно тренировать, рассматривая много картинок и пытаясь анализировать, что в них хорошего.

У людей разная «разрешающая способность». Когда вы создаёте макет, в какой-то момент вкус отказывает — вам кажется, что макет хороший, дальше нужно нести арт-директору. У него глаз сильнее намётан, он замечает косяки и прописывает правочки.

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

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

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

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

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

Дизайнеры придумали проверять вёрстку самостоятельно, чтобы найти недочёты (в том числе в дизайне). У них проверка получается быстрее, им не нужно сравнивать вёрстку и макет: все косяки видны сразу.

Принцип Вижуал Перфект — важно не столько совпадение вёрстки и макета, сколько красота вёрстки в результате.

5-секундный тест

Лена Бородина написала о 5-секундном тесте для проверки дизайна.

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

Покажите респонденту изображение одного или нескольких экранов на 5−10 секунд и попросите описать внешний вид продукта. Предложите выбрать эпитеты из заготовленного списка или придумать свои. Например, не более 3 эпитетов.

Провести тест можно с помощью сервисов UsabilityHub и Five second tests или в личном разговоре с респондентами.

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

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

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

Дизайн без дизайна

Антон Шнайдер рассказал о дизайне без дизайна и показал много примеров.

Для документалки о русском дизайне (5 минут):

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

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

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

Подробнее в докладе «Дизайн без дизайна» (35 минут):

Дизайн без дизайна — ты не делаешь дизайн, и он всё равно есть, но он не так сильно торчит.

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

Когда вещи сделаны из физических предпосылок, они такие почему-то, они друг с другом круто сочетаются.

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в UX Notes ВКонтакте.)

Рассылка Проектората × UX Notes

Опечатка? Выделите её и нажмите кнопки Control и Enter.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.

Теперь электронную версию можно купить и читать на Литресе.