Дизайн на грани UX. То, о чем редко пишут.

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

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

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

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

Но бывают и клинические случаи, когда ваши доводы бесполезны. Жизненный опыт клиента заставляет отвергать логику. Клиент попросил сделать надпись зеленым на красном фоне? Дизайнер плачет всю ночь и пытается аргументировать свой логический выбор того или иного приема подачи информации, но клиент отвергает логику дизайнера, потому что его опыт важнее. Если вы не можете обучить клиента, то придется делать то, что от вас требуют. Менеджеры очень часто не умеют обучать клиента и не допускают этого со стороны дизайнера, что ведет к плачевным результатам: дизайнера обвиняют в отсутствии квалификации и нежелании выполнять свою работу, а клиент переводится в ранг муд***в.

Также, вы скорее всего работаете не один, а в команде. Давно известно, что небольшие, но правильно подобранные коллективы справляются с задачей лучше всего. И способности всего коллектива не равны способностям каждого её участника, множителем возможностей коллектива является сплочённость и социальные связи внутри коллектива. Группы с большей «социальной чувствительностью» показывали наилучшие результаты. Группы, в которых доминирует индивид, всегда менее сплочены и менее эффективны (театр одного актера). Учтите, что более эффективными оказывались те коллективы, в которых были женщины, так как женщины имеют куда большую «социальную чувствительность».

Автоматизация работы, или «сделай это скриптом». Я многое автоматизировал: подготовку к печати, обработку фотографий, нарезку графики. И понял, что автоматизация не есть самоцель. Пытаться что либо автоматизировать нужно лишь тогда, когда это оправдано уменьшением загрузки дизайнера, уменьшением допускаемых ошибок, увеличением производительности дизайнера, добавлением новых возможностей.

Общую концепцию грамотной работы мы рассмотрели, давайте узнаем чуть больше про способы сделать своих клиентов богаче. Как подобрать образ для продажи? Хороший дизайнер знает, что эмоции по большей части персонализированы и для каждого человека ассоциируются с образами, понятными лишь ему одному. Не у всех красный цвет ассоциируется с сексуальностью, а белый с чистотой. Универсальных 100% работающих на всех физиологических методов влиять на эмоции через зрение не существует, но использовать общепринятые правила необходимо, так как они покрывают как минимум большую аудиторию.
Тут важно вспомнить про наше животное начало. Не смотря на то, что среднестатический человеческий индивид сидит на паре «безобидных» лекарств и любит строить логические цепочки, эмоции у нас по-прежнему преобладают над разумом. Человек это животное. В ходе эволюции, наш мозг получил «три слоя» для взаимодействия с миром: первый это логическое мышление, второй (средний) отвечает за эмоции, третий это самый старый, отвечает за базовое выживание (еда, продолжение рода, безопасность). Самый старый, третий, имеет приоритет над остальными «слоями». Вспомните пирамиду Маслоу, про которую многие знают из курсов по пикапу. Третий слой мозга это основа пирамиды: еда, секс и опасность. Это самые сильные факторы влияния на человека, люди чаще всего в течение дня думают: «Могу ли я это съесть?», «Могу ли я с этим заняться сексом?», «Способно ли оно причинить мне вред?». Это настолько частый процесс, что он давно работает в автоматическом режиме.

Piramida_potrebnostey_Maslou1

Третий слой широко использовался признанными мастерами маркетинга: Стив Джобс просил делать дизайн вкусным, чтобы хотелось его «лизнуть», таким и вышел интерфейс Aqua в Mac OS X. Дизайн Apple правда хочется облизать. Это отсылка к еде.

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

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

Итак, вспомнили про пирамиду Маслоу, выбрали картинку, написали краткий посыл и текст описания. Отличная рекламная листовка у вас готова. Какова функция этой листовки? Либо информационная, либо убеждающая. Все, что не относится к этим двум целям, смело можно назвать мусором и убрать из макета.

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

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

Немного чертовски важных основ: закон Фиттса гласит что «время, требуемое для позиционирования на какой-либо элемент есть функция от расстояния до этого элемента и от его размера». Более просто: чем больше объект и ближе к курсору мыши, тем быстрее человек на элемент щёлкнет. Закон Фиттса не представляет ценности без закона Хика. Закон Хика гласит, что время реакции при выборе из некоторого числа альтернативных сигналов зависит от их числа. Более просто: чем больше пунктов в выборе, тем дольше пользователь будет выбирать, какой пункт выбрать. Поэтому стандартные советы про группировки элементов, максимум 5 пунктов меню и т.п. являются неоспоримым правилом UX.

Закон Фиттса описывается понятной формулой.  MT = a + b log2(2A/W). Расшифровка:

  • MT = время, которое потребуется для движения (например, движение рукой до экрана)
  • a,b = случайные ситуативные параметры
  • A = расстояние движения от начала до середины цели
  • W = ширина мишени вдоль оси движения

 

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

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

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

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

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

И не забывайте: чем меньше ответов в начале, тем больше разочарований в конце.

7 комментариев

  1. Дмитрий Мельников

    Отличная статья! Именно такие статьи и помогают ответить на вопросы вроде «Почему люди до сих пор юзают 6-го ослика?», и как им дать более удобный продукт.

  2. hatsura Vika

    Спасибо за статью. Какие приемы для аналитики трафика в мобильных приложений рекомендуете использовать? Особенно, если есть подозрение на фейковый трафик.

    • your-scorpion (Author)

      Для сегментации беру Apple’s Identifier for Advertising (IDFA) и вставляю в lookalike.

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

      С фэйковым трафиком бороться нужно с помощью воронок, краткосрочных сигналов (первые сутки жизни пользователя в проекте, это прохождение туториала, регистрация, достижения в игре) и долгосрочных сигналов (ритеншен, ARPU). ROI очень полезен. Анализировать нужно источники трафика, а не только сам трафик, запрашивайте SubID у подрядчиков. Органический пользователь по всем показателям в аналитике почти всегда выше, чем проплаченный пользователь с баннера. Вы должны знать своих китов и вычитать их из анализа. Все это поможет правильно проанализировать источники трафика и избежать репутационных рисков.

  3. Валерий Ягодкев

    Здравствуйте! Скажите, как вы считаете, нужно ли явно давать понять пользователю, что на том или ином контролле можно использовать жесты? Или для кактх то жестов это требуется, а для каких то нет? Спасибо!

    • your-scorpion (Author)

      Стандартный набор жестов: Тап, Дабл-тап, Перетаскивание, Щипок, Стягивание, Растягивание, Нажать и зажать, Нажать и перетащить, Вращение экрана (да, это тоже способ управления). Все эти жесты обязаны своим существованием сенсорным экранам, и удобство обусловлено максимально приближенным взаимодейстием к физическому действию. Тактильный и визуальный отклик на экране должны быть соответствующими. Также, так как экраны смартфонов небольшие, то жесты помогут сэкономить полезное пространство.

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

  4. Антон Помаленко

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

    • your-scorpion (Author)

      Для начала нужно узнать, достаточно ли данных в полученной воронке по уникам, используя график доверительного интервала.
      Пример: у нас есть посетители с десктопа на главной странице, 15 260 уников, из них до конца воронки доходят 5 212 уников. Аналогично с мобилок, 14 230 уников на главной конвертируется в 5040 заявок.

      Для построения графика доверительного интервала нужны:
      • Conf.level, доверительный уровень/вероятность. Обычно равен 95%, может быть и 99%, и 90%. Формула P = 1 — α, где P = 95% или 0,95, соответственно альфа (α) 5%.

      • Нужен размер выборки (n), это те кто зашел в воронку, у нас это 15 260 посетителей для десктопа и 14 230 для мобилок.

      • Нужно знать конверсию, так, для десктопных пользователей это 5 212 / 15 260 = 34%, для мобилок 5 040/14 230 = 35%.

      Можно использовать онлайн-калькулятор abtestguide.com, в котором есть следующие возможности:
      Вкладка Pre-test analysis нужна для подсчета, достаточно ли данных.
      Поля:
      • Unique visitors expected per variation (уникальные посетители)
      • Number of expected conversions Control (число ожидаемых конверсий)
      • Expected uplift (%) (ожидаемый рост), чем больше это значение, тем меньший разме выборки нам нужен.

      На второй вкладке Test evaluation можно найти статистическую значимость между двумя выборками, тут можно вбить количество пользователей для версии A и для версии B.
      Первый столбик, Visitors, это посетители.
      Второй столбик Conversions это количество действий на воронке которую мы считаем целевой.

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

      Вычисляем доверительный интервал.
      Доверительный интервал это показатель, насколько стабильна полученная величина, то есть насколько близкую величину (к первоначальной величине) мы получим при повторении измерений/эксперимента, а это значит, она должна быть посередине графика.

      Нам нужно получить репрезентативную выборку, это выборка которая удовлетворяет определенным критериям. В нашем случае это значимость 95%, то есть шанс 95% что данные верны, эту значимость мы и будем использовать в дальнейшем.
      Напомню коэффициент конверсий 34% для десктопа, 35% для мобилок.

      А теперь узнаем, достаточно ли данных, вычисляем среднее/стандартное отклонение. Вдруг данные не соответствуют значимости 95% и выборка не репрезентативна. Величина Z, выбранная для построения доверительного интервала, называется критическим значением распределения. Чтобы построить интервал, имеющий 95%-й доверительный уровень, необходимо выбрать α (Expected uplift %) = 5%.

      Выбираем одностороннуюю проверку гипотезы, так как у нас речь о конверсии. Использование одностороннего критерия вместо двухстороннего при заданном уровень значимости (α) приводит к увеличению мощности критерия (его способности обнаружить эффект), что очень даже хорошо. Если бы речь шла о среднем доходе населения, то подошла бы двухсторонняя проверка гипотезы.

      По краям — менее вероятные значения, в центре — наиболее вероятные. Доверительную вероятность представляет собой залитая зеленым цветом область под графиком. Также она является P-показателем, это вероятность наблюдаемого результата, возникающего случайно.

      Получается что Z оценка (Z-score, critical value) равна 3.1069, это значение соответствует количеству стандартных отклонений относительно среднего значения. Она является мерой отклонения от среднего, выраженной в единицах стандартного отклонения. Для понимания: участок нормальной кривой, заключенный между Z = -1,96 и Z = +1,96, содержит 95% всех случаев.

      Стандартное отклонение можно посчитать самостоятельно:
      Допустим, нам нужна нижняя и верхняя границы доверительного интервала для наших для времени чтения заметок = 555 секунд и стандартное отклонение 26 секунд.
      Чуть выше мы уже обговорили, что выберем 95%. По форуме Za/2 * σ/√(n). Za/2 = получаем коэффициент доверия. Решаем: 0,95 делим на 2, чтобы получить 0,475. По таблице Z-оценок находим значение 1,96.

      Берем наше стандартное отклонение (корень из размера выборки, σ, в нашем случае по условию σ = 26), и делим его на квадратный корень из размера выборки, 1квадратный корень из 5 260 это 123.5 , получаем 26/123,5 = 0,210.
      Теперь умножаем 1,96*0,210 = 0,4116, это и будет предел погрешности. Но это лишь половина длины доверительного интервала, еще нужно умножить, 0,4116*2=0,8232.
      Итак, стандартное отклонение 555 секунд ± 0,210. Мы самостоятельно посчитали стандартное отклонение.

      Узкие шаги воронки: в веб-версии сайта на этапе «Детальной информации» пользователи слишком отваливаются, нужно поработать с этой страницей. На втором шаге формы с мобильных устройств отваливается небольшая часть пользователей, нужно проработать эту мобильную страницу.

      Ну и сам факт того, что начиная с первого шага оформления заявки (формы) до последнего отваливается половина покупателей — напрягает. 1 и 2 шаги формы надо оптимизировать или переделать. Или вообще удалить, в зависимости от типа бизнеса.

      Итак, теперь делаем выводы.
      Если сравнивать две воронки по следующему результату

      то мы видим, что коэффициент вариации B (35,87%) на 5,01% выше коэффициента конверсии вариации A (34,15%). Это позволяет нам быть уверенным на 95% в том, что это результат наших действий а не случайность.

      Это был десктоп, посмотрим мобилки.

      аналогично, видим, что коэффициент вариации B (37,19%) на 5,00% выше коэффициента конверсии вариации A (35,42%). Это позволяет нам быть уверенным на 95% в том, что это результат наших действий а не случайность.