Михаил Рубанов написал о дизайне слайдера для быстрой оплаты.
— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал Slide to Unlock из самого первого айфона;
— Проработали состояния, анимации (метафора натяжения), вибрации, разные ответвления сценария (длительное ожидание оплаты, открытие экрана ввода карты при первой оплате), а также доступность этого элемента.
«Анимации помогают в самых разных ситуациях: учат, скрашивают ожидание или дают обратную связь. В любом случае, анимация должна быть осмысленна.
В самом начале мы должны научить людей пользоваться нашим слайдером. Сценариев несколько:
— при добавлении в корзину запускаем анимацию, которая показывает надпись и подсказывает, что нужно перетащить. Так научим новых пользователей;
— при тапе на кнопку делаем то же самое. Так переучим старых пользователей: теперь нужно не тапать, а тащить;
— время от времени ещё раз мигаем анимацией, чтобы привлечь внимание, если пропустили на прошлых этапах».
#slider #animation
— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал Slide to Unlock из самого первого айфона;
— Проработали состояния, анимации (метафора натяжения), вибрации, разные ответвления сценария (длительное ожидание оплаты, открытие экрана ввода карты при первой оплате), а также доступность этого элемента.
«Анимации помогают в самых разных ситуациях: учат, скрашивают ожидание или дают обратную связь. В любом случае, анимация должна быть осмысленна.
В самом начале мы должны научить людей пользоваться нашим слайдером. Сценариев несколько:
— при добавлении в корзину запускаем анимацию, которая показывает надпись и подсказывает, что нужно перетащить. Так научим новых пользователей;
— при тапе на кнопку делаем то же самое. Так переучим старых пользователей: теперь нужно не тапать, а тащить;
— время от времени ещё раз мигаем анимацией, чтобы привлечь внимание, если пропустили на прошлых этапах».
#slider #animation
Хабр
Анимации и вибрации: как задизайнить фидбэк слайдера оплаты
Кофе — продукт, который можно покупать и пить хоть несколько раз в день. Заказ в приложении Дринкит должен быть супер-пупер быстрым. В идеале, чтобы можно было даже не запускать его, а заказывать из...
Лена из Red Collar написала о слайдере для ввода суммы и проектировании кредитного калькулятора в целом.
— Поле для ввода суммы можно объединить со слайдером, чтобы пользователь указывал её, не переключаясь на клавиатуру;
— Кружок слайдера, который пользователь двигает, может быть небольшим, но с областью нажатия от 32 пикселей;
— Длина слайдера должна быть не маленькой, чтобы легко устанавливать нужное значение, но и не большой, чтобы взгляду и курсору не преодолевать большие расстояния по горизонтали;
— Если в слайдере можно указывать значения только с определённым шагом и вариантов для выбора немного, вместо поля со слайдером подойдёт Segmented contol;
— Если числа большие (стоимость недвижимости), округляйте вводимые слайдером суммы до 10000. Так проще воспринимать числа и обсуждать с кредитным менеджером условия;
— Для суммы первоначального взноса показывайте, какой процент она составляет от стоимости недвижимости;
— Для ввода суммы первоначального взноса и срока кредита можно добавить кнопки быстрого выбора популярных значений (например, для первоначального взноса — 15, 20, 25 и 30%);
— Не скрывайте размер переплаты и итоговую сумму, которую заплатит клиент;
— Расскажите о налоговом вычете, который можно получить;
— Покажите размер минимального дохода, необходимого для того, чтобы получить нужный кредит;
— Добавьте подсказки для терминов и пояснений к вычисленным суммам (например, как появилась сумма налогового вычета).
#slider #calculator #form
— Поле для ввода суммы можно объединить со слайдером, чтобы пользователь указывал её, не переключаясь на клавиатуру;
— Кружок слайдера, который пользователь двигает, может быть небольшим, но с областью нажатия от 32 пикселей;
— Длина слайдера должна быть не маленькой, чтобы легко устанавливать нужное значение, но и не большой, чтобы взгляду и курсору не преодолевать большие расстояния по горизонтали;
— Если в слайдере можно указывать значения только с определённым шагом и вариантов для выбора немного, вместо поля со слайдером подойдёт Segmented contol;
— Если числа большие (стоимость недвижимости), округляйте вводимые слайдером суммы до 10000. Так проще воспринимать числа и обсуждать с кредитным менеджером условия;
— Для суммы первоначального взноса показывайте, какой процент она составляет от стоимости недвижимости;
— Для ввода суммы первоначального взноса и срока кредита можно добавить кнопки быстрого выбора популярных значений (например, для первоначального взноса — 15, 20, 25 и 30%);
— Не скрывайте размер переплаты и итоговую сумму, которую заплатит клиент;
— Расскажите о налоговом вычете, который можно получить;
— Покажите размер минимального дохода, необходимого для того, чтобы получить нужный кредит;
— Добавьте подсказки для терминов и пояснений к вычисленным суммам (например, как появилась сумма налогового вычета).
#slider #calculator #form
Хабр
Проектируем дизайн честного кредитного калькулятора
Перед вами задача спроектировать калькулятор для банковского сервиса. Рассказываем, с чего начать, какие практики упростят работу пользователя и сделают калькулятор честным. Привет! Меня...