13 оттенков Super Mario в арбитраже трафика

Если временная петля Шуфутинского миновала вас и перевороты календаря приводили инструменту, а не к бесконечной коллизии имени 3 сентября, то поздравляем — в вашем календаре должно быть 13 сентября!

И именно этой датой обусловлено обилие непонятных большинству нормальных людей матюков парой строк выше. Ведь 13 сентября — день программиста, и автор, на права номинально-оного, решил разбавить вступление парой тематических матюков.

Впрочем, в сегодняшней статье рубрики «Досуг арбитражника» речь пойдет не о дне программиста — речь пойдет о Марио! Да-да, о той самой игре из 90-х, где нужно было пырать по грибам, черепахам и трубам. Зачем? А вот ниже и расскажем.

А причем тут арбитраж?

Вероятно, кому-то нетерпеливому все же захочется понять, какое отношение игра Super Mario имеет к арбитражу. Что ж — немного приоткроем завесу тайны… Super Mario — это эталон. Эталон того, каким должен быть UI-интерфейс. В частности, именно в Super Mario впервые появилось успешное сочетание следующих моментов:

• Интерфейса почти без текста — вместо нудных текстовых обучений (которыми, к слову, и сегодня грешат многие игры), в Super Mario процесс освоения базовых принципов игры регулировался самой игрой. Персонаж мог идти только вправо, а все «проблемы» сваливались дозированно.

• Принципа Affordance — более того, все эти проблемы были визуально выделены. Если из блока можно было что-то получить — рядом был знак вопроса, если новый моб мог атаковать — он был подсвечен и т. д.

• Обучения по схеме Aha-moment — часть процесса обучения навязывалась, но лайтово. Так, например, получая первую хилку в виде гриба, игрок не мог ее не получить — он в любом случае цеплялся бы за блок «?» с грибом и знавал бы, что грибы хилят.

• Закона Якоба — вдобавок, все «проблемы» были игроку знакомы из реальной жизни. То, что черепаха прячется в панцирь, а грибы дают здоровье, — это привычный для мозга паттерн.

• Минималистичного HUD — при этом сам HUD имеет всего 4 метрики. Очки, Монеты, Мир и Таймер — что позволяло быстро считывать инфу без перегруза внимания.

• Мгновенной ОС — также все значимые действия игрока почти моментально подкреплялись обратной связью от самой игры.

• Негативной ОС без штрафа — вспоминаем первое знакомство с Гумбой. Спойлер — на нем все новички умирали. Однако эта смерть условно-безопасная, так как игра открывала прогресс всего лишь на 5 секунд.

• Звукового UI — многие действия игрока сопровождались еще и звуковым эффектом, что отчасти и позволило разгрузить HUD.

• Иерархии масштабов — вспоминаем, как меняется рост Марио от количества съеденных грибов/полученного урона. Подобное очень быстро считывается.

• Эффекта прокрутки — вернуться назад в изначальных (не ремейках) версиях было невозможно.

• Закона Фиттса — все «существующие точки приземления» сделаны с запасом по размеру. И даже больше. Например, при попытке прыгнуть в трубу, игрока страхует не только размер самой трубы, но и еще несколько невидимых пикселей по бокам. Это крайне важно для комфорта игрока.

• «Дружелюбного» визуального обмана — аналогичные невидимые пиксели страхуют игрока и при прыжках с края платформы.

• Триггера «Почти получилось» — при всем этом конечная цель всегда есть на экране. Если игрок прыгает и промахивается, мозг воспринимает это как «нужно немного иначе», а не как «это нереально».

Здесь важно уточнить, что хоть сегодня многое из перечисленного выше кажется базой, в те годы это базой не было. Более того, несмотря на то, что попытки создания дружелюбного интерфейса были и до Super Mario, кейсов, где все перечисленное сочеталось бы между собой одновременно, не было. Ну и еще один момент — хоть сегодня это и база, многие разработчики и дизайнеры подобным пренебрегают, из-за чего их сайты/прилы/прочие проекты оказываются неудобными и теряют потенциал.

А арбитраж-то причем?

А собственно и при этом, что многие забывают использовать все то, что было опробовано еще в Super Mario. Разумеется, внедрять прям все подряд, лишь бы внедрить, — моветон и нонсенс. Все должно быть уместным. Но многие пренебрегают даже тем, что в конкретном случае прям мастхэв — и вот уже это не комильфо. Для лучшего понимания, что из перечисленного выше где применять, распишем условно-арбитражные примеры. Почему условно? Да потому что все это сова на глобусе и в каждом случае нужно смотреть предметно. Но в качестве ориентиров — как будто бы более чем достаточно. Ну так вот:

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

• Принцип Affordance — все важные для воронки кнопки должны моментально вычисляться взглядом. Юзер не должен гадать, что интерактивно, а что часть оформления.

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

• Закон Якоба — не стоит изобретать велосипед. Желание отличаться — это супер, но продажам оно скорее вредит. Ваш интерфейс должен быть хотя бы на 90–95% тем, к чему юзеры уже привыкли у ваших конкурентов.

• Минималистичный HUD — при всем это ленд не должен перегружать внимание. Еще одна базовая база, которой многие пренебрегают.

• Мгновенная ОС — простенький прогресс-бар или лента с последними выигравшими/получившими товар творят чудеса. Главное не упарывайтесь — навязчивое «смотри, тут что-то происходит» тоже не ок.

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

• Звуковой UI — не очень актуально для сайтов, зато вполне востребовано в прилах. Не поленитесь добавить действиям звуки. А еще лучше — звуки и вибрации. Но, опять же — знайте меру.

• Иерархия масштабов — не нужно делать форму заказа и блок с фейковыми отзывами одного размера. Многие скроллят не мышкой/пальцем вверх-вниз, а по диагонали — глазами. Поэтому все самое важное должно быть больше второстепенного.

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

• Закон Фиттса — если юзер, условно, ошибся на одну букву, ваша форма должна тут же подкинуть предложение с правильным вариантом. Здесь важно понимать, что форма — лишь пример. Важен сам комфорт пользователя.

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

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

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

Саммари

Вот так вот, день программиста и день рождения Super Mario вдохновили нас напомнить обществу о важности позитивного user-flow. А еще забавно, что и дата 13, и количество фишек в интерфейсе Марио — тоже 13. Это прям классическое ПИ Здесь! А на этом у нас все, приятных выходных!