Интерфейс для сайта или приложения за минуту
Новый сервис помогает создавать интерфейсы по запросу. Просто напишите, какой компонент вам нужен, и сервис сгенерирует его за считанные секунды.
Сгенерированные элементы можно легко изменить. Затем вы можете просто скопировать сгенерированный код React и вставить его в свой проект.
Попробовать сервис — тут.
Источник мой Телеграм паблик: https://t.me/thefutureidol
Безболезненное изменение кнопки оплаты
Как мы приняли и внедрили кнопку Slide-to-Pay
Недавно мы внесли изменения в систему оплаты, позволив пользователям оплачивать покупки непосредственно из корзины с предварительным выбором основных способов оплаты. И хотя эти изменения могут показаться малозаметными, не стоит обманывать себя, думая, что это всего лишь небольшие доработки. Мы усовершенствовали эту ценную деталь, чтобы обеспечить удобство для наших пользователей и стимулировать рост бизнеса.Но зачем мы вкладывали в это деньги и ресурсы, если казалось, что процесс оплаты уже решен? Переход от страницы корзины к странице оплаты требовал от пользователей принятия нескольких решений. Хотя в большинстве случаев они выбирали предпочтительный способ оплаты, им излишне было показывать другие варианты. Это привело к снижению скорости продвижения пользователя, поскольку принятие большего количества решений часто приводит к увеличению числа отказов от покупки в конце воронки.
Лишняя информация о принятии решений, когда 95% пользователей оплачивали с помощью наиболее предпочтительного способа оплаты
Эти убедительные причины побудили нас углубиться в создание системы быстрого оформления заказа. Поэтому мы приступили к поиску идеального решения. Для обеспечения быстрого оформления заказа в корзине необходимо было отобразить соответствующую информацию о платеже, предоставить возможность изменить способ оплаты, отобразить окончательную сумму и, конечно же, включить кнопку оплаты.
Оценка кнопки оплаты
Теперь давайте поговорим о кнопке оплаты.Мы часто думаем о кнопках, как о любом другом компоненте пользовательского интерфейса, определенном в системе проектирования. Но это был не обычный компонент пользовательского интерфейса; это был очень важный способ для превращения пользователей в клиентов. Еще раз подчеркнем, что с этой кнопкой ежедневно будут взаимодействовать 2-3 млн. пользователей. Мы тщательно продумали взаимодействие с кнопкой, рассмотрев два варианта: простое нажатие или скольжение.
Хотя нажатие казалось привычным и простым, мы опасались случайных нажатий из-за слепоты к кнопкам. С другой стороны, скольжение обеспечивало более целенаправленное взаимодействие, чтобы избавить пользователя от привычки нажимать вслепую.
В системе Tap to pay был снижен риск случайных нажатий
Несмотря на то что команда разработчиков больше склонялась к слайдеру, первоначально мы остановились на кнопке. Поскольку заинтересованные стороны продукта были обеспокоены сложностью и скольжением, которое создаст слайдер, а также тем, что слайдер требует больших усилий при разработке.
Быстрое оформление заказа - это серьезный сдвиг на пути пользователя, поэтому мы провели контролируемые эксперименты, проанализировали данные экспериментов и внесли изменения.
Считывание данных
Положительная динамика
Мы наблюдали значительное увеличение конверсии, что свидетельствовало о том, что все больше пользователей успешно оформляли свои заказы с помощью нового потока. Это подтвердило, что потребность в быстром оформлении заказа существует.
Негативная тенденция
Однако некоторые пользователи после нажатия кнопки оплаты отваливались, не сумев завершить проверку подлинности платежа.
Пользователи не замечали новую кнопку оплаты и случайно нажимали ее, а потом понимали это.
Хотя новый UX в целом был успешным, мы не стали довольствоваться половинчатыми решениями. Мы провели мозговой штурм, чтобы понять причину негативной тенденции. Первая попытка была направлена на то, чтобы сделать кнопку нажатия более заметной с помощью всплывающих подсказок, мерцающей анимации и изменения текста. Но, несмотря на все наши усилия, негативная тенденция сохранялась. Тогда мы решили создать кнопку-слайдер, подключив к этому процессу все заинтересованные стороны.
Построение системы Slide-to-pay
Теперь, когда мы получили согласование с заинтересованными сторонами, мы тщательно проработали кнопку слайдера. Мы продумали все аспекты того, как наши пользователи будут взаимодействовать со слайдером. Одним из основных опасений заинтересованных сторон было то, что это может привести к снижению конверсии, поскольку пользователи могут не понять, как именно они будут взаимодействовать со слайдером.
Чтобы решить эту проблему, мы приняли различные меры
Обучение с подсказкой
Одним из простых способов информирования пользователей о новых возможностях является использование всплывающих подсказок, что мы и сделали. Вторым, более "умным" способом являются подсказки. Подсказки - это способ тонкого обучения пользователей тому, как они должны взаимодействовать. Мы рассматривали подсказки не как первый опыт, а как часть основного UX.
Подсказка № 1: при каждой загрузке страницы слайдер отскакивал вправо, сопровождаемый эффектом мерцания, указывая на действие, которое необходимо совершить.
Подсказка № 2: если пользователь нажимает на слайдер, это означает, что он хочет завершить действие и заплатить. Поэтому, чтобы зафиксировать это намерение и направить пользователя, ползунок отскакивает вправо, указывая на то, что необходимо сделать для завершения действия.
Настройка точки завершенияОбычно взаимодействие со слайдером считается завершенным, когда слайдер достигает конечной точки. В компании Swiggy, например, мы внедрили подобный слайдер несколько лет назад и обнаружили, что пользователи не доводят слайдер до 100% и покидают его на середине пути. Поэтому, учитывая опыт прошлого, мы определили область завершения на уровне 70%.
Мы также добавили несколько признаков, указывающих на изменение состояния: двойной шеврон внутри круга превращается в галочку и срабатывает тонкая тактильная обратная связь
Удобная область касания
Мы позаботились о том, чтобы область касания слайдера была больше, чем его видимая площадь, что позволяет пользователям комфортно взаимодействовать с ним.
Область касания ползунка
Приняв эти меры, мы были готовы поэкспериментировать с кнопкой-слайдером для быстрого оформления заказа. И вуаля! 🎉 После анализа данных стало ясно, что кнопка-слайдер добавляет "здоровое взаимодействие", чтобы избежать случайных нажатий, не влияя при этом на общее общение пользователей. Теперь для всех наших пользователей Swiggy работает функция быстрого оформления заказа с использованием слайдера для оплаты.
__________________________________________________
Больше полезных статей в моём телеграмм канале
https://t.me/designtusovka
Оригинальная статья (Открывается только с ВПН):
medium.com
Мелочь, а приятно
Ну лаконичненько?! Я кайфанул
Как я потратил 100к рублей, чтобы удобно вести списки
Короче, меня задолбало, что списки всё время теряются.
Раз за разом повторяется одна и та же ситуация. Знакомый советует фильм, я открываю заметки, где-то записываю. И эта запись навсегда растворяется в мировом пространства.
Это происходит со всеми списками. С идеями, знакомствами, заметками из книг, местами, где я был. Вся эта бесконечная череда списков постоянно теряется. Ты постоянно начинаешь их заново. Может бы это я такой странный, а другие ответственно всё раскладывают по полочкам.
Но есть же Notion и его аналоги! Я создам необходимые вкладки и буду ответственно вести! Ахахаха, нет. Оказалось, что открыть отдельное приложение, продраться сквозь интерфейс и найти нужный список — это слишком высокий порог входа, когда надо записать на лету.
Как выглядят мои заметки
Но есть же «Избранное» в телеге, личный чат, куда можно всё закидывать! Ага, через шаг это превращается в мусорную корзину из фоточек, ссылок на статьи и какие-то рандомные заметки. Я верю, что для кого-то всё это работает. Просто всё это плохо работает для меня.
Душа просила простого решения. Чтобы написал «#фильмы» и открылся список всех фильмов, которые мне советовали. И чтобы новый фильм в этот список можно было добавить командой «#фильмы Человек-Паук: Через вселенные».
Легко добавлять, легко находить, всё само раскладывается по полочкам. Так родилась идея сделать бот для телеги «Коллектор». Телега всегда открыта, это удобно. Фишку с тегами там вроде можно реализовать.
Конечно же, вначале я нарисовал логотип. Не вините, человек слаб
Первым делом попробовал собрать всё через конструктор ботов. Фиг там. Этот функционал через них сделать нельзя. Пришлось искать программиста. И спустя месяц мучений появилась первая версия. Работала именно так, как я описал. Пишешь в боте сообщение:
#игры Новая Зельда - надо глянуть
Бот автоматом создаёт коллекцию «Игры» и добавляет туда первый пункт. Спустя неделю видишь, что вышла Диабло 4 и пишешь:
#игры Диабло 4 - нужно взять отпуск
И бот добавляет к списку «Игры» новый пункт.
Очень удобно. Искать нужный список или открывать отдельное приложение не нужно. Телега всегда открыта, а бот заботливое собирает информацию по категориям. Когда появилось время поиграть, то просто пишешь в бот «#игры». И он заботливо всё показывает:
Новая Зельда - надо глянуть
Диабло 4, как давно я тебя ждал
Kena: Bridge of Spirits
GRIS - в инфакте советовали
Селестия
Я прожил с ботом месяц и понял, что это лучшее, что случилось в моей жизни. Заметки из книг, список знакомых, страны и города, где я был, идеи, списки вещей для поездок. Всё переехало в Коллектор. А мои знакомые стали использовать его, как простой менеджер задач. Не спрашивайте как, я без понятия.
Чтобы увидеть список достаточно было написать хештег
К сожалению, управлять коллекциями приходилось через команды. Поэтому мы взялись за вторую версию, чтобы сделать всё понятным не только мне. Сделать удобно, чего такого? Но доработки растянулись на несколько месяцев. Пришлось писать собственный фреймворк, так как существующие не поддерживали нужную логику.
Чтобы вывести все коллекции использовалась команда «#все»
Но этого того стоило. Бот оброс собственными UI-виджетами, построение ленты стало эргономичным. Появилась кнопка «Menu» и кнопки управления коллекциями. В списке всех коллекций теперь можно тапнуть и увидеть содержание. Сами списки тоже стали удобнее за счёт использования динамического пейджинга. Как только вы меняете содержание коллекции, то автоматически обновляется сообщение телеги, где она показывалась.
Кайф
Таких, казалось бы, маленьких удобных фич теперь много, они детально проработаны с позиции ui/ux, и делают процесс использования бота удобным.
Так же мы реализовали на уровне сервера систему анонимности, чтобы было невозможно сопоставить коллекции с пользователями. Сам был в этом заинтересован. Вкратце, нигде в базе не хранятся идентификаторы пользователей. Они подменяются «засоленным» md5-хэшем. И если обычный md5 можно реверсивно расшифровать, то salt делает это занятие бесперспективным. Проще говоря, мы (или гипотетический злоумышленник) не можем персонифицировать пользователя.
На всё это я потратил 100 тысяч рублей. Звучит, конечно, как безумие для такой простой задачи. Не говорю, что так надо делать. Я обычно ищу дешёвые решения, но тут не сложилось.
Команды рядом с коллекциями позволяют открыть список по клику.
Что в планах:
Социальные функции, чтобы можно было вести общие коллекции;
Возможность заливать готовый список;
Возможность переносить пункты между списками и объединять их.
Я пригласил потестить Коллектор друзей и знакомых. И сто пользователей создали две тысячи заметок за пару месяцев. Немножко радуюсь, что пригодилось не только мне. В общем, крутая штука. Сейчас мы вроде всё отполировали, чтобы дать публичную ссылку: https://t.me/collcoll_bot
Бот бесплатный. Никакой рекламы нет и не будет. Если есть идеи что ещё можно прикрутить, то пишете в каментах.
Мой первый пост на пикабу, он же личное мнение о UX
Привет мир Пикабу!!!
Я бы не стал писать на Пикабу, если бы не зашел на сайт великого, могучего и зеленого банка.
Прогуливаясь по сайту, я набрел на промо "революционной технологии", обладающей магической способностью - одним движением превращает зарплату в тыкву через NFC.
SberPay доступен каждому, красив, удобен, но....
.... пролистывание этой промо страницы вызывает старение пользователя.
Причины:
Овер "мильон" анимаций. Да, все красиво, но ужасно медленно.
Впустую растянутая страница. Бесконечность "бесконечно короче" промопейджа.
Некоторая графика заслуживает звание "Кринж года".
Пример №1
Да не особо. МИР Pay неплохо работает.
Да и в Google Pay хранится штрих-код любимого пивного магазинчика.
Пример №2.
Следующий пациент зайдите в палату...
Тут только ассоциация с продукцией под маркой ОГО! и одноименным гипермаркетом техники ОГО! Скрытая реклама, подумаете Вы.
Пример №3
Восторг невозможно описать.
Заменил бы на вариант ниже.
В защиту скажу, что UX подумали о тех кто не любит "тормозить" и дали возможность пролистать сразу до Q&A и сделали кнопку подключить)
ИМО("Х" удалена специально, т.к. мнение не скромное), Сбер сделал красивую страницу, потратил человеческие ресурсы на создание анимаций, вместо того что бы бросить разработчиков на действительно полезный функционал.
Прошу не судить строго за мое мнение)
Всем пока!
Испытайте боль в работе с интерфейсом
Хотите встать на место пользователя, и понять как юзеры страдают? Тогда эта игра для вас. Простая форма регистрации из 4 шагов и почти 8 минут, неплохо правда? А вы за сколько пройдете?
На досуге веду небольшой канал где пишу про интерфейсы и работу дизайнера. Забегайте на огонёк.
Тупость интерфейса Telegram UI stupid Mute button
Rage Quit по поводу кнопки "Заглушить" в самом низу всех пабликов и каналов. Ну реально тупость. Телеграм создан для уведомлений, ДАВАЙТЕ Е6анём кнопку на полэкрана чтобы их заглушить... Гении
Что купить, чтобы заниматься спортом на улице
Несмотря на капризы погоды, лето неумолимо приближается. Значит, занятия в спортивном зале или домашние тренировки получится заменить на активности под открытым небом. Собрали для вас товары, которые сделают уличные воркауты интереснее, увлекательнее и полезнее.
Мегамаркет дарит пикабушникам промокод килобайт. Он дает скидку 2 000 рублей на первую покупку от 4 000 рублей и действует до 31 мая. Полные правила здесь.
Для тех, кто привык заниматься один
В компактную поясную сумку поместятся телефон, ключи, кошелек или другие нужные мелочи. Во время тренировки все это не гремит и не мешает, но всегда находится под рукой. Материал сумки прочный и влагонепроницаемый, вещи в ней защищены от повреждений, царапин или пота.
С фитнес-резинкой можно тренировать все группы мышц: руки, ноги, кор, ягодицы. А еще она облегчает подтягивания и помогает мягко растягиваться. В сети можно найти огромное количество роликов с упражнениями разной степени сложности. Нагрузка легко дозируется: новичкам подойдет резинка с сопротивлением до 23 кг, опытным атлетам — до 57 кг. При этом оборудование максимально компактно и поместится даже в небольшую сумку.
Для тех, кому надоели обычные тренировки. Слэклайн — это стропа шириной 50 мм, с помощью которой осваивают хождение по канату. Тренажер учит сохранять баланс, прокачивает координацию и концентрацию, а еще дает отличную нагрузку на спину, руки и ноги.
Для активных занятий вдвоем
Настольный теннис — простой в освоении вид спорта, который отлично помогает размяться и тренирует скорость реакции. В комплект входят две ракетки, три мяча, сетка, накладка и чехол — все, что нужно, чтобы поиграть вечером во дворе с другом или устроить небольшие соревнования. Этот недорогой набор подойдет именно для развлечения и веселья, устанавливается почти на любой стол.
Еще один вид спорта, которым можно заниматься, даже не имея серьезной подготовки — бадминтон. С набором от Wish Steeltec вы сможете потренировать силу удара, побегать и просто хорошо провести время. Детали яркие, так что их трудно потерять даже на природе. Леска натянута прочно, ресурса ракеток должно хватить не на один сезон.
Фрисби воспринимается как простое пляжное развлечение. Тем не менее перекидывание друг другу тарелки задействует все группы мышц и развивает скорость реакции. Эта тарелка летит далеко и по понятной траектории — отличный снаряд для начала. Кстати, фрисби — это еще и ряд спортивных дисциплин со своими правилами и техническими сложностями, так что игра с друзьями может перерасти в серьезное увлечение.
Для большой компании
Стильный мяч из износостойкой резины отлично подходит для уличных тренировок. Вы сможете поиграть компанией в баскетбол или стритбол или просто отработать броски. При производстве используется технология сбалансированного сцепления: это значит, что снаряд не сбежит от вас и будет двигаться по стабильной траектории.
Футбол — один из самых популярных в России видов спорта. Играя, можно отлично побегать, потренировать меткость и отработать взаимодействие в команде. Футбольный мяч Torres Striker выполнен из качественного полиуретана и резины и выдержит не один десяток матчей, не потеряв упругости. Отличная балансировка и оптимальный размер делают его подходящим как для взрослых, так и для подростков. Он достаточно тяжелый, почти как в профессиональном спорте, так что совсем малышам не понравится.
Пляжный или обычный волейбол? А может быть, пионербол, как в детском лагере? Мяч TORRES SIMPLE COLOR подойдет для любой из этих игр. Камера отлично держит давление, поэтому вам не придется постоянно подкачивать его, а качественные материалы (полиуретан и бутил) сохраняют все характеристики даже при интенсивном использовании.
Для совмещения приятного и полезного
Многоскоростной велосипед с рамой 19-го размера подойдет как мужчинам, так и женщинам. Это отличный вариант для новичков: модель доступная, удобная. Поможет понять, нравится ли вам велоспорт. Конструкция велосипеда позволяет ездить по дорогам разных типов, поэтому вы сможете перемещаться по городу или отправиться в поход. Есть складной механизм — велосипед с ним легко возить в машине, на электричке и просто хранить в кладовке.
Более продвинутая модель для тех, кто уже оценил прелесть движения на двух колесах. Геометрия велосипеда предполагает вертикальную посадку. Это обеспечивает более удобное положение тела, чем на других байках. В конструкции предусмотрены детали для комфорта и безопасности: пружинная вилка с ходом 100 мм, сервисная подводка тросов и дисковые гидравлические тормоза.
Если вы не фанат велоспорта, но хотите получить свою дозу физической нагрузки, перемещаясь по городу, выбирайте самокат. В модели PLANK Magic 200 есть регулировка руля по высоте, надежные тормоза и прочная увеличенная дека из алюминия. Когда вы катаетесь на самокате, работают мышцы ног, ягодиц, спины и живота, а заодно добираетесь, куда нужно. Если вы решите сделать паузу в тренировках, самокат легко складывается для хранения.
Экипировка
Любая активность на свежем воздухе требует хорошей обуви, специально сделанной для занятий спортом. Яркие кроссовки Hoka RINCON 3 с облегченным весом амортизируют, снижают нагрузку на суставы. Выраженный рельеф подошвы обеспечивает сцепление с поверхностью вне зависимости от того, где проходит тренировка: на специальной площадке, асфальте или грунте.
Легкие женские кроссовки из линейки Clifton подходят для занятий на твердых покрытиях. Дышащий сетчатый верх поддерживает вентиляцию стоп, чтобы можно было тренироваться даже в жару. Подошва из легкой пены EVA гасит силу ударов. Кроссовки беговые, подходят для тренировок на длинных дистанциях.
Защита от солнца и перегрева
Во время занятий на свежем воздухе важно защитить голову от перегрева. С этим отлично справится легкая и светлая бейсболка — например, от GLHF. Она удобно сидит на голове, не сваливается и не отвлекает от занятий, благодаря сетке голова меньше потеет. Козырек жесткий и не мнется.
Не забудьте защитить кожу от солнца — чтобы не было мучительно больно на следующий день после тренировки под открытым небом. В этом поможет крем против пигментных пятен с сильной защитой от ультрафиолета SPF50. Водостойкая текстура легко наносится и быстро впитывается, действует два часа — потом крем нужно обновить.
Удобные и стильные солнцезащитные очки защищают глаза благодаря фильтру UV400, который поглощает до 99.99% ультрафиолета. Они выполнены из легких материалов и плотно прилегают к голове. Ударопрочные поликарбонатные линзы с антибликовым покрытием подходят для разных видов спорта.
Используйте промокод килобайт на Мегамаркете. Он дает скидку 2 000 рублей на первую покупку от 4 000 рублей и действует до 31 мая. Полные правила здесь.
Реклама ООО «МАРКЕТПЛЕЙС» (агрегатор) (ОГРН: 1167746803180, ИНН: 9701048328), юридический адрес: 105082, г. Москва, ул. Спартаковская площадь, д. 16/15, стр. 6