Хуикс
8.07K subscribers
130 photos
1 file
39 links
Дизайн-поучения, UX-ужасы и прочая продуктовая жопа.

Всё это - в авторском канале от Лёхи Бородкина, который на цифровых продуктах съел стаю собак и просит еще.

Оглавление канала: https://t.ly/fMHm

Телеграм Лёхи: @buklamang
Download Telegram
А вот, друзья мои, образцовое интерфейсное говно (см. картинку чуть выше), спасибо родной Гильдии за подгон.

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

Первое. Композиция не предполагает никакой системной работы с ней. Взгляду сложно порхать, аки бабочка, с картинки на картинку и выбирать интересное - вместо этого ему предлагают взять на себя роль навозного жука перед навозной же кучей. Из-за этого взгляд устает уже на третьей картинке и утопает где-то в БИСКВИТНОМ ДВОРЕ сверху по центру. Нет визуальной системы - нету и нормальной схемы работы взгляда с ней.

Второе. Хорошая интерфейсная рифма (например, «и тут, и тут кнопки покупки находятся слева, хотя элементы разные») - это клево.

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

В данном случае дурацкая рифма создается двумя «подпрыгивающими» картинками по центру, акцент внимания смещается на верхнюю картинку по центру - опять на БИСКВИТНЫЙ ДВОР.

БИСКВИТНЫЙ, сука, ДВОР. Кроме этого бисквитного двора ничего не видишь и никуда не смотришь: я таращился на эту картинку минут 5 кряду и открывал ее раз 50, пока писал этот пост, но сейчас не помню ни одного логотипа кроме БИСКВИТНОГО ДВОРА.

Не дизайн, а БИСКВИТНЫЙ ДВОР.

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

P.S. Разгадка безблагодатности проста: кто-то выставил выравнивание элементов по центру пары «картинка+текст», и там, где текста много - оно и уехало хрен знает куда. Лечится все просто - сделать тексты повсюду, скажем, по две строчки, но покуда контент заносил лысый безглазый чорт - то и по две строчки сделать невозможно, это уже высшая математика копирайтинга.

#бисквитныйдвор
Давайте отметим сегодняшнее утро очередной порцией хуикс-безумия и нашей любимой рубрикой БИСКВИТНЫЙ ДВОР.

Вот такой занятный хуикс-кейс (см. выше) прислал наш дорогой читатель Станислав Голодов - с пылу-с жару, из братской Беларуси, с сайта dominos.by.

Итак, милые дети, что мы видим на картинке? Видим мы следующее:

- Произошла «Ошибка!»
- Регистрация не завершена;
- Ошибка явно какая-то роковая, раз все так ярко расцвечено, а интерфейс затемнен и перекрыт.

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

1. Если произошла какая-то ошибка, на которую повлиял или может повлиять пользователь - он вправе об этом знать: во-первых, чтобы лучше чувствовать логику продукта, а во-вторых - чтобы иметь возможность эту ошибку исправить или не допускать в дальнейшем (типа, «Ага, у меня уже тут есть аккаунт!» или «Ага, это не форма логина, а форма регистрации!»).

В данном же случае у нас бессмысленная импотентская отмазка «Ошибка! Регистрация не завершена» - чо, правда чтоль, хоть ту картинку с Николасом Кейджем вставляй;

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

Тут же интерфейс показывает ровным счетом нихера.

3. Если пользователь вбил в поле что-то не то - это не повод устраивать истерику по Виктюку, орать страшными голосами, показывать дополнительное окно и КРАСНЫЙ КРЕСТ, как сейчас. Реально, будто вся жизнь закончилась.

Самое смешное, что под окошком с ошибкой напротив поля ввода емейла они таки пишут, что такой пользователь уже существует (хвост этой надписи даже на скриншоте видно), но для этого пользователь должен закрыть окно с КРАСНЫМ КРЕСТОМ, пережить недюжинный эмоциональный стресс и жить с посттравматическим синдромом дальше. Что печально, пользователь может это поле вообще не увидеть, закрыв со словами «НУ НАХЕР» весь сайт, потому что ОШИБКА же.

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

#бисквитныйдвор

P.S. Хэштеги я начал использовать недавно, так что за предыдущими экспонатами БИСКВИТНОГО ДВОРА (включая сам кейс с бисквитным двором) приглашаю мотать ленту постов самостоятельно - как аудиокассету карандашом в 90-е.

Не забудьте потом обратно только перемотать.
Как все это можно исправить?

1. Не использовать такой интерфейсный дебилизм без видимой надобности.
2. Если ОЧЕНЬ уж хочется поиграться в пост-модерн, то нужно, во-первых, переводить все остальные поля ввода в горизонталь (например, разместить все элементы в ряд и сделать горизонтальный скролл, хотя это будет выглядеть все равно дико), а во-вторых - обеспечить четкую визуальную привязку надписей к управляющим элементам, чтобы не пришлось возиться с анкетой методом тыка и допускать ошибки.

Ведь выбор пола - дело такое, один раз ошибешься, потом пацаны во дворе засмеют.

#бисквитныйдвор #отвечаеталександрдрузь

P.S. Да знаю я, знаю, что у клингонов нету жвал и крыльев. Не занудствуйте.

P.P.S. Если у вас есть хорошие экспонаты в нашу кунсткамеру - скидывайте мне в личку смело. Родина вас не забудет.
Так чему, милые дети, научил нас сегодня конь бледный?

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

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

Следующий на очереди нашего БИСКВИТНОГО ДВОРА - конь черный, так что пока не отключайтесь. Хотя нет, отключайтесь, про коня черного я расскажу завтра, а пока можете походить по сайту тату-салона и поискать его самостоятельно. Заодно и посещаемость им подымем, пусть удивляются.

#бисквитныйдвор
Продолжаем разговор про БИСКВИТНЫЙ, сука, ДВОР!

В прошлый раз мы с вами начали препарировать сочную, вкусную мякоть тату-салона и познакомились с первым всадником Апокалипсиса - с дурацким нарушением паттернов.

В этот раз мы продолжим изучать наших гостей из Харькова и обратим внимание на раздел «Блог», а именно на вот эту, гм, выдающуюся статью с фотографии выше. За ней скрывается интересный контент, цитирую полностью: «Вот такая вот теперь тут будет красоваться статья. Вот тут самый большой заголовок, типа H1. Вот так вот!».

«ПФФФ, - элегантно заявите вы, - ДА ЛАДНО ЛЁХА С КЕМ НЕ БЫВАЕТ ТЕСТОВЫЙ КОНТЕНТ ЗАБЫЛИ УБРАТЬ». Бывает, да. Но помните - я даден вашему телеграму не для того, чтобы прощать, миловать и распространять миленькие истории, но для того, чтобы злобным перстом обличения впиваться в хуикс-изъяны, давить из них здравый смысл и передавать вам его в обрамлении цветастых эпитетов - для наилучшего усвоения организмом.

И вот что мне вспоминается в связи с данным случаем про «ВОТ ТАК ВОТ!». На Западе есть горстка UX-фундаменталистов, которые в своем человеколюбии дошли до того, что считают дискриминационным слово «пользователь» и используют исключительно слово «гость». По их философии, хороший владелец продукта - это хозяин, который старается окружить своего гостя не просто функциональным окружением, но заботой и теплом, которые должны проявляться через все аспекты продукта.

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

А теперь давайте вернемся к нашему пациенту с «ВОТ ТУТ САМЫЙ БОЛЬШОЙ ЗАГОЛОВОК! ВОТ ТАК ВОТ!». Мешает ли мне эта дурацкая статья выполнять свои задачи и удовлетворять свои потребности как пользователю? Да нифига: я как находил контактный телефон, адрес, профили тату-мастеров Богдана «8BALLY» и Сони «SONY_BLACK» и что там еще на этом сайте положено делать - так и буду находить, и с точки зрения какой-нибудь методики Jobs To Be Done картина не изменится ни на йоту.

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

И вы повторите, нахмурив кустистые брови: «ЛЁХА ДА ЛАН ТЫ ДРАМАТИЗИРУЕШЬ ЭТО МЕЛОЧИ В ЭТОТ РАЗДЕЛ КРОМЕ ТЕБЯ И 900 ЧИТАТЕЛЕЙ ХУИКСА НИКТО И НЕ ЗАЙДЕТ». Что ж, пусть. Но я покину этот сайт с тем же ощущением, с каким я покидал свежепостроенную станцию Московского центрального кольца, на которой не удалили монтажный скотч, в углу лежал какой-то мешок с цементом, а стекла так и не были отмыты от строительной пыли и песка. Обо мне не подумали, мне не были рады - а я, по идее, должен был радоваться факту, что мне дали хоть что-то. Это неприятное ощущение.

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

И, да, успех тату-салонов строится не на аккуратности оформления блога - но, тем не менее, все самые жуткие вещи начинаются с фразы «ДА ЛАДНО ЧЕ МОРОЧИТЬСЯ». Это путь, который заводит в никуда - пусть и не прямо сегодня, но в отдаленном и не очень добром будущем.

Будьте здоровы.

#бисквитныйдвор
Ну и - по традиции - расскажу, как лечится описанная выше херомантия (хотя все и так очевидно):

1. Не обещайте клиенту того, чего не сможете выполнить.
2. Если вы создаете геморные с точки зрения сервиса условия - сообщайте о них на видном месте.
3. В идеале, стройте свой сервис так, чтобы он помогал пользователю находить компромисс с геморными условиями. Это сложно, это больно, но в 95% случаев решаемо.
4. Не играйте с пользователем в прятки, только если он сам этого не захочет.
5. Не делайте говно на лопате.

Нарушение этих правил простительно только в том случае, если ваша бизнес-модель строится на прямом обмане клиентов, но это, сами понимаете, дело такое.

#бисквитныйдвор

P.S. Если у вас есть свои золотые кандидаты в БИСКВИТНЫЙ ДВОР, не ленитесь слать их мне в личку.
Лучше нашей любимой рубрики БИСКВИТНЫЙ ДВОР может быть только рубрика БИСКВИТНЫЙ ДВОРЪ ВЪ СИНЕМАТОГРАФѢ.

Никита Мельников (@nikmelnikov, да золотится слава его в умах) прислал удивительную немую фильму-скринкастъ УВЛѢКАТЕЛЬНАЯ ТАЙНАЯ ЖИЗНЬ ЛИЧНАГО КАБИНЕТА.

Ссылку на фильму я вам сейчас дам, а пока советую включить фоном вот эту музыку: https://www.youtube.com/watch?v=dJ-Su4utvm8

Готовы? Тапёр играет? Тогда вот вам обещанный СИНЕМАТОГРАФЪ: http://somup.com/cqjwY4ew6t. Как посмотрите, возвращайтесь сюда. Музыку пока не отключайте.

Вот сижу и вижу, как авторы придумывали этот интерфейс.

— АСКОЛЬД, - говорил один из создателей, хохоча и крутя длинный ус, - ДАВАЙТЕ ПРИДУМАЕМ КАК ПОЛЬЗОВАТЕЛЮ ЖИТЬ ЧЕРЕЗ ЖОПУ.

— КОНЕЧНО ЭРАСТ, - отвечал второй из создателей, крутя гири в полосатом трико, - ДАВАЙТЕ ЗАСТАВИМ ПОЛЬЗОВАТЕЛЯ СТАРОГО КАБИНЕТА ВВЕСТИ СВОЙ ЛОГИН А ПОТОМ УЙТИ ПО КАКОЙ ТО ЛЕВОЙ ССЫЛКЕ И ЗАЛОГИНИТЬСЯ ТАМ ЗАНОВО.

— МАЛЬЧИКИ МАЛЬЧИКИ, - захлопала в ладоши старуха Габальда, третья создательница ЛК, - НЕХОРОШО ПОЛЬЗОВАТЕЛЯ ОСТАВЛЯТЬ В НЕВЕДЕНИИ!!! ПУСТЬ ЗНАЕТ КУДА ОН ПОПАЛ!!!

И как-то сам собой родился текст понятного и полезного уведомления: «Пользователь еще не перенесен».

«ЭКОЙ ВЫЙДЕТ АНЕКДОТ», - захохотал Аскольд. «ВЗДУЛИ ПОЛЬЗОВАТЕЛЯ КАК МОРСКОГО ЧЕРТА», - затрясся от юмора Эраст. «НЕ ОКАЗИЯ А КОНФУЗ», - мерзко завизжала старуха Габальда.

Так родился личный кабинет 2DOMAINS.

КОНѢЦЪ.

P.S. Чего бы я сделал на месте Аскольда, Эраста и Габальды? Сделал бы переброс пользователя из новой формы логина в старую с сохранением введенных данных. Да, это несет в себе много технических подводных камней, но это всяко лучше, чем плевать в душу пользователю - вы плюнете и забудете, а он-то запомнит.

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

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

#бисквитныйдвор
“ДА ЛАН ЛЁХ ВСЕ НОРМ С ЭТИМ ИЛОНОМ МАСКОМ, - не будете сдаваться вы, - СПЕРВА ВЫБИРАЕМ КАРТУ ДЛЯ ОПЛАТЫ ПОТОМ ЖМЕМ НА КНОПКУ СНИЗУ И ЭЭЭ СТОПЭ КАКОГО ХРЕНА КНОПКА СНИЗУ ДОБАВЛЯЕТ НОВУЮ КАРТУ ???”

Здесь я улыбнусь вам обворожительной улыбкой аллигатора и скажу - да-да, друзья мои, эти гоблины от мира UX сделали снизу кнопку “Добавить карту”, поместив на высокоприоритетное место важное, но редко используемое действие. Это первый косяк.

“ХЕР С НЕЙ С КАРТОЙ, - авторитетно заявите вы, - А КАК ОПЛАТИТЬ ТО ???”

А вот для этого, мои юные любители странного, вам понадобится сделать невиданное: ткнуть в ячейку с картой, которая, сука, даже не выглядит так, что в нее можно тыкать! Это все равно что выключатель света маскировать под узор на обоях, если не хуже.

И это второй, косяк, который создает кучу геморроя на пустом месте. А ведь лечится все это просто: вниз нужно сунуть кнопку “ОПЛАТИТЬ”, а в список карт добавить особую пустую ячейку с подписью “Добавить карту”. И все будет понятно - в приоритетном месте приоритетное действие, а во второстепенном (но заметном) - второстепенное (но важное).

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

“НУ ТЕБЯ В ЖОПУ ИЛОН МАСК, - скажете с обидой вы и сплюнете в сердцах, - ПЛОХО СДЕЛАЛИ ТУПО”

И будете правы.

#бисквитныйдвор
Упражнение B. Контрольные вопросы:
1. Кто такой Тимур?
2. Что за Дмитрий?
3. Кто эта Татьяна, черт подери?
4. Какого хрена Тимур отвечает аж за два приложения из четырех?
5. Нет, все-таки, кто все эти люди?

Нет, я понимаю, что все это может значить - Гугл тем самым какбе намекает нам на европейском языке: “ОЛОЛО СМОТРИТЕ КАКОЙ Я ПЕРСОНАЛЬНЫЙ В ЗЮЗЮ СВОЙ ОЛОЛО ПРЯМ КАК ТВОЙ ПИКАБУ ОЛОЛО Я ОБРАЩАЮСЬ К ПОЛЬЗОВАТЕЛЯМ ПО ИМЕНИ”.

Но по факту я реально испугался, что попал не в ту учетку, не в тот логин, не в тот рукав Галактики.

Выглядит все это как полная креативная импотенция на пол-шишки - и к тому же может реально смутить пользователя и заронить в его душу тревожные сомнения, которые потом фиг вытравишь.

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

Не делайте так.

P.S. Упражнение C. Дополнительный вопрос на пятерку и внеочередной диплом МБА:
1. Почему на фоне приложения про презентации (“Татьяна”) мальчик потрошит улей?
2. Почему на фоне приложения про формы (“Тимур”) кто-то ломает печенье?
3. Почему на фоне приложения про таблицы (“Дмитрий”) белые цисгендерные мужчины топят на лисапедах в горы?
4. Почему на фоне приложения про гуглодоки (снова сраный “Тимур”) парочка таращится на какие-то таунхаусы?

Свои ответы шлите нам в студию по адресу Москва, улица Академика Королева, Останкинская башня.

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

Вы, конечно, можете поправить очки на носу и сказать, что:

⁃ Там наверняка закопана комиссия;

⁃ Срабатывают хитрости округления копеек (на самом деле нет);

⁃ Давно известна лютая ненависть Сбера к переводам по номеру телефона (т.н. СБП), доходящая до анекдотов и маразма, когда функция скрывается за семью экранами, восемью запорами и девятью рычагами, лишь бы не пустить туда пользователя.

Но, Герман Оскарович, я-то тут при чем? Откуда мне знать про комиссию и почему я должен быть заложником неведомой корпоративной херни?

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

1. Пользователь должен понимать, что произойдёт на следующем шаге (а это я в их божественном интерфейсе не понимаю);

2. Пользователь должен понимать, что только что произошло (этого я тоже не уразумел).

Предупреждений о комиссии нет. Текст ошибки - херовый.

Ну что, я ничегошеньки не понял, взял карточку Тинька и перевёл деньги по-другому. А ещё я сделался зол, и хер я когда-нибудь выберу зелёный банк своим зарплатным проектом - увольте.

#бисквитныйдвор
А вот и подоспела развязка истории с Notion.

Всем участникам онлайн-реконструкции Ходынки пришло письмо следующего содержания: «ПРИВЕТ МЕНЯ ЗОВУТ КАТЯ МЫ ВИДЕЛИ ТЫ ЗАБРАЛ ПРОМОКОД ДЛЯ СТАРТАПОВ А ТЫ НЕ СТАРТАП ТАК ЧТО МЫ ЗАБРАЛИ ДЕНЬГИ ОБРАТНО СПАСИБО БЛАГОДАРИМ ЗА ПОНИМАНИЕ ДО СВИДАНИЯ ЗДОРОВЬЯ СЧАСТЬЯ»

Вот и вся любовь. Зацените юмор: они оставили пользователей на платном тарифе - теперь уже за их собственные кровные.

В сухом остатке:
⁃ Notion вертали все в зад и понесли минимальные убытки;
- Многие понавводили данные своих карт и, сами того не ведая, сидят сейчас на платных тарифах (это вообще пушка на уровне рубрики #бисквитныйдвор , спасибо @space_invader за внимательность);
⁃ Про Notion орали из каждого утюга на всех континентах - вплоть до меня, неподкупного Лёхи из Хуикса.

Было ли это преднамеренным гениальным ходом или космических масштабов обсером - никто сказать не может и, наверное, уже не сможет.

А вот что можно сказать со всей определенностью - так это то, что Notion прекрасно справляется со своими проблемами сами, и призывы «БРАТЦЫ КОМПАНИЯ ТОНЕТ АЙДА ВСЕ НА СПАСЕНИЕ РВЕМ ЖОПУ» - это красивый, по-настоящему человечный, но глубоко бессмысленный невроз, который еще и сыграл Notion на руку.

Помните, я писал про ту историю со спасением Павла Дурова? Вот и сейчас Павел Дуров прекрасно спас себя сам - и остался при этом в выигрыше.

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

И не забудьте отписаться от платного тарифа, если клюнули на эту кружку с орлом.

#надысь
Вот что произошло на картинках выше:

1. Началось все с того, что Карл Вигерс написал новую книгу Thoughtless Design of Everyday Things (Да! Вигерс! Новую книгу! Про дизайн! С подколкой в адрес Дона Нормана в названии! Для тех, кто не знает: для мира проектирования это имеет такой же значение, как если бы Пелевин написал новую Конституцию Российской Федерации). Я ее захотел купить и ради этого сдул пыль с аккаунта Амазона, которым пользовался последний раз примерно во времена Очакова и покоренья Крыма.

2. Я собрал корзину, подтвердил заказ и все такое. Мне на почту упало письмо с подтверждением заказа (отвечая на немой вопрос, схера ли книга Вигерса столько стоит - я вдовесок к ней заказал скруглитель углов, не спрашивайте зачем).

3. Вскоре мне упало еще одно письмо с указанием, что я указал протухшую банковскую карту (что неудивительно с учетом моей частоты использования Амазона). В письме была БОЛЬШАЯ ЖЕЛТАЯ КНОПКА Update your payment method, чтобы я обновил банковские данные.

4. Ну ладно. Я зашел и обновил свои данные, указал новую карточку. Все подтвердил.

5. И дальше чо? А ничо: данные по карте радостно обновились, деньги не списались, заказ висит в статусе Not yet shipped, будет ли по нему какое-то движение - непонятно.

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

Так и сидим с Амазоном и смотрим друг на друга, как деревенские влюбленные на завалинке - трепетно, нежно и безрезультатно.

А теперь, по традиции рубрики, давайте разберем, в чем именно заключается UX-херня - и как ее можно порешать.

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

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

Вы скажете ДА НА САМОМ ДЕЛЕ АМАЗОН ТАК ВСЕГДА ДЕЛАЕТ НЕ ССЫ ЕЩЕ ПАРА ДНЕЙ И ДЕНЬГИ СПИШУТСЯ, а я вам тихо и зло отвечу - а какого хрена я должен знать и тем более помнить, как там Амазон привык деньги списывать? Я не хочу знать и помнить, я хочу пользоваться и не думать.

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

#бисквитныйдвор

P.S. Магия Хуикса! Не успел я опубликовать этот пост, как Амазон прислал апдейт по заказу. Теперь они - вот это да! - УТОЧНИЛИ ДАТЫ ДОСТАВКИ. Про оплату по-прежнему ни слова. Оставайтесь на линии.
6. И тут я думаю, Дуров, ну какого черта, а! У вас же с UX всегда в порядке все было.

Что за херня произошла:

🤡 У меня как у простого смертного пользователя в голове всегда сидело 2 сценария - отправить картинку красиво и отправить картинку файлом. При этом уголком своего бедного разума я понимал, что «отправить картинку файлом» означает «без сжатия», но при мысли «как отправить картинку» первым делом я выбирал, отправить ее красиво - или задротским образом для специальных оказий.

💀 Здесь же дизайнеры Телеги вхлам сломали мой сценарий: они заменили мне выбор «Отправить красиво / отправить задротски» на «Отправить задротски / Отправить со сжатием», из-за чего я вообще в упор не видел, куда они задевали мою любимую фичу.

👽 В мобиле эта штука вообще по другой логике строится и работает. Консистентность, мать ее!

Тем самым простая пользовательская логика («красиво/технично») заменилась на красноглазую, сука, логику «ВЫБЕРИ СТЕПЕНЬ СЖАТИЯ» (хоть не дали в процентах это выбирать, земной им поклон).

И это, судари и сударыни, невхрененно бесит, потому что я как будто вернулся во времена ICQ 99b, где все было, конечно, прорывно и мило, но по современным меркам - строилось через программистскую жопу слона. Не надо так в 2021 году.

НО СТОПЭ У НАС ЕСТЬ АПДЕЙТ! В комментах выяснили, что у Телеграм под Мак есть два разных приложения, которые между собой на сайте ничем не отличаются - вот я случайно и перескочил с клиента на клиент. Во втором - нативном клиенте под Мак - все работает привычным для меня образом. Если хотите больше ада - сходите в комменты к этой записи.

Это снимает вопрос "куда вы дели мою кнопку", но ставит вопрос новый - какого черта у них целый зоопарк аналогичных, но по-разному работающих решений, в которых даже я, продуктовый зубр и признанный старец Фура от мира UX, запутался как школьник? Вот она, истинная красноглазость.

#бисквитныйдвор
8. Я гляжу на ноябрьскую операцию под заголовком «Траты за декабрь» и мой ор поднимается выше гор.

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

Обратите внимание, что эти хобгоблины и поступления денег таким же макаром прячут под "Траты за декабрь" (за замечание спасибо дорогому читателю @replaner). Я долго думал, что здесь пошутить - и не смог. Это дно, которое стучит об тебя.

Меня люто, бешено трясет от такого идиотизма, но рубрика БИСКВИТНЫЙ ДВОР обязывает меня вынести из кейса какую-то хуикс-мораль. Мораль такая: пользователь должен корректно предугадывать, где скрывается та или иная функция и к чему приведет нажатие на ту или иную кнопку. Если продукт помогает пользователю это угадать - в голове у клиента легко формируется логичная ментальная модель интерфейса, и пользователь воспринимает продукт как что-то близкое и понятное.

Если продукт этому не то что даже помогает, а мешает неправильными ожиданиями (как с этой сраной кнопкой «НЕТ ТРАТ В ДЕКАБРЕ», которая значит что угодно, но не историю операций за ноябрь), то пользователь начинает беситься, бомбить и всерьез подумывать свалить к конкурентам.

«МЫ НЕ ДЕЛАЕМ UX-ТЕСТИРОВАНИЯ ПОТОМУ ЧТО В НИХ НЕ ВЕРИМ» Вот же срань какая, а.

P.S. Хотите вишенку на торте? Я снимал скрины с Тинькова, при этом слушая музыку через наушники. Так вот: при открытии приложения Тинек за каким-то чертом останавливает музыку и перехватывает аудиопоток. Да что мне там у вас слушать, медведь вас задери?!

#бисквитныйдвор
Это, сука, экран, который показывается мне КАЖДЫЙ раз, когда я захожу на Spotify через браузер. КАЖДЫЙ.

😇 Вот, допустим, мой типовой благолепный сценарий:

1. Я хочу послушать музыку

2. Я захожу на сайт Спотифая

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

🌚 А вот что я делаю по воле дворника, придумавшего главный экран Спотифая:

1. Я хочу послушать музыку

2. Я перехожу на сайт Спотифая

3. Я вижу КОНСКУЮ надпись ВОЗВРАЩАЙТЕСЬ К МУЗЫКЕ с капитанской припиской «Продолжайте слушать с того момента, где остановились». Да вы что, блин! А я-то думаю, чего я сюда зашел!

4. Еще мне предлагают классные действия в менюшке сверху: премиум-подписку, которая у меня уже есть, раздел «Справка», который мне нахер не сдался, раздел «Скачать», чтобы я скачал и так скачанное приложение, и ссылку на мой профиль, который мне в 99% случаев тоже особо не нужен. Офигенно.

5. Посреди этого неонового мутабора с шарами я ищу кнопку «Открыть веб-плеер», на которую я должен нажать - и перейти на тот экран, куда я хотел попасть с самого начала.

6. Если я проскроллю ниже, то обнаружу в подвале полезнейшие для меня пункты меню - с вакансиями, инфой для музыкантов и еще одной ссылкой НА ВЕБ-ПЛЕЕР (вот уж спасибушки).

То есть вместо того, чтобы сразу переправлять меня на экран с музыкой (как это делают все - от Дизера до Яндекс.музыки), меня каждый раз кормят отборными UX-голубцами с говном, от которых мне ни тепло ни холодно. Каждый раз. Каждый, сука, раз.

И, наконец, САМАЯ БЕЗУМНАЯ ДЕТАЛЬ. Этот сраный дворницкий лендинг показывается только в том случае, если вы уже авторизованы в сервисе. Если вы не залогинились - главный экран будет показываться СРАЗУ с музыкой, как и нужно.

Зачем это безумие? Почему? Нет ответа.

Не делайте так, пожалуйста.

#бисквитныйдвор
Но мы же тут с вами не пикабу какое-нибудь и про хуикс экспертно судим? Ну и вот вам советы, чтобы не ОБЕРНУТЬСЯ вам случайно похуикс-специалистами:

💵 Не списывайте, сука, деньги дважды за одно и то же (ну, это как бы понятно).

🤡 Когда ведете с пользователем разговоры про долги и штрафы, не надо принимать вид аутичного смехача и подпускать обороты «почему так все обернулось», мемасы, котиков в шляпах, прочие смешные штуки. Это как на чужие похороны придти в клоунских ботинках - вы будете дохера оригиналы, но в этот момент до вас никому нет дела. Никому, кроме вас, в этот момент не смешно.

🌚 Если вы присовокупляете к письму грозные ссылки на договор - убедитесь, епт, что они работают, а не в серый экран ведут. Особенно когда вы рядом идиотскими оборотами шутите. Так вы еще большие аутичные смехачи.

🏞 Если вы впаяли пользователю штраф - аргументируйте это, разжевывайте суть штрафа, показывайте детальную информацию, выворачивайте все напоказ. Не просто кидайте ОТДЕЛЬНОЕ письмо на деревню к бабушке, а прикрепляйте информацию тут же, к штрафу и поездке. Я же приложением пользуюсь, это мой отдельный канал, ну.

🧱 Если вы прикладываете к письму инструкцию (особенно по оплате штрафа, когда пользователю как минимум неприятно) - убедитесь, что она соответствует реальности, а не как обычно.

🗓 Аккуратно работайте с датами. Если 25 ноября - дата выписывания штрафа, обозначайте это. Если можете назвать дату, когда прецедент штрафа обнаружился (в моем случае, 21 ноября) - обозначайте это. Будьте, сука, прозрачными в том, чего вы требуете с пользователя.

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

В комментах к этому посту можете поделиться своими хуикс-приключениями с каршерингами. Пусть всем стыдно будет.

#бисквитныйдвор
И вот какую ошибку мы видим: при всем при том, что бОльшая часть полей предзаполнена (что хорошо), оставшаяся часть помечена как ошибочная — то есть как будто мы уже пытались заполнить эту форму, нажали на «Отправить» и форма с отеческой снисходительностью как бы говорит нам «Э НЕТ БРАТ ТАК НЕ ПОЙДЕТ ДАВАЙ-КА ПО-ЛЮДСКИ».

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

Вы, канеш, можете со мной поспорить: «ЛЁХА ДА ТЫ ДЕД СТАРЫЙ КРАСНЫЙ ЦВЕТ МОЖНО ИСПОЛЬЗОВАТЬ НЕ ТОЛЬКО ДЛЯ ОШИБОК ТУТ ПРОСТО НАПРАВЛЯЮЩИЕ ПОДСКАЗКИ ТАК ОФОРМЛЕНЫ», на что я отвечу так: весь данный кейс указывает на то, что это формулировки именно ошибок, а не подсказок: это и довольно агрессивный восклицательный знак рядом с формочкой, и грубая формулировка «Вы должны дать свое согласие» под галочкой (кайф, я еще ничего не сделал, а уже должен, пингвин.жпг), и — гвоздь программы! — пункт «Предыдущий вопрос» под «Зарегистрироваться». Что? Какой предыдущий вопрос, я вас впервые вижу!

Моя гипотеза следующая. Команда ипотеки (или кто у них там) прикрутила уже готовую форму к блоку «Ипотека» на главном экране, решив сделать так:

1. Давайте кидать пользователя сразу на предпоследний шаг подачи заявки ипотеки (шоб не переделывать готовую форму)
2. Чтобы пользователь понимал, какие поля заполнять — давайте сделаем так, будто он УЖЕ нажал на кнопку «Зарегистрироваться», а мы ему такие умные подсветили ошибки.
3. Ничо в самой форме мы менять не будем.

Ну и вот мы и видим, что мы видим — форму команда подключила довольно экономно и просто, но при этом насовала палок в UX-колеса пользователю. Рабочий ли это вариант? Да, рабочий. Создает ли это проблемы пользователю? Да, создает. Можно ли это улучшить? Я думаю, да, особенно с учетом мощной дизайн-системы Альфы.

И мораль сей басни такова:

1. Если это возможно, предусматривайте в ваших формах состояния не только под кейсы «ВСЕ ОКЕЮШКИ» и «ВСЕ НЕ ОКЕЮШКИ», но под промежуточные варианты «ТУТ ЕЩЕ НЕ ЖОПА НО ПОЛЬЗОВАТЕЛЯ НУЖНО НАПРАВИТЬ» — это бывает очень полезно.
2. Если надо сделать быстрый вариант из говна и веток - делайте, это норма, но отдавайте себе полный отчет, что делаете вариант из говна и веток, который нужно потом поправить.
3. Можно ничего и не улучшать, но это создает мелкую головную боль для пользователя (которая имеет неприятное свойство накапливаться в продукте) и постоянный риск попадания в рубрику БИСКВИТНЫЙ ДВОР в нашем дорогом «Хуиксе».

Так что будьте мудры.

#бисквитныйдвор
Что с Альфой:

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

Решение это, на мой скромный взгляд, работает только на полшишки: визуально-то они свою ипотеку выделили, но при этом никак не обозначили, что это не живые деньги, а насквозь гипотетическое фуфло. В результате мы получаем конструкцию, которая банально мешает мне составить представление о суммарном состоянии своих счетов - фантомные ШЕСТЬ МИЛЛИОНОВ ДЕВЯТЬСОТ ТЫСЯЧ слишком похожи на мои деньги и слишком лезут в глаза. Да, я могу закрыть крестиком этот “рекламный” счет (хотя и тут можно придраться к логике процесса), но осадок все равно остается - я постепенно перестаю верить тому, что вижу.

И корень зла лежит здесь не в том, что в персональный блок вкорячили рекламу (ЗЛОЙ БИЗНЕС УХОДИ) - но в том, что эта реклама пытается втереться ко мне в доверие и притвориться чем-то моим собственным, чем она ни разу, заведомо не является. И это получается не здоровая мимикрия, на которой держится чуть ли не весь продуктовый дизайн, но практически прямой обман.

Шо делать:

Чтобы адекватно решить эту проблему, достаточно просто перестроить рекламный блок с ипотекой так, чтобы он не сливался с остальными счетами и имел более нематериальный вид. Даже контент блока может быть ровно таким же - “6 900 000 ₽” + инфа о том, что это предложение по ипотеке - но он ни в коем случае не должен иметь вид живого счета с настоящими деньгами, иначе одно от другого не отделить.

Ну и попутно решить этическую проблему, хотим ли мы вкатывать в пользователей ипотеку такими приемчиками.

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

#бисквитныйдвор